/* The existing about-us pages receive this stylesheet only in the V2 theme. */

.about-page {
	padding-block: 0;
}

.about-hero {
	padding-block: clamp(4rem, 11vw, 8.5rem);
	border-block-end: 1px solid rgba(150, 114, 118, 0.25);
	background: var(--alkhawatim-color-surface-soft);
}

.about-hero__inner {
	max-width: var(--alkhawatim-content-width);
}

.about-hero__title,
.about-mission h2,
.about-contact h2 {
	margin: 0;
	font-family: var(--alkhawatim-font-display);
	font-weight: 700;
	line-height: 1.25;
}

.about-hero__title {
	max-width: 12ch;
	color: var(--alkhawatim-color-primary);
	font-size: clamp(2.75rem, 9vw, 6rem);
}

.about-hero__lead {
	max-width: 39rem;
	margin-block: var(--alkhawatim-spacing-24) 0;
	color: var(--alkhawatim-color-secondary);
	font-size: clamp(1.25rem, 3vw, 1.75rem);
	line-height: 1.65;
}

.about-story {
	max-width: 50rem;
	padding-block: clamp(3.5rem, 8vw, 6.5rem);
}

.about-story p {
	margin-block: 0 var(--alkhawatim-spacing-24);
	font-size: clamp(1.0625rem, 2vw, 1.25rem);
	line-height: 1.9;
}

.about-story p:last-child {
	margin-block-end: 0;
}

.about-mission {
	padding-block: clamp(3.5rem, 8vw, 6.5rem);
	border-block: 1px solid rgba(150, 114, 118, 0.25);
	background: var(--alkhawatim-color-surface);
}

.about-mission__inner {
	display: grid;
	gap: var(--alkhawatim-spacing-32);
}

.about-mission h2,
.about-contact h2 {
	font-size: clamp(2rem, 5vw, 3.5rem);
}

.about-mission h2 {
	color: var(--alkhawatim-color-primary);
}

.about-mission__heading p {
	max-width: 32rem;
	margin-block: var(--alkhawatim-spacing-16) 0;
	font-size: clamp(1.0625rem, 2vw, 1.25rem);
	line-height: 1.85;
}

.about-mission__points {
	margin: 0;
	padding: 0;
	list-style: none;
}

.about-mission__points li {
	padding-block: var(--alkhawatim-spacing-16);
	border-block-start: 1px solid rgba(150, 114, 118, 0.45);
	font-size: clamp(1.0625rem, 2vw, 1.1875rem);
	line-height: 1.7;
}

.about-mission__points li:last-child {
	border-block-end: 1px solid rgba(150, 114, 118, 0.45);
}

.about-contact {
	padding-block: clamp(3rem, 7vw, 5rem);
	background: var(--alkhawatim-color-primary);
	color: var(--alkhawatim-color-on-dark);
}

.about-contact__inner {
	display: flex;
	align-items: flex-start;
	flex-direction: column;
	gap: var(--alkhawatim-spacing-24);
}

.about-contact h2 {
	color: inherit;
}

.about-page__protected {
	padding-block: var(--alkhawatim-layout-section);
}

@media (min-width: 64rem) {
	.about-mission__inner {
		grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
		gap: var(--alkhawatim-spacing-80);
	}

	.about-contact__inner {
		align-items: center;
		justify-content: space-between;
		flex-direction: row;
	}
}