/*
 * AV-Security — «Контакты» page (/kontakty/)
 * ----------------------------------------------------------------------------
 * Loaded only on the contacts page (inc/contacts.php), after sections.css.
 * Built to the approved reference docs/contacts-reference.png. The reference
 * is a 1024px-wide render of a 1440px desktop layout; content here keeps the
 * real header's container (--av-container, 1132px of content at ≥1280px), so
 * reference measurements are scaled by 1132 / 945 ≈ 1.2.
 *
 * Reuses the theme tokens from main.css (--av-container, --av-ink,
 * --av-primary, --av-primary-hover, --av-accent) and the .av-section /
 * .av-container primitives from sections.css. The request form reuses the
 * homepage .av-calc component; .av-calc--contacts restyles it.
 */

.av-contacts-page {
	--av-navy: #0a1a2b;                 /* footer / calc navy */
	--av-navy-btn: #0d1b2e;             /* dark «Построить маршрут» button */
	--av-muted: #66758a;                /* secondary text (reference grey) */
	--av-line: #e2e7ee;                 /* separators, card borders */
	--av-icon: #0f2a4a;                 /* dark navy line icons */
}

.av-visually-hidden {
	position: absolute !important;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	border: 0;
	white-space: nowrap;
}

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

/* All content bands below the hero are white and tightly stacked. */
.av-contacts-page .av-section {
	background-color: #fff;
}

/* ==========================================================================
   Hero — approved background (contacts-hero-spb), running under the
   header's navigation row like the homepage hero (body.av-hero-overlay,
   main.css). Dark free area left, St Isaac's in the right third.
   ========================================================================== */

.av-contacts-hero {
	/* Height of the header row the hero runs under (≥900px): mirrors
	   --av-main-h in main.css (80px, 74px from 1200px). 0 below 900px,
	   where the header does not overlay. */
	--av-hero-under: 0px;
	position: relative;
	isolation: isolate;
	box-sizing: border-box;
	min-height: 264px;
	padding-block: calc(var(--av-hero-under) + 1.25rem) 2.5rem;
	overflow: hidden;
	background-color: #031828;
	color: #fff;
}

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

.av-contacts-hero__img {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 62% 12%;
}

/* Readability only on the left — the photo is already dark there; the
   right side (the cathedral) stays bright and saturated. It starts below
   the header's navigation row, so under the row the photo is covered only
   by the row's own translucent navy (as on the homepage), not twice. */
.av-contacts-hero::after {
	content: "";
	position: absolute;
	inset: var(--av-hero-under) 0 0;
	z-index: -1;
	background: linear-gradient(
		90deg,
		rgba(3, 24, 40, 0.72) 0%,
		rgba(3, 24, 40, 0.45) 30%,
		rgba(3, 24, 40, 0.12) 58%,
		rgba(3, 24, 40, 0) 78%
	);
	pointer-events: none;
}

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

.av-contacts-hero__inner {
	box-sizing: border-box;
	width: 100%;
	padding-inline: var(--wp--preset--spacing--50);
}

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

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

/* Breadcrumbs — small, never competing with the H1. */
.av-breadcrumbs__list {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.25rem 0.75rem;
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: 0.875rem;
	line-height: 1.2;
	color: rgba(255, 255, 255, 0.86);
}

.av-breadcrumbs__item {
	display: inline-flex;
	align-items: center;
	gap: 0.75rem;
}

.av-breadcrumbs__item + .av-breadcrumbs__item::before {
	content: "";
	width: 0.4rem;
	height: 0.4rem;
	margin-right: 0.15rem;
	border-top: 1.5px solid currentColor;
	border-right: 1.5px solid currentColor;
	transform: rotate(45deg);
}

.av-breadcrumbs a {
	color: rgba(255, 255, 255, 0.86);
	text-decoration: none;
	transition: color 0.2s ease;
}

.av-breadcrumbs a:hover {
	color: #fff;
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

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

.av-breadcrumbs [aria-current="page"] {
	color: #fff;
}

/* Red brand stroke between the breadcrumbs and the title. */
.av-contacts-hero__title::before {
	content: "";
	display: block;
	width: 2.75rem;
	height: 3px;
	margin-bottom: 1.125rem;
	background: var(--av-accent);
}

/* Typography (family, weight, line-height, tracking, colour) comes from
   the homepage hero class .av-hero__title (main.css) on the same element;
   the size is the homepage H1 size (theme preset xx-large, as
   .has-xx-large-font-size on the homepage). Only spacing is set here. */
.av-contacts-hero .av-contacts-hero__title {
	margin-top: 1.25rem;
	font-size: var(--wp--preset--font-size--xx-large);
}

/* Typography from the homepage class .av-hero__subtitle (main.css) at the
   homepage subtitle size: preset large at every width (on the homepage
   .has-large-font-size outranks main.css's ≤390px rule). Only spacing here. */
.av-contacts-hero .av-contacts-hero__lead {
	margin-top: 0.75rem;
	font-size: var(--wp--preset--font-size--large);
}

.av-contacts-hero__br {
	display: none;
}

/* Phones: the cathedral crop sits right behind the text — a firmer shade. */
@media (max-width: 599px) {
	.av-contacts-hero::after {
		background: linear-gradient(
			90deg,
			rgba(3, 24, 40, 0.82) 0%,
			rgba(3, 24, 40, 0.6) 55%,
			rgba(3, 24, 40, 0.3) 100%
		);
	}
}

@media (min-width: 600px) {
	.av-contacts-hero__br {
		display: inline;
	}
}

/* Desktop: the hero starts under the utility bar and runs beneath the
   navigation row — 450px in total at ≥1200px (376px visible under the
   row), 420px at 900–1199px. Content sits in the upper part with a
   moderate rhythm: row → breadcrumbs 44px, breadcrumbs → stroke 28px,
   stroke → title 22px, title → lead 20px. */
@media (min-width: 900px) {
	.av-contacts-hero {
		--av-hero-under: 5rem;
		height: 420px;
		min-height: 0;
		padding-block: calc(var(--av-hero-under) + 2.75rem) 0;
	}

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

	.av-contacts-hero .av-contacts-hero__title {
		margin-top: 1.75rem;
	}

	.av-contacts-hero__title::before {
		margin-bottom: 1.375rem;
	}

	.av-contacts-hero .av-contacts-hero__lead {
		margin-top: 1.25rem;
	}
}

@media (min-width: 1200px) {
	.av-contacts-hero {
		--av-hero-under: 4.625rem;
		height: 450px;
	}
}

/* ==========================================================================
   Contact details — four columns, icon left of the text, thin separators
   ========================================================================== */

.av-section.av-contacts-info {
	--av-section-pt: 1.75rem;
	--av-section-pb: 0.5rem;
}

.av-contacts-info__grid {
	display: grid;
	margin: 0;
	font-style: normal;
}

.av-contacts-info__item {
	display: flex;
	align-items: flex-start;
	gap: 1.25rem;
	min-width: 0;
	padding-block: 1.25rem;
	border-top: 1px solid var(--av-line);
}

.av-contacts-info__item:first-child {
	padding-top: 0.25rem;
	border-top: 0;
}

/* Rendered size comes from each SVG's width / height attributes. */
.av-contacts-info__icon {
	display: block;
	flex: 0 0 auto;
	margin-top: 0.125rem;              /* top-aligned with the label */
	color: var(--av-icon);
}

/* Below 1280px the icons share one 44px slot, so every text column starts
   at the same x (the SVG keeps its size, centred in the slot). */
@media (max-width: 1279px) {
	.av-contacts-info__icon {
		flex-basis: 44px;
	}
}

.av-contacts-info__body {
	min-width: 0;
}

.av-contacts-info__body > * {
	margin: 0;
}

.av-contacts-info .av-contacts-info__label {
	font-size: 0.75rem;
	font-weight: 500;
	line-height: 1.3;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	color: var(--av-muted);
}

.av-contacts-info__value {
	display: inline-block;
	margin-top: 0.5rem;
	font-size: 1.1875rem;
	font-weight: 700;
	line-height: 1.3;
	color: var(--av-ink);
	overflow-wrap: break-word;
}

.av-contacts-info__value--sm {
	margin-top: 0.625rem;
	font-size: 1rem;
	line-height: 1.35;
}

.av-contacts-info__value--link {
	text-decoration: none;
	transition: color 0.2s ease;
}

.av-contacts-info__value--link:hover {
	color: var(--av-primary);
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.2em;
}

.av-contacts-info__note {
	margin-top: 0.625rem;
	font-size: 0.9375rem;
	line-height: 1.3;
	color: var(--av-muted);
}

/* 2 × 2 with a vertical and a horizontal separator. */
@media (min-width: 600px) {
	.av-contacts-info__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.av-contacts-info__item,
	.av-contacts-info__item:first-child {
		padding: 1.25rem 1.5rem 1.25rem 0;
		border-top: 0;
	}

	.av-contacts-info__item:nth-child(even) {
		padding-left: 1.5rem;
		padding-right: 0;
		border-left: 1px solid var(--av-line);
	}

	.av-contacts-info__item:nth-child(n + 3) {
		border-top: 1px solid var(--av-line);
	}
}

/* ≥1280px: one compact row of four, measured from the approved reference
   (docs/contacts-reference.png, 945px container → 1132px here, ×1.198).
   Positions below are relative to the hero's bottom edge:
   separators 30 → 171px (141px tall) at x = container + 261 / 564 / 899;
   icons at 32 / 34 / 30 / 32px; label caps at ≈40px, values ≈65px,
   descriptions ≈102px (2nd line +19px); «НАШ ОФИС» caps at ≈206px. */
@media (min-width: 1280px) {
	.av-section.av-contacts-info {
		--av-section-pt: 30px;
		--av-section-pb: 0;
	}

	.av-contacts-info__grid {
		grid-template-columns: 261px 303px 335px minmax(0, 1fr);
	}

	.av-contacts-info__item,
	.av-contacts-info__item:first-child,
	.av-contacts-info__item:nth-child(even),
	.av-contacts-info__item:nth-child(n + 3) {
		position: relative;
		box-sizing: border-box;
		height: 141px;
		padding: 0;
		border: 0;
	}

	/* Separator: its own element with the reference's fixed length (141px
	   from the top of the row) and tone (≈#edf0f4, lighter than --av-line),
	   independent of the column's content height. */
	.av-contacts-info__item + .av-contacts-info__item::before {
		content: "";
		position: absolute;
		top: 0;
		left: 0;
		width: 1px;
		height: 141px;
		background-color: #eceff4;
	}

	.av-contacts-info__item:first-child {
		gap: 26px;
	}

	.av-contacts-info__item:nth-child(2) {
		gap: 33px;
		padding-left: 28px;
	}

	/* Address: content (icon + text, 297px) centred in its 335px cell. */
	.av-contacts-info__item:nth-child(3) {
		gap: 25px;
		padding-left: 19px;
	}

	/* Working hours: the 233px cell has to hold the 43px icon and the
	   153px one-line value — 14px from the separator, 16px icon → text,
	   ≈7px left before the container's right edge. */
	.av-contacts-info__item:nth-child(4) {
		gap: 16px;
		padding-left: 14px;
	}

	.av-contacts-info__icon--phone { margin-top: 2px; }
	.av-contacts-info__icon--mail  { margin-top: 4px; }
	.av-contacts-info__icon--pin   { margin-top: 0; }
	.av-contacts-info__icon--clock { margin-top: 2px; }

	.av-contacts-info__body {
		padding-top: 7px;
	}

	.av-contacts-info .av-contacts-info__label {
		font-size: 12px;
		line-height: 15.6px;
		letter-spacing: 0;
	}

	.av-contacts-info__value {
		margin-top: 8px;
		font-size: 18.5px;
		line-height: 24px;
		white-space: nowrap;
	}

	/* Address: two lines — «Санкт-Петербург,» / «Фурштатская ул., 12, лит. А,
	   офис 4» (236px); the text box is capped inside the 255px available
	   before the next separator («лит. А» / «офис 4» are non-breaking). */
	.av-contacts-info__item:nth-child(3) .av-contacts-info__value--sm {
		max-width: 245px;
		font-size: 13.5px;
		line-height: 21.6px;
		white-space: normal;
	}

	/* Working hours: one line, a step smaller than phone / e-mail. */
	.av-contacts-info__item:nth-child(4) .av-contacts-info__value--sm {
		margin-top: 6px;
		font-size: 14.5px;
		line-height: 24px;
	}

	.av-contacts-info__note {
		margin-top: 12px;
		font-size: 15px;
		line-height: 19.2px;
		color: #74808f;                 /* reference tone, lighter than --av-muted */
	}

	.av-contacts-info__item:nth-child(4) .av-contacts-info__note {
		margin-top: 15px;
	}

	.av-contacts-info__item:nth-child(3) .av-contacts-info__note {
		margin-top: 7px;
		line-height: 20px;
	}

	/* «НАШ ОФИС» caps land ≈206px below the hero, as in the reference. */
	.av-contacts-page .av-section.av-office {
		--av-section-pt: 31px;
	}
}

/* ==========================================================================
   «Наш офис» — heading row, map (≈66%) + office card (≈34%), equal height
   ========================================================================== */

.av-section.av-office {
	--av-section-pt: 2.25rem;
	--av-section-pb: 0;
}

/* Head: title · red stroke · long hairline · area label. */
.av-office .av-office__head {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem 1.25rem;
	margin-bottom: 1.25rem;
}

.av-office__head > * {
	margin: 0;
}

.av-office .av-office__title {
	font-size: 1.5rem;
	font-weight: 800;
	line-height: 1.1;
	letter-spacing: 0;
	text-transform: uppercase;
	color: var(--av-ink);
}

.av-office__accent {
	flex: 0 0 auto;
	width: 2.25rem;
	height: 2px;
	background: var(--av-accent);
}

.av-office__rule {
	display: none;
	flex: 1 1 auto;
	height: 1px;
	background: #d5dce5;
}

.av-office__area {
	flex-basis: 100%;
	font-size: 0.75rem;
	font-weight: 500;
	line-height: 1.3;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--av-muted);
}

@media (min-width: 768px) {
	.av-office__rule {
		display: block;
	}

	.av-office__area {
		flex-basis: auto;
	}
}

.av-office__grid {
	display: grid;
	gap: 1.25rem;
}

@media (min-width: 1200px) {
	.av-office .av-office__head {
		margin-bottom: 1.5rem;
	}

	.av-office__grid {
		grid-template-columns: 64fr 36fr;   /* map ≈707px | card ≈397px */
		gap: 1.75rem;
	}
}

/* ----------------------------------------------------------------- Map */
.av-office-map {
	/* Office point position in the box — read by contacts-map.js too. */
	--av-map-x: 0.45;
	--av-map-y: 0.4;
	position: relative;
	min-height: 360px;
	overflow: hidden;
	border: 1px solid var(--av-line);
	border-radius: 4px;
	background-color: #eef1ec;
	background-image:
		linear-gradient(rgba(11, 31, 51, 0.05) 1px, transparent 1px),
		linear-gradient(90deg, rgba(11, 31, 51, 0.05) 1px, transparent 1px);
	background-size: 48px 48px;
}

@media (max-width: 599px) {
	.av-office-map {
		--av-map-x: 0.2;
	}

	.av-office-map__callout {
		max-width: 13rem;
		padding: 0.625rem 0.875rem;
		font-size: 0.8125rem;
	}
}

@media (min-width: 600px) {
	.av-office-map {
		min-height: 420px;
	}
}

@media (min-width: 1200px) {
	.av-office-map {
		min-height: 423px;                 /* + 2px border = 425px */
	}
}

.av-office-map__canvas {
	position: absolute;
	inset: 0;
}

.av-office-map__canvas > img {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	/* = POINT_X / POINT_Y in contacts-map.js: the office point stays under
	   the pin whatever the scaling. */
	object-position: calc(var(--av-map-x) * 100%) calc(var(--av-map-y) * 100%);
}

/* Pin + callout; the tip of the pin is the office point. */
.av-office-map__pin {
	position: absolute;
	top: calc(var(--av-map-y) * 100%);
	left: calc(var(--av-map-x) * 100%);
	z-index: 2;
	display: none;
	width: 0;
	height: 0;
	pointer-events: none;
}

.av-office-map.is-static .av-office-map__pin {
	display: block;
}

/* Stacking: the map is its own stacking context, so everything the JS API
   draws inside it (controls at z-index 1000, marker, callout, copyright)
   is layered only against other map content and never above the sticky
   site header (z-index 100). */
.av-office-map {
	isolation: isolate;
}

/* «+ / −» (YMapControls, position: 'right'): 16px from the right edge
   instead of the API's default 12px inner padding. The API has no offset
   option; .ymaps3--controls_right is its public, documented container
   class, scoped here to this map only. */
.av-office-map .ymaps3--controls_right {
	padding-right: 16px;
}

/* JS API 3.0 map: the same pin + callout, placed by YMapMarker — its
   container sits on the office point, so the pin is anchored at 0 / 0.
   A click (or Enter / Space) on the marker shows / hides the callout. */
.av-office-map .av-office-map__pin--api {
	display: block;
	top: 0;
	left: 0;
	pointer-events: auto;
	cursor: pointer;
}

.av-office-map .av-office-map__pin--api:focus-visible {
	outline: none;
}

.av-office-map .av-office-map__pin--api:focus-visible .av-office-map__pin-mark {
	outline: 2px solid var(--av-primary);
	outline-offset: 3px;
}

.av-office-map .av-office-map__pin--api.is-collapsed .av-office-map__callout {
	display: none;
}

/* Teardrop: a square with three rounded corners, rotated so the sharp one
   points down at the office. */
.av-office-map__pin-mark {
	position: absolute;
	left: -19px;
	bottom: 8px;
	display: flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	width: 38px;
	height: 38px;
	border-radius: 50% 50% 50% 0;
	background-color: var(--av-navy, #0a1a2b);
	box-shadow: 0 4px 12px rgba(6, 17, 31, 0.35);
	transform: rotate(-45deg);
}

.av-office-map__pin-logo {
	color: #fff;
	font: 800 0.9375rem/1 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	letter-spacing: -0.04em;
	transform: rotate(45deg);
}

.av-office-map__pin-logo > span {
	color: #f0485c;
}

.av-office-map__callout {
	position: absolute;
	left: 30px;
	bottom: 6px;
	box-sizing: border-box;
	width: max-content;
	max-width: 15rem;
	padding: 0.75rem 1.125rem;
	border-radius: 4px;
	background-color: #fff;
	box-shadow: 0 6px 20px rgba(6, 17, 31, 0.16);
	color: var(--av-ink);
	font-size: 0.9375rem;
	line-height: 1.4;
}

/* API placemark reuses the same drawing; its layout box is 38 × 50. */
.av-office-map__api-pin {
	position: relative;
	display: block;
	width: 38px;
	height: 50px;
}

.av-office-map__api-pin .av-office-map__pin-mark {
	left: 0;
	bottom: 8px;
}

.av-office-map__open {
	position: absolute;
	left: 0.5rem;
	bottom: 0.75rem;
	z-index: 3;
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	min-height: 44px;
	padding: 0.5rem 1rem 0.5rem 0.75rem;
	border-radius: 3px;
	background-color: #fff;
	box-shadow: 0 2px 10px rgba(6, 17, 31, 0.16);
	color: var(--av-ink);
	font-size: 0.9375rem;
	font-weight: 500;
	line-height: 1.2;
	text-decoration: none;
	transition: color 0.2s ease;
}

.av-office-map__open svg {
	flex: 0 0 auto;
	color: #e3242b;
}

/* Interactive map: the JS API adds its own «Открыть Яндекс Карты» button in
   the same corner, so ours is shown only for the static fallback. */
.av-office-map.is-api .av-office-map__open {
	display: none;
}

.av-office-map__open:hover {
	color: var(--av-primary);
}

.av-office-map__open:focus-visible {
	outline: 2px solid var(--av-primary);
	outline-offset: 2px;
}

/* ---------------------------------------------------------- Office card */
.av-office-card {
	display: flex;
	flex-direction: column;
	min-width: 0;
	overflow: hidden;
	border: 1px solid var(--av-line);
	border-radius: 4px;
	background-color: #fff;
}

@media (min-width: 600px) and (max-width: 1199px) {
	.av-office-card {
		display: grid;
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	}
}

.av-office-card__media {
	position: relative;
	margin: 0;
	aspect-ratio: 1200 / 638;
	overflow: hidden;
	background-color: var(--av-navy, #0a1a2b);
}

@media (min-width: 600px) and (max-width: 1199px) {
	.av-office-card__media {
		aspect-ratio: auto;
		min-height: 100%;
	}

	/* The photo fills the cell; the text column sets the card height. */
	.av-office-card__media img {
		position: absolute;
		inset: 0;
	}
}

@media (min-width: 1200px) {
	.av-office-card__media {
		flex: 0 0 auto;
		height: 198px;
		aspect-ratio: auto;
	}

	/* The card's content sets the row height (425px; the map stretches to
	   it): photo 198 + body with an even rhythm — label → address 8px,
	   address → postcode 4px, postcode → button 12px, button → facts 12px. */
	.av-office .av-office-card__body {
		padding: 10px 23px 9px;
	}

	.av-office .av-office-card__title {
		margin-top: 8px;
	}

	.av-office .av-office-card__postcode {
		margin-top: 4px;
	}

	.av-office .av-office-card__route {
		margin-top: 12px;
	}
}

.av-office-card__media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 50% 22%;          /* keeps the AV SECURITY sign + door */
}

/* Licence credit (CC BY-SA 4.0 requires it). */
.av-office-card__credit {
	position: absolute;
	right: 0;
	bottom: 0;
	padding: 0.2rem 0.45rem;
	border-top-left-radius: 3px;
	background-color: rgba(6, 17, 31, 0.55);
	color: rgba(255, 255, 255, 0.85);
	font-size: 0.625rem;
	line-height: 1.3;
}

.av-office-card__credit a {
	color: inherit;
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.15em;
}

.av-office-card__credit a:focus-visible {
	outline: 2px solid #fff;
	outline-offset: 1px;
}

.av-office-card__body {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	padding: 1rem 1.25rem 0.625rem;
}

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

.av-office-card__eyebrow {
	font-size: 0.75rem;
	font-weight: 500;
	line-height: 1.3;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	color: var(--av-muted);
}

.av-office .av-office-card__title {
	margin-top: 0.375rem;
	font-size: 1.125rem;
	font-weight: 700;
	line-height: 1.35;
	letter-spacing: -0.01em;
	color: var(--av-ink);
}

.av-office-card__postcode {
	margin-top: 0.125rem;
	font-size: 0.9375rem;
	line-height: 1.4;
	color: var(--av-muted);
}

.av-office-card__route {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.875rem;
	box-sizing: border-box;
	min-height: 48px;
	margin-top: 0.75rem;
	padding: 0.5rem 1.25rem;
	border-radius: 3px;
	background-color: var(--av-navy-btn);
	color: #fff;
	font-size: 1rem;
	font-weight: 500;
	text-decoration: none;
	transition: background-color 0.2s ease;
}

.av-office-card__route-icon {
	flex: 0 0 auto;
	margin-right: 0.5rem;
}

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

.av-office-card__route:hover,
.av-office-card__route:focus-visible {
	background-color: var(--av-primary-hover);
	color: #fff;
	text-decoration: none;
}

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

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

/* Verified facts only (district, working hours). */
.av-office-card__facts {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0.5rem 1rem;
	margin: 1rem 0 0;
	padding: 0;
	list-style: none;
}

.av-office-card__fact {
	display: flex;
	align-items: center;
	gap: 12px;
	font-size: 0.8125rem;
	line-height: 1.4;
	color: var(--av-muted);
}

.av-office-card__fact span {
	white-space: nowrap;
}

/* Icon slot: the same 30px box for both icons, each icon against its right
   edge — so both texts start at the same x, both icons sit exactly 12px from
   their text, and nothing sticks out of the slot. */
.av-office-card__fact-icon {
	display: flex;
	flex: 0 0 30px;
	align-items: center;
	justify-content: flex-end;
	height: 30px;
}

.av-office-card__fact-icon img {
	display: block;
	width: auto;
	max-width: none;
}

.av-office-card__fact-img--walk { height: 27px; }    /* 18.5 × 27 */
.av-office-card__fact-img--park { height: 25px; }    /* 30 × 25 — same visual weight */

/* First line of each fact: the accent; the second line stays muted. */
.av-office-card__fact .av-office-card__fact-main {
	font-weight: 600;
	color: var(--av-ink);
}

/* Narrow phones: the two facts stack instead of squeezing side by side. */
@media (max-width: 479px) {
	.av-office-card__facts {
		grid-template-columns: minmax(0, 1fr);
	}
}

.av-office-card__fact svg {
	flex: 0 0 auto;
	color: var(--av-icon);
}

@media (min-width: 1200px) {
	/* Keep the facts row on the card's bottom edge when the map is taller. */
	.av-office-card__facts {
		margin-top: auto;
		padding-top: 12px;
	}
}

/* ==========================================================================
   Request form — .av-calc as a contained navy card (reference 275 → 330px)
   ========================================================================== */

.av-section.av-calc.av-calc--contacts {
	--av-section-pt: 1.875rem;
	--av-section-pb: 0;
	background-color: #fff;
}

.av-calc--contacts .av-calc__grid {
	position: relative;
	isolation: isolate;
	gap: 1.75rem;
	padding: 1.75rem 1.25rem 1.5rem;
	overflow: hidden;
	border: 0;
	border-radius: 4px;
	background-color: var(--av-navy);
	/* Photo: contacts-calculation-bg (already dark on the left, the lit
	   office building on the right) under a brand-navy overlay — even and
	   firm on phones, where the text and the form sit over the photo. */
	background-image:
		linear-gradient(180deg, rgba(8, 22, 39, 0.72) 0%, rgba(8, 22, 39, 0.66) 50%, rgba(8, 22, 39, 0.8) 100%),
		url("../images/contacts-calculation-bg.webp");
	background-position: center, 78% 50%;
	background-size: auto, cover;
	background-repeat: no-repeat;
	box-shadow: none;
}

@media (min-width: 600px) and (max-width: 1199px) {
	.av-calc--contacts .av-calc__grid {
		background-image:
			linear-gradient(90deg, rgba(8, 22, 39, 0.62) 0%, rgba(8, 22, 39, 0.4) 45%, rgba(8, 22, 39, 0.55) 100%),
			url("../images/contacts-calculation-bg-1200.webp");
		background-position: center, 70% 55%;
	}
}

/* Desktop: the whole photo width fits the panel; the overlay is lighter
   in the middle so the architecture reads, firmer on the left (title, text)
   and under the form on the right (white consent line). */
@media (min-width: 1200px) {
	.av-calc--contacts .av-calc__grid {
		background-image:
			linear-gradient(90deg, rgba(8, 22, 39, 0.5) 0%, rgba(8, 22, 39, 0.3) 42%, rgba(8, 22, 39, 0.54) 56%, rgba(8, 22, 39, 0.67) 100%),
			url("../images/contacts-calculation-bg.webp");
		background-position: center, 50% 60%;
	}
}

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

@media (min-width: 1200px) {
	.av-calc--contacts .av-calc__grid {
		grid-template-columns: minmax(0, 1fr) 493px;
		align-items: start;
		gap: 2.5rem;
		min-height: 330px;
		box-sizing: border-box;
		padding: 1.6875rem 1.9375rem 1.5rem 2.5625rem;
	}
}

.av-calc--contacts .av-calc__intro {
	padding: 0;
	background-color: transparent;
}

/* Reference line breaks — desktop only. */
.av-calc--contacts .av-calc__br {
	display: none;
}

@media (min-width: 1200px) {
	.av-calc--contacts .av-calc__br {
		display: inline;
	}
}

.av-calc--contacts .av-calc__intro::before,
.av-calc--contacts .av-calc__intro::after {
	content: none;
}

.av-calc--contacts .av-calc__title {
	font-size: clamp(1.5rem, 1.1rem + 1.2vw, 1.75rem);
	font-weight: 800;
	line-height: 1.36;
	letter-spacing: 0;
	text-transform: uppercase;
	text-wrap: balance;
	color: #fff;
}

.av-calc--contacts .av-calc__lead {
	max-width: 30rem;
	margin-top: 0.625rem;
	font-size: 1.125rem;
	line-height: 1.45;
	color: rgba(255, 255, 255, 0.88);
}

@media (min-width: 1200px) {
	.av-calc--contacts .av-calc__title {
		padding-top: 0.375rem;
		font-size: 1.9375rem;
		line-height: 2.5rem;
		text-wrap: wrap;
		max-width: none;
	}

	.av-calc--contacts .av-calc__lead {
		max-width: none;
		margin-top: 0.75rem;
		font-size: 1.34375rem;
		line-height: 1.875rem;
	}
}

/* Benefits: one row of three, outline icon left of a two-line label. */
.av-calc--contacts .av-calc__benefits {
	display: flex;
	flex-wrap: wrap;
	gap: 1rem 1.75rem;
	max-width: none;
	margin: 1.5rem 0 0;
	padding: 0;
	border-top: 0;
}

.av-calc--contacts .av-calc__benefit {
	gap: 0.75rem;
	font-size: 0.9375rem;
	font-weight: 400;
	line-height: 1.35;
	color: #fff;
}

.av-calc--contacts .av-calc__benefit-svg {
	flex: 0 0 auto;
	color: #fff;
}

@media (min-width: 1200px) {
	.av-calc--contacts .av-calc__benefits {
		flex-wrap: nowrap;
		gap: 1.875rem;
		margin-top: 1.75rem;
	}
}

/* Form: transparent on the navy, fields white, labels inside the fields. */
.av-calc--contacts .av-calc__card {
	padding: 0;
	background-color: transparent;
	box-shadow: none;
}

.av-calc--contacts .av-calc__form {
	gap: 0.625rem;
}

.av-calc--contacts .av-calc__row {
	gap: 0.625rem 0.875rem;
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

.av-calc--contacts .av-calc__control {
	min-height: 45px;
	padding: 0.625rem 0.9375rem;
	border: 1px solid transparent;
	border-radius: 3px;
	font-size: 1rem;
}

.av-calc--contacts .av-calc__control:hover {
	border-color: rgba(11, 31, 51, 0.2);
}

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

.av-calc--contacts .av-calc__select:has(option[value=""]:checked) {
	color: #6b7686;
}

.av-calc--contacts .av-calc__textarea {
	height: 78px;
	min-height: 78px;
}

/* Inset label: sits where a placeholder would, disappears once typed in. */
.av-calc--contacts .av-calc__field--inset {
	position: relative;
	display: block;
}

.av-calc--contacts .av-calc__field--inset .av-calc__label {
	position: absolute;
	top: 0;
	left: 0;
	padding: 0.75rem 0.9375rem;
	font-size: 0.9375rem;
	font-weight: 400;
	line-height: 1.35;
	color: #6b7686;
	pointer-events: none;
	transition: opacity 0.12s ease;
}

.av-calc--contacts .av-calc__control:not(:placeholder-shown) + .av-calc__label {
	opacity: 0;
}

.av-calc--contacts .av-calc__req {
	color: #e3242b;
}

.av-calc--contacts .av-calc__submit {
	min-height: 51px;
	margin-top: 0;
	border-radius: 3px;
	background-color: #1257d0;
	font-size: 1.0625rem;
	font-weight: 600;
}

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

.av-calc--contacts .av-calc__submit:focus-visible {
	outline-color: #fff;
}

.av-calc--contacts .av-calc__status {
	border-left-color: #8fb8ea;
	background-color: rgba(255, 255, 255, 0.1);
	color: #fff;
}

.av-calc--contacts .av-calc__consent {
	margin-top: 0.125rem;
	font-size: 0.8125rem;
	color: rgba(255, 255, 255, 0.75);
}

.av-calc--contacts .av-calc__consent a {
	color: #fff;
}

.av-calc--contacts .av-calc__consent a:hover {
	color: #fff;
	text-decoration-thickness: 2px;
}

.av-calc--contacts .av-calc__consent a:focus-visible {
	outline-color: #fff;
}

@media (max-width: 479px) {
	.av-calc--contacts .av-calc__row {
		grid-template-columns: 1fr;
	}
}

/* ==========================================================================
   Requisites accordion — compact bordered bar; opens into two light columns
   («Организация» / «Банковские реквизиты») with hairline rows and actions.
   ========================================================================== */

.av-section.av-requisites {
	--av-section-pt: 1.875rem;
	--av-section-pb: 1.5rem;
}

.av-requisites__details {
	border: 1px solid var(--av-line);
	border-radius: 4px;
	background-color: #fff;
	interpolate-size: allow-keywords;
}

.av-requisites__summary {
	display: flex;
	align-items: center;
	gap: 1rem;
	min-height: 55px;
	box-sizing: border-box;
	padding: 0.5rem 1.25rem;
	border-radius: 3px;
	color: var(--av-ink);
	list-style: none;
	cursor: pointer;
}

@media (min-width: 1024px) {
	.av-requisites__summary {
		gap: 1.125rem;
		padding: 0.5rem 1.75rem 0.5rem 2.125rem;
	}
}

.av-requisites__summary::-webkit-details-marker {
	display: none;
}

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

/* Keyboard-only ring: no outline from a mouse / touch toggle, even in
   browsers that match :focus-visible on a clicked <summary>. The flag is set
   on pointerdown and cleared on any key press (contacts-requisites.js). */
.av-requisites__summary:focus:not(:focus-visible),
.av-requisites__details[data-av-pointer] > .av-requisites__summary:focus-visible {
	outline: none;
}

.av-requisites__icon {
	flex: 0 0 auto;
	color: var(--av-icon);
}

.av-requisites__title {
	flex: 1 1 auto;
	font-size: 0.9375rem;
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: 0.01em;
	text-transform: uppercase;
	color: var(--av-ink);
}

/* Plus → minus; brand red once open. */
.av-requisites__toggle {
	position: relative;
	flex: 0 0 auto;
	width: 1.125rem;
	height: 1.125rem;
	color: var(--av-ink);
	transition: color 0.2s ease;
}

.av-requisites__toggle::before,
.av-requisites__toggle::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 0;
	width: 100%;
	height: 2px;
	margin-top: -1px;
	background-color: currentColor;
	transition: transform 0.3s ease;
}

.av-requisites__toggle::after {
	transform: rotate(90deg);
}

.av-requisites__details[open] .av-requisites__toggle {
	color: var(--av-accent);
}

.av-requisites__details[open] .av-requisites__toggle::after {
	transform: rotate(0deg);
}

.av-requisites__summary:hover .av-requisites__title,
.av-requisites__summary:hover .av-requisites__toggle {
	color: var(--av-primary);
}

/* Smooth open / close where ::details-content + interpolate-size exist;
   elsewhere the native instant toggle. */
.av-requisites__details::details-content {
	block-size: 0;
	overflow: clip;
	transition: block-size 0.35s ease, content-visibility 0.35s allow-discrete;
}

.av-requisites__details[open]::details-content {
	block-size: auto;
}

.av-requisites__content {
	padding: 1.5rem 1.25rem 1.5rem;
	border-top: 1px solid var(--av-line);
	background-color: #f6f8fb;
}

@media (min-width: 1024px) {
	.av-requisites__content {
		padding: 2rem 1.75rem 1.375rem 2.125rem;
	}
}

.av-requisites__grid {
	display: grid;
	gap: 2rem;
}

@media (min-width: 1024px) {
	.av-requisites__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 3.5rem;
	}
}

.av-requisites__group {
	min-width: 0;
}

.av-requisites__group-title {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	margin: 0 0 0.75rem;
	font-size: 0.8125rem;
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--av-ink);
}

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

.av-requisites__list {
	margin: 0;
	padding: 0;
}

.av-requisites__row {
	display: grid;
	gap: 0.125rem;
	padding-block: 0.6875rem;
	border-top: 1px solid var(--av-line);
}

.av-requisites__row dt,
.av-requisites__row dd {
	margin: 0;
	min-width: 0;
	line-height: 1.5;
}

.av-requisites__row dt {
	font-size: 0.8125rem;
	color: #5d6b7f; /* --av-muted is 4.4:1 on the light panel; this is 5.1:1 */
}

.av-requisites__row dd {
	font-size: 0.9375rem;
	font-weight: 500;
	color: var(--av-ink);
	overflow-wrap: anywhere;
	font-variant-numeric: tabular-nums;
}

/* Hyphenated fragments («1-Н», «АЛЬФА-БАНК») move to the next line whole
   instead of breaking after the hyphen. Longest one is 192px (fits 300px). */
.av-requisites__nowrap {
	white-space: nowrap;
}

/* Long values (full name, address, bank) wrap over 2–3 lines: regular
   weight and a hair smaller so they don't outweigh the short numbers. */
.av-requisites__row--long dd {
	font-size: 0.90625rem;
	font-weight: 400;
	line-height: 1.55;
}

@media (min-width: 600px) {
	.av-requisites__row {
		grid-template-columns: minmax(0, 11rem) minmax(0, 1fr);
		gap: 1.5rem;
		align-items: baseline;
	}

	.av-requisites__row dt {
		font-size: 0.875rem;
	}
}

/* Two narrow columns (laptop): label above value again. */
@media (min-width: 1024px) and (max-width: 1279px) {
	.av-requisites__row {
		grid-template-columns: minmax(0, 1fr);
		gap: 0.125rem;
	}

	.av-requisites__row dt {
		font-size: 0.8125rem;
	}
}

@media (min-width: 1280px) {
	.av-requisites__row {
		grid-template-columns: minmax(0, 10rem) minmax(0, 1fr);
	}
}

/* Shared action row under both columns, split off by a full-width hairline. */
.av-requisites__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.75rem;
	margin-top: 0.75rem;
	padding-top: 1.25rem;
	border-top: 1px solid var(--av-line);
}

@media (min-width: 1024px) {
	.av-requisites__actions {
		margin-top: 0.25rem;
		padding-top: 1rem;
	}
}

.av-requisites__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.625rem;
	box-sizing: border-box;
	min-height: 48px;
	padding: 0.5rem 1.375rem;
	border: 1px solid var(--av-navy-btn);
	border-radius: 3px;
	font: inherit;
	font-size: 0.9375rem;
	font-weight: 500;
	line-height: 1.2;
	text-decoration: none;
	cursor: pointer;
	transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

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

.av-requisites__btn--copy {
	min-width: 15rem;
	background-color: var(--av-navy-btn);
	color: #fff;
}

.av-requisites__btn--copy:hover {
	border-color: var(--av-ink);
	background-color: var(--av-ink);
	color: #fff;
}

.av-requisites__btn--pdf {
	border-color: rgba(11, 31, 51, 0.35);
	background-color: #fff;
	color: var(--av-ink);
}

.av-requisites__btn--pdf:hover {
	border-color: var(--av-ink);
	color: var(--av-ink);
	text-decoration: none;
}

/* One clear navy ring, offset from the button; no colour change on focus.
   `.av-section` prefix beats the generic `.av-section a:focus-visible`. */
.av-section .av-requisites__btn:focus {
	outline: none;
}

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

.av-requisites__btn-icon {
	flex: 0 0 auto;
}

.av-requisites__btn-arrow {
	font-size: 1.0625rem;
	line-height: 1;
	color: var(--av-accent);
	transition: transform 0.2s ease;
}

.av-requisites__btn--pdf:hover .av-requisites__btn-arrow {
	transform: translateY(2px);
}

/* Mobile: tighter vertical rhythm only — font sizes, red rules and the
   action buttons stay as on larger screens. */
@media (max-width: 599px) {
	.av-requisites__content {
		padding-top: 1rem;
	}

	.av-requisites__grid {
		gap: 1.375rem;
	}

	.av-requisites__group-title {
		margin-bottom: 0.375rem;
	}

	.av-requisites__row {
		padding-block: 0.375rem;
	}

	.av-requisites__btn {
		width: 100%;
		min-width: 0;
	}
}

@media (prefers-reduced-motion: reduce) {
	.av-requisites__details::details-content,
	.av-requisites__toggle,
	.av-requisites__btn,
	.av-requisites__btn-arrow,
	.av-requisites__toggle::before,
	.av-requisites__toggle::after,
	.av-office-card__route,
	.av-office-card__route-arrow,
	.av-office-map__open,
	.av-contacts-info__value--link,
	.av-breadcrumbs a,
	.av-calc--contacts .av-calc__field--inset .av-calc__label {
		transition: none;
	}
}