/* =========================================================
   Case study detail page — one-off elements not covered by any
   reusable block (dark pagehead, challenge/fail row, result stat cards,
   reel/phone mockup, work grid, closing band). Enqueued only on
   fully custom-designed projects — see inc/enqueue.php.
   Reuses .infinitas-scroll-progress from service-detail.css/js (same
   script, see inc/enqueue.php).
   ========================================================= */

/* Chip row — used in "What we did" and elsewhere. Same look as the
   service pages' own .infinitas-chip (assets/css/service-detail.css),
   kept as a standalone copy here so this file has no dependency on that
   one (they're never both required by the same page). */
.infinitas-chips {
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
}
.infinitas-chip {
	font-family: var( --infinitas-font-heading, 'Space Grotesk' ), sans-serif;
	font-weight: 600;
	font-size: 12px;
	color: var( --infinitas-color-brand, #1D50E0 );
	background: var( --infinitas-color-brand_tint, #E0EAFF );
	padding: 5px 12px;
	border-radius: 6px;
}

/* Dark pagehead — breadcrumb, client tag, H1, intro, meta strip. Own
   markup (not infinitas_render_page_hero()) since it needs the client
   tag + meta strip that component doesn't support.
   Static gradient, not the animated WebGL canvas the rest of the site's
   dark heroes use (landing/heroCanvas.js) — tried it twice on this
   block, both times it rendered solid black instead of the gradient,
   and there's no way to debug that blind (no browser access here). This
   plain CSS gradient renders reliably everywhere, so it stays. */
.infinitas-case-pagehead {
	position: relative;
	overflow: hidden;
	background: var( --infinitas-color-dark_bg, #060C1A );
	color: #fff;
	padding: 96px 0 64px;
}
.infinitas-case-pagehead::before {
	content: "";
	position: absolute;
	inset: 0;
	background:
		radial-gradient( 820px 460px at 78% -12%, rgba( 29, 80, 224, .6 ), transparent 62% ),
		radial-gradient( 520px 320px at 6% 100%, rgba( 79, 142, 247, .2 ), transparent 60% );
}
.infinitas-case-pagehead__inner {
	position: relative;
	z-index: 1;
}
.infinitas-case-pagehead__crumb {
	color: #8FA1C4;
	font-size: 14px;
	margin-bottom: 24px;
}
.infinitas-case-pagehead__crumb a {
	color: #8FA1C4;
	text-decoration: none;
}
.infinitas-case-pagehead__crumb a:hover {
	color: #fff;
}
.infinitas-case-pagehead__client {
	font-family: var( --infinitas-font-heading, 'Space Grotesk' ), sans-serif;
	font-weight: 700;
	font-size: 14px;
	color: #8FB4FF;
	margin-bottom: 16px;
}
.infinitas-case-pagehead h1 {
	font-family: var( --infinitas-font-heading, 'Space Grotesk' ), sans-serif;
	font-size: 28px;
	color: #fff;
	line-height: 1.15;
	max-width: none;
	letter-spacing: -.02em;
	margin: 0;
}
@media ( min-width: 768px ) {
	.infinitas-case-pagehead h1 { font-size: 38px; }
}
@media ( min-width: 1024px ) {
	.infinitas-case-pagehead h1 { font-size: 46px; }
}
.infinitas-case-pagehead__sub {
	color: #B8C4DC;
	font-size: 18px;
	line-height: 1.6;
	max-width: 56ch;
	margin-top: 24px;
}
/* Full-width row, not confined to the (narrower, once an image is set)
   content column above it — sits below the whole grid, spanning both
   columns, and stays a single row (justify-content:space-between
   spreads the four items edge to edge) down to tablet width. */
.infinitas-case-meta {
	display: flex;
	justify-content: space-between;
	gap: 24px;
	flex-wrap: nowrap;
	margin-top: 48px;
	padding-top: 32px;
	border-top: 1px solid rgba( 255, 255, 255, .14 );
}
@media ( max-width: 700px ) {
	.infinitas-case-meta {
		flex-wrap: wrap;
		justify-content: flex-start;
		gap: 24px 48px;
	}
}
.infinitas-case-meta div span {
	display: block;
	font-size: 12px;
	color: #8FA1C4;
	font-family: var( --infinitas-font-heading, 'Space Grotesk' ), sans-serif;
	font-weight: 600;
	margin-bottom: 4px;
}
.infinitas-case-meta div b {
	font-family: var( --infinitas-font-heading, 'Space Grotesk' ), sans-serif;
	font-size: 16px;
	font-weight: 600;
	color: #fff;
}

/* Pagehead grid — plain single column by default; a right-hand media
   column only appears once a featured image is actually set (the
   --split modifier class, added by render.php). */
.infinitas-case-pagehead__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 48px;
	align-items: center;
}
.infinitas-case-pagehead--split .infinitas-case-pagehead__grid {
	grid-template-columns: 1fr;
}
@media ( min-width: 900px ) {
	.infinitas-case-pagehead--split .infinitas-case-pagehead__grid {
		grid-template-columns: 1.1fr .9fr;
	}
}
/* Same border/radius language as the rest of the site's dark-surface
   cards (e.g. .infinitas-journey--bg-dark-card .infinitas-journey__inner). */
.infinitas-case-pagehead__media {
	border: 1px solid rgba( 255, 255, 255, .14 );
	border-radius: 20px;
	overflow: hidden;
}
.infinitas-case-pagehead__media img {
	display: block;
	width: 100%;
	height: auto;
}

/* Challenge — centred statement + a row of "fail" cards. */
.infinitas-case-challenge {
	text-align: center;
	max-width: 900px;
	margin: 0 auto;
}
.infinitas-case-challenge__title {
	font-family: var( --infinitas-font-heading, 'Space Grotesk' ), sans-serif;
	font-size: var( --infinitas-el-section-title-size-mobile, 22px );
	font-weight: 700;
	line-height: 1.15;
	letter-spacing: -.02em;
	color: var( --infinitas-color-heading_text, #060C1A );
	max-width: 100%;
	margin: 0 auto;
}
@media ( min-width: 1024px ) {
	.infinitas-case-challenge__title { font-size: var( --infinitas-el-section-title-size-desktop, 30px ); }
}
/* Flexbox, not grid — a grid's column tracks stay put even when there
   are fewer/more cards than columns (e.g. 4 cards in a 3-column grid
   leave the 4th sitting alone on the left of a new row). Flex +
   justify-content:center lets a short last row center itself instead
   (same fix as .infinitas-case-workgrid). */
.infinitas-case-failrow {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 16px;
	margin: 32px 0;
	text-align: left;
}
.infinitas-case-failrow .infinitas-case-fail {
	flex: 0 1 100%;
}
@media ( min-width: 700px ) {
	.infinitas-case-failrow .infinitas-case-fail { flex-basis: calc( 33.333% - 11px ); }
}
.infinitas-case-fail {
	border: 1px solid var( --infinitas-color-border, #E4E8F0 );
	border-radius: 14px;
	padding: 20px 20px 20px 32px;
	background: var( --infinitas-color-page_bg, #fff );
	position: relative;
}
.infinitas-case-fail::before {
	content: "";
	position: absolute;
	left: 16px;
	top: 27px;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var( --infinitas-color-brand_light, #4F8EF7 );
}
.infinitas-case-fail b {
	display: block;
	font-family: var( --infinitas-font-heading, 'Space Grotesk' ), sans-serif;
	font-size: 16px;
	font-weight: 700;
	margin-bottom: 4px;
}
.infinitas-case-fail span {
	color: var( --infinitas-color-muted_text, #64748B );
	font-size: 14px;
	line-height: 1.5;
}

/* Question-strip variant (itemStyle: "questions") — short lines with a
   left brand-colour border only, no card box. */
.infinitas-case-qrow {
	display: grid;
	grid-template-columns: repeat( 4, 1fr );
	gap: 16px;
	margin: 32px 0;
	text-align: left;
}
@media ( max-width: 1000px ) {
	.infinitas-case-qrow { grid-template-columns: 1fr 1fr; }
}
@media ( max-width: 560px ) {
	.infinitas-case-qrow { grid-template-columns: 1fr; }
}
.infinitas-case-q {
	border-left: 3px solid var( --infinitas-color-brand, #1D50E0 );
	padding: 4px 0 4px 16px;
	font-family: var( --infinitas-font-heading, 'Space Grotesk' ), sans-serif;
	font-size: 15px;
	font-weight: 600;
	line-height: 1.4;
	color: var( --infinitas-color-heading_text, #060C1A );
}
/* Requirement-pills variant (itemStyle: "requirements") — a centred
   icon circle above a short bold label, in a row. */
.infinitas-case-reqrow {
	display: grid;
	grid-template-columns: repeat( 5, 1fr );
	gap: 16px;
	margin: 32px 0;
}
@media ( max-width: 1000px ) {
	.infinitas-case-reqrow { grid-template-columns: 1fr 1fr; }
}
@media ( max-width: 560px ) {
	.infinitas-case-reqrow { grid-template-columns: 1fr; }
}
.infinitas-case-req {
	border: 1px solid var( --infinitas-color-border, #E4E8F0 );
	border-radius: 14px;
	padding: 20px 16px;
	background: var( --infinitas-color-page_bg, #fff );
	text-align: center;
	transition: transform .2s ease, border-color .2s ease;
}
.infinitas-case-req:hover {
	transform: translateY( -3px );
	border-color: var( --infinitas-color-brand_light, #4F8EF7 );
}
.infinitas-case-req__icon {
	width: 34px;
	height: 34px;
	border-radius: 10px;
	background: var( --infinitas-color-brand_tint, #E0EAFF );
	color: var( --infinitas-color-brand, #1D50E0 );
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0 auto 12px;
}
.infinitas-case-req b {
	font-family: var( --infinitas-font-heading, 'Space Grotesk' ), sans-serif;
	font-size: 14px;
	font-weight: 600;
	line-height: 1.35;
	display: block;
}
.infinitas-case-challenge__close {
	font-size: 18px;
	line-height: 1.6;
	color: var( --infinitas-body-color, #0D1630 );
	max-width: 60ch;
	margin: 0 auto;
}

/* "What we did" split. */
.infinitas-case-split {
	display: grid;
	grid-template-columns: 1fr;
	gap: 48px;
	align-items: start;
}
@media ( min-width: 900px ) {
	.infinitas-case-split { grid-template-columns: 1fr 1fr; }
}
.infinitas-case-list {
	list-style: none;
	margin: 12px 0 0;
	padding: 0;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 10px;
}
.infinitas-case-list li {
	font-size: 14px;
	color: var( --infinitas-color-muted_text, #64748B );
	padding-left: 20px;
	position: relative;
}
.infinitas-case-list li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 8px;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var( --infinitas-color-brand, #1D50E0 );
}

/* Results — one stat card per platform. */
.infinitas-case-stats {
	display: grid;
	grid-template-columns: 1fr;
	gap: 16px;
}
@media ( min-width: 900px ) {
	.infinitas-case-stats { grid-template-columns: repeat( 3, 1fr ); }
}
.infinitas-case-stat {
	border: 1px solid var( --infinitas-color-border, #E4E8F0 );
	border-radius: 18px;
	background: var( --infinitas-color-page_bg, #fff );
	overflow: hidden;
	transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.infinitas-case-stat:hover {
	transform: translateY( -4px );
	box-shadow: 0 28px 56px -32px rgba( 6, 12, 26, .32 );
	border-color: var( --infinitas-color-brand_light, #4F8EF7 );
}
.infinitas-case-stat__head {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 16px 20px;
	background: var( --infinitas-color-dark_bg, #060C1A );
	color: #fff;
	font-family: var( --infinitas-font-heading, 'Space Grotesk' ), sans-serif;
	font-weight: 600;
	font-size: 15px;
}
.infinitas-case-stat__head svg {
	color: var( --infinitas-color-brand_light, #4F8EF7 );
	flex: none;
}
.infinitas-case-stat__hero {
	padding: 32px 20px 20px;
	text-align: center;
	border-bottom: 1px solid var( --infinitas-color-border, #E4E8F0 );
}
.infinitas-case-stat__value {
	font-family: var( --infinitas-font-heading, 'Space Grotesk' ), sans-serif;
	font-size: 48px;
	font-weight: 700;
	line-height: 1;
	color: var( --infinitas-color-brand, #1D50E0 );
	letter-spacing: -.03em;
}
.infinitas-case-stat__label {
	font-size: 14px;
	color: var( --infinitas-color-muted_text, #64748B );
	margin-top: 8px;
}
.infinitas-case-stat__delta {
	display: inline-flex;
	margin-top: 12px;
	font-family: var( --infinitas-font-heading, 'Space Grotesk' ), sans-serif;
	font-weight: 700;
	font-size: 12px;
	color: #0F7B4F;
	background: #E4F5EC;
	padding: 5px 12px;
	border-radius: 999px;
}
.infinitas-case-stat__metrics {
	margin: 0;
	padding: 8px 20px 20px;
}
.infinitas-case-stat__metrics div {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 12px;
	padding: 12px 0;
	border-bottom: 1px solid var( --infinitas-color-border, #E4E8F0 );
}
.infinitas-case-stat__metrics div:last-child {
	border-bottom: none;
}
.infinitas-case-stat__metrics dt {
	font-size: 14px;
	color: var( --infinitas-color-muted_text, #64748B );
}
.infinitas-case-stat__metrics dd {
	margin: 0;
	font-family: var( --infinitas-font-heading, 'Space Grotesk' ), sans-serif;
	font-weight: 700;
	font-size: 16px;
	color: var( --infinitas-color-heading_text, #060C1A );
	white-space: nowrap;
}
.infinitas-case-stat__metrics dd i {
	font-style: normal;
	font-size: 11px;
	font-weight: 700;
	color: #0F7B4F;
	margin-left: 6px;
}
.infinitas-case-period {
	color: var( --infinitas-color-muted_text, #64748B );
	font-size: 13px;
	margin-top: 20px;
}

/* Highest-viewed reel — quote + phone mockup. */
.infinitas-case-reel {
	display: grid;
	grid-template-columns: 1fr;
	gap: 48px;
	align-items: center;
}
@media ( min-width: 900px ) {
	.infinitas-case-reel { grid-template-columns: 1.05fr .95fr; }
}
.infinitas-case-reel__quote {
	font-family: var( --infinitas-font-heading, 'Space Grotesk' ), sans-serif;
	font-weight: 700;
	font-size: 22px;
	line-height: 1.25;
	color: var( --infinitas-color-heading_text, #060C1A );
	border-left: 4px solid var( --infinitas-color-brand, #1D50E0 );
	padding-left: 20px;
	margin: 20px 0;
}
@media ( min-width: 1024px ) {
	.infinitas-case-reel__quote { font-size: 28px; }
}
.infinitas-case-phone {
	max-width: 280px;
	margin: 0 auto;
	background: #fff;
	border: 10px solid var( --infinitas-color-dark_bg, #060C1A );
	border-radius: 34px;
	overflow: hidden;
	box-shadow: 0 50px 90px -50px rgba( 6, 12, 26, .6 );
}
.infinitas-case-phone__screen {
	position: relative;
	aspect-ratio: 9 / 16;
	background-color: var( --infinitas-color-alt_bg, #F5F7FA );
	background-size: cover;
	background-position: center;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 10px;
	color: var( --infinitas-color-muted_text, #64748B );
	font-family: var( --infinitas-font-heading, 'Space Grotesk' ), sans-serif;
	font-size: 13px;
	font-weight: 600;
	text-align: center;
	padding: 65px;
}
/* A thumbnail image (background-image, set inline by render.php) needs a
   dark scrim so the play button/caption stay readable over any photo. */
.infinitas-case-phone__screen[style*="background-image"]::before {
	content: "";
	position: absolute;
	inset: 0;
	background: rgba( 6, 12, 26, .35 );
}
/* Works as either a real <button data-video-url> (clickable, opens the
   popup — see assets/js/project-detail.js) or a plain decorative <span>
   when no video link is set. */
.infinitas-case-phone__play {
	position: relative;
	z-index: 1;
	width: 54px;
	height: 54px;
	flex: 0 0 auto;
	border: 0;
	border-radius: 50%;
	background: var( --infinitas-color-brand, #1D50E0 );
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: transform .18s ease, background .18s ease;
}
button.infinitas-case-phone__play {
	cursor: pointer;
}
button.infinitas-case-phone__play:hover {
	background: var( --infinitas-color-brand_hover, #123F9E );
	transform: scale( 1.06 );
}
.infinitas-case-phone__caption {
	position: relative;
	z-index: 1;
}

/* Video popup (infinitas_render_video_modal(), inc/enqueue.php) — one
   shared modal per page, opened by any case-reel play button. */
.infinitas-video-modal {
	position: fixed;
	inset: 0;
	z-index: 200;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 24px;
}
.infinitas-video-modal[hidden] {
	display: none;
}
.infinitas-video-modal__backdrop {
	position: absolute;
	inset: 0;
	background: rgba( 6, 12, 26, .82 );
	z-index: 9999 !important;
}
.infinitas-video-modal__box {
	position: relative;
	width: 100%;
	max-width: 350px;
}
.infinitas-video-modal__close {
	position: absolute;
	top: -44px;
	right: 0;
	width: 36px;
	height: 36px;
	border: 0;
	border-radius: 50%;
	background: rgba( 255, 255, 255, .12 );
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
}
.infinitas-video-modal__close:hover {
	background: rgba( 255, 255, 255, .22 );
}
.infinitas-video-modal__body {
	position: relative;
	width: 100%;
	aspect-ratio: 16 / 9;
	background: #000;
	border-radius: 12px;
	overflow: hidden;
	box-shadow: 0 40px 80px -30px rgba( 0, 0, 0, .6 );
	height: 80vh;
	z-index: 99999 !important
}
.infinitas-video-modal__body.is-portrait {
	aspect-ratio: 9 / 16;
	height: auto;
	max-height: 80vh;
}
.infinitas-video-modal__body iframe,
.infinitas-video-modal__body video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
	display: block;
}
body.infinitas-video-modal-open {
	overflow: hidden;
}

/* Selected work grid. */
/* Flexbox, not grid — a grid's column tracks stay put even when there
   are fewer cards than columns (e.g. 3 cards in a 4-column grid sit
   left-aligned with an empty 4th slot). Flex + justify-content:center
   lets a short row of cards center itself instead. */
.infinitas-case-workgrid {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 16px;
}
.infinitas-case-workgrid .infinitas-case-work {
	flex: 0 1 100%;
}
@media ( min-width: 640px ) {
	.infinitas-case-workgrid .infinitas-case-work { flex-basis: calc( 50% - 8px ); }
}
@media ( min-width: 1000px ) {
	.infinitas-case-workgrid .infinitas-case-work { flex-basis: calc( 25% - 12px ); }
}
.infinitas-case-work {
	border: 1px solid var( --infinitas-color-border, #E4E8F0 );
	border-radius: 14px;
	overflow: hidden;
	background: var( --infinitas-color-page_bg, #fff );
	transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.infinitas-case-work:hover {
	transform: translateY( -4px );
	box-shadow: 0 24px 48px -28px rgba( 6, 12, 26, .35 );
	border-color: var( --infinitas-color-brand_light, #4F8EF7 );
}
.infinitas-case-work__thumb {
	overflow: hidden;
	background: var( --infinitas-color-alt_bg, #F5F7FA );
	border-bottom: 1px solid var( --infinitas-color-border, #E4E8F0 );
	display: flex;
	align-items: center;
	justify-content: center;
	color: var( --infinitas-color-muted_text, #64748B );
	font-family: var( --infinitas-font-heading, 'Space Grotesk' ), sans-serif;
	font-size: 12px;
	font-weight: 600;
	text-align: center;
	padding: 0;
}
.infinitas-case-work__thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	padding: 0;
}
.infinitas-case-work__body {
	padding: 18px;
}
.infinitas-case-work__kind {
	font-family: var( --infinitas-font-heading, 'Space Grotesk' ), sans-serif;
	font-weight: 600;
	font-size: 11px;
	color: var( --infinitas-color-brand, #1D50E0 );
	background: var( --infinitas-color-brand_tint, #E0EAFF );
	padding: 4px 10px;
	border-radius: 999px;
	display: inline-block;
	margin-bottom: 10px;
}
.infinitas-case-work__body h3 {
	font-family: var( --infinitas-font-heading, 'Space Grotesk' ), sans-serif;
	font-size: 16px;
	font-weight: 600;
	margin: 0;
}
.infinitas-case-work__body p {
	font-size: 13px;
	line-height: 1.5;
	color: var( --infinitas-color-muted_text, #64748B );
	margin: 6px 0 0;
}

/* Closing band — dark summary before the CTA. */
.infinitas-case-closing {
	background: var( --infinitas-color-dark_bg, #060C1A );
	color: #fff;
	position: relative;
	overflow: hidden;
}
.infinitas-case-closing::before {
	content: "";
	position: absolute;
	inset: 0;
	background: radial-gradient( 700px 400px at 80% 20%, rgba( 29, 80, 224, .45 ), transparent 60% ),
	            radial-gradient( 500px 300px at 8% 92%, rgba( 79, 142, 247, .2 ), transparent 60% );
}
.infinitas-case-closing__inner {
	position: relative;
	padding: 96px 20px;
}
.infinitas-case-closing h2 {
	font-family: var( --infinitas-font-heading, 'Space Grotesk' ), sans-serif;
	font-size: var( --infinitas-el-page-header-title-size-mobile, 28px );
	color: #fff;
	max-width: 16ch;
	line-height: 1.15;
	margin: 0 0 16px;
}
@media ( min-width: 1024px ) {
	.infinitas-case-closing h2 { font-size: var( --infinitas-el-page-header-title-size-desktop, 40px ); }
}
.infinitas-case-closing__after {
	margin-top: 16px;
	max-width: 58ch;
	color: #B8C4DC;
	font-size: 16px;
	line-height: 1.6;
}
.infinitas-case-closing__row {
	display: flex;
	gap: 48px;
	flex-wrap: wrap;
	margin-top: 32px;
	padding-top: 24px;
	border-top: 1px solid rgba( 255, 255, 255, .14 );
}
.infinitas-case-closing__row span {
	display: block;
	font-size: 12px;
	color: #8FA1C4;
	font-family: var( --infinitas-font-heading, 'Space Grotesk' ), sans-serif;
	font-weight: 600;
	margin-bottom: 4px;
}
.infinitas-case-closing__row b {
	font-family: var( --infinitas-font-heading, 'Space Grotesk' ), sans-serif;
	font-size: 15px;
	font-weight: 600;
	color: #fff;
}

/* Fact row (infinitas/case-facts) — headline number/word + short label. */
.infinitas-case-factrow {
	display: grid;
	grid-template-columns: repeat( 4, 1fr );
	gap: 16px;
}
@media ( max-width: 1000px ) {
	.infinitas-case-factrow { grid-template-columns: 1fr 1fr; }
}
@media ( max-width: 560px ) {
	.infinitas-case-factrow { grid-template-columns: 1fr; }
}
.infinitas-case-fact {
	border: 1px solid var( --infinitas-color-border, #E4E8F0 );
	border-radius: 18px;
	padding: 28px 20px;
	background: var( --infinitas-color-page_bg, #fff );
	transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.infinitas-case-fact:hover {
	transform: translateY( -4px );
	box-shadow: 0 26px 52px -30px rgba( 6, 12, 26, .3 );
	border-color: var( --infinitas-color-brand_light, #4F8EF7 );
}
.infinitas-case-fact__v {
	font-family: var( --infinitas-font-heading, 'Space Grotesk' ), sans-serif;
	font-size: 40px;
	font-weight: 700;
	line-height: 1;
	color: var( --infinitas-color-brand, #1D50E0 );
	letter-spacing: -.03em;
}
.infinitas-case-fact__v--word {
	font-size: 26px;
}
.infinitas-case-fact__l {
	font-size: 14px;
	line-height: 1.5;
	color: var( --infinitas-color-muted_text, #64748B );
	margin-top: 12px;
}

/* Journey (infinitas/case-journey) — copy on the left, numbered flow on
   the right, final step highlighted as the destination. */
.infinitas-case-journey {
	display: grid;
	grid-template-columns: .95fr 1.05fr;
	gap: 48px;
	align-items: center;
}
@media ( max-width: 900px ) {
	.infinitas-case-journey { grid-template-columns: 1fr; }
}
.infinitas-case-journey__flow {
	display: grid;
	gap: 12px;
}
.infinitas-case-journey__step {
	display: flex;
	align-items: center;
	gap: 16px;
	border: 1px solid var( --infinitas-color-border, #E4E8F0 );
	border-radius: 14px;
	padding: 16px;
	background: var( --infinitas-color-page_bg, #fff );
}
.infinitas-case-journey__num {
	flex: none;
	width: 32px;
	height: 32px;
	border-radius: 9px;
	background: var( --infinitas-color-brand_tint, #E0EAFF );
	color: var( --infinitas-color-brand, #1D50E0 );
	font-family: var( --infinitas-font-heading, 'Space Grotesk' ), sans-serif;
	font-weight: 700;
	font-size: 13px;
	display: flex;
	align-items: center;
	justify-content: center;
}
.infinitas-case-journey__step b {
	font-family: var( --infinitas-font-heading, 'Space Grotesk' ), sans-serif;
	font-size: 16px;
	font-weight: 600;
	display: block;
}
.infinitas-case-journey__step span {
	color: var( --infinitas-color-muted_text, #64748B );
	font-size: 13px;
}
.infinitas-case-journey__step--final {
	background: var( --infinitas-color-brand, #1D50E0 );
	border-color: var( --infinitas-color-brand, #1D50E0 );
}
.infinitas-case-journey__step--final .infinitas-case-journey__num {
	background: rgba( 255, 255, 255, .2 );
	color: #fff;
}
.infinitas-case-journey__step--final b {
	color: #fff;
}
.infinitas-case-journey__step--final span {
	color: #C9D9FF;
}
.infinitas-case-journey__arrow {
	height: 14px;
	display: flex;
	justify-content: center;
	color: var( --infinitas-color-border, #E4E8F0 );
}

/* Feature → benefit grid (infinitas/case-benefits). */
.infinitas-case-benefits {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 16px;
}
@media ( max-width: 900px ) {
	.infinitas-case-benefits { grid-template-columns: 1fr; }
}
.infinitas-case-benefit {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 16px;
	align-items: center;
	border: 1px solid var( --infinitas-color-border, #E4E8F0 );
	border-radius: 18px;
	padding: 20px 24px;
	background: var( --infinitas-color-page_bg, #fff );
	transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.infinitas-case-benefit:hover {
	transform: translateY( -4px );
	box-shadow: 0 26px 52px -30px rgba( 6, 12, 26, .3 );
	border-color: var( --infinitas-color-brand_light, #4F8EF7 );
}
.infinitas-case-benefit__icon {
	flex: none;
	width: 52px;
	height: 52px;
	border-radius: 14px;
	background: var( --infinitas-color-brand_tint, #E0EAFF );
	color: var( --infinitas-color-brand, #1D50E0 );
	display: flex;
	align-items: center;
	justify-content: center;
}
.infinitas-case-benefit__feat {
	font-family: var( --infinitas-font-heading, 'Space Grotesk' ), sans-serif;
	font-size: 17px;
	font-weight: 700;
	color: var( --infinitas-color-heading_text, #060C1A );
	display: block;
	margin-bottom: 6px;
}
.infinitas-case-benefit__arrow {
	display: flex;
	align-items: center;
	gap: 8px;
	color: var( --infinitas-color-brand, #1D50E0 );
	font-size: 13px;
	font-family: var( --infinitas-font-heading, 'Space Grotesk' ), sans-serif;
	font-weight: 600;
}
.infinitas-case-benefit__arrow svg {
	flex: none;
}
.infinitas-case-benefit__text {
	color: var( --infinitas-color-muted_text, #64748B );
	font-size: 14px;
	line-height: 1.5;
	margin: 8px 0 0;
}
.infinitas-case-benefits__note {
	text-align: center;
	max-width: 70ch;
	margin: 32px auto 0;
	color: var( --infinitas-color-muted_text, #64748B );
	font-size: 15px;
	line-height: 1.6;
}

/* Horizontal step row (infinitas/case-steps) — icon-circle steps in a
   line, connected by a corner arrow between each pair, no "final"
   highlight (a flat journey, not one ending on a destination). */
.infinitas-case-steprow {
	display: grid;
	grid-template-columns: repeat( 4, 1fr );
	gap: 0;
	position: relative;
	margin-top: 32px;
}
@media ( max-width: 1000px ) {
	.infinitas-case-steprow { grid-template-columns: 1fr 1fr; gap: 24px; }
}
@media ( max-width: 560px ) {
	.infinitas-case-steprow { grid-template-columns: 1fr; }
}
.infinitas-case-step {
	text-align: center;
	padding: 0 16px;
	position: relative;
}
.infinitas-case-step::after {
	content: "";
	position: absolute;
	top: 26px;
	right: -8px;
	width: 16px;
	height: 16px;
	border-top: 2px solid var( --infinitas-color-border, #E4E8F0 );
	border-right: 2px solid var( --infinitas-color-border, #E4E8F0 );
	transform: rotate( 45deg );
}
@media ( max-width: 1000px ) {
	.infinitas-case-step::after { display: none; }
}
.infinitas-case-step--last::after {
	display: none;
}
.infinitas-case-step__icon {
	width: 54px;
	height: 54px;
	border-radius: 50%;
	background: var( --infinitas-color-page_bg, #fff );
	border: 2px solid var( --infinitas-color-brand, #1D50E0 );
	color: var( --infinitas-color-brand, #1D50E0 );
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0 auto 16px;
}
.infinitas-case-step b {
	font-family: var( --infinitas-font-heading, 'Space Grotesk' ), sans-serif;
	font-size: 16px;
	font-weight: 700;
	display: block;
	margin-bottom: 4px;
}
.infinitas-case-step span {
	color: var( --infinitas-color-muted_text, #64748B );
	font-size: 13px;
	line-height: 1.5;
}

/* Numbered workstream cards (infinitas/case-workstreams). */
.infinitas-case-stream {
	border: 1px solid var( --infinitas-color-border, #E4E8F0 );
	border-radius: 18px;
	background: var( --infinitas-color-page_bg, #fff );
	overflow: hidden;
	margin-bottom: 16px;
	transition: border-color .2s ease, box-shadow .2s ease;
}
.infinitas-case-stream:hover {
	border-color: var( --infinitas-color-brand_light, #4F8EF7 );
	box-shadow: 0 26px 52px -34px rgba( 6, 12, 26, .28 );
}
.infinitas-case-stream__top {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 16px;
	align-items: center;
	padding: 20px 24px;
	border-bottom: 1px solid var( --infinitas-color-border, #E4E8F0 );
	background: var( --infinitas-color-alt_bg, #F5F7FA );
}
.infinitas-case-stream__num {
	width: 44px;
	height: 44px;
	border-radius: 12px;
	background: var( --infinitas-color-brand, #1D50E0 );
	color: #fff;
	font-family: var( --infinitas-font-heading, 'Space Grotesk' ), sans-serif;
	font-weight: 700;
	font-size: 15px;
	display: flex;
	align-items: center;
	justify-content: center;
}
.infinitas-case-stream__top h3 {
	font-family: var( --infinitas-font-heading, 'Space Grotesk' ), sans-serif;
	font-size: 19px;
	font-weight: 700;
	margin: 0;
}
.infinitas-case-stream__body {
	padding: 20px 24px 24px;
}
.infinitas-case-stream__body p {
	color: var( --infinitas-color-muted_text, #64748B );
	font-size: 15px;
	line-height: 1.6;
	margin: 0 0 16px;
}

/* Location progress bars (infinitas/case-citations). */
.infinitas-case-citrow {
	display: grid;
	gap: 16px;
	max-width: 760px;
	margin: 0 auto;
}
.infinitas-case-cit {
	display: grid;
	grid-template-columns: 130px 1fr auto;
	gap: 16px;
	align-items: center;
}
@media ( max-width: 720px ) {
	.infinitas-case-cit { grid-template-columns: 1fr; gap: 8px; }
}
.infinitas-case-cit__loc {
	font-family: var( --infinitas-font-heading, 'Space Grotesk' ), sans-serif;
	font-weight: 700;
	font-size: 15px;
}
.infinitas-case-cit__loc small {
	display: block;
	font-weight: 400;
	font-size: 12px;
	color: var( --infinitas-color-muted_text, #64748B );
	margin-top: 2px;
}
.infinitas-case-cit__bar {
	height: 34px;
	border-radius: 8px;
	background: var( --infinitas-color-alt_bg, #F5F7FA );
	border: 1px solid var( --infinitas-color-border, #E4E8F0 );
	overflow: hidden;
	display: flex;
}
.infinitas-case-cit__live {
	background: var( --infinitas-color-brand, #1D50E0 );
	height: 100%;
}
.infinitas-case-cit__pend {
	background: repeating-linear-gradient( 45deg, var( --infinitas-color-brand_tint, #E0EAFF ), var( --infinitas-color-brand_tint, #E0EAFF ) 6px, #fff 6px, #fff 12px );
	height: 100%;
}
.infinitas-case-cit__fig {
	font-family: var( --infinitas-font-heading, 'Space Grotesk' ), sans-serif;
	font-weight: 700;
	font-size: 15px;
	white-space: nowrap;
}
.infinitas-case-cit__fig span {
	color: var( --infinitas-color-muted_text, #64748B );
	font-weight: 400;
	font-size: 13px;
}
.infinitas-case-legend {
	display: flex;
	gap: 32px;
	justify-content: center;
	margin-top: 24px;
	flex-wrap: wrap;
	font-size: 13px;
	color: var( --infinitas-color-muted_text, #64748B );
}
.infinitas-case-legend__k {
	display: inline-block;
	width: 14px;
	height: 10px;
	border-radius: 3px;
	margin-right: 7px;
	vertical-align: middle;
}
.infinitas-case-legend__k--live {
	background: var( --infinitas-color-brand, #1D50E0 );
}
.infinitas-case-legend__k--pend {
	background: repeating-linear-gradient( 45deg, var( --infinitas-color-brand_tint, #E0EAFF ), var( --infinitas-color-brand_tint, #E0EAFF ) 5px, #fff 5px, #fff 10px );
}
.infinitas-case-citrow__note {
	text-align: center;
	max-width: 70ch;
	margin: 24px auto 0;
	color: var( --infinitas-color-muted_text, #64748B );
	font-size: 14px;
	line-height: 1.6;
}

/* Big number + bars (infinitas/case-progress-split). */
.infinitas-case-progress-split {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 48px;
	align-items: center;
	max-width: 900px;
	margin: 0 auto;
}
@media ( max-width: 720px ) {
	.infinitas-case-progress-split { grid-template-columns: 1fr; }
}
.infinitas-case-bigfig {
	text-align: center;
}
.infinitas-case-bigfig__v {
	font-family: var( --infinitas-font-heading, 'Space Grotesk' ), sans-serif;
	font-size: 64px;
	font-weight: 700;
	line-height: 1;
	color: var( --infinitas-color-brand, #1D50E0 );
	letter-spacing: -.04em;
}
.infinitas-case-bigfig__l {
	color: var( --infinitas-color-muted_text, #64748B );
	font-size: 15px;
	margin-top: 10px;
	line-height: 1.5;
}
.infinitas-case-pbars {
	display: grid;
	gap: 12px;
}
.infinitas-case-pline {
	display: grid;
	grid-template-columns: 110px 1fr 44px;
	gap: 12px;
	align-items: center;
	font-size: 14px;
}
@media ( max-width: 720px ) {
	.infinitas-case-pline { grid-template-columns: 90px 1fr 38px; }
}
.infinitas-case-pline__t {
	color: var( --infinitas-color-muted_text, #64748B );
}
.infinitas-case-pline__track {
	height: 26px;
	background: var( --infinitas-color-alt_bg, #F5F7FA );
	border-radius: 7px;
	overflow: hidden;
}
.infinitas-case-pline__fill {
	height: 100%;
	background: var( --infinitas-color-brand, #1D50E0 );
	border-radius: 7px;
}
.infinitas-case-pline__n {
	font-family: var( --infinitas-font-heading, 'Space Grotesk' ), sans-serif;
	font-weight: 700;
	text-align: right;
}

/* Growth chart (infinitas/case-chart). */
.infinitas-case-chartwrap {
	max-width: 860px;
	margin: 0 auto;
	border: 1px solid var( --infinitas-color-border, #E4E8F0 );
	border-radius: 18px;
	background: var( --infinitas-color-page_bg, #fff );
	padding: 32px;
}
.infinitas-case-chart__top {
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
	gap: 24px;
	flex-wrap: wrap;
	margin-bottom: 24px;
}
.infinitas-case-chart__big {
	font-family: var( --infinitas-font-heading, 'Space Grotesk' ), sans-serif;
	font-size: 44px;
	font-weight: 700;
	line-height: 1;
	color: var( --infinitas-color-brand, #1D50E0 );
	letter-spacing: -.03em;
}
.infinitas-case-chart__up {
	display: inline-block;
	font-family: var( --infinitas-font-heading, 'Space Grotesk' ), sans-serif;
	font-weight: 700;
	font-size: 12px;
	color: #0F7B4F;
	background: #E4F5EC;
	padding: 4px 10px;
	border-radius: 999px;
	margin-left: 8px;
	vertical-align: middle;
}
.infinitas-case-chart__src {
	font-size: 12px;
	color: var( --infinitas-color-muted_text, #64748B );
	text-align: right;
}
.infinitas-case-chart svg {
	width: 100%;
	height: auto;
	display: block;
}
.infinitas-case-chart__grid {
	stroke: var( --infinitas-color-border, #E4E8F0 );
	stroke-width: 1;
}
.infinitas-case-chart__axis {
	fill: var( --infinitas-color-muted_text, #64748B );
	font-family: var( --infinitas-font-body, 'DM Sans' ), sans-serif;
	font-size: 11px;
}
.infinitas-case-chart__line {
	fill: none;
	stroke: var( --infinitas-color-brand, #1D50E0 );
	stroke-width: 3;
	stroke-linecap: round;
	stroke-linejoin: round;
}
.infinitas-case-chart__dot {
	fill: #fff;
	stroke: var( --infinitas-color-brand, #1D50E0 );
	stroke-width: 3;
}
.infinitas-case-chart__lastdot {
	fill: var( --infinitas-color-brand, #1D50E0 );
	stroke: #fff;
	stroke-width: 3;
}
.infinitas-case-chart__lbl {
	fill: var( --infinitas-color-heading_text, #060C1A );
	font-family: var( --infinitas-font-heading, 'Space Grotesk' ), sans-serif;
	font-weight: 700;
	font-size: 13px;
}
.infinitas-case-chart__note {
	text-align: center;
	max-width: 70ch;
	margin: 24px auto 0;
	color: var( --infinitas-color-muted_text, #64748B );
	font-size: 14px;
	line-height: 1.6;
}