/* css/base.css */
/* Base styles (formerly from Bootstrap 3): element defaults, typography, the .container and a few
   helpers the templates use (.text-uppercase, .list-unstyled, .img-responsive, .hidden-xs,
   .visible-xs-block). Layouts are CSS grid in each block's stylesheet; the menu is site-header.css. */
html {font-family: sans-serif; text-size-adjust: 100%;}
body {margin: 0px;}
footer,
header,
main,
nav,
section {display: block;}
[hidden] {display: none;}
a {background-color: transparent;}
b {font-weight: bold;}
h1 {font-size: 2em; margin: 0.67em 0px;}
img {border: 0px;}
svg:not(:root) {overflow: hidden;}
button,
input,
textarea {color: inherit; font: inherit; margin: 0px;}
button {overflow: visible;}
button {text-transform: none;}
button {appearance: button; cursor: pointer;}
input {line-height: normal;}
input[type="checkbox"] {box-sizing: border-box; padding: 0px;}
textarea {overflow: auto;}
@media print {
*,
::before,
::after {background: transparent !important; color: rgb(0, 0, 0) !important; box-shadow: none !important; text-shadow: none !important;}
a,
a:visited {text-decoration: underline;}
a[href]::after {content: " (" attr(href) ")";}
a[href^="#"]::after {content: "";}
img {break-inside: avoid;}
img {max-width: 100% !important;}
p,
h2,
h3 {orphans: 3; widows: 3;}
h2,
h3 {break-after: avoid;}
}
* {box-sizing: border-box;}
::before,
::after {box-sizing: border-box;}
html {font-size: 10px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0);}
body {font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 14px; line-height: 1.42857143; color: rgb(66, 66, 66); background-color: rgb(255, 255, 255);}
input,
button,
textarea {font-family: inherit; font-size: inherit; line-height: inherit;}
a {color: rgb(51, 122, 183); text-decoration: none;}
a:focus {color: rgb(35, 82, 124); text-decoration: underline;}
@media (hover: hover) {
	a:hover {color: rgb(35, 82, 124); text-decoration: underline;}
}
img {vertical-align: middle;}
.img-responsive {display: block; max-width: 100%; height: auto;}
h1,
h2,
h3,
h4 {font-family: inherit; font-weight: 500; line-height: 1.1; color: inherit;}
h1,
h2,
h3 {margin-top: 20px; margin-bottom: 10px;}
h4 {margin-top: 10px; margin-bottom: 10px;}
h1 {font-size: 36px;}
h2 {font-size: 30px;}
h3 {font-size: 24px;}
h4 {font-size: 18px;}
p {margin: 0px 0px 10px;}
.text-uppercase {text-transform: uppercase;}
ul,
ol {margin-top: 0px; margin-bottom: 10px;}
ul ul {margin-bottom: 0px;}
.list-unstyled {padding-left: 0px; list-style: none;}
dl {margin-top: 0px; margin-bottom: 20px;}
dt,
dd {line-height: 1.42857143;}
dt {font-weight: bold;}
dd {margin-left: 0px;}
.container {margin-right: auto; margin-left: auto; padding-left: 15px; padding-right: 15px;}
/* Phones: the artboards' 20px from the screen edges. */
@media (max-width: 767px) {
.container {padding-left: 20px; padding-right: 20px;}
}
@media (min-width: 768px) {
.container {width: 750px;}
}
@media (min-width: 992px) {
.container {width: 970px;}
}
@media (min-width: 1200px) {
.container {width: 1170px;}
}
label {display: inline-block; max-width: 100%; margin-bottom: 5px; font-weight: bold;}
input[type="checkbox"] {margin: 4px 0px 0px; line-height: normal;}
input[type="checkbox"]:focus {outline: -webkit-focus-ring-color auto 5px; outline-offset: -2px;}
.container::before,
.container::after {content: " "; display: table;}
.container::after {clear: both;}
.visible-xs-block {display: none !important;}
@media (max-width: 767px) {
.visible-xs-block {display: block !important;}
}
@media (max-width: 767px) {
.hidden-xs {display: none !important;}
}

/* Page */
html,
body {
	min-height: 100%;
}
/* The scrollbar's place is kept from the first paint, so the page doesn't shift sideways when it
   appears while the page loads (and on pages too short to scroll). */
html {
	scrollbar-gutter: stable;
}
body {
	overflow-x: hidden;
}
.wrapper {
	min-height: 50vh;
}
/* No focus outline after a mouse click or tap; keyboard focus keeps it (:focus-visible). */
:focus:not(:focus-visible) {
	outline: none !important;
}
a {
	transition: all 0.4s ease-out;
}

/* Site colours, used by every stylesheet and by the red-button sweep (site.js). */
:root {
	--red: #e62e20;
	--red-dark: #c92620;
}
/* Red buttons ([data-sweep]): on hover a darker red sweeps across (site.js); keyboard focus just
   shows it (over each button's own background colour, hence !important). */
[data-sweep]:focus-visible {
	background-color: var(--red-dark) !important;
}

/* Images. The build adds width/height to every generated <img> (layout hints): never wider than
   the container (phones), and the aspect ratio kept when the width is scaled. */
img[width][height] {
	max-width: 100%;
	height: auto;
}
img {
	margin-bottom: 10px;
}
/* A photo beside the text (the company text). */
.alignright {
	float: right;
	margin-left: 15px;
}
@media (max-width: 767px) {
	.alignright {
		float: none;
		margin: 0 auto 15px;
		display: block;
	}
}

/* «Наверх»: bottom left once the page is scrolled (site.js); not on phones (site.js fades it in
   with an inline style, hence !important). */
.button-up {
	position: fixed;
	z-index: 999;
	left: 24px;
	bottom: 24px;
	width: 44px;
	height: 44px;
	border: 1px solid #c4c4c4;
	border-radius: 50%;
	background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23222' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 15l6 -6l6 6'/%3E%3C/svg%3E") center no-repeat;
	opacity: 0;
	visibility: hidden;
	transition:
		opacity 0.4s ease,
		visibility 0s linear 0.4s,
		background-color 0.2s ease;
}
/* Shown once the page is scrolled down (site.js). */
.button-up.is-visible {
	opacity: 1;
	visibility: visible;
	transition:
		opacity 0.4s ease,
		visibility 0s,
		background-color 0.2s ease;
}
.button-up:focus {
	background-color: #f3f3f3;
	cursor: pointer;
}
@media (hover: hover) {
	.button-up:hover {
		background-color: #f3f3f3;
		cursor: pointer;
	}
}
@media (max-width: 767px) {
	.button-up {
		display: none !important;
	}
}

/* css/headings.css */
/* Headings and vertical rhythm for the whole site. Spacing is defined here only: blocks don't
   style their own headings, outer padding or item margins.
   .page-title      the page's single <h1> (partials/page-title.liquid)
   .section-block   a block's outer wrapper (services section, clients, features, projects...)
   .section-heading the <h2> heading a block (--left: left-aligned, on service pages)
   .service-hero__title  a service page's <h1>, in its photo banner (layouts/service.liquid); the
                         content after the banner starts one and a half gutters below it
   .block-item      a unit of block content (card, feature, gallery tile, carousel, text column)
   Rhythm: every block item ends with one gutter (30px); a block adds half a gutter above its
   heading. So a heading is always one and a half gutters below the content before it.
   .section-block--band  a block with its own background: one full gutter inside at the top,
                         matching the one its last item leaves at the bottom. A plain block right
                         after a band also starts a full gutter below it; a band right after a
                         plain block keeps half a gutter more above it (like a heading); two bands
                         just touch (a block's <link> tag may sit between the sections).
   A page's content ends with one gutter (its last block item); the footer keeps one more gutter
   above it, two gutters in all. After a band (clients on О нас) the footer starts two gutters
   below the band's edge, except on service pages, where a closing band touches the footer. */

/* Headings (and heading-like text: slider caption, service cards, footer email) use the condensed face. */
h1, h2, h3, h4, h5, h6,
.slider .slider-caption,
.service-card__title,
.footer-contacts__email {
	font-family: 'Roboto Condensed', 'Roboto', Arial, sans-serif;
}

.page-title {
	overflow-wrap: break-word; /* a long word («конфиденциальности») never widens the page */
	margin: 30px 0;
	font-size: 36px;
	font-weight: 400;
	line-height: 1.1;
	text-align: center;
	text-transform: none;
}

.section-block {
	display: flow-root; /* contain floated items, so spacing never leaks between blocks */
	padding-top: 15px;
	padding-bottom: 0;
}
.section-block--band,
section:has(> .section-block--band) + section > .section-block,
section:has(> .section-block--band) + link + section > .section-block {
	padding-top: 30px;
}
section:not(:has(> .section-block--band)) + section > .section-block--band,
section:not(:has(> .section-block--band)) + link + section > .section-block--band {
	margin-top: 15px;
}
.site-footer {
	margin-top: 30px;
}
.wrapper:has(.site-main > section:last-of-type > .section-block--band) ~ .site-footer {
	margin-top: 60px;
}
/* Service pages (photo banner): a closing band runs straight into the footer, at every width. */
.wrapper:has(.service-hero):has(.site-main > section:last-of-type > .section-block--band) ~ .site-footer {
	margin-top: 0 !important;
}

/* The not-found page and short notices (notice-page.css): a smaller, bolder title in the middle of
   the page. */
.page-title.page-title--not-found,
.page-title.page-title--notice {
	margin: 28px 0 0;
	font-size: clamp(26px, 4vw, 36px);
	font-weight: 600;
	line-height: 1.15;
}
.page-title.page-title--notice {
	margin: 0;
	text-wrap: balance;
}

.section-heading {
	margin: 0 0 30px;
	font-size: 36px; /* size and line height as .page-title */
	font-weight: 400;
	line-height: 1.1;
	text-align: center;
	text-transform: none;
}
.section-heading--left {
	font-size: 30px;
	font-weight: 600;
	text-align: left;
	text-wrap: balance;
}

.service-hero__title {
	margin: 0;
	color: #fff;
	font-size: clamp(26px, 3vw, 40px);
	line-height: 1.1;
	font-weight: 700;
	letter-spacing: 0.01em;
	text-transform: uppercase;
	text-wrap: balance;
	max-width: 900px;
	text-shadow: 0 2px 12px rgba(0, 0, 0, 0.25);
}
.service-hero + section > .section-block {
	padding-top: 45px;
}

.block-item {
	display: flow-root; /* its own content's margins stay inside it */
	margin-bottom: 30px;
}
/* The item's gutter is its only bottom space: drop the bottom margin of its last element and of
   that element's last row (form, list). !important: block CSS is loaded later and must not win. */
.block-item > :last-child,
.block-item > :last-child > :last-child {
	margin-bottom: 0 !important;
}

/* Content starts exactly one gutter under the title or heading above it: the first element of an
   item adds no top margin of its own (contacts headings, form, page text). */
.block-item > :first-child {
	margin-top: 0;
}

@media (max-width: 767px) {
	.page-title {
		margin: 20px 0;
		font-size: 28px;
	}
	.section-block {
		padding-top: 10px;
	}
	.section-block--band,
	section:has(> .section-block--band) + section > .section-block,
	section:has(> .section-block--band) + link + section > .section-block {
		padding-top: 20px;
	}
	section:not(:has(> .section-block--band)) + section > .section-block--band,
	section:not(:has(> .section-block--band)) + link + section > .section-block--band {
		margin-top: 10px;
	}
	.site-footer {
		margin-top: 20px;
	}
	.wrapper:has(.site-main > section:last-of-type > .section-block--band) ~ .site-footer {
		margin-top: 40px;
	}
	.section-heading {
		margin-bottom: 20px;
		font-size: 28px;
	}
	.section-heading--left {
		font-size: 24px;
	}
	.service-hero__title {
		font-size: 24px;
	}
	.service-hero + section > .section-block {
		padding-top: 30px;
	}
	.block-item {
		margin-bottom: 20px;
	}
	/* Service cards sit closer together: the grid's own gap, the usual gutter after its last row. */
	.services-grid {
		row-gap: 12px;
		margin-bottom: 20px;
	}
	.services-grid > .block-item {
		margin-bottom: 0;
	}
}
@media (max-width: 479px) {
	.services-grid {
		row-gap: 16px;
	}
}

/* css/block-css/top-header.css */
/* Dark bar above the menu: address left, email right. */
.top-header {
	background-color: #333;
	color: #fff;
	font-size: 12px;
	line-height: 18px;
	font-weight: 700;
	letter-spacing: 0.07pt;
}
.top-header .top-bar {
	display: flex;
	justify-content: space-between;
	gap: 16px;
	padding: 7px 0 6px;
}
.top-header .top-bar__address {
	min-width: 0;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
	text-transform: uppercase;
}
.top-header .top-bar__email {
	flex: none;
	margin-left: auto;
	font-size: 14px;
	color: #fff;
}
.top-header .top-bar__email:focus {
	color: #fff;
	text-decoration: underline;
}
@media (hover: hover) {
	.top-header .top-bar__email:hover {
		color: #fff;
		text-decoration: underline;
	}
}
@media (max-width: 767px) {
	.top-header .top-bar__address {
		display: none;
	}
}

/* css/block-css/site-header.css */
/* Menu bar: logo, main menu with hover dropdowns, "Заказать перевозку". Stays at the top while
   scrolling. Below 992px the menu moves into the pane opened by the menu button (menu-pane.css). */
.site-header {
	position: sticky;
	top: 0;
	z-index: 1000;
	background-color: #f5f5f5;
}
.site-header .menu-bar {
	display: flex;
	align-items: center;
	gap: 24px;
}
.site-header .navbar-brand {
	flex: none;
}
.site-header .navbar-brand img {
	display: block;
	margin: 0;
}

/* Main menu */
.site-header .navbar-nav {
	margin: 0;
	padding: 0;
	list-style: none;
}
.site-header .navbar-nav > li {
	position: relative;
}
.site-header .navbar-nav > li > a,
.site-header .dropdown-toggle {
	display: block;
	padding: 22px 0;
	color: #222;
	font-size: 14px;
	line-height: 18px;
	font-weight: 700;
	text-transform: uppercase;
}
/* A group (with a dropdown) is a button: its title and chevron, no link of its own (site.js). */
.site-header .dropdown-toggle {
	display: flex;
	align-items: center;
	gap: 3px;
	border: 0;
	background: none;
	font-family: inherit;
	cursor: pointer;
}
.site-header .navbar-nav > li > a:focus,
.site-header .dropdown-toggle:focus-visible {
	color: #666;
	text-decoration: none;
}
@media (hover: hover) {
	.site-header .navbar-nav > li > a:hover,
	.site-header .navbar-nav > li:hover > a,
	.site-header .dropdown-toggle:hover {
		color: #666;
		text-decoration: none;
	}
}
/* Menu links change at once on hover (the theme fades every link over 0.4s). */
.site-header .navbar-nav a {
	transition: none;
}
.site-header .dropdown-toggle svg {
	opacity: 0.55;
	transition: transform 0.2s ease;
}

/* Dropdown panel of a group; when it shows: in the 992px+ block below. */
.site-header .dropdown-menu {
	display: none;
	position: absolute;
	top: 100%;
	left: 0;
	z-index: 1000;
	min-width: 300px;
	margin: 0;
	padding: 8px 0;
	list-style: none;
	border-radius: 4px;
	background-color: #fff;
	box-shadow: 0 12px 32px rgba(0, 0, 0, 0.12);
	font-size: 14px;
	text-align: left;
}
.site-header .dropdown-menu > li > a {
	display: block;
	padding: 10px 16px;
	color: #222;
	font-size: 15px;
	line-height: 1.4;
	font-weight: 400;
	white-space: normal; /* the menu items above don't wrap; long dropdown links do */
}
.site-header .dropdown-menu > li > a:focus {
	color: #222;
	background-color: #f3f3f3;
	text-decoration: none;
}
@media (hover: hover) {
	.site-header .dropdown-menu > li > a:hover {
		color: #222;
		background-color: #f3f3f3;
		text-decoration: none;
	}
}

/* Call button */
.site-header .btn-call {
	flex: none;
	padding: 10px 18px;
	border-radius: 2px;
	background-color: var(--red);
	color: #fff;
	font-size: 13px;
	line-height: 18px;
	font-weight: 700;
	text-transform: uppercase;
	white-space: nowrap;
	transition: background-color 0.2s ease;
}
.site-header .btn-call:focus {
	color: #fff;
	text-decoration: none;
}
@media (hover: hover) {
	.site-header .btn-call:hover {
		color: #fff;
		text-decoration: none;
	}
}

/* Menu button (below 992px): three lines. */
.site-header .navbar-toggle {
	display: none;
	flex: none;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	margin-right: -8px;
	padding: 0;
	border: 0;
	background: transparent;
	color: #222;
}

@media (min-width: 992px) {
	.site-header .navbar-collapse {
		flex: 1;
		min-width: 0;
	}
	/* The first item sits one gap further from the logo than the bar's own gap. */
	.site-header .navbar-nav {
		display: flex;
		gap: 20px;
		padding-left: 20px;
	}
	.site-header .navbar-nav > li {
		display: flex;
		align-items: center;
		gap: 3px;
		white-space: nowrap;
	}
	/* The bar is 89px tall, as in the artboard (49px logo + 20px above and below): the items fill its
	   height, and a dropdown starts 18px above its bottom edge. */
	.site-header .navbar-nav > li > a,
	.site-header .dropdown-toggle {
		padding: 35.5px 0;
	}
	.site-header .navbar-nav > li > .dropdown-menu {
		top: calc(100% - 18px);
		left: -16px;
	}
	/* Open: clicked or tapped open (.open), or under the mouse unless just clicked shut (.is-shut);
	   site.js. The chevron turns over while open. */
	.site-header .navbar-nav > li.open > .dropdown-menu {
		display: block;
	}
	.site-header .navbar-nav > li.open .dropdown-toggle svg {
		transform: rotate(180deg);
	}
	@media (hover: hover) {
		.site-header .navbar-nav > li:hover:not(.is-shut) > .dropdown-menu {
			display: block;
		}
		.site-header .navbar-nav > li:hover:not(.is-shut) .dropdown-toggle svg {
			transform: rotate(180deg);
		}
	}
}
/* Narrower desktops: the full menu still fits on one line. */
@media (min-width: 992px) and (max-width: 1199px) {
	.site-header .menu-bar {
		gap: 16px;
	}
	.site-header .navbar-nav {
		gap: 12px;
		padding-left: 12px;
	}
	.site-header .navbar-nav > li > a,
	.site-header .dropdown-toggle,
	.site-header .btn-call {
		font-size: 11px;
	}
	.site-header .btn-call {
		padding: 10px 12px;
	}
}
@media (max-width: 991px) {
	.site-header .menu-bar {
		gap: 12px;
		padding: 10px 0;
	}
	.site-header .navbar-brand {
		margin-right: auto;
	}
	.site-header .navbar-collapse {
		display: none;
	}
	.site-header .navbar-toggle {
		display: flex;
	}
}
/* Phones: only the logo and the menu button; «Заказать перевозку» would dominate the small bar (it is
   in the menu pane, and the slider has «Оставить заявку»). */
@media (max-width: 479px) {
	.site-header .navbar-brand img {
		width: 115px;
	}
	.site-header .btn-call {
		display: none;
	}
}

/* css/block-css/menu-pane.css */
/* Phone and tablet menu (partials/menu-pane.liquid): a pane sliding in from the right over a dimmed
   page, below 992px. Closed it is moved out and hidden; .is-open (site.js) slides it in, and while
   a finger drags it to the right site.js moves it directly (.is-dragging: no transition). */
.menu-pane-backdrop {
	position: fixed;
	inset: 0;
	z-index: 1100;
	background-color: rgba(15, 18, 22, 0.55);
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.35s ease;
}
.menu-pane {
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	z-index: 1101;
	display: flex;
	flex-direction: column;
	width: min(380px, 86vw);
	overflow-y: auto;
	overscroll-behavior: contain;
	scrollbar-width: none;
	background-color: #f5f5f5;
	box-shadow: -12px 0 40px rgba(0, 0, 0, 0.18);
	transform: translateX(100%);
	visibility: hidden;
	transition:
		transform 0.4s cubic-bezier(0.2, 0.7, 0.2, 1),
		visibility 0s linear 0.4s;
}
.menu-pane::-webkit-scrollbar {
	display: none;
}
.menu-pane.is-open {
	transform: none;
	visibility: visible;
	transition:
		transform 0.4s cubic-bezier(0.2, 0.7, 0.2, 1),
		visibility 0s;
}
.menu-pane.is-dragging {
	transition: none;
}
.menu-pane-backdrop.is-open {
	opacity: 1;
	pointer-events: auto;
}
/* The page behind doesn't scroll while the pane is open (its scrollbar's space is kept). */
/* Locked on <body>, not <html>: with <html> hidden, <body> (overflow-x: hidden, base.css) would become
   its own scroll box and the sticky header would jump out of view on a scrolled page. */
html.menu-pane-open body {
	overflow: hidden;
}
@media (min-width: 992px) {
	.menu-pane,
	.menu-pane-backdrop {
		display: none;
	}
}

/* Top row: the close button, at the height of the header's bar. */
.menu-pane__top {
	flex: none;
	display: flex;
	align-items: center;
	justify-content: flex-end;
	min-height: 64px;
	padding: 0 12px 0 20px;
}
.menu-pane__logo {
	display: none;
	margin-right: auto;
}
.menu-pane__logo img {
	display: block;
	margin: 0;
}
.menu-pane__close {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	padding: 0;
	border: 0;
	background: none;
	color: #222;
}

/* Groups (a title that unfolds its links) and plain links, divided by lines. */
.menu-pane__nav {
	flex: 1 0 auto;
	padding: 8px 0;
}
.menu-pane__group,
.menu-pane__link:not(:last-child) {
	border-bottom: 1px solid #e4e4e4;
}
.menu-pane__toggle,
.menu-pane__link {
	display: flex;
	align-items: center;
	width: 100%;
	min-height: 56px;
	padding: 0 24px;
	border: 0;
	background: none;
	color: #222;
	font-family: 'Roboto Condensed', 'Roboto', Arial, sans-serif;
	font-size: 18px;
	font-weight: 600;
	line-height: 1.2;
	text-align: left;
	transition: color 0.2s ease;
}
.menu-pane__toggle {
	justify-content: space-between;
	gap: 12px;
	padding-right: 20px;
}
.menu-pane__toggle svg {
	flex: none;
	transition: transform 0.3s ease;
}
.menu-pane__toggle[aria-expanded='true'] svg {
	transform: rotate(180deg);
}
/* A group's links unfold to their full height (grid rows 0fr -> 1fr). */
.menu-pane__sub {
	display: grid;
	grid-template-rows: 0fr;
	transition: grid-template-rows 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}
.menu-pane__toggle[aria-expanded='true'] + .menu-pane__sub {
	grid-template-rows: 1fr;
}
.menu-pane__items {
	display: flex;
	flex-direction: column;
	min-height: 0;
	overflow: hidden;
}
.menu-pane__items::after {
	content: '';
	flex: none;
	height: 10px;
}
/* Folded links can't be reached with Tab. */
.menu-pane__toggle[aria-expanded='false'] + .menu-pane__sub .menu-pane__items {
	visibility: hidden;
	transition: visibility 0s linear 0.35s;
}
.menu-pane__item {
	display: flex;
	align-items: center;
	min-height: 48px;
	padding: 6px 24px 6px 36px;
	color: #222;
	font-size: 16px;
	line-height: 1.35;
	transition: color 0.2s ease;
}
.menu-pane__link:focus,
.menu-pane__item:focus {
	color: #666;
	text-decoration: none;
}
@media (hover: hover) {
	.menu-pane__toggle:hover,
	.menu-pane__link:hover,
	.menu-pane__item:hover {
		color: #666;
		text-decoration: none;
	}
}

/* Bottom: the request button and the email. */
.menu-pane__bottom {
	flex: none;
	display: flex;
	flex-direction: column;
	gap: 14px;
	padding: 20px 24px 24px;
}
.menu-pane__order {
	display: block;
	height: 52px;
	border-radius: 2px;
	background-color: var(--red);
	color: #fff;
	font-size: 15px;
	font-weight: 700;
	line-height: 52px;
	letter-spacing: 0.02em;
	text-align: center;
	text-transform: uppercase;
}
.menu-pane__order:focus {
	color: #fff;
	text-decoration: none;
}
@media (hover: hover) {
	.menu-pane__order:hover {
		color: #fff;
		text-decoration: none;
	}
}
.menu-pane__email {
	align-self: center;
	padding: 4px 0;
	color: #555;
	font-size: 15px;
}

/* Below 480px: the whole screen, with the logo where the header has it and the close button where
   the header's menu button is. */
@media (max-width: 479px) {
	.menu-pane {
		width: 100vw;
	}
	.menu-pane__top {
		padding: 0 10px 0 20px;
	}
	.menu-pane__logo {
		display: block;
	}
	.menu-pane__logo img {
		width: 115px;
	}
}
@media (max-width: 359px) {
	.menu-pane__logo img {
		width: 100px;
	}
}

/* css/block-css/slider.css */
/* Home slider: full-width photos (Embla, site.js): a drag or swipe moves the slides with the pointer;
   autoplay and the arrows crossfade (a copy of the shown slide, .slider-copy, fades out over the new
   one). The active slide (.is-active) slowly zooms in; a caption and an «Оставить заявку» button over
   a gradient; square previous/next arrows at the sides (none on phones, where slides are swiped).
   Caption, button and zoom animate only under .is-ready (site.js sets it just after the first
   paint, so the first slide animates in too): the photo comes first, the caption rises into place
   0.6 s later (0.4 s on page load), then the button; leaving, both fade quickly. */
.slider {
	position: relative;
	overflow: hidden;
	background-color: #1a2330;
	color: #fff;
}
/* Embla: the viewport clips, the track lays the slides out in a row and moves it. */
.slider .slider-slides {
	overflow: hidden;
}
.slider .slider-track {
	display: flex;
	touch-action: pan-y pinch-zoom;
	user-select: none; /* dragging a slide doesn't select the caption */
}
/* The crossfade: a copy of the slide that was shown, over the slides (under the arrows), fading out. */
.slider .slider-copy {
	position: absolute;
	inset: 0;
	z-index: 2;
	pointer-events: none;
	transition: opacity 1.1s ease-in-out;
}
.slider .slider-copy.is-fading {
	opacity: 0;
}
.slider .slider-item {
	flex: 0 0 100%;
	min-width: 0;
	position: relative;
	aspect-ratio: 1920 / 681; /* the photos' own proportions, as the original slider */
	max-height: 600px;
	overflow: hidden;
	outline: none;
}
.slider .slider-item-img,
.slider .slider-shade {
	position: absolute;
	inset: 0;
}
.slider .slider-item-img img {
	width: 100%;
	height: 100%;
	max-width: none;
	margin: 0;
	object-fit: cover;
	-webkit-user-drag: none;
	user-select: none;
	transform: scale(1);
	transition: transform 8s linear;
}
.slider.is-ready .is-active .slider-item-img img {
	transform: scale(1.06);
}

/* Darken toward the caption's side and along the bottom (behind the arrows and button). */
.slider .slider-shade {
	background:
		linear-gradient(0deg, rgba(12, 16, 22, 0.7), rgba(12, 16, 22, 0) 180px),
		linear-gradient(90deg, rgba(12, 16, 22, 0.6) 0%, rgba(12, 16, 22, 0.2) 50%, rgba(12, 16, 22, 0) 75%);
}
.slider .slider-item--right .slider-shade {
	background:
		linear-gradient(0deg, rgba(12, 16, 22, 0.7), rgba(12, 16, 22, 0) 180px),
		linear-gradient(270deg, rgba(12, 16, 22, 0.6) 0%, rgba(12, 16, 22, 0.2) 50%, rgba(12, 16, 22, 0) 75%);
}

/* Caption: centred vertically in the area above the bottom shade. */
.slider .slider-info {
	position: absolute;
	top: 0;
	bottom: 110px;
	left: 0;
	right: 0;
	display: flex;
	align-items: center;
}
.slider .slider-text {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 26px;
}
.slider .slider-item--right .slider-text {
	align-items: flex-end;
	margin-left: auto;
}
.slider .slider-caption {
	max-width: 560px;
	font-size: 48px;
	line-height: 1.12;
	font-weight: 700;
	text-wrap: balance;
	opacity: 0;
	transform: translateY(44px);
	transition:
		opacity 0.3s ease,
		transform 0.3s ease;
}
.slider .slider-cta {
	padding: 16px 30px;
	border: 0;
	border-radius: 2px;
	background: var(--red);
	color: #fff;
	font-size: 15px;
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	opacity: 0;
	transform: translateY(50px);
	transition:
		opacity 0.3s ease,
		transform 0.3s ease,
		background-color 0.2s ease;
}
.slider.is-ready .is-active .slider-caption {
	opacity: 1;
	transform: none;
	transition:
		opacity 0.9s ease 0.6s,
		transform 1.4s cubic-bezier(0.2, 0.7, 0.2, 1) 0.6s;
}
.slider.is-ready:not(.is-cycled) .is-active .slider-caption {
	transition:
		opacity 1.1s cubic-bezier(0.2, 0.7, 0.2, 1) 0.4s,
		transform 1.4s cubic-bezier(0.2, 0.7, 0.2, 1) 0.4s;
}
.slider.is-ready .is-active .slider-cta {
	opacity: 1;
	transform: none;
	transition:
		opacity 0.9s ease 0.85s,
		transform 1.4s cubic-bezier(0.2, 0.7, 0.2, 1) 0.85s,
		background-color 0.2s ease;
}
/* On page load (first slide, before the first change) caption and button start a bit sooner. */
.slider.is-ready:not(.is-cycled) .is-active .slider-cta {
	transition:
		opacity 0.9s ease 0.65s,
		transform 1.4s cubic-bezier(0.2, 0.7, 0.2, 1) 0.65s,
		background-color 0.2s ease;
}

/* Arrows: translucent squares at the sides, vertically centred on the slide; light with a red
   chevron on hover. */
.slider .slider-arrow {
	position: absolute;
	top: 50%;
	z-index: 3;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	margin-top: -24px;
	padding: 0;
	border: 0;
	border-radius: 2px;
	background: rgba(255, 255, 255, 0.25);
	color: #fff;
	cursor: pointer;
	transition:
		background-color 0.4s ease,
		color 0.4s ease;
}
.slider .slider-arrow:focus-visible {
	background: #f5f5f5;
	color: var(--red);
}
@media (hover: hover) {
	.slider .slider-arrow:hover {
		background: #f5f5f5;
		color: var(--red);
	}
}
.slider .slider-arrow--prev {
	left: 56px;
}
.slider .slider-arrow--next {
	right: 56px;
}

@media (max-width: 1199px) {
	.slider .slider-caption {
		font-size: 40px;
	}
}
@media (max-width: 991px) {
	.slider .slider-info {
		bottom: 70px;
	}
	.slider .slider-caption {
		max-width: 420px;
		font-size: 30px;
	}
}
/* Phones: portrait photos, caption low on the left over a bottom shade. */
@media (max-width: 767px) {
	.slider .slider-arrow {
		display: none;
	}
	.slider .slider-shade,
	.slider .slider-item--right .slider-shade {
		background: linear-gradient(0deg, rgba(12, 16, 22, 0.75), rgba(12, 16, 22, 0) 60%);
	}
	.slider .slider-item {
		aspect-ratio: auto;
		height: 400px;
	}
	.slider .slider-info {
		bottom: 70px;
		align-items: flex-end;
	}
	.slider .slider-caption {
		font-size: 28px;
	}
	.slider .slider-item--right .slider-text {
		align-items: flex-start;
		margin-left: 0;
	}
	.slider .slider-text {
		gap: 20px;
	}
	.slider .slider-cta {
		padding: 13px 24px;
		font-size: 14px;
	}
}

/* Variant "center" (slider_variant in site.json): caption and button centred a bit below the
   middle, the caption sized with the window; a horizontal band shade behind it instead of the side shade. */
.slider--center .slider-shade,
.slider--center .slider-item--right .slider-shade {
	background:
		linear-gradient(0deg, rgba(12, 16, 22, 0.7), rgba(12, 16, 22, 0) 180px),
		linear-gradient(180deg, rgba(12, 16, 22, 0) 25%, rgba(12, 16, 22, 0.4) 55%, rgba(12, 16, 22, 0) 85%);
}
.slider--center .slider-info {
	justify-content: center;
	align-items: center;
	padding-top: 150px; /* centres caption and button 75px below the middle of the area above the bottom shade */
}
.slider--center .slider-text,
.slider--center .slider-item--right .slider-text {
	align-items: center;
	margin: 0;
}
.slider--center .slider-caption {
	max-width: 100%;
	margin: 0;
	font-size: clamp(30px, 3.8125vw, 61px); /* 61px from 1600px wide */
	font-weight: 600;
	line-height: 1.1;
	text-align: center;
	text-shadow: 0 2px 12px rgba(0, 0, 0, 0.35);
}
.slider--center .slider-item--shift .slider-item-img img {
	object-position: 64.5% 50%;
}
/* Lower sliders (tablets, phones): only a small shift, so caption and button stay inside the slide. */
@media (max-width: 991px) {
	.slider--center .slider-info {
		padding-top: 40px;
	}
}
/* Phones: caption and button as low as on desktops (padding-top above), below the slide's middle. */
@media (max-width: 767px) {
	.slider--center .slider-info {
		padding-top: 150px;
		align-items: center;
	}
	.slider--center .slider-text,
	.slider--center .slider-item--right .slider-text {
		align-items: center;
	}
	.slider--center .slider-caption {
		font-size: 31.5px;
	}
	.slider--center .slider-item--shift .slider-item-img img {
		object-position: 50% 50%;
	}
}
/* Narrow phones: a little smaller, so «контейнерные перевозки» stays on one line down to 355px. */
@media (max-width: 399px) {
	.slider--center .slider-caption {
		font-size: 28px;
	}
}

/* css/block-css/services.css */
/* Service cards (blocks/services/card.liquid): photo with a dark bottom gradient, title at the
   bottom left. Hover: the photo darkens, the title lifts and a short line grows under it. */
.service-card {
	position: relative;
	display: block;
	aspect-ratio: 16 / 7.5;
	overflow: hidden;
	border-radius: 4px;
	background-color: #2a323c;
	color: #fff;
}
.service-card:focus {
	color: #fff;
	text-decoration: none;
}
@media (hover: hover) {
	.service-card:hover {
		color: #fff;
		text-decoration: none;
	}
}
.service-card__img {
	position: absolute;
	inset: 0;
	background-size: cover;
	background-position: center;
}
.service-card__img::before,
.service-card__img::after {
	content: '';
	position: absolute;
	inset: 0;
}
.service-card__img::before {
	background: linear-gradient(0deg, rgba(12, 16, 22, 0.82) 0%, rgba(12, 16, 22, 0.35) 45%, rgba(12, 16, 22, 0.08) 100%);
}
/* Extra shade shown on hover. */
.service-card__img::after {
	background: linear-gradient(0deg, rgba(12, 16, 22, 0.55) 0%, rgba(12, 16, 22, 0.35) 55%, rgba(12, 16, 22, 0) 90%);
	opacity: 0;
	transition: opacity 0.45s ease;
}
.service-card__body {
	position: absolute;
	z-index: 1;
	left: 28px;
	right: 28px;
	bottom: 28px;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 12px;
	transition: transform 0.45s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.service-card__title {
	font-size: 24px;
	line-height: 1.2;
	font-weight: 600;
	text-wrap: balance;
}
.service-card__line {
	display: block;
	width: 0;
	height: 2px;
	background-color: #fff;
	transition: width 0.45s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.service-card:focus .service-card__img::after {
	opacity: 1;
}
@media (hover: hover) {
	.service-card:hover .service-card__img::after {
		opacity: 1;
	}
}
.service-card:focus .service-card__body {
	transform: translateY(-8px);
}
@media (hover: hover) {
	.service-card:hover .service-card__body {
		transform: translateY(-8px);
	}
}
.service-card:focus .service-card__line {
	width: 48px;
}
@media (hover: hover) {
	.service-card:hover .service-card__line {
		width: 48px;
	}
}

@media (max-width: 991px) {
	.service-card__body {
		left: 20px;
		right: 20px;
		bottom: 18px;
	}
	.service-card__title {
		font-size: 20px;
	}
}
/* Phones: smaller cards, two per row from 480px, one below (wider). The space between them is in
   headings.css. */
@media (max-width: 767px) {
	.service-card {
		aspect-ratio: 4 / 3;
	}
	.service-card__body {
		left: 16px;
		right: 16px;
		bottom: 16px;
	}
	.service-card__title {
		font-size: 17px;
	}
}
@media (max-width: 479px) {
	.service-card {
		aspect-ratio: 16 / 9;
	}
	.service-card__title {
		font-size: 18px;
	}
}
/* Cards two per row, one below 480px. */
.services-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	column-gap: 30px;
}
@media (max-width: 767px) {
	.services-grid {
		column-gap: 12px;
	}
}
/* Below 480px: one per row, inset to 36px from the screen edges (16px inside the container's 20px
   padding on phones, base.css). */
@media (max-width: 479px) {
	.services-grid {
		grid-template-columns: minmax(0, 1fr);
		margin-left: 16px;
		margin-right: 16px;
	}
}

/* css/block-css/partners.css */
/* Clients: a band with a logo carousel (Embla, init in assets/js/site.js; 5 logos in a row, 4 / 3 / 2
   on narrower screens), arrows below it. */
.partners {
	background-color: #f5f5f5;
}
.partners .logos-slider {
	overflow: hidden;
}
.partners .logos-track {
	display: flex;
	touch-action: pan-y pinch-zoom;
	user-select: none;
}
.partners .logo {
	flex: 0 0 20%;
	min-width: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	height: 120px;
	padding: 0 28px;
}
.partners .logo img {
	display: block;
	width: auto;
	max-width: 100%;
	max-height: 64px;
	margin: 0;
	object-fit: contain;
	-webkit-user-drag: none;
	user-select: none;
}
.partners .logos-nav {
	display: flex;
	justify-content: center;
	gap: 24px;
	margin-top: 8px;
}
.partners .logos-arrow {
	display: block;
	padding: 0;
	border: 0;
	background: none;
	color: inherit;
	font: inherit;
	cursor: pointer;
}
@media (max-width: 991px) {
	.partners .logo {
		flex-basis: 25%;
	}
}
@media (max-width: 767px) {
	.partners .logo {
		flex-basis: calc(100% / 3);
		height: 100px;
		padding: 0 16px;
	}
	.partners .logo img {
		max-height: 52px;
	}
}
@media (max-width: 479px) {
	.partners .logo {
		flex-basis: 50%;
	}
}

/* css/block-css/text-block.css */
.text-block p{
	line-height: 1.5;
}
/* Photos have rounded corners like the cards and gallery photos. */
.text-block img{
	border-radius: 4px;
}

/* css/block-css/page.css */
/* Content pages (layouts/page.liquid: О нас, the legal texts): the text column and what Markdown or
   HTML content puts in it. */
/* Photos have rounded corners like the cards and gallery photos, no frame. */
.page img {
	border-radius: 4px;
}
/* Long words and addresses (e.g. URLs in the legal texts) wrap rather than widen the page on narrow
   phones. */
.page .about-main {
	overflow-wrap: break-word;
}
.page .about-main p {
	margin-bottom: 20px;
}
.page .about-main h4 {
	line-height: 1.3;
	margin-bottom: 15px;
}
.page .about-main table {
	margin-bottom: 10px;
}
.page .about-main img {
	position: relative;
	z-index: 10;
}
.page .about-main ul {
	margin: 0 0 10px;
	padding-left: 20px;
}
/* A legal text's edition date (front matter `edition`), above the text on the right; also shown in
   the request popup, which loads the page's content. */
.page-edition {
	color: #888;
	font-size: 14px;
	text-align: right;
}

/* css/block-css/features.css */
/* "Почему мы": four points, each an icon in a light grey circle, a title and a line of text. */
/* One per row on phones, two from 768px, four from 992px. */
.features .feature-row {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	column-gap: 30px;
}
@media (min-width: 768px) {
	.features .feature-row {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}
@media (min-width: 992px) {
	.features .feature-row {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}
.features .feature-item {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 14px;
	text-align: center;
}
.features .feature-item__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 76px;
	height: 76px;
	border-radius: 2px;
	background-color: #f5f5f5;
}
.features .feature-item__icon img {
	display: block;
	width: 40px;
	height: 40px;
	margin: 0;
}
.features .feature-item__title {
	margin: 0;
	font-size: 17px;
	line-height: 1.35;
	font-weight: 600;
	text-wrap: balance;
}
.features .feature-item p {
	margin: 0;
	max-width: 320px;
	font-size: 14px;
	line-height: 1.6;
	color: #555;
}

/* css/block-css/photogallery.css */
/* Home projects: photo grid, 4 columns (2 on phones). The first photo spans 2×2 and the last one
   2 columns, so the 8 photos fill the grid without gaps. */
.projects-grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	grid-auto-rows: 190px;
	grid-auto-flow: dense;
	gap: 12px;
}
.projects-grid__item {
	position: relative;
	display: block;
	overflow: hidden;
	border-radius: 4px;
	background-color: #e9e9e9;
}
.projects-grid__item:first-child {
	grid-column: span 2;
	grid-row: span 2;
}
.projects-grid__item:last-child {
	grid-column: span 2;
}
.projects-grid__img {
	position: absolute;
	inset: 0;
	background-size: cover;
	background-position: center;
	transition: transform 0.7s cubic-bezier(0.2, 0.7, 0.2, 1);
}
/* A light tint that clears on hover while the photo zooms in. */
.projects-grid__item::after {
	content: '';
	position: absolute;
	inset: 0;
	background: rgba(12, 16, 22, 0.18);
	transition: opacity 0.3s ease;
}
/* .is-hovered: the photo viewer holds the hover state while it covers the tile (lightbox.js). */
.projects-grid__item.is-hovered .projects-grid__img,
.projects-grid__item:focus-visible .projects-grid__img {
	transform: scale(1.05);
}
@media (hover: hover) {
	.projects-grid__item:hover .projects-grid__img {
		transform: scale(1.05);
	}
}
.projects-grid__item.is-hovered::after,
.projects-grid__item:focus-visible::after {
	opacity: 0;
}
@media (hover: hover) {
	.projects-grid__item:hover::after {
		opacity: 0;
	}
}
@media (max-width: 991px) {
	.projects-grid {
		grid-auto-rows: 150px;
	}
}
@media (max-width: 767px) {
	.projects-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 8px;
	}
}

/* css/block-css/gallery.css */
/* «Примеры работ» (/gallery/): photo cards, two per row. The photo fills the card (slow zoom on
   hover), a dark gradient at the bottom carries the title and the route; a badge counts the
   photos. A card opens its project's photos in the viewer (lightbox.js). */
.gallery-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 24px;
}
.gallery-card {
	position: relative;
	display: block;
	aspect-ratio: 16 / 10;
	overflow: hidden;
	border-radius: 4px;
	background-color: #2a323c;
	color: #fff;
	text-decoration: none;
}
.gallery-card:focus {
	color: #fff;
	text-decoration: none;
}
@media (hover: hover) {
	.gallery-card:hover {
		color: #fff;
		text-decoration: none;
	}
}
.gallery-card__photo {
	position: absolute;
	inset: 0;
	background-size: cover;
	background-position: center;
	transition: transform 0.7s cubic-bezier(0.2, 0.7, 0.2, 1);
}
/* .is-hovered: the photo viewer holds the hover state while it covers the card (lightbox.js). */
.gallery-card.is-hovered .gallery-card__photo,
.gallery-card:focus-visible .gallery-card__photo {
	transform: scale(1.05);
}
@media (hover: hover) {
	.gallery-card:hover .gallery-card__photo {
		transform: scale(1.05);
	}
}
.gallery-card::after {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(0deg, rgba(12, 16, 22, 0.85) 0%, rgba(12, 16, 22, 0.4) 40%, rgba(12, 16, 22, 0) 70%);
	pointer-events: none;
}
.gallery-card__count {
	position: absolute;
	z-index: 1;
	top: 16px;
	right: 16px;
	display: flex;
	align-items: center;
	gap: 6px;
	padding: 5px 10px 5px 8px;
	border-radius: 3px;
	background: rgba(15, 18, 22, 0.72);
	font-size: 13px;
	font-weight: 500;
	line-height: 1;
}
.gallery-card__text {
	position: absolute;
	z-index: 1;
	left: 28px;
	right: 28px;
	bottom: 24px;
	display: flex;
	flex-direction: column;
	gap: 8px;
}
.gallery-card__title {
	font-family: 'Roboto Condensed', 'Roboto', Arial, sans-serif;
	font-size: 22px;
	line-height: 1.2;
	font-weight: 600;
	text-wrap: balance;
}
.gallery-card__route {
	font-size: 14px;
	line-height: 1.45;
	color: #d3d7dc;
}

@media (max-width: 767px) {
	.gallery-grid {
		grid-template-columns: minmax(0, 1fr);
		gap: 16px;
	}
	.gallery-card__text {
		left: 20px;
		right: 20px;
		bottom: 18px;
	}
	.gallery-card__title {
		font-size: 20px;
	}
}

/* css/block-css/service.css */
/* Service pages (layouts/service.liquid): a photo banner with the page title, then text or the
   blocks below. Spacing between blocks and heading styles are in headings.css. */

/* Banner: photo with dark gradients at the bottom and on the left, the title at the bottom left on
   the content edge. */
.service-hero {
	position: relative;
	height: clamp(280px, 32vw, 420px);
	overflow: hidden;
	background-color: #1a2330;
	color: #fff;
}
/* .service-hero in the selector: it must outrank common.css img[width][height] { height: auto }. */
.service-hero img.service-hero__img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	max-width: none;
	margin: 0;
	object-fit: cover;
}
.service-hero::after {
	content: '';
	position: absolute;
	inset: 0;
	background:
		linear-gradient(90deg, rgba(12, 16, 22, 0.45) 0%, rgba(12, 16, 22, 0.15) 45%, rgba(12, 16, 22, 0) 70%),
		linear-gradient(0deg, rgba(12, 16, 22, 0.7) 0%, rgba(12, 16, 22, 0.3) 55%, rgba(12, 16, 22, 0.12) 100%);
}
.service-hero__inner {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	height: 100%;
	padding-bottom: 52px;
}

/* Grey sections (section-block--band) on service pages. */
.service-band {
	background-color: #f5f5f5;
}

/* Intro: a lead sentence beside the first paragraphs. */
.service-intro {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(440px, 100%), 1fr));
	gap: 32px 64px;
}
.service-intro__lead {
	margin: 0;
	color: #222;
	font-size: 18px;
	line-height: 1.5;
	font-weight: 500;
	text-wrap: pretty;
}
.service-intro__text {
	display: flex;
	flex-direction: column;
	gap: 18px;
	font-size: 14px;
	line-height: 1.65;
	color: #444;
}
.service-intro__text p {
	margin: 0;
	text-wrap: pretty;
}

/* Key figures under the lead sentence (label above, value below). */
.service-facts {
	display: flex;
	flex-wrap: wrap;
	gap: 12px 40px;
	margin: 24px 0 0;
	padding-top: 16px;
	border-top: 1px solid #e6e6e6;
}
.service-facts div {
	display: flex;
	flex-direction: column;
	gap: 2px;
}
.service-facts dt {
	font-size: 12px;
	font-weight: 400;
	color: #888;
}
.service-facts dd {
	margin: 0;
	color: #222;
	font-family: 'Roboto Condensed', 'Roboto', Arial, sans-serif;
	font-size: 22px;
	font-weight: 600;
}

/* Tiles: short items in a grid; white in a grey band, grey on white. */
/* Four per row on desktops, two on tablets, one on phones. */
.service-tiles {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 16px;
}
@media (max-width: 991px) {
	.service-tiles {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}
@media (max-width: 479px) {
	.service-tiles {
		grid-template-columns: minmax(0, 1fr);
	}
}
.service-tile {
	padding: 22px 24px;
	border-radius: 4px;
	background-color: #f5f5f5;
	color: #222;
	font-size: 15px;
	line-height: 1.4;
	font-weight: 500;
}
.service-band .service-tile {
	background-color: #fff;
}
.service-note {
	max-width: 760px;
	margin-top: 0;
	font-size: 14px;
	line-height: 1.65;
	color: #444;
	text-wrap: pretty;
}

/* Steps: an icon in a circle and a line of text; numbered steps (01, 02…) sit under a dark rule.
   --4: four per row on desktops, for lists of four. */
.service-steps {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
	gap: 36px 40px;
}
@media (min-width: 992px) {
	.service-steps--4 {
		grid-template-columns: repeat(4, minmax(0, 1fr));
		gap: 36px 30px;
	}
}
.service-step__num {
	font-family: 'Roboto Condensed', 'Roboto', Arial, sans-serif;
	font-size: 14px;
	font-weight: 600;
	color: #999;
}
.service-step {
	display: flex;
	flex-direction: column;
	gap: 12px;
	padding-top: 18px;
	border-top: 2px solid #222;
}
.service-step:has(.service-step__icon) {
	gap: 16px;
	padding-top: 0;
	border-top: 0;
}
.service-step__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 52px;
	height: 52px;
	border-radius: 2px;
	background-color: #f5f5f5;
}
.service-band .service-step__icon {
	background-color: #fff;
}
.service-step__icon img {
	display: block;
	width: 28px;
	height: 28px;
	margin: 0;
}
.service-step p {
	margin: 0;
	color: #222;
	font-size: 14px;
	line-height: 1.6;
	text-wrap: pretty;
}

/* Spec cards: title, description and key figures at the bottom; white in a grey band, grey on white. */
.service-specs {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(340px, 100%), 1fr));
	gap: 24px;
}
.spec-card {
	display: flex;
	flex-direction: column;
	gap: 14px;
	padding: 28px;
	border-radius: 4px;
	background-color: #f5f5f5;
}
.service-band .spec-card {
	background-color: #fff;
}
.spec-card__title {
	margin: 0;
	color: #222;
	font-size: 20px;
	line-height: 1.2;
	font-weight: 600;
}
.spec-card p {
	margin: 0;
	font-size: 13px;
	line-height: 1.6;
	color: #555;
	text-wrap: pretty;
}
.spec-card__facts {
	display: flex;
	flex-wrap: wrap;
	gap: 12px 32px;
	margin: auto 0 0;
	padding-top: 16px;
	border-top: 1px solid #e6e6e6;
}
.spec-card__facts div {
	display: flex;
	flex-direction: column;
	gap: 2px;
}
.spec-card__facts dt {
	font-size: 12px;
	font-weight: 400;
	color: #888;
}
.spec-card__facts dd {
	margin: 0;
	color: #222;
	font-size: 14px;
	font-weight: 500;
}

@media (max-width: 767px) {
	.service-hero__inner {
		padding-bottom: 28px;
	}
	.service-intro {
		gap: 18px;
	}
	.service-intro__lead {
		font-size: 16px;
	}
	.service-steps {
		gap: 28px;
	}
	.spec-card {
		padding: 22px 20px;
	}
}

/* css/block-css/contacts.css */
/* Контакты: details and the request form side by side from 768px, the map under them. */
.contacts .contacts-grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	column-gap: 30px;
}
@media (min-width: 768px) {
	.contacts .contacts-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}
.contacts h4{
	text-transform: uppercase;
	font-weight: 600;
	margin-top: 20px;
	margin-bottom: 20px;
}
.contacts p{
	color: #616161;
	line-height: 21px;
}
.contacts ul{
	padding: 0;
	margin: 0;
	list-style: none;
}
.contacts ul li{
	padding-bottom: 1px;
}
.contacts ul li,
.contacts ul li a{
	color: #616161;
}
/* The map arrives after the page (contacts.liquid): its box keeps the space, so nothing moves, and
   shows a skeleton (a pale block with a faint pin and a sweeping highlight) until the map has
   loaded over it. Rounded like the site's photos. */
.contacts .contacts-map {
	position: relative;
	min-height: 400px;
	overflow: hidden;
	border-radius: 4px;
	background: #eceef1 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 24 24' fill='none' stroke='%23c9cdd3' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 11a3 3 0 1 0 6 0a3 3 0 0 0 -6 0'/%3E%3Cpath d='M17.657 16.657l-4.243 4.243a2 2 0 0 1 -2.827 0l-4.244 -4.243a8 8 0 1 1 11.314 0z'/%3E%3C/svg%3E") center no-repeat;
}
.contacts .contacts-map::before {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(100deg, rgba(255, 255, 255, 0) 30%, rgba(255, 255, 255, 0.55) 50%, rgba(255, 255, 255, 0) 70%);
	transform: translateX(-100%);
	animation: contacts-map-sweep 1.6s ease-in-out infinite;
}
.contacts .contacts-map.is-loaded::before {
	display: none;
}
.contacts .contacts-map iframe {
	position: relative; /* over the skeleton */
	display: block;
}
@keyframes contacts-map-sweep {
	to {
		transform: translateX(100%);
	}
}
@media (prefers-reduced-motion: reduce) {
	.contacts .contacts-map::before {
		animation: none;
		opacity: 0;
	}
}

/* css/block-css/not-found.css */
/* Not-found page (src/404.liquid): centred «404» in large red figures, the heading (headings.css),
   a line of text and a red button home. */
.not-found {
	padding: 64px 0 112px;
}
.not-found__inner {
	display: flex;
	flex-direction: column;
	align-items: center;
	max-width: 640px;
	text-align: center;
}
.not-found__code {
	color: var(--red);
	font-family: 'Roboto Condensed', 'Roboto', Arial, sans-serif;
	font-size: clamp(120px, 22vw, 200px);
	font-weight: 700;
	line-height: 0.9;
	letter-spacing: -0.02em;
}
.not-found__text {
	margin: 16px 0 0;
	color: #666;
	font-size: 17px;
	line-height: 1.55;
	text-wrap: pretty;
}
.not-found__button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 52px;
	margin-top: 36px;
	padding: 0 36px;
	background-color: var(--red);
	color: #fff;
	font-family: 'Roboto Condensed', 'Roboto', Arial, sans-serif;
	font-size: 16px;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}
.not-found__button:focus {
	color: #fff;
	text-decoration: none;
}
@media (hover: hover) {
	.not-found__button:hover {
		color: #fff;
		text-decoration: none;
	}
}
@media (max-width: 767px) {
	.not-found {
		padding: 40px 0 80px;
	}
}

/* css/block-css/notice-page.css */
/* A short notice in the middle of the page (src/pages/cookie-status.liquid): the title
   (headings.css) and a line of text, or a single larger statement, centred, with the not-found
   page's spacing. */
.notice-page {
	padding: 64px 0 112px;
}
.notice-page__inner {
	display: flex;
	flex-direction: column;
	align-items: center;
	max-width: 640px;
	text-align: center;
}
.notice-page__text {
	margin: 12px 0 0;
	color: #666;
	font-size: 17px;
	line-height: 1.55;
	text-wrap: pretty;
}
/* A single statement without a heading (analytics switched off on the whole site). */
.notice-page__statement {
	margin: 0;
	color: #222;
	font-family: 'Roboto Condensed', 'Roboto', Arial, sans-serif;
	font-size: clamp(22px, 3.2vw, 30px);
	font-weight: 600;
	line-height: 1.3;
	text-wrap: balance;
}
@media (max-width: 767px) {
	.notice-page {
		padding: 40px 0 80px;
	}
}

/* vendor/photoswipe/photoswipe.css */
/*! PhotoSwipe main CSS by Dmytro Semenov | photoswipe.com */

.pswp {
  --pswp-bg: #000;
  --pswp-placeholder-bg: #222;
  

  --pswp-root-z-index: 100000;
  
  --pswp-preloader-color: rgba(79, 79, 79, 0.4);
  --pswp-preloader-color-secondary: rgba(255, 255, 255, 0.9);
  
  /* defined via js:
  --pswp-transition-duration: 333ms; */
  
  --pswp-icon-color: #fff;
  --pswp-icon-color-secondary: #4f4f4f;
  --pswp-icon-stroke-color: #4f4f4f;
  --pswp-icon-stroke-width: 2px;

  --pswp-error-text-color: var(--pswp-icon-color);
}


/*
	Styles for basic PhotoSwipe (pswp) functionality (sliding area, open/close transitions)
*/

.pswp {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: var(--pswp-root-z-index);
	display: none;
	touch-action: none;
	outline: 0;
	opacity: 0.003;
	contain: layout style size;
	-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

/* Prevents focus outline on the root element,
  (it may be focused initially) */
.pswp:focus {
  outline: 0;
}

.pswp * {
  box-sizing: border-box;
}

.pswp img {
  max-width: none;
}

.pswp--open {
	display: block;
}

.pswp,
.pswp__bg {
	transform: translateZ(0);
	will-change: opacity;
}

.pswp__bg {
  opacity: 0.005;
	background: var(--pswp-bg);
}

.pswp,
.pswp__scroll-wrap {
	overflow: hidden;
}

.pswp__scroll-wrap,
.pswp__bg,
.pswp__container,
.pswp__item,
.pswp__content,
.pswp__img,
.pswp__zoom-wrap {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

.pswp__img,
.pswp__zoom-wrap {
	width: auto;
	height: auto;
}

.pswp--click-to-zoom.pswp--zoom-allowed .pswp__img {
	cursor: -webkit-zoom-in;
	cursor: -moz-zoom-in;
	cursor: zoom-in;
}

.pswp--click-to-zoom.pswp--zoomed-in .pswp__img {
	cursor: move;
	cursor: -webkit-grab;
	cursor: -moz-grab;
	cursor: grab;
}

.pswp--click-to-zoom.pswp--zoomed-in .pswp__img:active {
  cursor: -webkit-grabbing;
  cursor: -moz-grabbing;
  cursor: grabbing;
}

/* :active to override grabbing cursor */
.pswp--no-mouse-drag.pswp--zoomed-in .pswp__img,
.pswp--no-mouse-drag.pswp--zoomed-in .pswp__img:active,
.pswp__img {
	cursor: -webkit-zoom-out;
	cursor: -moz-zoom-out;
	cursor: zoom-out;
}


/* Prevent selection and tap highlights */
.pswp__container,
.pswp__img,
.pswp__button,
.pswp__counter {
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

.pswp__item {
	/* z-index for fade transition */
	z-index: 1;
	overflow: hidden;
}

.pswp__hidden {
	display: none !important;
}

/* Allow to click through pswp__content element, but not its children */
.pswp__content {
  pointer-events: none;
}
.pswp__content > * {
  pointer-events: auto;
}


/*

  PhotoSwipe UI

*/

/*
	Error message appears when image is not loaded
	(JS option errorMsg controls markup)
*/
.pswp__error-msg-container {
  display: grid;
}
.pswp__error-msg {
	margin: auto;
	font-size: 1em;
	line-height: 1;
	color: var(--pswp-error-text-color);
}

/*
class pswp__hide-on-close is applied to elements that
should hide (for example fade out) when PhotoSwipe is closed
and show (for example fade in) when PhotoSwipe is opened
 */
.pswp .pswp__hide-on-close {
	opacity: 0.005;
	will-change: opacity;
	transition: opacity var(--pswp-transition-duration) cubic-bezier(0.4, 0, 0.22, 1);
	z-index: 10; /* always overlap slide content */
	pointer-events: none; /* hidden elements should not be clickable */
}

/* class pswp--ui-visible is added when opening or closing transition starts */
.pswp--ui-visible .pswp__hide-on-close {
	opacity: 1;
	pointer-events: auto;
}

/* <button> styles, including css reset */
.pswp__button {
	position: relative;
	display: block;
	width: 50px;
	height: 60px;
	padding: 0;
	margin: 0;
	overflow: hidden;
	cursor: pointer;
	background: none;
	border: 0;
	box-shadow: none;
	opacity: 0.85;
	-webkit-appearance: none;
	-webkit-touch-callout: none;
}

.pswp__button:hover,
.pswp__button:active,
.pswp__button:focus {
  transition: none;
  padding: 0;
  background: none;
  border: 0;
  box-shadow: none;
  opacity: 1;
}

.pswp__button:disabled {
  opacity: 0.3;
  cursor: auto;
}

.pswp__icn {
  fill: var(--pswp-icon-color);
  color: var(--pswp-icon-color-secondary);
}

.pswp__icn {
  position: absolute;
  top: 14px;
  left: 9px;
  width: 32px;
  height: 32px;
  overflow: hidden;
  pointer-events: none;
}

.pswp__icn-shadow {
  stroke: var(--pswp-icon-stroke-color);
  stroke-width: var(--pswp-icon-stroke-width);
  fill: none;
}

.pswp__icn:focus {
	outline: 0;
}

/*
	div element that matches size of large image,
	large image loads on top of it,
	used when msrc is not provided
*/
div.pswp__img--placeholder,
.pswp__img--with-bg {
	background: var(--pswp-placeholder-bg);
}

.pswp__top-bar {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 60px;
	display: flex;
  flex-direction: row;
  justify-content: flex-end;
	z-index: 10;

	/* allow events to pass through top bar itself */
	pointer-events: none !important;
}
.pswp__top-bar > * {
  pointer-events: auto;
  /* this makes transition significantly more smooth,
     even though inner elements are not animated */
  will-change: opacity;
}


/*

  Close button

*/
.pswp__button--close {
  margin-right: 6px;
}


/*

  Arrow buttons

*/
.pswp__button--arrow {
  position: absolute;
  top: 0;
  width: 75px;
  height: 100px;
  top: 50%;
  margin-top: -50px;
}

.pswp__button--arrow:disabled {
  display: none;
  cursor: default;
}

.pswp__button--arrow .pswp__icn {
  top: 50%;
  margin-top: -30px;
  width: 60px;
  height: 60px;
  background: none;
  border-radius: 0;
}

.pswp--one-slide .pswp__button--arrow {
  display: none;
}

/* hide arrows on touch screens */
.pswp--touch .pswp__button--arrow {
  visibility: hidden;
}

/* show arrows only after mouse was used */
.pswp--has_mouse .pswp__button--arrow {
  visibility: visible;
}

.pswp__button--arrow--prev {
  right: auto;
  left: 0px;
}

.pswp__button--arrow--next {
  right: 0px;
}
.pswp__button--arrow--next .pswp__icn {
  left: auto;
  right: 14px;
  /* flip horizontally */
  transform: scale(-1, 1);
}

/*

  Zoom button

*/
.pswp__button--zoom {
  display: none;
}

.pswp--zoom-allowed .pswp__button--zoom {
  display: block;
}

/* "+" => "-" */
.pswp--zoomed-in .pswp__zoom-icn-bar-v {
  display: none;
}


/*

  Loading indicator

*/
.pswp__preloader {
  position: relative;
  overflow: hidden;
  width: 50px;
  height: 60px;
  margin-right: auto;
}

.pswp__preloader .pswp__icn {
  opacity: 0;
  transition: opacity 0.2s linear;
  animation: pswp-clockwise 600ms linear infinite;
}

.pswp__preloader--active .pswp__icn {
  opacity: 0.85;
}

@keyframes pswp-clockwise {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}


/*

  "1 of 10" counter

*/
.pswp__counter {
  height: 30px;
  margin-top: 15px;
  margin-inline-start: 20px;
  font-size: 14px;
  line-height: 30px;
  color: var(--pswp-icon-color);
  text-shadow: 1px 1px 3px var(--pswp-icon-color-secondary);
  opacity: 0.85;
}

.pswp--one-slide .pswp__counter {
  display: none;
}

/* css/lightbox.css */
/* Photo viewer (assets/js/lightbox.js): PhotoSwipe's interface (assets/vendor/photoswipe/photoswipe.css)
   with our line icons, counter and a caption over the bottom of the photo. */
.pswp.lightbox {
	--pswp-bg: #0e1013;
	--pswp-placeholder-bg: transparent; /* no dark box while a photo loads */
	font-family: 'Roboto', Arial, sans-serif;
}
.pswp.lightbox .pswp__img {
	cursor: default;
}
.pswp.lightbox.pswp--zoom-allowed .pswp__img {
	cursor: zoom-in;
}
.pswp.lightbox.pswp--zoomed-in .pswp__img {
	cursor: grab;
}
.pswp.lightbox.pswp--zoomed-in .pswp__img:active {
	cursor: grabbing;
}

/* Buttons: thin white line icons; the arrows on translucent squares. */
.pswp.lightbox .pswp__button {
	opacity: 0.8;
}
@media (hover: hover) {
	.pswp.lightbox .pswp__button:hover {
		opacity: 1;
	}
}
.pswp.lightbox .lightbox-icn {
	fill: none;
	stroke: #fff;
	stroke-width: 1.8;
	stroke-linecap: round;
	stroke-linejoin: round;
}
.pswp.lightbox .pswp__button--close .lightbox-icn,
.pswp.lightbox .pswp__button--zoom .lightbox-icn {
	top: 18px;
	left: 18px;
	width: 24px;
	height: 24px;
}
.pswp.lightbox.pswp--zoomed-in .lightbox-icn__plus {
	display: none;
}
.pswp.lightbox .pswp__button--arrow .lightbox-icn {
	left: 20px;
	width: 48px;
	height: 48px;
	margin-top: -24px;
}
.pswp.lightbox .pswp__button--arrow--next .lightbox-icn {
	left: auto;
	right: 20px;
}
.pswp.lightbox .lightbox-icn__ring {
	stroke: none;
	fill: #fff;
	fill-opacity: 0.2;
	transition: fill-opacity 0.2s ease;
}
@media (hover: hover) {
	.pswp.lightbox .pswp__button--arrow:hover .lightbox-icn__ring {
		fill-opacity: 0.35;
	}
}
.pswp.lightbox .pswp__counter {
	height: 60px;
	margin: 0 0 0 24px;
	color: #b8bdc3;
	font-size: 14px;
	line-height: 60px;
	font-variant-numeric: tabular-nums;
	text-shadow: none;
	opacity: 1;
}

/* Caption: over the bottom of the photo on a dark gradient, «Title. Route». */
.pswp.lightbox .lightbox-caption {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	padding: 56px 24px 24px;
	background: linear-gradient(0deg, rgba(14, 16, 19, 0.88), rgba(14, 16, 19, 0));
	color: #d3d7dc;
	font-size: 16px;
	line-height: 1.55;
	text-align: center;
	text-wrap: pretty;
	pointer-events: none;
}
.pswp.lightbox .lightbox-caption[hidden] {
	display: none;
}
.pswp.lightbox .lightbox-caption b {
	color: #fff;
	font-family: 'Roboto Condensed', 'Roboto', Arial, sans-serif;
	font-weight: 600;
}
.pswp.lightbox :focus:not(:focus-visible) {
	outline: none;
}
@media (max-width: 640px) {
	.pswp.lightbox .lightbox-caption {
		padding: 40px 16px 16px;
		font-size: 14px;
	}
	/* Phones swipe between photos. */
	.pswp.lightbox .pswp__button--arrow {
		display: none;
	}
}

/* The card that focus returned to after closing: no focus zoom, only the hover one (lightbox.js). */
a[data-lightbox-returned]:not(:hover):not(.is-hovered) [data-lightbox-thumb] {
	transform: none !important;
}

/* A card's gradient and text, held over the card while its photo flies out and back
   (lightbox.js). Above the viewer; the card rule's own size and ratio don't apply. */
.gallery-card.lightbox-overlay {
	position: fixed;
	z-index: 100001;
	aspect-ratio: auto;
	background: transparent;
	pointer-events: none;
}

/* css/block-css/site-footer.css */
/* Footer: contacts (a large email link, address, hours) and three link columns, then copyright and
   the developer credit. Links fade to red on hover, as on the original site (not the email). */
.site-footer {
	padding: 64px 0 28px;
	background-color: #333;
	color: #cfcfcf;
	font-size: 14px;
	line-height: 1.55;
}
/* Contacts above the link columns; side by side (1/3 + 2/3 of a 12-column grid) from 992px. The
   three link columns sit in a row from 768px. */
.site-footer .footer-row,
.site-footer .footer-columns {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	column-gap: 30px;
}
@media (min-width: 768px) {
	.site-footer .footer-columns {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}
@media (min-width: 992px) {
	.site-footer .footer-row {
		grid-template-columns: repeat(12, minmax(0, 1fr));
	}
	.site-footer .footer-contacts {
		grid-column: span 4;
	}
	.site-footer .footer-columns-wrap {
		grid-column: span 8;
	}
}
.site-footer .footer-block {
	margin-bottom: 40px;
}
.site-footer a {
	color: #cfcfcf;
}
/* Link-column links turn red on hover (.hover-red, utilities.css); the email and credit have
   their own hover. */
.site-footer a:focus {
	text-decoration: none;
}
@media (hover: hover) {
	.site-footer a:hover {
		text-decoration: none;
	}
}

/* Contacts */
.site-footer .footer-contacts__label {
	margin: 0 0 6px;
	font-size: 13px;
	color: #9a9a9a;
}
.site-footer .footer-contacts__email {
	display: inline-block;
	padding-bottom: 4px;
	border-bottom: 2px solid rgba(255, 255, 255, 0.25);
	color: #fff;
	font-size: clamp(22px, 2.4vw, 28px);
	line-height: 1.15;
	font-weight: 600;
	transition: border-color 0.2s;
}
/* The email stays white on hover, only its underline brightens. */
.site-footer .footer-contacts__email:focus {
	color: #fff;
	border-bottom-color: #fff;
}
@media (hover: hover) {
	.site-footer .footer-contacts__email:hover {
		color: #fff;
		border-bottom-color: #fff;
	}
}
.site-footer .footer-contacts__info {
	margin: 28px 0 0;
}

/* Link columns */
.site-footer .footer-block h4 {
	margin: 0 0 14px;
	color: #fff;
	font-size: 13px;
	line-height: 1.4;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.04em;
}
/* The heading's button is for phones only (see below); wider screens show its plain label. */
.site-footer .footer-links__toggle {
	display: none;
}
.site-footer .footer-list {
	margin: 0;
	padding: 0;
	list-style: none;
}
.site-footer .footer-list li + li {
	margin-top: 8px;
}

/* Copyright and credit */
.site-footer .footer-bottom {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 8px 24px;
	margin-top: 8px;
	padding-top: 20px;
	border-top: 1px solid #4a4a4a;
	font-size: 13px;
	color: #9a9a9a;
}
.site-footer .copyright {
	margin: 0;
}
.site-footer .dev,
.site-footer .dev:focus {
	color: #9a9a9a;
}
@media (hover: hover) {
	.site-footer .dev:hover {
		color: #9a9a9a;
	}
}
.site-footer .dev img {
	margin: 0 0 0 3px;
	vertical-align: baseline;
}
@media (max-width: 767px) {
	.site-footer {
		padding-top: 40px;
	}
	.site-footer .footer-block {
		margin-bottom: 28px;
	}
	.site-footer .footer-bottom {
		flex-direction: column;
		text-align: center;
	}
	/* Link columns fold: a row per heading, chevron on the right, links shown under an opened one. */
	.site-footer .footer-links {
		margin-bottom: 0;
	}
	/* Headings in normal case, a size up from the links under them. */
	.site-footer .footer-links h4 {
		margin: 0;
		font-size: 15px;
		letter-spacing: normal;
		text-transform: none;
	}
	.site-footer .footer-links__label {
		display: none;
	}
	.site-footer .footer-links__toggle {
		display: flex;
		align-items: center;
		justify-content: space-between;
		width: 100%;
		padding: 14px 0;
		border: 0;
		background: none;
		color: inherit;
		font: inherit;
		text-align: left;
		cursor: pointer;
	}
	.site-footer .footer-links__chevron {
		flex: none;
		transition: transform 0.2s ease;
	}
	.site-footer .footer-links__toggle[aria-expanded='true'] .footer-links__chevron {
		transform: rotate(180deg);
	}
	.site-footer .footer-links .footer-list {
		display: none;
		padding-bottom: 16px;
	}
	.site-footer .footer-links.is-open .footer-list {
		display: block;
	}
}

/* css/block-css/order-form.css */
/* Request form (partials/order-form.liquid) and the «Заказать перевозку» popup
   (partials/order-dialog.liquid, assets/js/order-form.js). */

/* Popup: a white box over a dimmed page; the box scrolls when it is taller than the window. */
.order-dialog {
	width: calc(100% - 32px);
	max-width: 640px;
	max-height: calc(100% - 48px);
	margin: auto;
	padding: 30px 36px 30px;
	border: 0;
	border-radius: 6px;
	background: #fff;
	box-shadow: 0 24px 64px rgba(0, 0, 0, 0.25);
	color: #222;
	overflow-y: auto;
}
.order-dialog::backdrop {
	background: rgba(15, 18, 22, 0.6);
}
/* Popup open: the page behind keeps its scrollbar but doesn't scroll (order-form.js). */
.order-dialog {
	overscroll-behavior: contain;
}
.order-dialog__close {
	position: absolute;
	top: 10px;
	right: 10px;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: none;
	color: #999;
	cursor: pointer;
}
.order-dialog__close:focus-visible {
	background: #f3f3f3;
	color: #222;
}
@media (hover: hover) {
	.order-dialog__close:hover {
		background: #f3f3f3;
		color: #222;
	}
}
.order-dialog__title {
	margin: 0 0 16px;
	padding-right: 32px;
	font-size: 24px;
	line-height: 1.15;
	font-weight: 700;
	text-transform: uppercase;
}
.order-dialog__text {
	margin: 0 0 18px;
	font-size: 14px;
	line-height: 1.6;
	color: #555;
}
.order-dialog__button {
	padding: 12px 22px;
	border: 1px solid #ccc;
	border-radius: 4px;
	background: #fff;
	font-size: 15px;
	font-weight: 500;
	cursor: pointer;
}
@media (hover: hover) {
	.order-dialog__button:hover {
		background: #f3f3f3;
	}
}
.order-dialog__back {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin: -8px 0 12px -4px;
	padding: 8px 10px 8px 4px;
	border: 0;
	border-radius: 4px;
	background: none;
	color: #555;
	font-size: 14px;
	font-weight: 500;
	cursor: pointer;
}
@media (hover: hover) {
	.order-dialog__back:hover {
		background: #f3f3f3;
		color: #222;
	}
}
/* Legal text loaded from its page (the page's <h1> and content). */
.order-dialog__doc {
	font-size: 14px;
	line-height: 1.65;
	color: #444;
}
.order-dialog__doc-title {
	margin: 0 0 16px;
	padding-right: 32px;
	color: #222;
	font-size: 24px;
	line-height: 1.2;
	font-weight: 700;
	text-wrap: balance;
}
.order-dialog__doc h2 {
	margin: 22px 0 10px;
	font-size: 18px;
	font-weight: 600;
}
.order-dialog__doc p,
.order-dialog__doc ul,
.order-dialog__doc ol {
	margin: 0 0 12px;
}
.order-dialog__doc > :last-child {
	margin-bottom: 0;
}

/* Form */
.order-form {
	display: flex;
	flex-direction: column;
	gap: 12px;
}
.order-form[hidden] {
	display: none;
}
.order-form__trap {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	opacity: 0;
}
.order-form__field {
	display: flex;
	flex-direction: column;
	gap: 4px;
	margin: 0;
	font-weight: 400;
}
.order-form input[type='text'],
.order-form input[type='email'],
.order-form textarea,
.order-form__phone {
	width: 100%;
	border: 1px solid transparent;
	border-radius: 4px;
	background: #f3f3f3;
	color: #222;
	font: inherit;
	font-size: 14px;
	outline: none;
	transition:
		background-color 0.15s,
		border-color 0.15s;
}
.order-form ::placeholder {
	color: #767676;
	opacity: 1;
}
.order-form input[type='text'],
.order-form input[type='email'] {
	height: 40px;
	padding: 0 12px;
}
.order-form textarea {
	padding: 9px 12px;
	line-height: 1.5;
	resize: vertical;
}
/* Grey fields; white with a dark border while typing; pale red when wrong. */
.order-form input.is-invalid,
.order-form .order-form__phone.is-invalid {
	border-color: #e8b4b4;
	background: #fdecec;
}
.order-form input[type='text']:focus,
.order-form input[type='email']:focus,
.order-form textarea:focus,
.order-form .order-form__phone:focus-within {
	border-color: #555;
	background: #fff;
}
/* Phone: a fixed "+7" in front of the number once the field is in use. */
.order-form__phone {
	display: flex;
	align-items: center;
	gap: 5px;
	height: 40px;
	padding: 0 12px;
}
.order-form__prefix {
	display: none;
}
.order-form__phone.has-prefix .order-form__prefix {
	display: inline;
}
.order-form__phone input {
	flex: 1;
	min-width: 0;
	height: 100%;
	padding: 0;
	border: 0;
	background: transparent;
	color: #222;
	font: inherit;
	font-size: 14px;
	outline: none;
}
.order-form__row {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr));
	gap: 12px;
}
.order-form__error {
	margin-top: -6px;
	color: #c62828;
	font-size: 12px;
}
.order-form__error:empty {
	display: none;
}
.order-form__field .order-form__error {
	margin-top: 0;
}
.order-form__error--hint {
	color: #888;
}
.order-form__error--hint.is-error {
	color: #c62828;
}
.order-form__agree {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	margin: 0;
	color: #444;
	font-size: 13px;
	font-weight: 400;
	line-height: 1.5;
	cursor: pointer;
}
.order-form__agree input {
	flex: none;
	width: 16px;
	height: 16px;
	margin: 2px 0 0;
	accent-color: #222;
	cursor: pointer;
}
.order-form__agree a {
	color: #222;
	text-decoration: underline;
	text-underline-offset: 2px;
}
.order-form__status {
	margin: 0;
	color: #c62828;
	font-size: 14px;
}
.order-form__status:empty {
	display: none;
}
.order-form__submit {
	height: 44px;
	margin-top: 4px;
	border: 0;
	border-radius: 4px;
	background: var(--red);
	color: #fff;
	font-size: 14px;
	font-weight: 700;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	cursor: pointer;
	transition: background-color 0.2s;
}
.order-form__submit:disabled {
	opacity: 0.6;
	cursor: default;
}

/* Sent message in place of an embedded form (Контакты). */
.order-form-sent h3 {
	margin: 0 0 12px;
	font-size: 24px;
	font-weight: 700;
	text-transform: uppercase;
}
.order-form-sent p {
	margin: 0;
	font-size: 15px;
	line-height: 1.6;
	color: #555;
}

@media (max-width: 767px) {
	/* 16px on phones: smaller text makes iOS zoom into the field on focus. */
	.order-form input[type='text'],
	.order-form input[type='email'],
	.order-form textarea,
	.order-form__phone,
	.order-form__phone input {
		font-size: 16px;
	}
	.order-dialog {
		width: calc(100% - 24px);
		max-height: calc(100% - 24px);
		margin: 12px auto;
		padding: 26px 20px 22px;
	}
	.order-dialog__title {
		font-size: 22px;
	}
}

/* css/block-css/cookie-banner.css */
/* Cookie notice (partials/cookie-banner.liquid): a white box at the bottom of the screen, above
   «Наверх», below the menu pane. It rises in shortly after the page loads (.is-visible, site.js)
   and sinks away after a choice. */
.cookie-banner {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 1050;
	padding: 0 20px 24px;
	pointer-events: none;
	opacity: 0;
	transform: translateY(24px);
	transition:
		transform 0.5s cubic-bezier(0.2, 0.7, 0.2, 1),
		opacity 0.4s ease;
}
.cookie-banner.is-visible {
	opacity: 1;
	transform: none;
}
.cookie-banner__box {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 16px 32px;
	max-width: 1160px;
	margin: 0 auto;
	padding: 20px 28px;
	border-radius: 4px;
	background-color: #fff;
	box-shadow: 0 8px 40px rgba(0, 0, 0, 0.16);
	pointer-events: auto;
}
.cookie-banner__text {
	flex: 1 1 420px;
	min-width: 0;
	margin: 0;
	color: #444;
	font-size: 14px;
	line-height: 1.55;
	text-wrap: pretty;
}
.cookie-banner__text a {
	color: #222;
	text-decoration: underline;
	text-underline-offset: 2px;
}
.cookie-banner__buttons {
	flex: 0 0 auto;
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}
.cookie-banner__buttons button {
	flex: 1 1 auto;
	height: 44px;
	border-radius: 2px;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	white-space: nowrap;
}
.cookie-banner__accept {
	padding: 0 24px;
	border: 0;
	background-color: var(--red);
	color: #fff;
}
.cookie-banner__necessary {
	padding: 0 20px;
	border: 1px solid #c4c4c4;
	background: none;
	color: #222;
	transition: border-color 0.2s ease;
}
@media (hover: hover) {
	.cookie-banner__necessary:hover {
		border-color: #222;
	}
}
@media (max-width: 767px) {
	.cookie-banner {
		padding: 0 12px 12px;
	}
	.cookie-banner__box {
		padding: 18px;
	}
	.cookie-banner__buttons {
		flex: 1 1 100%;
	}
}

/* css/utilities.css */
/* Shared effects, loaded last (site-css.11ty.js) so they win ties with the blocks' own rules.
   .hover-red: the colour fades to the site red on hover and keyboard focus (footer links, clients
   carousel arrows, consent links). */
.hover-red {
	transition: color 0.3s ease-out;
}
.hover-red:focus-visible {
	color: var(--red);
}
@media (hover: hover) {
	.hover-red:hover {
		color: var(--red);
	}
}