/* About page. */

.jmu-about-hero,
.jmu-about-origin,
.jmu-about-standard,
.jmu-about-proofwall,
.jmu-about-process-note,
.jmu-about-credentials,
.jmu-about-close {
	box-sizing: border-box;
	width: auto;
	max-width: none;
	margin-block-start: 0 !important;
	margin-right: 0 !important;
	margin-left: 0 !important;
	padding-inline: clamp(var(--space-md), 4vw, var(--space-xl));
}

.wp-block-group.jmu-about-hero,
.wp-block-group.jmu-about-origin,
.wp-block-group.jmu-about-standard,
.wp-block-group.jmu-about-proofwall,
.wp-block-group.jmu-about-process-note,
.wp-block-group.jmu-about-credentials,
.wp-block-group.jmu-about-close {
	width: auto;
	max-width: none;
	margin-right: 0 !important;
	margin-left: 0 !important;
}

.jmu-about-hero {
	position: relative;
	min-height: clamp(300px, 38vh, 430px);
	padding-block: clamp(var(--space-lg), 4vw, var(--space-xl));
	background:
		linear-gradient(
			135deg,
			color-mix(in srgb, var(--bg-dark) 98%, transparent) 0%,
			color-mix(in srgb, var(--bg-dark) 88%, transparent) 56%,
			color-mix(in srgb, var(--color-primary) 68%, var(--bg-dark)) 100%
		),
		var(--bg-dark);
	color: var(--text-inverse);
	overflow: hidden;
}

.jmu-about-hero::after {
	content: "";
	position: absolute;
	inset: auto 0 0;
	height: var(--border-width-lg);
	background: linear-gradient(90deg, var(--color-primary), color-mix(in srgb, var(--white) 42%, transparent));
}

.jmu-about-hero__inner,
.jmu-about-origin__inner,
.jmu-about-standard__inner,
.jmu-about-process-note__inner,
.jmu-about-credentials__inner,
.jmu-about-close__inner {
	width: 100%;
	max-width: 1240px;
	margin: 0 auto;
}

.jmu-about-hero__inner {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(320px, 500px);
	gap: clamp(var(--space-lg), 6vw, var(--space-3xl));
	align-items: center;
}

.jmu-about-hero__copy,
.jmu-about-origin__story,
.jmu-about-process-note__copy,
.jmu-about-credentials__head,
.jmu-about-close__inner {
	display: grid;
	gap: var(--space-md);
	min-width: 0;
}

.jmu-about-kicker {
	margin: 0;
	color: var(--color-primary);
	font-family: var(--font-sans);
	font-size: var(--text-sm);
	font-weight: var(--font-weight-bold);
	letter-spacing: var(--letter-spacing-eyebrow);
	line-height: var(--line-height-normal);
	text-transform: uppercase;
}

.jmu-about-hero .jmu-about-kicker,
.jmu-about-close .jmu-about-kicker {
	color: color-mix(in srgb, var(--text-inverse) 78%, transparent);
}

.jmu-about-hero__headline {
	max-width: 820px;
	margin: 0;
	color: var(--text-inverse);
	font-family: var(--font-display);
	font-size: clamp(2.25rem, 4vw, 3.75rem);
	font-weight: var(--font-weight-extrabold);
	letter-spacing: 0;
	line-height: var(--line-height-tight);
	text-wrap: balance;
}

.jmu-about-hero__lead {
	max-width: 62ch;
	margin: 0;
	color: color-mix(in srgb, var(--text-inverse) 88%, transparent);
	font-size: var(--text-lg);
	line-height: var(--line-height-relaxed);
}

.jmu-about-hero__actions,
.jmu-about-close__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-sm);
	margin: 0;
}

.jmu-about-button .wp-block-button__link,
.jmu-about-process-note__contact a {
	box-sizing: border-box;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 46px;
	padding: var(--space-xs) var(--space-md);
	border-radius: var(--radius-sm);
	font-family: var(--font-sans);
	font-size: var(--text-sm);
	font-weight: var(--font-weight-bold);
	line-height: var(--line-height-tight);
	text-decoration: none;
	transition:
		background var(--duration-normal) var(--ease-default),
		border-color var(--duration-normal) var(--ease-default),
		color var(--duration-normal) var(--ease-default),
		transform var(--duration-fast) var(--ease-default);
}

.jmu-about-button--primary .wp-block-button__link {
	background: var(--color-primary);
	color: var(--text-inverse);
}

.jmu-about-button--primary .wp-block-button__link:hover,
.jmu-about-button--primary .wp-block-button__link:focus-visible {
	background: var(--color-primary-hover);
	transform: translateY(-1px);
}

.jmu-about-button--secondary .wp-block-button__link {
	border: var(--border-width) solid color-mix(in srgb, var(--white) 54%, transparent);
	background: color-mix(in srgb, var(--white) 10%, transparent);
	color: var(--text-inverse);
}

.jmu-about-button--secondary .wp-block-button__link:hover,
.jmu-about-button--secondary .wp-block-button__link:focus-visible {
	border-color: var(--text-inverse);
	background: color-mix(in srgb, var(--white) 16%, transparent);
	transform: translateY(-1px);
}

.jmu-about-button .wp-block-button__link:focus-visible {
	outline: 2px solid var(--text-inverse);
	outline-offset: 3px;
}

.jmu-about-hero__field-note {
	position: relative;
	display: grid;
	gap: var(--space-sm);
	margin: 0;
}

.jmu-about-hero__media {
	position: relative;
	overflow: hidden;
	aspect-ratio: 16 / 9;
	border: var(--border-width) solid color-mix(in srgb, var(--white) 18%, transparent);
	border-radius: var(--radius-lg);
	background: var(--bg-dark);
	box-shadow: var(--shadow-xl);
}

.jmu-about-hero__media::after {
	content: "";
	position: absolute;
	inset: 0;
	background:
		linear-gradient(180deg, transparent 30%, color-mix(in srgb, var(--black) 30%, transparent)),
		linear-gradient(90deg, color-mix(in srgb, var(--color-primary) 24%, transparent), transparent 42%);
	pointer-events: none;
}

.jmu-about-hero__media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.jmu-about-hero__ledger {
	position: relative;
	display: grid;
	grid-template-columns: auto repeat(3, minmax(0, 1fr));
	gap: var(--space-sm);
	align-items: center;
	padding: var(--space-sm);
	border: var(--border-width) solid color-mix(in srgb, var(--white) 18%, transparent);
	border-radius: var(--radius-md);
	background: color-mix(in srgb, var(--white) 94%, transparent);
	box-shadow: var(--shadow-lg);
	color: var(--text-main);
}

.jmu-about-hero__mark {
	width: 56px;
	height: 56px;
}

.jmu-about-hero__ledger span {
	display: grid;
	gap: var(--space-3xs);
	min-width: 0;
}

.jmu-about-hero__ledger strong {
	color: var(--text-strong);
	font-size: var(--text-sm);
	line-height: var(--line-height-snug);
}

.jmu-about-hero__ledger small {
	color: var(--text-muted);
	font-size: var(--text-xs);
	line-height: var(--line-height-normal);
}

.jmu-about-origin {
	padding-block: clamp(3rem, 6vw, 5rem);
	background: var(--bg-base);
}

.jmu-about-origin__inner {
	display: grid;
	grid-template-columns: minmax(0, 0.95fr) minmax(320px, 0.75fr);
	gap: clamp(var(--space-lg), 5vw, var(--space-3xl));
	align-items: start;
}

.jmu-about-section-title {
	margin: 0;
	color: var(--text-strong);
	font-family: var(--font-display);
	font-size: clamp(2rem, 4vw, 3.25rem);
	font-weight: var(--font-weight-semibold);
	letter-spacing: 0;
	line-height: var(--line-height-tight);
	text-wrap: balance;
}

.jmu-about-origin__lead {
	margin: 0;
	color: var(--text-muted);
	font-size: var(--text-lg);
	line-height: var(--line-height-relaxed);
}

.jmu-about-origin__timeline {
	position: relative;
	display: grid;
	gap: var(--space-md);
	margin: 0;
	padding: 0 0 0 var(--space-lg);
	list-style: none;
}

.jmu-about-origin__timeline::before {
	content: "";
	position: absolute;
	top: var(--space-2xs);
	bottom: var(--space-2xs);
	left: 5px;
	width: var(--border-width-md);
	border-radius: var(--radius-full);
	background: color-mix(in srgb, var(--color-primary) 32%, transparent);
}

.jmu-about-origin__timeline li {
	position: relative;
	display: grid;
	gap: var(--space-2xs);
	padding: var(--space-md);
	border: var(--border-width) solid var(--border-color-muted);
	border-radius: var(--radius-md);
	background: var(--bg-surface);
	box-shadow: var(--shadow-sm);
}

.jmu-about-origin__timeline li::before {
	content: "";
	position: absolute;
	top: var(--space-md);
	left: calc((var(--space-lg) + 5px) * -1);
	width: 12px;
	height: 12px;
	border: var(--border-width-md) solid var(--bg-surface);
	border-radius: var(--radius-full);
	background: var(--color-primary);
	box-shadow: 0 0 0 4px color-mix(in srgb, var(--color-primary) 16%, transparent);
}

.jmu-about-origin__timeline span,
.jmu-about-standard__item span,
.jmu-about-proofwall__stat span,
.jmu-about-process-note__contact > span {
	color: var(--color-primary);
	font-size: var(--text-xs);
	font-weight: var(--font-weight-bold);
	letter-spacing: var(--letter-spacing-eyebrow);
	line-height: var(--line-height-normal);
	text-transform: uppercase;
}

.jmu-about-origin__timeline strong {
	color: var(--text-strong);
	font-size: var(--text-xl);
	line-height: var(--line-height-snug);
}

.jmu-about-origin__timeline p {
	margin: 0;
	color: var(--text-muted);
	font-size: var(--text-sm);
	line-height: var(--line-height-relaxed);
}

.jmu-about-standard {
	padding-block: clamp(3rem, 6vw, 5rem);
	background:
		linear-gradient(90deg, color-mix(in srgb, var(--color-primary) 4%, transparent) 0 1px, transparent 1px 100%),
		linear-gradient(0deg, color-mix(in srgb, var(--text-strong) 4%, transparent) 0 1px, transparent 1px 100%),
		var(--bg-muted);
	background-size: 56px 56px;
}

.jmu-about-standard__inner {
	display: grid;
	gap: var(--space-md);
}

.jmu-about-standard__grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: var(--space-md);
	margin-top: var(--space-sm);
}

.jmu-about-standard__item {
	position: relative;
	display: grid;
	align-content: start;
	gap: var(--space-sm);
	min-height: 100%;
	padding: var(--space-lg);
	border: var(--border-width) solid color-mix(in srgb, var(--text-strong) 10%, transparent);
	border-radius: var(--radius-md);
	background: var(--bg-surface);
	box-shadow: var(--shadow-sm);
}

.jmu-about-standard__item::before {
	content: "";
	position: absolute;
	top: 0;
	right: 0;
	width: clamp(2.75rem, 7vw, 4.5rem);
	height: clamp(2.75rem, 7vw, 4.5rem);
	border-bottom-left-radius: var(--radius-md);
	background: color-mix(in srgb, var(--color-primary) 9%, transparent);
}

.jmu-about-standard__item span {
	position: relative;
	z-index: var(--z-base);
	width: max-content;
	padding-bottom: var(--space-2xs);
	border-bottom: var(--border-width-md) solid var(--color-primary);
}

.jmu-about-standard__item h3 {
	margin: 0;
	color: var(--text-strong);
	font-size: var(--text-xl);
	font-weight: var(--font-weight-semibold);
	line-height: var(--line-height-snug);
}

.jmu-about-standard__item p {
	margin: 0;
	color: var(--text-muted);
	font-size: var(--text-base);
	line-height: var(--line-height-relaxed);
}

.jmu-about-proofwall {
	padding-block: var(--space-xl);
	background: var(--bg-dark);
	color: var(--text-inverse);
}

.jmu-about-proofwall__inner {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 0;
	width: 100%;
	max-width: 1240px;
	margin: 0 auto;
	border: var(--border-width) solid color-mix(in srgb, var(--white) 14%, transparent);
	border-radius: var(--radius-lg);
	overflow: hidden;
}

.jmu-about-proofwall__stat {
	display: grid;
	gap: var(--space-2xs);
	padding: var(--space-lg);
	border-right: var(--border-width) solid color-mix(in srgb, var(--white) 14%, transparent);
	background: color-mix(in srgb, var(--white) 5%, transparent);
}

.jmu-about-proofwall__stat:last-child {
	border-right: 0;
}

.jmu-about-proofwall__stat strong {
	color: var(--text-inverse);
	font-family: var(--font-display);
	font-size: clamp(var(--text-xl), 2.5vw, var(--text-3xl));
	font-weight: var(--font-weight-extrabold);
	line-height: var(--line-height-tight);
}

.jmu-about-proofwall__stat span {
	color: color-mix(in srgb, var(--text-inverse) 76%, transparent);
	letter-spacing: 0;
	text-transform: none;
}

.jmu-about-process-note {
	padding-block: clamp(3rem, 6vw, 5rem);
	background: var(--bg-warm);
}

.jmu-about-process-note__inner {
	display: grid;
	grid-template-columns: minmax(0, 0.8fr) minmax(0, 1fr) minmax(260px, 0.48fr);
	gap: var(--space-lg);
	align-items: start;
}

.jmu-about-process-note__steps {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--space-sm);
	margin: 0;
	padding: 0;
	counter-reset: about-process;
	list-style: none;
}

.jmu-about-process-note__steps li {
	position: relative;
	display: grid;
	gap: var(--space-2xs);
	padding: var(--space-md);
	border-left: var(--border-width-lg) solid var(--color-primary);
	border-radius: var(--radius-md);
	background: var(--bg-surface);
	box-shadow: var(--shadow-sm);
	counter-increment: about-process;
}

.jmu-about-process-note__steps li::before {
	content: counter(about-process, decimal-leading-zero);
	color: color-mix(in srgb, var(--color-primary) 72%, transparent);
	font-size: var(--text-sm);
	font-weight: var(--font-weight-black);
	line-height: 1;
}

.jmu-about-process-note__steps strong {
	color: var(--text-strong);
	font-size: var(--text-base);
	line-height: var(--line-height-snug);
}

.jmu-about-process-note__steps span {
	color: var(--text-muted);
	font-size: var(--text-sm);
	line-height: var(--line-height-relaxed);
}

.jmu-about-process-note__contact {
	display: grid;
	gap: var(--space-sm);
	padding: var(--space-md);
	border-radius: var(--radius-lg);
	background: var(--bg-dark);
	box-shadow: var(--shadow-md);
	color: var(--text-inverse);
}

.jmu-about-process-note__contact > span {
	color: color-mix(in srgb, var(--text-inverse) 78%, transparent);
}

.jmu-about-process-note__phone {
	color: var(--text-inverse);
	font-family: var(--font-display);
	font-size: var(--text-2xl);
	font-weight: var(--font-weight-extrabold);
	line-height: var(--line-height-tight);
	text-decoration: none;
}

.jmu-about-process-note__phone:hover,
.jmu-about-process-note__phone:focus-visible {
	color: color-mix(in srgb, var(--text-inverse) 82%, var(--color-primary));
}

.jmu-about-process-note__phone:focus-visible {
	outline: 2px solid var(--text-inverse);
	outline-offset: 3px;
}

.jmu-about-process-note__contact div {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--space-2xs);
}

.jmu-about-process-note__contact div a {
	border: var(--border-width) solid color-mix(in srgb, var(--white) 32%, transparent);
	background: color-mix(in srgb, var(--white) 10%, transparent);
	color: var(--text-inverse);
}

.jmu-about-process-note__contact div a:hover,
.jmu-about-process-note__contact div a:focus-visible {
	border-color: var(--text-inverse);
	background: var(--color-primary);
	transform: translateY(-1px);
}

.jmu-about-process-note__contact div a:focus-visible {
	outline: 2px solid var(--text-inverse);
	outline-offset: 3px;
}

.jmu-about-credentials {
	padding-block: clamp(3rem, 6vw, 5rem);
	background: var(--bg-base);
}

.jmu-about-credentials__inner {
	display: grid;
	grid-template-columns: minmax(260px, 0.35fr) minmax(0, 1fr);
	gap: clamp(var(--space-lg), 5vw, var(--space-3xl));
	align-items: start;
}

.jmu-about-credentials__head {
	position: sticky;
	top: var(--space-lg);
}

.jmu-about-credentials__grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--space-sm);
}

.jmu-about-credentials__grid dl {
	display: grid;
	gap: var(--space-2xs);
	margin: 0;
	padding: var(--space-md);
	border: var(--border-width) solid var(--border-color-muted);
	border-radius: var(--radius-md);
	background: var(--bg-surface);
	box-shadow: var(--shadow-sm);
}

.jmu-about-credentials__grid dt {
	color: var(--color-primary);
	font-size: var(--text-sm);
	font-weight: var(--font-weight-bold);
	letter-spacing: var(--letter-spacing-eyebrow);
	line-height: var(--line-height-normal);
	text-transform: uppercase;
}

.jmu-about-credentials__grid dd {
	margin: 0;
	color: var(--text-muted);
	font-size: var(--text-sm);
	line-height: var(--line-height-relaxed);
}

.jmu-about-close {
	padding-block: clamp(3rem, 6vw, 5rem);
	background:
		linear-gradient(120deg, color-mix(in srgb, var(--color-primary) 28%, transparent), transparent 48%),
		var(--bg-dark);
	color: var(--text-inverse);
	text-align: center;
}

.jmu-about-close__inner {
	justify-items: center;
	max-width: 900px;
}

.jmu-about-close__heading {
	max-width: 780px;
	margin: 0;
	color: var(--text-inverse);
	font-family: var(--font-display);
	font-size: clamp(2rem, 4vw, 3.4rem);
	font-weight: var(--font-weight-semibold);
	line-height: var(--line-height-tight);
	text-wrap: balance;
}

.jmu-about-close__body {
	max-width: 62ch;
	margin: 0;
	color: color-mix(in srgb, var(--text-inverse) 84%, transparent);
	font-size: var(--text-lg);
	line-height: var(--line-height-relaxed);
}

.jmu-about-close__actions {
	justify-content: center;
}

@media (max-width: 1080px) {
	.jmu-about-hero__inner,
	.jmu-about-origin__inner,
	.jmu-about-process-note__inner,
	.jmu-about-credentials__inner {
		grid-template-columns: 1fr;
	}

	.jmu-about-credentials__head {
		position: static;
	}

	.jmu-about-standard__grid,
	.jmu-about-proofwall__inner {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.jmu-about-proofwall__stat:nth-child(2) {
		border-right: 0;
	}

	.jmu-about-proofwall__stat:nth-child(-n + 2) {
		border-bottom: var(--border-width) solid color-mix(in srgb, var(--white) 14%, transparent);
	}
}

@media (max-width: 760px) {
	.jmu-about-hero,
	.jmu-about-origin,
	.jmu-about-standard,
	.jmu-about-proofwall,
	.jmu-about-process-note,
	.jmu-about-credentials,
	.jmu-about-close {
		padding-right: var(--space-md);
		padding-left: var(--space-md);
	}

	.jmu-about-hero__headline {
		font-size: clamp(1.85rem, 8vw, 2.45rem);
	}

	.jmu-about-hero__inner,
	.jmu-about-origin__inner,
	.jmu-about-standard__inner,
	.jmu-about-proofwall__inner,
	.jmu-about-process-note__inner,
	.jmu-about-credentials__inner,
	.jmu-about-close__inner,
	.jmu-about-hero__field-note {
		box-sizing: border-box;
		max-width: calc(100vw - var(--space-xl));
		padding-right: var(--space-md);
	}

	.jmu-about-hero__lead {
		max-width: 20ch;
		overflow-wrap: break-word;
	}

	.jmu-about-hero__ledger,
	.jmu-about-standard__grid,
	.jmu-about-process-note__steps,
	.jmu-about-credentials__grid {
		grid-template-columns: 1fr;
	}

	.jmu-about-hero__mark {
		width: 48px;
		height: 48px;
	}

	.jmu-about-proofwall__inner {
		grid-template-columns: 1fr;
	}

	.jmu-about-proofwall__stat,
	.jmu-about-proofwall__stat:nth-child(2) {
		border-right: 0;
	}

	.jmu-about-proofwall__stat:not(:last-child) {
		border-bottom: var(--border-width) solid color-mix(in srgb, var(--white) 14%, transparent);
	}
}

@media (max-width: 520px) {
	.jmu-about-hero__actions,
	.jmu-about-close__actions,
	.jmu-about-process-note__contact div {
		display: grid;
		grid-template-columns: 1fr;
		width: 100%;
	}

	.jmu-about-button,
	.jmu-about-button .wp-block-button__link {
		width: auto;
	}

	.jmu-about-process-note__contact div a {
		width: 100%;
	}

	.jmu-about-origin__timeline {
		padding-left: var(--space-md);
	}

	.jmu-about-origin__timeline li::before {
		left: calc((var(--space-md) + 5px) * -1);
	}
}

@media (prefers-reduced-motion: reduce) {
	.jmu-about-button .wp-block-button__link,
	.jmu-about-process-note__contact a {
		transition-duration: 0.01ms;
	}

	.jmu-about-button .wp-block-button__link:hover,
	.jmu-about-button .wp-block-button__link:focus-visible,
	.jmu-about-process-note__contact a:hover,
	.jmu-about-process-note__contact a:focus-visible {
		transform: none;
	}
}