:root {
    --brand-primary: #EB5828;
    --text-brand: var(--brand-primary);

    --brand-secondary: #FFFFFF;
    --text-onBrand: #FFFFFF;
    --text-primary: #000000;
    --text-secondary: #5F6970;
}

:root {
    --h1: 3rem;
    --h2: 4.5rem;
    --h3: 3.5rem;
    --h4: 0.875rem;
    --h5: 2.25rem;
}

:root {
    --externalPadding: 1rem;

    @media (min-width: 769px) {
        --externalPadding: 3rem;
    }
    @media (min-width: 1025px) {
        --externalPadding: 5rem;
    }
}

html{
    font-size: 75%;

    @media (min-width: 769px) {
        font-size: 85%;
    }
    @media (min-width: 1025px) {
        font-size: 100%;
    }
}

body {
    font-family: "SF Pro Display", sans-serif;
    font-weight: 400;
    font-smoothing: antialiased;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    background-color: var(--brand-secondary);
}

.btn {
    display: inline-block;
    padding: 1.5rem 1rem;

    width: 100%;

    background: var(--brand-primary);
    color: var(--text-onBrand);

    font-size: 1.3rem;
    font-style: normal;
    font-weight: 500;
    line-height: 100%; /* 0.9375rem */
    text-decoration: none;
    text-align: center;

    &.on-primary {
        background: var(--brand-secondary);
        color: var(--text-brand);
    }

    @media (min-width: 769px) {
        width: auto;
        height: auto;
        padding: 0.75rem 1rem;
        font-size: 1rem;
    }

    &:hover {
        position: relative;
        transform: scale(0.99);

        &::before {
            display: inline-block;
            content: '';
            background: #000;
            opacity: .05;
            width: 100%;
            height: 100%;
            position: absolute;
            top: 0;
            left: 0;
            bottom: 0;
            right: 0;
        }
    }
    &:active {
        transform: scale(0.97);
    }
}

.link {
    color: var(--text-brand);
    text-decoration: none;
    font-size: 16px;
    font-weight: 500;

    display: flex;
    align-items: center;
    gap: .25rem;

    margin-top: 1rem;

    &:hover {
        gap: .4rem;
        text-decoration: underline;
    }
}

.chip {
    display: inline-block;
    padding: 4px 8px;
    background-color: var(--brand-primary);
    color: var(--text-onBrand);
    border-radius: 40px;

    font-size: 12px;
    font-style: normal;
    font-weight: 500;
    line-height: 100%;
}

h1 {
    font-size: var(--h1);
    opacity: .6;
}

h2 {
    font-size: var(--h2);
}

h3 {
    font-size: var(--h3);
    line-height: 110%;
}

h4 {
    font-size: var(--h4);
    color: var(--text-secondary);
    font-weight: 600;
    line-height: 110%; /* 0.9625rem */
    letter-spacing: 0.0625rem;
    text-transform: uppercase;

    display: flex;
    gap: .5rem;
    align-items: center;
}

h5 {
    font-size: var(--h5);
    color: var(--text-primary);
    line-height: 110%; /* 2.475rem */
}

p{
    color: var(--text-primary);
    font-size: 1.25rem;
    font-style: normal;
    font-weight: 400;
    line-height: 130%; /* 1.625rem */
}

header {
    background: var(--brand-primary);
    padding: 2rem var(--externalPadding) 5rem var(--externalPadding);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 80vh;
    color: var(--text-onBrand);

    > div {
        display: flex;
        width: 100%;
        justify-content: space-between;
    }

    .btn {
        display: none;

        @media (min-width: 769px) {
            display: block;
        }
    }

    h1 {
        margin-top: auto;
        margin-bottom: 2.5rem;
    }

    .logo {
        align-self: center;
    }
}

main {
    display: flex;
    flex-direction: column;
    gap: 12.5rem;
    padding: 12.5rem var(--externalPadding);

    width: 100%;

    img:first-child {
        width: 100%;
    }

    img:last-child {
        width: 100%;
    }
}

.about {
    h3 {
        @media (min-width: 769px) {
            width: calc((100% / 12) * 10);
        }
    }
}

.services {
    .list {
        display: flex;
        gap: 6rem;
        flex-wrap: wrap;

        @media (min-width: 769px) {
            gap: 2.5rem;
        }
    }

    h5 {
        margin-top: .25rem;
    }

    hr {
        margin-top: 1.25rem;
    }

    p {
        margin-top: 1.25rem;
    }

    .service {
        width: 100%;

        @media (min-width: 769px) {
            width: 390px;
        }
    }
}

footer {
    padding: 0 var(--externalPadding) 200px var(--externalPadding);

    h4 {
        margin-bottom: .5rem;
    }

    .btn {
        margin-top: 2.5rem;
    }
}