/* ===========================================================================
   ПОСАДКОВА «ГРАНІТНІ СХОДИ»
   ---------------------------------------------------------------------------
   Розкладка знята з прототипу, який затвердив замовник: ті самі пропорції
   сітки, ті самі відступи, той самий ритм секцій. Палітра й типографіка —
   наші: жовтий акцент прототипу замінений бронзою, Georgia — Cormorant.
   Сторінка має читатися як частина цього сайту, а не як лендинг, приклеєний
   збоку.

   Секції йдуть на всю ширину вікна й тримаються не на контейнері з
   максимальною шириною, а на бічному відступі. Саме через це сторінка
   виходить із контейнера Astra: інакше кожна темна секція обривалася б за
   1704 пікселя й по краях лишалися б білі смуги.

   Окремий файл, а не додаток до product.css: той підключається лише на
   сторінках WooCommerce, а це звичайна сторінка з шаблоном.
   =========================================================================== */

/* ===========================================================================
   ВИХІД ІЗ КОНТЕЙНЕРА ASTRA
   =========================================================================== */

.gtk-page-landing .site-content > .ast-container {
	max-width: none;
	width: 100%;
	margin: 0;
	padding: 0;
	display: block;
}

.gtk-page-landing .site-content { padding: 0; }
.gtk-page-landing .ast-container > .gtk-landing { width: 100%; }

.gtk-landing {
	/*
	 * Бічний відступ сторінки — єдине, що тримає вміст від краю вікна.
	 * Значення з прототипу: 20 пікселів на телефоні, 72 на моніторі.
	 */
	--gtk-landing-pad: clamp(20px, 4vw, 72px);

	/* Вертикальний крок секції — теж із прототипу. */
	/*
	 * Посадкові жили з власним відступом, удвічі більшим за решту сайту:
	 * clamp(96px, 11vw, 176px). Тепер це той самий спільний токен.
	 */
	--gtk-landing-y: var(--gtk-section-gap);
}

/*
 * На телефоні крок секції менший.
 *
 * Дев'яносто шість пікселів згори й стільки ж знизу — це майже чверть екрана
 * на кожному стику. На моніторі така пауза читається як повітря, на телефоні
 * вона просто відсуває наступний розділ за межі видимого, і сторінка
 * здається довшою, ніж є.
 */
@media (max-width: 760px) {
	.gtk-landing { --gtk-landing-y: var(--gtk-section-gap); }
}

/* ===========================================================================
   ГЕРОЙ
   =========================================================================== */

/*
 * Екран мінус шапка, а не цілий екран.
 *
 * Шапка липка й забирає верхні 77 пікселів назавжди. Кадр на 100svh через це
 * не поміщався: підпис «Точність каменю…» і кругла кнопка прокрутки стояли
 * рівно на 45 пікселів нижче згину, і перший екран закінчувався обрізаним
 * рядком — найгірший із можливих сигналів на сторінці, яка продає точність.
 */
.gtk-landing__hero {
	position: relative;
	min-height: calc(100vh - var(--gtk-header-h));
	min-height: calc(100svh - var(--gtk-header-h));
	overflow: hidden;
	background: var(--gtk-ink);
	color: var(--gtk-cream);
}

.gtk-landing__hero-img,
.gtk-landing__hero-shade {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
}

.gtk-landing__hero-img {
	object-fit: cover;
	object-position: center 58%;
}

/*
 * На телефоні кадр видно вужчою смугою.
 *
 * Горизонтальне фото, обрізане під портретний екран, лишає в кадрі двері й
 * цеглу, а сходи — те єдине, заради чого це фото тут, — сповзають у найгустішу
 * частину затемнення. Зсув вікна кропу нижче піднімає марш у ту третину, де
 * градієнт ще прозорий.
 */
@media (max-width: 760px) {
	.gtk-landing__hero-img { object-position: center 68%; }
}

/*
 * Затемнення знизу, а не по всьому кадру.
 *
 * Рівна заливка поверх фотографії гасить камінь — а він тут головний. Тому
 * градієнт майже прозорий у верхній третині, де кадр працює сам, і густішає
 * там, де починається текст.
 *
 * Межу підбирали не на око: кікер — це 12.5px, а дрібному тексту потрібно
 * 4.5:1. На світлій цеглині без затемнення він давав близько двійки й
 * читався тільки тому, що ми знали, що там написано.
 */
.gtk-landing__hero-shade {
	background: linear-gradient(
		180deg,
		rgba(20, 18, 16, 0.36) 0%,
		rgba(20, 18, 16, 0.16) 12%,
		rgba(20, 18, 16, 0.56) 30%,
		rgba(20, 18, 16, 0.74) 60%,
		rgba(20, 18, 16, 0.92) 100%
	);
}

.gtk-landing__hero-inner {
	position: relative;
	z-index: 2;
	display: flex;
	flex-direction: column;
	justify-content: center;
	box-sizing: border-box;
	width: min(100%, 1600px);
	min-height: calc(100vh - var(--gtk-header-h));
	min-height: calc(100svh - var(--gtk-header-h));
	margin: 0 auto;
	padding: 128px var(--gtk-landing-pad) 32px;
}

/*
 * У героя кікер кремовий, а не бронзовий.
 *
 * Бронза — колір для рівного тла: на чорнилі вона дає 5.5:1 і працює. На
 * фотографії під нею то світла цеглина, то тінь, і 12.5 пікселя літери
 * зникають у першій же світлій ділянці.
 */
.gtk-kicker--light { color: var(--gtk-bronze-on-ink); }
.gtk-landing__hero-inner .gtk-kicker { color: rgba(242, 230, 217, 0.94); }

.gtk-landing__h1 {
	/*
	 * Дев'яти знаків вистачало «Гранітним сходам», але не «Пам'ятникам»:
	 * слово довше за коробку ламалося посеред себе — «Пам'ятник» і «и»
	 * наступним рядком. Тепер обмеження поступається ширині екрана, і
	 * перенос відбувається між словами.
	 */
	max-width: min(100%, 14ch);
	margin: 0;
	font-family: var(--gtk-font-display);
	/*
	 * Набір той самий, що в назві на головній.
	 *
	 * Посадкові жили власним кеглем: 12vw проти 8.4, п'ятсоте накреслення
	 * проти четвертого й удвічі щільніший трекінг. На одній сторінці це не
	 * впадало в око, а при переході з головної в розділ назва помітно
	 * змінювала характер — ніби інший сайт.
	 */
	font-weight: 400;
	font-size: clamp(46px, 8.4vw, 128px);
	line-height: 0.94;
	letter-spacing: -0.025em;
	color: var(--gtk-cream);
}

/*
 * Два переходи одразу під назвою.
 *
 * Кнопка веде до готових позицій, посилання поруч — до форми розрахунку.
 * Стоять вище за підпис і стрілку: це головне, що можна зробити з цієї
 * сторінки, і воно має бути видно без прокрутки.
 */
.gtk-landing__hero-actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 16px 28px;
	margin-top: clamp(28px, 3.4vw, 44px);
}

/* Кнопка на фотографії: світлий контур, заливка при наведенні. */
.gtk-landing__hero-actions .gtk-btn--light {
	border-color: rgba(242, 230, 217, 0.66);
	color: var(--gtk-cream);
	background: transparent;
}

.gtk-landing__hero-actions .gtk-btn--light:hover,
.gtk-landing__hero-actions .gtk-btn--light:focus-visible {
	background: var(--gtk-cream);
	border-color: var(--gtk-cream);
	color: var(--gtk-ink);
}

.gtk-landing__hero-link {
	display: inline-flex;
	align-items: center;
	/* Зона натискання поруч із кнопкою має бути такою самою. */
	min-height: 44px;
	font-size: 14px;
	letter-spacing: 0.02em;
	color: var(--gtk-cream);
	text-decoration: none;
	border-bottom: 1px solid rgba(242, 230, 217, 0.5);
}

.gtk-landing__hero-link:hover,
.gtk-landing__hero-link:focus-visible {
	color: var(--gtk-cream);
	border-bottom-color: var(--gtk-bronze-on-ink);
}

.gtk-landing__hero-foot {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 24px;
	margin-top: auto;
	padding-top: 48px;
}

.gtk-landing__hero-foot p {
	margin: 0;
	font-family: var(--gtk-font-display);
	font-size: clamp(24px, 3vw, 50px);
	line-height: 1.08;
	color: var(--gtk-cream);
}

.gtk-landing__scroll {
	flex: none;
	display: grid;
	place-items: center;
	width: 72px;
	height: 72px;
	border: 1px solid rgba(242, 230, 217, 0.7);
	border-radius: 50%;
	color: var(--gtk-cream);
	transition: background 0.3s var(--gtk-ease), border-color 0.3s var(--gtk-ease), color 0.3s var(--gtk-ease);
}

.gtk-landing__scroll:hover,
.gtk-landing__scroll:focus-visible {
	background: var(--gtk-bronze);
	border-color: var(--gtk-bronze);
	color: var(--gtk-ink);
}

/*
 * Місце під панель дзвінка.
 *
 * На телефоні внизу висить фіксована смуга «Зателефонувати / Розрахувати»
 * (style.css). Вона накривала якраз низ першого екрана: від підпису під
 * заголовком лишалося одне слово, а кнопку прокрутки перекривало наполовину.
 *
 * Межа саме 767px, а не 760, як у решти правил цього файлу: панель
 * з'являється за 767, і в проміжку між двома числами відступу не було б.
 */
@media (max-width: 767px) {
	.gtk-landing__hero-inner {
		padding-bottom: calc(32px + 59px + env(safe-area-inset-bottom, 0px));
	}
}

/* ===========================================================================
   СПІЛЬНЕ ДЛЯ СЕКЦІЙ
   =========================================================================== */

.gtk-landing__intro,
.gtk-landing__purpose,
.gtk-landing__collection,
.gtk-landing__faq {
	position: relative;
	padding: var(--gtk-landing-y) var(--gtk-landing-pad);
}

.gtk-landing__intro {
	background: var(--gtk-ink);
	color: var(--gtk-text-inv);
}

.gtk-landing__purpose,
.gtk-landing__collection,
.gtk-landing__faq {
	background: var(--gtk-sand);
	color: var(--gtk-text);
}

/*
 * Номер розділу — дрібна позначка в куті, а не декоративна цифра.
 *
 * Її завдання не привертати увагу, а показати, що розділів скінченна
 * кількість і читач бачить, де перебуває.
 */
.gtk-landing__index {
	position: absolute;
	top: clamp(32px, 5vw, 72px);
	left: var(--gtk-landing-pad);
	margin: 0;
	font-size: 11px;
	letter-spacing: 0.14em;
	color: rgba(242, 230, 217, 0.42);
	font-feature-settings: 'tnum';
}

.gtk-landing__index--light { color: var(--gtk-text-muted); }

.gtk-landing h2 {
	margin: 0;
	font-family: var(--gtk-font-display);
	font-weight: var(--gtk-weight-display);
	letter-spacing: -0.04em;
	line-height: 0.92;
}

.gtk-landing__intro h2 { color: var(--gtk-cream); }

/* ===========================================================================
   ВСТУП
   =========================================================================== */

/*
 * Вступ дихає тим самим кроком, що й решта секцій.
 *
 * Тут стояв власний clamp — і він обходив змінну --gtk-landing-y, зокрема її
 * зменшене значення на телефоні. Через це вступ лишався заввишки в тисячу
 * пікселів там, де сусідні розділи вже стиснулися.
 */
.gtk-landing__intro { padding-block: var(--gtk-landing-y); }

.gtk-landing__intro-copy {
	width: min(1072px, 89%);
	margin: 0 auto;
	text-align: center;
}

.gtk-landing__intro-copy h2 {
	font-size: clamp(48px, 7.2vw, 123px);
	line-height: 0.98;
}

.gtk-landing__intro-copy > p:last-child {
	width: min(576px, 100%);
	margin: 40px auto 0;
	font-size: clamp(16px, 1.4vw, 20px);
	line-height: var(--gtk-lh-small);
	color: var(--gtk-text-inv);
}

/*
 * Факти рядком під вступом.
 *
 * Чотири комірки з тонкою лінією згори — не таблиця й не картки. Це підпис
 * до розділу: камінь, поверхня, розмір, доставка. Читається за один погляд,
 * і саме тому набір дрібний, а не заголовками.
 */
.gtk-landing__facts {
	display: grid;
	gap: 1px;
	max-width: 1600px;
	margin: clamp(48px, 6vw, 88px) auto 0;
	background: var(--gtk-line-inv);
	border-top: 1px solid var(--gtk-line-inv);
	border-bottom: 1px solid var(--gtk-line-inv);
}

@media (min-width: 640px) {
	.gtk-landing__facts { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1000px) {
	.gtk-landing__facts { grid-template-columns: repeat(4, 1fr); }
}

.gtk-landing__fact {
	padding: clamp(20px, 2.2vw, 32px);
	background: var(--gtk-ink);
}

.gtk-landing__fact-label {
	margin: 0 0 10px;
	font-size: 10px;
	letter-spacing: 0.26em;
	text-transform: uppercase;
	color: var(--gtk-bronze-on-ink);
}

.gtk-landing__fact-value {
	margin: 0;
	font-size: var(--gtk-small);
	line-height: 1.5;
	color: var(--gtk-cream);
}

/* ===========================================================================
   ПРИЗНАЧЕННЯ
   =========================================================================== */

.gtk-landing__purpose {
	overflow: hidden;
	padding-bottom: clamp(80px, 9vw, 144px);
}

/*
 * Лінія маршу в тлі секції.
 *
 * vector-effect тримає товщину риски незалежно від того, як сильно
 * розтягнувся viewBox: без нього preserveAspectRatio="none" розмазав би
 * горизонталі в смуги, а вертикалі лишив волосинами.
 */
.gtk-landing__stepline {
	position: absolute;
	top: 16px;
	right: -7%;
	width: min(1088px, 76vw);
	height: 544px;
	pointer-events: none;
}

.gtk-landing__stepline path { stroke: var(--gtk-line-strong); stroke-width: 1; }

.gtk-landing__head {
	position: relative;
	z-index: 1;
	max-width: 1088px;
	margin-bottom: var(--gtk-head-gap);
}

/* 134px вибивалися з ряду: сусідні розділи набрані 118-м, і «Призначення»
   виглядало більшим не за задумом, а через недогляд. */
.gtk-landing__head h2 { font-size: clamp(56px, 7vw, 118px); }

.gtk-landing__purpose-grid {
	position: relative;
	z-index: 1;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 20px;
}

.gtk-landing__purpose-card {
	position: relative;
	overflow: hidden;
	background: var(--gtk-mat-dark);
	color: var(--gtk-cream);
}

/*
 * Фотокартка має пропорцію, а не задану висоту.
 *
 * Було min-height: clamp(512px, 54vw, 768px) — на 1440 це давало бокс
 * 645×768, тобто майже квадрат. Горизонтальний знімок 3:2 доводилося
 * піднімати до такої висоти (×1,13) і зрізати сорок чотири відсотки ширини:
 * фотографія м'якшала не через файл, а через форму вікна.
 *
 * Чотири до трьох тримає бокс нижчим за оригінал на всіх перевірених
 * ширинах — кадр зменшується, а не збільшується. Стеля в 680 не дає картці
 * вирости на широкому моніторі понад те, що витримує знімок.
 *
 * Текстові картки (--plain) пропорції не мають: їх висоту задає текст.
 */
.gtk-landing__purpose-card:not(.gtk-landing__purpose-card--plain) {
	aspect-ratio: 4 / 3;
	max-height: 680px;
}

.gtk-landing__purpose-card img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	/*
	 * Об'їзду кадру тут більше немає.
	 *
	 * Стояло object-position: 50% 68% для однієї картки й 48% 46% для
	 * другої — два числа, підібрані під два конкретні знімки й дійсні
	 * рівно доти, доки власник не поміняє фото. Тепер це робить точка
	 * фокусу вкладення, і міняється вона разом із фотографією.
	 */
	/*
	 * Прямо вказане auto, а не -webkit-optimize-contrast.
	 *
	 * Це початкове значення, але воно тут не випадкове: optimize-contrast
	 * вмикає різкісний ресемплінг, від якого камінь береться сходинками на
	 * градієнтах. Зменшений знімок має згладжуватися звичайним чином.
	 */
	image-rendering: auto;
	transition: transform var(--gtk-motion);
}

.gtk-landing__purpose-card:hover img { transform: scale(1.035); }

/*
 * Затемнення одне для всіх розділів.
 *
 * Було два: типове й «глибше» (.gtk-landing__purpose--scrim), яке вмикалося
 * полем блока для світлих знімків. Різниця між ними мала сенс, доки обидва
 * були слабкі: на басейні згори й на рендерах накривок на світлій цеглі
 * читався тільки заголовок, а абзац і перехід губилися при обох варіантах.
 *
 * Тепер заливка тримає 0.82 біля низу, 0.55 на середині підпису й сходить
 * нанівець на 75 % висоти — під текстом це та щільність, при якій його
 * видно на будь-якому кадрі. Другий варіант після цього не мав би що
 * додати, тому його немає; поле в редакторі теж прибрано, щоб не лишався
 * вимикач, який нічого не вмикає.
 */
.gtk-landing__purpose-card::after {
	position: absolute;
	inset: 0;
	content: '';
	background: linear-gradient(
		to top,
		rgba(20, 18, 16, 0.82) 0%,
		rgba(20, 18, 16, 0.55) 45%,
		rgba(20, 18, 16, 0) 75%
	);
}

.gtk-landing__purpose-overlay {
	position: absolute;
	z-index: 2;
	right: clamp(24px, 3vw, 48px);
	bottom: clamp(27px, 3vw, 48px);
	left: clamp(24px, 3vw, 48px);
}

.gtk-landing__purpose-overlay h3 {
	margin: 0;
	font-family: var(--gtk-font-display);
	font-weight: var(--gtk-weight-display);
	font-size: clamp(42px, 5vw, 86px);
	letter-spacing: -0.04em;
	line-height: 1;
	color: var(--gtk-cream);
}

/*
 * Просто p, без :last-child.
 *
 * Із :last-child правило працювало лише на картках без переходу: там, де
 * знизу стоїть «Дивитися ціни →», останній елемент — span, і абзац
 * лишався зовсім без стилю. Виходило, що на половині карток він ішов
 * основним кеглем 17 px і кольором, успадкованим від картки, — тобто саме
 * там, де тексту найбільше, він був найбільшим і найменш керованим.
 */
.gtk-landing__purpose-overlay > p {
	max-width: 496px;
	margin: 16px 0 0;
	font-size: var(--gtk-small);
	line-height: var(--gtk-lh-small);
	/*
	 * 0.92, а не 0.82.
	 *
	 * Абзац на фотографії і так програє заголовку в кеглі; коли він ще й
	 * притишений до 0.82, на світлому кадрі від нього лишається сірий шум.
	 */
	color: rgba(242, 230, 217, 0.92);
}

/* ===========================================================================
   ОБРОБКА ПОВЕРХНІ
   =========================================================================== */

/*
 * Заголовок і пояснення в одному рядку: твердження ліворуч, уточнення
 * праворуч під ним. Одна колонка лишала б праву половину екрана порожньою —
 * не як паузу, а як недомальоване місце.
 */
.gtk-landing__head--split {
	display: grid;
	grid-template-columns: 1.65fr 0.75fr;
	column-gap: 80px;
	max-width: none;
}

.gtk-landing__head--split .gtk-kicker { grid-column: 1 / -1; }
.gtk-landing__head--split h2 { font-size: clamp(54px, 7vw, 118px); }

.gtk-landing__head--split > p:last-child {
	align-self: end;
	margin: 0 0 8px;
	font-size: var(--gtk-small);
	line-height: var(--gtk-lh-small);
}

/* ===========================================================================
   ВИДИ ФАСОК
   =========================================================================== */

/*
 * Заголовок стоїть збоку, а профілі — сіткою два на два праворуч.
 * У колонку під заголовком вони розтягнули б секцію ще на екран, а
 * чотири в ряд стають вужчими за сам малюнок торця.
 */
.gtk-landing__edges {
	display: grid;
	grid-template-columns: 1fr 3fr;
	gap: clamp(32px, 5vw, 96px);
	margin-top: clamp(112px, 12vw, 192px);
}

.gtk-landing__edges-head h2 { font-size: clamp(48px, 5vw, 88px); line-height: 0.95; }

.gtk-landing__edge-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
}

.gtk-landing__edge {
	min-height: 240px;
	padding: 24px;
	border-top: 1px solid var(--gtk-line-inv);
	border-right: 1px solid var(--gtk-line-inv);
}

.gtk-landing__edge:nth-last-child(-n+2) { border-bottom: 1px solid var(--gtk-line-inv); }

.gtk-landing__edge svg {
	display: block;
	width: min(100%, 192px);
	height: auto;
	margin-bottom: 24px;
}

.gtk-landing__edge svg path {
	fill: rgba(242, 230, 217, 0.025);
	stroke: rgba(242, 230, 217, 0.82);
	stroke-width: 1;
}

/* Бронзою підсвічена та ділянка контуру, якою профіль відрізняється від
   сусіднього: без неї всі чотири читаються як один прямокутник. */
.gtk-landing__edge svg .gtk-landing__edge-accent {
	fill: none;
	stroke: var(--gtk-bronze-on-ink);
	stroke-width: 2;
}

.gtk-landing__edge h3 {
	margin: 0;
	font-family: var(--gtk-font-display);
	font-weight: var(--gtk-weight-display);
	font-size: 25px;
	line-height: 1.2;
}

.gtk-landing__edge p {
	margin: 6px 0 0;
	font-size: 13px;
	line-height: 1.5;
	color: var(--gtk-text-inv);
}

/* ===========================================================================
   ГОТОВІ СХОДИНИ
   =========================================================================== */

.gtk-landing__head--row {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 40px;
	max-width: none;
}

.gtk-landing__head--row > div { min-width: 0; }
.gtk-landing__head--row h2 { font-size: clamp(56px, 7vw, 120px); }

/* Рівно чотири колонки, як у прототипі: авторозкладка теми ставила п'ять
   на широкому моніторі, і ряд переставав збігатися з рештою сторінки. */
.gtk-landing__collection .gtk-grid--4 {
	/*
	 * Ширина колонки обмежена, а не ділить екран навпіл.
	 *
	 * У розділі може бути два товари. Поки колонка була 1fr, дві картки
	 * розтягувалися на 870 px кожна, і знімки виростали до плаката — товар
	 * поруч із таким самим виглядав як інший блок сторінки. При чотирьох
	 * товарах нічого не міняється: чотири колонки по 420 px і так
	 * заповнюють ряд. Стелю ставимо на сітку, а не на колонку: так
	 * ряд із п’яти товарів стискається, а не виходить за екран.
	 */
	grid-template-columns: repeat(var(--cols, 4), minmax(0, 1fr));
	max-width: calc(var(--cols, 4) * 420px + (var(--cols, 4) - 1) * 20px);
	margin-inline: auto;
	gap: 20px;
}

/*
 * Примітка про ціни — останній ряд сітки, а не абзац під нею.
 *
 * Сітка вужча за секцію й відцентрована, тож у примітки, що стояла поруч із
 * нею, був інший лівий край — на двох товарах різниця виходила в двісті
 * тридцять пікселів, і приписка до цін виглядала початком нового розділу.
 */
.gtk-landing__collection-note {
	grid-column: 1 / -1;
	max-width: 76ch;
	margin: 26px 0 0;
	font-size: var(--gtk-small);
	line-height: 1.6;
	color: var(--gtk-text-muted);
}

/* Посилання під сіткою — запасний вихід для телефона, де кнопка поруч із
   заголовком не поміщається. */
.gtk-landing__catalog-link { display: none; }

/* ===========================================================================
   РОЗРАХУНОК
   =========================================================================== */

.gtk-landing__contact {
	display: grid;
	grid-template-columns: 1.05fr 0.95fr;
	min-height: 896px;
	background: var(--gtk-ink);
	color: var(--gtk-text-inv);
}

.gtk-landing__contact-media { overflow: hidden; }

/*
 * Висота задана явно, а не через aspect-ratio з height: auto — інакше
 * object-fit нічим не керує й знімок розтягується.
 */
.gtk-landing__contact-media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.gtk-landing__contact-panel {
	padding: clamp(64px, 8vw, 128px) clamp(24px, 6vw, 112px);
}

.gtk-landing__contact-panel h2 {
	font-size: clamp(64px, 7vw, 120px);
	color: var(--gtk-cream);
}

.gtk-landing__contact-lead {
	max-width: 528px;
	margin: 32px 0 56px;
	font-size: var(--gtk-small);
	line-height: var(--gtk-lh-small);
}

.gtk-landing__phone {
	display: inline-block;
	margin-top: 32px;
	border-bottom: 1px solid currentColor;
	font-family: var(--gtk-font-display);
	font-size: clamp(24px, 2.4vw, 40px);
	color: var(--gtk-cream);
	text-decoration: none;
	font-feature-settings: 'tnum';
}

.gtk-landing__phone:hover,
.gtk-landing__phone:focus-visible { color: var(--gtk-bronze-on-ink); }

/* ===========================================================================
   ПИТАННЯ
   =========================================================================== */

.gtk-landing__faq-layout {
	display: grid;
	grid-template-columns: 0.8fr 1.4fr;
	gap: clamp(48px, 9vw, 160px);
	align-items: start;
}

.gtk-landing__faq-head h2 { font-size: clamp(64px, 7vw, 120px); }

/*
 * Гармошка тут та сама, що на решті сайту, і власних правил не потребує:
 * секція світла, отже компонент працює в тому вигляді, в якому написаний.
 * Своя копія означала б другу поведінку, яку доведеться правити окремо.
 */

/* ===========================================================================
   ВУЖЧІ ЕКРАНИ
   =========================================================================== */

@media (max-width: 1080px) {
	/*
	 * minmax(0, 1fr), а не 1fr.
	 *
	 * 1fr означає minmax(auto, 1fr), і цей auto — не нуль, а min-content:
	 * найдовше слово заголовка. На російській сторінці плитки заголовок
	 * «Полированная, термо / или комбинированная» дав колонку в 386px там,
	 * де контейнер має 320, і разом із заголовком за екран поїхали кікер і
	 * лід — уся шапка секції. Нуль у мінімумі дозволяє колонці стиснутися,
	 * а overflow-wrap у заголовка вже є й переносить задовге слово сам.
	 */
	.gtk-landing__head--split { grid-template-columns: minmax(0, 1fr); }

	.gtk-landing__head--split > p:last-child {
		max-width: 512px;
		margin-top: 32px;
	}
	.gtk-landing__collection .gtk-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.gtk-landing__contact { grid-template-columns: 0.85fr 1.15fr; }
}

@media (max-width: 760px) {
	.gtk-landing__hero-inner { padding-top: 112px; }
	/*
	 * Підпис розбиває автор, а не ширина коробки.
	 *
	 * Десять знаків тримали колонку вузькою, доки підпис був одним
	 * рядком. Тепер у ньому є власний перенос, і десять знаків ламали його
	 * ще раз — два рядки перетворювалися на чотири.
	 */
	.gtk-landing__hero-foot p { max-width: 22ch; font-size: 26px; }
	.gtk-landing__scroll { width: 58px; height: 58px; }

	.gtk-landing__intro-copy { width: 100%; }
	/*
	 * На телефоні заголовок вступу менший.
	 *
	 * Тринадцять відсотків ширини — це шістдесят п'ять пікселів, і речення
	 * з семи слів розкладалося на п'ять рядків заввишки понад чотириста.
	 * Вступ через це займав екран цілком, а він лише підводить до розділів.
	 */
	.gtk-landing__intro-copy h2 { font-size: clamp(34px, 9vw, 52px); }

	.gtk-landing__purpose-grid { grid-template-columns: 1fr; }
	.gtk-landing__stepline { right: -40%; width: 120vw; }

	.gtk-landing__edges { grid-template-columns: 1fr; }
	.gtk-landing__edge { min-height: 178px; padding: 16px; }
	.gtk-landing__edge svg { width: min(100%, 128px); margin-bottom: 14px; }
	.gtk-landing__edge h3 { font-size: 19px; }
	.gtk-landing__edge p { font-size: 12px; }

	/* Кнопку поруч із заголовком міняє посилання під сіткою: у рядку з
	   великим заголовком вона стискалася до нечитабельної. */
	.gtk-landing__all { display: none; }

	/*
	 * У пам'ятників тієї заміни немає: посилання під сіткою там не виводять,
	 * і кнопка «Усі пам'ятники з фільтрами» просто зникала — зі сторінки не
	 * було жодного шляху в каталог.
	 *
	 * Другої кнопки в розмітці не з'явилося: display: contents прибирає
	 * коробку шапки, її діти стають прямими комірками секції, і та сама
	 * кнопка стає в стовпчику останньою. Ціна — поява шапки без плавного
	 * проявлення: [data-reveal] керує прозорістю, а елемент без коробки її
	 * не має. На телефоні цього не видно.
	 */
	.gtk-memorial__prices { display: flex; flex-direction: column; }
	.gtk-memorial__prices .gtk-landing__head--row { display: contents; }
	.gtk-memorial__prices .gtk-landing__head--row > div { order: 1; }
	.gtk-memorial__prices .gtk-memorial__price-rows { order: 2; }
	.gtk-memorial__prices .gtk-memorial__note { order: 4; }
	.gtk-memorial__prices .gtk-landing__all {
		display: inline-flex;
		order: 3;
		align-self: stretch;
		margin-top: 28px;
	}

	/*
	 * Але тільки якщо та заміна на сторінці справді є.
	 *
	 * Коли розділ обходиться однією кнопкою в шапці, сховати її на телефоні
	 * означає лишити сітку зовсім без переходу в каталог. Тоді шапка
	 * переносить кнопку під заголовок — місця в рядку немає, а в стовпчику
	 * вона поміщається цілою.
	 */
	.gtk-landing__collection:not(:has(.gtk-landing__catalog-link)) .gtk-landing__head--row {
		flex-wrap: wrap;
		align-items: flex-start;
	}
	.gtk-landing__collection:not(:has(.gtk-landing__catalog-link)) .gtk-landing__all {
		display: inline-flex;
	}

	.gtk-landing__collection .gtk-grid--4 { gap: 12px; }

	.gtk-landing__catalog-link {
		display: flex;
		align-items: center;
		justify-content: space-between;
		width: 100%;
		min-height: 56px;
		margin-top: 32px;
		border-top: 1px solid var(--gtk-line);
		border-bottom: 1px solid var(--gtk-line);
		font-size: 13px;
		letter-spacing: 0.08em;
		text-transform: uppercase;
		color: var(--gtk-heading);
		text-decoration: none;
	}

	.gtk-landing__contact { grid-template-columns: 1fr; min-height: 0; }
	/*
	 * На телефоні знімок — смуга, а не екран.
	 *
	 * Чотириста шістнадцять пікселів — це більша половина видимого, і між
	 * кнопкою й першим полем стояв цілий екран фотографії.
	 */
	/*
	 * Картки двох типів виробу на телефоні — вибір, а не галерея.
	 *
	 * Півтори тисячі пікселів на дві фотографії з двома рядками тексту
	 * відкладали ціни ще на екран. Кадру заввишки триста вистачає, щоб
	 * упізнати виріб, а далі веде саме посилання.
	 *
	 * Висоту тепер задає пропорція 4:3 — на 390 це ті самі триста. Окремий
	 * min-height звідси прибрано не для стрункості: разом з aspect-ratio він
	 * ламав картку. Висота ставала жорсткою, ширина рахувалася з неї за
	 * пропорцією, і картка виїжджала за свою колонку на п'ятдесят пікселів.
	 */

	/* Креслення форм не потребують півтора екрана на кожне. */
	.gtk-landing__form { min-height: 0; }

	.gtk-landing__contact-media img { min-height: 280px; }

	.gtk-landing__faq-layout { grid-template-columns: 1fr; }
}

@media (max-width: 460px) {
	.gtk-landing__collection .gtk-grid--4 { grid-template-columns: minmax(0, 1fr); }

	.gtk-landing__head h2,
	.gtk-landing__faq-head h2 { font-size: 58px; }

	/*
	 * Заголовок форми дрібніший за решту.
	 *
	 * Над ним стоїть кікер, під ним лід і вісім полів; у п'ятдесят восім
	 * пікселів він розкладався на чотири рядки й відсував перше поле за межі
	 * екрана — тут важливіше дійти до полів, ніж гучно назвати розділ.
	 */
	.gtk-landing__contact-panel h2 { font-size: 42px; }
}

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

	.gtk-landing__purpose-card:hover img { transform: none; }
}

/* ===========================================================================
   ТЕКСТ РОЗДІЛУ
   ---------------------------------------------------------------------------
   Довгий текст під пошук. Своя, стисліша типографіка: загальний .gtk-prose
   розрахований на статтю з широкими полями, а тут потрібен щільний набір,
   який читається стовпчиками.

   Правила не спільні з такою ж секцією в каталозі (product.css): той файл
   підключається лише на сторінках WooCommerce, а це звичайна сторінка. Тягти
   шістдесят кілобайт заради двадцяти рядків не варто.
   =========================================================================== */

.gtk-landing__text {
	background: var(--gtk-sand);
	padding: 0 var(--gtk-landing-pad) var(--gtk-landing-y);
}

.gtk-landing__text-head { margin-bottom: clamp(28px, 3.4vw, 48px); }
.gtk-landing__text-head h2 { font-size: clamp(34px, 3.6vw, 56px); }

/*
 * Кладка колонками, а не сіткою.
 *
 * Сітка вирівнює ряди за найвищою коміркою, і короткі блоки лишали б під
 * собою півекрана порожнечі. Колонки такого не роблять: блоки течуть один за
 * одним і заповнюють висоту. Розрив усередині блоку заборонений — кожен із
 * них цілий, зі своїм підзаголовком, тож посеред думки колонка не обірветься.
 */
.gtk-landing__text-grid { column-gap: clamp(32px, 5vw, 72px); }

.gtk-landing__text-item {
	max-width: 62ch;
	margin-bottom: 26px;
	font-size: var(--gtk-small);
	line-height: 1.6;
	break-inside: avoid;
	page-break-inside: avoid;
}

.gtk-landing__text-item:last-child { margin-bottom: 0; }

/* Підзаголовок працює міткою розділу, а не другим заголовком сторінки. */
.gtk-landing__text-item h2,
.gtk-landing__text-item h3 {
	margin: 1.7em 0 0.5em;
	font-family: var(--gtk-font-body);
	font-weight: 500;
	font-size: 10px;
	letter-spacing: 0.26em;
	line-height: 1.5;
	text-transform: uppercase;
	color: var(--gtk-bronze-text);
}

.gtk-landing__text-item h2:first-child,
.gtk-landing__text-item h3:first-child { margin-top: 0; }

.gtk-landing__text-item p,
.gtk-landing__text-item ul { margin-bottom: 0.9em; }
.gtk-landing__text-item li { margin-bottom: 0.35em; }

/*
 * Сітка замість кладки — коли підрозділів рівно чотири.
 *
 * Кладка розливає блоки по колонках за висотою, а не за кількістю: на
 * чотирьох підрозділах у трьох колонках остання діставала два й виходила
 * вдвічі довшою за сусідів. Сітка 2×2 ставить по два в ряд і залишає ряди
 * рівними — ціною порожнечі під коротшим блоком, якої на чотирьох майже
 * однакових абзацах немає.
 */
.gtk-landing__text-grid--grid { display: grid; columns: auto; gap: 26px clamp(32px, 5vw, 72px); }
.gtk-landing__text-grid--grid .gtk-landing__text-item { margin-bottom: 0; }

@media (min-width: 800px) {
	.gtk-landing__text-grid { columns: 2; }
	.gtk-landing__text-grid--grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 1200px) {
	.gtk-landing__text-grid { columns: 3; }
}

/* ---------------------------------------------------------------------------
   Картка застосування без фотографії
   ---------------------------------------------------------------------------
   Розкладка розрахована на кадр із підписом поверх нього. Коли знімка немає,
   та сама картка виглядала як незавантажене зображення — тому тут вона стає
   світлою й текстовою, з підписом угорі.
   --------------------------------------------------------------------------- */

.gtk-landing__purpose-card--plain {
	display: flex;
	min-height: clamp(220px, 18vw, 290px);
	background: var(--gtk-sand);
	color: var(--gtk-text);
	border: 1px solid var(--gtk-line);
}

.gtk-landing__purpose-card--plain::after { content: none; }

.gtk-landing__purpose-card--plain .gtk-landing__purpose-overlay {
	position: static;
	padding: clamp(24px, 2.6vw, 40px);
}

.gtk-landing__purpose-card--plain h3 {
	color: var(--gtk-heading);
	font-size: clamp(30px, 3vw, 46px);
}

/*
 * Селектор важчий, ніж здається потрібним, і це навмисно.
 *
 * Підпис на фотографії світлий — інакше його не було б видно на знімку. Те
 * правило написане як `.gtk-landing__purpose-overlay > p:last-child`, тож
 * коротше за нього тут не подіє: на білій картці текст лишався кремовим і
 * читався ледве-ледве.
 */
.gtk-landing__purpose-card--plain .gtk-landing__purpose-overlay > p:last-child {
	max-width: 46ch;
	color: var(--gtk-text);
}

/* Із чотирма застосуваннями сітка стає двома рядами по два. */
@media (min-width: 860px) {
	.gtk-landing__purpose-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ===========================================================================
   ФОРМИ Й ПРОФІЛІ
   ---------------------------------------------------------------------------
   Ізометричні креслення на темному тлі, тією самою решіткою, що й обробка
   поверхні. Показують геометрію: де проходить фаска, скільки ярусів у кришці.
   =========================================================================== */

.gtk-landing__forms {
	position: relative;
	padding: var(--gtk-landing-y) var(--gtk-landing-pad);
	background: var(--gtk-ink);
	color: var(--gtk-text-inv);
}

.gtk-landing__forms h2,
.gtk-landing__forms h3 { color: var(--gtk-cream); }

.gtk-landing__form-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	border-top: 1px solid var(--gtk-line-inv);
	border-left: 1px solid var(--gtk-line-inv);
}

@media (max-width: 760px) {
	.gtk-landing__form-grid { grid-template-columns: 1fr; }
}

.gtk-landing__form {
	min-height: 384px;
	padding: clamp(24px, 3vw, 48px);
	border-right: 1px solid var(--gtk-line-inv);
	border-bottom: 1px solid var(--gtk-line-inv);
}

.gtk-landing__form-type {
	display: block;
	font-size: 11px;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--gtk-bronze-on-ink);
}

.gtk-landing__form svg {
	display: block;
	width: min(100%, 448px);
	height: auto;
	margin: 16px auto 32px;
}

/*
 * Тіло креслення ледь помітне, підсвічена лише та лінія, якою один варіант
 * відрізняється від сусіднього. Без цього всі чотири малюнки читаються як
 * одна й та сама коробка в перспективі.
 */
.gtk-landing__form-body {
	fill: rgba(242, 230, 217, 0.035);
	stroke: rgba(242, 230, 217, 0.78);
	stroke-width: 1;
}

.gtk-landing__form-accent {
	fill: none;
	stroke: var(--gtk-bronze-on-ink);
	stroke-width: 2.5;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.gtk-landing__form h3 {
	margin: 0;
	font-family: var(--gtk-font-display);
	font-weight: var(--gtk-weight-display);
	font-size: clamp(21px, 1.8vw, 26px);
	line-height: 1.2;
}

.gtk-landing__form p {
	margin: 8px 0 0;
	font-size: 13px;
	line-height: 1.5;
	color: var(--gtk-text-inv);
}

/* ---------------------------------------------------------------------------
   Заголовок із відступом ліворуч
   ---------------------------------------------------------------------------
   Кікер і заголовок починаються не від краю, а від другої колонки. Порожнє
   поле ліворуч тут не помилка розкладки: воно відділяє розділ від
   попереднього краще за будь-яку лінію.
   --------------------------------------------------------------------------- */

@media (min-width: 900px) {
	.gtk-landing__head--offset {
		display: grid;
		grid-template-columns: 0.45fr 1.55fr;
		align-items: end;
	}
	.gtk-landing__head--offset > * { grid-column: 2; }
}

/* Акцент у заголовку першого екрана. */
.gtk-landing__h1 em {
	font-style: normal;
	color: var(--gtk-bronze-on-ink);
}

/* ---------------------------------------------------------------------------
   Компактні пункти застосування
   ---------------------------------------------------------------------------
   Без фотографій картка не потребує висоти в триста пікселів: у ній лише
   назва й рядок пояснення. У ряду по чотири вони читаються за один погляд,
   а не за два екрани прокрутки.
   --------------------------------------------------------------------------- */

@media (min-width: 700px) {
	.gtk-landing__purpose-grid--compact { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 1080px) {
	.gtk-landing__purpose-grid--compact { grid-template-columns: repeat(var(--cols, 4), minmax(0, 1fr)); }
}

.gtk-landing__purpose-grid--compact .gtk-landing__purpose-card--plain {
	min-height: 0;
	background: none;
	border: 0;
	border-top: 1px solid var(--gtk-line-strong);
}

.gtk-landing__purpose-grid--compact .gtk-landing__purpose-overlay {
	padding: 22px 0 0;
}

.gtk-landing__purpose-grid--compact .gtk-landing__purpose-card--plain h3 {
	font-size: clamp(21px, 1.9vw, 26px);
	line-height: 1.2;
}

.gtk-landing__purpose-grid--compact .gtk-landing__purpose-card--plain .gtk-landing__purpose-overlay > p:last-child {
	margin-top: 10px;
	font-size: var(--gtk-small);
	line-height: 1.55;
}

/* ===========================================================================
   ФОРМАТИ Й ТОВЩИНА
   ---------------------------------------------------------------------------
   Таблиця, а не картки: тут звіряють числа між собою, і однакові величини
   мають стояти стовпчиком.

   На телефоні таблиця розсипається на картки — рядок із п'яти стовпців у
   триста двадцять пікселів не влазить, а горизонтальна прокрутка всередині
   сторінки губиться. Підпис кожної комірки береться з data-label.
   =========================================================================== */

.gtk-landing__formats {
	position: relative;
	padding: var(--gtk-landing-y) var(--gtk-landing-pad);
	background: var(--gtk-sand);
}

.gtk-landing__format-wrap { overflow-x: auto; }

.gtk-landing__format-table {
	width: 100%;
	border-collapse: collapse;
	font-size: var(--gtk-small);
}

.gtk-landing__format-table th {
	padding: 0 16px 12px 0;
	text-align: left;
	font-size: 11px;
	font-weight: 500;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--gtk-text-muted);
	border-bottom: 1px solid var(--gtk-line-strong);
}

.gtk-landing__format-table td {
	padding: 18px 16px 18px 0;
	border-bottom: 1px solid var(--gtk-line);
	color: var(--gtk-text);
	font-feature-settings: 'tnum';
}

.gtk-landing__format-table tr td:first-child {
	font-family: var(--gtk-font-display);
	font-size: clamp(19px, 1.7vw, 23px);
	color: var(--gtk-heading);
}

.gtk-landing__format-action { text-align: right; }

.gtk-landing__format-link {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	font-size: 12px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--gtk-bronze-text);
	text-decoration: none;
	border-bottom: 1px solid currentColor;
}

.gtk-landing__format-note {
	margin: clamp(20px, 2.4vw, 32px) 0 0;
	max-width: 62ch;
	font-size: var(--gtk-small);
	line-height: var(--gtk-lh-small);
	color: var(--gtk-text);
}

@media (max-width: 760px) {
	.gtk-landing__format-table thead {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip: rect(0 0 0 0);
		clip-path: inset(50%);
	}

	.gtk-landing__format-table tr {
		display: block;
		padding: 16px 0;
		border-bottom: 1px solid var(--gtk-line-strong);
	}

	.gtk-landing__format-table td {
		display: flex;
		justify-content: space-between;
		gap: 16px;
		padding: 4px 0;
		border: 0;
	}

	.gtk-landing__format-table td::before {
		content: attr(data-label);
		font-size: 11px;
		letter-spacing: 0.14em;
		text-transform: uppercase;
		color: var(--gtk-text-muted);
	}

	.gtk-landing__format-table td:first-child::before { content: none; }
	.gtk-landing__format-action { justify-content: flex-start; }
}

/*
 * Вибір каменю смугою над сіткою товарів.
 *
 * Без фотографій навмисно: знімки порід уже стоять у самих картках, і друга
 * галерея тих самих каменів була б дублем товарів. Тут потрібна навігація.
 */
.gtk-landing__stones-row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 10px;
	margin-bottom: clamp(24px, 3vw, 40px);
}

.gtk-landing__stones-label {
	margin-right: 4px;
	font-size: 11px;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--gtk-text-muted);
}

/* ===========================================================================
   КАМІНЬ І КОЛЬОРИ
   ---------------------------------------------------------------------------
   Три зразки поруч, в однаковому масштабі. Тло темне: на ньому камінь читає
   себе сам, а сусідні кадри порівнюються між собою, а не з білим аркушем.
   =========================================================================== */

.gtk-landing__stones {
	position: relative;
	padding: var(--gtk-landing-y) var(--gtk-landing-pad);
	background: var(--gtk-ink);
	color: var(--gtk-text-inv);
}

.gtk-landing__stones h2,
.gtk-landing__stones h3 { color: var(--gtk-cream); }

.gtk-landing__stone-grid {
	display: grid;
	grid-template-columns: repeat(var(--cols, 3), minmax(0, 1fr));
	gap: clamp(20px, 2.4vw, 36px);
}

/*
 * На телефоні камені йдуть один під одним.
 *
 * Мобільного правила тут не було зовсім: три колонки лишалися й на 390,
 * де кожна виходила по сто пікселів. У таку ширину опис каменю —
 * «Чорний із синіми переливами, зерно крупне» — не вкладається жодним
 * переносом, і найдовше слово виходило за трек. minmax(0, 1fr) тримає
 * ширину самого трека, але вміст із нього все одно вилазив і тягнув за
 * собою всю сторінку: саме звідси бралася горизонтальна прокрутка на
 * стільницях, підвіконнях і відливах.
 */
@media (max-width: 700px) {
	.gtk-landing__stone-grid { grid-template-columns: minmax(0, 1fr); }
}

.gtk-landing__stone {
	display: flex;
	flex-direction: column;
	color: inherit;
	text-decoration: none;
}

/*
 * Пропорція кадру задана тут, а не в самому файлі.
 *
 * Зразки знімали в різні дні й різними камерами. Однакова коробка з
 * object-fit: cover — єдиний спосіб показати їх в одному масштабі, а масштаб
 * тут і є змістом розділу: інакше дрібне зерно покостівського здаватиметься
 * крупнішим за лабрадорит просто тому, що кадр ближчий.
 */
.gtk-landing__stone-shot {
	display: block;
	overflow: hidden;
	aspect-ratio: 4 / 3;
	background: var(--gtk-mat-dark);
}

.gtk-landing__stone-shot img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 700ms var(--gtk-ease);
}

.gtk-landing__stone--link:hover .gtk-landing__stone-shot img { transform: scale(1.04); }

.gtk-landing__stone-body { padding-top: 20px; }

.gtk-landing__stone h3 {
	margin: 0;
	font-family: var(--gtk-font-display);
	font-weight: var(--gtk-weight-display);
	font-size: clamp(25px, 2.2vw, 36px);
	line-height: 1.1;
}

.gtk-landing__stone-color {
	margin: 8px 0 0;
	font-size: 15px;
	line-height: 1.55;
	color: rgba(242, 230, 217, 0.78);
}

.gtk-landing__stone-more {
	display: inline-block;
	margin-top: 16px;
	font-size: 12px;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--gtk-bronze-on-ink);
}

.gtk-landing__stone--link:hover .gtk-landing__stone-more,
.gtk-landing__stone--link:focus-visible .gtk-landing__stone-more { color: var(--gtk-cream); }

.gtk-landing__stone--link:focus-visible {
	outline: 2px solid var(--gtk-bronze-on-ink);
	outline-offset: 4px;
}

.gtk-landing__stone-note {
	max-width: 62ch;
	margin: clamp(28px, 3vw, 44px) 0 0;
	font-size: 15px;
	line-height: 1.6;
	color: rgba(242, 230, 217, 0.62);
}

/*
 * Світлий варіант розділу каменю.
 *
 * Зразки бувають двох різних порід кадру: знімок каменю в інтер'єрі живе на
 * чорнилі, а креслення виробу на білому тлі — ні, воно перетворюється на
 * білий прямокутник. Тло секції має йти за знімками, а не навпаки.
 */
.gtk-landing__stones--light {
	background: var(--gtk-sand);
	color: var(--gtk-text);
}

.gtk-landing__stones--light h2,
.gtk-landing__stones--light h3 { color: var(--gtk-ink); }
.gtk-landing__stones--light .gtk-kicker { color: var(--gtk-bronze-text); }
.gtk-landing__stones--light .gtk-landing__stone-shot { background: var(--gtk-paper); }
/* Креслення виробу вписуємо цілком: обрізання відрізало б йому кінці,
   а саме по них і порівнюють два камені. */
.gtk-landing__stones--light .gtk-landing__stone-shot img { object-fit: contain; }
.gtk-landing__stones--light .gtk-landing__stone-color { color: var(--gtk-text); }
.gtk-landing__stones--light .gtk-landing__stone-more { color: var(--gtk-bronze-text); }
.gtk-landing__stones--light .gtk-landing__stone--link:hover .gtk-landing__stone-more,
.gtk-landing__stones--light .gtk-landing__stone--link:focus-visible .gtk-landing__stone-more { color: var(--gtk-ink); }
.gtk-landing__stones--light .gtk-landing__stone-note { color: var(--gtk-text-muted); }

/*
 * Картка типу виробу як посилання.
 *
 * Розділ «два формати» — це перший вибір покупця. Доки картки лишалися
 * ілюстраціями, вибір доводилося повторювати нижче, у спільній сітці.
 */
.gtk-landing__purpose-card--link { display: block; text-decoration: none; color: inherit; }

/*
 * Перехід тим самим кольором, що й абзац над ним.
 *
 * Була бронза (--gtk-bronze-on-ink). На темному кадрі вона працювала, на
 * світлому — ні: тепле по теплому зливалося зі знімком ще швидше за текст.
 * Тепер перехід тримається на тому самому світлі, що й абзац, а посиланням
 * його роблять розрядка, капслок і стрілка, а не колір.
 */
.gtk-landing__purpose-more {
	display: inline-block;
	margin-top: 14px;
	font-size: 12px;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: rgba(242, 230, 217, 0.92);
}

.gtk-landing__purpose-card--link:hover .gtk-landing__purpose-more,
.gtk-landing__purpose-card--link:focus-visible .gtk-landing__purpose-more { color: var(--gtk-bronze-on-ink); }

.gtk-landing__purpose-card--link:focus-visible {
	outline: 2px solid var(--gtk-bronze-on-ink);
	outline-offset: 4px;
}

/* ---------------------------------------------------------------------------
   Картка застосування з підписом під фотографією
   ---------------------------------------------------------------------------
   Знімок і текст стоять один під одним, а не один на одному.

   Накладений підпис працює на фотографії об'єкта: там є темні ділянки, і
   затемнення лягає на них непомітно. На світлому рендері деталі кремовий
   текст зникає, а градієнт, який мав би його врятувати, читається як бруд
   на білому тлі. Тому в розділах із рендерами картка розкладається: кадр
   лишається чистим, підпис іде під ним чорнилом по білому.
   --------------------------------------------------------------------------- */

.gtk-landing__purpose-card--below {
	background: none;
	color: var(--gtk-text);
	overflow: visible;
}

/* Затемнення тут нічого не рятує — воно просто бруднить світлий кадр. */
.gtk-landing__purpose-card--below::after { content: none; }

.gtk-landing__purpose-card--below img {
	aspect-ratio: 4 / 3;
	object-fit: cover;
	background: var(--gtk-paper);
}

/*
 * Широкий кадр для виробу, який весь у довжині.
 *
 * Бордюр на рендері лежить на всю ширину кадру, і 4:3 відрізає йому обидва
 * кінці — лишається шматок бруска без початку й без краю. Тло тут біле, а
 * не паперове: рендери зняті на білому, і сіре поле під ними читалося б як
 * рамка, якої немає.
 */
.gtk-landing__purpose-grid--wide .gtk-landing__purpose-card--below img {
	aspect-ratio: 16 / 9;
	background: var(--gtk-white);
}

.gtk-landing__purpose-card--below .gtk-landing__purpose-overlay {
	position: static;
	inset: auto;
	padding: 18px 0 0;
}

.gtk-landing__purpose-card--below h3 {
	margin: 0;
	font-size: clamp(24px, 2.2vw, 32px);
	color: var(--gtk-heading);
}

.gtk-landing__purpose-card--below .gtk-landing__purpose-overlay > p {
	margin-top: 8px;
	max-width: 42ch;
	font-size: var(--gtk-small);
	line-height: 1.6;
	color: var(--gtk-text);
}

.gtk-landing__purpose-card--below .gtk-landing__purpose-more {
	margin-top: 14px;
	color: var(--gtk-bronze-text);
}

.gtk-landing__purpose-card--below:hover .gtk-landing__purpose-more,
.gtk-landing__purpose-card--below:focus-visible .gtk-landing__purpose-more {
	color: var(--gtk-ink);
}

/*
 * Три в ряд, а не два.
 *
 * Пара карток описує вибір «або — або»; трійка описує розділ, і третя
 * картка в другому ряду читалася б як окремий, менш важливий виріб.
 */
.gtk-landing__purpose-grid--below { grid-template-columns: repeat(3, minmax(0, 1fr)); }

@media (max-width: 860px) {
	.gtk-landing__purpose-grid--below { grid-template-columns: minmax(0, 1fr); }
}

/* ---------------------------------------------------------------------------
   Розрахунок без фотографії
   --------------------------------------------------------------------------- */

/*
 * Одна колонка на всю ширину секції.
 *
 * Сітка 1.05fr / 0.95fr лишала половину чорного поля порожньою, коли
 * знімка немає. Форма при цьому тиснулася у вужчу половину, хоча місця
 * поруч було стільки ж.
 */
.gtk-landing__contact--no-media {
	grid-template-columns: minmax(0, 1fr);
	min-height: 0;
}

/* Рядок форми не має розтягуватися на всі 1400 — читати таке поле важко. */
.gtk-landing__contact--no-media .gtk-landing__contact-panel > * { max-width: 920px; }

/* --------------------------------------------------------------------------- */

/* Дві колонки замість трьох: див. коментар у gtkhouse_render_landing_text(). */
@media (min-width: 1200px) {
	.gtk-landing__text-grid--two { columns: 2; }
}

/* ===========================================================================
   РОЗДІЛ ПАМ'ЯТНИКІВ
   ---------------------------------------------------------------------------
   Усе на білому. Контраст, яким живуть товарні посадкові, тут працює проти
   сторінки: темна секція наприкінці читається як натиск, а фотографія на
   весь екран із назвою поверх неї перетворює виріб на банер. Замість
   заливок — волосінь між рядками і одна лінія чорнилом там, де починається
   перелік.
   =========================================================================== */

/*
 * Тихіша шкала заголовків.
 *
 * Заголовки товарних розділів зроблені так, щоб зупинити погляд. Тут вони
 * мають лише називати розділ: людина вже знає, навіщо прийшла, і кричати
 * їй нема чого.
 */
.gtk-quiet {
	--gtk-h1: clamp(42px, 6vw, 84px);
	--gtk-h2: clamp(32px, 4vw, 56px);
}

.gtk-quiet .gtk-landing__head h2 { font-size: var(--gtk-h2); }

/* Спільні поля секцій розділу. */
.gtk-memorial__hero,
.gtk-memorial__list,
.gtk-memorial__shapes,
.gtk-memorial__prices,
.gtk-memorial__how {
	position: relative;
	padding: var(--gtk-landing-y) var(--gtk-landing-pad);
}

.gtk-memorial__list,
.gtk-memorial__shapes,
.gtk-memorial__prices,
.gtk-memorial__how {
	border-top: 1px solid var(--gtk-line);
}

/* Пояснення праворуч від заголовка — те саме, що side у решті блоків. */
.gtk-memorial__side {
	align-self: end;
	max-width: 42ch;
	margin: 0 0 8px;
	font-size: var(--gtk-small);
	line-height: var(--gtk-lh-small);
	color: var(--gtk-text);
}

/* --- Перший екран --------------------------------------------------------- */

.gtk-memorial__hero {
	display: grid;
	grid-template-columns: minmax(0, 1.05fr) minmax(320px, 0.95fr);
	gap: clamp(32px, 5vw, 96px);
	align-items: center;
}

.gtk-memorial__hero h1 {
	max-width: 12ch;
	font-size: var(--gtk-h1);
	font-weight: 400;
	line-height: 1.04;
	color: var(--gtk-heading);
}

.gtk-memorial__hero-lead {
	margin-top: 28px;
	max-width: 46ch;
	font-size: 19px;
	line-height: 1.7;
}

.gtk-memorial__acts {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 28px;
	margin-top: 40px;
}

/*
 * Висота 44 px — не декор, а розмір пальця.
 *
 * Текстове посилання заввишки в рядок на телефоні дає смужку в п'ятнадцять
 * пікселів: щоб у неї влучити, треба цілитися. Кнопка поруч цієї проблеми
 * не має, і поруч із нею промах помітніший.
 */
.gtk-memorial__link {
	display: inline-flex;
	min-height: 44px;
	align-items: center;
	color: var(--gtk-bronze-text);
	text-decoration: none;
	font-size: var(--gtk-small);
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

/* Відступ перед стрілкою: letter-spacing з'їдає звичайний пробіл. */
.gtk-memorial__link span { margin-left: 10px; }

.gtk-memorial__link:hover,
.gtk-memorial__link:focus-visible { color: var(--gtk-ink); }

.gtk-memorial__hero-media {
	aspect-ratio: 4 / 5;
	overflow: hidden;
	background: var(--gtk-paper);
}

.gtk-memorial__hero-media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

@media (max-width: 860px) {
	.gtk-memorial__hero { grid-template-columns: minmax(0, 1fr); }

	/*
	 * На телефоні знімок іде першим і стає квадратом.
	 *
	 * Формат 4:5 на вузькому екрані з'їдає майже весь перший екран, і
	 * заголовок опиняється за його межею.
	 */
	.gtk-memorial__hero-media { aspect-ratio: 1 / 1; order: -1; }
}

/* --- Фотографія і список -------------------------------------------------- */

.gtk-memorial__split {
	display: grid;
	grid-template-columns: minmax(300px, 0.8fr) minmax(0, 1.2fr);
	gap: clamp(32px, 5vw, 96px);
	align-items: start;
}

.gtk-memorial__list--flip .gtk-memorial__split {
	grid-template-columns: minmax(0, 1fr) minmax(300px, 0.75fr);
}

.gtk-memorial__media {
	margin: 0;
	aspect-ratio: 3 / 4;
	background: var(--gtk-paper);
}

.gtk-memorial__media--tall { aspect-ratio: auto; }

.gtk-memorial__media img {
	width: 100%;
	aspect-ratio: 3 / 4;
	object-fit: cover;
}

.gtk-memorial__media--tall img { aspect-ratio: 4 / 5; }

.gtk-memorial__media figcaption {
	margin-top: 12px;
	font-size: 14px;
	line-height: 1.5;
	color: var(--gtk-text-muted);
}

/*
 * Волосінь замість карток.
 *
 * Три частини комплекту — не три товари, між якими вибирають; це опис
 * одного виробу. Рамки навколо кожної перетворили б перелік на вітрину.
 */
.gtk-memorial__rows { border-top: 1px solid var(--gtk-line-strong); }

.gtk-memorial__row {
	display: grid;
	grid-template-columns: minmax(120px, 0.35fr) 1fr;
	gap: 24px;
	padding: 28px 0;
	border-bottom: 1px solid var(--gtk-line-strong);
}

.gtk-memorial__row h3 {
	margin: 0;
	font-size: 28px;
	font-weight: 500;
	color: var(--gtk-heading);
}

.gtk-memorial__dim {
	display: block;
	margin-top: 6px;
	font-size: 14px;
	line-height: 1.5;
	color: var(--gtk-text-muted);
}

.gtk-memorial__row p {
	margin: 0;
	max-width: 52ch;
	font-size: 16px;
	line-height: 1.7;
}

.gtk-memorial__after {
	margin-top: 28px;
	max-width: 56ch;
	font-size: 16px;
	line-height: 1.7;
}

/* У дзеркальному варіанті рядки вужчі: поруч стоїть висока фотографія. */
.gtk-memorial__list--flip .gtk-memorial__row { grid-template-columns: minmax(0, 1fr); gap: 6px; padding: 22px 0; }
.gtk-memorial__list--flip .gtk-memorial__row h3 { font-size: 24px; }
.gtk-memorial__list--flip .gtk-memorial__row p { max-width: 56ch; }

@media (max-width: 860px) {
	.gtk-memorial__split,
	.gtk-memorial__list--flip .gtk-memorial__split { grid-template-columns: minmax(0, 1fr); }

	.gtk-memorial__media { max-width: 420px; }
	.gtk-memorial__row { grid-template-columns: minmax(0, 1fr); gap: 8px; }
}

/* --- Силуети стели -------------------------------------------------------- */

.gtk-memorial__shape-grid {
	display: grid;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	gap: clamp(16px, 2.4vw, 40px);
}

.gtk-memorial__shape {
	color: inherit;
	text-decoration: none;
}

/*
 * Ширина силуета обмежена, а не задана часткою колонки.
 *
 * На планшеті колонок стає три замість п'яти, і контур, розтягнутий на всю
 * колонку, виростав до пів екрана заввишки: розділ, який має показати
 * вибір за один погляд, розтягувався на два екрани.
 */
.gtk-memorial__shape svg {
	display: block;
	width: 100%;
	max-width: 200px;
	height: auto;
}

/*
 * Контур лінією, заливка білим.
 *
 * Знімків форм немає, а чужі брати не можна. Лінія тут навіть чесніша за
 * фотографію: вона показує рівно те, про що йдеться, і не обіцяє
 * конкретного каменю з чужого двору.
 */
.gtk-memorial__shape svg path {
	fill: var(--gtk-white);
	stroke: var(--gtk-ink);
	stroke-width: 1.4;
	transition: fill var(--gtk-transition);
}

.gtk-memorial__shape:hover svg path,
.gtk-memorial__shape:focus-visible svg path { fill: var(--gtk-brand-tint); }

.gtk-memorial__shape h3 {
	margin: 18px 0 0;
	font-size: 22px;
	font-weight: 500;
	color: var(--gtk-heading);
}

.gtk-memorial__shape p {
	margin: 4px 0 0;
	max-width: 26ch;
	font-size: var(--gtk-small);
	line-height: 1.6;
}

@media (max-width: 900px) {
	.gtk-memorial__shape-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 540px) {
	.gtk-memorial__shape-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* --- Ціни рядками --------------------------------------------------------- */

/*
 * Рядок, а не картка.
 *
 * Позицій чотири, і відрізняються вони двома числами. У сітці карток ці
 * числа стоять у різних місцях екрана, і порівняти їх можна тільки
 * переводячи погляд. У рядку вони збираються в стовпчик.
 */
.gtk-memorial__price-rows { border-top: 1px solid var(--gtk-ink); }

.gtk-memorial__price-row {
	display: grid;
	grid-template-columns: 150px minmax(0, 1.4fr) minmax(0, 1fr) auto;
	gap: clamp(20px, 3vw, 48px);
	align-items: center;
	padding: 24px 0;
	border-bottom: 1px solid var(--gtk-line-strong);
	color: inherit;
	text-decoration: none;
	transition: background var(--gtk-transition);
}

.gtk-memorial__price-row:hover,
.gtk-memorial__price-row:focus-visible { background: var(--gtk-brand-tint); }

.gtk-memorial__price-media {
	display: block;
	width: 150px;
	aspect-ratio: 3 / 4;
	overflow: hidden;
	background: var(--gtk-paper);
}

.gtk-memorial__price-media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.gtk-memorial__price-name { display: block; min-width: 0; }

.gtk-memorial__price-title {
	display: block;
	font-family: var(--gtk-font-display);
	font-size: 24px;
	font-weight: 500;
	line-height: 1.25;
	color: var(--gtk-heading);
}

.gtk-memorial__price-kit {
	display: block;
	margin-top: 6px;
	font-size: var(--gtk-small);
	line-height: 1.6;
	color: var(--gtk-text);
}

.gtk-memorial__price-dim {
	display: block;
	font-size: 16px;
	line-height: 1.5;
	color: var(--gtk-text);
}

.gtk-memorial__price-dim b {
	display: block;
	margin-bottom: 4px;
	font-size: 14px;
	font-weight: 500;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--gtk-ink);
}

/* Сума не переноситься: «19 000» у два рядки читається як два числа. */
.gtk-memorial__price-sum {
	font-size: 22px;
	line-height: 1.3;
	font-weight: 500;
	color: var(--gtk-ink);
	text-align: right;
	white-space: nowrap;
}

.gtk-memorial__price-sum .woocommerce-Price-amount { white-space: nowrap; }

.gtk-memorial__note {
	margin-top: 32px;
	max-width: 62ch;
	font-size: 16px;
	line-height: 1.7;
}

@media (max-width: 860px) {
	/*
	 * На телефоні рядок складається: знімок ліворуч на два ряди, праворуч
	 * назва, розмір і сума одна під одною. Чотири колонки тут дали б
	 * стовпчик завширшки в одне слово.
	 */
	.gtk-memorial__price-row {
		grid-template-columns: 110px minmax(0, 1fr);
		gap: 6px 20px;
	}

	.gtk-memorial__price-media { width: 110px; grid-row: 1 / 4; }
	.gtk-memorial__price-name,
	.gtk-memorial__price-dim,
	.gtk-memorial__price-sum { grid-column: 2; }
	.gtk-memorial__price-sum { text-align: left; }
	.gtk-memorial__price-title { font-size: 21px; }
	.gtk-memorial__price-dim b { margin-bottom: 0; }
}

/* --- Порядок замовлення --------------------------------------------------- */

.gtk-memorial__steps {
	counter-reset: gtk-step;
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: clamp(20px, 3vw, 48px);
	padding-top: 28px;
	border-top: 1px solid var(--gtk-ink);
}

.gtk-memorial__step { counter-increment: gtk-step; }

/*
 * Єдине місце на сторінці, де номер доречний.
 *
 * Наскрізної нумерації секцій розділ не має навмисно: «03» над питаннями
 * означало б чергу, якої немає. Тут черга є — і номер її й називає.
 */
.gtk-memorial__step::before {
	content: counter(gtk-step, decimal-leading-zero);
	display: block;
	margin-bottom: 16px;
	font-family: var(--gtk-font-display);
	font-size: 42px;
	font-weight: 400;
	line-height: 1;
	color: var(--gtk-bronze-text);
	font-variant-numeric: tabular-nums;
}

.gtk-memorial__step h3 {
	margin: 0;
	font-size: 23px;
	font-weight: 500;
	color: var(--gtk-heading);
}

.gtk-memorial__step p {
	margin: 8px 0 0;
	font-size: 16px;
	line-height: 1.7;
}

@media (max-width: 860px) {
	.gtk-memorial__steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 520px) {
	.gtk-memorial__steps { grid-template-columns: minmax(0, 1fr); }
}

/* --- Світла форма --------------------------------------------------------- */

/*
 * Та сама секція, що на решті посадкових, але на білому.
 *
 * Перемикається полем, а не окремим блоком: розмітка, бекенд і поля в неї
 * ті самі, різниця лише в тому, як вона звучить.
 */
.gtk-landing__contact--light {
	background: var(--gtk-white);
	color: var(--gtk-text);
	border-top: 1px solid var(--gtk-line);
}

.gtk-landing__contact--light .gtk-landing__contact-panel { max-width: 900px; }
.gtk-landing__contact--light h2 { color: var(--gtk-heading); }
.gtk-landing__contact--light .gtk-landing__contact-lead { color: var(--gtk-text); }

/*
 * Поля на білому.
 *
 * Кремові кольори полів описані в home.css селекторами на два-три класи,
 * тому обгортка з одного класу їх не перебиває: підписи лишалися ледь
 * помітними слідами на білому. Вага селекторів тут така сама, як там.
 */
.gtk-landing__contact--light .gtk-form--compact .gtk-form__row--extra .gtk-label,
.gtk-landing__contact--light .gtk-form--compact .gtk-label { color: var(--gtk-bronze-text); }

.gtk-landing__contact--light .gtk-form.gtk-form--compact input[type],
.gtk-landing__contact--light .gtk-form.gtk-form--compact textarea,
.gtk-landing__contact--light .gtk-form--compact select {
	color: var(--gtk-ink);
	border-bottom-color: var(--gtk-line-strong);
}

.gtk-landing__contact--light .gtk-form.gtk-form--compact input[type]::placeholder,
.gtk-landing__contact--light .gtk-form.gtk-form--compact textarea::placeholder {
	color: var(--gtk-text-muted);
}

.gtk-landing__contact--light .gtk-form.gtk-form--compact input[type]:hover,
.gtk-landing__contact--light .gtk-form.gtk-form--compact textarea:hover,
.gtk-landing__contact--light .gtk-form--compact select:hover {
	border-bottom-color: var(--gtk-ink);
}

/* Стрілка списку намальована градієнтами — свої кольори й у неї. */
.gtk-landing__contact--light .gtk-form--compact select {
	background-image:
		linear-gradient(45deg, transparent 50%, var(--gtk-ink) 50%),
		linear-gradient(135deg, var(--gtk-ink) 50%, transparent 50%);
}

.gtk-landing__contact--light .gtk-form .gtk-file__button { color: var(--gtk-text-muted); }
.gtk-landing__contact--light .gtk-form .gtk-file__button:hover,
.gtk-landing__contact--light .gtk-form .gtk-file__button:hover svg { color: var(--gtk-ink); }

.gtk-landing__contact--light .gtk-form--compact .gtk-hint--field,
.gtk-landing__contact--light .gtk-form--compact .gtk-form__submit .gtk-hint,
.gtk-landing__contact--light .gtk-file__name { color: var(--gtk-text-muted); }

.gtk-landing__contact--light .gtk-form--compact .gtk-form__submit .gtk-hint a { color: var(--gtk-ink); }

.gtk-landing__contact--light .gtk-landing__phone { color: var(--gtk-ink); }

.gtk-landing__master {
	margin-top: 10px;
	font-size: var(--gtk-small);
	line-height: 1.6;
	color: var(--gtk-text-muted);
}

/* Кнопка на білому — контурна чорнилом, а не кремова. */
.gtk-landing__contact--light .gtk-form--compact .gtk-btn {
	color: var(--gtk-ink);
	border-color: var(--gtk-ink);
}

.gtk-landing__contact--light .gtk-form--compact .gtk-btn:hover,
.gtk-landing__contact--light .gtk-form--compact .gtk-btn:focus-visible {
	background: var(--gtk-brand-tint);
	color: var(--gtk-brand-dark);
	border-color: var(--gtk-brand-dark);
}

/* ===========================================================================
   КАРТКИ РОЗДІЛУ НА ТЕЛЕФОНІ — ПІДПИС ПІД ФОТО
   ===========================================================================

   Текст поверх знімка тримається рівно доти, доки картка вища за підпис.
   На 375 px картка — це кадр 4:3 заввишки близько 250 пікселів, а заголовок
   із абзацом і переходом займають від 210 до 250: підпис накриває кадр
   цілком. Далі все залежить від фотографії — на темній вулиці ще читається,
   на воді басейну згори або на рендері накривки на світлій цеглі від абзацу
   лишається сірий шум, і жодне затемнення цього не лагодить, бо затемнювати
   доводиться весь знімок.

   Тому нижче 600 px картка перестає бути фотографією з написом і стає
   фотографією з підписом: кадр зверху, текст під ним чорнилом по білому.
   Той самий прийом уже працює у варіанті --below, тут він просто стає
   правилом для всіх карток зі знімком.

   --plain виключено навмисно: у таких карток фотографії немає зовсім, вони
   й так світлі й текстові, і власні правила для них лежать нижче.
   --------------------------------------------------------------------------- */

@media (max-width: 600px) {
	.gtk-landing__purpose-grid { gap: 28px; }

	.gtk-landing__purpose-card:not(.gtk-landing__purpose-card--plain) {
		aspect-ratio: auto;
		max-height: none;
		overflow: visible;
		background: none;
		color: var(--gtk-text);
	}

	/* Затемнювати більше нічого: текст пішов із кадру. */
	.gtk-landing__purpose-card:not(.gtk-landing__purpose-card--plain)::after {
		content: none;
	}

	.gtk-landing__purpose-card:not(.gtk-landing__purpose-card--plain) img {
		aspect-ratio: 4 / 3;
		height: auto;
		object-fit: cover;
		background: var(--gtk-paper);
	}

	/* Збільшення кадру під курсором на сенсорному екрані ні до чого. */
	.gtk-landing__purpose-card:hover img { transform: none; }

	.gtk-landing__purpose-card:not(.gtk-landing__purpose-card--plain) .gtk-landing__purpose-overlay {
		position: static;
		inset: auto;
		padding: 14px 0 0;
	}

	.gtk-landing__purpose-card:not(.gtk-landing__purpose-card--plain) .gtk-landing__purpose-overlay h3 {
		margin: 0;
		font-size: clamp(24px, 6.6vw, 30px);
		color: var(--gtk-ink);
	}

	.gtk-landing__purpose-card:not(.gtk-landing__purpose-card--plain) .gtk-landing__purpose-overlay > p {
		max-width: none;
		margin-top: 8px;
		font-size: 15px;
		line-height: 1.6;
		color: var(--gtk-text);
	}

	.gtk-landing__purpose-card:not(.gtk-landing__purpose-card--plain) .gtk-landing__purpose-more {
		margin-top: 14px;
		color: var(--gtk-bronze-text);
	}

	.gtk-landing__purpose-card--link:hover .gtk-landing__purpose-more,
	.gtk-landing__purpose-card--link:focus-visible .gtk-landing__purpose-more {
		color: var(--gtk-ink);
	}
}