
.page-case-study {
	--case-band: 1018px; 
	--case-gap: 120px; 
	--case-head-gap: 20px; 
	--case-hero-columns: 450px 1fr;
	--case-hero-gap: 57px;
	--case-hero-image-height: 470px;
	--case-split-columns: 462px 1fr;
	--case-split-gap: 56px;
	--case-lattice-tail: 173px; 
	font: var(--body-int);
	color: var(--color-cream);
	background: var(--color-black);
}
.page-case-study .site-footer {
	margin-top: 0;
}
.page-case-study main {
	overflow-x: clip;
}
.page-case-study .case-top,
.page-case-study .case-body {
	max-width: var(--case-band);
	margin-inline: auto;
}
.page-case-study .case-eyebrow {
	margin: 0;
	font: var(--label-m);
	letter-spacing: var(--ls-label);
	text-transform: uppercase;
	color: var(--color-brand);
}
.page-case-study .case-title {
	margin: 0;
	font: 700 var(--text-display-s) / 1 var(--font-sans);
	letter-spacing: var(--ls-display);
	color: var(--color-cream);
}
.page-case-study .case-title--accent {
	color: var(--color-brand);
}
.page-case-study .case-prose > * {
	margin: 0;
}
.page-case-study .case-prose > * + * {
	margin-top: 1.4em;
}
.page-case-study .case-prose--m {
	font: var(--body-m);
}
.page-case-study .case-prose--m > * + * {
	margin-top: 1.35em;
}
.page-case-study .case-top {
	position: relative;
}
.page-case-study .case-top::before {
	content: "";
	position: absolute;
	left: 50%;
	width: 100vw;
	translate: -50% 0;
	top: calc(-1 * var(--header-offset));
	height: calc(100% + var(--header-offset) + var(--case-lattice-tail));
	height: round(
		calc(100% + var(--header-offset) + var(--case-lattice-tail)),
		var(--grid-tile)
	);
	background-image: url(../../media/home/grid-tile.svg);
	background-size: var(--grid-tile) var(--grid-tile);
	background-position: center top;
	z-index: -1;
	pointer-events: none;
}
.page-case-study .case-back {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	margin: 38px 0 0 -4px;
	font: 700 var(--text-body-int) / 1.4 var(--font-sans);
	color: var(--color-cream);
	text-decoration: none;
}
.page-case-study .case-back:hover,
.page-case-study .case-back:focus-visible {
	color: var(--color-brand);
}
.page-case-study .case-back__arrow {
	flex: none;
	rotate: 180deg;
}
.page-case-study .case-back__page {
	text-transform: uppercase;
}
.page-case-study .case-hero {
	display: grid;
	grid-template-columns: var(--case-hero-columns);
	gap: var(--case-hero-gap);
	align-items: center;
	margin-top: 73px;
}
.page-case-study .case-hero__body {
	display: flex;
	flex-direction: column;
	gap: 32px;
	min-width: 0;
}
.page-case-study .case-hero__logo {
	margin: 0;
}
.page-case-study .case-hero__logo img {
	display: block;
	max-width: 100%;
	height: auto;
}
.page-case-study .case-hero__title {
	margin: 0;
	font: 400 var(--text-display-xs) / 1.1 var(--font-sans);
	letter-spacing: var(--ls-display);
	color: var(--color-cream);
}
.page-case-study .case-hero__facts {
	display: flex;
	flex-direction: column;
	gap: 32px;
	margin: 0;
	max-width: 366px;
}
.page-case-study .case-hero__fact {
	display: flex;
	flex-direction: column;
	gap: 12px;
}
.page-case-study .case-hero__fact dd {
	margin: 0;
	color: var(--color-white);
}
.page-case-study .case-hero__stat {
	display: flex;
	align-items: center;
	gap: 9px;
	margin: 0;
	color: var(--color-brand);
}
.page-case-study .case-hero__stat-value {
	font: var(--display-xl);
	letter-spacing: var(--ls-display);
}
.page-case-study .case-hero__stat-label {
	max-width: 9ch;
	font: var(--label-int);
	letter-spacing: var(--ls-label);
	text-transform: uppercase;
}
.page-case-study .case-hero__image {
	display: block;
	width: 100%;
	height: var(--case-hero-image-height);
	object-fit: cover;
	border-radius: 24px;
}
.page-case-study .case-body {
	display: flex;
	flex-direction: column;
	gap: var(--case-gap);
	padding: 127px 0 120px;
}
.page-case-study .case-section {
	position: relative;
}
.page-case-study .case-head {
	display: flex;
	flex-direction: column;
	gap: var(--case-head-gap);
	max-width: 985px;
}
.page-case-study .case-head > * {
	margin: 0;
}
.page-case-study .case-head + * {
	margin-top: 50px;
}
.page-case-study .case-solution .case-title {
	max-width: 610px;
}
.page-case-study .case-solution .case-title--wide {
	max-width: none;
}
.page-case-study .case-head--narrow .case-title {
	max-width: 810px;
}
.page-case-study .case-head--narrow > p:last-child {
	max-width: 845px;
}
.page-case-study .case-section > .case-prose,
.page-case-study .case-section > .case-showcase {
	margin-top: 50px;
}
.page-case-study .case-split {
	display: grid;
	grid-template-columns: var(--case-split-columns);
	gap: var(--case-split-gap);
	align-items: center;
}
.page-case-study .case-split__media {
	display: block;
	width: 100%;
	height: 100%;
	min-height: 547px;
	object-fit: cover;
	border-radius: 24px;
}
.page-case-study .case-split__body {
	display: flex;
	flex-direction: column;
	gap: var(--case-head-gap);
	max-width: 480px;
}
.page-case-study .case-split__body > * {
	margin: 0;
}
.page-case-study .case-solution__subhead {
	margin-top: 64px;
}
.page-case-study .case-solution__subhead + .case-prose {
	margin-top: 24px;
}
.page-case-study .case-prose > .pull-quote,
.page-case-study .case-prose > .pull-quote + * {
	margin-top: 40px;
}
.page-case-study .case-solution::before {
	content: "";
	position: absolute;
	inset: -24px auto -73px 50%;
	width: 100vw;
	translate: -50% 0;
	background:
		linear-gradient(
			180deg,
			var(--color-black) 0,
			transparent 227px,
			transparent calc(100% - 350px),
			var(--color-black) 100%
		),
		var(--gradient-case-solution);
	z-index: -1;
	pointer-events: none;
}
.page-case-study .case-solution__bulb {
	position: absolute;
	top: 0;
	right: 28px;
	width: 80px;
	height: auto;
}
.page-case-study .case-showcase {
	margin: 0;
}
.page-case-study .case-showcase img {
	display: block;
	margin-inline: auto;
	max-width: 100%;
	height: auto;
}
.page-case-study .case-showcase--offset img {
	margin-inline: 76px auto;
}
.page-case-study .case-showcase--panels {
	display: flex;
	justify-content: center;
	gap: 48px;
}
.page-case-study .case-showcase--panels img {
	margin-inline: 0;
	border-radius: 20px;
}
@media (max-width: 1099px) {
	.page-case-study .case-top,
	.page-case-study .case-body {
		padding-inline: var(--page-gutter-sm);
	}
	.page-case-study {
		--case-hero-columns: 1fr;
		--case-split-columns: 1fr;
		--case-hero-gap: 48px;
		--case-split-gap: 40px;
	}
	.page-case-study .case-split__body {
		max-width: none;
	}
	.page-case-study .case-showcase--panels {
		flex-wrap: wrap;
	}
	.page-case-study .case-showcase--offset img {
		margin-inline: auto;
	}
}
@media (max-width: 767px) {
	.page-case-study .case-head {
		--case-head-gap: 12px;
	}
	.page-case-study .case-head + * {
		margin-top: 28px;
	}
	.page-case-study .case-solution .case-head + * {
		margin-top: 32px;
	}
	.page-case-study .case-head > .case-eyebrow + .case-prose {
		margin-top: 4px;
	}
	.page-case-study {
		--case-gap: 64px;
		--case-hero-image-height: auto;
	}
	.page-case-study .case-top,
	.page-case-study .case-body {
		padding-inline: 32px;
	}
	.page-case-study .site-footer {
		--footer-social-foot: 40px;
		--footer-icon-color: var(--color-sand-soft);
		--footer-social-grid: none;
	}
	.page-case-study .case-top::before {
		top: calc(-1 * var(--header-offset-sm));
		height: calc(13 * var(--grid-tile-sm));
		background-size: var(--grid-tile-sm) var(--grid-tile-sm);
	}
	.page-case-study .case-hero {
		--case-hero-gap: 20px;
		margin-top: 28px;
	}
	.page-case-study .case-hero__body {
		display: contents;
	}
	.page-case-study .case-hero__logo {
		order: 1;
	}
	.page-case-study .case-hero__logo img {
		width: auto;
		height: auto;
		max-width: 220px;
		max-height: 56px;
		object-fit: contain;
		object-position: left center;
	}
	.page-case-study .case-hero__title {
		order: 2;
		font-size: var(--text-lg);
		letter-spacing: var(--ls-display);
	}
	.page-case-study .case-hero__image,
	.page-case-study .case-split__media {
		border-radius: 20px;
	}
	.page-case-study .case-hero__image {
		order: 3;
		margin-block: 8px;
	}
	.page-case-study .case-hero__facts {
		order: 4;
		gap: 20px;
	}
	.page-case-study .case-hero__fact {
		gap: 8px;
	}
	.page-case-study .case-hero__fact dd {
		font-size: var(--text-base);
		line-height: 1.35;
		color: var(--color-cream);
	}
	.page-case-study .case-hero__stat {
		order: 5;
		gap: 8px;
	}
	.page-case-study .case-hero__stat-value {
		font-size: var(--text-display-s);
		line-height: 1;
	}
	.page-case-study .case-hero__stat-label {
		font-size: var(--text-4xs);
		line-height: 1.2;
	}
	.page-case-study .case-body .case-eyebrow {
		font-size: var(--text-lg);
	}
	.page-case-study .case-body .case-title {
		font-size: var(--text-display-xs);
		line-height: 1.1;
	}
	.page-case-study .case-prose,
	.page-case-study .case-head > p:not(.case-eyebrow) {
		font: var(--body-m);
	}
	.page-case-study .case-prose > * + * {
		margin-top: 1.35em;
	}
	.page-case-study .case-back {
		display: flex;
		width: fit-content;
		margin: 40px 0 0;
		gap: 10px;
		font-size: var(--text-2xs);
		line-height: 1.35;
	}
	.page-case-study .case-back__arrow {
		width: 9px;
		height: 10px;
	}
	.page-case-study .case-body {
		padding-block: 64px 0;
	}
	.page-case-study .case-split {
		row-gap: 12px;
		align-items: stretch;
	}
	.page-case-study .case-split__body {
		display: contents;
	}
	.page-case-study .case-split__body > .case-eyebrow {
		order: 1;
	}
	.page-case-study .case-split__body > .case-title {
		order: 2;
	}
	.page-case-study .case-split__media {
		order: 3;
		height: auto;
		min-height: 0;
		margin-block: 12px;
	}
	.page-case-study .case-split__body > .case-prose {
		order: 4;
	}
	.page-case-study .case-solution__bulb {
		top: -18px;
		right: 0;
		width: 50px;
	}
	.page-case-study .case-showcase--band img {
		height: var(--case-band-height);
		object-fit: cover;
		object-position: center;
		border-radius: 20px;
	}
	.page-case-study .case-showcase--panels {
		gap: 24px;
	}
	.page-case-study .case-showcase--offset img {
		border-radius: 20px;
	}
	.page-case-study .case-showcase--square img {
		max-width: 258px;
	}
}
