.case-study,
.case-study-hero,
.case-study-cta,
.cs-pdf-doc {
	--cs-ink:     var( --yd-heading );
	--cs-body:    var( --yd-body );
	--cs-accent:  var( --yd-primary );
	--cs-accent-rgb: 255, 57, 81;
	--cs-line:    var( --yd-line );
	--cs-dark:    #101112;
	--cs-dark-2:  #171819;
	--cs-soft:    #f5f5f3;
	--cs-invert:  #d5d6d7;
	--cs-measure: 1360px;
	--cs-header:  96px;
	font-family: var( --yd-font );
}

.case-study {
	scroll-behavior: smooth;
	display: block;
}

.case-study-hero {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	display: flex;
	align-items: center;
	min-height: min( 88vh, 780px );
	padding: 120px 0 90px;
	background: var( --cs-dark );
	color: #fff;
}

/* Oversized watermark word, purely decorative. */
.case-study-hero::before {
	content: "CASE STUDY";
	position: absolute;
	right: -0.04em;
	bottom: 0.06em;
	z-index: -1;
	font-size: clamp( 90px, 17vw, 250px );
	font-weight: 800;
	line-height: 1;
	letter-spacing: -0.08em;
	color: rgba( 255, 255, 255, 0.04 );
	pointer-events: none;
	user-select: none;
}

.case-study-hero__media {
	position: absolute;
	inset: 0;
	z-index: -2;
}

.case-study-hero__media-img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: 0.28;
}

.case-study-hero__media::after {
	content: "";
	position: absolute;
	inset: 0;
	background:
		radial-gradient( circle at 84% 22%, rgba( 255, 57, 81, 0.30 ), transparent 30% ),
		linear-gradient( 100deg, rgba( 16, 17, 18, 0.96 ) 32%, rgba( 16, 17, 18, 0.68 ) 100% );
}

.case-study-hero__grid {
	display: grid;
	grid-template-columns: minmax( 0, 1.45fr ) minmax( 0, 360px );
	gap: clamp( 40px, 5vw, 80px );
	align-items: end;
	max-width: var( --cs-measure );
	margin: 0 auto;
}

.case-study-hero__copy {
	min-width: 0;
}

.case-study-hero__eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	margin: 0 0 26px;
	font-size: 12px;
	font-weight: 800;
	line-height: 1;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: #fff;
}

.case-study-hero__eyebrow::before {
	content: "";
	width: 42px;
	height: 2px;
	background: var( --cs-accent );
}

.case-study-hero__title {
	margin: 0;
	max-width: 18ch;
	color: #fff;
	font-size: clamp( 34px, 5.2vw, 72px );
	font-weight: 800;
	line-height: 1.02;
	letter-spacing: -0.035em;
}

.case-study-hero__lead {
	margin: 28px 0 0;
	max-width: 62ch;
	color: #cfd0d2;
	font-size: clamp( 16px, 1.2vw, 19px );
	line-height: 1.65;
}

/* Customer fact panel. */
.case-study-hero__facts {
	margin: 0;
	min-width: 0;
	padding: 28px;
	border: 1px solid rgba( 255, 255, 255, 0.14 );
	border-radius: 24px;
	background: rgba( 255, 255, 255, 0.06 );
	backdrop-filter: blur( 12px );
}

.case-study-hero__fact {
	padding: 17px 0;
	border-bottom: 1px solid rgba( 255, 255, 255, 0.13 );
}

.case-study-hero__fact:first-child { padding-top: 0; }

.case-study-hero__fact:last-child {
	padding-bottom: 0;
	border-bottom: 0;
}

.case-study-hero__fact-label {
	margin: 0 0 5px;
	color: #92959b;
	font-size: 10px;
	font-weight: 700;
	line-height: 1;
	letter-spacing: 0.13em;
	text-transform: uppercase;
}

.case-study-hero__fact-value {
	margin: 0;
	color: #fff;
	font-size: 17px;
	font-weight: 600;
	line-height: 1.35;
	overflow-wrap: anywhere;
}

.case-study-hero__bar {
	position: absolute;
	right: 0;
	bottom: 0;
	left: 0;
	border-top: 1px solid rgba( 255, 255, 255, 0.1 );
}

.case-study-hero__bar-inner {
	display: flex;
	justify-content: space-between;
	gap: 20px;
	padding-top: 18px;
	padding-bottom: 18px;
	color: #999ca1;
	font-size: 12px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}


/*--------------------------------------------------------------
# 3. Layout + table of contents
--------------------------------------------------------------*/
.case-study__layout {
	display: grid;
	grid-template-columns: 220px minmax( 0, 1fr );
	gap: clamp( 40px, 5vw, 80px );
	max-width: var( --cs-measure );
	margin: 0 auto;
	padding: clamp( 60px, 7vw, 95px ) 0;
}

.case-study__body {
	min-width: 0;
}

.case-study__toc {
	position: sticky;
	top: calc( var( --cs-header ) + 24px );
	z-index: 20;
	align-self: start;
	min-width: 0;
}

.case-study__toc-title {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0 0 20px;
	color: var( --cs-ink );
	font-size: 10px;
	font-weight: 800;
	line-height: 1;
	letter-spacing: 0.18em;
	text-transform: uppercase;
}

.case-study__toc-title::before {
	content: "";
	width: 22px;
	height: 2px;
	background: var( --cs-accent );
}

.case-study__toc-list {
	position: relative;
	display: block;
	margin: 0;
	padding: 0 0 0 24px;
	list-style: none;
}

/* Track. */
.case-study__toc-list::before,
.case-study__toc-list::after {
	content: "";
	position: absolute;
	left: 5px;
	top: 14px;
	width: 2px;
	border-radius: 2px;
}

.case-study__toc-list::before {
	bottom: 14px;
	background: var( --cs-line );
}


.case-study__toc-list::after {
	height: calc( ( 100% - 28px ) * var( --cs-toc-progress, 0 ) );
	background: var( --cs-accent );
	transition: height 0.35s ease;
}

.case-study__toc-item {
	position: relative;
}

/* Node on the rail. */
.case-study__toc-item::before {
	content: "";
	position: absolute;
	left: -22px;
	top: 14px;
	z-index: 1;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: #fff;
	box-shadow: 0 0 0 2px var( --cs-line );
	transition: background 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease;
}

.case-study__toc-item.is-active::before {
	background: var( --cs-accent );
	box-shadow: 0 0 0 3px rgba( var( --cs-accent-rgb ), 0.2 );
	transform: scale( 1.15 );
}

.case-study__toc-link {
	display: block;
	padding: 8px 0;
	color: var( --cs-body );
	font-size: 13px;
	line-height: 1.4;
	transition: color 0.2s ease, transform 0.2s ease;
}

.case-study__toc-link:hover,
.case-study__toc-link:focus-visible {
	color: var( --cs-accent );
	transform: translateX( 4px );
}

/* Scroll-spy state, set by js/case-study.js. Colour, weight AND the rail node
   all change, so the active item never relies on hue alone. */
.case-study__toc-link.is-active {
	color: var( --cs-ink );
	font-weight: 700;
}

.case-study__toc-link:focus-visible,
.case-study__pdf-btn:focus-visible,
.case-study-cta__btn:focus-visible {
	outline: 2px solid var( --cs-accent );
	outline-offset: 3px;
}


/*--------------------------------------------------------------
# 3b. Download PDF button
--------------------------------------------------------------*/
/* Sits above the index nav, so the rule divides it from the list below. */
.case-study__toc-actions {
	margin-bottom: 22px;
	padding-bottom: 22px;
	border-bottom: 1px solid var( --cs-line );
}

.case-study__pdf-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 9px;
	width: 100%;
	padding: 13px 16px;
	border: 1px solid var( --cs-accent );
	border-radius: 100px;
	background: var( --cs-accent );
	color: #fff;
	font-family: inherit;
	font-size: 13px;
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: 0.01em;
	cursor: pointer;
	transition: border-color 0.2s ease, background 0.2s ease, color 0.2s ease;
}

.case-study__pdf-btn:hover {
	border-color: #000;
	background: #000;
	color: #fff;
}

.case-study__pdf-btn[disabled] {
	cursor: progress;
	opacity: 0.75;
}

/* Hovering a disabled button must not imply it is still actionable. */
.case-study__pdf-btn[disabled]:hover {
	border-color: var( --cs-accent );
	background: var( --cs-accent );
}

.case-study__pdf-btn-icon {
	display: grid;
	place-items: center;
	flex: 0 0 auto;
	width: 17px;
	height: 17px;
	color: currentColor;
}

.case-study__pdf-btn-icon svg {
	width: 100%;
	height: 100%;
}

/* Spinning ring while the document is being built. */
.case-study__pdf-btn.is-busy .case-study__pdf-btn-icon {
	border: 2px solid rgba( 255, 255, 255, 0.35 );
	border-top-color: #fff;
	border-radius: 50%;
	animation: cs-pdf-spin 0.7s linear infinite;
}

.case-study__pdf-btn.is-busy .case-study__pdf-btn-icon svg {
	display: none;
}

@keyframes cs-pdf-spin {
	to { transform: rotate( 360deg ); }
}

.case-study__pdf-status {
	margin: 10px 0 0;
	color: var( --cs-body );
	font-size: 12px;
	line-height: 1.45;
}

.case-study__pdf-status.is-error {
	color: var( --cs-accent );
}

.case-study__body,
.cs-pdf-doc {
	counter-reset: cs-section;
}

.case-study__section {
	position: relative;
	isolation: isolate;
	counter-increment: cs-section;
	padding-bottom: clamp( 56px, 6vw, 95px );
	margin-bottom: clamp( 56px, 6vw, 95px );
	border-bottom: 1px solid var( --cs-line );

	/* Clear the sticky site header when a TOC link jumps here. */
	scroll-margin-top: calc( var( --cs-header ) + 24px );
}

/* Big ghosted section number, decorative. */
.case-study__number::before {
	content: counter( cs-section, decimal-leading-zero );
}

.case-study__number {
	position: absolute;
	top: -0.08em;
	right: 0;
	z-index: -1;
	font-size: 100px;
	font-weight: 800;
	line-height: 1;
	letter-spacing: -0.08em;
	color: #f0f0ef;
	pointer-events: none;
	user-select: none;
}

.case-study__kicker {
	margin: 0 0 15px;
	color: var( --cs-accent );
	font-size: 11px;
	font-weight: 800;
	line-height: 1.3;
	letter-spacing: 0.18em;
	text-transform: uppercase;
}

.case-study__title {
	margin: 0;
	max-width: 20ch;
	color: var( --cs-ink );
	font-size: clamp( 28px, 4vw, 52px );
	font-weight: 800;
	line-height: 1.08;
	letter-spacing: -0.03em;
}

.case-study__rule {
	display: block;
	width: 74px;
	height: 4px;
	margin: 25px 0 30px;
	background: var( --cs-accent );
}


/*--------------------------------------------------------------
# 5. Prose
--------------------------------------------------------------*/
.case-study__prose {
	max-width: 82ch;
	color: var( --cs-body );
}

.case-study__prose p {
	margin: 0 0 20px;
	font-size: 17px;
	line-height: 1.75;
}

.case-study__prose p:last-child { margin-bottom: 0; }

.case-study__prose ul li{
position: relative;
    padding-left: 20px;
    color: #14142b;
    font-size: 16px;
    line-height: 1.7;
} 

.case-study__prose ul li::before {
    content: "";
    position: absolute;
    top: 0.66em;
    left: 2px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--cs-accent);
}



.case-study__lead {
	color: var( --cs-ink );
	font-size: clamp( 18px, 1.4vw, 21px );
	line-height: 1.6;
}

.case-study__prose-label {
	color: var( --cs-ink );
	font-weight: 700;
}

.case-study__prose--after {
	margin-top: 40px;
}


/*--------------------------------------------------------------
# 6. Panels
--------------------------------------------------------------*/
.case-study__panel {
	position: relative;
	overflow: hidden;
	padding: clamp( 32px, 4vw, 58px );
	border-radius: 30px;
}

.case-study__panel::after {
	content: "";
	position: absolute;
	right: -110px;
	bottom: -160px;
	width: 320px;
	height: 320px;
	border: 1px solid rgba( 255, 57, 81, 0.45 );
	border-radius: 50%;
	pointer-events: none;
}

.case-study__panel--dark {
	background: #151617;
}

.case-study__panel--why {
	background:
		linear-gradient( 120deg, rgba( 255, 57, 81, 0.18 ), transparent 45% ),
		#111213;
}

.case-study__panel .case-study__prose {
	position: relative;
	z-index: 1;
	max-width: 92ch;
	color: var( --cs-invert );
}

.case-study__panel .case-study__lead {
	color: #fff;
	font-size: clamp( 19px, 1.6vw, 24px );
}


/*--------------------------------------------------------------
# 7. Figure
--------------------------------------------------------------*/
.case-study__figure {
	margin: 42px 0 0;
	overflow: hidden;
	border-radius: 26px;
}

.case-study__figure img {
	width: 100%;
	object-fit: cover;
}


/*--------------------------------------------------------------
# 8. Challenge cards
--------------------------------------------------------------*/
.case-study__cards {
	display: grid;
	grid-template-columns: repeat( 3, minmax( 0, 1fr ) );
	gap: 18px;
	margin-top: 42px;
}

.case-study__card {
	display: flex;
	flex-direction: column;
	min-width: 0;
	padding: 28px;
	border: 1px solid var( --cs-line );
	border-radius: 24px;
	background: #fff;
	transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.case-study__card:hover {
	transform: translateY( -6px );
	box-shadow: 0 20px 45px rgba( 0, 0, 0, 0.08 );
}

.case-study__card-num {
	display: grid;
	place-items: center;
	width: 36px;
	height: 36px;
	margin-bottom: 28px;
	border-radius: 50%;
	background: var( --cs-accent );
	color: #fff;
	font-size: 12px;
	font-weight: 800;
	line-height: 1;
}

.case-study__card-title {
	margin: 0 0 12px;
	color: var( --cs-ink );
	font-size: 22px;
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: -0.02em;
}

.case-study__card-text p {
	margin: 0 0 14px;
	color: var( --cs-body );
	font-size: 15px;
	line-height: 1.7;
}

.case-study__card-text p:last-child { margin-bottom: 0; }


/*--------------------------------------------------------------
# 9. Solution cards
--------------------------------------------------------------*/
.case-study__solutions {
	display: grid;
	grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
	gap: 18px;
	margin-top: 42px;
}

.case-study__solution {
	position: relative;
	overflow: hidden;
	min-width: 0;
	padding: clamp( 26px, 2.6vw, 34px );
	border-radius: 26px;
	background: var( --cs-dark-2 );
	color: #fff;
}

/* Stepped shades come from the DOM order, never from markup — so an ACF
   repeater of any length keeps the same rhythm. */
.case-study__solution:nth-child( 4n + 2 ) { background: #222326; }
.case-study__solution:nth-child( 4n + 3 ) { background: #2b2c2f; }
.case-study__solution:nth-child( 4n + 4 ) { background: #333438; }

.case-study__solution::after {
	content: "";
	position: absolute;
	right: -55px;
	bottom: -75px;
	width: 180px;
	height: 180px;
	border: 1px solid rgba( 255, 255, 255, 0.09 );
	border-radius: 50%;
	pointer-events: none;
}

.case-study__solution-head {
	position: relative;
	z-index: 1;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	margin-bottom: 40px;
}

.case-study__solution-head .case-study__card-num {
	margin-bottom: 0;
}

/* ACF: solution_items > image/icon. Fixed box, so swapping the inline SVG for
   an uploaded image needs no CSS change. */
.case-study__solution-icon {
	display: grid;
	place-items: center;
	flex: 0 0 auto;
	width: 40px;
	height: 40px;
	color: rgba( 255, 255, 255, 0.55 );
}

.case-study__solution-icon svg,
.case-study__solution-icon img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.case-study__solution-title {
	position: relative;
	z-index: 1;
	margin: 0 0 12px;
	color: #fff;
	font-size: 22px;
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: -0.02em;
}

.case-study__solution-text {
	position: relative;
	z-index: 1;
	max-width: 60ch;
}

.case-study__solution-text p {
	margin: 0 0 14px;
	color: #bfc0c3;
	font-size: 15px;
	line-height: 1.7;
}

.case-study__solution-text p:last-child { margin-bottom: 0; }

/* Staggered reveal (js/case-study.js). Default state is fully visible, so
   no-JS and reduced-motion users see everything. */
.case-study__card.is-anim,
.case-study__solution.is-anim {
	opacity: 0;
	transform: translateY( 26px );
	transition: opacity 0.6s ease, transform 0.6s ease;
}

.case-study__card.is-anim.is-visible,
.case-study__solution.is-anim.is-visible {
	opacity: 1;
	transform: none;
}


/*--------------------------------------------------------------
# 10. Outcomes
--------------------------------------------------------------*/
.case-study__outcomes {
	display: grid;
	grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
	column-gap: 40px;
	margin: 45px 0 0;
	padding: 0;
	border-top: 1px solid var( --cs-line );
	list-style: none;
}

.case-study__outcome {
	display: flex;
	align-items: flex-start;
	gap: 11px;
	min-width: 0;
	padding: 25px 30px 25px 0;
	border-bottom: 1px solid var( --cs-line );
	color: var( --cs-ink );
	font-size: 16px;
	line-height: 1.6;
}

.case-study__outcome::before {
	content: "\2713";
	display: grid;
	place-items: center;
	flex: 0 0 auto;
	width: 25px;
	height: 25px;
	margin-top: 2px;
	border-radius: 50%;
	background: #fff0f0;
	color: var( --cs-accent );
	font-size: 13px;
	font-weight: 800;
	line-height: 1;
}


/*--------------------------------------------------------------
# 11. Technologies
--------------------------------------------------------------*/
.case-study__tech {
	display: grid;
	grid-template-columns: repeat( auto-fit, minmax( 260px, 1fr ) );
	gap: 14px;
	margin: 38px 0 0;
}

.case-study__tech-item {
	min-width: 0;
	padding: 22px 24px;
	border: 1px solid var( --cs-line );
	border-radius: 20px;
	background: #fff;
	transition: border-color 0.25s ease;
}

.case-study__tech-item:hover {
	border-color: var( --cs-accent );
}

.case-study__tech-label {
	margin: 0 0 8px;
	color: var( --cs-accent );
	font-size: 11px;
	font-weight: 800;
	line-height: 1.2;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

.case-study__tech-value {
	margin: 0;
	color: var( --cs-ink );
	font-size: 16px;
	font-weight: 600;
	line-height: 1.5;
	overflow-wrap: anywhere;
}


/*--------------------------------------------------------------
# 11b. Numbered list  (layout: grouped_list)
--------------------------------------------------------------*/
.case-study__groups {
	counter-reset: cs-group;
	margin: 38px 0 0;
	padding: 0;
	list-style: none;
}

.case-study__group {
	counter-increment: cs-group;
	position: relative;
	padding-left: 46px;
}

.case-study__group + .case-study__group {
	margin-top: 34px;
}

/* The number is generated, so adding or reordering a group cannot leave the
   sequence wrong. */
.case-study__group::before {
	content: counter( cs-group ) ".";
	position: absolute;
	top: 0;
	left: 0;
	width: 34px;
	color: var( --cs-accent );
	font-size: 21px;
	font-weight: 800;
	line-height: 1.3;
	letter-spacing: -0.01em;
	text-align: right;
}

.case-study__group-title {
	margin: 0 0 12px;
	color: var( --cs-ink );
	font-size: clamp( 19px, 1.7vw, 23px );
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: -0.01em;
}

.case-study__group-list {
	margin: 0;
	padding: 0;
	list-style: none;
	max-width: 78ch;
}

.case-study__group-item {
	position: relative;
	padding-left: 20px;
	color: var( --cs-body );
	font-size: 16px;
	line-height: 1.7;
}

.case-study__group-item + .case-study__group-item {
	margin-top: 7px;
}

.case-study__group-item::before {
	content: "";
	position: absolute;
	top: 0.66em;
	left: 2px;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var( --cs-accent );
}

/* Closing callout. The reference art used orange; brand red keeps it in step
   with the outcome ticks and the section rules. */
.case-study__callout {
	position: relative;
	max-width: 82ch;
	margin: 34px 0 0;
	padding: 22px 26px;
	border: 1px solid rgba( var( --cs-accent-rgb ), 0.28 );
	border-left: 4px solid var( --cs-accent );
	border-radius: 0 16px 16px 0;
	background: #fff5f6;
}
.case-study__callout.greencallout{
	border: 1px solid rgb(39 118 11 / 28%);
	border-left: 4px solid #389410;
	background: #0d8a1430;
}

.case-study__callout-title {
	margin: 0 0 6px;
	color: var( --cs-accent );
	font-size: 16px;
	font-weight: 800;
	line-height: 1.4;
}
.case-study__callout-title.greentitle {
	color: #389410;
}

.case-study__callout-text {
	color: var( --cs-ink );
}

.case-study__callout-text p {
	margin: 0 0 12px;
	font-size: 16px;
	line-height: 1.7;
}

.case-study__callout-text p:last-child {
	margin-bottom: 0;
}


/*--------------------------------------------------------------
# 11c. Data table  (layout: table)
--------------------------------------------------------------*/

/* Scrolls rather than crushing its columns. --cs-cols is set inline from the
   column count, so the point at which it starts scrolling tracks the real
   width of the table instead of a guessed breakpoint. */
.case-study__table-wrap {
	margin: 38px 0 0;
	overflow-x: auto;
	border: 1px solid var( --cs-line );
	border-radius: 16px;
	-webkit-overflow-scrolling: touch;
	overscroll-behavior-x: contain;
}

.case-study__table-wrap:focus-visible {
	outline: 2px solid var( --cs-accent );
	outline-offset: 3px;
}

.case-study__table {
	width: 100%;
	min-width: calc( var( --cs-cols, 4 ) * 158px );
	border-collapse: collapse;
	font-size: 15px;
}

.case-study__table th,
.case-study__table td {
	padding: 15px 18px;
	text-align: left;
	vertical-align: top;
	line-height: 1.6;
	border-right: 1px solid var( --cs-line );
	border-bottom: 1px solid var( --cs-line );
}

.case-study__table th:last-child,
.case-study__table td:last-child {
	border-right: 0;
}

.case-study__table tbody tr:last-child th,
.case-study__table tbody tr:last-child td {
	border-bottom: 0;
}

/* Header bar. The reference art used navy; brand red keeps the table in step
   with the section rules and the outcome ticks. */
.case-study__table thead th {
	position: sticky;
	top: 0;
	background: var( --cs-accent );
	color: #fff;
	font-size: 13px;
	font-weight: 800;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	white-space: nowrap;
	border-bottom: 0;
	border-right-color: rgba( 255, 255, 255, 0.26 );
}

.case-study__table tbody tr:nth-child( odd ) {
	background: #fff5f6;
}

/* First cell of each row is a row header: same size as the body, a little
   heavier, so it reads as the label without shouting. */
.case-study__table tbody th {
	font-weight: 600;
	color: var( --cs-ink );
}

.case-study__table tbody td {
	color: var( --cs-body );
}


/*--------------------------------------------------------------
# 12. Project highlights
--------------------------------------------------------------*/
.case-study__highlights {
	margin: 38px 0 0;
	overflow: hidden;
	border: 1px solid var( --cs-line );
	border-radius: 25px;
}

.case-study__highlights-head {
	display: grid;
	grid-template-columns: 210px minmax( 0, 1fr );
	border-bottom: 1px solid var( --cs-line );
	background: var( --cs-ink );
}

.case-study__highlights-col {
	padding: 16px 26px;
	color: #fff;
	font-size: 11px;
	font-weight: 800;
	line-height: 1.2;
	letter-spacing: 0.16em;
	text-transform: uppercase;
}

.case-study__highlights-list {
	margin: 0;
}

.case-study__highlight {
	display: grid;
	grid-template-columns: 210px minmax( 0, 1fr );
	border-bottom: 1px solid var( --cs-line );
}

.case-study__highlight:last-child { border-bottom: 0; }

.case-study__highlight-label {
	margin: 0;
	padding: 22px 26px;
	background: var( --cs-soft );
	color: var( --cs-ink );
	font-size: 14px;
	font-weight: 700;
	line-height: 1.5;
	letter-spacing: 0.02em;
}

.case-study__highlight-value {
	margin: 0;
	min-width: 0;
	padding: 22px 26px;
	color: var( --cs-body );
	font-size: 16px;
	line-height: 1.6;
	overflow-wrap: anywhere;
}


/*--------------------------------------------------------------
# 13. SEO keywords
--------------------------------------------------------------*/
.case-study__seo {
	display: block;
	padding: clamp( 28px, 3vw, 40px );
	border-radius: 26px;
	background: var( --cs-soft );
	scroll-margin-top: calc( var( --cs-header ) + 24px );
}

.case-study__seo-title {
	margin: 0 0 10px;
	color: var( --cs-ink );
	font-size: 18px;
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: 0.02em;
}

.case-study__seo-intro {
	margin: 0 0 22px;
	max-width: 70ch;
	color: var( --cs-body );
	font-size: 15px;
	line-height: 1.65;
}

.case-study__keywords {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.case-study__keyword {
	display: inline-block;
	padding: 10px 16px;
	border: 1px solid var( --cs-line );
	border-radius: 100px;
	background: #fff;
	color: var( --cs-body );
	font-size: 13px;
	line-height: 1.4;
	overflow-wrap: anywhere;
}


/*--------------------------------------------------------------
# 14. CTA
--------------------------------------------------------------*/
.case-study-cta {
	display: block;
	margin: 0;
	background: transparent;
}

.case-study-cta__inner {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 28px 40px;
	padding: clamp( 44px, 5vw, 68px ) clamp( 26px, 4vw, 56px );
	border: 1px solid rgba( 255, 255, 255, 0.08 );
	border-radius: 32px;
	text-align: left;
	background: var( --cs-dark );
}

/* ACF: cta_background_image. Fills the card behind the gradient overlay. */
.case-study-cta__media {
	position: absolute;
	inset: 0;
	z-index: -2;
}

.case-study-cta__media-img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.case-study-cta__media::after {
	content: "";
	position: absolute;
	inset: 0;
	background:
		radial-gradient( circle at 86% 8%, rgba( var( --cs-accent-rgb ), 0.72 ), transparent 55% ),
		radial-gradient( circle at 6% 96%, rgba( var( --cs-accent-rgb ), 0.38 ), transparent 52% ),
		linear-gradient( 135deg, rgba( 35, 36, 42, 0.93 ) 0%, rgba( 19, 20, 23, 0.90 ) 52%, rgba( 42, 21, 25, 0.92 ) 100% );
}

/* Decorative ring, echoing the panels above. */
.case-study-cta__inner::after {
	content: "";
	position: absolute;
	right: -90px;
	bottom: -140px;
	z-index: -1;
	width: 300px;
	height: 300px;
	border: 1px solid rgba( 255, 255, 255, 0.10 );
	border-radius: 50%;
	pointer-events: none;
}

.case-study-cta__title {
	flex: 1 1 380px;
	margin: 0;
	min-width: 0;
	max-width: 24ch;
	color: #fff;
	font-size: clamp( 26px, 3vw, 40px );
	font-weight: 800;
	line-height: 1.15;
	letter-spacing: -0.02em;
}

.case-study-cta .case-study-cta__btn {
	flex: 0 0 auto;
	border-color: #fff;
	background: #fff;
	color: var( --cs-ink );
}

.case-study-cta .case-study-cta__btn:hover {
	border-color: var( --cs-accent );
	background: var( --cs-accent );
	color: #fff;
}


/*--------------------------------------------------------------
# 15. Responsive
--------------------------------------------------------------*/
@media ( max-width: 1200px ) {

	.case-study-hero__grid {
		grid-template-columns: minmax( 0, 1fr );
		gap: 40px;
		align-items: start;
	}

	.case-study-hero__facts {
		max-width: 520px;
	}
}

@media ( max-width: 1024px ) {

	.case-study__layout {
		grid-template-columns: minmax( 0, 1fr );
		gap: 0;
	}

	.case-study__toc {
		position: sticky;
		top: var( --cs-header );
		display: flex;
		align-items: center;
		gap: 12px;
		margin-bottom: 40px;
		padding: 12px 0;
		border-bottom: 1px solid var( --cs-line );
		background: #fff;
	}

	.case-study__toc-nav {
		min-width: 0;
		flex: 1 1 auto;
	}

	.case-study__toc-title {
		display: none;
	}

	.case-study__toc-actions {
		order: 1;
		flex: 0 0 auto;
		margin-bottom: 0;
		padding-bottom: 0;
		border-bottom: 0;
	}

	.case-study__pdf-btn {
		width: auto;
		padding: 9px 15px;
	}

	.case-study__pdf-status {
		position: absolute;
		width: 1px;
		height: 1px;
		margin: -1px;
		padding: 0;
		overflow: hidden;
		clip: rect( 0 0 0 0 );
		white-space: nowrap;
	}

	.case-study__toc-list {
		display: flex;
		gap: 8px;
		padding-left: 0;
		overflow-x: auto;
		overscroll-behavior-x: contain;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
	}

	.case-study__toc-list::-webkit-scrollbar {
		display: none;
	}

	/* The vertical rail and its nodes have no meaning in a horizontal strip. */
	.case-study__toc-list::before,
	.case-study__toc-list::after,
	.case-study__toc-item::before {
		display: none;
	}

	.case-study__toc-link {
		display: flex;
		align-items: center;
		gap: 7px;
		padding: 9px 16px;
		border: 1px solid var( --cs-line );
		border-radius: 100px;
		white-space: nowrap;
	}

	.case-study__toc-link:hover,
	.case-study__toc-link:focus-visible {
		transform: none;
		border-color: var( --cs-accent );
	}

	.case-study__toc-link.is-active {
		border-color: var( --cs-accent );
		background: var( --cs-accent );
		color: #fff;
	}
}

@media ( max-width: 900px ) {

	.case-study-hero {
		min-height: 0;
		padding: 80px 0 76px;
	}

	.case-study__number {
		display: none;
	}

	.case-study__cards {
		grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
	}

	.case-study__solutions,
	.case-study__outcomes {
		grid-template-columns: minmax( 0, 1fr );
	}

	.case-study__outcome {
		padding-right: 0;
	}

	/* The two-column header row has no meaning once the rows stack. */
	.case-study__highlights-head {
		display: none;
	}

	.case-study__highlight {
		grid-template-columns: minmax( 0, 1fr );
	}

	.case-study__highlight-label {
		padding-bottom: 0;
		background: transparent;
		color: var( --cs-accent );
		font-size: 11px;
		letter-spacing: 0.14em;
		text-transform: uppercase;
	}

	.case-study__highlight-value {
		padding-top: 10px;
	}
}

@media ( max-width: 782px ) {

	/* Match the theme's reduced header height under the WP admin-bar breakpoint. */
	.case-study,
	.case-study-hero,
	.case-study-cta {
		--cs-header: 78px;
	}
}

@media ( max-width: 640px ) {
	/* Tighter gutter for the generated numbers, so the bullets keep their
	   measure on a narrow screen. */
	.case-study__group {
		padding-left: 32px;
	}

	.case-study__group::before {
		width: 22px;
		font-size: 18px;
	}

	.case-study__callout {
		padding: 18px 18px 18px 20px;
	}

	.case-study__table {
		font-size: 14px;
	}

	.case-study__table th,
	.case-study__table td {
		padding: 12px 14px;
	}

	.case-study__toc {
		flex-direction: column;
		align-items: stretch;
		gap: 10px;
		padding: 10px 0;
	}

	.case-study__toc-actions {
		order: 0;
	}

	.case-study__pdf-btn {
		width: 100%;
		padding: 11px 16px;
		font-size: 12px;
	}

	.case-study__toc-link {
		gap: 6px;
		padding: 8px 14px;
		font-size: 12px;
	}

	.case-study__toc-list {
		-webkit-mask-image: linear-gradient( to right, #000 calc( 100% - 24px ), transparent );
		        mask-image: linear-gradient( to right, #000 calc( 100% - 24px ), transparent );
	}

	.case-study__cards {
		grid-template-columns: minmax( 0, 1fr );
	}

	.case-study-hero__bar {
		display: none;
	}

	.case-study-hero {
		padding-bottom: 60px;
	}

	.case-study-hero__facts {
		padding: 22px;
	}

	.case-study__panel {
		border-radius: 22px;
	}

	.case-study__panel::after {
		display: none;
	}

	.case-study__card,
	.case-study__solution {
		padding: 24px;
	}

	.case-study__figure {
		border-radius: 18px;
	}

	.case-study-cta__inner {
		border-radius: 24px;
	}

	.case-study-cta__inner::after {
		display: none;
	}
	.case-study-cta .case-study-cta__btn {
		width: 100%;
		justify-content: center;
	}
}


/*--------------------------------------------------------------
# 16. Reduced motion + print
--------------------------------------------------------------*/
@media ( prefers-reduced-motion: reduce ) {

	.case-study {
		scroll-behavior: auto;
	}

	.case-study__toc-link,
	.case-study__card,
	.case-study__tech-item,
	.case-study__solution {
		transition: none;
	}

	.case-study__card:hover,
	.case-study__solution:hover {
		transform: none;
	}

	.case-study__card.is-anim,
	.case-study__solution.is-anim {
		opacity: 1;
		transform: none;
	}
}

@media print {

	.case-study__toc,
	.case-study-hero__bar,
	.case-study-cta {
		display: none;
	}

	.case-study__section {
		break-inside: avoid;
	}
}

.cs-pdf-doc {
	position: absolute;
	top: 0;
	left: -10000px;
	z-index: -1;
	background: #fff;
	color: var( --cs-body );
	font-family: var( --yd-font );
}

.cs-pdf-doc .cs-pdf-block,
.cs-pdf-doc .case-study__section {
	padding-bottom: 24px;
	margin-bottom: 24px;
	border-bottom: 1px solid var( --cs-line );
}

.cs-pdf-doc .cs-pdf-block:last-child {
	padding-bottom: 0;
	margin-bottom: 0;
	border-bottom: 0;
}

.cs-pdf-doc .case-study__number {
	display: none;
}

/* --- Cover --- */
.cs-pdf-doc .case-study-hero__eyebrow {
	margin-bottom: 14px;
	color: var( --cs-accent );
	font-size: 10px;
}

.cs-pdf-doc .case-study-hero__title {
	max-width: none;
	color: var( --cs-ink );
	font-size: 30px;
	line-height: 1.14;
}

.cs-pdf-doc .case-study-hero__lead {
	max-width: none;
	margin-top: 14px;
	color: var( --cs-body );
	font-size: 14px;
	line-height: 1.6;
}

.cs-pdf-doc .case-study-hero__facts {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0 26px;
	max-width: none;
	margin-top: 20px;
	padding: 16px 20px;
	border: 1px solid var( --cs-line );
	border-radius: 12px;
	background: var( --cs-soft );
	backdrop-filter: none;
}

.cs-pdf-doc .case-study-hero__fact {
	padding: 9px 0;
	border-bottom: 0;
}

.cs-pdf-doc .case-study-hero__fact-label {
	color: var( --cs-body );
	font-size: 9px;
}

.cs-pdf-doc .case-study-hero__fact-value {
	color: var( --cs-ink );
	font-size: 12.5px;
}

.cs-pdf-doc .case-study__kicker {
	margin-bottom: 7px;
	font-size: 9px;
	letter-spacing: 0.16em;
}

.cs-pdf-doc .case-study__title {
	max-width: none;
	font-size: 23px;
	line-height: 1.15;
	letter-spacing: -0.015em;
}

.cs-pdf-doc .case-study__rule {
	width: 46px;
	height: 3px;
	margin: 12px 0 15px;
}

/* --- Prose --- */
.cs-pdf-doc .case-study__prose {
	max-width: none;
}

.cs-pdf-doc .case-study__prose p {
	margin-bottom: 9px;
	font-size: 12.5px;
	line-height: 1.62;
}

.cs-pdf-doc .case-study__lead {
	font-size: 13.5px;
	line-height: 1.55;
}

.cs-pdf-doc .case-study__prose--after {
	margin-top: 16px;
}

/* --- Panels: dark surfaces become light, accented blocks --- */
.cs-pdf-doc .case-study__panel {
	padding: 20px 22px;
	border: 1px solid var( --cs-line );
	border-left: 3px solid var( --cs-accent );
	border-radius: 12px;
	background: var( --cs-soft );
}

.cs-pdf-doc .case-study__panel::after {
	display: none;
}

.cs-pdf-doc .case-study__panel .case-study__prose {
	max-width: none;
	color: var( --cs-body );
}

.cs-pdf-doc .case-study__panel .case-study__lead {
	color: var( --cs-ink );
}

/* --- Cards and solutions: one column, light --- */
.cs-pdf-doc .case-study__cards,
.cs-pdf-doc .case-study__solutions {
	display: block;
	margin-top: 16px;
}

.cs-pdf-doc .case-study__card,
.cs-pdf-doc .case-study__solution {
	display: block;
	margin-bottom: 11px;
	padding: 16px 18px;
	border: 1px solid var( --cs-line );
	border-radius: 12px;
	break-inside: avoid;
	page-break-inside: avoid;
}

.cs-pdf-doc .case-study__solution:nth-child( n ) {
	background: #fafafa;
	color: var( --cs-body );
}

.cs-pdf-doc .case-study__solution::after {
	display: none;
}

.cs-pdf-doc .case-study__card-num {
	width: 25px;
	height: 25px;
	margin-bottom: 11px;
	font-size: 10px;
}

.cs-pdf-doc .case-study__solution-head {
	margin-bottom: 11px;
}

.cs-pdf-doc .case-study__solution-icon {
	width: 25px;
	height: 25px;
	color: var( --cs-accent );
}

.cs-pdf-doc .case-study__card-title,
.cs-pdf-doc .case-study__solution-title {
	margin-bottom: 7px;
	color: var( --cs-ink );
	font-size: 14px;
	line-height: 1.25;
}

.cs-pdf-doc .case-study__card-text p,
.cs-pdf-doc .case-study__solution-text p {
	margin-bottom: 7px;
	color: var( --cs-body );
	font-size: 12px;
	line-height: 1.58;
}

.cs-pdf-doc .case-study__solution-text {
	max-width: none;
}

/* --- Outcomes --- */
.cs-pdf-doc .case-study__outcomes {
	display: block;
	margin-top: 15px;
}

.cs-pdf-doc .case-study__outcome {
	padding: 9px 0;
	font-size: 12px;
	line-height: 1.55;
	break-inside: avoid;
	page-break-inside: avoid;
}

.cs-pdf-doc .case-study__outcome::before {
	width: 18px;
	height: 18px;
	margin-top: 1px;
	font-size: 10px;
}

/* --- Technologies --- */
.cs-pdf-doc .case-study__tech {
	grid-template-columns: 1fr 1fr;
	gap: 10px;
	margin-top: 15px;
}

.cs-pdf-doc .case-study__tech-item {
	padding: 12px 14px;
	border-radius: 10px;
	break-inside: avoid;
	page-break-inside: avoid;
}

.cs-pdf-doc .case-study__tech-label {
	margin-bottom: 5px;
	font-size: 9px;
}

.cs-pdf-doc .case-study__tech-value {
	font-size: 12px;
	line-height: 1.45;
}

/* --- Project highlights --- */
.cs-pdf-doc .case-study__highlights {
	margin-top: 15px;
	border-radius: 12px;
}

.cs-pdf-doc .case-study__highlights-col {
	padding: 10px 14px;
	font-size: 9px;
}

.cs-pdf-doc .case-study__highlight {
	grid-template-columns: 150px minmax( 0, 1fr );
	break-inside: avoid;
	page-break-inside: avoid;
}

.cs-pdf-doc .case-study__highlight-label {
	padding: 11px 14px;
	font-size: 11px;
}

.cs-pdf-doc .case-study__highlight-value {
	padding: 11px 14px;
	font-size: 12px;
	line-height: 1.5;
}

/* --- Prose lists: the PDF body is 12.5px, so the bullets follow it down.
   The gap between items is what a page break is allowed to land in. --- */
.cs-pdf-doc .case-study__prose ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

.cs-pdf-doc .case-study__prose ul li {
	margin-bottom: 8px;
	padding-left: 15px;
	font-size: 12.5px;
	line-height: 1.62;
	break-inside: avoid;
	page-break-inside: avoid;
}

.cs-pdf-doc .case-study__prose ul li:last-child {
	margin-bottom: 0;
}

.cs-pdf-doc .case-study__prose ul li::before {
	top: 0.6em;
	left: 1px;
	width: 5px;
	height: 5px;
}

/* --- Data table --- */
.cs-pdf-doc .case-study__table-wrap {
	margin-top: 15px;
	overflow: hidden;
	border-radius: 12px;
}

/* min-width is what makes the table scroll sideways on a phone. There is
   nothing to scroll on paper, so it is dropped and the columns share the
   680px the page gives them. */
.cs-pdf-doc .case-study__table {
	min-width: 0;
	table-layout: fixed;
	font-size: 11px;
}

.cs-pdf-doc .case-study__table th,
.cs-pdf-doc .case-study__table td {
	padding: 9px 11px;
	line-height: 1.5;
	word-break: break-word;
}

/* Sticky is meaningless in a still image, and it gives html2canvas a second
   reason to misplace the cell. */
/* html2canvas paints backgrounds where the browser puts them but drops text
   about 16px lower, measured. A short banded row therefore cannot hold its own
   label: the overspill lands outside the band and the next row's background is
   painted over the top of it, which is why the headings came out sliced in half.
   The bottom padding is what gives that drop somewhere to land. */
.cs-pdf-doc .case-study__table thead th {
	position: static;
	padding: 5px 11px 24px;
	font-size: 9px;
	letter-spacing: 0.06em;
	white-space: normal;
}

.cs-pdf-doc .case-study__table tbody tr {
	break-inside: avoid;
	page-break-inside: avoid;
}

/* --- Two-column table: the head must track the narrower PDF label column,
   or the headings sit to the right of the values they label. --- */
.cs-pdf-doc .case-study__highlights-head {
	grid-template-columns: 150px minmax( 0, 1fr );
}

/* Same drop as the table head above. */
.cs-pdf-doc .case-study__highlights-col {
	padding: 5px 14px 24px;
}

/* --- Figures: fixed band so a tall image can never own a whole page --- */
.cs-pdf-doc .case-study__figure {
	margin-top: 16px;
	border-radius: 10px;
	break-inside: avoid;
	page-break-inside: avoid;
}

.cs-pdf-doc .case-study__figure img {
	width: 100%;
	height: 230px;
	object-fit: cover;
}

/* ================================
   Key Outcomes Grid
================================ */

.key-outcomes-grid {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Card */
.outcome-card {
    min-width: 0;
    min-height: 170px;
    padding: 25px 30px;
    box-sizing: border-box;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    text-align: center;
}

/* Backgrounds */
.outcome-card--blue {
    background: #eaf2f7;
}

.outcome-card--light {
    background: #f1f4f6;
}

/* Borders */
.outcome-card:nth-child(1),
.outcome-card:nth-child(3) {
    border-right: 1px solid #ffffff;
}

.outcome-card:nth-child(1),
.outcome-card:nth-child(2) {
    border-bottom: 1px solid #ffffff;
}

/* Number */
.outcome-number {
    margin: 0 0 18px;

    color: #173c58;

    font-family: Arial, Helvetica, sans-serif;
    font-size: 60px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: -1px;
}

/* Title */
.outcome-title {
    max-width: 100%;

    color: #12818b;

    font-family: Arial, Helvetica, sans-serif;
    font-size: 21px;
    font-weight: 700;
    line-height: 1.25;
    text-transform: uppercase;
}


/* ================================
   Tablet
================================ */

@media (max-width: 768px) {

    .key-outcomes-grid {
        grid-template-columns: 1fr;
    }

    .outcome-card {
        min-height: 150px;
        padding: 25px 20px;
    }

    .outcome-card:nth-child(1),
    .outcome-card:nth-child(2),
    .outcome-card:nth-child(3) {
        border-right: 0;
        border-bottom: 1px solid #ffffff;
    }

    .outcome-card:nth-child(4) {
        border-bottom: 0;
    }

    .outcome-number {
        font-size: 48px;
        margin-bottom: 14px;
    }

    .outcome-title {
        font-size: 18px;
    }
}


/* ================================
   Mobile
================================ */

@media (max-width: 480px) {

    .key-outcomes-grid {
        width: 100%;
    }

    .outcome-card {
        min-height: 135px;
        padding: 22px 15px;
    }

    .outcome-number {
        font-size: 40px;
        letter-spacing: 0;
        margin-bottom: 12px;
    }

    .outcome-title {
        font-size: 15px;
        line-height: 1.3;
    }
}

/*--------------------------------------------------------------
# 20. Adjacent case studies
--------------------------------------------------------------*/

/* Two columns held by grid rather than by flex, so the older study stays on
   the left and the newer one on the right even when only one of them exists —
   at either end of the run there is just the one neighbour.

   It sits outside .case-study__layout, so it carries that grid's measure and
   centring itself in order to line up with the article above rather than being
   inset by the contents rail. .case-study__layout supplies the space above
   through its own bottom padding; the padding here closes the page. */
.case-study-adjacent {
	display: grid;
	grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
	gap: 20px;
	max-width: var( --cs-measure );
	margin: 0 auto;
	padding-bottom: clamp( 60px, 7vw, 95px );
}

.case-study-adjacent__card {
	display: flex;
	flex-direction: column;
	gap: 9px;
	padding: 26px 28px;
	border: 1px solid var( --cs-line );
	border-radius: 20px;
	background: #fff;
	text-decoration: none;
	transition: border-color 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease;
}

.case-study-adjacent__card--prev {
	grid-column: 1;
}

.case-study-adjacent__card--next {
	grid-column: 2;
	align-items: flex-end;
	text-align: right;
}

.case-study-adjacent__card:hover,
.case-study-adjacent__card:focus-visible {
	transform: translateY( -2px );
	border-color: rgba( var( --cs-accent-rgb ), 0.45 );
	box-shadow: 0 14px 34px rgba( 16, 17, 18, 0.10 );
}

.case-study-adjacent__card:focus-visible {
	outline: 2px solid var( --cs-accent );
	outline-offset: 3px;
}

.case-study-adjacent__label {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	color: var( --cs-accent );
	font-size: 12px;
	font-weight: 800;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

/* Both cards carry the arrow first in the markup; reversing the row here puts
   it on the outside edge of each card without a second template branch. */
.case-study-adjacent__card--next .case-study-adjacent__label {
	flex-direction: row-reverse;
}

.case-study-adjacent__arrow {
	transition: transform 0.25s ease;
}

.case-study-adjacent__card--prev:hover .case-study-adjacent__arrow {
	transform: translateX( -4px );
}

.case-study-adjacent__card--next:hover .case-study-adjacent__arrow {
	transform: translateX( 4px );
}

.case-study-adjacent__customer {
	color: var( --cs-body );
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.02em;
}

.case-study-adjacent__title {
	color: var( --cs-ink );
	font-size: clamp( 17px, 1.4vw, 20px );
	font-weight: 700;
	line-height: 1.35;
	transition: color 0.25s ease;
}

.case-study-adjacent__card:hover .case-study-adjacent__title {
	color: var( --cs-accent );
}

@media ( max-width: 640px ) {
	.case-study-adjacent {
		grid-template-columns: minmax( 0, 1fr );
	}

	.case-study-adjacent__card--prev,
	.case-study-adjacent__card--next {
		grid-column: 1;
		align-items: flex-start;
		text-align: left;
	}

	.case-study-adjacent__card--next .case-study-adjacent__label {
		flex-direction: row;
	}
}

@media ( prefers-reduced-motion: reduce ) {
	.case-study-adjacent__card,
	.case-study-adjacent__arrow,
	.case-study-adjacent__title {
		transition: none;
	}

	.case-study-adjacent__card:hover,
	.case-study-adjacent__card:focus-visible {
		transform: none;
	}
}