/* =========================================================
       STELLA SPECTRUM
       LET'S TALK
       GLASS CYLINDER EXPERIENCE
       ========================================================= */


    :root {

        --contact-navy:
            #153244;

        --contact-text:
            #173244;

        --contact-muted:
            #526777;

        --contact-gold:
            #c89527;

        --contact-gold-dark:
            #b98216;

    }


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

    html,
    body {

        overflow-x:
            hidden;

    }


    .contact-site {

        min-height:
            100vh;

        background:
            #e8f0f5;

    }


    .contact-main {

        position:
            relative;

    }


    /* =========================================================
       TRANSPARENT HEADER
       ========================================================= */

    .contact-site .site-header {

        position:
            absolute;

        z-index:
            100;

        top:
            0;

        left:
            0;

        width:
            100%;

        background:
            transparent !important;

        box-shadow:
            none !important;

        -webkit-backdrop-filter:
            none !important;

        backdrop-filter:
            none !important;

    }


    /* =========================================================
       EXPERIENCE
       ========================================================= */

    .contact-experience {

        position:
            relative;

        min-height:
            1080px;

        padding:
            285px
            40px
            130px;

        display:
            flex;

        align-items:
            flex-start;

        justify-content:
            center;

        overflow:
            hidden;

        background-image:
            url("../images/contact-hero-bg.png");

        background-repeat:
            no-repeat;

        background-position:
            center top;

        background-size:
            cover;

    }


    /* =========================================================
       BACKGROUND DIMMER

       Change .24 if we later want lighter/darker.
       ========================================================= */

    .contact-background-dimmer {
        position: absolute;
        z-index: 2;
        inset: 0;

        pointer-events: none;

        background:
            linear-gradient(
                180deg,
                rgba(5, 20, 31, .42) 0%,
                rgba(8, 27, 40, .48) 45%,
                rgba(5, 20, 31, .55) 100%
            );
    }

    /* =========================================================
       CYLINDER AREA
       ========================================================= */

    .contact-cylinder-area {

        position:
            relative;

        z-index:
            5;

        width:
            min(1200px,100%);

        margin:
            40px auto 0;

        display:
            flex;

        flex-direction:
            column;

        align-items:
            center;

    }


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

    .conversation-progress {

        position:
            relative;

        z-index:
            50;

        width:
            min(390px,88vw);

        margin:
            0 auto
            28px;

        display:
            flex;

        align-items:
            flex-start;

        justify-content:
            center;

    }


    .progress-step {

        width:
            30px;

        display:
            flex;

        flex-direction:
            column;

        align-items:
            center;

        flex-shrink:
            0;

    }


    .progress-step span {

        width:
            14px;

        height:
            14px;

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

        border-radius:
            50%;

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

        box-shadow:
            0 2px 10px
            rgba(15,40,58,.16);

        transition:
            .35s ease;

    }


    .progress-step small {

        margin-top:
            7px;

        color:
            #ffffff;

        font-size:
            8px;

        font-weight:
            700;

        text-shadow:
            0 1px 6px
            rgba(0,0,0,.35);

    }


    .progress-step.active span,
    .progress-step.complete span {

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

        background:
            var(--contact-gold);

    }


    .progress-step.active span {

        transform:
            scale(1.12);

        box-shadow:
            0 0 0 5px
            rgba(200,149,39,.20);

    }


    .progress-step.active small {

        color:
            #ffe8ae;

    }


    .conversation-progress > i {

        width:
            42px;

        height:
            1px;

        margin-top:
            7px;

        flex-shrink:
            0;

        background:
            rgba(255,255,255,.62);

    }


    /* =========================================================
       CYLINDER SCENE
       ========================================================= */

    .cylinder-scene {

        --card-width:
            570px;

        --card-height:
            365px;

        --radius:
            525px;

        position:
            relative;

        z-index:
            10;

        width:
            min(1120px,96vw);

        height:
            470px;

        perspective:
            1500px;

        perspective-origin:
            50% 48%;

        overflow:
            visible;

    }


    /* =========================================================
       ROTATING CYLINDER
       ========================================================= */

    .conversation-cylinder {

        position:
            absolute;

        top:
            50%;

        left:
            50%;

        width:
            var(--card-width);

        height:
            var(--card-height);

        transform-style:
            preserve-3d;

        transform:
            translate(-50%,-50%)
            rotateY(
                var(--rotation,0deg)
            );

        transition:
            transform
            1.05s
            cubic-bezier(
                .22,
                .74,
                .18,
                1
            );

    }


    /* =========================================================
       CARDS
       ========================================================= */

    .cylinder-card {

        position:
            absolute;

        inset:
            0;

        width:
            var(--card-width);

        height:
            var(--card-height);

        transform-style:
            preserve-3d;

        backface-visibility:
            hidden;

        opacity:
            .88;

        filter:
            brightness(.94)
            saturate(.93);

        transition:
            opacity .45s ease,
            filter .45s ease;

    }


    /* =========================================================
       CARD POSITIONS
       ========================================================= */

    .cylinder-card[data-card="1"] {

        transform:
            rotateY(0deg)
            translateZ(
                var(--radius)
            );

    }


    .cylinder-card[data-card="2"] {

        transform:
            rotateY(60deg)
            translateZ(
                var(--radius)
            );

    }


    .cylinder-card[data-card="3"] {

        transform:
            rotateY(120deg)
            translateZ(
                var(--radius)
            );

    }


    .cylinder-card[data-card="4"] {

        transform:
            rotateY(180deg)
            translateZ(
                var(--radius)
            );

    }


    .cylinder-card[data-card="5"] {

        transform:
            rotateY(240deg)
            translateZ(
                var(--radius)
            );

    }


    .cylinder-card[data-card="6"] {

        transform:
            rotateY(300deg)
            translateZ(
                var(--radius)
            );

    }


    /* active card */

    .cylinder-card.is-front {

        opacity:
            1;

        filter:
            none;

    }

    /* =========================================================
       SIDE CARD PRIVACY

       Keep the physical glass slab visible,
       but hide EVERYTHING inside it except the glass surfaces.
       ========================================================= */

    /* =========================================================
       CARD CONTENT TRANSITION DURING ROTATION
       ========================================================= */

    /*
       Every piece of card content can now fade smoothly.
       We deliberately do NOT use visibility:hidden because
       visibility changes instantly and kills the effect.
    */

    .cylinder-card
    .cylinder-card-inner > * {
        transition:
            opacity .85s ease,
            transform .85s ease;

        will-change:
            opacity,
            transform;
    }


    /*
       SIDE CARD CONTENT

       Content remains invisible once the card reaches
       its side position.
    */

    .cylinder-card:not(.is-front)
    .cylinder-card-inner > * {
        opacity: 0;

        transform:
            translateY(5px)
            scale(.985);

        pointer-events: none;
    }


    /*
       ACTIVE / ARRIVING CARD CONTENT

       As the card rotates towards the front,
       its content fades in at the same time.
    */

    .cylinder-card.is-front
    .cylinder-card-inner > * {
        opacity: 1;

        transform:
            translateY(0)
            scale(1);

        pointer-events: auto;
    }


    /*
       Keep the glass refraction layers visible.
    */

    .cylinder-card:not(.is-front)
    .cylinder-card-inner::before,
    .cylinder-card:not(.is-front)
    .cylinder-card-inner::after {
        opacity: 1;
        visibility: visible;
    }


    /*
       Side slabs are clearer than before.
       No blur — we want to see the cylinder structure.
    */

    .cylinder-card:not(.is-front) {
        opacity: .88;

        filter:
            brightness(.88)
            saturate(.78);
    }


    /*
       Active card remains full strength.
    */

    .cylinder-card.is-front {
        opacity: 1;
        filter: none;
    }


    /* =========================================================
       GLASS CARD

       IMPORTANT:
       It LOOKS glass, but the base is deliberately opaque enough
       that the content of cards behind cannot be seen through it.
       ========================================================= */

    .cylinder-card-inner {
        position: relative;

        width: 100%;
        height: 100%;

        padding: 34px 40px;

        display: flex;
        flex-direction: column;
        justify-content: center;

        overflow: hidden;

        /*
           Frosted glass edge
        */
        border: 1px solid rgba(255,255,255,.78);
        border-radius: 30px;

        /*
           IMPORTANT:
           Still opaque enough to completely block
           the cards behind it.
        */
        background:
            linear-gradient(
                135deg,
                rgba(220, 236, 244, .97) 0%,
                rgba(238, 247, 251, .98) 24%,
                rgba(211, 230, 240, .97) 50%,
                rgba(235, 229, 244, .98) 72%,
                rgba(220, 237, 244, .97) 100%
            );

        box-shadow:
            0 35px 80px rgba(3,18,29,.34),

            0 12px 28px rgba(3,18,29,.18),

            inset 0 2px 1px rgba(255,255,255,.95),

            inset 2px 0 1px rgba(255,255,255,.60),

            inset -2px 0 1px rgba(113,158,184,.25),

            inset 0 -2px 2px rgba(92,135,160,.18);

        -webkit-backdrop-filter:
            blur(22px)
            saturate(145%);

        backdrop-filter:
            blur(22px)
            saturate(145%);
    }


    /* glass spectrum refraction */

    .cylinder-card-inner::before {
        content: "";

        position: absolute;
        z-index: 0;

        inset: 0;

        pointer-events: none;

        background:
            linear-gradient(
                115deg,

                rgba(255,255,255,.78) 0%,

                rgba(255,255,255,.18) 18%,

                rgba(150,215,245,.18) 34%,

                rgba(204,181,242,.17) 49%,

                rgba(255,207,150,.15) 63%,

                rgba(165,224,235,.16) 77%,

                rgba(255,255,255,.56) 100%
            );
    }


    /* bright glass edge */

    .cylinder-card-inner::after {
        content: "";

        position: absolute;
        z-index: 0;

        inset: 6px;

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

        border-radius: 24px;

        pointer-events: none;

        box-shadow:
            inset 0 1px 8px rgba(255,255,255,.45);
    }


    /* =========================================================
       CARD NUMBER
       ========================================================= */

    .card-number {

        position:
            absolute;

        z-index:
            5;

        top:
            22px;

        right:
            28px;

        color:
            var(--contact-gold);

        font-size:
            8px;

        font-weight:
            800;

        letter-spacing:
            .18em;

    }


    /* =========================================================
       TEXT
       ========================================================= */

    .card-kicker {

        position:
            relative;

        z-index:
            2;

        margin:
            0 0
            8px;

        color:
            var(--contact-gold-dark);

        font-size:
            8px;

        font-weight:
            700;

        letter-spacing:
            .17em;

        text-align:
            center;

        text-transform:
            uppercase;

    }


    .card-kicker strong {

        color:
            inherit;

    }


    .cylinder-card h1,
    .cylinder-card h2 {

        position:
            relative;

        z-index:
            2;

        margin:
            0 0
            20px;

        color:
            var(--contact-navy);

        font-family:
            Georgia,
            "Times New Roman",
            serif;

        font-weight:
            400;

        text-align:
            center;

    }


    .cylinder-card h1 {

        font-size:
            clamp(
                38px,
                4vw,
                52px
            );

        line-height:
            .98;

        letter-spacing:
            -.045em;

    }


    .cylinder-card h1 span {

        display:
            block;

    }


    .cylinder-card h1 em {

        color:
            var(--contact-gold);

        font-style:
            normal;

    }


    .cylinder-card h2 {

        font-size:
            clamp(
                28px,
                3vw,
                37px
            );

        line-height:
            1.05;

        letter-spacing:
            -.035em;

    }


    .card-question {

        position:
            relative;

        z-index:
            2;

        margin:
            -7px 0
            14px;

        color:
            var(--contact-muted);

        font-size:
            11px;

        font-weight:
            600;

        text-align:
            center;

    }


    /* =========================================================
       INPUT
       ========================================================= */

    .cylinder-input {

        position:
            relative;

        z-index:
            3;

        width:
            100%;

        height:
            62px;

        padding:
            6px
            6px
            6px
            20px;

        display:
            flex;

        align-items:
            center;

        border:
            1px solid
            rgba(88,125,149,.15);

        border-radius:
            34px;

        background:
            #ffffff;

        box-shadow:

            0 9px 25px
            rgba(23,50,68,.08),

            inset 0 1px 0
            #ffffff;

    }


    .field-icon {

        width:
            27px;

        height:
            27px;

        margin-right:
            10px;

        display:
            flex;

        align-items:
            center;

        justify-content:
            center;

        flex-shrink:
            0;

        color:
            var(--contact-navy);

        font-size:
            19px;

    }


    .field-icon svg {

        width:
            21px;

        height:
            21px;

        fill:
            none;

        stroke:
            currentColor;

        stroke-width:
            1.7;

        stroke-linecap:
            round;

        stroke-linejoin:
            round;

    }


    .cylinder-input input {

        min-width:
            0;

        flex:
            1;

        border:
            0;

        outline:
            0;

        color:
            var(--contact-text);

        background:
            transparent;

        font-family:
            inherit;

        font-size:
            14px;

    }


    .cylinder-input input::placeholder {

        color:
            #91a3b0;

    }


    /* =========================================================
       ROUND NEXT
       ========================================================= */

    .cylinder-next {

        width:
            49px;

        height:
            49px;

        flex-shrink:
            0;

        border:
            0;

        border-radius:
            50%;

        color:
            #ffffff;

        background:
            var(--contact-gold);

        font-size:
            20px;

        cursor:
            pointer;

        transition:
            .25s ease;

    }


    .cylinder-next:hover {

        transform:
            translateX(3px);

        background:
            var(--contact-gold-dark);

    }


    /* =========================================================
       CARD NAVIGATION
       ========================================================= */

    .card-navigation {

        position:
            relative;

        z-index:
            4;

        width:
            100%;

        margin-top:
            14px;

        display:
            flex;

        align-items:
            center;

        justify-content:
            space-between;

    }


    /* =========================================================
       BACK
       ========================================================= */

    .card-back {

        padding:
            7px 3px;

        display:
            flex;

        align-items:
            center;

        gap:
            8px;

        border:
            0;

        color:
            var(--contact-muted);

        background:
            transparent;

        font-family:
            inherit;

        font-size:
            8px;

        font-weight:
            700;

        letter-spacing:
            .13em;

        text-transform:
            uppercase;

        cursor:
            pointer;

        transition:
            color .2s ease,
            transform .2s ease;

    }


    .card-back:hover {

        color:
            var(--contact-gold-dark);

        transform:
            translateX(-2px);

    }


    /* =========================================================
       SKIP
       ========================================================= */

    .card-skip {

        padding:
            7px 3px;

        display:
            flex;

        align-items:
            center;

        gap:
            8px;

        border:
            0;

        color:
            var(--contact-muted);

        background:
            transparent;

        font-family:
            inherit;

        font-size:
            8px;

        font-weight:
            700;

        letter-spacing:
            .13em;

        text-transform:
            uppercase;

        cursor:
            pointer;

    }


    /* =========================================================
       STANDARD FORWARD BUTTON
       ========================================================= */

    .card-forward {

        min-height:
            39px;

        padding:
            0 18px;

        display:
            flex;

        align-items:
            center;

        justify-content:
            center;

        gap:
            16px;

        border:
            0;

        border-radius:
            22px;

        color:
            #ffffff;

        background:
            var(--contact-gold);

        font-family:
            inherit;

        font-size:
            8px;

        font-weight:
            700;

        letter-spacing:
            .12em;

        text-transform:
            uppercase;

        cursor:
            pointer;

        transition:
            .25s ease;

    }


    .card-forward:hover {

        transform:
            translateX(2px);

        background:
            var(--contact-gold-dark);

    }


    /* =========================================================
       MULTI SELECT
       ========================================================= */

    .option-card
    .cylinder-card-inner {

        padding-top:
            25px;

        padding-bottom:
            25px;

    }


    .option-card h2 {

        margin-bottom:
            4px;

        font-size:
            30px;

    }


    .option-helper {

        position:
            relative;

        z-index:
            2;

        margin:
            0 0
            13px;

        color:
            var(--contact-muted);

        font-size:
            8px;

        font-weight:
            600;

        letter-spacing:
            .08em;

        text-align:
            center;

    }


    .conversation-options {

        position:
            relative;

        z-index:
            3;

        display:
            grid;

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

        gap:
            7px;

    }


    .conversation-options button {

        position:
            relative;

        min-height:
            39px;

        padding:
            7px
            12px
            7px
            34px;

        border:
            1px solid
            rgba(72,110,136,.14);

        border-radius:
            12px;

        color:
            var(--contact-text);

        background:
            #ffffff;

        font-family:
            inherit;

        font-size:
            9px;

        font-weight:
            600;

        text-align:
            left;

        cursor:
            pointer;

        transition:
            .22s ease;

    }


    .option-check {

        position:
            absolute;

        top:
            50%;

        left:
            11px;

        width:
            15px;

        height:
            15px;

        transform:
            translateY(-50%);

        display:
            flex;

        align-items:
            center;

        justify-content:
            center;

        border:
            1px solid
            rgba(23,50,68,.22);

        border-radius:
            50%;

        color:
            transparent;

        font-size:
            8px;

        transition:
            .22s ease;

    }


    .conversation-options button:hover {

        transform:
            translateY(-1px);

        border-color:
            rgba(200,149,39,.55);

    }


    .conversation-options button.selected {

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

        background:
            #fffdf8;

        box-shadow:
            0 5px 14px
            rgba(200,149,39,.10);

    }


    .conversation-options button.selected
    .option-check {

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

        color:
            #ffffff;

        background:
            var(--contact-gold);

    }


    /* =========================================================
       MESSAGE
       ========================================================= */

    .message-card h2 {

        margin-bottom:
            14px;

    }


    .message-card textarea {

        position:
            relative;

        z-index:
            3;

        width:
            100%;

        min-height:
            112px;

        padding:
            15px
            17px;

        resize:
            none;

        border:
            1px solid
            rgba(72,110,136,.14);

        border-radius:
            15px;

        outline:
            none;

        color:
            var(--contact-text);

        background:
            #ffffff;

        font-family:
            inherit;

        font-size:
            12px;

        line-height:
            1.55;

        box-shadow:
            0 7px 20px
            rgba(23,50,68,.06);

    }


    .message-card textarea::placeholder {

        color:
            #91a3b0;

    }


    /* =========================================================
       REVIEW
       ========================================================= */

    .review-card
    .cylinder-card-inner {

        padding:
            22px
            30px;

    }


    .review-card h2 {

        margin-bottom:
            5px;

        font-size:
            28px;

    }


    .review-helper {

        position:
            relative;

        z-index:
            3;

        margin:
            0 0
            11px;

        color:
            var(--contact-muted);

        font-size:
            8px;

        line-height:
            1.5;

        text-align:
            center;

    }


    /* =========================================================
       REVIEW EDITABLE ITEMS
       ========================================================= */

    .review-grid {

        position:
            relative;

        z-index:
            3;

        display:
            grid;

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

        gap:
            7px;

    }


    .review-item {

        position:
            relative;

        min-width:
            0;

        padding:
            9px
            43px
            9px
            11px;

        border:
            1px solid
            rgba(72,110,136,.11);

        border-radius:
            10px;

        color:
            inherit;

        background:
            #ffffff;

        font-family:
            inherit;

        text-align:
            left;

        cursor:
            pointer;

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

    }


    .review-item:hover {

        transform:
            translateY(-1px);

        border-color:
            rgba(200,149,39,.55);

        box-shadow:
            0 6px 16px
            rgba(23,50,68,.07);

    }


    .review-item > span {

        display:
            block;

        margin-bottom:
            3px;

        color:
            #8295a3;

        font-size:
            6px;

        font-weight:
            800;

        letter-spacing:
            .14em;

        text-transform:
            uppercase;

    }


    .review-item strong {

        display:
            block;

        overflow:
            hidden;

        color:
            var(--contact-text);

        font-size:
            9px;

        font-weight:
            600;

        text-overflow:
            ellipsis;

        white-space:
            nowrap;

    }


    .review-item i {

        position:
            absolute;

        top:
            50%;

        right:
            10px;

        transform:
            translateY(-50%);

        color:
            var(--contact-gold-dark);

        font-size:
            6px;

        font-style:
            normal;

        font-weight:
            700;

        letter-spacing:
            .08em;

        text-transform:
            uppercase;

    }


    .review-message {

        grid-column:
            1 / -1;

    }


    .review-message strong {

        max-height:
            29px;

        line-height:
            1.4;

        white-space:
            normal;

    }


    /* =========================================================
       SEND
       ========================================================= */

    .review-actions {

        position:
            relative;

        z-index:
            3;

        margin-top:
            11px;

        display:
            flex;

        justify-content:
            flex-end;

    }


    .review-send {

        min-height:
            40px;

        padding:
            0
            20px;

        display:
            flex;

        align-items:
            center;

        justify-content:
            center;

        gap:
            18px;

        border:
            0;

        border-radius:
            22px;

        color:
            #ffffff;

        background:
            var(--contact-gold);

        font-family:
            inherit;

        font-size:
            8px;

        font-weight:
            700;

        letter-spacing:
            .12em;

        text-transform:
            uppercase;

        cursor:
            pointer;

        transition:
            .25s ease;

    }


    .review-send:hover {

        transform:
            translateX(2px);

        background:
            var(--contact-gold-dark);

    }


    /* =========================================================
       LAPTOP / TABLET
       ========================================================= */

    @media
    (max-width: 1100px) {

        .contact-experience {

            min-height:
                950px;

            padding:
                240px
                24px
                100px;

        }


        .contact-cylinder-area {

            margin-top:
                25px;

        }


        .cylinder-scene {

            --card-width:
                500px;

            --card-height:
                365px;

            --radius:
                460px;

            height:
                450px;

        }

    }


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

    @media
    (max-width: 760px) {

        .contact-experience {

            min-height:
                880px;

            padding:
                175px
                12px
                70px;

            background-position:
                58% top;

        }


        .contact-cylinder-area {

            margin-top:
                25px;

        }


        .conversation-progress {

            width:
                94vw;

            margin-bottom:
                18px;

        }


        .conversation-progress > i {

            width:
                25px;

        }


        .cylinder-scene {

            --card-width:
                86vw;

            --card-height:
                390px;

            --radius:
                345px;

            width:
                100vw;

            height:
                460px;

            perspective:
                1200px;

        }


        .cylinder-card-inner {

            padding:
                28px
                22px;

            border-radius:
                23px;

        }


        .cylinder-card h1 {

            font-size:
                clamp(
                    34px,
                    10vw,
                    44px
                );

        }


        .cylinder-card h2 {

            font-size:
                27px;

        }


        .conversation-options {

            grid-template-columns:
                1fr;

            gap:
                5px;

        }


        .conversation-options button {

            min-height:
                31px;

        }


        .option-card h2 {

            font-size:
                24px;

        }

    }


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

    @media
    (max-width: 480px) {

        .conversation-progress > i {

            width:
                17px;

        }


        .progress-step {

            width:
                27px;

        }


        .cylinder-scene {

            --card-width:
                88vw;

            --card-height:
                405px;

            --radius:
                310px;

            height:
                475px;

        }


        .review-grid {

            grid-template-columns:
                1fr;

        }


        .review-message {

            grid-column:
                auto;

        }

    }


    /* =========================================================
       REDUCED MOTION
       ========================================================= */

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

        .conversation-cylinder,
        .cylinder-card,
        .progress-step span {

            transition-duration:
                .01ms !important;

        }

    }

    /* =========================================================
       CONTACT HEADER — WHITE TEXT
       ========================================================= */

    /* Slogan text */
    .contact-site .slogan-text {
        color: #ffffff !important;
    }

    /* Slogan decorative line */
    .contact-site .slogan-line {
        background: #ffffff !important;
    }

    /* Desktop navigation */
    .contact-site .main-nav a {
        color: #ffffff !important;
    }

    /* Keep navigation hover/active line gold */
    .contact-site .main-nav a::after {
        background: var(--contact-gold) !important;
    }

    /* Mobile hamburger lines */
    .contact-site .menu-button span {
        background: #ffffff !important;
    }
    
    
    /* =========================================================
   SUCCESS / DISPATCH ANIMATION
   Demo version
   ========================================================= */


/* ---------------------------------------------------------
   CARDS BEING SENT

   We animate the INNER glass slab rather than the actual
   cylinder-card transform. This means the existing cylinder
   geometry remains completely untouched.
   --------------------------------------------------------- */

.contact-site.is-dispatching
.cylinder-card:not([data-card="6"])
.cylinder-card-inner {

    animation:
        stellaDispatchCard
        1.15s
        cubic-bezier(.55,.02,.72,.22)
        forwards;

    animation-delay:
        var(--dispatch-delay, 0ms);

}


/* stagger the five cards */

.contact-site.is-dispatching
.cylinder-card[data-card="1"]
.cylinder-card-inner {
    --dispatch-delay: 0ms;
}

.contact-site.is-dispatching
.cylinder-card[data-card="2"]
.cylinder-card-inner {
    --dispatch-delay: 70ms;
}

.contact-site.is-dispatching
.cylinder-card[data-card="3"]
.cylinder-card-inner {
    --dispatch-delay: 140ms;
}

.contact-site.is-dispatching
.cylinder-card[data-card="4"]
.cylinder-card-inner {
    --dispatch-delay: 210ms;
}

.contact-site.is-dispatching
.cylinder-card[data-card="5"]
.cylinder-card-inner {
    --dispatch-delay: 280ms;
}


@keyframes stellaDispatchCard {

    0% {
        opacity: 1;

        transform:
            translateY(0)
            translateZ(0)
            scale(1);

        filter:
            blur(0);
    }

    18% {
        opacity: 1;

        transform:
            translateY(-12px)
            translateZ(20px)
            scale(1.015);
    }

    100% {
        opacity: 0;

        transform:
            translateY(-620px)
            translateZ(-650px)
            scale(.18)
            rotateZ(7deg);

        filter:
            blur(4px);
    }

}


/* ---------------------------------------------------------
   PROGRESS DISAPPEARS WHEN THE CONVERSATION IS SENT
   --------------------------------------------------------- */

.conversation-progress {
    transition:
        opacity .55s ease,
        transform .55s ease;
}

.contact-site.is-dispatching
.conversation-progress {

    opacity: 0;

    transform:
        translateY(-15px);

}


/* =========================================================
   REVIEW CARD — SUCCESS FLIP
   ========================================================= */

.review-card
.cylinder-card-inner {

    transform-style:
        preserve-3d;

}


/*
   First half of the flip.
*/

.review-card.is-flipping
.cylinder-card-inner {

    animation:
        stellaReviewFlipOut
        .42s
        cubic-bezier(.55,.05,.68,.53)
        forwards;

}


@keyframes stellaReviewFlipOut {

    0% {
        transform:
            rotateY(0deg)
            scale(1);
    }

    100% {
        transform:
            rotateY(90deg)
            scale(.96);
    }

}


/*
   Second half.

   JavaScript switches the visible content while the
   card is edge-on, then this animation completes the flip.
*/

.review-card.is-flip-return
.cylinder-card-inner {

    animation:
        stellaReviewFlipIn
        .52s
        cubic-bezier(.22,.74,.18,1)
        forwards;

}


@keyframes stellaReviewFlipIn {

    0% {
        transform:
            rotateY(-90deg)
            scale(.96);
    }

    100% {
        transform:
            rotateY(0deg)
            scale(1);
    }

}


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

.conversation-success {

    position:
        absolute;

    z-index:
        20;

    inset:
        0;

    padding:
        38px 44px;

    display:
        flex;

    flex-direction:
        column;

    align-items:
        center;

    justify-content:
        center;

    opacity:
        0;

    visibility:
        hidden;

    pointer-events:
        none;

    text-align:
        center;

}


/*
   Once JavaScript switches the card face,
   hide every normal Review element.
*/

.review-card.show-success
.cylinder-card-inner > *:not(.conversation-success) {

    opacity:
        0 !important;

    visibility:
        hidden;

    pointer-events:
        none;

}


/*
   Reveal success face.
*/

.review-card.show-success
.conversation-success {

    opacity:
        1 !important;

    visibility:
        visible;

    pointer-events:
        auto;

    transform:
        none !important;

}


/* little gold status */

.success-kicker {

    position:
        relative;

    z-index:
        2;

    margin-bottom:
        13px;

    color:
        var(--contact-gold-dark);

    font-size:
        8px;

    font-weight:
        800;

    letter-spacing:
        .20em;

}


/* confirmation tick */

.success-mark {

    position:
        relative;

    z-index:
        2;

    width:
        45px;

    height:
        45px;

    margin-bottom:
        13px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    border:
        1px solid
        rgba(200,149,39,.42);

    border-radius:
        50%;

    color:
        #ffffff;

    background:
        var(--contact-gold);

    font-size:
        19px;

    box-shadow:
        0 8px 22px
        rgba(185,130,22,.18);

}


/* success heading */

.conversation-success h2 {

    margin:
        0 0 11px;

    color:
        var(--contact-navy);

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size:
        clamp(
            30px,
            3vw,
            38px
        );

    font-weight:
        400;

    letter-spacing:
        -.035em;

}


/* success copy */

.success-message {

    position:
        relative;

    z-index:
        2;

    max-width:
        390px;

    margin:
        0;

    color:
        var(--contact-muted);

    font-size:
        11px;

    line-height:
        1.65;

}


.success-message strong {

    color:
        var(--contact-navy);

}


.success-message span {

    display:
        block;

    margin-top:
        3px;

}


/* reference */

.success-reference {

    position:
        relative;

    z-index:
        2;

    margin:
        15px 0 17px;

    color:
        #8295a3;

    font-size:
        7px;

    font-weight:
        700;

    letter-spacing:
        .15em;

}


.success-reference strong {

    margin-left:
        7px;

    color:
        var(--contact-gold-dark);

}


/* home button */

.success-home {

    position:
        relative;

    z-index:
        2;

    min-height:
        40px;

    padding:
        0 20px;

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        18px;

    border-radius:
        22px;

    color:
        #ffffff;

    background:
        var(--contact-gold);

    font-size:
        8px;

    font-weight:
        700;

    letter-spacing:
        .12em;

    text-transform:
        uppercase;

    transition:
        transform .25s ease,
        background .25s ease;

}


.success-home:hover {

    transform:
        translateX(2px);

    background:
        var(--contact-gold-dark);

}


/* =========================================================
   SENDING BUTTON
   ========================================================= */

.review-send.is-sending {

    opacity:
        .72;

    cursor:
        wait;

    pointer-events:
        none;

}


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

@media
(max-width: 760px) {

    .conversation-success {

        padding:
            30px 24px;

    }


    @keyframes stellaDispatchCard {

        0% {

            opacity:
                1;

            transform:
                translateY(0)
                translateZ(0)
                scale(1);

        }

        100% {

            opacity:
                0;

            transform:
                translateY(-470px)
                translateZ(-420px)
                scale(.16);

        }

    }

}


/* =========================================================
   REDUCED MOTION
   ========================================================= */

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

    .contact-site.is-dispatching
    .cylinder-card:not([data-card="6"])
    .cylinder-card-inner {

        animation-duration:
            .01ms !important;

        animation-delay:
            0ms !important;

    }


    .review-card.is-flipping
    .cylinder-card-inner,
    .review-card.is-flip-return
    .cylinder-card-inner {

        animation-duration:
            .01ms !important;

    }

}