/* =============================================================
   UI Medical Marketing — Services Pages
   Shared styles for all /services/*.php pages. Prefix: svc_
   ============================================================= */

/* ── Gradient Text ─────────────────────────────────────────── */
.svc_grad {
    background: linear-gradient(135deg, var(--blue) 0%, var(--cyan) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* =====================================================================
   SERVICE HERO
   ===================================================================== */
.svc_hero {
    overflow: hidden;
}

.svc_hero_bg {
    position: absolute;
    inset: 0;
    background: linear-gradient(140deg, #EEF4FF 0%, #F8FAFC 55%, #EDF6FC 100%);
    z-index: 0;
}

.svc_hero_dots {
    position: absolute;
    inset: 0;
    background-image: radial-gradient(var(--gray-300) 1px, transparent 1px);
    background-size: 28px 28px;
    opacity: .45;
    z-index: 0;
}

.svc_hero .wrap {
    position: relative;
    z-index: 1;
}

.svc_hero_inner {
    display: grid;
    grid-template-columns: 1.05fr 1fr;
    gap: 80px;
    align-items: center;
}

/* Copy */
.svc_hero_copy .eyebrow {
    margin-bottom: 24px;
}

.svc_hero_copy h1 {
    font-size: clamp(32px, 4.2vw, 58px);
    line-height: 1.04;
    margin-bottom: 28px;
}

.svc_hero_lead {
    font-size: 18px;
    color: var(--gray-600);
    line-height: 1.7;
    margin-bottom: 36px;
    max-width: 580px;
}

.svc_hero_actions {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
    margin-bottom: 36px;
}

.svc_hero_trust {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
}

.svc_trust_item {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 13.5px;
    font-family: var(--font-mono);
    color: var(--gray-600);
    letter-spacing: .01em;
}

.svc_trust_item .icon {
    width: 15px;
    height: 15px;
    color: var(--blue);
    flex-shrink: 0;
}

/* ── Hero Visualization ──────────────────────────────────── */
.svc_hero_viz {
    position: relative;
}

.svc_dash_card {
    background: #FFFFFF;
    border-radius: var(--radius-lg);
    box-shadow: var(--sh-xl);
    padding: 28px;
    border: 1px solid var(--gray-200);
    position: relative;
    z-index: 1;
}

.svc_dash_head {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 24px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--gray-100);
}

.svc_dash_dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
}

.svc_dash_dot--blue  { background: var(--blue); }
.svc_dash_dot--cyan  { background: var(--cyan); }
.svc_dash_dot--green { background: #22C55E; }

.svc_dash_title {
    font-family: var(--font-mono);
    font-size: 11.5px;
    color: var(--gray-500);
    letter-spacing: .06em;
    margin-left: 4px;
    text-transform: uppercase;
}

/* Channels */
.svc_dash_channels {
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin-bottom: 22px;
}

.svc_dash_ch {
    display: grid;
    grid-template-columns: 1fr 130px 36px;
    align-items: center;
    gap: 12px;
}

.svc_dash_ch_label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 600;
    color: var(--navy);
    min-width: 0;
}

.svc_dash_ch_icon .icon {
    width: 14px;
    height: 14px;
    color: var(--blue);
    flex-shrink: 0;
    display: block;
}

.svc_dash_ch_tag {
    font-family: var(--font-mono);
    font-size: 10px;
    color: var(--gray-500);
    font-weight: 400;
    white-space: nowrap;
    flex-shrink: 0;
}

.svc_dash_bar_track {
    height: 5px;
    background: var(--gray-100);
    border-radius: 99px;
    overflow: hidden;
}

.svc_dash_bar_fill {
    height: 100%;
    width: 0;
    background: linear-gradient(90deg, var(--blue), var(--cyan));
    border-radius: 99px;
    transition: width 1.3s cubic-bezier(.4, 0, .2, 1) .4s;
}

.reveal:not(.pending) .svc_dash_bar_fill {
    width: var(--w);
}

.svc_dash_pct {
    font-family: var(--font-mono);
    font-size: 12px;
    font-weight: 600;
    color: var(--blue);
    text-align: right;
}

/* Format tags */
.svc_dash_formats {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding-top: 18px;
    border-top: 1px solid var(--gray-100);
}

.svc_dash_fmt_tag {
    font-family: var(--font-mono);
    font-size: 10.5px;
    letter-spacing: .04em;
    padding: 5px 11px;
    border-radius: 99px;
    background: var(--blue-light);
    color: var(--blue);
    font-weight: 500;
}

/* Floating badges */
.svc_hero_badge {
    position: absolute;
    background: #FFFFFF;
    border-radius: var(--radius);
    box-shadow: var(--sh-lg);
    padding: 14px 18px;
    display: flex;
    align-items: center;
    gap: 12px;
    z-index: 2;
    border: 1px solid var(--gray-200);
}

.svc_hero_badge--a {
    bottom: -20px;
    left: -24px;
}

.svc_hero_badge--b {
    top: -16px;
    right: -20px;
}

.svc_badge_icon .icon {
    width: 18px;
    height: 18px;
    color: var(--cyan);
    display: block;
}

.svc_badge_num {
    font-family: var(--font-head);
    font-size: 30px;
    font-weight: 700;
    color: var(--blue);
    line-height: 1;
}

.svc_badge_sub {
    font-size: 11.5px;
    color: var(--gray-600);
    line-height: 1.4;
}

.svc_badge_val {
    font-family: var(--font-head);
    font-size: 20px;
    font-weight: 700;
    color: var(--navy);
    line-height: 1.1;
}

.svc_badge_label {
    font-size: 11px;
    color: var(--gray-600);
    line-height: 1.4;
}

/* =====================================================================
   3 WS FRAMEWORK
   ===================================================================== */
.svc_framework .sec-head {
    margin-bottom: 64px;
}

.svc_fw_grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 28px;
}

.svc_fw_card {
    position: relative;
    border-radius: var(--radius-lg);
    background: #FFFFFF;
    box-shadow: var(--sh-md);
    overflow: hidden;
    transition: transform .3s cubic-bezier(.2, .7, .3, 1), box-shadow .3s;
}

.svc_fw_card::before {
    content: attr(data-num);
    position: absolute;
    top: -10px;
    right: 14px;
    font-family: var(--font-head);
    font-size: 120px;
    font-weight: 700;
    color: var(--blue-light);
    line-height: 1;
    pointer-events: none;
    z-index: 0;
    letter-spacing: -0.04em;
    transition: color .3s;
}

.svc_fw_card:hover {
    transform: translateY(-6px);
    box-shadow: var(--sh-lg);
}

.svc_fw_card:hover::before {
    color: #D5E5F8;
}

.svc_fw_card_inner {
    position: relative;
    z-index: 1;
    padding: 36px 32px 40px;
}

.svc_fw_icon {
    width: 56px;
    height: 56px;
    border-radius: var(--radius-sm);
    background: linear-gradient(135deg, var(--blue-light), rgba(0, 157, 220, .12));
    display: grid;
    place-items: center;
    margin-bottom: 22px;
}

.svc_fw_icon .icon {
    width: 28px;
    height: 28px;
    color: var(--blue);
}

.svc_fw_card h3 {
    font-size: 28px;
    margin-bottom: 6px;
}

.svc_fw_tag {
    font-family: var(--font-mono);
    font-size: 11.5px;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--cyan);
    display: block;
    margin-bottom: 16px;
}

.svc_fw_card_inner > p:not(.svc_fw_tag) {
    font-size: 15.5px;
    color: var(--gray-600);
    line-height: 1.7;
}

/* =====================================================================
   EDITORIAL — 4.4B
   ===================================================================== */
.svc_editorial {
    overflow: hidden;
}

.svc_editorial_inner {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 80px;
    align-items: center;
}

.svc_editorial_stat {
    text-align: center;
    flex-shrink: 0;
}

.svc_editorial_big {
    font-family: var(--font-head);
    font-size: clamp(90px, 12vw, 160px);
    font-weight: 700;
    line-height: .9;
    letter-spacing: -0.04em;
    background: linear-gradient(135deg, var(--blue-deep) 0%, var(--blue) 50%, var(--cyan) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.svc_editorial_label {
    font-family: var(--font-mono);
    font-size: 12.5px;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--gray-500);
    line-height: 1.5;
    margin-top: 10px;
}

.svc_editorial_copy .eyebrow {
    margin-bottom: 20px;
}

.svc_editorial_copy h2 {
    font-size: clamp(24px, 3vw, 38px);
    margin-bottom: 20px;
}

.svc_editorial_copy p {
    font-size: 17px;
    color: var(--gray-600);
    line-height: 1.75;
}

.svc_editorial_copy p + p {
    margin-top: 16px;
}

.svc_editorial_proof {
    display: flex;
    gap: 40px;
    margin-top: 40px;
    padding-top: 32px;
    border-top: 1px solid var(--gray-200);
    flex-wrap: wrap;
}

.svc_proof_item {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.svc_proof_val {
    font-family: var(--font-head);
    font-size: 36px;
    font-weight: 700;
    color: var(--blue);
    line-height: 1;
    letter-spacing: -0.03em;
}

.svc_proof_lbl {
    font-size: 13px;
    color: var(--gray-600);
    line-height: 1.4;
    max-width: 150px;
}

/* =====================================================================
   CONTENT STRATEGY
   ===================================================================== */
.svc_strategy_inner {
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    gap: 80px;
    align-items: center;
}

.svc_strategy_copy .eyebrow {
    margin-bottom: 20px;
}

.svc_strategy_copy h2 {
    font-size: clamp(24px, 3vw, 38px);
    margin-bottom: 20px;
}

.svc_strategy_copy p {
    font-size: 17px;
    color: var(--gray-600);
    line-height: 1.75;
}

.svc_strategy_copy p + p {
    margin-top: 16px;
}

.svc_strategy_list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 28px;
}

.svc_strategy_list li {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 15.5px;
    color: var(--ink);
    font-weight: 500;
}

.svc_strategy_list .icon {
    width: 16px;
    height: 16px;
    color: var(--cyan);
    flex-shrink: 0;
}

/* Hub + Nodes */
.svc_strategy_viz {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 28px;
}

.svc_strat_hub {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--blue), var(--blue-deep));
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    color: #FFFFFF;
    box-shadow: var(--sh-blue);
    font-family: var(--font-head);
    font-size: 12px;
    font-weight: 600;
    text-align: center;
    line-height: 1.3;
    position: relative;
}

.svc_strat_hub::before {
    content: '';
    position: absolute;
    inset: -18px;
    border-radius: 50%;
    border: 1.5px dashed var(--blue-light);
    animation: svc-spin 22s linear infinite;
}

@keyframes svc-spin {
    to { transform: rotate(360deg); }
}

.svc_strat_hub_icon .icon {
    width: 28px;
    height: 28px;
    display: block;
}

.svc_strat_nodes {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    width: 100%;
}

.svc_strat_node {
    border-radius: var(--radius-sm);
    background: #FFFFFF;
    border: 1px solid var(--gray-200);
    box-shadow: var(--sh-sm);
    padding: 12px 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    font-size: 11.5px;
    font-weight: 600;
    color: var(--navy);
    text-align: center;
    transition: transform .25s cubic-bezier(.2, .7, .3, 1), box-shadow .25s, border-color .2s, color .2s;
}

.svc_strat_node:hover {
    transform: translateY(-3px);
    box-shadow: var(--sh-md);
    border-color: var(--node-color);
    color: var(--node-color);
}

.svc_strat_node .icon {
    width: 16px;
    height: 16px;
    color: var(--node-color);
    flex-shrink: 0;
}

/* =====================================================================
   CONTENT FORMATS GRID
   ===================================================================== */
.svc_formats .sec-head {
    margin-bottom: 60px;
}

.svc_fmt_grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}

.svc_fmt_card {
    background: #FFFFFF;
    border: 1px solid var(--gray-200);
    border-radius: var(--radius);
    padding: 28px 24px;
    transition: transform .28s cubic-bezier(.2, .7, .3, 1), box-shadow .28s, border-color .2s;
}

.svc_fmt_card:hover {
    transform: translateY(-5px);
    box-shadow: var(--sh-lg);
    border-color: var(--blue-light);
}

.svc_fmt_icon {
    width: 50px;
    height: 50px;
    border-radius: var(--radius-sm);
    background: linear-gradient(135deg, var(--blue-light), rgba(0, 157, 220, .1));
    display: grid;
    place-items: center;
    margin-bottom: 18px;
}

.svc_fmt_icon .icon {
    width: 24px;
    height: 24px;
    color: var(--blue);
}

.svc_fmt_card h3 {
    font-size: 16px;
    font-weight: 700;
    margin-bottom: 10px;
    line-height: 1.25;
}

.svc_fmt_card p {
    font-size: 14.5px;
    color: var(--gray-600);
    line-height: 1.65;
}

/* =====================================================================
   AUTHORITY — DARK NAVY
   ===================================================================== */
.svc_authority {
    overflow: hidden;
    background: var(--navy);
}

.svc_authority_bg {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse 70% 60% at 15% 50%, rgba(0, 56, 208, .18) 0%, transparent 70%),
        radial-gradient(ellipse 60% 70% at 85% 30%, rgba(0, 157, 220, .12) 0%, transparent 65%);
    pointer-events: none;
}

.svc_authority_glow {
    position: absolute;
    bottom: -80px;
    left: 50%;
    transform: translateX(-50%);
    width: 700px;
    height: 500px;
    background: radial-gradient(circle, rgba(0, 157, 220, .08) 0%, transparent 65%);
    pointer-events: none;
}

.svc_authority .wrap {
    position: relative;
    z-index: 1;
}

.svc_authority .sec-head {
    margin-bottom: 60px;
}

.svc_authority .sec-head h2 {
    color: #FFFFFF;
}

.svc_authority .eyebrow {
    color: rgba(255, 255, 255, .5);
}

.svc_authority .eyebrow::before {
    background: rgba(255, 255, 255, .25);
}

.svc_authority_lead {
    font-size: 18px;
    color: rgba(255, 255, 255, .65);
    line-height: 1.65;
    margin-top: 20px;
}

.svc_authority_pillars {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 20px;
    margin-bottom: 64px;
}

.svc_authority_pillar {
    background: rgba(255, 255, 255, .05);
    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: var(--radius);
    padding: 28px 22px;
    backdrop-filter: blur(8px);
    transition: background .3s, border-color .3s, transform .28s cubic-bezier(.2, .7, .3, 1);
}

.svc_authority_pillar:hover {
    background: rgba(255, 255, 255, .08);
    border-color: rgba(0, 157, 220, .3);
    transform: translateY(-4px);
}

.svc_authority_pillar_icon {
    width: 48px;
    height: 48px;
    border-radius: var(--radius-sm);
    background: rgba(0, 157, 220, .15);
    display: grid;
    place-items: center;
    margin-bottom: 18px;
}

.svc_authority_pillar_icon .icon {
    width: 24px;
    height: 24px;
    color: var(--cyan);
}

.svc_authority_pillar h3 {
    font-size: 16px;
    font-weight: 700;
    color: #FFFFFF;
    margin-bottom: 10px;
}

.svc_authority_pillar p {
    font-size: 14px;
    color: rgba(255, 255, 255, .6);
    line-height: 1.65;
}

.svc_authority_tagline {
    text-align: center;
    font-family: var(--font-head);
    font-size: clamp(18px, 2.5vw, 26px);
    font-weight: 600;
    color: rgba(255, 255, 255, .88);
    line-height: 1.4;
    letter-spacing: -0.02em;
    max-width: 760px;
    margin: 0 auto;
    font-style: italic;
}

/* =====================================================================
   FINAL CTA
   ===================================================================== */
.svc_cta {
    overflow: hidden;
    isolation: isolate;
}

.svc_cta_bg {
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, var(--blue-deep) 0%, var(--blue) 45%, var(--cyan) 100%);
    z-index: -1;
}

.svc_cta_rings {
    position: absolute;
    inset: 0;
    z-index: -1;
    overflow: hidden;
    pointer-events: none;
}

.svc_cta_rings::before,
.svc_cta_rings::after {
    content: '';
    position: absolute;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, .12);
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.svc_cta_rings::before {
    width: 700px;
    height: 700px;
}

.svc_cta_rings::after {
    width: 1050px;
    height: 1050px;
}

.svc_cta_glow {
    position: absolute;
    inset: 0;
    z-index: -1;
    background: radial-gradient(ellipse 80% 60% at 50% 100%, rgba(255, 255, 255, .08) 0%, transparent 70%);
    pointer-events: none;
}

.svc_cta_inner {
    text-align: center;
}

.svc_cta_inner h2 {
    color: #FFFFFF;
    font-size: clamp(26px, 4vw, 48px);
    margin-bottom: 20px;
}

.svc_cta_lead {
    font-size: 18px;
    color: rgba(255, 255, 255, .8);
    line-height: 1.65;
    max-width: 720px;
    margin: 0 auto 40px;
}

.svc_cta_buttons {
    display: flex;
    gap: 14px;
    justify-content: center;
    flex-wrap: wrap;
    margin-bottom: 36px;
}

.svc_cta_meta {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    flex-wrap: wrap;
}

.svc_cta_meta_item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13.5px;
    color: rgba(255, 255, 255, .7);
}

.svc_cta_meta_item .icon {
    width: 14px;
    height: 14px;
    color: rgba(255, 255, 255, .5);
}

.svc_cta_meta_item a {
    color: rgba(255, 255, 255, .85);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.svc_cta_meta_sep {
    color: rgba(255, 255, 255, .3);
}

/* =====================================================================
   REVEAL — defined here for service pages
   (global.css covers the main reveal for index/about; replicated here
    so /services/* pages that only load services.css also animate)
   ===================================================================== */
.reveal {
    transition: opacity .55s cubic-bezier(.4, 0, .2, 1),
                transform .55s cubic-bezier(.4, 0, .2, 1);
}

.reveal.pending {
    opacity: 0;
    transform: translateY(24px);
}

.reveal.d1.pending { transition-delay: .10s; }
.reveal.d2.pending { transition-delay: .20s; }
.reveal.d3.pending { transition-delay: .30s; }
.reveal.d4.pending { transition-delay: .40s; }

/* =====================================================================
   RESPONSIVE
   ===================================================================== */

/* 1100px */
@media (max-width: 1100px) {
    .svc_authority_pillars {
        grid-template-columns: repeat(3, 1fr);
    }
    .svc_fmt_grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* 980px */
@media (max-width: 980px) {
    .svc_hero_inner {
        grid-template-columns: 1fr 1fr;
        gap: 48px;
    }
    .svc_fw_grid {
        grid-template-columns: 1fr 1fr;
    }
    .svc_fw_grid .svc_fw_card:last-child {
        grid-column: 1 / -1;
    }
}

/* 820px */
@media (max-width: 820px) {
    .svc_hero_inner {
        grid-template-columns: 1fr;
    }
    .svc_hero_viz {
        display: none;
    }
    .svc_editorial_inner {
        grid-template-columns: 1fr;
        gap: 48px;
        text-align: center;
    }
    .svc_editorial_proof {
        justify-content: center;
    }
    .svc_strategy_inner {
        grid-template-columns: 1fr;
    }
    .svc_strategy_viz {
        display: none;
    }
    .svc_authority_pillars {
        grid-template-columns: repeat(2, 1fr);
    }
    .svc_fmt_grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* 620px */
@media (max-width: 620px) {
    .svc_hero_copy h1 {
        font-size: 30px;
    }
    .svc_hero_actions {
        flex-direction: column;
    }
    .svc_hero_actions .btn {
        width: 100%;
        justify-content: center;
    }
    .svc_fw_grid {
        grid-template-columns: 1fr;
    }
    .svc_fw_grid .svc_fw_card:last-child {
        grid-column: auto;
    }
    .svc_authority_pillars {
        grid-template-columns: 1fr;
    }
    .svc_fmt_grid {
        grid-template-columns: 1fr;
    }
    .svc_cta_buttons {
        flex-direction: column;
        align-items: center;
    }
    .svc_cta_buttons .btn {
        width: 100%;
        justify-content: center;
    }
}

/* =====================================================================
   COPYWRITING — HERO VISUAL  (.cpw_viz)
   Page-specific document illustration.
   ===================================================================== */
.cpw_viz {
    position: relative;
}

/* Document card */
.cpw_doc {
    background: #FFFFFF;
    border-radius: var(--radius-lg);
    box-shadow: var(--sh-xl);
    border: 1px solid var(--gray-200);
    overflow: hidden;
    position: relative;
    z-index: 1;
}

.cpw_doc_head {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 20px;
    background: var(--gray-50);
    border-bottom: 1px solid var(--gray-200);
}

.cpw_doc_traffic {
    display: flex;
    gap: 6px;
}

.cpw_doc_traffic span {
    width: 10px;
    height: 10px;
    border-radius: 50%;
}

.cpw_doc_traffic span:nth-child(1) { background: #FF5F57; }
.cpw_doc_traffic span:nth-child(2) { background: #FEBC2E; }
.cpw_doc_traffic span:nth-child(3) { background: #28C840; }

.cpw_doc_label {
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: .06em;
    color: var(--gray-500);
    text-transform: uppercase;
}

.cpw_doc_body {
    padding: 28px 28px 24px;
}

.cpw_type_annot {
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--gray-500);
    margin-bottom: 8px;
}

.cpw_type_annot--sm {
    margin-top: 22px;
}

.cpw_type_h1 {
    font-family: var(--font-head);
    font-size: 28px;
    font-weight: 700;
    color: var(--navy);
    line-height: 1.1;
    letter-spacing: -0.02em;
    margin-bottom: 0;
}

/* Animated text placeholder lines */
.cpw_type_lines {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 10px;
}

.cpw_tl {
    height: 9px;
    border-radius: 99px;
    background: var(--gray-200);
    transform-origin: left;
    transition: transform 1.2s cubic-bezier(.4, 0, .2, 1);
}

.reveal:not(.pending) .cpw_tl { transform: scaleX(1); }
.reveal.pending        .cpw_tl { transform: scaleX(0); }

.cpw_tl--full { width: 100%; transition-delay: .1s; }
.cpw_tl--xl   { width: 88%;  transition-delay: .18s; }
.cpw_tl--lg   { width: 74%;  transition-delay: .26s; }
.cpw_tl--md   { width: 55%;  transition-delay: .34s; }

.cpw_cta_chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 20px;
    padding: 10px 18px;
    border-radius: 999px;
    background: linear-gradient(135deg, var(--blue), var(--cyan));
    color: #FFFFFF;
    font-family: var(--font-head);
    font-size: 13px;
    font-weight: 600;
}

.cpw_cta_chip .icon {
    width: 12px;
    height: 12px;
}

.cpw_doc_platforms {
    display: flex;
    gap: 8px;
    padding: 16px 28px;
    border-top: 1px solid var(--gray-100);
    background: var(--gray-50);
    flex-wrap: wrap;
}

.cpw_doc_platforms span {
    font-family: var(--font-mono);
    font-size: 10.5px;
    letter-spacing: .06em;
    padding: 4px 10px;
    border-radius: 99px;
    background: var(--blue-light);
    color: var(--blue-deep);
    font-weight: 500;
}

/* Floating badges */
.cpw_badge {
    position: absolute;
    background: #FFFFFF;
    border-radius: var(--radius);
    box-shadow: var(--sh-lg);
    padding: 13px 16px;
    display: flex;
    align-items: center;
    gap: 10px;
    z-index: 2;
    border: 1px solid var(--gray-200);
}

.cpw_badge--a {
    bottom: -18px;
    left: -22px;
}

.cpw_badge--b {
    top: -14px;
    right: -18px;
}

.cpw_badge_icon .icon {
    width: 16px;
    height: 16px;
    color: var(--blue);
    display: block;
}

.cpw_badge_val {
    font-family: var(--font-head);
    font-size: 14px;
    font-weight: 700;
    color: var(--navy);
    line-height: 1.1;
}

.cpw_badge_sub {
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: .06em;
    color: var(--gray-500);
    text-transform: uppercase;
    margin-top: 2px;
}


/* =====================================================================
   PULL QUOTE SECTION  (.svc_pullquote)
   Reusable editorial statement block for any service page.
   ===================================================================== */
.svc_pullquote {
    overflow: hidden;
}

.svc_pullquote_inner {
    max-width: 860px;
    margin: 0 auto;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 28px;
}

.svc_pullquote_mark {
    display: block;
    color: var(--blue);
    opacity: .35;
}

.svc_pullquote_mark .icon {
    width: 40px;
    height: 40px;
}

.svc_pullquote_text {
    font-family: var(--font-head);
    font-size: clamp(22px, 3.2vw, 36px);
    font-weight: 600;
    color: var(--navy);
    line-height: 1.38;
    letter-spacing: -0.02em;
}


/* =====================================================================
   SERVICES COVERAGE  (.svc_coverage, .svc_icon_grid, .svc_icon_card)
   Reusable icon-card grid for listing service formats without descriptions.
   ===================================================================== */
.svc_coverage_intro {
    font-size: clamp(17px, 2vw, 20px);
    color: var(--gray-600);
    line-height: 1.7;
    text-align: center;
    max-width: 780px;
    margin: 0 auto 56px;
}

.svc_icon_grid {
    display: grid;
    gap: 20px;
}

.svc_icon_grid--5 {
    grid-template-columns: repeat(5, 1fr);
}

.svc_icon_card {
    background: #FFFFFF;
    border: 1px solid var(--gray-200);
    border-radius: var(--radius);
    padding: 36px 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 18px;
    text-align: center;
    transition: transform .28s cubic-bezier(.2, .7, .3, 1), box-shadow .28s, border-color .2s;
}

.svc_icon_card:hover {
    transform: translateY(-5px);
    box-shadow: var(--sh-md);
    border-color: var(--blue-light);
}

.svc_icon_card_icon {
    width: 64px;
    height: 64px;
    border-radius: var(--radius-sm);
    background: linear-gradient(135deg, var(--blue-light), rgba(0, 157, 220, .1));
    display: grid;
    place-items: center;
    flex-shrink: 0;
    transition: background .25s;
}

.svc_icon_card:hover .svc_icon_card_icon {
    background: linear-gradient(135deg, rgba(0, 56, 208, .12), rgba(0, 157, 220, .18));
}

.svc_icon_card_icon .icon {
    width: 28px;
    height: 28px;
    color: var(--blue);
}

.svc_icon_card_label {
    font-family: var(--font-head);
    font-size: 15px;
    font-weight: 700;
    color: var(--navy);
    line-height: 1.25;
}


/* =====================================================================
   RESPONSIVE — additions for copywriting + reusable patterns
   ===================================================================== */

/* 1100px */
@media (max-width: 1100px) {
    .svc_icon_grid--5 {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* 820px */
@media (max-width: 820px) {
    .svc_pullquote_text {
        font-size: 22px;
    }
    .svc_icon_grid--5 {
        grid-template-columns: repeat(2, 1fr);
    }
    .cpw_badge {
        display: none;
    }
}

/* 620px */
@media (max-width: 620px) {
    .svc_icon_grid--5 {
        grid-template-columns: 1fr;
    }
    .svc_icon_card {
        flex-direction: row;
        text-align: left;
        padding: 22px 24px;
    }
    .svc_icon_card_icon {
        width: 52px;
        height: 52px;
        flex-shrink: 0;
    }
}


/* =====================================================================
   HERO — QUESTIONS (hero sub-copy for question-style leads)
   ===================================================================== */
.svc_hero_qs {
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin-bottom: 36px;
}

.svc_hero_q {
    font-size: 17px;
    color: var(--ink);
    line-height: 1.6;
    font-weight: 500;
}

.svc_hero_q:first-child {
    font-family: var(--font-head);
    font-size: 20px;
    font-weight: 700;
    color: var(--navy);
}


/* =====================================================================
   CORPORATE BRANDING — HERO VISUAL  (.cbr_viz)
   Brand identity system illustration. Page-specific.
   ===================================================================== */
.cbr_viz {
    position: relative;
}

.cbr_brand_card {
    background: #FFFFFF;
    border-radius: var(--radius-lg);
    box-shadow: var(--sh-xl);
    border: 1px solid var(--gray-200);
    overflow: hidden;
    position: relative;
    z-index: 1;
    padding: 0 0 24px;
}

.cbr_card_head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 20px;
    background: var(--gray-50);
    border-bottom: 1px solid var(--gray-200);
}

.cbr_card_label {
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: .06em;
    color: var(--gray-500);
    text-transform: uppercase;
}

.cbr_card_status {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-family: var(--font-mono);
    font-size: 10.5px;
    letter-spacing: .04em;
    color: #22C55E;
    font-weight: 600;
}

.cbr_card_status .icon {
    width: 11px;
    height: 11px;
}

/* Brand mark */
.cbr_mark_area {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 22px 22px 18px;
    border-bottom: 1px solid var(--gray-100);
}

.cbr_mark {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--blue), var(--cyan));
    display: grid;
    place-items: center;
    flex-shrink: 0;
    box-shadow: 0 8px 24px -6px rgba(0, 56, 208, .38);
}

.cbr_mark_cross {
    position: relative;
    width: 28px;
    height: 28px;
}

.cbr_mark_cross::before,
.cbr_mark_cross::after {
    content: '';
    position: absolute;
    background: #FFFFFF;
    border-radius: 2px;
}

.cbr_mark_cross::before {
    width: 8px;
    height: 28px;
    left: 50%;
    transform: translateX(-50%);
}

.cbr_mark_cross::after {
    width: 28px;
    height: 8px;
    top: 50%;
    transform: translateY(-50%);
}

.cbr_mark_name {
    font-family: var(--font-head);
    font-size: 16px;
    font-weight: 700;
    color: var(--navy);
    margin-bottom: 4px;
}

.cbr_mark_tag {
    font-family: var(--font-mono);
    font-size: 10.5px;
    letter-spacing: .06em;
    color: var(--gray-500);
    text-transform: uppercase;
}

/* Section label */
.cbr_section_label {
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--gray-500);
    padding: 18px 22px 10px;
}

/* Color palette */
.cbr_palette {
    display: flex;
    gap: 10px;
    padding: 0 22px 2px;
}

.cbr_swatch {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    border: 1px solid rgba(0, 0, 0, .06);
    flex-shrink: 0;
}

/* Typography scale */
.cbr_type_scale {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 0 22px;
}

.cbr_ts {
    font-family: var(--font-head);
    color: var(--navy);
    line-height: 1;
}

.cbr_ts--h1   { font-size: 22px; font-weight: 700; }
.cbr_ts--h2   { font-size: 15px; font-weight: 600; color: var(--gray-600); }
.cbr_ts--body { font-family: var(--font-body); font-size: 12px; color: var(--gray-500); font-weight: 400; }

/* Floating badges */
.cbr_badge {
    position: absolute;
    background: #FFFFFF;
    border-radius: var(--radius);
    box-shadow: var(--sh-lg);
    padding: 13px 16px;
    display: flex;
    align-items: center;
    gap: 10px;
    z-index: 2;
    border: 1px solid var(--gray-200);
}

.cbr_badge--a {
    bottom: -18px;
    left: -22px;
}

.cbr_badge--b {
    top: -14px;
    right: -18px;
}

.cbr_badge_icon .icon {
    width: 15px;
    height: 15px;
    color: var(--blue);
    display: block;
}

.cbr_badge_val {
    font-family: var(--font-head);
    font-size: 14px;
    font-weight: 700;
    color: var(--navy);
    line-height: 1.1;
}

.cbr_badge_sub {
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: .06em;
    color: var(--gray-500);
    text-transform: uppercase;
    margin-top: 2px;
}


/* =====================================================================
   INTRODUCTION — EDITORIAL  (.svc_intro_editorial)
   Reusable editorial intro section for content-rich service pages.
   ===================================================================== */
.svc_intro_editorial {
    overflow: hidden;
}

.svc_intro_inner {
    max-width: 900px;
    margin: 0 auto;
}

.svc_intro_inner .eyebrow {
    margin-bottom: 32px;
}

.svc_intro_lede {
    font-family: var(--font-head);
    font-size: clamp(20px, 2.4vw, 26px);
    font-weight: 500;
    color: var(--navy);
    line-height: 1.55;
    letter-spacing: -0.01em;
    margin-bottom: 36px;
    padding-bottom: 36px;
    border-bottom: 1px solid var(--gray-200);
}

.svc_intro_cols {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    margin-bottom: 36px;
}

.svc_intro_cols p {
    font-size: 17px;
    color: var(--gray-600);
    line-height: 1.75;
}

.svc_intro_close {
    font-size: 17px;
    color: var(--gray-600);
    line-height: 1.75;
    padding-top: 36px;
    border-top: 1px solid var(--gray-200);
    position: relative;
    padding-left: 24px;
}

.svc_intro_close::before {
    content: '';
    position: absolute;
    left: 0;
    top: 36px;
    bottom: 0;
    width: 3px;
    border-radius: 99px;
    background: linear-gradient(180deg, var(--blue), var(--cyan));
}


/* =====================================================================
   WHY SECTION  (.svc_why)
   Reusable heading + multi-paragraph narrative layout.
   ===================================================================== */
.svc_why .sec-head {
    max-width: 760px;
    margin-bottom: 48px;
}

.svc_why .sec-head h2 {
    font-size: clamp(22px, 2.8vw, 34px);
}

.svc_why_body {
    max-width: 860px;
    display: flex;
    flex-direction: column;
    gap: 28px;
}

.svc_why_body p {
    font-size: 17px;
    color: var(--gray-600);
    line-height: 1.8;
}


/* =====================================================================
   FEATURE BLOCK  (.svc_feature_blk)
   Reusable dark/gradient featured content section.
   Used for standout quotes or single key paragraphs.
   ===================================================================== */
.svc_feature_blk {
    position: relative;
    padding: var(--sec-pad) 0;
    overflow: hidden;
    isolation: isolate;
}

.svc_feature_blk_bg {
    position: absolute;
    inset: 0;
    background: var(--navy);
    z-index: -1;
}

.svc_feature_blk_glow {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse 70% 80% at 5% 50%, rgba(0, 56, 208, .22) 0%, transparent 65%),
        radial-gradient(ellipse 50% 60% at 95% 30%, rgba(0, 157, 220, .14) 0%, transparent 60%);
    z-index: -1;
    pointer-events: none;
}

.svc_feature_blk_inner {
    max-width: 820px;
}

.svc_feature_blk .eyebrow {
    color: rgba(255, 255, 255, .5);
    margin-bottom: 24px;
}

.svc_feature_blk .eyebrow::before {
    background: rgba(255, 255, 255, .25);
}

.svc_feature_blk h2 {
    color: #FFFFFF;
    font-size: clamp(24px, 3.2vw, 42px);
    margin-bottom: 28px;
}

.svc_feature_blk p {
    font-size: 18px;
    color: rgba(255, 255, 255, .72);
    line-height: 1.78;
}


/* =====================================================================
   OPPORTUNITY CARDS  (.svc_opp_grid / .svc_opp_card)
   Reusable 3-col card layout for "three pillars" type sections.
   Cards display full content — no collapse, no tabs.
   ===================================================================== */
.svc_opps .sec-head {
    margin-bottom: 64px;
}

.svc_opp_grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 28px;
}

.svc_opp_card {
    background: #FFFFFF;
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-lg);
    padding: 40px 36px;
    position: relative;
    overflow: hidden;
    transition: transform .3s cubic-bezier(.2, .7, .3, 1), box-shadow .3s, border-color .25s;
}

.svc_opp_card::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--blue), var(--cyan));
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .35s cubic-bezier(.4, 0, .2, 1);
}

.svc_opp_card:hover {
    transform: translateY(-6px);
    box-shadow: var(--sh-lg);
    border-color: var(--blue-light);
}

.svc_opp_card:hover::after {
    transform: scaleX(1);
}

.svc_opp_num {
    font-family: var(--font-mono);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .12em;
    color: var(--blue);
    margin-bottom: 20px;
    display: block;
}

.svc_opp_card h3 {
    font-size: 24px;
    font-weight: 700;
    color: var(--navy);
    margin-bottom: 16px;
    line-height: 1.15;
}

.svc_opp_card p {
    font-size: 15.5px;
    color: var(--gray-600);
    line-height: 1.75;
}

/* CTA sub-paragraph (second paragraph in CTA inner) */
.svc_cta_sub {
    font-size: 17px;
    color: rgba(255, 255, 255, .8);
    line-height: 1.65;
    max-width: 640px;
    margin: -20px auto 36px;
}

.svc_cta_sub strong {
    color: #FFFFFF;
    font-weight: 700;
}


/* =====================================================================
   RESPONSIVE — additions for corporate branding + reusable patterns
   ===================================================================== */

/* 980px */
@media (max-width: 980px) {
    .svc_opp_grid {
        grid-template-columns: 1fr;
        max-width: 640px;
        margin: 0 auto;
    }
    .svc_intro_cols {
        grid-template-columns: 1fr;
        gap: 24px;
    }
}

/* 820px */
@media (max-width: 820px) {
    .cbr_badge {
        display: none;
    }
    .svc_hero_q:first-child {
        font-size: 18px;
    }
    .svc_feature_blk p {
        font-size: 16px;
    }
}

/* 620px */
@media (max-width: 620px) {
    .svc_opp_card {
        padding: 30px 24px;
    }
    .svc_feature_blk h2 {
        font-size: 22px;
    }
    .svc_intro_lede {
        font-size: 19px;
    }
}


/* =====================================================================
   SOCIAL MEDIA MARKETING — HERO VISUAL  (.smm_viz)
   Social dashboard illustration. Page-specific prefix: smm_
   ===================================================================== */
.smm_viz {
    position: relative;
}

.smm_dash {
    background: #FFFFFF;
    border-radius: var(--radius-lg);
    box-shadow: var(--sh-xl);
    border: 1px solid var(--gray-200);
    overflow: hidden;
    position: relative;
    z-index: 1;
}

.smm_dash_head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 20px;
    background: var(--gray-50);
    border-bottom: 1px solid var(--gray-200);
}

.smm_tabs {
    display: flex;
    gap: 4px;
}

.smm_tab {
    width: 32px;
    height: 32px;
    border-radius: var(--radius-sm);
    display: grid;
    place-items: center;
    background: transparent;
    color: var(--gray-500);
    cursor: default;
    transition: background .2s, color .2s;
}

.smm_tab .icon {
    width: 13px;
    height: 13px;
}

.smm_tab--active {
    background: var(--blue-light);
    color: var(--blue);
}

.smm_dash_label {
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: .06em;
    color: var(--gray-500);
    text-transform: uppercase;
}

/* Platform rows */
.smm_prows {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 22px 22px 18px;
}

.smm_prow {
    display: grid;
    grid-template-columns: 20px 90px 1fr 44px;
    align-items: center;
    gap: 12px;
}

.smm_prow_icon .icon {
    width: 14px;
    height: 14px;
    color: var(--blue);
    display: block;
}

.smm_prow_name {
    font-size: 13px;
    font-weight: 600;
    color: var(--navy);
}

.smm_prow_bar {
    height: 5px;
    background: var(--gray-100);
    border-radius: 99px;
    overflow: hidden;
}

.smm_prow_fill {
    height: 100%;
    width: 0;
    background: linear-gradient(90deg, var(--blue), var(--cyan));
    border-radius: 99px;
    transition: width 1.2s cubic-bezier(.4, 0, .2, 1) .5s;
}

.reveal:not(.pending) .smm_prow_fill {
    width: var(--pw);
}

.smm_prow_val {
    font-family: var(--font-mono);
    font-size: 12px;
    font-weight: 600;
    color: var(--blue);
    text-align: right;
}

/* Content type tags */
.smm_content_types {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 16px 22px;
    border-top: 1px solid var(--gray-100);
    background: var(--gray-50);
}

.smm_ct {
    font-family: var(--font-mono);
    font-size: 10.5px;
    letter-spacing: .04em;
    padding: 5px 11px;
    border-radius: 99px;
    background: var(--blue-light);
    color: var(--blue);
    font-weight: 500;
}

/* Floating badges */
.smm_badge {
    position: absolute;
    background: #FFFFFF;
    border-radius: var(--radius);
    box-shadow: var(--sh-lg);
    border: 1px solid var(--gray-200);
    z-index: 2;
}

.smm_badge--a {
    bottom: -20px;
    left: -24px;
    padding: 14px 18px;
}

.smm_badge--b {
    top: -16px;
    right: -20px;
    padding: 13px 16px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.smm_badge_num {
    display: block;
    font-family: var(--font-head);
    font-size: 28px;
    font-weight: 700;
    color: var(--blue);
    line-height: 1;
}

.smm_badge_sub {
    display: block;
    font-size: 11px;
    color: var(--gray-600);
    line-height: 1.4;
    margin-top: 4px;
}

.smm_badge_icon .icon {
    width: 16px;
    height: 16px;
    color: var(--cyan);
    display: block;
}

.smm_badge_val {
    font-family: var(--font-head);
    font-size: 20px;
    font-weight: 700;
    color: var(--navy);
    line-height: 1.1;
}

.smm_badge_label {
    font-size: 11px;
    color: var(--gray-600);
    line-height: 1.4;
}


/* =====================================================================
   BENEFITS SECTION  (.svc_benefits, .svc_benefit_grid, .svc_benefit_card)
   Reusable: statement-only benefit cards — no icons, no descriptions.
   ===================================================================== */
.svc_benefits .sec-head {
    margin-bottom: 60px;
    max-width: 780px;
}

.svc_benefit_grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}

.svc_benefit_card {
    background: #FFFFFF;
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-lg);
    padding: 40px 32px;
    position: relative;
    overflow: hidden;
    transition: transform .28s cubic-bezier(.2, .7, .3, 1), box-shadow .28s, border-color .2s;
}

.svc_benefit_card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--blue), var(--cyan));
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .35s cubic-bezier(.4, 0, .2, 1);
}

.svc_benefit_card:hover {
    transform: translateY(-5px);
    box-shadow: var(--sh-lg);
    border-color: var(--blue-light);
}

.svc_benefit_card:hover::before {
    transform: scaleX(1);
}

.svc_benefit_num {
    display: block;
    font-family: var(--font-mono);
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: .14em;
    color: var(--blue);
    margin-bottom: 24px;
    opacity: .6;
}

.svc_benefit_text {
    font-family: var(--font-head);
    font-size: clamp(17px, 1.6vw, 21px);
    font-weight: 700;
    color: var(--navy);
    line-height: 1.35;
    letter-spacing: -0.01em;
}


/* =====================================================================
   SOCIAL PLATFORMS SECTION  (.svc_platforms, .svc_platform_grid, .svc_platform_card)
   Reusable: platform/channel cards with icon, heading, and full paragraph.
   ===================================================================== */
.svc_platforms .sec-head {
    margin-bottom: 60px;
}

.svc_platform_grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 28px;
}

.svc_platform_card {
    background: #FFFFFF;
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-lg);
    padding: 40px 36px;
    transition: transform .3s cubic-bezier(.2, .7, .3, 1), box-shadow .3s, border-color .25s;
    position: relative;
    overflow: hidden;
}

.svc_platform_card::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--blue), var(--cyan));
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .35s cubic-bezier(.4, 0, .2, 1);
}

.svc_platform_card:hover {
    transform: translateY(-6px);
    box-shadow: var(--sh-lg);
    border-color: var(--blue-light);
}

.svc_platform_card:hover::after {
    transform: scaleX(1);
}

.svc_platform_icon {
    width: 68px;
    height: 68px;
    border-radius: var(--radius);
    display: grid;
    place-items: center;
    margin-bottom: 24px;
}

.svc_platform_icon .icon {
    width: 30px;
    height: 30px;
}

/* Per-platform icon tints within the brand palette */
.svc_platform_icon--fb {
    background: linear-gradient(135deg, var(--blue-light), rgba(0, 56, 208, .16));
}
.svc_platform_icon--fb .icon { color: var(--blue); }

.svc_platform_icon--ig {
    background: linear-gradient(135deg, rgba(0, 157, 220, .15), var(--blue-light));
}
.svc_platform_icon--ig .icon { color: var(--cyan); }

.svc_platform_icon--tw {
    background: linear-gradient(135deg, var(--gray-100), var(--gray-200));
}
.svc_platform_icon--tw .icon { color: var(--navy); }

.svc_platform_card h3 {
    font-size: 22px;
    font-weight: 700;
    color: var(--navy);
    margin-bottom: 14px;
    line-height: 1.2;
}

.svc_platform_card p {
    font-size: 15.5px;
    color: var(--gray-600);
    line-height: 1.75;
}


/* =====================================================================
   RESPONSIVE — social media marketing + new reusable patterns
   ===================================================================== */

/* 1080px */
@media (max-width: 1080px) {
    .svc_benefit_grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* 820px */
@media (max-width: 820px) {
    .smm_badge {
        display: none;
    }
    .svc_platform_grid {
        grid-template-columns: 1fr;
        max-width: 540px;
        margin: 0 auto;
    }
}

/* 620px */
@media (max-width: 620px) {
    .svc_benefit_grid {
        grid-template-columns: 1fr;
    }
    .svc_benefit_card {
        padding: 28px 24px;
    }
    .svc_platform_card {
        padding: 30px 26px;
    }
}


/* =====================================================================
   LOCAL SEO — HERO VISUAL  (.lseo_viz)
   Local search panel illustration. Page-specific prefix: lseo_
   ===================================================================== */
.lseo_viz {
    position: relative;
}

/* Search results panel */
.lseo_panel {
    background: #FFFFFF;
    border-radius: var(--radius-lg);
    box-shadow: var(--sh-xl);
    border: 1px solid var(--gray-200);
    overflow: hidden;
    position: relative;
    z-index: 1;
}

.lseo_panel_head {
    background: var(--gray-50);
    border-bottom: 1px solid var(--gray-200);
    padding: 16px 20px;
}

.lseo_search_bar {
    display: flex;
    align-items: center;
    gap: 10px;
    background: #FFFFFF;
    border: 1px solid var(--gray-200);
    border-radius: 99px;
    padding: 9px 16px;
    box-shadow: var(--sh-sm);
}

.lseo_search_bar .icon {
    width: 14px;
    height: 14px;
    color: var(--blue);
    flex-shrink: 0;
}

.lseo_search_query {
    font-size: 13px;
    font-weight: 500;
    color: var(--navy);
    flex: 1;
}

.lseo_search_loc {
    display: flex;
    align-items: center;
    gap: 4px;
    font-family: var(--font-mono);
    font-size: 10.5px;
    color: var(--gray-500);
    letter-spacing: .03em;
    white-space: nowrap;
}

.lseo_search_loc .icon {
    color: var(--cyan);
    width: 12px;
    height: 12px;
}

/* Result rows */
.lseo_results {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 20px 22px 18px;
}

.lseo_result {
    display: grid;
    grid-template-columns: 28px 1fr 100px 36px;
    align-items: center;
    gap: 12px;
}

.lseo_result_rank {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: var(--blue-light);
    color: var(--blue);
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 700;
    display: grid;
    place-items: center;
    flex-shrink: 0;
}

.lseo_result_rank--1 {
    background: linear-gradient(135deg, var(--blue), var(--cyan));
    color: #FFFFFF;
}

.lseo_result_info {
    min-width: 0;
}

.lseo_result_name {
    font-size: 12.5px;
    font-weight: 600;
    color: var(--navy);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.lseo_result_tag {
    font-family: var(--font-mono);
    font-size: 10px;
    color: var(--gray-500);
    margin-top: 2px;
}

.lseo_result_bar_track {
    height: 5px;
    background: var(--gray-100);
    border-radius: 99px;
    overflow: hidden;
}

.lseo_result_bar_fill {
    height: 100%;
    width: 0;
    background: linear-gradient(90deg, var(--blue), var(--cyan));
    border-radius: 99px;
    transition: width 1.3s cubic-bezier(.4, 0, .2, 1) .4s;
}

.reveal:not(.pending) .lseo_result_bar_fill {
    width: var(--lw);
}

.lseo_result_pct {
    font-family: var(--font-mono);
    font-size: 12px;
    font-weight: 600;
    color: var(--blue);
    text-align: right;
}

/* Tags strip */
.lseo_tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 14px 22px;
    border-top: 1px solid var(--gray-100);
    background: var(--gray-50);
}

.lseo_tag {
    font-family: var(--font-mono);
    font-size: 10.5px;
    letter-spacing: .04em;
    padding: 5px 11px;
    border-radius: 99px;
    background: var(--blue-light);
    color: var(--blue);
    font-weight: 500;
}

/* Floating badges */
.lseo_badge {
    position: absolute;
    background: #FFFFFF;
    border-radius: var(--radius);
    box-shadow: var(--sh-lg);
    padding: 13px 16px;
    display: flex;
    align-items: center;
    gap: 10px;
    z-index: 2;
    border: 1px solid var(--gray-200);
}

.lseo_badge--a {
    bottom: -20px;
    left: -24px;
}

.lseo_badge--b {
    top: -16px;
    right: -20px;
}

.lseo_badge_icon .icon {
    width: 16px;
    height: 16px;
    color: var(--cyan);
    display: block;
}

.lseo_badge_num {
    font-family: var(--font-head);
    font-size: 28px;
    font-weight: 700;
    color: var(--blue);
    line-height: 1;
}

.lseo_badge_sub {
    font-size: 11px;
    color: var(--gray-600);
    line-height: 1.4;
    margin-top: 3px;
}

.lseo_badge_val {
    font-family: var(--font-head);
    font-size: 17px;
    font-weight: 700;
    color: var(--navy);
    line-height: 1.1;
}

.lseo_badge_label {
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--gray-500);
    margin-top: 2px;
}


/* =====================================================================
   LOCAL SEO — OVERVIEW  (.lseo_overview_inner)
   Two-column split: heading left, content right with gradient accent.
   ===================================================================== */
.lseo_overview_inner {
    display: grid;
    grid-template-columns: 1fr 1.2fr;
    gap: 80px;
    align-items: start;
}

.lseo_overview_copy .eyebrow {
    margin-bottom: 20px;
}

.lseo_overview_copy h2 {
    font-size: clamp(24px, 3vw, 38px);
}

.lseo_overview_text {
    padding-left: 28px;
    position: relative;
    padding-top: 4px;
}

.lseo_overview_text::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 3px;
    border-radius: 99px;
    background: linear-gradient(180deg, var(--blue), var(--cyan));
}

.lseo_overview_text p {
    font-size: 17px;
    color: var(--gray-600);
    line-height: 1.78;
}


/* =====================================================================
   LOCAL SEO — SKILL SET CARDS  (.lseo_skills, .lseo_skill_card)
   Three premium cards with large percentage metric, category label,
   icon, and description. All three cards remain visible at all times.
   ===================================================================== */
.lseo_skills .sec-head {
    margin-bottom: 64px;
}

.lseo_skill_grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 28px;
}

.lseo_skill_card {
    background: #FFFFFF;
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-lg);
    padding: 48px 40px;
    position: relative;
    overflow: hidden;
    transition: transform .3s cubic-bezier(.2, .7, .3, 1), box-shadow .3s, border-color .25s;
}

.lseo_skill_card::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--blue), var(--cyan));
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .35s cubic-bezier(.4, 0, .2, 1);
}

.lseo_skill_card:hover {
    transform: translateY(-6px);
    box-shadow: var(--sh-lg);
    border-color: var(--blue-light);
}

.lseo_skill_card:hover::after {
    transform: scaleX(1);
}

.lseo_skill_pct {
    font-family: var(--font-head);
    font-size: clamp(64px, 7vw, 96px);
    font-weight: 700;
    line-height: .9;
    letter-spacing: -0.04em;
    background: linear-gradient(135deg, var(--blue-deep) 0%, var(--blue) 55%, var(--cyan) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin-bottom: 14px;
}

.lseo_skill_cat {
    display: block;
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--cyan);
    font-weight: 600;
    margin-bottom: 28px;
    padding-bottom: 28px;
    border-bottom: 1px solid var(--gray-200);
}

.lseo_skill_icon {
    width: 52px;
    height: 52px;
    border-radius: var(--radius-sm);
    background: linear-gradient(135deg, var(--blue-light), rgba(0, 157, 220, .12));
    display: grid;
    place-items: center;
    margin-bottom: 20px;
    transition: background .25s;
}

.lseo_skill_card:hover .lseo_skill_icon {
    background: linear-gradient(135deg, rgba(0, 56, 208, .12), rgba(0, 157, 220, .18));
}

.lseo_skill_icon .icon {
    width: 26px;
    height: 26px;
    color: var(--blue);
}

.lseo_skill_body {
    font-size: 15.5px;
    color: var(--gray-600);
    line-height: 1.75;
}


/* =====================================================================
   RESPONSIVE — local SEO additions
   ===================================================================== */

/* 980px */
@media (max-width: 980px) {
    .lseo_overview_inner {
        grid-template-columns: 1fr;
        gap: 36px;
    }
    .lseo_skill_grid {
        grid-template-columns: 1fr 1fr;
    }
    .lseo_skill_grid .lseo_skill_card:last-child {
        grid-column: 1 / -1;
    }
}

/* 820px */
@media (max-width: 820px) {
    .lseo_badge {
        display: none;
    }
    .lseo_overview_text {
        padding-left: 20px;
    }
}

/* 620px */
@media (max-width: 620px) {
    .lseo_skill_grid {
        grid-template-columns: 1fr;
    }
    .lseo_skill_grid .lseo_skill_card:last-child {
        grid-column: auto;
    }
    .lseo_skill_card {
        padding: 36px 28px;
    }
}


/* =====================================================================
   ONLINE REPUTATION MANAGEMENT — HERO VISUAL  (.orm_viz)
   Reputation score card illustration. Page-specific prefix: orm_
   ===================================================================== */
.orm_viz {
    position: relative;
}

.orm_card {
    background: #FFFFFF;
    border-radius: var(--radius-lg);
    box-shadow: var(--sh-xl);
    border: 1px solid var(--gray-200);
    overflow: hidden;
    position: relative;
    z-index: 1;
}

/* Card header */
.orm_card_head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 22px;
    background: var(--gray-50);
    border-bottom: 1px solid var(--gray-200);
}

.orm_card_label {
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--gray-500);
}

.orm_card_live {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: var(--font-mono);
    font-size: 10.5px;
    font-weight: 600;
    color: #22C55E;
}

.orm_card_live_dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #22C55E;
    animation: orm-pulse 2s ease-in-out infinite;
}

@keyframes orm-pulse {
    0%, 100% { opacity: 1; }
    50%       { opacity: .35; }
}

/* Score area */
.orm_score_area {
    display: flex;
    align-items: center;
    gap: 22px;
    padding: 24px 22px 20px;
    border-bottom: 1px solid var(--gray-100);
}

.orm_score_num {
    font-family: var(--font-head);
    font-size: 68px;
    font-weight: 700;
    color: var(--navy);
    line-height: 1;
    letter-spacing: -0.04em;
    flex-shrink: 0;
}

.orm_score_right {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.orm_stars {
    display: flex;
    gap: 2px;
}

.orm_star .icon {
    width: 17px;
    height: 17px;
    color: #F59E0B;
    display: block;
}

.orm_score_label {
    font-family: var(--font-head);
    font-size: 13.5px;
    font-weight: 700;
    color: var(--navy);
    letter-spacing: -0.01em;
}

.orm_score_sub {
    font-family: var(--font-mono);
    font-size: 10.5px;
    color: var(--gray-500);
    letter-spacing: .03em;
}

/* Platform rows */
.orm_platforms {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 18px 22px 16px;
}

.orm_plat {
    display: grid;
    grid-template-columns: 18px 100px 1fr 32px;
    align-items: center;
    gap: 10px;
}

.orm_plat_icon .icon {
    width: 13px;
    height: 13px;
    color: var(--blue);
    display: block;
}

.orm_plat_name {
    font-size: 12.5px;
    font-weight: 600;
    color: var(--navy);
}

.orm_plat_bar_track {
    height: 4px;
    background: var(--gray-100);
    border-radius: 99px;
    overflow: hidden;
}

.orm_plat_bar_fill {
    height: 100%;
    width: 0;
    background: linear-gradient(90deg, var(--blue), var(--cyan));
    border-radius: 99px;
    transition: width 1.3s cubic-bezier(.4, 0, .2, 1) .5s;
}

.reveal:not(.pending) .orm_plat_bar_fill {
    width: var(--pw);
}

.orm_plat_rating {
    font-family: var(--font-mono);
    font-size: 11.5px;
    font-weight: 600;
    color: var(--blue);
    text-align: right;
}

/* Tags strip — reuses svc_dash_fmt_tag for shared visual style */
.orm_card_tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 14px 22px;
    border-top: 1px solid var(--gray-100);
    background: var(--gray-50);
}

/* Floating badges */
.orm_badge {
    position: absolute;
    background: #FFFFFF;
    border-radius: var(--radius);
    box-shadow: var(--sh-lg);
    padding: 13px 16px;
    display: flex;
    align-items: center;
    gap: 10px;
    z-index: 2;
    border: 1px solid var(--gray-200);
}

.orm_badge--a {
    bottom: -20px;
    left: -24px;
}

.orm_badge--b {
    top: -16px;
    right: -20px;
}

.orm_badge_icon .icon {
    width: 16px;
    height: 16px;
    color: var(--cyan);
    display: block;
}

.orm_badge_icon--star .icon {
    color: #F59E0B;
}

.orm_badge_num {
    font-family: var(--font-head);
    font-size: 28px;
    font-weight: 700;
    color: var(--navy);
    line-height: 1;
}

.orm_badge_sub {
    font-size: 11px;
    color: var(--gray-600);
    line-height: 1.4;
    margin-top: 3px;
}

.orm_badge_val {
    font-family: var(--font-head);
    font-size: 17px;
    font-weight: 700;
    color: var(--navy);
    line-height: 1.1;
}

.orm_badge_label {
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--gray-500);
    margin-top: 2px;
}


/* =====================================================================
   ORM IMPACT  (.orm_impact, .orm_impact_inner, .orm_impact_icon)
   Modifier for svc_feature_blk: centered layout, icon well, larger type.
   ===================================================================== */
.orm_impact_inner {
    text-align: center;
    margin: 0 auto;
}

.orm_impact_icon {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background: rgba(0, 157, 220, .15);
    display: grid;
    place-items: center;
    margin: 0 auto 32px;
}

.orm_impact_icon .icon {
    width: 32px;
    height: 32px;
    color: var(--cyan);
    display: block;
}

.orm_impact .svc_feature_blk_inner p {
    font-size: clamp(19px, 2.2vw, 24px);
    line-height: 1.7;
    color: rgba(255, 255, 255, .84);
}


/* =====================================================================
   RESPONSIVE — online reputation management additions
   ===================================================================== */

/* 820px */
@media (max-width: 820px) {
    .orm_badge {
        display: none;
    }
}

/* 620px */
@media (max-width: 620px) {
    .orm_score_num {
        font-size: 52px;
    }
    .orm_impact .svc_feature_blk_inner p {
        font-size: 18px;
    }
}


/* =====================================================================
   EMAIL MARKETING — HERO VISUAL  (.emk_viz)
   Email inbox illustration. Page-specific prefix: emk_
   ===================================================================== */
.emk_viz {
    position: relative;
}

.emk_inbox {
    background: #FFFFFF;
    border-radius: var(--radius-lg);
    box-shadow: var(--sh-xl);
    border: 1px solid var(--gray-200);
    overflow: hidden;
    position: relative;
    z-index: 1;
}

/* App chrome header */
.emk_inbox_head {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 13px 20px;
    background: var(--gray-50);
    border-bottom: 1px solid var(--gray-200);
}

.emk_inbox_title {
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--gray-500);
    margin-left: 8px;
}

/* Email rows */
.emk_rows {
    display: flex;
    flex-direction: column;
}

.emk_row {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 13px 20px;
    border-bottom: 1px solid var(--gray-100);
    transition: background .2s;
}

.emk_row:last-child {
    border-bottom: none;
}

.emk_row--active {
    background: linear-gradient(90deg, rgba(0, 56, 208, .04), transparent);
    border-left: 3px solid var(--blue);
    padding-left: 17px;
}

.emk_row_dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--gray-200);
    flex-shrink: 0;
    margin-top: 5px;
}

.emk_row_dot--unread {
    background: var(--blue);
}

.emk_row_content {
    flex: 1;
    min-width: 0;
}

.emk_row_top {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 8px;
    margin-bottom: 3px;
}

.emk_row_subject {
    font-size: 12.5px;
    font-weight: 600;
    color: var(--navy);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
}

.emk_row_time {
    font-family: var(--font-mono);
    font-size: 10px;
    color: var(--gray-500);
    flex-shrink: 0;
}

.emk_row_preview {
    font-size: 11.5px;
    color: var(--gray-500);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Stats strip */
.emk_stats {
    display: flex;
    border-top: 1px solid var(--gray-200);
    background: var(--gray-50);
}

.emk_stat {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    padding: 14px 12px;
    border-right: 1px solid var(--gray-200);
}

.emk_stat:last-child {
    border-right: none;
}

.emk_stat_val {
    font-family: var(--font-head);
    font-size: 20px;
    font-weight: 700;
    color: var(--blue);
    line-height: 1;
    letter-spacing: -0.02em;
}

.emk_stat_label {
    font-family: var(--font-mono);
    font-size: 9.5px;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--gray-500);
}

/* Floating badges */
.emk_badge {
    position: absolute;
    background: #FFFFFF;
    border-radius: var(--radius);
    box-shadow: var(--sh-lg);
    padding: 13px 16px;
    display: flex;
    align-items: center;
    gap: 10px;
    z-index: 2;
    border: 1px solid var(--gray-200);
}

.emk_badge--a {
    bottom: -20px;
    left: -24px;
}

.emk_badge--b {
    top: -16px;
    right: -20px;
}

.emk_badge_icon .icon {
    width: 16px;
    height: 16px;
    color: var(--cyan);
    display: block;
}

.emk_badge_num {
    font-family: var(--font-head);
    font-size: 28px;
    font-weight: 700;
    color: var(--blue);
    line-height: 1;
}

.emk_badge_sub {
    font-size: 11px;
    color: var(--gray-600);
    line-height: 1.4;
    margin-top: 3px;
}

.emk_badge_val {
    font-family: var(--font-head);
    font-size: 17px;
    font-weight: 700;
    color: var(--navy);
    line-height: 1.1;
}

.emk_badge_label {
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--gray-500);
    margin-top: 2px;
}


/* =====================================================================
   EMAIL MARKETING — CONTENT CARD  (.emk_content_card)
   Single centered card for the Communication & Automation section.
   ===================================================================== */
.emk_content_card {
    max-width: 840px;
    margin: 0 auto;
    background: #FFFFFF;
    border-radius: var(--radius-lg);
    border: 1px solid var(--gray-200);
    box-shadow: var(--sh-md);
    padding: 48px 56px;
    display: flex;
    gap: 36px;
    align-items: flex-start;
    position: relative;
    overflow: hidden;
    transition: box-shadow .3s;
}

.emk_content_card::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    background: linear-gradient(180deg, var(--blue), var(--cyan));
    border-radius: 0 99px 99px 0;
}

.emk_content_card_icon {
    width: 64px;
    height: 64px;
    border-radius: var(--radius-sm);
    background: linear-gradient(135deg, var(--blue-light), rgba(0, 157, 220, .12));
    display: grid;
    place-items: center;
    flex-shrink: 0;
}

.emk_content_card_icon .icon {
    width: 28px;
    height: 28px;
    color: var(--blue);
}

.emk_content_card_body .eyebrow {
    margin-bottom: 18px;
    display: block;
}

.emk_content_card_body p {
    font-size: 18px;
    color: var(--gray-600);
    line-height: 1.8;
}


/* =====================================================================
   RESPONSIVE — email marketing additions
   ===================================================================== */

/* 820px */
@media (max-width: 820px) {
    .emk_badge {
        display: none;
    }
    .emk_content_card {
        padding: 36px 32px;
    }
}

/* 620px */
@media (max-width: 620px) {
    .emk_content_card {
        flex-direction: column;
        gap: 24px;
        padding: 28px 24px;
    }
    .emk_content_card_icon {
        width: 52px;
        height: 52px;
    }
    .emk_content_card_body p {
        font-size: 16.5px;
    }
}


/* =====================================================================
   WEB DESIGN & DEVELOPMENT — HERO VISUAL  (.wdd_viz)
   Browser mockup with healthcare site preview. Prefix: wdd_
   ===================================================================== */
.wdd_viz {
    position: relative;
}

.wdd_browser {
    background: #FFFFFF;
    border-radius: var(--radius-lg);
    box-shadow: var(--sh-xl);
    border: 1px solid var(--gray-200);
    overflow: hidden;
    position: relative;
    z-index: 1;
}

/* Browser chrome bar */
.wdd_chrome {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 16px;
    background: var(--gray-100);
    border-bottom: 1px solid var(--gray-200);
}

.wdd_chrome_dots {
    display: flex;
    gap: 6px;
    flex-shrink: 0;
}

.wdd_url_bar {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 6px;
    background: #FFFFFF;
    border: 1px solid var(--gray-200);
    border-radius: 99px;
    padding: 5px 13px;
}

.wdd_url_bar .icon {
    width: 11px;
    height: 11px;
    color: #22C55E;
    flex-shrink: 0;
}

.wdd_url_bar span {
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--gray-500);
    letter-spacing: .02em;
}

/* Mock website container */
.wdd_site {
    display: flex;
    flex-direction: column;
}

/* Mock nav */
.wdd_site_nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 9px 16px;
    border-bottom: 1px solid var(--gray-100);
}

.wdd_nav_logo {
    width: 60px;
    height: 14px;
    border-radius: 3px;
    background: linear-gradient(90deg, var(--blue), var(--cyan));
}

.wdd_nav_links {
    display: flex;
    align-items: center;
    gap: 10px;
}

.wdd_nav_link {
    width: 28px;
    height: 6px;
    border-radius: 99px;
    background: var(--gray-200);
}

.wdd_nav_link--cta {
    width: 40px;
    height: 18px;
    border-radius: 99px;
    background: var(--blue);
}

/* Mock hero section */
.wdd_site_hero {
    background: linear-gradient(135deg, var(--navy) 0%, var(--blue) 100%);
    padding: 24px 18px 20px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.wdd_site_line {
    height: 8px;
    border-radius: 99px;
    background: rgba(255, 255, 255, .35);
}

.wdd_site_line--lg { width: 78%; }
.wdd_site_line--md { width: 58%; }
.wdd_site_line--sm { width: 36%; }

.wdd_hero_cta_chip {
    width: 80px;
    height: 20px;
    border-radius: 99px;
    background: rgba(255, 255, 255, .9);
    margin-top: 8px;
}

/* Mock service cards */
.wdd_site_cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    padding: 12px 14px;
    border-bottom: 1px solid var(--gray-100);
}

.wdd_site_card {
    background: var(--gray-50);
    border: 1px solid var(--gray-200);
    border-radius: 6px;
    padding: 8px 8px 7px;
}

.wdd_card_img {
    height: 26px;
    border-radius: 4px;
    background: linear-gradient(135deg, var(--blue-light), rgba(0, 157, 220, .18));
    margin-bottom: 6px;
}

.wdd_card_line {
    height: 5px;
    border-radius: 99px;
    background: var(--gray-300);
    margin-bottom: 4px;
}

.wdd_card_line--sm {
    width: 60%;
    background: var(--gray-200);
    margin-bottom: 0;
}

/* Metrics strip */
.wdd_site_metrics {
    display: flex;
    background: var(--gray-50);
}

.wdd_metric {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    padding: 9px 6px;
    border-right: 1px solid var(--gray-200);
    font-family: var(--font-mono);
    font-size: 10px;
    font-weight: 600;
    color: var(--gray-500);
    letter-spacing: .04em;
}

.wdd_metric:last-child {
    border-right: none;
}

.wdd_metric .icon {
    width: 11px;
    height: 11px;
    color: #22C55E;
    display: block;
    flex-shrink: 0;
}

/* Floating badges */
.wdd_badge {
    position: absolute;
    background: #FFFFFF;
    border-radius: var(--radius);
    box-shadow: var(--sh-lg);
    padding: 13px 16px;
    display: flex;
    align-items: center;
    gap: 10px;
    z-index: 2;
    border: 1px solid var(--gray-200);
}

.wdd_badge--a {
    bottom: -20px;
    left: -24px;
}

.wdd_badge--b {
    top: -16px;
    right: -20px;
}

.wdd_badge_icon .icon {
    width: 16px;
    height: 16px;
    color: var(--cyan);
    display: block;
}

.wdd_badge_val {
    font-family: var(--font-head);
    font-size: 14px;
    font-weight: 700;
    color: var(--navy);
    line-height: 1.1;
}

.wdd_badge_label {
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--gray-500);
    margin-top: 2px;
}

.wdd_badge_num {
    font-family: var(--font-head);
    font-size: 28px;
    font-weight: 700;
    color: var(--blue);
    line-height: 1;
}

.wdd_badge_sub {
    font-size: 11px;
    color: var(--gray-600);
    line-height: 1.4;
    margin-top: 3px;
}


/* =====================================================================
   WEB DESIGN — CALLOUT CARD  (.wdd_callout_card)
   Centered premium card for the Business Card Website section.
   ===================================================================== */
.wdd_callout_card {
    max-width: 820px;
    margin: 0 auto;
    background: #FFFFFF;
    border-radius: var(--radius-lg);
    border: 1px solid var(--gray-200);
    box-shadow: var(--sh-md);
    padding: 52px 60px;
    text-align: center;
    position: relative;
    overflow: hidden;
}

.wdd_callout_card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--blue), var(--cyan));
}

.wdd_callout_icon {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--blue-light), rgba(0, 157, 220, .12));
    display: grid;
    place-items: center;
    margin: 0 auto 28px;
}

.wdd_callout_icon .icon {
    width: 30px;
    height: 30px;
    color: var(--blue);
    display: block;
}

.wdd_callout_card p {
    font-family: var(--font-head);
    font-size: clamp(17px, 1.8vw, 21px);
    font-weight: 500;
    color: var(--navy);
    line-height: 1.6;
    letter-spacing: -0.01em;
}


/* =====================================================================
   WEB DESIGN — STRATEGIC MODIFIER  (.wdd_strategic)
   Modifier for svc_feature_blk: enlarges paragraph text, widens inner.
   ===================================================================== */
.wdd_strategic .svc_feature_blk_inner {
    max-width: 920px;
}

.wdd_strategic .svc_feature_blk_inner p {
    font-size: clamp(18px, 2.1vw, 23px);
    line-height: 1.75;
    color: rgba(255, 255, 255, .86);
}


/* =====================================================================
   RESPONSIVE — web design & development additions
   ===================================================================== */

/* 820px */
@media (max-width: 820px) {
    .wdd_badge {
        display: none;
    }
    .wdd_callout_card {
        padding: 40px 36px;
    }
}

/* 620px */
@media (max-width: 620px) {
    .wdd_callout_card {
        padding: 32px 24px;
    }
    .wdd_callout_card p {
        font-size: 17px;
    }
    .wdd_strategic .svc_feature_blk_inner p {
        font-size: 18px;
    }
    .wdd_site_cards {
        grid-template-columns: repeat(3, 1fr);
    }
    .wdd_nav_link:nth-child(2),
    .wdd_nav_link:nth-child(3) {
        display: none;
    }
}


/* =====================================================================
   PPC ADVERTISING — HERO WRAPPER & BADGES  (.ppc_viz, .ppc_badge)
   The main hero card reuses the existing svc_dash_card system entirely.
   Only the wrapper and floating badges need page-specific CSS.
   Prefix: ppc_
   ===================================================================== */
.ppc_viz {
    position: relative;
}

.ppc_badge {
    position: absolute;
    background: #FFFFFF;
    border-radius: var(--radius);
    box-shadow: var(--sh-lg);
    padding: 13px 16px;
    display: flex;
    align-items: center;
    gap: 10px;
    z-index: 2;
    border: 1px solid var(--gray-200);
}

.ppc_badge--a {
    bottom: -20px;
    left: -24px;
}

.ppc_badge--b {
    top: -16px;
    right: -20px;
}

.ppc_badge_icon .icon {
    width: 16px;
    height: 16px;
    color: var(--cyan);
    display: block;
}

.ppc_badge_num {
    font-family: var(--font-head);
    font-size: 28px;
    font-weight: 700;
    color: var(--blue);
    line-height: 1;
}

.ppc_badge_sub {
    font-size: 11px;
    color: var(--gray-600);
    line-height: 1.4;
    margin-top: 3px;
}

.ppc_badge_val {
    font-family: var(--font-head);
    font-size: 17px;
    font-weight: 700;
    color: var(--navy);
    line-height: 1.1;
}

.ppc_badge_label {
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--gray-500);
    margin-top: 2px;
}


/* =====================================================================
   PPC — STRATEGIC MODIFIER  (.ppc_strategic)
   Modifier for svc_feature_blk: enlarges paragraph for the Campaign
   Planning section, the strongest content section on the page.
   ===================================================================== */
.ppc_strategic .svc_feature_blk_inner {
    max-width: 920px;
}

.ppc_strategic .svc_feature_blk_inner p {
    font-size: clamp(18px, 2.1vw, 23px);
    line-height: 1.75;
    color: rgba(255, 255, 255, .86);
}


/* =====================================================================
   RESPONSIVE — PPC additions
   ===================================================================== */

/* 820px */
@media (max-width: 820px) {
    .ppc_badge {
        display: none;
    }
}

/* 620px */
@media (max-width: 620px) {
    .ppc_strategic .svc_feature_blk_inner p {
        font-size: 18px;
    }
}


/* =====================================================================
   VMK — VIDEO MARKETING PAGE
   ===================================================================== */


/* =====================================================================
   VMK — HERO VISUALIZATION  (.vmk_viz, .vmk_player)
   Video player mockup for the hero right column.
   ===================================================================== */
.vmk_viz {
    position: relative;
    flex-shrink: 0;
    width: 100%;
    max-width: 420px;
}

.vmk_player {
    background: #FFFFFF;
    border-radius: var(--radius-lg);
    box-shadow: var(--sh-xl);
    border: 1px solid var(--gray-100);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.vmk_player_head {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 14px 18px;
    border-bottom: 1px solid var(--gray-100);
    background: var(--gray-50);
}

.vmk_player_title {
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 600;
    color: var(--gray-500);
    text-transform: uppercase;
    letter-spacing: .06em;
    margin-left: 8px;
}

/* Video screen area */
.vmk_screen {
    position: relative;
    background: linear-gradient(160deg, var(--navy) 0%, #0A3580 60%, #0038D0 100%);
    height: 180px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.vmk_screen::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at 30% 50%, rgba(0, 157, 220, .18) 0%, transparent 65%);
    pointer-events: none;
}

.vmk_play_btn {
    position: relative;
    z-index: 2;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .15);
    backdrop-filter: blur(4px);
    border: 2px solid rgba(255, 255, 255, .35);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.vmk_play_btn::after {
    content: '';
    display: block;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 10px 0 10px 18px;
    border-color: transparent transparent transparent rgba(255, 255, 255, .9);
    margin-left: 4px;
}

.vmk_screen_lines {
    position: absolute;
    bottom: 18px;
    left: 18px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    z-index: 2;
    pointer-events: none;
}

.vmk_screen_line {
    border-radius: 3px;
    background: rgba(255, 255, 255, .25);
    height: 6px;
}

.vmk_screen_line--lg { width: 120px; }
.vmk_screen_line--sm { width: 76px; }

/* Progress bar */
.vmk_progress_wrap {
    padding: 16px 18px 6px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.vmk_progress_bar {
    position: relative;
    height: 4px;
    background: var(--gray-200);
    border-radius: 4px;
}

.vmk_progress_fill {
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 31%;
    background: linear-gradient(90deg, var(--blue), var(--cyan));
    border-radius: 4px;
}

.vmk_progress_dot {
    position: absolute;
    top: 50%;
    left: 31%;
    transform: translate(-50%, -50%);
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--blue);
    border: 2px solid #fff;
    box-shadow: 0 0 0 2px rgba(0, 56, 208, .25);
}

.vmk_progress_times {
    display: flex;
    justify-content: space-between;
    font-family: var(--font-mono);
    font-size: 10px;
    color: var(--gray-400);
}

/* Engagement row */
.vmk_engagements {
    display: flex;
    gap: 20px;
    padding: 10px 18px;
    border-top: 1px solid var(--gray-100);
}

.vmk_eng_item {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--gray-500);
}

.vmk_eng_item .icon {
    width: 12px;
    height: 12px;
    color: var(--blue);
}

/* Bottom format chips */
.vmk_player_tags {
    display: flex;
    gap: 6px;
    padding: 12px 18px;
    flex-wrap: wrap;
    border-top: 1px solid var(--gray-100);
}


/* =====================================================================
   VMK — FLOATING BADGES  (.vmk_badge)
   ===================================================================== */
.vmk_badge {
    position: absolute;
    display: flex;
    align-items: center;
    gap: 10px;
    background: #FFFFFF;
    border-radius: var(--radius);
    box-shadow: var(--sh-lg);
    border: 1px solid var(--gray-100);
    padding: 10px 14px;
    white-space: nowrap;
    pointer-events: none;
}

.vmk_badge--a {
    top: -18px;
    right: -24px;
}

.vmk_badge--b {
    bottom: 28px;
    left: -28px;
}

.vmk_badge_icon {
    width: 32px;
    height: 32px;
    border-radius: var(--radius-sm);
    background: linear-gradient(135deg, var(--blue-light), rgba(0, 157, 220, .12));
    display: grid;
    place-items: center;
    flex-shrink: 0;
}

.vmk_badge_icon .icon {
    width: 16px;
    height: 16px;
    color: var(--blue);
}

.vmk_badge_num {
    font-family: var(--font-head);
    font-size: 20px;
    font-weight: 800;
    color: var(--navy);
    line-height: 1;
}

.vmk_badge_sub {
    font-size: 10px;
    color: var(--gray-500);
    line-height: 1.35;
    margin-top: 2px;
}

.vmk_badge_val {
    font-family: var(--font-head);
    font-size: 14px;
    font-weight: 700;
    color: var(--navy);
    line-height: 1;
}

.vmk_badge_label {
    font-family: var(--font-mono);
    font-size: 9px;
    font-weight: 600;
    color: var(--blue);
    text-transform: uppercase;
    letter-spacing: .08em;
    margin-top: 3px;
}


/* =====================================================================
   VMK — VIDEO TYPES CARD  (.vmk_types_card)
   Section 3: featured content block with intro sentence + type chips.
   ===================================================================== */
.vmk_types_card {
    max-width: 880px;
    margin: 0 auto;
    background: #FFFFFF;
    border-radius: var(--radius-lg);
    box-shadow: var(--sh-md);
    border: 1px solid var(--gray-100);
    padding: 52px 56px;
    display: flex;
    gap: 36px;
    align-items: flex-start;
    position: relative;
}

.vmk_types_card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    background: linear-gradient(90deg, var(--blue), var(--cyan));
}

.vmk_types_icon {
    width: 60px;
    height: 60px;
    border-radius: var(--radius);
    background: linear-gradient(135deg, var(--blue-light), rgba(0, 157, 220, .12));
    display: grid;
    place-items: center;
    flex-shrink: 0;
    margin-top: 4px;
}

.vmk_types_icon .icon {
    width: 28px;
    height: 28px;
    color: var(--blue);
}

.vmk_types_body {
    flex: 1;
    min-width: 0;
}

.vmk_types_body .eyebrow {
    display: block;
    margin-bottom: 12px;
}

.vmk_types_body > p {
    font-size: clamp(16px, 1.8vw, 18px);
    color: var(--gray-600);
    line-height: 1.75;
    margin-bottom: 28px;
}

/* Type chips */
.vmk_type_chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.vmk_type_chip {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 7px 14px;
    background: var(--blue-light);
    border-radius: 100px;
    font-family: var(--font-mono);
    font-size: 12px;
    font-weight: 600;
    color: var(--blue);
    letter-spacing: .02em;
    transition: background .2s, transform .2s;
    cursor: default;
}

.vmk_type_chip:hover {
    background: rgba(0, 56, 208, .14);
    transform: translateY(-2px);
}

.vmk_type_chip_icon {
    display: flex;
    align-items: center;
}

.vmk_type_chip_icon .icon {
    width: 14px;
    height: 14px;
    color: var(--blue);
}


/* =====================================================================
   VMK — STATISTICS GRID  (.vmk_stats_grid, .vmk_stat_card)
   Section 4: 5-card stat grid — strongest visual component on the page.
   Layout (3 cols): [YouTube ×2] [75%]
                    [72%] [48%] [1h 43m]
   ===================================================================== */
.vmk_stats_grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

.vmk_stat_card {
    background: #FFFFFF;
    border-radius: var(--radius-lg);
    box-shadow: var(--sh-sm);
    border: 1px solid var(--gray-100);
    padding: 40px 36px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    position: relative;
    overflow: hidden;
    transition: transform .28s cubic-bezier(.2, .7, .3, 1), box-shadow .28s;
}

.vmk_stat_card::after {
    content: '';
    position: absolute;
    bottom: 0; left: 0; right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--blue), var(--cyan));
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .35s ease;
}

.vmk_stat_card:hover {
    transform: translateY(-5px);
    box-shadow: var(--sh-blue);
}

.vmk_stat_card:hover::after {
    transform: scaleX(1);
}

/* YouTube wide card */
.vmk_stat_card--yt {
    grid-column: span 2;
    flex-direction: row;
    align-items: center;
    gap: 28px;
    padding: 44px 40px;
}

.vmk_stat_icon {
    width: 72px;
    height: 72px;
    border-radius: var(--radius);
    background: linear-gradient(135deg, var(--blue-light), rgba(0, 157, 220, .14));
    display: grid;
    place-items: center;
    flex-shrink: 0;
}

.vmk_stat_icon .icon {
    width: 30px;
    height: 30px;
    color: var(--blue);
}

/* Large gradient number */
.vmk_stat_num {
    font-family: var(--font-head);
    font-size: clamp(44px, 5.5vw, 72px);
    font-weight: 800;
    line-height: 1;
    letter-spacing: -0.03em;
    background: linear-gradient(135deg, var(--blue) 0%, var(--cyan) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.vmk_stat_num--sm {
    font-size: clamp(32px, 4vw, 52px);
}

/* Stat body text */
.vmk_stat_body {
    font-size: clamp(14px, 1.45vw, 16px);
    color: var(--gray-600);
    line-height: 1.7;
    margin: 0;
}

/* YouTube card body gets heading-weight treatment */
.vmk_stat_body--yt {
    font-family: var(--font-head);
    font-size: clamp(18px, 2.2vw, 26px);
    font-weight: 600;
    color: var(--navy);
    line-height: 1.4;
}


/* =====================================================================
   RESPONSIVE — VMK additions
   ===================================================================== */

/* 820px */
@media (max-width: 820px) {
    .vmk_badge {
        display: none;
    }

    .vmk_types_card {
        flex-direction: column;
        gap: 20px;
        padding: 36px 32px;
    }

    .vmk_stats_grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .vmk_stat_card--yt {
        grid-column: span 2;
    }
}

/* 620px */
@media (max-width: 620px) {
    .vmk_types_card {
        padding: 28px 24px;
    }

    .vmk_stats_grid {
        grid-template-columns: 1fr;
    }

    .vmk_stat_card--yt {
        grid-column: span 1;
        flex-direction: column;
        align-items: flex-start;
    }

    .vmk_stat_num {
        font-size: 44px;
    }

    .vmk_stat_num--sm {
        font-size: 32px;
    }
}


/* =====================================================================
   WRK — OUR WORK / PORTFOLIO PAGE
   ===================================================================== */


/* =====================================================================
   WRK — HERO VISUALIZATION  (.wrk_viz, .wrk_dash)
   Portfolio preview card showing 6 client logos in a 3×2 grid.
   ===================================================================== */
.wrk_viz {
    position: relative;
    flex-shrink: 0;
    width: 100%;
    max-width: 440px;
}

.wrk_dash {
    background: #FFFFFF;
    border-radius: var(--radius-lg);
    box-shadow: var(--sh-xl);
    border: 1px solid var(--gray-100);
    overflow: hidden;
}

.wrk_dash_head {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 14px 18px;
    border-bottom: 1px solid var(--gray-100);
    background: var(--gray-50);
}

.wrk_dash_title {
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 600;
    color: var(--gray-500);
    text-transform: uppercase;
    letter-spacing: .06em;
    margin-left: 8px;
}

/* 3×2 mini logo grid */
.wrk_logo_preview {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    padding: 16px 18px;
}

.wrk_logo_cell {
    background: var(--gray-50);
    border: 1px solid var(--gray-100);
    border-radius: var(--radius-sm);
    height: 72px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px 14px;
    overflow: hidden;
}

.wrk_logo_cell_img {
    max-width: 100%;
    max-height: 48px;
    width: auto;
    height: auto;
    object-fit: contain;
}

/* Tag strip at bottom of hero card */
.wrk_dash_foot {
    display: flex;
    gap: 6px;
    padding: 12px 18px;
    border-top: 1px solid var(--gray-100);
    flex-wrap: wrap;
}


/* =====================================================================
   WRK — FLOATING BADGES  (.wrk_badge)
   ===================================================================== */
.wrk_badge {
    position: absolute;
    display: flex;
    align-items: center;
    gap: 10px;
    background: #FFFFFF;
    border-radius: var(--radius);
    box-shadow: var(--sh-lg);
    border: 1px solid var(--gray-100);
    padding: 10px 14px;
    white-space: nowrap;
    pointer-events: none;
}

.wrk_badge--a {
    top: -18px;
    right: -24px;
}

.wrk_badge--b {
    bottom: 24px;
    left: -28px;
}

.wrk_badge_icon {
    width: 32px;
    height: 32px;
    border-radius: var(--radius-sm);
    background: linear-gradient(135deg, var(--blue-light), rgba(0, 157, 220, .12));
    display: grid;
    place-items: center;
    flex-shrink: 0;
}

.wrk_badge_icon .icon {
    width: 16px;
    height: 16px;
    color: var(--blue);
}

.wrk_badge_num {
    font-family: var(--font-head);
    font-size: 20px;
    font-weight: 800;
    color: var(--navy);
    line-height: 1;
}

.wrk_badge_sub {
    font-size: 10px;
    color: var(--gray-500);
    line-height: 1.35;
    margin-top: 2px;
}

.wrk_badge_val {
    font-family: var(--font-head);
    font-size: 14px;
    font-weight: 700;
    color: var(--navy);
    line-height: 1;
}

.wrk_badge_label {
    font-family: var(--font-mono);
    font-size: 9px;
    font-weight: 600;
    color: var(--blue);
    text-transform: uppercase;
    letter-spacing: .08em;
    margin-top: 3px;
}


/* =====================================================================
   WRK — PORTFOLIO GRID  (.wrk_grid, .wrk_card)
   Primary visual component of the page — 4-col card grid.
   White cards on bg-tint; logo centred in gradient visual area.
   ===================================================================== */
.wrk_grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
}

.wrk_card {
    background: #FFFFFF;
    border-radius: var(--radius-lg);
    border: 1px solid var(--gray-100);
    overflow: hidden;
    box-shadow: var(--sh-sm);
    position: relative;
    transition: transform .28s cubic-bezier(.2, .7, .3, 1), box-shadow .28s;
}

/* Sliding gradient accent on hover */
.wrk_card::after {
    content: '';
    position: absolute;
    bottom: 0; left: 0; right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--blue), var(--cyan));
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .35s ease;
}

.wrk_card:hover {
    transform: translateY(-6px);
    box-shadow: var(--sh-blue);
}

.wrk_card:hover::after {
    transform: scaleX(1);
}

/* Logo display area */
.wrk_card_visual {
    height: 160px;
    background: linear-gradient(135deg, #f4f8ff 0%, #edf3ff 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    border-bottom: 1px solid var(--gray-100);
    overflow: hidden;
}

.wrk_card_logo {
    max-width: 100%;
    max-height: 84px;
    width: auto;
    height: auto;
    object-fit: contain;
    filter: drop-shadow(0 2px 8px rgba(0, 0, 0, .06));
    transition: transform .28s cubic-bezier(.2, .7, .3, 1);
}

.wrk_card:hover .wrk_card_logo {
    transform: scale(1.05);
}

/* Name + category footer */
.wrk_card_foot {
    padding: 16px 20px 18px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.wrk_card_name {
    font-family: var(--font-head);
    font-size: 15px;
    font-weight: 700;
    color: var(--navy);
    line-height: 1.25;
}


/* =====================================================================
   RESPONSIVE — WRK additions
   ===================================================================== */

/* 1100px — 3 columns */
@media (max-width: 1100px) {
    .wrk_grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* 820px */
@media (max-width: 820px) {
    .wrk_badge {
        display: none;
    }

    .wrk_grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 16px;
    }
}

/* 480px — single column */
@media (max-width: 480px) {
    .wrk_grid {
        grid-template-columns: 1fr;
        gap: 14px;
    }

    .wrk_card_visual {
        height: 140px;
    }
}


/* =====================================================================
   REUSABLE — TABLE COMPONENTS  (.svc_table_wrap, .svc_table)
   Shared by all service pages that require benchmark / comparison data.
   First used in call-center.php; available to all future pages.
   ===================================================================== */
.svc_table_wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border-radius: var(--radius-lg);
    box-shadow: var(--sh-md);
    border: 1px solid var(--gray-100);
    margin-bottom: 8px;
}

.svc_table {
    width: 100%;
    border-collapse: collapse;
    font-size: 15px;
    background: #FFFFFF;
    min-width: 480px;
}

.svc_table thead tr {
    background: var(--navy);
}

.svc_table thead th {
    padding: 16px 22px;
    text-align: left;
    font-family: var(--font-head);
    font-size: 12px;
    font-weight: 700;
    color: rgba(255, 255, 255, .78);
    letter-spacing: .05em;
    text-transform: uppercase;
    white-space: nowrap;
}

.svc_table thead th.col--good {
    color: var(--cyan);
}

.svc_table tbody tr {
    border-bottom: 1px solid var(--gray-100);
    transition: background .15s;
}

.svc_table tbody tr:last-child {
    border-bottom: none;
}

.svc_table tbody tr:hover {
    background: var(--gray-50);
}

.svc_table tbody td {
    padding: 15px 22px;
    color: var(--ink);
    line-height: 1.5;
    font-size: 15px;
    vertical-align: middle;
}

/* Column semantic types */
.svc_table td.col--good {
    color: var(--blue);
    font-weight: 600;
}

.svc_table td.col--warn {
    color: var(--gray-500);
}

.svc_table td.col--pct {
    font-family: var(--font-head);
    font-size: 18px;
    font-weight: 800;
    color: var(--navy);
    white-space: nowrap;
}

.svc_table td.col--partial {
    color: var(--gray-500);
    font-style: italic;
}

/* Total / summary row */
.svc_table tr.row--total {
    background: var(--navy);
    border-top: 2px solid rgba(0, 56, 208, .2);
}

.svc_table tr.row--total td {
    color: #FFFFFF;
    padding: 18px 22px;
}

.svc_table tr.row--total td.col--good--strong {
    color: var(--cyan);
}

.svc_table tr.row--total:hover {
    background: var(--navy);
}

/* Volume table — wider % column */
.svc_table--volume .col--pct {
    text-align: center;
}


/* =====================================================================
   CC — MEDICAL CALL CENTER PAGE
   ===================================================================== */


/* =====================================================================
   CC — ANIMATIONS
   ===================================================================== */
@keyframes cc-pulse {
    0%, 100% { opacity: 1; }
    50%       { opacity: .3; }
}

@keyframes cc-ring {
    0%, 90%, 100%         { transform: rotate(0deg); }
    10%, 30%, 50%, 70%    { transform: rotate(-9deg); }
    20%, 40%, 60%, 80%    { transform: rotate(9deg); }
}


/* =====================================================================
   CC — HERO TEXT  (.cc_hero_tagline, .cc_hero_body)
   ===================================================================== */
.cc_hero_tagline {
    font-family: var(--font-head);
    font-size: clamp(17px, 2vw, 22px);
    font-weight: 700;
    color: var(--navy);
    line-height: 1.35;
    max-width: 560px;
    margin-bottom: 14px;
}

.cc_hero_body {
    font-size: clamp(14px, 1.5vw, 16px);
    color: var(--gray-600);
    line-height: 1.75;
    max-width: 560px;
    margin-bottom: 32px;
}


/* =====================================================================
   CC — HERO VISUALIZATION  (.cc_viz, .cc_dash)
   Call center dashboard card for the hero right column.
   ===================================================================== */
.cc_viz {
    position: relative;
    flex-shrink: 0;
    width: 100%;
    max-width: 420px;
}

.cc_dash {
    background: #FFFFFF;
    border-radius: var(--radius-lg);
    box-shadow: var(--sh-xl);
    border: 1px solid var(--gray-100);
    overflow: hidden;
}

/* Header */
.cc_dash_head {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 13px 18px;
    border-bottom: 1px solid var(--gray-100);
    background: var(--gray-50);
}

.cc_dash_title {
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 600;
    color: var(--gray-500);
    text-transform: uppercase;
    letter-spacing: .06em;
    margin-left: 8px;
    flex: 1;
}

.cc_dash_live {
    display: flex;
    align-items: center;
    gap: 5px;
    font-family: var(--font-mono);
    font-size: 10px;
    font-weight: 700;
    color: #16a34a;
    text-transform: uppercase;
    letter-spacing: .06em;
}

.cc_dash_live_dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #16a34a;
    animation: cc-pulse 1.5s ease-in-out infinite;
}

/* Active incoming call row */
.cc_call_row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 13px 18px;
    border-bottom: 1px solid var(--gray-100);
    background: rgba(0, 56, 208, .025);
}

.cc_call_icon {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--blue-light), rgba(0, 157, 220, .15));
    display: grid;
    place-items: center;
    flex-shrink: 0;
}

.cc_call_icon .icon {
    width: 16px;
    height: 16px;
    color: var(--blue);
    animation: cc-ring 2.8s ease-in-out infinite;
}

.cc_call_info {
    flex: 1;
    min-width: 0;
}

.cc_call_type {
    display: block;
    font-family: var(--font-head);
    font-size: 13px;
    font-weight: 600;
    color: var(--navy);
}

.cc_call_status {
    display: block;
    font-family: var(--font-mono);
    font-size: 10px;
    color: var(--gray-400);
    margin-top: 2px;
}

.cc_call_badge {
    font-family: var(--font-mono);
    font-size: 9px;
    font-weight: 700;
    color: #16a34a;
    text-transform: uppercase;
    letter-spacing: .08em;
    background: rgba(22, 163, 74, .1);
    border-radius: 100px;
    padding: 3px 9px;
    white-space: nowrap;
}

/* Metric strip */
.cc_dash_metrics {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    border-bottom: 1px solid var(--gray-100);
}

.cc_dash_metric {
    padding: 13px 0;
    text-align: center;
    border-right: 1px solid var(--gray-100);
}

.cc_dash_metric:last-child {
    border-right: none;
}

.cc_dash_metric--accent .cc_dash_metric_val {
    background: linear-gradient(135deg, var(--blue), var(--cyan));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.cc_dash_metric_val {
    display: block;
    font-family: var(--font-head);
    font-size: 19px;
    font-weight: 800;
    color: var(--navy);
    line-height: 1;
}

.cc_dash_metric_label {
    display: block;
    font-family: var(--font-mono);
    font-size: 9px;
    color: var(--gray-400);
    text-transform: uppercase;
    letter-spacing: .06em;
    margin-top: 4px;
}

/* Answer / missed bars */
.cc_answer_bars {
    padding: 13px 18px;
    border-bottom: 1px solid var(--gray-100);
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.cc_answer_bar_row {
    display: grid;
    grid-template-columns: 62px 1fr 34px;
    align-items: center;
    gap: 8px;
}

.cc_answer_label {
    font-family: var(--font-mono);
    font-size: 10px;
    color: var(--gray-500);
}

.cc_answer_track {
    height: 6px;
    background: var(--gray-200);
    border-radius: 4px;
    overflow: hidden;
}

.cc_answer_fill {
    height: 100%;
    border-radius: 4px;
    width: 0;
    transition: width 1.2s cubic-bezier(.2, .7, .3, 1) .5s;
}

.reveal:not(.pending) .cc_answer_fill {
    width: var(--bw, 0%);
}

.cc_answer_fill--good {
    background: linear-gradient(90deg, var(--blue), var(--cyan));
}

.cc_answer_fill--miss {
    background: var(--gray-300);
}

.cc_answer_pct {
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 600;
    color: var(--gray-500);
    text-align: right;
}

/* Bottom tag chips */
.cc_dash_tags {
    display: flex;
    gap: 6px;
    padding: 12px 18px;
    flex-wrap: wrap;
}


/* =====================================================================
   CC — FLOATING BADGES  (.cc_badge)
   ===================================================================== */
.cc_badge {
    position: absolute;
    display: flex;
    align-items: center;
    gap: 10px;
    background: #FFFFFF;
    border-radius: var(--radius);
    box-shadow: var(--sh-lg);
    border: 1px solid var(--gray-100);
    padding: 10px 14px;
    white-space: nowrap;
    pointer-events: none;
}

.cc_badge--a {
    top: -18px;
    right: -24px;
}

.cc_badge--b {
    bottom: 24px;
    left: -28px;
}

.cc_badge_icon {
    width: 32px;
    height: 32px;
    border-radius: var(--radius-sm);
    background: linear-gradient(135deg, var(--blue-light), rgba(0, 157, 220, .12));
    display: grid;
    place-items: center;
    flex-shrink: 0;
}

.cc_badge_icon .icon {
    width: 16px;
    height: 16px;
    color: var(--blue);
}

.cc_badge_num {
    font-family: var(--font-head);
    font-size: 20px;
    font-weight: 800;
    color: var(--navy);
    line-height: 1;
}

.cc_badge_sub {
    font-size: 10px;
    color: var(--gray-500);
    line-height: 1.35;
    margin-top: 2px;
}

.cc_badge_val {
    font-family: var(--font-head);
    font-size: 14px;
    font-weight: 700;
    color: var(--navy);
    line-height: 1;
}

.cc_badge_label {
    font-family: var(--font-mono);
    font-size: 9px;
    font-weight: 600;
    color: var(--blue);
    text-transform: uppercase;
    letter-spacing: .08em;
    margin-top: 3px;
}


/* =====================================================================
   CC — INDUSTRY CONTEXT  (stat cards, calc block, source)
   ===================================================================== */
.cc_context_lead {
    font-size: clamp(16px, 1.8vw, 18px);
    color: var(--ink);
    line-height: 1.75;
    max-width: 820px;
    margin-bottom: 40px;
}

.cc_stat_grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    margin-bottom: 32px;
}

.cc_stat_card {
    background: #FFFFFF;
    border: 1px solid var(--gray-100);
    border-radius: var(--radius-lg);
    padding: 32px 24px 28px;
    box-shadow: var(--sh-sm);
    display: flex;
    flex-direction: column;
    gap: 14px;
    position: relative;
    overflow: hidden;
    transition: transform .25s cubic-bezier(.2, .7, .3, 1), box-shadow .25s;
}

.cc_stat_card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--blue), var(--cyan));
}

.cc_stat_card:hover {
    transform: translateY(-4px);
    box-shadow: var(--sh-blue);
}

.cc_stat_num {
    font-family: var(--font-head);
    font-size: clamp(36px, 4.5vw, 56px);
    font-weight: 800;
    line-height: 1;
    letter-spacing: -0.03em;
    background: linear-gradient(135deg, var(--blue) 0%, var(--cyan) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.cc_stat_num--dollar {
    font-size: clamp(24px, 3vw, 38px);
}

.cc_stat_desc {
    font-size: 14px;
    color: var(--gray-600);
    line-height: 1.6;
    margin: 0;
}

/* Highlighted callout paragraph */
.cc_calc_block {
    max-width: 860px;
    background: var(--blue-light);
    border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
    border-left: 4px solid var(--blue);
    padding: 22px 28px;
    margin-top: 8px;
}

.cc_calc_block p {
    font-size: clamp(15px, 1.6vw, 17px);
    color: var(--navy);
    line-height: 1.75;
    font-weight: 500;
    margin: 0;
}

/* Source attribution line */
.cc_source {
    font-size: 12px;
    color: var(--gray-400);
    font-style: italic;
    line-height: 1.5;
    margin-top: 14px;
}


/* =====================================================================
   CC — SHARED SECTION INTRO  (.cc_section_lead)
   Reused across Services, Benefits, Performance, Cost, Specialty.
   ===================================================================== */
.cc_section_lead {
    font-size: clamp(15px, 1.7vw, 17px);
    color: var(--gray-600);
    line-height: 1.8;
    max-width: 820px;
    margin-bottom: 40px;
}


/* =====================================================================
   CC — OVERVIEW  (svc_feature_blk modifier)
   ===================================================================== */
.cc_overview_inner {
    max-width: 920px;
}

.cc_overview_inner h2 {
    margin-bottom: 28px;
}

.cc_overview_inner p {
    font-size: clamp(16px, 1.8vw, 18px);
    line-height: 1.8;
    color: rgba(255, 255, 255, .82);
    margin-bottom: 20px;
}

.cc_overview_inner p:last-child {
    margin-bottom: 0;
}


/* =====================================================================
   CC — SERVICES GRID  (.cc_svc_grid, .cc_svc_card)
   ===================================================================== */
.cc_svc_grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}

.cc_svc_card {
    background: #FFFFFF;
    border: 1px solid var(--gray-100);
    border-radius: var(--radius-lg);
    padding: 28px 24px 32px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    box-shadow: var(--sh-sm);
    position: relative;
    overflow: hidden;
    transition: transform .28s cubic-bezier(.2, .7, .3, 1), box-shadow .28s;
}

.cc_svc_card::after {
    content: '';
    position: absolute;
    bottom: 0; left: 0; right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--blue), var(--cyan));
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .32s ease;
}

.cc_svc_card:hover {
    transform: translateY(-5px);
    box-shadow: var(--sh-blue);
}

.cc_svc_card:hover::after {
    transform: scaleX(1);
}

.cc_svc_icon {
    width: 52px;
    height: 52px;
    border-radius: var(--radius-sm);
    background: linear-gradient(135deg, var(--blue-light), rgba(0, 157, 220, .12));
    display: grid;
    place-items: center;
    flex-shrink: 0;
}

.cc_svc_icon .icon {
    width: 22px;
    height: 22px;
    color: var(--blue);
}

.cc_svc_name {
    font-family: var(--font-head);
    font-size: 15px;
    font-weight: 700;
    color: var(--navy);
    line-height: 1.3;
}

.cc_svc_body {
    font-size: 14px;
    color: var(--gray-600);
    line-height: 1.65;
    margin: 0;
    flex: 1;
}


/* =====================================================================
   CC — BENEFITS GRID  (.cc_benefit_grid, .cc_benefit_card)
   ===================================================================== */
.cc_benefit_grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}

.cc_benefit_card {
    background: #FFFFFF;
    border: 1px solid var(--gray-100);
    border-radius: var(--radius);
    padding: 22px 24px;
    display: flex;
    gap: 16px;
    align-items: flex-start;
    box-shadow: var(--sh-sm);
    transition: transform .25s, box-shadow .25s;
}

.cc_benefit_card:hover {
    transform: translateY(-3px);
    box-shadow: var(--sh-md);
}

.cc_benefit_icon {
    width: 44px;
    height: 44px;
    border-radius: var(--radius-sm);
    background: linear-gradient(135deg, var(--blue-light), rgba(0, 157, 220, .1));
    display: grid;
    place-items: center;
    flex-shrink: 0;
}

.cc_benefit_icon .icon {
    width: 20px;
    height: 20px;
    color: var(--blue);
}

.cc_benefit_text {
    font-size: 14px;
    color: var(--ink);
    line-height: 1.65;
    margin: 0;
    padding-top: 2px;
}


/* =====================================================================
   CC — SPECIALTY GRID  (.cc_spec_grid, .cc_spec_card)
   ===================================================================== */
.cc_spec_grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
}

.cc_spec_card {
    background: #FFFFFF;
    border: 1px solid var(--gray-100);
    border-radius: var(--radius-lg);
    padding: 24px;
    display: flex;
    gap: 20px;
    align-items: flex-start;
    box-shadow: var(--sh-sm);
    transition: transform .25s, box-shadow .25s;
}

.cc_spec_card:hover {
    transform: translateY(-4px);
    box-shadow: var(--sh-blue);
}

/* Last card in an odd-count 2-col grid spans full width */
.cc_spec_card:last-child:nth-child(odd) {
    grid-column: span 2;
}

.cc_spec_icon {
    width: 52px;
    height: 52px;
    border-radius: var(--radius-sm);
    background: linear-gradient(135deg, var(--blue-light), rgba(0, 157, 220, .1));
    display: grid;
    place-items: center;
    flex-shrink: 0;
}

.cc_spec_icon .icon {
    width: 22px;
    height: 22px;
    color: var(--blue);
}

.cc_spec_name {
    font-family: var(--font-head);
    font-size: 16px;
    font-weight: 700;
    color: var(--navy);
    margin: 0 0 8px;
    line-height: 1.3;
}

.cc_spec_desc {
    font-size: 14px;
    color: var(--gray-600);
    line-height: 1.65;
    margin: 0;
}


/* =====================================================================
   RESPONSIVE — CC additions
   ===================================================================== */

/* 1100px */
@media (max-width: 1100px) {
    .cc_svc_grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .cc_stat_grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* 820px */
@media (max-width: 820px) {
    .cc_badge {
        display: none;
    }

    .cc_benefit_grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .cc_spec_grid {
        grid-template-columns: 1fr;
    }

    .cc_spec_card:last-child:nth-child(odd) {
        grid-column: span 1;
    }
}

/* 620px */
@media (max-width: 620px) {
    .cc_svc_grid {
        grid-template-columns: 1fr;
    }

    .cc_stat_grid {
        grid-template-columns: 1fr;
    }

    .cc_benefit_grid {
        grid-template-columns: 1fr;
    }

    .cc_calc_block {
        border-radius: 0 var(--radius) var(--radius) 0;
    }

    .svc_table tbody td {
        padding: 12px 16px;
        font-size: 14px;
    }

    .svc_table thead th {
        padding: 12px 16px;
        font-size: 11px;
    }
}


/* =====================================================================
   CONTENT MARKETING AGENCY — HERO VISUAL  (.cma_viz)
   Content strategy panel illustration. Page-specific prefix: cma_
   ===================================================================== */
.cma_viz {
    position: relative;
}

.cma_panel {
    background: #FFFFFF;
    border-radius: var(--radius-lg);
    box-shadow: var(--sh-xl);
    border: 1px solid var(--gray-200);
    overflow: hidden;
    position: relative;
    z-index: 1;
}

.cma_panel_head {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 20px;
    background: var(--gray-50);
    border-bottom: 1px solid var(--gray-200);
}

.cma_live_dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--cyan);
    flex-shrink: 0;
    box-shadow: 0 0 0 3px rgba(0,157,220,.15);
}

.cma_panel_label {
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: .06em;
    color: var(--gray-500);
    text-transform: uppercase;
}

.cma_rows {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 22px 22px 18px;
}

.cma_row {
    display: grid;
    grid-template-columns: 16px 1fr auto 80px 36px;
    align-items: center;
    gap: 10px;
}

.cma_row_icon .icon {
    width: 15px;
    height: 15px;
    color: var(--blue);
    display: block;
}

.cma_row_name {
    font-size: 13px;
    font-weight: 600;
    color: var(--navy);
}

.cma_row_tag {
    font-family: var(--font-mono);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: .07em;
    text-transform: uppercase;
    padding: 3px 8px;
    border-radius: 99px;
    background: var(--blue-light);
    color: var(--blue);
}

.cma_row_bar {
    height: 5px;
    background: var(--gray-100);
    border-radius: 99px;
    overflow: hidden;
}

.cma_row_fill {
    height: 100%;
    width: 0;
    background: linear-gradient(90deg, var(--blue), var(--cyan));
    border-radius: 99px;
    transition: width 1.2s cubic-bezier(.4, 0, .2, 1) .5s;
}

.reveal:not(.pending) .cma_row_fill {
    width: var(--cw);
}

.cma_row_pct {
    font-family: var(--font-mono);
    font-size: 12px;
    font-weight: 600;
    color: var(--blue);
    text-align: right;
}

.cma_panel_footer {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 16px 22px;
    background: var(--gray-50);
    border-top: 1px solid var(--gray-200);
}

.cma_tag {
    font-family: var(--font-mono);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--gray-500);
    background: #fff;
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-sm);
    padding: 4px 10px;
}

/* Floating badges */
.cma_badge {
    position: absolute;
    background: #FFFFFF;
    border-radius: var(--radius);
    box-shadow: var(--sh-lg);
    padding: 12px 16px;
    display: flex;
    align-items: center;
    gap: 10px;
    z-index: 2;
    border: 1px solid var(--gray-200);
}

.cma_badge--a {
    top: -16px;
    right: -18px;
}

.cma_badge--b {
    bottom: -16px;
    left: -18px;
}

.cma_badge > .icon {
    width: 16px;
    height: 16px;
    color: var(--blue);
    flex-shrink: 0;
    display: block;
}

.cma_badge_num {
    font-family: var(--font-head);
    font-size: 18px;
    font-weight: 800;
    color: var(--navy);
    line-height: 1;
}

.cma_badge_sub {
    font-size: 11px;
    color: var(--gray-500);
    line-height: 1.3;
    margin-top: 2px;
}

.cma_badge_val {
    font-family: var(--font-head);
    font-size: 15px;
    font-weight: 700;
    color: var(--navy);
    line-height: 1;
}

.cma_badge_label {
    font-size: 11px;
    color: var(--gray-500);
    line-height: 1.3;
    margin-top: 2px;
}

@media (max-width: 820px) {
    .cma_badge {
        display: none;
    }
}