/**
 * Inner pages: the shared page banner, page content, and the About page
 * sections (My Journey, Beyond Work).
 *
 * Phones: one column. 768–1199px: two-column arrangements. 1200px+: one
 * row each, sized on the 2000px artboard (--hm-u) like the home page.
 */

/* Page banner ------------------------------------------------------------- */

.hm-page-hero {
	--hm-page-hero-overlay: 0.75;
	--hm-page-hero-focus: 72%;

	position: relative;
	display: flex;
	align-items: center;
	min-height: 320px;
	overflow: hidden;
	background: linear-gradient(180deg, #e4f1fc 0%, #f4f9fe 100%);
	color: var(--hm-color-text);
	isolation: isolate;
}

.hm-page-hero__image {
	position: absolute;
	inset: 0;
	z-index: -2;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: var(--hm-page-hero-focus) 50%;
}

/* Light veil so the text reads on any photo (Customize → Page Banner). */
.hm-page-hero::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: linear-gradient(180deg, rgb(244 249 255 / var(--hm-page-hero-overlay)) 0%, rgb(244 249 255 / min(0.9, var(--hm-page-hero-overlay) * 1.1)) 72%, rgb(244 249 255 / calc(var(--hm-page-hero-overlay) * 0.5)) 100%);
}

.hm-page-hero__inner {
	position: relative;
	padding-block: 40px 64px;
}

.hm-breadcrumb ol {
	display: inline-flex;
	flex-wrap: wrap;
	align-items: center;
	margin: 0 0 18px;
	padding: 6px 14px;
	list-style: none;
	border-radius: var(--hm-radius-pill);
	background: rgb(255 255 255 / 0.75);
	box-shadow: 0 6px 16px -12px rgb(10 47 96 / 0.5);
	font-size: 13px;
	line-height: 1.4;
}

.hm-breadcrumb li + li::before {
	content: "›";
	margin-inline: 8px;
	opacity: 0.55;
}

.hm-breadcrumb a {
	color: var(--hm-color-highlight);
	text-decoration: none;
}

.hm-breadcrumb a:hover {
	text-decoration: underline;
	text-underline-offset: 3px;
}

.hm-breadcrumb [aria-current] {
	font-weight: 600;
	color: var(--hm-color-primary);
}

.hm-page-hero__eyebrow {
	margin: 0 0 8px;
	font-family: var(--hm-font-heading);
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--hm-color-highlight);
}

.hm-page-hero__title {
	margin: 0;
	font-family: var(--hm-font-heading);
	font-size: clamp(32px, 6vw + 10px, 48px);
	font-weight: 700;
	line-height: 1.1;
	color: var(--hm-color-primary);
	text-wrap: balance;
}

.hm-page-hero__text {
	max-width: 34em;
	margin: 12px 0 0;
	font-size: 16px;
	line-height: 1.55;
	text-wrap: pretty;
}

.hm-page-hero__wave {
	position: absolute;
	right: 0;
	bottom: -1px;
	left: 0;
	width: 100%;
	height: 34px;
	fill: var(--hm-color-white);
}

/* Page content (text written in the page editor) ------------------------ */

.hm-page__content {
	max-width: 900px;
	padding-block: var(--hm-section-space);
	font-size: 17px;
	line-height: 1.7;
}

.hm-page__content > :first-child {
	margin-top: 0;
}

.hm-page__content h2,
.hm-page__content h3 {
	font-family: var(--hm-font-heading);
	line-height: 1.25;
	color: var(--hm-color-primary);
}

.hm-page__content img {
	height: auto;
	border-radius: 12px;
}

/* Round icon badges ------------------------------------------------------ */

.hm-badge {
	--hm-tone: var(--hm-color-highlight);
	--hm-tone-2: color-mix(in srgb, var(--hm-color-highlight) 65%, #fff);

	display: grid;
	flex: none;
	place-items: center;
	width: var(--hm-badge-size, 64px);
	height: var(--hm-badge-size, 64px);
	border-radius: 50%;
	background: linear-gradient(145deg, var(--hm-tone-2), var(--hm-tone));
	color: var(--hm-color-white);
	box-shadow: 0 0 0 calc(var(--hm-badge-size, 64px) * 0.09) color-mix(in srgb, var(--hm-tone) 12%, #fff), 0 14px 26px -14px var(--hm-tone);
}

.hm-badge svg {
	width: 46%;
	height: 46%;
}

.hm-tone--green {
	--hm-tone: #1f8a4c;
	--hm-tone-2: #4cc27a;
}

.hm-tone--orange {
	--hm-tone: #e06d0a;
	--hm-tone-2: #ffa649;
}

.hm-tone--purple {
	--hm-tone: #6a3fc0;
	--hm-tone-2: #9d78f0;
}

.hm-tone--teal {
	--hm-tone: #0c8794;
	--hm-tone-2: #36c3cc;
}

/* My Journey --------------------------------------------------------------- */

.hm-journey {
	--hm-badge-size: 60px;

	padding-block: var(--hm-space-top) var(--hm-space-bottom);
	background: var(--hm-color-white);
	color: var(--hm-color-text);
}

.hm-journey__inner {
	display: grid;
	gap: 32px;
}

.hm-journey__title,
.hm-beyond__title {
	margin: 0;
	font-family: var(--hm-font-heading);
	font-size: clamp(28px, 2.4vw + 16px, 40px);
	font-weight: 700;
	line-height: 1.15;
	color: var(--hm-color-primary);
}

.hm-journey__subtitle {
	margin: 6px 0 0;
	font-family: var(--hm-font-heading);
	font-size: 17px;
	font-weight: 500;
	color: var(--hm-color-highlight);
}

/* Phones: a timeline, badges joined by a dotted line. */
.hm-journey__steps {
	display: grid;
	gap: 26px;
	margin: 26px 0 0;
	padding: 0;
	list-style: none;
}

.hm-step {
	position: relative;
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	align-items: start;
	gap: 18px;
}

.hm-step:not(:last-child)::after {
	content: "";
	position: absolute;
	top: calc(var(--hm-badge-size) + 10px);
	bottom: -18px;
	left: calc(var(--hm-badge-size) / 2 - 1px);
	width: 2px;
	background: radial-gradient(circle, #a9bfda 1px, transparent 1.5px) 0 0 / 2px 6px repeat-y;
}

.hm-step__body {
	padding-top: 6px;
}

.hm-step__title {
	display: block;
	font-family: var(--hm-font-heading);
	font-size: 18px;
	font-weight: 700;
	color: var(--hm-color-primary);
}

.hm-step__text {
	display: block;
	margin-top: 4px;
	font-size: 15px;
	line-height: 1.5;
}

/* Beliefs & values card */
.hm-values {
	padding: 22px 20px;
	border: 1px solid #d3ecdc;
	border-radius: 18px;
	background: linear-gradient(160deg, #f2faf5 0%, #e7f6ed 100%);
}

.hm-values__title {
	margin: 0 0 18px;
	font-family: var(--hm-font-heading);
	font-size: 22px;
	font-weight: 700;
	line-height: 1.2;
	color: var(--hm-color-primary);
}

.hm-values__title span {
	color: #1f8a4c;
}

.hm-values__list {
	display: grid;
	gap: 16px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.hm-value {
	display: flex;
	align-items: flex-start;
	gap: 14px;
}

.hm-value__icon {
	display: grid;
	flex: none;
	place-items: center;
	width: 44px;
	height: 44px;
	border-radius: 12px;
	background: linear-gradient(145deg, #2fb0be, #0f7f8c);
	color: var(--hm-color-white);
	box-shadow: 0 8px 16px -10px #0f7f8c;
}

.hm-value__icon svg {
	width: 52%;
	height: 52%;
}

.hm-value__title,
.hm-role__title {
	display: block;
	font-family: var(--hm-font-heading);
	font-size: 16px;
	font-weight: 700;
	line-height: 1.3;
	color: var(--hm-color-primary);
}

.hm-value__text,
.hm-role__text {
	display: block;
	margin-top: 3px;
	font-size: 14px;
	line-height: 1.45;
}

/* Signed quote */
.hm-quote {
	position: relative;
	margin: 0;
	padding: 24px 22px 22px;
	border: 1px solid #e3ebf5;
	border-radius: 18px;
	background: #f7fafe;
}

.hm-quote__mark {
	display: block;
	width: 38px;
	height: auto;
	color: color-mix(in srgb, var(--hm-color-highlight) 35%, #fff);
}

.hm-quote__text {
	margin: 10px 0 0;
}

.hm-quote__text p {
	margin: 0;
	font-family: var(--hm-font-script);
	font-size: 22px;
	line-height: 1.4;
	color: var(--hm-color-primary);
}

.hm-quote__by {
	margin: 8px 0 0;
	font-family: var(--hm-font-script);
	font-size: 16px;
	text-align: right;
}

.hm-quote__caption {
	margin-top: 16px;
	padding-top: 14px;
	border-top: 1px dashed #cfdced;
	text-align: right;
}

.hm-quote__sign {
	display: inline-block;
	margin-bottom: 4px;
	font-family: var(--hm-font-script);
	font-size: 32px;
	line-height: 1;
	color: var(--hm-color-primary);
	transform: rotate(-6deg);
}

.hm-quote__signature {
	display: block;
	max-width: 150px;
	max-height: 64px;
	margin: 0 0 6px auto;
}

.hm-quote__name {
	display: block;
	font-family: var(--hm-font-heading);
	font-size: 16px;
	font-weight: 700;
	color: var(--hm-color-primary);
}

.hm-quote__role {
	display: block;
	margin-top: 2px;
	font-size: 13.5px;
	line-height: 1.45;
}

/* Beyond Work ------------------------------------------------------------- */

.hm-beyond {
	--hm-badge-size: 46px;

	padding-block: var(--hm-space-top) var(--hm-space-bottom);
	overflow: hidden;
	background: linear-gradient(180deg, #eef6fe 0%, #e3effb 100%);
	color: var(--hm-color-text);
}

.hm-beyond__inner {
	display: grid;
	gap: 36px;
}

.hm-beyond__subtitle {
	margin: 6px 0 0;
	font-family: var(--hm-font-heading);
	font-size: 18px;
	font-weight: 600;
	color: #1f8a4c;
}

.hm-beyond__text {
	max-width: 34em;
	margin: 14px 0 0;
	font-size: 16px;
	line-height: 1.6;
}

.hm-beyond__btn {
	margin-top: 24px;
}

/* Photo collage: white-framed prints, slightly turned. */
.hm-collage__grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 14px;
}

.hm-collage__photo {
	margin: 0;
	padding: 5px;
	border-radius: 6px;
	background: var(--hm-color-white);
	box-shadow: 0 16px 30px -18px rgb(10 47 96 / 0.55);
	transition: transform 0.3s ease;
}

.hm-collage__photo img {
	display: block;
	width: 100%;
	height: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	border-radius: 3px;
}

.hm-collage__photo--main {
	grid-column: 1 / -1;
}

.hm-collage__photo--main img {
	aspect-ratio: 3 / 2;
}

.hm-collage__photo--1 { transform: rotate(-2.5deg); }
.hm-collage__photo--2 { transform: rotate(2deg); }
.hm-collage__photo--3 { transform: rotate(2.5deg); }
.hm-collage__photo--4 { transform: rotate(-2deg); }

.hm-collage__photo:hover {
	transform: none;
}

.hm-collage__tagline {
	margin: 18px 0 0;
	font-family: var(--hm-font-script);
	font-size: 24px;
	line-height: 1.2;
	text-align: center;
	color: var(--hm-color-primary);
}

.hm-collage__tagline span {
	display: block;
	transform: rotate(-2deg);
}

.hm-collage__tagline svg {
	display: block;
	width: 190px;
	height: auto;
	margin: 2px auto 0;
	color: var(--hm-color-highlight);
}

/* Roles card */
.hm-roles {
	display: grid;
	gap: 18px;
	margin: 0;
	padding: 22px 20px;
	list-style: none;
	border: 1px solid #dde8f4;
	border-radius: 18px;
	background: rgb(255 255 255 / 0.88);
	box-shadow: 0 20px 44px -32px rgb(10 47 96 / 0.5);
}

.hm-role {
	display: flex;
	align-items: center;
	gap: 16px;
}

/* Tablets ------------------------------------------------------------------- */

@media (min-width: 768px) {
	.hm-page-hero {
		min-height: 360px;
	}

	/* Fade from the left only, so the photo shows on the right. */
	.hm-page-hero::before {
		background: linear-gradient(90deg, rgb(244 249 255 / var(--hm-page-hero-overlay)) 0%, rgb(244 249 255 / calc(var(--hm-page-hero-overlay) * 0.85)) 40%, rgb(244 249 255 / 0) 72%);
	}

	.hm-page-hero__image {
		object-position: 50% 50%;
	}

	.hm-page-hero__inner {
		padding-block: 56px 80px;
	}

	.hm-page-hero__text,
	.hm-page-hero__title {
		max-width: 60%;
	}

	.hm-page-hero__wave {
		height: 50px;
	}

	/* Steps in a row, joined by arrows. */
	.hm-journey__steps {
		grid-template-columns: repeat(var(--hm-steps, 3), minmax(0, 1fr));
		column-gap: 52px;
	}

	.hm-step {
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 16px;
		text-align: center;
	}

	.hm-step:not(:last-child)::after {
		top: calc(var(--hm-badge-size) / 2 - 8px);
		bottom: auto;
		left: calc(100% + 12px);
		width: 28px;
		height: 16px;
		background: #8ea7c6;
		-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 16'%3E%3Cpath d='M1.5 8h24M19 2l6.5 6-6.5 6' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
		mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 16'%3E%3Cpath d='M1.5 8h24M19 2l6.5 6-6.5 6' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
	}

	.hm-step__body {
		padding-top: 0;
	}

	.hm-journey__inner {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 28px;
	}

	.hm-journey__story {
		grid-column: 1 / -1;
	}

	/* Collage: the large photo in the middle, two small ones each side. */
	.hm-beyond__inner {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		grid-template-areas:
			"intro roles"
			"collage collage";
		align-items: center;
	}

	.hm-beyond__intro { grid-area: intro; }
	.hm-collage { grid-area: collage; }
	.hm-roles { grid-area: roles; }

	.hm-collage__grid {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1.7fr) minmax(0, 1fr);
		align-items: center;
		gap: 16px 12px;
	}

	.hm-collage__photo--main {
		z-index: 1;
		grid-row: 1 / 3;
		grid-column: 2;
		align-self: stretch;
		transform: rotate(-1deg);
	}

	.hm-collage__photo--main img {
		aspect-ratio: auto;
	}

	.hm-collage__photo--1 { grid-area: 1 / 1; }
	.hm-collage__photo--2 { grid-area: 2 / 1; }
	.hm-collage__photo--3 { grid-area: 1 / 3; }
	.hm-collage__photo--4 { grid-area: 2 / 3; }
}

/* Desktop (artboard) ------------------------------------------------------ */

@media (min-width: 1200px) {
	.hm-page-hero {
		min-height: max(380px, calc(480 * var(--hm-u)));
	}

	.hm-page-hero__inner {
		padding-block: calc(80 * var(--hm-u)) calc(120 * var(--hm-u));
	}

	.hm-breadcrumb ol {
		margin-bottom: calc(24 * var(--hm-u));
		padding: calc(8 * var(--hm-u)) calc(18 * var(--hm-u));
		font-size: max(13px, calc(16 * var(--hm-u)));
	}

	.hm-page-hero__eyebrow {
		margin-bottom: calc(10 * var(--hm-u));
		font-size: max(13px, calc(18 * var(--hm-u)));
	}

	.hm-page-hero__title {
		max-width: calc(900 * var(--hm-u));
		font-size: calc(68 * var(--hm-u));
	}

	.hm-page-hero__text {
		max-width: calc(720 * var(--hm-u));
		margin-top: calc(16 * var(--hm-u));
		font-size: max(15px, calc(23 * var(--hm-u)));
	}

	.hm-page-hero__wave {
		height: calc(80 * var(--hm-u));
	}

	.hm-journey {
		--hm-badge-size: calc(84 * var(--hm-u));
	}

	.hm-journey__inner {
		grid-template-columns: minmax(0, 1.5fr) minmax(0, 1.05fr) minmax(0, 0.85fr);
		column-gap: calc(48 * var(--hm-u));
		align-items: center;
	}

	.hm-journey__story {
		grid-column: auto;
	}

	.hm-journey__title,
	.hm-beyond__title {
		font-size: calc(50 * var(--hm-u));
	}

	.hm-journey__subtitle {
		font-size: max(15px, calc(24 * var(--hm-u)));
	}

	.hm-journey__steps {
		column-gap: calc(70 * var(--hm-u));
		margin-top: calc(44 * var(--hm-u));
	}

	.hm-step:not(:last-child)::after {
		left: calc(100% + 18 * var(--hm-u));
		width: calc(34 * var(--hm-u));
	}

	.hm-step__title {
		font-size: max(15px, calc(22 * var(--hm-u)));
	}

	.hm-step__text {
		font-size: max(13px, calc(17.5 * var(--hm-u)));
	}

	.hm-values {
		padding: calc(30 * var(--hm-u)) calc(30 * var(--hm-u));
	}

	.hm-values__title {
		margin-bottom: calc(24 * var(--hm-u));
		font-size: max(18px, calc(28 * var(--hm-u)));
	}

	.hm-values__list {
		gap: calc(20 * var(--hm-u));
	}

	.hm-value__icon {
		width: calc(54 * var(--hm-u));
		height: calc(54 * var(--hm-u));
	}

	.hm-value__title,
	.hm-role__title {
		font-size: max(14px, calc(19 * var(--hm-u)));
	}

	.hm-value__text,
	.hm-role__text {
		font-size: max(13px, calc(16 * var(--hm-u)));
	}

	/* The quote sits beside the card behind a hairline, as in the design. */
	.hm-quote {
		padding: calc(8 * var(--hm-u)) 0 calc(8 * var(--hm-u)) calc(40 * var(--hm-u));
		border: 0;
		border-left: 1px solid #dfe7f1;
		border-radius: 0;
		background: none;
	}

	.hm-quote__mark {
		width: calc(48 * var(--hm-u));
	}

	.hm-quote__text p {
		font-size: max(17px, calc(28 * var(--hm-u)));
	}

	.hm-quote__by {
		font-size: max(14px, calc(19 * var(--hm-u)));
	}

	.hm-quote__caption {
		border-top: 0;
	}

	.hm-quote__sign {
		font-size: max(24px, calc(40 * var(--hm-u)));
	}

	.hm-quote__name {
		font-size: max(14px, calc(19 * var(--hm-u)));
	}

	.hm-quote__role {
		font-size: max(12px, calc(15.5 * var(--hm-u)));
	}

	.hm-beyond {
		--hm-badge-size: calc(60 * var(--hm-u));
	}

	.hm-beyond__inner {
		grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.6fr) minmax(0, 0.78fr);
		grid-template-areas: "intro collage roles";
		column-gap: calc(48 * var(--hm-u));
	}

	.hm-beyond__subtitle {
		font-size: max(15px, calc(24 * var(--hm-u)));
	}

	.hm-beyond__text {
		margin-top: calc(20 * var(--hm-u));
		font-size: max(14px, calc(19 * var(--hm-u)));
	}

	.hm-beyond__btn {
		margin-top: calc(30 * var(--hm-u));
	}

	.hm-collage__tagline {
		margin-top: calc(22 * var(--hm-u));
		font-size: max(18px, calc(32 * var(--hm-u)));
	}

	.hm-collage__tagline svg {
		width: calc(260 * var(--hm-u));
	}

	.hm-roles {
		gap: calc(24 * var(--hm-u));
		padding: calc(30 * var(--hm-u)) calc(28 * var(--hm-u));
	}

	.hm-role {
		gap: calc(20 * var(--hm-u));
	}
}

@media (prefers-reduced-motion: reduce) {
	.hm-collage__photo {
		transition: none;
	}
}

/* Our Impact: shared section head ---------------------------------------- */

/*
 * Each section opens with its heading over a wide photo (phones: a tall
 * one), set from the Customizer as --hm-head-bg / --hm-head-bg-m. The
 * section's top spacing sits inside the photo.
 */
.hm-iwwd,
.hm-hope {
	padding-bottom: var(--hm-space-bottom);
	color: var(--hm-color-text);
}

.hm-iwwd {
	background: linear-gradient(180deg, #f2f9f5 0%, #f8fbff 60%, var(--hm-color-white) 100%);
}

.hm-hope {
	background: linear-gradient(180deg, #edf5fd 0%, #f6faff 60%, var(--hm-color-white) 100%);
}

.hm-impact-head {
	background: var(--hm-head-bg-m, var(--hm-head-bg, none)) 50% 100% / cover no-repeat;
}

.hm-impact-head__inner {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 22px;
	min-height: var(--hm-head-min);
	padding-top: var(--hm-space-top);
	padding-bottom: 32px;
}

/*
 * Phones: tall enough that the photo at the bottom of the picture shows
 * below the text.
 */
.hm-iwwd {
	--hm-head-min: 185cqi;
}

.hm-hope {
	--hm-head-min: 120cqi;
}

.hm-impact-eyebrow {
	position: relative;
	margin: 0 0 8px;
	padding-left: 12px;
	font-family: var(--hm-font-heading);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: #0b2a5e;
}

.hm-impact-eyebrow::before {
	content: "";
	position: absolute;
	top: 0.2em;
	bottom: 0.2em;
	left: 0;
	width: 3px;
	border-radius: 2px;
	background: var(--hm-color-highlight);
}

.hm-impact-eyebrow span {
	color: var(--hm-color-highlight);
}

.hm-iwwd .hm-impact-eyebrow::before {
	background: #1f8a4c;
}

.hm-impact-title {
	margin: 0;
	font-family: var(--hm-font-heading);
	font-size: clamp(32px, 3vw + 18px, 52px);
	font-weight: 800;
	line-height: 1.08;
	color: #0b2a5e;
}

.hm-impact-text {
	max-width: 34em;
	margin: 12px 0 0;
	font-size: 16px;
	line-height: 1.6;
}

.hm-impact-quote {
	margin: 0;
	font-family: var(--hm-font-script);
	font-size: 20px;
	line-height: 1.4;
	color: #0b2a5e;
}

.hm-impact-quote p {
	margin: 0;
}

/* Green box of handwritten lines. */
.hm-iwwd__tagline {
	position: relative;
	margin: 0;
	padding: 16px 52px 16px 22px;
	border-radius: 14px;
	background: linear-gradient(135deg, #2c9a58 0%, #15723f 100%);
	box-shadow: 0 18px 34px -20px rgb(15 90 50 / 0.8);
	font-family: var(--hm-font-script);
	font-size: 19px;
	line-height: 1.35;
	color: var(--hm-color-white);
}

.hm-iwwd__tagline span {
	display: block;
}

.hm-iwwd__tagline span:nth-child(2) {
	padding-left: 0.6em;
}

.hm-iwwd__tagline span:nth-child(3) {
	padding-left: 1.2em;
}

.hm-iwwd__leaf {
	position: absolute;
	right: 16px;
	bottom: 14px;
	width: 26px;
	height: 26px;
	color: #b8f0c8;
}

/* Frosted card so the quote reads over the photo. */
.hm-iwwd__quote {
	max-width: 22em;
	padding: 10px 16px;
	border-radius: 14px;
	background: rgb(255 255 255 / 0.72);
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
	font-size: 16px;
}

.hm-hope__quote {
	position: relative;
	max-width: 20em;
	padding-left: 40px;
	transform: rotate(-3deg);
}

.hm-hope__mark {
	position: absolute;
	top: 2px;
	left: 0;
	width: 28px;
	height: auto;
	color: #0b2a5e;
}

.hm-hope__heart {
	display: inline-block;
	width: 22px;
	height: auto;
	margin-left: 6px;
	vertical-align: -3px;
	color: var(--hm-color-highlight);
}

/* Card grid (both sections) */
.hm-impact-grid {
	display: grid;
	gap: 18px;
	margin: 0;
	padding: 0;
	list-style: none;
}

/* What We Do cards */
.hm-cause {
	display: flex;
	flex-direction: column;
	padding: 18px;
	border: 1px solid #e3ebf5;
	border-radius: 14px;
	background: var(--hm-color-white);
	box-shadow: 0 16px 34px -26px rgb(10 47 96 / 0.5);
	transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.hm-cause:hover {
	box-shadow: 0 22px 40px -24px rgb(10 47 96 / 0.55);
	transform: translateY(-3px);
}

.hm-cause__head {
	display: flex;
	align-items: flex-start;
	gap: 14px;
}

.hm-cause__icon {
	display: grid;
	flex: none;
	place-items: center;
	width: 52px;
	height: 52px;
	border-radius: 50%;
	background: linear-gradient(145deg, color-mix(in srgb, var(--hm-color-highlight) 70%, #fff), var(--hm-color-highlight));
	color: var(--hm-color-white);
	box-shadow: 0 0 0 5px var(--hm-color-button-soft);
}

.hm-cause__icon svg {
	width: 50%;
	height: 50%;
}

.hm-cause__title,
.hm-hope-card__title {
	margin: 0;
	font-family: var(--hm-font-heading);
	font-size: 19px;
	font-weight: 700;
	line-height: 1.25;
}

.hm-cause__title a,
.hm-hope-card__title a {
	color: #0b2a5e;
	text-decoration: none;
}

.hm-cause__title a:hover,
.hm-hope-card__title a:hover {
	color: var(--hm-color-highlight);
}

.hm-cause__tagline {
	margin: 4px 0 0;
	font-size: 14px;
	line-height: 1.4;
}

.hm-cause__points {
	display: grid;
	gap: 5px;
	margin: 14px 0 0;
	padding: 0;
	list-style: none;
	font-size: 14px;
	line-height: 1.4;
}

.hm-cause__points li {
	position: relative;
	padding-left: 14px;
}

.hm-cause__points li::before {
	content: "";
	position: absolute;
	top: 0.55em;
	left: 0;
	width: 5px;
	height: 5px;
	border-radius: 50%;
	background: var(--hm-color-highlight);
}

.hm-cause__media,
.hm-hope-card__media {
	display: block;
	overflow: hidden;
	background: linear-gradient(135deg, #cfe3fa, #8fbaea);
}

.hm-cause__media {
	margin-top: 16px;
	border-radius: 10px;
}

.hm-cause__media img,
.hm-hope-card__media img {
	display: block;
	width: 100%;
	height: 100%;
	aspect-ratio: 16 / 8;
	object-fit: cover;
	transition: transform 0.4s ease;
}

.hm-cause:hover .hm-cause__media img,
.hm-hope-card:hover .hm-hope-card__media img {
	transform: scale(1.05);
}

/* Pinned to the bottom so the links line up across a row. */
.hm-cause__more {
	display: inline-flex;
	align-self: flex-start;
	align-items: center;
	gap: 8px;
	margin-top: auto;
	padding-top: 14px;
	font-family: var(--hm-font-heading);
	font-size: 14px;
	font-weight: 600;
	color: var(--hm-color-highlight);
	text-decoration: none;
}

.hm-cause__more svg {
	width: 14px;
	height: auto;
	transition: transform 0.2s ease;
}

.hm-cause__more:hover svg {
	transform: translateX(3px);
}

/* Stories of Hope cards */
.hm-hope-card {
	display: flex;
	flex-direction: column;
	overflow: hidden;
	border: 1px solid #e3ebf5;
	border-radius: 14px;
	background: var(--hm-color-white);
	box-shadow: 0 16px 34px -26px rgb(10 47 96 / 0.5);
	transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.hm-hope-card:hover {
	box-shadow: 0 22px 40px -24px rgb(10 47 96 / 0.55);
	transform: translateY(-3px);
}

.hm-hope-card__body {
	display: flex;
	flex: 1;
	flex-direction: column;
	align-items: flex-start;
	padding: 16px 18px 20px;
}

.hm-hope-card__badge {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin-bottom: 10px;
	padding: 4px 10px;
	border-radius: var(--hm-radius-pill);
	background: var(--hm-color-button-soft);
	font-family: var(--hm-font-heading);
	font-size: 11.5px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--hm-color-highlight);
}

.hm-hope-card__badge svg {
	width: 13px;
	height: 13px;
}

.hm-hope-card__text {
	margin: 8px 0 16px;
	font-size: 14.5px;
	line-height: 1.5;
}

/* Pinned to the bottom so the buttons line up across a row. */
.hm-hope-card__btn {
	min-height: 40px;
	margin-top: auto;
	padding-inline: 18px;
	font-size: 14px;
}

@media (min-width: 600px) {
	.hm-impact-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 768px) {
	.hm-impact-head {
		background-image: var(--hm-head-bg, none);
		background-position: 100% 100%;
	}

	.hm-iwwd,
	.hm-hope {
		--hm-head-min: 0px;
	}

	/* Tablets: one column on the light left, the photo shows on the right. */
	.hm-impact-head__inner {
		display: grid;
		grid-template-columns: minmax(0, 60%);
		align-items: start;
		gap: 22px;
		padding-bottom: 48px;
	}

	.hm-iwwd__tagline {
		justify-self: start;
	}

	.hm-hope__quote {
		margin: 8px 0 0 6px;
	}

	.hm-impact-grid {
		gap: 20px;
	}
}

@media (min-width: 992px) {
	.hm-impact-grid {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

@media (min-width: 1200px) {
	/* Intro on the light left of the photo, the box and quote beside it. */
	.hm-impact-head__inner {
		grid-template-columns: calc(700 * var(--hm-u)) auto calc(330 * var(--hm-u));
		column-gap: calc(56 * var(--hm-u));
		padding-bottom: calc(70 * var(--hm-u));
	}

	.hm-iwwd {
		--hm-head-min: calc(520 * var(--hm-u));
	}

	.hm-hope {
		--hm-head-min: calc(440 * var(--hm-u));
	}

	.hm-hope .hm-impact-head__inner {
		grid-template-columns: calc(780 * var(--hm-u)) calc(420 * var(--hm-u));
		column-gap: calc(140 * var(--hm-u));
	}

	.hm-impact-eyebrow {
		margin-bottom: calc(10 * var(--hm-u));
		padding-left: calc(14 * var(--hm-u));
		font-size: max(12px, calc(19 * var(--hm-u)));
	}

	.hm-impact-title {
		font-size: calc(68 * var(--hm-u));
	}

	.hm-impact-text {
		margin-top: calc(18 * var(--hm-u));
		font-size: max(14px, calc(21 * var(--hm-u)));
	}

	.hm-iwwd__tagline {
		align-self: center;
		padding: calc(22 * var(--hm-u)) calc(70 * var(--hm-u)) calc(22 * var(--hm-u)) calc(28 * var(--hm-u));
		border-radius: calc(16 * var(--hm-u));
		font-size: max(16px, calc(27 * var(--hm-u)));
	}

	.hm-iwwd__leaf {
		right: calc(22 * var(--hm-u));
		bottom: calc(20 * var(--hm-u));
		width: calc(36 * var(--hm-u));
		height: calc(36 * var(--hm-u));
	}

	.hm-iwwd__quote {
		align-self: start;
		margin-top: calc(10 * var(--hm-u));
		max-width: none;
		padding: calc(18 * var(--hm-u)) calc(22 * var(--hm-u));
		font-size: max(15px, calc(23 * var(--hm-u)));
	}

	.hm-hope__quote {
		align-self: center;
		margin: calc(40 * var(--hm-u)) 0 0;
		padding-left: calc(56 * var(--hm-u));
		font-size: max(17px, calc(30 * var(--hm-u)));
	}

	.hm-hope__mark {
		width: calc(40 * var(--hm-u));
	}

	.hm-hope__heart {
		width: calc(30 * var(--hm-u));
	}

	.hm-impact-grid {
		gap: calc(26 * var(--hm-u));
	}

	.hm-cause {
		padding: calc(22 * var(--hm-u));
		border-radius: calc(16 * var(--hm-u));
	}

	.hm-cause__head {
		gap: calc(16 * var(--hm-u));
	}

	.hm-cause__icon {
		width: calc(64 * var(--hm-u));
		height: calc(64 * var(--hm-u));
	}

	.hm-cause__title,
	.hm-hope-card__title {
		font-size: max(15px, calc(23 * var(--hm-u)));
	}

	.hm-cause__tagline {
		font-size: max(12px, calc(16 * var(--hm-u)));
	}

	.hm-cause__points {
		margin-top: calc(16 * var(--hm-u));
		font-size: max(12px, calc(15.5 * var(--hm-u)));
	}

	.hm-cause__more {
		padding-top: calc(16 * var(--hm-u));
		font-size: max(12px, calc(16 * var(--hm-u)));
	}

	.hm-hope-card {
		border-radius: calc(16 * var(--hm-u));
	}

	.hm-hope-card__body {
		padding: calc(18 * var(--hm-u)) calc(22 * var(--hm-u)) calc(24 * var(--hm-u));
	}

	.hm-hope-card__badge {
		font-size: max(10px, calc(13 * var(--hm-u)));
	}

	.hm-hope-card__text {
		font-size: max(12px, calc(16 * var(--hm-u)));
	}

	.hm-hope-card__btn {
		min-height: max(36px, calc(46 * var(--hm-u)));
		font-size: max(12px, calc(16 * var(--hm-u)));
	}
}