.header {
    margin-top: 0 !important;
}

@media screen and (min-width: 40rem) {
    .header.type-links {
        margin-bottom: -4rem;
    }
}

@media screen and (min-width: 64rem) {
    .header.type-links {
        margin-bottom: -6rem;
    }
}

@media screen and (min-width: 40rem) {
    .header {
        margin-left: -1.5rem;
        margin-right: -1.5rem;
        overflow: hidden;
        padding: 0 1.5rem;
    }
}

@media screen and (min-width: 64rem) {
    .header {
        margin-bottom: -6rem;
        margin-left: 0;
        margin-right: 0;
        padding: 0;
        padding-bottom: 6rem;
    }
}

.header .background {
    align-items: center;
    display: flex;
    margin: 0 -1rem;
    width: calc(100% + 32px);
}

@media screen and (min-width: 40rem) {
    .header .background {
        margin: 0 -1.5rem;
        min-height: 300px;
        padding: 0 1.5rem;
        width: calc(100% + 48px);
    }
}

@media screen and (min-width: 64rem) {
    .header .background {
        justify-content: center;
        margin: 0;
        min-height: 470px;
        padding: 0;
        width: 100%;
    }
}

.header .background.background-image {
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
}

.header .background.background-image.no-fade::before {
    display: none;
}

.header .background.background-image::before {
    background: transparent linear-gradient(85deg, var(--color-quinary) 40%, rgba(var(--color-quinary-rgb), 0) 100%) 0 0 no-repeat padding-box;
    content: "";
    display: block;
    height: 100%;
    position: absolute;
    top: 0;
    width: 100%;
}

@media screen and (min-width: 40rem) {
    .header .background.background-image::before {
        left: -24px;
        width: calc(100% + 24px);
    }
}

@media screen and (min-width: 64rem) {
    .header .background.background-image::before {
        left: 0;
        width: 100%;
    }
}

.header .background.background-image::after {
    content: "";
    display: block;
    padding-bottom: 70%;
}

@media screen and (min-width: 40rem) {
    .header .background.background-image::after {
        display: none;
    }
}

.header .background.shape {
    background-color: var(--color-quinary);
    min-height: 250px;
    position: relative;
}

@media screen and (min-width: 40rem) {
    .header .background.shape {
        min-height: 300px;
    }

    .header .background.shape::after {
        background-image: url(../../img/circle-blue.svg);
        background-position: center;
        background-repeat: no-repeat;
        background-size: contain;
        content: "";
        display: block;
        height: 400px;
        pointer-events: none;
        position: absolute;
        right: -80px;
        top: -120px;
        width: 400px;
    }
}

@media screen and (min-width: 64rem) {
    .header .background.shape {
        min-height: 470px;
    }

    .header .background.shape::after {
        height: 800px;
        right: -300px;
        top: -240px;
        width: 800px;
    }
}

.header .background .content-wrapper {
    padding: 0 1rem;
    width: 100%;
}

@media screen and (min-width: 40rem) {
    .header .background .content-wrapper {
        padding: 0;
    }
}

.header .background h1 {
    margin: 0;
    position: relative;
}

.header .background .text {
    margin: 1rem 0 5rem;
    position: relative;
}

@media screen and (min-width: 40rem) {
    .header .background .text {
        margin: 1rem 0 2rem;
    }
}

@media screen and (min-width: 64rem) {
    .header .background .text {
        margin: 1rem 0 0;
    }
}

@media screen and (min-width: 40rem) {
    .header .link-wrapper {
        margin: 0 0 4rem;
    }
}

@media screen and (min-width: 64rem) {
    .header .link-wrapper {
        margin: 0;
    }
}

.header .link-item:last-of-type .box {
    margin: -3.4375rem 0 0;
}

@media screen and (min-width: 40rem) {
    .header .link-item:nth-last-of-type(2) .box {
        margin: -3.4375rem 0 0;
    }
}

@media screen and (min-width: 40rem) {

    .header .link-item:last-of-type .box,
    .header .link-item:nth-last-of-type(2) .box {
        margin: -3.4375rem 0 0;
    }
}

.header .box {
    margin: 0 0 1rem;
    margin: -3.4375rem 0 3.4375rem;
    padding: 1.5625rem 2rem;
    position: relative;
}

@media screen and (min-width: 40rem) {
    .header .box {
        margin: -3.4375rem 0 5.4375rem;
    }
}

.header .box:hover {
    box-shadow: 0 24px 64px rgba(0, 0, 0, 0.16);
}

.header .box::after {
    color: var(--color-tertiary);
    content: "\f061";
    display: block;
    font-family: "Font Awesome 6 Pro", "Font Awesome 6 Brands";
    font-size: 1.1875rem;
    position: absolute;
    right: 2rem;
    top: 25px;
}

@media screen and (min-width: 64rem) {
    .header .box {
        margin: -3.4375rem 0 0;
    }
}

.header .box .inner {
    padding-right: 25px;
}

@media screen and (min-width: 64rem) {
    .header .box .inner {
        padding-right: 50px;
    }
}

.header .box .inner p {
    color: var(--color-primary);
    font-weight: 700;
    margin: 0;
}

.header .box .inner a {
    display: block;
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
}

.header-subnav-container {
    margin: 0 -1rem 0 0;
    padding: 0 0 0 0.625rem;
}

@media screen and (min-width: 40rem) {
    .header-subnav-container {
        margin: 0 auto;
        padding: 0;
    }
}

.header-subnav-container>.column {
    padding: 0;
}

@media screen and (min-width: 40rem) {
    .header-subnav-container>.column {
        padding: 0 0.625rem;
    }
}

.no-subnav .cta-wrapper {
    margin: -3.75rem 0 0;
}

.cta-wrapper {
    margin: 0 1.6875rem 0 0;
    position: relative;
}

@media screen and (min-width: 40rem) {
    .cta-wrapper {
        margin: -3.75rem 0 0;
    }
}

.cta-wrapper .btn {
    width: 100%;
}