/* ==================================================
   ABOUT SHARED
   ================================================== */

.about-eyebrow {
	margin: 0 0 8px;

	color: var(--color-primary);

	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.07em;

	text-transform: uppercase;
}

.about-eyebrow-light {
	color: var(--color-white);
	opacity: 0.78;
}

.about-section-heading {
	max-width: 690px;
	margin-bottom: 24px;
}

.about-section-heading h2 {
	margin-bottom: 0;

	font-size:
		clamp(
			1.55rem,
			2.5vw,
			1.95rem
		);
}


/* ==================================================
   HERO
   ================================================== */

.about-hero {
	padding: 44px 0;

	background:
		var(--color-surface);

	border-bottom:
		1px solid
		var(--color-border-soft);
}

.about-hero-grid {
	display: grid;

	grid-template-columns:
		minmax(0, 1.05fr)
		minmax(320px, 0.95fr);

	align-items: center;

	gap: 36px;
}

.about-hero-content h1 {
	max-width: 680px;

	margin-bottom: 12px;

	font-size:
		clamp(
			2rem,
			3vw,
			2.5rem
		);
}

.about-hero-description {
	max-width: 650px;

	margin-bottom: 18px;

	font-size: 15px;
}

.about-hero-actions {
	display: flex;
	flex-wrap: wrap;

	gap: 8px;
}

.about-hero-image,
.about-hero-placeholder {
	width: 100%;

	aspect-ratio: 4 / 3;

	border-radius:
		var(--radius-lg);
}

.about-hero-image {
	object-fit: cover;
}

.about-hero-placeholder {
	display: flex;

	flex-direction: column;

	align-items: center;
	justify-content: center;

	gap: 14px;

	padding: 24px;

	background:
		var(--color-secondary);

	color:
		var(--color-white);

	text-align: center;
}

.about-hero-placeholder span {
	display: flex;

	align-items: center;
	justify-content: center;

	width: 52px;
	height: 52px;

	background:
		var(--color-primary);

	color:
		var(--color-white);

	border-radius: 8px;
}

.about-hero-placeholder svg {
	width: 26px;
	height: 26px;

	fill: none;

	stroke:
		var(--color-white);

	stroke-width: 1.8;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.about-hero-placeholder strong {
	max-width: 300px;

	font-family:
		var(--font-heading);

	font-size: 20px;

	line-height: 1.2;
}


/* ==================================================
   STORY
   ================================================== */

.about-story-section {
	padding: 48px 0;

	background:
		var(--color-white);
}

.about-story-grid {
	display: grid;

	grid-template-columns:
		minmax(0, 1fr)
		330px;

	align-items: start;

	gap: 38px;
}

.about-story-content {
	max-width: 760px;
}

.about-story-content h2 {
	margin-bottom: 16px;

	font-size:
		clamp(
			1.55rem,
			2.5vw,
			1.95rem
		);
}

.about-story-content p {
	max-width: 740px;
}

.about-since-card {
	padding: 24px;

	background:
		var(--color-secondary);

	color:
		var(--color-white);

	border-top:
		4px solid
		var(--color-primary);

	border-radius:
		var(--radius-md);
}

.about-since-label {
	display: block;

	margin-bottom: 2px;

	color:
		rgba(
			255,
			255,
			255,
			0.72
		);

	font-size: 12px;
	font-weight: 700;

	letter-spacing: 0.06em;

	text-transform: uppercase;
}

.about-since-year {
	display: block;

	margin-bottom: 12px;

	color:
		var(--color-white);

	font-family:
		var(--font-heading);

	font-size: 36px;

	line-height: 1;
}

.about-since-card h3 {
	margin-bottom: 8px;

	color:
		var(--color-white);

	font-size: 20px;
}

.about-since-card p {
	margin: 0;

	color:
		rgba(
			255,
			255,
			255,
			0.76
		);

	font-size: 14px;
}


/* ==================================================
   ADVANTAGES
   ================================================== */

.about-advantages-section {
	padding: 46px 0;

	background:
		var(--color-surface);

	border-top:
		1px solid
		var(--color-border-soft);
}

.about-advantages-grid {
	display: grid;

	grid-template-columns:
		repeat(
			4,
			minmax(0, 1fr)
		);

	gap: 16px;
}

.about-advantage-card {
	padding: 20px;

	background:
		var(--color-white);

	border:
		1px solid
		var(--color-border-soft);

	border-radius:
		var(--radius-md);

	box-shadow:
		var(--shadow-card);
}

.about-advantage-icon {
	display: flex;

	align-items: center;
	justify-content: center;

	width: 42px;
	height: 42px;

	margin-bottom: 14px;

	background:
		var(--color-primary);

	color:
		var(--color-white);

	border-radius: 7px;
}

.about-advantage-icon svg {
	width: 21px;
	height: 21px;

	fill: none;

	stroke:
		var(--color-white);

	stroke-width: 1.8;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.about-advantage-card h3 {
	margin-bottom: 7px;

	font-size: 18px;
}

.about-advantage-card p {
	margin: 0;

	font-size: 14px;
}


/* ==================================================
   VALUES
   ================================================== */

.about-values-section {
	padding: 44px 0;

	background:
		var(--color-secondary);

	color:
		var(--color-white);
}

.about-section-heading-light h2 {
	color:
		var(--color-white);
}

.about-values-grid {
	display: grid;

	grid-template-columns:
		repeat(
			3,
			minmax(0, 1fr)
		);

	gap: 16px;
}

.about-value-item {
	display: grid;

	grid-template-columns:
		38px
		minmax(0, 1fr);

	gap: 13px;

	padding: 18px;

	border:
		1px solid
		rgba(
			255,
			255,
			255,
			0.14
		);

	border-radius:
		var(--radius-md);
}

.about-value-item > span {
	display: flex;

	align-items: center;
	justify-content: center;

	width: 38px;
	height: 38px;

	background:
		var(--color-primary);

	color:
		var(--color-white);

	border-radius: 7px;

	font-size: 12px;
	font-weight: 700;
}

.about-value-item h3 {
	margin-bottom: 5px;

	color:
		var(--color-white);

	font-size: 18px;
}

.about-value-item p {
	margin: 0;

	color:
		rgba(
			255,
			255,
			255,
			0.74
		);

	font-size: 14px;
}


/* ==================================================
   FINAL CTA
   ================================================== */

.about-final-cta {
	padding: 30px 0;

	background:
		var(--color-white);

	border-top:
		1px solid
		var(--color-border-soft);
}

.about-final-cta-inner {
	display: flex;

	align-items: center;
	justify-content: space-between;

	gap: 24px;
}

.about-final-cta h2 {
	margin-bottom: 5px;

	font-size: 26px;
}

.about-final-cta p {
	max-width: 680px;

	margin: 0;

	font-size: 14px;
}

.about-final-cta .btn {
	flex: 0 0 auto;
}


/* ==================================================
   TABLET
   ================================================== */

@media (max-width: 1023px) {

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

	.about-story-grid {
		grid-template-columns:
			minmax(0, 1fr)
			280px;

		gap: 28px;
	}

}


/* ==================================================
   MOBILE
   ================================================== */

@media (max-width: 767px) {

	.about-hero {
		padding: 34px 0;
	}


	.about-hero-grid,
	.about-story-grid,
	.about-values-grid {
		grid-template-columns: 1fr;
	}


	.about-hero-grid,
	.about-story-grid {
		gap: 24px;
	}


	.about-story-section,
	.about-advantages-section,
	.about-values-section {
		padding: 36px 0;
	}


	.about-advantages-grid {
		grid-template-columns: 1fr;

		gap: 12px;
	}


	.about-hero-content h1 {
		font-size: 30px;
	}


	.about-section-heading h2,
	.about-story-content h2 {
		font-size: 25px;
	}


	.about-since-year {
		font-size: 32px;
	}


	.about-final-cta-inner {
		align-items: flex-start;

		flex-direction: column;
	}


	.about-final-cta h2 {
		font-size: 23px;
	}

}