.about-page {
	display: grid;
	row-gap: 100px;
	padding: 41px 0 68px;
	background: var(--dar-color-background);
}


.about-hero {
	position: relative;
	aspect-ratio: 1720 / 625;
	overflow: hidden;
	background: var(--dar-color-surface);
}


.about-hero__image,
.about-section__media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}


.about-hero__overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(270deg, rgba(0, 0, 0, 0) 38.169%, rgba(0, 0, 0, 0.5) 86.599%);
}


.about-hero__title {
	position: absolute;
	left: calc(134 / 1720 * 100%);
	top: 50%;
	width: min(775px, 52%);
	margin: 0;
	color: #faf8f5;
	font-family: var(--dar-font-heading);
	font-size: 60px;
	font-weight: 400;
	line-height: 60px;
	letter-spacing: 0;
	text-shadow: var(--dar-shadow-hero-title);
	transform: translateY(-50%);
}


.about-section {
	display: grid;
	width: var(--dar-container-width);
	margin-inline: auto;
}


.about-section--philosophy {
	grid-template-columns: minmax(0, 783fr) minmax(0, 860fr);
	gap: calc(var(--dar-container-width) * 75 / 1720);
	min-height: 762px;
}


.about-section-section--vision {
	background: var(--dar-color-surface);
	padding: 100px 0;
}

.about-section--vision {
	position: relative;
	grid-template-columns: minmax(0, 860fr) minmax(0, 858fr);
	gap: 0;
	min-height: 666px;
}


.about-section--vision > * {
	position: relative;
	z-index: 1;
}


.about-section__content {
	align-self: start;
	padding-top: 134px;
}


.about-section__media {
	min-height: 100%;
	overflow: hidden;
	background: var(--dar-color-surface);
}


.about-section--philosophy .about-section__media {
	height: 762px;
}


.about-section--vision .about-section__media,
.about-section__panel {
	height: 666px;
}


.about-section__panel {
	display: flex;
	align-items: center;
	background: var(--dar-color-white);
	padding-left: calc(104 / 858 * 100%);
	padding-right: calc(87 / 858 * 100%);
}


.about-section__vision-copy {
	max-width: 667px;
}


.about-section__eyebrow {
	margin: 0 0 25px;
	color: var(--dar-color-accent-strong);
	font-size: 11px;
	font-weight: 600;
	line-height: 19.8px;
	letter-spacing: 1.98px;
	text-transform: uppercase;
}


.about-section__quote {
	max-width: 783px;
	margin: 0 0 50px;
	color: var(--dar-color-text);
	font-family: var(--dar-font-heading);
	font-size: 65px;
	font-weight: 500;
	line-height: 71px;
	letter-spacing: 0;
}


.about-section__copy {
	max-width: 656px;
	color: #000000;
	font-size: 16px;
	font-weight: 300;
	line-height: 25px;
	opacity: 0.7;
}


.about-section__copy p {
	margin: 0 0 25px;
	color: inherit;
	font-size: inherit;
	font-weight: inherit;
	line-height: inherit;
}


.about-section__vision {
	margin: 0;
	color: #121212;
	font-family: var(--dar-font-heading);
	font-size: 45px;
	font-weight: 400;
	line-height: 65px;
	letter-spacing: 0;
}

/* ==========================================================================
   Media queries — max-width descending
   ========================================================================== */

@media (max-width: 1599px) {
.about-section__copy {
		font-size: 13px;
	}
}

@media (max-width: 1300px) {
.about-page {
		row-gap: 80px;
	}


.about-section__quote {
		font-size: 58px;
		line-height: 64px;
	}


.about-section__vision {
		font-size: 40px;
		line-height: 58px;
	}
}

@media (max-width: 1060px) {
.about-page {
		row-gap: 64px;
	}


.about-section--philosophy,
.about-section--vision {
		grid-template-columns: 1fr;
		min-height: 0;
	}


.about-section__content {
		padding-top: 0;
	}


.about-section--philosophy .about-section__media,
.about-section--vision .about-section__media,
.about-section__panel {
		height: auto;
		min-height: 520px;
	}


.about-section--philosophy .about-section__media {
		order: -1;
	}


.about-section__panel {
		padding: 56px;
		min-height: 0;
	}
}

@media (max-width: 800px) {
.about-page {
		padding-top: 32px;
		row-gap: 48px;
	}


.about-hero {
		aspect-ratio: auto;
		min-height: 420px;
	}


.about-hero__title {
		left: 24px;
		width: calc(100% - 48px);
		font-size: 48px;
		line-height: 52px;
	}


.about-section__quote {
		margin-bottom: 32px;
		font-size: 44px;
		line-height: 50px;
	}


.about-section__vision {
		font-size: 34px;
		line-height: 45px;
	}


.about-section--philosophy .about-section__media,
.about-section--vision .about-section__media {
		min-height: 430px;
	}


.about-section__panel {
		padding: 40px 24px;
	}
}

@media (max-width: 767px) {
.about-page {
		row-gap: 40px;
		padding-top: 24px;
	}


.about-hero {
		min-height: 360px;
	}


.about-hero__title {
		left: 20px;
		width: calc(100% - 40px);
		font-size: 42px;
		line-height: 46px;
	}


.about-section__quote {
		font-size: 38px;
		line-height: 44px;
	}


.about-section__vision {
		font-size: 30px;
		line-height: 40px;
	}


.about-section__panel {
		padding: 32px 20px;
	}
}

@media (max-width: 479px) {
.about-hero__title {
		font-size: 38px;
		line-height: 42px;
	}


.about-section__quote {
		font-size: 34px;
		line-height: 40px;
	}
}

@media (max-width: 350px) {
.about-hero__title {
		left: 16px;
		width: calc(100% - 32px);
		font-size: 40px;
		line-height: 44px;
	}


.about-section__quote {
		font-size: 36px;
		line-height: 42px;
	}


.about-section__vision {
		font-size: 30px;
		line-height: 38px;
	}
}