/* ==========================================================================
   Tomex: strona glowna (template-parts/home).
   Wszystkie reguly sa w zakresie .th-home, bo na tej stronie dzialaja tez
   globalne style Astry, WooCommerce i arkusz tomex-core (naglowek i stopka).
   Zasady: zielen tylko dla akcji, cen i stanu "aktualne"; najechanie kursorem
   tylko na myszy; kazdy cel dotyku min. 44 px; ruch wylaczony przy
   prefers-reduced-motion.
   ========================================================================== */

/* --- Podstawa i wyzerowanie stylow motywu ------------------------------- */

.th-home {
	--th-header-clear: 96px;
	display: block;
	background: var(--tx-coal-950);
	color: var(--tx-text);
	font-family: var(--tx-font-body);
	font-size: var(--tx-fs-body);
	font-weight: 400;
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	overflow-x: clip;
}

@media (min-width: 1024px) {
	.th-home {
		--th-header-clear: 132px;
	}
}

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

.th-home h1,
.th-home h2,
.th-home h3,
.th-home h4,
.th-home p,
.th-home figure,
.th-home blockquote,
.th-home ul,
.th-home dl,
.th-home dd,
.th-home dt {
	margin: 0;
	padding: 0;
}

.th-home ul {
	list-style: none;
}

.th-home h1,
.th-home h2,
.th-home h3,
.th-home h4 {
	font-family: var(--tx-font-display);
	font-weight: 700;
	color: var(--tx-white);
	letter-spacing: normal;
	text-transform: none;
	text-wrap: balance;
}

.th-home p {
	text-wrap: pretty;
}

.th-home strong {
	font-weight: 700;
}

.th-home img,
.th-home video,
.th-home iframe {
	display: block;
	max-width: 100%;
}

.th-home img {
	height: auto;
}

.th-home a {
	color: inherit;
	text-decoration: none;
}

.th-home button {
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: none;
	box-shadow: none;
	color: inherit;
	font: inherit;
	line-height: inherit;
	letter-spacing: normal;
	text-transform: none;
	cursor: pointer;
}

.th-home a,
.th-home button {
	-webkit-tap-highlight-color: transparent;
}

.th-home :focus-visible {
	outline: 3px solid var(--tx-green);
	outline-offset: 3px;
}

.th-home ::selection {
	background: var(--tx-green);
	color: var(--tx-on-green);
}

.th-home [id] {
	scroll-margin-top: calc(var(--th-header-clear) - 16px);
}

.th-home .th-icon {
	flex: none;
	width: 1.25em;
	height: 1.25em;
}

/* --- Uklad i typografia --------------------------------------------------- */

.th-home .th-container {
	width: min(100% - 2 * var(--tx-gutter), var(--tx-container));
	margin-inline: auto;
}

/* Od 1280 px tresc trzyma sie krawedzi logo i koszyka w naglowku
   (naglowek: pasek do 1560 px z wewnetrznym odstepem 30 px). */
@media (min-width: 1280px) {
	.th-home .th-container {
		width: min(100% - 100px, 1500px);
	}
}

.th-home .th-section {
	padding-block: var(--tx-section);
}

/* Sekcje ponizej pierwszego ekranu przegladarka uklada dopiero, gdy sie zblizaja.
   Asortyment (#tomex-oferta) zostaje poza ta regula, bo prowadzi do niego link "Zobacz ceny";
   sekcja o firmie tez, bo jej animacje startuja przy wejsciu w widok i potrzebuja
   policzonego stanu poczatkowego. */
.th-home .th-reviews,
.th-home .th-social,
.th-home .th-proof {
	content-visibility: auto;
	contain-intrinsic-size: auto 900px;
}

.th-home .th-head {
	max-width: 46rem;
}

.th-home .th-h2 {
	font-size: var(--tx-fs-h2);
	font-weight: 700;
	line-height: 1.08;
	letter-spacing: -0.015em;
}

.th-home .th-label + .th-h2,
.th-home .th-status + .th-h2 {
	margin-top: 16px;
}

.th-home .th-lead {
	max-width: 62ch;
	margin-top: 18px;
	color: var(--tx-text-2);
	font-size: var(--tx-fs-lead);
	line-height: 1.6;
}

.th-home .th-label {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	color: var(--tx-text-2);
	font-family: var(--tx-font-display);
	font-size: var(--tx-fs-label);
	font-weight: 600;
	line-height: 1.3;
}

.th-home .th-label .th-icon {
	width: 18px;
	height: 18px;
	color: var(--tx-green);
}

.th-home .th-status {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	min-height: 34px;
	padding: 6px 14px 6px 12px;
	border-radius: var(--tx-r-pill);
	background: var(--tx-green-soft);
	color: var(--tx-green);
	font-family: var(--tx-font-display);
	font-size: var(--tx-fs-label);
	font-weight: 600;
	line-height: 1.2;
}

.th-home .th-dot {
	flex: none;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--tx-green);
	box-shadow: 0 0 0 4px rgb(132 196 71 / 0.18);
}

/* --- Przyciski ----------------------------------------------------------- */

.th-home .th-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.55em;
	min-height: 48px;
	padding: 0.7em 1.3em;
	border: 2px solid transparent;
	border-radius: var(--tx-r);
	font-family: var(--tx-font-display);
	font-size: 1rem;
	font-weight: 600;
	line-height: 1.15;
	text-align: center;
	text-decoration: none;
	white-space: nowrap;
	cursor: pointer;
	user-select: none;
	transition:
		background-color var(--tx-fast) var(--tx-ease),
		border-color var(--tx-fast) var(--tx-ease),
		color var(--tx-fast) var(--tx-ease),
		transform var(--tx-fast) var(--tx-ease);
}

.th-home .th-btn:active {
	transform: scale(0.97);
}

.th-home .th-btn--lg {
	min-height: 56px;
	padding-inline: 1.5em;
	font-size: 1.0625rem;
}

.th-home .th-btn--primary {
	border-color: var(--tx-green);
	background: var(--tx-green);
	color: var(--tx-on-green);
}

.th-home .th-btn--primary:focus-visible {
	outline-color: var(--tx-white);
}

.th-home .th-btn--outline {
	border-color: var(--tx-line-strong);
	background: transparent;
	color: var(--tx-text);
}

.th-home .th-btn--outline .th-icon {
	color: var(--tx-green);
}

.th-home .th-btn--quiet {
	min-height: 44px;
	padding-inline: 0.4em;
	border: 0;
	color: var(--tx-text-2);
	text-decoration: underline;
	text-decoration-color: var(--tx-line-strong);
	text-underline-offset: 4px;
}

.th-home .th-icon-btn {
	display: inline-grid;
	place-items: center;
	width: 48px;
	height: 48px;
	border: 1px solid var(--tx-line-strong);
	border-radius: 50%;
	color: var(--tx-text);
	transition: border-color var(--tx-fast) var(--tx-ease), color var(--tx-fast) var(--tx-ease), opacity var(--tx-fast) var(--tx-ease), transform var(--tx-fast) var(--tx-ease);
}

.th-home .th-icon-btn:active {
	transform: scale(0.94);
}

.th-home .th-icon-btn:disabled {
	opacity: 0.35;
	cursor: default;
}

@media (hover: hover) and (pointer: fine) {
	.th-home .th-btn--primary:hover {
		border-color: var(--tx-green-hover);
		background: var(--tx-green-hover);
	}

	.th-home .th-btn--outline:hover {
		border-color: var(--tx-green);
		color: var(--tx-white);
	}

	.th-home .th-btn--quiet:hover {
		color: var(--tx-white);
		text-decoration-color: var(--tx-green);
	}

	.th-home .th-icon-btn:not(:disabled):hover {
		border-color: var(--tx-green);
		color: var(--tx-green);
	}
}

/* --- Naglowek strony z filmem -------------------------------------------- */

/* Pelna wysokosc ekranu: film jest pionowy na telefonie i poziomy od 768 px, wiec przy
   object-fit: cover ucina sie najwyzej troche z bokow, a gora i dol kadru zostaja. */
.th-home .th-hero {
	position: relative;
	isolation: isolate;
	display: flex;
	flex-direction: column;
	min-height: 100vh;
	min-height: 100svh;
	padding-top: var(--th-header-clear);
	overflow: hidden;
	background: var(--tx-coal-950);
	color: var(--tx-text);
}

.th-home .th-hero__media {
	position: absolute;
	inset: 0;
	z-index: -1;
}

.th-home .th-hero__poster,
.th-home .th-hero__video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
}

.th-home .th-hero__video {
	opacity: 0;
	transition: opacity 700ms var(--tx-ease);
}

.th-home .th-hero__video.is-playing {
	opacity: 1;
}

.th-home .th-hero__scrim {
	position: absolute;
	inset: 0;
	background:
		linear-gradient(180deg, rgb(9 11 8 / 0.82) 0%, rgb(9 11 8 / 0.5) 28%, rgb(9 11 8 / 0.62) 58%, rgb(9 11 8 / 0.94) 100%);
}

.th-home .th-hero__inner {
	display: grid;
	flex: 1 0 auto;
	align-content: center;
	gap: 28px;
	padding-block: 20px 28px;
}

/* Ocena Google pod nazwa firmy: znak G w bialym kolku, gwiazdki, srednia i liczba opinii. */
.th-home .th-hero__rating {
	display: inline-flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 12px;
	min-height: 44px;
	margin-top: 16px;
	color: var(--tx-white);
	text-decoration: none;
}

.th-home .th-hero__g {
	display: inline-grid;
	place-items: center;
	flex: none;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	background: var(--tx-white);
	box-shadow: 0 2px 8px rgb(0 0 0 / 0.35);
}

.th-home .th-hero__stars {
	display: inline-flex;
	gap: 3px;
	color: var(--tx-star);
}

.th-home .th-hero__stars .th-star {
	width: 22px;
	height: 22px;
}

.th-home .th-hero__score {
	font-size: 1.0625rem;
	text-shadow: 0 1px 8px rgb(0 0 0 / 0.6);
}

.th-home .th-hero__score strong {
	font-family: var(--tx-font-display);
	font-weight: 700;
}

.th-home .th-hero__rating:focus-visible {
	outline-offset: 4px;
	border-radius: 999px;
}

@media (hover: hover) and (pointer: fine) {
	.th-home .th-hero__rating:hover .th-hero__score {
		text-decoration: underline;
		text-decoration-color: var(--tx-green);
		text-underline-offset: 4px;
	}
}

.th-home .th-hero__place {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	color: var(--tx-text);
	font-family: var(--tx-font-display);
	font-size: var(--tx-fs-label);
	font-weight: 600;
}

.th-home .th-hero__place .th-icon {
	width: 18px;
	height: 18px;
	color: var(--tx-green);
}

.th-home .th-hero__title {
	display: flex;
	flex-wrap: wrap;
	column-gap: 0.24em;
	margin-top: 14px;
	font-size: var(--tx-fs-display);
	font-weight: 700;
	line-height: 0.98;
	letter-spacing: -0.025em;
}

.th-home .th-hero__accent {
	color: var(--tx-green);
}

.th-home .th-hero__lead {
	max-width: 34ch;
	margin-top: 14px;
	color: var(--tx-text);
	font-size: var(--tx-fs-lead);
	line-height: 1.55;
}

.th-home .th-hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin-top: 26px;
}

.th-home .th-hero__actions .th-btn {
	flex: 1 1 150px;
}

/* Glowny przycisk wersalikami, szerszy i z wiekszym napisem (decyzja wlasciciela 2026-10-10). */
.th-home .th-hero__actions .th-btn--primary {
	font-size: 1.1875rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.th-home .th-hero__actions .th-btn--primary .th-icon {
	width: 22px;
	height: 22px;
}

/* Karta telefonu */

.th-home .th-call {
	padding: clamp(20px, 2.2vw, 28px);
	border: 1px solid var(--tx-line);
	border-radius: var(--tx-r-lg);
	background: rgb(14 17 12 / 0.9);
	box-shadow: var(--tx-shadow-float);
}

.th-home .th-call__label {
	color: var(--tx-green);
	font-family: var(--tx-font-display);
	font-size: var(--tx-fs-label);
	font-weight: 600;
}

.th-home .th-call__number {
	display: flex;
	align-items: center;
	gap: 14px;
	min-height: 56px;
	margin-top: 10px;
	color: var(--tx-white);
	font-family: var(--tx-font-display);
	font-size: clamp(1.875rem, 1.6rem + 1.1vw, 2.375rem);
	font-weight: 700;
	line-height: 1;
	letter-spacing: -0.01em;
	font-variant-numeric: tabular-nums;
}

.th-home .th-call__icon {
	display: inline-grid;
	flex: none;
	place-items: center;
	width: 52px;
	height: 52px;
	border-radius: 50%;
	background: var(--tx-green);
	color: var(--tx-on-green);
	transition: background-color var(--tx-fast) var(--tx-ease), transform var(--tx-fast) var(--tx-ease);
}

.th-home .th-call__icon .th-icon {
	width: 24px;
	height: 24px;
}

.th-home .th-call__number:active .th-call__icon {
	transform: scale(0.94);
}

.th-home .th-call__hours {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-top: 14px;
	color: var(--tx-text-2);
	font-size: var(--tx-fs-small);
	font-weight: 600;
}

.th-home .th-call__rows {
	display: grid;
	margin-top: 18px;
	border-top: 1px solid var(--tx-line);
}

.th-home .th-call__row {
	display: grid;
	gap: 6px;
	padding-block: 14px;
	border-bottom: 1px solid var(--tx-line);
}

.th-home .th-call__row dt {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	color: var(--tx-text-2);
	font-size: var(--tx-fs-small);
	font-weight: 600;
}

.th-home .th-call__row dt .th-icon {
	width: 18px;
	height: 18px;
	color: var(--tx-green);
}

.th-home .th-call__row dd {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px 12px;
	padding-left: 26px;
	color: var(--tx-white);
	font-family: var(--tx-font-display);
	font-size: 1rem;
	font-weight: 600;
	line-height: 1.35;
}

.th-home .th-call__row dd a {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	margin-block: -8px;
	font-size: 1.125rem;
	font-variant-numeric: tabular-nums;
}

.th-home .th-call__row dd small {
	padding: 2px 9px;
	border-radius: var(--tx-r-pill);
	background: var(--tx-green-soft);
	color: var(--tx-green);
	font-size: 0.8125rem;
	font-weight: 600;
}

.th-home .th-call__map {
	width: 100%;
	margin-top: 18px;
}

/* Telefon (do 767 px): karta z samym numerem glownym i godzinami, nizsza
   i przejrzystsza, zeby film za nia byl widoczny (decyzja wlasciciela 2026-10-10).
   Telefon dodatkowy, adres odbioru i trasa sa w stopce i na stronie kontaktu;
   GA4 08-10..10-09: na stronie glownej na telefonie 49 klikniec w telefon, 2 w trase. */
@media (max-width: 767px) {
	.th-home .th-hero__inner {
		gap: 24px;
	}

	.th-home .th-call {
		padding: 16px 18px 18px;
		background: rgb(14 17 12 / 0.76);
	}

	.th-home .th-call__number {
		gap: 12px;
		min-height: 52px;
		margin-top: 8px;
		font-size: 1.75rem;
	}

	.th-home .th-call__icon {
		width: 48px;
		height: 48px;
	}

	.th-home .th-call__icon .th-icon {
		width: 22px;
		height: 22px;
	}

	.th-home .th-call__hours {
		margin-top: 10px;
	}

	.th-home .th-call__rows,
	.th-home .th-call__map {
		display: none;
	}
}

/* Szybkie informacje pod naglowkiem */

.th-home .th-trust {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	border-top: 1px solid var(--tx-line);
}

.th-home .th-trust li {
	display: flex;
	align-items: center;
	gap: 10px;
	min-height: 64px;
	padding: 14px 10px 14px 0;
	color: var(--tx-text);
	font-family: var(--tx-font-display);
	font-size: var(--tx-fs-small);
	font-weight: 600;
	line-height: 1.3;
}

.th-home .th-trust li:nth-child(n + 3) {
	border-top: 1px solid var(--tx-line);
}

.th-home .th-trust .th-icon {
	width: 22px;
	height: 22px;
	color: var(--tx-green);
}

@media (min-width: 600px) {
	.th-home .th-call__rows {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		column-gap: 24px;
	}
}

@media (min-width: 1024px) {
	.th-home .th-hero__scrim {
		background:
			linear-gradient(90deg, rgb(9 11 8 / 0.9) 0%, rgb(9 11 8 / 0.72) 42%, rgb(9 11 8 / 0.42) 72%, rgb(9 11 8 / 0.55) 100%),
			linear-gradient(0deg, rgb(9 11 8 / 0.92) 0%, rgb(9 11 8 / 0) 30%),
			linear-gradient(180deg, rgb(9 11 8 / 0.7) 0%, rgb(9 11 8 / 0) 22%);
	}

	.th-home .th-hero__inner {
		grid-template-columns: minmax(0, 1fr) minmax(380px, 420px);
		align-items: center;
		gap: 56px;
		min-height: min(600px, calc(100svh - var(--th-header-clear) - 88px));
		padding-block: 24px 48px;
	}

	.th-home .th-hero__lead {
		max-width: 40ch;
	}

	/* Obok karty telefonu napis "TOMEX Opal" ma sie miescic w jednym wierszu. */
	.th-home .th-hero__title {
		font-size: min(var(--tx-fs-display), 6.2vw);
	}

	.th-home .th-hero__actions .th-btn {
		flex: 0 0 auto;
	}

	.th-home .th-hero__actions .th-btn--primary {
		min-width: 300px;
		padding-inline: 2.2em;
	}

	.th-home .th-call__rows {
		grid-template-columns: 1fr;
	}

	.th-home .th-trust {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}

	.th-home .th-trust li {
		justify-content: center;
		min-height: 76px;
		padding: 16px 20px;
		font-size: 1rem;
	}

	.th-home .th-trust li:nth-child(n + 3) {
		border-top: 0;
	}

	.th-home .th-trust li + li {
		border-left: 1px solid var(--tx-line);
	}
}

/* --- Asortyment ---------------------------------------------------------- */

.th-home .th-offer {
	position: relative;
	isolation: isolate;
	overflow: clip;
	background: var(--tx-coal-950);
}

/* Tlo z brylami wegla (oryginalne tlo sekcji, prosba wlasciciela 2026-10-10).
   Obraz rozciagniety na cala wysoka sekcje pokazywal tylko pusty srodek, a ciemna
   warstwa 88-98% zakrywala reszte. Teraz ten sam obraz stoi w naturalnych
   proporcjach u gory, odbity w poziomie (bryly w prawym gornym rogu, z dala od
   naglowka). U dolu od 2026-10-11 osobne tlo "pas-dol" (pryzma wzdluz dolnej
   krawedzi, wznoszaca sie w prawo, obok ostatniego kafelka pelletu) zamiast
   obroconej kopii, w ktorej swiatlo padalo od dolu. Obrazy sa ciemne same z siebie,
   maska tylko wygasza ich krawedz w strone srodka sekcji. */
.th-home .th-offer::before,
.th-home .th-offer::after {
	content: "";
	position: absolute;
	right: 0;
	z-index: -1;
	width: max(100%, 760px);
	aspect-ratio: 1900 / 1069;
	background: var(--th-offer-bg-sm, none) center / cover no-repeat;
	pointer-events: none;
	-webkit-mask-image: linear-gradient(180deg, #000 0%, #000 42%, transparent 96%);
	mask-image: linear-gradient(180deg, #000 0%, #000 42%, transparent 96%);
}

.th-home .th-offer::before {
	top: 0;
	transform: scaleX(-1);
}

.th-home .th-offer::after {
	bottom: 0;
	background-image: var(--th-offer-dol-sm, none);
	/* Dol tez gasnie: bez tego granica z sekcja o firmie przecinala bryly w pol. */
	-webkit-mask-image: linear-gradient(0deg, transparent 0%, #000 20%, #000 46%, transparent 96%);
	mask-image: linear-gradient(0deg, transparent 0%, #000 20%, #000 46%, transparent 96%);
}

@media (min-width: 1024px) {
	.th-home .th-offer::before {
		background-image: var(--th-offer-bg, none);
	}

	.th-home .th-offer::after {
		background-image: var(--th-offer-dol, none);
	}
}

/* Telefon i tablet: kafelki stoja po dwa i zakrywaja prawie cala szerokosc, wiec
   bryly wegla musza lezec tam, gdzie widac tlo: w pasie miedzy grupami i obok tytulu
   grupy, po prawej stronie (tytul jest po lewej). Ten sam plik co wyzej, bez dodatkowych
   bajtow (przeglad 2026-10-10). Bez odbicia i bez filtra: polaczenie transform z filter
   ucinalo obraz w polowie ekranu. Bryly z prawego dolnego rogu obrazu (od ok. 55 procent
   wysokosci) trafiaja w pas: obraz 760 px ma 428 px wysokosci, gora 323 px nad grupa. */
@media (max-width: 1023px) {
	.th-home .th-group--workowany,
	.th-home .th-group--pellet {
		position: relative;
	}

	.th-home .th-group--workowany::before,
	.th-home .th-group--pellet::before {
		content: "";
		position: absolute;
		top: -323px;
		right: calc((100% - 100vw) / 2);
		z-index: -1;
		width: 760px;
		aspect-ratio: 1900 / 1069;
		background: var(--th-offer-bg-sm, none) center / cover no-repeat;
		pointer-events: none;
		-webkit-mask-image: linear-gradient(180deg, transparent 0%, transparent 45%, #000 60%, #000 86%, transparent 100%);
		mask-image: linear-gradient(180deg, transparent 0%, transparent 45%, #000 60%, #000 86%, transparent 100%);
	}
}

/* Naglowek asortymentu na srodku, nad kafelkami kategorii (prosba wlasciciela 2026-10-11). */
.th-home .th-offer__head {
	margin-inline: auto;
	text-align: center;
}

.th-home .th-offer__head .th-lead {
	margin-inline: auto;
	text-wrap: balance;
}

/* --- Kategorie w asortymencie ----------------------------------------------
   Te same kafelki co w sklepie (sklep.css, .tk-dept; wymiary, pismo i kolko wyboru przepisane 1:1):
   telefon 3 w rzedzie (5 = 3 + 2, wszystkie widoczne od razu), od 768 px piec w jednym rzedzie.
   Tu wybor nie przenosi na podstrone, tylko pokazuje grupy w tej sekcji (prosba wlasciciela 2026-10-11).
   Kafelek to natywne pole wyboru (radio: klik, Tab i strzalki), grupy chowa :has(), bez JavaScriptu.
   Przegladarka bez :has() nie pokazuje kafelkow, tylko wszystkie produkty jak dotad.
   Jedyna roznica wobec sklepu: wybrany kafelek (w kolorze wegla) ma zielona obwodke, bo na ciemnym
   tle sekcji zlewalby sie z tlem. Zmiana wygladu kafelkow: w obu plikach naraz. */
.th-home .th-cats {
	display: none;
	min-width: 0;
	margin: clamp(24px, 3.5vw, 36px) 0 0;
	padding: 0;
	border: 0;
}

@supports selector(:has(*)) {
	.th-home .th-cats {
		display: block;
	}
}

.th-home .th-sr {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

.th-home .th-cats__list {
	--th-cats-gap: 8px;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--th-cats-gap);
}

.th-home .th-cat {
	position: relative;
	display: flex;
	flex: 0 0 max(6rem, calc((100% - 2 * var(--th-cats-gap)) / 3));
	flex-direction: column;
	align-items: center;
	gap: 6px;
	min-height: 44px;
	padding: 12px 6px 10px;
	border: 1px solid var(--tx-line-light);
	border-radius: var(--tx-r-lg);
	background: #ffffff;
	color: var(--tx-ink);
	text-align: center;
	cursor: pointer;
	box-shadow: 0 1px 2px rgb(0 0 0 / 0.25);
	transition:
		border-color var(--tx-fast) var(--tx-ease),
		background-color var(--tx-fast) var(--tx-ease),
		color var(--tx-fast) var(--tx-ease),
		transform var(--tx-fast) var(--tx-ease);
}

.th-home .th-cat:active {
	transform: scale(0.97);
}

/* Pole wyboru przykrywa caly kafelek (przezroczyste): klik w dowolne miejsce, a czytnik ekranu
   obrysowuje caly kafelek. Widoczny fokus rysuje kafelek, ponizej. */
.th-home .th-cat__input {
	position: absolute;
	inset: 0;
	z-index: 1;
	width: 100%;
	height: 100%;
	margin: 0;
	border-radius: inherit;
	opacity: 0;
	cursor: pointer;
}

.th-home .th-cat:has(.th-cat__input:focus-visible) {
	outline: 3px solid var(--tx-green);
	outline-offset: 3px;
}

/* Kolko wyboru w lewym gornym rogu. */
.th-home .th-cat__radio {
	position: absolute;
	top: 8px;
	left: 8px;
	width: 16px;
	height: 16px;
	border: 2px solid var(--tx-ink-2);
	border-radius: 50%;
	background: #ffffff;
	transition: border-color var(--tx-fast) var(--tx-ease), box-shadow var(--tx-fast) var(--tx-ease);
}

/* Grafika kategorii bez tla stoi wprost na kafelku. */
.th-home .th-cat__well {
	display: block;
	flex: none;
	width: 56px;
	height: 56px;
}

.th-home .th-cat__img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.th-home .th-cat__text {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

.th-home .th-cat__name {
	font-family: var(--tx-font-display);
	font-size: 0.875rem;
	font-weight: 600;
	line-height: 1.2;
	text-wrap: balance;
}

.th-home .th-cat__count {
	color: var(--tx-ink-2);
	font-size: 0.8125rem;
	line-height: 1.3;
	font-variant-numeric: tabular-nums;
}

/* Wybrana kategoria: kafelek w kolorze wegla, kolko wypelnione zielenia. */
.th-home .th-cat:has(.th-cat__input:checked) {
	border-color: var(--tx-green);
	background: var(--tx-coal-900);
	color: var(--tx-white);
	box-shadow: 0 10px 22px -14px rgb(0 0 0 / 0.8);
}

.th-home .th-cat:has(.th-cat__input:checked) .th-cat__count {
	color: var(--tx-green);
}

.th-home .th-cat:has(.th-cat__input:checked) .th-cat__radio {
	border-color: var(--tx-green);
	background: var(--tx-coal-900);
	box-shadow: inset 0 0 0 3px var(--tx-coal-900), inset 0 0 0 10px var(--tx-green);
}

@media (hover: hover) and (pointer: fine) {
	.th-home .th-cat:not(:has(.th-cat__input:checked)):hover .th-cat__radio {
		border-color: var(--tx-green-ink);
	}
}

@media (min-width: 768px) {
	.th-home .th-cats__list {
		--th-cats-gap: 12px;
	}

	.th-home .th-cat {
		flex: 0 1 calc((100% - 4 * var(--th-cats-gap)) / 5);
		gap: 8px;
		min-width: 7rem;
		max-width: 12rem;
		padding: 14px 10px 12px;
	}

	.th-home .th-cat__radio {
		top: 10px;
		left: 10px;
		width: 18px;
		height: 18px;
	}

	.th-home .th-cat__well {
		width: 64px;
		height: 64px;
	}

	.th-home .th-cat__name {
		font-size: 0.9375rem;
	}
}

/* Tryb wysokiego kontrastu (Windows): system usuwa tla i cienie, wiec wlasne kolko i kolor wybranego
   kafelka znikaja. Wraca zwykle pole wyboru w rogu, a wybrany kafelek ma grubsza ramke. */
@media (forced-colors: active) {
	.th-home .th-cat__input {
		inset: auto;
		top: 8px;
		left: 8px;
		width: 18px;
		height: 18px;
		opacity: 1;
	}

	.th-home .th-cat__radio {
		display: none;
	}

	.th-home .th-cat:has(.th-cat__input:checked) {
		border-width: 3px;
	}
}

/* Widoczne grupy dla kazdego wyboru ("Wszystkie produkty" pokazuje wszystkie).
   Nowa grupa w assortment.php = nowy kafelek i nowa linia tutaj. */
@supports selector(:has(*)) {
	.th-home .th-offer:has(.th-cat__input[value="wegiel"]:checked) .th-group--pellet,
	.th-home .th-offer:has(.th-cat__input[value="luzem"]:checked) .th-group:not(.th-group--luzem),
	.th-home .th-offer:has(.th-cat__input[value="workowany"]:checked) .th-group:not(.th-group--workowany),
	.th-home .th-offer:has(.th-cat__input[value="pellet"]:checked) .th-group:not(.th-group--pellet) {
		display: none;
	}
}

/* Po zmianie wyboru grupa, ktora sie pojawia, wchodzi lagodnie (240 ms, 8 px w gore), zeby produkty
   nie podmienialy sie skokiem. Pokazanie ukrytej grupy uruchamia animacje od nowa samo; grupa, ktora
   byla juz widoczna nizej i wskakuje na gore, dostaje inna nazwe animacji (ten sam ruch), bo tylko
   zmiana nazwy gra ja ponownie. Bez "both": po animacji nie zostaje warstwa, ktora zmienialaby
   kolejnosc rysowania tla grupy. Przy pierwszym wczytaniu animacja mija poza ekranem. */
@media (prefers-reduced-motion: no-preference) {
	.th-home .th-group {
		animation: th-grupa-wejscie var(--tx-base) var(--tx-ease) backwards;
	}

	.th-home .th-offer:has(.th-cat__input[value="workowany"]:checked) .th-group--workowany,
	.th-home .th-offer:has(.th-cat__input[value="pellet"]:checked) .th-group--pellet {
		animation-name: th-grupa-wejscie-2;
	}
}

@keyframes th-grupa-wejscie {
	from { opacity: 0; transform: translateY(8px); }
	to { opacity: 1; transform: none; }
}

@keyframes th-grupa-wejscie-2 {
	from { opacity: 0; transform: translateY(8px); }
	to { opacity: 1; transform: none; }
}

.th-home .th-group {
	margin-top: clamp(40px, 5vw, 64px);
}

.th-home .th-group__head {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 14px;
	padding-bottom: 16px;
	margin-bottom: 16px;
	border-bottom: 1px solid var(--tx-line);
}

.th-home .th-group__icon {
	display: inline-grid;
	flex: none;
	place-items: center;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: var(--tx-green-soft);
	color: var(--tx-green);
}

.th-home .th-group__icon .th-icon {
	width: 22px;
	height: 22px;
}

.th-home .th-group__title {
	font-size: var(--tx-fs-h3);
	font-weight: 700;
	line-height: 1.2;
	text-transform: lowercase;
}

.th-home .th-group__title::first-letter {
	text-transform: uppercase;
}

.th-home .th-group__note {
	flex-basis: 100%;
	color: var(--tx-text-2);
	font-size: var(--tx-fs-small);
	line-height: 1.4;
}

.th-home .th-group__empty {
	color: var(--tx-text-2);
}

/* Kafelki produktow: biale na ciemnym tle sekcji (decyzja wlasciciela 2026-10-10).
   Kolejnosc waznosci: zdjecie, nazwa, cena, "Zobacz produkt", telefon.
   Telefon 2 w rzedzie, tablet i komputer 4 w rzedzie. */

.th-home .th-products {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 12px;
}

/* Bardzo waski ekran albo tekst powiekszony w telefonie (np. 200% na 390 px, ekran
   zewnetrzny skladanego telefonu 280 px): jeden kafelek w rzedzie, zeby nazwy i ceny
   miescily sie w calosci (test najgorszych danych, 2026-10-10). */
@media (max-width: 299px) {
	.th-home .th-products {
		grid-template-columns: minmax(0, 1fr);
	}
}

@media (min-width: 640px) {
	.th-home .th-group__note {
		flex-basis: auto;
		margin-left: auto;
		text-align: right;
	}
}

@media (min-width: 768px) {
	.th-home .th-products {
		grid-template-columns: repeat(4, minmax(0, 1fr));
		gap: 16px;
	}
}

@media (min-width: 1280px) {
	.th-home .th-products {
		gap: 20px;
	}
}

.th-home .th-product {
	container-type: inline-size;
	position: relative;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	border-radius: var(--tx-r-lg);
	background: #ffffff;
	color: var(--tx-ink);
	box-shadow: 0 1px 2px rgb(0 0 0 / 0.25), 0 20px 40px -26px rgb(0 0 0 / 0.9);
	transition: transform var(--tx-base) var(--tx-ease), box-shadow var(--tx-base) var(--tx-ease);
}

.th-home .th-product__media {
	display: block;
	aspect-ratio: 1;
	overflow: hidden;
	background: #ffffff;
}

.th-home .th-product__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 600ms var(--tx-ease), filter var(--tx-base) var(--tx-ease);
}

.th-home .th-product__fallback {
	display: grid;
	place-items: center;
	width: 100%;
	height: 100%;
	color: var(--tx-line-light);
}

.th-home .th-product__fallback .th-icon {
	width: 40%;
	height: 40%;
}

.th-home .th-product__body {
	display: flex;
	flex: 1;
	flex-direction: column;
	min-width: 0;
	padding: 14px 12px 14px;
	border-top: 1px solid var(--tx-line-light);
}

.th-home .th-product__name {
	color: var(--tx-ink);
	font-size: 1rem;
	font-size: clamp(1rem, 0.8rem + 2.6cqi, 1.25rem);
	font-weight: 600;
	line-height: 1.25;
}

.th-home .th-product__name a {
	color: var(--tx-ink);
	overflow-wrap: anywhere;
}

.th-home .th-product__stock {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	margin-top: 6px;
	color: var(--tx-alert-ink);
	font-size: 0.875rem;
	font-weight: 700;
	line-height: 1.3;
}

.th-home .th-product__stock::before {
	content: "";
	flex: none;
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: currentColor;
}

.th-home .th-product__price {
	margin-top: 10px;
	color: var(--tx-green-ink);
	font-family: var(--tx-font-display);
	line-height: 1.1;
	font-variant-numeric: tabular-nums;
}

.th-home .th-product__amount {
	font-size: 1.375rem;
	font-size: clamp(1.375rem, 0.95rem + 5.4cqi, 2.125rem);
	font-weight: 700;
	letter-spacing: -0.01em;
}

.th-home .th-product__amount,
.th-home .th-product__unit {
	white-space: nowrap;
}

.th-home .th-product__unit {
	font-size: 0.9375rem;
	font-size: clamp(0.9375rem, 0.8rem + 1.6cqi, 1.125rem);
	font-weight: 600;
}

.th-home .th-product__meta {
	display: flex;
	flex-direction: column;
	gap: 2px;
	margin-top: 6px;
	color: var(--tx-ink-2);
	font-size: 0.875rem;
	line-height: 1.4;
}

.th-home .th-product__bag {
	color: var(--tx-ink);
	font-weight: 700;
}

.th-home .th-product__actions {
	display: grid;
	gap: 8px;
	margin-top: auto;
	padding-top: 14px;
}

.th-home .th-product__cta {
	width: 100%;
	min-height: 48px;
	padding-inline: 0.6em;
	border-color: var(--tx-green-press);
	font-size: 0.9375rem;
}

.th-home .th-product__call {
	width: 100%;
	min-height: 44px;
	padding-inline: 0.6em;
	gap: 0.45em;
	border-color: var(--tx-line-light);
	background: transparent;
	color: var(--tx-ink);
	font-size: 0.9375rem;
	font-variant-numeric: tabular-nums;
}

.th-home .th-product__call .th-icon {
	width: 18px;
	height: 18px;
	color: var(--tx-green-ink);
}

.th-home .th-product.is-unavailable .th-product__img {
	filter: grayscale(0.7);
	opacity: 0.85;
}

/* Waski kafelek (telefon 360 px): przyciski musza sie zmiescic w jednej linii. */
@container (max-width: 179px) {
	.th-home .th-product__cta,
	.th-home .th-product__call {
		padding-inline: 0.45em;
		font-size: 0.875rem;
	}

	.th-home .th-product__call .th-icon {
		width: 16px;
		height: 16px;
	}
}

@container (min-width: 260px) {
	.th-home .th-product__body {
		padding: 18px 20px 20px;
	}

	.th-home .th-product__meta {
		font-size: 0.9375rem;
	}

	.th-home .th-product__cta {
		font-size: 1rem;
	}
}

@media (hover: hover) and (pointer: fine) {
	.th-home .th-product:hover {
		box-shadow: 0 1px 2px rgb(0 0 0 / 0.25), 0 28px 50px -24px rgb(0 0 0 / 0.95);
		transform: translateY(-3px);
	}

	.th-home .th-product:hover .th-product__img {
		transform: scale(1.04);
	}

	.th-home .th-product__name a:hover {
		color: var(--tx-green-ink);
	}

	.th-home .th-product__call:hover {
		border-color: var(--tx-ink);
		color: var(--tx-ink);
	}
}

/* --- O firmie ------------------------------------------------------------ */
/* Zbudowane od nowa wedlug wskazowek wlasciciela (2026-10-10): naglowek na srodku
   z "uczciwy opal" na zielono i odrecznym podkresleniem, os czasu 1996 -> Dzis przez
   cala szerokosc (telefon: z gory na dol), cytat wlasciciela w kroju cytatowym,
   liczby na tle wegla w zielonym swietle. Ruch: home.js i koniec tego pliku. */

.th-home .th-about {
	--th-story-gap: clamp(20px, 3.4vw, 56px);
	--th-year: clamp(3rem, 1.9rem + 4.6vw, 6.25rem);
	--th-about-pb: var(--tx-section);
	position: relative;
	isolation: isolate;
	overflow: clip;
	padding-bottom: var(--th-about-pb);
	background: var(--tx-coal-900);
}

/* Tlo pod cytatem i liczbami (wskazowka wlasciciela 2026-10-11): bez zdjecia wegla, zeby nic nie
   odciagalo uwagi od scen przy liczbach. Kolor sekcji, delikatna zielona poswiata za scenami (jak
   swiatlo nad placem) i dol sekcji przechodzacy w najciemniejszy wegiel. Warstwa siega krawedzi
   ekranu i dolnej krawedzi sekcji. */
.th-home .th-about__ground {
	position: relative;
	isolation: isolate;
}

.th-home .th-about__ground::before {
	content: "";
	position: absolute;
	top: 0;
	right: calc((100% - 100vw) / 2);
	bottom: calc(var(--th-about-pb) * -1);
	left: calc((100% - 100vw) / 2);
	z-index: -1;
	background:
		radial-gradient(ellipse 80% 42% at 50% 68%, rgb(132 196 71 / 0.06), transparent 70%),
		linear-gradient(180deg, transparent 30%, var(--tx-coal-950));
	pointer-events: none;
}

@media (min-width: 768px) {
	.th-home .th-about__ground::before {
		background:
			radial-gradient(ellipse 48% 38% at 50% 76%, rgb(132 196 71 / 0.075), transparent 72%),
			linear-gradient(180deg, transparent 30%, var(--tx-coal-950));
	}
}

/* Naglowek */

.th-home .th-about__head {
	display: grid;
	justify-items: center;
	max-width: 54rem;
	margin-inline: auto;
	text-align: center;
}

.th-home .th-about__title {
	margin-top: 18px;
	font-size: clamp(2.25rem, 1.4rem + 3.4vw, 4.25rem);
	font-weight: 700;
	line-height: 1.06;
	letter-spacing: -0.022em;
}

.th-home .th-about__principle {
	color: var(--tx-green);
	font-weight: inherit;
}

/* "uczciwy opal": kreska markera pod slowami, za tekstem */
.th-home .th-mark {
	position: relative;
	display: inline-block;
	isolation: isolate;
}

/* Kreska pisaka: grubsza na poczatku, cienka z podbiciem na koncu, pod linia
   pisma (dotyka tylko koncow ogonkow "y" i "p"), prawie pelna zielen. */
.th-home .th-mark__stroke {
	position: absolute;
	bottom: -0.42em;
	left: -3%;
	z-index: -1;
	width: 106%;
	height: 0.28em;
	overflow: visible;
	fill: var(--tx-green);
	opacity: 0.9;
}

.th-home .th-nowrap {
	white-space: nowrap;
}

/* Wstep pod osia czasu: opowiada to, co widac na zdjeciach, i prowadzi do cytatu. */
.th-home .th-about__lead {
	max-width: 34ch;
	margin: clamp(36px, 5vw, 64px) 0 0;
}

@media (min-width: 768px) {
	.th-home .th-about__lead {
		max-width: 60ch;
		margin-inline: auto;
		text-align: center;
	}
}

/* Os czasu. Oba zdjecia maja te same proporcje 5:4, wiec wiersze z rokiem leza
   na tej samej wysokosci. Komputer: jedna linia przez cala szerokosc na wysokosci
   lat, "1996" i "Dzis" stoja na niej jak etykiety (tlo sekcji pod napisem przerywa
   linie), drobne kreski to kolejne lata. Telefon: zdjecia jedno pod drugim, linia
   z lewej strony z gory na dol. */

.th-home .th-story {
	--th-rail: 30px;
	--th-between: 96px;
	--th-cap: 32px;
	container-type: inline-size;
	position: relative;
	display: grid;
	margin-top: clamp(48px, 6vw, 84px);
}

.th-home .th-story__item {
	position: relative;
	margin-left: var(--th-rail);
}

/* Cien krotszy niz --tx-shadow-photo: konczy sie przed wierszem z rokiem
   (--th-cap), inaczej przyciemnialby pas, na ktorym napisy przerywaja linie. */
.th-home .th-story__photo {
	position: relative;
	overflow: hidden;
	border-radius: var(--tx-r-lg);
	background: var(--tx-coal-800);
	box-shadow: 0 2px 6px rgb(0 0 0 / 0.28), 0 20px 34px -22px rgb(0 0 0 / 0.8);
}

.th-home .th-story__photo img {
	width: 100%;
	aspect-ratio: 5 / 4;
	object-fit: cover;
}

/* 1996: zdjecie archiwalne, czarno-biale, z winieta i delikatnym ziarnem
   (ziarno maskuje tez powiekszenie zdjecia 600 px na duzym ekranie). */
.th-home .th-story__item--then .th-story__photo img {
	object-position: 50% 40%;
	filter: grayscale(1) contrast(1.06);
}

.th-home .th-story__item--then .th-story__photo::before,
.th-home .th-story__item--then .th-story__photo::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
}

.th-home .th-story__item--then .th-story__photo::before {
	box-shadow: inset 0 0 90px rgb(0 0 0 / 0.45);
}

.th-home .th-story__item--then .th-story__photo::after {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .6 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
	opacity: 0.2;
}

.th-home .th-story__item--now .th-story__photo img {
	object-position: 74% 38%;
}

.th-home .th-story__caption {
	display: grid;
	justify-items: start;
	gap: 6px;
	padding-top: var(--th-cap);
}

.th-home .th-story__year {
	position: relative;
	z-index: 1;
	color: var(--tx-white);
	font-family: var(--tx-font-display);
	font-size: var(--th-year);
	font-weight: 700;
	line-height: 1;
	letter-spacing: -0.04em;
}

.th-home .th-story__item--now .th-story__year {
	color: var(--tx-green);
}

.th-home .th-story__desc {
	color: var(--tx-text-2);
	font-size: var(--tx-fs-body);
	line-height: 1.45;
}

/* Telefon: linia przy lewej krawedzi. Kropka przy "1996", odcinek do napisu
   "30 lat pozniej", drugi odcinek do strzalki przy "Dzis". */
.th-home .th-story__item::after {
	content: "";
	position: absolute;
	left: calc(var(--th-rail) * -1 + 7px);
	width: 2px;
	border-radius: 2px;
	transform-origin: 50% 0;
}

.th-home .th-story__item--then::after {
	top: calc((100cqw - var(--th-rail)) * 0.8 + var(--th-cap) + var(--th-year) / 2);
	bottom: calc(var(--th-between) * -1);
	background: linear-gradient(180deg, rgb(232 239 224 / 0.32), rgb(132 196 71 / 0.55));
}

.th-home .th-story__item--now::after {
	top: 0;
	height: calc((100cqw - var(--th-rail)) * 0.8 + var(--th-cap) + var(--th-year) / 2 - 10px);
	background: linear-gradient(180deg, rgb(132 196 71 / 0.55), var(--tx-green));
}

.th-home .th-story__year::before {
	content: "";
	position: absolute;
	top: 50%;
}

.th-home .th-story__item--then .th-story__year::before {
	left: calc(var(--th-rail) * -1);
	width: 16px;
	height: 16px;
	margin-top: -8px;
	border: 2px solid rgb(232 239 224 / 0.6);
	border-radius: 50%;
	background: var(--tx-coal-900);
}

.th-home .th-story__item--now .th-story__year::before {
	left: calc(var(--th-rail) * -1 + 1px);
	width: 14px;
	height: 12px;
	margin-top: -12px;
	background: var(--tx-green);
	clip-path: polygon(0 0, 100% 0, 50% 100%);
}

.th-home .th-story__span {
	display: flex;
	align-items: center;
	justify-self: start;
	gap: 6px;
	height: 40px;
	margin: 28px 0 28px var(--th-rail);
	padding: 0 16px;
	border: 1px solid var(--tx-green-line);
	border-radius: var(--tx-r-pill);
	background: var(--tx-coal-900);
	color: var(--tx-text-2);
	font-family: var(--tx-font-display);
	font-size: 0.875rem;
	font-weight: 600;
	line-height: 1;
	white-space: nowrap;
}

.th-home .th-story__span strong {
	color: var(--tx-green);
	font-size: 1.125rem;
}

/* Od 768 px: zdjecia obok siebie, strzalka czasu od lewej do prawej. */
@media (min-width: 768px) {
	.th-home .th-story {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		column-gap: var(--th-story-gap);
	}

	.th-home .th-story__item {
		margin-left: 0;
	}

	.th-home .th-story__item::after,
	.th-home .th-story__item--then .th-story__year::before {
		display: none;
	}

	/* Linia czasu przez cala szerokosc, na srodku wysokosci lat;
	   kreski: jedna na kazdy rok dzialalnosci (--th-years z PHP). */
	.th-home .th-story::before {
		content: "";
		position: absolute;
		top: calc((100cqw - var(--th-story-gap)) / 2 * 0.8 + var(--th-cap) + var(--th-year) / 2 - 5px);
		right: 0;
		left: 0;
		height: 10px;
		background:
			linear-gradient(90deg, rgb(232 239 224 / 0.28), rgb(132 196 71 / 0.6) 55%, var(--tx-green)) 0 50% / 100% 2px no-repeat,
			repeating-linear-gradient(90deg, rgb(232 239 224 / 0.22) 0 1px, transparent 1px 100%) 0 0 / calc(100% / var(--th-years, 30)) 100% repeat-x;
		transform-origin: 0 50%;
	}

	/* "1996" i "Dzis" przerywaja linie tlem sekcji; przed "Dzis" grot strzalki. */
	.th-home .th-story__year {
		background: var(--tx-coal-900);
	}

	.th-home .th-story__item--then .th-story__year {
		padding-right: 22px;
	}

	.th-home .th-story__item--now .th-story__caption {
		justify-items: end;
		text-align: right;
	}

	.th-home .th-story__item--now .th-story__year {
		padding-left: 34px;
	}

	.th-home .th-story__item--now .th-story__year::before {
		left: 0;
		width: 12px;
		height: 16px;
		margin-top: -8px;
		clip-path: polygon(0 0, 100% 50%, 0 100%);
	}

	.th-home .th-story__span {
		position: absolute;
		top: calc((100cqw - var(--th-story-gap)) / 2 * 0.8 + var(--th-cap) + var(--th-year) / 2);
		left: 50%;
		z-index: 1;
		margin: 0;
		transform: translate(-50%, -50%);
	}
}

/* Zasada wlasciciela: kroj cytatowy Brygada 1918 (kursywa, polski kroj z poprawnymi
   polskimi znakami), polskie cudzyslowy z CSS, podpis z kreska. */

.th-home .th-creed {
	max-width: 62rem;
	margin: clamp(72px, 9vw, 128px) auto 0;
	padding: 0;
	border: 0;
	background: none;
	font-style: normal;
	text-align: center;
	quotes: "\201E" "\201D";
}

.th-home .th-creed__text {
	max-width: 19em;
	margin-inline: auto;
	color: var(--tx-text);
	font-family: "Brygada 1918", Georgia, "Times New Roman", serif;
	font-size: clamp(1.625rem, 1.05rem + 2.4vw, 3.25rem);
	font-style: italic;
	font-weight: 400;
	line-height: 1.24;
	letter-spacing: -0.005em;
	text-wrap: balance;
}

.th-home .th-creed__text::before {
	content: open-quote;
	color: var(--tx-green);
}

.th-home .th-creed__text::after {
	content: close-quote;
	color: var(--tx-green);
}

/* Cale zdanie jednym lekkim glosem (prosba wlasciciela: kroj "chudszy"); koncowka
   wyrozniona tylko jasniejsza biela. */
.th-home .th-creed__text strong {
	color: var(--tx-white);
	font-weight: 400;
}

.th-home .th-creed__by {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	margin-top: 26px;
	color: var(--tx-text-2);
	font-family: var(--tx-font-display);
	font-size: var(--tx-fs-label);
	line-height: 1.3;
}

.th-home .th-creed__by::before {
	content: "";
	flex: none;
	width: 32px;
	height: 2px;
	border-radius: 2px;
	background: var(--tx-green);
}

.th-home .th-creed cite {
	font-style: normal;
}

.th-home .th-creed cite strong {
	color: var(--tx-white);
	font-weight: 600;
}

/* Liczby ze scenami (tools/frontend/sceny/sceny.py). Jedna pozycja = jedna kolumna: animowana scena,
   pod nia od razu liczba, pod nia podpis, wszystko na srodku.
   Telefon (wskazowka wlasciciela 2026-10-11): pozycje jedna pod druga.
   Od 768 px (rekomendacja 2026-10-11): trzy kolumny obok siebie jak kadry jednej panoramy. Sceny
   stoja na wspolnej linii horyzontu przez cala szerokosc (wlasne linie gruntu w SVG sa wtedy ukryte),
   liczby i podpisy leza w jednej linii. Historia czyta sie od lewej: lata, klienci, dostawa.
   Wszystkie sceny maja te sama wysokosc (--th-scene-h), wiec postacie maja wszedzie te sama wielkosc;
   szerokosc kazdej wynika z rysunku (--th-ar w pliku SVG). W HTML liczba stoi przed podpisem
   (czytnik ekranu czyta "30+ lat doswiadczenia"), a display: contents wyciaga scene i tekst
   podpisu do siatki pozycji, wiec scena moze stanac nad liczba. */

.th-home .th-figures {
	--th-scene-h: clamp(108px, 30vw, 132px);
	display: grid;
	gap: clamp(48px, 12vw, 64px);
	margin: clamp(56px, 7vw, 96px) auto 0;
	text-align: center;
}

.th-home .th-figure {
	display: grid;
	grid-template-areas:
		"scene"
		"value"
		"text";
	justify-items: center;
}

.th-home .th-figure__label {
	display: contents;
}

.th-home .th-figure__scene {
	grid-area: scene;
	display: block;
	margin-bottom: clamp(14px, 1.6vw, 22px);
}

.th-home .th-scene__svg {
	display: block;
	width: calc(var(--th-scene-h) * var(--th-ar, 2));
	max-width: 100%;
	height: auto;
}

.th-home .th-figure__value {
	grid-area: value;
	color: var(--tx-white);
	font-family: var(--tx-font-display);
	font-size: clamp(2.75rem, 1rem + 3.6vw, 4.5rem);
	font-weight: 700;
	line-height: 1;
	letter-spacing: -0.03em;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

.th-home .th-figure__plus {
	margin-left: 0.04em;
	color: var(--tx-text-2);
	font-size: 0.6em;
	vertical-align: 0.5em;
}

.th-home .th-figure__text {
	grid-area: text;
	margin-top: clamp(8px, 0.8vw, 12px);
	color: var(--tx-text);
	font-family: var(--tx-font-display);
	font-size: clamp(1.125rem, 0.8rem + 0.6vw, 1.375rem);
	font-weight: 600;
	line-height: 1.25;
	text-wrap: balance;
}

@media (min-width: 768px) {
	.th-home .th-figures {
		--th-scene-h: clamp(92px, 12vw, 190px);
		position: relative;
		isolation: isolate;
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 0;
	}

	.th-home .th-figure {
		padding-inline: clamp(8px, 1.6vw, 24px);
	}

	/* Wspolny horyzont na wysokosci gruntu scen (grunt lezy na 102,5 z 108 jednostek wysokosci sceny),
	   wygaszony na koncach, pod rysunkami. */
	.th-home .th-figures::before {
		content: "";
		position: absolute;
		top: calc(var(--th-scene-h) * 102.5 / 108);
		right: 0;
		left: 0;
		z-index: -1;
		height: 1px;
		background: linear-gradient(90deg, transparent, rgb(232 239 224 / 0.24) 10%, rgb(232 239 224 / 0.24) 90%, transparent);
		pointer-events: none;
	}

	.th-home .th-scene__grunt {
		display: none;
	}
}

/* Liczenie od zera: prawdziwa liczba zostaje w HTML (przezroczysta, trzyma
   szerokosc), licznik rysuje ::before z atrybutu data-shown. Wyszukiwarki
   i czytniki ekranu zawsze dostaja wartosc koncowa. */
.th-home .th-count {
	position: relative;
	display: inline-block;
}

.th-home .th-count.is-counting {
	color: transparent;
}

.th-home .th-count.is-counting::before {
	content: attr(data-shown);
	position: absolute;
	inset: 0;
	color: var(--th-count-color, var(--tx-white));
	text-align: right;
}

/* --- Opinie -------------------------------------------------------------- */

/* Manrope 500 dla tresci opinii: te same pliki zmiennego fontu, ktore Astra juz pobiera
   dla 400/600/700 (Google Fonts), wiec przegladarka nie pobiera niczego wiecej. */
@font-face {
	font-family: "Manrope";
	font-style: normal;
	font-weight: 500;
	font-display: swap;
	src: url(https://fonts.gstatic.com/s/manrope/v20/xn7gYHE41ni1AdIRggmxSuXd.woff2) format("woff2");
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
	font-family: "Manrope";
	font-style: normal;
	font-weight: 500;
	font-display: swap;
	src: url(https://fonts.gstatic.com/s/manrope/v20/xn7gYHE41ni1AdIRggexSg.woff2) format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Naglowek na srodku, pod nim duze logo Google, gwiazdki i dwa liczniki. Potem opinie
   na bialych kartach (jak kafelki produktow): klient od razu widzi ludzi, tresc i zrodlo. */
.th-home .th-reviews {
	background: var(--tx-coal-950);
}

.th-home .th-reviews__head {
	display: grid;
	justify-items: center;
	gap: clamp(24px, 3vw, 32px);
	text-align: center;
}

.th-home .th-reviews__head .th-h2 {
	max-width: 24ch;
	margin-inline: auto;
}

.th-home .th-accent {
	color: var(--tx-green);
}

/* Ocena Google pod naglowkiem: biala plakietka jak u Google (polecenie wlasciciela 2026-10-11,
   wzor ze zrzutu): logo, kreska, srednia, gwiazdki wedlug oceny, liczba opinii. Calosc jest
   linkiem do wizytowki. Wymiary rosna z ekranem; od 360 px wszystko w jednej linii. */
.th-home .th-rating {
	display: inline-flex;
	align-items: center;
	gap: clamp(8px, 0.9vw + 5px, 16px);
	min-height: 52px;
	padding: clamp(11px, 0.5vw + 9px, 16px) clamp(14px, 2.2vw + 6px, 30px);
	border-radius: var(--tx-r-pill);
	background: var(--tx-white);
	color: var(--tx-ink-2);
	text-decoration: none;
	box-shadow: 0 20px 44px -24px rgb(0 0 0 / 0.9);
	transition:
		transform var(--tx-fast) var(--tx-ease),
		box-shadow var(--tx-base) var(--tx-ease);
}

.th-home .th-rating:active {
	transform: scale(0.98);
}

.th-home .th-rating__logo {
	flex: none;
	width: clamp(56px, 2.6vw + 47px, 80px);
	height: auto;
}

.th-home .th-rating__sep {
	flex: none;
	align-self: stretch;
	width: 1px;
	margin-block: 3px;
	background: var(--tx-line-light);
}

.th-home .th-rating__score {
	--th-count-color: var(--tx-ink);
	color: var(--tx-ink);
	font-family: var(--tx-font-display);
	font-size: clamp(1.3125rem, 0.6vw + 1.18rem, 1.75rem);
	font-weight: 700;
	line-height: 1;
	letter-spacing: -0.01em;
	font-variant-numeric: tabular-nums;
}

.th-home .th-rating__stars {
	display: inline-flex;
	gap: clamp(1px, 0.25vw, 3px);
	color: var(--tx-star);
}

.th-home .th-rating__stars .th-star {
	width: clamp(16px, 0.75vw + 13.3px, 22px);
	height: clamp(16px, 0.75vw + 13.3px, 22px);
}

/* Niewypelniona czesc gwiazdki (np. 0,2 przy 4,8) szara jak u Google, nie blada zolta. */
.th-home .th-rating__stars .th-star path:first-child {
	opacity: 1;
	fill: #dadce0;
}

.th-home .th-rating__count {
	--th-count-color: var(--tx-ink-2);
	font-size: clamp(0.9375rem, 0.3vw + 0.87rem, 1.125rem);
	font-weight: 600;
	line-height: 1.2;
	white-space: nowrap;
	font-variant-numeric: tabular-nums;
}

@media (hover: hover) and (pointer: fine) {
	.th-home .th-rating:hover {
		box-shadow:
			0 0 0 4px var(--tx-green-line),
			0 20px 44px -24px rgb(0 0 0 / 0.9);
	}
}

/* Wezsze niz 360 px: liczba opinii schodzi do drugiej linii zamiast wystawac poza ekran. */
@media (max-width: 359px) {
	.th-home .th-rating {
		flex-wrap: wrap;
		justify-content: center;
		row-gap: 8px;
		border-radius: var(--tx-r-lg);
	}
}

.th-home .th-quotes {
	display: grid;
	gap: 16px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.th-home .th-quotes--top {
	margin-top: clamp(36px, 4.5vw, 56px);
}

.th-home .th-quote {
	display: flex;
	min-width: 0;
}

.th-home .th-quote__fig {
	display: flex;
	flex-direction: column;
	gap: 16px;
	width: 100%;
	margin: 0;
	padding: 24px;
	border-radius: var(--tx-r-lg);
	background: var(--tx-white);
	color: var(--tx-ink);
	box-shadow: 0 1px 2px rgb(0 0 0 / 0.3), 0 18px 36px -24px rgb(0 0 0 / 0.8);
}

.th-home .th-quote__text {
	position: relative;
	margin: 0;
	padding: 0;
	border: 0;
	color: var(--tx-ink);
	font-family: var(--tx-font-body);
	font-size: var(--tx-fs-body);
	font-style: normal;
	font-weight: 500;
	line-height: 1.6;
}

.th-home .th-quote__text p {
	margin: 0;
	color: inherit;
	text-wrap: pretty;
}

.th-home .th-quote--big .th-quote__fig {
	padding: 26px;
}

/* Gwiazdki i znak Google na gorze, potem sama tresc, na dole autor: uklad, ktory klient zna z Google. */
.th-home .th-quote__top {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
}

.th-home .th-quote--big .th-quote__text {
	flex: 1;
	font-size: clamp(1.0625rem, 1rem + 0.25vw, 1.125rem);
	line-height: 1.55;
}

.th-home .th-quote__who {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	align-items: center;
	gap: 12px;
	margin-top: auto;
	padding-top: 18px;
	border-top: 1px solid var(--tx-line-light);
}

.th-home .th-quote__avatar {
	width: 48px;
	height: 48px;
	border-radius: 50%;
	object-fit: cover;
	background: var(--tx-paper);
}

.th-home .th-quote--big .th-quote__avatar {
	width: 56px;
	height: 56px;
}

.th-home .th-quote__name {
	display: grid;
	justify-items: start;
	gap: 3px;
	min-width: 0;
}

.th-home .th-quote__name strong {
	overflow-wrap: anywhere;
	color: var(--tx-ink);
	font-family: var(--tx-font-display);
	font-size: 1rem;
	font-weight: 600;
	line-height: 1.25;
}

.th-home .th-quote__stars {
	display: inline-flex;
	gap: 1px;
	color: var(--tx-star);
}

.th-home .th-quote__stars .th-star {
	width: 20px;
	height: 20px;
}

.th-home .th-quote__src {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	margin-top: 2px;
	color: var(--tx-green-ink);
	font-size: 0.8125rem;
	font-weight: 600;
	line-height: 1.2;
}

.th-home .th-quote__g {
	flex: none;
	width: 26px;
	height: 26px;
}

.th-home .th-reviews__foot {
	display: grid;
	justify-items: center;
	gap: 8px;
	margin-top: 28px;
}

.th-home .th-more {
	display: grid;
	justify-items: center;
	width: 100%;
}

.th-home .th-more__toggle {
	list-style: none;
}

.th-home .th-more__toggle::-webkit-details-marker {
	display: none;
}

.th-home .th-more__close,
.th-home .th-more[open] .th-more__open {
	display: none;
}

.th-home .th-more[open] .th-more__close {
	display: inline;
}

.th-home .th-more__chev {
	color: var(--tx-green);
	transition: transform var(--tx-base) var(--tx-ease);
}

.th-home .th-more[open] .th-more__chev {
	transform: rotate(180deg);
}

.th-home .th-quotes--more {
	width: 100%;
	margin-top: 24px;
	text-align: left;
}

@media (prefers-reduced-motion: no-preference) {
	.th-home .th-more[open] .th-quotes--more {
		animation: th-more-in 320ms var(--tx-ease) both;
	}
}

@keyframes th-more-in {
	from { opacity: 0; transform: translateY(8px); }
	to { opacity: 1; transform: none; }
}

.th-home .th-reviews__all {
	margin: 0;
}

.th-home .th-reviews__all .th-icon {
	width: 16px;
	height: 16px;
}

@media (hover: hover) and (pointer: fine) {
	.th-home .th-more__toggle:hover {
		border-color: rgb(232 239 224 / 0.34);
		background: var(--tx-coal-800);
	}

	.th-home .th-reviews__all .th-btn--quiet:hover {
		color: var(--tx-white);
		text-decoration-color: var(--tx-green);
	}
}

/* Telefon: trzy opinie od razu, karty tak wysokie jak ich tresc. Czwarta do szostej sa
   na poczatku listy "Zobacz wiecej opinii" (na wiekszych ekranach odwrotnie). */
@media (max-width: 679px) {
	.th-home .th-quote--desk {
		display: none;
	}

	.th-home .th-quotes--top {
		align-items: start;
	}

	.th-home .th-quote--big .th-quote__text {
		flex: none;
	}

	.th-home .th-quote__who {
		margin-top: 0;
	}
}

@media (min-width: 680px) {
	.th-home .th-quote--mob {
		display: none;
	}
}

@media (min-width: 680px) {
	.th-home .th-quotes--top {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.th-home .th-quotes--more {
		display: block;
		columns: 2;
		column-gap: 16px;
	}

	.th-home .th-quotes--more .th-quote {
		break-inside: avoid;
		margin-bottom: 16px;
	}
}

@media (min-width: 1024px) {
	.th-home .th-quotes--top {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 20px;
	}

	.th-home .th-quotes--more {
		columns: 3;
		column-gap: 20px;
	}

	.th-home .th-quotes--more .th-quote {
		margin-bottom: 20px;
	}
}

/* --- Facebook ------------------------------------------------------------ */

.th-home .th-social {
	background: var(--tx-coal-900);
}

.th-home .th-social__grid {
	display: grid;
	gap: 28px;
}

/* Rolka: zwykly film 9:16 z naszego serwera. Wysokosc ograniczona wysokoscia ekranu, wiec caly film
   miesci sie w oknie; szerokosc z proporcji 9:16. Kadr podgladu z duzym zielonym przyciskiem, po starcie
   natywne przyciski filmu. */
.th-home .th-reel {
	--th-reel-h: min(72svh, 640px);
	position: relative;
	width: min(100%, calc(var(--th-reel-h) * 9 / 16));
	aspect-ratio: 9 / 16;
	margin-inline: auto;
	overflow: hidden;
	border: 1px solid var(--tx-line);
	border-radius: var(--tx-r-lg);
	background: var(--tx-coal-800);
	box-shadow: var(--tx-shadow-photo);
}

.th-home .th-reel__video {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	background: var(--tx-coal-950);
}

.th-home .th-reel__start {
	position: absolute;
	inset: 0;
	z-index: 1;
	display: block;
	width: 100%;
	padding: 0;
	border: 0;
	background: linear-gradient(0deg, rgb(9 11 8 / 0.82) 0%, rgb(9 11 8 / 0.05) 42%, rgb(9 11 8 / 0) 100%);
	color: inherit;
	text-align: left;
	cursor: pointer;
}

.th-home .th-reel__start[hidden] {
	display: none;
}

.th-home .th-reel__start:focus-visible {
	outline: 3px solid var(--tx-green);
	outline-offset: -3px;
}

.th-home .th-reel__play {
	position: absolute;
	top: 50%;
	left: 50%;
	z-index: 1;
	display: grid;
	place-items: center;
	width: 72px;
	height: 72px;
	border-radius: 50%;
	background: var(--tx-green);
	color: var(--tx-on-green);
	transform: translate(-50%, -50%);
	transition: transform var(--tx-base) var(--tx-ease), background-color var(--tx-fast) var(--tx-ease);
}

.th-home .th-reel__play .th-icon {
	width: 28px;
	height: 28px;
	margin-left: 4px;
}

.th-home .th-reel__caption {
	position: absolute;
	left: 20px;
	right: 20px;
	bottom: 18px;
	z-index: 1;
	color: var(--tx-white);
	font-family: var(--tx-font-display);
	font-size: 1.0625rem;
	font-weight: 600;
}

.th-home .th-reel__start:active .th-reel__play {
	transform: translate(-50%, -50%) scale(0.94);
}

.th-home .th-social__proof {
	display: flex;
	flex-wrap: wrap;
	gap: 12px 28px;
}

.th-home .th-social__proof li {
	display: flex;
	align-items: baseline;
	gap: 8px;
	color: var(--tx-text-2);
	font-size: var(--tx-fs-small);
}

.th-home .th-social__proof .th-icon {
	align-self: center;
	width: 20px;
	height: 20px;
	color: var(--tx-green);
}

.th-home .th-social__proof strong {
	color: var(--tx-white);
	font-family: var(--tx-font-display);
	font-size: 1.375rem;
	line-height: 1;
}

.th-home .th-social__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 16px;
	margin-top: 24px;
}

@media (hover: hover) and (pointer: fine) {
	.th-home .th-reel__start:hover .th-reel__play {
		background: var(--tx-green-hover);
		transform: translate(-50%, -50%) scale(1.05);
	}
}

/* Komputer (wskazowka wlasciciela 2026-10-11): sekcja wezsza niz reszta strony, film wiekszy i blizej
   srodka; tekst obok filmu na srodku jego wysokosci. */
@media (min-width: 1024px) {
	.th-home .th-social__grid {
		width: min(100% - 2 * var(--tx-gutter), 1060px);
		grid-template-columns: minmax(0, 1fr) auto;
		grid-template-areas:
			"head reel"
			"body reel";
		align-content: center;
		column-gap: clamp(48px, 5.5vw, 96px);
		row-gap: 28px;
	}

	.th-home .th-social__head {
		grid-area: head;
		align-self: end;
	}

	.th-home .th-social__body {
		grid-area: body;
		align-self: start;
	}

	.th-home .th-reel {
		--th-reel-h: min(80vh, 720px);
		grid-area: reel;
		width: calc(var(--th-reel-h) * 9 / 16);
		margin: 0;
	}
}

/* --- Ludzie, sklad i telefon --------------------------------------------- */

.th-home .th-proof {
	background: var(--tx-coal-950);
}

.th-home .th-proof__list {
	display: grid;
	gap: clamp(16px, 2vw, 24px);
}

.th-home .th-panel {
	overflow: hidden;
	border: 1px solid var(--tx-line);
	border-radius: var(--tx-r-lg);
	background: var(--tx-coal-850);
}

.th-home .th-panel__media img {
	width: 100%;
	aspect-ratio: 1;
	object-fit: cover;
}

.th-home .th-panel--team .th-panel__media img {
	object-position: center 38%;
}

.th-home .th-panel__content {
	padding: 24px 20px 28px;
}

.th-home .th-panel__title {
	font-size: clamp(1.625rem, 1.35rem + 1.2vw, 2.5rem);
	line-height: 1.1;
	letter-spacing: -0.015em;
}

.th-home .th-panel__content p {
	max-width: 46ch;
	margin-top: 14px;
	color: var(--tx-text-2);
	font-size: var(--tx-fs-body);
	line-height: 1.6;
}

.th-home .th-cta {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	align-items: center;
	gap: 16px 18px;
	padding: clamp(20px, 3vw, 32px);
	border: 1px solid var(--tx-green-line);
	border-radius: var(--tx-r-lg);
	background: linear-gradient(135deg, rgb(132 196 71 / 0.12), rgb(132 196 71 / 0.03) 60%), var(--tx-coal-850);
}

.th-home .th-cta__icon {
	display: grid;
	place-items: center;
	width: 56px;
	height: 56px;
	border: 1px solid var(--tx-green-line);
	border-radius: 50%;
	color: var(--tx-green);
}

.th-home .th-cta__icon .th-icon {
	width: 26px;
	height: 26px;
}

.th-home .th-cta__title {
	font-size: clamp(1.375rem, 1.15rem + 1vw, 2rem);
	line-height: 1.15;
	letter-spacing: -0.01em;
}

.th-home .th-cta__text p {
	margin-top: 6px;
	color: var(--tx-text-2);
	font-size: var(--tx-fs-body);
}

.th-home .th-cta__button {
	grid-column: 1 / -1;
	width: 100%;
	font-size: 1.25rem;
	font-variant-numeric: tabular-nums;
}

@media (min-width: 768px) {
	.th-home .th-panel {
		position: relative;
		isolation: isolate;
		display: flex;
		align-items: center;
		min-height: clamp(420px, 42vw, 540px);
	}

	.th-home .th-panel__media {
		position: absolute;
		inset: 0;
		z-index: -2;
	}

	.th-home .th-panel__media img {
		height: 100%;
		aspect-ratio: auto;
	}

	.th-home .th-panel::after {
		content: "";
		position: absolute;
		inset: 0;
		z-index: -1;
		background: linear-gradient(90deg, rgb(9 11 8 / 0.92) 0%, rgb(9 11 8 / 0.72) 34%, rgb(9 11 8 / 0) 66%);
	}

	.th-home .th-panel--team {
		justify-content: flex-end;
	}

	.th-home .th-panel--team::after {
		background: linear-gradient(270deg, rgb(9 11 8 / 0.92) 0%, rgb(9 11 8 / 0.72) 34%, rgb(9 11 8 / 0) 66%);
	}

	.th-home .th-panel__content {
		max-width: 500px;
		padding: clamp(32px, 4vw, 56px);
	}

	.th-home .th-panel__content p {
		color: var(--tx-text);
	}

	.th-home .th-cta {
		grid-template-columns: auto minmax(0, 1fr) auto;
	}

	.th-home .th-cta__button {
		grid-column: auto;
		width: auto;
	}
}

/* --- Okna: film, opinia, rolka ------------------------------------------- */

.th-home .th-dialog {
	position: fixed;
	inset: 0;
	width: 100%;
	max-width: none;
	height: 100%;
	max-height: none;
	margin: 0;
	padding: 72px 16px 24px;
	border: 0;
	background: transparent;
	color: var(--tx-white);
	overflow: auto;
}

.th-home .th-dialog[open] {
	display: grid;
	place-items: center;
}

.th-home .th-dialog::backdrop {
	background: rgb(5 6 4 / 0.9);
}

.th-home .th-dialog__frame {
	overflow: hidden;
	border-radius: var(--tx-r-lg);
	background: #000000;
	box-shadow: 0 30px 80px -20px rgb(0 0 0 / 0.9);
}

.th-home .th-dialog--image .th-dialog__frame {
	width: min(100%, 1000px);
	background: #ffffff;
}

.th-home .th-dialog__img {
	width: 100%;
}

.th-home .th-dialog__close {
	position: fixed;
	top: 14px;
	right: 14px;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-height: 48px;
	padding: 0 18px 0 14px;
	border: 1px solid rgb(255 255 255 / 0.3);
	border-radius: var(--tx-r-pill);
	background: rgb(9 11 8 / 0.7);
	color: var(--tx-white);
	font-family: var(--tx-font-display);
	font-size: 1rem;
	font-weight: 600;
}

.th-home .th-dialog__close .th-icon {
	width: 20px;
	height: 20px;
}

@media (hover: hover) and (pointer: fine) {
	.th-home .th-dialog__close:hover {
		border-color: var(--tx-white);
	}
}

html:has(.th-dialog[open]) {
	overflow: hidden;
}

/* --- Ruch: wejscie naglowka i jedna sekwencja w sekcji o firmie ----------- */

@media (prefers-reduced-motion: no-preference) {
	.th-home .th-hero__copy > *,
	.th-home .th-call {
		transition: opacity 640ms var(--tx-ease), transform 640ms var(--tx-ease);
	}

	@starting-style {
		.th-home .th-hero__copy > *,
		.th-home .th-call {
			opacity: 0;
			transform: translateY(14px);
		}
	}

	.th-home .th-hero__copy > :nth-child(2) {
		transition-delay: 60ms;
	}

	.th-home .th-hero__copy > :nth-child(3) {
		transition-delay: 120ms;
	}

	.th-home .th-hero__copy > :nth-child(4) {
		transition-delay: 180ms;
	}

	.th-home .th-call {
		transition-delay: 220ms;
	}

	.th-home .th-dialog[open] .th-dialog__frame {
		transition: opacity 220ms var(--tx-ease), transform 220ms var(--tx-ease);
	}

	@starting-style {
		.th-home .th-dialog[open] .th-dialog__frame {
			opacity: 0;
			transform: scale(0.97);
		}
	}

	/* Sekcja o firmie. Stan poczatkowy wlacza skrypt ("is-armed") tylko wtedy,
	   gdy sekcja jest jeszcze ponizej ekranu; bez skryptu wszystko jest od razu
	   narysowane. Kazda czesc gra raz, przy wejsciu w widok ("is-played"). */

	/* Kreska markera pod "uczciwy opal" rysuje sie od lewej. */
	.th-home .th-about.is-armed .th-mark__stroke {
		clip-path: inset(0 100% 0 0);
	}

	.th-home .th-about.is-armed .is-played .th-mark__stroke {
		clip-path: inset(0 0 0 0);
		transition: clip-path 900ms var(--tx-ease) 250ms;
	}

	/* Strzalka czasu: linia wyrasta z "1996", przy przerwie pojawia sie
	   "30 lat pozniej", na koncu grot, "Dzis" zapala sie na zielono, a dzisiejsze
	   zdjecie nabiera koloru (przeszlosc czarno-biala, terazniejszosc w kolorze). */
	.th-home .th-about.is-armed .th-story::before {
		transform: scaleX(0);
	}

	.th-home .th-about.is-armed .th-story__item::after {
		transform: scaleY(0);
	}

	.th-home .th-about.is-armed .th-story__item--then .th-story__year::before {
		opacity: 0;
		transform: scale(0.6);
	}

	.th-home .th-about.is-armed .th-story__item--now .th-story__year::before,
	.th-home .th-about.is-armed .th-story__span {
		opacity: 0;
	}

	.th-home .th-about.is-armed .th-story__item--now .th-story__year {
		color: var(--tx-text-3);
	}

	.th-home .th-about.is-armed .th-story__item--now .th-story__photo img {
		filter: grayscale(1);
	}

	.th-home .th-about.is-armed .th-story.is-played::before {
		transform: none;
		transition: transform 1300ms cubic-bezier(0.77, 0, 0.175, 1);
	}

	.th-home .th-about.is-armed .th-story.is-played .th-story__item--then::after {
		transform: none;
		transition: transform 650ms cubic-bezier(0.77, 0, 0.175, 1) 150ms;
	}

	.th-home .th-about.is-armed .th-story.is-played .th-story__item--now::after {
		transform: none;
		transition: transform 650ms cubic-bezier(0.77, 0, 0.175, 1) 800ms;
	}

	.th-home .th-about.is-armed .th-story.is-played .th-story__item--then .th-story__year::before {
		opacity: 1;
		transform: none;
		transition: opacity 300ms var(--tx-ease), transform 300ms var(--tx-ease);
	}

	.th-home .th-about.is-armed .th-story.is-played .th-story__span {
		opacity: 1;
		transition: opacity 400ms var(--tx-ease) 600ms;
	}

	.th-home .th-about.is-armed .th-story.is-played .th-story__item--now .th-story__year::before {
		opacity: 1;
		transition: opacity 250ms var(--tx-ease) 1250ms;
	}

	.th-home .th-about.is-armed .th-story.is-played .th-story__item--now .th-story__year {
		color: var(--tx-green);
		transition: color 400ms ease 1250ms;
	}

	.th-home .th-about.is-armed .th-story.is-played .th-story__item--now .th-story__photo img {
		filter: none;
		transition: filter 1100ms ease 900ms;
	}
}

@media (prefers-reduced-motion: reduce) {
	.th-home *,
	.th-home *::before,
	.th-home *::after {
		transition-duration: 1ms !important;
		animation-duration: 1ms !important;
		scroll-behavior: auto !important;
	}
}