.about {
	position: relative;
	z-index: 1;
	margin-top: 30px;
}

.about__inner {
	display: grid;
	grid-template-columns: 5fr 7fr;
	gap: clamp(var(--spacing-32), 5vw, 80px);
	align-items: center;
}

/* ───────── Текстовая колонка ───────── */

.about__body {
	min-width: 0;
}

.about__title {
	font-size: clamp(26px, 2.4vw, 32px);
	font-weight: var(--font-weight-bold);
	line-height: 1.2;
	color: var(--color-off-black);
}

.about__heart {
	display: inline-block;
	font-size: 0.75em;
	transform-origin: center;
	animation: about-heartbeat 2.6s ease-in-out infinite;
	will-change: transform;
}

@keyframes about-heartbeat {
	0%,
	60%,
	100% {
		transform: scale(1);
	}
	10% {
		transform: scale(1.1);
	}
	20% {
		transform: scale(0.98);
	}
	30% {
		transform: scale(1.07);
	}
	42% {
		transform: scale(1);
	}
}

@media (prefers-reduced-motion: reduce) {
	.about__heart {
		animation: none;
	}
}

.about__lead {
	margin-top: clamp(var(--spacing-24), 2.5vw, var(--spacing-34));
	display: flex;
	flex-direction: column;
	gap: var(--spacing-20);
}

.about__lead-main {
	font-size: var(--font-size-md);
	line-height: var(--line-height-body);
	color: var(--color-off-black);
}

.about__lead-note {
	font-size: var(--font-size-base);
	line-height: var(--line-height-body);
	color: var(--color-gray);
}

.about__sign {
	margin-top: clamp(var(--spacing-24), 2vw, var(--spacing-32));
	font-size: var(--font-size-sm);
	font-weight: var(--font-weight-medium);
	line-height: var(--line-height-heading);
	color: var(--color-gray-dark);
}

/* ───────── Награда (встроенная полоса) ───────── */

.about__award {
	display: flex;
	align-items: center;
	gap: clamp(var(--spacing-20), 2vw, var(--spacing-24));
	margin-top: clamp(var(--spacing-32), 4vw, 56px);
	padding-top: var(--spacing-24);
	border-top: 1px solid rgba(0, 0, 0, 0.08);
}

.about__award-media {
	width: clamp(96px, 9vw, 128px);
	height: clamp(96px, 9vw, 128px);
	flex: none;
	border-radius: var(--radius-md);
	overflow: hidden;
}

.about__award-badge {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.about__award-text {
	min-width: 0;
}

.about__award-tag {
	font-size: var(--font-size-sm);
	font-weight: var(--font-weight-medium);
	color: var(--color-gray);
}

.about__award-title {
	margin-top: var(--spacing-6);
	font-size: var(--font-size-lg);
	font-weight: var(--font-weight-bold);
	line-height: var(--line-height-heading);
	color: var(--color-off-black);
}

.about__award-meta {
	margin-top: var(--spacing-6);
	font-size: var(--font-size-sm);
	line-height: var(--line-height-body);
	color: var(--color-gray);
}

/* ───────── Фото команды ───────── */

.about__media {
	min-width: 0;
	position: relative;
}

.about__photo {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}

.about-video {
	position: absolute;
	left: -70px;
	top: -70px;
	z-index: 2;
	width: clamp(172px, 14vw, 226px);
	aspect-ratio: 1;
	display: grid;
	place-items: center;
	overflow: visible;
	border-radius: var(--radius-pill);
	background-color: var(--color-off-black);
	color: var(--color-off-white);
	box-shadow: var(--shadow-sm), 0 0 0 8px color-mix(in srgb, var(--color-white) 78%, transparent), 0 0 0 9px color-mix(in srgb, var(--color-blue) 34%, transparent);
	filter: drop-shadow(0 18px 32px color-mix(in srgb, var(--color-off-black) 18%, transparent));
	isolation: isolate;
	translate: -18% 0;
	transform-origin: center;
	transition: box-shadow var(--transition-base);
}

.about-video--inline {
	display: none;
}

.about-video::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	border-radius: var(--radius-pill);
	background-color: color-mix(in srgb, var(--color-off-black) 42%, transparent);
	transition: background-color var(--transition-base);
}

.about-video::after {
	content: "";
	position: absolute;
	inset: -14px;
	z-index: -1;
	border-radius: var(--radius-pill);
	background-color: color-mix(in srgb, var(--color-warm-bg) 80%, transparent);
	transform: scale(1);
	transition: transform var(--transition-base), background-color var(--transition-base);
}

.about-video__preview {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: var(--radius-pill);
}

.about-video__play {
	position: relative;
	z-index: 2;
	width: clamp(50px, 5vw, 66px);
	height: clamp(50px, 5vw, 66px);
	display: grid;
	place-items: center;
	border-radius: var(--radius-pill);
	background-color: color-mix(in srgb, var(--color-off-white) 14%, transparent);
	color: var(--color-blue);
	box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--color-white) 22%, transparent), var(--shadow-sm);
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
	transition: background-color var(--transition-base), color var(--transition-base), box-shadow var(--transition-base);
}

.about-video__play [class^="iconoir-"],
.about-video__play [class*=" iconoir-"] {
	font-size: clamp(26px, 2.6vw, 34px);
	transform: translateX(2px);
}

.about-video__label {
	position: absolute;
	left: var(--spacing-20);
	right: var(--spacing-20);
	bottom: clamp(var(--spacing-20), 2vw, var(--spacing-24));
	z-index: 2;
	font-size: clamp(var(--font-size-xs), 1vw, var(--font-size-sm));
	font-weight: var(--font-weight-semibold);
	line-height: 1.2;
	text-align: center;
	color: var(--color-off-white);
}

.about-video:hover,
.about-video:focus-visible {
	box-shadow: var(--shadow-sm), 0 0 0 10px color-mix(in srgb, var(--color-white) 84%, transparent), 0 0 0 12px color-mix(in srgb, var(--color-blue) 42%, transparent);
}

.about-video:hover::before,
.about-video:focus-visible::before {
	background-color: color-mix(in srgb, var(--color-off-black) 28%, transparent);
}

.about-video:hover::after,
.about-video:focus-visible::after {
	background-color: color-mix(in srgb, var(--color-warm-bg) 85%, transparent);
	transform: scale(1.04);
}

.about-video:hover .about-video__play,
.about-video:focus-visible .about-video__play {
	background-color: color-mix(in srgb, var(--color-off-white) 22%, transparent);
	color: var(--color-blue-dark);
	box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--color-white) 30%, transparent), var(--shadow-sm);
}

/* ───────── Адаптив ───────── */

@media (max-width: 1100px) {
	.about__inner {
		gap: clamp(var(--spacing-24), 4vw, var(--spacing-32));
	}
}

@media (max-width: 900px) {
	.about__inner {
		display: flex;
		flex-direction: column;
		gap: clamp(var(--spacing-32), 5vw, 56px);
	}

	.about__media {
		order: 1;
		width: 100%;
	}

	.about__body {
		order: 2;
	}
}

@media (max-width: 520px) {
	.about__award {
		flex-direction: column;
		align-items: flex-start;
		gap: var(--spacing-20);
	}

	.about-video--media {
		display: none;
	}

	.about-video--inline {
		position: relative;
		left: auto;
		top: auto;
		display: grid;
		grid-template-columns: var(--font-size-display) auto;
		grid-template-rows: var(--font-size-display);
		align-items: center;
		justify-self: start;
		gap: var(--spacing-10);
		width: auto;
		aspect-ratio: auto;
		margin-top: clamp(var(--spacing-10), 3vw, var(--spacing-15));
		border-radius: 0;
		background-color: transparent;
		translate: 0 0;
		box-shadow: none;
		filter: none;
	}

	.about-video--inline::before,
	.about-video--inline::after {
		display: none;
	}

	.about-video--inline .about-video__preview {
		position: relative;
		inset: auto;
		grid-column: 1;
		grid-row: 1;
		width: var(--font-size-display);
		height: var(--font-size-display);
	}

	.about-video--inline .about-video__play {
		grid-column: 1;
		grid-row: 1;
		justify-self: center;
		width: var(--font-size-heading);
		height: var(--font-size-heading);
	}

	.about-video--inline .about-video__label {
		position: static;
		grid-column: 2;
		grid-row: 1;
		color: var(--color-off-black);
		font-size: var(--font-size-sm);
		text-align: left;
	}

	.about-video::after {
		inset: -8px;
	}

	.about-video__play {
		width: 42px;
		height: 42px;
	}

	.about-video__play [class^="iconoir-"],
	.about-video__play [class*=" iconoir-"] {
		font-size: 22px;
	}

	.about-video__label {
		left: var(--spacing-10);
		right: var(--spacing-10);
		bottom: var(--spacing-10);
		font-size: var(--font-size-xs);
	}

}

@media (prefers-reduced-motion: reduce) {
	.about__title,
	.about__lead,
	.about__sign,
	.about__award,
	.about__photo,
	.about-video,
	.about-video::before,
	.about-video::after,
	.about-video__play {
		transition: none;
	}
}