/* Case pages as customer reports: summary card, key findings, an illustrated finding, numbered insights, sticky contents. Oct 2026. */
.cs-page{--cs-bg:#f7f4ef;--cs-ink:#211f1c;--cs-text:#35312d;--cs-muted:#655d56;--cs-line:#e2dad0;--cs-card:#fffdf9;--cs-acc:#a4502c;--cs-dot:#dc9672;background:var(--cs-bg);color:var(--cs-ink)}
.cs-shell{display:grid;grid-template-columns:220px minmax(0,720px) 210px;grid-template-areas:"card head toc" "card body toc";column-gap:56px;justify-content:center;padding:44px 0 96px}
.cs-head{grid-area:head}
.cs-card{grid-area:card;align-self:start;position:sticky;top:24px}
.cs-body{grid-area:body}
.cs-toc{grid-area:toc;align-self:start;position:sticky;top:24px;padding-top:6px}

/* Header */
.cs-crumbs{display:flex;flex-wrap:wrap;gap:8px;align-items:center;font-size:14px;color:var(--cs-muted)}
.cs-crumbs a{color:var(--cs-acc);font-weight:600;text-decoration:none}
.cs-crumbs a:hover{text-decoration:underline}
.cs-page .cs-head h1{margin:16px 0 18px;max-width:none;font-size:clamp(34px,4.1vw,52px);line-height:1.08;font-weight:500;letter-spacing:-.035em;color:var(--cs-ink)}
.cs-deck{font-size:19px;line-height:1.55;color:var(--cs-text);max-width:680px}
.cs-byline{display:flex;align-items:center;gap:12px;margin-top:26px}
.cs-byline img{width:48px;height:48px;border-radius:50%;object-fit:cover;object-position:50% 18%;flex:none}
.cs-byline strong{display:block;font-size:15px;font-weight:600;color:var(--cs-ink)}
.cs-byline span{display:block;font-size:14px;color:var(--cs-muted)}

/* Summary card (left) */
.cs-card{background:var(--cs-card);border:1px solid var(--cs-line);border-radius:14px;padding:22px 20px 20px;box-shadow:0 1px 2px rgba(33,31,28,.04),0 10px 30px rgba(33,31,28,.06)}
.cs-card__icon{width:56px;height:56px;border-radius:14px;background:#fbeee6;display:grid;place-items:center;color:var(--cs-acc)}
.cs-card__icon svg{width:30px;height:30px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.cs-card__name{margin:14px 0 16px;padding-bottom:16px;border-bottom:1px solid var(--cs-line);font-size:18px;line-height:1.25;font-weight:600;color:var(--cs-ink)}
.cs-card dl{margin:0;display:grid;gap:16px}
.cs-card dt{font:11px/1.3 var(--mono);text-transform:uppercase;letter-spacing:.06em;color:var(--cs-muted);margin-bottom:5px}
.cs-card dd{margin:0;font-size:15px;line-height:1.45;color:var(--cs-text)}
.cs-card dd a{color:var(--cs-acc);font-weight:600}
.cs-card ul{list-style:none;margin:0;padding:0;display:grid;gap:5px}
.cs-card li{position:relative;padding-left:14px;font-size:14px;line-height:1.4}
.cs-card li::before{content:"";position:absolute;left:0;top:.55em;width:6px;height:6px;border-radius:50%;background:var(--cs-dot)}

/* Body */
.cs-body{margin-top:40px}
.cs-body section{scroll-margin-top:24px}
.cs-page .cs-body h2{margin:60px 0 18px;font-size:clamp(26px,2.6vw,34px);line-height:1.15;font-weight:500;letter-spacing:-.03em;color:var(--cs-ink)}
.cs-body p{margin:0 0 18px;font-size:18px;line-height:1.7;color:var(--cs-text)}
.cs-keys{padding:26px 0 4px;border-top:1px solid var(--cs-line)}
.cs-page .cs-keys h2{margin:0 0 14px;font-size:18px;font-weight:600;letter-spacing:0}
.cs-keys ul{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.cs-keys li{position:relative;padding-left:22px;font-size:17px;line-height:1.5;color:var(--cs-text)}
.cs-keys li::before{content:"";position:absolute;left:2px;top:.6em;width:8px;height:8px;border-radius:50%;background:var(--cs-dot)}

/* The illustrated finding (report-style chart card) */
.cs-chart{margin:36px 0 8px;background:#fff;border:1px solid var(--cs-line);border-radius:14px;padding:24px 26px 18px;box-shadow:0 1px 2px rgba(33,31,28,.04),0 12px 32px rgba(33,31,28,.07)}
.cs-chart__title{font-size:20px;line-height:1.3;font-weight:600;color:var(--cs-ink)}
.cs-chart__plot{margin:18px 0;padding:30px 26px;background:var(--cs-bg);border-radius:10px}
.cs-chart__plot .ep-flow,.cs-chart__plot .ep-roles{margin:0;gap:26px}
.cs-chart__plot .ep-flow li,.cs-chart__plot .ep-roles span{min-height:84px;padding:16px 14px;background:var(--cs-card);border-color:#b6ada3;color:var(--cs-ink);font-size:13px;border-radius:6px}
.cs-chart__plot .ep-flow li+li::before{left:-13px;font-size:15px;color:#6b625b}
.cs-chart__plot small{font-size:12px!important;color:#6b625b!important}
.cs-chart__plot .ep-hot{border-color:var(--cs-acc)!important;color:var(--cs-acc)!important;background:#fbeee6!important;border-width:1.5px}
.cs-chart__compare{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.cs-chart__compare>div{border-top:2px solid var(--cs-line);padding-top:12px}
.cs-chart__compare .cs-chart__hot{border-top-color:var(--cs-dot)}
.cs-chart__label{display:block;font:11px/1.3 var(--mono);text-transform:uppercase;letter-spacing:.06em;color:var(--cs-muted);margin-bottom:6px}
.cs-chart__compare p{margin:0;font-size:16px;line-height:1.45;color:var(--cs-muted)}
.cs-chart__compare .cs-chart__hot p{color:var(--cs-ink);font-weight:600}
.cs-chart__foot{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-top:18px;padding-top:12px;border-top:1px solid var(--cs-line);font:11px/1.3 var(--mono);text-transform:uppercase;letter-spacing:.05em;color:#7a7169}

/* What we found: numbered insight rows */
.cs-insights{list-style:none;margin:0;padding:0}
.cs-insights li{display:grid;grid-template-columns:72px minmax(0,1fr);gap:8px;padding:22px 0;border-top:1px solid var(--cs-line)}
.cs-insights li:last-child{border-bottom:1px solid var(--cs-line)}
.cs-num{font-size:40px;line-height:1;font-weight:500;letter-spacing:-.04em;color:var(--cs-acc);font-variant-numeric:tabular-nums}
.cs-insights p{margin:0}
.cs-insights strong{display:block;margin-bottom:6px;font-size:19px;line-height:1.4;font-weight:600;color:var(--cs-ink)}

/* The principle: pull quote */
.cs-principle blockquote{margin:0;padding:6px 0 6px 26px;border-left:4px solid var(--cs-dot)}
.cs-principle blockquote p{font-size:clamp(21px,2.1vw,25px);line-height:1.45;font-weight:500;letter-spacing:-.01em;color:var(--cs-ink)}

/* Closing CTA */
.cs-cta{margin-top:64px;padding:36px 36px 38px;border-radius:14px;background:#0b1218;color:#f3f1ee}
.cs-page .cs-cta h2{margin:0 0 12px;color:#f3f1ee;font-size:clamp(26px,2.6vw,34px);font-weight:500;letter-spacing:-.03em}
.cs-cta p{color:#c9d0d5;font-size:17px;margin-bottom:24px}

/* Contents (right) */
.cs-toc>p{margin:0 0 12px;font-size:17px;font-weight:600;color:var(--cs-ink)}
.cs-toc ol{list-style:none;margin:0;padding:0;border-left:1px solid var(--cs-line)}
.cs-toc a{display:block;margin-left:-1px;padding:7px 0 7px 14px;border-left:2px solid transparent;font-size:14px;line-height:1.35;color:var(--cs-muted);text-decoration:none}
.cs-toc a:hover{color:var(--cs-ink)}
.cs-toc a[aria-current]{color:var(--cs-acc);border-left-color:var(--cs-acc);font-weight:600}

/* More client work */
.cs-more{background:var(--bg);color:var(--ink);padding:76px 0 84px}
.cs-more__head{display:flex;justify-content:space-between;align-items:baseline;gap:16px;flex-wrap:wrap;margin-bottom:26px}
.cs-more__head h2{font-size:clamp(28px,3vw,40px)}

@media (max-width:1180px){
 .cs-shell{grid-template-columns:210px minmax(0,1fr);grid-template-areas:"card head" "card body";column-gap:44px}
 .cs-toc{display:none}
}
@media (max-width:860px){
 .cs-shell{grid-template-columns:minmax(0,1fr);grid-template-areas:"head" "card" "body";padding:28px 0 64px}
 .cs-card{position:static;margin-top:28px;display:grid;grid-template-columns:56px minmax(0,1fr);column-gap:14px;align-items:center}
 .cs-card__name{margin:0;padding:0;border:0}
 .cs-card dl{grid-column:1/-1;margin-top:18px;padding-top:16px;border-top:1px solid var(--cs-line)}
 .cs-body{margin-top:32px}
 .cs-page .cs-body h2{margin-top:48px}
}
@media (max-width:600px){
 .cs-deck{font-size:17px}
 .cs-body p{font-size:17px}
 .cs-chart{padding:18px 16px 14px;margin-left:-4px;margin-right:-4px}
 .cs-chart__plot{padding:16px 12px}
 .cs-chart__plot .ep-flow,.cs-chart__plot .ep-roles{gap:16px}
 .cs-chart__plot .ep-flow li,.cs-chart__plot .ep-roles span{min-height:0;padding:10px 8px;font-size:11px}
 .cs-chart__plot .ep-flow li+li::before{left:-8px;font-size:12px}
 .cs-chart__plot small{font-size:10px!important}
 .cs-chart__compare{grid-template-columns:1fr}
 .cs-insights li{grid-template-columns:44px minmax(0,1fr)}
 .cs-num{font-size:28px}
 .cs-insights strong{font-size:17px}
 .cs-principle blockquote{padding-left:18px}
 .cs-cta{padding:28px 22px 30px}
}
.cs-more .v2-cases{grid-template-columns:repeat(3,minmax(0,1fr))}
.cs-more .v2-case{grid-column:auto}
@media (max-width:980px){.cs-more .v2-cases{grid-template-columns:1fr}}
.cs-page .cs-body .cs-keys h2{margin:0 0 14px}