/* ==========================================================================
   /opt/ — оптовый лендинг «ПроЛес»
   Эстетика: заводской паспорт изделия. Бумажный фон, жёсткая типографская
   сетка, нумерованные разделы, моноширинные техданные, жёсткие тени без блюра.
   3D — настоящая изометрия на CSS transform, без библиотек и WebGL.
   ========================================================================== */

:root {
	/* Бумага и чернила */
	--paper: #f2eee5;
	--paper-2: #e9e3d6;
	--card: #fdfbf6;
	--ink: #191512;
	--ink-2: #4a423a;
	--ink-3: #7d7264;
	--line: #d8d0be;
	--line-ink: #191512;

	/* Единственный акцент — жжёная охра. Второй цвет только для служебных меток. */
	--accent: #a6431e;
	--accent-ink: #fdfbf6;
	--forest: #2f4a3a;

	/* Дерево для изометрии */
	--wood-top: #dcb684;
	--wood-side: #b98f57;
	--wood-end: #8a6738;

	--maxw: 1280px;
	--pad-x: clamp(18px, 5vw, 56px);
	--gap: clamp(18px, 2.4vw, 32px);
	--section-y: clamp(56px, 8vw, 116px);

	--mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
	--sans: "Helvetica Neue", Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;

	--ease: cubic-bezier(.2, .7, .3, 1);
}

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

html {
	-webkit-text-size-adjust: 100%;
}

body {
	margin: 0;
	background: var(--paper);
	color: var(--ink);
	font-family: var(--sans);
	font-size: 17px;
	line-height: 1.55;
	overflow-x: hidden;
	-webkit-font-smoothing: antialiased;
}

/* Едва заметная зернистость бумаги — снимает «цифровую стерильность». */
body::before {
	content: "";
	position: fixed;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	opacity: .5;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.035'/%3E%3C/svg%3E");
}

body > * {
	position: relative;
	z-index: 1;
}

img,
video {
	max-width: 100%;
	height: auto;
	display: block;
}

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

h1,
h2,
h3,
h4 {
	margin: 0;
	font-weight: 800;
	line-height: 1.02;
	letter-spacing: -.035em;
}

p {
	margin: 0;
}

ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

::selection {
	background: var(--accent);
	color: var(--accent-ink);
}

:focus-visible {
	outline: 2px solid var(--accent);
	outline-offset: 3px;
}

/* --------------------------------------------------------------------------
   Служебная типографика: всё «паспортное» — моноширинным
   -------------------------------------------------------------------------- */

.mono {
	font-family: var(--mono);
	font-size: 12.5px;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--ink-3);
}

.wrap {
	width: 100%;
	max-width: var(--maxw);
	margin: 0 auto;
	padding-inline: var(--pad-x);
}

.rule {
	height: 1px;
	background: var(--line);
	border: 0;
	margin: 0;
}

/* --------------------------------------------------------------------------
   Разделы: номер + название в одну строку, как в чертеже
   -------------------------------------------------------------------------- */

.sec {
	padding-block: var(--section-y);
	border-top: 1px solid var(--line);
}

.sec__label {
	display: flex;
	align-items: baseline;
	gap: 14px;
	font-family: var(--mono);
	font-size: 12.5px;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--ink-3);
	margin-bottom: clamp(24px, 3vw, 40px);
}

.sec__label b {
	color: var(--accent);
	font-weight: 700;
}

.sec__label::after {
	content: "";
	flex: 1;
	height: 1px;
	background: var(--line);
}

.sec__title {
	font-size: clamp(30px, 5.4vw, 62px);
	max-width: 20ch;
	margin-bottom: 18px;
}

.sec__intro {
	color: var(--ink-2);
	font-size: clamp(16px, 1.7vw, 19px);
	max-width: 58ch;
}

.sec__head {
	margin-bottom: clamp(30px, 4.5vw, 58px);
	display: grid;
	grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
	gap: clamp(16px, 3vw, 56px);
	align-items: end;
}

.sec__head .sec__title {
	margin-bottom: 0;
}

@media (max-width: 860px) {
	.sec__head {
		grid-template-columns: 1fr;
		align-items: start;
	}
}

/* --------------------------------------------------------------------------
   Кнопки — прямоугольные, с жёсткой тенью-сдвигом
   -------------------------------------------------------------------------- */

.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	min-height: 52px;
	padding: 14px 26px;
	border: 1.5px solid var(--line-ink);
	background: var(--card);
	color: var(--ink);
	font: 600 16px/1.2 var(--sans);
	cursor: pointer;
	box-shadow: 4px 4px 0 var(--line-ink);
	transition: transform .12s var(--ease), box-shadow .12s var(--ease), background .16s;
}

.btn:hover {
	transform: translate(2px, 2px);
	box-shadow: 2px 2px 0 var(--line-ink);
}

.btn:active {
	transform: translate(4px, 4px);
	box-shadow: 0 0 0 var(--line-ink);
}

.btn--accent {
	background: var(--accent);
	border-color: var(--accent);
	color: var(--accent-ink);
	box-shadow: 4px 4px 0 var(--line-ink);
}

.btn--accent:hover {
	background: #93391a;
}

.btn--sm {
	min-height: 42px;
	white-space: nowrap;
	padding: 10px 18px;
	font-size: 15px;
	box-shadow: 3px 3px 0 var(--line-ink);
}

.btn--sm:hover {
	box-shadow: 1px 1px 0 var(--line-ink);
}

/* --------------------------------------------------------------------------
   Шапка
   -------------------------------------------------------------------------- */

.top {
	background: var(--ink);
	color: #d8d0be;
	font-family: var(--mono);
	font-size: 12px;
	letter-spacing: .08em;
	text-transform: uppercase;
}

.top__inner {
	display: flex;
	flex-wrap: wrap;
	gap: 6px 22px;
	padding-block: 9px;
}

.top__inner span:nth-child(n+3) {
	color: #9b9385;
}

.head {
	position: sticky;
	top: 0;
	z-index: 50;
	background: var(--paper);
	border-bottom: 1px solid var(--line);
}

.head__inner {
	display: flex;
	align-items: center;
	gap: 18px;
	min-height: 66px;
}

.logo {
	display: inline-flex;
	align-items: center;
	gap: 11px;
	flex: none;
}

/* У logo_schema.png нет альфа-канала: белую подложку убирает multiply,
   поэтому логотип должен лежать только на светлом фоне. */
.logo img {
	height: 48px;
	width: auto;
	mix-blend-mode: multiply;
}

@media (max-width: 520px) {
	.logo img {
		height: 34px;
	}
}

.logo__tag {
	font-family: var(--mono);
	font-size: 11px;
	letter-spacing: .12em;
	font-weight: 500;
	border: 1px solid var(--line-ink);
	padding: 2px 7px;
	text-transform: uppercase;
}

.nav {
	display: flex;
	gap: 22px;
	margin-left: auto;
	font-family: var(--mono);
	font-size: 12.5px;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--ink-2);
}

.nav a {
	padding-block: 4px;
	border-bottom: 1.5px solid transparent;
	transition: border-color .15s, color .15s;
	white-space: nowrap;
}

.nav a i {
	font-style: normal;
	color: var(--ink-3);
	margin-right: 6px;
}

.nav a:hover {
	color: var(--ink);
	border-bottom-color: var(--accent);
}

.head__act {
	display: flex;
	align-items: center;
	gap: 14px;
	margin-left: auto;
}

.nav + .head__act {
	margin-left: 0;
}

.tel {
	font-weight: 700;
	font-size: 16px;
	white-space: nowrap;
}

.tel:hover {
	color: var(--accent);
}

@media (max-width: 1080px) {
	.nav {
		display: none;
	}
}

@media (max-width: 620px) {
	.head__act .btn {
		display: none;
	}
}

/* --------------------------------------------------------------------------
   Герой
   -------------------------------------------------------------------------- */

.hero {
	padding-block: clamp(28px, 4vw, 56px) clamp(28px, 3.5vw, 48px);
	position: relative;
}

.hero__grid {
	display: grid;
	grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
	gap: clamp(26px, 4vw, 64px);
	align-items: center;
}

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

.hero__kicker {
	display: flex;
	align-items: center;
	gap: 10px;
	font-family: var(--mono);
	font-size: 12.5px;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--ink-3);
	margin-bottom: 22px;
}

.hero__kicker i {
	width: 8px;
	height: 8px;
	background: var(--forest);
	display: block;
}

.hero h1 {
	font-size: clamp(33px, 5.2vw, 68px);
	letter-spacing: -.045em;
	margin-bottom: 22px;
}

/* Ключевое слово подчёркнуто от руки, а не залито градиентом. */
.hero h1 em {
	font-style: normal;
	position: relative;
	white-space: nowrap;
}

.hero h1 em::after {
	content: "";
	position: absolute;
	left: -.02em;
	right: -.02em;
	bottom: .04em;
	height: .11em;
	background: var(--accent);
	z-index: -1;
}

.hero__text {
	color: var(--ink-2);
	font-size: clamp(16px, 1.8vw, 20px);
	max-width: 48ch;
	margin-bottom: 30px;
}

.hero__cta {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
	margin-bottom: 34px;
}

/* Паспортная строка: данные в столбцах с моноширинными числами */
.specline {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(132px, 1fr));
	border-top: 1.5px solid var(--line-ink);
	border-left: 1px solid var(--line);
}

.specline > div {
	border-right: 1px solid var(--line);
	border-bottom: 1px solid var(--line);
	padding: 13px 14px;
}

.specline dt {
	font-family: var(--mono);
	font-size: 11px;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--ink-3);
	margin-bottom: 5px;
}

.specline dd {
	margin: 0;
	font-family: var(--mono);
	font-size: clamp(19px, 2.2vw, 25px);
	font-weight: 600;
	letter-spacing: -.02em;
	white-space: nowrap;
	font-variant-numeric: tabular-nums;
}

.specline__price {
	background: var(--card);
	box-shadow: inset 3px 0 0 var(--accent);
}

.specline__price dd {
	color: var(--accent);
}

.specline dd small {
	font-size: .58em;
	color: var(--ink-3);
	margin-left: 2px;
}

/* --------------------------------------------------------------------------
   Первый экран: студийная съёмка пачки
   -------------------------------------------------------------------------- */

.stack {
	position: relative;
	margin: 0;
	perspective: 1200px;
}

/* Студийный фон белый, а сама липа почти белая: mix-blend-mode: multiply сажает кадр на
   бумагу вместе с древесиной и она пропадает. Поэтому фото лежит на белой карточке —
   фон снимка совпадает с ней, а дерево сохраняет яркость. */
.stack {
	background: #fff;
	border: 1.5px solid var(--line-ink);
	box-shadow: 10px 10px 0 var(--line-ink);
	padding: 14px;
	overflow: hidden;
}

.stack img {
	width: 100%;
	height: auto;
	transform-origin: 60% 50%;
	animation: stack-in .7s var(--ease) both;
}

@keyframes stack-in {
	from {
		opacity: 0;
		transform: scale(1.04) translateY(8px);
	}

	to {
		opacity: 1;
		transform: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	.stack img {
		animation: none;
	}
}

.stack__note {
	position: absolute;
	margin: 0;
	font-family: var(--mono);
	font-size: 11.5px;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--ink-3);
	white-space: nowrap;
}

.stack__note::before {
	content: "";
	position: absolute;
	background: var(--ink-3);
	height: 1px;
	top: 50%;
}

.stack__note {
	background: rgba(255, 255, 255, .88);
	padding: 3px 8px;
}

.stack__note--a {
	top: 22px;
	right: 22px;
}

.stack__note--b {
	bottom: 22px;
	left: 22px;
}

.stack__note::before {
	display: none;
}

@media (max-width: 980px) {
	.stack__note {
		display: none;
	}
}

/* --------------------------------------------------------------------------
   Преимущества — нумерованный список-полоса, без карточек-плиток
   -------------------------------------------------------------------------- */

.facts {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
	border-top: 1px solid var(--line);
}

.fact {
	border-bottom: 1px solid var(--line);
	border-right: 1px solid var(--line);
	padding: 26px 24px 30px;
	background: transparent;
	transition: background .2s;
}

.fact:hover {
	background: var(--card);
}

.fact__no {
	font-family: var(--mono);
	font-size: 12px;
	letter-spacing: .1em;
	color: var(--accent);
	margin-bottom: 16px;
}

.fact h3 {
	font-size: 21px;
	margin-bottom: 9px;
	letter-spacing: -.02em;
}

.fact p {
	color: var(--ink-2);
	font-size: 15.5px;
}

/* --------------------------------------------------------------------------
   Ассортимент — строки-прайс, а не сетка плиток
   -------------------------------------------------------------------------- */

.rows {
	border-top: 1.5px solid var(--line-ink);
}

.row {
	display: grid;
	grid-template-columns: 3.4rem minmax(0, 1fr) minmax(0, 1.3fr) 2.4rem;
	align-items: center;
	gap: 16px;
	padding: 19px 6px;
	border-bottom: 1px solid var(--line);
	transition: background .18s, padding-left .18s var(--ease);
}

.row:hover {
	background: var(--card);
	padding-left: 16px;
}

.row__no {
	font-family: var(--mono);
	font-size: 12px;
	color: var(--ink-3);
}

.row__name {
	font-size: clamp(19px, 2.3vw, 26px);
	font-weight: 700;
	letter-spacing: -.025em;
}

.row__meta {
	font-family: var(--mono);
	font-size: 12.5px;
	letter-spacing: .04em;
	color: var(--ink-3);
	text-transform: uppercase;
}

.row__go {
	justify-self: end;
	width: 34px;
	height: 34px;
	border: 1px solid var(--line);
	display: grid;
	place-items: center;
	transition: background .18s, color .18s, border-color .18s, transform .18s var(--ease);
}

.row:hover .row__go {
	background: var(--accent);
	border-color: var(--accent);
	color: var(--accent-ink);
	transform: translateX(3px);
}

@media (max-width: 720px) {
	.row {
		grid-template-columns: 2.4rem minmax(0, 1fr) 2.2rem;
		row-gap: 4px;
	}

	/* Стрелка держится в первой строке справа, описание уходит под название. */
	.row__go {
		grid-column: 3;
		grid-row: 1;
	}

	.row__meta {
		grid-column: 2 / 4;
		grid-row: 2;
	}
}

/* --------------------------------------------------------------------------
   Сорта — образцы доски, приподнимаются в 3D
   -------------------------------------------------------------------------- */

.grades {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
	gap: var(--gap);
	perspective: 1100px;
}

.grade {
	background: var(--card);
	border: 1.5px solid var(--line-ink);
	box-shadow: 6px 6px 0 var(--line-ink);
	padding: 0 0 24px;
	transform-style: preserve-3d;
	transition: transform .35s var(--ease), box-shadow .35s var(--ease);
	will-change: transform;
}

.grade:hover {
	box-shadow: 12px 12px 0 var(--line-ink);
}

/* Верхняя полоса — «спил» образца, у каждого сорта своя фактура */
.grade__sample {
	height: 92px;
	border-bottom: 1.5px solid var(--line-ink);
	position: relative;
	overflow: hidden;
	background:
		repeating-linear-gradient(90deg, rgba(138, 103, 56, .13) 0 1px, transparent 1px 9px),
		linear-gradient(180deg, #e6c99e, #d3ab74);
}

.grade__sample--a::after,
.grade__sample--ab::after,
.grade__sample--ab::before {
	content: "";
	position: absolute;
	border-radius: 50%;
	background: radial-gradient(circle at 35% 35%, #8a6738, #5d4523);
	box-shadow: inset 0 0 0 1px rgba(60, 40, 18, .5);
}

.grade__sample--a::after {
	width: 9px;
	height: 9px;
	top: 34px;
	left: 62%;
}

.grade__sample--ab::before {
	width: 17px;
	height: 15px;
	top: 24px;
	left: 22%;
}

.grade__sample--ab::after {
	width: 12px;
	height: 11px;
	top: 55px;
	left: 66%;
}

.grade__body {
	padding: 22px 24px 0;
}

.grade__rank {
	font-family: var(--mono);
	font-size: 11.5px;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--accent);
	margin-bottom: 12px;
}

.grade h3 {
	font-size: clamp(26px, 3.2vw, 34px);
	margin-bottom: 12px;
}

.grade__lead {
	color: var(--ink-2);
	font-size: 15.5px;
	margin-bottom: 18px;
}

.grade__specs {
	border-top: 1px solid var(--line);
	padding-top: 14px;
}

.grade__specs li {
	font-family: var(--mono);
	font-size: 12.5px;
	line-height: 1.7;
	color: var(--ink-2);
	padding-left: 16px;
	position: relative;
	margin-bottom: 6px;
}

.grade__specs li::before {
	content: "—";
	position: absolute;
	left: 0;
	color: var(--accent);
}

.grade__use {
	margin-top: 16px;
	padding-top: 14px;
	border-top: 1px solid var(--line);
	font-size: 14.5px;
	color: var(--ink);
}

.grade__use b {
	font-family: var(--mono);
	font-size: 11px;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--ink-3);
	display: block;
	margin-bottom: 4px;
	font-weight: 500;
}

/* --------------------------------------------------------------------------
   Спецификация — бланк
   -------------------------------------------------------------------------- */

.spec {
	border: 1.5px solid var(--line-ink);
	background: var(--card);
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

.spec table {
	width: 100%;
	border-collapse: collapse;
	min-width: 560px;
	font-size: 15.5px;
}

.spec th,
.spec td {
	text-align: left;
	padding: 14px 20px;
	border-bottom: 1px solid var(--line);
}

.spec thead th {
	font-family: var(--mono);
	font-size: 11.5px;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--ink-3);
	font-weight: 500;
	border-bottom: 1.5px solid var(--line-ink);
	background: var(--paper-2);
}

.spec tbody tr:last-child td {
	border-bottom: none;
}

.spec td:first-child {
	font-weight: 650;
	width: 26%;
}

.spec td:nth-child(2) {
	font-family: var(--mono);
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
	width: 24%;
}

.spec td:last-child {
	color: var(--ink-2);
	font-size: 14.5px;
}

/* Спецификация: съёмка торца рядом с таблицей размеров */

.spec-grid {
	display: grid;
	grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
	gap: clamp(18px, 2.5vw, 32px);
	align-items: start;
}

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

.spec-shot {
	margin: 0;
	background: #fff;
	border: 1.5px solid var(--line-ink);
	box-shadow: 8px 8px 0 var(--line-ink);
	padding: 12px;
}

.spec-shot img {
	width: 100%;
	height: auto;
	display: block;
}

.spec-shot figcaption {
	font-family: var(--mono);
	font-size: 11.5px;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--ink-3);
	padding-top: 12px;
}

/* --------------------------------------------------------------------------
   Производство: лента этапов + видео
   -------------------------------------------------------------------------- */

.flow {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
	border-left: 1px solid var(--line);
	margin-bottom: var(--gap);
}

.flow__step {
	opacity: .4;
	transition: opacity .25s linear, background .25s linear, border-color .25s linear;
	border-right: 1px solid var(--line);
	border-top: 1.5px solid var(--line-ink);
	padding: 18px 18px 26px;
	position: relative;
}

.flow__step b {
	font-family: var(--mono);
	font-size: 11.5px;
	letter-spacing: .1em;
	color: var(--accent);
	display: block;
	margin-bottom: 12px;
	font-weight: 600;
}

.flow__step.is-active {
	opacity: 1;
	background: var(--card);
	border-top-color: var(--accent);
}

/* Пока скрипт не подтвердил работу, лента читается в полную силу. */
.flow:not(.is-driven) .flow__step {
	opacity: 1;
}

.flow__step.is-active b {
	color: var(--accent);
}

.flow__step h3 {
	font-size: 18px;
	margin-bottom: 8px;
	letter-spacing: -.02em;
}

.flow__step p {
	font-size: 14.5px;
	color: var(--ink-2);
}

.video {
	position: relative;
	border: 1.5px solid var(--line-ink);
	box-shadow: 8px 8px 0 var(--line-ink);
	background: var(--paper-2);
	aspect-ratio: 16 / 9;
	overflow: hidden;
}

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

.video__btn {
	position: absolute;
	inset: 0;
	width: 100%;
	display: grid;
	place-items: center;
	gap: 16px;
	border: 0;
	cursor: pointer;
	font: inherit;
	color: var(--ink);
	background:
		repeating-linear-gradient(135deg, rgba(166, 67, 30, .05) 0 12px, transparent 12px 24px),
		var(--paper-2);
	transition: background .25s;
}

.video__btn:hover {
	background:
		repeating-linear-gradient(135deg, rgba(166, 67, 30, .1) 0 12px, transparent 12px 24px),
		var(--paper-2);
}

.video__play {
	width: 78px;
	height: 78px;
	border: 1.5px solid var(--line-ink);
	background: var(--accent);
	color: var(--accent-ink);
	display: grid;
	place-items: center;
	box-shadow: 5px 5px 0 var(--line-ink);
	transition: transform .16s var(--ease), box-shadow .16s var(--ease);
}

.video__btn:hover .video__play {
	transform: translate(2px, 2px);
	box-shadow: 3px 3px 0 var(--line-ink);
}

.video__cap {
	font-family: var(--mono);
	font-size: 12.5px;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--ink-2);
}

/* Цепочка передела: чертёжная схема линии */

.mill {
	border: 1px solid var(--line);
	border-bottom: none;
	background: var(--card);
	padding: clamp(10px, 2vw, 22px) 0 0;
	overflow: hidden;
}

.mill svg {
	display: block;
	width: 100%;
	height: auto;
}

.mill line,
.mill rect,
.mill circle,
.mill ellipse,
.mill path {
	fill: none;
	stroke: var(--ink-3);
	stroke-width: 1.6;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.mill text {
	fill: var(--ink-3);
	stroke: none;
	font-family: var(--mono);
	font-size: 13px;
	letter-spacing: .08em;
	text-transform: uppercase;
	text-anchor: middle;
}

.mill__rail line,
.mill__rollers circle {
	stroke: var(--line);
}

/* Активная станция выделяется чернилами, остальные остаются бледной схемой. */
.mill__station {
	opacity: .42;
	transition: opacity .3s var(--ease);
}

.mill__station.is-active {
	opacity: 1;
}

.mill__station.is-active line,
.mill__station.is-active rect,
.mill__station.is-active circle,
.mill__station.is-active ellipse,
.mill__station.is-active path {
	stroke: var(--ink);
	stroke-width: 2;
}

.mill__station.is-active text {
	fill: var(--accent);
}

.mill__part ellipse,
.mill__part rect,
.mill__part path {
	stroke: var(--accent);
	stroke-width: 2;
	fill: #fff;
}

.mill__shape {
	opacity: 0;
}

.mill__shape.is-on {
	opacity: 1;
}

/* Без работающего скрипта материал не показываем — схема читается как статичная. */
.mill__part {
	opacity: 0;
}

.mill.is-live .mill__part {
	opacity: 1;
}

.mill__shaft,
.mill__saw {
	transform-box: fill-box;
	transform-origin: center;
}

.mill__station.is-active .mill__shaft {
	animation: mill-spin 1.1s linear infinite;
}

.mill__station.is-active .mill__saw {
	animation: mill-spin .8s linear infinite;
}

.mill__station.is-active .mill__heat {
	animation: mill-heat 1.6s ease-in-out infinite;
}

@keyframes mill-spin {
	to {
		transform: rotate(360deg);
	}
}

@keyframes mill-heat {

	0%,
	100% {
		opacity: .35;
	}

	50% {
		opacity: 1;
	}
}

@media (prefers-reduced-motion: reduce) {

	.mill__station.is-active .mill__shaft,
	.mill__station.is-active .mill__saw,
	.mill__station.is-active .mill__heat {
		animation: none;
	}
}

/* Схема — история для большого экрана; на телефоне остаются карточки этапов. */
@media (max-width: 760px) {
	.mill {
		display: none;
	}
}


/* --------------------------------------------------------------------------
   Отгрузка
   -------------------------------------------------------------------------- */

.split {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
	gap: clamp(24px, 4vw, 60px);
	align-items: start;
}

.ship li {
	display: grid;
	grid-template-columns: 2.2rem 1fr;
	gap: 10px;
	padding: 16px 0;
	border-bottom: 1px solid var(--line);
	color: var(--ink-2);
	font-size: 16px;
}

.ship li:first-child {
	border-top: 1px solid var(--line);
}

.ship li b {
	display: block;
	color: var(--ink);
	font-size: 17px;
	margin-bottom: 2px;
}

.ship li span:first-child {
	font-family: var(--mono);
	font-size: 12px;
	color: var(--accent);
	padding-top: 4px;
}

.terms {
	display: grid;
	gap: 1px;
	background: var(--line);
	border: 1px solid var(--line);
}

.terms > div {
	background: var(--paper);
	padding: 20px 22px;
	transition: background .2s;
}

.terms > div:hover {
	background: var(--card);
}

.terms h3 {
	font-size: 18px;
	margin-bottom: 7px;
}

.terms p {
	color: var(--ink-2);
	font-size: 15px;
}

/* --------------------------------------------------------------------------
   Вопросы
   -------------------------------------------------------------------------- */

.faq {
	border-top: 1.5px solid var(--line-ink);
}

.faq details {
	border-bottom: 1px solid var(--line);
}

.faq summary {
	list-style: none;
	cursor: pointer;
	padding: 20px 44px 20px 0;
	position: relative;
	font-size: clamp(17px, 2vw, 20px);
	font-weight: 650;
	letter-spacing: -.02em;
	transition: color .16s;
}

.faq summary::-webkit-details-marker {
	display: none;
}

.faq summary:hover {
	color: var(--accent);
}

.faq summary::after {
	content: "+";
	position: absolute;
	right: 6px;
	top: 50%;
	transform: translateY(-50%);
	font-family: var(--mono);
	font-size: 22px;
	font-weight: 400;
	color: var(--accent);
	line-height: 1;
}

.faq details[open] summary::after {
	content: "–";
}

.faq__a {
	padding: 0 44px 22px 0;
	color: var(--ink-2);
	font-size: 16.5px;
	max-width: 74ch;
}

/* --------------------------------------------------------------------------
   Заявка
   -------------------------------------------------------------------------- */

.cta {
	background: var(--ink);
	color: var(--paper);
	border: 1.5px solid var(--line-ink);
	box-shadow: 10px 10px 0 var(--accent);
	padding: clamp(26px, 4vw, 54px);
}

.cta__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
	gap: clamp(26px, 4vw, 56px);
	align-items: start;
}

.cta h2 {
	font-size: clamp(28px, 4vw, 46px);
	margin-bottom: 14px;
}

.cta p {
	color: #bfb6a5;
	font-size: 17px;
	max-width: 44ch;
}

.cta .mono {
	color: #8d8577;
}

.cta .btn {
	background: var(--paper);
	border-color: var(--paper);
	color: var(--ink);
	box-shadow: 4px 4px 0 var(--accent);
	margin-top: 26px;
}

.cta .btn:hover {
	box-shadow: 2px 2px 0 var(--accent);
}

.contacts {
	margin-top: 30px;
	border-top: 1px solid #3a332c;
}

.contacts li {
	display: grid;
	grid-template-columns: 7.5rem 1fr;
	gap: 12px;
	padding: 13px 0;
	border-bottom: 1px solid #3a332c;
	font-size: 16px;
	color: #e4ddcf;
}

.contacts li span:first-child {
	font-family: var(--mono);
	font-size: 11.5px;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: #8d8577;
	padding-top: 4px;
}

.contacts a:hover {
	color: #e8a06a;
	text-decoration: underline;
}

.formbox {
	background: var(--card);
	border: 1.5px solid var(--paper);
	padding: clamp(16px, 2vw, 24px);
	min-height: 130px;
	color: var(--ink);
}

/* Виджет CRM-формы Bitrix24 приходит со своей зелёной темой и скруглениями —
   приводим к палитре страницы. Разметка виджета в обычном DOM, не в iframe. */
.formbox .b24-form-wrapper,
.formbox .b24-form-content {
	background: transparent !important;
	box-shadow: none !important;
	padding: 0 !important;
}

.formbox .b24-form-btn {
	background: var(--accent) !important;
	border: 1.5px solid var(--line-ink) !important;
	border-radius: 0 !important;
	box-shadow: 4px 4px 0 var(--line-ink) !important;
	color: var(--accent-ink) !important;
	font-family: var(--sans) !important;
	font-weight: 600 !important;
	min-height: 52px !important;
	transition: transform .12s var(--ease), box-shadow .12s var(--ease) !important;
}

.formbox .b24-form-btn:hover {
	background: #93391a !important;
	transform: translate(2px, 2px);
	box-shadow: 2px 2px 0 var(--line-ink) !important;
}

.formbox .b24-form-control,
.formbox .b24-form-control-container input {
	border-radius: 0 !important;
	font-family: var(--sans) !important;
}

.formbox .b24-form-padding-side {
	padding-inline: 0 !important;
}

/* --------------------------------------------------------------------------
   Подвал
   -------------------------------------------------------------------------- */

.foot {
	border-top: 1px solid var(--line);
	padding-block: clamp(34px, 5vw, 56px) 26px;
	font-size: 15px;
	color: var(--ink-2);
}

.foot__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
	gap: 28px;
	margin-bottom: 32px;
}

.foot h4 {
	font-family: var(--mono);
	font-size: 11.5px;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--ink-3);
	font-weight: 500;
	margin-bottom: 14px;
}

.foot li {
	margin-bottom: 9px;
}

.foot a:hover {
	color: var(--accent);
}

.foot__bottom {
	border-top: 1px solid var(--line);
	padding-top: 20px;
	display: flex;
	flex-wrap: wrap;
	gap: 12px 26px;
	font-family: var(--mono);
	font-size: 11.5px;
	letter-spacing: .05em;
	text-transform: uppercase;
	color: var(--ink-3);
}

/* Кнопка «наверх» */
.up {
	position: fixed;
	right: 16px;
	bottom: 16px;
	z-index: 45;
	width: 46px;
	height: 46px;
	border: 1.5px solid var(--line-ink);
	background: var(--card);
	color: var(--ink);
	display: grid;
	place-items: center;
	cursor: pointer;
	box-shadow: 3px 3px 0 var(--line-ink);
	opacity: 0;
	pointer-events: none;
	transition: opacity .25s, transform .16s var(--ease), box-shadow .16s var(--ease);
}

.up.on {
	opacity: 1;
	pointer-events: auto;
}

.up:hover {
	transform: translate(1px, 1px);
	box-shadow: 2px 2px 0 var(--line-ink);
}

/* --------------------------------------------------------------------------
   Появление при скролле — сдержанное, без «вылетов»
   -------------------------------------------------------------------------- */

[data-rv] {
	opacity: 0;
	transform: translateY(18px);
	transition: opacity .5s var(--ease), transform .55s var(--ease);
}

[data-rv].on {
	opacity: 1;
	transform: none;
}

[data-rv-list] > * {
	opacity: 0;
	transform: translateY(14px);
	transition: opacity .45s var(--ease), transform .5s var(--ease);
	transition-delay: calc(var(--i, 0) * 55ms);
}

[data-rv-list].on > * {
	opacity: 1;
	transform: none;
}

@media (prefers-reduced-motion: reduce) {

	*,
	*::before,
	*::after {
		animation-duration: .001ms !important;
		transition-duration: .001ms !important;
	}

	[data-rv],
	[data-rv-list] > * {
		opacity: 1;
		transform: none;
	}
}

/* --------------------------------------------------------------------------
   Мобильная панель действий — на телефоне звонок и прайс всегда под рукой
   -------------------------------------------------------------------------- */

.actionbar {
	display: none;
}

@media (max-width: 720px) {
	.actionbar {
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 60;
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 1px;
		background: var(--line-ink);
		border-top: 1.5px solid var(--line-ink);
		padding-bottom: env(safe-area-inset-bottom);
	}

	.actionbar a {
		min-height: 54px;
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 8px;
		font-weight: 650;
		font-size: 16px;
		background: var(--card);
		color: var(--ink);
	}

	.actionbar a.is-accent {
		background: var(--accent);
		color: var(--accent-ink);
	}

	body {
		padding-bottom: 54px;
	}

	.up {
		bottom: calc(66px + env(safe-area-inset-bottom));
	}
}