/* Semantic hero tones help users identify the current detail context. */
.tpv2-product-hero,
.tpv2-provider-hero,
.tpv2-case-hero,
.tpv2-technology-hero,
.tpv2-sector-hero {
    position: relative;
    isolation: isolate;
    overflow: hidden;
}

.tpv2-product-hero {
    background:
        radial-gradient(circle at 82% 18%, rgba(92, 184, 210, .2), transparent 31%),
        linear-gradient(125deg, #102f4d 0%, #155473 100%);
}

.tpv2-provider-hero {
    background:
        radial-gradient(circle at 84% 16%, rgba(102, 210, 178, .18), transparent 32%),
        linear-gradient(125deg, #103c40 0%, #0c665b 100%);
}

.tpv2-case-hero {
    background:
        radial-gradient(circle at 83% 17%, rgba(158, 175, 218, .18), transparent 32%),
        linear-gradient(125deg, #263651 0%, #455474 100%);
}

.tpv2-technology-hero {
    background:
        radial-gradient(circle at 84% 16%, rgba(151, 205, 159, .18), transparent 32%),
        linear-gradient(125deg, #173b3e 0%, #28604f 100%);
}

.tpv2-sector-hero {
    background:
        radial-gradient(circle at 84% 17%, rgba(150, 190, 208, .18), transparent 32%),
        linear-gradient(125deg, #263c50 0%, #46677a 100%);
}

.tpv2-product-hero::before,
.tpv2-provider-hero::before,
.tpv2-case-hero::before,
.tpv2-technology-hero::before,
.tpv2-sector-hero::before {
    position: absolute;
    z-index: -1;
    inset: 0;
    background: linear-gradient(90deg, rgba(5, 24, 40, .12), transparent 58%);
    content: '';
    pointer-events: none;
}

.tpv2-product-hero > .container,
.tpv2-provider-hero > .container,
.tpv2-case-hero > .container,
.tpv2-technology-hero > .container,
.tpv2-sector-hero > .container {
    position: relative;
    z-index: 1;
}

@media (prefers-contrast: more) {
    .tpv2-product-hero { background: #123b58; }
    .tpv2-provider-hero { background: #164f49; }
    .tpv2-case-hero { background: #36435f; }
    .tpv2-technology-hero { background: #254c42; }
    .tpv2-sector-hero { background: #354f61; }
}