/* =============================================
   STEMSPARK
   MAIN STYLESHEET
============================================= */


:root {

    --dark: #14382f;
    --dark-green: #174e40;

    --green: #28765f;
    --green-light: #4f957d;

    --mint: #dff2e8;
    --mint-light: #eff8f3;

    --lime: #dbea8b;

    --cream: #fbfaf4;
    --white: #ffffff;

    --gray: #557068;

    --border: rgba(20, 56, 47, 0.13);

    --shadow:
        0 25px 65px
        rgba(20, 56, 47, 0.12);

    --radius-large: 34px;
    --radius-medium: 22px;
    --radius-small: 14px;
}


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

* {
    box-sizing: border-box;
}


html {
    scroll-behavior: smooth;
}


body {

    margin: 0;

    font-family:
        "DM Sans",
        sans-serif;

    color: var(--dark);

    background: var(--cream);

    line-height: 1.6;

    overflow-x: hidden;
}


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


img {
    display: block;
    max-width: 100%;
}


button {
    font: inherit;
}


.container {

    width:
        min(
            1160px,
            calc(100% - 40px)
        );

    margin: 0 auto;
}


.section {

    padding:
        110px 0;

}


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


h1,
h2,
h3 {

    font-family:
        "Space Grotesk",
        sans-serif;

    margin-top: 0;

    line-height: 1.08;

}


h1 {

    font-size:
        clamp(
            3.4rem,
            6.5vw,
            6.3rem
        );

    letter-spacing:
        -0.055em;

    margin-bottom:
        26px;

}


h1 span {

    display: block;

    color: var(--green);

}


h2 {

    font-size:
        clamp(
            2.4rem,
            4.5vw,
            4.3rem
        );

    letter-spacing:
        -0.045em;

    margin-bottom:
        22px;

}


h3 {

    font-size:
        1.4rem;

    letter-spacing:
        -0.025em;

}


.eyebrow {

    color: var(--green);

    font-size:
        0.77rem;

    font-weight:
        700;

    letter-spacing:
        0.15em;

    margin:
        0 0 14px;

}


.section-heading {

    max-width:
        760px;

    margin-bottom:
        50px;

}


.section-heading > p:last-child {

    color:
        var(--gray);

    font-size:
        1.05rem;

}


.centered {

    text-align:
        center;

    margin-left:
        auto;

    margin-right:
        auto;

}


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


.site-header {

    position:
        sticky;

    top:
        0;

    z-index:
        1000;

    background:
        rgba(
            251,
            250,
            244,
            0.88
        );

    backdrop-filter:
        blur(18px);

    border-bottom:
        1px solid transparent;

    transition:
        0.3s ease;

}


.site-header.scrolled {

    border-color:
        var(--border);

}


.nav {

    min-height:
        78px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

}


.brand {

    display:
        inline-flex;

    align-items:
        center;

    gap:
        10px;

    font-family:
        "Space Grotesk",
        sans-serif;

    font-size:
        1.35rem;

    font-weight:
        700;

}


.brand-icon {

    width:
        38px;

    height:
        38px;

    border-radius:
        12px;

    background:
        var(--green);

    color:
        var(--lime);

    display:
        grid;

    place-items:
        center;

}


.brand-text span {

    color:
        var(--green);

}


.nav-links {

    display:
        flex;

    align-items:
        center;

    gap:
        25px;

    font-size:
        0.93rem;

    font-weight:
        600;

}


.nav-links a {

    transition:
        0.2s ease;

}


.nav-links a:hover {

    color:
        var(--green);

}


.nav-button {

    padding:
        11px 18px;

    border-radius:
        100px;

    background:
        var(--dark);

    color:
        white !important;

}


.nav-toggle {

    display:
        none;

    width:
        42px;

    height:
        42px;

    border:
        0;

    background:
        transparent;

    cursor:
        pointer;

}


.nav-toggle span {

    display:
        block;

    width:
        25px;

    height:
        2px;

    margin:
        5px auto;

    border-radius:
        10px;

    background:
        var(--dark);

}


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


.hero {

    min-height:
        800px;

    padding:
        100px 0;

    position:
        relative;

    display:
        flex;

    align-items:
        center;

    overflow:
        hidden;

}


.hero-grid {

    display:
        grid;

    grid-template-columns:
        1.05fr 0.95fr;

    align-items:
        center;

    gap:
        70px;

}


.hero-description {

    max-width:
        650px;

    color:
        var(--gray);

    font-size:
        1.12rem;

    margin-bottom:
        30px;

}


.hero-buttons {

    display:
        flex;

    flex-wrap:
        wrap;

    gap:
        14px;

}


.button {

    display:
        inline-flex;

    justify-content:
        center;

    align-items:
        center;

    padding:
        15px 23px;

    border-radius:
        100px;

    font-weight:
        700;

    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease;

}


.button:hover {

    transform:
        translateY(-3px);

}


.primary-button {

    background:
        var(--green);

    color:
        white;

    box-shadow:
        0 12px 30px
        rgba(40, 118, 95, 0.22);

}


.secondary-button {

    background:
        rgba(255,255,255,0.7);

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

}


.hero-stats {

    display:
        flex;

    flex-wrap:
        wrap;

    gap:
        35px;

    margin-top:
        45px;

}


.hero-stats div {

    display:
        flex;

    flex-direction:
        column;

}


.hero-stats strong {

    font-family:
        "Space Grotesk",
        sans-serif;

}


.hero-stats span {

    color:
        var(--gray);

    font-size:
        0.8rem;

}


.hero-image-container {

    position:
        relative;

}


.hero-image {

    width:
        100%;

    height:
        560px;

    object-fit:
        cover;

    border-radius:
        40px;

    box-shadow:
        var(--shadow);

}


.floating-card {

    position:
        absolute;

    background:
        rgba(255,255,255,0.95);

    backdrop-filter:
        blur(15px);

    padding:
        18px;

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

    border-radius:
        20px;

    width:
        180px;

    box-shadow:
        var(--shadow);

}


.floating-card strong,
.floating-card span {

    display:
        block;

}


.floating-card strong {

    font-family:
        "Space Grotesk";

}


.floating-card span {

    color:
        var(--gray);

    font-size:
        0.8rem;

}


.floating-icon {

    width:
        36px;

    height:
        36px;

    display:
        grid;

    place-items:
        center;

    border-radius:
        10px;

    background:
        var(--mint);

    color:
        var(--green);

    margin-bottom:
        12px;

}


.floating-one {

    left:
        -45px;

    bottom:
        45px;

}


.floating-two {

    right:
        -35px;

    top:
        50px;

}


.hero-decoration {

    position:
        absolute;

    border-radius:
        50%;

    pointer-events:
        none;

}


.decoration-one {

    width:
        370px;

    height:
        370px;

    left:
        -170px;

    top:
        150px;

    background:
        var(--mint);

}


.decoration-two {

    width:
        260px;

    height:
        260px;

    right:
        -100px;

    bottom:
        20px;

    background:
        rgba(219,234,139,0.5);

}


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


.about {

    background:
        white;

}


.about-grid {

    display:
        grid;

    grid-template-columns:
        0.9fr 1.1fr;

    gap:
        90px;

}


.about-content {

    color:
        var(--gray);

    font-size:
        1.1rem;

}


.about-content p:first-child {

    margin-top:
        0;

}


/* =============================================
   VALUES
============================================= */


.values {

    background:
        white;

    padding-top:
        0;

}


.values-grid {

    display:
        grid;

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

    gap:
        18px;

}


.value-card {

    padding:
        30px;

    min-height:
        270px;

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

    border-radius:
        var(--radius-medium);

    background:
        var(--cream);

}


.value-icon {

    width:
        48px;

    height:
        48px;

    display:
        grid;

    place-items:
        center;

    border-radius:
        14px;

    background:
        var(--mint);

    color:
        var(--green);

    margin-bottom:
        35px;

}


.value-card p {

    color:
        var(--gray);

}


/* =============================================
   IMPACT
============================================= */


.impact {

    background:
        var(--mint-light);

}


.impact-grid {

    display:
        grid;

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

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

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

}


.impact-card {

    padding:
        35px 28px;

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

}


.impact-card:last-child {

    border-right:
        0;

}


.impact-card > span {

    display:
        block;

    color:
        var(--green);

    font-family:
        "Space Grotesk";

    font-weight:
        700;

    margin-bottom:
        45px;

}


.impact-card p {

    color:
        var(--gray);

}


.impact-photos {

    display:
        grid;

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

    gap:
        18px;

    margin-top:
        55px;

}


.impact-photo {

    position:
        relative;

    margin:
        0;

    aspect-ratio:
        4 / 3;

    overflow:
        hidden;

    border-radius:
        22px;

}


.impact-photo img {

    width:
        100%;

    height:
        100%;

    object-fit:
        cover;

    transition:
        transform 0.5s ease;

}


.impact-photo:hover img {

    transform:
        scale(1.04);

}


.impact-photo figcaption {

    position:
        absolute;

    left:
        14px;

    right:
        14px;

    bottom:
        14px;

    padding:
        15px;

    border-radius:
        14px;

    background:
        rgba(255,255,255,0.93);

    backdrop-filter:
        blur(10px);

}


.impact-photo figcaption strong,
.impact-photo figcaption span {

    display:
        block;

}


.impact-photo figcaption strong {

    font-family:
        "Space Grotesk";

}


.impact-photo figcaption span {

    color:
        var(--gray);

    font-size:
        0.78rem;

}


/* =============================================
   ACTIVITIES
============================================= */


.activities-grid {

    display:
        grid;

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

    gap:
        18px;

}


.activity-card {

    padding:
        32px;

    min-height:
        320px;

    background:
        white;

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

    border-radius:
        var(--radius-medium);

    transition:
        0.25s ease;

}


.activity-card:hover {

    transform:
        translateY(-6px);

    box-shadow:
        var(--shadow);

}


.activity-label {

    display:
        inline-block;

    padding:
        7px 11px;

    border-radius:
        100px;

    background:
        var(--mint);

    color:
        var(--green);

    font-size:
        0.7rem;

    font-weight:
        700;

    letter-spacing:
        0.08em;

}


.activity-symbol {

    font-family:
        "Space Grotesk";

    font-size:
        2.3rem;

    color:
        var(--green);

    margin:
        35px 0 20px;

}


.activity-card p {

    color:
        var(--gray);

}


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


.sustainability {

    background:
        var(--dark-green);

    color:
        white;

}


.sustainability-grid {

    display:
        grid;

    grid-template-columns:
        1fr 1fr;

    gap:
        80px;

    align-items:
        center;

}


.sustainability .eyebrow {

    color:
        var(--lime);

}


.sustainability-content > p:not(.eyebrow) {

    color:
        rgba(255,255,255,0.76);

}


.sustainability-content ul {

    list-style:
        none;

    padding:
        0;

    margin-top:
        30px;

}


.sustainability-content li {

    position:
        relative;

    padding-left:
        30px;

    margin:
        13px 0;

}


.sustainability-content li::before {

    content:
        "✓";

    position:
        absolute;

    left:
        0;

    color:
        var(--lime);

    font-weight:
        700;

}


/* Sustainability circle */

.cycle {

    position:
        relative;

    width:
        min(450px,90vw);

    aspect-ratio:
        1;

    margin:
        auto;

    border:
        1px dashed
        rgba(255,255,255,0.3);

    border-radius:
        50%;

}


.cycle::after {

    content:
        "";

    position:
        absolute;

    inset:
        20%;

    border:
        1px solid
        rgba(255,255,255,0.16);

    border-radius:
        50%;

}


.cycle-center {

    position:
        absolute;

    inset:
        36%;

    display:
        grid;

    place-items:
        center;

    text-align:
        center;

    border-radius:
        50%;

    background:
        var(--lime);

    color:
        var(--dark-green);

    font-family:
        "Space Grotesk";

    font-weight:
        700;

    z-index:
        2;

}


.cycle-item {

    position:
        absolute;

    z-index:
        3;

    padding:
        9px 15px;

    border-radius:
        100px;

    background:
        white;

    color:
        var(--dark-green);

    font-weight:
        700;

}


.cycle-one {

    top:
        2%;

    left:
        42%;

}


.cycle-two {

    right:
        0;

    top:
        46%;

}


.cycle-three {

    bottom:
        2%;

    left:
        41%;

}


.cycle-four {

    left:
        -2%;

    top:
        46%;

}


/* =============================================
   GALLERY
============================================= */


.gallery {

    background:
        white;

}


.gallery-grid {

    display:
        grid;

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

    grid-auto-rows:
        310px;

    gap:
        18px;

}


.gallery-item {

    position:
        relative;

    margin:
        0;

    overflow:
        hidden;

    border-radius:
        24px;

    background:
        var(--mint);

}


.gallery-item img {

    width:
        100%;

    height:
        100%;

    object-fit:
        cover;

    transition:
        transform 0.55s ease;

}


.gallery-item:hover img {

    transform:
        scale(1.045);

}


.gallery-featured {

    grid-column:
        span 2;

    grid-row:
        span 2;

}


.gallery-wide {

    grid-column:
        span 2;

}


.gallery-item::after {

    content:
        "";

    position:
        absolute;

    inset:
        0;

    background:
        linear-gradient(
            to top,
            rgba(8,34,28,0.8),
            transparent 60%
        );

}


.gallery-item figcaption {

    position:
        absolute;

    left:
        24px;

    right:
        24px;

    bottom:
        22px;

    color:
        white;

    z-index:
        3;

}


.gallery-item figcaption strong,
.gallery-item figcaption span {

    display:
        block;

}


.gallery-item figcaption strong {

    font-family:
        "Space Grotesk";

    font-size:
        1.25rem;

}


.gallery-item figcaption span {

    color:
        rgba(255,255,255,0.8);

    font-size:
        0.87rem;

}


/* =============================================
   VIDEOS
============================================= */


.videos {

    background:
        var(--mint-light);

}


.video-grid {

    display:
        grid;

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

    gap:
        20px;

}


.video-card {

    overflow:
        hidden;

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

    border-radius:
        24px;

    background:
        white;

    box-shadow:
        0 15px 40px
        rgba(20,56,47,0.08);

    transition:
        0.25s ease;

}


.video-card:hover {

    transform:
        translateY(-5px);

    box-shadow:
        var(--shadow);

}


.video-container {

    position:
        relative;

    width:
        100%;

    aspect-ratio:
        9 / 12;

    background:
        var(--dark);

}


.video-container iframe {

    position:
        absolute;

    inset:
        0;

    width:
        100%;

    height:
        100%;

    border:
        0;

}


.video-description {

    padding:
        22px;

}


.video-description span {

    display:
        block;

    color:
        var(--green);

    font-size:
        0.68rem;

    font-weight:
        700;

    letter-spacing:
        0.1em;

    margin-bottom:
        8px;

}


.video-description h3 {

    margin:
        0;

    font-size:
        1.15rem;

}


/* =============================================
   RESOURCES
============================================= */


.resources {

    background:
        white;

}


.resources-grid {

    display:
        grid;

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

    gap:
        16px;

}


.resource-card {

    display:
        flex;

    align-items:
        center;

    gap:
        22px;

    padding:
        24px;

    background:
        var(--cream);

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

    border-radius:
        18px;

    transition:
        0.25s ease;

}


.resource-card:hover {

    transform:
        translateY(-4px);

    border-color:
        rgba(40,118,95,0.4);

    box-shadow:
        0 15px 35px
        rgba(20,56,47,0.08);

}


.resource-number {

    width:
        50px;

    height:
        50px;

    flex:
        0 0 50px;

    display:
        grid;

    place-items:
        center;

    border-radius:
        14px;

    background:
        var(--green);

    color:
        white;

    font-family:
        "Space Grotesk";

    font-weight:
        700;

}


.resource-card h3 {

    margin:
        0 0 5px;

    font-size:
        1.1rem;

}


.resource-card p {

    margin:
        0;

    color:
        var(--green);

    font-size:
        0.85rem;

    font-weight:
        700;

}


.resource-message {

    margin-top:
        25px;

    padding:
        24px;

    border-radius:
        18px;

    background:
        var(--mint);

}


.resource-message p {

    color:
        var(--gray);

    margin-bottom:
        0;

}
/* =============================================
   SCRATCH PROJECTS
============================================= */

.scratch-projects {
    margin-top: 70px;
}

.scratch-heading {
    max-width: 720px;
    margin-bottom: 35px;
}

.scratch-heading h2 {
    font-size: clamp(2rem, 4vw, 3.3rem);
    margin-bottom: 15px;
}

.scratch-heading > p:last-child {
    color: var(--gray);
    font-size: 1.05rem;
}

.scratch-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
}

.scratch-card {
    display: flex;
    align-items: center;
    gap: 22px;
    padding: 28px;
    background: var(--mint-light);
    border: 1px solid var(--border);
    border-radius: 20px;
    transition: transform 0.25s ease,
                box-shadow 0.25s ease,
                border-color 0.25s ease;
}

.scratch-card:hover {
    transform: translateY(-5px);
    border-color: rgba(40, 118, 95, 0.4);
    box-shadow: 0 15px 35px rgba(20, 56, 47, 0.1);
}

.scratch-number {
    width: 58px;
    height: 58px;
    flex: 0 0 58px;
    display: grid;
    place-items: center;
    border-radius: 16px;
    background: var(--green);
    color: white;
    font-family: "Space Grotesk", sans-serif;
    font-weight: 700;
    font-size: 1.05rem;
}

.scratch-label {
    display: block;
    color: var(--green);
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    margin-bottom: 5px;
}

.scratch-card h3 {
    margin: 0 0 6px;
    font-size: 1.2rem;
}

.scratch-card p {
    margin: 0;
    color: var(--green);
    font-size: 0.87rem;
    font-weight: 700;
}

@media (max-width: 780px) {
    .scratch-grid {
        grid-template-columns: 1fr;
    }
}


/* =============================================
   CLOSING
============================================= */


.closing {

    padding-top:
        70px;

}


.closing-card {

    position:
        relative;

    overflow:
        hidden;

    padding:
        75px;

    border-radius:
        34px;

    background:
        var(--green);

    color:
        white;

}


.closing-card::after {

    content:
        "";

    position:
        absolute;

    width:
        360px;

    height:
        360px;

    right:
        -120px;

    top:
        -130px;

    border-radius:
        50%;

    background:
        rgba(219,234,139,0.18);

}


.closing-card .eyebrow {

    color:
        var(--lime);

}


.closing-card h2 {

    position:
        relative;

    z-index:
        2;

    max-width:
        850px;

}


.closing-card > p:not(.eyebrow) {

    max-width:
        650px;

    color:
        rgba(255,255,255,0.8);

}


.white-button {

    position:
        relative;

    z-index:
        2;

    margin-top:
        12px;

    background:
        white;

    color:
        var(--green);

}


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


footer {

    padding:
        55px 0;

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

}


.footer-grid {

    display:
        grid;

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

    gap:
        40px;

    align-items:
        end;

}


.footer-grid p {

    color:
        var(--gray);

}


.footer-links {

    display:
        grid;

    gap:
        7px;

    font-weight:
        600;

}


.footer-links a:hover {

    color:
        var(--green);

}


.copyright {

    text-align:
        right;

}


/* =============================================
   SCROLL ANIMATION
============================================= */


.reveal {

    opacity:
        0;

    transform:
        translateY(25px);

    transition:
        opacity 0.7s ease,
        transform 0.7s ease;

}


.reveal.visible {

    opacity:
        1;

    transform:
        translateY(0);

}


.delay-1 {

    transition-delay:
        0.08s;

}


.delay-2 {

    transition-delay:
        0.16s;

}


.delay-3 {

    transition-delay:
        0.24s;

}


/* =============================================
   TABLET
============================================= */


@media (max-width: 1000px) {

    .hero-grid,
    .about-grid,
    .sustainability-grid {

        grid-template-columns:
            1fr;

    }


    .hero-image-container {

        max-width:
            700px;

        width:
            100%;

        margin:
            auto;

    }


    .values-grid,
    .impact-grid {

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

    }


    .activities-grid {

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

    }


    .impact-photos {

        grid-template-columns:
            1fr 1fr;

    }


    .video-grid {

        grid-template-columns:
            1fr;

    }


    .video-card {

        width:
            min(650px,100%);

        margin:
            auto;

    }


    .video-container {

        aspect-ratio:
            16 / 10;

    }


    .footer-grid {

        grid-template-columns:
            1fr 1fr;

    }


    .copyright {

        text-align:
            left;

    }

}


/* =============================================
   MOBILE NAVIGATION
============================================= */


@media (max-width: 780px) {

    .section {

        padding:
            80px 0;

    }


    .container {

        width:
            calc(100% - 28px);

    }


    .nav-toggle {

        display:
            block;

    }


    .nav-links {

        position:
            absolute;

        top:
            70px;

        left:
            14px;

        right:
            14px;

        display:
            none;

        flex-direction:
            column;

        align-items:
            stretch;

        gap:
            0;

        padding:
            12px;

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

        border-radius:
            18px;

        background:
            white;

        box-shadow:
            var(--shadow);

    }


    .nav-links.open {

        display:
            flex;

    }


    .nav-links a {

        padding:
            12px;

    }


    .nav-button {

        margin-top:
            5px;

        text-align:
            center;

    }


    .hero {

        padding:
            70px 0;

    }


    .hero-image {

        height:
            430px;

    }


    .floating-one {

        left:
            10px;

    }


    .floating-two {

        right:
            10px;

    }


    .values-grid,
    .impact-grid,
    .activities-grid,
    .impact-photos,
    .resources-grid {

        grid-template-columns:
            1fr;

    }


    .impact-card {

        border-right:
            0;

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

    }


    .gallery-grid {

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

        grid-auto-rows:
            230px;

    }


    .gallery-featured {

        grid-column:
            span 2;

        grid-row:
            span 2;

    }


    .gallery-wide {

        grid-column:
            span 2;

    }


    .closing-card {

        padding:
            50px 30px;

    }


    .footer-grid {

        grid-template-columns:
            1fr;

    }

}


/* =============================================
   SMALL MOBILE
============================================= */


@media (max-width: 540px) {

    .hero-buttons {

        flex-direction:
            column;

    }


    .hero-buttons .button {

        width:
            100%;

    }


    .hero-stats {

        gap:
            18px;

    }


    .hero-image {

        height:
            350px;

        border-radius:
            25px;

    }


    .floating-card {

        width:
            145px;

        padding:
            14px;

    }


    .gallery-grid {

        grid-template-columns:
            1fr;

        grid-auto-rows:
            270px;

    }


    .gallery-featured,
    .gallery-wide {

        grid-column:
            auto;

        grid-row:
            auto;

    }


    .cycle {

        width:
            300px;

    }


    .cycle-item {

        font-size:
            0.78rem;

        padding:
            7px 10px;

    }

}


/* =============================================
   ACCESSIBILITY
============================================= */


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

    html {

        scroll-behavior:
            auto;

    }


    * {

        animation:
            none !important;

        transition:
            none !important;

    }


    .reveal {

        opacity:
            1;

        transform:
            none;

    }

}