/* PGI Blocks — supplemental CSS for details theme.json can't express. */

/*
 * Layout utilities: hand-authored block markup can't reliably reproduce
 * Gutenberg's auto-generated layout classes/hashes (from block "layout"
 * attributes), so every section uses plain classes + this CSS instead of
 * the layout attribute system. Keeps saved HTML byte-for-byte stable.
 */
.pgi-container-wide {
	max-width: 1400px;
	margin-left: auto;
	margin-right: auto;
}

.pgi-container-narrow {
	max-width: 1066px;
	margin-left: auto;
	margin-right: auto;
}

.pgi-row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
}

.pgi-row-center {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 24px;
}

.pgi-hero-inner.pgi-row {
	gap: 40px;
}

/* Full-bleed layout: header, main, and footer sit edge-to-edge, and homepage
   sections sit edge-to-edge inside main — override WordPress's default 24px
   flow block-gap between all of them, matching the mockup. */
.wp-site-blocks > *,
.pgi-home-sections > * {
	margin-block-start: 0 !important;
	margin-top: 0 !important;
}

/* Intro/CTA — text and leaf illustration sit side by side, not stacked */
.pgi-intro-row {
	align-items: flex-start;
}

.pgi-intro-text {
	flex: 1 1 420px;
	min-width: 0;
}

.pgi-leaf {
	flex: 0 0 260px;
	mix-blend-mode: multiply;
	margin: 0;
}

.pgi-header-row {
	display: flex;
	justify-content: flex-end;
	align-items: center;
	flex-wrap: nowrap;
	gap: 16px;
}

.pgi-header .wp-block-navigation__container {
	gap: 0;
}

.pgi-header .wp-block-navigation-item a {
	padding: 8px 7px;
	font-weight: 700;
}

.pgi-header .wp-block-navigation-item.pgi-nav-cta > a {
	border: 1px solid #259D43;
	border-radius: 30px;
	padding: 8px 22px;
	margin-left: 8px;
}

.pgi-header .wp-block-navigation-item.pgi-nav-cta > a:hover {
	background: #259D43;
	color: #fff;
}

/* Hero — hero-bg.png already holds the blobs and orbit rings, so the section
   is a cropped band of the image (full width, so it scales; the orbit circle
   stays vertically centred) and the logo + tagline are placed
   relative to it (the tagline sits inside the innermost orbit circle). */
.pgi-hero {
	position: relative;
	overflow: hidden;
	aspect-ratio: 1611 / 580;
	padding: 0 !important;
	background-image: url("../images/hero-bg.png?v=2");
	background-size: 100% auto;
	background-position: 0 78%;
	background-repeat: no-repeat;
}

.pgi-hero .pgi-hero-inner {
	position: absolute;
	inset: 0;
	display: block;
	max-width: none !important;
	margin: 0 !important;
}

.pgi-hero .pgi-hero-inner > .wp-block-image {
	position: absolute;
	left: 26%;
	top: 50%;
	transform: translate(-50%, -50%);
	margin: 0;
}

/* "just" and "livable" in the hand-lettered accent face */
.pgi-hero-tagline em {
	font-family: var(--wp--preset--font-family--accent);
	font-style: normal;
	font-weight: 600;
	font-size: 1.25em;
	line-height: 1;
	padding: 0 0.08em;
}

.pgi-hero .pgi-hero-tagline {
	position: absolute;
	left: 69%;
	top: 50%;
	transform: translate(-50%, -50%);
	width: 25%;
	margin: 0;
	text-align: center;
}

/* Hero motion (desktop): hero-bg-clean.png is the backdrop without rings;
   each ring group (hero-ring-1..5.png, built by tools/hero-motion/build.py)
   is a full-size transparent layer that turns slowly about the orbit centre.
   Mobile keeps the static hero-bg.png. */
.pgi-hero-rings {
	display: none;
}

@media (min-width: 782px) {
	.pgi-hero {
		background-image: url("../images/hero-bg-clean.png");
	}

	.pgi-hero-rings {
		display: block;
		position: absolute;
		inset: 0;
		pointer-events: none;
	}

	.pgi-ring {
		position: absolute;
		inset: 0;
		background-size: 100% auto;
		background-position: 0 78%;
		background-repeat: no-repeat;
		transform-origin: 69% 50%;
		animation: pgi-orbit 60s linear infinite;
		will-change: transform;
	}

	.pgi-ring-1 { background-image: url("../images/hero-ring-1.png"); animation-duration: 90s; }
	.pgi-ring-2 { background-image: url("../images/hero-ring-2.png"); animation-duration: 35s; animation-direction: reverse; }
	.pgi-ring-3 { background-image: url("../images/hero-ring-3.png"); animation-duration: 55s; }
	.pgi-ring-4 { background-image: url("../images/hero-ring-4.png?v=2"); animation-duration: 45s; animation-direction: reverse; }
	.pgi-ring-5 { background-image: url("../images/hero-ring-5.png?v=2"); animation-duration: 70s; }
}

@keyframes pgi-orbit {
	to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
	.pgi-ring { animation: none; }
}

@media (max-width: 781px) {
	.pgi-hero {
		aspect-ratio: auto;
		background-size: cover;
		background-position: 75% center;
		padding: 40px 24px !important;
	}

	.pgi-hero .pgi-hero-inner {
		position: static;
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 32px;
	}

	.pgi-hero .pgi-hero-inner > .wp-block-image,
	.pgi-hero .pgi-hero-tagline {
		position: static;
		transform: none;
		width: auto;
		max-width: 320px;
	}

	.pgi-hero .pgi-hero-inner > .wp-block-image img {
		max-width: 100%;
	}
}

/* Quote band photo. The inner container's width lives here, not
   in a hand-added class: the Cover block can't store custom classes on it. */
.pgi-quote-band img {
	display: block;
	width: 100%;
	height: auto;
}

.pgi-quote-band .wp-block-cover__inner-container {
	max-width: 1066px;
	margin-left: auto;
	margin-right: auto;
}

/* What We Do link list */
.pgi-wwd-list a {
	color: #3D3D3D;
	text-decoration: none;
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.02em;
}

.pgi-wwd-list {
	list-style: none;
	padding-left: 0;
}
.pgi-wwd-list a {
	display: inline-block;
	padding: 6px 16px;
	margin-left: -16px;
	border-radius: 30px;
	transition: background-color 0.15s ease;
}
.pgi-wwd-list a:hover,
.pgi-wwd-list a:focus-visible {
	background: #fff;
	text-decoration: none;
}

.pgi-wwd-list li {
	margin-bottom: 14px;
}

/* What We Do panel — the text panel sets the row height (heading + list +
   30px top/bottom padding). The photo is absolutely positioned inside its
   column so its natural aspect ratio never adds height; it just crops to fit. */
.wp-block-columns.pgi-what-we-do {
	align-items: stretch;
	column-gap: 0;
	flex-wrap: nowrap !important;
}

.pgi-what-we-do > .wp-block-column {
	min-width: 0;
}

.pgi-wwd-panel {
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.pgi-wwd-photo-col {
	position: relative;
}

.pgi-wwd-photo {
	position: absolute;
	inset: 0;
	margin: 0;
}

.pgi-wwd-photo img {
	position: absolute;
	inset: 0;
	height: 100%;
	width: 100%;
	object-fit: cover;
	display: block;
}

.pgi-wwd-list {
	margin-bottom: 0;
}

.pgi-wwd-list li:last-child {
	margin-bottom: 0;
}

/* Latest Stories cards */
.pgi-stories .wp-block-post {
	background: #fff;
	border: 1px solid rgba(61,61,61,0.08);
}

/* What We Do — fixed band height; the near-square photo is cropped to fit
   (desktop only; stacks on mobile). */
@media (min-width: 782px) {
	.pgi-what-we-do {
		min-height: 440px;
	}

	.pgi-wwd-photo img {
		object-position: center 55%;
	}
}

/* Post Growth Perspectives (Medium feed) cards */
.pgi-medium-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 28px;
}

.pgi-medium-card {
	border-radius: 15px;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	background: #fff;
	border: 1px solid rgba(61,61,61,0.08);
	color: inherit;
	text-decoration: none;
	transition: box-shadow 0.15s ease;
}

.pgi-medium-card:hover {
	box-shadow: 0 10px 26px rgba(61,61,61,0.10);
}

.pgi-medium-thumb {
	display: block;
	aspect-ratio: 3 / 2;
	overflow: hidden;
	background: #eee;
}

.pgi-medium-thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.pgi-medium-body {
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding: 16px 18px 20px;
}

.pgi-medium-title {
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 700;
	font-size: 1.05rem;
	line-height: 1.3;
}

.pgi-medium-excerpt {
	font-size: 0.85rem;
	line-height: 1.5;
	opacity: 0.8;
}

.pgi-medium-date {
	font-size: 0.8rem;
	opacity: 0.6;
}

@media (max-width: 900px) {
	.pgi-medium-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 600px) {
	.pgi-medium-grid { grid-template-columns: 1fr; }
}

/* Footer — every column starts at the same top line. */
.pgi-footer .pgi-row {
	align-items: flex-start;
}

.pgi-footer .pgi-row > * {
	margin-block-start: 0 !important;
	margin-top: 0 !important;
}

.pgi-footer .pgi-row p,
.pgi-footer .pgi-row h4 {
	margin-top: 0;
	margin-bottom: 12px;
}

/* Navigation — Give button, search icon, dropdowns */
.pgi-header .wp-block-navigation-item.pgi-nav-give > a {
	background: #189998;
	color: #fff;
	border-radius: 30px;
	padding: 8px 22px;
	margin-left: 4px;
}

.pgi-header .wp-block-navigation-item.pgi-nav-give > a:hover {
	background: #259D43;
}

.pgi-header .wp-block-search__button {
	background: transparent;
	color: inherit;
	padding: 6px 10px;
	margin: 0;
}

.pgi-header .wp-block-navigation__submenu-container {
	background: #fff;
	border: 1px solid rgba(61,61,61,0.1);
	border-radius: 14px;
	box-shadow: 0 10px 28px rgba(61,61,61,0.10);
	min-width: 230px;
	width: max-content !important;
	padding: 8px 0;
}

.pgi-header .wp-block-navigation__submenu-container .wp-block-navigation-item a {
	text-transform: none;
	letter-spacing: 0;
	font-size: 0.9rem;
	font-weight: 600;
	white-space: nowrap;
	padding: 8px 20px;
}

.pgi-header .wp-block-navigation__submenu-container .wp-block-navigation-item a:hover {
	color: #189998;
}

/* Fluent Forms — match the site (teal pill button, theme fonts) */
.frm-fluent-form .ff-el-input--label label,
.frm-fluent-form .ff-el-form-control {
	font-family: var(--wp--preset--font-family--body);
}

.frm-fluent-form .ff-el-input--label label {
	font-weight: 600;
	font-size: 0.95rem;
}

.frm-fluent-form .ff-el-form-control {
	border: 1px solid rgba(61,61,61,0.25);
	border-radius: 12px;
	padding: 10px 14px;
	background: #fff;
}

.frm-fluent-form .ff-el-form-control:focus {
	border-color: #189998;
	box-shadow: 0 0 0 3px rgba(24,153,152,0.18);
	outline: none;
}

.frm-fluent-form .ff-btn-submit {
	background: #189998 !important;
	color: #fff !important;
	border-radius: 30px;
	padding: 12px 32px;
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 700;
	font-size: 0.85rem;
	letter-spacing: 0.03em;
	text-transform: uppercase;
	border: 0;
}

.frm-fluent-form .ff-btn-submit:hover {
	background: #259D43 !important;
	color: #fff !important;
	opacity: 1;
}

.ff-message-success {
	border-left: 4px solid #189998;
	background: #f0f9f9;
	box-shadow: none;
}

/* ---------- Impact page template ---------- */
.pgi-impact-cols {
	gap: 12px;
	align-items: stretch;
}

.pgi-impact-col {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

/* Desktop: one shared grid so tile rows line up across the three columns */
@media (min-width: 782px) {
	.pgi-impact-cols {
		display: grid !important;
		grid-template-columns: repeat(3, 1fr);
		grid-template-rows: 200px repeat(3, auto);
		column-gap: 12px;
		row-gap: 0;
	}

	.pgi-impact-col {
		display: grid;
		grid-row: span 4;
		grid-template-rows: subgrid;
		row-gap: 12px;
		flex-basis: auto !important;
	}
}

.pgi-impact-head {
	margin: 0;
}

.pgi-impact-head h3 {
	font-size: 1.9rem;
	font-weight: 700;
	margin: 0;
}

.pgi-stat {
	flex: 1;
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: 34px 28px;
	text-align: center;
	color: #1f1f1f;
	margin: 0 !important;
}

.pgi-stat p { margin: 0; }

.pgi-stat-num {
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 800;
	font-size: 3rem;
	line-height: 1.05;
}

.pgi-stat-label {
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 700;
	font-size: 1.1rem;
	margin-top: 6px !important;
	margin-bottom: 14px !important;
}

.pgi-stat-text {
	font-size: 0.98rem;
	line-height: 1.55;
}

/* Brand palette (PGI Design Guide 2026): gold #FEB140, mustard #d8bb3f, teal #189998.
   Dark text on all three: white on this teal is only 3.5:1, dark is about 4.7:1. */
.pgi-stat--orange { background: var(--wp--preset--color--gold, #FEB140); }
.pgi-stat--amber  { background: var(--wp--preset--color--mustard, #d8bb3f); }
.pgi-stat--teal   { background: var(--wp--preset--color--teal, #189998); }

.pgi-impact-cta .wp-block-heading { margin-top: 0; }
/* Closing band inside the Our Impact page content: full-bleed (same break-out as .pgi-band),
   sitting flush against the footer (cancels main's bottom padding). */
.pgi-impact-cta {
	width: 100vw; max-width: 100vw !important; box-sizing: border-box;
	margin: 72px 0 -72px calc(50% - 50vw) !important;
}
.pgi-impact-cta .wp-block-button.is-style-outline .wp-block-button__link { border: 2px solid #fff; background: transparent; }

@media (max-width: 781px) {
	.pgi-impact-cols { gap: 28px; }
}

/* Footer newsletter (Mailchimp) */
.pgi-mc {
	position: relative;
	max-width: 420px;
}

.pgi-mc-row {
	display: flex;
	flex-direction: column;
	gap: 10px;
	align-items: stretch;
}

.pgi-mc-input {
	flex: 1 1 auto;
	min-width: 0;
	padding: 11px 18px;
	border: 2px solid #FEB140;
	border-radius: 30px;
	background: rgba(255,255,255,0.7);
	font-family: var(--wp--preset--font-family--body);
	font-size: 0.95rem;
	color: #3D3D3D;
}

.pgi-mc-input:focus {
	outline: none;
	background: #fff;
	box-shadow: 0 0 0 3px rgba(254,177,64,0.3);
}

.pgi-mc-button {
	flex: 0 0 auto;
	align-self: flex-start;
	padding: 12px 24px;
	border: 0;
	border-radius: 30px;
	background: #FEB140;
	color: #3D3D3D;
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 700;
	font-size: 0.85rem;
	letter-spacing: 0.03em;
	text-transform: uppercase;
	cursor: pointer;
}

.pgi-mc-button:hover { background: #F7931E; }
.pgi-mc-button:disabled { opacity: 0.6; cursor: wait; }

.pgi-mc-msg {
	margin: 10px 4px 0;
	font-size: 0.9rem;
	min-height: 1.2em;
}

.pgi-mc-msg.is-error { color: #b3261e; }
.pgi-mc-msg.is-success { color: #1d7a4a; font-weight: 600; }

.screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}


/* ---------- Team page: rainbow-ring circle photos + bio popups ---------- */
.pgi-team-card .wp-block-image,
.pgi-team-dialog-body .wp-block-image {
	position: relative; overflow: hidden; border-radius: 50%; padding: 5px;
	background: linear-gradient(to right, #f9b23f, #1c9944, #0c79bf);
	margin: 0 auto 12px; max-width: 220px;
}
.pgi-team-card .wp-block-image img,
.pgi-team-dialog-body .wp-block-image img {
	width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 50%; display: block;
}
.pgi-team-card .wp-block-image { transition: box-shadow .75s ease-in-out; }
.pgi-team-card .wp-block-image::after {
	content: ''; position: absolute; inset: 0; border-radius: 50%;
	background: rgba(242, 178, 0, .4); opacity: 0; transition: opacity .75s ease;
}
.pgi-team-js .pgi-team-card:hover .wp-block-image,
.pgi-team-js .pgi-team-card:focus-visible .wp-block-image { box-shadow: 0 0 30px 10px rgba(242, 178, 0, .7); overflow: visible; }
.pgi-team-js .pgi-team-card:hover .wp-block-image::after,
.pgi-team-js .pgi-team-card:focus-visible .wp-block-image::after { opacity: 1; }
.pgi-team-card h3 { text-align: center; margin: 0 0 4px; font-size: 1.05rem; }
.pgi-team-card p { text-align: center; margin: 0; font-size: .9rem; }
.pgi-team-js .pgi-team-card { cursor: pointer; }
.pgi-team-js .pgi-team-card:focus-visible { outline: none; }
.pgi-team-js .pgi-team-bio { display: none; }

/* popup: wide rectangle, photo left / text right (stacks on phones) */
.pgi-team-dialog {
	border: 0; border-radius: 16px; padding: 0; width: min(900px, calc(100vw - 32px));
	max-height: calc(100vh - 48px); overflow: auto; background: #fff;
}
.pgi-team-dialog::backdrop { background: rgba(0, 0, 0, .55); }
.pgi-team-dialog-body {
	display: grid; grid-template-columns: clamp(150px, 30%, 280px) 1fr; column-gap: 40px; align-items: start;
	padding: 40px 44px 36px;
}
.pgi-team-dialog-body > * { grid-column: 2; margin-top: 0; }
.pgi-team-dialog-body > .wp-block-image { grid-column: 1; grid-row: 1 / span 40; max-width: 280px; width: 100%; margin: 0; }
.pgi-team-dialog-body h3 { text-align: center; margin: 0 0 4px; }
.pgi-team-dialog-body p { margin: 0 0 12px; }
.pgi-team-dialog-body h3 + p, .pgi-team-dialog-body h3 + p + p { text-align: center; }
.pgi-team-close {
	position: sticky; top: 8px; float: right; margin: 8px 12px 0 0; width: 36px; height: 36px;
	border: 0; border-radius: 50%; background: #eee; font-size: 24px; line-height: 1; cursor: pointer; z-index: 1;
}
.pgi-team-close:hover { background: #ddd; }
@media (max-width: 520px) {
	.pgi-team-dialog-body { grid-template-columns: 1fr; padding: 40px 24px 32px; }
	.pgi-team-dialog-body > * { grid-column: 1; }
	.pgi-team-dialog-body > .wp-block-image { grid-row: auto; max-width: 200px; margin: 0 auto 16px; }
}

/* Team page: full-width teal band under the photos, white text, centered Give pill */
.pgi-team-closing {
	width: 100vw; max-width: 100vw !important; margin: 64px 0 -72px calc(50% - 50vw) !important;
	padding: 56px 40px 64px; background: var(--wp--preset--color--teal, #189998); color: #fff; text-align: center;
	box-sizing: border-box;
}
.pgi-team-closing > * { max-width: 1000px; margin-left: auto; margin-right: auto; }
.pgi-team-closing p, .pgi-team-closing strong { color: #fff; }
.pgi-team-closing .wp-block-columns { margin-bottom: 24px; align-items: flex-start; }
.pgi-team-closing .wp-block-column > .wp-block-image { margin-top: 0; margin-bottom: 0; }
.pgi-team-closing .wp-block-buttons { margin-top: 24px; }
.pgi-give-pill .wp-block-button__link {
	background: var(--wp--preset--color--gold, #FEB140); color: var(--wp--preset--color--ink, #3D3D3D);
	border-radius: 30px; padding: 8px 28px; font-weight: 600; letter-spacing: .04em;
}
.pgi-give-pill .wp-block-button__link:hover { background: #fff; color: var(--wp--preset--color--teal, #189998); }
/* the pie graphic has ~12.6% transparent padding on each side; trim it so the circle top-aligns with the map column */
.pgi-team-closing .wp-block-column:nth-child(2) > .wp-block-image { margin-top: -12.6%; margin-bottom: -12.6%; }
@media (max-width: 781px) { .pgi-team-closing .wp-block-column:nth-child(2) > .wp-block-image { margin-top: -8%; margin-bottom: -8%; } }

/* ---------- Content pages: pill buttons, rounded images, gift cards (Get Involved) ---------- */
.wp-block-button.pgi-pill .wp-block-button__link {
	background: var(--wp--preset--color--teal, #189998); color: #fff; border-radius: 30px; padding: 10px 28px; font-weight: 600;
}
.wp-block-button.pgi-pill .wp-block-button__link:hover { background: var(--wp--preset--color--green, #259D43); color: #fff; }
.wp-block-image.pgi-rounded img { border-radius: 16px; width: 100%; height: auto; }
.pgi-gift-card {
	background: var(--wp--preset--color--cream, #FBF7EE); border-radius: 14px; padding: 20px 22px; height: 100%; box-sizing: border-box;
}
.pgi-gift-card p { margin: 0 0 8px; }
.pgi-gift-card p:first-child { font-size: 1.3rem; color: var(--wp--preset--color--teal, #189998); margin-bottom: 6px; }
main h2[id] { scroll-margin-top: 90px; margin-top: 8px; }
.wp-block-image.pgi-banner img { aspect-ratio: 16 / 7; object-fit: cover; object-position: center 35%; }

/* ---------- Program pages (OANM, Alliance, Fellowship, Values) — from the designer mock-ups ---------- */
.pgi-band {
	width: 100vw; max-width: 100vw !important; margin: -48px 0 48px calc(50% - 50vw) !important;
	padding: 64px 40px; box-sizing: border-box; color: #fff;
}
.pgi-band > * { max-width: 1100px; margin-left: auto; margin-right: auto; }
.pgi-band h1, .pgi-band p, .pgi-band .wp-block-heading { color: #fff; }
.pgi-band .wp-block-columns { align-items: center; gap: 48px; }
.pgi-band-purple { background: var(--wp--preset--color--purple, #8861B1); }
.pgi-band-blue { background: var(--wp--preset--color--royal-blue, #2F4EAC); }
.pgi-circle img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 50%; display: block; }
.pgi-band .wp-block-column:has(.pgi-circle) { flex-basis: 38%; }
.wp-block-button.pgi-pill-outline .wp-block-button__link {
	background: transparent; color: #fff; border: 2px solid var(--wp--preset--color--gold, #FEB140); border-radius: 12px;
}
.wp-block-button.pgi-pill-outline .wp-block-button__link:hover { background: var(--wp--preset--color--gold, #FEB140); color: var(--wp--preset--color--ink, #3D3D3D); }
.pgi-quote-card {
	max-width: 760px; margin: 56px auto; padding: 48px 56px; border-radius: 32px; text-align: center;
	background: var(--wp--preset--color--teal, #189998); color: #fff;
}
.pgi-quote-card blockquote { border: 0; margin: 0; padding: 0; }
.pgi-quote-card p { color: #fff; font-weight: 600; font-size: 1.15rem; }
.pgi-quote-card cite { color: #fff; font-style: normal; font-weight: 600; }
.pgi-teal-card {
	background: var(--wp--preset--color--teal, #189998); color: #fff; border-radius: 24px; padding: 28px 24px;
	text-align: center; height: 100%; box-sizing: border-box;
}
.pgi-teal-card p { color: #fff; margin: 0 0 6px; }
.pgi-value-card {
	border: 2px solid transparent; border-radius: 22px; padding: 24px 26px; height: 100%; box-sizing: border-box; text-align: center;
	background: linear-gradient(#fff, #fff) padding-box, linear-gradient(to right, #f9b23f, #1c9944, #0c79bf) border-box;
}
.pgi-value-card p { margin: 0 0 6px; color: #777; }
.pgi-value-card .pgi-value-num { font-weight: 700; color: var(--wp--preset--color--teal, #189998); }
.pgi-value-card h3 { margin: 0; font-size: 1.35rem; }
.pgi-values-row { gap: 28px; margin-bottom: 28px; }
.pgi-testimonial {
	border: 3px solid transparent; border-radius: 28px; padding: 32px 36px; margin: 40px 0;
	background: linear-gradient(rgba(254, 177, 64, .92), rgba(254, 177, 64, .92)) padding-box, linear-gradient(to right, #f9b23f, #1c9944, #0c79bf) border-box;
}
.pgi-testimonial .wp-block-columns { align-items: center; gap: 32px; margin: 0; }
.pgi-testimonial .wp-block-column:first-child { flex-basis: 24%; }
.pgi-testimonial p { margin: 0 0 12px; }
.pgi-oval img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; border-radius: 50%; display: block; }
.wp-block-image.pgi-center { text-align: center; }
.wp-block-image.pgi-center img { max-width: 320px; width: 100%; height: auto; }
@media (max-width: 781px) {
	.pgi-band { padding: 40px 24px; }
	.pgi-quote-card { padding: 32px 24px; }
	.pgi-testimonial { padding: 24px; }
}
.pgi-testimonial .pgi-oval { max-width: 190px; margin: 0 auto; }
.pgi-testimonial .wp-block-column:first-child { flex-basis: 190px !important; flex-grow: 0; }

/* Fellowship: gradient bands like the live page */
.pgi-band-gradient { background: linear-gradient(135deg, #b4bb3c 0%, #5aa043 40%, #2f8f78 75%, #2a7c97 100%); }
.pgi-band-hero { padding-top: 90px; padding-bottom: 90px; margin-bottom: 40px !important; }
.pgi-band-hero h1 { font-size: clamp(2rem, 4vw, 3rem); margin: 0 0 12px; }
.pgi-band-hero p { font-size: 1.25rem; margin: 0; }
.pgi-band-year { margin-top: 56px !important; margin-bottom: 0 !important; text-align: center; }
.pgi-band-year + .pgi-band-year { margin-top: 0 !important; }
.pgi-band-year h2 { margin: 0 0 18px; }
.pgi-band-year .wp-block-buttons { margin-bottom: 28px; }
.pgi-band-year .wp-block-image { margin: 0 auto; max-width: 900px; }
.wp-block-button.pgi-pill-outline-white .wp-block-button__link { background: transparent; color: #fff; border: 2px solid #fff; border-radius: 30px; padding: 8px 26px; }
.wp-block-button.pgi-pill-outline-white .wp-block-button__link:hover { background: #fff; color: #2f8f78; }

/* Photo hero banner (consulting, give, etc.) — full-bleed cover with centered white title */
.wp-block-cover.pgi-photo-hero {
	width: 100vw; max-width: 100vw !important; margin: -48px 0 48px calc(50% - 50vw) !important; box-sizing: border-box;
	padding: 56px 40px; text-align: center;
}
.pgi-photo-hero .wp-block-cover__inner-container { max-width: 1000px; margin: 0 auto; width: 100%; }
.pgi-photo-hero h1 { text-shadow: 0 2px 14px rgba(0, 0, 0, .45); font-size: clamp(2rem, 4.2vw, 3.2rem); margin: 0 0 14px; }
.pgi-photo-hero p { text-shadow: 0 2px 10px rgba(0, 0, 0, .45); font-size: 1.25rem; }
.pgi-give-hero iframe { display: block; background: #fff; border-radius: 12px; margin-top: 24px; }
.pgi-gold-title { color: var(--wp--preset--color--mustard, #D8BB3F); }
.pgi-photo-hero img.wp-block-cover__image-background { object-position: 50% 0%; }

/* ---------- Standard page hero (green gradient, centered) — on every page ---------- */
.pgi-page-hero {
	--pgi-hero-h: 480px;   /* header height on desktop (same as capitalscoalition.org/about) */
	background: #fff url("../images/hero-bg-clean.png") 50% 30% / cover no-repeat;
	padding: 0 40px 64px; text-align: left; color: var(--wp--preset--color--ink, #3D3D3D); margin: 0;
	min-height: var(--pgi-hero-h); display: flex; flex-direction: column; justify-content: flex-end;
}
/* big title, bottom-left; no subtitle */
/* Title sits halfway between the content column's left edge and the logo's left edge:
   at 1440px wide that is 130px in (content column 220px, logo 40px). Width = 50vw + 460px. */
.pgi-page-hero > * { width: 100%; max-width: calc(50vw + 460px); margin-left: auto !important; margin-right: auto !important; }
.pgi-page-hero .wp-block-post-title {
	color: var(--wp--preset--color--ink, #3D3D3D); text-align: left; margin: 0;
	font-family: var(--wp--preset--font-family--accent); font-weight: 600;   /* Caveat (handwritten accent) */
	font-size: clamp(3.25rem, 7vw, 5.75rem); line-height: 1; letter-spacing: 0;
}
/* Photo version (page has a Featured Image): full-bleed photo under a dark overlay
   (heavier at the bottom, where the title sits) with a white title - same look as
   capitalscoalition.org/about. White title stays >= 4:1 on all the photos tried. */
.pgi-page-hero--photo {
	position: relative; overflow: hidden; isolation: isolate;
	background: #1d2a2a var(--pgi-hero-img) 50% 40% / cover no-repeat;
}
.pgi-page-hero--photo::before {
	content: ""; position: absolute; inset: 0; z-index: -1;
	background: linear-gradient(180deg, rgba(0, 0, 0, .30) 0%, rgba(0, 0, 0, .40) 45%, rgba(0, 0, 0, .58) 100%);
}
.pgi-page-hero--photo .wp-block-post-title { color: #fff; text-shadow: 0 2px 18px rgba(0, 0, 0, .35); }

/* pages that bring their own photo banner don't also get the green one */
body:has(.pgi-photo-hero) .pgi-page-hero { display: none; }
@media (max-width: 781px) { .pgi-page-hero { --pgi-hero-h: 300px; padding: 0 24px 36px; } .pgi-page-hero .wp-block-post-title { font-size: clamp(2.75rem, 13vw, 3.6rem); } }

/* Softer homepage — each section after the hero overlaps the one above with an
   arched top edge, so the page reads as soft layers rather than hard stripes. */
.pgi-home-sections > * + * {
	--pgi-curve: 48px;
	position: relative;
	margin-top: calc(-1 * var(--pgi-curve)) !important;
	border-radius: 50% 50% 0 0 / var(--pgi-curve) var(--pgi-curve) 0 0;
	overflow: hidden;
}

.pgi-home-sections > :nth-child(2) { z-index: 1; }
.pgi-home-sections > :nth-child(3) { z-index: 2; }

/* Quote band blends into the cream intro below (flat join, soft fade) instead
   of being bitten by a second curve. */
.pgi-home-sections > .has-cream-background-color:nth-child(3) {
	margin-top: 0 !important;
	border-radius: 0;
	padding-top: 36px !important;
	padding-bottom: calc(40px + var(--pgi-curve)) !important;
}

.pgi-quote-band::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 48px;
	background: linear-gradient(to bottom, rgba(251,247,238,0), #FBF7EE);
	pointer-events: none;
	z-index: 0;
}

.pgi-home-sections > .has-cream-background-color {
	padding-top: calc(36px + var(--pgi-curve)) !important;
}

.pgi-home-sections > .pgi-stories {
	padding-top: calc(70px + var(--pgi-curve)) !important;
}

/* What We Do: a white band holding two soft cards — gold panel and a
   rounded photo — so the cream sections above and below stay distinct. */
.pgi-home-sections > .pgi-what-we-do {
	background: #fff;
	padding: 72px 40px 90px;
	gap: 28px;
	column-gap: 28px !important;
	z-index: 3;
}

.pgi-what-we-do .pgi-wwd-panel {
	border-radius: 28px;
}

.pgi-what-we-do .pgi-wwd-photo {
	border-radius: 28px;
	overflow: hidden;
}


.pgi-home-sections > .pgi-stories {
	z-index: 4;
}

@media (min-width: 782px) {
	.pgi-home-sections > .pgi-what-we-do {
		min-height: 0;
	}

	.pgi-what-we-do .pgi-wwd-panel,
	.pgi-what-we-do .pgi-wwd-photo-col {
		min-height: 360px;
	}
}

@media (max-width: 781px) {
	.pgi-home-sections > * + * {
		--pgi-curve: 28px;
	}

	.pgi-home-sections > .pgi-what-we-do {
		padding: 48px 20px 60px;
	}

	/* Stack the panel above the photo */
	.wp-block-columns.pgi-what-we-do {
		flex-direction: column;
		flex-wrap: wrap !important;
		gap: 20px !important;
	}

	.pgi-what-we-do > .wp-block-column {
		flex-basis: 100% !important;
		width: 100%;
		box-sizing: border-box;
	}

	.pgi-what-we-do .pgi-wwd-panel {
		padding: 36px 28px 36px 44px !important;
		min-height: 0;
	}

	.pgi-what-we-do .pgi-wwd-photo-col {
		min-height: 260px;
	}

	.pgi-what-we-do .pgi-wwd-panel h2 {
		font-size: 2rem !important;
	}
}

/* Header logo sits at the far left; the nav keeps its right alignment. */
.pgi-header .pgi-header-logo {
	margin: 0 auto 0 0;
	max-width: 96px;
	flex: 0 0 auto;
}

.pgi-header .pgi-header-logo img {
	display: block;
	height: auto;
}

.pgi-header-row > * {
	align-self: center !important;
	margin-top: 0;
	margin-bottom: 0;
}

.pgi-header .pgi-header-logo a {
	display: block;
	line-height: 0;
}

/* Mobile menu overlay: breathing room on the right (and left) so the links
   and the close button don't sit flush against the screen edge. */
.pgi-header .wp-block-navigation__responsive-container.is-menu-open {
	padding: 20px 28px 40px !important;
	box-sizing: border-box;
}

.pgi-header .is-menu-open .pgi-nav-cta > a,
.pgi-header .is-menu-open .pgi-nav-give > a {
	padding: 8px 22px !important;
}

/* ---------- Our Values: a tree of five tappable notes ---------- */
.pgi-values-stage {
	width: 100vw; max-width: 100vw !important; margin: -48px 0 -72px calc(50% - 50vw) !important;
	background-color: #e8e4da; overflow: hidden; padding: 0;
	/* Teal-green glow from the 2026 mockup, drawn in CSS on the full-width stage so it starts at the
	   screen's left edge at any width: one soft ellipse (it widens on screens wider than 1366px so it keeps reaching past the intro text), with a fade back to the stage colour toward
	   the bottom (the glow is shorter below its centre than above it). */
	background-image:
		linear-gradient(to bottom, rgba(232, 228, 218, 0) 68%, rgba(232, 228, 218, .45) 77.5%, rgba(232, 228, 218, .9) 86.7%, #e8e4da 95%),
		radial-gradient(ellipse calc(min(41vw, 560px) + max(0px, (100vw - 1366px) / 2)) 51.3% at min(2.9vw, 40px) 63.3%, rgba(118,184,173,1.000) 0%, rgba(118,184,173,1.000) 35%, rgba(118,184,173,0.957) 45%, rgba(118,184,173,0.844) 55%, rgba(118,184,173,0.684) 65%, rgba(118,184,173,0.500) 75%, rgba(118,184,173,0.316) 85%, rgba(118,184,173,0.156) 95%, rgba(118,184,173,0.043) 105%, rgba(118,184,173,0.000) 115%);
	background-repeat: no-repeat;
	background-position: 0 0;
	background-size: 100% 100%;
}
.pgi-values-cards {
	position: relative; max-width: 1366px; margin: 0 auto; aspect-ratio: 1366 / 1000;
	container-type: inline-size;
}
.pgi-values-intro {
	position: absolute; left: 3.2%; top: 36%; width: 31%;
}
.pgi-values-intro p {
	font-family: var(--wp--preset--font-family--accent); font-size: max(1.15rem, 2.5cqw); line-height: 1.25; margin: 0; color: var(--wp--preset--color--ink, #3D3D3D);
}
.pgi-val {
	position: absolute; aspect-ratio: 1 / 1; box-sizing: border-box; padding: 2.4cqw 1.9cqw 1.4cqw;
	background: center / 100% 100% no-repeat; text-align: center;
	display: flex; flex-direction: column; justify-content: flex-start; align-items: center;
	transition: transform .35s ease, filter .35s ease;
	filter: drop-shadow(0 6px 10px rgba(60, 50, 30, .12));
}
.pgi-val > * { position: relative; z-index: 1; margin: 0; }
.pgi-val::before, .pgi-val::after {
	content: ""; position: absolute; background: center / contain no-repeat; pointer-events: none; z-index: 2;
	transform-origin: 50% 90%;
}
.pgi-val p {
	font-family: var(--wp--preset--font-family--accent); font-size: max(.9rem, 1.2cqw); line-height: 1.12; color: var(--wp--preset--color--ink, #3D3D3D);
}
.pgi-val .pgi-value-num { font-size: 1.5em; margin-right: .2em; font-weight: 700; }
.pgi-val h3 {
	font-family: var(--wp--preset--font-family--heading); font-weight: 600; text-transform: uppercase; letter-spacing: .01em;
	font-size: max(.95rem, 1.5cqw); line-height: 1.05; margin-top: .7cqw !important;
	color: var(--val-color, #8460A8); text-shadow: 1px 1px 0 rgba(255, 255, 255, .8), 2px 2px 0 color-mix(in srgb, var(--val-color, #8460A8) 28%, transparent);
}
.pgi-val h3 em {
	font-family: var(--wp--preset--font-family--accent); font-style: normal; font-weight: 400; text-transform: none; letter-spacing: 0;
	color: var(--wp--preset--color--ink, #3D3D3D); text-shadow: none; font-size: .9em;
}
/* card positions mirror the designer mock-up (1366 wide) */
.pgi-val-1 { left: 70.4%; top: 6.2%;  width: 18.9%; background-image: url("../images/values/note-paper-1.png"); --val-color: #6FA24C; }
.pgi-val-2 { left: 45.4%; top: 15.8%; width: 21.4%; background-image: url("../images/values/note-paper-2.png"); --val-color: #B39A2E; }
.pgi-val-3 { padding-left: 3.4cqw; padding-right: 1.6cqw; left: 67.5%; top: 34.5%; width: 22.1%; background-image: url("../images/values/note-paper-3.png"); --val-color: #8460A8; }
.pgi-val-4 { left: 47.3%; top: 52%;   width: 19%;   background-image: url("../images/values/note-paper-4.png"); --val-color: #3F55A5; }
.pgi-val-5 { padding-top: 5.6cqw; left: 68.6%; top: 64.7%; width: 20.9%; background-image: url("../images/values/note-paper-5.png"); --val-color: #8460A8; }
/* watercolour pieces, placed relative to their card */
.pgi-val-1::before { background-image: url("../images/values/mushrooms.png?v=3"); left: 81.4%; top: 19.4%; width: 56.7%; height: 45%; }
.pgi-val-1::after  { background-image: url("../images/values/twig-roots.png?v=3"); left: -25.9%; top: 77.1%; width: 61.7%; height: 36.9%; }
.pgi-val-2::before { background-image: url("../images/values/tree-birch.png?v=3"); left: 4.6%; top: 58.9%; width: 45.2%; height: 62.2%; }
.pgi-val-3::before { background-image: url("../images/values/buds.png?v=3"); left: 62.5%; top: 71.1%; width: 51.5%; height: 40.9%; }
.pgi-val-4::before { background-image: url("../images/values/flower-peony.png?v=3"); left: -12.2%; top: 72.6%; width: 59.5%; height: 56.5%; }
.pgi-val-5::before { background-image: url("../images/values/blueberries.png?v=3"); left: 40.6%; top: 67.8%; width: 46.1%; height: 42.1%; }
.pgi-values-js .pgi-val { cursor: pointer; }
.pgi-values-js .pgi-val:hover, .pgi-values-js .pgi-val:focus-visible {
	transform: translateY(-6px) scale(1.04) rotate(-.6deg); filter: drop-shadow(0 14px 18px rgba(60, 50, 30, .22)); outline: none;
}
.pgi-values-js .pgi-val:focus-visible { box-shadow: 0 0 0 3px rgba(24, 153, 152, .5); border-radius: 6px; }
@media (prefers-reduced-motion: no-preference) {
	.pgi-val::before, .pgi-val::after { animation: pgi-sway 7s ease-in-out infinite alternate; }
	.pgi-val::after { animation-duration: 9s; animation-delay: -3s; }
	.pgi-val-2::before { animation-duration: 10s; }
}
@keyframes pgi-sway { from { transform: rotate(-2.2deg); } to { transform: rotate(2.2deg); } }
.pgi-values-bios { max-width: 1000px; margin: 40px auto; }
.pgi-values-js .pgi-values-bios { display: none; }
@media (max-width: 781px) {
	.pgi-values-stage { background-image: none; }
	.pgi-values-cards { aspect-ratio: auto; padding: 36px 20px 64px; background: url("../images/values/glow-teal.webp?v=1") no-repeat 0 0 / 170% auto; display: flex; flex-direction: column; align-items: center; gap: 44px; }
	.pgi-values-intro, .pgi-val { position: relative; left: auto; top: auto; width: min(86%, 330px); }
	.pgi-values-intro { width: min(92%, 420px); text-align: center; }
	.pgi-val { padding: 40px 30px 30px; aspect-ratio: 1 / .8; }
	.pgi-val-5 { padding-top: 66px; }
	/* phones: keep the mushrooms inside the screen, perched on the note's top-right corner */
	.pgi-val-1::before { left: 56%; top: -30%; width: 44%; height: 44%; }
	.pgi-val-3 { padding-left: 42px; padding-right: 28px; }
	.pgi-val p { font-size: 1.2rem; }
	.pgi-val h3 { font-size: 1.3rem; margin-top: 8px !important; }
	.pgi-val-1 { transform: rotate(-1.2deg); } .pgi-val-2 { transform: rotate(1.4deg); } .pgi-val-3 { transform: rotate(-1deg); }
	.pgi-val-4 { transform: rotate(1.2deg); } .pgi-val-5 { transform: rotate(-1.4deg); }
}

/* Language switcher (GTranslate, [gtranslate] in parts/header.html): keep it one
   compact, non-wrapping item at the end of the header row. */
.pgi-header .gtranslate_wrapper { flex: 0 0 auto; margin-left: 4px; }
.pgi-header .gtranslate_wrapper a.gt_switcher-popup {
	display: inline-flex; align-items: center; gap: 6px; white-space: nowrap;
	font-family: var(--wp--preset--font-family--heading, inherit);
	font-size: .75rem; font-weight: 700; letter-spacing: .03em; text-transform: uppercase;
	color: var(--wp--preset--color--ink, #3D3D3D); text-decoration: none;
}
.pgi-header .gtranslate_wrapper a.gt_switcher-popup img { width: 18px; height: 18px; }
.pgi-header .gtranslate_wrapper a.gt_switcher-popup span { color: inherit !important; }

/* Post Growth Ripples feed on Our Impact (pgi2/medium-feed with a tag) */
.pgi-ripples-head { margin-top: 72px; margin-bottom: 28px; }
.pgi-medium-more { text-align: center; margin: 28px 0 0; font-weight: 700; }

/* Floated images (align left / right): the first line of the text beside the picture lines up
   with the top of the picture.
   1) When the picture is the first block, its text no longer carries the usual block spacing
      above it (the picture has none, so the text used to start ~24px lower).
   2) text-box-trim removes the empty space above the capital letters, so the letters (not the
      invisible line box) line up with the picture's top edge. Browsers without it (older
      Firefox) just skip this part and still get 1). */
.wp-block-image.alignleft:first-child + *,
.wp-block-image.alignright:first-child + *,
.wp-block-image.alignleft:first-child + .wp-block-image.alignright + * {
	margin-block-start: 0 !important;
}
.wp-block-image.alignleft + p,
.wp-block-image.alignright + p,
.wp-block-image.alignleft + :is(h2, h3, h4),
.wp-block-image.alignright + :is(h2, h3, h4) {
	text-box-trim: trim-start;
	text-box-edge: cap alphabetic;
}

/* ---------- Post Growth Alliance landing page (page: what-we-do/post-growth-alliance) ----------
   Built from core blocks + these classes (generator: tools/pga-page/build.py). Sizes come from the
   1366px-wide design: --u is 1px at 1366 and scales down on smaller screens (capped on wider ones),
   so every "calc(NN * var(--u))" below is the NN-pixel value in the mockup. The page brings its own
   hero, so the standard page banner is hidden. */
body:has(.pgi-pga-hero) .pgi-page-hero { display: none; }
.pgi-pga-hero, .pgi-pga-benefits, .pgi-pga-map, .pgi-pga-cta {
	--u: calc(min(100vw, 1366px) / 1366);
	width: 100vw; max-width: 100vw !important; margin-left: calc(50% - 50vw) !important; margin-right: 0 !important;
	box-sizing: border-box;
}
.pgi-pga-hero {
	margin-top: -48px !important; margin-bottom: 0 !important; overflow: hidden;
	background: linear-gradient(135deg, #2F4DAB 0%, #6B3A79 100%); color: #fff;
}
.pgi-pga-hero-in { position: relative; max-width: 1366px; margin: 0 auto; height: calc(1052 * var(--u)); }
.pgi-pga-copy { z-index: 2; position: absolute; left: calc(68 * var(--u)); top: calc(82 * var(--u)); width: calc(560 * var(--u)); }
.pgi-pga-copy h1 {
	font-family: var(--wp--preset--font-family--heading); font-weight: 800; color: #fff; text-align: left;
	font-size: calc(50.7 * var(--u)); line-height: calc(45 / 50.7); margin: 0 0 calc(34 * var(--u));
}
.pgi-pga-copy p { color: #fff; font-size: calc(25.3 * var(--u)); line-height: calc(32 / 25.3); margin: 0 0 calc(32 * var(--u)); max-width: calc(560 * var(--u)); }
.pgi-pga-copy .pgi-pga-lead { font-weight: 700; font-size: calc(24.5 * var(--u)); margin-bottom: calc(40 * var(--u)); max-width: calc(540 * var(--u)); }
.pgi-pga-copy .wp-block-buttons { margin-top: calc(44 * var(--u)); }
.pgi-pga-btn { width: calc(560 * var(--u)); }
.pgi-pga-btn .wp-block-button__link {
	display: block; width: 100%; box-sizing: border-box; text-align: center; background: transparent; color: #fff;
	border: calc(3 * var(--u)) solid var(--wp--preset--color--mustard, #D8BB3F); border-radius: calc(14 * var(--u));
	font-family: var(--wp--preset--font-family--heading); font-weight: 600; text-transform: uppercase;
	font-size: calc(22.7 * var(--u)); letter-spacing: .12em; line-height: 1; padding: calc(17.5 * var(--u)) 0;
}
.pgi-pga-btn .wp-block-button__link:hover { background: var(--wp--preset--color--mustard, #D8BB3F); color: #3D3D3D; }
.pgi-pga-collage { position: absolute; left: calc(630 * var(--u)); top: 0; width: calc(736 * var(--u)); margin: 0; }
.pgi-pga-collage img { display: block; width: 100%; height: auto; }
.pgi-pga-note {
	position: absolute; left: calc(1030 * var(--u)); top: calc(857 * var(--u)); width: calc(300 * var(--u)); margin: 0;
	font-family: var(--wp--preset--font-family--accent); font-weight: 500; font-size: calc(43.3 * var(--u)); line-height: calc(62 / 43.3);
	color: var(--wp--preset--color--mustard, #D8BB3F);
}
.pgi-pga-note::before {
	content: ""; position: absolute; left: calc(-80 * var(--u)); top: calc(-49 * var(--u)); width: calc(62 * var(--u)); height: calc(88 * var(--u));
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 62 88' fill='none' stroke='%23D8BB3F' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M58 84C28 88 8 66 9 12'/%3E%3Cpath d='M0 28L9 10L22 24'/%3E%3C/svg%3E") no-repeat 0 0 / 100% 100%;
}

.pgi-pga-benefits { background: #e8e4d9; padding: calc(77 * var(--u)) 0 calc(65 * var(--u)); margin-top: 0 !important; margin-bottom: 0 !important; }
.pgi-pga-benefits h2 {
	font-family: var(--wp--preset--font-family--heading); font-weight: 700; color: #3D3D3D; text-align: center;
	font-size: calc(34.4 * var(--u)); line-height: calc(36 / 34.4); margin: 0 0 calc(38 * var(--u));
}
.pgi-pga-cards { display: flex; justify-content: center; gap: calc(35 * var(--u)); }
.pgi-pga-cards > *, .pgi-pga-cta-in > *, .pgi-pga-card > * { margin-block-start: 0 !important; }
.pgi-pga-card {
	width: calc(279 * var(--u)); height: calc(420 * var(--u)); box-sizing: border-box; flex: none;
	background: var(--wp--preset--color--teal, #189998); border-radius: calc(42 * var(--u));
	display: flex; flex-direction: column; align-items: center; padding: calc(22 * var(--u)) calc(16.5 * var(--u)) calc(52 * var(--u));
}
.pgi-pga-icon { margin: 0; height: calc(126 * var(--u)); display: flex; align-items: center; justify-content: center; flex: none; }
.pgi-pga-icon img { display: block; height: auto; width: auto; max-height: calc(120 * var(--u)); max-width: calc(130 * var(--u)); }
.pgi-pga-card p {
	flex: 1; display: flex; align-items: center; justify-content: center; text-align: center; margin: 0; color: #fff;
	font-size: calc(30 * var(--u)); line-height: calc(34 / 30);
}

.pgi-pga-map { background: linear-gradient(90deg, #FDB140 0%, #24A046 50%, #007AC0 100%); padding: calc(6 * var(--u)); margin-top: 0 !important; margin-bottom: 0 !important; }
.pgi-pga-map-in { background: #EFEBE2; }
.pgi-pga-mapimg { margin: 0 auto; max-width: 1352px; }
.pgi-pga-mapimg img { display: block; width: 100%; height: auto; }

.pgi-pga-cta { background: #e8e4d9; margin-top: 0 !important; margin-bottom: -72px !important; }
.pgi-pga-cta::after { content: ""; display: block; height: calc(41 * var(--u)); background: linear-gradient(90deg, #314DAA 0%, #6B3A7A 100%); }
.pgi-pga-cta-in {
	max-width: 1366px; margin: 0 auto; box-sizing: border-box; min-height: calc(164 * var(--u));
	display: flex; align-items: center; justify-content: space-between;
	padding: calc(18 * var(--u)) calc(26 * var(--u)) 0 calc(162 * var(--u));
}
.pgi-pga-cta-text {
	margin: 0; width: calc(740 * var(--u)); color: #3D3D3D; font-family: var(--wp--preset--font-family--heading);
	font-weight: 700; font-size: calc(34.4 * var(--u)); line-height: calc(44 / 34.4);
}
.pgi-pga-cta-text a { color: var(--wp--preset--color--teal, #189998); text-decoration: underline; }
.pgi-pga-logo { margin: 0; width: calc(300 * var(--u)); flex: none; }
.pgi-pga-logo img { display: block; width: 100%; height: auto; }

@media (max-width: 781px) {
	.pgi-pga-hero, .pgi-pga-benefits, .pgi-pga-map, .pgi-pga-cta { --u: 1px; }
	.pgi-pga-hero-in { height: auto; padding: 40px 24px 36px; }
	.pgi-pga-copy, .pgi-pga-collage, .pgi-pga-note { position: static; width: auto; }
	.pgi-pga-copy h1 { font-size: 2.6rem; }
	.pgi-pga-copy p, .pgi-pga-copy .pgi-pga-lead { font-size: 1.1rem; line-height: 1.5; margin-bottom: 20px; max-width: none; }
	.pgi-pga-copy .pgi-pga-lead { font-size: 1.2rem; }
	.pgi-pga-btn { width: 100%; }
	.pgi-pga-btn .wp-block-button__link { font-size: .9rem; padding: 14px 8px; }
	.pgi-pga-collage { margin: 28px -24px 0; }
	.pgi-pga-note { text-align: center; font-size: 2rem; margin-top: 8px; }
	.pgi-pga-note::before { display: none; }
	.pgi-pga-benefits { padding: 48px 24px; }
	.pgi-pga-benefits h2 { font-size: 1.5rem; }
	.pgi-pga-cards { flex-direction: column; align-items: center; gap: 20px; }
	.pgi-pga-card { width: min(100%, 340px); height: auto; padding: 28px 24px 32px; }
	.pgi-pga-card p { font-size: 1.15rem; margin-top: 16px; }
	.pgi-pga-icon { height: 100px; }
	.pgi-pga-map-in { overflow-x: auto; }
	.pgi-pga-mapimg { min-width: 760px; }
	.pgi-pga-cta-in { flex-direction: column; text-align: center; padding: 40px 24px; gap: 20px; }
	.pgi-pga-cta-text { width: auto; font-size: 1.25rem; }
	.pgi-pga-cta::after { height: 28px; }
}