/*
 * Case study detail page.
 *
 * Loads only on single aipx_case_study views, after marketing.css, and consumes
 * the tokens from tokens.css. Nothing here introduces a colour, a face or a
 * radius the design system does not already declare.
 *
 * The page is dark end to end rather than alternating grounds. The pinned story
 * panels are raised surfaces stacking over the dark ground, and that depth only
 * reads against dark; dropping a light band between the sections would break the
 * stack it sits in. The two grounds rule still holds - this page just uses one
 * of them throughout, and the closing CTA band is the single red section.
 */

/* ------------------------------------------------------------------ shell */

.aipx-cs-single {
	background: var(--aipx-dark-bg);
	color: var(--aipx-dark-text-body);
}

.aipx-cs-sec {
	background: var(--aipx-dark-bg);
	padding-block: var(--aipx-section-y-lg);
}

.aipx-cs-sec-in,
.aipx-cs-shero-in,
.aipx-cs-cta-in {
	max-width: var(--aipx-container);
	margin-inline: auto;
	padding-inline: var(--aipx-space-6);
}

.aipx-cs-sec-in--narrow {
	max-width: 1080px;
}

.aipx-cs-h2 {
	font-family: var(--aipx-font-heading);
	font-weight: 700;
	font-size: var(--aipx-h2-size);
	line-height: var(--aipx-h2-line);
	letter-spacing: var(--aipx-h2-track);
	color: var(--aipx-dark-text-heading);
	margin: 0 0 var(--aipx-space-6);
	max-width: 50%;
}

.aipx-cs-sec-lead {
	font-size: var(--aipx-body-lg);
	line-height: var(--aipx-body-lg-line);
	color: var(--aipx-dark-text-body);
	max-width: 62ch;
	margin: 0 0 var(--aipx-space-12);
}

.aipx-cs-single .aipx-kw {
	color: var(--aipx-brand-glow);
}

/* ---------------------------------------------------------------- buttons
 *
 * marketing.css gives .aipx-btn only its font, radius and transition. The box
 * itself - display, padding, and killing the link underline - is set per
 * context there (.kb-button.aipx-btn for Kadence buttons, .aipx-post-band
 * .aipx-btn-black for the blog band). This page is a new context, so without
 * these rules its buttons render as bare underlined inline text. .aipx-btn-red
 * has no definition anywhere in marketing.css, so it is defined here too.
 */
.aipx-cs-single .aipx-btn {
	display: inline-flex;
	align-items: center;
	gap: var(--aipx-space-2);
	padding: 14px var(--aipx-space-6);
	border: 0;
	font-family: var(--aipx-font-body);
	font-weight: 700;
	font-size: var(--aipx-body-md);
	line-height: 1.2;
	text-decoration: none;
	white-space: nowrap;
	cursor: pointer;
}

.aipx-cs-single .aipx-btn .aipx-chevron {
	width: 16px;
	height: 16px;
	flex: none;
}

.aipx-cs-single .aipx-btn-red {
	background: var(--aipx-brand-500);
	color: #fff;
}

/* On dark the red button brightens on hover rather than darkening. */
.aipx-cs-single .aipx-btn-red:hover {
	background: var(--aipx-brand-glow);
	color: #fff;
}

/*
 * The black button appears only on the red CTA band. Its colours come from
 * marketing.css, which sets them with !important, so only the box is set here.
 */
.aipx-cs-cta .aipx-btn-black {
	text-decoration: none;
}

/* ------------------------------------------------------------------- hero */

.aipx-cs-shero {
	background: var(--aipx-dark-bg);
	padding-block: var(--aipx-space-24);
	position: relative;
	overflow: hidden;
}

.aipx-cs-crumb {
	display: flex;
	align-items: center;
	gap: var(--aipx-space-2);
	font-size: var(--aipx-body-sm);
	color: var(--aipx-dark-text-muted);
	margin-bottom: var(--aipx-space-6);
}

.aipx-cs-crumb a {
	color: var(--aipx-dark-text-muted);
	text-decoration: none;
}

.aipx-cs-crumb a:hover {
	color: var(--aipx-brand-glow);
}

.aipx-cs-crumb span {
	color: var(--aipx-dark-text-heading);
}

.aipx-cs-crumb .aipx-chevron {
	width: 14px;
	height: 14px;
	opacity: .5;
}

.aipx-cs-sh1 {
	font-family: var(--aipx-font-heading);
	font-weight: 900;
	font-size: clamp(38px, 4.6vw, 56px);
	line-height: 1.08;
	letter-spacing: var(--aipx-h1-track);
	color: var(--aipx-dark-text-heading);
	margin: 0 0 var(--aipx-space-6);
	max-width: 20ch;
}

.aipx-cs-standfirst {
	font-size: var(--aipx-body-lg);
	line-height: var(--aipx-body-lg-line);
	color: var(--aipx-dark-text-body);
	max-width: 54ch;
	margin: 0 0 var(--aipx-space-10);
}

/* ------------------------------------------------------- pinned story */

.aipx-cs-story {
	background: var(--aipx-dark-bg);
	position: relative;
}

/*
 * Static by default. The pinned layout is additive and only applied once the
 * script confirms the viewport is wide enough and motion is allowed, so a
 * failed script leaves a readable stacked page rather than a broken one.
 */
.aipx-cs-panels {
	display: flex;
	flex-direction: column;
}

.aipx-cs-panel {
	background: var(--aipx-dark-bg-raised);
	border: 1px solid var(--aipx-dark-border);
	border-bottom: 0;
}

.aipx-cs-panel:last-child {
	border-bottom: 1px solid var(--aipx-dark-border);
}

.aipx-cs-panel-in {
	padding: var(--aipx-space-16) var(--aipx-space-12);
	max-width: 900px;
}

.aipx-cs-rail {
	display: none;
}

.aipx-cs-labels {
	position: relative;
}

.aipx-cs-label h2 {
	font-family: var(--aipx-font-heading);
	font-weight: 700;
	font-size: var(--aipx-h5-size);
	line-height: 1.2;
	letter-spacing: -.3px;
	color: #fff;
	background: var(--aipx-brand-500);
	display: inline-block;
	padding: var(--aipx-space-3) var(--aipx-space-5);
	margin: 0;
}

.aipx-cs-step {
	display: block;
	font-family: var(--aipx-font-mono);
	font-size: var(--aipx-caption);
	letter-spacing: .2em;
	color: var(--aipx-dark-text-muted);
	margin-bottom: var(--aipx-space-3);
}

/* Stacked mode: the rail label sits above its own panel. */
.aipx-cs-story:not([data-pinned]) .aipx-cs-labels {
	max-width: var(--aipx-container);
	margin-inline: auto;
	padding-inline: var(--aipx-space-6);
}

.aipx-cs-story:not([data-pinned]) .aipx-cs-label {
	padding-top: var(--aipx-space-12);
}

.aipx-cs-panel-eyebrow {
	font-family: var(--aipx-font-mono);
	font-size: var(--aipx-caption);
	letter-spacing: .22em;
	text-transform: uppercase;
	color: var(--aipx-brand-glow);
	margin: 0 0 var(--aipx-space-6);
}

.aipx-cs-panel-lead {
	font-size: 22px;
	line-height: 1.55;
	color: var(--aipx-dark-text-heading);
	margin: 0 0 var(--aipx-space-6);
}

.aipx-cs-panel-body {
	font-size: var(--aipx-body-lg);
	line-height: 1.7;
	color: var(--aipx-dark-text-body);
	margin: 0;
}

.aipx-cs-panel a {
	color: var(--aipx-brand-glow);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.aipx-cs-list {
	display: flex;
	flex-direction: column;
	gap: var(--aipx-space-8);
	margin-top: var(--aipx-space-10);
}

.aipx-cs-item {
	border-top: 1px solid var(--aipx-dark-border);
	padding-top: var(--aipx-space-6);
}

.aipx-cs-item h3 {
	font-family: var(--aipx-font-heading);
	font-weight: 700;
	font-size: var(--aipx-h6-size);
	line-height: 1.3;
	color: var(--aipx-dark-text-heading);
	margin: 0 0 var(--aipx-space-2);
}

.aipx-cs-item p {
	font-size: var(--aipx-body-md);
	line-height: 1.7;
	color: var(--aipx-dark-text-body);
	margin: 0;
}

/* The conclusion the challenge list builds to, set apart from the items above. */
.aipx-cs-panel-close {
	margin: var(--aipx-space-10) 0 0;
	font-size: var(--aipx-body-lg);
	line-height: 1.7;
	color: var(--aipx-dark-text-body);
}

.aipx-cs-note {
	margin-top: var(--aipx-space-8);
	background: var(--aipx-dark-bg);
	border: 1px solid rgba(232, 49, 47, .25);
	padding: var(--aipx-space-8);
}

.aipx-cs-note-t {
	font-family: var(--aipx-font-mono);
	font-size: var(--aipx-caption);
	letter-spacing: .2em;
	text-transform: uppercase;
	color: var(--aipx-brand-glow);
	margin: 0 0 var(--aipx-space-3);
}

.aipx-cs-note p:last-child {
	font-size: var(--aipx-body-md);
	line-height: 1.75;
	color: var(--aipx-dark-text-body);
	margin: 0;
}

/* Results figures. */

.aipx-cs-metrics {
	margin: var(--aipx-space-10) 0 0;
}

.aipx-cs-metrics > div {
	display: grid;
	grid-template-columns: minmax(180px, 220px) 1fr;
	gap: var(--aipx-space-8);
	border-top: 1px solid var(--aipx-dark-border);
	padding: var(--aipx-space-6) 0;
}

.aipx-cs-metrics dt {
	font-family: var(--aipx-font-heading);
	font-weight: 900;
	font-size: var(--aipx-h5-size);
	line-height: 1.2;
	color: var(--aipx-brand-glow);
	margin: 0;
}

.aipx-cs-metrics dd {
	font-size: var(--aipx-body-md);
	line-height: 1.7;
	color: var(--aipx-dark-text-body);
	margin: 0;
}

.aipx-cs-quote {
	border-left: 3px solid var(--aipx-brand-500);
	padding: var(--aipx-space-2) 0 var(--aipx-space-2) var(--aipx-space-8);
	margin: var(--aipx-space-10) 0 0;
}

.aipx-cs-quote p {
	font-family: var(--aipx-font-heading);
	font-weight: 400;
	font-size: var(--aipx-h6-size);
	/* Italic display copy needs room for descenders at this size. */
	line-height: 1.5;
	font-style: italic;
	color: var(--aipx-dark-text-body);
	margin: 0;
}

.aipx-cs-quote cite {
	display: block;
	margin-top: var(--aipx-space-4);
	font-family: var(--aipx-font-mono);
	font-size: var(--aipx-body-sm);
	font-style: normal;
	letter-spacing: .08em;
	color: var(--aipx-dark-text-muted);
}

/* ---------------------------------------------------- pinned mode only */

@media (min-width: 900px) {
	.aipx-cs-story[data-pinned] .aipx-cs-pin {
		position: sticky;
		top: var(--aipx-header-height);
		height: calc(100vh - var(--aipx-header-height));
		overflow: hidden;
	}

	.aipx-cs-story[data-pinned] .aipx-cs-rail {
		display: block;
		position: absolute;
		inset-block: 0;
		left: 0;
		width: 360px;
		z-index: 4;
		pointer-events: none;
	}

	.aipx-cs-story[data-pinned] .aipx-cs-rail-track {
		position: absolute;
		left: 56px;
		top: 8%;
		bottom: 8%;
		width: 1px;
		background: var(--aipx-dark-border);
	}

	.aipx-cs-story[data-pinned] .aipx-cs-rail-fill {
		position: absolute;
		left: 55px;
		width: 3px;
		background: linear-gradient(180deg, var(--aipx-brand-500), var(--aipx-brand-glow));
	}

	.aipx-cs-story[data-pinned] .aipx-cs-dot {
		position: absolute;
		left: 50px;
		width: 13px;
		height: 13px;
		margin-top: -6px;
		border-radius: 50%;
		background: var(--aipx-dark-surface-2);
		border: 1px solid var(--aipx-dark-border-strong);
		transition: background var(--aipx-duration-base) var(--aipx-ease-standard),
			border-color var(--aipx-duration-base) var(--aipx-ease-standard);
	}

	/*
	 * The one place a circle is allowed. These are rail waypoints, not UI
	 * chrome - a square would read as a control you can click.
	 */
	.aipx-cs-story[data-pinned] .aipx-cs-dot.is-lit {
		background: var(--aipx-brand-glow);
		border-color: var(--aipx-brand-glow);
	}

	.aipx-cs-story[data-pinned] .aipx-cs-indicator {
		position: absolute;
		left: 47px;
		width: 19px;
		height: 19px;
		margin-top: -9px;
		border-radius: 50%;
		background: var(--aipx-brand-glow);
		box-shadow: 0 0 0 4px rgba(232, 49, 47, .18);
		z-index: 2;
	}

	.aipx-cs-story[data-pinned] .aipx-cs-labels {
		position: absolute;
		left: 92px;
		top: 50%;
		transform: translateY(-50%);
		width: 236px;
		height: 150px;
		padding: 0;
		margin: 0;
		max-width: none;
	}

	.aipx-cs-story[data-pinned] .aipx-cs-label {
		position: absolute;
		inset: 0;
		padding: 0;
		transition: opacity var(--aipx-duration-slow) var(--aipx-ease-standard);
	}

	.aipx-cs-story[data-pinned] .aipx-cs-panels {
		position: absolute;
		inset-block: 0;
		left: 360px;
		right: 0;
		display: block;
	}

	.aipx-cs-story[data-pinned] .aipx-cs-panel {
		position: absolute;
		inset: 0;
		display: flex;
		flex-direction: column;
		border: 1px solid var(--aipx-dark-border);
		background: var(--aipx-dark-bg-raised);
		/* The one ambient shadow on this page: it separates the raised panel
		   stack from the ground behind it. Tinted to the ground, not black. */
		box-shadow: -40px 0 90px rgba(8, 6, 6, .55);
		will-change: transform, opacity;
	}

	.aipx-cs-story[data-pinned] .aipx-cs-panel-vp {
		flex: 1;
		overflow: hidden;
		position: relative;
	}

	.aipx-cs-story[data-pinned] .aipx-cs-panel-in {
		padding: var(--aipx-space-16) var(--aipx-space-16) var(--aipx-space-16) var(--aipx-space-12);
		will-change: transform;
	}
}

/* ------------------------------------------------------------------ tech */

/*
 * auto-fit rather than a fixed column count: the number of chips is whatever the
 * editor entered, and a fixed six-column grid leaves visible empty cells at five.
 * The 1px gap over a bordered ground is what draws the hairline seams.
 */
.aipx-cs-tech {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
	gap: 1px;
	background: var(--aipx-dark-border);
	border: 1px solid var(--aipx-dark-border);
}

.aipx-cs-chip {
	background: var(--aipx-dark-bg);
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: var(--aipx-space-3);
	padding: var(--aipx-space-8) var(--aipx-space-4);
	text-align: center;
	transition: background var(--aipx-duration-base) var(--aipx-ease-standard);
}

.aipx-cs-chip img {
	width: 34px;
	height: 34px;
	object-fit: contain;
	/* The icon set is multi-coloured; flattening to white keeps the row reading
	   as one component rather than a sticker sheet. */
	filter: brightness(0) invert(1);
	opacity: .88;
	transition: opacity var(--aipx-duration-base) var(--aipx-ease-standard);
}

.aipx-cs-chip span {
	font-size: var(--aipx-body-sm);
	color: var(--aipx-dark-text-body);
}

.aipx-cs-chip:hover {
	background: var(--aipx-brand-500);
}

.aipx-cs-chip:hover span {
	color: #fff;
}

.aipx-cs-chip:hover img {
	opacity: 1;
}

/* ------------------------------------------------------------- carousel */

.aipx-cs-car {
	position: relative;
	display: flex;
	align-items: center;
	gap: var(--aipx-space-4);
}

.aipx-cs-car-vp {
	position: relative;
	flex: 1;
	height: clamp(320px, 46vw, 560px);
	overflow: hidden;
}

.aipx-cs-slide {
	position: absolute;
	top: 0;
	left: 50%;
	width: 88%;
	height: 100%;
	transform: translateX(-50%);
	transition: transform var(--aipx-duration-slow) var(--aipx-ease-standard),
		opacity var(--aipx-duration-slow) var(--aipx-ease-standard);
}

.aipx-cs-browser {
	height: 100%;
	margin: 0;
	display: flex;
	flex-direction: column;
	background: var(--aipx-dark-surface);
	border: 1px solid var(--aipx-dark-border);
}

.aipx-cs-chrome {
	display: flex;
	align-items: center;
	gap: var(--aipx-space-2);
	padding: var(--aipx-space-3) var(--aipx-space-4);
	border-bottom: 1px solid var(--aipx-dark-border);
	flex: none;
}

.aipx-cs-chrome > span:not(.aipx-cs-addr) {
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: var(--aipx-dark-border-strong);
}

.aipx-cs-addr {
	margin-left: var(--aipx-space-4);
	font-family: var(--aipx-font-mono);
	font-size: var(--aipx-caption);
	color: var(--aipx-dark-text-muted);
}

.aipx-cs-shot {
	flex: 1;
	overflow: hidden;
	display: flex;
}

.aipx-cs-shot img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	object-position: top center;
}

.aipx-cs-car-arrow {
	flex: none;
	width: 44px;
	height: 44px;
	display: grid;
	place-items: center;
	background: transparent;
	border: 1px solid var(--aipx-dark-border-strong);
	color: var(--aipx-dark-text-heading);
	cursor: pointer;
	transition: background var(--aipx-duration-base) var(--aipx-ease-standard);
}

.aipx-cs-car-arrow:hover {
	background: var(--aipx-brand-500);
	border-color: var(--aipx-brand-500);
	color: #fff;
}

.aipx-cs-car-arrow .aipx-chevron {
	width: 20px;
	height: 20px;
}

.aipx-cs-car-arrow[data-car-prev] .aipx-chevron {
	transform: rotate(180deg);
}

.aipx-cs-car-cap {
	max-width: 62ch;
	margin: var(--aipx-space-10) auto 0;
	text-align: center;
}

.aipx-cs-cap h3 {
	font-family: var(--aipx-font-heading);
	font-weight: 700;
	font-size: var(--aipx-h5-size);
	color: var(--aipx-dark-text-heading);
	margin: 0 0 var(--aipx-space-3);
}

.aipx-cs-cap p {
	font-size: var(--aipx-body-md);
	line-height: 1.7;
	color: var(--aipx-dark-text-body);
	margin: 0;
}

/* -------------------------------------------------------------- CTA band */

.aipx-cs-cta {
	background: var(--aipx-brand-500);
	padding-block: var(--aipx-section-y-lg);
	text-align: center;
}

.aipx-cs-cta h2 {
	font-family: var(--aipx-font-heading);
	font-weight: 700;
	font-size: var(--aipx-h3-size);
	line-height: 1.2;
	letter-spacing: var(--aipx-h3-track);
	color: #fff;
	margin: 0 auto var(--aipx-space-4);
	max-width: 22ch;
}

.aipx-cs-cta p {
	font-size: var(--aipx-body-lg);
	line-height: var(--aipx-body-lg-line);
	color: rgba(255, 255, 255, .88);
	max-width: 58ch;
	margin: 0 auto var(--aipx-space-8);
}

/* ------------------------------------------------------------- related */

.aipx-cs-rel-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--aipx-space-6);
	flex-wrap: wrap;
	margin-bottom: var(--aipx-space-10);
}

.aipx-cs-rel-head .aipx-cs-h2 {
	margin: 0;
	max-width: none;
}

.aipx-cs-rel {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--aipx-space-6);
}

.aipx-cs-rel-card {
	display: block;
	text-decoration: none;
	background: var(--aipx-dark-bg-raised);
	border: 1px solid var(--aipx-dark-border);
	transition: background var(--aipx-duration-base) var(--aipx-ease-standard);
}

.aipx-cs-rel-media {
	aspect-ratio: 16 / 9;
	overflow: hidden;
	border-bottom: 1px solid var(--aipx-dark-border);
}

.aipx-cs-rel-media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.aipx-cs-rel-body {
	padding: var(--aipx-space-8);
}

.aipx-cs-rel-sector {
	font-family: var(--aipx-font-mono);
	font-size: 11px;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--aipx-brand-glow);
}

.aipx-cs-rel-body h3 {
	font-family: var(--aipx-font-heading);
	font-weight: 700;
	font-size: var(--aipx-h5-size);
	line-height: 1.25;
	color: var(--aipx-dark-text-heading);
	margin: var(--aipx-space-3) 0;
}

.aipx-cs-rel-body p {
	font-size: var(--aipx-body-md);
	line-height: 1.65;
	color: var(--aipx-dark-text-body);
	margin: 0 0 var(--aipx-space-5);
}

.aipx-cs-rel-link {
	display: inline-flex;
	align-items: center;
	gap: var(--aipx-space-2);
	color: var(--aipx-brand-glow);
	font-weight: 600;
	font-size: var(--aipx-body-sm);
}

.aipx-cs-rel-link .aipx-chevron {
	width: 15px;
	height: 15px;
}

/* The site's one card interaction: fill red, flip every child to white. */
.aipx-cs-rel-card:hover {
	background: var(--aipx-brand-500);
}

.aipx-cs-rel-card:hover .aipx-cs-rel-sector,
.aipx-cs-rel-card:hover h3,
.aipx-cs-rel-card:hover p,
.aipx-cs-rel-card:hover .aipx-cs-rel-link {
	color: #fff;
}

/* ----------------------------------------------------------- fallback */

.aipx-cs-prose {
	max-width: 70ch;
	font-size: var(--aipx-body-lg);
	line-height: 1.75;
	color: var(--aipx-dark-text-body);
}

.aipx-cs-prose h2,
.aipx-cs-prose h3 {
	color: var(--aipx-dark-text-heading);
	font-family: var(--aipx-font-heading);
}

.aipx-cs-prose a {
	color: var(--aipx-brand-glow);
}

/* ---------------------------------------------------------- responsive */

@media (max-width: 1024px) {
	.aipx-cs-tech {
		grid-template-columns: repeat(3, 1fr);
	}
}

@media (max-width: 900px) {
	.aipx-cs-h2 {
		font-size: var(--aipx-h3-size);
		line-height: var(--aipx-h3-line);
		max-width: 100%;
	}

	.aipx-cs-panel-in {
		padding: var(--aipx-space-12) var(--aipx-space-6);
	}

	.aipx-cs-sec {
		padding-block: var(--aipx-section-y-md);
	}

	.aipx-cs-rel {
		grid-template-columns: 1fr;
	}

	.aipx-cs-metrics > div {
		grid-template-columns: 1fr;
		gap: var(--aipx-space-2);
	}
}

@media (max-width: 640px) {
	.aipx-cs-tech {
		grid-template-columns: repeat(2, 1fr);
	}

	.aipx-cs-shero {
		padding-block: var(--aipx-space-16);
	}

	.aipx-cs-panel-lead {
		font-size: var(--aipx-body-lg);
	}

	.aipx-cs-car-vp {
		height: 300px;
	}

	.aipx-cs-slide {
		width: 100%;
	}
}

/*
 * Reduced motion: the script never pins, so only the carousel's own transitions
 * need silencing here.
 */
@media (prefers-reduced-motion: reduce) {
	.aipx-cs-slide,
	.aipx-cs-label,
	.aipx-cs-dot {
		transition: none;
	}
}