/* =============================================================
   CPA — Palette CPA (v0.8.2)

   HOTFIX v0.8.2: la mappe sur la palette Kadence (v0.8.1) a été
   retirée. Kadence définit ses propres valeurs par défaut pour
   --global-palette1..9 (palette9 = blanc, palette3 = sombre, etc.)
   qui écrasent toujours les fallbacks CSS, donc les couleurs CPA
   ne s'appliquaient plus et l'UI cassait (texte blanc sur blanc,
   cellules sombres devenues blanches...).

   Pour activer le mode Kadence-driven plus tard :
   1. Customizer Kadence → Couleurs → définir palette1 = #EC982E,
      palette2 = #10B981, palette3 = #FBBB00, palette9 = #1a1a1a.
   2. Customizer → CSS additionnel : recoller le bloc ci-dessous
      en remplaçant chaque hex par var(--global-palette*).
   ============================================================= */
:root {
    --cpa-orange: #EC982E;
    --cpa-green:  #10B981;
    --cpa-yellow: #FBBB00;
    --cpa-ink:    #1a1a1a;
}

/* =============================================================
   CPA Blocks — Shared styles (front + Gutenberg editor)
   All custom properties are namespaced --cpa-* to avoid collisions
   with Kadence theme variables.
   ============================================================= */

.cpa-service-block {
    --cpa-bg: #fafafa;
    --cpa-bg-warm: #f4f1ec;
    --cpa-paper: #ffffff;
    --cpa-ink: #1a1a1a;
    --cpa-ink-2: #3a3a3a;
    --cpa-mute: #7a7a7a;
    --cpa-line: #1a1a1a14;
    --cpa-line-2: #1a1a1a26;
    --cpa-orange: #EC982E;
    --cpa-green: #10B981;
    --cpa-yellow: #FBBB00;

    width: 100%;
    max-width: var(--wp--style--global--wide-size, 1320px);
    margin: 0 auto;
    padding: 112px 56px 0;
    color: var(--cpa-ink);
    font-family: 'Manrope', ui-sans-serif, system-ui, sans-serif;
    -webkit-font-smoothing: antialiased;
    box-sizing: border-box;
}
.cpa-service-block *,
.cpa-service-block *::before,
.cpa-service-block *::after {
    box-sizing: border-box;
}

/* =============== Grid (image right by default) =============== */
.cpa-service-block .cpa-service-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 64px;
    align-items: start;
}

/* Order: text first (left), photo second (right) */
.cpa-service-block .cpa-service-content { order: 1; }
.cpa-service-block .cpa-service-photo   { order: 2; }

/* Reverse variant: photo first (left), text second (right) */
.cpa-service-block--reverse .cpa-service-content { order: 2; }
.cpa-service-block--reverse .cpa-service-photo   { order: 1; }

/* =============== Photo column =============== */
.cpa-service-block .cpa-service-photo {
    position: sticky;
    top: 96px;
}
.cpa-service-block .cpa-service-photo-frame {
    position: relative;
    aspect-ratio: 4 / 5;
    border-radius: 24px;
    overflow: hidden;
    background: var(--cpa-bg-warm);
    background-image: repeating-linear-gradient(135deg, #ece7df 0 12px, #f4f1ec 12px 24px);
}
.cpa-service-block .cpa-service-photo-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.cpa-service-block .cpa-photo-placeholder {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    padding: 24px;
    text-align: center;
    color: var(--cpa-mute);
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 12px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}
.cpa-service-block .cpa-service-photo-tag {
    position: absolute;
    top: 18px;
    left: 18px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    border-radius: 999px;
    background: var(--cpa-ink);
    color: #fafafa;
    font-size: 12.5px;
    font-family: 'Manrope', sans-serif;
}
.cpa-service-block .cpa-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    display: inline-block;
    background: var(--cpa-orange);
}
.cpa-service-block .cpa-service-photo-price {
    position: absolute;
    bottom: 18px;
    left: 18px;
    right: 18px;
    padding: 14px 18px;
    border-radius: 14px;
    background: #1a1a1a;
    color: #fafafa;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.cpa-service-block .cpa-service-photo-price-label {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 11px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #fafafa99;
}
.cpa-service-block .cpa-service-photo-price-value {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 13px;
    letter-spacing: 0.04em;
    color: #fafafa;
    white-space: nowrap;
}

/* =============== Content column =============== */
.cpa-service-block .cpa-service-head {
    display: flex;
    align-items: baseline;
    gap: 14px;
    margin-bottom: 14px;
}
.cpa-service-block .cpa-service-num {
    font-weight: 700;
    font-size: 80px;
    line-height: 1;
    letter-spacing: -0.06em;
}
.cpa-service-block .cpa-service-eyebrow {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 11px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--cpa-mute);
}
.cpa-service-block .cpa-service-title {
    margin: 0 0 18px;
    font-size: 54px;
    line-height: 0.95;
    font-weight: 700;
    letter-spacing: -0.035em;
    color: var(--cpa-ink);
}
.cpa-service-block .cpa-service-intro {
    margin: 0 0 28px;
    font-size: 17px;
    line-height: 1.55;
    color: var(--cpa-ink-2);
    max-width: 520px;
}

/* =============== Prestations list =============== */
.cpa-service-block .cpa-prestations {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    border-top: 1px solid var(--cpa-line-2);
}
.cpa-service-block .cpa-prestation {
    display: grid;
    grid-template-columns: 24px 1fr auto;
    gap: 16px;
    padding: 18px 0;
    border-bottom: 1px solid var(--cpa-line);
    align-items: baseline;
}
.cpa-service-block .cpa-prestation-num {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 11px;
    color: var(--cpa-mute);
    letter-spacing: 0.1em;
}
.cpa-service-block .cpa-prestation-label {
    font-size: 22px;
    font-weight: 600;
    letter-spacing: -0.015em;
    margin-bottom: 4px;
    color: var(--cpa-ink);
}
.cpa-service-block .cpa-prestation-desc {
    margin: 0;
    font-size: 14.5px;
    color: var(--cpa-mute);
    line-height: 1.5;
}
.cpa-service-block .cpa-prestation-price {
    padding: 6px 12px;
    border-radius: 999px;
    background: #1a1a1a08;
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 12px;
    letter-spacing: 0.04em;
    color: var(--cpa-ink);
    white-space: nowrap;
}

/* =============== CTA buttons =============== */
.cpa-service-block .cpa-service-cta {
    display: flex;
    gap: 10px;
    margin-top: 28px;
    flex-wrap: wrap;
}
.cpa-service-block .cpa-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 12px 18px;
    border-radius: 999px;
    text-decoration: none;
    font-weight: 600;
    font-size: 14px;
    border: 1px solid transparent;
    transition: transform .15s ease, background .2s ease, color .2s ease;
    white-space: nowrap;
    font-family: 'Manrope', sans-serif;
}
.cpa-service-block .cpa-btn:hover {
    transform: translateY(-1px);
}
.cpa-service-block .cpa-btn-primary {
    background: var(--cpa-ink);
    color: #fafafa;
}
.cpa-service-block .cpa-btn-primary:hover {
    background: #000;
    color: #fafafa;
}
.cpa-service-block .cpa-btn-ghost {
    background: transparent;
    color: var(--cpa-ink);
    border: 1px solid var(--cpa-ink);
}
.cpa-service-block .cpa-btn-ghost:hover {
    background: var(--cpa-ink);
    color: #fafafa;
}
.cpa-service-block .cpa-btn-arrow {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--cpa-orange);
    color: var(--cpa-ink);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
}
.cpa-service-block .cpa-btn-ghost:hover .cpa-btn-arrow {
    background: var(--cpa-orange);
    color: var(--cpa-ink);
}
.cpa-service-block .cpa-btn-orange {
    background: var(--cpa-orange);
    color: var(--cpa-ink);
}
.cpa-service-block .cpa-btn-orange:hover {
    background: #f5a23a;
    color: var(--cpa-ink);
}
.cpa-service-block .cpa-btn-orange .cpa-btn-arrow {
    background: var(--cpa-ink);
    color: var(--cpa-orange);
}

/* =============== Mobile =============== */
@media (max-width: 980px) {
    .cpa-service-block {
        padding: 64px 24px 0;
    }
    .cpa-service-block .cpa-service-grid {
        grid-template-columns: 1fr;
        gap: 32px;
    }
    .cpa-service-block .cpa-service-content,
    .cpa-service-block .cpa-service-photo {
        order: unset;
    }
    .cpa-service-block--reverse .cpa-service-content,
    .cpa-service-block--reverse .cpa-service-photo {
        order: unset;
    }
    .cpa-service-block .cpa-service-photo {
        position: static;
    }
    .cpa-service-block .cpa-service-num {
        font-size: 56px;
    }
    .cpa-service-block .cpa-service-title {
        font-size: 38px;
    }
    .cpa-service-block .cpa-prestation-label {
        font-size: 18px;
    }
}

/* =============== Editor-specific tweaks =============== */
/* Reduce top padding inside Gutenberg so blocks don't have huge gaps in editor */
.editor-styles-wrapper .cpa-service-block,
.block-editor-block-list__layout .cpa-service-block {
    padding-top: 48px;
    padding-bottom: 48px;
}
.editor-styles-wrapper .cpa-service-block .cpa-service-photo,
.block-editor-block-list__layout .cpa-service-block .cpa-service-photo {
    position: static;
}

/* =============================================================
   CPA Hero (universel)
   ============================================================= */
.cpa-hero {
    --cpa-bg: #fafafa;
    --cpa-bg-warm: #f4f1ec;
    --cpa-paper: #ffffff;
    --cpa-ink: #1a1a1a;
    --cpa-ink-2: #3a3a3a;
    --cpa-mute: #7a7a7a;
    --cpa-line: #1a1a1a14;
    --cpa-line-2: #1a1a1a26;
    --cpa-orange: #EC982E;
    --cpa-green: #10B981;
    --cpa-yellow: #FBBB00;

    width: 100%;
    max-width: var(--wp--style--global--wide-size, 1320px);
    margin: 0 auto;
    padding: 80px 56px 56px;
    color: var(--cpa-ink);
    font-family: 'Manrope', ui-sans-serif, system-ui, sans-serif;
    -webkit-font-smoothing: antialiased;
    box-sizing: border-box;
}
.cpa-hero *,
.cpa-hero *::before,
.cpa-hero *::after { box-sizing: border-box; }

.cpa-hero .cpa-hero-grid {
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    gap: 64px;
    align-items: end;
    border-bottom: 1px solid var(--cpa-line);
    padding-bottom: 48px;
}
.cpa-hero--solo .cpa-hero-grid {
    grid-template-columns: 1fr;
}

.cpa-hero .cpa-hero-eyebrow {
    display: flex;
    align-items: center;
    gap: 12px;
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 11.5px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--cpa-orange);
    font-weight: 500;
    margin-bottom: 18px;
}
.cpa-hero .cpa-hero-eyebrow::before {
    content: "";
    display: inline-block;
    width: 28px;
    height: 2px;
    background: var(--cpa-orange);
}

.cpa-hero .cpa-hero-title {
    margin: 0;
    font-weight: 700;
    font-size: 120px;
    line-height: 0.92;
    letter-spacing: -0.045em;
    color: var(--cpa-ink);
}
.cpa-hero .cpa-hero-title-accent {
    font-style: italic;
    font-weight: 500;
}

.cpa-hero .cpa-hero-aside {
    display: flex;
    flex-direction: column;
    gap: 18px;
    padding-bottom: 8px;
}
.cpa-hero .cpa-hero-para {
    margin: 0;
    font-size: 18px;
    line-height: 1.55;
    color: var(--cpa-ink-2);
    font-family: 'Manrope', sans-serif;
}
.cpa-hero .cpa-hero-tags {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}
.cpa-hero .cpa-tag {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    border-radius: 999px;
    border: 1px solid var(--cpa-line-2);
    font-size: 12.5px;
    color: var(--cpa-ink-2);
    background: transparent;
    font-family: 'Manrope', sans-serif;
}
.cpa-hero .cpa-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    display: inline-block;
}
.cpa-hero .cpa-hero-cta {
    align-self: flex-start;
    padding: 14px 20px;
    font-size: 15px;
}
.cpa-hero .cpa-hero-ctas {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: center;
}

/* Reuse the .cpa-btn rules from service-category, but redeclare for hero context (orange variant) */
.cpa-hero .cpa-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 12px 18px;
    border-radius: 999px;
    text-decoration: none;
    font-weight: 600;
    font-size: 14px;
    border: 1px solid transparent;
    transition: transform .15s ease, background .2s ease, color .2s ease;
    white-space: nowrap;
    font-family: 'Manrope', sans-serif;
}
.cpa-hero .cpa-btn:hover { transform: translateY(-1px); }
.cpa-hero .cpa-btn-orange {
    background: var(--cpa-orange);
    color: var(--cpa-ink);
}
.cpa-hero .cpa-btn-orange:hover { background: #f5a23a; color: var(--cpa-ink); }
.cpa-hero .cpa-btn-primary { background: var(--cpa-ink); color: #fafafa; }
.cpa-hero .cpa-btn-primary:hover { background: #000; color: #fafafa; }
.cpa-hero .cpa-btn-ghost {
    background: transparent;
    color: var(--cpa-ink);
    border: 1px solid var(--cpa-ink);
}
.cpa-hero .cpa-btn-ghost:hover { background: var(--cpa-ink); color: #fafafa; }
.cpa-hero .cpa-btn-arrow {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--cpa-ink);
    color: var(--cpa-orange);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
}
.cpa-hero .cpa-btn-orange .cpa-btn-arrow { background: var(--cpa-ink); color: var(--cpa-orange); }
.cpa-hero .cpa-btn-primary .cpa-btn-arrow { background: var(--cpa-orange); color: var(--cpa-ink); }
.cpa-hero .cpa-btn-ghost .cpa-btn-arrow { background: var(--cpa-ink); color: var(--cpa-orange); }

/* Mobile */
@media (max-width: 980px) {
    .cpa-hero { padding: 56px 24px 32px; }
    .cpa-hero .cpa-hero-grid {
        grid-template-columns: 1fr;
        gap: 32px;
        align-items: start;
    }
    .cpa-hero .cpa-hero-title { font-size: 64px; }
}

/* Editor tweaks */
.editor-styles-wrapper .cpa-hero,
.block-editor-block-list__layout .cpa-hero {
    padding-top: 32px;
    padding-bottom: 32px;
}

/* =============================================================
   CPA CTA Band (dark band, reusable)
   ============================================================= */
.cpa-cta-band {
    --cpa-bg: #fafafa;
    --cpa-ink: #1a1a1a;
    --cpa-orange: #EC982E;
    --cpa-green: #10B981;
    --cpa-yellow: #FBBB00;

    width: 100%;
    max-width: var(--wp--style--global--wide-size, 1320px);
    margin: 120px auto 0;
    padding: 0 56px;
    box-sizing: border-box;
    font-family: 'Manrope', ui-sans-serif, system-ui, sans-serif;
}
.cpa-cta-band *,
.cpa-cta-band *::before,
.cpa-cta-band *::after { box-sizing: border-box; }

.cpa-cta-band .cpa-cta-band-inner {
    background: var(--cpa-ink);
    color: #fafafa;
    border-radius: 32px;
    padding: 72px 64px;
    display: grid;
    grid-template-columns: 1.3fr 1fr;
    gap: 48px;
    align-items: center;
}

.cpa-cta-band .cpa-cta-band-eyebrow {
    display: flex;
    align-items: center;
    gap: 12px;
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 11.5px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--cpa-orange);
    font-weight: 500;
    margin-bottom: 18px;
}
.cpa-cta-band .cpa-cta-band-eyebrow::before {
    content: "";
    display: inline-block;
    width: 28px;
    height: 2px;
    background: var(--cpa-orange);
}

.cpa-cta-band .cpa-cta-band-title {
    margin: 0 0 18px;
    font-weight: 700;
    font-size: 64px;
    line-height: 0.95;
    letter-spacing: -0.035em;
    color: #fafafa;
}
.cpa-cta-band .cpa-cta-band-accent {
    font-style: italic;
    font-weight: 500;
}
.cpa-cta-band .cpa-cta-band-para {
    margin: 0;
    font-size: 17px;
    color: #fafafacc;
    max-width: 480px;
    line-height: 1.55;
    font-family: 'Manrope', sans-serif;
}

.cpa-cta-band .cpa-cta-band-actions {
    display: flex;
    flex-direction: column;
    gap: 12px;
    align-items: flex-start;
}
.cpa-cta-band .cpa-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 18px 24px;
    border-radius: 999px;
    text-decoration: none;
    font-weight: 600;
    font-size: 16px;
    border: 1px solid transparent;
    transition: transform .15s ease, background .2s ease, color .2s ease;
    white-space: nowrap;
    font-family: 'Manrope', sans-serif;
}
.cpa-cta-band .cpa-btn:hover { transform: translateY(-1px); }
.cpa-cta-band .cpa-btn-orange { background: var(--cpa-orange); color: var(--cpa-ink); }
.cpa-cta-band .cpa-btn-orange:hover { background: #f5a23a; color: var(--cpa-ink); }
.cpa-cta-band .cpa-btn-primary { background: #fafafa; color: var(--cpa-ink); }
.cpa-cta-band .cpa-btn-primary:hover { background: #fff; color: var(--cpa-ink); }
.cpa-cta-band .cpa-btn-transparent {
    background: #ffffff10;
    color: #fafafa;
    border: 1px solid #ffffff22;
}
.cpa-cta-band .cpa-btn-transparent:hover {
    background: #ffffff20;
    color: #fafafa;
}
.cpa-cta-band .cpa-btn-arrow {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--cpa-ink);
    color: var(--cpa-orange);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
}
.cpa-cta-band .cpa-btn-orange .cpa-btn-arrow { background: var(--cpa-ink); color: var(--cpa-orange); }

/* Mobile */
@media (max-width: 980px) {
    .cpa-cta-band { padding: 0 24px; margin-top: 64px; }
    .cpa-cta-band .cpa-cta-band-inner {
        grid-template-columns: 1fr;
        padding: 48px 28px;
    }
    .cpa-cta-band .cpa-cta-band-title { font-size: 42px; }
}

/* =============================================================
   Hero — paragraph layout variants
   ============================================================= */
/* Stacked layout: title and aside both in single column */
.cpa-hero--stacked .cpa-hero-grid {
    grid-template-columns: 1fr;
    gap: 32px;
    align-items: start;
}
.cpa-hero--stacked .cpa-hero-aside {
    max-width: min(1100px, 100%);
    padding-bottom: 0;
}

/* =============================================================
   Hero — vertical alignment of the content row (v0.9.2)
   ============================================================= */
/* Make the grid actually fill the hero's min-height, otherwise
   align-items has nothing to align against. */
.cpa-hero--has-min-height .cpa-hero-grid {
    min-height: inherit;
}

/* Vertical position of the aside content. Default = bottom
   (matches v0.9.1 behaviour: align-items: end on the grid). */
.cpa-hero--text-top    .cpa-hero-grid { align-items: start; }
.cpa-hero--text-center .cpa-hero-grid { align-items: center; }
.cpa-hero--text-bottom .cpa-hero-grid { align-items: end; }

/* In bottom mode, constrain the aside width so long paragraphs don't
   stretch across the whole 1320px hero. Kept left-aligned. */
.cpa-hero--text-bottom .cpa-hero-aside {
    max-width: 640px;
    width: 100%;
}
/* Kadence tablet breakpoint (md = 768px) — release the constraint
   so the aside fills the column on tablet & mobile. */
@media (max-width: 767.98px) {
    .cpa-hero--text-bottom .cpa-hero-aside {
        max-width: 100%;
    }
}

/* =============================================================
   WhatsApp button style — green official + inline icon
   ============================================================= */
.cpa-btn-whatsapp {
    background: #25D366;
    color: #ffffff;
    border: 1px solid transparent;
}
.cpa-btn-whatsapp:hover {
    background: #1ebe5a;
    color: #ffffff;
}
.cpa-btn-whatsapp .cpa-btn-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    flex-shrink: 0;
}
.cpa-btn-whatsapp .cpa-btn-icon svg {
    width: 100%;
    height: 100%;
    display: block;
}
.cpa-btn-whatsapp .cpa-btn-text {
    display: inline-block;
}

/* Hero context — slightly bigger CTA */
.cpa-hero .cpa-btn-whatsapp {
    padding: 14px 20px;
    font-size: 15px;
    gap: 12px;
}
.cpa-hero .cpa-btn-whatsapp .cpa-btn-icon {
    width: 24px;
    height: 24px;
}

/* CTA Band context */
.cpa-cta-band .cpa-btn-whatsapp {
    background: #25D366;
    color: #ffffff;
}
.cpa-cta-band .cpa-btn-whatsapp:hover {
    background: #1ebe5a;
    color: #ffffff;
}
.cpa-cta-band .cpa-btn-whatsapp .cpa-btn-icon {
    width: 24px;
    height: 24px;
    margin-right: 4px;
}

/* Service Category context (in case Alain changes button styles there too) */
.cpa-service-block .cpa-btn-whatsapp {
    background: #25D366;
    color: #ffffff;
}
.cpa-service-block .cpa-btn-whatsapp:hover {
    background: #1ebe5a;
    color: #ffffff;
}

/* =============================================================
   Section Texte + Image
   ============================================================= */
.cpa-section-text-image {
    --cpa-bg: #fafafa;
    --cpa-bg-warm: #f4f1ec;
    --cpa-paper: #ffffff;
    --cpa-ink: #1a1a1a;
    --cpa-ink-2: #3a3a3a;
    --cpa-mute: #7a7a7a;
    --cpa-line: #1a1a1a14;
    --cpa-line-2: #1a1a1a26;
    --cpa-orange: #EC982E;
    --cpa-green: #10B981;
    --cpa-yellow: #FBBB00;

    width: 100%;
    max-width: var(--wp--style--global--wide-size, 1320px);
    margin: 0 auto;
    padding: 80px 56px;
    color: var(--cpa-ink);
    font-family: 'Manrope', ui-sans-serif, system-ui, sans-serif;
    -webkit-font-smoothing: antialiased;
    box-sizing: border-box;
}
.cpa-section-text-image *,
.cpa-section-text-image *::before,
.cpa-section-text-image *::after { box-sizing: border-box; }

.cpa-section-text-image .cpa-sti-grid {
    display: grid;
    grid-template-columns: 1fr 1.2fr;
    gap: 64px;
    align-items: center;
}
.cpa-section-text-image--img-left .cpa-sti-image-col   { order: 1; }
.cpa-section-text-image--img-left .cpa-sti-content-col { order: 2; }
.cpa-section-text-image--img-right .cpa-sti-image-col   { order: 2; }
.cpa-section-text-image--img-right .cpa-sti-content-col { order: 1; }

/* Photo style: portrait 4:5 with cover crop */
.cpa-section-text-image--photo .cpa-sti-image-frame {
    position: relative;
    aspect-ratio: 4 / 5;
    border-radius: 24px;
    overflow: hidden;
    background: var(--cpa-bg-warm);
    background-image: repeating-linear-gradient(135deg, #ece7df 0 12px, #f4f1ec 12px 24px);
}
.cpa-section-text-image--photo .cpa-sti-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Logo style: natural ratio, contained */
.cpa-section-text-image--logo .cpa-sti-image-col {
    display: flex;
    justify-content: center;
}
.cpa-section-text-image--logo .cpa-sti-image-frame {
    position: relative;
    width: 100%;
    max-width: 320px;
}
.cpa-section-text-image--logo .cpa-sti-image {
    width: 100%;
    height: auto;
    display: block;
}

/* Symbol placeholder (CPA "+" circle) */
.cpa-section-text-image .cpa-sti-placeholder {
    display: grid;
    place-items: center;
}
.cpa-section-text-image .cpa-sti-placeholder--symbol {
    width: 240px;
    height: 240px;
    background: var(--cpa-ink);
    color: #fafafa;
    border-radius: 50%;
    margin: 0 auto;
    font-size: 96px;
    font-weight: 700;
    letter-spacing: -0.06em;
    line-height: 1;
    position: relative;
}
.cpa-section-text-image .cpa-sti-placeholder--symbol .cpa-sti-placeholder-mark {
    z-index: 1;
}
.cpa-section-text-image .cpa-sti-placeholder--symbol .cpa-sti-placeholder-label {
    position: absolute;
    bottom: -32px;
    left: 50%;
    transform: translateX(-50%);
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 11px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--cpa-mute);
    font-weight: 400;
}
.cpa-section-text-image .cpa-sti-placeholder--empty {
    aspect-ratio: 4 / 5;
    border-radius: 24px;
    background: var(--cpa-bg-warm);
    color: var(--cpa-mute);
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 12px;
    text-align: center;
    padding: 32px;
}

/* Photo badge (Fondée en 2022 etc) */
.cpa-section-text-image .cpa-sti-badge {
    position: absolute;
    top: 18px;
    left: 18px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    border-radius: 999px;
    background: var(--cpa-ink);
    color: #fafafa;
    font-size: 12.5px;
    font-family: 'Manrope', sans-serif;
}

/* Content side */
.cpa-section-text-image .cpa-sti-eyebrow {
    display: flex;
    align-items: center;
    gap: 12px;
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 11.5px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--cpa-orange);
    font-weight: 500;
    margin-bottom: 18px;
}
.cpa-section-text-image .cpa-sti-eyebrow::before {
    content: "";
    display: inline-block;
    width: 28px;
    height: 2px;
    background: var(--cpa-orange);
}
.cpa-section-text-image .cpa-sti-title {
    margin: 0 0 22px;
    font-weight: 700;
    font-size: 60px;
    line-height: 0.95;
    letter-spacing: -0.035em;
    color: var(--cpa-ink);
}
.cpa-section-text-image .cpa-sti-title-accent {
    font-style: italic;
    font-weight: 500;
}
.cpa-section-text-image .cpa-sti-paragraphs {
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.cpa-section-text-image .cpa-sti-para {
    margin: 0;
    font-size: 17px;
    line-height: 1.6;
    color: var(--cpa-ink-2);
    max-width: 580px;
}
.cpa-section-text-image .cpa-sti-para strong {
    color: var(--cpa-ink);
    font-weight: 600;
}

@media (max-width: 980px) {
    .cpa-section-text-image { padding: 56px 24px; }
    .cpa-section-text-image .cpa-sti-grid {
        grid-template-columns: 1fr;
        gap: 32px;
    }
    .cpa-section-text-image--img-left .cpa-sti-image-col,
    .cpa-section-text-image--img-right .cpa-sti-image-col { order: 1; }
    .cpa-section-text-image--img-left .cpa-sti-content-col,
    .cpa-section-text-image--img-right .cpa-sti-content-col { order: 2; }
    .cpa-section-text-image .cpa-sti-title { font-size: 38px; }
}

/* =============================================================
   Values (cards grid)
   ============================================================= */
.cpa-values {
    --cpa-bg: #fafafa;
    --cpa-paper: #ffffff;
    --cpa-ink: #1a1a1a;
    --cpa-ink-2: #3a3a3a;
    --cpa-mute: #7a7a7a;
    --cpa-line: #1a1a1a14;
    --cpa-orange: #EC982E;
    --cpa-green: #10B981;
    --cpa-yellow: #FBBB00;

    width: 100%;
    max-width: var(--wp--style--global--wide-size, 1320px);
    margin: 0 auto;
    padding: 96px 56px;
    color: var(--cpa-ink);
    font-family: 'Manrope', ui-sans-serif, system-ui, sans-serif;
    box-sizing: border-box;
}
.cpa-values *,
.cpa-values *::before,
.cpa-values *::after { box-sizing: border-box; }

.cpa-values .cpa-values-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 48px;
    margin-bottom: 40px;
}
.cpa-values .cpa-values-eyebrow {
    display: flex;
    align-items: center;
    gap: 12px;
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 11.5px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--cpa-orange);
    font-weight: 500;
    margin-bottom: 18px;
}
.cpa-values .cpa-values-eyebrow::before {
    content: "";
    display: inline-block;
    width: 28px;
    height: 2px;
    background: var(--cpa-orange);
}
.cpa-values .cpa-values-title {
    margin: 0;
    font-weight: 700;
    font-size: 64px;
    line-height: 0.95;
    letter-spacing: -0.035em;
    color: var(--cpa-ink);
}
.cpa-values .cpa-values-accent {
    font-style: italic;
    font-weight: 500;
}
.cpa-values .cpa-values-meta {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 11px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--cpa-mute);
    flex-shrink: 0;
}

.cpa-values .cpa-values-grid {
    display: grid;
    gap: 14px;
}
.cpa-values .cpa-values-grid--1 { grid-template-columns: 1fr; }
.cpa-values .cpa-values-grid--2 { grid-template-columns: repeat(2, 1fr); }
.cpa-values .cpa-values-grid--3 { grid-template-columns: repeat(3, 1fr); }
.cpa-values .cpa-values-grid--4 { grid-template-columns: repeat(4, 1fr); }

.cpa-values .cpa-values-card {
    padding: 28px 26px;
    min-height: 340px;
    border-radius: 24px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    position: relative;
    overflow: hidden;
}
.cpa-values .cpa-values-card--light {
    background: var(--cpa-paper);
    color: var(--cpa-ink);
    border: 1px solid var(--cpa-line);
}
.cpa-values .cpa-values-card--dark {
    background: var(--cpa-ink);
    color: #fafafa;
    border: 1px solid transparent;
}
/* Force title + num color explicitly on each card variant so theme cascade
   (Kadence h3 color, etc) can never make text invisible on dark cards. */
.cpa-values .cpa-values-card--light .cpa-values-card-title,
.cpa-values .cpa-values-card--light .cpa-values-card-num {
    color: var(--cpa-ink);
}
.cpa-values .cpa-values-card--dark .cpa-values-card-title,
.cpa-values .cpa-values-card--dark .cpa-values-card-num {
    color: #fafafa;
}
.cpa-values .cpa-values-card-num {
    font-weight: 700;
    font-size: 88px;
    line-height: 1;
    letter-spacing: -0.06em;
}
.cpa-values .cpa-values-card-title {
    margin: 0 0 10px;
    font-weight: 700;
    font-size: 30px;
    letter-spacing: -0.02em;
    line-height: 1;
}
.cpa-values .cpa-values-card-text {
    margin: 0;
    font-size: 14.5px;
    line-height: 1.55;
    color: var(--cpa-mute);
}
.cpa-values .cpa-values-card--dark .cpa-values-card-text {
    color: #fafafacc;
}

@media (max-width: 980px) {
    .cpa-values { padding: 56px 24px; }
    .cpa-values .cpa-values-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 16px;
    }
    .cpa-values .cpa-values-title { font-size: 42px; }
    .cpa-values .cpa-values-grid--3,
    .cpa-values .cpa-values-grid--4 {
        grid-template-columns: repeat(2, 1fr);
    }
}
@media (max-width: 600px) {
    .cpa-values .cpa-values-grid--2,
    .cpa-values .cpa-values-grid--3,
    .cpa-values .cpa-values-grid--4 {
        grid-template-columns: 1fr;
    }
    .cpa-values .cpa-values-card { min-height: 240px; }
}

/* =============================================================
   Commitments (3-item horizontal grid)
   ============================================================= */
.cpa-commitments {
    --cpa-bg: #fafafa;
    --cpa-paper: #ffffff;
    --cpa-ink: #1a1a1a;
    --cpa-ink-2: #3a3a3a;
    --cpa-mute: #7a7a7a;
    --cpa-line: #1a1a1a14;
    --cpa-line-2: #1a1a1a26;
    --cpa-orange: #EC982E;
    --cpa-green: #10B981;
    --cpa-yellow: #FBBB00;

    width: 100%;
    max-width: var(--wp--style--global--wide-size, 1320px);
    margin: 0 auto;
    padding: 80px 56px;
    color: var(--cpa-ink);
    font-family: 'Manrope', ui-sans-serif, system-ui, sans-serif;
    box-sizing: border-box;
}
.cpa-commitments *,
.cpa-commitments *::before,
.cpa-commitments *::after { box-sizing: border-box; }

.cpa-commitments .cpa-commitments-header {
    margin-bottom: 32px;
}
.cpa-commitments .cpa-commitments-eyebrow {
    display: flex;
    align-items: center;
    gap: 12px;
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 11.5px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--cpa-orange);
    font-weight: 500;
    margin-bottom: 18px;
}
.cpa-commitments .cpa-commitments-eyebrow::before {
    content: "";
    display: inline-block;
    width: 28px;
    height: 2px;
    background: var(--cpa-orange);
}
.cpa-commitments .cpa-commitments-title {
    margin: 0;
    font-weight: 700;
    font-size: 54px;
    line-height: 0.95;
    letter-spacing: -0.035em;
    color: var(--cpa-ink);
}
.cpa-commitments .cpa-commitments-accent {
    font-style: italic;
    font-weight: 500;
}

.cpa-commitments .cpa-commitments-grid {
    display: grid;
    gap: 0;
    border-top: 1px solid var(--cpa-line-2);
}
.cpa-commitments .cpa-commitments-grid--1 { grid-template-columns: 1fr; }
.cpa-commitments .cpa-commitments-grid--2 { grid-template-columns: repeat(2, 1fr); }
.cpa-commitments .cpa-commitments-grid--3 { grid-template-columns: repeat(3, 1fr); }
.cpa-commitments .cpa-commitments-grid--4 { grid-template-columns: repeat(4, 1fr); }

.cpa-commitments .cpa-commitment-item {
    padding: 32px 28px;
    border-bottom: 1px solid var(--cpa-line);
    border-right: 1px solid var(--cpa-line);
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.cpa-commitments .cpa-commitment-item:last-child {
    border-right: none;
}
.cpa-commitments .cpa-commitment-num {
    font-weight: 700;
    font-size: 64px;
    line-height: 1;
    letter-spacing: -0.06em;
    margin-bottom: 12px;
}
.cpa-commitments .cpa-commitment-title {
    margin: 0;
    font-weight: 600;
    font-size: 22px;
    letter-spacing: -0.015em;
    line-height: 1.2;
    color: var(--cpa-ink);
}
.cpa-commitments .cpa-commitment-body {
    margin: 0;
    font-size: 14.5px;
    line-height: 1.55;
    color: var(--cpa-mute);
}

@media (max-width: 980px) {
    .cpa-commitments { padding: 56px 24px; }
    .cpa-commitments .cpa-commitments-title { font-size: 38px; }
    .cpa-commitments .cpa-commitments-grid--3,
    .cpa-commitments .cpa-commitments-grid--4 {
        grid-template-columns: 1fr;
    }
    .cpa-commitments .cpa-commitment-item {
        border-right: none;
    }
}

/* =============================================================
   Hero — title line spans (defensive: prevents themes from
   stripping or re-coloring orphan text nodes inside <h1>)
   ============================================================= */
.cpa-hero .cpa-hero-title .cpa-hero-title-line {
    display: block;
    color: var(--cpa-ink) !important;
    font-weight: 700;
    line-height: 0.92;
    letter-spacing: -0.045em;
}
.cpa-hero .cpa-hero-title .cpa-hero-title-line--accent {
    font-style: italic;
    font-weight: 500;
    /* color is set inline via style attribute, do not override */
    color: inherit !important;
}
.cpa-hero .cpa-hero-title .cpa-hero-title-line--accent .cpa-hero-title-accent {
    /* When accent has its own span, the inline-style color wins */
}

/* =============================================================
   Hero backgrounds
   ============================================================= */
.cpa-hero {
    position: relative;
    /* default: no bg */
}

.cpa-hero--bg-light {
    background: var(--cpa-bg);
}
.cpa-hero--bg-warm {
    background: var(--cpa-bg-warm);
}
.cpa-hero--bg-dark {
    background: var(--cpa-ink);
}
.cpa-hero--bg-image {
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    overflow: hidden;
}
.cpa-hero-bg-overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
}
.cpa-hero--bg-image .cpa-hero-grid,
.cpa-hero--bg-image .cpa-hero-main,
.cpa-hero--bg-image .cpa-hero-aside {
    position: relative;
    z-index: 2;
}

/* Auto-switch text colors when on dark background */
.cpa-hero--bg-dark .cpa-hero-title .cpa-hero-title-line,
.cpa-hero--bg-image .cpa-hero-title .cpa-hero-title-line {
    color: #fafafa !important;
}
.cpa-hero--bg-dark .cpa-hero-para,
.cpa-hero--bg-image .cpa-hero-para {
    color: #fafafacc !important;
}
.cpa-hero--bg-dark .cpa-hero-eyebrow,
.cpa-hero--bg-image .cpa-hero-eyebrow {
    color: var(--cpa-orange);
}
.cpa-hero--bg-dark .cpa-tag,
.cpa-hero--bg-image .cpa-tag {
    color: #fafafa;
    border-color: #ffffff33;
}
/* Accent stays orange/colored on any bg — its color is inline-styled, just ensure it's not overridden */
.cpa-hero--bg-dark .cpa-hero-title-line--accent,
.cpa-hero--bg-image .cpa-hero-title-line--accent {
    color: inherit !important; /* let inline-style accent color through */
}

/* On image background, push the section to be visually distinct */
.cpa-hero--bg-image {
    border-radius: 24px;
}
.cpa-hero--bg-image,
.cpa-hero--bg-dark {
    padding: 96px 56px;
    margin-top: 24px;
    margin-bottom: 24px;
}
@media (max-width: 980px) {
    .cpa-hero--bg-image,
    .cpa-hero--bg-dark {
        padding: 64px 28px;
        border-radius: 16px;
    }
}

/* =============================================================
   Hero — robust width (v0.9.16)
   IMPORTANT: on this Kadence build, --wp--style--global--wide-size resolves to
   an EMPTY value, because the theme's theme.json maps wideSize to
   var(--global-calc-wide-content-width) — a variable that is never defined
   (the real Kadence wide var is --global-content-wide-width = 1520px). As a
   result the theme's own .alignwide rule produces no max-width, and any
   max-width:var(--wp--style--global--wide-size) is unreliable.

   So we DON'T depend on that variable (nor on the theme's .alignwide rule).
   We force a concrete, centered cap that also overrides the theme's narrower
   "content-width" clamp on top-level blocks. The render.php still emits
   .alignwide/.alignfull so that correctly-configured installs benefit too.

   1320px matches the documented CPA design width and the fallback used by all
   the other CPA section blocks, so the whole page stays consistent.
   Full-bleed (ACF width=full -> .cpa-hero--width-full) is excluded so it can
   still break out edge to edge below. */
.cpa-hero:not(.cpa-hero--width-full) {
    max-width: 1320px !important; /* beats both the empty-var rule and the theme content-width clamp */
    margin-left: auto !important;
    margin-right: auto !important;
}

/* =============================================================
   Hero — Full width variant
   When width=full, the section breaks out of its parent's max-width
   and covers the entire viewport. Content stays constrained inside.
   ============================================================= */
.cpa-hero--width-full {
    max-width: 100vw;
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    padding-left: 0;
    padding-right: 0;
}
/* Inner grid stays centered with max-width */
.cpa-hero--width-full .cpa-hero-grid {
    max-width: var(--wp--style--global--wide-size, 1320px);
    margin: 0 auto;
    padding-left: 56px;
    padding-right: 56px;
}
/* When full + image/dark bg, content gets vertical padding from the section itself */
.cpa-hero--width-full.cpa-hero--bg-image,
.cpa-hero--width-full.cpa-hero--bg-dark {
    padding-top: 120px;
    padding-bottom: 120px;
    border-radius: 0;
    margin-top: 0;
    margin-bottom: 0;
}
.cpa-hero--width-full.cpa-hero--bg-image .cpa-hero-grid,
.cpa-hero--width-full.cpa-hero--bg-dark .cpa-hero-grid {
    padding-top: 0;
    padding-bottom: 0;
}

/* Mobile */
@media (max-width: 980px) {
    .cpa-hero--width-full .cpa-hero-grid {
        padding-left: 24px;
        padding-right: 24px;
    }
    .cpa-hero--width-full.cpa-hero--bg-image,
    .cpa-hero--width-full.cpa-hero--bg-dark {
        padding-top: 64px;
        padding-bottom: 64px;
    }
}

/* =============================================================
   Hero — Eyebrow color variants
   ============================================================= */
.cpa-hero--eyebrow-orange .cpa-hero-eyebrow { color: var(--cpa-orange); }
.cpa-hero--eyebrow-orange .cpa-hero-eyebrow::before { background: var(--cpa-orange); }

.cpa-hero--eyebrow-yellow .cpa-hero-eyebrow { color: var(--cpa-yellow); }
.cpa-hero--eyebrow-yellow .cpa-hero-eyebrow::before { background: var(--cpa-yellow); }

.cpa-hero--eyebrow-green .cpa-hero-eyebrow { color: var(--cpa-green); }
.cpa-hero--eyebrow-green .cpa-hero-eyebrow::before { background: var(--cpa-green); }

.cpa-hero--eyebrow-ink .cpa-hero-eyebrow { color: var(--cpa-ink); }
.cpa-hero--eyebrow-ink .cpa-hero-eyebrow::before { background: var(--cpa-ink); }

.cpa-hero--eyebrow-mute .cpa-hero-eyebrow { color: var(--cpa-mute); }
.cpa-hero--eyebrow-mute .cpa-hero-eyebrow::before { background: var(--cpa-mute); }

/* On dark backgrounds, eyebrow stays visible regardless of chosen color
   — but the user's color choice is respected; we only ensure ink/mute don't
   become invisible on a dark bg by switching them to a light variant */
.cpa-hero--bg-dark.cpa-hero--eyebrow-ink .cpa-hero-eyebrow,
.cpa-hero--bg-image.cpa-hero--eyebrow-ink .cpa-hero-eyebrow {
    color: #fafafa;
}
.cpa-hero--bg-dark.cpa-hero--eyebrow-ink .cpa-hero-eyebrow::before,
.cpa-hero--bg-image.cpa-hero--eyebrow-ink .cpa-hero-eyebrow::before {
    background: #fafafa;
}
.cpa-hero--bg-dark.cpa-hero--eyebrow-mute .cpa-hero-eyebrow,
.cpa-hero--bg-image.cpa-hero--eyebrow-mute .cpa-hero-eyebrow {
    color: #fafafa99;
}
.cpa-hero--bg-dark.cpa-hero--eyebrow-mute .cpa-hero-eyebrow::before,
.cpa-hero--bg-image.cpa-hero--eyebrow-mute .cpa-hero-eyebrow::before {
    background: #fafafa99;
}

/* =============================================================
   CPA — Hero Home (split editorial: text left + photo 4:5 right)
   ============================================================= */
.cpa-hero-home {
    --cpa-bg: #fafafa;
    --cpa-bg-warm: #f4f1ec;
    --cpa-paper: #ffffff;
    --cpa-ink: #1a1a1a;
    --cpa-ink-2: #3a3a3a;
    --cpa-mute: #7a7a7a;
    --cpa-line: #1a1a1a14;
    --cpa-line-2: #1a1a1a26;
    --cpa-orange: #EC982E;
    --cpa-green: #10B981;
    --cpa-yellow: #FBBB00;

    width: 100%;
    max-width: var(--wp--style--global--wide-size, 1320px);
    margin: 0 auto;
    padding: 80px 56px 56px;
    color: var(--cpa-ink);
    font-family: 'Manrope', ui-sans-serif, system-ui, sans-serif;
    -webkit-font-smoothing: antialiased;
    box-sizing: border-box;
}
.cpa-hero-home *,
.cpa-hero-home *::before,
.cpa-hero-home *::after { box-sizing: border-box; }

.cpa-hero-home--width-full {
    max-width: none;
    padding-left: 56px;
    padding-right: 56px;
}

.cpa-hero-home .cpa-hero-home-inner {
    display: grid;
    grid-template-columns: 1.05fr 0.95fr;
    gap: 64px;
    align-items: end;
}

.cpa-hero-home .cpa-hero-home-text {
    display: flex;
    flex-direction: column;
    gap: 32px;
}

.cpa-hero-home .cpa-hero-home-eyebrow {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 11.5px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--cpa-ink);
    display: inline-flex;
    align-items: center;
    gap: 12px;
}
.cpa-hero-home .cpa-hero-home-eyebrow::before {
    content: '';
    width: 32px;
    height: 8px;
    background: var(--cpa-orange);
    display: inline-block;
    flex-shrink: 0;
}
.cpa-hero-home--eyebrow-yellow .cpa-hero-home-eyebrow::before { background: var(--cpa-yellow); }
.cpa-hero-home--eyebrow-green  .cpa-hero-home-eyebrow::before { background: var(--cpa-green); }
.cpa-hero-home--eyebrow-ink    .cpa-hero-home-eyebrow::before { background: var(--cpa-ink); }
.cpa-hero-home--eyebrow-mute   .cpa-hero-home-eyebrow::before { background: var(--cpa-mute); }
.cpa-hero-home--eyebrow-mute   .cpa-hero-home-eyebrow            { color: var(--cpa-mute); }

.cpa-hero-home .cpa-hero-home-title {
    margin: 0;
    font-weight: 700;
    font-size: clamp(48px, 8vw, 96px);
    line-height: 0.92;
    letter-spacing: -0.04em;
    color: var(--cpa-ink);
    display: flex;
    flex-direction: column;
}
.cpa-hero-home .cpa-hero-home-title-line { display: block; }
.cpa-hero-home .cpa-hero-home-title-line--accent {
    font-style: italic;
    font-weight: 500;
}

.cpa-hero-home .cpa-hero-home-lede {
    margin: 0;
    font-size: 19px;
    line-height: 1.5;
    color: var(--cpa-ink-2);
    max-width: 520px;
}

.cpa-hero-home .cpa-hero-home-ctas {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    align-items: center;
}

/* Buttons inside hero-home — reuse the cpa-btn family */
.cpa-hero-home .cpa-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 16px 22px;
    border-radius: 999px;
    font-family: 'Manrope', sans-serif;
    font-size: 15px;
    font-weight: 600;
    text-decoration: none;
    transition: transform .12s ease, background .15s ease, color .15s ease;
    border: 0;
    cursor: pointer;
}
.cpa-hero-home .cpa-btn:hover { transform: translateY(-1px); }
.cpa-hero-home .cpa-btn-orange { background: var(--cpa-orange); color: var(--cpa-ink); }
.cpa-hero-home .cpa-btn-orange:hover { background: #f5a23a; }
.cpa-hero-home .cpa-btn-primary { background: var(--cpa-ink); color: #fafafa; }
.cpa-hero-home .cpa-btn-primary:hover { background: #000; }
.cpa-hero-home .cpa-btn-ghost {
    background: transparent;
    color: var(--cpa-ink);
    border: 1px solid var(--cpa-ink);
}
.cpa-hero-home .cpa-btn-ghost:hover { background: var(--cpa-ink); color: #fafafa; }
.cpa-hero-home .cpa-btn-whatsapp { background: #25D366; color: #ffffff; }
.cpa-hero-home .cpa-btn-whatsapp:hover { background: #1FB857; }
.cpa-hero-home .cpa-btn-whatsapp .cpa-btn-icon {
    display: inline-flex;
    width: 22px;
    height: 22px;
    align-items: center;
    justify-content: center;
}
.cpa-hero-home .cpa-btn-whatsapp .cpa-btn-icon svg { width: 18px; height: 18px; fill: #ffffff; }
.cpa-hero-home .cpa-btn-arrow {
    display: inline-flex;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    background: var(--cpa-ink);
    color: var(--cpa-orange);
}
.cpa-hero-home .cpa-btn-orange .cpa-btn-arrow { background: var(--cpa-ink); color: var(--cpa-orange); }
.cpa-hero-home .cpa-btn-primary .cpa-btn-arrow { background: var(--cpa-orange); color: var(--cpa-ink); }
.cpa-hero-home .cpa-btn-ghost .cpa-btn-arrow { background: var(--cpa-ink); color: var(--cpa-orange); }

/* Photo column */
.cpa-hero-home .cpa-hero-home-photo-frame {
    position: relative;
    aspect-ratio: 4 / 5;
    border-radius: 24px;
    overflow: hidden;
    background: var(--cpa-bg-warm);
    background-image: repeating-linear-gradient(135deg, #ece7df 0 12px, #f4f1ec 12px 24px);
}
.cpa-hero-home .cpa-hero-home-photo-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.cpa-hero-home .cpa-hero-home-photo-placeholder {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    padding: 24px;
    text-align: center;
    color: var(--cpa-mute);
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 12px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}
.cpa-hero-home .cpa-hero-home-photo-badge {
    position: absolute;
    top: 18px;
    left: 18px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    border-radius: 999px;
    background: var(--cpa-ink);
    color: #fafafa;
    border: 1px solid #ffffff22;
    font-family: 'Manrope', sans-serif;
    font-size: 12.5px;
    font-weight: 500;
}
.cpa-hero-home .cpa-hero-home-photo-badge .cpa-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    display: inline-block;
    background: var(--cpa-green);
}
.cpa-hero-home .cpa-hero-home-photo-bubble {
    position: absolute;
    right: 18px;
    bottom: 54px;
    max-width: 80%;
    padding: 10px 14px;
    border-radius: 14px;
    background: var(--cpa-orange);
    color: var(--cpa-ink);
    font-weight: 700;
    font-size: 15px;
    letter-spacing: -0.02em;
    line-height: 1.25;
}

@media (max-width: 980px) {
    .cpa-hero-home { padding: 56px 24px 40px; }
    .cpa-hero-home .cpa-hero-home-inner {
        grid-template-columns: 1fr;
        gap: 40px;
        align-items: stretch;
    }
    .cpa-hero-home .cpa-hero-home-title { font-size: clamp(40px, 11vw, 64px); }
    .cpa-hero-home .cpa-hero-home-photo-frame { aspect-ratio: 4 / 4; }
}
@media (max-width: 600px) {
    .cpa-hero-home .cpa-hero-home-ctas { flex-direction: column; align-items: stretch; }
    .cpa-hero-home .cpa-hero-home-ctas .cpa-btn { justify-content: center; }
}

/* =============================================================
   CPA — Stat Strip (horizontal grid of 2–6 key numbers)
   ============================================================= */
.cpa-stat-strip {
    --cpa-ink: #1a1a1a;
    --cpa-mute: #7a7a7a;
    --cpa-line: #1a1a1a14;

    width: 100%;
    max-width: var(--wp--style--global--wide-size, 1320px);
    margin: 0 auto;
    padding: 24px 56px;
    color: var(--cpa-ink);
    font-family: 'Manrope', ui-sans-serif, system-ui, sans-serif;
    -webkit-font-smoothing: antialiased;
    box-sizing: border-box;
}
.cpa-stat-strip *,
.cpa-stat-strip *::before,
.cpa-stat-strip *::after { box-sizing: border-box; }

.cpa-stat-strip--width-full { max-width: none; }

.cpa-stat-strip .cpa-stat-strip-inner {
    display: grid;
    grid-template-columns: repeat(var(--cpa-stat-cols, 4), 1fr);
    border-top: 1px solid var(--cpa-line);
    border-bottom: 1px solid var(--cpa-line);
}
.cpa-stat-strip--count-2 .cpa-stat-strip-inner { --cpa-stat-cols: 2; }
.cpa-stat-strip--count-3 .cpa-stat-strip-inner { --cpa-stat-cols: 3; }
.cpa-stat-strip--count-4 .cpa-stat-strip-inner { --cpa-stat-cols: 4; }
.cpa-stat-strip--count-5 .cpa-stat-strip-inner { --cpa-stat-cols: 5; }
.cpa-stat-strip--count-6 .cpa-stat-strip-inner { --cpa-stat-cols: 6; }

.cpa-stat-strip .cpa-stat-strip-item {
    padding: 22px 24px;
    border-left: 1px solid var(--cpa-line);
}
.cpa-stat-strip .cpa-stat-strip-item:first-child { border-left: 0; }

.cpa-stat-strip .cpa-stat-strip-key {
    font-weight: 700;
    font-size: 42px;
    line-height: 1;
    letter-spacing: -0.04em;
    color: var(--cpa-ink);
}
.cpa-stat-strip .cpa-stat-strip-label {
    margin-top: 4px;
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 11px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--cpa-mute);
}
.cpa-stat-strip .cpa-stat-strip-empty {
    grid-column: 1 / -1;
    padding: 32px 24px;
    text-align: center;
    color: var(--cpa-mute);
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 12px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

@media (max-width: 980px) {
    .cpa-stat-strip { padding: 16px 24px; }
    .cpa-stat-strip .cpa-stat-strip-inner { grid-template-columns: repeat(2, 1fr) !important; }
    .cpa-stat-strip .cpa-stat-strip-item:nth-child(2n+1) { border-left: 0; }
    .cpa-stat-strip .cpa-stat-strip-item:nth-child(n+3) { border-top: 1px solid var(--cpa-line); }
    .cpa-stat-strip .cpa-stat-strip-key { font-size: 34px; }
}
@media (max-width: 480px) {
    .cpa-stat-strip .cpa-stat-strip-inner { grid-template-columns: 1fr !important; }
    .cpa-stat-strip .cpa-stat-strip-item { border-left: 0; }
    .cpa-stat-strip .cpa-stat-strip-item:nth-child(n+2) { border-top: 1px solid var(--cpa-line); }
}

/* =============================================================
   CPA — Services Bento (5-cell mosaic mosaic with baked slot designs)
   ============================================================= */
.cpa-bento {
    --cpa-bg: #fafafa;
    --cpa-bg-warm: #f4f1ec;
    --cpa-paper: #ffffff;
    --cpa-ink: #1a1a1a;
    --cpa-ink-2: #3a3a3a;
    --cpa-mute: #7a7a7a;
    --cpa-line: #1a1a1a14;
    --cpa-line-2: #1a1a1a26;
    --cpa-orange: #EC982E;
    --cpa-green: #10B981;
    --cpa-yellow: #FBBB00;

    width: 100%;
    max-width: var(--wp--style--global--wide-size, 1320px);
    margin: 0 auto;
    padding: 40px 56px 96px;
    color: var(--cpa-ink);
    font-family: 'Manrope', ui-sans-serif, system-ui, sans-serif;
    -webkit-font-smoothing: antialiased;
    box-sizing: border-box;
}
.cpa-bento *,
.cpa-bento *::before,
.cpa-bento *::after { box-sizing: border-box; }

.cpa-bento--width-full { max-width: none; }

/* ----- Header ----- */
.cpa-bento .cpa-bento-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 48px;
    margin-bottom: 40px;
    flex-wrap: wrap;
}
.cpa-bento .cpa-bento-header-text { max-width: 720px; flex: 1 1 auto; }

.cpa-bento .cpa-bento-eyebrow {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 11.5px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--cpa-ink);
    margin-bottom: 20px;
    display: inline-flex;
    align-items: center;
    gap: 12px;
}
.cpa-bento .cpa-bento-eyebrow::before {
    content: '';
    width: 32px;
    height: 8px;
    background: var(--cpa-orange);
    display: inline-block;
    flex-shrink: 0;
}
.cpa-bento--eyebrow-yellow .cpa-bento-eyebrow::before { background: var(--cpa-yellow); }
.cpa-bento--eyebrow-green  .cpa-bento-eyebrow::before { background: var(--cpa-green); }
.cpa-bento--eyebrow-ink    .cpa-bento-eyebrow::before { background: var(--cpa-ink); }
.cpa-bento--eyebrow-mute   .cpa-bento-eyebrow::before { background: var(--cpa-mute); }
.cpa-bento--eyebrow-mute   .cpa-bento-eyebrow            { color: var(--cpa-mute); }

.cpa-bento .cpa-bento-title {
    margin: 0;
    font-weight: 700;
    font-size: clamp(40px, 5.5vw, 64px);
    line-height: 0.95;
    letter-spacing: -0.035em;
    color: var(--cpa-ink);
    display: flex;
    flex-direction: column;
}
.cpa-bento .cpa-bento-title-line { display: block; }

.cpa-bento .cpa-bento-header-aside {
    display: flex;
    flex-direction: column;
    gap: 18px;
    align-items: flex-start;
    max-width: 380px;
    padding-bottom: 10px;
}
.cpa-bento .cpa-bento-header-para {
    margin: 0;
    font-size: 17px;
    line-height: 1.55;
    color: var(--cpa-ink-2);
}
.cpa-bento .cpa-bento-header-link {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 12px 18px;
    border-radius: 999px;
    background: transparent;
    color: var(--cpa-ink);
    border: 1px solid var(--cpa-ink);
    font-family: 'Manrope', sans-serif;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    transition: transform .12s, background .15s, color .15s;
}
.cpa-bento .cpa-bento-header-link:hover {
    background: var(--cpa-ink);
    color: #fafafa;
    transform: translateY(-1px);
}
.cpa-bento .cpa-bento-header-link .cpa-btn-arrow {
    display: inline-flex;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    background: var(--cpa-ink);
    color: var(--cpa-orange);
    transition: background .15s, color .15s;
}
.cpa-bento .cpa-bento-header-link:hover .cpa-btn-arrow {
    background: var(--cpa-orange);
    color: var(--cpa-ink);
}

/* ----- Grid (6 cols × 2 rows) ----- */
.cpa-bento .cpa-bento-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    grid-template-rows: repeat(2, 1fr);
    gap: 18px;
    min-height: 680px;
}

/* ----- Common cell base ----- */
.cpa-bento .cpa-bento-cell {
    position: relative;
    overflow: hidden;
    border-radius: 24px;
    padding: 28px 30px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    text-decoration: none;
    color: inherit;
    transition: transform .18s ease, box-shadow .18s ease;
}
.cpa-bento .cpa-bento-cell--linked:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 28px -16px #1a1a1a44;
}

.cpa-bento .cpa-bento-cell-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
}
.cpa-bento .cpa-bento-cell-num {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 11px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
}
.cpa-bento .cpa-bento-cell-kicker {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 11px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}
.cpa-bento .cpa-bento-cell-meta {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 11px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    text-align: right;
}
.cpa-bento .cpa-bento-cell-foot {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.cpa-bento .cpa-bento-cell-title {
    margin: 0;
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1;
}
.cpa-bento .cpa-bento-cell-desc {
    margin: 0;
    font-size: 13px;
    line-height: 1.45;
}

/* ----- Slot 0 — Hero card (3×2, dark, hatched house) ----- */
.cpa-bento .cpa-bento-cell--hero {
    grid-column: span 3;
    grid-row: span 2;
    background: var(--cpa-ink);
    color: #fafafa;
    padding: 36px 40px;
}
.cpa-bento .cpa-bento-cell--hero .cpa-bento-cell-num { color: var(--cpa-orange); }
.cpa-bento .cpa-bento-cell--hero .cpa-bento-cell-kicker { color: var(--cpa-orange); }
.cpa-bento .cpa-bento-cell--hero .cpa-bento-cell-meta { color: #ffffff66; }
.cpa-bento .cpa-bento-cell--hero .cpa-bento-cell-art {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 30px 0;
}
.cpa-bento .cpa-bento-cell--hero .cpa-bento-cell-art svg {
    width: 100%;
    max-width: 480px;
    height: auto;
}
.cpa-bento .cpa-bento-cell--hero .cpa-bento-cell-title {
    font-size: clamp(34px, 4vw, 48px);
    margin-bottom: 12px;
}
.cpa-bento .cpa-bento-cell--hero .cpa-bento-cell-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 4px 0 16px;
}
.cpa-bento .cpa-bento-cell--hero .cpa-bento-cell-tag {
    font-size: 12px;
    padding: 6px 11px;
    border-radius: 999px;
    border: 1px solid #ffffff22;
    color: #fafafa;
}
.cpa-bento .cpa-bento-cell--hero .cpa-bento-cell-cta {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 12px 18px;
    border-radius: 999px;
    background: var(--cpa-orange);
    color: var(--cpa-ink);
    font-family: 'Manrope', sans-serif;
    font-size: 14px;
    font-weight: 600;
    align-self: flex-start;
}
.cpa-bento .cpa-bento-cell--hero .cpa-bento-cell-cta .cpa-btn-arrow {
    display: inline-flex;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    background: var(--cpa-ink);
    color: var(--cpa-orange);
}

/* ----- Slot 1 — Yellow card (2×1) ----- */
.cpa-bento .cpa-bento-cell--yellow {
    grid-column: span 2;
    grid-row: span 1;
    background: var(--cpa-yellow);
    color: var(--cpa-ink);
    padding: 24px 26px;
}
.cpa-bento .cpa-bento-cell--yellow .cpa-bento-cell-title { font-size: clamp(26px, 2.5vw, 32px); }
.cpa-bento .cpa-bento-cell--yellow .cpa-bento-cell-desc { color: #1a1a1acc; }

/* ----- Slot 2 — Green stripe card (1×1, white) ----- */
.cpa-bento .cpa-bento-cell--stripe {
    grid-column: span 1;
    grid-row: span 1;
    background: #ffffff;
    color: var(--cpa-ink);
    border: 1px solid var(--cpa-line);
    padding: 24px 22px;
}
.cpa-bento .cpa-bento-cell--stripe .cpa-bento-cell-stripe {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 8px;
    background: var(--cpa-green);
}
.cpa-bento .cpa-bento-cell--stripe .cpa-bento-cell-num { margin-top: 6px; }
.cpa-bento .cpa-bento-cell--stripe .cpa-bento-cell-title { font-size: 22px; line-height: 1.05; }
.cpa-bento .cpa-bento-cell--stripe .cpa-bento-cell-meta--arrow {
    font-size: 10px;
    letter-spacing: 0.14em;
    color: var(--cpa-mute);
    text-align: left;
}

/* ----- Slot 3 — Logistics card (2×1, white, A→LU→★) ----- */
.cpa-bento .cpa-bento-cell--logistics {
    grid-column: span 2;
    grid-row: span 1;
    background: #ffffff;
    color: var(--cpa-ink);
    border: 1px solid var(--cpa-line);
    padding: 24px 26px;
}
.cpa-bento .cpa-bento-cell--logistics .cpa-bento-cell-meta { color: var(--cpa-mute); }
.cpa-bento .cpa-bento-cell--logistics .cpa-bento-cell-trail {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--cpa-mute);
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 11px;
    letter-spacing: 0.1em;
    margin: 8px 0;
}
.cpa-bento .cpa-bento-cell--logistics .cpa-bento-cell-trail-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--cpa-ink);
    flex-shrink: 0;
}
.cpa-bento .cpa-bento-cell--logistics .cpa-bento-cell-trail-line {
    flex: 1;
    border-top: 1.5px dashed var(--cpa-mute);
    min-width: 20px;
}
.cpa-bento .cpa-bento-cell--logistics .cpa-bento-cell-trail-label { white-space: nowrap; }
.cpa-bento .cpa-bento-cell--logistics .cpa-bento-cell-trail-star {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: var(--cpa-orange);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--cpa-ink);
    font-size: 9px;
    flex-shrink: 0;
}
.cpa-bento .cpa-bento-cell--logistics .cpa-bento-cell-title { font-size: clamp(26px, 2.5vw, 32px); }
.cpa-bento .cpa-bento-cell--logistics .cpa-bento-cell-desc { color: var(--cpa-mute); }

/* ----- Slot 4 — Corner + (1×1, dark) ----- */
.cpa-bento .cpa-bento-cell--corner {
    grid-column: span 1;
    grid-row: span 1;
    background: var(--cpa-ink);
    color: #fafafa;
    padding: 24px 22px;
}
.cpa-bento .cpa-bento-cell--corner .cpa-bento-cell-num { color: var(--cpa-green); }
.cpa-bento .cpa-bento-cell--corner .cpa-bento-cell-plus {
    position: absolute;
    top: 14px;
    right: -8px;
    font-size: 90px;
    font-weight: 700;
    color: #ffffff10;
    line-height: 1;
    letter-spacing: -0.06em;
    pointer-events: none;
}
.cpa-bento .cpa-bento-cell--corner .cpa-bento-cell-title { font-size: 22px; line-height: 1.05; }
.cpa-bento .cpa-bento-cell--corner .cpa-bento-cell-meta--arrow {
    font-size: 10px;
    letter-spacing: 0.14em;
    color: #ffffff80;
    text-align: left;
}

/* =============================================================
   Bento — per-cell theme overrides (v0.9.3 dev)
   Each slot has a position-based default theme. These rules let
   the editor force a specific look on any cell via the
   `card_theme` sub-field, without touching the layout (grid-area,
   sizing). Higher specificity (.cpa-bento-cell--theme-X) wins
   over the position-based selectors above.
   ============================================================= */

/* ----- Dark override: ink background, light text ----- */
.cpa-bento .cpa-bento-cell.cpa-bento-cell--theme-dark {
    background: var(--cpa-ink);
    color: #fafafa;
    border: 0;
}
/* Title: force light. Doubled class + explicit slot selectors to beat the
   position-based rules (.cpa-bento-cell--stripe .cpa-bento-cell-title etc.)
   which hardcode --cpa-ink and would otherwise win on specificity. */
.cpa-bento .cpa-bento-cell--theme-dark.cpa-bento-cell--theme-dark .cpa-bento-cell-title,
.cpa-bento .cpa-bento-cell--theme-dark.cpa-bento-cell--stripe .cpa-bento-cell-title,
.cpa-bento .cpa-bento-cell--theme-dark.cpa-bento-cell--logistics .cpa-bento-cell-title,
.cpa-bento .cpa-bento-cell--theme-dark.cpa-bento-cell--corner .cpa-bento-cell-title,
.cpa-bento .cpa-bento-cell--theme-dark.cpa-bento-cell--yellow .cpa-bento-cell-title {
    color: #fafafa;
}
.cpa-bento .cpa-bento-cell--theme-dark .cpa-bento-cell-num { color: var(--cpa-orange); }
.cpa-bento .cpa-bento-cell--theme-dark .cpa-bento-cell-kicker { color: var(--cpa-orange); }
.cpa-bento .cpa-bento-cell--theme-dark .cpa-bento-cell-meta { color: #ffffff66; }
/* Desc: doubled class to beat slot-specific desc color (e.g. logistics/stripe). */
.cpa-bento .cpa-bento-cell--theme-dark.cpa-bento-cell--theme-dark .cpa-bento-cell-desc,
.cpa-bento .cpa-bento-cell--theme-dark.cpa-bento-cell--logistics .cpa-bento-cell-desc,
.cpa-bento .cpa-bento-cell--theme-dark.cpa-bento-cell--yellow .cpa-bento-cell-desc {
    color: #ffffffb3;
}
.cpa-bento .cpa-bento-cell--theme-dark .cpa-bento-cell-meta--arrow { color: #ffffff80; }
/* Corner plus watermark: tone it for dark bg. */
.cpa-bento .cpa-bento-cell--theme-dark .cpa-bento-cell-plus { color: #ffffff14; }
.cpa-bento .cpa-bento-cell--theme-dark .cpa-bento-cell-trail-label { color: var(--cpa-orange); }
.cpa-bento .cpa-bento-cell--theme-dark .cpa-bento-cell-trail-dot,
.cpa-bento .cpa-bento-cell--theme-dark .cpa-bento-cell-trail-line { background: #ffffff33; }
.cpa-bento .cpa-bento-cell--theme-dark .cpa-bento-cell-trail-star { color: var(--cpa-orange); }
/* Stripe/light cells have a border by default — remove it on dark. */
.cpa-bento .cpa-bento-cell--theme-dark.cpa-bento-cell--stripe,
.cpa-bento .cpa-bento-cell--theme-dark.cpa-bento-cell--logistics { border-color: transparent; }

/* ----- Light override: cream background, ink text ----- */
.cpa-bento .cpa-bento-cell.cpa-bento-cell--theme-light {
    background: #fafafa;
    color: var(--cpa-ink);
    border: 1px solid var(--cpa-line);
}
/* Title/desc: force ink. Doubled class + slot selectors to beat the
   dark slots (hero/corner) which hardcode light text. */
.cpa-bento .cpa-bento-cell--theme-light.cpa-bento-cell--theme-light .cpa-bento-cell-title,
.cpa-bento .cpa-bento-cell--theme-light.cpa-bento-cell--hero .cpa-bento-cell-title,
.cpa-bento .cpa-bento-cell--theme-light.cpa-bento-cell--corner .cpa-bento-cell-title {
    color: var(--cpa-ink);
}
.cpa-bento .cpa-bento-cell--theme-light .cpa-bento-cell-num { color: var(--cpa-orange); }
.cpa-bento .cpa-bento-cell--theme-light .cpa-bento-cell-kicker { color: var(--cpa-orange); }
.cpa-bento .cpa-bento-cell--theme-light .cpa-bento-cell-meta { color: var(--cpa-mute); }
.cpa-bento .cpa-bento-cell--theme-light.cpa-bento-cell--theme-light .cpa-bento-cell-desc,
.cpa-bento .cpa-bento-cell--theme-light.cpa-bento-cell--hero .cpa-bento-cell-desc {
    color: var(--cpa-mute);
}
.cpa-bento .cpa-bento-cell--theme-light .cpa-bento-cell-plus { color: #1a1a1010; }

/* ----- Yellow override: CPA accent yellow ----- */
.cpa-bento .cpa-bento-cell.cpa-bento-cell--theme-yellow {
    background: var(--cpa-yellow);
    color: var(--cpa-ink);
    border: 0;
}
.cpa-bento .cpa-bento-cell--theme-yellow.cpa-bento-cell--theme-yellow .cpa-bento-cell-title,
.cpa-bento .cpa-bento-cell--theme-yellow.cpa-bento-cell--hero .cpa-bento-cell-title,
.cpa-bento .cpa-bento-cell--theme-yellow.cpa-bento-cell--corner .cpa-bento-cell-title {
    color: var(--cpa-ink);
}
.cpa-bento .cpa-bento-cell--theme-yellow .cpa-bento-cell-desc { color: #1a1a1acc; }

/* ----- Green-stripe override: white card with green top stripe ----- */
.cpa-bento .cpa-bento-cell.cpa-bento-cell--theme-green-stripe {
    background: #ffffff;
    color: var(--cpa-ink);
    border: 1px solid var(--cpa-line);
    position: relative;
}
.cpa-bento .cpa-bento-cell--theme-green-stripe::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 8px;
    background: var(--cpa-green);
}
.cpa-bento .cpa-bento-cell--theme-green-stripe.cpa-bento-cell--theme-green-stripe .cpa-bento-cell-title,
.cpa-bento .cpa-bento-cell--theme-green-stripe.cpa-bento-cell--hero .cpa-bento-cell-title,
.cpa-bento .cpa-bento-cell--theme-green-stripe.cpa-bento-cell--corner .cpa-bento-cell-title {
    color: var(--cpa-ink);
}
.cpa-bento .cpa-bento-cell--theme-green-stripe .cpa-bento-cell-num { color: var(--cpa-green); }
.cpa-bento .cpa-bento-cell--theme-green-stripe .cpa-bento-cell-desc { color: var(--cpa-mute); }

/* ----- Responsive ----- */
@media (max-width: 1100px) {
    .cpa-bento .cpa-bento-grid {
        grid-template-columns: repeat(4, 1fr);
        grid-template-rows: auto;
        min-height: 0;
    }
    .cpa-bento .cpa-bento-cell--hero      { grid-column: span 4; grid-row: span 2; min-height: 480px; }
    .cpa-bento .cpa-bento-cell--yellow    { grid-column: span 2; grid-row: span 1; min-height: 200px; }
    .cpa-bento .cpa-bento-cell--stripe    { grid-column: span 2; grid-row: span 1; min-height: 200px; }
    .cpa-bento .cpa-bento-cell--logistics { grid-column: span 2; grid-row: span 1; min-height: 220px; }
    .cpa-bento .cpa-bento-cell--corner    { grid-column: span 2; grid-row: span 1; min-height: 200px; }
}
@media (max-width: 720px) {
    .cpa-bento { padding: 24px 24px 56px; }
    .cpa-bento .cpa-bento-grid {
        grid-template-columns: 1fr;
    }
    .cpa-bento .cpa-bento-cell,
    .cpa-bento .cpa-bento-cell--hero,
    .cpa-bento .cpa-bento-cell--yellow,
    .cpa-bento .cpa-bento-cell--stripe,
    .cpa-bento .cpa-bento-cell--logistics,
    .cpa-bento .cpa-bento-cell--corner {
        grid-column: span 1;
        grid-row: span 1;
        min-height: 180px;
    }
    .cpa-bento .cpa-bento-cell--hero { min-height: 420px; padding: 28px 26px; }
    .cpa-bento .cpa-bento-header { flex-direction: column; align-items: stretch; gap: 24px; }
    .cpa-bento .cpa-bento-header-aside { padding-bottom: 0; }
}

/* =============================================================
   CPA — Contact: Coordonnées card (cpa/contact-info)
   ============================================================= */
.cpa-contact-info {
    --cpa-ink: #1a1a1a;
    --cpa-ink-2: #3a3a3a;
    --cpa-mute: #7a7a7a;
    --cpa-line: #1a1a1a14;
    --cpa-orange: #EC982E;

    width: 100%;
    color: var(--cpa-ink);
    font-family: 'Manrope', ui-sans-serif, system-ui, sans-serif;
    -webkit-font-smoothing: antialiased;
    box-sizing: border-box;
}
.cpa-contact-info *,
.cpa-contact-info *::before,
.cpa-contact-info *::after { box-sizing: border-box; }

.cpa-contact-info .cpa-contact-info-inner {
    background: #ffffff;
    border: 1px solid var(--cpa-line);
    border-radius: 24px;
    padding: 24px 28px;
}

.cpa-contact-info .cpa-contact-info-eyebrow {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 11px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--cpa-mute);
    margin-bottom: 14px;
    display: inline-flex;
    align-items: center;
    gap: 10px;
}
.cpa-contact-info .cpa-contact-info-eyebrow::before {
    content: '';
    width: 24px;
    height: 6px;
    background: var(--cpa-orange);
    display: inline-block;
    flex-shrink: 0;
}

.cpa-contact-info .cpa-contact-info-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
}
.cpa-contact-info .cpa-contact-info-row {
    display: grid;
    grid-template-columns: 120px 1fr;
    align-items: center;
    gap: 14px;
    padding: 12px 0;
    border-top: 1px solid var(--cpa-line);
}
.cpa-contact-info .cpa-contact-info-row:first-child { border-top: 0; }

.cpa-contact-info .cpa-contact-info-label {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 11px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--cpa-mute);
}
.cpa-contact-info .cpa-contact-info-value {
    color: var(--cpa-ink);
    text-decoration: none;
    font-size: 16px;
    font-weight: 500;
    word-break: break-word;
    transition: color .15s;
}
.cpa-contact-info a.cpa-contact-info-value:hover { color: var(--cpa-orange); }
.cpa-contact-info .cpa-contact-info-empty {
    padding: 12px 0;
    color: var(--cpa-mute);
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 12px;
    letter-spacing: 0.08em;
}

@media (max-width: 480px) {
    .cpa-contact-info .cpa-contact-info-row {
        grid-template-columns: 1fr;
        gap: 4px;
        padding: 14px 0;
    }
}

/* =============================================================
   CPA — Contact: Horaires card (cpa/contact-hours)
   ============================================================= */
.cpa-contact-hours {
    --cpa-ink: #1a1a1a;
    --cpa-ink-2: #3a3a3a;
    --cpa-mute: #7a7a7a;
    --cpa-line: #1a1a1a14;
    --cpa-orange: #EC982E;
    --cpa-green: #10B981;

    width: 100%;
    color: var(--cpa-ink);
    font-family: 'Manrope', ui-sans-serif, system-ui, sans-serif;
    -webkit-font-smoothing: antialiased;
    box-sizing: border-box;
}
.cpa-contact-hours *,
.cpa-contact-hours *::before,
.cpa-contact-hours *::after { box-sizing: border-box; }

.cpa-contact-hours .cpa-contact-hours-inner {
    background: #ffffff;
    border: 1px solid var(--cpa-line);
    border-radius: 24px;
    padding: 24px 28px;
}

.cpa-contact-hours .cpa-contact-hours-eyebrow {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 11px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--cpa-mute);
    margin-bottom: 14px;
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

.cpa-contact-hours .cpa-contact-hours-dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    display: inline-block;
    flex-shrink: 0;
}
.cpa-contact-hours .cpa-contact-hours-dot--green {
    animation: cpaPulse 1.6s ease-in-out infinite;
}
@keyframes cpaPulse {
    0%, 100% { box-shadow: 0 0 0 5px #10B98144; }
    50%      { box-shadow: 0 0 0 9px #10B98111; }
}
.cpa-contact-hours .cpa-contact-hours-dot--orange {
    animation: cpaPulseOrange 1.8s ease-in-out infinite;
}
@keyframes cpaPulseOrange {
    0%, 100% { box-shadow: 0 0 0 5px #EC982E44; }
    50%      { box-shadow: 0 0 0 9px #EC982E11; }
}

.cpa-contact-hours .cpa-contact-hours-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
}
.cpa-contact-hours .cpa-contact-hours-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
    padding: 10px 0;
    border-top: 1px solid var(--cpa-line);
}
.cpa-contact-hours .cpa-contact-hours-row:first-child { border-top: 0; }

.cpa-contact-hours .cpa-contact-hours-day {
    font-size: 14px;
    color: var(--cpa-ink);
}
.cpa-contact-hours .cpa-contact-hours-hours {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 12.5px;
    color: var(--cpa-ink);
    white-space: nowrap;
}
.cpa-contact-hours .cpa-contact-hours-row--closed .cpa-contact-hours-day,
.cpa-contact-hours .cpa-contact-hours-row--closed .cpa-contact-hours-hours {
    color: var(--cpa-mute);
}
.cpa-contact-hours .cpa-contact-hours-empty {
    padding: 8px 0;
    color: var(--cpa-mute);
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 12px;
}

/* =============================================================
   CPA — Contact: WhatsApp callout card (cpa/contact-whatsapp-card)
   ============================================================= */
.cpa-cwa-card {
    --cpa-ink: #1a1a1a;
    --cpa-orange: #EC982E;
    --cpa-green: #10B981;

    width: 100%;
    position: relative;
    overflow: hidden;
    background: var(--cpa-ink);
    color: #fafafa;
    border-radius: 24px;
    padding: 0;
    font-family: 'Manrope', ui-sans-serif, system-ui, sans-serif;
    -webkit-font-smoothing: antialiased;
    box-sizing: border-box;
}
.cpa-cwa-card *,
.cpa-cwa-card *::before,
.cpa-cwa-card *::after { box-sizing: border-box; }

.cpa-cwa-card .cpa-cwa-card-halo {
    position: absolute;
    right: -30px;
    top: -30px;
    width: 160px;
    height: 160px;
    border-radius: 50%;
    background: #10B98122;
    pointer-events: none;
}

.cpa-cwa-card .cpa-cwa-card-inner {
    position: relative;
    padding: 28px 30px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.cpa-cwa-card .cpa-cwa-card-eyebrow {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 11px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--cpa-green);
}

.cpa-cwa-card .cpa-cwa-card-title {
    margin: 0;
    font-weight: 700;
    font-size: 30px;
    line-height: 1.05;
    letter-spacing: -0.02em;
    color: #fafafa;
    display: flex;
    flex-direction: column;
}
.cpa-cwa-card .cpa-cwa-card-title-line { display: block; }
.cpa-cwa-card .cpa-cwa-card-accent { color: var(--cpa-green); }

.cpa-cwa-card .cpa-cwa-card-para {
    margin: 0;
    font-size: 14px;
    line-height: 1.5;
    color: #fafafacc;
}

.cpa-cwa-card .cpa-cwa-card-btn {
    align-self: flex-start;
    margin-top: 6px;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 12px 18px;
    border-radius: 999px;
    background: var(--cpa-orange);
    color: var(--cpa-ink);
    text-decoration: none;
    font-family: 'Manrope', sans-serif;
    font-size: 14px;
    font-weight: 600;
    transition: transform .12s ease, background .15s ease;
}
.cpa-cwa-card .cpa-cwa-card-btn:hover { background: #f5a23a; transform: translateY(-1px); }
.cpa-cwa-card .cpa-cwa-card-btn .cpa-btn-arrow {
    display: inline-flex;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    background: var(--cpa-ink);
    color: var(--cpa-orange);
}

/* =============================================================
   CPA — Contact: Form wrapper (cpa/contact-form) + Fluent Forms restyle
   ============================================================= */
.cpa-contact-form {
    --cpa-bg: #fafafa;
    --cpa-paper: #ffffff;
    --cpa-ink: #1a1a1a;
    --cpa-ink-2: #3a3a3a;
    --cpa-mute: #7a7a7a;
    --cpa-line: #1a1a1a14;
    --cpa-line-2: #1a1a1a26;
    --cpa-orange: #EC982E;
    --cpa-green: #10B981;

    width: 100%;
    color: var(--cpa-ink);
    font-family: 'Manrope', ui-sans-serif, system-ui, sans-serif;
    -webkit-font-smoothing: antialiased;
    box-sizing: border-box;
}
.cpa-contact-form *,
.cpa-contact-form *::before,
.cpa-contact-form *::after { box-sizing: border-box; }

.cpa-contact-form .cpa-contact-form-inner {
    background: #ffffff;
    border: 1px solid var(--cpa-line);
    border-radius: 32px;
    padding: 40px 44px;
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.cpa-contact-form .cpa-contact-form-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 24px;
    flex-wrap: wrap;
}
.cpa-contact-form .cpa-contact-form-title {
    margin: 0;
    font-weight: 700;
    font-size: clamp(28px, 3.5vw, 40px);
    letter-spacing: -0.025em;
    line-height: 1.05;
    color: var(--cpa-ink);
}
.cpa-contact-form .cpa-contact-form-accent { color: var(--cpa-orange); }
.cpa-contact-form .cpa-contact-form-eyebrow {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 11px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--cpa-mute);
}

.cpa-contact-form .cpa-contact-form-body {
    margin-top: 8px;
}
.cpa-contact-form .cpa-contact-form-empty {
    padding: 20px 18px;
    border: 1px dashed var(--cpa-line-2);
    border-radius: 16px;
    color: var(--cpa-mute);
    font-size: 14px;
    line-height: 1.5;
}
.cpa-contact-form .cpa-contact-form-empty code {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 13px;
    background: var(--cpa-bg);
    padding: 1px 6px;
    border-radius: 4px;
}

.cpa-contact-form .cpa-contact-form-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    border-top: 1px solid var(--cpa-line);
    padding-top: 18px;
}
.cpa-contact-form .cpa-contact-form-footnote {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 11px;
    letter-spacing: 0.10em;
    text-transform: uppercase;
    color: var(--cpa-mute);
}

/* ----- Fluent Forms editorial restyle (applies inside .cpa-contact-form) ----- */
.cpa-contact-form .fluentform .ff-el-group,
.cpa-contact-form .fluentform .ff-t-cell,
.cpa-contact-form .fluentform .ff-el-form-control-wrapper {
    margin-bottom: 18px;
}
.cpa-contact-form .fluentform label,
.cpa-contact-form .fluentform .ff-el-input--label label,
.cpa-contact-form .fluentform .ff_t_container label {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 11px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--cpa-ink);
    font-weight: 500;
    margin-bottom: 8px;
    display: block;
}
.cpa-contact-form .fluentform .ff-el-input--content input[type="text"],
.cpa-contact-form .fluentform .ff-el-input--content input[type="email"],
.cpa-contact-form .fluentform .ff-el-input--content input[type="tel"],
.cpa-contact-form .fluentform .ff-el-input--content input[type="url"],
.cpa-contact-form .fluentform .ff-el-input--content input[type="number"],
.cpa-contact-form .fluentform .ff-el-input--content textarea,
.cpa-contact-form .fluentform .ff-el-input--content select {
    background: transparent;
    border: 0;
    border-bottom: 1px solid var(--cpa-ink);
    border-radius: 0;
    padding: 12px 0;
    font-size: 17px;
    font-family: 'Manrope', sans-serif;
    color: var(--cpa-ink);
    outline: none;
    width: 100%;
    box-shadow: none;
    transition: border-color .15s ease;
}
.cpa-contact-form .fluentform .ff-el-input--content input:focus,
.cpa-contact-form .fluentform .ff-el-input--content textarea:focus,
.cpa-contact-form .fluentform .ff-el-input--content select:focus {
    border-bottom-color: var(--cpa-orange);
    box-shadow: none;
}
.cpa-contact-form .fluentform .ff-el-input--content textarea {
    border: 1px solid var(--cpa-line-2);
    border-radius: 14px;
    padding: 14px 16px;
    min-height: 120px;
    line-height: 1.5;
}
.cpa-contact-form .fluentform .ff-el-input--content textarea:focus {
    border-color: var(--cpa-orange);
}
.cpa-contact-form .fluentform .ff-el-input--content input::placeholder,
.cpa-contact-form .fluentform .ff-el-input--content textarea::placeholder {
    color: var(--cpa-mute);
}

/* =============================================================
   Checkboxes / radios → CPA pills (v0.8.3)
   - Native input visually hidden but kept accessible
   - The label IS the pill (outline by default, ink-fill when checked)
   - Checkmark/dot appears inline when checked
   ============================================================= */

/* The wrapper holds <input> + <label>; layout side-by-side */
.cpa-contact-form .fluentform .ff-el-form-check {
    display: inline-block;
    margin: 0 6px 8px 0;
    position: relative;
}

/* Hide the native checkbox/radio without breaking accessibility */
.cpa-contact-form .fluentform .ff-el-form-check input[type="checkbox"],
.cpa-contact-form .fluentform .ff-el-form-check input[type="radio"] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
    width: 1px;
    height: 1px;
    margin: 0;
    padding: 0;
}

/* The label is the visible pill */
.cpa-contact-form .fluentform .ff-el-form-check label,
.cpa-contact-form .fluentform .ff-el-form-check .ff-el-form-check-label {
    display: inline-flex !important;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    border-radius: 999px;
    border: 1px solid var(--cpa-line-2);
    background: #ffffff;
    color: var(--cpa-ink);
    font-family: 'Manrope', sans-serif;
    font-size: 13.5px;
    font-weight: 500;
    line-height: 1.2;
    cursor: pointer;
    transition: background .15s, border-color .15s, color .15s, transform .12s;
    margin: 0;
    text-transform: none;
    letter-spacing: 0;
    user-select: none;
    white-space: nowrap;
}

/* Hover */
.cpa-contact-form .fluentform .ff-el-form-check:hover label,
.cpa-contact-form .fluentform .ff-el-form-check label:hover {
    border-color: var(--cpa-ink);
    transform: translateY(-1px);
}

/* Disable focus outline (rely on hover/active states for visibility) */
.cpa-contact-form .fluentform .ff-el-form-check input:focus + label,
.cpa-contact-form .fluentform .ff-el-form-check input:focus-visible + label {
    border-color: var(--cpa-orange);
    box-shadow: 0 0 0 3px #EC982E22;
}

/* CHECKED state — pill ink-filled with ✓ */
.cpa-contact-form .fluentform .ff-el-form-check input:checked + label,
.cpa-contact-form .fluentform .ff-el-form-check input:checked ~ label,
.cpa-contact-form .fluentform .ff-el-form-check input[type="checkbox"]:checked + label,
.cpa-contact-form .fluentform .ff-el-form-check input[type="radio"]:checked + label,
.cpa-contact-form .fluentform .ff-el-form-check:has(input:checked) label,
.cpa-contact-form .fluentform .ff-el-form-check label:has(input:checked) {
    background: var(--cpa-ink);
    border-color: var(--cpa-ink);
    color: #fafafa;
}
/* Pseudo-checkmark prefix when checked */
.cpa-contact-form .fluentform .ff-el-form-check input:checked + label::before,
.cpa-contact-form .fluentform .ff-el-form-check:has(input:checked) label::before,
.cpa-contact-form .fluentform .ff-el-form-check label:has(input:checked)::before {
    content: '✓';
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 700;
    margin-right: 2px;
}

/* Variant: data-name "urgency" / "service" can pick up sub-labels in radio options
   if the editor writes them with a <small> in the option label (Fluent Forms
   allows HTML in choice labels). The small text inherits color from .label. */
.cpa-contact-form .fluentform .ff-el-form-check label small {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 10px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    opacity: 0.75;
    margin-left: 4px;
}

/* Submit button */
.cpa-contact-form .fluentform .ff-btn-submit,
.cpa-contact-form .fluentform button[type="submit"] {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 16px 22px;
    border-radius: 999px;
    background: var(--cpa-ink);
    color: #fafafa;
    font-family: 'Manrope', sans-serif;
    font-size: 15px;
    font-weight: 600;
    border: 0;
    cursor: pointer;
    transition: background .15s ease, transform .12s ease;
    text-transform: none;
    letter-spacing: 0;
    box-shadow: none;
}
.cpa-contact-form .fluentform .ff-btn-submit:hover,
.cpa-contact-form .fluentform button[type="submit"]:hover {
    background: #000;
    transform: translateY(-1px);
}

/* Error messages */
.cpa-contact-form .fluentform .error,
.cpa-contact-form .fluentform .text-danger {
    color: #c0392b;
    font-size: 13px;
    margin-top: 4px;
}

@media (max-width: 600px) {
    .cpa-contact-form .cpa-contact-form-inner {
        padding: 28px 22px;
        border-radius: 24px;
    }
    .cpa-contact-form .cpa-contact-form-foot {
        flex-direction: column;
        align-items: flex-start;
    }
}

/* =============================================================
   CPA — Contact cards stack safety net (v0.8.1)
   When the 3 contact cards are siblings without a flex parent
   that honors blockGap, give them a natural vertical rhythm.
   ============================================================= */
.cpa-cwa-card        + .cpa-contact-info,
.cpa-cwa-card        + .cpa-contact-hours,
.cpa-contact-info    + .cpa-cwa-card,
.cpa-contact-info    + .cpa-contact-hours,
.cpa-contact-info    + .cpa-contact-info,
.cpa-contact-hours   + .cpa-cwa-card,
.cpa-contact-hours   + .cpa-contact-info,
.cpa-contact-hours   + .cpa-contact-hours {
    margin-top: 18px;
}

/* When inside a wp-block-group with flex/blockGap, the group handles
   the spacing — neutralize the safety net so it doesn't double up. */
.wp-block-group.is-layout-flex > .cpa-cwa-card,
.wp-block-group.is-layout-flex > .cpa-contact-info,
.wp-block-group.is-layout-flex > .cpa-contact-hours {
    margin-top: 0 !important;
}

/* =============================================================
   CPA — Bento cell images (v0.8.1)
   When a cell has --has-image, the optional photo occupies the
   media zone between head and foot. Decorative baked elements
   (hatched SVG, trail, +) are mutually exclusive with the image
   in slots 0 and 3; for slots 1/2/4 the image stacks above the
   foot. The green stripe (slot 2) and corner + (slot 4) stay as
   decorative accents over the photo.
   ============================================================= */
.cpa-bento .cpa-bento-cell-photo {
    flex: 1;
    min-height: 0;
    overflow: hidden;
    border-radius: 14px;
    margin: 16px 0;
    position: relative;
    background: #1a1a1a08;
}
.cpa-bento .cpa-bento-cell-photo-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
/* Small slots (stripe, corner) have less vertical room — cap photo height */
.cpa-bento .cpa-bento-cell--stripe .cpa-bento-cell-photo,
.cpa-bento .cpa-bento-cell--corner .cpa-bento-cell-photo {
    flex: 0 0 auto;
    max-height: 110px;
    margin: 12px 0 14px;
}
/* Yellow card: photo on the right could be nice but keep stacked for now */
.cpa-bento .cpa-bento-cell--yellow .cpa-bento-cell-photo {
    max-height: 140px;
    flex: 0 0 auto;
    margin: 12px 0 14px;
}
/* Slot 0 hero: photo dominates the central area */
.cpa-bento .cpa-bento-cell--hero .cpa-bento-cell-photo {
    margin: 24px 0;
    border-radius: 18px;
}

/* Hide baked decoration when an image is present (mutually exclusive) */
.cpa-bento .cpa-bento-cell--has-image .cpa-bento-cell-art,
.cpa-bento .cpa-bento-cell--has-image .cpa-bento-cell-trail {
    display: none;
}
/* Stripe + corner-"+" stay visible — they overlay the photo as decoration */

@media (max-width: 720px) {
    .cpa-bento .cpa-bento-cell-photo { max-height: 220px; }
}

/* =============================================================
   CPA — Hero universel v0.8.5 enhancements
   - min-height applied via inline style, but here we center
     the inner content vertically when min-height is set
   - paragraph as div (was <p>) so rich HTML (<strong>, <em>, <a>)
     renders cleanly without auto-<p> wrapping issues
   - button arrows: slimmer proportions (20px circle), better
     vertical alignment, thinner font weight
   ============================================================= */

/* When the editor opted into a min-height, center content vertically */
.cpa-hero.cpa-hero--has-min-height {
    display: flex;
    flex-direction: column;
    justify-content: center;
}
/* Keep the grid stretching naturally — the flex parent centers the whole block */
.cpa-hero.cpa-hero--has-min-height .cpa-hero-grid {
    border-bottom: 0;
    padding-bottom: 0;
    /* v0.9.17 — When a min-height is set, the hero becomes a flex column
       (rule above). The width=full grid also carries `margin: 0 auto`, and in
       a flex container auto cross-axis margins DISABLE stretching: the grid
       then shrink-wraps to its content (~the 640px aside) and the auto margins
       center it, producing a too-narrow column with huge side gaps ("double
       padding"). Giving the grid a definite full width restores normal
       behaviour: it fills up to its own max-width cap, then centers. */
    width: 100%;
}

/* Rich-text paragraph (replaces former <p class="cpa-hero-para">)
   No max-width here — the parent column (.cpa-hero-aside) controls
   the width. Color, strong, em, a all inherit from parent so they
   stay legible on dark backgrounds. */
.cpa-hero .cpa-hero-para {
    margin: 0;
    font-size: 19px;
    line-height: 1.5;
}
.cpa-hero .cpa-hero-para p {
    margin: 0 0 0.6em;
}
.cpa-hero .cpa-hero-para p:last-child {
    margin-bottom: 0;
}
.cpa-hero .cpa-hero-para strong {
    color: inherit;
    font-weight: 700;
}
.cpa-hero .cpa-hero-para em {
    font-style: italic;
}
.cpa-hero .cpa-hero-para a {
    color: var(--cpa-orange);
    text-decoration: underline;
    text-decoration-thickness: 1.5px;
    text-underline-offset: 3px;
}
.cpa-hero .cpa-hero-para a:hover {
    text-decoration-thickness: 2px;
}

/* Button arrow: slimmer + cleaner proportions */
.cpa-hero .cpa-btn-arrow {
    width: 20px;
    height: 20px;
    font-size: 11px;
    font-weight: 500;
    line-height: 1;
    flex-shrink: 0;
}
.cpa-hero .cpa-btn {
    gap: 8px;
    line-height: 1.2;
}

/* Same arrow proportions for the other blocks (consistency) */
.cpa-cta-band .cpa-btn-arrow,
.cpa-hero-home .cpa-btn-arrow,
.cpa-service-block .cpa-btn-arrow,
.cpa-bento .cpa-bento-header-link .cpa-btn-arrow,
.cpa-cwa-card .cpa-cwa-card-btn .cpa-btn-arrow {
    width: 20px;
    height: 20px;
    font-size: 11px;
    font-weight: 500;
    line-height: 1;
}

/* =============================================================
   CPA — Bento image modes (v0.8.6)
   - media (default)  : image sits between head and foot inline
   - background       : image fills the cell, voile sombre par-dessus,
                        texte forcé en blanc pour lisibilité
   - Title color "auto" depending on cell base background : hero +
     corner are sombres → titre déjà blanc/inherit; yellow + stripe
     + logistics sont claires → titre noir/inherit, fonctionne tel quel.
   ============================================================= */

/* Background image fills the cell */
.cpa-bento .cpa-bento-cell--bg-image {
    isolation: isolate; /* keep child z-index local */
}
.cpa-bento .cpa-bento-cell-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    border-radius: inherit;
}
.cpa-bento .cpa-bento-cell-bg-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.cpa-bento .cpa-bento-cell-bg-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, #1a1a1a55 0%, #1a1a1a99 100%);
    pointer-events: none;
}

/* All foreground content sits above the bg image */
.cpa-bento .cpa-bento-cell--bg-image .cpa-bento-cell-head,
.cpa-bento .cpa-bento-cell--bg-image .cpa-bento-cell-foot,
.cpa-bento .cpa-bento-cell--bg-image .cpa-bento-cell-num,
.cpa-bento .cpa-bento-cell--bg-image .cpa-bento-cell-meta,
.cpa-bento .cpa-bento-cell--bg-image .cpa-bento-cell-stripe,
.cpa-bento .cpa-bento-cell--bg-image .cpa-bento-cell-plus,
.cpa-bento .cpa-bento-cell--bg-image .cpa-bento-cell-tags,
.cpa-bento .cpa-bento-cell--bg-image .cpa-bento-cell-cta {
    position: relative;
    z-index: 1;
}

/* Force light text in background mode (works on any base cell) */
.cpa-bento .cpa-bento-cell--bg-image,
.cpa-bento .cpa-bento-cell--bg-image .cpa-bento-cell-title,
.cpa-bento .cpa-bento-cell--bg-image .cpa-bento-cell-desc,
.cpa-bento .cpa-bento-cell--bg-image .cpa-bento-cell-num,
.cpa-bento .cpa-bento-cell--bg-image .cpa-bento-cell-meta,
.cpa-bento .cpa-bento-cell--bg-image .cpa-bento-cell-kicker {
    color: #fafafa;
}
.cpa-bento .cpa-bento-cell--bg-image .cpa-bento-cell-tag {
    border-color: #ffffff44;
    color: #fafafa;
}

/* When in background mode, hide the inline media .cpa-bento-cell-photo
   block (shouldn't be emitted anyway, but safety) */
.cpa-bento .cpa-bento-cell--bg-image .cpa-bento-cell-photo {
    display: none;
}

/* =============================================================
   CPA — Bento title auto-color in media mode (v0.8.6)
   Sombre cells (hero, corner) keep titre blanc; light cells
   (yellow, stripe, logistics) keep titre noir. No special rule
   needed — only safety net for the case where a user puts dark
   text on dark cells through Kadence theme cascade.
   ============================================================= */
.cpa-bento .cpa-bento-cell--hero .cpa-bento-cell-title,
.cpa-bento .cpa-bento-cell--hero .cpa-bento-cell-desc,
.cpa-bento .cpa-bento-cell--corner .cpa-bento-cell-title,
.cpa-bento .cpa-bento-cell--corner .cpa-bento-cell-desc {
    color: #fafafa;
}
.cpa-bento .cpa-bento-cell--yellow .cpa-bento-cell-title,
.cpa-bento .cpa-bento-cell--stripe .cpa-bento-cell-title,
.cpa-bento .cpa-bento-cell--logistics .cpa-bento-cell-title {
    color: var(--cpa-ink);
}

/* =============================================================
   CPA — Title color safety net (v0.8.8)
   After removing Bricolage Grotesque in v0.8.5 we let the theme
   handle font-family, but the theme can also force a 'color' on
   h1/h2/h3 which breaks our dark-mode cards. Explicit color
   declarations restore intent on every CPA title.
   ============================================================= */

/* Hero — auto from bg-* class (handled deeper in file, but make sure h1 inside .cpa-hero-title can't be overridden) */
.cpa-hero .cpa-hero-title { color: inherit; }
.cpa-hero--bg-dark  .cpa-hero-title,
.cpa-hero--bg-image .cpa-hero-title { color: #fafafa; }

/* Hero Home, Bento, CTA band, CWA, Section Text Image, Commitments, Values, Stat Strip, Contact Form — neutral inherit */
.cpa-hero-home .cpa-hero-home-title,
.cpa-bento .cpa-bento-title,
.cpa-section-text-image .cpa-sti-title,
.cpa-commitments .cpa-commitments-title,
.cpa-commitments .cpa-commitment-title,
.cpa-values .cpa-values-title,
.cpa-stat-strip .cpa-stat-strip-key,
.cpa-contact-form .cpa-contact-form-title {
    color: var(--cpa-ink);
}
/* Note: .cpa-bento .cpa-bento-cell-title (per-slot) handled in v0.8.6 rules above */

/* Dark contexts: white titles */
.cpa-cta-band .cpa-cta-band-title,
.cpa-cwa-card .cpa-cwa-card-title {
    color: #fafafa;
}

/* =============================================================
   CPA — Before/After slider (v0.9.0)
   ============================================================= */
.cpa-before-after {
    --cpa-orange: #EC982E;
    --cpa-green:  #10B981;
    --cpa-yellow: #FBBB00;
    --cpa-ink:    #1a1a1a;
    --cpa-mute:   #7a7a7a;
    --cpa-line:   #1a1a1a14;

    width: 100%;
    max-width: var(--wp--style--global--wide-size, 1320px);
    margin: 0 auto;
    padding: 48px 56px;
    color: var(--cpa-ink);
    font-family: 'Manrope', ui-sans-serif, system-ui, sans-serif;
    -webkit-font-smoothing: antialiased;
    box-sizing: border-box;
}
.cpa-before-after *,
.cpa-before-after *::before,
.cpa-before-after *::after { box-sizing: border-box; }

/* Header */
.cpa-before-after .cpa-before-after-header {
    margin-bottom: 28px;
    max-width: 720px;
}
.cpa-before-after .cpa-before-after-eyebrow {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 11.5px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--cpa-mute);
    margin-bottom: 14px;
    display: inline-flex;
    align-items: center;
    gap: 12px;
}
.cpa-before-after .cpa-before-after-eyebrow::before {
    content: '';
    width: 32px;
    height: 8px;
    background: var(--cpa-orange);
    display: inline-block;
    flex-shrink: 0;
}
.cpa-before-after .cpa-before-after-title {
    margin: 0 0 12px;
    font-size: clamp(28px, 4vw, 44px);
    line-height: 1.05;
    letter-spacing: -0.025em;
    color: var(--cpa-ink);
}
.cpa-before-after .cpa-before-after-accent { font-style: italic; }
.cpa-before-after .cpa-before-after-para {
    margin: 0;
    font-size: 17px;
    line-height: 1.55;
    color: var(--cpa-ink);
}

/* Slider core */
.cpa-before-after .cpa-before-after-slider {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 10;
    border-radius: 24px;
    overflow: hidden;
    background: #f4f1ec;
    user-select: none;
    touch-action: pan-y;
    cursor: ew-resize;
    --cpa-ba-pos: 50;
}
.cpa-before-after .cpa-before-after-slider--dragging {
    cursor: grabbing;
}

.cpa-before-after .cpa-before-after-layer {
    position: absolute;
    inset: 0;
    overflow: hidden;
}
.cpa-before-after .cpa-before-after-layer--before {
    /* Clip the BEFORE image so only the left portion (0..pos%) is visible */
    clip-path: inset(0 calc(100% - var(--cpa-ba-pos) * 1%) 0 0);
}
.cpa-before-after .cpa-before-after-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
    pointer-events: none;
    user-select: none;
    -webkit-user-drag: none;
}

/* Pills */
.cpa-before-after .cpa-before-after-pill {
    position: absolute;
    top: 14px;
    padding: 6px 12px;
    border-radius: 999px;
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 10.5px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    font-weight: 500;
    background: rgba(26, 26, 26, 0.78);
    color: #fafafa;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    pointer-events: none;
}
.cpa-before-after .cpa-before-after-pill--before { left: 14px; }
.cpa-before-after .cpa-before-after-pill--after  { right: 14px; }

/* Handle line + knob */
.cpa-before-after .cpa-before-after-handle {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 4px;
    left: calc(var(--cpa-ba-pos) * 1%);
    transform: translateX(-50%);
    cursor: ew-resize;
    z-index: 2;
}
.cpa-before-after .cpa-before-after-handle:focus-visible {
    outline: none;
}
.cpa-before-after .cpa-before-after-handle:focus-visible .cpa-before-after-handle-knob {
    box-shadow: 0 0 0 3px var(--cpa-orange), 0 8px 20px -4px #1a1a1a55;
}
.cpa-before-after .cpa-before-after-handle-line {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 4px;
    background: #fafafa;
    box-shadow: 0 0 0 1px rgba(26, 26, 26, 0.15);
}
.cpa-before-after .cpa-before-after-handle-knob {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: #fafafa;
    box-shadow: 0 8px 20px -4px rgba(26, 26, 26, 0.4);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 2px;
    color: var(--cpa-ink);
    font-family: 'Manrope', sans-serif;
    font-size: 22px;
    font-weight: 500;
    line-height: 1;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.cpa-before-after .cpa-before-after-slider:hover .cpa-before-after-handle-knob {
    transform: translate(-50%, -50%) scale(1.05);
}
.cpa-before-after .cpa-before-after-slider--dragging .cpa-before-after-handle-knob {
    transform: translate(-50%, -50%) scale(1.1);
}
.cpa-before-after .cpa-before-after-handle-arrow {
    display: inline-block;
    line-height: 1;
    color: var(--cpa-ink);
    font-weight: 400;
}

/* Empty state */
.cpa-before-after .cpa-before-after-empty {
    padding: 40px 24px;
    border: 1px dashed var(--cpa-line);
    border-radius: 16px;
    text-align: center;
    color: var(--cpa-mute);
    font-size: 14px;
    line-height: 1.5;
}

@media (max-width: 720px) {
    .cpa-before-after { padding: 32px 20px; }
    .cpa-before-after .cpa-before-after-slider { aspect-ratio: 4 / 5; }
    .cpa-before-after .cpa-before-after-handle-knob { width: 42px; height: 42px; font-size: 18px; }
}

/* =============================================================
   CPA — Before/After: Side-by-side mode (v0.9.1)
   Two photos in 2 columns on desktop, stacked on mobile.
   Used when photo angles differ too much for the slider drag
   (e.g. paire 2: angle frontal vs angle avec van).
   ============================================================= */
.cpa-before-after--side-by-side .cpa-before-after-pair {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}
.cpa-before-after--side-by-side .cpa-before-after-pair-item {
    position: relative;
    margin: 0;
    border-radius: 24px;
    overflow: hidden;
    background: #f4f1ec;
    aspect-ratio: 4 / 5;
}
.cpa-before-after--side-by-side .cpa-before-after-pair-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.cpa-before-after--side-by-side .cpa-before-after-pill {
    /* In side-by-side, the pill is a figcaption — keep visual treatment in sync with slider mode */
    position: absolute;
    top: 14px;
    left: 14px;
    margin: 0;
}
.cpa-before-after--side-by-side .cpa-before-after-pill--after {
    left: auto;
    right: 14px;
}

@media (max-width: 720px) {
    .cpa-before-after--side-by-side .cpa-before-after-pair {
        grid-template-columns: 1fr;
        gap: 16px;
    }
    .cpa-before-after--side-by-side .cpa-before-after-pair-item {
        aspect-ratio: 4 / 5;
    }
}

/* =============================================================
   CPA — Media Feature (v0.9.4)
   Polyvalent section block: image OR video + text + CTAs.
   Layout: 4 media positions, 5 column ratios, 3 gap sizes.
   ============================================================= */

.cpa-media-feature {
    --cpa-mf-bg: transparent;
    --cpa-mf-fg: var(--cpa-ink);
    --cpa-mf-mute: var(--cpa-mute);
    --cpa-mf-gap: 56px;
    --cpa-mf-pad-y: 80px;
    --cpa-mf-media-max-width: 100%;
    background: var(--cpa-mf-bg);
    color: var(--cpa-mf-fg);
    padding: var(--cpa-mf-pad-y) 24px;
}

/* Inner container — caps width at site standard */
.cpa-media-feature .cpa-mf-inner {
    max-width: 1320px;
    margin: 0 auto;
    display: grid;
    gap: var(--cpa-mf-gap);
}

/* ----- Backgrounds ----- */
.cpa-media-feature--bg-transparent { --cpa-mf-bg: transparent; }
.cpa-media-feature--bg-creme       { --cpa-mf-bg: #fafafa; }
.cpa-media-feature--bg-gris-clair  { --cpa-mf-bg: #f4f4f4; }
.cpa-media-feature--bg-ink         {
    --cpa-mf-bg: var(--cpa-ink);
    --cpa-mf-fg: #fafafa;
    --cpa-mf-mute: #ffffffb3;
}

/* ----- Padding ----- */
.cpa-media-feature--pad-compact  { --cpa-mf-pad-y: 48px; }
.cpa-media-feature--pad-standard { --cpa-mf-pad-y: 80px; }
.cpa-media-feature--pad-large    { --cpa-mf-pad-y: 120px; }

/* ----- Gap ----- */
.cpa-media-feature--gap-compact  { --cpa-mf-gap: 32px; }
.cpa-media-feature--gap-standard { --cpa-mf-gap: 56px; }
.cpa-media-feature--gap-large    { --cpa-mf-gap: 88px; }

/* ----- Layout: media position + column ratios ----- */
.cpa-media-feature--media-left .cpa-mf-inner,
.cpa-media-feature--media-right .cpa-mf-inner {
    grid-template-columns: 1fr 1fr;
    align-items: center;
}
.cpa-media-feature--ratio-60-40 .cpa-mf-inner { grid-template-columns: 6fr 4fr; }
.cpa-media-feature--ratio-40-60 .cpa-mf-inner { grid-template-columns: 4fr 6fr; }
.cpa-media-feature--ratio-70-30 .cpa-mf-inner { grid-template-columns: 7fr 3fr; }
.cpa-media-feature--ratio-30-70 .cpa-mf-inner { grid-template-columns: 3fr 7fr; }

.cpa-media-feature--media-top .cpa-mf-inner,
.cpa-media-feature--media-bottom .cpa-mf-inner {
    grid-template-columns: 1fr;
}
/* When media is top/bottom, center the text column in a reasonable max-width */
.cpa-media-feature--media-top .cpa-mf-text-col,
.cpa-media-feature--media-bottom .cpa-mf-text-col {
    max-width: 800px;
    margin: 0 auto;
}

/* ----- Vertical alignment of text col (only when media is left/right) ----- */
.cpa-media-feature--valign-top    .cpa-mf-inner { align-items: start; }
.cpa-media-feature--valign-center .cpa-mf-inner { align-items: center; }
.cpa-media-feature--valign-bottom .cpa-mf-inner { align-items: end; }

/* ----- Horizontal alignment of text content ----- */
.cpa-media-feature--halign-left   .cpa-mf-text { text-align: left; }
.cpa-media-feature--halign-center .cpa-mf-text { text-align: center; }
.cpa-media-feature--halign-center .cpa-mf-ctas { justify-content: center; }

/* =============================================================
   Media column
   ============================================================= */
.cpa-media-feature .cpa-mf-media-col {
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Wrapper that enforces aspect-ratio + max-width */
.cpa-media-feature .cpa-mf-media-col > *:first-child {
    width: 100%;
    max-width: var(--cpa-mf-media-max-width);
}

/* When format is constrained (not "libre"), wrap in aspect-ratio box */
.cpa-media-feature:not(.cpa-media-feature--format-libre) .cpa-mf-image,
.cpa-media-feature:not(.cpa-media-feature--format-libre) .cpa-mf-video,
.cpa-media-feature:not(.cpa-media-feature--format-libre) .cpa-mf-video-poster,
.cpa-media-feature:not(.cpa-media-feature--format-libre) .cpa-mf-video-wrap,
.cpa-media-feature:not(.cpa-media-feature--format-libre) .cpa-mf-video-trigger,
.cpa-media-feature:not(.cpa-media-feature--format-libre) .cpa-mf-video-iframe-wrap {
    aspect-ratio: 16 / 9;
    width: 100%;
    height: auto;
    object-fit: cover;
}

.cpa-media-feature--format-vertical-9-16 .cpa-mf-image,
.cpa-media-feature--format-vertical-9-16 .cpa-mf-video,
.cpa-media-feature--format-vertical-9-16 .cpa-mf-video-poster,
.cpa-media-feature--format-vertical-9-16 .cpa-mf-video-wrap,
.cpa-media-feature--format-vertical-9-16 .cpa-mf-video-trigger,
.cpa-media-feature--format-vertical-9-16 .cpa-mf-video-iframe-wrap {
    aspect-ratio: 9 / 16;
}
.cpa-media-feature--format-stories-4-5 .cpa-mf-image,
.cpa-media-feature--format-stories-4-5 .cpa-mf-video,
.cpa-media-feature--format-stories-4-5 .cpa-mf-video-poster,
.cpa-media-feature--format-stories-4-5 .cpa-mf-video-wrap,
.cpa-media-feature--format-stories-4-5 .cpa-mf-video-trigger,
.cpa-media-feature--format-stories-4-5 .cpa-mf-video-iframe-wrap {
    aspect-ratio: 4 / 5;
}
.cpa-media-feature--format-carre-1-1 .cpa-mf-image,
.cpa-media-feature--format-carre-1-1 .cpa-mf-video,
.cpa-media-feature--format-carre-1-1 .cpa-mf-video-poster,
.cpa-media-feature--format-carre-1-1 .cpa-mf-video-wrap,
.cpa-media-feature--format-carre-1-1 .cpa-mf-video-trigger,
.cpa-media-feature--format-carre-1-1 .cpa-mf-video-iframe-wrap {
    aspect-ratio: 1 / 1;
}

/* Image — rounded, lazy-loaded, object-fit cover by default */
.cpa-media-feature .cpa-mf-image {
    width: 100%;
    border-radius: 14px;
    object-fit: cover;
    display: block;
    box-shadow: 0 12px 32px rgba(0,0,0,0.08);
}

/* Video — wrapper sets aspect-ratio, video fills it */
.cpa-media-feature .cpa-mf-video-wrap,
.cpa-media-feature .cpa-mf-video-iframe-wrap {
    position: relative;
    width: 100%;
    border-radius: 14px;
    overflow: hidden;
    background: #1a1a1a;
    box-shadow: 0 12px 32px rgba(0,0,0,0.12);
}
.cpa-media-feature .cpa-mf-video {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}
.cpa-media-feature .cpa-mf-video-iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

/* Lightbox trigger button — poster + play overlay */
.cpa-media-feature .cpa-mf-video-trigger {
    position: relative;
    width: 100%;
    border: 0;
    padding: 0;
    cursor: pointer;
    background: #1a1a1a;
    border-radius: 14px;
    overflow: hidden;
    display: block;
    box-shadow: 0 12px 32px rgba(0,0,0,0.12);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.cpa-media-feature .cpa-mf-video-trigger:hover {
    transform: translateY(-2px);
    box-shadow: 0 18px 40px rgba(0,0,0,0.18);
}
.cpa-media-feature .cpa-mf-video-poster {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.cpa-media-feature .cpa-mf-video-play {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.55);
    color: #ffffff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 8px 24px rgba(0,0,0,0.3);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    transition: transform 0.15s ease, background-color 0.15s ease;
}
.cpa-media-feature .cpa-mf-video-trigger:hover .cpa-mf-video-play {
    transform: translate(-50%, -50%) scale(1.08);
    background: rgba(0, 0, 0, 0.7);
}

/* Lightbox dialog */
.cpa-mf-lightbox {
    border: 0;
    padding: 0;
    background: transparent;
    color: #fafafa;
    /* Center in the viewport regardless of intrinsic size */
    position: fixed;
    inset: 0;
    margin: auto;
    width: fit-content;
    height: fit-content;
    max-width: 90vw;
    max-height: 90vh;
    overflow: visible;
}
.cpa-mf-lightbox::backdrop {
    background: rgba(0,0,0,0.88);
}
.cpa-mf-lightbox-video {
    display: block;
    max-width: 90vw;
    max-height: 90vh;
    width: auto;
    height: auto;
    border-radius: 16px;
    background: #000;
}
.cpa-mf-lightbox-close {
    position: absolute;
    top: -16px;
    right: -16px;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #1a1a1a;
    border: 2px solid #ffffff40;
    color: #fafafa;
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
    transition: background-color 0.15s ease, transform 0.15s ease;
}
.cpa-mf-lightbox-close:hover {
    background: #000;
    transform: scale(1.08);
}
@media (max-width: 767px) {
    /* On mobile keep the close button inside the visible area */
    .cpa-mf-lightbox-close {
        top: 8px;
        right: 8px;
    }
}

/* Placeholder (in editor when no media set) */
.cpa-media-feature .cpa-mf-placeholder {
    width: 100%;
    aspect-ratio: 16 / 9;
    border: 2px dashed var(--cpa-line);
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--cpa-mute);
    font-size: 14px;
    text-align: center;
    padding: 24px;
}

/* =============================================================
   Text column
   ============================================================= */
.cpa-media-feature .cpa-mf-text {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.cpa-media-feature .cpa-mf-eyebrow {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 12px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    font-weight: 500;
    margin: 0;
}
.cpa-media-feature--eyebrow-orange .cpa-mf-eyebrow { color: var(--cpa-orange); }
.cpa-media-feature--eyebrow-green  .cpa-mf-eyebrow { color: var(--cpa-green); }
.cpa-media-feature--eyebrow-yellow .cpa-mf-eyebrow { color: var(--cpa-yellow); }
.cpa-media-feature--eyebrow-mute   .cpa-mf-eyebrow { color: var(--cpa-mf-mute); }

.cpa-media-feature .cpa-mf-title {
    margin: 0;
    font-size: clamp(32px, 4vw, 56px);
    line-height: 1.02;
    letter-spacing: -0.03em;
    font-weight: 700;
    color: var(--cpa-mf-fg);
}
.cpa-media-feature .cpa-mf-title-accent {
    font-style: italic;
    font-weight: 500;
    color: var(--cpa-orange);
}

.cpa-media-feature .cpa-mf-para {
    font-size: 17px;
    line-height: 1.55;
    color: var(--cpa-mf-fg);
}
.cpa-media-feature .cpa-mf-para p {
    margin: 0 0 0.7em;
}
.cpa-media-feature .cpa-mf-para p:last-child { margin-bottom: 0; }
.cpa-media-feature .cpa-mf-para a {
    color: var(--cpa-orange);
    text-decoration: underline;
    text-decoration-thickness: 1.5px;
    text-underline-offset: 3px;
}
.cpa-media-feature .cpa-mf-para strong { font-weight: 700; color: inherit; }

.cpa-media-feature .cpa-mf-ctas {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 8px;
}

/* Full button styling for media-feature CTAs — self-contained so Kadence's
   generic .button rules can't bleed in (font-size, etc.). */
.cpa-media-feature .cpa-mf-ctas .cpa-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 14px 24px;
    border-radius: 999px;
    font-family: 'Manrope', system-ui, sans-serif;
    font-size: 15px !important;
    font-weight: 600;
    line-height: 1.2;
    text-decoration: none;
    border: 1px solid transparent;
    cursor: pointer;
    transition: transform .12s ease, background .15s ease, color .15s ease;
}
.cpa-media-feature .cpa-mf-ctas .cpa-btn:hover { transform: translateY(-1px); }

.cpa-media-feature .cpa-mf-ctas .cpa-btn-orange { background: var(--cpa-orange); color: var(--cpa-ink); }
.cpa-media-feature .cpa-mf-ctas .cpa-btn-orange:hover { background: #f5a23a; color: var(--cpa-ink); }
.cpa-media-feature .cpa-mf-ctas .cpa-btn-ink { background: var(--cpa-ink); color: #fafafa; }
.cpa-media-feature .cpa-mf-ctas .cpa-btn-ink:hover { background: #000; color: #fafafa; }
.cpa-media-feature .cpa-mf-ctas .cpa-btn-whatsapp { background: #25D366; color: #ffffff; }
.cpa-media-feature .cpa-mf-ctas .cpa-btn-whatsapp:hover { background: #1ebe5a; color: #ffffff; }
.cpa-media-feature .cpa-mf-ctas .cpa-btn-transparent {
    background: transparent;
    color: var(--cpa-ink);
    border-color: var(--cpa-ink);
}
.cpa-media-feature .cpa-mf-ctas .cpa-btn-transparent:hover { background: var(--cpa-ink); color: #fafafa; }
.cpa-media-feature .cpa-mf-ctas .cpa-btn-transparent-light {
    background: transparent;
    color: #fafafa;
    border-color: #ffffff66;
}
.cpa-media-feature .cpa-mf-ctas .cpa-btn-transparent-light:hover { background: #ffffff; color: var(--cpa-ink); }

/* Icon + text spacing inside the button */
.cpa-media-feature .cpa-mf-ctas .cpa-btn-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    flex-shrink: 0;
}
.cpa-media-feature .cpa-mf-ctas .cpa-btn-icon svg {
    width: 100%;
    height: 100%;
    display: block;
}
.cpa-media-feature .cpa-mf-ctas .cpa-btn-text { display: inline-block; }
.cpa-media-feature .cpa-mf-ctas .cpa-btn-arrow { display: inline-block; }

/* =============================================================
   Responsive
   ============================================================= */
@media (max-width: 1023px) {
    /* Tablet: force 50/50 if media is side-by-side */
    .cpa-media-feature--media-left .cpa-mf-inner,
    .cpa-media-feature--media-right .cpa-mf-inner {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 767px) {
    /* Mobile: stack everything, media always on top
       unless explicitly bottom (we respect that intent). */
    .cpa-media-feature .cpa-mf-inner {
        grid-template-columns: 1fr !important;
        gap: 28px;
    }
    .cpa-media-feature--media-left .cpa-mf-media-col,
    .cpa-media-feature--media-right .cpa-mf-media-col,
    .cpa-media-feature--media-top .cpa-mf-media-col {
        order: 0;
    }
    .cpa-media-feature--media-left .cpa-mf-text-col,
    .cpa-media-feature--media-right .cpa-mf-text-col,
    .cpa-media-feature--media-top .cpa-mf-text-col {
        order: 1;
    }
    .cpa-media-feature--media-bottom .cpa-mf-text-col { order: 0; }
    .cpa-media-feature--media-bottom .cpa-mf-media-col { order: 1; }

    .cpa-media-feature {
        padding-left: 16px;
        padding-right: 16px;
    }
    .cpa-media-feature--pad-large    { --cpa-mf-pad-y: 64px; }
    .cpa-media-feature--pad-standard { --cpa-mf-pad-y: 48px; }
    .cpa-media-feature--pad-compact  { --cpa-mf-pad-y: 32px; }

    .cpa-media-feature .cpa-mf-video-play {
        width: 56px;
        height: 56px;
    }
}