/* Страница «О нас»: верх как у «Контактов»; ниже — утверждение и текст в таблице с крестиками,
	чёрная полоса цифр поверх карты сети, ценности строками бланка, затем форма заявки */

.about-hero__lead {
	max-width: 22em;
	font-size: var(--fs-lead);
	line-height: 1.3;
	letter-spacing: -0.015em;
	color: var(--text-muted-dark);
}

/* ---------- О компании ---------- */
.about {
	--line: var(--grid-line);
	--cross: var(--grid-cross);
	--pad: clamp(20px, 3vw, 48px);
	padding: var(--space-xl) var(--gutter) var(--space-2xl);
	background: var(--bg-light);
	color: var(--text-on-light);
}

.about__grid {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
	max-width: var(--container);
	margin: 0 auto;
	border: 1px solid var(--line); /* taste-skill-ignore: сетка — фирменный приём */
	clip-path: inset(0); /* крестики по краю — уголки и Т-стыки */
}

.about__grid::before,
.about__grid::after,
.about__statement::after {
	content: "";
	position: absolute;
	z-index: 2;
	width: 11px;
	height: 11px;
	background:
		linear-gradient(var(--cross), var(--cross)) center / 1px 100% no-repeat, /* taste-skill-ignore: крестик сетки */
		linear-gradient(var(--cross), var(--cross)) center / 100% 1px no-repeat; /* taste-skill-ignore: крестик из двух линий */
	pointer-events: none;
}

.about__grid::before { left: -6px; top: -6px; }
.about__grid::after { right: -6px; bottom: -6px; }

.about__statement {
	position: relative;
	padding: var(--pad);
	border-right: 1px solid var(--line); /* taste-skill-ignore: граница колонки */
	font-size: clamp(1.5rem, 1rem + 1.4vw, 2.25rem); /* 24 → 36 */
	line-height: 1.22;
	letter-spacing: -0.025em;
	text-wrap: pretty;
}

.about__statement::after { right: -6px; top: -6px; }

.about__text {
	display: grid;
	align-content: end;
	gap: var(--space-s);
	padding: var(--pad);
}

.about__text p {
	max-width: 44ch;
	font-size: 18px;
	line-height: 1.55;
}

/* ---------- Цифры ---------- */
.about-stats {
	--line: var(--grid-line-dark);
	--cross: var(--grid-cross-dark);
	position: relative;
	padding: var(--space-2xl) var(--gutter);
	overflow: hidden;
	background: var(--c-black);
	color: var(--c-white);
}

/* карта сети — фоном, приглушённая: «вся сеть РЖД» как материал, а не картинка */
.about-stats__map {
	position: absolute;
	inset: 50% auto auto 50%;
	width: min(1500px, 120vw);
	translate: -50% -50%;
	opacity: 0.32;
	pointer-events: none;
}

.about-stats__map img {
	display: block;
	width: 100%;
	height: auto;
}

.about-stats__grid {
	position: relative;
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	max-width: var(--container);
	margin: 0 auto;
	padding: 0;
	list-style: none;
	border-top: 1px solid var(--line); /* taste-skill-ignore: сетка */
	border-left: 1px solid var(--line); /* taste-skill-ignore */
	clip-path: inset(0);
}

.about-stats__cell {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: var(--space-l);
	min-height: clamp(180px, 18vw, 260px);
	padding: clamp(20px, 2.4vw, 32px);
	border-right: 1px solid var(--line); /* taste-skill-ignore */
	border-bottom: 1px solid var(--line); /* taste-skill-ignore */
	background: rgba(0, 0, 0, 0.55);
}

.about-stats__cell::before,
.about-stats__cell::after {
	content: "";
	position: absolute;
	z-index: 1;
	width: 11px;
	height: 11px;
	background:
		linear-gradient(var(--cross), var(--cross)) center / 1px 100% no-repeat, /* taste-skill-ignore: крестик сетки */
		linear-gradient(var(--cross), var(--cross)) center / 100% 1px no-repeat; /* taste-skill-ignore: крестик из двух линий */
	pointer-events: none;
}

.about-stats__cell::before { left: -6px; top: -6px; }
.about-stats__cell::after { right: -6px; bottom: -6px; }

.about-stats__num {
	font-size: clamp(3rem, 1.6rem + 4.4vw, 6rem); /* 48 → 96 */
	font-weight: var(--fw-bold);
	line-height: 0.95;
	letter-spacing: -0.04em;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

/* знак «+» — фирменным цветом */
.about-stats__num {
	color: var(--accent);
}

.about-stats__num span {
	color: var(--c-white);
}

.about-stats__label {
	color: var(--text-muted-dark);
}

/* ---------- Ценности ---------- */
.about-values {
	--line: var(--grid-line);
	--cross: var(--grid-cross);
	padding: var(--space-2xl) var(--gutter);
	background: var(--bg-light);
	color: var(--text-on-light);
}

.about-values__list {
	position: relative;
	max-width: var(--container);
	margin: 0 auto;
	padding: 0;
	list-style: none;
	border-top: 1px solid var(--line); /* taste-skill-ignore: линии строк */
}

.about-values__row {
	--vf: 12px;
	display: grid;
	grid-template-columns: 96px minmax(0, 4fr) minmax(0, 6fr);
	align-items: baseline;
	gap: clamp(16px, 3vw, 48px);
	padding: clamp(24px, 3vw, 40px) clamp(16px, 2vw, 24px);
	border-bottom: 1px solid var(--line); /* taste-skill-ignore */
	transition: background-color var(--dur-fast) var(--ease-out);
}

.about-values__row::before {
	inset: 6px;
}

.about-values__row:hover {
	background: var(--c-graphite-06);
}

.about-values__n {
	color: var(--accent-ink);
}

.about-values__name {
	font-size: var(--fs-h3);
	font-weight: var(--fw-regular);
	line-height: 1.1;
	letter-spacing: -0.03em;
}

.about-values__text {
	max-width: 46ch;
	font-size: 18px;
	line-height: 1.55;
}

/* форма заявки ниже — с отступом перед подвалом, как на «Контактах» */
.about-values + .contact {
	padding-top: 0;
	padding-bottom: var(--space-2xl);
}

/* ---------- Адаптив ---------- */
@media (max-width: 1100px) {
	.about-stats__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 900px) {
	.about__grid { grid-template-columns: 1fr; }
	.about__statement { border-right: 0; border-bottom: 1px solid var(--line); /* taste-skill-ignore */ }
	.about__statement::after { left: -6px; right: auto; top: auto; bottom: -6px; }
	.about-values__row { grid-template-columns: 48px minmax(0, 1fr); }
	.about-values__text { grid-column: 2; }
	.about-stats__map { width: 220vw; }
}

@media (max-width: 640px) {
	.about__statement { font-size: 1.3125rem; line-height: 1.3; } /* 21: длинное утверждение на телефоне не превращается в стену */
	.about-stats__cell { min-height: 140px; gap: var(--space-m); }
	.about-values__row { grid-template-columns: 1fr; gap: 8px; }
	.about-values__text { grid-column: auto; }
}

@media (prefers-reduced-motion: reduce) {
	.about-values__row { transition: none; }
}