/* CogHalo Labs — Components
   Reusable section components shared across all pages.
   Pair with ds/tokens.css (loaded first) + ds/site.js. */

/* ---- Inner-page hero ---- */
.phero{position:relative;padding:var(--s-9) 0 var(--s-8);border-bottom:1px solid var(--line);overflow:hidden;}
.phero .const-bg{z-index:0;}
.phero::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(180deg,rgba(9,11,14,.1),rgba(9,11,14,.6));}
.phero .inner{position:relative;z-index:2;max-width:780px;}
.phero h1{font-size:var(--fs-h1);letter-spacing:-.03em;margin-top:20px;line-height:1.02;}
.phero .lede{margin-top:22px;max-width:600px;}
.crumb{font-family:var(--font-mono);font-size:var(--fs-xs);letter-spacing:.14em;text-transform:uppercase;color:var(--muted);}
.crumb a:hover{color:var(--cyan);}

/* ---- Section head ---- */
.sec-head{max-width:720px;margin-bottom:var(--s-7);}
.sec-head.between{display:flex;justify-content:space-between;align-items:flex-end;max-width:none;gap:30px;}
.sec-head h2{font-size:var(--fs-h2);margin-top:16px;}
.sec-head p{margin-top:14px;}
.tick{font-family:var(--font-mono);font-size:var(--fs-xs);color:var(--faint);letter-spacing:.12em;}

/* ---- Capability cards ---- */
.cap-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:18px;}
.cap{position:relative;overflow:hidden;}
.cap .idx{font-family:var(--font-mono);font-size:var(--fs-xs);color:var(--cyan);letter-spacing:.16em;}
.cap h3{font-size:var(--fs-h3);margin:14px 0 10px;}
.cap p{color:var(--ink-2);font-size:var(--fs-sm);}
.cap .glyph{position:absolute;top:22px;right:22px;opacity:.5;transition:opacity .3s var(--ease);}
.cap:hover .glyph{opacity:1;}
.cap .more{margin-top:20px;}

/* ---- Stat band ---- */
.stats{border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:var(--bg-1);}
.stats .container{display:grid;grid-template-columns:repeat(4,1fr);}
.stat{padding:var(--s-8) var(--s-5);border-right:1px solid var(--line);}
.stat:last-child{border-right:none;}
.stat .n{font-size:clamp(40px,4.4vw,58px);font-weight:600;letter-spacing:-.03em;line-height:1;}
.stat .n .u{color:var(--cyan);}
.stat .l{font-family:var(--font-mono);font-size:var(--fs-xs);letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-top:14px;}

/* ---- Dispatch / article list ---- */
.head-row{display:flex;justify-content:space-between;align-items:flex-end;margin-bottom:var(--s-6);gap:24px;flex-wrap:wrap;}
.head-row h2{font-size:var(--fs-h2);}
.filters{display:flex;gap:8px;flex-wrap:wrap;}
.filters .pill{cursor:pointer;transition:all .18s var(--ease);}
.filters .pill:hover{border-color:var(--cyan-line);color:var(--ink);}
.filters .pill.on{background:var(--cyan);color:#08110F;border-color:var(--cyan);}
.list{border-top:1px solid var(--line);}
.item{display:grid;grid-template-columns:64px 150px 1fr auto;gap:28px;align-items:center;
  padding:26px 12px;border-bottom:1px solid var(--line);cursor:pointer;position:relative;transition:background .2s var(--ease);}
.item::before{content:"";position:absolute;left:0;top:0;bottom:0;width:2px;background:var(--cyan);transform:scaleY(0);transition:transform .25s var(--ease);}
.item:hover{background:var(--bg-1);}
.item:hover::before{transform:scaleY(1);}
.item .no{font-family:var(--font-mono);font-size:var(--fs-sm);color:var(--faint);}
.item .cat{font-family:var(--font-mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--cyan);}
.item .ttl{font-size:23px;letter-spacing:-.02em;line-height:1.16;transition:color .2s var(--ease);}
.item:hover .ttl{color:var(--cyan-bright);}
.item .ametal,.item .meta{font-family:var(--font-mono);font-size:var(--fs-xs);color:var(--muted);text-align:right;white-space:nowrap;}

/* ---- Article card grid ---- */
.ins-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;}
.ins{display:flex;flex-direction:column;cursor:pointer;}
.ins .thumb{height:168px;border-radius:var(--r);background:var(--bg-inset);border:1px solid var(--line);margin-bottom:20px;position:relative;overflow:hidden;}
.ins .meta{font-family:var(--font-mono);font-size:var(--fs-xs);letter-spacing:.1em;text-transform:uppercase;color:var(--cyan);display:flex;gap:14px;}
.ins h3{font-size:var(--fs-h3);margin:14px 0 0;line-height:1.22;transition:color .2s var(--ease);}
.ins:hover h3{color:var(--cyan-bright);}
.ins .rt{margin-top:auto;padding-top:16px;font-size:var(--fs-sm);color:var(--muted);}

/* ---- Featured essay ---- */
.feature{border-top:2px solid var(--cyan);padding-top:20px;}
.feature .lbl{font-family:var(--font-mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--cyan);}
.feature h3{font-size:26px;line-height:1.12;margin:14px 0 0;letter-spacing:-.02em;}
.feature .by{font-family:var(--font-mono);font-size:var(--fs-xs);color:var(--muted);margin-top:16px;display:flex;gap:14px;}

/* ---- Team ---- */
.team-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;}
.member .ph{aspect-ratio:1/1;border-radius:var(--r);background:var(--bg-inset);border:1px solid var(--line);position:relative;overflow:hidden;margin-bottom:16px;}
.member h4{font-size:18px;}
.member .role{font-family:var(--font-mono);font-size:var(--fs-xs);color:var(--cyan);letter-spacing:.04em;margin-top:5px;}
.member p{font-size:13px;color:var(--ink-2);margin-top:12px;line-height:1.5;}

/* ---- Values ---- */
.values{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;}
.value{background:var(--bg-1);padding:var(--s-6);}
.value .vn{font-family:var(--font-mono);font-size:10px;color:var(--cyan);letter-spacing:.14em;}
.value h4{font-size:19px;margin:14px 0 10px;}
.value p{font-size:14px;color:var(--ink-2);line-height:1.55;}

/* ---- Data table ---- */
.tbl-wrap{border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;background:var(--bg-1);}
table.dt{width:100%;border-collapse:collapse;}
.dt thead th{font-family:var(--font-mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);text-align:left;padding:16px 22px;border-bottom:1px solid var(--line-2);background:var(--bg-2);font-weight:400;}
.dt tbody td{padding:18px 22px;border-bottom:1px solid var(--line);font-size:var(--fs-sm);color:var(--ink-2);vertical-align:middle;}
.dt tbody tr:last-child td{border-bottom:none;}
.dt tbody tr{transition:background .18s var(--ease);}
.dt tbody tr:hover{background:var(--bg-2);}
.dt td .cap-name{color:var(--ink);font-weight:500;font-size:var(--fs-body);}
.dt .mono{font-family:var(--font-mono);font-size:var(--fs-xs);color:var(--cyan);}
.dt .bar{height:6px;border-radius:3px;background:var(--bg-3);overflow:hidden;width:120px;}
.dt .bar i{display:block;height:100%;background:var(--cyan);box-shadow:0 0 8px var(--cyan-glow);}

/* ---- Newsletter ---- */
.news{position:relative;overflow:hidden;border:1px solid var(--cyan-line);border-radius:var(--r-xl);background:var(--bg-1);padding:var(--s-9) var(--s-8);text-align:center;}
.news .const-bg{opacity:.5;}
.news-in{position:relative;z-index:2;max-width:560px;margin:0 auto;}
.news h2{font-size:var(--fs-h2);}
.news p{margin:14px auto 28px;color:var(--ink-2);max-width:420px;}
.form{display:flex;gap:10px;max-width:440px;margin:0 auto;}
.input{flex:1;background:var(--bg-inset);border:1px solid var(--line-2);border-radius:var(--r-pill);
  padding:14px 20px;color:var(--ink);font-family:var(--font-sans);font-size:var(--fs-sm);outline:none;transition:border-color .2s var(--ease),box-shadow .2s var(--ease);}
.input::placeholder{color:var(--muted);}
.input:focus{border-color:var(--cyan);box-shadow:0 0 0 3px var(--cyan-dim);}
.news .fine{font-family:var(--font-mono);font-size:10px;color:var(--faint);letter-spacing:.06em;margin-top:18px;}

/* ---- CTA banner ---- */
.cta{position:relative;border:1px solid var(--cyan-line);border-radius:var(--r-xl);overflow:hidden;
  background:linear-gradient(120deg, rgba(20,26,33,.9), rgba(15,19,24,.9));padding:var(--s-9) var(--s-8);text-align:center;}
.cta .const-bg{opacity:.6;}
.cta-in{position:relative;z-index:2;max-width:640px;margin:0 auto;}
.cta h2{font-size:var(--fs-h2);}
.cta p{margin:16px auto 30px;max-width:480px;}

/* ---- Meta strip (case study / article facts) ---- */
.meta-strip{display:grid;grid-template-columns:repeat(4,1fr);border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;background:var(--bg-1);}
.meta-strip .m{padding:22px 24px;border-right:1px solid var(--line);}
.meta-strip .m:last-child{border-right:none;}
.meta-strip .k{font-family:var(--font-mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);}
.meta-strip .v{font-size:18px;font-weight:500;margin-top:8px;letter-spacing:-.01em;}
.meta-strip .v .u{color:var(--cyan);}

/* ---- Long-form prose ---- */
.prose{max-width:680px;}
.prose > *{margin-bottom:1.35em;}
.prose p{font-size:var(--fs-lg);line-height:1.72;color:var(--ink-2);}
.prose h2{font-size:30px;letter-spacing:-.02em;margin-top:1.8em;color:var(--ink);}
.prose h3{font-size:21px;margin-top:1.6em;color:var(--ink);}
.prose strong{color:var(--ink);font-weight:600;}
.prose a{color:var(--cyan);text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--cyan-line);}
.prose ul{padding-left:0;list-style:none;}
.prose li{font-size:var(--fs-lg);line-height:1.6;color:var(--ink-2);padding-left:26px;position:relative;margin-bottom:.7em;}
.prose li::before{content:"";position:absolute;left:4px;top:.7em;width:6px;height:6px;border-radius:50%;background:var(--cyan);box-shadow:0 0 8px var(--cyan-glow);}
.prose .lead{font-size:23px;line-height:1.5;color:var(--ink);letter-spacing:-.01em;}

.pullquote{border-left:2px solid var(--cyan);padding:6px 0 6px 28px;margin:2em 0;}
.pullquote p{font-size:27px;line-height:1.28;color:var(--ink);letter-spacing:-.02em;font-weight:500;}
.pullquote cite{font-family:var(--font-mono);font-size:var(--fs-xs);color:var(--muted);font-style:normal;letter-spacing:.06em;display:block;margin-top:16px;}

.figure{margin:2.2em 0;}
.figure .frame{position:relative;height:300px;border:1px solid var(--line-2);border-radius:var(--r-lg);overflow:hidden;background:var(--bg-inset);}
.figure figcaption{font-family:var(--font-mono);font-size:var(--fs-xs);color:var(--muted);margin-top:14px;letter-spacing:.04em;}

.callout{border:1px solid var(--cyan-line);background:var(--cyan-dim);border-radius:var(--r);padding:22px 26px;margin:2em 0;}
.callout .lbl{font-family:var(--font-mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--cyan);}
.callout p{font-size:var(--fs-body);color:var(--ink);margin-top:10px;line-height:1.6;}

.author-bio{display:flex;gap:18px;align-items:center;border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:26px 0;margin-top:3em;}
.author-bio .av{width:54px;height:54px;border-radius:50%;border:1px solid var(--cyan-line);display:flex;align-items:center;justify-content:center;font-weight:600;color:var(--cyan);flex:none;}
.author-bio .nm{font-weight:600;}
.author-bio .ti{font-family:var(--font-mono);font-size:var(--fs-xs);color:var(--muted);margin-top:4px;}

@media (max-width:980px){
  .team-grid{grid-template-columns:1fr 1fr;}
  .values{grid-template-columns:1fr;}
  .meta-strip{grid-template-columns:1fr 1fr;}
  .meta-strip .m:nth-child(2n){border-right:none;}
}
@media (max-width:860px){
  .cap-grid,.ins-grid{grid-template-columns:1fr;}
  .stats .container{grid-template-columns:1fr 1fr;}
  .stat:nth-child(2n){border-right:none;}
  .stat{border-bottom:1px solid var(--line);}
  .item{grid-template-columns:34px 1fr;gap:10px;}
  .item .cat,.item .meta{display:none;}
  .form{flex-direction:column;}
}