/* Longitude Prize on ALS case study page (/what-we-do/ai-and-data-science/case-study).
   Scoped under .cs-page. Round 4 pulled every desktop token from
   docs/case-study-figma-spec.md (Figma desktop frame, 1687 viewport);
   round 6 added the mobile frame (402 viewport) section of that same doc,
   closing out the mobile-specific gaps rounds 4–5 had to guess at (H1 size,
   hero background position, section label→content gap). Two breakpoints
   only, matching the two frames Figma gives: mobile (base, the 402 frame)
   and desktop (≥1024, the 1687 frame) — no separate tablet numbers exist in
   either frame, so grid/container switches are unified at 1024. */

.cs-page {
	--cs-navy: #002395;
	--cs-blue: #00aeef;
	--cs-link: #0092c9;
	--cs-text: #212529;
	--cs-muted: #4d545c;
	--cs-rule: #e6e2df;
	--cs-bg-alt: #f7f5f5;
	--cs-hero-eyebrow: #9fd9f5;
	--cs-hero-body: #dfe7ff;
	--cs-max: 1152px;
	--cs-label-col: 224px;
	--cs-gap: 48px;
	--cs-measure: 672px;
	/* Mobile side gutter — confirmed against the Figma mobile frame (402
	   wide, round 6): 24px gutter × 2 = 354px content column. */
	--cs-gutter: 24px;

	color: var(--cs-text);
	font-size: 16px;
	line-height: 1.5;
}

@media (min-width: 1024px) {
	.cs-page {
		--cs-gutter: 0px;
	}
}

.cs-page a:not(.cs-button) {
	color: var(--cs-link);
}

/* theme47b9.css bolds bare th/h2/h3/dt (and the browser UA stylesheet bolds
   th by default); every text style in the design is weight 400 — guard all
   of these under .cs-page explicitly rather than relying on this page's own
   more-specific rules always winning. */
.cs-page th,
.cs-page caption,
.cs-page h2,
.cs-page h3,
.cs-page dt,
.cs-page .cs-links__label {
	font-weight: 400;
}

/* :where() keeps these page-wide resets at zero specificity — a plain
   `.cs-page ul`/`.cs-page p` descendant selector is (0,1,1), which beats
   every single-class component override below it (e.g. `.cs-footnotes`,
   `.cs-links__label`, all (0,1,0)) regardless of source order, silently
   zeroing their margin/padding. */
:where(.cs-page ul, .cs-page ol) {
	margin: 0;
	padding: 0;
	list-style: none;
}

:where(.cs-page blockquote) {
	margin: 0;
}

:where(.cs-page p) {
	margin: 0 0 22.5px;
	font-size: 18px;
	line-height: 28.8px;
	text-wrap: pretty;
}

.cs-page p:last-child {
	margin-bottom: 0;
}

.cs-page__container {
	box-sizing: border-box;
	max-width: var(--cs-max);
	margin: 0 auto;
	padding-left: var(--cs-gutter);
	padding-right: var(--cs-gutter);
}

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

.cs-hero {
	position: relative;
	background-color: var(--cs-navy);
	color: #fff;
	text-align: left;
	padding: 72px 0 64px;
}

@media (min-width: 1024px) {
	.cs-hero {
		padding: 96px 0 88px;
	}
}

/* Real photo (case-study-als-hero.png) as a full-bleed overlay behind the
   text, at 0.9 opacity over the navy — a pseudo-element rather than the
   section's own background so opacity affects only the image, not the
   navy fill or the text/content stacked above it. */
.cs-hero::before {
	content: '';
	position: absolute;
	inset: 0;
	z-index: 0;
	background-image: url('/wp-content/uploads/2026/09/case-study-als-hero.png');
	background-repeat: no-repeat;
	background-size: cover;
	/* Mobile frame (round 6): shows roughly the source's x 45%→67% slice. */
	background-position: 62% center;
	opacity: 0.9;
}

@media (min-width: 1024px) {
	.cs-hero::before {
		background-position: right center;
	}
}

.cs-hero,
.cs-hero * {
	text-align: left;
}

.cs-hero__inner {
	position: relative;
	z-index: 1;
	box-sizing: border-box;
	max-width: var(--cs-max);
	margin: 0 auto;
	padding-left: var(--cs-gutter);
	padding-right: var(--cs-gutter);
}

.cs-hero__eyebrow {
	font-size: 16px;
	line-height: 25.6px;
	font-weight: 400;
	color: var(--cs-hero-eyebrow);
	margin: 0;
}

.cs-hero__title {
	color: #fff;
	font-weight: 400;
	margin: 24px 0 0;
	max-width: 20ch;
	text-wrap: balance;
	/* Mobile frame (402), round 6 — exact, no longer a fluid fallback. */
	font-size: 34px;
	line-height: 39.1px;
	letter-spacing: -0.01em;
}

@media (min-width: 1024px) {
	.cs-hero__title {
		font-size: 58px;
		line-height: 66.7px;
		letter-spacing: -0.01em;
		max-width: 832px;
	}
}

.cs-hero__standfirst {
	font-size: 20px;
	line-height: 30px;
	font-weight: 400;
	color: var(--cs-hero-body);
	max-width: 640px;
	margin: 24px 0 0;
}

/* ---------- Section (label + content grid) ---------- */

.cs-section {
	background: #fff;
	padding: 64px 0;
}

.cs-section--alt {
	background: var(--cs-bg-alt);
}

.cs-section--inverse {
	background: var(--cs-navy);
	color: #fff;
}

.cs-section--inverse a {
	color: #fff;
}

/* theme47b9.css has a bare `p { color: #212529 }` rule that a directly
   inherited `.cs-section--inverse { color: #fff }` can never beat (a direct
   match on the element always wins over an inherited value) — override
   explicitly rather than relying on inheritance. */
.cs-section--inverse .cs-section__content p {
	color: var(--cs-hero-body);
}

@media (min-width: 1024px) {
	.cs-section {
		padding: 88px 0;
	}
}

.cs-section__inner {
	box-sizing: border-box;
	max-width: var(--cs-max);
	margin: 0 auto;
	padding-left: var(--cs-gutter);
	padding-right: var(--cs-gutter);
}

.cs-section__label {
	border-top: 3px solid var(--cs-blue);
	padding-top: 12px;
	/* Mobile frame (402), round 6: label→content gap is 24px, not the
	   desktop grid's 14.4px pre-round-6 guess. */
	margin-bottom: 24px;
}

.cs-section--inverse .cs-section__label {
	border-top-color: var(--cs-blue);
}

.cs-section__label h2 {
	font-size: 24px;
	line-height: 27.6px;
	letter-spacing: -0.01em;
	font-weight: 400;
	color: var(--cs-navy);
	margin: 0;
	text-wrap: balance;
}

.cs-section--inverse .cs-section__label h2 {
	color: #fff;
}

/* --cs-measure (672px) is a paragraph text-measure, not a content-column
   width — apply it only to <p>, so the table/timeline/stats/chips wrappers
   stretch to the full 880px content column (the grid's 1fr track) instead
   of being squeezed to paragraph width. */
@media (min-width: 1024px) {
	.cs-section__inner {
		display: grid;
		grid-template-columns: var(--cs-label-col) 1fr;
		gap: 0 var(--cs-gap);
	}

	.cs-section__label {
		width: var(--cs-label-col);
		padding-top: 12px;
		margin-bottom: 0;
	}

	.cs-section__content > p {
		max-width: var(--cs-measure);
	}
}

/* ---------- Quotes ---------- */

.cs-quotes {
	background: #fff;
	border-top: 1px solid var(--cs-rule);
	border-bottom: 1px solid var(--cs-rule);
	box-sizing: border-box;
	max-width: var(--cs-max);
	margin: 0 auto;
	padding: 0 var(--cs-gutter);
}

@media (min-width: 1024px) {
	.cs-quotes {
		display: grid;
		grid-template-columns: 1fr 1fr;
	}
}

.cs-quote {
	position: relative;
	margin: 0;
	padding: 32px 0;
}

.cs-quote:not(:first-child) {
	border-top: 1px solid var(--cs-rule);
}

@media (min-width: 1024px) {
	.cs-quote {
		padding: 56px 48px 48px 0;
	}

	.cs-quote:first-child {
		padding-left: 0;
	}

	.cs-quote:last-child {
		padding-right: 0;
		padding-left: 48px;
	}

	.cs-quote:not(:first-child) {
		border-top: 0;
		border-left: 1px solid var(--cs-rule);
	}

	/* Column 2's own content-left (its padding-left) — not the border
	   width added on top. Desktop-only: on mobile there is no second
	   column, quotes stack, and both glyphs sit at left:0. */
	.cs-quote:not(:first-child) blockquote::before {
		left: 48px;
	}
}

.cs-quote blockquote {
	/* Not position:relative — the glyph's ::before must be absolutely
	   positioned against .cs-quote itself (the containing block), not
	   against blockquote; making blockquote its own containing block here
	   double-offsets the glyph (it would then sit inside blockquote's own
	   already-inset padding box), which is what pushed column 2's glyph
	   ~80px right of the text edge and let column 1's glyph collide with
	   the text (padding-top only clears the glyph relative to the right
	   containing block). */
	margin: 0;
	padding-top: 44px;
}

.cs-quote blockquote::before {
	content: '\201C';
	position: absolute;
	top: 20px;
	left: 0;
	height: 80px;
	font-size: 80px;
	line-height: 80px;
	font-weight: 400;
	color: var(--cs-blue);
}

.cs-quote blockquote p {
	color: var(--cs-navy);
	font-size: 20px;
	line-height: 30px;
	margin: 0;
}

.cs-quote blockquote p + p {
	margin-top: 25px;
}

@media (min-width: 1024px) {
	.cs-quote blockquote p {
		width: 528px;
	}
}

.cs-quote figcaption {
	margin-top: 25px;
	font-size: 15.2px;
	line-height: 24.32px;
}

.cs-quote figcaption strong {
	display: block;
	font-weight: 400;
	color: var(--cs-text);
}

.cs-quote figcaption span {
	display: block;
	color: var(--cs-muted);
}

/* ---------- Footnotes ---------- */

.cs-fn-ref {
	font-size: 0.7em;
	line-height: 0;
}

.cs-fn-ref a {
	color: inherit;
	text-decoration: none;
}

.cs-footnotes {
	/* The paragraph before this already carries a 22.5px bottom margin
	   (:where(.cs-page p) above) — 17.5px more gives a ~40px visual gap. */
	margin: 17.5px 0 0;
	padding: 16px 0 0;
	border-top: 1px solid var(--cs-rule);
	list-style: none;
	counter-reset: cs-footnote;
}

.cs-footnotes li {
	font-size: 13.6px;
	line-height: 20.4px;
	color: var(--cs-muted);
}

.cs-footnotes li::before {
	counter-increment: cs-footnote;
	content: counter(cs-footnote) '. ';
}

/* ---------- About + Further reading (no label column — full-width band,
   same container box as every other __inner wrapper, but block layout, not
   the label/content grid) ---------- */

.cs-about-band__inner {
	box-sizing: border-box;
	max-width: var(--cs-max);
	margin: 0 auto;
	padding-left: var(--cs-gutter);
	padding-right: var(--cs-gutter);
}

.cs-about {
	display: grid;
	gap: 32px;
}

@media (min-width: 1024px) {
	.cs-about {
		grid-template-columns: 552px 552px;
		gap: 0 var(--cs-gap);
	}
}

.cs-about h3 {
	font-size: 21.6px;
	line-height: 24.84px;
	letter-spacing: -0.01em;
	font-weight: 400;
	color: var(--cs-navy);
	margin: 0;
	text-wrap: balance;
}

.cs-about p {
	font-size: 16.8px;
	line-height: 26.88px;
	color: var(--cs-muted);
	margin: 0;
	padding: 12.96px 0 21px;
}

/* About + Further reading band moved to the navy/inverse treatment
   (client feedback) — the about-band section carries .cs-section--inverse
   directly (no .cs-section__content wrapper), so it needs its own
   overrides rather than reusing the ones scoped under that class. */
.cs-section--inverse .cs-about h3 {
	color: #fff;
}

.cs-section--inverse .cs-about p {
	color: var(--cs-hero-body);
}

.cs-section--inverse .cs-links__label {
	color: #fff;
}

/* Client-specified link color for this band (#9fd9f5) — overrides the
   general .cs-section--inverse a { color: #fff } rule above, which is
   still correct for any other inverse section without its own spec. */
.cs-section--inverse .cs-about a,
.cs-section--inverse .cs-links a {
	color: var(--cs-hero-eyebrow);
}

/* ---------- Further reading ---------- */

.cs-links {
	padding-top: 48px;
}

.cs-links__label {
	font-size: 16.8px;
	line-height: 19.32px;
	letter-spacing: -0.01em;
	color: var(--cs-navy);
	margin: 0 0 10.08px;
	text-wrap: balance;
}

.cs-links ul {
	padding-left: 17.6px;
}

.cs-links li {
	font-size: 15.2px;
	line-height: 24.32px;
	margin-bottom: 6.4px;
}

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

.cs-cta {
	background: #fff;
	padding: 64px 0;
}

@media (min-width: 1024px) {
	.cs-cta {
		padding: 72px 0;
	}
}

.cs-cta__inner {
	box-sizing: border-box;
	max-width: var(--cs-max);
	margin: 0 auto;
	padding-left: var(--cs-gutter);
	padding-right: var(--cs-gutter);
}

.cs-cta h2 {
	font-size: 28px;
	line-height: 32.2px;
	letter-spacing: -0.01em;
	font-weight: 400;
	color: var(--cs-navy);
	max-width: none;
	margin: 0;
	text-wrap: balance;
}

@media (min-width: 1024px) {
	.cs-cta h2 {
		max-width: 834px;
	}
}

.cs-cta__buttons {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin-top: 23px;
}

.cs-button {
	display: inline-block;
	border-radius: 4px;
	padding: 12.8px 25.6px;
	font-size: 16px;
	line-height: 25.6px;
	font-weight: 400;
	text-decoration: none;
	white-space: nowrap;
}

.cs-button--primary {
	background: var(--cs-blue);
	color: #fff;
	border: 1px solid var(--cs-blue);
}

.cs-button--primary:hover {
	background: #0090c8;
}

.cs-button--secondary {
	background: transparent;
	color: var(--cs-navy);
	border: 2px solid var(--cs-navy);
}

.cs-button--secondary:hover {
	background: var(--cs-navy);
	color: #fff;
}

@media (prefers-reduced-motion: reduce) {
	.cs-button {
		transition: none;
	}
}