/*
 * Client Mode full-bleed storytelling layer.
 *
 * CMS-owned illustrations become section-sized canvases. Content, controls and
 * data remain semantic foreground HTML. Motion is decorative, viewport-aware
 * and disabled by the existing reduced-motion/high-contrast contracts.
 */

.client-public-shell .client-about,
.client-public-shell .client-service-areas,
.client-public-shell .client-installation,
.client-public-shell .client-network-story,
.client-public-shell .client-advantages,
.client-public-shell .client-support {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    overflow: clip;
    min-height: clamp(34rem, 52vw, 48rem);
}

/*
 * The image is nested in a layout shell in Razor. Make that shell transparent
 * to absolute positioning so the canvas resolves against the section itself,
 * including its complete vertical padding.
 */
.client-public-shell .client-about > .client-about__layout,
.client-public-shell .client-service-areas > .client-service-areas__layout,
.client-public-shell .client-installation > .client-shell,
.client-public-shell .client-network-story > .client-network-story__layout,
.client-public-shell .client-advantages > .client-shell {
    position: static !important;
    z-index: auto !important;
}

.client-public-shell .client-about::before,
.client-public-shell .client-service-areas::before,
.client-public-shell .client-installation::before,
.client-public-shell .client-network-story::before,
.client-public-shell .client-advantages::before,
.client-public-shell .client-support::before,
.client-public-shell .client-about::after,
.client-public-shell .client-service-areas::after,
.client-public-shell .client-installation::after,
.client-public-shell .client-network-story::after,
.client-public-shell .client-advantages::after,
.client-public-shell .client-support::after {
    position: absolute;
    inset: 0;
    content: "";
    pointer-events: none;
}

.client-public-shell .client-about::before,
.client-public-shell .client-service-areas::before,
.client-public-shell .client-installation::before,
.client-public-shell .client-network-story::before,
.client-public-shell .client-advantages::before {
    z-index: 1;
    background:
        linear-gradient(
            90deg,
            color-mix(in srgb, var(--client-light) 98%, transparent) 0 28%,
            color-mix(in srgb, var(--client-light) 88%, transparent) 45%,
            color-mix(in srgb, var(--client-light) 36%, transparent) 69%,
            color-mix(in srgb, var(--client-light) 8%, transparent) 100%
        ),
        linear-gradient(
            180deg,
            color-mix(in srgb, var(--client-canvas) 16%, transparent),
            color-mix(in srgb, var(--client-alternate) 30%, transparent)
        );
}

.client-public-shell .client-about.client-section--dark::before,
.client-public-shell .client-about.client-section--brand::before,
.client-public-shell .client-about.client-section--image::before,
.client-public-shell .client-service-areas.client-section--dark::before,
.client-public-shell .client-service-areas.client-section--brand::before,
.client-public-shell .client-service-areas.client-section--image::before,
.client-public-shell .client-installation.client-section--dark::before,
.client-public-shell .client-installation.client-section--brand::before,
.client-public-shell .client-installation.client-section--image::before,
.client-public-shell .client-network-story.client-section--dark::before,
.client-public-shell .client-network-story.client-section--brand::before,
.client-public-shell .client-network-story.client-section--image::before,
.client-public-shell .client-advantages.client-section--dark::before,
.client-public-shell .client-advantages.client-section--brand::before,
.client-public-shell .client-advantages.client-section--image::before {
    background:
        linear-gradient(
            90deg,
            color-mix(in srgb, var(--client-dark) 98%, transparent) 0 28%,
            color-mix(in srgb, var(--client-dark) 88%, transparent) 46%,
            color-mix(in srgb, var(--client-dark) 44%, transparent) 70%,
            color-mix(in srgb, var(--client-dark) 10%, transparent) 100%
        ),
        radial-gradient(
            circle at 76% 46%,
            color-mix(in srgb, var(--client-brand) 24%, transparent),
            transparent 42%
        );
}

/* A section-specific technical layer makes each image communicate its chapter. */
.client-public-shell .client-about::after {
    z-index: 1;
    opacity: .5;
    background:
        radial-gradient(circle at 78% 25%, color-mix(in srgb, var(--client-accent) 72%, transparent) 0 .22rem, transparent .28rem),
        radial-gradient(circle at 88% 67%, color-mix(in srgb, var(--client-brand) 62%, transparent) 0 .18rem, transparent .24rem),
        linear-gradient(135deg, transparent 0 58%, color-mix(in srgb, var(--client-accent) 18%, transparent) 58.2% 58.42%, transparent 58.65%),
        linear-gradient(90deg, transparent 0 69%, color-mix(in srgb, var(--client-line) 24%, transparent) 69% 69.12%, transparent 69.12%);
    -webkit-mask-image: linear-gradient(90deg, transparent 0 45%, #000 68% 100%);
    mask-image: linear-gradient(90deg, transparent 0 45%, #000 68% 100%);
}

.client-public-shell .client-service-areas::after {
    z-index: 1;
    opacity: .68;
    background:
        radial-gradient(circle at 71% 32%, transparent 0 2rem, color-mix(in srgb, var(--client-accent) 34%, transparent) 2.06rem 2.16rem, transparent 2.22rem),
        radial-gradient(circle at 86% 62%, transparent 0 3.4rem, color-mix(in srgb, var(--client-brand) 30%, transparent) 3.46rem 3.58rem, transparent 3.64rem),
        radial-gradient(circle at 77% 47%, color-mix(in srgb, var(--client-accent) 80%, transparent) 0 .24rem, transparent .31rem),
        linear-gradient(28deg, transparent 0 61%, color-mix(in srgb, var(--client-accent) 22%, transparent) 61.2% 61.45%, transparent 61.7%);
    -webkit-mask-image: linear-gradient(90deg, transparent 0 42%, #000 64% 100%);
    mask-image: linear-gradient(90deg, transparent 0 42%, #000 64% 100%);
}

.client-public-shell .client-installation::after {
    z-index: 1;
    opacity: .58;
    background:
        linear-gradient(90deg, transparent 0 56%, color-mix(in srgb, var(--client-accent) 16%, transparent) 56% 56.18%, transparent 56.18%),
        repeating-linear-gradient(0deg, transparent 0 3rem, color-mix(in srgb, var(--client-line) 24%, transparent) 3rem calc(3rem + 1px)),
        radial-gradient(circle at 72% 25%, color-mix(in srgb, var(--client-brand) 58%, transparent) 0 .22rem, transparent .29rem),
        radial-gradient(circle at 84% 51%, color-mix(in srgb, var(--client-accent) 64%, transparent) 0 .24rem, transparent .31rem),
        radial-gradient(circle at 69% 76%, color-mix(in srgb, var(--client-brand) 52%, transparent) 0 .2rem, transparent .27rem);
    -webkit-mask-image: linear-gradient(90deg, transparent 0 47%, #000 67% 100%);
    mask-image: linear-gradient(90deg, transparent 0 47%, #000 67% 100%);
}

.client-public-shell .client-network-story::after {
    z-index: 1;
    opacity: .72;
    background:
        radial-gradient(circle at 68% 28%, color-mix(in srgb, var(--client-accent) 78%, transparent) 0 .25rem, transparent .33rem),
        radial-gradient(circle at 82% 44%, color-mix(in srgb, var(--client-brand) 72%, transparent) 0 .3rem, transparent .38rem),
        radial-gradient(circle at 74% 72%, color-mix(in srgb, var(--client-accent) 62%, transparent) 0 .22rem, transparent .3rem),
        linear-gradient(30deg, transparent 0 62%, color-mix(in srgb, var(--client-accent) 28%, transparent) 62.2% 62.45%, transparent 62.7%),
        linear-gradient(146deg, transparent 0 67%, color-mix(in srgb, var(--client-brand) 26%, transparent) 67.2% 67.45%, transparent 67.7%),
        repeating-linear-gradient(90deg, transparent 0 5rem, color-mix(in srgb, var(--client-line) 18%, transparent) 5rem calc(5rem + 1px));
    -webkit-mask-image: linear-gradient(90deg, transparent 0 39%, #000 61% 100%);
    mask-image: linear-gradient(90deg, transparent 0 39%, #000 61% 100%);
}

.client-public-shell .client-advantages::after {
    z-index: 1;
    opacity: .54;
    background:
        conic-gradient(from 225deg at 82% 46%, transparent 0 13%, color-mix(in srgb, var(--client-accent) 20%, transparent) 13.2% 13.7%, transparent 13.9% 25%),
        radial-gradient(circle at 82% 46%, transparent 0 5.6rem, color-mix(in srgb, var(--client-brand) 20%, transparent) 5.68rem 5.8rem, transparent 5.88rem),
        radial-gradient(circle at 82% 46%, color-mix(in srgb, var(--client-accent) 18%, transparent), transparent 28%);
    -webkit-mask-image: linear-gradient(90deg, transparent 0 44%, #000 66% 100%);
    mask-image: linear-gradient(90deg, transparent 0 44%, #000 66% 100%);
}

.client-public-shell .client-about .client-editorial-visual,
.client-public-shell .client-service-areas .client-editorial-visual,
.client-public-shell .client-installation .client-editorial-visual,
.client-public-shell .client-network-story .client-editorial-visual,
.client-public-shell .client-advantages .client-editorial-visual {
    display: block !important;
    position: absolute !important;
    z-index: 0 !important;
    inset: 0 !important;
    width: 100% !important;
    min-width: 100% !important;
    max-width: none !important;
    height: 100% !important;
    min-height: 100% !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: var(--client-dark);
    box-shadow: none !important;
    aspect-ratio: auto !important;
    transform: none !important;
    clip-path: none !important;
    pointer-events: none !important;
}

.client-public-shell .client-about .client-editorial-visual img,
.client-public-shell .client-service-areas .client-editorial-visual img,
.client-public-shell .client-installation .client-editorial-visual img,
.client-public-shell .client-network-story .client-editorial-visual img,
.client-public-shell .client-advantages .client-editorial-visual img {
    width: 100% !important;
    min-width: 100% !important;
    max-width: none !important;
    height: 100% !important;
    min-height: 100% !important;
    max-height: none !important;
    padding: 0 !important;
    object-fit: cover !important;
    object-position: 72% center !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    transform: scale(1.015);
    transform-origin: center;
}

.client-public-shell .client-service-areas .client-editorial-visual img { object-position: 68% center !important; }
.client-public-shell .client-installation .client-editorial-visual img { object-position: 76% center !important; }
.client-public-shell .client-network-story .client-editorial-visual img { object-position: 70% center !important; }
.client-public-shell .client-advantages .client-editorial-visual img { object-position: 74% center !important; }

.client-public-shell .client-editorial-visual figcaption {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    overflow: hidden !important;
    clip: rect(0 0 0 0) !important;
    clip-path: inset(50%) !important;
    white-space: nowrap !important;
}

/* Foreground ownership after the containing shells become position: static. */
.client-public-shell .client-about__story,
.client-public-shell .client-about__details,
.client-public-shell .client-service-areas__copy,
.client-public-shell .client-installation .client-section-heading,
.client-public-shell .client-installation .client-step-list,
.client-public-shell .client-installation > .client-shell > .client-button,
.client-public-shell .client-network-story__copy,
.client-public-shell .client-advantages .client-section-heading,
.client-public-shell .client-advantages .client-advantage-grid {
    position: relative;
    z-index: 2;
}

.client-public-shell .client-about__story,
.client-public-shell .client-service-areas__copy,
.client-public-shell .client-network-story__copy {
    max-width: 42rem;
}

.client-public-shell .client-about.client-section--dark,
.client-public-shell .client-about.client-section--brand,
.client-public-shell .client-about.client-section--image,
.client-public-shell .client-service-areas.client-section--dark,
.client-public-shell .client-service-areas.client-section--brand,
.client-public-shell .client-service-areas.client-section--image,
.client-public-shell .client-installation.client-section--dark,
.client-public-shell .client-installation.client-section--brand,
.client-public-shell .client-installation.client-section--image,
.client-public-shell .client-network-story.client-section--dark,
.client-public-shell .client-network-story.client-section--brand,
.client-public-shell .client-network-story.client-section--image,
.client-public-shell .client-advantages.client-section--dark,
.client-public-shell .client-advantages.client-section--brand,
.client-public-shell .client-advantages.client-section--image {
    color: #fff;
}

.client-public-shell .client-about.client-section--dark .client-section-lead,
.client-public-shell .client-about.client-section--brand .client-section-lead,
.client-public-shell .client-about.client-section--image .client-section-lead,
.client-public-shell .client-service-areas.client-section--dark .client-section-lead,
.client-public-shell .client-service-areas.client-section--brand .client-section-lead,
.client-public-shell .client-service-areas.client-section--image .client-section-lead,
.client-public-shell .client-installation.client-section--dark .client-section-lead,
.client-public-shell .client-installation.client-section--brand .client-section-lead,
.client-public-shell .client-installation.client-section--image .client-section-lead,
.client-public-shell .client-network-story.client-section--dark .client-section-lead,
.client-public-shell .client-network-story.client-section--brand .client-section-lead,
.client-public-shell .client-network-story.client-section--image .client-section-lead,
.client-public-shell .client-advantages.client-section--dark .client-section-lead,
.client-public-shell .client-advantages.client-section--brand .client-section-lead,
.client-public-shell .client-advantages.client-section--image .client-section-lead {
    color: rgba(255, 255, 255, .82);
}

/* Technical support has a dedicated command-centre illustration. */
.client-public-shell .client-support {
    min-height: clamp(42rem, 68vw, 56rem);
    color: #fff;
    background-color: #06182d;
}

.client-public-shell .client-support::before {
    z-index: 0;
    background:
        linear-gradient(90deg, rgba(4, 20, 39, .98) 0 29%, rgba(5, 29, 54, .88) 47%, rgba(4, 28, 53, .28) 72%, rgba(4, 22, 42, .1)),
        linear-gradient(180deg, rgba(2, 12, 24, .08), rgba(2, 12, 24, .3)),
        url('/img/client-default/support-command-center.svg') center / cover no-repeat;
}

.client-public-shell .client-support::after {
    z-index: 1;
    opacity: .72;
    background:
        radial-gradient(circle at 82% 32%, color-mix(in srgb, var(--client-accent) 76%, transparent) 0 .24rem, transparent .31rem),
        radial-gradient(circle at 68% 61%, color-mix(in srgb, var(--client-brand) 68%, transparent) 0 .28rem, transparent .36rem),
        linear-gradient(30deg, transparent 0 64%, color-mix(in srgb, var(--client-accent) 25%, transparent) 64.2% 64.5%, transparent 64.7%),
        repeating-linear-gradient(0deg, transparent 0 3.2rem, rgba(106, 222, 255, .08) 3.2rem calc(3.2rem + 1px));
    -webkit-mask-image: linear-gradient(90deg, transparent 0 43%, #000 65% 100%);
    mask-image: linear-gradient(90deg, transparent 0 43%, #000 65% 100%);
}

.client-public-shell .client-support > .client-shell {
    position: relative;
    z-index: 2;
    display: grid;
    min-height: clamp(42rem, 68vw, 56rem);
    align-content: center;
    gap: clamp(2rem, 4vw, 4rem);
}

.client-public-shell .client-support .client-kicker,
.client-public-shell .client-support .client-section-heading,
.client-public-shell .client-support .client-section-heading p,
.client-public-shell .client-support .client-section-heading h2 {
    color: #fff;
}

.client-public-shell .client-support .client-section-heading {
    max-width: 45rem;
}

.client-public-shell .client-support__grid {
    max-width: 58rem;
    grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr);
    gap: 1rem;
}

.client-public-shell .client-support__lead,
.client-public-shell .client-support .client-contact-list,
.client-public-shell .client-support__status {
    color: #fff;
    background: linear-gradient(145deg, rgba(5, 28, 52, .82), rgba(8, 49, 88, .58));
    border: 1px solid rgba(99, 215, 255, .35);
    box-shadow: 0 24px 80px rgba(0, 9, 20, .28);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
}

.client-public-shell .client-support__lead p,
.client-public-shell .client-support .client-contact-list small,
.client-public-shell .client-support .client-contact-list strong,
.client-public-shell .client-support__status a {
    color: rgba(255, 255, 255, .88);
}

.client-public-shell .client-support .client-button--primary {
    color: #032239;
    background: linear-gradient(135deg, #38d5f5, #16abd8);
    border-color: rgba(128, 232, 255, .72);
    box-shadow: 0 14px 34px rgba(16, 181, 224, .24);
}

.client-public-shell .client-support .client-button--primary:hover,
.client-public-shell .client-support .client-button--primary:focus-visible {
    background: linear-gradient(135deg, #65e2fb, #23bce7);
}

@media (prefers-reduced-motion: no-preference) {
    .client-public-shell .client-about .client-editorial-visual img,
    .client-public-shell .client-service-areas .client-editorial-visual img,
    .client-public-shell .client-installation .client-editorial-visual img,
    .client-public-shell .client-network-story .client-editorial-visual img,
    .client-public-shell .client-advantages .client-editorial-visual img {
        animation: client-story-breathe 20s ease-in-out infinite alternate;
        animation-play-state: paused;
    }

    .client-public-shell .client-about::after,
    .client-public-shell .client-service-areas::after,
    .client-public-shell .client-installation::after,
    .client-public-shell .client-network-story::after,
    .client-public-shell .client-advantages::after,
    .client-public-shell .client-support::after {
        animation: client-story-signal 18s ease-in-out infinite alternate;
        animation-play-state: paused;
    }

    .client-public-shell .client-support::before {
        animation: client-support-drift 24s ease-in-out infinite alternate;
        animation-play-state: paused;
    }

    .client-public-shell .client-about.client-storytelling--active .client-editorial-visual img,
    .client-public-shell .client-service-areas.client-storytelling--active .client-editorial-visual img,
    .client-public-shell .client-installation.client-storytelling--active .client-editorial-visual img,
    .client-public-shell .client-network-story.client-storytelling--active .client-editorial-visual img,
    .client-public-shell .client-advantages.client-storytelling--active .client-editorial-visual img,
    .client-public-shell .client-about.client-storytelling--active::after,
    .client-public-shell .client-service-areas.client-storytelling--active::after,
    .client-public-shell .client-installation.client-storytelling--active::after,
    .client-public-shell .client-network-story.client-storytelling--active::after,
    .client-public-shell .client-advantages.client-storytelling--active::after,
    .client-public-shell .client-support.client-storytelling--active::before,
    .client-public-shell .client-support.client-storytelling--active::after {
        animation-play-state: running;
        will-change: transform;
    }
}

@keyframes client-story-breathe {
    from { transform: scale(1.015) translate3d(0, 0, 0); }
    to { transform: scale(1.065) translate3d(-.8%, -.5%, 0); }
}

@keyframes client-story-signal {
    from { transform: translate3d(-.35%, .25%, 0) scale(1.005); opacity: .48; }
    to { transform: translate3d(.5%, -.35%, 0) scale(1.025); opacity: .74; }
}

@keyframes client-support-drift {
    from { background-position: center, center, 50% 50%; }
    to { background-position: center, center, 53% 48%; }
}

@media (max-width: 899px) {
    .client-public-shell .client-about,
    .client-public-shell .client-service-areas,
    .client-public-shell .client-installation,
    .client-public-shell .client-network-story,
    .client-public-shell .client-advantages {
        min-height: 0;
    }

    .client-public-shell .client-about::before,
    .client-public-shell .client-service-areas::before,
    .client-public-shell .client-installation::before,
    .client-public-shell .client-network-story::before,
    .client-public-shell .client-advantages::before {
        background:
            linear-gradient(
                180deg,
                color-mix(in srgb, var(--client-light) 98%, transparent) 0 52%,
                color-mix(in srgb, var(--client-light) 86%, transparent) 70%,
                color-mix(in srgb, var(--client-light) 28%, transparent) 100%
            );
    }

    .client-public-shell .client-about.client-section--dark::before,
    .client-public-shell .client-about.client-section--brand::before,
    .client-public-shell .client-about.client-section--image::before,
    .client-public-shell .client-service-areas.client-section--dark::before,
    .client-public-shell .client-service-areas.client-section--brand::before,
    .client-public-shell .client-service-areas.client-section--image::before,
    .client-public-shell .client-installation.client-section--dark::before,
    .client-public-shell .client-installation.client-section--brand::before,
    .client-public-shell .client-installation.client-section--image::before,
    .client-public-shell .client-network-story.client-section--dark::before,
    .client-public-shell .client-network-story.client-section--brand::before,
    .client-public-shell .client-network-story.client-section--image::before,
    .client-public-shell .client-advantages.client-section--dark::before,
    .client-public-shell .client-advantages.client-section--brand::before,
    .client-public-shell .client-advantages.client-section--image::before {
        background:
            linear-gradient(
                180deg,
                color-mix(in srgb, var(--client-dark) 99%, transparent) 0 54%,
                color-mix(in srgb, var(--client-dark) 88%, transparent) 72%,
                color-mix(in srgb, var(--client-dark) 42%, transparent) 100%
            );
    }

    .client-public-shell .client-about::after,
    .client-public-shell .client-service-areas::after,
    .client-public-shell .client-installation::after,
    .client-public-shell .client-network-story::after,
    .client-public-shell .client-advantages::after {
        opacity: .36;
        -webkit-mask-image: linear-gradient(180deg, transparent 0 56%, #000 78% 100%);
        mask-image: linear-gradient(180deg, transparent 0 56%, #000 78% 100%);
    }

    .client-public-shell .client-about .client-editorial-visual img,
    .client-public-shell .client-service-areas .client-editorial-visual img,
    .client-public-shell .client-installation .client-editorial-visual img,
    .client-public-shell .client-network-story .client-editorial-visual img,
    .client-public-shell .client-advantages .client-editorial-visual img {
        object-position: center bottom !important;
    }

    .client-public-shell .client-support {
        min-height: 0;
    }

    .client-public-shell .client-support::before {
        background:
            linear-gradient(180deg, rgba(4, 20, 39, .98) 0 48%, rgba(4, 25, 48, .82) 68%, rgba(4, 25, 48, .54)),
            url('/img/client-default/support-command-center.svg') 68% center / cover no-repeat;
    }

    .client-public-shell .client-support > .client-shell {
        min-height: 0;
    }

    .client-public-shell .client-support__grid {
        max-width: 100%;
        grid-template-columns: 1fr;
    }
}

@media (max-width: 599px) {
    .client-public-shell .client-support::before {
        background:
            linear-gradient(180deg, rgba(4, 20, 39, .99) 0 58%, rgba(4, 25, 48, .82) 78%, rgba(4, 25, 48, .58)),
            url('/img/client-default/support-command-center.svg') 74% bottom / auto 72% no-repeat;
    }

    .client-public-shell .client-support__lead,
    .client-public-shell .client-support .client-contact-list,
    .client-public-shell .client-support__status {
        background: rgba(5, 29, 53, .84);
    }
}

@media (prefers-contrast: more) {
    .client-public-shell .client-about::after,
    .client-public-shell .client-service-areas::after,
    .client-public-shell .client-installation::after,
    .client-public-shell .client-network-story::after,
    .client-public-shell .client-advantages::after,
    .client-public-shell .client-support::after {
        display: none;
    }

    .client-public-shell .client-support::before {
        background: #06182d;
    }

    .client-public-shell .client-support__lead,
    .client-public-shell .client-support .client-contact-list,
    .client-public-shell .client-support__status {
        border-width: 2px;
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
    }
}

@media print {
    .client-public-shell .client-about .client-editorial-visual,
    .client-public-shell .client-service-areas .client-editorial-visual,
    .client-public-shell .client-installation .client-editorial-visual,
    .client-public-shell .client-network-story .client-editorial-visual,
    .client-public-shell .client-advantages .client-editorial-visual,
    .client-public-shell .client-about::after,
    .client-public-shell .client-service-areas::after,
    .client-public-shell .client-installation::after,
    .client-public-shell .client-network-story::after,
    .client-public-shell .client-advantages::after,
    .client-public-shell .client-support::before,
    .client-public-shell .client-support::after {
        animation: none !important;
    }
}