/* ==========================================================================
   About page: mission, principles, founder, remote model, regulatory & compliance.
   (Positioning uses components/intro.css.)
   ========================================================================== */

/* Mission: one statement set large behind the line. */
.mission__inner { display: grid; gap: var(--s-4); }
.mission__title { font-size: clamp(1.75rem, 1.4rem + 1.2vw, 2.5rem); }
.mission__body {
	display: grid;
	gap: var(--s-3);
	padding-inline-start: var(--s-3);
	border-inline-start: 1px solid var(--c-gold);
}
.mission__statement {
	max-width: 22ch;
	color: var(--c-ink);
	font-family: var(--font-display);
	font-size: clamp(2rem, 1.3rem + 2.8vw, 4rem);
	font-weight: 500;
	line-height: 1.1;
	letter-spacing: -0.01em;
	text-wrap: balance;
}
.mission__text { max-width: 52ch; color: var(--c-slate); font-size: var(--fs-lead); line-height: 1.5; }
@media (min-width: 1024px) {
	.mission__inner { grid-template-columns: minmax(0, 3fr) minmax(0, 9fr); gap: var(--gap); align-items: start; }
	.mission__title { padding-block-start: 0.75rem; }
	.mission__body { padding-inline-start: clamp(2rem, 4vw, 5rem); padding-block: 0.25rem; }
}

/* Principles: three columns with large serif names. */
.principles__list {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
	gap: var(--s-5) var(--gap);
}
.principles__item {
	display: grid;
	gap: var(--s-2);
	align-content: start;
	padding-block-start: var(--s-3);
	border-block-start: 1px solid var(--line-light);
}
.principles__name { font-size: clamp(1.875rem, 1.5rem + 1.2vw, 2.75rem); font-weight: 500; }
.principles__text { max-width: 38ch; color: var(--c-slate); line-height: 1.65; }

/* Founder: portrait | details. */
.founder__inner { display: grid; gap: var(--s-5); }
.founder__photo { aspect-ratio: 4 / 5; max-width: 520px; width: 100%; }
.founder__body { display: grid; gap: var(--s-2); align-content: start; max-width: 60ch; }
.founder__role { color: var(--c-gold-deep); font-size: var(--fs-small); font-weight: 600; }
.founder__name { font-size: var(--fs-h2); }
.founder__since {
	padding-inline-start: var(--s-2);
	border-inline-start: 1px solid var(--c-gold);
	color: var(--c-slate);
	font-size: var(--fs-small);
}
.founder__bio { margin-block-start: var(--s-2); color: var(--c-ink); }
.founder__areas { margin-block-start: var(--s-4); }
.founder__areas-title {
	margin-block-end: var(--s-2);
	font-family: var(--font-text);
	font-size: var(--fs-small);
	font-weight: 600;
	letter-spacing: 0;
}
@media (min-width: 1024px) {
	.founder__inner { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(3rem, 6vw, 8rem); align-items: start; }
}

/* Remote model: points with icons on hairlines. */
.model__list {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
	gap: var(--s-5) var(--gap);
}
.model__item {
	display: grid;
	gap: var(--s-2);
	align-content: start;
	padding-block-start: var(--s-3);
	border-block-start: 1px solid var(--line-light);
}
.model__icon { width: 1.75rem; height: 1.75rem; color: var(--c-gold-deep); }
.model__title { font-size: clamp(1.5rem, 1.25rem + 0.6vw, 1.875rem); font-weight: 500; }
.model__text { color: var(--c-slate); font-size: var(--fs-small); line-height: 1.65; max-width: 36ch; }

/* Regulatory: text + compliance | licence details. */
.regulatory__inner { display: grid; gap: var(--s-6); }
.regulatory__intro { display: grid; gap: var(--s-3); align-content: start; }
.regulatory__title { max-width: 12em; }
.regulatory__lead { max-width: 52ch; font-size: var(--fs-lead); line-height: 1.5; }
.regulatory__text { max-width: 60ch; color: var(--c-slate); }
.regulatory__compliance { margin-block-start: var(--s-3); }
.regulatory__subtitle {
	margin-block-end: var(--s-2);
	font-family: var(--font-text);
	font-size: var(--fs-small);
	font-weight: 600;
	letter-spacing: 0;
}
@media (min-width: 1024px) {
	.regulatory__inner { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 0; }
	.regulatory__intro { padding-inline-end: clamp(2rem, 4vw, 5rem); }
	.regulatory__facts {
		padding-inline-start: clamp(2rem, 3vw, 3.5rem);
		border-inline-start: 1px solid var(--c-gold);
	}
}