/* Global reset, 0,0,0 */
@layer reset {
    html {
        scroll-behavior: smooth;
    }

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

    body {
        -webkit-font-smoothing: antialiased;
    }

    img, picture, video, canvas, svg {
        display: block;
        max-width: 100%;
    }

    input, button, textarea, select {
        font: inherit;
    }

    p, h1, h2, h3, h4, h5, h6 {
        overflow-wrap: break-word;
    }
}

:root {
    --color-primary-white: #fff;
    --color-primary-black: #000;
}

:root {
    --color-brand-red: #cb1b42;
}

:root {
    --color-gray-1: #5c5c5c;
    --color-gray-2: #e5e7eb;
}

@font-face {
    font-display: swap;
    font-family: "Oswald";
    font-style: normal;
    font-weight: 200;
    src: url("../fonts/oswald/oswald-v53-latin-200.woff2") format("woff2");
}

@font-face {
    font-display: swap;
    font-family: "Oswald";
    font-style: normal;
    font-weight: 300;
    src: url("../fonts/oswald/oswald-v53-latin-300.woff2") format("woff2");
}

@font-face {
    font-display: swap;
    font-family: "Oswald";
    font-style: normal;
    font-weight: 400;
    src: url("../fonts/oswald/oswald-v53-latin-regular.woff2") format("woff2");
}

@font-face {
    font-display: swap;
    font-family: "Oswald";
    font-style: normal;
    font-weight: 500;
    src: url("../fonts/oswald/oswald-v53-latin-500.woff2") format("woff2");
}

@font-face {
    font-display: swap;
    font-family: "Oswald";
    font-style: normal;
    font-weight: 600;
    src: url("../fonts/oswald/oswald-v53-latin-600.woff2") format("woff2");
}

@font-face {
    font-display: swap;
    font-family: "Oswald";
    font-style: normal;
    font-weight: 700;
    src: url("../fonts/oswald/oswald-v53-latin-700.woff2") format("woff2");
}

@font-face {
    font-display: swap;
    font-family: "Open Sans";
    font-style: normal;
    font-weight: 300;
    src: url("../fonts/open-sans/open-sans-v40-latin-300.woff2") format("woff2");
}

@font-face {
    font-display: swap;
    font-family: "Open Sans";
    font-style: italic;
    font-weight: 300;
    src: url("../fonts/open-sans/open-sans-v40-latin-300italic.woff2") format("woff2");
}

@font-face {
    font-display: swap;
    font-family: "Open Sans";
    font-style: normal;
    font-weight: 400;
    src: url("../fonts/open-sans/open-sans-v40-latin-regular.woff2") format("woff2");
}

@font-face {
    font-display: swap;
    font-family: "Open Sans";
    font-style: italic;
    font-weight: 400;
    src: url("../fonts/open-sans/open-sans-v40-latin-italic.woff2") format("woff2");
}

@font-face {
    font-display: swap;
    font-family: "Open Sans";
    font-style: normal;
    font-weight: 500;
    src: url("../fonts/open-sans/open-sans-v40-latin-500.woff2") format("woff2");
}

@font-face {
    font-display: swap;
    font-family: "Open Sans";
    font-style: italic;
    font-weight: 500;
    src: url("../fonts/open-sans/open-sans-v40-latin-500italic.woff2") format("woff2");
}

@font-face {
    font-display: swap;
    font-family: "Open Sans";
    font-style: normal;
    font-weight: 600;
    src: url("../fonts/open-sans/open-sans-v40-latin-600.woff2") format("woff2");
}

@font-face {
    font-display: swap;
    font-family: "Open Sans";
    font-style: italic;
    font-weight: 600;
    src: url("../fonts/open-sans/open-sans-v40-latin-600italic.woff2") format("woff2");
}

@font-face {
    font-display: swap;
    font-family: "Open Sans";
    font-style: normal;
    font-weight: 700;
    src: url("../fonts/open-sans/open-sans-v40-latin-700.woff2") format("woff2");
}

@font-face {
    font-display: swap;
    font-family: "Open Sans";
    font-style: italic;
    font-weight: 700;
    src: url("../fonts/open-sans/open-sans-v40-latin-700italic.woff2") format("woff2");
}

@font-face {
    font-display: swap;
    font-family: "Open Sans";
    font-style: normal;
    font-weight: 800;
    src: url("../fonts/open-sans/open-sans-v40-latin-800.woff2") format("woff2");
}

@font-face {
    font-display: swap;
    font-family: "Open Sans";
    font-style: italic;
    font-weight: 800;
    src: url("../fonts/open-sans/open-sans-v40-latin-800italic.woff2") format("woff2");
}

@layer general-page {
    html {
        font-size: 62.5%;
    }

    body {
        font-size: 1.6rem;
        font-family: "Open Sans", sans-serif;
        background-color: var(--color-primary-white);
        color: var(--color-primary-black);
        line-height: 1.4;
    }

    h1, h2, h3, h4, h5, h6 {
        font-size: inherit;
    }

    :any-link {
        color: var(--color-brand-red);
    }

    p {
        margin-block-end: 2em;
    }

    p:last-child {
        margin-block-end: 0;
    }
}

@layer common-objects {

    .skip-link {
        border: 0;
        clip: rect(1px, 1px, 1px, 1px);
        clip-path: inset(50%);
        height: 1px;
        margin: -1px;
        overflow: hidden;
        padding: 0;
        position: absolute !important;
        width: 1px;
        word-wrap: normal !important;

        &:active, &:focus-visible {
            background-color: #eee;
            clip: auto !important;
            clip-path: none;
            color: #444;
            display: block;
            font-size: 1em;
            height: auto;
            left: 5px;
            line-height: normal;
            padding: 15px 23px 14px;
            text-decoration: none;
            top: 5px;
            width: auto;
            z-index: 100000;
        }
    }

    .bubble {
        --bubble-padding-inline: 1em;
        --bubble-padding-block: 0.75em;
        --radius: 1.25em;
        background: var(--color-brand-red);
        border-radius: var(--radius) var(--radius) 0 var(--radius);
        color: var(--color-primary-white);
        font-size: 4.8rem;
        max-width: fit-content;
        padding: var(--bubble-padding-block) var(--bubble-padding-inline);
        line-height: 1.0;
        font-weight: 400;

        & > * {
            display: block;
        }

        @media screen and (width <= 80em) {
            font-size: 4.0rem;
        }
        @media screen and (width <= 60em) {
            font-size: 3.2rem;
        }
    }

    .region {
        --region-size-between-min-max: 4rem;
        --region-outer-size: 1fr;
        --region-content-size: 65rem;
        display: grid;
        grid-template-columns: [full-width-start] var(--region-outer-size) [max-content-start] var(--region-size-between-min-max) [min-content-start] var(--region-content-size) [min-content-end] var(--region-size-between-min-max) [max-content-end] var(--region-outer-size) [full-width-end];
        @media screen and (width <= 60em) {
            --region-outer-size: 4rem;
            --region-content-size: 1fr;
        }
        @media screen and (width <= 40em) {
            --region-outer-size: 2rem;
            --region-size-between-min-max: 2rem;
        }
    }

    .button {
        padding: 0.5em 2em;
        text-decoration: none;
        transition: all 0.25s ease-in;
        font-weight: 400;
        text-align: center;
        display: inline-block;
        border: 0.1rem solid var(--color-brand-red);
        background-color: var(--color-brand-red);
        color: var(--color-primary-white);
        max-width: fit-content;
        border-radius: 0.25em;
        outline-offset: 0.25em;
        cursor: pointer;

        &:hover {
            background-color: var(--color-primary-white);
            color: var(--color-brand-red);
        }
    }

    .hero {
        background-repeat: no-repeat;
        min-height: 50rem;
        background-size: cover;
        background-position: top center;
    }
}

@layer page-specific {
    .site-header, .site-footer {
        background-color: var(--color-primary-black);
        min-height: 10rem;
        display: grid;
        place-content: center;
        align-items: center;

        :where(.logo) {
            width: 100%;
            max-height: 4rem;
        }
    }

    .section-1 {
        background-image: url(../assets/header.jpg);
        min-height: 70rem;
        padding-top: 16rem;
        position: relative;

        :where(.content) {
            grid-column: max-content;
            transform: translate(-23rem);
        }

        @media screen and (width <= 80em) {
            & {
                min-height: 50rem;
                padding-top: 0;
                background-position: right;
            }

            :where(.content) {
                transform: none;

                .bubble {
                    position: absolute;
                    bottom: 5rem;
                    right: 10rem;
                }
            }
        }
        @media screen and (width <= 60em) {
            & {
                min-height: 40rem;
            }
        }
        @media screen and (width <= 40em) {
            & {
                min-height: 30rem;
            }

            :where(.content) {
                transform: none;

                .bubble {
                    left: 2rem;
                    right: unset;
                    bottom: 2rem;
                }
            }
        }
    }

    .section-2 {
        padding-block: 10rem;

        :where(.content) {
            grid-column: min-content;
            color: var(--color-gray-1);

            :where(h2) {
                font-family: "Oswald", sans-serif;
                font-weight: 300;
                font-size: 5rem;
            }

            :where(p) {
                font-size: 2rem;
                color: var(--color-gray-1);
            }
        }

        @media screen and (width <= 80em) {
            h2 {
                font-size: 4rem;
            }
        }
        @media screen and (width <= 60em) {
            & {
                padding-block: 5rem;
            }

            h2 {
                font-size: 3.2rem;
            }
        }
    }

    .section-3 {
        padding-block-start: 5rem;
        background: var(--color-gray-2);
        background-image: url(../assets/dot-pattern.png);
        background-size: cover;
        background-repeat: no-repeat;
        background-position: center center;
        padding-bottom: 2rem;

        :where(.content) {
            grid-column: min-content;

            :where(p) {
                margin-top: 4rem;
                font-size: 2rem;
            }
        }

        :where(p) {
            max-width: 95%;
        }

        .button {
            margin-block: 7rem;
            display: block;
            margin-inline: auto;
            text-align: center;
        }

        @media screen and (width <= 40em) {
            .region {
                display: block;
                padding-inline: var(--region-outer-size);
            }

            :where(.bubble) {
                transform: none;
            }

            :where(p){
                padding-left: 2rem;
            }
        }
    }

    .section-5 {
        background-image: url(../assets/Meaningful.jpg);
        min-height: 70rem;
        padding-top: 40rem;
        position: relative;

        :where(.content) {
            grid-column: min-content;
            transform: translate(25rem);
            :where(.bubble){
                min-width: 69rem;
            }
        }

        @media screen and (width <= 80em) {
            & {
                min-height: 50rem;
                background-position: left;
            }

            :where(.content) {
                transform: none;

                :where(.bubble) {
                    position: absolute;
                    bottom: 5rem;
                    right: 10rem;
                    min-width: auto;
                }
            }
        }
        @media screen and (width <= 40em) {
            & {
                min-height: 30rem;
            }

            :where(.content) {
                transform: none;

                .bubble {
                    left: 2rem;
                    right: unset;
                    bottom: 2rem;
                }
            }
        }
    }

    .section-6 {
        background-color: var(--color-gray-2);
        color: var(--color-gray-1);

        :where(.content) {
            grid-column: max-content;
            margin-block: 5rem;
            padding-block: var(--region-size-between-min-max);
            padding-inline: calc(2 * var(--region-size-between-min-max));
            background: var(--color-primary-white);

            :where(h2) {
                font-family: "Oswald", sans-serif;
                font-weight: 300;
                font-size: 5rem;
            }
        }

        @media screen and (width <= 80em) {
            h2 {
                font-size: 4rem;
            }

            :where(.content) {
                grid-column: min-content;
                max-width: 60rem;
                margin-inline: auto;
            }
        }
        @media screen and (width <= 60em) {
            h2 {
                font-size: 3.2rem;
            }
        }
        @media screen and (width <= 50em) {
            :where(.content) {
                max-width: 100%;
                padding-inline: 2rem;
            }
        }
    }
}

@layer iframe {
    .section-6 iframe {
        border: none;
        display: block;
        width: 100%;
        margin-block-start: 4rem;
    }
}

@layer form {
    .form {
        display: grid;
        max-width: 30rem;
        margin-inline: auto;
        row-gap: 2rem;
        margin-block-start: 4rem;

        .field.hidden {
            display: none;
        }

        :where(& > .field > :where(label, .field-group)) {
            display: grid;

            :where(& > strong) {
                font-weight: 500;
            }

            :where(&:has([required])) strong::after {
                content: " *";
                font-size: 0.8em;
                color: var(--color-brand-red);
                vertical-align: text-top;
            }
        }

        :where(input[type=text], input[type=email], input[type=tel], select) {
            border: 1px solid var(--color-gray-1);
        }

        :where(input[type=submit]) {
            margin-inline: auto;
            display: block;
            margin-top: 1rem;
        }
    }
}