/* The shell owns visual height; its single desktop canvas owns all layout geometry. */
html[data-collabit-scale] {
    --collabit-design-vh: 10px;
}
html[data-collabit-scale] body { margin: 0; min-width: 0; }
.collabit-scale-shell { position: relative; width: 100%; overflow: clip; container-type: inline-size; }
.collabit-scale-backdrops {
    position: absolute;
    inset: 0;
    pointer-events: none;
    /* Side-only paint with a 1px underlap, not two coincident masked edges. */
    clip-path: polygon(0 0, calc(var(--collabit-side-gap) + 1px) 0,
        calc(var(--collabit-side-gap) + 1px) 100%, 0 100%, 0 0,
        100% 0, 100% 100%, calc(100% - var(--collabit-side-gap) - 1px) 100%,
        calc(100% - var(--collabit-side-gap) - 1px) 0);
}
.collabit-scale-backdrops[hidden] {
    display: none;
}
.collabit-scale-backdrops > div {
    position: absolute;
    left: 0;
    width: 100%;
}
.collabit-scale-canvas {
    position: absolute;
    top: 0;
    left: 50%;
    width: 1440px;
    margin-left: -720px;
    display: flow-root;
    transform-origin: top center;
    transform: scale(min(1, calc(100cqw / 1440px)));
    transition: none;
}

/* Native viewport positioning outside the transformed, scrolling canvas. */
.collabit-viewport-header {
    position: fixed;
    inset: 0 0 auto;
    z-index: 1000;
    height: calc(var(--collabit-header-height, 64px) * var(--collabit-page-scale, min(1, calc(100vw / 1440px))));
    container-type: inline-size;
    pointer-events: none;
    background: var(--collabit-header-background, transparent);
    transition: none !important;
}
.collabit-viewport-header:has(.staging-home-topbar) { --collabit-header-background: #033e3c; }
.collabit-viewport-header:has(header.bg-white) { --collabit-header-background: #fff; }
.collabit-viewport-header-canvas {
    position: absolute;
    top: 0;
    left: 50%;
    width: 1440px;
    margin-left: -720px;
    transform-origin: top center;
    transform: scale(min(1, calc(100cqw / 1440px)));
    transition: none !important;
    pointer-events: auto;
}
.collabit-viewport-header-canvas > header {
    position: absolute !important;
    top: 0 !important;
    bottom: auto !important;
    left: 0 !important;
    width: 1440px !important;
    pointer-events: auto;
    transition: none !important;
}
.collabit-viewport-header-canvas > .staging-home-consultation-popout { pointer-events: auto; }

/* Reserve the existing two-line quote and customer row during streamed parsing. */
html[data-collabit-scale] .reference-hero {
    min-height: 921.359375px;
}
html[data-collabit-scale] .reference-customer-proof-quote {
    min-height: 150.65625px;
}

/* The tallest approved stage sets the row height, even before its HTML arrives. */
html[data-collabit-scale] .reference-journey-grid {
    min-height: 780.453125px;
}

/* Do not let an unloaded replaced element shrink before its intrinsic size is known. */
html[data-collabit-scale] .water-stage-hero-graphic {
    flex-shrink: 0;
}

/* Match the existing desktop Swiper geometry before its footer script starts. */
html[data-collabit-scale] :is(.logoSlider, .features-slider):not(.swiper-initialized) .swiper-slide {
    width: calc((100% - 90px) / 4);
    margin-right: 30px;
}
html[data-collabit-scale] .testimonialSlider:not(.swiper-initialized) .swiper-slide {
    width: calc((100% - 60px) / 3);
    margin-right: 30px;
}

html[data-collabit-scale] .main-menu [data-collabit-scale-menu] > .sub-menu {
    display: block !important;
    opacity: 1 !important;
    z-index: 999;
}

/* Viewport-bound dialogs must fit the visible window, not the desktop page height. */
[data-collabit-scale-fixed] {
    --collabit-design-vh: var(--collabit-visible-vh);
}

html[data-collabit-scale] :is(dialog, .cli-modal, .mfp-wrap, .landing-popup, .video-popup, .popup-overlay) {
    max-height: calc(var(--collabit-visible-vh) * 100);
    overflow-y: auto;
}

html[data-collabit-scale] :is(.video-popup-content, .popup-overlay > .container) {
    max-height: calc(var(--collabit-visible-vh) * 100 - 2rem);
    overflow: auto;
}

html[data-collabit-scale] .popup-overlay.hidden {
    visibility: hidden;
    pointer-events: none;
}