/* ==========================================================================
   HAAST — лендинг
   Макет: Figma, фрейм 1920 × 7446. Контейнер 1574 (поля по 173).
   Размеры заданы через clamp() — на узких экранах всё уменьшается плавно,
   на 1920 совпадает с макетом до пикселя.
   ========================================================================== */

:root {
	/* --- Цвета ------------------------------------------------------- */
	--c-text:    #000000;   /* основной текст, рамки */
	--c-muted:   #878787;   /* вторичный серый текст */
	--c-bg:      #F2F2F2;   /* фон страницы  ← проверь по фрейму в Figma */
	--c-band:    #E4E4E4;   /* полоса секции «сегменты» */
	--c-fill:    #F3F3F3;   /* заливка кнопок и плашек */
	--c-invert:  #FFFFFF;   /* текст поверх фотографий */

	/* --- Шрифты ------------------------------------------------------ */
	--f-body: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
	--f-nav:  'Montserrat', var(--f-body);

	/* --- Типографика (значение при 1920 = как в макете) --------------- */
	--fs-h1:   clamp(28px, 2.500vw, 48px);   /* 48/58 */
	--fs-h2:   clamp(24px, 1.875vw, 36px);   /* 36/44 */
	--fs-body: clamp(16px, 1.042vw, 20px);   /* 20/24 */
	--fs-ui:   clamp(13px, 0.833vw, 16px);   /* 16/19 — кнопки, теги, футер */
	--fs-nav:  clamp(16px, 1.250vw, 24px);   /* 24/29 */
	--lh:      1.2;

	/* --- Сетка -------------------------------------------------------- */
	--w-container: 1574px;                   /* контент: 174 → 1748 */
	--w-header:    1774px;                   /* шапка живёт шире: 73 → 1847 */
	--gutter-min:  24px;                     /* минимальное поле на мобильном */
	--h-header:    clamp(64px, 9.53vw, 183px);

	/* --- Отступы ------------------------------------------------------ */
	--pad-section: clamp(48px, 6.5vw, 126px);
	--pad-card:    clamp(20px, 2.86vw, 55px);
}

/* --------------------------------------------------------------------------
   БАЗА
   -------------------------------------------------------------------------- */

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

html { scroll-behavior: smooth; scroll-padding-top: var(--h-header); }

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	.haast-landing * { transition: none !important; animation: none !important; }
}

body.haast-landing {
	margin: 0;
	background: var(--c-bg);
	color: var(--c-text);
	font-family: var(--f-body);
	font-size: var(--fs-body);
	font-weight: 400;
	line-height: var(--lh);
	-webkit-font-smoothing: antialiased;
	overflow-x: hidden;
}

/* :where() обнуляет вес селектора — иначе сброс перебивал бы
   отступы, заданные классами ниже по файлу. */
.haast-landing :where(h1, h2, h3, p, ul, ol, figure) { margin: 0; }

.haast-landing :where(ul, ol) { padding: 0; list-style: none; }

.haast-landing a { color: inherit; text-decoration: none; }

.haast-landing img {
	display: block;
	max-width: 100%;
	height: auto;
}

.haast-landing :focus-visible {
	outline: 2px solid var(--c-text);
	outline-offset: 3px;
}

.skip-link {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 100;
	padding: 12px 20px;
	background: var(--c-text);
	color: var(--c-invert);
}
.skip-link:focus { left: 0; }

/* Контейнер: 1574 по центру, но не уже полей на мобильном */
.container {
	width: min(var(--w-container), 100% - var(--gutter-min) * 2);
	margin-inline: auto;
}

/* --------------------------------------------------------------------------
   ОБЩИЕ ЭЛЕМЕНТЫ
   -------------------------------------------------------------------------- */

/* Ширины переносов заданы в em: 1em = размер шрифта самого элемента,
   поэтому при уменьшении экрана строки ломаются там же, где в макете.
   Значения пересчитаны из Figma: ширина блока ÷ размер шрифта. */

.section-title {
	font-size: var(--fs-h2);
	font-weight: 500;
	line-height: var(--lh);
	text-transform: uppercase;
}

.section-note {
	color: var(--c-muted);
	font-size: var(--fs-body);
	text-align: right;
	max-width: 24em;      /* 466px ÷ 20 */
	justify-self: end;
}

/* Заголовок секции слева + серая подпись справа */
.section-head {
	display: grid;
	grid-template-columns: 1fr auto;
	gap: clamp(16px, 3vw, 60px);
	align-items: start;
}

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

.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 18px;
	min-height: clamp(42px, 2.76vw, 53px);
	padding: 0 clamp(16px, 1.56vw, 30px);
	border: 1px solid var(--c-text);
	background: transparent;
	color: var(--c-text);
	font-size: var(--fs-ui);
	font-weight: 600;
	line-height: var(--lh);
	text-transform: uppercase;
	cursor: pointer;
	transition: background-color .2s ease, color .2s ease;
}

.btn:hover { background: var(--c-text); color: var(--c-invert); }

.btn--filled { background: var(--c-fill); }
.btn--filled:hover { background: var(--c-text); }

.btn--header { margin-left: auto; }

.icon {
	flex: none;
	transition: transform .25s ease;
}

/* Стрелка мягко толкается в свою сторону, пока курсор на кнопке.
   Пауза встроена в сами кадры: движение занимает первую треть цикла,
   остальное время стрелка стоит — получается подсказка, а не дёрганье. */
@keyframes arrow-nudge-down {
	0%, 55%, 100% { transform: translateY(0); }
	28%           { transform: translateY(4px); }
}

@keyframes arrow-nudge-right {
	0%, 55%, 100% { transform: translateX(0); }
	28%           { transform: translateX(4px); }
}

.btn:hover .icon--down,
.btn:focus-visible .icon--down {
	animation: arrow-nudge-down 1.3s ease-in-out infinite;
}

.btn:hover .icon--right,
.btn:focus-visible .icon--right,
.project__link:hover .icon--right {
	animation: arrow-nudge-right 1.3s ease-in-out infinite;
}

/* --------------------------------------------------------------------------
   ШАПКА
   -------------------------------------------------------------------------- */

.header {
	position: fixed;
	inset: 0 0 auto 0;
	z-index: 50;
	height: var(--h-header);
	background: var(--c-bg);
	border-bottom: 1px solid var(--c-text);
}

.header__inner {
	width: min(var(--w-header), 100% - var(--gutter-min) * 2);
	height: 100%;
	margin-inline: auto;
	display: flex;
	align-items: center;
	gap: clamp(16px, 2vw, 40px);
}

.logo { flex: none; }
.logo__img { width: clamp(84px, 6.3vw, 121px); height: auto; }
.logo__sub {
	display: block;
	margin-top: 6px;
	font-family: var(--f-nav);
	font-size: clamp(9px, 0.625vw, 12px);
	font-weight: 500;
	line-height: var(--lh);
	text-align: center;
}

/* Меню строго по центру страницы — как отмечено в макете.
   position:absolute + translate центрует относительно окна,
   а не относительно оставшегося места между логотипом и кнопкой. */
.nav {
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	display: flex;
	gap: clamp(24px, 3.7vw, 71px);
}

.nav__link {
	font-family: var(--f-nav);
	font-size: var(--fs-nav);
	font-weight: 500;
	line-height: var(--lh);
	position: relative;
	white-space: nowrap;
}

.nav__link::after {
	content: '';
	position: absolute;
	left: 0;
	bottom: -4px;
	width: 100%;
	height: 1px;
	background: currentColor;
	transform: scaleX(0);
	transform-origin: left;
	transition: transform .25s ease;
}

.nav__link:hover::after,
.nav__link.is-active::after { transform: scaleX(1); }

.burger {
	display: none;
	margin-left: auto;
	width: 44px;
	height: 44px;
	padding: 10px;
	border: 0;
	background: none;
	cursor: pointer;
}
.burger span {
	display: block;
	height: 1.5px;
	background: var(--c-text);
	transition: transform .25s ease, opacity .25s ease;
}
.burger span + span { margin-top: 6px; }

/* Админ-бар WordPress сдвигает страницу вниз на 32px, а фиксированная
   шапка этого не знает — получался разрыв под ней. Виден только
   залогиненным, но чиним. */
.admin-bar .header { top: 32px; }

@media (max-width: 782px) {
	.admin-bar .header { top: 46px; }
}

.main { padding-top: var(--h-header); }

/* --------------------------------------------------------------------------
   СЕКЦИЯ 1 — ПЕРВЫЙ ЭКРАН
   Слева текст в контейнере, справа фото до самого края экрана.
   В макете: текст 174…876, фото 988…1920 (51,46% / 48,54%).
   -------------------------------------------------------------------------- */

.hero {
	display: grid;
	grid-template-columns: 51.46% 48.54%;
	align-items: center;
	border-bottom: 1px solid var(--c-text);
	min-height: clamp(420px, 38.2vw, 734px);
}

.hero__content {
	padding-left: max(var(--gutter-min), calc((100vw - var(--w-container)) / 2));
	padding-right: clamp(24px, 3vw, 60px);
	padding-block: clamp(40px, 4vw, 60px);
}

.hero__title {
	font-size: var(--fs-h1);
	font-weight: 500;
	line-height: var(--lh);
	text-transform: uppercase;
	max-width: 14.6em;    /* 702px ÷ 48 */
}

.hero__subtitle {
	margin-top: clamp(20px, 1.77vw, 34px);
	max-width: 32em;      /* 641px ÷ 20 */
}

.hero__buttons {
	display: flex;
	flex-wrap: wrap;
	gap: clamp(12px, 1.77vw, 34px);
	margin-top: clamp(28px, 3.6vw, 69px);
}

.hero__eyebrow {
	position: relative;
	margin-top: clamp(24px, 2.45vw, 47px);
	padding-left: clamp(28px, 2.66vw, 51px);
	color: var(--c-muted);
	font-size: var(--fs-ui);
	font-weight: 400;
	text-transform: uppercase;
}

.hero__eyebrow::before {
	content: '';
	position: absolute;
	left: 0;
	top: 0.6em;
	width: clamp(18px, 1.61vw, 31px);
	height: 1px;
	background: var(--c-muted);
}

.hero__media {
	display: block;
	position: relative;
	align-self: stretch;
	overflow: hidden;
}

.hero__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .6s cubic-bezier(.4, 0, .2, 1);
}

/* Когда картинка кликабельна — при наведении она слегка приближается,
   а подпись подчёркивается: понятно, что это ссылка. */
@media (hover: hover) {
	.hero__media--link:hover img { transform: scale(1.03); }
}

.hero__media--link:focus-visible img { transform: scale(1.03); }

.hero__media--link .hero__caption-title {
	border-bottom: 1px solid transparent;
	transition: border-color .25s ease;
}

.hero__media--link:hover .hero__caption-title,
.hero__media--link:focus-visible .hero__caption-title {
	border-bottom-color: currentColor;
}

.hero__caption {
	position: absolute;
	inset: auto 0 0 0;
	padding: clamp(20px, 3.8vw, 73px) clamp(20px, 3.8vw, 73px) clamp(16px, 2.6vw, 50px);
	background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, .38) 100%);
	color: var(--c-invert);
	display: grid;
	justify-items: start;
	gap: 6px;
}

.hero__caption-title {
	font-size: var(--fs-body);
	font-weight: 500;
	text-transform: uppercase;
}

.hero__caption-meta {
	font-size: var(--fs-ui);
	font-weight: 500;
}

/* --------------------------------------------------------------------------
   СЕКЦИЯ 2 — ПОКАЗАТЕЛИ
   -------------------------------------------------------------------------- */

.stats {
	border-bottom: 1px solid var(--c-text);
	padding-block: clamp(28px, 3.18vw, 61px);
}

/* Блоки шириной по содержимому, свободное место поровну между ними.
   Первый прижат к левой границе сетки, последний — к правой.
   Ширины в em пересчитаны из макета: 217 / 275 / 374 px ÷ 20. */
.stats__grid {
	display: flex;
	justify-content: space-between;
	gap: clamp(20px, 1.5vw, 28px);
}

.stat { flex: 0 1 auto; }

.stat:nth-child(1) { width: 11em; }
.stat:nth-child(2) { width: 14em; }
.stat:nth-child(3) { width: 19em; }
.stat:nth-child(4) { width: 13em; text-align: right; }

.stat__value {
	font-size: var(--fs-h2);
	font-weight: 400;
	white-space: nowrap;
}

.stat__label {
	margin-top: clamp(10px, 0.88vw, 17px);
}

/* --------------------------------------------------------------------------
   СЕКЦИЯ 3 — «КОМПЛЕКСНАЯ РАБОТА»
   -------------------------------------------------------------------------- */

.approach { padding-block: var(--pad-section); }

.approach__title { max-width: 33em; }   /* 1190px ÷ 36 */

.approach__grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	margin-top: clamp(28px, 3.02vw, 58px);
	border: 1px solid var(--c-text);
}

.approach__card {
	padding: clamp(24px, 2.6vw, 50px) var(--pad-card);
}

/* Внутренние линии сетки рисуем рамками, чтобы не было двойной толщины */
.approach__card:nth-child(odd)  { border-right: 1px solid var(--c-text); }
.approach__card:nth-child(n+3)  { border-top: 1px solid var(--c-text); }

.approach__card-title { font-size: var(--fs-body); font-weight: 500; }

.approach__card-text {
	margin-top: clamp(12px, 0.88vw, 17px);
	color: var(--c-muted);
}

.approach__note {
	margin-top: clamp(20px, 2.4vw, 46px);
	margin-left: auto;
	color: var(--c-muted);
	text-align: right;
	max-width: 23em;
}

/* --------------------------------------------------------------------------
   ШИРОКИЕ КАРТИНКИ-РАЗДЕЛИТЕЛИ
   -------------------------------------------------------------------------- */

.divider img {
	width: 100%;
	aspect-ratio: 1920 / 916;
	object-fit: cover;
}

/* --------------------------------------------------------------------------
   СЕКЦИЯ 4 — СЕГМЕНТЫ
   Серая полоса во всю ширину экрана.
   -------------------------------------------------------------------------- */

.services {
	background: var(--c-band);
	padding-block: var(--pad-section);
}

.services .section-title { max-width: 17.8em; }   /* 641px ÷ 36 */

/* Плашки шириной по тексту, зазор одинаковый везде, ряды прижаты влево —
   как в макете. Разбивку по три задаёт .tags__break в разметке.
   Вертикальный отступ вынесен в margin: если оставить row-gap, пустой
   элемент-разрыв считался бы отдельным рядом и отступ удваивался. */
.tags {
	--tag-row: clamp(12px, 1.61vw, 31px);
	display: flex;
	flex-wrap: wrap;
	column-gap: clamp(16px, 2.71vw, 52px);
	row-gap: 0;
	margin-top: clamp(28px, 2.29vw, 44px);
	margin-bottom: calc(-1 * var(--tag-row));
}

.tags__break {
	flex-basis: 100%;
	height: 0;
	margin: 0;
}

/* flex-grow: 1 — свободное место ряда делится поровну между плашками,
   поэтому полный ряд дотягивается до правой границы сетки, а зазоры
   остаются одинаковыми. В макете ширины выставлены руками ровно с тем
   же результатом: 403 + 545 + 521 + два зазора по 52 = 1574. */
.tag {
	flex: 1 1 auto;
	display: flex;
	align-items: center;
	margin-bottom: var(--tag-row);
	min-height: clamp(42px, 2.76vw, 53px);
	padding: 0 clamp(14px, 1.46vw, 28px);
	border: 1px solid var(--c-text);
	background: var(--c-fill);
	font-size: var(--fs-ui);
	font-weight: 600;
	line-height: var(--lh);
	text-transform: uppercase;
}

/* Плашки неполного последнего ряда: ширина строго по тексту */
.tag--natural { flex-grow: 0; }

/* --------------------------------------------------------------------------
   СЕКЦИЯ 5 — ЭТАПЫ РАБОТЫ
   -------------------------------------------------------------------------- */

.process { padding-block: var(--pad-section); }

.process .section-title { max-width: 10em; }   /* 359px ÷ 36 */

.steps {
	margin-top: clamp(28px, 2.5vw, 48px);
	border-top: 1px solid var(--c-text);
}

.step {
	display: grid;
	grid-template-columns: clamp(90px, 14.17vw, 272px) 1fr;
	align-items: center;
	gap: 0;
	padding-block: clamp(24px, 3.3vw, 63px);
	border-bottom: 1px solid var(--c-text);
}

.step__num {
	padding-left: clamp(12px, 4.48vw, 86px);
	font-size: var(--fs-h2);
	font-weight: 400;
	font-variant-numeric: tabular-nums;
}

.step__title { font-size: var(--fs-h2); font-weight: 500; }

.step__text {
	margin-top: clamp(8px, 0.63vw, 12px);
	max-width: 40em;      /* 804px ÷ 20 */
}

.process__note {
	margin-top: clamp(24px, 2.14vw, 41px);
	color: var(--c-muted);
	max-width: 26.6em;    /* 532px ÷ 20 */
}

/* --------------------------------------------------------------------------
   СЕКЦИЯ 6 — ПРОЕКТЫ
   Лента прокручивается вбок. Карточка 479px при 1920 = 24,95% контейнера.
   -------------------------------------------------------------------------- */

/* --------------------------------------------------------------------------
   СЕКЦИЯ 6 — ПРОЕКТЫ (карусель)

   Видны ровно три карточки, вписанные в контейнер 1574.
   Проверка по макету: (1574 − 68 × 2) ÷ 3 = 479,3 — ровно ширина
   карточки в Figma. Значит сетка сходится точно.
   -------------------------------------------------------------------------- */

.projects {
	background: var(--c-band);
	padding-block: var(--pad-section);
	--projects-gap: clamp(20px, 3.57vw, 68px);
	/* Запас вокруг окна карусели под увеличение карточки.
	   Карточка высотой ~646px при масштабе 1,104 вырастает на 34px вверх
	   и вниз — при запасе ровно 34px рамка ложилась на границу обрезки
	   и подъедалась. Берём 44px: с запасом, но меньше зазора 68px,
	   поэтому соседняя карточка в просвет не заглядывает. */
	--projects-lift: clamp(20px, 2.3vw, 44px);
}

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

.projects__controls { display: flex; gap: 12px; }

.projects__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: clamp(40px, 2.76vw, 53px);
	height: clamp(40px, 2.76vw, 53px);
	border: 1px solid var(--c-text);
	background: transparent;
	color: var(--c-text);
	cursor: pointer;
	transition: background-color .2s ease, color .2s ease;
}

.projects__btn:hover { background: var(--c-text); color: var(--c-invert); }

.projects__btn[data-dir="prev"] .icon { transform: rotate(180deg); }

.projects__btn[data-dir="next"]:hover .icon { transform: translateX(3px); }
.projects__btn[data-dir="prev"]:hover .icon { transform: rotate(180deg) translateX(3px); }

.projects__viewport {
	/* padding даёт место для увеличенной карточки, отрицательный margin
	   возвращает блок на исходное место — соседние секции не съезжают.
	   Запас 34px меньше зазора между карточками (68px), поэтому соседняя
	   карточка в этот просвет не заглядывает. */
	margin-top: calc(clamp(24px, 2.66vw, 51px) - var(--projects-lift));
	margin-bottom: calc(-1 * var(--projects-lift));
	margin-inline: calc(-1 * var(--projects-lift));
	padding: var(--projects-lift);
	overflow: hidden;
}

.projects__track {
	display: flex;
	align-items: stretch;
	gap: var(--projects-gap);
	transition: transform .75s cubic-bezier(.4, 0, .2, 1);
}

.project {
	flex: 0 0 calc((100% - var(--projects-gap) * 2) / 3);
}

.project__link {
	display: block;
	position: relative;
	height: 100%;
	border: 2px solid var(--c-text);
	background: var(--c-bg);
	transition: transform .4s cubic-bezier(.4, 0, .2, 1);
}

/* Наведение: карточка растёт от своего центра, 529 ÷ 479 = 1,104 из макета.
   z-index поднимает её над соседями, автопрокрутка при этом на паузе. */
@media (hover: hover) {
	.project__link:hover { transform: scale(1.104); z-index: 2; }
}
.project__link:focus-visible { transform: scale(1.104); z-index: 2; }

.project__media {
	aspect-ratio: 479 / 401;
	overflow: hidden;
}

.project__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.project__body { padding: clamp(18px, 2.19vw, 42px); }

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

.project__row {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 16px;
	margin-top: clamp(10px, 2.19vw, 42px);
}

/* Описание забирает всю свободную ширину, плашка с площадью держит свою.
   min-width: 0 нужен, иначе flex не даёт тексту переноситься. */
.project__desc {
	flex: 1 1 auto;
	min-width: 0;
	color: var(--c-muted);
}

.project__badge {
	flex: none;
	color: var(--c-muted);
	white-space: nowrap;
}

.project__more {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	margin-top: clamp(14px, 2.5vw, 48px);
}

/* --------------------------------------------------------------------------
   СЕКЦИЯ 7 — СКАЧАТЬ PDF
   -------------------------------------------------------------------------- */

/* Продолжает серую полосу секции проектов и закрывает её чёрной линией
   на границе с блоком «Напишите нам». */
.download {
	background: var(--c-band);
	border-bottom: 1px solid var(--c-text);
	padding-bottom: clamp(40px, 5vw, 96px);
}

.download__grid {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: clamp(20px, 3vw, 60px);
	align-items: start;
}

.download .section-note { max-width: 40.3em; }   /* 806px ÷ 20 */

.download__label { font-weight: 500; margin-bottom: clamp(12px, 1.15vw, 22px); }

/* --------------------------------------------------------------------------
   СЕКЦИЯ 8 — НАПИШИТЕ НАМ
   -------------------------------------------------------------------------- */

.cta { padding-block: clamp(32px, 3.3vw, 63px); }

.cta__grid {
	display: grid;
	grid-template-columns: 1fr auto;
	gap: clamp(20px, 3vw, 60px);
	align-items: center;
}

.cta__eyebrow { font-weight: 500; margin-bottom: clamp(10px, 0.94vw, 18px); }

.cta__title {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: clamp(12px, 1.5vw, 28px);
	max-width: none;
}

.cta__link {
	border-bottom: 2px solid transparent;
	transition: border-color .2s ease;
}

.cta__link:hover { border-bottom-color: var(--c-text); }

.cta__email {
	font-size: var(--fs-ui);
	font-weight: 600;
	text-transform: uppercase;
	border-bottom: 1px solid transparent;
	transition: border-color .2s ease;
}

.cta__email:hover { border-bottom-color: var(--c-text); }

/* --------------------------------------------------------------------------
   ФУТЕР
   -------------------------------------------------------------------------- */

.footer {
	border-top: 1px solid var(--c-text);
	padding-block: clamp(24px, 2.14vw, 41px);
}

.footer__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 16px;
	align-items: center;
}

.footer__item {
	font-size: var(--fs-ui);
	font-weight: 600;
	text-transform: uppercase;
	border-bottom: 1px solid transparent;
	justify-self: start;
	transition: border-color .2s ease;
}

.footer__item:hover { border-bottom-color: var(--c-text); }
.footer__item--center { justify-self: center; text-align: center; }
.footer__item--right  { justify-self: end; text-align: right; }

.footer__legal {
	margin-top: clamp(16px, 1.5vw, 28px);
	color: var(--c-muted);
	font-size: var(--fs-ui);
}

.footer__legal a { border-bottom: 1px solid transparent; }
.footer__legal a:hover { border-bottom-color: var(--c-muted); }

/* ==========================================================================
   АДАПТИВ
   Мобильных макетов не было — раскладки ниже собраны по смыслу.
   ========================================================================== */

/* --- Планшет ------------------------------------------------------------ */
@media (max-width: 1100px) {

	.nav {
		position: fixed;
		left: 0;
		top: var(--h-header);
		transform: none;
		width: 100%;
		flex-direction: column;
		gap: 0;
		padding: 8px 0 16px;
		background: var(--c-bg);
		border-bottom: 1px solid var(--c-text);
		display: none;
	}

	.nav.is-open { display: flex; }

	.nav__link {
		padding: 14px var(--gutter-min);
		font-size: 20px;
	}

	.nav__link::after { display: none; }

	.burger { display: block; order: 3; }
	.header.is-open .burger span:nth-child(1) { transform: translateY(7.5px) rotate(45deg); }
	.header.is-open .burger span:nth-child(2) { opacity: 0; }
	.header.is-open .burger span:nth-child(3) { transform: translateY(-7.5px) rotate(-45deg); }

	.btn--header { display: none; }

	.project { flex-basis: calc((100% - var(--projects-gap)) / 2); }

	.hero { grid-template-columns: 1fr; min-height: 0; }

	.hero__content {
		padding-inline: var(--gutter-min);
		padding-block: 40px;
	}

	.hero__media { aspect-ratio: 932 / 733; }

	.stats__grid {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		gap: 32px 24px;
	}

	.stat,
	.stat:nth-child(1),
	.stat:nth-child(2),
	.stat:nth-child(3),
	.stat:nth-child(4) { width: auto; text-align: left; }

	.stat__value { white-space: normal; }

	/* Разрывы рядов сняты, переносы свободные — растягивать плашки нельзя,
	   иначе одинокая в ряду раздуется на всю ширину. */
	.tags__break { display: none; }
	.tag { flex-grow: 0; }

	.section-head { grid-template-columns: 1fr; }
	.section-note { text-align: left; justify-self: start; }
	.approach__note { text-align: left; margin-left: 0; }

	/* На узких экранах ограничения из макета только мешают */
	.approach__title,
	.services .section-title,
	.process .section-title,
	.hero__title,
	.hero__subtitle { max-width: none; }
}

/* --- Телефон ------------------------------------------------------------ */
@media (max-width: 700px) {

	:root { --gutter-min: 20px; }

	.approach__grid { grid-template-columns: 1fr; }
	.approach__card:nth-child(odd) { border-right: 0; }
	.approach__card:nth-child(n+2) { border-top: 1px solid var(--c-text); }

	.stats__grid { grid-template-columns: 1fr; gap: 28px; }

	.step {
		grid-template-columns: 1fr;
		gap: 10px;
	}
	.step__num { padding-left: 0; }

	.project { flex-basis: 100%; }

	.download__grid,
	.cta__grid { grid-template-columns: 1fr; }

	.cta__title { flex-direction: column; gap: 10px; align-items: flex-start; }

	.footer__grid { grid-template-columns: 1fr; gap: 14px; }
	.footer__item,
	.footer__item--center,
	.footer__item--right { justify-self: start; text-align: left; }

	.divider img { aspect-ratio: 3 / 2; }
}

/* Прилипание к блокам при прокрутке живёт в landing.js: браузерный
   scroll-snap доводит рывком и по-разному в разных браузерах, а своя
   анимация даёт управляемую длительность и плавность. */

/* --- Печать ------------------------------------------------------------- */
@media print {
	.header, .burger, .projects__viewport { position: static; overflow: visible; }
	.projects__track { transform: none !important; }
}

/* ==========================================================================
   ПОЯВЛЕНИЕ БЛОКОВ ПРИ ПРОКРУТКЕ

   Четыре приёма, назначаются атрибутом data-anim в разметке:
     rise — подъём с проявлением (основной, годится почти везде)
     mask — строки выезжают из-под невидимой линии (только заголовки)
     draw — проявляется рамка, затем содержимое (сетка 2×2, список этапов)
     wipe — кадр открывается слева направо (фотографии)

   Класс haast-anim ставит на <html> крошечный скрипт в шапке страницы.
   Без него ни одно правило ниже не сработает — значит при выключенном
   JS всё видно сразу, а не остаётся навсегда спрятанным.

   Задержка внутри группы задаётся переменной --anim-delay из JS.
   Каждый блок анимируется один раз, при первом появлении.
   ========================================================================== */

@media (prefers-reduced-motion: no-preference) {

	.haast-anim [data-anim] { --anim-delay: 0ms; }

	/* --- rise --- */
	.haast-anim [data-anim="rise"]:not(.is-in) {
		opacity: 0;
		transform: translateY(22px);
	}

	.haast-anim [data-anim="rise"].is-in {
		animation: haast-rise .8s cubic-bezier(.22, 1, .36, 1) var(--anim-delay) both;
	}

	@keyframes haast-rise {
		from { opacity: 0; transform: translateY(22px); }
		to   { opacity: 1; transform: none; }
	}

	/* --- mask ---
	   Обёртки строк создаёт JS. До этого элемент скрыт по visibility,
	   иначе текст успел бы мигнуть в неразобранном виде. */
	.haast-anim [data-anim="mask"] { visibility: hidden; }
	.haast-anim [data-anim="mask"].is-split { visibility: visible; }

	.haast-anim .haast-line {
		display: block;
		overflow: hidden;
	}

	.haast-anim .haast-line > span {
		display: block;
		transform: translateY(105%);
	}

	.haast-anim [data-anim="mask"].is-in .haast-line > span {
		animation: haast-up .85s cubic-bezier(.22, 1, .36, 1) both;
	}

	@keyframes haast-up {
		from { transform: translateY(105%); }
		to   { transform: none; }
	}

	/* --- draw --- */
	.haast-anim [data-anim="draw"]:not(.is-in) { border-color: transparent; }
	.haast-anim [data-anim="draw"]:not(.is-in) > * { border-color: transparent; opacity: 0; }

	.haast-anim [data-anim="draw"].is-in {
		animation: haast-border .5s ease var(--anim-delay) both;
	}

	.haast-anim [data-anim="draw"].is-in > * {
		animation: haast-border .5s ease var(--anim-delay) both,
		           haast-rise .7s cubic-bezier(.22, 1, .36, 1) calc(var(--anim-delay) + 260ms) both;
	}

	@keyframes haast-border {
		from { border-color: transparent; }
		to   { border-color: var(--c-text); }
	}

	/* --- wipe --- */
	.haast-anim [data-anim="wipe"]:not(.is-in) { clip-path: inset(0 100% 0 0); }

	.haast-anim [data-anim="wipe"].is-in {
		animation: haast-wipe 1s cubic-bezier(.22, 1, .36, 1) var(--anim-delay) both;
	}

	@keyframes haast-wipe {
		from { clip-path: inset(0 100% 0 0); }
		to   { clip-path: inset(0 0 0 0); }
	}
}

/* ==========================================================================
   КАРТА В КОНТАКТАХ

   Монохром сделан фильтром grayscale поверх обычной карты из Конструктора.
   Полноценная стилизация в серый требует API-ключа Яндекса, а выглядит
   так же — поэтому обходимся фильтром и живём без ключа.
   ========================================================================== */

.map {
	position: relative;
	overflow: hidden;
	min-height: clamp(360px, 30vw, 520px);
	background: var(--c-band);
	border-top: 1px solid var(--c-text);
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
}

/* Полотно с запасом сверху и снизу: при сдвиге от прокрутки
   края карты не выходят из секции. */
.map__canvas {
	position: absolute;
	inset: -70px 0;
	z-index: 0;
	will-change: transform;
}

.map__canvas iframe {
	display: block;
	width: 100%;
	height: 100%;
	border: 0;
	filter: grayscale(1) contrast(1.06) brightness(1.04);
}

/* С мышью карта работает сразу: колесо перехватывается только под
   курсором, а секция последняя на странице — прокручивать дальше нечего.
   Слой-заглушка здесь не нужен. */
.map__activate { display: none; }

/* Сенсорные экраны — другое дело. Там палец вместо курсора: листая
   страницу вниз, человек попадёт на карту и начнёт таскать её вместо
   прокрутки, не доехав до контактов. Поэтому карта включается касанием. */
@media (hover: none), (pointer: coarse) {

	.map__canvas iframe { pointer-events: none; }
	.map.is-live .map__canvas iframe { pointer-events: auto; }

	.map__activate {
		display: flex;
		opacity: 1;
	}

	.map.is-live .map__activate { display: none; }
}

.map__activate {
	position: absolute;
	inset: 0;
	z-index: 1;
	align-items: center;
	justify-content: center;
	padding: 0;
	border: 0;
	background: radial-gradient(closest-side, rgba(242, 242, 242, .92) 0%, rgba(242, 242, 242, 0) 100%);
	color: var(--c-text);
	font-family: inherit;
	font-size: var(--fs-ui);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: .04em;
	cursor: pointer;
}

.map.is-live .map__activate { display: none; }

/* Строка контактов лежит поверх карты */
.footer--on-map {
	position: relative;
	z-index: 2;
	background: rgba(242, 242, 242, .93);
	backdrop-filter: blur(2px);
}

@media (max-width: 700px) {
	.map { min-height: 300px; }
	.map__canvas { inset: -40px 0; }
}