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

@media (max-width: 1023px) {


    /* ==================================================================
       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;
    }

}