/* ============================================================
   Case study — sectioned narrative layout (NISM format)
   Pairs with template-parts/case-study/narrative.php

   Everything is scoped under .cs-page and uses cs- prefixed class
   names. That is deliberate: the theme sets global h1/h2/body rules
   (and a 700 body weight), so an unscoped stylesheet would either
   lose to them or leak into the rest of the site.

   Type values are measured off academiaerp.com: headings Inter 500,
   h1 3.05vw (.fs-72), hero copy 1.14583vw (.fs-22) at weight 700,
   buttons 1.04167vw. Clamp floors are ours -- the live theme swaps to
   responsive.css breakpoints on phones, where bare vw collapses.
   ============================================================ */

.cs-page {
	--cs-navy: #2a2c5b;
	--cs-navy-deep: #1e2044;
	--cs-red: #b2242e;
	--cs-sky: #E9EBFA;
	--cs-offwhite: #FBFBFB;
	--cs-body: #64607D;
	--cs-muted: #9898B5;
	--cs-line: #DFDFDF;
	--cs-gold: #FFB400;
	--cs-r-card: 22px;

	font-family: Inter, -apple-system, "Segoe UI", system-ui, sans-serif;
	color: var(--cs-body);
	line-height: 1.6;
	font-size: clamp(15px, 1.05vw, 17px);
}

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

/* The theme puts letter-spacing:1px on body copy. That widened every string
   here enough to change where lines broke -- the metrics captions wrapped to
   an extra line and the factbar came out 23px taller than the design. The
   approved design tracks at normal, so reset it. This sits with the resets so
   the deliberate tracking further down (.cs-h1 -0.72px, h3 -0.48px,
   .cs-eyebrow .12em) still wins on source order. */
.cs-page, .cs-page :where(*) { letter-spacing: normal; }

/* These are resets for the theme, not part of the design, so they are wrapped
   in :where() to carry no specificity of their own. Written plainly as
   `.cs-page img`, an element selector alongside the class outranks the single
   class on every component below it -- so `.cs-page img{height:auto}` beat
   `.cs-lockup__logo{height:36px}` and the client logo rendered at its natural
   banner size, and `.cs-page a{color:red}` beat `.cs-btn{color:#fff}` and put
   red labels on the navy buttons. :where() drops that trap for the whole
   stylesheet rather than needing a re-statement per component. */
.cs-page :where(img) { max-width: 100%; height: auto; display: block; }
.cs-page :where(figure) { margin: 0; }
.cs-page :where(p) { margin: 0 0 1em; }
.cs-page :where(p:last-child) { margin-bottom: 0; }
.cs-page :where(a) { color: var(--cs-red); }
.cs-page :where(a:hover) { color: #8f1d25; }

/* A directly-matched declaration always beats an inherited one, whatever the
   specificity — so a bare `p { font-size: 16px }` in the theme's mobile CSS
   beat the size these paragraphs inherit from .cs-page, and body copy came
   out a pixel larger than the design below 768px. Re-asserting inheritance
   fixes it, but the rule has to sit HERE, with the resets: at (0,1,0) it
   outranks the bare tag selector while still losing on source order to every
   component below that sets a size of its own (.cs-eyebrow, .cs-role,
   .cs-stars, .cs-fine). Appended at the end of the file it silently flattened
   all four of those to the body size. */
.cs-page :where(p, li, blockquote, figcaption) { font-size: inherit; }

.cs-page :where(h1, h2, h3) {
	color: var(--cs-navy); line-height: 1.2; margin: 0; font-weight: 500;
}
.cs-page .cs-h1 {
	font-size: clamp(30px, 3.05vw, 58px);
	letter-spacing: -0.72px; font-weight: 800; color: #fff;
	max-width: 19ch; margin: 0;
}
.cs-page :where(h2) { font-size: clamp(23px, 2.19vw, 42px); }
.cs-page :where(h3) { font-size: clamp(16.5px, 1.234vw, 24px); letter-spacing: -0.48px; font-weight: 600; }

/* container mirrors the theme .container: 3.125vw sides from 1200px,
   capped at 1638px above 1921px */
.cs-wrap { width: 100%; margin: 0 auto; padding-left: 20px; padding-right: 20px; }
@media (min-width: 1200px) { .cs-wrap { padding-left: 3.125vw; padding-right: 3.125vw; } }
@media (min-width: 1921px) { .cs-wrap { max-width: 1638px; padding-left: 12px; padding-right: 12px; } }

.cs-eyebrow {
	font-size: clamp(12px, .85vw, 14px); font-weight: 600; letter-spacing: .12em;
	text-transform: uppercase; color: var(--cs-red); margin: 0 0 12px;
}
.cs-section { padding-block: max(40px, 6.25vw); }
.cs-section--alt { background: var(--cs-offwhite); }
.cs-section--sky { background: var(--cs-sky); }
.cs-lede { font-size: clamp(16px, 1.14583vw, 22px); line-height: 1.5; color: var(--cs-body); margin-top: 14px; }
.cs-measure { max-width: 78ch; }
.cs-rte { margin-top: 14px; }
.cs-rte p { margin: 0 0 1em; }

/* ---------------- hero ---------------- */
.cs-heroband { padding-top: clamp(16px, 1.9vw, 26px); }
.cs-hero {
	position: relative; overflow: hidden; border-radius: 28px;
	background: linear-gradient(135deg, #1e2044 0%, #2a2c5b 45%, #3f4590 100%);
	padding: clamp(16px, 1.9vw, 26px) clamp(22px, 2.6vw, 48px) clamp(26px, 3vw, 48px);
}
@media (max-width: 560px) { .cs-hero { border-radius: 18px; } }

.cs-crumbs {
	display: flex; flex-wrap: wrap; gap: 0 8px; align-items: center;
	font-size: clamp(13px, .95vw, 15.5px); font-weight: 700; color: #fff;
	margin-bottom: clamp(20px, 3vw, 44px);
}
/* Breadcrumb links hold their colour on hover, matching the rest of the site,
   where the trail is a location indicator rather than a set of controls. The
   `a:hover` state has to be stated rather than simply dropped: without it the
   stylesheet's own `.cs-page :where(a:hover)` reset would repaint them the
   theme's dark red against the navy band. */
.cs-crumbs a { color: #fff; text-decoration: none; }
.cs-crumbs a:hover { color: #fff; }
.cs-crumbs [aria-current] { color: #ffb3b9; }

.cs-hero__inner {
	display: grid; grid-template-columns: 1.05fr .95fr;
	gap: clamp(26px, 3.6vw, 60px); align-items: center;
}
@media (max-width: 880px) { .cs-hero__inner { grid-template-columns: minmax(0, 1fr); } }

.cs-hero__media { border-radius: var(--cs-r-card); overflow: hidden; box-shadow: 0 24px 60px rgba(10, 12, 35, .28); }
.cs-hero__media img { width: 100%; aspect-ratio: 3/2; object-fit: cover; }
@media (max-width: 880px) { .cs-hero__media img { aspect-ratio: 16/9; } }

.cs-sub {
	color: rgba(255, 255, 255, .85); max-width: 62ch; margin-top: 18px;
	font-size: clamp(16px, 1.14583vw, 22px); font-weight: 700; line-height: 1.5;
}
.cs-hero__meta {
	display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center;
	margin: 18px 0 0; font-weight: 600; color: #fff;
	font-size: clamp(13.5px, .98vw, 15.5px);
}
.cs-hero__meta span:not(:last-child)::after {
	content: "\00b7"; padding-left: 14px; color: #ffb3b9; font-weight: 700;
}
@media (max-width: 560px) {
	.cs-hero__meta { flex-direction: column; align-items: flex-start; gap: 7px; }
	.cs-hero__meta span:not(:last-child)::after { content: none; }
}

/* client lockup: flag and logo share the top row, divided by a hairline,
   with the client name set small and lettered beneath the pair */
.cs-lockup {
	display: flex; align-items: center; flex-wrap: wrap;
	gap: clamp(9px, .9vw, 12px) clamp(12px, 1.2vw, 18px);
	margin-bottom: clamp(16px, 1.6vw, 24px);
}
.cs-lockup__logo {
	height: clamp(28px, 2.3vw, 36px); width: auto; max-width: min(100%, 340px);
	object-fit: contain; object-position: left center;
}
/* Own row, beneath the two marks. `flex-basis: 100%` alone does NOT break the
   line if the item also carries a max-width: flex line-breaking measures the
   hypothetical main size, which is the basis already clamped by min/max, so a
   46ch cap made the name small enough to sit back up beside the flag and logo.
   Hence `min-width: 100%` -- a floor cannot be clamped away -- and no measure
   cap at all; the hero copy column is the measure the design intends. */
.cs-lockup__name {
	margin: 0; flex: 0 0 100%; min-width: 100%; max-width: none;
	font-size: clamp(11px, .82vw, 13px); font-weight: 700; color: #fff;
	letter-spacing: .06em; line-height: 1.35;
}

/* short red keyline closing the headline */
.cs-rule {
	display: block; width: clamp(128px, 13vw, 150px); height: 4px; border-radius: 2px;
	background: var(--cs-red); margin-top: clamp(20px, 2vw, 30px);
}

/* ---------------- metrics strip ---------------- */
.cs-metrics { background: var(--cs-sky); padding-block: clamp(28px, 3.4vw, 46px); margin-top: clamp(26px, 3vw, 44px); }
.cs-metrics__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(14px, 1.6vw, 24px); }
@media (max-width: 900px) { .cs-metrics__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 430px) { .cs-metrics__grid { grid-template-columns: minmax(0, 1fr); } }
.cs-metric { background: #fff; border: 1px solid var(--cs-line); border-radius: var(--cs-r-card); padding: clamp(18px, 1.9vw, 26px); }
.cs-metric b { display: block; font-size: clamp(30px, 3.4vw, 44px); font-weight: 800; color: var(--cs-navy); line-height: 1; }
.cs-metric span { display: block; margin-top: 8px; font-size: clamp(13.5px, .98vw, 15.5px); }
.cs-fine { margin-top: 14px; font-size: 13.5px; color: var(--cs-muted); }

/* "Significantly" / "Majority" sit in slots sized for a 2-4 character figure.
   Scaling every figure down to fit would shrink the numbers that matter, so
   word values get their own step, with a break as a last resort. */
.cs-page b.cs-statword { font-size: clamp(19px, 1.55vw, 26px); overflow-wrap: break-word; }

/* ---------------- lists ---------------- */
.cs-split { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(24px, 3vw, 48px); align-items: start; margin-top: clamp(20px, 2.4vw, 32px); }
@media (max-width: 880px) { .cs-split { grid-template-columns: minmax(0, 1fr); } }

.cs-deflist { display: grid; gap: clamp(20px, 1.9vw, 28px); margin: 0; padding: 0; list-style: none; }
.cs-deflist li { display: grid; grid-template-columns: auto 1fr; gap: 16px; align-items: start; min-width: 0; }
.cs-dot { width: 34px; height: 26px; display: grid; place-items: center; flex: none; }
.cs-dot::before { content: ""; display: block; width: 9px; height: 9px; border-radius: 50%; background: var(--cs-navy); }
.cs-dot--red::before { background: var(--cs-red); }
.cs-deflist p { margin-top: 6px; }

.cs-steps { display: grid; gap: clamp(20px, 2vw, 30px); margin: clamp(20px, 2.4vw, 32px) 0 0; padding: 0; list-style: none; counter-reset: none; }
.cs-steps li { display: grid; grid-template-columns: auto 1fr; gap: 16px; align-items: start; min-width: 0; }
.cs-steps__n {
	width: 40px; height: 40px; border-radius: 12px; background: #fdecec; color: var(--cs-red);
	display: grid; place-items: center; font-weight: 800; font-size: 14px; flex: none;
}
.cs-steps p { margin-top: 6px; }

.cs-shot {
	border-radius: var(--cs-r-card); overflow: hidden; background: var(--cs-sky);
	box-shadow: 0 18px 44px rgba(10, 12, 35, .14);
}
.cs-shot img { width: 100%; object-fit: cover; aspect-ratio: 4/3; max-height: clamp(240px, 32vw, 430px); }
@media (max-width: 640px) { .cs-shot img { max-height: none; } }

/* ---------------- impact cards ---------------- */
.cs-outcomes { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(14px, 1.6vw, 24px); margin-top: clamp(20px, 2.4vw, 32px); }
@media (max-width: 1000px) { .cs-outcomes { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 480px) { .cs-outcomes { grid-template-columns: minmax(0, 1fr); } }
.cs-card { background: #fff; border: 1px solid var(--cs-line); border-radius: var(--cs-r-card); padding: clamp(20px, 2.2vw, 30px); }
.cs-card b { display: block; font-size: clamp(26px, 2.6vw, 34px); font-weight: 800; color: var(--cs-navy); line-height: 1; margin-bottom: 8px; }
.cs-card p { margin-top: 6px; font-size: clamp(13.5px, .98vw, 15.5px); }

/* ---------------- testimonials ---------------- */
.cs-quotes { display: grid; gap: clamp(18px, 2vw, 28px); }
.cs-quote { background: var(--cs-sky); border-radius: var(--cs-r-card); padding: clamp(26px, 3vw, 44px); display: grid; gap: 20px; }
.cs-quote blockquote { margin: 0; font-size: clamp(18px, 1.5vw, 23px); color: var(--cs-navy); line-height: 1.5; }
/* A quote can now carry more than one paragraph (blank line in the field).
   The theme resets p margins to 0, so the gap has to be stated here; it is
   set in em so it tracks the quote's own clamped type size. */
.cs-quote blockquote p + p { margin-top: .75em; }
.cs-quote figcaption { display: flex; align-items: center; gap: clamp(14px, 1.4vw, 22px); min-width: 0; }

/* portrait framed the way the source PDF does it: square, rounded, with a
   navy-to-red edge. The gradient is on the wrapper because an <img> paints
   over its own background. */
.cs-av {
	flex: none; display: block; width: clamp(76px, 6.2vw, 104px); aspect-ratio: 1;
	border-radius: 14px; padding: 1.5px;
	background: linear-gradient(145deg, var(--cs-navy) 15%, var(--cs-red) 85%);
}
.cs-av img { width: 100%; height: 100%; object-fit: cover; border-radius: 12.5px; }
.cs-who { display: grid; gap: 3px; min-width: 0; }
.cs-who strong { color: var(--cs-red); font-weight: 700; line-height: 1.25; font-size: clamp(17px, 1.35vw, 25px); }
.cs-role { color: var(--cs-navy); font-size: clamp(14px, 1.05vw, 19px); }
.cs-stars { color: var(--cs-gold); font-size: clamp(18px, 1.45vw, 26px); letter-spacing: .18em; line-height: 1.2; margin-top: 2px; }

/* ---------------- CTA ---------------- */
.cs-cta { background: var(--cs-sky); border-radius: var(--cs-r-card); padding: clamp(26px, 3.4vw, 44px); text-align: center; }
.cs-cta__actions { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; margin-top: 22px; }

/* the brand's signature asymmetric-radius button */
.cs-btn {
	display: inline-flex; align-items: center; gap: 10px; text-decoration: none;
	background: var(--cs-navy); color: #fff; font-weight: 700;
	font-size: clamp(14px, 1.04167vw, 20px); padding: 14px 22px;
	border-radius: 12px 22px 12px 22px; transition: background .2s, transform .2s;
}
.cs-btn:hover { background: var(--cs-navy-deep); color: #fff; transform: translateY(-1px); }
.cs-btn--ghost { background: transparent; color: var(--cs-navy); box-shadow: inset 0 0 0 1.5px var(--cs-navy); }
.cs-btn--ghost:hover { background: rgba(42, 44, 91, .08); color: var(--cs-navy); }

/* ============================================================
   Design 2 — sticky sidebar layout
   The approved design (nism-case-study/design-2.html) drops the
   alternating full-width bands used above in favour of one measured
   body column with a sticky table of contents beside it. The band
   classes (.cs-section--alt / --sky) are kept for the metrics strip
   and for any case study still rendering the earlier arrangement.
   ============================================================ */

.cs-layout {
	display: grid; grid-template-columns: 240px minmax(0, 1fr);
	gap: clamp(24px, 4vw, 64px); align-items: start;
	padding-block: clamp(36px, 4.5vw, 64px);
}
@media (max-width: 940px) { .cs-layout { grid-template-columns: minmax(0, 1fr); } }
.cs-layout > * { min-width: 0; }

/* ---------------- sticky table of contents ---------------- */
/* The theme header is sticky, so the offset here and the sections'
   scroll-margin below both reserve its height (~68-84px) plus air. */
.cs-toc { position: sticky; top: clamp(84px, 6.5vw, 104px); }
@media (max-width: 940px) {
	.cs-toc { position: static; border-bottom: 1px solid var(--cs-line); padding-bottom: 18px; }
}
.cs-toc ol { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 2px; }
.cs-toc a {
	display: block; text-decoration: none; color: var(--cs-body); font-size: 14.5px;
	padding: 9px 12px; border-radius: 10px; border-left: 2px solid transparent;
}
.cs-toc a:hover { background: var(--cs-sky); color: var(--cs-navy); border-left-color: var(--cs-red); }

/* The rules above are written for plain text links, and both of them
   outrank .cs-btn -- `display:block` would strip the button of its flex
   box (and with it the icon gap and centring) and the hover would paint
   navy text onto the navy fill. Restore the button in both states. */
.cs-toc__cta { margin-top: 18px; }
.cs-toc__cta a { display: inline-flex; width: 100%; justify-content: center; color: #fff; border-left: 0; }
.cs-toc__cta a:hover { background: var(--cs-navy-deep); color: #fff; border-left-color: transparent; }

/* ---------------- body column ---------------- */
.cs-body > .cs-block + .cs-block {
	margin-top: clamp(38px, 4.5vw, 64px);
	padding-top: clamp(38px, 4.5vw, 64px);
	border-top: 1px solid var(--cs-line);
}
/* an #id jump must not land the heading under the sticky site header */
.cs-body > .cs-block { scroll-margin-top: clamp(84px, 6.5vw, 104px); }
.cs-body > .cs-block > h2 { margin-top: 0; }

/* ---------------- overview factbar ---------------- */
/* Four figures in one hairline-divided strip. The 1px grid gap over a
   --cs-line background is what draws the dividers, so the cells need an
   opaque fill of their own. */
.cs-factbar {
	display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px;
	background: var(--cs-line); border: 1px solid var(--cs-line);
	border-radius: var(--cs-r-card); overflow: hidden; margin-top: 26px;
}
@media (max-width: 760px) { .cs-factbar { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 430px) { .cs-factbar { grid-template-columns: minmax(0, 1fr); } }
.cs-factbar div { background: #fff; padding: 20px; min-width: 0; }
.cs-factbar b { display: block; font-size: clamp(24px, 2.4vw, 32px); font-weight: 800; color: var(--cs-navy); line-height: 1; }
.cs-factbar p { font-size: 14px; margin: 8px 0 0; }

/* ---------------- hero country flag ---------------- */
/* Flat treatment rather than a picture: no radius or shadow, just a 1px
   edge to contain the white bands most flags carry, on the same height
   ramp as the client mark beside it. */
/* The flag now leads the lockup, so the hairline that divides the two marks
   hangs off its trailing edge. It is drawn from .cs-lockup--pair rather than
   from the flag alone: on the six case studies still waiting on logo artwork
   the flag stands by itself and a trailing rule would float against nothing.
   Padding the flag, not the mark, also keeps a chipped logo's white plate
   flush against the rule. */
.cs-flag { display: inline-flex; flex: none; line-height: 0; }
.cs-lockup--pair .cs-flag {
	padding-right: clamp(12px, 1.2vw, 18px); border-right: 1px solid rgba(255, 255, 255, .28);
}
.cs-flag img {
	height: clamp(28px, 2.3vw, 36px); width: auto; display: block;
	border: 1px solid rgba(255, 255, 255, .42);
}

/* ---------------- closing CTA contact row ---------------- */
/* Phone, email and website, carried over from the closing page of the
   source PDF. The values are region-specific -- see cs_region and the
   Case Study Regions options page. */
.cs-ctaContact {
	display: flex; flex-wrap: wrap; gap: 12px 30px; justify-content: center;
	margin: 26px 0 0; font-weight: 700; font-size: clamp(15px, 1.1vw, 17px);
}
.cs-ctaContact a { display: inline-flex; align-items: center; gap: 10px; color: var(--cs-navy); text-decoration: none; }
.cs-ctaContact a:hover { color: var(--cs-red); }
.cs-ctaContact svg { width: 18px; height: 18px; flex: none; opacity: .9; }
.cs-ctaSite { margin: 12px 0 0; font-size: 14.5px; color: var(--cs-body); }
.cs-ctaSite a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.cs-ctaSite a:hover { color: var(--cs-red); }

/* ---------------- in-column figure ---------------- */
.cs-figure {
	margin: clamp(20px, 2.4vw, 32px) 0 0; border-radius: var(--cs-r-card); overflow: hidden;
	background: var(--cs-sky); box-shadow: 0 18px 44px rgba(10, 12, 35, .14);
}
.cs-figure img { width: 100%; object-fit: cover; aspect-ratio: 16/7; max-height: clamp(240px, 32vw, 430px); }
@media (max-width: 640px) { .cs-figure img { aspect-ratio: 4/3; max-height: none; } }

/* Inside the narrow body column the four outcome cards and the two-up
   quote grid both need to fall back a breakpoint earlier than they do
   full-bleed. */
.cs-body .cs-outcomes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 620px) { .cs-body .cs-outcomes { grid-template-columns: minmax(0, 1fr); } }
.cs-body .cs-metrics { background: none; padding-block: 0; margin-top: 0; }

/* ---------------- hero client mark ---------------- */
/* The mark is wrapped so a full-colour logo can be given a white chip to
   sit on. Without it, dark artwork on transparency vanishes into the navy
   hero -- which is the case for most of the migrated case studies, none of
   which have a knock-out version of their logo on file. */
.cs-lockup__mark { display: inline-flex; flex: none; line-height: 0; }
.cs-lockup__mark--chip {
	background: #fff; border-radius: 8px;
	padding: clamp(5px, .5vw, 8px) clamp(8px, .8vw, 12px);
}

/* the button's trailing arrow, which the base .cs-btn rules never sized */
.cs-btn svg { width: 18px; height: 18px; flex: none; }

/* A case study with no hero photograph should not keep the empty half of the
   two-column hero -- the headline gets the full band instead. */
.cs-hero--nomedia .cs-hero__inner { grid-template-columns: minmax(0, 1fr); }
.cs-hero--nomedia .cs-h1 { max-width: 30ch; }

/* The lists are spaced off the intro paragraph above them. Migrated case
   studies often have no intro, leaving the list butted against the heading. */
.cs-block > h2 + .cs-deflist,
.cs-block > h2 + .cs-steps,
.cs-block > h2 + .cs-outcomes,
.cs-block > h2 + .cs-factbar { margin-top: clamp(20px, 2.4vw, 32px); }

/* Cards stay stretched to a common row height, as the design has them. An
   earlier align-items:start here hugged each card to its own content, which
   tidied the migrated pages whose cards are a headline only -- but it also put
   every card 2-5px short of the approved design, so the design wins. */

/* ============================================================
   Weight normalisation
   The theme sets --theme-body-font-weight: 700 on body, so every
   run of copy inside .cs-page inherited semibold and the page read
   markedly heavier than the approved design, which runs at 400.
   These restore design-2's own weights exactly: body 400, headings
   500 (h1 the exception at 800), and the few elements the design
   deliberately sets heavier.
   ============================================================ */
.cs-page { font-weight: 400; }
.cs-page :where(h2, h3, h4) { font-weight: 500; }
.cs-page :where(strong, b) { font-weight: 700; }

/* the hero standfirst is the one paragraph the design sets bold */
.cs-sub { font-weight: 700; }

/* figures stay heavy; `b` above would otherwise pull them back to 700 */
.cs-factbar b, .cs-metric b, .cs-card b { font-weight: 800; }
.cs-who strong { font-weight: 700; }
.cs-eyebrow { font-weight: 600; }
/* 700, not the 600 it carried inline: set small, uppercase and lettered under
   the marks, the lighter weight went thin against the navy band */
.cs-lockup__name { font-weight: 700; }
.cs-btn { font-weight: 700; }

/* ============================================================
   Values aligned to design-2 after a measured comparison
   The impact grid was built from the theme's own card scale rather
   than the design's, which left the cards a couple of pixels narrow
   and ~10px short: the design sets .card padding clamp(22px,2.2vw,32px)
   against our 20-30px, and .grid gap clamp(16px,1.8vw,28px) against
   our 14-24px, and drops to one column at 600px rather than 620px.
   ============================================================ */
.cs-outcomes { gap: clamp(16px, 1.8vw, 28px); }
.cs-card { padding: clamp(22px, 2.2vw, 32px); }
.cs-card p { margin-top: 8px; }
.cs-card h3 + p { margin-top: 8px; }
@media (max-width: 620px) { .cs-body .cs-outcomes { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .cs-body .cs-outcomes, .cs-outcomes { grid-template-columns: minmax(0, 1fr); } }

/* ---- hero spacing, matched to the design's own box model ----
   design-2 puts no padding on .hero itself: the crumb row carries the top and
   side padding, .hero__inner carries the block padding, and the h1 adds a 60px
   lead-in above itself. Ours had a single padding on .cs-hero plus a crumb
   margin, which came out ~46px shorter than the approved hero. */
.cs-hero { padding: 0; }
.cs-crumbs { padding: clamp(16px, 1.9vw, 26px) clamp(22px, 2.6vw, 48px) 0; margin-bottom: 0; }
.cs-hero__inner { padding-block: clamp(40px, 5vw, 72px); padding-inline: clamp(22px, 2.6vw, 48px); }
.cs-page .cs-h1 { margin: 40px 0 16px; }
.cs-page .cs-h1 + .cs-rule { margin-top: clamp(20px, 2vw, 30px); margin-bottom: 0; }
@media (max-width: 560px) { .cs-page .cs-h1 { margin-top: 34px; } }

/* ---- closing CTA ----
   The body paragraph already carries a 20px bottom margin, as it does in the
   design, so the action row must not add its own on top of it. */
.cs-cta p + .cs-cta__actions { margin-top: 0; }

/* Card copy inherits the body size in the design; ours stepped it down to
   .98vw, which made every impact card 5px shorter than the approved one. */
.cs-card p { font-size: inherit; }

/* ---- hero gradient, matched to the design ----
   design-2 lays a dark scrim over the navy gradient (.hero::after), which is
   what gives the band its depth and keeps the white headline legible over the
   lighter bottom-right of the gradient. Ours had the gradient but no scrim, so
   the hero read lighter and more purple than the approved one. The stops are
   the design's too: #454b96 at the far end rather than #3f4590. */
.cs-hero { background: linear-gradient(135deg, #1e2044, #2a2c5b 50%, #454b96); }
.cs-hero::after {
	content: ""; position: absolute; inset: 0; pointer-events: none;
	background: linear-gradient(0deg, rgba(16, 18, 42, .9), rgba(16, 18, 42, .25));
}
/* the scrim is a sibling of the content, so the content needs its own layer */
.cs-crumbs, .cs-hero__inner { position: relative; z-index: 1; }

/* the current page in the trail is white and bold in the design, not pink */
.cs-crumbs [aria-current] { color: #fff; font-weight: 700; }

/* ---- hero banner ----
   The design puts a brand gradient behind .hero__media so the panel still
   reads as intentional if the photograph is missing; ours had only the shadow,
   so a case study with no banner showed an empty hole. */
.cs-hero__media { background: linear-gradient(135deg, #2a2c5b, #3c4288 55%, #5a5fa8); }

/* Six case studies have no banner and use the stand-in panel. It is drawn at
   3:2 so it fills the frame exactly, and `contain` keeps the accent keyline
   from being cropped the way `cover` would. */
.cs-hero__media--fallback img { object-fit: contain; }

/* the single-column hero is no longer reachable now that a banner always
   renders, but the rule is harmless and keeps the modifier working if a future
   case study is deliberately given no media at all */

/* A round crest and a wide wordmark do not read at the same size. Sized purely
   by height, NISM's wordmark is right at 36px but a badge becomes a 36px dot
   and a portrait mark a sliver, which is why the migrated logos looked weak
   next to it. Squarer marks get a taller ramp; NISM (6.8:1) is unaffected. */
.cs-page .cs-lockup__mark--badge .cs-lockup__logo { height: clamp(40px, 3.3vw, 52px); }

/* ---- hero lockup on phones ----
   The stacked arrangement is the design at every width now, so the phone rules
   have only to close the divider up. */
@media (max-width: 560px) {
	.cs-lockup { gap: 9px 12px; }
	.cs-lockup--pair .cs-flag { padding-right: clamp(10px, 3vw, 14px); }
}

/* The flag is the logo's companion in the lockup, so the two marks have to
   share a height. The badge ramp lifted square logos to 40-52px but left the
   flag on the wordmark's 28-36px ramp, so beside a crest the flag sat visibly
   short. Match it.

   Driven from .cs-lockup--badge on the container, not from the mark: the flag
   now precedes the mark in the DOM and no sibling combinator reaches backwards.
   NISM's logo is a wordmark, not a badge, so its hero is unaffected. */
.cs-page .cs-lockup--badge .cs-flag img { height: clamp(40px, 3.3vw, 52px); }

/* The stat strip is shared by the overview's headline metrics and by the
   impact section's figures, and those come in ones and twos as well as fours,
   so the column count is declared by the markup. repeat() will not take a
   calc() or min() for its count, hence modifier classes rather than a custom
   property. The 4-up case keeps the design's exact 4 -> 2 -> 1 steps. */
.cs-factbar--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.cs-factbar--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.cs-factbar--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cs-factbar--1 { grid-template-columns: minmax(0, 1fr); }
@media (max-width: 760px) {
	.cs-factbar--4, .cs-factbar--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 430px) {
	.cs-factbar--4, .cs-factbar--3, .cs-factbar--2 { grid-template-columns: minmax(0, 1fr); }
}
/* a figure's label sits under it; with only a label and no figure the cell
   would otherwise start flush against the top padding */
.cs-factbar b + p { margin-top: 8px; }

/* ---- hero headline on tablets ----
   The 19ch cap on .cs-h1 is measured for the desktop hero, where the headline
   shares the band with the photograph and has roughly half the width to work
   in. Below 880px the hero collapses to one column and the copy gets the full
   band -- but the cap stays, so on an iPad the headline keeps breaking at 19
   characters against a column twice that wide, and a long title like UNICITI's
   runs to five ragged lines beside a lot of empty navy.

   Lifting the cap in that band lets the headline use the width it already has.
   Phones (<=560px) are narrow enough that 19ch is close to the full measure
   anyway, and the two-column desktop hero above 880px is untouched -- both
   were reported as reading correctly. */
@media (min-width: 561px) and (max-width: 880px) {
	.cs-page .cs-h1 { max-width: none; }
}



/* The closing CTA no longer offers the ungated PDF download. `.cs-btn--ghost`
   is used in exactly one place in the whole theme — that button — so this
   removes it without reaching any other control. The actions row is a centred
   flex with a 14px gap, so the remaining "Talk to our SIS expert" button
   re-centres itself and leaves no empty slot behind. */
.cs-page .cs-cta__actions .cs-btn--ghost { display: none; }