/* ===== HOME: Section 1 (Hero “Harvest Prologue”) — trimmed ===== */

.hero {
	position: relative;
	padding: clamp(2rem, 6vw, 4rem) 0 clamp(2rem, 5vw, 3rem);
	background: radial-gradient(
				1200px 700px at 70% -10%,
				#eef5ea 0%,
				transparent 60%
			)
			no-repeat,
		radial-gradient(900px 600px at 10% 110%, #fff7e7 0%, transparent 55%)
			no-repeat,
		var(--c-cream);
	overflow: clip;
}

.hero-grid {
	display: grid;
	grid-template-columns: 1.1fr 0.9fr;
	gap: clamp(1rem, 4vw, 2.25rem);
	align-items: center;
}

.hero-copy h1 {
	font-family: var(--ff-display);
	font-size: clamp(1.8rem, 2.7vw, 2.6rem);
	line-height: 1.2;
	margin: 0.4rem 0 1rem;
}
.hero-lede {
	font-size: 1.05rem;
	color: var(--c-ink);
}
.hero-text {
	color: var(--c-muted);
}
.hero-cta {
	display: flex;
	gap: 0.75rem;
	margin-top: 1rem;
	flex-wrap: wrap;
}
.hero-highlights {
	margin: 1rem 0 0;
	padding: 0;
	list-style: none;
}
.highlight {
	padding-left: 1.5rem;
	position: relative;
}
.highlight::before {
	content: '';
	position: absolute;
	left: 0;
	top: 0.55rem;
	width: 0.6rem;
	height: 0.6rem;
	border-radius: 2px;
	background: linear-gradient(180deg, #e6d7b6, #b2772a);
	box-shadow: 0 1px 0 rgba(0, 0, 0, 0.05);
}

.tile.float {
	animation: gently-float 7s ease-in-out infinite alternate;
}
@keyframes gently-float {
	from {
		transform: translateY(-2px) rotate(-0.6deg);
	}
	to {
		transform: translateY(2px) rotate(0.6deg);
	}
}

/* Decorative rail: single centered image */
.grain-rail {
	margin-top: clamp(1.25rem, 4vw, 2rem);
	display: flex;
	justify-content: center;
	opacity: 0.95;
}
.grain-rail img {
	max-width: 350px;
	width: 100%;
}

/* Header shadow class inherited from global */

/* Motion safety */
@media (prefers-reduced-motion: reduce) {
	.tile.float {
		animation: none;
	}
	.btn,
	.reveal {
		transition: none !important;
	}
}

/* ===== Utilities for sections 2–5 ===== */
.cap-img {
	max-width: 350px;
	width: 100%;
}

/* Shared section head */
.sec-head h2 {
	font-family: var(--ff-display);
	font-size: clamp(1.3rem, 2.1vw, 2rem);
	margin: 0.25rem 0 0.5rem;
}

/* === SECTION 2: Timeline === */
.timeline {
	padding: clamp(1.75rem, 4vw, 2.5rem) 0;
	background: linear-gradient(180deg, #fffdf7, #f7f5ef);
}
.tl-rail {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1rem;
	padding: 0;
	margin: 1rem 0;
	list-style: none;
}
.tl-step {
	background: var(--c-paper);
	border-radius: var(--radius-xl);
	padding: 0.9rem;
	box-shadow: var(--shadow-soft);
	display: grid;
	gap: 0.5rem;
}
.tl-fig {
	margin: 0;
}
.tl-copy h3 {
	margin: 0.2rem 0 0.25rem;
	font-size: 1.05rem;
}

.tl-progress {
	position: relative;
	height: 6px;
	background: #eae6d7;
	border-radius: 999px;
	overflow: hidden;
}
.progress-fill {
	position: absolute;
	inset: 0 100% 0 0;
	background: linear-gradient(90deg, #4f7b5c, #b2772a);
}
.timeline.is-active .progress-fill {
	animation: tl-fill 2.2s ease forwards;
}
@keyframes tl-fill {
	to {
		inset: 0 0 0 0;
	}
}

@media (max-width: 960px) {
	.tl-rail {
		grid-template-columns: 1fr;
	}
}

/* === SECTION 3: Flavour band === */
.flavour-band {
	padding: clamp(1.75rem, 4vw, 2.5rem) 0;
	background: radial-gradient(
			800px 400px at 10% 0%,
			#eef5ea 0%,
			transparent 60%
		)
		no-repeat;
}
.flv-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 1rem;
}
.flv-card {
	background: var(--c-paper);
	border-radius: var(--radius-xl);
	padding: 1rem;
	box-shadow: var(--shadow-soft);
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 0.9rem;
	align-items: center;
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.flv-card:hover {
	transform: translateY(-2px);
	box-shadow: var(--shadow-float);
}
.flv-fig {
	margin: 0;
}

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

/* === SECTION 4: Batch conveyor === */
.batch-conveyor {
	padding: clamp(1.75rem, 4vw, 2.5rem) 0;
}
.belt-wrap {
	position: relative;
}
.belt {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: minmax(240px, 280px);
	gap: 0.9rem;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	padding: 0.25rem 0.25rem 1rem;
}
.batch-card {
	scroll-snap-align: start;
	background: var(--c-paper);
	border-radius: var(--radius-xl);
	padding: 1rem;
	box-shadow: var(--shadow-soft);
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.batch-card:hover {
	transform: translateY(-2px);
	box-shadow: var(--shadow-float);
}
.batch-fig {
	margin: 0 0 0.5rem 0;
}

.belt-btn {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 36px;
	height: 36px;
	border-radius: 50%;
	border: 2px solid var(--c-olive);
	background: #fff;
	color: var(--c-olive);
	display: grid;
	place-items: center;
	cursor: pointer;
	transition: background 0.2s ease;
}
.belt-btn:hover {
	background: #e7efe7;
}
.belt-btn.prev {
	left: -6px;
}
.belt-btn.next {
	right: -6px;
}

@media (max-width: 640px) {
	.belt-btn {
		display: none;
	} /* свайп на мобильных */
}

/* === SECTION 5: Pillars === */
.pillars {
	padding: clamp(1.75rem, 4vw, 2.5rem) 0;
	background: linear-gradient(180deg, #f7f5ef, #fffdf7);
}
.pl-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 1rem;
}
.pl-item {
	background: var(--c-paper);
	border-radius: var(--radius-xl);
	padding: 1rem;
	box-shadow: var(--shadow-soft);
	display: grid;
	gap: 0.5rem;
	align-content: start;
}
.pl-fig {
	margin: 0.25rem 0 0 0;
}

@media (max-width: 1024px) {
	.pl-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}
@media (max-width: 560px) {
	.pl-grid {
		grid-template-columns: 1fr;
	}
}
/* ===== SECTION 6: Season Wheel ===== */
.season-wheel {
	padding: clamp(1.75rem, 4vw, 2.5rem) 0;
	background: radial-gradient(
			700px 360px at 85% 20%,
			#eef5ea 0%,
			transparent 60%
		)
		no-repeat;
}
.wheel-wrap {
	display: grid;
	place-items: center;
	margin-top: 0.5rem;
}
.wheel {
	position: relative;
	width: min(540px, 92vw);
	aspect-ratio: 1/1;
	border-radius: 50%;
	background: #fffdf7;
	box-shadow: var(--shadow-soft);
}
.wheel::before {
	content: '';
	position: absolute;
	inset: 10%;
	border-radius: 50%;
	border: 2px dashed #d9d1b7;
}
.wheel-core {
	position: absolute;
	inset: 36% 36%;
	border-radius: 50%;
	background: linear-gradient(180deg, #efece0, #fffdf7);
	display: grid;
	place-items: center;
	text-align: center;
	padding: 0.5rem;
	box-shadow: inset 0 6px 18px rgba(0, 0, 0, 0.06);
}
.wheel-core strong {
	font-family: var(--ff-display);
}
.wheel-core span {
	font-size: 0.85rem;
	color: var(--c-muted);
}

.node {
	position: absolute;
	width: min(260px, 44%);
	display: grid;
	gap: 0.35rem;
	text-align: left;
}
.orbit-fig {
	margin: 0;
}
.orbit-img {
	width: 120px;
} /* ≤350px гарантировано */
.n1 {
	top: 2%;
	left: 6%;
}
.n2 {
	right: 2%;
	top: 26%;
	text-align: right;
}
.n3 {
	left: 20%;
	bottom: 6%;
}

@media (max-width: 700px) {
	.wheel {
		width: min(440px, 96vw);
	}
	.orbit-img {
		width: 110px;
	}
}
@media (max-width: 520px) {
	.wheel {
		width: min(360px, 96vw);
	}
	.node {
		position: static;
		width: auto;
		margin: 0.6rem 0;
	}
	.wheel::before,
	.wheel-core {
		display: none;
	}
}

/* ===== SECTION 7: Recipes strip ===== */
.recipes-strip {
	padding: clamp(1.75rem, 4vw, 2.5rem) 0;
	background: linear-gradient(180deg, #fffdf7, #f7f5ef);
}
.rc-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 1rem;
}
.rc-card {
	background: var(--c-paper);
	border-radius: var(--radius-xl);
	box-shadow: var(--shadow-soft);
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 0.9rem;
	padding: 1rem;
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.rc-card:hover {
	transform: translateY(-2px);
	box-shadow: var(--shadow-float);
}
.rc-fig {
	margin: 0;
}
.rc-steps {
	margin: 0.25rem 0 0;
	padding-left: 1rem;
}
@media (max-width: 900px) {
	.rc-grid {
		grid-template-columns: 1fr;
	}
	.rc-card {
		grid-template-columns: auto 1fr;
	}
}

/* ===== SECTION 8: Quality Lab ===== */
.lab {
	padding: clamp(1.75rem, 4vw, 2.5rem) 0;
}
.lab-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1rem;
}
.lab-row {
	background: var(--c-paper);
	border-radius: var(--radius-xl);
	box-shadow: var(--shadow-soft);
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 0.9rem;
	padding: 1rem;
}
.lab-fig {
	margin: 0;
}
.lab-meter {
	position: relative;
	height: 10px;
	background: #ece6d6;
	border-radius: 999px;
	overflow: hidden;
	margin-top: 0.35rem;
}
.lab-meter i {
	display: block;
	height: 100%;
	width: 0%;
	background: linear-gradient(90deg, #4f7b5c, #b2772a);
	transition: width 1.2s ease;
}
.lab.is-on .lab-meter i {
	width: var(--v);
}
.lab-meter em {
	display: block;
	font-style: normal;
	font-size: 0.8rem;
	color: var(--c-muted);
	margin-top: 0.25rem;
}

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

/* ===== SECTION 9: Voices ===== */
.voices {
	padding: clamp(1.75rem, 4vw, 2.5rem) 0;
	background: radial-gradient(
			800px 420px at 12% 100%,
			#eef5ea 0%,
			transparent 60%
		)
		no-repeat;
}
.vc-track {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: minmax(240px, 320px);
	gap: 1rem;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	padding-bottom: 0.5rem;
	animation: voices-marquee 28s linear infinite;
}
.vc-card {
	scroll-snap-align: start;
	background: var(--c-paper);
	border-radius: var(--radius-xl);
	box-shadow: var(--shadow-soft);
	padding: 1rem;
	display: grid;
	gap: 0.5rem;
}
.vc-card blockquote {
	margin: 0;
	font-size: 1rem;
	line-height: 1.5;
}
.vc-card figcaption {
	color: var(--c-muted);
	font-size: 0.9rem;
}
.vc-img {
	width: 140px;
}

@media (prefers-reduced-motion: reduce) {
	.voices .vc-track {
		animation: none;
	}
}
/* Анимируемый угол вращения — наследуемая, чтобы узлы видели значение */
@property --spin {
	syntax: '<angle>';
	inherits: true; /* было: false */
	initial-value: 0deg;
}

/* Круг всегда повёрнут на var(--spin) */
.wheel {
	transform: rotate(var(--spin));
	will-change: transform;
}

/* Запускаем анимацию, когда секция видима (класс уже добавляет JS) */
.season-wheel.is-spinning .wheel {
	animation: wheel-spin-var 18s linear infinite;
}

/* Инкрементируем переменную --spin от 0 до 360deg */
@keyframes wheel-spin-var {
	to {
		--spin: 360deg;
	}
}

/* Контент в узле компенсирует вращение: всегда «ровный» */
.node .upright {
	transform: rotate(calc(-1 * var(--spin)));
	transform-origin: center;
	will-change: transform;
}
/* ===== SECTION 10: Ledger ===== */
.ledger {
	padding: clamp(1.75rem, 4vw, 2.5rem) 0;
	background: linear-gradient(180deg, #fffdf7, #f7f5ef);
}
.lg-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1rem;
}
.lg-entry {
	background: var(--c-paper);
	border-radius: var(--radius-xl);
	box-shadow: var(--shadow-soft);
	padding: 1rem;
	position: relative;
	overflow: hidden;
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.lg-entry:hover {
	transform: translateY(-2px);
	box-shadow: var(--shadow-float);
}
.lg-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.5rem;
	margin-bottom: 0.35rem;
}
.lg-fig {
	margin: 0.5rem 0 0 0;
}
.stamp {
	position: absolute;
	right: -30px;
	top: 18px;
	rotate: -18deg;
	color: #245c3a;
	border: 2px solid #245c3a;
	padding: 0.25rem 0.6rem;
	border-radius: 0.35rem;
	background: #eef5ea;
	letter-spacing: 0.12em;
	font-weight: 700;
	box-shadow: 0 2px 0 rgba(0, 0, 0, 0.06);
	opacity: 0.8;
	transition: transform 0.25s ease, opacity 0.25s ease;
}
.lg-entry:hover .stamp {
	transform: scale(1.06);
	opacity: 1;
}

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

/* ===== SECTION 11: Value Share ===== */
.values {
	padding: clamp(1.75rem, 4vw, 2.5rem) 0;
}
.vl-wrap {
	display: grid;
	grid-template-columns: auto 1fr auto;
	gap: 1rem;
	align-items: center;
}
.vl-fig {
	margin: 0;
}
.vl-bands {
	display: grid;
	gap: 0.5rem;
}
.band {
	display: grid;
	grid-template-columns: 120px 1fr 56px;
	align-items: center;
	gap: 0.5rem;
	background: #fffdf7;
	border: 1px dashed #d9d1b7;
	border-radius: 0.75rem;
	padding: 0.5rem;
}
.band i {
	display: block;
	height: 10px;
	border-radius: 999px;
	background: linear-gradient(90deg, #4f7b5c, #b2772a);
	width: 0%;
}
.band em {
	font-style: normal;
	color: var(--c-muted);
}
.values.is-on .band i {
	transition: width 1.2s ease;
} /* ширина задаётся через JS */

@media (max-width: 860px) {
	.vl-wrap {
		grid-template-columns: 1fr;
	}
}

/* ===== SECTION 12: Packing ===== */
.packing {
	padding: clamp(1.75rem, 4vw, 2.5rem) 0;
	background: radial-gradient(
			800px 400px at 88% 10%,
			#eef5ea 0%,
			transparent 60%
		)
		no-repeat;
}
.pk-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 1rem;
}
.pk-card {
	background: var(--c-paper);
	border-radius: var(--radius-xl);
	box-shadow: var(--shadow-soft);
	overflow: hidden;
}
.pk-toggle {
	width: 100%;
	text-align: left;
	padding: 0.9rem 1rem;
	font-weight: 700;
	cursor: pointer;
	background: #fffaf0;
	border: 0;
	border-bottom: 1px solid #efe6cf;
}
.pk-toggle:focus-visible {
	outline: 3px solid #1d6;
	outline-offset: 2px;
}
.pk-panel {
	padding: 0.8rem 1rem 1rem;
	display: grid;
	gap: 0.6rem;
}
@media (max-width: 900px) {
	.pk-grid {
		grid-template-columns: 1fr;
	}
}

/* ===== SECTION 13: Moments ===== */
.moments {
	padding: clamp(1.75rem, 4vw, 2.5rem) 0;
}
.mm-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1rem;
}
.mm-card {
	background: var(--c-paper);
	border-radius: var(--radius-xl);
	box-shadow: var(--shadow-soft);
	padding: 1rem;
	display: grid;
	gap: 0.6rem;
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.mm-card:hover {
	transform: translateY(-2px);
	box-shadow: var(--shadow-float);
}
.mm-card blockquote {
	margin: 0;
	font-size: 1rem;
	line-height: 1.55;
}
.mm-card figcaption {
	color: var(--c-muted);
}
@media (max-width: 1024px) {
	.mm-grid {
		grid-template-columns: 1fr;
	}
}

/* ===== SECTION 14: Care ===== */
.care {
	padding: clamp(1.75rem, 4vw, 2.5rem) 0;
	background: linear-gradient(180deg, #f7f5ef, #fffdf7);
}
.cr-wrap {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 1rem;
	align-items: start;
}
.cr-fig {
	margin: 0;
}
.cr-list {
	margin: 0;
	padding: 0;
	display: grid;
	gap: 0.5rem;
	list-style: none;
}
details {
	background: #fffdf7;
	border: 1px solid #eee3c9;
	border-radius: 0.6rem;
	padding: 0.5rem 0.75rem;
}
summary {
	cursor: pointer;
	font-weight: 700;
}
summary::marker {
	content: '› ';
}
details[open] {
	box-shadow: var(--shadow-soft);
}
@media (max-width: 780px) {
	.cr-wrap {
		grid-template-columns: 1fr;
	}
}
/* ===== SECTION 15: Contact ===== */
.contact {
	padding: clamp(1.75rem, 4vw, 2.5rem) 0;
	background: radial-gradient(
				900px 420px at 10% 0%,
				#eef5ea 0%,
				transparent 60%
			)
			no-repeat,
		linear-gradient(180deg, #fffdf7, #f7f5ef);
}
.contact-grid {
	display: grid;
	grid-template-columns: 1.1fr 0.9fr;
	gap: 1.2rem;
	align-items: start;
}
.contact-head {
	position: relative;
}
.contact-stamp {
	margin: 0.8rem 0 0;
}
.contact-stamp img {
	width: min(180px, 48vw);
}

/* keep images ≤ 350px effectively */
.contact-fig img {
	width: min(320px, 90%);
}

.form-wrapper {
	display: grid;
	gap: 0.75rem;
	background: var(--c-paper);
	border-radius: var(--radius-xl);
	box-shadow: var(--shadow-soft);
	padding: 1rem;
}
.form-wrapper input[type='text'],
.form-wrapper input[type='email'],
.form-wrapper textarea {
	width: 100%;
	border: 2px solid #e9e1c9;
	border-radius: 0.6rem;
	padding: 0.7rem 0.8rem;
	background: #fffdf7;
	color: var(--c-ink);
	font: inherit;
	transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.1s ease;
}
.form-wrapper textarea {
	min-height: 120px;
	resize: vertical;
}
.form-wrapper input:focus,
.form-wrapper textarea:focus {
	border-color: var(--c-olive);
	box-shadow: 0 0 0 3px rgba(81, 107, 60, 0.15);
	outline: none;
	transform: translateY(-1px);
}
.form-checkbox {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	font-size: 0.95rem;
	color: var(--c-muted);
}
.form-checkbox input[type='checkbox'] {
	accent-color: var(--c-olive);
}
.form-checkbox a {
	color: var(--c-olive);
	text-decoration: underline;
}

.contact-aside {
	background: var(--c-paper);
	border-radius: var(--radius-xl);
	box-shadow: var(--shadow-soft);
	padding: 1rem;
	display: grid;
	gap: 0.6rem;
	align-content: start;
}
.contact-notes {
	margin: 0;
	padding-left: 1rem;
}
.contact-notes li {
	margin: 0.1rem 0;
}

/* a11y helper */
.sr-only {
	position: absolute !important;
	height: 1px;
	width: 1px;
	overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px);
	white-space: nowrap;
	border: 0;
	padding: 0;
	margin: -1px;
}

/* Responsive */
@media (max-width: 980px) {
	.contact-grid {
		grid-template-columns: 1fr;
	}
	.contact-aside {
		order: 3;
	}
}
/* --- HERO fixes: слои, клики и позиции --- */
.hero {
	isolation: isolate;
} /* свой стек слоёв, ничего не «проваливается» */
.hero-grid {
	position: relative;
}

.hero-copy {
	position: relative;
	z-index: 2;
} /* текст ВСЕГДА поверх */
.hero-mosaic {
	position: relative;
	z-index: 1;
	min-height: 480px;
	contain: layout;
}
.hero-mosaic img {
	max-width: 200px;
}
.grain-rail img {
	max-width: 200px;
}
.tile {
	pointer-events: none; /* плитки не перекрывают клики по кнопкам */
	border-radius: 18px;
	box-shadow: var(--shadow-float);
}

/* аккуратная раскладка плиток — держим их в правой колонке */
.t2 {
	top: 10%;
	right: -2%;
	rotate: 0.8deg;
	z-index: 3;
}
.t4 {
	top: 40%;
	right: 12%;
	rotate: 1deg;
	z-index: 2;
}
.t3 {
	top: 62%;
	right: 34%;
	rotate: -1deg;
	z-index: 1;
	left: auto;
}

/* адаптив и спокойные позиции, чтобы не наезжали на текст */
@media (max-width: 1024px) {
	.hero-mosaic {
		order: -1;
		min-height: 420px;
	}
	.t2 {
		top: 6%;
		right: 8%;
	}
	.t4 {
		top: 38%;
		right: 18%;
	}
	.t3 {
		top: 60%;
		right: 34%;
	}
}
@media (max-width: 720px) {
	.hero-mosaic {
		min-height: 380px;
	}
	.tile {
		width: min(260px, 80vw);
	}
	.t2 {
		right: 6%;
	}
	.t4 {
		right: 20%;
	}
	.t3 {
		right: 42%;
	}
}
@media (max-width: 520px) {
	.hero-mosaic {
		min-height: 340px;
	}
	.tile {
		width: min(220px, 86vw);
	}
	.t2,
	.t3,
	.t4 {
		rotate: 0deg;
	} /* спокойнее на очень маленьких экранах */
}
/* ===== HERO: mobile reflow & swipe rail ===== */
@media (max-width: 640px) {
	/* 1) Сетка — один столбец, текст сверху */
	.hero-grid {
		grid-template-columns: 1fr;
		gap: 0.9rem;
	}
	.hero-copy {
		order: 1;
		text-align: left;
	}
	/* раньше у нас было order:-1; возвращаем изображения вниз */
	.hero-mosaic {
		order: 2;
		min-height: auto;
	}

	/* 2) Карточки больше не absolute — делаем горизонтальную ленту */
	.hero-mosaic {
		display: grid;
		grid-auto-flow: column;
		grid-auto-columns: 78vw; /* ширина карточки на телефоне */
		gap: 0.6rem;
		overflow-x: auto;
		padding: 0.25rem 0 0.75rem;
		scroll-snap-type: x mandatory;
		-webkit-overflow-scrolling: touch;
	}
	.hero-mosaic .tile {
		position: static !important; /* снимаем top/right/rotate-позиционирование */
		top: auto;
		right: auto;
		bottom: auto;
		left: auto;
		width: 100%;
		max-width: 350px; /* требование по размеру */
		translate: none !important;
		scroll-snap-align: start;
		pointer-events: none; /* не мешают кликам */
	}
	/* обнуляем индивидуальные оффсеты плиток */
	.t2,
	.t3,
	.t4 {
		rotate: 0deg;
	}

	/* 3) Кнопки — удобные по ширине */
	.hero-cta .btn,
	.hero-cta .cta-button {
		flex: 1 1 160px;
	}

	/* 4) Декор под Hero (если есть) — компактнее */
	.grain-rail img {
		max-width: 260px;
	}
}

/* На устройствах без hover отключаем «плавание» карточек */
@media (hover: none) {
	.tile.float {
		animation: none;
	}
}
/* Lab meters (no inline styles) */
.lab-meter {
	position: relative;
	height: 10px;
	background: #ece6d6;
	border-radius: 999px;
	overflow: hidden;
	margin-top: 0.35rem;
}
.lab-meter .meter-fill {
	position: absolute;
	inset: 0;
	width: 0%; /* стартовое состояние */
	background: linear-gradient(90deg, #4f7b5c, #b2772a);
	transition: width 1s ease;
}
.section-lab.is-on .lab-meter .meter-fill {
	/* класс вешаем секции из JS */
	width: var(--v, 0%);
}

@media (prefers-reduced-motion: reduce) {
	.lab-meter .meter-fill {
		transition: none;
	}
}