/* Shared section fades, backgrounds and wave spacing from the Angular site. */
html {
    --banner-top-height: 7.03125vw;
    --banner-bottom-height: 8.229167vw;
    --block-section-padding: 50px;
    --central-opacity: #fff0;
}

.grey-section--fade {
    --central-opacity: #F4F4F3;
}

.white-section--fade {
    --central-opacity: #fff;
}

.grey-section {
    min-height: clamp(160px, 30vw, 780px);
    background-color: #f4f4f4;
    background-image: linear-gradient(to right, #fff0, var(--central-opacity) 50%, #fff0 100%), url(/images/grey-banner-hexpattern.webp);
    background-position-y: 70%;
    background-size: 100%;
    background-repeat: no-repeat;

    padding-top: calc(var(--block-section-padding) + var(--banner-top-height));
    padding-bottom: calc(var(--block-section-padding) + var(--banner-bottom-height));
    margin-bottom: calc(var(--banner-bottom-height) - var(--banner-bottom-height) * 2);
}

.blue-section {
    padding-top: calc(var(--block-section-padding) + var(--banner-top-height));
    padding-bottom: calc(var(--block-section-padding) + var(--banner-bottom-height));
    margin-bottom: calc(var(--banner-bottom-height) - var(--banner-bottom-height) * 2);
}

.blue-section {
    background-image: url(/images/blue-banner-hexpattern.webp), linear-gradient(to right, #28316b, #65bac3 100%);
    color: #fff;
}

.blue-section h2,
.blue-section h3,
.blue-section p,
.blue-section a {
    color: #fff;
}

.blue-section h2 {
    font-size: 40px;
    font-weight: 700;
    line-height: 1.2;
}

/* Clip the section edges independently of their background artwork. */
.grey-section,
.blue-section,
.blue-wave-banner {
    /* Join the two transparent edge masks with a solid middle. */
    mask-image: url("/images/grey-banner-top.png"), linear-gradient(#000, #000), url("/images/grey-banner-bottom.png");
    mask-position: top, left 0 top calc(var(--banner-top-height) - 1px), bottom;
    mask-size: 100% var(--banner-top-height), 100% calc(100% - var(--banner-top-height) - var(--banner-bottom-height) + 2px), 100% var(--banner-bottom-height);
    mask-repeat: no-repeat;
}

.blue-wave-banner,
.blue-wave-banner.contact-us-banner {
    background-image: url('/images/home-banner-hexpattern.webp'), linear-gradient(to right, #28336c, #22acb8);
    background-size: cover, 100% 100%;
    background-position: center;
    background-repeat: no-repeat;
    padding-bottom: calc(var(--block-section-padding) + var(--banner-bottom-height));
}

.white-section+.grey-section {
    padding-top: calc(var(--banner-top-height) + var(--block-section-padding));
    margin-top: calc(var(--banner-top-height) - var(--banner-top-height) * 2);
}

.grey-section+.white-section {
    padding-bottom: calc(var(--banner-top-height));
}

.white-section {
    padding-top: var(--banner-bottom-height);
    min-height: clamp(160px, 30vw, 780px);
    background-image: linear-gradient(to right, #fff0, var(--central-opacity) 50%, #fff0 100%), url(/images/grey-banner-hexpattern.webp);
    background-position-y: 70%;
    background-size: 100%;
    background-repeat: no-repeat;
}