:root {
	--pep-green-900: #075842;
	--pep-green-800: #086c52;
	--pep-green-700: #0b7c5f;
	--pep-green-600: #15936f;
	--pep-green-200: #bfe1cd;
	--pep-green-100: #eaf5ee;
	--pep-green-050: #f5faf7;
	--pep-ink: #263532;
	--pep-muted: #64736f;
	--pep-line: #d9e6df;
	--pep-warm: #f4f1e9;
	--pep-white: #ffffff;
	--pep-shadow: 0 18px 55px rgba(18, 66, 52, 0.13);
}

html {
	scroll-behavior: smooth;
}

.pep-page {
	/* color: var(--pep-ink); */
	background: var(--pep-white);
	overflow: hidden;
}

.pep-page h1,
.pep-page h2,
.pep-page h3,
.pep-page h4 {
	/* color: var(--pep-ink); */
}

p {
	/* color: var(--pep-muted); */
}

.pep-page strong {
	color: var(--pep-green-700);
	font-weight: 800;
}

.pep-section {
	position: relative;
	padding: 78px 0;
}

.pep-section--soft {
	background: var(--pep-green-050);
}

.pep-section--warm {
	background: var(--pep-warm);
}

.pep-subheading {
	margin-bottom: 22px;
	font-size: clamp(1.45rem, 2.5vw, 2.35rem);
	/* font-weight: 750; */
	letter-spacing: -0.025em;
	line-height: 1.15;
}

.pep-lead {
	color: var(--pep-muted);
	font-size: 1.15rem;
	line-height: 1.75;
}

.pep-copy {
	color: var(--pep-muted);
	font-size: 1rem;
	line-height: 1.78;
}

.pep-copy p:last-child,
.pep-lead:last-child {
	margin-bottom: 0;
}

.pep-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	min-height: 50px;
	padding: 13px 25px;
	border: 2px solid var(--pep-green-700);
	border-radius: 4px;
	background: var(--pep-green-700);
	color: var(--pep-white) !important;
	font-weight: 750;
	line-height: 1.15;
	text-decoration: none !important;
	box-shadow: 0 10px 24px rgba(11, 124, 95, 0.22);
	transition: transform 180ms ease, box-shadow 180ms ease, background 180ms ease;
}

.pep-btn:hover,
.pep-btn:focus {
	background: var(--pep-green-900);
	border-color: var(--pep-green-900);
	color: var(--pep-white) !important;
	transform: translateY(-2px);
	box-shadow: 0 14px 28px rgba(11, 124, 95, 0.28);
}

.pep-btn--light {
	background: var(--pep-white);
	color: var(--pep-green-800) !important;
	box-shadow: none;
}

.pep-btn--light:hover,
.pep-btn--light:focus {
	background: var(--pep-green-100);
	color: var(--pep-green-900) !important;
}

/* HERO -------------------------------------------------------------- */
/* additional-hero.jpg */
.pep-hero {
	position: relative;
	min-height: 650px;
	display: flex;
	align-items: center;
	isolation: isolate;
	background-image:
		linear-gradient(90deg, rgba(2, 37, 29, 0.93) 0%, rgba(3, 49, 37, 0.79) 37%, rgba(5, 54, 39, 0.23) 72%, rgba(5, 54, 39, 0.04) 100%),
		url('./images/hero--es-rebuild--cropped--landscape.webp');
	background-repeat: no-repeat;
	background-size: cover;
	/* background-position: center top; */
	background-position: 70% 20%;
}

.pep-hero::before {
	content: '';
	position: absolute;
	inset: 0;
	z-index: -1;
	background: linear-gradient(0deg, rgba(4, 45, 34, 0.22), rgba(4, 45, 34, 0));
	pointer-events: none;
}

.pep-hero__content {
	max-width: 780px;
	padding: 94px 0 130px;
}

.pep-hero__kicker {
	display: inline-block;
	margin-bottom: 18px;
	color: #c9f3d9;
	font-size: clamp(1rem, 1.7vw, 1.35rem);
	font-weight: 800;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	text-shadow: 0 2px 18px rgba(0, 0, 0, 0.35);
}

.pep-hero h1 {
	max-width: 720px;
	margin: 0 0 24px;
	color: var(--pep-white);
	font-size: clamp(3rem, 6vw, 5.85rem);
	/* font-weight: 850; */
	letter-spacing: -0.055em;
	line-height: 0.98;
	text-shadow: 0 4px 28px rgba(0, 0, 0, 0.3);
}

.pep-hero__statement {
	max-width: 700px;
	margin: 0;
	color: var(--pep-white);
	font-size: clamp(1.35rem, 2.8vw, 2.25rem);
	font-weight: 400;
	line-height: 1.32;
	text-shadow: 0 3px 20px rgba(0, 0, 0, 0.42);
}

.pep-hero__statement strong {
	color: #d5f4df;
}

/* Animated Wavify layers supplied by /energise/components/wavify--energise.php */
.pep-hero > .container {
	position: relative;
	z-index: 2;
}

.pep-hero__animated-wave {
	position: absolute;
	right: 0;
	bottom: -1px;
	left: 0;
	z-index: 1;
	width: 100%;
	pointer-events: none;
}

.pep-hero__animated-wave .es-wave-container {
	width: 100%;
}

/* These override the default colours set inside wavify--energise.php. */
.pep-hero__animated-wave #es-wave-pre {
	fill: hsla(150, 30%, 80%, 0.35);
}

.pep-hero__animated-wave #es-wave-a {
	fill: hsla(150, 30%, 80%, 0.72);
}

.pep-hero__animated-wave #es-wave-b {
	fill: #ffffff;
}

/* GUIDE CTA --------------------------------------------------------- */
.pep-guide {
	background:
		radial-gradient(circle at 87% 22%, rgba(191, 225, 205, 0.42), transparent 28%),
		var(--pep-white);
}

.pep-guide__media {
	position: relative;
	min-height: 480px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.pep-guide__media::before {
	content: '';
	position: absolute;
	width: 76%;
	aspect-ratio: 1;
	border-radius: 50%;
	background: var(--pep-green-100);
}

.pep-guide__image {
	position: relative;
	z-index: 1;
	width: min(690px, 118%);
	max-width: none;
	border-radius: 6px;
	filter: drop-shadow(0 24px 30px rgba(24, 54, 46, 0.22));
	transform: rotate(-1deg);
}

.pep-guide__callout {
	margin-top: 28px;
	padding: 24px 26px;
	border-left: 5px solid var(--pep-green-600);
	background: var(--pep-green-050);
}

.pep-guide__callout p {
	margin: 0;
	color: var(--pep-green-900);
	font-weight: 650;
	line-height: 1.55;
}

/* CHALLENGE --------------------------------------------------------- */
.pep-intro-grid {
	display: grid;
	grid-template-columns: minmax(0, 1.05fr) minmax(320px, 0.95fr);
	gap: 64px;
	align-items: center;
}

.pep-stat-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 18px;
	margin-top: 45px;
}

.pep-stat {
	position: relative;
	min-height: 215px;
	padding: 28px 25px;
	border: 1px solid var(--pep-line);
	border-radius: 12px;
	background: rgba(255, 255, 255, 0.9);
	box-shadow: 0 13px 32px rgba(36, 78, 64, 0.08);
}

.pep-stat::before {
	content: '';
	position: absolute;
	top: 0;
	left: 25px;
	width: 56px;
	height: 5px;
	border-radius: 0 0 5px 5px;
	background: var(--pep-green-600);
}

.pep-stat__value {
	display: block;
	margin-bottom: 13px;
	color: var(--pep-green-700);
	font-size: clamp(2.2rem, 4vw, 3.55rem);
	font-weight: 850;
	letter-spacing: -0.045em;
	line-height: 1;
}

.pep-stat__value--words {
	font-size: clamp(1.45rem, 2.5vw, 2.15rem);
	line-height: 1.03;
}

.pep-stat p {
	margin: 0;
	color: var(--pep-muted);
	line-height: 1.62;
}

.pep-graph-card {
	padding: 18px;
	border: 1px solid var(--pep-line);
	border-radius: 16px;
	background: var(--pep-white);
	box-shadow: var(--pep-shadow);
}

.pep-graph-card img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 10px;
}

.pep-graph-card figcaption {
	padding: 16px 7px 4px;
	color: var(--pep-muted);
	font-size: 0.88rem;
	line-height: 1.5;
}

/* START HERE -------------------------------------------------------- */
.pep-checklist {
	margin: 26px 0 0;
	padding: 0;
	list-style: none;
}

.pep-checklist li {
	position: relative;
	margin-bottom: 11px;
	padding: 10px 0 10px 42px;
	/* color: var(--pep-ink); */
	font-weight: 520;
	line-height: 1.5;
}

.pep-checklist li::before {
	content: '\f00c';
	position: absolute;
	top: 8px;
	left: 0;
	width: 28px;
	height: 28px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background: var(--pep-green-100);
	color: var(--pep-green-700);
	font-family: FontAwesome;
	font-size: 0.78rem;
}


/* Question-based variation of the standard checklist ---------------- */

.pep-checklist.pep-question-list {
	margin-top: 14px;
}

.pep-checklist.pep-question-list li {
	margin-bottom: 3px;
	padding-top: 5px;
	padding-bottom: 5px;
	padding-left: 36px;
	line-height: 1.42;
}

.pep-checklist.pep-question-list li::before {
	content: '?';
	top: 4px;
	width: 24px;
	height: 24px;

	background: var(--pep-green-100);
	color: var(--pep-green-700);

	font-family: inherit;
	font-size: 0.9rem;
	font-weight: 800;
	line-height: 1;
}

/* Pull the supporting conclusion closer to the questions. */
.pep-checklist.pep-question-list + .pep-start-card {
	margin-top: 19px;
}









.pep-start-card {
	margin-top: 30px;
	padding: 25px 28px;
	border-radius: 10px;
	background: var(--pep-green-900);
	color: var(--pep-white);
}

.pep-start-card p {
	margin: 0;
	color: var(--pep-white);
	font-size: 1.04rem;
	line-height: 1.68;
}

.pep-start-card strong {
	color: #c9f3d9;
}

.pep-start-image {
	position: relative;
	min-height: 570px;
	border-radius: 16px;
	background: var(--pep-green-100);
	box-shadow: var(--pep-shadow);
	overflow: hidden;
}

.pep-start-image img {
	width: 100%;
	height: 100%;
	min-height: 570px;
	object-fit: cover;
}

.pep-start-image__label {
	position: absolute;
	right: 20px;
	bottom: 20px;
	left: 20px;
	padding: 15px 18px;
	border-radius: 7px;
	background: rgba(5, 69, 52, 0.91);
	color: var(--pep-white);
	font-size: 0.9rem;
	line-height: 1.45;
	backdrop-filter: blur(7px);
}

.pep-spoke-placeholder {
	padding: 28px 0;
	border-top: 1px solid var(--pep-line);
	border-bottom: 1px solid var(--pep-line);
	background: var(--pep-white);
}

.pep-spoke-placeholder__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 22px;
}

.pep-spoke-placeholder p {
	margin: 0;
	color: var(--pep-muted);
}

@media (min-width: 991.98px) {
	.pep-hero {
		/* Shows more of the crop and deliberately trims a little more
		   from the top of the supplied image on large desktop screens. */
		/* background-position: center 72%; */
		background-position: 70% 20%;
	}
}

@media (max-width: 991.98px) {
	.pep-section {
		padding: 64px 0;
	}

	.pep-hero {
		min-height: 590px;
		background-position: 57% center;
	}

	.pep-hero__content {
		max-width: 680px;
		padding: 80px 0 118px;
	}

	.pep-guide__media {
		min-height: 400px;
		margin-top: 25px;
	}

	.pep-guide__image {
		width: min(650px, 104%);
	}

	.pep-intro-grid {
		grid-template-columns: 1fr;
		gap: 40px;
	}

	.pep-stat-grid {
		grid-template-columns: 1fr;
	}

	.pep-stat {
		min-height: 0;
	}

	.pep-start-image,
	.pep-start-image img {
		min-height: 480px;
	}
}

@media (max-width: 767.98px) {
	.pep-section {
		padding: 52px 0;
	}
	
	/* additional-hero.jpg */
	.pep-hero {
		min-height: 610px;
		align-items: flex-end;
		background-image:
			linear-gradient(0deg, rgba(2, 38, 29, 0.96) 0%, rgba(3, 49, 37, 0.82) 53%, rgba(4, 54, 39, 0.22) 100%),
			url('./images/hero--es-rebuild--cropped--portrait.webp');
		background-position: 70% 20%;
	}

	.pep-hero__content {
		padding: 120px 0 105px;
	}

	.pep-hero h1 {
		font-size: clamp(2.8rem, 13vw, 4.35rem);
	}

	.pep-guide__media {
		min-height: 310px;
	}

	.pep-guide__image {
		width: 105%;
	}

	.pep-stat-grid {
		margin-top: 32px;
	}


	.pep-start-image,
	.pep-start-image img {
		min-height: 380px;
	}

	.pep-spoke-placeholder__inner {
		display: block;
	}

	.pep-spoke-placeholder .pep-btn {
		margin-top: 18px;
	}
}

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}

	.pep-btn {
		transition: none;
	}
}






/* --------------------------------------------------------------
   Sequential Protect. Place. Unlock. pulse
-------------------------------------------------------------- */

.pep-hero__kicker {
	color: rgba(201, 243, 217, 0.62);
	font-weight: 600;
}

/*
 * Inline-block is necessary because transforms do not apply
 * properly to ordinary inline text elements.
 */
.es-pulse-green-a,
.es-pulse-green-b,
.es-pulse-green-c {
	display: inline-block;
	color: rgba(201, 243, 217, 0.62);
	font-weight: 600;
	transform: scale(1);
	transform-origin: center bottom;

	animation-name: es-pulse-green;
	animation-duration: 12s;
	animation-timing-function: ease-in-out;
	animation-iteration-count: infinite;

	will-change: transform, color, text-shadow;
}

/* Start the three words two seconds apart. */
.es-pulse-green-a {
	animation-delay: 2s;
}

.es-pulse-green-b {
	animation-delay: 4.5s;
}

.es-pulse-green-c {
	animation-delay: 7s;
}

@keyframes es-pulse-green {

	/*
	 * 0–2 seconds:
	 * grow, darken and strengthen
	 */
	0% {
		color: rgba(201, 243, 217, 0.62);
		font-weight: 600;
		transform: scale(1);
		text-shadow: 0 2px 18px rgba(0, 0, 0, 0.22);
	}

	16.666% {
		color: #49bd89;
		font-weight: 800;
		transform: scale(1.12);
		text-shadow:
			0 0 16px rgba(73, 189, 137, 0.38),
			0 3px 20px rgba(0, 0, 0, 0.32);
	}

	/*
	 * 2–4 seconds:
	 * hold the emphasized appearance
	 */
	33.333% {
		color: #49bd89;
		font-weight: 800;
		transform: scale(1.12);
		text-shadow:
			0 0 16px rgba(73, 189, 137, 0.38),
			0 3px 20px rgba(0, 0, 0, 0.32);
	}

	/*
	 * 4–6 seconds:
	 * return to the quieter appearance
	 */
	50% {
		color: rgba(201, 243, 217, 0.62);
		font-weight: 600;
		transform: scale(1);
		text-shadow: 0 2px 18px rgba(0, 0, 0, 0.22);
	}

	/*
	 * 6–12 seconds:
	 * remain quiet until the loop restarts
	 */
	100% {
		color: rgba(201, 243, 217, 0.62);
		font-weight: 600;
		transform: scale(1);
		text-shadow: 0 2px 18px rgba(0, 0, 0, 0.22);
	}
}

/* Respect visitors who have requested reduced animation. */
@media (prefers-reduced-motion: reduce) {
	.es-pulse-green-a,
	.es-pulse-green-b,
	.es-pulse-green-c {
		animation: none;
		color: #49bd89;
		font-weight: 700;
		transform: none;
	}
}