:root {
    --grid-col-xs: 6;
    --grid-col-sm: 12;
    --grid-col-xl: 18;
    --grid-gap-xs: 16px;
    --grid-gap-sm: 24px;
    --max-grid-width: calc(var(--grid-width) * var(--grid-col-xl) + (var(--grid-col-xl) - 1) * var(--grid-gap-sm))
}

a, abbr, acronym, address, applet, article, aside, audio, b, big, blockquote, body, canvas, caption, center, cite, code, dd, del, details, dfn, div, dl, dt, em, embed, fieldset, figcaption, figure, footer, form, h1, h2, h3, h4, h5, h6, header, hgroup, html, i, iframe, img, ins, kbd, label, legend, li, mark, menu, nav, object, ol, output, p, pre, q, ruby, s, samp, section, small, span, strike, strong, sub, summary, sup, table, tbody, td, tfoot, th, thead, time, tr, tt, u, ul, var, video {
    border: 0;
    font: inherit;
    font-size: 100%;
    line-height: 1;
    margin: 0;
    padding: 0;
    vertical-align: baseline
}

:root {
    font-size: calc(var(--text-size) * 14px)
}

@media (min-width: 768px) {
    :root {
        font-size: calc(var(--text-size) * 16px)
    }
}

@media (min-width: 1280px) {
    :root {
        font-size: calc(var(--text-size) * 18px)
    }
}

html {
    height: 100%;
    scroll-behavior: smooth
}

body {
    align-items: flex-start;
    background: var(--page-background);
    box-sizing: border-box;
    color: var(--text-color);
    justify-content: center;
    min-height: calc(100vh - 72px)
}

body, header {
    display: flex;
    flex-direction: column
}

header {
    align-items: center;
    flex: 1 1 calc(100% - 72px);
    height: auto;
    justify-content: flex-start;
    width: 100%
}

h1, h2, h3, h4, h5, h6 {
    word-wrap: break-word;
    color: var(--heading-color);
    font-family: Poppins, sans-serif;
    font-weight: 700;
    grid-column: 1/-1;
    letter-spacing: 1px;
    line-height: 1.28
}

h1 {
    font-size: 2rem;
    padding: 2.2rem 0 .4rem
}

h1:first-child {
    padding-top: .6rem
}

h2 {
    font-size: 1.8rem;
    padding: 1.48rem 0 .3rem
}

h3 {
    font-size: 1.6rem;
    padding: 1.28rem 0 .2rem
}

h4 {
    font-size: 1.4rem;
    padding: 1.2rem 0 .1rem
}

h5 {
    font-size: 1.2rem;
    padding: 1rem 0 0
}

h6 {
    font-size: 1rem;
    padding: .8rem 0 0
}

a, address, b, blockquote, button, cite, del, em, fieldset, figcaption, figure, i, input, ins, label, legend, li, ol, p, pre, q, span, strong, td, textarea, th, ul {
    word-wrap: break-word;
    font-family: Poppins, sans-serif;
    font-size: 1rem;
    font-weight: 400;
    letter-spacing: .5px;
    line-height: 1.6
}

a, address, b, blockquote, cite, del, em, i, ins, p, q, strong {
    margin: 1rem 0 0
}

p {
    grid-column: 1/-1
}

blockquote, i, q, th {
    font-style: italic
}

blockquote, q, th {
    color: var(--mono-5)
}

a:not(.button) {
    color: var(--link-color);
    font-weight: 600;
    transition: .4s
}

a:not(.button):focus, a:not(.button):hover {
    color: var(--link-color-active)
}

a:not(.button):visited {
    color: var(--link-color)
}

a:not(.button):visited:focus, a:not(.button):visited:hover {
    color: var(--link-color-active)
}

b, strong {
    font-weight: 700
}

em, i {
    font-style: italic
}

ol, ul {
    margin: 1rem 0 0;
    padding-left: 20px
}

sup {
    vertical-align: super
}

sub, sup {
    font-size: .64rem
}

sub {
    vertical-align: sub
}

.header {
    position: relative
}

.header__background {
    bottom: 0;
    left: 0;
    overflow: hidden;
    position: absolute;
    right: 0;
    top: 0;
    z-index: 0
}

.header__background__image {
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover;
    width: 100%
}

.header__background__image--blur {
    filter: blur(4px) brightness(80%);
    -o-object-position: center;
    object-position: center;
    transform: scale(1.04)
}

.header .copy, .logo {
    background: #fefefe;
    border-radius: 1rem;
    box-sizing: border-box;
    margin: 16px 12px 0;
    padding: 16px 16px 24px;
    width: calc(100% - 32px);
    z-index: 10
}

@media (min-width: 768px) {
    .header .copy {
        max-width: 640px;
        padding: 16px 32px 32px;
        width: 100%
    }

    .header .copy:first-of-type {
        margin-top: 48px
    }
}

.header .copy:last-of-type {
    margin-bottom: 16px
}

@media (min-width: 768px) {
    .header .copy:last-of-type {
        margin-bottom: 48px
    }
}

.header .copy__logo {
    margin: 16px 0 0;
    -o-object-fit: contain;
    object-fit: contain;
    width: var(--company-logo-size)
}

.list {
    grid-gap: 0 16px;
    display: grid;
    grid-template-columns:1fr;
    margin-top: 8px;
    padding-left: 0
}

@media (min-width: 768px) {
    .list {
        grid-gap: 4px 24px;
        grid-template-columns:auto 1fr;
        margin-top: 16px
    }
}

.list--documents {
    align-items: center;
    display: flex;
    flex-direction: column
}

@media (min-width: 768px) {
    .list--documents {
        flex-direction: row;
        justify-content: center;
        margin-top: 1rem
    }
}

.list__item {
    list-style-type: none
}

.list__item--key {
    font-size: .88rem;
    font-weight: 600;
    margin-top: 12px
}

@media (min-width: 768px) {
    .list__item--key {
        font-size: 1rem;
        margin-top: 0
    }
}

.brand-footer {
    align-items: center;
    background: var(--footer-background);
    border-top: 1px solid var(--brand-main);
    box-sizing: border-box;
    display: flex;
    justify-content: flex-end;
    padding: 24px 16px;
    width: 100%
}

@media (min-width: 768px) {
    .brand-footer {
        height: 72px;
        padding: 0 24px
    }
}

@media (min-width: 1024px) {
    .brand-footer {
        padding: 0 40px
    }
}

.brand-footer__link {
    align-items: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    margin: 0;
    text-decoration: none
}

@media (min-width: 768px) {
    .brand-footer__link {
        flex-direction: row
    }
}

.brand-footer__link__label {
    flex: 0 0 auto;
    text-align: center
}

@media (min-width: 768px) {
    .brand-footer__link__label {
        margin-right: 16px
    }
}

.brand-footer__link__logo {
    height: 32px;
    margin-top: 16px
}

@media (min-width: 768px) {
    .brand-footer__link__logo {
        margin-top: 0
    }
}

.logo {
    padding: 0;
    max-height: 160px;
    overflow: hidden;
}

.logo__logo {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

@media screen and (min-width: 600px) {
    .logo {
        max-height: 160px;
    }
}

@media screen and (min-width: 768px) {
    .logo {
        max-width: 640px;
        max-height: 160px;
    }
}