/* =========================================================
   ACCESS WEBSITE
   SHARED HEADER
========================================================= */


/* =========================================================
   HEADER
========================================================= */

.site-header {
    position: absolute;

    top: 0;
    left: 0;

    width: 100%;

    z-index: 500;

    padding:
        22px
        var(--page-padding-desktop);

    display: flex;

    align-items: center;
    justify-content: space-between;

    border-bottom:
        1px solid
        rgba(255, 255, 255, .065);

    background:
        rgba(2, 6, 7, .68);

    -webkit-backdrop-filter:
        blur(18px);

    backdrop-filter:
        blur(18px);

    transition:
        background .35s ease,
        backdrop-filter .35s ease,
        padding .35s var(--ease),
        border-color .35s ease;
}


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

.header-logo {
    position: relative;

    z-index: 503;

    display: flex;
    align-items: center;

    flex-shrink: 0;
}


.header-logo img {
    display: block;

    width: 155px;
    height: auto;

    transition:
        transform .4s var(--ease),
        filter .4s ease;
}


.header-logo:hover img {
    transform:
        scale(1.025);

    filter:
        drop-shadow(
            0 0 10px
            rgba(69, 193, 183, .10)
        );
}


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

.desktop-nav {
    display: flex;

    align-items: center;

    gap: 34px;
}


/* =========================================================
   NORMAL NAV LINKS
========================================================= */

.header-nav-link,
.services-trigger {
    position: relative;

    color:
        rgba(255, 255, 255, .70);

    font-size: 12px;
    font-weight: 500;

    white-space: nowrap;

    transition:
        color .3s ease;
}


.header-nav-link::after,
.services-trigger::after {
    content: "";

    position: absolute;

    left: 0;
    bottom: -8px;

    width: 0;
    height: 1px;

    background:
        linear-gradient(
            90deg,
            var(--teal),
            var(--orange)
        );

    transition:
        width .35s var(--ease);
}


.header-nav-link:hover,
.services-trigger:hover {
    color: white;
}


.header-nav-link:hover::after,
.services-trigger:hover::after {
    width: 100%;
}


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

.services-nav {
    position: relative;
}


.services-trigger {
    display: flex;

    align-items: center;

    gap: 9px;

    padding: 0;

    cursor: pointer;
}


.services-chevron {
    width: 7px;
    height: 7px;

    border-right:
        1px solid
        currentColor;

    border-bottom:
        1px solid
        currentColor;

    transform:
        rotate(45deg)
        translateY(-2px);

    transition:
        transform .3s var(--ease);
}


.services-nav.is-open
.services-chevron {
    transform:
        rotate(225deg);
}


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

.services-dropdown {
    position: absolute;

    top:
        calc(100% + 25px);

    right: -38px;

    width: 345px;

    padding: 10px;

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

    border-radius: 20px;

    background:
        rgba(3, 8, 9, .88);

    -webkit-backdrop-filter:
        blur(26px);

    backdrop-filter:
        blur(26px);

    box-shadow:
        0 30px 80px
        rgba(0, 0, 0, .48);

    opacity: 0;
    visibility: hidden;

    pointer-events: none;

    transform:
        translateY(-8px)
        scale(.98);

    transform-origin:
        top right;

    transition:
        opacity .3s ease,
        visibility .3s ease,
        transform .32s var(--ease);
}


.services-nav.is-open
.services-dropdown {
    opacity: 1;
    visibility: visible;

    pointer-events: auto;

    transform:
        translateY(0)
        scale(1);
}


/* =========================================================
   SERVICE ITEM
========================================================= */

.service-dropdown-item {
    display: flex;

    align-items: center;

    gap: 14px;

    width: 100%;

    padding:
        15px
        15px;

    border-radius: 13px;

    color:
        rgba(255, 255, 255, .66);

    transition:
        color .25s ease,
        background .25s ease,
        transform .25s var(--ease);
}


.service-dropdown-item:hover {
    color: white;

    background:
        rgba(255, 255, 255, .055);

    transform:
        translateX(3px);
}


.service-number {
    flex:
        0 0
        22px;

    color:
        var(--teal);

    font-size: 9px;

    letter-spacing:
        .08em;
}


.service-name {
    flex: 1;

    font-size: 12px;
}


.service-arrow {
    color:
        rgba(255, 255, 255, .26);

    transition:
        color .25s ease,
        transform .25s var(--ease);
}


.service-dropdown-item:hover
.service-arrow {
    color:
        var(--orange);

    transform:
        translateX(4px);
}


/* =========================================================
   LET'S TALK
========================================================= */

.header-cta {
    display: flex;

    align-items: center;

    justify-content: center;

    gap: 10px;

    padding:
        12px
        19px;

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

    border-radius:
        999px;

    background:
        rgba(255, 255, 255, .035);

    color: white;

    font-size: 11px;
    font-weight: 600;

    white-space: nowrap;

    -webkit-backdrop-filter:
        blur(12px);

    backdrop-filter:
        blur(12px);

    transition:
        transform .35s var(--ease),
        border-color .35s ease,
        background .35s ease,
        box-shadow .35s ease;
}


.header-cta:hover {
    transform:
        translateY(-2px);

    border-color:
        rgba(69, 193, 183, .55);

    background:
        rgba(69, 193, 183, .055);

    box-shadow:
        -4px 0 15px
        rgba(69, 193, 183, .13),

        4px 0 15px
        rgba(253, 81, 28, .11);
}


.header-cta-arrow {
    color:
        var(--orange);

    font-size: 15px;

    transition:
        transform .3s var(--ease);
}


.header-cta:hover
.header-cta-arrow {
    transform:
        translateX(3px);
}


/* =========================================================
   OPTIONAL SCROLLED HEADER STATE

   We already prepare this now.
   Later when the page has more sections,
   header.js can activate it while scrolling.
========================================================= */

.site-header.is-scrolled {
    position: fixed;

    padding-top: 14px;
    padding-bottom: 14px;

    border-bottom:
        1px solid
        rgba(255, 255, 255, .042);

    background:
        rgba(1, 4, 5, .34);

    -webkit-backdrop-filter:
        blur(22px);

    backdrop-filter:
        blur(22px);
}


.site-header.is-scrolled
.header-logo img {
    width: 138px;
}


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

.mobile-menu-toggle {
    display: none;

    position: relative;

    z-index: 503;

    width: 44px;
    height: 44px;

    flex:
        0 0
        44px;

    border:
        1px solid
        rgba(255, 255, 255, .14);

    border-radius: 50%;

    background:
        rgba(255, 255, 255, .035);

    -webkit-backdrop-filter:
        blur(12px);

    backdrop-filter:
        blur(12px);

    cursor: pointer;
}


.mobile-menu-toggle span {
    position: absolute;

    left: 13px;

    width: 17px;
    height: 1px;

    background: white;

    transform-origin: center;

    transition:
        top .3s var(--ease),
        transform .3s var(--ease);
}


.mobile-menu-toggle span:first-child {
    top: 17px;
}


.mobile-menu-toggle span:last-child {
    top: 24px;
}


.mobile-menu-toggle.is-open
span:first-child {
    top: 21px;

    transform:
        rotate(45deg);
}


.mobile-menu-toggle.is-open
span:last-child {
    top: 21px;

    transform:
        rotate(-45deg);
}


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

.mobile-menu {
    display: none;
}


/* =========================================================
   RESPONSIVE HEADER
========================================================= */

@media (max-width: 1180px) {

    .desktop-nav {
        gap: 22px;
    }


    .header-logo img {
        width: 142px;
    }


    .header-nav-link,
    .services-trigger {
        font-size: 11px;
    }

}


@media (max-width: 900px) {

    .site-header.is-mobile-menu-open {
        position: fixed;
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
    }

    .site-header {
        padding:
            19px
            var(--page-padding-tablet);
    }


    .header-logo img {
        width: 128px;
    }


    .desktop-nav {
        display: none;
    }


    .mobile-menu-toggle {
        display: block;
    }


    .mobile-menu {
        position: fixed;
        height: 100vh;
        height: 100dvh;
        overscroll-behavior: contain;

        inset: 0;

        z-index: 501;

        display: flex;

        align-items: flex-start;

        justify-content: center;

        padding:
            105px
            var(--page-padding-tablet)
            40px;

        overflow-y: auto;

        background:
            radial-gradient(
                circle at 75% 20%,
                rgba(69, 193, 183, .09),
                transparent 28%
            ),

            radial-gradient(
                circle at 20% 85%,
                rgba(253, 81, 28, .06),
                transparent 27%
            ),

            rgba(1, 4, 5, .975);

        -webkit-backdrop-filter:
            blur(24px);

        backdrop-filter:
            blur(24px);

        opacity: 0;
        visibility: hidden;

        pointer-events: none;

        transform:
            translateY(-8px);

        transition:
            opacity .4s ease,
            visibility .4s ease,
            transform .4s var(--ease);
    }


    .mobile-menu.is-open {
        opacity: 1;
        visibility: visible;

        pointer-events: auto;

        transform:
            translateY(0);
    }


    .mobile-menu-inner {
        flex-shrink: 0;
        width:
            min(
                620px,
                100%
            );
    }


    .mobile-menu-label {
        margin-bottom: 20px;

        color:
            var(--teal);

        font-size: 9px;

        font-weight: 600;

        letter-spacing:
            .28em;

        text-transform: uppercase;
    }


    .mobile-services-heading {
        margin-bottom: 12px;

        color:
            rgba(255, 255, 255, .92);

        font-size:
            clamp(
                26px,
                6vw,
                38px
            );

        font-weight: 600;

        letter-spacing:
            -.03em;
    }


    .mobile-services {
        padding-bottom: 22px;

        border-bottom:
            1px solid
            rgba(255, 255, 255, .08);
    }


    .mobile-service-link {
        display: flex;

        align-items: center;

        gap: 13px;

        padding:
            8px
            0;

        color:
            rgba(255, 255, 255, .48);

        font-size: 13px;

        transition:
            color .25s ease,
            transform .25s var(--ease);
    }


    .mobile-service-link span {
        width: 20px;

        color:
            var(--teal);

        font-size: 9px;
    }


    .mobile-service-link:hover {
        color: white;

        transform:
            translateX(4px);
    }


    .mobile-main-links {
        margin-top: 15px;
    }


    .mobile-main-link {
        position: relative;

        display: block;

        padding:
            10px
            0;

        color: white;

        font-size:
            clamp(
                28px,
                7vw,
                46px
            );

        font-weight: 600;

        letter-spacing:
            -.04em;
    }


    .mobile-contact-cta {
        display: flex;

        justify-content: space-between;

        align-items: center;

        margin-top: 26px;

        padding:
            15px
            18px;

        border:
            1px solid
            rgba(255, 255, 255, .15);

        border-radius: 999px;

        color: white;

        font-size: 12px;

        font-weight: 600;

        letter-spacing:
            .08em;

        text-transform: uppercase;
    }

}


@media (max-width: 640px) {

    .site-header {
        padding:
            17px
            var(--page-padding-mobile);
    }


    .header-logo img {
        width: 116px;
    }


    .mobile-menu {
        padding:
            90px
            var(--page-padding-mobile)
            30px;
    }


    .mobile-services-heading {
        font-size: 28px;
    }


    .mobile-service-link {
        font-size: 12px;
    }

}

/* Services architecture: compact desktop mega menu and mobile category disclosure. */
.services-dropdown { right:var(--page-padding-desktop); width:min(1040px,84vw); max-height:min(76vh,680px); overflow-y:auto; }
@media(min-width:901px) { .services-nav { position:static; } .services-dropdown { top:calc(100% - 10px); } }
.mega-overview { display:block; padding:8px 10px 15px; border-bottom:1px solid rgba(255,255,255,.1); color:var(--teal-hot); font-size:11px; font-weight:700; letter-spacing:.13em; text-transform:uppercase; }
.mega-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px 20px; padding-top:13px; }.mega-category{padding:9px;border-radius:10px}.mega-category:hover{background:rgba(255,255,255,.04)}.mega-category-title{display:block;margin-bottom:8px;color:#fff;font-size:11px;font-weight:700;line-height:1.3}.mega-category-title:hover{color:var(--teal-hot)}.mega-service-link{display:block;padding:3px 0 3px 12px;color:rgba(255,255,255,.52);font-size:10px;line-height:1.35}.mega-service-link:hover{color:#fff}
@media(max-width:900px){.mobile-services-heading{display:block}.mobile-service-group{border-top:1px solid rgba(255,255,255,.07)}.mobile-service-group-row{display:flex;align-items:center;justify-content:space-between;gap:15px;padding:11px 0}.mobile-service-group-row>a{color:rgba(255,255,255,.82);font-size:13px;font-weight:600}.mobile-service-expand{width:30px;height:30px;border:1px solid rgba(111,255,242,.3);border-radius:50%;color:var(--teal-hot);cursor:pointer}.mobile-service-children{display:none;padding:0 0 12px 13px}.mobile-service-group.is-open .mobile-service-children{display:grid;gap:8px}.mobile-service-children a{color:rgba(255,255,255,.56);font-size:12px}}