/* ═══════════════════════════════════════════════════════════════════════════
   PTS - komponenty
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── 00 · intro marki ─────────────────────────────────────────────────────────
   Sekwencja z księgi (s. 18, „Wideo / Intro”): białe tło, logo wyłania się
   z lewej, zatrzymuje w centrum kadru, następnie powiększa się nieznacznie.
   Odtwarzane raz na sesję.                                                    */

/* Plansza powitalna zakrywa całą stronę, więc domyślnie jej nie ma i pojawia
   się tylko wtedy, gdy jest czym ją zdjąć. Klasę `js-motion` zakłada skrypt
   w nagłówku, a zdejmuje ją bezpiecznik przy nieudanym starcie `app.js` -
   przy wyłączonym JavaScripcie i przy prośbie o ograniczenie ruchu klasy nie
   ma wcale. Bez tego jedna nieudana odpowiedź serwera zostawiałaby
   odwiedzającego przed białym ekranem z logotypem. */
.intro { display: none; }

.js-motion .intro {
  position: fixed;
  inset: 0;
  z-index: var(--z-intro);
  display: grid;
  place-items: center;
  background: #fff;
  /* Plansza schodzi w górę jak kurtyna przejść; pomarańczowa krawędź przy
     dolnym brzegu to ten sam sygnał co na płachcie nawigacji. */
  border-bottom: 3px solid var(--orange);
  will-change: transform;
}
.intro__logo {
  width: min(46vw, 420px);
  will-change: transform, opacity;
}
.intro.is-done { pointer-events: none; }

/* ── 02 · nawigacja ────────────────────────────────────── */

/* Nawigacja nie jest paskiem przez cala szerokosc okna, tylko trzema
   wyspami unoszacymi sie nad trescia: znak, pozycje, sprawy boczne.
   Pasek od krawedzi do krawedzi klasdzie na stronie pozioma kreske i dzieli
   ja na dwie czesci, zanim ktokolwiek cokolwiek przeczyta. Wyspy leza NA
   stronie i ta zostaje jedna powierzchnia.

   Znak dostaje wlasna biala wyspe, bo ksiega (s. 5) dopuszcza wersje
   podstawowa wylacznie na bialym tle. Pozostale wyspy sa granatowe,
   z rozmyciem tla pod spodem - i to one, a nie przezroczystosc, niosa
   czytelnosc napisow nad dowolna sekcja, takze nad biala.

   Rozmiary ida przez zmienne, wiec stan po przewinieciu zmienia je w jednym
   miejscu, zamiast powtarzac caly uklad.                                    */
.nav {
  --wyspa-y: clamp(0.7rem, 1.4vw, 1.15rem);
  --wyspa-pad: 0.55rem;
  /* Pietro torow nad menu: miesci sklad, czyli niski bialy pociag
     z logo (41 px pudla, kola za fartuchem), z oddechem nad nim. */
  --tor-strefa: 4rem;
  --wyspa-cien: 0 10px 34px rgba(6, 5, 22, 0.30);
  --nav-szklo: rgba(19, 16, 56, 0.84);

  position: fixed;
  top: 0; left: 0;
  z-index: var(--z-nav);
  width: 100%;
  padding-block: var(--wyspa-y);
  /* Przerwy miedzy wyspami naleza do strony, nie do nawigacji. */
  pointer-events: none;
}

.nav__inner {
  position: relative;
  display: flex;
  align-items: center;
  gap: clamp(0.5rem, 1.4vw, 1.1rem);
  max-width: var(--shell);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* Na szerokim ekranie wyspa pozycji stoi w osi okna, w ktorej stoi tez
   tresc hero. Centrowanie marginesami liczy sie miedzy sasiadami, a znak
   (200 px z ksiegi) jest szerszy od wyspy jezykow - menu zjezdzalo ~55 px
   w prawo wzgledem tytulu (Oliver, 2026-09-07). Siatka 1fr auto 1fr trzyma
   os; przy ciasnym oknie kolumna znaku rosnie do jego szerokosci i menu
   ustepuje w bok, zamiast nachodzic na znak. */
@media (min-width: 1081px) {
  .nav__inner {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
  }
  /* Atrapa lotu dzieli komorke ze znakiem: na czas odjazdu logo i tak
     schodzi na position absolute, wiec nigdy nie stoja w niej razem. */
  .nav__logo,
  .nav__slot {
    grid-area: 1 / 1;
    justify-self: start;
  }
  .nav__links {
    grid-area: 1 / 2;
    margin-inline: 0;
  }
  .nav__aside {
    grid-area: 1 / 3;
    justify-self: end;
  }
}

/* Wyspa jezykow trzyma od menu ten sam odstep, co znak po lewej (Oliver,
   2026-09-07: pociag blisko, jezyki za daleko). Kolumny skrajne sa rowne,
   wiec wystarczy stala roznica szerokosci znaku w narozniku (236 px)
   i tej wyspy (125 px) - symetria trzyma sie wtedy na kazdej szerokosci
   okna bez liczenia skryptem. Margines podnosi jednak minimalna szerokosc
   kolumny jezykow, a ponizej ~1200 px suma minimow przelewa siatke - stad
   prog wyzszy niz wejscie w uklad siatki. */
@media (min-width: 1230px) {
  .nav__aside { margin-right: 111px; }
}

/* Bez zywych tlumaczen wyspa spraw bocznych niesie tylko burger, ukryty
   na szerokim ekranie - pusta szklana pigulka schodzi w calosci. Wraca
   sama razem z przelacznikiem, gdy pierwsze tlumaczenie zostanie
   opublikowane (Iwona, 2026-09-07: jezyki znikaja do czasu tlumaczen). */
@media (min-width: 1081px) {
  /* Podwojna klasa, bo pozniejsza regula .nav__aside ustawia display:flex
     i przy pojedynczej klasie wygrywalaby kolejnoscia. */
  .nav__aside.nav__aside--sam-burger { display: none; }
}

.nav__wyspa {
  pointer-events: auto;
  border-radius: 20px;
  box-shadow: var(--wyspa-cien);
}

/* Wyspa znaku. Biel jest tu wymogiem ksiegi, nie decyzja wizualna. */
.nav__logo {
  flex: none;
  display: flex;
  align-items: center;
  padding: var(--wyspa-pad) clamp(0.9rem, 1.6vw, 1.5rem);
  background: #fff;
}

/* Ksiega (s. 6) wymaga na ekranie co najmniej 200 px szerokosci znaku, wiec
   znakiem steruje szerokosc, a wysokosc idzie z proporcji pliku. Wysokosc
   ustawiona tutaj obok szerokosci sciska rysunek do obcej proporcji: SVG
   wpisuje sie wtedy w ramke i maleje, zamiast ja wypelnic.

   Wyspa nosi wersje pelna, z podpisem "PUBLIC TRANSPORT SERVICE" (decyzja
   PTS przez Iwone, 2026-08-31). Wersja bez podpisu bronila sie kiedys przed
   zderzeniem z nadtytulem hero, ale nadtytuly zeszly ze strony razem ze
   struktura serwisu od Iwony. */
.nav__logo img {
  width: 200px;
  height: auto;
}

/* Wyspa pozycji. Stoi posrodku okna, a nie przy prawej krawedzi: znak ma
   wymagane 200 px i przy menu dosunietym w prawo miedzy nimi zostawal pas
   pustki szerszy od samego menu. Os trzyma siatka na .nav__inner (wyzej);
   margines auto zostaje jako zapas dla ukladu flex. */
.nav__links {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.15rem;
  margin-inline: auto;
  padding: var(--wyspa-pad);
  background: var(--nav-szklo);
  border: 1px solid rgba(255, 255, 255, 0.10);
  backdrop-filter: blur(16px) saturate(1.3);
  -webkit-backdrop-filter: blur(16px) saturate(1.3);
}

.nav__poz {
  position: relative;
  z-index: 1;
  padding: 0.5rem 0.85rem;
  border-radius: 999px;
  color: rgba(255, 255, 255, 0.86);
  font-size: var(--fs-small);
  font-weight: 600;
  letter-spacing: 0.005em;
  white-space: nowrap;
  transition: color var(--t-fast) var(--ease), transform 0.3s var(--ease-out);
}
.nav__poz:hover { color: #fff; }
/* `page` to strona otwarta wprost, `true` - nadrzedna podstrony
   szczegolow. Obie sa stanem biezacym paska. */
.nav__poz[aria-current] { color: var(--orange); font-weight: 700; }

/* Napis wymienia sie sam na siebie: dwie kopie jedna pod druga, przy
   najechaniu obie jada o wysokosc wiersza w gore. Okno musi miec dokladnie
   wysokosc wiersza, inaczej widac dwa napisy naraz. */
.nav__nazwa {
  display: block;
  overflow: hidden;
  height: 1.35em;
  line-height: 1.35;
}
.nav__nazwa-i {
  display: block;
  transition: transform 0.42s var(--ease-out);
}
.nav__poz:hover .nav__nazwa-i,
.nav__poz:focus-visible .nav__nazwa-i,
.nav__akcja:hover .nav__nazwa-i,
.nav__akcja:focus-visible .nav__nazwa-i { transform: translateY(-100%); }

/* Zapas na wypadek, gdyby wskaznika nie bylo: bez JavaScriptu pozycja
   biezaca i tak musi byc oznaczona. `app.js` melduje go klasa na wyspie
   i wtedy ta kreska schodzi z drogi. */
.nav__links:not(.ma-wagon) .nav__poz[aria-current]::after {
  content: "";
  position: absolute;
  left: 0.85rem; right: 0.85rem; bottom: 0.18rem;
  height: 2px;
  border-radius: 2px;
  background: var(--orange);
}

/* Panel rozwijany pod Oferta i O PTS (Iwona, 2026-09-04). Panel stoi
   w drzewie zaraz za odnosnikiem pozycji, wiec otwiera go selektor brata;
   fokus w srodku trzyma go otwartym, a znikanie ma zwloke, zeby kursor
   zdazyl przejechac z pozycji na panel przez dolna krawedz wyspy. */
.nav__pod {
  position: absolute;
  top: calc(100% - 0.3rem);
  left: var(--wyspa-pad, 0.4rem);
  right: var(--wyspa-pad, 0.4rem);
  z-index: 6;
  padding: 0.5rem;
  background: var(--nav-szklo);
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: 16px;
  box-shadow: var(--wyspa-cien);
  backdrop-filter: blur(16px) saturate(1.3);
  -webkit-backdrop-filter: blur(16px) saturate(1.3);
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition:
    opacity 0.2s var(--ease) 0.14s,
    transform 0.2s var(--ease) 0.14s,
    visibility 0s linear 0.34s;
}

.nav__poz:hover + .nav__pod,
.nav__poz:focus-visible + .nav__pod,
.nav__pod:hover,
.nav__pod:focus-within {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition-delay: 0s;
}

/* Pozycje czytają się kolumnami (Iwona, 2026-09-06): pierwsza kolumna od
   góry do dołu, potem druga - a nie wierszami. Trzy wiersze mieszczą pięć
   ofert (3+2) i pięć podstron O PTS; pozycje dodatkowe idą jawnie do
   czwartego wiersza, obok siebie. */
.nav__pod-srodek {
  display: grid;
  grid-auto-flow: column;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: repeat(3, auto);
  gap: 0.1rem 0.5rem;
  overflow: hidden;
}

.nav__pod-poz {
  display: block;
  padding: 0.5rem 0.8rem;
  border-radius: 10px;
  color: rgba(255, 255, 255, 0.82);
  font-size: var(--fs-small);
  font-weight: 600;
  transition: background-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}

.nav__pod-poz:hover,
.nav__pod-poz:focus-visible {
  background: rgba(255, 255, 255, 0.10);
  color: #fff;
}

.nav__pod-poz[aria-current] { color: var(--orange); }

/* Pozycje dodatkowe (Nasze realizacje, Jakosc i certyfikaty) stoja obok
   siebie w jednym wierszu pod kreska (Iwona, 2026-09-06) - piatka ofert
   dalej czyta sie jako osobna grupa. Walker wynosi je do osobnego dolu
   panelu, zeby nie wchodzily w kolumnowa kolejnosc siatki wyzej. */
.nav__pod-dol {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.1rem 0.5rem;
  margin-top: 0.35rem;
  padding-top: 0.45rem;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
}

/* W szufladzie kreske niesie caly dol panelu (regula nizej), nie kazda
   pozycja z osobna - dwie pozycje dodatkowe dawalyby dwie kreski. */

/* Wskaznik pozycji: pigulka jadaca pod pozycjami. Spoczywa pod biezaca,
   przejezdza pod wskazana, wraca. Zewnetrzny element przesuwa, wewnetrzny
   rozciaga - i maja rozny czas, wiec przy dluzszym przejezdzie pigulka
   najpierw sie wyciaga, a przy celu sciaga. W jednej deklaracji `transform`
   nie da sie tego rozdzielic. */
.nav__wagon {
  /* Element bezwzgledny liczy sie od krawedzi pola wewnetrznego wyspy,
     dokladnie tak samo jak `offsetLeft` pozycji - stad zera, a nie margines
     wyspy: ten jest juz uwzgledniony po obu stronach. */
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: var(--wagon-w, 0px);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.13);
  opacity: 0;
  pointer-events: none;
  transform: translateX(var(--wagon-x, 0px));

  /* Szerokosc idzie szerokoscia, a nie `scaleX`: skala rozciaga tez
     zaokraglenie i z pigulki robi sie elipsa. Przejazd i rozciaganie maja
     rozny czas, wiec przy dluzszej drodze pigulka najpierw sie wyciaga,
     a przy celu sciaga. Element jest bezwzgledny i sam w polu wyspy, wiec
     zmiana szerokosci nie przelicza ukladu poza nim. */
  transition: transform 0.44s var(--ease-out),
              width 0.54s var(--ease-out),
              opacity var(--t-fast) var(--ease);
}
.nav__links.ma-wagon .nav__wagon { opacity: 1; }

/* Tor jazdy: dwie szyny z podkladami przez cala szerokosc wyspy pozycji.
   Jezdzi po nim logo PTS w pelnym rozmiarze - logo firmy symbolizuje
   pociag i tu nim jest (Iwona przez Olivera, 2026-08-31; pelny rozmiar,
   tory przez cale menu i pusty naroznik: Oliver, 2026-08-31). */
.nav__tory {
  position: absolute;
  /* Szyny dochodza blisko krawedzi wyspy: sklad na skrajnej pozycji ma
     niewielki zwis poza pole (zakresJazdy w app.js) i tor musi tam byc.
     Pion od dolnej krawedzi wyspy - tory leza POD pozycjami (Iwona,
     2026-09-07: "tory na dole, nie u gory"). */
  left: 0.5rem;
  right: 0.5rem;
  bottom: 12px;
  height: 7px;
  opacity: 0;
  pointer-events: none;
  background:
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.14) 0 2px, transparent 2px 16px) center / 100% 100% no-repeat,
    linear-gradient(rgba(255, 255, 255, 0.30), rgba(255, 255, 255, 0.30)) left top / 100% 1.5px no-repeat,
    linear-gradient(rgba(255, 255, 255, 0.30), rgba(255, 255, 255, 0.30)) left bottom / 100% 1.5px no-repeat;
  transition: opacity var(--t) var(--ease);
}

/* Atrapa miejsca po logo w narozniku - opis w header.php. */
.nav__slot { display: none; }

/* Sklad: bialy pociag z logo PTS bez podpisu jezdzi po torach nad menu.
   Pomniejszone logo i wersja bez napisu PUBLIC TRANSPORT SERVICE to
   decyzje Iwony (2026-08-31); odstepstwo od minimalnych 200 px z ksiegi
   bierze na siebie PTS („ksiega to ja, zmniejszaj"). Sylwetka pojazdu
   siedzi w `pociag.svg` (klinowy nos, granatowa szyba, kola) - kolejna
   uwaga Iwony z tego samego dnia: „nowoczesniejszy look, bardziej
   spiczasty dziubek". Kolorowy znak stoi na bieli, wiec zasada tla
   z ksiegi zostaje. Po drugiej uwadze Iwony („ciut infantylnie")
   sylwetka jest niska i wydluzona, bez widocznych kol - schowane za
   fartuchem jak w EZT, zostal cien podwozia. Element jest odnosnikiem
   do strony glownej - przejmuje te role po ukrytym logo z naroznika.
   Pion siedzi w arkuszu (fartuch na gornej szynie), wzdluz toru wozi
   go `app.js`.

   Cien idzie przez `drop-shadow`, nie `box-shadow`: pudlo nie wypelnia
   prostokata elementu i cien ramki zdradzalby jego krawedzie. Polozenie
   znaku w pudle jest w pikselach, bo warstwy tla nie skaluja sie razem -
   przy zmianie rozmiaru skladu (--sklad-w) trzeba je przeliczyc. */
.nav__sklad {
  display: none;
  position: absolute;
  left: 0;
  /* Fartuch siada na gornej szynie: szyny [12, 19] od dolu wyspy, sklad
     konczy sie 5px nad ich dolna krawedzia - te same proporcje co przy
     pietrze gornym. Zmiana tych liczb wymaga przeliczenia celu odjazdu
     w app.js (stale 17 i 41). */
  bottom: 17px;
  z-index: 2;
  width: 178px;
  height: 41px;
  background-image: url("../assets/brand/logo-pts-short.svg"), url("../assets/brand/pociag.svg?v=2");
  background-repeat: no-repeat;
  background-position: 20px 8px, center;
  background-size: auto 26px, 100% 100%;
  filter: drop-shadow(0 6px 12px rgba(6, 5, 22, 0.35));
  opacity: 0;
  transform: translateX(var(--sklad-x, 0px));
}
/* Przejscie wchodzi klatke po pierwszym ustawieniu (`app.js`), inaczej
   kazde wejscie na podstrone byloby przelotem przez pol wyspy. */
.nav__sklad.jedzie-plynnie {
  transition: transform 0.75s var(--ease-out), opacity var(--t) var(--ease);
}

/* Jazda. Wszystko wisi na `html.js-motion.jazda-nav`: klase doklada
   wstawka w header.php przed pierwszym malowaniem (podstrona z pozycja
   biezaca, szeroki ekran), a pilnuje jej `app.js` przy zmianie rozmiaru.
   Zdjecie `js-motion` przez bezpiecznik przywraca zwykly pasek w calosci:
   logo wraca do naroznika, wyspa traci pietro torow.

   `ma-odjazd` na samym pasku to stan przelotny: pelne logo po kliknieciu
   pozycji wyjezdza z naroznika i maleje w locie do rozmiaru znaku
   (`--sklad-skala`), ktory po drugiej stronie kurtyny stoi juz na torach. */
@media (min-width: 1081px) {
  /* Logo w pociagu od startu (Iwona, 2026-08-31: „jakby to wygladalo,
     zeby logo juz na starcie bylo w pociagu"): tam, gdzie naroznik
     w ogole nosi znak - strona glowna i strony spoza menu - biala wyspa
     ustepuje tej samej sylwetce pociagu, ktora jezdzi po torach, tylko
     wiekszej. Odjazd z naroznika jest wtedy przelotem pociagu w pociag,
     nie przemiana. Obraz znaku schodzi z ukladu (`display`), a role tla
     przejmuja te same dwie warstwy co w skladzie; etykieta odnosnika
     zostaje na kotwicy. Bez JavaScriptu i przy ograniczonym ruchu
     naroznik dalej nosi pelne logo z podpisem.

     `js-znak`, nie `js-motion`: znak to nie animacja. Bezpiecznik
     warstwy ruchu zdejmuje `js-motion` przy dowolnym bledzie JS
     i pociag wracal do bialej karty w trakcie ogladania strony
     (zgloszony „kwadrat", Oliver 2026-09-05). `js-znak` wchodzi w tym
     samym warunku matchMedia, ale nie schodzi nigdy. */
  .js-znak:not(.jazda-nav) .nav__logo {
    width: 236px;
    height: 54px;
    padding: 0;
    background-color: transparent;
    background-image: url("../assets/brand/logo-pts-short.svg"), url("../assets/brand/pociag.svg?v=2");
    background-repeat: no-repeat;
    background-position: 26px 10px, center;
    background-size: auto 34px, 100% 100%;
    border-radius: 0;
    box-shadow: none;
    filter: drop-shadow(0 8px 16px rgba(6, 5, 22, 0.35));
  }
  .js-znak:not(.jazda-nav) .nav__logo img { display: none; }

  /* Tory stoja w pasku od razu, takze na stronie glownej (Iwona,
     2026-09-06): wyspa pozycji zawsze nosi pietro torow, a klikniecie
     pozycji wprowadza na nie pociag. `js-znak`, nie `jazda-nav` - tor
     jest czescia wygladu paska, nie stanem podstrony. */
  .js-znak .nav__inner { align-items: flex-start; }

  /* Wyspa pozycji dostaje niskie pietro torow POD menu (Iwona,
     2026-09-07: tory na dole, nie u gory). */
  .js-znak .nav__links { padding-bottom: calc(var(--tor-strefa) + var(--wyspa-pad)); }
  .js-znak .nav__tory { opacity: 1; }

  /* Pigulka wskazania schodzi: na jednym, dolnym torze wskaznikiem
     najechania jest sam pociag (Oliver, 2026-09-07) - podjezdza pod
     wskazywana pozycje w app.js. */
  .js-znak .nav__wagon { display: none; }

  /* W narozniku podstrony czeka stacja (Oliver, 2026-09-07): pociag
     z logo odjechal na tory nad menu, a w jego miejscu stoi subtelna
     wiata peronowa - ten sam odnosnik do strony glownej co wczesniej
     logo, wiec klik w stacje albo w pociag wraca na Start. Przygaszona
     na spoczynku, pelna przy najechaniu i fokusie. Wczesniej naroznik
     byl pusty (visibility: hidden, Oliver 2026-08-31) - trzymanie
     miejsca w ukladzie zostaje, zmienia sie tylko zawartosc. */
  .js-motion.jazda-nav .nav__logo {
    width: 236px;
    height: 54px;
    padding: 0;
    background-color: transparent;
    background-image: url("../assets/brand/stacja.svg");
    background-repeat: no-repeat;
    background-position: left bottom;
    background-size: auto 100%;
    border-radius: 0;
    box-shadow: none;
    filter: drop-shadow(0 8px 16px rgba(6, 5, 22, 0.35));
    opacity: 0.5;
    transition: opacity var(--t) var(--ease);
  }
  .js-motion.jazda-nav .nav__logo:hover,
  .js-motion.jazda-nav .nav__logo:focus-visible { opacity: 1; }
  .js-motion.jazda-nav .nav__logo img { display: none; }

  .js-motion.jazda-nav .nav__sklad { display: block; }
  .js-motion.jazda-nav .nav__sklad.na-torach { opacity: 1; }

  /* Odjazd z naroznika: logo odczepia sie od ukladu, jedzie i maleje,
     a tuz przed koncem lotu gasnie - na miejsce przyjezdza juz znak. */
  .js-motion .nav.ma-odjazd .nav__logo {
    position: absolute;
    left: 0;
    top: 0;
    z-index: 2;
    transform-origin: left top;
    transform: translate(var(--sklad-x, 0px), var(--sklad-y, 0px)) scale(var(--sklad-skala, 1));
  }
  .js-motion .nav.ma-odjazd .nav__logo.jedzie-plynnie {
    transition: transform 0.8s var(--ease-out), opacity 0.3s var(--ease) 0.55s;
  }
  .js-motion .nav.ma-odjazd .nav__logo.odjezdza { opacity: 0; }

  /* Puste miejsce po logo na czas lotu: menu jest centrowane miedzy
     wyspami i bez atrapy przeskakiwaloby w lewo w chwili odjazdu.
     Szerokosc rowna pociagowi w narozniku, bo odjazd zdarza sie tylko
     w trybie jazdy - z naroznika odjezdza pociag, nie biala wyspa. */
  .js-motion .nav.ma-odjazd .nav__slot {
    display: block;
    flex: none;
    width: 236px;
  }
}

/* Pozycja wskazana jako wezwanie do dzialania (klasa `akcja` w panelu).
   Odwrocenie kolorow wyspy: biala pigulka w granatowej. Pomarancz nie
   wchodzi jako tlo, bo bialy napis na pomaranczu z ksiegi daje 3.17:1
   i wymagalby stopnia wiekszego, niz miesci pasek. Zostaje akcentem. */
.nav__links .nav__akcja {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-left: 0.35rem;
  padding: 0.5rem 1.05rem;
  border-radius: 999px;
  background: #fff;
  color: var(--navy);
  font-size: var(--fs-small);
  font-weight: 700;
  white-space: nowrap;
  transition: transform var(--t-fast) var(--ease-out), box-shadow var(--t) var(--ease);
}
.nav__links .nav__akcja::before {
  content: "";
  flex: none;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--orange);
  transition: box-shadow var(--t) var(--ease);
}
.nav__links .nav__akcja:hover,
.nav__links .nav__akcja:focus-visible {
  transform: translateY(-1px);
  box-shadow: 0 8px 20px rgba(6, 5, 22, 0.35);
}
.nav__links .nav__akcja:hover::before { box-shadow: 0 0 0 4px var(--orange-wash); }

/* Wyspa spraw bocznych: jezyk i - na waskim ekranie - przycisk szuflady. */
.nav__aside {
  flex: none;
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: var(--wyspa-pad);
  background: var(--nav-szklo);
  border: 1px solid rgba(255, 255, 255, 0.10);
  backdrop-filter: blur(16px) saturate(1.3);
  -webkit-backdrop-filter: blur(16px) saturate(1.3);
}

.nav__lang { display: flex; gap: 2px; }
.nav__lang a,
.nav__lang span {
  padding: 0.34rem 0.56rem;
  border-radius: 999px;
  color: rgba(255, 255, 255, 0.72);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  transition: background-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.nav__lang a:hover { background: rgba(255, 255, 255, 0.12); color: #fff; }

/* Jezyk biezacy i jezyki "w przygotowaniu". Nieaktywne wersje sa widoczne
   celowo: zapowiadaja EN i DE, zanim przyjda tlumaczenia (2026-08-30).
   Odroznia je waga pisma, a nie przezroczystosc - przygaszenie zbijalo
   kontrast ponizej progu czytelnosci. */
.nav__lang .nav__lang-teraz {
  background: #fff;
  color: var(--navy);
}
.nav__lang .nav__lang-wkrotce {
  font-weight: 500;
  cursor: help;
}

.nav__burger {
  display: none;
  width: 42px; height: 42px;
  padding: 0;
  background: none;
  border: 0;
  border-radius: 999px;
  cursor: pointer;
}
.nav__burger span {
  display: block;
  width: 18px; height: 2px;
  margin: 4px auto;
  background: #fff;
  transition: transform var(--t) var(--ease), opacity var(--t-fast) var(--ease);
}
.nav__burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.nav__burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav__burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* Stan po zejsciu z pierwszego ekranu: wyspy podchodza blizej krawedzi
   i sciagaja sie, cien sie poglebia. Zmieniaja sie same zmienne, wiec uklad
   jest opisany raz. */
.nav.jest-odklejony {
  --wyspa-y: clamp(0.45rem, 0.9vw, 0.7rem);
  --wyspa-pad: 0.42rem;
  --wyspa-cien: 0 14px 44px rgba(6, 5, 22, 0.42);
}

/* Postep czytania przy gornej krawedzi okna. Wysp nie dotyka celowo:
   doklejony do ktorejs z nich bylby ozdoba tej wyspy, a nie miara calej
   strony. */
.nav__postep {
  position: fixed;
  top: 0; left: 0;
  z-index: calc(var(--z-nav) + 1);
  width: 100%;
  height: 2px;
  pointer-events: none;
}
.nav__postep i {
  display: block;
  height: 100%;
  width: 100%;
  background: linear-gradient(90deg, var(--orange), var(--orange-deep));
  transform: scaleX(0);
  transform-origin: left center;
}

@media (max-width: 1080px) {
  .nav__links { display: none; }
  .nav__burger { display: block; }

  /* Przelacznik jezykow schodzi do szuflady. Znak ma miec 200 px (ksiega
     s. 6), a trzy pozycje jezykowe plus burger nie mieszcza sie obok niego
     na ekranie telefonu: burger wypadal poza prawa krawedz. */
  .nav__aside .nav__lang { display: none; }
  .nav__aside { margin-left: auto; }

  /* Pociag w narozniku takze na telefonie (prosba Iwony, 2026-09-05:
     „czy na mobile mozna zrobic tez logo pociagu takie jak normalnie").
     Ta sama sylwetka co w narozniku desktopu, przeskalowana z 236 px do
     200 px, zeby zmiescila sie z burgerem przy 320 px. Znak w srodku jest
     mniejszy od 200 px z ksiegi - to samo odstepstwo, ktore przy skladzie
     wziela na siebie Iwona („ksiega to ja, zmniejszaj"). Bez JavaScriptu
     i przy ograniczonym ruchu (brak `js-znak`) zostaje pelne logo
     z podpisem na bialej karcie - tam ksiega obowiazuje bez odstepstwa.
     `js-znak` zamiast `js-motion` z tego samego powodu co na desktopie:
     bezpiecznik ruchu nie ma prawa zdejmowac znaku. */
  .js-znak .nav__logo {
    width: 200px;
    height: 46px;
    padding: 0;
    background-color: transparent;
    background-image: url("../assets/brand/logo-pts-short.svg"), url("../assets/brand/pociag.svg?v=2");
    background-repeat: no-repeat;
    background-position: 22px 8px, center;
    background-size: auto 29px, 100% 100%;
    border-radius: 0;
    box-shadow: none;
    filter: drop-shadow(0 8px 16px rgba(6, 5, 22, 0.35));
  }
  .js-znak .nav__logo img { display: none; }

}

/* Wersja w szufladzie: ten sam segment, tylko na granacie i z większym
   polem trafienia. */
.drawer__foot .nav__lang {
  margin-bottom: 1.1rem;
  width: fit-content;
  background: rgba(255, 255, 255, 0.08);
}
.drawer__foot .nav__lang a,
.drawer__foot .nav__lang span {
  padding: 0.5rem 0.85rem;
  color: var(--on-navy-2);
}
.drawer__foot .nav__lang a:hover { background: rgba(255, 255, 255, 0.16); color: #fff; }
.drawer__foot .nav__lang .nav__lang-teraz { background: #fff; color: var(--navy); box-shadow: none; }
.drawer__foot .nav__lang .nav__lang-wkrotce { color: var(--on-navy-3); }
/* Szuflada istnieje wyłącznie w układzie mobilnym - na desktopie znika z drzewa. */
@media (min-width: 1081px) {
  .drawer { display: none; }
}

/* szuflada mobilna */
.drawer {
  position: fixed;
  inset: 0;
  z-index: var(--z-drawer);
  display: grid;
  grid-template-rows: auto 1fr auto;
  background: var(--navy-ink);
  color: #fff;
  transform: translateY(-100%);
  transition: transform var(--t-slow) var(--ease-in-out);
  overflow-y: auto;
}
.drawer.is-open { transform: translateY(0); }
.drawer__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem var(--gutter);
}
.drawer__top img { width: 200px; height: auto; }
.drawer__close {
  width: 46px; height: 46px;
  background: none;
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: var(--r-sm);
  color: #fff;
  font-size: 1.4rem;
  line-height: 1;
  cursor: pointer;
}
.drawer__links {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.2rem;
  padding: 1rem var(--gutter);
}
.drawer__links a {
  display: flex;
  align-items: baseline;
  gap: 1rem;
  padding: 0.55rem 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  font-size: clamp(1.35rem, 5vw, 2rem);
  font-weight: 900;
  letter-spacing: -0.02em;
}
.drawer__links a[aria-current] { color: var(--orange); }

/* Pozycje rozwijane w szufladzie: zawsze widoczne, wciete pod rodzicem
   i mniejsze od pozycji szczytowych - szuflada nie ma stanu najechania. */
.drawer__links .nav__pod {
  position: static;
  opacity: 1;
  visibility: visible;
  transform: none;
  padding: 0.15rem 0 0.55rem 1.1rem;
  background: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  transition: none;
}
.drawer__links .nav__pod-srodek { display: block; }
.drawer__links .nav__pod-dol {
  display: block;
  margin-top: 0.3rem;
  padding-top: 0.55rem;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}
.drawer__links .nav__pod .nav__pod-poz {
  padding: 0.3rem 0;
  border-bottom: 0;
  font-size: var(--fs-small);
  font-weight: 600;
  letter-spacing: 0;
  color: var(--on-navy-2);
}
.drawer__links .nav__pod .nav__pod-poz[aria-current] { color: var(--orange); }

/* Akordeon szuflady (Oliver, 2026-09-05): podstrony Oferty i O PTS
   pojawiaja sie dopiero po dotknieciu pozycji nadrzednej - 11 pozycji
   dwoch paneli naraz robilo z szuflady sciane tekstu. Klasy doklada
   `app.js`, wiec bez skryptu pelna lista zostaje widoczna jak dotad.
   Pierwsze dotkniecie rozwija (i zwija pozostale), drugie prowadzi
   na strone pozycji - strzalka mowi, ze cos sie rozwinie. */
.drawer--akordeon .nav__poz--zwijana + .nav__pod { display: none; }
.drawer--akordeon .nav__poz--zwijana.is-otwarta + .nav__pod { display: block; }

.drawer--akordeon .nav__poz--zwijana::after {
  content: "";
  flex: none;
  align-self: center;
  width: 0.5em;
  height: 0.5em;
  margin-left: auto;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  opacity: 0.65;
  transform: rotate(45deg);
  transition: transform var(--t) var(--ease);
}
.drawer--akordeon .nav__poz--zwijana.is-otwarta::after { transform: rotate(225deg); }

.drawer__foot {
  padding: 1.4rem var(--gutter) 2rem;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  font-size: var(--fs-small);
  color: var(--on-navy-2);
}
.drawer__foot a { display: block; margin-bottom: 0.35rem; font-weight: 700; color: #fff; }

/* ── 03 · przyciski ───────────────────────────────────────────────────────── */

.btn {
  --btn-bg: var(--orange);
  --btn-fg: var(--navy);
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.7em;
  padding: 0.95em 1.7em;
  background: var(--btn-bg);
  color: var(--btn-fg);
  border: 1px solid var(--btn-bg);
  border-radius: var(--r-sm);
  font-size: var(--fs-small);
  font-weight: 700;
  letter-spacing: 0.02em;
  text-align: center;
  cursor: pointer;
  overflow: hidden;
  isolation: isolate;
  transition: transform var(--t) var(--ease), border-color var(--t) var(--ease),
              color var(--t) var(--ease), background var(--t) var(--ease);
}
.btn::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--navy);
  transform: translateX(-101%);
  transition: transform var(--t-slow) var(--ease-out);
}
.btn:hover::before, .btn:focus-visible::before { transform: translateX(0); }
.btn:hover, .btn:focus-visible { border-color: var(--navy); color: #fff; }
.btn .arrow { transition: transform var(--t) var(--ease-out); }
.btn:hover .arrow { transform: translateX(5px); }

.btn--navy { --btn-bg: var(--navy); --btn-fg: #fff; }
.btn--navy::before { background: var(--orange); }
.btn--navy:hover, .btn--navy:focus-visible { border-color: var(--orange); color: var(--navy); }

.btn--ghost {
  --btn-bg: transparent;
  --btn-fg: var(--navy);
  border-color: var(--navy-line);
}
.btn--ghost::before { background: var(--navy); }
.btn--ghost:hover, .btn--ghost:focus-visible { color: #fff; border-color: var(--navy); }

.btn--light {
  --btn-bg: transparent;
  --btn-fg: #fff;
  border-color: rgba(255, 255, 255, 0.38);
}
.btn--light::before { background: #fff; }
.btn--light:hover, .btn--light:focus-visible { color: var(--navy); border-color: #fff; }

.btn--sm { padding: 0.7em 1.15em; font-size: var(--fs-micro); }

.btn-row { display: flex; flex-wrap: wrap; gap: 0.85rem; }

/* link tekstowy ze strzałką */
.tlink {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  color: var(--navy);
  font-weight: 700;
  font-size: var(--fs-small);
  border-bottom: 2px solid var(--orange);
  padding-bottom: 2px;
  transition: gap var(--t) var(--ease), color var(--t) var(--ease);
}
.tlink:hover { gap: 0.95em; color: var(--orange-ink); }
.section--navy .tlink, .tlink--light { color: #fff; }

/* ── 04 · fotografia: filtr „Deep Blue” (księga s. 15) ─────────────────────── */

.ph {
  position: relative;
  overflow: hidden;
  background: var(--navy-ink);
  isolation: isolate;
}
.ph > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(0.86) contrast(1.04);
}
.ph::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--photo-filter-color);
  opacity: var(--photo-filter-alpha);
  mix-blend-mode: color;
  pointer-events: none;
}
.ph--zoom > img { transition: transform 1.2s var(--ease-out); }
.ph--zoom:hover > img { transform: scale(1.05); }
.ph--r { border-radius: var(--r-lg); }

/* ── 05 · nagłówek podstrony ──────────────────────────────────────────────── */

.phead {
  position: relative;
  display: flex;
  /* Tytul siedzi u gory kadru, zaraz pod wyspami nawigacji (Iwona,
     2026-08-31): czytelnik ma go widziec od razu, bez zjezdzania wzdluz
     zdjecia. Kadr zszedl tez z calego ekranu - Iwona chce krotszych
     stron, a pelnoekranowe otwarcie odsuwalo tresc o caly widok. */
  align-items: flex-start;
  /* Wysokosc kadru wynika z zawartosci, nie z ekranu (Oliver, 2026-09-07):
     kadr konczy sie stale 78 px pod kreska tytulu, wiec odleglosc od kreski
     do pierwszej tresci jest na kazdej podstronie ta sama. Wczesniejsze
     `min-height: min(72svh, 44rem)` dawalo rozrzut 87-360 px zaleznie od
     dlugosci tytulu i leadu. Strony pomocnicze (`--plain`: archiwum, 404,
     wyszukiwanie) zostaja przy swoim niskim pasie. */
  /* Wyspy nawigacji nie zaslaniaja tresci soba, wiec okruchy musza zaczynac
     sie ponizej nich, a nie tuz przy ich dolnej krawedzi. Wysokosc wysp jest
     stala: bierze sie z wymaganych 200 px szerokosci znaku. */
  padding-top: 11rem;
  padding-bottom: 4.875rem;
  background: var(--navy-ink);
  color: #fff;
  overflow: hidden;
}
.phead__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.phead__bg img {
  width: 100%; height: 100%;
  object-fit: cover;
  filter: saturate(0.8) contrast(1.05);
  transform: scale(1.06);
}
.phead__bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(92deg, rgba(20, 17, 59, 0.92) 8%, rgba(20, 17, 59, 0.62) 55%, rgba(241, 101, 33, 0.26) 100%);
}
/* Dofinansowania (Iwona, 2026-09-07): kadr ze stocka przesuniety wyzej,
   a dol zdjecia przechodzi w granat strony - biala tablica pod naglowkiem
   siedzi wtedy optycznie blizej, bo miedzy kadrem a karta nie ma ostrej
   krawedzi zdjecia. */
.strona--dofinansowania .phead__bg img { object-position: center 70%; }

/* Nasza historia (Oliver, 2026-09-08): balon z cyfra 10 jest u gory
   pionowego kadru z arkusza - okno naglowka celuje w gore wariantu,
   a na waskim ekranie w lewa czesc, gdzie balon wisi. */
.strona--historia .phead__bg img { object-position: 22% 0; }
.strona--dofinansowania .phead__bg::after {
  background:
    linear-gradient(180deg, rgba(19, 16, 59, 0) 42%, var(--navy-night, #13103B) 97%),
    linear-gradient(92deg, rgba(20, 17, 59, 0.92) 8%, rgba(20, 17, 59, 0.62) 55%, rgba(241, 101, 33, 0.26) 100%);
}

/* Na telefonie kolumna tekstu siega w prawa, jasna czesc kadru, gdzie
   gradient boczny prawie nie przyciemnia - bialy lead na slonecznym
   zdjeciu siedziby (Kontakt) schodzil ponizej czytelnosci. Woal
   przechodzi w pionowy: ciemny pod tytulem i leadem, jasniejszy przy
   dole kadru, zeby zdjecie dalej bylo widac. */
@media (max-width: 860px) {
  .phead__bg::after {
    background:
      linear-gradient(180deg, rgba(20, 17, 59, 0.90) 0%, rgba(20, 17, 59, 0.76) 58%, rgba(20, 17, 59, 0.42) 100%);
  }
}
.phead__inner { position: relative; z-index: 1; width: 100%; }

/* Tytuł w stopniu nagłówka strony głównej (Iwona, 2026-09-06): ta sama
   wielkość co „Jeden partner…" na hero, kolumna na całą szerokość powłoki -
   krótki tytuł mieści się w jednym wierszu, długi łamie się najwyżej na dwa.
   Górna granica i przyrost są z `.hero-blok.ma-przod h1`; dolna zostaje
   przy 2.1rem, żeby „Odpowiedzialność" nie łamała się dywizem poniżej
   400 px. Bez `balance`: wyrównywanie wierszy skracałoby pierwszy,
   a Iwona chce tytułu od lewej do prawej krawędzi. */
.phead h1 {
  /* Bez `hyphens: auto`: Firefox dzielił „bezpieczeństwo" dywizem w tytule
     wyświetleniowym, mimo że wyraz mieścił się w wierszu. Awaryjne łamanie
     zbyt długiego słowa zostaje w `overflow-wrap`.                        */
  overflow-wrap: break-word;
  font-size: clamp(2.1rem, 0.3rem + 4vw, 3.6rem);
  font-weight: 900;
  line-height: 1.04;
  letter-spacing: -0.02em;
}

/* Akcent redakcji: słowo ujęte w [nawiasy] w polu „Nagłówek na stronie"
   wychodzi pomarańczem (`pts_naglowek_html()`). Stopień wyświetleniowy
   spełnia próg kontrastu dla dużego tekstu. */
.phead h1 em {
  font-style: normal;
  color: var(--orange);
}

/* Strony trzeciego poziomu (dzieci Oferty i O PTS; okruszki maja trzy
   segmenty) schodza stopien nizej (Oliver, 2026-09-07): tytul podstrony
   szczegolowej nie konkuruje wielkoscia z Oferta czy O PTS. */
body.page-child .phead h1 {
  font-size: clamp(1.9rem, 0.26rem + 3.2vw, 2.9rem);
}

/* Pierwsza sekcja po naglowku zaczyna sie zaraz pod kadrem, jak tablica
   na Dofinansowaniach (Oliver, 2026-09-07) - padding z edytora jest
   inline, wiec przebija go dopiero `!important`. Sekcje z wlasnym jasnym
   tlem (--mist) zostaja przy swoim paddingu: tam odstep jest wewnatrz
   widocznej karty, nie przed nia. Bez `:has()` zostaje odstep z edytora. */
body:has(.phead:not(.phead--zwarty)) article > .section:first-child:not(.section--mist),
body:has(.phead:not(.phead--zwarty)) article > .wp-block-group:first-child:not(.section--mist) {
  padding-top: var(--wp--preset--spacing--30) !important;
}

/* Strony pomocnicze (archiwum, 404, wyszukiwanie): niski pas jak dotąd.
   Tam nagłówek jest przystankiem, nie otwarciem podstrony. */
.phead--plain {
  min-height: clamp(320px, 44vh, 480px);
  padding-bottom: clamp(2.5rem, 4vw, 4.5rem);
}

.phead--plain h1 { font-weight: 800; }

/* Nagłówek ze sceną „tor" (podstrona cyber): pełne otwarcie z widokiem
   z kabiny rysowanym na płótnie przez `js/cyber-tor.js` - język wizualny
   railguardsentinel.eu, do którego ta strona odsyła. Płótno leży pod
   treścią; bez skryptu zostaje granat z siatką, jak na stronach bez
   zdjęcia, więc awaria niczego nie zabiera. Pełny ekran zszedł razem
   z dojściem sekcji usług (Oliver, 2026-09-06: „to wyżej, żeby strona
   nie zaczynała się taka pusta") - nagłówek wraca do wspólnej wysokości
   podstron, a scena dalej gra w jego tle. */

.phead__tor {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
}

/* Przycisk w nagłówku podstrony: akcja ma być widoczna od razu, bez
   zjeżdżania wzdłuż kadru (Oliver, 2026-09-04). Od 2026-09-08 nagłówek
   niesie do dwóch przycisków (Iwona: przyciski Dostawców w pierwszym
   bloku, jak na Karierze) - drugi w obrysie, układ jak w parach
   przycisków treści. */
.phead__akcje {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3);
  margin-top: clamp(1.75rem, 4svh, 3rem);
}

/* Sekcja „Oferujemy" na cyber ma wejść wyżej (Iwona, 2026-09-08):
   scena toru zostaje w tle, ale kadr nie dokleja pełnych 78 px pod
   kreską tytułu. */
.phead--tor {
  padding-bottom: 2rem;
}

/* Nagłówek zwarty: pasek z tytułem zamiast pełnego kadru. Strona-landing
   (indeks obszarów Oferty) wchodzi od razu pod tytułem, bez pustego
   ekranu między tytułem a treścią. */
.phead--zwarty {
  min-height: 0;
  padding-bottom: clamp(1.5rem, 3svh, 2.5rem);
}

/* Landing z indeksem na pełnym ekranie (Oliver, 2026-09-05): gdy zaraz
   pod nagłówkiem zwartym stoi indeks `obszary--ekran`, kadry indeksu
   mają wypełniać cały pierwszy widok. Nagłówek wychodzi więc z przepływu
   i kładzie się na zdjęciu; jego granat i siatka schodzą, a czytelność
   tytułu zapewnia woal indeksu. Bez `:has()` zostaje pas granatu nad
   indeksem jak dotąd - nic nie ginie. */
.phead--zwarty:has(+ article > .obszary--ekran:first-child) {
  position: absolute;
  left: 0;
  right: 0;
  z-index: 3;
  background: transparent;
}

.phead--zwarty:has(+ article > .obszary--ekran:first-child) .phead__siatka {
  display: none;
}

.phead--zwarty h1 { font-weight: 800; }

/* Pod paskiem z torami (podstrona z pozycja biezaca, szeroki ekran) tytul
   schodzi odrobine nizej: wyspa pozycji jest wyzsza o pietro torow. */
@media (min-width: 1081px) {
  .js-motion.jazda-nav .phead { padding-top: 13.5rem; }
}

/* Nagłówki i odnośniki biorą kolor z `theme.json` (granat), a wygenerowana
   z niego reguła `:root :where(h1…)` bije dziedziczenie po `.phead`. Bez
   tych dwóch linii tytuł podstrony jest granatem na granatowym gradiencie
   i znika: na zdjęciach jaśniejszych ledwo się broni, na ciemniejszych nie
   widać go wcale. Dotyczy wszystkich podstron, nie jednej. */
.phead h1 { color: #fff; }
.phead .crumbs a { color: inherit; }
.phead p { max-width: 58ch; margin-top: var(--s-5); color: var(--on-navy-2); font-size: var(--fs-lead); font-weight: 300; }

/* okruchy */
.crumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.55rem;
  margin-bottom: var(--s-5);
  font-size: var(--fs-micro);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--on-navy-3);
}
.crumbs a:hover { color: #fff; }
.crumbs span[aria-current] { color: var(--orange); font-weight: 700; }

/* ── 06 · karty ───────────────────────────────────────────────────────────── */

.card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
  padding: clamp(1.5rem, 1rem + 1.5vw, 2.4rem);
  background: #fff;
  border: var(--hair);
  border-radius: var(--r);
  transition: transform var(--t) var(--ease-out), box-shadow var(--t) var(--ease-out),
              border-color var(--t) var(--ease);
}
.card::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  height: 2px;
  background: var(--orange);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--t-slow) var(--ease-out);
  border-radius: var(--r) var(--r) 0 0;
}
.card:hover { transform: translateY(-5px); box-shadow: var(--lift-2); border-color: transparent; }
.card:hover::after { transform: scaleX(1); }
.card p { color: var(--ink-2); font-size: var(--fs-body); }
.card--navy { background: var(--navy); border-color: var(--navy); color: #fff; }
.card--navy p { color: var(--on-navy-2); }
.card--flat:hover { transform: none; box-shadow: none; }

.card__no {
  font-size: var(--fs-micro);
  font-weight: 700;
  letter-spacing: 0.18em;
  color: var(--orange-ink);
}
.card--navy .card__no, .fleet__item:hover .card__no { color: var(--orange); }

/* ikona liniowa (księga s. 16: outline, równomierna grubość, bez cieni) */
.ico {
  width: 48px; height: 48px;
  flex: none;
  color: var(--navy);
  stroke: currentColor;
  fill: none;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.ico--orange { color: var(--orange); }
.ico--light { color: #fff; }
.ico--lg { width: 68px; height: 68px; stroke-width: 1.4; }
.ico--sm { width: 24px; height: 24px; stroke-width: 1.8; }

/* rysowanie ikony przy wejściu w kadr */
.js-motion .ico--draw path,
.js-motion .ico--draw circle,
.js-motion .ico--draw rect,
.js-motion .ico--draw line,
.js-motion .ico--draw polyline { stroke-dasharray: 400; stroke-dashoffset: 400; }
.ico--draw.is-in path, .ico--draw.is-in circle, .ico--draw.is-in rect,
.ico--draw.is-in line, .ico--draw.is-in polyline {
  stroke-dashoffset: 0;
  transition: stroke-dashoffset 1.4s var(--ease-out);
}
@media (prefers-reduced-motion: reduce) {
  .js-motion .ico--draw * { stroke-dashoffset: 0 !important; }
}

/* ── 07 · pasek faktów ────────────────────────────────────────────────────── */

.facts {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border-top: var(--hair);
  border-bottom: var(--hair);
}
.facts > div {
  padding: clamp(1.5rem, 1rem + 2vw, 2.6rem) clamp(1rem, 2vw, 2rem);
  border-right: var(--hair);
}
.facts > div:last-child { border-right: 0; }
.facts dt {
  font-size: clamp(2rem, 1.2rem + 3vw, 3.4rem);
  font-weight: 900;
  letter-spacing: -0.03em;
  line-height: 1;
  color: var(--navy);
}
.facts dt small { font-size: 0.45em; font-weight: 700; color: var(--orange-ink); }
.facts dd {
  margin: 0.6rem 0 0;
  font-size: var(--fs-small);
  color: var(--ink-2);
  line-height: 1.45;
}
@media (max-width: 860px) {
  .facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .facts > div:nth-child(2n) { border-right: 0; }
  .facts > div:nth-child(-n+2) { border-bottom: var(--hair); }
}

/* ── 08 · taśma przewijana ────────────────────────────────────────────────── */

.marquee {
  display: flex;
  overflow: hidden;
  background: var(--navy);
  color: #fff;
  user-select: none;
}
.marquee__run {
  display: flex;
  flex: none;
  align-items: center;
  gap: 2.5rem;
  padding: 0.95rem 1.25rem;
  white-space: nowrap;
  animation: marquee 38s linear infinite;
}
.marquee__run > span {
  display: inline-flex;
  align-items: center;
  gap: 1.1rem;
  font-size: var(--fs-micro);
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}
.marquee__run > span::after {
  content: "";
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--orange);
}
.marquee:hover .marquee__run { animation-play-state: paused; }
@keyframes marquee { to { transform: translateX(-100%); } }
@media (prefers-reduced-motion: reduce) {
  .marquee__run { animation: none; }
}

/* ── 09 · stopka ──────────────────────────────────────────────────────────── */

.footer {
  /* Delikatna luna od gory zamiast plaskiego granatu i pomaranczowa nitka
     na gornej krawedzi: stopka ma czytac sie jak zamkniecie strony, nie jak
     doklejony spis (uwaga Iwony, 2026-09-04: „zeby bylo ladniejsze"). */
  background:
    radial-gradient(120% 90% at 15% 0%, rgba(241, 101, 33, 0.07), transparent 55%),
    var(--navy-ink);
  color: var(--on-navy-2);
  font-size: var(--fs-small);
}
.footer::before {
  content: "";
  display: block;
  height: 2px;
  background: linear-gradient(90deg, var(--orange), rgba(241, 101, 33, 0.05) 65%, transparent);
}
.footer__grid {
  display: grid;
  /* Znak we wlasnej kolumnie (Iwona, 2026-08-31), nawigacja zaraz obok
     niego, dane rejestrowe dosuniete do prawej krawedzi (Oliver,
     2026-09-04). Srodkowa kolumna 1fr odpycha adres na prawo. */
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: clamp(1.75rem, 4vw, 5rem);
  padding-block: clamp(2.25rem, 1.5rem + 2.2vw, 3.25rem);
}
.footer__adres { justify-self: end; }
/* Nawigacja stoi w równej odległości od znaku i od danych firmy
   (Oliver, 2026-09-04): kolumna 1fr daje jej pole, wyśrodkowanie
   ustawia ją w połowie tego pola zamiast przy znaku. */
@media (min-width: 981px) { .footer__nav { justify-self: center; } }
@media (max-width: 980px) { .footer__grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) {
  .footer__grid { grid-template-columns: 1fr; }
  .footer__adres { justify-self: start; }
}

/* Szesc pozycji nawigacji w dwoch szpaltach: polowa wysokosci. */
.footer__grid nav ul,
.footer__grid ul {
  columns: 2;
  column-gap: 1.75rem;
}

/* Nagłówki stopki to h2, a nie h3: stopka jest osobnym obszarem strony,
   a nie podrozdziałem treści. Na podstronie bez własnych h2 czytnik ekranu
   ogłaszał wcześniej przeskok z h1 wprost do h3. */
.footer h2 {
  position: relative;
  margin-bottom: var(--s-4);
  padding-bottom: 0.55rem;
  color: #fff;
  font-size: var(--fs-micro);
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}
/* Kreska akcentowa pod naglowkiem kolumny - ten sam znak co nad
   naglowkami sekcji w tresci. */
.footer h2::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 26px;
  height: 2px;
  border-radius: 2px;
  background: var(--orange);
}
.footer__logo { width: 200px; margin-bottom: 0; }
.footer a { transition: color var(--t-fast) var(--ease); }
.footer a:hover { color: var(--orange); }
.footer li { margin-bottom: 0.5rem; }
.footer strong { color: #fff; }

/* Odnosniki nawigacji: kreska wjezdza przed napis przy najechaniu,
   jak podkreslenia jadace z lewej w tresci. */
.footer__grid nav a,
.footer__grid ul a {
  display: inline-block;
}
.footer__grid nav a::before,
.footer__grid ul a::before {
  content: "";
  display: inline-block;
  width: 0;
  height: 2px;
  border-radius: 2px;
  vertical-align: 0.28em;
  background: var(--orange);
  transition: width var(--t-fast) var(--ease), margin-right var(--t-fast) var(--ease);
}
.footer__grid nav a:hover::before,
.footer__grid ul a:hover::before,
.footer__grid nav a:focus-visible::before,
.footer__grid ul a:focus-visible::before {
  width: 0.6em;
  margin-right: 0.45em;
}

/* Dane rejestrowe pod adresem: drobniej i ciszej niz adres. */
.footer__meta {
  margin-top: 0.7rem;
  font-size: var(--fs-micro);
  letter-spacing: 0.04em;
  color: var(--on-navy-3);
}

.footer__map {
  width: 100%;
  height: 220px;
  border: 0;
  border-radius: var(--r);
  filter: grayscale(1) contrast(1.05) opacity(0.85);
  transition: filter var(--t-slow) var(--ease);
}
.footer__map:hover { filter: none; }

.footer__bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-block: 1.35rem;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  font-size: var(--fs-micro);
  color: var(--on-navy-3);
}
.footer__bar nav { display: flex; flex-wrap: wrap; gap: 1.4rem; }

/* ── 10 · formularz ───────────────────────────────────────────────────────── */

.field { display: flex; flex-direction: column; gap: 0.45rem; margin-bottom: 1.15rem; }
.field label { font-size: var(--fs-micro); font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-2); }
.field input:not([type="checkbox"]):not([type="radio"]), .field textarea, .field select {
  width: 100%;
  padding: 0.9rem 1rem;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  color: var(--ink);
  font-family: inherit;
  font-size: var(--fs-small);
  transition: border-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
}
.field input:focus, .field textarea:focus, .field select:focus {
  outline: none;
  border-color: var(--navy);
  box-shadow: 0 0 0 3px var(--orange-wash);
}
.field textarea { min-height: 150px; resize: vertical; }
.field .hint { font-size: var(--fs-micro); color: var(--ink-3); font-weight: 400; letter-spacing: 0; text-transform: none; }
.check { display: flex; gap: 0.8rem; align-items: flex-start; font-size: var(--fs-small); color: var(--ink); line-height: 1.55; }
.check input {
  width: 22px;
  height: 22px;
  margin-top: 1px;
  flex: none;
  accent-color: var(--orange);
  outline-offset: 3px;
}

.form-note {
  display: flex;
  gap: 0.7rem;
  align-items: flex-start;
  margin-top: 1rem;
  padding: 0.9rem 1.1rem;
  background: var(--orange-wash);
  border: 1px solid var(--orange-wash);
  border-radius: var(--r-sm);
  font-size: var(--fs-small);
  color: var(--ink);
}

/* ── 11 · akordeon ────────────────────────────────────────────────────────── */

.acc { border-top: var(--hair); }
.acc__item { border-bottom: var(--hair); }
.acc__btn {
  display: flex;
  align-items: center;
  gap: 1.2rem;
  width: 100%;
  padding: 1.35rem 0;
  background: none;
  border: 0;
  color: var(--ink);
  font-family: inherit;
  font-size: var(--fs-h4);
  font-weight: 700;
  letter-spacing: -0.012em;
  text-align: left;
  cursor: pointer;
  transition: color var(--t-fast) var(--ease);
}
.acc__btn:hover { color: var(--orange-ink); }
.acc__btn .no {
  flex: none;
  min-width: 2.6rem;
  color: var(--orange-ink);
  font-size: var(--fs-micro);
  font-weight: 700;
  letter-spacing: 0.14em;
}
.acc__btn .sign {
  flex: none;
  margin-left: auto;
  width: 26px; height: 26px;
  position: relative;
}
.acc__btn .sign::before, .acc__btn .sign::after {
  content: "";
  position: absolute;
  top: 50%; left: 50%;
  width: 15px; height: 2px;
  background: currentColor;
  transform: translate(-50%, -50%);
  transition: transform var(--t) var(--ease);
}
.acc__btn .sign::after { transform: translate(-50%, -50%) rotate(90deg); }
.acc__btn[aria-expanded="true"] .sign::after { transform: translate(-50%, -50%) rotate(0deg); }
.acc__btn[aria-expanded="true"] { color: var(--navy); }
.acc__panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--t-slow) var(--ease-in-out);
}
.acc__panel > div { overflow: hidden; }
.acc__item.is-open .acc__panel { grid-template-rows: 1fr; }
.acc__panel p, .acc__panel ul { padding-bottom: 1.5rem; color: var(--ink-2); font-size: var(--fs-small); max-width: 78ch; }
.acc__panel ul li { position: relative; padding-left: 1.35rem; margin-bottom: 0.45rem; }
.acc__panel ul li::before {
  content: "";
  position: absolute;
  left: 0; top: 0.62em;
  width: 7px; height: 7px;
  border: 1.5px solid var(--orange);
}

/* ── 12 · lightbox galerii ────────────────────────────────────────────────── */

.lbox {
  position: fixed;
  inset: 0;
  z-index: var(--z-lightbox);
  display: none;
  place-items: center;
  padding: clamp(1rem, 4vw, 3rem);
  background: rgba(12, 10, 38, 0.94);
  backdrop-filter: blur(6px);
}
.lbox.is-open { display: grid; }
.lbox__fig { position: relative; max-width: 100%; max-height: 100%; margin: 0; text-align: center; }
.lbox__fig img {
  max-width: 100%;
  max-height: 78vh;
  margin-inline: auto;
  border-radius: var(--r);
  object-fit: contain;
}
.lbox__cap { margin-top: 1rem; color: rgba(255, 255, 255, 0.8); font-size: var(--fs-small); }
.lbox__cap b { color: #fff; }
.lbox button {
  position: absolute;
  top: 50%;
  width: 52px; height: 52px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 50%;
  color: #fff;
  font-size: 1.3rem;
  cursor: pointer;
  transform: translateY(-50%);
  transition: background var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}
.lbox button:hover { background: var(--orange); border-color: var(--orange); }
.lbox__prev { left: clamp(0.5rem, 2vw, 2rem); }
.lbox__next { right: clamp(0.5rem, 2vw, 2rem); }
.lbox__close {
  top: clamp(0.8rem, 3vw, 2rem) !important;
  right: clamp(0.8rem, 3vw, 2rem);
  transform: none !important;
  position: fixed !important;
}

/* ── 13 · zakładki filtrów ────────────────────────────────────────────────── */

.chips { display: flex; flex-wrap: wrap; gap: 0.55rem; }
/* Filtry bywają odnośnikami (archiwum realizacji filtruje adresem, żeby
   wynik dało się wysłać komuś linkiem) albo przyciskami (filtr w treści
   strony, bez przeładowania). Wygląd jest jeden - wcześniej reguła
   wymieniała tylko przycisk i filtry w archiwum wyglądały jak zwykły tekst. */
.chips :is(button, a) {
  padding: 0.6rem 1.15rem;
  background: none;
  border: 1px solid var(--line);
  border-radius: 100px;
  color: var(--ink-2);
  font-family: inherit;
  font-size: var(--fs-micro);
  font-weight: 700;
  letter-spacing: 0.06em;
  cursor: pointer;
  transition: all var(--t-fast) var(--ease);
}
.chips :is(button, a):hover { border-color: var(--navy); color: var(--navy); }
.chips :is(button[aria-pressed="true"], a[aria-current="page"]) {
  background: var(--navy);
  border-color: var(--navy);
  color: #fff;
}

/* ── 14 · smugi (motyw ze znaku graficznego) ──────────────────────────────── */

.streaks {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}
.streaks svg { position: absolute; width: 140%; height: auto; opacity: 0.14; }

/* ── 15 · zgoda na cookies ────────────────────────────────────────────────────
   Pasek u dołu ekranu, nie okno na całą stronę. Zasłonięta treść zmusza do
   kliknięcia czegokolwiek, żeby cokolwiek przeczytać, a zgoda wymuszona nie
   jest zgodą. Oba przyciski mają ten sam ciężar wizualny z tego samego
   powodu.                                                                    */

.zgoda {
  position: fixed;
  inset-inline: 0;
  bottom: 0;
  z-index: var(--z-zgoda);
  padding: var(--s-4) var(--gutter);
  padding-bottom: max(var(--s-4), env(safe-area-inset-bottom));
  background: var(--paper);
  border-top: 3px solid var(--navy);
  box-shadow: var(--lift-2);
  transform: translateY(100%);
  transition: transform var(--t-slow) var(--ease-out);
}
.zgoda.is-in { transform: translateY(0); }

/* Od szerokości tabletu baner nie jest pasem przez cały ekran, tylko kartą
   w rogu. Pas zabierał dolną piątą część pierwszego widoku - dokładnie tę,
   w której stoją przyciski hero - i to on był pierwszą rzeczą, jaką widać
   po wejściu na stronę. Karta pyta o to samo, tylko nie zasłania odpowiedzi
   na pytanie, po co ktoś tu przyszedł.

   Wybór zostaje równorzędny: oba przyciski mają ten sam rozmiar i ten sam
   ciężar wizualny. Zmiana dotyczy miejsca, nie treści pytania. */
@media (min-width: 720px) {
  .zgoda {
    /* Prawy róg, nie lewy: w lewym karta zasłaniała przycisk hero, w prawym
       stoi tylko ozdobny wskaźnik przewijania. */
    inset-inline: auto;
    right: var(--gutter);
    bottom: var(--gutter);
    width: min(31rem, calc(100vw - 2 * var(--gutter)));
    padding: var(--s-5);
    border: 1px solid var(--line);
    border-top: 3px solid var(--navy);
    border-radius: var(--r-lg);
    transform: translateY(calc(100% + var(--gutter)));
  }

  .zgoda.is-in { transform: translateY(0); }
  .zgoda__wybor { width: 100%; }
}

.zgoda__tresc {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-4) var(--s-6);
  max-width: var(--shell);
  margin-inline: auto;
}
.zgoda__tytul {
  flex: 0 0 100%;
  font-size: var(--fs-h4);
  line-height: var(--lh-head);
}
.zgoda__opis {
  flex: 1 1 32ch;
  margin: 0;
  font-size: var(--fs-small);
  color: var(--ink-2);
}
.zgoda__opis a { color: var(--navy); text-decoration: underline; }
.zgoda__wybor { display: flex; flex-wrap: wrap; gap: var(--s-3); }
.zgoda__wybor .btn { flex: 1 1 auto; justify-content: center; }

/* Na telefonie baner nie może zjeść pół ekranu. Zmierzone przy pierwszej
   wersji: 325 px wysokości przy oknie 568 px, czyli 57% widoku na pytanie,
   które ma zająć chwilę. Przyciski zostają obok siebie, a nie jeden pod
   drugim - to samo w sobie oszczędza jeden wiersz wysokości. */
@media (max-width: 560px) {
  .zgoda { padding-block: var(--s-3); }
  .zgoda__tresc { gap: var(--s-2); }
  .zgoda__tytul { font-size: var(--fs-body); }
  /* Mniejszy stopien i ciasniejsza interlinia opisu: pas z pelnym opisem
     zabieral ~40% ekranu telefonu (przeglad mobilny 2026-09-05), po
     zmianie schodzi w okolice cwierci. Tresc zostaje ta sama. */
  .zgoda__opis { font-size: 0.85rem; line-height: 1.45; }
  .zgoda__wybor { flex-wrap: nowrap; width: 100%; margin-top: 0.2rem; }
  .zgoda__wybor .btn { flex: 1 1 0; padding-block: 0.55em; padding-inline: 0.6em; font-size: var(--fs-micro); }
}

.footer__prawne { display: flex; flex-wrap: wrap; align-items: center; gap: 1.4rem; }
.footer__zgoda {
  padding: 0;
  background: none;
  border: 0;
  color: inherit;
  font: inherit;
  text-decoration: underline;
  cursor: pointer;
}
.footer__zgoda:hover, .footer__zgoda:focus-visible { color: var(--orange); }

/* ── 16 · osłona materiału z serwisu zewnętrznego ─────────────────────────────
   Zajmuje miejsce materiału, dopóki nie ma zgody. Proporcje filmu, żeby
   odsłonięcie nie przesuwało treści pod spodem.                              */

.oslona {
  display: grid;
  place-items: center;
  aspect-ratio: 16 / 9;
  padding: var(--s-5);
  background: var(--mist-2);
  border: var(--hair);
  border-radius: var(--r);
}
.oslona__karta { max-width: 46ch; text-align: center; }
.oslona__opis {
  margin-bottom: var(--s-4);
  font-size: var(--fs-small);
  color: var(--ink-2);
}
.oslona__opis a { color: var(--navy); text-decoration: underline; }

/* ── 17 · spis skrótów (strona 404) ──────────────────────────────────────────
   Ten sam walker co w nawigacji wypisuje odnośniki bez separatorów, bo tam
   rozdziela je siatka nagłówka. Poza nagłówkiem klasa `lista-linkow` nie miała
   żadnych reguł i pozycje sklejały się w jeden ciąg: „01O firmie 02Oferta".  */

.lista-linkow {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: var(--s-3) var(--s-6);
  margin-block: var(--s-6);
}
.lista-linkow a {
  display: flex;
  align-items: baseline;
  gap: 0.8rem;
  padding: 0.7rem 0;
  border-bottom: var(--hair);
  color: var(--navy);
  font-size: var(--fs-h4);
  font-weight: 700;
  transition: color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}
.lista-linkow a span {
  color: var(--orange-ink);
  font-size: var(--fs-eyebrow);
  font-weight: 700;
  letter-spacing: var(--ls-eyebrow);
}
.lista-linkow a:hover,
.lista-linkow a:focus-visible { color: var(--orange-ink); border-color: var(--orange); }

/* ── pole wyboru pliku ────────────────────────────────────────────────────
   Przeglądarka rysuje tu własny przycisk w systemowej szarości. Na ciemnej
   stronie jest to jedyny element, który wygląda jak wklejony z innego
   miejsca, a jest to element formularza, który ma budzić zaufanie. */
.form-kontakt input[type="file"] {
  padding: 0.7rem 0.9rem;
  cursor: pointer;
}

.form-kontakt input[type="file"]::file-selector-button {
  margin-right: 0.9rem;
  padding: 0.5rem 1rem;
  border: 1px solid var(--orange);
  border-radius: var(--r-sm);
  background: transparent;
  color: var(--orange-ink);
  font-family: inherit;
  font-size: var(--fs-small);
  font-weight: 700;
  cursor: pointer;
  transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}

.form-kontakt input[type="file"]:hover::file-selector-button,
.form-kontakt input[type="file"]:focus-visible::file-selector-button {
  background: var(--orange);
  color: #fff;
}