/* ===========================================================
   Iceberg Digital — Case study pages (/case-study/ and children)
   Builds on main.css tokens. Data accent: --blu-m; other bars: --cs-muted.
   =========================================================== */

:root{
  --cs-accent:var(--blu-m);
  --cs-muted:#c3cbdc;
  --cs-track:var(--blu-ll);
  --cs-read:720px;
}

.cs-updated{ margin-top:4px; }

/* ── type helpers ── */
.cs-kicker{
  font-size:.75rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
  color:var(--viola); margin-bottom:10px;
}
.cs-read .cs-kicker-gap{ margin-top:64px; }
.cs-read{ max-width:var(--cs-read); margin:0 auto; }
.cs-read-left{ margin-left:0; }
.cs-read h2{ margin-bottom:18px; }
.cs-read p:not(.cs-kicker), .cs-lead{ font-size:1.0625rem; line-height:1.7; color:var(--testo); }
.cs-read p + p{ margin-top:14px; }

/* ── hero (index) ── */
.cs-hero h1{ max-width:900px; }
.cs-hero .hero-sub{ max-width:680px; }
.cs-hero .cs-kpis{ margin:40px 0 32px; }

/* ── KPI row ── */
.cs-kpis{
  display:grid; gap:1px; background:var(--bordo); border:1px solid var(--bordo);
  border-radius:var(--radius-m); overflow:hidden;
}
.cs-kpis-3{ grid-template-columns:repeat(3,1fr); }
.cs-kpis-4{ grid-template-columns:repeat(4,1fr); }
.cs-kpi{ background:#fff; padding:24px 22px; }
.cs-kpi-value{ font-size:clamp(1.75rem,3vw,2.4rem); font-weight:700; letter-spacing:-.02em; line-height:1.1; color:var(--blu); }
.cs-kpi.is-accent .cs-kpi-value{ color:var(--cs-accent); }
.cs-kpi-label{ margin-top:8px; font-size:.95rem; font-weight:500; color:var(--testo); line-height:1.45; }
.cs-kpi-note{ margin-top:4px; font-size:.8rem; color:var(--testo-m); }
@media (max-width:900px){ .cs-kpis-4{ grid-template-columns:1fr 1fr; } }
@media (max-width:700px){ .cs-kpis-3{ grid-template-columns:1fr; } }
@media (max-width:420px){ .cs-kpis-4{ grid-template-columns:1fr; } }

/* ── grid head + filters ── */
.cs-grid-head{ display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between; gap:20px; margin-bottom:36px; }
.cs-grid-head h2{ max-width:620px; }
.cs-filters{ display:flex; flex-wrap:wrap; gap:8px; }
.cs-filters[hidden]{ display:none; }
.cs-filters .ftab{ min-height:44px; padding:10px 18px; font-size:.9rem; font-weight:600; }

/* ── case cards ── */
.cs-cards{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
@media (max-width:1000px){ .cs-cards{ grid-template-columns:1fr 1fr; } }
@media (max-width:700px){ .cs-cards{ grid-template-columns:1fr; } }
.cs-card{
  position:relative; display:flex; flex-direction:column; background:#fff;
  border:1px solid var(--bordo); border-radius:var(--radius-m); overflow:hidden;
  transition:box-shadow .15s, transform .15s;
}
.cs-card[hidden]{ display:none; }
.cs-card:hover{ box-shadow:var(--shadow-m); transform:translateY(-2px); }
.cs-card-visual{ border-bottom:1px solid var(--bordo); background:var(--blu-ll); }
.cs-card-visual img, .cs-card-visual .cs-ph{ width:100%; aspect-ratio:16/9; object-fit:cover; border-radius:0; border:0; }
.cs-card-body{ padding:24px; display:flex; flex-direction:column; gap:10px; flex:1; }
.cs-card-body .cs-kicker{ margin-bottom:0; }
.cs-card h3{ font-size:1.15rem; line-height:1.3; }
.cs-card-services{ font-size:.85rem; }
.cs-card-metric{ margin-top:6px; padding-top:14px; border-top:1px solid var(--bordo); }
.cs-card-metric .cs-kpi-value{ color:var(--cs-accent); font-size:2rem; }
.cs-card-metric p:last-child{ margin-top:4px; font-size:.9rem; line-height:1.45; }
.cs-card-link{
  margin-top:auto; min-height:44px; display:inline-flex; align-items:center;
  font-weight:700; color:var(--viola);
}
.cs-card-link::after{ content:""; position:absolute; inset:0; }
.cs-card-link:focus-visible{ outline:none; }
.cs-card:focus-within{ outline:3px solid var(--viola); outline-offset:2px; }

/* ── image placeholder ── */
.cs-ph{
  display:flex; align-items:center; justify-content:center; width:100%;
  background:var(--blu-ll); border:1px solid var(--bordo); border-radius:var(--radius-m);
  color:#a7b2c9; font-size:2rem;
}

/* ── how we work ── */
.cs-steps{ display:grid; grid-template-columns:repeat(5,1fr); gap:22px; list-style:none; }
@media (max-width:1000px){ .cs-steps{ grid-template-columns:repeat(3,1fr); } }
@media (max-width:700px){ .cs-steps{ grid-template-columns:1fr; } }
.cs-audiences{ margin-top:40px; }
.cs-audiences .benefit-card{ padding:26px; }
.cs-audiences .benefit-card h3{ font-size:1.05rem; }
.cs-audiences .benefit-card p{ font-size:.925rem; }

/* ── economic value (index) ── */
.cs-value-chart{ margin-top:32px; }
.cs-value-chart .cs-hbar li{ grid-template-columns:minmax(0,17rem) 1fr 5.5rem; }
.cs-details{ margin-top:22px; }
.cs-details summary{
  display:inline-flex; align-items:center; gap:10px; min-height:44px; padding:10px 20px;
  border:1.5px solid var(--bordo); border-radius:24px; background:#fff;
  font-weight:600; color:var(--blu); cursor:pointer; list-style:none;
}
.cs-details summary::-webkit-details-marker{ display:none; }
.cs-details summary:hover{ border-color:var(--blu); }
.cs-details summary i{ color:var(--viola); transition:transform .2s; }
.cs-details[open] summary i{ transform:rotate(45deg); }
.cs-details-grid{ margin-top:20px; display:grid; grid-template-columns:repeat(2,1fr); gap:20px 32px; max-width:960px; }
.cs-details-grid h3{ font-size:1rem; margin-bottom:6px; }
.cs-details-grid p{ font-size:.925rem; line-height:1.6; }
@media (max-width:700px){ .cs-details-grid{ grid-template-columns:1fr; } }

/* ── charts ── */
.cs-chart{
  background:#fff; border:1px solid var(--bordo); border-radius:var(--radius-m);
  padding:28px; margin:0; min-width:0;
}
.cs-chart figcaption{ font-size:1.05rem; font-weight:700; color:var(--blu); line-height:1.35; margin-bottom:24px; }
.cs-src{ margin-top:20px; font-size:.8rem; line-height:1.55; color:var(--testo-m); }

.cs-hbar{ display:flex; flex-direction:column; gap:14px; list-style:none; }
.cs-hbar li{ display:grid; grid-template-columns:minmax(0,12rem) 1fr 3.5rem; gap:14px; align-items:center; }
.cs-hbar .cs-lbl{ font-size:.925rem; color:var(--testo); }
.cs-track{ height:22px; background:var(--cs-track); border-radius:4px; overflow:hidden; }
.cs-hbar .cs-bar{ display:block; height:100%; width:var(--w); background:var(--cs-muted); border-radius:4px; }
.cs-hbar .is-hl .cs-bar{ background:var(--cs-accent); }
.cs-hbar .cs-val{ font-weight:700; color:var(--blu); text-align:right; font-variant-numeric:tabular-nums; }
.cs-hbar .is-hl .cs-val{ color:var(--cs-accent); }
@media (max-width:560px){
  .cs-hbar li, .cs-value-chart .cs-hbar li{ grid-template-columns:1fr auto; gap:6px 12px; }
  .cs-hbar .cs-lbl{ grid-column:1; }
  .cs-hbar .cs-val{ grid-column:2; grid-row:1; }
  .cs-hbar .cs-track{ grid-column:1 / -1; }
}

.cs-vbar{
  display:flex; align-items:flex-end; gap:40px; height:260px; padding:0 16px;
  border-bottom:1px solid var(--cs-muted); list-style:none; margin-bottom:64px;
}
.cs-vbar li{
  flex:1; height:100%; display:flex; flex-direction:column; align-items:center; justify-content:flex-end;
  gap:8px; position:relative; min-width:0;
}
.cs-vbar .cs-val{ font-size:1.3rem; font-weight:700; color:var(--blu); font-variant-numeric:tabular-nums; }
.cs-vbar .cs-bar{ width:100%; max-width:140px; height:calc(var(--h) * .82); background:var(--cs-muted); border-radius:4px 4px 0 0; }
.cs-vbar .is-hl .cs-bar{ background:var(--cs-accent); }
.cs-vbar .is-hl .cs-val{ color:var(--cs-accent); }
.cs-vbar .cs-lbl{
  position:absolute; top:calc(100% + 10px); left:50%; transform:translateX(-50%);
  width:max-content; max-width:160px; text-align:center; font-size:.85rem; line-height:1.4; color:var(--testo-m);
}
.cs-vbar.is-dense{ gap:6px; padding:0; margin-bottom:34px; }
.cs-vbar.is-dense .cs-val{ font-size:.75rem; font-weight:600; }
.cs-vbar.is-dense .cs-bar{ border-radius:3px 3px 0 0; }
.cs-vbar.is-dense .cs-lbl{ font-size:.75rem; max-width:none; }
@media (max-width:560px){ .cs-vbar{ gap:20px; padding:0; } .cs-vbar.is-dense{ gap:3px; } .cs-vbar.is-dense .cs-val{ font-size:.68rem; } }

.cs-breakdown div{ display:flex; justify-content:space-between; gap:16px; padding:12px 0; border-bottom:1px solid var(--bordo); }
.cs-breakdown dt{ color:var(--testo); }
.cs-breakdown dd{ font-weight:700; color:var(--blu); text-align:right; }
.cs-breakdown .is-total{ border-bottom:none; font-size:1.1rem; }
.cs-breakdown .is-total dt{ font-weight:700; }
.cs-breakdown .is-total dd{ color:var(--cs-accent); }
@media (max-width:420px){ .cs-breakdown div{ flex-direction:column; gap:2px; } .cs-breakdown dd{ text-align:left; } }

/* ── detail: intro ── */
.cs-intro{ background:var(--blu-ll); border-bottom:1px solid var(--bordo); padding:48px 0 44px; }
.cs-intro h1{ max-width:960px; }
.cs-sheet{
  margin:36px 0 32px; padding:22px 0; display:grid; grid-template-columns:repeat(5,1fr); gap:20px;
  border-top:1px solid var(--bordo); border-bottom:1px solid var(--bordo);
}
.cs-sheet dt{ font-size:.78rem; color:var(--testo-m); }
.cs-sheet dd{ margin-top:4px; font-weight:600; color:var(--testo); line-height:1.4; }
@media (max-width:1000px){ .cs-sheet{ grid-template-columns:repeat(3,1fr); } }
@media (max-width:560px){ .cs-sheet{ grid-template-columns:1fr 1fr; } }
.cs-note{ margin-top:12px; font-size:.8rem; color:var(--testo-m); }

/* ── detail: story ── */
.cs-points{ margin-top:22px; display:flex; flex-direction:column; gap:10px; list-style:disc; padding-left:22px; }
.cs-points li{ font-size:1.0625rem; line-height:1.7; color:var(--testo); }
.cs-points li::marker{ color:var(--viola); }
.cs-points strong{ color:var(--blu); }
.cs-figures{ margin-top:44px; display:grid; gap:20px; }
.cs-figures-3{ grid-template-columns:repeat(3,1fr); }
.cs-figures-2{ grid-template-columns:repeat(2,1fr); max-width:960px; margin-left:auto; margin-right:auto; }
@media (max-width:800px){ .cs-figures-3, .cs-figures-2{ grid-template-columns:1fr; } }
.cs-figure{ margin:0; }
.cs-figure img{ width:100%; height:auto; border:1px solid var(--bordo); border-radius:var(--radius-m); }
.cs-figure figcaption{ margin-top:10px; font-size:.875rem; color:var(--testo-m); }

.cs-diagram{
  list-style:none; aspect-ratio:1600/1000; display:flex; flex-direction:column; justify-content:center; gap:22px;
  padding:24px; background:var(--blu-ll); border:1px solid var(--bordo); border-radius:var(--radius-m);
}
.cs-diagram li{ position:relative; background:#fff; border:1px solid var(--bordo); border-radius:var(--radius-s); padding:10px 16px; }
.cs-diagram li + li::before{
  content:"↓"; position:absolute; top:-21px; left:22px; color:var(--viola); font-weight:700; line-height:1;
}
.cs-diagram strong{ display:block; color:var(--blu); }
.cs-diagram span{ font-size:.85rem; color:var(--testo-m); }

.cs-cta-mid{
  margin:56px auto 0; max-width:960px; display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:20px;
  background:#fff; border:1px solid var(--bordo); border-left:4px solid var(--giallo); border-radius:var(--radius-m); padding:26px 30px;
}
.cs-cta-mid p{ flex:1 1 380px; font-size:1.1rem; font-weight:600; color:var(--blu); }
@media (max-width:560px){ .cs-cta-mid .btn{ width:100%; white-space:normal; } }

/* ── detail: results ── */
.cs-charts{ margin-top:36px; display:grid; grid-template-columns:repeat(2,1fr); gap:22px; }
@media (max-width:900px){ .cs-charts{ grid-template-columns:1fr; } }
.cs-method{ margin-top:22px; font-size:.82rem; line-height:1.6; color:var(--testo-m); }
.cs-method strong{ color:var(--testo); }

/* ── final CTA, related, footnote ── */
.cs-cta-final{ padding-top:24px; }
.cs-cta-final .cta-band h2{ max-width:640px; }
@media (max-width:560px){ .cs-cta-final .btn{ width:100%; white-space:normal; } .hero-cta-row .btn{ width:100%; white-space:normal; } }
.cs-related-wrap{ padding-top:16px; }
.cs-related-wrap h2{ font-size:1.5rem; margin-bottom:22px; }
.cs-related-grid{ display:grid; grid-template-columns:1fr 1fr; gap:20px; }
@media (max-width:700px){ .cs-related-grid{ grid-template-columns:1fr; } }
.cs-related{
  display:flex; flex-direction:column; gap:8px; padding:24px; background:#fff;
  border:1px solid var(--bordo); border-radius:var(--radius-m); transition:box-shadow .15s, transform .15s;
}
.cs-related:hover{ box-shadow:var(--shadow-m); transform:translateY(-2px); }
.cs-related .cs-kicker{ margin-bottom:0; }
.cs-related-title{ font-size:1.1rem; font-weight:700; color:var(--blu); line-height:1.3; }
.cs-related-metric{ font-size:.9rem; color:var(--testo-m); }
.cs-footnote{ padding:0 0 40px; }
.cs-footnote p{ font-size:.8rem; color:var(--testo-m); border-top:1px solid var(--bordo); padding-top:20px; }
.cs-footnote a{ color:var(--viola); text-decoration:underline; }