/* Case studies — hub + detail (light-only) */

body.autonemo-case-studies-page-active,
body.dark.autonemo-case-studies-page-active,
body.autonemo-case-studies-page-active .page-content-wrapper,
body.autonemo-case-studies-page-active .autonemo-case-studies-page {
	background-color: #ffffff !important;
	color: #0b0c0c !important;
}

body.autonemo-case-studies-page-active .autonemo-case-studies-page :where(h1, h2, h3, h4, h5, h6) {
	color: #0b0c0c !important;
	-webkit-text-fill-color: #0b0c0c !important;
}

body.autonemo-case-studies-page-active .autonemo-case-studies-page :where(p, li, span, cite, label) {
	color: #5c6570 !important;
	-webkit-text-fill-color: #5c6570 !important;
}

body.autonemo-case-studies-page-active .autonemo-case-studies-page .cs-card__title,
body.autonemo-case-studies-page-active .autonemo-case-studies-page .cs-stat__value,
body.autonemo-case-studies-page-active .autonemo-case-studies-page .cs-list li {
	color: #0b0c0c !important;
	-webkit-text-fill-color: #0b0c0c !important;
}

body.dark.autonemo-case-studies-page-active .autonemo-case-studies-page .cs-cta {
	background: linear-gradient(180deg, #f4f6f8 0%, #ffffff 100%) !important;
}

body.dark.autonemo-case-studies-page-active .autonemo-case-studies-page .cs-cta__title {
	color: var(--cs-ink) !important;
	-webkit-text-fill-color: var(--cs-ink) !important;
}

body.dark.autonemo-case-studies-page-active .autonemo-case-studies-page .cs-cta__lead {
	color: var(--cs-muted) !important;
	-webkit-text-fill-color: var(--cs-muted) !important;
}

.autonemo-case-studies-page {
	--cs-accent: #e2231a;
	--cs-accent-soft: rgba(226, 35, 26, 0.1);
	--cs-ink: #0b0c0c;
	--cs-muted: #5c6570;
	--cs-border: rgba(11, 12, 12, 0.08);
	--cs-radius: 20px;
}

.cs-inner {
	max-width: 1140px;
	margin: 0 auto;
	padding: 0 clamp(16px, 3vw, 24px);
}

.cs-hero {
	padding: clamp(48px, 7vw, 88px) 0 clamp(40px, 5vw, 64px);
	background:
		radial-gradient(ellipse 80% 60% at 10% 0%, rgba(226, 35, 26, 0.08), transparent 55%),
		linear-gradient(180deg, #fff 0%, #f8fafb 100%);
	border-bottom: 1px solid var(--cs-border);
}

.cs-hero--hub__grid {
	display: grid;
	grid-template-columns: 1.1fr minmax(280px, 400px);
	gap: clamp(24px, 4vw, 48px);
	align-items: center;
	text-align: left;
}

.cs-hero--hub__copy {
	max-width: 640px;
}

.cs-hero--hub .cs-hero__tags {
	justify-content: flex-start;
}

.cs-hero--hub .cs-hero__actions {
	text-align: left;
}

.cs-hero__figure--hub img {
	min-height: 220px;
	object-fit: contain;
}

.cs-hero__grid {
	display: grid;
	grid-template-columns: 1fr minmax(260px, 380px);
	gap: clamp(24px, 4vw, 48px);
	align-items: center;
}

.cs-hero__figure {
	margin: 0;
	border-radius: var(--cs-radius);
	overflow: hidden;
	border: 1px solid var(--cs-border);
	background: #fff;
	box-shadow: 0 12px 40px rgba(11, 12, 12, 0.06);
}

.cs-hero__figure img {
	display: block;
	width: 100%;
	height: auto;
}

.cs-breadcrumb {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	margin: 0 0 20px;
	font-size: 0.875rem;
	color: var(--cs-muted);
}

.cs-breadcrumb a {
	color: var(--cs-accent);
	text-decoration: none;
}

.cs-eyebrow {
	display: inline-flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
	margin: 0 0 16px;
	font-size: 0.78rem;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--cs-accent) !important;
}

.cs-eyebrow__pill {
	padding: 4px 10px;
	border-radius: 999px;
	background: var(--cs-accent-soft);
}

.cs-hero__title {
	margin: 0 0 16px;
	font-size: clamp(1.75rem, 3.5vw, 2.75rem);
	line-height: 1.15;
	color: var(--cs-ink) !important;
}

.cs-hero__company {
	margin: 0 0 12px;
	font-size: 1rem;
	font-weight: 600;
	color: var(--cs-muted) !important;
}

.cs-hero__lead {
	max-width: 720px;
	margin: 0;
	font-size: clamp(1rem, 1.4vw, 1.125rem);
	line-height: 1.7;
	color: var(--cs-muted) !important;
}

.cs-hero--hub .cs-hero__lead {
	margin-left: auto;
	margin-right: auto;
}

.cs-hero__tags {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 8px;
	margin-top: 24px;
}

.cs-tag {
	display: inline-block;
	padding: 6px 14px;
	border-radius: 999px;
	border: 1px solid var(--cs-border);
	background: #fff;
	font-size: 0.8rem;
	font-weight: 600;
	color: var(--cs-ink);
}

.cs-hero__actions {
	margin-top: 28px;
}

.cs-hero__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 52px;
	height: 52px;
	margin-top: 20px;
	border-radius: 14px;
	background: var(--cs-accent-soft);
	color: var(--cs-accent);
	font-size: 1.25rem;
}

.cs-cards {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
	gap: 24px;
}

.cs-card {
	display: flex;
	flex-direction: column;
	padding: 24px;
	border-radius: var(--cs-radius);
	border: 1px solid var(--cs-border);
	background: #fff;
	text-decoration: none;
	color: inherit;
	transition: border-color 0.2s, box-shadow 0.2s, transform 0.2s;
}

.cs-card:hover {
	border-color: rgba(226, 35, 26, 0.35);
	box-shadow: 0 16px 48px rgba(11, 12, 12, 0.08);
	transform: translateY(-2px);
}

.cs-card__media {
	position: relative;
	display: block;
	margin-bottom: 16px;
	border-radius: 12px;
	overflow: hidden;
	background: linear-gradient(145deg, #f8f9fb 0%, #eef1f4 55%, #fff 100%);
	min-height: 140px;
	border: 1px solid var(--cs-border);
}

.cs-card__media--fuel-theft { background: linear-gradient(145deg, #fff5f4 0%, #ffe8e6 100%); }
.cs-card__media--parts-theft { background: linear-gradient(145deg, #f4f6f8 0%, #e8ecf0 100%); }
.cs-card__media--overbilling { background: linear-gradient(145deg, #fff9f0 0%, #ffedd5 100%); }
.cs-card__media--engine-idle { background: linear-gradient(145deg, #f0f4ff 0%, #e0e7ff 100%); }
.cs-card__media--wrong-billing { background: linear-gradient(145deg, #f0fdf4 0%, #dcfce7 100%); }
.cs-card__media--false-report { background: linear-gradient(145deg, #fef2f2 0%, #fee2e2 100%); }
.cs-card__media--location-mismatch { background: linear-gradient(145deg, #ecfeff 0%, #cffafe 100%); }
.cs-card__media--dashcam-proof { background: linear-gradient(145deg, #f5f3ff 0%, #ede9fe 100%); }

.cs-card__media img {
	display: block;
	width: 100%;
	height: 140px;
	object-fit: contain;
	object-position: center;
	padding: 12px;
	box-sizing: border-box;
}

.cs-card__media img[src*=".png"] {
	object-fit: cover;
	padding: 0;
}

.cs-card__media--hero {
	min-height: 220px;
	border-radius: var(--cs-radius);
}

.cs-card__media--hero img {
	height: 220px;
	padding: 20px;
}

.cs-card__media--mini {
	min-height: 72px;
	margin-bottom: 10px;
}

.cs-card__media--mini img {
	height: 72px;
	padding: 8px;
}

.cs-hero__figure .cs-card__media {
	margin: 0;
	min-height: 220px;
}

.cs-card__icon {
	position: absolute;
	right: 12px;
	bottom: 12px;
	width: 40px;
	height: 40px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 10px;
	background: var(--cs-accent) !important;
	color: #ffffff !important;
	-webkit-text-fill-color: #ffffff !important;
	font-size: 1rem;
	z-index: 2;
}

body.autonemo-case-studies-page-active .autonemo-case-studies-page .cs-card__icon,
body.autonemo-case-studies-page-active .autonemo-case-studies-page .cs-card__icon i,
body.dark.autonemo-case-studies-page-active .autonemo-case-studies-page .cs-card__icon i,
body.autonemo-case-studies-page-active .autonemo-case-studies-page .cs-hero__icon,
body.autonemo-case-studies-page-active .autonemo-case-studies-page .cs-hero__icon i {
	color: #ffffff !important;
	-webkit-text-fill-color: #ffffff !important;
}

body.autonemo-case-studies-page-active .autonemo-case-studies-page .cs-hero__icon {
	background: var(--cs-accent) !important;
}

.cs-card__meta {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-bottom: 10px;
	font-size: 0.75rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.06em;
}

.cs-card__problem {
	color: var(--cs-accent);
}

.cs-card__industry {
	color: var(--cs-muted);
}

.cs-card__title {
	margin: 0 0 6px;
	font-size: 1.15rem;
	line-height: 1.3;
	color: var(--cs-ink) !important;
}

.cs-card__company {
	margin: 0 0 10px;
	font-size: 0.9rem;
	font-weight: 600;
	color: var(--cs-muted) !important;
}

.cs-card__excerpt {
	margin: 0 0 16px;
	flex: 1;
	font-size: 0.95rem;
	line-height: 1.6;
	color: var(--cs-muted) !important;
}

.cs-card__link {
	font-size: 0.875rem;
	font-weight: 700;
	color: var(--cs-accent);
}

.cs-section {
	padding: clamp(40px, 5vw, 64px) 0;
}

.cs-section--muted {
	background: #f4f6f8;
}

.cs-section--results {
	background: linear-gradient(180deg, #fff 0%, rgba(226, 35, 26, 0.04) 100%);
}

.cs-split {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: clamp(24px, 4vw, 48px);
	align-items: start;
}

.cs-section__title {
	margin: 0 0 16px;
	font-size: 1.35rem;
	color: var(--cs-ink) !important;
}

.cs-section__title--sm {
	margin-top: 24px;
	font-size: 1.05rem;
}

.cs-section__lead {
	margin: 0;
	font-size: 1.05rem;
	line-height: 1.75;
	color: var(--cs-muted) !important;
}

.cs-list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.cs-list li {
	position: relative;
	padding: 10px 0 10px 22px;
	border-bottom: 1px solid var(--cs-border);
	font-size: 0.98rem;
	line-height: 1.55;
	color: var(--cs-ink);
}

.cs-list li:last-child {
	border-bottom: 0;
}

.cs-list li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 18px;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--cs-accent);
}

.cs-list--check li::before {
	content: "✓";
	width: auto;
	height: auto;
	background: none;
	color: var(--cs-accent);
	font-weight: 700;
	font-size: 0.85rem;
	top: 12px;
}

.cs-tag-row {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.cs-tech-tag,
.cs-module-tag {
	display: inline-block;
	padding: 8px 14px;
	border-radius: 999px;
	font-size: 0.82rem;
	font-weight: 600;
}

.cs-tech-tag {
	background: var(--cs-accent-soft);
	color: var(--cs-accent);
}

.cs-module-tag {
	border: 1px solid var(--cs-border);
	background: #fff;
	color: var(--cs-ink);
}

.cs-cards--compact {
	grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
}

.cs-card--mini {
	padding: 18px;
}

.cs-card--mini strong {
	display: block;
	margin: 6px 0 4px;
	font-size: 1rem;
	color: var(--cs-ink);
}

.cs-card--mini span:last-child {
	font-size: 0.85rem;
	color: var(--cs-muted);
}

.cs-cta {
	padding: clamp(48px, 6vw, 72px) 0;
	background: linear-gradient(180deg, #f4f6f8 0%, #ffffff 100%);
	border-top: 1px solid var(--cs-border);
	color: var(--cs-ink);
	text-align: center;
}

.cs-cta__title {
	margin: 0 0 12px;
	font-size: clamp(1.5rem, 3vw, 2rem);
	color: var(--cs-ink) !important;
	-webkit-text-fill-color: var(--cs-ink) !important;
}

.cs-cta__lead {
	max-width: 560px;
	margin: 0 auto 24px;
	font-size: 1.05rem;
	line-height: 1.65;
	color: var(--cs-muted) !important;
	-webkit-text-fill-color: var(--cs-muted) !important;
}

.cs-cta__actions {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 12px;
}

.cs-empty {
	padding: 80px 0;
	text-align: center;
}

.cs-stats {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
	gap: 16px;
	margin-top: 24px;
}

.cs-stats--hub {
	margin-top: 28px;
}

.cs-stat {
	padding: 18px 16px;
	border-radius: 14px;
	border: 1px solid var(--cs-border);
	background: #fff;
	text-align: center;
}

.cs-stat__value {
	display: block;
	font-size: 1.5rem;
	font-weight: 800;
	line-height: 1.2;
	color: var(--cs-accent) !important;
	-webkit-text-fill-color: var(--cs-accent) !important;
}

.cs-stat__label {
	display: block;
	margin-top: 6px;
	font-size: 0.82rem;
	font-weight: 600;
	color: var(--cs-ink) !important;
}

.cs-stat__note {
	display: block;
	margin-top: 4px;
	font-size: 0.75rem;
	color: var(--cs-muted) !important;
}

.cs-section--metrics {
	padding-top: 32px;
	padding-bottom: 32px;
	background: #fff;
	border-bottom: 1px solid var(--cs-border);
}

.cs-hero__bn,
.cs-card__bn {
	margin: 0 0 12px;
	padding: 10px 14px;
	border-radius: 10px;
	background: rgba(226, 35, 26, 0.06);
	border-left: 3px solid var(--cs-accent);
	font-size: 0.95rem;
	line-height: 1.6;
	color: var(--cs-ink) !important;
}

.cs-hero__fleet {
	margin: 0 0 12px;
	font-size: 0.9rem;
	font-weight: 600;
	color: var(--cs-muted) !important;
}

.cs-hero__fleet i {
	color: var(--cs-accent);
	margin-right: 6px;
}

.cs-quote {
	margin: 20px 0 0;
	padding: 20px 24px;
	border-radius: 14px;
	border-left: 4px solid var(--cs-accent);
	background: var(--cs-accent-soft);
}

.cs-quote p {
	margin: 0;
	font-size: 1.05rem;
	font-style: italic;
	line-height: 1.65;
	color: var(--cs-ink) !important;
}

.cs-quote cite {
	display: block;
	margin-top: 10px;
	font-size: 0.875rem;
	font-style: normal;
	font-weight: 700;
	color: var(--cs-accent) !important;
}

.cs-before-after {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 20px;
	margin-top: 8px;
}

.cs-before-after__col {
	padding: 22px;
	border-radius: 14px;
	border: 1px solid var(--cs-border);
}

.cs-before-after__col h3 {
	margin: 0 0 10px;
	font-size: 1rem;
	color: var(--cs-ink) !important;
}

.cs-before-after__col--before {
	background: #fff;
}

.cs-before-after__col--after {
	background: rgba(226, 35, 26, 0.05);
	border-color: rgba(226, 35, 26, 0.2);
}

.cs-timeline {
	margin: 0;
	padding: 0;
	list-style: none;
}

.cs-timeline__item {
	display: grid;
	grid-template-columns: 120px 1fr;
	gap: 16px;
	padding: 16px 0;
	border-bottom: 1px solid var(--cs-border);
}

.cs-timeline__item:last-child {
	border-bottom: 0;
}

.cs-timeline__label {
	font-weight: 800;
	font-size: 0.85rem;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--cs-accent) !important;
}

.cs-timeline__item p {
	margin: 0;
	line-height: 1.6;
	color: var(--cs-muted) !important;
}

.cs-intro {
	background: #fff;
}

/* Buttons — light page only (hero + CTA), overrides theme dark bleed */
body.autonemo-case-studies-page-active .autonemo-case-studies-page :is(.cs-hero__actions, .cs-cta__actions) :is(a, button).primary-btn1 {
	background-color: #e2231a !important;
	border: 1px solid #e2231a !important;
	color: #ffffff !important;
	-webkit-text-fill-color: #ffffff !important;
}

body.autonemo-case-studies-page-active .autonemo-case-studies-page :is(.cs-hero__actions, .cs-cta__actions) :is(a, button).primary-btn1 > span,
body.autonemo-case-studies-page-active .autonemo-case-studies-page :is(.cs-hero__actions, .cs-cta__actions) :is(a, button).primary-btn1::after {
	color: #ffffff !important;
	-webkit-text-fill-color: #ffffff !important;
}

body.autonemo-case-studies-page-active .autonemo-case-studies-page :is(.cs-hero__actions, .cs-cta__actions) :is(a, button).primary-btn1:hover,
body.autonemo-case-studies-page-active .autonemo-case-studies-page :is(.cs-hero__actions, .cs-cta__actions) :is(a, button).primary-btn1:focus-visible {
	background-color: #0b0c0c !important;
	border-color: #0b0c0c !important;
	color: #ffffff !important;
	-webkit-text-fill-color: #ffffff !important;
}

body.autonemo-case-studies-page-active .autonemo-case-studies-page :is(.cs-hero__actions, .cs-cta__actions) :is(a, button).primary-btn1:hover > span,
body.autonemo-case-studies-page-active .autonemo-case-studies-page :is(.cs-hero__actions, .cs-cta__actions) :is(a, button).primary-btn1:hover::after,
body.autonemo-case-studies-page-active .autonemo-case-studies-page :is(.cs-hero__actions, .cs-cta__actions) :is(a, button).primary-btn1:focus-visible > span,
body.autonemo-case-studies-page-active .autonemo-case-studies-page :is(.cs-hero__actions, .cs-cta__actions) :is(a, button).primary-btn1:focus-visible::after {
	color: #ffffff !important;
	-webkit-text-fill-color: #ffffff !important;
}

body.autonemo-case-studies-page-active .autonemo-case-studies-page :is(.cs-hero__actions, .cs-cta__actions) :is(a, button).primary-btn2 {
	background-color: #ffffff !important;
	border: 1px solid #0b0c0c !important;
	color: #0b0c0c !important;
	-webkit-text-fill-color: #0b0c0c !important;
}

body.autonemo-case-studies-page-active .autonemo-case-studies-page :is(.cs-hero__actions, .cs-cta__actions) :is(a, button).primary-btn2 > span,
body.autonemo-case-studies-page-active .autonemo-case-studies-page :is(.cs-hero__actions, .cs-cta__actions) :is(a, button).primary-btn2::after {
	color: #0b0c0c !important;
	-webkit-text-fill-color: #0b0c0c !important;
}

body.autonemo-case-studies-page-active .autonemo-case-studies-page :is(.cs-hero__actions, .cs-cta__actions) :is(a, button).primary-btn2:hover,
body.autonemo-case-studies-page-active .autonemo-case-studies-page :is(.cs-hero__actions, .cs-cta__actions) :is(a, button).primary-btn2:focus-visible {
	background-color: #e2231a !important;
	border-color: #e2231a !important;
	color: #ffffff !important;
	-webkit-text-fill-color: #ffffff !important;
}

body.autonemo-case-studies-page-active .autonemo-case-studies-page :is(.cs-hero__actions, .cs-cta__actions) :is(a, button).primary-btn2:hover > span,
body.autonemo-case-studies-page-active .autonemo-case-studies-page :is(.cs-hero__actions, .cs-cta__actions) :is(a, button).primary-btn2:hover::after,
body.autonemo-case-studies-page-active .autonemo-case-studies-page :is(.cs-hero__actions, .cs-cta__actions) :is(a, button).primary-btn2:focus-visible > span,
body.autonemo-case-studies-page-active .autonemo-case-studies-page :is(.cs-hero__actions, .cs-cta__actions) :is(a, button).primary-btn2:focus-visible::after {
	color: #ffffff !important;
	-webkit-text-fill-color: #ffffff !important;
}

@media (max-width: 991px) {
	.cs-hero__grid,
	.cs-hero--hub__grid {
		grid-template-columns: 1fr;
	}

	.cs-hero__figure,
	.cs-hero__figure--hub {
		order: -1;
		max-width: 400px;
	}

	.cs-split,
	.cs-before-after {
		grid-template-columns: 1fr;
	}

	.cs-timeline__item {
		grid-template-columns: 1fr;
		gap: 6px;
	}
}

@media (max-width: 575px) {
	.cs-cards {
		grid-template-columns: 1fr;
	}
}