/* ============================================================
   case-study.css — layout for belpico.com heritage case studies.
   Builds on tokens.css + base.css + site.css; adds only page chrome
   (sticky header bar, hero, evidence table, status pills, CTA band).
   ============================================================ */
.cs-body{background:var(--bg-dark);color:#e8edf5;}

/* --- Header bar --- */
.cs-header{position:sticky;top:0;z-index:50;background:rgba(10,15,26,.9);backdrop-filter:blur(10px);border-block-end:1px solid rgba(255,255,255,.08);}
.cs-header__inner{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-4);padding-block:var(--sp-3);}
.cs-header .brand img{display:block;height:34px;width:auto;}
.cs-header__actions{display:flex;align-items:center;gap:var(--sp-4);}
.cs-back{color:#c4cfe0;font-size:.85rem;font-weight:var(--fw-medium);text-decoration:none;white-space:nowrap;}
.cs-back:hover{color:#fff;text-decoration:underline;}
.cs-back::before{content:"← ";}

/* --- Hero --- */
.cs-hero{padding-block:clamp(var(--sp-8),9vw,var(--sp-12));border-block-end:1px solid rgba(255,255,255,.08);}
.cs-hero .eyebrow{color:var(--accent,#4aa3ff);}
.cs-hero h1{font-family:var(--font-display);font-size:clamp(2rem,5vw,3.2rem);line-height:1.08;margin:var(--sp-3) 0 var(--sp-5);max-width:20ch;}
.cs-hero .lead{color:#c4cfe0;max-width:60ch;font-size:1.05rem;}
.cs-hero__figure{margin-block-start:var(--sp-7);border-radius:var(--radius-lg);overflow:hidden;border:1px solid rgba(255,255,255,.1);}
.cs-hero__figure img{display:block;width:100%;height:clamp(220px,38vw,420px);object-fit:cover;object-position:center 38%;}

/* --- Sections on dark --- */
.cs-main .section{padding-block:clamp(var(--sp-8),7vw,var(--sp-10));}
.cs-main .section h2{font-family:var(--font-display);font-size:clamp(1.5rem,3.5vw,2rem);margin:0 0 var(--sp-6);color:#f3f6fb;}
.cs-band--muted{background:var(--bg-dark-2);border-block:1px solid rgba(255,255,255,.06);}

/* --- What this demonstrates --- */
.cs-points{list-style:none;margin:0;padding:0;display:grid;gap:var(--sp-4);max-width:70ch;}
.cs-points li{position:relative;padding-inline-start:1.8rem;color:#d3dbe8;line-height:1.55;}
.cs-points li::before{content:"";position:absolute;inset-inline-start:0;inset-block-start:.55em;width:.55rem;height:.55rem;border-radius:50%;background:var(--accent,#4aa3ff);}

/* --- Evidence table --- */
.cs-evidence-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;}
.cs-evidence{width:100%;border-collapse:collapse;min-width:520px;}
.cs-evidence th,.cs-evidence td{text-align:start;padding:var(--sp-4) var(--sp-4);border-block-end:1px solid rgba(255,255,255,.1);vertical-align:top;}
.cs-evidence thead th{font-size:.72rem;text-transform:uppercase;letter-spacing:.08em;color:#8a99b0;font-weight:var(--fw-semibold);}
.cs-evidence td:first-child{color:#eef2f8;font-weight:var(--fw-medium);}
.cs-evidence a{color:var(--accent,#4aa3ff);text-decoration:none;}
.cs-evidence a:hover{text-decoration:underline;}
.cs-status{display:inline-block;padding:.2rem .6rem;border-radius:999px;font-size:.72rem;font-weight:var(--fw-semibold);white-space:nowrap;background:rgba(74,163,255,.14);color:#8fc4ff;border:1px solid rgba(74,163,255,.3);}

/* --- Controlled-evidence note --- */
.cs-controlled{margin-block-start:var(--sp-7);padding:var(--sp-6);border-radius:var(--radius-lg);background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.1);max-width:70ch;}
.cs-controlled h3{margin:0 0 var(--sp-3);font-size:1.05rem;color:#f3f6fb;}
.cs-controlled p{margin:0;color:#c4cfe0;line-height:1.6;}

/* --- References --- */
.cs-refs{list-style:none;margin:var(--sp-4) 0 0;padding:0;display:grid;gap:var(--sp-2);}
.cs-refs a{color:var(--accent,#4aa3ff);text-decoration:none;font-size:.9rem;}
.cs-refs a:hover{text-decoration:underline;}

/* --- CTA band --- */
.cs-cta{text-align:center;}
.cs-cta h2{margin-block-end:var(--sp-5);}

/* --- Footer --- */
.cs-footer{padding-block:var(--sp-7);border-block-start:1px solid rgba(255,255,255,.08);color:#8a99b0;font-size:.85rem;text-align:center;}
.cs-footer a{color:#c4cfe0;text-decoration:none;}
.cs-footer a:hover{text-decoration:underline;}