/*
 * AV-Security — «Объекты охраны» page (/obekty/)
 * ----------------------------------------------------------------------------
 * Loaded only on the objects page (inc/objects.php), after sections.css.
 *
 * Section order (templates/page-obekty.html):
 *   01 Hero · 02 Catalog (intro + 3×2 photo grid) · 03 Complex security
 *   (steps + photo with labels + service cards) · 05 How we start (bento) ·
 *   06 Request form
 *
 * Layout follows the approved light mock-up (1024px wide; ×1.406 at 1440).
 * Colours, type, buttons and icons come from the theme: the mock-up's gold
 * accents map to --av-primary (numbers, arrow circles, icons), its short bar
 * above the titles to the site's red eyebrow line (--av-accent).
 *
 * Reuses the theme tokens from main.css (--av-container, --av-ink,
 * --av-ink-deep, --av-primary, --av-primary-hover, --av-accent), the
 * .av-section / .av-container / .av-section__title / __lead primitives and
 * the .av-calc form component from sections.css, and the hero typography
 * (.av-hero__title / __subtitle, main.css). Everything new is .av-obj-*.
 *
 * Breakpoints follow the theme: 600 / 769 / 900 (header overlay) / 1024 /
 * 1200.
 */

/* Only colours that already exist in the theme (no new palette). */
.av-objects-page {
	--av-obj-navy: #0a1a2b;                 /* footer / Technologies navy (sections.css) */
	--av-obj-light: #f3f6f9;                /* light bands (= .av-calc bg, sections.css) */
	--av-obj-soft: var(--wp--preset--color--secondary); /* theme.json #eef2f6 */
	--av-obj-muted: rgba(11, 31, 51, 0.72); /* = --av-ink-muted (sections.css) */
	--av-obj-line: var(--av-hairline);      /* main.css hairline */
	--av-obj-on-navy: #6fa3e6;              /* --av-primary tint on navy (sections.css) */
	--av-obj-gap: 6px;                      /* gutter of the photo grids */
}

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

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

/* Section title with the site's short red line above it (the mock-up's
   accent bar over every heading). */
.av-objects-page .av-obj-title {
	margin: 0;
	font-size: clamp(1.625rem, 1.2rem + 1.5vw, 2.375rem);
	line-height: 1.15;
	text-wrap: balance;
}

.av-objects-page .av-obj-title::before {
	content: "";
	display: block;
	width: 2.25rem;
	height: 3px;
	margin-bottom: 1rem;
	background-color: var(--av-accent);
}

.av-objects-page .av-obj-lead {
	margin: 0;
	max-width: 40rem;
}

.av-obj-head > *,
.av-obj-calc__intro > * {
	margin-block: 0;
}

/* Split heading: title left, lead right (desktop). */
.av-obj-head {
	display: grid;
	gap: 1rem;
}

@media (min-width: 1024px) {
	.av-obj-head {
		grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
		align-items: start;
		gap: 3rem;
	}

	.av-obj-head .av-obj-lead {
		padding-top: 1.1rem;              /* level with the title under its line */
	}
}

.av-obj-icon {
	display: block;
	flex: 0 0 auto;
}

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

.av-objects-page .av-obj-ph {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 0.6rem;
	box-sizing: border-box;
	width: 100%;
	height: 100%;
	padding: 1.25rem 1.25rem 4rem;
	text-align: center;
	color: rgba(255, 255, 255, 0.5);
	background-color: var(--av-obj-navy);
	background-image:
		linear-gradient(160deg, rgba(111, 163, 230, 0.22) 0%, rgba(111, 163, 230, 0) 60%),
		repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.035) 0 1px, transparent 1px 16px);
}

.av-obj-ph .av-obj-ph__icon {
	color: currentColor;
}

.av-obj-ph__label {
	font-size: 0.6875rem;
	font-weight: 600;
	line-height: 1.4;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

/* ==========================================================================
   01 · Hero — industrial checkpoint photo under a navy veil, white text on
   the left (the homepage hero system). The header's navigation row runs over
   the top of it, in solid navy on this page.
   ========================================================================== */

.av-obj-hero {
	--av-hero-under: 0px;
	position: relative;
	isolation: isolate;
	display: flex;
	flex-direction: column;
	justify-content: center;
	min-height: 25rem;
	overflow: hidden;
	background-color: var(--av-obj-navy);
}

.av-obj-hero__media {
	position: absolute;
	inset: 0;
	z-index: -2;
}

.av-obj-hero__img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 80% 50%;            /* truck, barrier and the guard stay in frame */
}

/* Light local veil on the left only (homepage navy), just enough for the
   white text; the rest of the photo keeps its own brightness. */
.av-obj-hero__media::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(90deg, rgba(6, 17, 31, 0.5) 0%, rgba(6, 17, 31, 0.36) 26%, rgba(6, 17, 31, 0.14) 44%, rgba(6, 17, 31, 0) 58%);
	pointer-events: none;
}

/* Phones / small tablets: the text spans the width — show the barrier, the
   gatehouse and the guard, and keep the veil dense across the text. */
@media (max-width: 768.98px) {
	.av-obj-hero__img {
		object-position: 100% 50%;
	}

	.av-obj-hero__media::after {
		background:
			linear-gradient(90deg, rgba(6, 17, 31, 0.74) 0%, rgba(6, 17, 31, 0.6) 55%, rgba(6, 17, 31, 0.35) 100%),
			linear-gradient(180deg, rgba(6, 17, 31, 0) 60%, rgba(6, 17, 31, 0.25) 100%);
	}
}

/* This page only (objects.css is not loaded elsewhere): the navigation row
   over the hero in solid navy — the homepage look — instead of the default
   translucent band, close to the scrolled compact bar (rgba 5,25,43,.98) so
   the cross-fade does not jump. Mobile header unchanged. */
@media (min-width: 900px) {
	.av-hero-overlay .av-header {
		--av-row-bg: rgba(5, 25, 43, 0.94);
	}
}

/* Hero placeholder: a light field (theme greys) instead of the dark default;
   only the caption, bottom right. */
.av-obj-hero .av-obj-ph {
	align-items: flex-end;
	justify-content: flex-end;
	padding: 1.5rem var(--wp--preset--spacing--50);
	color: rgba(11, 31, 51, 0.45);
	background-color: var(--av-obj-soft);
	background-image: linear-gradient(180deg, var(--av-obj-soft) 0%, var(--av-obj-light) 70%, #fff 100%);
}

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

.av-obj-hero__inner {
	position: relative;
	box-sizing: border-box;
	width: 100%;
	padding: calc(var(--av-hero-under) + 3rem) var(--wp--preset--spacing--50) 3.5rem;
}

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

.av-objects-page .av-obj-hero__title {
	font-size: clamp(2.125rem, 1.4rem + 2.8vw, 3.5rem);
	line-height: 1.06;
	color: #fff;
	text-wrap: balance;
}

.av-objects-page .av-obj-hero__subtitle {
	max-width: 30rem;
	margin-top: 1.1rem;
	font-size: clamp(1.0625rem, 0.95rem + 0.5vw, 1.375rem);
	line-height: 1.4;
	color: rgba(255, 255, 255, 0.9);
}

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

@media (min-width: 900px) {
	.av-obj-hero {
		--av-hero-under: 5rem;              /* main.css --av-main-h */
		min-height: 30rem;
	}

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

@media (min-width: 1200px) {
	.av-obj-hero {
		--av-hero-under: 4.625rem;          /* main.css --av-main-h ≥1200 */
		min-height: 32.5rem;                /* ≈ mock-up 368px × 1.406 − utility bar */
	}
}

/* ==========================================================================
   02 · Catalog — compact split intro, then a full-width 3×2 photo grid
   ========================================================================== */

.av-objects-page .av-section.av-obj-catalog {
	--av-section-pt: 2.75rem;
	/* Below 1200px «Комплексная система» opens with its text and its own
	   2.5rem top padding — that alone is the gap. */
	--av-section-pb: 0;
}

.av-objects-page .av-obj-catalog .av-obj-head {
	margin-bottom: 2rem;
}

@media (min-width: 1200px) {
	.av-objects-page .av-section.av-obj-catalog {
		--av-section-pt: 2.5rem;
		/* ≥1200px the complex section's photo starts at its very top, so
		   this is the whole white gap under the cards. */
		--av-section-pb: 1.5rem;
	}

	.av-objects-page .av-obj-catalog .av-obj-head {
		margin-bottom: 1.75rem;
	}
}

.av-obj-grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--av-obj-gap);
	margin: 0;
	padding: 0;
	list-style: none;
}

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

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

.av-obj-card__inner {
	position: relative;
	isolation: isolate;
	display: block;
	aspect-ratio: 3 / 2;
	overflow: hidden;
	background-color: var(--av-obj-navy);
	color: #fff;
	text-decoration: none;
}

/* Desktop: panoramic cards, close to the 1200×560 (≈2.14:1) photos. */
@media (min-width: 1024px) {
	.av-obj-card__inner {
		aspect-ratio: 2.2 / 1;
	}
}

/* Wider than the approved 1440px design (browser zoom-out included): the
   grid stays full width, the cards stop growing taller than its 216px, so
   they keep their size next to the rem-sized text. width: 100% keeps them
   on their 1/3 track (with max-height the aspect-ratio would narrow them). */
@media (min-width: 1441px) {
	.av-obj-card__inner {
		width: 100%;
		max-height: 13.5rem;
	}
}

.av-obj-card__media {
	position: absolute;
	inset: 0;
	z-index: -2;
	display: block;
}

.av-obj-card__img,
.av-obj-card .av-obj-ph {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.6s ease;
}

/*
 * Below 1024px the card is 3:2, so ~30% of the photo width is cropped: keep
 * the main building of each photo in frame. On desktop (2.2:1) the photo
 * fits almost entirely and only the x value has a negligible effect.
 */
.av-obj-card--business-center .av-obj-card__img {
	object-position: 62% 50%;
}

.av-obj-card--production .av-obj-card__img {
	object-position: 55% 50%;
}

.av-obj-card--logistics .av-obj-card__img {
	object-position: 68% 50%;
}

.av-obj-card--retail .av-obj-card__img {
	object-position: 66% 50%;
}

.av-obj-card--residential .av-obj-card__img {
	object-position: 60% 50%;
}

.av-obj-card--construction .av-obj-card__img {
	object-position: 66% 50%;
}

/* Soft dark gradient under the title. */
.av-obj-card__inner::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: linear-gradient(0deg, rgba(6, 17, 31, 0.82) 0%, rgba(6, 17, 31, 0.38) 34%, rgba(6, 17, 31, 0) 62%);
	transition: opacity 0.4s ease;
	pointer-events: none;
}

.av-obj-card__body {
	position: absolute;
	right: 1.25rem;
	bottom: 1.1rem;
	left: 1.25rem;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
}

.av-obj-card__title {
	min-width: 0;
	margin: 0;
	font-size: 1.125rem;
	font-weight: 700;
	line-height: 1.25;
	color: #fff;
}

/* Round arrow button = the homepage service cards' one
   (sections.css .av-service-tile__link a): a 1px white ring, the "→" glyph,
   the same hover / focus and timings. Shared by the complex section's
   service cards (.av-obj-svc__btn only places it). */
.av-obj-card__arrow {
	display: inline-flex;
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
	box-sizing: content-box;
	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;
	transition: border-color 0.5s ease, background-color 0.5s ease;
}

.av-obj-card__arrow-icon {
	display: inline-block;
	transition: transform 0.5s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.av-obj-card:hover .av-obj-card__img,
.av-obj-card:hover .av-obj-ph {
	transform: scale(1.045);
}

.av-obj-card:hover .av-obj-card__inner::after {
	opacity: 0.85;
}

/* Hovering anywhere on the card (as on the homepage): the ring turns white
   over a faint white fill and the arrow nudges right. A card with a URL gets
   the same on keyboard focus. */
.av-obj-card:hover .av-obj-card__arrow,
a.av-obj-card__inner:focus-visible .av-obj-card__arrow,
.av-obj-svc:hover .av-obj-card__arrow,
a.av-obj-svc__inner:focus-visible .av-obj-card__arrow {
	border-color: #fff;
	background-color: rgba(255, 255, 255, 0.08);
}

.av-obj-card:hover .av-obj-card__arrow-icon,
a.av-obj-card__inner:focus-visible .av-obj-card__arrow-icon,
.av-obj-svc:hover .av-obj-card__arrow-icon,
a.av-obj-svc__inner:focus-visible .av-obj-card__arrow-icon {
	transform: translateX(3px);
}

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

@media (min-width: 1200px) {
	.av-obj-card__body {
		right: 1.5rem;
		bottom: 1.25rem;
		left: 1.5rem;
	}

	.av-obj-card__title {
		font-size: 1.25rem;
	}
}

/* ==========================================================================
   03 · Complex security — the approved mock-up
   (/home/aleks/obekty-security-system-reference.png, 1774×887) fitted into
   the site container (.av-section .av-container: 1132px of content at
   1280–1920, the header's edges): text left, aerial photo on the right of
   the container with four labels and dotted connectors, four low horizontal
   cards overlapping the bottom. Only the white ground is full width.
   ========================================================================== */

.av-objects-page .av-section.av-obj-complex {
	--av-section-pt: 2.5rem;
	--av-section-pb: 2.5rem;
	--av-cx-num: 3rem;                     /* step number circle (48px) */
	--av-cx-steps-gap: 0.95rem;
	--av-cx-blue: #2f7de1;                 /* mock-up label icons / dots: the brand blue, brighter for navy */
	--av-cx-label-bg: rgba(9, 22, 40, 0.86);
	--av-cx-tag-w: 13.5rem;                /* label width over the photo */
	--av-cx-ease: cubic-bezier(0.22, 0.61, 0.36, 1);  /* card hover (ease-out) */
	position: relative;
	overflow-x: clip;
	background-color: #fff;
}

/* ---------------------------------------------------------------- Intro */

/* Positioning box inside the container: the photo is placed against its
   right edge (= the container's right edge). */
.av-obj-complex__stage {
	position: relative;
}

.av-obj-complex__stage > * {
	margin-block: 0;
}

.av-obj-complex__intro {
	position: relative;
	z-index: 1;
}

.av-obj-complex__intro > * {
	margin-block: 0;
}

/* Red line above a quiet grey label. */
.av-objects-page .av-obj-complex .av-obj-complex__eyebrow {
	flex-direction: column;
	align-items: flex-start;
	gap: 1rem;
	margin-bottom: 0.5rem;
	font-size: 0.875rem;
	font-weight: 600;
	letter-spacing: 0.01em;
	color: rgba(11, 31, 51, 0.42);
}

.av-objects-page .av-obj-complex .av-obj-complex__eyebrow::before {
	width: 2rem;
	height: 3px;
}

.av-objects-page .av-obj-complex .av-obj-complex__title {
	font-size: clamp(2.25rem, 1.6rem + 2.6vw, 3.125rem);
	font-weight: 800;
	line-height: 0.9;
	letter-spacing: -0.03em;
	color: var(--av-ink);
}

.av-objects-page .av-obj-complex .av-obj-complex__lead {
	max-width: 26rem;
	margin-top: 1.1rem;
	font-size: 1.0625rem;
	line-height: 1.27;
	color: rgba(11, 31, 51, 0.76);
}

/* Steps: compact, blue circles joined by a thin grey line. */
.av-objects-page .av-obj-complex .av-obj-steps {
	display: grid;
	gap: var(--av-cx-steps-gap);
	max-width: 23.75rem;
	margin: 1.25rem 0 0;
	padding: 0;
	list-style: none;
}

.av-obj-step {
	position: relative;
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	align-items: start;
	gap: 1.625rem;
}

.av-obj-step:not(:last-child)::before {
	content: "";
	position: absolute;
	top: calc(var(--av-cx-num) + 0.375rem);
	bottom: calc(var(--av-cx-steps-gap) * -1 + 0.375rem);
	left: calc(var(--av-cx-num) / 2 - 1px);
	width: 2px;
	background-color: #d5dce4;
}

.av-obj-step__num {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: var(--av-cx-num);
	height: var(--av-cx-num);
	border-radius: 50%;
	background-color: var(--av-primary);
	box-shadow: 0 8px 16px -10px rgba(26, 95, 180, 0.9);
	color: #fff;
	font-size: 0.8125rem;
	font-weight: 700;
	letter-spacing: 0.02em;
}

.av-obj-step__body {
	padding-top: 0.2rem;
}

.av-obj-step__title {
	margin: 0;
	font-size: 1.03rem;
	font-weight: 700;
	line-height: 1.25;
	letter-spacing: -0.01em;
	color: var(--av-ink);
}

.av-obj-step__text {
	margin: 0.15rem 0 0;
	font-size: 0.84rem;
	line-height: 1.33;
	color: rgba(11, 31, 51, 0.7);
}

/* ---------------------------------------------------------------- Photo
   __frame clips the photo. __canvas (the photo) and __layer (connectors,
   dots, labels) share the photo's own geometry (1672×941), so everything is
   placed in % of the picture and stays on the same spot at every width.
   Phones / tablets: the canvas is wider than the frame and right-aligned —
   the white left third of the file is cut off. */

.av-obj-hub {
	position: relative;
	margin: 2rem 0 0;
}

.av-obj-hub__frame {
	position: relative;
	overflow: hidden;
	aspect-ratio: 4 / 3;
	-webkit-mask-image:
		linear-gradient(90deg, transparent 0, #000 14%),
		linear-gradient(180deg, transparent 0, #000 8%, #000 90%, transparent 100%);
	-webkit-mask-composite: source-in;
	mask-image:
		linear-gradient(90deg, transparent 0, #000 14%),
		linear-gradient(180deg, transparent 0, #000 8%, #000 90%, transparent 100%);
	mask-composite: intersect;
}

.av-obj-hub__canvas {
	position: absolute;
	top: 50%;
	right: 0;
	width: 150%;
	aspect-ratio: 1672 / 941;
	transform: translateY(-50%);
}

.av-obj-hub__img,
.av-obj-hub__canvas .av-obj-ph {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Labels: navy glass, bright blue line icon without a frame, two white
   lines of equal weight (mock-up ≈205×62px). */
.av-obj-hub__pins {
	margin: 0;
	padding: 0;
	list-style: none;
}

.av-obj-tag {
	display: grid;
	grid-template-columns: 2rem minmax(0, 1fr);  /* same icon slot and text start in every label */
	align-items: center;
	column-gap: 1rem;
	box-sizing: border-box;
	min-height: 4rem;
	padding: 0.75rem 1rem;
	border: 1px solid rgba(255, 255, 255, 0.14);
	border-radius: 10px;
	background-color: var(--av-cx-label-bg);
	-webkit-backdrop-filter: blur(4px);
	backdrop-filter: blur(4px);
	box-shadow: 0 14px 30px -18px rgba(6, 17, 31, 0.8);
	font-size: 0.9375rem;
	font-weight: 500;
	line-height: 1.3;
	color: #fff;
}

.av-obj-tag .av-obj-tag__icon {
	flex: 0 0 auto;
	width: 2rem;
	height: 2rem;
	color: var(--av-cx-blue);
}

.av-obj-tag__text {
	display: block;
}

.av-obj-tag__line {
	display: block;
	line-height: 1.3;
}

/* Blue dots on the guarded zones and the connector layer. */
.av-obj-dot {
	position: absolute;
	top: var(--y);
	left: var(--x);
	box-sizing: border-box;
	width: 15px;
	height: 15px;
	border: 2.5px solid #fff;
	border-radius: 50%;
	background-color: var(--av-cx-blue);
	box-shadow: 0 0 0 4px rgba(47, 125, 225, 0.25), 0 0 14px 2px rgba(47, 125, 225, 0.6);
	transform: translate(-50%, -50%);
}

.av-obj-hub__lines {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	overflow: visible;
	fill: none;
	pointer-events: none;
}

.av-obj-hub__link {
	stroke: rgba(255, 255, 255, 0.92);
	stroke-width: 2.4;
	stroke-linecap: round;
	stroke-dasharray: 0.1 6;
	vector-effect: non-scaling-stroke;
}

.av-obj-hub__arc {
	stroke: rgba(47, 125, 225, 0.75);
	stroke-width: 1.2;
	stroke-dasharray: 4 5;
	vector-effect: non-scaling-stroke;
}

/* Phones / tablets: the photo band is full width (out of the container
   padding: spacing-50 up to 768px, 3 × spacing-50 from 769px — the
   .av-section .av-container rule in sections.css below 1228px). */
@media (max-width: 768.98px) {
	.av-objects-page .av-obj-complex .av-obj-hub {
		margin-inline: calc(var(--wp--preset--spacing--50) * -1);
	}
}

@media (min-width: 769px) and (max-width: 1199.98px) {
	.av-objects-page .av-obj-complex .av-obj-hub {
		margin-inline: calc(var(--wp--preset--spacing--50) * -3);
	}
}

/* Phones / small tablets: labels form a list under the photo (over a narrow
   photo they would cover it and each other); no dots / connectors. */
@media (max-width: 768.98px) {
	.av-obj-hub__lines,
	.av-obj-dot {
		display: none;
	}

	.av-obj-hub__pins {
		display: grid;
		grid-template-columns: minmax(0, 1fr);
		gap: 0.6rem;
		margin: 0.25rem var(--wp--preset--spacing--50) 0;
	}
}

@media (min-width: 480px) and (max-width: 768.98px) {
	.av-obj-hub__pins {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/* From 769px the layer sits exactly over the photo; labels by their mock-up
   position (% of the photo). */
@media (min-width: 769px) {
	.av-obj-hub__layer {
		position: absolute;
		top: 50%;
		right: 0;
		width: 150%;
		aspect-ratio: 1672 / 941;
		transform: translateY(-50%);
		pointer-events: none;
	}

	.av-obj-tag {
		position: absolute;
		top: var(--ty);
		left: min(var(--tx), calc(100% - var(--av-cx-tag-w) - 1rem));   /* ≥16px from the screen edge */
		width: var(--av-cx-tag-w);
		white-space: nowrap;
	}
}

/* Tablets: full-bleed photo under the text. */
@media (min-width: 769px) and (max-width: 1199.98px) {
	.av-obj-hub {
		margin-top: 1.5rem;
	}

	.av-obj-hub__frame {
		aspect-ratio: 3 / 2;
	}

	.av-obj-hub__canvas,
	.av-obj-hub__layer {
		width: 140%;
	}

	/* The photo is cropped top / bottom here: the arcs would run off it. */
	.av-obj-hub__arc {
		display: none;
	}
}

/* Desktop: one ≈2:1 screen in two levels, like the «Услуги» hero — the
   photo layer full width behind (level 1), the text and the cards in the
   site container (level 2); the cards overlap the bottom of the photo. */
@media (min-width: 1200px) {
	.av-objects-page .av-section.av-obj-complex {
		--av-section-pt: 2rem;
		--av-section-pb: 2.3rem;
		overflow: clip;
	}

	/* Level 2 — content in the site container (left edge = header / other
	   sections). Text sizes: the mock-up at 1440. */
	.av-obj-complex__intro {
		max-width: 31rem;
	}

	.av-objects-page .av-obj-complex .av-obj-complex__title {
		font-size: clamp(2.375rem, 2.95vw, 2.75rem);
		line-height: 0.9;
	}

	/* Level 1 — the photo layer spans the whole section (100% of the
	   viewport, like the «Услуги» hero), positioned against the section,
	   not the container. The picture itself is 90% of that width from the
	   right screen edge (the mock-up's scale — wider would over-zoom the
	   complex); its own white haze plus the mask dissolve it into the white
	   on the left. No fade on the right. */
	.av-obj-complex__stage {
		position: static;
	}

	.av-obj-hub {
		position: absolute;
		top: 0;
		right: 0;
		left: 0;
		z-index: 0;
		margin: 0;
	}

	.av-obj-hub__frame {
		aspect-ratio: 1672 / 847;            /* the photo's height at 90% width */
		-webkit-mask-image:
			linear-gradient(90deg, transparent 0, transparent 21%, #000 41%),
			linear-gradient(180deg, #000 0, #000 76%, rgba(0, 0, 0, 0.86) 81%, rgba(0, 0, 0, 0.64) 86%, rgba(0, 0, 0, 0.4) 90%, rgba(0, 0, 0, 0.2) 93.5%, rgba(0, 0, 0, 0.07) 96.5%, transparent 99%);
		mask-image:
			linear-gradient(90deg, transparent 0, transparent 21%, #000 41%),
			linear-gradient(180deg, #000 0, #000 76%, rgba(0, 0, 0, 0.86) 81%, rgba(0, 0, 0, 0.64) 86%, rgba(0, 0, 0, 0.4) 90%, rgba(0, 0, 0, 0.2) 93.5%, rgba(0, 0, 0, 0.07) 96.5%, transparent 99%);
	}

	.av-obj-hub__canvas,
	.av-obj-hub__layer {
		top: 0;
		width: 90%;
		transform: none;
	}

}

/* ---------------------------------------------------------------- Cards
   Low horizontal cards (mock-up ≈335×166px at 1440): white, soft shadow;
   number + icon, title and text on the left; the photo on the right,
   fading into the white; a white round arrow button bottom right. */

.av-obj-complex__bottom {
	position: relative;
	z-index: 2;
	margin-top: 2rem;
}

@media (min-width: 1200px) {
	.av-obj-complex__bottom {
		margin-top: 1.1rem;
	}
}

.av-obj-svcs {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 0.75rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

@media (min-width: 600px) {
	.av-obj-svcs {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 1200px) {
	.av-obj-svcs {
		grid-template-columns: repeat(4, minmax(0, 1fr));
		gap: 0.5625rem;
	}
}

.av-obj-svc__inner {
	position: relative;
	display: flex;
	box-sizing: border-box;
	height: 100%;
	min-height: 10.375rem;
	overflow: hidden;
	border-radius: 6px;
	background-color: #fff;
	/* Third shadow: the hover frame, transparent at rest (no visual change). */
	box-shadow: 0 12px 30px -16px rgba(11, 31, 51, 0.3), 0 1px 3px rgba(11, 31, 51, 0.06), 0 0 0 1px rgba(26, 95, 180, 0);
	color: var(--av-ink);
	text-decoration: none;
	transition:
		transform 0.3s var(--av-cx-ease),
		box-shadow 0.3s var(--av-cx-ease);
}

.av-obj-svc__media {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	display: block;
	overflow: hidden;                      /* the hover zoom stays inside the slot */
	width: 60%;
	/* Eased fade (no visible vertical edge): transparent under the end of
	   the text column, full photo from about half of the slot. */
	-webkit-mask-image: linear-gradient(90deg, transparent 0, transparent 12%, rgba(0, 0, 0, 0.08) 17%, rgba(0, 0, 0, 0.25) 23%, rgba(0, 0, 0, 0.5) 30%, rgba(0, 0, 0, 0.75) 37%, rgba(0, 0, 0, 0.92) 45%, #000 54%);
	mask-image: linear-gradient(90deg, transparent 0, transparent 12%, rgba(0, 0, 0, 0.08) 17%, rgba(0, 0, 0, 0.25) 23%, rgba(0, 0, 0, 0.5) 30%, rgba(0, 0, 0, 0.75) 37%, rgba(0, 0, 0, 0.92) 45%, #000 54%);
}

.av-obj-svc__img,
.av-obj-svc__media .av-obj-ph {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.45s var(--av-cx-ease);
}

/* Below the 4-column desktop row the cards are wider: keep the text on
   the white part, the photo narrower on the right. */
@media (max-width: 1199.98px) {
	.av-obj-svc__media {
		width: 44%;
	}

	.av-obj-svc .av-obj-svc__body {
		width: 64%;
		padding-right: 0.5rem;
	}
}

/* Portrait photos (226×339): on desktop the slot has nearly the same
   proportion; in the wider tablet / phone slots they are cropped top /
   bottom — keep the head and the logo, the dome camera, the turnstile arms,
   the operator and the screens. */
.av-obj-svc--physical .av-obj-svc__img   { object-position: 50% 15%; }  /* head and shoulders */
.av-obj-svc--cctv .av-obj-svc__img       { object-position: 50% 40%; }  /* the whole dome */
.av-obj-svc--access .av-obj-svc__img     { object-position: 50% 62%; }  /* turnstile arms */
.av-obj-svc--monitoring .av-obj-svc__img { object-position: 50% 28%; }  /* the monitor wall */

.av-obj-svc__body {
	position: relative;
	display: flex;
	flex-direction: column;
	box-sizing: border-box;
	width: 72%;
	padding: 1.25rem 0 1rem 1.45rem;
}

.av-obj-svc__head {
	display: flex;
	align-items: center;
	gap: 1.1rem;
	margin-bottom: 0.85rem;
}

.av-obj-svc__num {
	font-size: 0.8125rem;
	font-weight: 500;
	letter-spacing: 0.02em;
	color: rgba(11, 31, 51, 0.55);
}

.av-obj-svc .av-obj-svc__icon {
	width: 1.875rem;
	height: 1.875rem;
	color: var(--av-primary);
}

.av-obj-svc__title {
	margin: 0;
	font-size: 1.0625rem;
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: -0.01em;
	color: var(--av-ink);
}

.av-obj-svc__text {
	display: block;
	margin-top: 0.45rem;
	font-size: 0.8125rem;
	line-height: 1.38;
	color: rgba(11, 31, 51, 0.68);
}

/* Round arrow button, bottom right over the photo: the catalog's
   .av-obj-card__arrow (02 above); this only places it. */
.av-obj-svc__btn {
	position: absolute;
	right: 1.2rem;
	bottom: 0.75rem;
}

/* Hover (mouse / trackpad only — touch screens keep the static card):
   lift 5px with a deeper shadow and a light blue frame, photo zoom 4%
   inside its masked slot, the arrow button turns brand blue. The cards are
   not links yet ('url' = ''): the effect is visual only — no pointer
   cursor, no tab stop. A card with a URL is an <a> and gets the same
   highlight on :focus-visible. Everything eases back on leave (the same
   transitions run both ways). The arrow button's hover is the catalog's. */
@media (hover: hover) and (pointer: fine) {
	.av-obj-svc:hover .av-obj-svc__inner {
		transform: translateY(-5px);
		box-shadow: 0 20px 36px -18px rgba(11, 31, 51, 0.42), 0 3px 8px rgba(11, 31, 51, 0.08), 0 0 0 1px rgba(26, 95, 180, 0.28);
	}

	.av-obj-svc:hover .av-obj-svc__img,
	.av-obj-svc:hover .av-obj-svc__media .av-obj-ph {
		transform: scale(1.04);
	}

}

a.av-obj-svc__inner:focus-visible {
	transform: translateY(-5px);
	outline: 2px solid var(--av-primary);
	outline-offset: 3px;
	box-shadow: 0 20px 36px -18px rgba(11, 31, 51, 0.42), 0 3px 8px rgba(11, 31, 51, 0.08), 0 0 0 1px rgba(26, 95, 180, 0.28);
}

a.av-obj-svc__inner:focus-visible .av-obj-svc__img {
	transform: scale(1.04);
}

/* Desktop row in the site container (4 × ≈276px at 1440): the mock-up's
   card height (≈166px), text kept readable. */
@media (min-width: 1200px) {
	.av-obj-svc__inner {
		min-height: 10.375rem;
	}

	/* Photo slot from 56% of the card; the eased fade above keeps it
	   transparent up to the end of the text column (≈177 of 276px). */
	.av-obj-svc__media {
		width: 44%;
	}

	.av-obj-svc__body {
		width: 66%;
		padding: 1.1rem 0 0.95rem 1.25rem;
	}

	.av-obj-svc__head {
		gap: 0.95rem;
		margin-bottom: 0.7rem;
	}

	.av-obj-svc .av-obj-svc__icon {
		width: 1.75rem;
		height: 1.75rem;
	}

	.av-obj-svc__title {
		font-size: 1rem;
	}

	.av-obj-svc__text {
		margin-top: 0.4rem;
		font-size: 0.8125rem;
		line-height: 1.38;
	}

	.av-obj-svc__btn {
		right: 1rem;
		bottom: 0.8rem;
	}
}

/* ==========================================================================
   05 · How we start — bento to the approved mock-up v2
   (/home/aleks/obekty-process-approved-v2.png, 1536×1024; its site
   container is 145–1392px, ≈1.10× ours). The section starts on the light
   ground right under the «Комплексная система» cards: red line, eyebrow,
   the one-line title and the lead; the inspection photo card below / right
   of the title with a notch under the intro and the navy step 01 panel on
   its right; steps 02 | 03; step 04. ≥1200px the cards run 2.5rem past the
   site container on each side (the mock-up's 101–1435px). Photos 02–04
   (and 01 below 1200px) fade to WHITE on their left in the files — a navy
   fade covers that part only; ≥1200px the step 01 photo keeps its light
   left, tinted the mock-up's pale blue.
   ≥769px: text over the left of the photo; ≤768px: photo band on top,
   text below.
   ========================================================================== */

.av-objects-page .av-section.av-obj-proc {
	--av-proc-navy: #0a1a2b;               /* = --av-obj-navy */
	--av-proc-blue: #2f7de1;               /* numbers / icons on navy (= complex section labels) */
	--av-proc-radius: 4px;                 /* = the homepage photo cards (sections.css .av-service-tile, .av-object-card) */
	--av-proc-gap: 0.5rem;
	--av-proc-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
	--av-section-pt: 2.5rem;
	--av-section-pb: 2.5rem;
	overflow-x: clip;
	/* White, easing into the light ground of the next section (the request
	   form, --av-obj-light) under the cards — no hard edge. */
	background-color: #fff;
	background-image: linear-gradient(180deg, #fff 0, #fff 45%, var(--av-obj-light) 100%);
}

.av-obj-proc__top,
.av-obj-proc__intro,
.av-obj-proc__rest {
	position: relative;
}

.av-obj-proc__top > *,
.av-obj-proc__intro > *,
.av-obj-proc__rest > * {
	margin-block: 0;
}

/* ---------------------------------------------------------------- Intro */

.av-objects-page .av-obj-proc .av-obj-proc__eyebrow {
	flex-direction: column;
	align-items: flex-start;
	gap: 0.85rem;
	margin-bottom: 0.5rem;
	font-size: 0.75rem;
	letter-spacing: 0.16em;
	color: rgba(11, 31, 51, 0.55);
}

.av-objects-page .av-obj-proc .av-obj-proc__eyebrow::before {
	width: 2rem;
	height: 3px;
}

.av-objects-page .av-obj-proc .av-obj-proc__heading {
	font-size: clamp(2rem, 1.5rem + 2vw, 2.75rem);
	font-weight: 800;
	line-height: 1.02;
	letter-spacing: -0.03em;
	text-wrap: balance;
}

.av-objects-page .av-obj-proc .av-obj-proc__lead {
	max-width: 25rem;
	margin-top: 0.8rem;
	font-size: 0.9375rem;
	line-height: 1.45;
	color: rgba(11, 31, 51, 0.72);
}

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

.av-obj-proc__top {
	display: grid;
	gap: 1.75rem;
}

.av-obj-proc__rest {
	margin-top: var(--av-proc-gap);
}

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

.av-obj-proc__card {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	border-radius: var(--av-proc-radius);
	background-color: var(--av-proc-navy);
	box-shadow: 0 14px 30px -20px rgba(6, 17, 31, 0.6), 0 0 0 1px rgba(111, 163, 230, 0);
	color: #fff;
	transition: box-shadow 0.35s var(--av-proc-ease);
}

.av-obj-proc__media {
	position: relative;
	display: block;
	overflow: hidden;
}

.av-obj-proc__img,
.av-obj-proc__media .av-obj-ph {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.55s cubic-bezier(0.22, 1, 0.36, 1);
}

.av-obj-proc__body {
	position: relative;
	z-index: 1;
	box-sizing: border-box;
}

.av-obj-proc__head {
	display: flex;
	align-items: center;
	gap: 1.1rem;
}

.av-obj-proc__num {
	font-size: clamp(2.5rem, 2rem + 1.4vw, 3rem);
	font-weight: 800;
	line-height: 0.9;
	letter-spacing: -0.04em;
	color: var(--av-proc-blue);
	transition: color 0.35s var(--av-proc-ease), text-shadow 0.35s var(--av-proc-ease);
}

.av-obj-proc__icon {
	display: inline-flex;
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	width: 2.875rem;
	height: 2.875rem;
	border: 1.5px solid rgba(47, 125, 225, 0.75);
	border-radius: 7px;
	background-color: rgba(47, 125, 225, 0.08);
	color: #4d8fea;
}

.av-obj-proc__copy > * {
	margin-block: 0;
}

.av-objects-page .av-obj-proc .av-obj-proc__title {
	margin-top: 0.85rem;
	font-size: 1.1875rem;
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: -0.01em;
	color: #fff;
}

.av-obj-proc__text {
	margin-top: 0.55rem;
	font-size: 0.875rem;
	line-height: 1.42;
	color: rgba(255, 255, 255, 0.84);
}

/* Photo crops: keep the subject (guard + tablet, drawing hand + helmet,
   guard with the radio, operator + monitors). */
.av-obj-proc__card--inspection .av-obj-proc__img { object-position: 38% 25%; }
.av-obj-proc__card--planning .av-obj-proc__img   { object-position: 78% 50%; }
.av-obj-proc__card--deployment .av-obj-proc__img { object-position: 62% 30%; }
.av-obj-proc__card--monitoring .av-obj-proc__img { object-position: 46% 40%; }

/* ≤768px: photo band on top, text on navy below. */
@media (max-width: 768.98px) {
	.av-obj-proc__media {
		aspect-ratio: 16 / 9;
	}

	.av-obj-proc__media::after {
		content: "";
		position: absolute;
		inset: 0;
		background: linear-gradient(180deg, rgba(10, 26, 43, 0) 55%, rgba(10, 26, 43, 0.85) 92%, var(--av-proc-navy) 100%);
		pointer-events: none;
	}

	.av-obj-proc__body {
		padding: 0.25rem 1.4rem 1.6rem;
	}
}

@media (min-width: 600px) and (max-width: 768.98px) {
	.av-obj-proc__media {
		aspect-ratio: 2 / 1;
	}
}

/* ≥769px: the photo fills the card; the text sits on a navy fade over the
   photo's own white-faded left part. */
@media (min-width: 769px) {
	.av-obj-proc__media {
		position: absolute;
		inset: 0;
		z-index: -1;
	}

	.av-obj-proc__media::after {
		content: "";
		position: absolute;
		inset: 0;
		background: linear-gradient(90deg, var(--av-proc-navy) 0%, var(--av-proc-navy) var(--av-proc-solid, 30%), rgba(10, 26, 43, 0.72) calc(var(--av-proc-solid, 30%) + 10%), rgba(10, 26, 43, 0) var(--av-proc-clear, 60%));
		pointer-events: none;
	}

	.av-obj-proc__card {
		display: flex;
		align-items: center;
		min-height: 15rem;
	}

	.av-obj-proc__body {
		max-width: var(--av-proc-text, 22rem);
		padding: 1.6rem 1rem 1.6rem 1.75rem;
	}

	.av-obj-proc__card--inspection { --av-proc-solid: 34%; --av-proc-clear: 62%; --av-proc-text: 20rem; }
	.av-obj-proc__card--planning   { --av-proc-solid: 32%; --av-proc-clear: 58%; --av-proc-text: 17rem; }
	.av-obj-proc__card--deployment { --av-proc-solid: 32%; --av-proc-clear: 54%; --av-proc-text: 17rem; }
	.av-obj-proc__card--monitoring { --av-proc-solid: 22%; --av-proc-clear: 42%; --av-proc-text: 20rem; }

	.av-obj-proc__card--deployment .av-obj-proc__img { object-position: 0% 30%; }

	/* Step 01 (project manager on the left of the file): the photo at 70% of
	   the card, right-aligned, natural ratio, so he sits right of the text. */
	.av-obj-proc__card--inspection .av-obj-proc__img {
		position: absolute;
		top: 0;
		right: 0;
		width: 70%;
		height: auto;
		min-height: 100%;
		object-fit: cover;
		object-position: 30% 20%;
	}
	.av-obj-proc__card--monitoring .av-obj-proc__img { object-position: 20% 40%; }
}

/* ≥1200px — the mock-up v2. */
@media (min-width: 1200px) {
	.av-objects-page .av-section.av-obj-proc {
		--av-proc-out: 2.5rem;                 /* cards past the site container (mock-up 44px) */
		--av-proc-gap: 0.5rem;
		--av-section-pt: 0;                    /* the red line ≈2.4rem under the complex cards */
		--av-section-pb: 2.5rem;
	}

	/* Row 1 — restored earlier composition: the inspection photo spans the
	   screen behind the row (object-fit: cover; its own white left part
	   under the text, the guard in the middle, the building on the right),
	   no plate or box behind the text. The photo is a card on the same
	   edges as cards 02–04 (the site container's padding − 2.5rem; same
	   radius), not full-bleed; the image covers it without distortion,
	   anchored left. The intro sits on the site's text line (+2.5rem), the
	   step 01 panel 1.5rem inside the photo's right edge. */
	.av-objects-page .av-section.av-obj-proc {
		--av-proc-card-edge: calc(max(var(--wp--preset--spacing--50) * 3, (100% - var(--av-container)) / 2 + var(--wp--preset--spacing--50)) - var(--av-proc-out));   /* = rows 2–3 */
		--av-section-pt: 1.5rem;
	}

	.av-objects-page .av-obj-proc .av-container.av-obj-proc__top {
		padding-inline: calc(var(--av-proc-card-edge) + var(--av-proc-out)) calc(var(--av-proc-card-edge) + 1.5rem);
	}

	.av-obj-proc__top {
		isolation: isolate;
		grid-template-columns: minmax(0, 1fr) auto;
		align-items: center;
		gap: 0 2rem;
		min-height: 20rem;
		padding-block: 1.75rem;
	}

	.av-obj-proc__top > .av-obj-proc__card--inspection {
		display: contents;
	}

	.av-obj-proc__intro {
		z-index: 1;
		grid-column: 1;
		grid-row: 1;
	}

	.av-objects-page .av-obj-proc .av-obj-proc__eyebrow {
		font-size: min(0.8125rem, 0.9vw);
	}

	.av-objects-page .av-obj-proc .av-obj-proc__heading {
		font-size: min(3.375rem, 3.75vw);
		line-height: 0.95;
		text-wrap: nowrap;                     /* two lines via <br> */
	}

	.av-objects-page .av-obj-proc .av-obj-proc__lead {
		max-width: min(24rem, 28vw);            /* clear of the guard's shoulder */
		margin-top: 1.25rem;
		font-size: clamp(0.875rem, 1.1vw, 1rem);
		line-height: 1.42;
	}

	.av-obj-proc__card--inspection .av-obj-proc__media {
		position: absolute;
		top: 0;
		right: var(--av-proc-card-edge);
		bottom: 0;
		left: var(--av-proc-card-edge);
		z-index: -1;
		overflow: hidden;
		border-radius: var(--av-proc-radius);  /* = cards 02–04 */
	}

	/* Light ground on the left (under the intro) and the photo laid at
	   75% of the box width, right-aligned, natural ratio (no distortion):
	   the project manager sits between the title and the step 01 panel.
	   Its left edge dissolves into the light ground; a white wash keeps
	   the text readable. */
	.av-obj-proc__card--inspection .av-obj-proc__media {
		background: linear-gradient(90deg, #fff 0%, #f4f8fc 30%, #e4edf8 100%);
	}

	.av-obj-proc__card--inspection .av-obj-proc__img {
		position: absolute;
		top: 0;
		right: 0;
		width: 75.25%;
		height: auto;
		object-fit: fill;                      /* box = natural ratio */
		transform-origin: 50% 30%;
		-webkit-mask-image: linear-gradient(90deg, transparent 0, rgba(0, 0, 0, 0.5) 10%, #000 20%);
		mask-image: linear-gradient(90deg, transparent 0, rgba(0, 0, 0, 0.5) 10%, #000 20%);
	}

	.av-obj-proc__card--inspection .av-obj-proc__media::after {
		content: "";
		background: linear-gradient(90deg, rgba(255, 255, 255, 0.92) 0%, rgba(255, 255, 255, 0.85) 28%, rgba(255, 255, 255, 0.35) 36%, rgba(255, 255, 255, 0) 41%);
		mix-blend-mode: normal;
	}

	.av-obj-proc__top > .av-obj-proc__card--inspection > .av-obj-proc__body {
		grid-column: 2;
		grid-row: 1;
	}

	/* Step 01 panel (mock-up ≈297×192, scaled): number | icon, the title and
	   the text in the icon column, a thin blue line under the number. */
	.av-obj-proc__card--inspection .av-obj-proc__body {
		display: grid;
		grid-template-columns: auto minmax(0, 1fr);
		column-gap: 1.25rem;
		align-content: center;
		width: 19.75rem;
		max-width: none;
		padding: 1rem 1.15rem 0.95rem 1.5rem;
		border: 1px solid rgba(111, 163, 230, 0.45);
		border-radius: 10px;
		background-color: rgba(8, 22, 44, 0.9);   /* no backdrop blur: the photo stays sharp */
	}

	.av-obj-proc__card--inspection .av-obj-proc__head,
	.av-obj-proc__card--inspection .av-obj-proc__copy {
		display: contents;
	}

	.av-obj-proc__card--inspection .av-obj-proc__body::before {
		content: "";
		grid-column: 1;
		grid-row: 2 / 4;
		justify-self: start;
		width: 2px;
		margin: 0.9rem 0 0.2rem 0.2rem;
		background-color: rgba(47, 125, 225, 0.8);
	}

	.av-obj-proc__card--inspection .av-obj-proc__num {
		grid-column: 1;
		grid-row: 1;
	}

	.av-obj-proc__card--inspection .av-obj-proc__icon {
		grid-column: 2;
		grid-row: 1;
		justify-self: start;
	}

	.av-objects-page .av-obj-proc .av-obj-proc__card--inspection .av-obj-proc__title {
		grid-column: 2;
		grid-row: 2;
		margin-top: 0.85rem;
		font-size: 1.0625rem;
	}

	.av-obj-proc__card--inspection .av-obj-proc__text {
		grid-column: 2;
		grid-row: 3;
		margin-top: 0.6rem;
		font-size: 0.84375rem;
	}

	/* Rows 2–3: the cards on the same outer edges as the photo card. */
	.av-objects-page .av-obj-proc .av-container.av-obj-proc__rest {
		padding-inline: calc(max(var(--wp--preset--spacing--50) * 3, (100% - var(--av-container)) / 2 + var(--wp--preset--spacing--50)) - var(--av-proc-out));   /* = the site container's padding (sections.css) − 2.5rem */
	}

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

	.av-obj-proc__card--monitoring {
		grid-column: 1 / -1;
	}

	.av-obj-proc__grid .av-obj-proc__card {
		min-height: 13rem;
	}

	.av-obj-proc__grid .av-obj-proc__body {
		padding: 1.4rem 0.75rem 1.4rem 1.6rem;
	}

	/* Text columns and fades ≈ the mock-up's (≈38% / 22% of the card). */
	.av-obj-proc__card--planning   { --av-proc-text: 16rem; --av-proc-solid: 34%; --av-proc-clear: 56%; }
	.av-obj-proc__card--deployment { --av-proc-text: 16.5rem; --av-proc-solid: 35%; --av-proc-clear: 52%; }
	.av-obj-proc__card--monitoring { --av-proc-text: 19rem; --av-proc-solid: 21%; --av-proc-clear: 37%; }

	.av-obj-proc__card--planning .av-obj-proc__img   { object-position: 50% 45%; }
	.av-obj-proc__card--deployment .av-obj-proc__img { object-position: 50% 30%; }
	.av-obj-proc__card--monitoring .av-obj-proc__img { object-position: 30% 40%; }
}

/* 1200–1279px: the narrower container — a narrower step 01 panel. */
@media (min-width: 1200px) and (max-width: 1279.98px) {
	.av-obj-proc__card--inspection .av-obj-proc__body {
		width: 19rem;
	}
}

/* Hover (mouse / trackpad only): photo zoom, blue glow on the number, a
   stronger shadow and a thin blue frame; everything eases back on leave.
   The cards are not links, so no pointer cursor and no tab stop. */
@media (hover: hover) and (pointer: fine) {
	.av-obj-proc__card:hover {
		box-shadow: 0 22px 40px -22px rgba(6, 17, 31, 0.75), 0 0 0 1px rgba(111, 163, 230, 0.45);
	}

	.av-obj-proc__card:hover .av-obj-proc__img {
		transform: scale(1.03);
	}

	.av-obj-proc__card:hover .av-obj-proc__num {
		color: #4d8fea;
		text-shadow: 0 0 18px rgba(47, 125, 225, 0.55);
	}

	/* ≥1200px card 01 has no box of its own (display: contents) and the intro
	   — its preceding sibling, not part of the card — lies over the left two
	   thirds of its photo, the project manager included. Hovering the intro
	   counts as hovering card 01, so the zoom holds while the cursor is
	   anywhere over the photo. */
	@media (min-width: 1200px) {
		.av-obj-proc__intro:hover ~ .av-obj-proc__card--inspection .av-obj-proc__img {
			transform: scale(1.03);
		}

		.av-obj-proc__intro:hover ~ .av-obj-proc__card--inspection .av-obj-proc__num {
			color: #4d8fea;
			text-shadow: 0 0 18px rgba(47, 125, 225, 0.55);
		}
	}
}

/* ==========================================================================
   06 · Request form — the .av-calc component in one compact row
   ========================================================================== */

/* The content sits midway between card 04 and the footer: the section
   above («Как мы начинаем работу») ends with its own 2.5rem bottom padding
   on the same light ground, so the top padding here is the half gap minus
   that 2.5rem (same total height as before: 2.5 + 2.5 / 2 + 2rem). */
.av-objects-page .av-section.av-calc.av-calc--objects {
	--av-section-pt: 1.25rem;              /* + 2.5rem above = 3.75rem */
	--av-section-pb: 3.75rem;
}

@media (min-width: 1200px) {
	.av-objects-page .av-section.av-calc.av-calc--objects {
		--av-section-pt: 0.75rem;          /* + 2.5rem above = 3.25rem */
		--av-section-pb: 3.25rem;
	}
}

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

.av-objects-page .av-obj-calc__title {
	margin: 0;
	font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem);
	line-height: 1.15;
}

.av-objects-page .av-obj-calc__lead {
	margin: 0.6rem 0 0;
	font-size: 0.9375rem;
	line-height: 1.5;
	color: var(--av-obj-muted);
}

.av-calc--objects .av-obj-calc__form {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 0.875rem;
	margin: 0;
}

.av-calc--objects .av-calc__submit {
	margin-top: 0;
}

@media (min-width: 600px) {
	.av-calc--objects .av-obj-calc__form {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		align-items: end;
	}

	.av-calc--objects .av-calc__submit,
	.av-calc--objects .av-calc__status,
	.av-calc--objects .av-calc__consent {
		grid-column: 1 / -1;
	}
}

@media (min-width: 1024px) {
	.av-obj-calc__grid {
		grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
		align-items: center;
		gap: 3rem;
	}

	.av-calc--objects .av-obj-calc__form {
		grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr) auto;
		column-gap: 1rem;
		row-gap: 0.5rem;
	}

	.av-calc--objects .av-calc__submit {
		grid-column: auto;
		width: auto;
		padding-inline: 1.75rem;
		white-space: nowrap;
	}

	.av-calc--objects .av-calc__consent {
		margin: 0;
	}
}

/* ==========================================================================
   Motion — restrained reveal on scroll. assets/js/objects-reveal.js adds
   `av-obj-anim` to <html> (only with JS, IntersectionObserver and no reduced
   motion) and `is-revealed` to each [data-av-reveal] block once it enters
   the viewport; it stays revealed. Without JS nothing is hidden. Only
   opacity / transform: no layout shift.
   ========================================================================== */

.av-obj-anim .av-objects-page [data-av-reveal],
.av-obj-anim .av-objects-page .av-obj-reveal {
	opacity: 0;
	transform: translateY(18px);
	transition: opacity 0.6s ease, transform 0.6s ease;
}

.av-obj-anim .av-objects-page [data-av-reveal].is-revealed,
.av-obj-anim .av-objects-page .av-obj-reveal.is-revealed {
	opacity: 1;
	transform: none;
}

/* «Как мы начинаем работу»: the intro row, then each step card on its own.
   The cards keep their hover shadow transition. */
.av-obj-anim .av-objects-page .av-obj-proc__card[data-av-reveal] {
	transition: opacity 0.6s ease, transform 0.6s ease, box-shadow 0.35s var(--av-proc-ease);
}

/* ≥1200px steps 02 | 03 share a row: 03 follows 02 a beat later. */
@media (min-width: 1200px) {
	.av-obj-anim .av-objects-page .av-obj-proc__card--deployment[data-av-reveal] {
		transition-delay: 0.12s, 0.12s, 0s;
	}
}

/* «Комплексная система безопасности»: the photo stays put; the four labels
   rise in one after another (--i × 120ms, same opacity / 18px / 0.6s as the
   blocks above), each dotted connector fades in with its label and its dot
   gives one soft pulse. No parallax: the connectors end only 4–8px inside
   their labels, so moving a label would break the link. */
.av-obj-anim .av-objects-page [data-av-reveal="group"] {
	opacity: 1;
	transform: none;
	transition: none;
}

.av-obj-anim .av-objects-page .av-obj-hub .av-obj-tag {
	opacity: 0;
	transform: translateY(18px);
	transition: opacity 0.6s ease, transform 0.6s ease;
	transition-delay: calc(var(--i, 0) * 120ms);
}

.av-obj-anim .av-objects-page .av-obj-hub .av-obj-hub__link,
.av-obj-anim .av-objects-page .av-obj-hub .av-obj-hub__arc {
	opacity: 0;
	transition: opacity 0.6s ease;
	transition-delay: calc(var(--i, 0) * 120ms);
}

.av-obj-anim .av-objects-page .av-obj-hub.is-revealed .av-obj-tag,
.av-obj-anim .av-objects-page .av-obj-hub.is-revealed .av-obj-hub__link,
.av-obj-anim .av-objects-page .av-obj-hub.is-revealed .av-obj-hub__arc {
	opacity: 1;
	transform: none;
}

.av-obj-anim .av-objects-page .av-obj-hub .av-obj-dot::after {
	content: "";
	position: absolute;
	inset: -2.5px;                         /* = the dot's outer edge */
	border: 2px solid rgba(47, 125, 225, 0.7);
	border-radius: 50%;
	opacity: 0;
	pointer-events: none;
}

.av-obj-anim .av-objects-page .av-obj-hub.is-revealed .av-obj-dot::after {
	animation: av-obj-dot-pulse 1.2s ease-out both;
	animation-delay: calc(var(--i, 0) * 120ms + 450ms);   /* once its label has landed */
}

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

	15% {
		opacity: 0.8;
	}

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

@media (prefers-reduced-motion: reduce) {
	.av-obj-card__img,
	.av-obj-card .av-obj-ph,
	.av-obj-card__arrow,
	.av-obj-card__arrow-icon,
	.av-obj-proc__card,
	.av-obj-proc__img,
	.av-obj-proc__num,
	.av-obj-svc__inner,
	.av-obj-svc__img {
		transition: none;
	}

	/* Reduced motion: no lift / zoom / button growth; the frame, shadow and
	   button colour still mark the hovered card. */
	.av-obj-svc:hover .av-obj-svc__inner,
	.av-obj-svc:hover .av-obj-svc__img,
	a.av-obj-svc__inner:focus-visible,
	a.av-obj-svc__inner:focus-visible .av-obj-svc__img {
		transform: none;
	}

	.av-obj-card:hover .av-obj-card__img,
	.av-obj-card:hover .av-obj-ph,
	.av-obj-card:hover .av-obj-card__arrow,
	a.av-obj-card__inner:focus-visible .av-obj-card__arrow,
	.av-obj-proc__card:hover .av-obj-proc__img,
	.av-obj-proc__intro:hover ~ .av-obj-proc__card--inspection .av-obj-proc__img {
		transform: none;
	}
}