/* =========================================================
   SHARED STORY SECTION
   ========================================================= */

.bh-story-section{

    --bh-story-a:
        #20ecf0;

    --bh-story-b:
        #733efd;

    position:
        relative;

    isolation:
        isolate;

    width:
        min(
            1240px,
            calc(100% - 30px)
        ) !important;

    margin:
        38px auto !important;

    padding:
        clamp(
            25px,
            4vw,
            46px
        ) !important;

    overflow:
        hidden;

    border:
        1px solid
        rgba(100,170,230,.14);

    border-radius:
        30px;

    background:

        radial-gradient(
            circle at 8% 0%,
            color-mix(
                in srgb,
                var(--bh-story-a)
                8%,
                transparent
            ),
            transparent
            34%
        ),

        radial-gradient(
            circle at 96% 100%,
            color-mix(
                in srgb,
                var(--bh-story-b)
                9%,
                transparent
            ),
            transparent
            34%
        ),

        linear-gradient(
            145deg,
            rgba(8,18,35,.985),
            rgba(6,12,25,.99)
        );

    box-shadow:
        0 30px 80px
        rgba(0,0,0,.22);
}


.bh-story-section::before{

    content:"";

    position:
        absolute;

    top:
        0;

    left:
        26px;

    right:
        26px;

    height:
        2px;

    background:
        linear-gradient(
            90deg,
            transparent,
            var(--bh-story-a),
            var(--bh-story-b),
            transparent
        );

    opacity:
        .85;

    pointer-events:
        none;
}


.bh-story-section::after{

    content:"";

    position:
        absolute;

    width:
        330px;

    height:
        330px;

    right:
        -200px;

    top:
        15%;

    border-radius:
        50%;

    background:
        var(--bh-story-b);

    filter:
        blur(110px);

    opacity:
        .045;

    pointer-events:
        none;

    z-index:
        -1;
}


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

.bh-story-heading{

    position:
        relative;

    z-index:
        3;

    max-width:
        860px;

    margin-left:
        auto !important;

    margin-right:
        auto !important;

    margin-bottom:
        13px !important;

    text-align:
        center;

    font-size:
        clamp(
            28px,
            3.5vw,
            44px
        ) !important;

    line-height:
        1.08 !important;

    letter-spacing:
        -.025em;

    font-weight:
        950 !important;

    background:
        linear-gradient(
            100deg,
            #60f8a0,
            #20ecf0,
            #27b9fd,
            #733efd,
            #f5c51e
        );

    -webkit-background-clip:
        text;

    background-clip:
        text;

    -webkit-text-fill-color:
        transparent;

    color:
        transparent;
}


.bh-story-section
.bh-story-section-badge{

    display:
        table;

    margin:
        0 auto 11px;

    padding:
        5px 10px;

    border:
        1px solid
        color-mix(
            in srgb,
            var(--bh-story-a)
            25%,
            transparent
        );

    border-radius:
        999px;

    background:
        color-mix(
            in srgb,
            var(--bh-story-a)
            6%,
            transparent
        );

    color:
        #dffcff;

    font-size:
        9px;

    font-weight:
        950;

    letter-spacing:
        .10em;

    text-transform:
        uppercase;
}


/* =========================================================
   BENTO GRID
   ========================================================= */

.bh-story-grid{

    position:
        relative;

    z-index:
        3;

    display:
        grid !important;

    grid-template-columns:
        repeat(
            12,
            minmax(0,1fr)
        ) !important;

    gap:
        16px !important;

    align-items:
        stretch;
}


.bh-story-card{

    --bh-card-a:
        var(--bh-story-a);

    --bh-card-b:
        var(--bh-story-b);

    position:
        relative;

    isolation:
        isolate;

    grid-column:
        span 6;

    min-width:
        0;

    min-height:
        245px;

    overflow:
        hidden;

    padding:
        24px !important;

    border:
        1px solid
        color-mix(
            in srgb,
            var(--bh-card-a)
            15%,
            rgba(255,255,255,.04)
        ) !important;

    border-radius:
        20px !important;

    background:

        linear-gradient(
            145deg,
            color-mix(
                in srgb,
                var(--bh-card-a)
                5%,
                rgba(11,22,40,.90)
            ),
            rgba(8,16,31,.94)
        ) !important;

    box-shadow:
        inset 0 1px 0
        rgba(255,255,255,.025),
        0 12px 30px
        rgba(0,0,0,.13) !important;

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


.bh-story-card:hover{

    transform:
        translateY(-5px);

    border-color:
        color-mix(
            in srgb,
            var(--bh-card-a)
            34%,
            transparent
        ) !important;

    box-shadow:
        0 22px 45px
        rgba(0,0,0,.24),
        0 0 30px
        color-mix(
            in srgb,
            var(--bh-card-a)
            6%,
            transparent
        ) !important;
}


.bh-story-card::before{

    content:"";

    position:
        absolute;

    left:
        0;

    top:
        0;

    bottom:
        0;

    width:
        3px;

    background:
        linear-gradient(
            180deg,
            var(--bh-card-a),
            var(--bh-card-b),
            transparent
        );

    opacity:
        .85;
}


.bh-story-card::after{

    content:"";

    position:
        absolute;

    width:
        165px;

    height:
        165px;

    right:
        -85px;

    bottom:
        -90px;

    border-radius:
        50%;

    background:
        var(--bh-card-a);

    filter:
        blur(65px);

    opacity:
        .055;

    pointer-events:
        none;

    z-index:
        -1;
}


.bh-story-card.bh-story-wide{

    grid-column:
        span 7;
}


.bh-story-card.bh-story-narrow{

    grid-column:
        span 5;
}


/* =========================================================
   CARD TYPOGRAPHY
   ========================================================= */

.bh-story-card h3,
.bh-story-card h4{

    position:
        relative;

    z-index:
        3;

    max-width:
        calc(100% - 50px);

    margin:
        8px 0 9px !important;

    color:
        #f1f7fd !important;

    font-size:
        clamp(
            18px,
            1.6vw,
            22px
        ) !important;

    line-height:
        1.22 !important;

    letter-spacing:
        -.015em;

    font-weight:
        900 !important;
}


.bh-story-card p{

    position:
        relative;

    z-index:
        3;

    color:
        #9fb1c5 !important;

    font-size:
        13px !important;

    line-height:
        1.68 !important;
}


.bh-story-card
.bh-c6-card-subtitle,
.bh-story-card
[class*="subtitle"]{

    position:
        relative;

    z-index:
        3;

    color:
        color-mix(
            in srgb,
            var(--bh-card-a)
            68%,
            #ffffff
        ) !important;

    font-size:
        11px !important;

    line-height:
        1.5 !important;

    font-weight:
        800 !important;
}


/* Existing uploaded CMS images */

.bh-story-card img{

    width:
        100%;

    max-height:
        190px;

    margin-top:
        14px;

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

    border-radius:
        13px;

    object-fit:
        cover;

    box-shadow:
        0 14px 30px
        rgba(0,0,0,.20);
}


/* =========================================================
   CARD INDEX
   ========================================================= */

.bh-story-index{

    position:
        absolute;

    right:
        16px;

    top:
        15px;

    z-index:
        4;

    min-width:
        32px;

    height:
        24px;

    display:
        grid;

    place-items:
        center;

    padding:
        0 7px;

    border:
        1px solid
        color-mix(
            in srgb,
            var(--bh-card-a)
            20%,
            transparent
        );

    border-radius:
        999px;

    background:
        color-mix(
            in srgb,
            var(--bh-card-a)
            6%,
            rgba(7,15,29,.8)
        );

    color:
        var(--bh-card-a);

    font-family:
        ui-monospace,
        SFMono-Regular,
        Menlo,
        Consolas,
        monospace;

    font-size:
        9px;

    font-weight:
        900;

    letter-spacing:
        .08em;
}


/* =========================================================
   DECORATIVE SYSTEM MAP
   ========================================================= */

.bh-story-network{

    position:
        absolute;

    right:
        16px;

    bottom:
        15px;

    z-index:
        1;

    width:
        86px;

    height:
        52px;

    opacity:
        .50;

    pointer-events:
        none;
}


.bh-story-network::before{

    content:"";

    position:
        absolute;

    left:
        12px;

    right:
        12px;

    top:
        25px;

    height:
        1px;

    background:
        linear-gradient(
            90deg,
            var(--bh-card-a),
            var(--bh-card-b)
        );

    opacity:
        .36;
}


.bh-story-network span{

    position:
        absolute;

    width:
        8px;

    height:
        8px;

    border:
        1px solid
        var(--bh-card-a);

    border-radius:
        50%;

    background:
        rgba(7,15,29,.96);

    box-shadow:
        0 0 12px
        color-mix(
            in srgb,
            var(--bh-card-a)
            24%,
            transparent
        );
}


.bh-story-network span:nth-child(1){

    left:
        5px;

    top:
        21px;
}


.bh-story-network span:nth-child(2){

    left:
        39px;

    top:
        8px;
}


.bh-story-network span:nth-child(3){

    right:
        4px;

    top:
        28px;
}


/* =========================================================
   CAPABILITY SECTION — CONNECTED SYSTEM FEEL
   ========================================================= */

#custom-platform-capabilities
.bh-story-grid{

    padding:
        4px;

    border-radius:
        24px;

    background:

        linear-gradient(
            90deg,
            transparent 49.8%,
            rgba(32,236,240,.055) 50%,
            transparent 50.2%
        ),

        linear-gradient(
            0deg,
            transparent 49.8%,
            rgba(115,62,253,.055) 50%,
            transparent 50.2%
        );
}


#custom-platform-capabilities
.bh-story-card{

    min-height:
        255px;
}


/* =========================================================
   PROJECT CONVERSION PANEL
   ========================================================= */

.bh-project-conversion{

    --bh-card-a:
        #20ecf0;

    --bh-card-b:
        #733efd;

    width:
        min(
            1240px,
            calc(100% - 30px)
        ) !important;

    margin:
        40px auto !important;

    padding:
        clamp(
            26px,
            4vw,
            48px
        ) !important;

    display:
        grid !important;

    grid-template-columns:
        minmax(0,1.15fr)
        minmax(300px,.85fr);

    gap:
        clamp(
            24px,
            4vw,
            48px
        );

    align-items:
        center;

    position:
        relative;

    overflow:
        hidden;

    border:
        1px solid
        rgba(32,236,240,.16) !important;

    border-radius:
        30px !important;

    background:

        radial-gradient(
            circle at 8% 15%,
            rgba(32,236,240,.075),
            transparent 30%
        ),

        radial-gradient(
            circle at 92% 80%,
            rgba(115,62,253,.11),
            transparent 38%
        ),

        linear-gradient(
            135deg,
            rgba(8,20,38,.99),
            rgba(7,12,27,.99)
        ) !important;

    box-shadow:
        0 30px 75px
        rgba(0,0,0,.25) !important;
}


.bh-project-conversion::before{

    content:"";

    position:
        absolute;

    left:
        24px;

    right:
        24px;

    top:
        0;

    height:
        2px;

    background:
        linear-gradient(
            90deg,
            transparent,
            #60f8a0,
            #20ecf0,
            #733efd,
            #f5c51e,
            transparent
        );
}


.bh-project-copy{

    position:
        relative;

    z-index:
        3;

    min-width:
        0;
}


.bh-project-copy h2,
.bh-project-copy h3{

    margin-top:
        0 !important;

    font-size:
        clamp(
            28px,
            3.4vw,
            46px
        ) !important;

    line-height:
        1.08 !important;

    letter-spacing:
        -.03em;

    font-weight:
        950 !important;

    background:
        linear-gradient(
            102deg,
            #60f8a0,
            #20ecf0,
            #27b9fd,
            #733efd,
            #f5c51e
        );

    -webkit-background-clip:
        text;

    background-clip:
        text;

    -webkit-text-fill-color:
        transparent;

    color:
        transparent;
}


.bh-project-copy p{

    max-width:
        690px;

    color:
        #a9bacb !important;

    font-size:
        14px !important;

    line-height:
        1.72 !important;
}


.bh-project-conversion a,
.bh-project-conversion button{

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    min-height:
        46px;

    margin-top:
        16px;

    padding:
        10px 18px !important;

    border:
        1px solid
        rgba(32,236,240,.24) !important;

    border-radius:
        12px !important;

    background:
        linear-gradient(
            110deg,
            #60f8a0,
            #20ecf0,
            #27b9fd
        ) !important;

    color:
        #031522 !important;

    box-shadow:
        0 12px 28px
        rgba(32,236,240,.13) !important;

    font-size:
        12px !important;

    font-weight:
        950 !important;

    text-decoration:
        none !important;

    transition:
        transform .22s ease,
        box-shadow .22s ease;
}


.bh-project-conversion a:hover,
.bh-project-conversion button:hover{

    transform:
        translateY(-2px);

    box-shadow:
        0 17px 34px
        rgba(32,236,240,.19) !important;
}


/* =========================================================
   PROJECT BLUEPRINT VISUAL
   ========================================================= */

.bh-project-blueprint{

    position:
        relative;

    min-height:
        255px;

    overflow:
        hidden;

    border:
        1px solid
        rgba(115,62,253,.16);

    border-radius:
        20px;

    background:

        linear-gradient(
            rgba(39,185,253,.035) 1px,
            transparent 1px
        ),

        linear-gradient(
            90deg,
            rgba(39,185,253,.035) 1px,
            transparent 1px
        ),

        linear-gradient(
            145deg,
            rgba(12,25,46,.92),
            rgba(9,16,33,.95)
        );

    background-size:
        28px 28px,
        28px 28px,
        auto;

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


.bh-project-blueprint::before{

    content:"";

    position:
        absolute;

    left:
        16%;

    right:
        16%;

    top:
        50%;

    height:
        2px;

    background:
        linear-gradient(
            90deg,
            #20ecf0,
            #27b9fd,
            #733efd
        );

    opacity:
        .38;
}


.bh-project-node{

    position:
        absolute;

    width:
        58px;

    height:
        58px;

    display:
        grid;

    place-items:
        center;

    border:
        1px solid
        rgba(32,236,240,.24);

    border-radius:
        17px;

    background:
        rgba(8,18,35,.96);

    color:
        #20ecf0;

    box-shadow:
        0 14px 30px
        rgba(0,0,0,.25),
        0 0 25px
        rgba(32,236,240,.055);

    font-family:
        ui-monospace,
        SFMono-Regular,
        Menlo,
        Consolas,
        monospace;

    font-size:
        10px;

    font-weight:
        950;
}


.bh-project-node:nth-child(1){

    left:
        11%;

    top:
        calc(50% - 29px);
}


.bh-project-node:nth-child(2){

    left:
        calc(50% - 29px);

    top:
        calc(50% - 29px);

    border-color:
        rgba(39,185,253,.28);

    color:
        #27b9fd;
}


.bh-project-node:nth-child(3){

    right:
        11%;

    top:
        calc(50% - 29px);

    border-color:
        rgba(115,62,253,.30);

    color:
        #ad87ff;
}


.bh-project-pulse{

    position:
        absolute;

    width:
        115px;

    height:
        115px;

    left:
        calc(50% - 57px);

    top:
        calc(50% - 57px);

    border:
        1px solid
        rgba(32,236,240,.10);

    border-radius:
        50%;

    animation:
        bhProjectPulse
        3.3s
        ease-in-out
        infinite;

    pointer-events:
        none;
}


@keyframes bhProjectPulse{

    50%{

        transform:
            scale(1.14);

        opacity:
            .35;
    }

}


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

@media(max-width:900px){

    .bh-story-section{

        width:
            calc(100% - 20px) !important;

        padding:
            27px 19px !important;

        border-radius:
            24px;
    }


    .bh-story-grid{

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


    .bh-story-card,
    .bh-story-card.bh-story-wide,
    .bh-story-card.bh-story-narrow{

        grid-column:
            span 1;
    }


    .bh-project-conversion{

        width:
            calc(100% - 20px) !important;

        grid-template-columns:
            1fr;

        padding:
            28px 20px !important;
    }


    .bh-project-blueprint{

        min-height:
            210px;
    }

}


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

@media(max-width:580px){

    .bh-story-section{

        width:
            calc(100% - 12px) !important;

        margin:
            25px auto !important;

        padding:
            22px 12px !important;

        border-radius:
            20px;
    }


    .bh-story-section::before{

        left:
            14px;

        right:
            14px;
    }


    .bh-story-heading{

        font-size:
            29px !important;
    }


    .bh-story-grid{

        grid-template-columns:
            1fr !important;

        gap:
            11px !important;
    }


    .bh-story-card,
    .bh-story-card.bh-story-wide,
    .bh-story-card.bh-story-narrow{

        grid-column:
            auto;

        min-height:
            0;

        padding:
            20px 17px !important;

        border-radius:
            16px !important;
    }


    .bh-story-card h3,
    .bh-story-card h4{

        max-width:
            calc(100% - 42px);

        font-size:
            18px !important;
    }


    .bh-story-card p{

        font-size:
            12.5px !important;
    }


    .bh-story-network{

        opacity:
            .32;
    }


    .bh-project-conversion{

        width:
            calc(100% - 12px) !important;

        margin:
            25px auto !important;

        padding:
            24px 15px !important;

        border-radius:
            20px !important;
    }


    .bh-project-copy h2,
    .bh-project-copy h3{

        font-size:
            30px !important;
    }


    .bh-project-blueprint{

        min-height:
            180px;
    }


    .bh-project-node{

        width:
            48px;

        height:
            48px;

        border-radius:
            14px;
    }


    .bh-project-node:nth-child(1){

        left:
            7%;

        top:
            calc(50% - 24px);
    }


    .bh-project-node:nth-child(2){

        left:
            calc(50% - 24px);

        top:
            calc(50% - 24px);
    }


    .bh-project-node:nth-child(3){

        right:
            7%;

        top:
            calc(50% - 24px);
    }

}


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

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

    .bh-story-card,
    .bh-project-conversion a,
    .bh-project-conversion button,
    .bh-project-pulse{

        transition:
            none !important;

        animation:
            none !important;
    }

}


/* =========================================================
   PRINT
   ========================================================= */

@media print{

    .bh-story-section,
    .bh-project-conversion{

        width:
            100% !important;

        background:
            #fff !important;

        border-color:
            #dbe4ed !important;

        box-shadow:
            none !important;

        break-inside:
            avoid;
    }


    .bh-story-card{

        background:
            #fff !important;

        border-color:
            #dbe4ed !important;

        box-shadow:
            none !important;

        break-inside:
            avoid;
    }


    .bh-story-heading,
    .bh-project-copy h2,
    .bh-project-copy h3{

        background:
            none !important;

        -webkit-text-fill-color:
            #26374a !important;

        color:
            #26374a !important;
    }

}