/* =========================================================
   NJOY CREATIONS
   ABOUT PAGE
========================================================= */


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

.about-hero {

    min-height: 88vh;

    padding:
        150px 5vw 70px;

    display:
        flex;

    flex-direction:
        column;

    justify-content:
        space-between;

    position:
        relative;

    overflow:
        hidden;

}


/* GRID */

.about-hero::before {

    content:
        "";

    position:
        absolute;

    inset:
        0;

    background-image:

        linear-gradient(
            rgba(247,244,236,.045) 1px,
            transparent 1px
        ),

        linear-gradient(
            90deg,
            rgba(247,244,236,.045) 1px,
            transparent 1px
        );

    background-size:
        80px 80px;

    pointer-events:
        none;

    mask-image:
        linear-gradient(
            to bottom,
            black 15%,
            transparent 90%
        );

}


/* TOP */

.about-hero-top {

    position:
        relative;

    z-index:
        1;

    display:
        flex;

    justify-content:
        space-between;

    color:
        var(--accent-soft);

}


/* CONTENT */

.about-hero-content {

    position:
        relative;

    z-index:
        1;

    margin-top:
        70px;

}


.about-eyebrow {

    color:
        var(--accent);

    font-size:
        12px;

    letter-spacing:
        .18em;

    margin-bottom:
        30px;

}


.about-hero h1 {

    margin:
        0;

    font-size:
        clamp(
            75px,
            13vw,
            200px
        );

    line-height:
        .82;

    letter-spacing:
        -.065em;

    font-weight:
        800;

}


.about-hero h1 span {

    color:
        var(--accent);

}


.about-hero-copy {

    max-width:
        500px;

    margin:
        60px 0 0 32vw;

    color:
        var(--accent-soft);

    font-size:
        17px;

    line-height:
        1.65;

}


/* BOTTOM */

.about-hero-bottom {

    position:
        relative;

    z-index:
        1;

    display:
        flex;

    justify-content:
        space-between;

    color:
        var(--white);

}


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

.about-intro {

    padding:
        140px 5vw;

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

    display:
        grid;

    grid-template-columns:
        25% 75%;

    gap:
        40px;

}


.about-intro-label {

    color:
        var(--accent-soft);

    font-size:
        11px;

}


.about-intro-content {

    max-width:
        1100px;

}


.about-intro-content h2 {

    margin:
        0;

    font-size:
        clamp(
            55px,
            8vw,
            125px
        );

    line-height:
        .85;

    letter-spacing:
        -.06em;

}


.about-intro-content h2 span {

    color:
        var(--accent);

}


.about-intro-text {

    margin:
        70px 0 0 35%;

    max-width:
        500px;

}


.about-intro-text p {

    margin:
        0 0 22px;

    color:
        var(--accent-soft);

    font-size:
        16px;

    line-height:
        1.7;

}


/* =========================================================
   PHILOSOPHY
========================================================= */

.about-philosophy {

    padding:
        130px 5vw;

    background:
        var(--surface);

    display:
        grid;

    grid-template-columns:
        25% 75%;

    gap:
        40px;

}


.philosophy-label {

    color:
        var(--accent);

    font-size:
        11px;

}


.philosophy-content {

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

}


.philosophy-line {

    display:
        grid;

    grid-template-columns:
        80px 1fr;

    gap:
        30px;

    padding:
        45px 0;

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

}


.philosophy-number {

    color:
        var(--accent-soft);

    font-size:
        11px;

    padding-top:
        8px;

}


.philosophy-line h3 {

    margin:
        0;

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

    line-height:
        .9;

    letter-spacing:
        -.05em;

    font-weight:
        600;

}


.philosophy-line p {

    max-width:
        550px;

    margin:
        20px 0 0;

    color:
        var(--accent-soft);

    font-size:
        14px;

    line-height:
        1.6;

}


/* =========================================================
   CAPABILITIES
========================================================= */

.about-capabilities {

    padding:
        120px 5vw 140px;

}


.capabilities-top {

    padding:
        20px 0;

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

    display:
        flex;

    justify-content:
        space-between;

    color:
        var(--accent-soft);

    font-size:
        10px;

}


.capabilities-grid {

    margin-top:
        70px;

    display:
        grid;

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

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

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

}


.capability {

    min-height:
        260px;

    padding:
        30px;

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

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

    display:
        flex;

    flex-direction:
        column;

    justify-content:
        space-between;

    transition:
        background .4s ease;

}


.capability:hover {

    background:
        var(--surface);

}


.capability > span {

    color:
        var(--accent);

    font-size:
        10px;

}


.capability h3 {

    margin:
        0;

    font-size:
        clamp(
            38px,
            5vw,
            70px
        );

    line-height:
        .9;

    letter-spacing:
        -.05em;

    transition:
        color .3s ease;

}


.capability:hover h3 {

    color:
        var(--accent);

}


/* =========================================================
   STATEMENT
========================================================= */

.about-statement {

    min-height:
        80vh;

    padding:
        120px 5vw;

    background:
        var(--white);

    color:
        var(--dark);

    position:
        relative;

    overflow:
        hidden;

    display:
        flex;

    flex-direction:
        column;

    justify-content:
        center;

}


.statement-mark {

    position:
        absolute;

    top:
        45px;

    right:
        5vw;

    font-size:
        12px;

    letter-spacing:
        .12em;

    color:
        var(--accent-soft);

}


.about-statement h2 {

    margin:
        0;

    font-size:
        clamp(
            65px,
            11vw,
            165px
        );

    line-height:
        .8;

    letter-spacing:
        -.07em;

}


.about-statement h2 span {

    color:
        var(--accent-soft);

}


.about-statement p {

    max-width:
        480px;

    margin:
        60px 0 0 32vw;

    font-size:
        16px;

    line-height:
        1.7;

    color:
        rgba(
            8,
            8,
            8,
            .62
        );

}


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

.about-cta {

    min-height:
        70vh;

    padding:
        120px 5vw;

    display:
        flex;

    flex-direction:
        column;

    justify-content:
        center;

    align-items:
        flex-start;

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

}


.about-cta > span {

    color:
        var(--accent-soft);

    margin-bottom:
        30px;

}


.about-cta h2 {

    margin:
        0 0 55px;

    font-size:
        clamp(
            70px,
            12vw,
            180px
        );

    line-height:
        .8;

    letter-spacing:
        -.07em;

}


.about-cta-button {

    display:
        inline-flex;

    align-items:
        center;

    gap:
        35px;

    padding:
        18px 25px;

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

    color:
        var(--accent);

    text-decoration:
        none;

    font-size:
        11px;

    letter-spacing:
        .1em;

    transition:
        background .3s ease,
        color .3s ease;

}


.about-cta-button span {

    font-size:
        18px;

    transition:
        transform .3s ease;

}


.about-cta-button:hover {

    background:
        var(--accent);

    color:
        var(--dark);

}


.about-cta-button:hover span {

    transform:
        translate(
            4px,
            -4px
        );

}


/* =========================================================
   REVEAL
========================================================= */

.about-intro,
.about-philosophy,
.about-capabilities,
.about-statement,
.about-cta {

    opacity:
        0;

    transform:
        translateY(35px);

    transition:
        opacity .8s ease,
        transform .8s
        cubic-bezier(
            .16,
            1,
            .3,
            1
        );

}


.about-intro.show,
.about-philosophy.show,
.about-capabilities.show,
.about-statement.show,
.about-cta.show {

    opacity:
        1;

    transform:
        translateY(0);

}


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

@media (max-width: 850px) {


    /* HERO */

    .about-hero {

        min-height:
            78vh;

        padding:
            125px 6vw 60px;

    }


    .about-hero-content {

        margin-top:
            60px;

    }


    .about-hero h1 {

        font-size:
            clamp(
                62px,
                16vw,
                115px
            );

    }


    .about-hero-copy {

        margin:
            45px 0 0;

        max-width:
            340px;

        font-size:
            14px;

    }


    .about-hero-bottom {

        font-size:
            9px;

    }


    /* INTRO */

    .about-intro {

        padding:
            90px 6vw;

        display:
            block;

    }


    .about-intro-label {

        margin-bottom:
            45px;

    }


    .about-intro-content h2 {

        font-size:
            clamp(
                50px,
                14vw,
                90px
            );

    }


    .about-intro-text {

        margin:
            45px 0 0;

    }


    .about-intro-text p {

        font-size:
            14px;

    }


    /* PHILOSOPHY */

    .about-philosophy {

        padding:
            90px 6vw;

        display:
            block;

    }


    .philosophy-label {

        margin-bottom:
            45px;

    }


    .philosophy-line {

        grid-template-columns:
            35px 1fr;

        gap:
            12px;

        padding:
            35px 0;

    }


    .philosophy-line h3 {

        font-size:
            38px;

    }


    .philosophy-line p {

        font-size:
            13px;

    }


    /* CAPABILITIES */

    .about-capabilities {

        padding:
            80px 6vw 100px;

    }


    .capabilities-top {

        flex-direction:
            column;

        gap:
            10px;

    }


    .capabilities-grid {

        margin-top:
            45px;

    }


    .capability {

        min-height:
            170px;

        padding:
            20px;

    }


    .capability h3 {

        font-size:
            32px;

    }


    /* STATEMENT */

    .about-statement {

        min-height:
            70vh;

        padding:
            90px 6vw;

    }


    .statement-mark {

        top:
            30px;

        right:
            6vw;

    }


    .about-statement h2 {

        font-size:
            clamp(
                58px,
                15vw,
                100px
            );

    }


    .about-statement p {

        margin:
            45px 0 0;

        max-width:
            330px;

        font-size:
            14px;

    }


    /* CTA */

    .about-cta {

        min-height:
            60vh;

        padding:
            90px 6vw;

    }


    .about-cta h2 {

        font-size:
            clamp(
                65px,
                17vw,
                105px
            );

    }


    .about-cta-button {

        gap:
            20px;

        padding:
            15px 18px;

    }

}


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

@media (max-width: 480px) {


    .about-hero {

        padding-top:
            115px;

    }


    .about-hero-top {

        font-size:
            9px;

    }


    .about-hero h1 {

        font-size:
            58px;

    }


    .about-intro-content h2 {

        font-size:
            48px;

    }


    .capabilities-grid {

        grid-template-columns:
            1fr;

    }


    .capability {

        min-height:
            150px;

    }


    .about-statement h2 {

        font-size:
            55px;

    }

}