:root {
    --g-gutter: 2.0rem;
    --g-mortar: 6.0rem;
    --g-font-primary: 'rigid', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, sans-serif;

    /* font size */
    --font-size-100: 1.2rem;
    --font-size-200: 1.2rem;
    --font-size-300: 1.4rem;
    --font-size-400: 1.6rem;
    --font-size-500: 1.8rem;
    --font-size-600: 2.0rem;
    --font-size-700: 2.2rem; /* h5 */
    --font-size-800: 2.6rem; /* h4 */
    --font-size-900: 3.0rem; /* h3 */

    --font-size-xl1: 3.4rem; /* h2 */
    --font-size-xl2: 3.4rem; /* h1 */

    /* line-height */
    --line-height-100: 1.0000;
    --line-height-200: 1.1000;
    --line-height-300: 1.1500;
    --line-height-400: 1.2500;
    --line-height-500: 1.4500;
    --line-height-600: 1.5650;
    --line-height-700: 1.8333;
    --line-height-800: 2.0000;

    /* letter-spacing */
    --letter-spacing-100: -0.0950rem;
    --letter-spacing-200: -0.0500rem;
    --letter-spacing-300: -0.0330rem;
    --letter-spacing-400: -0.0100rem;
    --letter-spacing-500: +0.0000rem;
    --letter-spacing-700: +0.0500rem;
    --letter-spacing-800: +0.0750rem;

    /* transition */
    --trans-duration-300: 175ms;
    --trans-duration-400: 220ms;
    --trans-duration-500: 300ms;

    /* color */
    --color-root: #1D1D1B;

    --color-primary-600: #0167D9;
    --color-primary-700: #014898;
    --color-primary-800: #012D60;

    --color-secondary-600: #E53323;
    --color-secondary-700: #AB261A;
    --color-secondary-800: #60120B;

    --color-neutral-600: #8C8C8C;
    --color-neutral-700: #666666;
    --color-neutral-800: #4D4D4D;
}

@media screen and (min-width: 36em) {
    :root {
        --g-gutter: 4.5rem;
        --g-mortar: 8.0rem;
        --container-width: 66rem;

        /* font size */
        --font-size-400: 1.8rem;
        --font-size-500: 2.0rem;
        --font-size-600: 2.2rem;
        --font-size-700: 2.4rem;
        --font-size-800: 2.8rem;
        --font-size-900: 3.2rem;

        --font-size-xl1: 3.6rem;
        --font-size-xl2: 4.0rem;
    }
}

@media screen and (min-width: 64em) {
    :root {
        --g-gutter: 4.5rem;
        --g-mortar: 6rem;
        --container-width: 90rem;
    }
}
@media screen and (min-width: 90em) {
    :root {
        --g-gutter: 6rem;
        --g-mortar: 12rem;
        --container-width: 120rem;

        /* font size */
        --font-size-400: 2.0rem;
        --font-size-500: 2.2rem;
        --font-size-600: 2.4rem;
        --font-size-700: 2.7rem;
        --font-size-800: 3.2rem;
        --font-size-900: 3.6rem;

        --font-size-xl1: clamp(3.6rem, 3.750vw, 4.8rem);
        --font-size-xl2: clamp(4.0rem, 4.687vw, 6.0rem);
    }

    @supports not (font-size: clamp(4.0rem, 5vw, 6.0rem)) {
        :root {
            --font-size-xl1: 4.8rem;
            --font-size-xl2: 6.0rem;
        }
    }
}

@media screen and (min-width: 160em) {
    :root {
        --container-width: 140rem;
    }
}



html {
    overflow-y: auto;
    text-size-adjust: 100%;
    scroll-behavior: smooth;
    overflow-scrolling: touch;
    -webkit-overflow-scrolling: touch;

    font-size: 62.5%;
    background-color: #FFFFFF;
    text-rendering: optimizeSpeed;
}

body {
    font-weight: 400;
    min-height: 100vh;

    color: black;
    font-smoothing: auto;
    text-rendering: optimizeSpeed;

    font-size: var(--font-size-400);
    font-family: var(--g-font-primary);
    line-height: var(--line-height-800);
    letter-spacing: var(--letter-spacing-700);
}

main {
    grid-auto-flow: row;
}

.container {
    width: 100%;
    max-width: var(--container-width);
    margin: 0 auto;
    padding: 0;
}

.section {
    width: 100%;
    margin: 0 auto;
    padding: var(--g-mortar) var(--g-gutter);
}

@media screen and (min-width: 64em) {
    .section {
        padding: var(--g-mortar) var(--g-mortar);
    }
}
@media screen and (min-width: 64em) {
    .section {
        padding: var(--g-mortar) var(--g-mortar);
    }
}

.button {
    z-index: calc(1);
    appearance: none;
    font-weight: 700;
    overflow: hidden;

    column-gap: 1.0ch;
    position: relative;
    align-items: center;
    display: inline-flex;
    text-transform: none;
    text-decoration: none;
    justify-content: center;
    padding: 0.9065em 1.33em;

    border: none;
    color: #FFFFFF;
    font-size: 1.6rem;
    line-height: var(--line-height-100);
    letter-spacing: var(--letter-spacing-800);
    background-color: var(--color-primary-700);

    transition-timing-function: ease;
    transition-duration: var(--trans-duration-400);
    transition-property: background-color, color, border;
}

.button:focus {
    background-color: var(--color-primary-600);
    outline: 0.1rem solid var(--color-primary-800);
}

.button:hover,
.button:active {
    background-color: var(--color-primary-600);
}

/* hero */
.hero__grid {
    --container-width: 104rem;
    display: grid;
    grid-template-columns: 1fr;
}

@media screen and (min-width: 48em) {
    .hero__grid {
        align-items: center;
        justify-content: stretch;
        column-gap: var(--g-gutter);
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media screen and (min-width: 64rem) {
    .hero__grid {
        column-gap: var(--g-gutter);
    }
}

.hero__brand {
    z-index: 1;
    display: flex;
    position: relative;
    grid-column: 1 / -1;
    justify-content: center;
    margin-bottom: calc(var(--g-mortar) * -0.5);
}

.hero__brand-logo {
    height: auto;
    width: 66.66vw;
    max-width: 36rem;
}

@media screen and (min-width: 48em) {
    .hero__brand-logo {
        width: 50vw;
        max-width: 49.5rem;
    }
}

.hero__picture {
    display: block;
    position: relative;
    aspect-ratio: 1 / 1;
    background-color: var(--color-primary-700);
}

@supports not (aspect-ratio: 1 / 1) {
    .hero__picture {
        padding-bottom: 100%;
    }
}

.hero__img {
    inset: 0;
    width: 100%;
    height: 100%;
    position: absolute;
    -o-object-position: 50% 50%;
    object-position: 50% 50%;
    -o-object-fit: cover;
    object-fit: cover;
}

.hero__content {
    margin-top: 3rem;
}

@media screen and (min-width: 48rem) {
    .hero__content {
        margin-top: 0;
    }
}


/* introduction */
.intro {
    background-image: url("/static/images/jd_sawblade_full.svg");
    background-position: -12rem calc(100% + 12rem);
    -webkit-background-size: 56rem auto;
    background-size: 56rem auto;
    background-repeat: no-repeat;
    padding-top: 0;
}

.intro__grid {
    row-gap: 3rem;
    display: grid;
    justify-content: stretch;
    grid-template-columns: 1fr;
}

@media screen and (min-width: 64em) {
    .intro__grid {
        align-items: center;
        column-gap: calc(var(--g-gutter) * 1.5);
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media screen and (min-width: 90em) {
    .intro__grid {
        column-gap: calc(var(--g-gutter) * 3);
    }
}

.intro__services {
    display: grid;
    row-gap: 4rem;
    grid-auto-flow: row;
    grid-auto-rows: auto;
}

.intro__services-item {
    display: flex;
    align-items: center;
    flex-flow: nowrap row;
}

.intro__services-frame {
    display: flex;
    min-width: 2em;
    font-size: 2rem;
    grid-row: span 2;
    font-weight: 900;
    position: relative;
    aspect-ratio: 1 / 1;
    align-items: center;
    margin-right: 2.6rem;
    justify-content: center;
    color: #FFFFFF;
    line-height: var(--line-height-100);
    background-color: var(--color-primary-700);
}

@media screen and (min-width: 64em) {
    .intro__services-frame {
        min-width: 2em;
        font-size: 2rem;
        margin-right: 2.6rem;
    }
}

@media screen and (min-width: 90em) {
    .intro__services-frame {
        min-width: 2.2em;
        font-size: 2.8rem;
        margin-right: 2.4rem;
    }
}

.intro__services-label {
    font-weight: 800;
    text-transform: uppercase;
    font-size: var(--font-size-400);
    line-height: var(--line-height-700);
}

@media screen and (min-width: 64em) {
    .intro__services-label {
        font-size: var(--font-size-400);
        line-height: var(--line-height-600);
    }
}


/* about */
.about {
    padding: 0;
    color: #FFFFFF;
    display: block;
    position: relative;
}

@media screen and (min-width: 64em) {
    .about {
        padding: calc(var(--g-gutter) * 1.5) var(--g-gutter);
        background-image: linear-gradient(90deg,
        var(--color-primary-700) 0%,
        var(--color-primary-700) 50%,
        var(--color-primary-800) 50%);
    }
}

@media screen and (min-width: 90em) {
    .about {
        padding: var(--g-mortar) var(--g-mortar);
    }
}

.about__grid {
    display: grid;
    grid-template-columns: 1fr;
    justify-content: flex-start;
    max-width: 100%;
}

@media screen and (min-width: 64em) {
    .about__grid {
        column-gap: calc(var(--g-gutter) * 3);
        align-items: center;
        justify-content: space-between;
        grid-template-columns: repeat(2, minmax(0, 52rem));
        max-width: var(--container-width);
    }
}

.about__me {
    padding: calc(var(--g-gutter) * 2);
    background-color: var(--color-primary-700);
}

.about__projects {
    padding: calc(var(--g-gutter) * 2);
    background-color: var(--color-primary-800);
}

@media screen and (min-width: 48em) {
    .about__projects, .about__me {
        padding: var(--g-gutter);
    }
}

@media screen and (min-width: 64em) {
    .about__projects, .about__me  {
        padding: 0;
    }
}

/* footer */
.footer {
    text-align: center;
    word-break: break-word;
    padding-top: var(--g-mortar);
    background-position: 50% 0;
    background-repeat: no-repeat;
    background-image: url("/static/images/jd_sawblade_half.svg");
    -webkit-background-size: 56rem auto;
    background-size: 56rem auto;

}

.footer__container {
    display: flex;
    align-items: center;
    flex-direction: column;
}

.footer__container > h2 {
    max-width: 24ch;
}