/* ==========================================================================
   Автоколорит — оформление сайта
   Только оформление: тексты, ссылки и изображения приходят из Joomla.
   ========================================================================== */

:root {
	--ak-red:        #d6061f;
	--ak-red-light:  #e10925;
	--ak-red-dark:   #be051c;
	--ak-blue:       #0047d6;
	--ak-blue-light: #0057f0;
	--ak-navy:       #001021;
	--ak-navy-soft:  #0a2244;
	--ak-ink:        #0a1224;
	--ak-muted:      #616882;
	--ak-line:       #e3e9f2;
	--ak-bg-soft:    #f5f8fc;

	--ak-container:  1300px;
	--ak-radius:     16px;
	--ak-radius-lg:  24px;

	/* Красный градиент активного пункта меню и кнопок — снят с макета */
	--ak-red-grad:   linear-gradient(180deg, #e40523 0%, #b3071e 100%);
	/* Синий близнец красного градиента: плашка наведения в навигации */
	--ak-blue-grad:  linear-gradient(180deg, #0a5cf0 0%, #0034a0 100%);
	--ak-nav-ink:    #243585;
	--ak-nav-line:   #b9c6d6;

	/* Лупа с плюсом: подсказка «нажмите, чтобы увеличить» */
	--ak-ico-zoom: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='10.5' cy='10.5' r='6.5'/%3E%3Cpath d='M15.4 15.4 21 21M10.5 7.6v5.8M7.6 10.5h5.8'/%3E%3C/svg%3E");

	/* Трубка с волнами вызова: маска для .ak-btn__ico */
	--ak-ico-call: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4.9 2.6a.9.9 0 0 0-1.35-.09L2.2 3.9c-.65.65-.88 1.56-.6 2.36a23.4 23.4 0 0 0 5.54 8.78 23.4 23.4 0 0 0 8.78 5.54c.8.28 1.71.05 2.36-.6l1.39-1.35a.9.9 0 0 0-.09-1.35l-3.07-2.38a.9.9 0 0 0-.77-.16l-2.9.72a2.33 2.33 0 0 1-2.21-.61l-2.3-2.3a2.33 2.33 0 0 1-.61-2.21l.72-2.9a.9.9 0 0 0-.16-.77z'/%3E%3Cpath d='M14.6 2.9a7.6 7.6 0 0 1 6.3 6.3' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round'/%3E%3Cpath d='M14.2 6.6a3.9 3.9 0 0 1 2.9 2.9' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round'/%3E%3C/svg%3E");
}

/* --------------------------------------------------------------- основа -- */

body {
	font-family: 'Golos Text', 'Segoe UI', Arial, sans-serif;
	font-size: 17px;
	line-height: 1.55;
	color: var(--ak-ink);
	background: #fff;
	outline: none;
}

.ak-section img {
	max-width: 100%;
}

.ak-director__photo,
.ak-cert__img,
.ak-footer__logo {
	height: auto;
}

/*
 * Контент живёт в сетке фиксированной ширины и не расползается на широких
 * экранах. Фоны секций при этом остаются во всю ширину окна — они заданы
 * на самих секциях, а не на контейнере.
 */
.container {
	width: 100%;
	max-width: var(--ak-container);
	margin-inline: auto;
	padding-inline: 40px;
}

.ak-section {
	position: relative;
	padding-block: 96px;
}

/* -------------------------------------------------- типовые элементы -- */

.ak-accent {
	color: var(--ak-red);
}

.ak-eyebrow {
	position: relative;
	margin: 0 0 18px;
	padding-left: 22px;
	font-size: 15px;
	font-weight: 600;
	line-height: 1.2;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--ak-blue);
}

.ak-eyebrow::before {
	content: '';
	position: absolute;
	left: 0;
	top: 50%;
	transform: translateY(-50%);
	width: 4px;
	height: 22px;
	background: var(--ak-red);
	border-radius: 2px;
}

.ak-eyebrow--light {
	color: #76a9ec;
}

.ak-rule {
	display: block;
	width: 64px;
	height: 4px;
	margin-bottom: 20px;
	background: var(--ak-red);
	border-radius: 2px;
}

.ak-rule--duo {
	width: 212px;
	background: linear-gradient(to right, var(--ak-red) 0 64px, transparent 64px 76px, var(--ak-blue) 76px 100%);
}

.ak-section__head {
	max-width: 1300px;
	margin-bottom: 56px;
}

/* На макете ссылка стоит не у подзаголовка, а правее заголовка — по центру блока */
.ak-section__head--split {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 40px;
	max-width: none;
}

.ak-section__head-main {
	max-width: 1300px;
}

.ak-section__title {
	margin: 0 0 18px;
	font-size: clamp(28px, 3.4vw, 44px);
	font-weight: 700;
	line-height: 1.08;
	letter-spacing: -0.015em;
	color: var(--ak-ink);
}

.ak-section__subtitle {
	margin: 0;
	max-width: 900px;
	font-size: 18px;
	line-height: 1.5;
	color: var(--ak-muted);
}

/* ------------------------------------------------------------- кнопки -- */

.ak-btn {
	position: relative;
	overflow: hidden;
	display: inline-flex;
	align-items: center;
	gap: 14px;
	padding: 18px 32px;
	border: 0;
	border-radius: 10px;
	font-size: 17px;
	font-weight: 600;
	line-height: 1.2;
	text-decoration: none;
	cursor: pointer;
}

/*
 * Содержимое кнопки лежит над слоем заливки, который выезжает при наведении
 * (см. animations.css). Без этого слоя кнопка выглядит ровно так же.
 */
.ak-btn > * {
	position: relative;
	z-index: 2;
}

.ak-btn--red {
	background: linear-gradient(180deg, var(--ak-red-light) 0%, var(--ak-red-dark) 100%);
	color: #fff;
}

/*
 * Bootstrap перекрашивает любую ссылку по `a:hover` — это правило специфичнее
 * одиночного класса, поэтому цвет кнопок закрепляется для всех состояний.
 */
.ak-btn--red:hover,
.ak-btn--red:focus,
.ak-btn--red:active,
.ak-btn--ghost:hover,
.ak-btn--ghost:focus,
.ak-btn--ghost:active {
	color: #fff;
}

.ak-btn--white:hover,
.ak-btn--white:focus,
.ak-btn--white:active {
	color: var(--ak-blue);
}

.ak-btn--lg {
	padding: 22px 40px;
	font-size: 18px;
}

.ak-btn--round {
	border-radius: 999px;
	padding: 20px 38px;
}

.ak-btn--white {
	background: #fff;
	color: var(--ak-blue);
	border-radius: 999px;
	box-shadow: 0 10px 30px rgba(10, 34, 68, .12);
}

.ak-btn--ghost {
	background: transparent;
	color: #fff;
	border: 1px solid rgba(255, 255, 255, .45);
	border-radius: 999px;
	padding: 18px 36px;
}

.ak-btn__arrow {
	position: relative;
	width: 22px;
	height: 12px;
	flex: none;
}

.ak-btn__arrow::before {
	content: '';
	position: absolute;
	left: 0;
	top: 5px;
	width: 100%;
	height: 2px;
	background: currentColor;
}

.ak-btn__arrow::after {
	content: '';
	position: absolute;
	right: 0;
	top: 1px;
	width: 10px;
	height: 10px;
	border-top: 2px solid currentColor;
	border-right: 2px solid currentColor;
	transform: rotate(45deg);
}

/*
 * Трубка с волнами вызова — как на макете: глиф прямо на кнопке, без подложки.
 */
.ak-btn__ico {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 26px;
	height: 26px;
	flex: none;
}

.ak-btn__ico::before {
	content: '';
	width: 100%;
	height: 100%;
	background: currentColor;
	-webkit-mask: var(--ak-ico-call) center / contain no-repeat;
	mask: var(--ak-ico-call) center / contain no-repeat;
}

.ak-btn__play {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 46px;
	height: 46px;
	flex: none;
	border-radius: 50%;
	background: var(--ak-blue);
}

.ak-btn__play::before {
	content: '';
	border-style: solid;
	border-width: 7px 0 7px 11px;
	border-color: transparent transparent transparent #fff;
	margin-left: 3px;
}

/* ------------------------------------------------------ текстовая ссылка -- */

.ak-textlink {
	display: inline-flex;
	align-items: center;
	gap: 14px;
	font-size: 16px;
	font-weight: 500;
	color: var(--ak-blue);
	text-decoration: none;
	white-space: nowrap;
}

/* На макете черта подведена под текст, а стрелка стоит за ней */
.ak-textlink__text {
	padding-bottom: 10px;
	border-bottom: 1px solid rgba(0, 71, 214, .3);
}

.ak-textlink--caps {
	font-size: 15px;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.ak-textlink__arrow {
	position: relative;
	width: 22px;
	height: 12px;
	flex: none;
}

.ak-textlink__arrow::before {
	content: '';
	position: absolute;
	left: 0;
	top: 5px;
	width: 100%;
	height: 2px;
	background: currentColor;
}

.ak-textlink__arrow::after {
	content: '';
	position: absolute;
	right: 0;
	top: 1px;
	width: 10px;
	height: 10px;
	border-top: 2px solid currentColor;
	border-right: 2px solid currentColor;
	transform: rotate(45deg);
}

/* ------------------------------------------------------------- шапка -- */

/*
 * Шапка и меню закрепляются вместе. В закреплённом состоянии остаётся
 * «мини-шапка»: логотип меньше, контакты скрыты, полосы тоньше — высота
 * падает примерно вдвое, и за ней остаётся видно страницу.
 *
 * Класс навешивает javascript/sticky-header.js, он же задаёт высоту
 * распорке, которая держит место шапки и не даёт странице подпрыгнуть.
 */
.ak-header {
	position: relative;
	z-index: 90;
}

.ak-header__spacer {
	height: 0;
}

.ak-header.is-stuck {
	position: fixed;
	left: 0;
	right: 0;
	top: 0;
	animation: ak-header-drop .28s ease both;
}

@keyframes ak-header-drop {
	from { transform: translateY(-100%); }
	to   { transform: translateY(0); }
}

.ak-header.is-stuck .ak-topbar__inner {
	min-height: 0;
	padding-block: 6px;
}

.ak-header.is-stuck .ak-topbar__logo-img {
	height: 40px;
}

/* Контакты в мини-шапке не помещаются — телефон остаётся на плавающей кнопке */
.ak-header.is-stuck .ak-topbar__contacts {
	display: none;
}

.ak-header.is-stuck .ak-topbar__cta {
	margin-left: auto;
	padding: 6px 14px 6px 7px;
	font-size: 14px;
}

.ak-header.is-stuck .ak-nav__link {
	padding-block: 11px;
	font-size: 15px;
}


.ak-topbar {
	position: relative;
	background: #f2f6fb center / cover no-repeat;
}

.ak-topbar__inner {
	display: flex;
	align-items: center;
	gap: 28px;
	min-height: 80px;
	padding-block: 10px;
}

.ak-topbar__logo {
	flex: none;
	display: block;
}

/* Высота логотипа задаёт высоту всей шапки, поэтому ограничиваем именно её */
.ak-topbar__logo-img {
	display: block;
	width: auto;
	max-width: 100%;
	height: 58px;
}

.ak-topbar__contacts {
	display: flex;
	align-items: center;
	gap: 20px;
	margin-right: auto;
}

.ak-contact {
	display: flex;
	align-items: center;
	gap: 11px;
	padding-right: 20px;
	border-right: 1px solid var(--ak-line);
	color: var(--ak-ink);
	text-decoration: none;
}

.ak-topbar__contacts .ak-contact:last-child {
	border-right: 0;
	padding-right: 0;
}

.ak-contact__ico {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	flex: none;
	border-radius: 11px;
	background: linear-gradient(145deg, #f5f8fd 0%, #e6eef8 100%);
}

.ak-contact__icon {
	width: 19px;
	height: 19px;
	object-fit: contain;
}

.ak-contact__text {
	display: flex;
	flex-direction: column;
}

.ak-contact__line {
	font-size: 15px;
	line-height: 1.35;
	white-space: nowrap;
}

.ak-topbar__cta {
	flex: none;
	border-radius: 999px;
	padding: 9px 16px 9px 9px;
}

/* ---------------------------------------------------------- навигация -- */

.ak-nav {
	position: relative;
	z-index: 20;
	background: #fff;
	box-shadow: 0 2px 18px rgba(10, 34, 68, .06);
}

.ak-nav .container {
	position: relative;
}

/*
 * Бургер. Печатается в шапке (mod-topbar.php), поэтому и показывается по
 * классу .ak-topbar__toggle в мобильном блоке — здесь только оформление.
 */
.ak-nav__toggle {
	display: none;
	flex-direction: column;
	justify-content: center;
	gap: 5px;
	width: 46px;
	height: 46px;
	padding: 0 11px;
	flex: none;
	border: 1px solid var(--ak-line);
	border-radius: 50%;
	background: #fff;
}

.ak-nav__toggle-bar {
	display: block;
	height: 2px;
	background: var(--ak-ink);
	border-radius: 2px;
	transition: transform .2s ease, opacity .2s ease;
}

/* Раскрытая панель — бургер складывается в крестик */
.ak-header.is-nav-open .ak-nav__toggle-bar:nth-child(1) {
	transform: translateY(7px) rotate(45deg);
}

.ak-header.is-nav-open .ak-nav__toggle-bar:nth-child(2) {
	opacity: 0;
}

.ak-header.is-nav-open .ak-nav__toggle-bar:nth-child(3) {
	transform: translateY(-7px) rotate(-45deg);
}

.ak-nav__list {
	display: flex;
	align-items: stretch;
	margin: 0;
	padding: 0;
	list-style: none;
}

/*
 * Пункты делят ширину полосы поровну: flex-basis 0 означает, что ширина
 * считается не по содержимому. Это главное против скачка вёрстки — когда
 * активный пункт меняется, надписи остаются ровно на прежних местах, хотя
 * одна из них становится жирнее и получает плашку.
 */
.ak-nav__item {
	position: relative;
	display: flex;
	flex: 1 1 0;
	align-items: center;
	justify-content: center;
}

.ak-nav__link {
	position: relative;
	z-index: 2;
	display: block;
	padding: 17px 20px;
	font-size: 16px;
	font-weight: 500;
	line-height: 1.2;
	color: var(--ak-nav-ink);
	text-decoration: none;
}

/*
 * Горизонтальная полоса меню — только широкий экран. Всё, что ниже, собрано
 * в один медиазапрос: разделители между пунктами и скошенная плашка
 * рассчитаны на полосу и в бургере не используются. Раньше эти правила были
 * общими, а мобильный блок их по одному отменял — часть отмен устаревала при
 * каждой правке, и на узком экране оставались то разделители, то куски плашки.
 */
@media (min-width: 1101px) {
	/*
	 * Разделитель — короткая линия по центру высоты. Рисуется фоном, а не
	 * псевдоэлементом: оба псевдоэлемента пункта заняты плашкой, которая
	 * появляется ещё и при наведении.
	 */
	.ak-nav__list > .ak-nav__item + .ak-nav__item {
		background-image: linear-gradient(var(--ak-nav-line), var(--ak-nav-line));
		background-size: 2px 28px;
		background-position: left center;
		background-repeat: no-repeat;
	}

	/* Рядом с плашкой разделителя нет — ни со своей стороны, ни у соседа */
	.ak-nav__list > .ak-nav__item:hover,
	.ak-nav__list > .ak-nav__item:hover + .ak-nav__item,
	.ak-nav__list > .ak-nav__item.is-current + .ak-nav__item,
	.ak-nav__list > .ak-nav__item.is-active + .ak-nav__item {
		background-image: none;
	}

	/*
	 * Плашка пункта — скруглённая слева и срезанная вправо-вниз справа.
	 * Собирается из двух слоёв: ::before — основная часть, ::after — скошенная
	 * кромка. Отступы ссылки при этом не меняются: плашка рисуется по границам
	 * самого пункта, поэтому её появление не двигает надпись.
	 *
	 * Красная — у текущего раздела, синяя — у того, на который навели.
	 */
	.ak-nav__list > .ak-nav__item.is-current::before,
	.ak-nav__list > .ak-nav__item.is-active::before,
	.ak-nav__list > .ak-nav__item:hover::before {
		content: '';
		position: absolute;
		left: 0;
		right: 32px;
		top: 2px;
		bottom: 2px;
		background: var(--ak-red-grad);
		border-radius: 9px 0 0 9px;
		transition: opacity .2s ease;
	}

	.ak-nav__list > .ak-nav__item.is-current::after,
	.ak-nav__list > .ak-nav__item.is-active::after,
	.ak-nav__list > .ak-nav__item:hover::after {
		content: '';
		position: absolute;
		right: 11px;
		top: 2px;
		bottom: 2px;
		width: 48px;
		background: var(--ak-red-grad);
		border-radius: 0 9px 0 0;
		transform: skewX(20deg);
		transition: opacity .2s ease;
	}

	.ak-nav__list > .ak-nav__item.is-current > .ak-nav__link,
	.ak-nav__list > .ak-nav__item.is-active > .ak-nav__link,
	.ak-nav__list > .ak-nav__item:hover > .ak-nav__link {
		color: #fff;
		font-weight: 600;
	}

	.ak-nav__list > .ak-nav__item.is-current > .ak-nav__link::after,
	.ak-nav__list > .ak-nav__item.is-active > .ak-nav__link::after,
	.ak-nav__list > .ak-nav__item:hover > .ak-nav__link::after {
		content: '';
		display: block;
		width: 32px;
		height: 2px;
		margin: 6px auto -6px;
		background: #fff;
		border-radius: 2px;
	}

	/* Плашка наведения — синяя, чтобы её не путали с текущим разделом */
	.ak-nav__list > .ak-nav__item:hover::before,
	.ak-nav__list > .ak-nav__item:hover::after {
		background: var(--ak-blue-grad);
	}

	/*
	 * Пока курсор в меню, красная плашка текущего раздела гаснет: иначе на
	 * полосе оказывались бы две подсветки сразу и было бы непонятно, где вы
	 * находитесь, а где просто навели. Гасим прозрачностью, а не отключением —
	 * так ширина пункта не меняется.
	 */
	.ak-nav__list:hover > .ak-nav__item.is-current:not(:hover)::before,
	.ak-nav__list:hover > .ak-nav__item.is-current:not(:hover)::after,
	.ak-nav__list:hover > .ak-nav__item.is-active:not(:hover)::before,
	.ak-nav__list:hover > .ak-nav__item.is-active:not(:hover)::after {
		opacity: 0;
	}

	.ak-nav__list:hover > .ak-nav__item.is-current:not(:hover) > .ak-nav__link,
	.ak-nav__list:hover > .ak-nav__item.is-active:not(:hover) > .ak-nav__link {
		color: var(--ak-nav-ink);
	}

	.ak-nav__list:hover > .ak-nav__item.is-current:not(:hover) > .ak-nav__link::after,
	.ak-nav__list:hover > .ak-nav__item.is-active:not(:hover) > .ak-nav__link::after {
		opacity: 0;
	}

	/*
	 * Последний пункт полосы — плашка зеркальная: справа ровный край по границе
	 * контейнера, скос уходит влево. Иначе хвост торчал бы наружу и обрезался
	 * краем экрана.
	 */
	.ak-nav__list > .ak-nav__item:last-child.is-current::before,
	.ak-nav__list > .ak-nav__item:last-child.is-active::before,
	.ak-nav__list > .ak-nav__item:last-child:hover::before {
		left: 32px;
		right: 0;
		border-radius: 0 9px 9px 0;
	}

	.ak-nav__list > .ak-nav__item:last-child.is-current::after,
	.ak-nav__list > .ak-nav__item:last-child.is-active::after,
	.ak-nav__list > .ak-nav__item:last-child:hover::after {
		right: auto;
		left: 11px;
		border-radius: 9px 0 0 0;
		transform: skewX(-20deg);
	}

	/* На плашке тёмная «галка» не читается */
	.ak-nav__list > .ak-nav__item.is-current > .ak-nav__caret,
	.ak-nav__list > .ak-nav__item.is-active > .ak-nav__caret,
	.ak-nav__list > .ak-nav__item:hover > .ak-nav__caret {
		color: #fff;
	}

	/* Курсор в меню — текущий раздел снова обычный, и «галка» тоже */
	.ak-nav__list:hover > .ak-nav__item.is-current:not(:hover) > .ak-nav__caret,
	.ak-nav__list:hover > .ak-nav__item.is-active:not(:hover) > .ak-nav__caret {
		color: var(--ak-nav-ink);
	}
}


/*
 * «Галка» у пунктов с подменю — кнопка: в бургере ею раскрывают подраздел.
 * Сама стрелка нарисована вложенным span, а не границами кнопки: на узком
 * экране кнопке нужна площадь под палец, а стрелка должна остаться мелкой.
 *
 * z-index обязателен: красная плашка активного пункта рисуется
 * псевдоэлементом ::after того же li, то есть поверх этой «галки».
 */
.ak-nav__caret {
	position: relative;
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: center;
	/*
	 * Отрицательное поле слева «съедает» правый отступ ссылки, иначе «галка»
	 * уехала бы от слова на всю его ширину. Остаток — зазор между текстом и
	 * «галкой»: 20 px отступа минус 12 px даёт 8 px воздуха.
	 */
	margin-right: 12px;
	margin-left: -12px;
	flex: none;
	padding: 0;
	border: 0;
	background: none;
	color: var(--ak-nav-ink);
	/* На широком экране подменю раскрывается по наведению — клик тут не нужен */
	pointer-events: none;
}

.ak-nav__caret-ico {
	display: block;
	width: 9px;
	height: 9px;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: rotate(45deg) translate(-3px, -3px);
	transition: transform .2s ease;
}

.ak-nav__sub {
	position: absolute;
	left: 0;
	top: 100%;
	z-index: 30;
	display: none;
	min-width: 272px;
	margin: 0;
	padding: 8px 0;
	list-style: none;
	background: #fff;
	border-radius: 0 0 12px 12px;
	box-shadow: 0 18px 40px rgba(10, 34, 68, .14);
}

.ak-nav__sub .ak-nav__item {
	display: block;
}

.ak-nav__sub .ak-nav__item + .ak-nav__item::before {
	content: none;
}

.ak-nav__sub .ak-nav__link {
	padding: 11px 20px;
	font-size: 16px;
}

/*
 * Состояния подпункта. Красная плашка верхнего уровня сюда не приходит —
 * правила выше ограничены :not(.ak-nav__item--sub), — поэтому текущий пункт
 * отмечаем подсветкой строки и красной полосой слева, а наведение — синим.
 * Селекторы начинаются с .ak-nav, чтобы перебить общее правило ховера
 * навигации из animations.css: тот файл подключается следом.
 */
.ak-nav .ak-nav__sub .ak-nav__item > .ak-nav__link {
	transition: background-color .2s ease, color .2s ease, box-shadow .2s ease;
}

.ak-nav .ak-nav__sub .ak-nav__item.is-current > .ak-nav__link,
.ak-nav .ak-nav__sub .ak-nav__item.is-active > .ak-nav__link {
	box-shadow: inset 3px 0 0 var(--ak-red);
	background: var(--ak-bg-soft);
	color: var(--ak-red);
	font-weight: 600;
}

.ak-nav .ak-nav__sub .ak-nav__item > .ak-nav__link:hover {
	background: var(--ak-bg-soft);
	color: var(--ak-blue);
}

.ak-nav .ak-nav__sub .ak-nav__item.is-current > .ak-nav__link:hover,
.ak-nav .ak-nav__sub .ak-nav__item.is-active > .ak-nav__link:hover {
	color: var(--ak-red);
}

/* ----------------------------------------------------- первый экран -- */

/* z-index нужен, чтобы нижняя лента ложилась поверх следующей секции */
.ak-hero {
	position: relative;
	z-index: 2;
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	padding-block: 0;
	min-height: 53vw;
	background: var(--ak-navy) center / cover no-repeat;
	color: #fff;
}

/*
 * Фоновый ролик лежит ровно на месте фоновой фотографии и кадрируется так же
 * (cover по центру), поэтому ленты и затемнение ложатся на него тем же кадром.
 */
.ak-hero__video {
	position: absolute;
	inset: 0;
	z-index: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	pointer-events: none;
}

/* Анимация фона — украшение: при просьбе уменьшить движение остаётся фотография */
@media (prefers-reduced-motion: reduce) {
	.ak-hero__video {
		display: none;
	}
}

.ak-hero__overlay {
	position: absolute;
	inset: 0;
	z-index: 1;
	background: linear-gradient(100deg, rgba(0, 9, 24, .92) 0%, rgba(0, 12, 30, .72) 34%, rgba(0, 16, 36, .18) 58%, rgba(0, 16, 36, 0) 72%);
}

/* Ленты первого экрана — слои поверх фотографии и затемнения */
.ak-hero__decor {
	position: absolute;
	left: 0;
	right: 0;
	z-index: 1;
	pointer-events: none;
}

/*
 * Верхняя лента свисает с кромки секции: видна только её верхняя часть, низ
 * уходит под край и растворяется маской — как на макете. Сдвиг и высота в vw,
 * чтобы доля картинки не менялась вместе с шириной экрана.
 */
.ak-hero__decor--top {
	top: 0;
	height: 7.4vw;
	overflow: hidden;
	-webkit-mask: linear-gradient(180deg, #000 55%, transparent 100%);
	mask: linear-gradient(180deg, #000 55%, transparent 100%);
}

.ak-hero__decor--top .ak-hero__decor-img {
	display: block;
	width: 100%;
	height: auto;
	margin-top: -12.2vw;
}

/*
 * Нижняя лента и фотография — слои одного кадра, поэтому она кадрируется так
 * же, как фон секции (cover по центру), и ложится на снимок ровно там, где её
 * поставил дизайнер. Снизу секция её не обрезает: лента выходит за кромку и
 * заходит на следующий блок.
 */
.ak-hero__decor--bottom {
	top: 0;
	bottom: 0;
}

/*
 * Сдвиг вниз сажает ленту на нижнюю кромку секции: слева она ложится ровно на
 * стык и переходит на следующий блок, справа уходит вверх, как на макете.
 * Доля в процентах от высоты слоя, поэтому пропорция держится на любой ширине.
 */
.ak-hero__decor--bottom .ak-hero__decor-img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	transform: translateY(34%);
}

/*
 * Распорки между текстом и плашкой преимуществ нет: иначе весь запас высоты
 * секции уходил бы в этот зазор и иконки отрывались от кнопки. Лишняя высота
 * остаётся под иконками, на волне.
 */
.ak-hero > .container {
	position: relative;
	z-index: 2;
	padding-top: 130px;
}

.ak-hero__content {
	position: relative;
	max-width: 920px;
	padding-top: 60px;
	padding-left: 40px;
}

/*
 * На первом экране красная черта вынесена в левое поле и тянется вдоль
 * надзаголовка и первой строки заголовка — как на макете.
 */
.ak-hero .ak-eyebrow {
	padding-left: 0;
}

.ak-hero .ak-eyebrow::before {
	left: -40px;
	top: 2px;
	transform: none;
	width: 5px;
	height: 146px;
}

.ak-hero__title {
	margin: 0 0 28px;
	font-size: clamp(32px, 4.2vw, 56px);
	font-weight: 700;
	line-height: 1.06;
	letter-spacing: -0.02em;
	color: #fff;
}

.ak-hero__title .ak-accent {
	color: #f5142c;
}

.ak-hero__text {
	max-width: 660px;
	margin-bottom: 36px;
	font-size: 18px;
	line-height: 1.5;
	color: rgba(255, 255, 255, .88);
}

.ak-hero__text p {
	margin: 0;
}

/*
 * Две кнопки первого экрана: красная — звонок, прозрачная — письмо.
 * .ak-btn--ghost по умолчанию пилюля с меньшими полями, поэтому здесь ей
 * задаются поля и скругление красной: рядом кнопки должны быть одного кроя.
 */
.ak-hero__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 16px;
}

.ak-hero__actions .ak-btn--ghost {
	padding: 22px 40px;
	border-radius: 10px;
}

.ak-hero__features {
	position: relative;
	z-index: 2;
	padding-block: 112px 110px;
}

/* Преимущества занимают левую часть экрана — правее поднимается лента */
.ak-hero .ak-features {
	max-width: 920px;
}

.ak-features {
	display: flex;
	align-items: center;
	margin: 0;
	padding: 0;
	list-style: none;
}

.ak-features__item {
	display: flex;
	align-items: center;
	gap: 20px;
	flex: 1 1 0;
	padding-right: 48px;
	border-right: 1px solid rgba(255, 255, 255, .18);
}

.ak-features__item:last-child {
	border-right: 0;
}

.ak-features__item + .ak-features__item {
	padding-left: 48px;
}

.ak-features__ico {
	flex: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 72px;
	height: 72px;
}

.ak-features__icon {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.ak-features__title {
	font-size: 17px;
	line-height: 1.35;
	color: #fff;
}

.ak-features--compact .ak-features__item {
	flex: 0 1 auto;
	gap: 14px;
	padding-right: 32px;
}

.ak-features--compact .ak-features__item + .ak-features__item {
	padding-left: 32px;
}

.ak-features--compact .ak-features__ico {
	width: 48px;
	height: 48px;
}

.ak-features--compact .ak-features__title {
	font-size: 17px;
	max-width: 190px;
}

/* ----------------------------------------------- услуги и категории -- */

.ak-services {
	background: #fff;
}

/* Лента первого экрана переходит сюда сверху — освобождаем ей место */
.ak-hero + .ak-section {
	padding-top: calc(96px + 8vw);
}

.ak-services__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 28px;
}

.ak-card {
	display: flex;
	flex-direction: column;
	background: #fff;
	border: 1px solid var(--ak-line);
	border-radius: var(--ak-radius-lg);
	overflow: hidden;
	color: inherit;
	text-decoration: none;
	box-shadow: 0 12px 34px rgba(10, 34, 68, .05);
}

.ak-card__media {
	display: block;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	background: var(--ak-bg-soft);
}

.ak-card__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.ak-card__body {
	display: flex;
	gap: 22px;
	padding: 30px 32px 34px;
}

.ak-card__ico {
	position: relative;
	flex: none;
	display: inline-flex;
	align-items: flex-start;
	justify-content: center;
	width: 54px;
	padding-bottom: 26px;
}

.ak-card__ico::after {
	content: '';
	position: absolute;
	left: 2px;
	bottom: 0;
	width: 34px;
	height: 3px;
	background: var(--ak-red);
	border-radius: 2px;
}

.ak-card__icon {
	width: 46px;
	height: 46px;
	object-fit: contain;
}

.ak-card__content {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.ak-card__title {
	font-size: 20px;
	font-weight: 700;
	line-height: 1.25;
	color: var(--ak-ink);
}

.ak-card__desc {
	font-size: 16px;
	line-height: 1.45;
	color: var(--ak-muted);
}

.ak-badges {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	margin: 36px 0 0;
	padding: 0;
	list-style: none;
}

.ak-badges__item {
	display: flex;
	align-items: center;
	gap: 18px;
	padding: 18px 40px;
	border-right: 1px solid var(--ak-line);
}

.ak-badges__item:last-child {
	border-right: 0;
}

.ak-badges__ico {
	flex: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
}

.ak-badges__icon {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.ak-badges__text {
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.ak-badges__title {
	font-size: 17px;
	font-weight: 700;
	color: var(--ak-ink);
}

.ak-badges__desc {
	font-size: 15px;
	color: var(--ak-muted);
}

/* ------------------------------------------------------------ партнёр -- */

.ak-partner {
	padding-block: 0;
	min-height: 45vw;
	display: flex;
	align-items: center;
	background: var(--ak-navy) center / cover no-repeat;
	color: #fff;
}

.ak-partner__inner {
	display: grid;
	grid-template-columns: minmax(0, 44%) minmax(0, 56%);
	align-items: center;
	gap: 40px;
	padding-block: 7vw;
}

.ak-partner__inner {
	position: relative;
}

.ak-partner__content {
	position: relative;
	max-width: 720px;
	padding: 2vw 1vw 2vw 2.2vw;
}

/*
 * Затемнение под текстом. Фон секции уже несёт собственную тёмную подложку,
 * поэтому здесь нужен лишь мягкий добор контраста: по горизонтали он гаснет
 * к фотографии, а маска убирает края сверху и снизу, чтобы прямоугольник не
 * читался и не перекрывал цветную ленту у кромки секции. Слева затемнение
 * набирает плотность на том же запасе в 6vw, на который вынесено за текст, —
 * к началу строк оно уже полное, а кромки прямоугольника не видно.
 */
.ak-partner__content::before {
	content: '';
	position: absolute;
	inset: -2vw -8vw -3vw -6vw;
	background: linear-gradient(90deg, rgba(2, 14, 30, 0) 0, rgba(2, 14, 30, .93) 6vw, rgba(2, 14, 30, .9) 58%, rgba(2, 14, 30, .55) 84%, rgba(2, 14, 30, 0) 100%);
	-webkit-mask: linear-gradient(180deg, transparent 0%, #000 16%, #000 84%, transparent 100%);
	mask: linear-gradient(180deg, transparent 0%, #000 16%, #000 84%, transparent 100%);
}

.ak-partner__content > * {
	position: relative;
}

/* Красная черта вынесена в левое поле и тянется вдоль первой строки заголовка */
.ak-partner .ak-eyebrow {
	padding-left: 0;
}

.ak-partner .ak-eyebrow::before {
	left: -28px;
	top: 2px;
	transform: none;
	width: 5px;
	height: 115px;
}

.ak-partner__title {
	margin: 0 0 24px;
	font-size: clamp(28px, 3.5vw, 46px);
	font-weight: 700;
	line-height: 1.08;
	letter-spacing: -0.015em;
	color: #fff;
}

.ak-partner__text {
	margin-bottom: 36px;
	font-size: 17px;
	line-height: 1.5;
	color: rgba(255, 255, 255, .85);
}

.ak-partner__text p {
	margin: 0 0 18px;
}

.ak-partner__text p:last-child {
	margin-bottom: 0;
}

/*
 * Карточка показателей — матовое стекло с подсвеченной красной гранью слева,
 * как на макете: тёмно-синяя заливка, тонкая светлая рамка, скругление 28px.
 */
.ak-stats {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 30px;
	justify-self: end;
	width: min(620px, 100%);
	padding: 44px 48px 44px 54px;
	background: rgba(8, 24, 46, .42);
	border: 1px solid rgba(188, 215, 245, .26);
	border-radius: 28px;
	/* Матовость даёт сама плашка: фотография под ней резкая, и без размытия
	   цифры тонут в бликах цеха. Радиус наследуется, так что блюр обрезается
	   по скруглению. */
	-webkit-backdrop-filter: blur(18px) saturate(115%);
	backdrop-filter: blur(18px) saturate(115%);
}

.ak-stats::before {
	content: '';
	position: absolute;
	left: -4px;
	top: 18px;
	bottom: 18px;
	width: 6px;
	border-radius: 3px;
	background: linear-gradient(180deg, #ff2037 0%, #d2041d 100%);
	box-shadow: 0 0 18px rgba(255, 32, 55, .65);
}

/*
 * Раньше карточка сажалась в процентах от всей секции — на широком экране она
 * отрывалась от текста и висела у кромки окна. Теперь это обычный элемент
 * сетки: правым краем она встаёт по контейнеру, высота — по содержимому.
 */
@media (min-width: 1101px) {
	.ak-stats {
		align-self: stretch;
		margin-block: 2vw;
	}
}

.ak-stats__item {
	display: flex;
	align-items: center;
	gap: 26px;
}

.ak-stats__ico {
	flex: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 88px;
	height: 88px;
}

.ak-stats__icon {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.ak-stats__text {
	display: flex;
	flex-direction: column;
}

.ak-stats__value {
	font-size: clamp(24px, 2.5vw, 32px);
	font-weight: 700;
	line-height: 1.1;
	color: #fff;
}

.ak-stats__label {
	font-size: 16px;
	color: rgba(255, 255, 255, .78);
}

/* ------------------------------------------------------ как мы работаем -- */

.ak-process {
	background: #fff;
}

/* Заголовок переносится после «промышленной», как на макете, — иначе строка
   съедает место, отведённое ссылке справа */
.ak-process .ak-section__head-main {
	max-width: 1040px;
}

/* На макете карточки стоят к шапке ближе обычного */
.ak-process .ak-section__head {
	margin-bottom: 34px;
}

.ak-steps {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 28px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.ak-steps__item {
	display: flex;
	flex-direction: column;
	background: #fff;
	border-radius: var(--ak-radius);
	overflow: hidden;
	box-shadow: 0 14px 36px rgba(10, 34, 68, .07);
}

.ak-steps__media {
	display: block;
	aspect-ratio: 7 / 5;
	overflow: hidden;
	background: var(--ak-bg-soft);
}

.ak-steps__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/*
 * Красная черта на макете короткая — ростом с номер, а не во всю высоту
 * карточки, поэтому она нарисована псевдоэлементом, а текст отодвинут от неё
 * левым полем. Размеры сняты с макета и пересчитаны на нашу ширину карточки.
 */
.ak-steps__body {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding: 16px 26px 34px 52px;
}

.ak-steps__body::before {
	content: '';
	position: absolute;
	left: 26px;
	top: 23px;
	width: 3px;
	height: 48px;
	background: var(--ak-red);
}

.ak-steps__num {
	font-size: 38px;
	font-weight: 700;
	line-height: 1;
	color: var(--ak-blue-light);
}

.ak-steps__title {
	font-size: 20px;
	font-weight: 700;
	color: var(--ak-ink);
}

.ak-steps__desc {
	font-size: 16px;
	line-height: 1.5;
	color: var(--ak-muted);
}

/* -------------------------------------------------- обращение директора -- */

/*
 * Высота секции повторяет пропорцию кадра (1670 × 942): ленты нарисованы у
 * самых его кромок, и при другой высоте cover срезал бы их вместе с краями.
 */
.ak-director {
	padding-block: 0;
	min-height: 56vw;
	display: flex;
	align-items: center;
	background: var(--ak-navy-soft) center / cover no-repeat;
	color: var(--ak-ink);
	overflow: hidden;
}

/*
 * Ленты — отдельные слои у кромок секции. В текущем макете они не нужны:
 * кадр директора нарисован уже с лентами, и поля «Декоративная графика»
 * пустые. Правила оставлены на случай, если в поле положат ленту отдельным
 * файлом: верхняя растягивается по ширине и видна целиком, нижняя кадрируется
 * так же, как фон (cover), и ложится на снимок там, где её поставил дизайнер.
 */
.ak-director__ribbon {
	position: absolute;
	left: 0;
	right: 0;
	z-index: 1;
	pointer-events: none;
}

.ak-director__ribbon--top {
	top: 0;
}

.ak-director__ribbon--bottom {
	top: 0;
	bottom: 0;
}

.ak-director__ribbon-img {
	display: block;
	width: 100%;
	height: auto;
}

.ak-director__ribbon--bottom .ak-director__ribbon-img {
	height: 100%;
	object-fit: cover;
	object-position: center;
}

/* Содержимое лежит поверх лент */
.ak-director > .container {
	position: relative;
	z-index: 2;
}

.ak-director__inner {
	display: grid;
	grid-template-columns: minmax(0, 42%) minmax(0, 58%);
	align-items: end;
	gap: 20px;
	padding-top: 6vw;
}

/*
 * Когда человек вписан прямо в фоновую картинку, отдельной фотографии в
 * разметке нет. Сетка от этого не меняется: карточка жёстко закреплена во
 * второй колонке, иначе она съезжает в левую и накрывает собой человека.
 */
.ak-director__inner--bg-photo {
	align-items: center;
	padding-top: 0;
}

.ak-director__figure {
	align-self: end;
}

.ak-director__photo {
	display: block;
	width: 100%;
	height: auto;
}

.ak-director__card {
	grid-column: 2;
	align-self: center;
	margin-bottom: 6vw;
	padding: 48px 56px;
	background: rgba(255, 255, 255, .78);
	backdrop-filter: blur(14px);
	-webkit-backdrop-filter: blur(14px);
	border: 1px solid rgba(255, 255, 255, .6);
	border-radius: var(--ak-radius-lg);
	box-shadow: 0 24px 60px rgba(4, 22, 54, .18);
}

.ak-director__title {
	margin: 0 0 24px;
	font-size: clamp(26px, 3.1vw, 40px);
	font-weight: 700;
	line-height: 1.1;
	letter-spacing: -0.015em;
	color: var(--ak-ink);
}

.ak-director__text {
	font-size: 18px;
	line-height: 1.55;
	color: #22304f;
}

.ak-director__text p {
	margin: 0 0 18px;
}

/* Факсимиле стоит сразу за подписью должности, а не у правого края карточки */
.ak-director__person {
	display: flex;
	align-items: center;
	gap: 44px;
	margin: 26px 0 28px;
}

.ak-director__person-text {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.ak-director__name {
	font-size: 18px;
	font-weight: 700;
	color: var(--ak-ink);
}

.ak-director__post {
	font-size: 16px;
	color: var(--ak-muted);
}

/* Факсимиле не должно ужиматься вслед за строкой имени — у него свой размер */
.ak-director__sign-wrap {
	flex: none;
	line-height: 0;
}

.ak-director__sign {
	max-height: 90px;
	width: auto;
}

/* --------------------------------------------------------- нам доверяют -- */

.ak-trust {
	background: #fff;
	padding-bottom: 72px;
}

/*
 * Логотипы стоят в одну строку на любой ширине и просто уменьшаются вместе с
 * экраном: переносом строка распадалась на два неравных ряда и читалась как
 * случайный набор картинок. Перенос оставлен только для текстового пункта —
 * он на узком экране уходит отдельной строкой (блок ниже, в адаптиве).
 */
.ak-trust__list {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	margin: 0;
	padding: 0;
	list-style: none;
}

.ak-trust__item {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 1 1 auto;
	/* Без min-width картинка не даёт пункту сжаться и строка рвётся переносом */
	min-width: 0;
	padding: 10px clamp(14px, 2.5vw, 48px);
	border-right: 1px solid var(--ak-line);
}

.ak-trust__item:last-child {
	border-right: 0;
}

.ak-trust__item:first-child {
	justify-content: flex-start;
	padding-left: 0;
	flex: 0 1 auto;
}

/* Высота привязана к ширине экрана — так логотипы уменьшаются плавно */
.ak-trust__img {
	max-height: clamp(40px, 7vw, 110px);
	max-width: 100%;
	width: auto;
	height: auto;
	object-fit: contain;
}

.ak-trust__item--text {
	flex: 0 1 auto;
}

.ak-trust__text {
	max-width: 260px;
	font-size: 18px;
	line-height: 1.4;
	color: var(--ak-muted);
}

/* ----------------------------------------------- готовы к сотрудничеству -- */

.ak-cta {
	padding-block: 0;
	min-height: 52vw;
	display: flex;
	align-items: center;
	background: var(--ak-navy) center / cover no-repeat;
	color: #fff;
}

.ak-cta__content {
	position: relative;
	max-width: 760px;
	padding-block: 7vw;
}

/*
 * В узкой сетке текст сместился к центру и заехал на светлую часть снимка.
 * Подложка гасит фотографию под ним и растворяется к правому краю; слева
 * заливает поле до кромки экрана, чтобы не читалась как прямоугольник.
 */
.ak-cta__content::before {
	content: '';
	position: absolute;
	inset: 0 -8vw 0 -50vw;
	/* Отсчёт справа: спад укладывается ровно в вылет за текстом, поэтому от
	   ширины окна он не зависит и буквы всегда лежат на плотной подложке. */
	background: linear-gradient(to left, rgba(2, 14, 30, 0) 0, rgba(2, 14, 30, .5) 3vw, rgba(2, 14, 30, .9) 8vw, rgba(2, 14, 30, .92) 100%);
	-webkit-mask: linear-gradient(180deg, transparent 0%, #000 14%, #000 86%, transparent 100%);
	mask: linear-gradient(180deg, transparent 0%, #000 14%, #000 86%, transparent 100%);
	pointer-events: none;
}

.ak-cta__content > * {
	position: relative;
}

.ak-cta__title {
	margin: 0;
	font-size: clamp(30px, 3.9vw, 50px);
	font-weight: 700;
	line-height: 1.06;
	letter-spacing: -0.02em;
	color: #fff;
}

.ak-cta__rule {
	display: block;
	width: 120px;
	height: 4px;
	margin: 26px 0;
	background: var(--ak-red);
	border-radius: 2px;
}

.ak-cta__text {
	margin: 0 0 40px;
	font-size: 18px;
	line-height: 1.5;
	color: rgba(255, 255, 255, .9);
}

.ak-cta .ak-features {
	margin-bottom: 44px;
}

.ak-cta .ak-features__item {
	border-right-color: rgba(255, 255, 255, .22);
}

/* ----------------------------------------------------------- сертификаты -- */

.ak-certificates {
	background: var(--ak-bg-soft);
}

.ak-cert {
	display: flex;
	flex-direction: column;
	height: 100%;
	background: #fff;
	border: 1px solid var(--ak-line);
	border-radius: var(--ak-radius);
	overflow: hidden;
}

.ak-cert__media {
	position: relative;
	display: flex;
	aspect-ratio: 3 / 4;
	padding: 22px 22px 0;
	background: #fff;
}

/* Медиа карточки — ссылка на увеличение: подсказка «лупа» по ховеру */
a.ak-cert__media {
	cursor: zoom-in;
	text-decoration: none;
}

.ak-cert__zoom {
	position: absolute;
	right: 34px;
	bottom: 12px;
	width: 46px;
	height: 46px;
	border-radius: 50%;
	background: rgba(10, 18, 36, .72) var(--ak-ico-zoom) center / 22px 22px no-repeat;
	opacity: 0;
	transform: scale(.85);
	transition: opacity .25s ease, transform .25s ease;
	pointer-events: none;
}

a.ak-cert__media:hover .ak-cert__zoom,
a.ak-cert__media:focus-visible .ak-cert__zoom {
	opacity: 1;
	transform: none;
}

a.ak-cert__media:focus-visible {
	outline: 2px solid var(--ak-blue);
	outline-offset: -2px;
}

.ak-cert__img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
	object-position: top;
	border: 1px solid var(--ak-line);
	border-radius: 6px;
}

.ak-cert__body {
	display: flex;
	flex-direction: column;
	gap: 8px;
	flex: 1 1 auto;
	padding: 24px 26px 30px;
}

.ak-cert__body .ak-rule {
	margin-bottom: 12px;
}

.ak-cert__title {
	font-size: 19px;
	font-weight: 700;
	color: var(--ak-ink);
}

.ak-cert__desc {
	font-size: 16px;
	line-height: 1.45;
	color: var(--ak-muted);
}

/* --------------------------------------------------------------- слайдер -- */

/*
 * Owl прячет соседние слайды через `overflow: hidden` на `.owl-stage-outer`,
 * заодно срезая тень карточки при наведении. Снимаем обрезку и возвращаем её
 * через clip-path: по вертикали с запасом под тень и подъём карточки,
 * по горизонтали — на половину зазора между слайдами (margin: 24 в
 * javascript/template.js), чтобы соседи по-прежнему не выглядывали.
 */
@supports (clip-path: inset(0)) {
	.ak-slider.owl-carousel .owl-stage-outer {
		overflow: visible;
		clip-path: inset(-40px -12px -90px);
	}
}

.ak-slider.owl-carousel .owl-stage {
	display: flex;
}

.ak-slider.owl-carousel .owl-item {
	display: flex;
}

.ak-slider.owl-carousel .owl-item > * {
	width: 100%;
}

.ak-slider.owl-carousel .owl-nav {
	position: static;
	max-width: none;
	width: auto;
	transform: none;
	font-size: 0;
}

.ak-slider.owl-carousel .owl-prev,
.ak-slider.owl-carousel .owl-next {
	position: absolute;
	top: 50%;
	left: -72px;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
	border-radius: 50%;
	background: #fff;
	box-shadow: 0 10px 28px rgba(10, 34, 68, .12);
	transform: translateY(-50%);
}

.ak-slider.owl-carousel .owl-next {
	left: auto;
	right: -72px;
}

.ak-slider-arrow {
	position: relative;
	width: 20px;
	height: 12px;
	color: var(--ak-ink);
}

.ak-slider-arrow::before {
	content: '';
	position: absolute;
	left: 0;
	top: 5px;
	width: 100%;
	height: 2px;
	background: currentColor;
}

.ak-slider-arrow::after {
	content: '';
	position: absolute;
	top: 1px;
	width: 9px;
	height: 9px;
	border-top: 2px solid currentColor;
	border-right: 2px solid currentColor;
}

.ak-slider-arrow--next::after {
	right: 0;
	transform: rotate(45deg);
}

.ak-slider-arrow--prev::after {
	left: 0;
	transform: rotate(-135deg);
}

.ak-slider.owl-carousel .owl-dots {
	position: static;
	display: flex;
	justify-content: center;
	gap: 10px;
	margin-top: 40px;
	transform: none;
}

.ak-slider.owl-carousel .owl-dot {
	width: 10px;
	height: 10px;
	margin: 0;
	border-radius: 50%;
	background: #c9d5e6 !important;
}

.ak-slider.owl-carousel .owl-dot.active {
	background: var(--ak-blue) !important;
}

/* -------------------------------------------------------------- контакты -- */

.ak-contacts {
	background: #fff;
	padding-block: 72px 96px;
}

.ak-contacts__card {
	display: grid;
	grid-template-columns: minmax(0, 38%) minmax(0, 62%);
	border-radius: var(--ak-radius-lg);
	overflow: hidden;
	box-shadow: 0 24px 60px rgba(10, 34, 68, .12);
}

.ak-contacts__info {
	position: relative;
	overflow: hidden;
	padding: 64px 56px;
	background: var(--ak-navy) center / cover no-repeat;
	color: #fff;
}

/*
 * Фон приходит инлайном из модуля, а исходник нарисован как готовая карточка —
 * со своими скруглёнными углами и тёмной кромкой по периметру. При `cover`
 * эта кромка попадала внутрь колонки и читалась как второй фон поверх первого.
 * Выносим картинку в отдельный слой чуть крупнее блока: кромка уходит за край
 * и срезается, а пропорции исходника сохраняет тот же `cover`.
 */
.ak-contacts__info::before {
	content: '';
	position: absolute;
	inset: -24px;
	background: inherit;
	background-position: center;
	background-size: cover;
}

.ak-contacts__info > * {
	position: relative;
}

.ak-contacts__title {
	margin: 0 0 42px;
	font-size: clamp(28px, 3.2vw, 42px);
	font-weight: 700;
	line-height: 1.1;
	color: #fff;
}

.ak-contacts__list {
	display: flex;
	flex-direction: column;
	gap: 28px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.ak-contacts__item {
	display: flex;
	align-items: center;
	gap: 22px;
}

.ak-contacts__ico {
	flex: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
}

.ak-contacts__icon {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.ak-contacts__value {
	font-size: 17px;
	line-height: 1.4;
	color: #fff;
	text-decoration: none;
}

.ak-contacts__map {
	position: relative;
	min-height: 420px;
	background: var(--ak-bg-soft);
}

.ak-contacts__map img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Встроенная Яндекс.Карта занимает ту же площадь, что и картинка-заглушка */
.ak-contacts__frame {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

/* --------------------------------------------------------------- новости -- */

.ak-news {
	background: #fff;
}

.ak-news-card {
	display: flex;
	flex-direction: column;
	height: 100%;
	background: #fff;
	border: 1px solid var(--ak-line);
	border-radius: var(--ak-radius);
	overflow: hidden;
}

.ak-news-card__media {
	display: block;
	aspect-ratio: 16 / 10;
	overflow: hidden;
	background: var(--ak-bg-soft);
}

.ak-news-card__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.ak-news-card__body {
	display: flex;
	flex-direction: column;
	gap: 12px;
	flex: 1 1 auto;
	padding: 26px 28px 24px;
}

.ak-news-card__date {
	font-size: 15px;
	color: var(--ak-muted);
}

.ak-news-card__title {
	margin: 0;
	font-size: 19px;
	font-weight: 700;
	line-height: 1.25;
}

.ak-news-card__title a {
	color: var(--ak-ink);
	text-decoration: none;
}

.ak-news-card__text {
	margin: 0;
	font-size: 16px;
	line-height: 1.45;
	color: var(--ak-muted);
}

.ak-news-card__more {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 52px;
	height: 52px;
	margin: 8px 0 0 auto;
	border: 1px solid var(--ak-line);
	border-radius: 50%;
	color: var(--ak-blue);
	text-decoration: none;
}

.ak-news-card__arrow {
	position: relative;
	width: 20px;
	height: 12px;
}

.ak-news-card__arrow::before {
	content: '';
	position: absolute;
	left: 0;
	top: 5px;
	width: 100%;
	height: 2px;
	background: currentColor;
}

.ak-news-card__arrow::after {
	content: '';
	position: absolute;
	right: 0;
	top: 1px;
	width: 9px;
	height: 9px;
	border-top: 2px solid currentColor;
	border-right: 2px solid currentColor;
	transform: rotate(45deg);
}

/* ---------------------------------------------------------------- подвал -- */

/*
 * Волна подвала тянется на всю ширину экрана, как в макете, поэтому картинка
 * масштабируется по ширине (100% auto), а не cover: при cover браузер
 * подгоняет её по высоте блока и гребень волны уезжает на середину подвала.
 *
 * Привязка к низу: прозрачный верх картинки уходит выше границы блока, и за
 * мягким краем волны просвечивает белая страница — как в макете. Чтобы гребень
 * не срезало этой границей, высота блока держится не меньше высоты волны
 * (488 из 748 px картинки шириной 2101 px — это 23.2% ширины экрана); за это
 * отвечает второе слагаемое padding-top, до ~1920 px выигрывает 158 px.
 *
 * Нижний предел ширины фона в 1680 px: высота подвала почти не зависит от
 * экрана, а волна сжимается вместе с ним, и уже около 1600 px её непрозрачная
 * часть перестаёт доставать до текста. Волна шире экрана обрезается по краям —
 * рисунок горизонтальный, потери не видно.
 */
.ak-footer {
	/* Высота ленты по краям подвала */
	--ak-footer-line: clamp(56px, 7.6vw, 146px);

	position: relative;
	/*
	 * isolation обязателен: без него лента смешивалась бы режимом screen не с
	 * заливкой подвала, а со всем, что лежит ниже по стопке страницы.
	 */
	isolation: isolate;
	overflow: hidden;
	background: var(--ak-navy);
	color: #fff;
}

/*
 * Светящиеся ленты по краям подвала. Кадры присланы на чёрном фоне, без
 * альфа-канала, поэтому накладываем их режимом screen: чёрное становится
 * невидимым, и лента сливается с тёмной заливкой без единого стыка. Вырезать
 * фон в графическом редакторе не нужно — свечение с мягкими краями всё равно
 * не отделить от фона без ореола.
 *
 * Высота задана жёстко, а картинка растягивается по ней: волна присланных
 * кадров — именно линия, и чуть более плоская она читается только лучше.
 * Поэтому background-size: 100% 100%, а не cover: cover обрезал бы верх и низ
 * свечения, и лента теряла бы края.
 */
.ak-footer__line {
	height: var(--ak-footer-line);
	background-position: center;
	background-repeat: no-repeat;
	background-size: 100% 100%;
	mix-blend-mode: screen;
	pointer-events: none;
}

/*
 * Колонка контактов — auto: адрес должен уместиться в строку, а делить ширину
 * поровну здесь не за чем. Остаток делят логотип и меню.
 */
.ak-footer__main {
	display: grid;
	grid-template-columns: minmax(0, 1.1fr) minmax(0, 1.4fr) auto;
	align-items: start;
	gap: clamp(32px, 4vw, 72px);
	padding-block: clamp(8px, 1.6vw, 28px) clamp(28px, 3vw, 44px);
}

/* Логотип не должен вылезать из своей колонки сетки */
.ak-footer__logo {
	display: block;
	width: 260px;
	max-width: 100%;
	height: auto;
}

.ak-footer__slogan {
	margin: 16px 0 0;
	font-size: 15px;
	font-weight: 600;
	letter-spacing: 0.16em;
	line-height: 1.5;
	text-transform: uppercase;
	color: rgba(255, 255, 255, .72);
}

.ak-footer__nav {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

.ak-footer__links {
	display: flex;
	flex-direction: column;
	gap: 16px;
	margin: 0;
	padding: 0;
	list-style: none;
}

/*
 * В макете колонки подвала разделены тонкими вертикальными линиями: одна между
 * столбцами меню, вторая перед контактами. Рисуем их границей самой колонки —
 * так линия всегда по высоте содержимого, а не растянута на весь блок.
 */
.ak-footer__links + .ak-footer__links,
.ak-footer__contacts {
	padding-left: 40px;
	border-left: 1px solid rgba(255, 255, 255, .18);
}

.ak-footer__links a,
.ak-footer__links span {
	font-size: 18px;
	color: rgba(255, 255, 255, .9);
	text-decoration: none;
}

.ak-footer__contacts {
	display: flex;
	flex-direction: column;
	gap: 16px;
	margin: 0;
	list-style: none;
}

.ak-footer__contact {
	display: flex;
	align-items: flex-start;
	gap: 16px;
}

.ak-footer__ico {
	flex: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	margin-top: -2px;
}

.ak-footer__icon {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.ak-footer__contact a,
.ak-footer__contact span {
	font-size: 18px;
	line-height: 1.4;
	color: #fff;
	text-decoration: none;
}

/* Кнопка стоит под логотипом и слоганом, поэтому ширину берёт по тексту */
.ak-footer__cta {
	display: inline-flex;
	margin-top: 26px;
	padding: 13px 28px;
	font-size: 17px;
	white-space: nowrap;
}

.ak-footer__bottom {
	display: flex;
	align-items: center;
	gap: 36px;
	padding-block: clamp(16px, 1.6vw, 22px);
	border-top: 1px solid rgba(255, 255, 255, .14);
}

.ak-footer__copy {
	margin: 0;
	font-size: 16px;
	color: rgba(255, 255, 255, .7);
}

.ak-footer__legal {
	display: flex;
	gap: 36px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.ak-footer__legal li {
	position: relative;
}

/* В макете вертикальной чертой отделён и копирайт, поэтому черта у каждого
   пункта, включая первый */
.ak-footer__legal li::before {
	content: '';
	position: absolute;
	left: -18px;
	top: 50%;
	width: 1px;
	height: 18px;
	background: rgba(255, 255, 255, .22);
	transform: translateY(-50%);
}

.ak-footer__legal a {
	font-size: 16px;
	color: rgba(255, 255, 255, .82);
	text-decoration: underline;
}

/* ------------------------------------------- баннер внутренней страницы -- */

/*
 * Первый экран любой страницы кроме главной: крошки, заголовок и строка
 * описания поверх фотографии материала. Разметку собирает page-hero.php,
 * фотографию берёт из поля «Изображение полного текста» — если его нет,
 * остаётся фирменный градиент, и баннер всё равно выглядит законченным.
 */
.ak-pagehero {
	position: relative;
	display: flex;
	align-items: flex-end;
	min-height: clamp(380px, 34vw, 520px);
	padding-block: clamp(72px, 8vw, 120px) clamp(72px, 7vw, 104px);
	background: linear-gradient(118deg, #000a16 0%, #001021 38%, #0a2244 68%, #063b8f 100%);
	color: #fff;
	overflow: hidden;
}

/*
 * Фотография лежит отдельным слоем, а не фоном секции: так её можно медленно
 * приближать, пока остальные слои (заливка, сетка, волна) стоят на месте.
 */
.ak-pagehero__photo {
	position: absolute;
	inset: -2%;
	z-index: 0;
	background: center / cover no-repeat;
	transform: scale(1.06);
	animation: ak-hero-zoom 22s ease-out forwards;
}

@keyframes ak-hero-zoom {
	from { transform: scale(1.12); }
	to   { transform: scale(1); }
}

/*
 * Снимки цеха сами по себе тёмно-синие, но текст должен читаться при любой
 * фотографии, которую клиент поставит потом, — отсюда плотная заливка слева.
 */
.ak-pagehero__overlay {
	position: absolute;
	inset: 0;
	z-index: 1;
	background: linear-gradient(100deg, rgba(0, 9, 24, .94) 0%, rgba(0, 12, 30, .86) 38%, rgba(0, 16, 36, .5) 72%, rgba(0, 16, 36, .3) 100%);
}

/*
 * Фирменная волна идёт по нижней кромке во всю ширину баннера. В правой
 * половине её прежний левый край обрывался посреди кадра вертикальным срезом
 * и читался как недорисованная картинка, поэтому лента растянута целиком.
 *
 * Полоса низкая и растянута по обеим осям: в своих пропорциях (1400 × 304)
 * лента на всю ширину поднялась бы до строки описания и мешала читать.
 * Волна абстрактная, вертикальное сжатие на ней незаметно — она просто
 * становится более пологой.
 */
.ak-pagehero__wave {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 2;
	height: clamp(60px, 9vw, 150px);
	background: url('../../../images/home/hero/three-color.png') bottom center / 100% 100% no-repeat;
	opacity: .5;
	pointer-events: none;
}

/* Трёхцветная кромка — стык баннера и белого листа страницы */
.ak-pagehero::after {
	content: '';
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 4;
	height: 5px;
	background: linear-gradient(90deg, var(--ak-red) 0%, #8a1340 32%, var(--ak-blue) 68%, #06306b 100%);
}

.ak-pagehero > .container {
	position: relative;
	z-index: 3;
}

.ak-pagehero__title {
	margin: 0;
	max-width: 960px;
	font-size: clamp(34px, 4.2vw, 58px);
	font-weight: 700;
	line-height: 1.04;
	letter-spacing: -0.02em;
	color: #fff;
}

/* Красная черта в левом поле — тот же приём, что у надзаголовка первого экрана */
.ak-pagehero__title::before {
	content: '';
	position: absolute;
	left: 16px;
	width: 5px;
	height: 1.1em;
	margin-top: .08em;
	background: var(--ak-red);
	border-radius: 2px;
}

.ak-pagehero__date {
	margin: 16px 0 0;
	font-size: 15px;
	font-weight: 600;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: #76a9ec;
}

.ak-pagehero__text {
	margin: 24px 0 0;
	max-width: 760px;
	font-size: 19px;
	line-height: 1.55;
	color: rgba(255, 255, 255, .82);
}

/*
 * Подразделы раздела — строка «таблеток» под заголовком. Посетитель видит
 * состав раздела, не прокручивая страницу и не открывая выпадающее меню.
 */
.ak-pagehero__subnav {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin: 32px 0 0;
	padding: 0;
	list-style: none;
}

.ak-pagehero__subnav a {
	display: block;
	padding: 11px 20px;
	border: 1px solid rgba(255, 255, 255, .26);
	border-radius: 100px;
	background: rgba(255, 255, 255, .07);
	font-size: 15px;
	font-weight: 500;
	color: rgba(255, 255, 255, .9);
	text-decoration: none;
	backdrop-filter: blur(2px);
	transition: background .25s ease, border-color .25s ease, color .25s ease, transform .25s ease;
}

.ak-pagehero__subnav a:hover {
	background: var(--ak-red);
	border-color: var(--ak-red);
	color: #fff;
	transform: translateY(-2px);
}

/* ------- хлебные крошки ------- */

.ak-crumbs {
	margin-bottom: 26px;
}

.ak-crumbs__list {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: 15px;
}

/* Разделитель рисуем на элементе, а не символом в разметке */
.ak-crumbs__item + .ak-crumbs__item::before {
	content: '';
	display: inline-block;
	width: 5px;
	height: 5px;
	margin-right: 10px;
	vertical-align: middle;
	background: rgba(255, 255, 255, .4);
	border-radius: 50%;
}

.ak-crumbs__item {
	color: rgba(255, 255, 255, .62);
}

.ak-crumbs__link {
	color: rgba(255, 255, 255, .78);
	text-decoration: none;
}

.ak-crumbs__link:hover {
	color: #fff;
	text-decoration: underline;
	text-underline-offset: 3px;
}

.ak-crumbs__item--current {
	color: #fff;
}

/* ------------------------------------------------------ страница ошибки -- */

/*
 * 404 и остальные ошибки. Кадр тот же, что у баннера внутренней страницы, но
 * без фотографии: ошибка не привязана к разделу, и подставлять снимок цеха
 * под «страница не найдена» незачем.
 *
 * Блок самодостаточен — error.php показывает его и без шапки с подвалом,
 * когда приложение не успело собраться. Поэтому ни отступы, ни высота не
 * рассчитаны на соседей.
 */
.ak-error {
	position: relative;
	display: flex;
	align-items: center;
	overflow: hidden;
	min-height: clamp(480px, 66vh, 720px);
	padding-block: clamp(56px, 7vw, 100px) clamp(64px, 8vw, 120px);
	background: linear-gradient(118deg, #000a16 0%, #001021 38%, #0a2244 68%, #063b8f 100%);
	color: #fff;
}

/* Без подвала низ блока пустует — там и появляется лента, ей нужно место */
.ak-error--bare {
	padding-bottom: clamp(120px, 15vw, 210px);
}

/* Та же трёхцветная лента по нижней кромке, что и на баннерах страниц */
.ak-error__wave {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 1;
	height: clamp(60px, 9vw, 150px);
	background: url('../../../images/home/hero/three-color.png') bottom center / 100% 100% no-repeat;
	opacity: .5;
	pointer-events: none;
}

.ak-error::after {
	content: '';
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 3;
	height: 5px;
	background: linear-gradient(90deg, var(--ak-red) 0%, #8a1340 32%, var(--ak-blue) 68%, #06306b 100%);
}

.ak-error > .container {
	position: relative;
	z-index: 2;
}

.ak-error__code {
	margin: 0 0 6px;
	font-size: clamp(96px, 17vw, 220px);
	font-weight: 700;
	line-height: .84;
	letter-spacing: -0.045em;
	text-shadow: 0 26px 60px rgba(0, 6, 18, .45);
}

/* Средняя цифра кода — красная: тот же приём, что у заголовков с акцентом */
.ak-error__digit {
	color: var(--ak-red);
}

.ak-error__title {
	margin: 0 0 16px;
	font-size: clamp(26px, 3.4vw, 44px);
	font-weight: 700;
	line-height: 1.1;
}

.ak-error__text {
	max-width: 640px;
	margin: 0 0 34px;
	font-size: 18px;
	line-height: 1.55;
	color: rgba(255, 255, 255, .82);
}

/* Геометрия кнопок — как на первом экране: прозрачная повторяет красную */
.ak-error__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 16px;
}

.ak-error__actions .ak-btn--ghost {
	padding: 22px 40px;
	border-radius: 10px;
}

.ak-error__links {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin: 38px 0 0;
	padding: 0;
	list-style: none;
}

.ak-error__links a {
	display: block;
	padding: 11px 20px;
	border: 1px solid rgba(255, 255, 255, .26);
	border-radius: 100px;
	background: rgba(255, 255, 255, .07);
	font-size: 15px;
	font-weight: 500;
	color: rgba(255, 255, 255, .9);
	text-decoration: none;
	transition: background .25s ease, border-color .25s ease, color .25s ease, transform .25s ease;
}

.ak-error__links a:hover {
	background: var(--ak-red);
	border-color: var(--ak-red);
	color: #fff;
	transform: translateY(-2px);
}

.ak-error__hint {
	margin: 30px 0 0;
	font-size: 14px;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, .45);
}

/* Разбор исключения виден только при включённой отладке Joomla */
.ak-error__debug {
	padding-block: 40px;
	font-size: 14px;
}

.ak-error__debug pre {
	padding: 16px;
	background: var(--ak-bg-soft);
	border-radius: 10px;
	overflow-x: auto;
}

/* --------------------------------------------------- внутренние страницы -- */

/*
 * Тексты страниц приходят из редактора Joomla, поэтому оформление навешено на
 * голые теги внутри тела материала, а классы ak-* добавляют только те блоки,
 * которые тегами не выражаются: карточки, цифры, врезки. Так страница
 * остаётся читаемой, даже если контент-менеджер наберёт её обычным текстом.
 */

.page-inner #center {
	padding-block: clamp(60px, 6.5vw, 104px) clamp(72px, 8vw, 128px);
}

/*
 * Заголовок материала печатает ещё и компонент — но он уже стоит в баннере.
 * Скрываем точечно: в списке новостей у карточек своя разметка, её это не
 * касается. Обложку прячет page-hero.php, и только когда забирает её себе.
 */
.item-page > .page-header {
	display: none;
}

/*
 * Обложка новости: Joomla выводит её с обтеканием, но в материале на всю
 * ширину колонки обтекать нечему — ставим как иллюстрацию.
 */
.item-page .item-image {
	float: none;
	max-width: 760px;
	margin: 0 0 28px;
}

.item-page .item-image img {
	width: 100%;
	height: auto;
	border-radius: var(--ak-radius-lg);
}

/* Дату публикации показывает баннер — в тексте она была бы вторым экземпляром */
.item-page .published {
	display: none;
}

/*
 * Колонка контента занимает всю сетку: плитки, карточки и таблицы работают на
 * полную ширину. Строку чтения ограничиваем только у текста — иначе длинные
 * абзацы на широком экране расползаются.
 */
.com-content-article__body > p,
.com-content-article__body > h2,
.com-content-article__body > h3,
.com-content-article__body > ul,
.com-content-article__body > ol,
.ak-page__band > p,
.ak-page__band > h2,
.ak-page__band > h3 {
	max-width: 880px;
}

.com-content-article__body > p,
.com-content-article__body > ul,
.com-content-article__body > ol {
	margin: 0 0 24px;
	font-size: 17.5px;
	line-height: 1.68;
}

/* Заголовок раздела с короткой красной чертой над строкой */
.com-content-article__body h2 {
	position: relative;
	margin: clamp(56px, 6vw, 88px) 0 26px;
	padding-top: 26px;
	font-size: clamp(26px, 2.6vw, 36px);
	font-weight: 700;
	line-height: 1.18;
	letter-spacing: -0.015em;
	color: var(--ak-ink);
}

.com-content-article__body h2::before {
	content: '';
	position: absolute;
	left: 0;
	top: 0;
	width: 52px;
	height: 4px;
	background: var(--ak-red);
	border-radius: 2px;
}

/* Первый заголовок идёт сразу за лидом — такой большой отступ ему не нужен */
.com-content-article__body > .ak-page__lead + h2 {
	margin-top: 48px;
}

.com-content-article__body h3 {
	margin: 0 0 10px;
	font-size: 20px;
	font-weight: 600;
	line-height: 1.3;
	color: var(--ak-ink);
}

.com-content-article__body a {
	color: var(--ak-blue);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.com-content-article__body a:hover {
	color: var(--ak-red);
}

/*
 * Кнопка — тоже ссылка, поэтому правило выше красит её текст в синий и
 * подчёркивает. Возвращаем собственное оформление кнопки.
 */
.com-content-article__body .ak-btn--red,
.com-content-article__body .ak-btn--red:hover {
	color: #fff;
	text-decoration: none;
}

/*
 * Вводный абзац: крупнее основного текста, с синей чертой слева — страница
 * начинается не «стеной букв», а заметным вступлением.
 */
.com-content-article__body > .ak-page__lead {
	max-width: 960px;
	margin-bottom: clamp(40px, 4vw, 56px);
	padding-left: 32px;
	border-left: 4px solid var(--ak-blue);
	font-size: clamp(20px, 1.8vw, 23px);
	line-height: 1.6;
	color: #2d3650;
}

/* ------- полоса-секция ------- */

/*
 * Группы блоков (цифры, карточки, таблица) кладутся на подложку во всю ширину
 * колонки: страница получает ритм из чередующихся светлых и тёмных полос,
 * как секции на главной.
 */
.ak-page__band {
	margin: clamp(48px, 5.5vw, 80px) 0;
	padding: clamp(40px, 4.5vw, 64px) clamp(28px, 4vw, 64px);
	background: var(--ak-bg-soft);
	border-radius: var(--ak-radius-lg);
}

.ak-page__band > :last-child {
	margin-bottom: 0;
}

/* Внутри полосы заголовок уже отделён подложкой — верхний отступ лишний */
.com-content-article__body .ak-page__band > h2:first-child {
	margin-top: 0;
}

.ak-page__band--dark {
	position: relative;
	overflow: hidden;
	background: var(--ak-navy);
	color: #fff;
}

/* Синее свечение в углу — тот же приём, что в тёмных секциях главной */
.ak-page__band--dark::after {
	content: '';
	position: absolute;
	right: -120px;
	top: -140px;
	width: 420px;
	height: 420px;
	background: radial-gradient(circle, rgba(10, 87, 240, .5) 0%, rgba(10, 87, 240, 0) 68%);
	pointer-events: none;
}

.ak-page__band--dark > * {
	position: relative;
	z-index: 1;
}

.com-content-article__body .ak-page__band--dark h2,
.com-content-article__body .ak-page__band--dark h3 {
	color: #fff;
}

.ak-page__band--dark p {
	color: rgba(255, 255, 255, .78);
}

/* Синяя ссылка на тёмном фоне не читается — светлее и без подчёркивания */
.com-content-article__body .ak-page__band--dark a:not(.ak-btn),
.com-content-article__body .ak-page__note a:not(.ak-btn) {
	color: #8fbdf5;
	text-decoration-color: rgba(143, 189, 245, .5);
}

.com-content-article__body .ak-page__band--dark a:not(.ak-btn):hover,
.com-content-article__body .ak-page__note a:not(.ak-btn):hover {
	color: #fff;
}

/* ------- оглавление страницы ------- */

/*
 * Плитки-якоря в начале длинной страницы: видно, из чего она состоит, и можно
 * сразу перейти к нужному разделу.
 */
.com-content-article__body > .ak-page__toc {
	max-width: none;
}

.ak-page__toc {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
	gap: 16px;
	margin: 0 0 clamp(48px, 5vw, 72px);
	padding: 0;
	list-style: none;
	counter-reset: ak-toc;
}

.ak-page__toc > li {
	counter-increment: ak-toc;
}

.com-content-article__body .ak-page__toc a {
	display: flex;
	align-items: center;
	gap: 14px;
	height: 100%;
	padding: 18px 20px;
	background: #fff;
	border: 1px solid var(--ak-line);
	border-radius: var(--ak-radius);
	font-size: 16px;
	font-weight: 600;
	line-height: 1.3;
	color: var(--ak-ink);
	text-decoration: none;
}

.com-content-article__body .ak-page__toc a::before {
	content: counter(ak-toc, decimal-leading-zero);
	flex: none;
	font-size: 15px;
	font-weight: 700;
	color: var(--ak-red);
}

.com-content-article__body .ak-page__toc a:hover {
	border-color: var(--ak-blue);
	color: var(--ak-blue);
	box-shadow: 0 10px 26px rgba(10, 34, 68, .1);
}

/* ------- текст и иллюстрация рядом ------- */

.ak-page__split {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	align-items: center;
	gap: clamp(32px, 4.5vw, 64px);
	margin: clamp(48px, 5.5vw, 80px) 0;
}

.ak-page__split > figure,
.ak-page__split > div {
	margin: 0;
}

/* Кадр обрезаем контейнером, чтобы картинка могла наезжать при наведении */
.ak-page__split > figure {
	overflow: hidden;
	border-radius: var(--ak-radius-lg);
}

/*
 * С подписью так нельзя: она стоит под картинкой и попадает под скругление
 * угла — первая буква срезается. Скругляем тогда саму картинку, а наезд
 * при наведении отключаем, раз обрезать его больше нечем.
 */
.ak-page__split > figure:has(figcaption) {
	overflow: visible;
	border-radius: 0;
}

.ak-page__split > figure:has(figcaption) img {
	border-radius: var(--ak-radius-lg);
}

.ak-page__split > figure:has(figcaption):hover img {
	transform: none;
}

.ak-page__split img {
	display: block;
	width: 100%;
	height: 100%;
	max-height: 420px;
	object-fit: cover;
	transition: transform .7s cubic-bezier(.22, .61, .36, 1);
}

.ak-page__split > figure:hover img {
	transform: scale(1.05);
}

.ak-page__split > figure figcaption {
	padding-top: 2px;
}

.ak-page__split figcaption {
	margin-top: 10px;
	font-size: 15px;
	color: var(--ak-muted);
}

.ak-page__split p:last-child {
	margin-bottom: 0;
}

/* ------- списки ------- */

.ak-page__list {
	margin: 0 0 18px;
	padding: 0;
	list-style: none;
}

.ak-page__list > li {
	position: relative;
	margin-bottom: 14px;
	padding-left: 28px;
	line-height: 1.6;
}

.ak-page__list > li::before {
	content: '';
	position: absolute;
	left: 0;
	top: 10px;
	width: 8px;
	height: 8px;
	background: var(--ak-red);
	border-radius: 2px;
}

/* Короткие пункты перечня номенклатуры ставим в две колонки */
.ak-page__list--columns {
	columns: 2;
	column-gap: 40px;
}

.ak-page__list--columns > li {
	break-inside: avoid;
}

/* ------- вакансии: аккордеон ------- */

/*
 * Список должностей внутри текста страницы «Вакансии». Раскрытие — штатными
 * <details>, поэтому правила опираются на [open], а не на классы из скрипта.
 *
 * Блок печатается модулем внутрь тела материала, где оформлены голые теги,
 * — отсюда селекторы в два класса: они должны перебивать правила вида
 * `.com-content-article__body h3`.
 */
.ak-vacancies {
	display: flex;
	flex-direction: column;
	gap: 12px;
	margin: 24px 0 32px;
}

.ak-vacancy {
	overflow: hidden;
	background: #fff;
	border: 1px solid var(--ak-line);
	border-radius: var(--ak-radius);
	transition: border-color .25s ease, box-shadow .25s ease;
}

.ak-vacancy[open] {
	border-color: #c9d8ef;
	box-shadow: 0 16px 40px rgba(10, 34, 68, .08);
}

.ak-vacancy__head {
	display: flex;
	align-items: center;
	gap: 18px;
	padding: 20px 24px;
	cursor: pointer;
	list-style: none;
	-webkit-user-select: none;
	user-select: none;
}

/* Стандартный треугольник убираем: вместо него свой круг со стрелкой */
.ak-vacancy__head::-webkit-details-marker {
	display: none;
}

.ak-vacancy__name {
	flex: 1 1 auto;
	font-size: 19px;
	font-weight: 600;
	line-height: 1.3;
	color: var(--ak-ink);
	transition: color .2s ease;
}

.ak-vacancy__head:hover .ak-vacancy__name,
.ak-vacancy[open] .ak-vacancy__name {
	color: var(--ak-red);
}

.ak-vacancy__brief {
	flex: none;
	font-size: 15px;
	color: var(--ak-muted);
}

.ak-vacancy__caret {
	position: relative;
	flex: none;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	background: var(--ak-bg-soft);
	transition: background .25s ease;
}

.ak-vacancy__caret::before {
	content: '';
	position: absolute;
	left: 50%;
	top: 50%;
	width: 9px;
	height: 9px;
	border-right: 2px solid var(--ak-nav-ink);
	border-bottom: 2px solid var(--ak-nav-ink);
	transform: translate(-50%, -70%) rotate(45deg);
	transition: transform .25s ease, border-color .25s ease;
}

.ak-vacancy[open] .ak-vacancy__caret {
	background: var(--ak-red);
}

.ak-vacancy[open] .ak-vacancy__caret::before {
	border-color: #fff;
	transform: translate(-50%, -30%) rotate(225deg);
}

.ak-vacancy__body {
	padding: 4px 24px 24px;
	animation: ak-vacancy-open .25s ease both;
}

@keyframes ak-vacancy-open {
	from { opacity: 0; transform: translateY(-6px); }
	to   { opacity: 1; transform: none; }
}

.ak-vacancy__cols {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 22px 44px;
}

.ak-vacancy .ak-vacancy__subtitle {
	margin: 0 0 12px;
	font-size: 14px;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--ak-muted);
}

.ak-vacancy__list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.ak-vacancy__list > li {
	position: relative;
	margin-bottom: 10px;
	padding-left: 26px;
	line-height: 1.55;
}

.ak-vacancy__list > li::before {
	content: '';
	position: absolute;
	left: 0;
	top: 9px;
	width: 8px;
	height: 8px;
	background: var(--ak-red);
	border-radius: 2px;
}

.ak-vacancy__facts {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin: 22px 0 0;
}

.ak-vacancy__facts > div {
	padding: 12px 20px;
	background: var(--ak-bg-soft);
	border-radius: 12px;
}

.ak-vacancy .ak-vacancy__facts dt {
	font-size: 13px;
	font-weight: 600;
	letter-spacing: .05em;
	text-transform: uppercase;
	color: var(--ak-muted);
}

.ak-vacancy .ak-vacancy__facts dd {
	margin: 3px 0 0;
	font-size: 17px;
	font-weight: 600;
	color: var(--ak-ink);
}

.ak-vacancy__cta {
	margin-top: 24px;
	padding: 14px 28px;
	font-size: 16px;
}

/* ------- нумерованные этапы ------- */

.ak-page__steps {
	margin: 0 0 18px;
	padding: 0;
	list-style: none;
	counter-reset: ak-step;
}

.ak-page__steps > li {
	position: relative;
	margin-bottom: 30px;
	padding-left: 78px;
	padding-bottom: 2px;
	counter-increment: ak-step;
}

/*
 * Вертикаль между номерами связывает этапы в единую цепочку — иначе
 * список читается как набор независимых карточек.
 */
.ak-page__steps > li:not(:last-child)::after {
	content: '';
	position: absolute;
	left: 23px;
	top: 56px;
	bottom: -30px;
	width: 2px;
	background: linear-gradient(180deg, rgba(214, 6, 31, .32), rgba(0, 71, 214, .14));
}

/*
 * Номер шага — тот же приём, что в секции «как мы работаем» на главной:
 * крупная цифра в квадрате с фирменным градиентом.
 */
.ak-page__steps > li::before {
	content: counter(ak-step, decimal-leading-zero);
	position: absolute;
	left: 0;
	top: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 46px;
	height: 46px;
	background: var(--ak-red-grad);
	border-radius: 10px;
	font-size: 17px;
	font-weight: 700;
	color: #fff;
}

.ak-page__steps > li > p:last-child {
	margin-bottom: 0;
}

.ak-page__steps--compact > li {
	margin-bottom: 24px;
}

.ak-page__steps--compact > li:not(:last-child)::after {
	bottom: -24px;
}

/* ------- карточки ------- */

/*
 * Две колонки, а не auto-fit: в тексте карточек по две-три строки, и при трёх
 * колонках они превращаются в узкие столбики, а четвёртая карточка остаётся
 * одна во втором ряду.
 */
.ak-page__cards {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 24px;
	margin-bottom: 24px;
}

/* Короткие карточки (услуги, принципы) помещаются по три в ряд */
.ak-page__cards--three {
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

.ak-page__card {
	position: relative;
	margin: 0;
	padding: clamp(26px, 2.6vw, 36px) clamp(24px, 2.6vw, 36px);
	background: #fff;
	border: 1px solid var(--ak-line);
	border-radius: var(--ak-radius);
	overflow: hidden;
	transition: transform .35s ease, box-shadow .35s ease, border-color .35s ease;
}

/* Фирменная кромка проявляется при наведении — приём с карточек главной */
.ak-page__card::after {
	content: '';
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	height: 3px;
	background: linear-gradient(90deg, var(--ak-red), var(--ak-blue));
	transform: scaleX(0);
	transform-origin: left;
	transition: transform .4s ease;
}

.ak-page__card:hover {
	transform: translateY(-5px);
	border-color: transparent;
	box-shadow: 0 22px 46px rgba(10, 34, 68, .13);
}

.ak-page__card:hover::after {
	transform: scaleX(1);
}

/* На светлой подложке полосы белая карточка читается лучше рамки */
.ak-page__band .ak-page__card {
	border-color: transparent;
	box-shadow: 0 10px 30px rgba(10, 34, 68, .06);
}

.ak-page__card p:last-child {
	margin-bottom: 0;
	color: var(--ak-muted);
}

/* Вторая группа внутри карточки (карта сайта) не должна липнуть к списку */
.com-content-article__body .ak-page__card > * + h3 {
	margin-top: 26px;
}

.ak-page__card > ul:last-child {
	margin-bottom: 0;
}

/*
 * Нумерованные карточки: цифра стоит над заголовком и работает как иконка —
 * иллюстраций под каждый пункт у нас нет, а ряд одинаковых плиток без якоря
 * для глаза выглядит бедно.
 */
.ak-page__cards--num {
	counter-reset: ak-cardnum;
}

.ak-page__cards--num .ak-page__card {
	position: relative;
	padding-top: 72px;
	counter-increment: ak-cardnum;
}

.ak-page__cards--num .ak-page__card::before {
	content: counter(ak-cardnum, decimal-leading-zero);
	position: absolute;
	left: 28px;
	top: 26px;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	border: 2px solid var(--ak-red);
	border-radius: 8px;
	font-size: 14px;
	font-weight: 700;
	color: var(--ak-red);
}

/* Карточки с иконкой из набора главной */
.ak-page__card-ico {
	display: block;
	width: 56px;
	height: 56px;
	margin-bottom: 18px;
	object-fit: contain;
	object-position: left center;
}

/*
 * Карточки сертификатов: скан целиком, без кадрирования — печать и подписи
 * должны читаться, поэтому картинка вписывается по высоте, а не обрезается.
 */
.ak-page__cards--certs .ak-page__card {
	display: flex;
	flex-direction: column;
	gap: 16px;
	background: #fff;
}

/* Скан открывается в лайтбоксе — тем же, что и карусель сертификатов главной */
.ak-page__cards--certs a {
	display: block;
	text-decoration: none;
	cursor: zoom-in;
}

.ak-page__cards--certs img {
	width: 100%;
	height: 260px;
	object-fit: contain;
	object-position: center;
}

.ak-page__cards--certs figcaption {
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.ak-page__cards--certs figcaption span {
	font-size: 15px;
	color: var(--ak-muted);
}

/* ------- цифры ------- */

.ak-page__facts {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	gap: 24px;
	margin-bottom: 24px;
}

.ak-page__fact {
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding: clamp(26px, 2.6vw, 34px) clamp(22px, 2.4vw, 30px);
	background: #fff;
	border-radius: var(--ak-radius);
	box-shadow: 0 12px 34px rgba(10, 34, 68, .08);
}

/* Внутри тёмной полосы плитки становятся стеклянными, иначе спорят с фоном */
.ak-page__band--dark .ak-page__fact {
	background: rgba(255, 255, 255, .06);
	border: 1px solid rgba(255, 255, 255, .14);
	box-shadow: none;
}

.ak-page__fact-value {
	font-size: clamp(28px, 2.9vw, 42px);
	font-weight: 800;
	line-height: 1;
	letter-spacing: -0.02em;
	color: var(--ak-red);
}

.ak-page__band--dark .ak-page__fact-value {
	color: #fff;
}

.ak-page__fact-label {
	font-size: 15px;
	line-height: 1.35;
	color: var(--ak-muted);
}

.ak-page__band--dark .ak-page__fact-label {
	color: rgba(255, 255, 255, .72);
}

/* ------- таблицы ------- */

/* Узкие экраны прокручивают таблицу внутри обёртки, а не всю страницу */
.ak-page__table-wrap {
	margin-bottom: 24px;
	overflow-x: auto;
	background: #fff;
	border: 1px solid var(--ak-line);
	border-radius: var(--ak-radius);
}

.ak-page__table {
	width: 100%;
	border-collapse: collapse;
	font-size: 16px;
}

.ak-page__table th,
.ak-page__table td {
	padding: 20px 24px;
	border-bottom: 1px solid var(--ak-line);
	text-align: left;
	vertical-align: top;
}

.ak-page__table tr:last-child th,
.ak-page__table tr:last-child td {
	border-bottom: 0;
}

.ak-page__table thead th {
	background: var(--ak-navy);
	border-bottom: 0;
	font-size: 15px;
	font-weight: 600;
	letter-spacing: .02em;
	color: #fff;
}

.ak-page__table tbody th {
	width: 34%;
	font-weight: 600;
}

/* Чередование строк: в таблицах вакансий и покрытий по 6 строк подряд */
.ak-page__table tbody tr:nth-child(even) {
	background: var(--ak-bg-soft);
}

/* ------- иллюстрации ------- */

.ak-page__media {
	margin: 28px 0;
}

.ak-page__media img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: var(--ak-radius);
}

.ak-page__media figcaption {
	margin-top: 10px;
	font-size: 15px;
	color: var(--ak-muted);
}

/* ------- контакты и карта сайта ------- */

/* Четыре карточки встают 2×2; при auto-fit последняя оставалась одна в ряду */
.ak-page__contacts {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 24px;
	margin-bottom: 24px;
}

.ak-page__contact {
	display: flex;
	flex-direction: column;
	gap: 6px;
	padding: 30px 28px;
	background: #fff;
	border: 1px solid var(--ak-line);
	border-radius: var(--ak-radius);
	transition: transform .35s ease, box-shadow .35s ease, border-color .35s ease;
}

.ak-page__contact:hover {
	transform: translateY(-5px);
	border-color: transparent;
	box-shadow: 0 22px 46px rgba(10, 34, 68, .12);
}

/* Иконка контакта — из набора подвала, там они уже в фирменном синем */
.ak-page__contact-ico {
	width: 42px;
	height: 42px;
	margin-bottom: 8px;
	object-fit: contain;
	object-position: left center;
}

.ak-page__contact h3 {
	font-size: 15px;
	font-weight: 600;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--ak-muted);
}

/* Телефон и почта — главное в карточке, поэтому крупнее текста */
.ak-page__contact p {
	margin: 0;
	font-size: 19px;
	line-height: 1.4;
}

/* Пояснение под номером — вспомогательная строка */
.ak-page__contact p span {
	font-size: 15px;
	color: var(--ak-muted);
}

.com-content-article__body .ak-page__contact a {
	font-weight: 600;
	color: var(--ak-ink);
	text-decoration: none;
}

.com-content-article__body .ak-page__contact a:hover {
	color: var(--ak-blue);
}

.ak-page__sitemap {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
	gap: 12px 40px;
}

/* Первый заголовок в колонке не должен отступать от лида на 56px */
.com-content-article__body .ak-page__sitemap h2 {
	margin-top: 24px;
}

/* ------- врезка с призывом ------- */

/*
 * Короткий призыв внутри текста. Большой блок «Готовы к сотрудничеству?»
 * стоит отдельным модулем под страницей, а это — врезка по ходу чтения.
 */
.ak-page__note {
	position: relative;
	overflow: hidden;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 28px 48px;
	margin: clamp(56px, 6vw, 88px) 0 0;
	padding: clamp(34px, 3.6vw, 48px) clamp(28px, 3.8vw, 56px);
	background: linear-gradient(112deg, var(--ak-navy) 0%, #0a2244 58%, #0b3a86 100%);
	border-radius: var(--ak-radius-lg);
	color: #fff;
}

.ak-page__note > div {
	flex: 1 1 420px;
}

.com-content-article__body .ak-page__note h2,
.com-content-article__body .ak-page__note h3 {
	margin: 0 0 8px;
	padding: 0;
	font-size: 24px;
	color: #fff;
}

.com-content-article__body .ak-page__note h2::before {
	content: none;
}

.ak-page__note p {
	margin: 0;
	max-width: 620px;
	color: rgba(255, 255, 255, .8);
}

.ak-page__note .ak-btn {
	flex: none;
}

/* ------- плитки подразделов ------- */

/*
 * Навигация по разделу в начале страницы-родителя: крупные ссылки с
 * пояснением. Заменяют простой список — посетитель сразу видит, из чего
 * состоит раздел, и что найдёт на каждой странице.
 */
.com-content-article__body > .ak-page__tiles {
	max-width: none;
}

.ak-page__tiles {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(218px, 1fr));
	gap: 20px;
	margin: 0 0 clamp(48px, 5vw, 72px);
	padding: 0;
	list-style: none;
}

.ak-page__tiles--two {
	grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
}

.com-content-article__body .ak-page__tiles a {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 10px;
	height: 100%;
	padding: 30px 60px 30px 30px;
	background: var(--ak-bg-soft);
	border: 1px solid transparent;
	border-radius: var(--ak-radius);
	color: var(--ak-ink);
	text-decoration: none;
	overflow: hidden;
	transition: transform .35s ease, box-shadow .35s ease, background .35s ease;
}

/* Стрелка-указатель в правом верхнем углу, как на кнопках сайта */
.com-content-article__body .ak-page__tiles a::after {
	content: '';
	position: absolute;
	right: 26px;
	top: 34px;
	width: 11px;
	height: 11px;
	border-top: 2px solid var(--ak-red);
	border-right: 2px solid var(--ak-red);
	transform: rotate(45deg);
	transition: transform .35s ease;
}

.com-content-article__body .ak-page__tiles a:hover {
	background: #fff;
	transform: translateY(-5px);
	box-shadow: 0 22px 46px rgba(10, 34, 68, .13);
}

.com-content-article__body .ak-page__tiles a:hover::after {
	transform: rotate(45deg) translate(3px, -3px);
}

.ak-page__tile-title {
	font-size: 20px;
	font-weight: 700;
	line-height: 1.25;
	letter-spacing: -0.01em;
}

.ak-page__tile-text {
	font-size: 15.5px;
	line-height: 1.45;
	color: var(--ak-muted);
}

/* ------- широкая иллюстрация ------- */

/*
 * Крупный кадр с подписью поверх нижней кромки. Ставится сразу после лида и
 * задаёт масштаб странице: дальше идёт текст, но первое впечатление — цех.
 */
.ak-page__showcase {
	position: relative;
	margin: clamp(40px, 4.5vw, 64px) 0;
	border-radius: var(--ak-radius-lg);
	overflow: hidden;
}

.ak-page__showcase img {
	display: block;
	width: 100%;
	height: clamp(260px, 36vw, 480px);
	object-fit: cover;
}

.ak-page__showcase figcaption {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	padding: 60px 34px 26px;
	background: linear-gradient(180deg, rgba(0, 10, 22, 0) 0%, rgba(0, 10, 22, .82) 100%);
	font-size: 16px;
	color: rgba(255, 255, 255, .92);
}

/* ------- крупный блок «фото и текст» ------- */

/*
 * Блоки с чередованием сторон: единицы оборудования и примеры продукции
 * подаются по одному на экран, с крупной цифрой-маркером. Это и создаёт
 * ритм длинной страницы, и даёт фотографии работать в полную силу.
 */
.ak-page__feature {
	display: grid;
	grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
	align-items: center;
	gap: clamp(32px, 4.5vw, 64px);
	margin: clamp(52px, 6vw, 88px) 0;
}

.ak-page__feature--reverse > figure {
	order: 2;
}

.ak-page__feature > figure {
	margin: 0;
	border-radius: var(--ak-radius-lg);
	overflow: hidden;
	box-shadow: 0 26px 60px rgba(10, 34, 68, .16);
}

.ak-page__feature img {
	display: block;
	width: 100%;
	height: clamp(260px, 30vw, 420px);
	object-fit: cover;
	transition: transform .7s cubic-bezier(.22, .61, .36, 1);
}

.ak-page__feature figure:hover img {
	transform: scale(1.05);
}

.ak-page__feature > div > :last-child {
	margin-bottom: 0;
}

/* Номер блока — крупная «призрачная» цифра над заголовком */
.ak-page__feature-num {
	display: block;
	margin-bottom: 6px;
	font-size: clamp(44px, 5vw, 68px);
	font-weight: 800;
	line-height: 1;
	letter-spacing: -0.03em;
	color: transparent;
	-webkit-text-stroke: 2px rgba(214, 6, 31, .32);
}

.com-content-article__body .ak-page__feature h2 {
	margin-top: 0;
	padding-top: 0;
}

.com-content-article__body .ak-page__feature h2::before {
	content: none;
}

/* ------- галерея ------- */

.ak-page__gallery {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
	gap: 20px;
	margin: 0 0 24px;
}

.com-content-article__body .ak-page__gallery a {
	position: relative;
	display: block;
	border-radius: var(--ak-radius);
	overflow: hidden;
	cursor: zoom-in;
	text-decoration: none;
}

.ak-page__gallery img {
	display: block;
	width: 100%;
	height: 230px;
	object-fit: cover;
	transition: transform .6s cubic-bezier(.22, .61, .36, 1);
}

/* Лупа проявляется на затемнении — так ясно, что кадр открывается крупнее */
.com-content-article__body .ak-page__gallery a::after {
	content: '';
	position: absolute;
	inset: 0;
	background: rgba(0, 16, 33, .45) var(--ak-ico-zoom) center / 34px no-repeat;
	opacity: 0;
	transition: opacity .3s ease;
}

.com-content-article__body .ak-page__gallery a:hover::after {
	opacity: 1;
}

.com-content-article__body .ak-page__gallery a:hover img {
	transform: scale(1.06);
}

/* ------- карточка-фотография ------- */

.ak-page__card--photo {
	display: flex;
	flex-direction: column;
	gap: 18px;
	padding: 0;
	overflow: hidden;
}

.ak-page__card--photo img {
	display: block;
	width: 100%;
	height: 200px;
	object-fit: cover;
	transition: transform .6s cubic-bezier(.22, .61, .36, 1);
}

.ak-page__card--photo:hover img {
	transform: scale(1.05);
}

.ak-page__card--photo figcaption {
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding: 0 28px 30px;
}

.ak-page__card--photo figcaption strong {
	font-size: 19px;
	line-height: 1.3;
}

.ak-page__card--photo figcaption span {
	font-size: 15.5px;
	line-height: 1.5;
	color: var(--ak-muted);
}

/* ------- цитата ------- */

.ak-page__quote {
	position: relative;
	margin: clamp(44px, 5vw, 72px) 0;
	padding: clamp(40px, 4.5vw, 64px) clamp(30px, 4vw, 60px) clamp(36px, 4vw, 52px) clamp(72px, 7vw, 110px);
	background: linear-gradient(118deg, #001021 0%, #0a2244 58%, #0b3a86 100%);
	border-radius: var(--ak-radius-lg);
	color: #fff;
	overflow: hidden;
}

/* Кавычка-«лапка» вместо иконки: набирается шрифтом и не требует картинки */
.ak-page__quote::before {
	content: '«';
	position: absolute;
	left: clamp(22px, 2.6vw, 40px);
	top: clamp(10px, 2vw, 26px);
	font-size: clamp(90px, 9vw, 140px);
	font-weight: 800;
	line-height: 1;
	color: rgba(214, 6, 31, .55);
}

.ak-page__quote p {
	margin: 0;
	max-width: 820px;
	font-size: clamp(19px, 1.9vw, 24px);
	font-weight: 500;
	line-height: 1.5;
	color: #fff;
}

.ak-page__quote cite {
	display: block;
	margin-top: 22px;
	font-size: 15px;
	font-style: normal;
	font-weight: 600;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: #76a9ec;
}

/* ------- широкая полоса ------- */

/*
 * Полоса, выходящая за колонку текста к краям контейнера: тёмные блоки с
 * цифрами так читаются как полноценная секция, а не как врезка в тексте.
 */
.ak-page__band--wide {
	margin-inline: calc(-1 * clamp(16px, 2.4vw, 40px));
	padding-inline: clamp(36px, 4.4vw, 76px);
}

/* Свечение в тёмной полосе медленно дышит — блок выглядит живым */
.ak-page__band--dark::after {
	animation: ak-glow 9s ease-in-out infinite alternate;
}

@keyframes ak-glow {
	from { opacity: .6; transform: translate3d(0, 0, 0) scale(1); }
	to   { opacity: 1;  transform: translate3d(-30px, 20px, 0) scale(1.15); }
}

/* Диагональный блик во врезке с призывом */
.ak-page__note::before {
	content: '';
	position: absolute;
	right: -80px;
	top: -120px;
	width: 380px;
	height: 380px;
	background: radial-gradient(circle, rgba(10, 87, 240, .55) 0%, rgba(10, 87, 240, 0) 68%);
	pointer-events: none;
}

.ak-page__note > div,
.ak-page__note > .ak-btn {
	position: relative;
	z-index: 1;
}

/* ------- полоса прогресса чтения ------- */

/*
 * Тонкая линия вверху окна показывает, сколько страницы прочитано. Ширину
 * выставляет javascript/page-fx.js; без скрипта полоса остаётся нулевой и
 * незаметной.
 */
.ak-progress {
	position: fixed;
	left: 0;
	top: 0;
	z-index: 100;
	width: 0;
	height: 3px;
	background: linear-gradient(90deg, var(--ak-red) 0%, #8a1340 40%, var(--ak-blue) 100%);
	pointer-events: none;
	transition: width .12s linear;
}

/* ------- оглавление: активный раздел ------- */

/*
 * Пока страница прокручивается, page-fx.js помечает плитку текущего раздела.
 * Без скрипта оглавление остаётся обычным списком ссылок.
 */
.com-content-article__body .ak-page__toc a.is-current {
	background: var(--ak-navy);
	border-color: var(--ak-navy);
	color: #fff;
}

.com-content-article__body .ak-page__toc a.is-current::before {
	color: #fff;
}

/* --------------------------------------------------------- кнопка наверх -- */

/*
 * Разметку и показ кнопки даёт шаблон rostsayt (index.php + javascript/
 * rostsayt.js): она появляется после 500 px прокрутки. Здесь только
 * оформление — серую коробку из базового шаблона переводим в фирменный вид.
 * Стрелку рисует псевдоэлемент в rostsayt.css, ему задаём размер и положение.
 */
/*
 * Стрелка стоит последней в столбце — выше кнопок связи. Она появляется
 * только при прокрутке, и на первом экране на её месте не остаётся дыры
 * между виджетом cookie и кнопками: столбик просто короче на одну позицию.
 */
.scroll-up {
	left: auto;
	right: 28px;
	bottom: 220px;
	z-index: 60;
	width: 52px;
	height: 52px;
	background: var(--ak-red-grad);
	border-radius: 50%;
	box-shadow: 0 14px 30px rgba(214, 6, 31, .32);
	transition: transform .25s ease, box-shadow .25s ease, filter .25s ease;
}

.scroll-up:hover {
	background: var(--ak-red-grad);
	transform: translateY(-3px);
	box-shadow: 0 18px 36px rgba(214, 6, 31, .42);
	filter: brightness(1.06);
}

.scroll-up i {
	top: 58%;
	width: 15px;
	height: 15px;
	border-width: 2px;
}

/* ------------------------------------------- плавающие кнопки связи -- */

/*
 * Столбик кнопок в правом нижнем углу: позвонить и написать. Под ними —
 * виджет cookie, над ними — кнопка «наверх» (index.php). Все трое живут в
 * одном столбце, и расстояния между ними заданы отступами снизу, а не общим
 * контейнером: разметку печатают три разных места. Кнопки связи стоят сразу
 * над cookie, потому что видны всегда, а стрелка — только после прокрутки.
 */
.ak-fab {
	position: fixed;
	right: 28px;
	bottom: 92px;
	z-index: 60;
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.ak-fab__btn {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 52px;
	height: 52px;
	border: 0;
	border-radius: 50%;
	color: #fff;
	cursor: pointer;
	text-decoration: none;
	transition: transform .2s ease, box-shadow .2s ease, filter .2s ease;
}

.ak-fab__btn:hover {
	transform: translateY(-3px);
	color: #fff;
	filter: brightness(1.08);
}

.ak-fab__btn svg {
	position: relative;
	z-index: 2;
	width: 24px;
	height: 24px;
}

.ak-fab__btn--call {
	background: var(--ak-red-grad);
	box-shadow: 0 12px 28px rgba(214, 6, 31, .34);
}

.ak-fab__btn--write {
	background: linear-gradient(180deg, #16305c 0%, #0a1f42 100%);
	box-shadow: 0 12px 28px rgba(0, 16, 33, .32);
}

/*
 * Пульсация — расходящееся кольцо под кнопкой. Рисуется отдельным слоем,
 * а не тенью самой кнопки: иначе анимация перебивала бы тень при наведении.
 */
.ak-fab__pulse {
	position: absolute;
	inset: 0;
	z-index: 1;
	border-radius: 50%;
	background: inherit;
	animation: ak-fab-pulse 2.4s ease-out infinite;
}

.ak-fab__btn--call .ak-fab__pulse {
	background: var(--ak-red);
}

.ak-fab__btn--write .ak-fab__pulse {
	background: var(--ak-navy-soft);
	animation-delay: 1.2s;
}

@keyframes ak-fab-pulse {
	0%   { opacity: .55; transform: scale(1); }
	70%  { opacity: 0;   transform: scale(1.75); }
	100% { opacity: 0;   transform: scale(1.75); }
}

/* Подпись выезжает слева от кнопки — справа для неё нет места */
.ak-fab__tip {
	position: absolute;
	right: calc(100% + 12px);
	top: 50%;
	z-index: 3;
	padding: 8px 14px;
	background: var(--ak-navy);
	border-radius: 8px;
	font-size: 14px;
	font-weight: 600;
	white-space: nowrap;
	color: #fff;
	opacity: 0;
	transform: translate(10px, -50%);
	pointer-events: none;
	transition: opacity .2s ease, transform .2s ease;
}

.ak-fab__btn:hover .ak-fab__tip,
.ak-fab__btn:focus-visible .ak-fab__tip {
	opacity: 1;
	transform: translate(0, -50%);
}

/* ----------------------------------------------- виджет файлов cookie -- */

/*
 * Круглая кнопка-печенье стоит в нижнем правом углу под кнопкой «наверх»
 * и сама по себе ничего не рассказывает: карточка с текстом и согласием
 * раскрывается только по нажатию. Так угол не перекрывает контент, пока
 * посетитель сам не заинтересуется.
 *
 * Цвет синий, а не красный: рядом стоит красная кнопка «наверх», и два
 * одинаковых круга читались бы как пара кнопок одного назначения.
 *
 * Виджет скрыт атрибутом hidden, показывает его javascript/cookie-notice.js —
 * он же раскрывает карточку и запоминает согласие.
 */
.ak-cookie {
	position: fixed;
	right: 28px;
	bottom: 28px;
	z-index: 70;
	opacity: 0;
	transform: translateY(12px);
	transition: opacity .35s ease, transform .35s cubic-bezier(.22, .61, .36, 1);
}

.ak-cookie.is-visible {
	opacity: 1;
	transform: none;
}

/*
 * Карточка вынесена из потока: иначе при раскрытии она меняла бы ширину
 * виджета и сдвигала саму кнопку, по которой только что нажали.
 */
.ak-cookie__note {
	position: absolute;
	right: 0;
	bottom: calc(100% + 12px);
	width: min(360px, calc(100vw - 48px));
	padding: 24px 24px 22px;
	background: linear-gradient(130deg, #000a16 0%, #0a2244 58%, #0b3a86 100%);
	border-radius: var(--ak-radius);
	box-shadow: 0 18px 44px rgba(0, 10, 22, .34);
	color: rgba(255, 255, 255, .8);
	font-size: 15px;
	line-height: 1.5;
	animation: ak-cookie-in .25s ease both;
}

@keyframes ak-cookie-in {
	from { opacity: 0; transform: translateY(10px); }
	to   { opacity: 1; transform: none; }
}

.ak-cookie__title {
	margin: 0 0 8px;
	font-size: 17px;
	font-weight: 700;
	line-height: 1.3;
	color: #fff;
}

.ak-cookie__text p {
	margin: 0;
}

.ak-cookie__link {
	display: inline-block;
	margin-top: 10px;
	color: #8fbdf5;
	text-decoration: underline;
	text-underline-offset: 3px;
}

.ak-cookie__link:hover {
	color: #fff;
}

/* Кнопка во всю ширину карточки — как основное действие блока */
.ak-cookie__accept {
	display: flex;
	justify-content: center;
	width: 100%;
	margin-top: 18px;
}

/* Свёрнутое состояние: круглая кнопка с печеньем, парная кнопке «наверх» */
.ak-cookie__mini {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 52px;
	height: 52px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: linear-gradient(180deg, var(--ak-blue-light) 0%, #0038ab 100%);
	color: #fff;
	cursor: pointer;
	box-shadow: 0 12px 28px rgba(0, 71, 214, .34);
	transition: transform .2s ease, box-shadow .2s ease, filter .2s ease;
}

.ak-cookie__mini:hover {
	transform: translateY(-3px);
	box-shadow: 0 16px 34px rgba(0, 71, 214, .44);
	filter: brightness(1.12);
}

.ak-cookie__mini svg {
	width: 25px;
	height: 25px;
}

/*
 * Карточка раскрывается вверх и накрывает весь столбик. Пока она открыта,
 * кнопки убираем — иначе круги торчали бы из-под карточки и выглядели как
 * часть её оформления.
 */
body:has(.ak-cookie__note:not([hidden])) .scroll-up,
body:has(.ak-cookie__note:not([hidden])) .ak-fab {
	opacity: 0;
	pointer-events: none;
}

/* ------- список новостей ------- */

/*
 * Вывод com_content в макете «Блог» оформлен под карточки с главной: сетка,
 * рамка, обложка сверху. Классы — те, что печатает Joomla, поэтому
 * переопределения макета не нужны.
 */
.com-content-category-blog__items {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 24px;
	margin-bottom: 24px;
}

.com-content-category-blog__item {
	display: flex;
	flex-direction: column;
	overflow: hidden;
	background: #fff;
	border: 1px solid var(--ak-line);
	border-radius: var(--ak-radius);
}

.com-content-category-blog__item .item-image {
	margin: 0;
	aspect-ratio: 16 / 10;
	background: var(--ak-bg-soft);
	overflow: hidden;
}

.com-content-category-blog__item .item-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .6s cubic-bezier(.22, .61, .36, 1);
}

/*
 * Обложка — такая же ссылка на новость, как и заголовок (параметр пункта
 * меню link_intro_image). Лёгкий наезд при наведении показывает, что по ней
 * можно нажать: без него картинка читается как украшение.
 */
.com-content-category-blog__item .item-image a {
	display: block;
	height: 100%;
}

.com-content-category-blog__item:hover .item-image img {
	transform: scale(1.06);
}

.com-content-category-blog__item .item-content {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	padding: 24px 26px 22px;
}

/* У карточки заголовок не разделитель, поэтому линия и отступы ни к чему */
.com-content-category-blog__item .page-header {
	margin: 0 0 10px;
	padding: 0;
	border: 0;
}

.com-content-category-blog__item .page-header h2 {
	margin: 0;
	font-size: 19px;
	font-weight: 700;
	line-height: 1.25;
}

.com-content-category-blog__item .page-header h2 a {
	color: var(--ak-ink);
	text-decoration: none;
}

.com-content-category-blog__item .page-header h2 a:hover {
	color: var(--ak-blue);
}

.com-content-category-blog__item .published,
.com-content-category-blog__item time {
	font-size: 15px;
	color: var(--ak-muted);
}

.com-content-category-blog__item p {
	margin: 10px 0 0;
	font-size: 16px;
	line-height: 1.45;
	color: var(--ak-muted);
}

/* «Подробнее» прижат к низу карточки, чтобы ряд выглядел ровным */
.com-content-category-blog__item .readmore {
	margin-top: auto;
	padding-top: 16px;
}

/*
 * Joomla печатает «Подробнее» кнопкой Bootstrap (btn btn-secondary) — серой и
 * чужой для этого сайта. Переопределяем на фирменную текстовую ссылку.
 */
.com-content-category-blog__item .readmore a,
.com-content-category-blog__item .readmore .btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 0;
	background: none;
	border: 0;
	font-size: 16px;
	font-weight: 600;
	color: var(--ak-blue);
	text-decoration: none;
}

.com-content-category-blog__item .readmore a::after,
.com-content-category-blog__item .readmore .btn::after {
	content: '→';
	font-size: 18px;
	line-height: 1;
}

.com-content-category-blog__item .readmore a:hover,
.com-content-category-blog__item .readmore .btn:hover {
	color: var(--ak-red);
}

.com-content-category-blog .com-content-category-blog__navigation {
	margin-top: 8px;
}

@media (max-width: 991.98px) {
	.com-content-category-blog__items {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.ak-page__cards--three {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	/* Фото рядом с текстом на планшете уже не помещается — ставим под него */
	.ak-page__split {
		grid-template-columns: minmax(0, 1fr);
		gap: 24px;
	}

	.ak-pagehero {
		min-height: 280px;
		padding-block: 44px 56px;
	}
}

@media (max-width: 767.98px) {
	.page-inner #center {
		padding-block: 40px 56px;
	}

	.ak-pagehero {
		min-height: 220px;
		padding-block: 34px 44px;
	}

	.ak-pagehero__title::before {
		content: none;
	}

	.ak-pagehero__text {
		font-size: 16px;
	}

	.ak-crumbs__list {
		font-size: 14px;
	}

	.com-content-category-blog__items {
		grid-template-columns: minmax(0, 1fr);
	}

	.com-content-article__body > .ak-page__lead {
		padding-left: 18px;
		font-size: 18px;
	}

	.ak-page__band {
		margin: 32px 0;
		padding: 28px 22px;
		border-radius: var(--ak-radius);
	}

	.ak-page__list--columns {
		columns: 1;
	}

	.ak-page__cards,
	.ak-page__cards--three,
	.ak-page__contacts {
		grid-template-columns: minmax(0, 1fr);
	}

	.ak-page__steps > li {
		padding-left: 54px;
	}

	.ak-page__steps > li::before {
		width: 38px;
		height: 38px;
		font-size: 15px;
	}

	.ak-page__note {
		padding: 26px 24px;
		border-radius: var(--ak-radius);
	}

	.com-content-article__body .ak-page__note h2,
	.com-content-article__body .ak-page__note h3 {
		font-size: 21px;
	}
}

/* --------------------------------------------------------------- лайтбокс -- */

/* Оверлей создаёт javascript/lightbox.js и кладёт в конец <body> */
.ak-lightbox {
	position: fixed;
	inset: 0;
	z-index: 1080;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 56px 88px;
	opacity: 0;
	transition: opacity .25s ease;
}

.ak-lightbox[hidden] {
	display: none;
}

.ak-lightbox.is-open {
	opacity: 1;
}

.ak-lightbox__backdrop {
	position: absolute;
	inset: 0;
	background: rgba(0, 16, 33, .9);
	cursor: zoom-out;
}

.ak-lightbox__figure {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 18px;
	max-width: 100%;
	margin: 0;
}

.ak-lightbox__stage {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	min-width: 120px;
	min-height: 120px;
}

/*
 * Высота задана намеренно: исходники сертификатов около 570 px, и при
 * max-height лайтбокс показывал бы их ровно того же размера, что и карточка.
 * Потолок в 1100 px не даёт растянуть мелкий скан до нечитаемой каши,
 * max-width вписывает в экран широкие изображения, сохраняя пропорции.
 */
.ak-lightbox__img {
	display: block;
	width: auto;
	height: min(calc(100vh - 210px), 1100px);
	max-width: 100%;
	background: #fff;
	border-radius: 8px;
	box-shadow: 0 30px 80px rgba(0, 0, 0, .45);
	opacity: 1;
	transition: opacity .2s ease;
}

.ak-lightbox.is-loading .ak-lightbox__img {
	opacity: 0;
}

.ak-lightbox__spinner {
	position: absolute;
	width: 40px;
	height: 40px;
	border: 3px solid rgba(255, 255, 255, .25);
	border-top-color: #fff;
	border-radius: 50%;
	opacity: 0;
}

.ak-lightbox.is-loading .ak-lightbox__spinner {
	opacity: 1;
	animation: ak-lightbox-spin .8s linear infinite;
}

@keyframes ak-lightbox-spin {
	to {
		transform: rotate(360deg);
	}
}

.ak-lightbox__meta {
	display: flex;
	flex-direction: column;
	gap: 4px;
	max-width: 760px;
	text-align: center;
	color: #fff;
}

.ak-lightbox__caption {
	font-size: 20px;
	font-weight: 700;
}

.ak-lightbox__note,
.ak-lightbox__counter {
	font-size: 16px;
	color: rgba(255, 255, 255, .7);
}

.ak-lightbox__counter {
	margin-top: 6px;
}

/* Кнопки оверлея: круги в духе стрелок слайдера, но на тёмном фоне */
.ak-lightbox__close,
.ak-lightbox__nav {
	position: absolute;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
	padding: 0;
	border: 1px solid rgba(255, 255, 255, .22);
	border-radius: 50%;
	background: rgba(255, 255, 255, .1);
	cursor: pointer;
	transition: background .2s ease, border-color .2s ease;
}

.ak-lightbox__close:hover,
.ak-lightbox__nav:hover {
	background: rgba(255, 255, 255, .2);
	border-color: rgba(255, 255, 255, .4);
}

.ak-lightbox__close:focus-visible,
.ak-lightbox__nav:focus-visible {
	outline: 2px solid #fff;
	outline-offset: 3px;
}

.ak-lightbox__close {
	top: 28px;
	right: 28px;
}

.ak-lightbox__close::before,
.ak-lightbox__close::after {
	content: '';
	position: absolute;
	width: 22px;
	height: 2px;
	background: #fff;
}

.ak-lightbox__close::before {
	transform: rotate(45deg);
}

.ak-lightbox__close::after {
	transform: rotate(-45deg);
}

.ak-lightbox__nav {
	top: 50%;
	transform: translateY(-50%);
}

.ak-lightbox__nav--prev {
	left: 24px;
}

.ak-lightbox__nav--next {
	right: 24px;
}

.ak-lightbox__nav::before {
	content: '';
	width: 12px;
	height: 12px;
	border-top: 2px solid #fff;
	border-right: 2px solid #fff;
}

.ak-lightbox__nav--prev::before {
	transform: rotate(-135deg) translate(-2px, -2px);
}

.ak-lightbox__nav--next::before {
	transform: rotate(45deg) translate(-2px, -2px);
}

/* Страница под оверлеем не прокручивается */
body.ak-lightbox-open {
	overflow: hidden;
}

/* ---------------------------------------------------------------- адаптив -- */

/* Ширина контента зафиксирована, поэтому по ширине окна подстраиваем только
   то, что живёт в полях вокруг сетки, — стрелки слайдера и ленту. */
@media (max-width: 1500px) {
	.ak-slider.owl-carousel .owl-prev {
		left: -20px;
	}

	.ak-slider.owl-carousel .owl-next {
		right: -20px;
	}
}

@media (max-width: 1280px) {
	.container {
		padding-inline: 24px;
	}

	.ak-section {
		padding-block: 72px;
	}

	.ak-services__grid,
	.ak-steps {
		grid-template-columns: repeat(2, 1fr);
	}

	.ak-badges {
		grid-template-columns: 1fr;
	}

	.ak-badges__item {
		padding-inline: 0;
		border-right: 0;
		border-bottom: 1px solid var(--ak-line);
	}

	.ak-badges__item:last-child {
		border-bottom: 0;
	}

	.ak-footer__main {
		grid-template-columns: minmax(0, 240px) minmax(0, 1fr) auto;
	}

	.ak-footer__nav {
		grid-column: auto;
	}

	/* Отступ от разделителей, рассчитанный на экран 1920, здесь съедает колонку */
	.ak-footer__links + .ak-footer__links,
	.ak-footer__contacts {
		padding-left: 32px;
	}

	.ak-footer__links a,
	.ak-footer__links span,
	.ak-footer__contact a,
	.ak-footer__contact span {
		font-size: 17px;
	}
}

@media (max-width: 1100px) {
	/*
	 * Шапка на узком экране — одна строка: логотип, кнопка звонка, бургер.
	 * Телефон, почта и адрес уезжают в раскрывающуюся панель: в строку они не
	 * помещались, занимали отдельный ряд и делали шапку вдвое выше меню.
	 */
	.ak-topbar__inner {
		flex-wrap: wrap;
		gap: 12px;
		min-height: 0;
	}

	.ak-topbar__logo-img {
		height: 48px;
	}

	/* Контакты скрыты — кнопку к правому краю прижимать больше нечему */
	.ak-topbar__cta {
		margin-left: auto;
	}

	.ak-topbar__toggle {
		display: flex;
	}

	/*
	 * Контакты видны только в раскрытой панели и стоят под списком разделов —
	 * туда их переносит javascript/nav-mobile.js. Без скрипта они останутся
	 * в строке шапки, поэтому ширину и столбик задаём независимо от места.
	 */
	.ak-topbar__contacts {
		display: none;
		width: 100%;
		flex-direction: column;
		align-items: stretch;
		gap: 0;
		margin: 0;
	}

	.ak-header.is-nav-open .ak-topbar__contacts {
		display: flex;
		margin-top: 14px;
		padding-bottom: 14px;
		border-top: 1px solid var(--ak-line);
	}

	.ak-topbar__contacts .ak-contact,
	.ak-topbar__contacts .ak-contact:last-child {
		padding: 11px 0;
		border-right: 0;
		border-bottom: 1px solid var(--ak-line);
	}

	.ak-topbar__contacts .ak-contact:last-child {
		border-bottom: 0;
	}

	/*
	 * Пока панель закрыта, полоса меню пуста — тень от неё висела бы отдельной
	 * чертой под шапкой. Отдаём тень раскрытой панели.
	 */
	.ak-nav {
		box-shadow: none;
	}

	.ak-header.is-nav-open .ak-nav {
		box-shadow: 0 18px 34px rgba(10, 34, 68, .16);
	}

	/* Воздух сверху и снизу: список не должен упираться в края панели */
	.ak-nav__list {
		display: none;
		flex-direction: column;
		padding-block: 14px;
	}

	.ak-nav__list.is-open {
		display: flex;
	}

	/*
	 * Закреплённая шапка плюс длинный список не влезают в экран — панель
	 * прокручивается сама, иначе нижние пункты оказываются недосягаемы.
	 * Прокручивается контейнер целиком: контакты лежат под списком, отдельной
	 * прокруткой списка до них было бы не добраться.
	 */
	.ak-header.is-stuck.is-nav-open .ak-nav > .container {
		max-height: calc(100vh - 68px);
		overflow-y: auto;
	}

	/*
	 * В столбик пункты не делят ширину — каждый по высоте своего текста.
	 * flex-wrap нужен пунктам с подменю: ссылка и стрелка остаются в строке,
	 * а сам список переносится под них во всю ширину.
	 */
	.ak-nav__item {
		flex: 0 0 auto;
		flex-wrap: wrap;
		justify-content: flex-start;
		border-bottom: 1px solid var(--ak-line);
	}

	/*
	 * Ссылка занимает строку целиком — иначе подсветка текущего раздела
	 * обрывается по длине слова, а не по краю панели. Стрелка у пунктов
	 * с подменю при этом остаётся прижатой к правому краю.
	 */
	.ak-nav__link {
		flex: 1 1 auto;
		padding: 13px 16px;
	}

	.ak-nav__list > .ak-nav__item:last-child {
		border-bottom: 0;
	}

	/*
	 * Текущий раздел отмечаем полосой слева, а не плашкой: скошенная плашка
	 * рассчитана на горизонтальную полосу меню, в столбике она читалась как
	 * большой красный прямоугольник на всю ширину экрана.
	 */
	.ak-nav__list > .ak-nav__item.is-current > .ak-nav__link,
	.ak-nav__list > .ak-nav__item.is-active > .ak-nav__link {
		box-shadow: inset 3px 0 0 var(--ak-red);
		background: var(--ak-bg-soft);
		color: var(--ak-red);
		font-weight: 600;
	}

	/*
	 * Стрелка — отдельная кнопка со своей площадью под палец: по ссылке
	 * переходят в раздел, по стрелке раскрывают его подпункты.
	 */
	.ak-nav__caret {
		pointer-events: auto;
		align-self: stretch;
		width: 52px;
		margin: 0 0 0 auto;
		border-left: 1px solid var(--ak-line);
	}

	.ak-nav__item.is-expanded > .ak-nav__caret .ak-nav__caret-ico {
		transform: rotate(225deg) translate(3px, 3px);
	}

	/* Подразделы свёрнуты: раскрывает их стрелка (javascript/nav-mobile.js) */
	.ak-nav__sub {
		position: static;
		flex: 1 0 100%;
		display: none;
		min-width: 0;
		padding: 4px 0;
		background: #f4f8fd;
		border-radius: 0;
		box-shadow: none;
	}

	.ak-nav__item.is-expanded > .ak-nav__sub {
		display: block;
		animation: ak-dropdown .2s ease both;
	}

	.ak-nav__sub .ak-nav__link {
		padding: 10px 16px 10px 30px;
	}

	.ak-hero {
		min-height: 0;
	}

	.ak-hero > .container {
		padding-top: 64px;
	}

	.ak-hero__content {
		max-width: none;
		padding-top: 0;
		padding-left: 22px;
	}

	.ak-hero .ak-eyebrow::before {
		left: -22px;
		height: 96px;
	}

	/*
	 * Та же часть верхней ленты, но крупнее — иначе на узком экране она
	 * теряется. Затемнение здесь накрывает весь кадр, поэтому лента поднята
	 * над ним; текст всё равно выше, он лежит в контейнере.
	 */
	.ak-hero__decor--top {
		z-index: 2;
		height: 13.3vw;
	}

	/*
	 * Селектор с двумя классами — иначе `.ak-section img { max-width: 100% }`
	 * окажется специфичнее и не даст ленте выйти за ширину экрана.
	 */
	.ak-hero__decor--top .ak-hero__decor-img {
		width: 180%;
		max-width: none;
		margin-left: -80%;
		margin-top: -22vw;
	}

	/*
	 * На узком экране кадр вытянут по вертикали, от кадрирования по ширине
	 * лента стала бы огромной. Поэтому здесь она лежит по нижней кромке во всю
	 * ширину в своих пропорциях, а преимущества отступают на её высоту.
	 */
	.ak-hero__decor--bottom {
		top: auto;
		right: 0;
	}

	/*
	 * Доля другая, чем на широком экране: сдвиг считается от высоты самой
	 * картинки, а не от высоты секции. Левый конец ленты так же садится на
	 * стык, а нижний изгиб переходит на следующий блок.
	 */
	.ak-hero__decor--bottom .ak-hero__decor-img {
		height: auto;
		object-fit: fill;
		transform: translateY(35%);
	}

	.ak-hero .ak-features {
		max-width: none;
	}

	.ak-hero__features {
		padding-block: 36px 30vw;
	}

	.ak-features {
		flex-direction: column;
		align-items: flex-start;
		gap: 22px;
	}

	.ak-features__item,
	.ak-features__item + .ak-features__item {
		padding: 0;
		border-right: 0;
	}

	.ak-partner,
	.ak-director,
	.ak-cta {
		min-height: 0;
	}

	.ak-partner__inner,
	.ak-director__inner {
		grid-template-columns: 1fr;
		padding-block: 64px;
	}

	/*
	 * Лента нарисована в самой фотографии, а фотография растянута по cover,
	 * поэтому высота ленты считается от высоты секции: в один столбец секция
	 * вытягивается вдвое, и лента у верхней кромки вырастает с 60 до ~100px —
	 * надзаголовок с заголовком упирались в красную полосу вплотную. Верхнее
	 * поле увеличено так, чтобы зазор до ленты вернулся к десктопным ~65px:
	 * почти вся добавка уходит именно в зазор, потому что сама лента
	 * прибавляет лишь 8,5% от неё.
	 */
	.ak-partner__inner {
		padding-top: 80px;
	}

	/* Поле под черту сужается, но остаётся: иначе она ляжет на заголовок */
	.ak-partner__content {
		padding-left: 22px;
	}

	.ak-partner .ak-eyebrow::before {
		left: -22px;
		height: 76px;
	}

	/* В столбик карточка перекрывает более светлую часть фото — заливка плотнее */
	.ak-stats {
		justify-self: stretch;
		width: 100%;
		padding: 32px 32px 32px 38px;
		background: rgba(4, 18, 36, .58);
		border-radius: var(--ak-radius-lg);
	}

	.ak-director__figure {
		max-width: 420px;
	}

	.ak-director__card {
		grid-column: auto;
		margin-bottom: 0;
		padding: 32px;
	}

	.ak-cta__content {
		max-width: none;
		padding-block: 64px;
	}

	.ak-cta .ak-features--compact .ak-features__title {
		max-width: none;
	}

	/*
	 * Преимущества собраны в строку с вертикальными разделителями. На узком
	 * экране строка не помещается: пункты сжимаются, а отступы под
	 * разделители остаются и съезжают лесенкой. Разворачиваем в столбик.
	 */
	.ak-features {
		flex-direction: column;
		align-items: flex-start;
		gap: 20px;
	}

	.ak-features__item,
	.ak-features__item + .ak-features__item,
	.ak-features--compact .ak-features__item,
	.ak-features--compact .ak-features__item + .ak-features__item {
		flex: 0 0 auto;
		width: 100%;
		padding-right: 0;
		padding-left: 0;
		border-right: 0;
	}

	.ak-trust__list {
		gap: 0 16px;
	}

	.ak-trust__item {
		padding: 10px 0;
		border-right: 0;
	}

	.ak-trust__item:first-child {
		flex: 1 1 auto;
		padding-left: 0;
	}

	/*
	 * Текстовый пункт — отдельной строкой над логотипами: зажатый между
	 * картинками, он сжимался до полутора слов в ширину и переставал читаться.
	 */
	.ak-trust__item--text {
		order: -1;
		flex: 1 0 100%;
		justify-content: flex-start;
		margin-bottom: 18px;
		padding: 0;
	}

	.ak-trust__text {
		max-width: none;
	}

	.ak-contacts__card {
		grid-template-columns: 1fr;
	}

	.ak-contacts__info {
		padding: 40px 32px;
	}

	.ak-section__head--split {
		flex-direction: column;
		align-items: flex-start;
		gap: 24px;
	}

	.ak-footer__main {
		grid-template-columns: 1fr;
		gap: 32px;
	}

	/* В одну колонку вертикальные разделители не к чему прислонить */
	.ak-footer__links + .ak-footer__links,
	.ak-footer__contacts {
		padding-left: 0;
		border-left: 0;
	}

	.ak-footer__bottom {
		flex-direction: column;
		align-items: flex-start;
		gap: 16px;
	}

	/*
	 * В строку черта отделяла правовые ссылки от копирайта. Когда они встали
	 * отдельной строкой, первая черта повисла у левого края сама по себе —
	 * здесь разделяют отступы.
	 */
	.ak-footer__legal li::before {
		content: none;
	}
}

@media (max-width: 700px) {
	body {
		font-size: 16px;
	}

	/*
	 * Фоновая картинка шапки рассчитана на широкую полосу: при cover на узком
	 * экране в кадр попадает её светлый угол и читается как белая заплатка.
	 * На телефоне оставляем ровную заливку.
	 */
	.ak-topbar {
		background-image: none !important;
	}

	/* Подпись у кнопки не помещается — оставляем кружок с трубкой */
	.ak-topbar__cta {
		width: 46px;
		height: 46px;
		padding: 0;
		justify-content: center;
		border-radius: 50%;
	}

	.ak-topbar__cta .ak-btn__arrow {
		display: none;
	}

	/*
	 * Кнопки первого экрана и страницы ошибки в столбик во всю ширину: рядом
	 * они на телефоне не встают, а перенос по flex-wrap оставил бы их разной
	 * длины.
	 */
	.ak-hero__actions .ak-btn,
	.ak-error__actions .ak-btn {
		flex: 1 1 100%;
		justify-content: center;
		padding-inline: 24px;
	}

	/* Правовые ссылки подвала в строку не влезают и обрезаются краем экрана */
	.ak-footer__legal {
		flex-wrap: wrap;
		gap: 10px 30px;
		padding-right: 72px;
	}

	.ak-section {
		padding-block: 56px;
	}

	/*
	 * На телефоне секция «надёжный партнёр» ещё выше, а поле секции сузилось
	 * с 72 до 56px — добираем верхний отступ, иначе заголовок снова подходит
	 * к ленте вплотную (расчёт зазора — у правила в блоке 1100px).
	 */
	.ak-partner__inner {
		padding-top: 120px;
	}

	.ak-section__head {
		margin-bottom: 36px;
	}

	.ak-services__grid,
	.ak-steps {
		grid-template-columns: 1fr;
	}

	.ak-card__body {
		gap: 16px;
		padding: 22px 22px 26px;
	}

	.ak-topbar__logo-img {
		height: 42px;
	}

	.ak-topbar__cta .ak-btn__text {
		display: none;
	}

	.ak-contact {
		padding-right: 0;
		border-right: 0;
	}

	/* В столбик зазор, рассчитанный на соседство по горизонтали, слишком велик */
	.ak-director__person {
		flex-direction: column;
		align-items: flex-start;
		gap: 18px;
	}

	.ak-footer__nav {
		grid-template-columns: 1fr;
		gap: 16px;
	}

	/* На узком экране логотип подвала иначе растягивается во всю колонку */
	.ak-footer__logo {
		max-width: 220px;
	}

	.ak-slider.owl-carousel .owl-prev,
	.ak-slider.owl-carousel .owl-next {
		display: none;
	}

	/* Лайтбокс: на узком экране кадру нужна вся ширина, листаем свайпом */
	.ak-lightbox {
		padding: 76px 16px 24px;
	}

	.ak-lightbox__img {
		height: min(calc(100vh - 230px), 1100px);
	}

	.ak-lightbox__caption {
		font-size: 18px;
	}

	.ak-lightbox__note,
	.ak-lightbox__counter {
		font-size: 14px;
	}

	.ak-lightbox__close {
		top: 14px;
		right: 14px;
		width: 44px;
		height: 44px;
	}

	.ak-lightbox__nav {
		display: none;
	}
}

/* Акцент заголовка новостей — синий, в остальных секциях красный */
.ak-news .ak-accent {
	color: var(--ak-blue);
}

/* ------------------------------------- адаптив внутренних страниц -- */

/*
 * Сетки внутренних страниц собраны под широкий экран: две-три колонки
 * карточек, фото рядом с текстом. На планшете и телефоне всё это
 * схлопывается в одну колонку — иначе текст в карточках встаёт столбиком
 * по два слова.
 */
@media (max-width: 1100px) {
	.ak-page__contacts {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.ak-page__cards--three {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.ak-page__feature {
		grid-template-columns: minmax(0, 1fr);
	}

	/* В одной колонке фотография всегда идёт первой, порядок не нужен */
	.ak-page__feature--reverse > figure {
		order: 0;
	}

	.ak-page__band--wide {
		margin-inline: 0;
	}
}

@media (max-width: 860px) {
	.ak-pagehero {
		min-height: 320px;
	}

	/* Обязанности и требования в столбик: в две колонки строки рвутся */
	.ak-vacancy__cols {
		grid-template-columns: minmax(0, 1fr);
	}

	/*
	 * Заголовок вакансии в две строки: сверху название со стрелкой, под ними
	 * график и зарплата. В одну строку они не помещаются и сжимают название.
	 */
	.ak-vacancy__head {
		flex-wrap: wrap;
		gap: 8px 14px;
		padding: 16px 18px;
	}

	.ak-vacancy__name {
		order: 1;
		font-size: 17px;
	}

	.ak-vacancy__caret {
		order: 2;
	}

	.ak-vacancy__brief {
		order: 3;
		flex: 1 1 100%;
	}

	.ak-vacancy__body {
		padding: 0 18px 20px;
	}

	.ak-pagehero__wave {
		opacity: .3;
	}

	.ak-page__split,
	.ak-page__cards,
	.ak-page__cards--three {
		grid-template-columns: minmax(0, 1fr);
	}

	/* Иллюстрация под текстом: читать сначала, смотреть потом */
	.ak-page__split > figure {
		order: 2;
	}

	.ak-page__list--columns {
		columns: 1;
	}

	/*
	 * В столбик flex-basis дочернего блока начинает задавать высоту, а не
	 * ширину: врезка вытягивалась на 420 px и под коротким текстом оставалась
	 * пустая тёмная плита. Высоту отдаём содержимому.
	 */
	.ak-page__note {
		flex-direction: column;
		align-items: flex-start;
		justify-content: flex-start;
		gap: 22px;
	}

	.ak-page__note > div {
		flex: 0 0 auto;
		width: 100%;
	}
}

@media (max-width: 700px) {
	.ak-page__contacts,
	.ak-page__tiles,
	.ak-page__gallery {
		grid-template-columns: minmax(0, 1fr);
	}

	.ak-page__steps > li {
		padding-left: 0;
	}

	/* Номер уходит над текстом: 66 px отступа съедали половину ширины */
	.ak-page__steps > li::before {
		position: static;
		margin-bottom: 12px;
		width: 40px;
		height: 40px;
	}

	.ak-page__steps > li:not(:last-child)::after {
		content: none;
	}

	.ak-page__cards--num .ak-page__card {
		padding-top: clamp(26px, 2.6vw, 36px);
	}

	.ak-page__cards--num .ak-page__card::before {
		position: static;
		margin-bottom: 14px;
	}

	.ak-page__table th,
	.ak-page__table td {
		padding: 14px 16px;
	}
}

/* ------------------------------ адаптив виджета cookie и кнопки наверх -- */

/*
 * Все четыре кнопки угла — cookie, «наверх», «написать», «позвонить» —
 * стоят в одном столбце, но печатаются из трёх разных мест, поэтому и
 * положение, и размер приходится согласовывать вручную.
 *
 * Шаг столбца: 16 (от края) + 46 (кнопка) + 12 (зазор) и далее по 58 px.
 * Если меняете размер кнопки — пересчитайте bottom у всех трёх блоков,
 * иначе столбик разъедется, как было до правки: ak-fab оставался крупнее
 * остальных и висел с другим отступом от края.
 */
@media (max-width: 700px) {
	.scroll-up {
		right: 16px;
		bottom: 190px;
		width: 46px;
		height: 46px;
	}

	.ak-cookie {
		right: 16px;
		bottom: 16px;
	}

	.ak-cookie__mini {
		width: 46px;
		height: 46px;
	}

	.ak-cookie__mini svg {
		width: 22px;
		height: 22px;
	}

	/* Карточка раскрывается во всю ширину экрана */
	.ak-cookie__note {
		width: calc(100vw - 32px);
	}

	.ak-fab {
		right: 16px;
		bottom: 74px;
	}

	.ak-fab__btn {
		width: 46px;
		height: 46px;
	}

	.ak-fab__btn svg {
		width: 21px;
		height: 21px;
	}
}