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

   TYPOGRAPHY INHERITED FROM GLOBAL CSS
========================================================== */

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

    padding: 55px 0 35px;

    background:
        radial-gradient(
            circle at 85% 15%,
            rgba(242,99,34,.08),
            transparent 30%
        ),
        #f8f6f3;
}


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

.pm-hero-layout {
    display: grid;
    grid-template-columns:
        minmax(0, 53%)
        minmax(400px, 47%);

    align-items: center;

    gap: 55px;
}


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

.pm-hero-content {
    position: relative;
    z-index: 5;

    max-width: 720px;
}


/* ==========================================================
   EYEBROW
========================================================== */

.pm-hero-eyebrow {
    display: flex;
    align-items: center;

    gap: 10px;

    margin-bottom: 15px;

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

.pm-hero-eyebrow-line {
    width: 34px;
    height: 2px;

    flex: 0 0 34px;

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


/* ==========================================================
   H1
========================================================== */

.pm-hero h1 {
    max-width: 720px;

    margin: 0;

    color: var(--tdc-black, #111111);
}

.pm-hero h1 span {
    display: block;

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


/* ==========================================================
   DESCRIPTION
========================================================== */

.pm-hero-description {
    max-width: 650px;

    margin: 18px 0 0;

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


/* ==========================================================
   CTA
========================================================== */

.pm-hero-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;

    gap: 9px;

    margin-top: 24px;
}


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

    gap: 9px;

    min-height: 50px;

    padding: 0 20px;

    border-radius: 50px;

    text-decoration: none;

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


/* PRIMARY */

.pm-hero-primary {
    border: 1px solid var(--tdc-orange, #f26322);

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

    color: #ffffff;
}

.pm-hero-primary:hover {
    transform: translateY(-2px);

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

    color: #ffffff;
}


/* SECONDARY */

.pm-hero-secondary {
    border: 1px solid #ddd7d2;

    background: #ffffff;

    color: var(--tdc-black, #111111);
}

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

    border-color: #cfc7c1;

    color: var(--tdc-black, #111111);
}


/* ==========================================================
   PLATFORMS
========================================================== */

.pm-hero-platforms {
    display: flex;
    align-items: center;
    flex-wrap: wrap;

    gap: 11px;

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

    border-top: 1px solid #e3ddd8;
}

.pm-hero-platform-label {
    color: #8b837e;
}

.pm-hero-platform-list {
    display: flex;
    align-items: center;
    flex-wrap: wrap;

    gap: 5px;
}

.pm-hero-platform-list span {
    padding: 6px 10px;

    border: 1px solid #e3ddd8;
    border-radius: 50px;

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

    color: #625c58;
}


/* ==========================================================
   TRUST POINTS
========================================================== */

.pm-hero-trust {
    display: grid;
    grid-template-columns:
        repeat(3, minmax(0, 1fr));

    gap: 7px;

    margin-top: 13px;
}

.pm-hero-trust > div {
    display: flex;
    align-items: center;

    gap: 8px;

    padding: 9px 10px;

    border-radius: 10px;

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

    color: #47423f;
}

.pm-hero-trust span {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 26px;
    height: 26px;

    flex: 0 0 26px;

    border-radius: 7px;

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

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


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

.pm-hero-visual {
    position: relative;

    min-height: 600px;
}


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

.pm-hero-image {
    position: absolute;

    inset: 20px 35px 20px 45px;

    overflow: hidden;

    border-radius: 25px;

    background: #ddd8d4;

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

.pm-hero-image::after {
    content: "";

    position: absolute;
    inset: 0;

    background:
        linear-gradient(
            180deg,
            rgba(17,17,17,0) 35%,
            rgba(17,17,17,.08) 65%,
            rgba(17,17,17,.35) 100%
        );

    pointer-events: none;
}

.pm-hero-image img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;
}


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

.pm-hero-performance-card {
    position: absolute;

    z-index: 6;

    top: 0;
    right: 0;

    width: 275px;

    padding: 17px;

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

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

    box-shadow:
        0 20px 50px rgba(17,17,17,.15);

    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}


/* ==========================================================
   PERFORMANCE TOP
========================================================== */

.pm-performance-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;

    gap: 10px;
}

.pm-performance-top > div > span {
    display: block;

    margin-bottom: 2px;

    color: #8b837e;
}

.pm-performance-top strong {
    display: block;

    color: #111111;
}


/* LIVE */

.pm-performance-live {
    display: inline-flex;
    align-items: center;

    gap: 5px;

    padding: 5px 7px;

    border-radius: 50px;

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

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

.pm-performance-live > span {
    width: 6px;
    height: 6px;

    border-radius: 50%;

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


/* ==========================================================
   CHART
========================================================== */

.pm-performance-chart {
    position: relative;

    height: 80px;

    margin-top: 15px;

    overflow: hidden;

    border-radius: 10px;

    background:
        linear-gradient(
            to right,
            rgba(17,17,17,.04) 1px,
            transparent 1px
        ),
        linear-gradient(
            to bottom,
            rgba(17,17,17,.04) 1px,
            transparent 1px
        );

    background-size: 30px 30px;
}


/* TREND LINE */

.pm-chart-line {
    position: absolute;

    left: 12px;
    right: 12px;
    bottom: 15px;

    height: 3px;

    border-radius: 50px;

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

    transform: rotate(-9deg);
    transform-origin: left center;
}


/* POINTS */

.pm-chart-point {
    position: absolute;

    width: 8px;
    height: 8px;

    border: 2px solid #ffffff;
    border-radius: 50%;

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

    box-shadow:
        0 2px 7px rgba(17,17,17,.15);
}

.pm-chart-point.point-1 {
    left: 4%;
    top: -3px;
}

.pm-chart-point.point-2 {
    left: 28%;
    top: -3px;
}

.pm-chart-point.point-3 {
    left: 51%;
    top: -3px;
}

.pm-chart-point.point-4 {
    left: 74%;
    top: -3px;
}

.pm-chart-point.point-5 {
    right: 0;
    top: -3px;
}


/* ==========================================================
   METRICS
========================================================== */

.pm-performance-metrics {
    display: grid;
    grid-template-columns: 1fr 1fr;

    gap: 6px;

    margin-top: 11px;
}

.pm-performance-metrics > div {
    padding: 8px;

    border-radius: 8px;

    background: #f8f6f3;
}

.pm-performance-metrics span {
    display: block;

    margin-bottom: 2px;

    color: #8b837e;
}

.pm-performance-metrics strong {
    display: block;

    color: #111111;
}


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

.pm-hero-result-card {
    position: absolute;

    z-index: 7;

    left: 0;
    bottom: 35px;

    width: 245px;

    padding: 17px;

    border-radius: 17px;

    background: #111111;

    box-shadow:
        0 22px 50px rgba(17,17,17,.20);
}

.pm-result-label {
    display: block;

    margin-bottom: 5px;

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

.pm-hero-result-card > strong {
    display: block;

    color: #ffffff;
}


/* FLOW */

.pm-result-flow {
    display: flex;
    align-items: center;

    gap: 7px;

    margin-top: 13px;
}

.pm-result-flow span {
    padding: 6px 8px;

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

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

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

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


/* ==========================================================
   CHANNEL CARD
========================================================== */

.pm-hero-channel-card {
    position: absolute;

    z-index: 7;

    right: 8px;
    bottom: 35px;

    padding: 13px;

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

    background: #ffffff;

    box-shadow:
        0 16px 40px rgba(17,17,17,.12);
}

.pm-hero-channel-card > span {
    display: block;

    margin-bottom: 8px;

    color: #8b837e;
}

.pm-hero-channel-card > div {
    display: flex;

    gap: 5px;
}

.pm-hero-channel-card strong {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 31px;
    height: 31px;

    border-radius: 8px;

    background: #f5f2ef;

    color: #111111;
}


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

.pm-hero-bottom {
    display: grid;
    grid-template-columns:
        auto
        minmax(0, 1fr)
        auto;

    align-items: center;

    gap: 20px;

    margin-top: 30px;
    padding: 15px 18px;

    border: 1px solid #e4ded9;
    border-radius: 14px;

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

.pm-hero-bottom-label {
    padding-right: 20px;

    border-right: 1px solid #ded8d3;

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

.pm-hero-bottom p {
    margin: 0;

    color: #69625e;
}

.pm-hero-bottom p strong {
    color: #111111;
}

.pm-hero-bottom a {
    display: inline-flex;
    align-items: center;

    gap: 8px;

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

    color: #111111;

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

.pm-hero-bottom a i {
    color: var(--tdc-orange, #f26322);
}

.pm-hero-bottom a:hover {
    gap: 12px;

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


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

@media (max-width: 1023px) {

    .pm-hero {
        padding: 45px 0 30px;
    }

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

        gap: 30px;
    }

    .pm-hero-content {
        max-width: 760px;
    }

    .pm-hero-visual {
        max-width: 680px;

        min-height: 580px;
    }

}


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

@media (max-width: 767px) {

    .pm-hero {
        padding: 35px 0 25px;
    }


    /* CTA */

    .pm-hero-actions {
        align-items: stretch;
    }

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


    /* PLATFORMS */

    .pm-hero-platforms {
        align-items: flex-start;
        flex-direction: column;

        gap: 8px;
    }


    /* TRUST */

    .pm-hero-trust {
        grid-template-columns: 1fr;

        gap: 5px;
    }


    /* ======================================================
       VISUAL — NORMAL FLOW TO PREVENT OVERLAP
    ====================================================== */

    .pm-hero-visual {
        display: flex;
        flex-direction: column;

        min-height: 0;

        gap: 9px;
    }

    .pm-hero-image {
        position: relative;

        inset: auto;

        width: 100%;
        height: 410px;

        border-radius: 20px;
    }


    /* PERFORMANCE CARD */

    .pm-hero-performance-card {
        position: relative;

        top: auto;
        right: auto;

        width: 100%;
    }


    /* RESULT CARD */

    .pm-hero-result-card {
        position: relative;

        left: auto;
        bottom: auto;

        width: 100%;
    }


    /* CHANNEL CARD */

    .pm-hero-channel-card {
        position: relative;

        right: auto;
        bottom: auto;

        width: 100%;
    }


    /* BOTTOM */

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

        gap: 9px;

        margin-top: 18px;
    }

    .pm-hero-bottom-label {
        padding-right: 0;
        padding-bottom: 8px;

        border-right: 0;
        border-bottom: 1px solid #ded8d3;
    }

}


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

@media (max-width: 480px) {

    .pm-hero-image {
        height: 350px;
    }

}


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

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

    .pm-hero-primary,
    .pm-hero-secondary,
    .pm-hero-bottom a {
        transition: none !important;
    }

}
/* ==========================================================
   PERFORMANCE MARKETING
   SECTION 02 — WHAT IS PERFORMANCE MARKETING?
========================================================== */

.pm-explain {
    position: relative;
    overflow: hidden;

    padding: 50px 0;

    background: #ffffff;
}


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

.pm-explain-layout {
    display: grid;
    grid-template-columns:
        minmax(400px, 46%)
        minmax(0, 54%);

    align-items: center;

    gap: 65px;
}


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

.pm-explain-visual {
    position: relative;

    min-height: 620px;
}


/* ==========================================================
   IMAGE
========================================================== */

.pm-explain-image {
    position: absolute;

    inset: 0 40px 55px 0;

    overflow: hidden;

    border-radius: 24px;

    background: #ded9d5;

    box-shadow:
        0 22px 55px rgba(17,17,17,.10);
}

.pm-explain-image::after {
    content: "";

    position: absolute;
    inset: 0;

    background:
        linear-gradient(
            180deg,
            rgba(17,17,17,0) 30%,
            rgba(17,17,17,.08) 60%,
            rgba(17,17,17,.72) 100%
        );

    pointer-events: none;
}

.pm-explain-image img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;

    transition: transform .7s ease;
}

.pm-explain-visual:hover
.pm-explain-image img {
    transform: scale(1.035);
}


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

.pm-explain-image-label {
    position: absolute;

    z-index: 4;

    left: 24px;
    right: 90px;
    bottom: 82px;
}

.pm-explain-image-label span {
    display: block;

    margin-bottom: 5px;

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

.pm-explain-image-label strong {
    display: block;

    max-width: 330px;

    color: #ffffff;
}


/* ==========================================================
   FLOATING CONVERSION CARD
========================================================== */

.pm-explain-conversion {
    position: absolute;

    z-index: 6;

    left: 35px;
    right: 0;
    bottom: 0;

    padding: 17px;

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

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

    box-shadow:
        0 20px 50px rgba(17,17,17,.14);

    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}


/* ==========================================================
   CONVERSION TOP
========================================================== */

.pm-explain-conversion-top {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 15px;

    margin-bottom: 13px;

    color: #837c77;
}


/* ACTIVE */

.pm-explain-active {
    display: inline-flex;
    align-items: center;

    gap: 5px;

    padding: 5px 8px;

    border-radius: 50px;

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

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

.pm-explain-active > span {
    width: 6px;
    height: 6px;

    border-radius: 50%;

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


/* ==========================================================
   FLOW
========================================================== */

.pm-explain-flow {
    display: grid;
    grid-template-columns:
        1fr auto
        1fr auto
        1fr auto
        1fr;

    align-items: center;

    gap: 7px;
}

.pm-explain-flow > div {
    padding: 9px 6px;

    border-radius: 9px;

    background: #f7f4f1;

    text-align: center;
}

.pm-explain-flow > div span {
    display: block;

    margin-bottom: 2px;

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

.pm-explain-flow > div strong {
    display: block;

    color: #111111;
}

.pm-explain-flow > i {
    color: #b9b0aa;
}


/* ==========================================================
   RIGHT CONTENT
========================================================== */

.pm-explain-content {
    max-width: 700px;
}


/* ==========================================================
   EYEBROW
========================================================== */

.pm-section-eyebrow {
    display: flex;
    align-items: center;

    gap: 10px;

    margin-bottom: 13px;

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

.pm-section-line {
    width: 34px;
    height: 2px;

    flex: 0 0 34px;

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


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

.pm-explain-content h2 {
    max-width: 680px;

    margin: 0;

    color: var(--tdc-black, #111111);
}

.pm-explain-content h2 span {
    display: block;

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


/* ==========================================================
   COPY
========================================================== */

.pm-explain-content > p {
    max-width: 670px;

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

.pm-explain-lead {
    margin: 17px 0 0;
}

.pm-explain-lead + p {
    margin: 11px 0 0;
}


/* ==========================================================
   COMPARISON
========================================================== */

.pm-explain-comparison {
    display: grid;
    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 9px;

    margin-top: 22px;
}


/* ==========================================================
   COMPARISON CARD
========================================================== */

.pm-explain-compare {
    padding: 16px;

    border: 1px solid #e7e1dc;
    border-radius: 14px;
}

.pm-explain-basic {
    background: #faf9f7;
}

.pm-explain-performance {
    border-color: rgba(242,99,34,.18);

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


/* ==========================================================
   COMPARE TOP
========================================================== */

.pm-compare-top {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 10px;

    padding-bottom: 10px;

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

.pm-compare-top > span:first-child {
    color: #77706b;
}

.pm-explain-performance
.pm-compare-top > span:first-child {
    color: var(--tdc-orange, #f26322);
}


/* ==========================================================
   SYMBOL
========================================================== */

.pm-compare-symbol {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 27px;
    height: 27px;

    flex: 0 0 27px;

    border-radius: 50%;

    background: #ece8e5;

    color: #756e69;
}

.pm-explain-performance
.pm-compare-symbol {
    background: var(--tdc-orange, #f26322);

    color: #ffffff;
}


/* ==========================================================
   LIST
========================================================== */

.pm-explain-compare ul {
    display: grid;

    gap: 8px;

    margin: 12px 0 0;
    padding: 0;

    list-style: none;
}

.pm-explain-compare li {
    display: flex;
    align-items: center;

    gap: 8px;

    color: #625c58;
}

.pm-explain-compare li > span {
    width: 6px;
    height: 6px;

    flex: 0 0 6px;

    border-radius: 50%;

    background: #bcb4ae;
}

.pm-explain-performance
li > span {
    background: var(--tdc-orange, #f26322);
}


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

.pm-explain-message {
    display: grid;
    grid-template-columns:
        42px
        minmax(0, 1fr);

    align-items: center;

    gap: 12px;

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

    border-radius: 13px;

    background: #111111;
}

.pm-explain-message-mark {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 42px;
    height: 42px;

    border-radius: 11px;

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

    color: #ffffff;
}

.pm-explain-message > div > span {
    display: block;

    margin-bottom: 2px;

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

.pm-explain-message strong {
    display: block;

    color: #ffffff;
}


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

.pm-explain-link {
    display: inline-flex;
    align-items: center;

    gap: 8px;

    margin-top: 14px;

    text-decoration: none;

    color: #111111;

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

.pm-explain-link i {
    color: var(--tdc-orange, #f26322);
}

.pm-explain-link:hover {
    gap: 12px;

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


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

@media (max-width: 1023px) {

    .pm-explain {
        padding: 38px 0;
    }

    .pm-explain-layout {
        grid-template-columns: 1fr;

        gap: 30px;
    }

    .pm-explain-visual {
        width: 100%;
        max-width: 680px;

        min-height: 600px;
    }

    .pm-explain-content {
        max-width: 760px;
    }

}


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

@media (max-width: 767px) {

    .pm-explain {
        padding: 30px 0;
    }


    /* ======================================================
       VISUAL — NORMAL FLOW
    ====================================================== */

    .pm-explain-visual {
        display: flex;
        flex-direction: column;

        min-height: 0;

        gap: 9px;
    }

    .pm-explain-image {
        position: relative;

        inset: auto;

        width: 100%;
        height: 410px;

        border-radius: 19px;
    }

    .pm-explain-image-label {
        left: 18px;
        right: 18px;
        bottom: 20px;
    }


    /* CONVERSION */

    .pm-explain-conversion {
        position: relative;

        left: auto;
        right: auto;
        bottom: auto;

        width: 100%;
    }


    /* COMPARISON */

    .pm-explain-comparison {
        grid-template-columns: 1fr;

        gap: 7px;
    }

}


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

@media (max-width: 480px) {

    .pm-explain-image {
        height: 350px;
    }


    /* FLOW */

    .pm-explain-flow {
        grid-template-columns:
            repeat(4, minmax(0, 1fr));

        gap: 5px;
    }

    .pm-explain-flow > i {
        display: none;
    }


    /* MESSAGE */

    .pm-explain-message {
        grid-template-columns:
            38px
            minmax(0, 1fr);
    }

    .pm-explain-message-mark {
        width: 38px;
        height: 38px;
    }

}


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

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

    .pm-explain-image img,
    .pm-explain-link {
        transition: none !important;
    }

}
/* ==========================================================
   PERFORMANCE MARKETING
   SECTION 03 — PAID MARKETING SERVICES & PLATFORMS
========================================================== */

.pm-platforms {
    position: relative;
    overflow: hidden;

    padding: 50px 0;

    background: #f8f6f3;
}


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

.pm-platforms-header {
    display: grid;
    grid-template-columns:
        minmax(0, 58%)
        minmax(300px, 42%);

    align-items: end;

    gap: 55px;

    margin-bottom: 28px;
}

.pm-platforms-header h2 {
    max-width: 720px;

    margin: 0;

    color: var(--tdc-black, #111111);
}

.pm-platforms-header h2 span {
    display: block;

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

.pm-platforms-intro {
    max-width: 480px;
}

.pm-platforms-intro p {
    margin: 0;

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


/* ==========================================================
   FEATURED PLATFORMS
========================================================== */

.pm-platforms-featured {
    display: grid;
    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 12px;
}


/* ==========================================================
   FEATURE CARD
========================================================== */

.pm-platform-feature {
    position: relative;

    min-height: 530px;

    overflow: hidden;

    border-radius: 22px;

    background: #222222;
}


/* ==========================================================
   IMAGE
========================================================== */

.pm-platform-feature-image {
    position: absolute;

    inset: 0;
}

.pm-platform-feature-image img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;

    transition: transform .7s ease;
}

.pm-platform-feature:hover
.pm-platform-feature-image img {
    transform: scale(1.04);
}


/* ==========================================================
   OVERLAY
========================================================== */

.pm-platform-feature-overlay {
    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            180deg,
            rgba(17,17,17,.10) 5%,
            rgba(17,17,17,.22) 38%,
            rgba(17,17,17,.94) 100%
        );
}


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

.pm-platform-feature-top {
    position: absolute;

    z-index: 4;

    top: 18px;
    left: 18px;
    right: 18px;

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

    gap: 15px;
}


/* NUMBER */

.pm-platform-index {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 40px;
    height: 40px;

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

    background: rgba(17,17,17,.35);

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

    color: #ffffff;
}


/* LABEL */

.pm-platform-primary-label {
    padding: 7px 10px;

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

    background: rgba(17,17,17,.35);

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

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


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

.pm-platform-feature-content {
    position: absolute;

    z-index: 5;

    left: 22px;
    right: 22px;
    bottom: 22px;
}


/* ==========================================================
   PLATFORM NAME
========================================================== */

.pm-platform-name {
    display: flex;
    align-items: center;

    gap: 9px;

    margin-bottom: 10px;

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

.pm-platform-letter {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 34px;
    height: 34px;

    border-radius: 9px;

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

    color: #ffffff;
}


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

.pm-platform-feature-content h3 {
    max-width: 470px;

    margin: 0;

    color: #ffffff;
}


/* ==========================================================
   COPY
========================================================== */

.pm-platform-feature-content p {
    max-width: 510px;

    margin: 10px 0 0;

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


/* ==========================================================
   TAGS
========================================================== */

.pm-platform-tags {
    display: flex;
    flex-wrap: wrap;

    gap: 5px;

    margin-top: 13px;
}

.pm-platform-tags span {
    padding: 6px 9px;

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

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

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


/* ==========================================================
   FEATURE LINK
========================================================== */

.pm-platform-feature-link {
    display: inline-flex;
    align-items: center;

    gap: 8px;

    margin-top: 14px;

    text-decoration: none;

    color: #ffffff;

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

.pm-platform-feature-link i {
    color: var(--tdc-orange, #f26322);
}

.pm-platform-feature-link:hover {
    gap: 12px;

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


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

.pm-platforms-other {
    display: grid;
    grid-template-columns:
        minmax(280px, 34%)
        minmax(0, 66%);

    gap: 45px;

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

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

    background: #ffffff;
}


/* ==========================================================
   OTHER INTRO
========================================================== */

.pm-platforms-other-intro {
    align-self: center;

    padding-right: 20px;
}

.pm-platforms-other-intro > span {
    display: block;

    margin-bottom: 7px;

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

.pm-platforms-other-intro h3 {
    max-width: 360px;

    margin: 0;

    color: #111111;
}

.pm-platforms-other-intro p {
    max-width: 390px;

    margin: 11px 0 0;

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


/* ==========================================================
   CHANNEL LIST
========================================================== */

.pm-platforms-other-list {
    border-top: 1px solid #e8e3df;
}


/* ==========================================================
   CHANNEL ROW
========================================================== */

.pm-channel-row {
    display: grid;
    grid-template-columns:
        32px
        42px
        minmax(0, 1fr)
        auto;

    align-items: center;

    gap: 12px;

    padding: 13px 5px;

    border-bottom: 1px solid #e8e3df;

    transition:
        background .3s ease,
        padding .3s ease;
}

.pm-channel-row:hover {
    padding-left: 10px;
    padding-right: 10px;

    background: #faf8f6;
}


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

.pm-channel-number {
    color: #a59c96;
}


/* ==========================================================
   CHANNEL LOGO
========================================================== */

.pm-channel-logo {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 42px;
    height: 42px;

    border-radius: 10px;

    background: #111111;

    color: #ffffff;
}


/* ==========================================================
   CHANNEL CONTENT
========================================================== */

.pm-channel-content strong {
    display: block;

    color: #111111;
}

.pm-channel-content p {
    max-width: 500px;

    margin: 3px 0 0;

    color: #77706b;
}


/* ==========================================================
   USE
========================================================== */

.pm-channel-use {
    padding: 6px 9px;

    border-radius: 50px;

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

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


/* ==========================================================
   BOTTOM STRATEGY MESSAGE
========================================================== */

.pm-platforms-bottom {
    display: grid;
    grid-template-columns:
        52px
        minmax(0, 1fr)
        auto;

    align-items: center;

    gap: 16px;

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

    border-radius: 15px;

    background: #111111;
}


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

.pm-platforms-bottom-icon {
    display: flex;
    align-items: flex-end;
    justify-content: center;

    gap: 3px;

    width: 52px;
    height: 52px;

    padding: 11px;

    border-radius: 12px;

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

.pm-platforms-bottom-icon span {
    display: block;

    width: 6px;

    border-radius: 5px;

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

.pm-platforms-bottom-icon span:nth-child(1) {
    height: 12px;
}

.pm-platforms-bottom-icon span:nth-child(2) {
    height: 20px;
}

.pm-platforms-bottom-icon span:nth-child(3) {
    height: 29px;
}


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

.pm-platforms-bottom > div:nth-child(2) > span {
    display: block;

    margin-bottom: 3px;

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

.pm-platforms-bottom strong {
    display: block;

    max-width: 700px;

    color: #ffffff;
}


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

.pm-platforms-bottom > a {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    gap: 8px;

    min-height: 46px;

    padding: 0 17px;

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

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

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

    color: #ffffff;

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

.pm-platforms-bottom > a:hover {
    transform: translateY(-2px);

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

    color: #ffffff;
}


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

@media (max-width: 1023px) {

    .pm-platforms {
        padding: 38px 0;
    }

    .pm-platforms-header {
        grid-template-columns: 1fr;

        gap: 12px;
    }

    .pm-platforms-intro {
        max-width: 650px;
    }

    .pm-platforms-other {
        grid-template-columns: 1fr;

        gap: 20px;
    }

    .pm-platforms-other-intro {
        padding-right: 0;
    }

}


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

@media (max-width: 767px) {

    .pm-platforms {
        padding: 30px 0;
    }


    /* FEATURED */

    .pm-platforms-featured {
        grid-template-columns: 1fr;

        gap: 9px;
    }

    .pm-platform-feature {
        min-height: 500px;
    }


    /* OTHER CHANNELS */

    .pm-platforms-other {
        padding: 17px;
    }

    .pm-channel-row {
        grid-template-columns:
            35px
            minmax(0, 1fr)
            auto;

        gap: 9px;
    }

    .pm-channel-logo {
        grid-row: span 2;

        width: 35px;
        height: 35px;
    }

    .pm-channel-number {
        display: none;
    }

    .pm-channel-content {
        grid-column: 2;
    }

    .pm-channel-use {
        grid-column: 3;
        grid-row: 1;

        align-self: start;
    }


    /* BOTTOM */

    .pm-platforms-bottom {
        grid-template-columns:
            45px
            minmax(0, 1fr);

        gap: 12px;

        padding: 15px;
    }

    .pm-platforms-bottom-icon {
        width: 45px;
        height: 45px;

        padding: 9px;
    }

    .pm-platforms-bottom > a {
        grid-column: 1 / -1;

        width: 100%;
    }

}


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

@media (max-width: 480px) {

    .pm-platform-feature {
        min-height: 530px;
    }

    .pm-platform-feature-content {
        left: 17px;
        right: 17px;
        bottom: 17px;
    }

    .pm-platform-primary-label {
        display: none;
    }

    .pm-channel-row {
        grid-template-columns:
            35px
            minmax(0, 1fr);
    }

    .pm-channel-use {
        grid-column: 2;
        grid-row: auto;

        justify-self: start;
    }

}


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

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

    .pm-platform-feature-image img,
    .pm-platform-feature-link,
    .pm-channel-row,
    .pm-platforms-bottom > a {
        transition: none !important;
    }

}
/* ==========================================================
   PERFORMANCE MARKETING
   SECTION 04 — GOOGLE ADS
========================================================== */

.pm-google {
    position: relative;
    overflow: hidden;

    padding: 50px 0;

    background: #ffffff;
}


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

.pm-google-layout {
    display: grid;
    grid-template-columns:
        minmax(0, 48%)
        minmax(400px, 52%);

    align-items: center;

    gap: 60px;
}


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

.pm-google-content {
    max-width: 680px;
}


/* HEADING */

.pm-google-content h2 {
    max-width: 650px;

    margin: 0;

    color: var(--tdc-black, #111111);
}

.pm-google-content h2 span {
    display: block;

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


/* COPY */

.pm-google-content > p {
    max-width: 650px;

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

.pm-google-lead {
    margin: 17px 0 0;
}

.pm-google-lead + p {
    margin: 11px 0 0;
}


/* ==========================================================
   SEARCH INTENT VISUAL
========================================================== */

.pm-google-search {
    margin-top: 22px;
    padding: 16px;

    border: 1px solid #e5dfda;
    border-radius: 16px;

    background: #f8f6f3;
}


/* TOP */

.pm-google-search-top {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 15px;

    margin-bottom: 10px;

    color: #847c77;
}

.pm-google-search-status {
    padding: 5px 8px;

    border-radius: 50px;

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

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


/* ==========================================================
   SEARCH BOX
========================================================== */

.pm-google-search-box {
    display: grid;
    grid-template-columns:
        auto
        minmax(0, 1fr)
        auto;

    align-items: center;

    gap: 10px;

    min-height: 50px;

    padding: 5px 6px 5px 15px;

    border: 1px solid #ddd7d2;
    border-radius: 50px;

    background: #ffffff;
}

.pm-google-search-box > i {
    color: #918984;
}

.pm-google-search-box > span:nth-child(2) {
    overflow: hidden;

    white-space: nowrap;
    text-overflow: ellipsis;

    color: #5f5955;
}

.pm-google-search-button {
    display: flex;
    align-items: center;
    justify-content: center;

    min-height: 38px;

    padding: 0 16px;

    border-radius: 50px;

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

    color: #ffffff;
}


/* ==========================================================
   SEARCH FLOW
========================================================== */

.pm-google-search-flow {
    display: grid;
    grid-template-columns:
        1fr auto
        1fr auto
        1fr auto
        1fr;

    align-items: center;

    gap: 6px;

    margin-top: 10px;
}

.pm-google-search-flow > div {
    padding: 8px 5px;

    border-radius: 9px;

    background: #ffffff;

    text-align: center;
}

.pm-google-search-flow > div span {
    display: block;

    margin-bottom: 2px;

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

.pm-google-search-flow > div strong {
    display: block;

    color: #111111;
}

.pm-google-search-flow > i {
    color: #bbb3ad;
}


/* ==========================================================
   CTA
========================================================== */

.pm-google-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;

    gap: 9px;

    margin-top: 17px;
}

.pm-google-primary,
.pm-google-next {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    gap: 8px;

    min-height: 48px;

    padding: 0 18px;

    border-radius: 50px;

    text-decoration: none;

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


/* PRIMARY */

.pm-google-primary {
    background: var(--tdc-orange, #f26322);

    color: #ffffff;
}

.pm-google-primary:hover {
    transform: translateY(-2px);

    color: #ffffff;
}


/* SECONDARY */

.pm-google-next {
    border: 1px solid #ddd7d2;

    background: #ffffff;

    color: #111111;
}

.pm-google-next:hover {
    gap: 11px;

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


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

.pm-google-visual {
    position: relative;

    min-height: 650px;
}


/* ==========================================================
   IMAGE
========================================================== */

.pm-google-image {
    position: absolute;

    top: 0;
    left: 0;
    right: 35px;

    height: 410px;

    overflow: hidden;

    border-radius: 23px;

    background: #ddd8d4;
}

.pm-google-image img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;

    transition: transform .7s ease;
}

.pm-google-visual:hover
.pm-google-image img {
    transform: scale(1.035);
}


/* IMAGE OVERLAY */

.pm-google-image-overlay {
    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            180deg,
            rgba(17,17,17,.03) 25%,
            rgba(17,17,17,.72) 100%
        );
}


/* IMAGE CONTENT */

.pm-google-image-content {
    position: absolute;

    z-index: 3;

    left: 20px;
    right: 20px;
    bottom: 20px;
}

.pm-google-image-content span {
    display: block;

    margin-bottom: 4px;

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

.pm-google-image-content strong {
    display: block;

    color: #ffffff;
}


/* ==========================================================
   CAMPAIGN PANEL
========================================================== */

.pm-google-campaigns {
    position: absolute;

    z-index: 5;

    left: 45px;
    right: 0;
    bottom: 0;

    padding: 18px;

    border: 1px solid rgba(17,17,17,.08);
    border-radius: 18px;

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

    box-shadow:
        0 22px 55px rgba(17,17,17,.14);

    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}


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

.pm-google-campaigns-header {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 15px;

    padding-bottom: 11px;

    border-bottom: 1px solid #e9e4e0;
}

.pm-google-campaigns-header > div > span {
    display: block;

    margin-bottom: 2px;

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

.pm-google-campaigns-header strong {
    display: block;

    color: #111111;
}

.pm-google-campaign-count {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 38px;
    height: 38px;

    border-radius: 10px;

    background: #111111;

    color: #ffffff;
}


/* ==========================================================
   CAMPAIGN GRID
========================================================== */

.pm-google-campaign-grid {
    display: grid;
    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 6px;

    margin-top: 10px;
}


/* ==========================================================
   CAMPAIGN
========================================================== */

.pm-google-campaign {
    display: grid;
    grid-template-columns:
        29px
        minmax(0, 1fr);

    gap: 8px;

    padding: 9px;

    border-radius: 10px;

    background: #f8f6f3;

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

.pm-google-campaign:hover {
    transform: translateY(-2px);

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

.pm-google-campaign-number {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 29px;
    height: 29px;

    border-radius: 7px;

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

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

.pm-google-campaign strong {
    display: block;

    color: #111111;
}

.pm-google-campaign p {
    margin: 2px 0 0;

    color: #77706b;
}


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

.pm-google-focus {
    display: grid;
    grid-template-columns:
        minmax(260px, 30%)
        minmax(0, 70%);

    align-items: center;

    gap: 25px;

    margin-top: 25px;
    padding: 17px 20px;

    border-radius: 15px;

    background: #111111;
}


/* INTRO */

.pm-google-focus-intro > span {
    display: block;

    margin-bottom: 3px;

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

.pm-google-focus-intro strong {
    display: block;

    color: #ffffff;
}


/* ==========================================================
   FOCUS LIST
========================================================== */

.pm-google-focus-list {
    display: grid;
    grid-template-columns:
        repeat(4, minmax(0, 1fr));
}

.pm-google-focus-list > div {
    display: flex;
    align-items: center;

    gap: 7px;

    min-height: 38px;

    padding: 0 12px;

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

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

.pm-google-focus-list span {
    color: var(--tdc-orange, #f26322);
}


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

@media (max-width: 1023px) {

    .pm-google {
        padding: 38px 0;
    }

    .pm-google-layout {
        grid-template-columns: 1fr;

        gap: 30px;
    }

    .pm-google-content {
        max-width: 760px;
    }

    .pm-google-visual {
        max-width: 720px;
    }

    .pm-google-focus {
        grid-template-columns: 1fr;

        gap: 13px;
    }

}


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

@media (max-width: 767px) {

    .pm-google {
        padding: 30px 0;
    }


    /* SEARCH FLOW */

    .pm-google-search-flow {
        grid-template-columns:
            repeat(4, minmax(0, 1fr));
    }

    .pm-google-search-flow > i {
        display: none;
    }


    /* CTA */

    .pm-google-actions {
        align-items: stretch;
    }

    .pm-google-primary,
    .pm-google-next {
        width: 100%;
    }


    /* ======================================================
       VISUAL — NORMAL FLOW
    ====================================================== */

    .pm-google-visual {
        display: flex;
        flex-direction: column;

        min-height: 0;

        gap: 9px;
    }

    .pm-google-image {
        position: relative;

        top: auto;
        left: auto;
        right: auto;

        width: 100%;
        height: 410px;
    }

    .pm-google-campaigns {
        position: relative;

        left: auto;
        right: auto;
        bottom: auto;

        width: 100%;
    }


    /* FOCUS */

    .pm-google-focus-list {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

    .pm-google-focus-list > div {
        padding: 8px 10px;

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

}


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

@media (max-width: 480px) {

    .pm-google-search-box {
        grid-template-columns:
            auto
            minmax(0, 1fr);

        border-radius: 12px;
    }

    .pm-google-search-button {
        grid-column: 1 / -1;

        width: 100%;
    }


    .pm-google-image {
        height: 350px;
    }


    /* CAMPAIGNS */

    .pm-google-campaign-grid {
        grid-template-columns: 1fr;
    }


    /* FOCUS */

    .pm-google-focus-list {
        grid-template-columns: 1fr;
    }

}


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

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

    .pm-google-image img,
    .pm-google-campaign,
    .pm-google-primary,
    .pm-google-next {
        transition: none !important;
    }

}
/* ==========================================================
   PERFORMANCE MARKETING
   SECTION 05 — META ADS
========================================================== */

.pm-meta {
    position: relative;
    overflow: hidden;

    padding: 50px 0;

    background: #f8f6f3;
}


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

.pm-meta-header {
    display: grid;
    grid-template-columns:
        minmax(0, 60%)
        minmax(300px, 40%);

    align-items: end;

    gap: 55px;

    margin-bottom: 28px;
}


.pm-meta-header h2 {
    max-width: 760px;

    margin: 0;

    color: var(--tdc-black, #111111);
}


.pm-meta-header h2 span {
    display: block;

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


.pm-meta-header-copy {
    max-width: 480px;
}


.pm-meta-header-copy p {
    margin: 0;

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


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

.pm-meta-layout {
    display: grid;
    grid-template-columns:
        minmax(400px, 47%)
        minmax(0, 53%);

    align-items: center;

    gap: 60px;
}


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

.pm-meta-visual {
    position: relative;

    min-height: 650px;
}


/* ==========================================================
   IMAGE
========================================================== */

.pm-meta-image {
    position: absolute;

    inset: 0 45px 80px 0;

    overflow: hidden;

    border-radius: 24px;

    background: #ddd8d4;

    box-shadow:
        0 22px 55px rgba(17,17,17,.10);
}


.pm-meta-image img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;

    transition: transform .7s ease;
}


.pm-meta-visual:hover
.pm-meta-image img {
    transform: scale(1.035);
}


/* OVERLAY */

.pm-meta-image-overlay {
    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            180deg,
            rgba(17,17,17,.02) 25%,
            rgba(17,17,17,.10) 55%,
            rgba(17,17,17,.78) 100%
        );
}


/* ==========================================================
   IMAGE CAPTION
========================================================== */

.pm-meta-image-caption {
    position: absolute;

    z-index: 3;

    left: 22px;
    right: 22px;
    bottom: 24px;
}


.pm-meta-image-caption span {
    display: block;

    margin-bottom: 5px;

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


.pm-meta-image-caption strong {
    display: block;

    max-width: 400px;

    color: #ffffff;
}


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

.pm-meta-audience-card {
    position: absolute;

    z-index: 5;

    left: 40px;
    right: 0;
    bottom: 0;

    padding: 17px;

    border: 1px solid rgba(17,17,17,.08);
    border-radius: 18px;

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

    box-shadow:
        0 20px 50px rgba(17,17,17,.14);

    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}


/* ==========================================================
   AUDIENCE TOP
========================================================== */

.pm-meta-audience-top {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 15px;

    padding-bottom: 11px;

    border-bottom: 1px solid #e8e2de;
}


.pm-meta-audience-top > div > span {
    display: block;

    margin-bottom: 2px;

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


.pm-meta-audience-top strong {
    display: block;

    color: #111111;
}


.pm-meta-audience-status {
    padding: 5px 8px;

    border-radius: 50px;

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

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


/* ==========================================================
   AUDIENCE LIST
========================================================== */

.pm-meta-audience-list {
    display: grid;
    grid-template-columns:
        repeat(3, minmax(0, 1fr));

    gap: 6px;

    margin-top: 10px;
}


.pm-meta-audience-list > div {
    display: flex;
    align-items: center;

    gap: 8px;

    padding: 9px;

    border-radius: 10px;

    background: #f8f6f3;
}


.pm-meta-audience-mark {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 29px;
    height: 29px;

    flex: 0 0 29px;

    border-radius: 8px;

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

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


.pm-meta-audience-list strong,
.pm-meta-audience-list > div > div > span {
    display: block;
}


.pm-meta-audience-list strong {
    color: #111111;
}


.pm-meta-audience-list > div > div > span {
    margin-top: 2px;

    color: #817974;
}


/* ==========================================================
   RIGHT CONTENT
========================================================== */

.pm-meta-content {
    max-width: 690px;
}


.pm-meta-content-label {
    display: block;

    margin-bottom: 7px;

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


.pm-meta-content h3 {
    max-width: 650px;

    margin: 0;

    color: #111111;
}


.pm-meta-content > p {
    max-width: 660px;

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


.pm-meta-content h3 + p {
    margin: 13px 0 0;
}


.pm-meta-content > p + p {
    margin: 9px 0 0;
}


/* ==========================================================
   CAMPAIGN GRID
========================================================== */

.pm-meta-campaigns {
    display: grid;
    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 8px;

    margin-top: 20px;
}


/* ==========================================================
   CAMPAIGN CARD
========================================================== */

.pm-meta-campaign {
    padding: 15px;

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

    background: #ffffff;

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


.pm-meta-campaign:hover {
    transform: translateY(-3px);

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

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


/* ==========================================================
   CAMPAIGN TOP
========================================================== */

.pm-meta-campaign-top {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 10px;

    margin-bottom: 10px;
}


.pm-meta-campaign-top span:first-child {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 29px;
    height: 29px;

    border-radius: 8px;

    background: #111111;

    color: #ffffff;
}


.pm-meta-campaign-top span:last-child {
    color: var(--tdc-orange, #f26322);
}


.pm-meta-campaign > strong {
    display: block;

    color: #111111;
}


.pm-meta-campaign p {
    margin: 5px 0 0;

    color: #77706b;
}


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

.pm-meta-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;

    gap: 15px;

    margin-top: 17px;
}


.pm-meta-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    gap: 8px;

    min-height: 48px;

    padding: 0 18px;

    border-radius: 50px;

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

    text-decoration: none;

    color: #ffffff;

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


.pm-meta-primary:hover {
    transform: translateY(-2px);

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

    color: #ffffff;
}


/* ==========================================================
   PLATFORM NOTE
========================================================== */

.pm-meta-note {
    display: flex;
    align-items: center;

    gap: 8px;

    color: #6f6864;
}


.pm-meta-note > span {
    width: 5px;
    height: 5px;

    border-radius: 50%;

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


/* ==========================================================
   META EQUATION
========================================================== */

.pm-meta-formula {
    display: grid;
    grid-template-columns:
        minmax(250px, 27%)
        minmax(0, 73%);

    align-items: center;

    gap: 25px;

    margin-top: 25px;
    padding: 20px;

    border-radius: 17px;

    background: #111111;
}


/* ==========================================================
   FORMULA INTRO
========================================================== */

.pm-meta-formula-intro > span {
    display: block;

    margin-bottom: 4px;

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


.pm-meta-formula-intro strong {
    display: block;

    max-width: 300px;

    color: #ffffff;
}


/* ==========================================================
   FORMULA FLOW
========================================================== */

.pm-meta-formula-flow {
    display: grid;
    grid-template-columns:
        1fr
        auto
        1fr
        auto
        1fr
        auto
        1.25fr;

    align-items: stretch;

    gap: 6px;
}


.pm-meta-formula-flow > div {
    padding: 11px;

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

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


.pm-meta-formula-flow > div > span {
    display: block;

    margin-bottom: 4px;

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


.pm-meta-formula-flow strong {
    display: block;

    color: #ffffff;
}


.pm-meta-formula-flow p {
    margin: 3px 0 0;

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


/* ==========================================================
   OPERATORS
========================================================== */

.pm-meta-plus,
.pm-meta-equal {
    display: flex;
    align-items: center;
    justify-content: center;

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


/* RESULT */

.pm-meta-formula-result {
    background: rgba(242,99,34,.12) !important;

    border-color: rgba(242,99,34,.20) !important;
}


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

@media (max-width: 1023px) {

    .pm-meta {
        padding: 38px 0;
    }


    .pm-meta-header {
        grid-template-columns: 1fr;

        gap: 12px;
    }


    .pm-meta-header-copy {
        max-width: 650px;
    }


    .pm-meta-layout {
        grid-template-columns: 1fr;

        gap: 30px;
    }


    .pm-meta-visual {
        max-width: 720px;
    }


    .pm-meta-content {
        max-width: 760px;
    }


    .pm-meta-formula {
        grid-template-columns: 1fr;

        gap: 14px;
    }

}


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

@media (max-width: 767px) {

    .pm-meta {
        padding: 30px 0;
    }


    /* ======================================================
       VISUAL — NORMAL FLOW TO PREVENT OVERLAP
    ====================================================== */

    .pm-meta-visual {
        display: flex;
        flex-direction: column;

        min-height: 0;

        gap: 9px;
    }


    .pm-meta-image {
        position: relative;

        inset: auto;

        width: 100%;
        height: 410px;

        border-radius: 20px;
    }


    .pm-meta-audience-card {
        position: relative;

        left: auto;
        right: auto;
        bottom: auto;

        width: 100%;
    }


    /* AUDIENCE */

    .pm-meta-audience-list {
        grid-template-columns: 1fr;
    }


    /* CAMPAIGNS */

    .pm-meta-campaigns {
        grid-template-columns: 1fr;
    }


    /* FORMULA */

    .pm-meta-formula-flow {
        grid-template-columns: 1fr;
    }


    .pm-meta-plus,
    .pm-meta-equal {
        min-height: 24px;
    }


    /* CTA */

    .pm-meta-actions {
        align-items: stretch;
    }


    .pm-meta-primary {
        width: 100%;
    }

}


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

@media (max-width: 480px) {

    .pm-meta-image {
        height: 350px;
    }


    .pm-meta-audience-top {
        align-items: flex-start;
    }


    .pm-meta-formula {
        padding: 16px;
    }

}


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

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

    .pm-meta-image img,
    .pm-meta-campaign,
    .pm-meta-primary {
        transition: none !important;
    }

}
/* ==========================================================
   PERFORMANCE MARKETING
   SECTION 06 — WHY CHOOSE THE DIGITAL CAFE
========================================================== */

.pm-why {
    position: relative;
    overflow: hidden;

    padding: 50px 0;

    background: #ffffff;
}


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

.pm-why-header {
    display: grid;
    grid-template-columns:
        minmax(0, 60%)
        minmax(300px, 40%);

    align-items: end;

    gap: 55px;

    margin-bottom: 28px;
}


.pm-why-header h2 {
    max-width: 760px;

    margin: 0;

    color: var(--tdc-black, #111111);
}


.pm-why-header h2 span {
    display: block;

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


.pm-why-header-copy {
    max-width: 480px;
}


.pm-why-header-copy p {
    margin: 0;

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


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

.pm-why-layout {
    display: grid;
    grid-template-columns:
        minmax(390px, 42%)
        minmax(0, 58%);

    align-items: center;

    gap: 55px;
}


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

.pm-why-visual {
    position: relative;

    min-height: 650px;
}


/* ==========================================================
   IMAGE
========================================================== */

.pm-why-image {
    position: absolute;

    inset: 0 35px 65px 0;

    overflow: hidden;

    border-radius: 24px;

    background: #ded9d5;

    box-shadow:
        0 22px 55px rgba(17,17,17,.10);
}


.pm-why-image img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;

    transition: transform .7s ease;
}


.pm-why-visual:hover
.pm-why-image img {
    transform: scale(1.035);
}


/* OVERLAY */

.pm-why-image-overlay {
    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            180deg,
            rgba(17,17,17,.02) 25%,
            rgba(17,17,17,.10) 55%,
            rgba(17,17,17,.80) 100%
        );
}


/* ==========================================================
   IMAGE CONTENT
========================================================== */

.pm-why-image-content {
    position: absolute;

    z-index: 3;

    left: 22px;
    right: 22px;
    bottom: 95px;
}


.pm-why-image-content span {
    display: block;

    margin-bottom: 5px;

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


.pm-why-image-content strong {
    display: block;

    max-width: 390px;

    color: #ffffff;
}


/* ==========================================================
   FLOATING STATEMENT
========================================================== */

.pm-why-statement {
    position: absolute;

    z-index: 5;

    left: 35px;
    right: 0;
    bottom: 0;

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

    align-items: center;

    gap: 12px;

    padding: 16px;

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

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

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


.pm-why-statement-mark {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 45px;
    height: 45px;

    border-radius: 11px;

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

    color: #ffffff;
}


.pm-why-statement > div > span {
    display: block;

    margin-bottom: 3px;

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


.pm-why-statement strong {
    display: block;

    color: #111111;
}


/* ==========================================================
   REASONS
========================================================== */

.pm-why-reasons {
    display: grid;
    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 8px;
}


/* ==========================================================
   REASON CARD
========================================================== */

.pm-why-reason {
    display: grid;
    grid-template-columns:
        42px
        minmax(0, 1fr);

    gap: 12px;

    padding: 16px;

    border: 1px solid #e5dfda;
    border-radius: 14px;

    background: #faf9f7;

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


.pm-why-reason:hover {
    transform: translateY(-3px);

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

    background: #ffffff;
}


/* NUMBER */

.pm-why-reason-number {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 42px;
    height: 42px;

    border-radius: 10px;

    background: #111111;

    color: #ffffff;

    transition:
        background .3s ease;
}


.pm-why-reason:hover
.pm-why-reason-number {
    background: var(--tdc-orange, #f26322);
}


/* LABEL */

.pm-why-reason > div:nth-child(2) > span {
    display: block;

    margin-bottom: 4px;

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


/* HEADING */

.pm-why-reason h3 {
    margin: 0;

    color: #111111;
}


/* COPY */

.pm-why-reason p {
    margin: 6px 0 0;

    color: #756e69;
}


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

.pm-why-bottom {
    display: grid;
    grid-template-columns:
        minmax(230px, 26%)
        minmax(0, 1fr)
        auto;

    align-items: center;

    gap: 22px;

    margin-top: 25px;
    padding: 20px;

    border-radius: 17px;

    background: #111111;
}


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

.pm-why-bottom-intro > span {
    display: block;

    margin-bottom: 3px;

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


.pm-why-bottom-intro strong {
    display: block;

    color: #ffffff;
}


/* ==========================================================
   SYSTEM FLOW
========================================================== */

.pm-why-system {
    display: grid;
    grid-template-columns:
        1fr auto
        1fr auto
        1fr auto
        1fr auto
        1fr;

    align-items: center;

    gap: 5px;
}


.pm-why-system > div {
    padding: 9px 6px;

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

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

    text-align: center;
}


.pm-why-system span {
    display: block;

    margin-bottom: 2px;

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


.pm-why-system strong {
    display: block;

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


.pm-why-system > i {
    color: rgba(255,255,255,.28);
}


/* ==========================================================
   CTA
========================================================== */

.pm-why-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    gap: 8px;

    min-height: 47px;

    padding: 0 17px;

    border-radius: 50px;

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

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

    color: #ffffff;

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


.pm-why-cta:hover {
    transform: translateY(-2px);

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

    color: #ffffff;
}


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

@media (max-width: 1023px) {

    .pm-why {
        padding: 38px 0;
    }


    .pm-why-header {
        grid-template-columns: 1fr;

        gap: 12px;
    }


    .pm-why-header-copy {
        max-width: 650px;
    }


    .pm-why-layout {
        grid-template-columns: 1fr;

        gap: 30px;
    }


    .pm-why-visual {
        max-width: 700px;
    }


    .pm-why-bottom {
        grid-template-columns: 1fr;

        gap: 15px;
    }


    .pm-why-cta {
        justify-self: start;
    }

}


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

@media (max-width: 767px) {

    .pm-why {
        padding: 30px 0;
    }


    /* ======================================================
       VISUAL — NORMAL FLOW TO PREVENT OVERLAP
    ====================================================== */

    .pm-why-visual {
        display: flex;
        flex-direction: column;

        min-height: 0;

        gap: 9px;
    }


    .pm-why-image {
        position: relative;

        inset: auto;

        width: 100%;
        height: 410px;

        border-radius: 20px;
    }


    .pm-why-image-content {
        bottom: 20px;
    }


    .pm-why-statement {
        position: relative;

        left: auto;
        right: auto;
        bottom: auto;

        width: 100%;
    }


    /* REASONS */

    .pm-why-reasons {
        grid-template-columns: 1fr;
    }


    /* SYSTEM */

    .pm-why-system {
        grid-template-columns:
            repeat(5, minmax(0, 1fr));
    }


    .pm-why-system > i {
        display: none;
    }


    /* CTA */

    .pm-why-cta {
        width: 100%;
    }

}


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

@media (max-width: 480px) {

    .pm-why-image {
        height: 350px;
    }


    .pm-why-statement {
        grid-template-columns:
            40px
            minmax(0, 1fr);
    }


    .pm-why-statement-mark {
        width: 40px;
        height: 40px;
    }


    .pm-why-system {
        grid-template-columns: 1fr;

        gap: 5px;
    }


    .pm-why-system > div {
        display: flex;
        align-items: center;

        gap: 8px;

        text-align: left;
    }


    .pm-why-system span {
        margin-bottom: 0;
    }

}


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

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

    .pm-why-image img,
    .pm-why-reason,
    .pm-why-reason-number,
    .pm-why-cta {
        transition: none !important;
    }

}
/* ==========================================================
   PERFORMANCE MARKETING
   SECTION 07 — WHO WE HELP
========================================================== */

.pm-industries {
    position: relative;
    overflow: hidden;

    padding: 50px 0;

    background: #f8f6f3;
}


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

.pm-industries-header {
    display: grid;
    grid-template-columns:
        minmax(0, 60%)
        minmax(300px, 40%);

    align-items: end;

    gap: 55px;

    margin-bottom: 28px;
}


.pm-industries-header h2 {
    max-width: 760px;

    margin: 0;

    color: var(--tdc-black, #111111);
}


.pm-industries-header h2 span {
    display: block;

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


.pm-industries-header-copy {
    max-width: 480px;
}


.pm-industries-header-copy p {
    margin: 0;

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


/* ==========================================================
   INDUSTRY GRID
========================================================== */

.pm-industries-grid {
    display: grid;
    grid-template-columns:
        repeat(12, minmax(0, 1fr));

    gap: 10px;
}


/* ==========================================================
   BASE CARD
========================================================== */

.pm-industry-card {
    position: relative;

    overflow: hidden;

    min-height: 320px;

    border: 1px solid #e5dfda;
    border-radius: 18px;

    background: #ffffff;

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


.pm-industry-card:hover {
    transform: translateY(-3px);

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

    box-shadow:
        0 15px 35px rgba(17,17,17,.06);
}


/* ==========================================================
   GRID SIZING
========================================================== */

.pm-industry-featured {
    grid-column: span 7;

    min-height: 450px;
}


.pm-industry-standard {
    grid-column: span 5;
}


.pm-industry-dark {
    grid-column: span 4;
}


.pm-industry-b2b {
    grid-column: span 4;
}


.pm-industry-accent {
    grid-column: span 4;
}


/* ==========================================================
   FEATURED — REAL ESTATE
========================================================== */

.pm-industry-featured {
    background: #222222;
}


.pm-industry-image {
    position: absolute;

    inset: 0;
}


.pm-industry-image img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;

    transition: transform .7s ease;
}


.pm-industry-featured:hover
.pm-industry-image img {
    transform: scale(1.035);
}


/* OVERLAY */

.pm-industry-overlay {
    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            180deg,
            rgba(17,17,17,.08) 10%,
            rgba(17,17,17,.24) 42%,
            rgba(17,17,17,.92) 100%
        );
}


/* ==========================================================
   FEATURED TOP
========================================================== */

.pm-industry-top {
    position: absolute;

    z-index: 4;

    top: 18px;
    left: 18px;
    right: 18px;

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

    gap: 15px;
}


.pm-industry-top span {
    padding: 7px 10px;

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

    background: rgba(17,17,17,.30);

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

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


/* ==========================================================
   FEATURED CONTENT
========================================================== */

.pm-industry-featured-content {
    position: absolute;

    z-index: 4;

    left: 22px;
    right: 22px;
    bottom: 22px;
}


.pm-industry-featured-content > span {
    display: block;

    margin-bottom: 5px;

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


.pm-industry-featured-content h3 {
    max-width: 520px;

    margin: 0;

    color: #ffffff;
}


.pm-industry-featured-content p {
    max-width: 570px;

    margin: 9px 0 0;

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


/* CHANNELS */

.pm-industry-channels {
    display: flex;
    flex-wrap: wrap;

    gap: 5px;

    margin-top: 12px;
}


.pm-industry-channels span {
    padding: 6px 9px;

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

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

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


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

.pm-industry-standard,
.pm-industry-dark,
.pm-industry-accent {
    padding: 17px;
}


/* ==========================================================
   CARD TOP
========================================================== */

.pm-industry-card-top {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 10px;

    margin-bottom: 12px;
}


.pm-industry-number {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 34px;
    height: 34px;

    border-radius: 9px;

    background: #111111;

    color: #ffffff;
}


.pm-industry-type {
    color: var(--tdc-orange, #f26322);
}


/* ==========================================================
   MINI IMAGE
========================================================== */

.pm-industry-mini-image {
    height: 135px;

    margin-bottom: 14px;

    overflow: hidden;

    border-radius: 12px;

    background: #e4dfdb;
}


.pm-industry-mini-image img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;

    transition: transform .6s ease;
}


.pm-industry-card:hover
.pm-industry-mini-image img {
    transform: scale(1.04);
}


/* ==========================================================
   CARD COPY
========================================================== */

.pm-industry-standard h3,
.pm-industry-dark h3,
.pm-industry-accent h3 {
    margin: 0;

    color: #111111;
}


.pm-industry-standard > p,
.pm-industry-dark > p,
.pm-industry-accent > p {
    margin: 7px 0 0;

    color: #756e69;
}


/* ==========================================================
   GOAL
========================================================== */

.pm-industry-goal {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 10px;

    margin-top: 14px;
    padding-top: 11px;

    border-top: 1px solid #ebe6e2;
}


.pm-industry-goal span {
    color: #958d87;
}


.pm-industry-goal strong {
    color: var(--tdc-orange, #f26322);
}


/* ==========================================================
   DARK CARD — ECOMMERCE
========================================================== */

.pm-industry-dark {
    background: #111111;

    border-color: #111111;
}


.pm-industry-dark
.pm-industry-number {
    background: var(--tdc-orange, #f26322);
}


.pm-industry-dark h3 {
    color: #ffffff;
}


.pm-industry-dark > p {
    color: rgba(255,255,255,.58);
}


/* ==========================================================
   ECOMMERCE FLOW
========================================================== */

.pm-industry-commerce-flow {
    display: grid;
    grid-template-columns:
        1fr auto
        1fr auto
        1fr;

    align-items: center;

    gap: 5px;

    margin-top: 18px;
}


.pm-industry-commerce-flow > div {
    padding: 9px 5px;

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

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

    text-align: center;
}


.pm-industry-commerce-flow span {
    display: block;

    margin-bottom: 2px;

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


.pm-industry-commerce-flow strong {
    display: block;

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


.pm-industry-commerce-flow i {
    color: rgba(255,255,255,.28);
}


/* DARK GOAL */

.pm-industry-goal-dark {
    border-color: rgba(255,255,255,.09);
}


.pm-industry-goal-dark span {
    color: rgba(255,255,255,.40);
}


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

.pm-industry-b2b-visual {
    display: grid;
    grid-template-columns:
        1fr auto
        1fr auto
        1fr;

    align-items: center;

    gap: 5px;

    margin: 18px 0;

    padding: 14px;

    border-radius: 12px;

    background: #f8f6f3;
}


.pm-industry-b2b-visual span {
    padding: 8px 5px;

    border-radius: 7px;

    background: #ffffff;

    text-align: center;

    color: #625c58;
}


.pm-industry-b2b-visual i {
    color: var(--tdc-orange, #f26322);
}


/* ==========================================================
   STARTUP ACCENT CARD
========================================================== */

.pm-industry-accent {
    border-color: rgba(242,99,34,.18);

    background:
        linear-gradient(
            145deg,
            rgba(242,99,34,.10),
            rgba(242,99,34,.025)
        ),
        #ffffff;
}


.pm-industry-accent
.pm-industry-number {
    background: var(--tdc-orange, #f26322);
}


/* ==========================================================
   STARTUP BARS
========================================================== */

.pm-industry-startup-bars {
    display: flex;
    align-items: flex-end;

    gap: 6px;

    height: 75px;

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

    border-radius: 11px;

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


.pm-industry-startup-bars span {
    flex: 1;

    border-radius: 5px 5px 2px 2px;

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


.pm-industry-startup-bars span:nth-child(1) {
    height: 20%;
    opacity: .30;
}


.pm-industry-startup-bars span:nth-child(2) {
    height: 35%;
    opacity: .45;
}


.pm-industry-startup-bars span:nth-child(3) {
    height: 48%;
    opacity: .60;
}


.pm-industry-startup-bars span:nth-child(4) {
    height: 68%;
    opacity: .78;
}


.pm-industry-startup-bars span:nth-child(5) {
    height: 90%;
}


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

.pm-industries-bottom {
    display: grid;
    grid-template-columns:
        45px
        minmax(0, 1fr)
        auto;

    align-items: center;

    gap: 15px;

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

    border: 1px solid #e3ddd8;
    border-radius: 15px;

    background: #ffffff;
}


/* MARK */

.pm-industries-bottom-mark {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 45px;
    height: 45px;

    border-radius: 11px;

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


.pm-industries-bottom-mark span {
    width: 12px;
    height: 12px;

    border: 3px solid var(--tdc-orange, #f26322);
    border-radius: 50%;

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


/* COPY */

.pm-industries-bottom > div:nth-child(2) > span {
    display: block;

    margin-bottom: 2px;

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


.pm-industries-bottom strong {
    display: block;

    color: #111111;
}


.pm-industries-bottom p {
    margin: 3px 0 0;

    color: #77706b;
}


/* CTA */

.pm-industries-bottom > a {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    gap: 8px;

    min-height: 46px;

    padding: 0 17px;

    border-radius: 50px;

    background: #111111;

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

    color: #ffffff;

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


.pm-industries-bottom > a:hover {
    transform: translateY(-2px);

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

    color: #ffffff;
}


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

@media (max-width: 1023px) {

    .pm-industries {
        padding: 38px 0;
    }


    .pm-industries-header {
        grid-template-columns: 1fr;

        gap: 12px;
    }


    .pm-industries-header-copy {
        max-width: 650px;
    }


    .pm-industry-featured {
        grid-column: span 12;
    }


    .pm-industry-standard,
    .pm-industry-dark,
    .pm-industry-b2b,
    .pm-industry-accent {
        grid-column: span 6;
    }


    .pm-industries-bottom {
        grid-template-columns:
            45px
            minmax(0, 1fr);
    }


    .pm-industries-bottom > a {
        grid-column: 1 / -1;

        width: 100%;
    }

}


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

@media (max-width: 767px) {

    .pm-industries {
        padding: 30px 0;
    }


    .pm-industries-grid {
        grid-template-columns: 1fr;

        gap: 8px;
    }


    .pm-industry-featured,
    .pm-industry-standard,
    .pm-industry-dark,
    .pm-industry-b2b,
    .pm-industry-accent {
        grid-column: auto;
    }


    .pm-industry-featured {
        min-height: 470px;
    }


    .pm-industry-card {
        min-height: auto;
    }


    .pm-industries-bottom {
        padding: 15px;
    }

}


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

@media (max-width: 480px) {

    .pm-industry-featured {
        min-height: 500px;
    }


    .pm-industry-commerce-flow {
        grid-template-columns:
            repeat(3, minmax(0, 1fr));
    }


    .pm-industry-commerce-flow i {
        display: none;
    }


    .pm-industry-b2b-visual {
        grid-template-columns: 1fr;

        gap: 5px;
    }


    .pm-industry-b2b-visual i {
        transform: rotate(90deg);

        justify-self: center;
    }


    .pm-industries-bottom {
        grid-template-columns: 1fr;
    }


    .pm-industries-bottom-mark {
        width: 40px;
        height: 40px;
    }

}


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

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

    .pm-industry-card,
    .pm-industry-image img,
    .pm-industry-mini-image img,
    .pm-industries-bottom > a {
        transition: none !important;
    }

}
/* ==========================================================
   PERFORMANCE MARKETING
   SECTION 08 — FAQ
========================================================== */

.pm-faq {
    position: relative;
    overflow: hidden;

    padding: 50px 0;

    background: #ffffff;
}


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

.pm-faq-layout {
    display: grid;
    grid-template-columns:
        minmax(320px, 34%)
        minmax(0, 66%);

    align-items: start;

    gap: 65px;
}


/* ==========================================================
   LEFT INTRO
========================================================== */

.pm-faq-intro {
    position: sticky;

    top: 110px;
}


.pm-faq-intro h2 {
    max-width: 430px;

    margin: 0;

    color: var(--tdc-black, #111111);
}


.pm-faq-intro h2 span {
    display: block;

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


.pm-faq-intro > p {
    max-width: 430px;

    margin: 15px 0 0;

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


/* ==========================================================
   HELP BOX
========================================================== */

.pm-faq-help {
    position: relative;

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

    overflow: hidden;

    border-radius: 17px;

    background: #111111;
}


/* ACCENT */

.pm-faq-help::before {
    content: "";

    position: absolute;

    width: 100px;
    height: 100px;

    top: -55px;
    right: -40px;

    border: 18px solid rgba(242,99,34,.16);
    border-radius: 50%;
}


/* LABEL */

.pm-faq-help-label {
    position: relative;

    display: block;

    margin-bottom: 6px;

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


/* HEADING */

.pm-faq-help strong {
    position: relative;

    display: block;

    max-width: 340px;

    color: #ffffff;
}


/* COPY */

.pm-faq-help p {
    position: relative;

    margin: 8px 0 0;

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


/* CTA */

.pm-faq-help a {
    position: relative;

    display: inline-flex;
    align-items: center;

    gap: 8px;

    margin-top: 14px;

    text-decoration: none;

    color: #ffffff;

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


.pm-faq-help a i {
    color: var(--tdc-orange, #f26322);
}


.pm-faq-help a:hover {
    gap: 12px;

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


/* ==========================================================
   FAQ LIST
========================================================== */

.pm-faq-list {
    border-top: 1px solid #dfd9d4;
}


/* ==========================================================
   FAQ ITEM
========================================================== */

.pm-faq-item {
    border-bottom: 1px solid #dfd9d4;

    transition:
        background .3s ease;
}


.pm-faq-item.active {
    background: #faf8f6;
}


/* ==========================================================
   QUESTION
========================================================== */

.pm-faq-question {
    display: grid;
    grid-template-columns:
        42px
        minmax(0, 1fr)
        40px;

    align-items: center;

    gap: 13px;

    width: 100%;

    padding: 17px 10px;

    border: 0;

    background: transparent;

    text-align: left;

    cursor: pointer;

    color: #111111;
}


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

.pm-faq-number {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 38px;
    height: 38px;

    border-radius: 9px;

    background: #f0ece9;

    color: #837b76;

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


.pm-faq-item.active
.pm-faq-number {
    background: var(--tdc-orange, #f26322);

    color: #ffffff;
}


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

.pm-faq-question-text {
    color: #111111;
}


/* ==========================================================
   TOGGLE
========================================================== */

.pm-faq-toggle {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 38px;
    height: 38px;

    border: 1px solid #ddd7d2;
    border-radius: 50%;

    background: #ffffff;

    color: #111111;

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


.pm-faq-item.active
.pm-faq-toggle {
    border-color: var(--tdc-orange, #f26322);

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

    color: #ffffff;
}


/* ==========================================================
   ANSWER
========================================================== */

.pm-faq-answer {
    display: grid;

    grid-template-rows: 0fr;

    overflow: hidden;

    transition:
        grid-template-rows .35s ease;
}


.pm-faq-item.active
.pm-faq-answer {
    grid-template-rows: 1fr;
}


.pm-faq-answer-inner {
    min-height: 0;
}


.pm-faq-answer-inner p {
    max-width: 720px;

    margin: 0;

    padding:
        0
        60px
        18px
        65px;

    color: #6f6864;
}


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

.pm-faq-item:not(.active):hover {
    background: #fcfbfa;
}


.pm-faq-item:not(.active):hover
.pm-faq-number {
    background: rgba(242,99,34,.09);

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


.pm-faq-item:not(.active):hover
.pm-faq-toggle {
    border-color: rgba(242,99,34,.30);

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


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

@media (max-width: 1023px) {

    .pm-faq {
        padding: 38px 0;
    }


    .pm-faq-layout {
        grid-template-columns:
            minmax(270px, 34%)
            minmax(0, 66%);

        gap: 35px;
    }


    .pm-faq-intro {
        top: 90px;
    }

}


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

@media (max-width: 767px) {

    .pm-faq {
        padding: 30px 0;
    }


    .pm-faq-layout {
        grid-template-columns: 1fr;

        gap: 25px;
    }


    .pm-faq-intro {
        position: relative;

        top: auto;
    }


    .pm-faq-intro h2,
    .pm-faq-intro > p {
        max-width: 100%;
    }


    /* QUESTION */

    .pm-faq-question {
        grid-template-columns:
            36px
            minmax(0, 1fr)
            36px;

        gap: 9px;

        padding:
            14px
            5px;
    }


    .pm-faq-number,
    .pm-faq-toggle {
        width: 34px;
        height: 34px;
    }


    /* ANSWER */

    .pm-faq-answer-inner p {
        padding:
            0
            42px
            15px
            50px;
    }

}


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

@media (max-width: 480px) {

    .pm-faq-question {
        grid-template-columns:
            30px
            minmax(0, 1fr)
            32px;
    }


    .pm-faq-number {
        width: 30px;
        height: 30px;

        border-radius: 7px;
    }


    .pm-faq-toggle {
        width: 32px;
        height: 32px;
    }


    .pm-faq-answer-inner p {
        padding:
            0
            35px
            15px
            39px;
    }


    .pm-faq-help {
        padding: 17px;
    }

}


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

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

    .pm-faq-answer,
    .pm-faq-number,
    .pm-faq-toggle,
    .pm-faq-help a {
        transition: none !important;
    }

}
/* ==========================================================
   PERFORMANCE MARKETING
   SECTION 09 — FINAL CTA
========================================================== */

.pm-final {
    position: relative;

    padding: 50px 0;

    background: #ffffff;
}


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

.pm-final-wrap {
    position: relative;

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

    align-items: center;

    gap: 50px;

    min-height: 560px;

    padding: 55px;

    overflow: hidden;

    border-radius: 26px;

    background: #111111;
}


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

.pm-final-bg {
    position: absolute;

    inset: 0;
}


.pm-final-bg img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;
    object-position: center;

    opacity: .32;

    transition: transform .8s ease;
}


.pm-final-wrap:hover
.pm-final-bg img {
    transform: scale(1.025);
}


/* ==========================================================
   OVERLAY
========================================================== */

.pm-final-overlay {
    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            90deg,
            rgba(17,17,17,.98) 0%,
            rgba(17,17,17,.94) 38%,
            rgba(17,17,17,.76) 68%,
            rgba(17,17,17,.70) 100%
        );
}


/* ==========================================================
   DECORATIVE SHAPES
========================================================== */

.pm-final-shape {
    position: absolute;

    pointer-events: none;

    border-radius: 50%;
}


.pm-final-shape-one {
    width: 280px;
    height: 280px;

    top: -170px;
    left: 35%;

    border: 45px solid rgba(242,99,34,.08);
}


.pm-final-shape-two {
    width: 170px;
    height: 170px;

    right: -85px;
    bottom: -75px;

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


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

.pm-final-content {
    position: relative;

    z-index: 4;

    max-width: 700px;
}


/* ==========================================================
   EYEBROW
========================================================== */

.pm-final-eyebrow {
    display: flex;
    align-items: center;

    gap: 10px;

    margin-bottom: 14px;

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


.pm-final-eyebrow > span:first-child {
    width: 35px;
    height: 2px;

    flex: 0 0 35px;

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


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

.pm-final-content h2 {
    max-width: 680px;

    margin: 0;

    color: #ffffff;
}


.pm-final-content h2 span {
    display: block;

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


/* ==========================================================
   COPY
========================================================== */

.pm-final-content > p {
    max-width: 620px;

    margin: 16px 0 0;

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


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

.pm-final-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;

    gap: 9px;

    margin-top: 22px;
}


/* ==========================================================
   PRIMARY CTA
========================================================== */

.pm-final-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    gap: 9px;

    min-height: 50px;

    padding: 0 20px;

    border-radius: 50px;

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

    text-decoration: none;

    color: #ffffff;

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


.pm-final-primary:hover {
    transform: translateY(-2px);

    gap: 13px;

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

    color: #ffffff;
}


/* ==========================================================
   SECONDARY CTA
========================================================== */

.pm-final-secondary {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    gap: 9px;

    min-height: 50px;

    padding: 0 18px;

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

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

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

    text-decoration: none;

    color: #ffffff;

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


.pm-final-secondary i {
    color: var(--tdc-orange, #f26322);
}


.pm-final-secondary:hover {
    border-color: rgba(242,99,34,.40);

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

    color: #ffffff;
}


/* ==========================================================
   QUICK POINTS
========================================================== */

.pm-final-points {
    display: grid;
    grid-template-columns:
        repeat(3, minmax(0, 1fr));

    gap: 7px;

    max-width: 650px;

    margin-top: 25px;
}


.pm-final-points > div {
    padding: 11px;

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


.pm-final-points span {
    display: block;

    margin-bottom: 4px;

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


.pm-final-points strong {
    display: block;

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


/* ==========================================================
   RIGHT PANEL
========================================================== */

.pm-final-panel {
    position: relative;

    z-index: 5;

    padding: 20px;

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

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

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

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


/* ==========================================================
   PANEL TOP
========================================================== */

.pm-final-panel-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;

    gap: 15px;

    padding-bottom: 14px;

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


.pm-final-panel-top > div > span {
    display: block;

    margin-bottom: 3px;

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


.pm-final-panel-top strong {
    display: block;

    color: #ffffff;
}


/* ==========================================================
   STATUS
========================================================== */

.pm-final-panel-status {
    display: inline-flex;
    align-items: center;

    gap: 6px;

    padding: 6px 9px;

    border-radius: 50px;

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

    white-space: nowrap;

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


.pm-final-panel-status > span {
    width: 6px;
    height: 6px;

    border-radius: 50%;

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

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


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

.pm-final-journey {
    padding: 17px 0 14px;
}


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

.pm-final-journey-row {
    display: grid;
    grid-template-columns:
        39px
        minmax(0, 1fr);

    align-items: center;

    gap: 11px;
}


.pm-final-journey-number {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 39px;
    height: 39px;

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

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

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


.pm-final-journey-row > div > span {
    display: block;

    margin-bottom: 2px;

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


.pm-final-journey-row strong {
    display: block;

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


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

.pm-final-journey-line {
    width: 39px;
    height: 15px;

    display: flex;
    justify-content: center;
}


.pm-final-journey-line span {
    width: 1px;
    height: 100%;

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


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

.pm-final-panel-result {
    padding: 14px;

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

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


.pm-final-panel-result span {
    display: block;

    margin-bottom: 3px;

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


.pm-final-panel-result strong {
    display: block;

    color: #ffffff;
}


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

@media (max-width: 1023px) {

    .pm-final {
        padding: 38px 0;
    }


    .pm-final-wrap {
        grid-template-columns:
            minmax(0, 55%)
            minmax(300px, 45%);

        gap: 30px;

        padding: 40px;
    }

}


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

@media (max-width: 767px) {

    .pm-final {
        padding: 30px 0;
    }


    .pm-final-wrap {
        grid-template-columns: 1fr;

        gap: 28px;

        min-height: 0;

        padding: 28px 20px;

        border-radius: 20px;
    }


    /* BACKGROUND */

    .pm-final-bg img {
        object-position: 65% center;

        opacity: .24;
    }


    .pm-final-overlay {
        background:
            linear-gradient(
                180deg,
                rgba(17,17,17,.96) 0%,
                rgba(17,17,17,.90) 100%
            );
    }


    /* ACTIONS */

    .pm-final-actions {
        align-items: stretch;
    }


    .pm-final-primary,
    .pm-final-secondary {
        width: 100%;
    }


    /* POINTS */

    .pm-final-points {
        grid-template-columns: 1fr;

        gap: 0;
    }


    .pm-final-points > div {
        display: grid;
        grid-template-columns:
            30px
            minmax(0, 1fr);

        align-items: center;

        gap: 7px;

        padding: 9px 0;
    }


    .pm-final-points span {
        margin-bottom: 0;
    }


    /* PANEL */

    .pm-final-panel {
        padding: 17px;
    }

}


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

@media (max-width: 480px) {

    .pm-final-wrap {
        padding:
            25px
            16px;
    }


    .pm-final-panel-top {
        flex-direction: column;
    }


    .pm-final-panel-status {
        align-self: flex-start;
    }

}


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

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

    .pm-final-bg img,
    .pm-final-primary,
    .pm-final-secondary {
        transition: none !important;
    }

}