/* ==========================================================
   SITUP CONTACT V6.4
   ========================================================== */

body.situp-contact-v64 {

    --contact-black: #05131f;
    --contact-deep: #082238;
    --contact-mid: #124565;

    --contact-blue: #318ec1;
    --contact-light: #79c8ed;
    --contact-bright: #bceaff;

    --contact-paper: #f5f8fa;
    --contact-white: #ffffff;

    --contact-ink: #102638;
    --contact-muted: #607483;

    --contact-line: rgba(16,38,56,.13);
}


/* ==========================================================
   PAGE
   ========================================================== */

.situp-contact-v64-main {

    position:
        relative;

    z-index:
        2;


    width:
        min(
            1160px,
            calc(100% - 40px)
        );


    margin:
        0 auto;


    padding:
        55px 0 89px;
}


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

.contact-v64-hero {

    display:
        grid;

    grid-template-columns:
        8fr 5fr;

    gap:
        55px;


    align-items:
        end;


    padding:
        34px 0 55px;


    color:
        #ffffff;
}


.contact-v64-kicker {

    margin:
        0 0 13px;


    color:
        var(--contact-light);


    font-size:
        10px;

    font-weight:
        800;

    letter-spacing:
        .13em;

    text-transform:
        uppercase;
}


.contact-v64-hero h1 {

    max-width:
        730px;


    margin:
        0;


    color:
        #ffffff;


    font-size:
        clamp(
            48px,
            5.5vw,
            76px
        );


    line-height:
        .96;

    letter-spacing:
        -.048em;
}


.contact-v64-hero h1 span {

    color:
        var(--contact-light);
}


.contact-v64-hero-copy {

    max-width:
        480px;


    margin:
        0 0 5px;


    color:
        rgba(229,241,248,.76);


    font-size:
        16px;

    line-height:
        1.65;
}


/* ==========================================================
   MAIN CONTACT SURFACE
   ========================================================== */

.contact-v64-surface {

    display:
        grid;

    grid-template-columns:
        5fr 8fr;

    gap:
        0;


    overflow:
        hidden;


    background:
        var(--contact-paper);


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

    border-radius:
        15px;


    box-shadow:
        0 21px 55px
        rgba(0,0,0,.22);
}


/* ==========================================================
   LEFT ROUTING PANEL
   ========================================================== */

.contact-v64-routing {

    padding:
        34px;


    background:

        linear-gradient(
            145deg,
            #071c2c,
            #0b2e48
        );


    color:
        #ffffff;
}


.contact-v64-routing h2 {

    margin:
        0;


    color:
        #ffffff;


    font-size:
        27px;

    letter-spacing:
        -.025em;
}


.contact-v64-routing > p {

    margin:
        13px 0 0;


    color:
        rgba(220,237,247,.69);


    font-size:
        14px;

    line-height:
        1.55;
}


.contact-v64-lanes {

    display:
        grid;

    gap:
        13px;


    margin-top:
        34px;
}


.contact-v64-lane {

    padding:
        18px;


    border:
        1px solid
        rgba(121,200,237,.15);

    border-radius:
        9px;


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


.contact-v64-lane strong {

    display:
        block;


    color:
        var(--contact-bright);


    font-size:
        13px;

    letter-spacing:
        .01em;
}


.contact-v64-lane span {

    display:
        block;


    margin-top:
        7px;


    color:
        rgba(220,237,247,.62);


    font-size:
        12px;

    line-height:
        1.5;
}


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

.contact-v64-direct {

    display:
        grid;

    gap:
        8px;


    margin-top:
        34px;

    padding-top:
        21px;


    border-top:
        1px solid
        rgba(121,200,237,.13);
}


.contact-v64-direct a {

    color:
        var(--contact-light);


    text-decoration:
        none;


    font-size:
        13px;

    font-weight:
        700;
}


.contact-v64-direct a:hover {

    color:
        var(--contact-bright);
}


/* ==========================================================
   FORM SIDE
   ========================================================== */

.contact-v64-form-panel {

    padding:
        34px;


    background:
        #ffffff;
}


.contact-v64-form-heading {

    display:
        flex;

    align-items:
        flex-end;

    justify-content:
        space-between;

    gap:
        21px;


    margin-bottom:
        27px;
}


.contact-v64-form-heading h2 {

    margin:
        0;


    color:
        var(--contact-ink);


    font-size:
        28px;

    letter-spacing:
        -.028em;
}


.contact-v64-form-heading span {

    color:
        #7a8b96;


    font-size:
        11px;
}


/* ==========================================================
   FORM
   ========================================================== */

#situp-contact-v64-form {

    display:
        grid;

    gap:
        17px;
}


.contact-v64-row {

    display:
        grid;

    grid-template-columns:
        1fr 1fr;

    gap:
        13px;
}


.contact-v64-field {

    display:
        grid;

    gap:
        7px;
}


.contact-v64-field label {

    color:
        #4a6575;


    font-size:
        9px;

    font-weight:
        800;

    letter-spacing:
        .10em;

    text-transform:
        uppercase;
}


.contact-v64-field input,
.contact-v64-field select,
.contact-v64-field textarea {

    box-sizing:
        border-box;


    width:
        100%;


    border:
        1px solid
        #c7d2d9;

    border-radius:
        6px;


    background:
        #fbfcfd;

    color:
        #102638;


    padding:
        11px 12px;


    font:
        inherit;

    font-size:
        14px;


    outline:
        none;


    transition:

        border-color .14s ease,
        box-shadow .14s ease,
        background .14s ease;
}


.contact-v64-field input:hover,
.contact-v64-field select:hover,
.contact-v64-field textarea:hover {

    background:
        #ffffff;

    border-color:
        #afc2cd;
}


.contact-v64-field input:focus,
.contact-v64-field select:focus,
.contact-v64-field textarea:focus {

    background:
        #ffffff;


    border-color:
        var(--contact-blue);


    box-shadow:
        0 0 0 3px
        rgba(49,142,193,.12);
}


.contact-v64-field select {

    cursor:
        pointer;
}


.contact-v64-field select option,
.contact-v64-field select optgroup {

    color:
        #071826 !important;

    background:
        #ffffff !important;
}


.contact-v64-field textarea {

    min-height:
        138px;

    resize:
        vertical;
}


.contact-v64-service {

    display:
        none;
}


.contact-v64-service.is-visible {

    display:
        grid;
}


/* ==========================================================
   SUBMIT AREA
   ========================================================== */

.contact-v64-submit-row {

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        21px;


    margin-top:
        4px;
}


.contact-v64-status {

    min-height:
        18px;


    color:
        #477084;


    font-size:
        12px;
}


.contact-v64-submit {

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        13px;


    width:
        auto;

    min-width:
        178px;

    min-height:
        44px;


    padding:
        0 18px;


    border:
        1px solid
        #3e9dce;

    border-radius:
        6px;


    background:

        linear-gradient(
            180deg,
            #78c9ee,
            #54afd9
        );


    color:
        #04131e;


    font-weight:
        800;


    cursor:
        pointer;


    box-shadow:
        0 7px 18px
        rgba(26,105,145,.14);


    transition:

        transform .14s ease,
        box-shadow .14s ease,
        background .14s ease;
}


.contact-v64-submit::after {

    content:
        "→";


    font-size:
        15px;
}


.contact-v64-submit:hover {

    transform:
        translateY(-1px);


    background:

        linear-gradient(
            180deg,
            #9bdafb,
            #68bee7
        );


    box-shadow:
        0 10px 24px
        rgba(26,105,145,.20);
}


.contact-v64-submit:disabled {

    opacity:
        .55;

    cursor:
        wait;

    transform:
        none;
}


/* ==========================================================
   PRIVACY NOTE
   ========================================================== */

.contact-v64-note {

    margin-top:
        4px;


    color:
        #87949c;


    font-size:
        10px;

    line-height:
        1.5;
}


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

@media (max-width: 850px) {

    .situp-contact-v64-main {

        width:
            calc(100% - 26px);


        padding:
            34px 0 55px;
    }


    .contact-v64-hero {

        grid-template-columns:
            1fr;


        gap:
            21px;


        padding:
            21px 0 34px;
    }


    .contact-v64-hero h1 {

        font-size:
            clamp(
                43px,
                12vw,
                60px
            );
    }


    .contact-v64-surface {

        grid-template-columns:
            1fr;
    }


    .contact-v64-routing,
    .contact-v64-form-panel {

        padding:
            27px 21px;
    }

}


@media (max-width: 560px) {

    .contact-v64-row {

        grid-template-columns:
            1fr;
    }


    .contact-v64-form-heading {

        align-items:
            flex-start;

        flex-direction:
            column;

        gap:
            6px;
    }


    .contact-v64-submit-row {

        align-items:
            stretch;

        flex-direction:
            column-reverse;
    }


    .contact-v64-submit {

        width:
            100%;
    }

}