/* ══════════════════════════════════════════════════════════════════
   STOBOX — Case Studies v3 (page-specific)
   Loads AFTER v3-system.css. Preserves js/case-studies.js hooks:
   #cs-grid, #cs-count, #cs-industry-pills, #cs-service-pills,
   #cs-chart, .cs-card, .cs-bar-fill[data-width].
   ══════════════════════════════════════════════════════════════════ */

.hero h1{ max-width: 22ch }

/* ── FEATURED ROWS ───────────────────────────────────────────────── */
.cs-feat-list{
  margin-top: 50px;
  border: 1px solid var(--rule);
  background: var(--rule);
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.cs-feat-row{
  background: var(--bg);
  display: grid;
  grid-template-columns: 1.4fr 1fr 2fr 1fr;
  gap: 32px;
  align-items: center;
  padding: 28px 32px;
  transition: background var(--t-fast), padding-left var(--t-fast) var(--ease);
}
.cs-feat-row:hover{
  background: var(--blue-ice);
  padding-left: 40px;
}
.cs-feat-name{
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(22px, 2vw, 28px);
  text-transform: uppercase;
  letter-spacing: -0.018em;
  color: var(--ink);
  line-height: 1;
}
.cs-feat-meta{
  display: inline-flex;
  align-items: center;
}
.cs-feat-desc{
  font-family: var(--body);
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--ink-2);
}
.cs-feat-loc{
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .08em;
  color: var(--ink-3);
  text-align: right;
  text-transform: uppercase;
}
@media (max-width: 920px){
  .cs-feat-row{ grid-template-columns: 1fr; gap: 12px; padding: 22px }
  .cs-feat-row:hover{ padding-left: 22px }
  .cs-feat-loc{ text-align: left }
}

/* ── BADGE (used both featured + grid via JS) ────────────────────── */
.cs-badge{
  font-family: var(--mono);
  font-size: 9.5px;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--accent);
  background: var(--accent-bg);
  border: 1px solid var(--accent-bd);
  padding: 4px 9px;
  border-radius: 1px;
  white-space: nowrap;
}
.cs-badge[data-svc="Platform Build"]{ color: var(--accent); background: var(--accent-bg); border-color: var(--accent-bd) }
.cs-badge[data-svc="Token Structuring"]{ color: var(--blue-twilight); background: rgba(55,48,163,0.07); border-color: rgba(55,48,163,0.22) }
.cs-badge[data-svc="Fundraising Strategy"]{ color: #047857; background: rgba(4,120,87,0.07); border-color: rgba(4,120,87,0.22) }
.cs-badge[data-svc="Advisory"]{ color: var(--ink-2); background: var(--bg-3); border-color: var(--rule-hard) }
.cs-badge[data-svc="Regulatory Framework"]{ color: #b45309; background: rgba(180,83,9,0.07); border-color: rgba(180,83,9,0.22) }

/* ── FILTER BAR ──────────────────────────────────────────────────── */
.cs-filters{
  background: var(--bg);
  border-bottom: 1px solid var(--rule);
  position: sticky;
  top: 51px;
  z-index: 50;
  padding: 18px var(--gutter);
}
.cs-filters-inner{
  max-width: var(--maxw);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.cs-filter-row{
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.cs-pill{
  font-family: var(--body);
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: -0.005em;
  color: var(--ink-2);
  background: var(--bg);
  border: 1px solid var(--rule-hard);
  padding: 7px 13px;
  border-radius: 1px;
  cursor: pointer;
  transition: background var(--t-fast), color var(--t-fast), border-color var(--t-fast);
}
.cs-pill:hover{ border-color: var(--accent); color: var(--accent) }
.cs-pill.active{
  background: var(--ink);
  border-color: var(--ink);
  color: var(--bg);
}
.cs-filter-count{
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-top: 4px;
}

/* ── CASE GRID (rendered by JS) ──────────────────────────────────── */
.cs-grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  margin-top: 32px;
  background: var(--rule);
  border: 1px solid var(--rule);
}
.cs-card{
  background: var(--bg);
  padding: 28px 26px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .6s var(--ease), transform .6s var(--ease),
              background var(--t-base) var(--ease),
              padding-left var(--t-fast) var(--ease),
              box-shadow .45s cubic-bezier(.22,1,.36,1);
}
.sec.alt .cs-card{ background: var(--bg-2) }
.cs-card.visible{ opacity: 1; transform: none }
.cs-card:hover{
  background: var(--bg);
  padding-left: 32px;
  box-shadow: 0 18px 40px rgba(10,14,44,0.10);
}
.cs-card-top{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.cs-chip{
  font-family: var(--mono);
  font-size: 9.5px;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-3);
  border: 1px solid var(--rule-hard);
  background: var(--bg-3);
  padding: 4px 9px;
  border-radius: 1px;
}
.cs-card h4{
  font-family: var(--display);
  font-weight: 800;
  font-size: 26px;
  text-transform: uppercase;
  letter-spacing: -0.018em;
  line-height: 1;
  color: var(--ink);
}
.cs-card-country{
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .04em;
  color: var(--ink-3);
  text-transform: uppercase;
}
.cs-card-outcome{
  font-family: var(--body);
  font-size: 13px;
  line-height: 1.55;
  color: var(--ink-2);
}
.cs-empty{
  grid-column: 1 / -1;
  background: var(--bg-2);
  padding: 64px 32px;
  text-align: center;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-3);
}
@media (max-width: 1024px){ .cs-grid{ grid-template-columns: repeat(2, 1fr) } }
@media (max-width: 600px){ .cs-grid{ grid-template-columns: 1fr } }

/* ── GEOGRAPHIC TABLE ────────────────────────────────────────────── */
.cs-geo-table{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--rule);
  border: 1px solid var(--rule);
  margin-top: 50px;
}
.cs-geo-region{
  background: var(--bg);
  padding: 28px 26px;
}
.cs-geo-region h4{
  font-family: var(--display);
  font-weight: 800;
  font-size: 18px;
  text-transform: uppercase;
  letter-spacing: -0.012em;
  color: var(--ink);
  margin-bottom: 14px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--rule);
}
.cs-geo-region ul{ list-style: none }
.cs-geo-region li{
  font-family: var(--body);
  font-size: 13px;
  color: var(--ink-2);
  padding: 6px 0;
  display: flex;
  align-items: center;
  gap: 10px;
}
.cs-geo-region li span{ font-size: 14px }
@media (max-width: 920px){ .cs-geo-table{ grid-template-columns: repeat(2, 1fr) } }
@media (max-width: 560px){ .cs-geo-table{ grid-template-columns: 1fr } }

.cs-regions{
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  margin-top: 36px;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}
.cs-region{
  padding: 20px 18px;
  border-right: 1px solid var(--rule);
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.cs-region:last-child{ border-right: 0 }
.cs-region-val{
  font-family: var(--display);
  font-weight: 800;
  font-size: 36px;
  letter-spacing: -0.022em;
  line-height: 1;
  color: var(--accent);
}
.cs-region-lbl{
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-3);
}
@media (max-width: 920px){
  .cs-regions{ grid-template-columns: repeat(2, 1fr) }
  .cs-region:nth-child(2){ border-right: 0 }
  .cs-region:nth-child(-n+4){ border-bottom: 1px solid var(--rule) }
}

/* ── INDUSTRY BAR CHART ──────────────────────────────────────────── */
.cs-chart{
  margin-top: 50px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  border-top: 1px solid var(--rule);
  padding-top: 30px;
}
.cs-bar-row{
  display: grid;
  grid-template-columns: 200px 1fr 56px;
  align-items: center;
  gap: 18px;
}
.cs-bar-label{
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .08em;
  color: var(--ink-2);
  text-transform: uppercase;
}
.cs-bar-track{
  height: 14px;
  background: var(--bg-3);
  border: 1px solid var(--rule);
  position: relative;
  overflow: hidden;
}
.cs-bar-fill{
  height: 100%;
  width: 0;
  background: var(--accent) !important;
  transition: width 1.2s var(--ease);
}
.cs-bar-pct{
  font-family: var(--display);
  font-weight: 700;
  font-size: 18px;
  color: var(--ink);
  letter-spacing: -0.015em;
  text-align: right;
}
@media (max-width: 700px){
  .cs-bar-row{ grid-template-columns: 110px 1fr 42px; gap: 10px }
  .cs-bar-label{ font-size: 10px }
}