/* ==========================================================================
   AV-Security — «Все услуги» (/uslugi/vse-uslugi/)

   Loaded only on this page (inc/all-services.php), after sections.css.
   Every rule is scoped to .av-vu / .av-vu-* classes.

   A 1:1 port of the approved mock-up
   /home/aleks/projects/av-security-3d/references/av-security-vse-uslugi-reference.html
   (its hub CSS block: .hhero, .gnav, .grp, .sc, .kompl/.kb, .pick) — sizes,
   colours, radii and breakpoints are the mock-up's. The one intended
   difference: the mock-up's `.in { max-width: 1240px }` + 16px `.gut` are
   replaced by the site grid — every band is `.av-section` with an
   `.av-container` inside (sections.css: 1180px container, spacing-50
   gutters → 1132px of content, max(72px, …) side fields ≥769px, 24px below).
   Type is the site font (theme.json); the mock-up's webfont is not loaded.

   Sections: tokens · shell · crumbs · hero + filter · group navigation ·
   groups + cards · photo-card group · feature group · consulting group ·
   complex banner ·
   picker · motion.
   ========================================================================== */

/* ---------- tokens (mock-up :root, page-scoped) ---------- */
.av-vu {
	--vu-bg: #fff;
	--vu-tint: #f3f6fa;
	--vu-ink: #0e1d3a;
	--vu-ink2: #3d4b66;
	--vu-ink3: #66738e;
	--vu-rule: #e2e7f0;
	--vu-rule2: #d3dbe8;
	--vu-navy: #0b1a2e;
	--vu-deep: #07111f;
	--vu-on: #e8eef8;
	--vu-on2: #9fb1cc;
	--vu-on3: #6f83a3;
	--vu-dl: rgba(150, 175, 215, 0.18);
	--vu-red: #d7263d;
	--vu-blue: #2455c3;
	--vu-blue-h: #1b46a8;
	--vu-blue-d: #6f9cff;
	--vu-ok: #1f8f5a;
	/* Bottom edge of the visible site header; all-services.js keeps it exact
	   (the header changes height on scroll). Fallback = the site token. */
	--vu-top: var(--av-header-height, 104px);
	--vu-gnav-h: 56px;

	color: var(--vu-ink);
	font-size: 16px;
	line-height: 1.55;
	-webkit-font-smoothing: antialiased;
}

/* Bands butt up against each other inside the constrained <main>. */
.av-vu > * {
	margin-block: 0;
}

.av-vu *,
.av-vu *::before,
.av-vu *::after {
	box-sizing: border-box;
}

.av-vu [hidden] {
	display: none !important;
}

.av-vu button,
.av-vu input {
	font: inherit;
	color: inherit;
}

.av-vu a {
	color: inherit;
}

.av-vu a:hover {
	text-decoration: none;
}

.av-vu :focus-visible,
.av-vu .av-section a:focus-visible,
.av-vu.av-section a:focus-visible {
	outline: 2px solid var(--vu-blue);
	outline-offset: 3px;
	border-radius: 0;
}

.av-vu .av-vu-dk :focus-visible {
	outline-color: var(--vu-blue-d);
}

/* ---------- shell ---------- */
.av-vu .av-section {
	padding-block: 0;
	background: transparent;
	color: inherit;
}

.av-vu .av-vu-band {
	padding-block: 96px;
}

.av-vu .av-vu-dk {
	background: var(--vu-navy);
	color: var(--vu-on);
}

@media (max-width: 760px) {
	.av-vu .av-vu-band {
		padding-block: 64px;
	}
}

.av-vu .av-vu-sh {
	display: grid;
	gap: 16px;
	max-width: 760px;
}

.av-vu .av-vu-sh > * {
	margin: 0;
}

.av-vu .av-vu-eb {
	margin: 0;
	display: flex;
	align-items: center;
	gap: 12px;
	font-weight: 500;
	font-size: 13px;
	line-height: 1;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--vu-ink3);
}

.av-vu .av-vu-eb::before {
	content: "";
	display: block;
	width: 30px;
	height: 2px;
	background: var(--vu-red);
}

.av-vu .av-vu-dk .av-vu-eb {
	color: var(--vu-on2);
}

.av-vu h1,
.av-vu h2,
.av-vu h3 {
	margin: 0;
	text-wrap: balance;
	color: inherit;
}

.av-vu .av-vu-h1 {
	font-weight: 800;
	font-size: clamp(40px, 5.4vw, 68px);
	line-height: 1;
	letter-spacing: -0.04em;
}

.av-vu h2 {
	font-weight: 800;
	font-size: clamp(30px, 3.6vw, 46px);
	line-height: 1.06;
	letter-spacing: -0.03em;
}

.av-vu h3 {
	font-weight: 700;
	font-size: 20px;
	line-height: 1.25;
	letter-spacing: -0.01em;
}

.av-vu .av-vu-lead {
	margin: 0;
	font-size: 18px;
	line-height: 1.55;
	color: var(--vu-ink2);
	max-width: 62ch;
}

.av-vu .av-vu-dk .av-vu-lead {
	color: #b8c6db;
}

/* ---------- hero + object filter ----------
   Mock-up /home/aleks/av-security-all-services-mockup/ (2026-10-28): full-
   width city photo, darkened on the left by a CSS gradient (the photo itself
   is bright), white copy on the left, white object panel on the right. */
.av-vu .av-vu-hero {
	position: relative;
	isolation: isolate;
	padding-block: 44px 56px;
	background: var(--vu-deep) url("../images/vse-uslugi-hero-city.webp") 62% 46% / cover no-repeat;
	color: #fff;
	overflow: hidden;
}

.av-vu .av-vu-hero::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background:
		linear-gradient(90deg, rgba(7, 17, 31, 0.94) 0%, rgba(7, 17, 31, 0.88) 28%, rgba(7, 17, 31, 0.62) 46%, rgba(7, 17, 31, 0.18) 64%, rgba(7, 17, 31, 0) 78%),
		linear-gradient(180deg, rgba(7, 17, 31, 0.25) 0%, rgba(7, 17, 31, 0) 22%);
	pointer-events: none;
}

.av-vu .av-vu-hero__in {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 468px);
	gap: 64px;
	align-items: center;
}

.av-vu .av-vu-hero__copy {
	display: grid;
	gap: 20px;
	justify-items: start;
}

.av-vu .av-vu-hero__copy > * {
	margin: 0;
}

/* Breadcrumbs (breadcrumbs.css, on-dark) — the copy grid gap plus the rest of
   the shared breadcrumbs → eyebrow distance. */
.av-vu .av-vu-hero__copy > .av-breadcrumbs {
	margin-bottom: calc(var(--av-crumbs-gap-eyebrow) - 20px);
}

.av-vu .av-vu-hero .av-vu-eb {
	color: rgba(255, 255, 255, 0.82);
}

.av-vu .av-vu-hero .av-vu-h1 {
	max-width: 11.5em;
	font-size: clamp(40px, 4.6vw, 66px);
	line-height: 1.02;
	color: #fff;
}

.av-vu .av-vu-hero .av-vu-lead {
	max-width: 54ch;
	color: rgba(255, 255, 255, 0.84);
}

.av-vu .av-vu-hero__cta {
	margin-top: 8px;
}

.av-vu .av-vu-hbtn {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	min-height: 54px;
	padding: 0 28px;
	border-radius: 2px;
	background: #fff;
	color: var(--vu-navy);
	font-weight: 700;
	font-size: 16px;
	line-height: 1.2;
	text-decoration: none;
	transition: background 0.2s, color 0.2s;
}

.av-vu .av-vu-hbtn svg {
	width: 16px;
	height: 16px;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.8;
	stroke-linecap: round;
	stroke-linejoin: round;
	transition: transform 0.2s;
}

.av-vu .av-vu-hbtn:hover {
	background: var(--vu-on);
}

.av-vu .av-vu-hbtn:hover svg {
	transform: translateX(3px);
}

.av-vu .av-vu-hero :focus-visible {
	outline-color: #fff;
}

.av-vu .av-vu-trust {
	list-style: none;
	margin: 20px 0 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	row-gap: 16px;
}

.av-vu .av-vu-trust li {
	display: flex;
	align-items: center;
	gap: 12px;
	padding-inline: 28px;
	border-left: 1px solid rgba(255, 255, 255, 0.24);
	font-size: 14px;
	line-height: 1.3;
	color: rgba(255, 255, 255, 0.74);
}

.av-vu .av-vu-trust li:first-child {
	padding-left: 0;
	border-left: 0;
}

.av-vu .av-vu-trust img {
	flex: none;
	width: 38px;
	height: 38px;
}

.av-vu .av-vu-trust b {
	display: block;
	font-weight: 800;
	font-size: 18px;
	line-height: 1.15;
	letter-spacing: -0.01em;
	color: #fff;
}

/* Object panel */
.av-vu .av-vu-finder {
	display: grid;
	gap: 18px;
	padding: 30px;
	border-radius: 4px;
	background: var(--vu-bg);
	color: var(--vu-ink);
	box-shadow: 0 24px 64px rgba(7, 17, 31, 0.28);
}

.av-vu .av-vu-finder :focus-visible {
	outline-color: var(--vu-blue);
}

.av-vu .av-vu-finder__k {
	margin: 0;
	font-weight: 800;
	font-size: 24px;
	line-height: 1.15;
	letter-spacing: -0.02em;
	color: var(--vu-ink);
}

.av-vu .av-vu-finder__d {
	margin: -10px 0 0;
	font-size: 14.5px;
	line-height: 1.45;
	color: var(--vu-ink3);
}

.av-vu .av-vu-ochips {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 10px;
}

.av-vu .av-vu-ochips button {
	position: relative;
	display: flex;
	align-items: center;
	gap: 12px;
	min-height: 72px;
	padding: 12px 30px 12px 14px;
	border: 1px solid var(--vu-rule2);
	border-radius: 2px;
	background: var(--vu-bg);
	color: var(--vu-ink);
	text-align: left;
	cursor: pointer;
	font-size: 15px;
	font-weight: 600;
	line-height: 1.25;
	-webkit-tap-highlight-color: transparent;
	touch-action: manipulation;
	transition: border-color 0.2s, background-color 0.2s, color 0.2s, box-shadow 0.2s;
}

.av-vu .av-vu-ochips img {
	flex: none;
	width: 36px;
	height: 36px;
	transition: filter 0.2s;
}

/* Red selection mark (circle with a tick), shown on the active object. */
.av-vu .av-vu-ochips button::after {
	content: "";
	position: absolute;
	top: 8px;
	right: 8px;
	width: 18px;
	height: 18px;
	border-radius: 50%;
	background: var(--vu-red) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cpath d='M5 9.2l2.6 2.6L13 6.4' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 18px no-repeat;
	opacity: 0;
	transform: scale(0.4);
	transition: opacity 0.2s, transform 0.25s cubic-bezier(0.2, 0.8, 0.3, 1.3);
}

.av-vu .av-vu-ochips button:hover {
	border-color: var(--vu-ink3);
	background: var(--vu-tint);
}

.av-vu .av-vu-ochips button[aria-pressed="true"] {
	background: var(--vu-navy);
	border-color: var(--vu-navy);
	color: #fff;
	box-shadow: inset 3px 0 0 var(--vu-red);
}

.av-vu .av-vu-ochips button[aria-pressed="true"] img {
	filter: brightness(0) invert(1);
}

.av-vu .av-vu-ochips button[aria-pressed="true"]::after {
	opacity: 1;
	transform: none;
}

.av-vu .av-vu-fbar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 8px 16px;
	padding-top: 16px;
	border-top: 1px solid var(--vu-rule);
}

.av-vu .av-vu-fres {
	margin: 0;
	font-size: 14.5px;
	color: var(--vu-ink2);
}

.av-vu .av-vu-fres b {
	font-weight: 800;
	color: var(--vu-ink);
}

.av-vu .av-vu-fall {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin-block: -8px;
	padding-block: 8px;
	color: var(--vu-blue);
	font-weight: 600;
	font-size: 14.5px;
	text-decoration: none;
}

.av-vu .av-vu-fall::after {
	content: "→";
	transition: transform 0.2s;
}

.av-vu .av-vu-fall:hover {
	color: var(--vu-blue-h);
}

.av-vu .av-vu-fall:hover::after {
	transform: translateX(3px);
}

/* Picker option buttons (#podbor) — the old shared chip style. */
.av-vu .av-vu-popts button {
	height: 40px;
	padding: 0 16px;
	border-radius: 20px;
	border: 1.5px solid var(--vu-rule2);
	background: var(--vu-bg);
	color: var(--vu-ink);
	cursor: pointer;
	font-size: 14.5px;
	font-weight: 500;
	line-height: 1.55;
	transition: border-color 0.2s, background 0.2s, color 0.2s;
}

.av-vu .av-vu-popts button:hover {
	border-color: var(--vu-ink3);
}

.av-vu .av-vu-popts button[aria-pressed="true"] {
	background: var(--vu-navy);
	border-color: var(--vu-navy);
	color: #fff;
}

/* Entrance: light rise of the copy, then the panel. */
@keyframes av-vu-rise {
	from {
		opacity: 0;
		transform: translateY(14px);
	}

	to {
		opacity: 1;
		transform: none;
	}
}

.av-vu .av-vu-hero__copy > *,
.av-vu .av-vu-finder {
	animation: av-vu-rise 0.6s cubic-bezier(0.2, 0.7, 0.2, 1) both;
}

.av-vu .av-vu-hero__copy > :nth-child(2) { animation-delay: 0.05s; }
.av-vu .av-vu-hero__copy > :nth-child(3) { animation-delay: 0.1s; }
.av-vu .av-vu-hero__copy > :nth-child(4) { animation-delay: 0.16s; }
.av-vu .av-vu-hero__copy > :nth-child(5) { animation-delay: 0.22s; }
.av-vu .av-vu-hero__copy > :nth-child(6) { animation-delay: 0.28s; }
.av-vu .av-vu-finder { animation-delay: 0.2s; }

@media (max-width: 1180px) {
	.av-vu .av-vu-hero__in {
		grid-template-columns: minmax(0, 1fr) minmax(0, 420px);
		gap: 40px;
	}

	.av-vu .av-vu-finder {
		padding: 24px;
	}

	.av-vu .av-vu-trust li {
		padding-inline: 20px;
	}
}

/* Narrow two-column hero: icon above the text keeps the trust row on one line. */
@media (min-width: 1024px) and (max-width: 1180px) {
	.av-vu .av-vu-trust {
		flex-wrap: nowrap;
	}

	.av-vu .av-vu-trust li {
		flex-direction: column;
		align-items: flex-start;
		gap: 8px;
		font-size: 13px;
	}

	.av-vu .av-vu-trust img {
		width: 32px;
		height: 32px;
	}
}

@media (max-width: 1023px) {
	.av-vu .av-vu-hero {
		padding-block: 36px 48px;
		background-position: 68% 100%;
	}

	.av-vu .av-vu-hero::before {
		background: linear-gradient(180deg, rgba(7, 17, 31, 0.9) 0%, rgba(7, 17, 31, 0.8) 45%, rgba(7, 17, 31, 0.5) 100%);
	}

	.av-vu .av-vu-hero__in {
		grid-template-columns: minmax(0, 1fr);
		gap: 36px;
	}

	.av-vu .av-vu-finder {
		max-width: 640px;
	}
}

@media (max-width: 640px) {
	.av-vu .av-vu-hero {
		padding-block: 28px 40px;
	}

	.av-vu .av-vu-hero__copy {
		gap: 16px;
	}

	.av-vu .av-vu-hero__copy > .av-breadcrumbs {
		margin-bottom: calc(var(--av-crumbs-gap-eyebrow) - 16px);
	}

	.av-vu .av-vu-hero .av-vu-h1 {
		font-size: clamp(32px, 9.4vw, 44px);
		letter-spacing: -0.035em;
	}

	.av-vu .av-vu-hero .av-vu-lead {
		font-size: 16px;
	}

	.av-vu .av-vu-hero__cta,
	.av-vu .av-vu-hbtn {
		width: 100%;
		justify-content: center;
	}

	/* Trust row: three equal columns, icon above the text. */
	.av-vu .av-vu-trust {
		display: grid;
		grid-template-columns: repeat(3, minmax(0, 1fr));
		width: 100%;
		margin-top: 8px;
	}

	.av-vu .av-vu-trust li {
		flex-direction: column;
		align-items: flex-start;
		gap: 8px;
		padding-inline: 12px;
		font-size: 12.5px;
	}

	.av-vu .av-vu-trust img {
		width: 30px;
		height: 30px;
	}

	.av-vu .av-vu-trust b {
		font-size: 16px;
	}

	.av-vu .av-vu-finder {
		padding: 20px 16px;
		gap: 16px;
	}

	.av-vu .av-vu-finder__k {
		font-size: 21px;
	}

	.av-vu .av-vu-finder__d {
		margin-top: -8px;
		font-size: 14px;
	}

	.av-vu .av-vu-ochips {
		gap: 8px;
	}

	.av-vu .av-vu-ochips button {
		flex-direction: column;
		align-items: flex-start;
		gap: 8px;
		min-height: 96px;
		padding: 12px 26px 12px 12px;
		font-size: 14px;
	}

	.av-vu .av-vu-ochips img {
		width: 30px;
		height: 30px;
	}

	.av-vu .av-vu-ochips button::after {
		top: 8px;
		right: 8px;
	}
}

/* ---------- group navigation (sticky under the site header) ---------- */
.av-vu .av-vu-gnav {
	position: sticky;
	top: var(--vu-top);
	z-index: 40;
	background: rgba(255, 255, 255, 0.95);
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
	border-block: 1px solid var(--vu-rule);
}

.av-vu .av-vu-gnav__in {
	display: flex;
	gap: 4px;
	overflow-x: auto;
	scrollbar-width: none;
	padding-block: 8px;
}

/* Site grid (1132 px of content at ≥1280): the bar's edges are the content
   edges of .av-container (sections.css formula), set as margins instead of
   padding so that, when the five items do not fit, they scroll inside those
   edges and never under the side fields. Items are spread evenly. */
.av-vu .av-vu-gnav .av-vu-gnav__in {
	justify-content: space-between;
	width: auto;
	padding-inline: 0;
	margin-inline: var(--wp--preset--spacing--50);
}

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

.av-vu .av-vu-gnav__in::-webkit-scrollbar {
	display: none;
}

.av-vu .av-vu-gnav__in a {
	flex: none;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	height: 38px;
	padding: 0 12px;
	border-radius: 2px; /* = header CTA «Получить расчёт» (.av-header__cta) */
	font-size: 14px;
	font-weight: 600;
	color: var(--vu-ink2);
	text-decoration: none;
}

.av-vu .av-vu-gnav__in a span {
	font-weight: 500;
	font-size: 12px;
	line-height: 1;
	color: var(--vu-ink3);
	background: var(--vu-tint);
	border-radius: 2px;
	padding: 3px 7px;
}

.av-vu .av-vu-gnav__in a:hover {
	background: var(--vu-tint);
}

.av-vu .av-vu-gnav__in a.is-on {
	background: var(--vu-navy);
	color: #fff;
}

.av-vu .av-vu-gnav__in a.is-on span {
	background: rgba(255, 255, 255, 0.15);
	color: #fff;
}

.av-vu .av-vu-gnav__in a.av-vu-gnav__cta {
	color: var(--vu-blue);
}

/* Anchor targets clear the site header (html scroll-padding) + this bar. */
.av-vu .av-vu-grp,
.av-vu .av-vu-kompl,
.av-vu #podbor {
	scroll-margin-top: calc(var(--vu-top) - var(--av-header-height, 104px) + var(--vu-gnav-h));
}

/* ---------- groups + cards ---------- */
.av-vu .av-vu-grp {
	padding-block: 56px;
}

.av-vu .av-vu-grp + .av-vu-grp {
	padding-top: 8px;
}

.av-vu .av-vu-gh {
	display: flex;
	flex-wrap: wrap;
	align-items: end;
	justify-content: space-between;
	gap: 12px 32px;
	margin-bottom: 24px;
}

.av-vu .av-vu-gh h2 {
	font-size: clamp(26px, 2.8vw, 34px);
}

.av-vu .av-vu-gh p {
	margin: 6px 0 0;
	max-width: 60ch;
	color: var(--vu-ink2);
	font-size: 16px;
}

.av-vu .av-vu-gh__cnt {
	font-size: 14px;
	color: var(--vu-ink3);
}

.av-vu .av-vu-grid {
	display: grid;
	gap: 16px;
}

.av-vu .av-vu-grid--4 {
	grid-template-columns: repeat(4, minmax(0, 1fr));
}

.av-vu .av-vu-grid--3 {
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

@media (max-width: 1100px) {
	.av-vu .av-vu-grid--4,
	.av-vu .av-vu-grid--3 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 640px) {
	.av-vu .av-vu-grid--4,
	.av-vu .av-vu-grid--3 {
		grid-template-columns: minmax(0, 1fr);
	}
}

.av-vu .av-vu-sc {
	position: relative;
	display: flex;
	flex-direction: column;
	border-radius: 12px;
	background: var(--vu-bg);
	border: 1px solid var(--vu-rule);
	overflow: hidden;
	text-decoration: none;
	color: var(--vu-ink);
	transition: transform 0.25s, box-shadow 0.25s, border-color 0.25s, opacity 0.3s, filter 0.3s;
}

.av-vu a.av-vu-sc:hover {
	transform: translateY(-3px);
	box-shadow: 0 24px 50px -28px rgba(14, 29, 58, 0.45);
	border-color: var(--vu-rule2);
}

.av-vu a.av-vu-sc:focus-visible {
	outline: 3px solid var(--vu-blue);
	outline-offset: 3px;
}

.av-vu .av-vu-sc__ph {
	display: block;
	position: relative;
	aspect-ratio: 16 / 10;
	max-width: 100%;
	background: #0b1a2e;
	overflow: hidden;
}

.av-vu .av-vu-sc__ph img,
.av-vu .av-vu-kb__ph img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
	object-position: center;
	display: block;
}

.av-vu .av-vu-sc__ph::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(7, 17, 31, 0) 55%, rgba(7, 17, 31, 0.35));
}

.av-vu .av-vu-sc__bd {
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding: 18px 20px 20px;
	flex: 1;
}

.av-vu .av-vu-sc h3 {
	font-size: 19px;
}

.av-vu .av-vu-sc p {
	margin: 0;
	font-size: 14.5px;
	line-height: 1.45;
	color: var(--vu-ink2);
}

.av-vu .av-vu-sc__go {
	margin-top: auto;
	padding-top: 10px;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-weight: 600;
	font-size: 14px;
	color: var(--vu-blue);
}

.av-vu .av-vu-sc__go svg,
.av-vu .av-vu-kb__go svg {
	width: 16px;
	height: 16px;
	stroke: currentColor;
	fill: none;
	stroke-width: 2;
	transition: transform 0.2s;
}

.av-vu a.av-vu-sc:hover .av-vu-sc__go svg {
	transform: translateX(3px);
}

.av-vu .av-vu-sc__badge {
	width: max-content;
	position: absolute;
	left: 12px;
	top: 12px;
	z-index: 1;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	height: 26px;
	padding: 0 10px;
	border-radius: 13px;
	background: rgba(255, 255, 255, 0.94);
	font-weight: 600;
	font-size: 12px;
	line-height: 1;
	color: var(--vu-ink);
}

.av-vu .av-vu-sc__badge.is-top {
	background: var(--vu-red);
	color: #fff;
}

.av-vu .av-vu-sc__fit {
	display: none;
	position: absolute;
	right: 12px;
	top: 12px;
	z-index: 1;
	height: 26px;
	padding: 0 10px;
	border-radius: 13px;
	background: var(--vu-ok);
	color: #fff;
	font-weight: 600;
	font-size: 12px;
	line-height: 26px;
}

.av-vu.is-filtering .av-vu-sc.is-yes .av-vu-sc__fit {
	display: block;
}

.av-vu.is-filtering .av-vu-sc.is-no {
	opacity: 0.38;
	filter: grayscale(0.8);
}

.av-vu.is-filtering .av-vu-sc.is-no:hover {
	opacity: 0.8;
	filter: none;
}

/* wide card */
.av-vu .av-vu-sc--wide {
	grid-column: span 2;
	flex-direction: row;
}

.av-vu .av-vu-sc--wide .av-vu-sc__ph {
	aspect-ratio: auto;
	flex: 1 1 56%;
	min-height: 260px;
}

.av-vu .av-vu-sc--wide .av-vu-sc__bd {
	flex: 1 1 44%;
	padding: 28px;
	justify-content: center;
}

.av-vu .av-vu-sc--wide h3 {
	font-size: 24px;
}

.av-vu .av-vu-sc--wide ul {
	margin: 4px 0 0;
	padding: 0;
	list-style: none;
	display: grid;
	gap: 6px;
	font-size: 14.5px;
	color: var(--vu-ink2);
}

.av-vu .av-vu-sc--wide li {
	position: relative;
	padding-left: 18px;
}

.av-vu .av-vu-sc--wide li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.6em;
	width: 8px;
	height: 2px;
	background: var(--vu-red);
}

@media (max-width: 1100px) {
	.av-vu .av-vu-sc--wide {
		grid-column: 1 / -1;
	}
}

@media (max-width: 640px) {
	.av-vu .av-vu-sc--wide {
		flex-direction: column;
	}

	.av-vu .av-vu-sc--wide .av-vu-sc__ph {
		min-height: 0;
		aspect-ratio: 16 / 10;
		flex: none;
	}

	.av-vu .av-vu-sc--wide .av-vu-sc__bd {
		padding: 18px 20px 20px;
	}

	.av-vu .av-vu-sc:not(.av-vu-sc--wide):not(.av-vu-sc--photo):not(.av-vu-sc--tile):not(.av-vu-sc--feat):not(.av-vu-sc--cons) {
		flex-direction: row;
		min-height: 120px;
	}

	.av-vu .av-vu-sc:not(.av-vu-sc--wide):not(.av-vu-sc--photo):not(.av-vu-sc--tile):not(.av-vu-sc--feat):not(.av-vu-sc--cons) .av-vu-sc__ph {
		aspect-ratio: auto;
		flex: 0 0 112px;
	}

	.av-vu .av-vu-sc:not(.av-vu-sc--wide):not(.av-vu-sc--photo):not(.av-vu-sc--tile):not(.av-vu-sc--feat):not(.av-vu-sc--cons) .av-vu-sc__bd {
		padding: 14px 16px;
		gap: 6px;
	}

	.av-vu .av-vu-sc:not(.av-vu-sc--wide):not(.av-vu-sc--photo):not(.av-vu-sc--tile):not(.av-vu-sc--feat):not(.av-vu-sc--cons) h3 {
		font-size: 17px;
	}

	.av-vu .av-vu-sc:not(.av-vu-sc--wide):not(.av-vu-sc--photo):not(.av-vu-sc--tile):not(.av-vu-sc--feat):not(.av-vu-sc--cons) p {
		font-size: 13.5px;
	}

	.av-vu .av-vu-sc:not(.av-vu-sc--wide):not(.av-vu-sc--photo):not(.av-vu-sc--tile):not(.av-vu-sc--feat):not(.av-vu-sc--cons) .av-vu-sc__go {
		padding-top: 4px;
		font-size: 13.5px;
	}

	.av-vu .av-vu-sc__badge {
		left: 8px;
		top: 8px;
		height: 22px;
		padding: 0 8px;
		font-size: 11px;
	}

	.av-vu .av-vu-sc:not(.av-vu-sc--wide) .av-vu-sc__badge {
		max-width: 96px;
	}

	.av-vu .av-vu-sc__fit {
		right: 8px;
		top: auto;
		bottom: 8px;
		height: 22px;
		line-height: 22px;
		font-size: 11px;
	}

	.av-vu .av-vu-grp {
		padding-block: 36px;
	}

	.av-vu .av-vu-grp + .av-vu-grp {
		padding-top: 8px;
	}
}

/* ---------- photo-card group («Охрана сотрудниками») ----------
   Mock-up /home/aleks/av-security-all-services-staff-section/reference/
   approved-staff-section.png: tinted band, numbered eyebrow, large title +
   note behind a vertical rule, four navy photo cards (photo 393 : 341). Everything sits in the site grid
   (.av-container, 1132 px of content at ≥1280 → cards 271 px wide). */
.av-vu .av-vu-grp--photo {
	--vu-card: #061f31;
	/* Card corner radius = the homepage service tiles
	   (sections.css .av-services .av-service-tile: 4px). */
	--vu-card-radius: 4px;
	padding-block: clamp(32px, 3vw, 48px) 0;
	background: #f2f8fc;
}

.av-vu .av-vu-gp {
	display: flex;
	align-items: flex-end;
	gap: 16px clamp(32px, 5vw, 72px);
	margin-bottom: clamp(24px, 2.2vw, 34px);
}

.av-vu .av-vu-gp__t {
	display: grid;
	gap: clamp(10px, 1vw, 16px);
	flex: none; /* the title stays on one line, the note wraps */
	min-width: 0;
}

.av-vu .av-vu-grp--photo .av-vu-eb {
	gap: 16px;
	font-size: 13px;
	font-weight: 600;
	color: var(--vu-ink3);
}

.av-vu .av-vu-grp--photo .av-vu-eb::before {
	width: 40px;
}

.av-vu .av-vu-grp--photo h2 {
	font-size: clamp(34px, 4.3vw, 62px);
	line-height: 1;
	letter-spacing: -0.04em;
	color: var(--vu-ink);
}

.av-vu .av-vu-gp__note {
	flex: 0 1 auto;
	margin: 0 0 0.2em;
	padding: 4px 0 4px clamp(20px, 2vw, 32px);
	border-left: 1px solid #b8cbe1;
	font-size: clamp(15px, 1.1vw, 18px);
	line-height: 1.5;
	color: var(--vu-ink2);
}

/* Space under the cards (the former 28 px + 1 px rule, rule removed). */
.av-vu .av-vu-gp__box {
	padding-bottom: 29px;
}

.av-vu .av-vu-grp--photo + .av-vu-grp {
	padding-top: clamp(24px, 2.4vw, 36px);
}

.av-vu .av-vu-grid--photo {
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 16px;
}

/* Card: rounded like the homepage tiles; overflow: hidden (.av-vu-sc) clips
   the photo, its hover zoom and the navy block to the corners; isolation
   keeps the clip during the transform (Safari). */
.av-vu .av-vu-sc--photo {
	border: 0;
	border-radius: var(--vu-card-radius);
	isolation: isolate;
	background: var(--vu-card);
	color: #fff;
	transition: box-shadow 0.3s, opacity 0.3s, filter 0.3s;
}

.av-vu a.av-vu-sc--photo:hover {
	transform: none;
	box-shadow: 0 26px 48px -30px rgba(6, 31, 49, 0.6);
}

.av-vu .av-vu-sc--photo .av-vu-sc__ph {
	aspect-ratio: 393 / 341;
	background: var(--vu-card);
}

.av-vu .av-vu-sc--photo .av-vu-sc__ph img {
	object-position: 50% 30%;
	transition: transform 0.6s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.av-vu .av-vu-sc--photo[data-k="gruz"] .av-vu-sc__ph img {
	object-position: 50% 50%;
}

.av-vu a.av-vu-sc--photo:hover .av-vu-sc__ph img {
	transform: scale(1.04);
}

/* Light top shade so the white number reads on bright photos. */
.av-vu .av-vu-sc--photo .av-vu-sc__ph::after {
	background: linear-gradient(180deg, rgba(6, 31, 49, 0.38) 0%, rgba(6, 31, 49, 0) 26%);
}

.av-vu .av-vu-sc__num {
	position: absolute;
	top: 14px;
	left: 16px;
	z-index: 1;
	font-weight: 600;
	font-size: 15px;
	line-height: 1;
	letter-spacing: 0.02em;
	color: #fff;
	text-shadow: 0 1px 2px rgba(6, 31, 49, 0.4);
}

.av-vu .av-vu-sc--photo .av-vu-sc__badge {
	left: auto;
	right: 12px;
	top: 11px;
	height: 24px;
	padding: 0 8px;
	border-radius: 2px;
	font-size: 12px;
}

/* Filter tag («Для склада») — bottom left, clear of number and badge. */
.av-vu .av-vu-sc--photo .av-vu-sc__fit {
	top: auto;
	right: auto;
	left: 16px;
	bottom: 12px;
	border-radius: 2px;
}

.av-vu .av-vu-sc--photo .av-vu-sc__bd {
	gap: 10px;
	padding: 18px 20px 12px;
}

.av-vu .av-vu-sc--photo h3 {
	min-height: 2.36em; /* two lines: descriptions and CTAs line up */
	font-weight: 800;
	font-size: 21px;
	line-height: 1.18;
	letter-spacing: -0.02em;
	color: #fff;
}

.av-vu .av-vu-sc--photo p {
	min-height: 4.5em; /* three lines */
	font-size: 14px;
	line-height: 1.5;
	color: rgba(255, 255, 255, 0.8);
}

.av-vu .av-vu-sc--photo .av-vu-sc__go {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-top: auto;
	padding-top: 12px;
	border-top: 1px solid rgba(255, 255, 255, 0.22);
	font-weight: 700;
	font-size: 15px;
	color: #fff;
}

.av-vu .av-vu-sc__arr {
	display: inline-grid;
	place-items: center;
	flex: none;
	width: 34px;
	height: 34px;
	font-style: normal;
	color: #fff;
	transition: background-color 0.25s;
}

.av-vu .av-vu-sc--photo .av-vu-sc__go svg {
	width: 18px;
	height: 18px;
	stroke-width: 1.9;
	stroke-linecap: square;
	transition: transform 0.25s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.av-vu .av-vu-sc--photo.is-top .av-vu-sc__arr,
.av-vu a.av-vu-sc--photo:hover .av-vu-sc__arr {
	background: var(--vu-red);
}

.av-vu a.av-vu-sc--photo:hover .av-vu-sc__go svg {
	transform: translate(2px, -2px);
}

.av-vu a.av-vu-sc--photo:focus-visible {
	outline: 3px solid var(--vu-blue);
	outline-offset: 3px;
}

/* Scroll-in reveal (all-services.js adds .av-vu-rv and .is-in, once). */
@keyframes av-vu-up {
	from {
		opacity: 0;
		transform: translateY(18px);
	}
}

.av-vu.av-vu-rv .av-vu-grp--photo:not(.is-in) .av-vu-gp,
.av-vu.av-vu-rv .av-vu-grp--photo:not(.is-in) .av-vu-sc--photo {
	opacity: 0;
}

/* Keyframes only set the start, so a card dimmed by the object filter ends
   at its dimmed opacity. */
.av-vu.av-vu-rv .av-vu-grp--photo.is-in .av-vu-gp,
.av-vu.av-vu-rv .av-vu-grp--photo.is-in .av-vu-sc--photo {
	animation: av-vu-up 0.7s cubic-bezier(0.2, 0.7, 0.2, 1) backwards;
}

.av-vu.av-vu-rv .av-vu-grp--photo.is-in .av-vu-sc--photo:nth-child(1) { animation-delay: 0.1s; }
.av-vu.av-vu-rv .av-vu-grp--photo.is-in .av-vu-sc--photo:nth-child(2) { animation-delay: 0.2s; }
.av-vu.av-vu-rv .av-vu-grp--photo.is-in .av-vu-sc--photo:nth-child(3) { animation-delay: 0.3s; }
.av-vu.av-vu-rv .av-vu-grp--photo.is-in .av-vu-sc--photo:nth-child(4) { animation-delay: 0.4s; }

/* ≤1100: content < 960 px → two columns (cards ≥ 352 px). */
@media (max-width: 1100px) {
	.av-vu .av-vu-grid--photo {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.av-vu .av-vu-sc--photo h3 {
		font-size: 22px;
	}

	.av-vu .av-vu-sc--photo p {
		min-height: 3em;
		font-size: 15px;
	}
}

@media (max-width: 1023px) {
	.av-vu .av-vu-gp {
		flex-direction: column;
		align-items: flex-start;
	}

	.av-vu .av-vu-gp__t {
		flex: 0 1 auto;
	}
}

@media (max-width: 640px) {
	.av-vu .av-vu-grid--photo {
		grid-template-columns: minmax(0, 1fr);
	}

	.av-vu .av-vu-sc--photo h3,
	.av-vu .av-vu-sc--photo p {
		min-height: 0;
	}

	.av-vu .av-vu-sc--photo .av-vu-sc__arr {
		width: 44px;
		height: 44px;
	}

	.av-vu .av-vu-sc--photo .av-vu-sc__go {
		padding-top: 10px;
	}
}

/* ---------- feature group («Технические системы и пульт») ----------
   Mock-up /home/aleks/av-security-vse-uslugi-section-02/reference/
   approved-section-02.png (1512 px canvas, 1419 px of content → ×0.8 here):
   full-width blueprint background, numbered eyebrow + two-line title + note,
   feature block (photo 683 : panel 449), four white cards below. Content in
   the site grid (.av-container, 1132 px at ≥1280). Radius 4px = homepage
   service tiles (sections.css .av-service-tile), like the photo cards. */
.av-vu .av-vu-grp.av-vu-grp--tech {
	--vu-card-radius: 4px;
	padding-block: clamp(36px, 3.4vw, 52px) clamp(48px, 4.4vw, 64px);
	background: #f6fafe url("../images/vse-uslugi-tech-bg.webp") 50% 0 / cover no-repeat;
}

.av-vu .av-vu-grp--tech .av-vu-eb {
	gap: 16px;
	font-size: 13px;
	font-weight: 600;
	color: var(--vu-ink3);
}

.av-vu .av-vu-grp--tech .av-vu-eb::before {
	width: 40px;
}

.av-vu .av-vu-grp--tech h2 {
	font-size: clamp(32px, 3.9vw, 56px);
	line-height: 1.02;
	letter-spacing: -0.04em;
	color: var(--vu-ink);
}

/* Feature block */
.av-vu .av-vu-sc--feat {
	display: grid;
	grid-template-columns: minmax(0, 683fr) minmax(0, 449fr);
	border: 0;
	border-radius: var(--vu-card-radius);
	isolation: isolate;
	background: #eef5fc;
	color: var(--vu-ink);
	transition: box-shadow 0.3s, opacity 0.3s, filter 0.3s;
}

.av-vu .av-vu-sc--feat .av-vu-sc__ph {
	aspect-ratio: auto;
	min-height: 290px;
}

.av-vu .av-vu-sc--feat .av-vu-sc__ph img {
	object-position: 42% 50%;
}

.av-vu .av-vu-sc--feat .av-vu-sc__ph::after,
.av-vu .av-vu-sc--tile .av-vu-sc__ph::after {
	content: none;
}

.av-vu .av-vu-sc--feat .av-vu-sc__bd {
	justify-content: center;
	gap: 0;
	padding: 34px 32px 34px 40px;
}

.av-vu .av-vu-sc__eb {
	display: flex;
	align-items: center;
	gap: 14px;
	font-weight: 600;
	font-size: 12px;
	line-height: 1;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--vu-ink3);
}

.av-vu .av-vu-sc__eb::before {
	content: "";
	width: 24px;
	height: 3px;
	background: var(--vu-red);
}

.av-vu .av-vu-sc--feat h3 {
	margin-top: 14px;
	font-weight: 800;
	font-size: 27px;
	line-height: 1.15;
	letter-spacing: -0.02em;
}

.av-vu .av-vu-sc--feat p {
	margin-top: 10px;
	font-size: 15px;
	line-height: 1.5;
	color: var(--vu-ink2);
}

.av-vu .av-vu-feats {
	list-style: none;
	margin: 22px 0 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(3, auto);
	justify-content: space-between;
}

.av-vu .av-vu-feats li {
	display: flex;
	align-items: center;
	gap: 8px;
	padding-inline: 12px;
	border-left: 1px solid #d3dce8;
	white-space: nowrap; /* two lines each, as in the mock-up */
	font-size: 13px;
	line-height: 1.35;
	color: var(--vu-ink2);
}

.av-vu .av-vu-feats li:first-child {
	padding-left: 0;
	border-left: 0;
}

.av-vu .av-vu-feats li:last-child {
	padding-right: 0;
}

.av-vu .av-vu-feats img {
	flex: none;
	width: 24px;
	height: 24px;
}

.av-vu .av-vu-sc__btn {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	align-self: flex-start;
	min-height: 44px;
	margin-top: 24px;
	padding: 0 24px;
	border-radius: 2px;
	background: var(--vu-navy);
	color: #fff;
	font-weight: 700;
	font-size: 15px;
	transition: background-color 0.25s;
}

.av-vu .av-vu-sc__btn svg,
.av-vu .av-vu-sc__sq svg {
	width: 16px;
	height: 16px;
	fill: none;
	stroke: currentColor;
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
	transition: transform 0.25s cubic-bezier(0.2, 0.7, 0.2, 1);
}

/* White cards */
.av-vu .av-vu-grid--tiles {
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 16px;
	margin-top: 16px;
}

.av-vu .av-vu-sc--tile {
	border-radius: var(--vu-card-radius);
	isolation: isolate;
	box-shadow: 0 1px 2px rgba(14, 29, 58, 0.05);
	transition: box-shadow 0.3s, border-color 0.3s, opacity 0.3s, filter 0.3s;
}

.av-vu .av-vu-sc--tile .av-vu-sc__ph {
	aspect-ratio: 2 / 1;
}

.av-vu .av-vu-sc--tile .av-vu-sc__bd {
	gap: 8px;
	padding: 16px 16px 16px 18px;
}

.av-vu .av-vu-sc--tile h3 {
	font-weight: 800;
	font-size: 16px;
	line-height: 1.25;
	letter-spacing: -0.02em;
}

.av-vu .av-vu-sc--tile p {
	font-size: 13.5px;
	line-height: 1.5;
}

.av-vu .av-vu-sc--tile .av-vu-sc__go {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding-top: 8px;
	font-weight: 700;
	font-size: 14px;
	color: var(--vu-ink);
}

.av-vu .av-vu-sc__sq {
	display: inline-grid;
	place-items: center;
	flex: none;
	width: 34px;
	height: 34px;
	border-radius: 2px;
	background: var(--vu-red);
	color: #fff;
	font-style: normal;
	transition: background-color 0.25s;
}

/* Hover (linked cards only): photo zoom inside the radius, shadow, arrow. */
.av-vu .av-vu-sc--feat .av-vu-sc__ph img,
.av-vu .av-vu-sc--tile .av-vu-sc__ph img {
	transition: transform 0.6s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.av-vu a.av-vu-sc--feat:hover,
.av-vu a.av-vu-sc--tile:hover {
	transform: none;
	border-color: var(--vu-rule2);
	box-shadow: 0 22px 44px -28px rgba(14, 29, 58, 0.45);
}

.av-vu a.av-vu-sc--feat:hover .av-vu-sc__ph img,
.av-vu a.av-vu-sc--tile:hover .av-vu-sc__ph img {
	transform: scale(1.04);
}

.av-vu a.av-vu-sc--feat:hover .av-vu-sc__btn {
	background: var(--vu-red);
}

.av-vu a.av-vu-sc--tile:hover .av-vu-sc__sq {
	background: #b81e33;
}

.av-vu a.av-vu-sc--feat:hover .av-vu-sc__btn svg,
.av-vu a.av-vu-sc--tile:hover .av-vu-sc__sq svg {
	transform: translate(2px, -2px);
}

/* Scroll-in reveal (all-services.js §4): heading, feature, cards 1 → 4. */
.av-vu.av-vu-rv .av-vu-grp--tech:not(.is-in) .av-vu-gp,
.av-vu.av-vu-rv .av-vu-grp--tech:not(.is-in) .av-vu-sc--feat,
.av-vu.av-vu-rv .av-vu-grp--tech:not(.is-in) .av-vu-sc--tile {
	opacity: 0;
}

.av-vu.av-vu-rv .av-vu-grp--tech.is-in .av-vu-gp,
.av-vu.av-vu-rv .av-vu-grp--tech.is-in .av-vu-sc--feat,
.av-vu.av-vu-rv .av-vu-grp--tech.is-in .av-vu-sc--tile {
	animation: av-vu-up 0.7s cubic-bezier(0.2, 0.7, 0.2, 1) backwards;
}

.av-vu.av-vu-rv .av-vu-grp--tech.is-in .av-vu-sc--feat { animation-delay: 0.12s; }
.av-vu.av-vu-rv .av-vu-grp--tech.is-in .av-vu-sc--tile:nth-child(1) { animation-delay: 0.24s; }
.av-vu.av-vu-rv .av-vu-grp--tech.is-in .av-vu-sc--tile:nth-child(2) { animation-delay: 0.32s; }
.av-vu.av-vu-rv .av-vu-grp--tech.is-in .av-vu-sc--tile:nth-child(3) { animation-delay: 0.4s; }
.av-vu.av-vu-rv .av-vu-grp--tech.is-in .av-vu-sc--tile:nth-child(4) { animation-delay: 0.48s; }

/* ≤1100: content < 960 px → feature stacked, cards in two columns. */
@media (max-width: 1100px) {
	.av-vu .av-vu-sc--feat {
		grid-template-columns: minmax(0, 1fr);
	}

	.av-vu .av-vu-sc--feat .av-vu-sc__ph {
		aspect-ratio: 1942 / 809;
		min-height: 0;
	}

	.av-vu .av-vu-sc--feat .av-vu-sc__bd {
		padding: 30px 32px 32px;
	}

	.av-vu .av-vu-feats {
		justify-content: start;
	}

	.av-vu .av-vu-feats li {
		padding-inline: 20px;
	}

	.av-vu .av-vu-grid--tiles {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.av-vu .av-vu-sc--tile h3 {
		font-size: 19px;
	}

	.av-vu .av-vu-sc--tile p {
		font-size: 14.5px;
	}
}

@media (max-width: 1023px) {
	.av-vu .av-vu-grp.av-vu-grp--tech {
		background-size: 100% auto;
	}
}

@media (max-width: 640px) {
	.av-vu .av-vu-sc--feat .av-vu-sc__ph {
		aspect-ratio: 4 / 3;
	}

	.av-vu .av-vu-sc--feat .av-vu-sc__ph img {
		object-position: 46% 50%;
	}

	.av-vu .av-vu-sc--feat .av-vu-sc__bd {
		padding: 24px 20px;
	}

	.av-vu .av-vu-sc--feat h3 {
		font-size: 23px;
	}

	/* The three points: a vertical list, readable size kept. */
	.av-vu .av-vu-feats {
		grid-template-columns: minmax(0, 1fr);
		margin-top: 16px;
	}

	.av-vu .av-vu-feats li {
		white-space: normal;
		padding: 10px 0;
		border-left: 0;
		border-top: 1px solid #d3dce8;
		font-size: 14px;
	}

	.av-vu .av-vu-feats li:first-child {
		border-top: 0;
		padding-top: 0;
	}

	.av-vu .av-vu-feats br {
		display: none; /* one line each; the space before <br> remains */
	}

	.av-vu .av-vu-sc__btn {
		align-self: stretch;
		justify-content: center;
		min-height: 48px;
		margin-top: 16px;
	}

	.av-vu .av-vu-grid--tiles {
		grid-template-columns: minmax(0, 1fr);
	}

	.av-vu .av-vu-sc__sq {
		width: 44px;
		height: 44px;
	}
}

/* ---------- consulting group (section 04) ----------
   Mock-up /home/aleks/av-security-consulting-section/reference/
   consulting-approved-mockup.png (1556 px canvas; its 1374 px card row →
   1132 px here, ×0.82). Light office background over the whole section
   (assets/images/consulting/consulting-background.webp, holographic shield
   on the right), heading with the brand-blue «новые угрозы», two info panels
   over the background, four white cards: photo, dark icon tile overlapping
   the photo's lower edge, title, text, «Подробнее» + round arrow on one line.
   Content in the site grid (.av-container, 1132 px); radius 4px = homepage
   service tiles. */
.av-vu .av-vu-grp.av-vu-grp--cons {
	position: relative;
	isolation: isolate;
	padding-block: clamp(40px, 4.4vw, 64px) clamp(56px, 5vw, 72px);
	background: #f5f9fe url("../images/consulting/consulting-background.webp") 100% 0 / max(100%, 1180px) auto no-repeat;
}

/* Keeps the left (text) side light; the photo itself stays as it is. */
.av-vu .av-vu-grp--cons::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: linear-gradient(90deg, rgba(245, 249, 254, 0.75) 0%, rgba(245, 249, 254, 0.35) 38%, rgba(245, 249, 254, 0) 55%);
	pointer-events: none;
}

.av-vu .av-vu-ch {
	position: relative;
	min-height: 250px;
	margin-bottom: clamp(28px, 3vw, 40px);
}

.av-vu .av-vu-ch > * {
	margin: 0;
}

.av-vu .av-vu-grp--cons .av-vu-eb {
	gap: 16px;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.16em;
	color: var(--vu-ink2);
}

.av-vu .av-vu-grp--cons .av-vu-eb::before {
	width: 40px;
	height: 3px;
}

.av-vu .av-vu-ch h2 {
	margin-top: 22px;
	max-width: 620px;
	font-weight: 800;
	font-size: clamp(34px, 3.75vw, 54px);
	line-height: 1.04;
	letter-spacing: -0.04em;
	color: var(--vu-ink);
}

.av-vu .av-vu-ch h2 span {
	color: #0a5bff;
}

.av-vu .av-vu-ch__lead {
	margin-top: 22px;
	max-width: 560px;
	font-size: clamp(16px, 1.3vw, 18px);
	line-height: 1.55;
	color: var(--vu-ink2);
}

/* Two info panels over the background (desktop: on the photo's right). */
.av-vu .av-vu-ch__panels {
	list-style: none;
	padding: 0;
}

.av-vu .av-vu-ch__panel {
	position: absolute;
	display: grid;
	grid-template-columns: 12px auto;
	column-gap: 14px;
	align-items: center;
	padding: 12px 18px 12px 16px;
	border: 1px solid rgba(255, 255, 255, 0.9);
	border-radius: 6px;
	background: rgba(255, 255, 255, 0.82);
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
	box-shadow: 0 10px 28px -14px rgba(14, 50, 110, 0.45), 0 0 0 1px rgba(10, 91, 255, 0.06);
}

.av-vu .av-vu-ch__panel::before {
	content: "";
	grid-row: span 2;
	width: 12px;
	height: 12px;
	border: 2px solid #fff;
	border-radius: 50%;
	background: #005bff;
	box-shadow: 0 0 8px rgba(42, 142, 255, 0.6);
}

.av-vu .av-vu-ch__panel b {
	font-weight: 700;
	font-size: 14px;
	line-height: 1.3;
	color: var(--vu-ink);
}

.av-vu .av-vu-ch__panel span {
	font-size: 12.5px;
	line-height: 1.35;
	color: var(--vu-ink3);
}

.av-vu .av-vu-ch__panel--1 {
	left: 58%;
	top: 4px;
}

.av-vu .av-vu-ch__panel--2 {
	right: 0;
	top: 152px;
}

/* Cards */
.av-vu .av-vu-grid--cons {
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 16px;
}

.av-vu .av-vu-sc--cons {
	border: 1px solid #e3eaf5;
	border-radius: 4px;
	isolation: isolate;
	background: #fff;
	box-shadow: 0 14px 34px -24px rgba(14, 40, 90, 0.4);
	transition: transform 0.3s, box-shadow 0.3s, border-color 0.3s, opacity 0.3s, filter 0.3s;
}

.av-vu .av-vu-sc--cons .av-vu-sc__ph {
	aspect-ratio: 332 / 190;
}

.av-vu .av-vu-sc--cons .av-vu-sc__ph::after {
	content: none;
}

.av-vu .av-vu-sc--cons .av-vu-sc__ph img {
	transition: transform 0.6s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.av-vu .av-vu-sc--cons[data-k="audit"] .av-vu-sc__ph img { object-position: 45% 45%; }
.av-vu .av-vu-sc--cons[data-k="korp"] .av-vu-sc__ph img { object-position: 50% 30%; }
.av-vu .av-vu-sc--cons[data-k="pasp"] .av-vu-sc__ph img { object-position: 40% 40%; }
.av-vu .av-vu-sc--cons[data-k="bpla"] .av-vu-sc__ph img { object-position: 60% 40%; }

.av-vu .av-vu-cc__tags {
	position: absolute;
	top: 12px;
	left: 12px;
	z-index: 1;
	display: flex;
	gap: 8px;
}

.av-vu .av-vu-cc__num,
.av-vu .av-vu-cc__new {
	display: inline-flex;
	align-items: center;
	height: 26px;
	padding: 0 9px;
	border-radius: 13px;
	font-weight: 600;
	font-size: 13px;
	line-height: 1;
	color: #fff;
}

.av-vu .av-vu-cc__num {
	background: rgba(8, 22, 48, 0.55);
	-webkit-backdrop-filter: blur(4px);
	backdrop-filter: blur(4px);
}

.av-vu .av-vu-cc__new {
	padding: 0 12px;
	background: #075cff;
}

.av-vu .av-vu-sc--cons .av-vu-sc__fit {
	top: auto;
	bottom: 10px;
	right: 10px;
	border-radius: 2px;
}

.av-vu .av-vu-sc--cons .av-vu-sc__bd {
	position: relative;
	gap: 10px;
	padding: 36px 20px 18px;
}

/* Dark icon tile (the supplied SVG) half over the photo's lower edge. */
.av-vu .av-vu-cc__ic {
	position: absolute;
	top: -44px;
	left: 14px;
	width: 64px;
	height: 64px;
	transition: filter 0.3s;
}

.av-vu .av-vu-cc__ic img {
	display: block;
	width: 100%;
	height: 100%;
}

.av-vu .av-vu-sc--cons h3 {
	min-height: 2.5em; /* two lines: texts and links line up */
	font-weight: 800;
	font-size: 19px;
	line-height: 1.25;
	letter-spacing: -0.02em;
	color: var(--vu-ink);
}

.av-vu .av-vu-sc--cons p {
	font-size: 14.5px;
	line-height: 1.5;
	color: var(--vu-ink2);
}

.av-vu .av-vu-cc__go {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-top: auto;
	padding-top: 10px;
	font-weight: 700;
	font-size: 15px;
	color: #0a5bff;
}

.av-vu .av-vu-cc__go span {
	display: inline-flex;
	align-items: center;
	gap: 8px;
}

.av-vu .av-vu-cc__go svg {
	width: 18px;
	height: 18px;
	fill: none;
	stroke: currentColor;
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
	transition: transform 0.25s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.av-vu .av-vu-cc__go i {
	display: inline-grid;
	place-items: center;
	flex: none;
	width: 42px;
	height: 42px;
	border-radius: 50%;
	background: #f1f5ff;
	transition: background-color 0.25s, box-shadow 0.25s;
}

/* Hover (linked cards): small lift, stronger shadow, photo zoom, icon glow,
   arrows move right. */
.av-vu a.av-vu-sc--cons:hover {
	transform: translateY(-3px);
	border-color: #cfdcf0;
	box-shadow: 0 22px 44px -24px rgba(14, 40, 90, 0.5);
}

.av-vu a.av-vu-sc--cons:hover .av-vu-sc__ph img {
	transform: scale(1.04);
}

.av-vu a.av-vu-sc--cons:hover .av-vu-cc__ic {
	filter: drop-shadow(0 0 8px rgba(36, 141, 255, 0.65));
}

.av-vu a.av-vu-sc--cons:hover .av-vu-cc__go svg {
	transform: translateX(3px);
}

.av-vu a.av-vu-sc--cons:hover .av-vu-cc__go i {
	background: #e2ebff;
	box-shadow: 0 6px 16px -8px rgba(10, 91, 255, 0.6);
}

/* Scroll-in reveal (all-services.js §4): heading → lead → cards 1 → 4,
   panels fade in last. */
.av-vu.av-vu-rv .av-vu-grp--cons:not(.is-in) .av-vu-ch > *,
.av-vu.av-vu-rv .av-vu-grp--cons:not(.is-in) .av-vu-ch__panel,
.av-vu.av-vu-rv .av-vu-grp--cons:not(.is-in) .av-vu-sc--cons {
	opacity: 0;
}

@keyframes av-vu-cc-fade {
	from { opacity: 0; }
}

.av-vu.av-vu-rv .av-vu-grp--cons.is-in .av-vu-ch > :not(.av-vu-ch__panels),
.av-vu.av-vu-rv .av-vu-grp--cons.is-in .av-vu-sc--cons {
	animation: av-vu-up 0.55s cubic-bezier(0.2, 0.7, 0.2, 1) backwards;
}

.av-vu.av-vu-rv .av-vu-grp--cons.is-in .av-vu-ch h2 { animation-delay: 0.06s; }
.av-vu.av-vu-rv .av-vu-grp--cons.is-in .av-vu-ch__lead { animation-delay: 0.14s; }
.av-vu.av-vu-rv .av-vu-grp--cons.is-in .av-vu-sc--cons:nth-child(1) { animation-delay: 0.22s; }
.av-vu.av-vu-rv .av-vu-grp--cons.is-in .av-vu-sc--cons:nth-child(2) { animation-delay: 0.3s; }
.av-vu.av-vu-rv .av-vu-grp--cons.is-in .av-vu-sc--cons:nth-child(3) { animation-delay: 0.38s; }
.av-vu.av-vu-rv .av-vu-grp--cons.is-in .av-vu-sc--cons:nth-child(4) { animation-delay: 0.46s; }

.av-vu.av-vu-rv .av-vu-grp--cons.is-in .av-vu-ch__panel {
	animation: av-vu-cc-fade 0.6s ease-out 0.35s backwards;
}

.av-vu.av-vu-rv .av-vu-grp--cons.is-in .av-vu-ch__panel--2 {
	animation-delay: 0.45s;
}

/* ≤1100: two columns of cards; panels move under the lead. */
@media (max-width: 1100px) {
	.av-vu .av-vu-grid--cons {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 1023px) {
	.av-vu .av-vu-grp.av-vu-grp--cons {
		background-size: 900px auto;
	}

	.av-vu .av-vu-grp--cons::before {
		background: linear-gradient(180deg, rgba(245, 249, 254, 0.55) 0%, rgba(245, 249, 254, 0.85) 30%, #f5f9fe 55%);
	}

	.av-vu .av-vu-ch {
		min-height: 0;
	}

	.av-vu .av-vu-ch__panels {
		display: flex;
		flex-wrap: wrap;
		gap: 12px;
		margin-top: 24px;
	}

	.av-vu .av-vu-ch__panel {
		position: static;
	}
}

@media (max-width: 640px) {
	.av-vu .av-vu-grid--cons {
		grid-template-columns: minmax(0, 1fr);
	}

	.av-vu .av-vu-grp.av-vu-grp--cons {
		background-size: 640px auto;
	}

	.av-vu .av-vu-ch h2 br {
		display: none;
	}

	.av-vu .av-vu-ch__panels {
		flex-direction: column;
	}

	.av-vu .av-vu-sc--cons h3 {
		min-height: 0;
	}
}

/* ---------- complex security banner (section 03) ----------
   Mock-up /home/aleks/av-security-complex-security-icons/reference/
   complex-security-approved-mockup.png. Markup: av_security_all_services_complex()
   (inc/all-services.php). One banner in the site grid (1132 px), radius 4px =
   homepage service tiles. The campus photo covers the banner; a CSS gradient
   darkens the left for the copy. Photo, neon SVG and callouts share one
   «stage» box with the photo's ratio (2048 / 711), anchored right and as high
   as the banner, so the SVG (viewBox = photo pixels) and the callouts (% of
   the stage) stay on the building at every size.
   Overlay layout ≥1280 (content exactly 1132 px); below that the photo is a
   block under the copy and the callouts form a grid under the photo. */
.av-vu .av-vu-kompl {
	position: relative;
	isolation: isolate;
	padding-block: 8px clamp(48px, 4.4vw, 64px);
	background: #f6fafe; /* = section 02 */
}

/* Section 02's blueprint drawing (the same file) behind the banner, mirrored
   top to bottom on its own layer — scaleY(-1) flips this box only, never the
   section's content. Same base colour and sizing as .av-vu-grp--tech; the
   section is isolated, so z-index -1 keeps the layer behind the banner. */
.av-vu .av-vu-kompl::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: url("../images/vse-uslugi-tech-bg.webp") 50% 0 / cover no-repeat;
	transform: scaleY(-1);
	pointer-events: none;
}

@media (max-width: 1023px) {
	.av-vu .av-vu-kompl::before {
		background-size: 100% auto;
	}
}

.av-vu .av-vu-cx {
	--cx-navy: #00172e;
	--cx-neon: #3d8bff;
	--cx-neon-hi: #8fd0ff;
	--cx-u: 1; /* stroke scale: photo px per screen px differs per layout */
	position: relative;
	isolation: isolate;
	overflow: hidden;
	display: flex;
	align-items: center;
	height: 600px; /* fixed: callout positions are tuned for this stage size */
	border-radius: 4px;
	background: var(--cx-navy);
	color: #fff;
	transition: opacity 0.3s, filter 0.3s;
}

.av-vu.is-filtering .av-vu-cx.is-no {
	opacity: 0.45;
	filter: grayscale(0.7);
}

/* Copy */
.av-vu .av-vu-cx__copy {
	position: relative;
	z-index: 3;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	width: 530px;
	max-width: 100%;
	padding: 40px 0 40px 56px;
}

.av-vu .av-vu-cx__copy > * {
	margin: 0;
}

.av-vu .av-vu-cx__eb {
	display: flex;
	align-items: center;
	gap: 14px;
	font-weight: 600;
	font-size: 13px;
	line-height: 1;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: #bacbdf;
}

.av-vu .av-vu-cx__eb::before {
	content: "";
	width: 36px;
	height: 3px;
	background: var(--vu-red);
}

.av-vu .av-vu-cx__badge {
	margin-top: 16px;
	padding: 7px 16px;
	border-radius: 999px;
	background: var(--vu-red);
	font-weight: 600;
	font-size: 14px;
	line-height: 1.2;
	color: #fff;
}

.av-vu .av-vu-cx h2 {
	margin-top: 14px;
	font-weight: 800;
	font-size: 48px;
	line-height: 1;
	letter-spacing: -0.04em;
	text-wrap: wrap;
	color: #fff;
}

.av-vu .av-vu-cx__lead {
	margin-top: 16px;
	font-size: 15.5px;
	line-height: 1.55;
	color: #c4d1e3;
}

/* Five directions: icon + label, separators only between neighbours.
   Rows are independent (flex): Физическая охрана | Видеонаблюдение, then
   СКУД | Пультовая охрана | Аудит — a zero-height full-width item (::after,
   order 3) breaks the line after the second entry. Equal 18 px on both
   sides of every separator, icons and labels on one axis. */
.av-vu .av-vu-cx__svc {
	list-style: none;
	margin-top: 22px;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
}

.av-vu .av-vu-cx__svc::after {
	content: "";
	order: 3;
	flex-basis: 100%;
	height: 12px;
}

.av-vu .av-vu-cx__svc li {
	order: 4;
	display: flex;
	align-items: center;
	gap: 10px;
	height: 36px;
	padding-inline: 18px;
	border-left: 1px solid rgba(124, 152, 196, 0.4);
	font-weight: 600;
	font-size: 13.5px;
	line-height: 1.25;
	white-space: nowrap;
	color: #fff;
}

.av-vu .av-vu-cx__svc li:nth-child(1) { order: 1; }
.av-vu .av-vu-cx__svc li:nth-child(2) { order: 2; }

.av-vu .av-vu-cx__svc li:nth-child(1),
.av-vu .av-vu-cx__svc li:nth-child(3) {
	padding-left: 0;
	border-left: 0;
}

.av-vu .av-vu-cx__svc img {
	flex: none;
	width: 28px;
	height: 28px;
	transition: filter 0.25s;
}

.av-vu .av-vu-cx__svc li:hover img {
	filter: drop-shadow(0 0 6px rgba(95, 170, 255, 0.85));
}

.av-vu .av-vu-cx__btn {
	display: inline-flex;
	align-items: center;
	gap: 14px;
	min-height: 54px;
	margin-top: 24px;
	padding: 0 28px;
	border-radius: 2px;
	background: var(--av-primary, #1a5fb4);
	color: #fff;
	font-weight: 600;
	font-size: 16px;
	text-decoration: none;
	transition: background-color 0.25s;
}

.av-vu a.av-vu-cx__btn:hover {
	background: var(--av-primary-hover, #12488c);
}

.av-vu .av-vu-cx__arr {
	flex: none;
	width: 20px;
	height: 20px;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.8;
	stroke-linecap: round;
	stroke-linejoin: round;
	transition: transform 0.25s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.av-vu a.av-vu-cx__btn:hover .av-vu-cx__arr {
	transform: translateX(4px);
}

.av-vu .av-vu-cx :focus-visible {
	outline-color: #fff;
}

/* Photo and overlay layers */
.av-vu .av-vu-cx__visual,
.av-vu .av-vu-cx__media,
.av-vu .av-vu-cx__fx {
	position: absolute;
	inset: 0;
}

.av-vu .av-vu-cx__visual {
	z-index: 1;
}

.av-vu .av-vu-cx__media {
	overflow: hidden;
}

/* Left gradient over the photo (deep navy → transparent). */
.av-vu .av-vu-cx__media::after {
	content: "";
	position: absolute;
	inset: 0;
	background:
		linear-gradient(90deg, var(--cx-navy) 0%, var(--cx-navy) 30%, rgba(0, 23, 46, 0.9) 40%, rgba(0, 23, 46, 0.55) 50%, rgba(0, 23, 46, 0.15) 60%, rgba(0, 23, 46, 0) 68%),
		linear-gradient(180deg, rgba(0, 23, 46, 0.35) 0%, rgba(0, 23, 46, 0) 18%);
}

/* Lines fade out under the copy instead of crossing it. */
.av-vu .av-vu-cx__fx {
	-webkit-mask-image: linear-gradient(90deg, transparent 36%, #000 50%);
	mask-image: linear-gradient(90deg, transparent 36%, #000 50%);
}

.av-vu .av-vu-cx__stage,
.av-vu .av-vu-cx__callouts {
	position: absolute;
	top: 0;
	right: 0;
	height: 100%;
	aspect-ratio: 2048 / 711;
}

.av-vu .av-vu-cx__stage img {
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
}

.av-vu .av-vu-cx__svg {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	overflow: visible;
}

/* Neon in three layers with identical geometry (the same path data):
   1. outer glow — own SVG, blurred once as a whole (CSS filter): a wide
      electric-blue bloom #087CFF + a tighter bright halo;
   2. bright neon #00A6FF, crisp;
   3. glowing core #E0FAFF.
   The whole light layer (.av-vu-cx__fx) is blended with «screen» over the
   photo, so it adds light like real neon instead of being painted on top.
   Widths are photo px × --cx-u (desktop: core ≈1.4 px, neon ≈3 px, halo
   ≈7 px, bloom ≈17 px before the blur). */
.av-vu .av-vu-cx__fx {
	mix-blend-mode: screen;
}

.av-vu .av-vu-cx__svg--halo {
	filter: blur(6px);
}

.av-vu .av-vu-cx .cx-l {
	fill: none;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.av-vu .av-vu-cx .cx-bloom .cx-l {
	stroke: #087cff;
	stroke-width: calc(20 * var(--cx-u));
	opacity: 0.9;
}

.av-vu .av-vu-cx .cx-halo .cx-l {
	stroke: #1ea8ff;
	stroke-width: calc(8 * var(--cx-u));
}

.av-vu .av-vu-cx .cx-neon .cx-l {
	stroke: #00a6ff;
	stroke-width: calc(3.6 * var(--cx-u));
}

.av-vu .av-vu-cx .cx-core .cx-l {
	stroke: #e0faff;
	stroke-width: calc(1.6 * var(--cx-u));
}

.av-vu .av-vu-cx .cx-bloom .cx-lead,
.av-vu .av-vu-cx .cx-halo .cx-lead {
	opacity: 0.7;
}

/* Points: white core, blue ring, soft glow (layer 1); a flash circle lights
   up when the travelling pulse passes the point. */
.av-vu .av-vu-cx .cx-n circle {
	transform: scale(var(--cx-u));
	transform-box: fill-box;
	transform-origin: center;
}

.av-vu .av-vu-cx .cx-n__halo {
	fill: #1ea8ff;
	transition: fill 0.25s;
}

.av-vu .av-vu-cx .cx-n__ring {
	fill: rgba(0, 166, 255, 0.45);
	stroke: #49c6ff;
	stroke-width: 2;
}

.av-vu .av-vu-cx .cx-n__core {
	fill: #ffffff;
}

.av-vu .av-vu-cx .cx-n__flash {
	fill: #a8eaff;
	opacity: 0;
}

/* Energy Pulse: one small dot (white core, electric-blue ring, soft blue
   glow from a radial gradient — no filter) moving along the route. Hidden
   until all-services.js starts it (.is-pulse) after the power-on. */
.av-vu .av-vu-cx .cx-pulse {
	opacity: 0;
	transition: opacity 0.4s;
}

.av-vu .av-vu-cx.is-pulse .cx-pulse {
	opacity: 1;
}

.av-vu .av-vu-cx .cx-pulse circle {
	transform: scale(var(--cx-u));
	transform-box: fill-box;
	transform-origin: center;
}

.av-vu .av-vu-cx .cx-pulse__ring {
	fill: #c4f2ff;
}

.av-vu .av-vu-cx .cx-pulse__core {
	fill: #ffffff;
}

/* Callout ↔ point: hovering a callout lights its point. */
.av-vu .av-vu-cx:has(.av-vu-cx__co--video:hover) .cx-n--video .cx-n__halo,
.av-vu .av-vu-cx:has(.av-vu-cx__co--skud:hover) .cx-n--skud .cx-n__halo,
.av-vu .av-vu-cx:has(.av-vu-cx__co--pult:hover) .cx-n--pult .cx-n__halo,
.av-vu .av-vu-cx:has(.av-vu-cx__co--sign:hover) .cx-n--sign .cx-n__halo {
	fill: #8fdcff;
}

/* Callouts */
.av-vu .av-vu-cx__callouts {
	z-index: 2;
	list-style: none;
	margin: 0;
	padding: 0;
	pointer-events: none;
}

.av-vu .av-vu-cx__co {
	position: absolute;
	width: 250px;
	pointer-events: auto;
}

/* Photo px → % of the stage (2048 × 711). Video/СКУД hang above their roof
   points (box bottom at y 196 / 253), «Пультовая охрана» stands on its
   perimeter point (bottom at y 572), the alarm callout hangs below the
   side-facade point (top at y 590). */
.av-vu .av-vu-cx__co--video { left: 65.67%; top: 16.88%; }
.av-vu .av-vu-cx__co--skud  { left: 83.01%; top: 24.89%; }
.av-vu .av-vu-cx__co--pult  { left: 65.67%; bottom: 19.55%; }
.av-vu .av-vu-cx__co--sign  { left: 83.01%; top: 82.98%; }

.av-vu .av-vu-cx__co-in {
	display: flex;
	align-items: stretch;
	position: relative;
	min-height: 64px;
	border: 1px solid #3fb4ff;
	border-radius: 4px;
	background: rgba(3, 28, 64, 0.8);
	box-shadow: 0 0 0 1px rgba(0, 166, 255, 0.35), 0 0 6px rgba(120, 210, 255, 0.5), 0 0 24px rgba(8, 124, 255, 0.7), inset 0 0 24px rgba(8, 124, 255, 0.3);
	color: #fff;
	text-decoration: none;
	transition: border-color 0.25s, box-shadow 0.25s;
}

/* Border shimmer: a light streak runs once along the frame when the pulse
   passes the callout's point (border-only via the mask; nothing moves). */
.av-vu .av-vu-cx__co-in::after {
	content: "";
	position: absolute;
	inset: -1px;
	padding: 1px;
	border-radius: inherit;
	background: linear-gradient(100deg, transparent 0 42%, rgba(224, 250, 255, 0.95) 50%, transparent 58% 100%) 140% 0 / 260% 100% no-repeat;
	-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
	-webkit-mask-composite: xor;
	mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
	mask-composite: exclude;
	opacity: 0;
	pointer-events: none;
}

.av-vu .av-vu-cx__co-ic {
	display: grid;
	place-items: center;
	flex: none;
	width: 56px;
	border-right: 1px solid rgba(90, 195, 255, 0.8);
	box-shadow: 1px 0 8px -2px rgba(8, 124, 255, 0.9);
}

.av-vu .av-vu-cx__co-ic img {
	width: 30px;
	height: 30px;
}

.av-vu .av-vu-cx__co-tx {
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 3px;
	flex: 1;
	min-width: 0;
	padding: 10px 6px 10px 14px;
}

.av-vu .av-vu-cx__co-tx b {
	font-weight: 700;
	font-size: 14.5px;
	line-height: 1.2;
}

.av-vu .av-vu-cx__co-tx small {
	font-size: 12.5px;
	line-height: 1.3;
	color: #c3d3ea;
}

.av-vu .av-vu-cx__co .av-vu-cx__arr {
	align-self: center;
	width: 18px;
	height: 18px;
	margin-right: 12px;
	color: #d6e6ff;
}

.av-vu .av-vu-cx__co:hover .av-vu-cx__co-in {
	border-color: #a8eaff;
	box-shadow: 0 0 0 1px rgba(0, 166, 255, 0.5), 0 0 8px rgba(160, 225, 255, 0.7), 0 0 32px rgba(8, 124, 255, 0.85), inset 0 0 28px rgba(8, 124, 255, 0.38);
}

.av-vu .av-vu-cx__co:hover .av-vu-cx__arr {
	transform: translateX(3px);
}

/* ---------- section 03 animation ----------
   One state, one timeline. all-services.js adds .is-anim when the banner is
   still below the viewport (motion allowed; no flash on reload) and
   .is-system-active once — from a single IntersectionObserver hit — when it
   comes into view. POWER ON: the neon layers, the points (inside those
   layers) and the four callouts all start at 0 and are fully on at 0.6 s;
   no delays, no line-by-line drawing. ACTIVE: everything stays on; only the
   outer-glow layer breathes slowly (opacity). Without JS / with reduced
   motion the banner is shown directly in the ACTIVE look. */
@keyframes av-vu-cx-power {
	from { opacity: 0; }
}

/* Outer glow: overshoots a little while powering on, then settles. */
@keyframes av-vu-cx-surge {
	from { opacity: 0; }
}

@keyframes av-vu-cx-panel {
	from { opacity: 0; transform: scale(0.97); }
}

@keyframes av-vu-cx-text {
	from { opacity: 0; }
}

@keyframes av-vu-cx-glow {
	0%, 100% { opacity: 1; }
	50% { opacity: 0.86; }
}

/* LIGHT SWEEP cycle 3.6 s: the head runs the whole route in 62 % (≈2.2 s,
   constant speed), then rests. Points and callouts flash when it passes. */
/* Point flash and callout-frame shimmer when the Energy Pulse passes
   (7.5 s cycle, same clock as the dot). */
@keyframes av-vu-cx-flash {
	0% { opacity: 0; }
	2% { opacity: 0.95; }
	9%, 100% { opacity: 0; }
}

@keyframes av-vu-cx-shimmer {
	0% { opacity: 1; background-position: 140% 0; }
	8% { opacity: 1; background-position: -40% 0; }
	9%, 100% { opacity: 0; background-position: -40% 0; }
}

.av-vu .av-vu-cx.is-anim:not(.is-system-active) .av-vu-cx__fx,
.av-vu .av-vu-cx.is-anim:not(.is-system-active) .av-vu-cx__co,
.av-vu .av-vu-cx.is-anim:not(.is-system-active) .av-vu-cx__copy {
	opacity: 0;
}

.av-vu .av-vu-cx.is-system-active .av-vu-cx__copy {
	animation: av-vu-cx-text 0.6s ease-out backwards;
}

.av-vu .av-vu-cx.is-system-active .av-vu-cx__svg--neon {
	animation: av-vu-cx-power 0.6s cubic-bezier(0.3, 0, 0.2, 1) backwards;
}

.av-vu .av-vu-cx.is-system-active .av-vu-cx__co {
	transform-origin: center;
	animation: av-vu-cx-panel 0.6s cubic-bezier(0.3, 0, 0.2, 1) backwards;
}

/* ACTIVE: steady, bright; the glow layer breathes 5 s (opacity only,
   1 ↔ 0.86 — never dim); the Energy Pulse runs the route every 7.5 s. */
.av-vu .av-vu-cx__svg--halo {
	will-change: opacity;
}

.av-vu .av-vu-cx.is-pulse .cx-n__flash {
	animation: av-vu-cx-flash 7.5s ease-out calc(var(--f) * 6s) infinite;
}

.av-vu .av-vu-cx.is-pulse .av-vu-cx__co-in::after {
	animation: av-vu-cx-shimmer 7.5s ease-in-out calc(var(--f) * 6s) infinite;
}

.av-vu .av-vu-cx:not(.is-anim) .av-vu-cx__svg--halo {
	animation: av-vu-cx-glow 5s ease-in-out infinite;
}

.av-vu .av-vu-cx.is-system-active .av-vu-cx__svg--halo {
	animation: av-vu-cx-surge 0.6s cubic-bezier(0.3, 0, 0.2, 1) backwards, av-vu-cx-glow 5s ease-in-out 0.6s infinite;
}

/* ---------- section 03: stacked layout (< 1280: content < 1132 px) ---------- */
@media (max-width: 1279px) {
	.av-vu .av-vu-cx {
		--cx-u: 1.35;
		display: block;
		height: auto;
	}

	.av-vu .av-vu-cx__copy {
		width: auto;
		padding: 40px 40px 32px;
	}

	.av-vu .av-vu-cx h2 {
		font-size: clamp(34px, 5vw, 48px);
	}

	.av-vu .av-vu-cx__lead {
		max-width: 62ch;
	}

	/* Photo as its own wide block; the whole building stays in view. */
	.av-vu .av-vu-cx__visual {
		position: relative;
		inset: auto;
		aspect-ratio: 16 / 8;
	}

	.av-vu .av-vu-cx__media::after {
		background: linear-gradient(180deg, var(--cx-navy) 0%, rgba(0, 23, 46, 0) 16%, rgba(0, 23, 46, 0) 84%, var(--cx-navy) 100%);
	}

	.av-vu .av-vu-cx__fx {
		-webkit-mask-image: none;
		mask-image: none;
	}

	.av-vu .av-vu-cx .cx-lead {
		display: none;
	}

	/* Callouts under the photo, in a grid. */
	.av-vu .av-vu-cx__callouts {
		position: relative;
		top: auto;
		right: auto;
		height: auto;
		aspect-ratio: auto;
		display: grid;
		grid-template-columns: repeat(4, minmax(0, 1fr));
		gap: 12px;
		padding: 8px 24px 28px;
		pointer-events: auto;
	}

	.av-vu .av-vu-cx__co {
		position: static;
		width: auto;
	}

	.av-vu .av-vu-cx__co-in {
		height: 100%;
	}
}

@media (max-width: 900px) {
	.av-vu .av-vu-cx {
		--cx-u: 1.65;
	}

	.av-vu .av-vu-cx__callouts {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 640px) {
	.av-vu .av-vu-cx {
		--cx-u: 2.4;
	}

	.av-vu .av-vu-cx__copy {
		padding: 28px 20px 24px;
	}

	.av-vu .av-vu-cx__eb {
		font-size: 12px;
		letter-spacing: 0.1em;
	}

	.av-vu .av-vu-cx__lead {
		font-size: 15px;
	}

	/* Directions: two columns, separators kept between neighbours. */
	.av-vu .av-vu-cx__svc {
		display: grid;
		grid-template-columns: repeat(2, auto);
		justify-content: start;
		row-gap: 8px;
	}

	.av-vu .av-vu-cx__svc::after {
		content: none;
	}

	.av-vu .av-vu-cx__svc li,
	.av-vu .av-vu-cx__svc li:nth-child(1),
	.av-vu .av-vu-cx__svc li:nth-child(2) {
		order: 0;
	}

	.av-vu .av-vu-cx__svc li {
		gap: 8px;
		height: auto;
		min-height: 36px;
		padding-inline: 12px;
		white-space: normal;
		font-size: 13px;
	}

	.av-vu .av-vu-cx__svc img {
		width: 24px;
		height: 24px;
	}

	.av-vu .av-vu-cx__svc li:nth-child(2n + 1) {
		padding-left: 0;
		border-left: 0;
	}


	.av-vu .av-vu-cx__btn {
		align-self: stretch;
		justify-content: center;
		gap: 10px;
		padding: 0 12px;
		font-size: 14px;
	}

	/* 16:9 still shows the whole building (it spans the right 59% of the photo). */
	.av-vu .av-vu-cx__visual {
		aspect-ratio: 16 / 9;
	}

	.av-vu .av-vu-cx__callouts {
		grid-template-columns: minmax(0, 1fr);
		gap: 10px;
		padding: 4px 20px 24px;
	}
}

/* Very narrow phones: the five directions in one column. */
@media (max-width: 379px) {
	.av-vu .av-vu-cx__svc {
		grid-template-columns: minmax(0, 1fr);
		row-gap: 6px;
	}

	.av-vu .av-vu-cx__svc li {
		min-height: 34px;
		padding-left: 0;
		border-left: 0;
	}
}

/* ---------- two-question picker ---------- */
.av-vu .av-vu-pick {
	display: grid;
	grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
	gap: 48px;
	align-items: start;
}

@media (max-width: 960px) {
	.av-vu .av-vu-pick {
		grid-template-columns: minmax(0, 1fr);
		gap: 28px;
	}
}

.av-vu .av-vu-contact {
	display: grid;
	gap: 14px;
	margin-top: 8px;
}

.av-vu .av-vu-contact div {
	display: grid;
	gap: 2px;
}

.av-vu .av-vu-contact small {
	font-size: 12.5px;
	color: var(--vu-on2);
}

.av-vu .av-vu-contact a {
	font-weight: 600;
	font-size: 20px;
	line-height: 1.3;
	color: #fff;
	text-decoration: none;
}

.av-vu .av-vu-pcard {
	padding: 28px;
	border-radius: 12px;
	background: var(--vu-bg);
	color: var(--vu-ink);
	display: grid;
	gap: 18px;
}

.av-vu .av-vu-pcard :focus-visible {
	outline-color: var(--vu-blue);
}

.av-vu .av-vu-pstep {
	display: grid;
	gap: 10px;
}

.av-vu .av-vu-pstep__k {
	display: flex;
	align-items: center;
	gap: 10px;
	font-weight: 700;
	font-size: 16px;
	line-height: 1.3;
}

.av-vu .av-vu-pstep__k i {
	width: 26px;
	height: 26px;
	border-radius: 50%;
	display: grid;
	place-items: center;
	font-weight: 700;
	font-size: 12px;
	line-height: 1;
	font-style: normal;
	background: var(--vu-navy);
	color: #fff;
}

.av-vu .av-vu-popts {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.av-vu .av-vu-popts button {
	height: auto;
	min-height: 40px;
	padding: 8px 16px;
	text-align: left;
}

.av-vu .av-vu-prec {
	display: grid;
	gap: 10px;
	padding-top: 16px;
	border-top: 1px solid var(--vu-rule);
}

.av-vu .av-vu-prec__res,
.av-vu .av-vu-pform {
	display: grid;
	gap: 10px;
}

.av-vu .av-vu-prec__k {
	font-weight: 600;
	font-size: 12px;
	line-height: 1;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--vu-ink3);
}

.av-vu .av-vu-prec__lbl {
	margin-top: 6px;
}

.av-vu .av-vu-prec ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 6px;
}

.av-vu .av-vu-prec li > a,
.av-vu .av-vu-prec li > span {
	display: flex;
	justify-content: space-between;
	gap: 12px;
	padding: 12px 14px;
	border-radius: 8px;
	background: var(--vu-tint);
	text-decoration: none;
	font-weight: 600;
	font-size: 15px;
	color: var(--vu-ink);
}

.av-vu .av-vu-prec li small {
	font-weight: 400;
	color: var(--vu-ink3);
	font-size: 13px;
	white-space: nowrap;
}

.av-vu .av-vu-prec li > a:hover {
	background: #e8eef8;
}

.av-vu .av-vu-prow {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	gap: 8px;
}

.av-vu .av-vu-prow input {
	height: 48px;
	padding: 0 14px;
	border-radius: 6px;
	border: 1px solid var(--vu-rule2);
	background: var(--vu-bg);
	color: var(--vu-ink);
	font-size: 15.5px;
	min-width: 0;
}

.av-vu .av-vu-prow input:focus {
	outline: none;
	border-color: var(--vu-blue);
	box-shadow: 0 0 0 3px rgba(36, 85, 195, 0.15);
}

.av-vu .av-vu-prow input[aria-invalid="true"] {
	border-color: var(--vu-red);
}

@media (max-width: 480px) {
	.av-vu .av-vu-prow {
		grid-template-columns: minmax(0, 1fr);
	}
}

.av-vu .av-vu-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	height: 48px;
	padding: 0 22px;
	border-radius: 4px;
	border: 0;
	cursor: pointer;
	font-weight: 600;
	font-size: 15px;
	line-height: 1;
	white-space: nowrap;
	background: var(--vu-blue);
	color: #fff;
	transition: background 0.2s;
}

.av-vu .av-vu-btn:hover {
	background: var(--vu-blue-h);
}

.av-vu .av-vu-btn[disabled] {
	opacity: 0.6;
	cursor: progress;
}

.av-vu .av-vu-agree {
	display: flex;
	gap: 10px;
	align-items: flex-start;
	font-size: 12.5px;
	line-height: 1.45;
	color: var(--vu-ink3);
}

.av-vu .av-vu-agree input {
	margin: 2px 0 0;
	accent-color: var(--vu-blue);
	width: 16px;
	height: 16px;
	flex: none;
}

.av-vu .av-vu-agree a {
	color: var(--vu-blue);
	text-decoration: underline;
}

.av-vu .av-vu-agree.is-invalid {
	color: var(--vu-red);
}

.av-vu .av-vu-hp {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.av-vu .av-vu-pnote {
	margin: 0;
	font-size: 12.5px;
	color: var(--vu-ink3);
}

.av-vu .av-vu-pnote.is-err {
	color: var(--vu-red);
}

.av-vu .av-vu-pnote a {
	color: inherit;
	font-weight: 600;
}

.av-vu .av-vu-pempty {
	margin: 0;
	font-size: 14.5px;
	color: var(--vu-ink3);
}

.av-vu .av-vu-pok {
	display: grid;
	gap: 6px;
	padding: 14px 16px;
	border-radius: 8px;
	background: rgba(31, 143, 90, 0.08);
	border: 1px solid rgba(31, 143, 90, 0.3);
}

.av-vu .av-vu-pok strong {
	font-size: 16px;
	color: var(--vu-ink);
}

.av-vu .av-vu-pok p {
	margin: 0;
	font-size: 14px;
	color: var(--vu-ink2);
}

/* ---------- motion ---------- */
@media (prefers-reduced-motion: reduce) {
	.av-vu *,
	.av-vu *::before,
	.av-vu *::after {
		animation: none !important;
		transition: none !important;
	}
}