/* =========================================================
   NETMORE — OUR EXPERTISE
========================================================= */

.nm-expertise {
    --nm-expertise-left: 50%;
    --nm-expertise-padding: 40px;

    position: relative;
    width: 100%;

    box-sizing: border-box;

    /*
     * Cards enter from the right.
     * Do not clip the section.
     */
    overflow: visible;
}


/* =========================================================
   MAIN GRID
========================================================= */

.nm-expertise__grid {
    position: relative;

    display: grid;

    grid-template-columns:
        var(--nm-expertise-left)
        minmax(0, 1fr);

    align-items: stretch;

    width: 100%;

    padding-left: var(--nm-expertise-padding);
    padding-right: var(--nm-expertise-padding);

    box-sizing: border-box;

    overflow: visible;
}


/* =========================================================
   LEFT COLUMN
========================================================= */

.nm-expertise__left {
    position: relative;

    align-self: stretch;

    min-width: 0;

    z-index: 5;

    overflow: visible;
}


/* =========================================================
   PINNED LEFT CONTENT

   GSAP / ScrollTrigger controls the pinning.
========================================================= */

.nm-expertise__sticky {
    position: relative;

    width: 100%;

    height: 100vh;

    display: flex;

    flex-direction: column;

    justify-content: center;

    align-items: flex-start;

    padding-right: clamp(30px, 4vw, 80px);

    box-sizing: border-box;

    z-index: 10;

    overflow: visible;

    will-change: transform;
}


/* =========================================================
   SMALL LABEL
========================================================= */

.nm-expertise__eyebrow {
    position: relative;

    margin: 0 0 28px;

    padding: 0;

    font-family: "DM Mono";

    font-size: 12px;

    font-weight: 200;

    line-height: 1;

    letter-spacing: 1px;

    color: #1d1b1c;

    z-index: 2;
}


/* =========================================================
   MAIN TITLE WRAPPER
========================================================= */

.nm-expertise__title {
    position: relative;

    display: inline-block;

    width: fit-content;

    max-width: 100%;

    margin: 0;

    padding: 0;

    font-family: "Bebas Neue", sans-serif;

    font-size: clamp(90px, 7vw, 135px);

    font-weight: 400;

    line-height: 0.86;

    letter-spacing: -1px;

    text-transform: uppercase;

    white-space: normal;
}


/* =========================================================
   TITLE — GREY BASE
========================================================= */

.nm-expertise__title-muted {
    position: relative;

    display: block;

    width: 100%;

    color: #c6cbc7;

    pointer-events: none;
}


/* =========================================================
   TITLE — ACTIVE / PRELOADER
========================================================= */

.nm-expertise__title-active {
    position: absolute;

    top: 0;
    right: 0;
    bottom: 0;
    left: 0;

    display: block;

    width: 100%;

    height: 100%;

    color: #1d1b1c;

    clip-path: inset(0 100% 0 0);

    -webkit-clip-path: inset(0 100% 0 0);

    will-change: clip-path;

    pointer-events: none;
}


/* =========================================================
   RIGHT COLUMN
========================================================= */

.nm-expertise__right {
    position: relative;

    min-width: 0;

    padding-top: 12vh;

    padding-bottom: 20vh;

    box-sizing: border-box;

    overflow: visible;

    z-index: 2;
}


/* =========================================================
   CARDS WRAPPER

   IMPORTANT:
   We use physical margin spacing on each card rather than
   relying on flex gap.
========================================================= */

.nm-expertise__cards {
    position: relative;

    display: flex;

    flex-direction: column;

    width: 100%;

    gap: 0;

    margin: 0;

    padding: 0;

    box-sizing: border-box;

    overflow: visible;
}


/* =========================================================
   INDIVIDUAL CARD

   JS controls:
       xPercent: 115
             ↓
       xPercent: 0
========================================================= */

.nm-expertise__card {
    position: relative;

    display: flex;

    flex-direction: column;

    flex-shrink: 0;

    width: 100%;

    min-height: 410px;

    /*
     * 15px visible spacing between each card.
     */
    margin: 0 0 15px 0 !important;

    padding:
        clamp(36px, 3vw, 60px)
        clamp(32px, 3vw, 60px);

    box-sizing: border-box;

    background: #1d1b1c;

    /*
     * Card rounded corners.
     */
    border-radius: 8px;

    overflow: hidden;

    will-change: transform;

    backface-visibility: hidden;

    -webkit-backface-visibility: hidden;

    transform-style: preserve-3d;
}


/* =========================================================
   REMOVE SPACE AFTER LAST CARD
========================================================= */

.nm-expertise__card:last-child {
    margin-bottom: 0 !important;
}


/* =========================================================
   CARD TOP
========================================================= */

.nm-expertise__card-top {
    position: relative;

    width: 100%;

    margin: 0;

    padding: 0;
}


/* =========================================================
   CARD NUMBER
========================================================= */

.nm-expertise__number {
    position: relative;

    margin: 0 0 28px;

    padding: 0;

    font-family: "DM Mono";

    font-size: 12px;

    font-weight: 400;

    line-height: 1;

    letter-spacing: 1px;

    color: #97ff57;
}


/* =========================================================
   CARD TITLE
========================================================= */

.nm-expertise__card-title {
    position: relative;

    margin: 0;

    padding: 0;

    font-family: "Bebas Neue", sans-serif;

    font-size: 50px;

    font-weight: 400;

    line-height: 0.95;

    letter-spacing: 0;

    text-transform: uppercase;

    color: #f2f2ee;
}


/* =========================================================
   CARD BOTTOM
========================================================= */

.nm-expertise__card-bottom {
    position: relative;

    display: grid;

    align-items: end;

    gap: 35px;

    width: 100%;

    margin-top: auto;

    padding-top: 25px;

    box-sizing: border-box;
}


/* =========================================================
   CARD SUBTITLE
========================================================= */

.nm-expertise__subtitle {
    position: relative;

    margin: 0;

    padding: 0;

    font-family: "Inter", sans-serif;

    font-size: 12px;

    font-weight: 400;

    line-height: 26px;

    letter-spacing: 0.7px;

    text-transform: uppercase;

    color: #97ff57;
}


/* =========================================================
   CARD DESCRIPTION
========================================================= */

.nm-expertise__description {
    position: relative;

    max-width: 650px;

    margin: 0;

    padding: 0;

    font-family: "Inter", sans-serif;

    font-size: 19px;

    font-weight: 400;

    line-height: 26px;

    color: #999596;
}


/* =========================================================
   GSAP PIN SUPPORT
========================================================= */

.nm-expertise .pin-spacer {
    overflow: visible !important;
}


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

@media screen and (max-width: 1024px) {

    .nm-expertise {
        --nm-expertise-left: 42%;
        --nm-expertise-padding: 25px;
    }


    .nm-expertise__grid {
        grid-template-columns:
            var(--nm-expertise-left)
            minmax(0, 1fr);
    }


    /* ---------------------------------------------------------
       PINNED TITLE
    --------------------------------------------------------- */

    .nm-expertise__sticky {
        position: relative;

        width: 100%;

        height: 100vh;

        padding-right: 30px;
    }


    /* ---------------------------------------------------------
       TITLE
    --------------------------------------------------------- */

    .nm-expertise__title {
        font-size: clamp(70px, 8vw, 95px);

        line-height: 0.88;
    }


    /* ---------------------------------------------------------
       RIGHT COLUMN
    --------------------------------------------------------- */

    .nm-expertise__right {
        padding-top: 10vh;

        padding-bottom: 16vh;
    }


    /* ---------------------------------------------------------
       CARD
    --------------------------------------------------------- */

    .nm-expertise__card {
        width: 100%;

        min-height: 380px;

        /*
         * Keep the 15px separation on tablet.
         */
        margin: 0 0 15px 0 !important;

        padding:
            36px
            30px;

        border-radius: 8px;
    }


    .nm-expertise__card:last-child {
        margin-bottom: 0 !important;
    }


    .nm-expertise__card-title {
        font-size: 42px;
    }


    .nm-expertise__card-bottom {
        grid-template-columns: 1fr;

        gap: 15px;

        padding-top: 45px;
    }


    .nm-expertise__description {
        max-width: 100%;

        font-size: 15px;
    }
}


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

@media screen and (max-width: 767px) {

    .nm-expertise {
        --nm-expertise-padding: 20px;

        position: relative;

        width: 100%;

        overflow: hidden;
    }


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

    .nm-expertise__grid {
        position: relative;

        display: block;

        width: 100%;

        padding:
            0px 20px !important;
        

        box-sizing: border-box;

        overflow: hidden;
    }


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

    .nm-expertise__left {
        position: relative;

        display: block;

        width: 100%;

        min-width: 0;

        overflow: visible;
    }


    /* =====================================================
       MOBILE TITLE AREA
    ===================================================== */

    .nm-expertise__sticky {
        position: relative !important;

        top: auto !important;
        right: auto !important;
        bottom: auto !important;
        left: auto !important;

        display: block;

        width: 100% !important;

        height: auto !important;

        min-height: 0 !important;

        margin: 0 !important;

        padding:
            0
            0
            45px;

        box-sizing: border-box;

        transform: none !important;

        overflow: visible;

        will-change: auto;
    }


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

    .nm-expertise__eyebrow {
        margin-bottom: 20px;

        font-size: 11px;
    }


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

    .nm-expertise__title {
        position: relative;

        display: block;

        width: 100%;

        max-width: 100%;

        font-size: clamp(58px, 18vw, 82px);

        line-height: 0.9;

        letter-spacing: 0;
    }


    .nm-expertise__title-muted {
        display: none;
    }


    .nm-expertise__title-active {
        position: relative;

        top: auto;
        right: auto;
        bottom: auto;
        left: auto;

        display: block;

        width: 100%;

        height: auto;

        color: #1d1b1c;

        clip-path: none !important;

        -webkit-clip-path: none !important;

        transform: none !important;

        will-change: auto;
    }


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

    .nm-expertise__right {
        position: relative;

        width: 100%;

        min-width: 0;

        padding: 0;

        overflow: visible;
    }


    /* =====================================================
       MOBILE CARDS WRAPPER
    ===================================================== */

    .nm-expertise__cards {
        position: relative;

        display: flex;

        flex-direction: column;

        width: 100%;

        /*
         * Margin on individual cards handles spacing.
         */
        gap: 0;

        margin: 0;

        padding: 0;

        overflow: visible;
    }


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

    .nm-expertise__card {
        position: relative;

        width: 100%;

        min-height: 410px;

        /*
         * Keep visible separation.
         */
        margin: 0 0 15px 0 !important;

        padding:
            32px
            25px;

        border-radius: 8px;

        /*
         * Disable desktop GSAP horizontal movement.
         */
        transform: none !important;

        will-change: auto;
    }


    .nm-expertise__card:last-child {
        margin-bottom: 0 !important;
    }


    /* =====================================================
       MOBILE CARD NUMBER
    ===================================================== */

    .nm-expertise__number {
        margin-bottom: 22px;

        font-size: 11px;
    }


    /* =====================================================
       MOBILE CARD TITLE
    ===================================================== */

    .nm-expertise__card-title {
        font-size: 43px;

        line-height: 0.95;
    }


    /* =====================================================
       MOBILE CARD BOTTOM
    ===================================================== */

    .nm-expertise__card-bottom {
        grid-template-columns: 1fr;

        gap: 15px;

        padding-top: 50px;
    }


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

    .nm-expertise__subtitle {
        font-size: 10px;
    }


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

    .nm-expertise__description {
        max-width: 100%;

        font-size: 15px;

        line-height: 1.5;
    }
}