/* Match the page edge and rubber-band area to the dark footer. */
html {
    background: #171a19;
}

@media (min-width: 761px) {
    /* Keep a desktop trackpad's elastic scroll from exposing the fixed scene
       after the homepage document has reached its end. */
    html:has(> body.has-home-video) {
        overscroll-behavior-y: none;
    }
}

/* The original PC poster is the stable homepage background when WebGL is unavailable. */
.grey-site.glass-depth.has-home-video {
    --section-backdrop: url('/assets/images/site/pc-hero-poster-v2.jpg');
    --section-backdrop-position: center;
    background-color: #171a19;
    background-image: none;
}

.grey-site.glass-depth.has-home-video .signal-hero--video {
    background: url('/assets/images/site/pc-hero-poster-v2.jpg') center / cover no-repeat;
}

/* This layer is a sibling of the clipped hero, so the complete lettering can
   straddle the video edge and the next section without being cut off. */
.grey-site.glass-depth.has-home-video .pc-wordmark {
    position: relative;
    top: -.85em;
    z-index: 6;
    width: max-content;
    max-width: calc(100% - 20px);
    margin: 0 0 -1.14em clamp(10px, 1.6vw, 28px);
    pointer-events: none;
    user-select: none;
    white-space: nowrap;
    color: #fff;
    isolation: isolate;
    font-family: Manrope, Arial Black, Arial, sans-serif;
    font-size: clamp(5rem, min(16vw, 29vh), 21rem);
    font-weight: 800;
    letter-spacing: -.085em;
    line-height: .86;
    -webkit-text-stroke: clamp(2px, .28vw, 4px) #fff4f5;
    translate: var(--pc-wordmark-x, 0px) var(--pc-wordmark-y, 0px);
}

.grey-site.glass-depth.has-home-video .pc-wordmark-front {
    position: relative;
    z-index: 1;
    display: block;
    color: #fff;
    text-shadow: 0 2px 3px rgba(22, 28, 36, .28),
        0 8px 14px rgba(22, 28, 36, .16);
}

.grey-site.glass-depth.has-home-video .pc-wordmark-front > span:last-child {
    color: #ffe6ea;
}

.grey-site.glass-depth.has-home-video.pc-wordmark-motion .pc-wordmark {
    animation: pc-wordmark-breathe 15s ease-in-out infinite alternate;
    will-change: transform, translate;
}

@keyframes pc-wordmark-breathe {
    from { transform: translateY(2px); }
    to { transform: translateY(-3px); }
}

.grey-site.glass-depth.has-home-video #services {
    scroll-margin-top: 88px;
}

@media (hover: hover) and (pointer: fine) and (min-width: 761px) {
    .grey-site.glass-depth.has-home-video .signal-copy,
    .grey-site.glass-depth.has-home-video .scroll-cue {
        will-change: translate;
    }
}

/* The canvas sits behind native content and never becomes a scrolling ancestor. */
.grey-site.glass-depth.has-home-video .pc-journey-layer {
    position: fixed;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
    background: #f8fafc;
}

.grey-site.glass-depth.has-home-video .pc-journey-layer canvas {
    display: block;
    width: 100%;
    height: 100%;
    pointer-events: none;
    /* Blur the scene once behind the first-level homepage content. The text,
       video and foreground actors remain sharp, and scrolling sections do not
       need live backdrop-filter surfaces over WebGL. */
    filter: blur(10px);
}

.grey-site.glass-depth.has-home-video .site-stage {
    position: relative;
    z-index: 1;
    min-height: 0;
    padding-bottom: 0;
}

.grey-site.glass-depth.has-home-video .site-frame {
    min-height: 0;
    margin-bottom: 0;
    border-bottom: 0;
}

.grey-site.glass-depth.has-home-video .frame-footer {
    margin-bottom: 0;
}

.grey-site.glass-depth.has-home-video.pc-journey-ready .pc-journey-layer {
    visibility: visible;
    opacity: 1;
}

/* Once WebGL has painted, its opaque canvas is the only page background.
   Avoid retaining a second fixed image and a document-height translucent
   frame behind the scrolling content. */
.grey-site.glass-depth.has-home-video.pc-journey-ready::before,
.grey-site.glass-depth.has-home-video .site-frame::before {
    display: none;
}

.grey-site.glass-depth.has-home-video .site-frame {
    background: transparent;
    border: 0;
    box-shadow: none;
}

/* The clipped hero itself reveals the rendered scene as it scrolls away.
   Keeping the video opaque avoids repainting three overlapping fades. */
.grey-site.glass-depth.has-home-video.pc-journey-ready .hero-background-video {
    opacity: 1;
}

/* Keep service descriptions readable over detailed hardware and cable paths. */
.grey-site.glass-depth.has-home-video .service-grid > article {
    background-image:
        linear-gradient(132deg, rgba(255, 255, 255, .82), rgba(253, 254, 255, .78) 48%, rgba(247, 251, 255, .76)),
        var(--material-led-edge), var(--depth-shine), var(--material-reflection);
}

/* The closing content stays legible while the wide PC view remains visible. */
.grey-site.glass-depth.has-home-video .insight-band {
    color: #29343d;
    border-bottom: 1px solid rgba(44, 57, 68, .16);
    background: rgba(250, 252, 255, .72);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
}

.grey-site.glass-depth.has-home-video .insight-band .section-index,
.grey-site.glass-depth.has-home-video .insight-index time {
    color: #4b5b68;
}

.grey-site.glass-depth.has-home-video .insight-copy h2 {
    color: #1f2932;
    text-shadow: none;
}

.grey-site.glass-depth.has-home-video .insight-copy > p:last-child,
.grey-site.glass-depth.has-home-video .insight-index > a {
    color: #33424f;
}

.grey-site.glass-depth.has-home-video .insight-index > a {
    border-bottom-color: rgba(44, 57, 68, .2);
}

.grey-site.glass-depth.has-home-video .insight-tags a {
    color: #33424f;
    border-color: rgba(44, 57, 68, .3);
    background: rgba(255, 255, 255, .38);
}

.grey-site.glass-depth.has-home-video .insight-tags a:hover,
.grey-site.glass-depth.has-home-video .insight-tags a:focus-visible {
    color: #a40f16;
    border-color: #a40f16;
}

.grey-site.glass-depth.has-home-video .data-strip {
    color: #29343d;
    background: rgba(247, 250, 254, .76);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
}

.grey-site.glass-depth.has-home-video .data-strip > div {
    border-color: rgba(44, 57, 68, .17);
}

.grey-site.glass-depth.has-home-video .data-strip strong {
    color: #202b35;
    text-shadow: none;
}

.grey-site.glass-depth.has-home-video .data-strip span {
    color: #4b5b68;
}

/* The footer advert band sits above the dark footer on desktop. Give the
   whole band an opaque fill so the animated PC cannot show through it. */
.grey-site.glass-depth.has-home-video .site-frame > .site-ad[data-ad-placement="footer"] {
    background: #171a19;
    border: 0;
    box-shadow: none;
}

.grey-site.glass-depth.has-home-video .advert-privacy-links {
    color: #c7cbce;
    background: #171a19;
}

.grey-site.glass-depth.has-home-video .frame-footer {
    color: #a7abae;
    background: #171a19;
    /* Elastic desktop overscroll exposes the fixed PC behind the document.
       This solid, unblurred shadow begins at the footer and paints well below
       the scroll limit without adding height or a permanent content gap. */
    box-shadow: 0 50vh 0 50vh #171a19;
}

.grey-site.glass-depth.has-home-video .frame-footer a {
    color: #d5d9dc;
}

.grey-site.glass-depth.has-home-video .advert-privacy-links a:hover,
.grey-site.glass-depth.has-home-video .frame-footer a:hover {
    color: #a40f16;
}

@media (prefers-reduced-transparency: reduce) {
    .grey-site.glass-depth.has-home-video :is(.insight-band, .data-strip) {
        background: #f8fbfe;
    }
}

@media (min-width: 761px) and (max-width: 900px) {
    .grey-site.glass-depth.has-home-video .pc-wordmark {
        font-size: 16vw;
    }
}

@media (max-width: 760px) {
    .grey-site.glass-depth.has-home-video { --section-backdrop-position: 72% center; }
    .grey-site.glass-depth.has-home-video #services { scroll-margin-top: 82px; }
    .grey-site.glass-depth.has-home-video .pc-wordmark {
        top: -.94em;
        width: max-content;
        max-width: calc(100% - 24px);
        margin: 0 0 -1.56em auto;
        padding-right: clamp(12px, 4vw, 28px);
        font-size: clamp(4.4rem, 24.5vw, 10rem);
        letter-spacing: -.075em;
        line-height: .78;
        white-space: normal;
    }
    .grey-site.glass-depth.has-home-video .pc-wordmark-front {
        display: flex;
        align-items: flex-end;
        flex-direction: column;
    }
}

@media (min-width: 600px) and (max-width: 760px) {
    .grey-site.glass-depth.has-home-video .pc-wordmark {
        top: -.85em;
        max-width: calc(100% - 24px);
        margin: 0 0 -1.14em clamp(12px, 2vw, 22px);
        padding-right: 0;
        font-size: 16vw;
        line-height: .82;
        white-space: nowrap;
    }
    .grey-site.glass-depth.has-home-video .pc-wordmark-front {
        display: block;
    }
}

@media (max-height: 600px) {
    .grey-site.glass-depth.has-home-video .pc-wordmark {
        font-size: clamp(3rem, min(16vw, 22vh), 7rem);
    }
}

@media (prefers-reduced-motion: reduce) {
    .grey-site.glass-depth.has-home-video .pc-journey-layer { display: none; }
    .grey-site.glass-depth.has-home-video :is(.signal-copy, .scroll-cue) { translate: none !important; }
    .grey-site.glass-depth.has-home-video .pc-wordmark { animation: none !important; translate: none !important; transform: none !important; }
}

@media print {
    .grey-site.glass-depth.has-home-video .pc-journey-layer { display: none !important; }
    .grey-site.glass-depth.has-home-video .pc-journey-layer canvas { display: none !important; }
    .grey-site.glass-depth.has-home-video .pc-wordmark { display: none !important; }
    .grey-site.glass-depth.has-home-video :is(.insight-band, .data-strip) {
        background: #fff !important;
    }
}