/* Hypha · JV partner · document: the capability statement, in the generic look of a one-page company PDF: a corporate
   band, a grey box for the logo, Core capabilities, Differentiators. The claim to handle absolutely everything fades
   to flat grey (--fade 0..1 on the article, J.fade) beside the lines they actually deliver (.cs-real), which stay
   crisp: never a strike through the words.

   <article class="doc capst">
     <header class="cs-band"><span class="cs-logo" aria-hidden="true"></span><p class="cs-k">Capability statement</p></header>
     <section class="cs-sec"><h4>Core capabilities</h4>
       <ul class="cs-list"><li>…</li><li class="cs-real">…</li>…</ul></section>
     <section class="cs-sec cs-q"><h4>Work we do brilliantly</h4><i class="fld fld--block"></i></section>   (the questions)
   </article>
   (Not ".cap": that is a caption.) */

.capst {
  --w: 460px;
  --fade: 0;
  width: var(--w);
  font-family: var(--f-sheet);
  color: #1b1f24;
  border-radius: 4px;
}
.cs-band { display: flex; align-items: center; gap: 14px; padding: 16px 22px; background: #22345a; color: #fff; }
.cs-logo { flex: none; width: 44px; height: 44px; border-radius: 6px; background: rgb(255 255 255 / 0.18); }
.cs-k { font-size: 12px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; }
.cs-sec { padding: 16px 22px 0; }
.cs-sec h4 { margin-bottom: 8px; padding-bottom: 5px; border-bottom: 2px solid #9fb3d1; font-size: 12px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: #22345a; }
.cs-list { columns: 2; column-gap: 22px; }
.cs-list li { position: relative; padding: 2px 0 2px 14px; font-size: 14.5px; line-height: 1.45; break-inside: avoid; color: rgb(27 31 36 / calc(1 - var(--fade) * 0.76)); }
.cs-list li::before { content: ""; position: absolute; left: 1px; top: 0.72em; width: 5px; height: 5px; border-radius: 1px; background: rgb(34 52 90 / calc(1 - var(--fade) * 0.72)); }
.cs-list li.cs-real { color: #1b1f24; font-weight: 700; }
.cs-list li.cs-real::before { background: #22345a; }
.cs-q { padding-bottom: 2px; }
.cs-q h4 { border-bottom-width: 1px; }
.cs-q + .cs-q { padding-top: 12px; }
.capst > :last-child { padding-bottom: 20px; }
@media (max-width: 899px) {
  .capst { --w: min(340px, calc(100vw - 40px)); }
  .cs-band { padding: 12px 16px; gap: 12px; }
  .cs-logo { width: 34px; height: 34px; }
  .cs-k { font-size: 12px; }
  .cs-sec { padding: 12px 16px 0; }
  .cs-sec h4 { font-size: 12px; }
  .cs-list { column-gap: 14px; }
  .cs-list li { font-size: 13.5px; }
  .capst > :last-child { padding-bottom: 16px; }
}