/* =========================================================
   NJOY CREATIONS
   WEB DESIGN & DEVELOPMENT PAGE
========================================================= */


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

.web-hero {

    min-height: 90vh;

    padding:
        150px
        5vw
        80px;

    display: flex;

    flex-direction: column;

    justify-content: space-between;

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

}


.web-hero-top {

    display: flex;

    justify-content: space-between;

    color: var(--accent-soft);

}


.web-hero-content {

    max-width: 1100px;

    padding:
        100px 0 80px;

}


.web-eyebrow {

    margin-bottom: 25px;

    font:
        11px 'DM Mono';

    text-transform: uppercase;

    letter-spacing: .14em;

    color: var(--accent-soft);

}


.web-hero h1 {

    margin: 0;

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

    line-height: .82;

    letter-spacing: -.08em;

}


.web-hero h1 em {

    color: var(--accent);

    font-style: normal;

}


.web-hero-content p {

    max-width: 600px;

    margin-top: 45px;

    font-size: 17px;

    line-height: 1.6;

    color: var(--accent-soft);

}


.web-hero-button {

    display: inline-flex;

    align-items: center;

    gap: 25px;

    margin-top: 45px;

    padding: 16px 22px;

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

    color: var(--accent);

    text-decoration: none;

    font:
        10px 'DM Mono';

    letter-spacing: .12em;

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

}


.web-hero-button span {

    font-size: 18px;

}


.web-hero-button:hover {

    background: var(--accent);

    color: var(--dark);

}


.web-hero-bottom {

    display: flex;

    justify-content: space-between;

    color: var(--accent-soft);

}


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

.web-intro {

    display: grid;

    grid-template-columns:
        25% 75%;

    gap: 30px;

    padding:
        140px 5vw;

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

}


.web-intro-label {

    color: var(--accent-soft);

}


.web-intro-content {

    max-width: 950px;

}


.web-intro-content h2 {

    margin: 0;

    font-size:
        clamp(
            45px,
            7vw,
            105px
        );

    line-height: .9;

    letter-spacing: -.07em;

}


.web-intro-content h2 em {

    color: var(--accent);

    font-style: normal;

}


.web-intro-content p {

    max-width: 650px;

    margin-top: 50px;

    color: var(--accent-soft);

    line-height: 1.7;

    font-size: 15px;

}


/* =========================================================
   SERVICES
========================================================= */

.web-services {

    padding:
        140px 5vw;

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

}


.web-section-head {

    margin-bottom: 70px;

}


.web-section-head .mono {

    color: var(--accent-soft);

}


.web-section-head h2 {

    margin-top: 20px;

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

    line-height: .85;

    letter-spacing: -.07em;

}


.web-service-grid {

    display: grid;

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

    gap: 1px;

    background: var(--line);

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

}


.web-service-card {

    position: relative;

    min-height: 330px;

    padding: 35px;

    background: var(--surface);

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

}


.web-service-card:hover {

    background: var(--accent);

    color: var(--dark);

}


.web-service-number {

    color: var(--accent-soft);

}


.web-service-card:hover
.web-service-number {

    color: var(--dark);

}


.web-service-icon {

    margin-top: 55px;

    font-size: 30px;

    color: var(--accent);

}


.web-service-card:hover
.web-service-icon {

    color: var(--dark);

}


.web-service-card h3 {

    margin-top: 30px;

    font-size: 27px;

    letter-spacing: -.04em;

}


.web-service-card p {

    max-width: 480px;

    margin-top: 15px;

    color: var(--accent-soft);

    line-height: 1.6;

    font-size: 14px;

}


.web-service-card:hover p {

    color: var(--dark);

}


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

.web-process {

    padding:
        140px 5vw;

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

}


.process-list {

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

}


.process-item {

    display: grid;

    grid-template-columns:
        100px 1fr;

    gap: 30px;

    padding:
        35px 0;

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

    transition:
        padding-left .35s ease;

}


.process-item:hover {

    padding-left: 20px;

}


.process-item > span {

    color: var(--accent);
    
}


.process-item h3 {

    margin: 0;

    font-size: 30px;

    letter-spacing: -.04em;

}


.process-item p {

    max-width: 600px;

    margin-top: 12px;

    color: var(--accent-soft);

    line-height: 1.6;

}


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

.web-cta {

    padding:
        160px 5vw;

    text-align: center;

}


.web-cta > .mono {

    color: var(--accent-soft);

}


.web-cta h2 {

    margin-top: 35px;

    font-size:
        clamp(
            55px,
            9vw,
            140px
        );

    line-height: .85;

    letter-spacing: -.08em;

}


.web-cta h2 em {

    color: var(--accent);

    font-style: normal;

}


.web-cta p {

    max-width: 550px;

    margin:
        40px auto 0;

    color: var(--accent-soft);

    line-height: 1.6;

}


.web-cta-button {

    display: inline-flex;

    align-items: center;

    gap: 25px;

    margin-top: 40px;

    padding:
        17px 25px;

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

    color: var(--accent);

    text-decoration: none;

    font:
        10px 'DM Mono';

    letter-spacing: .12em;

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

}


.web-cta-button:hover {

    background: var(--accent);

    color: var(--dark);

}


.web-cta-button span {

    font-size: 18px;

}


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

@media (max-width: 850px) {


    .web-hero {

        min-height: 80vh;

        padding:
            130px 6vw 60px;

    }


    .web-hero-top,
    .web-hero-bottom {

        font-size: 9px;

    }


    .web-hero-content {

        padding:
            80px 0;

    }


    .web-hero h1 {

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

    }


    .web-hero-content p {

        font-size: 14px;

    }


    .web-intro {

        grid-template-columns: 1fr;

        padding:
            90px 6vw;

    }


    .web-intro-content h2 {

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

    }


    .web-intro-content p {

        margin-top: 35px;

    }


    .web-services,
    .web-process {

        padding:
            90px 6vw;

    }


    .web-service-grid {

        grid-template-columns: 1fr;

    }


    .web-service-card {

        min-height: 300px;

    }


    .process-item {

        grid-template-columns:
            50px 1fr;

        gap: 15px;

    }


    .process-item h3 {

        font-size: 24px;

    }


    .web-cta {

        padding:
            110px 6vw;

    }


    .web-cta h2 {

        font-size:
            clamp(
                50px,
                13vw,
                85px
            );

    }

}