/* Our Capabilities — centered heading + 9-card icon grid. */
.capabilities { background: var(--tint-teal-10); padding: 100px 0; }
/* Background Color control — selected via the widget's dropdown (adds
   .bg-white/.bg-tint-teal-20; Light Teal Tint is the unmarked default above). */
.capabilities.bg-white { background: var(--brand-white); }
.capabilities.bg-tint-teal-20 { background: var(--tint-teal-20); }
.capabilities-heading { max-width: 764px; margin: 0 auto 56px; text-align: center; display: flex; flex-direction: column; gap: 24px; }
.capabilities-heading h2 { color: var(--brand-teal); }
.capabilities-heading p { color: var(--brand-dark-grey); }

.capabilities-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 32px 24px;
    max-width: 1346px;
    margin: 0 auto;
}
.capability-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 18px;
    width: 250px;
    text-decoration: none;
}
.capability-icon {
    width: 140px;
    height: 140px;
    background: var(--brand-white);
    border: 1px solid var(--tint-teal-20); /* keeps the tile visible if the section's own Background Color is also set to White */
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s, border-color 0.2s;
}
.capability-icon img { width: 64px; height: 64px; object-fit: contain; transition: filter 0.2s; }
.capabilities .capability-card h4 { color: var(--brand-teal); text-align: center; font-size: 24px; line-height: 28px; }

/* Hover: icon tile fills teal, icon itself turns white. brightness(0) invert(1)
   works on both the SVG and PNG icons in this grid without needing separate
   white-variant icon assets. */
.capability-card:hover .capability-icon { background: var(--brand-teal); border-color: var(--brand-teal); }
.capability-card:hover .capability-icon img { filter: brightness(0) invert(1); }

@media (max-width: 991.98px) {
    .capabilities-grid { gap: 24px 16px; }
    .capability-card { width: 120px; }
    .capability-icon { width: 120px; height: 120px; }
}

@media (max-width: 767.98px) {
    .capability-card { width: 100px; }
    .capability-icon { width: 100px; height: 100px; }
    .capability-icon img { width: 48px; height: 48px; }
    .capability-card h4 { font-size: 18px; line-height: 22px; }
}