/* ===================================================================
   FLOWTRIG — case-study.css   (Case Studies listing page)
   Uses global tokens + tokens.css gradients.
   =================================================================== */
.cs-page section{ padding:clamp(34px,4.5vw,64px) 0; }
.cs-hero{ text-align:center; padding:clamp(40px,5vw,70px) 0 0; }
.cs-hero .sec-kicker{ justify-content:center; }
.cs-hero h1{ font-family:var(--font-d); font-weight:600; letter-spacing:-.03em; font-size:clamp(34px,5.5vw,62px); line-height:1.05; margin:16px 0 0; }
.cs-hero .sub{ margin:16px auto 0; max-width:58ch; }

/* metric strip under hero */
.cs-strip{ display:flex; flex-wrap:wrap; justify-content:center; gap:clamp(20px,5vw,64px); margin-top:clamp(26px,3vw,40px); }
.cs-strip .m{ text-align:center; }
.cs-strip .m .v{ font-family:var(--font-d); font-weight:600; font-size:clamp(26px,3vw,38px); letter-spacing:-.02em; color:var(--neon-dim); }
.cs-strip .m .l{ font-size:12px; color:var(--tx-mute); margin-top:3px; }

/* filter chips */
.cs-filters{ display:flex; flex-wrap:wrap; gap:8px; justify-content:center; margin-bottom:clamp(24px,3vw,38px); }
.cs-filters button{ font-size:13px; font-weight:500; padding:8px 15px; border-radius:999px; border:1px solid var(--line); background:var(--surface); color:var(--tx-soft); cursor:pointer; transition:all .18s; }
.cs-filters button:hover{ border-color:var(--line-glow); color:var(--tx); }
.cs-filters button.on{ background:var(--ink-ish, #0A1512); color:#fff; border-color:transparent; }
[data-theme="light"] .cs-filters button.on{ background:#0A1512; color:#fff; }

/* grid of case-study cards */
.cs-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
@media(max-width:980px){ .cs-grid{ grid-template-columns:repeat(2,1fr); } }
@media(max-width:640px){ .cs-grid{ grid-template-columns:1fr; } }
.cs-card{ display:flex; flex-direction:column; border:1px solid var(--line); border-radius:20px; overflow:hidden; background:var(--surface); transition:transform .28s cubic-bezier(.2,.7,.2,1), border-color .2s, box-shadow .28s; }
.cs-card:hover{ transform:translateY(-5px); border-color:var(--line-glow); box-shadow:0 26px 56px -28px rgba(0,0,0,.5), 0 0 40px -22px rgba(43,232,129,.5); }
/* banner */
.cs-banner{ position:relative; aspect-ratio:16/10; overflow:hidden; display:flex; align-items:flex-end; padding:16px; }
.cs-banner::after{ content:""; position:absolute; inset:0; background-image:radial-gradient(rgba(255,255,255,.16) 1px, transparent 1.4px); background-size:18px 18px; -webkit-mask-image:radial-gradient(circle at 70% 20%, #000, transparent 75%); mask-image:radial-gradient(circle at 70% 20%, #000, transparent 75%); opacity:.5; }
.cs-banner .logo{ position:relative; z-index:1; font-family:var(--font-d); font-weight:700; font-size:20px; color:#fff; display:flex; align-items:center; gap:9px; }
.cs-banner .logo .mk{ width:34px; height:34px; border-radius:9px; background:rgba(255,255,255,.16); backdrop-filter:blur(4px); display:flex; align-items:center; justify-content:center; }
.cs-banner .logo .mk svg{ width:18px; height:18px; color:#fff; }
.cs-banner .tag{ position:absolute; top:14px; left:14px; z-index:1; font-size:10.5px; font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:#fff; background:rgba(0,0,0,.32); backdrop-filter:blur(4px); padding:4px 10px; border-radius:999px; }
.cs-banner .kpi{ position:absolute; top:12px; right:12px; z-index:1; text-align:right; }
.cs-banner .kpi .v{ font-family:var(--font-d); font-weight:700; font-size:26px; color:#fff; line-height:1; }
.cs-banner .kpi .l{ font-size:9.5px; color:rgba(255,255,255,.85); letter-spacing:.04em; }
/* gradient palettes */
.cs-banner.g1{ background:linear-gradient(150deg,#0E7C42,#19A85B 60%,#2BE881); }
.cs-banner.g2{ background:linear-gradient(150deg,#1B3A6B,#2C6FD6 60%,#5B9DF6); }
.cs-banner.g3{ background:linear-gradient(150deg,#6A2C8F,#9D4EDD 60%,#C77DFF); }
/* body */
.cs-body{ padding:20px; display:flex; flex-direction:column; flex:1; }
.cs-body .ind{ font-size:11px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--neon); }
.cs-body h3{ font-family:var(--font-d); font-weight:600; font-size:19px; letter-spacing:-.01em; margin-top:7px; line-height:1.25; }
.cs-body p{ font-size:13.5px; color:var(--tx-soft); line-height:1.55; margin-top:9px; }
.cs-pills{ display:flex; flex-wrap:wrap; gap:6px; margin-top:13px; }
.cs-pills span{ font-size:11px; color:var(--tx-soft); background:var(--surface-2); border:1px solid var(--line); padding:4px 9px; border-radius:999px; }
.cs-readmore{ margin-top:16px; padding-top:15px; border-top:1px solid var(--line-2); display:flex; align-items:center; justify-content:space-between; }
.cs-readmore .rm{ display:inline-flex; align-items:center; gap:7px; font-size:13.5px; font-weight:600; color:var(--neon); }
.cs-readmore .rm svg{ width:15px; height:15px; transition:transform .2s; }
.cs-card:hover .cs-readmore .rm svg{ transform:translateX(4px); }
.cs-readmore .av{ display:flex; align-items:center; gap:7px; font-size:11.5px; color:var(--tx-mute); }
.cs-readmore .av .dot{ width:24px; height:24px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:10px; font-weight:700; color:#fff; }
/* "Coming soon" cards (case studies not yet published) */
.cs-card.cs-soon{ cursor:default; }
.cs-card.cs-soon:hover{ transform:none; border-color:var(--line); box-shadow:none; }
.cs-card.cs-soon .cs-banner{ filter:saturate(.6) brightness(.92); }
.cs-readmore .rm-soon{ display:inline-flex; align-items:center; gap:7px; font-size:12px; font-weight:600; color:var(--tx-mute); letter-spacing:.04em; text-transform:uppercase; }
.cs-card.cs-soon::after{ content:"Coming soon"; position:absolute; top:12px; right:12px; z-index:3; font-size:10.5px; font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:#fff; background:rgba(0,0,0,.55); border:1px solid rgba(255,255,255,.2); padding:4px 9px; border-radius:999px; backdrop-filter:blur(4px); }
.cs-card{ position:relative; }

/* featured / carousel rail */
.cs-rail{ display:flex; gap:20px; overflow-x:auto; scroll-snap-type:x mandatory; padding:6px 2px 14px; scrollbar-width:none; }
.cs-rail::-webkit-scrollbar{ display:none; }
.cs-rail .cs-feat{ scroll-snap-align:start; flex:0 0 min(560px,86%); }
.cs-feat{ display:grid; grid-template-columns:1fr 1fr; border:1px solid var(--line); border-radius:22px; overflow:hidden; background:var(--surface); }
@media(max-width:620px){ .cs-feat{ grid-template-columns:1fr; } }
.cs-feat .cs-banner{ aspect-ratio:auto; }
.cs-railctrl{ display:flex; gap:8px; justify-content:center; margin-top:16px; }
.cs-railctrl button{ width:40px; height:40px; border-radius:11px; border:1px solid var(--line); background:var(--surface); color:var(--tx-soft); display:flex; align-items:center; justify-content:center; cursor:pointer; transition:all .18s; }
.cs-railctrl button:hover{ border-color:var(--line-glow); color:var(--tx); transform:translateY(-2px); }
.cs-railctrl button svg{ width:18px; height:18px; }