@import "https://unpkg.com/open-props";
@import "https://unpkg.com/open-props/normalize.min.css";

:root {
    --font-body: "Inter", Roboto, Helvetica Neue, Arial Nova, Nimbus Sans, Arial, sans-serif;
    --font-accent: "Funnel Display", sans-serif;
    --container-width: 1200px;

    --clr-body: #EDEAE4;
    --clr-body-muted: #5f5c56;
    --clr-font: #1B1F22;
    --clr-font-dark-muted: #9E9894;
    --clr-brand: #0f9c7b;
    --clr-brand-secondary: #E7A842;
    --clr-dark: #1B1F22;
    --clr-dark-border: rgba(237,234,228,0.16);
    --clr-light-border: rgba(27,31,34,0.14);

    --bg-hatch: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100' viewBox='0 0 100 100'%3E%3Cg fill-rule='evenodd'%3E%3Cg fill='%23cfcdc8' fill-opacity='0.4'%3E%3Cpath opacity='.5' d='M96 95h4v1h-4v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9zm-1 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-9-10h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm9-10v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-9-10h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm9-10v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-9-10h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm9-10v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-9-10h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9z'/%3E%3Cpath d='M6 5V0H5v5H0v1h5v94h1V6h94V5H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E") repeat;
}

html {
    scroll-behavior: smooth;
    font-optical-sizing: auto;
}

body {
    background-color: var(--clr-body);
    color: var(--clr-font);
    font-family: var(--font-body);
    font-size: var(--font-size-fluid-1);
}

a {
    color: inherit;
    text-decoration: underline;
}

.btn {
    display: inline-block;
    padding: 14px 26px;
    font-size: 14px;
    font-weight: 600;
    border: 1px solid var(--clr-brand);
    cursor: pointer;
    &.btn-primary {
        background: var(--clr-brand);
        color: var(--clr-font);
    }
}

.site-header {
    background-color: var(--clr-dark);
    border-bottom: 1px solid var(--clr-dark-border);
}

.site-nav {
    max-width: var(--container-width);
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 0;

    & .site-nav-brand {
        display: flex;
        align-items: center;
        gap: var(--size-2);

        & .site-logo-svg {
            fill: var(--clr-body);
            width: 45px;
        }
    }

    & .site-nav-links {
        display: flex;
        align-items: center;
        gap: var(--size-3);
        & a {
            text-decoration: none;
            color: var(--clr-font-dark-muted);
            font-size: var(--font-size-1);
            border-bottom: 1px solid transparent;
            transition: color .15s ease, border-color .15s ease;
            &:hover {
                color: var(--clr-body);
                border-bottom: 1px solid var(--clr-brand);
            }
        }
    }
}

.site-logotype {
    color: var(--clr-body);
    & h1 {
        font-size: var(--font-size-3);
        font-weight: var(--font-weight-9);
    }
    & h3 {
        font-size: var(--font-size-0);
        font-weight: var(--font-weight-4);
        color: var(--clr-font-dark-muted);
    }
}

.site-hero {
    background-color: var(--clr-dark);
    color: var(--clr-body);
    overflow: hidden;
    position: relative;

    & .site-hero-bg {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        opacity: 0.5;
        filter: grayscale(25%) contrast(1.1);
    }

    & .site-hero-scrim {
        position: absolute;
        inset: 0;
        background: linear-gradient(180deg, rgba(27,31,34,0.55) 0%, rgba(27,31,34,0.8) 35%, var(--clr-dark) 100%);
    }

    & .hero-headline {
        font-family: var(--font-accent);
        line-height: var(--font-lineheight-00);
        font-size: var(--font-size-fluid-3);
        margin-bottom: var(--size-6);

        & .yr {
            color: var(--clr-brand)
        }
    }

    & .hero-sub {
        margin-bottom: var(--size-6);
    }

    & .site-hero-frame {
        border: 1px solid var(--clr-dark-border);
        padding: var(--size-fluid-4);
        position: relative;
    }

    & .site-hero-inner {
        max-width: var(--container-width);
        margin: 0 auto;
        padding: var(--size-fluid-3);
    }
}

.corner{ position:absolute; width:18px; height:18px; border-color: var(--clr-brand); }
.corner.tl{ top:-1px; left:-1px; border-top:3px solid var(--clr-brand); border-left:3px solid var(--clr-brand); }
.corner.tr{ top:-1px; right:-1px; border-top:3px solid var(--clr-brand); border-right:3px solid var(--clr-brand); }
.corner.bl{ bottom:-1px; left:-1px; border-bottom:3px solid var(--clr-brand); border-left:3px solid var(--clr-brand); }
.corner.br{ bottom:-1px; right:-1px; border-bottom:3px solid var(--clr-brand); border-right:3px solid var(--clr-brand); }


.section {
    &.section-dark {
        background-color: var(--clr-dark);
        color: var(--clr-body);
    }
    & .section-header {
        margin-bottom: var(--size-7);
        padding-top: var(--size-8);
        padding-bottom: var(--size-4);
        border-bottom: 1px solid var(--clr-light-border);
        .section-dark & {
            border-bottom: 1px solid var(--clr-dark-border);
        }
        @media (max-width: 980px) {
            & {
                padding-top: var(--size-6);
                padding-bottom: var(--size-3);
            }
        }
    }
    & .section-tag {
        font-size: 13px;
        color: var(--clr-brand-secondary);
        font-weight: 600;
        .section-dark & {
            color: var(--clr-brand);
        }
    }
    & .section-title {
        font-size: 34px;
        font-family: var(--font-accent);
    }
    & .section-content {
        max-width: var(--container-width);
        margin: 0 auto;
        @media (max-width: 980px) {
            & {
                padding: 0 var(--size-3);
            }
        }
    }
}

.services {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--size-7);
    margin-bottom: var(--size-9);

    & .service {
        border: 1px solid var(--clr-light-border);
        padding: var(--size-5);
        display: flex;
        justify-content: space-between;
        gap: var(--size-5);
        background: var(--bg-hatch) repeat;

        @media (max-width: 980px) {
            & {
                flex-direction: column;
            }
        }
    }

    & .service-gallery {
        padding: var(--size-fluid-2);
        border: 1px dashed var(--clr-light-border);
        background-color: var(--clr-body);
    }

    & .service-gallery img {
        max-width: 300px;
        width: 100%;
    }

    & .service-machines {
        list-style: none;
        padding: 0;
        margin: 0;
        display: flex;
        flex-direction: column;
        gap: var(--size-1);
        margin-top: var(--size-4);
        & li {
            border-left: 2px solid var(--clr-brand-secondary);
            color: var(--clr-body-muted);
        }
    }

    & .service-icon {
        margin-bottom: var(--size-4);
    }

    & .service-icon-svg {
        stroke: var(--clr-brand-secondary);
        height: 32px;
        width: 32px;
    }

    & .service-title {
        margin-bottom: var(--size-4);
        font-family: var(--font-accent);
    }

    & .service-description {
        font-size: var(--font-size-1);
        color: var(--clr-body-muted);
    }
}

.about-grid {
    display: grid;
    grid-template-columns: 1.1fr 0.9fr;
    gap: 72px;
    align-items: start;
    padding-bottom: var(--size-9);

    @media (max-width: 980px) {
        & {
            grid-template-columns: 1fr;
        }
    }

    & p {
        color: #C7CACC;
        font-size: 16px;
        margin: 0 0 var(--size-3);
        max-width: 60ch;
    }

    & .grant {
        padding: var(--size-4);
        border: 1px solid var(--clr-dark-border);
        display: inline-block;
        margin-bottom: var(--size-3);
        position: relative;
        & img {
            margin: 0 auto;
            display: block;
            height: 70px;
        }
    }

    & .stat-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 1px;
        background: var(--clr-dark-border);
        margin-top: 40px;

        & .stat {
            background-color: var(--clr-dark);
            padding: 26px 28px;
        }

        & .stat-num {
            font-family: 'Oswald';
            font-size: 30px;
            color: var(--brass-light);
            font-weight: 600;
        }
    }
}

.industries-label{ font-size:12.5px; color: var(--muted-2); letter-spacing:0.4px; margin-bottom:14px; margin-top:40px; }
.industry-list{ display:flex; flex-wrap:wrap; gap:10px; }
.industry-list span{ border:1px solid var(--clr-dark-border); padding:8px 16px; font-size:13.5px; color: var(--paper); }

.contact-grid {
    display: grid;
    grid-template-columns: 0.8fr 1.2fr;
    gap: var(--size-7);
    margin-bottom: var(--size-9);
    @media (max-width: 980px) {
        & {
            grid-template-columns: 1fr;
        }
    }
    & .contact-card {
        border: 1px solid var(--clr-light-border);
        padding: var(--size-5);
    }

    .map-frame {
        background: var(--bg-hatch);
        border: 1px solid var(--clr-light-border);
        padding: var(--size-3);
        overflow: hidden;
        height: 100%;
        & iframe {
            width: 100%;
            height: 100%;
            min-height: 340px;
            border: 0;
            filter: grayscale(35%) contrast(1.05);
        }
    }
}


.contact-row {
    display: flex;
    flex-direction: column;
    gap: var(--size-7);
    & .contact-item {
        & .label {
            font-size: var(--font-size-0);
            color: var(--clr-body-muted);
            letter-spacing: 0.5px;
            margin-bottom: var(--size-1);
        }
        & .value {
            font-size: var(--font-size-2);
        }
    }
}

footer {
    background: var(--clr-dark);
    color: var(--clr-body);
    padding: var(--size-7) 0;
}

.footer-bottom {
    max-width: var(--container-width);
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    font-size: var(--font-size-0);
}