/* Case study widgets — ACTS design (web 1440 / mobile 393) */
.cs-head,.cs-img,.cs-body{box-sizing:border-box}
.cs-head *,.cs-img *,.cs-body *{box-sizing:border-box}

/* ───────── 1) Article Header ───────── */
.cs-head{
	--cs-icon:14px;
	display:flex;
	align-items:flex-end;
	justify-content:space-between;
	gap:32px;
	padding:38px 64px 41px;
}
.cs-head-main{min-width:0}
.cs-head-eyebrow{margin:0 0 17px;font-size:14px;line-height:1.3;color:#4B4B4B}
.cs-head-title{margin:0;font-size:44px;font-weight:400;line-height:1.1;letter-spacing:-.015em;color:#191919}
.cs-head-link{
	display:inline-flex;
	align-items:center;
	gap:8px;
	flex:none;
	margin-bottom:-5px;
	font-size:16px;
	line-height:1.3;
	color:#12072D;
	text-decoration:none;
	white-space:nowrap;
}
.cs-head-link:hover{text-decoration:underline;text-underline-offset:3px}
.cs-arrow{display:inline-flex;width:var(--cs-icon,14px);height:var(--cs-icon,14px);font-size:var(--cs-icon,14px);line-height:1;flex:none}
.cs-arrow--custom i,.cs-arrow--custom svg{width:1em;height:1em;display:block;fill:currentColor}
.cs-head-link:hover .cs-arrow{transform:translateX(2px)}
.cs-arrow{transition:transform .2s ease}

/* ───────── 2) Image & Stats ───────── */
.cs-img{
	--cs-img-w:63.1%;
	--cs-img-h:623px;
	--cs-img-gap:40px;
	--cs-img-pad:64px;
	--cs-line:#E8E8E8;
	--cs-line-w:1px;
	display:grid;
	grid-template-columns:var(--cs-img-w) minmax(0,1fr);
	column-gap:var(--cs-img-gap);
	min-height:var(--cs-img-h);
}
.cs-img-media{position:relative;overflow:hidden;min-height:var(--cs-img-h);background:#EEE}
.cs-img-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.cs-img--noimg .cs-img-media{background:#E9E9E6}
.cs-img-body{display:flex;flex-direction:column;justify-content:space-between;min-width:0;padding:0 var(--cs-img-pad) 0 0}
.cs-img-text{margin:0;font-size:18px;line-height:25px;color:#4B4B4B}
.cs-img-stats{margin:24px 0 0;padding:0}
.cs-stat{padding:17px 0 15px;border-bottom:var(--cs-line-w,1px) solid var(--cs-line)}
.cs-stat:first-child{padding-top:0!important}
.cs-stat-num{margin:0;font-size:40px;font-weight:400;line-height:48px;letter-spacing:-.01em;color:#12072D}
.cs-stat-label{margin:10px 0 0;font-size:16px;line-height:1.2;color:#4B4B4B}

/* ───────── 3) Body & Sidebar ───────── */
.cs-body{
	--cs-body-w:786px;
	--cs-body-gap:54px;
	--cs-side-w:427px;
	--cs-sec-gap:22px;
	--cs-toc-top:120px;
	--cs-toc:#000000;
	--cs-toc-active:#12072D;
	display:grid;
	grid-template-columns:minmax(0,var(--cs-body-w));
	column-gap:var(--cs-body-gap);
	padding:62px 64px 63px 109px;
}
.cs-body--toc{grid-template-columns:minmax(0,var(--cs-body-w)) minmax(0,var(--cs-side-w))}
.cs-body-main{min-width:0}
.cs-sec{scroll-margin-top:var(--cs-toc-top)}
.cs-sec + .cs-sec{margin-top:var(--cs-sec-gap)}
.cs-sec-title{margin:0 0 15px;font-size:32px;font-weight:400;line-height:1.3;letter-spacing:-.01em;color:#000}
.cs-sec-text{font-size:14px;line-height:20px;color:#4B4B4B}
.cs-sec-text p{margin:0}
.cs-sec-text p + p{margin-top:20px}
.cs-sec-text strong,.cs-sec-text b{font-weight:500;color:#000}
.cs-sec-text ul,.cs-sec-text ol{margin:0;padding-left:21px}
.cs-sec-text ul{list-style:square}
.cs-sec-text li{margin:0;padding-left:0}
.cs-sec-text li::marker{font-size:.75em;color:#4B4B4B}
.cs-sec-text a{color:#2F80ED;text-decoration:underline;text-underline-offset:2px}
.cs-nums{
	display:grid;
	grid-template-columns:repeat(var(--cs-cols,4),minmax(0,1fr));
	gap:14px 32px;
	margin:15px 0 0;
	padding:0;
}
.cs-num-item{min-width:0}
.cs-num{margin:0;font-size:28px;font-weight:400;line-height:1.3;color:#000}
.cs-num-label{margin:8px 0 0;font-size:16px;line-height:1.3;color:#4B4B4B}
.cs-sec-after{margin-top:16px}

.cs-toc{min-width:0;position:relative;align-self:stretch}
.cs-toc-inner{position:static;top:var(--cs-toc-top);padding-top:11px}
.cs-toc-label{
	padding:0 0 8px;
	margin:0 0 8px;
	border-bottom:1px solid #E8E8E8;
	font-size:14px;
	line-height:1.3;
	text-transform:uppercase;
	color:#727272;
}
.cs-toc-list{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.cs-toc-list li{margin:0;padding:0}
.cs-toc-list a{display:flex;gap:6px;font-size:14px;line-height:18px;color:var(--cs-toc);text-decoration:none}
.cs-toc-text{font-size:13px}
.cs-toc-num{flex:none;color:#727272;font-variant-numeric:tabular-nums}
.cs-toc-list a.is-active,.cs-toc-list a.is-active .cs-toc-num,.cs-toc-list a:hover,.cs-toc-list a:hover .cs-toc-num{color:var(--cs-toc-active)}

/* ───────── Tablet ───────── */
@media(max-width:1024px){
	.cs-head{padding:32px}
	.cs-head-title{font-size:36px}
	.cs-img{--cs-img-w:55%;--cs-img-pad:32px;--cs-img-h:520px}
	.cs-body{padding:48px 32px}
	.cs-body--toc{grid-template-columns:minmax(0,1fr)}
	.cs-toc{display:none}
}

/* ───────── Mobile (393 frame) ───────── */
@media(max-width:767px){
	.cs-head{flex-direction:column;align-items:flex-start;gap:15px;padding:39px 16px 36px}
	.cs-head-eyebrow{font-size:12px;margin-bottom:13px}
	.cs-head-title{font-size:28px;line-height:1.22}
	.cs-head-link{white-space:normal;margin-bottom:0}

	.cs-img{display:block;min-height:0}
	.cs-img-media{min-height:0;height:var(--cs-img-h)}
	.cs-img-body{padding:16px;justify-content:flex-start}
	.cs-img-stats{margin-top:31px}
	.cs-stat{padding:8px 0 7px}
	.cs-stat-label{margin-top:11px}

	.cs-body{padding:38px 16px 40px}
	.cs-nums{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:16px}
}

/* Fixed sidebar while scrolling (JS-driven so it also works when the theme or
 * an Elementor container sets overflow:hidden, which breaks CSS sticky). */
.cs-body--sticky .cs-toc-inner{position:sticky;top:var(--cs-toc-top)}
.cs-body--sticky.cs-js-sticky .cs-toc-inner{position:relative;top:auto}
.cs-body--sticky.cs-js-sticky .cs-toc-inner.is-fixed{position:fixed;z-index:5}
.cs-body--sticky.cs-js-sticky .cs-toc-inner.is-bottom{position:absolute;left:0;right:0;bottom:0;top:auto}
@media(max-width:1024px){
	.cs-body--sticky .cs-toc-inner,
	.cs-body--sticky.cs-js-sticky .cs-toc-inner.is-fixed,
	.cs-body--sticky.cs-js-sticky .cs-toc-inner.is-bottom{position:static;width:auto!important;left:auto!important;top:auto!important}
}