/* ============================================================
   PROJECT 54 — "Companies We Work With" section styles
   5 variant treatments (.co1–.co5). Uses the page's existing tokens
   (--ink, --line, --accent, --mono, --chrome-*). Name-cards are the
   fallback treatment; real monochrome logos drop into .co-cell later.
   ============================================================ */

/* shared umbrella + microcopy */
.co-sec{position:relative}
.co-micro{font-family:var(--mono);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--faint);margin-top:14px;display:flex;align-items:center;gap:9px}
.co-micro::before{content:"";width:7px;height:7px;border:1px solid var(--faint);transform:rotate(45deg);flex:none}

/* base name-card cell — monochrome, equal-area, optically balanced */
.co-cell{display:flex;align-items:center;justify-content:center;text-align:center;padding:18px 16px;min-height:84px;
  border:1px solid var(--line);background:var(--ink-2);transition:background .3s,border-color .3s,transform .3s;position:relative;overflow:hidden}
.co-name{font-family:var(--mono);font-size:12px;letter-spacing:.04em;line-height:1.35;color:#b8b9be;text-transform:uppercase;transition:color .3s}
.co-cell:hover{background:var(--ink-3);border-color:var(--accent);transform:translateY(-2px)}
.co-cell:hover .co-name{color:var(--text)}
.co-logo{max-width:78%;max-height:42px;width:auto;height:auto;filter:grayscale(1) brightness(1.6) opacity(.7);transition:filter .3s}
.co-cell:hover .co-logo{filter:grayscale(0) brightness(1) opacity(1)}

/* ---------- Variant 1 · MARQUEE strip ---------- */
.co1 .co-rows{display:flex;flex-direction:column;gap:14px;margin-top:30px}
.co1 .co-track-wrap{overflow:hidden;border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:var(--ink-2);padding:0}
.co1 .co-rowlabel{font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--faint);padding:12px 2px 2px}
.co1 .co-track{display:flex;width:max-content;gap:0;animation:co-scroll 46s linear infinite}
.co1 .co-track.rev{animation-direction:reverse;animation-duration:54s}
.co1 .co-track .co-cell{border:0;border-right:1px solid var(--line);background:transparent;min-width:210px;min-height:74px}
.co1 .co-track .co-cell:hover{background:var(--ink-3)}
@keyframes co-scroll{to{transform:translateX(-50%)}}
@media(prefers-reduced-motion:reduce){.co1 .co-track{animation:none;flex-wrap:wrap;width:auto}}

/* ---------- Variant 2 · REGISTRY grid ---------- */
.co2 .co-grid{display:grid;grid-template-columns:repeat(6,1fr);margin-top:30px;border-left:1px solid var(--line);border-top:1px solid var(--line)}
.co2 .co-grid .co-cell{border-left:0;border-top:0;border-right:1px solid var(--line);border-bottom:1px solid var(--line);min-height:108px}
@media(max-width:900px){.co2 .co-grid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:560px){.co2 .co-grid{grid-template-columns:repeat(2,1fr)}}

/* ---------- Variant 3 · SCHEMATIC plate ---------- */
.co3 .co-plate{position:relative;border:1px solid var(--line);margin-top:30px;background:
  repeating-linear-gradient(0deg,transparent 0 63px,var(--line-2) 63px 64px),
  repeating-linear-gradient(90deg,transparent 0 63px,var(--line-2) 63px 64px),var(--ink-2)}
.co3 .co-plate .crn{position:absolute;width:10px;height:10px;border:1px solid var(--muted);z-index:2}
.co3 .crn.tl{top:-1px;left:-1px;border-right:0;border-bottom:0}
.co3 .crn.tr{top:-1px;right:-1px;border-left:0;border-bottom:0}
.co3 .crn.bl{bottom:-1px;left:-1px;border-right:0;border-top:0}
.co3 .crn.br{bottom:-1px;right:-1px;border-left:0;border-top:0}
.co3 .co-plate-cap{position:absolute;top:-1px;right:-1px;font-family:var(--mono);font-size:9.5px;letter-spacing:.12em;color:var(--faint);
  background:var(--ink);border:1px solid var(--line);padding:5px 9px;text-transform:uppercase}
.co3 .co-grid{display:grid;grid-template-columns:repeat(6,1fr);padding:30px}
.co3 .co-grid .co-cell{background:transparent;border:1px dashed var(--line);margin:-0.5px}
.co3 .co-cell .co-ref{position:absolute;top:6px;left:8px;font-family:var(--mono);font-size:9px;color:var(--faint);letter-spacing:.06em}
.co3 .co-cell:hover{border-style:solid}
@media(max-width:900px){.co3 .co-grid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:560px){.co3 .co-grid{grid-template-columns:repeat(2,1fr);padding:16px}}

/* ---------- Variant 4 · BANDED directory ---------- */
.co4 .co-band{display:grid;grid-template-columns:200px 1fr;gap:0;border-top:1px solid var(--line)}
.co4 .co-band:first-child{margin-top:30px}
.co4 .co-band:last-child{border-bottom:1px solid var(--line)}
.co4 .co-band-head{padding:28px 24px 28px 0;border-right:1px solid var(--line)}
.co4 .co-band-code{font-family:var(--mono);font-size:11px;letter-spacing:.14em;color:var(--accent)}
.co4 .co-band-label{font-size:15px;font-weight:600;letter-spacing:-.01em;margin-top:8px;line-height:1.3;color:var(--text)}
.co4 .co-band-note{font-family:var(--mono);font-size:9.5px;letter-spacing:.04em;color:var(--faint);margin-top:8px;text-transform:uppercase}
.co4 .co-band-cells{display:grid;grid-template-columns:repeat(4,1fr)}
.co4 .co-band-cells .co-cell{border:0;border-right:1px solid var(--line);border-bottom:1px solid var(--line);background:transparent}
.co4 .co-band-cells .co-cell:nth-child(4n){border-right:0}
.co4 .co-band-cells .co-cell:hover{background:var(--ink-3)}
@media(max-width:900px){.co4 .co-band{grid-template-columns:1fr}.co4 .co-band-head{border-right:0;border-bottom:1px solid var(--line);padding:20px 0}.co4 .co-band-cells{grid-template-columns:repeat(3,1fr)}.co4 .co-band-cells .co-cell:nth-child(4n){border-right:1px solid var(--line)}.co4 .co-band-cells .co-cell:nth-child(3n){border-right:0}}
@media(max-width:560px){.co4 .co-band-cells{grid-template-columns:repeat(2,1fr)}.co4 .co-band-cells .co-cell:nth-child(3n){border-right:1px solid var(--line)}.co4 .co-band-cells .co-cell:nth-child(2n){border-right:0}}

/* ---------- Variant 5 · CONSTELLATION wall ---------- */
.co5 .co-net{position:relative;border:1px solid var(--line);margin-top:30px;height:min(58vh,520px);overflow:hidden;background:
  radial-gradient(120% 120% at 70% 10%,rgba(31,111,235,.06),transparent 55%),var(--ink-2)}
.co5 .co-net canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.co5 .co-net .co-legend{position:absolute;left:16px;bottom:14px;font-family:var(--mono);font-size:10px;letter-spacing:.06em;text-transform:uppercase;color:var(--faint);z-index:2}
.co5 .co-net .crn{position:absolute;width:10px;height:10px;border:1px solid var(--muted);z-index:3}
.co5 .crn.tl{top:-1px;left:-1px;border-right:0;border-bottom:0}
.co5 .crn.tr{top:-1px;right:-1px;border-left:0;border-bottom:0}
.co5 .crn.bl{bottom:-1px;left:-1px;border-right:0;border-top:0}
.co5 .crn.br{bottom:-1px;right:-1px;border-left:0;border-top:0}