/* Уточнення поверх components.css: читабельність, щільність сіток,
   смуга цифр, липкий мобільний CTA. Значення — тільки з tokens.css. */

/* -------------------------------------------------------------------------
 * 1. Типографіка: капс лишається на H1/H2, службових label-ах, кнопках
 *    і навігації. Заголовки третього рівня та довгі рядки — звичайним
 *    регістром: суцільний капс кирилиці різко гальмує читання.
 * ---------------------------------------------------------------------- */

.card__title,
.entry-card__title,
.faq-item__trigger,
.section-subtitle,
.item-list__item strong,
.entry__content h2,
.entry__content h3,
.entry__content h4 {
	letter-spacing: -0.01em;
	text-transform: none;
}

.faq-item__trigger {
	font-size: 1.05rem;
}

.item-list__item strong {
	font-size: var(--text-card-title);
}

/* Довгі H2 не мають ламатись на 16 символах. */
.section-title {
	max-width: 22ch;
}

.hero__title {
	max-width: 20ch;
}

/* -------------------------------------------------------------------------
 * 2. Сітки: auto-fit замість фіксованих 2/3 колонок — 4 або 5 карток
 *    більше не лишають діру в останньому ряду.
 * ---------------------------------------------------------------------- */

@media (min-width: 48rem) {
	.item-list,
	.cards-grid,
	.posts-grid,
	.cases-grid {
		grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
	}
}

@media (min-width: 64rem) {
	.cards-grid {
		grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr));
	}

	/* Кількість колонок гріда кейсів задають шаблони — щоб один-два
	   кейси не розтягувались на всю ширину екрана. */
	.cases-grid {
		grid-template-columns: repeat(var(--cases-columns, 3), minmax(0, 1fr));
	}

	/* Кількість колонок списку задає шаблон під кількість пунктів
	   (template-parts/blocks/list-section.php) — щоб останній ряд не
	   лишався напівпорожнім. */
	.item-list {
		grid-template-columns: repeat(var(--list-columns, 3), minmax(0, 1fr));
	}

	/* Схожі кейси — рівно дві широкі картки. */
	.cases-grid--pair {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/* -------------------------------------------------------------------------
 * 3. Текстові секції без зображення: двоколонковий редакторський розклад
 *    (заголовок ліворуч, текст праворуч) замість порожньої правої половини.
 * ---------------------------------------------------------------------- */

@media (min-width: 64rem) {
	.section--text__inner:not(:has(.section--text__media)) .section--text__body {
		display: grid;
		grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.35fr);
		gap: var(--space-12);
		align-items: start;
	}

	.section--text__inner:not(:has(.section--text__media)) .section--text__body > .section-title {
		grid-row: span 3;
	}

	.section--text__inner:not(:has(.section--text__media)) .section-title + * {
		margin-top: 0;
	}

	.section--text__body .section-text {
		max-width: none;
	}
}

/* -------------------------------------------------------------------------
 * 4. Смуга цифр під hero.
 * ---------------------------------------------------------------------- */

.stats-bar {
	border-block: 1px solid var(--color-line);
	background: var(--color-surface);
}

.stats-bar__list {
	display: grid;
	gap: var(--space-6);
	padding-block: var(--space-8);
}

.stats-bar__item {
	display: grid;
	gap: var(--space-2);
}

.stats-bar__value {
	color: var(--color-white);
	font-family: var(--font-headline);
	font-size: clamp(2rem, 5vw, 2.75rem);
	font-weight: 700;
	line-height: 1;
	letter-spacing: var(--tracking-heading);
}

.stats-bar__label {
	color: var(--color-text-muted);
	font-size: var(--text-small);
	letter-spacing: 0.06em;
	line-height: 1.5;
}

@media (min-width: 48rem) {
	.stats-bar__list {
		grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
		gap: var(--space-8);
	}
}

/* -------------------------------------------------------------------------
 * 5. Hero: трохи повітря замість повного 100svh порожнечі на десктопі,
 *    і повноширинні кнопки тільки на вузьких екранах.
 * ---------------------------------------------------------------------- */

.hero {
	padding-block: var(--space-16);
	min-height: auto;
}

@media (min-width: 64rem) {
	.hero {
		min-height: calc(100svh - var(--header-height));
		padding-block: var(--space-20);
	}
}

/* -------------------------------------------------------------------------
 * 6. Липкий CTA на мобільних: зʼявляється після прокрутки першого екрана.
 *    Десктоп має CTA у шапці, тому там смуга не потрібна.
 * ---------------------------------------------------------------------- */

.sticky-cta {
	position: fixed;
	right: var(--container-padding);
	bottom: calc(var(--space-3) + env(safe-area-inset-bottom));
	left: auto;
	z-index: 110;
	width: min(18rem, calc(100% - (var(--container-padding) * 2)));
	padding: 0;
	border: 0;
	background: transparent;
	opacity: 0;
	pointer-events: none;
	transform: translateY(calc(100% + var(--space-5)));
	transition: opacity var(--transition-base), transform var(--transition-base);
}

.sticky-cta.is-visible {
	opacity: 1;
	pointer-events: auto;
	transform: translateY(0);
}

.sticky-cta .button {
	width: 100%;
	min-height: 3rem;
	padding-block: 0.65rem;
	box-shadow: 0 0.75rem 2rem rgba(0, 0, 0, 0.42);
}

body.nav-open .sticky-cta {
	transform: translateY(110%);
}

@media (min-width: 64rem) {
	.sticky-cta {
		display: none;
	}
}

/* Кнопка «вгору»: кругла іконка-кнопка в куті. На мобільному піднята над
   липким CTA, щоб вони не накладались. */
.back-to-top {
	position: fixed;
	right: var(--container-padding);
	bottom: calc(var(--button-height) + var(--space-6) + env(safe-area-inset-bottom));
	z-index: 115;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.75rem;
	height: 2.75rem;
	padding: 0;
	border: 1px solid var(--color-line-strong);
	border-radius: var(--radius-round);
	background: var(--color-panel-glass);
	backdrop-filter: blur(var(--blur-glass));
	color: var(--color-text-muted);
	cursor: pointer;
	opacity: 0;
	visibility: hidden;
	transform: translateY(var(--space-3));
	transition: opacity var(--transition-base), transform var(--transition-base), visibility var(--transition-base), color var(--transition-fast), border-color var(--transition-fast), background-color var(--transition-fast);
}

.back-to-top.is-visible {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

.back-to-top:hover,
.back-to-top:focus-visible {
	border-color: var(--color-primary-line);
	background: var(--color-primary-faint);
	color: var(--color-white);
}

body.nav-open .back-to-top {
	opacity: 0;
	visibility: hidden;
}

@media (min-width: 64rem) {
	.back-to-top {
		bottom: var(--space-8);
	}
}

/* -------------------------------------------------------------------------
 * 7. Дрібне: сітка карток кейсів вирівнюється по висоті, мета-лінійка
 *    не злипається із заголовком.
 * ---------------------------------------------------------------------- */

.entry-card--case .entry-card__body {
	align-content: start;
	gap: var(--space-3);
}

.entry-card--case .entry-card__more {
	margin-top: var(--space-2);
}

/* -------------------------------------------------------------------------
 * 8. Hero під висоту екрана. Фото 3:4 масштабувалося лише за шириною
 *    контейнера, тож на короткому екрані ноутбука воно розпирало секцію
 *    і перший екран переставав вміщатися. Тепер висота кадру задається
 *    у svh, а ширина випливає з неї — на низькому вікні портрет сам
 *    звужується, а текстова колонка забирає звільнене місце.
 * ---------------------------------------------------------------------- */

@media (min-width: 64rem) {
	.hero {
		padding-block: clamp(var(--space-10), 7svh, var(--space-20));
	}

	/* auto замість частки fr: трек колонки дорівнює ширині самого кадру. */
	.hero__inner:has(.hero__media) {
		grid-template-columns: minmax(0, 1fr) auto;
	}

	.hero__media {
		height: clamp(20rem, 62svh, 44rem);
		max-width: 34rem;
		aspect-ratio: 3 / 4;
	}

	.hero__media img {
		height: 100%;
		/* Кадр обрізається знизу, а не по центру: обличчя лишається
		   на місці й не зʼїжджає при зміні пропорції. */
		object-position: 50% 18%;
	}
}

/* Короткий екран (типовий ноутбук 1366×768 і подібні): щільніший кадр —
   портрет по груди замість по пояс, щоб при меншій висоті обличчя
   лишалося великим, а не зменшувалося разом із рамкою. */
@media (min-width: 64rem) and (max-height: 48rem) {
	.hero__media {
		aspect-ratio: 4 / 5;
	}
}

/* -------------------------------------------------------------------------
 * 9. Головний hero: editorial depth.
 *    Атмосфера — окремий масштабований SVG; контент, портрет і технічні
 *    підписи лишаються незалежними адаптивними шарами.
 * ---------------------------------------------------------------------- */

.hero--home {
	--hero-bg-x: 0px;
	--hero-bg-y: 0px;
	isolation: isolate;
	overflow: hidden;
	min-height: max(44rem, calc(100svh - var(--header-height)));
	padding-block: 0;
	background-color: var(--color-background);
	background-image: none;
}

.hero--home::before {
	content: "";
	position: absolute;
	inset: -1.5rem;
	z-index: -2;
	background-image: url("../img/hero-depth-bg-vector.svg");
	background-position: 66% center;
	background-size: cover;
	opacity: 0.94;
	transform: translate3d(var(--hero-bg-x), var(--hero-bg-y), 0) scale(1.035);
	transition: transform 500ms ease-out;
	pointer-events: none;
}

.hero--home .hero__inner {
	position: relative;
	z-index: auto;
	min-height: inherit;
	padding-block: clamp(2.5rem, 8vw, 4rem) 9rem;
}

.hero--home .hero__copy {
	position: relative;
	z-index: 3;
	max-width: 42rem;
}

.hero--home .hero__kicker {
	max-width: 37rem;
	margin-bottom: var(--space-5);
	font-size: 0.6rem;
	line-height: 1.7;
}

.hero--home .hero__title {
	max-width: 15.5ch;
	font-size: clamp(2.55rem, 11.5vw, 3.75rem);
	line-height: 0.94;
	letter-spacing: -0.045em;
	text-wrap: balance;
}

.hero--home .hero__subtitle {
	max-width: 37rem;
	margin-top: var(--space-5);
	color: rgba(245, 245, 245, 0.78);
	font-size: 0.94rem;
	line-height: 1.7;
}

.hero--home .hero__actions {
	align-items: center;
	gap: var(--space-5);
	margin-top: var(--space-5);
}

.hero--home .hero__actions .button {
	flex: 0 0 auto;
	width: auto;
	min-width: 0;
}

.hero--home .hero__actions .button--primary {
	min-width: 15.5rem;
}

.hero__secondary-link {
	min-width: 11.5rem;
	border-color: rgba(255, 255, 255, 0.38);
	background: transparent;
	color: var(--color-white);
}

.hero__secondary-link:hover,
.hero__secondary-link:focus-visible {
	border-color: var(--color-white);
	background: var(--color-white);
	color: var(--color-black);
}

.hero__secondary-link:hover .icon,
.hero__secondary-link:focus-visible .icon {
	transform: translateY(0.18rem);
}

.hero--home .hero__microcopy {
	max-width: 48ch;
	margin-top: var(--space-4);
	color: rgba(163, 163, 163, 0.72);
	font-size: 0.7rem;
	line-height: 1.7;
}

.hero--home .hero__visual {
	position: absolute;
	right: -4rem;
	bottom: -6.5rem;
	z-index: auto;
	width: min(18rem, 76vw);
	height: min(27rem, 64svh);
	pointer-events: none;
}

.hero--home .hero__media {
	width: 100%;
	height: 100%;
	max-width: none;
	padding: 0;
	border: 0;
	background: transparent;
	box-shadow: none;
	opacity: 1;
}

.hero--home .hero__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 50% 12%;
	mix-blend-mode: normal;
	opacity: 1;
	filter: drop-shadow(0 1.5rem 2.5rem rgba(0, 0, 0, 0.22));
}

.hero__rail {
	position: absolute;
	top: var(--space-5);
	right: 0;
	z-index: 4;
	display: flex;
	align-items: center;
	gap: var(--space-2);
	padding-left: var(--space-3);
	border-left: 1px solid var(--color-line-strong);
	color: var(--color-text-soft);
	font-family: var(--font-headline);
	font-size: 0.56rem;
	letter-spacing: var(--tracking-caps-sm);
}

.hero__rail-location {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
	white-space: nowrap;
	text-transform: uppercase;
}

.hero__rail-location .icon {
	color: var(--color-primary);
}

.hero__rail-label,
.hero__rail-note {
	display: none;
}

.hero__signals {
	position: absolute;
	inset: 0;
	z-index: 2;
	pointer-events: none;
}

.hero__signal {
	--signal-x: 0px;
	--signal-y: 0px;
	--signal-offset-x: 0px;
	--signal-duration: 420ms;
	position: absolute;
	display: none;
	min-width: 6.5rem;
	padding-top: var(--space-2);
	border-top: 1px solid rgba(163, 163, 163, 0.28);
	color: rgba(163, 163, 163, 0.8);
	font-family: var(--font-headline);
	font-size: 0.5rem;
	font-weight: 500;
	letter-spacing: 0.14em;
	line-height: 1.45;
	text-transform: uppercase;
	transform: translate3d(calc(var(--signal-x) + var(--signal-offset-x)), var(--signal-y), 0);
	transition: transform var(--signal-duration) ease-out;
}

.hero__signal::after {
	content: "";
	position: absolute;
	top: -1px;
	display: none;
	width: var(--signal-line-length, 5rem);
	height: 1px;
	border-top: 1px solid rgba(163, 163, 163, 0.24);
	pointer-events: none;
}

.hero__signal--wordpress,
.hero__signal--seo,
.hero__signal--languages {
	display: block;
}

.hero__signal--wordpress {
	--signal-duration: 620ms;
	top: 48%;
	left: -18%;
}

.hero__signal--seo {
	--signal-duration: 760ms;
	top: 65%;
	left: -9%;
}

.hero__signal--languages {
	--signal-duration: 890ms;
	top: 53%;
	right: 18%;
}

.hero__signal--location {
	--signal-duration: 680ms;
}

.hero__signal--process {
	--signal-duration: 940ms;
}

@media (max-width: 29.99rem) {
	.hero--home .hero__microcopy {
		display: none;
	}
}

@media (max-width: 47.99rem) {
	.hero--home .hero__inner,
	.hero--home .hero__inner:has(.hero__media) {
		display: flex;
		align-items: center;
		padding-block: clamp(3rem, 8svh, 4rem);
	}

	.hero--home .hero__copy {
		width: 100%;
		margin-inline: auto;
		text-align: left;
	}

	.hero--home .hero__kicker,
	.hero--home .hero__title,
	.hero--home .hero__subtitle {
		margin-inline: 0 auto;
		text-shadow: 0 1px 0.9rem rgba(0, 0, 0, 0.78);
	}

	.hero--home .hero__title {
		text-shadow: 0 1px 0.42em rgba(0, 0, 0, 0.72), 0 1px 2px rgba(0, 0, 0, 0.92);
	}

	.hero--home .hero__actions {
		justify-content: flex-start;
	}

	.hero--home .hero__visual {
		top: 8rem;
		right: clamp(-11.5rem, calc(-1.5rem - 32vw), -9rem);
		bottom: auto;
		z-index: 1;
		width: min(28rem, 118vw);
		height: calc(100% - 8rem);
	}

	.hero--home .hero__media img {
		object-fit: contain;
		object-position: 50% 100%;
		opacity: 1;
	}

	.hero--home .hero__signals {
		display: none;
	}
}

@media (min-width: 48rem) {
	.hero--home {
		min-height: max(48rem, calc(100svh - var(--header-height)));
	}

	.hero--home::before {
		background-position: center;
		opacity: 0.82;
	}

	.hero--home .hero__inner {
		padding-block: clamp(3.5rem, 8vw, 5rem) 11rem;
	}

	.hero--home .hero__title {
		font-size: clamp(3.6rem, 7.6vw, 4.25rem);
	}

	.hero--home .hero__subtitle {
		font-size: 1rem;
	}

	.hero--home .hero__visual {
		right: -1rem;
		bottom: -7rem;
		width: 24rem;
		height: 36rem;
	}

	.hero--home .hero__media img {
		opacity: 1;
	}

	.hero__signal {
		font-size: 0.54rem;
	}
}

@media (min-width: 64rem) {
	.hero--home {
		min-height: calc(100svh - var(--header-height));
		padding-block: 0;
	}

	.hero--home::before {
		background-position: center;
		opacity: 0.94;
	}

	.hero--home .hero__inner,
	.hero--home .hero__inner:has(.hero__media) {
		width: min(100% - (var(--container-padding) * 2), var(--container-wide));
		grid-template-columns: minmax(0, 1fr) minmax(23rem, 0.76fr);
		align-items: center;
		gap: clamp(4rem, 7vw, 8rem);
		min-height: inherit;
		padding-block: clamp(3rem, 6svh, 5rem);
	}

	.hero--home .hero__copy {
		max-width: 46rem;
		padding-left: clamp(3.5rem, 5vw, 5rem);
	}

	.hero--home .hero__kicker {
		margin-bottom: var(--space-6);
		font-size: 0.64rem;
	}

	.hero--home .hero__title {
		max-width: 15ch;
		font-size: clamp(3.35rem, min(4.25vw, 8svh), 4.4rem);
	}

	.hero--home .hero__subtitle {
		max-width: 35rem;
		margin-top: var(--space-6);
		font-size: clamp(0.94rem, 1.1vw, 1.05rem);
	}

	.hero--home .hero__actions {
		margin-top: var(--space-6);
	}

	.hero--home .hero__visual {
		position: relative;
		right: auto;
		bottom: auto;
		z-index: auto;
		grid-column: 2;
		grid-row: 1;
		align-self: end;
		justify-self: start;
		width: clamp(23rem, 28vw, 31rem);
		height: clamp(36rem, 82svh, 49rem);
		margin-left: clamp(-6rem, -5vw, -3rem);
		margin-bottom: calc(-1 * clamp(3rem, 6svh, 5rem));
	}

	.hero--home .hero__media {
		opacity: 1;
		aspect-ratio: auto;
	}

	.hero--home .hero__media img {
		object-position: 50% 15%;
		opacity: 1;
	}

	.hero__rail {
		top: 5%;
		right: auto;
		bottom: 8%;
		left: 0;
		width: 1px;
		padding-left: 0;
		border-left: 1px solid var(--color-line-strong);
	}

	.hero__rail-location {
		position: absolute;
		top: 0;
		left: var(--space-8);
		transform: translateY(-50%);
	}

	.hero__rail-label {
		position: absolute;
		top: 28%;
		left: -0.9rem;
		display: block;
		width: 1rem;
		writing-mode: vertical-rl;
		transform: rotate(180deg);
		white-space: nowrap;
		text-transform: uppercase;
	}

	.hero__rail-note {
		position: absolute;
		bottom: 0;
		left: var(--space-8);
		display: block;
		width: max-content;
		max-width: none;
		transform: translateY(50%);
		white-space: nowrap;
		color: rgba(163, 163, 163, 0.78);
		font-family: var(--font-body);
		font-size: 0.7rem;
		letter-spacing: 0;
		line-height: 1.5;
		text-transform: none;
	}

	.hero--home .hero__microcopy {
		display: none;
	}

	.hero__signal {
		min-width: 8.25rem;
		font-size: 0.56rem;
	}

	.hero__signal::after {
		display: block;
	}

	.hero__signal--wordpress {
		--signal-line-length: 1.5rem;
		--signal-offset-x: 50%;
		top: 2%;
		left: -22%;
	}

	.hero__signal--wordpress::after,
	.hero__signal--seo::after,
	.hero__signal--process::after {
		left: 100%;
		transform-origin: left center;
	}

	.hero__signal--wordpress::after {
		transform: rotate(58deg);
	}

	.hero__signal--seo {
		--signal-line-length: 1.25rem;
		top: 31%;
		left: -23%;
	}

	.hero__signal--seo::after {
		transform: rotate(35deg);
	}

	.hero__signal--languages {
		--signal-line-length: 1.75rem;
		top: 18%;
		right: -22%;
	}

	.hero__signal--languages::after,
	.hero__signal--location::after {
		right: 100%;
		transform-origin: right center;
	}

	.hero__signal--languages::after {
		transform: rotate(-35deg);
	}
}

@media (min-width: 80rem) {
	.hero__signal--location,
	.hero__signal--process {
		display: block;
	}

	.hero__signal--location {
		--signal-line-length: 1.5rem;
		top: 39%;
		right: -27%;
	}

	.hero__signal--location::after {
		transform: rotate(-18deg);
	}

	.hero__signal--process {
		--signal-line-length: 1.375rem;
		bottom: 11%;
		left: -18%;
		max-width: 9rem;
	}

	.hero__signal--process::after {
		transform: rotate(-42deg);
	}
}

@media (min-width: 64rem) and (max-height: 48rem) {
	.hero--home .hero__inner,
	.hero--home .hero__inner:has(.hero__media) {
		padding-block: var(--space-8);
	}

	.hero--home .hero__visual {
		height: min(80svh, 36rem);
		width: min(25rem, 28vw);
		margin-bottom: calc(-1 * var(--space-8));
	}

	.hero--home .hero__title {
		font-size: clamp(3rem, min(4vw, 7.4svh), 3.65rem);
	}

	.hero--home .hero__subtitle {
		max-width: 33rem;
		margin-top: var(--space-5);
		font-size: 0.92rem;
	}

	.hero--home .hero__actions {
		margin-top: var(--space-5);
	}

	.hero--home .hero__microcopy {
		margin-top: var(--space-3);
	}
}

@media (min-width: 112rem) and (min-height: 60rem) {
	.hero--home .hero__visual {
		width: clamp(31rem, 46svh, 46rem);
		height: clamp(49rem, 72svh, 72rem);
	}

	.hero__signal--wordpress {
		--signal-line-length: 2rem;
	}

	.hero__signal--seo {
		--signal-line-length: 1.75rem;
	}

	.hero__signal--languages {
		--signal-line-length: 2.5rem;
	}

	.hero__signal--location,
	.hero__signal--process {
		--signal-line-length: 2rem;
	}
}

/* Вертикальний планшет повторює мобільну композицію: локація зверху,
   блок по вертикальному центру, текст ліворуч, портрет — фоновим шаром. */
@media (min-width: 48rem) and (max-width: 79.99rem) and (orientation: portrait) {
	.hero--home .hero__inner,
	.hero--home .hero__inner:has(.hero__media) {
		display: flex;
		align-items: center;
		gap: 0;
		min-height: inherit;
		padding-block: clamp(4rem, 8svh, 6rem);
	}

	.hero--home .hero__copy {
		z-index: 3;
		width: 100%;
		max-width: 42rem;
		margin-inline: auto;
		padding-left: 0;
		text-align: left;
	}

	.hero--home .hero__kicker,
	.hero--home .hero__title,
	.hero--home .hero__subtitle {
		margin-inline: 0 auto;
		text-shadow: 0 1px 0.9rem rgba(0, 0, 0, 0.78);
	}

	.hero--home .hero__title {
		font-size: clamp(3.6rem, 7.6vw, 4.25rem);
		text-shadow: 0 1px 0.42em rgba(0, 0, 0, 0.72), 0 1px 2px rgba(0, 0, 0, 0.92);
	}

	.hero--home .hero__subtitle {
		max-width: 35rem;
	}

	.hero--home .hero__actions {
		justify-content: flex-start;
	}

	.hero--home .hero__microcopy {
		display: none;
	}

	.hero--home .hero__visual {
		position: absolute;
		top: 7rem;
		right: clamp(-10rem, -10vw, -5rem);
		bottom: auto;
		z-index: 1;
		grid-column: auto;
		grid-row: auto;
		width: min(54rem, 92vw);
		height: calc(100% - 7rem);
		margin: 0;
	}

	.hero--home .hero__media img {
		object-fit: contain;
		object-position: 50% 100%;
	}

	.hero--home .hero__signals {
		display: none;
	}

	.hero__rail {
		top: var(--space-5);
		right: 0;
		bottom: auto;
		left: auto;
		width: auto;
		padding-left: var(--space-3);
		border-left: 1px solid var(--color-line-strong);
	}

	.hero__rail-location {
		position: static;
		transform: none;
	}

	.hero__rail-label,
	.hero__rail-note {
		display: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	.hero--home::before,
	.hero--home .hero__signal {
		transition: none;
	}
}

/* -------------------------------------------------------------------------
 * 10. Головна після кейсів: візуальні паузи замість суцільних грідів.
 *     Усі тексти й підписи лишаються code-native та редагованими в ACF.
 * ---------------------------------------------------------------------- */

/* Проблеми й аудиторії: іконка швидко створює точку входу в кожен пункт. */
#problem .item-list__item,
#audience .item-list__item {
	align-content: start;
	min-height: 10rem;
	padding: clamp(var(--space-5), 4vw, var(--space-7));
}

#problem .item-list__icon,
#audience .item-list__icon {
	display: inline-grid;
	place-items: center;
	width: 2.75rem;
	height: 2.75rem;
	margin-top: 0;
	border: 1px solid var(--color-primary-line);
	background: var(--color-primary-faint);
}

#problem .item-list__text,
#audience .item-list__text {
	line-height: 1.72;
}

/* Сайт як центр системи: відкритий diagram-layout замість чергової картки. */
.section--system {
	overflow: hidden;
}

.system-map {
	display: grid;
	gap: var(--space-10);
	align-items: center;
}

.system-map__copy .section-text {
	max-width: 36rem;
}

.system-map__copy .section-accent {
	max-width: 18ch;
	padding-left: var(--space-4);
	border-left: 1px solid var(--color-primary);
}

.system-map__visual {
	position: relative;
	width: min(100%, 34rem);
	aspect-ratio: 1;
	margin-inline: auto;
}

.system-map__connections {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	fill: none;
	stroke: var(--color-line-strong);
	stroke-width: 0.35;
	vector-effect: non-scaling-stroke;
}

.system-map__connections path {
	stroke: color-mix(in srgb, var(--color-primary) 42%, var(--color-line-strong));
}

.system-map__connections .system-map__orbit {
	stroke: color-mix(in srgb, var(--color-primary) 44%, transparent);
	stroke-dasharray: 2 2;
}

.system-map__core,
.system-map__node {
	position: absolute;
	display: grid;
	place-items: center;
	min-height: 3.25rem;
	border: 1px solid var(--color-line-strong);
	background: color-mix(in srgb, var(--color-background) 94%, var(--color-primary));
	color: var(--color-white);
	font-family: var(--font-headline);
	font-size: clamp(0.58rem, 2.2vw, 0.75rem);
	font-weight: 700;
	letter-spacing: var(--tracking-caps-sm);
	line-height: 1.2;
	text-align: center;
	text-transform: uppercase;
}

.system-map__core {
	top: 50%;
	left: 50%;
	z-index: 2;
	width: clamp(5.75rem, 24vw, 8rem);
	aspect-ratio: 1.45;
	border-color: var(--color-primary-line);
	box-shadow: inset 0 0 0 1px var(--color-primary-faint);
	transform: translate(-50%, -50%);
	font-size: clamp(1rem, 5vw, 1.75rem);
}

.system-map__core::before,
.system-map__core::after {
	content: "";
	position: absolute;
	width: 0.65rem;
	height: 0.65rem;
	border-color: var(--color-primary);
	pointer-events: none;
}

.system-map__core::before {
	top: var(--space-2);
	left: var(--space-2);
	border-top: 1px solid;
	border-left: 1px solid;
}

.system-map__core::after {
	right: var(--space-2);
	bottom: var(--space-2);
	border-right: 1px solid;
	border-bottom: 1px solid;
}

.system-map__nodes {
	list-style: none;
	margin: 0;
	padding: 0;
}

.system-map__node {
	z-index: 1;
	width: clamp(6.35rem, 29vw, 8.5rem);
	padding: var(--space-2) var(--space-3);
}

.system-map__node::before {
	content: "";
	position: absolute;
	top: -2px;
	left: -2px;
	width: 4px;
	height: 4px;
	background: var(--color-primary);
}

.system-map__node--1 {
	top: 0;
	left: 50%;
	transform: translateX(-50%);
}

.system-map__node--2 {
	top: 30%;
	left: 0;
}

.system-map__node--3 {
	top: 30%;
	right: 0;
}

.system-map__node--4 {
	bottom: 0;
	left: 5%;
}

.system-map__node--5 {
	right: 5%;
	bottom: 0;
}

/* У картках проблема/аудиторія іконка має власну захищену зону, а
   коротка фраза й пояснення утворюють чітку вертикаль праворуч. */
#problem .item-list__item,
#audience .item-list__item {
	grid-template-columns: 3rem minmax(0, 1fr);
	gap: var(--space-5);
	min-height: 11.5rem;
	padding: clamp(var(--space-6), 3vw, var(--space-8));
}

#problem .item-list__item {
	align-content: center;
	align-items: center;
	min-height: 9.25rem;
	padding-block: clamp(var(--space-5), 2vw, var(--space-6));
}

#problem .item-list__icon,
#audience .item-list__icon {
	width: 3rem;
	height: 3rem;
}

#problem .item-list__copy,
#audience .item-list__copy {
	display: grid;
	gap: var(--space-2);
	align-content: start;
}

#problem .item-list__copy {
	align-content: center;
}

#problem .item-list__title,
#audience .item-list__title {
	margin: 0;
	font-size: clamp(1rem, 1.4vw, 1.18rem);
	line-height: 1.18;
}

#problem .item-list__text,
#audience .item-list__text {
	display: block;
	color: var(--color-text-muted);
	line-height: 1.62;
}

#problem .section-outro-group {
	display: grid;
	gap: 0;
	margin-top: var(--space-8);
}

#problem .section-outro {
	max-width: none;
	margin-top: 0;
}

/* Великі піктограми дають кожній послузі власний візуальний вхід. */
#services .card {
	gap: var(--space-4);
	padding: clamp(var(--space-6), 3vw, var(--space-8));
}

#services .card__icon {
	display: grid;
	place-items: center;
	width: 4.5rem;
	height: 4.5rem;
	margin-bottom: var(--space-3);
	border: 1px solid var(--color-primary-line);
	background: linear-gradient(135deg, var(--color-primary-faint), transparent 72%);
	color: var(--color-primary);
	transition: border-color var(--transition-fast), color var(--transition-fast), transform var(--transition-fast);
}

#services .card:hover .card__icon {
	border-color: var(--color-primary);
	color: var(--color-white);
	transform: translateY(-0.18rem);
}

/* Нова схема: послідовний шлях замість радіального переліку понять. */
.system-flow {
	position: relative;
	min-width: 0;
}

.system-flow__route {
	display: grid;
	gap: var(--space-5);
}

.system-flow__sources,
.system-flow__site,
.system-flow__feedback,
.system-flow__conversion {
	position: relative;
	z-index: 1;
	border: 1px solid var(--color-line-strong);
	background: color-mix(in srgb, var(--color-background) 96%, var(--color-primary));
}

.system-flow__sources,
.system-flow__site {
	padding: var(--space-4);
}

.system-flow__eyebrow {
	margin-bottom: var(--space-3);
	color: var(--color-text-muted);
	font-family: var(--font-headline);
	font-size: 0.62rem;
	font-weight: 700;
	letter-spacing: var(--tracking-caps-sm);
	text-transform: uppercase;
}

.system-flow__source-list,
.system-flow__layers {
	list-style: none;
	margin: 0;
	padding: 0;
}

.system-flow__source-list {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 1px;
	background: var(--color-line);
}

.system-flow__source-list li,
.system-flow__layers li {
	display: grid;
	gap: var(--space-2);
	align-items: center;
	background: var(--color-surface);
	color: var(--color-white);
	font-family: var(--font-headline);
	font-size: clamp(0.58rem, 2.4vw, 0.72rem);
	font-weight: 700;
	letter-spacing: var(--tracking-caps-sm);
	line-height: 1.35;
	text-transform: uppercase;
}

.system-flow__source-list li {
	justify-items: center;
	min-width: 0;
	padding: var(--space-3) var(--space-2);
	text-align: center;
}

.system-flow__icon {
	display: inline-grid;
	place-items: center;
	color: var(--color-primary);
}

.system-flow__arrow {
	position: relative;
	display: block;
	width: 1px;
	height: 2rem;
	margin-inline: auto;
	background: var(--color-primary-line);
}

.system-flow__arrow::after {
	content: "";
	position: absolute;
	right: -0.25rem;
	bottom: 0;
	width: 0.5rem;
	height: 0.5rem;
	border-right: 1px solid var(--color-primary);
	border-bottom: 1px solid var(--color-primary);
	transform: rotate(45deg);
}

.system-flow__site {
	border-color: var(--color-primary-line);
	box-shadow: inset 0 0 0 1px var(--color-primary-faint);
}

.system-flow__site::before,
.system-flow__site::after {
	content: "";
	position: absolute;
	width: 0.7rem;
	height: 0.7rem;
	border-color: var(--color-primary);
	pointer-events: none;
}

.system-flow__site::before {
	top: var(--space-2);
	left: var(--space-2);
	border-top: 1px solid;
	border-left: 1px solid;
}

.system-flow__site::after {
	right: var(--space-2);
	bottom: var(--space-2);
	border-right: 1px solid;
	border-bottom: 1px solid;
}

.system-flow__site-title {
	display: flex;
	align-items: center;
	gap: var(--space-3);
	padding: var(--space-2) var(--space-2) var(--space-4);
	color: var(--color-primary);
}

.system-flow__site-title strong {
	color: var(--color-white);
	font-family: var(--font-headline);
	font-size: clamp(1.35rem, 5vw, 2rem);
	letter-spacing: var(--tracking-heading);
	text-transform: uppercase;
}

.system-flow__layers {
	display: grid;
	gap: 1px;
	background: var(--color-line);
}

.system-flow__layers li {
	grid-template-columns: 2.5rem minmax(0, 1fr);
	gap: var(--space-3);
	padding: var(--space-4);
	font-size: 0.72rem;
}

.system-flow__conversion {
	display: grid;
	gap: 1.1rem;
	align-content: center;
	place-items: center;
	min-height: 7.5rem;
	padding: var(--space-4);
	color: var(--color-white);
	text-align: center;
}

.system-flow__conversion.is-primary {
	border-color: var(--color-primary);
	background: linear-gradient(145deg, var(--color-primary-deep), var(--color-primary));
}

.system-flow__conversion.is-primary .system-flow__icon {
	color: var(--color-white);
}

.system-flow__conversion strong,
.system-flow__feedback-copy strong {
	font-family: var(--font-headline);
	font-size: 0.78rem;
	letter-spacing: var(--tracking-caps-sm);
	text-transform: uppercase;
}

.system-flow__conversion-label {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.35em;
}

.system-flow__conversion-label-secondary::before {
	content: "/";
	margin-right: 0.35em;
}

.system-flow__feedback-stage {
	position: relative;
	min-width: 0;
}

.system-flow__feedback-stage.has-loop {
	padding-top: 3.75rem;
}

.system-flow__feedback-arrow {
	position: absolute;
	top: 0;
	left: 0;
	display: block;
	width: 100%;
	height: 3.75rem;
	color: var(--color-primary-line);
	pointer-events: none;
}

.system-flow__feedback-arrow::before,
.system-flow__feedback-arrow::after {
	content: "";
	position: absolute;
	z-index: 1;
	width: 0.5rem;
	height: 0.5rem;
	margin: -0.25rem 0 0 -0.25rem;
	border-right: 1px solid var(--color-primary);
	border-bottom: 1px solid var(--color-primary);
}

.system-flow__feedback-arrow::before {
	display: none;
}

.system-flow__feedback-arrow::after {
	top: 75%;
	left: 50%;
	transform: rotate(45deg);
}

.system-flow__feedback-arrow svg {
	width: 100%;
	height: 100%;
	overflow: visible;
}

.system-flow__feedback-path {
	fill: none;
	stroke: currentColor;
	stroke-width: 1;
	stroke-linecap: square;
	stroke-linejoin: miter;
}

.system-flow__feedback-path--desktop {
	display: none;
}

.system-flow__feedback {
	display: grid;
	grid-template-columns: 2.75rem minmax(0, 1fr);
	gap: var(--space-4);
	align-items: center;
	margin-top: 0;
	padding: var(--space-4);
	border-color: var(--color-primary-line);
}

.system-flow__feedback-icon {
	display: grid;
	place-items: center;
	color: var(--color-primary);
}

.system-flow__feedback-copy {
	display: grid;
	gap: var(--space-1);
}

.system-flow__feedback-copy span {
	color: var(--color-text-muted);
	font-size: var(--text-small);
	line-height: 1.55;
}

.system-flow__return {
	display: none;
}

/* Переваги кастому: три самостійні аргументи без хибної покроковості. */
.reasons-rail {
	display: grid;
	gap: var(--space-10);
}

.reasons-rail__header .section-intro {
	max-width: 35rem;
	line-height: 1.75;
}

.reasons-rail__list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.reasons-rail__item {
	display: grid;
	grid-template-columns: 3rem minmax(0, 1fr);
	gap: var(--space-5);
	align-items: center;
	padding-block: var(--space-5);
	border: 0;
}

.reasons-rail__item + .reasons-rail__item {
	border-top: 1px solid var(--color-line);
}

.reasons-rail__icon {
	display: grid;
	place-items: center;
}

.reasons-rail__icon {
	width: 3rem;
	height: 3rem;
	border: 1px solid var(--color-primary-line);
	border-radius: var(--radius-round);
	background: var(--color-background);
	color: var(--color-white);
}

.reasons-rail__text {
	color: var(--color-text-muted);
	line-height: 1.68;
}

.reasons-rail__text strong {
	display: block;
	margin-bottom: var(--space-2);
	color: var(--color-white);
	font-family: var(--font-headline);
	font-size: clamp(1rem, 2vw, 1.2rem);
	line-height: 1.2;
	text-transform: uppercase;
}

/* Процес: вертикальний маршрут на вузьких екранах. */
.process-timeline__list {
	position: relative;
	display: grid;
	gap: var(--space-8);
	list-style: none;
	margin: var(--space-8) 0 0;
	padding: 0 0 0 3.25rem;
}

.process-timeline__list::before {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0.8rem;
	width: 1px;
	background: linear-gradient(var(--color-line-strong), var(--color-primary), var(--color-line-strong));
}

.process-timeline__item {
	position: relative;
	min-width: 0;
}

.process-timeline__item::before {
	content: "";
	position: absolute;
	top: 0.15rem;
	left: -3.05rem;
	z-index: 1;
	width: 1.6rem;
	height: 1.6rem;
	border: 1px solid var(--color-line-strong);
	border-radius: var(--radius-round);
	background: var(--color-background);
	box-shadow: inset 0 0 0 0.42rem var(--color-background);
}

.process-timeline__item::after {
	content: "";
	position: absolute;
	top: 0.65rem;
	left: -2.55rem;
	z-index: 2;
	width: 0.6rem;
	height: 0.6rem;
	background: var(--color-primary);
}

.process-timeline__number {
	display: block;
	margin-bottom: var(--space-3);
	color: var(--color-primary);
	font-family: var(--font-headline);
	font-size: var(--text-label);
	letter-spacing: var(--tracking-caps-sm);
}

.process-timeline__text {
	max-width: 30rem;
	color: var(--color-text-muted);
	line-height: 1.68;
}

.process-timeline__text strong {
	display: block;
	margin-bottom: var(--space-2);
	color: var(--color-white);
	font-family: var(--font-headline);
	font-size: 1.05rem;
	line-height: 1.2;
}

/* На мобільному лишаємо десктопну логіку таймлайна й даємо їй
   горизонтальний viewport. Нативну смугу прокрутки приховано. */
.process-timeline__scroll {
	position: relative;
	margin-top: var(--space-8);
}

.process-timeline__viewport {
	overflow-x: auto;
	overflow-y: hidden;
	overscroll-behavior-inline: contain;
	scroll-snap-type: x proximity;
	scrollbar-width: none;
}

.process-timeline__viewport::-webkit-scrollbar {
	display: none;
}

.process-timeline__viewport:focus-visible {
	outline: 1px solid var(--color-primary);
	outline-offset: var(--space-2);
}

.process-timeline__list {
	display: grid;
	grid-template-columns: repeat(var(--timeline-steps), min(72vw, 19rem));
	gap: 0;
	width: max-content;
	min-height: 25rem;
	margin: 0;
	padding: 0 4.5rem 0 0;
}

.process-timeline__list::before {
	top: 50%;
	right: 0;
	bottom: auto;
	left: 0;
	width: auto;
	height: 1px;
	background: linear-gradient(90deg, var(--color-line-strong), var(--color-primary), var(--color-line-strong));
}

.process-timeline__item {
	min-height: 25rem;
	scroll-snap-align: start;
}

.process-timeline__item::before {
	top: 50%;
	left: 50%;
	width: 1.8rem;
	height: 1.8rem;
	transform: translate(-50%, -50%);
}

.process-timeline__item::after {
	top: 50%;
	left: 50%;
	width: 0.65rem;
	height: 0.65rem;
	transform: translate(-50%, -50%);
}

.process-timeline__content {
	position: absolute;
	right: var(--space-4);
	left: var(--space-4);
}

.process-timeline__item:nth-child(odd) .process-timeline__content {
	top: 0;
}

.process-timeline__item:nth-child(even) .process-timeline__content {
	top: calc(50% + var(--space-8));
}

.process-timeline__text {
	max-width: 17rem;
}

.process-timeline__hint {
	position: absolute;
	top: 50%;
	right: 0.45rem;
	z-index: 4;
	display: none;
	place-items: center;
	width: 3.5rem;
	height: 3.5rem;
	border: 1px solid rgba(122, 171, 255, 0.34);
	border-radius: var(--radius-round);
	background: rgba(43, 105, 213, 0.16);
	box-shadow: inset 0 0 1.25rem rgba(255, 255, 255, 0.08), 0 0 0 0.55rem rgba(43, 105, 213, 0.05);
	backdrop-filter: blur(0.7rem);
	color: var(--color-primary);
	transform: translateY(-50%);
	transition: opacity var(--transition-fast), border-color var(--transition-fast), background-color var(--transition-fast);
}

.process-timeline__scroll.has-process-scroll .process-timeline__hint {
	display: grid;
}

.process-timeline__hint:hover,
.process-timeline__hint:focus-visible {
	border-color: var(--color-primary);
	background: rgba(43, 105, 213, 0.28);
}

.process-timeline__scroll.has-interacted .process-timeline__hint {
	opacity: 0.58;
}

.process-timeline__scroll.is-at-end .process-timeline__hint {
	opacity: 0;
	pointer-events: none;
}

@media (prefers-reduced-motion: no-preference) {
	.process-timeline__scroll.has-process-scroll:not(.has-interacted) .process-timeline__hint {
		animation: process-hint-pulse 2.2s ease-in-out infinite;
	}
}

@keyframes process-hint-pulse {
	0%, 100% {
		transform: translateY(-50%) translateX(0);
		box-shadow: inset 0 0 1.25rem rgba(255, 255, 255, 0.08), 0 0 0 0.45rem rgba(43, 105, 213, 0.04);
	}

	50% {
		transform: translateY(-50%) translateX(0.22rem);
		box-shadow: inset 0 0 1.5rem rgba(255, 255, 255, 0.12), 0 0 0 0.75rem rgba(43, 105, 213, 0.08);
	}
}

/* Фото в «Хто це все робить» — виразний editorial-кадр, не декоративний thumbnail. */
#about .section--text__media {
	position: relative;
	overflow: hidden;
	padding: var(--space-3);
	background: color-mix(in srgb, var(--color-surface) 88%, var(--color-primary));
}

#about .section--text__media::before,
#about .section--text__media::after {
	content: "";
	position: absolute;
	z-index: 1;
	width: 2rem;
	height: 2rem;
	border-color: var(--color-primary);
	pointer-events: none;
}

#about .section--text__media::before {
	top: var(--space-5);
	left: var(--space-5);
	border-top: 1px solid;
	border-left: 1px solid;
}

#about .section--text__media::after {
	right: var(--space-5);
	bottom: var(--space-5);
	border-right: 1px solid;
	border-bottom: 1px solid;
}

#about .section--text__media img {
	aspect-ratio: 3 / 4;
	height: auto;
	object-position: center;
}

/* Реальні таксономії кейса стають короткими сканованими маркерами. */
.entry-card__tags {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem;
	margin-bottom: var(--space-1);
}

.entry-card__tag {
	display: inline-flex;
	padding: 0.25rem 0.45rem;
	border: 1px solid var(--color-line);
	background: var(--color-chip-bg);
	color: var(--color-text-muted);
	font-size: 0.58rem;
	letter-spacing: var(--tracking-caps-sm);
	line-height: 1.35;
	text-transform: uppercase;
}

.entry-card--case .entry-card__media {
	position: relative;
}

.entry-card__facts {
	position: absolute;
	right: var(--space-3);
	bottom: var(--space-3);
	left: var(--space-3);
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem;
	list-style: none;
	margin: 0;
	padding: 0;
	pointer-events: none;
}

.entry-card__facts li {
	display: inline-flex;
	align-items: center;
	min-height: 1.8rem;
	padding: 0.32rem 0.55rem;
	border: 1px solid rgba(122, 171, 255, 0.42);
	background: rgba(4, 7, 13, 0.82);
	box-shadow: inset 0 0 0.8rem rgba(56, 126, 242, 0.08);
	backdrop-filter: blur(0.6rem);
	color: var(--color-white);
	font-family: var(--font-headline);
	font-size: 0.58rem;
	font-weight: 700;
	letter-spacing: var(--tracking-caps-sm);
	line-height: 1.2;
	text-transform: uppercase;
}

/* Фінальна форма головної: коротше поле запиту на всіх екранах.
   Явна висота перемагає rows від CF7, але resize лишає користувачеві
   можливість розтягнути поле за потреби. */
.home #contact .wpcf7 textarea {
	height: 10rem;
	min-height: 7rem;
}

@media (max-width: 29.99rem) {
	.reasons-rail__item {
		grid-template-columns: 2.75rem minmax(0, 1fr);
		gap: var(--space-3);
	}

	.reasons-rail__icon {
		width: 2.75rem;
		height: 2.75rem;
	}
}

@media (min-width: 80rem), (min-width: 64rem) and (orientation: landscape) {
	/* На десктопі ім'я та email ділять перший ряд; інші поля й системні
	   повідомлення CF7 лишаються на всю ширину форми. */
	.home #contact .wpcf7 form {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		column-gap: var(--space-6);
	}

	.home #contact .wpcf7 form > p,
	.home #contact .wpcf7 .wpcf7-response-output {
		grid-column: 1 / -1;
	}

	.home #contact .wpcf7 form > p:nth-of-type(1) {
		grid-column: 1;
	}

	.home #contact .wpcf7 form > p:nth-of-type(2) {
		grid-column: 2;
	}

	.system-map {
		grid-template-columns: minmax(0, 0.68fr) minmax(38rem, 1.32fr);
		gap: clamp(var(--space-10), 5vw, 6rem);
	}

	.system-map__visual {
		width: min(100%, 43rem);
	}

	.system-map__copy .section-title {
		max-width: 11ch;
	}

	.system-flow__route {
		grid-template-columns: minmax(7.75rem, 0.82fr) minmax(2.5rem, 3.5rem) minmax(15.5rem, 1.35fr) minmax(2.5rem, 3.5rem) minmax(8rem, 0.72fr);
		gap: var(--space-2);
		align-items: center;
	}

	.system-flow__source-list {
		grid-template-columns: 1fr;
	}

	.system-flow__source-list li {
		grid-template-columns: 2rem minmax(0, 1fr);
		justify-items: start;
		min-height: 4.35rem;
		padding: var(--space-3);
		text-align: left;
	}

	.system-flow__arrow {
		width: 100%;
		height: 1px;
		margin: 0;
	}

	.system-flow__arrow::after {
		right: 0;
		bottom: -0.24rem;
		transform: rotate(-45deg);
	}

	.system-flow__conversion {
		height: 18rem;
		min-height: 18rem;
	}

	.system-flow__conversion-label {
		display: grid;
		gap: 0.4rem;
		width: min(100%, 7.5rem);
		justify-content: stretch;
		text-align: center;
	}

	.system-flow__conversion-label-main {
		display: grid;
		grid-template-columns: 1fr;
		gap: 0.4rem;
	}

	.system-flow__conversion-label-main::after {
		content: "";
		width: 100%;
		height: 1px;
		background: rgba(255, 255, 255, 0.58);
	}

	.system-flow__conversion-label-secondary::before {
		content: none;
	}

	.system-flow__sources {
		height: 18rem;
	}

	.system-flow__feedback-stage.has-loop {
		padding-top: 5.5rem;
	}

	.system-flow__feedback-arrow {
		height: 100%;
	}

	.system-flow__feedback-path--mobile {
		display: none;
	}

	.system-flow__feedback-path--desktop {
		display: block;
	}

	.system-flow__feedback-arrow::before {
		display: block;
		top: 0;
		left: 12%;
		transform: rotate(-135deg);
	}

	.system-flow__feedback-arrow::after {
		top: 73%;
		left: 80%;
		transform: rotate(135deg);
	}

	.system-flow__feedback {
		width: 56%;
		margin-inline: auto;
	}

	.reasons-rail {
		grid-template-columns: minmax(0, 0.82fr) minmax(34rem, 1.18fr);
		gap: clamp(var(--space-12), 7vw, 8rem);
		align-items: start;
	}

	.reasons-rail__header .section-title {
		max-width: 17ch;
		font-size: clamp(2.4rem, 3.5vw, 3.15rem);
	}

	.process-timeline__list {
		display: grid;
		grid-template-columns: repeat(var(--timeline-steps), minmax(0, 1fr));
		gap: 0;
		width: 100%;
		min-height: 25rem;
		margin-top: var(--space-10);
		padding: 0;
	}

	.process-timeline__scroll {
		margin-top: 0;
	}

	.process-timeline__viewport {
		overflow: visible;
	}

	.process-timeline__hint {
		display: none !important;
	}

	.process-timeline__list::before {
		top: 50%;
		right: 0;
		bottom: auto;
		left: 0;
		width: auto;
		height: 1px;
		background: linear-gradient(90deg, var(--color-line-strong), var(--color-primary), var(--color-line-strong));
	}

	.process-timeline__list::after {
		content: "";
		position: absolute;
		top: calc(50% - 0.28rem);
		right: 0;
		width: 0.55rem;
		height: 0.55rem;
		border-top: 1px solid var(--color-primary);
		border-right: 1px solid var(--color-primary);
		transform: rotate(45deg);
	}

	.process-timeline__item {
		min-height: 25rem;
	}

	.process-timeline__item::before {
		top: 50%;
		left: 50%;
		width: 2rem;
		height: 2rem;
		transform: translate(-50%, -50%);
	}

	.process-timeline__item::after {
		top: 50%;
		left: 50%;
		width: 0.7rem;
		height: 0.7rem;
		transform: translate(-50%, -50%);
	}

	.process-timeline__content {
		position: absolute;
		right: var(--space-4);
		left: var(--space-4);
	}

	.process-timeline__item:nth-child(odd) .process-timeline__content {
		top: 0;
	}

	.process-timeline__item:nth-child(even) .process-timeline__content {
		top: calc(50% + var(--space-8));
	}

	.process-timeline__text {
		max-width: 14rem;
	}

	#about .section--text__inner:has(.section--text__media) {
		grid-template-columns: minmax(0, 1.05fr) minmax(22rem, 0.72fr);
		gap: clamp(var(--space-12), 7vw, 8rem);
		align-items: center;
	}

	#about .section--text__media {
		justify-self: end;
		width: min(100%, 32rem);
	}
}