@layer components {
	@scope (.case-study) {
		/* Hero (different from solution/industry - has breadcrumb nav) */
		.case-study-hero {
			background-color: var(--color-bg-dark);
			position: relative;
			overflow: hidden;
		}

		.case-study-hero__inner {
			position: relative;
		}

		.case-study-hero__nav {
			align-items: center;
		}

		.case-study-hero__nav-sep,
		.case-study-hero__nav-item {
			color: oklch(from var(--color-bg) l c h / 50%);
			font-size: var(--font-size-sm);
		}

		.case-study-hero h1 {
			color: var(--color-text-invert);
		}

		.case-study-hero__lede {
			font-size: var(--font-size-lg);
			color: oklch(from var(--color-bg) l c h / 70%);
		}

		/* Challenge: 50-50 header + body */
		.case-study-challenge {
			align-items: start;
			gap: calc(var(--gutter) * 4);
		}

		.case-study-challenge__body p {
			color: var(--color-text-muted);
		}

		/* Solution: dark bg with stats */
		.case-study-solution {
			background-color: var(--color-bg-dark);
		}

		.case-study-solution h2 {
			color: var(--color-text-invert);
		}

		.case-study-stat__value {
			font-family: var(--font-family-heading);
			font-size: var(--font-size-xxxl);
			font-weight: 700;
			letter-spacing: -0.03em;
			color: var(--color-text-invert);
		}

		.case-study-stat__label {
			font-size: var(--font-size-xs);
			font-weight: 500;
			color: var(--color-text-muted-invert);
		}

		/* Process steps */
		.case-study-process-step h3 {
			display: flex;
			align-items: baseline;
			gap: calc(var(--gutter) / 2);
			font-size: var(--font-size-lg);
			font-weight: 700;
		}

		.case-study-process-step h3::before {
			content: counter(steps, decimal-leading-zero);
			color: var(--color-green);
			font-variant-numeric: tabular-nums;
			font-weight: var(--font-weight-medium);
		}

		.case-study-process-step p {
			font-size: var(--font-size-sm);
			color: var(--color-text-muted);
		}

		/* Results cards with accent border */
		.case-study-result-card {
			padding: calc(var(--gutter) * 2);
			border-inline-start: 3px solid var(--primary);
			background-color: var(--color-bg-card);
			border-radius: 12px;
		}

		.case-study-result-card h3 {
			font-size: var(--font-size-lg);
			font-weight: 700;
		}

		.case-study-result-card p {
			font-size: var(--font-size-sm);
			color: var(--color-text-muted);
		}

		/* Testimonial */
		.case-study-testimonial {
			text-align: center;
			align-items: center;
			max-inline-size: 520px;
			margin-inline: auto;
		}

		.case-study-testimonial__hex {
			--hex-fill: var(--color-magenta);
		}

		.case-study-testimonial__quote {
			font-family: var(--font-family-heading);
			font-size: var(--font-size-xl);
			font-weight: var(--font-weight-bold);
			letter-spacing: -0.01em;
		}

		.case-study-testimonial__author {
			font-size: var(--font-size-md);
			font-weight: 700;
		}

		.case-study-testimonial__role {
			font-size: var(--font-size-sm);
			color: var(--color-text-muted);
		}
	}
}