/* ==========================================================================
   Case studies (overview grid, cards, report CTA)
   Source: Figma "Opti-mized website 3.0" — Case Studies - Desktop (11190:58751)
   Desktop design is 1920 wide; content column 1395px. Responsive below.
   Detail pages reuse the legacy case study classes in custom-style.css.
   ========================================================================== */

.opti-case-study-view { --cs-navy: #0d1758; --cs-dark: #0f1e28; --cs-ink: #14171c; --cs-green: #1fab3d; }

/* ---------- Overview ---------- */
.cs-overview { position: relative; overflow: hidden; padding: 126px 24px 120px; }
.cs-overview__inner { position: relative; max-width: 1403px; margin: 0 auto; }
.cs-overview__head { position: relative; padding-left: 9px; }
.cs-overview__title {
	font-family: 'Plus Jakarta Sans', 'Averta CY', sans-serif; font-weight: 600;
	font-size: 64px; line-height: normal; color: var(--cs-dark); margin: 0;
}
.cs-overview__logo { position: absolute; right: -255px; top: -77px; width: 493px; max-width: none; pointer-events: none; opacity: 1; }
.cs-overview__rule { border: 0; border-top: 1px solid rgba(13, 23, 88, .08); margin: 110px 0 124px; }
.cs-overview__blob { position: absolute; border-radius: 50%; pointer-events: none; }
.cs-overview__blob--a { width: 243px; height: 243px; left: -121.5px; top: 1393px; border: 1px solid rgba(0, 162, 232, .55); }
.cs-overview__blob--b { width: 412px; height: 412px; left: calc(50% + 710px); top: 559px; background: radial-gradient(circle, rgba(152, 195, 85, .07), rgba(152, 195, 85, 0) 70%); }
.cs-overview__blob--c { width: 235px; height: 234px; left: calc(50% + 863px); top: 662px; border: 1px solid rgba(152, 195, 85, .55); }

.cs-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 449px)); gap: 32px 24px; justify-content: center; }

/* ---------- Card ---------- */
.cs-card {
	display: flex; flex-direction: column; align-items: center; gap: 24px;
	height: 550px; padding: 24px 32px; overflow: hidden;
	background: #fff; border-radius: 32px; box-shadow: 0 3px 24px 4px rgba(13, 23, 88, .04);
	backdrop-filter: blur(8px); text-decoration: none !important; color: inherit;
	transition: transform .2s ease, box-shadow .2s ease;
}
.cs-card:hover { transform: translateY(-4px); box-shadow: 0 10px 32px 4px rgba(13, 23, 88, .08); }
.cs-card__top { display: flex; justify-content: space-between; align-items: flex-start; width: 100%; min-height: 52px; }
.cs-card__logo { height: 52px; width: auto; max-width: 180px; object-fit: contain; object-position: left center; }
.cs-card__arrow { display: flex; align-items: center; padding: 16px; border-radius: 100px; background: #fafafa; flex-shrink: 0; }
.cs-card__arrow img { display: block; width: 20px; height: 20px; }
.cs-card__building { height: 150px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; max-width: 100%; }
.cs-card__building img { display: block; height: 150px; width: auto; max-width: 100%; object-fit: contain; }
.cs-card__title {
	flex: 1 0 0; width: 100%; margin: 0;
	font-family: 'Plus Jakarta Sans', 'Averta CY', sans-serif; font-weight: 700;
	font-size: 24px; line-height: 1.4; color: var(--cs-navy); text-align: center;
}
.cs-card__foot { display: flex; flex-direction: column; align-items: flex-start; gap: 24px; width: 100%; }
.cs-card__stats { display: flex; align-items: center; justify-content: space-between; width: 100%; }
.cs-card__stat { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.cs-card__value { display: flex; align-items: center; gap: 6px; font-family: 'Averta CY', sans-serif; font-weight: 700; line-height: 1.24; white-space: nowrap; }
.cs-card__value > img { display: block; flex-shrink: 0; }
.cs-card__num { font-size: 32px; }
.cs-card__pct { font-size: 20.64px; font-weight: 400; }
.cs-card__roi { display: flex; align-items: flex-start; }
.cs-card__unit { font-size: 12.9px; font-weight: 400; }
.cs-card__value--green { color: #4a9a77; }
.cs-card__value--blue { color: #00a2e8; }
.cs-card__value--orange { color: #ff7f27; }
.cs-card__label { font-family: 'Averta CY', sans-serif; font-weight: 400; font-size: 15px; line-height: 1.4; color: rgba(13, 23, 88, .6); white-space: nowrap; }
.cs-card__vdiv { display: flex; align-items: center; justify-content: center; width: 0; height: 64px; flex-shrink: 0; }
.cs-card__vdiv img { width: 64px; height: 1px; max-width: none; transform: rotate(90deg); }
.cs-card__hr { display: block; width: 100%; height: 1px; }
.cs-card__tag {
	display: inline-flex; align-items: center; gap: 4px; padding: 10px 16px; border-radius: 100px;
	background: rgba(31, 171, 61, .08); color: var(--cs-green);
	font-family: 'Averta CY', sans-serif; font-weight: 400; font-size: 16px; line-height: 1.6;
}
.cs-card__tag img { width: 20px; height: 20px; }

/* ---------- Report CTA ---------- */
.cs-cta-wrap { padding: 116px 24px 76px; }
.cs-cta {
	position: relative; max-width: 1520px; margin: 0 auto; min-height: 845px;
	display: flex; align-items: center; gap: 60px; padding: 80px 128px;
	background: rgba(31, 171, 61, .08); border-radius: 48px;
}
.cs-cta__content { display: flex; flex-direction: column; gap: 48px; width: 605px; max-width: 100%; position: relative; z-index: 1; }
.cs-cta__title {
	font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 800; font-size: 48px; line-height: 1.48;
	color: var(--cs-ink); margin: 0; width: 658px; max-width: none;
}
.cs-cta__title span { color: var(--cs-green); display: block; }
.cs-cta__lead { font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 500; font-size: 20px; line-height: 1.64; color: #1c2838; max-width: 530px; margin: -16px 0 0; }
.cs-cta__features { display: flex; gap: 10px; list-style: none; margin: 0; padding: 0; }
.cs-cta__features li {
	flex: 1 0 0; display: flex; flex-direction: column; gap: 16px; align-items: flex-start;
	font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 800; font-size: 20px; line-height: 1.32; color: var(--cs-ink);
}
.cs-cta__icon { display: flex; align-items: center; justify-content: center; padding: 16px; border-radius: 100px; }
.cs-cta__icon img { display: block; }
.cs-cta__icon--green { background: rgba(31, 171, 61, .08); }
.cs-cta__icon--blue { background: rgba(19, 83, 233, .08); }
.cs-cta__icon--orange { background: rgba(255, 127, 39, .08); }
.cs-cta__gear { width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; }
.cs-cta__actions { display: flex; gap: 10px; flex-wrap: nowrap; }
.cs-cta__btn {
	display: inline-flex; align-items: center; justify-content: center; gap: 24px; height: 64px; border-radius: 100px;
	font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 700; font-size: 20px; letter-spacing: .2px; line-height: 1.64;
	text-decoration: none !important; white-space: nowrap; transition: filter .2s ease;
}
.cs-cta__btn:hover { filter: brightness(.95); }
.cs-cta__btn--primary { background: var(--cs-green); color: #fff !important; padding: 6px 6px 6px 32px; }
.cs-cta__btn-icon { display: flex; align-items: center; justify-content: center; width: 52px; height: 52px; border-radius: 100px; background: #fff; }
.cs-cta__btn--secondary { background: #fff; color: #1c2838 !important; padding: 6px 32px; }
.cs-cta__note { font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 500; font-size: 20px; line-height: 1.64; color: rgba(28, 40, 56, .7); margin: -32px 0 0; }
.cs-cta__media { position: absolute; left: 880.58px; top: 50%; transform: translateY(-50%); width: 586px; }
.cs-cta__report {
	display: block; width: 586px; height: 764px; object-fit: cover; object-position: top;
	filter: drop-shadow(0 13px 29px rgba(0,0,0,.1)) drop-shadow(0 53px 53px rgba(0,0,0,.09));
}
.cs-cta__alert {
	position: absolute; left: 322.4px; top: -157px; width: 413px;
	display: flex; flex-direction: column; gap: 24px; padding: 16px 16px 32px;
	background: #fff; border: 2px solid #ff7f27; border-radius: 32px;
	box-shadow: 0 45px 13.5px rgba(0,0,0,.03), 0 81px 16px rgba(0,0,0,.01);
}
.cs-cta__alert-head {
	display: flex; align-items: center; gap: 20px; padding: 8px 32px 8px 8px; border-radius: 100px;
	background: rgba(255, 127, 39, .12);
	font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 700; font-size: 24px; line-height: 1.32; color: var(--cs-ink); white-space: nowrap;
}
.cs-cta__alert-icon { display: flex; padding: 16px; border-radius: 100px; background: #ff7f27; }
.cs-cta__alert p { font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 500; font-size: 20px; line-height: 1.64; color: var(--cs-ink); margin: 0; padding: 0 16px; max-width: 338px; }
.cs-cta__alert strong { font-weight: 800; }

/* Hide the legacy CTA if any legacy template markup is still present on a CPT page */
.single-case_study .box_color { display: none; }

/* ---------- Responsive ---------- */
@media (max-width: 1599px) {
	.cs-overview__logo { right: -120px; width: 380px; }
	.cs-cta { padding: 64px; }
	.cs-cta__media { left: auto; right: 64px; width: 480px; }
	.cs-cta__report { width: 480px; height: auto; }
	.cs-cta__alert { left: auto; right: -40px; }
}
@media (max-width: 1440px) {
	.cs-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.cs-card { padding: 24px; height: auto; min-height: 550px; }
	.cs-card__num { font-size: 28px; }
	.cs-card__label { font-size: 13px; }
}
@media (max-width: 1199px) {
	.cs-cta__actions { flex-wrap: wrap; }
	.cs-cta__title { width: auto; max-width: 100%; }
	.cs-overview { padding-top: 90px; }
	.cs-overview__title { font-size: 52px; }
	.cs-overview__logo { display: none; }
	.cs-overview__rule { margin: 48px 0 56px; }
	.cs-overview__blob { display: none; }
	.cs-grid { grid-template-columns: repeat(2, minmax(0, 449px)); }
	.cs-card { min-height: 0; }
	.cs-card__title { flex: 0 0 auto; }
	.cs-card__foot { margin-top: auto; }
	.cs-cta { flex-direction: column; align-items: stretch; min-height: 0; padding: 56px 48px 48px; gap: 48px; }
	.cs-cta__content { width: 100%; }
	.cs-cta__media { position: relative; left: auto; right: auto; top: auto; transform: none; width: 100%; max-width: 480px; margin: 120px auto 0; }
	.cs-cta__report { width: 100%; }
	.cs-cta__alert { right: -24px; top: -120px; }
}
@media (max-width: 767px) {
	.cs-overview { padding: 64px 16px 64px; }
	.cs-overview__title { font-size: 40px; }
	.cs-overview__rule { margin: 32px 0 40px; }
	.cs-grid { grid-template-columns: minmax(0, 449px); gap: 24px; }
	.cs-card { padding: 24px 20px; border-radius: 24px; }
	.cs-card__title { font-size: 20px; }
	.cs-card__num { font-size: 26px; }
	.cs-card__pct { font-size: 17px; }
	.cs-card__label { font-size: 12px; }
	.cs-card__building, .cs-card__building img { height: auto; max-height: 150px; }
	.cs-cta-wrap { padding: 48px 16px 64px; }
	.cs-cta { padding: 40px 20px 32px; border-radius: 32px; gap: 32px; }
	.cs-cta__content { gap: 32px; }
	.cs-cta__title { font-size: 32px; }
	.cs-cta__lead, .cs-cta__note { font-size: 16px; margin: 0; }
	.cs-cta__features { flex-wrap: wrap; gap: 20px; }
	.cs-cta__features li { flex: 1 1 40%; font-size: 16px; }
	.cs-cta__btn { width: 100%; font-size: 17px; height: 56px; }
	.cs-cta__btn-icon { width: 44px; height: 44px; }
	.cs-cta__media { margin-top: 140px; }
	.cs-cta__alert { position: absolute; left: 50%; right: auto; transform: translateX(-50%); top: -130px; width: calc(100% + 8px); max-width: 360px; padding: 12px 12px 20px; gap: 12px; }
	.cs-cta__alert-head { font-size: 18px; gap: 12px; padding-right: 16px; }
	.cs-cta__alert-icon { padding: 10px; }
	.cs-cta__alert p { font-size: 16px; }
}
@media (max-width: 380px) {
	.cs-card__stats { flex-wrap: wrap; justify-content: center; gap: 12px; }
	.cs-card__vdiv { display: none; }
}

/* ==========================================================================
   Case study detail body (Figma "Frame 2072751060", 1535px wide at 1920)
   ========================================================================== */
.csd { --ink:#1a1c27; --body:#3b3f59; display:flex; gap:64px; align-items:flex-start; max-width:1535px; margin:100px auto 0; --csd-side-w:clamp(290px, 21.46vw, 412px); --csd-text:clamp(14px, 1.0417vw, 20px); padding:0 24px; box-sizing:content-box; font-family:'Averta CY',sans-serif; }
.csd *, .csd *::before, .csd *::after { box-sizing:border-box; }
.csd hr { border:0; border-top:1px solid rgba(13,23,88,.12); margin:0; width:100%; opacity:1; }

/* Sidebar: 412px column, sticky; no extra height below it */
.csd-side { flex:0 0 var(--csd-side-w); width:var(--csd-side-w); align-self:stretch; }
.csd-side__sticky { position:sticky; top:0; padding-top:140px; display:flex; flex-direction:column; gap:12px; }
.csd-side__card { border:1px solid #e1e3ef; border-radius:32px; padding:32px; display:flex; flex-direction:column; gap:16px; background:#fff; }
.csd-side__title { font-family:'Plus Jakarta Sans',sans-serif; font-weight:700; font-size:27px; line-height:1.48; color:#14171c; margin:0; }
.csd-side__text { font-family:'Plus Jakarta Sans',sans-serif; font-weight:500; font-size:20px; line-height:1.64; color:#1c2838; margin:0; }
.csd-side__pills { list-style:none; margin:4px 0 0; padding:0; display:flex; flex-wrap:wrap; gap:12px; }
.csd-side__pills li { display:inline-flex; align-items:center; gap:12px; padding:4px 16px 4px 4px; border-radius:100px; background:rgba(88,174,106,.12); font-family:'Plus Jakarta Sans',sans-serif; font-weight:600; font-size:16px; line-height:1.64; color:#14171c; white-space:nowrap; }
.csd-side__report { background:rgba(88,174,106,.08); border-radius:24px; padding:32px; display:flex; flex-direction:column; gap:24px; align-items:flex-start; }
.csd-side__report-img { width:192.756px; height:250.655px; object-fit:cover; margin-bottom:8px; }
.csd-side__btn { display:inline-flex; align-items:center; height:64px; padding:16px 32px; border-radius:100px; background:#58ae6a; color:#fff !important; font-family:'Plus Jakarta Sans',sans-serif; font-weight:700; font-size:20px; letter-spacing:.2px; text-decoration:none !important; }
.csd-side__btn:hover { background:#4c9c5d; }

.csd-main { flex:1 1 0; min-width:0; display:flex; flex-direction:column; gap:60px; }

/* Story groups: photo + two overlapping cards */
.csd-story { position:relative; }
.csd-story__photo { display:block; width:100%; height:736px; object-fit:cover; object-position:bottom; border-radius:40px; }
.csd-story--2 .csd-story__photo { height:641px; }
.csd-story__cards { position:relative; display:flex; gap:24px; align-items:stretch; margin:-212px -12.5px 0; padding:10px; }
.csd-story--2 .csd-story__cards { margin:-118px 0 0; padding:0; }
.csd-card { flex:1 1 0; min-width:0; background:#fff; border:1px solid var(--csd-border); border-radius:24px; padding:40px 32px; display:flex; flex-direction:column; gap:32px; }
.csd-card__head { display:flex; flex-direction:column; gap:24px; padding-bottom:24px; border-bottom:1px solid rgba(13,23,88,.12); }
.csd-card__titlebar { display:flex; align-items:center; gap:16px; }
.csd-card__icon { flex:0 0 64px; width:64px; height:64px; border-radius:100px; display:flex; align-items:center; justify-content:center; }
.csd-card__icon img { width:40px; height:40px; }
.csd-card__title { font-family:'Averta CY',sans-serif; font-weight:700; font-size:32px; line-height:1.6; color:var(--ink); margin:0; }
.csd-card__subtitle { font-weight:700; font-size:20px; line-height:1.6; color:var(--ink); margin:0; }
.csd-rich { display:flex; flex-direction:column; gap:16px; font-size:20px; line-height:1.6; color:var(--body); font-weight:400; }
.csd-rich p { margin:0; }
.csd-rich .cs-semi { font-weight:700; }
.csd-rich ul { margin:0; padding-left:30px; }
.csd-rich .cs-callout { border-left:3px solid; padding:10px 10px 10px 16px; display:flex; flex-direction:column; gap:16px; }
.csd-rich .cs-callout ul { padding-left:24px; }

.csd-divider { display:flex; align-items:center; gap:24px; }
.csd-divider span { flex:1; border-top:1px solid rgba(13,23,88,.12); }

/* Why it matters + Smarter energy usage */
.csd-matters { display:flex; gap:24px; border:1px solid rgba(31,171,61,.5); border-radius:24px; align-items:stretch; }
.csd-matters__text { flex:1 1 0; min-width:0; padding:32px 40px; display:flex; flex-direction:column; gap:32px; }
.csd-matters__text header { display:flex; flex-direction:column; gap:8px; }
.csd-matters__subtitle { font-weight:400; font-size:24px; line-height:1.6; color:#0f1e28; margin:0; }
.csd-matters__usage { flex:1 1 0; min-width:0; display:flex; flex-direction:column; justify-content:center; gap:16px; padding:24px 16px 24px 0; }
.csd-usage__title { font-weight:700; font-size:46px; line-height:1.32; color:var(--ink); margin:0; letter-spacing:-.3px; }
.csd-usage__title span { color:#1fab3d; }
.csd-usage__card { display:flex; flex-direction:column; gap:16px; padding:32px; border-radius:24px; }
.csd-usage__logo { width:105px; height:40px; }
.csd-usage__building { width:363px; max-width:100%; height:auto; }
.csd-usage__card hr { margin:16px 0; }
.csd-usage__stats { display:flex; align-items:center; justify-content:space-between; }
.csd-usage__stats > div { display:flex; flex-direction:column; align-items:center; gap:6px; }
.csd-usage__stats > i { width:1px; height:64px; background:rgba(13,23,88,.16); }
.csd-usage__stats p { margin:0; font-size:12px; line-height:1.4; color:rgba(13,23,88,.6); white-space:nowrap; }
.csd-usage__v { display:flex; align-items:center; gap:6px; font-weight:700; line-height:1.24; white-space:nowrap; }
.csd-usage__v b { font-size:40px; font-weight:700; }
.csd-usage__v small { font-size:25.8px; font-weight:400; }
.csd-usage__roi { display:flex; align-items:flex-start; }
.csd-usage__roi em { font-style:normal; font-weight:400; font-size:12.9px; }
.csd-g { color:#4a9a77; } .csd-b { color:#00a2e8; } .csd-o { color:#ff7f27; }

/* Energy loss types */
.csd-loss { display:flex; flex-direction:column; gap:48px; }
.csd-loss__title { font-weight:700; font-size:32px; line-height:1.32; color:var(--ink); text-align:center; margin:0; }
.csd-loss__grid { display:flex; gap:32px; align-items:flex-start; }
.csd-loss__left, .csd-loss__types { flex:1 1 0; min-width:0; display:flex; flex-direction:column; gap:16px; }
.csd-loss__left { align-self:stretch; }
.csd-loss__summary, .csd-loss__detected { background:#fff; border:1px solid rgba(13,23,88,.12); border-radius:24px; filter:drop-shadow(0 3px 12px rgba(13,23,88,.04)); }
.csd-loss__summary { display:flex; gap:32px; align-items:stretch; padding:16px 16px 16px 32px; }
.csd-loss__summary-text { flex:1 1 0; display:flex; flex-direction:column; gap:24px; padding:16px 0; }
.csd-loss__count { display:flex; align-items:center; gap:24px; }
.csd-loss__count strong { font-size:48px; line-height:1.24; color:#ff7f27; font-weight:700; }
.csd-loss__count span { font-size:20px; color:rgba(26,28,39,.6); }
.csd-loss__summary-text p { margin:0; font-size:20px; line-height:1.6; color:var(--body); }
.csd-loss__donut { flex:0 0 222px; background:#fafafa; border-radius:16px; padding:24px; display:flex; align-items:center; justify-content:center; }
.csd-loss__donut img { width:174px; height:174px; max-width:100%; }
.csd-loss__detected { display:flex; flex-direction:column; gap:20px; padding:24px 32px; min-height:360px; }
.csd-loss__detected h3 { margin:0; padding:0 4px; font-size:20px; font-weight:400; color:rgba(26,28,39,.8); }
.csd-loss__detected ul { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:16px; flex:1; }
.csd-bar { flex:1; display:flex; gap:8px; align-items:center; padding:12px 16px; border-radius:16px; }
.csd-bar--1 { background:rgba(6,28,54,.08); } .csd-bar--2 { background:rgba(194,24,29,.08); } .csd-bar--3 { background:rgba(79,91,103,.08); } .csd-bar--4 { background:rgba(93,14,10,.08); }
.csd-bar__label { flex:1 1 0; display:flex; align-items:center; gap:8px; font-size:20px; color:var(--ink); line-height:1.2; }
.csd-bar__label img { flex:0 0 20px; }
.csd-bar__track { flex:1 1 0; align-self:center; height:24px; background:#fff; border-radius:16px; padding:2px; display:flex; }
.csd-bar__fill { display:block; border-radius:16px; box-shadow:0 3px 24px 4px rgba(13,23,88,.08); }
.csd-type { display:flex; gap:40px; align-items:flex-start; padding:32px 40px; border-radius:24px; }
.csd-type--1 { background:rgba(6,28,54,.06); } .csd-type--2 { background:rgba(194,24,29,.04); } .csd-type--3 { background:rgba(79,91,103,.04); } .csd-type--4 { background:rgba(93,14,10,.04); }
.csd-type img { flex:0 0 48px; }
.csd-type h3 { margin:0 0 8px; font-size:24px; font-weight:700; color:var(--ink); }
.csd-type p { margin:0; font-size:20px; line-height:1.6; color:var(--body); }

/* Slider */
.csd-slider { display:flex; flex-direction:column; gap:32px; align-items:center; padding:10px; }
.csd-slider__viewport { width:100%; overflow:hidden; scroll-snap-type:x mandatory; }
.csd-slider__track { display:flex; gap:24px; }
.csd-slide { flex:0 0 calc((100% - 24px) * 0.7255); scroll-snap-align:start; background:#fff; border:1px solid #ebebeb; border-radius:32px; padding:32px 40px; display:flex; flex-direction:column; gap:24px; }
.csd-slide__title { font-family:'Plus Jakarta Sans',sans-serif; font-weight:700; font-size:27px; line-height:1.24; letter-spacing:.81px; color:#0d1758; margin:0; }
.csd-slide__sub { font-family:'Plus Jakarta Sans',sans-serif; font-weight:700; font-size:24px; line-height:1.4; color:#0f1e28; border-left:4px solid; padding:10px 20px; margin:0; }
.csd-slide__body { font-size:20px; line-height:1.6; color:#0f1e28; }
.csd-slide__body p { margin:0 0 24px; } .csd-slide__body p:last-child { margin:0; }
.csd-slide__body ul { margin:0 0 24px; padding-left:30px; }
.csd-slide__btn { align-self:flex-start; background:#0f1e28; color:#fff !important; border-radius:100px; padding:20px 40px; font-weight:700; font-size:20px; line-height:1.4; text-decoration:none !important; }
.csd-slider__nav { display:flex; align-items:center; gap:24px; }
.csd-slider__arrow { width:56px; height:56px; border-radius:50px; display:flex; align-items:center; justify-content:center; border:1.5px solid #3b3f59; background:#fff; cursor:pointer; }
.csd-slider__arrow--next { background:#6285fb; border-color:#6285fb; }
.csd-slider__dots { display:flex; gap:8px; }
.csd-slider__dots button { width:8px; height:8px; border-radius:8px; border:0; padding:0; background:rgba(13,23,88,.2); cursor:pointer; }
.csd-slider__dots button.is-active { width:24px; background:#6285fb; }

/* Detail responsive */
@media (max-width: 1599px) {
	.csd { gap:40px; }
	.csd-usage__title { font-size:40px; }
}
@media (max-width:1199px) {
	.csd { display:block; }
	.csd-side { display:none; } /* sidebar content is repeated in the report CTA below */
	.csd-story__cards { margin:-160px 0 0; padding:0 16px; }
	.csd-matters { flex-direction:column; }
	.csd-matters__usage { padding:0 40px 32px; }
	.csd-slide { flex-basis:85%; }
}
@media (max-width: 991px) {
	.csd-story__photo, .csd-story--2 .csd-story__photo { height:420px; border-radius:24px; }
	.csd-story__cards, .csd-story--2 .csd-story__cards { flex-direction:column; margin:-80px 12px 0; padding:0; }
	.csd-loss__grid { flex-direction:column; }
	.csd-loss__left, .csd-loss__types { width:100%; }
}
@media (max-width: 767px) {
	.csd { margin-top:32px; padding:0 16px; }
	.csd-main { gap:40px; }
	.csd-story__photo, .csd-story--2 .csd-story__photo { height:260px; }
	.csd-story__cards, .csd-story--2 .csd-story__cards { margin:-48px 8px 0; }
	.csd-card { padding:28px 20px; gap:24px; }
	.csd-card__title { font-size:24px; }
	.csd-card__icon { flex-basis:48px; width:48px; height:48px; } .csd-card__icon img { width:28px; height:28px; }
	.csd-rich, .csd-card__subtitle, .csd-type p, .csd-loss__summary-text p, .csd-slide__body { font-size:16px; }
	.csd-matters__text { padding:24px 20px; }
	.csd-matters__subtitle { font-size:19px; }
	.csd-matters__usage { padding:0 20px 24px; }
	.csd-usage__title { font-size:32px; white-space:normal; }
	.csd-usage__card { padding:16px 0; }
	.csd-usage__v b { font-size:28px; } .csd-usage__v small { font-size:18px; } .csd-usage__v img { width:28px; height:28px; }
	.csd-loss__title { font-size:26px; }
	.csd-loss__summary { flex-direction:column; padding:16px; }
	.csd-loss__detected { padding:20px 16px; min-height:0; }
	.csd-bar { padding:10px 12px; } .csd-bar__label { font-size:15px; }
	.csd-type { gap:20px; padding:24px 20px; } .csd-type h3 { font-size:20px; } .csd-type img { width:36px; height:36px; flex-basis:36px; }
	.csd-slide { flex-basis:100%; padding:24px 20px; }
	.csd-slide__title { font-size:22px; } .csd-slide__sub { font-size:18px; }
	.csd-slide__btn { font-size:16px; padding:16px 24px; }
}


/* ---- Detail fixes (laptop widths) ---- */
/* Sticky needs a non-scrolling ancestor chain: overflow-x:hidden on html/body made body a scroll container. */
html, body { overflow-x:clip !important; overflow-y:visible !important; }
#content-wrapper, #page-content, .csd-hero, .csd { overflow:visible !important; transform:none !important; }

/* Hero: two columns from 992px up, scaled from the Figma 1520 layout (723 + 670). */
@media (min-width:992px) {
	.csd-hero > .container { max-width:min(1520px, calc(100% - 48px)); padding:0; }
	.csd-hero > .container > .row { margin:0; display:flex; flex-wrap:wrap; justify-content:space-between; align-items:flex-start; }
	.csd-hero > .container > .row > .col-md-9 { flex:0 0 71.4%; max-width:71.4%; padding:0; }
	.csd-hero > .container > .row > .col-md-6 { flex:0 0 47.5%; max-width:47.5%; width:47.5%; padding:0; }
	.csd-hero > .container > .row > .col-md-6 + .col-md-6 { flex:0 0 44%; max-width:44%; width:44%; margin-top:clamp(24px, 3vw, 58px); }
	.csd-hero h1 { font-size:clamp(36px, 2.92vw, 56px); line-height:1.32; color:#0f1e28; margin-bottom:24px; }
	.csd-hero .Logo-header-h { max-width:60%; }
}
/* One text size for overview paragraphs and story-card copy (Figma 20/1.6 at 1920, scaled). */
.csd-intro p, .csd-rich, .csd-rich p, .csd-rich li { font-size:var(--csd-text, clamp(14px, 1.0417vw, 20px)) !important; line-height:1.6 !important; }
.csd-intro { --csd-text:clamp(14px, 1.0417vw, 20px); color:#3b3f59; }
.csd-intro p { margin:0 0 16px; }
.csd-rich { gap:clamp(10px, .83vw, 16px); }
.csd-card { padding:clamp(24px, 2.08vw, 40px) clamp(20px, 1.67vw, 32px); gap:clamp(20px, 1.67vw, 32px); }
.csd-card__head { gap:clamp(14px, 1.25vw, 24px); padding-bottom:clamp(14px, 1.25vw, 24px); }
.csd-card__title { font-size:clamp(22px, 1.67vw, 32px); }
.csd-card__subtitle { font-size:var(--csd-text); }
.csd-card__icon { flex-basis:clamp(44px, 3.33vw, 64px); width:clamp(44px, 3.33vw, 64px); height:clamp(44px, 3.33vw, 64px); }
.csd-card__icon img { width:62%; height:62%; }

/* Sidebar: proportional at 1366–1600, pinned under the fixed header. */
.csd-side__sticky { position:sticky; top:clamp(116px, 7vw, 134px); padding-top:0; gap:12px; }
.csd-side { padding-top:clamp(60px, 6.25vw, 120px); }
.csd-side__card { padding:clamp(20px, 1.67vw, 32px); border-radius:clamp(22px, 1.67vw, 32px); gap:clamp(10px, .83vw, 16px); }
.csd-side__title { font-size:clamp(19px, 1.41vw, 27px); }
.csd-side__text { font-size:clamp(14px, 1.0417vw, 20px); }
.csd-side__pills { gap:clamp(6px, .63vw, 12px); }
.csd-side__pills li { font-size:clamp(12px, .83vw, 16px); gap:8px; }
.csd-side__pills li img { width:clamp(22px, 1.67vw, 32px); height:auto; }
.csd-side__report { padding:clamp(20px, 1.67vw, 32px); gap:clamp(14px, 1.25vw, 24px); border-radius:clamp(18px, 1.25vw, 24px); }
.csd-side__report-img { width:clamp(120px, 10.04vw, 192.756px); height:auto; aspect-ratio:192.756/250.655; }
.csd-side__btn { height:clamp(48px, 3.33vw, 64px); padding:0 clamp(20px, 1.67vw, 32px); font-size:clamp(15px, 1.0417vw, 20px); }
@media (max-width:1599px) { .csd { gap:clamp(32px, 3.33vw, 64px); } }
@media (max-width:1199px) { .csd-side { display:none; } }
@media (min-width:992px) {
	.csd-hero .hanna-title { font-size:clamp(22px, 1.67vw, 32px) !important; line-height:1.3; }
}

/* ---- Sidebar fits the viewport height (short laptop screens) ---- */
.csd { --csd-head:134px; }
@media (max-width:1439px) { .csd { --csd-head:116px; } }
@media (min-width:1200px) and (max-width:1599px), (min-width:1200px) and (max-height:820px) { .csd { --csd-head:88px; } }
.csd-side__sticky { top:calc(var(--csd-head) + 8px); max-height:calc(100vh - var(--csd-head) - 16px); overflow-y:auto; scrollbar-width:none; }
.csd-side__sticky::-webkit-scrollbar { display:none; }
.csd-side { padding-top:min(clamp(60px, 6.25vw, 120px), 8vh); }
.csd-side__card, .csd-side__report { padding:min(clamp(20px, 1.67vw, 32px), 3.2vh); }
.csd-side__card { gap:min(clamp(10px, .83vw, 16px), 1.6vh); }
.csd-side__title { font-size:min(clamp(19px, 1.41vw, 27px), 3.1vh); }
.csd-side__text { font-size:min(clamp(14px, 1.0417vw, 20px), 2.4vh); line-height:1.5; }
.csd-side__pills li { font-size:min(clamp(12px, .83vw, 16px), 2vh); }
.csd-side__btn { height:min(clamp(48px, 3.33vw, 64px), 7vh); font-size:min(clamp(15px, 1.0417vw, 20px), 2.4vh); }
/* Report card turns horizontal (small image beside the text) when height is limited */
@media (max-height:1100px) {
	.csd-side__report { display:grid; grid-template-columns:auto 1fr; column-gap:min(1.25vw, 2vh); row-gap:min(12px, 1.6vh); align-items:start; }
	.csd-side__report-img { grid-row:1 / span 2; width:min(clamp(64px, 6vw, 115px), 14vh); margin:0; }
	.csd-side__report > *:not(.csd-side__report-img) { grid-column:2; margin:0; }
	.csd-side__btn { justify-self:start; padding:0 min(clamp(16px, 1.25vw, 28px), 2.4vh); }
}
/* Very short screens: drop the checklist pills, then the report image */
@media (max-height:700px) { .csd-side__pills { display:none; } }
@media (max-height:560px) { .csd-side__report-img { display:none; } .csd-side__report { display:flex; } }

/* ---- Type scale matched to the "Assumptions / False Beliefs" page at 1366
   (H2 32/1.32 bold, card titles 19/1.4 semibold, body 13/1.55, quote pills 13/1.6, #0f1e28),
   scaling up to the Figma sizes at 1920. ---- */
.csd, .csd-hero {
	--t-body: clamp(13px, calc(1.264vw - 4.26px), 20px);
	--t-lead: clamp(14px, calc(1.083vw - .8px), 20px);
	--t-card: clamp(19px, calc(2.347vw - 13.06px), 32px);
	--t-h2: clamp(26px, calc(1.083vw + 11.2px), 32px);
	--t-pill: clamp(12px, calc(.722vw + 2.14px), 16px);
	--csd-text: var(--t-body);
}
.csd-intro { --csd-text: clamp(13px, calc(1.264vw - 4.26px), 20px); color:#0f1e28; }
.csd-intro p, .csd-rich, .csd-rich p, .csd-rich li { font-size:var(--csd-text) !important; line-height:1.55 !important; }
.csd-rich, .csd-intro p { color:#0f1e28; font-weight:400; }
.csd-card__title { font-size:var(--t-card); font-weight:600; line-height:1.4; color:#0f1e28; }
.csd-card__subtitle { font-size:var(--t-lead); font-weight:600; line-height:1.5; }
.csd-rich .cs-callout { padding:clamp(6px, .52vw, 10px) 10px clamp(6px, .52vw, 10px) 14px; }
.csd-matters__subtitle { font-size:var(--t-lead); line-height:1.5; }
.csd-matters h3, .csd-matters__text header h3 { font-size:var(--t-card); }
.csd-usage__title { font-size:var(--t-h2) !important; line-height:1.32; }
.csd-loss__title, .csd-hero h1 { letter-spacing:0; }
.csd-loss__title { font-size:var(--t-h2); }
.csd-loss__summary-text p, .csd-type p { font-size:var(--t-body); line-height:1.55; color:#0f1e28; }
.csd-type h3 { font-size:var(--t-card); font-weight:600; line-height:1.4; }
.csd-type { padding:clamp(20px, 2.08vw, 32px) clamp(20px, 2.6vw, 40px); gap:clamp(16px, 2.6vw, 40px); }
.csd-loss__count strong { font-size:clamp(32px, 2.5vw, 48px); }
.csd-loss__count span, .csd-loss__detected h3 { font-size:var(--t-lead); }
.csd-bar__label { font-size:var(--t-pill); }
.csd-slide__title { font-size:var(--t-card); }
.csd-slide__sub { font-size:var(--t-lead); }
.csd-slide__body { font-size:var(--t-body); line-height:1.55; }
.csd-slide__btn { font-size:var(--t-lead); padding:clamp(12px, 1.04vw, 20px) clamp(24px, 2.08vw, 40px); }
/* Sidebar: same scale, still capped by viewport height */
.csd-side__title { font-size:min(var(--t-card), 3.1vh); font-weight:600; line-height:1.4; }
.csd-side__text { font-size:min(var(--t-body), 2.4vh); line-height:1.55; }
.csd-side__pills li { font-size:min(var(--t-pill), 2vh); font-weight:500; }
.csd-side__btn { font-size:min(var(--t-lead), 2.4vh); }

/* ==========================================================================
   Relaxed scale modelled on sense.com (measured 1366/1536):
   H1 64/1.0 -2px · H2 48/1.2 -2px · H3 40/1.2 -1.5px · H4 32/1.2 -1.5px
   lead 22/1.6 -.55px · body 16/1.5 #474747, p margin 24px, text column 536–648px
   caption 14/18 · section padding 80px · containers 1320 / 1096 · card radius 32px.
   Applied here as: body 16px/1.7, lead 18px/1.6, paragraphs 20px apart, ~68ch lines,
   card padding 40px, 32px gaps, 80px between sections — Peter's fonts/colours kept.
   ========================================================================== */
.csd, .csd-hero, .cs-overview, .cs-grid, .cs-cta-wrap {
	--r-body:16px; --r-lh:1.7; --r-lead:18px; --r-cap:14px;
	--r-h1:clamp(40px, 3.2vw, 56px); --r-h2:clamp(32px, 2.6vw, 44px); --r-h3:clamp(24px, 1.8vw, 30px);
	--r-pgap:20px; --r-measure:68ch; --r-pad:40px; --r-gap:32px; --r-section:80px;
}
@media (min-width:1920px) { .csd, .csd-hero { --r-body:18px; --r-lead:20px; } }

/* Hero */
.csd-hero h1 { font-size:var(--r-h1) !important; line-height:1.12 !important; letter-spacing:-1.2px !important; margin-bottom:32px !important; }
.csd-intro { margin-top:32px; }
.csd-intro p { font-size:var(--r-body) !important; line-height:var(--r-lh) !important; margin:0 0 var(--r-pgap) !important; max-width:var(--r-measure); color:#3b3f59; }
.csd-hero .stat-label { font-size:var(--r-cap) !important; line-height:1.3; }

/* Body column rhythm */
.csd { margin-top:var(--r-section); }
.csd-main { gap:var(--r-section); }
.csd-story__cards { gap:var(--r-gap); }

/* Story cards */
.csd-card { padding:var(--r-pad) !important; gap:28px !important; border-radius:28px; }
.csd-card__head { gap:16px !important; padding-bottom:24px !important; }
.csd-card__title { font-size:var(--r-h3) !important; line-height:1.2 !important; letter-spacing:-.5px; font-weight:700; }
.csd-card__subtitle { font-size:var(--r-lead) !important; line-height:1.55 !important; }
.csd-rich { gap:var(--r-pgap) !important; }
.csd-rich, .csd-rich p, .csd-rich li { font-size:var(--r-body) !important; line-height:var(--r-lh) !important; color:#3b3f59; max-width:var(--r-measure); }
.csd-rich ul { padding-left:22px; display:flex; flex-direction:column; gap:8px; }
.csd-rich .cs-callout { padding:14px 18px 14px 20px !important; gap:12px !important; border-radius:0 12px 12px 0; }

/* Why it matters / smarter usage */
.csd-matters { gap:var(--r-gap); border-radius:28px; }
.csd-matters__text { padding:var(--r-pad) !important; gap:28px !important; }
.csd-matters__subtitle { font-size:var(--r-lead) !important; line-height:1.55 !important; }
.csd-matters__usage { padding:var(--r-pad) var(--r-pad) var(--r-pad) 0 !important; }
.csd-usage__title { font-size:var(--r-h2) !important; line-height:1.15 !important; letter-spacing:-1px; }
.csd-usage__stats p { font-size:13px; }

/* Energy loss */
.csd-loss { gap:48px; }
.csd-loss__title { font-size:var(--r-h2) !important; line-height:1.15; letter-spacing:-1px; }
.csd-loss__grid, .csd-loss__left, .csd-loss__types { gap:24px; }
.csd-loss__summary { padding:24px 24px 24px 32px; }
.csd-loss__summary-text p, .csd-type p { font-size:var(--r-body) !important; line-height:var(--r-lh) !important; color:#3b3f59; }
.csd-loss__count span, .csd-loss__detected h3 { font-size:var(--r-lead) !important; }
.csd-loss__detected { padding:28px 32px; gap:20px; }
.csd-type { padding:32px var(--r-pad) !important; gap:28px !important; }
.csd-type h3 { font-size:clamp(20px, 1.5vw, 24px) !important; line-height:1.25 !important; margin-bottom:10px !important; }
.csd-bar__label { font-size:15px !important; }

/* Slider */
.csd-slider { gap:40px; }
.csd-slide { padding:var(--r-pad) 44px !important; gap:24px !important; }
.csd-slide__title { font-size:var(--r-h3) !important; line-height:1.2 !important; letter-spacing:-.3px; }
.csd-slide__sub { font-size:var(--r-lead) !important; line-height:1.5; }
.csd-slide__body, .csd-slide__body p, .csd-slide__body li { font-size:var(--r-body) !important; line-height:var(--r-lh) !important; }
.csd-slide__body p, .csd-slide__body ul { margin-bottom:var(--r-pgap) !important; }

/* Sidebar (short-screen vh caps from the previous pass still win via min()) */
.csd-side__title { font-size:min(22px, 3.1vh) !important; line-height:1.3 !important; letter-spacing:-.3px; }
.csd-side__text { font-size:min(15px, 2.4vh) !important; line-height:1.65 !important; }
.csd-side__pills li { font-size:min(14px, 2vh) !important; }
.csd-side__btn { font-size:min(16px, 2.4vh) !important; }

/* Overview page + report CTA */
.cs-overview__title { letter-spacing:-1px; line-height:1.15; }
.cs-grid { gap:var(--r-gap) !important; }
.cs-card { padding:32px !important; }
.cs-card__title { line-height:1.3; }
.cs-cta-wrap { margin-top:var(--r-section) !important; margin-bottom:var(--r-section) !important; }
.cs-cta__title { line-height:1.15 !important; letter-spacing:-1px; }
.cs-cta__lead, .cs-cta__note, .cs-cta__alert p { font-size:var(--r-lead) !important; line-height:1.65 !important; }
.cs-cta__features li { font-size:15px; line-height:1.5; }

@media (max-width:767px) {
	.csd, .csd-hero, .cs-overview, .cs-grid, .cs-cta-wrap { --r-body:15px; --r-lead:16px; --r-pad:24px; --r-gap:20px; --r-section:56px; --r-h1:32px; --r-h2:28px; --r-h3:22px; }
}

/* ---- Facility Background card: original design, resized + top-aligned (all case studies) ---- */
.csd-hero .row { align-items:flex-start; }
@media (min-width:992px) {
	.csd-hero .row { justify-content:space-between; }
	.csd-hero .row > .col-md-6 { flex:0 0 calc(50% - 28px) !important; max-width:calc(50% - 28px) !important; padding-left:0 !important; padding-right:0 !important; }
	.csd-hero .row > .col-md-6:last-child { margin-top:0 !important; position:relative; }
}
.csd-hero .hanna-card { margin:.5rem 0 0 !important; padding:24px !important; width:100%; box-sizing:border-box; }
.csd-hero .hanna-card .flex-shrink-0 img { width:44px; height:44px; }
.csd-hero .hanna-card .ml-3 { margin-left:12px !important; }
.csd-hero .hanna-title { font-size:22px !important; line-height:1.25 !important; letter-spacing:-.4px !important; }
.csd-hero .hanna-divider { margin:20px 0 16px !important; }
.csd-hero .hanna-item { min-height:60px !important; padding:10px 52px 10px 18px !important; margin-bottom:10px !important; border-radius:14px !important; }
.csd-hero .hanna-card .row { margin:0 -5px !important; }
.csd-hero .hanna-card .row > .col-md-6 { padding:0 5px !important; }
.csd-hero .hanna-card .row .hanna-item { margin-bottom:0 !important; }
.csd-hero .hanna-label { font-size:13px !important; font-weight:600 !important; line-height:1.3 !important; color:#555967 !important; margin-bottom:3px !important; }
.csd-hero .hanna-value, .csd-hero .hanna-value * { font-size:16px !important; font-weight:700 !important; line-height:1.3 !important; color:#202231; }
.csd-hero .hanna-value sup { font-size:.6em !important; }
.csd-hero .hanna-item-img { width:22px !important; height:22px !important; object-fit:contain; right:16px !important; top:50% !important; transform:translateY(-50%) !important; }
@media (min-width:1920px) {
	.csd-hero .hanna-card { padding:28px !important; }
	.csd-hero .hanna-title { font-size:24px !important; }
	.csd-hero .hanna-value, .csd-hero .hanna-value * { font-size:17px !important; }
}
/* Facility Background header: badge + title on one centred line, matching .csd-card__titlebar */
.csd-hero .hanna-card > .d-flex { display:flex !important; align-items:center !important; gap:12px; margin:0 !important; padding:0 !important; min-height:40px; }
.csd-hero .hanna-card > .d-flex .flex-shrink-0 { flex:0 0 40px; width:40px; height:40px; margin:0 !important; padding:0 !important; line-height:0; display:flex; align-items:center; justify-content:center; }
.csd-hero .hanna-card .flex-shrink-0 img { width:40px !important; height:40px !important; display:block; margin:0 !important; }
.csd-hero .hanna-card > .d-flex .hanna-title { margin:0 !important; padding:0 !important; line-height:1.2 !important; align-self:center; }
.csd-hero .hanna-card .ml-3 { margin-left:0 !important; }
.csd-hero .hanna-divider { margin:18px 0 18px !important; }

/* Calvin Kruk: Figma 9395:48875 shifts the photo up ~23% so the building clears the overlapping cards; Figma 9395:48925 story-2 crop. */
.csd-story--1.csd-story--calvin-kruk-center .csd-story__photo { object-view-box: inset(30% 0 0 0); object-position: 72% 50%; }
.csd-story--2.csd-story--calvin-kruk-center .csd-story__photo { object-position: 50% 78%; }
/* Kent: Figma 9395:47260 anchors the gym photo to the top. */
.csd-story--2.csd-story--district-of-kent-community-recreation-cultural-center .csd-story__photo { object-position: 50% 0; }

/* Phone: slider dots get a 24px tap area without changing their look */
@media (max-width:767px){.csd-slider__dots{gap:0;}.csd-slider__dots button{box-sizing:content-box;padding:8px;background-clip:content-box;}}