/* =========================================================
   SATOMEN — GLOBAL COMPONENTS
   ========================================================= */


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

/* =========================================================
   SATOMEN — GLOBAL HEADER
   ========================================================= */

.site-header{
    position:fixed;
    inset:0 0 auto;
    width:100%;
    z-index:1000;
    color:var(--white);
    background:transparent;
    border-bottom:1px solid rgba(255,255,255,.14);
    transition:
        background .35s var(--ease),
        box-shadow .35s var(--ease);
}

.site-header.scrolled,
.site-header.menu-open{
    background:var(--ocean-deep);
    box-shadow:0 10px 35px rgba(0,0,0,.1);
}


/* =========================================================
   NAV CONTAINER
   ========================================================= */

.nav-container{
    height:88px;
    padding-inline:var(--page-padding);
    display:grid;
    grid-template-columns:1fr auto 1fr;
    align-items:center;
    transition:height .35s var(--ease);
}

.site-header.scrolled .nav-container{
    height:70px;
}


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

.site-logo{
    justify-self:start;
    display:flex;
    align-items:center;
}

.site-logo img{
    display:block;
    width:145px;
    height:auto;
    transition:width .35s var(--ease);
}

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


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

.desktop-nav{
    height:100%;
    display:flex;
    align-items:center;
    gap:clamp(25px,2.5vw,46px);
}

.desktop-nav > a,
.nav-dropdown-trigger{
    position:relative;
    height:100%;
    display:flex;
    align-items:center;
    padding:0;
    border:0;
    background:none;
    color:inherit;
    font:500 13px/1 inherit;
    cursor:pointer;
}


/* NAV LINK UNDERLINE */

.desktop-nav > a::after{
    content:"";
    position:absolute;
    left:0;
    bottom:25px;
    width:100%;
    height:1px;
    background:currentColor;
    transform:scaleX(0);
    transform-origin:right;
    transition:transform .3s var(--ease);
}

.desktop-nav > a:hover::after{
    transform:scaleX(1);
    transform-origin:left;
}


/* =========================================================
   CAPABILITIES DROPDOWN
   ========================================================= */

.nav-dropdown{
    position:static;
    height:100%;
}

.nav-dropdown-trigger{
    gap:10px;
}

.nav-chevron{
    width:6px;
    height:6px;
    border-right:1px solid currentColor;
    border-bottom:1px solid currentColor;
    transform:rotate(45deg) translateY(-2px);
    transition:transform .3s var(--ease);
}

.nav-dropdown:hover .nav-chevron,
.nav-dropdown.open .nav-chevron{
    transform:rotate(225deg) translate(-1px,-1px);
}


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

.nav-cta{
    justify-self:end;
    height:52px;
    padding:0 22px;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:24px;
    background:var(--satomen-orange);
    color:var(--ocean-deep);
    font-size:11px;
    line-height:1;
    font-weight:700;
    letter-spacing:.08em;
    text-transform:uppercase;
    transition:
        height .35s var(--ease),
        background .25s ease;
}

.nav-cta span{
    font-size:17px;
    font-weight:400;
}

.nav-cta:hover{
    background:var(--white);
}

.site-header.scrolled .nav-cta{
    height:44px;
}


/* =========================================================
   MEGA MENU
   ========================================================= */

.mega-menu{
    position:absolute;
    top:100%;
    left:0;
    width:100%;
    padding:52px var(--page-padding) 58px;

    display:grid;
    grid-template-columns:minmax(250px,.7fr) 2fr;
    gap:clamp(55px,7vw,120px);

    background:var(--off-white);
    color:var(--ocean-deep);

    border-top:1px solid rgba(2,38,58,.08);
    box-shadow:0 30px 60px rgba(2,38,58,.1);

    opacity:0;
    visibility:hidden;
    pointer-events:none;
    transform:translateY(-8px);

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

.nav-dropdown:hover .mega-menu,
.nav-dropdown.open .mega-menu{
    opacity:1;
    visibility:visible;
    pointer-events:auto;
    transform:translateY(0);
}


/* =========================================================
   MEGA MENU INTRO
   ========================================================= */

.mega-intro > span{
    display:block;
    margin-bottom:22px;
    color:var(--satomen-orange);
    font-size:12px;
    line-height:1;
    font-weight:700;
    letter-spacing:.13em;
    text-transform:uppercase;
}

.mega-intro h3{
    max-width:390px;
    margin:0 0 22px;
    color:var(--ocean-deep);
    font-size:clamp(29px,2.5vw,42px);
    line-height:1;
    font-weight:400;
    letter-spacing:-.045em;
}

.mega-intro p{
    max-width:340px;
    margin:0;
    color:#667983;
    font-size:15px;
    line-height:1.7;
}


/* =========================================================
   CAPABILITY LINKS
   ========================================================= */

.mega-links{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    column-gap:60px;
    row-gap:0;
}

.mega-links a{
    min-height:90px;
    padding:0;

    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:30px;

    color:var(--ocean-deep);
    border-bottom:1px solid var(--border-light);

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

.mega-links a:hover{
    padding-left:8px;
}

.mega-links strong{
    max-width:330px;
    font-size:clamp(18px,1.45vw,23px);
    line-height:1.15;
    font-weight:400;
    letter-spacing:-.03em;
}

.mega-links i{
    flex:0 0 auto;
    font-style:normal;
    font-size:19px;
    line-height:1;
    transition:
        transform .25s ease,
        color .25s ease;
}

.mega-links a:hover i{
    color:var(--satomen-orange);
    transform:translate(4px,-4px);
}

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

.mobile-menu-toggle,
.mobile-nav{
    display:none;
}


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

@media(max-width:900px){

    .nav-container{
        height:72px;
        grid-template-columns:1fr auto;
    }

    .site-header.scrolled .nav-container{
        height:64px;
    }

    .site-logo img,
    .site-header.scrolled .site-logo img{
        width:118px;
    }

    .desktop-nav,
    .nav-container > .nav-cta{
        display:none;
    }


    /* MOBILE MENU BUTTON */

    .mobile-menu-toggle{
        position:relative;
        justify-self:end;
        display:block;
        width:40px;
        height:40px;
        padding:0;
        border:0;
        background:none;
        color:inherit;
        cursor:pointer;
    }

    .mobile-menu-toggle span{
        position:absolute;
        left:7px;
        width:26px;
        height:1px;
        background:currentColor;
        transition:
            top .3s var(--ease),
            transform .3s var(--ease);
    }

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

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

    .mobile-menu-toggle[aria-expanded="true"] span:first-child{
        top:20px;
        transform:rotate(45deg);
    }

    .mobile-menu-toggle[aria-expanded="true"] span:last-child{
        top:20px;
        transform:rotate(-45deg);
    }


    /* MOBILE NAVIGATION */

    .mobile-nav{
        position:absolute;
        top:100%;
        left:0;
        width:100%;
        height:calc(100dvh - 64px);
        padding:28px var(--page-padding) 40px;
        overflow-y:auto;
        overscroll-behavior:contain;
        background:var(--ocean-deep);
        color:var(--white);
    }

    .site-header.menu-open .mobile-nav{
        display:block;
    }


    /* PRIMARY LINKS */

    .mobile-nav > a,
    .mobile-capabilities{
        width:100%;
        min-height:64px;

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

        padding:0;

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

        background:none;
        color:inherit;

        font-size:clamp(22px,6vw,32px);
        line-height:1.1;
        font-weight:400;
        text-align:left;
    }


    /* MOBILE CAPABILITIES */

    .mobile-capabilities{
        cursor:pointer;
    }

    .mobile-capabilities .nav-chevron{
        margin-right:5px;
    }

    .mobile-capabilities[aria-expanded="true"] .nav-chevron{
        transform:rotate(225deg);
    }

    .mobile-capability-links{
        display:none;
        padding:8px 0 18px 18px;
    }

    .mobile-capability-links.open{
        display:block;
    }

    .mobile-capability-links a{
        min-height:58px;
        display:flex;
        align-items:center;
        justify-content:space-between;
        gap:20px;
        padding:14px 4px 14px 0;
        border-bottom:1px solid rgba(255,255,255,.1);
        color:rgba(255,255,255,.82);
    }

    .mobile-capability-links strong{
        font-size:15px;
        line-height:1.25;
        font-weight:400;
    }

    .mobile-capability-links i{
        flex:0 0 auto;
        color:var(--satomen-orange);
        font-style:normal;
        font-size:17px;
    }


    /* MOBILE QUOTE CTA */

    .mobile-nav > .mobile-quote{
        min-height:60px;
        margin-top:30px;
        padding:0 20px;

        border:0;

        background:var(--satomen-orange);
        color:var(--ocean-deep);

        font-size:11px;
        line-height:1;
        font-weight:700;
        letter-spacing:.08em;
        text-transform:uppercase;
    }

    .mobile-quote span{
        font-size:18px;
    }

    body.menu-open{
        overflow:hidden;
    }
}


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

@media(max-width:480px){

    .nav-container{
        height:66px;
    }

    .site-header.scrolled .nav-container{
        height:64px;
    }

    .site-logo img,
    .site-header.scrolled .site-logo img{
        width:105px;
    }

    .mobile-nav{
        padding-inline:20px;
    }

    .mobile-nav > a,
    .mobile-capabilities{
        min-height:61px;
        font-size:25px;
    }

    .mobile-capability-links{
        padding-left:8px;
    }

    .mobile-capability-links a{
        min-height:55px;
    }

    .mobile-capability-links strong{
        font-size:14px;
    }
}

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

/* =========================================================
   SATOMEN — FOOTER
========================================================= */

.site-footer{
    position:relative;
    overflow:hidden;

    padding:0 var(--page-padding);

    background:var(--ocean-deep);
    color:var(--white);
}

.footer-container{
    width:100%;
    max-width:var(--container);
    margin:auto;
}


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

.footer-cta{
    padding:clamp(70px,7vw,100px) 0 65px;
}

.footer-cta-main{
    display:grid;
    grid-template-columns:minmax(0,1.5fr) minmax(280px,.5fr);

    gap:clamp(60px,8vw,130px);
    align-items:end;
}


/* KICKER */

.footer-kicker{
    display:block;

    margin-bottom:38px;

    color:var(--satomen-orange);

    font-size:8px;
    font-weight:700;

    letter-spacing:.17em;
}


/* HEADING */

.footer-cta h2{
    margin:0;

    font-size:clamp(62px,7vw,105px);
    font-weight:400;

    line-height:.82;
    letter-spacing:-.065em;
}

.footer-cta h2 span{
    color:var(--sky);
}


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

.footer-cta-side{
    position:relative;

    padding-bottom:4px;
}


/* LOGO MARK */

.footer-mark{
    display:block;

    width:48px;
    height:48px;

    margin-bottom:28px;

    object-fit:contain;

    mix-blend-mode:screen;
}


/* DESCRIPTION */

.footer-cta-side > p{
    max-width:330px;

    margin:0 0 25px;

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

    font-size:14px;
    line-height:1.65;
}


/* BUTTON */

.footer-cta-button{
    width:100%;
    min-height:60px;

    padding:0 20px;

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

    background:var(--satomen-orange);

    color:var(--ocean-deep) !important;

    font-size:9px;
    font-weight:700;

    letter-spacing:.12em;

    transition:
        background .3s ease,
        padding .3s var(--ease);
}

.footer-cta-button b{
    font-size:18px;
    font-weight:400;

    transition:transform .3s ease;
}

.footer-cta-button:hover{
    padding-left:26px;
    background:#fff;
}

.footer-cta-button:hover b{
    transform:translate(4px,-4px);
}


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

.footer-main{
    display:grid;

    grid-template-columns:.8fr 1.2fr;

    gap:clamp(60px,8vw,130px);

    padding:48px 0 55px;

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


/* BRAND */

.footer-logo{
    display:inline-block;

    margin-bottom:18px;

    color:#fff;

    font-size:28px;
    font-weight:700;

    letter-spacing:-.05em;
}

.footer-brand > p{
    max-width:280px;

    margin:0;

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

    font-size:12px;
    line-height:1.6;
}


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

.footer-navigation{
    display:grid;

    grid-template-columns:
        1fr
        1.4fr
        .8fr;

    gap:35px;
}

.footer-column{
    display:flex;
    flex-direction:column;

    align-items:flex-start;
}

.footer-label{
    margin-bottom:17px;

    color:var(--satomen-orange);

    font-size:7px;
    font-weight:700;

    letter-spacing:.16em;
}

.footer-column a{
    width:100%;

    padding:6px 0;

    display:flex;
    justify-content:space-between;

    gap:15px;

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

    font-size:12px;

    transition:
        color .25s ease,
        transform .25s ease;
}

.footer-column a span{
    opacity:0;

    color:var(--satomen-orange);

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

    transition:.25s ease;
}

.footer-column a:hover{
    color:#fff;
    transform:translateX(3px);
}

.footer-column a:hover span{
    opacity:1;
    transform:none;
}


/* LOCATION */

.footer-location p{
    margin:3px 0 0;

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

    font-size:12px;
    line-height:1.65;
}


/* =========================================================
   GIANT SATOMEN
========================================================= */

.footer-wordmark{
    height:clamp(70px,9vw,125px);

    overflow:hidden;

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

    font-size:clamp(90px,15vw,220px);
    font-weight:700;

    line-height:.65;
    letter-spacing:-.075em;

    white-space:nowrap;
    text-align:center;

    user-select:none;
    pointer-events:none;
}


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

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

.footer-bottom{
    min-height:64px;

    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:30px;

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

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

    font-size:11px;
    font-weight:600;
    letter-spacing:.08em;
}

.footer-bottom p{
    margin:0;
}

.footer-legal{
    display:flex;
    align-items:center;
    gap:14px;
}

.footer-legal a{
    color:rgba(255,255,255,.48);

    transition:color .25s ease;
}

.footer-legal a:hover{
    color:#fff;
}

.footer-legal > span{
    color:rgba(255,255,255,.2);
}


/* MOBILE */

@media(max-width:650px){

    .footer-bottom{
        min-height:auto;

        padding:22px 0;

        flex-direction:column;
        align-items:flex-start;
        gap:12px;
    }

    .footer-legal{
        flex-wrap:wrap;
        gap:10px;

        font-size:11px;
    }

}


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

@media(max-width:900px){

    .footer-cta-main{
        grid-template-columns:1fr;
        gap:38px;
    }

    .footer-cta-side{
        max-width:400px;
    }

    .footer-cta-button{
        max-width:300px;
    }

    .footer-main{
        grid-template-columns:1fr;
        gap:40px;
    }
}


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

@media(max-width:650px){

    .site-footer{
        padding-inline:20px;
    }

    .footer-cta{
        padding:60px 0 50px;
    }

    .footer-kicker{
        margin-bottom:28px;
    }

    .footer-cta h2{
        font-size:clamp(48px,14vw,68px);
    }

    .footer-mark{
        width:40px;
        height:40px;

        margin-bottom:20px;
    }

    .footer-main{
        padding:40px 0 45px;
    }

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

        gap:35px 25px;
    }

    .footer-location{
        grid-column:1/-1;
    }

    .footer-wordmark{
        height:65px;

        font-size:20vw;
    }

    .footer-bottom{
        grid-template-columns:1fr auto;

        padding:15px 0;
    }

    .footer-bottom p:nth-child(2){
        display:none;
    }
}


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

@media(max-width:430px){

    .footer-navigation{
        grid-template-columns:1fr;
    }

    .footer-location{
        grid-column:auto;
    }

}