/**
 * One-off brand-colour split for the "Two Specialist Companies — Cards" block
 * on /about-prolific-group.
 *
 * The two cards deliberately break the block's single accent colour because the
 * companies have different ones: PHI is the products arm (orange), PES is the
 * service arm (green). Everything else on the page keeps the site orange.
 *
 * Scoped to the block's own UUID class rather than a page or node selector:
 * the body carries no node id (only `page-node-type-page`), and this way the
 * colours travel with the block if it is ever placed somewhere else.
 *
 * CARD ORDER MATTERS HERE. First card = PHI, second = PES. Reordering them in
 * the UI swaps the colours, because there is nothing on the card itself that
 * says which company it is. If this ever needs to be robust, add a per-card
 * accent field to the block type rather than extending these selectors.
 */

/* --- Card 1, PHI: orange icon tile -------------------------------------- */

.block-block-content49c1f735-c9d0-4362-b2a2-2c76ad429295 .fc-grid > :first-child.fc-icon-bg-green .fc-card__icon {
    background: var(--phi-orange);
}

/* --- Card 2, PES: green eyebrow and checklist ticks --------------------- */

.block-block-content49c1f735-c9d0-4362-b2a2-2c76ad429295 .fc-grid > :nth-child(2) .fc-card__eyebrow {
    color: var(--phi-green);
}

/* ul.tickli li::before sets the tick colour at (0,1,2); this outranks it. */
.block-block-content49c1f735-c9d0-4362-b2a2-2c76ad429295 .fc-grid > :nth-child(2) ul.tickli li::before {
    color: var(--phi-green);
}