/* =========================================================================
   Case studies — single study and index.
   Scoped to .cs — mobile-first, min-width media queries only.
   2px buttons, 4px imagery (sharper-corner direction, Aug 2026).

   Mirrors the structure of .hp / .sn / .sc / .ct: navy hero, readable body
   measure, image grid, navy CTA panel, card row.
   ========================================================================= */

.cs {
	--cs-navy: #181d46;
	--cs-lightblue: #90cdeb;
	--cs-band-grey: #f5f5f5;
	--cs-band-blue: #f1f5f5;
	--cs-text: #1a1a1a;
	--cs-muted: #59607a;
	--cs-line: #e2e6ee;
	--cs-gutter: 20px;

	font-family: 'FFDINStd', Arial, sans-serif;
	color: var(--cs-text);
	line-height: 1.5;
}

@media (min-width: 900px) {
	.cs { --cs-gutter: 40px; }
}

.cs *,
.cs *::before,
.cs *::after { box-sizing: border-box; }

.cs-container {
	width: 100%;
	max-width: 1440px;
	margin: 0 auto;
	padding: 0 var(--cs-gutter);
}

/* The reading column, same measure as the article template. */
.cs-container--narrow { max-width: 780px; }

/* The theme fades every link on hover and sets them all to 600. Neither suits
   card-sized links or body copy. */
.cs a:hover { opacity: 1; }
.cs .cs-body a { font-weight: inherit; }

.cs a:focus-visible {
	outline: 3px solid var(--cs-navy);
	outline-offset: 2px;
}

/* ---- Shared ------------------------------------------------------------- */

/* The `.cs` prefix carries the weight needed to beat desktop.css's
   `.single-case_studies h2 { margin-bottom: 2rem }`, which is (0,1,1) and
   otherwise pushes these headings 32px down on the single study only — the
   same component rendering differently on two pages. */
.cs .cs-section-heading {
	margin: 0;
	color: var(--cs-navy);
	font-size: 26px;
	font-weight: 600;
	line-height: 1.2;
}

@media (min-width: 900px) {
	.cs .cs-section-heading { font-size: 32px; }
}

/* ---- Buttons ------------------------------------------------------------ */

.cs .cs-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 48px;
	padding: 12px 28px;
	font-family: inherit;
	font-size: 16px;
	font-weight: 400;
	line-height: 1.2;
	text-align: center;
	text-decoration: none;
	border: 0;
	border-radius: 2px;
	cursor: pointer;
	transition: background-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}

.cs .cs-btn:hover { opacity: 1; }

.cs .cs-btn--light { background: var(--cs-lightblue); color: var(--cs-navy); }
.cs .cs-btn--light:hover { background: #fff; }

.cs .cs-btn--ghost {
	background: transparent;
	color: #fff;
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.7);
}

.cs .cs-btn--ghost:hover { background: #fff; color: var(--cs-navy); box-shadow: inset 0 0 0 1px #fff; }

.cs .cs-btn--navy { background: var(--cs-navy); color: #fff; }
.cs .cs-btn--navy:hover { background: #fff; color: var(--cs-navy); box-shadow: inset 0 0 0 1px var(--cs-navy); }

.cs .cs-btn--small { min-height: 44px; padding: 10px 20px; font-size: 14px; white-space: nowrap; }

/* The ring follows the ground the button sits on. A blanket white ring also
   caught .cs-btn--navy on the pale related band, where white on #f1f5f5 is
   1.10:1 — invisible, and a WCAG 2.4.11 failure. */
.cs .cs-btn:focus-visible { outline: 3px solid var(--cs-navy); outline-offset: 3px; }
.cs-hero .cs-btn:focus-visible,
.cs-cta .cs-btn:focus-visible { outline-color: #fff; }

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

/* The client's name is the headline. The old template put "Case studies"
   there instead, so every study led with the same words and the company was
   demoted to a subheading further down. */
.cs-hero {
	background: var(--cs-navy);
	color: #fff;
}

.cs-hero__inner {
	padding-top: 48px;
	padding-bottom: 48px;
}

.cs-hero__eyebrow {
	margin: 0 0 14px;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--cs-lightblue);
}

/* The title is an h1, so typography.css sets it in DM Serif Display at 400.
   No font-weight here: the serif has no bold cut, and the 600 this rule
   carried from the DIN era made browsers synthesise one. */
.cs-hero__title {
	margin: 0;
	font-size: 34px;
	line-height: 1.1;
	color: #fff;
	text-wrap: balance;
}

.cs-hero__intro {
	margin-top: 18px;
	font-size: 18px;
	line-height: 1.5;
	color: rgba(255, 255, 255, 0.85);
	max-width: 62ch;
}

.cs-hero__intro p { margin: 0 0 0.7em; }
.cs-hero__intro p:last-child { margin-bottom: 0; }

/* The intro field is a WYSIWYG; some studies put a heading in it. */
.cs-hero__intro :is(h1, h2, h3, h4, h5, h6) {
	margin: 0 0 0.5em;
	font-size: inherit;
	font-weight: 600;
	color: #fff;
}

@media (min-width: 900px) {
	.cs-hero__inner { padding-top: 72px; padding-bottom: 72px; }
	.cs-hero__title { font-size: 46px; }
	.cs-hero__intro { font-size: 19px; }
}

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

/* The picture shares the band with the name instead of running underneath it
   as a full-width strip. That strip was cropped to 21/9 while the photographs
   themselves are nearly square, so it threw away most of every shot and still
   left the right-hand half of the hero as empty navy. Side by side the crop is
   close to native and the band carries the image rather than introducing it. */
.cs-hero__media {
	margin: 30px 0 0;
	min-width: 0;
}

.cs-hero__img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 9;
	object-fit: cover;
	border-radius: 4px;
}

@media (min-width: 900px) {
	/* Only when there is a photograph — a study without one keeps the single
	   column rather than leaving half the band empty. */
	.cs-hero__inner--split {
		display: grid;
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		column-gap: 48px;
		align-items: center;
	}

	.cs-hero__media { margin: 0; }
	.cs-hero__img { aspect-ratio: 4 / 3; }
}

@media (min-width: 1200px) {
	.cs-hero__inner--split { column-gap: 64px; }
}

/* ---- Body --------------------------------------------------------------- */

.cs-body {
	padding: 48px 0 8px;
	font-size: 18px;
	line-height: 1.65;
}

.cs-body > .cs-container--narrow > :first-child { margin-top: 0; }

.cs-body p { margin: 0 0 1.35em; }

/* The opening paragraph carries the reader in. */
.cs-body > .cs-container--narrow > p:first-of-type {
	font-size: 21px;
	line-height: 1.5;
	color: var(--cs-navy);
}

.cs-body h2 {
	margin: 2em 0 0.6em;
	font-size: 26px;
	font-weight: 600;
	line-height: 1.2;
	color: var(--cs-navy);
	text-wrap: balance;
}

.cs-body h3 {
	margin: 1.8em 0 0.5em;
	font-size: 21px;
	font-weight: 600;
	line-height: 1.25;
	color: var(--cs-navy);
}

/* framework.css flattens every heading to inherit, so h1/h4/h5/h6 typed into
   the copy would otherwise be indistinguishable from a paragraph. */
.cs-body h1 { margin: 1.8em 0 0.5em; font-size: 28px; font-weight: 600; line-height: 1.2; color: var(--cs-navy); }
/* 20px, not 18px: at the 19px body size these rendered smaller than the text
   they head, and sixteen of the studies open with an h4. */
.cs-body :is(h4, h5, h6) { margin: 1.6em 0 0.4em; font-size: 20px; font-weight: 600; color: var(--cs-navy); }

/* A few studies contain empty headings, which would otherwise add only space. */
.cs-body :is(h1, h2, h3, h4, h5, h6):empty { display: none; }

.cs-body :is(h1, h2, h3, h4):first-child { margin-top: 0; }

.cs-body :is(ul, ol) { margin: 0 0 1.35em; padding-left: 1.3em; }
.cs-body li { margin-bottom: 0.5em; }
.cs-body li::marker { color: var(--cs-navy); }

.cs .cs-body a {
	color: var(--cs-navy);
	text-decoration: underline;
	text-decoration-color: var(--cs-lightblue);
	text-decoration-thickness: 2px;
	text-underline-offset: 3px;
}

.cs .cs-body a:hover { text-decoration-color: var(--cs-navy); }

.cs-body strong { font-weight: 600; }

.cs-body img { max-width: 100%; height: auto; border-radius: 4px; }

.cs-body blockquote {
	margin: 2em 0;
	padding: 4px 0 4px 24px;
	border-left: 3px solid var(--cs-lightblue);
	font-size: 20px;
	line-height: 1.5;
	color: var(--cs-navy);
}

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

/* The printed case study, embedded through DearPDF. 26 of the 28 studies end
   with one. The plugin sizes its own viewer and brings its own control bar, so
   this only has to keep it inside the measure and stop it reading as a hole in
   the page: a quiet band behind it, matching the 4px corners used on the rest
   of the imagery. Rules stay off the plugin internals so an update cannot
   break the layout. */
.cs-body .df-element {
	margin: 2.5em 0;
	max-width: 100%;
	background: var(--cs-band-grey);
	border-radius: 4px;
	padding: 20px 0;
	overflow-x: auto;
}

.cs-body .df-container { max-width: 100%; }

@media (min-width: 768px) {
	.cs-body { font-size: 19px; padding-top: 56px; }
	.cs-body > .cs-container--narrow > p:first-of-type { font-size: 23px; }
	.cs-body h2 { font-size: 30px; }
	.cs-body h3 { font-size: 23px; }
}

/* ---- Gallery ------------------------------------------------------------ */

/* A grid, not a slider. The old FlexSlider showed one image at a time behind
   a thumbnail carousel, which buried most of the evidence the page exists to
   present. */
.cs-gallery { padding: 48px 0; }

.cs-gallery .cs-section-heading { margin-bottom: 24px; }

.cs-gallery__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 20px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.cs-gallery__item { margin: 0; }

.cs-gallery__item img {
	display: block;
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	border-radius: 4px;
}

/* Video rows keep their own ratio and run the full width of the grid. */
.cs-gallery__item--video { grid-column: 1 / -1; }

.cs-video {
	position: relative;
	aspect-ratio: 16 / 9;
	border-radius: 4px;
	overflow: hidden;
	background: var(--cs-navy);
}

.cs-video iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

@media (min-width: 640px) {
	.cs-gallery__grid { grid-template-columns: 1fr 1fr; }

	/* One image on its own should not be half a row with a gap beside it. */
	.cs-gallery__grid--single { grid-template-columns: 1fr; }
}

@media (min-width: 900px) {
	.cs-gallery { padding: 72px 0; }
	.cs-gallery__grid { grid-template-columns: repeat(3, 1fr); gap: 24px; }
	.cs-gallery__grid--single { grid-template-columns: 1fr; }
	.cs-gallery__grid--single .cs-gallery__item img { aspect-ratio: 21 / 9; }
}

/* ---- Index -------------------------------------------------------------- */

.cs-index {
	padding: 48px 0;
	background: var(--cs-band-grey);
}

.cs-index__count {
	margin: 0 0 24px;
	font-size: 15px;
	font-weight: 600;
	color: var(--cs-muted);
}

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

/* ---- Cards -------------------------------------------------------------- */

.cs-cards {
	display: grid;
	grid-template-columns: 1fr;
	gap: 32px 24px;
}

.cs .cs-card__link { display: block; text-decoration: none; color: inherit; }

.cs-card__media {
	aspect-ratio: 4 / 3;
	overflow: hidden;
	border-radius: 4px;
	background: var(--cs-band-blue);
}

.cs-card__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 0.3s ease;
}

.cs-card__link:hover .cs-card__media img { transform: scale(1.03); }

.cs-card__title {
	margin: 16px 0 0;
	font-size: 19px;
	font-weight: 600;
	line-height: 1.25;
	color: var(--cs-navy);
}

/* The whole card is a link and the theme sets `a { font-weight: 600 }`
   globally, so the summary inherits semi-bold without this. */
.cs-card__text {
	font-weight: 400;
	margin: 8px 0 0;
	font-size: 16px;
	line-height: 1.45;
	color: var(--cs-muted);
}

@media (min-width: 640px) {
	.cs-cards { grid-template-columns: 1fr 1fr; }
}

@media (min-width: 900px) {
	.cs-cards { grid-template-columns: repeat(3, 1fr); gap: 40px 32px; }
}

/* ---- Related ------------------------------------------------------------ */

.cs-related {
	padding: 48px 0;
	background: var(--cs-band-blue);
}

.cs-related__head {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 16px;
	margin-bottom: 28px;
}

@media (min-width: 640px) {
	.cs-related__head {
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
	}
}

@media (min-width: 900px) {
	.cs-related { padding: 72px 0; }
	.cs-related__head { margin-bottom: 40px; }
}

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

.cs-cta { padding: 48px 0; }

.cs-cta__panel {
	display: flex;
	flex-direction: column;
	gap: 24px;
	padding: 32px 24px;
	background: var(--cs-navy);
	border-radius: 4px;
	color: #fff;
}

.cs .cs-cta__heading {
	margin: 0 0 8px;
	font-size: 24px;
	font-weight: 600;
	line-height: 1.2;
	color: #fff;
}

.cs-cta__text {
	margin: 0;
	font-size: 16px;
	line-height: 1.5;
	color: rgba(255, 255, 255, 0.85);
	max-width: 52ch;
}

.cs-cta__actions { display: flex; flex-wrap: wrap; gap: 12px; }

@media (min-width: 768px) {
	.cs-cta__panel {
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		padding: 40px;
	}
	.cs-cta__actions { flex: 0 0 auto; }
}

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