/* ═══════════════ CASE STUDY PAGES — page-specific layer on top of style.css ═══════════════ */

/* ── HERO ── */
.cs-hero{padding:10rem 0 4.2rem;position:relative}
.cs-crumb{margin-bottom:1.7rem}
.cs-crumb a{color:var(--teal);transition:color .25s}
.cs-crumb a:hover{color:var(--text)}
.cs-hero .win-card__tag{display:inline-block;margin-bottom:1.5rem}
.cs-hero__title{font-family:var(--font-display);font-weight:700;font-size:clamp(2.6rem,5.6vw,4.8rem);line-height:1.02;letter-spacing:-.025em;max-width:22ch}
.cs-hero__sub{margin-top:1.4rem;color:var(--text-dim);max-width:38rem;font-size:1.05rem}

/* ── STAT BAND ── */
.cs-stats{padding:3.8rem 0;border-block:1px solid var(--border)}
.cs-stats__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:2rem}

/* ── STORY BLOCKS (alternating) ── */
.cs-story{padding:clamp(3.5rem,7vw,5.5rem) 0 1rem}
.cs-block{display:flex;gap:clamp(2rem,5vw,4.5rem);padding:3rem 0;border-top:1px solid var(--border);align-items:flex-start}
.cs-block:first-child{border-top:0;padding-top:1rem}
.cs-block--flip{flex-direction:row-reverse}
.cs-block__side{flex:0 0 300px}
.cs-block__num{color:var(--teal);display:block;margin-bottom:1rem}
.cs-block__side h2{font-family:var(--font-display);font-weight:700;font-size:clamp(1.7rem,3vw,2.4rem);letter-spacing:-.02em;line-height:1.1}
.cs-block__body{flex:1;color:var(--text-dim);max-width:44rem}
.cs-block__body p{margin-bottom:1rem}
.cs-block__body p:last-child{margin-bottom:0}
.cs-block__body a{color:var(--teal);text-decoration:underline;text-decoration-color:color-mix(in srgb,var(--teal) 40%,transparent);text-underline-offset:.2em;transition:color .25s}
.cs-block__body a:hover{color:var(--text)}
.cs-block__body b{color:var(--text);font-weight:600}
.cs-list{list-style:none;display:flex;flex-direction:column;gap:.6rem;margin-top:.4rem}
.cs-list li{font-family:var(--font-mono);font-size:.8rem;line-height:1.55;color:var(--text-dim);padding-left:1.2rem;position:relative}
.cs-list li::before{content:"→";position:absolute;left:0;top:.05em;color:var(--brand,#7c5cff);font-size:.75rem}

/* ── RESULTS CHART ── */
.cs-results{padding:clamp(3.5rem,7vw,5.5rem) 0}
.cs-chart{margin-top:2.6rem;border:1px solid var(--border);border-radius:20px;background:var(--surface-solid);padding:2.4rem 2rem 3.4rem}
.cs-chart__bars{display:flex;align-items:flex-end;gap:clamp(.5rem,1.6vw,1.2rem);height:240px}
.cs-bar{flex:1;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;gap:.7rem;height:100%;position:relative;min-width:0}
.cs-bar__fill{
  width:100%;max-width:64px;height:var(--h);border-radius:8px 8px 3px 3px;
  background:linear-gradient(180deg,var(--brand,#7c5cff),color-mix(in srgb,var(--brand,#7c5cff) 32%,transparent));
  transform:scaleY(0);transform-origin:bottom;
  transition:transform 1s cubic-bezier(.22,1,.36,1);
}
.cs-chart.in .cs-bar__fill{transform:scaleY(1)}
.cs-chart.in .cs-bar:nth-child(2) .cs-bar__fill{transition-delay:.07s}
.cs-chart.in .cs-bar:nth-child(3) .cs-bar__fill{transition-delay:.14s}
.cs-chart.in .cs-bar:nth-child(4) .cs-bar__fill{transition-delay:.21s}
.cs-chart.in .cs-bar:nth-child(5) .cs-bar__fill{transition-delay:.28s}
.cs-chart.in .cs-bar:nth-child(6) .cs-bar__fill{transition-delay:.35s}
.cs-chart.in .cs-bar:nth-child(7) .cs-bar__fill{transition-delay:.42s}
.cs-chart.in .cs-bar:nth-child(8) .cs-bar__fill{transition-delay:.49s}
.cs-chart.in .cs-bar:nth-child(9) .cs-bar__fill{transition-delay:.56s}
.cs-bar__v{font-family:var(--font-mono);font-size:.62rem;letter-spacing:.06em;color:var(--text-dim);white-space:nowrap}
.cs-bar__m{position:absolute;bottom:-1.8rem;font-family:var(--font-mono);font-size:.6rem;letter-spacing:.14em;color:var(--text-faint)}
.cs-chart__cap{margin-top:2.6rem;text-align:center;color:var(--text-faint)}

/* ── QUOTE ── */
.cs-quote-sec{padding:1rem 0 clamp(3.5rem,7vw,5.5rem)}
.cs-quote{
  max-width:52rem;margin:0 auto;
  border:1px solid var(--border);border-radius:20px;background:var(--surface-solid);
  padding:2.6rem 2.4rem;display:flex;flex-direction:column;gap:1.2rem;
}
.cs-quote blockquote{font-family:var(--font-display);font-size:clamp(1.12rem,1.9vw,1.45rem);line-height:1.5;font-weight:500}
.cs-quote figcaption{display:flex;flex-direction:column;gap:.2rem;padding-top:1rem;border-top:1px solid var(--border)}
.cs-quote figcaption b{font-family:var(--font-display);font-size:1rem}
.cs-quote figcaption span{font-size:.85rem;color:var(--text-dim)}

/* ── CTA BANNER ── */
.cs-cta-sec{padding:0 0 clamp(4rem,8vw,6.5rem)}
.cs-banner{
  position:relative;overflow:hidden;border-radius:26px;
  padding:clamp(3rem,6vw,5rem) clamp(1.8rem,5vw,4.5rem);
  background:linear-gradient(115deg,#0e1533,#1a2350 48%,#8a4413 88%,#f68b1f 135%);
  color:#fff;text-align:center;
  box-shadow:0 34px 90px rgba(6,8,20,.45);
}
.cs-banner h2{font-family:var(--font-display);font-weight:700;font-size:clamp(2rem,4.4vw,3.4rem);letter-spacing:-.025em;line-height:1.05}
.cs-banner p{margin:1.1rem auto 2.2rem;color:rgba(255,255,255,.78);max-width:34rem}
.cs-banner__btn{display:inline-flex;align-items:center;gap:.5rem;background:#fff;color:#10101c;font-weight:600;font-size:.95rem;padding:1rem 2.2rem;border-radius:100px;transition:transform .3s cubic-bezier(.22,1,.36,1),box-shadow .3s}
.cs-banner__btn:hover{transform:translateY(-3px);box-shadow:0 16px 44px rgba(0,0,0,.35)}

/* ── RESPONSIVE ── */
@media (max-width:860px){
  .cs-hero{padding:8.5rem 0 3.4rem}
  .cs-block,.cs-block--flip{flex-direction:column;gap:1.3rem}
  .cs-block__side{flex:none}
  .cs-stats__grid{grid-template-columns:repeat(2,1fr);row-gap:2.6rem}
}
@media (max-width:640px){
  .cs-chart__bars{height:180px}
  .cs-bar__v{font-size:.55rem}
  .cs-quote{padding:2rem 1.6rem}
}

/* ── MORE CASE STUDIES ── */
.cs-more{padding:0 0 4.5rem;position:relative;z-index:2}
.cs-more__list{list-style:none;margin:1.4rem 0 0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,17rem),1fr));gap:.9rem}
.cs-more__list a{display:flex;flex-direction:column;gap:.7rem;height:100%;padding:1.3rem 1.4rem;border:1px solid var(--border);border-radius:18px;background:var(--surface);font-family:var(--font-display);font-weight:600;line-height:1.3;transition:border-color .3s,transform .3s}
.cs-more__list a:hover{border-color:var(--brand);transform:translateY(-3px)}
.cs-more__list .mono-label{color:var(--brand)}