/* -------------------- 0. FONTS --------------------
   The delivered .ttf/.otf files' names don't match what's actually inside
   them (verified via each file's own `name` table) — e.g. "-Light.ttf" is
   actually Regular Italic, "-LightItalic.ttf" is actually Light upright.
   The src below is mapped to each file's real weight/style, not its
   filename. There's no genuine Thin Italic (100/italic) file in the set. */

@font-face {
	font-family: 'Inter';
	src: url('../fonts/Inter_18pt-ThinItalic.ttf') format('truetype'); /* actually Thin Regular */
	font-weight: 100;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'Inter';
	src: url('../fonts/Inter_18pt-ExtraLightItalic.ttf') format('truetype'); /* actually ExtraLight Regular */
	font-weight: 200;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'Inter';
	src: url('../fonts/Inter_18pt-Italic.ttf') format('truetype'); /* actually ExtraLight Italic */
	font-weight: 200;
	font-style: italic;
	font-display: swap;
}

@font-face {
	font-family: 'Inter';
	src: url('../fonts/Inter_18pt-LightItalic.ttf') format('truetype'); /* actually Light Regular */
	font-weight: 300;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'Inter';
	src: url('../fonts/Inter_18pt-Medium.ttf') format('truetype'); /* actually Light Italic */
	font-weight: 300;
	font-style: italic;
	font-display: swap;
}

@font-face {
	font-family: 'Inter';
	src: url('../fonts/Inter_18pt-SemiBold.ttf') format('truetype'); /* actually Regular */
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'Inter';
	src: url('../fonts/Inter_18pt-Light.ttf') format('truetype'); /* actually Regular Italic */
	font-weight: 400;
	font-style: italic;
	font-display: swap;
}

@font-face {
	font-family: 'Inter';
	src: url('../fonts/Inter_18pt-MediumItalic.ttf') format('truetype'); /* actually Medium Regular */
	font-weight: 500;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'Inter';
	src: url('../fonts/Inter_18pt-Regular.ttf') format('truetype'); /* actually Medium Italic */
	font-weight: 500;
	font-style: italic;
	font-display: swap;
}

@font-face {
	font-family: 'Inter';
	src: url('../fonts/Inter_18pt-SemiBoldItalic.ttf') format('truetype'); /* actually SemiBold Regular */
	font-weight: 600;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'Inter';
	src: url('../fonts/Inter_18pt-Thin.ttf') format('truetype'); /* actually SemiBold Italic */
	font-weight: 600;
	font-style: italic;
	font-display: swap;
}

@font-face {
	font-family: 'Inter';
	src: url('../fonts/Inter_18pt-BoldItalic.ttf') format('truetype'); /* actually Bold Regular */
	font-weight: 700;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'Inter';
	src: url('../fonts/Inter_18pt-ExtraBold.ttf') format('truetype'); /* actually Bold Italic */
	font-weight: 700;
	font-style: italic;
	font-display: swap;
}

@font-face {
	font-family: 'Inter';
	src: url('../fonts/Inter_18pt-ExtraBoldItalic.ttf') format('truetype'); /* actually ExtraBold Regular */
	font-weight: 800;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'Inter';
	src: url('../fonts/Inter_18pt-ExtraLight.ttf') format('truetype'); /* actually ExtraBold Italic */
	font-weight: 800;
	font-style: italic;
	font-display: swap;
}

@font-face {
	font-family: 'Inter';
	src: url('../fonts/Inter_18pt-BlackItalic.ttf') format('truetype'); /* actually Black Regular */
	font-weight: 900;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'Inter';
	src: url('../fonts/Inter_18pt-Bold.ttf') format('truetype'); /* actually Black Italic */
	font-weight: 900;
	font-style: italic;
	font-display: swap;
}

/* Figma references font-['Arian:Italic'] for the kicker/lead accents (e.g.
   "Красивая улыбка — это искусство"). Arian_normal_italic_0.otf is the
   genuine Regular Italic cut, despite the filename discrepancies below. */
@font-face {
	font-family: 'Arian';
	src: url('../fonts/Arian_normal_italic_0.otf') format('opentype');
	font-weight: 400;
	font-style: italic;
	font-display: swap;
}

@font-face {
	font-family: 'Arian';
	src: url('../fonts/Arian_bold_italic.otf') format('opentype'); /* actually Bold */
	font-weight: 700;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'Arian Bold Italic';
	src: url('../fonts/Arian_normal.otf') format('opentype'); /* actually Bold Italic */
	font-weight: 700;
	font-style: italic;
	font-display: swap;
}

/* -------------------- 1. RESET -------------------- */

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

html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
	scroll-padding-top: 80px;
}

/* Utility: swap a forced <br> break point between breakpoints, e.g. when the
   mobile-width text needs to wrap at a different word than desktop. */
.br-mobile {
	display: none;
}

@media (max-width: 1024px) {
	.br-mobile {
		display: inline;
	}
	.br-desktop {
		display: none;
	}
}

body,
h1,
h2,
h3,
h4,
p,
ul,
ol,
figure {
	margin: 0;
}

ul,
ol {
	padding: 0;
	list-style: none;
}

img,
picture {
	display: block;
	max-width: 100%;
}

button,
input,
textarea,
select {
	font: inherit;
	color: inherit;
	background: none;
	border: none;
}

button {
	cursor: pointer;
}

a {
	color: inherit;
	text-decoration: none;
}

h1,
h2,
h3,
h4 {
	font-weight: inherit;
}

/* -------------------- 2. DESIGN TOKENS -------------------- */

:root {
	/* Colors */
	--color-black: #222222;
	--color-white: #ffffff;
	--color-grey: #939598;
	--color-grey-light: #e4e5e6;
	--color-divider: #e8f1f8;

	--color-orange: #f58320;
	--color-orange-light: #ffe1bd;

	--color-blue: #acd7f3;
	--color-blue-mid: #69b3e4;
	--color-blue-deep: #0399eb;

	--color-bg: var(--color-white);
	--color-text: var(--color-black);
	--color-text-secondary: var(--color-grey);

	--shadow-card: 8px 8px 32px rgba(0, 27, 48, 0.06);

	/* Typography */
	--font-main: 'Inter', -apple-system, 'Segoe UI', Roboto, sans-serif;

	--fs-h1: clamp(
		2.5rem,
		1.2rem + 5.9792vw,
		8.375rem
	); /* 40 → 134px, hits max at exactly 1920px */
	--fs-h2: clamp(
		2.25rem,
		1.1rem + 5.3333vw,
		7.5rem
	); /* 36 → 120px, hits max at exactly 1920px */
	--fs-h3: clamp(1.75rem, 1.1rem + 2.6vw, 3.125rem); /* 28 → 50px  */
	--fs-h4: clamp(1.5rem, 1.1rem + 1.6vw, 2.5rem); /* 24 → 40px  */
	--fs-h5: clamp(1.375rem, 1.1rem + 1vw, 2rem); /* 22 → 32px  */
	--fs-h7: clamp(1.125rem, 1rem + 0.5vw, 1.5rem); /* 18 → 24px  */
	--fs-body: 1.125rem; /* 18px */
	--fs-caption: 0.875rem; /* 14px */

	--lh-tight: 1.1;
	--lh-normal: 1.2;

	/* Layout */
	--container-width: 1216px;
	--container-padding: clamp(1rem, 4vw, 5.5rem);
	--section-padding-block: clamp(
		2.5rem,
		4.167vw + 1rem,
		6rem
	); /* hits exactly 96px at 1920px */
	--radius-sm: 15px;
	--radius-md: 30px;
	--radius-lg: 40px;
	--radius-xl: 60px;
	--radius-pill: 160px;

	--gap-lg: clamp(2rem, 3vw, 4rem);
}

/* -------------------- 3. BASE -------------------- */

body {
	font-family: var(--font-main);
	font-weight: 400;
	font-size: var(--fs-body);
	line-height: var(--lh-normal);
	color: var(--color-text);
	background: var(--color-bg);
}

.container {
	width: 100%;
	max-width: calc(var(--container-width) + var(--container-padding) * 2);
	margin-inline: auto;
	padding-inline: var(--container-padding);
}

.visually-hidden {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.skip-link {
	position: absolute;
	top: -100%;
	left: 0;
	z-index: 1000;
	padding: 12px 24px;
	background: var(--color-orange);
	color: var(--color-white);
	border-radius: 0 0 var(--radius-sm) 0;
}

.skip-link:focus {
	top: 0;
}

/* -------------------- 4. REUSABLE COMPONENTS -------------------- */

/* Button */
.button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 48px;
	padding-inline: 24px;
	border-radius: var(--radius-sm);
	font-weight: 600;
	font-size: var(--fs-body);
	line-height: var(--lh-normal);
	white-space: nowrap;
	transition: opacity 0.2s ease;
}

.button:hover,
.button:focus-visible {
	opacity: 0.85;
}

.button--orange {
	background: var(--color-orange);
	color: var(--color-white);
}

.button--blue {
	background: var(--color-blue-mid);
	color: var(--color-white);
	font-weight: 500;
}

/* Round social icon button */
.social-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	padding: 12px;
	border: 2px solid var(--color-orange);
	border-radius: var(--radius-pill);
	flex-shrink: 0;
	transition: background-color 0.2s ease;
}

.social-btn img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.social-btn:hover,
.social-btn:focus-visible {
	background-color: var(--color-orange-light);
}

.social-btn--outline {
	border-color: var(--color-white);
}

.social-btn--outline-white {
	border-color: var(--color-white);
}

/* "Подробнее →" link */
.more {
	display: inline-flex;
	align-items: center;
	gap: 24.489px;
	font-weight: 600;
	font-size: var(--fs-caption);
	color: var(--color-black);
}

.more img {
	width: 25px;
	height: 12px;
}

.promo__inner {
	margin-bottom: 70px;
}

/* Section heading (title + lead paragraph, used across most sections) */
.section-heading {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 32px;
	margin-bottom: var(--gap-lg);
	margin-bottom: 64px;
}

.section-heading__title {
	width: 100%;
	font-weight: 300;
	font-size: var(--fs-h2);
	line-height: var(--lh-tight);
	text-transform: uppercase;
	letter-spacing: -0.03em;
}

.section-heading__accent {
	color: var(--color-orange);
}

.section-heading__lead {
	width: 100%;
	max-width: 591px;
	font-family: 'Arian', var(--font-main);
	font-style: italic;
	font-weight: 400;
	font-size: 24px;
	color: var(--color-orange);
}

/* Form field */
.field {
	position: relative;
	display: flex;
	align-items: center;
	gap: 8px;
	width: 100%;
	padding: 16px;
	background: var(--color-white);
	border: 1px solid var(--color-orange-light);
	border-radius: var(--radius-sm);
}

.field__icon {
	flex-shrink: 0;
}

.field__label {
	position: absolute;
	left: 48px;
	top: 50%;
	transform: translateY(-50%);
	font-size: var(--fs-body);
	color: var(--color-black);
	pointer-events: none;
	transition: opacity 0.15s ease;
}

.field__input {
	flex: 1 0 0;
	min-width: 0;
	font-size: var(--fs-body);
	background: transparent;
}

.field:focus-within .field__label,
.field:has(.field__input:not(:placeholder-shown)) .field__label {
	opacity: 0;
}

/* Accordion (native details/summary) */
.accordion {
	max-height: 79px;

	padding-bottom: 8px;
	border-bottom: 1px solid var(--color-divider);
	transition: max-height 0.3s ease;
}

.accordion[open] {
	max-height: 1000px;
}

.accordion__summary {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 32px;
	list-style: none;
	cursor: pointer;
	font-weight: 500;
	font-size: var(--fs-h5);
	line-height: var(--lh-tight);
	text-transform: uppercase;
}

.accordion__summary::-webkit-details-marker {
	display: none;
}

.accordion__icon {
	position: relative;
	flex-shrink: 0;
	width: 40px;
	height: 40px;
	border: 2px solid var(--color-blue);
	border-radius: 50%;
}

.accordion__icon::before,
.accordion__icon::after {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	background: var(--color-blue);
	transition: transform 0.2s ease;
}

.accordion__icon::before {
	width: 14px;
	height: 2px;
	transform: translate(-50%, -50%);
}

.accordion__icon::after {
	width: 2px;
	height: 14px;
	transform: translate(-50%, -50%);
}

.accordion[open] .accordion__icon::after {
	transform: translate(-50%, -50%) rotate(90deg) scale(0);
}

.accordion__panel {
	display: grid;
	grid-template-rows: 0fr;
	opacity: 0;
	transition:
		grid-template-rows 0.3s ease,
		opacity 0.25s ease;
}

.accordion[open] .accordion__panel {
	grid-template-rows: 1fr;
	opacity: 1;
}

.accordion__panel-text {
	overflow: hidden;
	min-height: 0;
	padding-top: 16px;
	max-width: 60ch;
	color: var(--color-text-secondary);
}

@media (prefers-reduced-motion: reduce) {
	.accordion__panel {
		transition: none;
	}
}

/* -------------------- 5. HEADER -------------------- */

.header {
	position: sticky;
	top: 0;
	z-index: 100;
	background: var(--color-white);
}

.header__toggle {
	display: none;
}

.header__inner {
	display: flex;
	align-items: center;
	justify-content: center;
	padding-block: 16px;
	max-height: 60px;
}

.header__logo {
	flex-shrink: 0;
}

.header__logo img {
	width: 206px;
	height: 40px;
}

.header__nav {
	flex-shrink: 0;
	margin-left: clamp(20px, 3vw, 56px);
}

.header__list {
	display: flex;
	align-items: center;
	gap: 16px;
}

.header__link {
	font-weight: 600;
	font-size: var(--fs-caption);
	line-height: var(--lh-normal);
	white-space: nowrap;
}

.header__link:hover {
	color: var(--color-orange);
}

.header__phone {
	flex-shrink: 0;
	font-weight: 500;
	font-size: var(--fs-h5);
	line-height: 1.1;
	color: var(--color-orange);
	text-transform: uppercase;
	white-space: nowrap;
	margin-left: clamp(16px, 2.084vw, 40px);
}

.header__actions {
	display: flex;
	align-items: center;
	flex-shrink: 0;
	gap: 16px;
	margin-left: auto;
}

.header__burger {
	display: none;
	flex-direction: column;
	justify-content: center;
	gap: 5px;
	width: 32px;
	height: 32px;
	cursor: pointer;
}

.header__burger span {
	width: 100%;
	height: 2px;
	background: var(--color-black);
	transition:
		transform 0.2s ease,
		opacity 0.2s ease;
}

@media (max-width: 1024px) {
	.header__inner {
		flex-wrap: wrap;
		padding-bottom: 24px;
		max-height: none;
	}
	.header__logo {
		order: 1;
	}

	.header__actions {
		order: 2;
	}

	.header__nav {
		position: absolute;
		top: 100%;
		left: 0;
		width: 100%;
		margin-left: 0;
		max-height: 0;
		overflow: hidden;
		background: var(--color-white);
		box-shadow: 0 16px 32px rgba(0, 27, 48, 0.08);
		transition: max-height 0.25s ease;
	}

	.header__list {
		flex-direction: column;
		align-items: flex-start;
		gap: 20px;
		padding: 24px var(--container-padding);
	}

	.header__toggle:checked ~ .container .header__nav {
		max-height: 400px;
	}

	.header__phone {
		display: none;
	}

	.header__burger {
		display: flex;
	}

	.header__toggle:checked ~ .container .header__burger span:nth-child(1) {
		transform: translateY(7px) rotate(45deg);
	}

	.header__toggle:checked ~ .container .header__burger span:nth-child(2) {
		opacity: 0;
	}

	.header__toggle:checked ~ .container .header__burger span:nth-child(3) {
		transform: translateY(-7px) rotate(-45deg);
	}
}

@media (max-width: 639px) {
	.header__actions .button {
		display: none;
	}
}

/* -------------------- 6. HERO -------------------- */

.hero {
	padding-top: var(--section-padding-block);
}

/* Desktop: "Центр" sits inline with the kicker (and the social icons follow
   197px after it), while "инновационной"/"стоматологии" each get their own
   full-width row below — three visually separate placements for words that
   are still one semantic <h1>. .hero__title is unwrapped with
   display:contents so its three word spans become direct grid items and
   can be placed into non-adjacent areas independently. */
.hero__inner {
	display: grid;
	grid-template-columns: max-content max-content minmax(0, 1fr);
	grid-template-areas:
		'kicker word1 social'
		'word2 word2 word2'
		'word3 word3 word3'
		'cta cta decor';
	align-items: center;
	row-gap: 0;
	column-gap: 24px;
}

.hero__kicker {
	grid-area: kicker;
	font-family: 'Arian', var(--font-main);
	font-style: italic;
	font-weight: 400;
	font-size: clamp(1.5rem, 1rem + 2vw, 3rem);
	letter-spacing: normal;
	color: var(--color-orange);
	padding-right: 32px;
}
.hero__kicker-text {
	white-space: nowrap;
}

.hero__social {
	grid-area: social;
	display: flex;
	gap: 8px;
	/* Pinned to the right edge of the grid column instead of positioned
	   with a left margin — this is inherently safe against overflow
	   (the column itself is bounded by minmax(0, 1fr)), so no scaling
	   math is needed to keep it on-screen at narrower desktop widths. */
	justify-self: end;
}

.hero__title {
	display: contents;
	font-weight: 300;
	font-size: var(--fs-h1);
	line-height: var(--lh-tight);
	text-transform: uppercase;
	letter-spacing: -0.04em;
}

.hero__title-word {
	display: block;
}

.hero__title-word:nth-child(1) {
	grid-area: word1;
}

.hero__title-word:nth-child(2) {
	grid-area: word2;
}

.hero__title-word:nth-child(3) {
	grid-area: word3;
}

.hero__title-word--accent {
	color: var(--color-orange);
}

.hero__cta {
	grid-area: cta;
	align-self: end;
	justify-self: start;
}

.hero__decor {
	grid-area: decor;
	justify-self: end;
	align-self: end;
	width: 280px;
	aspect-ratio: 280 / 209;
	height: auto;
}

@media (max-width: 1024px) {
	.hero__inner {
		grid-template-columns: 1fr;
		grid-template-areas:
			'title'
			'decor'
			'cta'
			'social';
		justify-items: start;
		row-gap: 24px;
		margin-top: 20px;
	}

	/* Undo the desktop word-splitting: the title goes back to being one
	   block occupying the single 'title' area, all three words stacked
	   together (matching the mobile design, unlike desktop where "Центр"
	   shares a row with the kicker). */
	.hero__title {
		display: block;
		grid-area: title;
	}

	.hero__title-word:nth-child(1),
	.hero__title-word:nth-child(2),
	.hero__title-word:nth-child(3) {
		grid-area: auto;
	}

	.hero__kicker {
		grid-area: decor;
		align-self: start;
		justify-self: start;
		max-width: 53%;
	}

	.hero__decor {
		grid-area: decor;
		justify-self: end;
		align-self: start;
		width: 42%;
	}

	.hero__cta {
		justify-self: start;
	}

	.hero__social {
		justify-self: start;
	}
}

/* -------------------- 7. PROMO -------------------- */

.promo {
	padding-top: var(--section-padding-block);
}

.promo__title {
	font-weight: 300;
	font-size: var(--fs-h2);
	text-transform: uppercase;
	letter-spacing: -0.03em;
	margin-bottom: 20px;
}

.promo__title-accent {
	color: var(--color-orange);
}

/* Slider: one slide = 2 promo cards, native scroll-snap, dot navigation via anchor links */
.promo-slider {
	margin-bottom: 68px;
}

.promo-slider__track {
	display: flex;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	scrollbar-width: none;
}

.promo-slider__track::-webkit-scrollbar {
	display: none;
}

.promo-slider__slide {
	flex: 0 0 100%;
	min-width: 0;
	scroll-snap-align: start;
	scroll-snap-stop: always;
}

.promo-slider__dots {
	display: flex;
	justify-content: center;
	gap: 12px;
	margin-top: 32px;
}

.promo-slider__dot {
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: var(--color-grey-light);
	transition:
		background-color 0.2s ease,
		width 0.2s ease;
}

.promo-slider__dot:hover,
.promo-slider__dot:focus-visible {
	background: var(--color-orange-light);
}

.promo-slider__dot.is-active {
	background: var(--color-orange);
	width: 28px;
	border-radius: 6px;
}

.promo__list {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(420px, 1fr));
	gap: 16px;
}

.promo__item {
	display: flex;
	width: 100%;
	gap: 40px;
	max-width: 600px;
	align-items: center;
	padding: 32px;
	border-radius: var(--radius-xl);
	color: var(--color-black);
}

.promo__item--orange {
	background: linear-gradient(115deg, #ffe1bd 5%, #faa63f 85%);
}

.promo__item--blue {
	background: linear-gradient(120deg, #acd7f3 46%, #0399eb 120%);
}

.promo__item--green {
	background: linear-gradient(115deg, #edf4f1 7%, #a8d7cd 75%);
}

.promo__item--indigo {
	background: linear-gradient(120deg, #acc2f3 46%, #0354eb 120%);
}

.promo__photo {
	flex-shrink: 0;
	width: 250px;
	height: 200px;
	border-radius: var(--radius-lg);
	overflow: hidden;
	background: var(--color-white);
}

.promo__photo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	background: var(--color-white);
}

.promo__item:first-child,
.promo__item:first-child .promo__photo {
	border-top-right-radius: 0;
}

.promo__item:last-child,
.promo__item:last-child .promo__photo {
	border-top-left-radius: 0;
}

.promo__content {
	display: flex;
	flex-direction: column;
	gap: 32px;
	min-width: 0;
}

.promo__item:first-child .promo__content {
	gap: 40px;
}

.promo__info {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.promo__name {
	font-weight: 600;
	font-size: 26px;
	text-transform: uppercase;
}

.promo__price {
	font-weight: 600;
	font-size: 26px;
}

/* The promo grid needs ~600px per card to lay out photo + text without
   squeezing; rather than shrinking either dynamically, this block just
   switches over to the mobile horizontal-scroll slider earlier than the
   rest of the site (1440px instead of 1024px), while everything above
   still shows the full 2-column grid at full size. */
@media (max-width: 1440px) {
	.promo__photo {
		width: 100%;
	}

	.promo-slider__dots {
		display: none;
	}

	.promo-slider__slide {
		display: contents;
	}

	.promo__list {
		display: contents;
	}

	.promo__item {
		flex: 0 0 268px;
		width: 268px;
		flex-direction: column;
		align-items: flex-start;
		text-align: left;
		gap: 24px;
	}

	.promo__content,
	.promo__item:first-child .promo__content {
		gap: 16px;
	}

	.promo__name,
	.promo__price {
		font-size: 1.15rem;
	}

	.promo-slider__track {
		gap: 16px;
	}
}

body:has(.promo-modal:target),
body:has(.form-modal:target) {
	overflow: hidden;
}

.promo-modal {
	display: none;
	position: fixed;
	inset: 0;
	z-index: 300;
}

.promo-modal:target {
	display: block;
}

.promo-modal__backdrop {
	position: absolute;
	inset: 0;
	background: rgba(34, 34, 34, 0.55);
	cursor: pointer;
}

.promo-modal__dialog {
	position: relative;
	z-index: 1;
	width: min(460px, calc(100% - 32px));
	max-height: 96vh;
	overflow-y: auto;
	margin: 2vh auto;
	padding: clamp(20px, 3vw, 28px);
	background: linear-gradient(108deg, #ffffff 2.75%, #e4e5e6 97.25%);
	border-radius: var(--radius-lg);
}

.promo-modal__header {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 16px;
	margin-bottom: 24px;
}

.promo-modal__close {
	flex-shrink: 0;
	width: 56px;
	height: 56px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background: var(--color-orange-light);
	transition: opacity 0.2s ease;
}

.promo-modal__close:hover,
.promo-modal__close:focus-visible {
	opacity: 0.8;
}

.promo-modal__close img {
	width: 16px;
	height: 16px;
}

.promo-modal__photo {
	border-radius: var(--radius-lg);
	overflow: hidden;
	background: var(--color-white);
	margin-bottom: 24px;
}

.promo-modal__photo img {
	display: block;
	width: 100%;
	height: auto;
	max-height: 400px;
	object-fit: cover;
}

.promo-modal__title {
	flex: 1 1 auto;
	font-weight: 300;
	font-size: var(--fs-h4);
	line-height: 1.1;
	text-transform: uppercase;
	letter-spacing: -0.03em;
}

.promo-modal__title small {
	display: block;
	font-size: 0.9rem;
	font-weight: 400;
	text-transform: none;
	color: var(--color-text-secondary);
	margin-top: 4px;
}

.promo-modal__price {
	display: flex;
	align-items: center;
	gap: 16px;
	font-weight: 300;
	font-size: var(--fs-h4);
	margin-bottom: 16px;
}

.promo-modal__details {
	display: flex;
	flex-direction: column;
	gap: 12px;
	margin-bottom: 16px;
}

.promo-modal__body .button {
	width: 100%;
}

.promo-modal__detail {
	display: flex;
	gap: 16px;
	align-items: flex-start;
}

.promo-modal__detail img {
	flex-shrink: 0;
}

.promo-modal__detail--pin span {
	color: var(--color-text-secondary);
	font-size: 0.95rem;
}

.form-modal {
	display: none;
	position: fixed;
	inset: 0;
	z-index: 300;
}

.form-modal:target {
	display: block;
}

.form-modal__backdrop {
	position: absolute;
	inset: 0;
	background: rgba(34, 34, 34, 0.55);
	cursor: pointer;
}

.form-modal__dialog {
	position: relative;
	z-index: 1;
	width: min(460px, calc(100% - 32px));
	max-height: 85vh;
	overflow-y: auto;
	margin: 6vh auto;
	padding: clamp(20px, 3vw, 32px);
	background: var(--color-white);
	border-radius: var(--radius-lg);
}

.form-modal__header {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 32px;
}

.form-modal__title {
	flex: 1 1 auto;
	font-weight: 500;
	font-size: var(--fs-h7);
	color: var(--color-black);
}

.form-modal__close {
	flex-shrink: 0;
	width: 56px;
	height: 56px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background: #e4f4ff;
	transition: opacity 0.2s ease;
}

.form-modal__close:hover,
.form-modal__close:focus-visible {
	opacity: 0.8;
}

.form-modal__close img {
	width: 16px;
	height: 16px;
}

.form-modal__fields {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin-bottom: 32px;
}

.form-modal__readonly {
	width: 100%;
	padding: 16px;
	background: var(--color-white);
	border: 1px solid var(--color-orange-light);
	border-radius: var(--radius-sm);
	font-size: var(--fs-body);
	color: var(--color-black);
}

.form-modal__consent {
	margin-bottom: 32px;
}

/* -------------------- 8. SPECIALTIES -------------------- */

.specialties {
	padding-top: var(--section-padding-block);
	background: linear-gradient(140deg, #ffffff 3%, var(--color-grey-light) 97%);
}
.specialties__block {
	padding-bottom: 94px;
}

.specialties .section-heading {
	gap: 18px;
	margin-bottom: 58px;
}

.specialties__list {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 30px 32px;
	margin-bottom: 64px;
}

.specialties__icon-slot {
	display: flex;
	align-items: flex-end;
	height: 75px;
	margin-bottom: 16px;
}

.specialties__icon {
	width: auto;
	height: auto;
}

.specialties__name {
	font-weight: 300;
	font-size: var(--fs-h4);
	text-transform: uppercase;
	letter-spacing: -0.03em;
	margin-bottom: 8px;
}

.specialties__desc {
	color: var(--color-text-secondary);
}

/* -------------------- 9. TRUST -------------------- */

.trust {
	padding-top: var(--section-padding-block);
}

.trust .section-heading {
	gap: 15px;
	margin-bottom: 64px;
}

.trust__list {
	display: flex;
	flex-direction: column;
	gap: 0;
	margin-bottom: 64px;
}
.trust__block {
	padding-bottom: 90px;
}

.trust__item {
	display: flex;
	align-items: center;
	gap: 32px;
}

.trust__item--reverse {
	flex-direction: row-reverse;
}

.trust__tiles {
	display: flex;
	flex: 0 0 auto;
	width: 592px;
	max-width: 50%;
	overflow: hidden;
}

.trust__tile {
	display: block;
	flex: 1 1 0;
	min-width: 0;
	aspect-ratio: 1;
	object-fit: cover;
	overflow: hidden;
	background: var(--color-white);
}

.trust__tile > img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.trust__tile--mirror {
	transform: scaleX(-1);
}

.trust__tile--flip {
	transform: rotate(180deg);
}

.trust__tile--photo-tr {
	border-top-right-radius: 32%;
}

.trust__tile--photo-tr > img {
	object-position: center 18%;
	transform: scale(1.9);
	transform-origin: center 0%;
}

.trust__tile--photo-bl {
	border-bottom-left-radius: 32%;
}

.trust__tile--photo-bl > img {
	object-position: center 14%;
	transform: scale(1.6);
	transform-origin: center 0%;
}

.trust__tile--spacer {
	visibility: hidden;
}

.trust__filler {
	display: flex;
	width: 888px;
	max-width: 75%;
	overflow: hidden;
}

.trust__filler--right {
	justify-content: flex-end;
	margin-left: auto;
}

.trust__content {
	flex: 1 1 auto;
	min-width: 0;
	padding-bottom: 20px;
}

/* Items 3 & 5 ("Комплексный подход", "Комфорт и забота") are narrower,
   left-aligned rows in Figma (not full container width like the other
   items) — their tiles sit directly under the filler row above/below,
   so the content column can't just flex-grow to fill the remaining
   1216px like the other items do. */
.trust__item--fixed {
	align-self: flex-start;
}

.trust__item--fixed .trust__content {
	flex: 0 0 auto;
	/* var(--trust-content-width) is a fixed per-item px value (set inline
	   in HTML) tuned for the wide desktop container — it doesn't scale
	   down, so cap it with a vw-based value below ~1270px instead of
	   letting it stay fixed while its own container narrows. */
	width: min(var(--trust-content-width), 44vw);
}

.trust__item--fixed .trust__tiles {
	/* Matches .trust__tiles' own max-width: 50% cap (used by the other,
	   non-"fixed" trust items) at the point it would otherwise start
	   differing — without this, these cards' photo tiles stayed frozen
	   at their full size below ~1300px while every other card's tiles
	   kept shrinking, breaking the grid's consistency. */
	max-width: min(592px, 46vw);
}

.trust__name {
	font-weight: 300;
	font-size: var(--fs-h3);
	line-height: var(--lh-tight);
	text-transform: uppercase;
	letter-spacing: -0.03em;
	margin-bottom: 16px;
}

.trust__desc {
	color: var(--color-text-secondary);
	max-width: 60ch;
}

/* -------------------- 10. DOCTORS -------------------- */

.doctors {
	padding-top: var(--section-padding-block);
	background: linear-gradient(140deg, #ffffff 3%, var(--color-grey-light) 97%);
}
.doctor_block {
	padding-bottom: 96px;
}
/* The doctors section's lead paragraph gets its line-height: 1.1 via an
   inline style on the element itself (index.html), not here. */

.doctor-card {
	display: flex;
	/* Media and body shrink together (see min-width: 0 below) instead of
	   wrapping onto two rows — wrapping is reserved for the dedicated
	   stacked mobile layout at ≤1024px. min-height (not a fixed height)
	   still lets the card grow if content ever needs more room than
	   425px even while shrunk. */
	flex-wrap: nowrap;
	gap: 32px;
	align-items: center;
	min-height: 425px;
	background: var(--color-white);
	border-radius: 0 var(--radius-xl) var(--radius-xl);
	overflow: hidden;
	margin-bottom: var(--gap-lg);
	box-shadow: var(--shadow-card);
}

.doctor-card[hidden] {
	display: none;
}

.doctor-card__media {
	position: relative;
	flex: 0 1 592px;
	min-width: 0;
	aspect-ratio: 592 / 425;
	border-radius: 0 var(--radius-xl) var(--radius-xl) var(--radius-xl);
	overflow: hidden;
	background: linear-gradient(110deg, #acd7f3 26%, #acd7f3 46%, #0399eb 120%);
}

.doctor-card__photo {
	position: absolute;
	top: -34.59%;
	left: 13.18%;
	width: 120.27%;
	height: 251.3%;
	max-width: none;
	object-fit: cover;
}

/* Бакушев's testimonial quote-card photo has its own exact crop in
   Figma (node 522:1045, which nests an extra inner percentage-crop
   layer inside the outer mask box — distinct from the default above,
   whose source layer fills its mask box directly with no inner crop). */
.doctor-card__photo--bakushev {
	top: -0.05%;
	left: 31.28%;
	width: 86.72%;
	height: 181.11%;
}

.doctor-card__play {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 100px;
	height: 100px;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: opacity 0.2s ease;
}

.doctor-card__play:hover,
.doctor-card__play:focus-visible {
	opacity: 0.8;
}

.doctor-card__play img {
	width: 100%;
	height: 100%;
}

.doctor-card__overlay {
	position: absolute;
	top: 32px;
	left: 29px;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	width: 409px;
}

.doctor-card__overlay > * {
	width: 100%;
	min-width: 0;
}

.doctor-card__logo {
	display: block;
	width: 409px;
	height: auto;
	margin-bottom: 24px;
}

.doctor-card__overlay-phone,
.doctor-card__overlay-address {
	font-weight: 600;
	font-size: var(--fs-h7);
	line-height: var(--lh-tight);
	color: var(--color-orange);
}

.doctor-card__overlay-phone a {
	color: inherit;
}

.doctor-card__overlay-phone {
	margin-bottom: 8px;
}

.doctor-card__overlay-address {
	margin-bottom: 32px;
}

.doctor-card__overlay-fio {
	font-weight: 600;
	font-size: clamp(1rem, 0.9rem + 0.3vw, 1.125rem);
	color: var(--color-black);
	margin-bottom: 8px;
	width: 206px;
}

.doctor-card__overlay-role {
	font-size: clamp(0.8125rem, 0.75rem + 0.25vw, 0.875rem);
	color: var(--color-text-secondary);
	width: 206px;
}

.doctor-card__body {
	flex: 0 1 592px;
	min-width: 0;
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 52px;
}

.doctor-card__name {
	font-weight: 300;
	font-size: var(--fs-h3);
	line-height: var(--lh-tight);
	text-transform: uppercase;
	letter-spacing: -0.03em;
	margin-bottom: 16px;
}

.doctor-card__role {
	color: var(--color-text-secondary);
	width: 219px;
	margin-bottom: 24px;
}

.doctor-card__experience {
	display: flex;
	align-items: center;
	gap: 8px;
}

.doctor-card__experience-icon {
	flex-shrink: 0;
}

.doctor-card__experience strong {
	font-weight: 600;
}

.doctor-card__actions {
	display: flex;
	align-items: center;
	gap: 24px;
}

/* -------------------- 11. TECHNOLOGIES -------------------- */

.technologies {
	padding-top: var(--section-padding-block);
}

.technologies__list {
	display: flex;
	flex-direction: column;
	gap: 0;
}

.technologies__item {
	display: flex;
	align-items: center;
	gap: 32px;
}

.technologies__tiles {
	display: flex;
	flex: 0 0 auto;
	width: 592px;
	max-width: 50%;
	overflow: hidden;
}

.technologies__tile {
	display: block;
	flex: 1 1 0;
	min-width: 0;
	aspect-ratio: 1;
	object-fit: cover;
	background: var(--color-white);
}

.technologies__tile--mirror {
	transform: scaleX(-1);
}

.technologies__tile--spacer {
	visibility: hidden;
}

.technologies__filler {
	display: flex;
	width: 888px;
	max-width: 75%;
}

.technologies__content {
	flex: 1 1 auto;
	min-width: 0;
}

.technologies__content--w577 {
	flex: 0 1 577px;
}

.technologies__content--w525 {
	flex: 0 1 525px;
}

.technologies__item--fixed {
	align-self: flex-start;
}

.technologies__item--fixed .technologies__content {
	flex: 0 1 var(--tech-content-width);
}

.technologies__item--fixed .technologies__tiles {
	/* Same fix as .trust__item--fixed .trust__tiles: a flat cap left
	   these tiles frozen at full size below ~1300px while the section's
	   other tiles kept shrinking. */
	max-width: min(592px, 46vw);
}

.technologies__name {
	font-weight: 300;
	font-size: var(--fs-h4);
	line-height: var(--lh-tight);
	text-transform: uppercase;
	letter-spacing: -0.03em;
	margin-bottom: 16px;
}

.technologies__desc {
	color: var(--color-text-secondary);
	max-width: 60ch;
}

/* -------------------- 12. SERVICES -------------------- */

.services {
	padding-top: var(--section-padding-block);
	background: linear-gradient(133deg, #ffffff 3%, var(--color-grey-light) 97%);
}

.services__list {
	display: flex;
	flex-direction: column;
	gap: 12px;
	margin-bottom: var(--gap-lg);
}

.services__item {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 32px;
	background: var(--color-white);
	border-radius: var(--radius-md);
	min-height: 99px;
}

.services__name {
	font-weight: 500;
	font-size: var(--fs-h5);
	text-transform: uppercase;
}

.services__price {
	font-weight: 500;
	font-size: var(--fs-h5);
	letter-spacing: -0.03em;
	white-space: nowrap;
}

.services__footer {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
}

.services__note {
	max-width: 593px;
	color: var(--color-text-secondary);
}

/* -------------------- 13. FAQ -------------------- */

.faq {
	padding-top: var(--section-padding-block);
}

.faq__title {
	font-weight: 300;
	font-size: var(--fs-h2);
	line-height: var(--lh-tight);
	text-transform: uppercase;
	letter-spacing: -0.03em;
}

.faq__title-accent {
	color: var(--color-orange);
}

.faq__list {
	display: flex;
	gap: 32px;
	margin-top: 25px;
}

.faq__column {
	display: flex;
	flex-direction: column;
	flex: 1 1 0;
	min-width: 0;
	gap: 48px;
}

@media (max-width: 1024px) {
	.faq__list {
		flex-direction: column;
	}
}

/* -------------------- 14. CALLBACK -------------------- */

.callback {
	padding-top: var(--section-padding-block);
	background: linear-gradient(144deg, #f8fcff 28%, #acd7f3 82%);
	overflow: hidden;
}

.callback__inner {
	display: flex;
	position: relative;
	align-items: stretch;
	justify-content: space-between;
	gap: clamp(24px, 4vw, 48px);
	text-align: left;
	padding-bottom: 96px;
}

.callback__content {
	width: 593px;
	max-width: 100%;
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 32px;
	z-index: 2;
}

.callback__media {
	width: 75.5%; /* 906 / 1216 (container width), per design */
	aspect-ratio: 906 / 658;
	position: absolute;
	z-index: 1;
	right: -18%; /* lets the photo bleed past the container edge, per design */
	display: flex;
	align-items: flex-end;
	justify-content: center;
	min-width: 0;
}

.callback__decor {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 60% 20%;
	pointer-events: none;
}

.callback__title {
	font-weight: 300;
	font-size: var(--fs-h3);
	line-height: var(--lh-tight);
	text-transform: uppercase;
	letter-spacing: -0.03em;
}

.callback-form {
	width: 100%;
	max-width: 593px;
	/* No-op on desktop (max-width already matches .callback__content's
	   own width exactly, so there's no leftover space to center
	   within) — only takes effect once max-width caps the form below
	   its grid track's width on mobile. */
	margin-inline: auto;
	display: flex;
	flex-direction: column;
	padding: 32px;
	background: var(--color-white);
	border-radius: var(--radius-lg);
	text-align: left;
}

.callback-form__title {
	font-weight: 500;
	font-size: var(--fs-h7);
	line-height: var(--lh-tight);
	margin-bottom: 32px;
}

.callback-form__fields {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin-bottom: 8px;
}

.callback-form__consent {
	display: flex;
	gap: 8px;
	align-items: flex-start;
	font-size: 11px;
	color: var(--color-black);
	margin-bottom: 32px;
}

.callback-form__consent input {
	width: 22px;
	height: 22px;
	flex-shrink: 0;
	accent-color: var(--color-blue-mid);
	border: 2px solid var(--color-blue-mid);
	border-radius: 0;
}

.callback-form__consent a {
	font-weight: 600;
	color: var(--color-blue-mid);
	text-decoration: underline;
}

.callback-form__submit {
	width: 100%;
	height: 56px;
	font-weight: 600;
}

/* -------------------- 15. CONTACT -------------------- */

.contact {
	position: relative;
	/* Without an explicit z-index, this doesn't establish its own
	   stacking context, so .contact__map's z-index: -1 escapes to a
	   wider one — the map still shows through (nothing opaque paints
	   over it), but the section box itself ends up on top for
	   hit-testing, blocking clicks/drags on the map everywhere. */
	z-index: 0;
	padding-top: var(--section-padding-block);
	overflow: hidden;
}

.contact__map {
	position: absolute;
	inset: 0;
	z-index: -1;
}

/* The container spans the section's full width/height even though only
   the card has visible content — without this it silently swallows
   clicks/drags meant for the map showing through everywhere else,
   making the map look non-interactive. */
.contact .container {
	pointer-events: none;
}

.contact-card {
	pointer-events: auto;
}

.contact__decor {
	display: block;
	width: 100%;
	height: 100%;
	border: 0;
}

.contact-card {
	display: flex;
	flex-direction: column;
	gap: 24px;
	max-width: 370px;

	padding: 32px;
	background: var(--color-white);
	border-radius: var(--radius-lg) 0 var(--radius-lg) var(--radius-lg);
	box-shadow: var(--shadow-card);
}

.contact-card__group {
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.contact-card__phone a,
.contact-card__email a {
	font-weight: 600;
	color: var(--color-orange);
}

.contact-card__phone {
	font-size: 32px;
	text-transform: uppercase;
}

.contact-card__email {
	font-size: 24px;
}

.contact-card__social {
	display: flex;
	gap: 16px;
}

.contact-card .social-btn {
	width: 48px;
	height: 48px;
	border-color: var(--color-orange);
}

/* -------------------- 16. FOOTER -------------------- */

.footer {
	padding-top: var(--section-padding-block);
	background: linear-gradient(
		109deg,
		color-mix(in srgb, var(--color-orange-light) 35%, var(--color-orange)) 0%,
		var(--color-orange) 100%
	);
	color: var(--color-white);
}
.footer__social img {
	filter: brightness(0) invert(1);
}

.footer__top {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	margin-bottom: var(--gap-lg);
}

.footer__logo img {
	width: 384px;
	height: auto;
}

.footer__list {
	display: flex;
	flex-wrap: wrap;
	gap: 32px;
}

.footer__link {
	font-weight: 500;
	font-size: var(--fs-h7);
}

.footer__link:hover {
	opacity: 0.8;
}

.footer__bottom {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 40px;
}

.footer__contact {
	display: flex;
	flex-direction: column;
	gap: 24px;
	max-width: 305px;
}

.footer__phone,
.footer__email {
	font-weight: 500;
}

.footer__phone {
	font-size: var(--fs-h5);
	text-transform: uppercase;
}

.footer__email {
	font-size: var(--fs-h7);
}

.footer__social {
	display: flex;
	gap: 8px;
}

.footer__legal {
	display: flex;
	flex-wrap: nowrap;
	gap: 24px 86px;
	align-self: flex-end;
	white-space: nowrap;
}

.footer__legal a:hover {
	text-decoration: underline;
}

@media (max-width: 639px) {
	.footer__legal {
		align-self: flex-start;
	}
}

/* -------------------- 17. SHARED RESPONSIVE RULES -------------------- */

@media (max-width: 1024px) {
	.specialties__list {
		grid-template-columns: repeat(2, 1fr);
		gap: 32px 40px;
		margin-bottom: 32px;
	}

	.specialties .section-heading {
		gap: 20px;
		margin-bottom: 32px;
	}
	.trust__item {
		gap: 0;
	}

	.technologies__content {
		margin-top: 40px;
	}
	.doctor-card {
		height: auto;
	}

	.doctor-card__body {
		padding: 40px;
	}

	.trust__item,
	.trust__item--reverse,
	.technologies__item {
		flex-direction: column;
		align-items: flex-start;
		text-align: left;
	}

	.technologies__content--w577,
	.technologies__content--w525 {
		flex: 1 1 auto;
	}

	.technologies__item--fixed {
		align-self: stretch;
	}

	.technologies__item--fixed .technologies__content {
		flex: 1 1 auto;
	}

	.technologies__item--fixed .technologies__tiles {
		max-width: none;
	}

	.trust__item--fixed {
		align-self: stretch;
	}

	.trust__item--fixed .trust__content {
		flex: 1 1 auto;
		width: auto;
	}
	.trust__content {
		margin-top: 25px;
	}

	.trust .section-heading {
		gap: 24px;
		margin-bottom: 32px;
	}

	.trust__list {
		margin-bottom: 32px;
	}

	.trust__tiles {
		width: 100%;
		max-width: none;
	}

	.trust__item--fixed .trust__tiles {
		max-width: none;
	}

	.trust__filler {
		width: 100%;
		max-width: none;
		justify-content: center;
		margin-left: 0;
	}

	.trust__filler .trust__tile:first-child,
	.technologies__tile--spacer {
		display: none;
	}

	.technologies__tiles,
	.technologies__filler {
		width: 100%;
		max-width: none;
	}

	.services__item {
		flex-wrap: wrap;
	}
	.trust__desc {
		margin-bottom: 20px;
	}
}

/* Below 640px (real phones), the 2-column specialties grid set above gets
   too cramped, so it collapses to 1 column. Above that — including the
   whole iPad range — 2 columns fills the width properly instead of
   looking sparse. */
@media (max-width: 639px) {
	.specialties__list {
		grid-template-columns: 1fr;
	}
}

@media (max-width: 1024px) {
	.header {
		border-bottom: 1px solid #f1f1f1;
	}

	.section-heading__lead {
		font-size: 18px;
		text-align: left;
	}

	.trust__item,
	.trust__item--reverse {
		flex-direction: column-reverse;
	}

	.trust__filler {
		width: 100%;
		margin-left: 0;
	}

	.trust__filler .trust__tile:first-child {
		display: none;
	}

	.technologies__item:not(.technologies__item--reverse) {
		flex-direction: column-reverse;
	}

	.technologies__tile--spacer {
		display: none;
	}

	.doctor-card {
		flex-direction: column;
		padding: 0;
		background: none;
		box-shadow: none;
		overflow: visible;
	}

	.doctor-card__media {
		position: relative;
		z-index: 2;
		width: 100%;
		flex-basis: auto;
	}

	.doctor-card__logo {
		/* Fixed at 140px, this looked fine on a ~375px phone but tiny once
		   the card stretches to the full width of a ~1024px iPad — scale
		   it with the viewport instead, capped well below the 409px
		   desktop size. */
		width: clamp(140px, 32vw, 340px);
	}

	.doctor-card__overlay-phone {
		font-size: clamp(1rem, 0.5rem + 2vw, 1.75rem);
	}

	.doctor-card__overlay-address {
		font-size: clamp(0.8125rem, 0.7rem + 0.9vw, 1.25rem);
	}

	.doctor-card__overlay-fio,
	.doctor-card__overlay-role {
		display: none;
	}

	.doctor-card__body {
		position: relative;
		width: 100%;
		z-index: 1;
		flex-basis: auto;
		margin-top: -90px;
		padding: 90px 24px 24px;
		background: var(--color-white);
		border-radius: 0 0 var(--radius-xl) var(--radius-xl);
		box-shadow: var(--shadow-card);
	}

	.callback__inner {
		display: grid;
		/* Without an explicit column, the implicit auto-sized track can't
		   shrink below its content's own intrinsic width — that both kept
		   .callback-form's max-width from ever centering (the track
		   stayed wider than 593px, but wasn't the "wrong" width — the
		   form just sat flush at its start) and forced real overflow at
		   narrow phone widths where nothing could shrink further. */
		grid-template-columns: minmax(0, 1fr);
		grid-template-areas:
			'title'
			'media'
			'form'
			'note';
		gap: 24px;
		margin-right: 0;
		text-align: left;
	}

	.callback__content {
		display: contents;
	}

	.callback__title {
		grid-area: title;
		max-width: none;
	}

	.callback__media {
		grid-area: media;
		position: static;
		width: 100%;
		max-height: none;
	}

	.callback-form {
		grid-area: form;
	}

	.callback__note {
		grid-area: note;
	}

	.services__item {
		flex-direction: column;
		flex-wrap: nowrap;
		align-items: flex-start;
		gap: 12px;
	}

	.services__price {
		color: var(--color-orange);
	}

	.footer__top {
		flex-direction: column;
		align-items: flex-start;
		gap: 40px;
	}

	.footer__list {
		flex-direction: column;
		gap: 24px;
	}

	.footer__bottom {
		flex-direction: column;
		gap: 40px;
	}

	.footer__legal {
		flex-direction: column;
		flex-wrap: wrap;
		white-space: normal;
		align-self: flex-start;
		gap: 24px;
	}

	.contact {
		padding-block: 0;
	}

	.contact__map {
		position: static;
		width: 100%;
		height: 480px;
	}

	.contact .container {
		padding-block: 40px 96px;
	}

	.contact-card {
		max-width: 100%;
		gap: 24px;
		padding: 0;
		background: none;
		box-shadow: none;
		border-radius: 0;
	}

	.contact-card__phone {
		font-size: 2rem;
	}

	.contact-card__email {
		font-size: 1.5rem;
	}
}

@media (max-width: 479px) {
	.callback-form {
		padding: 20px;
	}

	.promo__item,
	.services__item {
		padding: 20px;
	}
}

/* -------------------- 18. DOCTORS PAGE -------------------- */
/* Standalone "Врачи центра" page (doctors.html) — breadcrumb + full grid
   of dentist_page tiles. Header, callback, contact and footer sections on
   this page are the exact same markup/classes as index.html. */

.breadcrumbs {
	padding-block: 8px;
}

.breadcrumbs__inner {
	display: flex;
	align-items: center;
	gap: 8px;
}

.breadcrumbs__link {
	padding: 10px;
	/* .container and .breadcrumbs__inner are the same element here, so
	   this can't be cancelled on the row itself without shifting the
	   whole centered container — only this link's own leading edge
	   needs to be pulled back so its text still starts flush with the
	   rest of the page's content, while the padding still contributes
	   its real, visible spacing on every other edge. */
	font-weight: 600;
	font-size: var(--fs-caption);
	line-height: var(--lh-normal);
	color: var(--color-text-secondary);
}

.breadcrumbs__link:hover {
	color: var(--color-orange);
}

.breadcrumbs__arrow {
	width: 4px;
	height: 4px;
	margin-top: 2px;
}

.breadcrumbs__current {
	padding: 10px;
	font-weight: 600;
	font-size: var(--fs-caption);
	line-height: var(--lh-normal);
	color: var(--color-text);
}

/* On the doctor-detail pages, the last breadcrumb segment (the doctor's
   name) is styled larger than the other links — 18px vs. the 14px used
   everywhere else the breadcrumb appears (e.g. doctors.html's "Врачи"). */
.doctor-page .breadcrumbs__current {
	font-size: var(--fs-body);
}

.doctors-page {
	padding-block: 65px;
}

.dentist-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 16px;
	margin-top: 64px;
}

.dentist-tile {
	display: flex;
	flex-direction: column;
	gap: 32px;
	padding: 24px;
	/* Figma's dentist_card is a fixed 639px (not content-driven) — the
	   card's own inner content happens to add up to exactly that, so
	   this only matters when a role/name wraps differently than the
	   reference text. */
	min-height: 639px;
	background: var(--color-white);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-card);
}

.dentist-tile__photo {
	position: relative;
	width: 100%;
	height: 260px;
	border-radius: 20px;
	overflow: hidden;
	background: var(--color-grey-light);
}

/* object-fit: cover always preserves the photo's own proportions no
   matter what the container's aspect ratio ends up being — needed here
   because the frame's height is fixed (260px) but its width is
   responsive, so a percentage-based width/height (matching Figma's raw
   numbers) only gave correct proportions at one exact viewport width and
   distorted the image at every other width. The extra per-photo zoom
   Figma applies is instead a uniform transform: scale(), which can't
   distort proportions either. */
.dentist-tile__photo-img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Figma tunes the crop differently per breakpoint (the mobile frame's
   photo box is a different aspect ratio than desktop's), so these are
   the desktop values — the mobile override below matches the mobile
   frame's crop instead. */
.dentist-tile__photo-img--sarvilin {
	object-position: center 15%;
	transform: scale(1.15);
}

.dentist-tile__photo-img--bakushev {
	object-position: center 15%;
	transform: scale(1.3);
}

/* From 1350px up, the grid's content width is permanently capped at
   exactly 1216px (.container has already saturated to its own
   max-width there), so the photo frame is always exactly 244x260 —
   the same box Figma's raw crop numbers were authored for. Above this
   threshold there's no risk of the container-aspect-ratio drift that
   made percentage-based crops unsafe elsewhere, so these use Figma's
   exact values for true pixel-perfect placement instead of the
   scale() approximation. */
@media (min-width: 1350px) {
	.dentist-tile__photo-img--sarvilin {
		position: absolute;
		inset: auto;
		top: -14.72%;
		left: -18.02%;
		width: 136.03%;
		height: 180.28%;
		max-width: none;
		object-fit: fill;
		object-position: 0 0;
		transform: none;
	}

	.dentist-tile__photo-img--bakushev {
		position: absolute;
		inset: auto;
		top: -18.46%;
		left: -29.13%;
		width: 159.03%;
		height: 210.77%;
		max-width: none;
		object-fit: fill;
		object-position: 0 0;
		transform: none;
	}
}

@media (max-width: 767px) {
	.dentist-tile__photo-img--sarvilin {
		object-position: center 20%;
		transform: scale(1);
	}

	.dentist-tile__photo-img--bakushev {
		object-position: center 15%;
		transform: scale(1.15);
	}
}

.dentist-tile__info {
	display: flex;
	flex-direction: column;
	gap: 24px;
}

.dentist-tile__name-block {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.dentist-tile__name {
	font-weight: 500;
	font-size: 24px;
	line-height: 1.1;
	color: var(--color-text);
}

.dentist-tile__role {
	font-weight: 400;
	font-size: var(--fs-body);
	line-height: 1.1;
	color: var(--color-text-secondary);
	/* Reserves space for 2 lines even when the role text only needs 1
	   (e.g. "стоматолог-ортопед" vs Сарвилин's 3-part role), so the
	   experience row below lines up across every card regardless of how
	   long each doctor's role text is. */
	min-height: calc(1.1em * 2);
}

.dentist-tile__experience {
	display: flex;
	align-items: center;
	gap: 8px;
	font-weight: 400;
	font-size: var(--fs-body);
	line-height: var(--lh-normal);
	color: var(--color-text);
}

.dentist-tile__experience-icon {
	width: 24px;
	height: 24px;
	flex-shrink: 0;
}

.dentist-tile__actions {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 20px;
}

@media (max-width: 1024px) {
	.dentist-grid {
		grid-template-columns: repeat(2, 1fr);
		gap: 24px;
	}
}

@media (max-width: 767px) {
	.dentist-grid {
		grid-template-columns: 1fr;
	}

	.dentist-tile {
		padding: 32px;
		/* Figma's mobile cards aren't a uniform fixed height (580px for
		   the first, 560px for the rest) — they're just as tall as their
		   own content, unlike the desktop row where every card matches
		   the tallest one. */
		min-height: 0;
	}

	.dentist-tile__name {
		font-size: 22px;
	}

	.dentist-tile__actions {
		flex-direction: row;
		align-items: center;
		gap: 16px;
	}
}

/* -------------------- 19. DOCTOR DETAIL PAGE -------------------- */
/* Standalone per-doctor page (doctor-sarvilin.html, doctor-bakushev.html —
   same template, different content per doctor; likely backend-driven
   later). Header, callback, contact and footer are the same markup as
   index.html/doctors.html. section-heading__title/__accent (50px, from
   the shared doctors.html section) is reused for every heading here. */

/* .doctor-hero itself carries no vertical padding — Figma's "dentist_card"
   section frame has none of its own (only the shared px-352 container
   inset); all vertical spacing comes from the breadcrumb above and the
   next section's own top-padding below. */

.doctor-hero__card {
	display: flex;
	align-items: center;
	gap: 32px;
	/* No bottom padding, by design — the photo (the row's tallest child)
	   sits flush against the card's bottom edge; only the shorter text
	   column is inset from it, via align-items: center. */
	padding: 32px 32px 0;
	border-radius: var(--radius-xl);
	background: linear-gradient(
		144.5deg,
		#ffffff 3%,
		var(--color-grey-light) 97%
	);
}

.doctor-hero__photo {
	position: relative;
	flex: 0 0 602px;
	width: 602px;
	height: 557px;
	border-radius: var(--radius-xl);
	overflow: hidden;
	background: var(--color-grey-light);
}

/* Figma positions each doctor's hero photo with its own custom crop (a
   fixed size + offset, not a plain object-fit:cover) — replicated here
   as exact percentages of the 602x557 frame, which stays proportional
   at any width since .doctor-hero__photo keeps that same aspect ratio
   all the way down to the 767px breakpoint. */
.doctor-hero__photo img {
	position: absolute;
	max-width: none;
	display: block;
}

.doctor-hero__photo-img--sarvilin {
	width: 118.44%;
	height: 191.92%;
	left: -6.15%;
	top: -4.49%;
}

.doctor-hero__photo-img--bakushev {
	width: 79.67%;
	height: 218.9%;
	left: 14.04%;
	top: 0.59%;
}

.doctor-hero__content {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 136px;
	flex: 1 1 auto;
	min-width: 0;
}

.doctor-hero__info {
	display: flex;
	flex-direction: column;
	gap: 24px;
}

.doctor-hero__name-block {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.doctor-hero__name {
	font-weight: 300;
	font-size: var(--fs-h3);
	line-height: var(--lh-tight);
	letter-spacing: -0.03em;
	text-transform: uppercase;
}

.doctor-hero__name span {
	display: block;
}

.doctor-hero__name span:first-child {
	color: var(--color-text);
}

.doctor-hero__name span:not(:first-child) {
	color: var(--color-orange);
}

.doctor-hero__role {
	font-weight: 400;
	font-size: var(--fs-body);
	line-height: var(--lh-normal);
	color: var(--color-text-secondary);
}

.doctor-hero__experience {
	display: flex;
	align-items: center;
	gap: 8px;
	font-weight: 400;
	font-size: var(--fs-body);
	line-height: var(--lh-normal);
	color: var(--color-text);
}

.doctor-hero__experience img {
	width: 24px;
	height: 24px;
	flex-shrink: 0;
}

/* Section title/lead pattern shared by "О враче", "Ключевые направления",
   "Образование и Опыт", "Философия лечения" and the two orange-titled
   testimonial blocks.
   Sections are stacked flush with no gap of their own in Figma — each
   section's *own* top padding is what creates the visible space above
   it, and most sections carry no bottom padding at all (pt-only, per
   dev mode). "Образование и Опыт" is the one exception that also has
   bottom padding, via --education below. */
.doctor-section {
	padding-top: 96px;
}

/* "Образование и Опыт" alone also has its own bottom padding in Figma
   (py-96, not pt-only like the other .doctor-section blocks) — it sits
   right before "Философия лечения", whose own top padding stacks with
   this to form the (intentionally larger) gap between them. */
.doctor-section--education {
	padding-bottom: 96px;
}

.doctor-section__title {
	font-weight: 300;
	font-size: var(--fs-h3);
	line-height: var(--lh-tight);
	letter-spacing: -0.03em;
	text-transform: uppercase;
	color: var(--color-text);
	margin-bottom: 32px;
}

.doctor-section__title--accent {
	color: var(--color-orange);
}

.doctor-section__text {
	font-weight: 400;
	font-size: var(--fs-body);
	line-height: var(--lh-normal);
	letter-spacing: 0.15px;
	color: var(--color-text);
	max-width: 1216px;
}

/* Ключевые направления */
.doctor-directions {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 16px;
	margin-top: 64px;
}

.doctor-directions__item {
	display: flex;
	align-items: center;
	gap: 16px;
	padding: 16px;
	background: #e4f5ff;
	border-radius: var(--radius-md);
}

.doctor-directions__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: 56px;
	height: 56px;
	padding: 16px;
	background: var(--color-white);
	border-radius: 20px;
}

.doctor-directions__icon img {
	width: 24px;
	height: 24px;
}

.doctor-directions__text {
	align-self: center;
	font-family: 'Inter', var(--font-main);
	font-weight: 600;
	font-size: 22px;
	line-height: 1.27;
	color: var(--color-text);
}

/* "Меняем жизнь..." / "Лечение может быть спокойным" — testimonial with
   the doctor-card media reused from index.html/doctors.html. */
.doctor-testimonial {
	display: flex;
	align-items: center;
	gap: 32px;
}

.doctor-testimonial__content {
	display: flex;
	flex-direction: column;
	gap: 32px;
	flex: 0 0 592px;
	width: 592px;
}

/* Wraps the quote + author row: Figma nests these two with their own
   24px gap, distinct from the 32px gap between the title and this block. */
.doctor-testimonial__body {
	display: flex;
	flex-direction: column;
	gap: 24px;
}

.doctor-testimonial__quote {
	font-weight: 500;
	font-size: 20px;
	line-height: var(--lh-normal);
	color: var(--color-text);
}

.doctor-testimonial__author {
	display: flex;
	align-items: center;
	gap: 16px;
}

.doctor-testimonial__avatar {
	flex-shrink: 0;
	width: 72px;
	height: 72px;
	border-radius: 50%;
	object-fit: cover;
}

.doctor-testimonial__author-text {
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.doctor-testimonial__author-name {
	font-weight: 600;
	font-size: var(--fs-caption);
	line-height: var(--lh-normal);
	color: var(--color-text);
}

.doctor-testimonial__author-role {
	font-weight: 500;
	font-size: 12px;
	line-height: var(--lh-normal);
	color: var(--color-text-secondary);
}

/* Reuses .doctor-card__media (from index.html/doctors.html) directly for
   the photo — its own flex-basis + aspect-ratio already matches this
   section's 592x425 photo exactly, without the shadow/background that
   the full .doctor-card wrapper adds for the homepage's card layout. */
.doctor-testimonial .doctor-card__media {
	flex-grow: 0;
}

/* Образование и Опыт */
.doctor-education {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 56px;
	margin-top: 64px;
	margin-bottom: 64px;
}

.doctor-education__col {
	display: flex;
	flex-direction: column;
	gap: 56px;
}

.doctor-education__item {
	display: flex;
	align-items: flex-start;
	gap: 32px;
}

.doctor-education__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: 72px;
	height: 72px;
	background: #e4f5ff;
	border-radius: 20px;
}

/* Figma sizes each icon individually (GraduationCap/Files at 40px,
   Company at 36px, trending-up at 32px) rather than uniformly — the
   width/height attributes on each <img> in the HTML already carry the
   correct per-icon size, so this must not override them. */

.doctor-education__body {
	display: flex;
	flex-direction: column;
	gap: 24px;
	min-width: 0;
}

.doctor-education__label {
	font-weight: 400;
	font-size: var(--fs-body);
	color: var(--color-text-secondary);
}

.doctor-education__list {
	display: flex;
	flex-direction: column;
	gap: 16px;
	font-weight: 400;
	font-size: var(--fs-body);
	line-height: var(--lh-normal);
	color: var(--color-text);
}

.doctor-education__documents {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	height: 48px;
	padding-inline: 24px;
	background: var(--color-blue-mid);
	border-radius: var(--radius-sm);
	font-weight: 600;
	font-size: var(--fs-body);
	color: var(--color-white);
	transition: opacity 0.2s ease;
}

.doctor-education__documents:hover,
.doctor-education__documents:focus-visible {
	opacity: 0.85;
}

.doctor-education__documents img {
	width: 24px;
	height: 24px;
}

/* Философия лечения */
.doctor-philosophy {
	padding-block: 96px;
	padding-top: 110px;
	background: linear-gradient(
		157.6deg,
		#ffffff 3%,
		var(--color-grey-light) 97%
	);
}

.doctor-philosophy__quote-card {
	display: flex;
	align-items: center;
	gap: 128px;
	margin-top: 56px;
	padding: 32px;
	background: var(--color-white);
	box-shadow: var(--shadow-card);
}

.doctor-philosophy__quote {
	flex: 1 1 auto;
	font-weight: 500;
	font-size: 20px;
	line-height: var(--lh-normal);
	color: var(--color-text);
}

.doctor-philosophy__author {
	display: flex;
	flex-shrink: 0;
	align-items: center;
	gap: 16px;
}

.doctor-philosophy__avatar {
	flex-shrink: 0;
	width: 72px;
	height: 72px;
	border-radius: 50%;
	object-fit: cover;
}

.doctor-philosophy__author-text {
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.doctor-philosophy__author-name {
	font-weight: 600;
	font-size: var(--fs-caption);
	line-height: var(--lh-normal);
	color: var(--color-text);
}

.doctor-philosophy__author-role {
	font-weight: 500;
	font-size: 12px;
	line-height: var(--lh-normal);
	color: var(--color-text-secondary);
	max-width: 221px;
}

@media (max-width: 1024px) {
	.doctor-hero__card {
		flex-direction: column;
		align-items: stretch;
	}

	.doctor-hero__photo {
		flex-basis: auto;
		width: 100%;
		height: auto;
		aspect-ratio: 602 / 557;
	}

	.doctor-hero__content {
		gap: 64px;
	}

	.doctor-directions {
		grid-template-columns: 1fr;
	}

	.doctor-testimonial {
		flex-direction: column;
		align-items: stretch;
	}

	.doctor-testimonial__content,
	.doctor-testimonial .doctor-card__media {
		width: 100%;
		flex-basis: auto;
	}

	/* Figma's mobile layout shows the video card before the quote text,
	   the opposite priority from the side-by-side desktop layout. */
	.doctor-testimonial .doctor-card__media {
		order: -1;
	}

	.doctor-philosophy__quote-card {
		flex-direction: column;
		align-items: flex-start;
		gap: 32px;
	}

	/* Mobile lists the 4 education/experience items in a specific order
	   (Образование, Повышение квалификации, Владение технологиями,
	   Опыт) that doesn't match either "column 1 then column 2" or a
	   simple row-by-row flattening of the desktop's 2-column grid — so
	   the column wrappers are flattened and each item explicitly
	   ordered to match. */
	.doctor-education {
		display: flex;
		flex-direction: column;
		gap: 32px;
	}

	.doctor-education__col {
		display: contents;
	}

	.doctor-education__col:nth-child(1) .doctor-education__item:nth-child(1) {
		order: 1;
	}

	.doctor-education__col:nth-child(2) .doctor-education__item:nth-child(1) {
		order: 2;
	}

	.doctor-education__col:nth-child(2) .doctor-education__item:nth-child(2) {
		order: 3;
	}

	.doctor-education__col:nth-child(1) .doctor-education__item:nth-child(2) {
		order: 4;
	}

	/* Figma's mobile frame lists these sections in a different order than
	   desktop: "Образование и Опыт" and the testimonial swap ahead of
	   "Ключевые направления", which sits right before "Философия
	   лечения" here — the reverse of desktop, where education has that
	   position. Every #main child gets an explicit order so only these
	   three move relative to one another. */
	.doctor-page #main {
		display: flex;
		flex-direction: column;
	}

	.doctor-page .breadcrumbs {
		order: 1;
	}

	.doctor-page .doctor-hero {
		order: 2;
	}

	.doctor-page [aria-labelledby='about-title'] {
		order: 3;
	}

	.doctor-page [aria-labelledby='testimonial-title'] {
		order: 4;
	}

	.doctor-page [aria-labelledby='education-title'] {
		order: 5;
	}

	.doctor-page [aria-labelledby='directions-title'] {
		order: 6;
		/* On mobile it's this section (not education) that carries the
		   extra bottom padding before "Философия лечения". */
		padding-bottom: 96px;
	}

	.doctor-page .doctor-philosophy {
		order: 7;
	}

	.doctor-page .callback {
		order: 8;
	}

	.doctor-page .contact {
		order: 9;
	}

	/* ...and on mobile "Образование и Опыт" itself goes back to pt-only,
	   since it no longer sits directly before "Философия лечения". */
	.doctor-section--education {
		padding-bottom: 0;
	}
}

@media (max-width: 767px) {
	.doctor-hero__photo {
		aspect-ratio: 302 / 311;
	}

	/* The mobile Figma frame (302x311) recrops Сарвилин's photo with its
	   own exact numbers, distinct from the 602x557 desktop crop above. */
	.doctor-hero__photo-img--sarvilin {
		width: 131.92%;
		height: 191.9%;
		left: -10.99%;
		top: -4.76%;
	}

	/* No dedicated mobile Figma frame was provided for Бакушев's hero
	   photo — approximate with a plain object-fit crop rather than
	   guessing exact percentages for an unseen design. */
	.doctor-hero__photo-img--bakushev {
		position: static;
		width: 100%;
		height: 100%;
		max-width: 100%;
		object-fit: cover;
		object-position: center 15%;
	}
}

/* -------------------- 20. REVEAL-ON-LOAD -------------------- */
/* Hiding is driven by the html.js-reveal class, added by a *blocking*
   inline script in <head> (see index.html) so blocks are hidden from the
   very first paint — no flash of visible content before JS catches up.
   Without that class (JS disabled) nothing here matches, so content is
   visible by default. js/reveal.js (deferred) adds .is-visible per block
   once its own images + the page's fonts are ready. */

@media (prefers-reduced-motion: no-preference) {
	html.js-reveal main > section,
	html.js-reveal .footer {
		opacity: 0;
		transform: translateY(32px);
	}

	html.js-reveal main > section.is-visible,
	html.js-reveal .footer.is-visible {
		opacity: 1;
		transform: none;
		transition:
			opacity 0.6s ease,
			transform 0.6s ease;
	}
}