/* Shared case-study layout. Directions set the tokens: --bg --ink --mute --line --panel --accent --display --sans */
.cs{--read:680px;--wide:1120px;padding:0 20px}
.cs-head{max-width:var(--wide);margin:0 auto;padding:clamp(120px,16vh,170px) 0 48px;text-align:center}
.cs-back{display:inline-block;font:500 14px/1 var(--sans);color:var(--mute);text-decoration:none;margin-bottom:36px}
.cs-back:hover{color:var(--ink)}
.cs-company{font:500 14px/1 var(--sans);color:var(--accent);margin-bottom:18px}
.cs-title{font:var(--cs-title-font, 600 clamp(40px,5.4vw,72px)/1.02 var(--display));letter-spacing:var(--cs-title-ls,-.04em);max-width:16ch;margin:0 auto 22px;text-wrap:balance}
.cs-lead{font:400 clamp(18px,1.5vw,21px)/1.5 var(--sans);color:var(--mute);max-width:40ch;margin:0 auto;text-wrap:pretty}
.cs-meta{max-width:var(--wide);margin:0 auto;display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.cs-meta>div{padding:22px 20px 24px 0}
.cs-meta dt{font:500 13px/1 var(--sans);color:var(--mute);margin-bottom:12px}
.cs-meta dd{margin:0;font:400 15px/1.55 var(--sans)}
.cs-metrics{max-width:var(--wide);margin:0 auto;display:flex;gap:clamp(32px,7vw,96px);padding:44px 0}
.cs-metrics dt{font:600 clamp(40px,4.6vw,60px)/1 var(--sans);letter-spacing:-.04em}
.cs-metrics dd{margin:10px 0 0;font:400 14px/1.4 var(--sans);color:var(--mute);max-width:22ch}
.cs-cover{max-width:var(--wide);margin:12px auto 0;border-radius:20px;overflow:hidden;background:var(--panel)}
.cs-cover img{width:100%}
.cs-disc{max-width:var(--wide);margin:14px auto 0;font:400 13px/1.5 var(--sans);color:var(--mute)}
.cs-body{max-width:var(--wide);margin:0 auto;padding:96px 0 40px;display:grid;grid-template-columns:200px minmax(0,var(--read));justify-content:space-between;gap:48px}
.cs-toc{position:sticky;top:96px;align-self:start;display:flex;flex-direction:column}
.cs-toc a{font:400 14px/1.3 var(--sans);color:var(--mute);text-decoration:none;padding:7px 0 7px 14px;border-left:1px solid var(--line);text-transform:lowercase}
.cs-toc a::first-letter{text-transform:uppercase}
.cs-toc a.on{color:var(--ink);border-left-color:var(--ink)}
.cs-sec{padding-bottom:72px;scroll-margin-top:96px}
.cs-label{font:500 13px/1 var(--sans);letter-spacing:.06em;text-transform:uppercase;color:var(--accent);margin-bottom:16px}
.cs-h{font:600 clamp(26px,2.4vw,34px)/1.18 var(--sans);letter-spacing:-.025em;margin-bottom:22px;text-wrap:balance}
.cs-p{font:400 17px/1.7 var(--sans);color:var(--body,var(--ink));margin-bottom:16px;text-wrap:pretty}
.cs-list{font:400 17px/1.7 var(--sans);color:var(--body,var(--ink));margin:0 0 16px;padding-left:26px;text-wrap:pretty}
ul.cs-list{list-style:disc}
ol.cs-list{list-style:decimal}
.cs-list li+li{margin-top:2px}
.cs-quote{margin:32px 0;font:400 17px/1.7 var(--sans);text-align:center;text-wrap:pretty}
.cs-quote-text{font:italic 600 17px/1.7 var(--sans);color:var(--accent)}
.cs-quote-source{margin-top:32px;font:400 17px/1.7 var(--sans);color:var(--body,var(--ink))}
.cs-sub{font:600 20px/1.3 var(--sans);letter-spacing:-.015em;margin:36px 0 12px}
.cs-cap{font:500 13px/1.4 var(--sans);color:var(--mute);margin:32px 0 -6px}
.cs-fig{margin:24px 0;border-radius:16px;overflow:hidden;background:var(--panel);display:grid;place-items:center;padding:clamp(12px,2vw,24px)}
.cs-fig img,.cs-fig video{width:auto;max-width:100%;max-height:80vh;border-radius:8px}
.cs-next{max-width:var(--wide);margin:0 auto;padding:40px 0 100px;border-top:1px solid var(--line)}
.cs-next .cs-label{margin:24px 0 20px}
.cs-next .fcw{max-width:740px}
@media (max-width:900px){.cs-meta{grid-template-columns:1fr 1fr}.cs-body{grid-template-columns:1fr;padding-top:64px}.cs-toc{display:none}.cs-metrics{flex-direction:column;gap:24px}}