/*
 * BioMotion — homepage only.
 * Loaded exclusively on the front page. Nothing in here is duplicated in
 * style.css; every rule below styles a component that exists only on this page.
 */

/* =========================================================================
   1. Hero
   ========================================================================= */

/*
 * With the scrim lightened so the footage reads through, --slate secondary copy
 * measures ~3.9:1 against the darkest part of the particle field — under the
 * 4.5:1 AA floor. The hero therefore uses a darker secondary tone (~6:1)
 * instead of washing the video back out.
 */
.hero {
	--hero-slate: #3c4a44;
	position: relative;
	isolation: isolate;
	overflow: hidden;
	background: var(--paper);
	padding-top: calc(var(--header-h) + clamp(32px, 6vw, 68px));
	padding-bottom: clamp(84px, 9vw, 128px);
}

@media (min-width: 900px) {
	.hero {
		display: flex;
		align-items: center;
		min-height: min(88vh, 880px);
		min-height: min(88svh, 880px);
	}
}

/* Background layers --------------------------------------------------- */

.hero__media {
	position: absolute;
	inset: 0;
	z-index: -1;
}

/*
 * A single opacity for both the poster frame and the video means there is no
 * flash when playback starts, and no blank hero if autoplay is refused (iOS
 * Low Power Mode) — the poster simply stays.
 */
.hero__video {
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: 0.55;
}

/*
 * The footage reads at full strength across most of the hero and fades to solid
 * white only at the foot, where the section meets the white band below. The
 * second gradient washes the copy column so the headline still clears WCAG AA
 * over the brightest part of the particle field.
 */
.hero__scrim {
	position: absolute;
	inset: 0;
	background: linear-gradient(
		to top,
		#ffffff 0%,
		rgba(255, 255, 255, 0) 30%
	);
}

.hero__scrim::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(
		100deg,
		rgba(255, 255, 255, 0.78) 0%,
		rgba(255, 255, 255, 0.28) 50%,
		rgba(255, 255, 255, 0) 72%
	);
}

/* Grid ---------------------------------------------------------------- */

.hero__inner {
	position: relative;
	display: grid;
	gap: clamp(36px, 5vw, 64px);
	width: min(100% - (var(--gutter) * 2), var(--maxw));
	align-items: center;
}

@media (min-width: 900px) {
	.hero__inner {
		grid-template-columns: 1.06fr 0.94fr;
	}
}

/* On phones the device leads, per the brief. */
@media (max-width: 899px) {
	.hero__device {
		order: -1;
	}
}

/* Copy ---------------------------------------------------------------- */

/*
 * Grid children default to min-width:auto, which lets a single unbreakable run
 * widen the whole track and push the hero past its container. Pinning both
 * children to 0 makes the columns authoritative.
 */
.hero__copy,
.hero__device {
	min-width: 0;
}

.hero__badge {
	display: inline-block;
	padding: 9px 16px;
	margin-bottom: 26px;
	background: rgba(255, 255, 255, 0.6);
	border: 1px solid rgba(255, 255, 255, 0.92);
	border-radius: var(--r-full);
	box-shadow: 0 1px 2px rgba(11, 27, 20, 0.04), 0 10px 26px -14px rgba(11, 27, 20, 0.28);
	-webkit-backdrop-filter: blur(14px);
	backdrop-filter: blur(14px);
	font-family: var(--font-display);
	font-size: var(--fs-xs);
	font-weight: 600;
	letter-spacing: 0.01em;
	line-height: 1.55;
	color: var(--ink);
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
	.hero__badge {
		background: rgba(255, 255, 255, 0.9);
	}
}

.hero__badge-icon {
	display: inline-block;
	vertical-align: -0.22em;
	margin-right: 8px;
	color: var(--signal);
}

.hero__badge-item {
	white-space: nowrap;
}

.hero__badge-sep {
	margin-right: 7px;
	color: var(--signal);
	opacity: 0.7;
}

.hero__title {
	font-size: var(--fs-display);
	font-weight: 700;
	letter-spacing: -0.038em;
	line-height: 1.04;
	max-width: 17ch;
}

.hero__title-main {
	display: block;
	color: var(--ink);
}

/*
 * The qualifying clause is a second tier of the same heading: lighter, smaller
 * and set in the secondary ink, separated by a hairline rather than by colour.
 */
.hero__title-clause {
	display: block;
	position: relative;
	margin-top: 0.44em;
	padding-top: 0.44em;
	max-width: 34ch;
	font-size: 0.44em;
	font-weight: 500;
	letter-spacing: -0.014em;
	line-height: 1.3;
	color: var(--hero-slate);
}

.hero__title-clause::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 34px;
	height: 2px;
	border-radius: 2px;
	background: var(--signal);
}

.hero__sub {
	margin-top: 22px;
	max-width: 46ch;
	font-size: var(--fs-lead);
	line-height: 1.65;
	color: var(--hero-slate);
}

.hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin-top: 34px;
}

@media (max-width: 419px) {
	.hero__actions .btn {
		width: 100%;
	}
}

/* Device -------------------------------------------------------------- */

.hero__device-stage {
	position: relative;
	width: min(100%, 376px);
	margin-inline: auto;
}

/* The 3D viewer needs more room than a flat photograph to stay readable. */
.hero__device-stage--viewer {
	width: min(100%, 460px);
}

@media (max-width: 899px) {
	.hero__device-stage {
		width: min(68%, 290px);
	}

	.hero__device-stage--viewer {
		width: min(94%, 400px);
	}
}

/*
 * Viewer shell. The shortcode's own markup is unknown, so the container fixes
 * the aspect ratio and the children are stretched to fill it. The !important
 * flags are limited to canvas/iframe/model-viewer, which third-party viewers
 * routinely size with inline attributes.
 */
.hero__viewer {
	position: relative;
	z-index: 1;
	width: 100%;
	aspect-ratio: 4 / 5;
	border-radius: var(--r-lg);
	overflow: hidden;
}

.hero__viewer > * {
	width: 100%;
	height: 100%;
}

/*
 * Neutralise the viewer's own panel styling so the model floats on the hero
 * rather than sitting in a white card.
 *
 * This only helps if the white comes from CSS. If it is the WebGL clear colour,
 * no stylesheet can reach it — set the background to transparent in the
 * plugin's own settings instead (see readme.txt).
 */
.hero__viewer,
.hero__viewer > *,
.hero__viewer div,
.hero__viewer canvas,
.hero__viewer model-viewer {
	background: transparent !important;
	background-color: transparent !important;
	border: 0 !important;
	box-shadow: none !important;
}

.hero__viewer canvas,
.hero__viewer iframe,
.hero__viewer model-viewer,
.hero__viewer > div > canvas {
	display: block;
	width: 100% !important;
	height: 100% !important;
	max-width: none;
}

.hero__viewer-hint {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 7px;
	margin-top: 12px;
	font-family: var(--font-display);
	font-size: 0.6875rem;
	font-weight: 600;
	letter-spacing: 0.11em;
	text-transform: uppercase;
	color: var(--hero-slate);
	text-shadow: 0 0 10px rgba(255, 255, 255, 0.95);
}

.hero__viewer-hint .icon {
	color: var(--signal);
}

.hero__device-halo {
	position: absolute;
	left: 50%;
	top: 54%;
	width: 112%;
	aspect-ratio: 1;
	transform: translate(-50%, -50%);
	border-radius: 50%;
	background: radial-gradient(circle, rgba(49, 170, 100, 0.18) 0%, rgba(49, 170, 100, 0) 62%);
}

.hero__device-img {
	position: relative;
	width: 100%;
	height: auto;
	filter: drop-shadow(0 34px 46px rgba(11, 27, 20, 0.22));
}

/*
 * Device callout.
 *
 * Drawn as an engineering annotation — a leader line from a pin on the console
 * out to micro-set type — rather than a floating glass pill with a pulsing dot.
 * It borrows the vernacular of a spec drawing, which is the world this product
 * actually lives in.
 */
.callout {
	position: absolute;
	top: 5%;
	left: 0;
	display: flex;
	align-items: center;
	pointer-events: none;
}

.callout__text {
	text-align: right;
	/* A soft halo instead of a filled chip keeps the annotation weightless
	   while staying legible over the particle field. */
	text-shadow:
		0 0 10px rgba(255, 255, 255, 0.95),
		0 0 4px rgba(255, 255, 255, 0.95);
}

.callout__label {
	display: block;
	white-space: nowrap;
	font-family: var(--font-display);
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.13em;
	text-transform: uppercase;
	line-height: 1.2;
	color: var(--ink);
}

.callout__meta {
	display: block;
	white-space: nowrap;
	margin-top: 3px;
	font-size: 0.625rem;
	letter-spacing: 0.02em;
	line-height: 1.3;
	color: var(--hero-slate);
}

.callout__leader {
	/* flex:none, or the shrink-to-fit container squashes the line and
	   deforms the pin into an oval. */
	flex: none;
	width: 44px;
	height: 1px;
	margin-left: 10px;
	background: linear-gradient(90deg, rgba(11, 27, 20, 0.22), var(--signal));
}

.callout__pin {
	flex: none;
	width: 9px;
	height: 9px;
	margin-left: -1px;
	border: 1.5px solid var(--signal);
	border-radius: 50%;
	background: var(--paper);
	box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.8);
}

@media (max-width: 519px) {
	.callout__meta {
		display: none;
	}

	.callout__leader {
		width: 26px;
	}
}

.cadence--hero {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 1;
}

/* =========================================================================
   2. Section A — the platform
   ========================================================================= */

.section--platform {
	background: var(--paper);
}

.platform__grid {
	display: grid;
	gap: clamp(44px, 5vw, 72px);
}

@media (min-width: 1000px) {
	.platform__grid {
		grid-template-columns: 1fr 0.9fr;
		align-items: center;
	}
}

.capability-list {
	margin-top: 34px;
	border-top: 1px solid var(--line);
}

.capability {
	display: flex;
	align-items: center;
	gap: 16px;
	padding: 16px 0;
	border-bottom: 1px solid var(--line);
	transition: transform var(--dur) var(--ease);
}

.capability:hover {
	transform: translateX(4px);
}

.capability__icon {
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	flex: none;
	background: var(--signal-tint);
	border: 1px solid rgba(49, 170, 100, 0.18);
	border-radius: var(--r-md);
	color: var(--signal-deep);
	transition: background-color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}

.capability:hover .capability__icon {
	background: var(--signal);
	border-color: var(--signal);
	color: #fff;
}

.capability__title {
	font-family: var(--font-display);
	font-size: 1rem;
	font-weight: 500;
	letter-spacing: -0.012em;
	line-height: 1.4;
	color: var(--ink);
}

/* Closed-loop diagram -------------------------------------------------- */

.loop {
	padding: clamp(18px, 3vw, 30px) clamp(14px, 2.5vw, 26px) clamp(20px, 3vw, 28px);
	background: linear-gradient(168deg, var(--haze-soft) 0%, var(--haze) 100%);
	border: 1px solid var(--line);
	border-radius: var(--r-xl);
	box-shadow: var(--shadow-sm);
}

.loop__svg {
	width: 100%;
	height: auto;
	overflow: visible;
}

.loop__tick {
	stroke: var(--line);
	stroke-width: 1;
}

.loop__tick--major {
	stroke: #c9d8d0;
	stroke-width: 1.25;
}

.loop__track {
	fill: none;
	stroke: #cfdcd5;
	stroke-width: 1.5;
}

.loop__pulse {
	fill: none;
	stroke: var(--signal);
	stroke-width: 3.5;
	stroke-linecap: round;
	/* Circumference of r=128 is 804.25; an 80px lit arc travels the ring. */
	stroke-dasharray: 80 724.25;
	stroke-dashoffset: 0;
}

.loop__node-ring {
	fill: var(--paper);
	stroke: #cfdcd5;
	stroke-width: 1.5;
}

.loop__node {
	fill: var(--signal);
}

.loop__label {
	font-family: var(--font-display);
	font-size: 17px;
	font-weight: 600;
	letter-spacing: -0.02em;
	fill: var(--ink);
}

.loop__sub {
	font-family: var(--font-body);
	font-size: 11.5px;
	fill: var(--slate-soft);
}

.loop__center-icon {
	color: var(--signal);
}

.loop__center-title {
	font-family: var(--font-display);
	font-size: 14px;
	font-weight: 600;
	letter-spacing: 0.15em;
	fill: var(--ink);
}

.loop__center-sub {
	font-family: var(--font-body);
	font-size: 11px;
	fill: var(--slate-soft);
}

.loop__caption {
	margin-top: 14px;
	padding-top: 14px;
	border-top: 1px solid var(--line);
	font-size: var(--fs-xs);
	line-height: 1.6;
	color: var(--slate);
	text-align: center;
}

/*
 * The diagram scales as a single unit, so below ~620px its type is set larger
 * in SVG user units to survive the reduction. The secondary node labels are
 * dropped entirely rather than shrunk past legibility.
 */
@media (max-width: 619px) {
	.loop__sub {
		display: none;
	}

	.loop__label {
		font-size: 24px;
	}

	.loop__center-title {
		font-size: 19px;
	}

	.loop__center-sub {
		font-size: 15px;
	}
}

/* =========================================================================
   3. Section B — the problem (the page's one dark band)
   ========================================================================= */

.section--problem {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	background: var(--ink);
	color: rgba(255, 255, 255, 0.76);
}

.section--problem::before {
	content: "";
	position: absolute;
	z-index: -1;
	left: 50%;
	top: -30%;
	width: 78%;
	aspect-ratio: 1;
	transform: translateX(-50%);
	border-radius: 50%;
	background: radial-gradient(circle, rgba(49, 170, 100, 0.13) 0%, rgba(49, 170, 100, 0) 62%);
}

.section--problem .eyebrow {
	color: var(--signal-lift);
}

.section--problem .eyebrow__mark {
	color: var(--signal-lift);
}

.section--problem .section__title {
	color: #fff;
}

.problem__head {
	max-width: 780px;
}

.problem__statement {
	margin-top: clamp(32px, 4vw, 48px);
	max-width: 940px;
	font-family: var(--font-display);
	font-size: clamp(1.32rem, 0.95rem + 1.65vw, 2rem);
	font-weight: 500;
	letter-spacing: -0.024em;
	line-height: 1.38;
	color: rgba(255, 255, 255, 0.88);
	text-wrap: pretty;
}

.problem__figure {
	white-space: nowrap;
	color: var(--signal-lift);
	font-weight: 700;
}

.problem__count {
	font-variant-numeric: tabular-nums;
}

.problem__strike {
	position: relative;
	display: inline-block;
	white-space: nowrap;
}

.problem__strike-line {
	position: absolute;
	left: -0.06em;
	right: -0.06em;
	top: 56%;
	height: 2px;
	border-radius: 2px;
	background: var(--signal-lift);
	transform: scaleX(0);
	transform-origin: left center;
}

.reduce-motion .problem__strike-line,
.anim-failsafe .problem__strike-line {
	transform: scaleX(1);
}

/* Comparison cards ----------------------------------------------------- */

.problem__cards {
	display: grid;
	gap: 20px;
	margin-top: clamp(40px, 5vw, 60px);
}

@media (min-width: 820px) {
	.problem__cards {
		grid-template-columns: 1fr 1fr;
		align-items: stretch;
	}
}

.pcard {
	display: flex;
	flex-direction: column;
	gap: 18px;
	padding: clamp(24px, 3.2vw, 36px);
	border-radius: var(--r-lg);
	border: 1px solid var(--line-ink);
	transition: transform var(--dur) var(--ease), border-color var(--dur) var(--ease);
}

.pcard:hover {
	transform: translateY(-3px);
}

.pcard--challenge {
	background: rgba(255, 255, 255, 0.035);
}

.pcard--challenge:hover {
	border-color: rgba(255, 255, 255, 0.22);
}

.pcard--solution {
	background:
		linear-gradient(160deg, rgba(49, 170, 100, 0.2) 0%, rgba(49, 170, 100, 0.06) 100%),
		rgba(255, 255, 255, 0.04);
	border-color: rgba(69, 193, 121, 0.34);
	-webkit-backdrop-filter: blur(8px);
	backdrop-filter: blur(8px);
	box-shadow: 0 24px 60px -32px rgba(49, 170, 100, 0.6);
}

.pcard--solution:hover {
	border-color: rgba(69, 193, 121, 0.55);
}

.pcard__title {
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: 1.15rem;
	font-weight: 600;
	color: #fff;
}

.pcard--challenge .pcard__title-icon {
	color: rgba(255, 255, 255, 0.42);
}

.pcard--solution .pcard__title-icon {
	color: var(--signal-lift);
}

.pcard__list {
	display: grid;
	gap: 14px;
}

.pcard__item {
	display: flex;
	gap: 12px;
	font-size: var(--fs-sm);
	line-height: 1.6;
	color: rgba(255, 255, 255, 0.7);
}

.pcard__bullet {
	width: 6px;
	height: 6px;
	margin-top: 9px;
	flex: none;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.34);
}

.pcard__body {
	font-size: var(--fs-sm);
	line-height: 1.68;
	color: rgba(255, 255, 255, 0.84);
}

.pcard__chips {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: auto;
}

.chip {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 7px 13px;
	background: rgba(255, 255, 255, 0.07);
	border: 1px solid rgba(69, 193, 121, 0.3);
	border-radius: var(--r-full);
	font-family: var(--font-display);
	font-size: var(--fs-xs);
	font-weight: 600;
	color: #fff;
}

.chip .icon {
	color: var(--signal-lift);
}

/* =========================================================================
   4. Section C — the evidence
   ========================================================================= */

.section--evidence {
	background: var(--haze);
}

.evidence__grid {
	display: grid;
	gap: clamp(40px, 5vw, 68px);
}

@media (min-width: 1000px) {
	.evidence__grid {
		grid-template-columns: 0.92fr 1.08fr;
		align-items: center;
	}
}

.research {
	display: grid;
	grid-template-columns: auto 1fr;
	grid-template-areas:
		"icon figure"
		"label label";
	align-items: center;
	gap: 6px 16px;
	margin-top: 34px;
	padding: 24px 26px;
	background: var(--paper);
	border: 1px solid var(--line);
	border-radius: var(--r-lg);
	box-shadow: var(--shadow-sm);
}

.research__icon {
	grid-area: icon;
	display: grid;
	place-items: center;
	width: 46px;
	height: 46px;
	background: var(--accent-tint);
	border-radius: var(--r-md);
	color: var(--accent);
}

.research__figure {
	grid-area: figure;
	display: flex;
	align-items: baseline;
	font-family: var(--font-display);
	font-size: clamp(2.2rem, 1.6rem + 2vw, 3rem);
	font-weight: 700;
	letter-spacing: -0.04em;
	line-height: 1;
	color: var(--ink);
	font-variant-numeric: tabular-nums;
}

.research__plus {
	color: var(--accent);
}

.research__label {
	grid-area: label;
	margin-top: 8px;
	font-size: var(--fs-sm);
	line-height: 1.6;
	color: var(--slate);
}

/* Outcome plot --------------------------------------------------------- */

.plot {
	padding: clamp(22px, 3vw, 32px);
	background: var(--paper);
	border: 1px solid var(--line);
	border-radius: var(--r-xl);
	box-shadow: var(--shadow-md);
}

.plot__head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
	flex-wrap: wrap;
	padding-bottom: 18px;
	margin-bottom: 6px;
	border-bottom: 1px solid var(--line);
}

.plot__title {
	font-size: 1.06rem;
	font-weight: 600;
	letter-spacing: -0.02em;
}

.plot__note {
	font-family: var(--font-display);
	font-size: var(--fs-xs);
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--accent);
}

.plot__svg {
	width: 100%;
	height: auto;
	overflow: visible;
}

.plot__grid line {
	stroke: var(--line);
	stroke-width: 1;
}

.plot__axis-labels text,
.plot__x-labels text {
	font-family: var(--font-body);
	font-size: 12px;
	fill: var(--slate-soft);
}

.plot__line {
	fill: none;
	stroke: var(--signal);
	stroke-width: 3;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.plot__point {
	fill: var(--paper);
	stroke: var(--signal);
	stroke-width: 3;
}

.plot__point--last {
	fill: var(--signal);
}

.plot__value {
	font-family: var(--font-display);
	font-size: 15px;
	font-weight: 700;
	letter-spacing: -0.02em;
	fill: var(--signal-deep);
	font-variant-numeric: tabular-nums;
}

.plot__value--last {
	font-size: 17px;
}

.plot__legend {
	margin-top: 14px;
	padding-top: 16px;
	border-top: 1px solid var(--line);
	font-size: var(--fs-xs);
	line-height: 1.65;
	color: var(--slate);
}

/* =========================================================================
   5. Section D — the team
   ========================================================================= */

.section--team {
	background: var(--paper);
}

.team__head {
	max-width: 820px;
	margin-bottom: clamp(36px, 4.5vw, 56px);
}

.team__grid {
	display: grid;
	gap: clamp(18px, 2.4vw, 28px);
	grid-template-columns: 1fr;
}

@media (min-width: 420px) {
	.team__grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (min-width: 1000px) {
	.team__grid {
		grid-template-columns: repeat(4, 1fr);
	}
}

.member {
	display: flex;
	flex-direction: column;
	transition: transform var(--dur) var(--ease);
}

.member:hover {
	transform: translateY(-4px);
}

.member__frame {
	position: relative;
	aspect-ratio: 4 / 5;
	overflow: hidden;
	border-radius: var(--r-lg);
	background: var(--haze);
	border: 1px solid var(--line);
	box-shadow: var(--shadow-sm);
	transition: box-shadow var(--dur) var(--ease);
}

.member:hover .member__frame {
	box-shadow: var(--shadow-md);
}

.member__frame picture {
	display: block;
	height: 100%;
}

.member__photo {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 50% 12%;
	transition: transform 480ms var(--ease);
}

.member:hover .member__photo {
	transform: scale(1.04);
}

/*
 * Monogram tile for members whose portrait has not been supplied yet. It uses
 * the same ratio and radius as a photo so the row keeps its rhythm, and echoes
 * the closed-loop ring from Section A.
 */
.member__monogram {
	display: grid;
	place-items: center;
	height: 100%;
	background:
		radial-gradient(circle at 50% 46%, transparent 33.5%, rgba(49, 170, 100, 0.2) 34%, transparent 34.8%),
		radial-gradient(circle at 50% 46%, transparent 41.5%, rgba(49, 170, 100, 0.1) 42%, transparent 42.6%),
		linear-gradient(160deg, var(--haze-soft) 0%, #e2ece6 100%);
}

.member__initials {
	font-family: var(--font-display);
	font-size: clamp(2rem, 1.4rem + 2vw, 2.6rem);
	font-weight: 700;
	letter-spacing: -0.04em;
	color: var(--signal-deep);
	transform: translateY(-4%);
}

.member__badge {
	position: absolute;
	left: 12px;
	bottom: 12px;
	padding: 6px 12px;
	background: rgba(255, 255, 255, 0.78);
	border: 1px solid rgba(255, 255, 255, 0.9);
	border-radius: var(--r-full);
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
	font-family: var(--font-display);
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--ink);
	box-shadow: 0 6px 18px -10px rgba(11, 27, 20, 0.5);
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
	.member__badge {
		background: rgba(255, 255, 255, 0.95);
	}
}

.member__body {
	padding-top: 18px;
}

.member__name {
	font-size: 1.0625rem;
	font-weight: 600;
	letter-spacing: -0.022em;
	line-height: 1.3;
}

.member__suffix {
	color: var(--slate-soft);
	font-weight: 500;
}

.member__role {
	margin-top: 5px;
	font-size: var(--fs-sm);
	color: var(--signal-deep);
	font-weight: 500;
}

/* Know more ------------------------------------------------------------ */

.member__more {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin-top: 12px;
	padding: 0;
	background: none;
	border: 0;
	font-family: var(--font-display);
	font-size: 0.8125rem;
	font-weight: 600;
	letter-spacing: -0.005em;
	color: var(--ink);
	transition: color var(--dur) var(--ease);
}

.member__more::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: var(--r-lg);
}

.member {
	position: relative;
}

.member__more-icon {
	color: var(--accent);
	transition: transform var(--dur) var(--ease);
}

.member__more:hover,
.member:hover .member__more {
	color: var(--accent);
}

.member__more:hover .member__more-icon,
.member:hover .member__more-icon {
	transform: translateX(3px);
}

.member__more:focus-visible {
	outline: none;
}

.member__more:focus-visible::after {
	outline: 2px solid var(--signal);
	outline-offset: 4px;
}

/* Biography dialog ----------------------------------------------------- */

.bio {
	width: min(100% - 32px, 720px);
	max-height: min(88vh, 760px);
	padding: 0;
	border: 0;
	border-radius: var(--r-xl);
	background: var(--paper);
	box-shadow: var(--shadow-lg);
	overflow: hidden;
	color: var(--ink);
}

.bio::backdrop {
	background: rgba(11, 27, 20, 0.42);
	-webkit-backdrop-filter: blur(3px);
	backdrop-filter: blur(3px);
}

.bio[open] {
	animation: bio-in 300ms var(--ease) both;
}

.bio[open]::backdrop {
	animation: bio-fade 300ms var(--ease) both;
}

.bio.is-closing,
.bio.is-closing::backdrop {
	animation: bio-fade 180ms var(--ease) reverse both;
}

@keyframes bio-in {
	from { opacity: 0; transform: translateY(14px) scale(0.985); }
	to   { opacity: 1; transform: none; }
}

@keyframes bio-fade {
	from { opacity: 0; }
	to   { opacity: 1; }
}

.reduce-motion .bio[open],
.reduce-motion .bio[open]::backdrop,
.reduce-motion .bio.is-closing,
.reduce-motion .bio.is-closing::backdrop {
	animation-duration: 0.001ms;
}

.bio__panel {
	position: relative;
	max-height: inherit;
	padding: clamp(24px, 4vw, 40px);
	overflow-y: auto;
	overscroll-behavior: contain;
}

.bio__close {
	position: absolute;
	top: 14px;
	right: 14px;
	display: grid;
	place-items: center;
	width: 40px;
	height: 40px;
	background: var(--paper);
	border: 1px solid var(--line);
	border-radius: 50%;
	color: var(--ink);
	transition: border-color var(--dur) var(--ease), background-color var(--dur) var(--ease);
	z-index: 2;
}

.bio__close:hover {
	border-color: var(--signal);
	background: var(--signal-tint);
}

.bio__close-mark {
	position: relative;
	width: 15px;
	height: 15px;
}

.bio__close-mark::before,
.bio__close-mark::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 0;
	width: 100%;
	height: 1.5px;
	border-radius: 2px;
	background: currentColor;
}

.bio__close-mark::before { transform: rotate(45deg); }
.bio__close-mark::after  { transform: rotate(-45deg); }

.bio__head {
	display: flex;
	align-items: center;
	gap: clamp(16px, 3vw, 24px);
	padding-bottom: 22px;
	margin-bottom: 22px;
	border-bottom: 1px solid var(--line);
}

.bio__portrait {
	width: clamp(84px, 16vw, 116px);
	flex: none;
	aspect-ratio: 4 / 5;
	overflow: hidden;
	border-radius: var(--r-lg);
	background: var(--haze);
	border: 1px solid var(--line);
}

.bio__portrait picture,
.bio__portrait img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.bio__badge {
	display: inline-block;
	padding: 4px 10px;
	margin-bottom: 9px;
	background: var(--accent-tint);
	border: 1px solid rgba(1, 102, 191, 0.2);
	border-radius: var(--r-full);
	font-family: var(--font-display);
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.07em;
	text-transform: uppercase;
	color: var(--accent);
}

.bio__name {
	font-family: var(--font-display);
	font-size: clamp(1.15rem, 1rem + 0.7vw, 1.45rem);
	font-weight: 600;
	letter-spacing: -0.026em;
	line-height: 1.25;
}

.bio__role {
	margin-top: 4px;
	font-size: var(--fs-sm);
	font-weight: 500;
	color: var(--signal-deep);
}

.bio__body {
	display: grid;
	gap: 15px;
	font-size: var(--fs-sm);
	line-height: 1.72;
	color: var(--slate);
}

/* Full-height sheet on phones; the head stays put while the text scrolls. */
@media (max-width: 519px) {
	.bio {
		width: 100%;
		max-width: 100%;
		max-height: 92vh;
		margin: auto auto 0;
		border-radius: var(--r-xl) var(--r-xl) 0 0;
	}

	.bio[open] {
		animation-name: bio-sheet-in;
	}

	@keyframes bio-sheet-in {
		from { opacity: 0; transform: translateY(28px); }
		to   { opacity: 1; transform: none; }
	}

	.bio__head {
		flex-direction: column;
		align-items: flex-start;
		text-align: left;
	}

	.bio__portrait {
		width: 96px;
	}
}

.nav-open .bio,
.bio-open,
.bio-open body {
	overflow: hidden;
}