.capabilities-section { position:relative; padding:clamp(5.75rem,9vw,9rem) 0 clamp(6rem,10vw,9.5rem); overflow:hidden; color:#f4f6f3; background:linear-gradient(145deg,#102c3b,#071725 72%); scroll-margin-top:5.2rem; }.capabilities-section::before { content:""; position:absolute; inset:0; opacity:.26; pointer-events:none; background-image:linear-gradient(rgba(255,255,255,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.07) 1px,transparent 1px); background-size:clamp(4rem,6vw,6.5rem) clamp(4rem,6vw,6.5rem); -webkit-mask-image:linear-gradient(90deg,#000,transparent 72%); mask-image:linear-gradient(90deg,#000,transparent 72%); }.capabilities-section::after { content:""; position:absolute; right:-14%; top:4%; width:52%; aspect-ratio:1; opacity:.25; pointer-events:none; background:radial-gradient(circle,rgba(var(--color-signal-rgb),.18),transparent 66%); }
.capabilities-section .container { position:relative; z-index:1; }.capabilities-section__head { display:grid; grid-template-columns:minmax(0,1.05fr) minmax(19rem,.7fr); column-gap:clamp(3rem,8vw,9rem); row-gap:1.25rem; margin-bottom:clamp(3rem,6vw,5.5rem); }.capabilities-section__head .micro-label { grid-column:1; color:#89d5ca; }.capabilities-section__head h2 { grid-column:1; max-width:11ch; color:#f4f6f3; font-size:clamp(2.7rem,4.7vw,4.6rem); line-height:1; letter-spacing:-.055em; }.capabilities-section__head > p:last-child { grid-column:2; grid-row:2; align-self:end; max-width:34rem; margin:0; color:rgba(244,246,243,.68); font-size:var(--text-body-lg); line-height:1.72; }
.capability-system { position:relative; min-height:41rem; display:grid; grid-template-columns:repeat(12,1fr); grid-template-rows:1fr 1.12fr; overflow:hidden; border:1px solid rgba(255,255,255,.16); background:rgba(7,23,37,.34); box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 1.8rem 4.8rem rgba(0,0,0,.16); }.capability-system__meta { position:absolute; z-index:3; top:1.15rem; left:1.35rem; display:flex; flex-wrap:wrap; gap:.45rem 1rem; align-items:center; color:rgba(244,246,243,.56); font-size:.6rem; font-weight:600; letter-spacing:.07em; text-transform:uppercase; }.capability-system__meta span { color:#89d5ca; }.capability-system__meta p { margin:0; letter-spacing:0; text-transform:none; }.capability-system__links { position:absolute; z-index:0; inset:0; width:100%; height:100%; overflow:visible; pointer-events:none; }.capability-system__links path { fill:none; stroke:rgba(137,213,202,.2); stroke-width:1.25; transition:stroke var(--duration-medium),stroke-width var(--duration-medium),opacity var(--duration-medium); }
.capability-domain { position:relative; z-index:1; display:flex; flex-direction:column; align-items:flex-start; min-width:0; padding:clamp(1.4rem,2.5vw,2.35rem); outline:none; background:transparent; border:0; transition:background var(--duration-medium); }.capability-domain::before { content:""; position:absolute; inset:0; opacity:0; pointer-events:none; background:linear-gradient(135deg,rgba(86,191,174,.1),transparent 48%); transition:opacity var(--duration-medium); }.capability-domain::after { content:""; position:absolute; left:0; bottom:0; width:0; height:2px; background:#79cbbf; transition:width 360ms var(--ease-out); }.capability-domain__control { position:absolute; z-index:4; inset:0; width:100%; padding:0; cursor:pointer; background:transparent; border:0; }.capability-domain__control:focus-visible { outline:2px solid var(--color-signal); outline-offset:-3px; }.capability-domain--direction { grid-column:1 / span 8; grid-row:1; border-right:1px solid rgba(255,255,255,.13); border-bottom:1px solid rgba(255,255,255,.13); padding-top:3.8rem; }.capability-domain--signals { grid-column:9 / span 4; grid-row:1; border-bottom:1px solid rgba(255,255,255,.13); padding-top:3.8rem; }.capability-domain--experience { grid-column:1 / span 5; grid-row:2; border-right:1px solid rgba(255,255,255,.13); }.capability-domain--activation { grid-column:6 / span 7; grid-row:2; }
.capability-domain__label { position:relative; z-index:1; display:grid; gap:.3rem; margin:0; color:rgba(244,246,243,.55); font-size:.61rem; font-weight:600; letter-spacing:.06em; line-height:1.35; text-transform:uppercase; }.capability-domain__label span { color:#89d5ca; }.capability-domain h3 { position:relative; z-index:1; max-width:14ch; margin:1.2rem 0 .8rem; color:#f4f6f3; font-size:clamp(1.25rem,1.8vw,1.72rem); font-weight:600; line-height:1.05; letter-spacing:-.04em; }.capability-domain__description { position:relative; z-index:1; max-width:42ch; margin:0; color:rgba(244,246,243,.69); font-size:.88rem; line-height:1.62; }.capability-domain__terms { position:relative; z-index:1; max-width:40ch; margin:1.05rem 0 0; color:rgba(137,213,202,.8); font-size:.63rem; font-weight:600; letter-spacing:.045em; line-height:1.55; text-transform:uppercase; }.capability-domain__outcome { position:relative; z-index:1; display:grid; gap:.26rem; margin:auto 0 0; padding-top:1.1rem; color:#f4f6f3; font:600 .86rem/1.4 var(--font-display); letter-spacing:-.015em; }.capability-domain__outcome span { color:rgba(244,246,243,.48); font:600 .56rem/1.2 var(--font-body); letter-spacing:.07em; text-transform:uppercase; }
.capability-domain:hover,.capability-domain:focus-within,.capability-domain.is-active { background:rgba(255,255,255,.02); }.capability-domain:hover::before,.capability-domain:focus-within::before,.capability-domain.is-active::before { opacity:1; }.capability-domain:hover::after,.capability-domain:focus-within::after,.capability-domain.is-active::after { width:38%; }.capability-domain.is-active .capability-domain__outcome { color:#c9f0e9; }.capability-system[data-active] .capability-system__links path { opacity:.34; }.capability-system[data-active] .capability-system__links path.is-active { opacity:1; stroke:#79cbbf; stroke-width:1.75; stroke-dasharray:4 8; }.capability-system[data-active] .capability-domain:not(.is-active) { opacity:.86; }
.capabilities-section__exit { position:absolute; left:50%; bottom:0; width:min(100% - (var(--gutter) * 2),var(--container-main)); height:1px; transform:translateX(-50%); background:linear-gradient(90deg,transparent,rgba(137,213,202,.44),rgba(255,255,255,.12),transparent); }.capabilities-section__exit i { position:absolute; left:43%; top:-2px; width:5px; aspect-ratio:1; background:#79cbbf; }@keyframes capability-trace { to { stroke-dashoffset:-48; } }
@media (max-width:900px) { .capabilities-section__head { grid-template-columns:1fr; gap:1.25rem; }.capabilities-section__head .micro-label,.capabilities-section__head h2,.capabilities-section__head > p:last-child { grid-column:1; grid-row:auto; max-width:44rem; }.capability-system { min-height:39rem; }.capability-domain--direction { grid-column:1 / span 7; }.capability-domain--signals { grid-column:8 / span 5; }.capability-domain--experience { grid-column:1 / span 6; }.capability-domain--activation { grid-column:7 / span 6; } }
@media (max-width:640px) { .capabilities-section { padding-block:4.8rem 5.5rem; }.capabilities-section::before { opacity:.13; background-size:4rem 4rem; }.capabilities-section__head { margin-bottom:2.8rem; }.capabilities-section__head h2 { font-size:clamp(2.45rem,10vw,2.9rem); }.capabilities-section__head > p:last-child { font-size:.97rem; line-height:1.67; }.capability-system { min-height:0; display:grid; grid-template-columns:1fr; grid-template-rows:none; gap:0; padding:3.5rem 1rem 1rem 2.25rem; background:rgba(7,23,37,.42); }.capability-system::before { content:""; position:absolute; top:3.8rem; bottom:2.4rem; left:1.05rem; width:1px; background:linear-gradient(#79cbbf,rgba(137,213,202,.18)); }.capability-system__meta { top:1rem; left:1rem; right:1rem; display:grid; gap:.22rem; }.capability-system__links { display:none; }.capability-domain { grid-column:1 !important; grid-row:auto !important; min-height:0; padding:1.15rem 0 1.25rem 1rem; border:0 !important; border-bottom:1px solid rgba(255,255,255,.12) !important; transform:none !important; }.capability-domain:last-child { border-bottom:0 !important; }.capability-domain::before { left:-1.2rem; background:linear-gradient(90deg,rgba(86,191,174,.15),transparent 52%); }.capability-domain::after { left:-1.45rem; bottom:auto; top:1.55rem; width:.55rem !important; height:.55rem; border-radius:50%; background:#79cbbf; opacity:.62; }.capability-domain:hover::after,.capability-domain:focus-visible::after,.capability-domain.is-active::after { opacity:1; }.capability-domain h3 { margin:.8rem 0 .6rem; font-size:1.38rem; }.capability-domain__description { font-size:.87rem; line-height:1.58; }.capability-domain__terms { margin-top:.75rem; font-size:.6rem; }.capability-domain__outcome { margin-top:.9rem; padding-top:0; font-size:.83rem; }.capability-system[data-active] .capability-domain:not(.is-active) { opacity:1; }.capability-domain:focus-visible { box-shadow:inset 0 0 0 2px var(--color-signal); } }
@media (prefers-reduced-motion:reduce) { .capability-domain__control { transition:none; } }
