.approach.capability-section{display:block;padding:100px 4.7vw 110px}
.capability-intro{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:end;margin-bottom:64px}
.capability-intro>p{font-size:20px;line-height:1.6;max-width:48ch;margin:0;color:#b9bdc2}
.capability-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.tilt-wrap{perspective:1100px;min-width:0}
.capability-card{--rx:0deg;--ry:0deg;position:relative;min-height:510px;height:100%;border-radius:16px;background:#eff0f1;color:#20212c;padding:30px;transform:rotateX(var(--rx)) rotateY(var(--ry));transition:transform 450ms cubic-bezier(.22,1,.36,1);outline-offset:7px}
.capability-card:focus-visible{outline:2px solid #a8b0ff}
.capability-card.is-tilting{transition:transform 100ms linear}
.capability-art{height:245px;display:flex;align-items:center;justify-content:center;margin-bottom:34px;transform:none}
.capability-art svg{width:100%;height:100%;max-width:280px;fill:initial;stroke:none;overflow:visible}
.agentic-ai .capability-art svg{max-width:225px;height:210px}
.capability-copy{transform:none}
.capability-copy h3{font-size:28px;letter-spacing:-.025em;font-weight:400;line-height:1.15;margin:0 0 20px}
.capability-copy p{font-size:16px;line-height:1.65;margin:0;color:#51555d}
.agentic-ai:is(:hover,:focus-visible) .capability-art circle{fill:#5160df}
.agentic-ai .capability-art>svg>g>g{transition:translate 550ms cubic-bezier(.22,1,.36,1)}
.decision-route{stroke-dasharray:220;stroke-dashoffset:110}
.strategic-decisions:is(:hover,:focus-visible) .decision-route{stroke-dashoffset:0}
@media(max-width:1000px){.capability-grid{gap:16px}.capability-card{padding:24px;min-height:480px}.capability-copy h3{font-size:24px}.capability-art{height:200px}}
@media(max-width:760px){.capability-intro{grid-template-columns:1fr;gap:28px;margin-bottom:40px}.capability-grid{grid-template-columns:1fr;gap:22px}.capability-card{min-height:0;padding:30px}.capability-art{height:230px;margin-bottom:25px}.capability-copy h3{font-size:28px}.capability-intro>p{font-size:18px}}
@media(prefers-reduced-motion:reduce){.capability-card,.capability-art,.capability-copy{transform:none!important}.capability-card *{transition:none!important;translate:none!important}.decision-selected,.decision-option,.decision-pulse{transform:none!important}}

.capability-card .capability-art path,.capability-card .capability-art rect{transition:fill 350ms,stroke 350ms,stroke-dashoffset 800ms}
.agentic-ai:is(:hover,:focus-visible) .capability-art circle{fill:#604e86}
.strategic-decisions:is(:hover,:focus-visible) .decision-selected rect{fill:#c5b8f0}

/* Internal illustration motion, independent of the rigid card tilt. */
.agentic-ai:is(:hover,:focus-visible) .capability-art>svg>g>g:nth-child(3){translate:0 -7px}
.agentic-ai:is(:hover,:focus-visible) .capability-art>svg>g>g:last-child{translate:0 5px}
.agentic-ai .capability-art circle{transition:fill 180ms,opacity 180ms}
.strategic-decisions:is(:hover,:focus-visible) .decision-selected{transform:translateY(-5px)}
.strategic-decisions:is(:hover,:focus-visible) .decision-option{transform:translateY(2px)}
.strategic-decisions:is(:hover,:focus-visible) .decision-pulse{transform:translate(36px,-18.5px)}

.design-systems .capability-art svg{max-width:300px;height:245px}
.design-systems .system-library{transition:translate 600ms cubic-bezier(.22,1,.36,1)}
.design-systems:is(:hover,:focus-visible) .system-library{translate:0 -5px}
.design-systems .system-component{transition:fill 450ms}
.design-systems:is(:hover,:focus-visible) .system-component{fill:#c8b4e4}
@media(prefers-reduced-motion:reduce){.design-systems .system-library{translate:none!important}}

.capability-card{background:#25262b;color:#f0eff4;transition:transform 450ms cubic-bezier(.22,1,.36,1),background 350ms,color 350ms}
.capability-copy p{color:#bab9c5;transition:color 350ms}
.capability-art{opacity:.62;transition:opacity 350ms}
.capability-card:is(:hover,:focus-visible){background:#eff0f1;color:#20212c}
.capability-card:is(:hover,:focus-visible) .capability-copy p{color:#51555d}
.capability-card:is(:hover,:focus-visible) .capability-art{opacity:1}
.capability-card.is-tilting{transition:transform 100ms linear,background 350ms,color 350ms}
.design-systems .system-modules rect{transition:fill 350ms}
.design-systems:is(:hover,:focus-visible) .system-modules rect{fill:#cfbce6}
@media(hover:none){.capability-art{opacity:.85}}

.design-systems .component-callout{opacity:.55;transition:opacity 500ms}
.design-systems .component-callout rect,.design-systems .component-callout text{transition:translate 550ms cubic-bezier(.22,1,.36,1)}
.design-systems:is(:hover,:focus-visible) .component-callout{opacity:1}
.design-systems:is(:hover,:focus-visible) .component-callout rect,.design-systems:is(:hover,:focus-visible) .component-callout text{translate:0 -3px}
.design-systems .callout-banner,.design-systems .callout-banner rect,.design-systems .callout-banner text{transition-delay:80ms}
.design-systems .callout-card,.design-systems .callout-card rect,.design-systems .callout-card text{transition-delay:160ms}

/* Stronger diagram contrast on the resting charcoal card. */
.strategic-decisions .capability-art{opacity:1}
.strategic-decisions .capability-art>svg>g:first-child{stroke:#b4a5d2;stroke-opacity:.8}
.strategic-decisions .decision-route{stroke:#b39eef}
.strategic-decisions .decision-option rect{fill:#393244;stroke:#a997bf;stroke-opacity:1}
.strategic-decisions .decision-option path{stroke:#c4b5dd;stroke-opacity:1}
.strategic-decisions .decision-selected rect{fill:#b69eec;stroke:#d5c5f5}
.strategic-decisions .decision-selected path{stroke:#292231}
.strategic-decisions .decision-pulse{fill:#c2abf1;stroke:#c2abf1}
.strategic-decisions .capability-art>svg>circle:not(.decision-pulse){fill:#393244;stroke:#b4a5d2;stroke-opacity:1}
.strategic-decisions:is(:hover,:focus-visible) .capability-art>svg>g:first-child{stroke:#817191;stroke-opacity:.7}
.strategic-decisions:is(:hover,:focus-visible) .decision-route{stroke:#775ba5}
.strategic-decisions:is(:hover,:focus-visible) .decision-option rect{fill:#edeafb;stroke:#9281a2}
.strategic-decisions:is(:hover,:focus-visible) .decision-option path{stroke:#846f92}
.strategic-decisions:is(:hover,:focus-visible) .capability-art>svg>circle:not(.decision-pulse){fill:#edeafb;stroke:#9281a2}

/* Callout geometry shares the UI plane; hover lifts each module as a unit. */
.design-systems:is(:hover,:focus-visible) .component-callout rect{translate:none}
.design-systems .chip-tag{transition:translate 550ms cubic-bezier(.22,1,.36,1)}
.design-systems:is(:hover,:focus-visible) .chip-tag{translate:0 -3px}
.strategic-decisions .capability-art{opacity:.68;transition:opacity 350ms}
.strategic-decisions .decision-route{stroke:#9a8bb8}
.strategic-decisions .decision-selected rect{fill:#a494c1;stroke:#b9aacc}
.strategic-decisions .decision-pulse{fill:#a494c1;stroke:#a494c1}
.strategic-decisions:is(:hover,:focus-visible) .capability-art{opacity:1}
.strategic-decisions:is(:hover,:focus-visible) .decision-route{stroke:#775ba5}

/* Reversible illustration motion: the resting state owns every transition. */
.design-systems,.strategic-decisions{--illustration-ease:cubic-bezier(.22,1,.36,1)}
.strategic-decisions .decision-selected,
.strategic-decisions .decision-option,
.strategic-decisions .decision-pulse{
  transition:transform 750ms var(--illustration-ease),fill 550ms ease,stroke 550ms ease;
}
.strategic-decisions .capability-art path,
.strategic-decisions .capability-art rect,
.strategic-decisions .capability-art circle,
.strategic-decisions .capability-art>svg>g:first-child{
  transition:transform 750ms var(--illustration-ease),fill 550ms ease,stroke 550ms ease,stroke-opacity 550ms ease,stroke-dashoffset 950ms var(--illustration-ease);
}
.design-systems .component-callout{transition:opacity 650ms ease;transition-delay:0ms}
.design-systems .chip-tag{transition:translate 750ms var(--illustration-ease);transition-delay:0ms}
.design-systems .component-callout rect,
.design-systems .system-modules rect{transition:fill 600ms ease,stroke 600ms ease;transition-delay:0ms}
.design-systems .system-library{transition:translate 750ms var(--illustration-ease)}
.design-systems:is(:hover,:focus-visible) .callout-banner .chip-tag{transition-delay:45ms}
.design-systems:is(:hover,:focus-visible) .callout-card .chip-tag{transition-delay:90ms}
.design-systems .capability-art,.strategic-decisions .capability-art{transition:opacity 550ms ease}
@media(prefers-reduced-motion:reduce){
  .design-systems .capability-art *,.strategic-decisions .capability-art *{transition:none!important}
}