/* ============================================================
   MARKETING STRATEGY
============================================================ */

.dmxMarketingStrategy{

    position:relative;
    overflow:hidden;

    padding:
        clamp(95px,10vw,150px)
        0;

    background:
        radial-gradient(
            circle at 10% 16%,
            rgba(0,217,220,.09),
            transparent 27%
        ),
        radial-gradient(
            circle at 90% 22%,
            rgba(6,103,241,.09),
            transparent 30%
        ),
        linear-gradient(
            180deg,
            #ffffff 0%,
            #f6f9fc 48%,
            #eef4f8 100%
        );

    color:var(--dmx-ink);

}


.dmxMarketingStrategy::before{

    content:"";

    position:absolute;
    z-index:0;

    top:-320px;
    right:-280px;

    width:760px;
    height:760px;

    border:
        1px solid rgba(6,103,241,.05);

    border-radius:50%;

    box-shadow:
        0 0 0 100px rgba(6,103,241,.018),
        0 0 0 200px rgba(0,217,220,.012);

    pointer-events:none;

}


.dmxMarketingStrategy::after{

    content:"";

    position:absolute;
    z-index:0;

    left:-180px;
    bottom:-250px;

    width:560px;
    height:560px;

    border-radius:50%;

    background:
        radial-gradient(
            circle,
            rgba(198,255,47,.08),
            transparent 70%
        );

    filter:blur(10px);

    pointer-events:none;

}


.dmxMarketingStrategy .container{

    position:relative;
    z-index:2;

}


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

.dmxMarketingStrategyHeader{

    max-width:1180px;

    margin-bottom:
        clamp(65px,8vw,110px);

}


.dmxMarketingStrategyEyebrow{

    display:flex;
    align-items:center;
    gap:14px;

    margin-bottom:
        clamp(24px,3vw,36px);

}


.dmxMarketingStrategyEyebrow > span{

    position:relative;

    width:45px;
    height:1px;

    background:
        linear-gradient(
            90deg,
            var(--dmx-blue),
            var(--dmx-cyan)
        );

}


.dmxMarketingStrategyEyebrow > span::after{

    content:"";

    position:absolute;

    top:50%;
    right:0;

    width:7px;
    height:7px;

    border-radius:50%;

    background:var(--dmx-lime);

    box-shadow:
        0 0 0 6px rgba(198,255,47,.11),
        0 0 18px rgba(198,255,47,.35);

    transform:translateY(-50%);

}


.dmxMarketingStrategyEyebrow small{

    color:var(--dmx-navy);

    font-size:11px;
    font-weight:900;

    letter-spacing:.17em;
    line-height:1.3;

    text-transform:uppercase;

}


.dmxMarketingStrategyHeading{

    display:grid;

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

    gap:
        clamp(45px,7vw,100px);

    align-items:end;

}


.dmxMarketingStrategyHeading h2{

    max-width:820px;

    margin:0;

    color:var(--dmx-ink);

    font-size:
        clamp(45px,5.8vw,78px);

    font-weight:780;
    line-height:1.01;

    letter-spacing:
        clamp(-4.5px,-.06em,-2px);

}


.dmxMarketingStrategyHeading h2 span{

    display:block;

    margin-top:10px;

    color:transparent;

    background:
        linear-gradient(
            100deg,
            var(--dmx-blue) 0%,
            #078ad6 45%,
            var(--dmx-cyan) 72%,
            #7bb928 100%
        );

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

}


.dmxMarketingStrategyIntro{

    padding-bottom:7px;

}


.dmxMarketingStrategyIntro > p{

    margin:0;

    color:var(--dmx-muted);

    font-size:
        clamp(16px,1.4vw,18px);

    font-weight:500;
    line-height:1.8;

}


.dmxMarketingStrategyPrinciple{

    display:flex;
    align-items:center;
    gap:14px;

    margin-top:28px;
    padding-top:22px;

    border-top:
        1px solid rgba(8,38,77,.1);

}


.dmxMarketingStrategyPrinciple > span{

    display:grid;
    place-items:center;

    flex:0 0 40px;

    width:40px;
    height:40px;

    border-radius:13px;

    background:
        linear-gradient(
            145deg,
            var(--dmx-navy),
            var(--dmx-blue)
        );

    color:white;

    font-size:10px;
    font-weight:900;

    box-shadow:
        0 10px 24px rgba(6,103,241,.18);

}


.dmxMarketingStrategyPrinciple p{

    margin:0;

    color:var(--dmx-navy);

    font-size:12px;
    font-weight:800;
    line-height:1.5;

}


/* ============================================================
   SYSTEM LAYOUT
============================================================ */

.dmxMarketingStrategySystem{

    display:grid;

    grid-template-columns:
        minmax(430px,.95fr)
        minmax(0,1.05fr);

    gap:
        clamp(55px,7vw,105px);

    align-items:center;

}


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

.dmxMarketingStrategyVisual{

    position:relative;

    min-height:
        clamp(600px,48vw,700px);

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

    border-radius:
        clamp(26px,3vw,36px);

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.94),
            rgba(237,245,250,.85)
        );

    box-shadow:
        0 38px 90px rgba(15,51,88,.13),
        inset 0 1px 0 white;

    isolation:isolate;

}


.dmxMarketingStrategyVisual::before{

    content:"Strategy";

    position:absolute;
    z-index:-1;

    top:24px;
    right:28px;

    color:rgba(8,38,77,.07);

    font-size:
        clamp(38px,5vw,66px);

    font-weight:900;

    letter-spacing:-.06em;

    text-transform:uppercase;

}


.dmxMarketingStrategyVisualGrid{

    position:absolute;
    z-index:-4;

    inset:0;

    opacity:.45;

    border-radius:inherit;

    background-image:
        linear-gradient(
            rgba(8,38,77,.055) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(8,38,77,.055) 1px,
            transparent 1px
        );

    background-size:34px 34px;

    mask-image:
        radial-gradient(
            ellipse at center,
            black 20%,
            transparent 77%
        );

    -webkit-mask-image:
        radial-gradient(
            ellipse at center,
            black 20%,
            transparent 77%
        );

}


.dmxMarketingStrategyVisualGlow{

    position:absolute;
    z-index:-3;

    top:50%;
    left:50%;

    width:390px;
    height:390px;

    border-radius:50%;

    background:
        radial-gradient(
            circle,
            rgba(6,103,241,.17),
            rgba(0,217,220,.08) 42%,
            transparent 72%
        );

    filter:blur(5px);

    transform:translate(-50%,-50%);

}


/* ============================================================
   STRATEGY MAP
============================================================ */

.dmxMarketingStrategyMap{

    position:absolute;

    top:50%;
    left:50%;

    width:
        min(88%,560px);

    height:
        min(78%,500px);

    transform:translate(-50%,-50%);

}


/* Center */

.dmxMarketingStrategyCenter{

    position:absolute;
    z-index:5;

    top:50%;
    left:50%;

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

    width:
        clamp(145px,15vw,180px);

    aspect-ratio:1;

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

    border-radius:50%;

    background:
        linear-gradient(
            145deg,
            var(--dmx-navy),
            var(--dmx-blue)
        );

    box-shadow:
        0 30px 65px rgba(6,103,241,.24),
        0 0 0 13px rgba(255,255,255,.7),
        0 0 0 14px rgba(6,103,241,.08);

    transform:translate(-50%,-50%);

}


.dmxMarketingStrategyCenter::before{

    content:"";

    position:absolute;

    inset:13px;

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

    border-radius:50%;

}


.dmxMarketingStrategyCenter::after{

    content:"";

    position:absolute;

    top:22px;
    right:25px;

    width:10px;
    height:10px;

    border-radius:50%;

    background:var(--dmx-lime);

    box-shadow:
        0 0 0 7px rgba(198,255,47,.1),
        0 0 20px rgba(198,255,47,.45);

}


.dmxMarketingStrategyCenter span{

    position:relative;
    z-index:2;

    margin-bottom:7px;

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

    font-size:9px;
    font-weight:850;

    letter-spacing:.16em;

    text-transform:uppercase;

}


.dmxMarketingStrategyCenter strong{

    position:relative;
    z-index:2;

    color:white;

    font-size:
        clamp(18px,2vw,24px);

    font-weight:900;

    letter-spacing:-.04em;

}


/* Nodes */

.dmxMarketingStrategyNode{

    position:absolute;
    z-index:6;

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

    min-width:150px;

    padding:
        12px
        14px;

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

    border-radius:17px;

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

    box-shadow:
        0 18px 40px rgba(8,38,77,.12),
        inset 0 1px 0 white;

    backdrop-filter:blur(16px);
    -webkit-backdrop-filter:blur(16px);

    transition:
        transform .4s cubic-bezier(.2,.8,.2,1),
        box-shadow .4s ease,
        border-color .4s ease;

}


.dmxMarketingStrategyNodeIcon{

    display:grid;
    place-items:center;

    flex:0 0 38px;

    width:38px;
    height:38px;

    border-radius:12px;

    background:
        linear-gradient(
            145deg,
            var(--dmx-navy),
            var(--dmx-blue)
        );

    color:white;

    font-size:9px;
    font-weight:900;

    box-shadow:
        0 9px 20px rgba(6,103,241,.18);

}


.dmxMarketingStrategyNode small{

    display:block;

    margin-bottom:3px;

    color:var(--dmx-muted);

    font-size:8px;
    font-weight:850;

    letter-spacing:.1em;

    text-transform:uppercase;

}


.dmxMarketingStrategyNode strong{

    display:block;

    color:var(--dmx-navy);

    font-size:12px;
    font-weight:850;

    white-space:nowrap;

}


/* Positions */

.dmxMarketingStrategyNodeBusiness{

    top:0;
    left:50%;

    transform:
        translateX(-50%)
        rotate(-2deg);

}


.dmxMarketingStrategyNodeAudience{

    top:20%;
    right:-2%;

    transform:rotate(3deg);

}


.dmxMarketingStrategyNodeChannels{

    right:5%;
    bottom:4%;

    transform:rotate(-3deg);

}


.dmxMarketingStrategyNodeContent{

    left:5%;
    bottom:4%;

    transform:rotate(3deg);

}


.dmxMarketingStrategyNodeData{

    top:20%;
    left:-2%;

    transform:rotate(-3deg);

}


.dmxMarketingStrategyNodeAudience
.dmxMarketingStrategyNodeIcon{

    background:
        linear-gradient(
            145deg,
            var(--dmx-blue),
            var(--dmx-cyan)
        );

}


.dmxMarketingStrategyNodeChannels
.dmxMarketingStrategyNodeIcon{

    background:
        linear-gradient(
            145deg,
            #16879d,
            var(--dmx-cyan)
        );

}


.dmxMarketingStrategyNodeContent
.dmxMarketingStrategyNodeIcon{

    background:
        linear-gradient(
            145deg,
            #69920e,
            var(--dmx-lime)
        );

    color:#162500;

}


.dmxMarketingStrategyNodeData
.dmxMarketingStrategyNodeIcon{

    background:
        linear-gradient(
            145deg,
            #3d5d90,
            var(--dmx-blue)
        );

}


/* ============================================================
   CONNECTORS
============================================================ */

.dmxMarketingStrategyConnector{

    position:absolute;
    z-index:2;

    top:50%;
    left:50%;

    width:2px;
    height:150px;

    overflow:hidden;

    background:
        linear-gradient(
            180deg,
            rgba(6,103,241,.03),
            rgba(6,103,241,.25),
            rgba(0,217,220,.35)
        );

    transform-origin:
        50%
        100%;

}


.dmxMarketingStrategyConnector::before{

    content:"";

    position:absolute;

    top:-40%;
    left:0;

    width:100%;
    height:42%;

    background:
        linear-gradient(
            180deg,
            transparent,
            var(--dmx-cyan),
            transparent
        );

    animation:
        dmxMarketingStrategyPulse
        3.1s
        linear
        infinite;

}


.dmxMarketingStrategyConnectorOne{

    transform:
        translate(-50%,-100%)
        rotate(0deg);

}


.dmxMarketingStrategyConnectorTwo{

    transform:
        translate(-50%,-100%)
        rotate(72deg);

}


.dmxMarketingStrategyConnectorThree{

    transform:
        translate(-50%,-100%)
        rotate(144deg);

}


.dmxMarketingStrategyConnectorFour{

    transform:
        translate(-50%,-100%)
        rotate(216deg);

}


.dmxMarketingStrategyConnectorFive{

    transform:
        translate(-50%,-100%)
        rotate(288deg);

}


@keyframes dmxMarketingStrategyPulse{

    0%{

        top:-45%;

    }

    100%{

        top:115%;

    }

}


/* ============================================================
   VISUAL METRIC
============================================================ */

.dmxMarketingStrategyVisualMetric{

    position:absolute;
    z-index:8;

    left:28px;
    bottom:24px;

    padding:
        14px
        17px;

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

    border-radius:15px;

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

    box-shadow:
        0 15px 34px rgba(8,38,77,.1);

    backdrop-filter:blur(14px);
    -webkit-backdrop-filter:blur(14px);

}


.dmxMarketingStrategyVisualMetric::before{

    content:"";

    position:absolute;

    top:0;
    left:0;

    width:4px;
    height:100%;

    border-radius:
        15px
        0
        0
        15px;

    background:
        linear-gradient(
            180deg,
            var(--dmx-blue),
            var(--dmx-cyan),
            var(--dmx-lime)
        );

}


.dmxMarketingStrategyVisualMetric small{

    display:block;

    margin-bottom:5px;

    color:var(--dmx-muted);

    font-size:8px;
    font-weight:850;

    letter-spacing:.11em;

    text-transform:uppercase;

}


.dmxMarketingStrategyVisualMetric strong{

    color:var(--dmx-navy);

    font-size:13px;
    font-weight:900;

    letter-spacing:-.02em;

}


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

.dmxMarketingStrategyContent{

    display:grid;

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

    gap:18px;

}


.dmxMarketingStrategyCard{

    position:relative;
    overflow:hidden;

    min-height:310px;

    padding:
        clamp(24px,2.5vw,31px);

    border:
        1px solid rgba(8,38,77,.08);

    border-radius:24px;

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

    box-shadow:
        0 18px 45px rgba(15,51,88,.07);

    transition:
        transform .4s cubic-bezier(.2,.8,.2,1),
        box-shadow .4s ease,
        border-color .4s ease,
        background .4s ease;

}


.dmxMarketingStrategyCard::before{

    content:"";

    position:absolute;

    top:-90px;
    right:-90px;

    width:180px;
    height:180px;

    border-radius:50%;

    background:
        radial-gradient(
            circle,
            rgba(6,103,241,.08),
            transparent 70%
        );

    transition:
        transform .5s ease,
        opacity .4s ease;

}


.dmxMarketingStrategyCard::after{

    content:"";

    position:absolute;

    left:0;
    bottom:0;

    width:100%;
    height:4px;

    opacity:0;

    background:
        linear-gradient(
            90deg,
            var(--dmx-blue),
            var(--dmx-cyan),
            var(--dmx-lime)
        );

    transform:scaleX(.2);
    transform-origin:left;

    transition:
        opacity .4s ease,
        transform .4s ease;

}


.dmxMarketingStrategyCardTop{

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

    margin-bottom:26px;

}


.dmxMarketingStrategyCardTop > span{

    display:grid;
    place-items:center;

    width:42px;
    height:42px;

    border:
        1px solid rgba(6,103,241,.12);

    border-radius:13px;

    background:
        rgba(6,103,241,.055);

    color:var(--dmx-blue);

    font-size:10px;
    font-weight:900;

}


.dmxMarketingStrategyCardTop small{

    color:var(--dmx-muted);

    font-size:8px;
    font-weight:850;

    letter-spacing:.14em;

    text-transform:uppercase;

}


.dmxMarketingStrategyCard h3{

    position:relative;
    z-index:2;

    margin:
        0
        0
        14px;

    color:var(--dmx-navy);

    font-size:
        clamp(21px,2vw,27px);

    font-weight:850;
    line-height:1.12;

    letter-spacing:-.035em;

}


.dmxMarketingStrategyCard > p{

    position:relative;
    z-index:2;

    margin:0;

    color:var(--dmx-muted);

    font-size:14px;
    font-weight:500;
    line-height:1.7;

}


.dmxMarketingStrategyCard ul{

    position:relative;
    z-index:2;

    display:grid;
    gap:9px;

    margin:
        23px
        0
        0;

    padding:0;

    list-style:none;

}


.dmxMarketingStrategyCard li{

    position:relative;

    padding-left:20px;

    color:var(--dmx-navy);

    font-size:11px;
    font-weight:750;
    line-height:1.5;

}


.dmxMarketingStrategyCard li::before{

    content:"";

    position:absolute;

    top:.54em;
    left:0;

    width:7px;
    height:7px;

    border-radius:50%;

    background:
        linear-gradient(
            145deg,
            var(--dmx-cyan),
            var(--dmx-lime)
        );

    box-shadow:
        0 0 0 4px rgba(0,217,220,.07);

}


/* ============================================================
   RESULT
============================================================ */

.dmxMarketingStrategyResult{

    display:grid;

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

    gap:
        clamp(25px,4vw,55px);

    align-items:center;

    margin-top:
        clamp(55px,7vw,90px);

    padding:
        clamp(28px,4vw,45px);

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

    border-radius:
        clamp(24px,3vw,32px);

    background:
        linear-gradient(
            110deg,
            rgba(8,38,77,.98),
            rgba(6,103,241,.95)
        );

    box-shadow:
        0 30px 70px rgba(8,38,77,.19);

}


.dmxMarketingStrategyResultLabel{

    display:flex;
    align-items:center;
    gap:12px;

}


.dmxMarketingStrategyResultLabel > span{

    width:34px;
    height:1px;

    background:
        linear-gradient(
            90deg,
            var(--dmx-cyan),
            var(--dmx-lime)
        );

}


.dmxMarketingStrategyResultLabel small{

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

    font-size:9px;
    font-weight:900;

    letter-spacing:.15em;

    text-transform:uppercase;

    white-space:nowrap;

}


.dmxMarketingStrategyResult > p{

    max-width:770px;

    margin:0;

    color:white;

    font-size:
        clamp(17px,1.7vw,22px);

    font-weight:700;
    line-height:1.55;

    letter-spacing:-.02em;

}


.dmxMarketingStrategyResult > a{

    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:12px;

    min-height:55px;

    padding:
        0
        21px;

    border-radius:15px;

    background:white;

    color:var(--dmx-navy);

    font-size:11px;
    font-weight:900;

    text-decoration:none;

    white-space:nowrap;

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

    transition:
        transform .3s ease,
        box-shadow .3s ease,
        background .3s ease;

}


.dmxMarketingStrategyResult > a span{

    display:grid;
    place-items:center;

    width:27px;
    height:27px;

    border-radius:9px;

    background:
        rgba(6,103,241,.07);

    color:var(--dmx-blue);

    font-size:14px;

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

}


/* ============================================================
   HOVER
============================================================ */

@media (hover:hover){

    .dmxMarketingStrategyNode:hover{

        transform:
            translateY(-6px)
            rotate(0deg);

        border-color:
            rgba(6,103,241,.18);

        box-shadow:
            0 24px 50px rgba(8,38,77,.16);

    }


    .dmxMarketingStrategyNodeBusiness:hover{

        transform:
            translateX(-50%)
            translateY(-6px)
            rotate(0deg);

    }


    .dmxMarketingStrategyCard:hover{

        transform:translateY(-8px);

        border-color:
            rgba(6,103,241,.16);

        background:white;

        box-shadow:
            0 28px 62px rgba(15,51,88,.12);

    }


    .dmxMarketingStrategyCard:hover::before{

        transform:scale(1.35);

        opacity:.85;

    }


    .dmxMarketingStrategyCard:hover::after{

        opacity:1;

        transform:scaleX(1);

    }


    .dmxMarketingStrategyResult > a:hover{

        transform:translateY(-4px);

        background:#f8fbfd;

        box-shadow:
            0 20px 38px rgba(0,0,0,.18);

    }


    .dmxMarketingStrategyResult > a:hover span{

        transform:
            translate(3px,-3px);

        background:
            rgba(6,103,241,.12);

    }

}


/* ============================================================
   RESPONSIVE — 1200PX
============================================================ */

@media (max-width:1200px){

    .dmxMarketingStrategySystem{

        grid-template-columns:
            minmax(400px,.95fr)
            minmax(0,1.05fr);

        gap:50px;

    }


    .dmxMarketingStrategyNode{

        min-width:140px;

    }

}


/* ============================================================
   RESPONSIVE — 1040PX
============================================================ */

@media (max-width:1040px){

    .dmxMarketingStrategyHeading{

        grid-template-columns:1fr;

        gap:32px;

    }


    .dmxMarketingStrategyIntro{

        max-width:760px;

    }


    .dmxMarketingStrategySystem{

        grid-template-columns:1fr;

        gap:65px;

    }


    .dmxMarketingStrategyVisual{

        width:
            min(100%,760px);

        min-height:650px;

        margin:
            0
            auto;

    }


    .dmxMarketingStrategyContent{

        width:
            min(100%,820px);

        margin:
            0
            auto;

    }


    .dmxMarketingStrategyResult{

        grid-template-columns:
            1fr
            auto;

    }


    .dmxMarketingStrategyResultLabel{

        grid-column:
            1
            / -1;

    }

}


/* ============================================================
   RESPONSIVE — 760PX
============================================================ */

@media (max-width:760px){

    .dmxMarketingStrategy{

        padding:
            85px
            0;

    }


    .dmxMarketingStrategyHeader{

        margin-bottom:60px;

    }


    .dmxMarketingStrategyHeading h2{

        font-size:
            clamp(43px,10vw,66px);

    }


    .dmxMarketingStrategyVisual{

        min-height:590px;

    }


    .dmxMarketingStrategyMap{

        width:92%;
        height:80%;

    }


    .dmxMarketingStrategyNode{

        min-width:130px;

        padding:
            10px
            11px;

    }


    .dmxMarketingStrategyNodeIcon{

        flex-basis:34px;

        width:34px;
        height:34px;

    }


    .dmxMarketingStrategyConnector{

        height:135px;

    }


    .dmxMarketingStrategyContent{

        grid-template-columns:1fr;

    }


    .dmxMarketingStrategyCard{

        min-height:auto;

    }


    .dmxMarketingStrategyResult{

        grid-template-columns:1fr;

        align-items:start;

    }


    .dmxMarketingStrategyResult > a{

        width:max-content;

    }

}


/* ============================================================
   RESPONSIVE — 560PX
============================================================ */

@media (max-width:560px){

    .dmxMarketingStrategy{

        padding:
            72px
            0;

    }


    .dmxMarketingStrategyEyebrow{

        margin-bottom:24px;

    }


    .dmxMarketingStrategyHeading h2{

        font-size:
            clamp(39px,12vw,56px);

    }


    .dmxMarketingStrategyIntro > p{

        font-size:16px;
        line-height:1.7;

    }


    .dmxMarketingStrategyVisual{

        min-height:540px;

        border-radius:24px;

    }


    .dmxMarketingStrategyVisual::before{

        top:20px;
        right:20px;

        font-size:35px;

    }


    .dmxMarketingStrategyMap{

        width:98%;
        height:82%;

    }


    .dmxMarketingStrategyCenter{

        width:130px;

    }


    .dmxMarketingStrategyCenter strong{

        font-size:18px;

    }


    .dmxMarketingStrategyNode{

        min-width:112px;

        gap:8px;

        padding:
            8px
            9px;

        border-radius:14px;

    }


    .dmxMarketingStrategyNodeIcon{

        flex-basis:30px;

        width:30px;
        height:30px;

        border-radius:9px;

        font-size:8px;

    }


    .dmxMarketingStrategyNode small{

        font-size:6px;

    }


    .dmxMarketingStrategyNode strong{

        font-size:9px;

    }


    .dmxMarketingStrategyNodeBusiness{

        top:2%;

    }


    .dmxMarketingStrategyNodeAudience{

        top:22%;
        right:0;

    }


    .dmxMarketingStrategyNodeChannels{

        right:0;
        bottom:6%;

    }


    .dmxMarketingStrategyNodeContent{

        left:0;
        bottom:6%;

    }


    .dmxMarketingStrategyNodeData{

        top:22%;
        left:0;

    }


    .dmxMarketingStrategyConnector{

        height:115px;

    }


    .dmxMarketingStrategyVisualMetric{

        left:16px;
        bottom:15px;

        padding:
            11px
            13px;

    }


    .dmxMarketingStrategyCard{

        padding:24px;

        border-radius:20px;

    }


    .dmxMarketingStrategyResult{

        padding:25px;

        border-radius:24px;

    }


    .dmxMarketingStrategyResult > a{

        width:100%;

    }

}


/* ============================================================
   RESPONSIVE — 410PX
============================================================ */

@media (max-width:410px){

    .dmxMarketingStrategyVisual{

        min-height:500px;

    }


    .dmxMarketingStrategyCenter{

        width:118px;

    }


    .dmxMarketingStrategyConnector{

        height:104px;

    }


    .dmxMarketingStrategyNode{

        min-width:105px;

    }


    .dmxMarketingStrategyVisualMetric{

        display:none;

    }

}


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

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

    .dmxMarketingStrategyConnector::before{

        animation:none;

    }


    .dmxMarketingStrategyNode,
    .dmxMarketingStrategyCard,
    .dmxMarketingStrategyCard::before,
    .dmxMarketingStrategyCard::after,
    .dmxMarketingStrategyResult > a,
    .dmxMarketingStrategyResult > a span{

        transition:none;

    }

}