/* About page: vision, mission, and core values. */
/* ===== Vision - Mission - Values ================================================= */
.vmv {
	--u: calc(100vw / 1840);
	--x0: max(24px, calc((100% - var(--ph-container, 1280px)) / 2 + 24px));
	--navy: var(--sfm-navy);
	--green: var(--sfm-green);
	--line: var(--sfm-line);
	--txt: var(--ab-text);
	font-family: var(--sfm-font-sans);
	background: #fff;
	padding: calc(var(--u) * 96) var(--x0) 0;
}

.vmv__inner {
	max-width: 1232px;
	margin: 0 auto;
}

.vmv__title {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: calc(var(--u) * 22);
	margin: 0 0 clamp(72px, calc(var(--u) * 120), 120px);
	font-weight: var(--sfm-weight-bold);
	font-size: clamp(38px, 2.5vw, 46px);
	line-height: 1;
	letter-spacing: .005em;
	color: var(--navy);
	text-align: center;
}

.vmv__title::before,
.vmv__title::after {
	content: "";
	flex: none;
	width: calc(var(--u) * 13);
	height: calc(var(--u) * 13);
	border-radius: 50%;
	background: var(--green);
}

.vm-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	column-gap: clamp(20px, calc(var(--u) * 29), 29px);
	row-gap: clamp(80px, calc(var(--u) * 90), 90px);
}

.vm-card {
	position: relative;
	border: 1px solid var(--green);
	border-radius: 22px;
	background: #fff;
	padding: clamp(58px, calc(var(--u) * 68), 68px) clamp(20px, calc(var(--u) * 30), 30px) 24px;
	text-align: center;
	min-height: clamp(200px, calc(var(--u) * 231), 231px);
	transition: background-color .35s ease, border-color .35s ease;
}

.vm-card__notch {
	position: absolute;
	top: -1px;
	left: 50%;
	width: 127px;
	height: 48px;
	transform: translateX(-50%);
	z-index: 1;
}

.vm-card__notch svg {
	display: block;
	width: 100%;
	height: 100%;
	overflow: visible;
}

.vm-card__notch .bowl {
	fill: #fff;
}

.vm-card__notch .ring-line {
	fill: none;
	stroke: var(--green);
	stroke-width: 1.2;
}

.vm-card__icon {
	--ico: clamp(72px, calc(var(--u) * 92), 92px);
	position: absolute;
	left: 50%;
	top: calc(var(--ico) * -0.62);
	width: var(--ico);
	height: var(--ico);
	transform: translateX(-50%);
	z-index: 2;
}

.vm-card__icon svg {
	display: block;
	width: 100%;
	height: 100%;
	overflow: visible;
	stroke: var(--green);
}

.vm-card__icon svg * {
	transform-box: fill-box;
	transform-origin: center;
}

.vm-card h3 {
	position: relative;
	z-index: 2;
	margin: 0 0 12px;
	font-weight: var(--sfm-weight-bold);
	font-size: clamp(21px, 1.45vw, 27px);
	line-height: 1.2;
	color: var(--navy);
}

.vm-card p {
	margin: 0;
	font-weight: var(--sfm-weight-bold);
	font-size: clamp(15px, 0.95vw, 17px);
	line-height: 1.5;
	color: var(--txt);
}

.vm-card h3,
.vm-card p {
	transition: color .35s ease;
}

.vm-card:hover {
	background-color: var(--green);
}

.vm-card:hover h3,
.vm-card:hover p {
	color: #fff;
}

/* vision icon: iris looks around, rays pulse */
.vm-card:hover .eye-iris {
	animation: vmvEyeLook 1.8s ease-in-out infinite;
}

.vm-card:hover .ray {
	animation: vmvRayPulse 1.2s ease-in-out infinite;
}

.vm-card:hover .ray.r2 {
	animation-delay: .15s;
}

.vm-card:hover .ray.r3 {
	animation-delay: .3s;
}

@keyframes vmvEyeLook {
	0%, 100% { transform: translateX(0); }
	25% { transform: translateX(-9px); }
	75% { transform: translateX(9px); }
}

@keyframes vmvRayPulse {
	0%, 100% { opacity: 1; transform: scale(1); }
	50% { opacity: .25; transform: scale(.6); }
}

/* mission icon: arrow straightens to 90deg then returns to its tilt */
.vmv .tg-arrow {
	transform-box: view-box;
	transform-origin: 42px 50px;
	transform: rotate(45deg);
}

.vm-card:hover .tg-arrow {
	animation: vmvArrowTurn 2.4s ease-in-out infinite;
}

@keyframes vmvArrowTurn {
	0%, 12% { transform: rotate(45deg); }
	38%, 62% { transform: rotate(0deg); }
	88%, 100% { transform: rotate(45deg); }
}

.vmv .tg-dot {
	fill: var(--green);
}

/* ===== core values ===== */
.values__title {
	margin: clamp(28px, calc(var(--u) * 38), 38px) 0 clamp(32px, calc(var(--u) * 46), 46px);
	text-align: center;
	font-weight: var(--sfm-weight-bold);
	font-size: clamp(22px, 1.5vw, 27px);
	line-height: 1.2;
	color: var(--navy);
}

.values-grid {
	display: grid;
	grid-template-columns: repeat(6, minmax(0, 1fr));
	align-items: stretch;
	gap: clamp(14px, 1vw, 20px);
}

.value-card {
	display: flex;
	flex-direction: column;
	justify-content: center;
	border: 1px solid var(--green);
	border-radius: 20px;
	background: #fff;
	min-height: 176px;
	padding: 26px 12px;
	text-align: center;
	transition: background-color .35s ease, border-color .35s ease;
}

.value-card h4 {
	margin: 0 0 14px;
	font-weight: var(--sfm-weight-bold);
	font-size: var(--sfm-text-md);
	line-height: 18px;
	color: var(--navy);
	transition: color .35s ease;
}

.value-card p {
	margin: 0;
	font-weight: var(--sfm-weight-bold);
	font-size: var(--sfm-text-sm);
	line-height: 18.5px;
	color: var(--txt);
	transition: color .35s ease;
}

.value-card:hover {
	background-color: var(--green);
}

.value-card:hover h4,
.value-card:hover p {
	color: #fff;
}

.vmv__divider,
.iso__divider {
	border: 0;
	width: 50vw;
	height: 1px;
	background: var(--line);
	margin: clamp(56px, calc(var(--u) * 80), 80px) auto 0;
}

@media (max-width: 1024px) {
	.vm-grid {
		grid-template-columns: 1fr;
	}

	.values-grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.vmv {
		padding: clamp(48px, calc(var(--u) * 90), 90px) var(--x0) 0;
	}
}

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

@media (prefers-reduced-motion: reduce) {
	.vm-card:hover .eye-iris,
	.vm-card:hover .ray,
	.vm-card:hover .tg-arrow {
		animation: none;
	}
}