/*
 * Whole-page background follows the section being scrolled through.
 * front-page.js sets --page-bkg on <html> to the current section's data-bkg,
 * and --section-pre-bkg on each section to the colour of the section above it.
 * --page-bkg is a registered <color> so it interpolates: the section background
 * and the .section-fade gradient ease to the new colour together.
 * #banner opts out (no data-bkg) and keeps its own dark background.
 */
@property --page-bkg {
    syntax: "<color>";
    inherits: true;
    initial-value: #EAF8F8;
}

:root {
    transition: --page-bkg 0.6s ease;
}

section[data-bkg],
div[data-bkg] {
    position: relative;
    background-color: var(--page-bkg);
}

.section-fade {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 118px;
    z-index: 0;
    pointer-events: none;
    /* background-image: linear-gradient(
        to bottom,
        var(--section-pre-bkg, var(--page-bkg)),
        var(--page-bkg)
    ); */
}

.page-template-default {
    overflow: visible;
}

.subheading-text {
    color: #26005E;
}

.number-section__head .subheading-text {
    color: #ffffff;
}

@media (max-width: 767.96px) {
    .subheading-text {
        font-size: 15px;
        line-height: 22px;
    }
}