/* About page (ABOUT): hero "Skyline", statement, values. Scope to .t-about, .about-*, .hero--skyline. */

/* Hero "Skyline" (REF5): centred title and sub, then five photos of stepped heights. */
.hero--skyline {
	--sky-h: clamp(14rem, 9rem + 16vw, 24rem);
	padding-bottom: var(--section-tight);
}

.about-hero__text {
	display: grid;
	justify-items: center;
	text-align: center;
}

.about-hero__title {
	max-width: 18ch;
	font-size: var(--fs-h1);
	line-height: 1.06;
	letter-spacing: -0.03em;
}

.about-hero__line {
	display: block;
}

.about-hero__lede {
	max-width: 60ch;
	margin-top: 16px;
	color: var(--c-ink-2);
}

.about-skyline {
	display: flex;
	align-items: flex-end;
	gap: 12px;
	height: var(--sky-h);
	margin-top: 28px;
}

.about-skyline .media {
	flex: 1 1 0;
	min-width: 0;
	height: 100%;
	aspect-ratio: auto;
	overflow: hidden;
}

.about-skyline .media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.about-skyline__photo--1,
.about-skyline__photo--5 {
	height: 88% !important;
}

.about-skyline__photo--2,
.about-skyline__photo--4 {
	height: 68% !important;
}

.about-skyline__photo--3 {
	height: 100% !important;
}

@media (max-width: 47.99em) {
	.about-skyline {
		gap: 8px;
		height: clamp(12rem, 8rem + 20vw, 16rem);
	}

	.about-skyline__photo--1,
	.about-skyline__photo--5 {
		display: none;
	}

	.about-skyline__photo--2,
	.about-skyline__photo--4 {
		height: 80% !important;
	}
}

/* Statement and live tiles */
.about-statement__text {
	max-width: 30em;
	font-size: var(--fs-statement);
	font-weight: 500;
	line-height: 1.3;
	letter-spacing: -0.015em;
	color: var(--c-blue-950);
}

.about-statement__tiles {
	margin-top: 28px;
}

.about-statement__tiles .stat {
	min-height: clamp(9rem, 8rem + 3vw, 11rem);
}

/* "What we do" slider sits right under its heading */
.about-what .sec-head {
	margin-bottom: var(--space-m, 1.5rem);
}

/* Values: an open grid on paper with hairlines, no bullets or boxes. */
.about-values .sec-head {
	margin-bottom: var(--space-l, 2rem);
}

.about-values ul.values {
	display: grid;
	gap: 0 var(--grid-gap, 2rem);
	margin: 0;
	padding: 0;
	list-style: none;
}

@media (min-width: 48em) {
	.about-values ul.values {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 64em) {
	.about-values ul.values {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

.about-values li.value {
	display: grid;
	align-content: start;
	gap: 0.55rem;
	margin: 0;
	padding: 24px 0 var(--space-m, 1.5rem);
	border-top: 1px solid var(--c-line);
}

.about-values li.value::marker {
	content: none;
}

.about-values .value__ar {
	margin: 0;
	font-family: var(--ff-arabic);
	font-size: 2.75rem;
	line-height: 1.1;
	color: var(--c-blue-950);
}

.about-values .value__name {
	display: grid;
	gap: 2px;
	margin: 0;
	font-size: var(--fs-h3);
}

.about-values .value__name span {
	font-family: var(--ff-sans);
	font-size: 14px;
	font-weight: 500;
	letter-spacing: 0;
	color: var(--c-ink-3);
}

.about-values .value blockquote {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 15px;
	color: var(--c-ink-2);
}

.about-values .value blockquote p {
	display: inline;
	margin: 0;
}

.about-values .value cite {
	font-style: normal;
	color: var(--c-ink-3);
}

.about-values .value cite::before {
	content: ", ";
}

.about-values .value__text {
	margin: 0;
	font-size: 16px;
	color: var(--c-ink-2);
}

/* At a glance */
.about-glance__grid {
	display: grid;
	gap: var(--space-m, 1.5rem) var(--grid-gap, 2rem);
}

@media (min-width: 64em) {
	.about-glance__grid {
		grid-template-columns: minmax(0, 4fr) minmax(0, 7fr);
		align-items: start;
	}

	.about-glance__ledger {
		grid-column: 2;
	}
}