:root {
    --header-height: 113px;
    --footer-height: 277px;

    --container-max-width: 1024px;
    --container-padding: 2rem;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html, body {
    height: 100vh;
}

body {
    font-family: "Source Sans Pro", Arial, sans-serif;
    background-color: white;
}

h2 {
    font-size: 3rem;
    font-weight: 400;
}

a, p, small {
    font-weight: 300;
}

a {
    text-decoration: none;
}

a, a:visited {
    color: #006b8e;
}

#main-wrapper {
    min-height: 100vh;
    padding-top: var(--header-height);
    padding-bottom: var(--footer-height);
    position: relative;
}

.container {
    max-width: var(--container-max-width);
    margin-inline: auto;
    padding-inline: var(--container-padding);
    position: relative;
}

header {
    z-index: 1;
    background-color: white;
    position: fixed;
    width: 100%;
    height: var(--header-height);
    top: 0;

    img {
        position: absolute;
        top: -1rem;
        left: var(--container-padding);
        height: calc(var(--header-height) + 1.25rem);
    }

    ul {
        list-style: none;
        width: 100%;

        li {
            float: right;

            a {
                display: inline-block;
            }
        }
    }

    .social-links {
        margin-top: 1.5rem;

        a {
            margin-right: 1rem;
            font-size: 1.125rem;

            i {
                margin-right: 0.5rem;
            }
        }
    }

    .mobile-nav-links {
        background-color: white;
        border-bottom: 1px solid #eee;
        margin-top: -0.25rem;
        display: none;
        height: 0;

        li {
            float: none;
            padding-block: 0.25rem;

            a {
                display: block;
                font-size: 1.25rem;
            }

            a, a:visited {
                color: black;
            }
        }
    }

    .mobile-nav-links.open {
        height: auto;
        display: block;
    }

    .nav-links {
        border-block: 1px solid #eee;
        display: inline-block;
        margin-top: calc(var(--header-height) - 91px);

        li {
            margin-right: 3rem;

            a {
                font-size: 1.25rem;
                margin-block: 0.5rem;
            }

            a, a:visited {
                color: black;
            }
        }

        .mobile-menu {
            display: none;
        }

        li:first-of-type, li.mobile-menu {
            margin-right: 1rem;
        }
    }
}

section {
    padding-top: 1.5rem;
    padding-bottom: 4rem;
    line-height: 1.3;

    .header {
        max-width: 540px;
        margin-block: 0.5rem 2rem;
        margin-inline: auto;
        display: table;

        img {
            border-radius: 50%;
            margin-left: 2rem;
            height: 8rem;
            float: right;
        }

        div {
            text-align: right;
            margin-top: 0.5rem;
            float: right;
        }
    }

    h1 {
        font-size: 3rem;
        font-weight: 400;
    }

    h2 {
        font-size: 2.25rem;
        font-weight: 300;

        em {
            font-style: normal;
            font-weight: 400;
        }
    }

    .three-col-list {
        margin-block: 2rem;

        ul {
            display: inline-block;
            width: calc(33% - (30em / 14));

            li {
                margin-bottom: 0.375rem;

                i {
                    color: #d7b56d;
                }
            }
        }
    }

    p {
        font-size: 1.5rem;
        margin-top: 1rem;
    }

    .badges {
        max-width: 350px;
        margin-block: 0.5rem;
        margin-inline: auto;
        display: table;

        .sage {
            float: left;
            display: block;
            font-family: sans-serif;
            font-size: 3rem;
            font-weight: 700;
            color: #008060;
            letter-spacing: -6px;
            margin-top: 0.875rem;
        }

        .xero {
            float: left;
            margin-left: 0.75rem;
            width: 173px;
            height: 100px;
        }
    }

    .official-text {
        padding-top: 2rem;
        text-align: justify;
        border-top: 1px solid #eee;
    }

    .testimonial {
        padding-block: 1.25rem;

        p {
            font-size: 1.25rem;
            font-style: italic;
            text-align: justify;
            margin-bottom: 1rem;
        }

        .client {
            margin-top: 1rem;
            display: block;
            font-size: 1.125rem;
        }

        .date {
            margin-left: 0.75rem;
            display: block;
            font-size: 0.875rem;
            font-style: italic;
        }
    }
}

section.privacy-notice {
    h3 {
        font-size: 1.5rem;
        font-weight: 400;
        margin-top: 2rem;
    }

    h4 {
        font-size: 1.25rem;
        font-weight: 400;
        margin-top: 1.5rem;
    }

    p {
        font-size: 1.25rem;
        text-align: justify;
        margin-top: 0.5rem;
    }

    .last-updated {
        display: block;
        font-weight: 300;
        margin-top: 0.5rem;
    }

    ul li {
        font-size: 1.25rem;
        font-weight: 300;
        margin-block: 0.5rem;
        margin-left: 3rem;
    }
}

footer {
    background-color: #013242;
    color: white;
    position: absolute;
    inset-inline: 0;
    bottom: 0;
    padding-block: 1rem;

    a, a:visited {
        color: #00a4e0;
    }

    a:hover {
        color: white;
    }

    .standout-text {
        h2 {
            display: inline-block;
        }

        p {
            font-size: 1.5rem;
            margin-block: 0.25em;
        }

        .icb-crest {
            float: right;
            margin-top: 0.75rem;
            margin-left: 0.5rem;
            text-align: center;
            color: white;

            img {
                width: 5.75rem;
            }

            span {
                display: block;
            }
        }
    }

    .small-print {
        border-top: solid 1px white;
        margin-top: 1.5rem;
        padding-block: 1rem;

        .wrapper {
            float: left;

            small {
                display: block;
                font-size: 80%;
                text-transform: uppercase;
            }
        }

        .created-by {
            float: right;
        }
    }

    .icb-crest::after, .small-print::after {
        clear: both;
        content: "";
        display: table;
    }
}

@media screen and (max-width: 1023px) {
    section .three-col-list ul {
        display: block;
        width: calc(100% - (30em / 14));
    }
}

@media screen and (max-width: 863px) {
    header .nav-links li {
        margin-right: 1.5rem;
    }
}

@media screen and (max-width: 767px) {
    :root {
        --header-height: 50px;
        --container-padding: 1rem;
    }

    header {
        img {
            height: calc(var(--header-height) + 0.625rem);
            top: 0.25rem;
            left: 1rem;
        }

        .social-links {
            display: none;
        }

        .nav-links {
            border-top: none;
            margin-top: 0;
            padding-top: 0.5rem;

            a {
                font-size: 1rem;
            }

            .mobile-menu {
                display: inline-block;
            }

            li:not(.mobile-menu) {
                display: none;
            }
        }
    }

    section {
        .header {
            img {
                height: 4rem;
                margin-left: 0.375rem;
            }

            div {
                margin-top: 1px;
            }
        }

        h1 {
            font-size: 1.75rem;
        }

        h2 {
            font-size: 1.25rem;
        }

        p {
            font-size: 1rem;
        }

        .testimonial {
            p {
                font-size: 1rem;
            }

            .client {
                font-size: 0.8125rem;
            }
        }
    }

    footer {
        .standout-text {
            h2 {
                font-size: 2rem;
            }

            p {
                font-size: 1.2rem;
            }

            .icb-crest {
                margin-top: 0;
                margin-left: 0.25rem;

                img {
                    width: 4rem;
                }

                span {
                    font-size: 0.8rem;
                }
            }
        }

        .small-print {
            .wrapper, .created-by {
                float: none;
                width: 100%;
            }

            .created-by {
                margin-top: 1rem;
            }
        }
    }
}

@media screen and (max-width: 424px) {
    :root {
        --footer-height: 355px;
    }
}

@media screen and (max-width: 320px) {
    section .badges .xero {
        margin-left: 0.625rem;
    }
}