/* smartritual.ru: the legacy look (white pages, «смартРитуал» wordmark, uppercase
   menu underlined in green, cards with soft shadows, blue numbered steps, a bar
   fixed at the bottom with the phone or the order total), rebuilt mobile-first.
   Colours whose contrast failed WCAG AA are darkened slightly: greys and the green. */

@font-face {
	font-family: Lato;
	src: url(/fonts/lato-semibold.woff2) format('woff2');
	font-weight: 400 600;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: Lato;
	src: url(/fonts/lato-bold.woff2) format('woff2');
	font-weight: 700;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: 'PT Serif';
	src: url(/fonts/pt-serif-bold.woff2) format('woff2');
	font-weight: 700;
	font-style: normal;
	font-display: swap;
}

:root {
	--blue: #095197;
	--blue-hover: #006bb3;
	--green: #00852c;
	--green-hover: #007728;
	--muted: #666;
	--line: #d8d8d8;
	--soft: #f1f5f7;
	--shadow: 0 3px 19px rgba(215, 224, 228, .8);
	--selected: #cedcea;
	--error: #b3261e;
}

*, *::before, *::after {
	box-sizing: border-box;
}

[hidden] {
	display: none !important;
}

html {
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
}

/* Focused fields and anchor targets stay clear of the sticky bars (WCAG 2.4.11). */
@media (min-width: 900px) {
	html {
		scroll-padding-top: 96px;
		scroll-padding-bottom: 80px;
	}
}

html:has(body.page-order) {
	scroll-padding-bottom: 110px;
}

body {
	margin: 0;
	padding-bottom: var(--consent-offset, 0px);
	background: #fff;
	color: #000;
	font: 600 16px/1.5 Lato, Helvetica, Arial, sans-serif;
}

img {
	max-width: 100%;
	height: auto;
}

a {
	color: var(--blue);
}

a:hover {
	color: var(--blue-hover);
}

a:focus-visible, button:focus-visible, summary:focus-visible {
	outline: 3px solid var(--blue);
	outline-offset: 2px;
}

h1, h2, h3 {
	font-family: 'PT Serif', Times, 'Times New Roman', serif;
	font-weight: 700;
	line-height: 1.25;
}

h1 {
	margin: 0 0 .9em;
	font-size: 26px;
}

h2 {
	margin: 1.6em 0 .6em;
	font-size: 21px;
}

p, ul, ol {
	margin: 0 0 1.1em;
}

strong {
	font-weight: 700;
}

.nowrap {
	white-space: nowrap;
}

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

/* Honeypot field of the order form: invisible to people, filled by some bots. */
.hp {
	position: absolute;
	left: -10000px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.skip-link {
	position: absolute;
	top: -100px;
	left: 10px;
	z-index: 30;
	padding: 8px 14px;
	background: #fff;
	box-shadow: var(--shadow);
}

.skip-link:focus {
	top: 10px;
}

/* ---------------------------------------------------------------- header */

.site-header {
	background: #fff;
	box-shadow: 0 10px 15px -10px rgba(0, 0, 0, .1);
}

.site-header__inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0 10px;
	max-width: 1200px;
	margin: 0 auto;
	padding: 8px 10px 0;
}

.logo {
	margin-right: auto;
	padding: 6px 0;
	color: #000;
	font: 700 32px/1 Lato, Helvetica, Arial, sans-serif;
	text-decoration: none;
	white-space: nowrap;
}

.logo:hover {
	color: #000;
}

/* Part of the wordmark: logotypes are exempt from contrast minimums. */
.logo__smart {
	color: #c4c4c4;
}

.logo:hover .logo__smart {
	color: var(--blue);
}

.site-header__contacts {
	display: flex;
	gap: 8px;
	margin: 0;
}

.icon-link {
	display: block;
	width: 48px;
	height: 48px;
	border-radius: 4px;
	background: var(--blue) url(/img/phone_icon.png) center / 28px no-repeat;
}

.icon-link--whatsapp {
	background: var(--green) url(/img/whatsapp.svg) center / 34px no-repeat;
}

.site-nav {
	flex-basis: 100%;
}

.site-nav ul {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	margin: 8px -10px 0;
	padding: 0;
	border-top: 1px solid #e4eaed;
	list-style: none;
}

.site-nav a {
	display: block;
	padding: 12px 4px 10px;
	border-bottom: 3px solid transparent;
	color: #000;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: .02em;
	text-align: center;
	text-decoration: none;
	text-transform: uppercase;
}

.site-nav a:hover, .site-nav a[aria-current="page"] {
	border-bottom-color: #009933;
	color: #000;
}

@media (min-width: 900px) {
	.site-header {
		position: sticky;
		top: 0;
		z-index: 10;
	}

	.site-header__inner {
		flex-wrap: nowrap;
		min-height: 80px;
		padding: 0 10px;
	}

	.logo {
		font-size: 40px;
	}

	.site-header__contacts {
		display: none;
	}

	.site-nav {
		flex-basis: auto;
	}

	.site-nav ul {
		display: flex;
		margin: 0;
		border: 0;
	}

	.site-nav a {
		padding: 28px 12px 24px;
		border-bottom-width: 4px;
		font-size: 16px;
		letter-spacing: 0;
	}

	.site-nav a:hover, .site-nav a[aria-current="page"] {
		box-shadow: 0 10px 15px -10px rgba(0, 153, 51, .6);
	}
}

/* --------------------------------------------------------------- content */

.content {
	max-width: 1200px;
	margin: 0 auto;
	padding: 24px 10px 40px;
}

.content:focus {
	outline: none;
}

/* Text reads in a narrower column, centred on the page, with its headings. The order
   form uses the full width, so its heading stays with it. */
body:not(.page-order) .content > :is(h1, h2, p, ul, ol:not(.steps), .faq) {
	max-width: var(--text-column, 880px);
	margin-left: auto;
	margin-right: auto;
}

/* The order's page: the same width as the order blank below the text. */
.page-order-view {
	--text-column: 800px;
}

@media (min-width: 640px) {
	h1 {
		font-size: 30px;
	}

	h2 {
		font-size: 24px;
	}

	.content {
		padding-top: 32px;
	}
}

a.tel {
	border-bottom: 1px dashed var(--blue);
	text-decoration: none;
}

a.whatsapp::before {
	content: '';
	display: inline-block;
	width: 18px;
	height: 18px;
	margin: 0 4px -3px 0;
	background: url(/img/whatsapp.svg) center / contain no-repeat;
}

.price__cur, .price__included {
	color: var(--muted);
}

.price__included {
	font-size: .9em;
}

/* Home: the four steps and the two service tiles. */

.steps {
	max-width: 560px;
	margin: 32px auto;
	padding: 0;
	list-style: none;
	counter-reset: step;
}

.steps li {
	display: flex;
	align-items: center;
	gap: 20px;
	min-height: 52px;
	margin-bottom: 24px;
	font-size: 17px;
	counter-increment: step;
}

.steps li::before {
	content: counter(step);
	flex: none;
	width: 52px;
	height: 52px;
	border: 6px solid var(--blue);
	border-radius: 50%;
	background: rgba(215, 224, 228, .4);
	box-shadow: 0 3px 19px rgba(215, 224, 228, .8);
	color: var(--blue);
	font: 700 30px/40px Lato, Helvetica, Arial, sans-serif;
	text-align: center;
}

.leads {
	display: grid;
	gap: 30px;
	max-width: 850px;
	margin: 40px auto 10px;
}

@media (min-width: 700px) {
	.leads {
		grid-template-columns: 1fr 1fr;
	}
}

.lead {
	position: relative;
	display: block;
	height: 260px;
	overflow: hidden;
	border-top: 1px solid #cbd1e0;
	border-bottom: 1px solid #cbd1e0;
	box-shadow: var(--shadow);
	color: #000;
	text-align: center;
	text-decoration: none;
}

.lead:hover {
	color: #000;
	box-shadow: 0 3px 19px rgba(215, 224, 228, 1);
}

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

.lead__text {
	position: absolute;
	top: 0;
	right: 0;
	left: 0;
	padding: 28px 20px 22px;
	background: rgba(255, 255, 255, .85);
	font: 700 24px/1.2 'PT Serif', Times, serif;
}

.lead__name, .lead__price {
	display: block;
}

.lead__price {
	margin-top: 10px;
	font: 700 30px/1.1 Lato, Helvetica, Arial, sans-serif;
}

.lead__price .price__cur {
	font-size: 20px;
}

.lead__cta {
	position: absolute;
	right: 0;
	bottom: 0;
	left: 0;
	padding: 34px 20px 18px;
	background: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, .6));
	color: #fff;
	font-size: 24px;
	text-shadow: 0 0 10px rgba(18, 24, 26, 1);
}

.lead:hover .lead__cta {
	text-decoration: underline;
}

/* FAQ, contacts */

.faq {
	margin-bottom: 36px;
}

.faq h2 {
	margin: 0 0 10px;
	color: var(--blue);
	font-size: 21px;
}

.documents {
	padding-left: 20px;
}

.documents li {
	margin-bottom: 8px;
}

.file-type {
	padding: 1px 5px;
	border: 1px solid var(--line);
	border-radius: 3px;
	color: var(--muted);
	font-size: 12px;
}

/* ------------------------------------------------------------ order form */

.service-tabs {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin: -10px 0 24px;
}

.service-tabs a {
	padding: 8px 18px;
	border: 2px solid var(--blue);
	border-radius: 20px;
	text-decoration: none;
}

.service-tabs a[aria-current="page"] {
	background: var(--blue);
	color: #fff;
}

.form-errors {
	max-width: 880px;
	margin: 0 0 24px;
	padding: 12px 16px;
	border-left: 4px solid var(--error);
	background: #fdf3f2;
}

.form-errors p, .form-errors ul {
	margin: 0 0 6px;
}

.form-errors a {
	color: var(--error);
}

.step {
	min-width: 0;
	margin: 30px 0 0;
	padding: 0;
	border: 0;
}

.step legend {
	display: flex;
	align-items: center;
	gap: 16px;
	margin-bottom: 20px;
	padding: 0;
	font-size: 22px;
}

.step__no {
	flex: none;
	width: 42px;
	height: 42px;
	border-radius: 2px;
	background: var(--blue);
	color: #fff;
	line-height: 42px;
	text-align: center;
	text-shadow: 0 -1px 0 rgba(0, 0, 0, .33);
}

.step > .field__error {
	margin: -8px 0 14px;
}

.cards {
	display: grid;
	gap: 24px;
}

@media (min-width: 700px) {
	.cards--2 {
		grid-template-columns: 1fr 1fr;
		gap: 30px;
	}

	.step legend {
		font-size: 24px;
	}
}

.card {
	position: relative;
	display: flex;
	flex-direction: column;
	border-bottom: 1px solid var(--line);
	background: #fff;
	box-shadow: var(--shadow);
}

label.card {
	cursor: pointer;
}

label.card:hover {
	box-shadow: 0 3px 19px rgba(215, 224, 228, 1);
}

.card input[type="radio"] {
	position: absolute;
	width: 1px;
	height: 1px;
	opacity: 0;
}

.card:has(input:checked) {
	background-color: var(--selected);
	box-shadow: rgba(9, 81, 151, .6) 0 6px 10px -5px inset;
}

.card:has(input:checked)::after {
	content: '';
	position: absolute;
	top: 12px;
	right: 12px;
	width: 30px;
	height: 30px;
	border-radius: 50%;
	background: var(--blue) url(/img/check.svg) center / 20px no-repeat;
}

.card:has(input:focus-visible) {
	outline: 3px solid var(--blue);
	outline-offset: 3px;
}

.card--photo img {
	display: block;
	width: 100%;
	height: auto;
	padding: 24px 24px 0;
}

.card__title {
	padding: 14px 10px 12px;
	font-size: 18px;
	font-weight: 700;
	line-height: 1.2;
	text-align: center;
}

.card__kind {
	display: block;
	color: var(--muted);
	font-size: 16px;
	font-weight: 600;
	text-transform: lowercase;
}

.card__price {
	margin-top: auto;
	padding: 14px 10px 13px;
	border-top: 1px solid var(--soft);
	font-size: 18px;
	text-align: center;
}

.card--text {
	padding: 26px 24px 0;
}

.card--text .card__price {
	margin: auto -24px 0;
}

.card__heading {
	display: block;
	margin: 0 44px 12px 0;
	font: 700 20px/1.25 'PT Serif', Times, serif;
}

.card__text {
	display: block;
	margin-bottom: 12px;
	color: #333;
	font-size: 15px;
}

.card__list {
	margin: 0 0 20px;
	padding-left: 20px;
	color: #444;
	font-size: 15px;
}

.card--form {
	padding: 22px 20px;
}

.field {
	margin-bottom: 18px;
}

.field label {
	display: block;
	margin-bottom: 6px;
}

.field__hint {
	color: var(--muted);
	font-size: 14px;
}

.field input:not([type="checkbox"]) {
	display: block;
	width: 100%;
	height: 46px;
	padding: 0 12px;
	border: 1px solid #8f8f8f;
	border-radius: 4px;
	background: #fff;
	color: #000;
	font: 600 18px Lato, Helvetica, Arial, sans-serif;
}

.field input:focus {
	border-color: var(--blue);
	outline: 3px solid rgba(9, 81, 151, .35);
}

.field input[aria-invalid="true"] {
	border-color: var(--error);
}

.field__error {
	margin: 6px 0 0;
	color: var(--error);
	font-size: 15px;
}

.field--check {
	display: grid;
	grid-template-columns: 26px 1fr;
	gap: 6px 10px;
	margin-bottom: 0;
	font-size: 15px;
	line-height: 1.4;
}

.field--check input {
	width: 22px;
	height: 22px;
	margin: 1px 0 0;
	accent-color: var(--blue);
}

.field--check label {
	margin: 0;
}

.field--check .field__error {
	grid-column: 2;
	margin: 0;
}

.date-note p {
	margin: -6px 0 16px;
	font-size: 15px;
}

.date-note .ok {
	color: var(--green);
}

.order-bar {
	position: sticky;
	bottom: 0;
	z-index: 5;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 10px 20px;
	margin: 36px -10px 0;
	padding: 12px 10px;
	background: #fff;
	box-shadow: 0 -10px 15px -10px rgba(0, 0, 0, .18);
}

.order-bar__sum {
	margin: 0;
	color: var(--muted);
	font-size: 20px;
	font-weight: 700;
}

.order-bar__sum output {
	color: #000;
	font-size: 26px;
}

.button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 50px;
	padding: 6px 28px;
	border: 0;
	border-radius: 25px;
	background: var(--green);
	color: #fff;
	font: 700 20px/1.2 Lato, Helvetica, Arial, sans-serif;
	text-decoration: none;
	cursor: pointer;
}

.button:hover {
	background: var(--green-hover);
	color: #fff;
}

.button--plain {
	border: 2px solid var(--blue);
	background: #fff;
	color: var(--blue);
}

.button--plain:hover {
	background: var(--soft);
	color: var(--blue);
}

.button--large {
	min-width: 220px;
	min-height: 56px;
	font-size: 24px;
}

@media (max-width: 480px) {
	/* One compact row on phones, as on the legacy site: the total beside the button. */
	.order-bar {
		flex-wrap: nowrap;
		gap: 10px;
	}

	.order-bar__label {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip-path: inset(50%);
		white-space: nowrap;
	}

	.order-bar__sum {
		font-size: 17px;
		white-space: nowrap;
	}

	.order-bar__sum output {
		font-size: 22px;
	}

	.order-bar .button {
		padding: 6px 18px;
		font-size: 18px;
	}
}

/* ------------------------------------------------- order page and payment */

.order-blank, .payment {
	max-width: 800px;
	margin: 30px auto;
	border-bottom: 1px solid var(--line);
	box-shadow: var(--shadow);
}

.order-blank {
	padding: 20px 14px;
}

.order-blank__head p {
	margin: 0 0 12px;
}

.order-blank__number {
	font-size: 32px;
	font-weight: 700;
	line-height: 1.2;
	white-space: nowrap;
}

.order-blank__info {
	color: #333;
	font-size: 15px;
}

.order-blank__section h2 {
	margin: 24px 0 10px;
}

.line {
	display: flex;
	justify-content: space-between;
	gap: 16px;
	padding: 5px 0;
	border-bottom: 1px solid var(--soft);
}

.line__price {
	flex: none;
	max-width: 45%;
	text-align: right;
}

.order-blank__total {
	margin-top: 24px;
	border-top: 5px solid var(--line);
}

.order-blank__total .line {
	font-size: 18px;
}

@media (min-width: 640px) {
	.order-blank {
		padding: 40px;
	}

	.order-blank__head {
		display: grid;
		grid-template-columns: 1fr auto;
		gap: 0 30px;
	}

	.order-blank__operator {
		grid-column: 2;
		grid-row: 1;
		text-align: right;
	}

	.order-blank__number {
		font-size: 42px;
	}

	.order-blank__info {
		grid-column: 1 / -1;
	}
}

.payment {
	display: grid;
	gap: 16px;
	align-items: center;
	padding: 24px 20px;
}

.payment__facts {
	margin: 0;
}

.payment__facts div {
	display: flex;
	gap: 12px;
	align-items: baseline;
	justify-content: space-between;
	max-width: 400px;
	padding: 4px 0;
}

.payment__facts dt {
	color: var(--muted);
}

.payment__facts dd {
	margin: 0;
	font-size: 20px;
	font-weight: 700;
}

.payment__form {
	margin: 0;
}

.payment__logos {
	display: flex;
	flex-wrap: wrap;
	gap: 24px;
	align-items: center;
	justify-content: center;
	margin: 0;
}

.payment__logos img {
	width: auto;
	height: 32px;
}

@media (min-width: 640px) {
	.payment {
		grid-template-columns: 1fr auto;
		padding: 30px 40px;
	}

	.payment__logos {
		grid-column: 1 / -1;
	}
}

/* --------------------------------------------------------------- footer */

.site-footer {
	border-top: 1px solid #e4eaed;
	background: #fff;
	color: var(--muted);
	font-size: 14px;
}

.site-footer__inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 10px 30px;
	max-width: 1200px;
	margin: 0 auto;
	padding: 14px 10px;
}

.site-footer p {
	margin: 0;
	line-height: 1.4;
}

.site-footer__phone a {
	color: #0b141b;
	font-size: 17px;
	font-weight: 700;
	text-decoration: none;
}

.site-footer__phone span {
	display: block;
	font-size: 13px;
}

.site-footer__legal a {
	color: var(--muted);
}

@media (min-width: 900px) {
	/* The legacy footer bar stayed on screen; the order page has its own bar. */
	body:not(.page-order) .site-footer {
		position: sticky;
		bottom: 0;
		z-index: 5;
		box-shadow: 0 -10px 15px -10px rgba(0, 0, 0, .1);
	}

	.site-footer__legal {
		text-align: right;
	}
}

/* ------------------------------------------------- cookie consent notice */

.consent {
	position: fixed;
	right: 0;
	bottom: 12px;
	left: 0;
	z-index: 20;
	width: calc(100% - 24px);
	max-width: 640px;
	margin: 0 auto;
	padding: 16px 20px;
	border: 1px solid #cbd1e0;
	border-radius: 6px;
	background: #fff;
	box-shadow: 0 3px 24px rgba(0, 0, 0, .22);
	font-size: 15px;
}

.consent h2 {
	margin: 0 0 6px;
	font-size: 18px;
}

.consent p {
	margin: 0 0 12px;
}

.consent__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin: 0 !important;
}

.consent .button {
	min-height: 44px;
	font-size: 17px;
}

/* ---------------------------------------------------------------- print */

@media print {
	.site-header__contacts, .site-nav, .site-footer, .consent, .order-bar, .payment, .skip-link, .service-tabs {
		display: none !important;
	}

	.site-header {
		box-shadow: none;
	}

	.order-blank {
		box-shadow: none;
	}

	a {
		color: #000;
	}
}