/**
 * Страница «О компании»: вступительный блок, цифры, цели и задачи,
 * преимущества, команда и миссия. Сетки на flex — они переживают
 * длинные заголовки лучше, чем жёсткие колонки.
 */

.pb-page--about {
	--pb-gap: 30px;
}

.pb-page--about > section + section {
	margin-block-start: 80px;
}

.pb-section__head {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 16px;
}

.pb-section__head .pb-section__title {
	margin-block-end: 28px;
}

.pb-section__more {
	font-size: 15px;
	color: var(--pb-accent);
	text-decoration: none;
	border-block-end: 1px solid currentColor;
}

/* --------------------------------------------------------------- *
 * Вступительный блок
 * --------------------------------------------------------------- */

.pb-about-hero {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 50px;
}

.pb-about-hero__text {
	flex: 1 1 420px;
	min-inline-size: 0;
}

.pb-about-hero__title {
	margin: 0 0 18px;
	font-size: clamp(34px, 5vw, 56px);
	line-height: 1.05;
	color: var(--pb-dark);
}

.pb-about-hero__desc {
	margin: 0 0 26px;
	font-size: 17px;
	line-height: 1.65;
	color: var(--pb-text, #555);
}

.pb-about-hero__address {
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 0 0 30px;
	padding: 14px 18px;
	border-inline-start: 3px solid var(--pb-accent);
	background: var(--pb-surface);
	font-size: 15px;
}

/* Второй адрес идёт сразу под первым, без большого разрыва. */
.pb-about-hero__address + .pb-about-hero__address {
	margin-block-start: -20px;
}

.pb-about-hero__pin {
	flex: 0 0 auto;
	inline-size: 12px;
	block-size: 12px;
	border-radius: 50%;
	background: var(--pb-accent);
	box-shadow: 0 0 0 5px rgba(0, 124, 214, .15);
}

.pb-about-hero__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 24px;
}

.pb-about-hero__actions .btn {
	display: inline-flex;
	inline-size: auto;
	align-self: flex-start;
}

.pb-about-hero__link {
	font-size: 15px;
	color: var(--pb-dark);
	text-decoration: none;
	border-block-end: 1px solid var(--pb-line);
	transition: color .2s ease, border-color .2s ease;
}

.pb-about-hero__link:hover {
	color: var(--pb-accent);
	border-color: var(--pb-accent);
}

.pb-about-hero__media {
	position: relative;
	flex: 1 1 380px;
	min-inline-size: 0;
}

.pb-about-hero__shot {
	margin: 0;
	overflow: hidden;
	background: var(--pb-surface);
}

.pb-about-hero__img {
	display: block;
	inline-size: 100%;
	block-size: 100%;
	max-inline-size: none;
	object-fit: cover;
}

.pb-about-hero__media--solo .pb-about-hero__shot {
	aspect-ratio: 4 / 3;
}

.pb-about-hero__media--duo {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 20px;
	align-items: start;
}

.pb-about-hero__media--duo .pb-about-hero__shot {
	aspect-ratio: 3 / 4;
}

.pb-about-hero__media--duo .pb-about-hero__shot--2 {
	margin-block-start: 40px;
}

/* Тонкая рамка со сдвигом — держит коллаж вместе. */
.pb-about-hero__media::before {
	content: '';
	position: absolute;
	inset-block: 24px -24px;
	inset-inline: -24px 40%;
	border: 1px solid var(--pb-line);
	z-index: -1;
}

/* --------------------------------------------------------------- *
 * Цифры
 * --------------------------------------------------------------- */

.pb-page--about .pb-counters {
	inline-size: 100vw;
	margin-inline: calc(50% - 50vw);
	padding-block: 54px;
	background: #fff;
	color: var(--pb-dark);
}

.pb-page--about .pb-counters__grid {
	display: flex;
	flex-wrap: wrap;
	gap: 30px;
	inline-size: min(1200px, calc(100vw - 40px));
	margin-inline: auto;
}

.pb-page--about .pb-counter {
	flex: 1 1 220px;
	min-inline-size: 0;
	padding-inline-start: 24px;
	border-inline-start: 2px solid var(--pb-line, #e4e9e8);
}

.pb-page--about .pb-counter__num {
	font-size: clamp(38px, 5vw, 56px);
	line-height: 1;
	font-weight: 700;
	color: var(--pb-dark);
}

.pb-page--about .pb-counter__title {
	margin-block-start: 10px;
	font-size: 17px;
	font-weight: 600;
}

.pb-page--about .pb-counter__text {
	margin-block-start: 4px;
	font-size: 14px;
	color: var(--pb-text, #222);
}

/* --------------------------------------------------------------- *
 * Директор
 * --------------------------------------------------------------- */

.pb-about-director {
	display: flex;
	flex-wrap: wrap;
	gap: 40px;
	align-items: flex-start;
}

.pb-about-director__photo {
	flex: 0 1 300px;
	margin: 0;
	aspect-ratio: 3 / 4;
	overflow: hidden;
	background: var(--pb-surface);
}

.pb-about-director__img {
	inline-size: 100%;
	block-size: 100%;
	max-inline-size: none;
	object-fit: cover;
}

.pb-about-director__body {
	flex: 1 1 420px;
	min-inline-size: 0;
}

.pb-about-director__name {
	margin: 0;
	font-size: 20px;
	font-weight: 600;
	color: var(--pb-dark);
}

.pb-about-director__role {
	margin: 4px 0 18px;
	font-size: 14px;
	color: var(--pb-accent);
}

/* --------------------------------------------------------------- *
 * Цели и задачи
 * --------------------------------------------------------------- */

.pb-about-plan {
	display: flex;
	flex-wrap: wrap;
	gap: var(--pb-gap);
}

.pb-about-plan__card {
	flex: 1 1 320px;
	min-inline-size: 0;
	padding: 34px;
	background: var(--pb-surface);
}

.pb-about-plan__card--accent {
	background: var(--pb-accent);
	color: #fff;
}

.pb-about-plan__title {
	margin: 0 0 20px;
	font-size: 22px;
	line-height: 1.25;
	color: inherit;
}

.pb-about-plan__card .pb-about-plan__title {
	color: var(--pb-dark);
}

.pb-about-plan__card--accent .pb-about-plan__title {
	color: #fff;
}

.pb-ticks {
	margin: 0;
	padding: 0;
	list-style: none;
}

.pb-ticks li {
	position: relative;
	padding-inline-start: 32px;
	font-size: 15px;
	line-height: 1.55;
}

.pb-ticks li + li {
	margin-block-start: 14px;
}

.pb-ticks li::before {
	content: '';
	position: absolute;
	inset-block-start: 6px;
	inset-inline-start: 0;
	inline-size: 16px;
	block-size: 9px;
	border-inline-start: 2px solid var(--pb-accent);
	border-block-end: 2px solid var(--pb-accent);
	transform: rotate(-45deg);
}

.pb-steps-list {
	counter-reset: pb-step;
	margin: 0;
	padding: 0;
	list-style: none;
}

.pb-steps-list li {
	position: relative;
	padding-inline-start: 44px;
	font-size: 15px;
	line-height: 1.55;
}

.pb-steps-list li + li {
	margin-block-start: 16px;
}

.pb-steps-list li::before {
	counter-increment: pb-step;
	content: counter(pb-step);
	position: absolute;
	inset-block-start: -2px;
	inset-inline-start: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	inline-size: 28px;
	block-size: 28px;
	border-radius: 50%;
	background: rgba(255, 255, 255, .2);
	font-size: 13px;
	font-weight: 600;
}

/* --------------------------------------------------------------- *
 * Преимущества
 * --------------------------------------------------------------- */

.pb-about-adv__grid {
	display: flex;
	flex-wrap: wrap;
	gap: var(--pb-gap);
	margin: 0;
	padding: 0;
	list-style: none;
}

.pb-about-adv__item {
	flex: 1 1 200px;
	min-inline-size: 0;
	padding: 26px;
	border: 1px solid var(--pb-line);
	transition: border-color .25s ease, transform .25s ease;
}

.pb-about-adv__item:hover {
	border-color: var(--pb-accent);
	transform: translateY(-4px);
}

.pb-about-adv__num {
	display: block;
	margin-block-end: 14px;
	font-size: 26px;
	font-weight: 700;
	color: var(--pb-accent);
}

.pb-about-adv__text {
	font-size: 16px;
	line-height: 1.45;
	color: var(--pb-dark);
}

/* --------------------------------------------------------------- *
 * Команда и миссия
 * --------------------------------------------------------------- */

.pb-about-team {
	display: flex;
	flex-wrap: wrap;
	gap: 40px;
	align-items: stretch;
}

.pb-about-team__text {
	flex: 1 1 440px;
	min-inline-size: 0;
}

.pb-about-mission {
	flex: 1 1 320px;
	min-inline-size: 0;
	margin: 0;
	padding: 36px;
	background: var(--pb-dark);
	color: #fff;
}

.pb-about-mission__title {
	margin: 0 0 18px;
	font-size: 20px;
	color: #fff;
}

.pb-about-mission__quote {
	position: relative;
	margin: 0;
	padding-block-start: 34px;
	font-size: 16px;
	line-height: 1.65;
	color: rgba(255, 255, 255, .88);
}

.pb-about-mission__quote::before {
	content: '“';
	position: absolute;
	inset-block-start: -14px;
	inset-inline-start: 0;
	font-size: 64px;
	line-height: 1;
	color: var(--pb-accent);
}

.pb-about-mission__caption {
	margin-block-start: 22px;
	font-size: 13px;
	color: rgba(255, 255, 255, .55);
}

@media (prefers-reduced-motion: reduce) {
	.pb-about-adv__item:hover {
		transform: none;
	}
}

@media (max-width: 1024px) {
	.pb-page--about > section + section {
		margin-block-start: 60px;
	}

	.pb-about-hero__media::before {
		display: none;
	}
}

@media (max-width: 767px) {
	.pb-about-hero,
	.pb-about-director,
	.pb-about-team {
		gap: 28px;
	}

	.pb-about-hero__media--duo .pb-about-hero__shot--2 {
		margin-block-start: 0;
	}

	.pb-about-plan__card,
	.pb-about-mission {
		padding: 24px;
	}

	.pb-page--about .pb-counters {
		padding-block: 36px;
	}
}