/*
 * About CSS: hero, intro, principles, team preview, stats, and CTA.
 */

.sl-about-hero {
	display: grid;
	align-items: end;
	min-height: 72vh;
	padding: calc(var(--sl-header) + 120px) 0 90px;
	background: linear-gradient(90deg, rgba(0, 0, 0, 0.48), rgba(0, 0, 0, 0.08)), var(--about-hero) center/cover;
	color: #fff;
}

.sl-about-hero h1 {
	max-width: 960px;
	color: #fff;
}

.sl-about-hero .sl-kicker {
	color: rgba(255, 255, 255, 0.76);
}

.sl-about-intro {
	border-bottom: 1px solid var(--sl-line);
}

.sl-principles {
	background: var(--sl-soft);
}

.sl-principles figure {
	margin: 0;
}

.sl-principles img {
	aspect-ratio: 4 / 5;
	width: 100%;
	object-fit: cover;
}

.sl-principles details {
	padding: 22px 0;
	border-bottom: 1px solid var(--sl-line);
}

.sl-principles summary {
	color: var(--sl-ink);
	font-size: 15px;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	cursor: pointer;
}

.sl-principles details p {
	margin: 14px 0 0;
}

.sl-team-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 28px;
}

.sl-team-card img {
	aspect-ratio: 4 / 5;
	width: 100%;
	object-fit: cover;
	filter: grayscale(100%);
}

.sl-team-card h3 {
	margin-top: 22px;
	font-size: 28px;
}

.sl-team-card p {
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

.sl-about-stats {
	background: var(--sl-soft);
}

.sl-about-cta {
	border-top: 1px solid var(--sl-line);
}

/*
 * Elementor About Us page.
 * These classes style editable Elementor widgets so the page has the same
 * premium architecture mood as the theme while keeping every visible item
 * changeable from WordPress.
 */

.sl-about-el-hero {
	position: relative;
	overflow: hidden;
	background: #f5f2ee;
}

.sl-about-el-hero::before {
	content: "About";
	position: absolute;
	top: 5%;
	left: -2%;
	z-index: 0;
	color: rgba(29, 27, 24, 0.045);
	font-family: var(--sl-serif);
	font-size: clamp(110px, 18vw, 280px);
	line-height: 0.82;
	pointer-events: none;
}

.sl-about-el-hero > .elementor-container {
	position: relative;
	z-index: 1;
	min-height: calc(92vh - var(--sl-header));
}

.sl-about-el-hero-copy > .elementor-widget-wrap {
	align-content: center;
	padding: clamp(48px, 7vw, 110px) 48px !important;
}

.sl-about-el-hero-media > .elementor-widget-wrap {
	align-content: center;
	padding: clamp(34px, 5vw, 74px) 48px clamp(34px, 5vw, 74px) 0 !important;
}

.sl-about-el-kicker,
.sl-about-el-kicker p {
	color: var(--sl-accent);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.18em;
	text-transform: uppercase;
}

.sl-about-el-hero-title .elementor-heading-title {
	color: var(--sl-ink) !important;
	font-family: var(--sl-serif) !important;
	font-size: clamp(56px, 7vw, 112px);
	font-weight: 400 !important;
	line-height: 0.98;
}

.sl-about-el-hero-text {
	max-width: 520px;
}

.sl-about-el-hero-image img {
	aspect-ratio: 4 / 4.8;
	width: 100%;
	min-height: 620px;
	object-fit: cover;
}

.sl-about-el-intro,
.sl-about-el-services,
.sl-about-el-team,
.sl-about-el-process,
.sl-about-el-cta {
	padding: clamp(76px, 9vw, 140px) 0;
}

.sl-about-el-intro > .elementor-container,
.sl-about-el-split > .elementor-container,
.sl-about-el-services > .elementor-container,
.sl-about-el-team-grid > .elementor-container,
.sl-about-el-process > .elementor-container,
.sl-about-el-cta > .elementor-container {
	width: min(calc(100% - 56px), 1440px);
	margin: 0 auto;
	gap: clamp(34px, 5vw, 82px);
}

.sl-about-el-intro .elementor-heading-title,
.sl-about-el-split-copy .elementor-heading-title,
.sl-about-el-team .elementor-heading-title,
.sl-about-el-cta .elementor-heading-title {
	color: var(--sl-ink) !important;
	font-family: var(--sl-serif) !important;
	font-size: clamp(42px, 5.2vw, 82px);
	font-weight: 400 !important;
	line-height: 1.05;
}

.sl-about-el-intro .elementor-widget-text-editor,
.sl-about-el-split-copy .elementor-widget-text-editor,
.sl-about-el-cta .elementor-widget-text-editor {
	max-width: 680px;
}

.sl-about-el-split {
	background: var(--sl-soft);
}

.sl-about-el-split-image img {
	width: 100%;
	min-height: 760px;
	object-fit: cover;
}

.sl-about-el-split-copy > .elementor-widget-wrap {
	align-content: center;
	padding: clamp(56px, 8vw, 120px) !important;
}

.sl-about-el-service-card > .elementor-widget-wrap,
.sl-about-el-process-card > .elementor-widget-wrap {
	min-height: 310px;
	align-content: start;
	padding: 34px !important;
	border-top: 1px solid var(--sl-line);
	background: #fff;
}

.sl-about-el-service-card .elementor-heading-title,
.sl-about-el-process-card .elementor-heading-title {
	color: var(--sl-ink) !important;
	font-family: var(--sl-serif) !important;
	font-size: clamp(27px, 2.8vw, 42px);
	font-weight: 400 !important;
	line-height: 1.12;
}

.sl-about-el-number,
.sl-about-el-number p {
	margin-bottom: 46px;
	color: var(--sl-accent);
	font-family: var(--sl-serif);
	font-size: 54px;
	line-height: 1;
}

.sl-about-el-team {
	background: #fff;
}

.sl-about-el-team-head > .elementor-container {
	width: min(calc(100% - 56px), 1440px);
	margin: 0 auto clamp(38px, 5vw, 72px);
}

.sl-about-el-team-card > .elementor-widget-wrap {
	align-content: start;
	background: var(--sl-soft);
	padding: 0 0 26px !important;
}

.sl-about-el-team-image {
	width: 100%;
	overflow: hidden;
}

.sl-about-el-team-image img {
	aspect-ratio: 4 / 5;
	width: 100%;
	object-fit: cover;
	filter: grayscale(100%);
}

.sl-about-el-team-card .elementor-widget-heading,
.sl-about-el-team-card .elementor-widget-text-editor {
	padding-right: 28px;
	padding-left: 28px;
}

.sl-about-el-team-card .elementor-heading-title {
	color: var(--sl-ink) !important;
	font-family: var(--sl-serif) !important;
	font-size: clamp(26px, 2.6vw, 38px);
	font-weight: 400 !important;
}

.sl-about-el-role,
.sl-about-el-role p {
	color: var(--sl-accent);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
}

.sl-about-el-stats {
	padding: 84px 0;
	background: #171512;
	color: #fff;
}

.sl-about-el-stats > .elementor-container {
	width: min(calc(100% - 56px), 1440px);
	margin: 0 auto;
}

.sl-about-el-stat .elementor-heading-title {
	color: #fff !important;
	font-family: var(--sl-serif) !important;
	font-size: clamp(46px, 5.5vw, 88px);
	font-weight: 400 !important;
	line-height: 1;
}

.sl-about-el-stat p {
	color: rgba(255, 255, 255, 0.68);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
}

.sl-about-el-process {
	background: var(--sl-soft);
}

.sl-about-el-cta {
	text-align: center;
	background: #fff;
	border-top: 1px solid var(--sl-line);
}

.sl-about-el-cta .elementor-widget-text-editor {
	margin-right: auto;
	margin-left: auto;
}

.sl-about-el-button .elementor-button {
	border: 1px solid var(--sl-ink);
	border-radius: 0;
	background: transparent !important;
	color: var(--sl-ink) !important;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
}

.sl-about-el-button .elementor-button:hover {
	background: var(--sl-ink) !important;
	color: #fff !important;
}

@media (max-width: 980px) {
	.sl-about-el-hero-copy > .elementor-widget-wrap,
	.sl-about-el-hero-media > .elementor-widget-wrap,
	.sl-about-el-split-copy > .elementor-widget-wrap {
		padding: 34px 24px !important;
	}

	.sl-about-el-hero-image img,
	.sl-about-el-split-image img {
		min-height: 420px;
	}

	.sl-about-el-intro > .elementor-container,
	.sl-about-el-split > .elementor-container,
	.sl-about-el-services > .elementor-container,
	.sl-about-el-team-grid > .elementor-container,
	.sl-about-el-process > .elementor-container,
	.sl-about-el-cta > .elementor-container {
		width: min(calc(100% - 36px), 760px);
	}
}