/* ==========================================================
   DIGITAL MARKETING
   SECTION 01 — HERO
========================================================== */

.dm-hero {
    position: relative;
    overflow: hidden;

    padding: 48px 0 24px;

    background: #f7f5f2;
}


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

.dm-hero-grid {
    position: absolute;
    inset: 0;

    opacity: .38;

    background-image:
        linear-gradient(
            rgba(17,17,17,.035) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(17,17,17,.035) 1px,
            transparent 1px
        );

    background-size: 42px 42px;

    pointer-events: none;
}


.dm-hero-glow {
    position: absolute;

    width: 500px;
    height: 500px;

    right: -220px;
    top: -230px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(242,99,34,.12),
            rgba(242,99,34,0) 70%
        );

    pointer-events: none;
}


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

.dm-hero-layout {
    position: relative;
    z-index: 2;

    display: grid;

    grid-template-columns:
        minmax(0, 46%)
        minmax(450px, 54%);

    align-items: center;

    gap: 32px;
}


/* ==========================================================
   LEFT CONTENT
========================================================== */

.dm-hero-content {
    position: relative;
    z-index: 3;

    max-width: 670px;
}


.dm-hero-content h1 {
    margin: 0;

    color: #111111;
}


.dm-hero-content h1 span {
    display: block;

    color: var(--tdc-orange, #f26322);
}


.dm-hero-lead {
    max-width: 620px;

    margin: 14px 0 0;

    color: var(--tdc-text-muted, #66615e);
}


/* ==========================================================
   ACTIONS
========================================================== */

.dm-hero-actions {
    display: flex;
    flex-wrap: wrap;

    gap: 8px;

    margin-top: 22px;
}


.dm-hero-primary,
.dm-hero-secondary {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    gap: 9px;

    min-height: 48px;

    padding: 0 18px;

    border-radius: 50px;

    text-decoration: none;

    transition:
        transform .3s ease,
        background .3s ease,
        color .3s ease,
        gap .3s ease;
}


/* PRIMARY */

.dm-hero-primary {
    background: var(--tdc-orange, #f26322);

    color: #ffffff;
}


.dm-hero-primary:hover {
    gap: 13px;

    transform: translateY(-2px);

    background: #111111;
}


/* SECONDARY */

.dm-hero-secondary {
    border: 1px solid #d8d2cd;

    background: #ffffff;

    color: #111111;
}


.dm-hero-secondary:hover {
    transform: translateY(-2px);

    border-color: #111111;
}


/* ==========================================================
   CAPABILITIES
========================================================== */

.dm-hero-capabilities {
    display: grid;

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

    gap: 5px;

    margin-top: 24px;
    padding-top: 17px;

    border-top: 1px solid #ddd7d2;
}


.dm-hero-capabilities > div {
    padding: 9px 8px;

    border-radius: 8px;

    background: rgba(255,255,255,.65);
}


.dm-hero-capabilities span,
.dm-hero-capabilities strong {
    display: block;
}


.dm-hero-capabilities span {
    margin-bottom: 2px;

    color: var(--tdc-orange, #f26322);
}


.dm-hero-capabilities strong {
    color: #111111;
}


/* ==========================================================
   COMMAND CENTER
========================================================== */

.dm-command {
    position: relative;

    min-height: 585px;

    overflow: hidden;

    padding: 17px;

    border-radius: 22px;

    background: #111111;

    box-shadow:
        0 28px 70px rgba(17,17,17,.16);
}


/* GRID INSIDE */

.dm-command::before {
    content: "";

    position: absolute;
    inset: 0;

    opacity: .055;

    background-image:
        linear-gradient(
            rgba(255,255,255,.7) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(255,255,255,.7) 1px,
            transparent 1px
        );

    background-size: 30px 30px;
}


/* ==========================================================
   COMMAND TOP
========================================================== */

.dm-command-top {
    position: relative;
    z-index: 10;

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

    gap: 15px;

    padding-bottom: 12px;

    border-bottom: 1px solid rgba(255,255,255,.08);
}


.dm-command-top div > span {
    display: block;

    margin-bottom: 2px;

    color: var(--tdc-orange, #f26322);
}


.dm-command-top strong {
    display: block;

    color: #ffffff;
}


.dm-command-live {
    display: inline-flex;
    align-items: center;

    gap: 6px;

    padding: 6px 9px;

    border-radius: 50px;

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

    color: rgba(255,255,255,.55);
}


.dm-command-live i {
    display: block;

    width: 7px;
    height: 7px;

    border-radius: 50%;

    background: var(--tdc-orange, #f26322);

    box-shadow:
        0 0 0 4px rgba(242,99,34,.12);

    animation: dmPulse 2s infinite;
}


@keyframes dmPulse {

    0%,
    100% {
        box-shadow:
            0 0 0 4px rgba(242,99,34,.12);
    }

    50% {
        box-shadow:
            0 0 0 8px rgba(242,99,34,.03);
    }

}


/* ==========================================================
   ECOSYSTEM
========================================================== */

.dm-ecosystem {
    position: relative;

    height: 455px;

    margin-top: 10px;
}


/* ==========================================================
   RINGS
========================================================== */

.dm-ring {
    position: absolute;

    top: 50%;
    left: 50%;

    border-radius: 50%;

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

    pointer-events: none;
}


.dm-ring-one {
    width: 190px;
    height: 190px;

    border: 1px solid rgba(242,99,34,.20);
}


.dm-ring-two {
    width: 310px;
    height: 310px;

    border: 1px dashed rgba(255,255,255,.10);
}


.dm-ring-three {
    width: 420px;
    height: 420px;

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


/* ==========================================================
   CORE
========================================================== */

.dm-core {
    position: absolute;
    z-index: 6;

    top: 50%;
    left: 50%;

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

    width: 150px;
    height: 150px;

    padding: 15px;

    border: 1px solid rgba(242,99,34,.32);
    border-radius: 50%;

    background: #181818;

    box-shadow:
        0 0 0 12px rgba(242,99,34,.035),
        0 22px 45px rgba(0,0,0,.28);

    text-align: center;

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


.dm-core > span {
    display: block;

    color: rgba(255,255,255,.35);
}


.dm-core strong {
    display: block;

    color: #ffffff;
}


.dm-core strong em {
    display: block;

    color: var(--tdc-orange, #f26322);
}


.dm-core small {
    display: block;

    margin-top: 4px;

    color: rgba(255,255,255,.35);
}


/* ==========================================================
   CONNECTION LINES
========================================================== */

.dm-connect {
    position: absolute;
    z-index: 2;

    top: 50%;
    left: 50%;

    width: 125px;
    height: 1px;

    background:
        linear-gradient(
            90deg,
            rgba(242,99,34,.55),
            rgba(242,99,34,.05)
        );

    transform-origin: left center;
}


.dm-connect-1 {
    transform: rotate(-90deg);
}


.dm-connect-2 {
    transform: rotate(-30deg);
}


.dm-connect-3 {
    transform: rotate(30deg);
}


.dm-connect-4 {
    transform: rotate(90deg);
}


.dm-connect-5 {
    transform: rotate(150deg);
}


.dm-connect-6 {
    transform: rotate(210deg);
}


/* ==========================================================
   CHANNELS
========================================================== */

.dm-channel {
    position: absolute;
    z-index: 7;

    display: flex;
    align-items: center;

    gap: 8px;

    min-width: 118px;

    padding: 8px 9px;

    border: 1px solid rgba(255,255,255,.09);
    border-radius: 10px;

    background: #202020;

    box-shadow:
        0 12px 28px rgba(0,0,0,.20);

    transition:
        transform .3s ease,
        border-color .3s ease,
        background .3s ease;
}


.dm-channel:hover {
    z-index: 15;

    border-color: rgba(242,99,34,.40);

    background: #262626;
}


.dm-channel-icon {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 34px;
    height: 34px;

    flex: 0 0 34px;

    border-radius: 8px;

    background: rgba(242,99,34,.12);

    color: var(--tdc-orange, #f26322);
}


.dm-channel small,
.dm-channel strong {
    display: block;
}


.dm-channel small {
    color: rgba(255,255,255,.35);
}


.dm-channel strong {
    color: #ffffff;
}


/* ==========================================================
   CHANNEL POSITIONS
========================================================== */

.dm-channel-seo {
    top: 16px;
    left: 50%;

    transform: translateX(-50%);
}


.dm-channel-seo:hover {
    transform:
        translateX(-50%)
        translateY(-3px);
}


.dm-channel-google {
    top: 105px;
    right: 4px;
}


.dm-channel-google:hover {
    transform: translateY(-3px);
}


.dm-channel-meta {
    right: 8px;
    bottom: 80px;
}


.dm-channel-meta:hover {
    transform: translateY(-3px);
}


.dm-channel-social {
    bottom: 13px;
    left: 50%;

    transform: translateX(-50%);
}


.dm-channel-social:hover {
    transform:
        translateX(-50%)
        translateY(-3px);
}


.dm-channel-content {
    left: 8px;
    bottom: 80px;
}


.dm-channel-content:hover {
    transform: translateY(-3px);
}


.dm-channel-creative {
    top: 105px;
    left: 4px;
}


.dm-channel-creative:hover {
    transform: translateY(-3px);
}


/* ==========================================================
   PERFORMANCE CARD
========================================================== */

.dm-performance-card {
    position: absolute;
    z-index: 12;

    right: 2px;
    top: 240px;

    width: 165px;

    padding: 10px;

    border: 1px solid rgba(255,255,255,.09);
    border-radius: 10px;

    background: rgba(28,28,28,.96);

    box-shadow:
        0 16px 35px rgba(0,0,0,.25);

    transform: rotate(2deg);
}


.dm-performance-head {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 8px;
}


.dm-performance-head span,
.dm-performance-head strong {
    display: block;
}


.dm-performance-head div > span {
    color: rgba(255,255,255,.35);
}


.dm-performance-head strong {
    color: #ffffff;
}


.dm-performance-up {
    display: flex !important;
    align-items: center;
    justify-content: center;

    width: 28px;
    height: 28px;

    border-radius: 7px;

    background: rgba(242,99,34,.12);

    color: var(--tdc-orange, #f26322);
}


/* CHART */

.dm-chart {
    display: flex;
    align-items: flex-end;

    gap: 4px;

    height: 55px;

    margin-top: 10px;
}


.dm-chart span {
    display: block;

    flex: 1;

    min-height: 5px;

    border-radius: 3px 3px 0 0;

    background: rgba(255,255,255,.12);
}


.dm-chart span:nth-last-child(-n+2) {
    background: var(--tdc-orange, #f26322);
}


.dm-performance-bottom {
    display: flex;
    justify-content: space-between;

    gap: 4px;

    margin-top: 6px;

    color: rgba(255,255,255,.30);
}


/* ==========================================================
   AUDIENCE CARD
========================================================== */

.dm-audience-card {
    position: absolute;
    z-index: 12;

    left: 5px;
    top: 245px;

    display: grid;

    grid-template-columns:
        34px
        minmax(0, 1fr)
        8px;

    align-items: center;

    gap: 7px;

    width: 165px;

    padding: 9px;

    border: 1px solid rgba(255,255,255,.09);
    border-radius: 10px;

    background: rgba(28,28,28,.96);

    box-shadow:
        0 16px 35px rgba(0,0,0,.25);

    transform: rotate(-2deg);
}


.dm-audience-icon {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 34px;
    height: 34px;

    border-radius: 8px;

    background: var(--tdc-orange, #f26322);

    color: #ffffff;
}


.dm-audience-card div > span,
.dm-audience-card strong {
    display: block;
}


.dm-audience-card div > span {
    color: rgba(255,255,255,.35);
}


.dm-audience-card strong {
    color: #ffffff;
}


.dm-audience-status {
    width: 8px;
    height: 8px;

    border-radius: 50%;

    background: var(--tdc-orange, #f26322);
}


/* ==========================================================
   COMMAND FOOTER
========================================================== */

.dm-command-footer {
    position: relative;
    z-index: 10;

    display: grid;

    grid-template-columns:
        1fr auto
        1fr auto
        1fr auto
        1fr;

    align-items: center;

    gap: 5px;

    padding-top: 10px;

    border-top: 1px solid rgba(255,255,255,.08);
}


.dm-command-footer > div {
    padding: 7px;

    border-radius: 7px;

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

    text-align: center;
}


.dm-command-footer span,
.dm-command-footer strong {
    display: block;
}


.dm-command-footer span {
    color: var(--tdc-orange, #f26322);
}


.dm-command-footer strong {
    color: rgba(255,255,255,.65);
}


.dm-command-footer > i {
    color: rgba(255,255,255,.16);
}


.dm-command-footer .active {
    background: var(--tdc-orange, #f26322);
}


.dm-command-footer .active span,
.dm-command-footer .active strong {
    color: #ffffff;
}


/* ==========================================================
   HERO BOTTOM
========================================================== */

.dm-hero-bottom {
    position: relative;
    z-index: 3;

    display: grid;

    grid-template-columns:
        minmax(260px, 32%)
        minmax(0, 68%);

    align-items: center;

    gap: 20px;

    margin-top: 12px;
    padding: 14px 17px;

    border: 1px solid #ded8d3;
    border-radius: 13px;

    background: #ffffff;
}


.dm-hero-bottom-intro span,
.dm-hero-bottom-intro strong {
    display: block;
}


.dm-hero-bottom-intro span {
    margin-bottom: 2px;

    color: var(--tdc-orange, #f26322);
}


.dm-hero-bottom-intro strong {
    color: #111111;
}


/* FLOW */

.dm-hero-bottom-flow {
    display: flex;
    align-items: center;
    justify-content: flex-end;

    gap: 6px;
}


.dm-hero-bottom-flow span {
    padding: 6px 9px;

    border-radius: 50px;

    background: #f4f0ed;

    color: #706963;
}


.dm-hero-bottom-flow i {
    color: #c7c0ba;
}


.dm-hero-bottom-flow .dm-flow-final {
    background: #111111;

    color: #ffffff;
}


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

@media (max-width: 1023px) {

    .dm-hero {
        padding: 38px 0 20px;
    }


    .dm-hero-layout {
        grid-template-columns:
            minmax(0, 42%)
            minmax(420px, 58%);

        gap: 20px;
    }


    .dm-command {
        min-height: 565px;
    }


    .dm-hero-capabilities {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }


    .dm-hero-bottom {
        grid-template-columns: 1fr;

        gap: 9px;
    }


    .dm-hero-bottom-flow {
        justify-content: flex-start;
    }

}


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

@media (max-width: 767px) {

    .dm-hero {
        padding: 30px 0 18px;
    }


    .dm-hero-layout {
        grid-template-columns: 1fr;

        gap: 22px;
    }


    .dm-hero-content {
        max-width: none;
    }


    .dm-command {
        min-height: 570px;
    }


    .dm-hero-bottom-flow {
        display: grid;

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

        gap: 4px;
    }


    .dm-hero-bottom-flow i {
        display: none;
    }


    .dm-hero-bottom-flow span {
        text-align: center;
    }

}


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

@media (max-width: 480px) {

    .dm-hero-actions {
        display: grid;

        grid-template-columns: 1fr;
    }


    .dm-hero-primary,
    .dm-hero-secondary {
        width: 100%;
    }


    .dm-hero-capabilities {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }


    .dm-command {
        min-height: 545px;

        padding: 13px;
    }


    .dm-ecosystem {
        height: 425px;
    }


    .dm-ring-one {
        width: 145px;
        height: 145px;
    }


    .dm-ring-two {
        width: 235px;
        height: 235px;
    }


    .dm-ring-three {
        width: 320px;
        height: 320px;
    }


    .dm-core {
        width: 118px;
        height: 118px;
    }


    .dm-channel {
        min-width: 92px;

        padding: 6px;
    }


    .dm-channel-icon {
        width: 28px;
        height: 28px;

        flex-basis: 28px;
    }


    .dm-channel-google {
        right: -5px;
    }


    .dm-channel-meta {
        right: -5px;
    }


    .dm-channel-content {
        left: -5px;
    }


    .dm-channel-creative {
        left: -5px;
    }


    .dm-performance-card {
        width: 135px;

        right: -4px;

        top: 225px;
    }


    .dm-audience-card {
        width: 135px;

        left: -4px;

        top: 225px;
    }


    .dm-command-footer {
        grid-template-columns:
            repeat(4, minmax(0, 1fr));
    }


    .dm-command-footer > i {
        display: none;
    }


    .dm-hero-bottom-flow {
        grid-template-columns: 1fr;
    }


    .dm-hero-bottom-flow span {
        text-align: left;
    }

}


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

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

    .dm-command-live i {
        animation: none;
    }


    .dm-channel,
    .dm-hero-primary,
    .dm-hero-secondary {
        transition: none !important;
    }

}
/* ==========================================================
   DIGITAL MARKETING
   SECTION 02 — MORE THAN BEING ONLINE
========================================================== */

.dm-online {
    position: relative;
    overflow: hidden;

    padding: 50px 0;

    background: #ffffff;
}


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

.dm-online-header {
    display: grid;

    grid-template-columns:
        minmax(0, 60%)
        minmax(300px, 40%);

    align-items: end;

    gap: 55px;

    margin-bottom: 28px;
}


.dm-online-header h2 {
    max-width: 850px;

    margin: 0;

    color: #111111;
}


.dm-online-header h2 span {
    display: block;

    color: var(--tdc-orange, #f26322);
}


.dm-online-header-copy {
    max-width: 500px;
}


.dm-online-header-copy p {
    margin: 0;

    color: var(--tdc-text-muted, #66615e);
}


/* ==========================================================
   TRANSFORMATION LAYOUT
========================================================== */

.dm-transform {
    display: grid;

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

    align-items: stretch;

    gap: 10px;
}


/* ==========================================================
   SIDES
========================================================== */

.dm-scattered,
.dm-connected {
    overflow: hidden;

    padding: 16px;

    border-radius: 17px;
}


.dm-scattered {
    border: 1px solid #e2ddd9;

    background: #f8f6f3;
}


.dm-connected {
    border: 1px solid #222222;

    background: #111111;
}


/* ==========================================================
   LABEL
========================================================== */

.dm-transform-label {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 12px;

    margin-bottom: 12px;
    padding-bottom: 10px;

    border-bottom: 1px solid #ded8d3;
}


.dm-connected .dm-transform-label {
    border-color: rgba(255,255,255,.08);
}


.dm-transform-label > span {
    color: var(--tdc-orange, #f26322);
}


.dm-transform-label strong {
    color: #111111;
}


.dm-connected .dm-transform-label strong {
    color: #ffffff;
}


/* ==========================================================
   SCATTERED BOARD
========================================================== */

.dm-scattered-board {
    position: relative;

    min-height: 360px;

    overflow: hidden;

    border-radius: 12px;

    background:
        linear-gradient(
            rgba(17,17,17,.025) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(17,17,17,.025) 1px,
            transparent 1px
        ),
        #ffffff;

    background-size: 25px 25px;
}


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

.dm-loose-card {
    position: absolute;
    z-index: 4;

    display: grid;

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

    align-items: center;

    gap: 7px;

    min-width: 145px;

    padding: 8px;

    border: 1px solid #e2ddd9;
    border-radius: 9px;

    background: #ffffff;

    box-shadow:
        0 9px 20px rgba(17,17,17,.06);
}


.dm-loose-icon {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 34px;
    height: 34px;

    border-radius: 7px;

    background: #f3efec;

    color: #77706a;
}


.dm-loose-card small,
.dm-loose-card strong {
    display: block;
}


.dm-loose-card small {
    color: #aaa29c;
}


.dm-loose-card strong {
    color: #111111;
}


.dm-broken {
    color: #c9c2bc;
}


/* POSITIONS */

.dm-loose-seo {
    top: 20px;
    left: 18px;

    transform: rotate(-3deg);
}


.dm-loose-social {
    top: 30px;
    right: 17px;

    transform: rotate(3deg);
}


.dm-loose-ads {
    top: 145px;
    right: 8px;

    transform: rotate(-2deg);
}


.dm-loose-web {
    left: 15px;
    bottom: 25px;

    transform: rotate(2deg);
}


.dm-loose-content {
    right: 22px;
    bottom: 22px;

    transform: rotate(-3deg);
}


/* ==========================================================
   SCATTERED CENTER
========================================================== */

.dm-scattered-center {
    position: absolute;
    z-index: 5;

    top: 50%;
    left: 42%;

    width: 135px;

    padding: 12px;

    border: 1px dashed #d3ccc7;
    border-radius: 11px;

    background: #f8f6f3;

    text-align: center;

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


.dm-warning-icon {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 36px;
    height: 36px;

    margin: 0 auto 6px;

    border-radius: 50%;

    background: rgba(242,99,34,.10);

    color: var(--tdc-orange, #f26322);
}


.dm-scattered-center strong,
.dm-scattered-center small {
    display: block;
}


.dm-scattered-center strong {
    color: #111111;
}


.dm-scattered-center small {
    margin-top: 2px;

    color: #918983;
}


/* RANDOM LINES */

.dm-random-line {
    position: absolute;
    z-index: 1;

    display: block;

    height: 1px;

    background:
        repeating-linear-gradient(
            90deg,
            #d9d2cc 0,
            #d9d2cc 5px,
            transparent 5px,
            transparent 10px
        );
}


.dm-random-line.line-a {
    width: 125px;

    top: 105px;
    left: 115px;

    transform: rotate(28deg);
}


.dm-random-line.line-b {
    width: 110px;

    top: 220px;
    right: 95px;

    transform: rotate(-35deg);
}


.dm-random-line.line-c {
    width: 95px;

    left: 110px;
    bottom: 100px;

    transform: rotate(-20deg);
}


/* ==========================================================
   PROBLEMS
========================================================== */

.dm-scattered-problems,
.dm-connected-benefits {
    display: grid;

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

    gap: 5px;

    margin-top: 10px;
}


.dm-scattered-problems span,
.dm-connected-benefits span {
    display: flex;
    align-items: center;
    justify-content: center;

    gap: 5px;

    padding: 8px 6px;

    border-radius: 7px;

    text-align: center;
}


.dm-scattered-problems span {
    background: #ffffff;

    color: #807872;
}


.dm-scattered-problems i {
    color: var(--tdc-orange, #f26322);
}


/* ==========================================================
   CENTER TRANSFORMATION
========================================================== */

.dm-transform-center {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    gap: 10px;
}


.dm-transform-line {
    display: block;

    width: 1px;
    height: 95px;

    background:
        linear-gradient(
            transparent,
            #d7d0ca,
            transparent
        );
}


.dm-transform-button {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    width: 78px;
    height: 78px;

    border-radius: 50%;

    background: var(--tdc-orange, #f26322);

    box-shadow:
        0 10px 30px rgba(242,99,34,.22);

    color: #ffffff;

    text-align: center;
}


.dm-transform-button i {
    margin: 3px 0;
}


/* ==========================================================
   CONNECTED BOARD
========================================================== */

.dm-connected-board {
    position: relative;

    min-height: 360px;

    overflow: hidden;

    border: 1px solid rgba(255,255,255,.06);
    border-radius: 12px;

    background:
        linear-gradient(
            rgba(255,255,255,.025) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(255,255,255,.025) 1px,
            transparent 1px
        ),
        #171717;

    background-size: 25px 25px;
}


/* ==========================================================
   RINGS
========================================================== */

.dm-connected-ring {
    position: absolute;

    top: 50%;
    left: 50%;

    border-radius: 50%;

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


.dm-connected-ring.ring-a {
    width: 205px;
    height: 205px;

    border: 1px dashed rgba(255,255,255,.10);
}


.dm-connected-ring.ring-b {
    width: 315px;
    height: 315px;

    border: 1px solid rgba(242,99,34,.10);
}


/* ==========================================================
   SYSTEM CORE
========================================================== */

.dm-system-core {
    position: absolute;
    z-index: 5;

    top: 50%;
    left: 50%;

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

    width: 125px;
    height: 125px;

    border: 1px solid rgba(242,99,34,.30);
    border-radius: 50%;

    background: #111111;

    box-shadow:
        0 0 0 10px rgba(242,99,34,.035);

    text-align: center;

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


.dm-system-core span {
    color: rgba(255,255,255,.35);
}


.dm-system-core strong {
    color: var(--tdc-orange, #f26322);
}


.dm-system-core small {
    color: rgba(255,255,255,.40);
}


/* ==========================================================
   SYSTEM NODES
========================================================== */

.dm-system-node {
    position: absolute;
    z-index: 6;

    display: flex;
    align-items: center;

    gap: 6px;

    padding: 8px 10px;

    border: 1px solid rgba(255,255,255,.09);
    border-radius: 50px;

    background: #222222;

    color: #ffffff;

    box-shadow:
        0 10px 25px rgba(0,0,0,.20);
}


.dm-system-node i {
    color: var(--tdc-orange, #f26322);
}


/* POSITIONS */

.node-seo {
    top: 24px;
    left: 50%;

    transform: translateX(-50%);
}


.node-social {
    top: 105px;
    right: 15px;
}


.node-ads {
    right: 35px;
    bottom: 35px;
}


.node-web {
    left: 35px;
    bottom: 35px;
}


.node-content {
    top: 105px;
    left: 15px;
}


/* ==========================================================
   SYSTEM LINES
========================================================== */

.dm-system-line {
    position: absolute;
    z-index: 2;

    top: 50%;
    left: 50%;

    width: 115px;
    height: 1px;

    transform-origin: left center;

    background:
        linear-gradient(
            90deg,
            rgba(242,99,34,.55),
            rgba(242,99,34,.05)
        );
}


.system-1 {
    transform: rotate(-90deg);
}


.system-2 {
    transform: rotate(-20deg);
}


.system-3 {
    transform: rotate(52deg);
}


.system-4 {
    transform: rotate(128deg);
}


.system-5 {
    transform: rotate(200deg);
}


/* ==========================================================
   BENEFITS
========================================================== */

.dm-connected-benefits span {
    background: rgba(255,255,255,.05);

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


.dm-connected-benefits i {
    color: var(--tdc-orange, #f26322);
}


/* ==========================================================
   GROWTH PATH
========================================================== */

.dm-growth-path {
    display: grid;

    grid-template-columns:
        minmax(250px, 31%)
        minmax(0, 69%);

    align-items: center;

    gap: 18px;

    margin-top: 12px;
    padding: 14px 17px;

    border: 1px solid #e1dcd7;
    border-radius: 13px;

    background: #f8f6f3;
}


.dm-growth-intro span,
.dm-growth-intro strong {
    display: block;
}


.dm-growth-intro span {
    margin-bottom: 2px;

    color: var(--tdc-orange, #f26322);
}


.dm-growth-intro strong {
    color: #111111;
}


/* STEPS */

.dm-growth-steps {
    display: flex;
    align-items: center;
    justify-content: flex-end;

    gap: 5px;
}


.dm-growth-steps > div {
    padding: 7px 9px;

    border-radius: 8px;

    background: #ffffff;

    text-align: center;
}


.dm-growth-steps span,
.dm-growth-steps strong {
    display: block;
}


.dm-growth-steps span {
    color: var(--tdc-orange, #f26322);
}


.dm-growth-steps strong {
    color: #111111;
}


.dm-growth-steps > i {
    color: #c8c1bb;
}


.dm-growth-steps
.dm-growth-final {
    background: #111111;
}


.dm-growth-steps
.dm-growth-final span,
.dm-growth-steps
.dm-growth-final strong {
    color: #ffffff;
}


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

@media (max-width: 1023px) {

    .dm-online {
        padding: 38px 0;
    }


    .dm-online-header {
        grid-template-columns: 1fr;

        gap: 12px;
    }


    .dm-online-header-copy {
        max-width: 680px;
    }


    .dm-transform {
        grid-template-columns: 1fr;
    }


    .dm-transform-center {
        flex-direction: row;
    }


    .dm-transform-line {
        width: 100%;
        height: 1px;

        background:
            linear-gradient(
                90deg,
                transparent,
                #d7d0ca,
                transparent
            );
    }


    .dm-transform-button {
        flex: 0 0 78px;

        transform: rotate(90deg);
    }


    .dm-transform-button span,
    .dm-transform-button small {
        transform: rotate(-90deg);
    }


    .dm-growth-path {
        grid-template-columns: 1fr;

        gap: 10px;
    }


    .dm-growth-steps {
        justify-content: flex-start;
    }

}


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

@media (max-width: 767px) {

    .dm-online {
        padding: 30px 0;
    }


    .dm-scattered-board,
    .dm-connected-board {
        min-height: 345px;
    }


    .dm-growth-steps {
        display: grid;

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

        gap: 5px;
    }


    .dm-growth-steps > i {
        display: none;
    }

}


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

@media (max-width: 480px) {

    .dm-scattered,
    .dm-connected {
        padding: 12px;
    }


    .dm-transform-label {
        align-items: flex-start;
        flex-direction: column;

        gap: 2px;
    }


    .dm-scattered-board,
    .dm-connected-board {
        min-height: 390px;
    }


    .dm-loose-card {
        min-width: 125px;
    }


    .dm-loose-seo {
        left: 5px;
    }


    .dm-loose-social {
        right: 5px;
    }


    .dm-loose-ads {
        right: 5px;
    }


    .dm-loose-web {
        left: 5px;
    }


    .dm-loose-content {
        right: 5px;
    }


    .dm-scattered-center {
        left: 50%;
    }


    .dm-scattered-problems,
    .dm-connected-benefits {
        grid-template-columns: 1fr;
    }


    .dm-connected-ring.ring-a {
        width: 180px;
        height: 180px;
    }


    .dm-connected-ring.ring-b {
        width: 275px;
        height: 275px;
    }


    .dm-system-core {
        width: 110px;
        height: 110px;
    }


    .node-social {
        right: 5px;
    }


    .node-content {
        left: 5px;
    }


    .node-ads {
        right: 15px;
    }


    .node-web {
        left: 15px;
    }


    .dm-growth-steps {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

}
/* ==========================================================
   DIGITAL MARKETING
   SECTION 03 — SERVICES CONTROL PANEL
========================================================== */

.dm-services {
    position: relative;
    overflow: hidden;

    padding: 50px 0;

    background: #f7f5f2;
}


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

.dm-services-header {
    display: grid;

    grid-template-columns:
        minmax(0, 60%)
        minmax(300px, 40%);

    align-items: end;

    gap: 55px;

    margin-bottom: 28px;
}


.dm-services-header h2 {
    max-width: 850px;

    margin: 0;

    color: #111111;
}


.dm-services-header h2 span {
    display: block;

    color: var(--tdc-orange, #f26322);
}


.dm-services-header-copy {
    max-width: 500px;
}


.dm-services-header-copy p {
    margin: 0;

    color: var(--tdc-text-muted, #66615e);
}


/* ==========================================================
   CONSOLE
========================================================== */

.dm-service-console {
    overflow: hidden;

    border: 1px solid #272727;
    border-radius: 20px;

    background: #111111;

    box-shadow:
        0 24px 60px rgba(17,17,17,.12);
}


/* ==========================================================
   TOP BAR
========================================================== */

.dm-console-top {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 20px;

    padding: 13px 16px;

    border-bottom: 1px solid rgba(255,255,255,.08);

    background: #171717;
}


.dm-console-title {
    display: flex;
    align-items: center;

    gap: 13px;
}


.dm-console-dots {
    display: flex;

    gap: 4px;
}


.dm-console-dots i {
    display: block;

    width: 7px;
    height: 7px;

    border-radius: 50%;

    background: rgba(255,255,255,.20);
}


.dm-console-dots i:first-child {
    background: var(--tdc-orange, #f26322);
}


.dm-console-title div > span,
.dm-console-title strong {
    display: block;
}


.dm-console-title div > span {
    color: var(--tdc-orange, #f26322);
}


.dm-console-title strong {
    color: #ffffff;
}


/* STATUS */

.dm-console-status {
    display: flex;
    align-items: center;

    gap: 8px;

    padding: 6px 9px;

    border-radius: 50px;

    background: rgba(255,255,255,.05);
}


.dm-console-status-dot {
    width: 8px;
    height: 8px;

    border-radius: 50%;

    background: var(--tdc-orange, #f26322);

    box-shadow:
        0 0 0 4px rgba(242,99,34,.10);
}


.dm-console-status small,
.dm-console-status strong {
    display: block;
}


.dm-console-status small {
    color: rgba(255,255,255,.30);
}


.dm-console-status strong {
    color: #ffffff;
}


/* ==========================================================
   MAIN
========================================================== */

.dm-console-main {
    display: grid;

    grid-template-columns:
        250px
        minmax(0, 1fr)
        225px;

    min-height: 570px;
}


/* ==========================================================
   LEFT NAV
========================================================== */

.dm-service-nav {
    padding: 12px;

    border-right: 1px solid rgba(255,255,255,.08);

    background: #151515;
}


.dm-service-nav-title {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 10px;

    margin-bottom: 8px;
    padding: 3px 4px 9px;

    border-bottom: 1px solid rgba(255,255,255,.06);
}


.dm-service-nav-title span {
    color: rgba(255,255,255,.65);
}


.dm-service-nav-title small {
    color: rgba(255,255,255,.28);
}


/* TAB */

.dm-service-tab {
    display: grid;

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

    align-items: center;

    gap: 7px;

    width: 100%;

    margin-bottom: 5px;
    padding: 9px 8px;

    border: 1px solid transparent;
    border-radius: 9px;

    background: transparent;

    text-align: left;

    cursor: pointer;

    transition:
        background .25s ease,
        border-color .25s ease,
        transform .25s ease;
}


.dm-service-tab:hover {
    background: rgba(255,255,255,.045);
}


.dm-service-tab.active {
    border-color: rgba(242,99,34,.20);

    background: rgba(242,99,34,.10);
}


.dm-tab-number {
    color: rgba(255,255,255,.28);
}


.dm-service-tab.active
.dm-tab-number {
    color: var(--tdc-orange, #f26322);
}


.dm-tab-icon {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 35px;
    height: 35px;

    border-radius: 8px;

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

    color: rgba(255,255,255,.60);
}


.dm-service-tab.active
.dm-tab-icon {
    background: var(--tdc-orange, #f26322);

    color: #ffffff;
}


.dm-tab-copy small,
.dm-tab-copy strong {
    display: block;
}


.dm-tab-copy small {
    color: rgba(255,255,255,.28);
}


.dm-tab-copy strong {
    color: rgba(255,255,255,.72);
}


.dm-service-tab.active
.dm-tab-copy strong {
    color: #ffffff;
}


.dm-tab-arrow {
    color: rgba(255,255,255,.18);

    transition: transform .25s ease;
}


.dm-service-tab.active
.dm-tab-arrow {
    color: var(--tdc-orange, #f26322);

    transform: translateX(2px);
}


/* ==========================================================
   CENTER SCREEN
========================================================== */

.dm-service-screen {
    position: relative;

    min-width: 0;

    padding: 20px;

    overflow: hidden;

    background:
        linear-gradient(
            rgba(255,255,255,.022) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(255,255,255,.022) 1px,
            transparent 1px
        ),
        #111111;

    background-size: 28px 28px;
}


/* ==========================================================
   PANELS
========================================================== */

.dm-service-panel {
    display: none;

    height: 100%;
}


.dm-service-panel.active {
    display: flex;
    flex-direction: column;

    animation: dmPanelIn .35s ease;
}


@keyframes dmPanelIn {

    from {
        opacity: 0;
        transform: translateY(7px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }

}


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

.dm-panel-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;

    gap: 20px;
}


.dm-panel-label {
    display: block;

    margin-bottom: 4px;

    color: var(--tdc-orange, #f26322);
}


.dm-panel-heading h3 {
    margin: 0;

    color: #ffffff;
}


.dm-panel-heading h3 span {
    color: var(--tdc-orange, #f26322);
}


.dm-panel-symbol {
    display: flex;
    align-items: center;
    justify-content: center;

    min-width: 55px;
    height: 55px;

    padding: 0 8px;

    border: 1px solid rgba(242,99,34,.22);
    border-radius: 12px;

    background: rgba(242,99,34,.07);

    color: var(--tdc-orange, #f26322);
}


.dm-panel-description {
    max-width: 650px;

    margin: 10px 0 15px;

    color: rgba(255,255,255,.55);
}


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

.dm-seo-visual,
.dm-social-visual,
.dm-paid-visual,
.dm-creative-visual,
.dm-web-visual,
.dm-content-visual {
    flex: 1;

    min-height: 285px;

    padding: 17px;

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

    background: rgba(255,255,255,.035);
}


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

.dm-seo-visual {
    display: flex;
    flex-direction: column;
    justify-content: center;
}


.dm-search-bar {
    display: grid;

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

    align-items: center;

    gap: 8px;

    padding: 10px 12px;

    border-radius: 50px;

    background: #ffffff;

    color: #77706a;
}


.dm-search-bar i {
    color: var(--tdc-orange, #f26322);
}


.dm-search-bar small {
    padding: 5px 8px;

    border-radius: 50px;

    background: #111111;

    color: #ffffff;
}


.dm-serp {
    display: grid;

    grid-template-columns:
        40px
        minmax(0, 1fr)
        35px;

    align-items: center;

    gap: 10px;

    margin-top: 10px;
    padding: 12px;

    border: 1px solid rgba(242,99,34,.18);
    border-radius: 10px;

    background: rgba(242,99,34,.06);
}


.dm-serp-rank {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 40px;
    height: 40px;

    border-radius: 9px;

    background: var(--tdc-orange, #f26322);

    color: #ffffff;
}


.dm-serp-copy small,
.dm-serp-copy strong {
    display: block;
}


.dm-serp-copy small {
    color: var(--tdc-orange, #f26322);
}


.dm-serp-copy strong {
    color: #ffffff;
}


.dm-serp-copy > span {
    display: block;

    width: 80%;
    height: 4px;

    margin-top: 5px;

    border-radius: 10px;

    background: rgba(255,255,255,.10);
}


.dm-serp-copy > span.short {
    width: 55%;
}


.dm-serp > i {
    color: var(--tdc-orange, #f26322);
}


.dm-seo-signals {
    display: grid;

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

    gap: 5px;

    margin-top: 10px;
}


.dm-seo-signals span {
    padding: 7px;

    border-radius: 7px;

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

    text-align: center;

    color: rgba(255,255,255,.55);
}


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

.dm-social-visual {
    display: grid;

    grid-template-columns:
        minmax(150px, 42%)
        minmax(0, 58%);

    align-items: center;

    gap: 15px;
}


.dm-social-phone {
    max-width: 190px;

    margin: auto;
    padding: 8px;

    border: 1px solid rgba(255,255,255,.10);
    border-radius: 16px;

    background: #202020;
}


.dm-social-phone-top {
    display: grid;

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

    align-items: center;

    gap: 5px;

    padding: 5px 2px 8px;

    color: rgba(255,255,255,.55);
}


.dm-social-phone-top > span {
    width: 8px;
    height: 8px;

    border-radius: 50%;

    background: var(--tdc-orange, #f26322);
}


.dm-social-post {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    min-height: 160px;

    overflow: hidden;

    border-radius: 9px;

    background: var(--tdc-orange, #f26322);

    color: #ffffff;
}


.dm-social-post-shape {
    width: 45px;
    height: 45px;

    margin-bottom: 8px;

    border: 8px solid rgba(255,255,255,.20);
    border-radius: 50%;
}


.dm-social-actions {
    display: flex;

    gap: 10px;

    padding: 8px 3px 2px;

    color: #ffffff;
}


.dm-social-metrics {
    display: grid;

    gap: 7px;
}


.dm-social-metrics > div {
    padding: 10px;

    border-radius: 8px;

    background: rgba(255,255,255,.05);
}


.dm-social-metrics span,
.dm-social-metrics strong {
    display: block;
}


.dm-social-metrics span {
    color: var(--tdc-orange, #f26322);
}


.dm-social-metrics strong {
    color: #ffffff;
}


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

.dm-paid-visual {
    display: flex;
    flex-direction: column;
    justify-content: center;
}


.dm-paid-platforms {
    display: grid;

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

    gap: 6px;
}


.dm-paid-platforms span {
    display: flex;
    align-items: center;
    justify-content: center;

    gap: 6px;

    padding: 9px;

    border-radius: 8px;

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

    color: #ffffff;
}


.dm-paid-platforms i {
    color: var(--tdc-orange, #f26322);
}


.dm-paid-chart {
    display: flex;
    align-items: flex-end;

    gap: 6px;

    height: 110px;

    margin: 14px 0;
    padding: 0 10px;

    border-bottom: 1px solid rgba(255,255,255,.08);
}


.dm-paid-chart span {
    display: block;

    flex: 1;

    min-height: 5px;

    border-radius: 4px 4px 0 0;

    background: rgba(255,255,255,.10);
}


.dm-paid-chart span:nth-last-child(-n+3) {
    background: var(--tdc-orange, #f26322);
}


.dm-paid-flow {
    display: flex;
    align-items: center;
    justify-content: center;

    gap: 8px;
}


.dm-paid-flow span {
    padding: 6px 9px;

    border-radius: 50px;

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

    color: rgba(255,255,255,.60);
}


.dm-paid-flow i {
    color: var(--tdc-orange, #f26322);
}


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

.dm-creative-visual {
    display: grid;

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

    align-items: center;

    gap: 12px;
}


.dm-creative-main {
    display: flex;
    flex-direction: column;
    justify-content: center;

    min-height: 220px;

    padding: 25px;

    overflow: hidden;

    border-radius: 12px;

    background: var(--tdc-orange, #f26322);

    color: #ffffff;
}


.dm-creative-main span,
.dm-creative-main strong,
.dm-creative-main small {
    display: block;
}


.dm-creative-main small {
    margin-top: 5px;

    color: rgba(255,255,255,.70);
}


.dm-creative-assets {
    display: grid;

    gap: 7px;
}


.dm-creative-assets span {
    display: flex;
    align-items: center;
    justify-content: center;

    height: 65px;

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

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

    color: var(--tdc-orange, #f26322);
}


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

.dm-web-visual {
    position: relative;

    display: flex;
    align-items: center;
    justify-content: center;
}


.dm-browser {
    width: 82%;

    overflow: hidden;

    border-radius: 10px;

    background: #ffffff;

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


.dm-browser-top {
    display: flex;
    align-items: center;

    gap: 4px;

    padding: 7px;

    background: #e8e3df;
}


.dm-browser-top > span {
    width: 6px;
    height: 6px;

    border-radius: 50%;

    background: #aaa39d;
}


.dm-browser-top > span:first-child {
    background: var(--tdc-orange, #f26322);
}


.dm-browser-top small {
    margin-left: 8px;

    color: #88817b;
}


.dm-browser-content {
    padding: 22px;
}


.dm-web-label {
    display: block;

    width: 40px;
    height: 4px;

    margin-bottom: 7px;

    background: var(--tdc-orange, #f26322);
}


.dm-browser-content > strong {
    display: block;

    width: 72%;
    height: 9px;

    margin-bottom: 5px;

    border-radius: 4px;

    background: #111111;
}


.dm-browser-content > strong.short {
    width: 50%;
}


.dm-browser-content > div {
    display: flex;

    gap: 6px;

    margin-top: 13px;
}


.dm-browser-content > div span {
    width: 65px;
    height: 20px;

    border-radius: 50px;

    background: var(--tdc-orange, #f26322);
}


.dm-browser-content > div span:last-child {
    border: 1px solid #ddd7d2;

    background: #ffffff;
}


.dm-web-device {
    position: absolute;

    right: 8%;
    bottom: 20px;

    width: 70px;
    height: 125px;

    padding: 6px;

    border: 3px solid #242424;
    border-radius: 13px;

    background: #ffffff;

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


.dm-web-device div {
    height: 100%;

    padding: 10px 5px;

    background: #f4f0ed;
}


.dm-web-device span,
.dm-web-device strong {
    display: block;

    border-radius: 4px;
}


.dm-web-device span {
    width: 20px;
    height: 4px;

    margin-bottom: 7px;

    background: var(--tdc-orange, #f26322);
}


.dm-web-device strong {
    height: 5px;

    margin-bottom: 4px;

    background: #111111;
}


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

.dm-content-visual {
    display: grid;

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

    align-items: center;

    gap: 14px;
}


.dm-content-document {
    min-height: 220px;

    padding: 24px;

    border-radius: 11px;

    background: #ffffff;
}


.dm-content-label {
    display: inline-block;

    margin-bottom: 12px;
    padding: 5px 8px;

    border-radius: 50px;

    background: rgba(242,99,34,.10);

    color: var(--tdc-orange, #f26322);
}


.dm-content-document > strong {
    display: block;

    width: 75%;
    height: 9px;

    margin-bottom: 6px;

    border-radius: 4px;

    background: #111111;
}


.dm-content-document > strong.medium {
    width: 55%;

    margin-bottom: 18px;
}


.dm-content-line {
    display: block;

    width: 90%;
    height: 5px;

    margin-bottom: 6px;

    border-radius: 4px;

    background: #ded8d3;
}


.dm-content-line.short {
    width: 60%;
}


.dm-content-distribution {
    display: grid;

    gap: 7px;
}


.dm-content-distribution span {
    display: flex;
    align-items: center;

    gap: 7px;

    padding: 10px;

    border-radius: 8px;

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

    color: #ffffff;
}


.dm-content-distribution i {
    color: var(--tdc-orange, #f26322);
}


/* ==========================================================
   PANEL BOTTOM
========================================================== */

.dm-panel-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 15px;

    margin-top: 13px;
    padding-top: 12px;

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


.dm-panel-bottom div > span,
.dm-panel-bottom div > strong {
    display: block;
}


.dm-panel-bottom div > span {
    color: var(--tdc-orange, #f26322);
}


.dm-panel-bottom div > strong {
    color: rgba(255,255,255,.62);
}


.dm-panel-bottom > a {
    display: inline-flex;
    align-items: center;

    gap: 7px;

    padding: 8px 11px;

    border-radius: 50px;

    background: var(--tdc-orange, #f26322);

    text-decoration: none;
    white-space: nowrap;

    color: #ffffff;

    transition:
        gap .25s ease,
        background .25s ease,
        color .25s ease;
}


.dm-panel-bottom > a:hover {
    gap: 10px;

    background: #ffffff;

    color: #111111;
}


/* ==========================================================
   RIGHT OUTCOME
========================================================== */

.dm-service-outcome {
    padding: 14px;

    border-left: 1px solid rgba(255,255,255,.08);

    background: #151515;
}


.dm-outcome-heading > span {
    display: block;

    margin-bottom: 3px;

    color: var(--tdc-orange, #f26322);
}


.dm-outcome-heading strong {
    display: block;

    color: #ffffff;
}


/* ==========================================================
   OUTCOME SYSTEM
========================================================== */

.dm-outcome-system {
    position: relative;

    height: 210px;

    margin: 15px 0;
}


.dm-outcome-ring {
    position: absolute;

    top: 50%;
    left: 50%;

    width: 165px;
    height: 165px;

    border: 1px dashed rgba(255,255,255,.10);
    border-radius: 50%;

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


.dm-outcome-core {
    position: absolute;

    z-index: 3;

    top: 50%;
    left: 50%;

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

    width: 90px;
    height: 90px;

    border-radius: 50%;

    background: var(--tdc-orange, #f26322);

    text-align: center;

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


.dm-outcome-core span,
.dm-outcome-core strong {
    color: #ffffff;
}


.dm-outcome-node {
    position: absolute;
    z-index: 4;

    padding: 5px 7px;

    border: 1px solid rgba(255,255,255,.08);
    border-radius: 50px;

    background: #222222;

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


.outcome-seo {
    top: 7px;
    left: 50%;

    transform: translateX(-50%);
}


.outcome-social {
    top: 50%;
    right: 0;

    transform: translateY(-50%);
}


.outcome-ads {
    bottom: 7px;
    left: 50%;

    transform: translateX(-50%);
}


.outcome-content {
    top: 50%;
    left: 0;

    transform: translateY(-50%);
}


/* ==========================================================
   JOURNEY
========================================================== */

.dm-outcome-journey {
    margin-top: 8px;
}


.dm-outcome-journey > div {
    display: grid;

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

    align-items: center;

    gap: 8px;
}


.dm-outcome-journey > div > span {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 30px;
    height: 30px;

    border-radius: 7px;

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

    color: rgba(255,255,255,.45);
}


.dm-outcome-journey small,
.dm-outcome-journey strong {
    display: block;
}


.dm-outcome-journey small {
    color: rgba(255,255,255,.28);
}


.dm-outcome-journey strong {
    color: #ffffff;
}


.dm-outcome-line {
    display: block;

    width: 1px;
    height: 12px;

    margin: 3px 0 3px 15px;

    background: rgba(255,255,255,.10);
}


.dm-outcome-journey > div.active > span {
    background: var(--tdc-orange, #f26322);

    color: #ffffff;
}


/* NOTE */

.dm-outcome-note {
    display: grid;

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

    gap: 8px;

    margin-top: 15px;
    padding: 10px;

    border: 1px solid rgba(242,99,34,.14);
    border-radius: 9px;

    background: rgba(242,99,34,.06);
}


.dm-outcome-note i {
    color: var(--tdc-orange, #f26322);
}


.dm-outcome-note p {
    margin: 0;

    color: rgba(255,255,255,.52);
}


/* ==========================================================
   BOTTOM
========================================================== */

.dm-services-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 20px;

    margin-top: 12px;
    padding: 14px 17px;

    border: 1px solid #ded8d3;
    border-radius: 13px;

    background: #ffffff;
}


.dm-services-bottom div > span,
.dm-services-bottom div > strong {
    display: block;
}


.dm-services-bottom div > span {
    color: var(--tdc-orange, #f26322);
}


.dm-services-bottom div > strong {
    color: #111111;
}


.dm-services-bottom > a {
    display: inline-flex;
    align-items: center;

    gap: 8px;

    padding: 9px 13px;

    border-radius: 50px;

    background: #111111;

    text-decoration: none;
    white-space: nowrap;

    color: #ffffff;
}


.dm-services-bottom > a:hover {
    background: var(--tdc-orange, #f26322);
}


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

@media (max-width: 1023px) {

    .dm-services {
        padding: 38px 0;
    }


    .dm-services-header {
        grid-template-columns: 1fr;

        gap: 12px;
    }


    .dm-services-header-copy {
        max-width: 680px;
    }


    .dm-console-main {
        grid-template-columns:
            220px
            minmax(0, 1fr);
    }


    .dm-service-outcome {
        grid-column: 1 / -1;

        border-top: 1px solid rgba(255,255,255,.08);
        border-left: 0;
    }


    .dm-outcome-system {
        max-width: 300px;

        margin-left: auto;
        margin-right: auto;
    }

}


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

@media (max-width: 767px) {

    .dm-services {
        padding: 30px 0;
    }


    .dm-console-main {
        grid-template-columns: 1fr;
    }


    .dm-service-nav {
        display: grid;

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

        gap: 5px;

        border-right: 0;
        border-bottom: 1px solid rgba(255,255,255,.08);
    }


    .dm-service-nav-title {
        grid-column: 1 / -1;
    }


    .dm-service-tab {
        grid-template-columns: 1fr;

        justify-items: center;

        margin: 0;

        text-align: center;
    }


    .dm-tab-number,
    .dm-tab-arrow {
        display: none;
    }


    .dm-service-screen {
        padding: 15px;
    }


    .dm-social-visual,
    .dm-content-visual {
        grid-template-columns: 1fr;
    }


    .dm-social-metrics {
        grid-template-columns:
            repeat(3, minmax(0, 1fr));
    }


    .dm-content-distribution {
        grid-template-columns:
            repeat(3, minmax(0, 1fr));
    }


    .dm-services-bottom {
        align-items: flex-start;
        flex-direction: column;
    }

}


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

@media (max-width: 480px) {

    .dm-console-top {
        align-items: flex-start;
        flex-direction: column;
    }


    .dm-service-nav {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }


    .dm-panel-heading {
        gap: 10px;
    }


    .dm-panel-symbol {
        min-width: 45px;
        height: 45px;
    }


    .dm-seo-signals,
    .dm-paid-platforms {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }


    .dm-social-metrics,
    .dm-content-distribution {
        grid-template-columns: 1fr;
    }


    .dm-creative-visual {
        grid-template-columns: 1fr;
    }


    .dm-creative-assets {
        grid-template-columns:
            repeat(3, minmax(0, 1fr));
    }


    .dm-creative-assets span {
        height: 48px;
    }


    .dm-browser {
        width: 95%;
    }


    .dm-web-device {
        right: 2%;
    }


    .dm-panel-bottom {
        align-items: flex-start;
        flex-direction: column;
    }


    .dm-panel-bottom > a {
        width: 100%;

        justify-content: center;
    }


    .dm-services-bottom > a {
        width: 100%;

        justify-content: center;
    }

}


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

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

    .dm-service-panel {
        animation: none !important;
    }


    .dm-service-tab,
    .dm-panel-bottom > a {
        transition: none !important;
    }

}
/* ==========================================================
   DIGITAL MARKETING
   SECTION 04 — INTEGRATED MARKETING APPROACH
========================================================== */

.dm-integrated {
    position: relative;
    overflow: hidden;

    padding: 50px 0;

    background: #ffffff;
}


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

.dm-integrated-header {
    display: grid;

    grid-template-columns:
        minmax(0, 60%)
        minmax(300px, 40%);

    align-items: end;

    gap: 55px;

    margin-bottom: 28px;
}


.dm-integrated-header h2 {
    max-width: 850px;

    margin: 0;

    color: #111111;
}


.dm-integrated-header h2 span {
    display: block;

    color: var(--tdc-orange, #f26322);
}


.dm-integrated-intro {
    max-width: 500px;
}


.dm-integrated-intro p {
    margin: 0;

    color: var(--tdc-text-muted, #66615e);
}


/* ==========================================================
   MAIN ENGINE
========================================================== */

.dm-engine {
    position: relative;

    overflow: hidden;

    padding: 16px;

    border-radius: 20px;

    background: #111111;

    box-shadow:
        0 25px 65px rgba(17,17,17,.13);
}


.dm-engine-grid {
    position: absolute;
    inset: 0;

    opacity: .07;

    background-image:
        linear-gradient(
            rgba(255,255,255,.45) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(255,255,255,.45) 1px,
            transparent 1px
        );

    background-size: 30px 30px;

    pointer-events: none;
}


/* ==========================================================
   GLOW
========================================================== */

.dm-engine-glow {
    position: absolute;

    display: block;

    border-radius: 50%;

    pointer-events: none;
}


.dm-engine-glow.glow-one {
    width: 400px;
    height: 400px;

    top: -250px;
    left: 35%;

    background:
        radial-gradient(
            circle,
            rgba(242,99,34,.12),
            transparent 70%
        );
}


.dm-engine-glow.glow-two {
    width: 300px;
    height: 300px;

    right: -180px;
    bottom: -180px;

    background:
        radial-gradient(
            circle,
            rgba(242,99,34,.08),
            transparent 70%
        );
}


/* ==========================================================
   TOP BAR
========================================================== */

.dm-engine-top {
    position: relative;
    z-index: 5;

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

    gap: 20px;

    padding: 0 0 13px;

    border-bottom: 1px solid rgba(255,255,255,.08);
}


.dm-engine-title {
    display: flex;
    align-items: center;

    gap: 10px;
}


.dm-engine-mark {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 38px;
    height: 38px;

    border-radius: 9px;

    background: var(--tdc-orange, #f26322);

    color: #ffffff;
}


.dm-engine-title div > span,
.dm-engine-title strong {
    display: block;
}


.dm-engine-title div > span {
    color: var(--tdc-orange, #f26322);
}


.dm-engine-title strong {
    color: #ffffff;
}


/* STATUS */

.dm-engine-status {
    display: flex;
    align-items: center;

    gap: 8px;

    padding: 6px 9px;

    border-radius: 50px;

    background: rgba(255,255,255,.05);
}


.dm-engine-pulse {
    display: block;

    width: 8px;
    height: 8px;

    border-radius: 50%;

    background: var(--tdc-orange, #f26322);

    box-shadow:
        0 0 0 4px rgba(242,99,34,.10);

    animation: dmEnginePulse 2s infinite;
}


@keyframes dmEnginePulse {

    50% {
        box-shadow:
            0 0 0 8px rgba(242,99,34,.02);
    }

}


.dm-engine-status small,
.dm-engine-status strong {
    display: block;
}


.dm-engine-status small {
    color: rgba(255,255,255,.30);
}


.dm-engine-status strong {
    color: #ffffff;
}


/* ==========================================================
   BODY
========================================================== */

.dm-engine-body {
    position: relative;
    z-index: 3;

    display: grid;

    grid-template-columns:
        minmax(205px, 23%)
        minmax(430px, 54%)
        minmax(205px, 23%);

    min-height: 480px;

    margin-top: 12px;
}


/* ==========================================================
   LEFT + RIGHT
========================================================== */

.dm-engine-input,
.dm-engine-output {
    padding: 14px;

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

    background: rgba(255,255,255,.035);
}


.dm-engine-side-title {
    padding-bottom: 10px;

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


.dm-engine-side-title span,
.dm-engine-side-title strong {
    display: block;
}


.dm-engine-side-title span {
    color: var(--tdc-orange, #f26322);
}


.dm-engine-side-title strong {
    color: #ffffff;
}


/* ==========================================================
   SIGNALS
========================================================== */

.dm-signal-list {
    display: grid;

    gap: 6px;

    margin-top: 12px;
}


.dm-signal {
    display: grid;

    grid-template-columns:
        35px
        minmax(0, 1fr)
        30px;

    align-items: center;

    gap: 7px;

    padding: 9px;

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

    background: rgba(255,255,255,.035);
}


.dm-signal-icon {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 35px;
    height: 35px;

    border-radius: 8px;

    background: rgba(242,99,34,.10);

    color: var(--tdc-orange, #f26322);
}


.dm-signal div small,
.dm-signal div strong {
    display: block;
}


.dm-signal div small {
    color: rgba(255,255,255,.28);
}


.dm-signal div strong {
    color: #ffffff;
}


/* WAVE */

.dm-signal-wave {
    display: flex;
    align-items: center;

    gap: 2px;

    height: 22px;
}


.dm-signal-wave i {
    display: block;

    width: 3px;

    border-radius: 5px;

    background: var(--tdc-orange, #f26322);
}


.dm-signal-wave i:nth-child(1) {
    height: 8px;
}


.dm-signal-wave i:nth-child(2) {
    height: 18px;
}


.dm-signal-wave i:nth-child(3) {
    height: 12px;
}


/* INPUT FOOTER */

.dm-input-footer {
    display: flex;
    align-items: center;

    gap: 7px;

    margin-top: 13px;
    padding-top: 10px;

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

    color: rgba(255,255,255,.40);
}


.dm-input-footer i {
    color: var(--tdc-orange, #f26322);
}


/* ==========================================================
   CENTER ENGINE
========================================================== */

.dm-engine-center {
    position: relative;

    min-height: 480px;
}


/* ORBITS */

.dm-orbit {
    position: absolute;

    top: 50%;
    left: 50%;

    display: block;

    border-radius: 50%;

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


.dm-orbit-one {
    width: 190px;
    height: 190px;

    border: 1px solid rgba(242,99,34,.20);
}


.dm-orbit-two {
    width: 315px;
    height: 315px;

    border: 1px dashed rgba(255,255,255,.11);
}


.dm-orbit-three {
    width: 410px;
    height: 410px;

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


/* ==========================================================
   CORE
========================================================== */

.dm-strategy-core {
    position: absolute;
    z-index: 10;

    top: 50%;
    left: 50%;

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

    width: 165px;
    height: 165px;

    padding: 15px;

    border: 1px solid rgba(242,99,34,.32);
    border-radius: 50%;

    background: #181818;

    box-shadow:
        0 0 0 12px rgba(242,99,34,.035),
        0 20px 45px rgba(0,0,0,.25);

    text-align: center;

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


.dm-core-top {
    color: rgba(255,255,255,.32);
}


.dm-core-icon {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 34px;
    height: 34px;

    margin: 7px 0;

    border-radius: 50%;

    background: var(--tdc-orange, #f26322);

    color: #ffffff;
}


.dm-strategy-core strong {
    color: #ffffff;
}


.dm-strategy-core strong em {
    display: block;

    color: var(--tdc-orange, #f26322);
}


.dm-strategy-core small {
    margin-top: 4px;

    color: rgba(255,255,255,.32);
}


/* ==========================================================
   ENGINE CHANNELS
========================================================== */

.dm-engine-channel {
    position: absolute;
    z-index: 8;

    display: flex;
    align-items: center;

    gap: 7px;

    min-width: 115px;

    padding: 7px 9px;

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

    background: #202020;

    box-shadow:
        0 10px 25px rgba(0,0,0,.18);
}


.dm-engine-channel > span {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 31px;
    height: 31px;

    border-radius: 7px;

    background: rgba(242,99,34,.10);

    color: var(--tdc-orange, #f26322);
}


.dm-engine-channel small,
.dm-engine-channel strong {
    display: block;
}


.dm-engine-channel small {
    color: rgba(255,255,255,.28);
}


.dm-engine-channel strong {
    color: #ffffff;
}


/* POSITIONS */

.engine-seo {
    top: 22px;
    left: 50%;

    transform: translateX(-50%);
}


.engine-paid {
    top: 115px;
    right: 7px;
}


.engine-social {
    right: 20px;
    bottom: 70px;
}


.engine-content {
    bottom: 22px;
    left: 50%;

    transform: translateX(-50%);
}


.engine-creative {
    left: 20px;
    bottom: 70px;
}


.engine-web {
    top: 115px;
    left: 7px;
}


/* ==========================================================
   ENGINE CONNECTIONS
========================================================== */

.dm-engine-line {
    position: absolute;
    z-index: 2;

    top: 50%;
    left: 50%;

    width: 145px;
    height: 1px;

    transform-origin: left center;

    background:
        linear-gradient(
            90deg,
            rgba(242,99,34,.55),
            rgba(242,99,34,.03)
        );
}


.engine-line-1 {
    transform: rotate(-90deg);
}


.engine-line-2 {
    transform: rotate(-30deg);
}


.engine-line-3 {
    transform: rotate(30deg);
}


.engine-line-4 {
    transform: rotate(90deg);
}


.engine-line-5 {
    transform: rotate(150deg);
}


.engine-line-6 {
    transform: rotate(210deg);
}


/* ==========================================================
   OUTPUT
========================================================== */

.dm-output-dashboard {
    display: grid;

    gap: 7px;

    margin-top: 12px;
}


.dm-output-row {
    padding: 9px;

    border-radius: 9px;

    background: rgba(255,255,255,.035);
}


.dm-output-info {
    display: flex;
    align-items: center;

    gap: 7px;
}


.dm-output-info > span {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 31px;
    height: 31px;

    border-radius: 7px;

    background: rgba(242,99,34,.10);

    color: var(--tdc-orange, #f26322);
}


.dm-output-info small,
.dm-output-info strong {
    display: block;
}


.dm-output-info small {
    color: rgba(255,255,255,.28);
}


.dm-output-info strong {
    color: #ffffff;
}


/* METER */

.dm-output-meter {
    height: 4px;

    overflow: hidden;

    margin-top: 8px;

    border-radius: 50px;

    background: rgba(255,255,255,.07);
}


.dm-output-meter span {
    display: block;

    height: 100%;

    border-radius: inherit;

    background: var(--tdc-orange, #f26322);
}


/* GROWTH */

.dm-output-growth {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 10px;

    margin-top: 12px;
    padding: 12px;

    border: 1px solid rgba(242,99,34,.18);
    border-radius: 10px;

    background: rgba(242,99,34,.08);
}


.dm-output-growth div > span,
.dm-output-growth div > strong {
    display: block;
}


.dm-output-growth div > span {
    color: var(--tdc-orange, #f26322);
}


.dm-output-growth div > strong {
    color: #ffffff;
}


.dm-growth-icon {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 40px;
    height: 40px;

    border-radius: 9px;

    background: var(--tdc-orange, #f26322);

    color: #ffffff;
}


/* ==========================================================
   INTELLIGENCE LOOP
========================================================== */

.dm-intelligence-loop {
    position: relative;
    z-index: 5;

    display: grid;

    grid-template-columns:
        minmax(250px, 30%)
        minmax(0, 70%);

    align-items: center;

    gap: 15px;

    margin-top: 12px;
    padding: 12px;

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

    background: rgba(255,255,255,.035);
}


.dm-loop-label {
    display: flex;
    align-items: center;

    gap: 9px;
}


.dm-loop-icon {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 38px;
    height: 38px;

    flex: 0 0 38px;

    border-radius: 8px;

    background: rgba(242,99,34,.10);

    color: var(--tdc-orange, #f26322);
}


.dm-loop-label div > span,
.dm-loop-label div > strong {
    display: block;
}


.dm-loop-label div > span {
    color: var(--tdc-orange, #f26322);
}


.dm-loop-label div > strong {
    color: #ffffff;
}


/* LOOP FLOW */

.dm-loop-flow {
    display: flex;
    align-items: center;
    justify-content: flex-end;

    gap: 6px;
}


.dm-loop-flow > div {
    padding: 6px 9px;

    border-radius: 7px;

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

    text-align: center;
}


.dm-loop-flow span,
.dm-loop-flow strong {
    display: block;
}


.dm-loop-flow span {
    color: rgba(255,255,255,.30);
}


.dm-loop-flow strong {
    color: rgba(255,255,255,.70);
}


.dm-loop-flow > i {
    color: rgba(255,255,255,.18);
}


.dm-loop-flow > div.active {
    background: var(--tdc-orange, #f26322);
}


.dm-loop-flow > div.active span,
.dm-loop-flow > div.active strong {
    color: #ffffff;
}


.dm-loop-return {
    color: var(--tdc-orange, #f26322) !important;
}


/* ==========================================================
   BOTTOM PRINCIPLE
========================================================== */

.dm-integrated-bottom {
    display: grid;

    grid-template-columns:
        minmax(250px, 33%)
        minmax(0, 67%);

    align-items: center;

    gap: 20px;

    margin-top: 12px;
    padding: 13px 16px;

    border: 1px solid #e1dcd7;
    border-radius: 13px;

    background: #f8f6f3;
}


.dm-integrated-principle {
    display: flex;
    align-items: center;

    gap: 9px;
}


.dm-principle-number {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 40px;
    height: 40px;

    flex: 0 0 40px;

    border-radius: 9px;

    background: #111111;

    color: #ffffff;
}


.dm-integrated-principle div > span,
.dm-integrated-principle div > strong {
    display: block;
}


.dm-integrated-principle div > span {
    color: var(--tdc-orange, #f26322);
}


.dm-integrated-principle div > strong {
    color: #111111;
}


/* STATEMENT */

.dm-integrated-statement {
    display: flex;
    align-items: center;
    justify-content: flex-end;

    gap: 6px;
}


.dm-integrated-statement > span {
    display: inline-flex;
    align-items: center;

    gap: 5px;

    padding: 7px 9px;

    border-radius: 50px;

    background: #ffffff;

    color: #625c57;
}


.dm-integrated-statement > span i {
    color: var(--tdc-orange, #f26322);
}


.dm-integrated-statement > i {
    color: #bdb6b0;
}


.dm-integrated-statement
.dm-integrated-result {
    background: var(--tdc-orange, #f26322);

    color: #ffffff;
}


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

@media (max-width: 1023px) {

    .dm-integrated {
        padding: 38px 0;
    }


    .dm-integrated-header {
        grid-template-columns: 1fr;

        gap: 12px;
    }


    .dm-integrated-intro {
        max-width: 680px;
    }


    .dm-engine-body {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }


    .dm-engine-center {
        grid-column: 1 / -1;
        grid-row: 1;

        min-height: 470px;
    }


    .dm-engine-input {
        grid-column: 1;
        grid-row: 2;
    }


    .dm-engine-output {
        grid-column: 2;
        grid-row: 2;
    }


    .dm-intelligence-loop {
        grid-template-columns: 1fr;

        gap: 10px;
    }


    .dm-loop-flow {
        justify-content: flex-start;
    }


    .dm-integrated-bottom {
        grid-template-columns: 1fr;

        gap: 10px;
    }


    .dm-integrated-statement {
        justify-content: flex-start;
    }

}


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

@media (max-width: 767px) {

    .dm-integrated {
        padding: 30px 0;
    }


    .dm-engine-body {
        grid-template-columns: 1fr;
    }


    .dm-engine-center,
    .dm-engine-input,
    .dm-engine-output {
        grid-column: 1;
    }


    .dm-engine-center {
        grid-row: 1;
    }


    .dm-engine-input {
        grid-row: 2;
    }


    .dm-engine-output {
        grid-row: 3;
    }


    .dm-loop-flow {
        display: grid;

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

        gap: 5px;
    }


    .dm-loop-flow > i {
        display: none;
    }


    .dm-integrated-statement {
        display: grid;

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


    .dm-integrated-statement > i {
        display: none;
    }

}


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

@media (max-width: 480px) {

    .dm-engine {
        padding: 12px;
    }


    .dm-engine-top {
        align-items: flex-start;
        flex-direction: column;
    }


    .dm-engine-center {
        min-height: 420px;
    }


    .dm-orbit-one {
        width: 155px;
        height: 155px;
    }


    .dm-orbit-two {
        width: 245px;
        height: 245px;
    }


    .dm-orbit-three {
        width: 335px;
        height: 335px;
    }


    .dm-strategy-core {
        width: 135px;
        height: 135px;
    }


    .dm-engine-channel {
        min-width: 92px;

        padding: 6px;
    }


    .dm-engine-channel > span {
        width: 27px;
        height: 27px;
    }


    .engine-paid {
        right: -3px;
    }


    .engine-web {
        left: -3px;
    }


    .engine-social {
        right: 0;
    }


    .engine-creative {
        left: 0;
    }


    .dm-loop-flow {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }


    .dm-integrated-statement {
        grid-template-columns: 1fr;
    }

}


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

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

    .dm-engine-pulse {
        animation: none;
    }

}
/* ==========================================================
   DIGITAL MARKETING
   SECTION 05 — STRATEGY PROCESS
   Typography remains controlled by Global CSS
========================================================== */

.dm-process {
    position: relative;
    overflow: hidden;

    padding: 50px 0;

    background: #f7f5f2;
}


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

.dm-process-header {
    display: grid;

    grid-template-columns:
        minmax(0, 60%)
        minmax(300px, 40%);

    align-items: end;

    gap: 55px;

    margin-bottom: 28px;
}


.dm-process-header h2 {
    max-width: 850px;

    margin: 0;

    color: #111111;
}


.dm-process-header h2 span {
    display: block;

    color: var(--tdc-orange, #f26322);
}


.dm-process-intro {
    max-width: 500px;
}


.dm-process-intro p {
    margin: 0;

    color: var(--tdc-text-muted, #66615e);
}


/* ==========================================================
   ROADMAP WRAPPER
========================================================== */

.dm-roadmap {
    overflow: hidden;

    border: 1px solid #222222;
    border-radius: 20px;

    background: #111111;

    box-shadow:
        0 25px 60px rgba(17,17,17,.12);
}


/* ==========================================================
   TOP BAR
========================================================== */

.dm-roadmap-top {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 20px;

    padding: 13px 16px;

    border-bottom: 1px solid rgba(255,255,255,.08);

    background: #171717;
}


.dm-roadmap-title {
    display: flex;
    align-items: center;

    gap: 10px;
}


.dm-roadmap-icon {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 38px;
    height: 38px;

    flex: 0 0 38px;

    border-radius: 9px;

    background: var(--tdc-orange, #f26322);

    color: #ffffff;
}


.dm-roadmap-title div > span,
.dm-roadmap-title strong {
    display: block;
}


.dm-roadmap-title div > span {
    color: var(--tdc-orange, #f26322);
}


.dm-roadmap-title strong {
    color: #ffffff;
}


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

.dm-roadmap-progress {
    display: grid;

    grid-template-columns:
        auto
        100px
        auto;

    align-items: center;

    gap: 7px;
}


.dm-roadmap-progress small {
    color: rgba(255,255,255,.30);
}


.dm-roadmap-progress > span {
    display: block;

    height: 4px;

    overflow: hidden;

    border-radius: 50px;

    background: rgba(255,255,255,.08);
}


.dm-roadmap-progress > span i {
    display: block;

    height: 100%;

    border-radius: inherit;

    background: var(--tdc-orange, #f26322);
}


.dm-roadmap-progress strong {
    color: #ffffff;
}


/* ==========================================================
   TRACK
========================================================== */

.dm-roadmap-track {
    position: relative;

    display: grid;

    grid-template-columns:
        repeat(7, minmax(165px, 1fr));

    min-width: 1180px;
    min-height: 570px;

    padding: 28px 20px;

    background:
        linear-gradient(
            rgba(255,255,255,.022) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(255,255,255,.022) 1px,
            transparent 1px
        ),
        #111111;

    background-size: 28px 28px;
}


.dm-roadmap-line {
    position: absolute;
    z-index: 1;

    top: 50%;
    left: 5%;
    right: 5%;

    height: 2px;

    background:
        linear-gradient(
            90deg,
            rgba(242,99,34,.15),
            var(--tdc-orange, #f26322),
            rgba(242,99,34,.15)
        );

    transform: translateY(-50%);
}


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

.dm-roadmap-step {
    position: relative;
    z-index: 3;

    display: flex;
    align-items: center;

    padding: 0 5px;
}


.dm-roadmap-step.step-top {
    flex-direction: column;
    justify-content: flex-start;
}


.dm-roadmap-step.step-bottom {
    flex-direction: column;
    justify-content: flex-end;
}


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

.dm-step-card {
    width: 100%;
    min-height: 220px;

    padding: 12px;

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

    background: #1a1a1a;

    box-shadow:
        0 12px 25px rgba(0,0,0,.15);

    transition:
        transform .25s ease,
        border-color .25s ease,
        background .25s ease;
}


.dm-step-card:hover {
    border-color: rgba(242,99,34,.25);

    background: #1e1e1e;

    transform: translateY(-3px);
}


.step-bottom .dm-step-card:hover {
    transform: translateY(3px);
}


/* FEATURED */

.dm-step-card.dm-step-featured {
    border-color: rgba(242,99,34,.30);

    background:
        linear-gradient(
            145deg,
            rgba(242,99,34,.12),
            #1a1a1a 60%
        );
}


.dm-step-card.dm-step-scale {
    background: var(--tdc-orange, #f26322);

    border-color: var(--tdc-orange, #f26322);
}


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

.dm-step-head {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 8px;

    margin-bottom: 12px;
}


.dm-step-number {
    color: rgba(255,255,255,.25);
}


.dm-step-icon {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 35px;
    height: 35px;

    border-radius: 8px;

    background: rgba(242,99,34,.10);

    color: var(--tdc-orange, #f26322);
}


.dm-step-scale .dm-step-icon {
    background: rgba(255,255,255,.15);

    color: #ffffff;
}


/* ==========================================================
   STEP CONTENT
========================================================== */

.dm-step-label {
    display: block;

    margin-bottom: 2px;

    color: var(--tdc-orange, #f26322);
}


.dm-step-card h3 {
    margin: 0 0 7px;

    color: #ffffff;
}


.dm-step-card p {
    margin: 0;

    color: rgba(255,255,255,.48);
}


.dm-step-scale
.dm-step-number,
.dm-step-scale
.dm-step-label,
.dm-step-scale h3,
.dm-step-scale p {
    color: #ffffff;
}


/* ==========================================================
   TAGS
========================================================== */

.dm-step-tags {
    display: flex;
    flex-wrap: wrap;

    gap: 4px;

    margin-top: 12px;
}


.dm-step-tags span {
    padding: 4px 6px;

    border-radius: 50px;

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

    color: rgba(255,255,255,.45);
}


.dm-step-scale .dm-step-tags span {
    background: rgba(255,255,255,.15);

    color: #ffffff;
}


/* ==========================================================
   TRACK POINT
========================================================== */

.dm-track-point {
    position: absolute;
    z-index: 6;

    top: 50%;
    left: 50%;

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

    width: 22px;
    height: 22px;

    border: 1px solid rgba(242,99,34,.45);
    border-radius: 50%;

    background: #111111;

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


.dm-track-point i {
    display: block;

    width: 7px;
    height: 7px;

    border-radius: 50%;

    background: var(--tdc-orange, #f26322);
}


.dm-track-point.active {
    box-shadow:
        0 0 0 6px rgba(242,99,34,.08);
}


/* ==========================================================
   CONNECT CARD TO TRACK
========================================================== */

.step-top .dm-step-card::after,
.step-bottom .dm-step-card::before {
    content: "";

    position: absolute;

    left: 50%;

    width: 1px;
    height: 32px;

    background:
        linear-gradient(
            var(--tdc-orange, #f26322),
            rgba(242,99,34,.12)
        );
}


.step-top .dm-step-card::after {
    bottom: -32px;
}


.step-bottom .dm-step-card::before {
    top: -32px;
}


/* ==========================================================
   CONTINUOUS LOOP
========================================================== */

.dm-roadmap-loop {
    display: grid;

    grid-template-columns:
        minmax(260px, 34%)
        minmax(0, 66%);

    align-items: center;

    gap: 15px;

    padding: 13px 16px;

    border-top: 1px solid rgba(255,255,255,.08);

    background: #171717;
}


.dm-loop-left {
    display: flex;
    align-items: center;

    gap: 9px;
}


.dm-loop-symbol {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 38px;
    height: 38px;

    flex: 0 0 38px;

    border-radius: 50%;

    background: rgba(242,99,34,.10);

    color: var(--tdc-orange, #f26322);
}


.dm-loop-left div > span,
.dm-loop-left div > strong {
    display: block;
}


.dm-loop-left div > span {
    color: var(--tdc-orange, #f26322);
}


.dm-loop-left div > strong {
    color: #ffffff;
}


/* ==========================================================
   LOOP PATH
========================================================== */

.dm-loop-path {
    display: flex;
    align-items: center;
    justify-content: flex-end;

    gap: 6px;
}


.dm-loop-path > span {
    padding: 6px 9px;

    border-radius: 7px;

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

    text-align: center;
}


.dm-loop-path small,
.dm-loop-path strong {
    display: block;
}


.dm-loop-path small {
    color: rgba(255,255,255,.30);
}


.dm-loop-path strong {
    color: rgba(255,255,255,.70);
}


.dm-loop-path > i {
    color: rgba(255,255,255,.20);
}


.dm-loop-path > span.active {
    background: var(--tdc-orange, #f26322);
}


.dm-loop-path > span.active small,
.dm-loop-path > span.active strong {
    color: #ffffff;
}


/* ==========================================================
   PRINCIPLES
========================================================== */

.dm-process-principles {
    display: grid;

    grid-template-columns:
        minmax(220px, 25%)
        minmax(0, 75%);

    align-items: center;

    gap: 18px;

    margin-top: 12px;
    padding: 13px 16px;

    border: 1px solid #e1dcd7;
    border-radius: 13px;

    background: #ffffff;
}


.dm-principle-intro span,
.dm-principle-intro strong {
    display: block;
}


.dm-principle-intro span {
    color: var(--tdc-orange, #f26322);
}


.dm-principle-intro strong {
    color: #111111;
}


/* ITEMS */

.dm-principle-items {
    display: grid;

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

    gap: 6px;
}


.dm-principle-items > div {
    display: grid;

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

    align-items: center;

    gap: 7px;

    padding: 8px;

    border-radius: 8px;

    background: #f7f5f2;
}


.dm-principle-items > div > span {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 34px;
    height: 34px;

    border-radius: 7px;

    background: #111111;

    color: var(--tdc-orange, #f26322);
}


.dm-principle-items small,
.dm-principle-items strong {
    display: block;
}


.dm-principle-items small {
    color: var(--tdc-orange, #f26322);
}


.dm-principle-items strong {
    color: #111111;
}


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

@media (max-width: 1023px) {

    .dm-process {
        padding: 38px 0;
    }


    .dm-process-header {
        grid-template-columns: 1fr;

        gap: 12px;
    }


    .dm-process-intro {
        max-width: 680px;
    }


    .dm-roadmap {
        overflow-x: auto;

        scrollbar-width: thin;
    }


    .dm-roadmap-top,
    .dm-roadmap-loop {
        min-width: 900px;
    }


    .dm-process-principles {
        grid-template-columns: 1fr;

        gap: 10px;
    }

}


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

@media (max-width: 767px) {

    .dm-process {
        padding: 30px 0;
    }


    .dm-roadmap {
        overflow: visible;
    }


    .dm-roadmap-top,
    .dm-roadmap-loop {
        min-width: 0;
    }


    .dm-roadmap-top {
        align-items: flex-start;
        flex-direction: column;
    }


    .dm-roadmap-track {
        display: block;

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

        padding: 15px;
    }


    .dm-roadmap-line {
        top: 25px;
        bottom: 25px;
        left: 31px;
        right: auto;

        width: 2px;
        height: auto;

        transform: none;

        background:
            linear-gradient(
                180deg,
                rgba(242,99,34,.15),
                var(--tdc-orange, #f26322),
                rgba(242,99,34,.15)
            );
    }


    .dm-roadmap-step,
    .dm-roadmap-step.step-top,
    .dm-roadmap-step.step-bottom {
        display: block;

        padding: 0 0 10px 38px;
    }


    .dm-step-card {
        min-height: 0;
    }


    .step-bottom .dm-step-card:hover {
        transform: translateY(-3px);
    }


    .dm-track-point {
        top: 24px;
        left: 16px;

        transform: none;
    }


    .step-top .dm-step-card::after,
    .step-bottom .dm-step-card::before {
        display: none;
    }


    .dm-roadmap-loop {
        grid-template-columns: 1fr;

        gap: 10px;
    }


    .dm-loop-path {
        justify-content: flex-start;
    }


    .dm-principle-items {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

}


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

@media (max-width: 480px) {

    .dm-roadmap-progress {
        width: 100%;

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


    .dm-loop-path {
        display: grid;

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

        width: 100%;
    }


    .dm-loop-path > i {
        display: none;
    }


    .dm-principle-items {
        grid-template-columns: 1fr;
    }

}


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

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

    .dm-step-card {
        transition: none;
    }

}
/* ==========================================================
   DIGITAL MARKETING
   SECTION 06 — WHY THE DIGITAL CAFE

   Typography / Font Sizes:
   Controlled by existing Global CSS
========================================================== */

.dm-why {
    position: relative;
    overflow: hidden;

    padding: 50px 0;

    background: #ffffff;
}


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

.dm-why-header {
    display: grid;

    grid-template-columns:
        minmax(0, 60%)
        minmax(300px, 40%);

    align-items: end;

    gap: 55px;

    margin-bottom: 28px;
}


.dm-why-header h2 {
    max-width: 850px;

    margin: 0;

    color: #111111;
}


.dm-why-header h2 span {
    display: block;

    color: var(--tdc-orange, #f26322);
}


.dm-why-intro {
    max-width: 500px;
}


.dm-why-intro p {
    margin: 0;

    color: var(--tdc-text-muted, #66615e);
}


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

.dm-why-system {
    overflow: hidden;

    border: 1px solid #222222;
    border-radius: 20px;

    background: #111111;

    box-shadow:
        0 24px 60px rgba(17,17,17,.12);
}


/* ==========================================================
   TOP
========================================================== */

.dm-why-system-top {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 20px;

    padding: 13px 16px;

    border-bottom: 1px solid rgba(255,255,255,.08);

    background: #171717;
}


.dm-why-system-title {
    display: flex;
    align-items: center;

    gap: 10px;
}


.dm-why-system-icon {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 38px;
    height: 38px;

    flex: 0 0 38px;

    border-radius: 9px;

    background: var(--tdc-orange, #f26322);

    color: #ffffff;
}


.dm-why-system-title div > span,
.dm-why-system-title strong {
    display: block;
}


.dm-why-system-title div > span {
    color: var(--tdc-orange, #f26322);
}


.dm-why-system-title strong {
    color: #ffffff;
}


/* ==========================================================
   STATUS
========================================================== */

.dm-why-system-status {
    display: flex;
    align-items: center;

    gap: 8px;

    padding: 6px 9px;

    border-radius: 50px;

    background: rgba(255,255,255,.05);
}


.dm-why-system-status > span {
    width: 8px;
    height: 8px;

    border-radius: 50%;

    background: var(--tdc-orange, #f26322);

    box-shadow:
        0 0 0 4px rgba(242,99,34,.10);
}


.dm-why-system-status small,
.dm-why-system-status strong {
    display: block;
}


.dm-why-system-status small {
    color: rgba(255,255,255,.30);
}


.dm-why-system-status strong {
    color: #ffffff;
}


/* ==========================================================
   COMPARISON
========================================================== */

.dm-why-comparison {
    display: grid;

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

    gap: 0;

    padding: 16px;

    background:
        linear-gradient(
            rgba(255,255,255,.018) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(255,255,255,.018) 1px,
            transparent 1px
        );

    background-size: 28px 28px;
}


/* ==========================================================
   COLUMNS
========================================================== */

.dm-why-standard,
.dm-why-tdc {
    padding: 13px;

    border-radius: 14px;
}


.dm-why-standard {
    border: 1px solid rgba(255,255,255,.07);

    background: rgba(255,255,255,.025);
}


.dm-why-tdc {
    border: 1px solid rgba(242,99,34,.20);

    background:
        linear-gradient(
            145deg,
            rgba(242,99,34,.07),
            rgba(255,255,255,.025)
        );
}


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

.dm-why-column-head {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 10px;

    padding-bottom: 10px;

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


.dm-why-column-head div > span,
.dm-why-column-head div > strong {
    display: block;
}


.dm-why-column-head div > span {
    color: rgba(255,255,255,.30);
}


.dm-why-tdc
.dm-why-column-head div > span {
    color: var(--tdc-orange, #f26322);
}


.dm-why-column-head div > strong {
    color: #ffffff;
}


.dm-why-column-badge {
    padding: 5px 7px;

    border-radius: 50px;

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

    color: rgba(255,255,255,.35);
}


.dm-why-column-badge.active {
    background: rgba(242,99,34,.12);

    color: var(--tdc-orange, #f26322);
}


/* ==========================================================
   ROWS
========================================================== */

.dm-why-standard-row,
.dm-why-tdc-row {
    display: grid;

    grid-template-columns:
        25px
        38px
        minmax(0, 1fr)
        25px;

    align-items: center;

    gap: 8px;

    margin-top: 7px;
    padding: 9px;

    border-radius: 9px;
}


.dm-why-standard-row {
    border: 1px solid rgba(255,255,255,.045);

    background: rgba(255,255,255,.025);
}


.dm-why-tdc-row {
    border: 1px solid rgba(242,99,34,.08);

    background: rgba(255,255,255,.035);
}


.dm-why-row-number {
    color: rgba(255,255,255,.20);
}


/* ==========================================================
   ROW ICON
========================================================== */

.dm-why-row-icon {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 38px;
    height: 38px;

    border-radius: 8px;

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

    color: rgba(255,255,255,.40);
}


.dm-why-tdc-row
.dm-why-row-icon {
    background: rgba(242,99,34,.10);

    color: var(--tdc-orange, #f26322);
}


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

.dm-why-row-copy small,
.dm-why-row-copy strong,
.dm-why-row-copy span {
    display: block;
}


.dm-why-row-copy small {
    color: rgba(255,255,255,.25);
}


.dm-why-tdc-row
.dm-why-row-copy small {
    color: var(--tdc-orange, #f26322);
}


.dm-why-row-copy strong {
    color: #ffffff;
}


.dm-why-row-copy span {
    margin-top: 2px;

    color: rgba(255,255,255,.42);
}


.dm-why-x {
    color: rgba(255,255,255,.20);
}


.dm-why-check {
    color: var(--tdc-orange, #f26322);
}


/* ==========================================================
   CENTER SWITCH
========================================================== */

.dm-why-switch {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    gap: 10px;
}


.dm-why-switch-line {
    display: block;

    width: 1px;
    height: 100px;

    background:
        linear-gradient(
            transparent,
            rgba(242,99,34,.35),
            transparent
        );
}


.dm-why-switch-core {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    width: 75px;
    height: 75px;

    border-radius: 50%;

    background: var(--tdc-orange, #f26322);

    box-shadow:
        0 10px 30px rgba(242,99,34,.20);

    color: #ffffff;

    text-align: center;
}


.dm-why-switch-core small,
.dm-why-switch-core strong {
    display: block;
}


.dm-why-switch-core i {
    margin: 2px 0;
}


/* ==========================================================
   FORMULA
========================================================== */

.dm-why-formula {
    display: grid;

    grid-template-columns:
        minmax(190px, 21%)
        minmax(0, 79%);

    align-items: center;

    gap: 15px;

    margin: 0 16px 16px;
    padding: 12px;

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

    background: #171717;
}


.dm-why-formula-title span,
.dm-why-formula-title strong {
    display: block;
}


.dm-why-formula-title span {
    color: var(--tdc-orange, #f26322);
}


.dm-why-formula-title strong {
    color: #ffffff;
}


/* ==========================================================
   FORMULA FLOW
========================================================== */

.dm-why-formula-flow {
    display: flex;
    align-items: center;
    justify-content: flex-end;

    gap: 5px;
}


.dm-why-formula-flow > div {
    min-width: 85px;

    padding: 7px;

    border-radius: 8px;

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

    text-align: center;
}


.dm-formula-icon {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 28px;
    height: 28px;

    margin: 0 auto 4px;

    border-radius: 7px;

    background: rgba(242,99,34,.10);

    color: var(--tdc-orange, #f26322);
}


.dm-why-formula-flow small,
.dm-why-formula-flow strong {
    display: block;
}


.dm-why-formula-flow small {
    color: rgba(255,255,255,.27);
}


.dm-why-formula-flow strong {
    color: #ffffff;
}


.dm-why-formula-flow > i {
    color: rgba(255,255,255,.20);
}


.dm-why-formula-flow
.dm-formula-result {
    background: var(--tdc-orange, #f26322);
}


.dm-formula-result
.dm-formula-icon {
    background: rgba(255,255,255,.15);

    color: #ffffff;
}


.dm-formula-result small,
.dm-formula-result strong {
    color: #ffffff;
}


/* ==========================================================
   BENEFITS
========================================================== */

.dm-why-benefits {
    display: grid;

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

    gap: 8px;

    margin-top: 12px;
}


.dm-why-benefit {
    position: relative;

    display: grid;

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

    gap: 9px;

    padding: 14px;

    border: 1px solid #e2ddd8;
    border-radius: 12px;

    background: #f8f6f3;
}


.dm-benefit-number {
    position: absolute;

    top: 8px;
    right: 9px;

    color: #cbc4be;
}


.dm-benefit-icon {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 38px;
    height: 38px;

    border-radius: 8px;

    background: #111111;

    color: var(--tdc-orange, #f26322);
}


.dm-why-benefit > div:last-child > span,
.dm-why-benefit > div:last-child > strong {
    display: block;
}


.dm-why-benefit > div:last-child > span {
    color: var(--tdc-orange, #f26322);
}


.dm-why-benefit > div:last-child > strong {
    color: #111111;
}


.dm-why-benefit p {
    margin: 5px 0 0;

    color: var(--tdc-text-muted, #66615e);
}


/* ==========================================================
   BOTTOM
========================================================== */

.dm-why-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 20px;

    margin-top: 12px;
    padding: 14px 16px;

    border-radius: 13px;

    background: var(--tdc-orange, #f26322);
}


.dm-why-bottom-copy > span,
.dm-why-bottom-copy > strong {
    display: block;
}


.dm-why-bottom-copy > span {
    color: rgba(255,255,255,.65);
}


.dm-why-bottom-copy > strong {
    max-width: 700px;

    color: #ffffff;
}


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

.dm-why-cta {
    display: inline-flex;
    align-items: center;

    gap: 10px;

    padding: 9px 13px;

    border-radius: 50px;

    background: #111111;

    text-decoration: none;
    white-space: nowrap;

    color: #ffffff;

    transition:
        gap .25s ease,
        background .25s ease,
        color .25s ease;
}


.dm-why-cta:hover {
    gap: 13px;

    background: #ffffff;

    color: #111111;
}


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

@media (max-width: 1023px) {

    .dm-why {
        padding: 38px 0;
    }


    .dm-why-header {
        grid-template-columns: 1fr;

        gap: 12px;
    }


    .dm-why-intro {
        max-width: 680px;
    }


    .dm-why-comparison {
        grid-template-columns: 1fr;
    }


    .dm-why-switch {
        flex-direction: row;

        padding: 12px 0;
    }


    .dm-why-switch-line {
        width: 100%;
        height: 1px;

        background:
            linear-gradient(
                90deg,
                transparent,
                rgba(242,99,34,.35),
                transparent
            );
    }


    .dm-why-switch-core {
        flex: 0 0 75px;

        transform: rotate(90deg);
    }


    .dm-why-switch-core small,
    .dm-why-switch-core strong {
        transform: rotate(-90deg);
    }


    .dm-why-formula {
        grid-template-columns: 1fr;
    }


    .dm-why-formula-flow {
        justify-content: flex-start;
    }


    .dm-why-benefits {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

}


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

@media (max-width: 767px) {

    .dm-why {
        padding: 30px 0;
    }


    .dm-why-system-top {
        align-items: flex-start;
        flex-direction: column;
    }


    .dm-why-formula-flow {
        display: grid;

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

        gap: 5px;
    }


    .dm-why-formula-flow > i {
        display: none;
    }


    .dm-why-benefits {
        grid-template-columns: 1fr;
    }


    .dm-why-bottom {
        align-items: flex-start;
        flex-direction: column;
    }


    .dm-why-cta {
        justify-content: center;

        width: 100%;
    }

}


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

@media (max-width: 480px) {

    .dm-why-comparison {
        padding: 10px;
    }


    .dm-why-standard,
    .dm-why-tdc {
        padding: 10px;
    }


    .dm-why-column-head {
        align-items: flex-start;
        flex-direction: column;
    }


    .dm-why-standard-row,
    .dm-why-tdc-row {
        grid-template-columns:
            34px
            minmax(0, 1fr)
            20px;
    }


    .dm-why-row-number {
        display: none;
    }


    .dm-why-formula {
        margin: 0 10px 10px;
    }


    .dm-why-formula-flow {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

}


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

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

    .dm-why-cta {
        transition: none;
    }

}
/* ==========================================================
   DIGITAL MARKETING — FAQ
   Typography handled by Global CSS
========================================================== */

.dm-faq {
    position: relative;
    padding: 50px 0;
    background: #f7f5f2;
}


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

.dm-faq-header {
    display: grid;

    grid-template-columns:
        minmax(0, 60%)
        minmax(300px, 40%);

    align-items: end;

    gap: 55px;

    margin-bottom: 24px;
}


.dm-faq-header h2 {
    margin: 0;
    max-width: 800px;

    color: #111111;
}


.dm-faq-header h2 span {
    display: block;

    color: var(--tdc-orange, #f26322);
}


.dm-faq-intro p {
    margin: 0;

    color: var(--tdc-text-muted, #66615e);
}


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

.dm-faq-layout {
    display: grid;

    grid-template-columns:
        minmax(270px, 31%)
        minmax(0, 69%);

    gap: 12px;

    align-items: start;
}


/* ==========================================================
   SIDE PANEL
========================================================== */

.dm-faq-side {
    position: sticky;
    top: 100px;

    overflow: hidden;

    padding: 18px;

    border-radius: 16px;

    background: #111111;

    box-shadow:
        0 20px 45px rgba(17,17,17,.10);
}


.dm-faq-side::before {
    content: "";

    position: absolute;

    width: 250px;
    height: 250px;

    top: -150px;
    right: -120px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(242,99,34,.18),
            transparent 70%
        );

    pointer-events: none;
}


.dm-faq-side-top {
    position: relative;
    z-index: 2;
}


.dm-faq-side-icon {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 42px;
    height: 42px;

    margin-bottom: 14px;

    border-radius: 9px;

    background: var(--tdc-orange, #f26322);

    color: #ffffff;
}


.dm-faq-side-top > span:not(.dm-faq-side-icon) {
    display: block;

    color: var(--tdc-orange, #f26322);
}


.dm-faq-side h3 {
    margin: 5px 0 8px;

    color: #ffffff;
}


.dm-faq-side p {
    margin: 0;

    color: rgba(255,255,255,.50);
}


/* ==========================================================
   MINI PROCESS
========================================================== */

.dm-faq-mini {
    position: relative;
    z-index: 2;

    margin-top: 18px;
    padding-top: 14px;

    border-top: 1px solid rgba(255,255,255,.08);
}


.dm-faq-mini > div {
    display: grid;

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

    align-items: center;

    gap: 8px;

    padding: 7px;

    border-radius: 8px;

    background: rgba(255,255,255,.04);
}


.dm-faq-mini > div > span {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 32px;
    height: 32px;

    border-radius: 7px;

    background: rgba(242,99,34,.12);

    color: var(--tdc-orange, #f26322);
}


.dm-faq-mini small,
.dm-faq-mini strong {
    display: block;
}


.dm-faq-mini small {
    color: rgba(255,255,255,.30);
}


.dm-faq-mini strong {
    color: #ffffff;
}


.dm-faq-mini > i {
    display: block;

    margin: 4px 0 4px 16px;

    color: rgba(242,99,34,.45);
}


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

.dm-faq-side-cta {
    position: relative;
    z-index: 2;

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

    gap: 10px;

    margin-top: 16px;
    padding: 10px 12px;

    border-radius: 8px;

    background: var(--tdc-orange, #f26322);

    color: #ffffff;

    text-decoration: none;

    transition:
        background .25s ease,
        color .25s ease;
}


.dm-faq-side-cta:hover {
    background: #ffffff;
    color: #111111;
}


/* ==========================================================
   FAQ LIST
========================================================== */

.dm-faq-list {
    display: grid;
    gap: 6px;
}


/* ==========================================================
   FAQ ITEM
========================================================== */

.dm-faq-item {
    overflow: hidden;

    border: 1px solid #e0dcd7;
    border-radius: 10px;

    background: #ffffff;

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


.dm-faq-item:hover {
    border-color: #d3cdc7;
}


.dm-faq-item.active {
    border-color: rgba(242,99,34,.30);

    box-shadow:
        0 10px 25px rgba(17,17,17,.05);
}


/* ==========================================================
   QUESTION
========================================================== */

.dm-faq-question {
    display: grid;

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

    align-items: center;

    gap: 10px;

    width: 100%;

    padding: 11px 12px;

    border: 0;

    background: transparent;

    color: #111111;

    text-align: left;
    cursor: pointer;
}


/* NUMBER */

.dm-faq-number {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 34px;
    height: 34px;

    border-radius: 7px;

    background: #f5f2ef;

    color: #8c847e;

    transition:
        background .25s ease,
        color .25s ease;
}


.dm-faq-item.active
.dm-faq-number {
    background: var(--tdc-orange, #f26322);

    color: #ffffff;
}


/* ==========================================================
   TOGGLE
========================================================== */

.dm-faq-toggle {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 34px;
    height: 34px;

    border-radius: 50%;

    background: #111111;

    color: #ffffff;

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


.dm-faq-item.active
.dm-faq-toggle {
    background: var(--tdc-orange, #f26322);

    transform: rotate(45deg);
}


/* ==========================================================
   ANSWER
========================================================== */

.dm-faq-answer {
    display: grid;

    grid-template-rows: 0fr;

    transition:
        grid-template-rows .35s ease;
}


.dm-faq-item.active
.dm-faq-answer {
    grid-template-rows: 1fr;
}


.dm-faq-answer-inner {
    overflow: hidden;

    padding:
        0
        56px
        0
        56px;
}


.dm-faq-item.active
.dm-faq-answer-inner {
    padding-bottom: 14px;
}


.dm-faq-answer-inner p {
    margin: 0 0 7px;

    color: var(--tdc-text-muted, #66615e);
}


.dm-faq-answer-inner p:last-child {
    margin-bottom: 0;
}


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

@media (max-width: 1023px) {

    .dm-faq {
        padding: 38px 0;
    }


    .dm-faq-header {
        grid-template-columns: 1fr;

        gap: 10px;
    }


    .dm-faq-intro {
        max-width: 700px;
    }


    .dm-faq-layout {
        grid-template-columns:
            minmax(230px, 34%)
            minmax(0,66%);
    }

}


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

@media (max-width: 767px) {

    .dm-faq {
        padding: 30px 0;
    }


    .dm-faq-layout {
        grid-template-columns: 1fr;
    }


    .dm-faq-side {
        position: relative;
        top: auto;
    }


    .dm-faq-mini {
        display: grid;

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

        gap: 5px;
    }


    .dm-faq-mini > i {
        display: none;
    }


    .dm-faq-mini > div {
        grid-template-columns: 1fr;
    }


    .dm-faq-question {
        grid-template-columns:
            30px
            minmax(0,1fr)
            30px;

        gap: 8px;

        padding: 9px;
    }


    .dm-faq-number,
    .dm-faq-toggle {
        width: 30px;
        height: 30px;
    }


    .dm-faq-answer-inner {
        padding-left: 47px;
        padding-right: 40px;
    }

}


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

@media (max-width: 480px) {

    .dm-faq-mini {
        grid-template-columns: 1fr;
    }


    .dm-faq-answer-inner {
        padding-left: 12px;
        padding-right: 12px;
    }


    .dm-faq-item.active
    .dm-faq-answer-inner {
        padding-bottom: 12px;
    }

}


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

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

    .dm-faq-answer,
    .dm-faq-toggle,
    .dm-faq-number,
    .dm-faq-item,
    .dm-faq-side-cta {
        transition: none;
    }

}
/* ==========================================================
   DIGITAL MARKETING
   SECTION 08 — FINAL CTA

   Typography / Font Size:
   Controlled by Global CSS
========================================================== */

.dm-final-cta {
    position: relative;

    padding: 50px 0;

    background: #ffffff;
}


/* ==========================================================
   MAIN WRAPPER
========================================================== */

.dm-final-wrap {
    position: relative;

    display: grid;

    grid-template-columns:
        minmax(0, 52%)
        minmax(380px, 48%);

    gap: 18px;

    overflow: hidden;

    padding: 20px;

    border-radius: 22px;

    background: #111111;

    box-shadow:
        0 25px 65px rgba(17,17,17,.14);
}


/* ==========================================================
   BACKGROUND GRID
========================================================== */

.dm-final-grid {
    position: absolute;
    inset: 0;

    opacity: .06;

    background-image:
        linear-gradient(
            rgba(255,255,255,.45) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(255,255,255,.45) 1px,
            transparent 1px
        );

    background-size: 30px 30px;

    pointer-events: none;
}


/* ==========================================================
   GLOW
========================================================== */

.dm-final-glow {
    position: absolute;

    display: block;

    border-radius: 50%;

    pointer-events: none;
}


.dm-final-glow.glow-one {
    width: 420px;
    height: 420px;

    top: -260px;
    left: -180px;

    background:
        radial-gradient(
            circle,
            rgba(242,99,34,.18),
            transparent 70%
        );
}


.dm-final-glow.glow-two {
    width: 350px;
    height: 350px;

    right: -200px;
    bottom: -220px;

    background:
        radial-gradient(
            circle,
            rgba(242,99,34,.10),
            transparent 70%
        );
}


/* ==========================================================
   LEFT CONTENT
========================================================== */

.dm-final-content {
    position: relative;
    z-index: 3;

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

    padding: 16px 20px 16px 8px;
}


.dm-final-eyebrow {
    color: var(--tdc-orange, #f26322);
}


.dm-final-content h2 {
    max-width: 650px;

    margin: 8px 0 10px;

    color: #ffffff;
}


.dm-final-content h2 span {
    display: block;

    color: var(--tdc-orange, #f26322);
}


.dm-final-lead {
    max-width: 610px;

    margin: 0;

    color: rgba(255,255,255,.52);
}


/* ==========================================================
   POINTS
========================================================== */

.dm-final-points {
    display: grid;

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

    gap: 7px;

    margin-top: 20px;
}


.dm-final-points > div {
    display: grid;

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

    align-items: center;

    gap: 7px;

    padding: 8px;

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

    background: rgba(255,255,255,.035);
}


.dm-final-points > div > span {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 32px;
    height: 32px;

    border-radius: 50%;

    background: rgba(242,99,34,.12);

    color: var(--tdc-orange, #f26322);
}


.dm-final-points small,
.dm-final-points strong {
    display: block;
}


.dm-final-points small {
    color: rgba(255,255,255,.28);
}


.dm-final-points strong {
    color: #ffffff;
}


/* ==========================================================
   CONTACT OPTIONS
========================================================== */

.dm-final-contact {
    display: grid;

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

    gap: 7px;

    margin-top: 12px;
}


.dm-contact-item {
    display: grid;

    grid-template-columns:
        38px
        minmax(0,1fr)
        24px;

    align-items: center;

    gap: 8px;

    padding: 9px;

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

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

    color: #ffffff;

    text-decoration: none;

    transition:
        border-color .25s ease,
        background .25s ease;
}


.dm-contact-item:hover {
    border-color: rgba(242,99,34,.30);

    background: rgba(242,99,34,.08);
}


.dm-contact-icon {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 38px;
    height: 38px;

    border-radius: 8px;

    background: var(--tdc-orange, #f26322);

    color: #ffffff;
}


.dm-contact-item small,
.dm-contact-item strong {
    display: block;
}


.dm-contact-item small {
    color: rgba(255,255,255,.30);
}


.dm-contact-item strong {
    color: #ffffff;
}


.dm-contact-item > i {
    color: rgba(255,255,255,.30);

    transition: transform .25s ease;
}


.dm-contact-item:hover > i {
    color: var(--tdc-orange, #f26322);

    transform: translateX(3px);
}


/* ==========================================================
   TRUST LINE
========================================================== */

.dm-final-trust {
    display: flex;
    align-items: center;
    flex-wrap: wrap;

    gap: 8px;

    margin-top: 16px;

    color: rgba(255,255,255,.35);
}


.dm-final-trust > span:not(:first-child):nth-child(even) {
    width: 3px;
    height: 3px;

    border-radius: 50%;

    background: var(--tdc-orange, #f26322);
}


.dm-final-trust i {
    margin-right: 4px;

    color: var(--tdc-orange, #f26322);
}


/* ==========================================================
   FORM WRAPPER
========================================================== */

.dm-final-form-wrap {
    position: relative;
    z-index: 4;

    padding: 17px;

    border-radius: 15px;

    background: #ffffff;

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


/* ==========================================================
   FORM HEAD
========================================================== */

.dm-form-head {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 15px;

    padding-bottom: 12px;
    margin-bottom: 12px;

    border-bottom: 1px solid #e7e2dd;
}


.dm-form-head div > span {
    display: block;

    color: var(--tdc-orange, #f26322);
}


.dm-form-head h3 {
    margin: 3px 0 0;

    color: #111111;
}


.dm-form-head-icon {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 42px;
    height: 42px;

    flex: 0 0 42px;

    border-radius: 9px;

    background: #111111;

    color: var(--tdc-orange, #f26322);
}


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

.dm-consultation-form {
    display: grid;

    gap: 9px;
}


.dm-form-grid {
    display: grid;

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

    gap: 8px;
}


.dm-form-field {
    display: grid;

    gap: 4px;
}


.dm-form-field label {
    color: #282522;
}


.dm-form-field label span {
    color: #9c958f;
}


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

.dm-input-wrap {
    position: relative;
}


.dm-input-wrap > i {
    position: absolute;

    top: 50%;
    left: 12px;

    color: #aaa39d;

    transform: translateY(-50%);

    pointer-events: none;
}


.dm-input-wrap input,
.dm-input-wrap select,
.dm-input-wrap textarea {
    width: 100%;

    padding: 10px 12px 10px 37px;

    border: 1px solid #ddd8d3;
    border-radius: 8px;

    outline: none;

    background: #faf9f8;

    color: #111111;

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


.dm-input-wrap textarea {
    resize: vertical;
    min-height: 80px;
}


.dm-textarea-wrap > i {
    top: 14px;

    transform: none;
}


.dm-input-wrap input:focus,
.dm-input-wrap select:focus,
.dm-input-wrap textarea:focus {
    border-color: var(--tdc-orange, #f26322);

    background: #ffffff;

    box-shadow:
        0 0 0 3px rgba(242,99,34,.07);
}


/* ==========================================================
   SUBMIT
========================================================== */

.dm-form-submit {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 12px;

    width: 100%;

    padding: 11px 14px;

    border: 0;
    border-radius: 8px;

    background: var(--tdc-orange, #f26322);

    color: #ffffff;

    cursor: pointer;

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


.dm-form-submit:hover {
    background: #111111;

    transform: translateY(-1px);
}


.dm-form-submit i {
    transition: transform .25s ease;
}


.dm-form-submit:hover i {
    transform: translateX(4px);
}


/* ==========================================================
   PRIVACY
========================================================== */

.dm-form-note {
    display: flex;
    align-items: center;
    justify-content: center;

    gap: 6px;

    color: #8b847e;

    text-align: center;
}


.dm-form-note i {
    color: var(--tdc-orange, #f26322);
}


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

@media (max-width: 1023px) {

    .dm-final-cta {
        padding: 38px 0;
    }


    .dm-final-wrap {
        grid-template-columns:
            minmax(0,1fr)
            minmax(350px,45%);

        padding: 16px;
    }


    .dm-final-points {
        grid-template-columns: 1fr;
    }


    .dm-final-contact {
        grid-template-columns: 1fr;
    }

}


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

@media (max-width: 767px) {

    .dm-final-cta {
        padding: 30px 0;
    }


    .dm-final-wrap {
        grid-template-columns: 1fr;

        gap: 16px;

        padding: 14px;
    }


    .dm-final-content {
        padding: 8px 4px;
    }


    .dm-final-points {
        grid-template-columns: 1fr;
    }


    .dm-final-contact {
        grid-template-columns: 1fr;
    }


    .dm-final-form-wrap {
        padding: 14px;
    }

}


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

@media (max-width: 480px) {

    .dm-form-grid {
        grid-template-columns: 1fr;
    }


    .dm-final-trust {
        gap: 6px;
    }

}


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

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

    .dm-contact-item,
    .dm-contact-item > i,
    .dm-form-submit,
    .dm-form-submit i,
    .dm-input-wrap input,
    .dm-input-wrap select,
    .dm-input-wrap textarea {
        transition: none;
    }

}