/* --- INSIGHTS --- */

.insights {
    margin-top: 2rem;
    padding-left: 0;
    padding-right: 0;
}

.share-link {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.6rem 0.75rem;
    border-radius: var(--pico-border-radius);
    text-decoration: none;
    color: var(--pico-contrast);
    font-size: 0.9rem;
    transition: background 0.2s ease;
}

.share-link:hover {
    background: rgba(255, 255, 255, 0.1);
    color: var(--pico-primary);
}

.share-link i {
    width: 20px;
    text-align: center;
    font-size: 1.1rem;
}

/* --- AUTHOR CARD --- */

.author-card {
    background: var(--pico-card-background-color);
    border-radius: var(--pico-border-radius);
    box-shadow: var(--pico-card-box-shadow);
    padding: var(--pico-block-spacing-vertical) var(--pico-block-spacing-horizontal);
    margin-bottom: var(--pico-block-spacing-vertical);
}

.content-block-wrapper {
    margin-top: 0;
}

.section-card {
    padding: 0;
    margin-bottom: 2rem;
    overflow: hidden;
}

.author-card.section-card h5 {
    color: var(--pico-contrast);
    font-weight: 700;
    letter-spacing: 0.05rem;
    text-transform: uppercase;
    font-size: 0.85rem;
}

.author-card h6 {
    margin-top: 0;
    font-size: 1.25rem;
    margin-bottom: 0;
    color: #373c44;
}

.author-grid {
    grid-template-columns: 1fr;
    gap: 2rem;
    align-items: center;
}

@media (min-width: 576px) {
    .author-grid {
        grid-template-columns: auto 1fr;
    }
}

.author-image-col {
    display: flex;
    justify-content: center;
}

.author-avatar {
    border-radius: 50%;
    width: 120px;
    height: 120px;
    object-fit: cover;
    border: 2px solid var(--pico-muted-border-color);
}

.author-meta-line {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    margin-top: 0.5rem !important;
    color: var(--pico-muted-color);
}

.author-avatar-small {
    border-radius: 50%;
    width: 32px;
    height: 32px;
    object-fit: cover;
}

.author-block-container {
    margin: 2rem 0;
    clear: both;
    position: relative;
    z-index: 100;
}

.author-block-card {
    border-radius: var(--pico-border-radius);
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.author-block-image {
    flex-shrink: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.author-circle,
.author-profile-crop img,
figure.standalone-image.author-profile-crop img {
    border-radius: 50%;
    width: 250px;
    height: 250px;
    object-fit: cover;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    margin-left: auto;
    margin-right: auto;
    margin-top: 1rem;
    display: block;
}

figure.standalone-image.author-profile-crop {
    background: transparent;
    border: none;
    box-shadow: none;
    overflow: visible;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 250px;

}

figure.standalone-image.author-profile-crop figcaption {
    border-top: none;
    background: none;
}

.author-details {
    margin-top: 1rem;
    text-align: center;
}

.author-block-name {
    margin: 0.5rem 0 0.25rem 0;
    font-size: 1rem;
    font-weight: 700;
    font-style: italic;
    color: var(--pico-muted-color);
}

.author-block-bio {
    font-size: 0.9rem;
    color: var(--pico-muted-color);
    line-height: 1.5;
}

.author-block-bio p {
    margin-bottom: 0.5rem;
}

.author-block-bio p:last-child {
    margin-bottom: 0;
}

@media (min-width: 1024px) {

    /* Images and videos are always centred — left/right float
       is only available for KPI, author, and quote blocks. */
    .author-float-left,
    .kpi-float-left,
    .quote-float-left {
        float: left;
        width: calc(50% - 2rem);
        margin: 0 2rem 2rem 0 !important;
        padding: 0;
        clear: left;
        box-sizing: border-box;
    }

    .author-float-right,
    .kpi-float-right,
    .quote-float-right {
        float: right;
        width: calc(50% - 2rem);
        margin: 0 0 2rem 2rem !important;
        padding: 0;
        clear: right;
        box-sizing: border-box;
    }

    [class*="-body"]>.author-float-center,
    [class*="-body"]>.video-float-center,
    [class*="-body"]>.kpi-float-center,
    [class*="-body"]>.image-float-center,
    [class*="-body"]>.quote-float-center,
    .author-float-center,
    .video-float-center,
    .kpi-float-center,
    .image-float-center,
    .quote-float-center {
        float: none;
        display: block;
        margin-left: auto;
        margin-right: auto;
        margin-bottom: 2rem;
        text-align: center;
        width: 100%;
    }
}

@media (max-width: 1023px) {

    .author-float-left,
    .author-float-right,
    .author-float-center,
    .video-float-left,
    .video-float-right,
    .video-float-center,
    .kpi-float-left,
    .kpi-float-right,
    .kpi-float-center {
        width: 100% !important;
        float: none !important;
        margin: 0 auto 1.5rem auto;
        display: block;
    }
}

@media (max-width: 767px) {
    .author-block-card {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }
}

.client-logos-section {
    position: relative;
    width: 100vw;
    margin-left: -50vw;
    left: 50%;
    background-color: rgba(245, 245, 245, 0.6);
    padding: 2rem 0;
    overflow: hidden;
    backdrop-filter: blur(10px);
    margin-bottom: 0 !important;
    margin-top: 0;
    border-bottom: 1px solid var(--pico-muted-border-color);
    border-top: 1px solid var(--pico-muted-border-color);
}

.logos-carousel-wrapper {
    position: relative;
    width: 100vw;
    left: 50%;
    margin-left: -50vw;
    padding: 0;
}

.logos-carousel {
    overflow: hidden;
    padding: 1rem 0;
}

.logos-track {
    display: flex;
    width: max-content;
    animation: logoMarquee 160s linear infinite;
    transform: translate3d(0, 0, 0);
}

.logos-carousel:hover .logos-track {
    animation-play-state: paused;
}

.logos-carousel.row-2 .logos-track {
    padding-left: 125px !important;
}

.logos-group {
    display: grid;
    grid-template-rows: 110px;
    grid-auto-flow: column;
    grid-auto-columns: min-content;
    gap: 1rem 2rem;
    align-items: center;
    padding-right: 2rem;
}

.logo-item {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
}

.logo-item img {
    max-width: 250px;
    max-height: 100px;
    width: auto;
    height: auto;
    object-fit: contain;
    flex-shrink: 0;
}

@keyframes logoMarquee {
    0% {
        transform: translate3d(0, 0, 0);
    }

    100% {
        transform: translate3d(-50%, 0, 0);
    }
}

@media (max-width: 768px) {
    .logos-track {
        animation-duration: 44s;
    }

    .logos-group {
        grid-template-rows: repeat(2, 70px);
        grid-auto-columns: min-content;
        gap: 1rem 1.5rem;
        padding-right: 1.5rem;
    }

    .logo-item img {
        max-width: 125px;
        max-height: 60px;
    }
}

/* --- INSIGHTS --- */

.insight-card {
    background-color: rgba(255, 255, 255, 0.7) !important;
    backdrop-filter: blur(10px) !important;
    border-radius: 8px !important;
    padding: 0 !important;
    margin: 0.5rem 0 !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05) !important;

    overflow: hidden !important;
    display: flow-root !important;
}

.insights-outer-card {
    padding: 1.5rem 0 !important;
    background: transparent !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border: none !important;
    box-shadow: none !important;
}

.insights-list {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.insight-card-inner {
    display: flex;
    flex-direction: column;
}

.insight-image-container {
    width: 100%;
    line-height: 0;
    display: flex;
    position: relative;
}

.insight-image-container::after {
    content: '';
    position: absolute;
    inset: -1px;
    background-color: rgba(0, 0, 0, 0.05);

    pointer-events: none;
    z-index: 1;
}

.insight-featured-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    margin: 0 !important;
    padding: 0;
    border: none;
}

.insight-content {
    padding: 2rem;
}

.insight-content h3 {
    margin-bottom: 0.5rem;
}

.insight-author-meta {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 1rem;
}

.insight-author-meta small {
    color: var(--pico-muted-color);
}

@media (min-width: 769px) {
    .insight-card-inner {
        flex-direction: row;
        align-items: stretch;
    }

    .insight-image-container {
        width: 35%;
        flex-shrink: 0;
        height: auto;
    }

    .insight-featured-image {
        height: 100% !important;
        min-height: 350px;
    }

    .insight-content {
        flex-grow: 1;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }
}

/* --- INSIGHT AUTHOR SECTION --- */

.insight-author-section {
    margin-top: 2rem;
}

.author-grid {
    display: flex;
    align-items: center;
    gap: 2.5rem;
}

@media (max-width: 768px) {
    .author-grid {
        flex-direction: column;
        text-align: center;
        gap: 1.5rem;
    }
}

.author-image-container {
    flex-shrink: 0;
    width: 150px;
    height: 150px;
}

.author-avatar-large {
    width: 150px !important;
    height: 150px !important;
    border-radius: 50% !important;
    object-fit: cover !important;
    background-color: transparent !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

.author-placeholder-circle {
    width: 150px;
    height: 150px;
    border-radius: 50%;
    background-color: var(--pico-secondary-background);
}

.author-info h3 {
    margin-bottom: 0.25rem;
    font-size: 1.5rem;
}

.author-job-title {
    color: var(--pico-muted-color);
    font-size: 0.95rem;
    margin-bottom: 1rem;
}

.author-bio {
    font-size: 1rem;
    line-height: 1.6;
}

.hero .hero-content {
    position: relative;
    z-index: 1;
    display: inline-block;
    max-width: 800px;
    margin: 0 auto;
    text-align: center;
}

.hero .hero-content::before {
    content: "";
    position: absolute;
    top: -4rem;
    bottom: -4rem;
    left: -4rem;
    right: -4rem;
    z-index: -1;
    background-color: rgba(255, 255, 255, 0.4) !important;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    pointer-events: none;

    /* Soft bleeding edges to prevent a sharp line */
    -webkit-mask-image: radial-gradient(ellipse at center, black 40%, transparent 75%);
    mask-image: radial-gradient(ellipse at center, black 40%, transparent 75%);
}

.hero.hero-split h1 {
    color: #1C164E;
    text-shadow: none !important;
    padding-bottom: 0.15em;
    line-height: 1.25;
}

.hero.hero-split p {
    color: var(--pico-color);
    text-shadow: none !important;
    margin: 0 0 2.5rem 0;
    max-width: none;
}

.hero-side-img {
    border-radius: var(--pico-border-radius);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
    max-width: 100%;
}

.glass-card.tint-dark {
    background-color: rgba(15, 15, 35, 0.95) !important;
    backdrop-filter: blur(10px) !important;
}

.hero-split-buttons {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
    margin-top: 2rem;
}

.get-started-btn {
    color: #ffffff !important;
    background-color: #FF0630 !important;
    border: 2px solid #FF0630 !important;
    box-shadow: none !important;
}

.get-started-btn:hover,
.get-started-btn:active,
.get-started-btn:focus {
    background-color: #B80443 !important;
    border: 2px solid #B80443 !important;
}

.case-studies-btn {
    color: #14d2d2 !important;
    background-color: rgba(255, 255, 255, 0.4) !important;
    backdrop-filter: blur(4px);
    border: 2px solid #14d2d2 !important;
}

.case-studies-btn:hover,
.case-studies-btn:active,
.case-studies-btn:focus {
    background-color: rgba(20, 210, 210, 0.1) !important;
}

@media (max-width: 1023px) {
    .hero.hero-split {
        min-height: 72vh;
        padding-top: max(6.5rem, 26vh);
    }

    .hero.hero-split .container {
        padding-left: 1.75rem !important;
        padding-right: 1.75rem !important;
    }

    .hero.hero-split .hero-content {
        display: block;
        text-align: left;
        margin: 0;
        max-width: 100%;
    }

    .hero .hero-content::before {
        left: -1rem;
        right: -1rem;
    }
}

.full-width-callouts {
    clear: both !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    display: block;
}

.full-width-callouts h2 {
    margin-bottom: var(--pico-spacing);
}

.full-width-callouts .icon-box-small {
    margin-bottom: 1rem;
}

.full-width-callouts h4 {
    margin-bottom: 0.5rem;
    color: #1C164E;
}

.full-width-callouts .box {
    position: relative;
    overflow: hidden;
    z-index: 1;
    margin: 0;
}

.full-width-callouts .grid {
    gap: 1.5rem;
}

.home-content-body>.full-width-callouts,
.after-content-body>.full-width-callouts {
    margin: 1.5rem 0;
}

.section-card-content>.full-width-callouts {
    margin-bottom: 2rem;
}

.section-card-content>.full-width-callouts:last-child {
    margin-bottom: 0;
}

.full-width-callouts .box::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-size: cover;
    background-position: top center;
    background-repeat: no-repeat;
    filter: blur(0.5px);
    transform: scale(1.05);
    z-index: 1;
    opacity: 0.05;
}

.full-width-callouts .box>* {
    position: relative;
    z-index: 2;
}

.full-width-callouts p {
    font-size: 0.9em;
    line-height: 1.4;
}

@media (max-width: 1023px) {
    /* Collapse standard callout grids to single column at tablet width */
    .full-width-callouts .grid:not(:has(.callout-flat-blue)) {
        grid-template-columns: 1fr !important;
    }

    /* Cap standard callout tiles at a readable width, centre them, and force
       them to fill their grid cell so all tiles are consistently the same
       width regardless of content length — applies to both the full-width
       (.box) and breakout-section (.callout-card) variants */
    .full-width-callouts .box:not(.callout-flat-blue),
    .pico .callout-card:not(.callout-flat-blue) {
        max-width: 640px;
        margin-left: auto !important;
        margin-right: auto !important;
        width: 100% !important;
        align-self: stretch !important;
    }
}

.full-width-callouts .grid> :only-child {
    max-width: 900px;
    margin-left: auto;
    margin-right: auto;
}

.location-snippet-error {
    padding: 2rem;
}

.cta-snippet-breakout {
    position: relative;
    overflow: hidden;
    padding-right: 2rem;
    padding-left: 2rem;
    /* .glass-card { padding: 2rem } shorthand collapses top/bottom space.
       Override here (layouts.css loads after custom.css) so the patterned
       background has generous breathing room above and below the content. */
    padding-top: 6rem !important;
    padding-bottom: 6rem !important;
}

.cta-snippet-breakout .container {
    position: relative;
    z-index: 2;
}

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
}

.form-help-text {
    font-size: 0.75rem;
    margin-top: 1rem;
    color: var(--pico-muted-color);
}

.carousel-nav.prev.hidden {
    display: none;
}

.glass-card.tint-corvidae-blue {
    background-color: rgba(28, 22, 78, 0.10);
}

.glass-card.tint-mid-blue {
    background-color: rgba(62, 85, 200, 0.10);
}

.glass-card.tint-bright-blue {
    background-color: rgba(85, 162, 230, 0.10);
}

.glass-card.tint-stone {
    background-color: rgba(107, 124, 147, 0.10);
}

.glass-card.tint-light-blue {
    background-color: rgba(188, 222, 253, 0.40);
}

.glass-card.tint-white {
    background-color: rgba(255, 255, 255, 0.10);
}


/* --- THEME BRAND COLOR VARIABLES --- */
.brand-white {
    --theme-bg-kpi: rgba(255, 255, 255, 0.10);
    --theme-bg-cta: rgba(255, 255, 255, 0.9);
    --theme-circles-bg: url("/static/images/template/kpis/circles/background-white.062bd2a1fbc6.svg");
    --theme-crosses-bg: url("/static/images/template/kpis/crosses/background-white.7f5024db7b2a.svg");
    --theme-blobs-bg: url("/static/images/template/kpis/blobs/background-white.303010493290.svg");
    --theme-pattern-color: rgba(0, 0, 0, 0.2);
    --theme-text-color: #1C164E;
    --theme-link-color: #47495A;
    --theme-link-focus: #1C164E;
    --theme-cta-text-color: var(--pico-contrast);
}

.brand-qc-red {
    --theme-bg-kpi: rgba(255, 64, 48, 0.10);
    --theme-bg-cta: rgba(255, 6, 48, 0.9);
    --theme-circles-bg: url("/static/images/template/kpis/circles/background-qc-red.0481a775f2f7.svg");
    --theme-crosses-bg: url("/static/images/template/kpis/crosses/background-qc-red.e1e6242e8e57.svg");
    --theme-blobs-bg: url("/static/images/template/kpis/blobs/background-qc-red.9ffcca212613.svg");
    --theme-pattern-color: rgba(255, 64, 48, 0.05);
    --theme-text-color: #1B2244;
    --theme-link-color: #4E7B9B;
    --theme-link-focus: #1B2B5B;
    --theme-cta-text-color: rgba(255, 6, 48, 0.9);
}

.brand-cherry {
    --theme-bg-kpi: rgba(184, 4, 67, 0.10);
    --theme-bg-cta: rgba(184, 4, 67, 0.9);
    --theme-circles-bg: url("/static/images/template/kpis/circles/background-cherry.7ca88ea692fd.svg");
    --theme-crosses-bg: url("/static/images/template/kpis/crosses/background-cherry.d3dfabfe67f6.svg");
    --theme-blobs-bg: url("/static/images/template/kpis/blobs/background-cherry.b1b0a9c68df2.svg");
    --theme-pattern-color: rgba(184, 4, 67, 0.2);
    --theme-text-color: #590014;
    --theme-link-color: #96102B;
    --theme-link-focus: #590014;
    --theme-link-shadow: 0 1px 1px rgba(0, 0, 0, 0.8);
    --theme-cta-text-color: rgba(184, 4, 67, 0.9);
}

.brand-qc-blue {
    --theme-bg-kpi: rgba(0, 82, 255, 0.10);
    --theme-bg-cta: rgba(0, 82, 255, 0.9);
    --theme-circles-bg: url("/static/images/template/kpis/circles/background-qc-blue.cf6f7e648bfd.svg");
    --theme-crosses-bg: url("/static/images/template/kpis/crosses/background-qc-blue.00d536e4a93f.svg");
    --theme-blobs-bg: url("/static/images/template/kpis/blobs/background-qc-blue.6e7d0e02ac9f.svg");
    --theme-pattern-color: rgba(0, 82, 255, 0.2);
    --theme-text-color: #002D62;
    --theme-link-color: #318CE7;
    --theme-link-focus: #002D62;
    --theme-link-shadow: 0 1px 1px rgba(0, 45, 98, 0.2);
    --theme-cta-text-color: rgba(0, 82, 255, 0.9);
}

.brand-corvidae-blue {
    --theme-bg-kpi: rgba(28, 22, 78, 0.10);
    --theme-bg-cta: rgba(28, 22, 78, 0.9);
    --theme-circles-bg: url("/static/images/template/kpis/circles/background-corvidae-blue.628c89bdc8c9.svg");
    --theme-crosses-bg: url("/static/images/template/kpis/crosses/background-corvidae-blue.984b6573b227.svg");
    --theme-blobs-bg: url("/static/images/template/kpis/blobs/background-corvidae-blue.469613e3a12f.svg");
    --theme-pattern-color: rgba(28, 22, 78, 0.2);
    --theme-text-color: #4D3A8E;
    --theme-link-color: #8E7AB5;
    --theme-link-focus: #2B1B54;
    --theme-link-shadow: 0 1px 1px rgba(43, 27, 84, 0.2);
    --theme-cta-text-color: rgba(28, 22, 78, 0.9);
}

.brand-slate {
    --theme-bg-kpi: rgba(71, 73, 90, 0.10);
    --theme-bg-cta: rgba(71, 73, 90, 0.9);
    --theme-circles-bg: url("/static/images/template/kpis/circles/background-slate.fc5acdbaafd6.svg");
    --theme-crosses-bg: url("/static/images/template/kpis/crosses/background-slate.5354f8b3a7be.svg");
    --theme-blobs-bg: url("/static/images/template/kpis/blobs/background-slate.67f6767227f5.svg");
    --theme-pattern-color: rgba(71, 73, 90, 0.2);
    --theme-text-color: #00363A;
    --theme-link-color: #0097A7;
    --theme-link-focus: #00363A;
    --theme-link-shadow: 0 1px 1px rgba(0, 54, 58, 0.2);
    --theme-cta-text-color: rgba(71, 73, 90, 0.9);
}

.brand-stone {
    --theme-bg-kpi: rgba(107, 124, 147, 0.10);
    --theme-bg-cta: rgba(107, 124, 147, 0.9);
    --theme-circles-bg: url("/static/images/template/kpis/circles/background-stone.896c0b8262b4.svg");
    --theme-crosses-bg: url("/static/images/template/kpis/crosses/background-stone.e48deceed709.svg");
    --theme-blobs-bg: url("/static/images/template/kpis/blobs/background-stone.ac7fe8e26820.svg");
    --theme-pattern-color: rgba(107, 124, 147, 0.2);
    --theme-text-color: #203354;
    --theme-link-color: #4A69BD;
    --theme-link-focus: #203354;
    --theme-cta-text-color: rgba(107, 124, 147, 0.9);
}

.brand-pebble {
    --theme-bg-kpi: rgba(196, 210, 222, 0.10);
    --theme-bg-cta: rgba(196, 210, 222, 0.9);
    --theme-circles-bg: url("/static/images/template/kpis/circles/background-pebble.4f961c8905ed.svg");
    --theme-crosses-bg: url("/static/images/template/kpis/crosses/background-pebble.78d7e887158d.svg");
    --theme-blobs-bg: url("/static/images/template/kpis/blobs/background-pebble.bfb6057c4794.svg");
    --theme-pattern-color: rgba(196, 210, 222, 0.2);
    --theme-text-color: #1A3B66;
    --theme-link-color: #3A6394;
    --theme-link-focus: #1A3B66;
    --theme-cta-text-color: var(--pico-contrast);
}

.brand-fog {
    --theme-bg-kpi: rgba(246, 246, 249, 0.10);
    --theme-bg-cta: rgba(246, 246, 249, 0.9);
    --theme-circles-bg: url("/static/images/template/kpis/circles/background-fog.8cf8fd5b2d22.svg");
    --theme-crosses-bg: url("/static/images/template/kpis/crosses/background-fog.899809970ce1.svg");
    --theme-blobs-bg: url("/static/images/template/kpis/blobs/background-fog.fb9faaf4faa4.svg");
    --theme-pattern-color: rgba(246, 246, 249, 0.2);
    --theme-text-color: #47495A;
    --theme-link-color: #4E7B9B;
    --theme-link-focus: #1C164E;
    --theme-cta-text-color: var(--pico-contrast);
}

.brand-teal {
    --theme-bg-kpi: rgba(0, 155, 174, 0.10);
    --theme-bg-cta: rgba(0, 155, 174, 0.9);
    --theme-circles-bg: url("/static/images/template/kpis/circles/background-teal.099e106d3411.svg");
    --theme-crosses-bg: url("/static/images/template/kpis/crosses/background-teal.7b3a2fa2e209.svg");
    --theme-blobs-bg: url("/static/images/template/kpis/blobs/background-teal.f5a77e8ea551.svg");
    --theme-pattern-color: rgba(0, 155, 174, 0.2);
    --theme-text-color: #003D44;
    --theme-link-color: #007E8C;
    --theme-link-focus: #003D44;
    --theme-link-shadow: 0 1px 1px rgba(0, 61, 68, 0.2);
    --theme-cta-text-color: rgba(0, 155, 174, 0.9);
}

.brand-petrol {
    --theme-bg-cta: rgba(78, 123, 155, 0.9);
    --theme-circles-bg: url("/static/images/template/kpis/circles/background-petrol.8e31b6d43265.svg");
    --theme-crosses-bg: url("/static/images/template/kpis/crosses/background-petrol.be08e93383ea.svg");
    --theme-blobs-bg: url("/static/images/template/kpis/blobs/background-petrol.f86b4917fdf7.svg");
    --theme-pattern-color: rgba(78, 123, 155, 0.2);
    --theme-text-color: #123040;
    --theme-link-color: #3A86AD;
    --theme-link-focus: #123040;
    --theme-link-shadow: 0 1px 1px rgba(18, 48, 64, 0.2);
    --theme-cta-text-color: rgba(78, 123, 155, 0.9);
}

.brand-purple {
    --theme-bg-cta: rgba(187, 101, 255, 0.9);
    --theme-circles-bg: url("/static/images/template/kpis/circles/background-purple.05fe175b23ba.svg");
    --theme-crosses-bg: url("/static/images/template/kpis/crosses/background-purple.96ae60d2f9fc.svg");
    --theme-blobs-bg: url("/static/images/template/kpis/blobs/background-purple.904d296ed290.svg");
    --theme-pattern-color: rgba(187, 101, 255, 0.2);
    --theme-text-color: #2E1A47;
    --theme-link-color: #6A4E91;
    --theme-link-focus: #2E1A47;
    --theme-link-shadow: 0 1px 1px rgba(46, 26, 71, 0.2);
    --theme-cta-text-color: rgba(187, 101, 255, 0.9);
}

.brand-pink {
    --theme-bg-cta: rgba(255, 109, 156, 0.9);
    --theme-circles-bg: url("/static/images/template/kpis/circles/background-pink.3baef2cd6b3d.svg");
    --theme-crosses-bg: url("/static/images/template/kpis/crosses/background-pink.bbb938677431.svg");
    --theme-blobs-bg: url("/static/images/template/kpis/blobs/background-pink.20a0ffa87d6b.svg");
    --theme-pattern-color: rgba(255, 109, 156, 0.2);
    --theme-text-color: #5C002A;
    --theme-link-color: #AD004F;
    --theme-link-focus: #5C002A;
    --theme-cta-text-color: rgba(255, 109, 156, 0.9);
}

.brand-yellow {
    --theme-bg-cta: rgba(255, 182, 114, 0.9);
    --theme-circles-bg: url("/static/images/template/kpis/circles/background-yellow.dff1c11d43b5.svg");
    --theme-crosses-bg: url("/static/images/template/kpis/crosses/background-yellow.8f894c46f402.svg");
    --theme-blobs-bg: url("/static/images/template/kpis/blobs/background-yellow.d016e33b97a2.svg");
    --theme-pattern-color: rgba(255, 182, 114, 0.2);
    --theme-text-color: #52217A;
    --theme-link-color: #824CB3;
    --theme-link-focus: #52217A;
    --theme-cta-text-color: var(--pico-contrast);
}

.brand-green {
    --theme-bg-cta: rgba(0, 235, 164, 0.9);
    --theme-circles-bg: url("/static/images/template/kpis/circles/background-green.98082a767228.svg");
    --theme-crosses-bg: url("/static/images/template/kpis/crosses/background-green.4ba6474b2e39.svg");
    --theme-blobs-bg: url("/static/images/template/kpis/blobs/background-green.f7b6fd6ac5a6.svg");
    --theme-pattern-color: rgba(0, 235, 164, 0.2);
    --theme-text-color: #064036;
    --theme-link-color: #00A88E;
    --theme-link-focus: #064036;
    --theme-cta-text-color: rgba(0, 235, 164, 0.9);
}

.brand-mid-blue {
    --theme-bg-kpi: rgba(62, 85, 200, 0.10);
    --theme-bg-cta: rgba(62, 85, 200, 0.90);
    --theme-circles-bg: url("/static/images/template/kpis/circles/background-qc-blue.cf6f7e648bfd.svg");
    --theme-crosses-bg: url("/static/images/template/kpis/crosses/background-qc-blue.00d536e4a93f.svg");
    --theme-blobs-bg: url("/static/images/template/kpis/blobs/background-qc-blue.6e7d0e02ac9f.svg");
    --theme-pattern-color: rgba(0, 0, 0, 0.05);
    --theme-cta-text-color: white;
}

.brand-bright-blue {
    --theme-bg-kpi: rgba(85, 162, 230, 0.10);
    --theme-bg-cta: rgba(85, 162, 230, 0.90);
    --theme-circles-bg: url("/static/images/template/kpis/circles/background-qc-blue.cf6f7e648bfd.svg");
    --theme-crosses-bg: url("/static/images/template/kpis/crosses/background-qc-blue.00d536e4a93f.svg");
    --theme-blobs-bg: url("/static/images/template/kpis/blobs/background-qc-blue.6e7d0e02ac9f.svg");
    --theme-pattern-color: rgba(0, 0, 0, 0.05);
    --theme-cta-text-color: white;
}

.brand-light-blue {
    --theme-bg-kpi: rgba(188, 222, 253, 0.40);
    --theme-bg-cta: rgba(188, 222, 253, 0.90);
    --theme-circles-bg: url("/static/images/template/kpis/circles/background-qc-blue.cf6f7e648bfd.svg");
    --theme-crosses-bg: url("/static/images/template/kpis/crosses/background-qc-blue.00d536e4a93f.svg");
    --theme-blobs-bg: url("/static/images/template/kpis/blobs/background-qc-blue.6e7d0e02ac9f.svg");
    --theme-pattern-color: rgba(0, 0, 0, 0.05);
    --theme-cta-text-color: white;
}

.brand-dark-turquoise {
    --theme-bg-kpi: rgba(20, 210, 210, 0.10);
    --theme-bg-cta: rgba(20, 210, 210, 0.90);
    --theme-circles-bg: url("/static/images/template/kpis/circles/background-teal.099e106d3411.svg");
    --theme-crosses-bg: url("/static/images/template/kpis/crosses/background-teal.7b3a2fa2e209.svg");
    --theme-blobs-bg: url("/static/images/template/kpis/blobs/background-teal.f5a77e8ea551.svg");
    --theme-pattern-color: rgba(0, 0, 0, 0.05);
    --theme-cta-text-color: white;
}

.brand-light-teal {
    --theme-bg-kpi: rgba(15, 247, 177, 0.10);
    --theme-bg-cta: rgba(15, 247, 177, 0.90);
    --theme-circles-bg: url("/static/images/template/kpis/circles/background-teal.099e106d3411.svg");
    --theme-crosses-bg: url("/static/images/template/kpis/crosses/background-teal.7b3a2fa2e209.svg");
    --theme-blobs-bg: url("/static/images/template/kpis/blobs/background-teal.f5a77e8ea551.svg");
    --theme-pattern-color: rgba(0, 0, 0, 0.05);
    --theme-cta-text-color: white;
}

.brand-butterscotch {
    --theme-bg-kpi: rgba(255, 182, 46, 0.10);
    --theme-bg-cta: rgba(255, 182, 46, 0.90);
    --theme-circles-bg: url("/static/images/template/kpis/circles/background-yellow.dff1c11d43b5.svg");
    --theme-crosses-bg: url("/static/images/template/kpis/crosses/background-yellow.8f894c46f402.svg");
    --theme-blobs-bg: url("/static/images/template/kpis/blobs/background-yellow.d016e33b97a2.svg");
    --theme-pattern-color: rgba(0, 0, 0, 0.05);
    --theme-cta-text-color: white;
}



/* --- GENERIC THEMED COMPONENT STYLING --- */

/* Generic KPI Tile Layout and Colors */
.kpi-tile:not(.callout-flat-color) {
    background-image: linear-gradient(var(--theme-bg-kpi, rgba(255,255,255,0)), var(--theme-bg-kpi, rgba(255,255,255,0))), linear-gradient(#ffffff, #ffffff) !important;
    background-color: rgba(255, 255, 255, 0.65) !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
}
.kpi-tile .kpi-heading {
    color: var(--theme-text-color, #3E55C8) !important;
}
.kpi-tile .kpi-description p {
    color: var(--theme-text-color, inherit);
}
.kpi-tile .kpi-description a {
    color: var(--theme-link-color, var(--pico-primary));
    text-decoration-color: var(--theme-link-color, var(--pico-primary));
    text-shadow: var(--theme-link-shadow, none);
}
.kpi-tile .kpi-description a:focus {
    color: var(--theme-link-focus, var(--pico-primary-hover));
    text-decoration-color: var(--theme-link-focus, var(--pico-primary-hover));
    text-shadow: var(--theme-link-shadow, none);
}


/* Generic Background SVG Patterns */
.layout-circles::before {
    background-image: var(--theme-circles-bg);
}
.layout-crosses::before {
    background-image: var(--theme-crosses-bg);
}
.layout-blobs::before {
    background-image: var(--theme-blobs-bg);
}
.kpi-tile::before,
.cta-pattern-overlay::before,
.full-width-callouts .box::before {
    background-color: var(--theme-pattern-color);
}

/* Generic CTA Breakout Colors */
.cta-snippet-breakout {
    background-color: var(--theme-bg-kpi) !important;
    color: var(--theme-text-color, #1C164E) !important;
}
.cta-snippet-breakout .cta-right {
    border-left-color: rgba(28, 22, 78, 0.15);
}
@media (max-width: 767px) {
    .cta-snippet-breakout .cta-right {
        border-top-color: rgba(28, 22, 78, 0.15);
    }
}


}

.layout-circles.brand-butterscotch::before {
    background-image: url("/static/images/template/kpis/circles/background-yellow.dff1c11d43b5.svg");
}

.layout-crosses.brand-butterscotch::before {
    background-image: url("/static/images/template/kpis/crosses/background-yellow.8f894c46f402.svg");
}

.layout-blobs.brand-butterscotch::before {
    background-image: url("/static/images/template/kpis/blobs/background-yellow.d016e33b97a2.svg");
}

.glass-card-dark {
    background-color: rgba(255, 255, 255, 0.30);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-radius: 8px;
    padding: 2rem;
    margin: 1.5rem 0;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
}

.glass-card-dark.tint-corvidae-blue {
    background-color: rgba(28, 22, 78, 0.30);
}

.glass-card-dark.tint-mid-blue {
    background-color: rgba(62, 85, 200, 0.30);
}

.glass-card-dark.tint-bright-blue {
    background-color: rgba(85, 162, 230, 0.30);
}

.glass-card-dark.tint-stone {
    background-color: rgba(107, 124, 147, 0.30);
}

.glass-card-dark.tint-light-blue {
    background-color: rgba(235, 245, 253, 0.30);
}

.glass-card-dark.tint-white {
    background-color: rgba(255, 255, 255, 0.30);
}

.callout-card h4 {
    text-align: center !important;
}

/* Ensure ordered and unordered lists in callouts are left-aligned */
.pico .callout-card ul,
.pico .callout-card ol,
.pico .full-width-callouts .box ul,
.pico .full-width-callouts .box ol {
    text-align: left;
}

.pico .callout-card-media {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 1.25rem;
}

.pico .callout-card-media.media-icon {
    padding: 0.5rem 0;
}

.pico .callout-card-media.media-image {
    justify-content: center;
}

.pico .callout-card:not(.service-card) .icon-box-small {
    max-width: 100%;
    width: 100%;
    height: auto;
    max-height: 750px;
    margin: 0 auto;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.pico .callout-card:not(.service-card) .icon-box-small img {
    width: 100%;
    height: auto;
    max-height: 750px;
    object-fit: contain;
}

.pico .heroicon {
    display: block;
    height: auto;
    margin: 0 auto;
}

.pico .heroicon-outline {
    width: 48px;

    max-height: 120px;
}

.pico .heroicon-large {
    display: block;
    width: 48px;
}

.pico .heroicon-medium {
    display: none;
    width: 40px;
}

.pico .heroicon-small {
    display: none;
    width: 32px;
}

@media (max-width: 768px) {
    .pico .heroicon-outline {
        width: 40px;

    }

    .pico .heroicon-large {
        display: none !important;
    }

    .pico .heroicon-medium {
        display: block !important;
    }

    .pico .heroicon-small {
        display: none !important;
    }
}

@media (max-width: 480px) {
    .pico .heroicon-outline {
        width: 32px;

    }

    .pico .heroicon-large {
        display: none !important;
    }

    .pico .heroicon-medium {
        display: none !important;
    }

    .pico .heroicon-small {
        display: block !important;
    }
}

/* --- Callout Number-Circle Styling (0-9) --- */
.pico .callout-card-media.media-number {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 1.25rem;
}

.pico .number-circle {
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    margin: 0 auto;
    font-weight: 700;
    line-height: 1;
    font-family: inherit;
    transition: all 0.3s ease;
}

.pico .number-circle.outline-circle {
    border: 2px solid currentColor;
    background: transparent;
    color: currentColor;
}

.pico .number-circle.solid-circle {
    background: currentColor;
    color: var(--pico-background-color, #ffffff);
}

.pico .number-circle {
    width: 48px;
    height: 48px;
    font-size: 24px;
}

@media (max-width: 768px) {
    .pico .number-circle {
        width: 40px;
        height: 40px;
        font-size: 20px;
    }
}

@media (max-width: 480px) {
    .pico .number-circle {
        width: 32px;
        height: 32px;
        font-size: 16px;
    }
}

/* --- UPGRADED LOOK AND FEEL - LAYOUT AND VISUAL STYLING --- */

.page-background-section {
    background-image: url("/static/images/template/components/brand/page-tile/qc-site-page-tile-fog.07b9f036f452.svg"), radial-gradient(circle at 50% 0%, #f7f9fc 0%, #ffffff 100%);
    background-size: cover, cover;
    background-position: top center, top center;
    background-repeat: no-repeat, no-repeat;
    width: 100%;
    margin-left: 0;
    margin-right: 0;
    padding: 0;
    min-height: 100vh;
}

.pico.container,
.logo-heading-container {
    max-width: 100% !important;
    width: 100% !important;
    padding-left: 1.5rem !important;
    padding-right: 1.5rem !important;
}

@media (min-width: 768px) {
    .pico.container,
    .logo-heading-container {
        padding-left: 3rem !important;
        padding-right: 3rem !important;
    }
}

@media (min-width: 1200px) {
    .pico.container,
    .logo-heading-container {
        max-width: 1300px !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }
}

.page-section {
    padding: 0.75rem 0;
    margin: 0;
    width: 100%;
    position: relative;
    display: flow-root;
    clear: both;
}

.page-section.has-subheadline {
    padding-top: 3.5rem;
    padding-bottom: 1.5rem;
}

@media (min-width: 1024px) {
    .page-section.has-subheadline {
        padding-top: 5rem;
        padding-bottom: 2rem;
    }
}

@media (min-width: 1024px) {
    /* -----------------------------------------------------------------------
       Fix A — left-floated quote: subheadline caught by float in 2nd+ paragraph.

       When a left-floated quote is tall, the section-subheadline of the next
       has-subheadline section (the 2nd paragraph after the quote) may appear
       alongside the quote's bottom rather than below it. Applying clear:both
       to the subheadline pushes it below the float.

       Uses :has() for two precision constraints:

       1. :has(.quote-float-left) on the anchor — restricts to left-floated
          quotes only. Right-floated quotes must NOT be an anchor because their
          following paragraph needs to fill the LEFT side (not be cleared below).

       2. :not(…:has(.quote-float-right) + .page-section) on the target —
          excludes sections that are immediately after a right-floated quote.
          On pages with both a left-float (Q1) and a right-float (Q2), the
          general-sibling ~ combinator would otherwise reach forward from Q1
          through a plain paragraph to P3 (the first section after Q2), falsely
          applying clear:both and breaking the right-float fill layout.

       Both ~ (general sibling) steps are intentional: blocks may be separated
       by breakout-section groups so strict adjacency (+) is too narrow.

       Requires: :has() — Chrome 105+, Firefox 121+, Safari 15.4+.
       Scoped to ≥1024px where floats are active.
       ----------------------------------------------------------------------- */
    .page-section.block-quote_snippet:has(.quote-float-left)
        ~ .page-section.block-paragraph:not(.has-subheadline)
        ~ .page-section.has-subheadline:not(
            .page-section.block-quote_snippet:has(.quote-float-right) + .page-section
        )
        .section-subheadline {
        clear: both;
    }
}



.section-subheadline,
h5.insights-section-title,
.logo-heading-container h6,
.page-background-section .pico h5.insights-section-title,
.page-background-section .pico .logo-heading-container h6,
.pico h5.insights-section-title,
.pico .logo-heading-container h6 {
    display: flow-root !important;
    font-size: 0.95rem !important;
    font-weight: 700 !important;
    color: #FF0630 !important;
    -webkit-text-fill-color: #FF0630 !important;
    background: none !important;
    -webkit-background-clip: border-box !important;
    background-clip: border-box !important;
    text-transform: uppercase !important;
    letter-spacing: 0.1em !important;
    border-left: 3px solid #FF0630 !important;
    padding-left: 0.75rem !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    padding-right: 0 !important;
    line-height: 1.2 !important;
    text-shadow: none !important;
}

.section-subheadline,
h5.insights-section-title,
.page-background-section .pico h5.insights-section-title,
.pico h5.insights-section-title {
    margin-bottom: 1.5rem !important;
}

.logo-heading-container h6,
.page-background-section .pico .logo-heading-container h6,
.pico .logo-heading-container h6 {
    margin-bottom: 0 !important;
}

.page-section ul:not(.mega-menu-content ul):not(.breadcrumbs-container ul):not(.search-icon ul) {
    list-style: none !important;
    padding-left: 0 !important;
}

.page-section ul:not(.mega-menu-content ul):not(.breadcrumbs-container ul):not(.search-icon ul) li {
    /* display: flow-root creates a Block Formatting Context on each list item.
       Without this, li boxes start at column 0 even when a float: left element
       is present in the parent — the text wraps correctly but the ::before
       icon (position: absolute; left: 0) ends up stranded inside the float zone.
       flow-root forces the entire li box (icon + text) to sit beside the float
       rather than behind it, keeping the bullet always adjacent to its text. */
    display: flow-root;
    position: relative;
    padding-left: 2.25rem !important;
    margin-bottom: 0.85rem !important;
    list-style-type: none !important;
}

.page-section ul:not(.mega-menu-content ul):not(.breadcrumbs-container ul):not(.search-icon ul) li::before {
    content: "\f058";

    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    position: absolute;
    left: 0;
    top: 0.15rem;
    color: #B80443;

    font-size: 1.25rem;
    line-height: 1;
}

.page-section ol {
    list-style: none !important;
    counter-reset: tw-counter;
    padding-left: 0 !important;
}

.page-section ol li {
    position: relative;
    padding-left: 2.25rem !important;
    margin-bottom: 0.85rem !important;
    counter-increment: tw-counter;
}

.page-section ol li::before {
    content: counter(tw-counter);
    position: absolute;
    left: 0;
    top: 0.1rem;
    width: 1.4rem;
    height: 1.4rem;
    background-color: #B80443;

    color: #ffffff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    font-weight: 700;
}

html.js-enabled .page-section {
    opacity: 0;
    will-change: transform, opacity;
    transition: opacity 1s cubic-bezier(0.16, 1, 0.3, 1), transform 1s cubic-bezier(0.16, 1, 0.3, 1);
}

@media (min-width: 1024px) {
    html.js-enabled .page-section {
        transform: translate3d(0, 40px, 0) scale(0.985);
    }
}

@media (max-width: 1023px) {
    html.js-enabled .page-section {
        transform: translate3d(0, 25px, 0);
    }
}

html.js-enabled .page-section.animate-in {
    opacity: 1 !important;
    transform: translate3d(0, 0, 0) scale(1) !important;
}

.kpi-tile .kpi-heading {
    color: #3E55C8 !important;

}

.kpi-carousel .carousel-item {
    max-width: 900px !important;
}

.kpi-carousel .kpi-tile,
.carousel-item .kpi-tile,
.kpi-tile {
    max-width: 900px !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

.kpi-tile.callout-card .number-circle {
    border-color: #e31b23 !important;
    background-color: #fdf2f2 !important;
    color: #e31b23 !important;
    font-size: 1.5rem !important;
    width: 60px !important;
    height: 60px !important;
    margin-bottom: 1.5rem;
}

.kpi-tile.callout-card .number-circle.solid-circle {
    background-color: #e31b23 !important;
    color: #ffffff !important;
}

.heroicon,
.heroicon-outline,
.heroicon-solid {
    filter: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg"><filter id="recolor"><feColorMatrix type="matrix" values="0 0 0 0 0.8902  0 0 0 0 0.1059  0 0 0 0 0.1373  0 0 0 1 0"/></filter></svg>#recolor') !important;
}

figure.standalone-image,
figure.standalone-video {
    background-color: rgba(255, 255, 255, 0.45) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    border: 1px solid rgba(255, 255, 255, 0.4) !important;
    border-radius: 12px !important;
    box-shadow: 0 10px 30px rgba(62, 85, 200, 0.05) !important;
    padding: 0 !important;
    overflow: hidden !important;
    max-width: 1080px !important;
    width: 100% !important;
    margin: 3rem auto !important;
    transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

figure.standalone-image img,
figure.standalone-video iframe {
    border-radius: 12px !important;
    padding: 0 !important;
}

figure.standalone-image:hover,
figure.standalone-video:hover {
    transform: none !important;
}

/* === TRANSPARENT BACKGROUND VARIANT ===
   Overrides the glassmorphism card treatment above (which uses !important)
   for images the editor has marked as having a transparent background.
   Every property that contributes to the white card appearance must be
   reset here with !important to win the specificity battle. */
figure.standalone-image.transparent-bg,
figure.standalone-image.transparent-bg:hover {
    background-color: transparent !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    overflow: visible !important;
}

figure.standalone-image.transparent-bg img {
    border-radius: 0 !important;
    padding: 0 !important;
}


@media screen and (max-width: 1023px) {
    header nav.scrolled {
        position: fixed !important;
        top: 0;
        left: 0;
        width: 100%;
        z-index: 1000;
        background-color: rgba(255, 255, 255, 0.95) !important;
        backdrop-filter: blur(10px) !important;
        -webkit-backdrop-filter: blur(10px) !important;
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1) !important;
    }

    header nav.scrolled::before {
        background-color: rgba(255, 255, 255, 0.95) !important;
    }

    header nav.scrolled a,
    header nav.scrolled .icon i {
        color: #FF0630 !important;
    }

    header nav.scrolled .logo-white {
        display: none !important;
    }

    header nav.scrolled .logo-blue {
        display: block !important;
    }
}

@media (max-width: 768px) {

    .full-width-callouts .container {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    /* Collapse the breakout callout grid to a single column on mobile.
       Without this, Pico's auto-fit: minmax(0%, 1fr) divides 3+ tiles
       into ~130px columns, which is narrower than the min-width below and
       causes overflow-driven width inconsistencies across tiles. */
    .full-width-callouts .grid {
        grid-template-columns: 1fr !important;
    }

    .pico .callout-card,
    .pico .full-width-callouts .box {
        padding: 2rem 1.25rem !important;
        min-height: auto !important;
        /* Allow the tile to be sized by its single grid column (full-width).
           min-width: 0 prevents the tile enforcing a fixed minimum that
           conflicts with the collapsed 1-column grid. */
        min-width: 0 !important;
    }

    .pico .callout-card-media,
    .pico .full-width-callouts .icon-box-small {
        margin-bottom: 0.5rem !important;
    }

    .pico .callout-card-media.media-icon {
        padding: 0.25rem 0 !important;
    }

    .pico .kpi-tile.callout-card .number-circle,
    .pico .full-width-callouts .number-circle {
        margin-bottom: 0.5rem !important;
        width: 48px !important;
        height: 48px !important;
        font-size: 1.25rem !important;
    }

    .pico .callout-card h4,
    .pico .full-width-callouts h4 {
        margin-top: 0 !important;
        margin-bottom: 0.4rem !important;
        font-size: 1.2rem !important;
        line-height: 1.25 !important;
    }

    .pico .callout-card .richtext p,
    .pico .full-width-callouts p,
    .pico .full-width-callouts .richtext p {
        line-height: 1.4 !important;
    }
}

.pico .callout-card.media-type-image:hover,
.pico .full-width-callouts .box.media-type-image:hover {
    transform: none !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08) !important;
}

.kpi-tile::before,
.full-width-callouts .box::before {
    pointer-events: none !important;
}

.pico .callout-card-media.media-image {
    position: relative;
    z-index: 2;
}

@media (max-width: 768px) {
    #image-modal article {
        padding: 1rem !important;
    }
}

/* Prevent overlapping block-paragraph sections from blocking clicks on floated content */
.page-section.block-kpi,
.page-section.block-quote_snippet,
.page-section.block-video,
.page-section.block-author,
.page-section.block-callout,
.page-section.block-callout_block {
    z-index: 10 !important;
}

.page-section.block-callout_block,
.page-section.block-callout {
    margin-bottom: 0 !important;
}
/* =============================================================================
   CALLOUT FLAT-BLUE ALTERNATE STYLE
   Applied when "Alternate Style: Flat Blue Colour" is checked on a
   CalloutSnippet. Replaces the glassmorphic white card with a solid
   Corvidae-brand-navy tile and forces all foreground elements to white.
   ============================================================================= */

/* Card background: solid brand bright-blue, no glass/blur, no pattern pseudo-element */
.pico .kpi-tile.callout-card.callout-flat-blue,
.kpi-tile.callout-card.callout-flat-blue {
    background-color: #55A2E6 !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    background-image: none !important;
    border: none !important;
    box-shadow: 0 4px 20px rgba(85, 162, 230, 0.40) !important;
    color: #ffffff !important;
}

/* Tablet range (769px–1023px): flat-blue callouts keep their 3-column grid
   layout instead of collapsing like standard callouts. The generic
   max-width:1023px rule above excludes grids containing flat-blue tiles.
   Below 769px the existing mobile block collapses them to a single column,
   where they are already well-proportioned and full-width. */
@media (min-width: 769px) and (max-width: 1023px) {
    /* Maintain 3-equal-column layout for flat-blue callout grids in tablet range */
    .full-width-callouts .grid:has(.callout-flat-blue) {
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 1rem !important;
    }

    .pico .kpi-tile.callout-card.callout-flat-blue,
    .kpi-tile.callout-card.callout-flat-blue {
        min-width: 0 !important;
        /* Fill the grid cell fully so all three tiles are equal width
           regardless of their content length */
        width: 100% !important;
        align-self: stretch !important;
    }
}

/* Desktop (≥1024px): flat-blue tiles have a comfortable min-width so they
   never collapse too narrow in the multi-column grid. */
@media (min-width: 1024px) {
    .pico .kpi-tile.callout-card.callout-flat-blue,
    .kpi-tile.callout-card.callout-flat-blue {
        min-width: 280px !important;
    }
}

@media (max-width: 768px) {
    /* Reset flat-blue min-width on mobile: the grid is 1-column so the tile
       fills the full available width without any minimum constraint. */
    .pico .kpi-tile.callout-card.callout-flat-blue,
    .kpi-tile.callout-card.callout-flat-blue {
        min-width: 0 !important;
        width: 100% !important;
    }
}

/* Suppress the layout pattern (crosses / circles / blobs) overlay */
.kpi-tile.callout-card.callout-flat-blue::before {
    content: none !important;
    display: none !important;
}

/* H4 title text → white.
   Must also reset the gradient-text technique applied globally by
   .page-background-section .pico h4 (background-clip:text +
   -webkit-text-fill-color:transparent). Without these resets, -webkit-text-fill-color
   stays transparent even though color:white is set. */
.pico .kpi-tile.callout-card.callout-flat-blue h4,
.kpi-tile.callout-card.callout-flat-blue h4 {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    background: none !important;
    -webkit-background-clip: unset !important;
    background-clip: unset !important;
    text-shadow: none !important;
}

/* Richtext description → white (all text nodes) */
.pico .kpi-tile.callout-card.callout-flat-blue .richtext,
.pico .kpi-tile.callout-card.callout-flat-blue .richtext p,
.pico .kpi-tile.callout-card.callout-flat-blue .richtext li,
.kpi-tile.callout-card.callout-flat-blue .richtext,
.kpi-tile.callout-card.callout-flat-blue .richtext p,
.kpi-tile.callout-card.callout-flat-blue .richtext li {
    color: #ffffff !important;
}

/* Hero icon SVGs and custom images → invert to white
   brightness(0) makes the image solid black, invert(1) flips to solid white */
.kpi-tile.callout-card.callout-flat-blue .heroicon,
.kpi-tile.callout-card.callout-flat-blue .callout-card-media img {
    filter: brightness(0) invert(1) !important;
}

/* Number circle (outline style): white ring + white numeral */
.pico .kpi-tile.callout-card.callout-flat-blue .number-circle.outline-circle {
    border-color: rgba(255, 255, 255, 0.8) !important;
    color: #ffffff !important;
    background-color: transparent !important;
}

/* Number circle (solid style): white fill + bright-blue numeral */
.pico .kpi-tile.callout-card.callout-flat-blue .number-circle.solid-circle {
    background-color: #ffffff !important;
    color: #55A2E6 !important;
    border-color: #ffffff !important;
}


/* =============================================================================
   CALLOUT FLAT-CHERRY ALTERNATE STYLE
   Applied when "Alternate Style: Flat Cherry Colour" is checked on a
   CalloutSnippet. Replaces the glassmorphic card with a solid Cherry Red tile
   and forces all foreground elements to white.
   ============================================================================= */

/* Card background: solid brand Cherry Red (#e31b23), no glass/blur, no pattern overlay */
.pico .kpi-tile.callout-card.callout-flat-cherry,
.kpi-tile.callout-card.callout-flat-cherry,
.pico .full-width-callouts .box.callout-flat-cherry,
.full-width-callouts .box.callout-flat-cherry {
    background-color: #e31b23 !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    background-image: none !important;
    border: none !important;
    box-shadow: 0 4px 20px rgba(227, 27, 35, 0.40) !important;
    color: #ffffff !important;
}

/* Tablet range (769px–1023px): flat-cherry callouts keep their 3-column grid
   layout instead of collapsing like standard callouts. */
@media (min-width: 769px) and (max-width: 1023px) {
    .full-width-callouts .grid:has(.callout-flat-cherry) {
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 1rem !important;
    }

    .pico .kpi-tile.callout-card.callout-flat-cherry,
    .kpi-tile.callout-card.callout-flat-cherry {
        min-width: 0 !important;
        width: 100% !important;
        align-self: stretch !important;
    }
}

/* Desktop (≥1024px): flat-cherry tiles have a comfortable min-width */
@media (min-width: 1024px) {
    .pico .kpi-tile.callout-card.callout-flat-cherry,
    .kpi-tile.callout-card.callout-flat-cherry {
        min-width: 280px !important;
    }
}

@media (max-width: 768px) {
    .pico .kpi-tile.callout-card.callout-flat-cherry,
    .kpi-tile.callout-card.callout-flat-cherry {
        min-width: 0 !important;
        width: 100% !important;
    }
}

/* Suppress the layout pattern (crosses / circles / blobs) overlay */
.kpi-tile.callout-card.callout-flat-cherry::before,
.full-width-callouts .box.callout-flat-cherry::before {
    content: none !important;
    display: none !important;
}

/* H4 title text → white and reset gradient fills */
.pico .kpi-tile.callout-card.callout-flat-cherry h4,
.kpi-tile.callout-card.callout-flat-cherry h4,
.pico .full-width-callouts .box.callout-flat-cherry h4,
.full-width-callouts .box.callout-flat-cherry h4 {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    background: none !important;
    -webkit-background-clip: unset !important;
    background-clip: unset !important;
    text-shadow: none !important;
}

/* Richtext description → white */
.pico .kpi-tile.callout-card.callout-flat-cherry .richtext,
.pico .kpi-tile.callout-card.callout-flat-cherry .richtext p,
.pico .kpi-tile.callout-card.callout-flat-cherry .richtext li,
.kpi-tile.callout-card.callout-flat-cherry .richtext,
.kpi-tile.callout-card.callout-flat-cherry .richtext p,
.kpi-tile.callout-card.callout-flat-cherry .richtext li,
.pico .full-width-callouts .box.callout-flat-cherry .richtext,
.pico .full-width-callouts .box.callout-flat-cherry .richtext p,
.pico .full-width-callouts .box.callout-flat-cherry .richtext li,
.full-width-callouts .box.callout-flat-cherry .richtext,
.full-width-callouts .box.callout-flat-cherry .richtext p,
.full-width-callouts .box.callout-flat-cherry .richtext li {
    color: #ffffff !important;
}

/* Hero icon SVGs and custom images → white */
.kpi-tile.callout-card.callout-flat-cherry .heroicon,
.kpi-tile.callout-card.callout-flat-cherry .callout-card-media img,
.full-width-callouts .box.callout-flat-cherry .heroicon,
.full-width-callouts .box.callout-flat-cherry .callout-card-media img {
    filter: brightness(0) invert(1) !important;
}

/* Number circle (outline style) */
.pico .kpi-tile.callout-card.callout-flat-cherry .number-circle.outline-circle,
.pico .full-width-callouts .box.callout-flat-cherry .number-circle.outline-circle {
    border-color: rgba(255, 255, 255, 0.8) !important;
    color: #ffffff !important;
    background-color: transparent !important;
}

/* Number circle (solid style) */
.pico .kpi-tile.callout-card.callout-flat-cherry .number-circle.solid-circle,
.pico .full-width-callouts .box.callout-flat-cherry .number-circle.solid-circle {
    background-color: #ffffff !important;
    color: #e31b23 !important;
    border-color: #ffffff !important;
}


/* =============================================================================
   CALLOUT CARD TOP-ALIGNMENT & REPLICATED KPI COLOR VARIABLES
   ============================================================================= */

/* Pin media, headers, and description at the top of stretched cards */
.pico .kpi-tile.callout-card,
.pico .full-width-callouts .box {
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    align-items: center !important;
    text-align: center !important;
    min-height: 180px !important;
    padding: 2.2rem 1.5rem !important;
}

/* Callout image/media spacer adjustments for premium visual balance */
.pico .kpi-tile.callout-card .callout-card-media,
.pico .full-width-callouts .box .callout-card-media {
    margin-top: 0.25rem !important;
    margin-bottom: 0.75rem !important; /* Identical gap to heading bottom margin */
}

/* Ensure zero extra padding/margin offset on media icons specifically to make gaps identical */
.pico .kpi-tile.callout-card .callout-card-media.media-icon,
.pico .full-width-callouts .box .callout-card-media.media-icon {
    padding: 0 !important;
    margin-top: 0 !important;
    margin-bottom: 0.75rem !important;
}

.pico .kpi-tile.callout-card h4,
.pico .full-width-callouts .box h4 {
    margin-top: 0 !important;          /* Zero out default top margin to avoid offsets */
    margin-bottom: 0.75rem !important; /* Identical gap to media bottom margin */
}

.pico .kpi-tile.callout-card .richtext p,
.pico .full-width-callouts .box .richtext p {
    margin-bottom: 0 !important;
}

/* Premium Row-Style Bullet List Items with Top & Bottom Borders */
.pico .kpi-tile.callout-card .richtext ul,
.pico .full-width-callouts .box .richtext ul {
    margin-top: 1.5rem !important;
    margin-bottom: 1.5rem !important;
    padding-left: 0 !important;
    list-style-type: none !important;
}

.pico .kpi-tile.callout-card .richtext ul li,
.pico .full-width-callouts .box .richtext ul li {
    position: relative !important;
    list-style: none !important;
    list-style-type: none !important;
    padding: 0.75rem 0 !important;
    padding-left: 0 !important;
    margin-left: 0 !important;
    margin-bottom: 0 !important;
    text-align: left !important;
    border-bottom: 1px solid var(--callout-list-border-color, color-mix(in srgb, var(--callout-heading-color, #B80443) 20%, transparent)) !important;
}

.pico .kpi-tile.callout-card .richtext ul li:first-child,
.pico .full-width-callouts .box .richtext ul li:first-child {
    border-top: 1px solid var(--callout-list-border-color, color-mix(in srgb, var(--callout-heading-color, #B80443) 20%, transparent)) !important;
}

/* Completely remove bullet checkmark icons and padding indentation inside callout list items */
.pico .kpi-tile.callout-card .richtext ul li::before,
.pico .full-width-callouts .box .richtext ul li::before {
    content: none !important;
    display: none !important;
}

/* Flat Background Color list border color override */
.pico .kpi-tile.callout-card.callout-flat-color,
.pico .full-width-callouts .box.callout-flat-color {
    --callout-list-border-color: rgba(255, 255, 255, 0.25);
}

/* Standard pattern SVGs transparency adjustment */
.kpi-tile::before,
.full-width-callouts .box::before,
.cta-pattern-overlay::before {
    opacity: 0.2 !important;
}


/* =============================================================================
   CALLOUT COLOR SCHEME RULES (FLAT & GLASS TINT SELECTIONS)
   Enforces consistent brand text, heading, bullet and icon coloring
   ============================================================================= */

/* Callout Brand Tint Styling — Define high-contrast variables mimicking KPIs */
.brand-cherry, .brand-qc-red, .tint-cherry, .tint-qc-red {
    --callout-heading-color: #B80443;
    --callout-icon-filter: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg"><filter id="recolor-cherry"><feColorMatrix type="matrix" values="0 0 0 0 0.7216  0 0 0 0 0.0157  0 0 0 0 0.2627  0 0 0 1 0"/></filter></svg>#recolor-cherry');
}

.brand-qc-blue, .brand-corvidae-blue, .tint-qc-blue, .tint-corvidae-blue {
    --callout-heading-color: #1C164E;
    --callout-icon-filter: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg"><filter id="recolor-qc-blue"><feColorMatrix type="matrix" values="0 0 0 0 0.1098  0 0 0 0 0.0863  0 0 0 0 0.3059  0 0 0 1 0"/></filter></svg>#recolor-qc-blue');
}

.brand-mid-blue, .tint-mid-blue {
    --callout-heading-color: #3E55C8;
    --callout-icon-filter: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg"><filter id="recolor-mid-blue"><feColorMatrix type="matrix" values="0 0 0 0 0.2431  0 0 0 0 0.3333  0 0 0 0 0.7843  0 0 0 1 0"/></filter></svg>#recolor-mid-blue');
}

.brand-teal, .tint-teal {
    --callout-heading-color: #008080;
    --callout-icon-filter: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg"><filter id="recolor-teal"><feColorMatrix type="matrix" values="0 0 0 0 0.0000  0 0 0 0 0.5020  0 0 0 0 0.5020  0 0 0 1 0"/></filter></svg>#recolor-teal');
}

.brand-petrol, .tint-petrol {
    --callout-heading-color: #0c5a60;
    --callout-icon-filter: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg"><filter id="recolor-petrol"><feColorMatrix type="matrix" values="0 0 0 0 0.0471  0 0 0 0 0.3529  0 0 0 0 0.3765  0 0 0 1 0"/></filter></svg>#recolor-petrol');
}

.brand-slate, .tint-slate {
    --callout-heading-color: #47495a;
    --callout-icon-filter: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg"><filter id="recolor-slate"><feColorMatrix type="matrix" values="0 0 0 0 0.2784  0 0 0 0 0.2863  0 0 0 0 0.3529  0 0 0 1 0"/></filter></svg>#recolor-slate');
}

.brand-pink, .tint-pink {
    --callout-heading-color: #B80443;
    --callout-icon-filter: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg"><filter id="recolor-cherry"><feColorMatrix type="matrix" values="0 0 0 0 0.7216  0 0 0 0 0.0157  0 0 0 0 0.2627  0 0 0 1 0"/></filter></svg>#recolor-cherry');
}

.brand-purple, .tint-purple {
    --callout-heading-color: #7b2cbf;
    --callout-icon-filter: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg"><filter id="recolor-purple"><feColorMatrix type="matrix" values="0 0 0 0 0.4824  0 0 0 0 0.1725  0 0 0 0 0.7490  0 0 0 1 0"/></filter></svg>#recolor-purple');
}

.brand-yellow, .tint-yellow {
    --callout-heading-color: #B80443;
    --callout-icon-filter: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg"><filter id="recolor-cherry"><feColorMatrix type="matrix" values="0 0 0 0 0.7216  0 0 0 0 0.0157  0 0 0 0 0.2627  0 0 0 1 0"/></filter></svg>#recolor-cherry');
}

.brand-fog, .tint-fog {
    --callout-heading-color: #B80443;
    --callout-icon-filter: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg"><filter id="recolor-cherry"><feColorMatrix type="matrix" values="0 0 0 0 0.7216  0 0 0 0 0.0157  0 0 0 0 0.2627  0 0 0 1 0"/></filter></svg>#recolor-cherry');
}

/* Force all standard glass cards (with 0.2 transparency pattern) to use dark blue text & dark brand heading colors */
.pico .kpi-tile.callout-card:not(.callout-flat-color) h4,
.pico .full-width-callouts .box:not(.callout-flat-color) h4 {
    color: var(--callout-heading-color, var(--theme-text-color, #B80443)) !important;
    background: none !important;
    -webkit-text-fill-color: var(--callout-heading-color, var(--theme-text-color, #B80443)) !important;
}

.pico .kpi-tile.callout-card:not(.callout-flat-color) .richtext,
.pico .kpi-tile.callout-card:not(.callout-flat-color) .richtext p,
.pico .kpi-tile.callout-card:not(.callout-flat-color) .richtext li,
.pico .full-width-callouts .box:not(.callout-flat-color) .richtext,
.pico .full-width-callouts .box:not(.callout-flat-color) .richtext p,
.pico .full-width-callouts .box:not(.callout-flat-color) .richtext li {
    color: #1C164E !important;
}

.pico .kpi-tile.callout-card:not(.callout-flat-color) ul li::before,
.pico .full-width-callouts .box:not(.callout-flat-color) ul li::before {
    color: var(--callout-heading-color, var(--theme-text-color, #B80443)) !important;
}

.pico .kpi-tile.callout-card:not(.callout-flat-color) ol li::before,
.pico .full-width-callouts .box:not(.callout-flat-color) ol li::before {
    background-color: var(--callout-heading-color, var(--theme-text-color, #B80443)) !important;
    color: #ffffff !important;
}

.pico .kpi-tile.callout-card:not(.callout-flat-color) .heroicon,
.pico .full-width-callouts .box:not(.callout-flat-color) .heroicon {
    filter: var(--callout-icon-filter, var(--theme-icon-filter, url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg"><filter id="recolor"><feColorMatrix type="matrix" values="0 0 0 0 0.8902  0 0 0 0 0.1059  0 0 0 0 0.1373  0 0 0 1 0"/></filter></svg>#recolor'))) !important;
}


/* --- Fog Flat Color --- */
.pico .kpi-tile.callout-card.callout-flat-fog,
.pico .full-width-callouts .box.callout-flat-fog {
    background-color: #F4F5F7 !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05) !important;
    color: #1C164E !important;
}
.pico .kpi-tile.callout-card.callout-flat-fog h4,
.pico .full-width-callouts .box.callout-flat-fog h4 {
    color: #B80443 !important;
    -webkit-text-fill-color: #B80443 !important;
    background: none !important;
}
.pico .kpi-tile.callout-card.callout-flat-fog .richtext p,
.pico .kpi-tile.callout-card.callout-flat-fog .richtext li,
.pico .full-width-callouts .box.callout-flat-fog .richtext p,
.pico .full-width-callouts .box.callout-flat-fog .richtext li {
    color: #1C164E !important;
}
.pico .kpi-tile.callout-card.callout-flat-fog ul li::before,
.pico .full-width-callouts .box.callout-flat-fog ul li::before {
    color: #B80443 !important;
}
.pico .kpi-tile.callout-card.callout-flat-fog ol li::before,
.pico .full-width-callouts .box.callout-flat-fog ol li::before {
    background-color: #B80443 !important;
    color: #ffffff !important;
}
.pico .kpi-tile.callout-card.callout-flat-fog .heroicon,
.pico .full-width-callouts .box.callout-flat-fog .heroicon {
    filter: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg"><filter id="recolor-cherry"><feColorMatrix type="matrix" values="0 0 0 0 0.7216  0 0 0 0 0.0157  0 0 0 0 0.2627  0 0 0 1 0"/></filter></svg>#recolor-cherry') !important;
}

/* --- Yellow Flat Color --- */
.pico .kpi-tile.callout-card.callout-flat-yellow,
.pico .full-width-callouts .box.callout-flat-yellow {
    background-color: #FFF2E6 !important;
    box-shadow: 0 4px 20px rgba(255, 182, 114, 0.15) !important;
    color: #1C164E !important;
}
.pico .kpi-tile.callout-card.callout-flat-yellow h4,
.pico .full-width-callouts .box.callout-flat-yellow h4 {
    color: #B80443 !important;
    -webkit-text-fill-color: #B80443 !important;
    background: none !important;
}
.pico .kpi-tile.callout-card.callout-flat-yellow .richtext p,
.pico .kpi-tile.callout-card.callout-flat-yellow .richtext li,
.pico .full-width-callouts .box.callout-flat-yellow .richtext p,
.pico .full-width-callouts .box.callout-flat-yellow .richtext li {
    color: #1C164E !important;
}
.pico .kpi-tile.callout-card.callout-flat-yellow ul li::before,
.pico .full-width-callouts .box.callout-flat-yellow ul li::before {
    color: #B80443 !important;
}
.pico .kpi-tile.callout-card.callout-flat-yellow ol li::before,
.pico .full-width-callouts .box.callout-flat-yellow ol li::before {
    background-color: #B80443 !important;
    color: #ffffff !important;
}
.pico .kpi-tile.callout-card.callout-flat-yellow .heroicon,
.pico .full-width-callouts .box.callout-flat-yellow .heroicon {
    filter: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg"><filter id="recolor-cherry"><feColorMatrix type="matrix" values="0 0 0 0 0.7216  0 0 0 0 0.0157  0 0 0 0 0.2627  0 0 0 1 0"/></filter></svg>#recolor-cherry') !important;
}

/* --- QC Red (Cherry Red) Flat Color --- */
.pico .kpi-tile.callout-card.callout-flat-qc-red,
.pico .full-width-callouts .box.callout-flat-qc-red {
    background-color: #e31b23 !important;
    box-shadow: 0 4px 20px rgba(227, 27, 35, 0.40) !important;
    color: #ffffff !important;
}
.pico .kpi-tile.callout-card.callout-flat-qc-red h4,
.pico .full-width-callouts .box.callout-flat-qc-red h4 {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    background: none !important;
}
.pico .kpi-tile.callout-card.callout-flat-qc-red .richtext p,
.pico .kpi-tile.callout-card.callout-flat-qc-red .richtext li,
.pico .full-width-callouts .box.callout-flat-qc-red .richtext p,
.pico .full-width-callouts .box.callout-flat-qc-red .richtext li {
    color: #ffffff !important;
}
.pico .kpi-tile.callout-card.callout-flat-qc-red ul li::before,
.pico .full-width-callouts .box.callout-flat-qc-red ul li::before {
    color: #ffffff !important;
}
.pico .kpi-tile.callout-card.callout-flat-qc-red ol li::before,
.pico .full-width-callouts .box.callout-flat-qc-red ol li::before {
    background-color: #ffffff !important;
    color: #e31b23 !important;
}
.pico .kpi-tile.callout-card.callout-flat-qc-red .heroicon,
.pico .full-width-callouts .box.callout-flat-qc-red .heroicon {
    filter: brightness(0) invert(1) !important;
}

/* --- Corvidae Blue Flat Color --- */
.pico .kpi-tile.callout-card.callout-flat-corvidae-blue,
.pico .full-width-callouts .box.callout-flat-corvidae-blue {
    background-color: #1C164E !important;
    box-shadow: 0 4px 20px rgba(28, 22, 78, 0.40) !important;
    color: #ffffff !important;
}
.pico .kpi-tile.callout-card.callout-flat-corvidae-blue h4,
.pico .full-width-callouts .box.callout-flat-corvidae-blue h4 {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    background: none !important;
}
.pico .kpi-tile.callout-card.callout-flat-corvidae-blue .richtext p,
.pico .kpi-tile.callout-card.callout-flat-corvidae-blue .richtext li,
.pico .full-width-callouts .box.callout-flat-corvidae-blue .richtext p,
.pico .full-width-callouts .box.callout-flat-corvidae-blue .richtext li {
    color: #ffffff !important;
}
.pico .kpi-tile.callout-card.callout-flat-corvidae-blue ul li::before,
.pico .full-width-callouts .box.callout-flat-corvidae-blue ul li::before {
    color: #FFB672 !important;
}
.pico .kpi-tile.callout-card.callout-flat-corvidae-blue ol li::before,
.pico .full-width-callouts .box.callout-flat-corvidae-blue ol li::before {
    background-color: #FFB672 !important;
    color: #1C164E !important;
}
.pico .kpi-tile.callout-card.callout-flat-corvidae-blue .heroicon,
.pico .full-width-callouts .box.callout-flat-corvidae-blue .heroicon {
    filter: brightness(0) invert(1) !important;
}

/* --- Slate Flat Color --- */
.pico .kpi-tile.callout-card.callout-flat-slate,
.pico .full-width-callouts .box.callout-flat-slate {
    background-color: #47495a !important;
    box-shadow: 0 4px 20px rgba(71, 73, 90, 0.40) !important;
    color: #ffffff !important;
}
.pico .kpi-tile.callout-card.callout-flat-slate h4,
.pico .full-width-callouts .box.callout-flat-slate h4 {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    background: none !important;
}
.pico .kpi-tile.callout-card.callout-flat-slate .richtext p,
.pico .kpi-tile.callout-card.callout-flat-slate .richtext li,
.pico .full-width-callouts .box.callout-flat-slate .richtext p,
.pico .full-width-callouts .box.callout-flat-slate .richtext li {
    color: #ffffff !important;
}
.pico .kpi-tile.callout-card.callout-flat-slate ul li::before,
.pico .full-width-callouts .box.callout-flat-slate ul li::before {
    color: #FFB672 !important;
}
.pico .kpi-tile.callout-card.callout-flat-slate ol li::before,
.pico .full-width-callouts .box.callout-flat-slate ol li::before {
    background-color: #FFB672 !important;
    color: #47495a !important;
}
.pico .kpi-tile.callout-card.callout-flat-slate .heroicon,
.pico .full-width-callouts .box.callout-flat-slate .heroicon {
    filter: brightness(0) invert(1) !important;
}

/* --- Teal Flat Color --- */
.pico .kpi-tile.callout-card.callout-flat-teal,
.pico .full-width-callouts .box.callout-flat-teal {
    background-color: #008080 !important;
    box-shadow: 0 4px 20px rgba(0, 128, 128, 0.40) !important;
    color: #ffffff !important;
}
.pico .kpi-tile.callout-card.callout-flat-teal h4,
.pico .full-width-callouts .box.callout-flat-teal h4 {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    background: none !important;
}
.pico .kpi-tile.callout-card.callout-flat-teal .richtext p,
.pico .kpi-tile.callout-card.callout-flat-teal .richtext li,
.pico .full-width-callouts .box.callout-flat-teal .richtext p,
.pico .full-width-callouts .box.callout-flat-teal .richtext li {
    color: #ffffff !important;
}
.pico .kpi-tile.callout-card.callout-flat-teal ul li::before,
.pico .full-width-callouts .box.callout-flat-teal ul li::before {
    color: #FFB672 !important;
}
.pico .kpi-tile.callout-card.callout-flat-teal ol li::before,
.pico .full-width-callouts .box.callout-flat-teal ol li::before {
    background-color: #FFB672 !important;
    color: #008080 !important;
}
.pico .kpi-tile.callout-card.callout-flat-teal .heroicon,
.pico .full-width-callouts .box.callout-flat-teal .heroicon {
    filter: brightness(0) invert(1) !important;
}

/* --- Petrol Flat Color --- */
.pico .kpi-tile.callout-card.callout-flat-petrol,
.pico .full-width-callouts .box.callout-flat-petrol {
    background-color: #0c5a60 !important;
    box-shadow: 0 4px 20px rgba(12, 90, 96, 0.40) !important;
    color: #ffffff !important;
}
.pico .kpi-tile.callout-card.callout-flat-petrol h4,
.pico .full-width-callouts .box.callout-flat-petrol h4 {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    background: none !important;
}
.pico .kpi-tile.callout-card.callout-flat-petrol .richtext p,
.pico .kpi-tile.callout-card.callout-flat-petrol .richtext li,
.pico .full-width-callouts .box.callout-flat-petrol .richtext p,
.pico .full-width-callouts .box.callout-flat-petrol .richtext li {
    color: #ffffff !important;
}
.pico .kpi-tile.callout-card.callout-flat-petrol ul li::before,
.pico .full-width-callouts .box.callout-flat-petrol ul li::before {
    color: #FFB672 !important;
}
.pico .kpi-tile.callout-card.callout-flat-petrol ol li::before,
.pico .full-width-callouts .box.callout-flat-petrol ol li::before {
    background-color: #FFB672 !important;
    color: #0c5a60 !important;
}
.pico .kpi-tile.callout-card.callout-flat-petrol .heroicon,
.pico .full-width-callouts .box.callout-flat-petrol .heroicon {
    filter: brightness(0) invert(1) !important;
}

/* --- Pink Flat Color --- */
.pico .kpi-tile.callout-card.callout-flat-pink,
.pico .full-width-callouts .box.callout-flat-pink {
    background-color: #FFF0F5 !important;
    box-shadow: 0 4px 20px rgba(184, 4, 67, 0.08) !important;
    color: #1C164E !important;
}
.pico .kpi-tile.callout-card.callout-flat-pink h4,
.pico .full-width-callouts .box.callout-flat-pink h4 {
    color: #B80443 !important;
    -webkit-text-fill-color: #B80443 !important;
    background: none !important;
}
.pico .kpi-tile.callout-card.callout-flat-pink .richtext p,
.pico .kpi-tile.callout-card.callout-flat-pink .richtext li,
.pico .full-width-callouts .box.callout-flat-pink .richtext p,
.pico .full-width-callouts .box.callout-flat-pink .richtext li {
    color: #1C164E !important;
}
.pico .kpi-tile.callout-card.callout-flat-pink ul li::before,
.pico .full-width-callouts .box.callout-flat-pink ul li::before {
    color: #B80443 !important;
}
.pico .kpi-tile.callout-card.callout-flat-pink ol li::before,
.pico .full-width-callouts .box.callout-flat-pink ol li::before {
    background-color: #B80443 !important;
    color: #ffffff !important;
}
.pico .kpi-tile.callout-card.callout-flat-pink .heroicon,
.pico .full-width-callouts .box.callout-flat-pink .heroicon {
    filter: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg"><filter id="recolor-cherry"><feColorMatrix type="matrix" values="0 0 0 0 0.7216  0 0 0 0 0.0157  0 0 0 0 0.2627  0 0 0 1 0"/></filter></svg>#recolor-cherry') !important;
}

/* --- Purple Flat Color --- */
.pico .kpi-tile.callout-card.callout-flat-purple,
.pico .full-width-callouts .box.callout-flat-purple {
    background-color: #F8F0FC !important;
    box-shadow: 0 4px 20px rgba(123, 44, 191, 0.08) !important;
    color: #1C164E !important;
}
.pico .kpi-tile.callout-card.callout-flat-purple h4,
.pico .full-width-callouts .box.callout-flat-purple h4 {
    color: #7b2cbf !important;
    -webkit-text-fill-color: #7b2cbf !important;
    background: none !important;
}
.pico .kpi-tile.callout-card.callout-flat-purple .richtext p,
.pico .kpi-tile.callout-card.callout-flat-purple .richtext li,
.pico .full-width-callouts .box.callout-flat-purple .richtext p,
.pico .full-width-callouts .box.callout-flat-purple .richtext li {
    color: #1C164E !important;
}
.pico .kpi-tile.callout-card.callout-flat-purple ul li::before,
.pico .full-width-callouts .box.callout-flat-purple ul li::before {
    color: #7b2cbf !important;
}
.pico .kpi-tile.callout-card.callout-flat-purple ol li::before,
.pico .full-width-callouts .box.callout-flat-purple ol li::before {
    background-color: #7b2cbf !important;
    color: #ffffff !important;
}
.pico .kpi-tile.callout-card.callout-flat-purple .heroicon,
.pico .full-width-callouts .box.callout-flat-purple .heroicon {
    filter: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg"><filter id="recolor-purple"><feColorMatrix type="matrix" values="0 0 0 0 0.4824  0 0 0 0 0.1725  0 0 0 0 0.7490  0 0 0 1 0"/></filter></svg>#recolor-purple') !important;
}


/* =============================================================================
   NATIVE QUOTE ALIGNMENT FIX (PREVENTS OVERLAPS AND STAGGERING)
   ============================================================================= */

@media (min-width: 1024px) {
    /* Style the page-section directly to float left/right cleanly and sit
       side-by-side without vertical staggering, while other block-level sibling
       page-sections remain 100% block and clear them cleanly. */
    .page-section:has(.quote-float-left),
    .page-section:has(.kpi-float-left),
    .page-section:has(.author-float-left) {
        float: left !important;
        width: calc(50% - 2rem) !important;
        clear: left !important;
        margin: 0 2rem 2rem 0 !important;
        display: block !important; /* Overrides flow-root block context */
    }

    .page-section:has(.quote-float-right),
    .page-section:has(.kpi-float-right),
    .page-section:has(.author-float-right) {
        float: right !important;
        width: calc(50% - 2rem) !important;
        clear: right !important;
        margin: 0 0 2rem 2rem !important;
        display: block !important; /* Overrides flow-root block context */
    }
    /* Reset breakout styles (full-bleed shifts) for floated page sections when they have background colors */
    .page-section.has-bg:has(.quote-float-left),
    .page-section.has-bg:has(.kpi-float-left),
    .page-section.has-bg:has(.author-float-left),
    .page-section.has-bg:has(.quote-float-right),
    .page-section.has-bg:has(.kpi-float-right),
    .page-section.has-bg:has(.author-float-right) {
        left: auto !important;
        transform: none !important;
    }
    /* Inside floated section containers, clear any custom layout margins on the nested components */
    .page-section:has(.quote-float-left) .quote-block-container,
    .page-section:has(.kpi-float-left) .kpi-block-container,
    .page-section:has(.author-float-left) .author-block-card {
        float: none !important;
        width: 100% !important;
        margin: 0 !important;
    }

    .page-section:has(.quote-float-right) .quote-block-container,
    .page-section:has(.kpi-float-right) .kpi-block-container,
    .page-section:has(.author-float-right) .author-block-card {
        float: none !important;
        width: 100% !important;
        margin: 0 !important;
    }

    /* Allow sibling paragraphs to wrap around floated sections instead of clearing them */
    .page-section.block-paragraph {
        clear: none !important;
        display: block !important; /* Overrides flow-root block context */
    }
    .page-section.block-paragraph:not(.has-bg) {
        width: auto !important;     /* Overrides 100% width constraint for non-colored blocks */
    }
}