:root {
    --ink: #103062;
    --muted: #66727c;
    --paper: #f4f6f3;
    --white: #ffffff;
    --line: #d7ded9;

    /* NexIT Brand Colors */
    --navy: #103062;
    --green: #47704c;
    --orange: #f15a24;

    /* Dark Footer */
    --dark: #071b32;
}


/* =========================================================
   GLOBAL
========================================================= */

* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    background: var(--paper);
    color: var(--ink);
    font-family: "DM Sans", sans-serif;
}

h1,
h2,
h3,
.navbar-brand {
    font-family: "Manrope", sans-serif;
}

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


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

.site-nav {
    padding: 22px 0;

    transition:
        background 0.3s ease,
        padding 0.3s ease,
        box-shadow 0.3s ease;

    z-index: 100;

    /* Transparent at top */
    background: linear-gradient(
        180deg,
        rgba(0, 0, 0, 0.55),
        transparent
    );
}


/* =========================================================
   NAVBAR AFTER SCROLL
========================================================= */

.site-nav.scrolled {
    background: #ffffff !important;

    padding: 12px 0;

    box-shadow:
        0 5px 20px rgba(16, 48, 98, 0.15);

    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}


/* =========================================================
   LOGO
========================================================= */

.navbar-brand {
    font-weight: 800;

    font-size: 27px;

    letter-spacing: -1.5px;

    color: #ffffff;

    display: flex;

    align-items: center;

    gap: 9px;
}

.nexit-logo {
    width: 180px;

    height: 54px;

    object-fit: contain;

    display: block;

    transition:
        width 0.3s ease,
        height 0.3s ease;
}

.footer-logo {
    width: 155px;

    height: auto;
}


/* =========================================================
   BRAND MARK
========================================================= */

.brand-mark {
    display: grid;

    place-items: center;

    width: 33px;

    height: 33px;

    border: 2px solid var(--orange);

    border-radius: 50%;

    font-size: 18px;

    color: var(--orange);
}

.navbar-brand > span:last-child > span {
    color: var(--orange);
}


/* =========================================================
   NAVIGATION LINKS - TOP
========================================================= */

.nav-link {
    color:
        rgba(255, 255, 255, 0.88) !important;

    font-size: 14px;

    transition:
        color 0.25s ease;
}

.nav-link:hover {
    color:
        var(--orange) !important;
}


/* =========================================================
   NAVIGATION LINKS - SCROLLED
========================================================= */

.site-nav.scrolled .nav-link {
    color:
        #103062 !important;
}

.site-nav.scrolled .nav-link:hover {
    color:
        #f15a24 !important;
}


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

.nav-cta {
    background:
        var(--orange);

    color:
        #ffffff;

    padding:
        12px 17px;

    border-radius:
        30px;

    font-weight:
        700;

    font-size:
        13px;

    transition:
        background 0.25s ease,
        color 0.25s ease,
        transform 0.25s ease;
}

.nav-cta span {
    margin-left:
        12px;
}

.nav-cta:hover {
    background:
        #103062;

    color:
        #ffffff;

    transform:
        translateY(-2px);
}


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

.site-nav.scrolled .nav-cta {
    background:
        #f15a24;

    color:
        #ffffff;
}

.site-nav.scrolled .nav-cta:hover {
    background:
        #103062;

    color:
        #ffffff;
}


/* =========================================================
   NAVBAR TOGGLER
========================================================= */

.navbar-toggler {
    border:
        1px solid
        rgba(255, 255, 255, 0.6);
}

.navbar-toggler-icon {
    filter:
        invert(1);
}


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

.hero {
    min-height:
        100vh;

    background:
        #0a1616;

    position:
        relative;

    color:
        #ffffff;

    overflow:
        hidden;

    display:
        flex;

    align-items:
        center;
}

.hero-bg {
    position:
        absolute;

    inset:
        0;

    background:
        linear-gradient(
            90deg,
            rgba(5, 17, 17, 0.96) 0%,
            rgba(5, 17, 17, 0.76) 45%,
            rgba(5, 17, 17, 0.20) 100%
        ),
        url("https://images.unsplash.com/photo-1558494949-ef010cbdcc31?auto=format&fit=crop&w=2200&q=85")
        center / cover;

    transform:
        scale(1.03);
}

.hero-bg::after {
    content:
        "";

    position:
        absolute;

    inset:
        0;

    background:
        radial-gradient(
            circle at 80% 35%,
            rgba(71, 112, 76, 0.28),
            transparent 32%
        );
}

.hero-inner {
    position:
        relative;

    z-index:
        2;

    padding-top:
        100px;
}

.hero-copy {
    max-width:
        850px;
}


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

.eyebrow {
    display:
        flex;

    align-items:
        center;

    gap:
        12px;

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

    margin-bottom:
        28px;

    font-size:
        11px;

    letter-spacing:
        2.2px;

    font-weight:
        700;
}

.eyebrow span {
    width:
        7px;

    height:
        7px;

    background:
        var(--orange);

    border-radius:
        50%;
}


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

.hero h1 {
    font-size:
        clamp(54px, 7.2vw, 105px);

    line-height:
        0.93;

    letter-spacing:
        -5px;

    margin:
        0 0 30px;

    font-weight:
        800;
}

.hero h1 em {
    font-style:
        normal;

    color:
        var(--orange);
}

.hero p {
    font-size:
        18px;

    line-height:
        1.65;

    max-width:
        600px;

    color:
        rgba(255, 255, 255, 0.72);
}


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

.hero-actions {
    display:
        flex;

    gap:
        15px;

    align-items:
        center;

    margin-top:
        34px;
}

.btn-main {
    display:
        inline-flex;

    align-items:
        center;

    gap:
        28px;

    background:
        var(--orange);

    color:
        #ffffff;

    padding:
        15px 18px 15px 21px;

    border-radius:
        2px;

    font-weight:
        700;

    font-size:
        14px;

    transition:
        background 0.25s ease,
        color 0.25s ease,
        transform 0.25s ease;
}

.btn-main:hover {
    background:
        #ffffff;

    color:
        var(--navy);

    transform:
        translateY(-2px);
}

.btn-main span {
    font-size:
        20px;
}

.btn-quiet {
    color:
        #ffffff;

    padding:
        15px 10px;

    font-weight:
        600;

    font-size:
        14px;
}

.btn-quiet:hover {
    color:
        var(--orange);
}


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

.hero-stat {
    position:
        absolute;

    right:
        0;

    bottom:
        0;

    display:
        flex;

    gap:
        14px;

    align-items:
        center;
}

.hero-stat strong {
    font:
        800 80px / 1
        "Manrope";

    color:
        var(--orange);

    letter-spacing:
        -5px;
}

.hero-stat span {
    font-size:
        11px;

    text-transform:
        uppercase;

    letter-spacing:
        1.4px;

    color:
        rgba(255, 255, 255, 0.62);
}


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

.hero-bottom {
    position:
        absolute;

    bottom:
        27px;

    left:
        0;

    right:
        0;

    font-size:
        9px;

    letter-spacing:
        2px;

    color:
        rgba(255, 255, 255, 0.5);
}

.scroll-line {
    height:
        1px;

    width:
        70%;

    background:
        rgba(255, 255, 255, 0.2);
}


/* =========================================================
   COMMON SECTIONS
========================================================= */

.section-pad {
    padding:
        120px 0;
}

.section-kicker {
    color:
        #78827f;

    margin-bottom:
        28px;

    font-size:
        11px;

    letter-spacing:
        2.2px;

    font-weight:
        700;
}


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

.intro {
    background:
        var(--paper);
}

.intro h2,
.services h2,
.work h2,
.about h2,
.contact h2 {
    font-size:
        clamp(42px, 5vw, 72px);

    line-height:
        1;

    letter-spacing:
        -3.5px;

    font-weight:
        800;

    margin:
        0;
}

.intro h2 span,
.services h2 span,
.work h2 span,
.about h2 span {
    color:
        var(--green);
}

.lead-copy {
    font-size:
        18px;

    line-height:
        1.7;

    color:
        #586260;

    max-width:
        500px;

    margin:
        0 0 24px;
}

.text-link {
    font-weight:
        700;

    font-size:
        14px;

    border-bottom:
        1px solid
        #9da6a2;

    padding-bottom:
        6px;
}

.text-link span {
    margin-left:
        15px;
}

.text-link:hover {
    color:
        var(--orange);
}


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

.services {
    background:
        var(--navy);

    color:
        #ffffff;
}

.services .section-kicker {
    color:
        #a7b6c7;
}

.section-head {
    margin-bottom:
        65px;
}

.section-head > p {
    color:
        #b5c1cf;

    font-size:
        14px;

    line-height:
        1.7;

    margin:
        0;
}

.service-grid {
    display:
        grid;

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

    border-top:
        1px solid
        #34537a;

    border-left:
        1px solid
        #34537a;
}

.service-card {
    min-height:
        370px;

    padding:
        31px;

    border-right:
        1px solid
        #34537a;

    border-bottom:
        1px solid
        #34537a;

    position:
        relative;

    transition:
        background 0.35s ease,
        transform 0.35s ease;
}

.service-card:hover {
    background:
        #183d61;

    transform:
        translateY(-4px);
}

.service-no {
    font-size:
        10px;

    letter-spacing:
        2px;

    color:
        #9aaabd;
}


/* =========================================================
   SERVICE ICON
========================================================= */

.service-icon {
    width:
        42px;

    height:
        42px;

    border:
        1px solid
        #607894;

    border-radius:
        50%;

    margin:
        48px 0 25px;

    position:
        relative;
}

.service-icon::after {
    content:
        "";

    position:
        absolute;

    width:
        9px;

    height:
        9px;

    border-radius:
        50%;

    background:
        var(--orange);

    top:
        50%;

    left:
        50%;

    transform:
        translate(-50%, -50%);
}

.service-card h3 {
    font-size:
        24px;

    letter-spacing:
        -1px;
}

.service-card p {
    font-size:
        13px;

    line-height:
        1.65;

    color:
        #b7c4d1;

    max-width:
        330px;
}

.service-card a {
    position:
        absolute;

    bottom:
        30px;

    color:
        var(--orange);

    font-size:
        12px;

    font-weight:
        700;
}

.service-card a span {
    margin-left:
        18px;
}


/* =========================================================
   SELECTED WORKS / PROJECTS
========================================================= */

.work {
    background:
        var(--paper);
}

.work-title-row {
    display:
        flex;

    justify-content:
        space-between;

    align-items:
        end;

    margin-bottom:
        60px;
}

.work-title-row p {
    max-width:
        360px;

    color:
        #687370;

    font-size:
        14px;

    line-height:
        1.7;
}


/* =========================================================
   PROJECT GRID
========================================================= */

.project-grid {
    display:
        grid;

    grid-template-columns:
        1.2fr 0.8fr;

    gap:
        18px;
}


/* =========================================================
   PROJECT CARD
========================================================= */

.project-card {
    min-height:
        470px;

    position:
        relative;

    overflow:
        hidden;

    background-size:
        cover;

    background-position:
        center;

    transition:
        transform 0.4s ease;
}

.project-card:hover {
    transform:
        translateY(-6px);
}


/* =========================================================
   PROJECT BACKGROUNDS
========================================================= */

.project-1 {
    background-image:
        url("https://images.unsplash.com/photo-1551434678-e076c223a692?auto=format&fit=crop&w=1400&q=80");
}

.project-2 {
    background-image:
        url("https://images.unsplash.com/photo-1544197150-b99a580bb7a8?auto=format&fit=crop&w=1400&q=80");
}

.project-3 {
    background-image:
        url("https://images.unsplash.com/photo-1563770660941-10a4a5b5f9f1?auto=format&fit=crop&w=1400&q=80");
}

.project-4 {
    background-image:
        url("https://images.unsplash.com/photo-1509391366360-2e959784a276?auto=format&fit=crop&w=1400&q=80");
}

.project-3,
.project-4 {
    min-height:
        350px;
}


/* =========================================================
   PROJECT OVERLAY
========================================================= */

.project-overlay {
    position:
        absolute;

    inset:
        0;

    background:
        linear-gradient(
            180deg,
            transparent 35%,
            rgba(0, 0, 0, 0.80)
        );
}


/* =========================================================
   PROJECT CONTENT
========================================================= */

.project-content {
    position:
        absolute;

    left:
        30px;

    right:
        30px;

    bottom:
        28px;

    color:
        #ffffff;
}

.project-tag {
    display:
        inline-block;

    font-size:
        9px;

    text-transform:
        uppercase;

    letter-spacing:
        1.6px;

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

    padding:
        7px 9px;

    margin-bottom:
        13px;
}

.project-content h3 {
    font-size:
        31px;

    margin:
        0 0 3px;

    letter-spacing:
        -1px;
}

.project-content p {
    font-size:
        12px;

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

    margin:
        0;
}


/* =========================================================
   PROJECT ARROW
========================================================= */

.round-arrow {
    position:
        absolute;

    right:
        0;

    bottom:
        0;

    width:
        45px;

    height:
        45px;

    border-radius:
        50%;

    background:
        var(--orange);

    color:
        #ffffff;

    display:
        grid;

    place-items:
        center;

    font-size:
        19px;

    transition:
        background 0.25s ease,
        transform 0.25s ease;
}

.project-card:hover .round-arrow {
    background:
        var(--navy);

    transform:
        rotate(-45deg);
}


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

.about {
    background:
        #ffffff;
}

.about-copy {
    border-top:
        1px solid
        var(--line);

    padding-top:
        35px;
}

.about-copy .big {
    font:
        500 27px / 1.4
        "Manrope";

    letter-spacing:
        -1px;

    max-width:
        720px;
}

.values {
    display:
        grid;

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

    gap:
        22px;

    margin-top:
        65px;
}

.values div {
    border-top:
        1px solid
        var(--line);

    padding-top:
        17px;
}

.values b {
    font-size:
        10px;

    color:
        #83908c;

    display:
        block;

    margin-bottom:
        35px;
}

.values span {
    font-weight:
        700;

    display:
        block;
}

.values small {
    color:
        #78827f;

    font-size:
        12px;

    line-height:
        1.5;

    display:
        block;

    margin-top:
        7px;
}


/* =========================================================
   INDUSTRIES
========================================================= */

.industries {
    background:
        #e9eee9;
}

.industry-list {
    border-top:
        1px solid
        #c6d0c8;
}

.industry-list div {
    display:
        grid;

    grid-template-columns:
        70px 1fr 40px;

    align-items:
        center;

    padding:
        25px 0;

    border-bottom:
        1px solid
        #c6d0c8;

    font:
        700 clamp(23px, 3vw, 40px) / 1
        "Manrope";

    letter-spacing:
        -1.5px;
}

.industry-list span {
    font:
        11px
        "DM Sans";

    color:
        #77827e;
}

.industry-list b {
    font-size:
        20px;

    text-align:
        right;

    color:
        var(--green);
}


/* =========================================================
   CONTACT
========================================================= */

.contact {
    background:
        var(--dark);

    color:
        #ffffff;
}

.contact-box {
    padding:
        30px 0 20px;
}

.contact .section-kicker {
    color:
        #9aaabd;
}

.contact h2 {
    font-size:
        clamp(58px, 8vw, 110px);

    letter-spacing:
        -6px;
}

.contact p {
    max-width:
        470px;

    color:
        #b5c1cf;

    margin:
        28px 0;

    font-size:
        16px;

    line-height:
        1.7;
}

.contact-actions {
    display:
        flex;

    gap:
        12px;

    flex-wrap:
        wrap;
}

.btn-outline {
    border:
        1px solid
        #61748d;

    color:
        #ffffff;

    padding:
        15px 21px;

    font-weight:
        700;

    font-size:
        14px;

    transition:
        border 0.25s ease,
        color 0.25s ease;
}

.btn-outline:hover {
    border-color:
        var(--orange);

    color:
        var(--orange);
}


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

footer {
    background:
        var(--dark);

    color:
        #7d8995;

    padding:
        50px 0 22px;
}

.footer-top {
    display:
        grid;

    grid-template-columns:
        1fr 1fr 1fr;

    gap:
        30px;

    padding-bottom:
        70px;
}

.footer-brand {
    color:
        #ffffff !important;
}

.footer-top p,
.footer-top div {
    font-size:
        12px;

    line-height:
        1.7;

    margin:
        0;
}

.footer-top a:hover {
    color:
        var(--orange);
}

.footer-bottom {
    border-top:
        1px solid
        #294667;

    padding-top:
        20px;

    display:
        flex;

    justify-content:
        space-between;

    font-size:
        10px;

    letter-spacing:
        0.5px;
}

.footer-bottom a {
    color:
        #ffffff;
}

.footer-bottom a:hover {
    color:
        var(--orange);
}


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

@media (max-width: 991px) {

    /*
        TOP OF PAGE
        Transparent navbar over hero
    */

    .site-nav {
        background:
            linear-gradient(
                180deg,
                rgba(0, 0, 0, 0.55),
                transparent
            ) !important;

        padding:
            14px 0;

        box-shadow:
            none;

        backdrop-filter:
            none;

        -webkit-backdrop-filter:
            none;
    }


    /*
        AFTER SCROLLING
        White navbar
    */

    .site-nav.scrolled {
        background:
            #ffffff !important;

        padding:
            12px 0;

        box-shadow:
            0 5px 20px
            rgba(16, 48, 98, 0.15);

        backdrop-filter:
            none;

        -webkit-backdrop-filter:
            none;
    }


    /*
        TOP NAVIGATION TEXT
        White
    */

    .site-nav .nav-link {
        color:
            #ffffff !important;
    }

    .site-nav .nav-link:hover {
        color:
            #f15a24 !important;
    }


    /*
        SCROLLED NAVIGATION TEXT
        Navy
    */

    .site-nav.scrolled .nav-link {
        color:
            #103062 !important;
    }

    .site-nav.scrolled .nav-link:hover {
        color:
            #f15a24 !important;
    }


    /*
        CTA
    */

    .site-nav .nav-cta {
        background:
            #f15a24;

        color:
            #ffffff;
    }

    .site-nav .nav-cta:hover {
        background:
            #103062;

        color:
            #ffffff;
    }


    /*
        HAMBURGER AT TOP
        White
    */

    .navbar-toggler {
        border-color:
            rgba(255, 255, 255, 0.6);
    }

    .navbar-toggler-icon {
        filter:
            invert(1);
    }


    /*
        HAMBURGER AFTER SCROLL
        Navy
    */

    .site-nav.scrolled .navbar-toggler {
        border-color:
            #103062;
    }

    .site-nav.scrolled .navbar-toggler-icon {
        filter:
            none;
    }


    /*
        LOGO
    */

    .nexit-logo {
        width:
            165px;

        height:
            auto;
    }


    /*
        HERO
    */

    .hero h1 {
        letter-spacing:
            -3px;
    }

    .hero-stat {
        display:
            none;
    }


    /*
        SERVICES
    */

    .service-grid {
        grid-template-columns:
            repeat(2, 1fr);
    }


    /*
        SELECTED WORKS
    */

    .project-grid {
        grid-template-columns:
            1fr 1fr;
    }

    .project-card {
        min-height:
            390px;
    }

    .project-3,
    .project-4 {
        min-height:
            300px;
    }
}


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

@media (max-width: 767px) {

    .section-pad {
        padding:
            80px 0;
    }


    /* -----------------------------------------------------
       HERO
    ----------------------------------------------------- */

    .hero {
        min-height:
            760px;
    }

    .hero-inner {
        padding-top:
            100px;
    }

    .hero h1 {
        font-size:
            53px;

        letter-spacing:
            -3px;
    }

    .hero p {
        font-size:
            16px;
    }

    .hero-bottom {
        display:
            none;
    }


    /* -----------------------------------------------------
       LOGO
    ----------------------------------------------------- */

    .nexit-logo {
        width:
            150px;

        height:
            auto;
    }


    /* -----------------------------------------------------
       SERVICES
    ----------------------------------------------------- */

    .service-grid {
        grid-template-columns:
            1fr;
    }

    .service-card {
        min-height:
            330px;
    }


    /* -----------------------------------------------------
       SELECTED WORKS
    ----------------------------------------------------- */

    .project-grid {
        grid-template-columns:
            1fr;
    }

    .project-card,
    .project-3,
    .project-4 {
        min-height:
            390px;
    }

    .work-title-row {
        display:
            block;
    }

    .work-title-row p {
        margin-top:
            25px;
    }


    /* -----------------------------------------------------
       ABOUT
    ----------------------------------------------------- */

    .values {
        grid-template-columns:
            1fr;
    }


    /* -----------------------------------------------------
       CONTACT
    ----------------------------------------------------- */

    .contact h2 {
        letter-spacing:
            -3px;
    }


    /* -----------------------------------------------------
       INDUSTRIES
    ----------------------------------------------------- */

    .industry-list div {
        grid-template-columns:
            45px 1fr 30px;
    }


    /* -----------------------------------------------------
       FOOTER
    ----------------------------------------------------- */

    .footer-top {
        grid-template-columns:
            1fr;

        gap:
            25px;

        padding-bottom:
            45px;
    }

    .footer-bottom {
        display:
            grid;

        gap:
            10px;
    }
}