/* Podstrony oferty: „Zajecia dla dzieci", „Studio Treningowe" i „Trening personalny".
   Uklad przepisany z design/claude-design/home/ (Dzieci.dc.html, Dorosli.dc.html,
   Personalny.dc.html). Prymitywy sekcji, tabela cennika i akordeon FAQ siedza
   w sekcje.css - tutaj jest tylko to, czego nie ma w innych widokach.

   Jeden arkusz na wszystkie trzy, bo hero, zasady, cennik, kroki, prowadzacy, opinie
   i blok zamykajacy sa w nich tym samym klockiem. Osobne pliki roznilyby sie kilkoma
   sekcjami i rozjechaly przy pierwszej poprawce wspolnej.

   Interakcje (zakladki cennika, filtry grafiku) stoja na ukrytych polach radio. Zaden
   z tych elementow nie potrzebuje JS, wiec zadna z podstron nie laduje skryptu. */

/* ---------- Hero ---------- */

.fa-podhero { background: var(--fa-ink-850); overflow: hidden; }

.fa-podhero__scena {
	position: relative;
	display: flex;
	align-items: flex-end;
	min-height: clamp(380px, 32vw, 500px);
	overflow: hidden;
}

.fa-podhero__zdjecie {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 60% 46%;
}

/* Na kadrze ze Studia postacie stoja bardziej z prawej, wiec przyciemnienie pod tekstem
   zjadaloby je przy domyslnym kadrowaniu. */
.fa-podhero--studio .fa-podhero__zdjecie { object-position: 68% 50%; }

/* Makieta kadruje zdjecie treningu personalnego na 62% 42% - postac jest tam wyzej
   niz na pozostalych dwoch. */
.fa-podhero--personalny .fa-podhero__zdjecie { object-position: 62% 42%; }

/* Tekst siedzi na zdjeciu, wiec kontrast musi robic przycmienie, a nie nadzieja. */
.fa-podhero__wygaszenie {
	position: absolute;
	inset: 0;
	background: linear-gradient(90deg, var(--fa-ink-850) 0%, rgb(20 20 23 / 0.92) 34%, rgb(20 20 23 / 0.35) 68%, rgb(20 20 23 / 0.55) 100%);
}

.fa-podhero__dol {
	position: absolute;
	inset: auto 0 0;
	height: 42%;
	background: linear-gradient(180deg, rgb(20 20 23 / 0) 0%, var(--fa-ink-850) 100%);
}

.fa-podhero__pas {
	position: absolute;
	right: -6%;
	top: -30%;
	width: 40%;
	opacity: 0.2;
	pointer-events: none;
}

.fa-podhero__tresc {
	position: relative;
	width: 100%;
	max-width: 1360px;
	margin-inline: auto;
	padding: clamp(44px, 5.4vw, 80px) clamp(24px, 4vw, 40px) clamp(32px, 3.6vw, 52px);
}

.fa-podhero__tytul {
	font-family: var(--fa-font-display);
	font-weight: 800;
	font-size: clamp(48px, 6.4vw, 100px);
	line-height: 0.9;
	letter-spacing: -0.01em;
	text-transform: uppercase;
	margin: 0 0 24px;
}

.fa-podhero__lead {
	font-size: clamp(16px, 1.3vw, 20px);
	line-height: 1.62;
	color: var(--fa-text-bright);
	margin: 0;
	text-wrap: pretty;
}

.fa-podhero .fa-nad { margin-bottom: 18px; }

/* Hero konczy sie wezwaniem do zapisu, tak samo jak na stronie glownej. Bez tego pierwszy
   ekran podstrony nie ma zadnego wyjscia dalej, a nastepne pada dopiero przy cenniku,
   dwa ekrany nizej. */
.fa-podhero__cta { display: flex; flex-wrap: wrap; gap: 14px; margin-top: clamp(24px, 2.6vw, 34px); }

/* ---------- Trzy projekty (Studio) ---------- */

.fa-projekty { position: relative; overflow: hidden; }

.fa-projekty__dekor {
	position: absolute;
	left: -10%;
	bottom: -24%;
	width: 38%;
	opacity: 0.1;
	pointer-events: none;
}

.fa-projekty .fa-sekcja__srodek { position: relative; }

.fa-projekty__siatka {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: clamp(20px, 2.2vw, 30px);
	margin-top: clamp(32px, 3.6vw, 48px);
}

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

/* Kolor projektu wchodzi z HTML-a przez `--fa-projekt`, bo pochodzi z fa-core i nowy
   projekt w ofercie nie ma prawa wymagac nowej reguly w arkuszu. */
.fa-projekt {
	display: flex;
	flex-direction: column;
	background: var(--fa-ink-800);
	border: 1px solid var(--fa-line);
	padding: clamp(26px, 2.6vw, 36px);
}

.fa-projekt__pasek {
	display: block;
	width: 64px;
	height: 8px;
	background: var(--fa-projekt, var(--fa-orange-500));
	transform: skewX(-24deg);
}

.fa-projekt__nazwa {
	font-family: var(--fa-font-display);
	font-weight: 800;
	font-size: clamp(26px, 2.4vw, 34px);
	line-height: 1;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	color: var(--fa-text-primary);
	margin: 22px 0 8px;
}

.fa-projekt__rola { font-size: var(--fa-text-14); line-height: 1.5; color: var(--fa-text-secondary); margin: 0 0 20px; }

/* Lista zajec, nie ozdobniki: czytnik ekranu ma powiedziec „lista, cztery pozycje". */
.fa-projekt__zajecia {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	list-style: none;
	margin: 0 0 22px;
	padding: 0;
}

.fa-projekt__zajecia li {
	font-family: var(--fa-font-display);
	font-weight: 700;
	font-size: var(--fa-text-13);
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--fa-text-bright);
	padding: 7px 12px;
	border: 1px solid var(--fa-line-strong);
}

.fa-projekt__opis { font-size: var(--fa-text-16); line-height: 1.7; color: var(--fa-text-bright); margin: 0 0 26px; text-wrap: pretty; }

.fa-projekt__stopka {
	margin-top: auto;
	padding-top: 20px;
	border-top: 1px solid var(--fa-line);
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 8px;
}

.fa-projekt__meta { font-size: var(--fa-text-14); line-height: 1.55; color: var(--fa-text-muted); margin: 0; }

.fa-projekt__stopka .fa-link-akcent { margin-top: 10px; }

/* ---------- Jak to dziala ---------- */

.fa-zasady {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: clamp(20px, 2.2vw, 32px);
	margin-top: clamp(32px, 3.6vw, 48px);
}

@media (max-width: 1080px) { .fa-zasady { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px) { .fa-zasady { grid-template-columns: 1fr; } }

.fa-zasady__karta {
	background: var(--fa-ink-800);
	border: 1px solid var(--fa-line);
	border-top: 3px solid var(--fa-orange-500);
	padding: clamp(24px, 2.4vw, 32px);
}

.fa-zasady__tytul {
	font-family: var(--fa-font-display);
	font-weight: 800;
	font-size: 21px;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	color: var(--fa-text-primary);
	margin: 0 0 14px;
}

.fa-zasady__tresc { font-size: var(--fa-text-15); line-height: 1.66; color: var(--fa-text-secondary); margin: 0; text-wrap: pretty; }

/* ---------- Cennik ---------- */

.fa-cennik { position: relative; overflow: hidden; }

.fa-cennik__dekor {
	position: absolute;
	right: -8%;
	top: -20%;
	width: 34%;
	opacity: 0.14;
	pointer-events: none;
}

.fa-cennik .fa-sekcja__srodek { position: relative; }

.fa-cennik:has(#cennik-miesiecznie:checked) .fa-cennik__panel--miesiecznie,
.fa-cennik:has(#cennik-sezon:checked) .fa-cennik__panel--sezon { display: block; }

.fa-cennik:has(#cennik-miesiecznie:checked) .fa-cennik__tab--miesiecznie,
.fa-cennik:has(#cennik-sezon:checked) .fa-cennik__tab--sezon {
	background: rgb(255 255 255 / 0.07);
	color: var(--fa-text-primary);
}

.fa-cennik:has(#cennik-miesiecznie:checked) .fa-cennik__tab--miesiecznie::before,
.fa-cennik:has(#cennik-sezon:checked) .fa-cennik__tab--sezon::before { background: var(--fa-orange-500); }

/* Najtansza stawka w wierszu (subskrypcja z karta) i kwota porownawcza w widoku rocznym.
   Ta sama kolumna, dwa znaczenia, wiec dwa warianty komorki zamiast jednego wyroznika. */
.fa-cennik__cena--najtansza {
	font-weight: 800;
	background: var(--fa-orange-wash);
	box-shadow: inset 3px 0 0 var(--fa-orange-500);
}

.fa-cennik__cena--zamiast { color: var(--fa-text-muted); text-decoration: line-through; }

/* Ostatnia kolumna jest najtansza tylko tam, gdzie kwoty sa porownywalne: w miesiecznym
   cenniku Studia i w przeliczeniu na osobe przy treningu personalnym. W cenniku za cala
   grupe ta sama kolumna trzyma kwoty najwieksze i pomaranczowy naglowek klamalby. */
.fa-cennik__panel--miesiac .fa-cennik__th--ostatnia,
.fa-cennik__panel--osoba .fa-cennik__th--ostatnia { color: var(--fa-orange-500); }

.fa-cennik__nota {
	font-size: var(--fa-text-16);
	line-height: 1.7;
	color: var(--fa-text-secondary);
	margin: clamp(24px, 2.6vw, 34px) 0 0;
	padding-left: 16px;
	border-left: 2px solid var(--fa-orange-edge);
	text-wrap: pretty;
}

.fa-cennik__dodatki {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: clamp(24px, 2.6vw, 44px);
	margin-top: clamp(28px, 3vw, 40px);
	padding-top: clamp(24px, 2.6vw, 34px);
	border-top: 1px solid rgb(255 255 255 / 0.08);
}

.fa-cennik__etykieta {
	font-family: var(--fa-font-display);
	font-weight: 700;
	font-size: var(--fa-text-13);
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--fa-text-muted);
	margin: 0 0 10px;
}

.fa-cennik__kwota {
	font-family: var(--fa-font-display);
	font-weight: 800;
	font-size: var(--fa-text-32);
	color: var(--fa-text-primary);
	margin: 0 0 10px;
}

.fa-cennik__opis { font-size: var(--fa-text-14); line-height: 1.65; color: var(--fa-text-muted); margin: 0; text-wrap: pretty; }

.fa-cennik__opis + .fa-cennik__opis { margin-top: 8px; }

/* ---------- Grafik ---------- */

.fa-grafik__etykieta {
	font-family: var(--fa-font-display);
	font-weight: 700;
	font-size: var(--fa-text-12);
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--fa-text-muted);
	margin: clamp(28px, 3vw, 40px) 0 12px;
}

.fa-grafik__wiek { display: flex; flex-wrap: wrap; gap: 10px; }

/* Pole radio stoi tuz przed swoja etykieta i swoim panelem, wiec przelaczanie to dwie
   reguly, a nie jedna na miejscowosc. Chipy i panele rozdziela `order`, bo w zrodle
   musza sasiadowac. */
.fa-grafik__wybor { display: flex; flex-wrap: wrap; gap: 10px; }
.fa-grafik__wybor > .fa-grafik__chip { order: 1; }
.fa-grafik__stan:checked + .fa-grafik__chip + .fa-grafik__panel { display: block; }

/* `min-width: 0` jest tu obowiazkowe: bez niego domyslne `min-width: auto` elementu flex
   bije `flex-basis: 100%` i panel rozpycha sie do szerokosci siatki (820 px), przez co
   cala strona przewija sie w bok na telefonie. */
.fa-grafik__panel { order: 2; flex: 0 0 100%; min-width: 0; display: none; }

.fa-grafik__stan { position: absolute; width: 1px; height: 1px; opacity: 0; }

.fa-grafik__chip {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	min-height: 44px;
	padding: 10px 18px;
	border: 1px solid var(--fa-line-strong);
	color: var(--fa-text-bright);
	font-size: var(--fa-text-14);
	cursor: pointer;
	transition: color 160ms ease, background 160ms ease, border-color 160ms ease;
}

.fa-grafik__chip:hover { border-color: var(--fa-orange-500); color: var(--fa-text-primary); }

.fa-grafik__stan:checked + .fa-grafik__chip {
	background: var(--fa-orange-500);
	border-color: var(--fa-orange-500);
	color: var(--fa-text-on-accent);
}

.fa-grafik__stan:focus-visible + .fa-grafik__chip { outline: 2px solid var(--fa-focus); outline-offset: 3px; }

/* Kwadratowy znacznik projektu. Kolor nigdy nie niesie informacji sam - obok stoi nazwa
   tekstem, a znacznik ja tylko powtarza. */
.fa-grafik__znak { width: 10px; height: 10px; flex: none; }

/* Siatka tygodnia ma 820 px w poprzek, wiec wskaznik przewijania wchodzi wczesniej
   niz przy cenniku. Sam styl wskaznika siedzi w sekcje.css. */
@media (max-width: 900px) {
	.fa-grafik .fa-przewin { display: flex; }
}

/* Tlo sekcji grafiku jest o stopien jasniejsze niz cennika, wiec wygaszenie pod strzalka
   musi isc do tego samego koloru, inaczej widac pod nia ciemniejszy prostokat. */
.fa-grafik .fa-przewin::before {
	background: linear-gradient(270deg, rgb(20 20 23 / 0.92) 0%, rgb(20 20 23 / 0) 100%);
}

.fa-grafik__przewijak { overflow-x: auto; margin-top: clamp(26px, 3vw, 38px); }

.fa-grafik__siatka { display: grid; gap: 8px; min-width: 820px; }

.fa-grafik__dzien {
	font-family: var(--fa-font-display);
	font-weight: 700;
	font-size: var(--fa-text-15);
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--fa-text-muted);
	padding-left: 2px;
}

.fa-grafik__godzina {
	display: flex;
	align-items: center;
	font-family: var(--fa-font-display);
	font-weight: 700;
	font-size: 17px;
	color: var(--fa-text-primary);
}

/* U dzieci komorka nie ma projektu, wiec zostaje przy pomaranczu z fallbacku. */
.fa-grafik__komorka {
	display: flex;
	flex-direction: column;
	gap: 6px;
	padding: 14px 16px;
	background: var(--fa-ink-700);
	border-left: 3px solid var(--fa-projekt, var(--fa-orange-500));
	transition: opacity 160ms ease;
}

.fa-grafik__komorka--pusta { background: rgb(255 255 255 / 0.02); border-left-color: transparent; }

.fa-grafik__grupa {
	font-family: var(--fa-font-display);
	font-weight: 700;
	font-size: var(--fa-text-16);
	letter-spacing: 0.03em;
	color: var(--fa-text-primary);
}

.fa-grafik__sala {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: var(--fa-text-13);
	line-height: 1.4;
	color: var(--fa-text-muted);
}

/* Filtr przygasza cudze zajecia, zamiast je chowac: pusty wiersz w siatce znaczylby,
   ze o tej godzinie nie ma nic, a nie ze odfiltrowalismy.

   ponytail: po jednej regule na filtr, bo selektor nie umie porownac id zaznaczonego
   pola z atrybutem komorki. Kubelki wieku sa progami z `fa_dz_progi()` (dzis cztery);
   szesc regul daje zapas. Piaty prog wymaga dopisania szostej. */
.fa-grafik:has(#wiek-0:checked) .fa-grafik__komorka:not([data-wiek~="0"]),
.fa-grafik:has(#wiek-1:checked) .fa-grafik__komorka:not([data-wiek~="1"]),
.fa-grafik:has(#wiek-2:checked) .fa-grafik__komorka:not([data-wiek~="2"]),
.fa-grafik:has(#wiek-3:checked) .fa-grafik__komorka:not([data-wiek~="3"]),
.fa-grafik:has(#wiek-4:checked) .fa-grafik__komorka:not([data-wiek~="4"]),
.fa-grafik:has(#wiek-5:checked) .fa-grafik__komorka:not([data-wiek~="5"]),
.fa-grafik:has(#projekt-iron-queens:checked) .fa-grafik__komorka:not([data-projekt="iron-queens"]),
.fa-grafik:has(#projekt-strefa-formy:checked) .fa-grafik__komorka:not([data-projekt="strefa-formy"]),
.fa-grafik:has(#projekt-wolf-extreme:checked) .fa-grafik__komorka:not([data-projekt="wolf-extreme"]) { opacity: 0.25; }

.fa-grafik__prowadza { font-size: var(--fa-text-14); line-height: 1.65; color: var(--fa-text-secondary); margin: 22px 0 0; }

.fa-grafik__akcja { margin-top: clamp(28px, 3vw, 40px); }

.fa-grafik__nota,
.fa-grafik__pusto {
	font-size: var(--fa-text-15);
	line-height: 1.7;
	color: var(--fa-text-muted);
	margin: clamp(20px, 2.4vw, 30px) 0 0;
	text-wrap: pretty;
}

/* ---------- Dlaczego warto ---------- */

.fa-dlaczego { position: relative; overflow: hidden; }

.fa-dlaczego__dym {
	position: absolute;
	inset: 0 0 auto;
	width: 100%;
	height: 38%;
	object-fit: cover;
	object-position: 40% 30%;
	mix-blend-mode: screen;
	opacity: 0.45;
	pointer-events: none;
	mask-image: linear-gradient(180deg, #000 0%, rgb(0 0 0 / 0.3) 60%, transparent 100%);
}

.fa-dlaczego .fa-sekcja__srodek { position: relative; }

.fa-dlaczego__lead {
	font-family: var(--fa-font-display);
	font-weight: 600;
	font-size: clamp(22px, 2.4vw, 34px);
	line-height: 1.3;
	color: var(--fa-text-primary);
	margin: clamp(28px, 3vw, 40px) 0 clamp(36px, 4vw, 56px);
	text-wrap: pretty;
}

/* Numerowane kafle. Nie naleza do sekcji „Dlaczego warto": te same trzy klocki stoja
   jako „Jak zaczac" na treningu personalnym. */
.fa-kroki {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: clamp(24px, 2.8vw, 48px);
}

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

.fa-kroki__numer {
	font-family: var(--fa-font-display);
	font-weight: 800;
	font-size: clamp(38px, 4vw, 56px);
	line-height: 1;
	color: var(--fa-orange-500);
	margin: 0 0 16px;
}

.fa-kroki__tytul {
	font-family: var(--fa-font-display);
	font-weight: 800;
	font-size: var(--fa-text-24);
	letter-spacing: 0.02em;
	text-transform: uppercase;
	color: var(--fa-text-primary);
	margin: 0 0 12px;
}

.fa-kroki__opis { font-size: var(--fa-text-16); line-height: 1.7; color: var(--fa-text-secondary); margin: 0; text-wrap: pretty; }

.fa-kroki__akcja { margin-top: clamp(36px, 4vw, 56px); }

/* ---------- Kto prowadzi ---------- */

.fa-prowadzacy__siatka {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: clamp(20px, 2.2vw, 32px);
	margin-top: clamp(32px, 3.6vw, 48px);
}

@media (max-width: 1080px) { .fa-prowadzacy__siatka { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 760px) { .fa-prowadzacy__siatka { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.fa-prowadzacy__kadr {
	position: relative;
	aspect-ratio: 4 / 5;
	overflow: hidden;
	background: var(--fa-ink-700);
	margin-bottom: 16px;
}

/* Pliki są wycięte w 4:5, czyli dokładnie w proporcji kafla - `cover` nic tu nie przycina.
   Zostaje na wypadek zdjęcia dosłanego w innym formacie. */
.fa-prowadzacy__kadr img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; display: block; }

/* Zaslepka pod portret, ktorego jeszcze nie mamy. Inicjaly zamiast szarej plamy, zeby kafel
   dalo sie powiazac z nazwiskiem pod spodem, i ukosne pasy pod katem marki, zeby w siatce
   zdjec nie czytal sie jako dziura. Kat ten sam co `.fa-kreska`. */
.fa-prowadzacy__inicjaly {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: var(--fa-font-display);
	font-weight: 800;
	font-size: clamp(40px, 5vw, 64px);
	letter-spacing: 0.04em;
	color: var(--fa-orange-500);
	background:
		repeating-linear-gradient(
			110deg,
			transparent 0 14px,
			rgb(253 130 2 / 0.16) 14px 20px,
			transparent 20px 46px
		),
		var(--fa-orange-tint);
}

.fa-prowadzacy__znak { position: absolute; left: 0; bottom: 0; width: 46px; height: 5px; background: var(--fa-orange-500); }

.fa-prowadzacy__imie {
	font-family: var(--fa-font-display);
	font-weight: 800;
	font-size: 21px;
	line-height: 1.15;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	color: var(--fa-text-primary);
	margin: 0 0 8px;
}

.fa-prowadzacy__gdzie { font-size: var(--fa-text-14); line-height: 1.55; color: var(--fa-text-muted); margin: 0; }

.fa-prowadzacy__akcja { margin: clamp(32px, 3.6vw, 48px) 0 0; }

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

.fa-opinie__siatka {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: clamp(20px, 2.2vw, 32px);
	margin-top: clamp(32px, 3.6vw, 48px);
}

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

.fa-opinie__karta {
	display: flex;
	flex-direction: column;
	margin: 0;
	padding: clamp(24px, 2.4vw, 34px);
	background: var(--fa-ink-800);
	border: 1px solid var(--fa-line);
	border-top: 2px solid var(--fa-orange-edge);
}

.fa-opinie__cudzyslow {
	font-family: var(--fa-font-display);
	font-weight: 800;
	font-size: 46px;
	line-height: 0.6;
	color: var(--fa-orange-500);
	margin-bottom: 18px;
}

.fa-opinie__karta blockquote {
	margin: 0 0 22px;
	font-size: var(--fa-text-16);
	line-height: 1.68;
	color: var(--fa-text-bright);
	text-wrap: pretty;
}

/* Podpis to dwie linie: imie autora i serwis, z ktorego cytat pochodzi. Serwis mowi
   czytelnikowi, ze opinie da sie sprawdzic u zrodla, i dlatego nie jest schowany. */
.fa-opinie__karta figcaption { margin-top: auto; display: flex; flex-direction: column; gap: 3px; }

.fa-opinie__autor { font-size: var(--fa-text-14); font-weight: 500; color: var(--fa-text-bright); }

.fa-opinie__zrodlo {
	font-family: var(--fa-font-display);
	font-weight: 700;
	font-size: var(--fa-text-12);
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--fa-text-muted);
}

.fa-opinie__akcja { margin-top: clamp(32px, 3.6vw, 48px); }

/* ---------- Zaproszenie do zapisu ---------- */

.fa-zaproszenie {
	position: relative;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
	gap: clamp(28px, 3.4vw, 64px);
	align-items: center;
	padding: clamp(44px, 5vw, 76px) clamp(32px, 4vw, 72px);
	color: var(--fa-text-on-accent);
	background: linear-gradient(135deg, var(--fa-orange-400) 0%, var(--fa-orange-500) 46%, var(--fa-orange-600) 100%);
	clip-path: polygon(0 0, 100% 0, 100% calc(100% - 72px), calc(100% - 72px) 100%, 0 100%);
}

.fa-zaproszenie__tytul {
	font-family: var(--fa-font-display);
	font-weight: 800;
	font-size: clamp(34px, 4vw, 60px);
	line-height: 0.98;
	letter-spacing: 0.01em;
	text-transform: uppercase;
	color: var(--fa-text-on-accent);
	margin: 0 0 18px;
}

.fa-zaproszenie__tekst {
	font-size: clamp(15px, 1.2vw, 18px);
	line-height: 1.6;
	color: var(--fa-orange-tint);
	margin: 0;
	text-wrap: pretty;
}

/* Przyciski w pomaranczowym bloku ida do prawej krawedzi (decyzja Rafala). */
.fa-zaproszenie__akcje { display: flex; flex-wrap: wrap; gap: 14px; justify-content: flex-end; }

@media (max-width: 720px) { .fa-zaproszenie__akcje { justify-content: flex-start; } }

.fa-btn--ciemny { background: var(--fa-ink-800); color: var(--fa-orange-500); padding: 17px 30px; }
.fa-btn--ciemny:hover { background: var(--fa-ink-950); color: var(--fa-orange-400); }

.fa-btn--obrys-ciemny { border: 1px solid rgb(22 22 26 / 0.55); color: var(--fa-text-on-accent); padding: 16px 28px; }
.fa-btn--obrys-ciemny:hover { background: rgb(22 22 26 / 0.14); border-color: var(--fa-text-on-accent); }

/* ---------- „O nas": pasek liczb ---------- */

/* Pasek jest wezszy od sekcji i ma wlasny padding, bo ma czytac sie jak przerwa miedzy
   hero a trescia, a nie jak kolejna sekcja. Stad tez obrysy z gory i z dolu. */
.fa-onas-liczby {
	background: #17171a;
	border-block: 1px solid var(--fa-line);
}

.fa-onas-liczby__srodek {
	max-width: 1360px;
	margin-inline: auto;
	padding: clamp(32px, 3.6vw, 52px) clamp(24px, 4vw, 40px);
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: clamp(20px, 2.4vw, 40px);
}

@media (max-width: 760px) { .fa-onas-liczby__srodek { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Kreska oddziela pozycje, wiec nie stoi przy pierwszej w wierszu. Przy dwoch kolumnach
   pierwsza w wierszu jest co druga, stad drugi warunek. */
.fa-onas-liczby__pozycja + .fa-onas-liczby__pozycja {
	border-left: 1px solid var(--fa-line-strong);
	padding-left: clamp(20px, 2.4vw, 40px);
}

@media (max-width: 760px) {
	.fa-onas-liczby__pozycja:nth-child(odd) { border-left: 0; padding-left: 0; }
}

.fa-onas-liczby__ile {
	font-family: var(--fa-font-display);
	font-weight: 800;
	font-size: clamp(44px, 5.4vw, 78px);
	line-height: 0.92;
	color: var(--fa-orange-500);
	margin: 0 0 10px;
}

.fa-onas-liczby__co {
	font-family: var(--fa-font-display);
	font-weight: 700;
	font-size: var(--fa-text-14);
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--fa-text-muted);
	margin: 0;
}

/* ---------- „O nas": kim jestesmy ---------- */

/* Zdjecie idzie do prawej krawedzi ekranu, bez marginesu kontenera, a panel z tekstem
   lezy na nim i wchodzi na nie ukosnym scieciem. Nachodzenie robi glebie, ktorej dwie
   rowne kolumny nie daja. */
.fa-onas-kim { position: relative; overflow: hidden; }

.fa-onas-kim__scena {
	position: relative;
	display: flex;
	align-items: center;
	min-height: clamp(520px, 44vw, 700px);
}

.fa-onas-kim__kadr { position: absolute; inset: 0 0 0 38%; overflow: hidden; }

.fa-onas-kim__kadr img { width: 100%; height: 100%; object-fit: cover; object-position: 46% 38%; display: block; }

/* Dwa przejscia zamiast jednego: w bok pod panel i w dol pod nastepna sekcje. Bez tego
   dolna krawedz zdjecia tnie sie z paskiem miejscowosci ostrym szwem. */
.fa-onas-kim__wygaszenie {
	position: absolute;
	inset: 0;
	background:
		linear-gradient(90deg, var(--fa-ink-900) 0%, rgb(16 16 19 / 0.2) 42%, rgb(16 16 19 / 0) 100%),
		linear-gradient(0deg, var(--fa-ink-900) 0%, rgb(16 16 19 / 0) 22%);
}

.fa-onas-kim__srodek {
	position: relative;
	width: 100%;
	max-width: 1440px;
	margin-inline: auto;
	padding: clamp(48px, 5vw, 80px) clamp(24px, 4vw, 40px);
}

.fa-onas-kim__panel {
	max-width: 700px;
	background: rgb(19 19 22 / 0.94);
	border-top: 3px solid var(--fa-orange-500);
	padding: clamp(32px, 3.4vw, 52px) clamp(30px, 3.2vw, 56px);
	clip-path: polygon(0 0, 100% 0, 100% calc(100% - 64px), calc(100% - 64px) 100%, 0 100%);
}

.fa-onas-kim__panel .fa-tytul-rzad { margin-bottom: 26px; }

.fa-onas-kim__panel p {
	font-size: var(--fa-text-16);
	line-height: 1.7;
	color: #c2c2c8;
	margin: 0 0 18px;
	text-wrap: pretty;
}

.fa-onas-kim__panel p:last-child { margin-bottom: 0; }

/* Ponizej 900 px zdjecie przestaje byc tlem i staje sie kadrem nad tekstem: przy waskim
   ekranie panel zaslanialby je w calosci, a scieciu nie byloby na czym lezec. */
@media (max-width: 900px) {
	.fa-onas-kim__scena { display: block; min-height: 0; }
	.fa-onas-kim__kadr { position: relative; inset: auto; aspect-ratio: 16 / 10; }
	.fa-onas-kim__wygaszenie { background: linear-gradient(0deg, var(--fa-ink-900) 0%, rgb(16 16 19 / 0) 42%); }
	.fa-onas-kim__srodek { padding-top: 0; }
	.fa-onas-kim__panel { max-width: none; background: none; padding-inline: 0; clip-path: none; }
}

/* ---------- „O nas": gdzie trenujemy ---------- */

/* Dziewiec szarych kafli czytalo sie jak lista do odhaczenia, wiec miejscowosci sa tu same
   w sobie grafika: nazwy wielkosci naglowka, wiersz po wierszu, oddzielone wlosowa linia. */
.fa-onas-gdzie__lista {
	list-style: none;
	margin: clamp(28px, 3vw, 40px) 0 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0 clamp(32px, 4vw, 72px);
}

@media (max-width: 760px) { .fa-onas-gdzie__lista { grid-template-columns: 1fr; } }

.fa-onas-gdzie__wiersz {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 20px;
	padding: clamp(16px, 1.6vw, 22px) 0;
	border-bottom: 1px solid var(--fa-line-strong);
}

.fa-onas-gdzie__nazwa {
	font-family: var(--fa-font-display);
	font-weight: 800;
	font-size: clamp(26px, 2.8vw, 40px);
	line-height: 1;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	color: var(--fa-text-primary);
}

/* Szczecinek jako jedyny ma komplet oferty i to jest tu jedyna roznica warta pokazania. */
.fa-onas-gdzie__wiersz.jest-pelna .fa-onas-gdzie__nazwa { color: var(--fa-orange-500); }

.fa-onas-gdzie__oferta {
	font-size: var(--fa-text-13);
	line-height: 1.45;
	letter-spacing: 0.04em;
	color: var(--fa-text-muted);
	text-align: right;
	flex: none;
	max-width: 190px;
}

.fa-onas-gdzie__akcja { margin-top: clamp(32px, 3.6vw, 48px); }

/* ---------- „O nas": zalozyciel ---------- */

/* Bez ramki i obrysu: w ramce bylby jedenastym kaflem siatki nizej. Kadr trzyma te same
   proporcje co kafle zespolu, wiec zdjecie zalozyciela wejdzie w to miejsce bez kadrowania
   go osobno - dzis stoi tam zaslepka z inicjalami. */
.fa-zalozyciel {
	display: grid;
	grid-template-columns: minmax(0, 0.8fr) minmax(0, 2fr);
	gap: clamp(28px, 3vw, 48px);
	align-items: start;
	margin: clamp(32px, 3.6vw, 48px) 0 clamp(44px, 5vw, 72px);
}

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

/* Kadr sam w sobie jest juz `.fa-prowadzacy__kadr`, wiec tu zostaje samo ograniczenie
   szerokosci: rozciagniety na cala kolumne wygladalby jak baner, nie jak portret. */
.fa-zalozyciel__kadr { max-width: 360px; }

.fa-zalozyciel__etykieta {
	display: inline-block;
	font-family: var(--fa-font-display);
	font-weight: 700;
	font-size: var(--fa-text-12);
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--fa-text-on-accent);
	background: var(--fa-orange-500);
	padding: 7px 14px;
	margin: 0 0 20px;
}

.fa-zalozyciel__imie {
	font-family: var(--fa-font-display);
	font-weight: 800;
	font-size: clamp(34px, 4vw, 60px);
	line-height: 0.96;
	letter-spacing: 0.01em;
	text-transform: uppercase;
	color: var(--fa-text-primary);
	margin: 0 0 12px;
}

.fa-zalozyciel__rola { font-size: var(--fa-text-16); line-height: 1.6; color: var(--fa-orange-500); margin: 0 0 26px; }

.fa-zalozyciel__akapit {
	font-size: var(--fa-text-16);
	line-height: 1.72;
	color: #c2c2c8;
	margin: 0 0 18px;
	text-wrap: pretty;
}

.fa-zalozyciel__akapit:last-child { margin-bottom: 0; }

/* Siatka zespolu to `.fa-prowadzacy__siatka` z podstron oferty. Tam ma margines gorny pod
   naglowek sekcji, a tutaj stoi pod blokiem zalozyciela, ktory ma juz swoj dolny. */
.fa-onas-zespol .fa-prowadzacy__siatka { margin-top: 0; }


/* ---------- „Trenerzy": lista ---------- */

/* Kadr `onas-zespol.jpg` ma trenera po lewej, dokladnie tam, gdzie siada tekst hero.
   Przesuniecie w prawo zostawia mu miejsce i nie kroi grupy z drugiego planu. */
.fa-podhero--trenerzy .fa-podhero__zdjecie { object-position: 74% 44%; }

/* Kafel z opisem jest odnosnikiem, wiec cel kliku to caly kafel, nie samo nazwisko.
   Bez opisu zostaje `div` i zadnego z tych stanow nie dostaje. */
.fa-trenerzy__karta {
	display: block;
	color: inherit;
	text-decoration: none;
}

.fa-trenerzy__karta .fa-prowadzacy__kadr img,
.fa-trenerzy__karta .fa-prowadzacy__inicjaly {
	transition: transform 0.4s ease, filter 0.3s ease;
}

.fa-trenerzy__karta:hover .fa-prowadzacy__kadr img { transform: scale(1.04); }
.fa-trenerzy__karta:hover .fa-prowadzacy__imie { color: var(--fa-orange-500); }

.fa-trenerzy__karta:focus-visible {
	outline: 2px solid var(--fa-focus);
	outline-offset: 4px;
}

/* Etykieta zalozyciela. Ten sam klocek co `.fa-zalozyciel__etykieta` na „O nas", tylko
   mniejszy: tam stoi obok naglowka, tu nad nazwiskiem w kaflu siatki. */
.fa-trenerzy__etykieta {
	display: inline-block;
	font-family: var(--fa-font-display);
	font-weight: 700;
	font-size: var(--fa-text-12);
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--fa-text-on-accent);
	background: var(--fa-orange-500);
	padding: 5px 10px;
	margin: 0 0 10px;
}

/* Sygnal, ze kafel gdzies prowadzi. Podkreslenie rysuje `border`, a nie `text-decoration`,
   zeby dalo sie je odsunac od tekstu. */
.fa-trenerzy__wiecej {
	display: inline-block;
	margin-top: 14px;
	font-family: var(--fa-font-display);
	font-weight: 700;
	font-size: var(--fa-text-13);
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--fa-orange-500);
	border-bottom: 1px solid transparent;
	padding-bottom: 2px;
}

.fa-trenerzy__karta:hover .fa-trenerzy__wiecej { border-bottom-color: var(--fa-orange-500); }

@media (prefers-reduced-motion: reduce) {
	.fa-trenerzy__karta .fa-prowadzacy__kadr img,
	.fa-trenerzy__karta .fa-prowadzacy__inicjaly { transition: none; }
	.fa-trenerzy__karta:hover .fa-prowadzacy__kadr img { transform: none; }
}

/* ---------- „Trenerzy": profil ---------- */

/* Profil nie dostaje bannerowego hero jak reszta podstron: bohaterem jest tu czlowiek,
   a zdjecie grupy nad jego nazwiskiem odbieraloby mu miejsce. Portret idzie w kolumne
   obok naglowka, w tej samej proporcji co kafle siatki. */
.fa-profil__glowa { padding-top: clamp(28px, 3vw, 44px); }

.fa-profil__wstecz { margin: 0 0 clamp(24px, 2.6vw, 36px); }

.fa-profil__wstecz a {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-family: var(--fa-font-display);
	font-weight: 700;
	font-size: var(--fa-text-13);
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--fa-text-muted);
	text-decoration: none;
}

.fa-profil__wstecz a:hover { color: var(--fa-orange-500); }

.fa-profil__rzad {
	display: grid;
	grid-template-columns: minmax(0, 0.72fr) minmax(0, 2fr);
	gap: clamp(28px, 3vw, 56px);
	align-items: start;
}

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

.fa-profil__kadr { max-width: 340px; }

.fa-profil__imie {
	font-family: var(--fa-font-display);
	font-weight: 800;
	font-size: clamp(38px, 5.2vw, 76px);
	line-height: 0.94;
	letter-spacing: 0.01em;
	text-transform: uppercase;
	color: var(--fa-text-primary);
	margin: 0 0 16px;
}

.fa-profil__rola {
	font-size: clamp(16px, 1.3vw, 20px);
	line-height: 1.6;
	color: var(--fa-orange-500);
	margin: 0;
	text-wrap: pretty;
}

/* „Prowadzi" siedzi w ramce, bo to jedyna czesc naglowka, ktora idzie z panelu i zmienia
   sie sama - reszta jest tekstem od klienta. Obrys oddziela jedno od drugiego. */
.fa-profil__prowadzi {
	margin-top: clamp(26px, 2.8vw, 38px);
	padding: 20px 24px;
	background: var(--fa-ink-800);
	border: 1px solid var(--fa-line);
	border-left: 3px solid var(--fa-orange-500);
}

.fa-profil__etykieta {
	font-family: var(--fa-font-display);
	font-weight: 700;
	font-size: var(--fa-text-12);
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--fa-text-muted);
	margin: 0 0 8px;
}

.fa-profil__zajecia {
	font-size: var(--fa-text-16);
	line-height: 1.6;
	color: var(--fa-text-bright);
	margin: 0;
}

.fa-profil__biogram { margin-top: clamp(28px, 3vw, 44px); }

.fa-profil__biogram p {
	font-size: var(--fa-text-18);
	line-height: 1.75;
	color: var(--fa-text-bright);
	margin: 0 0 22px;
	text-wrap: pretty;
}

.fa-profil__biogram p:last-child { margin-bottom: 0; }

/* ---------- Hero bez zdjecia: „Cennik" i „Lokalizacje" ---------- */

/* Bez zdjecia: na tych podstronach nie ma czego pokazac poza tabela i lista, wiec hero jest niski
   i od razu oddaje ekran tresci. Dekor z makiety (Cennik i Lokalizacje) - ukosny pas w rogu
   i dym przy dolnej krawedzi, wygaszony maska do tla. */
.fa-hero-tekst {
	position: relative;
	overflow: hidden;
	background: var(--fa-ink-850);
	padding: clamp(44px, 5vw, 76px) clamp(24px, 4vw, 40px) clamp(36px, 4vw, 56px);
}

.fa-hero-tekst__pas {
	position: absolute;
	right: -4%;
	top: -40%;
	width: 38%;
	opacity: 0.18;
	pointer-events: none;
}

.fa-hero-tekst__dym {
	position: absolute;
	inset: auto 0 0;
	width: 100%;
	height: 60%;
	object-fit: cover;
	object-position: 50% 40%;
	mix-blend-mode: screen;
	opacity: 0.35;
	pointer-events: none;
	mask-image: linear-gradient(0deg, #000 0%, transparent 100%);
}

.fa-hero-tekst__tresc { position: relative; max-width: 1360px; margin-inline: auto; }

.fa-hero-tekst .fa-nad { margin-bottom: 18px; }

.fa-hero-tekst .fa-podhero__tytul { font-size: clamp(44px, 5.6vw, 88px); margin-bottom: 22px; }

/* ---------- „Cennik": na czym oszczedzasz ---------- */

.fa-znizki__siatka {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: clamp(20px, 2.2vw, 32px);
	margin-top: clamp(28px, 3.2vw, 44px);
}

@media (max-width: 1080px) { .fa-znizki__siatka { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px) { .fa-znizki__siatka { grid-template-columns: 1fr; } }

.fa-znizki__karta {
	background: var(--fa-ink-800);
	border: 1px solid var(--fa-line);
	border-top: 3px solid var(--fa-orange-500);
	padding: clamp(24px, 2.4vw, 32px);
}

.fa-znizki__liczba {
	font-family: var(--fa-font-display);
	font-weight: 800;
	font-size: clamp(30px, 3vw, 40px);
	line-height: 1;
	color: var(--fa-orange-500);
	margin: 0 0 14px;
}

.fa-znizki__tytul {
	font-family: var(--fa-font-display);
	font-weight: 800;
	font-size: 19px;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	color: var(--fa-text-primary);
	margin: 0 0 12px;
}

.fa-znizki__tekst { font-size: var(--fa-text-15); line-height: 1.66; color: var(--fa-text-secondary); margin: 0; text-wrap: pretty; }

/* Wejscie bez abonamentu stoi pod kreska, a nie w piatym kaflu: to nie znizka, tylko
   najtanszy sposob, zeby w ogole przyjsc. */
.fa-znizki__wejscie {
	display: grid;
	grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
	gap: clamp(24px, 3vw, 48px);
	align-items: start;
	margin-top: clamp(28px, 3.2vw, 42px);
	padding-top: clamp(24px, 2.6vw, 34px);
	border-top: 1px solid var(--fa-line-strong);
}

@media (max-width: 760px) { .fa-znizki__wejscie { grid-template-columns: 1fr; } }

.fa-znizki__etykieta {
	font-family: var(--fa-font-display);
	font-weight: 700;
	font-size: var(--fa-text-13);
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--fa-text-muted);
	margin: 0 0 10px;
}

.fa-znizki__kwota {
	font-family: var(--fa-font-display);
	font-weight: 800;
	font-size: clamp(34px, 3.4vw, 46px);
	line-height: 1;
	color: var(--fa-text-primary);
	margin: 0 0 12px;
}

/* ---------- Dokumenty: regulamin, polityka prywatnosci, polityka zwrotow ---------- */

/* Hero bez dymu i nizszy niz na „Cenniku": pod tytulem stoi tylko data obowiazywania. */
.fa-hero-tekst--dokument { padding-bottom: clamp(32px, 3.6vw, 48px); }

.fa-hero-tekst__data { font-size: var(--fa-text-15); color: var(--fa-text-muted); margin: 0; }

.fa-dokument-sekcja {
	background: var(--fa-ink-900);
	padding-block: clamp(36px, 4.4vw, 64px) clamp(48px, 6vw, 88px);
}

/* Spis po lewej, przyklejony do gory; ponizej 1100 px wchodzi nad tresc jako zwykly blok. */
.fa-dokument {
	display: grid;
	grid-template-columns: 260px minmax(0, 1fr);
	gap: clamp(28px, 3.4vw, 64px);
	align-items: start;
}

.fa-dokument__spis {
	position: sticky;
	top: 96px;
	background: var(--fa-ink-800);
	border: 1px solid rgb(255 255 255 / 0.07);
	padding: 20px 22px;
}

@media (max-width: 1100px) {
	.fa-dokument { grid-template-columns: 1fr; }
	.fa-dokument__spis { position: static; }
}

.fa-dokument__etykieta {
	font-family: var(--fa-font-display);
	font-weight: 700;
	font-size: var(--fa-text-12);
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: #737A82;
	margin: 0 0 14px;
}

.fa-dokument__spis ol { list-style: none; margin: 0; padding: 0; }
.fa-dokument__spis li { border-bottom: 1px solid rgb(255 255 255 / 0.05); }

.fa-dokument__spis a {
	display: block;
	font-size: var(--fa-text-14);
	line-height: 1.45;
	color: var(--fa-text-secondary);
	padding: 8px 0;
	text-decoration: none;
}

.fa-dokument__spis a:hover { color: var(--fa-text-primary); }

/* Tresc to bloki ze strony (naglowek, akapit, lista, tabela), wiec style ida po znacznikach,
   nie po klasach. Pierwszy akapit („Obowiazuje od...") jest leadem. */
.fa-dokument__tresc > p:first-child {
	font-size: clamp(16px, 1.25vw, 18px);
	line-height: 1.75;
	color: #DDDDE2;
	margin: 0 0 20px;
}

.fa-dokument__tresc h2 {
	font-family: var(--fa-font-display);
	font-weight: 800;
	font-size: clamp(22px, 2.2vw, 30px);
	line-height: 1.1;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	color: var(--fa-text-primary);
	margin: clamp(32px, 3.6vw, 52px) 0 18px;
	padding-bottom: 12px;
	border-bottom: 2px solid rgb(253 130 2 / 0.5);
	scroll-margin-top: 96px;
}

.fa-dokument__tresc h3 {
	font-family: var(--fa-font-display);
	font-weight: 800;
	font-size: var(--fa-text-18);
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--fa-orange-500);
	margin: 22px 0 12px;
}

.fa-dokument__tresc p,
.fa-dokument__tresc li {
	font-size: var(--fa-text-16);
	line-height: 1.78;
	color: #C2C2C8;
	text-wrap: pretty;
}

.fa-dokument__tresc p { margin: 0 0 16px; }
.fa-dokument__tresc strong { color: var(--fa-text-primary); font-weight: 700; }
.fa-dokument__tresc a { color: var(--fa-orange-500); }
.fa-dokument__tresc a:hover { color: var(--fa-orange-400); }

.fa-dokument__tresc ul,
.fa-dokument__tresc ol {
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: 12px;
	margin: 0 0 16px;
	padding: 0;
}

.fa-dokument__tresc li { position: relative; padding-left: 22px; }

/* Punktor to skosny kwadrat, numer w wyliczeniu w pomaranczu - jak w makiecie. */
.fa-dokument__tresc ul li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.66em;
	width: 7px;
	height: 7px;
	background: var(--fa-orange-500);
	transform: skewX(-20deg);
}

.fa-dokument__tresc ol { counter-reset: fa-punkt; }
.fa-dokument__tresc ol li { padding-left: 30px; counter-increment: fa-punkt; }

.fa-dokument__tresc ol li::before {
	content: counter(fa-punkt) ".";
	position: absolute;
	left: 0;
	top: 0.05em;
	font-family: var(--fa-font-display);
	font-weight: 800;
	font-size: var(--fa-text-16);
	color: var(--fa-orange-500);
}

.fa-dokument__tresc .wp-block-table { margin: 0 0 16px; overflow-x: auto; }

.fa-dokument__tresc table {
	width: 100%;
	border-collapse: collapse;
	font-size: var(--fa-text-15);
	line-height: 1.5;
}

.fa-dokument__tresc th,
.fa-dokument__tresc td {
	text-align: left;
	vertical-align: top;
	padding: 10px 12px 10px 0;
	border-bottom: 1px solid var(--fa-line-strong);
	color: #C2C2C8;
}

.fa-dokument__tresc th {
	font-family: var(--fa-font-display);
	font-weight: 700;
	font-size: var(--fa-text-13);
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--fa-text-muted);
}

.fa-dokument__pytanie {
	margin-top: clamp(40px, 4.4vw, 64px);
	background: var(--fa-ink-800);
	border: 1px solid rgb(255 255 255 / 0.07);
	border-left: 3px solid var(--fa-orange-500);
	padding: clamp(22px, 2.2vw, 30px);
}

.fa-dokument__pytanie-tytul {
	font-family: var(--fa-font-display);
	font-weight: 800;
	font-size: var(--fa-text-20);
	letter-spacing: 0.02em;
	text-transform: uppercase;
	color: var(--fa-text-primary);
	margin: 0 0 12px;
}

.fa-dokument__pytanie p { font-size: var(--fa-text-15); line-height: 1.7; color: var(--fa-text-secondary); margin: 0 0 18px; }
.fa-dokument__pytanie a { color: var(--fa-orange-500); }
.fa-dokument__pytanie a:hover { color: var(--fa-orange-400); }
.fa-dokument__pozostale { display: flex; flex-wrap: wrap; gap: 10px 22px; margin: 0; }
.fa-dokument__pozostale .fa-link-akcent { padding-block: 0; }

/* ---------- Kontakt ---------- */

.fa-kontakt-sekcja {
	background: var(--fa-ink-900);
	padding-block: clamp(40px, 5vw, 72px) clamp(48px, 6vw, 88px);
}

.fa-kontakt {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 0.95fr);
	gap: clamp(28px, 3.4vw, 60px);
	align-items: start;
}

@media (max-width: 1100px) { .fa-kontakt { grid-template-columns: 1fr; } }

.fa-kontakt__dane { display: flex; flex-direction: column; gap: clamp(24px, 2.6vw, 34px); }

.fa-kontakt__karta {
	background: var(--fa-ink-800);
	border: 1px solid rgb(255 255 255 / 0.07);
	border-top: 3px solid var(--fa-orange-500);
	padding: clamp(24px, 2.4vw, 32px);
}

.fa-kontakt__etykieta {
	font-family: var(--fa-font-display);
	font-weight: 700;
	font-size: var(--fa-text-13);
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: #A8AEB6;
	margin: 0 0 10px;
}

.fa-kontakt__etykieta--cicha { letter-spacing: 0.16em; color: #737A82; }

.fa-kontakt__numer {
	display: inline-block;
	font-family: var(--fa-font-display);
	font-weight: 800;
	font-size: clamp(34px, 3.4vw, 46px);
	line-height: 1.1;
	letter-spacing: 0.03em;
	color: var(--fa-text-primary);
	margin: 0 0 6px;
	text-decoration: none;
}

.fa-kontakt__numer:hover { color: var(--fa-orange-400); }

.fa-kontakt__opis { font-size: var(--fa-text-15); line-height: 1.65; color: var(--fa-text-secondary); margin: 0 0 20px; }

.fa-kontakt__mail { font-size: var(--fa-text-16); color: var(--fa-orange-500); word-break: break-all; text-decoration: none; }
.fa-kontakt__mail:hover { color: var(--fa-orange-400); }

.fa-kontakt__adresy {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: clamp(20px, 2.2vw, 30px);
}

.fa-kontakt__adresy p:last-child { font-size: var(--fa-text-15); line-height: 1.75; color: #C2C2C8; margin: 0; }

@media (max-width: 760px) { .fa-kontakt__adresy { grid-template-columns: 1fr; } }

.fa-kontakt__sprawy-tytul { margin-bottom: clamp(18px, 2vw, 26px); }
.fa-kontakt__sprawy-tytul .fa-tytul { font-size: clamp(24px, 2.4vw, 34px); }

.fa-kontakt__sprawy { display: flex; flex-direction: column; gap: 12px; margin: 0; }

.fa-kontakt__sprawa {
	display: grid;
	grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
	gap: 6px 20px;
	padding: 16px 18px;
	background: var(--fa-ink-800);
	border: 1px solid rgb(255 255 255 / 0.07);
}

@media (max-width: 760px) { .fa-kontakt__sprawa { grid-template-columns: 1fr; } }

.fa-kontakt__sprawa dt {
	font-family: var(--fa-font-display);
	font-weight: 700;
	font-size: 17px;
	letter-spacing: 0.02em;
	color: var(--fa-text-primary);
}

.fa-kontakt__sprawa dd { margin: 0; font-size: var(--fa-text-15); line-height: 1.6; color: var(--fa-text-secondary); }

/* Formularz. Pola jak w checkoucie sklepu (sklep.css), ale ten arkusz tam nie wchodzi. */
.fa-kontakt__formularz-tytul { font-size: clamp(24px, 2.4vw, 32px); margin: 0 0 10px; }

.fa-kontakt__pola { display: flex; flex-direction: column; gap: 14px; }

.fa-kontakt__pole { display: block; font-size: var(--fa-text-14); letter-spacing: 0.02em; color: #A8AEB6; margin: 0; }

.fa-kontakt__rzad { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }

@media (max-width: 760px) { .fa-kontakt__rzad { grid-template-columns: 1fr; } }

.fa-kontakt__pola input:not([type="radio"]):not([type="checkbox"]),
.fa-kontakt__pola textarea {
	display: block;
	width: 100%;
	padding: 13px 14px;
	margin-top: 8px;
	background: #121215;
	border: 1px solid var(--fa-line-strong);
	border-radius: 0;
	color: var(--fa-text-primary);
	font-family: inherit;
	font-size: var(--fa-text-15);
	line-height: 1.4;
}

.fa-kontakt__pola textarea { resize: vertical; line-height: 1.6; }

.fa-kontakt__pola input:focus-visible,
.fa-kontakt__pola textarea:focus-visible { outline: 2px solid var(--fa-focus); outline-offset: 1px; border-color: transparent; }

.fa-kontakt__pola [aria-invalid="true"] { border-color: var(--fa-error); }

/* Tematy: ukryte pola radio, etykiety jako przyciski - bez JS, jak zakladki cennika. */
.fa-kontakt__tematy { border: 0; padding: 0; margin: 0; min-width: 0; }
.fa-kontakt__tematy legend { padding: 0; }
.fa-kontakt__tematy-lista { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }

.fa-kontakt__temat { position: relative; cursor: pointer; }
.fa-kontakt__temat input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }

.fa-kontakt__temat span {
	display: inline-block;
	font-family: var(--fa-font-display);
	font-weight: 700;
	font-size: var(--fa-text-13);
	letter-spacing: 0.1em;
	text-transform: uppercase;
	padding: 10px 16px;
	border: 1px solid rgb(255 255 255 / 0.18);
	color: #C9C9CF;
	transition: background 160ms ease, border-color 160ms ease, color 160ms ease;
}

.fa-kontakt__temat:hover span { border-color: var(--fa-line-ghost-hover); color: var(--fa-text-primary); }
.fa-kontakt__temat input:checked + span { background: var(--fa-orange-500); border-color: var(--fa-orange-500); color: var(--fa-text-on-accent); }
.fa-kontakt__temat input:focus-visible + span { outline: 2px solid var(--fa-focus); outline-offset: 3px; }

/* Pole-pulapka na automaty: poza ekranem, nie `display: none`, bo to niektore boty pomijaja. */
.fa-kontakt__www { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.fa-kontakt__zgoda {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	font-size: var(--fa-text-14);
	line-height: 1.6;
	color: var(--fa-text-secondary);
	cursor: pointer;
	margin-top: 4px;
}

.fa-kontakt__zgoda input { flex: none; width: 18px; height: 18px; margin-top: 2px; accent-color: var(--fa-orange-500); }
.fa-kontakt__zgoda a { color: var(--fa-orange-500); }
.fa-kontakt__zgoda a:hover { color: var(--fa-orange-400); }

.fa-kontakt__akcja { margin: 8px 0 0; }
.fa-kontakt__akcja .fa-btn { border: 0; cursor: pointer; }

/* Blad zawsze tekstem pod polem, nigdy samym kolorem obramowania (design-system.md). */
.fa-kontakt__blad { font-size: var(--fa-text-14); line-height: 1.5; color: var(--fa-error); margin: 6px 0 0; }

.fa-kontakt__wyslano {
	font-size: var(--fa-text-16);
	line-height: 1.7;
	color: var(--fa-text-primary);
	margin: 0;
	padding: 18px 20px;
	background: rgb(53 179 126 / 0.08);
	border-left: 3px solid var(--fa-success);
}