/* =========================================================
   NJOY — SERVICE DETAIL PAGE
========================================================= */


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

.service-hero {

    min-height: 90vh;

    padding:
        130px
        5vw
        45px;

    display: flex;

    flex-direction: column;

    justify-content: space-between;

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

}


.service-top {

    display: flex;

    justify-content: space-between;

    color:
        var(--accent-soft);

    font-size: 10px;

}


.service-hero-content {

    max-width: 1100px;

}


.service-kicker {

    margin-bottom: 25px;

    color:
        var(--accent-soft);

    font:
        11px 'DM Mono';

    letter-spacing:
        .12em;

}


.service-hero h1 {

    margin: 0;

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

    line-height:
        .82;

    letter-spacing:
        -.08em;

}


.service-hero h1 span {

    color:
        var(--accent);

}


.service-hero-content p {

    max-width: 560px;

    margin-top: 45px;

    font-size: 16px;

    line-height: 1.6;

    color:
        var(--accent-soft);

}


.service-hero-bottom {

    display: flex;

    justify-content: space-between;

    color:
        var(--accent-soft);

    font-size: 10px;

}


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

.service-intro {

    padding:
        140px
        5vw;

    display: grid;

    grid-template-columns:
        25% 75%;

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

}


.service-label {

    color:
        var(--accent-soft);

    font-size: 10px;

}


.service-intro-content {

    max-width: 1000px;

}


.service-intro h2 {

    margin: 0;

    font-size:
        clamp(
            50px,
            7vw,
            110px
        );

    line-height:
        .88;

    letter-spacing:
        -.07em;

}


.service-intro h2 em {

    color:
        var(--accent);

    font-style: normal;

}


.service-intro-content p {

    max-width: 600px;

    margin-top: 60px;

    font-size: 16px;

    line-height: 1.7;

    color:
        var(--accent-soft);

}


/* =========================================================
   SECTION HEAD
========================================================= */

.service-work,
.service-process {

    padding:
        120px
        5vw;

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

}


.service-section-head {

    display: flex;

    justify-content: space-between;

    padding-bottom: 25px;

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

    padding-top: 18px;

    font:
        10px 'DM Mono';

    letter-spacing:
        .08em;

    color:
        var(--accent-soft);

}


/* =========================================================
   SERVICE LIST
========================================================= */

.service-list {

    margin-top: 60px;

}


.service-item {

    display: grid;

    grid-template-columns:
        80px 1fr 50px;

    gap: 30px;

    align-items: center;

    padding:
        35px 0;

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

    transition:
        padding .4s ease;

}


.service-item:hover {

    padding-left: 20px;

}


.service-number {

    color:
        var(--accent-soft);

    font:
        10px 'DM Mono';

}


.service-item h3 {

    margin: 0;

    font-size: 32px;

    letter-spacing:
        -.04em;

}


.service-item p {

    max-width: 600px;

    margin-top: 10px;

    color:
        var(--accent-soft);

    line-height: 1.5;

    font-size: 14px;

}


.service-arrow {

    color:
        var(--accent);

    font-size: 25px;

    transition:
        transform .4s ease;

}


.service-item:hover
.service-arrow {

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

}


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

.process-grid {

    display: grid;

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

    gap: 1px;

    margin-top: 60px;

    background:
        var(--line);

}


.process-card {

    min-height: 300px;

    padding: 30px;

    background:
        var(--surface);

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

}


.process-card:hover {

    background:
        var(--accent);

    color:
        var(--dark);

}


.process-number {

    display: block;

    margin-bottom: 90px;

    font:
        10px 'DM Mono';

}


.process-card h3 {

    margin: 0;

    font-size: 30px;

    letter-spacing:
        -.04em;

}


.process-card p {

    margin-top: 15px;

    font-size: 13px;

    line-height: 1.5;

    color:
        var(--accent-soft);

}


.process-card:hover p {

    color:
        var(--dark);

}


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

.service-cta {

    padding:
        150px 5vw;

    text-align: center;

}


.service-cta > .mono {

    color:
        var(--accent-soft);

    font-size: 10px;

}


.service-cta h2 {

    margin:
        35px 0 50px;

    font-size:
        clamp(
            60px,
            10vw,
            150px
        );

    line-height:
        .8;

    letter-spacing:
        -.08em;

}


.service-cta h2 span {

    color:
        var(--accent);

}


.service-cta-button {

    display: inline-flex;

    align-items: center;

    gap: 20px;

    padding:
        16px 25px;

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

    color:
        var(--accent);

    text-decoration: none;

    font:
        10px 'DM Mono';

    letter-spacing:
        .1em;

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

}


.service-cta-button:hover {

    background:
        var(--accent);

    color:
        var(--dark);

}


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

@media (max-width: 850px) {


    .service-hero {

        min-height: 80vh;

        padding:
            120px
            6vw
            35px;

    }


    .service-top,
    .service-hero-bottom {

        font-size: 9px;

    }


    .service-hero h1 {

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

    }


    .service-hero-content p {

        margin-top: 30px;

        font-size: 14px;

    }


    .service-intro {

        display: block;

        padding:
            90px 6vw;

    }


    .service-label {

        margin-bottom: 50px;

    }


    .service-intro h2 {

        font-size:
            clamp(
                48px,
                13vw,
                80px
            );

    }


    .service-intro-content p {

        margin-top: 40px;

        font-size: 14px;

    }


    .service-work,
    .service-process {

        padding:
            90px 6vw;

    }


    .service-item {

        grid-template-columns:
            45px 1fr;

        gap: 15px;

    }


    .service-arrow {

        display: none;

    }


    .service-item h3 {

        font-size: 26px;

    }


    .service-item p {

        font-size: 13px;

    }


    .process-grid {

        grid-template-columns:
            1fr 1fr;

    }


    .process-card {

        min-height: 260px;

    }


    .process-number {

        margin-bottom: 60px;

    }


    .service-cta {

        padding:
            110px 6vw;

    }


    .service-cta h2 {

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

    }

}


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

@media (max-width: 500px) {


    .service-top span:last-child {

        display: none;

    }


    .service-hero-bottom {

        display: block;

    }


    .service-hero-bottom span:last-child {

        display: none;

    }


    .process-grid {

        grid-template-columns:
            1fr;

    }


    .process-card {

        min-height: 230px;

    }


    .process-number {

        margin-bottom: 45px;

    }

}