/* ============================================================
   CASE STUDIES — listing index (single consolidated page)
   Dropdown filters (top) + boxed cards: logo · testimonial ·
   uplift. Brand palette matches styles-brand-invesp.css.
     navy band   hsl(231 52% 25%)   edge hsl(233 56% 15%)
     violet      hsl(263 75% 58%)
     green       hsl(152 52% 40%)   (positive metrics)
     ink         hsl(222 47% 12%)
   ============================================================ */
:root{
  --csx-navy: 231 52% 25%;
  --csx-navy-edge: 233 56% 15%;
  --csx-violet: 263 75% 58%;
  --csx-green: 152 52% 40%;
  --csx-ink: 222 47% 12%;
  --csx-muted: 220 9% 42%;
  --csx-line: 220 16% 90%;
  --csx-tint: 220 24% 97%;
  --csx-display: 'Space Grotesk', 'Outfit', sans-serif;
}

/* ---------- Hero band ---------- */
.csi-hero{
  position:relative; color:#fff; padding:128px 0 60px; overflow:hidden;
  background:
    radial-gradient(110% 120% at 86% -18%, hsl(219 92% 58% / .3) 0%, transparent 48%),
    linear-gradient(162deg, hsl(var(--csx-navy)) 0%, hsl(var(--csx-navy-edge)) 100%);
}
.csi-eyebrow{
  display:inline-flex; align-items:center; gap:8px; margin-bottom:20px;
  font-size:13px; font-weight:600; letter-spacing:.12em; text-transform:uppercase;
  color:hsl(263 82% 86%); background:hsl(263 75% 62% / .18);
  padding:7px 14px; border-radius:999px;
}
.csi-eyebrow .dot{ width:6px; height:6px; border-radius:999px; background:hsl(152 60% 55%); }
.csi-hero h1{
  font-family:var(--csx-display); font-weight:700; letter-spacing:-.025em;
  font-size:clamp(40px,5.4vw,62px); line-height:1.02; margin:0 0 18px; max-width:20ch;
}
.csi-hero h1 em{ font-style:normal; color:hsl(263 82% 82%); }
.csi-hero p{ margin:0; max-width:64ch; font-size:19px; color:hsl(220 32% 86%); }
.csi-stats{ display:flex; gap:56px; flex-wrap:wrap; margin-top:40px; padding-top:30px;
  border-top:1px solid hsl(230 40% 55% / .3); }
.csi-stats .s .n{ font-family:var(--csx-display); font-size:34px; font-weight:700; letter-spacing:-.01em; }
.csi-stats .s .l{ font-size:15px; color:hsl(220 22% 74%); margin-top:4px; }

/* ---------- Toolbar / dropdown filters ---------- */
.csi-toolbar{ background:#fff; border-bottom:1px solid hsl(var(--csx-line)); padding:24px 0; position:sticky; top:64px; z-index:20; }
.csi-toolbar-row{ display:flex; align-items:flex-end; gap:28px; flex-wrap:wrap; }
.csi-fgroup{ display:flex; flex-direction:column; }
.csi-fgroup-label{
  font-size:13px; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
  color:hsl(var(--csx-muted)); margin-bottom:10px;
}
.csi-selectwrap{ position:relative; }
.csi-select{
  font:inherit; font-size:16px; font-weight:600; color:hsl(var(--csx-ink));
  appearance:none; -webkit-appearance:none; cursor:pointer;
  min-width:248px; padding:13px 44px 13px 18px; border-radius:12px;
  background:hsl(var(--csx-tint)); border:1.5px solid hsl(220 13% 47%);
  transition:border-color .15s ease, box-shadow .15s ease;
}
.csi-select:focus{ outline:none; border-color:hsl(var(--csx-navy)); box-shadow:0 0 0 4px hsl(var(--csx-navy) / .12); }
.csi-selectwrap::after{
  content:''; position:absolute; right:18px; top:50%; width:9px; height:9px;
  border-right:2px solid hsl(var(--csx-muted)); border-bottom:2px solid hsl(var(--csx-muted));
  transform:translateY(-65%) rotate(45deg); pointer-events:none;
}
.csi-reset{
  margin-left:auto; font:inherit; font-size:14px; font-weight:600;
  color:hsl(var(--csx-navy)); background:none; border:none; cursor:pointer; padding:13px 4px;
}
.csi-reset:hover{ text-decoration:underline; }
/* focus ring stays visible on the dark hero / CTA bands */
.csi-hero a:focus-visible, .csi-cta a:focus-visible{ outline-color:#fff; }
.csi-count{ font-size:14px; color:hsl(var(--csx-muted)); padding-bottom:14px; font-weight:500; }

/* ---------- List ---------- */
.csi-list{ padding:48px 0 12px; display:flex; flex-direction:column; gap:18px; }

/* ---------- Boxed card: logo · testimonial · uplift ---------- */
.csa-card{
  display:grid; grid-template-columns:240px 1fr 210px; align-items:stretch;
  background:#fff; border:1px solid hsl(var(--csx-line)); border-radius:18px; overflow:hidden;
  transition:box-shadow .2s ease, transform .2s ease, border-color .2s ease;
}
.csa-card:hover{ transform:translateY(-3px); border-color:hsl(var(--csx-navy) / .22);
  box-shadow:0 26px 50px -34px hsl(231 50% 18% / .5); }
.csa-plate{
  display:flex; align-items:center; justify-content:center; padding:28px 26px;
  background:hsl(var(--csx-tint)); border-right:1px solid hsl(var(--csx-line)); text-decoration:none;
}
.csa-plate img{ max-height:62px; max-width:160px; width:auto; object-fit:contain; }
.csa-body{ padding:28px 30px; display:flex; flex-direction:column; gap:14px; min-width:0; }
.csa-tags{ display:flex; flex-wrap:wrap; gap:7px; }
.csa-tag{
  font-size:13px; font-weight:600; letter-spacing:.04em; text-transform:uppercase;
  color:hsl(231 38% 40%); background:hsl(var(--csx-navy) / .07);
  padding:4px 9px; border-radius:6px;
}
.csa-tag.size{ color:hsl(263 50% 50%); background:hsl(263 70% 60% / .1); }
.csa-quote{
  margin:0; font-size:18px; line-height:1.5; color:hsl(222 33% 22%); font-weight:450;
  display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden;
}
.csa-quote::before{ content:'\201C'; color:hsl(var(--csx-navy) / .3); font-weight:700; }
.csa-quote::after{ content:'\201D'; color:hsl(var(--csx-navy) / .3); font-weight:700; }
.csa-side{
  display:flex; flex-direction:column; align-items:flex-start; justify-content:center; gap:6px;
  padding:28px 26px; border-left:1px solid hsl(var(--csx-line)); background:hsl(152 40% 97%);
}
.csa-side.nometric{ background:#fff; justify-content:space-between; }
.csa-metric-num{ font-family:var(--csx-display); font-size:40px; font-weight:700; line-height:1;
  letter-spacing:-.02em; color:hsl(var(--csx-green)); font-variant-numeric:tabular-nums; }
.csa-metric-label{ font-size:14px; font-weight:600; color:hsl(152 30% 32%); line-height:1.4; }
.csa-side.nometric .csa-kicker{ font-family:var(--csx-display); font-size:14px; font-weight:600;
  letter-spacing:.05em; text-transform:uppercase; color:hsl(var(--csx-muted)); }
.csa-link{
  margin-top:auto; display:inline-flex; align-items:center; gap:7px; text-decoration:none;
  font-size:15px; font-weight:700; color:hsl(var(--csx-navy));
}
.csa-link svg{ transition:transform .18s ease; }
.csa-card:hover .csa-link svg{ transform:translateX(4px); }

/* ---------- Wordmark fallback ---------- */
.cs-wordmark{ font-family:var(--csx-display); font-weight:700; letter-spacing:-.02em;
  color:hsl(var(--csx-navy)); line-height:1.05; font-size:24px; text-align:center; }

/* ---------- Empty state ---------- */
.cs-empty{ padding:60px 0; text-align:center; color:hsl(var(--csx-muted)); font-size:18px; display:none; }
.cs-empty.show{ display:block; }

/* ---------- Closing CTA band ---------- */
.csi-cta{
  margin-top:36px; padding:72px 0; text-align:center; color:#fff;
  background:
    radial-gradient(120% 140% at 50% -30%, hsl(219 92% 58% / .24) 0%, transparent 50%),
    linear-gradient(162deg, hsl(var(--csx-navy)) 0%, hsl(var(--csx-navy-edge)) 100%);
}
.csi-cta h2{ font-family:var(--csx-display); font-size:clamp(30px,3.4vw,40px); font-weight:700; margin:0 0 12px; letter-spacing:-.02em; }
.csi-cta p{ margin:0 auto 26px; max-width:46ch; color:hsl(220 30% 84%); font-size:17px; }
.csi-cta a{
  display:inline-flex; align-items:center; gap:9px; text-decoration:none;
  background:hsl(263 70% 60%); color:#fff; font-weight:700; font-size:16px;
  padding:15px 30px; border-radius:999px;
}

/* ---------- Responsive ---------- */
@media (max-width:840px){
  .csa-card{ grid-template-columns:1fr; }
  .csa-plate{ border-right:none; border-bottom:1px solid hsl(var(--csx-line)); padding:24px; }
  .csa-side, .csa-side.nometric{ border-left:none; border-top:1px solid hsl(var(--csx-line));
    flex-direction:row; align-items:center; justify-content:space-between; gap:16px; padding:20px 26px; }
  .csa-link{ margin-top:0; }
  .csi-toolbar{ position:static; }
  .csi-select{ min-width:0; width:100%; }
  .csi-fgroup{ flex:1 1 240px; }
}