/* Impact Lab page — hero section.
   Reduced-height hero (a "portion of the page", not the homepage redesign's
   full-100vh treatment, and taller than the site's default title-only page
   banner) so it needs its own scoped stylesheet rather than reusing either. */

.impact-hero {
	position: relative;
	min-height: 30vh;
	display: flex;
	align-items: flex-end;
	overflow: hidden;
	background: var(--blue);
}

/* Full-bleed breakout, sized by JS (impact-lab.js's impactLabFullBleed()),
   not CSS. Neither margin-left:calc(-50vw + 50%) nor left:50%/
   margin-left:-50vw work here: the parent theme's .corp-container (every
   page's content wrapper — see header.php) has `position: relative` set,
   which becomes the positioning context for any percentage-based left/
   right on descendants, so both CSS-only variants silently resolve against
   .corp-container's (narrower, padded) width instead of the true
   viewport. JS measures getBoundingClientRect()/innerWidth directly and
   sets exact pixel offsets, sidestepping the positioning-context issue
   entirely. This class is just a marker the JS selects — the real
   width/margin values are set inline at runtime. */
.js-full-bleed {
	position: relative;
}

.impact-hero__bg {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	z-index: 0;
}

.impact-hero__overlay {
	position: absolute;
	inset: 0;
	z-index: 1;
	background: linear-gradient(0deg, rgba(25, 22, 65, 0.55) 0%, rgba(25, 22, 65, 0.1) 60%);
	pointer-events: none;
}

.impact-hero__content {
	position: relative;
	z-index: 2;
	width: 100%;
	max-width: 100%;
	/* Match .corp-container's left/right inset (style.css:25) so the hero
	   title lines up with the page-banner-title text used on every other
	   page (e.g. About), even though this section's background breaks out
	   full-bleed while the site's other page banners don't. */
	padding: 3rem 15rem;
}

.impact-hero__title {
	font-family: BostonRegular;
	font-weight: 400;
	color: #fff;
	font-size: 4.375rem;
	line-height: 1.1;
	margin: 0 0 1.25rem;
	max-width: 80%;
}

.impact-hero__subtitle {
	font-size: 1.25rem;
	color: #fff;
	max-width: 42rem;
	line-height: 1.5;
	margin: 0 0 2rem;
}

.impact-hero__cta {
	display: inline-block;
	font-size: 1.125rem;
	font-weight: 700;
	line-height: 1.1;
	color: #fff;
	background: var(--primary);
	background-image: linear-gradient(0deg, rgb(166, 65, 32) 0%, rgb(240, 89, 40) 100%);
	padding: 1.438rem 3.188rem;
	border-radius: 100px;
	outline: none;
	transition: all 0.4s linear;
	-webkit-tap-highlight-color: transparent;
}

.impact-hero__cta:visited {
	color: #fff;
}

.impact-hero__cta:focus {
	color: #fff;
	filter: none;
}

.impact-hero__cta:hover {
	color: #fff;
	filter: brightness(1.08);
}

.impact-hero__cta:focus-visible {
	box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.6);
}

@media (max-width: 1190px) {
	.impact-hero__content {
		padding-left: 15px;
		padding-right: 15px;
	}
}

@media (max-width: 782px) {
	.impact-hero {
		min-height: 30vh;
	}

	.impact-hero__content {
		padding-top: 2rem;
		padding-bottom: 2rem;
	}

	.impact-hero__title {
		font-size: 2.6rem;
		max-width: 100%;
	}

	.impact-hero__subtitle {
		font-size: 1.05rem;
	}

	.impact-hero__cta {
		padding: 1.1rem 2.2rem;
		font-size: 1rem;
	}
}

/* Impact Lab page — content section (title + WYSIWYG editor), sits below
   the hero. Width and typography (h2/h3/li/p/pull-quote) mirror the About
   page's "Our Story" section (.page-template-about-page .section_two >
   .custom-container in style.css) so the two pages read consistently. */

.impact-content {
	padding: 4.5rem 0;
}

.impact-content > .custom-container {
	max-width: 75rem;
	padding-left: 0;
	padding-right: 0;
	margin-left: auto;
	margin-right: auto;
	text-align: left;
}

.impact-content .section-header {
	margin-bottom: 2rem;
}

.impact-content .section-header h2 {
	text-align: left;
}

.impact-content__body p {
	max-width: 100%;
	margin: 0 0 1.75rem;
	line-height: 1.7;
}

.impact-content__body ul,
.impact-content__body ol {
	text-align: left;
	margin: 0 0 1.25rem 1.25rem;
	padding: 0;
}

.impact-content__body li {
	font-size: 1.125rem;
	color: var(--blue);
	line-height: 1.5;
	margin-bottom: 0.75rem;
}

.impact-content__body ol li::marker {
	color: var(--primary);
	font-size: 1.25em;
}

/* ul bullets use an arrow glyph instead of the native disc marker — client
   requested a different icon in place of the dot; ::marker can only take a
   shape/font-based value, so the marker is disabled and a positioned
   ::before pseudo-element with a fixed-width arrow character is used
   instead so multi-line list items still align to the text, not the icon. */
.impact-content__body ul {
	list-style: none;
	margin-left: 0;
}

.impact-content__body ul li {
	position: relative;
	padding-left: 1.75rem;
}

.impact-content__body ul li::before {
	content: "\27A3";
	position: absolute;
	left: 0;
	top: -0.1em;
	color: var(--primary);
	font-size: 1.25em;
	line-height: 1.5;
}

.impact-content__body h3 {
	color: var(--primary);
	font-size: 1.5rem;
	margin: 2rem 0 0.75rem;
}

.impact-content__body h3:first-child {
	margin-top: 0;
}

.impact-content__body p.pull-quote {
	font-size: 2rem;
	font-style: italic;
	color: var(--blue);
	text-align: center;
	margin: 3.5rem auto;
	max-width: 40rem;
	line-height: 1.5;
}

@media (max-width: 1190px) {
	.impact-content > .custom-container {
		padding-left: 15px;
		padding-right: 15px;
	}
}

@media (max-width: 782px) {
	.impact-content {
		padding: 3rem 0;
	}

	.impact-content .section-header {
		margin-bottom: 1.75rem;
	}
}

/* Impact Lab page — gallery section: Swiper carousel, one slide per view,
   full-bleed (same width:100vw breakout as .impact-hero, below) with the
   section headline, per-slide title, and caption all overlaid on the image
   itself via a bottom gradient scrim — the whole section IS the image, no
   padding/contained row around it. */

.impact-gallery {
	line-height: 0;
}

/* Full-bleed breakout via JS, not CSS — see the .js-full-bleed comment
   near .impact-hero above for why. This selector just establishes the
   positioning context; the width/margin values are set inline by
   impactLabFullBleed() in impact-lab.js. */
.impact-gallery__carousel {
	position: relative;
}

/* Fixed aspect-ratio (not a viewport-height unit) so the crop stays
   consistent across different monitor/laptop aspect ratios — a vh-based
   height made the visible crop change with screen resolution. max-height
   caps it on very short/wide viewports. No border-radius now that the
   image is full-bleed rather than a contained card. */
.impact-gallery__slide {
	position: relative;
	display: block;
	width: 100%;
	aspect-ratio: 3 / 2;
	max-height: 44rem;
	overflow: hidden;
	cursor: pointer;
}

.impact-gallery__image {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.5s ease;
}

.impact-gallery__slide:hover .impact-gallery__image {
	transform: scale(1.06);
}

/* Taller/stronger than a typical card scrim (starts darkening at 20%, not
   50%) so title/text stay readable even over a bright or white-background
   photo — a flat 50%-start gradient still let light images wash out the
   text underneath it. */
.impact-gallery__overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(15, 12, 45, 0) 20%, rgba(15, 12, 45, 0.55) 65%, rgba(10, 8, 32, 0.92) 100%);
	pointer-events: none;
}

/* Left/right inset matches .impact-hero__content's (15rem desktop, 15px at
   <=1190px — see style.css's .corp-container cascade) so the on-image text
   lines up with the hero title above it. */
.impact-gallery__text {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	padding: 3rem 15rem;
}

/* Section-level headline (e.g. "Impact In Action") — now rendered on the
   image itself, above the per-slide title, instead of in a separate
   contained row before the carousel. */
.impact-gallery__headline {
	font-family: BostonBold;
	font-weight: 400;
	color: #fff;
	font-size: 1.25rem;
	line-height: 1.2;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	opacity: 0.85;
	margin: 0 0 0.75rem;
}

.impact-gallery__title {
	font-family: BostonBold;
	font-weight: 400;
	color: #fff;
	font-size: 2.5rem;
	line-height: 1.2;
	margin: 0;
}

.impact-gallery__caption {
	color: #fff;
	font-size: 1.125rem;
	line-height: 1.5;
	max-width: 100%;
	margin: 0.75rem 0 0;
	opacity: 0.9;
}

/* Overlaid on the image itself (bottom-right corner), not in a separate
   header row — only rendered in the markup when there's more than one
   slide (section-gallery.php). White icon buttons on a translucent dark
   chip since they now sit directly on a photo rather than above a light
   page background. */
.impact-gallery__nav {
	position: absolute;
	right: 15rem;
	bottom: 2rem;
	z-index: 3;
	display: flex;
	gap: 0.75rem;
}

.impact-gallery__nav-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	flex: 0 0 2.75rem;
	width: 2.75rem;
	height: 2.75rem;
	min-width: 2.75rem;
	max-width: 2.75rem;
	padding: 0;
	margin: 0;
	border-radius: 50%;
	border: none;
	background: rgba(255, 255, 255, 0.15);
	backdrop-filter: blur(4px);
	color: #fff;
	cursor: pointer;
	transition: background 0.3s ease;
	line-height: 1;
	appearance: none;
}

.impact-gallery__nav-btn svg {
	display: block;
	width: 1rem;
	height: 1rem;
	flex-shrink: 0;
}

.impact-gallery__nav-btn:hover {
	background: var(--primary);
	color: #fff;
}

.impact-gallery__nav-btn.swiper-button-disabled {
	opacity: 0.35;
	cursor: default;
	pointer-events: none;
}

.impact-gallery__pagination {
	position: absolute;
	left: 15rem;
	bottom: 2.75rem;
	z-index: 3;
	display: flex;
	align-items: center;
	gap: 0.5rem;
}

.impact-gallery__pagination .swiper-pagination-bullet {
	width: 0.5rem;
	height: 0.5rem;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.4);
	opacity: 1;
	cursor: pointer;
	transition: all 0.3s ease;
	margin: 0 !important;
}

.impact-gallery__pagination .swiper-pagination-bullet-active {
	width: 1.5rem;
	border-radius: 100px;
	background: var(--primary);
}

@media (max-width: 1190px) {
	.impact-gallery__text {
		padding-left: 15px;
		padding-right: 15px;
	}

	.impact-gallery__nav {
		right: 15px;
	}

	.impact-gallery__pagination {
		left: 15px;
	}
}

@media (max-width: 782px) {
	/* Same overlay treatment as desktop (title on the image via the
	   gradient scrim), slightly taller than desktop's 3:2 to give the
	   headline/title enough breathing room on a narrow screen. The full
	   caption is hidden here — a long caption at this width has nowhere to
	   go without crowding/overflowing the image — but it's not lost: it's
	   still passed as data-description and shown in the GLightbox caption
	   when the slide is tapped (see section-gallery.php). */
	.impact-gallery__slide {
		aspect-ratio: 4 / 5;
		max-height: 30rem;
	}

	.impact-gallery__text {
		padding: 1.5rem;
	}

	.impact-gallery__headline {
		font-size: 1rem;
	}

	.impact-gallery__title {
		font-size: 1.5rem;
	}

	/* No longer overlaid on the (now stacked, non-absolute) image — sit
	   below the carousel as their own row instead. */
	.impact-gallery__nav {
		position: static;
		justify-content: flex-end;
		padding: 1rem 1.5rem 0;
	}

	.impact-gallery__nav-btn {
		background: rgba(25, 22, 65, 0.08);
		color: var(--blue);
	}

	.impact-gallery__pagination {
		position: static;
		justify-content: center;
		padding-top: 1rem;
	}

	.impact-gallery__pagination .swiper-pagination-bullet {
		background: rgba(25, 22, 65, 0.2);
	}
}

/* Impact Lab page — team section: stacked full-width light cards, image on
   the left and name/designation/about/social links on the right. Contained
   width, same measure as the rest of the page's content column. */

.impact-team {
	padding: 3rem 0;
}

.impact-team > .custom-container {
	max-width: 75rem;
	padding-left: 0;
	padding-right: 0;
	margin-left: auto;
	margin-right: auto;
}

.impact-team .section-header {
	margin-bottom: 2.5rem;
}

.impact-team .section-header h2 {
	text-align: left;
}

.impact-team__list {
	display: flex;
	flex-direction: column;
	gap: 1.5rem;
}

.impact-team__card {
	display: flex;
	align-items: stretch;
	background: #f6f5fa;
	border-radius: 0.75rem;
	overflow: hidden;
}

.impact-team__image {
	flex: 0 0 16rem;
	max-width: 16rem;
	position: relative;
}

.impact-team__image img {
	display: block;
	width: 100%;
	height: 100%;
	min-height: 14rem;
	object-fit: cover;
}

.impact-team__info {
	flex: 1 1 auto;
	padding: 1.75rem 2.5rem;
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.impact-team__name {
	font-family: BostonBold;
	font-weight: 400;
	color: var(--blue);
	font-size: 2rem;
	line-height: 1.2;
	margin: 0 0 0.5rem;
}

.impact-team__designation {
	color: var(--primary);
	font-size: 1.125rem;
	margin: 0 0 1.25rem;
}

.impact-team__about {
	color: var(--blue);
	font-size: 1.0625rem;
	line-height: 1.6;
	opacity: 0.85;
	margin: 0 0 1.25rem;
}

.impact-team__social {
	display: flex;
	gap: 0.75rem;
}

.impact-team__social-link {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 2.5rem;
	height: 2.5rem;
	border-radius: 50%;
	background: rgba(25, 22, 65, 0.08);
	color: var(--blue);
	transition: background 0.3s ease, color 0.3s ease;
}

.impact-team__social-link:hover,
.impact-team__social-link:focus {
	background: var(--primary);
	color: #fff;
}

/* The parent theme's global "a, a:visited { color: #f14e4e; }" rule
   otherwise overrides the icon color on a visited link — same recurring
   pattern fixed elsewhere in this theme (hero/CTA buttons, WhatsApp
   button). Reset back to the resting navy since this card's background is
   light, not the white-icon-on-dark treatment used before. */
.impact-team__social-link:visited {
	color: var(--blue);
}

@media (max-width: 1190px) {
	.impact-team > .custom-container {
		padding-left: 15px;
		padding-right: 15px;
	}
}

@media (max-width: 782px) {
	.impact-team {
		padding: 2rem 0;
	}

	.impact-team__card {
		flex-direction: column;
	}

	.impact-team__image {
		flex: none;
		max-width: 100%;
	}

	.impact-team__image img {
		min-height: 14rem;
	}

	.impact-team__info {
		padding: 1.5rem;
	}

	.impact-team__name {
		font-size: 1.5rem;
	}
}

/* Impact Lab page — partners section: plain wrapped grid of bare logos, no
   card/border per logo (deliberately different from the site's two
   existing logo patterns, both dark-background marquees — see
   template-parts/impact-lab/section-partners.php header comment).
   Grayscale at rest, full color on hover, a common subtle touch for
   partner/client logo grids. */

.impact-partners {
	padding: 3rem 0;
}

.impact-partners > .custom-container {
	max-width: 75rem;
	padding-left: 0;
	padding-right: 0;
	margin-left: auto;
	margin-right: auto;
}

.impact-partners .section-header {
	margin-bottom: 2.5rem;
}

.impact-partners .section-header h2 {
	text-align: left;
	margin-bottom: 0.5rem;
}

.impact-partners__subheading {
	color: var(--blue);
	opacity: 0.7;
	font-size: 1.125rem;
	margin: 0;
}

.impact-partners__grid {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 3rem 4rem;
}

.impact-partners__logo {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	height: 4.5rem;
}

.impact-partners__logo img {
	display: block;
	max-height: 100%;
	max-width: 10rem;
	width: auto;
	height: auto;
	object-fit: contain;
}

@media (max-width: 1190px) {
	.impact-partners > .custom-container {
		padding-left: 15px;
		padding-right: 15px;
	}
}

@media (max-width: 782px) {
	.impact-partners {
		padding: 2rem 0;
	}

	.impact-partners__grid {
		gap: 2rem 2.5rem;
	}

	.impact-partners__logo {
		height: 3rem;
	}

	.impact-partners__logo img {
		max-width: 6.5rem;
	}
}

/* Impact Lab page — partner profiles section: one full-width card per
   partner, stacked vertically, alternating photo-left/photo-right
   ("zig-zag") on desktop — distinct from the bare-logo .impact-partners
   grid above — see template-parts/impact-lab/section-partner-profiles.php
   header comment. */

.impact-partner-profiles {
	padding: 3rem 0;
}

.impact-partner-profiles > .custom-container {
	max-width: 75rem;
	padding-left: 0;
	padding-right: 0;
	margin-left: auto;
	margin-right: auto;
}

.impact-partner-profiles .section-header {
	margin-bottom: 2.5rem;
	/* Overrides style.css's mobile-only ".section-header {text-align:center}"
	   default, which otherwise centers this section's subheading paragraph
	   on small screens (the h2 already had its own left-align, but the
	   <p> below it did not, so it fell back to that global rule). */
	text-align: left;
}

.impact-partner-profiles .section-header h2 {
	text-align: left;
	margin-bottom: 0.5rem;
}

.impact-partner-profiles__subheading {
	color: var(--blue);
	opacity: 0.7;
	font-size: 1.125rem;
	margin: 0;
}

.impact-partner-profiles__list {
	display: flex;
	flex-direction: column;
	gap: 3rem;
}

.impact-partner-profiles__card {
	display: flex;
	align-items: center;
	gap: 3rem;
	background: #f6f5fa;
	border-radius: 1rem;
	overflow: hidden;
	padding: 2.5rem;
}

/* Zig-zag: even cards (2nd, 4th, ...) mirror the layout so photo and text
   swap sides. DOM order is unchanged (photo markup always comes first), so
   this is a purely visual swap — screen readers/keyboard order stay
   consistent regardless of which side the photo lands on visually. */
.impact-partner-profiles__card:nth-child(even) {
	flex-direction: row-reverse;
}

.impact-partner-profiles__photo {
	position: relative;
	flex: 0 0 42%;
	max-width: 42%;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	border-radius: 0.75rem;
}

.impact-partner-profiles__photo img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Title overlay: pinned to the bottom of the photo over a gradient scrim
   so it stays legible regardless of the photo's own content/contrast. */
.impact-partner-profiles__title {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	margin: 0;
	padding: 3.5rem 1.5rem 1.5rem;
	background: linear-gradient(0deg, rgba(0, 0, 0, 0.7) 0%, rgba(0, 0, 0, 0) 100%);
	color: #fff;
	font-size: 1.125rem;
	font-weight: 600;
	line-height: 1.4;
}

.impact-partner-profiles__body {
	flex: 1 1 auto;
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.impact-partner-profiles__heading {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	margin-bottom: 1.25rem;
}

.impact-partner-profiles__name {
	font-family: BostonBold;
	font-weight: 400;
	color: var(--blue);
	font-size: 1.75rem;
	line-height: 1.2;
	margin: 0;
}

.impact-partner-profiles__logo {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	height: 2.75rem;
	padding-right: 2.75rem;
}

.impact-partner-profiles__logo img {
	display: block;
	max-height: 100%;
	max-width: 7rem;
	width: auto;
	height: auto;
	object-fit: contain;
}

.impact-partner-profiles__about {
	color: var(--blue);
	font-size: 1rem;
	line-height: 1.6;
	opacity: 0.85;
	margin: 0 0 1.25rem;
}

/* Highlighted "Impact in Action" callout — fixed label + free-text body,
   boxed distinctly from the surrounding card (reference: a white rounded
   panel sitting inside the light card background). */
.impact-partner-profiles__action {
	background: #fff;
	border-radius: 0.625rem;
	padding: 1.25rem;
	margin: 0;
}

.impact-partner-profiles__action-text {
	min-width: 0;
}

.impact-partner-profiles__action-label {
	color: var(--primary);
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	margin: 0 0 0.35rem;
}

.impact-partner-profiles__action-body {
	color: var(--blue);
	font-size: 0.9375rem;
	line-height: 1.6;
	opacity: 0.9;
}

.impact-partner-profiles__action-body strong {
	color: var(--blue);
	opacity: 1;
}

@media (max-width: 1190px) {
	.impact-partner-profiles > .custom-container {
		padding-left: 15px;
		padding-right: 15px;
	}

	.impact-partner-profiles__card {
		gap: 2rem;
		padding: 2rem;
	}
}

@media (max-width: 900px) {
	.impact-partner-profiles__card,
	.impact-partner-profiles__card:nth-child(even) {
		flex-direction: column;
	}

	.impact-partner-profiles__photo {
		flex: none;
		max-width: 100%;
		aspect-ratio: 16 / 9;
	}
}

@media (max-width: 782px) {
	.impact-partner-profiles {
		padding: 2rem 0;
	}

	.impact-partner-profiles__list {
		gap: 2rem;
	}

	.impact-partner-profiles__card {
		padding: 1.5rem;
	}

	.impact-partner-profiles__heading {
		flex-wrap: wrap;
	}

	.impact-partner-profiles__name {
		font-size: 1.5rem;
	}

	.impact-partner-profiles__title {
		padding: 1.75rem 1rem 1rem;
		font-size: 0.9375rem;
	}

	.impact-partner-profiles__action {
		padding: 1rem;
	}
}

/* ==========================================================================
   "Beyond the brief" style CTA banner — ported verbatim from the homepage
   redesign's .cta-banner-redesign (assets/css/home-redesign.css), which
   isn't loaded on this template, so the ruleset is duplicated here rather
   than cross-enqueuing an entire second stylesheet for one section's CSS.
   ========================================================================== */

.cta-banner-redesign {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 6rem 0;
	overflow: hidden;
	background: #1d1b56;
}

.cta-banner-redesign__bg {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	z-index: 0;
}

.cta-banner-redesign__overlay {
	position: absolute;
	inset: 0;
	z-index: 1;
	background: linear-gradient(180deg, rgba(29, 27, 86, 0.85) 0%, rgba(3, 115, 255, 0.55) 100%);
	pointer-events: none;
}

.cta-banner-redesign__content.custom-container {
	position: relative;
	z-index: 2;
	text-align: center;
}

.cta-banner-redesign__headline {
	font-family: BostonBold;
	font-weight: 400;
	color: #fff;
	font-size: clamp(2.25rem, 4vw, 3.25rem);
	line-height: 1.15;
	margin: 0 0 1.5rem;
}

.cta-banner-redesign__body {
	max-width: 60rem;
	font-size: 1.125rem;
	line-height: 1.75;
	margin: 0 auto 2.5rem;
}

.cta-banner-redesign__body,
.cta-banner-redesign__body p {
	color: rgba(255, 255, 255, 0.85) !important;
}

.cta-banner-redesign__body p {
	margin: 0 0 1.25rem;
}

.cta-banner-redesign__body p:last-child {
	margin-bottom: 0;
}

.cta-banner-redesign__cta {
	display: inline-block;
	font-size: 1.125rem;
	font-weight: 700;
	line-height: 1.1;
	color: #fff;
	background: var(--primary);
	background-image: linear-gradient(0deg, rgb(166, 65, 32) 0%, rgb(240, 89, 40) 100%);
	padding: 1.25rem 3rem;
	border-radius: 100px;
	outline: none;
	transition: all 0.4s linear;
	-webkit-tap-highlight-color: transparent;
}

.cta-banner-redesign__cta:visited {
	color: #fff;
}

.cta-banner-redesign__cta:focus {
	color: #fff;
	filter: none;
}

.cta-banner-redesign__cta:hover {
	color: #fff;
	filter: brightness(1.08);
}

.cta-banner-redesign__cta:focus-visible {
	box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.6);
}

@media (max-width: 782px) {
	.cta-banner-redesign {
		min-height: auto;
		padding: 4rem 0;
	}

	.cta-banner-redesign__headline {
		font-size: clamp(1.875rem, 7vw, 2.5rem);
	}

	.cta-banner-redesign__body {
		font-size: 1rem;
	}

	.cta-banner-redesign__cta {
		padding: 1.1rem 2.2rem;
		font-size: 1rem;
	}
}

/* Impact Lab page — pillars section: 4-box horizontal card grid (icon,
   title, description), replacing the old plain-text "What We Do" list.
   Hover accent (left border + tinted background) borrowed from the
   homepage redesign's .systems-redesign__pointer.is-active treatment,
   applied via :hover since all content is visible at rest — nothing
   expands/collapses, so no JS needed. */

.impact-pillars {
	padding: 4.5rem 0;
}

.impact-pillars .section-header {
	margin-bottom: 2.5rem;
}

.impact-pillars .section-header:has(+ .impact-pillars__intro) {
	margin-bottom: 1rem;
}

.impact-pillars .section-header h2 {
	text-align: left;
}

.impact-pillars__intro {
	margin: 0 0 2.5rem;
	font-size: 1.125rem;
	line-height: 1.7;
	color: var(--blue);
}

.impact-pillars__grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 1.5rem;
}

.impact-pillars__card {
	padding: 2rem 1.75rem;
	border-radius: 0.75rem;
	border-left: 4px solid transparent;
	background: rgba(25, 22, 65, 0.03);
	transition: border-left-color 0.3s ease, background 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
}

.impact-pillars__card:hover {
	border-left-color: var(--primary);
	background: rgba(240, 89, 40, 0.06);
	transform: translateY(-0.25rem);
	box-shadow: 0 0.75rem 1.5rem rgba(25, 22, 65, 0.08);
}

.impact-pillars__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 3rem;
	height: 3rem;
	margin-bottom: 1.25rem;
}

/* Icons are expected to be uploaded as plain white/monochrome marks (the
   common convention for icon sets meant to sit on a dark background) — on
   this light card background that reads as barely visible, so recolor to
   the brand orange with a filter rather than relying on the source file's
   native color. brightness(0) flattens the icon to solid black first (so
   the filter chain works regardless of the uploaded file's original
   color), then invert/sepia/saturate/hue-rotate shifts that black to
   #f05928 (var(--primary)). If a future icon set uses multiple colors
   (not monochrome), this filter will flatten them too — swap back to
   plain opacity if that's ever the case. */
.impact-pillars__icon img {
	display: block;
	max-width: 100%;
	max-height: 100%;
	object-fit: contain;
	filter: brightness(0) saturate(100%) invert(46%) sepia(89%) saturate(1747%) hue-rotate(346deg) brightness(99%) contrast(94%);
	opacity: 0.85;
	transition: opacity 0.3s ease, transform 0.3s ease;
}

.impact-pillars__card:hover .impact-pillars__icon img {
	opacity: 1;
	transform: scale(1.08);
}

.impact-pillars__title {
	font-family: BostonBold;
	font-weight: 400;
	color: var(--blue);
	font-size: 1.375rem;
	line-height: 1.2;
	margin: 0 0 0.75rem;
	transition: color 0.3s ease;
}

.impact-pillars__card:hover .impact-pillars__title {
	color: var(--primary);
}

.impact-pillars__description {
	color: var(--blue);
	opacity: 0.8;
	font-size: 1rem;
	line-height: 1.6;
	margin: 0;
}

@media (max-width: 1190px) {
	.impact-pillars__grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 782px) {
	.impact-pillars {
		padding: 3rem 0;
	}

	.impact-pillars .section-header {
		margin-bottom: 1.75rem;
	}

	.impact-pillars .section-header:has(+ .impact-pillars__intro) {
		margin-bottom: 0.75rem;
	}

	.impact-pillars__intro {
		font-size: 1rem;
	}

	.impact-pillars__grid {
		grid-template-columns: 1fr;
	}

	.impact-pillars__card:hover {
		transform: none;
	}
}

/* Alternating light-tint background for white sections — same value/pattern
   as the homepage redesign's .home-alt-tint (assets/css/home-redesign.css),
   applied by each section-*.php via $args['section_index'] (see
   impact-lab-page.php). No body-class scoping needed here since this whole
   stylesheet is already conditionally enqueued only on the Impact Lab
   template (enqueue_impact_lab_assets() in functions.php). Placed at the
   end of the file so it wins by source order over each section's own
   background rule without needing !important. */
.impact-alt-tint {
	background: rgba(240, 89, 40, 0.05);
}