/* =====================================================================
   LANDING - UKŁAD I SEKCJE

   Wartości projektowe podano w pikselach dla ekranu 1440. Przy tej
   szerokości 1rem = 10px, więc zapis w `rem` to ta sama liczba
   podzielona przez dziesięć. Piksel zostaje tam, gdzie skalowanie
   jest niepożądane: włos ramki, cień, ikony.

   Rozmiary pisma, promienie i odstępy są w `rem` bez podłóg w pikselach
   (specyfikacja 2, M8): skalują się razem z podstawą motywu nadrzędnego.

   Kolejność bloków: fundament, elementy wspólne, sekcje w kolejności
   ze strony, na końcu zachowanie przy wąskim ekranie.
   ===================================================================== */

/* ---------------------------------------------------------------------
   1. FUNDAMENT
   --------------------------------------------------------------------- */

/*
   ZEROWANIE LIST I LISTY OPISOWE - PRZY KAŻDEJ Z OSOBNA, NIE ZBIORCZO.

   Zbiorcza reguła w rodzaju `.ks-landing ul` liczy klasę i znacznik,
   więc bije każdą klasę modyfikującą tę samą listę - i po cichu kasuje
   odstępy ustawione niżej. Zapis w `:where()` rozwiązywałby to wagą,
   ale narzędzie sklejające arkusze na tej witrynie wycina reguły
   z `:where()` w całości, razem z sąsiadami. Objaw jest podstępny:
   w pliku wszystko jest, a na stronie listy mają kropki i wcięcie 40 px.

   Dlatego każda lista zeruje się sama, we własnej regule. Więcej
   pisania, zero magii i nic nie znika po drodze.
*/


.ks-sekcja {
	padding-block: var(--ks-sekcja);
}

.ks-sekcja--ciemna {
	position: relative;
	background: var(--bp-czern);
	color: var(--bp-biel);
	overflow: hidden;
}

.ks-sekcja--ciemna h1,
.ks-sekcja--ciemna h2,
.ks-sekcja--ciemna h3 {
	color: var(--bp-biel);
}

/*
   Ukośne pasy w tle ciemnych sekcji. Rysowane gradientem, nie obrazkiem -
   nie ma pliku do wgrania, nie ma czego zgubić przy przeprowadzce strony
   i nie kosztuje ani jednego żądania.
*/
.ks-ukos {
	position: absolute;
	inset: 0;
	background: repeating-linear-gradient(45deg, color-mix(in srgb, var(--bp-biel) 5%, transparent) 0 1px, transparent 1px 26px);
	pointer-events: none;
}

.ks-ukos--gesty {
	background: repeating-linear-gradient(45deg, color-mix(in srgb, var(--bp-biel) 5%, transparent) 0 1px, transparent 1px 30px);
}

.ks-poswiata-rog {
	position: absolute;
	top: -12rem;
	right: -14rem;
	width: 62rem;
	height: 62rem;
	border-radius: 50%;
	background: radial-gradient(circle at 50% 50%, color-mix(in srgb, var(--bp-akcent-ciemny) 30%, transparent), color-mix(in srgb, var(--bp-akcent-ciemny) 0%, transparent) 66%);
	pointer-events: none;
}

/* ---------------------------------------------------------------------
   2. TYPOGRAFIA SEKCJI
   --------------------------------------------------------------------- */

.ks-h2 {
	font-weight: 700;
	line-height: 1.1;
}

.ks-h3 {
	font-weight: 700;
	line-height: 1.2;
}

.ks-akapit {
	font-size: 1.8rem;
	line-height: 1.62;
	color: var(--bp-tekst-2);
}

.ks-nadtytul {
	font-size: 1.5rem;
	font-weight: 400;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--bp-akcent);
}

/*
   Napis wygaszony schodzi o jeden odcień w dół względem projektu.
   Powód: `--ks-tekst-4` na bieli daje kontrast 2,6:1, czyli poniżej progu
   czytelności AA (4,5:1). Ciemniejszy odcień ma 4,9:1 i wygląda tak samo
   „drugorzędnie". Sam token zostaje w palecie - używamy go tam, gdzie
   nie ma tekstu do przeczytania.
*/
.ks-nadtytul--wygaszony {
	letter-spacing: 0.1em;
	color: var(--ks-tekst-3);
}

.ks-nadtytul--jasny {
	color: var(--bp-biel);
}

.ks-etykieta {
	font-size: 1.4rem;
	font-weight: 400;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--ks-biel-75);
}

.ks-etykieta--ciemna {
	color: var(--ks-tekst-3);
}

/*
   Nagłówek sekcji z kreską rozpychającą się do prawej krawędzi.
   `baseline` zamiast `center`: kreska ma iść linią pisma nagłówka,
   a nie środkiem jego pudełka - inaczej wygląda na przesuniętą.
*/
.ks-naglowek-linia {
	display: flex;
	align-items: baseline;
	gap: 2rem;
	margin-bottom: 4.8rem;
}

.ks-naglowek-linia__kreska {
	flex: 1;
	height: 1px;
	background: var(--bp-ramka-lekka);
}

.ks-naglowek-linia__licznik {
	font-size: 1.5rem;
	letter-spacing: 0.12em;
	color: var(--ks-tekst-3);
}

/* Na ciemnym tle kreska musi być jasna - ta sama forma nagłówka, tylko
   odwrócona jasność. Bez tego kreska znika i zostaje sam tytuł. */
.ks-naglowek-linia--jasna .ks-naglowek-linia__kreska {
	background: var(--ks-biel-ramka);
}

/* Nagłówek stojący pod nadtytułem nie potrzebuje własnego odstępu
   od góry - nadtytuł już go dał. */
.ks-naglowek-linia--pod-nadtytulem {
	margin-top: 1.6rem;
}

/* ---------------------------------------------------------------------
   3. PRZYCISKI
   --------------------------------------------------------------------- */

/* Przyciski sa przyciskami motywu (.bp-btn), bez wlasnych regul (specyfikacja 2, M4). */

/* ---------------------------------------------------------------------
   4. PASEK POSTĘPU I NAGŁÓWEK
   --------------------------------------------------------------------- */

.ks-postep {
	position: fixed;
	top: 0;
	left: 0;
	z-index: 100;
	width: 0;
	height: 3px;
	background: var(--bp-akcent-ciemny);
	transition: width .1s linear;
}

.ks-naglowek {
	position: fixed;
	top: 1.8rem;
	left: 0;
	right: 0;
	z-index: 90;
	display: flex;
	justify-content: center;
	padding-inline: 0;
	/* Wrapper przepuszcza kliknięcia, wyspa je łapie - inaczej pasek
	   na całą szerokość blokowałby treść pod sobą. */
	pointer-events: none;
}

/*
   WYSOKOŚĆ WYSPY JEST STAŁA.

   Wcześniej wyspa kurczyła się po przewinięciu z 8rem do 6.4rem. Ruch
   w przyklejonym pasku przyciąga wzrok w chwili, gdy czytelnik patrzy
   na treść, a przy nawigacji kotwicowej zmienia wysokość przesłony nad
   sekcją - ten sam odnośnik zatrzymuje się w innym miejscu przed
   przewinięciem i po nim. Zostaje wysokość mniejsza z dwóch, czyli ta,
   którą pasek miał dotąd po przewinięciu.

   Po przewinięciu zmienia się wyłącznie cień. Głębokość oddziela pasek
   od treści, która pod niego wjeżdża, i nie rusza geometrii.
*/
.ks-naglowek__wyspa {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 2.4rem;
	width: 100%;
	/* Wyspa = kontener tresci minus oddech (po pol oddechu z kazdej strony),
	   wysciolka = pol oddechu. Wyspa nie dotyka krawedzi ekranu nawet wtedy,
	   gdy kontener wypelnia ekran, a logo i przycisk stoja dokladnie tam,
	   gdzie tresc sekcji (specyfikacja 2, M9 - punkt odniesienia to lewa
	   krawedz logo). */
	max-width: calc(min(100%, var(--bp-tresc)) - max(var(--bp-oddech), 10px));
	height: 6.4rem;
	padding: 0 calc(max(var(--bp-oddech), 10px) / 2 - 1px);
	border: 1px solid var(--bp-ramka-lekka);
	border-radius: 1.4rem;
	background: color-mix(in srgb, var(--bp-biel) 92%, transparent);
	backdrop-filter: blur(14px);
	box-shadow: var(--ks-cien-naglowek);
	pointer-events: auto;
	transition: box-shadow .25s ease;
}

/*
   PASEK ADMINISTRATORA WORDPRESSA.

   Pasek administratora jest `position: fixed` i leży nad wszystkim.
   Nagłówek-wyspa też jest przyklejony do okna (`fixed`), więc bez tego
   przesunięcia zalogowany widzi wyspę schowaną pod czarnym paskiem,
   a odwiedzający poprawną - błąd niewidoczny inaczej niż po zalogowaniu.

   Treść strony przesuwa sam WordPress (`html { margin-top }`), więc pasek
   „Jak mogę Ci pomóc?", liczony od góry strony, jedzie w dół razem z nią
   i zostaje w tej samej odległości od wyspy.
*/
body.admin-bar .ks-naglowek { top: calc(1.8rem + 32px); }
body.admin-bar .ks-postep   { top: 32px; }

@media (max-width: 782px) {
	body.admin-bar .ks-naglowek { top: calc(1.8rem + 46px); }
	body.admin-bar .ks-postep   { top: 46px; }
}

.ks-naglowek--przewiniety .ks-naglowek__wyspa {
	box-shadow: var(--ks-cien-naglowek-mocny);
}

/* Znak, kreska i znak partnera trzymają się razem - kreska należy do tej
   grupy, a nie do paska. Przy pustym polu partnera znika razem z nim
   i nie zostaje po niej wisząca pionowa linia. */
.ks-naglowek__marka {
	display: flex;
	align-items: center;
	gap: 1.4rem;
	min-width: 0;
}

.ks-naglowek__logo {
	display: flex;
	align-items: center;
}

.ks-naglowek__logo img {
	height: 3.2rem;
	width: auto;
}

.ks-naglowek__nazwa {
	font-family: var(--ks-pismo-nagl);
	font-size: 1.8rem;
	font-weight: 700;
	color: var(--bp-tekst);
}

/* Numer telefonu w pasku. Stoi między pozycjami menu a przyciskiem
   i ma być czytany jak pozycja menu, nie jak drugi przycisk - stąd brak
   tła i ramki. */
.ks-naglowek__telefon {
	display: inline-flex;
	align-items: center;
	gap: 0.8rem;
	font-size: 1.6rem;
	font-weight: 600;
	color: var(--bp-tekst);
	white-space: nowrap;
	transition: color .2s ease;
	-webkit-tap-highlight-color: transparent;
}

.ks-naglowek__telefon:hover,
.ks-naglowek__telefon:focus {
	color: var(--bp-akcent);
}

.ks-naglowek__telefon .ks-ikona {
	color: var(--bp-akcent);
	flex: 0 0 auto;
}

.ks-menu {
	display: flex;
	align-items: center;
	gap: 3rem;
}

.ks-menu__link {
	font-size: 1.6rem;
	font-weight: 500;
	color: var(--bp-tekst);
	transition: color .2s ease;
	/* Bez tego przeglądarka telefonu maluje przy dotknięciu własny
	   niebieski prostokąt - kolor, którego nie ma w palecie marki. */
	-webkit-tap-highlight-color: transparent;
}

.ks-menu__link:hover,
.ks-menu__link:focus {
	color: var(--bp-akcent);
}

/*
   Hamburger pokazuje się dopiero na wąskim ekranie. Stan otwarcia
   czytamy z `aria-expanded`, czyli z atrybutu, który i tak trzeba
   ustawić dla czytników - osobna klasa byłaby drugim zapisem tego
   samego i któryś z nich prędzej czy później by się rozjechał.
*/
.ks-hamburger {
	display: none;
	align-items: center;
	justify-content: center;
	width: 4.4rem;
	height: 4.4rem;
	padding: 0;
	border: 1px solid var(--bp-ramka-lekka);
	border-radius: var(--ks-promien-btn);
	background: var(--bp-biel);
	cursor: pointer;
	-webkit-user-select: none;
	user-select: none;
	-webkit-tap-highlight-color: transparent;
}

.ks-hamburger__kreski,
.ks-hamburger__kreski::before,
.ks-hamburger__kreski::after {
	display: block;
	width: 18px;
	height: 2px;
	background: var(--bp-tekst);
	transition: transform .2s ease, opacity .2s ease;
}

.ks-hamburger__kreski::before,
.ks-hamburger__kreski::after {
	content: "";
	position: relative;
}

.ks-hamburger__kreski::before { top: -6px; }
.ks-hamburger__kreski::after  { top: 4px; }

.ks-hamburger[aria-expanded="true"] {
	border-color: var(--bp-akcent);
}

.ks-hamburger[aria-expanded="true"] .ks-hamburger__kreski {
	background: transparent;
}

.ks-hamburger[aria-expanded="true"] .ks-hamburger__kreski::before {
	top: 0;
	transform: rotate(45deg);
}

.ks-hamburger[aria-expanded="true"] .ks-hamburger__kreski::after {
	top: -2px;
	transform: rotate(-45deg);
}

/* ---------------------------------------------------------------------
   5. HERO
   --------------------------------------------------------------------- */

/*
   SEKCJA MIEŚCI SIĘ W JEDNYM EKRANIE.

   `svh` zamiast `vh`: na telefonie pasek adresu przeglądarki chowa się
   przy przewijaniu, a `vh` opisuje okno BEZ tego paska - czyli wartość
   za dużą dokładnie w chwili wejścia na stronę, gdy pasek jeszcze jest.
   `svh` opisuje ten mniejszy, pewny obszar. Deklaracja w `vh` stoi wyżej
   jako wartość zapasowa dla przeglądarek, które `svh` nie znają.

   `overflow: hidden` zatrzymuje warstwę tła w granicach sekcji. Bez tego
   plamy światła wychodzą poza ekran i dokładają poziomy pasek przewijania.
*/
/*
   SEKCJA MA WŁASNE TŁO I WYRAŹNĄ DOLNĄ KRAWĘDŹ.

   Wcześniej hero było białe jak reszta strony, więc sylwetka nie miała
   z czego wyrastać - kończyła się w pustce. Teraz sekcja jest lekko
   przybarwiona i urywa się prostą linią; sylwetka stoi na tej linii.

   Wysokość: pełny ekran MINUS pasek pomocy, który stoi nad nią.
   `calc [)` z samymi jednostkami, bez zmiennych - `calc [var(...))` bywa
   na tej witrynie wycinane ze sklejki arkuszy razem z sąsiadami.
*/
/*
   SEKCJA STARTOWA ZAJMUJE CAŁY EKRAN - NA KAŻDEJ ROZDZIELCZOŚCI.

   Zaczyna się przy samej górze strony i sięga dolnej krawędzi okna.
   Nagłówek i pasek pomocy leżą NA NIEJ, więc nie zabierają jej wysokości -
   robi im miejsce górna wyściółka, a nie własny początek.

   `svh` zamiast `vh`: na telefonie pasek adresu chowa się przy przewijaniu,
   a `vh` opisuje okno bez tego paska - czyli wartość za dużą dokładnie
   w chwili wejścia na stronę.
*/
.ks-hero {
	position: relative;
	display: flex;
	align-items: center;
	/*
	   WYSOKOŚĆ, A NIE WYSOKOŚĆ MINIMALNA - INACZEJ GÓRNE OGRANICZENIE
	   NIE MA ŻADNEGO SKUTKU.

	   Przy sporze `min-height` z `max-height` wygrywa minimalna, i to
	   niezależnie od kolejności zapisu. Sekcja z `min-height: 100svh`
	   rosła więc do pełnej wysokości okna mimo limitu, a limit działał
	   już tylko na sylwetkę - czyli robił dokładnie to, czego miał
	   zabronić: pasek pustego tła nad nią i pod nią.

	   `min-height: 60rem` zostaje jako zabezpieczenie na okno bardzo
	   niskie, gdzie sama treść ma więcej niż wysokość ekranu.
	*/
	height: 100vh;
	height: 100svh;
	min-height: 60rem;
	padding-top: 16rem;
	padding-bottom: 0;
	background: linear-gradient(178deg, color-mix(in srgb, var(--bp-akcent) 3%, var(--bp-biel)) 0%, color-mix(in srgb, var(--bp-akcent) 6%, var(--bp-biel)) 52%, color-mix(in srgb, var(--bp-akcent) 9%, var(--bp-biel)) 100%);
	overflow: hidden;
}

/*
   SYLWETKA WYRASTA Z DOLNEJ KRAWĘDZI - TAK SAMO JAK W SEKCJI „O MNIE".

   Wysokość kolumny to dokładnie wysokość pola treści sekcji, więc dół
   zdjęcia JEST dolną krawędzią ekranu startowego. `contain` zamiast
   `cover`: postać ma być cała widoczna, a nie przycięta - to była
   właśnie ta „wisząca w powietrzu, wycięta twarz".

   Kotwica u dołu sprawia, że przy niższym oknie ubywa powietrza nad
   głową, a nie sylwetki.
*/
/*
   WYSOKOŚĆ SYLWETKI WYNIKA Z WYSOKOŚCI OKNA, NIE Z JEJ SZEROKOŚCI.

   TRZY LICZBY, KTÓRE MUSZĄ SIĘ SUMOWAĆ - INACZEJ POD SYLWETKĄ ZOSTAJE
   PASEK PUSTEGO TŁA:

       wyściółka sekcji  16rem
     + wysokość sylwetki 80rem
     = wysokość sekcji   96rem

   Sekcja jest wyższa od swojej zawartości tylko wtedy, gdy te liczby się
   nie zgadzają, a nadmiar rozkłada się wtedy po równo nad i pod treścią.
   Odjęcie od wysokości sylwetki dwóch remów „na oddech nad głową" zostawiło
   właśnie taki pasek na dole. Oddech nad głową bierze się z czego innego:
   wyściółka 16rem jest większa niż nagłówek z paskiem, więc te dwadzieścia
   kilka pikseli jest tam samo z siebie i rośnie razem z podstawą `rem`.

   Górne ograniczenia mają sens dopiero na oknie WYŻSZYM niż 96rem. Bez nich
   sylwetka rosłaby bez końca razem z wysokością ekranu - a na monitorze
   z dużym zapasem wysokości robi się z niej billboard. Powyżej tego progu
   sekcja przestaje rosnąć i widać spod niej początek pasa logotypów.
*/
/*
   SYLWETKA BIERZE WYSOKOŚĆ Z POLA TREŚCI, A NIE LICZY JEJ SAMA.

   Wcześniej odejmowała wyściółkę od wysokości okna własnym rachunkiem.
   Póki obie wartości były zapisane w dwóch miejscach, każda zmiana jednej
   z nich zostawiała pod sylwetką pasek pustego tła - i tak się dwa razy
   stało. Teraz łańcuch wysokości prowadzi od sekcji w dół, więc suma
   zgadza się sama i wielkość sylwetki reguluje jedna liczba: górne
   ograniczenie wysokości sekcji.
*/
.ks-hero > .bp-tresc,
.ks-hero__siatka {
	height: 100%;
}

/*
   WIELKOŚCIĄ SYLWETKI STERUJE TA JEDNA WARTOŚĆ.

   Udział w wysokości pola treści, a nie liczba pikseli - dzięki temu
   znaczy to samo na każdym ekranie. Mniejsza wartość to mniejsza sylwetka,
   i nic więcej nie trzeba ruszać.

   Wolne miejsce, które przez to powstaje, wypada NAD głową, bo sylwetka
   jest przyklejona do dołu pola treści. To jedyne miejsce, gdzie może
   wypaść: sekcja ma pełną wysokość okna i ma ją zachować, więc sylwetka
   mniejsza od pola treści musi zostawić przestrzeń po którejś stronie.
   Wcześniejsza próba ograniczania samej SEKCJI dawała przestrzeń pod
   sylwetką i pas obcej sekcji na dole ekranu - czyli dokładnie to,
   czego nie chcemy.
*/
.ks-hero__portret {
	align-self: end;
	height: 98%;
}

/* Treść stoi NAD warstwą tła. Bez własnego kontekstu układania tło
   przykryłoby tekst, mimo że w kodzie stoi przed nim. */
.ks-hero > .bp-tresc {
	position: relative;
	z-index: 1;
}

.ks-hero__siatka {
	display: grid;
	grid-template-columns: 1.2fr 0.8fr;
	gap: 4.8rem;
	align-items: center;
	width: 100%;
}

/* ---------------------------------------------------------------------
   5a. TŁO SEKCJI STARTOWEJ - TRZY WARIANTY

   Cały ruch robi CSS, nie skrypt. To warstwa ozdobna: nie zasłania
   treści, więc nie ma powodu, żeby jej istnienie zależało od JavaScriptu.
   Animujemy wyłącznie `transform` i `opacity` - te dwie własności
   przeglądarka umie zmieniać bez przeliczania układu strony.
   --------------------------------------------------------------------- */

.ks-hero__tlo {
	position: absolute;
	inset: 0;
	z-index: 0;
	overflow: hidden;
	pointer-events: none;
}

.ks-hero__tlo span {
	position: absolute;
	display: block;
}

/* =====================================================================
   TRZY WARIANTY EKRANU STARTOWEGO

   Wariant ustawia i tło, i sposób wchodzenia elementów - to jedna
   decyzja o wyglądzie, więc steruje nią jedno pole w panelu.

   WSZYSTKIE ANIMACJE WEJŚCIA SĄ ZAWIESZONE NA KLASIE `ks-anim`,
   którą nadaje SKRYPT. Gdyby skrypt się nie wczytał - zablokowany,
   stara sklejka, wyłączony JavaScript - nie zadziała ani jedna z nich,
   a treść po prostu stoi na swoim miejscu. Odwrotna kolejność (stany
   początkowe w arkuszu) zostawiłaby pierwszy ekran pusty.
   ===================================================================== */

/* --- Wspólne: wjazd wiersza nagłówka zza dolnej krawędzi --- */

.ks-hero__wiersz {
	display: block;
	overflow: hidden;
}

.ks-hero__wiersz-tresc {
	display: block;
}

.ks-anim .ks-hero__wiersz-tresc {
	transform: translateY(105%);
	animation: ksWjazdWiersza .95s cubic-bezier(.16, .84, .24, 1) both;
}

.ks-anim .ks-hero__lead,
.ks-anim .ks-hero__odznaki,
.ks-anim .ks-hero__przyciski {
	opacity: 0;
	animation: ksWejscie .8s cubic-bezier(.2, .8, .2, 1) both;
}

.ks-anim .ks-hero__lead      { animation-delay: .42s; }
.ks-anim .ks-hero__odznaki   { animation-delay: .56s; }
.ks-anim .ks-hero__przyciski { animation-delay: .68s; }

/* Kafelki mają własne opóźnienie wpisane w atrybut `style` - zależy
   od ich kolejności, a tej arkusz nie zna. */
.ks-anim .ks-kafelek {
	opacity: 0;
	animation: ksKafelekWejscie .7s cubic-bezier(.2, .9, .3, 1) both;
}

.ks-anim .ks-hero__zdjecie {
	animation: ksPortretWejscie 1.1s cubic-bezier(.16, .84, .24, 1) both;
}

/* ---------------------------------------------------------------------
   WARIANT 1: REFLEKTOR

   Miękkie światło dryfujące za sylwetką i delikatna głębia pod kursorem.
   Najbardziej „wizerunkowy" z trzech - nic nie rozprasza, a obraz żyje.
   --------------------------------------------------------------------- */

.ks-hero--reflektor {
	background: linear-gradient(178deg, color-mix(in srgb, var(--bp-akcent) 2%, var(--bp-biel)) 0%, color-mix(in srgb, var(--bp-akcent) 7%, var(--bp-biel)) 54%, color-mix(in srgb, var(--bp-akcent) 10%, var(--bp-biel)) 100%);
}

.ks-hero--reflektor .ks-hero__tlo-a,
.ks-hero--reflektor .ks-hero__tlo-b {
	border-radius: 50%;
	filter: blur(80px);
	will-change: transform;
}

.ks-hero--reflektor .ks-hero__tlo-a {
	top: -26rem;
	right: -18rem;
	width: 72rem;
	height: 62rem;
	background: radial-gradient(circle at 44% 46%, color-mix(in srgb, var(--bp-akcent-ciemny) 34%, transparent), color-mix(in srgb, var(--bp-akcent-ciemny) 3%, transparent) 68%);
	animation: ksAuroraA 30s ease-in-out infinite;
}

.ks-hero--reflektor .ks-hero__tlo-b {
	bottom: -30rem;
	left: -18rem;
	width: 64rem;
	height: 56rem;
	background: radial-gradient(circle at 56% 46%, color-mix(in srgb, var(--bp-akcent) 26%, transparent), color-mix(in srgb, var(--bp-akcent) 3%, transparent) 70%);
	animation: ksAuroraB 36s ease-in-out infinite;
}

/*
   DELIKATNA SIATKA POMIAROWA.

   Ta sama, co w wariancie „panel danych", tylko słabsza - tutaj nie jest
   motywem sekcji, ma być wyczuwalna, a nie czytana.

   Maska wygasza ją przy krawędziach i po stronie tekstu: siatka biegnąca
   pod akapitem obniża kontrast liter, a to pierwsze zdanie, jakie ktoś
   na tej stronie czyta.

   Siatka jest na trzeciej warstwie, bo dwie pierwsze mają rozmycie 80 px -
   rozmyta siatka to szara mgła zamiast kresek.
*/
.ks-hero--reflektor .ks-hero__tlo-c {
	inset: 0;
	background-image:
		linear-gradient(to right, color-mix(in srgb, var(--bp-akcent) 6%, transparent) 1px, transparent 1px),
		linear-gradient(to bottom, color-mix(in srgb, var(--bp-akcent) 6%, transparent) 1px, transparent 1px);
	background-size: 5.8rem 5.8rem;
	-webkit-mask-image: radial-gradient(ellipse 84% 74% at 62% 46%, var(--bp-czern) 26%, transparent 80%);
	mask-image: radial-gradient(ellipse 84% 74% at 62% 46%, var(--bp-czern) 26%, transparent 80%);
}

/* Snop światła schodzący ukośnie zza nagłówka - to on daje nazwę
   wariantowi. Bardzo wolny i bardzo słaby; ma być wyczuwalny, nie widoczny. */
.ks-hero--reflektor .ks-hero__tlo::after {
	content: "";
	position: absolute;
	top: -30%;
	bottom: -30%;
	width: 30%;
	background: linear-gradient(100deg, color-mix(in srgb, var(--bp-biel) 0%, transparent) 0%, color-mix(in srgb, var(--bp-biel) 42%, transparent) 50%, color-mix(in srgb, var(--bp-biel) 0%, transparent) 100%);
	filter: blur(32px);
	animation: ksPolysk 22s ease-in-out infinite;
}

/* ---------------------------------------------------------------------
   WARIANT 2: PANEL DANYCH

   Siatka jak w panelu reklamowym, rysująca się krzywa wzrostu i trzy
   pulsujące punkty pomiaru. Najbardziej „ekspercki" - mówi o zawodzie,
   zanim ktokolwiek przeczyta nagłówek.
   --------------------------------------------------------------------- */

.ks-hero--panel {
	background: linear-gradient(180deg, color-mix(in srgb, var(--bp-akcent) 2%, var(--bp-biel)) 0%, color-mix(in srgb, var(--bp-akcent) 7%, var(--bp-biel)) 60%, color-mix(in srgb, var(--bp-akcent) 11%, var(--bp-biel)) 100%);
}

.ks-hero--panel .ks-hero__tlo-a {
	inset: 0;
	background-image:
		linear-gradient(to right, color-mix(in srgb, var(--bp-akcent) 8%, transparent) 1px, transparent 1px),
		linear-gradient(to bottom, color-mix(in srgb, var(--bp-akcent) 8%, transparent) 1px, transparent 1px);
	background-size: 5.8rem 5.8rem;
	-webkit-mask-image: radial-gradient(ellipse 84% 74% at 62% 46%, var(--bp-czern) 26%, transparent 80%);
	mask-image: radial-gradient(ellipse 84% 74% at 62% 46%, var(--bp-czern) 26%, transparent 80%);
}

/* Poświata przesuwająca się w poprzek siatki - „skan" danych. */
.ks-hero--panel .ks-hero__tlo-b {
	top: -20%;
	bottom: -20%;
	width: 44%;
	background: linear-gradient(90deg, color-mix(in srgb, var(--bp-akcent-ciemny) 0%, transparent) 0%, color-mix(in srgb, var(--bp-akcent-ciemny) 12%, transparent) 50%, color-mix(in srgb, var(--bp-akcent-ciemny) 0%, transparent) 100%);
	animation: ksSkan 15s ease-in-out infinite;
}

.ks-hero--panel .ks-hero__tlo-c {
	top: -16rem;
	right: -12rem;
	width: 58rem;
	height: 58rem;
	border-radius: 50%;
	background: radial-gradient(circle at 50% 50%, color-mix(in srgb, var(--bp-akcent-ciemny) 20%, transparent), color-mix(in srgb, var(--bp-akcent-ciemny) 0%, transparent) 68%);
	filter: blur(30px);
}

.ks-hero__wykres {
	position: absolute;
	right: 0;
	bottom: 6%;
	width: 66%;
	height: 38%;
	fill: none;
	stroke: color-mix(in srgb, var(--bp-akcent) 42%, transparent);
	stroke-width: 2.5;
	stroke-linecap: round;
	stroke-dasharray: 1400;
	stroke-dashoffset: 1400;
}

.ks-anim .ks-hero--panel .ks-hero__wykres {
	animation: ksRysuj 6s ease-out .5s forwards;
}

/* Punkty pomiaru na krzywej. Pulsują z przesunięciem, więc czytają się
   jako kolejne odczyty, a nie jako trzy migające kropki naraz. */
/*
   POŁOŻENIE PUNKTÓW WYNIKA Z GEOMETRII WYKRESU, NIE Z OKA.

   Rysunek zajmuje 66% szerokości przy prawej krawędzi i 38% wysokości,
   6% nad dołem, a jego układ współrzędnych jest rozciągany bez zachowania
   proporcji. Dla węzła krzywej o współrzędnych (x, y) w układzie 600 na 200:

       odległość od prawej = 100% - (34% + x/600 * 66%)
       odległość od dołu   = 6% + (1 - y/200) * 38%

   Ujemne marginesy przesuwają kropkę o połowę jej średnicy, żeby to jej
   ŚRODEK wypadł na krzywej, a nie krawędź.
*/
.ks-hero__punkt {
	position: absolute;
	width: 10px;
	height: 10px;
	margin: 0 -.5rem -.5rem 0;
	border-radius: 50%;
	background: var(--bp-akcent);
	box-shadow: 0 0 0 0 color-mix(in srgb, var(--bp-akcent-ciemny) 45%, transparent);
}

/* węzeł (140, 138) */
.ks-hero__punkt--1 { right: 50.6%; bottom: 17.8%; }

/* węzeł (280, 106) */
.ks-hero__punkt--2 { right: 35.2%; bottom: 23.9%; }

/* węzeł (420, 58) */
.ks-hero__punkt--3 { right: 19.8%; bottom: 33.0%; }

.ks-anim .ks-hero__punkt {
	opacity: 0;
	animation: ksPunktWejscie .5s ease-out both, ksPunktPuls 3.4s ease-out infinite;
}

.ks-anim .ks-hero__punkt--1 { animation-delay: 2.6s, 3.1s; }
.ks-anim .ks-hero__punkt--2 { animation-delay: 3.4s, 3.9s; }
.ks-anim .ks-hero__punkt--3 { animation-delay: 4.2s, 4.7s; }

/* ---------------------------------------------------------------------
   WARIANT 3: SEKWENCJA

   Tło zejdzie na drugi plan, cała uwaga na choreografii wejścia:
   nagłówek wiersz po wierszu, potem reszta kaskadą. Najbardziej
   „premierowy" - jak otwarcie prezentacji.
   --------------------------------------------------------------------- */

.ks-hero--sekwencja {
	background: linear-gradient(168deg, var(--bp-biel) 0%, color-mix(in srgb, var(--bp-akcent) 4%, var(--bp-biel)) 46%, color-mix(in srgb, var(--bp-akcent) 8%, var(--bp-biel)) 100%);
}

.ks-hero--sekwencja .ks-hero__tlo-a {
	top: -34rem;
	right: -24rem;
	width: 76rem;
	height: 66rem;
	border-radius: 50%;
	filter: blur(90px);
	background: radial-gradient(circle at 46% 46%, color-mix(in srgb, var(--bp-akcent-ciemny) 22%, transparent), color-mix(in srgb, var(--bp-akcent-ciemny) 2%, transparent) 70%);
	animation: ksAuroraA 34s ease-in-out infinite;
}

.ks-hero--sekwencja .ks-hero__tlo-b,
.ks-hero--sekwencja .ks-hero__tlo-c {
	display: none;
}

/* Cienka kreska akcentu wjeżdżająca pod nagłówkiem - domyka sekwencję
   i oddziela obietnicę od akapitu. */
.ks-hero--sekwencja .ks-hero__tytul::after {
	content: "";
	display: block;
	width: 9rem;
	height: 3px;
	margin-top: 2.2rem;
	border-radius: 0.2rem;
	background: var(--bp-akcent);
	transform-origin: left center;
}

.ks-anim .ks-hero--sekwencja .ks-hero__tytul::after {
	transform: scaleX(0);
	animation: ksKreska .8s cubic-bezier(.2, .8, .2, 1) .5s both;
}

/* W tym wariancie wszystko wchodzi nieco później - kreska pod nagłówkiem
   ma zdążyć się wysunąć, zanim ruszy reszta. */
.ks-anim .ks-hero--sekwencja .ks-hero__lead      { animation-delay: .78s; }
.ks-anim .ks-hero--sekwencja .ks-hero__odznaki   { animation-delay: .92s; }
.ks-anim .ks-hero--sekwencja .ks-hero__przyciski { animation-delay: 1.04s; }

.ks-hero__tytul {
	margin-top: 0;
	font-weight: 800;
	line-height: 1.04;
	letter-spacing: -0.015em;
}

.ks-hero__lead {
	max-width: 58rem;
	margin-top: 2rem;
	font-size: 2rem;
	font-weight: 300;
	line-height: 1.5;
	color: var(--bp-tekst-2);
}

.ks-hero__przyciski {
	display: flex;
	flex-wrap: wrap;
	gap: 1.4rem;
	margin-top: 2.8rem;
}

/*
   PORTRET JEST KADROWANY W PRZEGLĄDARCE, NIE W PLIKU.

   Zdjęcie źródłowe jest sylwetką całą; sekcja ma zmieścić się w jednym
   ekranie, więc widoczna zostaje część do bioder. Kadr robi `object-fit`
   z zakotwiczeniem u góry - dzięki temu podmiana pliku na inny nie wymaga
   przycinania go wcześniej w programie graficznym, a wysokość sekcji
   nie zależy od proporcji zdjęcia.

   `max-height` w `svh` pilnuje, żeby na niskim oknie portret ustąpił
   miejsca tekstowi, zamiast wypchnąć przyciski poza ekran.
*/
/*
   SZEROKOŚĆ KOLUMNY DECYDUJE O WIELKOŚCI SYLWETKI.

   Przy dopasowaniu „w całości" zdjęcie wpisuje się w kolumnę tym bokiem,
   którym pierwszym o nią zahaczy. Kolumna była węższa niż proporcja
   zdjęcia, więc ograniczała je szerokość - i postać nie sięgała góry,
   choć miejsca w pionie było pod dostatkiem.

   Poszerzenie kolumny to jedyna zmiana, która sylwetkę powiększa;
   podnoszenie wysokości nic nie dawało.

   `margin-right` odsuwa ją od prawej krawędzi, czyli przysuwa do tekstu.
*/
/*
   KOLUMNA MA PROPORCJĘ ZDJĘCIA - I TO JEST CAŁY MECHANIZM.

   Wcześniej szerokość była podana liczbą, a wysokość brała się z okna.
   Przy dopasowaniu „w całości" zdjęcie wpisuje się w kolumnę tym bokiem,
   którym pierwszym o nią zahaczy - czyli szerokością. Wysokość okna rośnie
   płynnie, a szerokość w remach skacze progami, więc im wyższe okno, tym
   większa pustka nad głową. Zmierzone: 160 px przy oknie 800 px wysokości
   i 416 px przy 1440 - przy tej samej sylwetce.

   Kolumna z proporcją zdjęcia nie ma jak zostawić pustki: zdjęcie wypełnia
   ją co do piksela w obu wymiarach. Odstęp nad głową jest wtedy zawsze taki
   sam, a sylwetka skaluje się z wysokością okna - czyli z tym wymiarem,
   który o niej faktycznie decyduje.

   `max-width: 100%` to bezpiecznik na okno wysokie i wąskie: tam proporcja
   chciałaby szerokości większej niż kolumna siatki.
*/
/*
   SYLWETKA STOI W ŚRODKU SWOJEJ KOLUMNY, NIE PRZY PRAWEJ KRAWĘDZI.

   Przy dosunięciu do prawej cały zapas kolumny zbierał się po stronie
   tekstu - a zapas jest inny na każdym ekranie, bo sylwetka skaluje się
   z wysokością okna, a kolumna z szerokością. Odstęp od tekstu skakał
   przez to z 30 na 80 pikseli i na niższym oknie sylwetka wyraźnie
   odjeżdżała. Wyśrodkowana dzieli ten zapas na pół, więc odstęp od tekstu
   zmienia się o połowę mniej.
*/
.ks-hero__portret {
	position: relative;
	width: auto;
	aspect-ratio: 799 / 1473;
	max-width: 100%;
	justify-self: center;
	transform: translateX(-2rem);
}

/*
   SYLWETKA WYRASTA Z DOLNEJ KRAWĘDZI SEKCJI.

   Wcześniej dół zdjęcia był wygaszany do przezroczystości i postać
   „wychodziła z niczego" - na białym tle wyglądało to jak wycięcie,
   a nie jak kadr. Teraz sekcja ma własne tło z wyraźną dolną krawędzią,
   a zdjęcie stoi na tej krawędzi: dolny brzeg sylwetki JEST dolnym
   brzegiem sekcji.

   Kadr trzyma się góry (`object-position: 50% 0`), bo powietrze nad
   głową jest już w samym pliku - portret bez tego zapasu ścinało płasko
   na wysokości włosów i żadna wartość tutaj tego nie naprawiała.
*/
.ks-hero__zdjecie {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: contain;
	object-position: bottom center;
}

/*
   KAFELKI STOJĄ NIERUCHOMO.

   Unosiły się wcześniej powolnym ruchem w pionie. Cztery elementy
   poruszające się niezależnie od siebie wokół zdjęcia to cztery rzeczy
   ciągnące wzrok naraz - a pierwszy widok ma prowadzić do nagłówka
   i do przycisku, nie do liczb pływających obok.
*/
.ks-kafelek {
	position: absolute;
	z-index: 2;
	display: flex;
	flex-direction: column;
	gap: 0.2rem;
	padding: 1.2rem 1.6rem;
	border: 1px solid var(--bp-ramka-lekka);
	border-radius: 1.4rem;
	background: var(--bp-biel);
	box-shadow: var(--ks-cien-kafelek);
}

/*
   Cztery kafelki rozstawione wokół portretu, po dwa z każdej strony.
   Wartości ujemne wypuszczają je poza kolumnę zdjęcia - dzięki temu
   zachodzą na tekst i na tło, zamiast stać w rządku obok sylwetki.
*/
/*
   Kafelki trzymają się sylwetki, a nie krawędzi kolumny. Zdjęcie jest
   wpasowane w kolumnę „w całości" i zakotwiczone u dołu, więc postać
   zajmuje jej dolną część - i tam właśnie stoją kafelki. Rozstawione
   po całej wysokości kolumny wisiałyby w pustym powietrzu nad głową.
*/
.ks-kafelek--1 {
	bottom: 20%;
	left: -6.5rem;
}

.ks-kafelek--2 {
	top: 30%;
	right: -6.5rem;
}

/* Przy ekranie 60-90em kolumna portretu dochodzi do krawędzi treści,
   a wysunięcie o 6.5rem wypychało kafelek poza ekran (M9). */
@media (min-width: 60em) and (max-width: 89.99em) {
	.ks-kafelek--2 { right: -3rem; }
}

/* Trzecie miejsce zostaje w arkuszu, bo pole w panelu przyjmuje dowolną
   liczbę kafelków - ale przy trzech zaczynają zasłaniać sylwetkę. */
.ks-kafelek--3 {
	top: 8%;
	left: -6rem;
}

.ks-kafelek__liczba {
	font-family: var(--ks-pismo-nagl);
	font-size: 2.4rem;
	font-weight: 700;
	color: var(--bp-akcent);
	line-height: 1.1;
}

.ks-kafelek__gwiazdki {
	font-size: 1.3rem;
	letter-spacing: 0.1em;
	line-height: 1;
	color: var(--bp-gwiazdki);
}

.ks-kafelek__opis {
	font-size: 1.3rem;
	line-height: 1.35;
	color: var(--bp-tekst-2);
}

/* ---------------------------------------------------------------------
   6. MANIFEST
   --------------------------------------------------------------------- */

.ks-manifest {
	padding-block: var(--ks-sekcja-duza);
	text-align: center;
}

.ks-manifest__zdanie {
	/* Kolumna wezsza niz kontener - zwezany jest element W kontenerze,
	   nie sam kontener (specyfikacja 2, M9). */
	max-width: 100rem;
	font-size: 3.6rem;
	font-weight: 300;
	line-height: 1.35;
	text-wrap: balance;
	color: var(--bp-tekst);
}

.ks-manifest__zdanie strong {
	font-weight: 600;
	color: var(--bp-akcent);
}

/* ---------------------------------------------------------------------
   7. OFERTA
   --------------------------------------------------------------------- */

.ks-oferta__lista {
	display: grid;
	gap: 2rem;
}

.ks-karta-oferty {
	display: grid;
	grid-template-columns: 0.3fr 1fr 1fr;
	gap: 4rem;
	padding: 4.8rem;
	border-radius: var(--ks-promien-kafel);
	background: var(--bp-tlo-jasne);
	transition: background-color .3s ease;
}

.ks-karta-oferty:hover {
	background: var(--ks-tlo-hover);
}

.ks-karta-oferty__numer {
	font-family: var(--ks-pismo-nagl);
	font-size: 5.6rem;
	font-weight: 800;
	line-height: 1;
	color: var(--bp-akcent);
	opacity: 0.25;
}

.ks-karta-oferty__tresc .ks-akapit {
	margin-top: 1.6rem;
}

/* ---------------------------------------------------------------------
   9. PASEK LICZB
   --------------------------------------------------------------------- */

.ks-liczby {
	padding-block: 6.4rem;
}

/*
   Włosowe kreski robi `gap` na tle siatki, a nie obramowania komórek.
   Przy obramowaniach trzeba pamiętać, która komórka jest ostatnia
   w rzędzie - a to rozjeżdża się w chwili, gdy siatka zawinie wiersz.
*/
.ks-liczby__siatka {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 1px;
	background: color-mix(in srgb, var(--bp-biel) 14%, transparent);
}

.ks-liczby__komorka {
	padding: 2.6rem 2.8rem;
	background: var(--bp-czern);
}

.ks-liczby__liczba {
	font-family: var(--ks-pismo-nagl);
	font-size: 4.4rem;
	font-weight: 700;
	line-height: 1.05;
	color: var(--bp-biel);
}

.ks-liczby__opis {
	margin-top: 0.8rem;
	font-size: 1.6rem;
	line-height: 1.5;
	color: var(--ks-biel-80);
}

/* ---------------------------------------------------------------------
   10. CASE STUDY - AKORDEON
   --------------------------------------------------------------------- */

.ks-wyniki__naglowek {
	display: grid;
	grid-template-columns: 1fr 44rem;
	gap: 4rem;
	align-items: end;
	margin-bottom: 4.8rem;
}

.ks-wyniki__opis {
	font-size: 1.7rem;
	line-height: 1.6;
	/* Sekcja jest jasna (karty case study) - bialy napis zostal po ciemnej
	   wersji sekcji i na bialym tle byl niewidoczny (M21). */
	color: var(--bp-tekst-2);
}

.ks-akordeon__wiersz {
	border-bottom: 1px solid var(--ks-biel-kreska);
}

.ks-akordeon__przycisk {
	display: grid;
	grid-template-columns: 0.5fr 1.4fr 1fr 6rem;
	gap: 2.4rem;
	align-items: center;
	width: 100%;
	padding: 2.8rem 0;
	border: 0;
	background: none;
	color: var(--bp-biel);
	font-family: var(--bp-pismo);
	text-align: left;
	cursor: pointer;
	-webkit-user-select: none;
	user-select: none;
	-webkit-tap-highlight-color: transparent;
}

.ks-akordeon__etykieta {
	font-size: 1.5rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--ks-biel-75);
}

.ks-akordeon__nazwa {
	font-size: 2.2rem;
	font-weight: 600;
}

.ks-akordeon__metryka {
	display: flex;
	align-items: baseline;
	gap: 1rem;
}

.ks-akordeon__metryka .ks-licznik {
	font-family: var(--ks-pismo-nagl);
	font-size: 3.4rem;
	font-weight: 700;
}

.ks-akordeon__jednostka {
	font-size: 1.6rem;
	color: var(--ks-biel-80);
}

/* Znak plus/minus rysowany dwiema kreskami - bez pliku i bez kroju
   z ikonami. Pionowa znika, gdy panel jest otwarty. */
.ks-akordeon__znak {
	position: relative;
	justify-self: end;
	width: 2rem;
	height: 2rem;
}

.ks-akordeon__znak::before,
.ks-akordeon__znak::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 0;
	width: 100%;
	height: 2px;
	margin-top: -1px;
	background: var(--bp-biel);
	transition: transform .25s ease, opacity .25s ease;
}

.ks-akordeon__znak::after {
	transform: rotate(90deg);
}

.ks-akordeon__przycisk[aria-expanded="true"] .ks-akordeon__znak::after {
	transform: rotate(0deg);
	opacity: 0;
}

/*
   Panel rozwijany. Wysokość animuje `grid-template-rows`, a nie
   `max-height` z liczbą wpisaną na sztywno: liczba dobrana pod obecną
   treść przestaje pasować, gdy klient dopisze zdanie, i albo ucina
   tekst, albo zostawia pustą przestrzeń.
*/
.ks-akordeon__panel {
	display: grid;
	grid-template-rows: 1fr;
	transition: grid-template-rows .4s cubic-bezier(.2, .8, .2, 1), opacity .3s ease;
}

.ks-akordeon__panel[hidden] {
	display: grid !important;
	grid-template-rows: 0fr;
	opacity: 0;
	pointer-events: none;
}

.ks-akordeon__kolumny {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 3.2rem;
	overflow: hidden;
	padding: 2.6rem 0 3rem;
}

.ks-akordeon__panel[hidden] .ks-akordeon__kolumny {
	padding-block: 0;
}

.ks-akordeon__tresc {
	margin-top: 1rem;
	font-size: 1.7rem;
	line-height: 1.6;
	color: var(--bp-biel);
}

/* ---------------------------------------------------------------------
   11. PROCES
   --------------------------------------------------------------------- */

.ks-proces__naglowek {
	max-width: 68rem;
	margin-bottom: 4.8rem;
}

.ks-proces__naglowek .ks-h2 {
	margin-top: 1.6rem;
}

.ks-proces__opis {
	margin-top: 1.6rem;
}

.ks-proces__siatka {
	margin: 0;
	padding: 0;
	list-style: none;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 2rem;
}

.ks-krok {
	padding: 3.2rem;
	border-radius: var(--ks-promien-kafel-s);
	background: var(--bp-tlo-jasne);
}

.ks-krok__numer {
	font-family: var(--ks-pismo-nagl);
	font-size: 4.4rem;
	font-weight: 800;
	line-height: 1;
	color: var(--bp-akcent);
	opacity: 0.22;
}

.ks-krok__tytul {
	margin-top: 2rem;
	font-family: var(--bp-pismo);
	font-weight: 600;
	color: var(--bp-tekst);
}

.ks-krok__opis {
	margin-top: 1.2rem;
	font-size: 1.7rem;
	line-height: 1.6;
	color: var(--bp-tekst-2);
}

/* ---------------------------------------------------------------------
   12. O MNIE
   --------------------------------------------------------------------- */

/*
   SYLWETKA WYRASTA Z DOLNEJ KRAWĘDZI SEKCJI.

   Sekcja nie ma dolnej wyściółki - ma ją za to kolumna tekstu. Dzięki
   temu dolna krawędź zdjęcia JEST dolną krawędzią czarnego tła i nie
   trzeba tego wymuszać ujemnym marginesem, którego wartość rozjeżdżałaby
   się przy każdej zmianie odstępów sekcji.

   Ujemnych marginesów liczonych `calc [)` ze zmiennej świadomie tu nie ma:
   narzędzie sklejające arkusze na tej witrynie wycina takie reguły
   w całości, razem z sąsiadami, i nie zostawia po tym śladu.
*/
.ks-o-mnie {
	padding-top: 9.6rem;
	padding-bottom: 0;
}

.ks-o-mnie__siatka {
	position: relative;
	display: grid;
	grid-template-columns: 1.2fr 0.8fr;
	gap: 5.6rem;
	align-items: end;
}

.ks-o-mnie__tekst {
	padding-bottom: 9.6rem;
}

.ks-o-mnie__tekst .ks-h2 {
	margin-top: 1.6rem;
}

.ks-o-mnie__akapit {
	margin-top: 2.4rem;
	font-size: 1.9rem;
	font-weight: 300;
	line-height: 1.55;
	color: var(--bp-biel);
}

.ks-o-mnie__komorki {
	margin: 0;
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 1px;
	margin-top: 3.6rem;
	background: var(--ks-biel-ramka);
}

/* Logo po lewej, opis po prawej - w jednym wierszu. Ustawione jedno pod
   drugim znak uczelni wyglądał jak nagłówek nad zdaniem, a nie jak jego
   źródło. */
.ks-o-mnie__komorka {
	display: flex;
	align-items: center;
	gap: 1.8rem;
	padding: 2rem 2.2rem;
	background: var(--bp-czern);
}

.ks-o-mnie__skrot {
	display: flex;
	align-items: center;
	flex: 0 0 auto;
	min-width: 7rem;
	min-height: 3.4rem;
	font-family: var(--ks-pismo-nagl);
	font-size: 2.2rem;
	font-weight: 700;
	color: var(--bp-biel);
}

/*
   Logo uczelni w miejscu skrótu. Wysokość wpisana wprost, bo logotypy
   uczelni mają bardzo różne proporcje - bez tego jeden byłby dwa razy
   wyższy od drugiego i rząd przestałby się trzymać linii.

   `brightness(0) invert(1)` zamienia dowolny obrazek na biały sylwetkowy,
   niezależnie od tego, ile kolorów miał w oryginale. Sekcja jest czarna,
   a uczelnie nie wystawiają publicznie wersji jednobarwnych - to jest
   zmiana wyłącznie w warstwie wyświetlania, plik źródłowy zostaje.
*/
.ks-o-mnie__logo {
	max-width: 16rem;
	height: 3.4rem;
	width: auto;
	object-fit: contain;
	object-position: left center;
	filter: brightness(0) invert(1);
}

.ks-o-mnie__komorki .ks-o-mnie__opis {
	margin: 0;
	font-size: 1.6rem;
	line-height: 1.45;
	color: var(--ks-biel-80);
}

/*
   PORTRET STOI, NIE PŁYWA.

   Wcześniej miał parallaksę - przesuwał się przy przewijaniu niezależnie
   od tła. Sylwetka ucięta w pasie i unosząca się nad kolorem czyta się
   jako wklejka; nieruchoma, oparta o dolną krawędź, czyta się jako kadr.
*/
/*
   Sylwetka podciągnięta w górę. Między głową a górną krawędzią sekcji
   zostawało kilka centymetrów pustego tła, a postać kończyła się wysoko -
   ujemny margines przesuwa cały kadr, więc widać więcej sylwetki przy tej
   samej wysokości sekcji. Nadmiar u góry przycina `overflow` sekcji.
*/
.ks-o-mnie__portret {
	align-self: end;
	margin-top: -7rem;
	max-height: 64rem;
	overflow: hidden;
}

.ks-o-mnie__zdjecie {
	display: block;
	width: 100%;
	height: auto;
	filter: saturate(0.95);
}

/* ---------------------------------------------------------------------
   13. CERTYFIKATY - PAS W RUCHU
   --------------------------------------------------------------------- */

.ks-certyfikaty {
	padding-block: var(--ks-sekcja-duza);
	overflow: hidden;
}

.ks-certyfikaty__naglowek {
	display: grid;
	grid-template-columns: 1fr 42rem;
	gap: 4rem;
	align-items: end;
	margin-bottom: 4.8rem;
}

.ks-certyfikaty__opis {
	font-size: 1.6rem;
	line-height: 1.6;
	color: var(--ks-tekst-3);
}

/*
   SZEROKOŚĆ KAFLA JEST STAŁA.

   Przy `flex: 1` jeden certyfikat rozciągał się na pół szerokości pasa,
   a dwanaście ściskało do znaczka pocztowego - rozmiar zależał od liczby
   sztuk, czyli od czegoś, co zmienia się przy każdym dołożeniu skanu.
   Stała szerokość sprawia, że kolejny certyfikat wydłuża pas, zamiast
   przerysowywać wszystkie pozostałe.
*/
.ks-pas__tor {
	display: flex;
	width: max-content;
	gap: 2rem;
	animation: ksPas 60s linear infinite;
}

.ks-pas__zestaw {
	margin: 0;
	padding: 0;
	list-style: none;
	display: flex;
	gap: 2rem;
	width: max-content;
}

/*
   KAFEL JEST POZIOMY, BO CERTYFIKAT JEST POZIOMY.

   Wcześniej kafel miał proporcje pionowe (1 : 1,3) i skan wpuszczony
   w niego przez `contain` zajmował połowę wysokości, zostawiając dwa
   szerokie pasy pustego tła nad i pod dokumentem. Kadr zbliżony do
   proporcji dokumentu wypełnia się treścią.
*/
.ks-pas__kafel {
	position: relative;
	flex: 0 0 auto;
	width: 30rem;
	display: flex;
	flex-direction: column;
	gap: 1rem;
}

.ks-pas__przycisk {
	position: relative;
	display: block;
	width: 100%;
	aspect-ratio: 1.38 / 1;
	padding: 1.2rem;
	border: 1px solid var(--bp-ramka-lekka);
	border-radius: 1.8rem;
	/* Raster w miejscu skanu, którego jeszcze nie ma. Znika sam w chwili
	   wgrania pliku - nie ma przełącznika do pamiętania. */
	background: repeating-linear-gradient(135deg, var(--bp-tlo-jasne) 0 10px, var(--bp-biel) 10px 20px);
	overflow: hidden;
	cursor: pointer;
	transition: border-color .2s ease, box-shadow .2s ease;
	-webkit-tap-highlight-color: transparent;
}

.ks-pas__przycisk:hover,
.ks-pas__przycisk:focus-visible {
	border-color: var(--bp-akcent);
	box-shadow: var(--ks-cien-kafelek);
}

.ks-pas__skan {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	/* Skan ma być cały widoczny, a nie wypełniać kadr - to dokument,
	   nie fotografia. */
	object-fit: contain;
	background: var(--bp-biel);
	padding: 1rem;
}

.ks-pas__podpis {
	display: block;
	font-size: 1.5rem;
	color: var(--bp-tekst-2);
	text-align: center;
}

/* ---------------------------------------------------------------------
   13a. POWIĘKSZENIE CERTYFIKATU
   --------------------------------------------------------------------- */

.ks-lupa {
	position: fixed;
	inset: 0;
	z-index: 200;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 2rem;
}

/* Atrybut `hidden` z arkusza przeglądarki ma zerową wagę i przegrywa
   z regułą klasową wyżej. Bez tej deklaracji okno byłoby widoczne
   od wejścia na stronę. */
.ks-lupa[hidden] {
	display: none !important;
}

.ks-lupa__tlo {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	padding: 0;
	border: 0;
	background: color-mix(in srgb, var(--bp-czern) 72%, transparent);
	backdrop-filter: blur(4px);
	cursor: pointer;
}

.ks-lupa__panel {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 1.6rem;
	max-width: 96rem;
	width: 100%;
	padding: 2rem;
	border-radius: var(--ks-promien-panel);
	background: var(--bp-biel);
}

.ks-lupa__obraz {
	display: block;
	width: 100%;
	height: auto;
	max-height: 74vh;
	object-fit: contain;
}

.ks-lupa__podpis {
	font-size: 1.6rem;
	color: var(--bp-tekst-2);
	text-align: center;
}

.ks-lupa__zamknij {
	position: absolute;
	top: -1.6rem;
	right: -1.6rem;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 4.4rem;
	height: 4.4rem;
	padding: 0;
	border: 1px solid var(--bp-ramka-lekka);
	border-radius: 50%;
	background: var(--bp-biel);
	color: var(--bp-tekst);
	font-family: inherit;
	font-size: 2.6rem;
	line-height: 1;
	cursor: pointer;
	-webkit-user-select: none;
	user-select: none;
}

.ks-lupa__zamknij:hover,
.ks-lupa__zamknij:focus {
	border-color: var(--bp-akcent);
	color: var(--bp-akcent);
}

/*
   Wyciszenie obwódki przy ognisku ODDANYM ZE SKRYPTU po zamknięciu
   podglądu. Klasę zdejmuje ten sam skrypt przy pierwszym opuszczeniu
   elementu, więc obwódka wraca natychmiast dla osoby, która chodzi
   po stronie klawiaturą. Nie kasujemy `outline` na stałe - bez niego
   nie wiadomo, gdzie się jest.
*/
.ks-bez-obwodki:focus,
.ks-bez-obwodki:focus-visible {
	outline: none;
}

/* ---------------------------------------------------------------------
   14. EKIPA
   --------------------------------------------------------------------- */

.ks-zespol__panel {
	display: grid;
	grid-template-columns: 1fr 0.85fr;
	border: 1px solid var(--bp-ramka-lekka);
	border-radius: var(--ks-promien-kafel);
	background: var(--bp-tlo-jasne);
	overflow: hidden;
}

.ks-zespol__lewo {
	padding: 4.6rem;
}

.ks-zespol__lewo .ks-h2 {
	margin-top: 1.6rem;
}

.ks-zespol__lewo .ks-akapit {
	margin-top: 2rem;
	font-size: 1.7rem;
}

/*
   ZNAK AGENCJI W KRĘGACH.

   Kolumna odpowiada na pytanie, które czytelnik zadaje sobie dokładnie
   w tym miejscu: „to jednoosobowa działalność czy firma?". Sam tekst
   tego nie rozstrzyga - znak rozstrzyga.

   Kręgi rysuje obramowanie elementów, nie plik graficzny: skalują się
   z kolumną, nie kosztują żądania i nie ma czego zgubić przy
   przeprowadzce strony.
*/
/*
   TARCZA ZE ZNAKIEM AGENCJI.

   Znak stoi dokładnie na środku kręgów, a ikony specjalizacji krążą
   wokół niego. Środek wyznacza `position: absolute` z przesunięciem
   o połowę własnego rozmiaru - nie `flex`, bo w układzie elastycznym
   znak siadał na środku KOLUMNY, a kręgi rysowały się względem czegoś
   innego i oba środki się rozjeżdżały.
*/
.ks-zespol__prawo {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 42rem;
	padding: 4rem 3rem;
	border-left: 1px solid var(--bp-ramka-lekka);
	background: var(--bp-biel);
	overflow: hidden;
}

.ks-zespol__tarcza {
	position: relative;
	width: 38rem;
	height: 38rem;
}

.ks-zespol__krag {
	position: absolute;
	top: 50%;
	left: 50%;
	border: 1px solid var(--bp-ramka-lekka);
	border-radius: 50%;
	transform: translate(-50%, -50%);
}

.ks-zespol__krag--1 { width: 16rem; height: 16rem; }
.ks-zespol__krag--2 { width: 26rem; height: 26rem; }
.ks-zespol__krag--3 { width: 36rem; height: 36rem; }

/*
   Obraca się CAŁA orbita, a każdy napis obraca się w drugą stronę z tą
   samą prędkością. Bez tej drugiej animacji napisy jadą razem z okręgiem
   i po ćwierci obrotu stoją bokiem, a po pół - do góry nogami.
*/
.ks-zespol__orbita {
	position: absolute;
	inset: 0;
	animation: ksOrbita 54s linear infinite;
}

.ks-zespol__punkt {
	position: absolute;
	top: 50%;
	left: 50%;
	margin: -2.4rem 0 0 -2.4rem;
	padding: 0;
	border: 0;
	background: none;
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
}

.ks-zespol__punkt-wnetrze {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.5rem;
	animation: ksOrbitaOdwrotna 54s linear infinite;
}

.ks-zespol__punkt-ikona {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 4.8rem;
	height: 4.8rem;
	border: 1px solid var(--bp-ramka-lekka);
	border-radius: 50%;
	background: var(--bp-biel);
	color: var(--bp-akcent);
	box-shadow: 0 6px 18px color-mix(in srgb, var(--bp-czern) 8%, transparent);
	transition: border-color .2s ease, transform .2s ease;
}

.ks-zespol__punkt-napis {
	font-size: 1.3rem;
	font-weight: 500;
	white-space: nowrap;
	color: var(--bp-tekst-2);
}

.ks-zespol__punkt:hover .ks-zespol__punkt-ikona,
.ks-zespol__punkt--wybrany .ks-zespol__punkt-ikona {
	border-color: var(--bp-akcent);
	transform: scale(1.08);
}

.ks-zespol__znak {
	position: absolute;
	top: 50%;
	left: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 15rem;
	height: 15rem;
	margin: -7.5rem 0 0 -7.5rem;
	border: 2px solid transparent;
	border-radius: 50%;
	background: var(--bp-biel);
	box-shadow: var(--ks-cien-kafelek);
	transition: border-color .2s ease, transform .2s ease;
	-webkit-tap-highlight-color: transparent;
}

/* Obwódka pojawia się dopiero pod kursorem - stale widoczna sugerowałaby,
   że kółko jest zaznaczone, a nie że da się w nie kliknąć. */
.ks-zespol__znak:hover,
.ks-zespol__znak:focus-visible {
	border-color: var(--bp-akcent);
	transform: scale(1.03);
}

.ks-zespol__logo {
	max-width: 10rem;
	height: auto;
}

/* --- Pas specjalizacji pod panelem --- */

.ks-zespol__specjalizacje {
	margin-top: 2rem;
}

.ks-zespol__etykieta {
	margin-bottom: 1.6rem;
	font-size: 1.7rem;
	font-weight: 600;
	color: var(--bp-tekst);
}

.ks-zespol__lista {
	margin: 0;
	padding: 0;
	list-style: none;
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: 1.6rem;
	align-items: start;
}

.ks-zespol__kafel {
	border: 1px solid var(--bp-ramka-lekka);
	border-radius: var(--ks-promien-kafel-s);
	background: var(--bp-biel);
	overflow: hidden;
	transition: border-color .2s ease;
}

.ks-zespol__kafel:hover {
	border-color: var(--bp-akcent);
}

.ks-zespol__przycisk {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 1rem;
	width: 100%;
	padding: 2.2rem 2rem;
	border: 0;
	background: none;
	font-family: var(--bp-pismo);
	text-align: left;
	cursor: pointer;
	-webkit-user-select: none;
	user-select: none;
	-webkit-tap-highlight-color: transparent;
}

.ks-zespol__ikona {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 4.2rem;
	height: 4.2rem;
	border-radius: 1.2rem;
	background: var(--bp-tlo-jasne);
	color: var(--bp-akcent);
}

/* Nazwa po lewej, grot dosunięty do prawej krawędzi kafla - jeden wiersz,
   więc grot czyta się jak przycisk rozwijania, a nie jak kolejna pozycja. */
.ks-zespol__wiersz {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1.2rem;
	width: 100%;
}

.ks-zespol__nazwa {
	font-size: 1.7rem;
	font-weight: 600;
	color: var(--bp-tekst);
}

.ks-zespol__grot {
	display: flex;
	align-items: center;
	flex: 0 0 auto;
	color: var(--ks-tekst-3);
	transition: transform .25s ease, color .2s ease;
}

.ks-zespol__przycisk[aria-expanded="true"] .ks-zespol__grot {
	transform: rotate(180deg);
	color: var(--bp-akcent);
}

.ks-zespol__opis {
	padding: 0 2rem 2.2rem;
}

.ks-zespol__opis p {
	margin: 0;
	font-size: 1.5rem;
	line-height: 1.5;
	color: var(--bp-tekst-2);
}

/* ---------------------------------------------------------------------
   15. OPINIE - SLIDER
   --------------------------------------------------------------------- */

.ks-opinie__naglowek {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 3rem;
	margin-bottom: 4rem;
}

.ks-opinie__naglowek .ks-h2 {
	margin-top: 1.2rem;
}

.ks-opinie__sterowanie {
	display: flex;
	align-items: center;
	gap: 1.2rem;
}

/*
   STRZAŁKA TO SAM GROT.

   Ramka i białe tło robiły z dwóch strzałek parę ciemnych kwadratów
   konkurujących z nagłówkiem sekcji. Grot niesie dokładnie tę samą
   informację i znika w tle, dopóki nie jest potrzebny.

   Pole dotykowe zostaje pełne - 44 px wysokości i szerokości - mimo że
   widać z niego tylko rysunek. Zmniejszony jest wygląd, nie cel kliknięcia.
*/
.ks-strzalka {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 4.4rem;
	height: 4.4rem;
	padding: 0;
	border: 0;
	background: none;
	color: var(--bp-tekst);
	font-family: inherit;
	cursor: pointer;
	transition: color .2s ease, opacity .2s ease, transform .2s ease;
	-webkit-user-select: none;
	user-select: none;
	-webkit-tap-highlight-color: transparent;
}

.ks-strzalka__grot {
	display: block;
}

.ks-strzalka:hover:not(:disabled),
.ks-strzalka:focus:not(:disabled) {
	color: var(--bp-akcent);
}

.ks-strzalka[data-ks-slider-wstecz]:hover:not(:disabled) {
	transform: translateX(-2px);
}

.ks-strzalka[data-ks-slider-dalej]:hover:not(:disabled) {
	transform: translateX(2px);
}

.ks-strzalka:disabled {
	opacity: 0.35;
	cursor: default;
}

.ks-opinie__link {
	margin-left: 0.8rem;
	font-size: 1.6rem;
	font-weight: 500;
	color: var(--bp-akcent);
}

.ks-slider {
	overflow: hidden;
}

.ks-slider__tor {
	margin: 0;
	padding: 0;
	list-style: none;
	display: flex;
	gap: 2.1rem;
	transition: transform .45s cubic-bezier(.2, .8, .2, 1);
}

.ks-opinia {
	display: flex;
	flex-direction: column;
	flex: 0 0 calc(33.333% - 1.4rem);
	padding: 3.4rem;
	border-radius: 2.2rem;
	background: var(--bp-tlo-jasne);
}

.ks-opinia__gora {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1.6rem;
}

/*
   LOGO BEZ PUDEŁKA.

   Wcześniej siedziało w białym, zaokrąglonym prostokącie na jasnoszarym
   tle karty. Pudełko było widoczne, logo w nim małe, a lewa krawędź
   logotypu nie trzymała linii z tekstem opinii pod spodem. Teraz znak
   stoi wprost na karcie i zaczyna się dokładnie tam, gdzie treść.
*/
.ks-opinia__logo {
	display: flex;
	align-items: center;
	justify-content: flex-start;
	height: 4.8rem;
}

/*
   Jednokolorowe, bo w karcie opinii znak firmy jest podpisem, nie marką
   do wyeksponowania. Kolorowe logotypy w czterech kartach obok siebie
   ciągną wzrok mocniej niż same opinie, które są tu treścią.
*/
.ks-opinia__logo img {
	max-width: 19rem;
	max-height: 4.8rem;
	width: auto;
	height: auto;
	object-fit: contain;
	object-position: left center;
	filter: grayscale(1);
}

.ks-opinia__logo-zastepnik {
	font-size: 1.3rem;
	color: var(--ks-tekst-4);
}

.ks-opinia__gwiazdki {
	font-size: 1.5rem;
	letter-spacing: 0.16em;
	color: var(--bp-akcent);
}

/* Kursywa zamiast cudzysłowu. Cudzysłów w cytacie złożonym w osobnej
   karcie jest zapisem tego, co układ już mówi - że to cudze słowa. */
.ks-opinia__tresc {
	flex: 1;
	margin-top: 2.4rem;
	font-size: 1.8rem;
	font-style: italic;
	line-height: 1.6;
	color: var(--bp-tekst);
}

.ks-opinia__stopka {
	margin-top: 2.8rem;
	padding-top: 2rem;
	border-top: 1px solid var(--bp-ramka-lekka);
}

.ks-opinia__autor {
	font-size: 1.7rem;
	font-weight: 600;
}

.ks-opinia__firma {
	margin-top: 0.4rem;
	font-size: 1.6rem;
	color: var(--ks-tekst-3);
}

/* ---------------------------------------------------------------------
   16. KONTAKT
   --------------------------------------------------------------------- */

.ks-kontakt__siatka {
	display: grid;
	grid-template-columns: 1fr 1.05fr;
	gap: 6rem;
	align-items: start;
}

.ks-kontakt__lewo .ks-h2 {
	margin-top: 1.6rem;
}

.ks-kontakt__lewo .ks-akapit {
	margin-top: 2rem;
}

/*
   DANE KONTAKTOWE: IKONA ZAMIAST ETYKIETY.

   Napis „Telefon" obok numeru telefonu nie niesie żadnej informacji -
   numer sam mówi, czym jest. Ikona zajmuje mniej miejsca, czyta się
   szybciej i nie trzeba jej tłumaczyć.

   Cały wiersz jest odnośnikiem, nie sam napis: cel kliknięcia ma
   wysokość wiersza, a nie wysokość liter.
*/
.ks-kontakt__dane {
	margin: 0;
	padding: 0;
	list-style: none;
	margin-top: 3.6rem;
}

.ks-kontakt__wiersz {
	border-top: 1px solid var(--bp-ramka-lekka);
}

.ks-kontakt__link {
	display: flex;
	align-items: center;
	gap: 1.4rem;
	padding-block: 1.6rem;
	color: var(--bp-tekst);
	transition: color .2s ease;
	-webkit-tap-highlight-color: transparent;
}

.ks-kontakt__link:hover,
.ks-kontakt__link:focus {
	color: var(--bp-akcent);
}

.ks-kontakt__ikona {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 4.2rem;
	height: 4.2rem;
	border-radius: 1.2rem;
	background: var(--bp-tlo-jasne);
	color: var(--bp-akcent);
}

/* Numer i adres bez pogrubienia. Obok ikony w kwadracie pogrubienie
   robiło z wiersza drugi nagłówek i przeciągało uwagę z tekstu obok. */
.ks-kontakt__wartosc {
	font-size: 1.9rem;
	font-weight: 500;
}

/* Znaki serwisów. Stoją osobno, bo są dopiskiem - w wierszach danych
   zajmowały tyle samo miejsca co telefon, choć nikt się nimi nie
   kontaktuje. */
.ks-kontakt__social {
	margin: 0;
	padding: 0;
	list-style: none;
	display: flex;
	gap: 1.2rem;
	margin-top: 2.4rem;
}

.ks-kontakt__social-link {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 4.4rem;
	height: 4.4rem;
	border: 1px solid var(--bp-ramka-lekka);
	border-radius: 1.2rem;
	color: var(--ks-tekst-3);
	transition: border-color .2s ease, color .2s ease;
	-webkit-tap-highlight-color: transparent;
}

.ks-kontakt__social-link:hover,
.ks-kontakt__social-link:focus {
	border-color: var(--bp-akcent);
	color: var(--bp-akcent);
}

.ks-kontakt__panel {
	padding: 3.8rem;
	border: 1px solid var(--bp-ramka-lekka);
	border-radius: var(--ks-promien-panel);
	background: var(--bp-biel);
}

/* ---------------------------------------------------------------------
   17. FORMULARZ

   Wzorzec obowiązujący na wszystkich stronach: etykieta leży w polu
   i po kliknięciu wjeżdża w jego kontur. Robi to czysty CSS - pole ma
   `placeholder=" "`, więc `:placeholder-shown` mówi „użytkownik jeszcze
   nic nie wpisał", a `input` stoi w kodzie PRZED etykietą, żeby zadziałał
   selektor sąsiada. Zamiana ich kolejności psuje efekt bez ostrzeżenia.
   --------------------------------------------------------------------- */

.ks-formularz {
	display: flex;
	flex-direction: column;
	gap: 1.8rem;
}

/*
   Pole jest akapitem, więc dziedziczy margines akapitu z motywu
   nadrzędnego. W siatce dwóch pól obok siebie odziedziczony margines
   przesuwał jedno z nich w dół względem drugiego - pola przestawały
   stać w jednej linii, choć w arkuszu nic ich nie rozsuwało.
*/
.ks-pole {
	position: relative;
	margin: 0;
}

.ks-pole input,
.ks-pole textarea {
	width: 100%;
	padding: 1.4rem 1.6rem;
	border: 1px solid var(--bp-ramka);
	border-radius: 1rem;
	background: var(--bp-biel);
	color: var(--bp-tekst);
	font-family: var(--bp-pismo);
	font-size: 1.7rem;
	line-height: 2.4rem;
	transition: border-color .15s ease;
}

.ks-pole textarea {
	min-height: 10rem;
	resize: vertical;
}

/*
   W skupieniu zmienia się WYŁĄCZNIE kolor obramowania i etykiety.
   Żadnego cienia, poświaty ani grubszej ramki - to zmieniałoby wysokość
   pola i wyglądało jak usterka przeglądarki, a nie jak zamiar.
*/
.ks-pole input:focus,
.ks-pole textarea:focus {
	border-color: var(--bp-akcent);
	outline: none;
}

/*
   Etykieta wjeżdżająca w kontur dotyczy WYŁĄCZNIE pól tekstowych.
   Wcześniej reguła celowała w każdą etykietę będącą dzieckiem `.ks-pole`,
   więc łapała też etykietę zgody - a ta owija pole wyboru i tekst.
   Wyprowadzona z układu zostawiała po sobie akapit zerowej wysokości
   i tekst zgody nachodził na przycisk wysyłki.
*/
.ks-pole > :is( input, textarea ) + label {
	position: absolute;
	left: 1rem;
	top: 1.4rem;
	padding: 0 0.6rem;
	background: var(--bp-biel);
	color: var(--ks-tekst-3);
	font-size: 1.7rem;
	line-height: 2.4rem;
	transform-origin: left top;
	transition: transform .15s ease, color .15s ease;
	pointer-events: none;
}

.ks-pole input:focus + label,
.ks-pole textarea:focus + label,
.ks-pole input:not(:placeholder-shown) + label,
.ks-pole textarea:not(:placeholder-shown) + label {
	transform: translateY(-2.3rem) scale(0.8);
	color: var(--bp-akcent);
}

.ks-pole__gwiazdka {
	color: var(--bp-akcent);
}

/*
   Dopisek „(nieobowiązkowe)" zwija SZEROKOŚĆ, a nie znika skokiem -
   po wjechaniu etykiety w kontur nie ma już na niego miejsca i rozpychałby
   ramkę.
*/
.ks-pole__dopisek {
	display: inline-block;
	max-width: 20rem;
	overflow: hidden;
	white-space: nowrap;
	opacity: 1;
	vertical-align: bottom;
	transition: max-width .15s ease, opacity .15s ease;
}

.ks-pole input:focus + label .ks-pole__dopisek,
.ks-pole input:not(:placeholder-shown) + label .ks-pole__dopisek {
	max-width: 0;
	opacity: 0;
}

.ks-pole-para {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 1.6rem;
	align-items: start;
}

.ks-pole--zgoda label {
	display: flex;
	align-items: flex-start;
	gap: 1rem;
	font-size: 1.5rem;
	line-height: 2rem;
	color: var(--ks-tekst-3);
}

.ks-pole--zgoda input {
	flex: 0 0 auto;
	width: 1.8rem;
	height: 1.8rem;
	margin-top: 0.2rem;
	accent-color: var(--bp-akcent);
}

/* Pułapka na roboty: wyprowadzona poza ekran, nie `display: none` -
   to drugie bywa przez automaty rozpoznawane i omijane. */
.ks-pulapka {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.ks-formularz__wyslij {
	width: 100%;
	height: 5.6rem;
	border-radius: 1.2rem;
	font-size: 1.7rem;
}

.ks-formularz__tytul {
	margin-bottom: 2.4rem;
	font-family: var(--ks-pismo-nagl);
	font-weight: 700;
	color: var(--bp-tekst);
}

/* Napis „lub zadzwoń" stoi na środku panelu, pod przyciskiem na pełną
   szerokość. Dosunięty do lewej wyglądał jak resztka po przycisku. */
.ks-formularz__alternatywa {
	justify-content: center;
}

.ks-formularz__wyslij[disabled] {
	opacity: 0.6;
	cursor: default;
}

.ks-formularz__komunikat {
	font-size: 1.5rem;
	color: var(--bp-akcent);
}

.ks-formularz__komunikat:empty {
	display: none;
}

.ks-pole--blad input,
.ks-pole--blad textarea {
	border-color: var(--bp-blad);
}

.ks-pole__blad {
	display: block;
	margin-top: 0.6rem;
	font-size: 1.4rem;
	color: var(--bp-blad);
}

.ks-formularz__alternatywa {
	display: flex;
	align-items: center;
	gap: 0.8rem;
	font-size: 1.6rem;
	color: var(--ks-tekst-3);
}

.ks-formularz__telefon {
	font-weight: 700;
	color: var(--bp-tekst);
	white-space: nowrap;
}

.ks-formularz__dziekujemy {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 1.6rem;
	padding: 4rem 0;
	text-align: center;
	font-size: 1.8rem;
	color: var(--bp-tekst);
}

.ks-formularz__ptaszek {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 6rem;
	height: 6rem;
	border-radius: 50%;
	background: var(--bp-tlo-jasne);
	color: var(--bp-akcent);
}

/* ---------------------------------------------------------------------
   18. STOPKA
   --------------------------------------------------------------------- */

.ks-stopka {
	position: relative;
	padding: 7rem 0 3rem;
	background: var(--bp-czern);
	color: var(--bp-biel);
	overflow: hidden;
}

/*
   CZTERY KOLUMNY: znak, dwa spisy odnośników, dane kontaktowe.
   Kolumna ze znakiem jest szersza, bo mieści zdanie; trzy pozostałe
   są równe, żeby spisy stały w jednej siatce.
*/
.ks-stopka__gora {
	display: grid;
	grid-template-columns: 1.4fr 1fr 1fr 1fr;
	gap: 3.6rem;
	padding-bottom: 4rem;
	border-bottom: 1px solid var(--ks-biel-ramka);
}

.ks-stopka__logo {
	height: 3.6rem;
	width: auto;
}

.ks-stopka__social {
	margin: 0;
	padding: 0;
	list-style: none;
	display: flex;
	gap: 1rem;
	margin-top: 2rem;
}

.ks-stopka__social-link {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 4.4rem;
	height: 4.4rem;
	border: 1px solid var(--ks-biel-ramka);
	border-radius: 1.2rem;
	color: var(--bp-biel);
	transition: border-color .2s ease;
	-webkit-tap-highlight-color: transparent;
}

.ks-stopka__social-link:hover,
.ks-stopka__social-link:focus {
	border-color: var(--bp-akcent-ciemny);
}

.ks-stopka__opis {
	max-width: 42rem;
	margin-top: 2rem;
	font-size: 1.6rem;
	line-height: 1.6;
	color: var(--ks-biel-80);
}

.ks-stopka__tytul {
	font-family: var(--bp-pismo);
	font-size: 1.4rem;
	font-weight: 400;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--ks-biel-75);
}

.ks-stopka__lista {
	margin: 0;
	padding: 0;
	list-style: none;
	margin-top: 1.8rem;
}

.ks-stopka__pozycja + .ks-stopka__pozycja {
	margin-top: 1.2rem;
}

.ks-stopka__link {
	font-size: 1.6rem;
	color: var(--ks-biel-85);
	transition: color .2s ease;
}

.ks-stopka__link:hover,
.ks-stopka__link:focus {
	color: var(--bp-biel);
}

.ks-stopka__dol {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 2rem;
	padding-top: 2.4rem;
}

.ks-stopka__prawa {
	font-size: 1.4rem;
	color: var(--ks-biel-75);
}

.ks-stopka__prawne {
	margin: 0;
	padding: 0;
	list-style: none;
	display: flex;
	gap: 2rem;
}

.ks-stopka__prawne .ks-stopka__link {
	font-size: 1.4rem;
}

/* ---------------------------------------------------------------------
   18a. ZAUFALI MI - PAS LOGOTYPÓW
   --------------------------------------------------------------------- */

.ks-zaufali {
	padding-block: 9.6rem 6.4rem;
	overflow: hidden;
}

.ks-zaufali__tytul {
	margin-bottom: 3rem;
	font-size: 1.5rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--ks-tekst-3);
	text-align: center;
}

/*
   Maska wygaszająca pas przy krawędziach. Bez niej logotyp znika skokiem
   na brzegu ekranu i pas wygląda na ucięty, a nie na przesuwający się
   dalej. Wartości w procentach, nie w pikselach - wygaszenie ma zajmować
   tę samą część szerokości na każdym ekranie.
*/
.ks-zaufali__pas {
	-webkit-mask-image: linear-gradient(to right, transparent 0%, var(--bp-czern) 9%, var(--bp-czern) 91%, transparent 100%);
	mask-image: linear-gradient(to right, transparent 0%, var(--bp-czern) 9%, var(--bp-czern) 91%, transparent 100%);
}

/*
   SZEROKOŚĆ POLA JEST STAŁA, A NIE DZIELONA PO RÓWNO.

   Przy `flex: 1` szerokość logotypu zależała od tego, ile ich jest -
   osiem sztuk rozpychało się na pół ekranu, dwadzieścia ściskało do
   znaczka. Stała szerokość pola sprawia, że dołożenie kolejnej firmy
   wydłuża pas, zamiast zmniejszać wszystkie pozostałe.

   Tor i zestawy mają szerokość `max-content`, więc przesunięcie o -50%
   to dokładnie jeden zestaw - niezależnie od liczby logotypów.
*/
.ks-zaufali__tor {
	display: flex;
	width: max-content;
	animation: ksPas 72s linear infinite;
}

.ks-zaufali__zestaw {
	margin: 0;
	padding: 0;
	list-style: none;
	display: flex;
	align-items: center;
	width: max-content;
}

/*
   KAŻDY ZNAK W SWOIM KAFELKU - TAK JAK NA TABLICY DO DRUKU.

   Bez kafelka pas był chaotyczny: logotypy mają bardzo różne proporcje
   i bez wspólnej ramki jedno wydawało się ogromne, a sąsiednie malutkie.
   Kafelek daje im wspólną wielkość i wspólny odstęp, a wrażenie rozmiaru
   bierze się wtedy z zawartości, a nie z kształtu znaku.
*/
.ks-zaufali__pole {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 20rem;
	height: 11rem;
	margin-inline: 0.9rem;
	padding: 2rem;
	border: 1px solid var(--bp-ramka-lekka);
	border-radius: 1.8rem;
	background: var(--bp-biel);
}

/*
   Dwa ograniczenia naraz, i to jest cały sens: wysokość pilnuje znaków
   wysokich i wąskich, szerokość - płaskich i szerokich. Przy jednym
   z nich drugi rodzaj i tak wychodziłby poza skalę.

   Logotypy idą tak, jak zostały dostarczone - bez odbarwiania i bez
   przygaszania. Są dowodem, a nie tłem.
*/
.ks-zaufali__znak {
	max-width: 13rem;
	max-height: 5.2rem;
	width: auto;
	height: auto;
	object-fit: contain;
}

/* ---------------------------------------------------------------------
   18b. KORZYŚCI W KAFLU SPECJALIZACJI
   --------------------------------------------------------------------- */

/*
   Zerowanie listy stoi przy KAŻDEJ liście z osobna, we własnej regule
   klasowej. Reguła zbiorcza w rodzaju `.ks-landing ul` liczy klasę
   i znacznik, więc bije każdą klasę modyfikującą tę samą listę.
   Zapis w `:where()` rozwiązałby to wagą, ale narzędzie sklejające
   arkusze na tej witrynie wycina reguły z `:where()` razem z sąsiadami.
*/
.ks-korzysci {
	margin: 0;
	padding: 0;
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: 1.6rem;
}

.ks-korzysci__wiersz {
	display: flex;
	align-items: flex-start;
	gap: 1.4rem;
}

.ks-korzysci__ikona {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 3.8rem;
	height: 3.8rem;
	border-radius: 1.1rem;
	background: var(--bp-biel);
	color: var(--bp-akcent);
}

.ks-korzysci__tekst {
	padding-top: 0.7rem;
	font-size: 1.7rem;
	line-height: 1.45;
	color: var(--bp-tekst);
}

/* ---------------------------------------------------------------------
   18c. WARUNKI KAMPANII W WIERSZU CASE STUDY
   --------------------------------------------------------------------- */

.ks-akordeon__opis {
	display: flex;
	flex-direction: column;
	gap: 0.6rem;
}

.ks-akordeon__warunki {
	display: flex;
	flex-wrap: wrap;
	gap: 0.8rem;
}

.ks-akordeon__warunek {
	padding: 0.4rem 1rem;
	border: 1px solid var(--ks-biel-ramka);
	border-radius: 99.9rem;
	font-size: 1.4rem;
	color: var(--bp-biel);
	white-space: nowrap;
}

/* ---------------------------------------------------------------------
   18d. PROCES - KAFEL, KTÓRY REAGUJE

   Sekcja opisuje sposób pracy, więc kafel ma się zachowywać jak krok,
   a nie jak akapit w ramce: numer rozjaśnia się, kafel unosi, a kreska
   u dołu dorysowuje się od lewej. Wszystko na `transform` i `opacity`,
   czyli bez przeliczania układu strony przy każdej klatce.
   --------------------------------------------------------------------- */

.ks-krok {
	position: relative;
	overflow: hidden;
	transition: transform .25s ease, background-color .25s ease;
}

.ks-krok::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	width: 100%;
	height: 3px;
	background: var(--bp-akcent);
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform .35s cubic-bezier(.2, .8, .2, 1);
}

.ks-krok:hover {
	transform: translateY(-4px);
	background: var(--ks-tlo-hover);
}

.ks-krok:hover::after {
	transform: scaleX(1);
}

.ks-krok__numer {
	transition: opacity .25s ease, color .25s ease;
}

.ks-krok:hover .ks-krok__numer {
	opacity: 0.85;
}

/* ---------------------------------------------------------------------
   18e. PASEK „JAK MOGĘ CI POMÓC?"
   --------------------------------------------------------------------- */

/*
   PASEK LEŻY NA SEKCJI STARTOWEJ, NIE NAD NIĄ.

   Wcześniej był zwykłym blokiem w przepływie strony: miał własne białe
   tło i odsuwał sekcję startową w dół, przez co pojawiała się nad nią
   pozioma krawędź, a pierwszy ekran przestawał zaczynać się od góry.

   Teraz jest nałożony - tak samo jak nagłówek. Pozycja bezwzględna
   względem `.ks-landing`, więc przewija się razem ze stroną (inaczej
   niż nagłówek, który zostaje). Sekcja startowa robi mu miejsce górną
   wyściółką, a nie własnym początkiem.
*/
.ks-landing {
	position: relative;
}

.ks-pomoc {
	position: absolute;
	/* Dolna krawędź wyspy nagłówka = 1.8rem + 6.4rem = 8.2rem. Pasek zaczyna
	   się tuż pod nią, żeby czytał się jako dalszy ciąg nagłówka, a nie
	   osobny element zawieszony w połowie drogi do tytułu. */
	top: 8.2rem;
	left: 0;
	right: 0;
	z-index: 3;
	background: transparent;
	border-bottom: 1px solid color-mix(in srgb, var(--bp-czern) 7%, transparent);
}

.ks-pomoc__pasek {
	display: flex;
	align-items: center;
	gap: 2.4rem;
	min-height: 5rem;
}

.ks-pomoc__etykieta {
	flex: 0 0 auto;
	font-size: 1.3rem;
	font-weight: 500;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--ks-tekst-3);
}

.ks-pomoc__przyciski {
	display: flex;
	align-items: stretch;
	gap: 0.4rem;
	flex-wrap: wrap;
}

/*
   Zaznaczenie robi kreska pod przyciskiem, a nie tło. Tło zamieniałoby
   pasek w rząd klawiszy i konkurowało z przyciskiem „Odbierz ofertę"
   stojącym w nagłówku tuż nad nim.
*/
/*
   STAN SPOCZYNKU JEST TYM, CO WCZEŚNIEJ BYŁO STANEM POD KURSOREM:
   napis w pełnym kolorze tekstu, ikona w kolorze akcentu.

   Poprzednio pasek w spoczynku był wyszarzony i wyglądał na nieaktywny -
   a to jest pierwsza rzecz pod nagłówkiem i ma zapraszać do kliknięcia,
   nie czekać, aż ktoś na nią najedzie.

   Pod kursorem robi się niebieski cały napis. Zmiana koloru tekstu,
   a nie tła - w pasku bez teł to jedyny sygnał, który nie rozpycha
   układu i nie przesuwa sąsiednich pozycji.
*/
.ks-pomoc__btn {
	display: inline-flex;
	align-items: center;
	gap: 0.9rem;
	min-height: 4.4rem;
	padding: 0 1.4rem;
	border: 0;
	border-bottom: 2px solid transparent;
	background: none;
	color: var(--bp-tekst);
	font-family: var(--bp-pismo);
	font-size: 1.5rem;
	font-weight: 500;
	white-space: nowrap;
	cursor: pointer;
	transition: color .2s ease, border-color .2s ease;
	-webkit-user-select: none;
	user-select: none;
	-webkit-tap-highlight-color: transparent;
}

.ks-pomoc__ikona {
	display: flex;
	align-items: center;
	color: var(--bp-akcent);
	transition: color .2s ease;
}

.ks-pomoc__btn:hover,
.ks-pomoc__btn:focus-visible {
	color: var(--bp-akcent);
}

.ks-pomoc__btn[aria-selected="true"] {
	color: var(--bp-akcent);
	border-bottom-color: var(--bp-akcent);
}

.ks-pomoc__btn[aria-selected="true"] .ks-pomoc__ikona {
	color: var(--bp-akcent);
}

/* --- Panel, który wchodzi na miejsce sekcji startowej --- */

/*
   Panel ma tę samą wysokość co sekcja startowa, którą zastępuje.
   Bez tego kliknięcie w pasek zmieniało wysokość pierwszego ekranu
   i cała strona podskakiwała.
*/
.ks-panel-pomocy {
	display: flex;
	align-items: center;
	min-height: 100vh;
	min-height: 100svh;
	padding-block: 16rem 6rem;
	background: linear-gradient(178deg, color-mix(in srgb, var(--bp-akcent) 3%, var(--bp-biel)) 0%, color-mix(in srgb, var(--bp-akcent) 6%, var(--bp-biel)) 52%, color-mix(in srgb, var(--bp-akcent) 9%, var(--bp-biel)) 100%);
}

.ks-panel-pomocy[hidden] {
	display: none !important;
}

.ks-panel-pomocy__siatka {
	display: grid;
	grid-template-columns: 1fr 1.02fr;
	gap: 6rem;
	align-items: start;
}

.ks-panel-pomocy__wroc {
	display: inline-flex;
	align-items: center;
	gap: 0.8rem;
	min-height: 4.4rem;
	margin-bottom: 1.2rem;
	padding: 0;
	border: 0;
	background: none;
	color: var(--ks-tekst-3);
	font-family: var(--bp-pismo);
	font-size: 1.5rem;
	cursor: pointer;
	transition: color .2s ease;
	-webkit-tap-highlight-color: transparent;
}

.ks-panel-pomocy__wroc:hover,
.ks-panel-pomocy__wroc:focus-visible {
	color: var(--bp-akcent);
}

.ks-panel-pomocy__tytul {
	font-weight: 800;
	line-height: 1.08;
	letter-spacing: -0.015em;
	color: var(--bp-tekst);
}

/* Druga część nagłówka w kolorze akcentu i od nowego wiersza - ten sam
   zabieg co w nagłówku sekcji startowej, więc panel czyta się jak jej
   ciąg dalszy, a nie jak inna strona. */
.ks-panel-pomocy__akcent {
	display: block;
	color: var(--bp-akcent);
}

.ks-panel-pomocy__opis {
	max-width: 54rem;
	margin-top: 2rem;
	font-size: 1.8rem;
	line-height: 1.6;
	color: var(--bp-tekst-2);
}

.ks-panel-pomocy__punkty {
	margin: 3rem 0 0;
	padding: 0;
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: 1.4rem;
}

.ks-panel-pomocy__punkt {
	display: flex;
	align-items: flex-start;
	gap: 1.2rem;
	font-size: 1.7rem;
	line-height: 1.5;
	color: var(--bp-tekst);
}

.ks-panel-pomocy__ptaszek {
	flex: 0 0 auto;
	margin-top: 0.2rem;
	color: var(--bp-akcent);
}

.ks-panel-pomocy__prawo {
	padding: 3.6rem;
	border: 1px solid var(--bp-ramka-lekka);
	border-radius: var(--ks-promien-panel);
	background: var(--bp-biel);
	box-shadow: var(--ks-cien-kafelek);
}

/* ---------------------------------------------------------------------
   18f. PRZEŁĄCZNIK JĘZYKÓW I ODZNAKI W SEKCJI STARTOWEJ
   --------------------------------------------------------------------- */

.ks-naglowek__jezyki {
	display: flex;
	align-items: center;
}

/*
   ODZNAKI POD AKAPITEM SEKCJI STARTOWEJ.

   Obie w tej samej ramce: jasne tło, włos konturu, zaokrąglenie. Znak
   partnera i ocena to dwa dowody tego samego rodzaju, więc mają wyglądać
   jak para, a nie jak przypadkowe elementy obok siebie.
*/
.ks-hero__odznaki {
	display: flex;
	flex-wrap: wrap;
	gap: 1.2rem;
	margin-top: 2.6rem;
}

.ks-odznaka {
	display: inline-flex;
	align-items: center;
	gap: 1rem;
	height: 4.6rem;
	padding: 0 1.6rem;
	border: 1px solid var(--bp-ramka-lekka);
	border-radius: 1.2rem;
	background: color-mix(in srgb, var(--bp-biel) 86%, transparent);
}

.ks-odznaka__znak {
	height: 2.2rem;
	width: auto;
	max-width: 15rem;
	object-fit: contain;
}

.ks-odznaka__gwiazdki {
	font-size: 1.5rem;
	letter-spacing: 0.08em;
	line-height: 1;
	color: var(--bp-gwiazdki);
}

.ks-odznaka__napis {
	font-size: 1.5rem;
	font-weight: 500;
	color: var(--bp-tekst);
	white-space: nowrap;
}

/* ---------------------------------------------------------------------
   18g. CASE STUDY - KAFLE I PODSTRONA
   --------------------------------------------------------------------- */

.ks-case-lista__siatka {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 2.4rem;
}

.ks-case {
	position: relative;
	display: flex;
	flex-direction: column;
	border: 1px solid var(--bp-ramka-lekka);
	border-radius: var(--ks-promien-kafel);
	background: var(--bp-biel);
	overflow: hidden;
	transition: transform .25s ease, box-shadow .25s ease, border-color .2s ease;
}

.ks-case:hover {
	transform: translateY(-4px);
	border-color: var(--bp-akcent);
	box-shadow: var(--ks-cien-kafelek);
}

.ks-case__zdjecie {
	position: relative;
	aspect-ratio: 16 / 10;
	background: var(--bp-tlo-jasne);
	overflow: hidden;
}

.ks-case__foto {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .5s cubic-bezier(.2, .8, .2, 1);
}

.ks-case:hover .ks-case__foto {
	transform: scale(1.04);
}

/* Wynik na zdjęciu, nie pod nim: to jedyna liczba, dla której ktoś
   otwiera case study, więc ma być widoczna przed przeczytaniem tytułu. */
.ks-case__wynik {
	position: absolute;
	left: 1.6rem;
	bottom: 1.6rem;
	display: flex;
	align-items: baseline;
	gap: 0.8rem;
	padding: 0.9rem 1.4rem;
	border-radius: 1.2rem;
	background: color-mix(in srgb, var(--bp-biel) 94%, transparent);
	backdrop-filter: blur(6px);
}

.ks-case__metryka {
	font-family: var(--ks-pismo-nagl);
	font-size: 2.4rem;
	font-weight: 800;
	line-height: 1;
	color: var(--bp-akcent);
}

.ks-case__jednostka {
	font-size: 1.4rem;
	color: var(--bp-tekst-2);
}

.ks-case__tresc {
	display: flex;
	flex-direction: column;
	flex: 1;
	gap: 1.2rem;
	padding: 2.6rem 2.4rem 2.4rem;
}

.ks-case__kategoria {
	font-size: 1.3rem;
	font-weight: 500;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--bp-akcent);
}

.ks-case__tytul {
	font-family: var(--ks-pismo-nagl);
	font-weight: 700;
	line-height: 1.28;
	color: var(--bp-tekst);
}

/*
   Odnośnik obejmuje sam tytuł, ale jego pole kliknięcia rozciąga się
   na cały kafel. Zawinięcie całego kafla w odnośnik dałoby czytnikowi
   ekranu jedną nazwę złożoną ze zdjęcia, liczb i tytułu naraz.
*/
.ks-case__link::after {
	content: "";
	position: absolute;
	inset: 0;
}

.ks-case__link:hover,
.ks-case__link:focus-visible {
	color: var(--bp-akcent);
}

.ks-case__warunki {
	margin: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 1.6rem;
	margin-top: auto;
	padding-top: 1.6rem;
	border-top: 1px solid var(--bp-ramka-lekka);
}

.ks-case__warunek dt {
	font-size: 1.3rem;
	color: var(--ks-tekst-3);
}

.ks-case__warunek dd {
	margin: 0;
	font-size: 1.5rem;
	font-weight: 600;
	color: var(--bp-tekst);
}

.ks-case__wiecej {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	font-size: 1.5rem;
	font-weight: 600;
	color: var(--bp-akcent);
}

.ks-case__grot {
	transition: transform .25s ease;
}

.ks-case:hover .ks-case__grot {
	transform: translateX(4px);
}

.ks-wyniki__wiecej {
	margin-top: 3.6rem;
	text-align: center;
}

/* --- Podstrona pojedynczego case study --- */

.ks-podstrona {
	padding-top: 10.4rem;
}

.ks-h1-podstrony {
	max-width: 90rem;
	margin-top: 1.6rem;
	font-weight: 800;
	line-height: 1.08;
	letter-spacing: -0.015em;
}

.ks-case-naglowek__opis {
	max-width: 72rem;
	margin-top: 2rem;
	font-size: 1.8rem;
	line-height: 1.6;
	color: var(--bp-tekst-2);
}

.ks-case-strona__okruchy {
	display: flex;
	align-items: center;
	gap: 0.8rem;
	font-size: 1.5rem;
	color: var(--ks-tekst-3);
}

.ks-case-strona__okruchy a {
	color: var(--bp-akcent);
}

.ks-case-strona__lead {
	max-width: 76rem;
	margin-top: 2rem;
	font-size: 2rem;
	font-weight: 300;
	line-height: 1.55;
	color: var(--bp-tekst-2);
}

.ks-case-strona__warunki {
	margin: 3.6rem 0 0;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 1px;
	background: var(--bp-ramka-lekka);
	border: 1px solid var(--bp-ramka-lekka);
	border-radius: var(--ks-promien-kafel-s);
	overflow: hidden;
}

.ks-case-strona__warunek {
	padding: 1.8rem 2rem;
	background: var(--bp-biel);
}

.ks-case-strona__warunek dt {
	font-size: 1.3rem;
	color: var(--ks-tekst-3);
}

.ks-case-strona__warunek dd {
	margin: 0.4rem 0 0;
	font-size: 1.7rem;
	font-weight: 600;
	color: var(--bp-tekst);
}

.ks-case-strona__foto {
	position: relative;
	padding-block: 3.2rem;
}

.ks-case-strona__obraz {
	width: 100%;
	height: auto;
	max-height: 52rem;
	object-fit: cover;
	border-radius: var(--ks-promien-kafel);
}

.ks-case-strona__wynik {
	position: absolute;
	/* Zdjęcie idzie od krawędzi do krawędzi, a odznaka ma stać na prawej
	   krawędzi TREŚCI, nie ekranu (M9) - te same liczby co `.bp-tresc`,
	   plus 4rem wcięcia od brzegu zdjęcia. */
	right: calc(max((100% - var(--bp-tresc)) / 2, 0px) + max(var(--bp-oddech), 10px) + 4rem);
	bottom: 6rem;
	display: flex;
	flex-direction: column;
	gap: 0.2rem;
	padding: 1.8rem 2.4rem;
	border-radius: 1.6rem;
	background: color-mix(in srgb, var(--bp-biel) 95%, transparent);
	backdrop-filter: blur(8px);
	box-shadow: var(--ks-cien-kafelek);
}

.ks-case-strona__metryka {
	font-family: var(--ks-pismo-nagl);
	font-size: 3.6rem;
	font-weight: 800;
	line-height: 1;
	color: var(--bp-akcent);
}

.ks-case-strona__jednostka {
	font-size: 1.5rem;
	color: var(--bp-tekst-2);
}

.ks-case-strona__blok + .ks-case-strona__blok {
	margin-top: 4.8rem;
}

.ks-case-strona__blok .ks-akapit {
	margin-top: 1.8rem;
}

.ks-stronicowanie {
	margin-top: 4rem;
	font-size: 1.6rem;
}

/* ---------------------------------------------------------------------
   18h. PASEK LICZBY OPINII PRZY STRZAŁKACH
   --------------------------------------------------------------------- */

.ks-opinie__meta {
	display: inline-flex;
	align-items: center;
	gap: 1rem;
	min-height: 4.4rem;
	padding: 0 1.4rem;
	border: 1px solid var(--bp-ramka-lekka);
	border-radius: 99.9rem;
	font-size: 1.5rem;
	color: var(--bp-tekst);
	transition: border-color .2s ease;
	-webkit-tap-highlight-color: transparent;
}

.ks-opinie__meta:hover,
.ks-opinie__meta:focus-visible {
	border-color: var(--bp-akcent);
}

.ks-opinie__google {
	display: flex;
	align-items: center;
	color: var(--bp-akcent);
}

.ks-opinie__liczba {
	font-weight: 600;
}

.ks-opinie__kreska {
	width: 1px;
	height: 1.8rem;
	background: var(--bp-ramka);
}

.ks-opinie__strzalki {
	display: flex;
	align-items: center;
	gap: 0.4rem;
}

@keyframes ksPas {
	from { transform: translate3d(0, 0, 0); }
	to   { transform: translate3d(-50%, 0, 0); }
}

/* --- Tło sekcji startowej --- */

/* Poświata przesuwająca się w poprzek siatki. Wraca tą samą drogą,
   a nie przeskokiem do punktu wyjścia - przeskok widać. */
@keyframes ksSkan {
	0%   { transform: translateX(-40%); }
	50%  { transform: translateX(180%); }
	100% { transform: translateX(-40%); }
}

/* Linia wykresu dorysowuje się raz, przy wejściu na stronę. `forwards`
   zostawia ją narysowaną - bez tego wróciłaby do stanu początkowego,
   czyli zniknęła. */
@keyframes ksRysuj {
	to { stroke-dashoffset: 0; }
}

/* --- Wejścia sekcji startowej --- */

/*
   Wiersz nagłówka wyjeżdża zza dolnej krawędzi swojego pola. Wartość
   105%, a nie 100%: przy dokładnie 100% ogonki liter „ą" i „ę" wystają
   pod linię pisma i widać je nad zasłoną, zanim wiersz ruszy.
*/
@keyframes ksWjazdWiersza {
	from { transform: translateY(105%); }
	to   { transform: translateY(0); }
}

@keyframes ksWejscie {
	from { opacity: 0; transform: translateY(2.2rem); }
	to   { opacity: 1; transform: none; }
}

@keyframes ksKafelekWejscie {
	from { opacity: 0; transform: translateY(1.6rem) scale(.92); }
	to   { opacity: 1; transform: none; }
}

@keyframes ksPortretWejscie {
	from { opacity: 0; transform: translateY(4rem); }
	to   { opacity: 1; transform: none; }
}

@keyframes ksKreska {
	from { transform: scaleX(0); }
	to   { transform: scaleX(1); }
}

@keyframes ksPunktWejscie {
	from { opacity: 0; transform: scale(.4); }
	to   { opacity: 1; transform: none; }
}

/* Pierścień rozchodzący się od punktu pomiaru. Rysowany cieniem,
   nie osobnym elementem - nie dokłada węzłów do kodu strony. */
@keyframes ksPunktPuls {
	0%   { box-shadow: 0 0 0 0 color-mix(in srgb, var(--bp-akcent-ciemny) 45%, transparent); }
	70%  { box-shadow: 0 0 0 1.6rem color-mix(in srgb, var(--bp-akcent-ciemny) 0%, transparent); }
	100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--bp-akcent-ciemny) 0%, transparent); }
}

@keyframes ksAuroraA {
	0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
	50%      { transform: translate3d(-6%, 5%, 0) scale(1.12); }
}

@keyframes ksAuroraB {
	0%, 100% { transform: translate3d(0, 0, 0) scale(1.05); }
	50%      { transform: translate3d(7%, -6%, 0) scale(0.95); }
}

/* Połysk wraca tą samą drogą, a nie przeskokiem do punktu wyjścia -
   przeskok w tak wolnym ruchu widać jak szarpnięcie. */
@keyframes ksPolysk {
	0%   { transform: translateX(-60%) rotate(8deg); opacity: 0; }
	18%  { opacity: .5; }
	82%  { opacity: .5; }
	100% { transform: translateX(320%) rotate(8deg); opacity: 0; }
}

/* Napisy krążące wokół znaku agencji obracają się w drugą stronę
   z tą samą prędkością co orbita - dzięki temu jadą po okręgu,
   a czytają się poziomo. */
@keyframes ksOrbitaOdwrotna {
	from { transform: rotate(0deg); }
	to   { transform: rotate(-360deg); }
}

/* --- Ekipa --- */

@keyframes ksOrbita {
	from { transform: rotate(0deg); }
	to   { transform: rotate(360deg); }
}

/* Nagłówki wchodzą z NIEWIDOCZNOŚCI, nie z przygaszenia. Stan pośredni,
   w którym napis daje się przeczytać, ale jest szary, wygląda na usterkę
   i tak też bywa zgłaszany. */
.ks-anim [data-ks-reveal] {
	opacity: 0;
	transform: translateY(2.4rem);
	transition: opacity .55s ease, transform .7s cubic-bezier(.2, .8, .2, 1);
}

.ks-anim [data-ks-reveal].ks-widoczny {
	opacity: 1;
	transform: none;
}

/*
   WYŁĄCZENIE ANIMACJI NA ŻYCZENIE SYSTEMU.

   Dwie linie obrony: skrypt przerywa na wejściu, a ten blok ustawia
   elementy od razu w stanie końcowym - na wypadek, gdyby ustawienie
   zmieniło się już po wczytaniu strony.
*/
@media (prefers-reduced-motion: reduce) {

	.ks-anim [data-ks-reveal] {
		opacity: 1;
		transform: none;
		transition: none;
	}

	.ks-pas__tor,
	.ks-zaufali__tor,
	.ks-hero__tlo span,
	.ks-hero__tlo::after,
	.ks-hero__wykres,
	.ks-hero__punkt,
	.ks-zespol__orbita,
	.ks-zespol__punkt-wnetrze {
		animation: none;
	}

	/*
	   Wejścia sekcji startowej. Stan końcowy wpisany wprost: samo zdjęcie
	   animacji zostawiłoby wiersze nagłówka pod zasłoną, czyli pierwszy
	   ekran byłby pusty.
	*/
	.ks-anim .ks-hero__wiersz-tresc,
	.ks-anim .ks-hero__lead,
	.ks-anim .ks-hero__odznaki,
	.ks-anim .ks-hero__przyciski,
	.ks-anim .ks-kafelek,
	.ks-anim .ks-hero__zdjecie,
	.ks-anim .ks-hero__punkt {
		opacity: 1;
		transform: none;
		animation: none;
	}

	.ks-anim .ks-hero--sekwencja .ks-hero__tytul::after {
		transform: scaleX(1);
		animation: none;
	}

	/* Linia wykresu bez animacji ma być NARYSOWANA, a nie niewidoczna.
	   Samo zdjęcie animacji zostawiłoby ją w stanie początkowym, czyli
	   z przesunięciem kreski poza widok. */
	.ks-hero__wykres {
		stroke-dashoffset: 0;
	}

	.ks-slider__tor,
	.ks-akordeon__panel,
	.ks-krok,
	.ks-krok::after {
		transition: none;
	}
}

/* ---------------------------------------------------------------------
   20. TABLET (poniżej 1240 px)
   --------------------------------------------------------------------- */

@media (max-width: 77.49em) {


	.ks-liczby__siatka,
	.ks-proces__siatka {
		grid-template-columns: repeat(2, 1fr);
	}

	.ks-karta-oferty {
		grid-template-columns: 0.2fr 1fr;
		gap: 2.8rem;
		padding: 3.6rem;
	}

	.ks-karta-oferty .ks-korzysci {
		grid-column: 2;
	}

	.ks-wyniki__naglowek,
	.ks-certyfikaty__naglowek {
		grid-template-columns: 1fr;
		gap: 2rem;
	}

	.ks-opinia {
		flex: 0 0 calc(50% - 1.05rem);
	}

	/* Pięć kafli specjalizacji nie mieści się w rzędzie przy tej
	   szerokości - trzy i dwa czytają się lepiej niż pięć ściśniętych. */
	.ks-zespol__lista {
		grid-template-columns: repeat(3, 1fr);
	}

	.ks-case-lista__siatka {
		grid-template-columns: repeat(2, 1fr);
	}

	.ks-case-strona__warunki {
		grid-template-columns: repeat(2, 1fr);
	}

	.ks-panel-pomocy__siatka {
		grid-template-columns: 1fr;
		gap: 4rem;
	}

	/* Napis przed przyciskami ustępuje miejsca samym przyciskom -
	   „Jak mogę Ci pomóc?" powtarza to, co mówią one same. */
	.ks-pomoc__etykieta {
		display: none;
	}

	.ks-stopka__gora {
		grid-template-columns: 1fr 1fr;
		gap: 3.2rem;
	}

	/* Numer telefonu w pasku ustępuje miejsca pozycjom menu. Nie znika
	   z witryny - jest w sekcji kontaktu i w stopce. */
	.ks-naglowek__telefon {
		display: none;
	}
}

/* ---------------------------------------------------------------------
   21. WĄSKI EKRAN (poniżej 1024 px)

   Nawigacja schodzi do panelu, siatki dwukolumnowe do jednej kolumny.
   Wszystko dotykowe ma tu minimum 44 px - to nie jest zalecenie
   estetyczne, tylko warunek trafiania palcem.
   --------------------------------------------------------------------- */

@media (max-width: 63.99em) {

	.ks-hamburger {
		display: flex;
		order: 2;
	}

	/*
	   Panel nawigacji. Pozycja `fixed` względem okna, a nie wyspy -
	   wyspa ma `backdrop-filter`, a ten tworzy nowy układ odniesienia
	   dla elementów pozycjonowanych i panel przykleiłby się do niej
	   zamiast do ekranu.
	*/
	.ks-menu {
		position: fixed;
		inset: 0;
		z-index: 95;
		flex-direction: column;
		align-items: stretch;
		justify-content: center;
		gap: 0;
		padding: 10rem 2.4rem 4rem;
		background: var(--bp-biel);
		/* Panel zamknięty jest niedostępny także dla klawiatury -
		   `visibility` zabiera go z kolejności przechodzenia Tabem,
		   samo `opacity` nie. */
		visibility: hidden;
		opacity: 0;
		transition: opacity .2s ease, visibility .2s ease;
	}

	.ks-naglowek--menu-otwarte .ks-menu {
		visibility: visible;
		opacity: 1;
	}

	.ks-menu__link {
		display: flex;
		align-items: center;
		min-height: 4.4rem;
		padding: 1.2rem 0;
		border-bottom: 1px solid var(--bp-ramka-lekka);
		font-size: 2rem;
	}

	.ks-menu__cta {
		margin-top: 2.4rem;
	}

	/* W panelu pełnoekranowym numer wraca - tam jest na niego miejsce
	   i to najkrótsza droga do kontaktu z telefonu. */
	.ks-naglowek__telefon {
		display: inline-flex;
		justify-content: center;
		min-height: 4.4rem;
		margin-top: 1.6rem;
		font-size: 2rem;
	}

	/*
	   NA WĄSKIM EKRANIE SEKCJA STARTOWA NIE JEST PRZYPIĘTA DO WYSOKOŚCI OKNA.

	   W jednej kolumnie mieszczą się pod sobą: pasek, nagłówek, akapit,
	   dwa przyciski, portret i cztery kafelki. Zmuszone do wysokości ekranu
	   albo by się nie zmieściły, albo trzeba by je zmniejszyć poniżej progu
	   czytelności. Warunek „jeden ekran bez przewijania" dotyczy układu
	   dwukolumnowego, czyli komputera - i tam obowiązuje bez zmian.
	*/
	/* W jednej kolumnie sekcja rośnie od swojej zawartości. Zdjęcie
	   sztywnej wysokości trzeba tu zdjąć razem z obydwoma ograniczeniami,
	   bo inaczej treść nie ma jak się rozwinąć w dół. */
	.ks-hero {
		height: auto;
		min-height: 0;
		max-height: none;
		padding-top: 12rem;
		padding-bottom: 6.4rem;
	}

	/* Wysokość liczona z okna ma sens tylko przy układzie dwukolumnowym.
	   W jednej kolumnie portret dostaje wysokość od swojej zawartości,
	   a odsunięcie od prawej krawędzi nie ma czego odsuwać. */
	.ks-hero > .bp-tresc,
	.ks-hero__portret {
		height: auto;
	}

	.ks-hero__portret {
		width: 100%;
		margin-right: 0;
		transform: none;
	}

	.ks-hero__siatka,
	.ks-o-mnie__siatka,
	.ks-kontakt__siatka,
	.ks-zespol__panel {
		grid-template-columns: 1fr;
		gap: 4rem;
	}

	/*
	   PASEK POMOCY PRZENOSI SIĘ DO HAMBURGERA.

	   Cztery powody nie mieszczą się w jednym rzędzie na telefonie,
	   a zawinięte do dwóch zajmują tyle miejsca, co pierwszy ekran.
	   Same przyciski przenosi skrypt do panelu nawigacji - tutaj
	   zostaje tylko schowanie pustego już paska.
	*/
	.ks-pomoc {
		display: none;
	}

	.ks-podstrona {
		padding-top: 9rem;
	}

	.ks-panel-pomocy {
		display: block;
		min-height: 0;
		padding-block: 11rem 6.4rem;
	}

	/* Przyciski w panelu hamburgera układają się w kolumnę i wyglądają
	   jak pozycje menu, bo w tym miejscu nimi są. */
	.ks-menu .ks-pomoc__etykieta {
		display: block;
		width: 100%;
		margin-top: 2.4rem;
		padding-top: 2rem;
		border-top: 1px solid var(--bp-ramka-lekka);
	}

	.ks-menu .ks-pomoc__przyciski {
		flex-direction: column;
		align-items: stretch;
		width: 100%;
		gap: 0;
	}

	.ks-menu .ks-pomoc__btn {
		justify-content: flex-start;
		padding: 1.2rem 0;
		border-bottom: 1px solid var(--bp-ramka-lekka);
		font-size: 1.8rem;
	}

	.ks-hero__portret {
		max-width: 28rem;
		max-height: none;
		justify-self: start;
		aspect-ratio: 4 / 5;
	}

	/* Pływające kafelki nie mają się gdzie zmieścić obok mniejszego
	   zdjęcia - wchodzą pod nie, w siatkę. */
	.ks-kafelek {
		position: static;
		animation: none;
	}

	.ks-hero__kafelki-poza {
		display: contents;
	}

	.ks-hero__portret {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 1.2rem;
	}

	/* Zdjęcie zajmuje oba pola siatki, kafelki układają się pod nim
	   parami. Bez tego portret wszedłby w jedną kolumnę i skurczyłby się
	   do połowy szerokości. */
	.ks-hero__zdjecie {
		position: relative;
		grid-column: 1 / -1;
		max-height: 42rem;
	}

	.ks-o-mnie {
		padding-top: 7.2rem;
	}

	.ks-o-mnie__tekst {
		padding-bottom: 0;
	}

	.ks-o-mnie__portret {
		max-height: 46rem;
		justify-self: start;
	}

	.ks-zespol__prawo {
		border-left: 0;
		border-top: 1px solid var(--bp-ramka-lekka);
		min-height: 30rem;
	}

	.ks-zespol__lista {
		grid-template-columns: repeat(2, 1fr);
	}

	.ks-akordeon__przycisk {
		grid-template-columns: 1fr 4rem;
		gap: 1.2rem;
		row-gap: 0.8rem;
	}

	.ks-akordeon__znak {
		grid-row: 1 / span 3;
		grid-column: 2;
		align-self: center;
	}

	.ks-akordeon__kolumny {
		grid-template-columns: 1fr;
		gap: 2.4rem;
	}

	.ks-o-mnie__portret {
		max-width: 42rem;
	}
}

/* ---------------------------------------------------------------------
   22. TELEFON (poniżej 768 px)
   --------------------------------------------------------------------- */

@media (max-width: 47.99em) {

	.ks-sekcja,
	.ks-manifest,
	.ks-o-mnie,
	.ks-certyfikaty {
		padding-block: 6.4rem;
	}

	.ks-manifest__zdanie { font-size: 2.4rem; }

	.ks-opinie__naglowek,
	.ks-stopka__dol {
		flex-direction: column;
		align-items: flex-start;
		gap: 1.6rem;
	}

	.ks-liczby__siatka,
	.ks-proces__siatka,
	.ks-o-mnie__komorki,
	.ks-stopka__gora,
	.ks-pole-para,
	.ks-zespol__lista,
	.ks-case-lista__siatka,
	.ks-case-strona__warunki {
		grid-template-columns: 1fr;
	}


	.ks-panel-pomocy__prawo {
		padding: 2.8rem;
	}

	/* Odznaka z wynikiem na zdjęciu case study nachodziłaby na treść -
	   na wąskim ekranie schodzi pod zdjęcie, do zwykłego przepływu. */
	.ks-case-strona__wynik {
		position: static;
		align-items: flex-start;
		margin-top: 1.6rem;
	}

	.ks-karta-oferty {
		grid-template-columns: 1fr;
		padding: 2.8rem;
	}

	.ks-karta-oferty .ks-korzysci {
		grid-column: 1;
	}

	/* Kafelki wracają do jednej kolumny - w dwóch liczba i podpis
	   łamią się w środku wyrazu. */
	.ks-hero__portret {
		grid-template-columns: 1fr;
		max-width: 100%;
	}

	.ks-hero__zdjecie {
		max-height: 38rem;
		object-position: 50% 2%;
	}

	.ks-zespol__krag--3 {
		display: none;
	}

	.ks-zespol__lewo,
	.ks-zespol__prawo,
	.ks-kontakt__panel {
		padding: 2.8rem;
	}

	/*
	   Slider na telefonie przewija się palcem, a nie strzałkami.
	   `scroll-snap` zatrzymuje go na całej karcie, więc nie zostaje
	   w połowie dwóch.
	*/
	.ks-slider {
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
	}

	.ks-slider::-webkit-scrollbar {
		display: none;
	}

	.ks-slider__tor {
		transform: none !important;
	}

	.ks-opinia {
		flex: 0 0 85%;
		scroll-snap-align: start;
	}

	.ks-opinie__sterowanie .ks-strzalka {
		display: none;
	}

	.ks-pas__kafel {
		min-width: 22rem;
	}

	/*
	   CELE DOTYKOWE.

	   Odnośnik w wierszu danych kontaktowych albo w stopce ma wysokość
	   swojego wiersza pisma - około 22 px. Palcem trafia się w to na oślep.
	   Wymóg z projektu mówi 44 px i tyle też dostają: wysokość rośnie,
	   napis zostaje na miejscu.

	   Odnośniki wewnątrz zdania (na przykład „sprawdź opinie") zostawiamy
	   w spokoju - rozpychanie ich do 44 px rozerwałoby akapit, a stoją
	   w tekście, nie w spisie do klikania.
	*/
	.ks-stopka__link,
	.ks-opinie__link,
	.ks-formularz__telefon,
	.ks-naglowek__logo {
		display: inline-flex;
		align-items: center;
		min-height: 4.4rem;
	}

	.ks-stopka__pozycja + .ks-stopka__pozycja {
		margin-top: 0;
	}

	.ks-stopka__gora {
		gap: 3.2rem;
	}
}

/* Na telefonie wyspa naglowka staje sie zwyklym paskiem na cala szerokosc:
   znak zaczyna sie tam, gdzie tresc sekcji (specyfikacja 2, M9). */
@media (max-width: 40em) {
	.ks-naglowek__wyspa {
		max-width: none;
		padding-inline: max(var(--bp-oddech), 10px);
		border-inline: 0;
		border-radius: 0;
	}
}

/* ==========================================================================
   M13 (24.09.2026): menu naglowka i stopki z „Wyglad -> Menu".
   Lista menu naglowka nie tworzy wlasnego pudelka - odnosniki ukladaja sie
   w pasku i w panelu na telefonie tak jak wczesniej.
   ========================================================================== */
.ks-menu__lista,
.ks-menu__lista > li {
	display: contents;
}

.ks-menu__lista {
	margin: 0;
	padding: 0;
	list-style: none;
}

.ks-stopka__marka-logo {
	display: inline-block;
}


/* =====================================================================
   WSPÓLNY NAGŁÓWEK MOTYWU - STYL PŁYWAJĄCY (od 1.11.0)

   Nagłówek tej strony to wspólny nagłówek motywu nadrzędnego (klocki
   w „Dostosuj -> Nagłówek i stopka - układ", styl „Pływający"). Tutaj
   tylko to, co jest swoiste dla tej strony: wyspa LEŻY NA sekcji startowej
   (jak dawna wyspa - sekcje mają już odstęp od góry na nią), jest niższa
   i półprzezroczysta z rozmyciem.
   ===================================================================== */

.bp-naglowek {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 90;
	padding-top: 1.8rem;
	/* Pas nad wyspą przepuszcza kliknięcia do treści pod nim. */
	pointer-events: none;
}

.bp-naglowek > * { pointer-events: auto; }

.bp-naglowek--plywajacy .bp-naglowek__glowny {
	background: color-mix(in srgb, var(--bp-biel) 92%, transparent);
	backdrop-filter: blur(14px);
	box-shadow: 0 0 0 1px var(--bp-ramka-lekka), var(--ks-cien-naglowek);
}

.bp-naglowek .bp-naglowek__srodek { min-height: 6.4rem; }

/* Telefon w wierszu głównym mieści się dopiero od 85em - niżej logo,
   pięć pozycji menu, telefon, języki i przycisk nie wchodzą do wyspy
   i przycisk wychodził poza ekran. Numer jest w menu telefonu i w stopce. */
@media (min-width: 60em) and (max-width: 84.99em) {
	.bp-uklad--komputer .bp-klocek--telefon { display: none; }
}

/* Podstrony: pierwsza sekcja zaczyna się pod wyspą, a nie pod nią
   schowana (tytuł stał 2 px pod dolną krawędzią nagłówka). */
body:not(.home) main > :first-child {
	padding-top: max(7.2rem, calc(var(--bp-naglowek-wysokosc, 8.2rem) + 2.4rem));
}

/* M9 przy szerokim ekranie: odstępy w prawej grupie wiersza głównego
   2.4rem zamiast 3.2rem - przy widocznym telefonie grupa wychodziła
   5 px poza wyspę i przycisk nie trzymał krawędzi treści. */
.bp-naglowek__glowny .bp-uklad--komputer .bp-uklad__miejsce--prawo { gap: 2.4rem; }

/* M11: na wąskim telefonie orbita zespołu jest mniejsza - skrajne napisy
   („Strony internetowe") wychodziły poza sekcję i były ucinane. */
@media (max-width: 30em) {
	.ks-zespol__tarcza { transform: scale(.78); }
}


/* M21: nazwa firmy w kartach opinii - 4,49:1 na tle karty (prog 4,5). */
.ks-opinia__firma { color: var(--bp-tekst-2); }