/* V1 responsive parity for V2 shared structural containers */
.bb-v2-builder-page,
.bb-v2-public-preview {
    --bb-v2-cinematic-inline-gutter: clamp(1rem, 5vw, 100px);
}

.bb-v2-builder-page .bb-v2-page-container {
    box-sizing: border-box;
    margin-left: auto;
    margin-right: auto;
    width: 100%;
}

@media (max-width: 999px) {
    .bb-v2-builder-page .bb-v2-page-container {
        max-width: none;
        width: calc(100% - 2.25rem);
    }

    .bb-v2-builder-page .bb-v2-page-container {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    .bb-v2-builder-page .bb-v2-structural-hero > .bb-v2-page-container:has(> .bb-v2-structural-form-shell--mobile-hero) {
        align-items: center !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 0.25rem;
        justify-content: center !important;
        padding-bottom: 1rem !important;
        padding-top: 2.5rem !important;
    }

    /* Vertical display only: larger gap between copy and form. */
    .bb-v2-builder-page .bb-v2-structural-hero > .bb-v2-page-container:has(> .bb-v2-structural-form-shell--orientation-1.bb-v2-structural-form-shell--mobile-hero) {
        gap: 2.5rem;
    }

    /* Embedded display keeps its natural top padding; only the gap applies. */
    .bb-v2-builder-page .bb-v2-structural-hero > .bb-v2-page-container.with-emb-form:has(> .bb-v2-structural-form-shell--mobile-hero) {
        padding-top: 0 !important;
    }

    .bb-v2-builder-page .bb-v2-structural-hero > .bb-v2-page-container:has(> .bb-v2-structural-form-shell--mobile-hero) > [data-bb-v2-hero-row] {
        flex: 0 0 auto;
        width: 100% !important;
    }

    .bb-v2-builder-page .bb-v2-structural-form-shell--mobile-hero#header-form,
    .bb-v2-builder-page .bb-v2-structural-form-shell--mobile-hero#header-form-horizontal {
        align-self: center;
        margin-left: 0 !important;
        max-width: min(31.25rem, 100%);
        width: 100% !important;
    }
}

@media (min-width: 1100px) and (max-width: 1499.99px) {
    .bb-v2-builder-page .bb-v2-page-container {
        max-width: 58.125rem;
    }
}

@media (min-width: 1500px) and (max-width: 1899.99px) {
    .bb-v2-builder-page .bb-v2-page-container {
        max-width: 78.125rem;
    }
}

@media (min-width: 1900px) {
    .bb-v2-builder-page .bb-v2-page-container {
        max-width: 87.5rem;
        width: 75%;
    }
}

@media (min-width: 1200px) and (max-width: 1899.99px) {
    .bb-v2-builder-page .bb-v2-page-container {
        width: 80%;
    }
}

@media (min-width: 1000px) {
    /* Vertical is one desktop layout regardless of the Hero picture mode.
       Reserve its natural form width; image-left/right only control placement. */
    .bb-v2-builder-page .bb-v2-structural-hero > .bb-v2-page-container:has(> #header-form.bb-v2-structural-form-shell--orientation-1) > #header-form.bb-v2-structural-form-shell--orientation-1,
    .bb-v2-public-preview .bb-v2-structural-hero > .bb-v2-page-container:has(> #header-form.bb-v2-structural-form-shell--orientation-1) > #header-form.bb-v2-structural-form-shell--orientation-1 {
        flex: 0 0 auto;
    }

    .bb-v2-builder-page .bb-v2-structural-hero > .bb-v2-page-container:has(> #header-form.bb-v2-structural-form-shell--orientation-1) > [data-bb-v2-hero-row],
    .bb-v2-public-preview .bb-v2-structural-hero > .bb-v2-page-container:has(> #header-form.bb-v2-structural-form-shell--orientation-1) > [data-bb-v2-hero-row] {
        min-width: 0;
    }

    /* Horizontal Hero remains a horizontal row in every picture placement.
       Its 930px design width follows the host page's desktop rem scaling, then
       the existing below-1000px bridge replaces it with the mobile form. */
    .bb-v2-builder-page .horizontal-form-container > #header-form-horizontal,
    .bb-v2-public-preview .horizontal-form-container > #header-form-horizontal {
        max-width: 100% !important;
        width: min(58.125rem, 100%) !important;
    }

    .bb-v2-builder-page .horizontal-form-container > #header-form-horizontal > div,
    .bb-v2-builder-page .horizontal-form-container > #header-form-horizontal iframe,
    .bb-v2-public-preview .horizontal-form-container > #header-form-horizontal > div,
    .bb-v2-public-preview .horizontal-form-container > #header-form-horizontal iframe {
        max-width: 100% !important;
        width: 100% !important;
    }
}

.bb-v2-builder-page .organisation-info-container {
    display: grid;
    flex: 0 1 44rem;
    grid-template-columns: 2fr 3fr;
    max-width: 44rem;
    min-width: 0;
}

.bb-v2-builder-page .site-footer__cover .page-container > .d-flex.justify-content-between {
    gap: clamp(1rem, 2vw, 2rem);
    justify-content: flex-start !important;
}

.bb-v2-builder-page .organisation-info-container:has(> .organisation-info-column:only-child) {
    grid-template-columns: 1fr;
}

.bb-v2-builder-page .organisation-info-container + .site-footer__form:not(.d-none) {
    flex: 0 0 auto;
}

/* Columns stack beside the CTA only when it is a REAL embedded form
   (owner ruling); button/hidden CTAs keep LINKS/INFORMATION on one row. */
.bb-v2-builder-page .site-footer__cover .page-container > .d-flex.justify-content-between:has(> .site-footer__form--embedded:not(.d-none)) .organisation-info-container:has(> .organisation-info-column:nth-child(2)) {
    flex-basis: 27rem;
    grid-template-columns: 1fr;
    max-width: 27rem;
}

.bb-v2-builder-page .site-footer__cover .page-container > .d-flex.justify-content-between:has(> .site-footer__form--embedded:not(.d-none)) .organisation-info-container:has(> .organisation-info-column:nth-child(2)) .organisation-info-column:first-child {
    border-bottom: 1px solid currentColor;
    padding-bottom: 3.25rem;
}

.bb-v2-builder-page .site-footer__cover .page-container > .d-flex.justify-content-between:has(> .site-footer__form--embedded:not(.d-none)) .organisation-info-container:has(> .organisation-info-column:nth-child(2)) .organisation-info-column:last-child {
    padding-top: 3.25rem;
}

.bb-v2-builder-page .organisation-info-column:first-child {
    border-bottom-color: currentColor;
}

.bb-v2-builder-page .site-footer__info-branding img,
.bb-v2-builder-page .site-branding img {
    object-fit: contain;
}

.bb-v2-builder-page .bb-v2-footer-branding-editable {
    align-items: center;
    display: inline-flex;
    gap: 16px;
}

.bb-v2-builder-page .bb-v2-footer-branding-editable > a {
    align-items: center;
    display: inline-flex;
    line-height: 1.2;
}

.bb-v2-builder-page .social-links .bb-v2-structural-social-icon {
    background: currentColor;
}

.bb-v2-builder-page .site-footer a:hover,
.bb-v2-builder-page .site-footer a:focus {
    color: var(--bb-v2-link-color, currentColor) !important;
    text-decoration: underline !important;
}

.bb-v2-builder-page .site-footer__info-branding a:first-of-type:hover,
.bb-v2-builder-page .site-footer__info-branding a:first-of-type:focus,
.bb-v2-builder-page .social-links a:hover,
.bb-v2-builder-page .social-links a:focus {
    text-decoration: none !important;
}

.bb-v2-builder-page .rights-row a,
.bb-v2-builder-page .rights-row a:hover,
.bb-v2-builder-page .rights-row a:focus {
    color: inherit !important;
}

.bb-v2-builder-page .rights-row a:hover,
.bb-v2-builder-page .rights-row a:focus {
    text-decoration: underline !important;
}

.bb-v2-builder-page .site-footer a.organisation-info-row:hover,
.bb-v2-builder-page .site-footer a.organisation-info-row:focus {
    color: inherit !important;
    text-decoration: underline !important;
}

@media (min-width: 999px) and (max-width: 1300px) {
    .bb-v2-builder-page .organisation-info-container {
        flex-basis: 22rem;
        grid-template-columns: 1fr;
        max-width: 22rem;
        width: 22rem;
    }

    .bb-v2-builder-page .organisation-info-container .organisation-info-column:first-child {
        border-bottom: 1px solid currentColor;
        padding-bottom: 3.25rem;
    }

    .bb-v2-builder-page .organisation-info-container .organisation-info-column:last-child {
        padding-top: 3.25rem;
    }
}

@media (max-width: 998px) {
    .bb-v2-builder-page .site-footer__cover .bb-v2-page-container > .d-flex.justify-content-between {
        align-items: flex-start;
        display: flex !important;
        flex-direction: column !important;
        gap: 2rem;
        justify-content: flex-start !important;
        width: 100%;
    }

    .bb-v2-builder-page .organisation-info-container {
        display: grid;
        flex: none;
        grid-template-columns: 1fr;
        max-width: min(22rem, 100%);
        order: 2;
        width: min(22rem, 100%);
    }

    .bb-v2-builder-page .organisation-info-container .organisation-info-column:nth-last-child(2):first-child {
        border-bottom: 1px solid currentColor;
        padding-bottom: 3.25rem;
    }

    .bb-v2-builder-page .organisation-info-container .organisation-info-column:nth-last-child(2):last-child {
        padding-top: 3.25rem;
    }

    .bb-v2-builder-page .site-footer__cover .bb-v2-page-container > .d-flex.justify-content-between:has(> .site-footer__form:not(.d-none)) .organisation-info-container:has(> .organisation-info-column:nth-child(2)) {
        display: grid;
        flex: none;
        grid-template-columns: 1fr;
        max-width: none;
        order: 2;
        width: min(22rem, 100%);
    }

    .bb-v2-builder-page .organisation-info-column {
        min-width: 0;
    }

    .bb-v2-builder-page .organisation-info-row,
    .bb-v2-builder-page .organisation-info-row a {
        overflow-wrap: anywhere;
    }

    .bb-v2-builder-page .site-footer__form {
        align-self: start;
        max-width: min(22rem, 100%);
        min-width: 0;
        order: 1;
        padding: 0 !important;
        width: min(22rem, 100%);
    }

    .bb-v2-builder-page .site-footer__form:has(#contact-form-bizbaby),
    .bb-v2-builder-page .site-footer__form:has(iframe) {
        display: flex !important;
    }

    .bb-v2-builder-page .site-footer__form #footer-form,
    .bb-v2-builder-page .site-footer__form #footer-form iframe {
        box-sizing: border-box;
        max-width: 100% !important;
        min-width: 0;
        width: 100% !important;
    }

    .bb-v2-builder-page .site-footer__form .show-form-button {
        align-items: start;
        display: grid;
        justify-content: start;
    }

    .bb-v2-builder-page .site-footer__form .show-form-button .btn {
        min-width: 0;
        white-space: normal;
        width: auto;
    }
}

@media (max-width: 999.98px) {
    .bb-v2-builder-page .page-section {
        padding-bottom: var(--bb-v2-section-padding-bottom-mobile, 30px) !important;
        padding-top: var(--bb-v2-section-padding-top-mobile, 30px) !important;
    }

    .bb-v2-builder-page--preview .bb-features,
    .bb-v2-builder-page--preview .bb-reviews,
    .bb-v2-public-preview .bb-features,
    .bb-v2-public-preview .bb-reviews {
        padding-bottom: calc(var(--bb-v2-section-padding-bottom, 0px) / 2) !important;
        padding-top: calc(var(--bb-v2-section-padding-top, 0px) / 2) !important;
    }
}

.bb-v2-builder-page.bb-v2-builder-page--preview {
    margin: 0 !important;
}


/* Mobile nav categories open on CLICK only - the unscoped desktop
   :hover/:focus-within rules otherwise pin the dropdown open until blur. */
@media (max-width: 999px) {
    #primary-menu .nav-category-menu-item:hover .nav-category-dropdown,
    #primary-menu .nav-category-menu-item:focus-within .nav-category-dropdown {
        display: none;
    }

    /* The open item must GROW with its in-flow dropdown, or the following
       items (Client Login) stack over the category links. */
    #primary-menu .nav-category-menu-item.is-open {
        display: block;
        height: auto;
    }

    #primary-menu .nav-category-menu-item.is-open .nav-category-dropdown {
        display: block;
        margin: 0.25rem 0 1rem;
        /* In the burger menu the dropdown must occupy FLOW space: absolutely
           positioned, it painted underneath the following items (Client
           Login sat on top of every category link - taps opened the login
           modal instead of navigating). */
        position: static;
        /* legacy nav CSS floats .sub-menu - a float never expands the parent
           item, so the list kept stacking Client Login over the dropdown */
        float: none;
        box-shadow: none;
        width: 100%;
    }

    #primary-menu .nav-category-menu-item.is-open .nav-category-dropdown li {
        padding: 0.375rem 0;
    }
}


/* V2 fluid container: V1 steps the content width down to 58.125rem (930px)
   between 1100-1500px and drops the cap entirely under 1100px, causing the
   big shrink-then-full-bleed jumps. Keep one cap with proportional gaps. */
@media (min-width: 1200px) and (max-width: 1499.99px) {
    .bb-v2-builder-page .section-container,
    .bb-v2-builder-page section .page-container,
    .bb-v2-builder-page footer .page-container,
    .bb-v2-builder-page #site-navigation .page-container,
    .bb-v2-public-preview .section-container,
    .bb-v2-public-preview section .page-container,
    .bb-v2-public-preview footer .page-container,
    .bb-v2-public-preview #site-navigation .page-container {
        /* 75rem = 80% of 1500px, so the width is continuous across the
           1500px boundary where V1's 80% rule takes over. */
        max-width: 75rem;
        width: 88%;
    }
}

@media (min-width: 1000px) and (max-width: 1199.99px) {
    .bb-v2-builder-page .section-container,
    .bb-v2-builder-page section .page-container,
    .bb-v2-builder-page footer .page-container,
    .bb-v2-builder-page #site-navigation .page-container,
    .bb-v2-public-preview .section-container,
    .bb-v2-public-preview section .page-container,
    .bb-v2-public-preview footer .page-container,
    .bb-v2-public-preview #site-navigation .page-container {
        max-width: 75rem;
        width: 92%;
    }
}

/* Under 1100px keep small side breathing room instead of full-bleed. */
@media (min-width: 768px) and (max-width: 999.99px) {
    .bb-v2-builder-page .page-section,
    .bb-v2-public-preview .page-section {
        padding-left: 1.5rem;
        padding-right: 1.5rem;
    }
}


/* The menu container hides at 999px but V1 only shows the burger below
   800px, leaving a 800-999px dead zone with no navigation. Show the burger
   as soon as the menu hides, and let the toggled menu open in that range. */
@media (max-width: 999px) {
    .bb-v2-builder-page .main-navigation .menu-toggle:not(.menu-cross),
    .bb-v2-public-preview .main-navigation .menu-toggle:not(.menu-cross) {
        display: block;
    }

    .bb-v2-builder-page .main-navigation.toggled .primary-menu-container,
    .bb-v2-public-preview .main-navigation.toggled .primary-menu-container,
    .bb-v2-builder-page .main-navigation.toggled .primary-menu-container ul,
    .bb-v2-public-preview .main-navigation.toggled .primary-menu-container ul {
        display: block;
    }
}

/* V1 scales the ROOT font with the viewport (clamp up to 40px), which makes
   rem-based text outgrow fixed/inline-px components on very wide or
   zoomed-out screens. Cap the growth on V2 pages. */
@media (min-width: 2000px) {
    html:has(.bb-v2-builder-page),
    html:has(.bb-v2-public-preview) {
        font-size: 20px;
    }
}

/* Empty-gallery placeholder mosaics ONLY: keep the designed proportions
   instead of spreading placeholder tiles across ultra-wide containers.
   Real galleries must fill their container like V1 (owner report: the
   unscoped cap left side gaps beside wide-screen galleries). */
.bb-v2-public-preview .bb-gallery-mosaic-wrap--placeholder,
.bb-v2-builder-page .bb-gallery-mosaic-wrap--placeholder {
    margin-left: auto;
    margin-right: auto;
    max-width: 75rem;
}


/* Smart mosaic: 3/5/7 galleries keep their desktop accent tile, but on
   mobile V1 hides the big tile entirely (d-none d-md-block) - instead,
   every image shows as a normal stacked tile. */
@media (max-width: 767.98px) {
    .bb-v2-builder-page .page-block.images .bb-gallery-mosaic-wrap,
    .bb-v2-public-preview .page-block.images .bb-gallery-mosaic-wrap {
        flex-direction: column;
        row-gap: 1rem;
    }

    .bb-v2-builder-page .page-block.images .mosaic-5-lg,
    .bb-v2-builder-page .page-block.images .mosaic-7-lg,
    .bb-v2-public-preview .page-block.images .mosaic-5-lg,
    .bb-v2-public-preview .page-block.images .mosaic-7-lg {
        display: block !important;
        height: 14.375rem;
        min-width: 0;
        width: 100%;
    }

    .bb-v2-builder-page .page-block.images .mosaic-5-lg img,
    .bb-v2-builder-page .page-block.images .mosaic-7-lg img,
    .bb-v2-public-preview .page-block.images .mosaic-5-lg img,
    .bb-v2-public-preview .page-block.images .mosaic-7-lg img {
        height: 100%;
        max-height: 14.375rem;
        object-fit: cover;
        width: 100%;
    }
}

/* ---- Owner mobile rulings 2026-07-04 ---- */

/* Media blocks on mobile: one uniform height - the full-size video grows a
   little, the image/video content blocks stop rendering ~500px portraits. */
@media (max-width: 767.98px) {
    .bb-v2-builder-page .bb-full-video__frame-wrap,
    .bb-v2-public-preview .bb-full-video__frame-wrap,
    .bb-v2-builder-page .bb-full-video__frame,
    .bb-v2-public-preview .bb-full-video__frame,
    /* boxed variants wrap the media in .bb-image-content__box without a
       .page-block ancestor - scope by the media class alone (owner: bottom
       video still rendered portrait on mobile). */
    .bb-v2-builder-page .bb-image-content__img,
    .bb-v2-public-preview .bb-image-content__img,
    .bb-v2-builder-page .bb-video-content__frame,
    .bb-v2-public-preview .bb-video-content__frame,
    /* bottom-layout variants carry a higher-specificity 31.25rem pin -
       match it or bottom videos stay portrait on mobile */
    .bb-v2-builder-page .page-block.text-bottom-image .bb-image-content__img,
    .bb-v2-public-preview .page-block.text-bottom-image .bb-image-content__img,
    .bb-v2-builder-page .page-block.text-bottom-image .bb-video-content__frame,
    .bb-v2-public-preview .page-block.text-bottom-image .bb-video-content__frame {
        height: 62vw !important;
        min-height: 0 !important;
    }
}

@media (max-width: 999px) {
    /* Side-by-side conversion layouts stack on mobile: text above form.
       The #template-demo-frame variants must outgun the desktop side-pin
       rule, which carries the same ID prefix. */
    .bb-v2-builder-page .conversions-block-content.v3:not(.bb-conv-orient-2),
    .bb-v2-public-preview .conversions-block-content.v3:not(.bb-conv-orient-2),
    .bb-v2-builder-page .conversions-block-content.v4:not(.bb-conv-orient-2),
    .bb-v2-public-preview .conversions-block-content.v4:not(.bb-conv-orient-2),
    #template-demo-frame .conversions-block .conversions-block-content.v3:not(.bb-conv-orient-2),
    #template-demo-frame .conversions-block .conversions-block-content.v4:not(.bb-conv-orient-2) {
        flex-direction: column-reverse !important;
        row-gap: 1.5rem;
    }

    .bb-v2-builder-page .conversions-block-content.v3:not(.bb-conv-orient-2) > .column,
    .bb-v2-public-preview .conversions-block-content.v3:not(.bb-conv-orient-2) > .column,
    .bb-v2-builder-page .conversions-block-content.v4:not(.bb-conv-orient-2) > .column,
    .bb-v2-public-preview .conversions-block-content.v4:not(.bb-conv-orient-2) > .column,
    #template-demo-frame .conversions-block .conversions-block-content.v3:not(.bb-conv-orient-2) > .column,
    #template-demo-frame .conversions-block .conversions-block-content.v4:not(.bb-conv-orient-2) > .column {
        width: 100% !important;
    }

    .bb-v2-builder-page .conversions-block-content.v3:not(.bb-conv-orient-2) > .bb-conversion-form__form-col,
    .bb-v2-public-preview .conversions-block-content.v3:not(.bb-conv-orient-2) > .bb-conversion-form__form-col,
    .bb-v2-builder-page .conversions-block-content.v4:not(.bb-conv-orient-2) > .bb-conversion-form__form-col,
    .bb-v2-public-preview .conversions-block-content.v4:not(.bb-conv-orient-2) > .bb-conversion-form__form-col,
    #template-demo-frame .conversions-block .conversions-block-content.v3:not(.bb-conv-orient-2) > .bb-conversion-form__form-col,
    #template-demo-frame .conversions-block .conversions-block-content.v4:not(.bb-conv-orient-2) > .bb-conversion-form__form-col {
        justify-content: center !important;
    }

    /* The mobile clone of a horizontal form (and every vertical form) keeps
       the snippet's natural width - uncapped wide iframes render giant type,
       narrow padded boxes rendered tiny ones. */
    .bb-v2-builder-page .bb-conv-form-mobile .bb-conversion-form__form iframe,
    .bb-v2-public-preview .bb-conv-form-mobile .bb-conversion-form__form iframe {
        margin-left: auto;
        margin-right: auto;
        max-width: 26.25rem;
    }
}

@media (max-width: 439.98px) {
    .bb-v2-builder-page .bb-conversion-form__form iframe[src*="/snippet/job-request/show"],
    .bb-v2-public-preview .bb-conversion-form__form iframe[src*="/snippet/job-request/show"],
    .bb-v2-builder-page .bb-conversion-form__form iframe[src*="/snippet/service-request/show"],
    .bb-v2-public-preview .bb-conversion-form__form iframe[src*="/snippet/service-request/show"] {
        box-sizing: border-box;
        max-width: 100%;
        width: 100% !important;
    }
}

/* Text Section: nothing follows the text - kill the trailing spacing the
   shared intro carries for blocks with content below (owner report). */
.bb-v2-builder-page .bb-text-section .bb-block-intro,
.bb-v2-public-preview .bb-text-section .bb-block-intro {
    margin-bottom: 0 !important;
}

.bb-v2-builder-page .bb-text-section .bb-block-intro > :last-child,
.bb-v2-public-preview .bb-text-section .bb-block-intro > :last-child {
    margin-bottom: 0 !important;
}

/* Mobile slide-out menu follows the header colors (owner: panel background
   must match the header, the X follows the nav text color). The vars are set
   inline on #site-navigation by header_menu.blade. */
@media (max-width: 999px) {
    .bb-v2-builder-page .main-navigation .primary-menu-container,
    .bb-v2-public-preview .main-navigation .primary-menu-container {
        background: var(--bb-v2-header-solid-bg, #222);
    }
    .bb-v2-builder-page .main-navigation .menu-cross,
    .bb-v2-public-preview .main-navigation .menu-cross {
        color: var(--bb-v2-header-text, #fff);
    }
}

/* Logo + company name sit centered in the bar: the V1 base nudges the links
   3px down and pads the branding asymmetrically, which reads bottom-aligned
   inside the floating pill. */
.bb-v2-builder-page .main-navigation .site-branding,
.bb-v2-public-preview .main-navigation .site-branding {
    padding: 0;
}
.bb-v2-builder-page .main-navigation .site-branding a,
.bb-v2-public-preview .main-navigation .site-branding a {
    top: 0;
}

/* Slide-out menu items keep a right inset too — the solid phone button used
   to run flush against the panel edge (owner: button too wide for container). */
@media (max-width: 999px) {
    .bb-v2-builder-page .main-navigation .primary-menu-container ul li,
    .bb-v2-public-preview .main-navigation .primary-menu-container ul li {
        margin-right: 1.5rem;
    }

    /* The panel is positioned inside the header's .page-container, which on
       phones is calc(100% - 2.25rem) wide and centered. Pull it out by that
       1.125rem gutter so it meets the screen's right edge (owner: the menu
       opened left of a strip of page). Cinematic width has no gutter there. */
    .bb-v2-builder-page .main-navigation .primary-menu-container,
    .bb-v2-public-preview .main-navigation .primary-menu-container {
        right: -1.125rem;
    }
    .bb-v2-page--cinematic .main-navigation .primary-menu-container {
        right: 0;
    }

    /* A filled (pill/square) phone button carries its padding inside its
       fill, so it sat right under the link above. Give it the gap a plain
       link gets from its own padding. Plain-link phone style is unchanged. */
    .bb-v2-builder-page .main-navigation .primary-menu-container #primary-menu > li > a[type="button"],
    .bb-v2-public-preview .main-navigation .primary-menu-container #primary-menu > li > a[type="button"] {
        margin-top: 1rem;
    }
}

/* Cinematic is a page layout mode. Body blocks and the structural inner
   containers share one gutter while their backgrounds remain full bleed. */
.bb-v2-builder-page .page-section.bb-section--cinematic,
.bb-v2-public-preview .page-section.bb-section--cinematic {
    padding-left: var(--bb-v2-cinematic-inline-gutter) !important;
    padding-right: var(--bb-v2-cinematic-inline-gutter) !important;
}

.bb-v2-builder-page .page-section.bb-section--cinematic > .section-container,
.bb-v2-public-preview .page-section.bb-section--cinematic > .section-container {
    max-width: none !important;
    width: 100% !important;
}

.bb-v2-page--cinematic #site-navigation > .page-container,
.bb-v2-page--cinematic .bb-v2-page-container {
    box-sizing: border-box;
    max-width: none !important;
    padding-left: var(--bb-v2-cinematic-inline-gutter) !important;
    padding-right: var(--bb-v2-cinematic-inline-gutter) !important;
    width: 100% !important;
}

.bb-v2-builder-page .bb-features--separators-between .bb-feature-card,
.bb-v2-public-preview .bb-features--separators-between .bb-feature-card {
    position: relative;
}

@media (min-width: 1000px) {
    .bb-v2-builder-page .bb-features--separators-between.bb-features--cols-2 .bb-feature-card:not(:nth-child(2n)):not(:last-child)::after,
    .bb-v2-public-preview .bb-features--separators-between.bb-features--cols-2 .bb-feature-card:not(:nth-child(2n)):not(:last-child)::after,
    .bb-v2-builder-page .bb-features--separators-between.bb-features--cols-3 .bb-feature-card:not(:nth-child(3n)):not(:last-child)::after,
    .bb-v2-public-preview .bb-features--separators-between.bb-features--cols-3 .bb-feature-card:not(:nth-child(3n)):not(:last-child)::after,
    .bb-v2-builder-page .bb-features--separators-between.bb-features--cols-4 .bb-feature-card:not(:nth-child(4n)):not(:last-child)::after,
    .bb-v2-public-preview .bb-features--separators-between.bb-features--cols-4 .bb-feature-card:not(:nth-child(4n)):not(:last-child)::after {
        background: var(--bb-features-separator-color, currentColor);
        content: "";
        inset: 0 -0.75rem 0 auto;
        opacity: 0.55;
        position: absolute;
        width: 1px;
    }

    .bb-v2-builder-page .bb-features--separators-between.bb-features--cols-2 .bb-feature-card:not(:nth-child(2n)):not(:last-child)::after,
    .bb-v2-public-preview .bb-features--separators-between.bb-features--cols-2 .bb-feature-card:not(:nth-child(2n)):not(:last-child)::after,
    .bb-v2-builder-page .bb-features--separators-between.bb-features--cols-3 .bb-feature-card:not(:nth-child(3n)):not(:last-child)::after,
    .bb-v2-public-preview .bb-features--separators-between.bb-features--cols-3 .bb-feature-card:not(:nth-child(3n)):not(:last-child)::after {
        right: -1.25rem;
    }
}

@media (max-width: 999.98px) {
    .bb-v2-builder-page .bb-features--separators-between .bb-feature-card:not(:last-child)::after,
    .bb-v2-public-preview .bb-features--separators-between .bb-feature-card:not(:last-child)::after {
        background: var(--bb-features-separator-color, currentColor);
        bottom: -0.46875rem;
        content: "";
        height: 1px;
        left: 0;
        opacity: 0.55;
        position: absolute;
        right: 0;
    }
}

.bb-v2-builder-page .bb-paragraph-list--view-timeline .bb-paragraph-list__items,
.bb-v2-public-preview .bb-paragraph-list--view-timeline .bb-paragraph-list__items {
    counter-reset: bb-timeline-step;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    position: relative;
}

.bb-v2-builder-page .bb-paragraph-list--view-timeline .bb-paragraph-list__items::before,
.bb-v2-public-preview .bb-paragraph-list--view-timeline .bb-paragraph-list__items::before {
    background: var(--bb-timeline-line-color, currentColor);
    content: "";
    height: 1px;
    left: 0.375rem;
    opacity: 0.6;
    position: absolute;
    right: 0.375rem;
    top: 0.375rem;
    z-index: 1;
}

.bb-v2-builder-page .bb-paragraph-list--view-timeline .bb-paragraph-card,
.bb-v2-public-preview .bb-paragraph-list--view-timeline .bb-paragraph-card {
    counter-increment: bb-timeline-step;
    margin: 0;
    min-width: 0;
    padding: 1.35rem 2rem 0 0 !important;
    position: relative;
}

.bb-v2-builder-page .bb-paragraph-list--view-timeline .bb-paragraph-card::before,
.bb-v2-public-preview .bb-paragraph-list--view-timeline .bb-paragraph-card::before {
    background: var(--bb-timeline-line-color, currentColor);
    border: 2px solid var(--bb-timeline-line-color, currentColor);
    border-radius: 50%;
    content: "";
    height: 0.75rem;
    left: 0;
    position: absolute;
    top: 0;
    width: 0.75rem;
    z-index: 2;
}

/* Keep editor actions off the timeline rail and its step markers. */
.bb-v2-builder-page .bb-paragraph-list--view-timeline .bb-paragraph-card > .bb-editor-hotspot--top-left {
    left: auto;
    right: 2rem;
    top: -2.25rem;
}

.bb-v2-builder-page .bb-paragraph-list--view-timeline .bb-paragraph-card > .bb-editor-hotspot--top-right {
    right: 0;
    top: -2.25rem;
}

.bb-v2-builder-page .bb-paragraph-card__step-label,
.bb-v2-public-preview .bb-paragraph-card__step-label {
    display: none;
}

/* The step number sits in the card's flow, so a larger number pushes the title down
   instead of covering it. The gap below grows with the number's own size. */
.bb-v2-builder-page .bb-paragraph-list--view-timeline .bb-paragraph-card__step-label,
.bb-v2-public-preview .bb-paragraph-list--view-timeline .bb-paragraph-card__step-label {
    display: block;
    font-size: 0.75rem;
    line-height: 1.1;
    margin: 0 0 max(0.625rem, 0.35em);
    position: static;
}

.bb-v2-builder-page .bb-paragraph-list--view-timeline .bb-paragraph-card__step-label:empty::before,
.bb-v2-public-preview .bb-paragraph-list--view-timeline .bb-paragraph-card__step-label:empty::before {
    content: counter(bb-timeline-step, decimal-leading-zero);
}

@media (max-width: 767.98px) {
    .bb-v2-builder-page .bb-paragraph-list--view-timeline .bb-paragraph-list__items,
    .bb-v2-public-preview .bb-paragraph-list--view-timeline .bb-paragraph-list__items {
        display: block;
    }

    /* On phones the number sits beside its dot. The rail starts at the first number's
       centre: --bb-timeline-label-size (set on the items container) carries the
       section's number size; with no stored size the value is invalid, the margin
       falls back to 0 and the default 12px number lines up as before. */
    .bb-v2-builder-page .bb-paragraph-list--view-timeline .bb-paragraph-list__items::before,
    .bb-v2-public-preview .bb-paragraph-list--view-timeline .bb-paragraph-list__items::before {
        bottom: 2rem;
        height: auto;
        left: 0.375rem;
        margin-top: max(0px, calc(var(--bb-timeline-label-size) * 0.55 - 0.375rem));
        right: auto;
        top: 0.375rem;
        width: 1px;
    }

    .bb-v2-builder-page .bb-paragraph-list--view-timeline .bb-paragraph-card,
    .bb-v2-public-preview .bb-paragraph-list--view-timeline .bb-paragraph-card {
        padding: 0 0 2.5rem 2.25rem !important;
    }

    /* The last step ends the list: no space under it, and the rail stops at
       its last line instead of running into that space. */
    .bb-v2-builder-page .bb-paragraph-list--view-timeline .bb-paragraph-card:last-child,
    .bb-v2-public-preview .bb-paragraph-list--view-timeline .bb-paragraph-card:last-child {
        padding-bottom: 0 !important;
    }

    .bb-v2-builder-page .bb-paragraph-list--view-timeline .bb-paragraph-list__items:has(> .bb-paragraph-card:last-child)::before,
    .bb-v2-public-preview .bb-paragraph-list--view-timeline .bb-paragraph-list__items:has(> .bb-paragraph-card:last-child)::before {
        bottom: 0;
    }

    /* Every Paragraph List view: the last item keeps no bottom margin on phones. */
    .bb-v2-builder-page .bb-paragraph-list__items > .bb-paragraph-card:last-child,
    .bb-v2-public-preview .bb-paragraph-list__items > .bb-paragraph-card:last-child {
        margin-bottom: 0 !important;
    }

    /* The number draws its own dot, centred on its first line at whatever size the
       number renders (section size, its own size, or the phone-reduced size). */
    .bb-v2-builder-page .bb-paragraph-list--view-timeline .bb-paragraph-card::before,
    .bb-v2-public-preview .bb-paragraph-list--view-timeline .bb-paragraph-card::before {
        display: none;
    }

    .bb-v2-builder-page .bb-paragraph-list--view-timeline .bb-paragraph-card__step-label,
    .bb-v2-public-preview .bb-paragraph-list--view-timeline .bb-paragraph-card__step-label {
        margin-bottom: max(1rem, 0.35em);
        position: relative;
    }

    .bb-v2-builder-page .bb-paragraph-list--view-timeline .bb-paragraph-card__step-label::after,
    .bb-v2-public-preview .bb-paragraph-list--view-timeline .bb-paragraph-card__step-label::after {
        background: var(--bb-timeline-line-color, currentColor);
        border: 2px solid var(--bb-timeline-line-color, currentColor);
        border-radius: 50%;
        box-sizing: border-box;
        content: "";
        height: 0.75rem;
        left: -2.25rem;
        position: absolute;
        top: 0.55em;
        transform: translateY(-50%);
        width: 0.75rem;
        z-index: 2;
    }

    .bb-v2-builder-page .bb-paragraph-list--view-timeline .bb-paragraph-card > .bb-editor-hotspot--top-left {
        left: auto;
        right: 2rem;
        top: -0.25rem;
    }

    .bb-v2-builder-page .bb-paragraph-list--view-timeline .bb-paragraph-card > .bb-editor-hotspot--top-right {
        right: 0;
        top: -0.25rem;
    }
}

/* ============================================================
   Cinema composition controls. Structural defaults only — no
   palette. Wide/left/content are the legacy defaults and add
   no visual change so existing pages render byte-identical.
   ============================================================ */

/* Text Section: editorial copy column width (applies to the intro box). */
.bb-v2-builder-page .bb-text-section--copy-narrow .bb-text-section__intro,
.bb-v2-public-preview .bb-text-section--copy-narrow .bb-text-section__intro {
    max-width: clamp(19rem, 42%, 40rem);
}

.bb-v2-builder-page .bb-text-section--copy-medium .bb-text-section__intro,
.bb-v2-public-preview .bb-text-section--copy-medium .bb-text-section__intro {
    max-width: clamp(24rem, 60%, 54rem);
}

/* Copy placement positions the column; text alignment stays independent. */
.bb-v2-builder-page .bb-text-section--place-center .bb-text-section__intro,
.bb-v2-public-preview .bb-text-section--place-center .bb-text-section__intro {
    margin-left: auto;
    margin-right: auto;
}

.bb-v2-builder-page .bb-text-section--place-right .bb-text-section__intro,
.bb-v2-public-preview .bb-text-section--place-right .bb-text-section__intro {
    margin-left: auto;
}

/* Tall section keeps deliberate negative space around a short copy column. */
.bb-v2-builder-page .bb-text-section--height-tall,
.bb-v2-public-preview .bb-text-section--height-tall {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 70vh;
}

.bb-v2-builder-page .bb-text-section--height-tall > .bb-text-section__content-wrap,
.bb-v2-public-preview .bb-text-section--height-tall > .bb-text-section__content-wrap {
    width: 100%;
}

@media (max-width: 767.98px) {
    .bb-v2-builder-page .bb-text-section--copy-narrow .bb-text-section__intro,
    .bb-v2-public-preview .bb-text-section--copy-narrow .bb-text-section__intro,
    .bb-v2-builder-page .bb-text-section--copy-medium .bb-text-section__intro,
    .bb-v2-public-preview .bb-text-section--copy-medium .bb-text-section__intro {
        max-width: 100%;
    }

    .bb-v2-builder-page .bb-text-section--height-tall,
    .bb-v2-public-preview .bb-text-section--height-tall {
        min-height: 55vh;
    }
}

/* Image Content: asymmetric column ratio (image / text). Desktop only —
   columns stack on mobile. EVERY ratio (50-50 included) pins the image
   column's flex-basis: without it the basis falls back to the photo's
   natural width (a 1400px generated image swallowed the whole row and
   crushed the text to a sliver). */
@media (min-width: 768px) {
    .bb-v2-builder-page .bb-image-content--ratio-40-60 .bb-image-content__row:not(.text-bottom-image) > .block-image,
    .bb-v2-public-preview .bb-image-content--ratio-40-60 .bb-image-content__row:not(.text-bottom-image) > .block-image {
        flex: 0 0 40%;
        max-width: 40%;
        min-width: 0;
    }

    .bb-v2-builder-page .bb-image-content--ratio-50-50 .bb-image-content__row:not(.text-bottom-image) > .block-image,
    .bb-v2-public-preview .bb-image-content--ratio-50-50 .bb-image-content__row:not(.text-bottom-image) > .block-image {
        flex: 0 0 50%;
        max-width: 50%;
        min-width: 0;
    }

    .bb-v2-builder-page .bb-image-content--ratio-60-40 .bb-image-content__row:not(.text-bottom-image) > .block-image,
    .bb-v2-public-preview .bb-image-content--ratio-60-40 .bb-image-content__row:not(.text-bottom-image) > .block-image {
        flex: 0 0 60%;
        max-width: 60%;
        min-width: 0;
    }

    .bb-v2-builder-page .bb-image-content--ratio-40-60 .bb-image-content__row:not(.text-bottom-image) > .block-text-container,
    .bb-v2-public-preview .bb-image-content--ratio-40-60 .bb-image-content__row:not(.text-bottom-image) > .block-text-container,
    .bb-v2-builder-page .bb-image-content--ratio-50-50 .bb-image-content__row:not(.text-bottom-image) > .block-text-container,
    .bb-v2-public-preview .bb-image-content--ratio-50-50 .bb-image-content__row:not(.text-bottom-image) > .block-text-container,
    .bb-v2-builder-page .bb-image-content--ratio-60-40 .bb-image-content__row:not(.text-bottom-image) > .block-text-container,
    .bb-v2-public-preview .bb-image-content--ratio-60-40 .bb-image-content__row:not(.text-bottom-image) > .block-text-container {
        flex: 1 1 auto;
        min-width: 0;
    }

    /* Vertical alignment of the shorter column. Top keeps legacy behavior. */
    .bb-v2-builder-page .bb-image-content--valign-center .bb-image-content__row:not(.text-bottom-image),
    .bb-v2-public-preview .bb-image-content--valign-center .bb-image-content__row:not(.text-bottom-image) {
        align-items: center;
    }

    .bb-v2-builder-page .bb-image-content--valign-bottom .bb-image-content__row:not(.text-bottom-image),
    .bb-v2-public-preview .bb-image-content--valign-bottom .bb-image-content__row:not(.text-bottom-image) {
        align-items: flex-end;
    }

    .bb-v2-builder-page .bb-image-content--valign-center .bb-image-content__row:not(.text-bottom-image) > .block-text-container,
    .bb-v2-public-preview .bb-image-content--valign-center .bb-image-content__row:not(.text-bottom-image) > .block-text-container,
    .bb-v2-builder-page .bb-image-content--valign-bottom .bb-image-content__row:not(.text-bottom-image) > .block-text-container,
    .bb-v2-public-preview .bb-image-content--valign-bottom .bb-image-content__row:not(.text-bottom-image) > .block-text-container {
        justify-content: flex-start;
    }
}

/* Image Content: media bleed to the section edge. Only meaningful on
   cinematic sections — the negative margin swallows the section gutter,
   so the media can never overflow the viewport (no horizontal scroll). */
.bb-v2-builder-page .bb-section--cinematic.bb-image-content--bleed-section_edge .bb-image-content__row.text-right-image > .block-image,
.bb-v2-public-preview .bb-section--cinematic.bb-image-content--bleed-section_edge .bb-image-content__row.text-right-image > .block-image {
    margin-left: calc(-1 * var(--bb-v2-cinematic-inline-gutter));
}

.bb-v2-builder-page .bb-section--cinematic.bb-image-content--bleed-section_edge .bb-image-content__row.text-left-image > .block-image,
.bb-v2-public-preview .bb-section--cinematic.bb-image-content--bleed-section_edge .bb-image-content__row.text-left-image > .block-image {
    margin-right: calc(-1 * var(--bb-v2-cinematic-inline-gutter));
}

/* Legacy fallback for section-edge markup without a registered Media height
   modifier. Registered Block 12 pages receive Small, Medium, or Large below. */
.bb-v2-builder-page .bb-section--cinematic.bb-image-content--bleed-section_edge .bb-image-content__row:not(.text-bottom-image) > .block-image .bb-image-content__img,
.bb-v2-public-preview .bb-section--cinematic.bb-image-content--bleed-section_edge .bb-image-content__row:not(.text-bottom-image) > .block-image .bb-image-content__img {
    height: 100% !important;
    min-height: 21.875rem;
    object-fit: cover;
    width: 100%;
}

/* Section edge media uses a responsive baseline independent of source-image
   proportions. The wrapper supplies the baseline and participates in normal
   row sizing; taller copy can therefore expand the row. The absolutely
   positioned image fills that resolved row without feeding its own percentage
   height back into intrinsic sizing. */
@media (min-width: 1200px) {
    .bb-v2-builder-page .bb-image-content--height-small.bb-section--cinematic.bb-image-content--bleed-section_edge .bb-image-content__row:not(.text-bottom-image) > .block-image,
    .bb-v2-public-preview .bb-image-content--height-small.bb-section--cinematic.bb-image-content--bleed-section_edge .bb-image-content__row:not(.text-bottom-image) > .block-image { min-height: 420px; }
    .bb-v2-builder-page .bb-image-content--height-medium.bb-section--cinematic.bb-image-content--bleed-section_edge .bb-image-content__row:not(.text-bottom-image) > .block-image,
    .bb-v2-public-preview .bb-image-content--height-medium.bb-section--cinematic.bb-image-content--bleed-section_edge .bb-image-content__row:not(.text-bottom-image) > .block-image { min-height: 600px; }
    .bb-v2-builder-page .bb-image-content--height-large.bb-section--cinematic.bb-image-content--bleed-section_edge .bb-image-content__row:not(.text-bottom-image) > .block-image,
    .bb-v2-public-preview .bb-image-content--height-large.bb-section--cinematic.bb-image-content--bleed-section_edge .bb-image-content__row:not(.text-bottom-image) > .block-image { min-height: 780px; }
}

@media (min-width: 768px) and (max-width: 1199.98px) {
    .bb-v2-builder-page .bb-image-content--height-small.bb-section--cinematic.bb-image-content--bleed-section_edge .bb-image-content__row:not(.text-bottom-image) > .block-image,
    .bb-v2-public-preview .bb-image-content--height-small.bb-section--cinematic.bb-image-content--bleed-section_edge .bb-image-content__row:not(.text-bottom-image) > .block-image { min-height: 360px; }
    .bb-v2-builder-page .bb-image-content--height-medium.bb-section--cinematic.bb-image-content--bleed-section_edge .bb-image-content__row:not(.text-bottom-image) > .block-image,
    .bb-v2-public-preview .bb-image-content--height-medium.bb-section--cinematic.bb-image-content--bleed-section_edge .bb-image-content__row:not(.text-bottom-image) > .block-image { min-height: 480px; }
    .bb-v2-builder-page .bb-image-content--height-large.bb-section--cinematic.bb-image-content--bleed-section_edge .bb-image-content__row:not(.text-bottom-image) > .block-image,
    .bb-v2-public-preview .bb-image-content--height-large.bb-section--cinematic.bb-image-content--bleed-section_edge .bb-image-content__row:not(.text-bottom-image) > .block-image { min-height: 600px; }
}

@media (min-width: 768px) {
    .bb-v2-builder-page .bb-image-content--height-small.bb-section--cinematic.bb-image-content--bleed-section_edge .bb-image-content__row:not(.text-bottom-image),
    .bb-v2-public-preview .bb-image-content--height-small.bb-section--cinematic.bb-image-content--bleed-section_edge .bb-image-content__row:not(.text-bottom-image) { gap: 32px !important; }
    .bb-v2-builder-page .bb-image-content--height-medium.bb-section--cinematic.bb-image-content--bleed-section_edge .bb-image-content__row:not(.text-bottom-image),
    .bb-v2-public-preview .bb-image-content--height-medium.bb-section--cinematic.bb-image-content--bleed-section_edge .bb-image-content__row:not(.text-bottom-image) { gap: 48px !important; }
    .bb-v2-builder-page .bb-image-content--height-large.bb-section--cinematic.bb-image-content--bleed-section_edge .bb-image-content__row:not(.text-bottom-image),
    .bb-v2-public-preview .bb-image-content--height-large.bb-section--cinematic.bb-image-content--bleed-section_edge .bb-image-content__row:not(.text-bottom-image) { gap: 64px !important; }
}

@media (min-width: 768px) {
    .bb-v2-builder-page .bb-image-content.bb-section--cinematic.bb-image-content--bleed-section_edge .bb-image-content__row:not(.text-bottom-image),
    .bb-v2-public-preview .bb-image-content.bb-section--cinematic.bb-image-content--bleed-section_edge .bb-image-content__row:not(.text-bottom-image) {
        align-items: stretch !important;
    }

    .bb-v2-builder-page .bb-image-content.bb-section--cinematic.bb-image-content--bleed-section_edge .bb-image-content__row:not(.text-bottom-image) > .block-image,
    .bb-v2-public-preview .bb-image-content.bb-section--cinematic.bb-image-content--bleed-section_edge .bb-image-content__row:not(.text-bottom-image) > .block-image {
        align-self: stretch;
        min-width: 0;
        position: relative;
    }

    .bb-v2-builder-page .bb-image-content.bb-section--cinematic.bb-image-content--bleed-section_edge .bb-image-content__row:not(.text-bottom-image) > .block-image .bb-image-content__img,
    .bb-v2-public-preview .bb-image-content.bb-section--cinematic.bb-image-content--bleed-section_edge .bb-image-content__row:not(.text-bottom-image) > .block-image .bb-image-content__img {
        height: 100% !important;
        inset: 0;
        min-height: 0;
        object-fit: cover;
        position: absolute;
        width: 100%;
    }

    .bb-v2-builder-page .bb-image-content--valign-top .bb-image-content__row:not(.text-bottom-image) > .block-text-container,
    .bb-v2-public-preview .bb-image-content--valign-top .bb-image-content__row:not(.text-bottom-image) > .block-text-container { align-self: stretch; }
    .bb-v2-builder-page .bb-image-content--valign-center .bb-image-content__row:not(.text-bottom-image) > .block-text-container,
    .bb-v2-public-preview .bb-image-content--valign-center .bb-image-content__row:not(.text-bottom-image) > .block-text-container { align-self: center; }
    .bb-v2-builder-page .bb-image-content--valign-bottom .bb-image-content__row:not(.text-bottom-image) > .block-text-container,
    .bb-v2-public-preview .bb-image-content--valign-bottom .bb-image-content__row:not(.text-bottom-image) > .block-text-container { align-self: flex-end; }
}

/* Video Content reuses the image-content column CSS; a bleeding video frame
   fills its column the same way (the embed keeps its own aspect ratio). */
.bb-v2-builder-page .bb-section--cinematic.bb-image-content--bleed-section_edge .bb-image-content__row:not(.text-bottom-image) > .block-image .bb-video-content__frame-wrap,
.bb-v2-public-preview .bb-section--cinematic.bb-image-content--bleed-section_edge .bb-image-content__row:not(.text-bottom-image) > .block-image .bb-video-content__frame-wrap {
    height: 100% !important;
    min-height: 21.875rem;
    width: 100%;
}
.bb-v2-builder-page .bb-section--cinematic.bb-image-content--bleed-section_edge .bb-image-content__row:not(.text-bottom-image) > .block-image .bb-video-content__frame,
.bb-v2-public-preview .bb-section--cinematic.bb-image-content--bleed-section_edge .bb-image-content__row:not(.text-bottom-image) > .block-image .bb-video-content__frame {
    height: 100% !important;
    width: 100%;
    object-fit: cover;
}

/* Cards Grid: the block's image-fit choice moves only the picture to the
   inner card edges. The card keeps its authored padding for copy and actions.
   When the card-box eye is off, the renderer applies no box padding, so there
   is nothing to offset and the stored padding stays unapplied. */
.bb-v2-builder-page .bb-cards-grid .bb-card--image-fit-content_box_edge.bb-card--box-1 > div:first-of-type,
.bb-v2-public-preview .bb-cards-grid .bb-card--image-fit-content_box_edge.bb-card--box-1 > div:first-of-type {
    border-radius: inherit;
}

.bb-v2-builder-page .bb-cards-grid .bb-card--image-fit-content_box_edge.bb-card--box-1 .bb-card__image-wrap,
.bb-v2-public-preview .bb-cards-grid .bb-card--image-fit-content_box_edge.bb-card--box-1 .bb-card__image-wrap {
    width: calc(100% + var(--bb-card-box-padding, 0px) + var(--bb-card-box-padding, 0px)) !important;
    max-width: none;
    margin-top: calc(-1 * var(--bb-card-box-padding, 0px)) !important;
    margin-right: calc(-1 * var(--bb-card-box-padding, 0px)) !important;
    margin-left: calc(-1 * var(--bb-card-box-padding, 0px)) !important;
    border-top-left-radius: inherit !important;
    border-top-right-radius: inherit !important;
}

/* Box padding on phones and small tablets. Every box, card and intro box
   padding (the renderer writes it as --bb-v2-box-padding) is a desktop value
   with no phone setting, so a large one squeezes the copy into a narrow
   column. Phones cap it at 20px on small screens, growing to 40px at 767px;
   small tablets cap it at 48px; smaller paddings and
   screens from 992px keep the stored value. A flush card picture follows. */
@media (max-width: 767.98px) {
    .bb-v2-builder-page,
    .bb-v2-public-preview {
        --bb-v2-box-padding-cap: clamp(20px, 5.3vw, 40px);
    }
}

@media (min-width: 768px) and (max-width: 991.98px) {
    .bb-v2-builder-page,
    .bb-v2-public-preview {
        --bb-v2-box-padding-cap: 48px;
    }
}

@media (max-width: 991.98px) {
    .bb-v2-builder-page [style*="--bb-v2-box-padding:"],
    .bb-v2-public-preview [style*="--bb-v2-box-padding:"] {
        padding: min(var(--bb-v2-box-padding-cap), var(--bb-v2-box-padding)) !important;
    }

    .bb-v2-builder-page .bb-cards-grid .bb-card--image-fit-content_box_edge.bb-card--box-1 .bb-card__image-wrap,
    .bb-v2-public-preview .bb-cards-grid .bb-card--image-fit-content_box_edge.bb-card--box-1 .bb-card__image-wrap {
        width: calc(100% + 2 * min(var(--bb-v2-box-padding-cap), var(--bb-card-box-padding, 0px))) !important;
        margin-top: calc(-1 * min(var(--bb-v2-box-padding-cap), var(--bb-card-box-padding, 0px))) !important;
        margin-right: calc(-1 * min(var(--bb-v2-box-padding-cap), var(--bb-card-box-padding, 0px))) !important;
        margin-left: calc(-1 * min(var(--bb-v2-box-padding-cap), var(--bb-card-box-padding, 0px))) !important;
    }
}

/* Cards Grid: at cinematic width the tall (2:3) picture grows with the column
   and pushes the card title below the screen. Cap only that picture view so the
   photo and title fit one screen; the photo keeps object-fit: cover. The cap
   only shrinks: on very large screens where 2:3 is below 65vh the picture keeps
   its designed 2:3 height. Phones and standard width keep the full 2:3 shape. */
@media (min-width: 1000px) {
    .bb-v2-builder-page .bb-section--cinematic.bb-cards-grid .img-cont[class*="img-long-"],
    .bb-v2-public-preview .bb-section--cinematic.bb-cards-grid .img-cont[class*="img-long-"] {
        max-height: 65vh;
    }
}

/* Image Content: flush media to the content-box edge while preserving the
   configured content-box padding around copy. This is distinct from
   section_edge, which consumes the outer cinematic section gutter. */
.bb-v2-builder-page .bb-image-content--bleed-content_box_edge .bb-image-content__box,
.bb-v2-public-preview .bb-image-content--bleed-content_box_edge .bb-image-content__box {
    overflow: hidden;
    padding: 0 !important;
}

.bb-v2-builder-page .bb-image-content--bleed-content_box_edge .bb-image-content__row,
.bb-v2-public-preview .bb-image-content--bleed-content_box_edge .bb-image-content__row {
    align-items: stretch;
    gap: 0 !important;
}

.bb-v2-builder-page .bb-image-content--bleed-content_box_edge .bb-image-content__row > .block-text-container,
.bb-v2-public-preview .bb-image-content--bleed-content_box_edge .bb-image-content__row > .block-text-container {
    margin-top: 0 !important;
    padding: var(--bb-image-content-box-padding, 0px);
}

@media (min-width: 768px) {
    .bb-v2-builder-page .bb-image-content--bleed-content_box_edge .bb-image-content__row.text-left-image > .block-text-container,
    .bb-v2-public-preview .bb-image-content--bleed-content_box_edge .bb-image-content__row.text-left-image > .block-text-container {
        padding-right: max(32px, var(--bb-image-content-box-padding, 0px));
    }

    .bb-v2-builder-page .bb-image-content--bleed-content_box_edge .bb-image-content__row.text-right-image > .block-text-container,
    .bb-v2-public-preview .bb-image-content--bleed-content_box_edge .bb-image-content__row.text-right-image > .block-text-container {
        padding-left: max(32px, var(--bb-image-content-box-padding, 0px));
    }

    .bb-v2-builder-page .bb-image-content--bleed-content_box_edge .bb-image-content__row.text-bottom-image > .block-text-container,
    .bb-v2-public-preview .bb-image-content--bleed-content_box_edge .bb-image-content__row.text-bottom-image > .block-text-container {
        padding-bottom: max(32px, var(--bb-image-content-box-padding, 0px));
    }
}

/* Small tablets: the two columns are narrow, so the same large box padding
   leaves the copy a sliver. Cap it at 48px; wide screens keep the full value. */
@media (min-width: 768px) and (max-width: 991.98px) {
    .bb-v2-builder-page .bb-image-content--bleed-content_box_edge .bb-image-content__row > .block-text-container,
    .bb-v2-public-preview .bb-image-content--bleed-content_box_edge .bb-image-content__row > .block-text-container {
        padding: min(48px, var(--bb-image-content-box-padding, 0px));
    }

    .bb-v2-builder-page .bb-image-content--bleed-content_box_edge .bb-image-content__row.text-left-image > .block-text-container,
    .bb-v2-public-preview .bb-image-content--bleed-content_box_edge .bb-image-content__row.text-left-image > .block-text-container {
        padding-right: max(32px, min(48px, var(--bb-image-content-box-padding, 0px)));
    }

    .bb-v2-builder-page .bb-image-content--bleed-content_box_edge .bb-image-content__row.text-right-image > .block-text-container,
    .bb-v2-public-preview .bb-image-content--bleed-content_box_edge .bb-image-content__row.text-right-image > .block-text-container {
        padding-left: max(32px, min(48px, var(--bb-image-content-box-padding, 0px)));
    }

    .bb-v2-builder-page .bb-image-content--bleed-content_box_edge .bb-image-content__row.text-bottom-image > .block-text-container,
    .bb-v2-public-preview .bb-image-content--bleed-content_box_edge .bb-image-content__row.text-bottom-image > .block-text-container {
        padding-bottom: max(32px, min(48px, var(--bb-image-content-box-padding, 0px)));
    }
}

/* Phones: the photo stacks under the copy, so a large desktop box padding
   (often set to make a joined photo taller) would squeeze the copy into a
   narrow column. Use the shared phone cap (20px on small phones, growing to
   40px at 767px); smaller paddings are kept. */
@media (max-width: 767.98px) {
    .bb-v2-builder-page .bb-image-content--bleed-content_box_edge .bb-image-content__row > .block-text-container,
    .bb-v2-public-preview .bb-image-content--bleed-content_box_edge .bb-image-content__row > .block-text-container {
        padding: min(var(--bb-v2-box-padding-cap), var(--bb-image-content-box-padding, 0px));
        padding-bottom: max(24px, min(var(--bb-v2-box-padding-cap), var(--bb-image-content-box-padding, 0px)));
    }
}

.bb-v2-builder-page .bb-image-content--bleed-content_box_edge .bb-image-content__row > .block-image,
.bb-v2-public-preview .bb-image-content--bleed-content_box_edge .bb-image-content__row > .block-image {
    align-self: stretch;
}

.bb-v2-builder-page .bb-image-content--bleed-content_box_edge .bb-image-content__img,
.bb-v2-public-preview .bb-image-content--bleed-content_box_edge .bb-image-content__img {
    border-radius: 0 !important;
    height: 100% !important;
    min-height: 21.875rem;
    object-fit: cover;
}

.bb-image-content__details {
    display: grid;
    gap: var(--bb-image-content-detail-gap, 10px);
    margin: 1rem 0 1.5rem;
}

/* The demo preview renders the public markup, so it hides the empty row the
   same way the published site does. Studio keeps it for its add button. */
.bb-v2-builder-page--preview .bb-image-content__details:not(:has(.bb-image-content__detail)),
.bb-v2-public-preview .bb-image-content__details:not(:has(.bb-image-content__detail)) {
    display: none;
}

.bb-image-content__detail {
    align-items: center;
    display: flex;
    gap: 10px;
    min-width: 0;
    padding-block: 4px;
    position: relative;
}

/* The line sits halfway through the configured gap, independent of row height. */
.bb-image-content__details--separators-between > .bb-image-content__detail + .bb-image-content__detail::before {
    border-top: 1px solid var(--bb-image-content-detail-separator-color, currentColor);
    content: "";
    height: var(--bb-image-content-detail-gap, 10px);
    left: 0;
    pointer-events: none;
    position: absolute;
    right: 0;
    top: 0;
    transform: translateY(-50%);
}

.bb-image-content__detail-icon-wrap {
    flex: 0 0 var(--bb-image-content-detail-icon-size, 18px);
    height: var(--bb-image-content-detail-icon-size, 18px);
    width: var(--bb-image-content-detail-icon-size, 18px);
}

.bb-image-content__detail-icon-wrap:empty {
    display: none;
}

.bb-image-content__detail-icon {
    border-radius: 0 !important;
    display: block;
    height: 100%;
    object-fit: contain;
    width: 100%;
}


.bb-image-content__detail-text {
    line-height: 1.45;
    min-width: 0;
}

@media (max-width: 999.98px) {
    .bb-v2-builder-page .bb-image-content,
    .bb-v2-public-preview .bb-image-content {
        padding-bottom: max(30px, var(--bb-v2-section-padding-bottom-mobile, 30px)) !important;
        padding-top: max(30px, var(--bb-v2-section-padding-top-mobile, 30px)) !important;
    }
}

@media (max-width: 767.98px) {
    .bb-v2-builder-page .bb-image-content__row:not(.text-bottom-image),
    .bb-v2-public-preview .bb-image-content__row:not(.text-bottom-image) {
        flex-direction: column-reverse !important;
    }

    /* Copy stacks first in this mode, so it keeps the mobile top inset. The
       trailing edge-to-edge image must finish the section without exposing
       the section background before the next block. Studio's separate
       editor-only gutter still provides its 60px selection surface. */
    .bb-v2-builder-page .bb-image-content.bb-section--cinematic.bb-image-content--bleed-section_edge:has(.bb-image-content__row:not(.text-bottom-image)),
    .bb-v2-public-preview .bb-image-content.bb-section--cinematic.bb-image-content--bleed-section_edge:has(.bb-image-content__row:not(.text-bottom-image)) {
        padding-bottom: 0 !important;
    }

    .bb-v2-builder-page .bb-image-content.bb-section--cinematic.bb-image-content--bleed-section_edge:has(.bb-image-content__row:not(.text-bottom-image)) .bb-image-content__box,
    .bb-v2-public-preview .bb-image-content.bb-section--cinematic.bb-image-content--bleed-section_edge:has(.bb-image-content__row:not(.text-bottom-image)) .bb-image-content__box {
        padding-bottom: 0 !important;
    }

    .bb-v2-builder-page .bb-image-content--height-small.bb-section--cinematic.bb-image-content--bleed-section_edge .bb-image-content__row:not(.text-bottom-image),
    .bb-v2-public-preview .bb-image-content--height-small.bb-section--cinematic.bb-image-content--bleed-section_edge .bb-image-content__row:not(.text-bottom-image) { gap: 24px !important; }
    .bb-v2-builder-page .bb-image-content--height-medium.bb-section--cinematic.bb-image-content--bleed-section_edge .bb-image-content__row:not(.text-bottom-image),
    .bb-v2-public-preview .bb-image-content--height-medium.bb-section--cinematic.bb-image-content--bleed-section_edge .bb-image-content__row:not(.text-bottom-image) { gap: 30px !important; }
    .bb-v2-builder-page .bb-image-content--height-large.bb-section--cinematic.bb-image-content--bleed-section_edge .bb-image-content__row:not(.text-bottom-image),
    .bb-v2-public-preview .bb-image-content--height-large.bb-section--cinematic.bb-image-content--bleed-section_edge .bb-image-content__row:not(.text-bottom-image) { gap: 36px !important; }

    .bb-v2-builder-page .bb-image-content--height-small.bb-section--cinematic.bb-image-content--bleed-section_edge .bb-image-content__row:not(.text-bottom-image) > .block-image,
    .bb-v2-public-preview .bb-image-content--height-small.bb-section--cinematic.bb-image-content--bleed-section_edge .bb-image-content__row:not(.text-bottom-image) > .block-image { flex: 0 0 240px; height: 240px; min-height: 0; }
    .bb-v2-builder-page .bb-image-content--height-medium.bb-section--cinematic.bb-image-content--bleed-section_edge .bb-image-content__row:not(.text-bottom-image) > .block-image,
    .bb-v2-public-preview .bb-image-content--height-medium.bb-section--cinematic.bb-image-content--bleed-section_edge .bb-image-content__row:not(.text-bottom-image) > .block-image { flex: 0 0 300px; height: 300px; min-height: 0; }
    .bb-v2-builder-page .bb-image-content--height-large.bb-section--cinematic.bb-image-content--bleed-section_edge .bb-image-content__row:not(.text-bottom-image) > .block-image,
    .bb-v2-public-preview .bb-image-content--height-large.bb-section--cinematic.bb-image-content--bleed-section_edge .bb-image-content__row:not(.text-bottom-image) > .block-image { flex: 0 0 380px; height: 380px; min-height: 0; }

    .bb-v2-builder-page .bb-image-content--height-small.bb-section--cinematic.bb-image-content--bleed-section_edge .bb-image-content__row:not(.text-bottom-image) > .block-image .bb-image-content__img,
    .bb-v2-public-preview .bb-image-content--height-small.bb-section--cinematic.bb-image-content--bleed-section_edge .bb-image-content__row:not(.text-bottom-image) > .block-image .bb-image-content__img { height: 240px !important; min-height: 0 !important; }
    .bb-v2-builder-page .bb-image-content--height-medium.bb-section--cinematic.bb-image-content--bleed-section_edge .bb-image-content__row:not(.text-bottom-image) > .block-image .bb-image-content__img,
    .bb-v2-public-preview .bb-image-content--height-medium.bb-section--cinematic.bb-image-content--bleed-section_edge .bb-image-content__row:not(.text-bottom-image) > .block-image .bb-image-content__img { height: 300px !important; min-height: 0 !important; }
    .bb-v2-builder-page .bb-image-content--height-large.bb-section--cinematic.bb-image-content--bleed-section_edge .bb-image-content__row:not(.text-bottom-image) > .block-image .bb-image-content__img,
    .bb-v2-public-preview .bb-image-content--height-large.bb-section--cinematic.bb-image-content--bleed-section_edge .bb-image-content__row:not(.text-bottom-image) > .block-image .bb-image-content__img { height: 380px !important; min-height: 0 !important; }
}

@media (max-width: 767.98px) {
    /* Stacked columns: the bleeding image runs edge to edge while the
       text keeps the shared gutter. The column carries an explicit width
       (legacy inline style) — released here, otherwise the two negative
       margins SHIFT the fixed-width column left instead of stretching it
       (image flush left with a gutter-wide gap on the right). */
    .bb-v2-builder-page .bb-section--cinematic.bb-image-content--bleed-section_edge .bb-image-content__row:not(.text-bottom-image) > .block-image,
    .bb-v2-public-preview .bb-section--cinematic.bb-image-content--bleed-section_edge .bb-image-content__row:not(.text-bottom-image) > .block-image {
        margin-left: calc(-1 * var(--bb-v2-cinematic-inline-gutter));
        margin-right: calc(-1 * var(--bb-v2-cinematic-inline-gutter));
        width: auto !important;
        max-width: none !important;
        align-self: stretch;
    }
}

/* Hero height has two tiers. Regular is the established immersive 85vh
   treatment. Full Screen is a minimum, never a fixed height: stacked mobile
   content and embedded forms are allowed to push it beyond the viewport. */
.bb-v2-builder-page .bb-v2-structural-hero:not(.bb-v2-structural-hero--full-screen),
.bb-v2-public-preview .bb-v2-structural-hero:not(.bb-v2-structural-hero--full-screen),
.site-header .major-banner.bb-v2-structural-hero:not(.bb-v2-structural-hero--full-screen) {
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: auto !important;
    min-height: 85vh !important;
    max-height: none !important;
    overflow: visible;
}

.bb-v2-builder-page .bb-v2-structural-hero.bb-v2-structural-hero--full-screen,
.bb-v2-public-preview .bb-v2-structural-hero.bb-v2-structural-hero--full-screen,
.site-header .major-banner.bb-v2-structural-hero--full-screen {
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: auto !important;
    min-height: 100vh !important;
    min-height: 100svh !important;
    max-height: none !important;
    overflow: visible;
}

/* Hero image placement "left" / "right": the image (with its overlay) fills
   that half of the hero edge-to-edge, painted by ::before from the variables
   the renderer sets; the base colour fills the other half and carries the
   copy. Alignment follows the placement, whatever the copy's own setting.
   On phones the image becomes a top band and the copy stacks below it. */
.bb-v2-structural-hero--image-left,
.bb-v2-structural-hero--image-right {
    position: relative;
    isolation: isolate;
    /* the renderer emits these without !important in split mode; keep the
       legacy header image off the hero here */
    background-image: none !important;
}

.bb-v2-structural-hero--image-left::before,
.bb-v2-structural-hero--image-right::before {
    content: '';
    position: absolute;
    top: var(--bb-v2-hero-top, 0);
    bottom: 0;
    width: 50%;
    background-image: var(--bb-v2-hero-overlay), var(--bb-v2-hero-image);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    /* Behind the hero's in-flow content but above its own background
       (isolation: isolate keeps -1 inside the hero). Nothing in the hero is
       lifted, so the horizontal form that overhangs the hero bottom stays
       clickable on top of it. */
    z-index: -1;
    pointer-events: none;
}

.bb-v2-structural-hero--image-left::before { left: 0; }
.bb-v2-structural-hero--image-right::before { right: 0; }

/* The horizontal form's band under the hero: ONE layer paints the image half
   for hero AND band, so the crop is continuous. The band's ::before extends
   up over the hero's image region (the hero's height is its tier: 85vh, or
   100svh for Full Screen) and sits at z-index -1 in the page's own stacking
   context; the hero goes transparent on its image half and hides its own
   image, so the band's layer shows through. Base colour: hero paints its
   free half with a gradient, the band's ::after paints its free half. */
@media (min-width: 1000px) {
    .site-header:has(+ .site-main > .horizontal-form-container.bb-v2-hero-band--image-left) .bb-v2-structural-hero--image-left,
    .site-header:has(+ .site-main > .horizontal-form-container.bb-v2-hero-band--image-right) .bb-v2-structural-hero--image-right {
        background-color: transparent !important;
    }

    .site-header:has(+ .site-main > .horizontal-form-container.bb-v2-hero-band--image-right) .bb-v2-structural-hero--image-right {
        background-image: linear-gradient(to right, var(--bb-v2-hero-base) 50%, transparent 50%) !important;
    }

    .site-header:has(+ .site-main > .horizontal-form-container.bb-v2-hero-band--image-left) .bb-v2-structural-hero--image-left {
        background-image: linear-gradient(to right, transparent 50%, var(--bb-v2-hero-base) 50%) !important;
    }

    .site-header:has(+ .site-main > .horizontal-form-container.bb-v2-hero-band--image-left) .bb-v2-structural-hero--image-left::before,
    .site-header:has(+ .site-main > .horizontal-form-container.bb-v2-hero-band--image-right) .bb-v2-structural-hero--image-right::before {
        display: none;
    }

    .site-header:has(+ .site-main > .horizontal-form-container.bb-v2-hero-band--image-left) + .site-main,
    .site-header:has(+ .site-main > .horizontal-form-container.bb-v2-hero-band--image-right) + .site-main {
        background: transparent !important;
    }

    .horizontal-form-container.bb-v2-hero-band--image-left,
    .horizontal-form-container.bb-v2-hero-band--image-right {
        position: relative;
        isolation: auto;
        background: transparent !important;
        /* the legacy gap to the next block becomes part of the band */
        margin-bottom: 0 !important;
        padding-bottom: 2rem;
    }

    .horizontal-form-container.bb-v2-hero-band--image-left::before,
    .horizontal-form-container.bb-v2-hero-band--image-right::before {
        content: '';
        position: absolute;
        --bb-v2-hero-h: 85vh;
        top: calc(var(--bb-v2-hero-top, 0px) - var(--bb-v2-hero-h));
        bottom: 0;
        width: 50%;
        background-image: var(--bb-v2-hero-overlay), var(--bb-v2-hero-image);
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center;
        z-index: -1;
        pointer-events: none;
    }

    .site-header:has(.bb-v2-structural-hero--full-screen) + .site-main > .horizontal-form-container.bb-v2-hero-band--image-left::before,
    .site-header:has(.bb-v2-structural-hero--full-screen) + .site-main > .horizontal-form-container.bb-v2-hero-band--image-right::before {
        --bb-v2-hero-h: 100vh;
        --bb-v2-hero-h: 100svh;
    }

    .horizontal-form-container.bb-v2-hero-band--image-left::after,
    .horizontal-form-container.bb-v2-hero-band--image-right::after {
        content: '';
        position: absolute;
        top: 0;
        bottom: 0;
        width: 50%;
        background: var(--bb-v2-hero-base);
        z-index: -1;
        pointer-events: none;
    }

    .horizontal-form-container.bb-v2-hero-band--image-left::before { left: 0; }
    .horizontal-form-container.bb-v2-hero-band--image-left::after { right: 0; }
    .horizontal-form-container.bb-v2-hero-band--image-right::before { right: 0; }
    .horizontal-form-container.bb-v2-hero-band--image-right::after { left: 0; }
}

@media (min-width: 1000px) {
    .bb-v2-structural-hero--image-left > .bb-v2-page-container > [data-bb-v2-hero-row],
    .bb-v2-structural-hero--image-right > .bb-v2-page-container > [data-bb-v2-hero-row] {
        justify-content: flex-start;
    }

    .bb-v2-structural-hero--image-right > .bb-v2-page-container > [data-bb-v2-hero-row] > .titles,
    .bb-v2-structural-hero--image-right > .bb-v2-page-container > #header-form.bb-v2-structural-form-shell--embedded {
        align-items: flex-start !important;
        text-align: left !important;
        margin-right: auto;
        max-width: calc(50% - 2.5rem) !important;
    }

    .bb-v2-structural-hero--image-left > .bb-v2-page-container > [data-bb-v2-hero-row] {
        justify-content: flex-end;
    }

    .bb-v2-structural-hero--image-left > .bb-v2-page-container > [data-bb-v2-hero-row] > .titles,
    .bb-v2-structural-hero--image-left > .bb-v2-page-container > #header-form.bb-v2-structural-form-shell--embedded {
        align-items: flex-start !important;
        text-align: left !important;
        margin-left: auto;
        max-width: calc(50% - 2.5rem) !important;
    }

    .bb-v2-structural-hero--image-left > .bb-v2-page-container.with-emb-form,
    .bb-v2-structural-hero--image-right > .bb-v2-page-container.with-emb-form {
        align-items: flex-start !important;
    }

    .bb-v2-structural-hero--image-left > .bb-v2-page-container.with-emb-form {
        align-items: flex-end !important;
    }

    /* Vertical form: it shares the hero row with the copy, so the 50% cap
       above would be measured after the form took its width and the copy
       collapsed to a sliver. The copy owns the free half outright; the form
       floats centred over the image half (and swaps sides with it). */
    .bb-v2-structural-hero--image-left > .bb-v2-page-container:has(> .bb-v2-structural-form-shell:not(.bb-v2-structural-form-shell--embedded)),
    .bb-v2-structural-hero--image-right > .bb-v2-page-container:has(> .bb-v2-structural-form-shell:not(.bb-v2-structural-form-shell--embedded)) {
        justify-content: flex-start !important;
    }

    .bb-v2-structural-hero--image-left > .bb-v2-page-container:has(> .bb-v2-structural-form-shell:not(.bb-v2-structural-form-shell--embedded)) > [data-bb-v2-hero-row],
    .bb-v2-structural-hero--image-right > .bb-v2-page-container:has(> .bb-v2-structural-form-shell:not(.bb-v2-structural-form-shell--embedded)) > [data-bb-v2-hero-row] {
        flex: 0 0 50%;
        max-width: 50%;
        width: 50% !important;
    }

    .bb-v2-structural-hero--image-left > .bb-v2-page-container:has(> .bb-v2-structural-form-shell:not(.bb-v2-structural-form-shell--embedded)) > [data-bb-v2-hero-row] > .titles,
    .bb-v2-structural-hero--image-right > .bb-v2-page-container:has(> .bb-v2-structural-form-shell:not(.bb-v2-structural-form-shell--embedded)) > [data-bb-v2-hero-row] > .titles {
        max-width: calc(100% - 2.5rem) !important;
        margin-left: 0;
        margin-right: 0;
    }

    .bb-v2-structural-hero--image-left > .bb-v2-page-container > .bb-v2-structural-form-shell:not(.bb-v2-structural-form-shell--embedded),
    .bb-v2-structural-hero--image-right > .bb-v2-page-container > .bb-v2-structural-form-shell:not(.bb-v2-structural-form-shell--embedded) {
        flex: 0 0 auto;
        margin-left: auto !important;
        margin-right: auto !important;
    }

    .bb-v2-structural-hero--image-left > .bb-v2-page-container > .bb-v2-structural-form-shell:not(.bb-v2-structural-form-shell--embedded) {
        order: -1;
    }
}

@media (max-width: 999.98px) {
    .bb-v2-structural-hero--image-left::before,
    .bb-v2-structural-hero--image-right::before {
        position: relative;
        top: auto;
        left: auto;
        right: auto;
        width: 100%;
        height: 45vh;
        min-height: 16rem;
        flex: 0 0 auto;
    }

    /* The legacy banner gives its content box a screen-height minimum
       (50vh on phones, 85vh - 6.75rem on tablets) and centres the copy in it.
       Under the photo band that minimum only turns into empty space whose
       size depends on the screen height, so the copy sat 0px under the photo
       on short phones and 150px+ on tablets. Stacked, the photo sits right
       under the header, the copy follows it at one fixed gap and the hero
       grows with its content; any slack from the hero's own height tier
       falls below the copy. */
    .bb-v2-structural-hero--image-left,
    .bb-v2-structural-hero--image-right {
        justify-content: flex-start !important;
    }

    .bb-v2-structural-hero--image-left > .bb-v2-page-container,
    .bb-v2-structural-hero--image-right > .bb-v2-page-container {
        min-height: 0 !important;
        padding-top: 2rem !important;
    }
}

/* The horizontal-form page has a fixed legacy band; release it for Full Screen. */
.site-header:has(+ .site-main > .horizontal-form-container) .major-banner.bb-v2-structural-hero--full-screen {
    height: auto !important;
    max-height: none !important;
    min-height: 100vh !important;
    min-height: 100svh !important;
    overflow: visible;
}

/* Conversion Form: frame "none" strips the outer card treatment — the
   embedded form keeps its own visual container. */
.bb-v2-builder-page .bb-conversion-form--frame-none .bb-conversion-form__box,
.bb-v2-public-preview .bb-conversion-form--frame-none .bb-conversion-form__box {
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
}

/* Conversion Form: form / text column ratio for the side-by-side views
   (v3 form left, v4 form right). Columns stack below 871px. The
   #template-demo-frame variants outrank the editor page's inline
   ID-scoped 50% column rule. */
@media (min-width: 871px) {
    .bb-v2-builder-page .bb-conversion-form--ratio-40-60 .conversions-block-content.v3:not(.bb-conv-orient-2) > .bb-conversion-form__form-col,
    .bb-v2-public-preview .bb-conversion-form--ratio-40-60 .conversions-block-content.v3:not(.bb-conv-orient-2) > .bb-conversion-form__form-col,
    #template-demo-frame .bb-conversion-form--ratio-40-60 .conversions-block-content.v3:not(.bb-conv-orient-2) > .bb-conversion-form__form-col,
    .bb-v2-builder-page .bb-conversion-form--ratio-40-60 .conversions-block-content.v4:not(.bb-conv-orient-2) > .bb-conversion-form__form-col,
    .bb-v2-public-preview .bb-conversion-form--ratio-40-60 .conversions-block-content.v4:not(.bb-conv-orient-2) > .bb-conversion-form__form-col,
    #template-demo-frame .bb-conversion-form--ratio-40-60 .conversions-block-content.v4:not(.bb-conv-orient-2) > .bb-conversion-form__form-col {
        width: calc(40% - (var(--bb-conversion-column-gap, 0px) / 2)) !important;
    }

    .bb-v2-builder-page .bb-conversion-form--ratio-40-60 .conversions-block-content.v3:not(.bb-conv-orient-2) > .bb-conversion-form__text-col,
    .bb-v2-public-preview .bb-conversion-form--ratio-40-60 .conversions-block-content.v3:not(.bb-conv-orient-2) > .bb-conversion-form__text-col,
    #template-demo-frame .bb-conversion-form--ratio-40-60 .conversions-block-content.v3:not(.bb-conv-orient-2) > .bb-conversion-form__text-col,
    .bb-v2-builder-page .bb-conversion-form--ratio-40-60 .conversions-block-content.v4:not(.bb-conv-orient-2) > .bb-conversion-form__text-col,
    .bb-v2-public-preview .bb-conversion-form--ratio-40-60 .conversions-block-content.v4:not(.bb-conv-orient-2) > .bb-conversion-form__text-col,
    #template-demo-frame .bb-conversion-form--ratio-40-60 .conversions-block-content.v4:not(.bb-conv-orient-2) > .bb-conversion-form__text-col {
        width: calc(60% - (var(--bb-conversion-column-gap, 0px) / 2)) !important;
    }

    .bb-v2-builder-page .bb-conversion-form--ratio-60-40 .conversions-block-content.v3:not(.bb-conv-orient-2) > .bb-conversion-form__form-col,
    .bb-v2-public-preview .bb-conversion-form--ratio-60-40 .conversions-block-content.v3:not(.bb-conv-orient-2) > .bb-conversion-form__form-col,
    #template-demo-frame .bb-conversion-form--ratio-60-40 .conversions-block-content.v3:not(.bb-conv-orient-2) > .bb-conversion-form__form-col,
    .bb-v2-builder-page .bb-conversion-form--ratio-60-40 .conversions-block-content.v4:not(.bb-conv-orient-2) > .bb-conversion-form__form-col,
    .bb-v2-public-preview .bb-conversion-form--ratio-60-40 .conversions-block-content.v4:not(.bb-conv-orient-2) > .bb-conversion-form__form-col,
    #template-demo-frame .bb-conversion-form--ratio-60-40 .conversions-block-content.v4:not(.bb-conv-orient-2) > .bb-conversion-form__form-col {
        width: calc(60% - (var(--bb-conversion-column-gap, 0px) / 2)) !important;
    }

    .bb-v2-builder-page .bb-conversion-form--ratio-60-40 .conversions-block-content.v3:not(.bb-conv-orient-2) > .bb-conversion-form__text-col,
    .bb-v2-public-preview .bb-conversion-form--ratio-60-40 .conversions-block-content.v3:not(.bb-conv-orient-2) > .bb-conversion-form__text-col,
    #template-demo-frame .bb-conversion-form--ratio-60-40 .conversions-block-content.v3:not(.bb-conv-orient-2) > .bb-conversion-form__text-col,
    .bb-v2-builder-page .bb-conversion-form--ratio-60-40 .conversions-block-content.v4:not(.bb-conv-orient-2) > .bb-conversion-form__text-col,
    .bb-v2-public-preview .bb-conversion-form--ratio-60-40 .conversions-block-content.v4:not(.bb-conv-orient-2) > .bb-conversion-form__text-col,
    #template-demo-frame .bb-conversion-form--ratio-60-40 .conversions-block-content.v4:not(.bb-conv-orient-2) > .bb-conversion-form__text-col {
        width: calc(40% - (var(--bb-conversion-column-gap, 0px) / 2)) !important;
    }
}