/* ======================================================================
   CONTACT
   01 — HERO
   MOBILE
   ====================================================================== */

@media (max-width: 1023px) {

.contact-page .contact-mobile-field,
.contact-page .contact-mobile-extra-fields {
    display: block;
}

.contact-page .contact-path-unsure {
    display: block;
}

.contact-page .contact-mobile-summary-change {
    display: inline-block;
}
    /* ==================================================================
       SECTION
       ================================================================== */

    .contact-page .contact-hero {
        position: relative;

        overflow: hidden;

        min-height: 860px;

        padding:
            0 0
            34px;

        background:
            radial-gradient(
                circle at 86% 5%,
                rgba(79, 36, 232, .24) 0%,
                rgba(28, 22, 94, .13) 27%,
                transparent 50%
            ),
            radial-gradient(
                circle at 50% 95%,
                rgba(77, 27, 255, .16) 0%,
                transparent 28%
            ),
            linear-gradient(
                180deg,
                #080b13 0%,
                #070a12 54%,
                #090b16 100%
            );

        color: #ffffff;
    }


    .contact-page .contact-hero::before {
        content: "";

        position: absolute;
        inset: 0;

        pointer-events: none;

        background:
            radial-gradient(
                ellipse at 52% 92%,
                rgba(86, 29, 255, .16),
                transparent 28%
            );
    }



    /* ==================================================================
       INNER
       ================================================================== */

    .contact-page .contact-hero__inner {
        position: relative;

        z-index: 2;

        display: block;

        width: 100%;
        max-width: 680px;

        min-height: 820px;

        margin:
            0 auto;

        padding:
            50px 28px
            0;
    }



    /* ==================================================================
       COPY
       ================================================================== */

    .contact-page .contact-hero__copy {
        width: 100%;
        max-width: none;
    }



    /* ==================================================================
       EYEBROW
       ================================================================== */

    .contact-page
    .contact-hero
    .contact-section-label {
        display: flex;

        align-items: center;

        gap: 18px;

        margin:
            19px 0
            28px;
    }


    .contact-page
    .contact-hero
    .contact-section-label > span {
        display: block;

        width: 54px;
        height: 2px;

        background:
            linear-gradient(
                90deg,
                #5520ed,
                #7b3aff
            );
    }


    .contact-page
    .contact-hero
    .contact-section-label small {
        color:
            rgba(255,255,255,.75);

        font-size: 10px;
        line-height: 1;

        font-weight: 800;

        letter-spacing: .23em;

        text-transform: uppercase;
    }


    /*
     * Adds D2C GAME after CONTACT,
     * matching the mobile reference.
     */

    .contact-page
    .contact-hero
    .contact-section-label small::after {
        content: " D2C GAME";
    }



    /* ==================================================================
       HEADING
       ================================================================== */

    .contact-page .contact-hero__copy h1 {
        max-width: 590px;

        margin: 0;

        color: #ffffff;

        font-size: clamp(
            52px,
            12.8vw,
            72px
        );

        line-height: .86;

        font-weight: 900;

        letter-spacing: -.065em;
    }


    .contact-page .contact-hero__copy h1 span {
        display: block;

        max-width: 580px;

        margin-top: 5px;

        color: #5720ed;
    }



    /* ==================================================================
       INTRO
       ================================================================== */

    .contact-page .contact-hero__copy > p {
        max-width: 525px;

        margin:
            25px 0
            0;

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

        font-size: clamp(
            18px,
            4.6vw,
            25px
        );

        line-height: 1.27;

        font-weight: 400;

        letter-spacing: -.02em;
    }



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

    .contact-page
    .contact-hero
    .contact-primary-button {
        display: flex;

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

        width: 100%;
        min-height: 72px;

        margin-top: 27px;

        padding:
            18px 29px;

        border: 0;
        border-radius: 9px;

        background:
            linear-gradient(
                105deg,
                #ffd16a 0%,
                #ffca56 100%
            );

        box-shadow:
            0 10px 30px
            rgba(255,194,68,.13);

        color: #090b0f;

        font: inherit;

        cursor: pointer;
    }


    .contact-page
    .contact-hero
    .contact-primary-button span {
        font-size: clamp(
            17px,
            4vw,
            22px
        );

        line-height: 1;

        font-weight: 900;

        letter-spacing: -.025em;
    }


    .contact-page
    .contact-hero
    .contact-primary-button svg {
        width: 31px;
        height: 31px;

        flex:
            0 0
            auto;
    }



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

    .contact-page .contact-hero-visual {
        position: relative;

        display: grid;

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

        align-items: start;

        gap: 0;

        width: 100%;
        max-width: none;
        height: 300px;

        margin:
            40px auto
            0;
    }



    /* ==================================================================
       ITEMS
       ================================================================== */

    .contact-page
    .contact-hero-visual__item {
        position: relative !important;

        left: auto !important;
        top: auto !important;

        display: flex;

        flex-direction: column;

        align-items: center;

        min-width: 0;

        padding:
            0 11px;

        color: #ffffff;

        text-align: center;
    }



    /* vertical separators */

    .contact-page
    .contact-hero-visual__item:not(:last-of-type) {
        border-right:
            1px solid
            rgba(103,69,196,.15);
    }



    /* ICONS */

    .contact-page
    .contact-hero-visual__item svg {
        display: block;

        width: 43px;
        height: 43px;

        padding: 0;

        border: 0;
        border-radius: 0;

        background: transparent;

        box-shadow: none;

        color: #6527ff;
    }



    /* TITLE */

    .contact-page
    .contact-hero-visual__item span {
        margin-top: 12px;

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

        font-size: 10px;
        line-height: 1.15;

        font-weight: 900;

        letter-spacing: .15em;

        text-transform: uppercase;

        white-space: nowrap;
    }



    /* DESCRIPTION */

    .contact-page
    .contact-hero-visual__item small {
        display: block;

        max-width: 130px;

        margin-top: 8px;

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

        font-size: 11px;
        line-height: 1.32;

        font-weight: 400;

        letter-spacing: 0;
    }



    /* ==================================================================
       REMOVE DESKTOP CONNECTOR IMPLEMENTATION
       ================================================================== */

    .contact-page
    .contact-hero-visual__item::after {
        display: none !important;
    }



    /* ==================================================================
       MOBILE CONNECTING LINES
       ================================================================== */

    /*
     * Each item gets its own line down toward the convergence point.
     */

    .contact-page
    .contact-hero-visual__item::before {
        content: "";

        position: absolute;

        z-index: 0;

        top: 115px;
        left: 50%;

        width: 1px;
        height: 116px;

        transform-origin:
            top center;

        background:
            linear-gradient(
                180deg,
                rgba(91,34,243,.25),
                #6928ff
            );

        box-shadow:
            0 0 8px
            rgba(103,39,255,.55);
    }


    /* BUILD bends right */

    .contact-page
    .contact-hero-visual__item--build::before {
        transform:
            rotate(-28deg);

        height: 132px;
    }


    /* AI vertical */

    .contact-page
    .contact-hero-visual__item--ai::before {
        transform:
            rotate(0);

        height: 138px;
    }


    /* OTHER bends left */

    .contact-page
    .contact-hero-visual__item--other::before {
        transform:
            rotate(28deg);

        height: 132px;
    }



    /* ==================================================================
       CONVERGENCE NODE
       ================================================================== */

    .contact-page
    .contact-hero-visual__center {
        position: absolute;

        z-index: 8;

        left: 50%;
        right: auto;
        top: auto;
        bottom: 13px;

        display: block;

        width: 14px;
        height: 14px;

        transform:
            translateX(-50%);

        border-radius: 50%;

        background: #ffffff;

        box-shadow:
            0 0 5px
                #ffffff,
            0 0 15px
                #7a43ff,
            0 0 34px
                #5d23ff,
            0 0 60px
                rgba(83,28,255,.9);
    }


    /*
     * bright vertical flare
     */

    .contact-page
    .contact-hero-visual__center::before {
        content: "";

        position: absolute;

        left: 50%;
        bottom: -7px;

        width: 82px;
        height: 16px;

        margin: 0;

        transform:
            translateX(-50%);

        border: 0;

        border-radius: 50%;

        background:
            radial-gradient(
                ellipse,
                rgba(111,62,255,.82) 0%,
                rgba(87,31,255,.34) 45%,
                transparent 72%
            );

        box-shadow: none;
    }


    .contact-page
    .contact-hero-visual__center::after {
        content: "";

        position: absolute;

        left: 50%;
        bottom: 0;

        width: 2px;
        height: 60px;

        transform:
            translateX(-50%);

        background:
            linear-gradient(
                180deg,
                transparent,
                #7130ff,
                #ffffff
            );

        filter:
            drop-shadow(
                0 0 6px
                #6424ff
            );
    }



    /*
     * "LET'S TALK" is not used in this mobile composition.
     */

    .contact-page
    .contact-hero-visual__center span {
        display: none;
    }



    /* ==================================================================
       REMOVE DESKTOP EXTRA GLOW POSITION
       ================================================================== */

    .contact-page
    .contact-hero-visual::after {
        content: "";

        position: absolute;

        z-index: -1;

        left: 50%;
        right: auto;
        bottom: -48px;

        width: 290px;
        height: 160px;

        transform:
            translateX(-50%);

        border-radius: 50%;

        background:
            radial-gradient(
                ellipse,
                rgba(84,26,255,.22),
                transparent 68%
            );

        filter:
            blur(9px);

        pointer-events: none;
    }

}



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

@media (max-width: 480px) {


    .contact-page .contact-hero {
        min-height: 810px;
    }


    .contact-page .contact-hero__inner {
        min-height: 780px;

        padding:
            40px 20px
            0;
    }


    .contact-page .contact-hero__copy h1 {
        font-size: 47px;
    }


    .contact-page .contact-hero__copy > p {
        font-size: 17px;
    }


    .contact-page
    .contact-hero
    .contact-primary-button {
        min-height: 63px;

        padding:
            15px 20px;
    }


    .contact-page
    .contact-hero
    .contact-primary-button span {
        font-size: 16px;
    }


    .contact-page
    .contact-hero-visual {
        height: 270px;

        margin-top: 32px;
    }


    .contact-page
    .contact-hero-visual__item {
        padding:
            0 6px;
    }


    .contact-page
    .contact-hero-visual__item svg {
        width: 35px;
        height: 35px;
    }


    .contact-page
    .contact-hero-visual__item span {
        font-size: 8px;

        letter-spacing: .11em;
    }


    .contact-page
    .contact-hero-visual__item small {
        max-width: 100px;

        font-size: 9px;
    }


    .contact-page
    .contact-hero-visual__item::before {
        top: 100px;
    }


    .contact-page
    .contact-hero-visual__center {
        bottom: 15px;
    }

}
/* ======================================================================
   CONTACT
   MOBILE — PATHS + FORM + SUCCESS
   ====================================================================== */

@media (max-width: 1023px) {


/* ================================================================
   SELECTED PATH SUMMARY — MOBILE
   ================================================================ */

.contact-page .contact-selected-path,
.contact-page .contact-step-summary,
.contact-page .contact-final-summary {
    position: relative;

    display: grid;

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

    align-items: center;

    gap: 14px;

    width: 100%;

    min-height: 84px;

    margin:
        3px 0
        23px;

    padding:
        12px 16px;

    border-radius: 8px;

    background:
        linear-gradient(
            100deg,
            #f6f2ff,
            #f8f5ff
        );
}


.contact-page .contact-selected-path__icon,
.contact-page .contact-step-summary__icon,
.contact-page .contact-final-summary__icon {
    display: grid;

    place-items: center;

    width: 58px;
    height: 58px;

    border-radius: 7px;

    background: #eee8ff;

    color: #5620ed;
}


.contact-page .contact-selected-path__icon > span,
.contact-page .contact-step-summary__icon > span,
.contact-page .contact-final-summary__icon > span {
    display: grid;

    place-items: center;
}


.contact-page .contact-selected-path__icon svg,
.contact-page .contact-step-summary__icon svg,
.contact-page .contact-final-summary__icon svg {
    width: 32px;
    height: 32px;
}


.contact-page .contact-selected-path__copy,
.contact-page .contact-step-summary__copy,
.contact-page .contact-final-summary__copy {
    min-width: 0;
}


.contact-page .contact-selected-path__copy small {
    display: none;
}


.contact-page .contact-selected-path__copy strong,
.contact-page .contact-step-summary__copy strong,
.contact-page .contact-final-summary__copy strong {
    display: block;

    margin: 0;

    color: #11131a;

    font-size: 17px;

    line-height: 1.1;

    font-weight: 900;
}


.contact-page .contact-selected-path__copy p,
.contact-page .contact-step-summary__copy p,
.contact-page .contact-final-summary__copy p {
    margin:
        6px 0
        0;

    color: #667086;

    font-size: 12px;

    line-height: 1.2;
}


.contact-page .contact-selected-path > button,
.contact-page .contact-step-summary > button,
.contact-page .contact-final-summary > button {
    border: 0;

    background: transparent;

    color: #5820ed;

    font: inherit;

    font-size: 12px;

    font-weight: 700;

    white-space: nowrap;

    cursor: pointer;
}

    /* ==================================================================
       SHARED LIGHT BACKGROUND
       ================================================================== */

    .contact-page .contact-paths,
    .contact-page .contact-form-screen,
    .contact-page .contact-success {
        position: relative;

        overflow: hidden;

        width: 100%;

        background:
            radial-gradient(
                circle at 0 0,
                rgba(98,36,255,.06),
                transparent 30%
            ),
            radial-gradient(
                circle at 100% 100%,
                rgba(98,36,255,.05),
                transparent 32%
            ),
            #ffffff;

        color: #080a12;
    }



    /* ======================================================================
       CHOOSE YOUR PATH
       ====================================================================== */

    .contact-page .contact-paths {
        min-height: auto;

        padding:
            38px 0
            46px;
    }


    .contact-page .contact-paths__inner {
        width: 100%;
        max-width: 680px;

        margin: 0 auto;

        padding:
            0 28px;
    }


    .contact-page .contact-paths .contact-screen-heading {
        margin: 0;
        text-align: left;
    }


    .contact-page .contact-paths .contact-section-label {
        display: flex;

        align-items: center;

        justify-content: flex-start;

        gap: 19px;

        margin-bottom: 25px;
    }


    .contact-page
    .contact-paths
    .contact-section-label > span {
        display: block;

        width: 48px;
        height: 2px;

        background: #5720ed;
    }


    .contact-page
    .contact-paths
    .contact-section-label small {
        color: #596277;

        font-size: 10px;
        line-height: 1;

        font-weight: 800;

        letter-spacing: .23em;

        text-transform: uppercase;
    }


    .contact-page .contact-screen-heading h2 {
        max-width: 580px;

        margin: 0;

        color: #050810;

        font-size: clamp(
            44px,
            10.5vw,
            58px
        );

        line-height: .88;

        font-weight: 900;

        letter-spacing: -.06em;
    }


    .contact-page
    .contact-screen-heading h2 span {
        display: block;

        color: #5620ed;
    }


    .contact-page
    .contact-screen-heading > p {
        max-width: 520px;

        margin:
            20px 0
            27px;

        color: #616a7e;

        font-size: 17px;
        line-height: 1.28;
    }



    /* path cards */

    .contact-page .contact-path-grid {
        display: grid;

        grid-template-columns: 1fr;

        gap: 13px;

        width: 100%;

        margin: 0;
    }


    .contact-page .contact-path-card {
        display: grid;

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

        grid-template-rows:
            auto
            auto;

        align-items: center;

        column-gap: 18px;

        min-height: 118px;

        padding:
            18px 19px;

        border:
            1px solid
            #ececf1;

        border-radius: 10px;

        background:
            rgba(249,249,251,.88);

        color: #0b0d14;

        text-align: left;

        font: inherit;

        cursor: pointer;
    }


    .contact-page .contact-path-card.is-selected {
        border-color:
            #eee8ff;

        background:
            linear-gradient(
                100deg,
                #f8f5ff,
                #f5f2fc
            );
    }


    .contact-page .contact-path-card__icon {
        grid-column: 1;
        grid-row: 1 / 3;

        display: grid;

        place-items: center;

        width: 72px;
        height: 72px;

        border-radius: 9px;

        background: #f0ebff;

        color: #5820ee;
    }


    .contact-page .contact-path-card__icon svg {
        width: 39px;
        height: 39px;
    }


    .contact-page .contact-path-card h3 {
        grid-column: 2;
        grid-row: 1;

        align-self: end;

        margin: 0;

        color: #090b11;

        font-size: 20px;
        line-height: 1;

        font-weight: 900;

        letter-spacing: -.035em;

        text-transform: uppercase;
    }


    .contact-page .contact-path-card p {
        grid-column: 2;
        grid-row: 2;

        align-self: start;

        margin:
            8px 0
            0;

        color: #656d80;

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


    .contact-page .contact-path-card__arrow {
        grid-column: 3;
        grid-row: 1 / 3;

        display: grid;

        place-items: center;

        width: 48px;
        height: 48px;

        border-radius: 50%;

        background: #f0f0f3;

        color: #15171d;
    }


    .contact-page
.contact-path-card.is-selected
.contact-path-card__arrow{
        background: #eee8ff;

        color: #5920ee;
    }


    .contact-page
    .contact-path-card__arrow svg {
        width: 25px;
        height: 25px;
    }



    /* unsure */

    .contact-page .contact-path-unsure {
        position: relative;

        margin-top: 38px;

        padding-top: 27px;

        text-align: center;
    }


    .contact-page
    .contact-path-unsure::before {
        content: "";

        position: absolute;

        left: 0;
        right: 0;
        top: 6px;

        height: 1px;

        background:
            linear-gradient(
                90deg,
                #d9dbe1 0%,
                #d9dbe1 37%,
                transparent 37%,
                transparent 63%,
                #d9dbe1 63%,
                #d9dbe1 100%
            );
    }


    .contact-page .contact-path-unsure > span {
        position: absolute;

        top: 0;
        left: 50%;

        transform:
            translateX(-50%);

        padding:
            0 13px;

        background: #fff;

        color: #6d7588;

        font-size: 8px;

        font-weight: 800;

        letter-spacing: .20em;

        white-space: nowrap;
    }


    .contact-page .contact-path-unsure button {
        border: 0;

        background: transparent;

        color: #5920ed;

        font: inherit;

        font-size: 14px;

        cursor: pointer;
    }


    /*
     * Old desktop Back button under paths
     */

    .contact-page
    .contact-paths
    .contact-back-link {
        display: none;
    }



    /* ======================================================================
       SHARED FORM SCREEN
       ====================================================================== */

    .contact-page .contact-form-screen {
        min-height: 650px;

        padding:
            34px 0
            45px;
    }


    .contact-page .contact-form-shell {
        position: relative;

        display: flex !important;

        flex-direction: column;

        width: 100% !important;
        max-width: 680px;

        min-height: 600px;

        margin: 0 auto;

        padding:
            41px 28px
            0 !important;
    }



    /* ==================================================================
       TOP BACK BUTTON
       ================================================================== */

    .contact-page
    .contact-form-screen
    .contact-secondary-button {
        position: absolute;

        z-index: 10;

        left: 28px;
        top: 0;

        display: inline-flex;

        width: auto;
        min-width: 0;
        height: auto;

        padding: 0;

        border: 0;

        background: transparent;

        color: #596174;

        box-shadow: none;

        font-size: 10px;

        font-weight: 800;

        letter-spacing: .13em;

        text-transform: uppercase;
    }



    /* ==================================================================
       HEADING
       ================================================================== */

    .contact-page .contact-form-heading {
        order: 1;

        margin:
            0 0
            18px;

        text-align: left;
    }


    .contact-page
    .contact-form-heading > small {
        position: absolute;

        right: 28px;
        top: 0;

        margin: 0;

        transform: none;

        color: #596174;

        font-size: 10px;

        font-weight: 800;

        letter-spacing: .14em;
    }


    .contact-page .contact-form-heading h2 {
        max-width: 580px;

        margin: 0;

        color: #050810;

        font-size: clamp(
            42px,
            10vw,
            55px
        );

        line-height: .89;

        font-weight: 900;

        letter-spacing: -.06em;
    }


    .contact-page
    .contact-form-heading h2 span {
        display: block;

        color: #5620ed;
    }


    .contact-page
    .contact-form-heading > p {
        margin:
            12px 0
            0;

        color: #656e82;

        font-size: 17px;

        line-height: 1.25;
    }



    /* ==================================================================
       SELECTED PATH
       ================================================================== */

    .contact-page .contact-selected-path,
    .contact-page .contact-final-summary,
    .contact-page .contact-step-summary {
        position: relative;

        order: 2;

        display: grid;

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

        align-items: center;

        width: 100%;

        min-height: 85px;

        margin:
            3px 0
            23px;

        padding:
            12px 17px;

        border-radius: 8px;

        background:
            linear-gradient(
                100deg,
                #f6f2ff,
                #f8f5ff
            );
    }


    .contact-page .contact-selected-path__icon {
        display: grid;

        place-items: center;

        width: 58px;
        height: 58px;

        border-radius: 7px;

        background: #eee8ff;

        color: #5620ed;
    }


    .contact-page
    .contact-selected-path__icon svg {
        width: 32px;
        height: 32px;
    }


    .contact-page
    .contact-selected-path__copy {
        min-width: 0;

        padding-left: 9px;
    }


    .contact-page
    .contact-selected-path__copy small {
        display: none;
    }


    .contact-page
    .contact-selected-path__copy strong,
    .contact-page
    .contact-final-summary strong,
    .contact-page
    .contact-step-summary strong {
        display: block;

        color: #11131a;

        font-size: 17px;

        line-height: 1.1;

        font-weight: 900;
    }


    .contact-page
    .contact-selected-path__copy p {
        margin:
            6px 0
            0;

        color: #667086;

        font-size: 12px;
    }


    .contact-page
    .contact-selected-path > button,
    .contact-page
    .contact-final-summary > button,
    .contact-page
    .contact-mobile-summary-change {
        border: 0;

        background: transparent;

        color: #5820ed;

        font: inherit;

        font-size: 12px;

        font-weight: 700;

        cursor: pointer;
    }



    /* ==================================================================
       TIMELINE / PROGRESS
       ================================================================== */

    .contact-page .contact-progress {
        position: relative;

        order: 3;

        display: flex;

        justify-content: space-between;

        width:
            calc(100% - 65px);

        margin:
            0 auto
            55px;
    }


    .contact-page .contact-progress::before {
        content: "";

        position: absolute;

        z-index: 0;

        left: 19px;
        right: 19px;
        top: 18px;

        height: 1px;

        background: #d9dce3;
    }


    .contact-page .contact-progress span {
        position: relative;

        z-index: 2;

        display: grid;

        place-items: center;

        width: 37px;
        height: 37px;

        border-radius: 50%;

        background: #cfd2da;

        color: #ffffff;
    }


    .contact-page
    .contact-progress span.is-active,
    .contact-page
    .contact-progress span.is-done {
        background: #5620ed;
    }


    .contact-page
    .contact-progress span:nth-child(1)::before {
        content: "1";
    }


    .contact-page
    .contact-progress span:nth-child(2)::before {
        content: "2";
    }


    .contact-page
    .contact-progress span:nth-child(3)::before {
        content: "3";
    }


    .contact-page
    .contact-progress span.is-done::before {
        content: "✓";
    }


    .contact-page
    .contact-progress span::after {
        position: absolute;

        top: 48px;

        color: #697185;

        font-size: 8px;

        font-weight: 800;

        letter-spacing: .10em;

        white-space: nowrap;
    }


    .contact-page
    .contact-progress span:nth-child(1)::after {
        content: "BUSINESS";
    }


    .contact-page
    .contact-progress span:nth-child(2)::after {
        content: "WHAT YOU NEED";
    }


    .contact-page
    .contact-progress span:nth-child(3)::after {
        content: "ABOUT YOU";
    }


    .contact-page
    .contact-progress span.is-active::after {
        color: #15171d;
    }



    /* ==================================================================
       DESKTOP CHOICE GRIDS OFF
       ================================================================== */

    .contact-page .contact-option-grid,
    .contact-page .contact-stage-grid,
    .contact-page .contact-answer-grid {
        display: none !important;
    }


    .contact-page .contact-mobile-field {
        display: block;
    }



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

    .contact-page .contact-fieldset,
    .contact-page .contact-field,
    .contact-page
    .contact-mobile-extra-fields {
        order: 4;

        width: 100%;

        margin:
            0 0
            19px;
    }


    .contact-page
    .contact-fieldset legend,
    .contact-page
    .contact-field > label {
        display: block;

        margin:
            0 0
            8px;

        color: #646c7e;

        font-size: 9px;

        line-height: 1;

        font-weight: 800;

        letter-spacing: .14em;

        text-transform: uppercase;
    }


    .contact-page .contact-field-help {
        display: none;
    }


    .contact-page .contact-field input,
    .contact-page .contact-mobile-select,
    .contact-page .contact-mobile-context textarea {
        display: block;

        width: 100%;

        min-height: 55px;

        padding:
            0 16px;

        border:
            1px solid
            #d8dbe3;

        border-radius: 7px;

        outline: 0;

        background-color: #fff;

        color: #11131b;

        font: inherit;

        font-size: 14px;
    }


    .contact-page .contact-mobile-select {
        appearance: none;
        -webkit-appearance: none;

        padding-right: 48px;

        background-image:
            linear-gradient(
                45deg,
                transparent 50%,
                #606879 50%
            ),
            linear-gradient(
                135deg,
                #606879 50%,
                transparent 50%
            );

        background-position:
            calc(100% - 20px) 24px,
            calc(100% - 15px) 24px;

        background-size:
            5px 5px,
            5px 5px;

        background-repeat: no-repeat;
    }


    .contact-page .contact-field input:focus,
    .contact-page .contact-mobile-select:focus,
    .contact-page
    .contact-mobile-context textarea:focus {
        border-color: #6a2af2;

        box-shadow:
            0 0 0 3px
            rgba(86,32,237,.07);
    }



    /* ==================================================================
       STEP 1 ORDER
       ================================================================== */

    .contact-page
    [data-contact-screen="step1"]
    .contact-selected-path {
        order: 2;
    }


    .contact-page
    [data-contact-screen="step1"]
    .contact-progress {
        order: 3;
    }


    .contact-page
    [data-contact-screen="step1"]
    .contact-fieldset:first-of-type {
        order: 4;
    }


    .contact-page
    [data-contact-screen="step1"]
    .contact-field {
        order: 5;
    }


    .contact-page
    [data-contact-screen="step1"]
    .contact-fieldset:nth-of-type(2) {
        order: 6;
    }



    /* ==================================================================
       STEP 2
       ================================================================== */

    .contact-page .contact-step2-path {
        order: 4;

        display: block;

        width: 100%;
    }


    .contact-page
    .contact-step2-path[hidden] {
        display: none !important;
    }


    /*
     * We don't use the desktop banner in this mobile reference.
     */

    .contact-page .contact-step2-banner {
        display: none;
    }


    .contact-page .contact-step2-path .contact-fieldset {
        margin-bottom: 19px;
    }


    .contact-page .contact-step-summary {
        order: 2;

        grid-template-columns:
            1fr auto;

        min-height: 83px;
    }


    .contact-page
    .contact-step-summary > div:nth-child(2) {
        display: none;
    }


    .contact-page
    .contact-step-summary > div:first-child small {
        display: none;
    }


    .contact-page .contact-mobile-summary-change {
        position: absolute;

        right: 17px;
        top: 50%;

        transform:
            translateY(-50%);
    }


    .contact-page
    .contact-mobile-extra-fields {
        display: block;
    }



    /* context */

    .contact-page
    .contact-mobile-context {
        overflow: hidden;

        margin-top: 19px;

        border-radius: 7px;

        background: #faf9fc;
    }


    .contact-page
    .contact-mobile-context summary {
        display: grid;

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

        align-items: center;

        min-height: 68px;

        padding:
            10px 14px;

        cursor: pointer;

        list-style: none;
    }


    .contact-page
    .contact-mobile-context summary::-webkit-details-marker {
        display: none;
    }


    .contact-page
    .contact-mobile-context summary > span {
        color: #555f73;

        font-size: 22px;
    }


    .contact-page
    .contact-mobile-context summary strong {
        display: block;

        font-size: 13px;
    }


    .contact-page
    .contact-mobile-context summary small {
        display: block;

        margin-top: 4px;

        color: #7a8293;

        font-size: 10px;
    }


    .contact-page
    .contact-mobile-context summary b {
        color: #686f80;

        font-size: 18px;
    }


    .contact-page
    .contact-mobile-context textarea {
        min-height: 120px;

        padding: 13px 15px;

        border-radius:
            0 0 7px 7px;

        resize: vertical;
    }



    /* ==================================================================
       STEP 3
       ================================================================== */

    .contact-page
    [data-contact-screen="step3"]
    .contact-final-summary {
        order: 2;
    }


    .contact-page
    [data-contact-screen="step3"]
    .contact-progress {
        order: 3;
    }


    .contact-page
    [data-contact-screen="step3"]
    .contact-fields-grid {
        order: 4;

        display: grid;

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

        gap:
            19px 16px;

        width: 100%;
    }


    .contact-page
    [data-contact-screen="step3"]
    .contact-fields-grid .contact-field {
        margin: 0;
    }


    /*
     * Existing final summary doesn't need the desktop tall dimensions.
     */

    .contact-page .contact-final-summary {
        min-height: 83px;
    }


    .contact-page
    .contact-final-summary small {
        display: none;
    }



    /* ==================================================================
       ACTION BUTTON
       ================================================================== */

    .contact-page
    .contact-form-actions {
        position: static;

        order: 8;

        display: block;

        width: 100%;

        margin:
            7px 0
            0;
    }


    .contact-page
    .contact-form-actions
    .contact-primary-button {
        display: flex;

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

        width: 100%;
        min-height: 66px;

        margin: 0;

        padding:
            16px 24px;

        border: 0;

        border-radius: 8px;

        background:
            linear-gradient(
                105deg,
                #ffd166,
                #ffc74c
            );

        box-shadow: none;

        color: #080a0e;

        font: inherit;

        font-size: 19px;

        font-weight: 900;
    }


    .contact-page
    .contact-form-actions
    .contact-primary-button svg {
        width: 29px;
        height: 29px;
    }


    /*
     * privacy line for Step 1 and 2
     */

    .contact-page
    [data-contact-screen="step1"]
    .contact-form-actions::after,
    .contact-page
    [data-contact-screen="step2"]
    .contact-form-actions::after {
        content:
            "♙  Your information is private and will only be used to respond to your inquiry.";

        display: block;

        margin-top: 14px;

        color: #6d7587;

        text-align: center;

        font-size: 9px;
        line-height: 1.25;
    }



    /* ==================================================================
       STEP 3 META
       ================================================================== */

    .contact-page
    .contact-form-meta {
        order: 9;

        display: block;

        margin:
            13px 0
            0;

        color: #6d7587;

        text-align: center;

        font-size: 9px;
    }


    .contact-page
    .contact-form-meta span:first-child {
        display: none;
    }


    .contact-page
    .contact-form-meta span:last-child {
        display: inline-flex;

        align-items: center;

        justify-content: center;

        gap: 7px;
    }


    .contact-page
    .contact-form-meta svg {
        width: 14px;
        height: 14px;
    }



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

    .contact-page .contact-success {
        min-height: 690px;

        padding:
            54px 0;
    }


    .contact-page
    .contact-success__inner {
        width: 100%;
        max-width: 680px;

        margin: 0 auto;

        padding:
            0 28px;

        text-align: center;
    }


    .contact-page
    .contact-success__icon {
        display: grid;

        place-items: center;

        width: 78px;
        height: 78px;

        margin:
            0 auto
            34px;

        border-radius: 50%;

        background: #5c22ed;

        color: #ffffff;

        box-shadow:
            0 0 0 15px
            rgba(93,35,237,.08);
    }


    .contact-page
    .contact-success__icon svg {
        width: 43px;
        height: 43px;
    }


    .contact-page
    .contact-success__inner > h2 {
        margin: 0;

        color: #070910;

        font-size: clamp(
            41px,
            9.6vw,
            53px
        );

        line-height: .94;

        font-weight: 900;

        letter-spacing: -.055em;
    }


    .contact-page
    .contact-success__inner > h2 span {
        display: block;

        margin-top: 7px;

        color: #5620ed;

        font-size: .75em;
    }


    .contact-page
    .contact-success__inner > p {
        margin:
            22px auto
            0;

        color: #697184;

        font-size: 16px;

        line-height: 1.3;
    }



    /* What happens next */

    .contact-page .contact-success-grid {
        position: relative;

        display: grid;

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

        gap: 17px;

        margin:
            81px 0
            50px;

        padding-top: 13px;
    }


    .contact-page
    .contact-success-grid::before {
        content:
            "What Happens Next?";

        position: absolute;

        left: 0;
        right: 0;
        top: -53px;

        color: #080a11;

        text-align: center;

        font-size: 22px;

        font-weight: 900;
    }


    .contact-page .contact-success-card {
        position: relative;

        min-height: 0;

        padding: 0;

        background: transparent;
    }


    .contact-page
    .contact-success-card > strong {
        display: grid;

        place-items: center;

        width: 58px;
        height: 58px;

        margin:
            0 auto
            18px;

        border-radius: 50%;

        background: #f0ebff;

        color: #5720ed;

        font-size: 0;
    }


    .contact-page
    .contact-success-card:nth-child(1)
    > strong::after {
        content: "▤";

        font-size: 24px;
    }


    .contact-page
    .contact-success-card:nth-child(2)
    > strong::after {
        content: "✉";

        font-size: 24px;
    }


    .contact-page
    .contact-success-card:nth-child(3)
    > strong::after {
        content: "◌";

        font-size: 25px;
    }


    .contact-page
    .contact-success-card h3 {
        margin: 0;

        color: #101219;

        font-size: 13px;

        line-height: 1.15;

        font-weight: 900;
    }


    .contact-page
    .contact-success-card h3::before {
        counter-increment:
            contact-success;

        content:
            counter(contact-success) ". ";
    }


    .contact-page
    .contact-success-grid {
        counter-reset:
            contact-success;
    }


    .contact-page
    .contact-success-card p {
        margin:
            8px 0
            0;

        color: #6a7285;

        font-size: 11px;

        line-height: 1.28;
    }



    /* back home */

    .contact-page
    .contact-success
    .contact-primary-button {
        display: flex;

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

        gap: 45px;

        width: 100%;
        min-height: 65px;

        margin: 0;

        padding:
            16px 24px;

        border-radius: 8px;

        background:
            linear-gradient(
                105deg,
                #ffd166,
                #ffc74c
            );

        color: #080a0e;

        box-shadow: none;

        font-size: 19px;

        font-weight: 900;
    }


    .contact-page
    .contact-success
    .contact-primary-button svg {
        width: 29px;
        height: 29px;
    }


    /*
     * Mobile screenshot doesn't use brand/tagline underneath.
     */

    .contact-page
    .contact-success__brand {
        display: none;
    }



    /* ==================================================================
       GENERAL
       ================================================================== */

    .contact-page
    .contact-screen[hidden],
    .contact-page
    .contact-step2-path[hidden] {
        display: none !important;
    }

}



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

@media (max-width: 480px) {

    .contact-page
    .contact-paths__inner,
    .contact-page
    .contact-form-shell,
    .contact-page
    .contact-success__inner {
        padding-left: 20px !important;
        padding-right: 20px !important;
    }


    .contact-page
    .contact-form-heading > small {
        right: 20px;
    }


    .contact-page
    .contact-form-screen
    .contact-secondary-button {
        left: 20px;
    }


    .contact-page
    .contact-screen-heading h2,
    .contact-page
    .contact-form-heading h2 {
        font-size: 38px;
    }


    .contact-page
    .contact-path-card {
        grid-template-columns:
            58px
            minmax(0,1fr)
            43px;

        column-gap: 12px;

        min-height: 101px;

        padding:
            14px 13px;
    }


    .contact-page
    .contact-path-card__icon {
        width: 57px;
        height: 57px;
    }


    .contact-page
    .contact-path-card__icon svg {
        width: 31px;
        height: 31px;
    }


    .contact-page
    .contact-path-card h3 {
        font-size: 16px;
    }


    .contact-page
    .contact-path-card p {
        font-size: 11px;
    }


    .contact-page
    .contact-path-card__arrow {
        width: 40px;
        height: 40px;
    }


    .contact-page
    .contact-progress {
        width:
            calc(100% - 28px);
    }


    .contact-page
    [data-contact-screen="step3"]
    .contact-fields-grid {
        grid-template-columns: 1fr;
    }


    .contact-page
    .contact-success-grid {
        gap: 8px;
    }


    .contact-page
    .contact-success-card > strong {
        width: 48px;
        height: 48px;
    }


    .contact-page
    .contact-success-card h3 {
        font-size: 10px;
    }


    .contact-page
    .contact-success-card p {
        font-size: 8.5px;
    }

}