/* -------------------- 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);
	/* Fixed, not fluid: the previous clamp() only reached the intended
	   96px at exactly 1920px viewport width and fell as low as 40px on
	   mobile, while every section's own padding-bottom stayed a hard
	   96px — a top/bottom mismatch that grew as the viewport narrowed.
	   Pinned to a flat 96px at every width per explicit direction: every
	   block's top and bottom padding should read 96px site-wide, mobile
	   included, rather than scale with viewport. */
	--section-padding-block: 96px;
	--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 used to carry the bottom gap as a margin-bottom, but
   that wasn't reliably collapsing through .promo to produce a
   consistent gap — that space now lives on .promo's own
   padding-bottom instead (see .promo below). */

/* 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;
}

/* 1120px, not 1024px like the rest of the site's breakpoints: the full
   desktop header (logo + nav + phone + "Обратный звонок" button) needs
   ~1120px of viewport to fit without wrapping/overflowing — collapsing
   to the burger nav any later than that overflows the row by up to
   ~40px on every page between 1025px and ~1118px (confirmed the same
   bug pre-existed site-wide, not something page-specific). The rest of
   the site's own breakpoints (1024px stacking elsewhere) are unrelated
   and unaffected. */
@media (max-width: 1120px) {
	.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: minmax(0, 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 -------------------- */

/* 70px, not the site's usual 96px: Figma's own layout (node 688:4482)
   has the "Смотреть все акции" button overflowing 26px past its
   containing frame's own bottom edge, which eats into what would
   otherwise be a full 96px of padding — the true gap from the button
   to the section's bottom edge measures 70px (confirmed against the
   raw node geometry, not just the rounded Tailwind class name). */
.promo {
	padding-top: var(--section-padding-block);
	padding-bottom: 70px;
}

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

.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: 64px;
}

.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 {
	position: relative;
	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);
}

/* Per-item photo crops (exact Figma percentages, reused from this same
   photo's card on promotions.html — --2/e-max is the one photo Figma's
   current homepage block itself specifies as plain object-fit:cover,
   so it's left on the default rule above; the rest use Figma's manual
   width/height/left/top crop instead). --3/--6 (zirconia, sinus-lift)
   no longer appear in the current homepage block at all, so there's no
   homepage-specific crop for them — reused verbatim from their
   promo-card--3/--6 counterparts since it's the same source photo. */
.promo__item--1 .promo__photo img,
.promo__item--3 .promo__photo img,
.promo__item--4 .promo__photo img,
.promo__item--5 .promo__photo img,
.promo__item--6 .promo__photo img {
	position: absolute;
	max-width: none;
	object-fit: fill;
}

.promo__item--1 .promo__photo img {
	width: 153.57%;
	height: 143.33%;
	left: -26.67%;
	top: -15%;
}

.promo__item--3 .promo__photo img {
	width: 170.67%;
	height: 211.23%;
	left: -30.62%;
	top: -30.79%;
}

.promo__item--4 .promo__photo img {
	width: 100%;
	height: 125%;
	left: 0;
	top: -2.5%;
}

.promo__item--5 .promo__photo img {
	width: 187.77%;
	height: 234.71%;
	left: -41.79%;
	top: -33.46%;
}

.promo__item--6 .promo__photo img {
	width: 111.21%;
	height: 137.64%;
	left: -5.72%;
	top: -13.88%;
}

.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__item centers its children as a group (align-items: center),
   which is right for .promo__photo but wrong here: when the two cards
   in a slide have different content heights (e.g. one price wraps a
   badge, one description runs two lines), each card's own content
   block centers independently, landing "Подробнее" at a different Y
   in each card even though the cards themselves are the same height.
   align-self: stretch makes this column fill the card's full height on
   its own regardless of the sibling photo, and justify-content:
   space-between then pins .promo__info to the top and "Подробнее" to
   the bottom — so it lines up with its counterpart across the slide
   however tall each card's own content happens to be. */
.promo__content {
	display: flex;
	flex-direction: column;
	align-self: stretch;
	justify-content: space-between;
	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-slider__track (flex, default align-items: stretch) already
	   equalizes every card to the tallest one's height — but .promo__item
	   is column-direction here (photo above text, not side-by-side like
	   desktop), so the base rule's align-self: stretch only fills the
	   item's width, not its height. flex-grow is what's needed on this
	   axis: it lets .promo__content claim the item's leftover stretched
	   height so justify-content: space-between actually has room to push
	   "Подробнее" down to a shared bottom edge across every card. */
	.promo__content {
		flex-grow: 1;
	}

	.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: 96px;
}

.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: 96px;
}

.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);
	padding-bottom: 96px;
}

.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);
	padding-bottom: 96px;
	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);
	padding-bottom: 96px;
}

.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;
		/* --radius-xl (60px) is tuned for the 592px-wide desktop card —
		   held past this breakpoint it stayed a fixed 60px while the card
		   itself kept shrinking all the way down to phone width, so the
		   corner curve grew proportionally huge and stopped reading as
		   the same "family" of rounding as the 15px button beside it.
		   Scale it with the viewport instead (10.14vw reproduces the
		   desktop 60px/592px ratio), floored so it never gets too subtle
		   to read as a rounded corner, capped at the original 60px so
		   nothing changes above this breakpoint. .doctor-card__media and
		   .doctor-card__body both key off this one value so the photo's
		   corner and the body's corner directly below it always keep
		   matching each other too, not just the button. */
		--doctor-card-radius: clamp(24px, 10.14vw, 60px);
	}

	.doctor-card__media {
		position: relative;
		z-index: 2;
		width: 100%;
		flex-basis: auto;
		/* Falls back to the same clamp() formula (not the old fixed
		   --radius-xl) so every other reuse of .doctor-card__media
		   outside an actual .doctor-card ancestor — the testimonial
		   photos on the doctor detail pages, contacts.html's hero photo
		   — gets the same proportional mobile scaling automatically,
		   not just this one instance. Without an explicit fallback here,
		   the var() is invalid wherever --doctor-card-radius isn't
		   inherited, which resets border-radius to 0 instead of falling
		   back to anything. */
		border-radius: 0
			var(--doctor-card-radius, clamp(24px, 10.14vw, 60px))
			var(--doctor-card-radius, clamp(24px, 10.14vw, 60px))
			var(--doctor-card-radius, clamp(24px, 10.14vw, 60px));
	}

	/* Figma's mobile card (node 645:2694) insets the overlay a fixed 24px
	   from the photo's own edges — not scaled — while everything inside
	   it (logo, text) is scaled down from the desktop values by the same
	   ~0.618 ratio the whole card shrinks by (366px mobile photo /
	   592px desktop photo). The vw coefficients below reproduce each
	   exact mobile figure at the reference 414px frame width, clamped so
	   they never grow past the source desktop value nor shrink illegibly
	   on very narrow phones. */
	.doctor-card__overlay {
		top: 24px;
		left: 24px;
		width: calc(100% - 48px);
	}

	.doctor-card__logo {
		width: min(79.6%, 340px);
		margin-bottom: clamp(10px, 3.865vw, 24px);
	}

	.doctor-card__overlay-phone,
	.doctor-card__overlay-address {
		font-size: clamp(12px, 3.584vw, 18px);
	}

	.doctor-card__overlay-phone {
		margin-bottom: clamp(4px, 1.932vw, 8px);
	}

	.doctor-card__overlay-address {
		margin-bottom: clamp(12px, 4.638vw, 32px);
	}

	.doctor-card__overlay-fio {
		font-size: clamp(10px, 2.688vw, 16px);
		width: min(39.94%, 206px);
		margin-bottom: clamp(3px, 1.195vw, 8px);
	}

	.doctor-card__overlay-role {
		font-size: clamp(8px, 2.091vw, 13px);
		width: min(39.94%, 206px);
	}

	.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(--doctor-card-radius) var(--doctor-card-radius);
		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;
	}

	.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;
		justify-content: space-between;
	}
}

/* -------------------- 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. Every block gets a symmetric 96px top and bottom
   padding, kept consistent across the whole site rather than the
   pt-only stacking Figma itself uses for most of these (verified in
   dev mode) — "Образование и Опыт" additionally layers its own
   --education bottom padding below, on top of this base 96px. */
.doctor-section {
	padding-top: 96px;
	padding-bottom: 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 {
	/* Was overridden to 110px right after the padding-block: 96px above
	   it — Figma's own frame (node 522:1045) has this section's content
	   starting exactly 96px from its top, same as every other block, so
	   that override was simply wrong. */
	padding-block: 96px;
	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;
		/* Desktop is deliberately pb:0 (the photo, the row's tallest
		   child, sits flush against the card's bottom edge) — but once
		   the layout stacks into a column, the button becomes the last
		   child instead and that same pb:0 leaves it flush against the
		   bottom with no breathing room. Figma's mobile frame (656:9333)
		   confirms a symmetric 32px on every side here. */
		padding-bottom: 32px;
		/* Same fix as .doctor-card/.doctor-card__media on the homepage:
		   --radius-xl (60px) is tuned for this card's 1216px desktop
		   width — held fixed while the card itself keeps shrinking down
		   to phone width, the corner curve stops reading as proportional.
		   4.934vw reproduces the desktop 60px/1216px ratio, scaling the
		   radius down in step with the card instead. */
		border-radius: clamp(24px, 4.934vw, 60px);
	}

	.doctor-hero__photo {
		flex-basis: auto;
		width: 100%;
		height: auto;
		aspect-ratio: 602 / 557;
		/* Same idea, scaled to the photo's own 602px desktop width
		   (60px/602px = 9.967vw) rather than the card's. */
		border-radius: clamp(24px, 9.967vw, 60px);
	}

	.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;
	}

	/* The larger 18px treatment is desktop-only (node 656:7877's mobile
	   frame keeps the current segment at the same 14px as "Главная" /
	   "Врачи", not enlarged) — at 18px on a 366px-wide row the doctor's
	   full name wrapped to two lines and threw off the row's vertical
	   alignment. Trimming its own trailing 10px hit-area padding (it's
	   the last element, so that padding is pure unused width, not
	   visible spacing) is what makes the full name fit on one line
	   without overflowing at 414px. */
	.doctor-page .breadcrumbs__current {
		font-size: var(--fs-caption);
		white-space: nowrap;
		padding-right: 0;
	}

	.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;
	}

	/* Node 656:9795 confirms every block on this page's mobile frame is
	   pt-only except "Ключевые направления" above (which keeps its own
	   padding-bottom:96px, set on it directly above with higher
	   specificity than this reset) — the desktop-derived base
	   .doctor-section padding-bottom (and .doctor-philosophy's) would
	   otherwise apply here too and drown out that one exception. */
	.doctor-section,
	.doctor-philosophy {
		padding-bottom: 0;
	}
}

/* Node 656:7877's single-line breadcrumb is verified at its own 414px
   frame — below that, "Бакушев Самат Ботажанович" (the longest name)
   no longer fits even after trimming the trailing padding, so let it
   wrap rather than overflow on narrower phones. */
@media (max-width: 400px) {
	.doctor-page .breadcrumbs__current {
		white-space: normal;
	}
}

@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%;
	}

	/* Node 656:9333 gives Бакушев's own mobile crop (same 302x311 frame
	   as Сарвилин's above), replacing the earlier object-fit
	   approximation now that the real numbers are available. Figma
	   expresses this one as two nested boxes — a 330x493 mask layer
	   (offset -5/-8 from the 302x311 frame) with the photo itself sized
	   84.72%/144.28% of THAT inner box, not the outer frame — so those
	   raw percentages can't be used directly against .doctor-hero__photo
	   like Сарвилин's flat crop above; used as-is they don't reproduce
	   the source image's own aspect ratio and render it stretched.
	   These numbers are that nested crop collapsed into a single
	   percentage of the outer 302x311 frame instead (302/311 * inner
	   box, then the inner offset added to the mask's own -5/-8 offset),
	   which is the flat form this codebase's crop pattern expects
	   everywhere else — and does reproduce the image's real 700:1780
	   aspect ratio (matching the desktop crop's own ratio exactly). */
	.doctor-hero__photo-img--bakushev {
		width: 92.58%;
		height: 228.75%;
		left: 6.99%;
		top: -2.67%;
	}
}

/* -------------------- 20. PRICES PAGE -------------------- */
/* Header, breadcrumb, callback, contact and footer are the same shared
   markup as doctors.html/index.html. .section-heading__title/__accent
   (used for "ЦЕНЫ НА УСЛУГИ") and .button--orange are also reused as-is. */

.prices-page {
	padding-top: 64px;
	padding-bottom: 96px;
}

.price-categories {
	display: flex;
	flex-direction: column;
	gap: 64px;
	margin-top: 64px;
}

.price-category {
	display: flex;
	flex-direction: column;
	gap: 40px;
	padding: 32px;
	background: var(--color-white);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-card);
}

.prices-page__cta {
	margin-top: 64px;
}

/* .doctor-section__title carries its own 32px margin-bottom for its
   normal (non-flex-gap) contexts — here the 40px flex gap above already
   provides the title-to-rows spacing, so that margin would just add an
   unwanted extra 32px on top of it. */
.price-category .doctor-section__title {
	margin-bottom: 0;
}

/* Figma uses a uniform 24px gap only in the categories with no promo
   rows (Лечение зубов, Удаление зубов). Where promo rows are mixed in
   (Имплантация, Протезирование) the gap is deliberately irregular —
   tight around a lone promo row, wider between consecutive promo rows
   — so spacing there is set per-row via inline margin-top instead,
   overriding this default. */
.price-category__rows {
	display: flex;
	flex-direction: column;
	width: 100%;
}

.price-category__rows > .price-row {
	margin-top: 24px;
}

.price-category__rows > .price-row:first-child {
	margin-top: 0;
}

.price-row {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 24px;
	width: 100%;
}

/* In Figma, every row (not just the акция ones) is items-center inside
   the two categories that contain promo rows — Имплантация зубов and
   Протезирование зубов — while the two promo-free categories stay
   items-start. So this is keyed off the category, not .price-row--promo. */
.price-category--promo .price-row {
	align-items: center;
}

/* Figma's info column is content-hugging, not a hard clip box: its
   nominal 768px is only a typical width, and at least one row's actual
   text (784px) legitimately exceeds it without wrapping. So this stays
   auto-width + nowrap (below) for regular rows. Promo rows are the one
   exception — there it's pinned to a fixed 770px so every row's badge
   lines up in a column (safe: no promo description comes close to
   770px, see .price-row--promo below). */
.price-row__info {
	display: flex;
	flex-direction: column;
	min-height: 51px;
}

.price-row--promo .price-row__info {
	flex-shrink: 0;
	width: 770px;
}

.price-row__name {
	font-weight: 500;
	font-size: 24px;
	line-height: var(--lh-tight);
	color: var(--color-text);
}

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

/* Names/descriptions never wrap onto a second line on desktop — Figma
   marks almost every row's text whitespace-nowrap explicitly, even
   rows whose text is objectively wider than the nominal 768/770px
   column (the box just hugs the content instead of wrapping it). Reset
   to normal wrapping on narrow screens (below), where there's no room
   to keep everything on one line. */
.price-row__name,
.price-row__desc {
	white-space: nowrap;
}

/* A handful of rows are the deliberate exception — Figma gives these a
   768px-capped box with ordinary wrapping instead of nowrap, making
   them genuinely two lines tall (70px row height instead of 51px). The
   width cap is required too: without it there's nothing for "normal"
   wrapping to wrap against, so text still renders on one (very wide)
   line. */
.price-row--wrap .price-row__info {
	width: 768px;
}

.price-row--wrap .price-row__name,
.price-row--wrap .price-row__desc {
	white-space: normal;
}

.price-row__price {
	flex-shrink: 0;
	font-weight: 500;
	font-size: 24px;
	line-height: var(--lh-tight);
	color: var(--color-text);
	text-align: right;
	white-space: nowrap;
}

/* Promo rows bleed to the card's full width (past its 32px padding) and
   get a highlighted background band, with their own 32px padding
   re-establishing alignment with the regular rows above/below. */
.price-row--promo {
	align-items: center;
	width: calc(100% + 64px);
	margin-inline: -32px;
	padding-inline: 32px;
	background: linear-gradient(90deg, #fff7ee, var(--color-orange-light));
}

.price-row--promo .price-row__left {
	display: flex;
	align-items: center;
	gap: 96px;
}

.price-row__badge {
	flex-shrink: 0;
	padding: 4px 16px;
	background: var(--color-orange);
	border-radius: var(--radius-sm);
	font-weight: 600;
	font-size: var(--fs-body);
	line-height: var(--lh-normal);
	color: var(--color-white);
	white-space: nowrap;
}

/* Below this, the page switches to Figma's dedicated mobile frame
   (414px) — a stacked single-column layout, not just a squeezed-down
   desktop row. There's no separate iPad frame, so this same stacked
   layout (with the mobile frame's own spacing numbers) is used for the
   whole tablet/phone range; .container's own fluid padding already
   handles the width in between. 1280px is where the desktop row's
   fixed-width columns (770/768px) stop fitting .container's shrinking
   content area (worked out from .container's fluid 4vw side padding),
   well above the 1024px breakpoint used elsewhere on this page. */
@media (max-width: 1280px) {
	.price-categories {
		gap: 32px;
		margin-top: 40px;
	}

	.prices-page__cta {
		margin-top: 40px;
	}

	.price-category {
		gap: 32px;
	}

	.price-category__rows > .price-row {
		margin-top: 40px !important;
	}

	.price-category--promo .price-category__rows > .price-row {
		margin-top: 24px !important;
	}

	/* !important above is required to beat the inline per-row margins
	   used for desktop's irregular promo-category gaps, but !important
	   also beats the :first-child reset below it (which has higher
	   specificity but no !important of its own) — so that reset needs
	   restating here too, or every category gains a phantom top gap. */
	.price-category__rows > .price-row:first-child {
		margin-top: 0 !important;
	}

	.price-row,
	.price-category--promo .price-row {
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		gap: 16px;
	}

	.price-row__info,
	.price-row--promo .price-row__info,
	.price-row--wrap .price-row__info {
		width: 100%;
		flex-shrink: 1;
	}

	/* The no-wrap rule above is desktop-only — there's no room to keep
	   these on one line once the row stacks to a single narrow column. */
	.price-row__name,
	.price-row__desc {
		white-space: normal;
	}

	/* Mobile prices the price itself orange (desktop keeps it dark) and
	   left-aligns it under the name/description instead of pushing it
	   to the far right. */
	.price-row__price {
		color: var(--color-orange);
		text-align: left;
	}

	/* Figma's mobile promo row puts the price and badge side by side on
	   their own line below the name/description — a different grouping
	   than desktop (where the badge sits next to the info column and
	   the price is pushed to the row's far edge). A grid lets the badge
	   and price form that second row without changing the shared DOM:
	   .price-row__left (info + badge) is flattened via display:contents
	   so info, price and badge all become direct grid items, placed by
	   grid-column/row rather than DOM order.
	   Selector repeated with .price-category--promo prefixed: promo rows
	   inside a --promo category (Имплантация/Протезирование) also match
	   ".price-category--promo .price-row" above, whose two-class
	   specificity otherwise beats this single-class rule's display:grid
	   with its own display:flex, regardless of source order — collapsing
	   the price/badge back to a stacked column. */
	.price-row--promo,
	.price-category--promo .price-row--promo {
		display: grid;
		grid-template-columns: 1fr auto;
		column-gap: 16px;
		row-gap: 16px;
		padding-block: 8px;
	}

	.price-row--promo .price-row__left {
		display: contents;
	}

	.price-row--promo .price-row__info {
		grid-column: 1 / -1;
		grid-row: 1;
	}

	.price-row--promo .price-row__price {
		grid-column: 1;
		grid-row: 2;
		align-self: center;
	}

	.price-row--promo .price-row__badge {
		grid-column: 2;
		grid-row: 2;
		align-self: center;
		justify-self: end;
	}
}

/* -------------------- 21. PROMOTIONS PAGE -------------------- */
/* Header, breadcrumb, callback, contact and footer are the same shared
   markup as prices.html/doctors.html. .section-heading__title/__accent
   is reused for "НАШИ АКЦИИ". Each card is an expand/collapse
   accordion built the same way as the homepage FAQ (.accordion) —
   native <details>/<summary>, height animated via max-height. */

.promotions-page {
	padding-top: 64px;
	padding-bottom: 96px;
}

.promo-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 16px;
	margin-top: 64px;
}

/* No max-height/transition here anymore — that used to drive the whole
   open/close animation with a guessed fixed cap (1200px), which clipped
   any card whose real content (long description + mobile's narrower
   text wrapping) grew taller than the guess. <details> already hides
   .promo-card__panel natively when not [open], so this element doesn't
   need its own height clamp at all; the panel below animates its own
   open/close via grid-template-rows, which grows to the panel's real
   content height instead of a fixed number, and this element's height
   just naturally follows since it's a plain block around both. */
/* height: 100% + display: flex below fix two compounding issues so
   every card in a .promo-grid row lands at the same height with
   "Подробнее" at the same level:
   1. container-type: inline-size (needed for the cqw-based proportional
      scaling elsewhere in this section) turns out to also break CSS
      Grid's own default stretch alignment for this item — confirmed by
      testing without it, height:100% restores the same-row cards to
      matching heights that plain grid stretch should have given for
      free.
   2. Even with matching card heights, .promo-card__summary (the always-
      visible part) only ever took its own natural content height —
      title line-count varies per card, so "Подробнее" (bottom-aligned
      *within* .promo-card__intro via justify-content: space-between)
      still landed at different Y positions despite equal card heights.
      flex-grow: 1 on the summary below lets it actually claim 100% of
      the (now-equal) card height whenever the panel isn't using any of
      it (i.e. whenever closed), which is what gives space-between
      something real to distribute down to the card's true bottom edge. */
.promo-card {
	container-type: inline-size;
	display: flex;
	flex-direction: column;
	height: 100%;
	overflow: hidden;
	padding: 32px;
	cursor: pointer;
}

.promo-card__summary {
	display: flex;
	flex-grow: 1;
	gap: 30px;
	list-style: none;
}

.promo-card__summary::-webkit-details-marker {
	display: none;
}

/* width is fluid (capped at the desktop 250px, via min()) instead of a
   flex-shrink: 0 fixed value, so the photo actually shrinks once
   .promo-grid keeps its 2-column desktop layout down through the iPad
   range instead of collapsing to 1 column — otherwise a fixed 250px
   photo plus the 30px gap leaves almost no room for
   .promo-card__intro's text in a ~345px iPad column. 46.64% reproduces
   exactly 250px at the true desktop summary width (536px, i.e. the
   600px grid column minus this card's 64px padding), so nothing
   changes above that width. height is aspect-ratio-derived from the
   same 250x202 desktop box instead of a second fixed number, so the
   shrink stays proportional instead of distorting the photo. */
.promo-card__photo {
	position: relative;
	flex-shrink: 0;
	width: min(250px, 46.64%);
	aspect-ratio: 250 / 202;
	overflow: hidden;
	background: var(--color-white);
}

.promo-card__photo img {
	position: absolute;
	max-width: none;
}

.promo-card__intro {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	align-self: stretch;
}

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

/* Groups the title with its optional subtitle line at their own tight
   4px gap, distinct from the 16px gap between that group and the price
   below it. */
.promo-card__title-group {
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.promo-card__title {
	font-family: 'Inter', var(--font-main);
	font-weight: 600;
	font-size: 26px;
	line-height: 1.2;
	text-transform: uppercase;
	color: var(--color-text);
}

.promo-card__subtitle {
	font-family: 'Inter', var(--font-main);
	font-weight: 600;
	font-size: var(--fs-caption);
	line-height: 1.2;
	color: var(--color-text);
}

.promo-card__price {
	font-family: 'Inter', var(--font-main);
	font-weight: 600;
	font-size: 26px;
	line-height: 1.2;
	color: var(--color-text);
}

.promo-card__more {
	font-weight: 600;
	font-size: var(--fs-caption);
	color: var(--color-text);
}

/* Content-based open/close animation: a 0fr row has zero height, a 1fr
   row grows to exactly its content's natural height — no fixed number
   to guess (and get wrong) like the old max-height approach. The grid
   item (.promo-card__panel-inner) needs min-height:0 too, since grid
   items default to min-height:auto (their own content's size), which
   would otherwise stop the 0fr row from ever actually reaching zero. */
.promo-card__panel {
	display: grid;
	grid-template-rows: 0fr;
	transition: grid-template-rows 0.3s ease;
}

.promo-card[open] .promo-card__panel {
	grid-template-rows: 1fr;
}

/* The CTA button's text itself changes on mobile ("Записаться" instead
   of "Записаться на консультацию"), not just its size — swapped via a
   pair of spans since this is one shared HTML file for every
   breakpoint. */
.promo-card__cta-short {
	display: none;
}

.promo-card__panel-inner {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 32px;
	width: 100%;
	min-height: 0;
	margin-top: 32px;
	padding: 24px;
	background: var(--color-white);
	border-radius: var(--radius-lg);
	overflow: hidden;
}

.promo-card__details {
	display: flex;
	flex-direction: column;
	gap: 24px;
	width: 100%;
}

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

/* A flex item's default min-width is its content's natural (unwrapped)
   width, not 0 — without this, long text here can force the row (and
   the whole card) wider than its grid cell instead of wrapping. */
.promo-card__detail p {
	min-width: 0;
}

.promo-card__detail-icon {
	flex-shrink: 0;
	width: 40px;
	height: 40px;
}

.promo-card__detail p {
	font-weight: 400;
	font-size: var(--fs-body);
	line-height: var(--lh-normal);
	color: var(--color-text);
}

.promo-card__detail--note p {
	color: var(--color-text-secondary);
}

/* Each card's gradient + "one square corner" radius is unique — Figma
   varies both per card rather than cycling a fixed set, so these are
   six one-off modifiers rather than a shared pattern. The photo repeats
   its card's own corner pattern at 40px instead of 60px. */
.promo-card--1,
.promo-card--3 {
	background: linear-gradient(110.3deg, #ffe1bd 5.1%, #faa63f 85.29%);
	border-radius: 60px 60px 0 60px;
}

.promo-card--1 .promo-card__photo,
.promo-card--3 .promo-card__photo {
	border-radius: 40px 40px 0 40px;
}

.promo-card--2 {
	background: linear-gradient(113.68deg, #edf4f1 7.12%, #a8d7cd 74.67%);
	border-radius: 60px 0 60px 60px;
}

.promo-card--2 .promo-card__photo {
	border-radius: 40px 0 40px 40px;
}

.promo-card--4,
.promo-card--6 {
	background: linear-gradient(120.67deg, #acd7f3 46.548%, #0399eb 120.85%);
	border-radius: 60px 60px 60px 0;
}

.promo-card--4 .promo-card__photo,
.promo-card--6 .promo-card__photo {
	border-radius: 40px 40px 40px 0;
}

.promo-card--5 {
	background: linear-gradient(120.67deg, #acc2f3 46.548%, #0354eb 120.85%);
	border-radius: 0 60px 60px 60px;
}

.promo-card--5 .promo-card__photo {
	border-radius: 0 40px 40px 40px;
}

/* Per-card photo crops (exact Figma percentages — each source photo has
   its own manual crop, not a shared aspect ratio). */
.promo-card--1 .promo-card__photo img {
	width: 153.57%;
	height: 143.33%;
	left: -26.67%;
	top: -15%;
}

.promo-card--2 .promo-card__photo img {
	width: 100%;
	height: 125%;
	left: 0;
	top: -10.5%;
}

.promo-card--3 .promo-card__photo img {
	width: 170.67%;
	height: 211.23%;
	left: -30.62%;
	top: -30.79%;
}

.promo-card--4 .promo-card__photo img {
	width: 100%;
	height: 125%;
	left: 0;
	top: -2.5%;
}

.promo-card--5 .promo-card__photo img {
	width: 187.77%;
	height: 234.71%;
	left: -41.79%;
	top: -33.46%;
}

.promo-card--6 .promo-card__photo img {
	width: 111.21%;
	height: 137.64%;
	left: -5.72%;
	top: -13.88%;
}

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

/* True proportional scaling for the iPad range — not just the photo
   (already fluid above) but padding, gaps and type too, so the whole
   card shrinks by one consistent ratio instead of the photo alone
   getting smaller while everything else stays desktop-sized. cqw is
   relative to .promo-card's own query-containment size (set via
   container-type: inline-size above) — specifically its content box,
   which is why the ratios below are computed against 536px (600px
   desktop card minus its own 64px of padding), not 600px itself. Each
   min(fixedpx, ratio*cqw) reproduces exactly the fixed desktop value
   once the card's content box is ≥536px (any viewport from ~1322px up)
   and scales down smoothly below that — down to 641px, where the
   ≤640px block's own separately-verified mobile values take over
   instead of this formula continuing to shrink them further.
   .promo-card's own padding is deliberately left out of this: cqw on a
   container's own box-affecting properties is circular (padding
   affects the content box cqw is measured against), so browsers can't
   resolve it reliably — a plain vw-based clamp stands in for padding
   instead, further down. */
@media (min-width: 641px) {
	.promo-card {
		/* vw-based, not cqw: the viewport is the closest available
		   proxy for this card's own width that doesn't create the
		   self-reference above. 2.4206vw reproduces exactly 32px at
		   the ~1322px viewport where the card itself hits 600px. */
		padding: clamp(16px, 2.4206vw, 32px);
	}

	.promo-card__summary {
		gap: min(30px, 5.597cqw);
	}

	.promo-card__heading {
		gap: min(16px, 2.985cqw);
	}

	.promo-card__title-group {
		gap: min(4px, 0.746cqw);
	}

	.promo-card__title,
	.promo-card__price {
		font-size: min(26px, 4.851cqw);
	}

	.promo-card__subtitle,
	.promo-card__more {
		font-size: min(14px, 2.612cqw);
	}
}

/* Was 1024px, collapsing to a single column across the whole iPad range
   too — but the card's own internal layout (photo beside text, per the
   ≤640px breakpoint below) only restacks at 640px, so between 641 and
   1024px the grid was showing single-column desktop-style cards
   instead of the intended 2-up desktop layout. Matched to that same
   640px so the grid only collapses exactly where the cards themselves
   do, keeping iPad on the desktop 2-column look. */
@media (max-width: 640px) {
	.promo-grid {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* Figma's dedicated mobile frame (656:16582) restacks the summary —
   photo full-width on top, intro below, instead of side by side — so
   each card's collapsed height is however tall ITS OWN photo+intro
   block happens to be (title line count varies), not a fixed budget
   like desktop's uniform 266px. Set per card below. */
@media (max-width: 640px) {
	.promo-card__summary {
		flex-direction: column;
		gap: 32px;
	}

	.promo-card__photo {
		width: 100%;
		height: 200px;
	}

	.promo-card__intro {
		height: auto;
		gap: 12px;
	}

	.promo-card__title {
		line-height: 1.1;
	}

	.promo-card__panel-inner .button {
		width: 253px;
	}

	.promo-card__cta-full {
		display: none;
	}

	.promo-card__cta-short {
		display: inline;
	}

	/* Every card's "square corner" moves to a different side on mobile
	   than on desktop — cards 1-3 now share one pattern (was 1&3, 2, 4&6
	   on desktop) and 4-6 share another, and card 5 is also the one card
	   whose mobile radius is 50px instead of 60px. */
	.promo-card--1,
	.promo-card--2,
	.promo-card--3 {
		border-radius: 60px 60px 60px 0;
	}

	.promo-card--1 .promo-card__photo,
	.promo-card--2 .promo-card__photo,
	.promo-card--3 .promo-card__photo {
		border-radius: 40px 40px 40px 0;
	}

	.promo-card--4,
	.promo-card--6 {
		border-radius: 0 60px 60px 60px;
	}

	.promo-card--4 .promo-card__photo,
	.promo-card--5 .promo-card__photo,
	.promo-card--6 .promo-card__photo {
		border-radius: 0 40px 40px 40px;
	}

	.promo-card--5 {
		border-radius: 0 50px 50px 50px;
	}

	/* These are the closed/collapsed height only — matching each card's
	   real mobile summary content (photo stacked above text needs more
	   room than desktop's side-by-side 266px). [open] lifts the cap
	   entirely rather than raising it to another guessed number: the
	   panel below now grows to its own real content height via
	   grid-template-rows, so there's nothing left for a fixed max-height
	   to usefully constrain once expanded — and constraining it anyway
	   is exactly what clipped card 6's longer mobile content before. */
	.promo-card--1:not([open]) {
		max-height: 438px;
	}

	.promo-card--2:not([open]) {
		max-height: 466px;
	}

	.promo-card--3:not([open]) {
		max-height: 483px;
	}

	.promo-card--4:not([open]) {
		max-height: 467px;
	}

	.promo-card--5:not([open]) {
		max-height: 455px;
	}



	/* Mobile recrops each photo for its new full-width (vs. desktop's
	   250x202) frame. Cards 3 and 6 happen to keep exactly the same
	   crop as desktop, so they need no override here. */
	.promo-card--1 .promo-card__photo img {
		width: 126.72%;
		height: 141.46%;
		left: -13.32%;
		top: -10.16%;
	}

	.promo-card--2 .promo-card__photo img {
		width: 100%;
		height: 151%;
		left: 0;
		top: -21.5%;
	}

	.promo-card--4 .promo-card__photo img {
		width: 100%;
		height: 151%;
		left: 0.13%;
		top: -14.16%;
	}

	.promo-card--5 .promo-card__photo img {
		width: 180.16%;
		height: 272.05%;
		left: -40.16%;
		top: -51.9%;
	}
}

/* -------------------- 22. CONTACTS PAGE -------------------- */
/* Header, breadcrumb, the shared "contact" section (map only — this page
   drops the floating .contact-card, matching Figma: its own map strip
   (node 548:2952) carries no card overlay since the same info already
   sits in the hero above), callback and footer are all the same markup
   already used on every other page. .section-heading__title is reused
   for the "КОНТАКТЫ" title (no __accent split here — the heading is
   solid black). The hero photo reuses .doctor-card__media (592x425,
   same missing-top-left-corner radius) with its own crop modifier,
   exactly like doctor-sarvilin.html/doctor-bakushev.html's testimonial
   photos. The info column reuses .contact-card__phone/__email verbatim
   (identical 32px/24px orange styling) and the default .social-btn
   (already orange-bordered, no modifier needed on a white background). */

.contacts-page {
	padding-top: 64px;
	padding-bottom: 96px;
}

.contact-hero {
	display: flex;
	align-items: center;
	gap: 32px;
	margin-top: 64px;
}

.contact-hero__photo {
	background: none;
}

.contact-hero__photo img {
	position: absolute;
	max-width: none;
	width: 123.11%;
	height: 114.45%;
	left: -8.45%;
	top: -4.33%;
}

.contact-hero__info {
	display: flex;
	flex-direction: column;
	gap: 40px;
	width: 405px;
}

.contact-hero__phones {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.contact-hero__field {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

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

.contact-hero__value {
	font-weight: 500;
	font-size: 24px;
	line-height: var(--lh-tight);
	color: var(--color-text);
}

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

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

@media (max-width: 1024px) {
	.contact-hero {
		flex-direction: column;
		align-items: stretch;
		gap: 32px;
		margin-top: 40px;
	}

	.contact-hero__photo {
		width: 100%;
		height: auto;
		aspect-ratio: 366 / 336;
	}

	.contact-hero__photo img {
		width: 146.61%;
		height: 106.59%;
		left: -18.98%;
		top: -0.04%;
	}

	.contact-hero__info {
		width: 100%;
	}
}

/* With .contact-card removed, .contact's height no longer has any
   in-flow content to size itself against (the map is position:absolute
   and out of flow) — pin it to Figma's plain map-strip height instead. */
.contacts-page + .contact {
	height: 480px;
}

@media (max-width: 1024px) {
	.contacts-page + .contact .container {
		padding-block: 0;
	}

	/* Figma's mobile frame (node 656:17553) puts the map AFTER the
	   callback section — the reverse of desktop's hero→map→callback→
	   footer order. */
	.contact-page #main {
		display: flex;
		flex-direction: column;
	}

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

	.contact-page .contacts-page {
		order: 2;
	}

	.contact-page .callback {
		order: 3;
	}

	.contact-page .contact {
		order: 4;
	}

	.contact-page .footer {
		order: 5;
	}
}

/* -------------------- 23. 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;
	}
}

/* -------------------- 24. 404 PAGE -------------------- */
/* Header and footer are the same markup as every other page. The
   "Главная" link reuses .breadcrumbs__link verbatim for its font
   (semibold 14px) and 10px hit-area padding — only its default color
   differs (black here vs. breadcrumbs' grey), so error-page__home only
   overrides color. */

.error-page {
	position: relative;
	overflow: hidden;
}

.error-page__bg {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	pointer-events: none;
}

/* padding-top/bottom are %, which CSS always resolves against the
   containing block's WIDTH (never height) — so as the section narrows,
   .error-page's height (driven purely by this in-flow content, since
   .error-page__bg is position:absolute and excluded from the height
   calc) shrinks in exact lockstep, and the cover-fit photo scales
   continuously with it instead of sitting at a fixed 1126px and only
   "jumping" at the ≤1024px breakpoint. 930px/96px over Figma's 1920px
   desktop frame = 48.4375%/5%, which reproduces the exact 1126px
   height at 1920px and stays proportional at every width in between. */
.error-page__content {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	width: 588px;
	margin-inline: auto;
	padding-top: 48.4375%;
	padding-bottom: 5%;
}

.error-page__title {
	width: 100%;
	font-weight: 300;
	font-size: 50px;
	line-height: 1.1;
	letter-spacing: -0.03em;
	text-transform: uppercase;
	text-align: center;
	color: var(--color-orange);
}

.error-page__home {
	color: var(--color-text);
}

/* Mobile (node 656:18225) is a fundamentally different construction
   from desktop, not just a narrower version of it: Figma's own content
   group there is already position:absolute (its declared 434px height
   and 96px bottom padding overflow the visible 360px-tall frame and
   are silently clipped — confirmed against the page's own total height,
   74 + 360 + 920 = 1354, which only reconciles using 360, not 434).
   So unlike desktop's in-flow/content-driven height, mobile pins the
   section to a fixed 414:360 aspect ratio and layers the content on
   top with position:absolute, matching Figma's own approach. */
@media (max-width: 1024px) {
	.error-page {
		aspect-ratio: 414 / 360;
	}

	.error-page__bg {
		max-width: none;
		inset: auto;
		width: 115.7%;
		height: 130.51%;
		left: -7.85%;
		top: -30.56%;
	}

	.error-page__content {
		position: absolute;
		inset: 0;
		width: 100%;
		padding: 53.865% 24px 0;
		gap: 10px;
	}

	.error-page__title {
		width: 248px;
		max-width: 100%;
		margin-inline: auto;
		font-size: 28px;
	}
}