/* =========================================================
   HAMMER CRAFT
   MAIN WEBSITE
   style.css
========================================================= */


/* =========================================================
   VARIABLES
========================================================= */

:root {

    --hc-bg:
        #f2eee8;

    --hc-bg-soft:
        #e9e3db;

    --hc-bg-light:
        #f8f5f0;

    --hc-surface:
        #f7f3ed;

    --hc-text:
        #171717;

    --hc-muted:
        #716b65;

    --hc-dim:
        #9a938c;

    --hc-orange:
        #d86a2b;

    --hc-orange-dark:
        #b65320;

    --hc-line:
        rgba(
            23,
            23,
            23,
            0.12
        );

    --hc-line-strong:
        rgba(
            23,
            23,
            23,
            0.24
        );

    --hc-dark-line:
        rgba(
            255,
            255,
            255,
            0.14
        );

    --hc-side:
        5vw;

    --hc-max:
        1500px;

    --header-height:
        76px;

}


/* =========================================================
   RESET
========================================================= */

* {

    box-sizing:
        border-box;

}


html {

    scroll-behavior:
        smooth;

}


body {

    margin:
        0;

    min-height:
        100vh;

    background:
        var(--hc-bg);

    color:
        var(--hc-text);

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    -webkit-font-smoothing:
        antialiased;

    text-rendering:
        optimizeLegibility;

}


img {

    display:
        block;

    max-width:
        100%;

}


a {

    color:
        inherit;

}


button,
input,
select,
textarea {

    font:
        inherit;

}


button {

    color:
        inherit;

}


/* =========================================================
   HEADER
========================================================= */

.site-header {

    position:
        fixed;

    z-index:
        1000;

    top:
        0;

    left:
        0;

    width:
        100%;

    min-height:
        var(--header-height);

    padding:
        0 20px;

    display:
        grid;

    grid-template-columns:
        auto 1fr auto;

    gap:
        28px;

    align-items:
        center;

    background:
        rgba(
            242,
            238,
            232,
            0.94
        );

    border-bottom:
        1px solid
        var(--hc-line);

    backdrop-filter:
        blur(16px);

    -webkit-backdrop-filter:
        blur(16px);

}


/* =========================================================
   HEADER BRAND
========================================================= */

.site-brand {

    display:
        flex;

    align-items:
        center;

    text-decoration:
        none;

}


.site-brand img {

    width:
        40px;

    height:
        40px;

    object-fit:
        contain;

}


/* =========================================================
   HEADER NAVIGATION
========================================================= */

.site-nav {

    display:
        flex;

    justify-content:
        center;

    align-items:
        center;

    gap:
        23px;

}


.site-nav a {

    color:
        var(--hc-muted);

    font-size:
        7px;

    font-weight:
        700;

    letter-spacing:
        0.12em;

    text-decoration:
        none;

    white-space:
        nowrap;

    transition:
        color
        150ms ease;

}


.site-nav a:hover {

    color:
        var(--hc-orange);

}


/* =========================================================
   HEADER ACTIONS
========================================================= */

.site-header-actions {

    display:
        flex;

    align-items:
        center;

    gap:
        8px;

}


.header-account-link,
.header-order-link {

    min-height:
        38px;

    padding:
        0 15px;

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    font-size:
        7px;

    font-weight:
        700;

    letter-spacing:
        0.12em;

    text-decoration:
        none;

    transition:
        background
        150ms ease,
        color
        150ms ease,
        border-color
        150ms ease;

}


.header-account-link {

    border:
        1px solid
        var(--hc-line-strong);

    background:
        transparent;

}


.header-account-link:hover {

    background:
        var(--hc-text);

    color:
        var(--hc-bg);

}


.header-order-link {

    border:
        1px solid
        var(--hc-orange);

    background:
        var(--hc-orange);

    color:
        #ffffff;

}


.header-order-link:hover {

    border-color:
        var(--hc-text);

    background:
        var(--hc-text);

}


/* =========================================================
   COMMON TYPOGRAPHY
========================================================= */

.eyebrow {

    color:
        var(--hc-orange);

    font-size:
        8px;

    font-weight:
        700;

    letter-spacing:
        0.14em;

    text-transform:
        uppercase;

}


.primary-button {

    min-height:
        50px;

    padding:
        0 21px;

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    border:
        1px solid
        var(--hc-orange);

    background:
        var(--hc-orange);

    color:
        #ffffff;

    font-size:
        8px;

    font-weight:
        700;

    letter-spacing:
        0.12em;

    text-decoration:
        none;

    transition:
        background
        150ms ease,
        border-color
        150ms ease;

}


.primary-button:hover {

    border-color:
        var(--hc-text);

    background:
        var(--hc-text);

}


.text-link {

    color:
        var(--hc-text);

    font-size:
        8px;

    font-weight:
        700;

    letter-spacing:
        0.10em;

    text-decoration:
        none;

    transition:
        color
        150ms ease;

}


.text-link:hover {

    color:
        var(--hc-orange);

}


.section-link {

    display:
        inline-block;

    margin-top:
        14px;

}


/* =========================================================
   HERO
========================================================= */

.home-hero {

    position:
        relative;

    min-height:
        100vh;

    padding:
        calc(
            var(--header-height) + 75px
        )
        var(--hc-side)
        28px;

    display:
        grid;

    grid-template-columns:
        minmax(0, 1.05fr)
        minmax(380px, 0.72fr);

    grid-template-rows:
        1fr auto;

    column-gap:
        clamp(
            60px,
            8vw,
            130px
        );

    align-items:
        center;

}


/* =========================================================
   HERO CONTENT
========================================================= */

.hero-content {

    width:
        min(
            100%,
            730px
        );

    justify-self:
        center;

    grid-column:
        1;

    grid-row:
        1;

}


.hero-content h1 {

    margin:
        17px 0 0;

    font-size:
        clamp(
            68px,
            7.4vw,
            126px
        );

    line-height:
        0.83;

    font-weight:
        500;

    letter-spacing:
        -0.067em;

}


.hero-content h1 em {

    display:
        block;

    color:
        var(--hc-orange);

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-style:
        italic;

    font-weight:
        400;

}


.hero-description {

    max-width:
        660px;

    margin:
        28px 0 0;

    color:
        var(--hc-muted);

    font-size:
        13px;

    line-height:
        1.75;

}


.hero-origin {

    max-width:
        650px;

    margin:
        18px 0 0;

    color:
        var(--hc-muted);

    font-size:
        11px;

    line-height:
        1.7;

}


.hero-actions {

    margin-top:
        35px;

    display:
        flex;

    align-items:
        center;

    flex-wrap:
        wrap;

    gap:
        24px;

}


/* =========================================================
   HERO LOGO

   The negative X value moves only the large hero logo left.
========================================================= */

.hero-logo {

    width:
        min(
            100%,
            610px
        );

    justify-self:
        center;

    grid-column:
        2;

    grid-row:
        1;

    transform:
        translateX(-55px);

}


.hero-logo img {

    width:
        100%;

    height:
        auto;

    object-fit:
        contain;

}


/* =========================================================
   HERO FOOTER
========================================================= */

.hero-footer {

    grid-column:
        1 / -1;

    grid-row:
        2;

    width:
        100%;

    padding-top:
        18px;

    display:
        grid;

    grid-template-columns:
        repeat(3, 1fr);

    border-top:
        1px solid
        var(--hc-line);

}


.hero-footer span {

    color:
        var(--hc-muted);

    font-size:
        7px;

    font-weight:
        700;

    letter-spacing:
        0.11em;

}


.hero-footer span:nth-child(2) {

    text-align:
        center;

}


.hero-footer span:last-child {

    text-align:
        right;

}


/* =========================================================
   INTRO
========================================================= */

.home-intro {

    width:
        min(
            calc(100% - 10vw),
            var(--hc-max)
        );

    margin:
        0 auto;

    padding:
        125px 0;

    border-top:
        1px solid
        var(--hc-line);

}


.home-intro-grid {

    margin-top:
        18px;

    display:
        grid;

    grid-template-columns:
        minmax(0, 1.05fr)
        minmax(320px, 0.7fr);

    gap:
        90px;

    align-items:
        start;

}


.home-intro-grid h2 {

    margin:
        0;

    font-size:
        clamp(
            52px,
            6vw,
            94px
        );

    line-height:
        0.92;

    font-weight:
        500;

    letter-spacing:
        -0.055em;

}


.home-intro-grid h2 em {

    display:
        block;

    color:
        var(--hc-orange);

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-style:
        italic;

    font-weight:
        400;

}


.home-intro-copy {

    padding-top:
        12px;

}


.home-intro-copy p {

    margin:
        0 0 18px;

    color:
        var(--hc-muted);

    font-size:
        13px;

    line-height:
        1.8;

}


/* =========================================================
   PROCESS SECTION
========================================================= */

.process-section {

    width:
        min(
            calc(100% - 10vw),
            var(--hc-max)
        );

    margin:
        0 auto;

    padding:
        125px 0;

    border-top:
        1px solid
        var(--hc-line);

}


.section-heading {

    margin-bottom:
        55px;

}


.section-heading h2 {

    margin:
        13px 0 0;

    font-size:
        clamp(
            50px,
            5.8vw,
            86px
        );

    line-height:
        0.95;

    font-weight:
        500;

    letter-spacing:
        -0.05em;

}


/* =========================================================
   PROCESS GRID
========================================================= */

.process-grid {

    display:
        grid;

    grid-template-columns:
        repeat(
            4,
            minmax(0, 1fr)
        );

    border-top:
        1px solid
        var(--hc-line);

    border-bottom:
        1px solid
        var(--hc-line);

}


.process-grid article {

    min-height:
        290px;

    padding:
        25px;

    display:
        flex;

    flex-direction:
        column;

    border-right:
        1px solid
        var(--hc-line);

}


.process-grid article:last-child {

    border-right:
        0;

}


.process-grid article > span {

    color:
        var(--hc-orange);

    font-size:
        9px;

    font-weight:
        700;

    letter-spacing:
        0.10em;

}


.process-grid h3 {

    margin:
        auto 0 12px;

    font-size:
        27px;

    line-height:
        1;

    font-weight:
        500;

    letter-spacing:
        -0.035em;

}


.process-grid p {

    margin:
        0;

    color:
        var(--hc-muted);

    font-size:
        12px;

    line-height:
        1.7;

}


/* =========================================================
   DARK TECHNOLOGY SECTION
========================================================= */

.technology-section {

    width:
        100%;

    padding:
        125px var(--hc-side);

    background:
        var(--hc-text);

    color:
        var(--hc-bg);

}


.technology-inner {

    width:
        min(
            100%,
            var(--hc-max)
        );

    margin:
        0 auto;

}


.technology-heading {

    max-width:
        880px;

}


.technology-heading h2 {

    margin:
        18px 0 0;

    max-width:
        900px;

    font-size:
        clamp(
            58px,
            7vw,
            105px
        );

    line-height:
        0.9;

    font-weight:
        500;

    letter-spacing:
        -0.06em;

}


.technology-heading p {

    max-width:
        650px;

    margin:
        27px 0 0;

    color:
        #aaa49e;

    font-size:
        13px;

    line-height:
        1.8;

}


/* =========================================================
   TECHNOLOGY GRID
========================================================= */

.technology-grid {

    margin-top:
        75px;

    display:
        grid;

    grid-template-columns:
        repeat(
            4,
            minmax(0, 1fr)
        );

    border-top:
        1px solid
        var(--hc-dark-line);

    border-bottom:
        1px solid
        var(--hc-dark-line);

}


.technology-grid article {

    min-height:
        320px;

    padding:
        26px;

    display:
        flex;

    flex-direction:
        column;

    border-right:
        1px solid
        var(--hc-dark-line);

}


.technology-grid article:last-child {

    border-right:
        0;

}


.technology-grid article > span {

    color:
        var(--hc-orange);

    font-size:
        8px;

    font-weight:
        700;

    letter-spacing:
        0.11em;

}


.technology-grid h3 {

    margin:
        auto 0 12px;

    font-size:
        29px;

    line-height:
        1;

    font-weight:
        500;

    letter-spacing:
        -0.035em;

}


.technology-grid p {

    margin:
        0;

    color:
        #aaa49e;

    font-size:
        12px;

    line-height:
        1.7;

}


/* =========================================================
   ABOUT SECTIONS
========================================================= */

.about-section {

    width:
        min(
            calc(100% - 10vw),
            var(--hc-max)
        );

    margin:
        0 auto;

    padding:
        125px 0;

    display:
        grid;

    grid-template-columns:
        minmax(0, 1fr)
        minmax(320px, 0.7fr);

    gap:
        90px;

    border-top:
        1px solid
        var(--hc-line);

}


.about-section h2 {

    margin:
        18px 0 0;

    font-size:
        clamp(
            48px,
            5.6vw,
            84px
        );

    line-height:
        0.95;

    font-weight:
        500;

    letter-spacing:
        -0.055em;

}


.about-section > div:last-child {

    padding-top:
        23px;

}


.about-section p {

    margin:
        0 0 18px;

    color:
        var(--hc-muted);

    font-size:
        13px;

    line-height:
        1.8;

}


/* =========================================================
   MEASUREMENT SECTION
========================================================= */

.measurement-home-section {

    background:
        transparent;

}


/* =========================================================
   PRODUCT HOME CTA
========================================================= */

.product-home-section {

    width:
        100%;

    padding:
        125px var(--hc-side);

    background:
        var(--hc-bg-soft);

}


.product-home-inner {

    width:
        min(
            100%,
            var(--hc-max)
        );

    margin:
        0 auto;

    display:
        grid;

    grid-template-columns:
        minmax(0, 1fr)
        minmax(300px, 0.55fr);

    gap:
        100px;

    align-items:
        end;

}


.product-home-inner h2 {

    margin:
        18px 0 0;

    font-size:
        clamp(
            52px,
            6vw,
            92px
        );

    line-height:
        0.91;

    font-weight:
        500;

    letter-spacing:
        -0.055em;

}


.product-home-inner h2 em {

    display:
        block;

    color:
        var(--hc-orange);

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-style:
        italic;

    font-weight:
        400;

}


.product-home-copy p {

    margin:
        0 0 28px;

    color:
        var(--hc-muted);

    font-size:
        13px;

    line-height:
        1.8;

}


/* =========================================================
   BRISTOL
========================================================= */

.bristol-section {

    width:
        min(
            calc(100% - 10vw),
            var(--hc-max)
        );

    margin:
        0 auto;

    padding:
        125px 0;

    display:
        grid;

    grid-template-columns:
        minmax(0, 1fr)
        minmax(320px, 0.7fr);

    gap:
        100px;

    border-top:
        1px solid
        var(--hc-line);

}


.bristol-section h2 {

    margin:
        18px 0 0;

    font-size:
        clamp(
            52px,
            6vw,
            92px
        );

    line-height:
        0.91;

    font-weight:
        500;

    letter-spacing:
        -0.055em;

}


.bristol-section h2 em {

    display:
        block;

    color:
        var(--hc-orange);

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-style:
        italic;

    font-weight:
        400;

}


.bristol-copy {

    padding-top:
        24px;

}


.bristol-copy p {

    margin:
        0 0 18px;

    color:
        var(--hc-muted);

    font-size:
        13px;

    line-height:
        1.8;

}


.bristol-statement {

    margin-top:
        30px
        !important;

    color:
        var(--hc-text)
        !important;

    font-size:
        15px
        !important;

    font-weight:
        500;

}


.bristol-location {

    margin-top:
        50px;

    padding-top:
        20px;

    display:
        flex;

    flex-wrap:
        wrap;

    gap:
        22px;

    border-top:
        1px solid
        var(--hc-line);

}


.bristol-location span {

    color:
        var(--hc-orange);

    font-size:
        8px;

    font-weight:
        700;

    letter-spacing:
        0.11em;

}


/* =========================================================
   CONTACT / INSTAGRAM
========================================================= */

.contact-section {

    width:
        100%;

    padding:
        130px var(--hc-side);

    background:
        var(--hc-text);

    color:
        var(--hc-bg);

}


.contact-intro {

    width:
        min(
            100%,
            var(--hc-max)
        );

    margin:
        0 auto;

    display:
        grid;

    grid-template-columns:
        minmax(0, 1.15fr)
        minmax(300px, 0.65fr);

    gap:
        clamp(
            50px,
            8vw,
            130px
        );

    align-items:
        end;

}


.contact-intro h2 {

    max-width:
        880px;

    margin:
        18px 0 0;

    font-size:
        clamp(
            58px,
            6.5vw,
            105px
        );

    line-height:
        0.9;

    font-weight:
        500;

    letter-spacing:
        -0.06em;

}


.contact-intro h2 em {

    display:
        block;

    color:
        var(--hc-orange);

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-style:
        italic;

    font-weight:
        400;

}


.contact-intro-copy {

    padding-bottom:
        5px;

}


.contact-intro-copy p {

    margin:
        0 0 18px;

    color:
        #aaa49e;

    font-size:
        13px;

    line-height:
        1.8;

}


/* =========================================================
   CONTACT GRID
========================================================= */

.contact-grid {

    width:
        min(
            100%,
            var(--hc-max)
        );

    margin:
        80px auto 0;

    display:
        grid;

    grid-template-columns:
        repeat(
            3,
            minmax(0, 1fr)
        );

    border-top:
        1px solid
        var(--hc-dark-line);

    border-bottom:
        1px solid
        var(--hc-dark-line);

}


.contact-card {

    min-height:
        390px;

    padding:
        30px;

    display:
        flex;

    flex-direction:
        column;

    justify-content:
        space-between;

    border-right:
        1px solid
        var(--hc-dark-line);

}


.contact-card:last-child {

    border-right:
        0;

}


.contact-number {

    color:
        var(--hc-orange);

    font-size:
        9px;

    font-weight:
        700;

    letter-spacing:
        0.12em;

}


.contact-label {

    display:
        block;

    margin-bottom:
        12px;

    color:
        var(--hc-orange);

    font-size:
        8px;

    font-weight:
        700;

    letter-spacing:
        0.13em;

}


.contact-card h3 {

    margin:
        0 0 18px;

    font-size:
        clamp(
            25px,
            2.1vw,
            34px
        );

    line-height:
        1;

    font-weight:
        500;

    letter-spacing:
        -0.04em;

}


.contact-card p {

    max-width:
        390px;

    margin:
        0;

    color:
        #aaa49e;

    font-size:
        12px;

    line-height:
        1.75;

}


.contact-action {

    display:
        inline-block;

    width:
        fit-content;

    margin-top:
        30px;

    padding-bottom:
        5px;

    color:
        var(--hc-bg);

    border-bottom:
        1px solid
        rgba(
            255,
            255,
            255,
            0.35
        );

    font-size:
        8px;

    font-weight:
        700;

    letter-spacing:
        0.12em;

    text-decoration:
        none;

    transition:
        color
        150ms ease,
        border-color
        150ms ease;

}


.contact-action:hover {

    color:
        var(--hc-orange);

    border-bottom-color:
        var(--hc-orange);

}


/* =========================================================
   FOOTER
========================================================= */

.site-footer {

    min-height:
        230px;

    padding:
        45px var(--hc-side);

    display:
        grid;

    grid-template-columns:
        auto 1fr auto;

    gap:
        45px;

    align-items:
        end;

    background:
        #101010;

    color:
        var(--hc-bg);

    border-top:
        1px solid
        rgba(
            255,
            255,
            255,
            0.10
        );

}


.footer-logo img {

    width:
        66px;

    height:
        66px;

    object-fit:
        contain;

}


.footer-origin {

    display:
        flex;

    flex-direction:
        column;

    gap:
        7px;

}


.footer-origin span {

    color:
        #aaa49e;

    font-size:
        8px;

    font-weight:
        700;

    letter-spacing:
        0.11em;

}


.footer-links {

    display:
        flex;

    flex-wrap:
        wrap;

    justify-content:
        flex-end;

    gap:
        20px;

}


.footer-links a {

    color:
        #aaa49e;

    font-size:
        8px;

    font-weight:
        700;

    letter-spacing:
        0.10em;

    text-decoration:
        none;

    transition:
        color
        150ms ease;

}


.footer-links a:hover {

    color:
        var(--hc-orange);

}


/* =========================================================
   ANCHOR OFFSET
========================================================= */

#technology,
#customTuning,
#digitalFit,
#process,
#bristol,
#contact {

    scroll-margin-top:
        95px;

}


/* =========================================================
   RESPONSIVE — 1200
========================================================= */

@media
(max-width: 1200px) {

    .site-nav {

        gap:
            14px;

    }


    .site-nav a {

        font-size:
            6px;

    }


    .home-hero {

        grid-template-columns:
            minmax(0, 1fr)
            minmax(330px, 0.68fr);

        column-gap:
            55px;

    }


    .hero-logo {

        transform:
            translateX(-30px);

    }


    .process-grid,
    .technology-grid {

        grid-template-columns:
            repeat(
                2,
                1fr
            );

    }


    .process-grid article:nth-child(2),
    .technology-grid article:nth-child(2) {

        border-right:
            0;

    }


    .process-grid article:nth-child(-n+2),
    .technology-grid article:nth-child(-n+2) {

        border-bottom:
            1px solid
            var(--hc-line);

    }


    .technology-grid article:nth-child(-n+2) {

        border-bottom-color:
            var(--hc-dark-line);

    }

}


/* =========================================================
   RESPONSIVE — 950
========================================================= */

@media
(max-width: 950px) {

    .site-header {

        grid-template-columns:
            auto 1fr;

    }


    .site-nav {

        display:
            none;

    }


    .site-header-actions {

        justify-content:
            flex-end;

    }


    .home-hero {

        grid-template-columns:
            1fr;

        grid-template-rows:
            auto auto auto;

        gap:
            55px;

        padding-top:
            calc(
                var(--header-height)
                +
                80px
            );

    }


    .hero-content {

        width:
            100%;

        max-width:
            760px;

        grid-column:
            1;

        grid-row:
            1;

        justify-self:
            start;

    }


    .hero-logo {

        width:
            min(
                75vw,
                570px
            );

        grid-column:
            1;

        grid-row:
            2;

        justify-self:
            center;

        transform:
            translateX(-20px);

    }


    .hero-footer {

        grid-column:
            1;

        grid-row:
            3;

    }


    .home-intro-grid,
    .about-section,
    .product-home-inner,
    .bristol-section,
    .contact-intro {

        grid-template-columns:
            1fr;

        gap:
            42px;

    }


    .contact-grid {

        grid-template-columns:
            1fr;

        margin-top:
            55px;

    }


    .contact-card {

        min-height:
            300px;

        border-right:
            0;

        border-bottom:
            1px solid
            var(--hc-dark-line);

    }


    .contact-card:last-child {

        border-bottom:
            0;

    }

}


/* =========================================================
   RESPONSIVE — 650
========================================================= */

@media
(max-width: 650px) {

    :root {

        --hc-side:
            20px;

        --header-height:
            68px;

    }


    .site-header {

        min-height:
            var(--header-height);

        padding:
            0 15px;

    }


    .site-brand img {

        width:
            38px;

        height:
            38px;

    }


    .header-order-link {

        display:
            none;

    }


    .header-account-link {

        min-height:
            36px;

        padding:
            0 13px;

    }


    .home-hero {

        min-height:
            auto;

        padding-top:
            115px;

        padding-bottom:
            30px;

    }


    .hero-content h1 {

        font-size:
            clamp(
                58px,
                18vw,
                88px
            );

    }


    .hero-description {

        font-size:
            12px;

    }


    .hero-actions {

        align-items:
            flex-start;

        flex-direction:
            column;

        gap:
            18px;

    }


    .hero-actions
    .primary-button {

        width:
            100%;

    }


    .hero-logo {

        width:
            min(
                90vw,
                500px
            );

        transform:
            none;

    }


    .hero-footer {

        margin-top:
            15px;

        grid-template-columns:
            1fr;

        gap:
            8px;

    }


    .hero-footer span,
    .hero-footer span:nth-child(2),
    .hero-footer span:last-child {

        text-align:
            left;

    }


    .home-intro,
    .process-section,
    .about-section,
    .bristol-section {

        width:
            calc(
                100% - 40px
            );

        padding:
            85px 0;

    }


    .technology-section,
    .product-home-section {

        padding:
            85px 20px;

    }


    .process-grid,
    .technology-grid {

        grid-template-columns:
            1fr;

    }


    .process-grid article,
    .technology-grid article {

        min-height:
            250px;

        border-right:
            0;

        border-bottom:
            1px solid
            var(--hc-line);

    }


    .technology-grid article {

        border-bottom-color:
            var(--hc-dark-line);

    }


    .process-grid article:last-child,
    .technology-grid article:last-child {

        border-bottom:
            0;

    }


    .contact-section {

        padding:
            85px 20px;

    }


    .contact-intro h2 {

        font-size:
            clamp(
                52px,
                16vw,
                78px
            );

    }


    .contact-card {

        padding:
            26px 0;

    }


    .site-footer {

        grid-template-columns:
            1fr;

        align-items:
            start;

        gap:
            30px;

        padding:
            45px 20px;

    }


    .footer-links {

        justify-content:
            flex-start;

    }

}


/* =========================================================
   VERY SMALL SCREENS
========================================================= */

@media
(max-width: 420px) {

    .hero-content h1 {

        font-size:
            16vw;

    }


    .home-intro-grid h2,
    .about-section h2,
    .bristol-section h2,
    .product-home-inner h2 {

        font-size:
            14vw;

    }


    .technology-heading h2,
    .contact-intro h2 {

        font-size:
            15vw;

    }

}


/* =========================================================
   REDUCED MOTION
========================================================= */

@media
(prefers-reduced-motion: reduce) {

    * {

        scroll-behavior:
            auto
            !important;

        transition:
            none
            !important;

    }

}