/* ============================================================
   CAPABILITY MOTIFS — small live visuals, reused in nav + pages
   ============================================================ */

.motif{position:relative;width:100%;aspect-ratio:16/10;border-radius:12px;overflow:hidden;
  background:linear-gradient(150deg,#0B1D39,#123058);border:1px solid rgba(255,255,255,.10)}
.motif svg{position:absolute;inset:0;width:100%;height:100%}
.motif--sm{aspect-ratio:16/9;border-radius:9px}
.motif--lg{aspect-ratio:16/9;border-radius:18px;border-color:rgba(255,255,255,.14)}

/* shared primitives */
.mo-line{stroke:rgba(143,198,255,.42);stroke-width:1.2;fill:none}
.mo-node{fill:#8FC6FF}
.mo-accent{fill:#5FE0D2}
.mo-dim{fill:rgba(255,255,255,.18)}

@keyframes moPulse{0%,100%{opacity:.35;r:2.4}50%{opacity:1;r:3.6}}
@keyframes moDash{to{stroke-dashoffset:-46}}
@keyframes moFlow{0%{offset-distance:0%}100%{offset-distance:100%}}
@keyframes moSweep{to{transform:rotate(360deg)}}
@keyframes moScan{0%{transform:translateY(0)}50%{transform:translateY(46px)}100%{transform:translateY(0)}}
@keyframes moSlideX{0%{transform:translateX(-26px)}100%{transform:translateX(112px)}}
@keyframes moGrow{0%{transform:scaleX(0)}60%,100%{transform:scaleX(1)}}
@keyframes moBlink{0%,45%{opacity:.25}55%,100%{opacity:1}}

/* 01 · network — pulsing mesh */
.mo-net .n{animation:moPulse 2.8s ease-in-out infinite}
.mo-net .n:nth-child(2){animation-delay:.4s}
.mo-net .n:nth-child(3){animation-delay:.8s}
.mo-net .n:nth-child(4){animation-delay:1.2s}
.mo-net .n:nth-child(5){animation-delay:1.6s}
.mo-net .n:nth-child(6){animation-delay:2s}
.mo-net .l{stroke-dasharray:5 6;animation:moDash 2.4s linear infinite}

/* 02 · workflow — packet travelling the chain */
.mo-flow .pkt{animation:moSlideX 3.4s cubic-bezier(.5,0,.5,1) infinite}
.mo-flow .stg{animation:moBlink 3.4s ease-in-out infinite}
.mo-flow .stg:nth-child(2){animation-delay:.8s}
.mo-flow .stg:nth-child(3){animation-delay:1.6s}
.mo-flow .stg:nth-child(4){animation-delay:2.4s}

/* 03 · managed services — radar sweep */
.mo-radar .sweep{transform-origin:60px 44px;animation:moSweep 3.6s linear infinite}
.mo-radar .blip{animation:moPulse 2.2s ease-in-out infinite}
.mo-radar .blip:nth-child(2){animation-delay:.7s}
.mo-radar .blip:nth-child(3){animation-delay:1.4s}

/* 04 · cybersecurity — shield with scan */
.mo-shield .scan{animation:moScan 3.2s ease-in-out infinite}
.mo-shield .tick{animation:moBlink 3.2s ease-in-out infinite}

/* 05 · procurement — units moving along the line */
.mo-supply .unit{animation:moSlideX 4s linear infinite}
.mo-supply .unit:nth-child(2){animation-delay:1.3s}
.mo-supply .unit:nth-child(3){animation-delay:2.6s}

/* 06 · PMO — gantt bars drawing */
.mo-gantt .bar{transform-origin:left;animation:moGrow 3.4s ease-in-out infinite}
.mo-gantt .bar:nth-child(2){animation-delay:.35s}
.mo-gantt .bar:nth-child(3){animation-delay:.7s}
.mo-gantt .bar:nth-child(4){animation-delay:1.05s}

/* ---- mega-menu preview panel ---- */
.mega--solutions{min-width:820px}
.mega__split{display:grid;grid-template-columns:1.15fr .85fr;gap:18px}
.mega__prev{border-radius:14px;overflow:hidden;background:var(--paper-2);border:1px solid var(--line);
  padding:14px;display:flex;flex-direction:column}
.mega__prevbody{position:relative;flex:1}
.mega__prevbody .motif{position:absolute;inset:0;opacity:0;transform:scale(.98);
  transition:opacity .35s var(--ease),transform .35s var(--ease);aspect-ratio:auto}
.mega__prevbody .motif.is-live{opacity:1;transform:none}
.mega__prevtxt{margin-top:12px}
.mega__prevtxt b{display:block;font-family:'Poppins';font-weight:600;font-size:.88rem;color:var(--ink)}
.mega__prevtxt span{display:block;font-size:.76rem;color:var(--slate);line-height:1.45;margin-top:4px}
.mega__link.is-active{background:var(--paper-2)}

/* leadership + company megas get live thumbs too */
.mega__p{position:relative}
.mega__p::after{content:"";position:absolute;left:50%;bottom:6px;width:0;height:2px;border-radius:2px;
  background:var(--grad);transform:translateX(-50%);transition:width .3s var(--ease)}
.mega__p:hover::after{width:60%}
.mega__mini{width:100%;aspect-ratio:16/9;border-radius:9px;overflow:hidden;margin-bottom:10px;
  background:linear-gradient(150deg,#0B1D39,#123058);position:relative}

@media (max-width:1180px){
  .mega--solutions{min-width:560px}
  .mega__split{grid-template-columns:1fr}
  .mega__prev{display:none}
}

@media (prefers-reduced-motion:reduce){
  .mo-net .n,.mo-net .l,.mo-flow .pkt,.mo-flow .stg,.mo-radar .sweep,.mo-radar .blip,
  .mo-shield .scan,.mo-shield .tick,.mo-supply .unit,.mo-gantt .bar{animation:none !important}
  .mo-gantt .bar{transform:scaleX(1) !important}
}

/* ============================================================
   CAPABILITY PAGE FURNITURE
   ============================================================ */
.kpi{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.kpi__c{background:#fff;border:1px solid var(--line);border-radius:var(--r-m);padding:22px}
.section--dark .kpi__c{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.13)}
.kpi__v{font-family:'Poppins';font-weight:800;font-size:1.9rem;line-height:1;color:var(--blue);letter-spacing:-.03em}
.section--dark .kpi__v{color:var(--blue-lt)}
.kpi__k{font-size:.83rem;color:var(--slate);margin-top:10px;line-height:1.5}
.section--dark .kpi__k{color:rgba(206,222,244,.76)}

.disc{counter-reset:d;display:grid;gap:2px}
.disc__row{display:grid;grid-template-columns:64px 1fr 1.15fr;gap:20px;align-items:start;
  padding:22px 0;border-bottom:1px solid var(--line)}
.section--dark .disc__row{border-color:rgba(255,255,255,.1)}
.disc__row:first-child{border-top:1px solid var(--line)}
.section--dark .disc__row:first-child{border-color:rgba(255,255,255,.1)}
.disc__n{font-family:'Poppins';font-weight:800;font-size:1.05rem;color:#fff;width:44px;height:44px;
  border-radius:50%;display:grid;place-items:center;background:var(--grad-d)}
.disc__t{font-family:'Poppins';font-weight:600;font-size:1.02rem;line-height:1.3}
.disc__d{font-size:.92rem;color:var(--slate);line-height:1.6}
.section--dark .disc__d{color:rgba(206,222,244,.78)}
.disc__gate{display:inline-flex;align-items:center;gap:7px;margin-top:10px;font-size:.76rem;font-weight:700;
  letter-spacing:.04em;padding:5px 12px;border-radius:999px;background:rgba(21,191,176,.14);color:#0E9384}
.section--dark .disc__gate{background:rgba(21,191,176,.2);color:#7FE5DA}

.sector{display:flex;align-items:center;gap:12px;padding:15px 18px;border:1px solid var(--line);
  border-radius:12px;background:#fff;transition:transform .3s var(--ease),box-shadow .3s var(--ease)}
.sector:hover{transform:translateY(-4px);box-shadow:var(--shadow-m)}
.sector svg{width:19px;height:19px;color:var(--blue);flex:none}
.sector b{font-family:'Poppins';font-weight:600;font-size:.9rem}
.sector span{display:block;font-size:.76rem;color:var(--slate);margin-top:2px}

@media (max-width:900px){
  .kpi{grid-template-columns:repeat(2,1fr)}
  .disc__row{grid-template-columns:44px 1fr;gap:14px}
  .disc__row > :last-child{grid-column:2}
}
@media (max-width:640px){ .kpi{grid-template-columns:1fr} }

/* ---- certification chips on light surfaces ---- */
.section:not(.section--dark) .cert{background:#fff;border-color:var(--line);box-shadow:var(--shadow-s)}
.section:not(.section--dark) .cert b{color:var(--ink)}
.section:not(.section--dark) .cert span{color:var(--blue)}