@layer reset {

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

    img {
        max-width: 100%;
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    p {
        text-wrap: pretty;
        max-width: 65ch;
    }
}

@layer utilities {
    .text-yellow {
        color: var(--clrYellow);
    }
}

:root {
    --clrBlue: #1D2F4E;
    --clrYellow: #FDC230;
    --clrFont: white;

    --font: Arial, sans-serif;
    --font-size-0: clamp(1.125rem, 1.0598rem + 0.2717vw, 1.25rem);
    --font-size-1: clamp(1.2656rem, 1.1433rem + 0.5095vw, 1.5rem);
    --font-size-2: clamp(1.4238rem, 1.2276rem + 0.8178vw, 1.8rem);
    --font-size-3: clamp(1.6018rem, 1.3106rem + 1.2135vw, 2.16rem);
    --font-size-4: clamp(1.802rem, 1.3899rem + 1.7173vw, 2.592rem);
    --font-size-5: clamp(2.0273rem, 1.4622rem + 2.3546vw, 3.1104rem);

    --h1s: var(--font-size-5);
    --h2s: var(--font-size-4);
    --h3s: var(--font-size-3);
    --h4s: var(--font-size-2);
    --h5s: var(--font-size-1);
    --h6s: var(--font-size-0);
    --containerMaxWidth: 1200px;
}

body {
    min-height: 100dvh;
    color: var(--clrFont);
    display: flex;
    flex-flow: column nowrap;
    background: var(--clrBlue);
    font: 300 var(--font-size-0)/1.5 var(--font);
}

h1,
h2,
h3,
h4,
h5,
h6 {
    text-wrap: balance;
}

h1 {
    font-size: var(--h1s);
    line-height: 1.1;
}

h2 {
    font-size: var(--h2s);
    line-height: 1.2;
}

h3 {
    font-size: var(--h3s);
    line-height: 1.3;
}

h4 {
    font-size: var(--h4s);
    line-height: 1.4;
}

h5 {
    font-size: var(--h5s);
    line-height: 1.5;
}

h6 {
    font-size: var(--h6s);
    line-height: 1.5;
}

p {
    font-size: var(--font-size-0);
}

small {
    font-size: calc(var(--font-size-0) * .85);
}

a[href^=tel],
a[href^=mailto] {
    display: inline-flex;
    align-items: center;

    &::after {
        content: "";
        display: inline-block;
        width: 1em;
        height: 1em;
        color: currentColor;
        margin-inline-start: .25rem;
        background-color: currentColor;
        mask-size: contain;
        mask-repeat: no-repeat;
        vertical-align: middle;
    }
}

a[href^=tel]::after {
    mask-image: url('phone-solid.svg');
}

a[href^=mailto]::after {
    mask-image: url('envelope-solid.svg');
}

.container {
    width: 100%;
    max-inline-size: var(--containerMaxWidth);
    margin-inline: auto;
    padding-inline: 1rem;
}

header {
    img {
        max-width: 576px;
        margin: 1rem auto;

        @media (width >=730px) {
            margin: 3rem auto;
        }
    }
}

main .container {
    display: grid;
    gap: 2rem;

    @media(width >=730px) {
        grid-template-columns: 1fr 1fr;
        grid-template-rows: auto 1fr;
        gap: 3rem;
    }

    .testimonials {
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 1rem;
        font-family: "Times New Roman", Times, var(--font);

        small {
            font-style: italic;
        }
    }

    .about {
        --h1s: var(--font-size-1);
        --h2s: var(--font-size-5);
        --h3s: var(--font-size-2);

        @media (width >=730px) {
            grid-column: 2;
            grid-row: 1 / 3;
        }

        h1 {
            letter-spacing: .875rem;
        }

        h2 {
            color: var(--clrYellow);

            @media(width >=730px) {
                color: inherit;
            }
        }

        h1,
        h3,
        p:not(:last-child) {
            margin-block-end: 1rem;
        }
    }
}

footer {
    display: flex;
    flex-flow: column wrap;
    margin-block: 1rem;
    gap: .2rem .5rem;
    font-size: calc(var(--font-size-0) * .85);

    @media(width >=730px) {
        flex-flow: row wrap;
    }

    a {
        color: inherit;
        text-decoration: none;

        &:hover {
            color: hsl(from var(--clrBlue) h s 80%);
        }

        @media(width >=730px) {
            &:not(:first-child)::before {
                content: "|";
                color: white;
                margin-inline-end: 0.5rem;
            }
        }
    }
}