/* About (S23): story, speed columns, goals, capability map, Later line, team, company rows, section rail. */

.ab {
	padding-block: var(--sec);
}

.ab .lead {
	margin-block-start: var(--sp-24);
}

.ab-story {
	display: grid;
	gap: 1.1em;
	margin-block-start: clamp(28px, 4vw, 52px);
}

.ab-story p {
	max-inline-size: 60ch;
	color: var(--fg2);
	font-size: var(--fs-lead);
}

.ab-more {
	margin-block-start: var(--sp-32);
}

.ab .go {
	display: inline-flex;
	align-items: center;
	gap: var(--sp-8);
	color: var(--hi);
	font-weight: 700;
}

.ab .go .arr {
	inline-size: 18px;
	block-size: 18px;
	fill: none;
	stroke: currentcolor;
	stroke-width: 1.5;
}

html[dir="rtl"] .ab .go .arr {
	transform: scaleX(-1);
}

/* Speed: three ruled columns with a line drawing each */
.sp3 {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	margin-block-start: clamp(30px, 4vw, 56px);
	border-block: var(--hairline) solid var(--ln-s);
	list-style: none;
}

.sp3 > li {
	position: relative;
	display: grid;
	gap: 14px;
	align-content: start;
	min-block-size: 300px;
	padding: clamp(22px, 2.6vw, 40px);
	border-inline-start: var(--hairline) solid var(--ln-s);
}

.sp3 > li:last-child {
	border-inline-end: var(--hairline) solid var(--ln-s);
}

.sp3 i {
	color: var(--hi);
	font-style: normal;
}

.sp3 svg {
	inline-size: min(130px, 60%);
	block-size: auto;
}

.sp3 h3 {
	font-size: clamp(24px, 2.4vw, 38px);
	font-weight: 300;
	line-height: 1.05;
	letter-spacing: -0.035em;
}

.sp3 p {
	max-inline-size: 34ch;
	color: var(--fg2);
	font-size: var(--fs-b);
}

/* Line drawings: strokes draw in when core.js adds .in; reduced motion shows them drawn */
.ab .dr path,
.ab .dr rect,
.ab .dr circle {
	fill: none;
	stroke: var(--fg);
	stroke-width: 1.4;
	vector-effect: non-scaling-stroke;
}

.ab .dr .gold {
	stroke: var(--hi);
}

.ab .dr .soft {
	stroke: var(--ln-s);
}

.ab .dr .d {
	stroke-dasharray: 1;
	stroke-dashoffset: 0;
	transition: stroke-dashoffset var(--d-draw) var(--ease);
}

.js:not(.rm) [data-draw]:not(.in) .dr .d {
	stroke-dashoffset: 1;
}

/* Goals */
.goals {
	display: grid;
	grid-template-columns: repeat(var(--cols, 4), minmax(0, 1fr));
	margin-block-start: clamp(30px, 4vw, 52px);
	border-block: var(--hairline) solid var(--ln-s);
	list-style: none;
}

.goals[data-n="1"] {
	--cols: 1;
}

.goals[data-n="2"] {
	--cols: 2;
}

.goals[data-n="3"] {
	--cols: 3;
}

.goals li {
	display: grid;
	gap: 8px;
	align-content: start;
	padding: clamp(18px, 2vw, 30px);
	border-inline-start: var(--hairline) solid var(--ln-s);
}

.goals li:last-child {
	border-inline-end: var(--hairline) solid var(--ln-s);
}

.goals b {
	color: var(--hi);
	font: 200 clamp(40px, 4vw, 64px) / 1 var(--font-display);
	letter-spacing: -0.04em;
}

.goals span {
	color: var(--fg2);
	font-size: var(--fs-b);
}

/* Capability map */
.cmap {
	display: grid;
	grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
	gap: clamp(20px, 3vw, 50px);
	align-items: center;
	margin-block-start: clamp(28px, 4vw, 52px);
}

.cmapw {
	position: relative;
	aspect-ratio: 16 / 10;
	border: var(--hairline) solid var(--ln-s);
	background:
		repeating-linear-gradient(0deg, var(--grid-line) 0 1px, transparent 1px 32px),
		repeating-linear-gradient(90deg, var(--grid-line) 0 1px, transparent 1px 32px),
		var(--surface);
}

.cmapw .cml {
	position: absolute;
	inset: 0;
	inline-size: 100%;
	block-size: 100%;
	overflow: visible;
	pointer-events: none;
}

.cml .lk {
	fill: none;
	stroke: var(--ln-s);
	stroke-width: 1;
	stroke-dasharray: 4 5;
}

.cml .pk {
	fill: var(--hi);
	offset-rotate: 0deg;
	animation: ab-packet linear infinite;
}

@keyframes ab-packet {
	from {
		offset-distance: 0%;
	}

	to {
		offset-distance: 100%;
	}
}

.rm .cml .pk {
	display: none;
}

.cmapw .core {
	position: absolute;
	inset-inline-start: 50%;
	inset-block-start: 50%;
	display: grid;
	place-content: center;
	inline-size: clamp(84px, 11vw, 120px);
	aspect-ratio: 1;
	transform: translate(-50%, -50%);
	border: 1.5px solid var(--hi);
	border-radius: 50%;
	background: var(--bg);
	color: var(--fg);
	font-size: clamp(13px, 1.2vw, 17px);
	font-weight: 800;
	line-height: 1.1;
	text-align: center;
	direction: ltr;
}

html[dir="rtl"] .cmapw .core {
	transform: translate(50%, -50%);
}

.nd2 {
	position: absolute;
	inset-inline-start: calc(var(--x) * 1%);
	inset-block-start: calc(var(--y) * 1%);
	z-index: 2;
	min-block-size: 46px;
	max-inline-size: 44%;
	padding-inline: 16px;
	transform: translate(-50%, -50%);
	border: var(--hairline) solid var(--ln-ctl);
	background: var(--surface-solid);
	color: var(--fg);
	font: 500 12px var(--font-mono);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	cursor: pointer;
	transition:
		background var(--d-base),
		border-color var(--d-base),
		color var(--d-base);
}

html[dir="rtl"] .nd2 {
	transform: translate(50%, -50%);
}

:lang(ar) .nd2 {
	font-family: var(--font-ar);
	font-size: var(--fs-s-ar);
	letter-spacing: 0;
	text-transform: none;
}

.nd2:hover,
.nd2:focus-visible,
.nd2[aria-pressed="true"] {
	border-color: var(--acc-t);
	background: var(--acc);
	color: var(--on-acc);
}

.cmr {
	display: grid;
	gap: 12px;
	align-content: start;
	min-block-size: 260px;
	padding: clamp(22px, 2.6vw, 38px);
	border: var(--hairline) solid var(--ln-s);
	background: var(--surface);
}

.cmr h3 {
	font-size: clamp(24px, 2.4vw, 36px);
	font-weight: 300;
	letter-spacing: -0.03em;
}

.cmr p {
	color: var(--fg2);
}

.cmr .cm-n {
	color: var(--hi);
}

/* Without script the buttons do nothing, so a plain list stands in for map and readout */
.cm-list {
	display: grid;
	gap: var(--sp-24);
	grid-column: 1 / -1;
	list-style: none;
}

.cm-list h3 {
	font-size: var(--fs-h4);
}

.cm-list p {
	color: var(--fg2);
}

.js .cm-list {
	display: none;
}

html:not(.js) .cmapw,
html:not(.js) .cmr {
	display: none;
}

/* Later: dashed future line */
.fut {
	position: relative;
	display: grid;
	grid-template-columns: auto 1fr;
	gap: clamp(18px, 3vw, 44px);
	align-items: center;
	margin-block-start: clamp(30px, 4vw, 52px);
	padding: clamp(24px, 3vw, 46px);
	border: var(--hairline) dashed var(--ln-s);
	background: repeating-linear-gradient(135deg, var(--gold-wash) 0 2px, transparent 2px 12px);
}

.fut svg {
	inline-size: min(150px, 28vw);
	block-size: auto;
}

.fut h3 {
	margin-block-start: 10px;
	font-size: clamp(24px, 2.6vw, 40px);
	font-weight: 300;
	letter-spacing: -0.035em;
}

.fut h3 strong {
	font-weight: 800;
}

.fut p {
	max-inline-size: 56ch;
	margin-block-start: 8px;
	color: var(--fg2);
}

/* Team */
.team {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: clamp(14px, 2vw, 26px);
	margin-block-start: clamp(28px, 4vw, 52px);
	list-style: none;
}

.team-fact {
	grid-template-columns: minmax(0, 420px);
}

.tm {
	display: grid;
	gap: 12px;
	align-content: start;
	padding: 16px;
	border: var(--hairline) solid var(--ln-s);
	background: var(--surface);
}

.tm .av {
	position: relative;
	display: grid;
	place-items: center;
	aspect-ratio: 1;
	overflow: hidden;
	border: var(--hairline) solid var(--ln);
	background: repeating-linear-gradient(135deg, var(--gold-wash) 0 2px, transparent 2px 10px);
}

.tm .av svg {
	inline-size: 38%;
	block-size: auto;
	fill: none;
	stroke: var(--fg2);
	stroke-width: 1.2;
}

.tm .av img {
	position: absolute;
	inset: 0;
	inline-size: 100%;
	block-size: 100%;
	object-fit: cover;
}

.tm b {
	font-weight: 700;
}

.tm span,
.tm p {
	color: var(--fg2);
	font-size: var(--fs-s);
}

.tm p b {
	color: var(--fg);
	font-size: var(--fs-b);
}

/* Company rows */
.kv {
	display: grid;
	max-inline-size: 900px;
	margin-block-start: clamp(28px, 4vw, 52px);
	border-block-start: var(--hairline) solid var(--ln-s);
}

.kv > div {
	display: grid;
	grid-template-columns: minmax(0, 0.7fr) minmax(0, 1.3fr);
	gap: 16px;
	padding-block: 16px;
	border-block-end: var(--hairline) solid var(--ln-s);
}

.kv dt {
	color: var(--hi);
}

.kv dd {
	color: var(--fg);
	overflow-wrap: anywhere;
}

.kv dd a {
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* Section rail: fixed right edge, wide screens only */
.arail {
	position: fixed;
	inset-inline-end: var(--sp-8);
	inset-block-start: 50%;
	z-index: 40;
	display: grid;
	gap: 2px;
	padding: var(--sp-8);
	transform: translateY(-50%);
	border: var(--hairline) solid var(--ln-ctl);
	background: rgb(var(--ink-900-rgb) / 0.86);
	color: var(--white);
}

.arail a {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 10px;
	block-size: 24px;
	font: 500 11px var(--font-mono);
	letter-spacing: 0.12em;
	opacity: 0.6;
	transition: opacity var(--d-base);
}

.arail a i {
	font-style: normal;
}

.arail a b {
	display: block;
	inline-size: 12px;
	block-size: 1px;
	background: currentcolor;
	transition: inline-size var(--d-slow) var(--ease);
}

.arail a span {
	max-inline-size: 0;
	overflow: hidden;
	white-space: nowrap;
	text-transform: uppercase;
	transition: max-inline-size var(--d-slow) var(--ease);
}

:lang(ar) .arail a span {
	font-family: var(--font-ar);
	letter-spacing: 0;
	text-transform: none;
}

.arail a:hover,
.arail a:focus-visible,
.arail a.on {
	opacity: 1;
}

.arail a.on b {
	inline-size: 24px;
}

.arail a:hover span,
.arail a:focus-visible span {
	max-inline-size: 130px;
}

.rm .arail a,
.rm .arail a b,
.rm .arail a span {
	transition: none;
}

@media (max-width: 1279px) {
	.arail {
		display: none;
	}
}

@media (max-width: 1000px) {
	.sp3,
	.goals {
		grid-template-columns: 1fr;
	}

	.sp3 > li {
		min-block-size: 0;
		border-inline-end: var(--hairline) solid var(--ln-s);
	}

	.sp3 > li + li,
	.goals li + li {
		border-block-start: var(--hairline) solid var(--ln-s);
	}

	.goals li {
		border-inline-end: var(--hairline) solid var(--ln-s);
	}

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

	.team-fact {
		grid-template-columns: minmax(0, 1fr);
	}

	.cmap,
	.fut {
		grid-template-columns: 1fr;
	}
}

@media (max-width: 700px) {
	.cmapw {
		aspect-ratio: 4 / 5;
	}

	.nd2 {
		inset-inline-start: calc(var(--mx) * 1%);
		inset-block-start: calc(var(--my) * 1%);
		padding-inline: 10px;
		font-size: 11px;
	}

	.cmapw .core {
		inset-block-start: 38%;
	}

	.kv > div {
		grid-template-columns: 1fr;
		gap: 4px;
	}
}

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

/* the founder's portrait in the fact block: portrait crop, face kept in frame */
.team-fact .av {
	aspect-ratio: 3 / 4;
}

.team-fact .av img {
	object-position: 50% 12%;
}