:root {

    --green: #416B4A;
    --deep-green: #174C32;
    --dark-green: #103A27;

    --cream: #F5F4EF;
    --light-green: #E7EEE7;

    --white: #FFFFFF;

    --text: #1D241F;
    --muted: #727A74;

    --border: rgba(29, 36, 31, .14);

    --container: 1440px;

    --serif:
        "Cormorant Garamond",
        Georgia,
        serif;

    --sans:
        Inter,
        Arial,
        Helvetica,
        sans-serif;
}


* {
    box-sizing: border-box;
}


html {
    scroll-behavior: smooth;
}


body {

    margin: 0;

    background: var(--cream);

    color: var(--text);

    font-family: var(--sans);

    font-size: 15px;

    line-height: 1.6;
}


img {

    display: block;

    width: 100%;

    height: 100%;

    object-fit: cover;
}


a {

    color: inherit;

    text-decoration: none;
}


.container {

    width: min(
        calc(100% - 80px),
        var(--container)
    );

    margin: auto;
}


.section {

    padding: 140px 0;
}


.eyebrow {

    font-size: 10px;

    letter-spacing: .18em;

    font-weight: 600;

    color: var(--green);
}


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

.site-header {

    position: absolute;

    z-index: 20;

    top: 0;

    left: 0;

    width: 100%;

    color: var(--white);
}


.header-inner {

    height: 90px;

    display: flex;

    align-items: center;

    justify-content: space-between;
}


.brand img {

    width: 300px;

    height: auto;
}


.main-nav {

    display: flex;

    gap: 34px;

    margin-left: auto;

    margin-right: 50px;
}


.main-nav a {

    font-size: 12px;

    transition: opacity .25s ease;
}


.main-nav a:hover {

    opacity: .6;
}


.header-contact {

    border: 1px solid rgba(255,255,255,.6);

    padding: 10px 20px;

    font-size: 11px;

    letter-spacing: .08em;
}


.nav-toggle {

    display: none !important;

    background: none;

    border: 0;

    padding: 8px;

    cursor: pointer;

    align-items: unset;
    gap: unset;
}


.nav-toggle span {

    display: block;

    width: 24px;

    height: 2px;

    background: white;

    margin: 5px 0;
}


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

.hero {

    position: relative;

    min-height: 850px;

    color: white;

    overflow: hidden;
}


.hero-background {

    position: absolute;

    inset: 0;
}


.hero-background img {

    object-position: center;
}


.hero-overlay {

    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            90deg,
            rgba(10,42,28,.78),
            rgba(10,42,28,.20)
        );
}


.hero-inner {

    position: relative;

    min-height: 850px;

    display: flex;

    align-items: center;
}


.hero-content {

    max-width: 760px;

    padding-top: 70px;
}


.hero .eyebrow {

    color: rgba(255,255,255,.75);

    margin-bottom: 25px;
}


.hero h1 {

    margin: 0;

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

    font-weight: 300;

    line-height: .98;

    letter-spacing: -.045em;
}


.hero h1 em {

    font-family: var(--serif);

    font-weight: 400;
}


.hero p {

    max-width: 460px;

    margin: 35px 0;

    font-size: 17px;

    color: rgba(255,255,255,.78);
}


.hero-buttons {

    display: flex;

    align-items: center;

    gap: 28px;
}


.button {

    display: inline-flex;

    align-items: center;

    gap: 22px;

    padding: 16px 25px;

    font-size: 11px;

    letter-spacing: .08em;

    transition:
        transform .25s ease,
        background .25s ease;
}


.button:hover {

    transform: translateY(-2px);
}


.button-primary {

    background: white;

    color: var(--deep-green);
}


.button-outline {

    border: 1px solid var(--green);

    color: var(--green);
}


.button-text {

    padding-left: 0;

    color: white;
}


.hero-scroll {

    position: absolute;

    right: 0;

    bottom: 45px;

    display: flex;

    align-items: center;

    gap: 15px;

    font-size: 9px;

    letter-spacing: .15em;

    opacity: .65;
}


.scroll-line {

    width: 60px;

    height: 1px;

    background: white;
}


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

.intro {

    background: var(--cream);
}


.intro-grid {

    display: grid;

    grid-template-columns: 25% 75%;
}


.section-number {

    display: flex;

    flex-direction: column;

    gap: 8px;

    font-size: 11px;

    color: var(--green);
}


.section-number span {

    font-size: 9px;

    letter-spacing: .15em;

    color: var(--muted);
}


.intro-content {

    display: grid;

    grid-template-columns: 55% 45%;

    gap: 50px;
}


.intro h2 {

    margin: 0;

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

    font-weight: 300;

    line-height: .9;

    letter-spacing: -.045em;
}


.intro h2 span {

    font-family: var(--serif);
}


.large-copy {

    font-size: 23px;

    line-height: 1.35;
}


.intro-copy p:not(.large-copy) {

    color: var(--muted);

    max-width: 430px;
}


.arrow-link {

    display: inline-flex;

    align-items: center;

    gap: 30px;

    margin-top: 30px;

    padding-bottom: 8px;

    border-bottom: 1px solid var(--text);

    font-size: 11px;

    letter-spacing: .08em;
}


/* =====================================================
   MATERIALS
===================================================== */

.materials {

    background: var(--white);
}


.section-heading {

    display: grid;

    grid-template-columns: 1fr 380px;

    align-items: end;

    gap: 60px;

    margin-bottom: 60px;
}


.section-heading h2,
.featured-heading h2 {

    margin: 12px 0 0;

    font-size: clamp(45px, 5vw, 76px);

    font-weight: 300;

    line-height: .95;

    letter-spacing: -.04em;
}


.section-heading h2 em,
.featured-heading h2 em {

    font-family: var(--serif);

    font-weight: 400;
}


.section-heading > p {

    color: var(--muted);

    margin: 0;
}


.material-grid {

    display: grid;

    grid-template-columns:
        1.4fr 1fr 1fr;

    grid-template-rows:
        380px 380px;

    gap: 14px;
}


.material-card {

    position: relative;

    overflow: hidden;

    color: white;
}


.material-card-large {

    grid-row: span 2;
}


.material-image {

    position: absolute;

    inset: 0;
}


.material-image::after {

    content: "";

    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            transparent 45%,
            rgba(0,0,0,.6)
        );
}


.material-image img {

    transition: transform .7s ease;
}


.material-card:hover img {

    transform: scale(1.04);
}


.material-info {

    position: absolute;

    z-index: 2;

    left: 28px;

    right: 28px;

    bottom: 25px;

    display: grid;

    grid-template-columns: 40px 1fr 30px;

    align-items: end;
}


.material-info span {

    font-size: 10px;

    opacity: .7;
}


.material-info h3 {

    margin: 0;

    font-size: 28px;

    font-weight: 400;
}


.material-info strong {

    font-size: 20px;

    font-weight: 300;
}


/* =====================================================
   FEATURED
===================================================== */

.featured {

    background: var(--cream);
}


.featured-heading {

    display: flex;

    justify-content: space-between;

    align-items: end;

    margin-bottom: 60px;
}


.product-grid {

    display: grid;

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

    gap: 25px;
}


.product-image {

    position: relative;

    aspect-ratio: 1 / 1.08;

    overflow: hidden;
}


.product-image img {

    transition: transform .6s ease;
}


.product-card:hover .product-image img {

    transform: scale(1.04);
}


.product-number {

    position: absolute;

    top: 18px;

    left: 18px;

    width: 36px;

    height: 36px;

    display: grid;

    place-items: center;

    background: white;

    font-size: 9px;
}


.product-info {

    padding-top: 22px;
}


.product-category {

    color: var(--green);

    font-size: 9px;

    letter-spacing: .15em;
}


.product-info h3 {

    margin: 7px 0;

    font-size: 23px;

    font-weight: 400;
}


.product-info p {

    margin: 0;

    color: var(--muted);

    font-size: 12px;
}


/* =====================================================
   SUSTAINABILITY
===================================================== */

.sustainability {

    background: var(--light-green);
}


.sustainability-grid {

    display: grid;

    grid-template-columns:
        1fr 1fr;

    gap: 100px;

    align-items: center;
}


.sustainability-image {

    position: relative;

    aspect-ratio: 4 / 5;
}


.image-caption {

    position: absolute;

    left: 20px;

    bottom: 20px;

    color: white;

    font-size: 9px;

    letter-spacing: .15em;
}


.sustainability-content h2 {

    margin: 18px 0 30px;

    font-size: clamp(46px, 5vw, 75px);

    font-weight: 300;

    line-height: .95;

    letter-spacing: -.04em;
}


.sustainability-content h2 em {

    font-family: var(--serif);
}


.sustainability-content > p {

    color: var(--muted);

    max-width: 500px;
}


.sustainability-list {

    margin: 50px 0;
}


.sustainability-item {

    display: grid;

    grid-template-columns: 45px 1fr;

    padding: 22px 0;

    border-top: 1px solid var(--border);
}


.sustainability-item:last-child {

    border-bottom: 1px solid var(--border);
}


.sustainability-item > span {

    font-size: 10px;

    color: var(--green);
}


.sustainability-item h3 {

    margin: 0;

    font-size: 16px;

    font-weight: 500;
}


.sustainability-item p {

    margin: 6px 0 0;

    color: var(--muted);

    font-size: 12px;
}


/* =====================================================
   TEXTILE STORY
===================================================== */

.textile-story {

    background: var(--white);

    overflow: hidden;
}


.textile-heading {

    text-align: center;

    margin-bottom: 100px;
}


.textile-heading h2 {

    margin: 15px 0 0;

    font-size: clamp(55px, 7vw, 100px);

    font-weight: 300;

    line-height: .9;

    letter-spacing: -.05em;
}


.textile-heading h2 em {

    font-family: var(--serif);
}


.material-process {

    position: relative;

    display: grid;

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

    gap: 20px;
}


.process-line {

    position: absolute;

    top: 32px;

    left: 10%;

    right: 10%;

    height: 1px;

    background: var(--border);
}


.process-item {

    position: relative;

    text-align: center;
}


.process-item > span {

    display: block;

    margin-bottom: 22px;

    font-size: 9px;

    color: var(--green);
}


.process-symbol {

    width: 64px;

    height: 64px;

    margin: auto;

    display: grid;

    place-items: center;

    background: var(--cream);

    border-radius: 50%;

    position: relative;

    font-size: 18px;

    color: var(--green);
}


.process-item h3 {

    margin: 22px 0 3px;

    font-size: 18px;

    font-weight: 400;
}


.process-item p {

    margin: 0;

    color: var(--muted);

    font-size: 11px;
}


/* =====================================================
   APPLICATIONS
===================================================== */

.applications {

    background: var(--cream);
}


.application-grid {

    display: grid;

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

    gap: 14px;
}


.application-card {

    position: relative;

    aspect-ratio: 3 / 4;

    overflow: hidden;

    color: white;
}


.application-card::after {

    content: "";

    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            transparent 50%,
            rgba(0,0,0,.65)
        );
}


.application-card img {

    transition: transform .6s ease;
}


.application-card:hover img {

    transform: scale(1.05);
}


.application-card > div {

    position: absolute;

    z-index: 2;

    left: 22px;

    right: 22px;

    bottom: 22px;

    display: grid;

    grid-template-columns:
        30px 1fr 25px;

    align-items: end;
}


.application-card span {

    font-size: 9px;

    opacity: .7;
}


.application-card h3 {

    margin: 0;

    font-size: 22px;

    font-weight: 400;
}


/* =====================================================
   CUSTOM
===================================================== */

.custom-section {

    position: relative;

    background: var(--deep-green);

    color: white;

    padding: 150px 0;

    overflow: hidden;
}


.custom-pattern {

    position: absolute;

    width: 600px;

    height: 600px;

    right: -200px;

    top: -200px;

    border: 1px solid rgba(255,255,255,.08);

    border-radius: 50%;
}


.custom-inner {

    display: grid;

    grid-template-columns:
        1.3fr .7fr;

    gap: 100px;

    align-items: end;
}


.custom-section .eyebrow {

    color: rgba(255,255,255,.55);
}


.custom-section h2 {

    margin: 18px 0 0;

    max-width: 800px;

    font-size: clamp(55px, 7vw, 100px);

    font-weight: 300;

    line-height: .9;

    letter-spacing: -.05em;
}


.custom-section h2 em {

    font-family: var(--serif);
}


.custom-content p {

    color: rgba(255,255,255,.65);

    font-size: 18px;

    margin-top: 0;
}


.custom-buttons {

    display: flex;

    flex-direction: column;

    align-items: flex-start;

    gap: 15px;

    margin-top: 35px;
}


.button-light {

    background: white;

    color: var(--deep-green);
}


.button-light-outline {

    border: 1px solid rgba(255,255,255,.4);

    color: white;
}


/* =====================================================
   JOURNAL
===================================================== */

.journal {

    background: var(--white);
}


.journal-grid {

    display: grid;

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

    gap: 25px;
}


.journal-image {

    aspect-ratio: 1.2 / 1;

    overflow: hidden;
}


.journal-image img {

    transition: transform .6s ease;
}


.journal-card:hover img {

    transform: scale(1.04);
}


.journal-meta {

    display: flex;

    justify-content: space-between;

    margin-top: 20px;

    color: var(--green);

    font-size: 8px;

    letter-spacing: .13em;
}


.journal-card h3 {

    max-width: 380px;

    margin: 12px 0;

    font-size: 24px;

    line-height: 1.2;

    font-weight: 400;
}


.journal-arrow {

    color: var(--green);
}


/* =====================================================
   FINAL CTA
===================================================== */

.final-cta {

    background: var(--cream);

    padding: 160px 0;
}


.final-cta-inner {

    text-align: center;
}


.final-cta h2 {

    margin: 20px 0 45px;

    font-size: clamp(60px, 8vw, 120px);

    font-weight: 300;

    line-height: .85;

    letter-spacing: -.06em;
}


.final-cta h2 em {

    font-family: var(--serif);
}


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

.site-footer {

    background: var(--dark-green);

    color: white;

    padding: 90px 0 30px;
}


.footer-main {

    display: grid;

    grid-template-columns:
        2fr 1fr 1fr 1fr;

    gap: 50px;

    padding-bottom: 80px;
}


.footer-brand img {

    width: 320px;

    height: auto;
}


.footer-brand p {

    max-width: 250px;

    margin-top: 25px;

    color: rgba(255,255,255,.55);
}


.footer-column {

    display: flex;

    flex-direction: column;

    gap: 10px;
}


.footer-column h4 {

    margin: 0 0 15px;

    color: rgba(255,255,255,.45);

    font-size: 9px;

    letter-spacing: .15em;

    font-weight: 500;
}


.footer-column a {

    font-size: 12px;

    color: rgba(255,255,255,.8);
}


.footer-bottom {

    padding-top: 25px;

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

    display: flex;

    justify-content: space-between;

    color: rgba(255,255,255,.4);

    font-size: 9px;
}


.footer-bottom div {

    display: flex;

    gap: 25px;
}


/* =====================================================
   RESPONSIVE
===================================================== */

@media (max-width: 768px) {

    .container {

        width: min(
            calc(100% - 40px),
            var(--container)
        );
    }


    .main-nav {

        display: none;
    }


    .header-contact {

        display: none;
    }


    .nav-toggle {

        display: block !important;
    }


    body.mobile-menu-open .main-nav {

        display: flex;
        flex-direction: column;
        position: absolute;
        top: 100%;
        left: 0;
        width: 100%;
        background: #f4f1e8;
        padding: 20px;
        gap: 15px;
    }

    body.mobile-menu-open .main-nav a {

        color: #183b2d !important;
    }


    .hero,
    .hero-inner {

        min-height: 720px;
    }


    .intro-grid {

        grid-template-columns: 1fr;

        gap: 40px;
    }


    .intro-content {

        grid-template-columns: 1fr;

        gap: 30px;
    }


    .section-heading {

        grid-template-columns: 1fr;

        gap: 20px;
    }


    .material-grid {

        grid-template-columns:
            1fr 1fr;

        grid-template-rows:
            450px 300px 300px;
    }


    .material-card-large {

        grid-column: span 2;

        grid-row: auto;
    }


    .sustainability-grid {

        grid-template-columns: 1fr;

        gap: 60px;
    }


    .custom-inner {

        grid-template-columns: 1fr;

        gap: 50px;
    }


    .application-grid {

        grid-template-columns:
            1fr 1fr;
    }


    .footer-main {

        grid-template-columns:
            2fr 1fr 1fr;
    }


    .footer-brand {

        grid-column: span 3;
    }

}


@media (max-width: 600px) {

    .section {

        padding: 90px 0;
    }


    .hero h1 {

        font-size: 52px;
    }


    .hero p {

        font-size: 15px;
    }


    .hero-buttons {

        flex-direction: column;

        align-items: flex-start;
    }


    .material-grid {

        display: grid;

        grid-template-columns: 1fr;

        grid-template-rows:
            repeat(4, 330px);
    }


    .material-card-large {

        grid-column: auto;
    }


    .product-grid {

        grid-template-columns: 1fr;
    }


    .featured-heading {

        display: block;
    }


    .featured-heading .arrow-link {

        margin-top: 25px;
    }


    .material-process {

        grid-template-columns: 1fr;

        gap: 35px;
    }


    .process-line {

        display: none;
    }


    .application-grid {

        grid-template-columns: 1fr;
    }


    .application-card {

        aspect-ratio: 1 / 1;
    }


    .journal-grid {

        grid-template-columns: 1fr;
    }


    .footer-main {

        grid-template-columns: 1fr 1fr;
    }


    .footer-brand {

        grid-column: span 2;
    }


    .footer-bottom {

        flex-direction: column;

        gap: 15px;
    }

}