/* ============================================================
   Parts4Cleaning — arkusz stylów serwisu.
   Własny kod serwisu (czysty CSS), bez zewnętrznych bibliotek.
   Zmiana wyglądu = zmiana w tym pliku.
   ============================================================ */

@import url("czcionki.css");
@import url("ikony.css");

/* --- zmienne ------------------------------------------------ */
:root {
  --kolor-tekst: #282828;
  --kolor-tekst-menu: #2a2a2a;
  --kolor-akcent: #1762fb;
  --kolor-granat: #033470;
  --kolor-pomaranczowy: #f85c1e;
  --kolor-bialy: #fff;
  --kolor-szary-tlo: #e9e9e9;
  --kolor-ciemny: #282828;
  --szer-kontenera: 1400px;
  --wys-naglowka: 128px;
  --czcionka: "Montserrat", sans-serif;
}

/* --- reset -------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

/* Zmienne układu treści dotyczą tylko elementu, przy którym stoją — nie przechodzą
   na elementy wewnątrz (np. odstęp wiersza nie może stać się odstępem jego kolumn). */
@property --odst { syntax: '*'; inherits: false; }
@property --mr { syntax: '*'; inherits: false; }
@property --ml { syntax: '*'; inherits: false; }
@property --odstep { syntax: '*'; inherits: false; }
@property --odstep-pion { syntax: '*'; inherits: false; }
@property --kier { syntax: '*'; inherits: false; }
@property --zawin { syntax: '*'; inherits: false; }
@property --wyr-kol { syntax: '*'; inherits: false; }
@property --wyr-poz { syntax: '*'; inherits: false; }
@property --szer-wiersza { syntax: '*'; inherits: false; }
@property --pad-l { syntax: '*'; inherits: false; }
@property --pad-r { syntax: '*'; inherits: false; }
@property --pad-g { syntax: '*'; inherits: false; }
@property --pad-d { syntax: '*'; inherits: false; }
@property --udzial { syntax: '*'; inherits: false; }
@property --szer-kol { syntax: '*'; inherits: false; }
@property --min-h { syntax: '*'; inherits: false; }
@property --kolejnosc { syntax: '*'; inherits: false; }
@property --wyr-pion { syntax: '*'; inherits: false; }
@property --k-tlo { syntax: '*'; inherits: false; }
@property --k-tlo-obraz { syntax: '*'; inherits: false; }
@property --k-tlo-poz { syntax: '*'; inherits: false; }
@property --k-tlo-rozm { syntax: '*'; inherits: false; }
@property --k-tlo-powt { syntax: '*'; inherits: false; }
@property --k-tlo-moc { syntax: '*'; inherits: false; }
@property --szer { syntax: '*'; inherits: false; }
@property --wys { syntax: '*'; inherits: false; }
@property --przes { syntax: '*'; inherits: false; }
@property --h { syntax: '*'; inherits: false; }
@property --tlo { syntax: '*'; inherits: false; }
@property --tlo-obraz { syntax: '*'; inherits: false; }
@property --tlo-poz { syntax: '*'; inherits: false; }
@property --tlo-rozm { syntax: '*'; inherits: false; }
@property --tlo-powt { syntax: '*'; inherits: false; }
@property --tlo-moc { syntax: '*'; inherits: false; }
@property --mar { syntax: '*'; inherits: false; }
@property --mar-d { syntax: '*'; inherits: false; }
@property --ramka-sz { syntax: '*'; inherits: false; }
@property --ramka-st { syntax: '*'; inherits: false; }
@property --ramka-kol { syntax: '*'; inherits: false; }
@property --cien-b { syntax: '*'; inherits: false; }
@property --promien-b { syntax: '*'; inherits: false; }
@property --wyr { syntax: '*'; inherits: false; }
@property --min-wys { syntax: '*'; inherits: false; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--czcionka);
  font-size: 18px;
  line-height: 1.5;
  color: var(--kolor-tekst);
  background: var(--kolor-bialy);
  overflow-x: hidden;
}
img { max-width: 100%; height: auto; display: block; border: 0; }
a { color: inherit; text-decoration: none; }
a:hover { text-decoration: none; }
/* odnośniki w tekście z kolorem zmierzonym na wzorcu (np. różowe #c36) i kolorem po najechaniu */
a[style*="--kolor-linku"] { color: var(--kolor-linku, inherit); }
a[style*="--kolor-linku"]:hover { color: var(--kolor-linku-h, var(--kolor-linku, inherit)); }
ul { margin: 0; padding: 0; list-style: none; }
p { margin: 0 0 1em; }
h1, h2, h3, h4 { margin: 0; font-weight: 400; }
.tylko-czytnik { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
iframe { border: 0; display: block; }

/* --- układ -------------------------------------------------- */
.kontener {
  width: 100%;
  max-width: var(--szer-kontenera);
  margin: 0 auto;
}

/* --- przełącznik języka ------------------------------------- */
/* Pływa w prawym górnym rogu okna — tak jak na stronie wzorcowej. */
.jezyki {
  position: fixed;
  top: 15px;
  right: 15px;
  z-index: 999999;           /* jak na wzorcu: nad oknem podglądu certyfikatów (zasłania jego przyciski),
                                nad przyciemnieniem podglądu zdjęć w aktualnościach, pod jego paskiem */
  /* pismo i linia jak w dotychczasowym przełączniku: flagi wyśrodkowane w linii 24 px
     pisma systemowego 16 px (0,77 px poniżej górnej krawędzi) */
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  font-size: 16px;
  line-height: 24px;
}
.jezyki__link { display: inline; }
.jezyki__link img { display: inline; width: 32px; height: 24px; margin: 0 2px 0 6px; vertical-align: middle; opacity: .8; }
.jezyki__link:first-child img { margin-left: 0; }
.jezyki__link img:hover { opacity: 1; }

/* --- nagłówek ----------------------------------------------- */
/* nagłówek przyklejony u góry okna od pierwszego piksela przewinięcia — tak jak na stronie wzorcowej:
   na telefonie, tablecie i komputerze od 1367 px; na laptopie (1025–1366 px) wzorzec go nie przykleja —
   przewija się razem ze stroną */
.naglowek {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--kolor-bialy);
  box-shadow: rgba(203, 203, 203, 0.5) 0 0 20px 0;
}
.naglowek__pas {
  width: 100%;
  height: var(--wys-naglowka);
  padding: 0 20px;
}
.naglowek__wnetrze {
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  width: 100%;
  max-width: var(--szer-kontenera);
  height: 100%;
  margin: 0 auto;
  padding-top: 10px;
}
.naglowek__kolumna-logo {
  display: flex;
  align-items: flex-start;
  padding: 10px;
}
.naglowek__logo { display: block; margin-top: 18.33px; }

/* --- menu --------------------------------------------------- */
/* Menu trzyma się prawej krawędzi wnętrza; pozycje mają po 18px
   odstępu z każdej strony (pierwsza i ostatnia bez odstępu skrajnego). */
.menu {
  display: flex;
  flex: 1 1 auto;
  align-items: flex-start;
  justify-content: flex-end;
  padding: 10px;
}
.menu__lista { display: flex; align-items: stretch; }
.menu__pozycja { position: relative; margin: 0 18px; }
.menu__pozycja:first-child { margin-left: 0; }
.menu__pozycja:last-child { margin-right: 0; }
.menu__pozycja > a {
  position: relative;
  display: flex;
  align-items: center;
  font-size: 18px;
  font-weight: 500;
  line-height: 1;
  color: var(--kolor-tekst-menu);
  padding: 40px 0;
  transition: .7s;
}
.menu__pozycja > a:hover,
.menu__pozycja--aktywna > a { color: var(--kolor-akcent); }
/* niebieska kreska pod pozycją: stale przy bieżącej stronie, po najechaniu
   pojawia się przez przenikanie (0,7 s) — jak na stronie wzorcowej */
.menu__pozycja { position: relative; }
.menu__pozycja > a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 33px;
  width: 100%;
  height: 2px;
  background: var(--kolor-akcent);
  opacity: 0;
  transition: .7s;
}
.menu__pozycja > a:hover::after,
.menu__pozycja--aktywna > a::after { opacity: 1; }
/* znacznik pozycji z podmenu: znak 16 px w bloku (kolor po odnośniku, także po najechaniu) */
.menu__znacznik {
  display: block;
  margin: -1px 0 0 7px;
  font-size: 16px;
  line-height: 16px;
}

.menu__strzalka {
  display: none;
}
/* komputer (od 1025 px) — jak na stronie wzorcowej: kolumna logo ma 15% wnętrza (logo 170 px, ale nie
   szersze niż kolumna, więc poniżej ok. 1307 px maleje razem z oknem) i jest wyśrodkowana w pionie; menu
   zajmuje resztę za 10 px odstępu. Gdy pozycje menu nie mieszczą się w jednym wierszu (ok. 1025–1072 px),
   ostatnie przechodzą w całości do drugiego wiersza przy prawej krawędzi, a nagłówek rośnie o ten wiersz;
   panel „Nasza oferta” zostaje wtedy pod pierwszym wierszem menu. */
/* (stary szablon ma własny układ nagłówka — :where() zostawia regułom niską wagę, żeby wariant
   z dwoma logo mógł je nadpisać) */
@media (min-width: 1025px) and (max-width: 1366px) {
  .naglowek:not(.naglowek--stary) { position: relative; }
}
@media (min-width: 1025px) {
  :where(.naglowek:not(.naglowek--stary)) .naglowek__pas { height: auto; }
  :where(.naglowek:not(.naglowek--stary)) .naglowek__wnetrze { column-gap: 10px; }
  :where(.naglowek:not(.naglowek--stary)) .naglowek__kolumna-logo { flex: 0 0 15%; flex-direction: column; justify-content: center; align-items: flex-start; }
  :where(.naglowek:not(.naglowek--stary)) .naglowek__logo { margin-top: 0; padding: 10px 0 0; }   /* 10 px nad wierszem z logo */
  :where(.naglowek:not(.naglowek--stary)) .menu { flex: 1 1 0; min-width: 0; }
  :where(.naglowek:not(.naglowek--stary)) .menu__lista { flex-wrap: wrap; justify-content: flex-end; }
  /* panel „Nasza oferta” zaczyna się tuż pod pozycją menu (w jej naturalnym miejscu, top: auto) — jak na wzorcu
     także wtedy, gdy menu ma dwa wiersze albo stoi na środku wyższego nagłówka (strony z dwoma logo) */
  .naglowek:not(.naglowek--stary) .mega { top: auto; }
}
.menu__pozycja--mega { position: static; }
/* panel „Nasza oferta”: pełna szerokość pod nagłówkiem, pojawia się łagodnie (0,2 s);
   przezroczysty pasek 10 px u góry łączy go z pozycją menu, żeby nie znikał przy zjeździe myszą */
.mega {
  position: absolute;
  top: calc(100% - 10px);
  left: 0;
  right: 0;
  z-index: 10;
  padding-top: 10px;
  box-shadow: rgba(0, 0, 0, .5) 0 21px 10px -20px;   /* cień pod panelem, jak na wzorcu */
  opacity: 0;
  visibility: hidden;
  transition: .2s ease-in;
}
.menu__pozycja--mega:hover .mega,
.menu__pozycja--mega:focus-within .mega { opacity: 1; visibility: visible; }
.mega__tlo { padding: 0 20px; background: var(--kolor-akcent); }
.mega__wnetrze {
  display: flex;
  align-items: flex-start;   /* kolumny mają własną wysokość (jak na wzorcu) — linia podziału nie sięga niżej niż treść */
  column-gap: 4px;
  max-width: var(--szer-kontenera);
  margin: 0 auto;
  padding: 50px 0 40px;
}
.mega__kolumna { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; }
/* kolumny jak na wzorcu: każda chce całej szerokości (100%) i się kurczy — przeglądarka dzieli wiersz
   proporcjonalnie do wnętrza kolumn (bez wcięć i ramek), co do 1/64 px tak samo przy każdej szerokości */
.mega__kolumna--1 { flex: 0 1 100%; border-right: 2px solid var(--kolor-bialy); }
.mega__kolumna--2 { flex: 0 1 100%; padding-left: 20px; border-right: 2px solid var(--kolor-bialy); }
.mega__kolumna--3 { flex: 0 1 100%; padding-left: 20px; }
.mega__kolumna--1:only-child { border-right: 0; }   /* jedna kolumna (czystość techniczna) — bez kreski podziału przy prawej krawędzi */
.mega__tytul { margin: 0; font-size: 20px; font-weight: 500; line-height: 20px; color: var(--kolor-bialy); }
.mega__kreska { width: 50%; padding: 15px 0; }
.mega__kreska::before { content: ""; display: block; border-top: 2px solid var(--kolor-bialy); }
.mega__lista { margin: 20px 0 0; }
.mega__lista li {
  display: flex;
  align-items: center;
  margin-top: 3.5px;
  padding-bottom: 3.5px;
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  color: var(--kolor-bialy);
}
.mega__lista li:first-child { margin-top: 0; }
.mega__lista li:last-child { padding-bottom: 0; }
.mega__wzory { position: absolute; }
.mega__ikona {
  flex: 0 0 auto;
  width: 14px;
  height: 14px;
  margin-right: 13.5px;       /* ikona 17,5 px + 5 px + 5 px odstępu tekstu */
  fill: var(--kolor-bialy);
}
.mega .mega__przycisk {
  --szer: 230px;
  --pad: 12px;
  --tlo: #f85c1e;
  --ramka: #f85c1e;
  --tlo-hover: #fff;
  --kolor-hover: #f85c1e;
  --ramka-hover: #fff;
  flex-shrink: 0;
  max-width: none;
  margin-top: 20px;
  white-space: nowrap;           /* w wąskiej kolumnie przycisk wystaje, a nie łamie tekstu — jak na wzorcu */
}
.menu__przelacznik { display: none; }

/* --- treść: sekcje ------------------------------------------ */
/* Wzorzec układu: sekcja trzyma boczny odstęp 20px (pasy na całą szerokość — 0),
   wnętrze ma stałą szerokość 1400px i jest wyśrodkowane. */
.sekcja {
  margin-top: var(--mar, 0);
  margin-bottom: var(--mar-d, 0);
  padding: var(--pad-gora, 0) var(--pad-prawo, 20px) var(--pad-dol, 0) var(--pad-lewo, 20px);
  background-color: var(--tlo, transparent);
  background-image: var(--tlo-obraz, none);
  background-size: var(--tlo-rozm, cover);
  background-position: var(--tlo-poz, center);
  background-repeat: var(--tlo-powt, no-repeat);
  background-attachment: var(--tlo-moc, scroll);
}
/* sekcja z przyciemnieniem albo pokazem zdjęć w tle: warstwy pod treścią */
.sekcja--tlo { position: relative; }
.sekcja--tlo::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background-color: var(--nakladka, transparent);
  /* obrazek nakładki (np. blady napis w tle sekcji) — jak na stronie wzorcowej */
  background-image: var(--nakladka-obraz, none);
  background-position: var(--nakladka-poz, center);
  background-size: var(--nakladka-rozm, auto);
  background-repeat: var(--nakladka-powt, no-repeat);
  background-attachment: var(--nakladka-moc, scroll);
  opacity: var(--nakladka-op, 1);
  pointer-events: none;
}
.sekcja--tlo > .sekcja__wnetrze { position: relative; z-index: 2; }
/* pokaz zdjęć w tle: zdjęcia przenikają się co kilka sekund (skrypt strony) */
.tlo-pokaz { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
.tlo-pokaz__slajd {
  position: absolute;
  inset: 0;
  background: var(--tlo-obraz, none) center / cover no-repeat;
  opacity: 0;
  transition: opacity var(--przejscie, 500ms) ease, transform 10s linear;
}
.tlo-pokaz__slajd--aktywny { opacity: 1; }
.tlo-pokaz--kb-out .tlo-pokaz__slajd { transform: scale(1.3); }
.tlo-pokaz--kb-in .tlo-pokaz__slajd--aktywny,
.tlo-pokaz--kb-out .tlo-pokaz__slajd--aktywny { transition-duration: var(--przejscie, 500ms), 20s; }
.tlo-pokaz--kb-in .tlo-pokaz__slajd--aktywny { transform: scale(1.3); }
.tlo-pokaz--kb-out .tlo-pokaz__slajd--aktywny { transform: scale(1); }
.sekcja__wnetrze {
  width: 100%;
  max-width: var(--szer-wnetrza, var(--szer-kontenera));
  margin: 0 auto;
}

.naglowek-sekcji {
  font-size: 40px;
  font-weight: 700;
  line-height: 48px;
  color: var(--kolor-tekst);
  text-align: left;
}

/* --- siatki ------------------------------------------------- */
.kolumny { display: flex; flex-wrap: wrap; }
.kolumny--3 > * { width: 33.333%; padding: 0 10px; }
.kolumny--2 > * { width: 50%; padding: 0 10px; }

/* --- teksty ------------------------------------------------- */
.akapit { margin: 0 0 14.4px; font-family: var(--kroj, inherit); font-size: var(--rozmiar, 18px); font-weight: var(--waga, 400); line-height: var(--linia, 27px); text-align: var(--wyr, left); color: var(--kolor, var(--kolor-tekst)); }
.akapit strong { font-weight: 700; }

/* --- liczniki ----------------------------------------------- */
.licznik__liczba span { display: block; height: 70px; }
.licznik__liczba {
  margin: 0;
  font-size: 70px;
  font-weight: 600;
  line-height: 70px;
  color: var(--kolor-akcent);
}
.licznik__opis {
  margin: 0;
  font-size: 20px;
  font-weight: 500;
  line-height: 31px;
  color: var(--kolor-tekst);
}

/* --- stopka: część górna ------------------------------------ */
/* Mapa na całą szerokość kontenera, a na niej — po prawej —
   karta kontaktu i formularz. */
.stopka { position: relative; }
.stopka__gora { position: relative; }
.stopka__mapa { padding: 0 20px; margin-top: 50px; }
.stopka__mapa-wnetrze { max-width: var(--szer-kontenera); height: 900px; margin: 0 auto; }
.stopka__mapa iframe { width: 100%; height: 900px; }
.stopka__nakladka { padding: 0 20px; margin-top: -900px; }
.stopka__panel {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  max-width: var(--szer-kontenera);
  margin: 0 auto;
}
/* na wzorcu karta to reszta wiersza obok kolumny 65% (jej szerokość przeglądarka zaokrągla w dół do 1/64 px)
   minus 50 px odstępu (0,0004 px chroni przed błędem zaokrąglenia, np. 65% z 1400 = 909,99999…; jest mniejsze od
   najmniejszej możliwej odległości 65% szerokości od siatki 1/64 px, czyli 1/1280 px);
   przeglądarki bez funkcji round() biorą 35% − 50 px (różnica najwyżej 1/64 px) */
.stopka__panel > * { width: calc(35% - 50px); width: calc(100% - round(down, 65% + 0.0004px, 0.015625px) - 50px); margin-right: 50px; }

.karta-kontakt {
  margin-top: 30px;
  padding: 20px 0 20px 50px;
  background: var(--kolor-bialy);
}
.karta-kontakt__wiersz {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  min-height: 32px;
  margin: 0 0 15px;
  font-size: 18px;
  font-weight: 500;
  line-height: 27px;
  color: var(--kolor-tekst);
}
.karta-kontakt__wiersz:last-child { margin-bottom: 0; }
/* po najechaniu tekst i (osobno) ikona robią się pomarańczowe w 0,3 s — jak na stronie wzorcowej */
.karta-kontakt__wiersz a { color: inherit; transition: color .3s; }
.karta-kontakt__wiersz a:hover { color: var(--kolor-pomaranczowy); }

/* ikona w polu 32 px (u góry pola), pole wyśrodkowane w pionie względem wiersza — przy
   dwóch liniach tekstu ikona stoi 11 px niżej niż tekst, jak na stronie wzorcowej */
.ikona {
  flex: 0 0 auto;
  align-self: center;
  width: 25px;
  height: 25px;
  margin: 0 20px 7px 0;
  background: var(--kolor-akcent);
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: center; mask-position: center;
  -webkit-mask-size: contain; mask-size: contain;
}
.karta-kontakt__wiersz a .ikona { transition: background-color .3s; }
.karta-kontakt__wiersz a .ikona:hover { background: var(--kolor-pomaranczowy); }
.ikona--dojazd { -webkit-mask-image: url("ikony/samolot.svg"); mask-image: url("ikony/samolot.svg"); }
.ikona--mail { -webkit-mask-image: url("ikony/koperta.svg"); mask-image: url("ikony/koperta.svg"); }
.ikona--telefon { -webkit-mask-image: url("ikony/telefon.svg"); mask-image: url("ikony/telefon.svg"); }
/* karta kontaktu: ikona i tekst mogą się zwęzić (jak na wzorcu: pole ikony i pole tekstu kurczą się
   proporcjonalnie, tekst i ikona wystają wtedy poza swoje pola, np. przy 1100 px pole koperty ma 22 px).
   Ikonę rysuje wstawka 25 × 25 px, więc zwężone pole jej nie przycina. */
.karta-kontakt__wiersz > .ikona { position: relative; min-width: 0; flex: 0 1 auto; background: none; -webkit-mask-image: none; mask-image: none; }
.karta-kontakt__wiersz > .ikona::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 25px;
  height: 25px;
  background: var(--kolor-akcent);
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: center; mask-position: center;
  -webkit-mask-size: contain; mask-size: contain;
  transition: background-color .3s;
}
.karta-kontakt__wiersz > .ikona--dojazd::before { -webkit-mask-image: url("ikony/samolot.svg"); mask-image: url("ikony/samolot.svg"); }
.karta-kontakt__wiersz > .ikona--mail::before { -webkit-mask-image: url("ikony/koperta.svg"); mask-image: url("ikony/koperta.svg"); }
.karta-kontakt__wiersz > .ikona--telefon::before { -webkit-mask-image: url("ikony/telefon.svg"); mask-image: url("ikony/telefon.svg"); }
.karta-kontakt__wiersz > .ikona:hover::before { background: var(--kolor-pomaranczowy); }
.karta-kontakt__wiersz > a { flex: 0 1 auto; min-width: 0; }
/* od 768 px wiersz się nie zawija (na telefonie długi tekst schodzi pod ikonę) */
@media (min-width: 768px) {
  .karta-kontakt__wiersz { flex-wrap: nowrap; }
}

/* --- formularz kontaktowy ----------------------------------- */
.formularz-box {
  margin-bottom: 30px;
  padding: 20px 0 10px;
  background: var(--kolor-akcent);
  color: var(--kolor-bialy);
}
.formularz-box__tytul {
  margin: 0 0 20px;
  padding: 0 55px;
  font-size: 20px;
  font-weight: 400;
  line-height: 20px;
  color: var(--kolor-bialy);
}
.formularz { padding: 0 55px; }
.formularz__pole { padding-top: 16px; margin: 0 0 17px; }
.formularz__pole--wiadomosc { margin-bottom: 4px; }
.formularz__pole label { display: block; }
.formularz__etykieta { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.formularz input[type="text"],
.formularz input[type="email"],
.formularz textarea {
  width: 100%;
  height: 45px;
  padding: 6px 12px 6px 30px;
  font-family: var(--czcionka);
  font-size: 16px;
  line-height: 24px;
  color: var(--kolor-akcent);
  background: var(--kolor-bialy);
  border: 1px solid var(--kolor-bialy);
  border-radius: 0;
  transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
}
.formularz input[type="text"]:hover,
.formularz input[type="email"]:hover,
.formularz textarea:hover,
.formularz input[type="text"]:focus,
.formularz input[type="email"]:focus,
.formularz textarea:focus { border-color: var(--kolor-akcent); }
.formularz textarea { height: 150px; padding: 15px 12px 6px 30px; resize: none; }
.formularz ::placeholder { color: var(--kolor-akcent); opacity: 1; }
/* komunikat pod polem z błędem — 10 px pod polem, jak na stronie wzorcowej */
.formularz__blad-pola {
  display: block;
  margin: 10px 0 -10px;
  font-size: 13px;
  font-weight: 400;
  line-height: 13px;
  color: #777;
}


.formularz__zgoda { margin: 0; }
.formularz__zgoda-pole { display: block; }
.formularz__zgoda-pole input { width: 13px; height: 13px; margin: 0 0 0 16px; position: relative; top: -1px; }   /* pole 1 px wyżej, jak dawne pole zgody */
.formularz__zgoda-tresc { display: block; font-size: 12px; line-height: 8px; color: var(--kolor-bialy); }
.formularz__zgoda-wstep { display: block; margin-top: 8px; }
/* linie odnośnika co 24 px — tak układa je strona wzorcowa (tekst 12 px w wierszu 16/24 px) */
.formularz__rodo-przycisk {
  /* tekst 0,7 px niżej niż wynika z linii przycisku — tak stoi na stronie wzorcowej
     (tam to napis w linii 8 px); przesunięcie bez wpływu na układ poniżej */
  position: relative;
  top: 0.703125px;            /* 45/64 px — co do jednostki układu jak na wzorcu */
  display: inline-block;
  margin-top: 0.31px;
  padding: 0;
  font-size: 12px;
  line-height: 24px;
  color: var(--kolor-bialy);
  text-align: left;
  text-decoration: underline;
}
.formularz__rodo {
  margin-top: 10px;
  padding: 10px;
  border: 1px solid #ccc;
  font-size: 10px;
  line-height: 12px;
}
.formularz__rodo[hidden] { display: none; }
.formularz__rodo p { margin: 0; }
.formularz__rodo a { color: #000; }

.formularz__pulapka { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.formularz__wyslij-wiersz { margin: 23.703125px 0 0; }   /* przycisk dokładnie tam, gdzie na wzorcu (co do 1/64 px) */
.formularz__wyslij {
  width: 100%;
  height: 65px;
  padding: 10px 20px;
  /* napis w jednej linii, a gdy się nie mieści — przycięty (jak w dotychczasowym polu „submit”) */
  white-space: nowrap;
  overflow: hidden;
  font-family: var(--czcionka);
  font-size: 16px;
  line-height: 50px;
  color: var(--kolor-bialy);
  background: var(--kolor-granat);
  border: 0;
  border-radius: 0;
}
/* przycisk jest zablokowany do chwili zaznaczenia zgody, ale wygląda tak samo
   (jak na stronie wzorcowej); po najechaniu biały z niebieskim napisem */
.formularz__wyslij { cursor: pointer; transition: all .4s; }
.formularz__wyslij:hover { color: var(--kolor-akcent); background: var(--kolor-bialy); }
/* miejsce na kółko „wysyłam…” pod przyciskiem; ujemny margines jak na wzorcu,
   dzięki czemu ramka odpowiedzi staje 17 px pod formularzem */
.formularz__kolko-wiersz { position: relative; height: 55px; margin: 10px 0 -15px; }
.formularz__kolko {
  visibility: hidden;
  position: absolute;
  top: 0;
  left: 24px;
  width: 24px;
  height: 24px;
  border-radius: 100%;
  background: #23282d;
  opacity: .75;
}
.formularz[data-status="submitting"] .formularz__kolko { visibility: visible; }
.formularz__kolko::before {
  content: "";
  position: absolute;
  top: 4px;
  left: 4px;
  width: 6px;
  height: 6px;
  border-radius: 100%;
  background: #fbfbfc;
  transform-origin: 8px 8px;
  animation: formularz-obrot 1000ms linear infinite;
}
@keyframes formularz-obrot { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
@keyframes formularz-mruganie { from { opacity: 0; } 50% { opacity: 1; } to { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  .formularz__kolko::before { animation-name: formularz-mruganie; animation-duration: 2000ms; }
}
/* odpowiedź po wysłaniu: ramka w kolorze wyniku */
.formularz__odpowiedz {
  display: none;
  margin: 32px 8px 16px;
  padding: 3.2px 16px;
  border: 2px solid #00a0d2;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  color: #333;
}
.formularz:not([data-status="init"]):not([data-status="resetting"]):not([data-status="submitting"]) .formularz__odpowiedz { display: block; }
.formularz[data-status="sent"] .formularz__odpowiedz { border-color: #46b450; }
.formularz[data-status="failed"] .formularz__odpowiedz,
.formularz[data-status="aborted"] .formularz__odpowiedz { border-color: #dc3232; }
.formularz[data-status="spam"] .formularz__odpowiedz { border-color: #f56e28; }
.formularz[data-status="invalid"] .formularz__odpowiedz,
.formularz[data-status="unaccepted"] .formularz__odpowiedz { border-color: #ffb900; }
/* komunikat dla czytników ekranu (niewidoczny) */
.formularz__czytnik { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* --- stopka: część dolna ------------------------------------ */
.stopka__dol {
  position: relative;
  min-height: 360px;
  margin-top: -20px;
  padding: 0 20px;
  background: var(--kolor-ciemny);
  color: var(--kolor-bialy);
}
/* numer wersji serwisu — mały, prawie niewidoczny, w prawym dolnym rogu stopki (polecenie z WWW-0002) */
.stopka__wersja { position: absolute; right: 20px; bottom: 6px; font-size: 10px; font-weight: 400; line-height: 12px; color: rgba(255, 255, 255, .15); pointer-events: none; }
.stopka__dol-wnetrze {
  max-width: var(--szer-kontenera);
  margin: 0 auto;
  padding: 50px 0 25px;
}
.stopka__kolumny { display: flex; gap: 20px; }
.stopka__kolumna--firma { flex: 3 1 0; min-width: 0; display: flex; flex-direction: column; flex-wrap: wrap; }
.stopka__kolumna--adres { flex: 2 1 0; min-width: 0; }
.stopka__kolumna--menu { flex: 3 1 0; min-width: 0; display: flex; }
/* logo w stopce: 75% szerokości kolumny (tablet 85%, telefon 70%) — jak we wzorcu, także w budowie: obrazek
   w wierszu (inline-block, do środka), w polu będącym elementem kolumny flex. Przeglądarka liczy wtedy wysokość
   pola z szerokości kolumny najwyżej równej szerokości pliku (381 px) — kolumna zawija (flex-wrap), więc
   szerokość pola nie jest jeszcze znana; na szerszym telefonie logo wystaje z pola i odstęp do danych firmy
   maleje — dokładnie jak na stronie wzorcowej. */
.stopka__logo-pole { min-width: 0; font-size: 16px; line-height: 24px; }
.stopka__logo { display: inline-block; vertical-align: middle; width: 75%; max-width: 100%; height: auto; }
.stopka__dane { margin-top: 45px; }
.stopka__dane li { margin-top: 4px; padding-bottom: 4px; font-size: 16px; font-weight: 500; line-height: 24px; }
.stopka__dane li > span, .stopka__dane a > span:last-child { display: block; line-height: 24px; }
.stopka__dane--ikony a > span:last-child { padding-left: 5px; }
.stopka__dane li:first-child { margin-top: 0; }
.stopka__dane li:last-child { padding-bottom: 0; }
.stopka__dane a { display: flex; align-items: flex-start; color: inherit; }
/* odnośnik z ikoną: po najechaniu tekst i ikona pomarańczowe (0,3 s) */
.stopka__dane a, .stopka__dane a .ikona-mala { transition: color .3s, background-color .3s; }
.stopka__dane a:hover { color: var(--kolor-pomaranczowy); }
.stopka__dane a:hover .ikona-mala { background: var(--kolor-pomaranczowy); }
.stopka__naglowek { margin: 0; font-size: 18px; font-weight: 700; line-height: 18px; }
.stopka__dane--ikony { margin-top: 45px; }

.ikona-mala {
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  margin: 2px 13px 0 0;
  background: var(--kolor-bialy);
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: center; mask-position: center;
  -webkit-mask-size: contain; mask-size: contain;
}
.ikona-mala--dojazd { -webkit-mask-image: url("ikony/samolot.svg"); mask-image: url("ikony/samolot.svg"); }
.ikona-mala--telefon { -webkit-mask-image: url("ikony/telefon.svg"); mask-image: url("ikony/telefon.svg"); }
.ikona-mala--mail { -webkit-mask-image: url("ikony/koperta.svg"); mask-image: url("ikony/koperta.svg"); }
/* dane z ikonami w stopce: ikona na środku wysokości tekstu, także gdy adres łamie się na dwa wiersze
   (tablet) — jak na stronie wzorcowej */
.stopka__dane--ikony a { align-items: center; }
.stopka__dane--ikony .ikona-mala { margin-top: 0; }

.stopka__menu { flex: 0 0 119px; }
.stopka__menu li { margin-top: 4px; padding-bottom: 4px; font-size: 16px; font-weight: 500; line-height: 24px; }
.stopka__menu a > span { display: block; line-height: 24px; }
.stopka__menu li:first-child { margin-top: 0; }
.stopka__menu li:last-child { padding-bottom: 0; }
.stopka__menu a { transition: color .3s; }
.stopka__menu a:hover { color: var(--kolor-pomaranczowy); }

/* ikony w kółkach 30 px: po 5 px odstępu i 4 px między pozycjami (co 44 px), jak na wzorcu */
.stopka__spolecznosci { margin-left: auto; font-size: 0; }
.stopka__spolecznosci li { display: inline-block; margin: 5px; }
.stopka__spolecznosci li + li { margin-left: 9px; }
/* odnośnik: linia 28 px pisma systemowego 16 px; znak 26 px w polu na środku tej linii — jak na wzorcu */
.stopka__spolecznosci a {
  display: block;
  width: 30px;
  height: 30px;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  font-size: 16px;
  line-height: 28px;
  text-align: center;
}
.ikona-spol { display: inline-block; font-size: 26px; line-height: 28px; vertical-align: middle; font-style: normal; color: var(--kolor-bialy); }
/* po najechaniu ikony zostają białe — jak na stronie wzorcowej (tam kolor ikony wygrywa z kolorem odnośnika) */

/* pasek na dole stopki: prawa autorskie z lewej; z prawej (na telefonie pod spodem) stoi
   puste miejsce po usuniętym podpisie wykonawcy — układ zostaje taki jak dotąd */
.stopka__pasek { display: flex; justify-content: space-between; align-items: flex-start; margin-top: 20px; padding: 15px 0 0; }
.stopka__pasek::after { content: ""; flex: 0 1 123px; width: 123px; height: 35.4px; }
.stopka__prawa { flex: 0 1 auto; margin: 0 0 14.4px; font-size: 14px; line-height: 21px; }
.stopka__prawa a { text-decoration: none; }

/* --- komunikat o ciasteczkach ------------------------------- */
/* Okno zgody na ciasteczka używa systemowego kroju pisma — tak jak na
   stronie wzorcowej, gdzie rysuje je osobne narzędzie. */
.ciasteczka {
  position: fixed;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  left: 40px;
  bottom: 40px;
  z-index: 9999999;          /* warstwy okna zgody jak na wzorcu: nad podglądami zdjęć i nad flagami języka */
  width: 440px;
  max-width: calc(100vw - 80px);
  padding: 20px 26px;
  background: var(--kolor-bialy);
  border: 1px solid #f4f4f4;
  border-radius: 6px;
  box-shadow: rgba(172, 171, 171, .3) 0 -1px 10px 0;
}
.ciasteczka[hidden] { display: none; }
/* krzyżyk: ten sam rysunek 9 × 9 co na wzorcu, 5 px od góry i 9 px od prawej krawędzi okna
   (liczone od zewnątrz ramki 1 px, jak na wzorcu) */
.ciasteczka__zamknij {
  position: absolute;
  top: 4px;
  right: 8px;
  width: 9px;
  height: 9px;
  padding: 0;
  background: none;
  border-radius: 3px;
  line-height: 0;
}
.ciasteczka__zamknij img { display: block; width: 9px; height: 9px; }
.ciasteczka__tytul { margin: 0 0 12px; font-size: 18px; font-weight: 700; line-height: 24px; color: #212121; }
.ciasteczka__opis p { margin: 0; font-size: 14px; line-height: 24px; color: #212121; }
.ciasteczka__przyciski { display: flex; margin-top: 16px; }
.ciasteczka__przycisk {
  height: 44px;
  margin-right: 8px;
  padding: 8px 12.5px;
  font-size: 14px;
  font-weight: 500;
  line-height: 24px;
  color: #1863dc;
  background: none;
  border: 2px solid #1863dc;
  border-radius: 2px;
}
.ciasteczka__przycisk:last-child { margin-right: 0; }
.ciasteczka__przycisk--glowny { color: var(--kolor-bialy); background: #1863dc; }

/* ============================================================
   Strona główna
   ============================================================ */

/* obszary działalności — trzy kolumny na szarym tle */
.sekcja--obszary { margin-top: 50px; }
.obszary { display: flex; align-items: stretch; gap: 30px; }
/* kolumny jak na wzorcu: każda chce całej szerokości i kurczy się do trzeciej części —
   ułamek piksela reszty dostaje pierwsza kolumna (od tego zależy położenie wszystkiego niżej) */
.obszar {
  flex: 0 1 auto;
  width: 100%;
  min-width: 0;
  min-height: 530px;          /* każdy kafel co najmniej 530 px, także ułożone jeden pod drugim (telefon) */
  display: flex;
  flex-direction: column;
  padding: 40px 0 20px;
  background: var(--kolor-szary-tlo);
  text-align: center;
  /* po najechaniu kolumna powiększa się do 105% (0,4 s) — jak na stronie wzorcowej; stałe
     przekształcenie (perspektywa) rysuje kolumnę w osobnej warstwie, tak jak tam */
  transform: perspective(0px) scale(1);
  transition: background .3s, border .3s, box-shadow .3s, transform .4s;
}
.obszar:hover { transform: perspective(0px) scale(1.05); }
/* cała kolumna prowadzi do strony obszaru (jak na wzorcu: kursor rączki na logo, zdjęciu i opisie) —
   odnośnik zdjęcia rozciągnięty na całą kolumnę */
.obszar { position: relative; cursor: pointer; }
.obszar__zdjecie::after { content: ""; position: absolute; inset: 0; }
/* pole logo jak na wzorcu: kolumna flex co najmniej 125 px, zawartość na środku w pionie; rośnie, gdy logo
   jest wyższe (np. logo Cleanroom przy 700 px) */
.obszar__logo { display: flex; flex-direction: column; justify-content: center; min-height: 125px; }
/* pole logotypu na własnej warstwie, na całą szerokość kolumny (jak na wzorcu) — od tego zależy
   wygładzanie krawędzi logotypu; logotyp w wierszu, na środku (jak obrazek na wzorcu) */
.obszar__logo-pole { font-size: 16px; line-height: 24px; text-align: center; transform: perspective(0px) scale(1); }   /* szerokość: rozciągnięte (bez width, jak na wzorcu) */
.obszar__logo-pole img { display: inline-block; vertical-align: middle; }
/* logotypy zajmują część szerokości kafla — jak na stronie wzorcowej (70% i 60%) */
.obszar__logo img { max-width: 100%; }
.obszar__logo--p4c img { width: 70%; height: auto; }
.obszar__logo--cleanroom img { width: 60%; height: auto; }
.obszar__logo--hydrogen img { width: 70%; height: auto; }
.obszar__zdjecie { display: block; margin-top: 20px; }
/* zdjęcie węższe od kafla (plik ma 600 px) stoi na środku — jak na wzorcu */
.obszar__zdjecie img { width: auto; max-width: 100%; height: auto; margin-left: auto; margin-right: auto; }
/* zdjęcie i logo na własnych warstwach, jak dotąd — te same odcienie w spoczynku i po powiększeniu kafla */
.obszar__zdjecie img, .obszar__logo-pole { will-change: transform; }
.obszar__opis {
  margin: 30px 0 14.4px;
  font-size: 18px;
  line-height: 27px;
  text-align: center;
}
.obszar__opis strong { font-weight: 700; }

/* tytuł sekcji */
.sekcja--tytul { margin-top: 50px; }
/* odstępy sekcji odczytane ze strony wzorcowej */
.sekcja--m25 { margin-top: 25px; }
.sekcja--m50 { margin-top: 50px; }
.sekcja--m80 { margin-top: 80px; }
.sekcja--m100 { margin-top: 100px; }
/* blok treści podstrony — flow-root, żeby margines ostatniego akapitu
   liczył się do wysokości sekcji (tak jest na stronie wzorcowej) */
.tresc { display: flow-root; }

/* tytuł podstrony jest ciaśniejszy niż tytuł sekcji na stronie głównej */
.naglowek-sekcji--strona { line-height: 40px; }

/* misja i liczniki */
.sekcja--firma { margin-top: 50px; }
.firma { display: flex; gap: 30px; }
.firma__misja { flex: 1 1 0; min-width: 0; }
.firma__liczniki { flex: 1 1 0; min-width: 0; display: flex; gap: 20px; }
.licznik { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; }
.licznik__wstep { margin: 0 0 14.4px; }

/* pozioma kreska oddzielająca sekcje */
.separator { margin-top: var(--mar, 100px); margin-bottom: var(--mar-d, 0); padding: var(--sep-g, 15px) var(--sep-r, 0px) var(--sep-d, 15px) var(--sep-l, 0px); }
.separator span { display: block; max-width: var(--szer-kontenera); margin: 0 auto; border-top: 1px solid #e4e4e4; }

/* maszyna: tekst po lewej, zdjęcie po prawej */
.maszyna { display: flex; gap: 60px; align-items: center; min-height: 500px; }
.maszyna__opis { flex: 0 0 calc(50% - 32.625px); }
/* zdjęcie ma po prawej pomarańczową krawędź — jak na stronie wzorcowej */
.maszyna__zdjecie {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  justify-content: flex-end;
  border-right: 10px solid var(--kolor-pomaranczowy);
}
/* stałe wymiary — przy nich rasteryzacja zdjęcia jest identyczna jak na stronie wzorcowej */
.maszyna__zdjecie img { width: 100%; height: auto; }

/* zakres usług — dwie równe kolumny */
.zakres { display: flex; gap: 60px; min-height: 275px; padding: 50px 0 0; }   /* jak na wzorcu: bez dolnego odstępu, najmniej 275 px */
.zakres__kolumna { flex: 1 1 0; min-width: 0; }

/* wodór — treść w lewej połowie */
.wodor { padding-top: 50px; }
.wodor__tresc { width: calc(50% - 30px); }
.wodor__przycisk { margin: 59.4px 0 0; }
.przycisk {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 293px;
  height: 75px;
  padding: 20px 30px;
  font-size: 16px;
  font-weight: 400;
  line-height: 16px;
  color: var(--kolor-bialy);
  background: var(--kolor-akcent);
  border: 1px solid var(--kolor-akcent);
  border-radius: 0;
}
/* po najechaniu przycisk wygląda tak samo — jak na stronie wzorcowej */
.przycisk__tekst { display: block; }
/* strzałka: znak 30 px w linii 16 px pisma systemowego (pole 30 × 33) — jak na wzorcu */
.przycisk__strzalka {
  display: block;
  flex: 0 0 auto;
  width: 30px;
  height: 33px;
  margin-left: 20px;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  font-size: 16px;
  line-height: 16px;
  text-align: center;
}
.przycisk__strzalka > i { font-size: 30px; line-height: 30px; font-style: normal; }

/* mapa rynków ze znacznikiem i dymkiem */
.sekcja--mapa { margin-top: 100px; }
/* jak na wzorcu: pole mapy ma najmniej 500 px wysokości, mapa na środku w pionie (np. przy 1030 px mapa
   ma 494,6 px) */
.sekcja--mapa .sekcja__wnetrze { display: flex; align-items: center; min-height: 500px; }
.mapa-rynkow { position: relative; }
.mapa-rynkow img { width: 100%; height: auto; }
/* znacznik stoi środkiem w punkcie 12% szerokości i 85% wysokości mapy (jak na stronie
   wzorcowej); --mapa-pad to boczny odstęp mapy w jej polu (laptop, tablet) */
.mapa-rynkow__punkt {
  position: absolute;
  left: calc(var(--mapa-pad, 0px) + 0.12 * (100% - 2 * var(--mapa-pad, 0px)));
  top: 85%;
  width: 55px;
  height: 55px;
  transform: translate(-50%, -50%);
}
/* pulsujące podświetlenie znacznika (co 2 s rośnie do 1,5× i gaśnie) — jak dotąd */
.mapa-rynkow__punkt::before {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  background: var(--kolor-pomaranczowy);
  animation: mapa-puls 2s ease infinite;
}
@keyframes mapa-puls { from { transform: scale(1); opacity: 1; } to { transform: scale(1.5); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .mapa-rynkow__punkt::before { animation: none; opacity: 0; } }
.mapa-rynkow__znacznik {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 55px;
  height: 55px;
  background: var(--kolor-pomaranczowy);
}
/* uścisk dłoni: znak z kroju ikon 25 px w bloku na środku znacznika — jak na wzorcu */
.mapa-rynkow__znacznik::before {
  content: "\f2b5";
  display: block;
  font-family: 'ikony-pelne';
  font-size: 25px;
  font-style: normal;
  font-weight: 900;
  line-height: 25px;
  text-align: center;
  color: var(--kolor-bialy);
}
.mapa-rynkow__dymek {
  position: absolute;
  left: 50%;
  /* jak na wzorcu: 23 px nad znacznikiem, a do góry o własną wysokość przesunięciem (transform) — od sposobu
     ustawienia zależy, jak przeglądarka zaokrągla położenie tekstu */
  top: -23px;
  transform: translate(-50%, -100%);
  width: 170px;
  margin: 0;
  padding: 10px 10px 12px;
  font-size: 12px;
  line-height: 18px;
  color: var(--kolor-bialy);
  background: var(--kolor-akcent);
  box-shadow: rgba(0, 0, 0, 0.22) 0 0 5px 0;   /* lekki cień wokół dymka, jak na wzorcu */
  text-align: center;
}
/* ogonek dymka wskazujący znacznik */
.mapa-rynkow__dymek::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  width: 0;
  height: 0;
  margin: -1px 0 0 -10px;
  border: 10px solid transparent;
  border-width: 10px 10px 0;
  border-top-color: var(--kolor-akcent);
}

/* partnerzy — karuzela logotypów */
.partnerzy { display: flex; flex-direction: column; justify-content: center; min-height: 500px; }
.naglowek-sekcji--srodek { text-align: center; }
/* Jak na stronie wzorcowej: na widoku 5 logotypów co 25 px (tablet 768–1023 px: 4 co
   10 px, telefon: 1), pole logotypu najmniej 170 px wysokości z odstępem 30 px, logotyp
   najwyżej w swoim rozmiarze (281 × 181) */
.karuzela { overflow: hidden; margin-top: 70px; --k-widok: 5; --k-odstep: 25px; }
.karuzela__tor { display: flex; gap: var(--k-odstep); }
.karuzela__element {
  flex: 0 0 calc((100% - (var(--k-widok) - 1) * var(--k-odstep)) / var(--k-widok));
  min-width: 0;
  min-height: 170px;
  padding: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--kolor-bialy);
}
.karuzela__element img { max-width: 100%; height: auto; }
@media (max-width: 1024px) { .karuzela { margin-top: 20px; } }
@media (max-width: 1023px) { .karuzela { --k-widok: 4; --k-odstep: 10px; } }
@media (max-width: 767px) { .karuzela { --k-widok: 1; } }

/* --- szerokości okna ---------------------------------------- */
/* Progi jak na stronie wzorcowej: 1024 px (menu chowa się pod przycisk)
   i 767 px (układ jednokolumnowy, mniejsze kroje pisma). */

/* mapa rynków na laptopie i tablecie — jak na stronie wzorcowej */
@media (max-width: 1366px) {
  .sekcja--mapa { margin-top: 50px; }
  .mapa-rynkow { padding: 0 60px; --mapa-pad: 60px; }
  .mapa-rynkow__punkt { width: 65px; height: 65px; }
  .mapa-rynkow__znacznik { width: 65px; height: 65px; }
  .mapa-rynkow__znacznik::before { font-size: 32px; line-height: 32px; }
  .mapa-rynkow__dymek { width: 260px; font-size: 14px; line-height: 21px; }
}
@media (max-width: 1440px) {
  .naglowek__wnetrze, .kontener, .stopka__panel,
  .stopka__mapa-wnetrze, .stopka__dol-wnetrze { max-width: 100%; }
  /* wnętrze sekcji zostaje najwyżej 1400 px (jak na wzorcu — sekcja bez bocznych odstępów ma przy 1408 px
     wnętrze 1400 px na środku); sekcje z odstępami po 20 px i tak są węższe */
}

@media (max-width: 1024px) {
  .naglowek__pas { height: auto; }
  .naglowek__wnetrze { align-items: center; padding-top: 0; }
  .naglowek__kolumna-logo { flex: 0 0 15%; align-items: flex-start; align-self: stretch; padding: 10px; }
  .naglowek__logo { margin-top: 10px; }

  /* --- menu pod przyciskiem (tablet i telefon) — jak na stronie wzorcowej:
     białe okienko 40 px od krawędzi, rozsuwane w 0,4 s; pozycje 41 px, pismo 13 px;
     najechana i bieżąca pozycja: białe na niebieskim --- */
  .menu { align-items: flex-start; }
  .menu__lista {
    position: absolute;
    top: calc(50% + 48px);         /* 35 px pod przyciskiem, który stoi na środku nagłówka */
    left: 40px;
    right: 40px;
    z-index: 9999;
    display: none;
    flex-direction: column;
    align-items: stretch;
    overflow: hidden;
  }
  .menu__lista--otwarte { display: flex; }
  .menu__lista.rozsuniete, .mega.rozsuniete { overflow: visible; }
  .menu__pozycja, .menu__pozycja--rozwijana { position: relative; margin: 0; }
  .menu__pozycja > a {
    display: flex;
    align-items: center;
    padding: 14px 22px;
    font-size: 13px;
    font-weight: 500;
    line-height: 13px;
    color: #333;
    background: var(--kolor-bialy);
    transition: none;
  }
  .menu__pozycja > a:hover,
  .menu__pozycja--aktywna > a { color: var(--kolor-bialy); background: var(--kolor-akcent); }
  .menu__pozycja > a::after { display: none; }
  .menu__znacznik { display: none; }

  /* przycisk menu: trzy niebieskie kreski 35×4 co 11 px, po najechaniu pomarańczowe */
  .menu__przelacznik {
    display: block;
    position: relative;
    width: 35px;
    height: 26px;
    padding: 0;
  }
  .menu__etykieta { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .menu__kreski,
  .menu__kreski::before,
  .menu__kreski::after {
    position: absolute;
    left: 0;
    width: 35px;
    height: 4px;
    background: var(--kolor-akcent);
  }
  .menu__przelacznik:hover .menu__kreski,
  .menu__przelacznik:hover .menu__kreski::before,
  .menu__przelacznik:hover .menu__kreski::after { background: #f85c1e; }
  .menu__kreski { top: 0; }
  .menu__kreski::before { content: ""; top: 11px; }
  .menu__kreski::after { content: ""; top: 22px; }

  /* trójkąt rozwijający panel oferty: pole 53×58 przy prawej krawędzi pozycji */
  /* znak trójkąta z kroju ikon 14 px w polu z odstępem 22 px, przy dolnej krawędzi pola — jak na wzorcu */
  .menu__strzalka {
    display: flex;
    align-items: flex-end;
    position: absolute;
    top: -8.5px;
    right: 0;
    z-index: 1;
    box-sizing: border-box;
    width: 53px;
    height: 58px;
    padding: 22px;
    background: none;
    font-family: 'ikony-pelne';
    font-size: 14px;
    font-weight: 900;
    line-height: 14px;
    color: #333;
  }
  .menu__strzalka::before { content: "\f0d7"; display: block; font-style: normal; }
  .menu__pozycja--rozwijana > a:hover ~ .menu__strzalka { color: var(--kolor-bialy); }

  /* panel oferty w menu: rozsuwany pod pozycją, trzy kolumny obok siebie */
  .mega {
    position: static;
    display: none;
    padding-top: 0;
    overflow: hidden;
    opacity: 1;
    visibility: visible;
    box-shadow: none;
    transition: none;
  }
  .mega--otwarta { display: block; }
  .mega__wnetrze { padding: 20px 0; }
  .mega__kolumna--2, .mega__kolumna--3 { min-height: 350px; }
  .mega__tytul { font-size: 18px; line-height: 18px; }
  .mega__lista li { margin-top: 4px; padding-bottom: 4px; }
  .mega .mega__przycisk { --pad: 18px; --szer: auto; }

  .naglowek-sekcji { font-size: 30px; line-height: 36px; }
  /* akapity strony głównej (akapity podstron mają rozmiary zmierzone przy sobie) */
  .akapit:not([style]), .obszar__opis { font-size: 16px; line-height: 24px; }

  /* poniżej 1024 px treść układa się w jednej kolumnie, a odstępy maleją */

  .separator:not([style]) { margin-top: 50px; }

  .sekcja--maszyna, .sekcja--zakres, .sekcja--wodor { margin-top: 50px; }
  .obszary { min-height: 530px; }
  .licznik__liczba { font-size: 60px; line-height: 60px; }
  .licznik__liczba span { height: 60px; }
  .firma { flex-direction: column; gap: 25px; }
  .firma__liczniki { gap: 20px; }
  .maszyna { flex-direction: column; gap: 30px; min-height: 0; }
  .maszyna__opis { flex: none; width: 100%; }
  .maszyna__zdjecie { flex: none; width: 100%; }
  .maszyna__zdjecie img { width: 80%; height: auto; }

  .zakres { flex-direction: column; gap: 30px; min-height: 0; padding-bottom: 0; }
  .wodor { padding: 50px 0 30px; }
  .wodor__tresc { width: 100%; }
  .wodor__przycisk { margin-top: 34.4px; }

  .sekcja--mapa { margin-top: 0; }
  .sekcja--mapa .sekcja__wnetrze { display: flex; align-items: center; min-height: 500px; }
  .mapa-rynkow { width: 100%; padding: 0 60px; }

  .sekcja--partnerzy { margin-top: 0; }
  .partnerzy { min-height: 300px; }

  /* stopka na tablecie — jak na stronie wzorcowej: logo 85% kolumny, bez nazwy ośrodka,
     dane, adres i menu mniejszym pismem (14/21) */
  .stopka__logo { width: 85%; }
  .stopka__dol-wnetrze { padding-bottom: 0; }
  .stopka__naglowek { display: none; }
  .stopka__dane--ikony { margin-top: 10px; }
  .stopka__dane li, .stopka__menu li { font-size: 14px; line-height: 21px; }
  .stopka__dane li > span, .stopka__dane a > span:last-child, .stopka__menu a > span { line-height: 21px; }
  /* ikony społecznościowe jedna pod drugą co 50 px, przy prawej krawędzi (pole 32×30,
     ikona dosunięta do prawej) — jak na stronie wzorcowej na tablecie i telefonie */
  .stopka__spolecznosci li { display: block; margin: 0 0 20px; }
  .stopka__spolecznosci li + li { margin-left: 0; }
  .stopka__spolecznosci a { width: 32px; text-align: right; }

  /* mapa dojazdu jest nad kartą kontaktu i formularzem, nie pod nimi */
  .stopka__mapa-wnetrze, .stopka__mapa iframe { height: 400px; }
  .stopka__nakladka { margin-top: 0; }
  .stopka__panel { align-items: stretch; }
  .stopka__panel > * { width: 100%; margin-right: 0; }
  .karta-kontakt { margin-top: 30px; }
  .formularz-box { margin-bottom: 30px; }
}

@media (max-width: 767px) {
  .naglowek__pas { padding: 0 15px; }
  .naglowek__wnetrze { padding: 15px 0; }
  /* jak na wzorcu: kolumna logo 50% wnętrza, 10 px odstępu, kolumna menu 46% (przycisk 10 px od jej
     prawej krawędzi); obie od lewej — resztę szerokości zostawia wolną, więc przycisk przesuwa się
     z szerokością telefonu */
  .naglowek__wnetrze { justify-content: flex-start; column-gap: 10px; }
  .naglowek__kolumna-logo { flex: 0 0 50%; }
  .menu { flex: 0 0 46%; padding-right: 10px; }
  .menu__lista { top: calc(50% + 41px); left: 30px; right: 30px; }   /* 28 px pod przyciskiem */
  /* panel oferty na telefonie: kolumny jedna pod drugą */
  .mega__wnetrze { flex-direction: column; row-gap: 0; }
  .mega__kolumna--1, .mega__kolumna--2, .mega__kolumna--3 { flex: 0 0 auto; width: 100%; }
  .mega__kolumna--2 { padding-left: 0; border-right: 0; }
  .mega__kolumna--3 { margin-top: 20px; padding-left: 0; }
  .mega__lista li { font-size: 14px; line-height: 21px; }
  .mega .mega__przycisk { margin-top: 0; }

  .naglowek-sekcji { font-size: 25px; line-height: 30px; }
  .akapit:not([style]), .obszar__opis { font-size: 14px; line-height: 21px; }

  .sekcja--obszary { margin-top: 25px; }
  .obszary { flex-direction: column; gap: 0; }
  /* na telefonie pole logo zawija (jak na wzorcu) — przeglądarka liczy wtedy wysokość pola z szerokości
     najwyżej równej szerokości pliku: pole logo Parts4Cleaning ma 44,8 px (mniej niż samo logo), stoi na
     środku pola 125 px, a logo wystaje z niego w dół */
  .obszar__logo { flex-wrap: wrap; }

  .sekcja--firma { margin-top: 25px; }
  /* liczniki na telefonie: jeden pod drugim, liczba i opis na środku, drugi wstęp też;
     odstępy jak na stronie wzorcowej (10 px w grupie, 20 px między grupami, 25 px nad
     pierwszą liczbą) */
  .firma__liczniki { flex-direction: column; gap: 20px; }
  .licznik__wstep { margin-bottom: 24.4px; }
  .licznik__liczba { margin-top: 0; text-align: center; }
  .licznik:first-child .licznik__liczba { margin-top: 25px; }
  .licznik__opis, .licznik + .licznik .licznik__wstep { text-align: center; }

  .separator:not([style]) { margin-top: 25px; }

  .sekcja--maszyna, .sekcja--zakres, .sekcja--wodor { margin-top: 50px; }
  .maszyna__zdjecie img { width: 100%; height: auto; }

  .sekcja--zakres { margin-top: 50px; }
  .zakres { flex-direction: column; gap: 30px; min-height: 0; padding-bottom: 0; }

  .sekcja--wodor { margin-top: 50px; }
  .wodor { padding: 50px 0 30px; }
  .wodor__tresc { width: 100%; }
  .wodor__przycisk { margin-top: 34.4px; }
  .przycisk { width: auto; max-width: 100%; }

  .sekcja--tytul { margin-top: 50px; }
  .sekcja--mapa { margin-top: 0; padding: 0; }
  .sekcja--mapa .sekcja__wnetrze { display: block; min-height: 0; }
  .mapa-rynkow { padding: 50px 0 130px; }
  /* na telefonie znacznik z dymkiem stoi pod mapą, na środku */
  /* znacznik na dolnej krawędzi pola mapy, środkiem na niej (przesunięcie o połowę, jak na wzorcu) */
  .mapa-rynkow__punkt { left: 50%; top: 100%; width: 55px; height: 55px; transform: translate(-50%, -50%); }
  .mapa-rynkow__znacznik { width: 55px; height: 55px; }
  .mapa-rynkow__znacznik::before { font-size: 25px; line-height: 25px; }
  .mapa-rynkow__dymek { width: 225px; padding: 12px; font-size: 12px; line-height: 18px; }
  .sekcja--partnerzy { margin-top: 80px; }
  .partnerzy { min-height: 300px; }


  .stopka__dol-wnetrze { padding: 50px 0 0; }
  /* na wąskim ekranie nazwa ośrodka jest ukryta — tak jak na stronie wzorcowej */
  .stopka__naglowek { display: none; }
  .stopka__logo { width: 70%; }
  .stopka__dane--ikony { margin-top: 10px; }
  .stopka__kolumna--menu { align-items: flex-start; }
  .stopka__menu li { margin-top: 0; padding-bottom: 8px; font-size: 14px; }
  .stopka__menu a > span { line-height: 21px; }
  .stopka__kolumny { flex-direction: column; gap: 20px; }
  .stopka__kolumna--adres, .stopka__kolumna--menu { padding-top: 25px; }
  .stopka__menu { flex: 0 0 106px; }
  .stopka__spolecznosci { margin-left: auto; }
  .stopka__pasek { flex-wrap: wrap; padding: 25px 0; }
  /* karta kontaktu: długi wiersz schodzi pod ikonę, a pole ikony ma 32 px wysokości — jak dotąd */
  .karta-kontakt__wiersz .ikona { margin-bottom: 7px; }
}

/* ============================================================
   Podstrony — wspólne elementy treści
   ============================================================ */
.tresc img { width: var(--szer, 100%); height: auto; filter: var(--filtr, none); border: var(--obramowanie, 0); border-radius: var(--promien, 0); box-shadow: var(--cien, none); }
/* zdjęcie otwierane w oknie podglądu: odnośnik bez własnego pola (układ jak samego zdjęcia) */
/* odnośnik do podglądu wokół zdjęcia: szerokość pola, najwyżej szerokość pliku z ramką (--a-max), wyśrodkowany —
   jak na wzorcu; procent szerokości zdjęcia liczy się od niego (np. przy 414 px 80% z 404 px) */
.zdjecie-podglad { display: block; width: 100%; max-width: var(--a-max, none); cursor: pointer; }
.tresc > .zdjecie-podglad, .tresc .kolumna > .zdjecie-podglad, .tresc .blok > .zdjecie-podglad { margin-left: auto; margin-right: auto; }
.tresc .zdjecie-podglad > img { margin: var(--odst, 0) var(--mr, 0) 0 var(--ml, 0); cursor: pointer; }
.tresc iframe { width: 100%; aspect-ratio: 16 / 9; }

/* Odstępy w pionie między elementami treści są odczytane ze strony wzorcowej
   i zapisane przy każdym elemencie (--odst) — dlatego własne marginesy
   elementów w treści są zerowane. */
.tresc > *:not(.kolumna),
.tresc .kolumna > * { margin: var(--odst, 0) var(--mr, 0) 0 var(--ml, 0); }
/* pole o szerokości w procentach dosunięte do prawej (--ml: auto) — jak na wzorcu */
.tresc [style*="--maks"] { max-width: var(--maks); }

/* Układ kolumnowy treści. Wiersz: kierunek (obok siebie albo jedna pod drugą na
   węższym ekranie), zawijanie, odstępy, ułożenie kolumn w pionie i poziomie —
   wszystko zmierzone na stronie wzorcowej dla każdej szerokości. Kolumna: udział
   w szerokości wiersza, kolejność, wewnętrzne odstępy, pionowe ułożenie treści,
   najmniejsza wysokość i tło (zdjęcie z przyciemnieniem). */
.kolumny-tresc {
  display: flex;
  min-height: var(--min-h, 0);
  padding-top: var(--pad-g, 0);
  padding-bottom: var(--pad-d, 0);
  background-color: var(--k-tlo, transparent);
  background-image: var(--k-tlo-obraz, none);
  background-position: var(--k-tlo-poz, center);
  background-size: var(--k-tlo-rozm, cover);
  background-repeat: var(--k-tlo-powt, no-repeat);
  background-attachment: var(--k-tlo-moc, scroll);
  border-width: var(--ramka-sz, 0);
  border-style: var(--ramka-st, none);
  border-color: var(--ramka-kol, transparent);
  border-radius: var(--promien-b, 0);
  box-shadow: var(--cien-b, none);
  flex-direction: var(--kier, row);
  flex-wrap: var(--zawin, nowrap);
  gap: var(--odstep-pion, 0) var(--odstep, 0);
  align-items: var(--wyr-kol, stretch);
  justify-content: var(--wyr-poz, flex-start);
  width: var(--szer-wiersza, auto);
  padding-left: var(--pad-l, 0);
  padding-right: var(--pad-r, 0);
}
.kolumna {
  flex: 0 var(--kurcz, 0) var(--udzial, 50%);   /* --kurcz: kurczenie jak na wzorcu (kolumny o szerokości 100% i 40% dzielą wiersz) */
  min-width: 0;
  width: var(--szer-kol, auto);
  min-height: var(--min-h, 0);
  margin-left: var(--ml, 0);
  padding: var(--pad-g, 0) var(--pad-r, 0) var(--pad-d, 0) var(--pad-l, 0);
  order: var(--kolejnosc, 0);
  display: flex;
  flex-direction: column;
  justify-content: var(--wyr-pion, flex-start);
  background-color: var(--k-tlo, transparent);
  background-image: var(--k-tlo-obraz, none);
  background-position: var(--k-tlo-poz, center);
  background-size: var(--k-tlo-rozm, cover);
  background-repeat: var(--k-tlo-powt, no-repeat);
  background-attachment: var(--k-tlo-moc, scroll);
  border-width: var(--ramka-sz, 0);
  border-style: var(--ramka-st, none);
  border-color: var(--ramka-kol, transparent);
  border-radius: var(--promien-b, 0);
  box-shadow: var(--cien-b, none);
}
/* blok w kolumnie: kontener z tłem, ramką, cieniem albo najmniejszą wysokością */
.blok {
  display: flex;
  flex-direction: column;
  justify-content: var(--wyr-pion, flex-start);
  min-height: var(--min-h, 0);
  padding: var(--pad-g, 0) var(--pad-r, 0) var(--pad-d, 0) var(--pad-l, 0);
  background-color: var(--k-tlo, transparent);
  background-image: var(--k-tlo-obraz, none);
  background-position: var(--k-tlo-poz, center);
  background-size: var(--k-tlo-rozm, cover);
  background-repeat: var(--k-tlo-powt, no-repeat);
  background-attachment: var(--k-tlo-moc, scroll);
  border-width: var(--ramka-sz, 0);
  border-style: var(--ramka-st, none);
  border-color: var(--ramka-kol, transparent);
  border-radius: var(--promien-b, 0);
  box-shadow: var(--cien-b, none);
}
.tresc .blok > * { margin: var(--odst, 0) var(--mr, 0) 0 var(--ml, 0); }
.blok--tlo, .kolumny-tresc--tlo { position: relative; }
.blok--tlo::before, .kolumny-tresc--tlo::before {
  content: "";
  position: absolute;
  inset: 0;
  background-color: var(--k-nakladka, transparent);
  background-image: var(--k-nakladka-obraz, none);
  background-position: var(--k-nakladka-poz, center);
  background-size: var(--k-nakladka-rozm, auto);
  background-repeat: var(--k-nakladka-powt, no-repeat);
  background-attachment: var(--k-nakladka-moc, scroll);
  opacity: var(--k-nakladka-op, 1);
  border-radius: inherit;
  pointer-events: none;
}
.blok--tlo > *, .kolumny-tresc--tlo > * { position: relative; }
/* blok z pokazem zdjęć w tle: zdjęcia pod przyciemnieniem, treść nad nim */
.blok--tlo > .tlo-pokaz { position: absolute; z-index: 0; }
.blok--pokaz::before { z-index: 1; }
.blok--pokaz > :not(.tlo-pokaz) { z-index: 2; }
.kolumna--tlo { position: relative; }
.kolumna--tlo::before {
  content: "";
  position: absolute;
  inset: 0;
  background-color: var(--k-nakladka, transparent);
  background-image: var(--k-nakladka-obraz, none);
  background-position: var(--k-nakladka-poz, center);
  background-size: var(--k-nakladka-rozm, auto);
  background-repeat: var(--k-nakladka-powt, no-repeat);
  background-attachment: var(--k-nakladka-moc, scroll);
  opacity: var(--k-nakladka-op, 1);
  pointer-events: none;
}
.kolumna--tlo > * { position: relative; }

/* nagłówki i akapity w treści — rozmiar, wysokość linii i wyrównanie zmierzone */
.tytul { margin: 0; font-family: var(--kroj, inherit); font-size: var(--rozmiar, 40px); line-height: var(--linia, normal); font-weight: var(--waga, 700); text-align: var(--wyr, left); color: var(--kolor, var(--kolor-tekst)); }
.tytul--srodek { text-align: center; }
.tytul--18 { font-size: 18px; line-height: var(--linia, 18px); }
.tytul--20 { font-size: 20px; line-height: var(--linia, 20px); }
.tytul--22 { font-size: 22px; line-height: var(--linia, 22px); }
.tytul--25 { font-size: 25px; line-height: var(--linia, 25px); }
.tytul--30 { font-size: 30px; line-height: var(--linia, 30px); }
.tytul--35 { font-size: 35px; line-height: var(--linia, 35px); }
.tytul--40 { font-size: 40px; line-height: var(--linia, 40px); }
.tytul--45 { font-size: 45px; line-height: var(--linia, 45px); }
.tytul--50 { font-size: 50px; line-height: var(--linia, 50px); }
.tytul--60 { font-size: 60px; line-height: var(--linia, 60px); }
.tytul--70 { font-size: 70px; line-height: var(--linia, 70px); }

/* akapity o innym rozmiarze niż podstawowy */
.akapit--srodek { text-align: center; }
.akapit--14 { font-size: 14px; line-height: 21px; }
.akapit--16 { font-size: 16px; line-height: 24px; }
.akapit--20 { font-size: 20px; line-height: 30px; }
.akapit--22 { font-size: 22px; line-height: 33px; }
.akapit--25 { font-size: 25px; line-height: 37.5px; }

/* listy w treści (dane teleadresowe, wyliczenia) */
.lista { margin: 37px 0 0; }
/* pozycje jedna pod drugą albo (lista w jednej linii) obok siebie */
.lista { display: flex; flex-direction: var(--lista-kier, column); flex-wrap: wrap; justify-content: var(--lista-wyr, flex-start); }
:where(.lista):first-child { margin-top: 0; }
.naglowek + .lista { margin-top: 45px; }
/* wysokość pozycji i odstęp od poprzedniej — zmierzone na stronie wzorcowej;
   --odst zerujemy, żeby pozycja nie dziedziczyła odstępu całej listy */
.lista__pozycja {
  --odst: 0px;
  display: flex;
  align-items: var(--wyr-poz, flex-start);
  min-height: var(--h, 0);
  padding: var(--pad-g, 0) 0 var(--pad-d, 0);
  margin: var(--odst) 0 0 var(--odst-x, 0);
  font-family: var(--lista-kroj, inherit);
  font-size: var(--lista-rozmiar, 18px);
  font-weight: var(--lista-waga, 500);
  line-height: var(--lista-linia, 27px);
  color: var(--lista-kolor, currentColor);
}

.lista__pozycja .ikona-mala { background: var(--kolor-akcent); }
/* tekst pozycji: początek i wewnętrzny odstęp zmierzone na stronie wzorcowej */
.lista__tekst { margin-left: var(--tekst-x, 0); padding-left: var(--pad-tekstu, 0); }
.lista__pozycja a { color: inherit; }
/* po najechaniu kolor zmienia się tylko wtedy, gdy tak jest na wzorcu (zmienna z generatora) */
.lista__pozycja a:hover { color: var(--lista-kolor-h, inherit); }
/* zwykła lista w tekście: numer albo punktor przed pozycją (poza jej polem), jak na wzorcu */
.lista--znaki { padding: 0; list-style: var(--znak-listy, disc) outside; }
.lista--znaki > .lista__pozycja { display: list-item; }
/* odnośnik na całą pozycję (ikona i tekst), układ jak w samej pozycji */
.lista__odnosnik { display: flex; flex: 1 1 auto; min-width: 0; align-items: inherit; }

/* kafelki wpisów (aktualności, oferty pracy) */
.wpisy { display: flex; flex-wrap: wrap; margin: 0 -10px; }
.wpis { width: 33.3333%; padding: 10px; }
.wpis__karta { height: 100%; background: var(--kolor-bialy); }
.wpis__zdjecie {
  position: relative;
  display: block;
  height: 315px;
  overflow: hidden;
}
.wpis__zdjecie img { width: 100%; height: 100%; object-fit: cover; }
.wpis__nakladka {
  position: absolute;
  inset: 0;
  background: rgba(23, 98, 251, .61);
  opacity: 0;
  transition: opacity .25s;
}
.wpis__zdjecie:hover .wpis__nakladka { opacity: 1; }
.wpis__tresc { padding: 15px; }
.wpis__tytul { margin: 10px 0 5px; font-size: 25px; font-weight: 700; line-height: 30px; color: #333; }
.wpis__tytul a { color: inherit; }
.wpis__tytul a:hover { color: var(--kolor-akcent); }
.wpis__wiecej { margin: 0; font-size: 18px; font-weight: 500; line-height: 27px; }
.wpis__wiecej a { color: var(--kolor-akcent); }

@media (max-width: 1024px) {
  .wpis { width: 50%; }
}
@media (max-width: 767px) {
  .wpis { width: 100%; }
}

/* pionowy odstęp o wysokości takiej jak na stronie wzorcowej */
.odstep { height: var(--wys, 0); }
/* odstęp przed stopką bywa ujemny (ostatnia sekcja ma większy margines niż odstęp) */
.odstep--stopka { height: max(0px, var(--wys, 0px)); margin-top: min(0px, var(--wys, 0px)); }

/* przycisk w treści podstrony */
.przycisk-wiersz { margin: 30px 0 0; }


/* --- przyklejony przycisk „Produkty i usługi" (strony oferty) --- */
/* Na szerokim ekranie pionowy pasek przy prawej krawędzi okna — poziomy
   przycisk obrócony o 90°, tak jak na stronie wzorcowej. Po przewinięciu
   strony wysuwa się o 50 px (skrypt dodaje klasę --widoczny).
   Układ warstw jak na wzorcu: pole szerokości 5% okna (odstęp 10 px) przy prawym dolnym rogu,
   w nim pole wysokie na 73 px obrócone wokół środka, a z niego wystaje w górę przycisk
   276 px — od tego zależy wygładzanie obróconego napisu i strzałki. */
.przycisk-oferta {
  position: fixed;
  right: 0;
  bottom: -20px;
  z-index: 999;
  box-sizing: border-box;
  width: 5%;
  padding: 10px;
  transform: translateY(50px);
  transition: transform .6s ease;
}
.przycisk-oferta--widoczny { transform: none; }
.przycisk-oferta__obrot {
  display: flex;
  justify-content: flex-end;
  box-sizing: border-box;
  height: 73px;
  transform: matrix3d(0, 1, 0, 0, -1, 0, 0, 0, 0, 0, 1, -1, 0, 0, 0, 1);
}
/* tablet: pole obrotu wyższe o 25 px odstępu (przycisk dalej od dołu), całość 50 px niżej */
@media (max-width: 1024px) {
  .przycisk-oferta { bottom: -50px; }
  .przycisk-oferta__obrot { height: 98px; padding-top: 25px; }
}
.przycisk-oferta__link {
  position: relative;
  z-index: 1;
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  width: 276px;
  height: 73px;
  padding: 20px;
  color: var(--kolor-bialy);
  background: var(--kolor-akcent);
  box-shadow: rgba(0, 0, 0, .1) 0 0 10px 0;
}
/* po najechaniu pomarańczowy (od razu) — jak na stronie wzorcowej */
.przycisk-oferta__link:hover { background: var(--kolor-pomaranczowy); }
/* strzałka: znak 30 px w linii 16 px pisma systemowego (pole 30 × 33) — jak na wzorcu */
.przycisk-oferta__strzalka {
  flex: 0 0 auto;
  width: 30px;
  height: 33px;
  margin-right: 15px;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  font-size: 16px;
  line-height: 16px;
  text-align: center;
}
.przycisk-oferta__strzalka > i { font-size: 30px; line-height: 30px; font-style: normal; }
/* strzałka jak na danej stronie wzorcowej: w dół (podstrony oferty) albo w lewo (po obrocie
   przycisku wskazuje w górę — strona oferty i „Czystość techniczna”) */
.przycisk-oferta__strzalka > i::before { content: "\e878"; }
.przycisk-oferta--k-lewo .przycisk-oferta__strzalka > i::before { content: "\e879"; }
.przycisk-oferta__tekst {
  font-size: 18px;
  font-weight: 600;
  line-height: 18px;
  white-space: nowrap;
}
/* wersja angielska: dłuższy napis („PRODUCTS AND SERVICES”, 249 px zamiast 191) —
   przycisk dłuższy o różnicę, żeby napis się mieścił */
html[lang="en"] .przycisk-oferta__link { width: 334px; }

@media (max-width: 767px) {
  /* na telefonie: pasek na całą szerokość przy dolnej krawędzi */
  .przycisk-oferta, html[lang="en"] .przycisk-oferta { left: 0; right: 0; bottom: 0; width: auto; height: 63px; padding: 0; }
  .przycisk-oferta__obrot { display: block; width: auto; height: auto; padding: 0; transform: none; }
  .przycisk-oferta__link, html[lang="en"] .przycisk-oferta__link {
    position: static;
    justify-content: center;
    width: 100%;
    height: 63px;
    padding: 15px 20px;
    transform: none;
  }
  /* strzałka przed napisem: w lewo (podstrony oferty) albo w górę (strona oferty);
     na stronie „Czystość techniczna” paska na telefonie nie ma — jak na stronie wzorcowej */
  .przycisk-oferta .przycisk-oferta__strzalka > i::before { content: "\e879"; }
  .przycisk-oferta--t-gora .przycisk-oferta__strzalka > i::before { content: "\e877"; }
  .przycisk-oferta--t-brak { display: none; }
  .przycisk-oferta__tekst { font-size: 14px; line-height: 14px; }
}

/* --- kafel z ikoną (ikona z czcionki ikon zapisana jako SVG) --- */
.kafel-ikona { display: flex; flex-direction: column; padding: var(--kafel-g, 0) 0 var(--kafel-d, 0); }
.kafel-ikona--srodek { align-items: center; text-align: center; }
.kafel-ikona--obok { flex-direction: row; align-items: flex-start; gap: var(--kafel-odstep, 15px); }
.kafel-ikona--obok > .kafel-ikona__ikona { margin-top: var(--ikona-g, 0); }
/* kafel o stałej szerokości (jak na wzorcu — w węższej kolumnie nie maleje) */
.kafel-ikona[style*="--w-el"] { width: var(--w-el); max-width: 100%; }
/* pole widżetu z ramką, tłem albo cieniem: rysowane wokół kafla w zmierzonej odległości */
.kafel-ikona--ramka { position: relative; isolation: isolate; }
.kafel-ikona--ramka::before {
  content: "";
  position: absolute;
  z-index: -1;
  left: calc(-1 * var(--rk-l, 0px));
  top: calc(-1 * var(--rk-t, 0px));
  right: calc(-1 * var(--rk-p, 0px));
  bottom: calc(-1 * var(--rk-d, 0px));
  border-width: var(--rk-sz, 0);
  border-style: var(--rk-st, none);
  border-color: var(--rk-kol, transparent);
  border-radius: var(--rk-promien, 0);
  background: var(--rk-tlo, transparent);
  box-shadow: var(--rk-cien, none);
  pointer-events: none;
}
.kafel-ikona__ikona {
  flex: 0 0 auto;
  display: block;
  width: var(--szer-ikony, var(--rozmiar, 50px));
  height: var(--rozmiar, 50px);
  background: var(--kolor-ikony, currentColor);
  -webkit-mask: var(--ikona) center / contain no-repeat;
  mask: var(--ikona) center / contain no-repeat;
}
/* ikona ze znaku kroju ikon: pole 1em × 1em, znak w ::before na środku pola — jak na wzorcu */
.kafel-ikona__znak { position: relative; font-size: var(--rozmiar); font-style: normal; color: var(--kolor-ikony, currentColor); background: none; -webkit-mask: none; mask: none; }
.kafel-ikona__znak::before { position: absolute; left: 50%; transform: translateX(-50%); }
/* ikona z rysunku wektorowego (wzór na stronie, odwołanie <use>) — pole i rysunek jak na wzorcu */
.kafel-ikona__svg { background: none; -webkit-mask: none; mask: none; }
.kafel-ikona__svg > svg { display: block; width: var(--szer-ikony, var(--rozmiar)); height: var(--rozmiar); margin-top: var(--ikona-y, 0); fill: var(--kolor-ikony, currentColor); }
/* ikona SVG w polu wyższym od niej (jak dotąd: pod ikoną zostaje miejsce linii tekstu) */
.kafel-ikona__ikona[style*="--wys-ikony"] {
  height: var(--wys-ikony);
  -webkit-mask-position: center var(--ikona-y, 0px);
  mask-position: center var(--ikona-y, 0px);
  -webkit-mask-size: var(--szer-ikony, var(--rozmiar)) var(--rozmiar);
  mask-size: var(--szer-ikony, var(--rozmiar)) var(--rozmiar);
}
.kafel-ikona__tresc { width: 100%; }
.kafel-ikona__tytul,
.kafel-ikona__opis { --odst: 0px; --kolor: var(--kolor-tekst); margin: var(--odst) 0 0; color: var(--kolor);
  font-size: var(--rozmiar, 18px); font-weight: var(--waga, 400); line-height: var(--linia, 27px); }

/* wzory rysunków ikon (raz na stronę, odwołania <use>) — bez miejsca w układzie */
.wzory-ikon { position: absolute; width: 0; height: 0; overflow: hidden; }
/* znak z kroju ikon w zmierzonym miejscu pola ikony (początek znaku i górna krawędź linii
   o wysokości 1 em — jak na wzorcu) */
.znak-abs { font-size: var(--znak-rozmiar); font-style: normal; color: var(--kolor-ikony, currentColor); }
.znak-abs::before { position: absolute; left: var(--gx, 0); top: var(--gy, 0); line-height: 1; white-space: pre; }

/* ikona pozycji listy z czcionki ikon */
.ikona-listy {
  flex: 0 0 auto;
  display: inline-block;
  width: var(--szer, var(--rozmiar, 16px));
  height: var(--rozmiar, 16px);
  margin: var(--iy, 0) var(--iodst, 10px) 0 var(--ix, 0);
  background: var(--kolor-ikony, currentColor);
  -webkit-mask: var(--ikona) center / var(--znak-w, contain) var(--znak-h, ) no-repeat;
  mask: var(--ikona) center / var(--znak-w, contain) var(--znak-h, ) no-repeat;
}
/* lista stałej szerokości (wyśrodkowana marginesami automatycznymi) */
.lista[style*="--lista-w"] { width: var(--lista-w); max-width: 100%; }
/* linia pod pozycją listy (np. szara 1 px), przy dolnej krawędzi pozycji — jak na wzorcu */
.lista__pozycja--kreska { position: relative; }
.lista__pozycja--kreska::after {
  content: "";
  position: absolute;
  left: var(--kr-l, 0);
  bottom: 0;
  width: var(--kr-w, 100%);
  border-top: var(--kr-g, 1px) var(--kr-s, solid) var(--kr-k, #ddd);
}
/* znak z kroju albo rysunek wektorowy (bez maski) */
.ikona-listy.znak-abs, .ikona-listy--svg { background: none; -webkit-mask: none; mask: none; }
.ikona-listy.znak-abs { position: relative; }
.ikona-listy--svg { fill: var(--kolor-ikony, currentColor); }

/* --- galeria zdjęć (wpisy aktualności) ------------------------ */
/* Kafle w równych kolumnach; szerokość kafla liczona tak jak na stronie
   wzorcowej: (szerokość + odstęp − 0,3 px) / kolumny − odstęp, w dół do
   pełnego piksela. Pod ostatnim rzędem zostaje odstęp pionowy. */
.galeria {
  --k: var(--kol, 4);
  display: grid;
  grid-template-columns: repeat(var(--k), round(down, calc((100% + var(--odstep, 10px) - 0.3px) / var(--k) - var(--odstep, 10px)), 1px));
  column-gap: var(--odstep, 10px);
  row-gap: var(--odstep-pion, 10px);
  padding-bottom: var(--odstep-pion, 10px);
  align-items: start;          /* kafel ma wysokość swojego zdjęcia (jak na wzorcu), a nie rzędu siatki — rząd bywa o 1/64 px niższy */
}
.galeria__element {
  position: relative;
  display: block;
  overflow: hidden;
  cursor: pointer;
}
.galeria__element img { display: block; width: 100%; height: auto; }
.galeria__nakladka {
  position: absolute;
  inset: 0;
  background: rgba(3, 52, 112, .69);
  opacity: 0;
  transition: opacity .5s ease;
}
/* lupa na środku kafla (znak z kroju ikon w polu 18 × 18), pojawia się razem z nakładką */
.galeria__element::after {
  content: "\f002";
  position: absolute;
  left: calc(50% - 9px);
  top: calc(50% - 14.5px);
  width: 18px;
  height: 18px;
  font-family: 'ikony-pelne';
  font-size: 18px;
  font-style: normal;
  font-weight: 900;
  line-height: 18px;
  color: #fff;
  opacity: 0;
  transition: opacity .3s ease;
}
.galeria__element:hover .galeria__nakladka,
.galeria__element:hover::after,
.galeria__element:focus-visible .galeria__nakladka,
.galeria__element:focus-visible::after { opacity: 1; }
@media (max-width: 1366px) { .galeria { --k: var(--kol-laptop, var(--kol, 4)); } }
@media (max-width: 1024px) { .galeria { --k: var(--kol-tablet, 2); } }
@media (max-width: 767px)  { .galeria { --k: var(--kol-telefon, 1); } }

/* --- okno podglądu zdjęć ------------------------------------- */
/* Wygląd i ruch jak na stronie wzorcowej: przyciemnione tło, górny pasek
   z licznikiem i przyciskami, strzałki po bokach, podpis na dole, pasek
   postępu pokazu slajdów. Własny kod, bez zewnętrznych bibliotek. */
.podglad-tlo {
  position: fixed;
  inset: 0;
  z-index: 1040;
  background: rgba(0, 0, 0, .6);
  opacity: 0;
  transition: opacity .15s ease;
}
.podglad-tlo--widoczne { opacity: 1; }
.podglad {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1000000;
  width: 100%;
  height: 100%;
  text-align: left;
  direction: ltr;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  font-size: 16px;
  font-weight: 400;
  line-height: 1.5;
  color: #333;
  opacity: 0;
  outline: none;
  transition: opacity .15s ease;
}
.podglad--widoczny { opacity: 1; }
.podglad * { box-sizing: border-box; }
.podglad__wnetrze {
  position: relative;
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  margin: 0 auto;
  overflow: hidden;
}
.podglad__slajdy {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  white-space: nowrap;
  transition-duration: .6s;
  transition-timing-function: ease;
}
/* slajdy: widoczne tylko bieżący i sąsiedzi; przesuwanie w poziomie */
.podglad__slajd,
.podglad__ramka {
  position: absolute;
  display: inline-block;
  width: 100%;
  height: 100%;
  text-align: center;
}
.podglad__slajd { display: none; opacity: 0; backface-visibility: hidden; }
.podglad__slajd::before,
.podglad__ramka::before {
  content: "";
  display: inline-block;
  width: 1px;
  height: 50%;
  margin-right: -1px;
}
.podglad__slajd--poprzedni,
.podglad__slajd--nastepny,
.podglad__slajd--biezacy {
  display: inline-block;
  transition: transform .6s ease, opacity .6s ease;
  transition-duration: inherit;
  transition-timing-function: inherit;
}
.podglad__slajd--poprzedni { transform: translate3d(-100%, 0, 0); }
.podglad__slajd--nastepny  { transform: translate3d(100%, 0, 0); }
.podglad__slajd--biezacy   { transform: translate3d(0, 0, 0); opacity: 1; z-index: 1060; }
.podglad--bez-przejsc .podglad__slajd--poprzedni,
.podglad--bez-przejsc .podglad__slajd--nastepny,
.podglad--bez-przejsc .podglad__slajd--biezacy { transition: none; }
.podglad--przeciaganie .podglad__slajd--poprzedni,
.podglad--przeciaganie .podglad__slajd--nastepny,
.podglad--przeciaganie .podglad__slajd--biezacy { transition-duration: 0s; opacity: 1; }
.podglad__ramka { top: 0; right: 0; bottom: 0; left: 0; padding: 0 5px; }
.podglad__obraz {
  display: inline-block;
  vertical-align: middle;
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
}
/* zdjęcie wchodzi z pomniejszenia, gdy się wczyta */
.podglad .podglad__slajd .podglad__obraz {
  opacity: 0;
  transform: scale3d(.5, .5, .5);
  transform-origin: 50% 50%;
  transition: transform 250ms cubic-bezier(0, 0, .25, 1), opacity 250ms cubic-bezier(0, 0, .25, 1);
}
.podglad .podglad__slajd.podglad__slajd--wczytany .podglad__obraz { opacity: 1; transform: scale3d(1, 1, 1); }
/* powiększanie: po wczytaniu zdjęcie można przybliżać przyciskami i dwuklikiem */
.podglad .podglad__slajd--wczytany.podglad__slajd--powiekszalny .podglad__ramka {
  transform: translate3d(0, 0, 0);
  backface-visibility: hidden;
  transition: transform .3s cubic-bezier(0, 0, .25, 1);
}
.podglad .podglad__slajd.podglad__slajd--wczytany.podglad__slajd--powiekszalny .podglad__obraz {
  transform-origin: 0 0;
  backface-visibility: hidden;
  transition: transform .3s cubic-bezier(0, 0, .25, 1), opacity .15s;
}
.podglad--przesuwanie .podglad__slajd--powiekszalny .podglad__ramka,
.podglad--przesuwanie .podglad__slajd.podglad__slajd--wczytany.podglad__slajd--powiekszalny .podglad__obraz { transition-duration: 0s; }
.podglad--chwyt .podglad__obraz { cursor: grab; }
.podglad--chwytanie .podglad__obraz { cursor: grabbing; }

/* górny pasek */
.podglad__pasek {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1082;
  width: 100%;
  background: rgba(0, 0, 0, .8);
}
.podglad__pasek::after { content: ""; display: table; clear: both; }
.podglad__pasek,
.podglad__poprzednie,
.podglad__nastepne {
  opacity: 1;
  transition: transform .35s cubic-bezier(0, 0, .25, 1), opacity .35s cubic-bezier(0, 0, .25, 1), color .2s linear;
}
.podglad--ukryj .podglad__pasek     { opacity: 0; transform: translate3d(0, -10px, 0); }
.podglad--ukryj .podglad__poprzednie { opacity: 0; transform: translate3d(-10px, 0, 0); }
.podglad--ukryj .podglad__nastepne   { opacity: 0; transform: translate3d(10px, 0, 0); }
.podglad__ikona {
  float: right;
  display: block;
  width: 50px;
  height: 47px;
  margin: 0;
  padding: 10px 0;
  border: 0;
  background: transparent;
  color: #efefef;
  /* znak z kroju ikon podglądu 20 px w linii 27 px, na środku pola — jak na wzorcu */
  font-family: 'ikony-podglad';
  font-size: 20px;
  font-style: normal;
  font-weight: 400;
  line-height: 27px;
  text-align: center;
  cursor: pointer;
  text-decoration: none;
  transition: color .2s linear;
}
.podglad__ikona:hover { color: #fff; }
.podglad__zamknij::after     { content: "\e070"; }
.podglad__pobierz::after     { content: "\e0f2"; }
.podglad__pokaz::after       { content: "\e01d"; }
.podglad--pokaz .podglad__pokaz::after { content: "\e01a"; }
.podglad__pelny-ekran::after { content: "\e20c"; }
.podglad--pelny-ekran .podglad__pelny-ekran::after { content: "\e20d"; }
.podglad__powieksz::after    { content: "\e311"; }
.podglad__pomniejsz::after   { content: "\e312"; }
.podglad__pomniejsz          { opacity: .5; pointer-events: none; }
.podglad--powiekszony .podglad__pomniejsz { opacity: 1; pointer-events: auto; }
.podglad__rzeczywisty::after { content: "\e033"; }
.podglad__licznik {
  display: inline-block;
  vertical-align: middle;
  padding-top: 12px;
  padding-left: 20px;
  color: #efefef;
  opacity: .9;                 /* jak na wzorcu */
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  font-size: 14px;
  font-weight: 400;
  line-height: 21px;
}
/* strzałki po bokach */
.podglad__poprzednie,
.podglad__nastepne {
  position: absolute;
  top: 50%;
  z-index: 1080;
  display: block;
  width: 55px;
  height: 52px;
  margin: -10px 0 0;
  padding: 8px 10px 9px;
  border: 0;
  border-radius: 2px;
  background: transparent;
  color: #efefef;
  /* strzałka: znak z kroju ikon podglądu 35 px w linii 35 px — jak na wzorcu */
  font-family: 'ikony-podglad';
  font-size: 35px;
  font-style: normal;
  font-weight: 400;
  line-height: 35px;
  cursor: pointer;
  outline: none;
}
.podglad__poprzednie { left: 20px; }
.podglad__nastepne   { right: 20px; }
.podglad__poprzednie:hover,
.podglad__nastepne:hover { color: #fff; }
.podglad__poprzednie::after { content: "\e094"; }
.podglad__nastepne::after   { content: "\e095"; }
.podglad__poprzednie:focus-visible,
.podglad__nastepne:focus-visible,
.podglad__ikona:focus-visible { outline: 2px solid #fff; outline-offset: -2px; }
/* podpis pod zdjęciem */
.podglad__podpis {
  position: fixed;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1080;
  padding: 10px 40px;
  background: rgba(0, 0, 0, .8);
  color: #efefef;
  font-size: 14px;
  text-align: center;
}
.podglad__podpis:empty { display: none; }
/* pasek postępu pokazu slajdów */
.podglad__postep {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1083;
  width: 100%;
  height: 5px;
  background: #444;
  opacity: 0;
  transition: opacity 80ms ease;
}
.podglad--pokaz .podglad__postep { opacity: 1; }
.podglad__postep-pasek { width: 0; height: 5px; background: #a90707; }
.podglad__postep--start .podglad__postep-pasek { width: 100%; }

/* --- krótka kreska w kolumnie (np. pod tytułem wpisu) --------- */
.kreska { padding: var(--pad, 0) 0; }
.kreska::before {
  --szer: inherit;
  content: "";
  display: block;
  width: var(--szer, 100px);
  margin-left: var(--x, 0);
  border-top: var(--grubosc, 2px) var(--styl, solid) var(--kolor, var(--kolor-tekst));
}

/* --- metryczka wpisu: data publikacji z ikoną kalendarza ------ */
/* Ikona i tekst stoją w położeniu zmierzonym na stronie wzorcowej. */
.meta-wpisu {
  position: relative;
  height: var(--h, 30px);
  margin: 0;
  color: var(--kolor, var(--kolor-akcent));
  font-size: var(--rozmiar-tekstu, 16px);
  font-weight: var(--waga, 600);
  line-height: normal;
  white-space: nowrap;
}
.meta-wpisu__ikona {
  position: absolute;
  left: var(--ix, 0);
  top: var(--iy, 0);
  width: var(--iw, 20px);
  height: var(--ih, 24px);
  background: var(--kolor-ikony, currentColor);
  -webkit-mask: var(--ikona) center / 100% 100% no-repeat;
  mask: var(--ikona) center / 100% 100% no-repeat;
}
.meta-wpisu__ikona.znak-abs { background: none; -webkit-mask: none; mask: none; }
.meta-wpisu__tekst { position: absolute; left: var(--tx, 30px); top: var(--ty, 0); }

/* zdjęcie węższe od kolumny: dosunięte do prawej albo wyśrodkowane */
.tresc img.obraz--prawo { margin-left: auto; }
.tresc img.obraz--srodek { margin-left: auto; margin-right: auto; }

/* sekcja o najmniejszej wysokości (np. 40vh albo 500 px): wnętrze wypełnia ją całą;
   treść stoi u góry albo na środku, wiersz kolumn rozciąga się na całą wysokość
   (kolumny układa w nim ich własne wyrównanie) — jak na stronie wzorcowej */
.sekcja--min { display: flex; flex-direction: column; min-height: var(--min-wys, 0); }
.sekcja--min > .sekcja__wnetrze { flex: 1 0 auto; display: flex; flex-direction: column; justify-content: var(--wyr-tresci, flex-start); }
.sekcja--min > .sekcja__wnetrze > .kolumny-tresc { flex: var(--wiersz-rosnie, 1) 0 auto; }

/* niewidoczny punkt docelowy odnośnika „#…” (nie zajmuje miejsca) */
.tresc .kotwica { position: relative; top: var(--przes, 0); height: 0; margin: 0; }

/* --- lista wpisów na stronach archiwum (/category/…) ----------- */
/* Prosty układ jak na stronie wzorcowej: zdjęcie wpisu i skrót treści,
   systemowy krój pisma, szerokość 1140 / 800 / 600 / 500 px zależnie od okna. */
/* bez własnego kontekstu formatowania: dolny margines ostatniego akapitu łączy się
   z odstępem stopki, jak na stronie wzorcowej */
.archiwum {
  width: 100%;
  max-width: 1140px;
  margin: 0 auto;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  font-size: 16px;
  font-weight: 400;
  line-height: 1.5;
  color: #333;
}
.archiwum__tytul {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}
.archiwum__zdjecie img { width: 100%; max-height: 500px; object-fit: cover; }
.archiwum p { margin: 0 0 14.4px; }
.archiwum p a { color: #c36; text-decoration: underline; }
.archiwum p a:hover { color: #336; }
@media (max-width: 1199px) { .archiwum { max-width: 800px; } }
@media (max-width: 991px) {
  .archiwum { max-width: 600px; }
  .archiwum__zdjecie img { max-height: 400px; }
}
@media (max-width: 767px) { .archiwum { max-width: 500px; } }
@media (max-width: 575px) {
  .archiwum { max-width: none; padding: 0 10px; }
  .archiwum__zdjecie img { max-height: 300px; }
}

/* --- okno zgody na wąskim ekranie (progi jak na stronie wzorcowej) --- */
@media (max-width: 576px) {
  .ciasteczka { left: 0; bottom: 0; }
}
@media (max-width: 440px) {
  /* okno zajmuje całą szerokość, przyciski jeden pod drugim */
  .ciasteczka {
    right: 0;
    width: auto;
    max-width: none;
    padding: 20px 0;           /* ramka 1 px i zaokrąglenie zostają, jak na stronie wzorcowej */
  }
  .ciasteczka__opis { max-height: 40vh; overflow-y: scroll; }
  .ciasteczka__przyciski { margin-top: 0; }
  .ciasteczka__tytul, .ciasteczka__opis, .ciasteczka__przyciski { padding: 0 24px; }
  .ciasteczka__przyciski { flex-direction: column; }
  .ciasteczka__przycisk { width: 100%; margin: 10px 0 0; }
  .ciasteczka__przycisk--glowny { order: -1; margin-top: 16px; }
}
@media (max-width: 352px) {
  .ciasteczka__tytul { font-size: 16px; }
  .ciasteczka__opis p, .ciasteczka__przycisk { font-size: 12px; }
}

/* --- przyciski okna zgody: najechanie i fokus jak na wzorcu --- */
.ciasteczka__przycisk { cursor: pointer; }
.ciasteczka__przycisk:hover { opacity: .8; }
.ciasteczka__przycisk:focus-visible,
.zgody__zamknij:focus-visible,
.zgody__nazwa:focus-visible,
.zgody__wiecej:focus-visible { outline: 2px solid #1863dc; outline-offset: 2px; }
.ciasteczka__przycisk:focus:not(:focus-visible) { outline: 0; }

/* --- panel „Dostosuj preferencje dotyczące zgody” -------------- */
/* Wysuwa się od dołu na środek okna, pod nim półprzezroczyste tło.
   Kategorie rozwijają się po kliknięciu (lista plików cookie). */
.zgody-tlo {
  position: fixed;
  inset: 0;
  z-index: 99999999;
  background: #000;
  opacity: .4;
}
.zgody-tlo[hidden] { display: none; }
.zgody {
  position: fixed;
  top: 50%;
  left: 50%;
  z-index: 999999999;
  display: flex;
  max-width: 100%;
  margin: 0 auto;
  box-sizing: border-box;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  font-size: 16px;
  line-height: 24px;
  color: #212121;
  background: #fff;
  border-radius: 6px;
  box-shadow: rgba(0, 0, 0, .3) 0 32px 68px;
  visibility: hidden;
  transform: translate(-50%, 100%);
  outline: none;
}
.zgody[hidden] { display: none; }
.zgody--otwarte { visibility: visible; transform: translate(-50%, -50%); transition: 1s; }
.zgody__centrum {
  display: flex;
  flex: 1 1 0;
  flex-direction: column;
  width: 845px;
  max-height: 79vh;
  overflow: hidden;
  color: #212121;
  background: #fff;
  border-color: #f4f4f4;
  border-radius: 6px;
}
.zgody__naglowek {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 22px 24px;
  border-bottom: 1px solid;
  border-color: inherit;
}
.zgody__tytul { font-size: 18px; font-weight: 700; line-height: 24px; }
.zgody__zamknij {
  width: 10px;
  height: 10px;
  margin: 0;
  padding: 0;
  background: #828ea2;
  cursor: pointer;
  -webkit-mask: url("ikony/zamknij.svg") center / contain no-repeat;
  mask: url("ikony/zamknij.svg") center / contain no-repeat;
}
.zgody__tresc { flex: 1 1 0%; padding: 0 24px; overflow: auto; box-sizing: border-box; border-color: inherit; }
.zgody__opis {
  padding: 12px 0;
  font-size: 14px;
  font-weight: 400;
  line-height: 24px;
  border-bottom: 1px solid;
  border-color: inherit;
}
.zgody__opis p { margin: 0 0 .9rem; overflow-wrap: break-word; }
.zgody__opis .zgody__krotko { margin-bottom: 0; }
.zgody__krotko[hidden], .zgody__pelny[hidden] { display: none; }
.zgody__wiecej {
  margin: 0;
  padding: 0;
  font: inherit;
  font-size: 14px;
  line-height: 24px;
  color: #1863dc;
  white-space: nowrap;
  background: transparent;
  border: 1px solid transparent;   /* niewidoczna ramka przycisku — podnosi wiersz tak jak na wzorcu */
  cursor: pointer;
}
.zgody__kategorie { margin-bottom: 10px; border-color: inherit; }
.zgody__kategoria { border-bottom: 1px solid; border-color: inherit; }
.zgody__kategoria:last-child { border-bottom: 0; }
.zgody__pozycja { display: flex; margin-top: 10px; }
.zgody__szewron { position: relative; margin-right: 22px; cursor: pointer; }
.zgody__szewron i::before {
  content: "";
  position: absolute;
  top: 8px;
  width: 6px;
  height: 6px;
  border-right: 1.4px solid;
  border-bottom: 1.4px solid;
  transform: rotate(-45deg);
  transition: .2s ease-in-out;
}
.zgody__kategoria--otwarta .zgody__szewron i::before { transform: rotate(45deg); }
.zgody__naglowek-kategorii { width: 100%; cursor: pointer; }
.zgody__wiersz { display: flex; align-items: center; justify-content: space-between; }
.zgody__nazwa {
  margin: 0;
  padding: 0;
  font: inherit;
  font-size: 16px;
  font-weight: 700;
  line-height: 24px;
  color: #212121;
  background: none;
  border: 0;
  cursor: pointer;
}
.zgody__zawsze { font-size: 14px; font-weight: 600; line-height: 24px; color: #008000; }
.zgody__opis-kategorii { margin: 10px 0 16px; font-size: 14px; line-height: 24px; }
.zgody__opis-kategorii p { margin: 0; overflow-wrap: break-word; }
.zgody__lista { display: none; }
.zgody__kategoria--otwarta .zgody__lista { display: block; margin-bottom: 16px; padding: 0 22px; }
.zgody__tabela { background: #f4f4f4; border-radius: 6px; }
.zgody__pusto { margin: 0; padding: 10px; font-size: 12px; line-height: 24px; color: inherit; }
.zgody__stopka { position: relative; border-color: inherit; }
.zgody__cien {
  position: absolute;
  bottom: calc(100% - 1px);
  display: block;
  width: 100%;
  height: 40px;
  background: linear-gradient(rgba(255, 255, 255, 0) 0%, #fff 100%);
}
.zgody__przyciski {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  padding: 22px 24px;
  border-top: 1px solid;
  border-color: inherit;
}
.zgody__przyciski .ciasteczka__przycisk { flex: 1 1 auto; max-width: 100%; height: auto; padding: 8px; }
@media (max-width: 845px) { .zgody { max-width: calc(100% - 16px); } }
@media (max-width: 576px) {
  .zgody { max-width: 100%; }
  .zgody__centrum { max-height: 100vh; }
  .zgody__przyciski { flex-direction: column; }
  .zgody__kategoria--otwarta .zgody__lista { padding-right: 0; }
  .zgody__przyciski .ciasteczka__przycisk { width: 100%; margin: 10px 0 0; }
  .zgody__przyciski [data-zgoda="akceptuj"] { order: 1; margin-top: 0; }
  .zgody__przyciski [data-zgoda="zapisz"] { order: 2; }
  .zgody__przyciski [data-zgoda="odrzuc"] { order: 3; }
}
@media (max-width: 425px) {
  .zgody__szewron { margin-right: 15px; }
  .zgody__kategoria--otwarta .zgody__lista { padding: 0 15px; }
}
@media (max-width: 352px) {
  .zgody__tytul { font-size: 16px; }
  .zgody__naglowek { padding: 16px 24px; }
  .zgody__opis, .zgody__opis *, .zgody__opis-kategorii, .zgody__opis-kategorii *, .zgody__zawsze, .zgody__wiecej { font-size: 12px; }
  .zgody__nazwa { font-size: 14px; }
}

/* --- okrągły przycisk powrotu do ustawień zgody (lewy dolny róg) --- */
.zgody-powrot {
  position: fixed;
  /* pismo podpowiedzi jak w dotychczasowym oknie zgody (systemowe, 16/24) */
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  font-size: 16px;
  line-height: 24px;
  bottom: 15px;
  left: 15px;
  z-index: 999999;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 45px;
  height: 45px;
  background: #0056a7;
  border-radius: 50%;
  cursor: pointer;
}
.zgody-powrot[hidden] { display: none; }
.zgody-powrot__przycisk {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: 0;
  background: none;
  border: 0;
  cursor: pointer;
}
.zgody-powrot__przycisk img { width: 30px; height: 30px; margin: 0; }
.zgody-powrot__przycisk:focus:not(:focus-visible) { outline: 0; }
.zgody-powrot:hover::before {
  content: attr(data-podpowiedz);
  position: absolute;
  left: calc(100% + 7px);
  width: max-content;
  padding: 4px 8px;
  font-size: 12px;
  line-height: 16px;
  color: #fff;
  background: #4e4b66;
  border-radius: 4px;
}
.zgody-powrot:hover::after {
  content: "";
  position: absolute;
  left: calc(100% + 2px);
  border-width: 5px 5px 5px 0;
  border-style: solid;
  border-color: transparent #4e4b66 transparent transparent;
}
/* punkty docelowe kotwic stojące między sekcjami (pas bez wysokości, nie zmienia układu) */
.kotwice-pas { position: relative; display: flow-root; height: 0; }
.kotwice-pas > .kotwica { position: absolute; top: var(--przes, 0); left: 0; width: 1px; height: 0; }

/* --- przycisk z tekstem i strzałką (np. „Dowiedz się więcej”) -------------- */
/* Stała szerokość jak na stronie wzorcowej; po najechaniu zmienia kolor od razu. */
.przycisk-ikona {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--szer, auto);
  max-width: 100%;
  padding: var(--pad, 20px 30px);
  font-size: 16px;
  font-weight: 400;
  line-height: 16px;
  color: var(--kolor, #fff);
  background: var(--tlo, var(--kolor-akcent));
  border: var(--ramka-grubosc, 1px) solid var(--ramka, var(--tlo));
  text-decoration: none;
}
.przycisk-ikona:hover {
  color: var(--kolor-hover, var(--kolor, #fff));
  background: var(--tlo-hover, var(--tlo));
  border-color: var(--ramka-hover, var(--ramka));
}
.przycisk-ikona__tekst { display: block; }
/* strzałka: znak 30 px w linii 16 px pisma systemowego (pole 30 × 33) — jak na wzorcu */
.przycisk-ikona__strzalka {
  display: block;
  flex: 0 0 30px;
  width: 30px;
  height: 33px;
  margin-left: var(--odstep-ikony, 20px);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  font-size: 16px;
  line-height: 16px;
  text-align: center;
}
.przycisk-ikona__strzalka > i { font-size: var(--rozmiar-ikony, 30px); line-height: var(--rozmiar-ikony, 30px); font-style: normal; }

/* --- nagłówek z drugim logo (strony oferty: techniczna, mikrobiologiczna, gazowa) --- */
/* Jak na stronie wzorcowej: logo P4C w kolumnie 15%, drugie logo w kolumnie 20%
   (wyśrodkowane), menu w reszcie — przy 1400 px łamie się na dwa wiersze. */
.naglowek--dwa-loga .naglowek__pas { height: auto; }
.naglowek--dwa-loga .naglowek__wnetrze { column-gap: 10px; justify-content: flex-start; }
.naglowek--dwa-loga .naglowek__kolumna-logo {
  flex: 0 0 15%;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  padding: 10px;
}
.naglowek--dwa-loga .naglowek__logo { margin-top: 0; padding: 10px 0 0; }
.naglowek--dwa-loga .naglowek__kolumna-logo--druga { flex-basis: 20%; align-items: center; }
.naglowek--dwa-loga .menu { flex: 1 1 0; min-width: 0; }
.naglowek--dwa-loga .menu__lista { flex-wrap: wrap; justify-content: flex-end; }
/* laptop: drugie logo 135 px w kolumnie 14%, menu w kolumnie 65% — pozycje co 12 px, linki 20 px w pionie;
   od ok. 1265 px menu mieści się w jednym wierszu, niżej ostatnie pozycje przechodzą w całości do drugiego
   (jak na stronie wzorcowej) */
@media (min-width: 1025px) and (max-width: 1366px) {
  .naglowek--dwa-loga .naglowek__kolumna-logo--druga { flex-basis: 14%; }
  .naglowek--dwa-loga .menu { flex: 0 0 65%; align-items: center; }
  .naglowek--dwa-loga .menu__pozycja { margin: 0 12px; }
  .naglowek--dwa-loga .menu__pozycja:first-child { margin-left: 0; }
  .naglowek--dwa-loga .menu__pozycja:last-child { margin-right: 0; }
  .naglowek--dwa-loga .menu__pozycja > a { padding: 20px 0; }
  .naglowek--dwa-loga .menu__pozycja > a::after { bottom: 13px; }   /* kreska 7 px pod tekstem, jak przy odstępie 40 px (33 px) */
}
@media (max-width: 1024px) {
  .naglowek--dwa-loga .naglowek__wnetrze { align-items: center; }
  .naglowek--dwa-loga .naglowek__kolumna-logo { flex-basis: 20%; align-self: stretch; padding: 10px; }
  .naglowek--dwa-loga .naglowek__kolumna-logo--druga { align-self: center; }
}
@media (max-width: 767px) {
  .naglowek--dwa-loga .naglowek__wnetrze { flex-wrap: wrap; row-gap: 10px; }
  .naglowek--dwa-loga .naglowek__kolumna-logo { flex-basis: 46%; }
  .naglowek--dwa-loga .naglowek__kolumna-logo--druga { flex-basis: 50%; }
  .naglowek--dwa-loga .menu { flex: 0 0 100%; padding-right: 10px; }   /* przycisk menu 10 px od prawej krawędzi pola (jak na wzorcu) */
}

/* --- logo P4C: obrazek w tabeli, jak na stronie wzorcowej --- */
/* Wzorzec trzyma logo w tabeli (pole 100% szerokości, najwyżej 170 px, na telefonie 130 px). Przeglądarka
   liczy wtedy najpierw wysokość z szerokości pola, a potem szerokość z tej wysokości, obie zaokrąglone
   w dół do 1/64 px — logo wychodzi o ułamek piksela węższe od pola. Ten sam układ daje te same wymiary
   przy każdej szerokości okna. */
/* tabela w wierszu tekstu (jak na wzorcu: inline-table, overflow hidden) — wysokość pola logo to wiersz o czcionce
   systemowej 16/24 px: przy niskim logo (np. 16 px drugiego logo strony gazowej) wiersz jest wyższy od obrazka */
.naglowek__logo-tabela { display: inline-table; position: relative; overflow: hidden; }
:where(.naglowek:not(.naglowek--stary)) .naglowek__logo {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
}
.naglowek .naglowek__logo-pole { display: block; width: 100%; max-width: 170px; }
.naglowek .naglowek__logo-pole img { display: block; width: auto; max-width: 100%; height: auto; }
/* drugie logo (strony oferty) do 1366 px najwyżej 135 px, na telefonie oba logo najwyżej 130 px */
@media (max-width: 1366px) {
  .naglowek .naglowek__kolumna-logo--druga .naglowek__logo-pole { max-width: 135px; }
}
@media (max-width: 767px) {
  .naglowek .naglowek__logo-pole,
  .naglowek .naglowek__kolumna-logo--druga .naglowek__logo-pole { max-width: 130px; }
}

/* --- górna karuzela stron oferty (zdjęcia branż z etykietą) -------------- */
/* Jak na stronie wzorcowej: slajdy przenikają się w 1,5 s z lekkim
   przybliżeniem (wchodzący slajd z 125% do 100%), zmiana co 4 s; nad nimi
   stały napis z miękkim cieniem; kropki pod spodem (bieżąca pomarańczowa). */
.baner__wnetrze { position: relative; display: flow-root; }
/* karuzela jest osobną warstwą (z-index 0): warstwy slajdów (998/999) zostają w niej i nie wychodzą ponad
   nagłówek z rozwiniętym panelem „Nasza oferta” — jak na wzorcu, gdzie cały baner leży na warstwie 1 */
.baner__karuzela { position: relative; z-index: 0; height: 500px; overflow: hidden; }
.baner__slajd {
  position: absolute;
  inset: 0;
  z-index: 998;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  padding-left: 100px;
  background: var(--tlo-obraz, none) var(--tlo-poz, 50% 50%) / cover no-repeat;
  opacity: 0;
  transform: scale(1.25);
  transition: opacity 1.5s ease, transform 1.5s ease;
}
.baner__slajd--aktywny { z-index: 999; opacity: 1; transform: none; }
/* niebieska półprzezroczysta warstwa na zdjęciu */
.baner__slajd::before {
  content: "";
  position: absolute;
  inset: 0;
  background-color: var(--nakladka, transparent);
  /* obrazek nakładki (np. blady napis w tle sekcji) — jak na stronie wzorcowej */
  background-image: var(--nakladka-obraz, none);
  background-position: var(--nakladka-poz, center);
  background-size: var(--nakladka-rozm, auto);
  background-repeat: var(--nakladka-powt, no-repeat);
  background-attachment: var(--nakladka-moc, scroll);
  opacity: var(--nakladka-op, 0);
}
/* etykieta wjeżdża z lewej, gdy jej slajd stanie się bieżący (po przejściu) */
.baner__etykieta {
  position: relative;
  visibility: hidden;
  margin: 150px 0 0;
  padding: 20px;
  font-size: 30px;
  font-weight: 600;
  line-height: 30px;
  color: #fff;
  background: #f85c1e;
}
.baner__etykieta--wjazd { visibility: visible; animation: baner-wjazd 1.25s both; }
@keyframes baner-wjazd {
  from { opacity: 0; transform: translate3d(-100%, 0, 0); }
  to { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) { .baner__etykieta--wjazd { animation: none; } }
.baner__napis { position: absolute; top: 0; left: 0; right: 0; z-index: 1; padding: 110px 0 0 100px; }   /* nad karuzelą, pod nagłówkiem */
.baner__tytul {
  margin: 0;
  font-size: 50px;
  font-weight: 700;
  line-height: 60px;
  color: #fff;
  text-shadow: rgba(0, 0, 0, .3) 0 0 25px;
}
.baner__kropki { display: flex; justify-content: center; margin: 15px 0; padding: 0; list-style: none; }
.baner__kropki li { width: 22px; height: 22px; margin: 5px; }
.baner__kropki button { display: flex; align-items: center; justify-content: center; width: 22px; height: 22px; padding: 0; background: none; cursor: pointer; }
/* kropka: znak koła z kroju ikon 11 px w polu 11 × 11 na środku przycisku — jak na wzorcu */
.baner__kropki button::before { content: "\f111"; display: block; width: 11px; height: 11px; font-family: 'ikony-pelne'; font-size: 11px; font-style: normal; font-weight: 900; line-height: 11px; color: var(--kolor-akcent); }
.baner__kropki button[aria-current="true"]::before { color: #f85c1e; }
/* laptop: baner 400 px, tytuł 40/50 px (jak na stronie wzorcowej) */
@media (max-width: 1366px) {
  .baner__karuzela { height: 400px; }
  .baner__tytul { font-size: 40px; line-height: 50px; }
}
@media (max-width: 1024px) {
  .baner__karuzela { height: 400px; }
  .baner__slajd { padding-left: 50px; }
  .baner__etykieta { font-size: 20px; line-height: 20px; }
  .baner__napis { padding: 138px 0 0 50px; }
  .baner__tytul { font-size: 35px; line-height: 42px; }
}
@media (max-width: 767px) {
  .baner__slajd { padding-left: 20px; }
  .baner__etykieta { margin-top: 20px; font-size: 18px; line-height: 18px; }
  .baner__napis { padding: 80px 0 0 20px; }
  .baner__tytul { font-size: 25px; line-height: 32.5px; }
}

/* Wejście bloków przy przewijaniu — te same ruchy, czasy i opóźnienia co dotąd.
   Blok czeka niewidoczny (tylko gdy działa skrypt strony); droga ruchu to wysokość
   bloku powiększona o --wejscie-zapas (odstępy, które dawny blok miał w środku). */
.js [data-wejscie]:not(.wejscie) { visibility: hidden; }
.wejscie { animation-duration: 1.25s; }
.wejscie--pojaw { animation-name: wejscie-pojaw; }
.wejscie--od-dolu { animation-name: wejscie-od-dolu; }
.wejscie--z-gory { animation-name: wejscie-z-gory; }
@keyframes wejscie-pojaw {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes wejscie-od-dolu {
  from { opacity: 0; transform: translate3d(0, calc(100% + var(--wejscie-zapas, 0px)), 0); }
  to { opacity: 1; transform: none; }
}
@keyframes wejscie-z-gory {
  from { transform: translate3d(0, calc(-100% - var(--wejscie-zapas, 0px)), 0); visibility: visible; }
  to { transform: translate3d(0, 0, 0); }
}
@media (prefers-reduced-motion: reduce) { .wejscie { animation: none !important; } }
/* grupa kolejnych elementów kolumny wchodząca razem — odstępy jak w kolumnie */
.wejscie-grupa { display: flow-root; }
.tresc .wejscie-grupa > * { margin: var(--odst, 0) var(--mr, 0) 0 var(--ml, 0); }

/* elementy ukryte przy danej szerokości ekranu (tak jak na stronie wzorcowej) */
@media (min-width: 1367px) { .ukryj-komputer { display: none !important; } }
@media (min-width: 1025px) and (max-width: 1366px) { .ukryj-laptop { display: none !important; } }
@media (min-width: 768px) and (max-width: 1024px) { .ukryj-tablet { display: none !important; } }
@media (max-width: 767px) { .ukryj-telefon { display: none !important; } }

/* --- karuzela zdjęć (przewijane zdjęcia ze strzałkami i kropkami) ---------- */
/* Okno pokazuje --pokaz zdjęć naraz (komputer / tablet / telefon — jak dotąd);
   każde zdjęcie ma boczne odstępy, strzałki stoją w połowie wysokości okna,
   kropki pod oknem (bieżąca większa, w kolorze akcentu). Przesuwaniem, pętlą
   i samoczynną zmianą zajmuje się skrypt strony. */
.karuzela-zdjec { padding: var(--k-pad, 0); }
.karuzela-zdjec__ramka { position: relative; margin: var(--k-mar, 0); }
.karuzela-zdjec__okno { position: relative; overflow: hidden; touch-action: pan-y; }
.karuzela-zdjec__tor { display: flex; }
.karuzela-zdjec__slajd { flex: 0 0 calc(100% / var(--pokaz, 1)); min-width: 0; padding: 0 var(--k-slajd-r, 0) 0 var(--k-slajd-l, 0); }
.karuzela-zdjec__slajd img { display: block; width: 100%; height: auto; -webkit-user-drag: none; user-select: none; }
.karuzela-zdjec--przewijana .karuzela-zdjec__slajd { flex-basis: var(--szer-slajdu); }
.karuzela-zdjec--przeciaganie .karuzela-zdjec__okno { cursor: grabbing; }
/* wszystkie zdjęcia mieszczą się w oknie: bez strzałek, ale z jedną kropką — jak na wzorcu */
.karuzela-zdjec--bez-nawigacji .karuzela-zdjec__strzalka { display: none; }
.karuzela-zdjec__strzalka {
  position: absolute;
  top: 50%;
  z-index: 999;
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--s-w, 40px);
  height: var(--s-h, 40px);
  padding: 0;
  font-size: var(--s-pismo, 15px);
  border: var(--s-ramka, 0);
  border-radius: var(--s-promien, 50%);
  background: var(--s-tlo, #f85c1e);
  transform: translateY(-50%);
  cursor: pointer;
}
.karuzela-zdjec__strzalka--wstecz { left: var(--s-bok, 0); }
.karuzela-zdjec__strzalka--dalej { right: var(--s-bok, 0); }
/* pole znaku jak na wzorcu (linia zerowej wysokości na środku przycisku), znak w zmierzonym miejscu */
.karuzela-zdjec__ikona {
  position: relative;
  display: block;
  width: var(--szer, 1em);
  height: var(--wys, 0);
  transition: color var(--s-czas, 0s);
}
/* strzałka po kliknięciu (zostaje zaznaczona) i po najechaniu — kolory jak na wzorcu, zmiana w --s-czas;
   tylko te własności, które wzorzec zmienia (zmienna podana przy strzałce) */
.karuzela-zdjec__strzalka { transition: all var(--s-czas, 0s); }
.karuzela-zdjec__strzalka[style*="--s-tlo-f:"]:focus { background-color: var(--s-tlo-f); }
.karuzela-zdjec__strzalka[style*="--s-ramka-f:"]:focus { border-color: var(--s-ramka-f); }
.karuzela-zdjec__strzalka[style*="--s-ikona-f:"]:focus .karuzela-zdjec__ikona { color: var(--s-ikona-f); }
.karuzela-zdjec__strzalka[style*="--s-tlo-h:"]:hover { background-color: var(--s-tlo-h); }
.karuzela-zdjec__strzalka[style*="--s-ramka-h:"]:hover { border-color: var(--s-ramka-h); }
.karuzela-zdjec__strzalka[style*="--s-ikona-h:"]:hover .karuzela-zdjec__ikona { color: var(--s-ikona-h); }
.karuzela-zdjec__kropki {
  position: absolute;
  left: 0;
  right: 0;
  bottom: var(--d-dol, -50px);
  display: block;
  margin: 0;
  padding: 0;
  list-style: none;
  text-align: center;
  /* pismo linii kropek jak na wzorcu (systemowe 16 px) — od niego zależy wysokość linii */
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  font-size: 16px;
  line-height: var(--d-linia, 24px);
}
.karuzela-zdjec__kropki li { position: relative; display: inline-flex; align-items: center; justify-content: center; margin: var(--d-li-mar, 5px 3px); font-size: 10px; line-height: 15px; }
.karuzela-zdjec__kropki button {
  position: relative;
  display: block;
  font-size: 0;               /* numer w przycisku bez wysokości linii (jak na wzorcu — od tego zależy położenie kropek) */
  line-height: 0;
  color: transparent;
  box-sizing: border-box;
  -webkit-appearance: button;
  appearance: button;         /* jak na wzorcu: od tego zależy linia bazowa pustego przycisku */
  width: var(--d-w, 20px);
  height: var(--d-h, 20px);
  padding: 5px;
  border: 0;
  background: transparent;
  cursor: pointer;
}
/* kropka: znak „•” z kroju ikon w polu 20 × 20 — rozmiar, linia, kolor, przezroczystość i skala jak na wzorcu */
.karuzela-zdjec__kropki button::before {
  content: "\2022";
  position: absolute;
  left: var(--d-zx, 0);
  top: var(--d-zy, 0);
  width: var(--d-zw, 20px);
  height: var(--d-zh, 20px);
  font-family: 'ikony-kropka';
  font-size: var(--d-rozmiar, 6px);
  font-style: normal;
  line-height: var(--d-zlinia, 20px);
  text-align: center;
  color: var(--d-kolor, #fff);
  opacity: var(--d-op, 1);
  transform: scale(var(--d-skala, 1));
}
.karuzela-zdjec__kropki li[aria-current="true"] button::before {
  left: var(--da-zx, var(--d-zx, 0));
  top: var(--da-zy, var(--d-zy, 0));
  width: var(--da-zw, var(--d-zw, 20px));
  height: var(--da-zh, var(--d-zh, 20px));
  font-size: var(--da-rozmiar, var(--d-rozmiar, 6px));
  line-height: var(--da-zlinia, var(--d-zlinia, 20px));
  color: var(--da-kolor, var(--d-kolor));
  opacity: var(--da-op, var(--d-op, 1));
  transform: scale(var(--da-skala, 1));
}
/* kropka po najechaniu: kolor, skala i przezroczystość jak na wzorcu (tylko tam, gdzie się zmieniają) */
.karuzela-zdjec__kropki li:not([aria-current="true"]) button:hover::before {
  color: var(--dh-kolor, var(--d-kolor, #fff));
  opacity: var(--dh-op, var(--d-op, 1));
  transform: scale(var(--dh-skala, var(--d-skala, 1)));
}

/* --- napis pisany litera po literze ------------------------------ */
/* Jak dotąd: napis w polu z tłem stoi, znika i pojawia się od nowa litera po literze
   (skrypt strony); litery jeszcze niewpisane nie zajmują miejsca, więc pole rośnie przy
   pisaniu. Blok napisu stoi w kolumnie na swoim miejscu i nie zajmuje wysokości, a nagłówek
   z polem jest przesunięty o --nad-y / --nad-x — na zdjęcie nad nim. Budowa i miary jak na
   stronie wzorcowej: nagłówek (krój systemowy, jego wysokość linii ustawia pole w pionie),
   w nim pole (tło, wewnętrzny odstęp, Montserrat) z oknem, w którym stoją słowa. */
.napis-nad { display: flow-root; position: relative; width: fit-content; max-width: 100%; }
.napis-pisany {
  margin: var(--nad-y, 0) 0 0 var(--nad-x, 0);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  font-size: var(--h-rozmiar, 28px);
  line-height: var(--h-linia, 1.2);
  font-weight: var(--h-waga, 500);
  color: var(--h-kolor, inherit);
  text-align: var(--h-wyr, left);
}
.napis-pisany__pole {
  display: inline-block;
  vertical-align: var(--pole-wyr, middle);
  padding: var(--pole-pad, 0);
  background: var(--pole-tlo, transparent);
  font-family: var(--czcionka);
  font-size: var(--rozmiar, 40px);
  line-height: var(--linia, 1.2);
  font-weight: var(--waga, 300);
  color: var(--kolor, inherit);
}
.napis-pisany__wnetrze { display: block; position: relative; overflow: hidden; text-align: left; }
.napis-pisany__slowo { position: absolute; top: 0; left: 0; display: inline-block; white-space: nowrap; font-weight: inherit; visibility: hidden; }
.napis-pisany__slowo--widoczne { position: relative; visibility: visible; }
.napis-pisany__slowo i { position: absolute; font-style: normal; visibility: hidden; }
.napis-pisany__slowo i.jest { position: relative; visibility: visible; }

/* pojawienie przy przewijaniu (jak dotąd): blok czeka niewidoczny, 20 px niżej, aż przy
   przewijaniu strony znajdzie się cały w oknie — wtedy w 0,2 s wjeżdża na miejsce (skrypt) */
.js .wejscie-przewin { opacity: 0; transform: translateY(20px); transition: opacity .2s ease-in, transform .2s ease-in; }
.js .wejscie-przewin.widoczny { opacity: 1; transform: translateY(0); }

/* --- kafel-odnośnik (zdjęcie w tle, po najechaniu powiększenie) ------ */
/* Cały kafel prowadzi pod adres. Po najechaniu kafel powiększa się (nad sąsiadami),
   a kafel z tyłem pokazuje niebieski tył z tytułem, który „przybliża się” z 75%. */
.kafel-link {
  position: relative;
  display: block;
  height: var(--h, 205px);
  overflow: hidden;
  background-color: var(--tlo, transparent);
  background-image: var(--tlo-obraz, none);
  background-position: var(--tlo-poz, center);
  background-size: var(--tlo-rozm, cover);
  background-repeat: var(--tlo-powt, no-repeat);
  transform: perspective(0px) scale(1);
  transition: transform var(--czas, .4s), box-shadow .3s;
}
.kafel-link:hover, .kafel-link:focus-visible { z-index: 10; transform: perspective(0px) scale(var(--skala, 1)); box-shadow: var(--cien-h, none); }
/* kafel bez tyłu (Nasza oferta): po najechaniu powiększa się gotowy obraz kafla, a nie zdjęcie
   rysowane od nowa w większej skali — tak jak dotąd (te same odcienie na krawędziach zdjęcia) */
.kafel-link:not(:has(.kafel-link__tyl)) { will-change: transform; }
/* napis niewidoczny, jak na wzorcu; w zmierzonym miejscu kafla, po najechaniu na niego lekki cień */
.kafel-link__napis {
  position: absolute;
  left: var(--nx, 25px);
  top: var(--ny, auto);
  bottom: 25px;
  padding: 5px 20px;
  font-family: var(--czcionka);
  font-size: 18px;
  font-weight: 400;
  line-height: 27px;
  letter-spacing: var(--n-odstep, normal);
  color: rgba(255, 255, 255, 0);
  transition: all var(--n-czas, 0s);
}
.kafel-link__napis[style*="--ny"] { bottom: auto; }
/* bardzo wąski telefon (do 360 px): jak na wzorcu napis ma linię 26 px zamiast 27, a kafel bez tyłu
   (jego wysokość wynika tam z napisu) jest o 1 px niższy */
@media (max-width: 360px) {
  .kafel-link__napis { line-height: 26px; }
  .kafel-link:not(:has(.kafel-link__tyl)) { height: calc(var(--h, 205px) - 1px); }
  /* kafel w drugiej kolumnie (podciągnięty o wysokość kafla) — o tyle mniej */
  .kafel-link:not(:has(.kafel-link__tyl))[style*="--odst-m: -105px"] { --odst-m: -104px !important; }
}
.kafel-link__napis:hover { box-shadow: var(--n-cien, none); }
.kafel-link__tyl {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--pad-tylu, 0);
  background: var(--tlo-tylu, transparent);
  text-align: center;
  opacity: 0;
  transform: scale(.75);
  transition: all var(--czas-tylu, .5s);
}
.kafel-link:hover .kafel-link__tyl, .kafel-link:focus-visible .kafel-link__tyl { opacity: 1; transform: scale(1); }
.kafel-link__tytul, .kafel-link__opis { display: block; font-size: var(--rozmiar); font-weight: var(--waga); line-height: var(--linia); color: var(--kolor); }
/* tytuł tyłu: odstęp nad nim (pusty wiersz na ikonę i margines) i pod nim — jak na wzorcu */
.kafel-link__tyl > .kafel-link__tytul { margin: var(--tyt-mt, 0) 0 var(--tyt-mb, 0); }

/* --- ozdobna kreska pod nagłówkiem (pasek i mały kwadrat obok) ---- */
.kreska-ozdobna { position: relative; height: var(--ko-wys, 4px); }
.kreska-ozdobna::before {
  content: "";
  position: absolute;
  top: var(--ko-y, 0);
  left: var(--ko-x, 0);
  width: var(--ko-szer, 100px);
  height: var(--ko-gr, 4px);
  background: var(--ko-kolor, currentColor);
}
.kreska-ozdobna--kwadrat::after {
  content: "";
  position: absolute;
  top: calc(var(--ko-y, 0px) + var(--ko-kw-y, 0px));
  left: calc(var(--ko-x, 0px) + var(--ko-kw-x, 0px));
  width: var(--ko-kw-w, 4px);
  height: var(--ko-kw-h, 4px);
  background: var(--ko-kw-kolor, currentColor);
}

/* --- galeria w równych kolumnach (np. certyfikaty) ------------------ */
/* Kafle obok siebie z odstępem z prawej i od dołu, jak dotąd; ostatni odstęp
   wychodzi poza pole galerii (ujemny margines siatki). */
.galeria-wp__siatka { margin: 0 calc(-1 * var(--odstep-x, 0px)) calc(-1 * var(--odstep-y, 0px)) 0; font-size: 0; line-height: 0; }
.galeria-wp__element {
  display: inline-block;
  vertical-align: top;
  width: calc(100% / var(--kol, 4));
  margin: 0;
  padding: 0 var(--odstep-x, 0) var(--odstep-y, 0) 0;
}
.galeria-wp__element a { display: block; }
.galeria-wp__element img { display: block; width: 100%; height: auto; border: var(--ramka-zdj, 0); }
/* jak na wzorcu: galeria o kilku kolumnach ma od 480 do 767 px dwie kolumny (poniżej 480 px — jedną,
   co zapisuje wariant telefonu) */
@media (min-width: 480px) and (max-width: 767px) {
  .galeria-wp.galeria-wp:not([style^="--kol: 1;"]) { --kol: 2 !important; }
}

/* --- siatka wpisów (aktualności) ------------------------------------ */
/* Karty w kolumnach (komputer 3, tablet 2, telefon 1 — jak dotąd), każda tak wysoka
   jak jej treść; zdjęcie przycięte do wysokości zależnej od szerokości karty, po
   najechaniu przykryte półprzezroczystym niebieskim. */
.wpisy-siatka { display: grid; grid-template-columns: repeat(var(--kol, 3), var(--kol-szer, minmax(0, 1fr))); align-items: start; }
.wpisy-siatka__karta { padding: var(--karta-pad, 10px); }
.wpisy-siatka__wnetrze { display: flex; flex-direction: column; background: var(--karta-tlo, #fff); }
.wpisy-siatka__media { position: relative; height: 0; padding-bottom: var(--media-h, 70%); overflow: hidden; }
/* położenie i powiększenie jak na wzorcu: środek przesunięty o 1 px, najpierw powiększenie 1,01 */
.wpisy-siatka__media img { position: absolute; top: calc(50% + 1px); left: calc(50% + 1px); width: 100%; height: 100%; object-fit: cover; transform: scale(1.01) translate(-50%, -50%); }
.wpisy-siatka__nakladka {
  position: absolute;
  inset: 0;
  background: var(--nak-kolor, rgba(23, 98, 251, .61));
  opacity: 0;
  visibility: hidden;
  transform: scale(.9);
  transition: all var(--nak-czas, .3s);
}
.wpisy-siatka__media:hover .wpisy-siatka__nakladka { opacity: 1; visibility: visible; transform: scale(1); }
/* strzałka na środku nakładki: znak z kroju ikon w polu jak na wzorcu (pismo systemowe, linia 1,5) */
.wpisy-siatka__nakladka { display: flex; align-items: center; justify-content: center; }
.wpisy-siatka__nakladka > i {
  display: block;
  width: var(--nak-ik-szer, auto);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  font-size: var(--nak-ik-rozmiar, 35px);
  font-style: normal;
  line-height: var(--nak-ik-linia, 52.5px);
  color: var(--nak-ik-kolor, #fff);
}
.wpisy-siatka__tresc { padding: var(--tresc-pad, 15px); }
.wpisy-siatka__tytul { margin: var(--tyt-mar, 10px 0 5px); font-size: var(--tyt-rozmiar, 25px); font-weight: var(--tyt-waga, 700); line-height: var(--tyt-linia, 30px); }
.wpisy-siatka__tytul a { color: var(--tyt-kolor, inherit); text-decoration: none; }
.wpisy-siatka__tytul a:hover { color: var(--tyt-kolor-h, var(--tyt-kolor, inherit)); }
.wpisy-siatka__wiecej { margin: var(--wi-mar, 15px 0 0); font-size: var(--wi-rozmiar, 18px); font-weight: var(--wi-waga, 500); line-height: var(--wi-linia, 27px); }
/* „Czytaj więcej” zmienia kolor płynnie (0,3 s), tytuł od razu — jak na stronie wzorcowej */
.wpisy-siatka__wiecej a { display: block; color: var(--wi-kolor, #1762fb); text-decoration: none; transition: .3s ease-in-out; }   /* odnośnik na całą szerokość karty, jak na wzorcu */
.wpisy-siatka__wiecej a:hover { color: var(--wi-kolor-h, var(--wi-kolor, #1762fb)); }

/* --- podgląd zdjęć galerii w równych kolumnach ----------------------- */
/* Jak dotąd: tło czarne 80%, u góry licznik i przyciski (20 px, co 44 px), strzałki
   w pasach 15% szerokości (telefon 20%), zdjęcie z odstępem 70 px i cieniem, tytuł
   przy dolnej krawędzi. Otwarcie: powiększenie z 30% w 0,3 s. */
.podglad-e {
  --ui: hsla(0, 0%, 93%, .9);
  --ui-najechane: #fff;
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: rgba(0, 0, 0, .8);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  line-height: 1.5;
  outline: 0;
}
.podglad-e__pokaz { position: relative; height: 100%; overflow: hidden; animation: podglad-e-wejscie .3s; }
@keyframes podglad-e-wejscie {
  from { opacity: 0; transform: scale3d(.3, .3, .3); }
  50% { opacity: 1; }
}
/* ikona: rysunek wektorowy 1em × 1em (wzór w dokumencie), kolor wypełnienia jak na wzorcu */
.podglad-e__ikona {
  display: block;
  width: 1em;
  height: 1em;
  fill: var(--ui);
}
.podglad-e__przycisk, .podglad-e__zamknij { padding: .25em; border: 0; background: none; font-size: 20px; line-height: 1; cursor: pointer; box-sizing: content-box; }
.podglad-e__przycisk:hover .podglad-e__ikona, .podglad-e__zamknij:hover .podglad-e__ikona, .podglad-e__strzalka:hover .podglad-e__ikona { fill: var(--ui-najechane); }
/* przycisk w pasku po kliknięciu ma systemowy pierścień zaznaczenia — jak na wzorcu */
.podglad-e__naglowek .podglad-e__przycisk:focus { outline: -webkit-focus-ring-color auto 5px; }
.podglad-e__zamknij { position: absolute; top: 0; right: .75em; z-index: 2; display: flex; margin-top: 13px; transition: all .3s; }
.podglad-e__naglowek {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 10;
  display: flex;
  flex-direction: row-reverse;
  align-items: center;
  width: 100%;
  padding: 15px 2.6em 15px 1em;
  font-size: 20px;
  color: var(--ui);
  transition: .3s;
}
.podglad-e__naglowek > .podglad-e__przycisk { margin: 0 .35em; }
.podglad-e__licznik { width: max-content; margin-right: auto; font-size: .75em; color: #fff; }
.podglad-e__tor { display: flex; height: 100%; gap: 100px; cursor: grab; }
.podglad-e__slajd { flex: 0 0 100%; display: flex; align-items: center; justify-content: center; height: 100%; padding: 70px; }
.podglad-e__zoom { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; transition: transform .3s; }
.podglad-e__zdjecie {
  max-width: 100%;
  max-height: 100%;
  border-radius: 2px;
  box-shadow: 0 0 30px rgba(0, 0, 0, .3), 0 0 8px -5px rgba(0, 0, 0, .3);
  user-select: none;
  -webkit-user-drag: none;
}
.podglad-e__strzalka {
  position: absolute;
  top: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 15%;
  height: 100%;
  font-size: 25px;
  cursor: pointer;
  transition: all .3s;
}
.podglad-e__strzalka--wstecz { left: 0; }
.podglad-e__strzalka--dalej { right: 0; }
.podglad-e__stopka { position: fixed; bottom: 0; left: 0; z-index: 5; width: 100%; padding: 15px 20px; color: var(--ui); text-align: center; transition: .3s; }
.podglad-e__tytul { margin: 0; font-size: 16px; font-weight: 700; }
.podglad-e__opis { margin: 0; font-size: 14px; }
.podglad-e--bez-ui .podglad-e__naglowek, .podglad-e--bez-ui .podglad-e__stopka { opacity: 0; pointer-events: none; }
.podglad-e--bez-ui .podglad-e__strzalka { opacity: 0; }
.podglad-e--powiekszenie .podglad-e__naglowek, .podglad-e--powiekszenie .podglad-e__stopka { background-color: rgba(0, 0, 0, .5); }
.podglad-e--powiekszenie .podglad-e__strzalka { opacity: 0; pointer-events: none; }
/* menu udostępniania */
.podglad-e__menu { position: absolute; width: 0; height: 0; overflow: hidden; background-color: transparent; transition: background-color .4s; }
.podglad-e__linki {
  position: absolute;
  top: 3em;
  right: 2.8em;
  display: block;
  min-width: 200px;
  padding: 14px 20px;
  border-radius: 3px;
  background-color: #fff;
  box-shadow: 0 4px 15px rgba(0, 0, 0, .3);
  opacity: 0;
  transform: scale(0);
  transform-origin: 90% 10%;
  transition: all .25s .1s;
}
.podglad-e__linki::before {
  content: "";
  position: absolute;
  top: 1px;
  right: .5em;
  display: block;
  border: .45em solid transparent;
  border-bottom-color: #fff;
  transform: translateY(-100%) scaleX(.7);
}
/* odnośnik w jednej linii 30 px: rysunek w tekście na linii bazowej, 9 px przed napisem — jak na wzorcu */
.podglad-e__link { display: block; font-size: 12px; line-height: 2.5; color: #0c0d0e; text-align: left; opacity: 0; transition: opacity .5s .1s; }
.podglad-e__link:hover { color: #000; }
.podglad-e__link .podglad-e__ikona { display: inline; vertical-align: baseline; width: 1.25em; height: 1.25em; margin-right: .75em; }
.podglad-e__link--facebook .podglad-e__ikona { fill: #3b5998; }
.podglad-e__link--x .podglad-e__ikona { fill: #1da1f2; }
.podglad-e__link--pinterest .podglad-e__ikona { fill: #bd081c; }
.podglad-e__link--pobierz .podglad-e__ikona { fill: #9da5ae; }
.podglad-e--udostepnianie .podglad-e__menu { top: 0; left: 0; width: 100vw; height: 100vh; background-color: rgba(0, 0, 0, .5); opacity: 1; cursor: default; }
.podglad-e--udostepnianie .podglad-e__linki { opacity: 1; transform: scale(1); }
.podglad-e--udostepnianie .podglad-e__link { opacity: 1; }
@media (max-width: 767px) {
  .podglad-e__slajd { padding: 70px 0; }
  .podglad-e__strzalka { width: 20%; }
  .podglad-e__strzalka--wstecz { justify-content: flex-start; }
  .podglad-e__strzalka--dalej { justify-content: flex-end; }
}

/* WARIANTY — początek (plik tworzy testy/warianty.mjs; nie zmieniać ręcznie) */
@media (max-width: 1366px) {
  [style^="--k-slajd-l:"], [style*="; --k-slajd-l:"] { --k-slajd: var(--k-slajd-l) !important; }
  [style^="--k-tlo-moc-l:"], [style*="; --k-tlo-moc-l:"] { --k-tlo-moc: var(--k-tlo-moc-l) !important; }
  [style^="--kr-l:"], [style*="; --kr-l:"] { --kr: var(--kr-l) !important; }
  [style^="--linia-l:"], [style*="; --linia-l:"] { --linia: var(--linia-l) !important; }
  [style^="--maks-l:"], [style*="; --maks-l:"] { --maks: var(--maks-l) !important; }
  [style^="--mar-l:"], [style*="; --mar-l:"] { --mar: var(--mar-l) !important; }
  [style^="--media-h-l:"], [style*="; --media-h-l:"] { --media-h: var(--media-h-l) !important; }
  [style^="--min-h-l:"], [style*="; --min-h-l:"] { --min-h: var(--min-h-l) !important; }
  [style^="--min-wys-l:"], [style*="; --min-wys-l:"] { --min-wys: var(--min-wys-l) !important; }
  [style^="--ml-l:"], [style*="; --ml-l:"] { --ml: var(--ml-l) !important; }
  [style^="--mr-l:"], [style*="; --mr-l:"] { --mr: var(--mr-l) !important; }
  [style^="--nakladka-moc-l:"], [style*="; --nakladka-moc-l:"] { --nakladka-moc: var(--nakladka-moc-l) !important; }
  [style^="--pad-l:"], [style*="; --pad-l:"] { --pad: var(--pad-l) !important; }
  [style^="--pad-dol-l:"], [style*="; --pad-dol-l:"] { --pad-dol: var(--pad-dol-l) !important; }
  [style^="--pad-gora-l:"], [style*="; --pad-gora-l:"] { --pad-gora: var(--pad-gora-l) !important; }
  [style^="--pad-lewo-l:"], [style*="; --pad-lewo-l:"] { --pad-lewo: var(--pad-lewo-l) !important; }
  [style^="--pad-prawo-l:"], [style*="; --pad-prawo-l:"] { --pad-prawo: var(--pad-prawo-l) !important; }
  [style^="--rk-l:"], [style*="; --rk-l:"] { --rk: var(--rk-l) !important; }
  [style^="--rozmiar-l:"], [style*="; --rozmiar-l:"] { --rozmiar: var(--rozmiar-l) !important; }
  [style^="--szer-wnetrza-l:"], [style*="; --szer-wnetrza-l:"] { --szer-wnetrza: var(--szer-wnetrza-l) !important; }
  [style^="--tlo-moc-l:"], [style*="; --tlo-moc-l:"] { --tlo-moc: var(--tlo-moc-l) !important; }
  [style^="--udzial-l:"], [style*="; --udzial-l:"] { --udzial: var(--udzial-l) !important; }
  [style^="--wiersz-rosnie-l:"], [style*="; --wiersz-rosnie-l:"] { --wiersz-rosnie: var(--wiersz-rosnie-l) !important; }
  [style^="--wyr-kol-l:"], [style*="; --wyr-kol-l:"] { --wyr-kol: var(--wyr-kol-l) !important; }
  [style^="--wys-l:"], [style*="; --wys-l:"] { --wys: var(--wys-l) !important; }
}
@media (max-width: 1024px) {
  [style^="--d-kolor-t:"], [style*="; --d-kolor-t:"] { --d-kolor: var(--d-kolor-t) !important; }
  [style^="--d-rozmiar-t:"], [style*="; --d-rozmiar-t:"] { --d-rozmiar: var(--d-rozmiar-t) !important; }
  [style^="--d-skala-t:"], [style*="; --d-skala-t:"] { --d-skala: var(--d-skala-t) !important; }
  [style^="--dh-skala-t:"], [style*="; --dh-skala-t:"] { --dh-skala: var(--dh-skala-t) !important; }
  [style^="--gy-t:"], [style*="; --gy-t:"] { --gy: var(--gy-t) !important; }
  [style^="--h-t:"], [style*="; --h-t:"] { --h: var(--h-t) !important; }
  [style^="--ikona-g-t:"], [style*="; --ikona-g-t:"] { --ikona-g: var(--ikona-g-t) !important; }
  [style^="--iodst-t:"], [style*="; --iodst-t:"] { --iodst: var(--iodst-t) !important; }
  [style^="--k-pad-t:"], [style*="; --k-pad-t:"] { --k-pad: var(--k-pad-t) !important; }
  [style^="--k-slajd-l-t:"], [style*="; --k-slajd-l-t:"] { --k-slajd-l: var(--k-slajd-l-t) !important; }
  [style^="--k-slajd-r-t:"], [style*="; --k-slajd-r-t:"] { --k-slajd-r: var(--k-slajd-r-t) !important; }
  [style^="--k-tlo-poz-t:"], [style*="; --k-tlo-poz-t:"] { --k-tlo-poz: var(--k-tlo-poz-t) !important; }
  [style^="--kafel-odstep-t:"], [style*="; --kafel-odstep-t:"] { --kafel-odstep: var(--kafel-odstep-t) !important; }
  [style^="--kier-t:"], [style*="; --kier-t:"] { --kier: var(--kier-t) !important; }
  [style^="--kol-t:"], [style*="; --kol-t:"] { --kol: var(--kol-t) !important; }
  [style^="--kol-szer-t:"], [style*="; --kol-szer-t:"] { --kol-szer: var(--kol-szer-t) !important; }
  [style^="--kolejnosc-t:"], [style*="; --kolejnosc-t:"] { --kolejnosc: var(--kolejnosc-t) !important; }
  [style^="--kurcz-t:"], [style*="; --kurcz-t:"] { --kurcz: var(--kurcz-t) !important; }
  [style^="--linia-t:"], [style*="; --linia-t:"] { --linia: var(--linia-t) !important; }
  [style^="--lista-rozmiar-t:"], [style*="; --lista-rozmiar-t:"] { --lista-rozmiar: var(--lista-rozmiar-t) !important; }
  [style^="--mar-t:"], [style*="; --mar-t:"] { --mar: var(--mar-t) !important; }
  [style^="--mar-d-t:"], [style*="; --mar-d-t:"] { --mar-d: var(--mar-d-t) !important; }
  [style^="--media-h-t:"], [style*="; --media-h-t:"] { --media-h: var(--media-h-t) !important; }
  [style^="--min-h-t:"], [style*="; --min-h-t:"] { --min-h: var(--min-h-t) !important; }
  [style^="--min-wys-t:"], [style*="; --min-wys-t:"] { --min-wys: var(--min-wys-t) !important; }
  [style^="--ml-t:"], [style*="; --ml-t:"] { --ml: var(--ml-t) !important; }
  [style^="--mr-t:"], [style*="; --mr-t:"] { --mr: var(--mr-t) !important; }
  [style^="--nad-y-t:"], [style*="; --nad-y-t:"] { --nad-y: var(--nad-y-t) !important; }
  [style^="--nakladka-poz-t:"], [style*="; --nakladka-poz-t:"] { --nakladka-poz: var(--nakladka-poz-t) !important; }
  [style^="--nakladka-rozm-t:"], [style*="; --nakladka-rozm-t:"] { --nakladka-rozm: var(--nakladka-rozm-t) !important; }
  [style^="--nx-t:"], [style*="; --nx-t:"] { --nx: var(--nx-t) !important; }
  [style^="--ny-t:"], [style*="; --ny-t:"] { --ny: var(--ny-t) !important; }
  [style^="--odst-t:"], [style*="; --odst-t:"] { --odst: var(--odst-t) !important; }
  [style^="--odstep-t:"], [style*="; --odstep-t:"] { --odstep: var(--odstep-t) !important; }
  [style^="--odstep-pion-t:"], [style*="; --odstep-pion-t:"] { --odstep-pion: var(--odstep-pion-t) !important; }
  [style^="--pad-dol-t:"], [style*="; --pad-dol-t:"] { --pad-dol: var(--pad-dol-t) !important; }
  [style^="--pad-gora-t:"], [style*="; --pad-gora-t:"] { --pad-gora: var(--pad-gora-t) !important; }
  [style^="--pad-l-t:"], [style*="; --pad-l-t:"] { --pad-l: var(--pad-l-t) !important; }
  [style^="--pad-lewo-t:"], [style*="; --pad-lewo-t:"] { --pad-lewo: var(--pad-lewo-t) !important; }
  [style^="--pad-prawo-t:"], [style*="; --pad-prawo-t:"] { --pad-prawo: var(--pad-prawo-t) !important; }
  [style^="--pokaz-t:"], [style*="; --pokaz-t:"] { --pokaz: var(--pokaz-t) !important; }
  [style^="--przes-t:"], [style*="; --przes-t:"] { --przes: var(--przes-t) !important; }
  [style^="--rk-t:"], [style*="; --rk-t:"] { --rk: var(--rk-t) !important; }
  [style^="--rozmiar-t:"], [style*="; --rozmiar-t:"] { --rozmiar: var(--rozmiar-t) !important; }
  [style^="--sep-d-t:"], [style*="; --sep-d-t:"] { --sep-d: var(--sep-d-t) !important; }
  [style^="--sep-g-t:"], [style*="; --sep-g-t:"] { --sep-g: var(--sep-g-t) !important; }
  [style^="--sep-l-t:"], [style*="; --sep-l-t:"] { --sep-l: var(--sep-l-t) !important; }
  [style^="--sep-r-t:"], [style*="; --sep-r-t:"] { --sep-r: var(--sep-r-t) !important; }
  [style^="--szer-t:"], [style*="; --szer-t:"] { --szer: var(--szer-t) !important; }
  [style^="--szer-ikony-t:"], [style*="; --szer-ikony-t:"] { --szer-ikony: var(--szer-ikony-t) !important; }
  [style^="--szer-wnetrza-t:"], [style*="; --szer-wnetrza-t:"] { --szer-wnetrza: var(--szer-wnetrza-t) !important; }
  [style^="--tyt-rozmiar-t:"], [style*="; --tyt-rozmiar-t:"] { --tyt-rozmiar: var(--tyt-rozmiar-t) !important; }
  [style^="--udzial-t:"], [style*="; --udzial-t:"] { --udzial: var(--udzial-t) !important; }
  [style^="--w-el-t:"], [style*="; --w-el-t:"] { --w-el: var(--w-el-t) !important; }
  [style^="--wi-rozmiar-t:"], [style*="; --wi-rozmiar-t:"] { --wi-rozmiar: var(--wi-rozmiar-t) !important; }
  [style^="--wiersz-rosnie-t:"], [style*="; --wiersz-rosnie-t:"] { --wiersz-rosnie: var(--wiersz-rosnie-t) !important; }
  [style^="--wyr-t:"], [style*="; --wyr-t:"] { --wyr: var(--wyr-t) !important; }
  [style^="--wyr-kol-t:"], [style*="; --wyr-kol-t:"] { --wyr-kol: var(--wyr-kol-t) !important; }
  [style^="--wyr-pion-t:"], [style*="; --wyr-pion-t:"] { --wyr-pion: var(--wyr-pion-t) !important; }
  [style^="--wyr-poz-t:"], [style*="; --wyr-poz-t:"] { --wyr-poz: var(--wyr-poz-t) !important; }
  [style^="--wyr-tresci-t:"], [style*="; --wyr-tresci-t:"] { --wyr-tresci: var(--wyr-tresci-t) !important; }
  [style^="--wys-t:"], [style*="; --wys-t:"] { --wys: var(--wys-t) !important; }
  [style^="--wys-ikony-t:"], [style*="; --wys-ikony-t:"] { --wys-ikony: var(--wys-ikony-t) !important; }
  [style^="--zawin-t:"], [style*="; --zawin-t:"] { --zawin: var(--zawin-t) !important; }
  [style^="--znak-rozmiar-t:"], [style*="; --znak-rozmiar-t:"] { --znak-rozmiar: var(--znak-rozmiar-t) !important; }
}
@media (max-width: 767px) {
  [style^="--d-dol-m:"], [style*="; --d-dol-m:"] { --d-dol: var(--d-dol-m) !important; }
  [style^="--d-kolor-m:"], [style*="; --d-kolor-m:"] { --d-kolor: var(--d-kolor-m) !important; }
  [style^="--d-li-mar-m:"], [style*="; --d-li-mar-m:"] { --d-li-mar: var(--d-li-mar-m) !important; }
  [style^="--d-rozmiar-m:"], [style*="; --d-rozmiar-m:"] { --d-rozmiar: var(--d-rozmiar-m) !important; }
  [style^="--d-skala-m:"], [style*="; --d-skala-m:"] { --d-skala: var(--d-skala-m) !important; }
  [style^="--dh-skala-m:"], [style*="; --dh-skala-m:"] { --dh-skala: var(--dh-skala-m) !important; }
  [style^="--gy-m:"], [style*="; --gy-m:"] { --gy: var(--gy-m) !important; }
  [style^="--h-m:"], [style*="; --h-m:"] { --h: var(--h-m) !important; }
  [style^="--ikona-g-m:"], [style*="; --ikona-g-m:"] { --ikona-g: var(--ikona-g-m) !important; }
  [style^="--kafel-odstep-m:"], [style*="; --kafel-odstep-m:"] { --kafel-odstep: var(--kafel-odstep-m) !important; }
  [style^="--kier-m:"], [style*="; --kier-m:"] { --kier: var(--kier-m) !important; }
  [style^="--kol-m:"], [style*="; --kol-m:"] { --kol: var(--kol-m) !important; }
  [style^="--kol-szer-m:"], [style*="; --kol-szer-m:"] { --kol-szer: var(--kol-szer-m) !important; }
  [style^="--kolejnosc-m:"], [style*="; --kolejnosc-m:"] { --kolejnosc: var(--kolejnosc-m) !important; }
  [style^="--kurcz-m:"], [style*="; --kurcz-m:"] { --kurcz: var(--kurcz-m) !important; }
  [style^="--linia-m:"], [style*="; --linia-m:"] { --linia: var(--linia-m) !important; }
  [style^="--lista-linia-m:"], [style*="; --lista-linia-m:"] { --lista-linia: var(--lista-linia-m) !important; }
  [style^="--lista-rozmiar-m:"], [style*="; --lista-rozmiar-m:"] { --lista-rozmiar: var(--lista-rozmiar-m) !important; }
  [style^="--lista-w-m:"], [style*="; --lista-w-m:"] { --lista-w: var(--lista-w-m) !important; }
  [style^="--maks-m:"], [style*="; --maks-m:"] { --maks: var(--maks-m) !important; }
  [style^="--mar-m:"], [style*="; --mar-m:"] { --mar: var(--mar-m) !important; }
  [style^="--mar-d-m:"], [style*="; --mar-d-m:"] { --mar-d: var(--mar-d-m) !important; }
  [style^="--media-h-m:"], [style*="; --media-h-m:"] { --media-h: var(--media-h-m) !important; }
  [style^="--min-h-m:"], [style*="; --min-h-m:"] { --min-h: var(--min-h-m) !important; }
  [style^="--min-wys-m:"], [style*="; --min-wys-m:"] { --min-wys: var(--min-wys-m) !important; }
  [style^="--ml-m:"], [style*="; --ml-m:"] { --ml: var(--ml-m) !important; }
  [style^="--mr-m:"], [style*="; --mr-m:"] { --mr: var(--mr-m) !important; }
  [style^="--nx-m:"], [style*="; --nx-m:"] { --nx: var(--nx-m) !important; }
  [style^="--ny-m:"], [style*="; --ny-m:"] { --ny: var(--ny-m) !important; }
  [style^="--odst-m:"], [style*="; --odst-m:"] { --odst: var(--odst-m) !important; }
  [style^="--odstep-m:"], [style*="; --odstep-m:"] { --odstep: var(--odstep-m) !important; }
  [style^="--odstep-pion-m:"], [style*="; --odstep-pion-m:"] { --odstep-pion: var(--odstep-pion-m) !important; }
  [style^="--pad-d-m:"], [style*="; --pad-d-m:"] { --pad-d: var(--pad-d-m) !important; }
  [style^="--pad-dol-m:"], [style*="; --pad-dol-m:"] { --pad-dol: var(--pad-dol-m) !important; }
  [style^="--pad-g-m:"], [style*="; --pad-g-m:"] { --pad-g: var(--pad-g-m) !important; }
  [style^="--pad-gora-m:"], [style*="; --pad-gora-m:"] { --pad-gora: var(--pad-gora-m) !important; }
  [style^="--pad-l-m:"], [style*="; --pad-l-m:"] { --pad-l: var(--pad-l-m) !important; }
  [style^="--pad-lewo-m:"], [style*="; --pad-lewo-m:"] { --pad-lewo: var(--pad-lewo-m) !important; }
  [style^="--pad-prawo-m:"], [style*="; --pad-prawo-m:"] { --pad-prawo: var(--pad-prawo-m) !important; }
  [style^="--pad-r-m:"], [style*="; --pad-r-m:"] { --pad-r: var(--pad-r-m) !important; }
  [style^="--pokaz-m:"], [style*="; --pokaz-m:"] { --pokaz: var(--pokaz-m) !important; }
  [style^="--ramka-kol-m:"], [style*="; --ramka-kol-m:"] { --ramka-kol: var(--ramka-kol-m) !important; }
  [style^="--ramka-st-m:"], [style*="; --ramka-st-m:"] { --ramka-st: var(--ramka-st-m) !important; }
  [style^="--ramka-sz-m:"], [style*="; --ramka-sz-m:"] { --ramka-sz: var(--ramka-sz-m) !important; }
  [style^="--rozmiar-m:"], [style*="; --rozmiar-m:"] { --rozmiar: var(--rozmiar-m) !important; }
  [style^="--s-h-m:"], [style*="; --s-h-m:"] { --s-h: var(--s-h-m) !important; }
  [style^="--s-pismo-m:"], [style*="; --s-pismo-m:"] { --s-pismo: var(--s-pismo-m) !important; }
  [style^="--s-w-m:"], [style*="; --s-w-m:"] { --s-w: var(--s-w-m) !important; }
  [style^="--szer-m:"], [style*="; --szer-m:"] { --szer: var(--szer-m) !important; }
  [style^="--tyt-mar-m:"], [style*="; --tyt-mar-m:"] { --tyt-mar: var(--tyt-mar-m) !important; }
  [style^="--udzial-m:"], [style*="; --udzial-m:"] { --udzial: var(--udzial-m) !important; }
  [style^="--w-el-m:"], [style*="; --w-el-m:"] { --w-el: var(--w-el-m) !important; }
  [style^="--wiersz-rosnie-m:"], [style*="; --wiersz-rosnie-m:"] { --wiersz-rosnie: var(--wiersz-rosnie-m) !important; }
  [style^="--wyr-m:"], [style*="; --wyr-m:"] { --wyr: var(--wyr-m) !important; }
  [style^="--wyr-kol-m:"], [style*="; --wyr-kol-m:"] { --wyr-kol: var(--wyr-kol-m) !important; }
  [style^="--wyr-pion-m:"], [style*="; --wyr-pion-m:"] { --wyr-pion: var(--wyr-pion-m) !important; }
  [style^="--wyr-poz-m:"], [style*="; --wyr-poz-m:"] { --wyr-poz: var(--wyr-poz-m) !important; }
  [style^="--wyr-tresci-m:"], [style*="; --wyr-tresci-m:"] { --wyr-tresci: var(--wyr-tresci-m) !important; }
  [style^="--wys-m:"], [style*="; --wys-m:"] { --wys: var(--wys-m) !important; }
  [style^="--zawin-m:"], [style*="; --zawin-m:"] { --zawin: var(--zawin-m) !important; }
  [style^="--znak-rozmiar-m:"], [style*="; --znak-rozmiar-m:"] { --znak-rozmiar: var(--znak-rozmiar-m) !important; }
}
/* WARIANTY — koniec */

/* blok „Kontakt” na stronie Czystość gazowa (WWW-0007): te same dane i układ co w stopce
   (logo z NIP, REGON, KRS | nazwa firmy, adres, telefon, e-mail), na jasnym tle sekcji */
.kontakt-firma { display: flex; flex-wrap: wrap; justify-content: center; align-items: flex-start; gap: 40px 120px; padding: 40px 20px 60px; color: #000; }
.kontakt-firma__kolumna { flex: 0 1 auto; max-width: 100%; }
.kontakt-firma__naglowek { margin: 0; font-size: 22px; font-weight: 700; line-height: 1.25; }
.kontakt-firma .stopka__dane { margin-top: 20px; }
.kontakt-firma .stopka__dane--ikony { margin-top: 0; }
.kontakt-firma .stopka__dane li { font-size: 18px; }
.kontakt-firma .ikona-mala { background: rgb(101, 179, 46); }
@media (max-width: 767px) {
  .kontakt-firma { gap: 30px; padding: 20px 20px 40px; }
  .kontakt-firma__naglowek { font-size: 18px; }
  .kontakt-firma .stopka__dane li { font-size: 16px; }
}

/* stopka bez logo (WWW-0007, Maciej 24.09 17:49): po lewej nazwa firmy z NIP, REGON, KRS, po prawej adres, telefon, e-mail */
.stopka__firma-nazwa { margin: 0; font-size: 18px; font-weight: 700; line-height: 1.35; }
.stopka__kolumna--firma .stopka__dane { margin-top: 20px; }
.stopka__kolumna--adres .stopka__dane--ikony { margin-top: 0; }

/* --- logo PARTS4CLEANING w miejscu logo P4C (WWW-0010) --- */
/* Obrazek zajmuje pole w proporcjach dawnego logo P4C (2560×969), a nowe, niższe logo (800×239) jest w nim wpisane
   i wyśrodkowane w pionie. Dzięki temu nagłówek ma tę samą wysokość co wcześniej na każdej szerokości okna, a flagi
   i przycisk menu na telefonie i tablecie zostają tam, gdzie były. Drugie logo (strony gazowa i mikrobiologiczna) bez zmian. */
.naglowek__kolumna-logo:not(.naglowek__kolumna-logo--druga) .naglowek__logo-pole img { aspect-ratio: 2560 / 969; object-fit: contain; }