/* ==========================================================
   SITUP FINAL V6.0
   ========================================================== */

:root {

    --situp-final-width:
        1160px;

    --forest-black:
        #06120d;

    --forest-deep:
        #0a2619;

    --forest-mid:
        #174b31;

    --forest-light:
        #79c88f;

    --forest-lighter:
        #bce8c7;

    --forest-bright:
        #50cf78;

    --forest-line:
        rgba(121,200,143,.19);

    --forest-line-strong:
        rgba(121,200,143,.48);

}


/* ==========================================================
   STABLE NAV MATERIAL

   This is intentionally NOT dependent on whatever happens
   to be behind the navbar.

   Blur remains only as a secondary enhancement.
   ========================================================== */

.site-header,
.situp-header-v4,
.situp-production-header,
.situp-nav-menu {

    background:

        linear-gradient(
            180deg,
            rgba(255,255,255,.040) 0%,
            rgba(255,255,255,.010) 42%,
            rgba(0,0,0,.028) 100%
        ),

        linear-gradient(
            90deg,
            rgba(23,75,49,.16) 0%,
            rgba(10,38,25,.08) 45%,
            rgba(121,200,143,.035) 100%
        ),

        rgba(6,18,13,.91)

        !important;


    background-color:
        rgba(6,18,13,.91) !important;


    border-color:
        var(--forest-line) !important;


    backdrop-filter:
        blur(10px)
        saturate(112%) !important;

    -webkit-backdrop-filter:
        blur(10px)
        saturate(112%) !important;
}


.site-header,
.situp-header-v4,
.situp-production-header {

    border-top:
        0 !important;

    border-left:
        0 !important;

    border-right:
        0 !important;

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


    box-shadow:

        inset 0 1px 0
        rgba(255,255,255,.035),

        0 8px 28px
        rgba(0,0,0,.16)

        !important;
}


.situp-nav-menu {

    border:
        1px solid
        var(--forest-line) !important;

    border-top:
        0 !important;


    box-shadow:

        inset 0 1px 0
        rgba(255,255,255,.025),

        0 21px 42px
        rgba(0,0,0,.34)

        !important;
}


/*
 * Children stay transparent.
 */

.situp-header-shell,
.situp-nav-v4,
.situp-nav-group,
.situp-nav-parent {

    background:
        transparent !important;

    background-image:
        none !important;
}


/*
 * Remove legacy pseudo-surfaces.
 */

.site-header::before,
.site-header::after,

.situp-header-v4::before,
.situp-header-v4::after,

.situp-production-header::before,
.situp-production-header::after {

    content:
        none !important;

    display:
        none !important;
}


/* ==========================================================
   FOREST PALETTE
   ========================================================== */

.situp-nav-menu a:hover {

    background:
        rgba(121,200,143,.075) !important;

    color:
        #fff !important;
}


.situp-nav-parent::after {

    border-color:
        rgba(188,232,199,.72) !important;
}


.situp-nav-group:hover
.situp-nav-parent::after,

.situp-nav-group:focus-within
.situp-nav-parent::after {

    border-color:
        var(--forest-light) !important;
}


.situp-nav-v4 > a.active::before,
.situp-nav-v4 > a[aria-current="page"]::before,

.situp-nav-group.has-active-child
> .situp-nav-parent::before,

.situp-nav-menu a.active::before,
.situp-nav-menu a[aria-current="page"]::before {

    color:
        var(--forest-light) !important;
}


/*
 * Common CTA families.
 */

.button-primary,
.btn-primary,
.primary-button,
.cta-primary,
.contact-form button,
button[type="submit"] {

    background:
        var(--forest-light) !important;

    border-color:
        var(--forest-light) !important;

    color:
        var(--forest-black) !important;
}


.button-primary:hover,
.btn-primary:hover,
.primary-button:hover,
.cta-primary:hover,
.contact-form button:hover,
button[type="submit"]:hover {

    background:
        var(--forest-lighter) !important;

    border-color:
        var(--forest-lighter) !important;
}


input:focus,
select:focus,
textarea:focus {

    outline:
        none !important;

    border-color:
        var(--forest-light) !important;

    box-shadow:
        0 0 0 3px
        rgba(121,200,143,.12) !important;
}


/* ==========================================================
   NORMALIZED READING SURFACES
   ========================================================== */

/*
 * Assigned by JS only to large light-colored surfaces.
 */

.situp-v60-surface {

    box-sizing:
        border-box !important;


    width:
        min(
            var(--situp-final-width),
            calc(100% - 40px)
        ) !important;


    max-width:
        var(--situp-final-width) !important;


    margin-left:
        auto !important;

    margin-right:
        auto !important;


    left:
        auto !important;

    right:
        auto !important;


    transform:
        none !important;
}


/*
 * Kill old generated width/background layers on surfaces
 * we have normalized.
 */

.situp-v60-surface::before,
.situp-v60-surface::after {

    max-width:
        100% !important;
}


/*
 * Inner shells should consume the normalized surface rather
 * than applying yet another competing width.
 */

.situp-v60-surface
> .shell,

.situp-v60-surface
> .container,

.situp-v60-surface
> .section-shell,

.situp-v60-surface
> .content-shell {

    box-sizing:
        border-box !important;

    width:
        100% !important;

    max-width:
        100% !important;

    margin-left:
        auto !important;

    margin-right:
        auto !important;

    transform:
        none !important;
}


/* ==========================================================
   REMOVE TOP CONTACT PILL
   ========================================================== */

.situp-header-contact,
.site-header .nav-contact,
.situp-production-header .nav-contact {

    display:
        none !important;
}


/* ==========================================================
   FLOATING SKUNK CONTACT
   ========================================================== */

.situp-skunk-contact {

    position:
        fixed;


    right:
        21px;

    bottom:
        21px;


    z-index:
        5000;


    width:
        64px;

    height:
        64px;


    display:
        flex;

    align-items:
        center;

    justify-content:
        flex-start;


    gap:
        10px;


    padding:
        6px;


    overflow:
        hidden;


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

    border-radius:
        999px;


    background:

        radial-gradient(
            circle at 35% 28%,
            rgba(121,200,143,.10),
            transparent 45%
        ),

        rgba(6,18,13,.91);


    color:
        #ffffff;


    text-decoration:
        none;


    box-shadow:

        0 13px 34px
        rgba(0,0,0,.38),

        inset 0 0 0 1px
        rgba(121,200,143,.065),

        0 0 21px
        rgba(121,200,143,.12);


    backdrop-filter:
        blur(12px)
        saturate(120%);

    -webkit-backdrop-filter:
        blur(12px)
        saturate(120%);


    transition:

        width .23s
        cubic-bezier(.2,.75,.25,1),

        transform .18s ease,

        border-color .18s ease,

        box-shadow .18s ease;
}


.situp-skunk-contact:hover,
.situp-skunk-contact:focus-visible {

    width:
        166px;


    transform:
        translateY(-3px);


    border-color:
        var(--forest-light);


    box-shadow:

        0 21px 55px
        rgba(0,0,0,.44),

        inset 0 0 0 1px
        rgba(121,200,143,.11),

        0 0 34px
        rgba(121,200,143,.21);
}


.situp-skunk-contact__art {

    display:
        block;


    width:
        50px;

    min-width:
        50px;

    height:
        50px;


    border-radius:
        50%;


    object-fit:
        cover;


    filter:

        saturate(.82)
        hue-rotate(24deg)
        brightness(.92)

        drop-shadow(
            0 0 6px
            rgba(121,200,143,.18)
        );


    transition:

        transform .2s ease,

        filter .2s ease;
}


.situp-skunk-contact:hover
.situp-skunk-contact__art {

    transform:
        scale(1.04)
        rotate(-2deg);


    filter:

        saturate(.90)
        hue-rotate(24deg)
        brightness(.96)

        drop-shadow(
            0 0 9px
            rgba(121,200,143,.27)
        );
}


.situp-skunk-contact__label {

    flex:
        0 0 auto;


    opacity:
        0;


    transform:
        translateX(-4px);


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


    font-family:
        "Segoe UI Variable Text",
        "Segoe UI",
        system-ui,
        sans-serif;


    font-size:
        12px;

    font-weight:
        700;

    line-height:
        1;


    white-space:
        nowrap;


    transition:

        opacity .14s ease .04s,

        transform .18s ease;
}


.situp-skunk-contact:hover
.situp-skunk-contact__label,

.situp-skunk-contact:focus-visible
.situp-skunk-contact__label {

    opacity:
        1;

    transform:
        none;
}


@media (max-width: 760px) {

    .situp-v60-surface {

        width:
            calc(100% - 18px) !important;
    }


    .situp-skunk-contact {

        right:
            13px;

        bottom:
            13px;


        width:
            60px !important;

        height:
            60px;


        padding:
            5px;


        transform:
            none !important;
    }


    .situp-skunk-contact__art {

        width:
            48px;

        min-width:
            48px;

        height:
            48px;
    }


    .situp-skunk-contact__label {

        display:
            none;
    }

}


@media (prefers-reduced-motion: reduce) {

    .situp-skunk-contact,
    .situp-skunk-contact__art,
    .situp-skunk-contact__label {

        transition:
            none !important;
    }

}