/* ==================================================================
 * PRIME Philippines — Corporate Social Responsibility Subpage
 * Relies on prime-service-page.css (.prime-service-hero) and
 * prime-leadership-page.css (.prime-leader-featured, .prime-leader-stats)
 * for shared grammar; rules below cover only the new CSR sections.
 * ================================================================== */

/* ---- CSR page wrapper resets ------------------------------------ *
 * The CSR page renders Elementor content inside an <article> created
 * by page-corporate-social-responsibility.php. We zero the default
 * margins on the article + body wrappers so the full-bleed hero butts
 * up against the viewport edges with no white gap at top, left, or
 * right. Scoped to the CSR templates so other pages are untouched. */
body.page-template-page-corporate-social-responsibility,
body.page-corporate-social-responsibility,
body.page-template-page-corporate-social-responsibility html,
body.page-corporate-social-responsibility html {
	margin: 0 !important;
	padding: 0 !important;
}

/* Header transparency from byte zero on the CSR page so there's no
   white-header flash before prime-homepage.js applies the
   `prime-header--over-hero` class. The JS-driven `--scrolled` class
   still takes precedence once the visitor scrolls past the hero. */
body.page-template-page-corporate-social-responsibility .prime-header,
body.page-corporate-social-responsibility .prime-header {
	background-color: transparent !important;
}
body.page-template-page-corporate-social-responsibility .prime-header.prime-header--scrolled,
body.page-corporate-social-responsibility .prime-header.prime-header--scrolled {
	background-color: var(--prime-warm-white, #FFFCFB) !important;
}
body.page-template-page-corporate-social-responsibility > article,
body.page-template-page-corporate-social-responsibility > main,
body.page-corporate-social-responsibility > article,
body.page-corporate-social-responsibility > main,
body.page-template-page-corporate-social-responsibility article.page,
body.page-corporate-social-responsibility article.page {
	margin: 0 !important;
	padding: 0 !important;
	max-width: none !important;
	width: 100%;
}
/* The article/main wrappers were already reset to width:100% above,
   so the section can stay simple — just fill its parent and kill
   any block margins. Using width:100% (not 100vw) avoids the
   scrollbar-width overshoot that 100vw causes on Windows browsers. */
.prime-csr-commitment {
	width: 100%;
	max-width: none;
	margin: 0 !important;
	position: relative;
}

/* Empty Elementor sections (no populated widget) sometimes accumulate
   above the hero — leftover from page editing. Each one renders at
   1px tall and stacks visible white gaps above the dark blue. Self-
   scoping selector: target empty sections only when the same
   Elementor wrapper also contains our CSR commitment hero. Avoids
   hardcoding body classes (which differ by page-template assignment).
   :has() is supported in all evergreen browsers since 2023. */
.elementor:has(.prime-csr-commitment) .elementor-section:not(:has(.elementor-element-populated)) {
	display: none !important;
}

/* Zero the Elementor widget-wrapper spacing inside any section
   that holds a full-bleed CSR widget (hero / impact / cta). Without
   this the Elementor section + column + widget-wrap each contribute
   horizontal padding + vertical margin, leaving visible white bands
   around the dark backgrounds. */
.elementor-section:has(.prime-csr-commitment) .elementor-element,
.elementor-section:has(.prime-csr-impact) .elementor-element,
.elementor-section:has(.prime-csr-cta) .elementor-element {
	margin-top: 0 !important;
	margin-bottom: 0 !important;
}
.elementor-section:has(.prime-csr-commitment),
.elementor-section:has(.prime-csr-commitment) .elementor-container,
.elementor-section:has(.prime-csr-commitment) .elementor-column,
.elementor-section:has(.prime-csr-commitment) .elementor-widget-wrap,
.elementor-section:has(.prime-csr-impact),
.elementor-section:has(.prime-csr-impact) .elementor-container,
.elementor-section:has(.prime-csr-impact) .elementor-column,
.elementor-section:has(.prime-csr-impact) .elementor-widget-wrap,
.elementor-section:has(.prime-csr-cta),
.elementor-section:has(.prime-csr-cta) .elementor-container,
.elementor-section:has(.prime-csr-cta) .elementor-column,
.elementor-section:has(.prime-csr-cta) .elementor-widget-wrap {
	padding-left: 0 !important;
	padding-right: 0 !important;
	margin-left: 0 !important;
	margin-right: 0 !important;
	max-width: none !important;
	width: 100% !important;
	gap: 0 !important;
}

/* ---- Hero / Commitment (full-bleed background image) ------------- *
 * Renders as the CSR page hero. Image fills the entire section as a
 * positioned-absolute layer; a left-to-right gradient overlay holds
 * the PRIME blue field over the left half and fades to transparent
 * past the midpoint so the photo shows through cleanly on the right.
 * Content sits on top of both, scoped to the left ~50%. Section
 * height grows with content — image always fills regardless.
 * ------------------------------------------------------------------ */
.prime-csr-commitment {
	/* Deeper navy matches the Impact + CTA sections (#0c1b38) so the
	   whole page reads as a single visual system instead of two
	   different blues. */
	background: #0c1b38;
	color: var(--prime-warm-white, #FFFCFB);
	padding: 0;
	overflow: hidden;
	position: relative;
	min-height: 100vh;
	min-height: 100dvh;
	isolation: isolate;
}
.prime-csr-commitment__bg {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center right;
	display: block;
	z-index: 0;
}
.prime-csr-commitment__overlay {
	position: absolute;
	inset: 0;
	/* Same deep-navy gradient — solid hold on the left, soft fade to
	   transparent so the photo stays clean on the right. */
	background: linear-gradient(
		90deg,
		#0c1b38 0%,
		#0c1b38 38%,
		rgba(12, 27, 56, 0.78) 52%,
		rgba(12, 27, 56, 0.25) 70%,
		rgba(12, 27, 56, 0) 82%
	);
	z-index: 1;
	pointer-events: none;
}
.prime-csr-commitment__inner {
	position: relative;
	z-index: 2;
	/* Match the header container exactly so the eyebrow / heading
	   line up flush with the PRIME logo on the left edge. The header
	   uses --max-width (1440px) + --section-px (clamp(20px,5vw,60px)). */
	max-width: var(--max-width, 1440px);
	margin: 0 auto;
	padding: 0 var(--section-px, clamp(20px, 5vw, 60px));
	min-height: inherit;
	display: flex;
	/* Anchor content to the top of the section (with a calibrated
	   padding-top) instead of vertical-centering, so the eyebrow sits
	   in the upper third rather than mid-screen. */
	align-items: flex-start;
	width: 100%;
}
.prime-csr-commitment__content {
	/* Top padding accounts for the fixed transparent header (~72px)
	   plus enough breathing room so the eyebrow sits comfortably
	   below it without being mid-section. */
	padding: clamp(140px, 16vw, 220px) 0 clamp(60px, 7vw, 100px);
	display: flex;
	flex-direction: column;
	/* Generous rhythm between eyebrow → heading → rule → body. */
	gap: 18px;
	/* Wide enough for "Building Spaces That Create" to stay on a
	   single line at the 72px heading size. Body copy gets its own
	   tighter max-width below to keep paragraphs readable. */
	max-width: 720px;
	width: 100%;
}
/* Keep the supporting paragraph at a comfortable reading width even
   though the surrounding content column is now wider for the
   heading. ~62 characters per line is the editorial sweet spot. */
.prime-csr-commitment__body {
	max-width: 520px;
}
/* Extra breathing room between the supporting paragraph and the
   CTA row so the buttons read as a deliberate "next step", not a
   continuation of the body copy. */
.prime-csr-commitment__body + .prime-csr-commitment__ctas {
	margin-top: 14px;
}
.prime-csr-commitment__eyebrow {
	font-family: var(--font-body, 'Montserrat', sans-serif);
	font-weight: 500;
	font-size: 12px;
	letter-spacing: 0.28em;
	text-transform: uppercase;
	color: var(--prime-gold, #C9AB4C);
	margin: 0;
	display: inline-flex;
	align-items: center;
	gap: 16px;
}
.prime-csr-commitment__eyebrow-rule {
	display: inline-block;
	width: 48px;
	height: 1px;
	background: var(--prime-gold, #C9AB4C);
}
.prime-csr-commitment__title {
	font-family: var(--font-heading, 'Cormorant Garamond', Georgia, serif);
	font-weight: 300;
	/* Sized to match the homepage hero (72px) — this is the most
	   prominent heading on the site so it should read at the same
	   visual weight as the home page banner. */
	font-size: clamp(44px, 5vw, 72px);
	line-height: 1.05;
	letter-spacing: -0.018em;
	color: var(--prime-warm-white, #FFFCFB);
	margin: 0;
}
.prime-csr-commitment__title em {
	font-style: italic;
	color: var(--prime-gold, #C9AB4C);
	font-weight: 300;
	display: block;
}
.prime-csr-commitment__rule {
	display: block;
	width: 56px;
	height: 2px;
	background: var(--prime-gold, #C9AB4C);
	margin: 4px 0 4px;
}
.prime-csr-commitment__body {
	font-family: var(--font-body, 'Montserrat', sans-serif);
	font-size: 14px;
	line-height: 1.8;
	color: rgba(255, 252, 251, 0.82);
}
.prime-csr-commitment__body p { margin: 0 0 16px; }
.prime-csr-commitment__body p:last-child { margin-bottom: 0; }

.prime-csr-commitment__ctas {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
	margin-top: 16px;
}
.prime-csr-commitment__btn {
	display: inline-flex;
	align-items: center;
	gap: 14px;
	padding: 16px 28px;
	font-family: var(--font-body, 'Montserrat', sans-serif);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	text-decoration: none;
	border: 1px solid transparent;
	transition: background 0.25s ease, color 0.25s ease, border-color 0.25s ease, gap 0.25s ease;
}
.prime-csr-commitment__btn svg {
	width: 16px;
	height: 16px;
	flex: 0 0 16px;
	transition: transform 0.25s ease;
}
.prime-csr-commitment__btn:hover { gap: 18px; }
.prime-csr-commitment__btn:hover svg { transform: translateX(4px); }
.prime-csr-commitment__btn--primary {
	background: var(--prime-gold, #C9AB4C);
	color: var(--prime-deep-ink, #0C0C0E);
	border-color: var(--prime-gold, #C9AB4C);
}
.prime-csr-commitment__btn--primary:hover {
	background: #B7993E;
	border-color: #B7993E;
}
.prime-csr-commitment__btn--secondary {
	color: var(--prime-warm-white, #FFFCFB);
	border-color: rgba(255, 252, 251, 0.5);
	background: transparent;
}
.prime-csr-commitment__btn--secondary:hover {
	border-color: var(--prime-gold, #C9AB4C);
	color: var(--prime-gold, #C9AB4C);
}
@media (max-width: 960px) {
	.prime-csr-commitment {
		min-height: 100vh;
		min-height: 100dvh;
	}
	.prime-csr-commitment__overlay {
		background: linear-gradient(
			180deg,
			rgba(12, 27, 56, 0.55) 0%,
			rgba(12, 27, 56, 0.9) 45%,
			#0c1b38 75%
		);
	}
	.prime-csr-commitment__content {
		max-width: none;
		padding: clamp(120px, 22vw, 160px) 0 clamp(56px, 12vw, 96px);
	}
	.prime-csr-commitment__bg {
		object-position: center top;
	}
}

/* ---- Pillars ----------------------------------------------------- */
.prime-csr-pillars {
	background: var(--prime-warm-white, #FFFCFB);
	padding: clamp(80px, 9vw, 120px) var(--section-px, clamp(20px, 5vw, 60px));
}
.prime-csr-pillars__inner {
	max-width: 1280px;
	margin: 0 auto;
}
.prime-csr-pillars__head {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 18px;
	margin-bottom: 56px;
	text-align: center;
}
.prime-csr-pillars__eyebrow {
	font-family: var(--font-body, 'Montserrat', sans-serif);
	font-weight: 600;
	font-size: 11px;
	letter-spacing: 0.34em;
	text-transform: uppercase;
	color: var(--prime-blue, #003366);
	margin: 0;
}
.prime-csr-pillars__eyebrow-rule {
	display: block;
	width: 40px;
	height: 2px;
	background: var(--prime-gold, #C9AB4C);
}
.prime-csr-pillars__title {
	font-family: var(--font-heading, 'Cormorant Garamond', Georgia, serif);
	font-weight: 300;
	font-size: clamp(28px, 3.4vw, 44px);
	line-height: 1.15;
	letter-spacing: -0.012em;
	color: var(--prime-deep-ink, #0C0C0E);
	margin: 0;
}
.prime-csr-pillars__title em {
	font-style: italic;
	font-weight: 300;
}
.prime-csr-pillars__grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 24px;
}
.prime-csr-pillar {
	background: var(--prime-warm-white, #FFFCFB);
	box-shadow: 0 2px 16px rgba(12, 12, 14, 0.06);
	display: flex;
	flex-direction: column;
	transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.prime-csr-pillar:hover {
	transform: translateY(-4px);
	box-shadow: 0 14px 32px rgba(12, 12, 14, 0.1);
}
.prime-csr-pillar__media {
	position: relative;
	aspect-ratio: 5 / 3;
	overflow: hidden;
	background: rgba(0, 51, 102, 0.08);
}
.prime-csr-pillar__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 0.5s ease;
}
.prime-csr-pillar:hover .prime-csr-pillar__media img {
	transform: scale(1.04);
}
.prime-csr-pillar__icon {
	position: absolute;
	top: 16px;
	left: 16px;
	width: 44px;
	height: 44px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: var(--prime-blue, #003366);
	color: var(--prime-gold, #C9AB4C);
	border-radius: 50%;
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.18);
}
.prime-csr-pillar__icon svg {
	width: 22px;
	height: 22px;
}
.prime-csr-pillar__body {
	padding: 28px 26px 28px;
	display: flex;
	flex-direction: column;
	/* Title sits closer to description (8px) than to the Learn More
	   link below (auto via margin-top on the link). Tighter hierarchy. */
	gap: 8px;
	flex: 1;
}
.prime-csr-pillar__name {
	font-family: var(--font-heading, 'Cormorant Garamond', Georgia, serif);
	font-weight: 300;
	font-style: italic;
	/* Slightly larger so the title leads the card more clearly. */
	font-size: 24px;
	line-height: 1.2;
	letter-spacing: -0.01em;
	color: var(--prime-deep-ink, #0C0C0E);
	margin: 0;
}
.prime-csr-pillar__desc {
	font-family: var(--font-body, 'Montserrat', sans-serif);
	font-size: 14px;
	line-height: 1.7;
	color: rgba(27, 29, 30, 0.78);
	margin: 0;
	flex: 1;
}
/* Learn More link — matches .prime-service-card__link from the
   homepage (PRIME blue → gold on hover, 0.15em tracking, 12px). */
.prime-csr-pillar__link {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	/* Push to the bottom of the card body so all four cards align
	   their CTAs at the same baseline even when descriptions differ. */
	margin-top: 16px;
	font-family: var(--font-body, 'Montserrat', sans-serif);
	font-weight: 500;
	font-size: 12px;
	letter-spacing: 0.15em;
	text-transform: uppercase;
	color: var(--prime-blue, #003366);
	text-decoration: none;
	transition: color 0.25s ease, gap 0.25s ease;
}
.prime-csr-pillar__link:hover {
	color: var(--prime-gold, #C9AB4C);
	gap: 12px;
}
.prime-csr-pillar__link svg { width: 14px; height: 14px; }
.prime-csr-pillar__link--static { opacity: 0.55; pointer-events: none; }

@media (max-width: 1080px) {
	.prime-csr-pillars__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; }
}
@media (max-width: 560px) {
	.prime-csr-pillars__grid { grid-template-columns: 1fr; }
	.prime-csr-pillars__title { font-size: clamp(26px, 7vw, 34px); }
}

/* ---- Impact Numbers (reuses prime-stats count-up) ---------------- */
/* Background style mirrored from .prime-cta-banner: deeper navy
   base, gold gridlines at 12% opacity (72px grid), centered radial
   vignette, plus the PRIME logo-mark watermark on the right edge. */
.prime-csr-impact {
	background-color: #0c1b38;
	background-image:
		linear-gradient(rgba(201, 171, 76, 0.12) 1px, transparent 1px),
		linear-gradient(90deg, rgba(201, 171, 76, 0.12) 1px, transparent 1px);
	background-size: 72px 72px;
	background-position: center center;
	color: var(--prime-warm-white, #FFFCFB);
	padding: clamp(70px, 8vw, 110px) var(--section-px, clamp(20px, 5vw, 60px));
	position: relative;
	overflow: hidden;
}
/* Radial vignette darkens the edges and lets the gold grid breathe
   in the centre — same recipe as prime-cta-banner. */
.prime-csr-impact::before {
	content: "";
	position: absolute;
	inset: 0;
	background: radial-gradient(ellipse at center, rgba(12, 27, 56, 0) 0%, rgba(12, 27, 56, 0.50) 75%, rgba(12, 27, 56, 0.80) 100%);
	pointer-events: none;
	z-index: 1;
}
/* Watermark removed — it sat behind the stats grid on the right
   and was obstructing the numbers. The grid + vignette already
   carry the institutional pattern from the CTA banner. */
.prime-csr-impact__inner {
	max-width: 1280px;
	margin: 0 auto;
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr);
	gap: clamp(40px, 6vw, 80px);
	align-items: center;
	/* Sit above the grid + chevron decorations. */
	position: relative;
	z-index: 2;
	position: relative;
}
.prime-csr-impact__content {
	max-width: 380px;
}
.prime-csr-impact__eyebrow {
	font-family: var(--font-body, 'Montserrat', sans-serif);
	font-weight: 500;
	font-size: 12px;
	letter-spacing: 0.28em;
	text-transform: uppercase;
	color: var(--prime-gold, #C9AB4C);
	margin: 0 0 24px;
	display: inline-flex;
	align-items: center;
	gap: 16px;
}
.prime-csr-impact__eyebrow-rule {
	display: inline-block;
	width: 48px;
	height: 1px;
	background: var(--prime-gold, #C9AB4C);
}
.prime-csr-impact__title {
	font-family: var(--font-heading, 'Cormorant Garamond', Georgia, serif);
	font-weight: 300;
	font-size: clamp(32px, 3.6vw, 48px);
	line-height: 1.1;
	letter-spacing: -0.015em;
	color: var(--prime-warm-white, #FFFCFB);
	margin: 0 0 20px;
}
.prime-csr-impact__title em {
	font-style: italic;
	color: var(--prime-gold, #C9AB4C);
	font-weight: 300;
}
.prime-csr-impact__body {
	font-family: var(--font-body, 'Montserrat', sans-serif);
	font-size: 14px;
	line-height: 1.7;
	color: rgba(255, 252, 251, 0.75);
	margin: 0 0 28px;
}
.prime-csr-impact__cta {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	padding: 14px 24px;
	font-family: var(--font-body, 'Montserrat', sans-serif);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--prime-warm-white, #FFFCFB);
	border: 1px solid var(--prime-gold, #C9AB4C);
	text-decoration: none;
	transition: background 0.25s ease, color 0.25s ease, gap 0.25s ease;
}
.prime-csr-impact__cta:hover {
	background: var(--prime-gold, #C9AB4C);
	color: var(--prime-deep-ink, #0C0C0E);
	gap: 16px;
}
.prime-csr-impact__cta svg { width: 14px; height: 14px; }
.prime-csr-impact__grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 0;
}
.prime-csr-impact__tile {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: 8px;
	padding: 8px 16px;
	position: relative;
}
.prime-csr-impact__tile + .prime-csr-impact__tile::before {
	content: "";
	position: absolute;
	left: 0;
	top: 12%;
	bottom: 12%;
	width: 1px;
	background: rgba(255, 252, 251, 0.18);
}
.prime-csr-impact__icon {
	width: 44px;
	height: 44px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: var(--prime-gold, #C9AB4C);
	margin-bottom: 4px;
}
.prime-csr-impact__icon svg { width: 32px; height: 32px; }
.prime-csr-impact__num {
	font-family: var(--font-heading, 'Cormorant Garamond', Georgia, serif);
	font-weight: 400;
	font-size: clamp(36px, 4vw, 52px);
	line-height: 1;
	color: var(--prime-gold, #C9AB4C);
	letter-spacing: -0.01em;
}
.prime-csr-impact__num .prime-stats__number {
	font: inherit;
	color: inherit;
}
.prime-csr-impact__label {
	font-family: var(--font-body, 'Montserrat', sans-serif);
	font-weight: 400;
	font-size: 12px;
	letter-spacing: 0.06em;
	color: rgba(255, 252, 251, 0.78);
	line-height: 1.4;
	max-width: 18ch;
}

@media (max-width: 960px) {
	.prime-csr-impact__inner {
		grid-template-columns: 1fr;
		gap: 48px;
	}
	.prime-csr-impact__content { max-width: none; }
	.prime-csr-impact__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 0; }
	.prime-csr-impact__tile:nth-child(3)::before,
	.prime-csr-impact__tile:nth-child(2n+1)::before { display: none; }
}
@media (max-width: 520px) {
	.prime-csr-impact__grid { grid-template-columns: 1fr; gap: 28px; }
	.prime-csr-impact__tile::before { display: none !important; }
}

/* ---- Stories of Change ------------------------------------------ */
.prime-csr-stories {
	background: var(--prime-warm-white, #FFFCFB);
	padding: clamp(80px, 9vw, 120px) var(--section-px, clamp(20px, 5vw, 60px));
}
.prime-csr-stories__inner {
	max-width: 1280px;
	margin: 0 auto;
}
.prime-csr-stories__head {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 40px;
	margin-bottom: 48px;
	flex-wrap: wrap;
}
.prime-csr-stories__head-left { max-width: 540px; }
.prime-csr-stories__eyebrow {
	font-family: var(--font-body, 'Montserrat', sans-serif);
	font-weight: 600;
	font-size: 11px;
	letter-spacing: 0.34em;
	text-transform: uppercase;
	color: var(--prime-blue, #003366);
	margin: 0 0 14px;
	display: inline-flex;
	align-items: center;
	gap: 14px;
}
.prime-csr-stories__eyebrow-rule {
	display: inline-block;
	width: 40px;
	height: 2px;
	background: var(--prime-gold, #C9AB4C);
}
.prime-csr-stories__title {
	font-family: var(--font-heading, 'Cormorant Garamond', Georgia, serif);
	font-weight: 300;
	font-size: clamp(28px, 3.4vw, 44px);
	line-height: 1.15;
	color: var(--prime-deep-ink, #0C0C0E);
	margin: 0;
}
.prime-csr-stories__title em { font-style: italic; font-weight: 300; }
.prime-csr-stories__view-all {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	font-family: var(--font-body, 'Montserrat', sans-serif);
	font-weight: 600;
	font-size: 11px;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--prime-blue, #003366);
	text-decoration: none;
	transition: color 0.2s ease, gap 0.25s ease;
}
.prime-csr-stories__view-all svg { width: 14px; height: 14px; }
.prime-csr-stories__view-all:hover { color: var(--prime-gold, #C9AB4C); gap: 16px; }
.prime-csr-stories__grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 28px;
}
.prime-csr-story {
	background: var(--prime-warm-white, #FFFCFB);
}
.prime-csr-story__link {
	display: block;
	color: inherit;
	text-decoration: none;
	transition: transform 0.3s ease;
}
.prime-csr-story__link:hover { transform: translateY(-3px); }
.prime-csr-story__link:hover .prime-csr-story__title { color: var(--prime-blue, #003366); }
.prime-csr-story__link:hover .prime-csr-story__media img { transform: scale(1.04); }
.prime-csr-story__media {
	aspect-ratio: 16 / 10;
	overflow: hidden;
	background: rgba(0, 51, 102, 0.06);
	margin-bottom: 18px;
}
.prime-csr-story__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 0.5s ease;
}
.prime-csr-story__body {
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding: 0 2px;
}
.prime-csr-story__tag {
	font-family: var(--font-body, 'Montserrat', sans-serif);
	font-weight: 600;
	font-size: 10.5px;
	letter-spacing: 0.24em;
	color: var(--prime-gold, #C9AB4C);
}
.prime-csr-story__title {
	font-family: var(--font-heading, 'Cormorant Garamond', Georgia, serif);
	font-weight: 400;
	font-size: 20px;
	line-height: 1.25;
	color: var(--prime-deep-ink, #0C0C0E);
	margin: 0;
	transition: color 0.2s ease;
}
.prime-csr-story__excerpt {
	font-family: var(--font-body, 'Montserrat', sans-serif);
	font-size: 13px;
	line-height: 1.65;
	color: var(--prime-gray, #1B1D1E);
	margin: 0;
}
.prime-csr-story__cta {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin-top: 6px;
	font-family: var(--font-body, 'Montserrat', sans-serif);
	font-weight: 600;
	font-size: 11px;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--prime-blue, #003366);
}
.prime-csr-story__cta svg { width: 14px; height: 14px; }
.prime-csr-stories__empty {
	color: var(--prime-gray, #1B1D1E);
	opacity: 0.6;
	font-style: italic;
	margin: 0;
}

@media (max-width: 960px) {
	.prime-csr-stories__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.prime-csr-stories__grid > :nth-child(3) { display: none; }
}
@media (max-width: 600px) {
	.prime-csr-stories__grid { grid-template-columns: 1fr; }
	.prime-csr-stories__grid > :nth-child(3) { display: block; }
}

/* ---- Activity Gallery ------------------------------------------- */
.prime-csr-gallery {
	background: var(--prime-warm-white, #FFFCFB);
	padding: clamp(60px, 8vw, 120px) var(--section-px, clamp(20px, 5vw, 60px));
}
.prime-csr-gallery__inner {
	max-width: 1280px;
	margin: 0 auto;
}
.prime-csr-gallery__head {
	display: flex;
	flex-direction: column;
	gap: 12px;
	margin-bottom: 40px;
}
.prime-csr-gallery__eyebrow {
	font-family: 'Montserrat', sans-serif;
	font-weight: 600;
	font-size: 11px;
	letter-spacing: 0.35em;
	text-transform: uppercase;
	color: var(--prime-gold, #C9AB4C);
	padding-left: 40px;
	position: relative;
}
.prime-csr-gallery__eyebrow::before {
	content: "";
	position: absolute;
	left: 0;
	top: 50%;
	transform: translateY(-50%);
	width: 28px;
	height: 2px;
	background: var(--prime-gold, #C9AB4C);
}
.prime-csr-gallery__title {
	font-family: 'Cormorant Garamond', Georgia, serif;
	font-weight: 300;
	font-size: clamp(28px, 3.2vw, 40px);
	line-height: 1.1;
	letter-spacing: -0.015em;
	color: var(--prime-blue, #003366);
	margin: 0;
}
.prime-csr-gallery__title em { font-style: italic; }
.prime-csr-gallery__grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 18px;
}
.prime-csr-gallery__tile {
	position: relative;
	display: block;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	text-decoration: none;
	color: var(--prime-warm-white, #FFFCFB);
	transition: transform 0.3s ease;
}
.prime-csr-gallery__tile:hover { transform: translateY(-3px); }
.prime-csr-gallery__tile-image {
	position: absolute;
	inset: 0;
	background-size: cover;
	background-position: center;
	transition: transform 0.5s ease;
	z-index: 0;
}
.prime-csr-gallery__tile:hover .prime-csr-gallery__tile-image { transform: scale(1.05); }
.prime-csr-gallery__tile-overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(12, 12, 14, 0.1) 0%, rgba(12, 12, 14, 0.72) 100%);
	z-index: 1;
}
.prime-csr-gallery__tile-caption {
	position: absolute;
	left: 16px;
	right: 16px;
	bottom: 16px;
	z-index: 2;
	display: flex;
	flex-direction: column;
	gap: 4px;
	text-shadow: 0 1px 6px rgba(0, 0, 0, 0.45);
}
.prime-csr-gallery__tile-date {
	font-family: 'Montserrat', sans-serif;
	font-weight: 600;
	font-size: 10px;
	letter-spacing: 0.3em;
	text-transform: uppercase;
	color: var(--prime-gold, #C9AB4C);
}
.prime-csr-gallery__tile-title {
	font-family: 'Cormorant Garamond', Georgia, serif;
	font-style: italic;
	font-weight: 400;
	font-size: 17px;
	line-height: 1.2;
	color: var(--prime-warm-white, #FFFCFB);
}
@media (max-width: 900px) {
	.prime-csr-gallery__grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
}

/* ---- CTA: Be Part of the Change -------------------------------- */
.prime-csr-cta {
	/* Background recipe mirrored from the Impact section (which was
	   itself ported from .prime-cta-banner): deep navy base, fine
	   gold gridlines, and a centred radial vignette for depth. */
	background-color: #0c1b38;
	background-image:
		linear-gradient(rgba(201, 171, 76, 0.12) 1px, transparent 1px),
		linear-gradient(90deg, rgba(201, 171, 76, 0.12) 1px, transparent 1px);
	background-size: 72px 72px;
	background-position: center center;
	padding: clamp(60px, 7vw, 96px) var(--section-px, clamp(20px, 5vw, 60px));
	color: var(--prime-warm-white, #FFFCFB);
	position: relative;
	overflow: hidden;
}
.prime-csr-cta::before {
	content: "";
	position: absolute;
	inset: 0;
	background: radial-gradient(ellipse at center, rgba(12, 27, 56, 0) 0%, rgba(12, 27, 56, 0.50) 75%, rgba(12, 27, 56, 0.80) 100%);
	pointer-events: none;
	z-index: 1;
}
.prime-csr-cta__inner {
	max-width: 1280px;
	margin: 0 auto;
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
	gap: clamp(40px, 6vw, 80px);
	align-items: center;
	position: relative;
	z-index: 2;
}
.prime-csr-cta__content { max-width: 460px; }
.prime-csr-cta__eyebrow {
	font-family: var(--font-body, 'Montserrat', sans-serif);
	font-weight: 500;
	font-size: 12px;
	letter-spacing: 0.28em;
	text-transform: uppercase;
	color: var(--prime-gold, #C9AB4C);
	margin: 0 0 24px;
	display: inline-flex;
	align-items: center;
	gap: 16px;
}
.prime-csr-cta__eyebrow-rule {
	display: inline-block;
	width: 48px;
	height: 1px;
	background: var(--prime-gold, #C9AB4C);
}
/* CTA banner heading — matches the homepage .prime-cta-banner__heading
   pattern: italic Cormorant in warm-white, no gold accent. Other
   CTA bands on the site use the same all-white italic treatment so
   this stays uniform across the design system. */
.prime-csr-cta__heading {
	font-family: var(--font-heading, 'Cormorant Garamond', Georgia, serif);
	font-weight: 300;
	font-style: italic;
	font-size: clamp(32px, 3.8vw, 52px);
	line-height: 1.1;
	letter-spacing: -0.015em;
	color: var(--prime-warm-white, #FFFCFB);
	margin: 0;
}
.prime-csr-cta__heading em {
	/* No colour change — em inherits the parent warm-white so a
	   heading wrapped fully in <em> doesn't read as a gold block. */
	font-style: italic;
	font-weight: inherit;
	color: inherit;
}
.prime-csr-cta__actions {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 16px;
}
.prime-csr-cta__card {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 14px;
	padding: 24px 16px 20px;
	background: transparent;
	color: var(--prime-warm-white, #FFFCFB);
	text-decoration: none;
	text-align: center;
	transition: transform 0.25s ease, color 0.25s ease;
}
.prime-csr-cta__card:hover {
	transform: translateY(-3px);
	color: var(--prime-gold, #C9AB4C);
}
.prime-csr-cta__card-icon {
	color: var(--prime-gold, #C9AB4C);
	display: inline-flex;
	align-items: center;
	justify-content: center;
}
.prime-csr-cta__card-icon svg { width: 40px; height: 40px; }
.prime-csr-cta__card-label {
	font-family: var(--font-body, 'Montserrat', sans-serif);
	font-weight: 600;
	font-size: 12px;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	line-height: 1.4;
	max-width: 18ch;
}
.prime-csr-cta__card-rule {
	display: block;
	width: 32px;
	height: 2px;
	background: var(--prime-gold, #C9AB4C);
	transition: width 0.25s ease;
}
.prime-csr-cta__card:hover .prime-csr-cta__card-rule { width: 56px; }

@media (max-width: 960px) {
	.prime-csr-cta__inner {
		grid-template-columns: 1fr;
		gap: 40px;
	}
	.prime-csr-cta__content { max-width: none; }
}
@media (max-width: 560px) {
	.prime-csr-cta__actions { grid-template-columns: 1fr; gap: 12px; }
}

/* ==================================================================
 * CSR Activity Detail page
 * ================================================================== */

/* ---- Breadcrumb ribbon ---- */
.prime-csr-activity__ribbon {
	background: var(--prime-warm-white, #FFFCFB);
	border-bottom: 1px solid rgba(0, 51, 102, 0.08);
	padding: 92px 24px 20px;
}
.prime-csr-activity__ribbon-inner {
	max-width: 1280px;
	margin: 0 auto;
}
.prime-csr-activity__crumb {
	font-family: 'Montserrat', sans-serif;
	font-weight: 500;
	font-size: 11px;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: rgba(27, 29, 30, 0.55);
	display: inline-flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
}
.prime-csr-activity__crumb a {
	color: var(--prime-blue, #003366);
	text-decoration: none;
	transition: color 0.2s ease;
}
.prime-csr-activity__crumb a:hover { color: var(--prime-gold, #C9AB4C); }
.prime-csr-activity__crumb span[aria-hidden="true"] {
	color: rgba(201, 171, 76, 0.5);
	letter-spacing: 0;
}

/* ---- Masthead ---- */
.prime-csr-activity__masthead {
	background: var(--prime-warm-white, #FFFCFB);
	padding: 40px 24px 24px;
}
.prime-csr-activity__masthead-inner {
	max-width: 1280px;
	margin: 0 auto;
	display: flex;
	flex-direction: column;
	gap: 18px;
	align-items: flex-start;
}
.prime-csr-activity__chips {
	display: inline-flex;
	flex-wrap: wrap;
	gap: 10px;
}
.prime-csr-activity__chip {
	display: inline-flex;
	align-items: center;
	padding: 6px 14px;
	font-family: 'Montserrat', sans-serif;
	font-weight: 600;
	font-size: 10.5px;
	letter-spacing: 0.25em;
	text-transform: uppercase;
}
.prime-csr-activity__chip--pillar {
	background: var(--prime-gold, #C9AB4C);
	color: var(--prime-deep-ink, #0C0C0E);
}
.prime-csr-activity__chip--date,
.prime-csr-activity__chip--location {
	background: transparent;
	color: rgba(27, 29, 30, 0.65);
	border: 1px solid rgba(0, 51, 102, 0.2);
}
.prime-csr-activity__title {
	font-family: 'Cormorant Garamond', Georgia, serif;
	font-weight: 300;
	font-size: clamp(38px, 5vw, 64px);
	line-height: 1.05;
	letter-spacing: -0.022em;
	color: var(--prime-blue, #003366);
	margin: 0;
}
.prime-csr-activity__title em { font-style: italic; }
.prime-csr-activity__lede {
	font-family: 'Cormorant Garamond', Georgia, serif;
	font-style: italic;
	font-size: clamp(18px, 1.6vw, 22px);
	line-height: 1.5;
	color: rgba(27, 29, 30, 0.72);
	max-width: 62ch;
	margin: 6px 0 0;
}

/* ---- Hero image ---- */
.prime-csr-activity__hero {
	max-width: 1280px;
	margin: 24px auto 0;
	padding: 0 24px;
}
.prime-csr-activity__hero-frame {
	position: relative;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	background: var(--prime-gray, #1B1D1E);
	box-shadow: 0 24px 60px -30px rgba(0, 51, 102, 0.4);
}
.prime-csr-activity__hero-frame img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* ---- Body + Sidebar ---- */
.prime-csr-activity__body {
	background: var(--prime-warm-white, #FFFCFB);
	padding: 56px 24px 48px;
}
.prime-csr-activity__body-inner {
	max-width: 1280px;
	margin: 0 auto;
	display: grid;
	grid-template-columns: 1.6fr 1fr;
	gap: 64px;
	align-items: start;
}
.prime-csr-activity__body-main {
	font-family: 'Montserrat', sans-serif;
	font-size: 17px;
	line-height: 1.85;
	color: var(--prime-gray, #1B1D1E);
	max-width: 68ch;
}
.prime-csr-activity__body-main p {
	margin: 0 0 22px;
}
.prime-csr-activity__body-main p:first-child::first-letter {
	font-family: 'Cormorant Garamond', Georgia, serif;
	font-style: italic;
	font-weight: 300;
	font-size: 62px;
	line-height: 0.9;
	color: var(--prime-gold, #C9AB4C);
	float: left;
	padding: 4px 12px 0 0;
}
.prime-csr-activity__partners {
	margin-top: 36px;
	padding-top: 28px;
	border-top: 1px solid rgba(0, 51, 102, 0.12);
}
.prime-csr-activity__partners-label {
	display: inline-block;
	font-family: 'Montserrat', sans-serif;
	font-weight: 600;
	font-size: 10.5px;
	letter-spacing: 0.35em;
	text-transform: uppercase;
	color: var(--prime-gold, #C9AB4C);
	margin-bottom: 10px;
}
.prime-csr-activity__partners-list {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 6px;
}
.prime-csr-activity__partners-list li {
	font-family: 'Cormorant Garamond', Georgia, serif;
	font-style: italic;
	font-size: 17px;
	line-height: 1.4;
	color: var(--prime-blue, #003366);
}

/* Stats sidebar */
.prime-csr-activity__sidebar {
	position: sticky;
	top: 120px;
}
.prime-csr-activity__stats {
	background: var(--prime-gray, #1B1D1E);
	border: 1px solid rgba(201, 171, 76, 0.3);
	padding: 28px 24px 32px;
	position: relative;
}
.prime-csr-activity__stats::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 3px;
	background: var(--prime-gold, #C9AB4C);
}
.prime-csr-activity__stats-head {
	padding-bottom: 16px;
	margin-bottom: 4px;
	border-bottom: 1px solid rgba(201, 171, 76, 0.3);
}
.prime-csr-activity__stats-eyebrow {
	font-family: 'Montserrat', sans-serif;
	font-weight: 600;
	font-size: 11px;
	letter-spacing: 0.35em;
	text-transform: uppercase;
	color: var(--prime-gold, #C9AB4C);
}
.prime-csr-activity__stats-title {
	font-family: 'Cormorant Garamond', Georgia, serif;
	font-weight: 300;
	font-size: 24px;
	line-height: 1.15;
	color: var(--prime-warm-white, #FFFCFB);
	margin: 4px 0 0;
}
.prime-csr-activity__stats-title em { font-style: italic; }
.prime-csr-activity__stats-list {
	list-style: none;
	padding: 0;
	margin: 0;
}
.prime-csr-activity__stats-item {
	padding: 18px 0;
	border-bottom: 1px solid rgba(255, 252, 251, 0.08);
	display: flex;
	flex-direction: column;
	gap: 6px;
}
.prime-csr-activity__stats-item:last-child { border-bottom: none; padding-bottom: 0; }
.prime-csr-activity__stats-num {
	font-family: 'Bebas Neue', 'Impact', sans-serif;
	font-size: 38px;
	line-height: 1;
	color: var(--prime-gold, #C9AB4C);
	letter-spacing: 0.04em;
}
.prime-csr-activity__stats-label {
	font-family: 'Montserrat', sans-serif;
	font-weight: 500;
	font-size: 10.5px;
	letter-spacing: 0.3em;
	text-transform: uppercase;
	color: rgba(255, 252, 251, 0.68);
}

@media (max-width: 900px) {
	.prime-csr-activity__body-inner { grid-template-columns: 1fr; gap: 36px; }
	.prime-csr-activity__sidebar { position: static; }
}

/* ---- Moments carousel (activity-day gallery) ---- */
.prime-csr-moments {
	background: var(--prime-warm-white, #FFFCFB);
	padding: 56px 24px 72px;
}
.prime-csr-moments__inner {
	max-width: 1280px;
	margin: 0 auto;
}
.prime-csr-moments__head {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: 20px;
	margin-bottom: 36px;
}
.prime-csr-moments__head-copy {
	display: flex;
	flex-direction: column;
	gap: 10px;
	max-width: 64ch;
}
.prime-csr-moments__eyebrow {
	font-family: 'Montserrat', sans-serif;
	font-weight: 600;
	font-size: 11px;
	letter-spacing: 0.35em;
	text-transform: uppercase;
	color: var(--prime-gold, #C9AB4C);
	padding-left: 40px;
	position: relative;
}
.prime-csr-moments__eyebrow::before {
	content: "";
	position: absolute;
	left: 0;
	top: 50%;
	transform: translateY(-50%);
	width: 28px;
	height: 2px;
	background: var(--prime-gold, #C9AB4C);
}
.prime-csr-moments__title {
	font-family: 'Cormorant Garamond', Georgia, serif;
	font-weight: 300;
	font-size: clamp(28px, 3.2vw, 40px);
	line-height: 1.1;
	color: var(--prime-blue, #003366);
	margin: 0;
	letter-spacing: -0.015em;
}
.prime-csr-moments__title em { font-style: italic; }
.prime-csr-moments__sub {
	font-family: 'Cormorant Garamond', Georgia, serif;
	font-style: italic;
	font-size: 18px;
	line-height: 1.5;
	color: rgba(27, 29, 30, 0.82);
	margin: 4px 0 0;
}

/* Controls (counter + prev/next) */
.prime-csr-moments__controls {
	display: inline-flex;
	align-items: center;
	gap: 14px;
	padding-bottom: 6px;
}
.prime-csr-moments__counter {
	font-family: 'Cormorant Garamond', Georgia, serif;
	font-style: italic;
	font-weight: 400;
	font-size: 18px;
	color: var(--prime-blue, #003366);
	letter-spacing: 0;
}
.prime-csr-moments__counter [data-prime-moments-current] {
	color: var(--prime-gold, #C9AB4C);
	font-weight: 500;
	font-size: 20px;
}
.prime-csr-moments__counter-sep {
	margin: 0 6px;
	color: rgba(0, 51, 102, 0.35);
}
.prime-csr-moments__nav,
button.prime-csr-moments__nav {
	width: 44px !important;
	height: 44px !important;
	padding: 0 !important;
	border: 1px solid var(--prime-blue, #003366) !important;
	background: var(--prime-blue, #003366) !important;
	color: var(--prime-warm-white, #FFFCFB) !important;
	cursor: pointer !important;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	border-radius: 0 !important;
	transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease, transform 0.2s ease !important;
	font: inherit !important;
	letter-spacing: 0 !important;
	text-transform: none !important;
	box-shadow: 0 4px 14px -6px rgba(0, 51, 102, 0.35) !important;
	min-width: 0 !important;
	max-width: 44px !important;
	line-height: 1 !important;
}
button.prime-csr-moments__nav:hover:not([disabled]) {
	background: var(--prime-gold, #C9AB4C) !important;
	border-color: var(--prime-gold, #C9AB4C) !important;
	color: var(--prime-deep-ink, #0C0C0E) !important;
	transform: translateY(-2px);
}
button.prime-csr-moments__nav[disabled] {
	opacity: 0.35;
	cursor: not-allowed;
	background: transparent !important;
	color: var(--prime-blue, #003366) !important;
}
.prime-csr-moments__nav svg {
	width: 18px !important;
	height: 18px !important;
	display: block !important;
	stroke-width: 2 !important;
}
.prime-csr-moments__nav svg {
	width: 16px !important;
	height: 16px !important;
	display: block !important;
}

/* Carousel track (horizontal scroll-snap) */
.prime-csr-moments__carousel {
	position: relative;
	outline: none;
}
.prime-csr-moments__carousel:focus-visible {
	outline: 2px solid var(--prime-gold, #C9AB4C);
	outline-offset: 6px;
}
.prime-csr-moments__track {
	list-style: none;
	padding: 0;
	margin: 0;
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: calc((100% - 56px) / 3); /* 3 visible, 28px gap between */
	gap: 28px;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	scrollbar-width: none;
	-ms-overflow-style: none;
	padding-bottom: 6px;
}
.prime-csr-moments__track::-webkit-scrollbar { display: none; }
.prime-csr-moments__slide {
	scroll-snap-align: start;
	min-width: 0;
}
.prime-csr-moments__tile {
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 14px;
	position: relative;
}
.prime-csr-moments__tile-num {
	font-family: 'Cormorant Garamond', Georgia, serif;
	font-style: italic;
	font-weight: 300;
	font-size: 22px;
	line-height: 1;
	color: rgba(201, 171, 76, 0.75);
	letter-spacing: -0.01em;
	padding-left: 48px;
	position: relative;
}
.prime-csr-moments__tile-num::before {
	content: "";
	position: absolute;
	left: 0;
	top: 50%;
	transform: translateY(-50%);
	width: 36px;
	height: 1px;
	background: rgba(201, 171, 76, 0.55);
}
.prime-csr-moments__tile-frame {
	position: relative;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	background: var(--prime-gray, #1B1D1E);
	box-shadow: 0 16px 40px -26px rgba(0, 51, 102, 0.3);
}
.prime-csr-moments__tile-frame img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 0.55s ease, filter 0.3s ease;
	filter: saturate(0.92) brightness(0.98);
}
.prime-csr-moments__tile:hover .prime-csr-moments__tile-frame img {
	transform: scale(1.04);
	filter: saturate(1) brightness(1);
}
.prime-csr-moments__tile-overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(12, 12, 14, 0) 60%, rgba(12, 12, 14, 0.22) 100%);
	z-index: 1;
	transition: opacity 0.3s ease;
}
.prime-csr-moments__tile:hover .prime-csr-moments__tile-overlay { opacity: 0.4; }
.prime-csr-moments__tile-caption {
	font-family: 'Cormorant Garamond', Georgia, serif;
	font-style: italic;
	font-size: 16px;
	line-height: 1.5;
	color: rgba(27, 29, 30, 0.88);
	margin: 0;
	padding-left: 48px;
	position: relative;
	max-width: 38ch;
}
.prime-csr-moments__tile-caption::before {
	content: "";
	position: absolute;
	left: 0;
	top: 10px;
	width: 36px;
	height: 1px;
	background: rgba(0, 51, 102, 0.15);
}
/* Progress bar under the carousel */
.prime-csr-moments__progress {
	margin-top: 20px;
	height: 2px;
	background: rgba(0, 51, 102, 0.08);
	overflow: hidden;
	position: relative;
}
.prime-csr-moments__progress-bar {
	position: absolute;
	inset: 0;
	background: var(--prime-gold, #C9AB4C);
	transform: scaleX(0.08);
	transform-origin: left center;
	transition: transform 0.25s ease;
}

@media (max-width: 960px) {
	.prime-csr-moments__track { grid-auto-columns: calc((100% - 20px) / 2); gap: 20px; }
}
@media (max-width: 600px) {
	.prime-csr-moments__track { grid-auto-columns: 100%; gap: 20px; }
	.prime-csr-moments__tile-num,
	.prime-csr-moments__tile-caption { padding-left: 40px; }
	.prime-csr-moments__head { align-items: flex-start; }
}

/* ---- Related activities ---- */
.prime-csr-activity__related {
	background: var(--prime-warm-white, #FFFCFB);
	padding: 48px 24px 64px;
	border-top: 1px solid rgba(0, 51, 102, 0.08);
}
.prime-csr-activity__related-inner {
	max-width: 1280px;
	margin: 0 auto;
}
.prime-csr-activity__related-head {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: 16px;
	margin-bottom: 28px;
	padding-bottom: 16px;
	border-bottom: 1px solid rgba(0, 51, 102, 0.1);
	position: relative;
}
.prime-csr-activity__related-head::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: -1px;
	width: 56px;
	height: 2px;
	background: var(--prime-gold, #C9AB4C);
}
.prime-csr-activity__related-eyebrow {
	display: block;
	font-family: 'Montserrat', sans-serif;
	font-weight: 600;
	font-size: 11px;
	letter-spacing: 0.35em;
	text-transform: uppercase;
	color: var(--prime-gold, #C9AB4C);
}
.prime-csr-activity__related-title {
	font-family: 'Cormorant Garamond', Georgia, serif;
	font-weight: 300;
	font-size: clamp(26px, 2.8vw, 36px);
	line-height: 1.1;
	color: var(--prime-blue, #003366);
	margin: 4px 0 0;
}
.prime-csr-activity__related-title em { font-style: italic; }
.prime-csr-activity__related-all {
	font-family: 'Montserrat', sans-serif;
	font-weight: 600;
	font-size: 11px;
	letter-spacing: 0.25em;
	text-transform: uppercase;
	color: var(--prime-blue, #003366);
	text-decoration: none;
	transition: color 0.2s ease;
}
.prime-csr-activity__related-all:hover { color: var(--prime-gold, #C9AB4C); }
.prime-csr-activity__related-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 20px;
}
.prime-csr-activity__related-card {
	position: relative;
	display: block;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	text-decoration: none;
	color: var(--prime-warm-white, #FFFCFB);
	transition: transform 0.3s ease;
}
.prime-csr-activity__related-card:hover { transform: translateY(-3px); }
.prime-csr-activity__related-card-image {
	position: absolute;
	inset: 0;
	background-size: cover;
	background-position: center;
	transition: transform 0.5s ease;
	z-index: 0;
}
.prime-csr-activity__related-card:hover .prime-csr-activity__related-card-image { transform: scale(1.05); }
.prime-csr-activity__related-card-overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(12, 12, 14, 0.15) 0%, rgba(12, 12, 14, 0.75) 100%);
	z-index: 1;
}
.prime-csr-activity__related-card-body {
	position: absolute;
	left: 20px;
	right: 20px;
	bottom: 20px;
	z-index: 2;
	display: flex;
	flex-direction: column;
	gap: 4px;
	text-shadow: 0 1px 6px rgba(0, 0, 0, 0.45);
}
.prime-csr-activity__related-card-pillar {
	font-family: 'Montserrat', sans-serif;
	font-weight: 600;
	font-size: 10px;
	letter-spacing: 0.3em;
	text-transform: uppercase;
	color: var(--prime-gold, #C9AB4C);
}
.prime-csr-activity__related-card-title {
	font-family: 'Cormorant Garamond', Georgia, serif;
	font-style: italic;
	font-weight: 400;
	font-size: 22px;
	line-height: 1.15;
}
.prime-csr-activity__related-card-meta {
	font-family: 'Montserrat', sans-serif;
	font-size: 11px;
	color: rgba(255, 252, 251, 0.78);
	letter-spacing: 0.05em;
}
@media (max-width: 900px) {
	.prime-csr-activity__related-grid { grid-template-columns: 1fr; }
}

/* ============================================================ *
 *  Elementor kit specificity overrides
 *
 *  When CSR is rendered via Elementor widgets, the body gets the
 *  `.elementor-kit-8` class and Elementor's default heading colors
 *  (h2 → PRIME Blue, h3 → PRIME Gray) cascade into our dark-section
 *  headings. These overrides restore the intended warm-white text
 *  on dark backgrounds. Specificity bumped via `body` prefix (matches
 *  `.elementor-kit-8 h2` at 0,0,1,1) and `!important` for safety.
 * ============================================================ */
/* Dark-background headings — restore warm-white overruling Elementor kit. */
body .prime-csr-impact__title,
body .prime-csr-commitment__title,
body .prime-csr-cta__heading,
body .prime-cta-banner.prime-csr-cta .prime-cta-banner__heading {
	color: var(--prime-warm-white, #FFFCFB) !important;
}
/* Light-background headings on the redesigned Pillars section.
   Match the homepage reference: section H2 → PRIME blue italic
   Cormorant; card titles → italic Cormorant in deep ink.
   The Elementor kit's `.elementor-page h3 { Montserrat 600 }` rule
   has 0,0,1,1 specificity, so we beat it with body.elementor-kit-8
   (0,0,2,0) — note `body.elementor-kit-8` is one element, no space. */
body.elementor-kit-8 .prime-csr-pillars__title,
body .prime-csr-pillars__title {
	color: var(--prime-blue, #003366) !important;
	font-family: 'Cormorant Garamond', Georgia, serif !important;
	font-style: italic !important;
	font-weight: 300 !important;
}
body.elementor-kit-8 .prime-csr-pillar__name,
body .prime-csr-pillar__name {
	color: var(--prime-deep-ink, #0C0C0E) !important;
	font-family: 'Cormorant Garamond', Georgia, serif !important;
	font-style: italic !important;
	font-weight: 300 !important;
	font-size: 24px !important;
	line-height: 1.2 !important;
}
body.elementor-kit-8 .prime-csr-pillar__desc,
body .prime-csr-pillar__desc {
	color: rgba(27, 29, 30, 0.78) !important;
}
/* Pillar Learn More — force PRIME blue (matches .prime-service-card__link
   on the homepage) since Elementor's a-tag default could re-paint it. */
body.elementor-kit-8 a.prime-csr-pillar__link,
body a.prime-csr-pillar__link {
	color: var(--prime-blue, #003366) !important;
}
body.elementor-kit-8 a.prime-csr-pillar__link:hover,
body a.prime-csr-pillar__link:hover {
	color: var(--prime-gold, #C9AB4C) !important;
}

/* Impact section (dark blue) — force every text element to readable
   colours so Elementor kit's blue-on-everything h2/p/a defaults can't
   make text invisible on the dark blue background. */
body.elementor-kit-8 .prime-csr-impact__eyebrow,
body .prime-csr-impact__eyebrow {
	color: var(--prime-gold, #C9AB4C) !important;
}
body.elementor-kit-8 .prime-csr-impact__body,
body .prime-csr-impact__body {
	color: rgba(255, 252, 251, 0.78) !important;
}
body.elementor-kit-8 .prime-csr-impact__cta,
body a.prime-csr-impact__cta,
body .prime-csr-impact__cta {
	color: var(--prime-warm-white, #FFFCFB) !important;
}
body.elementor-kit-8 .prime-csr-impact__cta:hover,
body a.prime-csr-impact__cta:hover {
	color: var(--prime-deep-ink, #0C0C0E) !important;
}
body.elementor-kit-8 .prime-csr-impact__num,
body .prime-csr-impact__num,
body.elementor-kit-8 .prime-csr-impact__num .prime-stats__number,
body .prime-csr-impact__num .prime-stats__number {
	color: var(--prime-gold, #C9AB4C) !important;
}
body.elementor-kit-8 .prime-csr-impact__label,
body .prime-csr-impact__label {
	color: rgba(255, 252, 251, 0.82) !important;
}
body.elementor-kit-8 .prime-csr-impact__icon,
body .prime-csr-impact__icon {
	color: var(--prime-gold, #C9AB4C) !important;
}

/* CTA action-card section (dark blue, three icon cards) — same
   problem as Impact: kit forces blue on h2/p/a so card labels can
   render invisible. Force readable colours. */
body.elementor-kit-8 .prime-csr-cta__eyebrow,
body .prime-csr-cta__eyebrow {
	color: var(--prime-gold, #C9AB4C) !important;
}
body.elementor-kit-8 .prime-csr-cta__card,
body a.prime-csr-cta__card,
body .prime-csr-cta__card {
	color: var(--prime-warm-white, #FFFCFB) !important;
}
body.elementor-kit-8 .prime-csr-cta__card:hover,
body a.prime-csr-cta__card:hover {
	color: var(--prime-gold, #C9AB4C) !important;
}
body.elementor-kit-8 .prime-csr-cta__card-label,
body .prime-csr-cta__card-label {
	color: inherit !important;
}
body.elementor-kit-8 .prime-csr-cta__card-icon,
body .prime-csr-cta__card-icon {
	color: var(--prime-gold, #C9AB4C) !important;
}
/* Hero heading font-size — Elementor kit injects an h2 size from the
   DB (~48px) with high specificity. Force our larger hero size so
   the CSR title matches the homepage hero (72px) at the design max. */
body .prime-csr-commitment__title {
	font-size: clamp(44px, 5vw, 72px) !important;
	line-height: 1.05 !important;
}
/* Italic emphasis inside dark-section headings must stay PRIME Gold. */
body .prime-csr-commitment__title em,
body .prime-csr-impact__title em {
	color: var(--prime-gold, #C9AB4C) !important;
	font-style: italic !important;
}
/* CTA heading em inherits warm-white from its parent — no gold
   override so a fully-em-wrapped heading reads uniformly white,
   matching the other dark-section CTA banners on the site. */
body .prime-csr-cta__heading em {
	color: inherit !important;
	font-style: italic !important;
}
/* Body copy on the commitment / hero section + secondary button text:
   Elementor kit colours <p> and <a> with PRIME Blue, invisible on the
   blue background. Force warm-white. */
body .prime-csr-commitment__body,
body .prime-csr-commitment__body p,
body .prime-csr-commitment__btn--secondary,
body a.prime-csr-commitment__btn--secondary {
	color: var(--prime-warm-white, #FFFCFB) !important;
}
body .prime-csr-commitment__btn--primary,
body a.prime-csr-commitment__btn--primary {
	color: var(--prime-deep-ink, #0C0C0E) !important;
}
/* Eyebrow stays gold even when an `a` ancestor styles it blue. */
body .prime-csr-commitment__eyebrow {
	color: var(--prime-gold, #C9AB4C) !important;
}
/* Light-background headings — restore PRIME Blue overruling Elementor kit
   (Elementor h2 default is also blue, but be explicit so any future kit
   change doesn't silently flip them). */
body .prime-csr-intro__title,
body .prime-csr-gallery__title {
	color: var(--prime-blue, #003366) !important;
}
/* Pillar name typography (Elementor kit overrides h3 to Montserrat 18px;
   restore Cormorant italic 24px to match original design). */
body .prime-csr-pillar__name {
	font-family: 'Cormorant Garamond', Georgia, serif !important;
	font-style: italic !important;
	font-weight: 300 !important;
	font-size: 24px !important;
}

/* ============================================================ *
 *  Full-bleed override for Elementor-rendered CSR sections
 *  (mirrors the pattern in prime-career-form.css that's proven to
 *  work — applies 100vw + negative margins to the widget's inner
 *  <section>, then re-centers the .__inner div with auto margins.)
 * ============================================================ */
.elementor-widget-prime_csr_philosophy > .elementor-widget-container > .prime-csr-intro,
.elementor-widget-prime_csr_pillars    > .elementor-widget-container > .prime-csr-pillars,
.elementor-widget-prime_csr_impact     > .elementor-widget-container > .prime-csr-impact,
.elementor-widget-prime_csr_gallery    > .elementor-widget-container > .prime-csr-gallery,
.elementor-widget-prime_csr_cta        > .elementor-widget-container > .prime-cta-banner,
.elementor-widget-prime_leader_spotlight > .elementor-widget-container > .prime-leader-featured {
	position: relative;
	left: 50%;
	right: 50%;
	width: 100vw;
	max-width: 100vw;
	margin-left: -50vw !important;
	margin-right: -50vw !important;
	box-sizing: border-box;
}
/* Re-center inner content (Elementor flex layout can break margin: 0 auto). */
.elementor-widget-prime_csr_philosophy .prime-csr-intro__inner,
.elementor-widget-prime_csr_pillars    .prime-csr-pillars__inner,
.elementor-widget-prime_csr_impact     .prime-csr-impact__inner,
.elementor-widget-prime_csr_gallery    .prime-csr-gallery__inner,
.elementor-widget-prime_csr_cta        .prime-cta-banner__inner,
.elementor-widget-prime_leader_spotlight .prime-leader-featured__inner {
	margin-left: auto !important;
	margin-right: auto !important;
}
.elementor-element.elementor-widget-prime_csr_philosophy,
.elementor-element.elementor-widget-prime_csr_pillars,
.elementor-element.elementor-widget-prime_csr_impact,
.elementor-element.elementor-widget-prime_csr_gallery,
.elementor-element.elementor-widget-prime_csr_cta,
.elementor-element.elementor-widget-prime_leader_spotlight {
	margin-top: 0;
	margin-bottom: 0;
}