/*
 * AV-Security — «О компании» page (/o-kompanii/)
 * ----------------------------------------------------------------------------
 * Loaded only on the about page (inc/about.php), after sections.css.
 *
 * Section order (templates/page-o-kompanii.html):
 *   01 Hero · 02 Intro «Больше, чем охрана» · 03 Approach (navy scheme) ·
 *   04 Team · 05 Services · 06 Territory · 07 Values · 08 Documents
 *
 * Reuses the theme tokens from main.css (--av-container, --av-ink,
 * --av-ink-deep, --av-primary, --av-primary-hover, --av-accent), the
 * .av-section / .av-container / .av-section__eyebrow / __title / __lead /
 * .av-link-more primitives from sections.css and the homepage hero
 * typography (.av-hero__*, main.css). Everything new is namespaced .av-about-*.
 *
 * Breakpoints follow the theme: 600 / 769 / 900 (header overlay) / 1024 /
 * 1200.
 */

.av-about-page {
	--av-about-navy: #0a1a2b;               /* Why Us / Technologies / footer navy */
	--av-about-light: #f4f6f9;              /* light panels */
	--av-about-muted: #5d6b7e;              /* secondary text on white */
	--av-about-line: #e2e7ee;               /* separators on white */
	--av-about-on-navy: #6fa3e6;            /* --av-primary tint on navy */
	--av-about-line-navy: rgba(255, 255, 255, 0.14);
}

/* Sections are full-bleed siblings inside the constrained <main>. */
.av-about-page > .wp-block-group {
	margin-block: 0;
}

.av-about-page .av-section {
	--av-section-pt: 3.5rem;
	--av-section-pb: 3.5rem;
}

@media (min-width: 600px) {
	.av-about-page .av-section {
		--av-section-pt: 4.5rem;
		--av-section-pb: 4.5rem;
	}
}

@media (min-width: 1200px) {
	.av-about-page .av-section {
		--av-section-pt: 6rem;
		--av-section-pb: 6rem;
	}
}

/* ------------------------------------------------------------ Shared type */

/* Section titles: size, weight, line-height, tracking and case come from the
   shared .av-section__title (sections.css) — the homepage standard,
   docs/typography-standard.md. */
.av-about-page .av-about-title {
	margin-top: 0;
	text-wrap: balance;
}

.av-about-page .av-about-lead {
	max-width: 34rem;
	margin-top: 1.25rem;
}

.av-about-page .av-about-more {
	margin-top: 1.75rem;
}

.av-about-intro__text > *,
.av-about-team__head > *,
.av-about-approach__head > *,
.av-about-approach__head-main > *,
.av-about-services__head > *,
.av-about-services__head-main > *,
.av-docs__head > * {
	margin-block: 0;
}

/* ------------------------------------------------------------ Icons */

.av-about-icon {
	display: block;
	flex: 0 0 auto;
	color: var(--av-primary);
}

/* ------------------------------------------------------------ Placeholders
   Printed by av_security_about_photo() while a photo is missing; replaced
   automatically by the <img> once the file is in assets/images/. */

.av-about-page .av-about-ph {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 0.75rem;
	box-sizing: border-box;
	width: 100%;
	height: 100%;
	padding: 1.5rem;
	text-align: center;
	color: rgba(255, 255, 255, 0.55);
	background-color: #0d2135;
	background-image:
		linear-gradient(135deg, rgba(26, 95, 180, 0.24) 0%, rgba(26, 95, 180, 0) 62%),
		repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.03) 0 1px, transparent 1px 16px);
}

.av-about-ph .av-about-ph__icon {
	color: currentColor;
	opacity: 0.8;
}

.av-about-ph__label {
	max-width: 24ch;
	font-size: 0.75rem;
	font-weight: 600;
	line-height: 1.45;
	letter-spacing: 0.16em;
	text-transform: uppercase;
}

/* ------------------------------------------------------------ Dark bands
   (07 Values; 03 Approach has its own band below): brand navy, an optional darkened photo
   (.av-about-dark__bg, only when the file exists) and a navy veil. */

.av-about-page .av-section.av-about-dark {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	background-color: var(--av-about-navy);
	color: #fff;
}

.av-about-dark__bg {
	position: absolute;
	inset: 0;
	z-index: -2;
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: 0.22;
}

.av-about-dark::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background:
		radial-gradient(90% 80% at 85% 0%, rgba(26, 95, 180, 0.16) 0%, rgba(10, 26, 43, 0) 60%),
		linear-gradient(90deg, rgba(10, 26, 43, 0.6) 0%, rgba(10, 26, 43, 0.2) 100%);
	pointer-events: none;
}

.av-about-dark .av-section__eyebrow {
	color: rgba(255, 255, 255, 0.7);
}

.av-about-page .av-about-dark .av-about-title {
	color: #fff;
}

.av-about-dark .av-about-lead {
	color: rgba(255, 255, 255, 0.76);
}

.av-about-dark .av-about-icon {
	color: var(--av-about-on-navy);
}

.av-about-dark .av-link-more a {
	color: #fff;
}

.av-about-dark .av-link-more a:hover,
.av-about-dark .av-link-more a:focus-visible {
	color: var(--av-about-on-navy);
}

.av-about-dark a:focus-visible {
	outline-color: #fff;
}

/* ==========================================================================
   01 · Hero — the team. Desktop (≥1200px): full-width group photo as the
   hero background, starting just below the header's navigation row so the
   heads are never under it; the group and the car in the centre / right,
   navy gradient on the left for the text. Below 1200px the text column would
   cover the faces, so: text on navy, then the photo as a full-width strip.
   ========================================================================== */

.av-about-hero {
	--av-hero-under: 0px;
	position: relative;
	isolation: isolate;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	background-color: var(--av-ink-deep);
	color: #fff;
}

.av-about-hero__visual {
	position: relative;
	order: 2;
	aspect-ratio: 3 / 2;
	overflow: hidden;
	background-color: var(--av-ink-deep);
}

.av-about-hero__img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 75% 50%;           /* group + part of the car */
}

.av-about-hero .av-about-hero__inner {
	margin-block: 0;
}

.av-about-hero__inner {
	position: relative;
	order: 1;
	box-sizing: border-box;
	width: 100%;
	padding: 2.5rem var(--wp--preset--spacing--50) 2.5rem;
}

.av-about-hero__inner > * {
	margin-block: 0;
}

.av-about-hero .av-about-hero__eyebrow {
	margin-bottom: 1.1rem;
}

/* H1 size: the xx-large preset (block attribute), line-height and tracking:
   .av-hero__title (main.css) — as on the homepage. */

/* Text size and measure: .av-hero__text (main.css). */
.av-about-hero .av-about-hero__text {
	margin-top: 1.25rem;
}

.av-about-hero .av-about-hero__actions {
	margin-top: 2rem;
}

.av-about-hero .wp-block-button__link:focus-visible {
	outline: 2px solid #fff;
	outline-offset: 3px;
}

/* Team placeholder (av_security_about_team_placeholder(), inc/about.php):
   schematic group composition until about-hero-team.webp exists. Same box
   and position as the photo, so the layout does not move when it is added. */
.av-about-team-ph {
	position: absolute;
	inset: 0;
	background:
		radial-gradient(70% 90% at 72% 40%, rgba(26, 95, 180, 0.22) 0%, rgba(26, 95, 180, 0) 70%),
		linear-gradient(180deg, #0c1f35 0%, #08182a 100%);
}

.av-about-team-ph__svg {
	position: absolute;
	right: 0;
	bottom: 0;
	left: 0;
	display: block;
	width: 100%;
	height: 125%;                         /* strip below 900px: a larger group */
}

.av-about-team-ph__person path,
.av-about-team-ph__person ellipse {
	stroke: rgba(111, 163, 230, 0.22);
	stroke-width: 1.25px;
	vector-effect: non-scaling-stroke;
}

.av-about-team-ph__person--back {
	fill: url(#av-about-team-ph-back);
}

.av-about-team-ph__person--front {
	fill: url(#av-about-team-ph-front);
}

.av-about-team-ph__person--front.av-about-team-ph__person--guard {
	fill: url(#av-about-team-ph-guard);
}

.av-about-team-ph__person .av-about-team-ph__collar {
	fill: #07131f;
	stroke: none;
}

.av-about-team-ph__person .av-about-team-ph__shirt {
	fill: #b8c7d9;
	stroke: none;
}

.av-about-team-ph__person .av-about-team-ph__tie {
	fill: #0b1d33;
	stroke: none;
}

.av-about-team-ph__label {
	position: absolute;
	right: var(--wp--preset--spacing--50);
	bottom: 1rem;
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	max-width: calc(100% - 2 * var(--wp--preset--spacing--50));
	padding: 0.45rem 0.75rem;
	border: 1px solid rgba(255, 255, 255, 0.18);
	background-color: rgba(6, 17, 31, 0.6);
	font-size: 0.6875rem;
	font-weight: 600;
	line-height: 1.3;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.7);
}

.av-about-team-ph .av-about-team-ph__icon {
	color: currentColor;
}

@media (min-width: 600px) {
	.av-about-hero__visual {
		aspect-ratio: 2 / 1;
	}
}

@media (min-width: 769px) {
	.av-about-hero__inner {
		padding-inline: max(
			calc(var(--wp--preset--spacing--50) * 3),
			calc((100% - var(--av-container)) / 2 + var(--wp--preset--spacing--50))
		);
	}
}

/* 900–1199px: the header's navigation row already overlays the hero. */
@media (min-width: 900px) {
	.av-about-hero {
		--av-hero-under: 5rem;              /* main.css --av-main-h */
	}

	.av-about-hero__inner {
		padding-top: calc(var(--av-hero-under) + 3rem);
		padding-bottom: 3rem;
	}
}

@media (min-width: 1200px) {
	.av-about-hero {
		--av-hero-under: 4.625rem;          /* main.css --av-main-h ≥1200 */
		justify-content: center;
		/* Close to the photo's 5:2 so cover crops little at the sides. */
		min-height: clamp(640px, calc(var(--av-hero-under) + 40vw), 800px);
	}

	.av-about-hero__visual {
		position: absolute;
		inset: var(--av-hero-under) 0 0;
		z-index: -2;
		aspect-ratio: auto;
	}

	/* Soft navy shade on the left only, for the white text. */
	.av-about-hero__visual::after {
		content: "";
		position: absolute;
		inset: 0;
		background:
			linear-gradient(90deg, rgba(6, 17, 31, 0.9) 0%, rgba(6, 17, 31, 0.74) 26%, rgba(6, 17, 31, 0.34) 46%, rgba(6, 17, 31, 0) 64%),
			linear-gradient(0deg, rgba(6, 17, 31, 0.4) 0%, rgba(6, 17, 31, 0) 28%);
		pointer-events: none;
	}

	/* Team to the right of the text column. The group starts at 32.5% of
	   the photo; the column ends at its left edge (container offset) + the
	   H1's widest line («Безопасность.», 417px at the xx-large preset's
	   60px). The offset then goes 50px back left, towards the leader
	   (≈49% of the photo) in the hero's centre. Below 1415px the hero sits
	   at its 640px floor, the photo is 1415px wide (height-bound) and is
	   cropped from the right; above, it is as wide as the hero and the
	   layer itself is moved right — its left edge fades into the navy
	   background. */
	.av-about-hero__img {
		position: relative;
		left: max(0px, 50% - 643px);
		object-position: 0% 20%;
		-webkit-mask-image: linear-gradient(90deg, transparent 0, #000 14rem);
		mask-image: linear-gradient(90deg, transparent 0, #000 14rem);
	}

	/* Description no wider than the H1, so it stays clear of the group. */
	.av-about-hero .av-about-hero__text {
		max-width: 26rem;
	}

	/* Placeholder caption in the photo's free (right) part. */
	.av-about-hero .av-about-ph {
		padding: 0 6% 0 50%;
	}

	.av-about-hero__inner {
		padding-block: calc(var(--av-hero-under) + 3rem) 4rem;
	}

	.av-about-team-ph__svg {
		height: 100%;
	}

	.av-about-team-ph__label {
		bottom: 1.5rem;
		right: max(
			calc(var(--wp--preset--spacing--50) * 3),
			calc((100% - var(--av-container)) / 2 + var(--wp--preset--spacing--50))
		);
	}
}

/* The hero leaves its 640px floor (74px + 40vw): the photo now spans the
   hero width, so only the layer offset moves the group. */
@media (min-width: 1415px) {
	.av-about-hero__img {
		left: calc(17.5% - 183px);
	}
}

/* ==========================================================================
   02 · «Больше, чем охрана» — light section over the glass business-complex
   background (about-more-than-security-bg.webp, 1672×941, q85 copy of the
   approved .png). Desktop
   (≥1200px): the photo is fitted to the section height and anchored right;
   the card list is a stage with the photo's own proportions laid over it,
   so the four glass cards keep their places on the photo at every width.
   Below 1200px: text, the cards in a grid, the building as a band at the
   bottom of the section, the cards slightly overlapping it.
   Type: shared eyebrow / title / lead (sections.css); figures and labels =
   the homepage stat level (.av-object-stat__value / __label).
   ========================================================================== */

.av-about-page .av-section.av-about-intro {
	/* Image band: 200% wide → the slanted photo (42–90% of the file) fills
	   the width; it starts ≈1.02 × 100vw above the section bottom. */
	--av-section-pb: 86vw;
	position: relative;
	overflow: hidden;
	background-color: #f7fafd;              /* the image's left edge */
	background-image: url("../images/about-more-than-security-bg.webp");
	background-repeat: no-repeat;
	background-position: 84% 100%;
	background-size: 200% auto;
}

.av-about-intro__actions {
	margin-top: 2rem;
}

/* Button: the homepage button standard (16px / 600 / 0.01em, 2px radius). */
.av-about-intro__btn .wp-block-button__link {
	font-weight: 600;
	letter-spacing: 0.01em;
	transition: background-color 0.18s ease;
}

.av-about-intro__btn .wp-block-button__link:hover,
.av-about-intro__btn .wp-block-button__link:focus-visible {
	background-color: var(--av-primary-hover) !important;
}

.av-about-intro__btn .wp-block-button__link:focus-visible {
	outline: 2px solid var(--av-primary);
	outline-offset: 3px;
}

/* Cards (section-scoped: .av-section .av-container > * resets margins). */
.av-about-intro .av-about-intro__cards {
	position: relative;
	z-index: 1;
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0.75rem;
	margin: 2.5rem 0 0;
	padding: 0;
	list-style: none;
}

.av-about-intro__card {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 0.85rem;
	box-sizing: border-box;
	padding: 1.15rem 1.1rem 1.1rem;
	border: 1px solid rgba(255, 255, 255, 0.85);
	border-radius: 6px;
	background-color: rgba(255, 255, 255, 0.74);
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, 0.7),
		0 2px 6px rgba(11, 31, 51, 0.06),
		0 22px 44px -20px rgba(11, 31, 51, 0.42);
	-webkit-backdrop-filter: blur(14px) saturate(140%);
	backdrop-filter: blur(14px) saturate(140%);
	/* Parallax offset (about-intro.js) on `translate`, so the hover lift on
	   `transform` and its transition stay independent of scrolling. */
	translate: 0 var(--av-par-y, 0px) 0;
	transition: transform 0.35s ease, box-shadow 0.35s ease, background-color 0.35s ease;
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
	.av-about-intro__card {
		background-color: rgba(255, 255, 255, 0.92);
	}

	.av-about-intro__card--approach {
		background-color: rgb(10, 26, 43);
	}
}

/* Red accent: a short rule on the card's top edge. */
.av-about-intro__card::before {
	content: "";
	position: absolute;
	top: -1px;
	left: 1.1rem;
	width: 1.5rem;
	height: 2px;
	background: var(--av-accent);
}

.av-about-intro__card-icon {
	display: grid;
	flex: 0 0 auto;
	place-items: center;
	width: 2.5rem;
	height: 2.5rem;
	border-radius: 50%;
	background-color: rgba(26, 95, 180, 0.1);
	color: var(--av-primary);
}

.av-about-intro__card-icon .av-about-icon {
	width: 1.375rem;
	height: 1.375rem;
}

.av-about-intro__card-body {
	display: flex;
	flex-direction: column;
	min-width: 0;
}

.av-about-intro__card-value {
	font-size: 1.5rem;
	font-weight: 700;
	line-height: 1.1;
	letter-spacing: -0.01em;
	color: var(--av-ink);
	white-space: nowrap;
	font-variant-numeric: tabular-nums;
}

.av-about-intro__card-label {
	margin-top: 0.3rem;
	font-size: 0.8125rem;
	line-height: 1.35;
	color: rgba(11, 31, 51, 0.8);           /* --av-ink at 80% — over glass */
}

/* Regions card: the label always on two lines («региона / присутствия»). */
.av-about-intro__card--region .av-about-intro__card-label {
	width: min-content;
}

/* Regions card: icon, figure and the two-line label in one row, all three
   centred vertically, at every width (the other cards stack on phones). */
.av-about-intro__card--region {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	align-items: center;
	column-gap: 1rem;
}

.av-about-intro__card--region .av-about-intro__card-body {
	flex-direction: row;
	align-items: center;
	gap: 0.75rem;
}

.av-about-intro__card--region .av-about-intro__card-label {
	margin-top: 0;
}

/* Phones, 2 × 2 grid (165px cards): tighter padding, gaps and icon disc so
   the row fits («присутствия» ≈ 74px) with ≈10px to spare. */
@media (min-width: 380px) and (max-width: 599.98px) {
	.av-about-intro__card--region {
		column-gap: 0.45rem;
		padding-inline: 0.7rem;
	}

	.av-about-intro__card--region .av-about-intro__card-body {
		gap: 0.45rem;
	}

	.av-about-intro__card--region .av-about-intro__card-icon {
		width: 1.75rem;
		height: 1.75rem;
	}

	.av-about-intro__card--region .av-about-intro__card-icon .av-about-icon {
		width: 1.125rem;
		height: 1.125rem;
	}
}

/* Keep the card's outer height from the stacked version (104 / 114 / 116px). */
@media (max-width: 379.98px) {
	.av-about-intro__card--region {
		min-height: 6.5rem;
	}
}

@media (min-width: 600px) {
	.av-about-intro__card--region {
		min-height: 7.125rem;
	}
}

@media (min-width: 1200px) {
	.av-about-intro__card--region {
		min-height: 7.25rem;
	}
}

/* «360°»: the dark navy card of the approved layout. */
.av-about-intro__card--approach {
	border-color: rgba(255, 255, 255, 0.16);
	background-color: rgba(10, 26, 43, 0.86);   /* --av-about-navy */
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, 0.08),
		0 2px 6px rgba(11, 31, 51, 0.12),
		0 24px 46px -18px rgba(11, 31, 51, 0.55);
}

.av-about-intro__card--approach .av-about-intro__card-icon {
	background-color: rgba(255, 255, 255, 0.12);
}

/* .av-about-icon sets the brand blue on the SVG itself. */
.av-about-intro__card--approach .av-about-intro__card-icon .av-about-icon {
	color: #fff;
}

.av-about-intro__card--approach .av-about-intro__card-value {
	color: #fff;
}

.av-about-intro__card--approach .av-about-intro__card-label {
	color: rgba(255, 255, 255, 0.78);
}

@media (hover: hover) {
	.av-about-intro__card:hover {
		transform: translateY(-4px);
		background-color: rgba(255, 255, 255, 0.84);
		box-shadow:
			inset 0 1px 0 rgba(255, 255, 255, 0.8),
			0 3px 8px rgba(11, 31, 51, 0.07),
			0 30px 52px -20px rgba(11, 31, 51, 0.48);
	}

	.av-about-intro__card--approach:hover {
		background-color: rgba(10, 26, 43, 0.92);
		box-shadow:
			inset 0 1px 0 rgba(255, 255, 255, 0.1),
			0 3px 8px rgba(11, 31, 51, 0.14),
			0 32px 54px -18px rgba(11, 31, 51, 0.6);
	}
}

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

	.av-about-intro__card:hover {
		transform: none;
	}
}

/* Narrow phones: one column. */
@media (max-width: 379.98px) {
	.av-about-intro .av-about-intro__cards {
		grid-template-columns: minmax(0, 1fr);
	}

	.av-about-intro__card {
		flex-direction: row;
		align-items: center;
		gap: 1rem;
	}
}

/* Tablet: the band at 120% width (the photo and the right-hand accents);
   cards side by side, the right column set lower for a floating rhythm. */
@media (min-width: 600px) {
	.av-about-page .av-section.av-about-intro {
		--av-section-pb: 50vw;
		background-position: 100% 100%;
		background-size: 120% auto;
	}

	.av-about-intro__text {
		max-width: 36rem;
	}

	.av-about-intro .av-about-intro__cards {
		max-width: 40rem;
		gap: 1rem;
		margin-top: 3rem;
		padding-bottom: 1.5rem;
	}

	.av-about-intro__card {
		flex-direction: row;
		align-items: center;
		gap: 1rem;
		padding: 1.2rem 1.4rem 1.2rem 1.2rem;
	}

	.av-about-intro__card:nth-child(even) {
		margin-top: 1.5rem;
		margin-bottom: -1.5rem;
	}

	.av-about-intro__card-value {
		font-size: 1.75rem;
	}

	.av-about-intro__card-label {
		font-size: 0.875rem;
	}
}

/* Desktop: the asymmetric composition. */
@media (min-width: 1200px) {
	.av-about-page .av-section.av-about-intro {
		--av-section-pb: 6rem;
		display: flex;
		align-items: center;
		box-sizing: border-box;
		min-height: clamp(640px, 52vw, 820px);
		background-position: 100% 50%;
		background-size: auto 100%;
	}

	.av-about-intro__inner {
		position: static;
	}

	/* Text column: as wide as the Hero text column, clear of the cards. */
	.av-about-intro__text {
		position: relative;
		z-index: 2;
		max-width: 26rem;
	}

	/* Stage = the background photo's box (height-fitted). Up to 1577px it is
	   anchored to the section's right edge, as approved. 1577px is where the
	   section reaches its 820px height cap (52vw), so the photo stops growing;
	   beyond that (wide screens, browser zoom-out) it would keep sliding right
	   with the window edge while the text stays in the centred container. So
	   from there on the stage keeps the 1577px composition, centred: its
	   right edge sits (100% − 1577px) / 2 in from the section edge. */
	.av-about-intro .av-about-intro__cards {
		position: absolute;
		top: 0;
		right: max(0px, (100% - 1577px) / 2);
		display: block;
		height: 100%;
		max-width: none;
		aspect-ratio: 1672 / 941;
		margin: 0;
		padding: 0;
		pointer-events: none;
	}

	/* The photo moves to its own layer on the stage (same box as the former
	   section background), so it can drift for the parallax. Photo and
	   diagonals are one image and move together; about-intro.js enlarges the
	   layer just enough (--av-intro-photo-scale, ≈4%) that the drift never
	   uncovers an edge. The left edge melts into the section colour. */
	.av-about-page .av-section.av-about-intro {
		container-type: inline-size;        /* 100cqw = section width, for the fade */
		background-image: none;
	}

	.av-about-intro__cards::before {
		content: "";
		position: absolute;
		inset: 0;
		z-index: -1;
		/* Left edge: fixed 8% colour fade. Right edge: a transparency mask,
		   only once the stage is inset (wide screens) — over twice the inset,
		   at most 18rem, on an eased curve — so the blue accents touching the
		   image's right edge dissolve into the section colour instead of
		   ending in a hard cut. A mask, not a colour overlay: it also removes
		   the image's own edge pixels, which the scaled layer rasterises a
		   pixel beyond an overlay. Below 1577px the mask is fully opaque. */
		--av-intro-fade: min(18rem, max(0px, 100cqw - 1577px));
		background:
			linear-gradient(90deg, #f7fafd 0%, rgba(247, 250, 253, 0) 8%),
			url("../images/about-more-than-security-bg.webp") center / 100% 100% no-repeat;
		-webkit-mask-image: linear-gradient(
			270deg,
			transparent 0,
			transparent min(4px, var(--av-intro-fade)),
			rgba(0, 0, 0, 0.14) calc(var(--av-intro-fade) * 0.2),
			rgba(0, 0, 0, 0.45) calc(var(--av-intro-fade) * 0.45),
			rgba(0, 0, 0, 0.78) calc(var(--av-intro-fade) * 0.72),
			#000 var(--av-intro-fade)
		);
		mask-image: linear-gradient(
			270deg,
			transparent 0,
			transparent min(4px, var(--av-intro-fade)),
			rgba(0, 0, 0, 0.14) calc(var(--av-intro-fade) * 0.2),
			rgba(0, 0, 0, 0.45) calc(var(--av-intro-fade) * 0.45),
			rgba(0, 0, 0, 0.78) calc(var(--av-intro-fade) * 0.72),
			#000 var(--av-intro-fade)
		);
		transform: translate3d(0, var(--av-intro-photo-y, 0px), 0) scale(var(--av-intro-photo-scale, 1));
		transform-origin: 40% 50%;
	}

	.av-about-intro__card,
	.av-about-intro__card:nth-child(even) {
		position: absolute;
		margin: 0;
		pointer-events: auto;
	}

	/* Places in photo coordinates (% of the image). */
	.av-about-intro__card--staff {
		top: 16%;
		left: 47%;
		gap: 1.25rem;
		padding: 1.6rem 2.25rem 1.6rem 1.6rem;
	}

	.av-about-intro__card--region {
		top: 11%;
		left: 73%;
		min-width: 14.875rem;               /* the card's width with «СПб + ЛО» */
	}

	.av-about-intro__card--hours {
		top: 63%;
		left: 40%;
	}

	.av-about-intro__card--approach {
		top: 68%;
		left: 71%;
		padding: 1rem 1.25rem 1rem 1rem;
	}

	.av-about-intro__card--staff .av-about-intro__card-icon {
		width: 3rem;
		height: 3rem;
	}

	.av-about-intro__card--staff .av-about-intro__card-icon .av-about-icon {
		width: 1.625rem;
		height: 1.625rem;
	}

	.av-about-intro__card-value {
		font-size: 1.875rem;                /* 30px — homepage stat, ≥1200 */
	}
}

/* ==========================================================================
   03 · Approach «Безопасность — как единая система» — deep navy band, one
   isometric building, four steps around it tied to markers on the building
   by thin lines (patterns/about-approach.php, assets/js/about-approach.js).

   ≥1200px: .av-approach is a stage with the mock-up's proportions
   (1400 × 470 units); the building, the markers, the SVG lines and the
   steps are all placed in % of it, so the scheme scales as one piece and
   stays inside the container on any viewport. Below 1200px: the building
   on its own, then the steps (2 × 2 from 600px, a list with a thin
   progress line on phones).

   Motion (only once the JS adds .is-armed; without JS or with reduced
   motion everything is simply shown): heading → building → steps 01–04,
   each step's line drawn from the step to its marker, then the marker
   lights up. Intro transitions use the `translate` / `scale` properties;
   the parallax uses `transform` on the building layers.
   ========================================================================== */

.av-about-page .av-section.av-about-approach {
	--av-approach-blue: #3a7ce8;             /* step numbers, lines */
	--av-approach-glow: #6fb4ff;             /* active line / marker */
	--av-approach-text: rgba(196, 215, 244, 0.8);
	--av-section-pt: 3.5rem;
	--av-section-pb: 2.5rem;
	position: relative;
	isolation: isolate;
	overflow: hidden;
	color: #fff;
	background: #041a33 url("../images/about-approach-bg.webp") center / cover no-repeat;
}

@media (min-width: 600px) {
	.av-about-page .av-section.av-about-approach {
		--av-section-pt: 4.5rem;
		--av-section-pb: 3rem;
	}
}

@media (min-width: 1200px) {
	.av-about-page .av-section.av-about-approach {
		--av-section-pt: 3rem;
		--av-section-pb: 1.75rem;
	}
}

/* ------------------------------------------------------------ Heading */

.av-about-approach .av-section__eyebrow {
	color: rgba(196, 215, 244, 0.78);
}

.av-about-page .av-about-approach .av-about-title {
	color: #fff;
}

.av-about-page .av-about-approach .av-about-lead {
	max-width: 30rem;
	color: var(--av-approach-text);
}

.av-about-approach__head {
	position: relative;
	z-index: 2;
	display: grid;
	grid-template-columns: minmax(0, 1fr);
}

@media (max-width: 599px) {
	.av-about-approach .av-about-lead br {
		display: none;
	}
}

@media (min-width: 1200px) {
	.av-about-approach__head {
		grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
		align-items: center;
		gap: 2rem;
	}

	.av-about-page .av-about-approach .av-about-lead {
		margin-top: 1.4rem;                 /* lines up with the H2 middle */
	}
}

/* ------------------------------------------------------------ Stage */

.av-about-page .av-approach {
	position: relative;
	margin-top: 1.5rem;
}

.av-approach__visual {
	position: relative;
	z-index: 0;
	/* The building fills the width; the image's soft dark margins are
	   cropped by the box (the band clips the overflow). */
	aspect-ratio: 1.695;
	margin-inline: auto;
	max-width: 46rem;
}

.av-approach__scene {
	position: absolute;
	top: -25.4%;
	left: -21.7%;
	width: 128%;
	aspect-ratio: 1536 / 1024;
	transform: translate3d(0, var(--av-approach-par, 0px), 0);
	pointer-events: none;
}

.av-approach__building {
	display: block;
	width: 100%;
	height: auto;
}

.av-approach__lines {
	display: none;
}

/* ------------------------------------------------------------ Markers */

.av-approach__pin {
	position: absolute;
	top: var(--y);
	left: var(--x);
	width: 0.625rem;
	height: 0.625rem;
	margin: -0.3125rem 0 0 -0.3125rem;
	border-radius: 50%;
	background: radial-gradient(circle at 50% 45%, #e6f4ff 0%, #8ccbff 38%, #2f86ff 100%);
	box-shadow: 0 0 6px 2px rgba(64, 150, 255, 0.55), 0 0 18px 4px rgba(40, 120, 255, 0.28);
	pointer-events: auto;
	transition: box-shadow 0.3s ease, filter 0.3s ease;
}

/* Thin outer ring. */
.av-approach__pin::before,
.av-approach__pin::after {
	content: "";
	position: absolute;
	inset: -0.4375rem;
	border: 1px solid rgba(140, 200, 255, 0.55);
	border-radius: 50%;
	transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1), border-color 0.3s ease;
}

/* Light pulse ring: shown only while its animation runs. */
.av-approach__pin::after {
	border-color: rgba(140, 205, 255, 0.9);
	opacity: 0;
}

.av-approach__pin.is-active {
	filter: brightness(1.2);
	box-shadow: 0 0 8px 3px rgba(90, 170, 255, 0.85), 0 0 26px 8px rgba(50, 135, 255, 0.45);
}

.av-approach__pin.is-active::before {
	transform: scale(1.3);
	border-color: rgba(170, 220, 255, 0.85);
}

.av-approach__pin.is-active::after {
	animation: av-approach-pulse 0.9s cubic-bezier(0.22, 1, 0.36, 1) 1;
}

@keyframes av-approach-pulse {
	0% {
		opacity: 0.9;
		transform: scale(1);
	}

	100% {
		opacity: 0;
		transform: scale(2.6);
	}
}

@media (min-width: 1200px) {
	.av-approach__pin {
		width: 0.75rem;
		height: 0.75rem;
		margin: -0.375rem 0 0 -0.375rem;
	}

	.av-approach__pin::before,
	.av-approach__pin::after {
		inset: -0.5rem;
	}
}

/* ------------------------------------------------------------ Steps */

.av-approach__steps {
	position: relative;
	z-index: 2;
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	margin: 1.5rem 0 0;
	padding: 0;
	list-style: none;
}

.av-approach__step {
	position: relative;
	margin: 0;
}

.av-approach__title {
	margin: 0;
	font-size: 1.125rem;                  /* = .av-process-step__title */
	font-weight: 700;
	line-height: 1.3;
	color: #fff;
}

.av-approach__btn {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 0.6rem;
	margin: 0;
	padding: 0;
	font: inherit;
	line-height: inherit;
	text-align: left;
	color: inherit;
	background: none;
	border: 0;
	border-radius: 2px;
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
}

.av-approach__btn:focus-visible {
	outline: 2px solid #fff;
	outline-offset: 6px;
}

.av-approach__num {
	display: block;
	font-size: 3rem;
	font-weight: 200;
	line-height: 1;
	letter-spacing: -0.01em;
	color: var(--av-approach-blue);
	transition: color 0.3s ease, text-shadow 0.3s ease;
}

.av-approach__name {
	transition: color 0.3s ease;
}

.av-approach__text {
	margin: 0.5rem 0 0;
	font-size: 0.9375rem;
	line-height: 1.55;
	color: var(--av-approach-text);
}

.av-approach__step.is-active .av-approach__num {
	color: var(--av-approach-glow);
	text-shadow: 0 0 18px rgba(80, 160, 255, 0.55);
}

.av-approach__step.is-active .av-approach__name {
	color: #cfe4ff;
}

@media (min-width: 900px) {
	.av-approach__title {
		font-size: 1.1875rem;
	}
}

/* Phones: a list, the numbers in a column joined by a thin progress line. */
@media (max-width: 599px) {
	.av-approach__step {
		padding: 0 0 1.75rem 4.25rem;
	}

	.av-approach__step:last-child {
		padding-bottom: 0;
	}

	.av-approach__btn {
		display: block;
	}

	.av-approach__num {
		position: absolute;
		top: -0.35rem;
		left: 0;
		font-size: 2.5rem;
	}

	.av-approach__step:not(:last-child)::before {
		content: "";
		position: absolute;
		top: 2.75rem;
		bottom: 0.5rem;
		left: 1.25rem;
		width: 1px;
		background: linear-gradient(rgba(90, 150, 240, 0.55), rgba(90, 150, 240, 0.12));
		transform-origin: top;
	}

	.av-approach__text br {
		display: none;
	}
}

@media (min-width: 600px) and (max-width: 1199px) {
	.av-approach__steps {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 2.25rem 2.5rem;
		margin-top: 2rem;
	}
}

/* ------------------------------------------------------------ Desktop
   The mock-up composition. Stage units: 1400 × 470. */
@media (min-width: 1200px) {
	.av-about-page .av-approach {
		aspect-ratio: 1400 / 470;
		margin-top: 1.25rem;
	}

	.av-approach__visual {
		position: absolute;
		inset: 0;
		max-width: none;
		aspect-ratio: auto;
	}

	/* Building box: x 11 … 1252, y −214 … 613 units (the image's soft
	   margins reach past the stage; the band clips them). The building
	   itself spans y −40 … 481: its roof just under the heading, its front
	   corner just above the caption line. */
	.av-approach__scene {
		top: -45.45%;
		left: 0.8%;
		width: 88.6%;
	}

	.av-approach__lines {
		position: absolute;
		inset: 0;
		display: block;
		width: 100%;
		height: 100%;
		overflow: visible;
		pointer-events: none;
	}

	.av-approach__line {
		fill: none;
		stroke: rgba(80, 145, 245, 0.72);
		stroke-width: 1.25;
		stroke-linejoin: round;
		stroke-dasharray: 1;
		stroke-dashoffset: 0;
		transition: stroke 0.3s ease, stroke-width 0.3s ease, opacity 0.3s ease, filter 0.3s ease;
	}

	.av-approach.has-active .av-approach__line {
		opacity: 0.4;
	}

	.av-approach.has-active .av-approach__line.is-active {
		opacity: 1;
		stroke: var(--av-approach-glow);
		stroke-width: 1.6;
		filter: drop-shadow(0 0 3px rgba(80, 165, 255, 0.95));
	}

	.av-approach__steps {
		position: absolute;
		inset: 0;
		display: block;
		margin: 0;
		pointer-events: none;
	}

	/* Each step is anchored by its number's middle line (the line height
	   of the number is 1, so half of it is 2.125rem). */
	.av-approach__step {
		position: absolute;
		width: max-content;
		pointer-events: auto;
	}

	.av-approach__step--left {
		left: 0;
	}

	.av-approach__step--right {
		right: 0;
	}

	.av-approach__step:nth-child(1),
	.av-approach__step:nth-child(3) {
		top: calc(9.36% - 2.125rem);          /* 44 / 470 */
	}

	.av-approach__step:nth-child(2) {
		top: calc(60.64% - 2.125rem);         /* 285 / 470 */
	}

	.av-approach__step:nth-child(4) {
		top: calc(61.7% - 2.125rem);          /* 290 / 470 */
	}

	.av-approach__num {
		font-size: 4.25rem;
	}

	.av-approach__btn {
		gap: 0.85rem;
	}

	.av-approach__text {
		white-space: nowrap;
	}
}

/* ------------------------------------------------------------ Caption */

.av-about-page .av-approach__caption {
	position: relative;
	z-index: 2;
	margin-top: 2.5rem;
	padding-top: 1.5rem;
	border-top: 1px solid rgba(90, 145, 235, 0.32);
	font-size: 0.875rem;
	line-height: 1.5;
	letter-spacing: 0.18em;
	text-align: center;
	color: rgba(176, 200, 238, 0.72);
}

@media (min-width: 1200px) {
	.av-about-page .av-approach__caption {
		margin-top: 1.25rem;
		padding-top: 1rem;
	}
}

/* ------------------------------------------------------------ Intro motion
   .is-armed: start state, set by the JS only when it will animate.
   .is-play: heading, building, caption; .is-steps: steps 01–04 with their
   lines and markers. The JS drops all three classes when it has finished. */

.av-about-approach.is-armed .av-section__eyebrow,
.av-about-approach.is-armed .av-about-title,
.av-about-approach.is-armed .av-about-lead,
.av-about-approach.is-armed .av-approach__caption,
.av-about-approach.is-armed .av-approach__num,
.av-about-approach.is-armed .av-approach__name,
.av-about-approach.is-armed .av-approach__text {
	opacity: 0;
	translate: 0 0.75rem;
}

.av-about-approach.is-armed .av-approach__visual {
	opacity: 0;
	translate: 0 1.75rem;
}

.av-about-approach.is-armed .av-approach__line {
	stroke-dashoffset: 1;
}

.av-about-approach.is-armed .av-approach__pin {
	opacity: 0;
	scale: 0.3;
}

.av-about-approach.is-armed .av-approach__step::before {
	transform: scaleY(0);
}

.av-about-approach.is-play .av-section__eyebrow,
.av-about-approach.is-play .av-about-title,
.av-about-approach.is-play .av-about-lead,
.av-about-approach.is-play .av-approach__caption,
.av-about-approach.is-play .av-approach__visual,
.av-about-approach.is-steps .av-approach__num,
.av-about-approach.is-steps .av-approach__name,
.av-about-approach.is-steps .av-approach__text {
	opacity: 1;
	translate: 0 0;
	transition: opacity 0.6s cubic-bezier(0.22, 1, 0.36, 1) var(--d, 0s), translate 0.6s cubic-bezier(0.22, 1, 0.36, 1) var(--d, 0s);
}

.av-about-approach.is-play .av-about-title {
	--d: 0.12s;
}

.av-about-approach.is-play .av-about-lead {
	--d: 0.24s;
}

.av-about-approach.is-play .av-approach__caption {
	--d: 0.4s;
}

.av-about-approach.is-play .av-approach__visual {
	--d: 0.35s;
	transition-duration: 0.9s;
}

/* Step i starts at base + i × 0.55s: number, title, text, line, marker.
   Base: after the building on the desktop stage; right away below 1200px,
   where the steps start when the list itself scrolls in. */
.av-about-approach {
	--av-approach-base: 0.15s;
}

@media (min-width: 1200px) {
	.av-about-approach {
		--av-approach-base: 0.95s;
	}
}

.av-about-approach.is-steps .av-approach__num {
	--d: calc(var(--av-approach-base) + var(--i) * 0.55s);
	transition-duration: 0.51s;           /* 0.6s × 0.85: the numbers land a bit quicker */
}

.av-about-approach.is-steps .av-approach__name {
	--d: calc(var(--av-approach-base) + var(--i) * 0.55s + 0.08s);
}

.av-about-approach.is-steps .av-approach__text {
	--d: calc(var(--av-approach-base) + var(--i) * 0.55s + 0.16s);
}

.av-about-approach.is-steps .av-approach__step::before {
	transform: scaleY(1);
	transition: transform 0.55s cubic-bezier(0.22, 1, 0.36, 1) calc(var(--av-approach-base) + var(--i) * 0.55s + 0.25s);
}

.av-about-approach.is-steps .av-approach__line {
	stroke-dashoffset: 0;
	transition: stroke-dashoffset 0.55s cubic-bezier(0.33, 1, 0.68, 1) calc(var(--av-approach-base) + var(--i) * 0.55s + 0.2s);
}

.av-about-approach.is-steps .av-approach__pin {
	opacity: 1;
	scale: 1;
	transition: opacity 0.35s ease calc(var(--av-approach-base) + var(--i) * 0.55s + 0.7s), scale 0.45s cubic-bezier(0.34, 1.56, 0.64, 1) calc(var(--av-approach-base) + var(--i) * 0.55s + 0.7s);
}

.av-about-approach.is-steps .av-approach__pin::after {
	animation: av-approach-pulse 0.9s cubic-bezier(0.22, 1, 0.36, 1) calc(var(--av-approach-base) + var(--i) * 0.55s + 0.75s) 1 both;
}

@media (prefers-reduced-motion: reduce) {
	.av-approach__pin,
	.av-approach__pin::before,
	.av-approach__line,
	.av-approach__num,
	.av-approach__name {
		transition: none;
	}

	.av-approach__pin.is-active::after {
		animation: none;
	}
}

/* ==========================================================================
   04 · Team «Профессионалы, которым доверяют» — light band: leadership
   portrait | heading, text and four role cards (2 × 2); a row of three
   captioned photos of the team at work below (patterns/about-team.php,
   assets/js/about-team.js).

   ≥1200px: portrait 47% / text 53%; the portrait takes the height of the
   right column (head + cards), so both sides end on one line.
   768–1199px: heading on top, then portrait | cards (one column).
   <768px: heading, portrait, cards, photos — one column.
   ========================================================================== */

.av-about-page .av-section.av-about-team {
	--av-section-pt: 2.25rem;              /* 36px: this band starts right under the dark one */
	--av-section-pb: 2.5rem;               /* 40px after the last photo caption */
	position: relative;
	isolation: isolate;
	overflow: hidden;
	background: linear-gradient(180deg, #f7f9fd 0%, #f2f6fc 100%);
}

/* Thin light-blue diagonals, only towards the band's left and right edges. */
.av-about-page .av-section.av-about-team::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background-image: repeating-linear-gradient(118deg, transparent 0 46px, rgba(26, 95, 180, 0.075) 46px 47px);
	-webkit-mask-image: linear-gradient(90deg, #000 0%, transparent 22%, transparent 78%, #000 100%);
	mask-image: linear-gradient(90deg, #000 0%, transparent 22%, transparent 78%, #000 100%);
	pointer-events: none;
}

/* Grid children: no flow-layout block gap (the grid gap spaces them). */
.av-about-page .av-about-team__grid > * {
	margin-block: 0;
}

.av-about-team__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	grid-template-areas:
		"head"
		"photo"
		"cards";
	gap: 2rem;
}

/* ------------------------------------------------------------ Portrait */

.av-about-team__photo {
	grid-area: photo;
	position: relative;
	margin: 0;
	aspect-ratio: 4 / 5;
	overflow: hidden;
	border-radius: 4px;                    /* = homepage photos */
	background-color: #dfe7f1;
	box-shadow: 0 22px 44px -26px rgba(11, 31, 51, 0.45);
}

.av-about-team__img {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 50% 30%;              /* keeps the head and the hands */
}

.av-about-team__badge {
	position: absolute;
	bottom: 0;
	left: 0;
	display: flex;
	align-items: center;
	gap: 0.75rem;
	padding: 0.8rem 1.4rem 0.8rem 1.25rem;
	font-size: 0.9375rem;
	font-weight: 600;
	line-height: 1.3;
	color: #fff;
	background: rgba(8, 24, 44, 0.88);
	border-top-right-radius: 4px;          /* the other corners follow the photo */
}

.av-about-team__badge::before {
	content: "";
	flex: 0 0 auto;
	width: 1.5rem;
	height: 2px;
	background: var(--av-accent);
}

@media (min-width: 600px) {
	.av-about-page .av-section.av-about-team {
		--av-section-pt: 2.75rem;          /* 44px */
		--av-section-pb: 2.75rem;          /* 44px */
	}
}

@media (min-width: 1200px) {
	.av-about-page .av-section.av-about-team {
		--av-section-pt: 3.25rem;          /* 52px (the band default is 96px) */
		--av-section-pb: 3.25rem;          /* 52px */
	}
}

@media (min-width: 480px) and (max-width: 767.98px) {
	.av-about-team__photo {
		aspect-ratio: 1;
	}
}

/* ------------------------------------------------------------ Heading */

.av-about-team__head {
	grid-area: head;
}

.av-about-team__accent {
	color: var(--av-primary);
}

/* ------------------------------------------------------------ Role cards */

.av-about-team__cards {
	grid-area: cards;
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 0.875rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.av-about-team__card {
	display: flex;
	align-items: flex-start;
	gap: 0.875rem;
	padding: 1.125rem 1.125rem 1.25rem;
	border: 1px solid rgba(26, 95, 180, 0.08);
	border-radius: 4px;
	background-color: #eaf1fa;
	box-shadow: 0 1px 2px rgba(11, 31, 51, 0.04);
	transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.3s ease, background-color 0.3s ease;
}

.av-about-team__card:hover {
	transform: translateY(-3px);
	background-color: #e3ecf8;
	box-shadow: 0 16px 30px -18px rgba(11, 31, 51, 0.3);
}

.av-about-team__card--accent {
	border-color: transparent;
	background: linear-gradient(140deg, #2170dc 0%, var(--av-primary) 100%);
	box-shadow: 0 16px 32px -20px rgba(26, 95, 180, 0.75);
	color: #fff;
}

.av-about-team__card--accent:hover {
	background: linear-gradient(140deg, #2777e4 0%, #1c65bf 100%);
	box-shadow: 0 20px 36px -20px rgba(26, 95, 180, 0.85);
}

.av-about-team__icon {
	display: block;
	flex: 0 0 auto;
	width: 2rem;
	height: 2rem;
	color: var(--av-primary);
}

.av-about-team__card--accent .av-about-team__icon {
	color: #fff;
}

.av-about-team__card-body {
	min-width: 0;
}

.av-about-team__title {
	margin: 0.2rem 0 0;
	font-size: 1rem;                      /* = .av-why-item__title */
	font-weight: 700;
	line-height: 1.3;
	color: var(--av-ink);
}

.av-about-team__desc {
	margin: 0.4rem 0 0;
	font-size: 0.875rem;
	line-height: 1.5;
	color: var(--av-about-muted);
}

.av-about-team__card--accent .av-about-team__title {
	color: #fff;
}

.av-about-team__card--accent .av-about-team__desc {
	color: rgba(255, 255, 255, 0.86);
}

@media (min-width: 600px) and (max-width: 767.98px) {
	.av-about-team__cards {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/* ------------------------------------------------------------ Photos */

.av-about-page .av-about-team__gallery {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 1.75rem;
	margin: 2.5rem 0 0;
	padding: 0;
	list-style: none;
}

.av-about-team__shot-figure {
	margin: 0;
}

.av-about-team__shot-media {
	display: block;
	aspect-ratio: 2 / 1;
	overflow: hidden;
	isolation: isolate;                    /* keeps the zoom inside the radius */
	border-radius: 4px;
	background-color: #dfe7f1;
	box-shadow: 0 14px 30px -20px rgba(11, 31, 51, 0.45);
}

.av-about-team__shot-img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

.av-about-team__shot:hover .av-about-team__shot-img {
	transform: scale(1.03);
}

.av-about-team__caption {
	display: flex;
	align-items: flex-start;
	gap: 0.85rem;
	margin-top: 1rem;
	font-size: 0.9375rem;
	font-weight: 600;
	line-height: 1.35;
	color: var(--av-ink);
}

.av-about-team__caption::before {
	content: "";
	flex: 0 0 auto;
	width: 1.5rem;
	height: 2px;
	margin-top: 0.62em;                    /* on the first line's middle */
	background: var(--av-accent);
}

@media (min-width: 768px) {
	.av-about-page .av-about-team__gallery {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 1.25rem;
	}
}

/* ------------------------------------------------------------ Tablet */

@media (min-width: 768px) and (max-width: 1199.98px) {
	.av-about-team__grid {
		grid-template-columns: minmax(0, 45fr) minmax(0, 55fr);
		grid-template-areas:
			"head head"
			"photo cards";
		gap: 2.25rem 1.5rem;
	}

	.av-about-team__photo {
		aspect-ratio: auto;
		min-height: 24rem;
	}
}

/* ------------------------------------------------------------ Desktop */

@media (min-width: 1200px) {
	.av-about-team__grid {
		grid-template-columns: minmax(0, 47fr) minmax(0, 53fr);
		grid-template-rows: auto 1fr;
		grid-template-areas:
			"photo head"
			"photo cards";
		gap: 0 3rem;
	}

	.av-about-team__photo {
		aspect-ratio: auto;
		min-height: 30rem;
	}

	.av-about-team__cards {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		align-self: end;
	}

	.av-about-page .av-about-team__cards {
		margin-top: 1.75rem;
	}

	.av-about-page .av-about-team__gallery {
		margin-top: 2.25rem;
		gap: 1.5rem;
	}
}

/* ------------------------------------------------------------ Motion
   .is-armed (set by the JS only when it will animate) hides the parts;
   .is-in on the grid / gallery reveals them; the JS drops the classes
   when done, so hover transitions are the plain ones again. */

.av-about-team.is-armed .av-about-team__photo,
.av-about-team.is-armed .av-about-team__head > *,
.av-about-team.is-armed .av-about-team__card,
.av-about-team.is-armed .av-about-team__shot {
	opacity: 0;
	translate: 0 0.875rem;
}

.av-about-team.is-armed .av-about-team__photo {
	translate: none;
}

.av-about-team.is-armed .av-about-team__shot {
	translate: 0 1rem;
}

.av-about-team .is-in .av-about-team__photo,
.av-about-team .is-in .av-about-team__head > *,
.av-about-team .is-in .av-about-team__card,
.av-about-team .is-in.av-about-team__gallery .av-about-team__shot {
	opacity: 1;
	translate: 0 0;
	transition: opacity 0.55s cubic-bezier(0.22, 1, 0.36, 1) var(--d, 0s), translate 0.55s cubic-bezier(0.22, 1, 0.36, 1) var(--d, 0s);
}

.av-about-team .is-in .av-about-team__photo {
	transition-duration: 0.65s;
}

.av-about-team .is-in .av-about-team__head > :nth-child(2) {
	--d: 0.1s;
}

.av-about-team .is-in .av-about-team__head > :nth-child(3) {
	--d: 0.2s;
}

.av-about-team .is-in .av-about-team__card {
	--d: calc(0.32s + var(--i) * 0.1s);
}

.av-about-team .is-in.av-about-team__gallery .av-about-team__shot {
	--d: calc(var(--i) * 0.12s);
	transition-duration: 0.6s;
}

@media (prefers-reduced-motion: reduce) {
	.av-about-team__card,
	.av-about-team__shot-img {
		transition: none;
	}

	.av-about-team__card:hover {
		transform: none;
	}

	.av-about-team__shot:hover .av-about-team__shot-img {
		transform: none;
	}
}

/* ==========================================================================
   05 · Services «Комплексная безопасность» — bento grid
   (patterns/about-services.php, assets/js/about-services.js).

   ≥1200px: 24 columns — heading 9 | card 01 15; cards 02 / 03 / 04 take
   8 / 9 / 7; card 05 the full width (low). Inside a card the photo is a
   background layer framed per card, the text sits on its light / dark side.
   768–1199px: 2 columns — heading, 01 full; 02 | 03; 04 | 05.
   <768px: one column; each card stacks its photo above the text.
   Radius: 4px, as the homepage photos.
   ========================================================================== */

.av-about-page .av-section.av-about-services {
	--av-section-pt: 2.5rem;
	--av-section-pb: 2.5rem;
	--av-bento-gap: 0.75rem;
	--av-bento-pad: 1.5rem;
	background-color: #fff;
}

@media (min-width: 768px) {
	.av-about-page .av-section.av-about-services {
		--av-section-pt: 3rem;
		--av-section-pb: 3rem;
		--av-bento-pad: 1.75rem;
	}
}

@media (min-width: 1200px) {
	.av-about-page .av-section.av-about-services {
		--av-section-pt: 3.5rem;            /* 56px */
		--av-section-pb: 3.5rem;
	}
}

.av-bento {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--av-bento-gap);
}

.av-about-page .av-bento > * {
	margin-block: 0;
}

/* ------------------------------------------------------------ Heading */

.av-about-services__head {
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding-bottom: 1.25rem;
}

.av-about-page .av-about-services__head .av-about-lead {
	max-width: 26rem;
	margin-top: 1rem;
}

.av-about-page .av-about-services__head .av-link-more {
	margin-top: 1.5rem;
}

/* ------------------------------------------------------------ Card */

.av-bento__card {
	position: relative;
	isolation: isolate;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	border: 1px solid rgba(26, 95, 180, 0.08);
	border-radius: 4px;
	color: var(--av-ink);
	background-color: #edf3fb;
	box-shadow: 0 1px 2px rgba(11, 31, 51, 0.05);
	transition: box-shadow 0.35s ease;
}

.av-bento__card:hover {
	box-shadow: 0 20px 38px -24px rgba(11, 31, 51, 0.45);
}

/* Focus: the stretched title link draws the ring around the whole card. */
.av-bento__card:has(.av-bento__link:focus-visible) {
	outline: 2px solid var(--av-primary);
	outline-offset: 3px;
}

.av-about-page .av-bento__link:focus-visible {
	outline: none;
}

.av-bento__media {
	position: relative;
	aspect-ratio: 16 / 10;
	overflow: hidden;
}

.av-bento__img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

.av-bento__card:hover .av-bento__img {
	transform: scale(1.03);
}

.av-bento__body {
	box-sizing: border-box;
	padding: 1.25rem 4.75rem var(--av-bento-pad) var(--av-bento-pad);
}

.av-bento__num {
	display: block;
	font-size: 1.625rem;
	font-weight: 400;
	line-height: 1;
	letter-spacing: -0.01em;
}

.av-bento__num::after {
	content: "";
	display: block;
	width: 1.5rem;
	height: 2px;
	margin-top: 0.6rem;
	background: var(--av-accent);
}

.av-bento__title {
	margin: 0.9rem 0 0;
	font-size: 1.5rem;
	font-weight: 700;
	line-height: 1.15;
	letter-spacing: -0.01em;
	color: inherit;
}

.av-bento__link {
	color: inherit;
	text-decoration: none;
}

/* One link per card: stretched over the whole card (round arrow included). */
.av-bento__link::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 3;
}

.av-bento__text {
	margin: 0.55rem 0 0;
	font-size: 0.9375rem;
	line-height: 1.5;
	color: var(--av-about-muted);
}

.av-bento__go {
	position: absolute;
	right: var(--av-bento-pad);
	bottom: var(--av-bento-pad);
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 2.75rem;
	height: 2.75rem;
	border-radius: 50%;
	color: #fff;
	background-color: var(--av-primary);
	box-shadow: 0 8px 18px -10px rgba(11, 31, 51, 0.55);
	transition: background-color 0.3s ease;
}

.av-bento__go svg {
	transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}

.av-bento__card:hover .av-bento__go svg,
.av-bento__card:has(.av-bento__link:focus-visible) .av-bento__go svg {
	transform: translateX(3px);
}

/* Colour schemes. */
.av-bento__card--physical {
	border-color: transparent;
	color: #fff;
	background-color: #0b1a2e;
}

.av-bento__card--monitoring {
	border-color: transparent;
	color: #fff;
	background: linear-gradient(140deg, #2170dc 0%, var(--av-primary) 100%);
}

.av-bento__card--physical .av-bento__text,
.av-bento__card--monitoring .av-bento__text {
	color: rgba(255, 255, 255, 0.86);
}

.av-bento__card--physical .av-bento__go,
.av-bento__card--monitoring .av-bento__go {
	color: var(--av-ink);
	background-color: #fff;
}

.av-bento__card--monitoring .av-bento__go {
	color: var(--av-primary);
}

.av-bento__card--access {
	background-color: #f3f7fc;
}

/* Phone framing of the stacked photos. */
.av-bento__card--physical .av-bento__img {
	object-position: 64% 30%;
}

.av-bento__card--technical .av-bento__img {
	object-position: 80% 10%;
}

.av-bento__card--monitoring .av-bento__media {
	margin: 0.75rem 0.75rem 0;
	border-radius: 4px;
}

.av-bento__card--monitoring .av-bento__img {
	object-position: 30% 40%;
}

.av-bento__card--access .av-bento__img {
	object-position: 80% 50%;
}

.av-bento__card--audit .av-bento__img {
	object-position: 74% 25%;
}

@media (max-width: 767.98px) {
	.av-bento__text br {
		display: none;
	}
}

/* ------------------------------------------------------------ Overlay cards
   ≥768px (all but card 05 on tablets keep their own frames below): the
   photo becomes the card's background layer; a gradient on the text side
   keeps the text readable without dimming the people. */
@media (min-width: 768px) {
	.av-bento {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.av-about-services__head,
	.av-bento__card--physical {
		grid-column: 1 / -1;
	}

	.av-bento__card {
		min-height: 17.25rem;
	}

	.av-bento__media {
		position: absolute;
		inset: 0;
		z-index: -1;
		aspect-ratio: auto;
	}

	.av-bento__media::after {
		content: "";
		position: absolute;
		inset: 0;
		pointer-events: none;
	}

	.av-bento__body {
		max-width: 58%;
		padding: var(--av-bento-pad) var(--av-bento-pad) 5.5rem;
	}

	.av-bento__go {
		right: auto;
		left: var(--av-bento-pad);
	}

	/* 01 — dark photo, guard on the right. */
	.av-bento__card--physical {
		aspect-ratio: 2.5;
		min-height: 0;
	}

	.av-bento__card--physical .av-bento__img {
		object-position: 50% 40%;
	}

	.av-bento__card--physical .av-bento__media::after {
		background: linear-gradient(90deg, rgba(6, 17, 31, 0.84) 0%, rgba(6, 17, 31, 0.55) 30%, rgba(6, 17, 31, 0) 56%);
	}

	.av-bento__card--physical .av-bento__title {
		font-size: 1.875rem;               /* = homepage large card title */
	}

	.av-bento__card--physical .av-bento__body {
		padding-bottom: 4.75rem;
	}

	/* 02 — installer and camera on the right. */
	.av-bento__card--technical .av-bento__img {
		object-position: 100% 0;
	}

	.av-bento__card--technical .av-bento__media::after {
		background: linear-gradient(90deg, #edf3fb 0%, rgba(237, 243, 251, 0.94) 24%, rgba(237, 243, 251, 0.6) 42%, rgba(237, 243, 251, 0) 60%);
	}

	/* 03 — blue field, the operator in a framed photo on the right. */
	.av-bento__card--monitoring .av-bento__media {
		inset: 0.875rem 0.875rem 0.875rem auto;
		z-index: 0;
		width: 43%;
		margin: 0;
	}

	.av-bento__card--monitoring .av-bento__body {
		max-width: 57%;
		padding-right: 0.75rem;
	}

	/* 04 — reader and card on the right. */
	.av-bento__card--access .av-bento__img {
		object-position: 82% 50%;
	}

	.av-bento__card--access .av-bento__media::after {
		background: linear-gradient(90deg, #f3f7fc 0%, rgba(243, 247, 252, 0.92) 26%, rgba(243, 247, 252, 0.5) 46%, rgba(243, 247, 252, 0) 64%);
	}

	/* 05 (tablet: a half-width card like 02). */
	.av-bento__card--audit .av-bento__img {
		object-position: 80% 25%;
	}

	.av-bento__card--audit .av-bento__media::after {
		background: linear-gradient(90deg, #edf3fb 0%, rgba(237, 243, 251, 0.92) 28%, rgba(237, 243, 251, 0.5) 46%, rgba(237, 243, 251, 0) 62%);
	}

}

/* ------------------------------------------------------------ Desktop */
@media (min-width: 1200px) {
	.av-bento {
		grid-template-columns: repeat(24, minmax(0, 1fr));
	}

	.av-about-services__head {
		grid-column: 1 / 10;
		padding: 0 2rem 0 0;
	}

	.av-bento__card--physical {
		grid-column: 10 / 25;
	}

	.av-bento__card--technical {
		grid-column: 1 / 9;
	}

	.av-bento__card--monitoring {
		grid-column: 9 / 18;
	}

	.av-bento__card--access {
		grid-column: 18 / 25;
	}

	/* 05 — low, full width: number | title + text; photo on the right
	   fading in from the light side; the arrow on the photo. */
	.av-bento__card--audit {
		grid-column: 1 / 25;
		flex-direction: row;
		align-items: center;
		min-height: 8.25rem;
	}

	.av-bento__card--audit .av-bento__media {
		inset: 0 0 0 40%;
		-webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 26%);
		mask-image: linear-gradient(90deg, transparent 0%, #000 26%);
	}

	.av-bento__card--audit .av-bento__media::after {
		background: none;
	}

	/* The two people fill the photo strip: the image is wider than the
	   strip (right-aligned) and lifted so the faces sit in the band. */
	.av-bento__card--audit .av-bento__img {
		position: absolute;
		top: 0;
		right: 0;
		width: 182%;
		height: auto;
		translate: 0 -17%;
	}

	.av-bento__card--audit .av-bento__body {
		display: grid;
		grid-template-columns: 6rem auto;
		align-items: center;
		max-width: none;
		padding: 1.5rem var(--av-bento-pad);
	}

	.av-bento__card--audit .av-bento__num {
		grid-row: 1 / 3;
		align-self: start;
	}

	.av-bento__card--audit .av-bento__title {
		margin: 0;
		font-size: 1.875rem;
	}

	.av-bento__card--audit .av-bento__text {
		grid-column: 2;
	}

	.av-bento__card--audit .av-bento__go {
		top: 50%;
		right: 2.25rem;
		bottom: auto;
		left: auto;
		margin-top: -1.375rem;
		color: var(--av-ink);
		background-color: #fff;
	}
}

/* ------------------------------------------------------------ Motion
   .is-armed (set by the JS only when it will animate) hides the parts;
   .is-in shows them in order; the JS drops both classes at the end. */

.av-about-services.is-armed .av-about-services__head > *,
.av-about-services.is-armed .av-bento__card {
	opacity: 0;
	translate: 0 0.875rem;
}

.av-about-services.is-in .av-about-services__head > *,
.av-about-services.is-in .av-bento__card {
	opacity: 1;
	translate: 0 0;
	transition: opacity 0.55s cubic-bezier(0.22, 1, 0.36, 1) var(--d, 0s), translate 0.55s cubic-bezier(0.22, 1, 0.36, 1) var(--d, 0s);
}

.av-about-services.is-in .av-about-services__head > :nth-child(2) {
	--d: 0.08s;
}

.av-about-services.is-in .av-about-services__head > :nth-child(3) {
	--d: 0.16s;
}

.av-about-services.is-in .av-about-services__head > :nth-child(4) {
	--d: 0.24s;
}

/* 01 at 0.3s, then 02 / 03 / 04 / 05 every 0.1s. */
.av-about-services.is-in .av-bento__card {
	--d: calc(0.3s + var(--i) * 0.1s);
}

@media (prefers-reduced-motion: reduce) {
	.av-bento__img,
	.av-bento__go svg,
	.av-bento__card {
		transition: none;
	}

	.av-bento__card:hover .av-bento__img,
	.av-bento__card:hover .av-bento__go svg {
		transform: none;
	}
}

/* ==========================================================================
   06 · Territory «Территория работы» — heading | lead; a wide light map with
   the figures on its left; a navy strip of three advantages under the map
   (patterns/about-region.php, assets/js/about-territory.js).
   Mock-up: assets/images/about-territory-approved-reference.png.

   Map: base WebP + inline SVG share one canvas in the asset coordinate
   system (1994 × 789). The stage shows a window of it: --av-terr-crop-x /
   --av-terr-crop-w in map units; the canvas is sized and shifted from them,
   so the bitmap and every vector layer are cropped and scaled together.
     <600       window x 640–1840 (region only), figures under the map
     600–1023   window x 420–1994, figures under the map
     ≥1024      the whole map, figures over its left part
   Vector sizes (labels, dots, marker, line) are in map units per breakpoint
   so they stay legible at each map scale.
   Radius: 4px, as the homepage cards.
   ========================================================================== */

.av-about-page .av-section.av-about-territory {
	--av-section-pt: 2.5rem;
	--av-section-pb: 2.5rem;
	--av-terr-panel: #edf5fc;               /* light map tone (base image) */
	--av-terr-navy: #082e49;                /* region fill (SVG asset gradient end) */
	--av-terr-rule: #a9c3dc;
	background-color: #f7f9fc;
}

@media (min-width: 768px) {
	.av-about-page .av-section.av-about-territory {
		--av-section-pt: 3rem;
		--av-section-pb: 3rem;
	}
}

@media (min-width: 1200px) {
	.av-about-page .av-section.av-about-territory {
		--av-section-pt: 3.5rem;            /* 56px, as «Комплексная безопасность» */
		--av-section-pb: 3.5rem;
	}
}

/* ------------------------------------------------------------ Heading */

.av-territory__head {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 1.25rem;
}

/* Outspecify the .av-container > * margin reset (sections.css). */
.av-about-page .av-territory__head {
	margin-bottom: 1.75rem;
}

.av-territory__head > *,
.av-territory__head-main > * {
	margin-block: 0;
}

.av-about-page .av-territory__lead {
	max-width: 30rem;
	padding-left: 1.25rem;
	border-left: 1px solid #c4d8ec;
}

@media (min-width: 1024px) {
	.av-territory__head {
		grid-template-columns: minmax(0, 1fr) minmax(0, 20.5rem);
		align-items: end;
		gap: 3rem;
	}

	.av-about-page .av-territory__head {
		margin-bottom: 2rem;
	}

	/* The separator runs along the two lines of the H2. */
	.av-about-page .av-territory__lead {
		padding-block: 0.3rem;
		padding-left: 2rem;
	}
}

/* ------------------------------------------------------------ Map panel */

.av-territory__panel {
	position: relative;
	overflow: hidden;
	border: 1px solid rgba(26, 95, 180, 0.08);
	border-radius: 4px;
	background-color: var(--av-terr-panel);
	box-shadow: 0 1px 2px rgba(11, 31, 51, 0.05);
}

.av-territory__stage {
	--av-terr-crop-x: 640;
	--av-terr-crop-w: 1200;
	/* map-unit sizes (rendered size = value × stage width / crop width) */
	--av-terr-fs-city: 52px;
	--av-terr-fs-label: 42px;
	--av-terr-dot: 9px;
	--av-terr-line: 5;
	--av-terr-pin: 17px;
	--av-terr-pin-line: 5;
	--av-terr-halo: 32px;
	--av-terr-ring: 220px;

	position: relative;
	overflow: hidden;
	aspect-ratio: var(--av-terr-crop-w) / 789;
}

.av-territory__canvas {
	position: absolute;
	top: 0;
	bottom: 0;
	left: calc(var(--av-terr-crop-x) / var(--av-terr-crop-w) * -100%);
	width: calc(1994 / var(--av-terr-crop-w) * 100%);
}

.av-territory__base,
.av-territory__svg {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	max-width: none;
	height: 100%;
}

.av-territory__svg {
	overflow: hidden;
}

@media (min-width: 600px) {
	.av-territory__stage {
		--av-terr-crop-x: 420;
		--av-terr-crop-w: 1574;
		--av-terr-fs-city: 42px;
		--av-terr-fs-label: 38px;
		--av-terr-dot: 8px;
		--av-terr-line: 4.5;
		--av-terr-pin: 15px;
		--av-terr-pin-line: 4.5;
		--av-terr-halo: 28px;
		--av-terr-ring: 240px;
	}
}

@media (min-width: 768px) {
	.av-territory__stage {
		--av-terr-fs-city: 34px;
		--av-terr-fs-label: 31px;
		--av-terr-dot: 7px;
		--av-terr-line: 4;
		--av-terr-pin: 14px;
		--av-terr-pin-line: 4;
		--av-terr-halo: 26px;
		--av-terr-ring: 260px;
	}
}

@media (min-width: 1024px) {
	.av-territory__stage {
		--av-terr-crop-x: 0;
		--av-terr-crop-w: 1994;
	}
}

@media (min-width: 1200px) {
	.av-territory__stage {
		--av-terr-fs-city: 30px;
		--av-terr-fs-label: 27px;
		--av-terr-dot: 6.5px;
		--av-terr-line: 3.5;
		--av-terr-pin: 14px;
		--av-terr-pin-line: 4;
		--av-terr-halo: 26px;
		--av-terr-ring: 260px;
	}
}

/* ------------------------------------------------------------ Map layers */

.av-territory__outline {
	stroke-width: var(--av-terr-line);
}

.av-territory__dot {
	r: var(--av-terr-dot);
	transform-box: fill-box;
	transform-origin: center;
}

.av-territory__halo {
	r: var(--av-terr-halo);
	fill: rgba(216, 234, 255, 0.32);
}

.av-territory__pin {
	r: var(--av-terr-pin);
	fill: var(--av-accent);
	stroke: #fff;
	stroke-width: var(--av-terr-pin-line);
}

/* Four thin signal rings around Saint Petersburg, one centre (--k = 0…3).
   r = the largest ring; each ring scales about its own centre (fill-box), so
   the centre never moves. Static (no JS / reduced motion): four quiet
   concentric circles; with motion the JS adds .is-live and they spread out
   one after another (keyframes below), each to its own size (--av-ring-end). */
.av-territory__ring {
	--av-ring-end: calc(1 - var(--k) * 0.12);
	r: var(--av-terr-ring);
	stroke: #5ab2ff;
	stroke-width: 1.6;
	vector-effect: non-scaling-stroke;
	transform-box: fill-box;
	transform-origin: center;
	opacity: calc(0.32 - var(--k) * 0.06);
	transform: scale(calc(0.3 + var(--k) * 0.2));
}

.av-territory__label {
	font-family: inherit;
	pointer-events: none;
}

.av-territory__label--city {
	font-size: var(--av-terr-fs-city);
	font-weight: 700;
	fill: var(--av-ink);
	paint-order: stroke;
	stroke: #fff;
	stroke-width: calc(var(--av-terr-fs-city) * 0.22);
	stroke-linejoin: round;
}

.av-territory__label--region {
	font-size: var(--av-terr-fs-label);
	font-weight: 600;
	fill: #fff;
}

/* Narrow windows (<768): the city name goes above the marker and the region
   name is centred, so neither runs past the cropped edges. */
@media (max-width: 767.98px) {
	.av-territory__label--city {
		text-anchor: middle;
		transform: translate(19px, -66px);
	}

	.av-territory__label--region {
		text-anchor: middle;
		transform: translate(80px, 0);
	}
}

.av-territory__label--water {
	font-size: var(--av-terr-fs-label);
	font-style: italic;
	fill: #4d7397;
}

/* ------------------------------------------------------------ Figures
   <1024: a row of three under the map; ≥1024: a column over the map's left
   part on a light veil. */

.av-territory__stats {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	margin: 0;
	padding: 1.25rem 0;
	list-style: none;
	border-top: 1px solid rgba(26, 95, 180, 0.12);
}

.av-territory__stat {
	display: flex;
	flex-direction: column;
	gap: 0.3rem;
	min-width: 0;
	padding: 0 0.75rem;
	border-left: 1px solid rgba(26, 95, 180, 0.16);
}

.av-territory__stat:first-child {
	border-left: 0;
}

.av-territory__value {
	font-size: clamp(1.5rem, 1rem + 2.4vw, 2rem);
	font-weight: 700;
	line-height: 1.05;
	letter-spacing: -0.02em;
	font-variant-numeric: tabular-nums;
	color: var(--av-ink);
}

.av-territory__caption {
	font-size: 0.875rem;
	line-height: 1.35;
	color: var(--av-ink);
}

@media (max-width: 1023.98px) {
	/* «региона присутствия» stays on two lines at every width. */
	.av-territory__stat:not(:first-child) .av-territory__caption br {
		display: none;
	}
}

@media (min-width: 600px) {
	.av-territory__stat {
		padding-inline: 1.5rem;
	}

	.av-territory__caption {
		font-size: 0.9375rem;
	}
}

@media (min-width: 1024px) {
	.av-territory__stats {
		position: absolute;
		top: 0;
		bottom: 0;
		left: 0;
		display: flex;
		flex-direction: column;
		justify-content: center;
		width: 30%;
		padding: 0 0 0 4.5%;
		border-top: 0;
		background: linear-gradient(90deg, rgba(237, 245, 252, 0.94) 0%, rgba(237, 245, 252, 0.82) 62%, rgba(237, 245, 252, 0) 100%);
	}

	.av-territory__stat {
		gap: 0.35rem;
		padding: 0;
		border-left: 0;
	}

	.av-territory__stat + .av-territory__stat::before {
		content: "";
		display: block;
		width: 3.5rem;
		height: 1px;
		margin: 1.1rem 0 1.25rem;
		background-color: var(--av-terr-rule);
	}

	.av-territory__value {
		font-size: clamp(2.125rem, 0.5rem + 2.6vw, 2.875rem);
	}

	.av-territory__caption {
		font-size: 1rem;
		line-height: 1.3;
	}
}

/* 1024–1199: the map is lower — tighter dividers. */
@media (min-width: 1024px) and (max-width: 1199.98px) {
	.av-territory__stat + .av-territory__stat::before {
		margin: 0.8rem 0 0.9rem;
	}
}

@media (min-width: 1200px) {
	.av-territory__value {
		font-size: clamp(2.875rem, 1rem + 2.6vw, 3.25rem);
	}

	.av-territory__caption {
		font-size: 1.1875rem;
	}
}

/* ------------------------------------------------------------ Advantages strip */

.av-territory__strip {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	padding: 0.25rem 1.25rem;
	list-style: none;
	border-radius: 4px;
	color: #fff;
	background-color: var(--av-terr-navy);
}

.av-about-page .av-territory__strip {
	margin: 0.75rem 0 0;
}

.av-territory__point {
	display: flex;
	align-items: center;
	gap: 1.1rem;
	padding-block: 1.1rem;
}

.av-territory__point + .av-territory__point {
	border-top: 1px solid rgba(199, 226, 250, 0.18);
}

.av-about-page .av-territory__icon {
	width: 2.25rem;
	height: 2.25rem;
	color: #dcecfb;
	transition: transform 0.35s ease, color 0.35s ease;
}

.av-territory__point:hover .av-territory__icon {
	color: #8cc6ff;
	transform: translateY(-4px);
}

.av-territory__point-body > * {
	margin-block: 0;
}

.av-about-page .av-territory__point-title {
	margin-bottom: 0.25rem;
	font-size: 1rem;
	font-weight: 700;
	line-height: 1.3;
	color: #fff;
}

.av-territory__point-text {
	font-size: 0.875rem;
	line-height: 1.5;
	color: #a9c6e2;
}

/* 768–1023: three columns, icon above the text; ≥1024: icon beside it. */
@media (min-width: 768px) {
	.av-territory__strip {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		padding: 1.5rem 0;
	}

	.av-territory__point {
		flex-direction: column;
		align-items: flex-start;
		gap: 0.85rem;
		padding: 0.25rem 1.5rem;
	}

	.av-territory__point + .av-territory__point {
		border-top: 0;
		border-left: 1px solid rgba(199, 226, 250, 0.22);
	}
}

@media (min-width: 1024px) {
	.av-territory__point {
		flex-direction: row;
		align-items: center;
		gap: 1rem;
		padding-inline: 1.5rem;
	}
}

@media (min-width: 1200px) {
	.av-territory__strip {
		padding-block: 1.3rem;
	}

	.av-territory__point {
		gap: 1.25rem;
		padding-inline: 2.25rem;
	}

	.av-about-page .av-territory__icon {
		width: 2.5rem;
		height: 2.5rem;
	}

	.av-about-page .av-territory__point-title {
		font-size: 1.125rem;
	}

	.av-territory__point-text {
		font-size: 0.9375rem;
	}
}

/* ------------------------------------------------------------ Motion
   Nothing is hidden by default: without JS or with reduced motion the map is
   complete and the figures are final. The JS sets
     --av-terr-len  the outline's real length (getTotalLength), for the dash;
     .is-armed      start state (outline undrawn, layers transparent);
     .is-playing    the one-off intro (CSS animations, below);
     .is-live       the endless ring pulse;
     .is-visible    while the section is on screen and the tab is visible —
                    every animation here runs only then (play-state), so an
                    unfinished intro resumes where it stopped.
   The strip gets .is-in from its own observer.

   Intro:
     0–2.2s     one blue line runs once round the whole outline (the region
                path itself, dash = its length) and closes where it began;
     2.25–3.35s the fill spreads from Saint Petersburg: a soft-edged disc in
                the fill's mask (#av-territory-reveal) grows to cover the
                region, while the gradient goes from brand blue to the final
                navy — the front is blue, never a grey half-transparent navy;
     2.5–3.8s   the white dots, 40ms apart;
     3.0s       region / lake labels; 3.4s the marker and its label;
     3.8s       four rings start, 0.8s apart, and keep pulsing. */

.av-about-territory {
	--av-terr-play: paused;
}

.av-about-territory.is-visible {
	--av-terr-play: running;
}

.av-about-territory.is-armed .av-territory__outline {
	/* gap a little longer than the line: no stray dash at either end */
	stroke-dasharray: var(--av-terr-len) calc(var(--av-terr-len) * 1.01);
	stroke-dashoffset: calc(var(--av-terr-len) * 1.002);
}

.av-about-territory.is-armed .av-territory__reveal {
	transform: scale(0);
}

.av-territory__reveal {
	transform-box: fill-box;
	transform-origin: center;
}

.av-about-territory.is-armed .av-territory__roads,
.av-about-territory.is-armed .av-territory__dot,
.av-about-territory.is-armed .av-territory__halo,
.av-about-territory.is-armed .av-territory__pin,
.av-about-territory.is-armed .av-territory__label,
.av-about-territory.is-armed .av-territory__ring,
.av-about-territory.is-armed .av-territory__word {
	opacity: 0;
}

.av-about-territory.is-armed .av-territory__point {
	opacity: 0;
	transform: translateY(12px);
}

.av-about-territory.is-playing .av-territory__outline {
	animation: av-terr-draw 2.2s cubic-bezier(0.33, 0.1, 0.67, 0.9) both;
}

.av-about-territory.is-playing .av-territory__reveal {
	animation: av-terr-reveal 1.1s cubic-bezier(0.3, 0.45, 0.3, 1) 2.25s both;
}

.av-about-territory.is-playing .av-territory__stop--a {
	animation: av-terr-fill-a 1.1s ease-in-out 2.25s both;
}

.av-about-territory.is-playing .av-territory__stop--b {
	animation: av-terr-fill-b 1.1s ease-in-out 2.25s both;
}

.av-about-territory.is-playing .av-territory__roads {
	animation: av-terr-roads 0.6s ease 2.9s both;
}

.av-about-territory.is-playing .av-territory__dot {
	animation: av-terr-dot 0.4s cubic-bezier(0.2, 0.7, 0.3, 1) calc(2.5s + var(--i) * 40ms) both;
}

.av-about-territory.is-playing .av-territory__label--region,
.av-about-territory.is-playing .av-territory__label--water {
	animation: av-terr-fade 0.6s ease 3s both;
}

.av-about-territory.is-playing .av-territory__halo,
.av-about-territory.is-playing .av-territory__pin,
.av-about-territory.is-playing .av-territory__label--city {
	animation: av-terr-fade 0.5s ease 3.4s both;
}

.av-about-territory.is-playing .av-territory__word {
	animation: av-terr-fade 0.6s ease 0.9s both;
}

/* Rings: a 5.6s cycle per ring — it spreads for the first 4s (71%), then
   waits; the four start 0.8s apart, so 2–4 are visible at once. */
.av-about-territory.is-live .av-territory__ring {
	animation: av-terr-ring 5.6s linear calc(3.8s + var(--k) * 0.8s) infinite backwards;
}

.av-about-territory.is-playing .av-territory__outline,
.av-about-territory.is-playing .av-territory__reveal,
.av-about-territory.is-playing .av-territory__stop,
.av-about-territory.is-playing .av-territory__roads,
.av-about-territory.is-playing .av-territory__label,
.av-about-territory.is-playing .av-territory__dot,
.av-about-territory.is-playing .av-territory__halo,
.av-about-territory.is-playing .av-territory__pin,
.av-about-territory.is-playing .av-territory__word,
.av-about-territory.is-live .av-territory__ring {
	animation-play-state: var(--av-terr-play);
}

.av-about-territory.is-armed .av-territory__strip.is-in .av-territory__point {
	animation: av-terr-rise 0.52s cubic-bezier(0.2, 0.7, 0.3, 1) calc(var(--av-terr-strip-delay, 0ms) + var(--i) * 100ms) both;
}

@keyframes av-terr-draw {
	from { stroke-dashoffset: calc(var(--av-terr-len) * 1.002); }
	to { stroke-dashoffset: 0; }
}

@keyframes av-terr-reveal {
	from { transform: scale(0); }
	to { transform: none; }
}

/* Fill gradient: brand blue → the asset's navy (#123752 → #082e49). */
@keyframes av-terr-fill-a {
	from { stop-color: #1f5c9a; }
	to { stop-color: #123752; }
}

@keyframes av-terr-fill-b {
	from { stop-color: #184f86; }
	to { stop-color: #082e49; }
}

@keyframes av-terr-fade {
	from { opacity: 0; }
	to { opacity: 1; }
}

@keyframes av-terr-roads {
	from { opacity: 0; }
	to { opacity: 0.17; }
}

@keyframes av-terr-dot {
	from { opacity: 0; transform: scale(0.6); }
	to { opacity: 1; transform: none; }
}

@keyframes av-terr-ring {
	0% { opacity: 0; transform: scale(0.05); animation-timing-function: ease-out; }
	5% { opacity: 0.75; transform: scale(calc(0.05 + var(--av-ring-end) * 0.1)); animation-timing-function: cubic-bezier(0.3, 0.5, 0.45, 1); }
	71% { opacity: 0; transform: scale(var(--av-ring-end)); }
	100% { opacity: 0; transform: scale(var(--av-ring-end)); }
}

@keyframes av-terr-rise {
	from { opacity: 0; transform: translateY(12px); }
	to { opacity: 1; transform: none; }
}

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

	.av-territory__point:hover .av-territory__icon {
		transform: none;
	}
}

/* ==========================================================================
   07 · Values «Наши ценности» — evening panorama of the Spit of Vasilyevsky
   Island; heading | text on top, four connected values, «Обсудить задачу».
   (patterns/about-values.php, assets/js/about-values.js)
   Mock-up: /home/aleks/av-security-references/about-values-reference.png
   (1983 × 793; the background is the same frame without text).

   Width: the photo is full bleed; the content sits in the site container —
   --av-values-gutter repeats the .av-section .av-container side padding
   (sections.css), so the heading, the values and the link line up with
   the other sections.
   ≥1024   the section keeps the photo's proportion (40vw, 34–45rem) and the
           values stand on the water in one row, joined by lines with a
           running pulse
   <1024   on navy: heading and text, then the panorama as a strip with soft
           top / bottom edges (the whole Spit fits), then the values 2×2
           (no lines; the icons light up in turn) and the link
   ========================================================================== */

.av-about-page .av-section.av-about-values {
	--av-section-pt: 0;
	--av-section-pb: 0;
	--av-values-gutter: var(--wp--preset--spacing--50);
	--av-values-d: 4rem;                    /* circle diameter */
	--av-values-blue: #a9c6e6;              /* light blue text */
	--av-values-play: paused;

	position: relative;
	isolation: isolate;
	display: flex;
	overflow: hidden;
	color: #fff;
	background-color: #0a1a2b;
}

.av-values__bg {
	position: absolute;
	inset: 0;
	z-index: -2;
	display: block;
	width: 100%;
	max-width: none;
	height: 100%;
	object-fit: cover;
	object-position: 60% 50%;
}

/* Tone (≥1024): a little darker under the heading and under the values
   row; the middle (the Exchange and the columns) stays as photographed. */
@media (min-width: 1024px) {
	.av-about-values::after {
		content: "";
		position: absolute;
		inset: 0;
		z-index: -1;
		background: linear-gradient(180deg, rgba(5, 15, 32, 0.5) 0%, rgba(5, 15, 32, 0.12) 34%, rgba(5, 15, 32, 0) 52%, rgba(5, 15, 32, 0.22) 100%);
		pointer-events: none;
	}
}

/* <1024: one column on navy; the wrapper steps aside (display: contents)
   so the photo strip can sit between the text and the values. */
@media (max-width: 1023.98px) {
	.av-about-page .av-section.av-about-values {
		display: grid;
		grid-template-columns: minmax(0, 1fr);
		padding-block: 3.5rem 2.75rem;
	}

	.av-about-page .av-section.av-about-values > .av-values {
		display: contents;
	}

	.av-about-values .av-values__head,
	.av-about-values .av-values__list,
	.av-about-page .av-about-values .av-values__more {
		margin-inline: var(--av-values-gutter);
	}

	.av-about-values .av-values__head {
		order: 1;
	}

	.av-about-values .av-values__bg {
		position: relative;
		inset: auto;
		z-index: 0;
		order: 2;
		height: auto;
		aspect-ratio: 16 / 9;
		margin-top: 1.25rem;
		-webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 16%, #000 84%, transparent 100%);
		mask-image: linear-gradient(180deg, transparent 0%, #000 16%, #000 84%, transparent 100%);
	}

	.av-about-values .av-values__list {
		order: 3;
	}

	.av-about-page .av-about-values .av-values__more {
		order: 4;
		justify-self: start;
	}
}

.av-about-page .av-about-values > .av-values {
	position: relative;
	display: flex;
	flex-direction: column;
	box-sizing: border-box;
	width: 100%;
	margin: 0;
	padding: 3.5rem var(--av-values-gutter) 2.5rem;
}

/* = .av-section .av-container padding-inline from 769px (sections.css). */
@media (min-width: 769px) {
	.av-about-page .av-section.av-about-values {
		--av-values-gutter: max(
			calc(var(--wp--preset--spacing--50) * 3),
			calc((100% - var(--av-container)) / 2 + var(--wp--preset--spacing--50))
		);
	}
}

.av-values > *,
.av-values__head > *,
.av-values__head-main > * {
	margin-block: 0;
}

/* ------------------------------------------------------------ Heading */

.av-about-values .av-section__eyebrow {
	margin-bottom: 1.1rem;
	color: rgba(255, 255, 255, 0.78);
}

.av-about-values .av-values__title {
	color: #fff;
	text-shadow: 0 1px 18px rgba(0, 10, 25, 0.35);
}

.av-about-page .av-values__lead {
	max-width: 22rem;
	margin-top: 1.25rem;
	color: rgba(235, 242, 250, 0.86);
}

/* ------------------------------------------------------------ Values */

.av-values__list {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 2.25rem 1rem;
	margin: 1.5rem 0 0;
	padding: 0;
	list-style: none;
}

.av-values__item {
	min-width: 0;
	text-align: center;
}

.av-values__mark {
	position: relative;
	display: flex;
	justify-content: center;
	height: var(--av-values-d);
}

.av-values__circle {
	position: relative;
	display: grid;
	place-items: center;
	box-sizing: border-box;
	width: var(--av-values-d);
	height: var(--av-values-d);
	border: 1.5px solid rgba(255, 255, 255, 0.82);
	border-radius: 50%;
	color: #dfe9f6;
	background-color: rgba(4, 16, 34, 0.22);
	transition: border-color 0.22s ease, background-color 0.22s ease, box-shadow 0.22s ease;
}

/* Highlight layer (the pulse's arrival); hover styles the circle itself, so
   the two never fight over the same property. */
.av-values__circle::after {
	content: "";
	position: absolute;
	inset: -1.5px;
	border: 1.5px solid #fff;
	border-radius: 50%;
	box-shadow: 0 0 0 4px rgba(120, 190, 255, 0.12), 0 0 18px rgba(120, 190, 255, 0.45);
	opacity: 0;
	pointer-events: none;
}

.av-values__icon {
	display: block;
	width: 52%;
	height: 52%;
	transition: transform 0.22s ease, color 0.22s ease;
}

.av-values__item:hover .av-values__circle {
	border-color: #fff;
	background-color: rgba(26, 95, 180, 0.18);
	box-shadow: 0 0 16px rgba(120, 190, 255, 0.3);
}

.av-values__item:hover .av-values__icon {
	color: #fff;
	transform: translateY(-3px);
}

.av-values__num {
	position: absolute;
	top: 50%;
	right: calc(50% + var(--av-values-d) / 2 + 0.85rem);
	font-size: 0.95rem;
	font-weight: 600;
	line-height: 1;
	letter-spacing: 0.04em;
	color: rgba(176, 196, 222, 0.78);
	transform: translateY(-50%);
	font-variant-numeric: tabular-nums;
}

.av-about-page .av-values__name {
	margin: 1rem 0 0;
	font-size: 1.0625rem;
	font-weight: 700;
	line-height: 1.3;
	color: #fff;
}

.av-values__text {
	margin: 0.3rem 0 0;
	font-size: 0.875rem;
	line-height: 1.45;
	color: var(--av-values-blue);
}

/* Connector: from 18px right of this circle to the next value's number.
   Its track spans centre to centre; the connector clips it at the circles.
   Static (no JS / reduced motion): the pulse rests a little past the
   middle — the mock-up's marker. */
.av-values__link {
	display: none;
}

/* ------------------------------------------------------------ Link */

.av-about-page .av-values__more {
	align-self: flex-start;
	margin-top: 2.25rem;
	font-size: 0.95rem;
	font-weight: 500;
	line-height: 1.4;
}

.av-values__more a {
	display: inline-flex;
	align-items: center;
	gap: 0.6rem;
	padding-bottom: 0.45rem;
	color: #fff;
	text-decoration: none;
	background: linear-gradient(var(--av-accent), var(--av-accent)) left bottom / 100% 1.5px no-repeat;
	transition: color 0.2s ease;
}

.av-values__more-icon {
	flex: 0 0 auto;
	color: #e1253d;
	transition: transform 0.25s ease;
}

.av-values__more a:hover,
.av-values__more a:focus-visible {
	color: var(--av-values-blue);
}

.av-values__more a:hover .av-values__more-icon,
.av-values__more a:focus-visible .av-values__more-icon {
	transform: translate(2px, -2px);
}

.av-about-values a:focus-visible {
	outline-color: #fff;
}

@media (min-width: 600px) {
	.av-about-page .av-section.av-about-values {
		--av-values-d: 4.5rem;
	}

	.av-values__text {
		font-size: 0.9375rem;
	}
}

@media (min-width: 600px) and (max-width: 1023.98px) {
	.av-about-values .av-values__bg {
		aspect-ratio: 2.3;
	}
}

@media (min-width: 768px) and (max-width: 1023.98px) {
	.av-about-page .av-section.av-about-values {
		padding-block: 4rem 3rem;
	}

	.av-about-page .av-about-values .av-values__more {
		justify-self: end;
	}
}

@media (min-width: 1024px) {
	.av-about-page .av-values__more {
		align-self: flex-end;
	}
}

@media (min-width: 1024px) {
	.av-about-page .av-section.av-about-values {
		--av-values-d: clamp(4.25rem, 5.25vw, 5.25rem);
	}

	.av-about-page .av-about-values > .av-values {
		padding-block: clamp(3.5rem, 4.4vw, 5rem) 2.25rem;
	}

	.av-values__head {
		display: grid;
		grid-template-columns: minmax(0, 1fr) minmax(0, 18rem);
		align-items: start;
		gap: 3rem;
	}

	.av-about-page .av-values__lead {
		margin-top: 0.35rem;
	}

	.av-values__list {
		grid-template-columns: repeat(4, minmax(0, 1fr));
		gap: 0;
		margin-top: auto;
		padding-top: 3rem;
	}

	.av-values__link {
		position: absolute;
		top: 50%;
		left: calc(50% + var(--av-values-d) / 2 + 18px);
		display: block;
		width: calc(100% - var(--av-values-d) - 72px);
		height: 32px;
		margin-top: -16px;
		overflow: hidden;
	}

	.av-values__link::before {
		content: "";
		position: absolute;
		top: 50%;
		right: 0;
		left: 0;
		height: 1px;
		background-color: rgba(185, 212, 242, 0.62);
	}

	.av-values__track {
		position: absolute;
		top: 0;
		bottom: 0;
		left: calc(-1 * (var(--av-values-d) / 2 + 18px));
		right: calc(-1 * (var(--av-values-d) / 2 + 54px));
	}

	.av-values__pulse {
		position: absolute;
		top: 50%;
		left: 0;
		width: 100%;
		height: 12px;
		margin-top: -6px;
		transform: translateX(-52%);
	}

	/* the light tail */
	.av-values__pulse::before {
		content: "";
		position: absolute;
		top: 50%;
		right: 16px;
		width: 96px;
		height: 2px;
		margin-top: -1px;
		border-radius: 2px;
		background: linear-gradient(90deg, rgba(120, 190, 255, 0) 0%, rgba(120, 190, 255, 0.55) 60%, rgba(225, 240, 255, 0.95) 100%);
		box-shadow: 0 0 8px rgba(110, 185, 255, 0.55);
	}

	/* the red point */
	.av-values__pulse::after {
		content: "";
		position: absolute;
		top: 50%;
		right: 0;
		width: 8px;
		height: 8px;
		margin-top: -4px;
		border-radius: 50%;
		background-color: #e1253d;
		box-shadow: 0 0 6px rgba(225, 37, 61, 0.55);
	}

	.av-values__name {
		font-size: 1.125rem;
	}
}

@media (min-width: 1024px) {
	.av-about-page .av-section.av-about-values {
		min-height: clamp(34rem, 40vw, 45rem);
	}
}

@media (min-width: 1200px) {

	.av-about-page .av-values__name {
		margin-top: 1rem;
		font-size: 1.1875rem;
	}

	.av-about-page .av-values__more {
		margin-top: 1.25rem;
	}
}

/* ------------------------------------------------------------ Motion
   Without JS or with reduced motion: the finished section, static markers.
   The JS sets
     .is-armed    start state of the intro (once);
     .is-in       the intro (CSS transitions / animations below);
     .is-live     the loop: one pulse runs 01 → 02 → 03 → 04 and lights
                  each circle it reaches, then a pause;
     .is-visible  while on screen and the tab is visible — the loop runs
                  only then (animation-play-state).
   Loop: a 4.5s cycle shared by every part, started together, so they can
   not drift: segment k runs 0.9s from 1.5s + k·0.9s; circle k lights at
   1.5s + k·0.9s (300–400ms back to rest); the cycle ends with ≈1.8s pause. */

.av-about-page .av-section.av-about-values.is-visible {
	--av-values-play: running;
}

.av-about-values.is-armed .av-section__eyebrow::before {
	transform: scaleX(0);
	transform-origin: left center;
}

.av-about-values.is-armed .av-values__title,
.av-about-values.is-armed .av-values__lead,
.av-about-values.is-armed .av-values__item,
.av-about-values.is-armed .av-values__more {
	opacity: 0;
	transform: translateY(12px);
}

.av-about-values.is-armed .av-values__link {
	transform: scaleX(0);
	transform-origin: left center;
}

.av-about-values.is-armed .av-values__pulse {
	opacity: 0;
}

.av-about-values.is-in .av-section__eyebrow::before {
	animation: av-values-line 0.35s ease-out both;
}

.av-about-values.is-in .av-values__title {
	animation: av-values-rise 0.55s cubic-bezier(0.2, 0.7, 0.3, 1) 0.15s both;
}

.av-about-values.is-in .av-values__lead {
	animation: av-values-rise 0.55s cubic-bezier(0.2, 0.7, 0.3, 1) 0.25s both;
}

.av-about-values.is-in .av-values__item {
	animation: av-values-rise 0.55s cubic-bezier(0.2, 0.7, 0.3, 1) calc(0.35s + var(--i) * 120ms) both;
}

.av-about-values.is-in .av-values__link {
	animation: av-values-line 0.5s ease-out calc(0.7s + var(--i) * 120ms) both;
}

.av-about-values.is-in .av-values__more {
	animation: av-values-rise 0.55s cubic-bezier(0.2, 0.7, 0.3, 1) 0.9s both;
}

.av-about-values.is-live .av-values__pulse {
	animation: av-values-run 4.5s linear calc(1.5s + var(--i) * 0.9s) infinite both;
	animation-play-state: var(--av-values-play);
}

.av-about-values.is-live .av-values__circle::after {
	animation: av-values-lit 4.5s linear calc(1.5s + var(--i) * 0.9s) infinite both;
	animation-play-state: var(--av-values-play);
}

.av-about-values.is-live .av-values__icon {
	animation: av-values-icon 4.5s linear calc(1.5s + var(--i) * 0.9s) infinite both;
	animation-play-state: var(--av-values-play);
}

@keyframes av-values-line {
	from { transform: scaleX(0); }
	to { transform: scaleX(1); }
}

@keyframes av-values-rise {
	from { opacity: 0; transform: translateY(12px); }
	to { opacity: 1; transform: none; }
}

/* One segment: circle k centre → circle k+1 centre in 0.9s (20% of the
   cycle); hidden for the rest of the cycle. */
@keyframes av-values-run {
	0% { opacity: 1; transform: translateX(-100%); animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1); }
	19.5% { opacity: 1; transform: translateX(0); }
	21%, 100% { opacity: 0; transform: translateX(0); }
}

@keyframes av-values-lit {
	0% { opacity: 0; animation-timing-function: ease-out; }
	2.5% { opacity: 1; animation-timing-function: ease-in-out; }
	10%, 100% { opacity: 0; }
}

@keyframes av-values-icon {
	0% { filter: none; animation-timing-function: ease-out; }
	2.5% { filter: drop-shadow(0 0 5px rgba(150, 210, 255, 0.85)) brightness(1.15); animation-timing-function: ease-in-out; }
	10%, 100% { filter: none; }
}

@media (prefers-reduced-motion: reduce) {
	.av-values__circle,
	.av-values__icon,
	.av-values__more-icon {
		transition: none;
	}

	.av-values__item:hover .av-values__icon {
		transform: none;
	}
}

/* ==========================================================================
   08 · Documents «Работаем официально» — heading | lead; licence card
   (light) beside requisites card (navy); legal address row.
   (patterns/about-license.php, assets/js/about-documents.js)
   Mock-up: /home/aleks/av-security-references/about-documents-reference.png
   ≥1100   cards side by side ≈ 64 / 36, preview inside the licence card
   768–1099 cards stacked; licence text | preview side by side
   <768    one column; the preview under the licence text
   Radius 4px (homepage cards), buttons 2px (homepage buttons).
   ========================================================================== */

.av-about-page .av-section.av-about-license {
	--av-section-pt: 2.75rem;
	--av-section-pb: 2rem;
	--av-docs-navy: #0d2135;
	--av-docs-muted: #5d6b7e;
	--av-docs-on-navy: #9fb6cf;
	background-color: #fff;
}

@media (min-width: 768px) {
	.av-about-page .av-section.av-about-license {
		--av-section-pt: 3.25rem;
		--av-section-pb: 2.25rem;
	}
}

@media (min-width: 1200px) {
	.av-about-page .av-section.av-about-license {
		--av-section-pt: 3.5rem;
		--av-section-pb: 2.25rem;
	}
}

.av-docs .screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	border: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

.av-docs__rows,
.av-docs dd,
.av-docs__head > *,
.av-docs__head-main > *,
.av-docs__license-body > *,
.av-docs__req > * {
	margin: 0;
}

/* ------------------------------------------------------------ Heading */

.av-about-page .av-docs__head {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 1rem;
	margin-bottom: 1.75rem;
}

.av-about-page .av-docs__lead {
	max-width: 24rem;
}

.av-docs__lead br {
	display: none;
}

@media (min-width: 768px) {
	.av-about-page .av-docs__head {
		grid-template-columns: minmax(0, 1fr) auto;
		align-items: end;
		gap: 2rem;
	}

	.av-about-page .av-docs__lead {
		font-size: 1.125rem;
		line-height: 1.5;
		text-align: left;
	}

	.av-docs__lead br {
		display: inline;
	}
}

@media (min-width: 1200px) {
	.av-about-page .av-docs__head {
		margin-bottom: 2rem;
	}

	.av-about-page .av-docs__lead {
		padding-bottom: 0.35rem;
		font-size: 1.25rem;
	}
}

/* ------------------------------------------------------------ Cards */

.av-docs__cards {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 1rem;
}

.av-docs__license,
.av-docs__req {
	position: relative;
	border-radius: 4px;
}

.av-docs__license {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 1.75rem;
	padding: 1.75rem 1.5rem;
	border: 1px solid rgba(26, 95, 180, 0.08);
	background: linear-gradient(135deg, #eef4fb 0%, #e6eef8 100%);
	color: var(--av-ink);
	scroll-margin-top: calc(var(--av-header-height, 80px) + 16px);
}

.av-docs__kicker {
	font-size: 0.8rem;
	font-weight: 600;
	line-height: 1.4;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: rgba(11, 31, 51, 0.62);
}

.av-about-page .av-docs__card-title {
	margin-top: 0.85rem;
	font-size: clamp(1.5rem, 1.1rem + 1.2vw, 1.875rem);
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: -0.01em;
	text-wrap: balance;
}

.av-docs__number {
	margin-top: 1rem;
	padding-bottom: 1.1rem;
	border-bottom: 1px solid rgba(11, 31, 51, 0.12);
	font-size: clamp(1.0625rem, 0.9rem + 0.5vw, 1.375rem);
	font-weight: 600;
	line-height: 1.3;
	font-variant-numeric: tabular-nums;
	overflow-wrap: anywhere;
}

.av-docs__dates {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	width: fit-content;
	max-width: 100%;
	margin: 1.4rem 0 0;
}

/* Two equal columns as wide as the wider date (fit-content), the divider is
   the second column's border, so it stands at their boundary with the same
   gap (2rem) to the text on either side. It spans the dates only and stays
   clear of the rule above (the block's top margin). */
.av-docs__date {
	min-width: 0;
	padding-right: 2rem;
}

.av-docs__date + .av-docs__date {
	padding-right: 0;
	padding-left: 2rem;
	border-left: 1px solid rgba(11, 31, 51, 0.12);
}

.av-docs__date dt {
	font-size: 0.9375rem;
	line-height: 1.4;
	color: var(--av-docs-muted);
}

.av-docs__date dd {
	margin-top: 0.2rem;
	font-size: clamp(1.125rem, 0.95rem + 0.5vw, 1.375rem);
	font-weight: 700;
	line-height: 1.25;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

.av-docs__actions {
	margin-top: 1.5rem;
}

.av-docs__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.55rem;
	box-sizing: border-box;
	min-height: 3.375rem;
	padding: 0.9rem 1.75rem;
	border: 1px solid var(--av-docs-navy);
	border-radius: 2px;
	font-size: 1rem;
	font-weight: 600;
	line-height: 1.2;
	letter-spacing: 0.01em;
	color: #fff;
	text-decoration: none;
	background-color: var(--av-docs-navy);
	transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.av-docs__btn:hover,
.av-docs__btn:focus-visible {
	border-color: var(--av-primary);
	color: #fff;
	background-color: var(--av-primary);
}

.av-docs__btn-icon {
	flex: 0 0 auto;
	transition: transform 0.2s ease;
}

.av-docs__btn:hover .av-docs__btn-icon {
	transform: translate(2px, -2px);
}

.av-docs__btn--outline:hover .av-docs__btn-icon {
	transform: translateY(2px);
}

.av-docs__note {
	margin-top: 0.9rem;
	font-size: 0.875rem;
	line-height: 1.4;
	color: var(--av-docs-muted);
}

/* Preview: the real first page, white sheet, soft shadow. */
.av-docs__preview {
	position: relative;
	justify-self: center;
	width: min(100%, 22rem);
	margin: 0;
}

.av-docs__preview-img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 778 / 1100;
	border-radius: 4px;
	background-color: #fff;
	box-shadow: 0 1px 2px rgba(11, 31, 51, 0.06), 0 18px 40px -22px rgba(11, 31, 51, 0.35);
}

.av-docs__zoom {
	position: absolute;
	right: 0.9rem;
	bottom: 0.9rem;
	display: grid;
	place-items: center;
	width: 3rem;
	height: 3rem;
	border-radius: 50%;
	color: var(--av-ink);
	background-color: #fff;
	box-shadow: 0 4px 14px rgba(11, 31, 51, 0.18);
	transition: color 0.2s ease, box-shadow 0.2s ease;
}

.av-docs__zoom:hover,
.av-docs__zoom:focus-visible {
	color: var(--av-primary);
	box-shadow: 0 0 0 4px rgba(26, 95, 180, 0.14), 0 4px 14px rgba(11, 31, 51, 0.18);
}

/* Requisites card */
.av-docs__req {
	display: flex;
	flex-direction: column;
	padding: 1.75rem 1.5rem;
	color: #fff;
	background-color: var(--av-docs-navy);
}

.av-docs__req::before {
	content: "";
	display: block;
	width: 2.25rem;
	height: 2px;
	margin-bottom: 1.5rem;
	background-color: var(--av-accent);
}

.av-about-page .av-docs__req-title {
	margin-top: 0;
	color: #fff;
}

.av-docs__company {
	margin-top: 1rem;
	padding-bottom: 1rem;
	font-size: clamp(1.0625rem, 0.95rem + 0.4vw, 1.25rem);
	font-weight: 600;
	line-height: 1.3;
}

.av-docs__rows {
	border-top: 1px solid rgba(255, 255, 255, 0.14);
}

.av-docs__row {
	display: grid;
	grid-template-columns: 4.5rem minmax(0, 1fr);
	align-items: center;
	min-height: 3.5rem;
	border-bottom: 1px solid rgba(255, 255, 255, 0.14);
}

.av-docs__row dt {
	font-size: 0.875rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	color: var(--av-docs-on-navy);
}

.av-docs__row dd {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem;
	min-width: 0;
}

.av-docs__value {
	font-size: 1.0625rem;
	font-weight: 500;
	letter-spacing: 0.02em;
	font-variant-numeric: tabular-nums;
	overflow-wrap: anywhere;
}

.av-docs__copy {
	position: relative;
	display: grid;
	flex: 0 0 auto;
	place-items: center;
	width: 2.75rem;
	height: 2.75rem;
	margin-right: -0.6rem;
	padding: 0;
	border: 0;
	border-radius: 2px;
	color: var(--av-docs-on-navy);
	background: none;
	cursor: pointer;
	transition: color 0.2s ease, background-color 0.2s ease;
}

.av-docs__copy[hidden] {
	display: none;
}

.av-docs__copy:hover,
.av-docs__copy:focus-visible {
	color: #fff;
	background-color: rgba(255, 255, 255, 0.08);
}

.av-docs__copy:focus-visible {
	outline: 2px solid #fff;
	outline-offset: 0;
}

.av-docs__copy.is-copied {
	color: #8fd3a8;
}

/* «Скопировано» — floats above the button, never moves the row. */
.av-docs__toast {
	position: absolute;
	bottom: calc(100% + 4px);
	right: 0;
	padding: 0.3rem 0.55rem;
	border-radius: 2px;
	font-size: 0.75rem;
	font-weight: 600;
	line-height: 1.2;
	white-space: nowrap;
	color: var(--av-docs-navy);
	background-color: #fff;
	opacity: 0;
	transform: translateY(4px);
	transition: opacity 0.18s ease, transform 0.18s ease;
	pointer-events: none;
}

.av-docs__copy.is-copied .av-docs__toast,
.av-docs__copy.is-failed .av-docs__toast {
	opacity: 1;
	transform: none;
}

.av-docs__actions--req {
	margin-top: auto;
	padding-top: 1.5rem;
}

.av-docs__btn--outline {
	width: 100%;
	border-color: rgba(255, 255, 255, 0.75);
	background-color: transparent;
}

.av-docs__btn--outline:hover,
.av-docs__btn--outline:focus-visible {
	border-color: #fff;
	color: var(--av-docs-navy);
	background-color: #fff;
}

.av-docs a:focus-visible {
	outline: 2px solid var(--av-primary);
	outline-offset: 3px;
}

.av-docs__req a:focus-visible {
	outline-color: #fff;
}

/* ------------------------------------------------------------ Address */

.av-docs__address {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	align-items: center;
	gap: 0.75rem 1.1rem;
	padding-top: 1.5rem;
	border-top: 1px solid rgba(11, 31, 51, 0.1);
}

/* Space between the cards and the rule. Needs the extra .av-about-page:
   sections.css resets margins of .av-container children (0,2,0). */
.av-about-page .av-docs__address {
	margin-top: 1.625rem;
}

.av-docs__address-icon {
	display: grid;
	place-items: center;
	width: 3.25rem;
	height: 3.25rem;
	border-radius: 4px;
	color: var(--av-ink);
	background-color: #eaf1fa;
}

.av-docs__address-text {
	display: flex;
	flex-direction: column;
	gap: 0.2rem;
	margin: 0;
}

.av-docs__address-label {
	font-size: 0.875rem;
	line-height: 1.4;
	color: var(--av-docs-muted);
}

.av-docs__address-value {
	font-size: 1rem;
	font-weight: 500;
	line-height: 1.45;
	color: var(--av-ink);
}

.av-docs__contacts {
	grid-column: 2;
	justify-self: start;
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
	font-size: 0.95rem;
	font-weight: 600;
	line-height: 1.4;
	color: var(--av-ink);
	text-decoration: none;
	transition: color 0.2s ease;
}

.av-docs__contacts-icon {
	color: var(--av-accent);
	transition: transform 0.25s ease;
}

.av-docs__contacts:hover,
.av-docs__contacts:focus-visible {
	color: var(--av-primary);
}

.av-docs__contacts:hover .av-docs__contacts-icon,
.av-docs__contacts:focus-visible .av-docs__contacts-icon {
	transform: translate(3px, -3px);
}

@media (min-width: 600px) {
	.av-docs__license,
	.av-docs__req {
		padding: 2rem;
	}

	.av-docs__address-value {
		font-size: 1.0625rem;
	}
}

/* Tablet: licence text | preview inside the card; cards stacked. */
@media (min-width: 768px) {
	.av-docs__license {
		grid-template-columns: minmax(0, 1fr) minmax(0, 15rem);
		align-items: center;
		gap: 2rem;
	}

	.av-docs__preview {
		width: 100%;
	}

	.av-docs__address {
		grid-template-columns: auto minmax(0, 1fr) auto;
		gap: 1.25rem;
	}

	.av-docs__contacts {
		grid-column: 3;
		align-self: stretch;
		padding-left: 2rem;
		border-left: 1px solid var(--av-about-line);
	}
}

@media (min-width: 1100px) {
	.av-docs__cards {
		grid-template-columns: minmax(0, 1.8fr) minmax(0, 1fr);
		gap: 1.25rem;
	}

	.av-docs__license {
		grid-template-columns: minmax(0, 1fr) minmax(0, 37%);
		align-items: stretch;
		gap: 1.5rem;
		padding: 2.5rem 1.75rem 2.25rem 2.5rem;
	}

	.av-docs__license-body {
		display: flex;
		flex-direction: column;
		justify-content: center;
	}

	.av-docs__preview {
		align-self: center;
	}

	.av-docs__req {
		padding: 2.5rem 2.25rem 2.25rem;
	}

	.av-docs__row {
		grid-template-columns: 6.5rem minmax(0, 1fr);
	}

	.av-docs__number {
		margin-top: 1.25rem;
	}

	.av-docs__btn:not(.av-docs__btn--outline) {
		min-width: 17rem;
	}
}

/* ------------------------------------------------------------ Motion
   Without JS or with reduced motion everything is simply shown. The JS
   sets .is-armed (start state) and, once the section scrolls in, .is-in:
   eyebrow line 350ms → heading and lead (12px, 550ms) → licence card →
   requisites card → address row. */

.av-about-license.is-armed .av-section__eyebrow::before {
	transform: scaleX(0);
	transform-origin: left center;
}

.av-about-license.is-armed .av-docs__title,
.av-about-license.is-armed .av-docs__lead,
.av-about-license.is-armed .av-docs__license,
.av-about-license.is-armed .av-docs__req,
.av-about-license.is-armed .av-docs__address {
	opacity: 0;
	transform: translateY(12px);
}

.av-about-license.is-in .av-section__eyebrow::before {
	animation: av-docs-line 0.35s ease-out both;
}

.av-about-license.is-in .av-docs__title {
	animation: av-docs-rise 0.55s cubic-bezier(0.2, 0.7, 0.3, 1) 0.15s both;
}

.av-about-license.is-in .av-docs__lead {
	animation: av-docs-rise 0.55s cubic-bezier(0.2, 0.7, 0.3, 1) 0.25s both;
}

.av-about-license.is-in .av-docs__license {
	animation: av-docs-rise 0.6s cubic-bezier(0.2, 0.7, 0.3, 1) 0.4s both;
}

.av-about-license.is-in .av-docs__req {
	animation: av-docs-rise 0.6s cubic-bezier(0.2, 0.7, 0.3, 1) 0.55s both;
}

.av-about-license.is-in .av-docs__address {
	animation: av-docs-rise 0.55s cubic-bezier(0.2, 0.7, 0.3, 1) 0.75s both;
}

@keyframes av-docs-line {
	from { transform: scaleX(0); }
	to { transform: scaleX(1); }
}

@keyframes av-docs-rise {
	from { opacity: 0; transform: translateY(12px); }
	to { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
	.av-docs__btn,
	.av-docs__btn-icon,
	.av-docs__zoom,
	.av-docs__copy,
	.av-docs__toast,
	.av-docs__contacts,
	.av-docs__contacts-icon {
		transition: none;
	}
}