/**
 * Founder section. Stacked under 1200px; artboard grid (--hm-u) above.
 */

.hm-founder {
	background: #f3f8fe var(--hm-founder-bg, none) center / cover no-repeat;
	color: var(--hm-color-text);
}

.hm-founder__inner {
	display: grid;
	gap: 32px;
	padding-block: 56px;
}

.hm-founder__photo {
	width: 100%;
	max-width: 440px;
	margin: 0 auto;
	overflow: hidden;
	border-radius: 16px;
	box-shadow: 0 24px 48px -28px rgb(10 47 96 / 0.45);
}

.hm-founder__photo img {
	display: block;
	width: 100%;
	height: 100%;
	aspect-ratio: 481 / 559;
	object-fit: cover;
}

.hm-founder__eyebrow {
	margin: 0;
	font-family: var(--hm-font-heading);
	font-size: 20px;
	font-weight: 600;
	color: var(--hm-color-primary);
}

.hm-founder__name {
	margin: 2px 0 0;
	font-family: var(--hm-font-heading);
	font-size: clamp(36px, 3vw + 24px, 52px);
	font-weight: 700;
	line-height: 1.1;
	color: var(--hm-color-primary);
}

.hm-founder__role {
	margin: 6px 0 0;
	font-size: 19px;
	color: var(--hm-color-primary);
}

.hm-founder__bio {
	margin: 20px 0 0;
	font-size: 17px;
	line-height: 1.45;
}

.hm-founder__quote {
	margin: 24px 0 0;
}

.hm-founder__quote blockquote {
	position: relative;
	margin: 0;
	padding-left: 46px;
}

.hm-founder__quote p {
	display: inline;
	margin: 0;
	font-family: var(--hm-font-heading);
	font-size: 21px;
	font-style: italic;
	font-weight: 700;
	line-height: 1.4;
	color: var(--hm-color-primary);
}

.hm-founder__mark {
	width: 36px;
	height: auto;
	color: #8dbaea;
}

.hm-founder__mark--open {
	position: absolute;
	top: 0;
	left: 0;
}

.hm-founder__mark--close {
	margin-left: 8px;
	vertical-align: -6px;
	transform: rotate(180deg);
}

.hm-founder__quote figcaption {
	margin-top: 10px;
	padding-left: 46px;
	font-size: 17px;
}

.hm-founder__btn {
	margin-top: 26px;
	background: linear-gradient(90deg, var(--hm-color-primary), color-mix(in srgb, var(--hm-color-highlight) 85%, #fff));
	box-shadow: 0 14px 28px -14px rgb(3 78 157 / 0.6);
}

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

.hm-card {
	display: flex;
	align-items: center;
	gap: 22px;
	padding: 24px;
	border-radius: 18px;
	background: rgb(224 237 252 / 0.72);
}

.hm-card__icon {
	display: grid;
	flex: none;
	place-items: center;
	width: 84px;
	height: 84px;
	border-radius: 50%;
	background: #d3e6fb;
	color: var(--hm-color-highlight);
}

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

.hm-card__title {
	margin: 0;
	font-family: var(--hm-font-heading);
	font-size: 24px;
	font-weight: 700;
	color: var(--hm-color-primary);
}

.hm-card__text {
	margin: 6px 0 0;
	font-size: 16px;
	line-height: 1.5;
	white-space: pre-wrap;
}

@media (max-width: 767px) {
	.hm-founder__inner {
		gap: 26px;
		padding-block: 40px 48px;
	}

	.hm-founder__photo img {
		aspect-ratio: 1 / 1;
		object-position: 50% 15%;
	}

	.hm-founder__content {
		text-align: left;
	}

	.hm-founder__btn {
		width: 100%;
	}

	.hm-card {
		gap: 16px;
		padding: 18px;
	}

	.hm-card__icon {
		width: 64px;
		height: 64px;
	}

	.hm-card__title {
		font-size: 21px;
	}

	.hm-card__text {
		font-size: 15px;
	}
}

@media (max-width: 1199px) {
	/* Let the quote wrap naturally instead of at the designed line break. */
	.hm-founder__quote br {
		display: none;
	}
}

@media (min-width: 768px) and (max-width: 1199px) {
	.hm-founder__inner {
		grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
		align-items: start;
	}

	.hm-founder__cards {
		grid-column: 1 / -1;
		grid-template-columns: repeat(3, 1fr);
	}

	.hm-card {
		flex-direction: column;
		align-items: flex-start;
	}
}

@media (min-width: 1200px) {
	.hm-founder .hm-container {
		padding-inline: calc(75 * var(--hm-u));
	}

	.hm-founder__inner {
		grid-template-columns: calc(481 * var(--hm-u)) minmax(0, 1fr) calc(636 * var(--hm-u));
		column-gap: calc(46 * var(--hm-u));
		align-items: start;
		padding-block: calc(58 * var(--hm-u)) calc(90 * var(--hm-u));
	}

	.hm-founder__cards {
		margin-left: calc(24 * var(--hm-u));
		gap: calc(12 * var(--hm-u));
	}

	.hm-founder__photo {
		max-width: none;
		height: calc(559 * var(--hm-u));
		border-radius: calc(16 * var(--hm-u));
	}

	.hm-founder__photo img {
		aspect-ratio: auto;
	}

	.hm-founder__content {
		padding-top: calc(4 * var(--hm-u));
	}

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

	.hm-founder__name {
		margin-top: calc(2 * var(--hm-u));
		font-size: calc(52 * var(--hm-u));
	}

	.hm-founder__role {
		margin-top: calc(6 * var(--hm-u));
		font-size: max(15px, calc(26 * var(--hm-u)));
	}

	.hm-founder__bio {
		margin-top: calc(18 * var(--hm-u));
		font-size: max(14px, calc(22.8 * var(--hm-u)));
		line-height: calc(33 * var(--hm-u));
	}

	.hm-founder__quote {
		margin-top: calc(22 * var(--hm-u));
	}

	.hm-founder__quote blockquote {
		padding-left: calc(50 * var(--hm-u));
	}

	.hm-founder__quote p {
		font-size: max(16px, calc(28 * var(--hm-u)));
		line-height: calc(38 * var(--hm-u));
	}

	.hm-founder__mark {
		width: calc(42 * var(--hm-u));
	}

	.hm-founder__quote figcaption {
		margin-top: calc(10 * var(--hm-u));
		padding-left: calc(50 * var(--hm-u));
		font-size: max(14px, calc(22 * var(--hm-u)));
	}

	.hm-founder__btn {
		min-width: calc(430 * var(--hm-u));
		min-height: max(44px, calc(68 * var(--hm-u)));
		margin-top: calc(26 * var(--hm-u));
		margin-left: calc(6 * var(--hm-u));
		font-size: max(14px, calc(21 * var(--hm-u)));
	}

	.hm-card {
		gap: calc(38 * var(--hm-u));
		min-height: calc(180 * var(--hm-u));
		padding: calc(30 * var(--hm-u)) calc(26 * var(--hm-u)) calc(30 * var(--hm-u)) calc(34 * var(--hm-u));
		border-radius: calc(18 * var(--hm-u));
	}

	.hm-card__icon {
		width: calc(120 * var(--hm-u));
		height: calc(120 * var(--hm-u));
	}

	.hm-card__title {
		font-size: max(18px, calc(30 * var(--hm-u)));
	}

	.hm-card__text {
		margin-top: calc(8 * var(--hm-u));
		font-size: max(14px, calc(21 * var(--hm-u)));
		line-height: calc(33 * var(--hm-u));
	}
}