/* =============================================
   CAPABILITIES — hub + single
   ============================================= */

/* ---------- Hub: intro + Why work with us ---------- */
.capabilities-why { background: var(--color-surface); padding-block: var(--space-16); }

.capabilities-why__intro {
    max-width: 760px;
    margin-inline: auto;
    text-align: center;
    margin-bottom: var(--space-16);
}
.capabilities-why__intro-heading { margin-bottom: var(--space-4); }
.capabilities-why__intro-body { color: var(--color-text-secondary); font-size: var(--text-md); }

.capabilities-why__grid-wrap {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-12);
    align-items: start;
}
.capabilities-why__heading { margin-bottom: var(--space-6); }

.capabilities-why__grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-6);
    margin-bottom: var(--space-8);
}
.capabilities-feature__icon {
    width: 40px;
    height: 40px;
    border-radius: var(--radius-full);
    background: var(--color-accent-bg);
    color: var(--color-accent-dark);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: var(--space-3);
}
.capabilities-feature__title { font-size: var(--text-md); margin-bottom: var(--space-2); }
.capabilities-feature__body { font-size: var(--text-sm); color: var(--color-text-secondary); }

.capabilities-why__closing { font-size: var(--text-md); font-weight: 600; }

.capabilities-why__image {
    width: 100%;
    aspect-ratio: 4/3;
    object-fit: cover;
    border-radius: var(--radius-lg);
}
.capabilities-why__image--placeholder { background: var(--color-surface-mid); }

@media (max-width: 1024px) {
    .capabilities-why__grid-wrap { grid-template-columns: 1fr; gap: var(--space-8); }
    .capabilities-why__media { order: -1; }
}
@media (max-width: 640px) {
    .capabilities-why__grid { grid-template-columns: 1fr; }
}

/* ---------- Hub: Services grid ---------- */
.capabilities-grid { padding-block: var(--space-16); }
.capabilities-grid__header { max-width: 800px; margin-bottom: var(--space-10); }
.capabilities-grid__heading { margin-bottom: var(--space-4); }
/* Scoped to the single-capability page's "Other Capabilities" reuse of
   this class only — the /capabilities hub's own heading is unaffected. */
.capability-related .capabilities-grid__heading { font-size: var(--text-3xl); }
.capabilities-grid__body { color: var(--color-text-secondary); }
.capabilities-grid__empty { text-align: center; color: var(--color-text-muted); }

/* Uniform grid — every tile the same size, for both the 5-item hub grid
   and the 4-item "Other Capabilities" grid on single capability pages
   (both reuse this class). */
.capabilities-grid__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-auto-rows: 280px;
    gap: var(--space-5);
}

.capability-tile {
    position: relative;
    display: block;
    border-radius: var(--radius-lg);
    overflow: hidden;
    transition: box-shadow var(--transition), transform var(--transition);
}
.capability-tile:hover { box-shadow: var(--shadow-lg); transform: translateY(-2px); }
.capability-tile__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.capability-tile__image--placeholder { background: var(--color-surface-mid); }
.capability-tile::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(0deg, rgba(0,0,0,0.75) 0%, rgba(0,0,0,0) 55%);
}
.capability-tile__overlay {
    position: absolute;
    inset: auto var(--space-5) var(--space-5) var(--space-5);
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2);
}
.capability-tile__title { font-size: var(--text-md); font-weight: 700; color: var(--color-white); }
.capability-tile__arrow { color: var(--color-white); flex-shrink: 0; }

@media (max-width: 1024px) {
    .capabilities-grid__grid {
        grid-template-columns: repeat(2, 1fr);
        grid-auto-rows: 240px;
    }
}
@media (max-width: 480px) {
    .capabilities-grid__grid { grid-template-columns: 1fr; }
}

/* ---------- Single capability: "Other Capabilities" (plain uniform grid —
   deliberately NOT the bento layout above, which is hub-page only) ---------- */
.capability-related__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-5);
}
.capability-related__grid .capability-tile { height: 280px; }

@media (max-width: 1024px) {
    .capability-related__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
    .capability-related__grid { grid-template-columns: 1fr; }
}

/* ---------- Hub: Bottom CTA ---------- */
.capabilities-promise { background: var(--color-surface); padding-block: var(--space-16); text-align: center; }
.capabilities-promise__inner { max-width: 700px; margin-inline: auto; }
.capabilities-promise__heading { margin-bottom: var(--space-4); }
.capabilities-promise__body { color: var(--color-text-secondary); font-size: var(--text-md); margin-bottom: var(--space-6); }

/* ---------- Single capability: intro row (description left, image right) ---------- */
.capability-intro { padding-block: var(--space-16) var(--space-10); }
.capability-intro__inner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-10);
    align-items: center;
}
/* Default h2 size (--text-5xl) matches/exceeds the hero title above it —
   sized down so every section heading on this page reads clearly smaller
   than the hero. */
.capability-intro__heading { font-size: var(--text-3xl); margin-bottom: var(--space-4); }
.capability-intro__body { color: var(--color-text-secondary); font-size: var(--text-md); }
.capability-intro__image {
    width: 100%;
    aspect-ratio: 1/1;
    object-fit: cover;
    border-radius: var(--radius-lg);
}
.capability-intro__image--placeholder { background: var(--color-surface-mid); }

@media (max-width: 1024px) {
    .capability-intro__inner { grid-template-columns: 1fr; gap: var(--space-8); }
}

/* ---------- Single capability: highlight cards (own row) ---------- */
.capability-highlight-cards { padding-bottom: var(--space-16); }
.capability-highlight-cards__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-8);
    background: var(--color-surface);
    border-radius: var(--radius-xl);
    padding: var(--space-10);
}
.capability-highlight__icon {
    width: 36px;
    height: 36px;
    border-radius: var(--radius-md);
    background: var(--color-accent-bg);
    color: var(--color-accent-dark);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: var(--space-3);
}
.capability-highlight__title { font-size: var(--text-md); margin-bottom: var(--space-2); }
.capability-highlight__body { font-size: var(--text-sm); color: var(--color-text-secondary); }

@media (max-width: 768px) {
    .capability-highlight-cards__grid { grid-template-columns: 1fr; padding: var(--space-6); }
}

/* ---------- Single capability: "Our Promise" (optional, below services) ---------- */
/* No background of its own (unlike .capability-steps below) — reads as a
   continuation of Approach and Services just above it; when both this and
   "How it works" are present, that keeps a visible seam between them
   instead of two identical gray bands running together. */
.capability-promise { padding-block: var(--space-8) var(--space-16); }
.capability-promise__inner { max-width: 760px; margin-inline: auto; text-align: center; }
.capability-promise__heading { font-size: var(--text-3xl); margin-bottom: var(--space-4); }
.capability-promise__body { color: var(--color-text-secondary); font-size: var(--text-md); }

/* ---------- Single capability: closing CTA (moved near the bottom) ---------- */
.capability-cta { padding-block: var(--space-16); }
.capability-cta__inner { max-width: 640px; margin-inline: auto; text-align: center; }
.capability-cta__text { font-size: var(--text-md); font-weight: 600; margin-bottom: var(--space-6); }

/* ---------- Single capability: detailed services (optional) ---------- */
.capability-services { padding-bottom: var(--space-16); }
.capability-services__intro {
    max-width: 860px;
    margin-inline: auto;
    font-size: var(--text-md);
    color: var(--color-text-secondary);
    line-height: 1.75;
    text-align: center;
    margin-bottom: var(--space-10);
}
.capability-services__intro p { margin-bottom: var(--space-5); }
.capability-services__heading { font-size: var(--text-3xl); text-align: center; margin-bottom: var(--space-8); }
.capability-services__list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-8);
}
.capability-service__title { font-size: var(--text-lg); margin-bottom: var(--space-3); }
.capability-service__body { font-size: var(--text-sm); color: var(--color-text-secondary); }

@media (max-width: 768px) {
    .capability-services__list { grid-template-columns: 1fr; }
}

/* ---------- Single capability: "How it works" (optional) ---------- */
.capability-steps { background: var(--color-surface); padding-block: var(--space-16); }
.capability-steps__heading { font-size: var(--text-3xl); text-align: center; margin-bottom: var(--space-10); }
.capability-steps__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-6);
}
.capability-step__number {
    display: inline-block;
    font-size: var(--text-xs);
    font-weight: 600;
    color: var(--color-text-secondary);
    background: var(--color-white);
    padding: var(--space-1) var(--space-3);
    border-radius: var(--radius-full);
    margin-bottom: var(--space-3);
}
.capability-step__title { font-size: var(--text-md); margin-bottom: var(--space-2); }
.capability-step__body { font-size: var(--text-sm); color: var(--color-text-secondary); }

@media (max-width: 1024px) {
    .capability-steps__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
    .capability-steps__grid { grid-template-columns: 1fr; }
}

/* ---------- Single capability: "Our clients" (optional) ---------- */
.capability-clients { padding-block: var(--space-12); text-align: center; }
.capability-clients__eyebrow {
    display: block;
    font-size: var(--text-sm);
    font-weight: 700;
    color: var(--color-primary-mid);
    margin-bottom: var(--space-8);
}
.capability-clients__grid {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: var(--space-10);
}
.capability-clients__logo { max-height: 40px; max-width: 160px; object-fit: contain; }