/*
 * AV-Security — homepage sections (after the Hero)
 * ----------------------------------------------------------------------------
 * Styles for the new homepage sections ONLY. Header and Hero live in main.css
 * and are not touched here. Colours, container width and gutters reuse the
 * tokens defined in main.css (--av-container, --av-ink, --av-ink-deep,
 * --av-primary, --av-primary-hover, --av-accent, --av-hairline) — no second
 * design system.
 */

/* ==========================================================================
   Shared section primitives
   ========================================================================== */

.av-section {
	--av-section-pt: clamp(4.5rem, 9vw, 8rem);
	--av-section-pb: clamp(4.5rem, 9vw, 8rem);
	--av-ink-muted: rgba(11, 31, 51, 0.72); /* --av-ink at 72% */

	padding-block: var(--av-section-pt) var(--av-section-pb);
	background-color: #fff;
	color: var(--av-ink);
}

/* Sections are full-bleed siblings of the Hero inside the constrained <main>;
   drop the block-gap margin so bands butt up against each other. */
.wp-block-group.av-section {
	margin-block: 0;
}

/* Content container. Same left/right edges as the Hero content:
   - ≤768px: the spacing-50 gutter (Hero mobile rule);
   - ≥769px: the Hero desktop formula — --av-container centred with the
     spacing-50 inner padding, floored at 3 × spacing-50.
   100% here is the full-bleed section width, exactly as in the Hero. */
.av-section .av-container {
	box-sizing: border-box;
	width: 100%;
	max-width: none;
	margin-inline: 0;
	padding-inline: var(--wp--preset--spacing--50);
}

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

/* Flow-layout block gap is replaced by explicit spacing inside sections. */
.av-section .av-container > *,
.av-section .av-section__head > *,
.av-section .av-section__head > * > * {
	margin-block: 0;
}

/* Section heading: left-aligned on the Hero / logo line. */
.av-section .av-section__head {
	max-width: 46rem;
	margin-bottom: clamp(2.75rem, 5vw, 4.5rem);
}

/* Split heading: title block left, lead + text link right (desktop). */
.av-section .av-section__head--split {
	display: grid;
	gap: 1.25rem;
	max-width: none;
}

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

/* Brand eyebrow — same treatment as the Hero eyebrow (accent rule + tracked
   uppercase). */
.av-section .av-section__eyebrow {
	display: flex;
	align-items: center;
	gap: 0.85rem;
	margin-bottom: 1.1rem;
	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-section .av-section__eyebrow::before {
	content: "";
	flex: 0 0 auto;
	width: 2.25rem;
	height: 2px;
	background: var(--av-accent);
}

.av-section .av-section__title {
	font-size: clamp(1.75rem, 1.15rem + 2vw, 2.625rem);
	font-weight: 700;
	line-height: 1.12;
	letter-spacing: -0.015em;
	color: var(--av-ink);
}

.av-section .av-section__lead {
	max-width: 36rem;
	font-size: 1rem;
	line-height: 1.65;
	color: var(--av-ink-muted);
}

/* "Все услуги →" / "Подробнее →" text link with a nudging arrow. */
.av-section .av-link-more {
	margin: 0;
	font-size: 0.95rem;
	font-weight: 600;
	line-height: 1.4;
}

.av-section .av-link-more a {
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
	color: var(--av-ink);
	text-decoration: none;
	transition: color 0.2s ease;
}

.av-section .av-link-more__arrow {
	display: inline-block;
	font-size: 1.2em;
	line-height: 1;
	color: var(--av-accent);
	transition: transform 0.3s ease;
}

.av-section .av-link-more a:hover,
.av-section .av-link-more a:focus-visible {
	color: var(--av-primary);
	text-decoration: none;
}

.av-section .av-link-more a:hover .av-link-more__arrow,
.av-section .av-link-more a:focus-visible .av-link-more__arrow {
	transform: translateX(4px);
}

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

/* ==========================================================================
   02 · Services (white band, photo cards)
   ========================================================================== */

.av-services {
	/* Compact band: mobile 38/38 → tablet 42/44 → desktop 46/52. */
	--av-section-pt: 2.375rem;
	--av-section-pb: 2.375rem;
}

@media (min-width: 600px) {
	.av-services {
		--av-section-pt: 2.625rem;
		--av-section-pb: 2.75rem;
	}
}

@media (min-width: 1200px) {
	.av-services {
		--av-section-pt: 2.875rem;
		--av-section-pb: 3.25rem;
	}
}

/* Heading → cards: mobile 23px → tablet 27px → desktop 30px. */
.av-services .av-section__head {
	margin-bottom: 1.4375rem;
}

@media (min-width: 600px) {
	.av-services .av-section__head {
		margin-bottom: 1.6875rem;
	}
}

@media (min-width: 1200px) {
	.av-services .av-section__head {
		margin-bottom: 1.875rem;
	}
}

.av-services .av-section__head-aside {
	display: grid;
	gap: 0.9rem;
	justify-items: start;
}

/* "Все услуги →" in the brand blue; arrow follows the link colour. */
.av-services .av-section__head .av-link-more a {
	color: var(--av-primary);
}

.av-services .av-section__head .av-link-more a:hover,
.av-services .av-section__head .av-link-more a:focus-visible {
	color: var(--av-primary-hover);
}

.av-services .av-section__head .av-link-more__arrow {
	color: currentColor;
}

/* ------------------------------------------------------------ Card grid
   <600      one column
   600–1199  two columns, physical card spans both
   ≥1200     physical card (≈43%) spanning two rows + 2×2 on the right
   Below 1200px each card sets its own height (rows are auto), so the taller
   physical card never overlaps the next row. */
.av-services .av-services__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 1rem;
}

.av-services .av-services__grid > * {
	margin-block: 0;
}

.av-services .av-service-tile {
	height: 17.5rem;
}

.av-services .av-service-tile--physical {
	height: 27.5rem;
}

@media (min-width: 600px) {
	.av-services .av-services__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 1.125rem;
	}

	.av-services .av-service-tile {
		height: 18rem;
	}

	.av-services .av-service-tile--physical {
		grid-column: 1 / -1;
		height: clamp(22.5rem, 46vw, 27.5rem);
	}
}

@media (min-width: 1200px) {
	.av-services .av-services__grid {
		grid-template-columns: minmax(0, 43fr) repeat(2, minmax(0, 28.5fr));
		grid-template-rows: repeat(2, clamp(17.5rem, 20vw, 18.5rem));
		gap: 1.125rem;
	}

	.av-services .av-service-tile,
	.av-services .av-service-tile--physical {
		height: auto;
	}

	.av-services .av-service-tile--physical {
		grid-column: 1;
		grid-row: 1 / span 2;
	}

	/* Narrow 2×2 cards: tighter text so descriptions stay on two lines. */
	.av-services .av-service-tile:not(.av-service-tile--physical) .av-service-tile__body {
		padding: 1.1rem 1.1rem 1.2rem;
	}

	.av-services .av-service-tile:not(.av-service-tile--physical) .av-service-tile__text {
		font-size: 0.85rem;
	}

	.av-services .av-service-tile:not(.av-service-tile--physical) .av-service-tile__meta {
		left: 1.1rem;
	}
}

/* ------------------------------------------------------------ Photo card */
.av-services .av-service-tile {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	min-width: 0;
	overflow: hidden;
	isolation: isolate;
	border: 1px solid rgba(11, 31, 51, 0.12); /* --av-ink hairline on white */
	border-radius: 4px;
	background-color: #0d1b2a; /* shown while the photo loads */
	transition: border-color 0.5s ease;
}

.av-services .av-service-tile > * {
	margin: 0;
}

/* Photo fills the card. */
.av-services .av-service-tile__media {
	position: absolute;
	inset: 0;
	z-index: -1;
	margin: 0;
}

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

/* Readability only: soft shade at the top for the number, deep shade at the
   bottom for the text. */
.av-services .av-service-tile__media::before,
.av-services .av-service-tile__media::after {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
}

.av-services .av-service-tile__media::before {
	background: linear-gradient(180deg, rgba(6, 17, 31, 0.5) 0%, rgba(6, 17, 31, 0) 28%);
}

.av-services .av-service-tile__media::after {
	background: linear-gradient(0deg, rgba(6, 17, 31, 0.94) 0%, rgba(6, 17, 31, 0.72) 30%, rgba(6, 17, 31, 0.18) 58%, rgba(6, 17, 31, 0) 72%);
	opacity: 0.92;
	transition: opacity 0.5s ease;
}

/* Per-photo framing — keep the subject in view when the card crops it. */
.av-services .av-service-tile--physical img { object-position: 25% 35%; }   /* officer + back logo */
.av-services .av-service-tile--monitoring img { object-position: 45% 50%; } /* operator + monitors */
.av-services .av-service-tile--cctv img { object-position: 72% 40%; }       /* camera + bracket */
.av-services .av-service-tile--access img { object-position: 58% 50%; }     /* reader + card */
.av-services .av-service-tile--audit img { object-position: 62% 50%; }      /* specialists + tablet */

/* Top-left meta row: decorative outline icon + number. Vertically centred on
   the round arrow button (top-right) of the small cards. */
.av-services .av-service-tile__meta {
	position: absolute;
	top: 1.1rem;
	left: 1.25rem;
	display: flex;
	align-items: center;
	gap: 0.8125rem;
	white-space: nowrap;
}

.av-services .av-service-tile__icon {
	flex: 0 0 auto;
	width: var(--av-tile-icon, 1.5625rem); /* mobile 25px */
	height: var(--av-tile-icon, 1.5625rem);
	color: #fff;
	opacity: 0.9;
	transition: opacity 0.5s ease;
}

.av-services .av-service-tile:hover .av-service-tile__icon {
	opacity: 1;
}

.av-services .av-service-tile__num {
	font-size: 0.8rem;
	font-weight: 600;
	line-height: 1;
	letter-spacing: 0.16em;
	color: rgba(255, 255, 255, 0.75);
}

@media (min-width: 600px) {
	.av-services .av-service-tile {
		--av-tile-icon: 1.6875rem; /* 27px */
	}

	.av-services .av-service-tile--physical {
		--av-tile-icon: 1.9375rem; /* 31px */
	}
}

.av-services .av-service-tile__body {
	padding: 1.25rem 1.25rem 1.3rem;
}

.av-services .av-service-tile__body > * {
	margin: 0;
}

/* Small accent rule above the title — widens on hover. */
.av-services .av-service-tile__title {
	position: relative;
	padding-top: 0.9rem;
	font-size: 1.2rem;
	font-weight: 700;
	line-height: 1.25;
	color: #fff;
}

.av-services .av-service-tile__title::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 1.5rem;
	height: 2px;
	background: var(--av-accent);
	transition: width 0.5s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.av-services .av-service-tile__text {
	margin-top: 0.45rem;
	font-size: 0.9rem;
	line-height: 1.5;
	color: rgba(255, 255, 255, 0.74);
}

.av-services .av-service-tile--physical .av-service-tile__body {
	padding: 1.75rem 5rem 1.75rem 1.75rem;
}

.av-services .av-service-tile--physical .av-service-tile__meta {
	top: 1.5rem;
	left: 1.75rem;
}

.av-services .av-service-tile--physical .av-service-tile__title {
	font-size: clamp(1.5rem, 1.15rem + 1vw, 1.875rem);
}

.av-services .av-service-tile--physical .av-service-tile__text {
	max-width: 24rem;
	margin-top: 0.6rem;
	font-size: 1rem;
}

/* Round arrow button; its link is stretched over the whole card. Small cards:
   top-right, opposite the number, so the text keeps the full card width.
   Physical card: bottom-right, beside its text. */
.av-services .av-service-tile__link {
	position: absolute;
	top: 0.75rem;
	right: 0.85rem;
}

.av-services .av-service-tile--physical .av-service-tile__link {
	top: auto;
	right: 1.5rem;
	bottom: 1.75rem;
}

.av-services .av-service-tile__link a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.375rem;
	height: 2.375rem;
	border: 1px solid rgba(255, 255, 255, 0.4);
	border-radius: 50%;
	color: #fff;
	font-size: 1.1rem;
	line-height: 1;
	text-decoration: none;
	transition: border-color 0.5s ease, background-color 0.5s ease;
}

.av-services .av-service-tile__link a span {
	display: inline-block;
	transition: transform 0.5s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.av-services .av-service-tile__link a::after {
	content: "";
	position: absolute;
	inset: -100vmax; /* clipped to the card by its overflow: hidden */
}

/* Hover / keyboard focus */
.av-services .av-service-tile:hover,
.av-services .av-service-tile:has(a:focus-visible) {
	border-color: rgba(11, 31, 51, 0.32);
}

.av-services .av-service-tile:hover .av-service-tile__media img {
	transform: scale(1.035);
}

.av-services .av-service-tile:hover .av-service-tile__media::after,
.av-services .av-service-tile:has(a:focus-visible) .av-service-tile__media::after {
	opacity: 1;
}

.av-services .av-service-tile:hover .av-service-tile__title::before,
.av-services .av-service-tile:has(a:focus-visible) .av-service-tile__title::before {
	width: 2.75rem;
}

.av-services .av-service-tile:hover .av-service-tile__link a,
.av-services .av-service-tile__link a:focus-visible {
	border-color: #fff;
	background-color: rgba(255, 255, 255, 0.08);
}

.av-services .av-service-tile:hover .av-service-tile__link a span,
.av-services .av-service-tile__link a:focus-visible span {
	transform: translateX(3px);
}

.av-services .av-service-tile__link a:focus-visible {
	outline: 2px solid #fff;
	outline-offset: 3px;
	border-radius: 50%;
}

/* ==========================================================================
   03 · Why us (full-bleed city panorama band)
   ========================================================================== */

/* Full-bleed like the Hero: the band is alignfull (100% viewport width), the
   content sits in the shared .av-container. Layers, top to bottom:
   1) navy readability overlay (a little heavier behind the heading on the left);
   2) Saint Petersburg panorama (2103×748, cover). The photo's framing is set
      per breakpoint through --av-why-pos (chosen visually). */
.av-section.av-why-us {
	--av-section-pt: 2.75rem;
	--av-section-pb: 2.75rem;
	--av-why-pos: 67% 50%;   /* <600: Peter and Paul spire + raised bridge */
	--av-why-shade: linear-gradient(180deg, rgba(4, 20, 36, 0.76) 0%, rgba(4, 20, 36, 0.72) 100%);

	display: flex;
	align-items: center;
	color: #fff;
	background-color: #0a1a2b; /* while the photo loads */
	background-image:
		var(--av-why-shade),
		url("../images/why-av-security-bg.webp");
	background-position: 0 0, var(--av-why-pos);
	background-repeat: no-repeat;
	background-size: cover;
}

@media (min-width: 600px) {
	.av-section.av-why-us {
		--av-section-pt: 3.25rem;
		--av-section-pb: 3.25rem;
		--av-why-pos: 60% 50%;
	}
}

@media (min-width: 900px) {
	.av-section.av-why-us {
		--av-why-pos: 50% 55%;
		--av-why-shade: linear-gradient(90deg, rgba(4, 20, 36, 0.78) 0%, rgba(4, 20, 36, 0.7) 40%, rgba(4, 20, 36, 0.66) 100%);
	}
}

@media (min-width: 1200px) {
	.av-section.av-why-us {
		--av-section-pt: 3.75rem;
		--av-section-pb: 3.75rem;
		--av-why-pos: 50% 62%;   /* skyline band: domes, spire, bridge, rostral column */

		min-height: 18.75rem;
	}
}

.av-why-us .av-container {
	flex: 1 1 auto;
}

/* Grid
   <600      heading, then a compact list (icon left, text right)
   600–899   heading, then 2×2
   900–1199  heading, then 4 in a row
   ≥1200     heading (≈26%) | 4 advantages, hairline dividers */
.av-why-us .av-why-us__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 1.1rem;
}

.av-why-us .av-why-us__grid > *,
.av-why-us .av-why-us__head > *,
.av-why-us .av-why-item > *,
.av-why-us .av-why-item__body > * {
	margin-block: 0;
}

.av-why-us .av-why-us__head {
	margin-bottom: 0.9rem;
}

.av-why-us .av-section__eyebrow {
	margin-bottom: 0.9rem;
	color: rgba(255, 255, 255, 0.72);
}

.av-why-us .av-why-us__title {
	font-size: clamp(1.625rem, 1.2rem + 1.1vw, 2.25rem);
	font-weight: 700;
	line-height: 1.12;
	letter-spacing: -0.015em;
	color: #fff;
}

.av-why-item {
	display: flex;
	align-items: flex-start;
	gap: 0.9rem;
}

.av-why-item__icon {
	display: inline-flex;
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	width: 2.75rem;  /* 44px mobile */
	height: 2.75rem;
	border: 1px solid rgba(255, 255, 255, 0.12);
	border-radius: 4px;
	background-color: rgba(255, 255, 255, 0.05);
	color: rgba(255, 255, 255, 0.92);
}

.av-why-item__icon svg {
	width: 1.625rem; /* 26px mobile */
	height: 1.625rem;
}

.av-why-us .av-why-item__title {
	font-size: 1rem;
	font-weight: 700;
	line-height: 1.3;
	color: #fff;
}

.av-why-us .av-why-item__text {
	margin-top: 0.3rem;
	font-size: 0.875rem;
	line-height: 1.5;
	color: rgba(255, 255, 255, 0.72);
}

@media (min-width: 600px) {
	.av-why-us .av-why-us__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 1.75rem 2rem;
	}

	.av-why-us .av-why-us__head {
		grid-column: 1 / -1;
		margin-bottom: 0.25rem;
	}

	.av-why-item {
		flex-direction: column;
		gap: 1rem;
	}

	.av-why-item__icon {
		width: 3rem;  /* 48px */
		height: 3rem;
	}

	.av-why-item__icon svg {
		width: 1.875rem; /* 30px */
		height: 1.875rem;
	}
}

@media (min-width: 900px) {
	.av-why-us .av-why-us__grid {
		grid-template-columns: repeat(4, minmax(0, 1fr));
		gap: 1.75rem 0;
	}

	.av-why-item {
		padding-inline: 1.5rem;
	}

	.av-why-item:nth-child(2) {
		padding-left: 0;
	}

	.av-why-item + .av-why-item {
		border-left: 1px solid rgba(255, 255, 255, 0.15);
	}
}

@media (min-width: 1200px) {
	.av-why-us .av-why-us__grid {
		grid-template-columns: minmax(0, 1.75fr) repeat(4, minmax(0, 1fr));
		align-items: stretch; /* equal-height columns: dividers run full height, icons line up */
		gap: 0;
	}

	.av-why-us .av-why-us__title {
		font-size: 2rem; /* 32px — two lines in the ≈30% heading column */
	}

	.av-why-us .av-why-us__head {
		grid-column: auto;
		align-self: stretch;
		display: flex;
		flex-direction: column;
		justify-content: center;
		margin-bottom: 0;
		padding-right: 2rem;
		border-right: 1px solid rgba(255, 255, 255, 0.15);
	}

	.av-why-item,
	.av-why-item:nth-child(2) {
		padding-inline: 1.25rem;
	}

	.av-why-item:last-child {
		padding-right: 0;
	}

	.av-why-item:nth-child(2) {
		border-left: 0;
	}

	.av-why-item__icon svg {
		width: 2rem; /* 32px */
		height: 2rem;
	}
}

/* ==========================================================================
   04 · Objects (white band: six tall photo cards + light stats bar)
   ========================================================================== */

.av-section.av-objects {
	/* mobile 40/44 → tablet 52/52 → desktop 68/60 */
	--av-section-pt: 2.5rem;
	--av-section-pb: 2.75rem;
}

@media (min-width: 600px) {
	.av-section.av-objects {
		--av-section-pt: 3.25rem;
		--av-section-pb: 3.25rem;
	}
}

@media (min-width: 1200px) {
	.av-section.av-objects {
		--av-section-pt: 4.25rem;
		--av-section-pb: 3.75rem;
	}
}

/* Heading → cards: mobile 26px → tablet 34px → desktop 42px. */
.av-objects .av-section__head {
	margin-bottom: 1.625rem;
}

@media (min-width: 600px) {
	.av-objects .av-section__head {
		margin-bottom: 2.125rem;
	}
}

@media (min-width: 1200px) {
	.av-objects .av-section__head {
		margin-bottom: 2.625rem;
	}
}

/* Wider lead column only where the title still has room for two lines. */
@media (min-width: 1200px) {
	.av-objects .av-section__head--split {
		grid-template-columns: minmax(0, 1fr) minmax(0, 31rem);
	}
}

.av-objects .av-objects__head-aside {
	display: grid;
	gap: 0.9rem;
	justify-items: start;
}

.av-objects .av-objects__head-aside > * {
	margin-block: 0;
}

/* "Все объекты →" in the brand blue; arrow follows the link colour. */
.av-objects .av-objects__all a {
	color: var(--av-primary);
}

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

.av-objects .av-objects__all .av-link-more__arrow {
	color: currentColor;
}

/* ------------------------------------------------------------ Card grid
   <600      1 column   (cards 440px)
   600–899   2 columns  (400px)
   900–1199  3 columns  (410px)
   ≥1200     6 columns  (520px tall vertical panels) */
.av-objects .av-objects__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 0.75rem;
}

.av-objects .av-objects__grid > * {
	margin-block: 0;
}

.av-object-card {
	--av-object-card-h: 27.5rem;

	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	min-width: 0;
	height: var(--av-object-card-h);
	overflow: hidden;
	isolation: isolate;
	border-radius: 4px;
	background-color: #0d1b2a; /* shown while the photo loads */
}

@media (min-width: 600px) {
	.av-objects .av-objects__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 0.625rem;
	}

	.av-object-card {
		--av-object-card-h: 25rem;
	}
}

@media (min-width: 900px) {
	.av-objects .av-objects__grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.av-object-card {
		--av-object-card-h: 25.625rem;
	}
}

@media (min-width: 1200px) {
	.av-objects .av-objects__grid {
		grid-template-columns: repeat(6, minmax(0, 1fr));
		gap: 0.5rem;
	}

	.av-object-card {
		--av-object-card-h: 32.5rem;
	}
}

/* ------------------------------------------------------------ Photo card */
.av-object-card > * {
	margin: 0;
}

.av-object-card__media {
	position: absolute;
	inset: 0;
	z-index: -1;
	margin: 0;
}

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

/* Readability only: clear top, navy towards the bottom. */
.av-object-card__media::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(4, 20, 36, 0) 0%, rgba(4, 20, 36, 0.08) 30%, rgba(4, 20, 36, 0.62) 55%, rgba(4, 20, 36, 0.9) 75%, rgba(4, 20, 36, 0.96) 100%);
	opacity: 0.94;
	pointer-events: none;
	transition: opacity 0.6s ease;
}

.av-object-card__body {
	/* Shared content grid: every card in a row reserves the same title and
	   text height, so icon / title / text / arrow sit on common lines.
	   Line counts = the longest copy at that width (0 = no reservation). */
	--av-object-title-lines: 0;
	--av-object-text-lines: 0;

	padding: 1.25rem 1.25rem 1.25rem;
	color: #fff;
}

.av-object-card__body > * {
	margin: 0;
}

.av-object-card__icon {
	display: block;
	width: 2.25rem; /* 36px */
	height: 2.25rem;
	color: #fff;
}

.av-objects .av-object-card__title {
	margin-top: 0.85rem;
	font-size: 1.125rem; /* 18px — card-title size of Process / Technologies */
	font-weight: 600;
	line-height: 1.3;
	min-height: calc(var(--av-object-title-lines) * 1.3em);
	color: #fff;
}

.av-objects .av-object-card__text {
	margin-top: 0.5rem;
	font-size: 0.875rem; /* 14px — theme "small", as the Why-us card text */
	font-weight: 400;
	line-height: 1.5;
	min-height: calc(var(--av-object-text-lines) * 1.5em);
	color: rgba(255, 255, 255, 0.84);
	hyphens: manual; /* only at the soft hyphen placed in long words */
	overflow-wrap: break-word;
}

/* "01 / 06": desktop hover mode only (see Hover expansion). */
.av-object-card__index {
	display: none;
}

/* Text link "Подробнее →"; its link is stretched over the whole card.
   The 42px box height is kept from the former round button, so the
   icon / title / text lines above do not move. nowrap: fits the narrowed
   cards of the hover expansion (≥131px visible at 1440, ≥120px at 1200). */
.av-object-card__link {
	margin-top: 1.1rem;
}

.av-object-card__link a {
	display: inline-flex;
	align-items: center;
	gap: 0.5625rem; /* 9px */
	height: 2.625rem; /* 42px */
	color: #fff;
	font-size: 0.8125rem; /* 13px */
	font-weight: 400;
	line-height: 1.4;
	white-space: nowrap;
	text-decoration: none;
}

.av-object-card__link a span {
	display: inline-block;
	font-size: 1.2em; /* the font's arrow glyph is small at text size */
	transition: transform 0.22s ease-out;
}

.av-object-card__link a::after {
	content: "";
	position: absolute;
	inset: 0;
}

.av-object-card:hover .av-object-card__media img {
	transform: scale(1.03);
}

.av-object-card:hover .av-object-card__media::after,
.av-object-card:has(a:focus-visible) .av-object-card__media::after {
	opacity: 1;
}

.av-object-card:hover .av-object-card__link a span,
.av-object-card__link a:focus-visible span {
	transform: translateX(5px);
}

.av-object-card__link a:focus-visible {
	outline: 2px solid #fff;
	outline-offset: 3px;
	border-radius: 2px;
}

/* 1 column (<600): no reservation, each card keeps its natural stack. */
@media (min-width: 600px) {
	.av-object-card__body {
		--av-object-title-lines: 2;
		--av-object-text-lines: 3;
	}
}

@media (min-width: 1200px) {
	/* Narrow 6-up panels: slightly tighter inset. */
	.av-object-card__body {
		--av-object-text-lines: 5;

		padding: 1.25rem 1.125rem 1.375rem;
	}

	.av-object-card__icon {
		width: 2.375rem; /* 38px */
		height: 2.375rem;
	}
}

/* ------------------------------------------------------------ Hover expansion
   Desktop with a real pointer only (≥1200, one row of six). The row turns
   into flex: the active card grows to --av-object-grow shares, the other
   five shrink, the row width never changes. Active = 6g / (5 + g) resting
   cards; g = 1.842 → ~1.61× (1440: 182 → ~294px, others ~160px).
   The body keeps the resting card width (container units), so text in the
   narrowing cards never reflows and the alignment grid above holds; the
   card clips it. Only the active card's body takes the expanded width.
   Touch, <1200 and keyboard-less layouts keep the static grid. */
@media (min-width: 1200px) and (hover: hover) and (pointer: fine) {
	.av-objects .av-objects__grid {
		--av-object-gaps: calc(5 * 0.5rem);
		--av-object-grow: 1.842;

		display: flex;
		container-type: inline-size;
	}

	.av-object-card {
		flex: 1 1 0;
		transition: flex-grow 0.42s cubic-bezier(0.33, 0, 0.2, 1);
	}

	.av-object-card__body {
		flex-shrink: 0;
		align-self: flex-start;
		width: calc((100cqw - var(--av-object-gaps)) / 6);
	}

	.av-object-card__title,
	.av-object-card__text {
		/* Short delay on the way back: crossing the gap between two cards
		   does not flash the text of the others. */
		transition: opacity 0.25s ease 0.12s;
	}

	/* Active: hovered card, or the keyboard-focused one while the pointer
	   is elsewhere. */
	.av-objects__grid:has(.av-object-card:hover) .av-object-card:hover,
	.av-objects__grid:not(:has(.av-object-card:hover)) .av-object-card:focus-within {
		flex-grow: var(--av-object-grow);
	}

	.av-objects__grid:has(.av-object-card:hover) .av-object-card:hover .av-object-card__body,
	.av-objects__grid:not(:has(.av-object-card:hover)) .av-object-card:focus-within .av-object-card__body {
		width: calc((100cqw - var(--av-object-gaps)) * var(--av-object-grow) / (5 + var(--av-object-grow)));
	}

	/* "Подробнее →" shows only in the active card. No visibility/transform:
	   the link must stay focusable (keyboard opens the card via
	   :focus-within), and a transform on the link or its paragraph would
	   become the containing block of the stretched a::after. The 4px rise
	   is padding inside the fixed 42px box, so nothing around it moves. */
	.av-object-card__link a {
		box-sizing: border-box;
		padding-top: 0.5rem;
		opacity: 0;
		pointer-events: none;
		transition: opacity 0.22s ease-out, padding-top 0.22s ease-out;
	}

	.av-objects__grid:has(.av-object-card:hover) .av-object-card:hover .av-object-card__link a,
	.av-objects__grid:not(:has(.av-object-card:hover)) .av-object-card:focus-within .av-object-card__link a {
		padding-top: 0;
		opacity: 1;
		pointer-events: auto;
	}

	/* Icon, title and text sit 28px lower than in the static grid. The room
	   comes from the CTA zone: the link is hidden until its card is active,
	   and the active card is wide enough that its text uses at most 3 of
	   the 5 reserved lines, so the CTA box may overlap the unused bottom of
	   that reserve. The CTA text itself stays where it was.
	   -10.4px = 17.6 (old gap) − 28 (shift).
	   Index "03 / 06": zero-height, lifted 14px above the icon with
	   relative offset (out of the flow, so it moves nothing; not absolute,
	   which would need a positioned body and capture the stretched link). */
	.av-object-card__index {
		position: relative;
		top: calc(-2.375rem - 0.875rem - 1.2em); /* icon 38 + gap 14 + own line */
		display: block;
		height: 0;
		font-size: 0.6875rem; /* 11px */
		font-weight: 400;
		line-height: 1.2;
		letter-spacing: 0.18em;
		color: rgba(255, 255, 255, 0.7);
		white-space: nowrap;
		opacity: 0;
		visibility: hidden;
		transform: translateY(4px);
		transition: opacity 0.22s ease-out, transform 0.22s ease-out, visibility 0.22s;
	}

	.av-object-card__link {
		margin-top: -0.65rem; /* -10.4px, see above */
	}

	.av-objects__grid:has(.av-object-card:hover) .av-object-card:hover .av-object-card__index,
	.av-objects__grid:not(:has(.av-object-card:hover)) .av-object-card:focus-within .av-object-card__index {
		opacity: 1;
		visibility: visible;
		transform: none;
	}

	/* The five narrowed cards keep their icon; their clipped title and
	   text fade out until the row settles back. */
	.av-objects__grid:has(.av-object-card:hover) .av-object-card:not(:hover) :is(.av-object-card__title, .av-object-card__text),
	.av-objects__grid:not(:has(.av-object-card:hover)):has(.av-object-card:focus-within) .av-object-card:not(:focus-within) :is(.av-object-card__title, .av-object-card__text) {
		opacity: 0;
		transition-delay: 0s;
	}
}

@media (min-width: 1200px) and (hover: hover) and (pointer: fine) and (prefers-reduced-motion: reduce) {
	.av-object-card,
	.av-object-card__title,
	.av-object-card__text,
	.av-object-card__link a,
	.av-object-card__index {
		transition: none;
	}
}

/* ------------------------------------------------------------ Stats bar
   Background = the header utility strip colour (#f4f6f8, main.css
   .av-header__utility); no frame, no dividers.
   <600      2 columns, last item spans both
   600–1199  3 + 2
   ≥1200     5 equal columns, short vertical dividers */
.av-objects .av-object-stats {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	margin: 1.5rem 0 0;
	padding: 0;
	list-style: none;
	overflow: hidden;
	/* No visible frame or dividers: one flat grey panel. The 1px border stays
	   (transparent) so cell geometry is unchanged. */
	border: 1px solid transparent;
	border-radius: 0;
	background-color: #f4f6f8;
}

.av-object-stat {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	min-width: 0;
	margin: 0;
	padding: 1rem 1rem;
}

.av-object-stat:last-child {
	grid-column: 1 / -1;
}

.av-object-stat__icon {
	flex: 0 0 auto;
	width: 2.125rem; /* 34px mobile */
	height: 2.125rem;
	color: var(--av-ink);
}

.av-object-stat__body {
	display: flex;
	flex-direction: column;
	min-width: 0;
}

.av-object-stat__value {
	font-size: 1.5rem;
	font-weight: 700;
	line-height: 1.1;
	letter-spacing: -0.01em;
	color: var(--av-primary);
	font-variant-numeric: tabular-nums;
}

.av-object-stat__label {
	margin-top: 0.3rem;
	font-size: 0.8125rem;
	line-height: 1.35;
	color: rgba(11, 31, 51, 0.72); /* --av-ink at 72% */
}

@media (min-width: 600px) {
	.av-objects .av-object-stats {
		grid-template-columns: repeat(6, minmax(0, 1fr));
		margin-top: 1.75rem;
	}

	.av-object-stat {
		grid-column: span 2;
		padding: 1.25rem 1.25rem;
	}

	.av-object-stat:nth-child(4),
	.av-object-stat:last-child {
		grid-column: span 3;
	}

	.av-object-stat__icon {
		width: 2.5rem; /* 40px */
		height: 2.5rem;
	}

	.av-object-stat__value {
		font-size: 1.75rem;
	}

	.av-object-stat__label {
		font-size: 0.875rem;
	}
}

@media (min-width: 1200px) {
	.av-objects .av-object-stats {
		grid-template-columns: repeat(5, minmax(0, 1fr));
		align-items: stretch;
		min-height: 8rem;
		margin-top: 1.875rem;
	}

	.av-object-stat,
	.av-object-stat:nth-child(4),
	.av-object-stat:last-child {
		/* Same grid in every cell: fixed icon track + text track, centred as
		   one group. Icons all centre on one line, values all start on one
		   line (the label always reserves two lines, see below). */
		display: grid;
		grid-template-columns: 2.625rem auto;
		grid-column: auto;
		justify-content: center;
		align-items: center;
		gap: 1rem;
		position: relative;
		padding: 1.5rem 1.25rem;
	}

	/* Short, light vertical dividers between the five items (~60% of the
	   row height, centred). Out of flow, so cell geometry is unchanged. */
	.av-object-stat:not(:last-child)::after {
		content: "";
		position: absolute;
		top: 20%;
		right: 0;
		width: 1px;
		height: 60%;
		background-color: rgba(10, 35, 60, 0.11);
		pointer-events: none;
	}

	.av-object-stat__icon {
		width: 2.625rem; /* 42px */
		height: 2.625rem;
	}

	.av-object-stat__value {
		font-size: 1.875rem; /* 30px */
	}

	.av-object-stat__label {
		/* Two lines reserved (2 × line-height 1.35) so one-line labels don't
		   shift their value down relative to the other cells. */
		min-height: 2.7em;
		font-size: 0.875rem;
	}
}

/* ==========================================================================
   05 · Process ("Как мы работаем": five-step timeline + compact CTA row)
   ========================================================================== */

.av-section.av-process {
	/* mobile 40/48 → tablet 48/56 → desktop 48/68 (Objects above already
	   ends with 60px of white, so the top stays tight). */
	--av-section-pt: 2.5rem;
	--av-section-pb: 3rem;
	--av-process-gap: 2rem;
	--av-process-num: clamp(2.5rem, 1.8rem + 1.35vw, 3.0625rem); /* desktop number size */
	--av-process-dot: 0.625rem;
	--av-process-dot-mt: 0.875rem;
	--av-process-rail: 2px;
	--av-process-rail-color: rgba(26, 95, 180, 0.3); /* --av-primary, soft */
	--av-process-halo: rgba(26, 95, 180, 0.14);
}

@media (min-width: 600px) {
	.av-section.av-process {
		--av-section-pt: 3rem;
		--av-section-pb: 3.5rem;
	}
}

@media (min-width: 1200px) {
	.av-section.av-process {
		--av-section-pb: 4.25rem;
	}
}

/* Heading → timeline: mobile 28px → desktop 48px. */
.av-process .av-section__head {
	margin-bottom: 1.75rem;
}

@media (min-width: 900px) {
	.av-process .av-section__head {
		margin-bottom: 3rem;
	}
}

@media (min-width: 1200px) {
	.av-process .av-section__head--split {
		grid-template-columns: minmax(0, 1fr) minmax(0, 31rem); /* same split as Objects */
	}
}

/* ------------------------------------------------------------ Timeline
   <900   vertical: number column + rail on the left, text on the right
   ≥900   horizontal: 5 equal columns, number → rail with dot → text */
.av-process .av-process__steps {
	margin: 0;
	padding: 0;
	list-style: none;
}

.av-process-step {
	position: relative;
	display: grid;
	grid-template-columns: 3rem minmax(0, 1fr);
	column-gap: 1rem;
	margin: 0;
	padding-bottom: 1.75rem;
}

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

.av-process-step__num {
	grid-column: 1;
	grid-row: 1;
	font-size: 1.9375rem;
	font-weight: 500;
	line-height: 1;
	letter-spacing: -0.02em;
	color: var(--av-primary);
	font-variant-numeric: tabular-nums;
	transition: color 0.2s ease;
}

/* Vertical rail between numbers (mobile / tablet), starting at the marker. */
.av-process-step::before {
	content: "";
	position: absolute;
	top: 2.5rem;
	bottom: 0.625rem;
	left: 1rem;
	width: var(--av-process-rail);
	background: var(--av-process-rail-color);
}

.av-process-step:last-child::before {
	display: none;
}

/* Solid marker with a faint halo, at the head of each rail segment. */
.av-process-step__dot {
	position: absolute;
	z-index: 1;
	top: 2.5rem;
	left: calc(1rem + var(--av-process-rail) / 2 - 0.25rem);
	width: 0.5rem;
	height: 0.5rem;
	border-radius: 50%;
	background: var(--av-primary);
	box-shadow: 0 0 0 3px var(--av-process-halo);
	transition: box-shadow 0.2s ease;
}

.av-process-step__body {
	grid-column: 2;
	grid-row: 1;
	min-width: 0;
}

.av-process .av-process-step__title {
	margin: 0;
	font-size: 1.125rem;
	font-weight: 700;
	line-height: 1.3;
	color: var(--av-ink);
}

.av-process .av-process-step__text {
	margin: 0.35rem 0 0;
	font-size: 0.9375rem;
	line-height: 1.55;
	color: var(--av-ink-muted);
}

@media (min-width: 900px) {
	.av-process .av-process__steps {
		display: grid;
		grid-template-columns: repeat(5, minmax(0, 1fr));
		column-gap: var(--av-process-gap);
	}

	.av-process-step {
		display: block;
		padding-bottom: 0;
	}

	.av-process-step__num {
		display: block;
		font-size: var(--av-process-num);
	}

	/* Marker on the rail, left-aligned with the text. */
	.av-process-step__dot {
		display: block;
		position: relative;
		top: auto;
		left: auto;
		width: var(--av-process-dot);
		height: var(--av-process-dot);
		margin: var(--av-process-dot-mt) 0 1.5rem;
		box-shadow: 0 0 0 4px var(--av-process-halo);
	}

	/* One continuous rail through the marker centres: runs from this step's
	   marker across the column gap to the next marker (number height + marker
	   margin + half the marker), so the five steps read as one line. */
	.av-process-step::before {
		top: calc(var(--av-process-num) + var(--av-process-dot-mt) + (var(--av-process-dot) - var(--av-process-rail)) / 2);
		bottom: auto;
		left: 0;
		right: calc(var(--av-process-gap) * -1);
		width: auto;
		height: var(--av-process-rail);
	}

	.av-process-step__body {
		padding-right: 0.25rem;
	}

	.av-process .av-process-step__title {
		font-size: 1.1875rem;
	}

	.av-process .av-process-step__text {
		margin-top: 0.5rem;
	}
}

/* Desktop hover: colour/halo only, nothing moves. */
@media (min-width: 900px) and (hover: hover) and (pointer: fine) {
	.av-process-step:hover .av-process-step__num {
		color: var(--av-primary-hover);
	}

	.av-process-step:hover .av-process-step__dot {
		box-shadow: 0 0 0 6px rgba(26, 95, 180, 0.2);
	}
}

/* Scroll-driven rail fill (≥900px, JS adds .av-process--progress; see
   assets/js/process-progress.js). A solid blue line sits exactly over the
   rail — marker 1 → marker 5 = 4 × (column + gap) = 80% + 0.8 × gap — and
   grows via scaleX(--av-process-progress). Markers start hollow and fill
   once the line reaches them. Nothing here affects layout. */
@media (min-width: 900px) {
	.av-process--progress .av-process__steps {
		position: relative;
	}

	.av-process--progress .av-process__steps::after {
		content: "";
		position: absolute;
		top: calc(var(--av-process-num) + var(--av-process-dot-mt) + (var(--av-process-dot) - var(--av-process-rail)) / 2);
		left: 0;
		width: calc(80% + var(--av-process-gap) * 0.8);
		height: var(--av-process-rail);
		background: var(--av-primary);
		transform: scaleX(var(--av-process-progress, 0));
		transform-origin: left center;
		pointer-events: none;
	}

	.av-process--progress .av-process-step__dot {
		background: #fff;
		box-shadow: inset 0 0 0 2px rgba(26, 95, 180, 0.45);
		transition: background-color 0.25s ease, box-shadow 0.25s ease;
	}

	.av-process--progress .av-process-step.is-active .av-process-step__dot {
		background: var(--av-primary);
		box-shadow: 0 0 0 4px var(--av-process-halo);
	}
}

@media (min-width: 900px) and (hover: hover) and (pointer: fine) {
	.av-process--progress .av-process-step.is-active:hover .av-process-step__dot {
		box-shadow: 0 0 0 6px rgba(26, 95, 180, 0.2);
	}
}

/* ------------------------------------------------------------ CTA row */
.av-process .av-process__cta {
	position: relative;
	display: grid;
	gap: 1.25rem;
	margin-top: 2rem;
	padding: 1.125rem 1.25rem 1.125rem 1.5rem;
	border-radius: 4px;
	background-color: #f8fafc;
}

/* Brand accent: thin primary bar on the left edge. */
.av-process .av-process__cta::before {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	width: 3px;
	border-radius: 4px 0 0 4px;
	background: var(--av-primary);
}

.av-process .av-process__cta > *,
.av-process .av-process__cta-text > * {
	margin-block: 0;
}

.av-process .av-process__cta-title {
	font-size: 1.25rem;
	font-weight: 700;
	line-height: 1.3;
	color: var(--av-ink);
}

.av-process .av-process__cta-sub {
	margin-top: 0.4rem;
	font-size: 0.9375rem;
	line-height: 1.55;
	color: var(--av-ink-muted);
}

.av-process .av-process__cta-actions {
	margin: 0;
}

.av-process .av-process__cta-btn,
.av-process .av-process__cta-btn .wp-block-button__link {
	width: 100%;
}

.av-process .av-process__cta-btn .wp-block-button__link {
	display: block;
	box-sizing: border-box;
	padding: 0.9rem 1.75rem;
	font-size: 1rem;
	font-weight: 600;
	letter-spacing: 0.01em;
	line-height: 1.3;
	text-align: center;
	transition: background-color 0.18s ease;
}

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

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

@media (min-width: 768px) {
	.av-process .av-process__cta {
		grid-template-columns: minmax(0, 1fr) auto;
		align-items: center;
		gap: 2rem;
		padding: 1.375rem 2rem 1.375rem 2.25rem;
	}

	.av-process .av-process__cta-btn,
	.av-process .av-process__cta-btn .wp-block-button__link {
		width: auto;
	}
}

@media (min-width: 1200px) {
	.av-process .av-process__cta {
		margin-top: 2.25rem;
	}
}

/* ==========================================================================
   06 · Technologies ("Технологии безопасности": dark band, heading, monitoring
   photo with a status bar | four technology rows + report link)
   ========================================================================== */

.av-section.av-tech {
	/* mobile 56/56 → tablet 64/64 → desktop 84/84. Process above ends on
	   white, so the navy band starts on a clean hard edge. */
	--av-section-pt: 3.5rem;
	--av-section-pb: 3.5rem;
	--av-tech-bg: #0a1a2b;                  /* Why Us navy */
	--av-tech-num: #6fa3e6;                 /* --av-primary tint, legible on navy */
	--av-tech-title: #eef3f8;
	--av-tech-text: #9fb1c5;                /* muted blue-grey */
	--av-tech-rule: rgba(255, 255, 255, 0.1);
	--av-tech-tile: rgba(26, 95, 180, 0.16); /* icon tile, --av-primary based */
	--av-tech-live: #3ecf7a;

	color: #fff;
	background-color: var(--av-tech-bg);
}

@media (min-width: 600px) {
	.av-section.av-tech {
		--av-section-pt: 4rem;
		--av-section-pb: 4rem;
	}
}

@media (min-width: 1200px) {
	.av-section.av-tech {
		--av-section-pt: 5.25rem;
		--av-section-pb: 5.25rem;
	}
}

/* Grid
   <1200   one column: head → media (photo + status) → aside (rows + link)
   ≥1200   head across, then media (≈65%) | aside (≈35%) */
.av-tech .av-tech__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	grid-template-areas:
		"head"
		"media"
		"aside";
	gap: 1.75rem;
}

.av-tech .av-tech__grid > *,
.av-tech .av-tech__head > *,
.av-tech .av-tech__media > *,
.av-tech .av-tech__aside > * {
	margin-block: 0;
}

.av-tech .av-tech__head {
	grid-area: head;
	max-width: 40rem;
}

.av-tech .av-section__eyebrow {
	margin-bottom: 1.1rem; /* shared eyebrow spacing, after the reset above */
	color: rgba(255, 255, 255, 0.72);
}

.av-tech .av-section__title {
	color: #fff;
}

.av-tech .av-tech__lead {
	margin-top: 1rem;
	color: var(--av-tech-text);
}

/* ------------------------------------------------------------ Photo */
.av-tech .av-tech__media {
	grid-area: media;
	position: relative;
	overflow: hidden;
	border-radius: 4px;
	background-color: #0d1c2d;
	box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.06);
}

.av-tech .av-tech__image {
	margin: 0;
	aspect-ratio: 4 / 3;
}

.av-tech .av-tech__image img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 50% 50%;
}

/* ------------------------------------------------------------ Status bar
   Phones: its own strip under the photo, items stacked.
   ≥600px: a translucent panel inside the photo's bottom edge, 3 across. */
.av-tech .av-tech-status {
	display: grid;
	margin: 0;
	padding: 0.25rem 1rem;
	list-style: none;
	background-color: rgba(8, 20, 34, 0.94);
	border-top: 1px solid var(--av-tech-rule);
}

.av-tech-status__item {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	min-width: 0;
	padding-block: 0.6rem;
}

.av-tech-status__item + .av-tech-status__item {
	border-top: 1px solid var(--av-tech-rule);
}

.av-tech-status__icon {
	display: inline-flex;
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
	width: 1.5rem;
	height: 1.5rem;
	color: var(--av-tech-num);
}

.av-tech-status__icon svg {
	width: 1.25rem;
	height: 1.25rem;
}

.av-tech-status__dot {
	width: 0.5rem;
	height: 0.5rem;
	border-radius: 50%;
	background-color: var(--av-tech-live);
	box-shadow: 0 0 0 3px rgba(62, 207, 122, 0.18), 0 0 10px rgba(62, 207, 122, 0.7);
}

.av-tech-status__body {
	display: flex;
	flex-direction: column;
	min-width: 0;
	font-size: 0.75rem;
	line-height: 1.35;
	color: var(--av-tech-text);
}

.av-tech-status__body strong {
	font-size: 0.8125rem;
	font-weight: 600;
	color: #fff;
}

@media (min-width: 600px) {
	.av-tech .av-tech-status {
		position: absolute;
		inset: auto 1rem 1rem;
		grid-template-columns: repeat(3, minmax(0, 1fr));
		padding: 0.7rem 0;
		background-color: rgba(8, 20, 34, 0.78);
		border: 1px solid rgba(255, 255, 255, 0.08);
		border-radius: 4px;
		-webkit-backdrop-filter: blur(8px);
		backdrop-filter: blur(8px);
	}

	.av-tech-status__item {
		padding: 0 1rem;
	}

	.av-tech-status__item + .av-tech-status__item {
		border-top: 0;
		border-left: 1px solid rgba(255, 255, 255, 0.12);
	}
}

/* ------------------------------------------------------------ Rows */
.av-tech .av-tech__aside {
	grid-area: aside;
	display: flex;
	flex-direction: column;
}

.av-tech .av-tech__list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.av-tech-item {
	position: relative;
	display: grid;
	grid-template-columns: auto minmax(0, 1fr) auto;
	align-items: start;
	column-gap: 1rem;
	margin: 0;
	padding: 1rem 0.9rem;
	border: 1px solid transparent;
	border-top-color: var(--av-tech-rule);
	border-radius: 3px;
	transition: background-color 0.2s ease, border-color 0.2s ease;
}

.av-tech-item:first-child {
	border-top-color: transparent;
}

.av-tech-item__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.75rem;
	height: 2.75rem;
	border-radius: 6px;
	color: var(--av-tech-num);
	background-color: var(--av-tech-tile);
	transition: color 0.2s ease, background-color 0.2s ease;
}

.av-tech-item__icon svg {
	width: 1.375rem;
	height: 1.375rem;
}

.av-tech-item__head {
	display: flex;
	align-items: baseline;
	gap: 0.6rem;
}

.av-tech-item__num {
	flex: 0 0 auto;
	font-size: 0.75rem;
	font-weight: 600;
	line-height: 1.3;
	letter-spacing: 0.08em;
	color: var(--av-tech-num);
	font-variant-numeric: tabular-nums;
}

.av-tech .av-tech-item__title {
	margin: 0;
	font-size: 1.0625rem;
	font-weight: 700;
	line-height: 1.3;
	color: var(--av-tech-title);
}

.av-tech .av-tech-item__text {
	margin: 0.3rem 0 0;
	font-size: 0.875rem;
	line-height: 1.5;
	color: var(--av-tech-text);
}

.av-tech-item__arrow {
	display: inline-flex;
	align-self: center;
	color: rgba(255, 255, 255, 0.45);
	transition: color 0.2s ease, transform 0.2s ease;
}

.av-tech-item__arrow svg {
	width: 1.125rem;
	height: 1.125rem;
}

@media (hover: hover) and (pointer: fine) {
	.av-tech-item:hover {
		background-color: rgba(255, 255, 255, 0.035);
	}

	.av-tech-item:hover .av-tech-item__icon {
		color: #9cc2f0;
		background-color: rgba(26, 95, 180, 0.26);
	}

	.av-tech-item:hover .av-tech-item__arrow {
		color: #fff;
		transform: translateX(4px);
	}
}

/* ------------------------------------------------------------ Report link */
.av-tech .av-tech__report {
	margin-top: 1.5rem;
	padding-left: 0.9rem; /* on the row text inset */
	font-size: 0.95rem;
	font-weight: 600;
	line-height: 1.4;
}

.av-tech .av-tech__report a {
	display: inline-flex;
	align-items: center;
	gap: 0.6rem;
	padding-bottom: 0.4rem;
	color: #fff;
	text-decoration: none;
	border-bottom: 1px solid var(--av-accent);
	transition: color 0.2s ease;
}

.av-tech .av-tech__report-arrow {
	display: inline-block;
	font-size: 1.15em;
	line-height: 1;
	transition: transform 0.2s ease;
}

.av-tech .av-tech__report a:hover,
.av-tech .av-tech__report a:focus-visible {
	color: #cfe0f5;
}

.av-tech .av-tech__report a:hover .av-tech__report-arrow,
.av-tech .av-tech__report a:focus-visible .av-tech__report-arrow {
	transform: translateX(4px);
}

.av-tech a:focus-visible {
	outline-color: #6fa3e6; /* --av-primary is too dark on navy */
}

/* ------------------------------------------------------------ Tablet */
@media (min-width: 600px) and (max-width: 1199px) {
	.av-tech .av-tech__image {
		aspect-ratio: 16 / 10;
	}
}

/* ------------------------------------------------------------ Phones */
@media (max-width: 599px) {
	.av-tech-item {
		column-gap: 0.85rem;
		padding-inline: 0.75rem;
	}

	.av-tech-item__icon {
		width: 2.5rem;
		height: 2.5rem;
	}

	.av-tech .av-tech__report {
		padding-left: 0.75rem;
	}
}

@media (min-width: 1024px) {
	.av-tech .av-tech__head {
		max-width: 44rem;
	}

	.av-tech .av-section__title {
		font-size: clamp(2.25rem, 1.2rem + 1.6vw, 2.75rem);
	}

	.av-tech .av-tech__lead {
		max-width: 38rem;
		font-size: 1.0625rem;
	}
}

/* ------------------------------------------------------------ Two columns
   Only from 1200px: at 1024 the ≈35% column squeezes the rows and the
   status bar wraps, so 1024–1199 keeps the stacked tablet layout. */
@media (min-width: 1200px) {
	.av-tech .av-tech__grid {
		grid-template-columns: minmax(0, 65fr) minmax(0, 35fr);
		grid-template-areas:
			"head  head"
			"media aside";
		column-gap: 2.5rem;
		row-gap: 2.5rem;
	}

	/* Heading row on the same columns: eyebrow across, title over the
	   photo, lead over the rows. */
	.av-tech .av-tech__head {
		display: grid;
		grid-template-columns: subgrid;
		grid-column: 1 / -1;
		column-gap: 2.5rem;
		align-items: start;
		max-width: none;
	}

	.av-tech .av-tech__head .av-section__eyebrow {
		grid-column: 1 / -1;
	}

	.av-tech .av-tech__lead {
		max-width: none;
		margin-top: 0;
		padding-top: 0.35rem; /* first line on the title's cap height */
	}

	/* The photo fills the row height set by the rows column. */
	.av-tech .av-tech__media {
		min-height: 31rem;
	}

	.av-tech .av-tech__image {
		position: absolute;
		inset: 0;
		aspect-ratio: auto;
	}

	.av-tech .av-tech__report {
		margin-top: auto;
		padding-top: 1.5rem;
	}
}

/* ==========================================================================
   07 · Clients ("Нам доверяют": heading over a business-centre photo,
   static 12-logo grid, four-point info strip)
   ========================================================================== */

.av-section.av-clients {
	/* mobile 48/56 → tablet 56/64 → desktop 72/80, white after the navy
	   Technologies band. */
	--av-section-pt: 3rem;
	--av-section-pb: 3.5rem;
	--av-client-card-h: 6rem;
	--av-client-pad: 0.75rem;

	--av-clients-parallax: 50px; /* parallax travel (clients-parallax.js) */

	position: relative;
	isolation: isolate;
	overflow: clip;
}

@media (min-width: 600px) {
	.av-section.av-clients {
		--av-section-pt: 3.5rem;
		--av-section-pb: 4rem;
		--av-client-pad: 0.75rem 1rem;
	}
}

@media (min-width: 1200px) {
	.av-section.av-clients {
		--av-section-pt: 4.5rem;
		--av-section-pb: 5rem;
		--av-client-card-h: 6.375rem; /* 102px */
		--av-client-pad: 0.75rem;
	}
}

/* Business-centre photo (1983×793), on its own layer so only the photo can
   move. It already fades to white on the left and bottom, so it is shown as
   is: full section width, top-right, proportional. The layer starts
   --av-clients-parallax above the section; the default shift of the same
   amount puts the photo exactly at the section top (static look — mobile,
   reduced motion, no JS). clients-parallax.js lowers the shift to 0 → range
   while the section crosses the viewport, so the photo top never drops below
   the section top. */
.av-section.av-clients::before {
	content: "";
	position: absolute;
	z-index: -1;
	top: calc(var(--av-clients-parallax) * -1);
	right: 0;
	bottom: 0;
	left: 0;
	background-image: url("../images/clients-business-center-bg.webp");
	background-repeat: no-repeat;
	background-position: right top;
	background-size: 100% auto;
	transform: translate3d(0, var(--av-clients-shift, var(--av-clients-parallax)), 0);
	pointer-events: none;
}

@media (min-width: 768px) and (prefers-reduced-motion: no-preference) {
	.av-section.av-clients::before {
		will-change: transform;
	}
}

/* Heading → grid: mobile 28px → desktop 48px. */
.av-clients .av-section__head {
	margin-bottom: 1.75rem;
}

@media (min-width: 900px) {
	.av-clients .av-section__head {
		margin-bottom: 3rem;
	}
}

/* ------------------------------------------------------------ Logos
   <600 2 cols · 600–1199 4 cols · ≥1200 6 cols. Equal cards; each logo is
   contained in the card's content box at its own height share
   (--av-client-h, set per logo in the pattern). */
.av-clients .av-clients__grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0.75rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

@media (min-width: 600px) {
	.av-clients .av-clients__grid {
		grid-template-columns: repeat(4, minmax(0, 1fr));
		gap: 1rem;
	}
}

@media (min-width: 1200px) {
	.av-clients .av-clients__grid {
		grid-template-columns: repeat(6, minmax(0, 1fr));
	}
}

.av-client {
	display: flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	height: var(--av-client-card-h);
	margin: 0;
	padding: var(--av-client-pad);
	border: 1px solid rgba(11, 31, 51, 0.09);
	border-radius: 4px;
	background-color: #fff; /* white so JPEG logos on white blend in */
	transition: border-color 0.2s ease;
}

.av-client img {
	display: block;
	width: 100%;
	height: calc(var(--av-client-h, 0.6) * 100%);
	object-fit: contain;
}

/* Desktop hover: border only, nothing moves. */
@media (hover: hover) and (pointer: fine) {
	.av-client:hover {
		border-color: rgba(26, 95, 180, 0.3);
	}
}

/* ------------------------------------------------------------ Info strip
   <600 one column, horizontal rules · 600–1199 2 × 2 · ≥1200 4 in a row,
   vertical rules. */
.av-clients .av-clients__facts {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	margin-top: 2.25rem;
}

.av-clients .av-clients__facts > *,
.av-clients .av-client-fact > *,
.av-clients .av-client-fact__body > * {
	margin-block: 0;
}

.av-client-fact {
	display: flex;
	align-items: flex-start;
	gap: 1rem;
	padding-block: 1.1rem;
}

.av-client-fact + .av-client-fact {
	border-top: 1px solid var(--av-hairline);
}

.av-client-fact:first-child {
	padding-top: 0;
}

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

.av-client-fact__icon {
	display: inline-flex;
	flex: 0 0 auto;
	color: var(--av-ink);
}

.av-client-fact__icon svg {
	width: 2rem;
	height: 2rem;
}

.av-clients .av-client-fact__title {
	font-size: 0.8125rem;
	font-weight: 700;
	line-height: 1.35;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--av-ink);
}

.av-clients .av-client-fact__text {
	margin-top: 0.35rem;
	font-size: 0.9375rem;
	line-height: 1.5;
	color: var(--av-ink-muted);
}

@media (min-width: 600px) {
	.av-clients .av-clients__facts {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		margin-top: 3rem;
	}

	.av-client-fact,
	.av-client-fact:first-child,
	.av-client-fact:last-child {
		padding: 1.25rem 1.5rem;
	}

	.av-client-fact + .av-client-fact {
		border-top: 0;
	}

	.av-client-fact:nth-child(even) {
		border-left: 1px solid var(--av-hairline);
	}

	.av-client-fact:nth-child(n + 3) {
		border-top: 1px solid var(--av-hairline);
	}

	.av-client-fact:nth-child(odd) {
		padding-left: 0;
	}
}

@media (min-width: 1200px) {
	.av-clients .av-clients__facts {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}

	.av-client-fact,
	.av-client-fact:first-child,
	.av-client-fact:last-child {
		padding: 0.25rem 1.75rem;
	}

	.av-client-fact:first-child {
		padding-left: 0;
	}

	.av-client-fact:nth-child(n + 3) {
		border-top: 0;
	}

	.av-client-fact + .av-client-fact {
		border-left: 1px solid var(--av-hairline);
	}
}

/* ==========================================================================
   Reduced motion
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
	.av-section .av-link-more a,
	.av-section .av-link-more__arrow,
	.av-services .av-service-tile,
	.av-services .av-service-tile__media img,
	.av-services .av-service-tile__media::after,
	.av-services .av-service-tile__icon,
	.av-services .av-service-tile__title::before,
	.av-services .av-service-tile__link a,
	.av-services .av-service-tile__link a span,
	.av-object-card__media img,
	.av-object-card__media::after,
	.av-object-card__link a,
	.av-object-card__link a span,
	.av-process-step__num,
	.av-process-step__dot,
	.av-process .av-process__cta-btn .wp-block-button__link,
	.av-tech-item,
	.av-tech-item__icon,
	.av-tech-item__arrow,
	.av-tech .av-tech__report-arrow,
	.av-client {
		transition: none;
	}

	.av-services .av-service-tile:hover .av-service-tile__media img,
	.av-object-card:hover .av-object-card__media img,
	.av-tech-item:hover .av-tech-item__arrow {
		transform: none;
	}
}

/* ==========================================================================
   08 · Calculation CTA ("Рассчитаем стоимость охраны вашего объекта")
   One contained two-part panel on a light band: navy intro (left / top) +
   white form area (right / bottom). Everything is scoped to .av-calc — no
   shared rule above is changed.
   ========================================================================== */

.av-section.av-calc {
	/* Light band keeps a clear gap between the navy panel and the navy
	   footer: 32/40 mobile → 48 desktop. */
	--av-section-pt: 2rem;
	--av-section-pb: 2rem;
	--av-calc-bg: #f3f6f9;
	--av-calc-navy: #0a1a2b;          /* footer / Technologies navy */
	--av-calc-on-navy: rgba(203, 216, 232, 0.78);
	--av-calc-line: rgba(11, 31, 51, 0.16);
	--av-calc-line-strong: rgba(11, 31, 51, 0.32);
	--av-calc-focus: rgba(26, 95, 180, 0.24);

	background-color: var(--av-calc-bg);
}

/* Phones: a slimmer light gap under the (sticky) header. */
@media (max-width: 599px) {
	.av-section.av-calc {
		--av-section-pt: 0.625rem;
	}
}

@media (min-width: 769px) {
	.av-section.av-calc {
		--av-section-pt: 3rem;
		--av-section-pb: 2.25rem;
	}
}

/* ----------------------------------------------------------------- Panel */
/* Intro above the form → two halves from 900px. The panel is the single
   visual unit: one radius, one hairline border, one soft shadow. */
.av-calc .av-calc__grid {
	display: grid;
	overflow: hidden;
	border: 1px solid rgba(11, 31, 51, 0.1);
	border-radius: 8px;
	background-color: #fff;
	box-shadow: 0 28px 56px -44px rgba(11, 31, 51, 0.45);
}

.av-calc .av-calc__grid > *,
.av-calc .av-calc__intro > * {
	margin-block: 0;
}

@media (min-width: 900px) {
	.av-calc .av-calc__grid {
		grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr);
	}
}

/* ----------------------------------------------------------------- Intro */
.av-calc .av-calc__intro {
	position: relative;
	isolation: isolate;
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: 2.25rem 1.5rem 2.5rem;
	background-color: var(--av-calc-navy);
	color: #fff;
}

@media (min-width: 600px) {
	.av-calc .av-calc__intro {
		padding: 2.5rem 2.5rem;
	}
}

@media (min-width: 1200px) {
	.av-calc .av-calc__intro {
		padding: 2.5rem 2.75rem;
	}
}

/* Decoration: a faint 40px security grid fading out from the top-right
   corner, plus a soft brand-blue glow there. Purely background; no photo. */
.av-calc .av-calc__intro::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background-image:
		linear-gradient(rgba(255, 255, 255, 0.045) 1px, transparent 1px),
		linear-gradient(90deg, rgba(255, 255, 255, 0.045) 1px, transparent 1px);
	background-size: 40px 40px;
	background-position: -1px -1px;
	-webkit-mask-image: radial-gradient(ellipse 75% 85% at 100% 0%, #000 0%, transparent 72%);
	mask-image: radial-gradient(ellipse 75% 85% at 100% 0%, #000 0%, transparent 72%);
	pointer-events: none;
}

.av-calc .av-calc__intro::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -2;
	background: radial-gradient(ellipse 70% 60% at 100% 0%, rgba(26, 95, 180, 0.28) 0%, rgba(26, 95, 180, 0) 70%);
	pointer-events: none;
}

.av-calc .av-section__eyebrow {
	color: rgba(255, 255, 255, 0.72);
}

.av-calc .av-calc__title {
	/* A step below the shared section title so it sets in two lines in the
	   navy half on desktop — with ~10% spare width, because the system font
	   stack renders wider on Windows / macOS (Segoe UI, SF) than Arial. */
	font-size: clamp(1.75rem, 1.25rem + 1.5vw, 2.25rem);
	text-wrap: balance;
	color: #fff;
}

.av-calc .av-calc__lead {
	max-width: 30rem;
	margin-top: 1rem;
	color: var(--av-calc-on-navy);
}

.av-calc .av-calc__benefits {
	display: grid;
	gap: 0.65rem;
	margin: 1.5rem 0 0;
	padding: 1.25rem 0 0;
	border-top: 1px solid rgba(255, 255, 255, 0.1);
	list-style: none;
}

.av-calc .av-calc__benefit {
	display: flex;
	align-items: center;
	gap: 0.85rem;
	font-size: 0.975rem;
	font-weight: 600;
	line-height: 1.4;
	color: #fff;
}

.av-calc .av-calc__benefit-icon {
	display: inline-flex;
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	width: 1.75rem;
	height: 1.75rem;
	border: 1px solid rgba(143, 184, 234, 0.35);
	border-radius: 50%;
	background-color: rgba(26, 95, 180, 0.22);
	color: #8fb8ea;
}

/* ------------------------------------------------------------- Form area */
/* Part of the panel: no own border / shadow / radius. */
.av-calc .av-calc__card {
	box-sizing: border-box;
	width: 100%;
	padding: 1.75rem 1.25rem 1.5rem;
	background-color: #fff;
}

@media (min-width: 600px) {
	.av-calc .av-calc__card {
		padding: 2rem 2.5rem 1.75rem;
	}
}

@media (min-width: 900px) {
	.av-calc .av-calc__card {
		display: flex;
		flex-direction: column;
		justify-content: center;
	}
}

@media (min-width: 1200px) {
	.av-calc .av-calc__card {
		padding: 2.125rem 3rem 2rem;
	}
}

.av-calc .av-calc__form {
	display: grid;
	gap: 0.875rem;
	margin: 0;
}

.av-calc .av-calc__form > * {
	margin: 0;
}

/* Name | Phone share a row wherever the form area is wide enough for the
   full phone placeholder (single column at 900–1199px, where the form is
   half of a narrower panel). */
.av-calc .av-calc__row {
	display: grid;
	gap: 0.875rem 1rem;
}

@media (min-width: 600px) and (max-width: 899px), (min-width: 1200px) {
	.av-calc .av-calc__row {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

.av-calc .av-calc__field {
	display: grid;
	gap: 0.35rem;
	min-width: 0;
}

.av-calc .av-calc__label {
	font-size: 0.875rem;
	font-weight: 600;
	line-height: 1.35;
	color: var(--av-ink);
}

.av-calc .av-calc__req {
	color: var(--av-accent);
}

/* Inputs, select and textarea: one control style, no browser chrome. */
.av-calc .av-calc__control {
	box-sizing: border-box;
	width: 100%;
	min-height: 54px;
	margin: 0;
	padding: 0.8rem 1rem;
	border: 1px solid var(--av-calc-line);
	border-radius: 4px;
	background-color: #fff;
	color: var(--av-ink);
	font: inherit;
	font-size: 1rem; /* ≥16px: no iOS zoom on focus */
	line-height: 1.4;
	-webkit-appearance: none;
	appearance: none;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.av-calc .av-calc__control::placeholder {
	color: rgba(11, 31, 51, 0.42);
	opacity: 1;
}

.av-calc .av-calc__control:hover {
	border-color: var(--av-calc-line-strong);
}

/* Focus: brand-blue border + soft ring (replaces the outline, never just
   removes it; Windows High Contrast keeps a transparent outline). */
.av-calc .av-calc__control:focus {
	outline: 2px solid transparent;
}

.av-calc .av-calc__control:focus-visible,
.av-calc .av-calc__control:focus {
	border-color: var(--av-primary);
	box-shadow: 0 0 0 3px var(--av-calc-focus);
}

/* Only flag a field once the visitor has interacted with it. */
.av-calc .av-calc__control:user-invalid {
	border-color: var(--av-accent);
}

.av-calc .av-calc__select {
	padding-right: 2.75rem;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='20' height='20' fill='none' stroke='%230b1f33' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
	background-position: right 0.9rem center;
	background-repeat: no-repeat;
	background-size: 20px 20px;
	cursor: pointer;
}

/* Placeholder option ("Выберите тип объекта") reads as a hint. */
.av-calc .av-calc__select:invalid {
	color: rgba(11, 31, 51, 0.5);
}

.av-calc .av-calc__select option {
	color: var(--av-ink);
}

.av-calc .av-calc__textarea {
	height: 4.75rem; /* ~2 lines; the visitor can still drag it taller */
	min-height: 4.75rem;
	resize: vertical;
}

/* Submit — same look as the site's blue "Получить расчёт" CTAs. */
.av-calc .av-calc__submit {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.75rem;
	width: 100%;
	min-height: 54px;
	margin-top: 0.25rem;
	padding: 0.8rem 1.5rem;
	border: 0;
	border-radius: 2px;
	background-color: var(--av-primary);
	color: #fff;
	font: inherit;
	font-size: 0.95rem;
	font-weight: 600;
	letter-spacing: 0.01em;
	cursor: pointer;
	transition: background-color 0.2s ease;
}

.av-calc .av-calc__submit-arrow {
	flex: 0 0 auto;
	transition: transform 0.2s ease;
}

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

.av-calc .av-calc__submit:hover .av-calc__submit-arrow,
.av-calc .av-calc__submit:focus-visible .av-calc__submit-arrow {
	transform: translateX(3px);
}

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

/* Temporary "not sent" note (TODO Bitrix24) — hidden while empty. */
.av-calc .av-calc__status {
	padding: 0.75rem 0.9rem;
	border-left: 2px solid var(--av-primary);
	border-radius: 2px;
	background-color: rgba(26, 95, 180, 0.07);
	font-size: 0.875rem;
	line-height: 1.5;
	color: var(--av-ink);
}

.av-calc .av-calc__status:empty {
	display: none;
}

.av-calc .av-calc__consent {
	font-size: 0.8125rem;
	line-height: 1.5;
	color: var(--av-ink-muted);
}

.av-calc .av-calc__consent a {
	color: var(--av-primary);
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.2em;
}

.av-calc .av-calc__consent a:hover {
	color: var(--av-primary-hover);
}

.av-calc .av-calc__consent a:focus-visible {
	outline: 2px solid var(--av-primary);
	outline-offset: 2px;
	border-radius: 2px;
}

@media (prefers-reduced-motion: reduce) {
	.av-calc .av-calc__control,
	.av-calc .av-calc__submit,
	.av-calc .av-calc__submit-arrow {
		transition: none;
	}

	.av-calc .av-calc__submit:hover .av-calc__submit-arrow,
	.av-calc .av-calc__submit:focus-visible .av-calc__submit-arrow {
		transform: none;
	}
}