:root {
    --contact-shell: 1560px;
    --contact-line: rgba(80, 167, 237, .17);
    --contact-cyan: #2bdfff;
    --contact-blue: #0b82ff;
    --contact-violet: #8554ff;
}


.contact-spatial-page {
    position: relative;
    min-height: 100vh;
    isolation: isolate;
    background: #020812;
}


.contact-spatial-canvas {
    position: fixed;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    pointer-events: none;

    background:
        radial-gradient(
            circle at 67% 43%,
            rgba(0, 119, 201, .09),
            transparent 35%
        ),
        #020812;
}


.contact-spatial-canvas canvas {
    display: block;
    width: 100%;
    height: 100%;
}


.contact-field-overlay {
    position: fixed;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    opacity: .14;

    background-image:
        linear-gradient(
            rgba(65, 151, 214, .025) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(65, 151, 214, .025) 1px,
            transparent 1px
        );

    background-size: 90px 90px;

    mask-image:
        radial-gradient(
            circle at 60% 42%,
            #000,
            transparent 88%
        );
}


.contact-spatial-content {
    position: relative;
    z-index: 3;
}


.contact-shell {
    width:
        min(
            calc(100% - 110px),
            var(--contact-shell)
        );

    margin-inline: auto;
}


.contact-kicker {
    color: #68e6ff;
    font-size: .64rem;
    font-weight: 700;
    letter-spacing: .29em;
}


.contact-breadcrumb {
    padding-top: 142px;
    margin-bottom: 90px;
}


/* ==========================================================
   ENTRY
   ========================================================== */

.contact-entry {
    min-height: 110vh;
}


.contact-entry-layout {
    min-height: 680px;

    display: grid;

    grid-template-columns:
        minmax(520px, .9fr)
        minmax(390px, 1.1fr);

    align-items: center;
    gap: 90px;
}


.contact-entry-copy {
    max-width: 900px;
}


.contact-room-status {
    margin-bottom: 24px;
    padding: 8px 11px;

    display: inline-flex;
    align-items: center;
    gap: 10px;

    border:
        1px solid
        rgba(44, 203, 255, .21);

    border-radius: 999px;

    background:
        rgba(4, 17, 32, .48);

    backdrop-filter:
        blur(12px);
}


.contact-room-status i {
    width: 7px;
    height: 7px;

    border-radius: 50%;

    background:
        var(--contact-cyan);

    box-shadow:
        0 0 13px
        rgba(35, 214, 255, .68);
}


.contact-room-status span {
    color: #7899b8;
    font-size: .54rem;
    letter-spacing: .17em;
}


.contact-entry-copy h1 {
    max-width: 970px;

    margin:
        20px 0
        28px;

    font-size:
        clamp(
            5rem,
            7.2vw,
            8.3rem
        );

    line-height: .87;
    letter-spacing: -.074em;
}


.contact-entry-copy h1 span {
    display: block;
    color: transparent;

    background:
        linear-gradient(
            100deg,
            #2ae2ff,
            #0c83ff 49%,
            #8554ff
        );

    background-clip: text;
    -webkit-background-clip: text;
}


.contact-entry-copy > p {
    max-width: 650px;
    margin: 0 0 33px;

    color: #9daec4;
    font-size: 1.04rem;
    line-height: 1.78;
}


.contact-room-readout {
    width:
        min(
            360px,
            100%
        );

    justify-self: end;

    padding: 26px;

    border:
        1px solid
        rgba(75, 167, 238, .18);

    border-radius: 13px;

    background:
        rgba(4, 17, 31, .50);

    backdrop-filter:
        blur(16px);
}


.contact-room-readout > span {
    display: block;

    color: #4e708e;
    font-size: .53rem;
    letter-spacing: .15em;
}


.contact-room-readout > strong {
    display: block;
    margin: 11px 0 20px;

    font-size: 1.22rem;
}


.contact-room-readout dl {
    margin: 0;

    border-top:
        1px solid
        var(--contact-line);
}


.contact-room-readout dl div {
    padding: 12px 0;

    display: flex;
    justify-content: space-between;
    gap: 20px;

    border-bottom:
        1px solid
        var(--contact-line);
}


.contact-room-readout dt {
    color: #4c6884;
    font-size: .5rem;
}


.contact-room-readout dd {
    margin: 0;
    color: #a5b8cb;
    font-size: .56rem;
}


/* ==========================================================
   BUILD ROOM
   ========================================================== */

.contact-build-room {
    min-height: 135vh;
    padding: 140px 0;
}


.build-room-shell {
    min-height: 760px;

    display: grid;

    grid-template-columns:
        300px
        minmax(0, 1fr);

    overflow: hidden;

    border:
        1px solid
        rgba(54, 190, 255, .24);

    border-radius: 24px;

    background:
        rgba(3, 14, 27, .78);

    box-shadow:
        0 50px 140px
        rgba(0, 8, 30, .30);

    backdrop-filter:
        blur(20px);
}


.build-room-rail {
    padding: 38px 30px;

    display: flex;
    flex-direction: column;

    border-right:
        1px solid
        var(--contact-line);

    background:
        linear-gradient(
            180deg,
            rgba(9, 39, 61, .58),
            rgba(5, 18, 34, .52)
        );
}


.build-room-rail > div:first-child span {
    display: block;

    margin-bottom: 8px;

    color: #50dfff;
    font-size: .54rem;
    letter-spacing: .16em;
}


.build-room-rail > div:first-child strong {
    font-size: .84rem;
}


.build-room-progress {
    position: relative;

    height: 1px;
    margin: 48px 0 25px;

    background:
        rgba(84, 165, 225, .15);
}


.build-room-progress span {
    position: absolute;

    top: 0;
    left: 0;

    height: 1px;

    width:
        calc(
            var(--build-room-progress, .1667)
            *
            100%
        );

    background:
        linear-gradient(
            90deg,
            #2bdfff,
            #1787ff,
            #8554ff
        );

    box-shadow:
        0 0 10px
        rgba(43, 215, 255, .62);

    transition:
        width .35s ease;
}


.build-room-counter {
    display: flex;
    align-items: baseline;
    gap: 7px;
}


.build-room-counter strong {
    font-size: 3.1rem;
    line-height: 1;
    letter-spacing: -.07em;
}


.build-room-counter span {
    color: #466783;
    font-size: .72rem;
}


.build-room-rail > p {
    margin: auto 0 0;

    color: #6f869d;
    font-size: .72rem;
    line-height: 1.65;
}


.build-room-form {
    padding:
        58px
        clamp(
            34px,
            5vw,
            78px
        );

    min-width: 0;
}


.build-step {
    min-width: 0;

    margin: 0;
    padding: 0;

    border: 0;
}


.build-room-js
.build-step:not(.is-active) {
    display: none;
}


.build-step[hidden] {
    display: none;
}


.build-step legend {
    max-width: 850px;
    padding: 0;

    color: #eefbff;

    font-size:
        clamp(
            2.6rem,
            4.6vw,
            5rem
        );

    font-weight: 700;

    line-height: .98;

    letter-spacing: -.055em;
}


.build-step-intro {
    max-width: 680px;

    margin:
        22px 0
        42px;

    color: #879db5;
    line-height: 1.7;
}


.build-field {
    margin-top: 25px;
}


.build-field-grid {
    display: grid;

    grid-template-columns:
        repeat(
            2,
            minmax(0, 1fr)
        );

    gap: 20px;
}


.build-field label {
    display: block;

    margin-bottom: 9px;

    color: #8da7bf;

    font-size: .67rem;
    font-weight: 700;

    letter-spacing: .08em;
}


.build-field input,
.build-field select,
.build-field textarea {
    width: 100%;

    border:
        1px solid
        rgba(80, 164, 227, .23);

    border-radius: 11px;

    outline: none;

    background:
        rgba(5, 22, 39, .68);

    color: #e6f7ff;

    font: inherit;

    transition:
        border-color .2s ease,
        box-shadow .2s ease,
        background .2s ease;
}


.build-field input,
.build-field select {
    min-height: 54px;

    padding:
        0 15px;
}


.build-field textarea {
    padding: 14px 15px;
    resize: vertical;

    line-height: 1.6;
}


.build-field input:focus,
.build-field select:focus,
.build-field textarea:focus {
    border-color:
        rgba(45, 217, 255, .68);

    background:
        rgba(5, 31, 52, .78);

    box-shadow:
        0 0 0 3px
        rgba(34, 189, 255, .08);
}


.build-field-error {
    margin:
        7px 0 0;

    color: #f2a6a6;

    font-size: .72rem;
}


.build-form-errors {
    margin-bottom: 28px;

    padding: 14px 16px;

    border:
        1px solid
        rgba(236, 122, 122, .25);

    border-radius: 9px;

    color: #f0b1b1;

    background:
        rgba(70, 18, 25, .24);
}


.build-route-explainer {
    margin-top: 34px;

    display: grid;

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

    border-top:
        1px solid
        var(--contact-line);

    border-left:
        1px solid
        var(--contact-line);
}


.build-route-explainer article {
    min-height: 220px;

    padding: 22px;

    border-right:
        1px solid
        var(--contact-line);

    border-bottom:
        1px solid
        var(--contact-line);

    background:
        rgba(5, 24, 41, .32);
}


.build-route-explainer span {
    color: #3b6584;

    font-size: .52rem;
    letter-spacing: .14em;
}


.build-route-explainer strong {
    display: block;

    margin: 55px 0 12px;

    font-size: 1.08rem;
}


.build-route-explainer p {
    margin: 0;

    color: #71879e;
    font-size: .76rem;
    line-height: 1.6;
}


.build-navigation {
    margin-top: 48px;

    padding-top: 23px;

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

    border-top:
        1px solid
        var(--contact-line);
}


.contact-back-button {
    min-height: 45px;

    padding: 0;

    border: 0;

    background: transparent;

    color: #8097ad;

    font: inherit;

    font-size: .76rem;

    cursor: pointer;
}


.build-consent {
    margin-top: 28px;

    display: flex;
    align-items: flex-start;
    gap: 11px;

    color: #879db5;

    font-size: .75rem;
    line-height: 1.55;
}


.build-consent input {
    margin-top: 3px;
}


.build-review {
    margin:
        36px 0
        0;

    border-top:
        1px solid
        var(--contact-line);
}


.build-review div {
    min-height: 64px;

    padding: 13px 0;

    display: grid;

    grid-template-columns:
        150px 1fr;

    align-items: center;
    gap: 20px;

    border-bottom:
        1px solid
        var(--contact-line);
}


.build-review dt {
    color: var(--text-2);

    font-size: .875rem;
    letter-spacing: .12em;
}


.build-review dd {
    margin: 0;

    color: #c4d8e9;

    font-size: .82rem;
}


.build-submit-note {
    margin-top: 27px;

    padding: 18px;

    border-left:
        2px solid
        rgba(43, 214, 255, .45);

    background:
        rgba(5, 32, 49, .32);
}


.build-submit-note span {
    display: block;

    margin-bottom: 8px;

    color: #67dcf6;

    font-size: .54rem;
    letter-spacing: .14em;
}


.build-submit-note p {
    margin: 0;

    color: #7c93aa;

    font-size: .75rem;
    line-height: 1.62;
}


/* ==========================================================
   SUCCESS
   ========================================================== */

.contact-success-terminal {
    width:
        min(
            980px,
            100%
        );

    margin-inline: auto;

    padding:
        clamp(
            38px,
            7vw,
            85px
        );

    border:
        1px solid
        rgba(54, 190, 255, .25);

    border-radius: 25px;

    background:
        radial-gradient(
            circle at 15% 80%,
            rgba(0, 145, 255, .14),
            transparent 35%
        ),
        rgba(5, 20, 38, .75);

    backdrop-filter:
        blur(18px);
}


.contact-success-terminal h2 {
    margin:
        20px 0
        24px;

    font-size:
        clamp(
            3.6rem,
            5.5vw,
            6rem
        );

    line-height: .95;
    letter-spacing: -.06em;
}


.contact-success-terminal > p {
    max-width: 650px;

    color: #91a5bc;
    line-height: 1.72;
}


.contact-success-actions {
    margin-top: 32px;

    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}


/* ==========================================================
   DIRECT CHANNEL
   ========================================================== */

.contact-direct-channel {
    min-height: 95vh;

    display: flex;
    align-items: center;
}


.contact-direct-panel {
    padding: 70px;

    display: grid;

    grid-template-columns:
        1.05fr
        .95fr;

    align-items: center;

    gap: 90px;

    border:
        1px solid
        rgba(54, 191, 255, .25);

    border-radius: 26px;

    background:
        radial-gradient(
            circle at 12% 82%,
            rgba(0, 148, 255, .15),
            transparent 31%
        ),
        radial-gradient(
            circle at 89% 18%,
            rgba(127, 65, 255, .18),
            transparent 30%
        ),
        rgba(6, 20, 40, .77);

    backdrop-filter:
        blur(18px);
}


.contact-direct-panel h2 {
    margin:
        19px 0
        0;

    font-size:
        clamp(
            3.5rem,
            5vw,
            5.7rem
        );

    line-height: .96;
    letter-spacing: -.058em;
}


.contact-direct-panel p {
    margin:
        0 0
        27px;

    color: #a4b5c8;
    line-height: 1.72;
}


.contact-email-link {
    min-height: 58px;

    padding:
        0 19px;

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

    border-top:
        1px solid
        var(--contact-line);

    border-bottom:
        1px solid
        var(--contact-line);

    color: #c9f8ff;

    font-size:
        clamp(
            .8rem,
            1.2vw,
            1rem
        );

    font-weight: 700;
}


.contact-ghost-button {
    min-height: 48px;

    padding:
        0 22px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    gap: 10px;

    border:
        1px solid
        rgba(163, 204, 246, .24);

    border-radius: 10px;

    background:
        rgba(5, 17, 31, .46);

    font-size: .81rem;
    font-weight: 700;
}


/* ==========================================================
   FALLBACK
   ========================================================== */

.contact-spatial-fallback [data-build-next],
.contact-spatial-fallback [data-build-back] {
    display: none;
}

.contact-spatial-fallback
.contact-spatial-canvas::after {
    content: "";

    position: absolute;

    width: 620px;
    height: 620px;

    right: 4%;
    top: 17%;

    border:
        1px solid
        rgba(43, 214, 255, .13);

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(0, 123, 204, .11),
            transparent 66%
        );
}


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

@media (max-width: 1200px) {

    .contact-shell {
        width:
            calc(
                100% - 56px
            );
    }


    .contact-entry-layout {
        grid-template-columns: 1fr;

        gap: 50px;
    }


    .contact-room-readout {
        justify-self: start;
    }


    .build-room-shell {
        grid-template-columns:
            230px
            minmax(0, 1fr);
    }

}


@media (max-width: 900px) {

    .build-room-shell {
        grid-template-columns: 1fr;
    }


    .build-room-rail {
        min-height: 210px;

        border-right: 0;

        border-bottom:
            1px solid
            var(--contact-line);
    }


    .build-room-rail > p {
        margin-top: 32px;
    }


    .build-route-explainer {
        grid-template-columns: 1fr;
    }


    .build-route-explainer article {
        min-height: 160px;
    }


    .build-route-explainer strong {
        margin-top: 32px;
    }


    .contact-direct-panel {
        padding: 45px 32px;

        grid-template-columns: 1fr;

        gap: 38px;
    }

}


@media (max-width: 650px) {

    .contact-shell {
        width:
            calc(
                100% - 34px
            );
    }


    .contact-breadcrumb {
        padding-top: 115px;

        margin-bottom: 55px;
    }


    .contact-entry-copy h1 {
        font-size:
            clamp(
                3.3rem,
                15vw,
                5.2rem
            );
    }


    .contact-entry-copy > p {
        font-size: .94rem;
    }


    .contact-build-room {
        padding:
            80px 0;
    }


    .build-room-shell {
        border-radius: 17px;
    }


    .build-room-form {
        padding:
            38px 21px;
    }


    .build-step legend {
        font-size:
            clamp(
                2.4rem,
                12vw,
                4rem
            );
    }


    .build-field-grid {
        grid-template-columns: 1fr;

        gap: 0;
    }


    .build-navigation {
        align-items: stretch;
        flex-direction: column-reverse;
    }


    .build-navigation .button {
        width: 100%;
    }


    .contact-back-button {
        width: 100%;

        text-align: left;
    }


    .build-review div {
        grid-template-columns:
            1fr;

        gap: 5px;
    }


    .contact-success-actions {
        flex-direction: column;
    }


    .contact-success-actions .button,
    .contact-success-actions
    .contact-ghost-button {
        width: 100%;
    }


    .contact-direct-panel {
        padding:
            35px 24px;
    }


    .contact-direct-panel h2 {
        font-size:
            clamp(
                3rem,
                12vw,
                4.6rem
            );
    }

}

@media (prefers-reduced-motion: reduce) {
    .build-room-progress span,
    .build-field input,
    .build-field select,
    .build-field textarea {
        transition: none !important;
    }
}