/* ==========================================================================
   Tomex: strona "O firmie" (/o-firmie/). Tylko body.tx-o-firmie.
   Gora wedlug dotychczasowej strony, ktora wlasciciel ocenil jako lepsza (2026-10-12): prosto,
   obrazem i znakami, malo tekstu. Haslo na tle z weglem, trzy filary z prawdziwymi logo, os czasu
   z duzymi zdjeciami, zdanie wlasciciela i liczby jak kwit wagowy. Nizej pelna wiedza o firmie
   w krotkich odpowiedziach pod naglowkami-pytaniami (strona zaufania).
   Kolory i typografia z tokens.css (DESIGN.md): rama ciemna, zielen dla dzialan, cen i stanu.
   Wyjatek jak w sekcji o firmie na stronie glownej: zielone "Twoje cieplo" z kreska markera.
   ========================================================================== */

/* --- Uklad strony: Astra bez ramek i odstepow ------------------------------ */

body.tx-o-firmie,
body.tx-o-firmie #page,
body.tx-o-firmie .site-content,
body.tx-o-firmie #content.site-content > .ast-container {
	background: var(--tx-coal-950);
}

body.tx-o-firmie #content.site-content > .ast-container,
body.tx-o-firmie .site-main,
body.tx-o-firmie .ast-article-single,
body.tx-o-firmie .entry-content {
	width: 100%;
	max-width: none;
	margin: 0;
	padding: 0;
	border: 0;
	background: transparent;
}

body.tx-o-firmie .entry-header,
body.tx-o-firmie .ast-breadcrumbs-wrapper {
	display: none;
}

body.tx-o-firmie ::selection {
	background: rgb(132 196 71 / 0.35);
	color: var(--tx-white);
}

body.tx-o-firmie .tof,
body.tx-o-firmie .tof * {
	box-sizing: border-box;
}

body.tx-o-firmie .tof {
	color: var(--tx-text);
	font-family: var(--tx-font-body);
	font-size: var(--tx-fs-body);
	line-height: 1.6;
	overflow-wrap: break-word;
	overflow-x: clip;
}

body.tx-o-firmie .tof :where(h1, h2, h3, p, ul, ol, dl, dd, figure, blockquote, table) {
	margin: 0;
}

body.tx-o-firmie .tof :where(ul, ol) {
	padding: 0;
	list-style: none;
}

body.tx-o-firmie .tof :where(h1, h2, h3) {
	color: var(--tx-white);
	font-family: var(--tx-font-display);
	font-weight: 700;
	letter-spacing: -0.01em;
	text-wrap: balance;
	/* Przy tekscie powiekszonym do 200 % dlugie slowo moze byc szersze niz telefon */
	overflow-wrap: break-word;
}

body.tx-o-firmie .tof p {
	text-wrap: pretty;
}

body.tx-o-firmie .tof a {
	color: var(--tx-green);
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
}

/* Astra animuje linki w calosci (all 0,2 s), wiec obwodka fokusu wjezdzalaby powoli. Tu tylko kolor;
   przyciski i plakietka oceny maja wlasne przejscia. Fokus z klawiatury pojawia sie od razu. */
body.tx-o-firmie .tof a:not(.tof-btn, .tof-rating) {
	transition: color var(--tx-fast) ease, background-color var(--tx-fast) ease;
}

body.tx-o-firmie .tof a:focus-visible,
body.tx-o-firmie .tof summary:focus-visible {
	outline: 3px solid var(--tx-white);
	outline-offset: 3px;
	border-radius: 6px;
}

body.tx-o-firmie .tof img {
	display: block;
	max-width: 100%;
	height: auto;
}

body.tx-o-firmie .tof .screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/* Teksty w ukladach flex moga sie zwezac (dlugie slowa przy powiekszonym tekscie) */
body.tx-o-firmie .tof-pillar__text,
body.tx-o-firmie .tof-doc__text,
body.tx-o-firmie .tof-quote__by > span:last-child,
body.tx-o-firmie .tof-pgg__title {
	min-width: 0;
}

body.tx-o-firmie .tof-wrap {
	width: min(100% - 2 * var(--tx-gutter), var(--tx-container));
	margin-inline: auto;
}

body.tx-o-firmie .tof-section {
	padding-block: var(--tx-section);
}

body.tx-o-firmie .tof-section--alt {
	background: var(--tx-coal-900);
}

body.tx-o-firmie .tof-h2 {
	font-size: var(--tx-fs-h2);
	line-height: 1.1;
}

body.tx-o-firmie .tof-lead {
	color: var(--tx-text-2);
	font-size: var(--tx-fs-lead);
	line-height: 1.6;
}

/* Telefony w tabelach i blokach: cyfry tabelaryczne */
body.tx-o-firmie .tof-tel {
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

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

body.tx-o-firmie .tof-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	min-height: 52px;
	padding: 12px 22px;
	border: 2px solid transparent;
	border-radius: var(--tx-r);
	font-family: var(--tx-font-display);
	font-size: 1.0625rem;
	font-weight: 600;
	line-height: 1.2;
	text-align: center;
	text-decoration: none;
	transition:
		background-color var(--tx-fast) var(--tx-ease),
		border-color var(--tx-fast) var(--tx-ease),
		transform var(--tx-fast) var(--tx-ease);
}

body.tx-o-firmie .tof-btn svg {
	width: 20px;
	height: 20px;
	flex: none;
}

body.tx-o-firmie .tof-btn--primary {
	border-color: var(--tx-green);
	background: var(--tx-green);
	font-variant-numeric: tabular-nums;
}

body.tx-o-firmie .tof-btn--outline {
	border-color: var(--tx-line-strong);
	background: transparent;
}

/* Ogolna regula linkow (.tof a) wazy wiecej niz klasa przycisku: kolory przyciskow z ta sama waga. */
body.tx-o-firmie .tof a.tof-btn {
	text-decoration: none;
}

body.tx-o-firmie .tof a.tof-btn--primary {
	color: var(--tx-on-green);
}

body.tx-o-firmie .tof a.tof-btn--outline {
	color: var(--tx-white);
}

body.tx-o-firmie .tof-btn:active {
	transform: scale(0.97);
}

@media (hover: hover) and (pointer: fine) {
	body.tx-o-firmie .tof a.tof-btn--primary:hover {
		border-color: var(--tx-green-hover);
		background: var(--tx-green-hover);
		color: var(--tx-on-green);
	}

	body.tx-o-firmie .tof a.tof-btn--outline:hover {
		border-color: var(--tx-green);
		color: var(--tx-white);
	}

	body.tx-o-firmie .tof a:not(.tof-btn, .tof-pillar, .tof-rating):hover {
		color: var(--tx-green-hover);
	}
}

body.tx-o-firmie .tof-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 22px;
}

/* Telefon: oba przyciski w jednym rzedzie */
body.tx-o-firmie .tof-actions .tof-btn {
	flex: 1 1 auto;
	gap: 8px;
	padding-inline: 14px;
}

@media (min-width: 560px) {
	body.tx-o-firmie .tof-actions {
		gap: 12px;
		margin-top: 26px;
	}

	body.tx-o-firmie .tof-actions .tof-btn {
		flex: 0 0 auto;
		gap: 10px;
		padding-inline: 22px;
	}
}

/* --- Tla z weglem ---------------------------------------------------------- */
/* Te same pliki i ta sama technika co na stronie glownej (tla.css, tomex_backdrop()): obraz
   lezy pod trescia sekcji, telefon i pionowy tablet dostaja kadr 9:16, gora i dol sekcji
   przechodza w jej kolor, bez ciemnej warstwy na calosci. Wariant "okno" (.tof-has-bd--okno):
   tlo stoi, a tresc sekcji przewija sie po nim (kadr przyklejony sticky w pojemniku dluzszym
   o wysokosc ekranu w gore i w dol, sekcja przycina). Bez position: fixed i bez
   background-attachment: fixed (nie dziala na iPhone'ach). Przy ograniczonym ruchu tlo stoi
   jak zwykle zdjecie sekcji. Nie laczyc tu transform z filter (Chrome ucinal obraz). */

body.tx-o-firmie .tof-hero,
body.tx-o-firmie .tof-creed-sec {
	--tof-bd-ext: 0px;
	--tof-bd-bg: var(--tx-coal-950);
	--tof-bd-fade: clamp(56px, 7vw, 120px);
	position: relative;
	isolation: isolate;
}

body.tx-o-firmie .tof-bd {
	position: absolute;
	top: calc(var(--tof-bd-ext) * -1);
	right: 0;
	bottom: calc(var(--tof-bd-ext) * -1);
	left: 0;
	z-index: -1;
	pointer-events: none;
}

body.tx-o-firmie .tof-bd__frame {
	position: relative;
	height: 100%;
}

body.tx-o-firmie .tof .tof-bd img {
	width: 100%;
	max-width: none;
	height: 100%;
	object-fit: cover;
}

/* Przejscie w kolor sekcji u gory i u dolu (na granicach sekcji, nie kadru) */
body.tx-o-firmie .tof-bd::before,
body.tx-o-firmie .tof-bd::after {
	position: absolute;
	right: 0;
	left: 0;
	z-index: 1;
	height: var(--tof-bd-fade);
	content: "";
}

body.tx-o-firmie .tof-bd::before {
	top: var(--tof-bd-ext);
	background: linear-gradient(180deg, var(--tof-bd-bg), transparent);
}

body.tx-o-firmie .tof-bd::after {
	bottom: var(--tof-bd-ext);
	background: linear-gradient(0deg, var(--tof-bd-bg), transparent);
}

@supports (overflow: clip) {
	@media (prefers-reduced-motion: no-preference) {
		body.tx-o-firmie .tof-has-bd--okno {
			--tof-bd-ext: 100vh;
			overflow: clip;
		}

		body.tx-o-firmie .tof-has-bd--okno .tof-bd__frame {
			position: sticky;
			top: 0;
			height: 100vh;
		}

		/* Najwieksza wysokosc ekranu telefonu (pasek adresu schowany): kadr nie konczy sie nad
		   dolna krawedzia, kiedy pasek znika w trakcie przewijania. */
		@supports (height: 100lvh) {
			body.tx-o-firmie .tof-has-bd--okno {
				--tof-bd-ext: 100lvh;
			}

			body.tx-o-firmie .tof-has-bd--okno .tof-bd__frame {
				height: 100lvh;
			}
		}
	}
}

/* --- 1. Strefa wizualna ---------------------------------------------------- */
/* Haslo i jedno zdanie na srodku (manifest firmy, jak dotychczasowa strona i sekcja o firmie na
   stronie glownej), pod nimi trzy filary: logo na bialej plakietce i krotki podpis, kazdy prowadzi do swojej
   odpowiedzi nizej. Odstep od gory to dol paska nawigacji (72 / 78 / 106 px) plus oddech. */

body.tx-o-firmie .tof-hero {
	--tof-bd-fade: clamp(72px, 10vw, 160px);
	padding: calc(72px + 36px) 0 clamp(52px, 6.5vw, 88px);
	text-align: center;
}

@media (min-width: 600px) {
	body.tx-o-firmie .tof-hero {
		padding-top: calc(78px + 56px);
	}
}

@media (min-width: 1200px) {
	body.tx-o-firmie .tof-hero {
		padding-top: calc(106px + 64px);
	}
}

/* Telefon: kadr pionowy od dolu, wiec drobiny wegla siegaja wyzej, za znaki */
@media (max-width: 599px) {
	body.tx-o-firmie .tof .tof-hero .tof-bd img {
		object-position: 50% 100%;
	}
}

/* Skala i rytm jak naglowek sekcji o firmie na stronie glownej */
body.tx-o-firmie .tof-hero__title {
	max-width: 15em;
	margin-inline: auto;
	font-size: clamp(2.25rem, 1.4rem + 3.4vw, 4.25rem);
	line-height: 1.06;
	letter-spacing: -0.022em;
}

/* "Twoje cieplo": kreska pisaka pod slowami, za tekstem (grubszy poczatek, cienki koniec
   z podbiciem), ten sam ksztalt co pod "uczciwy opal" na stronie glownej. */
body.tx-o-firmie .tof-mark {
	position: relative;
	display: inline-block;
	isolation: isolate;
	color: var(--tx-green);
}

body.tx-o-firmie .tof-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;
}

/* Kreska jest pod linia pisma, wiec zdanie zaczyna sie dopiero pod nia */
body.tx-o-firmie .tof-hero__lead {
	max-width: 46ch;
	margin: clamp(28px, 3.2vw, 44px) auto 0;
	color: var(--tx-text-2);
	font-size: var(--tx-fs-lead);
	line-height: 1.6;
	text-wrap: balance;
}

/* Trzy filary (wlasciciel, 2026-10-12): prawdziwy znak na bialej plakietce i krotki podpis. Plakietka
   w ksztalcie pigulki jak ocena Google na stronie glownej; biale tlo tylko pod logo (DESIGN.md). Logo maja
   rozne proporcje, wiec kazde ma wlasna wysokosc, dobrana tak, zeby trzy znaki wazyly tyle samo.
   Telefon: lista (plakietka z lewej, podpis obok), od 48 em trzy kolumny na srodku (punkt w em: przy
   powiekszonym tekscie zostaje lista). */
body.tx-o-firmie .tof-pillars {
	display: grid;
	gap: 12px;
	width: fit-content;
	max-width: 100%;
	margin: clamp(30px, 4.6vw, 60px) auto 0;
}

body.tx-o-firmie .tof a.tof-pillar {
	display: grid;
	grid-template-columns: 116px minmax(0, 1fr);
	align-items: center;
	gap: 14px;
	min-height: 56px;
	border-radius: 16px;
	color: var(--tx-white);
	text-align: left;
	text-decoration: none;
	-webkit-tap-highlight-color: transparent;
}

body.tx-o-firmie .tof a.tof-pillar:focus-visible {
	outline-offset: 4px;
	border-radius: 16px;
}

body.tx-o-firmie .tof-pillar__logo {
	display: grid;
	place-items: center;
	height: 58px;
	padding: 0 16px;
	border-radius: var(--tx-r-pill);
	background: var(--tx-white);
	box-shadow: 0 1px 2px rgb(0 0 0 / 0.3), 0 14px 28px -18px rgb(0 0 0 / 0.9);
	transition: transform var(--tx-base) var(--tx-ease), box-shadow var(--tx-base) var(--tx-ease);
}

body.tx-o-firmie .tof .tof-pillar__logo img {
	width: auto;
	max-width: 100%;
	height: var(--tof-logo-h, 30px);
	object-fit: contain;
}

body.tx-o-firmie .tof-pillar__logo--tomex {
	--tof-logo-h: 26px;
}

body.tx-o-firmie .tof-pillar__logo--pgg {
	--tof-logo-h: 37px;
}

body.tx-o-firmie .tof-pillar__logo--google {
	--tof-logo-h: 23px;
}

body.tx-o-firmie .tof-pillar__text {
	font-family: var(--tx-font-display);
	font-size: 1rem;
	font-weight: 600;
	line-height: 1.3;
	text-wrap: balance;
	/* Czytelnosc na jasnych drobinach wegla, bez ciemnej warstwy na zdjeciu */
	text-shadow: 0 1px 2px rgb(0 0 0 / 0.55), 0 0 16px rgb(9 11 8 / 0.9);
}

body.tx-o-firmie .tof-pillar__line {
	display: block;
}

@media (hover: hover) and (pointer: fine) {
	body.tx-o-firmie .tof a.tof-pillar:hover .tof-pillar__logo {
		transform: translateY(-2px);
		box-shadow: 0 0 0 3px var(--tx-green-line), 0 14px 28px -18px rgb(0 0 0 / 0.9);
	}
}

/* Wcisniecie: plakietka lekko sie zmniejsza (po regule hover, zeby wygrala) */
body.tx-o-firmie .tof a.tof-pillar:active .tof-pillar__logo {
	transform: scale(0.97);
	transition-duration: var(--tx-fast);
}

@media (min-width: 48em) {
	body.tx-o-firmie .tof-pillars {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: clamp(20px, 3.2vw, 48px);
		width: min(100%, 54rem);
	}

	body.tx-o-firmie .tof a.tof-pillar {
		grid-template-columns: minmax(0, 1fr);
		align-content: start;
		justify-items: center;
		gap: 16px;
		padding: 6px 4px 8px;
		text-align: center;
	}

	body.tx-o-firmie .tof-pillar__logo {
		width: 100%;
		max-width: 200px;
		height: 84px;
		padding: 0 24px;
	}

	body.tx-o-firmie .tof-pillar__logo--tomex {
		--tof-logo-h: 40px;
	}

	body.tx-o-firmie .tof-pillar__logo--pgg {
		--tof-logo-h: 54px;
	}

	body.tx-o-firmie .tof-pillar__logo--google {
		--tof-logo-h: 34px;
	}

	body.tx-o-firmie .tof-pillar__text {
		font-size: 1.0625rem;
	}
}

/* --- 2. Historia: os czasu z duzymi zdjeciami ------------------------------ */
/* Uklad dotychczasowej strony: linia z lewej, przy kazdej karcie wezel, karta z duzym zdjeciem
   (telefon: zdjecie nad tekstem; od 900 px tekst z lewej, zdjecie z prawej, w kazdej karcie tak
   samo). Wezel to ikona tematu karty zamiast numeru: zielony pierscien i ikona na ciemnym krazku,
   jak znaki u gory (pelna zielona tarcza z ikona telefonu wygladala jak przycisk, a nic nie robi).
   Podpis pod tytulem w text-3 (bez etykiety nad naglowkiem). */

/* Pod osia tylko krotki odstep: sekcja z cytatem ma wlasny odstep od gory i tlo, ktore sie wylania */
body.tx-o-firmie .tof-story {
	padding-bottom: clamp(16px, 2.5vw, 36px);
}

body.tx-o-firmie .tof-steps {
	--tof-node: 40px;
	--tof-node-top: 16px;
	--tof-in: 52px;
	--tof-gap: 28px;
	--tof-rail: calc(var(--tof-node) / 2 - 1px);
	--tof-node-delay: 120ms;
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--tof-gap);
}

/* Szyna osi pod zielonymi odcinkami, na koncach wygaszona */
body.tx-o-firmie .tof-steps::before {
	position: absolute;
	top: 0;
	bottom: 0;
	left: var(--tof-rail);
	width: 2px;
	background: linear-gradient(transparent, var(--tx-line-strong) 48px, var(--tx-line-strong) calc(100% - 96px), transparent);
	content: "";
}

body.tx-o-firmie .tof-step {
	position: relative;
	padding-left: var(--tof-in);
}

/* Zielony odcinek osi: od gory karty do gory nastepnej (razem z odstepem miedzy kartami) */
body.tx-o-firmie .tof-step::before {
	position: absolute;
	top: 0;
	bottom: calc(var(--tof-gap) * -1);
	left: var(--tof-rail);
	width: 2px;
	background: var(--tx-green);
	transform-origin: 50% 0;
	content: "";
}

body.tx-o-firmie .tof-step:first-of-type::before {
	background: linear-gradient(transparent, var(--tx-green) 48px);
}

body.tx-o-firmie .tof-step:last-of-type::before {
	bottom: 0;
	background: linear-gradient(var(--tx-green) calc(100% - 96px), transparent);
}

body.tx-o-firmie .tof-step__node {
	position: absolute;
	top: var(--tof-node-top);
	left: 0;
	z-index: 1;
	display: grid;
	place-items: center;
	width: var(--tof-node);
	height: var(--tof-node);
	border: 2px solid var(--tx-green);
	border-radius: 50%;
	background: var(--tx-coal-950);
	color: var(--tx-green);
}

body.tx-o-firmie .tof-step__node svg {
	width: 20px;
	height: 20px;
}

body.tx-o-firmie .tof-step__card {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	overflow: hidden;
	border: 1px solid var(--tx-line);
	border-radius: var(--tx-r-lg);
	background: var(--tx-coal-850);
	box-shadow: 0 2px 6px rgb(0 0 0 / 0.28), 0 28px 56px -32px rgb(0 0 0 / 0.85);
}

body.tx-o-firmie .tof-step__body {
	padding: 18px 18px 22px;
}

body.tx-o-firmie .tof-step__title {
	font-size: clamp(1.3125rem, 1.1rem + 0.8vw, 1.875rem);
	line-height: 1.18;
	letter-spacing: -0.015em;
}

body.tx-o-firmie .tof-step__when {
	margin-top: 6px;
	color: var(--tx-text-3);
	font-size: 0.9375rem;
	font-weight: 600;
	line-height: 1.4;
}

body.tx-o-firmie .tof-step__text {
	max-width: 40rem;
	margin-top: 10px;
	color: var(--tx-text-2);
	line-height: 1.55;
}

/* Zdjecie wypelnia swoje pole (na telefonie 4:3, od 900 px wysokosc karty), wiec jego proporcje
   nie zmieniaja wysokosci karty. */
body.tx-o-firmie .tof-step__media {
	position: relative;
	order: -1;
	aspect-ratio: 4 / 3;
	background: var(--tx-coal-800);
}

body.tx-o-firmie .tof .tof-step__media img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

body.tx-o-firmie .tof .tof-step__media--owner img {
	object-position: 62% 22%;
}

body.tx-o-firmie .tof .tof-step__media--team img {
	object-position: 50% 24%;
}

/* 1996: zdjecie archiwalne jak na stronie glownej: czarno-biale, winieta, delikatne ziarno */
body.tx-o-firmie .tof .tof-step__media--then img {
	object-position: 50% 40%;
	filter: grayscale(1) contrast(1.06);
}

body.tx-o-firmie .tof-step__media--then::before,
body.tx-o-firmie .tof-step__media--then::after {
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
	content: "";
}

body.tx-o-firmie .tof-step__media--then::before {
	box-shadow: inset 0 0 90px rgb(0 0 0 / 0.45);
}

body.tx-o-firmie .tof-step__media--then::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;
}

@media (min-width: 900px) {
	body.tx-o-firmie .tof-steps {
		--tof-node: 52px;
		--tof-in: 84px;
		--tof-gap: clamp(32px, 3.4vw, 48px);
		--tof-node-delay: 300ms;
	}

	/* Wezel na srodku wysokosci karty */
	body.tx-o-firmie .tof-step__node {
		top: calc(50% - var(--tof-node) / 2);
	}

	body.tx-o-firmie .tof-step__node svg {
		width: 24px;
		height: 24px;
	}

	body.tx-o-firmie .tof-step__card {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1.12fr);
		min-height: clamp(300px, 27vw, 400px);
	}

	body.tx-o-firmie .tof-step__body {
		align-self: center;
		padding: clamp(28px, 3.4vw, 52px);
	}

	body.tx-o-firmie .tof-step__text {
		margin-top: 14px;
		line-height: 1.6;
	}

	body.tx-o-firmie .tof-step__media {
		order: 0;
		aspect-ratio: auto;
	}
}

/* --- 3. Zdanie wlasciciela i liczby (tlo z weglem jak za oknem) ------------ */

body.tx-o-firmie .tof-creed-sec {
	--tof-bd-fade: clamp(80px, 11vw, 180px);
}

body.tx-o-firmie .tof-creed {
	max-width: 54rem;
	margin: 0 auto;
	text-align: center;
}

body.tx-o-firmie .tof-creed blockquote {
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	font-style: normal;
}

body.tx-o-firmie .tof-creed__text {
	color: var(--tx-white);
	font-family: "Brygada 1918", Georgia, "Times New Roman", serif;
	font-size: clamp(1.625rem, 1.05rem + 2.4vw, 2.75rem);
	font-style: italic;
	font-weight: 400;
	line-height: 1.28;
}

body.tx-o-firmie .tof-creed__text::before {
	content: "„";
	color: var(--tx-green);
}

body.tx-o-firmie .tof-creed__text::after {
	content: "”";
	color: var(--tx-green);
}

body.tx-o-firmie .tof-creed__by {
	margin-top: 18px;
	color: var(--tx-text-2);
	font-size: 1rem;
}

body.tx-o-firmie .tof-creed__by strong {
	color: var(--tx-white);
	font-weight: 600;
}

/* Liczby jak odczyt z kwitu wagowego: wiersz na pozycje, liczba po prawej cyframi tabelarycznymi,
   podpis na tej samej linii bazowej, cienkie linie miedzy wierszami, "+" mniejszy i uniesiony.
   Panel lekko przepuszcza wegiel z tla sekcji. */
body.tx-o-firmie .tof-receipt {
	max-width: 40rem;
	margin: clamp(40px, 6vw, 64px) auto 0;
	padding: 6px clamp(18px, 3vw, 28px);
	border: 1px solid var(--tx-line);
	border-radius: var(--tx-r-lg);
	background: rgb(19 23 16 / 0.86);
}

body.tx-o-firmie .tof-receipt__row {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	align-items: baseline;
	gap: 16px;
	padding: 14px 0;
}

body.tx-o-firmie .tof-receipt__row + .tof-receipt__row {
	border-top: 1px solid var(--tx-line);
}

body.tx-o-firmie .tof-receipt__value {
	order: 2;
	color: var(--tx-white);
	font-family: var(--tx-font-display);
	font-size: clamp(1.875rem, 1.5rem + 1.6vw, 2.75rem);
	font-weight: 700;
	line-height: 1.1;
	letter-spacing: -0.02em;
	font-variant-numeric: tabular-nums;
	text-align: right;
	white-space: nowrap;
}

body.tx-o-firmie .tof-receipt__plus {
	position: relative;
	top: -0.45em;
	margin-left: 2px;
	color: var(--tx-text-2);
	font-size: 0.55em;
}

body.tx-o-firmie .tof-receipt__label {
	order: 1;
	color: var(--tx-text-2);
	font-size: 1.0625rem;
	line-height: 1.35;
}

/* --- 4. Wiedza o firmie (dol strony) --------------------------------------- */

body.tx-o-firmie .tof-kb__head {
	max-width: 46rem;
	margin-bottom: clamp(28px, 4vw, 44px);
}

body.tx-o-firmie .tof-kb__head .tof-lead {
	margin-top: 14px;
}

body.tx-o-firmie .tof-kb__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 28px;
}

/* Spis tresci: na telefonie zwiniety, od 1100 px otwarty i przyklejony z lewej */
body.tx-o-firmie .tof-toc {
	border: 1px solid var(--tx-line);
	border-radius: var(--tx-r-lg);
	background: var(--tx-coal-850);
}

body.tx-o-firmie .tof-toc summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	min-height: 56px;
	padding: 0 18px;
	color: var(--tx-white);
	font-family: var(--tx-font-display);
	font-size: 1.0625rem;
	font-weight: 600;
	list-style: none;
	cursor: pointer;
}

body.tx-o-firmie .tof-toc summary::-webkit-details-marker {
	display: none;
}

body.tx-o-firmie .tof-toc summary svg {
	width: 20px;
	height: 20px;
	color: var(--tx-green);
	transition: transform var(--tx-fast) var(--tx-ease);
}

body.tx-o-firmie .tof-toc[open] summary svg {
	transform: rotate(90deg);
}

body.tx-o-firmie .tof-toc ol {
	display: grid;
	padding: 0 10px 12px;
	counter-reset: tof-toc;
}

body.tx-o-firmie .tof-toc li {
	counter-increment: tof-toc;
}

body.tx-o-firmie .tof-toc a {
	display: flex;
	align-items: center;
	gap: 12px;
	min-height: 44px;
	padding: 8px;
	border-radius: var(--tx-r-sm);
	color: var(--tx-text);
	font-size: 1rem;
	line-height: 1.3;
	text-decoration: none;
}

body.tx-o-firmie .tof-toc a::before {
	min-width: 1.5em;
	content: counter(tof-toc, decimal-leading-zero);
	color: var(--tx-text-3);
	font-family: var(--tx-font-display);
	font-size: 0.875rem;
	font-weight: 600;
	font-variant-numeric: tabular-nums;
}

@media (hover: hover) and (pointer: fine) {
	body.tx-o-firmie .tof-toc a:hover {
		background: var(--tx-coal-800);
		color: var(--tx-white);
	}
}

@media (min-width: 1100px) {
	body.tx-o-firmie .tof-kb__grid {
		grid-template-columns: 17rem minmax(0, 1fr);
		align-items: start;
		gap: clamp(32px, 4vw, 64px);
	}

	body.tx-o-firmie .tof-toc {
		position: sticky;
		top: 124px;
	}
}

/* Odpowiedzi: pytanie (H2 jako punkt orientacyjny), od razu krotka odpowiedz, potem szczegoly.
   Rozdzialy oddziela cienka linia. Akapity do ok. 70 znakow w wierszu. */
body.tx-o-firmie .tof-answers {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: clamp(40px, 6vw, 64px);
	max-width: 50rem;
}

body.tx-o-firmie .tof-answer {
	scroll-margin-top: 120px;
}

body.tx-o-firmie .tof-answer + .tof-answer {
	padding-top: clamp(40px, 6vw, 64px);
	border-top: 1px solid var(--tx-line);
}

body.tx-o-firmie .tof-answer__q {
	font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2rem);
	line-height: 1.15;
}

body.tx-o-firmie .tof-answer__a {
	max-width: 40rem;
	margin-top: 14px;
	color: var(--tx-text);
	font-size: var(--tx-fs-lead);
	font-weight: 500;
	line-height: 1.55;
}

body.tx-o-firmie .tof-answer__body {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 16px;
	margin-top: 20px;
	color: var(--tx-text-2);
}

body.tx-o-firmie .tof-answer__body > p,
body.tx-o-firmie .tof-answer__body > .tof-list {
	max-width: 40rem;
}

body.tx-o-firmie .tof-answer__body strong {
	color: var(--tx-white);
	font-weight: 600;
}

body.tx-o-firmie .tof-list {
	display: grid;
	gap: 10px;
}

body.tx-o-firmie .tof-list li {
	position: relative;
	padding-left: 26px;
}

body.tx-o-firmie .tof-list li::before {
	position: absolute;
	top: 0.62em;
	left: 4px;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--tx-green);
	content: "";
}

body.tx-o-firmie .tof-list--steps {
	counter-reset: tof-step;
}

body.tx-o-firmie .tof-list--steps li {
	padding-left: 40px;
	counter-increment: tof-step;
}

body.tx-o-firmie .tof-list--steps li::before {
	top: 0;
	left: 0;
	display: grid;
	place-items: center;
	width: 28px;
	height: 28px;
	background: var(--tx-green-soft);
	color: var(--tx-green);
	font-family: var(--tx-font-display);
	font-size: 0.875rem;
	font-weight: 700;
	content: counter(tof-step);
}

/* Tabele: dane firmy i wegiel */
body.tx-o-firmie .tof-table-wrap {
	overflow-x: auto;
	border: 1px solid var(--tx-line);
	border-radius: var(--tx-r-lg);
	background: var(--tx-coal-850);
}

body.tx-o-firmie .tof-table {
	width: 100%;
	border-collapse: collapse;
	font-size: 1rem;
	line-height: 1.45;
}

body.tx-o-firmie .tof-table caption {
	padding: 14px 16px 2px;
	color: var(--tx-text-3);
	font-family: var(--tx-font-display);
	font-size: 0.875rem;
	font-weight: 600;
	text-align: left;
	caption-side: top;
}

body.tx-o-firmie .tof-table th,
body.tx-o-firmie .tof-table td {
	padding: 12px 16px;
	border-bottom: 1px solid var(--tx-line);
	text-align: left;
	vertical-align: top;
}

body.tx-o-firmie .tof-table tr:last-child > * {
	border-bottom: 0;
}

body.tx-o-firmie .tof-table thead th {
	color: var(--tx-text-3);
	font-family: var(--tx-font-display);
	font-size: 0.875rem;
	font-weight: 600;
	white-space: nowrap;
}

body.tx-o-firmie .tof-table tbody th {
	color: var(--tx-text-2);
	font-weight: 600;
}

body.tx-o-firmie .tof-table td {
	color: var(--tx-white);
}

body.tx-o-firmie .tof-table small {
	display: block;
	color: var(--tx-text-3);
	font-size: 0.875rem;
	font-weight: 400;
}

body.tx-o-firmie .tof-table .tof-num {
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

body.tx-o-firmie .tof-table .tof-tel {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	font-size: 1.0625rem;
}

body.tx-o-firmie .tof-table--facts tbody th {
	width: 38%;
}

/* Dane firmy: na telefonie etykieta nad wartoscia */
@media (max-width: 599px) {
	body.tx-o-firmie .tof-table--facts tr {
		display: grid;
		padding: 12px 16px;
		border-bottom: 1px solid var(--tx-line);
	}

	body.tx-o-firmie .tof-table--facts tr:last-child {
		border-bottom: 0;
	}

	body.tx-o-firmie .tof-table--facts th,
	body.tx-o-firmie .tof-table--facts td {
		padding: 0;
		border: 0;
	}

	body.tx-o-firmie .tof-table--facts tbody th {
		display: block;
		width: auto;
		color: var(--tx-text-3);
		font-size: 0.875rem;
	}
}

/* Wegiel: na telefonie kazdy sortyment jako karta */
@media (max-width: 767px) {
	body.tx-o-firmie .tof-table--coal thead {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip-path: inset(50%);
	}

	body.tx-o-firmie .tof-table--coal tr {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 10px 16px;
		padding: 16px;
		border-bottom: 1px solid var(--tx-line);
	}

	body.tx-o-firmie .tof-table--coal tr:last-child {
		border-bottom: 0;
	}

	body.tx-o-firmie .tof-table--coal th,
	body.tx-o-firmie .tof-table--coal td {
		padding: 0;
		border: 0;
	}

	body.tx-o-firmie .tof-table--coal tbody th {
		grid-column: 1 / -1;
		color: var(--tx-white);
		font-family: var(--tx-font-display);
		font-size: 1.0625rem;
	}

	body.tx-o-firmie .tof-table--coal td[data-label]::before {
		display: block;
		color: var(--tx-text-2);
		font-size: 0.875rem;
		font-weight: 600;
		content: attr(data-label);
	}
}

/* Gdzie kupic: pod nazwa sortymentu, z kropka dostepnosci jak w cenniku */
body.tx-o-firmie .tof-forms {
	display: flex;
	flex-wrap: wrap;
	gap: 0 16px;
	margin-top: 4px;
	font-family: var(--tx-font-body);
	font-size: 0.9375rem;
	font-weight: 400;
}

body.tx-o-firmie .tof-forms > * {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	min-height: 36px;
}

body.tx-o-firmie .tof-forms > *::before {
	width: 7px;
	height: 7px;
	flex: none;
	border-radius: 50%;
	background: var(--tx-green);
	content: "";
}

body.tx-o-firmie .tof .tof-forms__brak {
	color: var(--tx-alert);
}

body.tx-o-firmie .tof-forms > .tof-forms__brak::before {
	background: var(--tx-alert);
}

body.tx-o-firmie .tof-note {
	max-width: 40rem;
	color: var(--tx-text-3);
	font-size: 0.9375rem;
}

/* Fakty w punktach (dostawa) */
body.tx-o-firmie .tof-facts {
	border-top: 1px solid var(--tx-line);
}

body.tx-o-firmie .tof-facts > div {
	display: grid;
	gap: 4px;
	padding: 14px 0;
	border-bottom: 1px solid var(--tx-line);
}

body.tx-o-firmie .tof-facts dt {
	color: var(--tx-white);
	font-family: var(--tx-font-display);
	font-size: 1rem;
	font-weight: 600;
}

body.tx-o-firmie .tof-facts dd {
	max-width: 40rem;
	color: var(--tx-text-2);
}

@media (min-width: 600px) {
	body.tx-o-firmie .tof-facts > div {
		grid-template-columns: 7.5rem minmax(0, 1fr);
		gap: 16px;
	}
}

/* Rachunek wagi */
body.tx-o-firmie .tof-calc {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 11rem), 1fr));
	gap: 10px;
	max-width: 40rem;
}

body.tx-o-firmie .tof-calc li {
	padding: 16px 18px;
	border: 1px solid var(--tx-line);
	border-radius: var(--tx-r-lg);
	background: var(--tx-coal-850);
}

body.tx-o-firmie .tof-calc strong {
	display: block;
	color: var(--tx-white);
	font-family: var(--tx-font-display);
	font-size: 1.5rem;
	font-weight: 700;
	line-height: 1.1;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

body.tx-o-firmie .tof-calc span {
	display: block;
	margin-top: 4px;
	color: var(--tx-text-2);
	font-size: 0.9375rem;
	line-height: 1.35;
}

/* Zdjecie floty w odpowiedzi o dostawie i podtytul nad sposobami rozladunku */
body.tx-o-firmie .tof-photo {
	max-width: 40rem;
	overflow: hidden;
	border-radius: var(--tx-r-lg);
	background: var(--tx-coal-800);
	box-shadow: var(--tx-shadow-photo);
	aspect-ratio: 4 / 3;
}

body.tx-o-firmie .tof .tof-photo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

body.tx-o-firmie .tof-subhead {
	margin-top: 8px;
	font-size: 1.25rem;
	line-height: 1.25;
}

/* Brak danych (np. kopalnia nie podana): slowami, wyciszone */
body.tx-o-firmie .tof-muted {
	color: var(--tx-text-3);
}

/* PGG: jeden ciemny panel, punkty rozdzielone linia, logo na malej bialej plytce */
body.tx-o-firmie .tof-pgg {
	padding: clamp(18px, 3vw, 28px);
	border: 1px solid var(--tx-line);
	border-radius: var(--tx-r-lg);
	background: var(--tx-coal-850);
}

body.tx-o-firmie .tof-pgg__head {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 14px 18px;
}

body.tx-o-firmie .tof-pgg__logo {
	display: block;
	flex: none;
	width: 128px;
	padding: 8px 10px;
	border-radius: 10px;
	background: var(--tx-white);
}

body.tx-o-firmie .tof-pgg__logo img {
	width: 100%;
	height: auto;
}

body.tx-o-firmie .tof-pgg__title {
	flex: 1 1 14rem;
	color: var(--tx-white);
	font-family: var(--tx-font-display);
	font-size: 1.125rem;
	font-weight: 600;
	line-height: 1.3;
}

body.tx-o-firmie .tof-pgg__list {
	margin-top: 18px;
}

body.tx-o-firmie .tof-pgg__list > div {
	padding: 16px 0;
	border-top: 1px solid var(--tx-line);
}

body.tx-o-firmie .tof-pgg__list dt {
	color: var(--tx-white);
	font-family: var(--tx-font-display);
	font-size: 1.0625rem;
	font-weight: 600;
	line-height: 1.3;
}

body.tx-o-firmie .tof-pgg__list dd {
	max-width: 40rem;
	margin-top: 6px;
	color: var(--tx-text-2);
}

body.tx-o-firmie .tof-pgg__foot {
	max-width: 40rem;
	padding-top: 16px;
	border-top: 1px solid var(--tx-line);
	color: var(--tx-text-2);
}

/* Dokumenty: lista rozdzielona liniami */
body.tx-o-firmie .tof-docs {
	border-top: 1px solid var(--tx-line);
}

body.tx-o-firmie .tof-doc {
	display: flex;
	align-items: flex-start;
	gap: 14px;
	padding: 16px 0;
	border-bottom: 1px solid var(--tx-line);
}

body.tx-o-firmie .tof-doc__icon {
	display: grid;
	place-items: center;
	width: 40px;
	height: 40px;
	flex: none;
	border-radius: 50%;
	background: var(--tx-green-soft);
	color: var(--tx-green);
}

body.tx-o-firmie .tof-doc__icon svg {
	width: 21px;
	height: 21px;
}

body.tx-o-firmie .tof-doc__text {
	padding-top: 2px;
}

body.tx-o-firmie .tof-doc__text strong {
	display: block;
	color: var(--tx-white);
	font-family: var(--tx-font-display);
	font-size: 1.0625rem;
	font-weight: 600;
	line-height: 1.3;
}

body.tx-o-firmie .tof-doc__text > span {
	display: block;
	margin-top: 2px;
	color: var(--tx-text-2);
}

body.tx-o-firmie .tof-doc__sub {
	display: grid;
	gap: 4px;
	margin-top: 6px;
	color: var(--tx-text-2);
}

/* Opinie */
body.tx-o-firmie .tof-rating {
	display: inline-flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px 14px;
	min-height: 56px;
	padding: 10px 18px 10px 12px;
	border-radius: var(--tx-r);
	background: var(--tx-white);
	color: var(--tx-ink);
	text-decoration: none;
}

body.tx-o-firmie .tof a.tof-rating {
	color: var(--tx-ink);
	text-decoration: none;
	transition: box-shadow var(--tx-fast) var(--tx-ease);
}

/* Biala plakietka: fokus zielony (bialy obrys zlalby sie z tlem) */
body.tx-o-firmie .tof a.tof-rating:focus-visible {
	outline: 3px solid var(--tx-green);
	outline-offset: 3px;
}

@media (hover: hover) and (pointer: fine) {
	body.tx-o-firmie .tof a.tof-rating:hover {
		box-shadow: 0 0 0 3px var(--tx-green-line);
	}
}

body.tx-o-firmie .tof-rating svg.tof-g {
	width: 30px;
	height: 30px;
	flex: none;
}

body.tx-o-firmie .tof-answer__body .tof-rating strong {
	color: var(--tx-ink);
	font-family: var(--tx-font-display);
	font-size: 1.5rem;
	font-weight: 700;
	line-height: 1;
}

body.tx-o-firmie .tof-rating__count {
	color: var(--tx-ink-2);
	font-size: 0.9375rem;
	font-weight: 600;
}

body.tx-o-firmie .tof-rating .tof-stars {
	display: inline-flex;
	gap: 2px;
	color: var(--tx-star);
}

body.tx-o-firmie .tof-stars svg {
	width: 16px;
	height: 16px;
}

body.tx-o-firmie .tof-quotes {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
	gap: 12px;
}

body.tx-o-firmie .tof-quote {
	display: flex;
	flex-direction: column;
	gap: 14px;
	padding: 20px;
	border: 1px solid var(--tx-line);
	border-radius: var(--tx-r-lg);
	background: var(--tx-coal-850);
}

body.tx-o-firmie .tof-quote p {
	color: var(--tx-text);
	font-size: 1rem;
	line-height: 1.55;
	white-space: pre-line;
}

body.tx-o-firmie .tof-quote__by {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-top: auto;
	white-space: normal;
}

body.tx-o-firmie .tof-quote__avatar {
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	flex: none;
	overflow: hidden;
	border-radius: 50%;
	background: var(--tx-coal-700);
	color: var(--tx-white);
	font-family: var(--tx-font-display);
	font-weight: 600;
}

body.tx-o-firmie .tof-quote__avatar img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

body.tx-o-firmie .tof-quote cite {
	display: block;
	color: var(--tx-white);
	font-style: normal;
	font-weight: 600;
	line-height: 1.3;
}

body.tx-o-firmie .tof-quote small {
	display: block;
	color: var(--tx-text-3);
	font-size: 0.875rem;
}

/* Pytania */
body.tx-o-firmie .tof-faq {
	display: grid;
	gap: 8px;
}

body.tx-o-firmie .tof-faq details {
	border: 1px solid var(--tx-line);
	border-radius: var(--tx-r-lg);
	background: var(--tx-coal-850);
}

body.tx-o-firmie .tof-faq summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	min-height: 60px;
	padding: 14px 18px;
	color: var(--tx-white);
	font-family: var(--tx-font-display);
	font-size: 1.0625rem;
	font-weight: 600;
	line-height: 1.3;
	list-style: none;
	cursor: pointer;
}

body.tx-o-firmie .tof-faq summary::-webkit-details-marker {
	display: none;
}

/* Plus i minus rysowane dwiema kreskami (nie znakami pisma): rowne i wysrodkowane w kazdym foncie */
body.tx-o-firmie .tof-faq summary::after {
	width: 28px;
	height: 28px;
	flex: none;
	border-radius: 50%;
	background:
		linear-gradient(var(--tx-green), var(--tx-green)) center / 12px 2px no-repeat,
		linear-gradient(var(--tx-green), var(--tx-green)) center / 2px 12px no-repeat,
		var(--tx-green-soft);
	content: "";
}

body.tx-o-firmie .tof-faq details[open] summary::after {
	background:
		linear-gradient(var(--tx-green), var(--tx-green)) center / 12px 2px no-repeat,
		var(--tx-green-soft);
}

body.tx-o-firmie .tof-faq details > div {
	max-width: 40rem;
	padding: 0 18px 18px;
	color: var(--tx-text-2);
}

/* --- 5. Kontakt na koniec ------------------------------------------------- */

body.tx-o-firmie .tof-end {
	padding: clamp(24px, 5vw, 48px);
	border: 1px solid var(--tx-line);
	border-radius: var(--tx-r-lg);
	background: var(--tx-coal-850);
}

body.tx-o-firmie .tof-end .tof-lead {
	max-width: 40em;
	margin-top: 12px;
}

/* --- Ruch ------------------------------------------------------------------ */
/* Dwa momenty, kazdy raz. Kreska pisaka pod "Twoje cieplo" rysuje sie od lewej po wejsciu na
   strone (jak na stronie glownej, 900 ms). Na osi czasu przy przewijaniu linia dochodzi do
   kolejnej karty (750 ms, lagodne wejscie i wyjscie), a pierscien i ikona wezla zapalaja sie na
   zielono, kiedy linia do niego dojdzie. Stan poczatkowy osi ustawia skrypt zaraz po <ol> ("is-armed", przed narysowaniem
   kart), gdy os zaczyna sie w dolnych 60 % ekranu albo nizej: na telefonie pierwsza karta zapala sie
   tuz po wejsciu, kolejne przy przewijaniu. Bez skryptu i przy ograniczonym ruchu wszystko jest od
   razu w stanie koncowym. Tekst i zdjecia kart nigdy nie sa ukryte. Tylko transform i clip-path. */

@media (prefers-reduced-motion: no-preference) {
	body.tx-o-firmie .tof-hero .tof-mark__stroke {
		animation: tof-pisak 900ms var(--tx-ease) 300ms both;
	}

	body.tx-o-firmie .tof-steps.is-armed .tof-step::before {
		transform: scaleY(0);
	}

	body.tx-o-firmie .tof-steps.is-armed .tof-step__node {
		border-color: var(--tx-line-strong);
		color: var(--tx-text-3);
		transform: scale(0.86);
	}

	body.tx-o-firmie .tof-steps.is-armed .tof-step.is-on::before {
		transform: scaleY(1);
		transition: transform 750ms cubic-bezier(0.65, 0, 0.35, 1);
	}

	body.tx-o-firmie .tof-steps.is-armed .tof-step.is-on .tof-step__node {
		border-color: var(--tx-green);
		color: var(--tx-green);
		transform: scale(1);
		transition:
			border-color 260ms var(--tx-ease) var(--tof-node-delay),
			color 260ms var(--tx-ease) var(--tof-node-delay),
			transform 520ms var(--tx-ease) var(--tof-node-delay);
	}
}

@keyframes tof-pisak {
	from {
		clip-path: inset(0 100% 0 0);
	}

	to {
		clip-path: inset(0 0 0 0);
	}
}

@media (prefers-reduced-motion: reduce) {
	body.tx-o-firmie .tof-btn,
	body.tx-o-firmie .tof-pillar__logo,
	body.tx-o-firmie .tof a.tof-rating,
	body.tx-o-firmie .tof-toc summary svg {
		transition: none;
	}

	body.tx-o-firmie .tof-btn:active,
	body.tx-o-firmie .tof a.tof-pillar:hover .tof-pillar__logo,
	body.tx-o-firmie .tof a.tof-pillar:active .tof-pillar__logo {
		transform: none;
	}
}