/**
 * SAP Migration Project Theme -- Case Study single-post stylesheet.
 *
 * Every case-* rule for the "case_study" CPT's single template
 * (single-case_study.php / template-parts/case-study/*) lives here, kept
 * separate from assets/css/main.css the same way home.css / about.css /
 * contact.css are kept separate for their own templates. Only enqueued
 * on a single case_study post -- see sapmig_enqueue_styles() in
 * inc/enqueue/styles.php, gated by is_singular( 'case_study' ).
 *
 * Depends on the shared design tokens declared in main.css's :root
 * (--header-max-width, --header-padding-x*, --gradient-btn-start,
 * --gradient-btn-end, 'Geist' font) -- main.css is always enqueued
 * sitewide, so those custom properties are already in scope. Heading
 * colors/sizes and section padding otherwise follow the same literal
 * values used sitewide (see home.css / about.css): #0f172a headings,
 * #475569 / #64748b body text, 48px/58px desktop section headings
 * stepping to 30px on tablet+mobile, 96px/64px/48px section padding.
 *
 * Plain CSS, no build step -- edit this file directly. Organized into
 * one section per case-study component, in the same order they render
 * on the page.
 */

/* ==========================================================================
   Manual <br>s (via sapmig_text_with_breaks()) only apply above tablet,
   same rule as every other page-scoped stylesheet in this theme --
   scoped to BOTH contexts this design can render under: a real
   case_study CPT post (body class "single-case_study") and a regular
   Page using page-templates/template-case-study.php (body class
   "page-template-template-case-study" -- confirmed directly against
   this site's actual rendered <body> class, not assumed: WordPress
   generates that exact class from the template filename's own
   "template-case-study" stem, which is why it has "template" twice --
   once from WordPress's own "page-template-" prefix, once because the
   file itself is literally named template-case-study.php).
   ========================================================================== */

.single-case_study .home-break,
.page-template-template-case-study .home-break {
	display: inline;
}

@media (max-width: 1024px) {
	.single-case_study .home-break,
	.page-template-template-case-study .home-break {
		display: none;
	}
}

/* ==========================================================================
   Shared: section padding + heading sizes
   Padding lives on the SECTION (not the __inner div) so it only ever
   acts as a narrow-viewport fallback gutter -- same split used on the
   Home/About/Contact pages' page-scoped stylesheets (see home.css).
   ========================================================================== */

.case-hero,
.case-intro,
.case-package,
.case-comparison,
.case-challenges,
.case-conversion,
.case-outcomes {
	position: relative;
	padding: 96px var(--header-padding-x);
}

@media (max-width: 1024px) {
	.case-hero,
	.case-intro,
	.case-package,
	.case-comparison,
	.case-challenges,
	.case-conversion,
	.case-outcomes {
		padding: 64px var(--header-padding-x-tablet);
	}
}

@media (max-width: 640px) {
	.case-hero,
	.case-intro,
	.case-package,
	.case-comparison,
	.case-challenges,
	.case-conversion,
	.case-outcomes {
		padding: 48px var(--header-padding-x-mobile);
	}
}

.case-hero__inner,
.case-intro__inner,
.case-package__inner,
.case-comparison__inner,
.case-challenges__inner,
.case-conversion__inner,
.case-outcomes__inner {
	max-width: var(--header-max-width);
	margin-inline: auto;
}

/* --------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------- */

.case-hero {
	background-color: #fff;
}

.case-hero__inner {
	display: grid;
	grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
	align-items: center;
	gap: 56px;
}

@media (max-width: 1024px) {
	.case-hero__inner {
		grid-template-columns: 1fr;
		gap: 40px;
	}
}

.case-hero__heading {
	margin: 0 0 20px;
	font-family: 'Geist', sans-serif;
	font-weight: 700;
	font-size: 48px;
	line-height: 58px;
	letter-spacing: 0;
	color: #0f172a;
}

@media (max-width: 1024px) {
	.case-hero__heading {
		font-size: 40px;
		line-height: 1.25;
	}
}

@media (max-width: 640px) {
	.case-hero__heading {
		font-size: 40px;
		line-height: 1.25;
	}
}

.case-hero__description {
	margin: 0;
	font-family: 'Geist', sans-serif;
	font-weight: 400;
	font-size: 18px;
	line-height: 28px;
	letter-spacing: 0;
	color: #64748b;
}

@media (max-width: 1024px) {
	.case-hero__description {
		font-size: 16px;
		line-height: 26px;
	}
}

.case-hero__media {
	position: relative;
}

.case-hero__image {
	display: block;
	width: 100%;
	height: 100%;
	min-height: 420px;
	object-fit: cover;
	border-radius: 20px;
}

.case-hero__image--placeholder {
	background-color: #e2e8f0;
}

@media (max-width: 640px) {
	.case-hero__image {
		min-height: 280px;
	}
}

/* Floating badge cards overlaid on top of the photo -- white, rounded,
   shadowed, same overlaid-card technique used sitewide wherever a photo
   carries a small card of its own (see .home-outcomes__row-card's
   shadow value, reused here at a stronger elevation to read as
   "floating above" rather than sitting flush on a light background). */

.case-hero__badge {
	position: absolute;
	display: flex;
	align-items: center;
	background-color: #fff;
}

/* Values below (padding, radius, gap, shadow) match the reference Figma
   file's own "Background+Border"/"Client card" layers exactly, not
   approximated. Both badges are deliberately positioned to hang
   partway OFF the photo's corner (negative top/right, negative
   bottom/left) rather than sitting fully inset inside it -- confirmed
   against the reference file, not a clipping bug. .case-hero__media
   has no overflow:hidden anywhere up its ancestor chain, so this
   renders correctly instead of getting cropped. */

.case-hero__badge--top {
	top: 40px;
    right: -60px;
	gap: 12px;
	padding: 12px 16px 12px 16px;
	border-radius: 999px;
	border: 1px solid #e6ecf5;
	box-shadow: 0 8px 40px rgba(0, 102, 255, 0.13);
}

.case-hero__badge-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	flex-shrink: 0;
	border-radius: 50%;
	color: #fff;
	background: linear-gradient(135deg, #004195 0%, #01aef0 100%);
}

.case-hero__badge-icon svg {
	width: 18px;
	height: 18px;
}

.case-hero__badge-text {
	font-family: 'Geist', sans-serif;
	font-size: 16px;
	line-height: 20px;
	font-weight: 600;
	color: #0f172a;
	white-space: nowrap;
}

/* The bottom badge is a solid navy card (not white like the top one) --
   its title/tag text is light, matching the reference design's own
   white-on-#004195 "Client card" component. */

.case-hero__badge--bottom {
	left: -50px;
    bottom: -50px;
	max-width: min(320px, calc(100% - 24px));
	flex-direction: column;
	align-items: flex-start;
	gap: 12px;
	padding: 16px;
	border-radius: 16px;
	background-color: #004195;
	box-shadow: 0 8px 40px rgba(0, 102, 255, 0.13);
}

.case-hero__badge-title {
	font-family: 'Geist', sans-serif;
	font-size: 16px;
	font-weight: 700;
	line-height: 20px;
	color: #fff;
}

.case-hero__badge-tag {
	padding: 5px 12px;
	border-radius: 999px;
	background-color: rgba(255, 255, 255, 0.14);
	font-family: 'Geist', sans-serif;
	font-size: 12px;
	line-height: 16px;
	font-weight: 500;
	color: #fff;
}

/* Tablet (and the rest of the way down to mobile): the desktop hang-off
   offsets above (top:40px/right:-60px, left:-50px/bottom:-50px) are
   sized for a wide image; at <=1024px the image itself is narrower, so
   those same offsets push both badges straight past the edge of the
   viewport -- confirmed directly (clipped text, horizontal scrollbar)
   at both 1024px and 768px before this fix. Pulls back to a small
   positive inset here, same safe position the existing 640px rule
   below already uses (that one stays untouched -- it's a subset of
   this range, so it still wins at true mobile widths since it comes
   later in the file). Desktop's own values (base rules above, no media
   query) are completely unchanged. */
@media (max-width: 1024px) {
	.case-hero__badge--top {
		top: 16px;
		right: 16px;
	}

	.case-hero__badge--bottom {
		left: 16px;
		bottom: 16px;
		max-width: calc(100% - 32px);
	}
}

/* On mobile, the badges pull back to sitting just inside the photo
   (small positive inset) instead of hanging off its corner like on
   desktop -- hanging them outside on a narrow viewport would either
   overflow past the edge of the screen or crowd the badge against the
   section's own padding, since there's no room on either side to
   spare. */
@media (max-width: 640px) {
	.case-hero__badge--top {
		top: 12px;
		right: 12px;
		padding: 8px 14px 8px 8px;
	}

	.case-hero__badge-text {
		font-size: 12px;
	}

	.case-hero__badge--bottom {
		left: 12px;
		bottom: 12px;
		max-width: calc(100% - 24px);
		padding: 16px;
	}

	.case-hero__badge-title {
		font-size: 14px;
	}
}

/* --------------------------------------------------------------------
   Company Intro
   -------------------------------------------------------------------- */

.case-intro {
background-color: #F8FAFC;
}

.case-intro__inner {
	display: grid;
	grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
	align-items: center;
	gap: 56px;
}

@media (max-width: 1024px) {
	.case-intro__inner {
		grid-template-columns: 1fr;
		gap: 40px;
	}

	.case-intro__media {
		order: 2;
	}

	.case-intro__content {
		order: 1;
	}
}

.case-intro__image {
	display: block;
	width: 100%;
	height: 100%;
	min-height: 360px;
	object-fit: cover;
	border-radius: 20px;
}

.case-intro__image--placeholder {
	background-color: #e2e8f0;
}

@media (max-width: 640px) {
	.case-intro__image {
		min-height: 240px;
	}
}

.case-intro__heading {
	margin: 0 0 20px;
	font-family: 'Geist', sans-serif;
	font-weight: 700;
	font-size: 48px;
	line-height: 58px;
	letter-spacing: 0;
	color: #0f172a;
}

@media (max-width: 1024px) {
	.case-intro__heading {
		font-size: 30px;
		line-height: 1.25;
	}
}

@media (max-width: 640px) {
	.case-intro__heading {
		font-size: 30px;
		line-height: 1.25;
	}
}

.case-intro__paragraph {
	margin: 0 0 16px;
	font-family: 'Geist', sans-serif;
	font-weight: 400;
	font-size: 18px;
	line-height: 28px;
	letter-spacing: 0;
	color: #64748b;
}

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

/* --------------------------------------------------------------------
   Package Banner (light-blue band)
   -------------------------------------------------------------------- */

.case-package {
	background-color: #eef6ff;
	text-align: center;
}

.case-package__heading {
	margin: 0 0 16px;
	font-family: 'Geist', sans-serif;
	font-weight: 700;
	font-size: 48px;
	line-height: 58px;
	letter-spacing: 0;
	color: #0f172a;
}

@media (max-width: 1024px) {
	.case-package__heading {
		font-size: 30px;
		line-height: 1.25;
	}
}

@media (max-width: 640px) {
	.case-package__heading {
		font-size: 30px;
		line-height: 1.25;
	}
}

.case-package__description {
	max-width: 720px;
	margin: 0 auto;
	font-family: 'Geist', sans-serif;
	font-weight: 400;
	font-size: 18px;
	line-height: 28px;
	letter-spacing: 0;
	color: #475569;
}

@media (max-width: 1024px) {
	.case-package__description {
		font-size: 16px;
		line-height: 26px;
	}
}

.case-package__tags {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 16px;
	margin: 32px 0 0;
	padding: 0;
	list-style: none;
}

.case-package__tag {
	padding: 12px 24px;
	border-radius: 999px;
	background-color: #fff;
	box-shadow: 0 2px 12px rgba(0, 65, 149, 0.08);
	font-family: 'Geist', sans-serif;
	font-size: 15px;
	font-weight: 600;
	color: #0f172a;
}

@media (max-width: 640px) {
	.case-package__tags {
		gap: 10px;
		margin-top: 24px;
	}

	.case-package__tag {
		padding: 9px 16px;
		font-size: 13px;
	}
}

/* --------------------------------------------------------------------
   Before/After Comparison Table
   -------------------------------------------------------------------- */

.case-comparison {
	background-color: #fff;
}

.case-comparison__inner {
	display: grid;
	grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
	align-items: start;
	gap: 56px;
}

@media (max-width: 1024px) {
	.case-comparison__inner {
		grid-template-columns: 1fr;
		gap: 32px;
	}
}

.case-comparison__heading {
	margin: 0 0 16px;
	font-family: 'Geist', sans-serif;
	font-weight: 700;
	font-size: 48px;
	line-height: 58px;
	letter-spacing: 0;
	color: #0f172a;
}

@media (max-width: 1024px) {
	.case-comparison__heading {
		font-size: 30px;
		line-height: 1.25;
	}
}

@media (max-width: 640px) {
	.case-comparison__heading {
		font-size: 30px;
		line-height: 1.25;
	}
}

.case-comparison__description {
	margin: 0;
	font-family: 'Geist', sans-serif;
	font-weight: 400;
	font-size: 18px;
	line-height: 28px;
	letter-spacing: 0;
	color: #475569;
}

@media (max-width: 1024px) {
	.case-comparison__description {
		font-size: 16px;
		line-height: 26px;
	}
}

.case-comparison__table-wrap {
	overflow-x: auto;
	border-radius: 16px;
	box-shadow: 0 2px 20px rgba(0, 0, 0, 0.06);
}

.case-comparison__table {
	width: 100%;
	min-width: 480px;
	border-collapse: collapse;
	font-family: 'Geist', sans-serif;
}

@media (max-width: 640px) {
	/* Below 480px of usable width the table would otherwise force a
	   horizontal scroll inside .case-comparison__table-wrap, clipping the
	   "After" column out of view with no visible scroll affordance. Let it
	   shrink to the viewport instead -- cells wrap their text over two
	   lines rather than the table scrolling sideways. */
	.case-comparison__table {
		min-width: 0;
	}
}

/* Header row is split per-column, not one flat color: "Component" and
   "Before" sit on a light gray-blue (matching the reference design's own
   header exactly), while "After" gets the brand-navy fill + white text
   to visually call out the outcome column, the same way .case-comparison__after
   already highlights that column's body cells further down. */

.case-comparison__table th {
	padding: 18px 24px;
	text-align: left;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 1.2px;
	text-transform: uppercase;
	white-space: nowrap;
	background-color: #e6ecf5;
	color: #64748b;
}

.case-comparison__table th:last-child {
	background-color: #004195;
	color: #fff;
}

.case-comparison__table td {
	padding: 18px 24px;
	font-size: 15px;
	line-height: 1.4;
	border-bottom: 1px solid #e6ecf5;
}

.case-comparison__table tbody tr:last-child td {
	border-bottom: none;
}

.case-comparison__table tbody tr:nth-child(odd) {
	background-color: #f4f8fc;
}

.case-comparison__table tbody tr:nth-child(even) {
	background-color: #fff;
}

.case-comparison__component {
	font-weight: 600;
	color: #0f172a;
}

.case-comparison__before {
	color: #64748b;
}

.case-comparison__after {
	font-weight: 700;
	color: var(--gradient-btn-start, #0b4da2);
}

@media (max-width: 640px) {
	.case-comparison__table th,
	.case-comparison__table td {
		padding: 12px 16px;
		font-size: 13px;
	}
}

/* --------------------------------------------------------------------
   Legacy Limitations (dark)
   -------------------------------------------------------------------- */

.case-challenges {
	position: relative;
	z-index: 0;
	overflow: hidden;
	background: radial-gradient(circle at 15% 0%, #163258 0%, #0b1a33 45%, #060f1f 100%);
}

.case-challenges__header {
	text-align: center;
	margin-bottom: 48px;
}

.case-challenges__heading {
	margin: 0;
	font-family: 'Geist', sans-serif;
	font-weight: 700;
	font-size: 48px;
	line-height: 58px;
	letter-spacing: 0;
	color: #fff;
}

@media (max-width: 1024px) {
	.case-challenges__heading {
		font-size: 30px;
		line-height: 1.25;
	}
}

@media (max-width: 640px) {
	.case-challenges__heading {
		font-size: 30px;
		line-height: 1.25;
	}
}

.case-challenges__subheading {
	max-width: 640px;
	margin: 16px auto 0;
	font-family: 'Geist', sans-serif;
	font-weight: 400;
	font-size: 18px;
	line-height: 28px;
	letter-spacing: 0;
	color: #94a3b8;
}

@media (max-width: 1024px) {
	.case-challenges__subheading {
		font-size: 16px;
		line-height: 26px;
	}
}

.case-challenges__grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 24px;
}

@media (max-width: 1024px) {
	.case-challenges__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 20px;
	}
}

@media (max-width: 640px) {
	.case-challenges__grid {
		grid-template-columns: 1fr;
	}
}

.case-challenges__card {
	padding: 32px 28px;
	border-radius: 16px;
	border: 1px solid rgba(255, 255, 255, 0.1);
	background-color: rgba(255, 255, 255, 0.06);
}

.case-challenges__card-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	margin-bottom: 20px;
	border-radius: 12px;
	color: #7db8f5;
	background-color: rgba(1, 174, 240, 0.15);
}

.case-challenges__card-icon svg,
.case-challenges__card-icon img {
	width: 24px;
	height: 24px;
	object-fit: contain;
}

.case-challenges__card-title {
	margin: 0 0 12px;
	font-family: 'Geist', sans-serif;
	font-weight: 700;
	font-size: 20px;
	line-height: 28px;
	color: #fff;
}

.case-challenges__card-description {
	margin: 0;
	font-family: 'Geist', sans-serif;
	font-weight: 400;
	font-size: 15px;
	line-height: 24px;
	color: #94a3b8;
}

/* --------------------------------------------------------------------
   Brownfield Conversion via RISE (light-blue band)
   -------------------------------------------------------------------- */

.case-conversion {
	background-color: #f8fafc;
	background-image: radial-gradient(circle at 50% 50%, rgba(1, 174, 240, 0.15) 0%, rgba(1, 174, 240, 0) 60%);
}

.case-conversion__inner {
	display: grid;
	grid-template-columns: minmax(0, 6fr) minmax(0, 6fr);
	align-items: center;
	gap: 56px;
}

@media (max-width: 1024px) {
	.case-conversion__inner {
		grid-template-columns: 1fr;
		gap: 40px;
	}
}

.case-conversion__heading {
	margin: 0 0 16px;
	font-family: 'Geist', sans-serif;
	font-weight: 700;
	font-size: 48px;
	line-height: 58px;
	letter-spacing: 0;
	color: #0f172a;
}

@media (max-width: 1024px) {
	.case-conversion__heading {
		font-size: 30px;
		line-height: 1.25;
	}
}

@media (max-width: 640px) {
	.case-conversion__heading {
		font-size: 30px;
		line-height: 1.25;
	}
}

.case-conversion__description {
	margin: 0 0 28px;
	font-family: 'Geist', sans-serif;
	font-weight: 400;
	font-size: 18px;
	line-height: 28px;
	letter-spacing: 0;
	color: #64748b;
}

@media (max-width: 1024px) {
	.case-conversion__description {
		font-size: 16px;
		line-height: 26px;
	}
}

.case-conversion__checklist {
	display: flex;
	flex-direction: column;
	gap: 20px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.case-conversion__checklist-item {
	display: flex;
	align-items: flex-start;
	gap: 14px;
}

/* Figma's dot is two layers: a 40x40 soft "Background" halo (radius
   24px, a very low-opacity linear-gradient from #e6f7fe at 26% to
   #01aef0 at 5%) behind a solid 14x14 "Ellipse 6" core (#01aef0,
   checked directly in Figma dev mode -- not approximated). */
.case-conversion__checklist-dot {
	position: relative;
	flex-shrink: 0;
	width: 40px;
	height: 40px;
	margin-top: -13px;
	border-radius: 24px;
	background: linear-gradient(135deg, rgba(230, 247, 254, 0.26) 0%, rgba(1, 174, 240, 0.05) 100%);
	display: flex;
	align-items: center;
	justify-content: center;
}

.case-conversion__checklist-dot-core {
	width: 14px;
	height: 14px;
	border-radius: 50%;
	background-color: #01aef0;
}

.case-conversion__checklist-text {
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.case-conversion__checklist-title {
	font-family: 'Geist', sans-serif;
	font-size: 22px;
	line-height: 28px;
	font-weight: 700;
	color: #0d1b2e;
}

.case-conversion__checklist-description {
	font-family: 'Geist', sans-serif;
	font-size: 16px;
	line-height: 26px;
	color: #64748b;
}

.case-conversion__media {
	position: relative;
}

.case-conversion__image {
	display: block;
	width: 100%;
	height: 100%;
	min-height: 380px;
	object-fit: cover;
	border-radius: 20px;
}

.case-conversion__image--placeholder {
	background-color: #e2e8f0;
}

@media (max-width: 640px) {
	.case-conversion__image {
		min-height: 260px;
	}
}

/* The floating "before -> after" tag card that used to sit here was
   removed by request -- editors only manage one plain image field for
   this section now (see template-parts/case-study/conversion.php). */

/* --------------------------------------------------------------------
   Outcomes -- mirrors template-parts/home/outcomes.php's photo +
   connected-line timeline layout almost exactly (see .home-outcomes__*
   in home.css), with one added floating badge card over the photo.
   -------------------------------------------------------------------- */

.case-outcomes {
	background-color: #fff;
}

.case-outcomes__header {
	text-align: center;
	margin-bottom: 48px;
}

.case-outcomes__heading {
	margin: 0;
	font-family: 'Geist', sans-serif;
	font-weight: 700;
	font-size: 48px;
	line-height: 58px;
	letter-spacing: 0;
	color: #0f172a;
}

@media (max-width: 1024px) {
	.case-outcomes__heading {
		font-size: 30px;
		line-height: 1.25;
	}
}

@media (max-width: 640px) {
	.case-outcomes__heading {
		font-size: 30px;
		line-height: 1.25;
	}
}

.case-outcomes__content {
	display: grid;
	grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
	align-items: center;
	gap: 56px;
}

@media (max-width: 1024px) {
	.case-outcomes__content {
		grid-template-columns: 1fr;
		gap: 40px;
	}

	.case-outcomes__media {
		order: 2;
	}

	.case-outcomes__timeline {
		order: 1;
	}
}

.case-outcomes__media {
	position: relative;
}

.case-outcomes__image {
	display: block;
	width: 100%;
	height: 100%;
	min-height: 320px;
	object-fit: cover;
	border-radius: 20px;
}

.case-outcomes__image--placeholder {
	background-color: #e2e8f0;
}

.case-outcomes__badge {
	position: absolute;
	left: 50%;
	bottom: 20px;
	transform: translateX(-50%);
	max-width: calc(100% - 40px);
	width: max-content;
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 12px 16px;
	border-radius: 16px;
	background-color: #004195;
	box-shadow: 0 8px 40px rgba(0, 102, 255, 0.13);
}

.case-outcomes__badge-icon {
	flex-shrink: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 24px;
	color: #fff;
}

.case-outcomes__badge-icon svg,
.case-outcomes__badge-icon img {
	width: 24px;
	height: 24px;
	object-fit: contain;
}

.case-outcomes__badge-text {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

.case-outcomes__badge-title {
	font-family: 'Geist', sans-serif;
	font-size: 16px;
	line-height: 20px;
	font-weight: 600;
	color: #fff;
	white-space: nowrap;
}

.case-outcomes__badge-caption {
	font-family: 'Geist', sans-serif;
	font-size: 12px;
	line-height: 16px;
	font-weight: 400;
	color: rgba(255, 255, 255, 0.6);
	white-space: nowrap;
}

@media (max-width: 640px) {
	.case-outcomes__image {
		min-height: 240px;
	}

	.case-outcomes__badge {
		bottom: 12px;
		max-width: calc(100% - 24px);
		padding: 10px 14px;
	}

	.case-outcomes__badge-title,
	.case-outcomes__badge-caption {
		white-space: normal;
	}
}

.case-outcomes__timeline {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.case-outcomes__row {
	position: relative;
	display: flex;
	align-items: stretch;
	gap: 20px;
}

.case-outcomes__row-icon {
	position: relative;
	display: flex;
	justify-content: center;
}

/* Per-row connector segment -- only ever spans this row's own real
   height (title + description can vary), not a fixed guess for the
   whole list -- same fix as .home-outcomes__row-icon::before. */

.case-outcomes__row-icon::before {
	content: '';
	position: absolute;
	left: 50%;
	top: 0;
	bottom: -20px;
	width: 2px;
	background-color: rgba(1, 174, 240, 0.25);
	transform: translateX(-50%);
}

.case-outcomes__row--first .case-outcomes__row-icon::before {
	top: 22px;
}

.case-outcomes__row--last .case-outcomes__row-icon::before {
	top: 0;
	bottom: auto;
	height: 22px;
}

.case-outcomes__row-icon-circle {
	position: relative;
	z-index: 1;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	flex-shrink: 0;
	border-radius: 50%;
	border: 2px solid #e6ecf5;
	color: #004195;
	background-color: #fff;
	box-shadow: 0 2px 12px rgba(0, 65, 149, 0.08);
}

.case-outcomes__row-icon-circle svg,
.case-outcomes__row-icon-circle img {
	width: 24px;
	height: 24px;
	object-fit: contain;
}

.case-outcomes__row-card {
	flex: 1 1 auto;
	display: flex;
	flex-direction: column;
	gap: 12px;
	padding: 16px;
	border: 1px solid #e6ecf5;
	border-radius: 16px;
	background-color: #fff;
	box-shadow: 0 2px 12px rgba(0, 65, 149, 0.05);
}

.case-outcomes__row-title {
	margin: 0;
	font-family: 'Geist', sans-serif;
	font-weight: 700;
	font-size: 22px;
	line-height: 28px;
	letter-spacing: 0;
	color: #0f172a;
}

.case-outcomes__row-description {
	margin: 0;
	font-family: 'Geist', sans-serif;
	font-weight: 400;
	font-size: 16px;
	line-height: 26px;
	letter-spacing: 0;
	color: #64748b;
}

@media (max-width: 640px) {
	.case-outcomes__row-title {
		font-size: 18px;
		line-height: 24px;
	}
}