/**
 * GVA — Case Study single template styling. Tokens, buttons, `.container`,
 * the heading system and `.reveal` come from main.css — see
 * docs/CASE-STUDIES.md §21.
 *
 * Enqueued only on `is_singular( 'case_study' )` (inc/enqueue.php).
 */

/* ==========================================================================
   01 · Hero
   ========================================================================== */

.case-hero {
	padding: 60px 0 0;
	background: var(--bone);
}

.case-crumb ol {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
	margin: 0 0 30px;
	padding: 0;
	list-style: none;
	color: var(--text-muted);
	font-family: var(--font-mono);
	font-size: 11px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.case-crumb li {
	display: flex;
	align-items: center;
	gap: 10px;
}

.case-crumb li + li::before {
	content: "/";
	color: var(--red);
}

.case-crumb a {
	color: var(--text-muted);
}

.case-crumb a:hover {
	color: var(--red);
}

.case-crumb [aria-current="page"] {
	color: var(--red);
}

.case-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 9px;
	margin: 0 0 26px;
	padding: 0;
	list-style: none;
}

.case-chip {
	padding: 7px 13px;
	border: 1px solid rgba(18, 18, 18, 0.16);
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.6);
	color: #4a4a4a;
	font-family: var(--font-mono);
	font-size: 10.5px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.case-chip--primary {
	border-color: var(--red);
	background: var(--red);
	color: var(--white);
}

.case-hero__title {
	max-width: 19ch;
	font-size: clamp(38px, 5.2vw, 62px);
	line-height: 1.05;
	letter-spacing: -0.038em;
}

/* The hero accent keeps the title's inherited colour: the <u> is a content
   seam for the accent phrase, not a decoration. */
.case-hero__title u {
	text-decoration: none;
}

.case-hero__lede {
	max-width: 62ch;
	margin-top: 26px;
	color: #4e4e4e;
	font-size: 19px;
	line-height: 1.55;
	text-wrap: pretty;
}

.case-hero__cover {
	position: relative;
	margin: 52px 0 0;
	overflow: hidden;
	border-radius: 10px 10px 0 0;
	background: var(--black);
	aspect-ratio: 21 / 9;
}

.case-hero__cover-img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	/* The same grayscale/contrast brand treatment the Home hero and Track
	 * record covers use (front-page.css, .hero-media__img / .case__image). */
	filter: grayscale(1) contrast(1.06) brightness(0.92);
}

.case-hero__cover::after {
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(238, 39, 55, 0.16), rgba(18, 18, 18, 0.3) 58%, rgba(18, 18, 18, 0.8));
	mix-blend-mode: multiply;
	content: "";
	pointer-events: none;
}

.case-hero__cover-cap {
	position: absolute;
	z-index: 1;
	left: 22px;
	bottom: 18px;
	padding: 6px 11px;
	border: 1px solid rgba(255, 255, 255, 0.22);
	background: rgba(18, 18, 18, 0.62);
	backdrop-filter: blur(4px);
	color: var(--white);
	font-family: var(--font-mono);
	font-size: 10.5px;
	letter-spacing: 0.07em;
	text-transform: uppercase;
}

/* ==========================================================================
   02 · Snapshot
   ========================================================================== */

.case-snapshot {
	padding: 44px 0 52px;
	background: var(--white);
}

.case-snapshot__grid {
	display: grid;
	grid-template-columns: repeat(6, 1fr);
	gap: 28px 24px;
	margin: 0;
	padding: 30px 0;
	border-top: 1px solid var(--line);
	border-bottom: 1px solid var(--line);
}

.case-snapshot__item dt {
	margin-bottom: 9px;
	color: var(--text-muted);
	font-family: var(--font-mono);
	font-size: 10px;
	letter-spacing: 0.11em;
	text-transform: uppercase;
}

.case-snapshot__item dd {
	margin: 0;
	font-size: 15px;
	font-weight: 600;
	line-height: 1.35;
	letter-spacing: -0.01em;
}

.case-snapshot__secondary {
	display: block;
	margin-top: 3px;
	color: var(--text-muted);
	font-weight: 400;
}

/* ==========================================================================
   03 · Results band
   ========================================================================== */

.case-results {
	position: relative;
	overflow: hidden;
	padding: 60px 0;
	background: var(--black);
	color: var(--white);
}

.case-results__texture {
	position: absolute;
	z-index: 0;
	top: -150px;
	right: -120px;
	width: 500px;
	height: 500px;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(238, 39, 55, 0.34), rgba(238, 39, 55, 0) 60%);
	pointer-events: none;
}

.case-results .container {
	position: relative;
	z-index: 1;
}

.case-results .eyebrow {
	margin-bottom: 34px;
}

.case-results__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 40px;
	margin: 0;
	padding: 34px 0 36px;
	border-top: 1px solid rgba(255, 255, 255, 0.16);
	border-bottom: 1px solid rgba(255, 255, 255, 0.16);
}

.case-results__grid[data-n="1"] { grid-template-columns: 1fr; max-width: 460px; }
.case-results__grid[data-n="2"] { grid-template-columns: repeat(2, 1fr); max-width: 900px; }
.case-results__grid[data-n="4"] { grid-template-columns: repeat(4, 1fr); }

.case-result__value {
	display: block;
	color: var(--red);
	font-size: clamp(42px, 4.4vw, 58px);
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	letter-spacing: -0.04em;
	line-height: 0.96;
}

.case-result__desc {
	display: block;
	max-width: 26ch;
	margin-top: 14px;
	color: var(--white);
	font-size: 15px;
	font-weight: 500;
	line-height: 1.45;
}

.case-result__note {
	display: block;
	margin-top: 10px;
	color: var(--text-muted);
	font-family: var(--font-mono);
	font-size: 10.5px;
	font-style: normal;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

/* ==========================================================================
   Shared — block backgrounds
   ========================================================================== */

.case-block { padding: 96px 0; }
.case-block--bone { background: var(--bone); }
.case-block--white { background: var(--white); }
.case-block--grey { background: var(--grey-sec); }

/* ==========================================================================
   04 · Situation + challenge
   ========================================================================== */

.case-two-col {
	display: grid;
	grid-template-columns: 1.18fr 0.82fr;
	align-items: start;
	gap: 64px;
}

.case-prose p {
	color: #3d3d3d;
	font-size: 17.5px;
	line-height: 1.62;
	text-wrap: pretty;
}

.case-prose p + p {
	margin-top: 20px;
}

.case-prose p.is-lead {
	color: var(--black);
	font-size: 20px;
	font-weight: 500;
	line-height: 1.5;
	letter-spacing: -0.015em;
}

.case-challenge {
	padding-top: 26px;
	border-top: 1.5px solid var(--red);
}

.case-challenge h3 {
	margin-bottom: 22px;
	color: var(--red);
	font-family: var(--font-mono);
	font-size: 11px;
	font-weight: 400;
	letter-spacing: 0.13em;
	text-transform: uppercase;
}

.case-challenge ul {
	display: flex;
	flex-direction: column;
	gap: 18px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.case-challenge li {
	position: relative;
	padding-left: 20px;
	color: #3d3d3d;
	font-size: 15.5px;
	line-height: 1.55;
	text-wrap: pretty;
}

.case-challenge li::before {
	position: absolute;
	top: 0.66em;
	left: 0;
	width: 11px;
	height: 1.5px;
	background: var(--red);
	content: "";
}

/* ==========================================================================
   05 · Approach — diagram
   ========================================================================== */

.case-diagram {
	position: relative;
	overflow: hidden;
	margin: 0 0 52px;
	padding: 40px 38px 32px;
	border-radius: 10px;
	background: var(--black);
}

.case-diagram__grid {
	position: absolute;
	inset: 0;
	background-image:
		linear-gradient(rgba(255, 255, 255, 0.045) 1px, transparent 1px),
		linear-gradient(90deg, rgba(255, 255, 255, 0.045) 1px, transparent 1px);
	background-size: 34px 34px;
	pointer-events: none;
}

.case-flow {
	position: relative;
	display: flex;
	flex-direction: column;
}

.case-flow__rowlabel {
	margin: 0 0 14px;
	color: #b8b8b8;
	font-family: var(--font-mono);
	font-size: 13px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

.case-flow__row {
	display: grid;
	gap: 16px;
	margin-bottom: 16px;
}

.case-flow__row[data-cols="1"] { grid-template-columns: 1fr; }
.case-flow__row[data-cols="2"] { grid-template-columns: 1fr 1fr; }
.case-flow__row[data-cols="3"] { grid-template-columns: repeat(3, 1fr); }
.case-flow__row[data-cols="4"] { grid-template-columns: repeat(4, 1fr); }

.case-fnode {
	display: flex;
	flex-direction: column;
	gap: 9px;
	padding: 20px 22px;
	border-radius: 8px;
}

.case-fnode__over {
	color: #b8b8b8;
	font-family: var(--font-mono);
	font-size: 13px;
	letter-spacing: 0.13em;
	text-transform: uppercase;
}

.case-fnode h4 {
	color: var(--white);
	font-family: var(--font-sans);
	font-size: 17px;
	font-weight: 700;
	line-height: 1.24;
	letter-spacing: -0.015em;
	text-wrap: pretty;
}

.case-fnode p {
	color: #c9c9c9;
	font-size: 14.5px;
	line-height: 1.5;
	text-wrap: pretty;
}

.case-fnode ul {
	display: flex;
	flex-direction: column;
	gap: 7px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.case-fnode li {
	position: relative;
	padding-left: 16px;
	color: #c9c9c9;
	font-size: 14.5px;
	line-height: 1.45;
}

.case-fnode li::before {
	position: absolute;
	top: 0.65em;
	left: 0;
	width: 8px;
	height: 1px;
	background: currentColor;
	opacity: 0.5;
	content: "";
}

.case-fnode__foot {
	margin-top: 2px;
	padding-top: 11px;
	border-top: 1px solid rgba(255, 255, 255, 0.14);
	color: #b8b8b8;
	font-family: var(--font-mono);
	font-size: 13px;
	line-height: 1.5;
	text-wrap: pretty;
}

/* Node roles — colours only, so the fixed markup above stays generic. */
.case-fnode--hero { background: var(--red-dark); }
.case-fnode--hero .case-fnode__over { color: var(--white); opacity: 0.85; }
.case-fnode--hero h4 { font-size: 20px; }
.case-fnode--hero p { color: var(--white); font-size: 15.5px; }
.case-fnode--hero .case-fnode__foot { border-top-color: rgba(255, 255, 255, 0.38); color: var(--white); font-size: 13.5px; }

.case-fnode--built { border: 1px solid var(--red); background: #181818; }
.case-fnode--built h4 { color: var(--red); }

.case-fnode--client { border: 1px solid rgba(255, 255, 255, 0.4); background: #181818; }

.case-fnode--ghost { border: 1px dashed rgba(255, 255, 255, 0.22); background: transparent; }
.case-fnode--ghost h4 { color: #b8b8b8; }
.case-fnode--ghost .case-fnode__over,
.case-fnode--ghost p,
.case-fnode--ghost li,
.case-fnode--ghost .case-fnode__foot { color: #9a9a9a; }

/* An existing system the diagram reads from but never writes to — dashed like
   --ghost, but its own modifier: the meaning is "read-only", not "not chosen". */
.case-fnode--readonly { border: 1px dashed rgba(255, 255, 255, 0.4); background: transparent; }
.case-fnode--readonly h4,
.case-fnode--readonly p { color: #b8b8b8; }

.case-flow__link {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	height: 52px;
}

.case-flow__link::before {
	position: absolute;
	z-index: 0;
	top: 0;
	bottom: 12px;
	left: 50%;
	width: 2px;
	margin-left: -1px;
	background: var(--red);
	content: "";
}

.case-flow__link::after {
	position: absolute;
	bottom: 0;
	left: 50%;
	margin-left: -6px;
	border-top: 11px solid var(--red);
	border-right: 6px solid transparent;
	border-left: 6px solid transparent;
	content: "";
}

.case-flow__link[data-from="left"]::before,
.case-flow__link[data-from="left"]::after { left: 25%; }

.case-flow__link[data-from="left"] .case-flow__link-label { margin-left: 32%; }

.case-flow__link[data-from="right"]::before,
.case-flow__link[data-from="right"]::after { left: 75%; }

.case-flow__link[data-from="right"] .case-flow__link-label { margin-right: 32%; margin-left: 0; }

.case-flow__link[data-split]::before { bottom: 26px; }

/* Live-data connector — decorative pulse for hops that describe live
   telemetry (docs/CASE-STUDIES.md §5); no information depends on it. */
.case-flow__pulse {
	position: absolute;
	top: 0;
	left: 50%;
	width: 2px;
	height: 14px;
	margin-left: -1px;
	background: linear-gradient(180deg, transparent, var(--white));
	opacity: 0;
}

.case-flow__link[data-live] .case-flow__pulse {
	animation: gva-case-flow-pulse 2.6s cubic-bezier(0.5, 0, 0.5, 1) infinite;
}

/* The pulse travels the same bar as the connector's own line/arrowhead, so it
   must follow the same data-from offset — left uncorrected it stays centred
   while the line moves, reading as a second, disconnected mark. */
.case-flow__link[data-from="left"] .case-flow__pulse { left: 25%; }
.case-flow__link[data-from="right"] .case-flow__pulse { left: 75%; }

@keyframes gva-case-flow-pulse {
	0% { opacity: 0; transform: translateY(-14px); }
	12% { opacity: 0.9; }
	80% { opacity: 0.9; }
	100% { opacity: 0; transform: translateY(40px); }
}

@media (prefers-reduced-motion: reduce) {
	.case-flow__link[data-live] .case-flow__pulse { display: none; animation: none; }
}

/* Plant / cloud frontier — semantic text (the stored boundary_label), not a
   bare rule: the dashed lines either side are decoration only. */
.case-flow__frontier {
	display: flex;
	align-items: center;
	gap: 16px;
	margin: 10px 0 0;
	color: #b8b8b8;
	font-family: var(--font-mono);
	font-size: 13px;
	letter-spacing: 0.13em;
	text-transform: uppercase;
	text-wrap: pretty;
}

.case-flow__frontier::before,
.case-flow__frontier::after {
	flex: 1 1 auto;
	height: 0;
	border-top: 1px dashed rgba(255, 255, 255, 0.34);
	content: "";
}

.case-flow__link-label {
	position: relative;
	z-index: 1;
	margin-left: 26px;
	background: var(--black);
	padding: 0 14px;
	color: #b8b8b8;
	font-family: var(--font-mono);
	font-size: 13px;
	letter-spacing: 0.05em;
	text-wrap: pretty;
}

/* Decorative bracket under a split connector, drawn on an aria-hidden span. */
.case-flow__split {
	position: absolute;
	right: 12%;
	bottom: 12px;
	left: 12%;
	height: 26px;
	border: 2px solid var(--red);
	border-bottom: 0;
	border-radius: 3px 3px 0 0;
}

.case-flow__split::before,
.case-flow__split::after {
	position: absolute;
	bottom: -11px;
	border-top: 11px solid var(--red);
	border-right: 6px solid transparent;
	border-left: 6px solid transparent;
	content: "";
}

.case-flow__split::before { left: -6px; }
.case-flow__split::after { right: -6px; }

.case-flow__note {
	margin: 16px 0 0;
	padding-left: 18px;
	border-left: 1px solid rgba(255, 255, 255, 0.2);
	color: #b8b8b8;
	font-size: 14px;
	line-height: 1.55;
	text-wrap: pretty;
}

.case-flow__band {
	display: flex;
	flex-wrap: wrap;
	gap: 14px 44px;
	margin-top: 24px;
	padding-top: 22px;
	border-top: 1px solid rgba(255, 255, 255, 0.16);
}

.case-flow__band-item {
	display: flex;
	align-items: baseline;
	gap: 9px;
}

.case-flow__band-item b {
	color: var(--red);
	font-family: var(--font-sans);
	font-size: 26px;
	font-weight: 700;
	letter-spacing: -0.02em;
	line-height: 1;
}

.case-flow__band-item span {
	color: #b8b8b8;
	font-family: var(--font-mono);
	font-size: 13px;
	letter-spacing: 0.06em;
}

.case-flow__rule {
	display: flex;
	flex-direction: column;
	gap: 9px;
	margin-top: 24px;
	padding-top: 22px;
	border-top: 1px solid rgba(255, 255, 255, 0.16);
}

.case-flow__rule p {
	position: relative;
	padding-left: 18px;
	color: #c9c9c9;
	font-family: var(--font-mono);
	font-size: 13.5px;
	line-height: 1.55;
	text-wrap: pretty;
}

.case-flow__rule p::before {
	position: absolute;
	top: 0.62em;
	left: 0;
	width: 10px;
	height: 1.5px;
	background: var(--red);
	content: "";
}

/* A rule the diagram wants to read as firmer than the default muted mono
   (config_driven_fleet's "no inbound access" pair — docs/CASE-STUDIES.md §5). */
.case-flow__rule--strong p { color: var(--white); }

.case-legend {
	position: relative;
	z-index: 1;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 24px;
	margin-top: 30px;
	padding-top: 20px;
	border-top: 1px solid rgba(255, 255, 255, 0.14);
}

.case-legend span {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	color: #b8b8b8;
	font-family: var(--font-mono);
	font-size: 13px;
	letter-spacing: 0.06em;
}

.case-legend__swatch {
	display: block;
	flex: 0 0 auto;
	width: 12px;
	height: 12px;
	border-radius: 2px;
}

.case-legend__swatch--hero { background: var(--red-dark); }
.case-legend__swatch--client { border: 1px solid rgba(255, 255, 255, 0.55); }
.case-legend__swatch--ghost { border: 1px dashed rgba(255, 255, 255, 0.3); }
.case-legend__swatch--readonly { border: 1px dashed rgba(255, 255, 255, 0.55); }

.case-legend__cap {
	margin-left: auto;
	color: var(--white);
	font-family: var(--font-mono);
	font-size: 13px;
	letter-spacing: 0.04em;
}

/* ==========================================================================
   05 · Approach — prose
   ========================================================================== */

.case-approach-cols {
	column-count: 2;
	column-gap: 56px;
}

.case-approach-cols p {
	margin: 0;
	color: #3d3d3d;
	font-size: 16.5px;
	line-height: 1.62;
	text-wrap: pretty;
	break-inside: avoid;
}

.case-approach-cols p + p {
	margin-top: 20px;
}

/* ==========================================================================
   06 · Implementation
   ========================================================================== */

.case-phases {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 64px 40px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.case-phase {
	position: relative;
	padding-top: 46px;
	--phase-num: clamp(60px, 5.6vw, 78px);
}

.case-phase__num {
	display: block;
	margin-bottom: 16px;
	color: var(--red);
	font-size: var(--phase-num);
	font-weight: 900;
	font-variant-numeric: tabular-nums;
	letter-spacing: -0.05em;
	line-height: 0.86;
}

.case-phase__title {
	max-width: 22ch;
	font-size: 18px;
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: 0.005em;
	text-transform: uppercase;
	text-wrap: pretty;
}

.case-phase__when {
	display: inline-block;
	margin-top: 13px;
	padding: 4px 9px;
	background: var(--black);
	color: var(--white);
	font-family: var(--font-mono);
	font-size: 11px;
	letter-spacing: 0.09em;
	text-transform: uppercase;
}

.case-phase__body {
	max-width: 30ch;
	margin-top: 15px;
	color: #4a4a4a;
	font-size: 15.5px;
	line-height: 1.55;
	text-wrap: pretty;
}

/* ==========================================================================
   07 · Outcome
   ========================================================================== */

.case-outcome {
	display: grid;
	grid-template-columns: 1fr 1fr;
	align-items: start;
	gap: 56px;
}

.case-outcome__list {
	display: flex;
	flex-direction: column;
	gap: 22px;
	margin: 0;
	padding-top: 26px;
	border-top: 1px solid var(--line);
	list-style: none;
}

.case-outcome__list li {
	position: relative;
	padding-left: 22px;
	color: #3d3d3d;
	font-size: 16.5px;
	line-height: 1.58;
	text-wrap: pretty;
}

.case-outcome__list li::before {
	position: absolute;
	top: 0.62em;
	left: 0;
	width: 12px;
	height: 1.5px;
	background: var(--red);
	content: "";
}

.case-takeaway {
	position: relative;
	overflow: hidden;
	padding: 44px;
	border-radius: 10px;
	background: var(--black);
	color: var(--white);
}

.case-takeaway__texture {
	position: absolute;
	top: -190px;
	right: -160px;
	width: 420px;
	height: 420px;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(238, 39, 55, 0.34), rgba(238, 39, 55, 0) 60%);
	pointer-events: none;
}

.case-takeaway .eyebrow {
	position: relative;
	z-index: 1;
	margin-bottom: 22px;
}

.case-takeaway__text {
	position: relative;
	z-index: 1;
	margin: 0;
	font-size: clamp(21px, 2.2vw, 27px);
	font-weight: 600;
	line-height: 1.32;
	letter-spacing: -0.025em;
	text-wrap: pretty;
}

/* ==========================================================================
   08 · FAQ (light theme; reuses the Home accordion's markup + JS contract)
   ========================================================================== */

.case-faq-list {
	max-width: 900px;
	border-top: 1px solid var(--line);
}

.case-faq-list .faq-item {
	border-bottom: 1px solid var(--line);
}

.case-faq-list .faq-item__toggle {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	width: 100%;
	padding: 24px 0;
	border: 0;
	background: none;
	color: var(--black);
	text-align: left;
	cursor: pointer;
}

.case-faq-list .faq-item__question {
	font-size: 17px;
	font-weight: 500;
	letter-spacing: -0.01em;
	line-height: 1.35;
}

.case-faq-list .faq-item__icon {
	position: relative;
	flex: 0 0 auto;
	width: 16px;
	height: 16px;
}

.case-faq-list .faq-item__icon::before,
.case-faq-list .faq-item__icon::after {
	position: absolute;
	background: var(--red);
	transition: transform 0.25s;
	content: "";
}

.case-faq-list .faq-item__icon::before { top: 7px; left: 0; width: 16px; height: 2px; }
.case-faq-list .faq-item__icon::after { top: 0; left: 7px; width: 2px; height: 16px; }
.case-faq-list .faq-item.is-open .faq-item__icon::after { transform: scaleY(0); }

.case-faq-list .faq-item__panel { overflow: hidden; }

.case-faq-list .faq-item__panel p {
	margin: 0;
	padding: 0 44px 26px 0;
	color: #4a4a4a;
	font-size: 15.5px;
	line-height: 1.62;
	text-wrap: pretty;
}

html.has-faq-accordion .case-faq-list .faq-item__panel {
	max-height: 0;
	transition: max-height 0.35s ease;
}

html.has-faq-accordion .case-faq-list .faq-item.is-open .faq-item__panel {
	max-height: 600px;
}

/* ==========================================================================
   09 · CTA
   ========================================================================== */

.case-cta {
	position: relative;
	overflow: hidden;
	padding: 110px 0;
	background: var(--black);
	color: var(--white);
}

.case-cta__texture {
	position: absolute;
	top: -150px;
	right: -120px;
	width: 500px;
	height: 500px;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(238, 39, 55, 0.34), rgba(238, 39, 55, 0) 60%);
	pointer-events: none;
}

.case-cta .container {
	position: relative;
	z-index: 1;
}

.case-cta__grid {
	display: grid;
	grid-template-columns: 1.15fr 0.85fr;
	align-items: center;
	gap: 56px;
}

.case-cta__title {
	margin-top: 20px;
	font-size: clamp(30px, 3.6vw, 42px);
	font-weight: 700;
	line-height: 1.1;
	letter-spacing: -0.03em;
	text-wrap: balance;
}

.case-cta__title u {
	text-decoration: none;
	background-image: linear-gradient(var(--red), var(--red));
	background-repeat: no-repeat;
	background-position: 0 96%;
	background-size: 100% 0.055em;
	-webkit-box-decoration-break: clone;
	box-decoration-break: clone;
}

.case-cta__copy {
	max-width: 52ch;
	margin-top: 20px;
	color: #b9b9b9;
	font-size: 18px;
	line-height: 1.6;
	text-wrap: pretty;
}

.case-cta__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
	margin-top: 32px;
}

.case-cta__side {
	padding-left: 44px;
	border-left: 1px solid rgba(255, 255, 255, 0.16);
}

.case-cta__side h3 {
	margin-bottom: 18px;
	color: var(--white);
	font-family: var(--font-mono);
	font-size: 10px;
	font-weight: 400;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

.case-cta__channels {
	display: flex;
	flex-direction: column;
	gap: 11px;
	margin: 0;
	padding: 0;
	list-style: none;
	font-family: var(--font-mono);
	font-size: 13px;
	color: #cfcfcf;
}

.case-cta__channels a {
	color: #cfcfcf;
}

.case-cta__channels a:hover {
	color: var(--red);
}

.case-cta__pending {
	color: var(--text-muted);
}

/* ==========================================================================
   Related cases — card component is shared (main.css §9); only the wrapper
   and 2-up grid variant are new here.
   ========================================================================== */

.case-related {
	padding: 104px 0;
	background: var(--bone);
}

.cases--related {
	grid-template-columns: repeat(2, 1fr);
}

/* A lone related card (the current case's own siblings reduced to one by
   status/exclusion) stays a natural card width instead of stretching across
   the two-card grid. */
.cases--related > .case:only-child {
	max-width: 460px;
}

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width: 1080px) {
	.case-flow__row[data-cols="3"],
	.case-flow__row[data-cols="4"] { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 960px) {
	.case-two-col { grid-template-columns: 1fr; gap: 44px; }
	.case-outcome { grid-template-columns: 1fr; gap: 40px; }
	.case-takeaway { padding: 34px; }
	.case-cta__grid { grid-template-columns: 1fr; gap: 36px; }
	.case-cta__side { padding-left: 0; padding-top: 30px; border-left: 0; border-top: 1px solid rgba(255, 255, 255, 0.16); }
	.case-phases { grid-template-columns: repeat(2, 1fr); gap: 56px 32px; }
}

@media (max-width: 1000px) {
	.case-snapshot__grid { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 860px) {
	.case-hero { padding-top: 40px; }
	.case-hero__lede { font-size: 17px; }
	.case-block { padding: 68px 0; }
	.case-results { padding: 48px 0; }
	.case-cta { padding: 76px 0; }
	.section-head { margin-bottom: 38px; }
	.section-lede { font-size: 17px; }
	.case-prose p { font-size: 16.5px; }
	.case-prose p.is-lead { font-size: 18.5px; }
	.case-hero__cover-cap { max-width: calc(100% - 28px); left: 14px; bottom: 14px; padding: 5px 9px; font-size: 9.5px; }
}

@media (max-width: 820px) {
	.case-results__grid { grid-template-columns: 1fr; max-width: none; gap: 32px; }
	.case-results__grid[data-n="1"],
	.case-results__grid[data-n="2"],
	.case-results__grid[data-n="4"] { grid-template-columns: 1fr; max-width: none; }
	.case-approach-cols { column-count: 1; }
	.case-diagram { margin-bottom: 40px; padding: 28px 20px 24px; }
	.case-flow__row[data-cols="2"],
	.case-flow__row[data-cols="3"],
	.case-flow__row[data-cols="4"] { grid-template-columns: 1fr; }
	.case-flow__link { height: 44px; }
	.case-flow__link-label { margin-left: 22px; }
	/* A stacked single-column row has no "left"/"right" node left to point at,
	   so the connector itself — line, arrowhead and pulse — recentres; only
	   its label keeps a small fixed indent. */
	.case-flow__link[data-from="left"]::before,
	.case-flow__link[data-from="left"]::after,
	.case-flow__link[data-from="right"]::before,
	.case-flow__link[data-from="right"]::after { left: 50%; }
	.case-flow__link[data-from="left"] .case-flow__pulse,
	.case-flow__link[data-from="right"] .case-flow__pulse { left: 50%; }
	.case-flow__link[data-from="left"] .case-flow__link-label,
	.case-flow__link[data-from="right"] .case-flow__link-label { margin-right: 0; margin-left: 22px; }
	.case-flow__link[data-split]::before { bottom: 12px; }
	.case-flow__split { display: none; }
	.case-fnode { padding: 18px; }
	.case-legend__cap { order: 9; width: 100%; margin-left: 0; }
	.case-flow__band { gap: 12px 28px; }
	.case-flow__frontier { gap: 10px; font-size: 12px; }
}

@media (max-width: 620px) {
	.case-snapshot__grid { grid-template-columns: 1fr 1fr; gap: 24px 20px; }
	.case-phases { grid-template-columns: 1fr; }
	/* case-study.css loads after main.css, so .cases--related's unconditional
	   2-up rule above would otherwise outrank main.css §9's own ≤620px 1-column
	   collapse; restate it here so Related collapses exactly like Home does. */
	.cases--related { grid-template-columns: 1fr; }
}

/* ==========================================================================
   Reduced motion
   Handled via main.css §11 (.reveal) plus the .case-flow__pulse rule above;
   everything else here is static server-rendered text.
   ========================================================================== */