.about-page {
	margin-bottom: 60px;
	.section-heading {
		display: flex;
		align-items: end;
		justify-content: space-between;
		gap: 40px;
		h2 {
			font-size: 48px;
			line-height: 1;
			span {
				font: inherit;
				color: transparent;
				background: var(--gradient-1);
				background-clip: text;
				-webkit-background-clip: text;
			}
		}
		> p {
			width: 448px;
			flex-shrink: 0;
			color: var(--textColor2);
			text-align: right;
			text-transform: uppercase;
		}
		&.reverse {
			> p {
				text-align: left;
			}
		}
		&.centered {
			flex-direction: column;
			align-items: center;
			gap: 20px;
			> p,
			h2 {
				width: 100%;
				text-align: center;
			}
		}
	}
	.hero {
		min-height: 678px;
		overflow: hidden;
		.wrapper {
			position: relative;
			min-height: inherit;
			padding-top: 120px;
		}
		.breadcrumbs {
			position: relative;
			z-index: 2;
			display: flex;
			gap: 6px;
			font-size: 12px;
			text-transform: uppercase;
			* {
				font-size: inherit;
				color: color-mix(in srgb, var(--textColor) 60%, transparent);
			}
		}
		.content {
			position: relative;
			z-index: 2;
			width: min(952px, 56vw);
			margin-top: 99px;
			h1 {
				font-size: clamp(54px, 3.55vw, 68px);
				line-height: 1;
			}
			.lead {
				width: min(724px, 100%);
				margin-top: 6px;
				font-size: 24px;
				font-weight: 500;
				line-height: 1.2;
				letter-spacing: -.5px;
				color: transparent;
				background: var(--gradient-1);
				background-clip: text;
				-webkit-background-clip: text;
			}
			.lead + p {
				margin-top: 6px;
				color: color-mix(in srgb, var(--textColor) 70%, transparent);
				line-height: 1.3;
			}
		}
		.actions {
			display: flex;
			gap: 30px;
			margin-top: 30px;
			.btn,
			.portfolio-link {
				height: 70px;
				padding-inline: 55px;
				border-radius: 16px;
				font-size: 20px;
				font-weight: 900;
				text-transform: uppercase;
			}
			.btn {
				--pd-h: 0px;
				background: var(--gradient-1);
				transition: .3s linear;
			}
			.portfolio-link {
				display: flex;
				align-items: center;
				justify-content: center;
				border: 1px solid var(--bg-2);
				color: transparent;
				background: var(--gradient-1);
				background-clip: text;
				-webkit-background-clip: text;
				transition: .3s linear;
			}
		}
		.picture {
			position: absolute;
			top: -129px;
			left: 31.3%;
			width: 1510px;
			max-width: none;
			pointer-events: none;
		}
	}
	.manifest,
	.approach {
		background: color-mix(in srgb, var(--bg-1) 50%, transparent);
	}
	.manifest {
		padding: 60px 0;
		.section-heading h2 {
			order: -1;
		}
		.description {
			width: min(800px, 100%);
			margin-top: 20px;
			font-size: 20px;
			font-weight: 500;
			line-height: 1.6;
			color: var(--textColor2);
		}
		.stats {
			display: grid;
			grid-template-columns: repeat(4, 1fr);
			gap: 12px;
			margin-top: 40px;
			article {
				position: relative;
				height: 224px;
				overflow: hidden;
				padding: 135px 40px 35px;
				border: 1px solid color-mix(in srgb, var(--textColor) 10%, transparent);
				border-radius: 12px;
				background: color-mix(in srgb, var(--bg-1) 60%, transparent);
				transition: border-color .3s linear, background .3s linear, box-shadow .3s linear;
				strong {
					position: absolute;
					top: -42px;
					left: -13px;
					font-size: clamp(100px, 8.96vw, 172px);
					font-weight: 900;
					line-height: 1;
					text-transform: uppercase;
					white-space: nowrap;
					color: color-mix(in srgb, var(--textColor) 10%, transparent);
					transition: color .3s linear;
					&::after {
						content: attr(data-text);
						position: absolute;
						inset: 0;
						color: transparent;
						background: var(--gradient-1);
						background-clip: text;
						-webkit-background-clip: text;
						opacity: 0;
						transition: opacity .3s linear;
					}
				}
				h3 {
					position: relative;
					font-size: 24px;
					line-height: 1;
					color: var(--textColor2);
					transition: .3s linear;
				}
			}
		}
	}
	.values,
	.competencies,
	.clients {
		margin-top: 120px;
	}
	.values {
		.items {
			display: grid;
			grid-template-columns: repeat(3, 1fr);
			gap: 12px;
			margin-top: 40px;
			article {
				padding: 40px;
				border-radius: 16px;
				background: color-mix(in srgb, var(--bg-1) 60%, transparent);
				box-shadow: 0 16px 34px color-mix(in srgb, var(--textColor) 6%, transparent);
				.title {
					display: flex;
					align-items: center;
					gap: 12px;
					.icon {
						display: grid;
						width: 60px;
						aspect-ratio: 1;
						flex-shrink: 0;
						place-items: center;
						border: 1px solid var(--bg-1);
						border-radius: 16px;
						background: var(--bg-1);
						box-shadow: 0 4px 9px color-mix(in srgb, var(--bg-2) 5%, transparent), 0 16px 16px color-mix(in srgb, var(--bg-2) 4%, transparent);
						img {
							width: 32px;
						}
					}
					h3 {
						font-size: 24px;
						line-height: 1.1;
					}
				}
				> p {
					margin-top: 10px;
					line-height: 1.1;
					color: color-mix(in srgb, var(--textColor) 60%, transparent);
				}
			}
		}
	}
	.competencies {
		.body {
			display: grid;
			grid-template-columns: repeat(2, minmax(0, 1fr));
			align-items: center;
			gap: 12px;
			margin-top: 40px;
		}
		.list {
			display: flex;
			flex-direction: column;
			gap: 12px;
			label {
				position: relative;
				display: flex;
				min-height: 144px;
				align-items: center;
				gap: 20px;
				padding: 40px;
				border: 1px solid transparent;
				border-radius: 16px;
				background: color-mix(in srgb, var(--bg-1) 60%, transparent);
				box-shadow: 0 16px 34px color-mix(in srgb, var(--textColor) 6%, transparent);
				cursor: pointer;
				transition: .3s linear;
				input {
					position: absolute;
					opacity: 0;
					pointer-events: none;
				}
				> strong {
					width: 80px;
					flex-shrink: 0;
					font-size: 48px;
					font-weight: 900;
					line-height: 1;
					color: transparent;
					background: var(--gradient-1);
					background-clip: text;
					-webkit-background-clip: text;
					opacity: .5;
				}
				.text {
					display: flex;
					min-width: 0;
					flex: 1;
					flex-direction: column;
					gap: 10px;
					b {
						font-size: 24px;
						font-weight: 900;
						line-height: 1.1;
						text-transform: uppercase;
					}
					span {
						line-height: 1.1;
						color: color-mix(in srgb, var(--textColor) 60%, transparent);
					}
				}
				.control {
					display: grid;
					width: 60px;
					aspect-ratio: 1;
					flex-shrink: 0;
					place-items: center;
					border: 1px solid var(--bg-1);
					border-radius: 12px;
					background: var(--bg-1);
					box-shadow: 0 4px 9px color-mix(in srgb, var(--bg-2) 5%, transparent), 0 16px 16px color-mix(in srgb, var(--bg-2) 4%, transparent);
					&::before {
						content: '\e903';
						font-family: 'icon';
						font-size: 24px;
					}
				}
				&:has(input:checked) {
					border-color: var(--bg-2);
					background: var(--bg-1);
					> strong {
						opacity: 1;
					}
				}
				&:has(input:focus-visible) {
					outline: 2px solid var(--bg-3);
					outline-offset: 3px;
				}
			}
		}
		.media {
			position: relative;
			height: 456px;
			overflow: hidden;
			border-radius: 16px;
			background: var(--bg-1);
			box-shadow: 0 16px 34px color-mix(in srgb, var(--textColor) 6%, transparent);
			.image {
				position: absolute;
				inset: 0;
				opacity: 0;
				transition: opacity .35s ease;
				img {
					position: absolute;
					inset: 0;
					height: 100%;
					object-fit: cover;
				}
			}
		}
		&:has(input[value="strategy"]:checked) .image.strategy,
		&:has(input[value="marketing"]:checked) .image.marketing,
		&:has(input[value="development"]:checked) .image.development {
			opacity: 1;
		}
	}
	.approach {
		margin-top: 120px;
		padding: 60px 0;
		.items {
			display: grid;
			grid-template-columns: repeat(3, 1fr);
			gap: 12px;
			margin-top: 40px;
			article {
				position: relative;
				height: 224px;
				overflow: hidden;
				padding: 130px 40px 35px;
				border: 1px solid color-mix(in srgb, var(--textColor) 10%, transparent);
				border-radius: 12px;
				background: color-mix(in srgb, var(--bg-1) 60%, transparent);
				transition: border-color .3s linear, background .3s linear, box-shadow .3s linear;
				> strong {
					position: absolute;
					top: -42px;
					left: -13px;
					font-size: clamp(110px, 8.96vw, 172px);
					font-weight: 900;
					line-height: 1;
					color: color-mix(in srgb, var(--textColor) 10%, transparent);
					filter: blur(22px);
					transition: filter .3s linear;
				}
				h3 {
					position: relative;
					font-size: 24px;
					line-height: 1;
					color: var(--textColor2);
					transition: color .3s linear;
					&::after {
						content: attr(data-text);
						position: absolute;
						inset: 0;
						color: transparent;
						background: var(--gradient-1);
						background-clip: text;
						-webkit-background-clip: text;
						opacity: 0;
						transition: opacity .3s linear;
					}
				}
				p {
					max-width: 400px;
					margin-top: 6px;
					line-height: 1.1;
					color: color-mix(in srgb, var(--textColor) 60%, transparent);
				}
			}
		}
	}
	.clients {
		.logos {
			display: grid;
			grid-template-columns: repeat(4, 1fr);
			gap: 12px;
			margin-top: 40px;
			> div {
				display: grid;
				height: 140px;
				place-items: center;
				border-radius: 16px;
				background: var(--bg-1);
				box-shadow: 0 16px 34px color-mix(in srgb, var(--textColor) 6%, transparent);
				img {
					width: 139px;
					max-height: 40px;
				}
			}
		}
		.awards {
			margin-top: 40px;
			> p {
				color: var(--textColor2);
				text-transform: uppercase;
			}
			> div {
				display: flex;
				flex-wrap: wrap;
				gap: 12px;
				margin-top: 20px;
				a {
					display: block;
					padding: 10px 20px;
					border: 1px solid color-mix(in srgb, var(--textColor) 10%, transparent);
					border-radius: 12px;
					font-weight: 700;
					color: var(--textColor2);
				}
			}
		}
	}
	.seo {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 12px;
		margin-top: 120px;
		.column {
			&:last-child {
				padding-top: 34px;
			}
			h2 {
				display: flex;
				align-items: center;
				gap: 20px;
				font-size: 16px;
				line-height: 1.2;
				color: var(--textColor2);
				white-space: nowrap;
				&::after {
					content: '\e903';
					font-family: 'icon';
					font-size: 24px;
					transform: rotate(90deg);
				}
			}
			.text {
				display: flex;
				flex-direction: column;
				gap: 4px;
				margin-top: 10px;
				opacity: .6;
				p,
				li {
					font-size: 20px;
					line-height: 1.2;
					color: var(--textColor2);
				}
				ul {
					padding-left: 30px;
				}
				.muted {
					opacity: .4;
				}
			}
		}
	}
}
@media (max-width: 1280px) {
	.about-page {
		.section-heading h2 {
			font-size: 42px;
		}
		.hero {
			.content {
				width: 64vw;
			}
			.picture {
				left: 45%;
				opacity: .3;
			}
		}
		.manifest .stats article,
		.approach .items article {
			padding-inline: 24px;
		}
		.values .items article {
			padding: 28px;
		}
		.competencies {
			.list label {
				padding: 28px;
				> strong {
					width: 62px;
				}
			}
		}
		.seo {
			grid-template-columns: 1fr;
			.column:last-child {
				display: none;
			}
		}
	}
}
@media (max-width: 1024px) {
	.about-page {
		.section-heading {
			align-items: start;
			> p {
				width: auto;
			}
		}
		.hero {
			min-height: 650px;
			.content {
				width: 76vw;
			}
			.picture {
				left: 30%;
				opacity: .12;
			}
		}
		.manifest .stats {
			grid-template-columns: repeat(2, 1fr);
		}
		.values .items {
			grid-template-columns: 1fr;
		}
		.competencies {
			.body {
				grid-template-columns: 1fr;
			}
			.media {
				height: 430px;
				grid-row: 1;
			}
		}
		.approach .items {
			grid-template-columns: 1fr;
		}
		.clients .logos {
			grid-template-columns: repeat(2, 1fr);
		}
		.seo {
			margin-top: 80px;
			.column {
				h2 {
					align-items: start;
					white-space: normal;
				}
				.text {
					p,
					li {
						font-size: 16px;
					}
				}
			}
		}
	}
}
@media (max-width: 767px) {
	.about-page {
		margin-bottom: 60px;
		.section-heading {
			flex-direction: column;
			gap: 14px;
			h2 {
				font-size: 32px;
			}
			> p {
				order: -1;
				text-align: left;
			}
			&.centered {
				align-items: start;
				> p,
				h2 {
					text-align: left;
				}
			}
		}
		.hero {
			min-height: 690px;
			.wrapper {
				padding-top: 100px;
			}
			.content {
				width: 100%;
				margin-top: 70px;
				h1 {
					font-size: clamp(38px, 12vw, 54px);
				}
				.lead {
					font-size: 20px;
				}
			}
			.actions {
				width: 100%;
				max-width: 366px;
				flex-direction: column;
				gap: 12px;
				.btn,
				.portfolio-link {
					width: 100%;
					height: 60px;
					padding-inline: 20px;
					font-size: 16px;
				}
				.portfolio-link {
					padding-inline: 10px;
				}
			}
			.picture {
				top: 160px;
				left: -20%;
				width: 1150px;
				opacity: .08;
			}
		}
		.manifest {
			padding: 40px 0;
			.description {
				font-size: 17px;
				line-height: 1.4;
			}
			.stats {
				grid-template-columns: 1fr;
				article {
					height: 190px;
					padding-top: 112px;
				}
			}
		}
		.values,
		.competencies,
		.clients,
		.approach {
			margin-top: 80px;
		}
		.values .items article {
			padding: 20px;
			.title h3 {
				font-size: 20px;
			}
		}
		.competencies {
			.list label {
				min-height: auto;
				gap: 12px;
				padding: 20px;
				> strong {
					width: 48px;
					font-size: 36px;
				}
				.text b {
					font-size: 19px;
				}
				.control {
					width: 46px;
				}
			}
			.media {
				height: 280px;
			}
		}
		.approach {
			padding: 40px 0;
			.items article {
				height: 200px;
				padding: 112px 24px 24px;
				h3 {
					font-size: 20px;
				}
			}
		}
		.clients {
			.logos {
				gap: 8px;
				> div {
					height: 100px;
					img {
						width: 105px;
					}
				}
			}
			.awards > div {
				gap: 8px;
				a {
					padding: 9px 14px;
					font-size: 14px;
				}
			}
		}
	}
}
@media (hover: hover) {
	.about-page {
		.manifest .stats article:hover {
			border-color: transparent;
			background: var(--bg-1);
			box-shadow: 0 16px 34px color-mix(in srgb, var(--textColor) 6%, transparent);
			strong {
				color: transparent;
				&::after {
					opacity: 1;
				}
			}
			h3 {
				color: transparent;
				background: var(--gradient-1);
				background-clip: text;
				-webkit-background-clip: text;
			}
		}
		.approach .items article:hover {
			border-color: var(--bg-2);
			background: var(--bg-1);
			box-shadow: 0 16px 34px color-mix(in srgb, var(--textColor) 6%, transparent);
			> strong {
				filter: blur(0);
			}
			h3 {
				color: transparent;
				&::after {
					opacity: 1;
				}
			}
		}
		.hero .portfolio-link:hover,
		.competencies .list label:hover {
			box-shadow: 0 16px 34px color-mix(in srgb, var(--bg-2) 14%, transparent);
		}
		.clients .awards a:hover {
			border-color: var(--bg-2);
			color: transparent;
			background: var(--gradient-1);
			background-clip: text;
			-webkit-background-clip: text;
		}
	}
}