/**
 * Case study detail pages (Case Study Detail Template, templates/case-study-detail.html; the
 * os/case-study-* patterns in the case study's content). Most sections are existing components:
 * the Industry banner and focus cards (os-industry-list.css), the service page overview, automate
 * cards, results strip and contact (os-service-detail.css) and the OS Post CTA panel (os-post.css).
 * This file holds the case study's own pieces (fact cards, approach timeline, benefits list,
 * testimonial) and the few adjustments. Rhythm = Industries: every section 48px above and below
 * (24 on phones), head → content 32px (24), the theme H2, the section-head-gap under it.
 * Loads where an "os-case-detail" class renders (os_interactive_styles).
 */

/* ---------- The case study's content (core/post-content) ---------- */
/* Its sections are full-width Groups, one after another, like a page's own sections. */
.os-case-detail-content > * { margin-block: 0; }

/* ---------- Shared: section head and lead ---------- */
/* As the Industries heads: centred, the theme H2 with no overrides, the OS Section Head gap. */
.os-case-detail__head { text-align: center; }
.os-case-detail__head > * { margin: 0 auto; }
.os-case-detail__head > h2 { max-width: 1010px; }
.os-case-detail__head > h2 + *,
.os-case-detail-benefits__head > h2 + * { margin-top: var(--wp--custom--section-head-gap); }
/* Lead under an H2: 18px medium, as on the service sections. */
.os-case-detail__lead {
	max-width: 1010px;
	font-size: var(--wp--preset--font-size--large);
	font-weight: 500;
	line-height: 1.5;
	color: var(--wp--preset--color--ink);
}

/* Bullet list: the site's list accent, the mega menu sparkle (as OS Key Facts), brand. */
.os-case-detail-bullets {
	margin: 0;
	padding: 0;
	list-style: none;
}
.os-case-detail-bullets > li {
	position: relative;
	margin: 0;
	padding-left: 32px;
	font-size: var(--wp--preset--font-size--medium);
	font-weight: 500;
	line-height: 1.6;
	color: var(--wp--preset--color--ink-soft);
}
.os-case-detail-bullets > li + li { margin-top: 12px; }
.os-case-detail-bullets > li::before {
	content: "";
	position: absolute;
	top: 3px;
	left: 0;
	width: 20px;
	height: 20px;
	background-color: var(--wp--preset--color--brand);
	-webkit-mask: url("../images/ui/sparkle.svg") center / contain no-repeat;
	mask: url("../images/ui/sparkle.svg") center / contain no-repeat;
}

@media (max-width: 768px) {
	.os-case-detail__lead { font-size: var(--wp--preset--font-size--medium); }
	.os-case-detail-bullets > li { font-size: var(--wp--preset--font-size--medium); }
}

/* ---------- Hero (os/case-study-hero) ---------- */
/* The Industry banner (hero glow, breadcrumbs, 48px H1, image on the right at 340px, stacked
   below 1101px). Case study titles are long, so the H1 takes the whole text column. The brief's
   facts follow the banner in their own section (os/case-study-glance). */
.os-case-detail-hero .os-industry-list-hero__copy > .os-industry-list-hero__title { max-width: none; }

/* ---------- At a glance (os/case-study-glance) ---------- */
/* The client's current case study pages: three fact cards across under the banner (theirs are
   black with a twilight glow). Ours (user, 2026-10-10: the blue gradient background): the
   Industries stats card's look, the site's blue gradient (165deg brand → navy-deep) with its teal
   and electric corner glows, 16px corners, white text.
   Title Inter 600 24px (an H2: the facts come before the first section head), 24px, then the
   text (18px medium); Platforms & Partners puts an OS Eyebrow Small label over each list of
   names; names with a page are white underlined links (mint on hover). White section, standard 48px rhythm. Stacked below
   1101px. */
.os-case-detail-glance {
	padding-top: 48px;
	padding-bottom: 48px;
	background: var(--wp--preset--color--white);
}
.os-case-detail-glance > * { margin-block: 0; }
.os-case-detail-glance__grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 24px;
}
.os-case-detail-glance__grid > * { margin: 0; }
.os-glance-card {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	padding: 36px 32px 40px;
	border-radius: var(--wp--preset--border-radius--lg);
	background: linear-gradient(165deg, var(--wp--preset--color--brand) 0, var(--wp--preset--color--navy-deep) 100%);
	color: var(--wp--preset--color--white);
}
.os-glance-card::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background:
		radial-gradient(circle at 100% 100%, color-mix(in srgb, var(--wp--preset--color--teal) 20%, transparent) 0, transparent 300px),
		radial-gradient(circle at 0 0, color-mix(in srgb, var(--wp--preset--color--electric) 22%, transparent) 0, transparent 260px);
	pointer-events: none;
}
.os-glance-card > * { margin: 0; }
.os-glance-card > .os-glance-card__title {
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--x-large);
	font-weight: 600;
	line-height: 1.35;
	letter-spacing: -0.3px;
	color: var(--wp--preset--color--white);
}
.os-glance-card > .os-glance-card__title + * { margin-top: 24px; }
.os-glance-card > .os-glance-card__text {
	font-size: var(--wp--preset--font-size--large);
	font-weight: 500;
	line-height: 1.6;
	color: var(--wp--custom--color--on-brand);
}
.os-glance-card > .os-glance-card__label { color: rgb(255 255 255 / 0.72); }
.os-glance-card > .os-glance-card__label + .os-glance-card__text { margin-top: 6px; }
.os-glance-card > .os-glance-card__text + .os-glance-card__label { margin-top: 20px; }
.os-glance-card__text--link a {
	font-weight: 600;
	color: var(--wp--preset--color--white);
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 4px;
	transition: color var(--os-fast) var(--os-ease);
}
.os-glance-card__text--link a:hover,
.os-glance-card__text--link a:focus-visible { color: var(--wp--preset--color--mint); }
.os-glance-card__text--link a:focus-visible { outline: 2px solid var(--wp--preset--color--white); outline-offset: 3px; border-radius: 2px; }

@media (max-width: 1100px) {
	.os-case-detail-glance__grid { grid-template-columns: minmax(0, 1fr); gap: 16px; }
	.os-glance-card { padding: 28px 28px 32px; }
}
@media (max-width: 768px) {
	.os-case-detail-glance { padding-top: calc(var(--wp--preset--spacing--90) * 0.6); padding-bottom: calc(var(--wp--preset--spacing--90) * 0.6); }
	.os-glance-card { padding: 24px 24px 28px; }
	.os-glance-card > .os-glance-card__title { font-size: var(--wp--preset--font-size--large); }
	.os-glance-card > .os-glance-card__title + * { margin-top: 16px; }
	.os-glance-card > .os-glance-card__text { font-size: var(--wp--preset--font-size--medium); }
}

/* ---------- Mid-page CTA (os/case-study-cta) ---------- */
/* The OS Post CTA panel (os-post.css: ink-deep, glow, headline, divider, green button) across the
   wide width, in a white section with the standard spacing. Its headline may be wider here than
   in a post's 842px column. */
.os-case-detail-cta {
	padding-top: 48px;
	padding-bottom: 48px;
	background: var(--wp--preset--color--white);
}
.os-case-detail-cta > .os-post-cta { margin-block: 0; }
.os-case-detail-cta .os-post-cta .os-post-cta__title { max-width: 760px; }

@media (max-width: 768px) {
	.os-case-detail-cta { padding-top: calc(var(--wp--preset--spacing--90) * 0.6); padding-bottom: calc(var(--wp--preset--spacing--90) * 0.6); }
}

/* ---------- Approach (os/case-study-approach) ---------- */
/* Faint teal and violet glows on ice, a centred head, then the stages as a numbered timeline at
   the content width (1100): a 56px TechnIQk number disc beside each card (CSS counter, hidden from
   screen readers; the H3 carries the name), a line joining the discs. Card: white, Card Blue edge,
   16px corners, soft shadow; title (Inter 600 22px, as the focus cards) on the left (340px), the
   points on the right. Stacked inside the card below 1101px, smaller discs on phones. */
.os-case-detail-approach {
	padding-top: 48px;
	padding-bottom: 48px;
	background:
		radial-gradient(ellipse 520px 420px at 100% 0%, rgb(20 199 180 / 0.07), rgb(20 199 180 / 0) 100%),
		radial-gradient(ellipse 520px 420px at 0% 100%, rgb(108 92 231 / 0.06), rgb(108 92 231 / 0) 100%),
		var(--wp--preset--color--ice);
}
.os-case-detail-approach > * { margin-block: 0; }
.os-case-detail-approach > .os-case-detail-steps {
	counter-reset: os-step;
	display: grid;
	gap: 24px;
	margin-top: 32px;
}
.os-case-detail-steps > * { margin: 0; }
.os-case-step {
	--os-step-disc: 56px;
	--os-step-room: 80px;
	--os-step-pad: 32px;
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 340px) minmax(0, 1fr);
	align-items: start;
	gap: 16px 48px;
	margin-left: var(--os-step-room) !important;
	padding: var(--os-step-pad) 40px;
	border: 1px solid var(--wp--custom--color--card-blue);
	border-radius: var(--wp--preset--border-radius--lg);
	background: var(--wp--preset--color--white);
	box-shadow: var(--wp--preset--shadow--soft);
	counter-increment: os-step;
}
.os-case-step > * { margin: 0; }
.os-case-step::before {
	content: counter(os-step, decimal-leading-zero);
	content: counter(os-step, decimal-leading-zero) / "";
	position: absolute;
	top: calc(var(--os-step-pad) - 4px);
	left: calc(var(--os-step-room) * -1);
	display: grid;
	place-items: center;
	width: var(--os-step-disc);
	height: var(--os-step-disc);
	border-radius: 50%;
	background: var(--wp--preset--gradient--techniqk);
	box-shadow: var(--wp--preset--shadow--brand);
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--large);
	font-weight: 700;
	color: var(--wp--preset--color--white);
}
/* The line from this disc down to the next one (through the gap between the cards). */
.os-case-step:not(:last-child)::after {
	content: "";
	position: absolute;
	top: calc(var(--os-step-pad) - 4px + var(--os-step-disc));
	bottom: calc((24px + var(--os-step-pad) - 4px) * -1);
	left: calc(var(--os-step-room) * -1 + var(--os-step-disc) / 2 - 1px);
	width: 2px;
	background: var(--wp--custom--color--card-blue);
}
.os-case-step > .os-case-step__title {
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--x-large);
	font-weight: 600;
	line-height: 1.35;
	letter-spacing: -0.3px;
	color: var(--wp--preset--color--ink-deep);
}

@media (max-width: 1100px) {
	.os-case-step { grid-template-columns: minmax(0, 1fr); padding-inline: 32px; }
}
@media (max-width: 768px) {
	.os-case-detail-approach { padding-top: calc(var(--wp--preset--spacing--90) * 0.6); padding-bottom: calc(var(--wp--preset--spacing--90) * 0.6); }
	.os-case-detail-approach > .os-case-detail-steps { gap: 16px; margin-top: 24px; }
	.os-case-step { --os-step-disc: 40px; --os-step-room: 52px; --os-step-pad: 24px; padding-inline: 24px; }
	.os-case-step::before { font-size: var(--wp--preset--font-size--small); }
	.os-case-step:not(:last-child)::after { bottom: calc((16px + var(--os-step-pad) - 4px) * -1); }
	.os-case-step > .os-case-step__title { font-size: var(--wp--preset--font-size--large); }
}

/* ---------- Strategy (os/case-study-strategy) ---------- */
/* On the Aurora background (user, 2026-10-10): the centred head, then the points below it across
   the wide width as plain rows, no cards or numbers, a hairline (border) under each row except the
   last (user, 2026-10-10): title on the left (5/12, Inter 600
   x-large 24), description on the right (7/12, 16px medium, as the focus cards), 32px above and below
   each row; title over description below 1101px. 48px rhythm. */
.os-case-detail-strategy {
	padding-top: 48px;
	padding-bottom: 48px;
}
.os-case-detail-strategy > * { margin-block: 0; }
.os-case-detail-strategy > .os-case-detail-steps { margin-top: 16px; }
.os-case-detail-steps--plain > * { margin: 0; }
.os-case-detail-steps--plain > .os-case-step {
	grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
	gap: 12px 48px;
	margin-left: 0 !important;
	padding: 32px 0;
	border: 0;
	border-radius: 0;
	background: none;
	box-shadow: none;
	counter-increment: none;
}
.os-case-detail-steps--plain > .os-case-step { border-bottom: 1px solid var(--wp--preset--color--border); }
.os-case-detail-steps--plain > .os-case-step:last-child { padding-bottom: 0; border-bottom: 0; }
.os-case-detail-steps--plain > .os-case-step::before,
.os-case-detail-steps--plain > .os-case-step::after { content: none; }
.os-case-step > .os-case-step__text {
	font-size: var(--wp--preset--font-size--medium);
	font-weight: 500;
	line-height: 1.6;
	color: var(--wp--preset--color--ink-soft);
}

@media (max-width: 1100px) {
	.os-case-detail-steps--plain > .os-case-step { grid-template-columns: minmax(0, 1fr); padding: 24px 0; }
}
@media (max-width: 768px) {
	.os-case-detail-strategy { padding-top: calc(var(--wp--preset--spacing--90) * 0.6); padding-bottom: calc(var(--wp--preset--spacing--90) * 0.6); }
	.os-case-detail-strategy > .os-case-detail-steps { margin-top: 8px; }
	.os-case-detail-steps--plain > .os-case-step { gap: 8px; padding: 20px 0; }
	.os-case-step > .os-case-step__text { font-size: var(--wp--preset--font-size--medium); }
}

/* ---------- Approach, image option (os/case-study-approach-media) ---------- */
/* The client's current case study pages (image left, content right; user, 2026-10-10): the same
   section and head, then at the wide width the image on the left (5/12 column, 16px corners) and
   the stages on the right: the timeline's cards without the numbers or the line, title over the
   points. The image shows as uploaded (user, 2026-10-10): its own size and aspect ratio, never
   stretched or cropped, only scaled down when the column is narrower (WordPress adds its
   width/height, so no layout shift). It stays in view under the header while the stages scroll,
   unless the section's "Fix the image while scrolling" switch is off (class is-image-unfixed).
   Below 1101px the image goes on top, centred, and the cards follow.
   On the OS Blue Band (user, 2026-10-10: the blue gradient section): white head, the lead in
   on-brand; the band clips with overflow: clip so the image can still stick. */
.os-case-detail-approach--media.is-style-os-blue-band { overflow: clip; }
.os-case-detail-approach--media.is-style-os-blue-band .os-case-detail__lead { color: var(--wp--custom--color--on-brand); }
.os-case-detail-approach--media > .os-case-detail-approach__body {
	display: grid;
	grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
	align-items: start;
	gap: 48px;
	margin-top: 32px;
}
.os-case-detail-approach__body > * { margin: 0; }
.os-case-detail-approach__body > .os-case-detail-approach__media {
	position: sticky;
	top: calc(var(--os-header-offset, 0px) + 24px);
	width: fit-content;
	max-width: 100%;
	overflow: hidden;
	border-radius: var(--wp--preset--border-radius--lg);
	box-shadow: var(--wp--preset--shadow--soft);
}
.os-case-detail-approach--media.is-image-unfixed .os-case-detail-approach__media { position: static; }
/* No CSS width: the img's own width attribute (the upload's width) sets its size. width: auto
   would hand it to sizes="auto", which makes it as wide as the column. */
.os-case-detail-approach__media img {
	display: block;
	max-width: 100%;
	height: auto;
}
.os-case-detail-stages {
	display: grid;
	gap: 20px;
}
.os-case-detail-stages > * { margin: 0; }
.os-case-stage {
	padding: 28px 32px;
	border: 1px solid var(--wp--custom--color--card-blue);
	border-radius: var(--wp--preset--border-radius--lg);
	background: var(--wp--preset--color--white);
	box-shadow: var(--wp--preset--shadow--soft);
}
.os-case-stage > * { margin: 0; }
.os-case-stage > .os-case-stage__title {
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--x-large);
	font-weight: 600;
	line-height: 1.35;
	letter-spacing: -0.3px;
	color: var(--wp--preset--color--ink-deep);
}
.os-case-stage > .os-case-stage__title + * { margin-top: 16px; }

@media (max-width: 1100px) {
	.os-case-detail-approach--media > .os-case-detail-approach__body { grid-template-columns: minmax(0, 1fr); gap: 32px; }
	.os-case-detail-approach__body > .os-case-detail-approach__media { position: static; justify-self: center; }
}
@media (max-width: 768px) {
	.os-case-detail-approach--media > .os-case-detail-approach__body { gap: 24px; margin-top: 24px; }
	.os-case-detail-stages { gap: 16px; }
	.os-case-stage { padding: 24px; }
	.os-case-stage > .os-case-stage__title { font-size: var(--wp--preset--font-size--large); }
	.os-case-stage > .os-case-stage__title + * { margin-top: 12px; }
}

/* ---------- Results (os/case-study-results) ---------- */
/* The service results strip with longer figures ("100,000+", "Real-time") and sentence results:
   up to 4 across like --3up (2 below 1101px, 1 below 541px; counts in os-service-detail.css) so a
   48px figure fits, the result at 16px. */
.os-case-detail-results.os-service-detail-results > .os-service-detail-results__row { grid-template-columns: repeat(var(--os-results-cols-3up), minmax(0, 1fr)); }
.os-case-detail-results .os-service-result { padding: 24px 32px; }
.os-case-detail-results .os-service-result > .os-service-result__label { font-size: var(--wp--preset--font-size--medium); }

@media (max-width: 1100px) {
	.os-case-detail-results.os-service-detail-results > .os-service-detail-results__row { grid-template-columns: repeat(var(--os-results-cols-3up-md), minmax(0, 1fr)); }
}
@media (max-width: 768px) {
	.os-case-detail-results .os-service-result { padding: 16px 20px; }
	.os-case-detail-results .os-service-result > .os-service-result__label { font-size: var(--wp--preset--font-size--medium); }
}
@media (max-width: 540px) {
	.os-case-detail-results.os-service-detail-results > .os-service-detail-results__row { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- Solution benefits (os/case-study-benefits) ---------- */
/* The overview layout (H2 + lead on the left in 443px, the list on the right in 652px, pushed
   apart; stacked at 880px), white. The list: 18px items between hairlines, sparkle bullets. */
.os-case-detail-benefits {
	padding-top: 48px;
	padding-bottom: 48px;
	background: var(--wp--preset--color--white);
}
.os-case-detail-benefits > * { margin-block: 0; }
.os-case-detail-benefits__body {
	display: grid;
	grid-template-columns: minmax(0, 443px) minmax(0, 652px);
	justify-content: space-between;
	align-items: start;
	gap: 40px;
}
.os-case-detail-benefits__body > *,
.os-case-detail-benefits__head > * { margin: 0; }
.os-case-detail-benefits__head > h2 { font-weight: 600; color: var(--wp--preset--color--ink); }
.os-case-detail-bullets--lined > li {
	padding-block: 20px;
	padding-left: 40px;
	border-bottom: 1px solid var(--wp--preset--color--line);
	font-size: var(--wp--preset--font-size--large);
	line-height: 1.5;
	color: var(--wp--preset--color--ink);
}
.os-case-detail-bullets--lined > li:first-child { padding-top: 0; }
.os-case-detail-bullets--lined > li:first-child::before { top: 3px; }
.os-case-detail-bullets--lined > li + li { margin-top: 0; }
.os-case-detail-bullets--lined > li:last-child { padding-bottom: 0; border-bottom: 0; } /* user, 2026-10-10 */
.os-case-detail-bullets--lined > li::before { top: 23px; width: 22px; height: 22px; }

@media (max-width: 880px) {
	.os-case-detail-benefits__body { grid-template-columns: minmax(0, 1fr); gap: 24px; }
}
@media (max-width: 768px) {
	.os-case-detail-benefits { padding-top: calc(var(--wp--preset--spacing--90) * 0.6); padding-bottom: calc(var(--wp--preset--spacing--90) * 0.6); }
	.os-case-detail-bullets--lined > li { padding-block: 16px; padding-left: 34px; font-size: var(--wp--preset--font-size--medium); }
	.os-case-detail-bullets--lined > li::before { top: 18px; width: 20px; height: 20px; }
	.os-case-detail-bullets--lined > li:first-child::before { top: 2px; }
}

/* ---------- Testimonial (os/case-study-testimonial) ---------- */
/* Kept simple (user, 2026-10-10, after a blue panel and a bento of tiles: "remove the card,
   reclaim the width, keep the quote mark"): a core Quote across the wide width, no card, on the
   Aurora gradient preset like QK's Strategy (user, 2026-10-10). Two columns: a large serif quotation mark on the left (140px
   column) filled with the site's dark blue gradient (165deg brand → navy-deep, as the At a
   Glance cards; static — user, 2026-10-10; decorative, hidden from screen readers), and on the right the words on the type scale (user, 2026-10-10: Inter 500, xx-large 28 / x-large 24 ≤1100 / large 18 ≤768, line-height 1.4 as the Figma headings)
   ink-deep, then the citation under them in brand 600 (no dash or rule, user). The brief's copy only.
   Below 769px one column, the mark on top. 48px rhythm. Several quotes can sit in an OS Slider
   group with os-case-detail-quotes (CSR testimonials): the same layout for each slide. */
.os-case-detail-testimonial {
	padding-top: 48px;
	padding-bottom: 48px;
}
.os-case-detail-testimonial > * { margin-block: 0; }
.os-case-detail-testimonial > .os-case-detail-quote,
.os-case-detail-quotes > .os-case-detail-quote {
	display: grid;
	grid-template-columns: 140px minmax(0, 1fr);
	column-gap: 48px;
	margin-block: 0;
	padding: 0;
	border: 0;
	background: none;
	text-align: left;
}
.os-case-detail-quote::before {
	content: "\201C";
	content: "\201C" / "";
	grid-column: 1;
	grid-row: 1 / span 9;
	justify-self: start;
	width: max-content;
	height: 136px;
	padding-top: 6px;
	overflow: hidden;
	background: linear-gradient(165deg, var(--wp--preset--color--brand) 0, var(--wp--preset--color--navy-deep) 100%);
	-webkit-background-clip: text;
	background-clip: text;
	font-family: Georgia, "Times New Roman", serif;
	font-size: 240px;
	font-weight: 700;
	line-height: 0.82;
	color: transparent;
}
.os-case-detail-quote > * { grid-column: 2; margin: 0; }
.os-case-detail-quote > p {
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--xx-large);
	font-style: normal;
	font-weight: 500;
	line-height: 1.4;
	color: var(--wp--preset--color--ink-deep);
}
.os-case-detail-quote > p + p { margin-top: 1em; }
.os-case-detail-quote mark {
	background-image: linear-gradient(transparent 64%, color-mix(in srgb, var(--wp--preset--color--teal) 35%, transparent) 64%, color-mix(in srgb, var(--wp--preset--color--teal) 35%, transparent) 92%, transparent 92%);
	color: inherit !important;
	-webkit-box-decoration-break: clone;
	box-decoration-break: clone;
}
.os-case-detail-quote > cite {
	display: block;
	margin-top: 32px;
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--large);
	font-style: normal;
	font-weight: 600;
	line-height: 1.5;
	color: var(--wp--preset--color--brand);
}
/* Optional speaker photo (an Image block with os-case-detail-quote__avatar, just before the cite;
   Partners L1, user 2026-10-10): round, 56px, the citation beside it, centred on it. Case studies
   have none. */
.os-case-detail-quote > .os-case-detail-quote__avatar { width: 56px; height: 56px; margin-top: 32px; }
.os-case-detail-quote__avatar img { display: block; width: 56px; height: 56px; border-radius: 50%; object-fit: cover; }
.os-case-detail-quote > .os-case-detail-quote__avatar + cite {
	display: flex;
	align-items: center;
	min-height: 56px;
	margin-top: -56px;
	padding-left: 72px;
}

@media (max-width: 1100px) {
	:is(.os-case-detail-testimonial, .os-case-detail-quotes) > .os-case-detail-quote { grid-template-columns: 96px minmax(0, 1fr); column-gap: 32px; }
	.os-case-detail-quote::before { height: 96px; font-size: 170px; }
	.os-case-detail-quote > p { font-size: var(--wp--preset--font-size--x-large); }
}
@media (max-width: 768px) {
	.os-case-detail-testimonial { padding-top: calc(var(--wp--preset--spacing--90) * 0.6); padding-bottom: calc(var(--wp--preset--spacing--90) * 0.6); }
	:is(.os-case-detail-testimonial, .os-case-detail-quotes) > .os-case-detail-quote { grid-template-columns: minmax(0, 1fr); }
	.os-case-detail-quote::before { grid-row: auto; height: 72px; margin-bottom: 8px; font-size: 128px; }
	.os-case-detail-quote > * { grid-column: 1; }
	.os-case-detail-quote > p { font-size: var(--wp--preset--font-size--large); line-height: 1.5; }
	.os-case-detail-quote > cite { margin-top: 24px; font-size: var(--wp--preset--font-size--medium); }
	.os-case-detail-quote > .os-case-detail-quote__avatar { margin-top: 24px; }
	.os-case-detail-quote > .os-case-detail-quote__avatar + cite { margin-top: -56px; }
}

/* ---------- Reusable variants (promoted from os-careers.css, 2026-10-15) ---------- */

/* Centred short-quote variant: for a multi-quote slider whose quotes are short sentences rather
   than long paragraphs (first used by the Careers employee-voices carousel, os/careers-voices).
   The base layout above stretches the text column to fill the whole alignwide row, which is
   correct when the quote is long enough to reach it (CSR, About Leadership) but leaves obvious
   dead space on the right when it isn't — the quote mark, text and citation end up bunched on the
   left half of a much wider box, which reads as off-centre even once the box itself is centred.
   Opt in with `.os-case-detail-quote--tight` on the quote: the text column shrinks to whatever
   width its own content needs to wrap (CSS Grid's `fit-content()` *track-sizing function*, not the
   `fit-content` keyword), capped at 620px desktop / 480px tablet, and the now content-sized card is
   centred instead of a fixed-width box with empty space in it.
   `!important` on the margins: every slide of an OS Slider (`.is-style-os-slider > *`,
   os-slider.css) is forced to `margin: 0 !important` for the crossfade stacking, which otherwise
   overrides `margin-inline: auto` regardless of this rule's own specificity or source order.
   Scoped to above 768px only, with an explicit `min-width` pairing each breakpoint: below 768px the
   base layout already switches to one column with every child forced into `grid-column: 1`, so a
   bare `max-width` override here would still match that width, declare a second (text) column that
   never gets used, and squeeze everything into the narrow quote-mark column alone — wrapping short
   words across several lines. There's no dead space to close in the single-column layout anyway. */
.os-case-detail-quote--tight { margin-left: auto !important; margin-right: auto !important; }
@media (min-width: 1101px) {
	.os-case-detail-quote--tight { width: fit-content; max-width: 100%; grid-template-columns: 140px fit-content(620px); }
}
@media (max-width: 1100px) and (min-width: 769px) {
	.os-case-detail-quote--tight { width: fit-content; max-width: 100%; grid-template-columns: 96px fit-content(480px); }
}

/* Two-line citation variant: a role/title on one line and a secondary detail (tenure, company,
   location, etc.) on a smaller second line, instead of a single name — for speakers identified by
   role rather than by name (first used by the Careers employee-voices carousel, whose brief gives
   job titles, not names). Opt in with `.os-case-detail-quote__cite--split` on the `<cite>` itself,
   each line in its own `.os-case-detail-quote__cite--primary` / `--secondary` child.
   The base avatar+cite rule above sets `align-items: center` to vertically centre one text line
   next to the 56px avatar; naively switching to `flex-direction: column` for a second line would
   leave `align-items: center` acting on the column's *cross* axis instead (now horizontal),
   centring the two-line block inside the cite's full width rather than against its left edge —
   `align-items: flex-start` keeps it anchored next to the avatar, and `justify-content: center`
   takes over the job the base rule's `align-items: center` did, vertically centring the two-line
   block against the avatar's height. */
.os-case-detail-quote > .os-case-detail-quote__avatar + cite.os-case-detail-quote__cite--split {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: center;
	gap: 2px;
}
.os-case-detail-quote__cite--primary { font-weight: 600; }
.os-case-detail-quote__cite--secondary {
	font-size: var(--wp--preset--font-size--small);
	font-weight: 400;
	color: var(--wp--preset--color--ink-soft);
}