:root {
    --bg-clr: hsl(0, 0%, 100%);
    --bg-clr-2: hsl(208, 94%, 97%);
    --deep-blue: hsl(208, 40%, 13%);
    --bright-blue: #0673c6;
    --mid-blue: hsl(206, 94%, 68%);
    --light-blue: hsl(206, 94%, 88%);
    --accent: #EEC643;
    --main-font-clr: hsl(208, 10%, 13%);
    --header-font-clr: hsl(208, 50%, 23%);
    --box-shadow: 0px 0px 2px rgba(24, 24, 24, 0.08), 0px 2px 4px 1px rgba(24, 24, 24, 0.16);
    --border: 1px solid hsl(208, 40%, 90%);
    --body-weight: 400;
    --header-weight: 400;
    --font-size-xs: 0.825rem;
    --font-size-s: 1rem;
    --font-size-m: 1.25rem;
    --font-size-l: 1.5rem;
    --font-size-xl: 2.5rem;
    --font-size-xxl: 3.2rem;
    --letter-spacing: 1px;
    --slightly-round: 2px;
    --very-round: 8px;
    --wrapper-max-px: 1198px;
    --grid-cols: 12;
    --grid-gap: min(8vw, 2rem);
    --section-pad: 8rem;
}

*, *::before, *::after {
    position: relative;
    appearance: unset;
    -moz-appearance: unset;
    -webkit-appearance: unset;
    -ms-progress-appearance: unset;
    border: 0;
    outline: 0;
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    line-height: inherit;
    font: inherit;
}

html {
    scroll-behavior: smooth;
    font-size: 100%;
}

body {
    font: var(--body-weight) normal var(--font-size-s)/1.5 'Lato', sans-serif;
    background-color: var(--bg-clr);
    color: var(--main-font-clr);
}

img {
    display: block;
    width: 100%;
    max-width: 100%;
    height: auto;
}

img.rounded {
    border-radius: var(--very-round);
}

.xs-font {
    font-size: var(--font-size-xs);
}

.s-font {
    font-size: var(--font-size-s);
}

.m-font {
    font-size: var(--font-size-m);
}

.ar-1-1 {
    aspect-ratio: 1;
}

.img-ar-2-1 {
    aspect-ratio: 2/1;
    object-fit: cover;
}

.mix-blend-mult {
    mix-blend-mode: multiply;
}

.drop-shadow {
    filter: drop-shadow(4px 6px 4px rgba(0, 0, 0, .2));
}

a {
    display: inline-block;
    text-decoration: none;
    font: inherit;
    color: inherit;
}

ul {
    margin: 0 0 2rem 2rem;
}

a.button,
button {
    cursor: pointer;
    min-width: 160px;
    padding: .6em 1.2em;
    text-align: center;
    border: 2px solid var(--bright-blue);
    border-radius: var(--slightly-round);
    font-size: .9375rem;
    font-weight: 600;
    letter-spacing: var(--letter-spacing);
    top: 0;
    transition: 250ms cubic-bezier(0.445, 0.05, 0.55, 0.95);
}

a.button.blue,
button.blue {
    background-color: var(--bright-blue);
    color: var(--bg-clr);
}

a.button.blue-outline,
button.blue-outline {
    background-color: transparent;
    color: var(--bright-blue);
}

a.button.yellow,
button.yellow {
    background-color: var(--accent);
    border-color: var(--accent);
}

a.button.white,
button.white {
    background-color: white;
    border-color: white;
    font-weight: 800;
}

a.button:hover,
button:hover {
    top: -3px;
}

p {
    margin: 0 0 1rem;
}

b {
    font-weight: bold;
}

.grid {
    display: grid;
    gap: var(--grid-gap);
}

.gtc-1fr {
    grid-template-columns: 1fr;
}

.gtc-1fr-2fr {
    grid-template-columns: 1fr 2fr;
}

.gtc-1fr-3fr {
    grid-template-columns: 1fr 3fr;
}

.gtc-1fr-4fr {
    grid-template-columns: 1fr 4fr;
}

.gtc-2fr {
    grid-template-columns: repeat(2, 1fr);
}

.gtc-2fr-1fr {
    grid-template-columns: 2fr 1fr;
}

.gtc-2fr-1fr-1fr {
    grid-template-columns: 2fr 1fr 1fr;
}

.gtc-2fr-3fr {
    grid-template-columns: 2fr 3fr;
}

.gtc-3fr-1fr {
    grid-template-columns: 3fr 1fr;
}

.gtc-3fr {
    grid-template-columns: repeat(3, 1fr);
}

.gtc-4fr {
    grid-template-columns: repeat(4, 1fr);
}

.flex {
    display: flex;
    flex-wrap: wrap;
}

.flex.no-wrap {
    flex-wrap: nowrap;
}

.fd-c {
    flex-direction: column;
}

.jc-sb {
    justify-content: space-between;
}

.ai-c {
    align-items: center;
}

.ai-start {
    align-items: start;
}

.ac-c {
    align-content: center;
}

.ac-start {
    align-content: start;
}

.fd-c {
    flex-direction: column;
}

.gap-1r {
    gap: 1rem;
}

.gap-1-5r {
    gap: 1.5rem;
}

.gap-2r {
    gap: 2rem;
}

.gap-3r {
    gap: 3rem;
}

.mt-1r {
    margin-top: 1rem;
}

.mt-2r {
    margin-top: 2rem;
}

.mr-1r {
    margin-right: 1rem;
}

.mb-1r {
    margin-bottom: 1rem;
}

.mb-2r {
    margin-bottom: 2rem;
}

.pt-1r {
    padding-top: 1rem;
}

.pr-1r {
    padding-right: 1rem;
}

.pr-2r {
    padding-right: 2rem;
}

.pl-1r {
    padding-left: 1rem;
}

.pl-2r {
    padding-left: 2rem;
}

.pt-2r {
    padding-top: 2rem;
}

.pt-3r {
    padding-top: 3rem;
}

.pt-half-section {
    padding-top: calc(var(--section-pad)*0.5);
}

.pt-third-section {
    padding-top: calc(var(--section-pad)*0.33);
}

.pt-quarter-section {
    padding-top: calc(var(--section-pad)*0.25);
}

header {
    width: 100%;
    background-color: var(--bg-clr);
    padding: 1.2rem 0;
    position: fixed;
    top: 0;
    z-index: 1;
    font-size: .9rem;
    box-shadow: var(--box-shadow);
}

header .mobile {
    display: none;
}

.logo {
    width:  min(150px, 100%);
}

.wrapper {
    width: min(100%, var(--wrapper-max-px));
    padding: 0 var(--grid-gap);
    margin-inline: auto;
}

.wrapper.grid {
    grid-template-columns: repeat(var(--grid-cols), 1fr);
}

.box {
    padding: calc(var(--grid-gap)/1.5) var(--grid-gap);
    border-radius: var(--very-round);
    box-shadow: var(--box-shadow);
}

.outline {
    border-radius: var(--very-round);
    border: var(--border);
}

table, tbody, th, td {
    border-collapse: collapse;
}

table {
    width: 100%;
    overflow: hidden;
    border: 1px solid var(--main-font-clr);
}

tr:first-of-type {
    background-color: var(--bright-blue);
    text-align: left;
    color: white;
}

th, td {
    padding: .8em 1.2em;
    border: 1px solid var(--light-blue);
}

.sector .img-wrap {
    background-color: var(--bg-clr-2);
    border: 4px solid var(--bright-blue);
    border-radius: 999px;
    width: min(33%, 180px);
    aspect-ratio: 1;
    padding: 5%;
    margin: 0 auto;
}

.full-width {
    grid-column: auto / span var(--grid-cols);
}

.half-width {
    grid-column: auto / span calc(var(--grid-cols)/2);
}

.half-width-center {
    grid-column: calc(var(--grid-cols)/4) / span calc(var(--grid-cols)/1.5);
}

.third-width {
    grid-column: auto / span calc(var(--grid-cols)/3);
}

.two-third-width {
    grid-column: auto / span calc(var(--grid-cols)/1.5);
}

.mi-auto {
    margin-inline: auto;
}

.benefit {
    grid-template-columns: 1fr 5fr;
    gap: calc(var(--grid-gap)/1.5);
    letter-spacing: var(--letter-spacing);
}

.ta-c {
    text-align: center;
}

section {
    padding: var(--section-pad) 0;
}

section.inner-box {
    padding: calc(0.5*var(--section-pad)) 0;
}

.inner-box {
    padding: calc(0.5*var(--section-pad)) calc(2*var(--grid-gap));
}

#banner {
    padding: 1.5rem 0;
}

#banner p {
    margin: 0;
    font-size: var(--font-size-s);
}

.grey-bg {
    background-color: var(--bg-clr-2);
}

.white-bg {
    background-color: white;
}

.blue-bg {
    background-color: var(--bright-blue);
}

.light-blue-bg {
    background-color: var(--light-blue);
}

.white-text {
    color: white;
}

.blue-text {
    color: var(--bright-blue);
}

.bold-text {
    font-weight: bold;
}

h1, h2, h3, h4, h5, h6 {
    font-family: 'Aleo', sans-serif;
    line-height: 1.2;
    margin-bottom: 1.5rem;
    color: var(--header-font-clr);
    font-weight: var(--header-weight);
    letter-spacing: .2px;
}

h1 {
    font-size: min(var(--font-size-xxl), 7.2vw);
}

h2 {
    font-size: min(var(--font-size-xl), 6.8vw);
}

h3 {
    font-size: min(var(--font-size-l), 6.4vw);
}

form {
    padding: calc(var(--grid-gap)/1.5 - .3em) var(--grid-gap) calc(var(--grid-gap)/1.5 + .3em);
    border-radius: var(--very-round);
    box-shadow: var(--box-shadow);
}

label,
legend {
    display: block;
    font-weight: 600;
    line-height: 1.2;
    padding: 0 0 .6em;
}

fieldset label {
    font-size: var(--font-size-xs);
    padding: 0;
}

.form-field {
    padding: .5em 0 0;
}

.required label::after {
    content: "*";
    color: #e95768;
    margin: 0 0 0 .25em;
}

input, textarea {
    width: 100%;
    appearance: unset;
    -moz-appearance: unset;
    background-color: var(--bg-clr-2);
    box-shadow: inset 0px 2px 2px 0px rgba(0, 0, 0, .15);
    -webkit-appearance: unset;
    border: var(--border);
    border-radius: var(--slightly-round);
    padding: .75em 1em;
    line-height: 1;
    transition: 250ms ease-in-out;
}

input[type=number] {
    width: 94px;
}

input[type=number]::-webkit-inner-spin-button {
    opacity: 1;
}

textarea {
    max-width: 100%;
    min-width: 100%;
    height: 6rem;
}

.submit {
    margin: 1rem 0 0;
}

.accordion {
    cursor: pointer;
    overflow: hidden;
}

.accordion:not(:last-child) {
    border-bottom: 1px solid var(--mid-blue);
}

.accordion article {
    height: 0;
}

.accordion.active article {
    padding: .5rem 0 2rem;
    height: auto;
}

.accordion .minus,
.accordion.active .plus {
    display: none;
}

.accordion.active .minus {
    display: block;
}

.accordion h3 {
    width: calc(100% - var(--font-size-l)*1.5);
}

.icon-toggle {
    position: absolute;
    top: 0;
    right: 0;
    width: var(--font-size-l);
    aspect-ratio: 1;
}

footer {
    background-color: var(--bright-blue) ;
    padding: calc(var(--section-pad)*0.75) 0 0;
    color: white;
}

footer img {
    filter: brightness(0) invert(1);
}

@media screen AND (max-width: 1197px) {
    :root {
        --grid-cols: 6;
        --section-pad: 6rem;
    }

    .tab-gtc-1fr {
        grid-template-columns: 1fr;
    }

    .tab-gtc-2-1fr {
        grid-template-columns: repeat(2, 1fr);
    }

    .tab-fd-column {
        flex-direction: column;
    }

    .tab-gap-1r {
        gap: 1rem;
    }

    .tab-ai-fs {
        align-items: flex-start;
    }
}

@media screen AND (max-width: 749px)  {
    :root {
        --section-pad: 4rem;
    }

    header .desktop {
        display: none;
    }

    header .mobile {
        display: block;
    }

    .open-close {
        font-size: 3rem;
        z-index: 2;
    }

    .open-close img {
        width: 2rem;
    }

    .inactive #close {
        display: none;
    }

    div:not(.inactive) > .open-close > #open {
        display: none;
    }

    .mobile nav {
        display: flex;
        flex-direction: column;
        position: absolute;
        top: -1.2rem;
        left: 0;
        width: 100%;
        background-color: white;
        padding: 2rem var(--grid-gap);
        box-shadow: var(--box-shadow);
    }

    .mobile .inactive nav {
        display: none;
    }

    .half-width {
        grid-column: auto / span var(--grid-cols);
    }

    .mob-gtc-1-1fr {
        grid-template-columns: 1fr;
    }

    .mob-gtc-2-1fr {
        grid-template-columns: repeat(2, 1fr);
    }

    .mob-gap-1r {
        gap: 1rem;
    }

    .mob-gap-1-5r {
        gap: 1.5rem;
    }

    .mob-gap-2r {
        gap: 2rem;
    }

    .half-width-center {
        grid-column: auto / span var(--grid-cols);
    }

    .mob-jc-c {
        justify-content: center;
    }
    
    .mob-fd-c {
        flex-direction: column;
    }

    .mob-order-1 {
        order: 1;
    }

    .mob-display-none {
        display: none;
    }

    .mob-pad-0 {
        padding: 0;
    }

    form {
        margin: 0;
    }
}