/**
 * A case study write-up — /case-studies/<slug>/.
 *
 * Enqueued only on single-zouma_case.php. The listing page keeps
 * case-studies.css; this file is the detail page alone.
 */

/* Every band here is sized by its own content. The theme gives each direct
 * child of <main> a 100svh floor and a centring grid, which on a page of eight
 * stacked bands would leave a screenful of air inside each one. Both
 * properties are needed: min-height undoes the floor, display undoes the grid
 * that came with it. */
.zouma-csd > section,
.zouma-csd > nav {
	min-height: 0;
	display: block;
}

/* 01 · Hero --------------------------------------------------------------- */

section.zouma-csd-hero {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
	min-height: 100svh;
}

.zouma-csd-hero {
	position: relative;
	/* Pulled up under the sticky header and padded back down, the same pair
	 * the other heroes use — without it the header floats over white page
	 * above the photograph. */
	margin-top: calc(-1 * var(--zouma-header-h));
	padding-top: var(--zouma-header-h);
	background: var(--zouma-dark);
	color: #fff;
	overflow: hidden;
	isolation: isolate;
}

.zouma-csd-hero__photo {
	position: absolute;
	inset: 0;
	z-index: -1;
	display: block;
}

.zouma-csd-hero__photo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 50% 94%;
}

/* The scrim. White type over a photograph needs a floor under it, and the
 * heading sits low in the frame, so the gradient is weighted to the bottom
 * rather than laid on flat — the top of the picture keeps its detail. */
.zouma-csd-hero__photo::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(
		to bottom,
		rgba(0, 0, 0, 0) 38%,
		rgba(0, 0, 0, 0.13) 48%,
		rgba(0, 0, 0, 0.27) 58%,
		rgba(0, 0, 0, 0.45) 68%,
		rgba(0, 0, 0, 0.59) 80%,
		rgba(0, 0, 0, 0.7) 90%,
		rgba(0, 0, 0, 0.8) 100%
	);
}

.zouma-csd-hero__inner {
	position: relative;
	display: flex;
	flex: 1;
	flex-direction: column;
	justify-content: flex-end;
	min-width: 0;
	padding-block: clamp(1.5rem, calc(2.4 * var(--zouma-vw)), 2.25rem);
}

/* Title and mark share the floor of the picture, the mark on the right edge of
 * the shell as the reference has it. Bottom-aligned rather than centred: the
 * mark lines up with the last line of the headline, not with the middle of a
 * block whose height depends on how many lines the copy runs to. */
.zouma-csd-hero__row {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: clamp(1.5rem, calc(2.4 * var(--zouma-vw)), 2.5rem);
}

.zouma-csd-hero__chip {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: none;
	margin-bottom: 4px;
	padding: 13px;
	border: 1px solid rgba(255, 255, 255, 0.35);
	border-radius: 5px;
}

/* The mark as a mask, so a white wordmark can be painted in the client colour.
 * The height is fixed and the width comes from the file's own ratio, because a
 * masked element has nothing of its own to be laid out from. The default is
 * white so every client mark reads on the dark hero; a study can still paint
 * its mark a specific colour through the chip-ink field. */
.zouma-csd-hero__mark {
	display: block;
	height: 20px;
	width: calc(20px * var(--zouma-chip-ratio, 4));
	background-color: var(--zouma-csd-chip-ink, #ffffff);
	-webkit-mask-image: var(--zouma-chip-src);
	mask-image: var(--zouma-chip-src);
	-webkit-mask-size: contain;
	mask-size: contain;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center;
}

/* Every mark shown white, the same way the listing card does it.
 *
 * This is the branch for studies with no "light logo" flag, so the artwork
 * arrives in its own colours — neilsen's wordmark is #121212, which was
 * invisible against the dark hero photo. brightness(0) flattens a mark to a
 * black silhouette whatever its colours are and invert(1) lifts that to white,
 * so one filter covers the mixed set (dark, two-tone, white-on-transparent).
 *
 * Safe here because the only opaque rectangle in neilsen.svg lives inside its
 * <clipPath>, not the drawing: an opaque background baked into the artwork
 * would come through as a solid white block instead. The flagged studies take
 * the masked .zouma-csd-hero__mark branch above and never reach this rule. */
.zouma-csd-hero__mark-img {
	display: block;
	width: auto;
	height: 20px;
	object-fit: contain;
	filter: brightness(0) invert(1);
}

/* Neilsen is shown as its own lockup rather than knocked out white.
 *
 * Its wordmark is #121212 on transparency, so filter: none lets that ink
 * arrive as drawn and background is what supplies the white plate behind it.
 * Matched on the logo file, so the hero photograph — also a neilsen-*
 * filename — is never caught by it, and no other mark changes.
 *
 * On the img, not on .zouma-csd-hero__chip, which every study's mark shares.
 *
 * content-box against the global border-box, so the height above stays the
 * height of the wordmark. Under border-box the 20px would be spent on the
 * plate and the mark would come out at 12 — half the weight it needs beside a
 * 40px headline. The chip absorbs the 4px instead and goes 128x48 to 136x56;
 * it is bottom-aligned in the row, so it grows upward and the headline it
 * shares a baseline with does not move. */
.zouma-csd-hero__mark-img[src*="neilsen.svg"] {
	box-sizing: content-box;
	padding: 4px;
	border-radius: 3px;
	background: #fff;
	filter: none;
}

/* LG is shown as its own lockup too, on both studies that carry it.
 *
 * Two-tone artwork: a white disc with the face in #121212 over it — the
 * circular ring, the eye and the L/G stroke — and a white wordmark beside it.
 * brightness(0) flattens both tones and invert(1) lifts both to white, which
 * paints the face onto the disc in the disc's own colour and leaves the ring
 * as anti-aliasing. filter: none is what keeps the face readable.
 *
 * Matched on the logo file, so neither hero photograph — both lg-* filenames —
 * is caught by it.
 *
 * No plate and no content-box, unlike Neilsen: the disc is its own ground and
 * the wordmark is already white, so the chip stays 73x48 and the mark stays
 * 20px. Nothing but the filter moves. */
.zouma-csd-hero__mark-img[src*="lg.svg"] {
	filter: none;
}

.zouma-csd-hero__title {
	/* Sized so the first line ends on "with a", as the reference has it: wide
	 * enough to hold that phrase at 40px and too narrow to pull "56-Person" up
	 * after it. em, not ch, so the measure keeps its character count as the
	 * clamped font size changes. */
	max-width: 22em;
	/* style.css balances every h1-h6, which evens the two lines out and moves
	 * the break a word earlier than the reference puts it. initial fills the
	 * first line to the measure instead, which is where the break belongs. */
	text-wrap: initial;
	margin: 14px 0 0;
	color: #fff;
	font-family: var(--zouma-font-heading);
	font-size: clamp(1.625rem, 1.05rem + calc(2.55 * var(--zouma-vw)), 3rem);
	font-weight: 700;
	line-height: 1.22;
	letter-spacing: -0.01em;
}

/* The client and industry strip across the foot of the photograph. */
.zouma-csd-hero__bar {
	position: relative;
	background: rgba(255, 255, 255, 0.08);
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
	border-top: 1px solid rgba(255, 255, 255, 0.14);
}

.zouma-csd-hero__bar ul {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px clamp(1rem, calc(2.4 * var(--zouma-vw)), 2rem);
	min-height: 46px;
	margin-block: 0;
	padding-block: 10px;
	list-style: none;
}

.zouma-csd-hero__bar li {
	display: flex;
	align-items: center;
	gap: 9px;
	color: rgba(255, 255, 255, 0.92);
	font-family: var(--zouma-font-body);
	font-size: 0.875rem;
}

.zouma-csd-hero__dot {
	width: 6px;
	height: 6px;
	flex: none;
	border-radius: 50%;
	background: var(--zouma-cyan);
}

/* 02 · Jump links --------------------------------------------------------- */

.zouma-csd-jump {
	/* Pins below the site header (position: sticky; top: 0; z-index: 200) so the
	 * section links stay in reach the whole way down a long write-up. The offset
	 * is the header token.
	 *
	 * Above the header, not below it: the header's frost (.zouma-header::before)
	 * bleeds 2.25rem past the bar and would wash over the top of this bar if the
	 * nav sat beneath the 200 layer. 201 lifts the opaque strip clear of that
	 * overhang so it reads clean. The cost is that the header's mega-menu, which
	 * lives inside that same 200 context, is painted over by this bar where the
	 * two overlap — release-at-outcome and the bar's short height keep that band
	 * small. The opaque fill and bottom border stop the page showing through. */
	position: sticky;
	top: var(--zouma-header-h, 76px);
	z-index: 201;
	background: #fff;
	border-bottom: 1px solid var(--zouma-color-border);
}

/* Two moments send the bar back below the header's 200 layer, both driven by
 * case-study.js:
 *
 *   is-released — past the outcome the bar is riding up out of view, and its
 *   path runs through the header's band; below the layer, the header hides it as
 *   it leaves rather than the tabs sliding over the logo the way the 201 pin
 *   would.
 *
 *   is-menu-open — a header dropdown is open. It hangs down from inside the
 *   header across the bar, so the bar steps under the header and lets the whole
 *   panel, title strip and all, paint over it. */
.zouma-csd-jump.is-released,
.zouma-csd-jump.is-menu-open {
	z-index: 100;
}

.zouma-csd-jump ul {
	display: flex;
	flex-wrap: wrap;
	/* Tight, because each chip already carries its own side padding — what the
	 * reference holds constant is the gap between one arrow and the next
	 * label, not the gap between the boxes. */
	gap: 6px;
	margin: 0;
	padding-block: 14px;
	padding-inline: 0;
	list-style: none;
	/* On the base rule, not the compact one: the strip has to give height back as
	 * smoothly as it takes it, so the same transition has to cover both ways of
	 * the toggle. */
	transition: padding-block var(--zouma-transition);
}

/* Stuck against the header, the strip pulls in its vertical padding so it costs
 * the reader less of the screen than it did sitting in the flow. */
.zouma-csd-jump.is-stuck ul {
	padding-block: 6px;
}

.zouma-csd-jump a {
	display: inline-flex;
	align-items: center;
	/* Every measurement here is a multiple of the cap height, taken off the
	 * reference: the arrow is 1.33x tall and 1.17x wide, stands 1.83x clear of
	 * the label, and the pill is 5.7x deep. They scale with the type size, or
	 * the strip stops being the one in the screenshot. */
	gap: 15px;
	padding: 17px 18px;
	background: transparent;
	border-radius: 6px;
	color: var(--zouma-color-text);
	font-family: var(--zouma-font-body);
	font-size: 0.9375rem;
	font-weight: 600;
	text-decoration: none;
	transition: background-color var(--zouma-transition), color var(--zouma-transition), padding var(--zouma-transition);
}

/* The chip loses the same vertical room the list does when the bar sticks; the
 * side padding is left alone so the labels keep their horizontal rhythm. */
.zouma-csd-jump.is-stuck a {
	padding-block: 8px;
}

/* The strip still shrinks when the reader has asked for less motion — it just
 * arrives at the compact size instead of gliding there. */
@media (prefers-reduced-motion: reduce) {
	.zouma-csd-jump ul,
	.zouma-csd-jump a {
		transition: none;
	}
}

/* Hover wears the same pale fill the first chip already has, rather than
 * inverting to a solid blue: the filled state reads as "this is where you
 * are", and the pointer being over a link is not that. Colour is left alone
 * for the same reason — only the ground changes. */
.zouma-csd-jump a:hover,
.zouma-csd-jump a:focus-visible {
	background: var(--zouma-blue-pale);
}

/* The arrow points down, because the link travels down the page. */
.zouma-csd-jump .zouma-icon {
	flex: none;
}

/* Cleared so an anchored jump does not park the heading under the header — and,
 * now the jump-nav is sticky, under the nav as well. The added room is the
 * compact (stuck) height of the strip, since that is what a click lands into,
 * plus the same breathing space as before. */
.zouma-csd-band {
	scroll-margin-top: calc(var(--zouma-header-h) + 64px);
}

/* 03 · Figures ------------------------------------------------------------ */

.zouma-csd-stats {
	background: #fff;
	border-bottom: 1px solid var(--zouma-color-border);
}

.zouma-csd-stats ul {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
	gap: clamp(1.5rem, calc(3 * var(--zouma-vw)), 3rem);
	margin-block: 0;
	padding-block: clamp(2rem, calc(3.4 * var(--zouma-vw)), 3rem);
	list-style: none;
}

.zouma-csd-stats li {
	display: flex;
	flex-direction: column;
	gap: 6px;
	/* A grid item keeps min-width: auto, so a long figure would push the row
	 * wider than the shell and .zouma-site would clip it without a word. */
	min-width: 0;
}

.zouma-csd-stats__value {
	color: var(--zouma-cyan);
	font-family: var(--zouma-font-heading);
	font-size: clamp(1.75rem, 1.1rem + calc(2.15 * var(--zouma-vw)), 3rem);
	font-weight: 700;
	line-height: 1.1;
	/* Figures in a row read as a set when their digits share a width. */
	font-variant-numeric: tabular-nums;
}

.zouma-csd-stats__label {
	color: var(--zouma-color-muted);
	font-family: var(--zouma-font-body);
	font-size: 1.1875rem;
}

/* 04 · Approach, and the closing band that shares its shape ---------------- */

.zouma-csd-intro {
	padding-block: clamp(3rem, calc(5.5 * var(--zouma-vw)), 5rem);
	background: #fff;
}

.zouma-csd-intro__inner {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 608px);
	gap: clamp(1.75rem, calc(3.6 * var(--zouma-vw)), 3.5rem);
	align-items: start;
}

.zouma-csd-intro__copy {
	min-width: 0;
}

.zouma-csd-intro__title {
	max-width: 22ch;
	margin: 0 0 1rem;
	color: var(--zouma-color-text);
	font-family: var(--zouma-font-heading);
	font-size: clamp(1.25rem, 0.95rem + calc(1.2 * var(--zouma-vw)), 2rem);
	font-weight: 700;
	line-height: 1.3;
}

.zouma-csd-intro__text {
	max-width: 62ch;
	color: var(--zouma-color-muted);
	font-family: var(--zouma-font-body);
	font-size: 1.1875rem;
	line-height: 1.8;
}

.zouma-csd-intro__text p {
	margin: 0 0 0.85rem;
}

.zouma-csd-intro__text p:last-child {
	margin-bottom: 0;
}

/* The download card -------------------------------------------------------- */

.zouma-csd-dl {
	min-width: 0;
	padding: clamp(1.25rem, calc(2 * var(--zouma-vw)), 1.75rem);
	background: #fff;
	border: 1px solid var(--zouma-color-border);
	border-radius: 8px;
}

.zouma-csd-dl__title {
	margin: 0;
	color: var(--zouma-color-text);
	font-family: var(--zouma-font-heading);
	font-size: 1.25rem;
	font-weight: 700;
	line-height: 1.3;
}

.zouma-csd-dl__text {
	margin: 6px 0 0;
	color: var(--zouma-color-muted);
	font-family: var(--zouma-font-body);
	font-size: 0.75rem;
	line-height: 1.6;
}

.zouma-csd-dl__form {
	margin-top: 1rem;
}

/* Off-screen rather than display:none: a bot reading the DOM sees a field it
 * is meant to fill, and a screen reader is told to skip it by aria-hidden on
 * the wrapper. */
.zouma-csd-dl__hp {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

.zouma-csd-dl__grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0.75rem 1rem;
}

/* The full-width fields are named by the template, not counted here. Counted,
 * the shape of the card depended on how many fields came before: adding one in
 * the middle would have made Company full width and left Job Title at half,
 * with nothing in the markup to say why. */
.zouma-csd-dl__field--wide {
	grid-column: 1 / -1;
}

.zouma-csd-dl__field {
	display: flex;
	flex-direction: column;
	gap: 5px;
	min-width: 0;
	margin: 0;
}

.zouma-csd-dl__field label {
	color: var(--zouma-color-text);
	font-family: var(--zouma-font-body);
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

/* Restated rather than inherited: style.css paints every bare input, and
 * anything not set here would show through. */
.zouma-csd-dl__field input {
	width: 100%;
	min-width: 0;
	margin: 0;
	padding: 9px 12px;
	background: #fff;
	border: 1px solid var(--zouma-color-border);
	border-radius: 4px;
	color: var(--zouma-color-text);
	font-family: var(--zouma-font-body);
	font-size: 0.75rem;
	line-height: 1.4;
	transition: border-color var(--zouma-transition), box-shadow var(--zouma-transition);
}

.zouma-csd-dl__field input::placeholder {
	color: var(--zouma-color-faint, #97a3ac);
}

.zouma-csd-dl__field input:focus {
	outline: none;
	border-color: var(--zouma-blue);
	box-shadow: 0 0 0 3px rgba(14, 133, 182, 0.14);
}

/* button.<class>, not the bare class: style.css paints every button with a
 * filled background, a border, a radius and a 600 weight, and a plain class
 * rule loses to its own button:hover. */
button.zouma-csd-dl__submit {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	width: 100%;
	margin-top: 1rem;
	padding: 12px 18px;
	appearance: none;
	background-color: var(--zouma-color-text);
	background-image: none;
	border: 0;
	border-radius: 4px;
	color: #fff;
	font-family: var(--zouma-font-body);
	font-size: 0.8125rem;
	font-weight: 600;
	line-height: 1.2;
	cursor: pointer;
	transition: background-color var(--zouma-transition);
}

button.zouma-csd-dl__submit:hover,
button.zouma-csd-dl__submit:focus-visible {
	background-color: var(--zouma-blue);
	color: #fff;
}

.zouma-csd-dl__submit .zouma-icon {
	flex: none;
}

/* One of the two labels at a time, swapped by the class the script sets. Not
 * written into the button by that script: the words come from the template and
 * are translated there, and a card rendered in Arabic has to say this in
 * Arabic. */
.zouma-csd-dl__submit-busy {
	display: none;
}

.zouma-csd-dl__form.is-pending .zouma-csd-dl__submit-label {
	display: none;
}

.zouma-csd-dl__form.is-pending .zouma-csd-dl__submit-busy {
	display: inline;
}

/* While the post is in flight. The button alone stops taking the pointer — put
 * on the form it would freeze the fields too, and a visitor who mis-typed an
 * address would be left unable to select it while the page navigates away.
 * Specific enough to beat button.zouma-csd-dl__submit:hover, which would
 * otherwise repaint this the moment the pointer moved. */
.zouma-csd-dl__form.is-pending button.zouma-csd-dl__submit {
	opacity: 0.62;
	cursor: progress;
	pointer-events: none;
}

.zouma-csd-dl__note {
	margin: 0.75rem 0 0;
	font-family: var(--zouma-font-body);
	font-size: 0.75rem;
	line-height: 1.5;
}

.zouma-csd-dl__note.is-ok {
	color: var(--zouma-blue);
}

.zouma-csd-dl__note.is-bad {
	color: #b3261e;
}

/* 05 / 07 · The Challenge and the Solution -------------------------------- */

.zouma-csd-band {
	padding-block: clamp(3rem, calc(5.5 * var(--zouma-vw)), 5rem);
	background: #fff;
}

.zouma-csd-band--tint {
	background: var(--zouma-blue-pale);
}

.zouma-csd-band__inner {
	display: grid;
	grid-template-columns: minmax(0, 720px) minmax(0, 1fr);
	gap: clamp(1.75rem, calc(3.6 * var(--zouma-vw)), 4rem);
	align-items: start;
}

.zouma-csd-band__copy {
	min-width: 0;
}

.zouma-csd-band__title {
	margin: 0 0 0.85rem;
	color: var(--zouma-color-text);
	font-family: var(--zouma-font-heading);
	/* Flat, not clamped: the clamp only reached 32px at 1280 and above, so the
	 * heading read smaller on every narrower window. These three headings are
	 * short enough that 32px still fits a 358px column. */
	font-size: 2rem;
	font-weight: 700;
	line-height: 1.3;
}

.zouma-csd-band__text {
	max-width: none;
	margin: 0;
	color: var(--zouma-color-muted);
	font-family: var(--zouma-font-body);
	font-size: 1.1875rem;
	line-height: 1.85;
}

.zouma-csd-points {
	display: flex;
	flex-direction: column;
	margin: 0;
	padding: 0;
	list-style: none;
	min-width: 0;
}

.zouma-csd-point {
	display: flex;
	align-items: flex-start;
	gap: clamp(0.75rem, calc(1.4 * var(--zouma-vw)), 1.125rem);
	padding-block: clamp(0.875rem, calc(1.4 * var(--zouma-vw)), 1.125rem);
}

/* Every row carries the rule, the first included: in the design the column
 * opens with a line, which is what squares its top edge with the heading
 * beside it. */
.zouma-csd-point {
	border-top: 1px solid var(--zouma-color-border);
}

.zouma-csd-band--tint .zouma-csd-point {
	border-top-color: rgba(43, 174, 228, 0.28);
}

.zouma-csd-point__icon {
	display: grid;
	place-items: center;
	flex: none;
	width: 32px;
	height: 32px;
	color: var(--zouma-cyan);
}

/* The box and the artwork are sized together, so both move when the size does.
 * The <img> path still carries width and height attributes of its own for the
 * no-CSS case, and the drawn path emits 24 — CSS owns the box either way, and
 * without these a bound image would render at its own attribute size inside
 * this one. */
.zouma-csd-point__icon img,
.zouma-csd-point__icon svg {
	width: 32px;
	height: 32px;
	object-fit: contain;
}

.zouma-csd-point__body {
	display: flex;
	flex-direction: column;
	gap: 4px;
	min-width: 0;
}

.zouma-csd-point__title {
	color: var(--zouma-color-text);
	font-family: var(--zouma-font-heading);
	font-size: 1.25rem;
	font-weight: 700;
	line-height: 1.35;
}

.zouma-csd-point__text {
	color: var(--zouma-color-muted);
	font-family: var(--zouma-font-body);
	font-size: 1rem;
	line-height: 1.6;
}

/* 06 · Quote -------------------------------------------------------------- */

.zouma-csd-quote {
	position: relative;
	padding-block: clamp(3rem, calc(5.5 * var(--zouma-vw)), 4.5rem);
	background: var(--zouma-teal-deep);
	color: #fff;
	overflow: hidden;
	isolation: isolate;
}

.zouma-csd-quote__dots {
	position: absolute;
	inset: 0;
	z-index: -1;
	background-image: url("../images/quote-logo-art.png");
	background-repeat: no-repeat;
	background-position: left center;
	background-size: 210px auto;
}

.zouma-csd-quote__inner {
	display: grid;
	/* 608px is the photograph's specified width, so the track is capped there
	 * rather than at a fraction: the client asked for a fixed 608 × 340 frame
	 * and a fr share would only land on it at one viewport.
	 *
	 * The cap is the max of a minmax whose min is 0, not a flat 608px, for the
	 * usual reason — a fixed track would refuse to shrink and push the shell
	 * past the viewport, where .zouma-site clips with no scrollbar to show it.
	 * The band collapses to one column at 1024px and the two-column mode's
	 * narrowest content box is ~926px, so in practice the track is always at
	 * its 608 ceiling; the floor is there for the case nobody predicted. */
	grid-template-columns: minmax(0, 1fr) minmax(0, 608px);
	gap: clamp(1.75rem, calc(3.6 * var(--zouma-vw)), 3.5rem);
	align-items: center;
}

.zouma-csd-quote__copy {
	min-width: 0;
	margin: 0;
}

.zouma-csd-quote__copy blockquote {
	max-width: 44ch;
	margin: 0;
	padding: 0;
	border: 0;
	color: #fff;
	font-style: normal;
	font-family: var(--zouma-font-heading);
	font-size: 18px;
	font-weight: 600;
	line-height: 1.55;
}

/* Quotation marks drawn by CSS rather than typed into the field, so the copy
 * in the admin is the sentence alone and every quote on the site is punctuated
 * the same way. */
.zouma-csd-quote__copy blockquote::before {
	content: open-quote;
}

.zouma-csd-quote__copy blockquote::after {
	content: close-quote;
}

.zouma-csd-quote__copy figcaption {
	margin-top: 1rem;
	color: rgba(255, 255, 255, 0.74);
	font-family: var(--zouma-font-body);
	font-size: 19px;
}

.zouma-csd-quote__logo {
	display: inline-flex;
	margin-top: 1.25rem;
	padding: 8px 14px;
	border: 1px solid rgba(173, 219, 243, 0.4);
	border-radius: 4px;
}

.zouma-csd-quote__logo img {
	display: block;
	width: auto;
	height: 26px;
	object-fit: contain;
	/* The band sits on --zouma-teal-deep and the chip was drawing the file as it
	 * comes, so a mark whose Media Library copy carries brand ink arrived in that
	 * ink — Furdeco green, Neilsen near-black — rather than reading as a client
	 * logo on navy. Flatten to a silhouette, then invert it white: that holds for
	 * any palette, so re-uploading a logo cannot quietly undo it. */
	filter: brightness(0) invert(1);
}


.zouma-csd-quote__media {
	display: block;
	min-width: 0;
	/* The grid track already stops at 608 on desktop, but below 1024px the band
	 * is a single column and the media would otherwise run the full width of
	 * the shell — 962px at the breakpoint itself. This repeats the ceiling so
	 * the frame is 608 wide in both layouts, the same number .zouma-csd-dl uses
	 * a few rules down for the same reason. */
	width: 100%;
	max-width: 608px;
	overflow: hidden;
	border-radius: 8px;
}

.zouma-csd-quote__media img {
	display: block;
	/* 608 × 340, client-specified, expressed as a ratio against a full-width
	 * box rather than as a flat height. Wherever the box gets its full 608 the
	 * ratio resolves to exactly 340; where it cannot — 358px of content inside
	 * a 390px phone — the frame scales with it, to 200. A flat height: 340px
	 * would have held its depth at every width and squeezed the crop instead.
	 *
	 * cover stays: the ratio is the frame's, not the photograph's, so the
	 * source is still cropped to fit it. */
	width: 100%;
	height: auto;
	aspect-ratio: 608 / 340;
	object-fit: cover;
}

/* 08 · The Outcome -------------------------------------------------------- */

.zouma-csd-outcome__note {
	max-width: 52ch;
	margin: 1.25rem 0 0;
	color: var(--zouma-color-muted);
	font-family: var(--zouma-font-body);
	font-size: 12px;
	font-style: italic;
	line-height: 1.7;
}

/* Narrow ------------------------------------------------------------------ */

@media (max-width: 1024px) {
	/* Below this width the band is taller than the photograph is wide, so the
	 * crop turns horizontal and a centred anchor cuts the depot sign — the one
	 * thing in the frame that names the client — off the left edge. 20% puts
	 * it back in shot at both tablet and phone widths. The vertical stays as
	 * measured; on desktop the crop is vertical and this axis does nothing. */
	.zouma-csd-hero__photo img {
		object-position: 20% 94%;
	}


	/* The download card drops under the copy rather than squeezing it: below
	 * this width the two columns would put the form at about 300px, which is
	 * narrower than its own two-up field rows want. */
	.zouma-csd-intro__inner,
	.zouma-csd-band__inner,
	.zouma-csd-quote__inner {
		grid-template-columns: minmax(0, 1fr);
	}

	.zouma-csd-dl {
		max-width: 608px;
	}

	.zouma-csd-band__text,
	.zouma-csd-intro__text {
		max-width: none;
	}
}

/* The Challenge and Solution copy are far shorter than the points beside
 * them — 301px against 638px on Furdeco, 161 against 562 in Solution — so
 * they reach the top of their band and then sit still while a long empty
 * column scrolls past.
 * Sticking them holds each heading and lede in view for its whole band.
 * Outcome is not included: that band has no __copy column of its own.
 *
 * The offset clears the jump bar, not just the header. .zouma-csd-jump pins at
 * var(--zouma-header-h) and is 55px tall, so anything pinned above 131px hides
 * behind it — at the header offset alone the first 42px of the heading went
 * under the bar. 55 + 24 of air is the 79 here. The bar pins at that same
 * 76px with or without the admin bar, so this one offset covers both.
 *
 * 1025 and up only: at 1024 the grid above collapses to one column, and a
 * sticky block there would ride down over the points instead of beside them. */
@media (min-width: 1025px) {
	#challenge .zouma-csd-band__copy,
	#solution .zouma-csd-band__copy {
		position: sticky;
		top: calc(var(--zouma-header-h) + 79px);
	}
}

/* Below about 900px the headline cannot hold two lines at this size, so the
 * reference break is unreachable and filling the first line only strands a
 * single word at the bottom. Hand it back to the theme's balancing, which is
 * what that rule is for. */
@media (max-width: 900px) {
	.zouma-csd-hero__title {
		text-wrap: balance;
	}
}

@media (max-width: 700px) {
	/* Side by side the mark takes a third of the line and the headline breaks
	 * badly; below the copy it keeps the shell's left edge with everything
	 * else in the band. */
	.zouma-csd-hero__row {
		flex-direction: column;
		align-items: flex-start;
		gap: 1.25rem;
	}

	.zouma-csd-hero__chip {
		margin-bottom: 0;
	}

	/* Neilsen's plate is paid for out of the chip's padding at this width.
	 *
	 * content-box lets the 4px plate grow the chip from 48 to 56, which costs
	 * nothing while the chip sits beside the headline and grows upward. Once
	 * it is stacked the hero's floor is fixed — the chip's bottom edge lands
	 * at the same place whatever is in it — so the extra height moves
	 * everything above it instead, and the headline came up by exactly those
	 * 8px: 761 to 753 at 390 against an unchanged LG.
	 *
	 * 9 + 28 + 9 + 2 of border is the same 48 the others reach with 13 + 20 +
	 * 13 + 2, so the chip is level with theirs and the wordmark keeps its
	 * size. Taken from the chip rather than from the mark: holding the chip at
	 * 48 by giving the img border-box instead would spend the plate out of the
	 * artwork and leave the wordmark at 12px, 40% under every other mark on
	 * the one screen where it is already smallest.
	 *
	 * :has(), because the chip markup is shared by every study — this follows
	 * the mark that needs it rather than asking the template for a class. */
	.zouma-csd-hero__chip:has(img[src*="neilsen.svg"]) {
		padding-block: 9px;
	}
}

@media (max-width: 560px) {
	/* One field per row: at this width the two-up pairs leave no room for the
	 * placeholder, and a placeholder that is cut off is worse than none. */
	.zouma-csd-dl__grid {
		grid-template-columns: minmax(0, 1fr);
	}

	.zouma-csd-dl {
		max-width: none;
	}

	.zouma-csd-hero__title {
		max-width: none;
	}

	/* The three chips wrap onto a second line rather than becoming a
	 * sideways scroller: a strip the reader has to drag hides the links it
	 * exists to offer, and there are only three of them. */
	.zouma-csd-jump a {
		white-space: nowrap;
	}
}