/* 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%;
    }
}

.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: none !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 !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;
    }
}

/* 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 legacy panel is anchored right:-18px (V1 hid that edge behind a
       rounded frame) — on V2 pages it just cuts the panel off the screen. */
    .bb-v2-builder-page .main-navigation .primary-menu-container,
    .bb-v2-public-preview .main-navigation .primary-menu-container {
        right: 0;
    }
}

/* 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))::after,
    .bb-v2-public-preview .bb-features--separators-between.bb-features--cols-2 .bb-feature-card:not(:nth-child(2n))::after,
    .bb-v2-builder-page .bb-features--separators-between.bb-features--cols-3 .bb-feature-card:not(:nth-child(3n))::after,
    .bb-v2-public-preview .bb-features--separators-between.bb-features--cols-3 .bb-feature-card:not(:nth-child(3n))::after,
    .bb-v2-builder-page .bb-features--separators-between.bb-features--cols-4 .bb-feature-card:not(:nth-child(4n))::after,
    .bb-v2-public-preview .bb-features--separators-between.bb-features--cols-4 .bb-feature-card:not(:nth-child(4n))::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))::after,
    .bb-v2-public-preview .bb-features--separators-between.bb-features--cols-2 .bb-feature-card:not(:nth-child(2n))::after,
    .bb-v2-builder-page .bb-features--separators-between.bb-features--cols-3 .bb-feature-card:not(:nth-child(3n))::after,
    .bb-v2-public-preview .bb-features--separators-between.bb-features--cols-3 .bb-feature-card:not(:nth-child(3n))::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: -1.5625rem;
        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: 2.75rem 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;
}

.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;
    left: 0;
    line-height: 1;
    position: absolute;
    top: 1.35rem;
}

.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;
    }

    .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;
        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: 1.75rem 0 2.5rem 2.25rem !important;
    }

    .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 {
        left: 2.25rem;
        top: 0;
    }

    .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));
}

/* A bleeding image fills its column height (text drives the section
   height); the base 21.875rem stays as the minimum crop. */
.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%;
}

/* 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;
}

@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;
}

/* 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;
    }
}