/* Keep the original artwork behind the full page content, up to the footer. */
.site-main:has(> .oct-page-backdrop) {
    background: #111214;
    isolation: isolate;
}
.oct-page-backdrop {
    position: absolute;
    inset: 0;
    container-type: inline-size;
    overflow: clip;
    pointer-events: none;
}
.oct-page-backdrop::before {
    --art-top: -110px;
    content: '';
    display: block;
    position: sticky;
    top: 0;
    height: min(100%, 100svh);
    background: url('/images/brand/bold-line-long.png') no-repeat right var(--art-top) / 100% auto;
    filter: grayscale(1);
    opacity: .86;
    /* The artwork's diagonal runs from (1920, 400) to (0, 2320) before scaling. */
    clip-path: polygon(0 0, 100% 0, 100% calc(20.8333cqw + var(--art-top)), 0 calc(120.8333cqw + var(--art-top)));
    mask-image: linear-gradient(to bottom, transparent, #000 150px, #000 min(82%, calc(96cqw + var(--art-top))), transparent min(100%, calc(116cqw + var(--art-top))));
}
.oct-page-backdrop ~ .ipro-modern {
    background: transparent;
}
.oct-page-backdrop ~ .ipro-modern::before {
    content: none;
}
@media (max-width: 700px) {
    .oct-page-backdrop::before {
        --art-top: 0px;
        mask-image: linear-gradient(to bottom, transparent, #000 76px, #000 min(82%, 95cqw), transparent min(100%, 116cqw));
    }
}