/* =========================================================
   SOL-BUD Rusztowania, Koszęcin
   Paleta: Piasek i cynk, akcent morski
   Kroje: Instrument Sans (treść), IBM Plex Mono (liczby)
   ========================================================= */

/* --- Kroje pism, hosting własny ------------------------------
   Wcześniej wczytywane z fonts.googleapis.com. Przeglądarka
   nawiązywała wtedy połączenie z serwerem Google przy każdym
   wejściu i przekazywała mu adres IP, czyli dane osobowe poza
   Europejski Obszar Gospodarczy, bez zgody i bez możliwości
   odmowy. Pliki leżą teraz na naszym serwerze.

   Zakres `latin-ext` jest obowiązkowy: bez niego przeglądarka
   podstawia krój zastępczy dla ą, ć, ę, ł, ń, ó, ś, ź, ż.

   Instrument Sans jest krojem zmiennym, więc jeden plik obsługuje
   całą oś od 400 do 700. IBM Plex Mono jest statyczny i wymaga
   osobnego pliku na każdą grubość.

   Obydwa kroje na licencji SIL Open Font License 1.1, która
   wprost dopuszcza hosting własny.
   ------------------------------------------------------------ */

@font-face {
  font-family: "Instrument Sans";
  src: url("kroje/instrument-sans-latin-ext.woff2") format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7,
    U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F,
    U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F,
    U+A720-A7FF;
}
@font-face {
  font-family: "Instrument Sans";
  src: url("kroje/instrument-sans-latin.woff2") format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
    U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
    U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "IBM Plex Mono";
  src: url("kroje/plex-mono-400-latin-ext.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7,
    U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F,
    U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F,
    U+A720-A7FF;
}
@font-face {
  font-family: "IBM Plex Mono";
  src: url("kroje/plex-mono-400-latin.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
    U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
    U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "IBM Plex Mono";
  src: url("kroje/plex-mono-500-latin-ext.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7,
    U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F,
    U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F,
    U+A720-A7FF;
}
@font-face {
  font-family: "IBM Plex Mono";
  src: url("kroje/plex-mono-500-latin.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
    U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
    U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  /* Grunt */
  --piasek: #efe9df;
  --piasek-2: #e3ded2;
  --cynk-jasny: #dcdcd8;
  --cynk: #a9b0b3;

  /* Grafit */
  --grafit: #23262a;
  --grafit-2: #33373c;
  --stal: #55595d;
  --stal-jasna: #9ca4a8;

  /* Akcent gałęzi wynajmu */
  --morska: #14555c;
  --morska-ciemna: #0e4046;
  --morska-jasna: #5fb3bc;

  /* Akcent gałęzi remontowo-budowlanej.
     Ten sam grunt piaskowy, inny akcent. Para brąz i morska jest
     jedną z bezpieczniejszych przy najczęstszych wadach widzenia
     barw, bo różnicę niesie oś żółto-niebieska, a nie czerwono-zielona. */
  --ceglana: #8a4b2a;
  --ceglana-ciemna: #6d3a1f;
  --ceglana-jasna: #d19571;

  --biel: #ffffff;

  /* Akcent bieżącej gałęzi. Komponenty czytają wyłącznie te trzy
     zmienne, więc przełączenie gałęzi to podmiana trzech wartości,
     a nie drugi zestaw reguł. */
  --akcent: var(--morska);
  --akcent-ciemny: var(--morska-ciemna);
  --akcent-jasny: var(--morska-jasna);

  /* Linie */
  /* Czerwien niedzieli. Ciemniejsza niz typowa kalendarzowa, zeby
     na piaskowym tle wychodzila ponad 4,5:1 wobec tla komorki. */
  --niedziela: #8f2f2f;

  --linia: rgba(35, 38, 42, 0.16);
  /* Krycie 0,55, nie 0,32. Przy 0,32 obrys pola dawał 1,90:1 na
     piasku i 1,86:1 na tle sekcji, przy progu 3:1 dla elementów
     sterujących. Zmierzone warianty pośrednie: 0,40 daje 2,30,
     0,50 daje 2,94. Dopiero 0,55 przechodzi: 3,36:1 i 3,23:1. */
  --linia-mocna: rgba(35, 38, 42, 0.55);
  --linia-jasna: rgba(239, 233, 223, 0.2);

  /* Typografia */
  --font: "Instrument Sans", "Segoe UI", system-ui, sans-serif;
  --mono: "IBM Plex Mono", "Consolas", monospace;

  /* Rytm */
  --maks: 1240px;
  --gutter: clamp(1.25rem, 4vw, 3rem);
  --sekcja: clamp(3.5rem, 8vw, 6.5rem);

  /* Moduł rusztowania: rozstaw pól w siatce tła */
  --przeslo: 103px;

  /* Wysokość przyklejonego paska. Rozdroże ma jedno pasmo,
     gałęzie dwa, a od tej liczby zależą odstępy pod paskiem
     i miejsce, w którym zatrzymują się kotwice. */
  /* Realna wysokość przyklejonego nagłówka gałęzi: pasmo przełącznika
     45 px plus pasmo menu 62 px. Wartość musi się zgadzać z pomiarem,
     bo na niej stoi odstęp sekcji otwierającej i skok do kotwic.
     Wcześniej było tu 100 px i pierwsza etykieta wchodziła pod
     nagłówek na 20 px przy niższym oknie. */
  --naglowek-h: 108px;
}

/* Gałąź remontowo-budowlana. Atrybut siada na znaczniku html. */
[data-galaz="budowa"] {
  --akcent: var(--ceglana);
  --akcent-ciemny: var(--ceglana-ciemna);
  --akcent-jasny: var(--ceglana-jasna);
}

body.strona-glowna {
  --naglowek-h: 78px;
}

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* Serwis jest jasny. Bez tej deklaracji przeglądarka przy ciemnym
     ustawieniu systemu rysuje pola formularza i paski przewijania
     w ciemnym wariancie, co rozjeżdża się z resztą strony. */
  color-scheme: light;
  /* przyklejony pasek ma 76px, bez tego kotwice lądują pod nim */
  scroll-padding-top: calc(var(--naglowek-h) + 16px);
}

body {
  margin: 0;
  background: var(--piasek);
  color: var(--grafit);
  font-family: var(--font);
  font-size: 1.0625rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

h1,
h2,
h3 {
  margin: 0;
  font-weight: 700;
  line-height: 1.04;
  letter-spacing: -0.035em;
  text-wrap: balance;
}

p {
  margin: 0 0 1.1em;
  /* Ostatni wiersz akapitu nie zostaje z jednym wyrazem.
     Przeglądarki bez obsługi po prostu to ignorują. */
  text-wrap: pretty;
}
p:last-child {
  margin-bottom: 0;
}

a {
  color: inherit;
}

/* ---------- Pomocnicze ---------- */
.oprawa {
  width: 100%;
  max-width: var(--maks);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.tylko-dla-czytnikow {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.pomin-do-tresci {
  position: absolute;
  left: 0.5rem;
  top: -100%;
  z-index: 999;
  background: var(--grafit);
  color: var(--piasek);
  padding: 0.75rem 1.25rem;
  font-family: var(--mono);
  font-size: 0.8125rem;
  transition: top 0.18s ease;
}
.pomin-do-tresci:focus {
  top: 0.5rem;
}

.etykieta {
  font-family: var(--mono);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--stal);
  display: block;
}

:focus-visible {
  outline: 3px solid var(--akcent);
  outline-offset: 3px;
}

/* Na ciemnych pasmach akcent w wersji podstawowej daje 1,6:1 wobec
   grafitu, czyli poniżej progu 3:1 dla elementów nietekstowych.
   Wersja jasna daje 6,27:1 dla morskiej i 5,97:1 dla ceglanej. */
.roznica :focus-visible,
.stopka :focus-visible,
.ofirmie--ciemna :focus-visible,
.lupa :focus-visible,
.kadr-pasmo__opis :focus-visible,
[data-tlo="ciemne"] :focus-visible {
  outline-color: var(--akcent-jasny);
}

/* Cel odnośnika pomijającego nie rysuje własnego obramowania,
   bo skok do treści i tak przenosi wzrok we właściwe miejsce. */
main:focus-visible {
  outline: none;
}

/* Siatka przęseł: struktura z modułu rusztowania */
.siatka {
  position: relative;
}
.siatka::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: repeating-linear-gradient(
    90deg,
    rgba(35, 38, 42, 0.06) 0 1px,
    transparent 1px var(--przeslo)
  );
  pointer-events: none;
}
.siatka > * {
  position: relative;
}

/* =========================================================
   Nagłówek strony
   ========================================================= */
.naglowek {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  background: rgba(239, 233, 223, 0);
  border-bottom: 1px solid transparent;
  transition:
    background 0.25s ease,
    border-color 0.25s ease,
    backdrop-filter 0.25s ease;
}
.naglowek[data-przyklejony="tak"] {
  background: rgba(239, 233, 223, 0.975);
  backdrop-filter: blur(12px) saturate(1.08);
  border-bottom-color: var(--linia);
  box-shadow: 0 12px 28px -26px rgba(35, 38, 42, 0.75);
}

/* Górne pasmo: znak firmowy i przełącznik gałęzi.
   Menu zostaje w paśmie dolnym i pokazuje wyłącznie pozycje tej
   gałęzi, w której jesteśmy. Bez tego podziału menu miałoby
   kilkanaście pozycji i nie dałoby się z niego nic wyczytać. */
.naglowek__pasmo {
  border-bottom: 1px solid var(--linia);
}

/* Rozdroże: strona główna nie ma menu, bo cały jej sens to wybór
   jednej z dwóch gałęzi. Trzeci poziom nawigacji obok przełącznika
   i dwóch kafli tylko rozmywał decyzję. */
.naglowek--rozdroze {
  --naglowek-h: 78px;
}
.naglowek--rozdroze .naglowek__pasmo-wnetrze {
  min-height: 78px;
  gap: clamp(1rem, 3vw, 2.5rem);
}
.naglowek--rozdroze .marka {
  font-size: 1.0625rem;
}
.naglowek--rozdroze .przelacznik {
  margin-left: auto;
}
.naglowek--rozdroze .telefon-naglowek {
  margin-left: clamp(0.75rem, 2vw, 1.75rem);
}

.naglowek__pasmo-wnetrze {
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  gap: 1rem;
  /* Zalecane pole dotykowe to 44 piksele. */
  min-height: 44px;
  padding-right: 0;
}

.przelacznik {
  display: flex;
  align-self: stretch;
}
.przelacznik a {
  display: flex;
  align-items: center;
  padding-inline: clamp(0.7rem, 1.4vw, 1.1rem);
  border-left: 1px solid var(--linia);
  font-family: var(--mono);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--stal);
  transition:
    background 0.18s ease,
    color 0.18s ease;
}
.przelacznik a:hover {
  color: var(--grafit);
  background: var(--piasek-2);
}
.przelacznik__budowa[aria-current] {
  background: var(--ceglana);
  color: var(--biel);
}
.przelacznik__rusztowania[aria-current] {
  background: var(--morska);
  color: var(--biel);
}
.przelacznik a[aria-current]:hover {
  color: var(--biel);
}
.przelacznik__budowa[aria-current]:hover {
  background: var(--ceglana-ciemna);
}
.przelacznik__rusztowania[aria-current]:hover {
  background: var(--morska-ciemna);
}

/* Nazwa gałęzi w paśmie dolnym, w miejscu, gdzie wcześniej stał
   znak firmowy. Odsyła do strony otwierającej swojej gałęzi. */
.galaz-nazwa {
  display: flex;
  align-items: center;
  flex: 0 0 auto;
  font-weight: 700;
  font-size: 1.0625rem;
  letter-spacing: -0.025em;
  text-decoration: none;
  white-space: nowrap;
  color: var(--grafit);
}
.galaz-nazwa:hover {
  color: var(--akcent-ciemny);
}

.naglowek__wnetrze {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(1rem, 2vw, 2rem);
  min-height: 62px;
  /* bez tego pozycje menu wypychają przycisk z telefonem
     poza obszar treści przy węższym oknie */
  flex-wrap: nowrap;
}

.marka {
  display: flex;
  align-items: center;
  font-weight: 700;
  font-size: 0.9375rem;
  letter-spacing: -0.025em;
  text-decoration: none;
  white-space: nowrap;
  flex: 0 0 auto;
}
.marka em {
  font-style: normal;
  color: var(--stal);
  font-weight: 500;
}

/* ---------- Znak firmowy przy nazwie ----------

   Rysunek stoi w `img/marka/ikona-solbud.svg` i wchodzi tu jako
   maska, nie jako obrazek. Dzięki temu barwę daje
   `background-color`, czyli ta sama kaskada, która ustala kolor
   napisu obok: morska na wynajmie, ceglana na remontach, rdzawa
   na rozdrożu, jasna w ciemnej stopce. Jeden plik zamiast czterech.

   Adres jest względny do tego arkusza, czyli do korzenia serwisu,
   więc działa z każdego katalogu bez `../`.

   Domyślnie ukryty. Bez obsługi masek pusty element byłby
   kolorowym prostokątem obok nazwy, więc pokazuje się dopiero
   wewnątrz `@supports`. */
.marka__znak {
  display: none;
}

@supports (mask-image: url("#a")) or (-webkit-mask-image: url("#a")) {
  .marka__znak {
    display: block;
    flex: 0 0 auto;
    /* Znak jest leżący w kwadratowym polu, więc przy 1,75 em jego
       rysunek ma mniej więcej wysokość wersalika sąsiedniej nazwy. */
    width: 1.75em;
    height: 1.75em;
    background-color: var(--akcent);
    -webkit-mask: url("img/marka/ikona-solbud.svg") center / contain no-repeat;
    mask: url("img/marka/ikona-solbud.svg") center / contain no-repeat;
  }
}

/* Rozdroże nie należy do żadnej gałęzi, więc znak bierze tam barwę
   samego loga, tę z pliku, który przysłał klient. */
.rozdroze__marka .marka__znak {
  background-color: #c85c2d;
}

/* Stopka stoi na grafitcie: morska i ceglana na nim gasną. */
.stopka__marka .marka__znak {
  background-color: var(--akcent-jasny);
}

.marka {
  gap: 0.45rem;
}
.stopka__marka,
.rozdroze__marka {
  display: flex;
  align-items: center;
  gap: 0.55rem;
}

.nawigacja {
  display: flex;
  align-items: center;
  gap: clamp(0.9rem, 1.8vw, 2rem);
  min-width: 0;
  flex: 0 1 auto;
}
.nawigacja a:not(.telefon-naglowek) {
  text-decoration: none;
  font-size: 0.9375rem;
  color: var(--grafit-2);
  padding: 0.72rem 0;
  border-bottom: 2px solid transparent;
  transition: border-color 0.18s ease;
}
.nawigacja a:not(.telefon-naglowek):hover {
  border-bottom-color: var(--akcent);
}
.nawigacja a:not(.telefon-naglowek)[aria-current="page"] {
  border-bottom-color: var(--grafit);
}

/* Rezerwacja w menu: przycisk, nie kolejny link.

   Byla druga pozycja w szeregu szesciu, wygladajac tak samo jak
   „Zasieg dowozu". To jedyna pozycja, ktora konczy sie zamowieniem,
   wiec wychodzi z szeregu i staje tam, gdzie oko szuka glownej
   akcji: na koncu paska, przy numerze telefonu.

   UWAGA NA WAGE SELEKTORA. Szereg linkow ustawia
   `.nawigacja a:not(.telefon-naglowek)`, a `:not()` DOLICZA wage
   swojego argumentu — to selektor o wadze (0,2,1), nie (0,1,1).
   Pierwsza wersja tej reguly miala (0,2,0) i przegrywala: tlo sie
   ustawialo, ale kolor tekstu zostawal grafitowy na morskim tle,
   czyli kontrast 1,42 zamiast wymaganych 4,5. Stad `a` w selektorze,
   ktore wyrownuje wage do (0,2,1); przy remisie wygrywa regula
   pozniejsza w pliku, a ta jest pozniej. */
.nawigacja a.nawigacja__rezerwacja {
  padding: 0.5rem 1rem;
  background: var(--akcent);
  border-bottom: 2px solid var(--akcent);
  color: var(--biel);
  font-weight: 600;
  white-space: nowrap;
}
.nawigacja a.nawigacja__rezerwacja:hover {
  background: var(--akcent-ciemny);
  border-bottom-color: var(--akcent-ciemny);
}
.nawigacja a.nawigacja__rezerwacja[aria-current="page"] {
  background: var(--grafit);
  border-bottom-color: var(--grafit);
}

/* Kafelek z numerem telefonu.
   Kolory schodzą z lokalnych zmiennych, więc ten sam komponent
   działa na piasku i na graficie. Wystarczy podmienić zmienne
   w kontenerze, nie trzeba pisać drugiego zestawu reguł. */
.telefon-naglowek {
  --tel-obrys: var(--akcent);
  --tel-obrys-mocny: var(--akcent-ciemny);
  --tel-numer: var(--akcent-ciemny);
  --tel-etykieta: var(--stal);
  --tel-tlo-najazd: var(--akcent);
  --tel-tekst-najazd: var(--biel);
  --tel-etykieta-najazd: rgba(255, 255, 255, 0.75);

  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.5rem 1rem;
  border: 1px solid var(--tel-obrys);
  background: transparent;
  color: var(--tel-numer);
  text-decoration: none;
  white-space: nowrap;
  transition:
    background 0.18s ease,
    border-color 0.18s ease,
    color 0.18s ease;
}

.telefon-naglowek:hover {
  background: var(--tel-tlo-najazd);
  border-color: var(--tel-tlo-najazd);
  color: var(--tel-tekst-najazd);
}
.telefon-naglowek:hover .telefon-naglowek__etykieta {
  color: var(--tel-etykieta-najazd);
}

/* Wariant na ciemne tło: stopka, pasma na graficie, sekcje odwrócone */
.telefon-naglowek--ciemny,
.stopka .telefon-naglowek,
.roznica .telefon-naglowek,
[data-tlo="ciemne"] .telefon-naglowek {
  --tel-obrys: var(--akcent-jasny);
  --tel-obrys-mocny: var(--akcent-jasny);
  --tel-numer: #8fd3da;
  --tel-etykieta: var(--stal-jasna);
  --tel-tlo-najazd: var(--akcent-jasny);
  --tel-tekst-najazd: var(--grafit);
  --tel-etykieta-najazd: var(--grafit-2);
}

/* Ikona słuchawki rysowana obrysem, bez pliku i bez biblioteki */
.telefon-naglowek svg {
  width: 17px;
  height: 17px;
  flex: 0 0 auto;
  opacity: 0.85;
}

.telefon-naglowek__tresc {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  line-height: 1.05;
}

/* Nadkreślenie nad numerem. Bez niego kafelek był pustą ramką
   z drobnym napisem w środku. */
.telefon-naglowek__etykieta {
  font-family: var(--mono);
  font-size: 0.625rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--tel-etykieta);
  margin-bottom: 0.22rem;
  transition: color 0.18s ease;
}

.telefon-naglowek__numer {
  font-family: var(--mono);
  font-weight: 500;
  font-size: 0.9375rem;
  letter-spacing: 0.04em;
}

.telefon-naglowek--pulpit {
  margin-left: clamp(0.75rem, 1.8vw, 1.75rem);
}

.przycisk-menu {
  display: none;
  background: none;
  border: 1px solid var(--linia-mocna);
  padding: 0.5rem 0.8rem;
  font-family: var(--mono);
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  cursor: pointer;
  color: var(--grafit);
}

/* =========================================================
   Sekcja otwierająca: rusztowanie budowane przewijaniem
   ========================================================= */
.otwarcie {
  /* Wysokość taśmy przewijania. Im dłuższa, tym mniejsza zmiana
     obrazu przypada na jeden piksel przewijania, czyli tym płynniej,
     ale tym więcej trzeba przewinąć. Sekcja może to nadpisać. */
  height: var(--tasma, 400vh);
  position: relative;
  background: var(--piasek);
}

.otwarcie__scena {
  position: sticky;
  top: 0;
  /* `min-height` zamiast `height`. Przy sztywnej wysokości scena
     przycinała treść przez `overflow: hidden`: na niskim oknie
     odstęp na nagłówek plus kolumna tekstu przekraczały 100vh
     i znikały oba przyciski wezwania do działania. Teraz scena
     rośnie, kiedy treść tego wymaga, a przypięcie działa dalej,
     bo taśma `.otwarcie` ma kilkaset procent wysokości okna. */
  min-height: 100vh;
  overflow: hidden;
  display: grid;
  align-content: center;
}

/* Sekcja otwierająca dostaje szerszą oprawę niż reszta strony,
   żeby panel z animacją mógł być duży, a kolumna tekstu nadal
   miała sensowną szerokość wiersza. */
.otwarcie__uklad {
  max-width: 1400px;
  display: grid;
  grid-template-columns: minmax(0, 440px) minmax(0, 1fr);
  gap: clamp(1.75rem, 3.5vw, 3.5rem);
  align-items: center;
  /* Odstęp górny liczony z wysokości nagłówka, nie wpisany na sztywno.
     Sekcja jest wyśrodkowana w pełnej wysokości okna, więc przy niskim
     oknie treść dojeżdża do góry i bez tego zapasu chowa się pod
     przyklejonym nagłówkiem. */
  padding-block: calc(var(--naglowek-h) + 2rem) 3rem;
}

/* Panel z animacją.
   Materiał ma 1280 pikseli szerokości. Panel o szerokości 880
   przy gęstości pikseli 1,5 daje 1320, czyli praktycznie skalę
   jeden do jednego. Powyżej tej wartości obraz zaczyna być
   rozciągany i miękki, bo więcej szczegółu w pliku nie ma. */
.otwarcie__panel {
  position: relative;
  width: 100%;
  max-width: 880px;
  margin-left: auto;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border: 1px solid var(--linia);
  background: var(--cynk-jasny);
}

.otwarcie__plotno {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

.otwarcie__podpis {
  position: absolute;
  left: 0;
  bottom: 0;
  background: var(--piasek);
  border-top: 1px solid var(--linia);
  border-right: 1px solid var(--linia);
  font-family: var(--mono);
  font-size: 0.625rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--stal);
  padding: 0.45rem 0.75rem;
}

.otwarcie__tresc {
  position: relative;
  width: 100%;
}

/* Warstwa 1: nadkreślenie i nagłówek.
   Widoczne od razu, bez wiązania z przewijaniem. Gdyby zależały
   od postępu, strona przy wejściu wyglądałaby na pustą, a to
   właśnie nagłówek ma zatrzymać człowieka. Wejście jest tu
   zwykłą animacją przy wczytaniu. */
.otwarcie__nad {
  color: var(--stal);
  margin-bottom: 1.25rem;
  animation: wejscie 0.7s 0.1s ease-out both;
}

.otwarcie h1 {
  font-size: clamp(2rem, 4.6vw, 3.75rem);
  max-width: 15ch;
  animation: wejscie 0.8s 0.2s ease-out both;
}

@keyframes wejscie {
  from {
    opacity: 0;
    transform: translateY(18px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

/* Warstwy 2 do 4 wchodzą razem z kolejnymi etapami montażu.
   Sterowane numerem etapu, a nie ciągłym postępem, żeby
   pojawiały się dokładnie wtedy, gdy konstrukcja dojedzie
   do swojej klatki kluczowej. */
.otwarcie__lead,
.otwarcie__liczby,
.otwarcie__przyciski {
  opacity: 0;
  transform: translateY(16px);
  transition:
    opacity 0.55s ease,
    transform 0.55s ease;
}

/* Etap 0 to pusty plac, 1 stojaki, 2 stężenia,
   3 podesty, 4 komplet. Treść dochodzi od etapu 2. */
.otwarcie[data-etap="2"] .otwarcie__lead,
.otwarcie[data-etap="3"] .otwarcie__lead,
.otwarcie[data-etap="4"] .otwarcie__lead,
.otwarcie[data-etap="3"] .otwarcie__liczby,
.otwarcie[data-etap="4"] .otwarcie__liczby,
.otwarcie[data-etap="4"] .otwarcie__przyciski {
  opacity: 1;
  transform: none;
}

.otwarcie__lead {
  margin-top: 1.5rem;
  max-width: 44ch;
  font-size: clamp(1rem, 1.5vw, 1.1875rem);
  color: var(--stal);
}
.otwarcie__lead b {
  color: var(--akcent);
  font-weight: 600;
}

.otwarcie__liczby {
  display: flex;
  flex-wrap: wrap;
  gap: 0 clamp(1.5rem, 3vw, 2.75rem);
  margin-top: 2rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--linia);
}
.otwarcie__liczby div strong {
  display: block;
  font-family: var(--mono);
  font-size: clamp(1.25rem, 2vw, 1.625rem);
  font-weight: 500;
  color: var(--akcent);
  line-height: 1.2;
}
.otwarcie__liczby div span {
  font-size: 0.8125rem;
  color: var(--stal);
}

.otwarcie__przyciski {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 2rem;
}


/* wskaźnik przewijania, znika gdy człowiek ruszy */
.otwarcie__wskaznik {
  position: absolute;
  left: 50%;
  bottom: 1.75rem;
  transform: translateX(-50%);
  margin: 0;
  font-family: var(--mono);
  font-size: 0.6875rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--stal);
  display: flex;
  align-items: center;
  gap: 0.6rem;
  opacity: clamp(0, calc(1 - var(--p, 0) / 0.08), 1);
  pointer-events: none;
}
.otwarcie__wskaznik i {
  font-style: normal;
  animation: zjazd 1.9s ease-in-out infinite;
  display: inline-block;
}
@keyframes zjazd {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(5px);
  }
}

/* pasek postępu montażu, pod panelem z animacją */
.otwarcie__postep {
  position: relative;
  height: 2px;
  background: var(--cynk);
  margin-top: 0.75rem;
  max-width: 880px;
  margin-left: auto;
}
.otwarcie__postep i {
  position: absolute;
  inset: 0 auto 0 0;
  background: var(--akcent);
  width: calc(var(--p, 0) * 100%);
}

/* =========================================================
   Sekcja 2. Kalkulator skrócony
   Pasmo cynkowe, czyli strefa techniczna palety.
   ========================================================= */
.kalkulator {
  background: var(--cynk-jasny);
  border-top: 1px solid var(--linia);
  border-bottom: 1px solid var(--linia);
  padding-block: var(--sekcja);
}

.kalkulator__uklad {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  gap: clamp(2rem, 4vw, 4rem);
  align-items: start;
}

.kalkulator h2 {
  font-size: clamp(1.5rem, 3vw, 2.25rem);
  margin-top: 1.25rem;
  max-width: 18ch;
}

.kalkulator__opis {
  margin-top: 1rem;
  color: var(--stal);
  max-width: 46ch;
}

.kalkulator__pola {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.25rem 1.5rem;
  margin-top: 2rem;
}

.pole label {
  display: block;
  font-size: 0.875rem;
  font-weight: 500;
  margin-bottom: 0.45rem;
}

.pole__wejscie {
  display: flex;
  align-items: stretch;
  border: 1px solid var(--linia-mocna);
  background: var(--piasek);
  transition: border-color 0.16s ease;
}
.pole__wejscie:focus-within {
  border-color: var(--akcent);
  /* Sama zmiana koloru krawędzi bywa niezauważalna. Pierścień
     powtarza to, co przy innych elementach robi outline. */
  box-shadow: 0 0 0 3px var(--piasek-2);
}

.pole__wejscie select,
.pole__wejscie textarea {
  flex: 1;
  min-width: 0;
  border: 0;
  background: transparent;
  font: inherit;
  color: var(--grafit);
  padding: 0.7rem 0.9rem;
  resize: vertical;
}
/* Sygnał skupienia niesie oprawa pola, dlatego wnętrze może
   zrezygnować z własnego obramowania. */
.pole__wejscie select:focus,
.pole__wejscie textarea:focus {
  outline: none;
}
/* Strzałka listy rozwijanej rysowana w tle, bez pliku graficznego */
.pole__wejscie select {
  appearance: none;
  cursor: pointer;
  background-image: linear-gradient(45deg, transparent 50%, var(--stal) 50%),
    linear-gradient(135deg, var(--stal) 50%, transparent 50%);
  background-position:
    calc(100% - 1.15rem) 1.15rem,
    calc(100% - 0.8rem) 1.15rem;
  background-size:
    6px 6px,
    6px 6px;
  background-repeat: no-repeat;
  padding-right: 2.4rem;
}

.pole__wejscie input {
  flex: 1;
  min-width: 0;
  border: 0;
  background: transparent;
  padding: 0.7rem 0.8rem;
  font-family: var(--mono);
  font-size: 1.0625rem;
  color: var(--grafit);
  border-radius: 0;
  -moz-appearance: textfield;
}
.pole__wejscie input::-webkit-outer-spin-button,
.pole__wejscie input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.pole__wejscie input:focus {
  outline: none;
}

.pole__jednostka {
  display: flex;
  align-items: center;
  padding-inline: 0.75rem;
  border-left: 1px solid var(--linia);
  font-family: var(--mono);
  font-size: 0.8125rem;
  color: var(--stal);
  background: var(--piasek-2);
}

.pole__podpowiedz {
  display: block;
  margin-top: 0.4rem;
  font-size: 0.75rem;
  line-height: 1.5;
  color: var(--stal);
}

.kalkulator__metraz {
  margin-top: 1.75rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--linia);
  font-size: 0.9375rem;
  color: var(--stal);
}
.kalkulator__metraz b {
  font-family: var(--mono);
  font-weight: 500;
  color: var(--grafit);
}

/* ---------- Panel z wynikiem ---------- */
.wynik {
  background: var(--grafit);
  color: var(--piasek);
  padding: clamp(1.5rem, 3vw, 2.25rem);
  position: sticky;
  top: 96px;
}

.wynik__etykieta {
  font-family: var(--mono);
  font-size: 0.6875rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--akcent-jasny);
  display: block;
  margin-bottom: 1.25rem;
}

.wynik__kwota {
  margin: 0;
  font-family: var(--mono);
  font-weight: 500;
  font-size: clamp(2rem, 4.4vw, 3rem);
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--biel);
}
.wynik__kwota small {
  font-size: 0.875rem;
  color: var(--stal-jasna);
  letter-spacing: 0.04em;
  margin-left: 0.45rem;
}

.wynik__brutto {
  margin: 0.55rem 0 0;
  font-family: var(--mono);
  font-size: 0.875rem;
  color: var(--stal-jasna);
}

.wynik__rozbicie {
  list-style: none;
  margin: 1.75rem 0 0;
  padding: 0;
}
.wynik__rozbicie li {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  padding: 0.7rem 0;
  border-bottom: 1px solid var(--linia-jasna);
  font-size: 0.9375rem;
  color: var(--stal-jasna);
}
.wynik__rozbicie li:first-child {
  border-top: 1px solid var(--linia-jasna);
}
.wynik__rozbicie b {
  font-family: var(--mono);
  font-weight: 500;
  color: var(--biel);
  white-space: nowrap;
}
.wynik__rozbicie em {
  font-style: normal;
  font-family: var(--mono);
  font-size: 0.75rem;
  color: var(--stal-jasna);
}
.wynik__rozbicie span b {
  color: var(--piasek);
}
.wynik__rozbicie li[data-pusty="tak"] {
  opacity: 0.4;
}
#k-wiersz-rabat b {
  color: var(--akcent-jasny);
}

.wynik__uwaga {
  margin: 1.25rem 0 0;
  padding: 0.75rem 0.9rem;
  border: 1px solid var(--akcent-jasny);
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--akcent-jasny);
}

.wynik__zastrzezenie {
  margin: 1.25rem 0 0;
  font-size: 0.8125rem;
  line-height: 1.55;
  color: var(--stal-jasna);
}

.wynik__cta {
  margin-top: 1.5rem;
  width: 100%;
  justify-content: center;
  background: var(--akcent-jasny);
  border-color: var(--akcent-jasny);
  color: var(--grafit);
}
.wynik__cta:hover {
  background: var(--biel);
  border-color: var(--biel);
  color: var(--grafit);
}

@media (max-width: 900px) {
  .kalkulator__uklad {
    grid-template-columns: 1fr;
  }
  .wynik {
    position: static;
  }
}

@media (max-width: 520px) {
  .kalkulator__pola {
    grid-template-columns: 1fr;
  }
}

/* =========================================================
   Sekcja 3. Skąd bierze się różnica w cenie
   ========================================================= */
.roznica {
  background: var(--grafit);
  color: var(--piasek);
  padding-block: var(--sekcja);
  /* skala wykresu stawek: 1,60 zł na całą szerokość pola */
  --skala: 1.6;
}

.roznica__uklad {
  display: grid;
  grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
  gap: clamp(2rem, 4vw, 4.5rem);
  align-items: start;
}

.roznica .etykieta {
  color: var(--akcent-jasny);
}

.roznica h2 {
  font-size: clamp(1.5rem, 3vw, 2.375rem);
  color: var(--biel);
  margin-top: 1.25rem;
  max-width: 20ch;
}

.roznica__tekst p {
  margin-top: 1.25rem;
  color: var(--stal-jasna);
  max-width: 50ch;
}

/* ---------- Wykres porównawczy ---------- */
.wykres__glowa {
  display: flex;
  justify-content: space-between;
  font-family: var(--mono);
  font-size: 0.6875rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--stal-jasna);
  padding-bottom: 0.75rem;
  border-bottom: 1px solid var(--linia-jasna);
}

.wykres__pole {
  position: relative;
  padding-top: 1.25rem;
}

.wykres__lista {
  list-style: none;
  margin: 1rem 0 0;
  padding: 0;
  display: grid;
  gap: 1rem;
}

.wykres__lista li {
  display: grid;
  grid-template-columns: 8.5rem minmax(0, 1fr) 5.5rem;
  align-items: center;
  gap: 0.9rem;
}

/* ---------- Pasma zakresów stawek ---------- */
.pasmo {
  position: absolute;
  top: 0;
  bottom: 0;
  left: calc(var(--od) / var(--skala) * 100%);
  width: calc((var(--do) - var(--od)) / var(--skala) * 100%);
  background: var(--akcent-jasny);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.85s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.pasmo--rynek {
  background: repeating-linear-gradient(
    -45deg,
    rgba(239, 233, 223, 0.55) 0 2px,
    rgba(239, 233, 223, 0.16) 2px 7px
  );
  transition-delay: 0.12s;
}
.wykres[data-widoczny="tak"] .pasmo {
  transform: scaleX(1);
}

/* średnia rynkowa jako pionowa kreska */
.srednia {
  position: absolute;
  top: -5px;
  bottom: -5px;
  left: calc(var(--srednia) / var(--skala) * 100%);
  width: 2px;
  background: var(--biel);
  opacity: 0;
  transition: opacity 0.4s ease 0.7s;
}
.wykres[data-widoczny="tak"] .srednia {
  opacity: 1;
}

.wykres__legenda {
  margin-top: 1.5rem;
  font-size: 0.8125rem;
  line-height: 1.6;
  color: var(--stal-jasna);
}
.wykres__legenda b {
  color: var(--biel);
  font-family: var(--mono);
  font-weight: 500;
}

/* ---------- Przykład kwotowy ---------- */
.wykres__przyklad {
  margin-top: 1.75rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--linia-jasna);
}
.wykres__przyklad-opis {
  font-family: var(--mono);
  font-size: 0.6875rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--stal-jasna);
}
.wykres__przyklad-kwoty {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem 1.5rem;
  margin-top: 0.9rem;
}
.wykres__przyklad-kwoty b {
  display: block;
  font-family: var(--mono);
  font-weight: 500;
  font-size: clamp(1.5rem, 3vw, 2rem);
  line-height: 1.1;
  color: var(--akcent-jasny);
}
.wykres__przyklad-kwoty b.drozej {
  color: var(--stal-jasna);
  text-decoration: line-through;
  text-decoration-thickness: 1px;
}
.wykres__przyklad-kwoty span {
  display: block;
  margin-top: 0.25rem;
  font-size: 0.8125rem;
  color: var(--stal-jasna);
}

.wykres__miasto {
  font-size: 0.9375rem;
  color: var(--piasek);
  line-height: 1.25;
}
.wykres__miasto em {
  display: block;
  font-style: normal;
  font-family: var(--mono);
  font-size: 0.6875rem;
  color: var(--stal-jasna);
  margin-top: 0.1rem;
}

.wykres__pasek {
  display: block;
  height: 18px;
  background: rgba(239, 233, 223, 0.08);
  position: relative;
}
.wykres__pasek {
  height: 18px;
}

.wykres__kwota {
  font-family: var(--mono);
  font-weight: 500;
  font-size: 0.9375rem;
  color: var(--biel);
  text-align: right;
  white-space: nowrap;
}

.wykres__nota {
  margin-top: 1.5rem;
  padding-top: 1rem;
  border-top: 1px solid var(--linia-jasna);
  font-size: 0.75rem;
  line-height: 1.6;
  color: var(--stal-jasna);
}

@media (max-width: 900px) {
  .roznica__uklad {
    grid-template-columns: 1fr;
  }
  .wykres__lista li {
    grid-template-columns: 7rem minmax(0, 1fr) 3.75rem;
    gap: 0.6rem;
  }
  .wykres__miasto {
    font-size: 0.875rem;
  }
  .wykres__lista li {
    grid-template-columns: 6.5rem minmax(0, 1fr) 5rem;
  }
  .wykres__przyklad-kwoty {
    grid-template-columns: 1fr;
  }
}

@media (prefers-reduced-motion: reduce) {
  .pasmo {
    transform: scaleX(1);
    transition: none;
  }
  .srednia {
    opacity: 1;
    transition: none;
  }
}

/* =========================================================
   Sekcja 4. Sprzęt
   ========================================================= */
.sprzet {
  padding-block: var(--sekcja);
}

.sprzet__glowa {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(1.5rem, 4vw, 4rem);
  align-items: end;
  padding-bottom: clamp(2rem, 4vw, 3rem);
}

.sprzet h2 {
  font-size: clamp(1.5rem, 3vw, 2.375rem);
  margin-top: 1.25rem;
  max-width: 16ch;
}

.sprzet__wstep {
  color: var(--stal);
  max-width: 46ch;
}

/* ---------- Cztery pola z liczbami ---------- */
.dane {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border: 1px solid var(--linia);
  background: var(--piasek-2);
}

.dane li {
  padding: clamp(1.25rem, 2.5vw, 1.75rem);
  border-right: 1px solid var(--linia);
  /* domyślne min-width: auto pozwalało długiemu słowu
     rozepchnąć kolumnę poza obrys siatki */
  min-width: 0;
}
.dane li:last-child {
  border-right: 0;
}

.dane b {
  display: block;
  font-family: var(--mono);
  font-weight: 500;
  font-size: clamp(1.25rem, 2.2vw, 1.625rem);
  line-height: 1.1;
  color: var(--akcent);
  letter-spacing: -0.03em;
  overflow-wrap: anywhere;
  hyphens: auto;
}

/* Wariant dla haseł zamiast liczb. Pole z liczbami jest
   projektowane pod krótkie wartości typu „5000 m²”, więc
   wyraz taki jak „Odpowiedzialność” trzeba złożyć mniejszym
   stopniem i krojem tekstowym. */
.dane--hasla b {
  font-family: var(--font);
  font-weight: 700;
  font-size: clamp(1.0625rem, 1.7vw, 1.25rem);
  letter-spacing: -0.025em;
  line-height: 1.15;
}

.dane strong {
  display: block;
  margin-top: 0.6rem;
  font-size: 0.9375rem;
  font-weight: 600;
}

.dane p {
  margin: 0.4rem 0 0;
  font-size: 0.875rem;
  line-height: 1.55;
  color: var(--stal);
}

/* =========================================================
   Sekcja 5. Trzy ścieżki odbiorców
   ========================================================= */
.sciezki {
  background: var(--piasek-2);
  border-top: 1px solid var(--linia);
  padding-block: var(--sekcja);
}

.sciezki__glowa {
  padding-bottom: clamp(1.75rem, 3.5vw, 2.75rem);
}
.sciezki h2 {
  font-size: clamp(1.5rem, 3vw, 2.375rem);
  margin-top: 1.25rem;
  max-width: 22ch;
}

.sciezki__siatka {
  display: grid;
  /* Liczba kolumn z liczby kafli, nie na sztywno trzy. Odstep to
     jeden piksel na tle w kolorze linii, wiec kazda pusta komorka
     rysowala sie jako pusta ramka: dwa kafle w realizacjach mialy
     obok dziure, a czwarty kafel na stronie 404 stal sam w drugim
     rzedzie. */
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
  gap: 1px;
  background: var(--linia);
  border: 1px solid var(--linia);
}

.sciezka {
  position: relative;
  background: var(--piasek);
  padding: clamp(1.5rem, 2.8vw, 2.25rem);
  text-decoration: none;
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  transition: background 0.2s ease;
}
.sciezka::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 3px;
  background: var(--akcent);
  transform: scaleY(0);
  transform-origin: top;
  transition: transform 0.28s ease;
}
.sciezka:hover {
  background: var(--biel);
}
.sciezka:hover::before,
.sciezka:focus-visible::before {
  transform: scaleY(1);
}

.sciezka__kto {
  font-family: var(--mono);
  font-size: 0.6875rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--stal);
}

.sciezka__tytul {
  font-size: clamp(1.125rem, 1.9vw, 1.375rem);
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1.15;
}

.sciezka__opis {
  font-size: 0.9375rem;
  line-height: 1.55;
  color: var(--stal);
}

.sciezka__dalej {
  margin-top: auto;
  padding-top: 1rem;
  font-family: var(--mono);
  font-size: 0.8125rem;
  color: var(--akcent);
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.sciezka__dalej span {
  display: inline-block;
  transition: transform 0.22s ease;
}
.sciezka:hover .sciezka__dalej span {
  transform: translateX(5px);
}

@media (max-width: 900px) {
  .sciezki__siatka {
    grid-template-columns: 1fr;
  }
}

@media (prefers-reduced-motion: reduce) {
  .sciezka::before,
  .sciezka__dalej span {
    transition: none;
  }
}

/* =========================================================
   Sekcja 6. Jak to działa
   Poziomy szereg pięciu kroków. Linia łącząca węzły to
   nawiązanie do rygla rusztowania, na którym siedzą pola.
   ========================================================= */
.przebieg {
  background: var(--grafit);
  color: var(--piasek);
  padding-block: var(--sekcja);
}

.przebieg__glowa {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(1.5rem, 4vw, 4rem);
  align-items: end;
  padding-bottom: clamp(2.5rem, 5vw, 4rem);
}
.przebieg .etykieta {
  color: var(--akcent-jasny);
}
.przebieg h2 {
  font-size: clamp(1.5rem, 3vw, 2.375rem);
  color: var(--biel);
  margin-top: 1.25rem;
  max-width: 20ch;
}
.przebieg__wstep {
  color: var(--stal-jasna);
  max-width: 44ch;
}

.kroki {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: clamp(1rem, 2vw, 1.75rem);
  position: relative;
}
/* rygiel, na którym siedzą numery */
.kroki::before {
  content: "";
  position: absolute;
  top: 13px;
  left: 0;
  right: 0;
  height: 1px;
  background: var(--linia-jasna);
}

.kroki li {
  position: relative;
  padding-top: 2.5rem;
}

.krok__nr {
  position: absolute;
  top: 0;
  left: 0;
  width: 27px;
  height: 27px;
  display: grid;
  place-items: center;
  background: var(--grafit);
  border: 1px solid var(--akcent-jasny);
  color: var(--akcent-jasny);
  font-family: var(--mono);
  font-size: 0.6875rem;
  letter-spacing: 0.04em;
}

.kroki strong {
  display: block;
  font-size: 1.0625rem;
  font-weight: 600;
  color: var(--biel);
  letter-spacing: -0.02em;
}

.kroki p {
  margin: 0.5rem 0 0;
  font-size: 0.875rem;
  line-height: 1.55;
  color: var(--stal-jasna);
}

@media (max-width: 900px) {
  .przebieg__glowa {
    grid-template-columns: 1fr;
    align-items: start;
  }
  .kroki {
    grid-template-columns: 1fr;
    gap: 0;
  }
  /* na wąskim ekranie rygiel staje pionowo */
  .kroki::before {
    top: 13px;
    bottom: 13px;
    left: 13px;
    right: auto;
    width: 1px;
    height: auto;
  }
  .kroki li {
    padding: 0 0 1.75rem 3rem;
  }
  .kroki li:last-child {
    padding-bottom: 0;
  }
}

/* =========================================================
   Sekcja 7. Zasięg dowozu
   ========================================================= */
.zasieg {
  padding-block: var(--sekcja);
}

.zasieg__glowa {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(1.5rem, 4vw, 4rem);
  align-items: end;
  padding-bottom: clamp(2rem, 4vw, 3rem);
}
.zasieg h2 {
  font-size: clamp(1.5rem, 3vw, 2.375rem);
  margin-top: 1.25rem;
  max-width: 18ch;
}
.zasieg__wstep {
  color: var(--stal);
  max-width: 46ch;
}

.miasta {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--grafit);
}

.miasta a {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 5rem 6rem 1.5rem;
  align-items: baseline;
  gap: 1rem;
  padding: 1.15rem 0.75rem 1.15rem 0.5rem;
  border-bottom: 1px solid var(--linia);
  text-decoration: none;
  position: relative;
  transition:
    background 0.18s ease,
    padding-left 0.18s ease;
}
.miasta a::before {
  content: "";
  position: absolute;
  left: 0;
  top: -1px;
  bottom: -1px;
  width: 3px;
  background: var(--akcent);
  transform: scaleY(0);
  transition: transform 0.22s ease;
}
.miasta a:hover {
  background: var(--piasek-2);
  padding-left: 1rem;
}
.miasta a:hover::before,
.miasta a:focus-visible::before {
  transform: scaleY(1);
}

.miasto__nazwa {
  font-size: 1.0625rem;
  font-weight: 600;
  letter-spacing: -0.02em;
}
.miasto__km {
  font-family: var(--mono);
  font-size: 0.875rem;
  color: var(--stal);
}
.miasto__cena {
  font-family: var(--mono);
  font-size: 1.0625rem;
  font-weight: 500;
  color: var(--akcent);
  text-align: right;
}
.miasto__strzalka {
  color: var(--stal);
  text-align: right;
  transition: transform 0.22s ease;
  display: inline-block;
}
.miasta a:hover .miasto__strzalka {
  color: var(--akcent);
  transform: translateX(4px);
}

.zasieg__reszta {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 1.5rem 2.5rem;
  align-items: center;
  margin-top: clamp(1.75rem, 3vw, 2.5rem);
}
.zasieg__reszta p {
  margin: 0;
  color: var(--stal);
  font-size: 0.9375rem;
  max-width: 68ch;
}

@media (max-width: 900px) {
  .zasieg__glowa,
  .zasieg__reszta {
    grid-template-columns: 1fr;
    align-items: start;
  }
  .miasta a {
    grid-template-columns: minmax(0, 1fr) 4.5rem 5rem;
  }
  .miasto__strzalka {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .miasta a,
  .miasta a::before,
  .miasto__strzalka {
    transition: none;
  }
}

/* =========================================================
   Sekcja 8. Pytania i odpowiedzi
   ========================================================= */
.pytania {
  background: var(--cynk-jasny);
  border-top: 1px solid var(--linia);
  border-bottom: 1px solid var(--linia);
  padding-block: var(--sekcja);
}

.pytania__uklad {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  gap: clamp(2rem, 4vw, 4rem);
  align-items: start;
}

.pytania h2 {
  font-size: clamp(1.5rem, 3vw, 2.375rem);
  margin-top: 1.25rem;
  max-width: 16ch;
}
.pytania__glowa p {
  margin-top: 1.25rem;
  color: var(--stal);
  max-width: 40ch;
}
.pytania__glowa .przycisk {
  margin-top: 0.5rem;
  font-family: var(--mono);
}

.pytania__lista {
  border-top: 1px solid var(--grafit);
}

.pytania__lista details {
  border-bottom: 1px solid var(--linia);
}

.pytania__lista summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1.25rem;
  padding: 1.15rem 0.25rem;
  font-size: 1.0625rem;
  font-weight: 600;
  letter-spacing: -0.015em;
  line-height: 1.35;
  transition: color 0.16s ease;
}
.pytania__lista summary::-webkit-details-marker {
  display: none;
}
.pytania__lista summary:hover {
  color: var(--akcent);
}

/* znak plus, który przy otwarciu staje się minusem */
.pytania__lista summary::after {
  content: "";
  flex: 0 0 auto;
  width: 14px;
  height: 14px;
  margin-top: 0.3rem;
  background:
    linear-gradient(var(--akcent), var(--akcent)) center / 14px 2px no-repeat,
    linear-gradient(var(--akcent), var(--akcent)) center / 2px 14px no-repeat;
  transition:
    transform 0.25s ease,
    background-size 0.25s ease;
}
.pytania__lista details[open] summary::after {
  background-size:
    14px 2px,
    2px 0;
  transform: rotate(180deg);
}

.odpowiedz {
  padding: 0 2.5rem 1.4rem 0.25rem;
}
.odpowiedz p {
  margin: 0 0 0.8em;
  font-size: 0.9375rem;
  line-height: 1.65;
  color: var(--stal);
  max-width: 62ch;
}
.odpowiedz p:last-child {
  margin-bottom: 0;
}

@media (max-width: 900px) {
  .pytania__uklad {
    grid-template-columns: 1fr;
  }
  .odpowiedz {
    padding-right: 1.25rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .pytania__lista summary::after {
    transition: none;
  }
}

/* =========================================================
   Sekcja 9. Kim jesteśmy, rejestr zamówień publicznych
   ========================================================= */
.ofirmie {
  padding-block: var(--sekcja);
}

.ofirmie__glowa {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: clamp(1.5rem, 4vw, 4rem);
  align-items: start;
  padding-bottom: clamp(2rem, 4vw, 3rem);
}
.ofirmie h2 {
  font-size: clamp(1.5rem, 3vw, 2.375rem);
  margin-top: 1.25rem;
  max-width: 14ch;
}
.ofirmie__tekst p {
  color: var(--stal);
  max-width: 56ch;
}
.ofirmie__pointa {
  margin-top: 1.25rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--linia);
}
.ofirmie__pointa b {
  color: var(--grafit);
  font-weight: 600;
}

/* ---------- Rejestr ---------- */
.rejestr {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 2px solid var(--grafit);
}

.rejestr li {
  display: grid;
  grid-template-columns: 4.5rem minmax(0, 1.15fr) minmax(0, 1.35fr) 9rem;
  gap: 1.25rem;
  align-items: start;
  padding: 1.3rem 0.5rem;
  border-bottom: 1px solid var(--linia);
}

.rejestr__rok {
  font-family: var(--mono);
  font-size: 0.9375rem;
  color: var(--stal);
}

.rejestr__kto {
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: -0.015em;
  line-height: 1.3;
}


.rejestr__co {
  font-size: 0.9375rem;
  line-height: 1.5;
  color: var(--stal);
}

.rejestr__gdzie {
  font-family: var(--mono);
  font-size: 0.8125rem;
  color: var(--stal);
  text-align: right;
}

.ofirmie__stopka {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 1.25rem 2.5rem;
  align-items: center;
  margin-top: clamp(1.5rem, 3vw, 2.25rem);
}
.ofirmie__stopka p {
  margin: 0;
  font-size: 0.875rem;
  color: var(--stal);
}
/* Kolumna tekstowa stopki. Trzyma dowolną liczbę akapitów jako jeden
   element siatki, żeby dołożenie drugiego nie przesunęło przycisku
   do kolejnego wiersza i nie ścisnęło pierwszego do słupka. */
.ofirmie__stopka-tekst {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  min-width: 0;
}

@media (max-width: 900px) {
  .ofirmie__glowa,
  .ofirmie__stopka {
    grid-template-columns: 1fr;
    align-items: start;
  }
  .rejestr li {
    grid-template-columns: 3.5rem 1fr;
    gap: 0.35rem 1rem;
  }
  .rejestr__rok {
    grid-row: 1 / span 3;
  }
  .rejestr__gdzie {
    text-align: left;
  }
}

/* =========================================================
   Sekcja 10. Kontakt
   ========================================================= */
.kontakt {
  background: var(--grafit);
  color: var(--piasek);
  padding-block: var(--sekcja);
}

.kontakt__uklad {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: clamp(2rem, 4vw, 4.5rem);
  align-items: start;
}

.kontakt .etykieta {
  color: var(--akcent-jasny);
}
.kontakt h2 {
  font-size: clamp(1.5rem, 3vw, 2.375rem);
  color: var(--biel);
  margin-top: 1.25rem;
  max-width: 16ch;
}
.kontakt__lead {
  margin-top: 1.25rem;
  color: var(--stal-jasna);
  max-width: 44ch;
}
/* Odnosnik w tresci ledu. Bez tego bierze `color: inherit`
   z reguly globalnej i jest tego samego koloru co zdanie
   dookola — na grafitowym tle zostaje samo podkreslenie. */
.kontakt__lead a {
  color: var(--akcent-jasny);
  text-underline-offset: 3px;
}
.kontakt__lead a:hover {
  color: var(--biel);
}

.kontakt__telefon {
  display: inline-block;
  margin-top: 1.75rem;
  font-family: var(--mono);
  font-size: clamp(1.5rem, 3vw, 2rem);
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--akcent-jasny);
  text-decoration: none;
  border-bottom: 2px solid transparent;
  transition: border-color 0.18s ease;
}
.kontakt__telefon:hover {
  border-bottom-color: var(--akcent-jasny);
}

.dane-firmy {
  margin: 2rem 0 0;
}
.dane-firmy div {
  display: grid;
  grid-template-columns: 7rem minmax(0, 1fr);
  gap: 1rem;
  padding: 0.8rem 0;
  border-bottom: 1px solid var(--linia-jasna);
  align-items: baseline;
}
.dane-firmy div:first-child {
  border-top: 1px solid var(--linia-jasna);
}
.dane-firmy dt {
  font-family: var(--mono);
  font-size: 0.6875rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--stal-jasna);
}
.dane-firmy dd {
  margin: 0;
  color: var(--biel);
  font-size: 0.9375rem;
}
.dane-firmy dd a {
  text-decoration: none;
  border-bottom: 1px solid var(--akcent-jasny);
}
.dane-firmy dd a:hover {
  color: var(--akcent-jasny);
}

/* miejsce, w którym czekamy na dane od klienta */
.do-uzupelnienia {
  font-family: var(--mono);
  font-size: 0.75rem;
  color: var(--stal-jasna);
  border-bottom: 1px dashed var(--stal-jasna);
  padding-bottom: 1px;
}

/* ---------- Formularz ---------- */
.formularz {
  background: var(--grafit-2);
  border: 1px solid var(--linia-jasna);
  padding: clamp(1.5rem, 3vw, 2.25rem);
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.1rem 1.25rem;
}

.formularz .pole label {
  color: var(--piasek);
}
.formularz .pole label em {
  font-style: normal;
  font-family: var(--mono);
  font-size: 0.6875rem;
  color: var(--stal-jasna);
  margin-left: 0.4rem;
}
.formularz .pole__wejscie {
  background: var(--grafit);
  border-color: var(--linia-jasna);
}
.formularz .pole__wejscie input,
.formularz .pole__wejscie textarea {
  color: var(--piasek);
  font-family: var(--font);
  font-size: 1rem;
  width: 100%;
  border: 0;
  background: transparent;
  padding: 0.7rem 0.8rem;
  resize: vertical;
}
.formularz .pole__wejscie input::placeholder,
.formularz .pole__wejscie textarea::placeholder {
  color: var(--stal-jasna);
  opacity: 0.75;
}
.formularz .pole__wejscie input:focus,
.formularz .pole__wejscie textarea:focus {
  outline: none;
}
.formularz .pole__wejscie:focus-within {
  border-color: var(--akcent-jasny);
}
.pole--szerokie {
  grid-column: 1 / -1;
}

/* pułapka na roboty */
.pulapka {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.zgoda {
  grid-column: 1 / -1;
  display: flex;
  align-items: flex-start;
  gap: 0.7rem;
  font-size: 0.8125rem;
  line-height: 1.55;
  color: var(--stal-jasna);
  cursor: pointer;
}
.zgoda input {
  margin-top: 0.2rem;
  accent-color: var(--akcent-jasny);
  flex: 0 0 auto;
}
.zgoda a {
  color: var(--akcent-jasny);
}

.formularz__wyslij {
  grid-column: 1 / -1;
  justify-content: center;
  background: var(--akcent-jasny);
  border-color: var(--akcent-jasny);
  color: var(--grafit);
  cursor: pointer;
  font-family: var(--font);
}
.formularz__wyslij:hover {
  background: var(--biel);
  border-color: var(--biel);
}

.formularz__stan {
  grid-column: 1 / -1;
  margin: 0;
  padding: 0.9rem 1.1rem;
  font-size: 0.9375rem;
  line-height: 1.55;
  border-left: 3px solid var(--akcent-jasny);
  background: rgba(95, 179, 188, 0.12);
  color: var(--piasek);
}
.formularz__stan[data-stan="blad"] {
  border-left-color: #e0a15e;
  background: rgba(224, 161, 94, 0.12);
}

.formularz__nota {
  grid-column: 1 / -1;
  margin: 0;
  font-size: 0.75rem;
  line-height: 1.6;
  color: var(--stal-jasna);
}

@media (max-width: 900px) {
  .kontakt__uklad {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 560px) {
  .formularz {
    grid-template-columns: 1fr;
  }
}

/* =========================================================
   Stopka
   ========================================================= */
.stopka {
  background: var(--grafit-2);
  color: var(--stal-jasna);
  padding-block: clamp(2.5rem, 5vw, 3.5rem) 2rem;
  font-size: 0.9375rem;
  border-top: 1px solid var(--linia-jasna);
}

.stopka__uklad {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr));
  gap: 2rem;
  padding-bottom: 2.25rem;
  border-bottom: 1px solid var(--linia-jasna);
}

.stopka__marka {
  font-weight: 700;
  font-size: 1.25rem;
  letter-spacing: -0.025em;
  color: var(--biel);
  margin-bottom: 1rem;
}
.stopka__marka em {
  font-style: normal;
  font-weight: 500;
  color: var(--stal-jasna);
}

.stopka p {
  margin: 0 0 0.9rem;
  line-height: 1.6;
}

.stopka h3 {
  font-family: var(--mono);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--akcent-jasny);
  margin-bottom: 1rem;
}

.stopka ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.55rem;
}
/* Odnośniki w stopce stoją gęsto, więc powiększamy pole trafienia
   pionowo, nie zmieniając rytmu listy. */
.stopka li a {
  display: inline-block;
  padding-block: 0.3rem;
}

.stopka a {
  text-decoration: none;
}
.stopka a:hover {
  color: var(--biel);
}

.stopka__dol {
  padding-top: 1.5rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem 2rem;
  justify-content: space-between;
  font-family: var(--mono);
  font-size: 0.75rem;
}

@media (max-width: 900px) {
  .stopka__uklad {
    grid-template-columns: 1fr 1fr;
  }
}
@media (max-width: 560px) {
  .stopka__uklad {
    grid-template-columns: 1fr;
  }
}

/* =========================================================
   Nagłówek podstrony i okruchy
   ========================================================= */
.czolo {
  padding-block: calc(var(--naglowek-h) + clamp(2.5rem, 5vw, 4rem)) clamp(2rem, 4vw, 3rem);
}
.okruchy {
  font-family: var(--mono);
  font-size: 0.75rem;
  color: var(--stal);
  display: flex;
  gap: 0.5rem;
  margin-bottom: 1.75rem;
}
.okruchy a {
  color: var(--stal);
  text-underline-offset: 3px;
}
.czolo h1 {
  font-size: clamp(1.875rem, 4vw, 3rem);
  margin-top: 1.25rem;
  max-width: 18ch;
}
.czolo__lead {
  margin-top: 1.5rem;
  color: var(--stal);
  max-width: 56ch;
  font-size: clamp(1rem, 1.4vw, 1.125rem);
}

/* wybór zakresu usługi w kalkulatorze */
.zakres {
  border: 0;
  padding: 0;
  margin: 0;
}
.zakres legend {
  font-size: 0.875rem;
  font-weight: 500;
  margin-bottom: 0.45rem;
  padding: 0;
}
.zakres label {
  display: flex;
  align-items: flex-start;
  gap: 0.7rem;
  padding: 0.7rem 0.85rem;
  border: 1px solid var(--linia-mocna);
  margin-bottom: 0.45rem;
  cursor: pointer;
  transition:
    border-color 0.16s ease,
    background 0.16s ease;
}
.zakres label:has(input:checked) {
  border-color: var(--akcent);
  background: var(--piasek);
}
.zakres input {
  margin-top: 0.25rem;
  accent-color: var(--akcent);
  flex: 0 0 auto;
}
.zakres b {
  display: block;
  font-size: 0.9375rem;
  font-weight: 600;
}
.zakres em {
  display: block;
  font-style: normal;
  font-size: 0.8125rem;
  color: var(--stal);
  margin-top: 0.1rem;
}

.wynik__dodatki {
  margin: 1.1rem 0 0;
  padding: 0.8rem 0.95rem;
  background: rgba(239, 233, 223, 0.06);
  border-left: 2px solid var(--akcent-jasny);
  font-size: 0.8125rem;
  line-height: 1.55;
  color: var(--stal-jasna);
}

/* powyżej progu chowamy kwotę i prosimy o telefon */
.wynik[data-tryb="indywidualna"] .wynik__kwota small,
.wynik[data-tryb="indywidualna"] .wynik__brutto,
.wynik[data-tryb="indywidualna"] .wynik__rozbicie {
  display: none;
}
.wynik[data-tryb="indywidualna"] .wynik__kwota {
  font-family: var(--font);
  font-size: clamp(1.5rem, 3vw, 2rem);
  font-weight: 700;
  letter-spacing: -0.03em;
}
.wynik[data-tryb="indywidualna"] .wynik__kwota::after {
  content: " indywidualna";
}

.stawki {
  padding-block: var(--sekcja);
  border-top: 1px solid var(--linia);
}

/* ---------- Pozostałe miejscowości, bez własnej podstrony ---------- */
.pozostale {
  margin-top: clamp(2rem, 4vw, 3rem);
}
.pozostale h3 {
  font-family: var(--mono);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--stal);
  margin-bottom: 1rem;
}
.pozostale__lista {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 0 clamp(1.5rem, 3vw, 2.5rem);
}
.pozostale__lista li {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 4rem 4.5rem;
  gap: 0.75rem;
  align-items: baseline;
  padding: 0.7rem 0;
  border-bottom: 1px solid var(--linia);
  font-size: 0.9375rem;
}
.pozostale__lista em {
  font-style: normal;
  font-family: var(--mono);
  font-size: 0.8125rem;
  color: var(--stal);
}
.pozostale__lista b {
  font-family: var(--mono);
  font-weight: 500;
  color: var(--akcent);
  text-align: right;
}
.pozostale__nota {
  margin-top: 1.25rem;
  font-size: 0.875rem;
  color: var(--stal);
  max-width: 68ch;
}

/* ---------- Rozpiska przejazdów ---------- */
.rozpiska {
  list-style: none;
  margin: 1.5rem 0 0;
  padding: 0;
}
.rozpiska li {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  padding: 0.7rem 0;
  border-bottom: 1px solid var(--linia-jasna);
  font-size: 0.9375rem;
  color: var(--stal-jasna);
}
.rozpiska li:first-child {
  border-top: 1px solid var(--linia-jasna);
}
.rozpiska b {
  font-family: var(--mono);
  font-weight: 500;
  color: var(--piasek);
  white-space: nowrap;
}
.rozpiska__suma {
  border-bottom: 0;
  padding-top: 1rem;
}
.rozpiska__suma span {
  color: var(--piasek);
  font-weight: 600;
}
.rozpiska__suma b {
  color: var(--akcent-jasny);
  font-size: 1.0625rem;
}

/* =========================================================
   Ramka na brakujące materiały
   Wspólna dla wszystkich miejsc, w których czekamy na
   zdjęcia albo logo. Opis mówi wprost, co ma tu trafić.
   ========================================================= */
.brak {
  border: 2px dashed var(--cynk);
  display: grid;
  place-items: center;
  text-align: center;
  padding: clamp(1.5rem, 4vw, 3rem);
  color: var(--stal);
  background: repeating-linear-gradient(
    -45deg,
    rgba(169, 176, 179, 0.07) 0 8px,
    transparent 8px 16px
  );
}
.brak span {
  font-family: var(--mono);
  font-size: 0.75rem;
  line-height: 1.7;
  letter-spacing: 0.04em;
  max-width: 46ch;
}
.brak strong {
  display: block;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-size: 0.6875rem;
  color: var(--grafit);
  margin-bottom: 0.5rem;
}
.brak--szeroki {
  margin-top: clamp(1.5rem, 3vw, 2.5rem);
  aspect-ratio: 21 / 7;
}

/* --- Mapa za zasłoną -----------------------------------------
   Osadzona mapa Google łączy się z serwerami Google i przekazuje
   im adres IP odwiedzającego. Reszta serwisu nie wczytuje niczego
   z obcych serwerów, więc mapa nie może być jedynym wyjątkiem
   ładowanym bez pytania. Ramka pokazuje się dopiero po kliknięciu,
   a do tego czasu nie leci ani jedno żądanie na zewnątrz.

   Wyboru nie zapamiętujemy. Zapis w przeglądarce byłby kolejną
   rzeczą do opisania w polityce, a mapa jest na dwóch podstronach.
   ------------------------------------------------------------- */

.mapa {
  position: relative;
  margin-top: clamp(1.5rem, 3vw, 2rem);
  border: 1px solid var(--linia);
  background: var(--cynk-jasny);
}
.mapa__zaslona {
  display: grid;
  place-items: center;
  gap: 0.9rem;
  text-align: center;
  padding: clamp(1.5rem, 4vw, 2.5rem);
  min-height: 100%;
  background: repeating-linear-gradient(
    -45deg,
    rgba(169, 176, 179, 0.07) 0 8px,
    transparent 8px 16px
  );
}
.mapa__tekst {
  font-family: var(--mono);
  font-size: 0.75rem;
  line-height: 1.7;
  letter-spacing: 0.04em;
  color: var(--stal);
  max-width: 46ch;
  margin: 0;
}
.mapa__tekst b {
  display: block;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-size: 0.6875rem;
  color: var(--grafit);
  margin-bottom: 0.5rem;
}
.mapa__ramka {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}
/* Po wczytaniu ramka wypełnia kafel, więc proporcja musi zostać. */
.mapa[data-stan="wczytana"] {
  display: grid;
}

@media (max-width: 900px) {
  .sprzet__glowa {
    grid-template-columns: 1fr;
    align-items: start;
  }
  .dane {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .dane li:nth-child(2) {
    border-right: 0;
  }
  .dane li:nth-child(1),
  .dane li:nth-child(2) {
    border-bottom: 1px solid var(--linia);
  }
  .brak--szeroki {
    aspect-ratio: 3 / 2;
  }
}

@media (max-width: 560px) {
  .dane {
    grid-template-columns: 1fr;
  }
  .dane li {
    border-right: 0;
    border-bottom: 1px solid var(--linia);
  }
  .dane li:last-child {
    border-bottom: 0;
  }
}

/* =========================================================
   Przyciski
   ========================================================= */
.przycisk {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: var(--akcent);
  color: var(--biel);
  padding: 0.9rem 1.5rem;
  font-weight: 600;
  font-size: 0.9375rem;
  text-decoration: none;
  border: 1px solid var(--akcent);
  transition:
    background 0.18s ease,
    border-color 0.18s ease;
}
.przycisk:hover {
  background: var(--akcent-ciemny);
  border-color: var(--akcent-ciemny);
}

.przycisk--obrys {
  background: transparent;
  color: var(--grafit);
  border-color: var(--linia-mocna);
}
.przycisk--obrys:hover {
  background: var(--piasek-2);
  border-color: var(--grafit);
}

/* =========================================================
   Ograniczony ruch w systemie

   Domyślnie szanujemy ustawienie i pokazujemy nieruchomy kadr
   z gotowym rusztowaniem oraz całą treść naraz. Człowiek może
   jednak włączyć animację świadomie, przyciskiem, i wtedy
   wszystkie poniższe reguły przestają obowiązywać.
   ========================================================= */
@media (prefers-reduced-motion: reduce) {
  .otwarcie:not([data-ruch="wlaczony"]) {
    height: auto;
  }
  .otwarcie:not([data-ruch="wlaczony"]) .otwarcie__scena {
    position: static;
    height: auto;
    min-height: 84vh;
  }
  .otwarcie:not([data-ruch="wlaczony"]) .otwarcie__plotno {
    display: none;
  }
  .otwarcie:not([data-ruch="wlaczony"]) .otwarcie__zapas {
    display: block;
  }
  .otwarcie:not([data-ruch="wlaczony"]) .otwarcie__nad,
  .otwarcie:not([data-ruch="wlaczony"]) h1,
  .otwarcie:not([data-ruch="wlaczony"]) .otwarcie__lead,
  .otwarcie:not([data-ruch="wlaczony"]) .otwarcie__liczby,
  .otwarcie:not([data-ruch="wlaczony"]) .otwarcie__przyciski {
    opacity: 1;
    transform: none;
    animation: none;
  }
  .otwarcie:not([data-ruch="wlaczony"]) .otwarcie__wskaznik,
  .otwarcie:not([data-ruch="wlaczony"]) .otwarcie__postep {
    display: none;
  }
}

/* przycisk świadomego włączenia animacji */
.wlacz-ruch {
  display: none;
  align-items: center;
  gap: 0.55rem;
  margin-top: 0.9rem;
  margin-left: auto;
  background: transparent;
  border: 1px solid var(--linia-mocna);
  color: var(--grafit);
  font-family: var(--mono);
  font-size: 0.75rem;
  letter-spacing: 0.04em;
  padding: 0.6rem 1.1rem;
  cursor: pointer;
  transition:
    background 0.18s ease,
    border-color 0.18s ease,
    color 0.18s ease;
}
.wlacz-ruch:hover {
  background: var(--akcent);
  border-color: var(--akcent);
  color: var(--biel);
}
.otwarcie[data-tryb="zapas"] .wlacz-ruch:not([hidden]) {
  display: inline-flex;
}

/* kadr zastępczy, domyślnie ukryty */
.otwarcie__zapas {
  display: none;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.otwarcie[data-tryb="zapas"] .otwarcie__plotno {
  display: none;
}
.otwarcie[data-tryb="zapas"] .otwarcie__zapas {
  display: block;
}

/* =========================================================
   Węższe ekrany
   ========================================================= */
@media (max-width: 1040px) {
  .nawigacja {
    position: fixed;
    inset: var(--naglowek-h) 0 auto 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: var(--piasek);
    border-bottom: 1px solid var(--linia);
    padding: 0.5rem var(--gutter) 1.25rem;
    display: none;
  }
  .nawigacja[data-otwarte="tak"] {
    display: flex;
  }
  .nawigacja a:not(.telefon-naglowek) {
    padding: 0.9rem 0;
    border-bottom: 1px solid var(--linia);
    font-size: 1.0625rem;
  }
  .nawigacja .telefon-naglowek {
    margin-top: 1.25rem;
    margin-left: 0;
    justify-content: center;
    padding-block: 0.85rem;
  }
  .telefon-naglowek__tresc {
    align-items: center;
  }
  .przycisk-menu {
    display: block;
  }
  .naglowek--rozdroze .przelacznik {
    order: 3;
    width: 100%;
    border-top: 1px solid var(--linia);
  }
  .naglowek--rozdroze .naglowek__pasmo-wnetrze {
    flex-wrap: wrap;
    min-height: 0;
    padding-bottom: 0;
  }
  .naglowek--rozdroze .przelacznik a {
    flex: 1 1 0;
    justify-content: center;
    text-align: center;
    padding-block: 0.85rem;
  }
  .naglowek--rozdroze .przelacznik a:first-child {
    border-left: 0;
  }
  .przelacznik a {
    padding-inline: 0.7rem;
    font-size: 0.625rem;
    letter-spacing: 0.1em;
  }
  .galaz-nazwa {
    font-size: 0.9375rem;
  }
  .telefon-naglowek--pulpit {
    display: none;
  }

  .otwarcie {
    height: var(--tasma-waska, 340vh);
  }
  .otwarcie__uklad {
    grid-template-columns: 1fr;
    gap: 1.75rem;
    padding-block: calc(var(--naglowek-h) + 1.5rem) 2.5rem;
  }
  .otwarcie__panel,
  .otwarcie__postep {
    max-width: none;
    margin-left: 0;
  }
  .otwarcie__panel {
    order: -1;
  }
  .otwarcie__liczby {
    gap: 0.75rem 1.5rem;
  }
  .otwarcie__wskaznik {
    display: none;
  }
}

/* =========================================================
   Dokument tekstowy: polityka prywatności i podobne
   ========================================================= */
.dokument {
  padding-block: var(--sekcja);
  background: var(--piasek-2);
  border-top: 1px solid var(--linia);
}

.dokument__tresc {
  max-width: 68ch;
}

.dokument__tresc h2 {
  font-size: clamp(1.1875rem, 2vw, 1.5rem);
  margin: 2.75rem 0 0.85rem;
}
.dokument__tresc h2:first-child {
  margin-top: 0;
}

.dokument__tresc ul {
  margin: 0 0 1.1em;
  padding-left: 1.15rem;
}
.dokument__tresc li {
  margin-bottom: 0.45rem;
}

.dokument__tresc a {
  color: var(--akcent-ciemny);
  text-underline-offset: 0.2em;
}

.dokument__data {
  margin-top: 1.5rem;
  font-family: var(--mono);
  font-size: 0.8125rem;
  letter-spacing: 0.04em;
  color: var(--stal);
}

/* Wzor formularza odstapienia od umowy, zalacznik nr 2 do ustawy
   o prawach konsumenta. Wyglada na formularz do wypelnienia, bo
   nim jest: bialy blok na piaskowym tle dokumentu, kroj maszynowy,
   szerokie interlinie na wpisanie danych dlugopisem po wydruku. */
/* Przycisk pobrania umowy jako pliku. Stoi w pasku nad dokumentem,
   ktory i tak nie wychodzi na papier, wiec nie ma go w regulach
   druku i nie trzeba go osobno chowac. */
.umowa__pobierz {
  margin-left: 0.75rem;
  font-weight: 600;
  color: var(--akcent-ciemny);
  text-underline-offset: 3px;
}

.wzor-odstapienia {
  margin: 1.25rem 0 1.75rem;
  padding: clamp(1.1rem, 3vw, 1.75rem);
  background: var(--biel);
  border: 1px solid var(--linia-mocna);
  font-family: var(--mono);
  font-size: 0.8125rem;
  line-height: 2;
}
.wzor-odstapienia p {
  margin: 0 0 0.9rem;
}
.wzor-odstapienia p:last-child {
  margin-bottom: 0;
}
.wzor-odstapienia small {
  font-size: 0.75rem;
  line-height: 1.5;
  color: var(--stal);
}

/* =========================================================
   Ekran wczytywania
   Widoczny tylko wtedy, gdy skrypt w nagłówku zdążył dodać
   klasę na dokumencie. Bez JavaScriptu nie zasłania niczego,
   a gdyby główny skrypt się nie wczytał, ten sam fragment
   w nagłówku zdejmuje ekran po czterech sekundach.
   ========================================================= */
.ladowanie {
  display: none;
}

.ladowanie-trwa .ladowanie {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(1.75rem, 4vw, 2.5rem);
  background: var(--piasek);
  transition: opacity 0.38s ease;
}
.ladowanie-trwa body {
  overflow: hidden;
}
.ladowanie[data-znika="tak"] {
  opacity: 0;
  pointer-events: none;
}

/* ---------- Scena ---------- */
/* ---------- Scena: żuraw wieżowy ----------
   Rysunek jest w SVG, nie w kilkunastu blokach. Przy blokach
   geometria rozjeżdżała się przy każdej zmianie rozmiaru: maszt
   nie dochodził do wysięgnika, przeciwwaga wisiała bez zaczepu,
   a wózek nachodził na kabinę. W układzie współrzędnych da się
   to ustawić raz i trzyma się w każdej skali. */
.ladowanie__scena {
  width: min(320px, 78vw);
  height: auto;
  display: block;
  overflow: visible;
}

.zs-stal {
  fill: none;
  stroke: var(--akcent);
  stroke-width: 1.6;
  stroke-linecap: square;
}
.zs-krata {
  fill: none;
  stroke: var(--akcent);
  stroke-width: 1.1;
  opacity: 0.85;
}
.zs-ciag {
  fill: none;
  stroke: var(--akcent);
  stroke-width: 1.1;
}
.zs-bryla {
  fill: var(--akcent-ciemny);
}
.zs-przeciwwaga {
  fill: var(--grafit-2);
}
.zs-grunt {
  stroke: var(--linia-mocna);
  stroke-width: 1;
}
.zs-lina-rys {
  fill: var(--stal-jasna);
}
.zs-hak-rys {
  fill: var(--akcent);
}
.zs-ladunek-rys {
  fill: var(--cynk);
}
.zs-cegla {
  fill: var(--cynk);
  opacity: 0;
  animation: zsCegla 0.55s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
.zs-cegla--jasna {
  fill: var(--cynk-jasny);
}

/* Jeden przejazd: wózek wyjeżdża znad przeciwwagi nad ścianę,
   lina opuszcza ładunek, ładunek zostaje, wózek wraca po następny.
   Cztery animacje, jeden takt i jedna krzywa, więc ruch czyta się
   jak jedna czynność. */
.zs-wozek {
  animation: zsWozek 2.4s cubic-bezier(0.45, 0, 0.55, 1) infinite;
}
.zs-lina {
  transform-box: fill-box;
  transform-origin: top center;
  animation: zsLina 2.4s cubic-bezier(0.45, 0, 0.55, 1) infinite;
}
.zs-hak {
  animation: zsHak 2.4s cubic-bezier(0.45, 0, 0.55, 1) infinite;
}
.zs-ladunek {
  animation: zsLadunek 2.4s linear infinite;
}

@keyframes zsWozek {
  0% {
    transform: translateX(0);
  }
  44%,
  58% {
    transform: translateX(82px);
  }
  100% {
    transform: translateX(0);
  }
}

@keyframes zsLina {
  0%,
  100% {
    transform: scaleY(0.25);
  }
  44%,
  58% {
    transform: scaleY(1);
  }
}

@keyframes zsHak {
  0%,
  100% {
    transform: translateY(0);
  }
  44%,
  58% {
    transform: translateY(70px);
  }
}

@keyframes zsLadunek {
  0%,
  46% {
    opacity: 1;
  }
  53%,
  94% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

.zs-cegla:nth-of-type(1) {
  animation-delay: 0.26s;
}
.zs-cegla:nth-of-type(2) {
  animation-delay: 0.32s;
}
.zs-cegla:nth-of-type(3) {
  animation-delay: 0.38s;
}
.zs-cegla:nth-of-type(4) {
  animation-delay: 0.44s;
}
.zs-cegla:nth-of-type(5) {
  animation-delay: 0.50s;
}
.zs-cegla:nth-of-type(6) {
  animation-delay: 0.56s;
}
.zs-cegla:nth-of-type(7) {
  animation-delay: 0.62s;
}
.zs-cegla:nth-of-type(8) {
  animation-delay: 0.68s;
}
.zs-cegla:nth-of-type(9) {
  animation-delay: 0.74s;
}
.zs-cegla:nth-of-type(10) {
  animation-delay: 0.80s;
}
.zs-cegla:nth-of-type(11) {
  animation-delay: 0.86s;
}
.zs-cegla:nth-of-type(12) {
  animation-delay: 0.92s;
}
.zs-cegla:nth-of-type(13) {
  animation-delay: 0.98s;
}

@keyframes zsCegla {
  from {
    opacity: 0;
    transform: translateY(-12px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ---------- Podpis i pasek ---------- */
.ladowanie__marka {
  font-weight: 700;
  font-size: 1.0625rem;
  letter-spacing: -0.025em;
  color: var(--grafit);
}
.ladowanie__marka em {
  font-style: normal;
  font-weight: 500;
  color: var(--stal);
}

.ladowanie__tor {
  width: min(280px, 70vw);
  height: 3px;
  background: var(--linia);
  overflow: hidden;
}
.ladowanie__tor span {
  display: block;
  width: 0;
  height: 100%;
  background: var(--akcent);
}

.ladowanie__procent {
  margin: -1rem 0 0;
  font-family: var(--mono);
  font-size: 0.75rem;
  letter-spacing: 0.16em;
  color: var(--stal);
}

/* Ograniczenie ruchu w systemie zatrzymuje scenę, ale tylko do
   momentu, w którym ktoś świadomie włączy animacje przyciskiem
   na stronie głównej. Ten sam wybór steruje już animacją
   rusztowania, więc ekran wczytywania nie może go pomijać. */
@media (prefers-reduced-motion: reduce) {
  :root:not([data-ruch="wlaczony"]) .ladowanie {
    transition: none;
  }
  :root:not([data-ruch="wlaczony"]) .zs-wozek,
  :root:not([data-ruch="wlaczony"]) .zs-lina,
  :root:not([data-ruch="wlaczony"]) .zs-hak,
  :root:not([data-ruch="wlaczony"]) .zs-ladunek {
    animation: none;
  }
  /* Mur nadal się układa, tylko bez przesuwania. Samo pojawianie
     się nie wywołuje dolegliwości, o które chodzi w tym ustawieniu,
     a ekran nie wygląda na zawieszony. */
  :root:not([data-ruch="wlaczony"]) .zs-cegla {
    animation-name: zsCeglaSpokojna;
  }
}

@keyframes zsCeglaSpokojna {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* =========================================================
   Bramy: rozejście gałęzi na stronie otwierającej.
   Nazwa .pasmo była już zajęta przez słupki wykresu stawek,
   stąd osobna rodzina klas
   ========================================================= */
.bramy {
  padding-block: var(--sekcja);
}

.bramy__siatka {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  background: var(--linia);
  border: 1px solid var(--linia);
}

.brama {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  padding: clamp(1.75rem, 3.5vw, 2.75rem);
  background: var(--piasek);
  text-decoration: none;
  color: inherit;
  border-top: 3px solid transparent;
  transition:
    background 0.2s ease,
    border-color 0.2s ease;
}
.brama:hover {
  background: var(--piasek-2);
}
.brama--budowa {
  border-top-color: var(--ceglana);
}
.brama--rusztowania {
  border-top-color: var(--morska);
}

.brama__etykieta {
  font-family: var(--mono);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.brama--budowa .brama__etykieta {
  color: var(--ceglana-ciemna);
}
.brama--rusztowania .brama__etykieta {
  color: var(--morska-ciemna);
}

.brama__tytul {
  font-size: clamp(1.5rem, 3vw, 2rem);
  font-weight: 700;
  line-height: 1.06;
  letter-spacing: -0.035em;
  text-wrap: balance;
}

.brama__opis {
  color: var(--stal);
  margin: 0;
}

.brama__lista {
  list-style: none;
  margin: 0.35rem 0 0;
  padding: 0;
  display: grid;
  gap: 0.4rem;
  font-size: 0.9375rem;
}
.brama__lista li {
  position: relative;
  padding-left: 1.1rem;
}
.brama__lista li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 6px;
  height: 6px;
}
.brama--budowa .brama__lista li::before {
  background: var(--ceglana);
}
.brama--rusztowania .brama__lista li::before {
  background: var(--morska);
}

.brama__dalej {
  margin-top: auto;
  padding-top: 1.35rem;
  font-family: var(--mono);
  font-size: 0.8125rem;
  letter-spacing: 0.04em;
}
.brama--budowa .brama__dalej {
  color: var(--ceglana-ciemna);
}
.brama--rusztowania .brama__dalej {
  color: var(--morska-ciemna);
}
.brama__dalej span {
  display: inline-block;
  transition: margin-left 0.18s ease;
}
.brama:hover .brama__dalej span {
  margin-left: 0.35rem;
}

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

/* =========================================================
   Rozdroże: strona otwierająca serwis
   Jedyne, co ma zrobić, to postawić przed wyborem działu.
   Bez paska nawigacji, bez sekcji do przewijania, bez treści,
   które trzeba minąć, żeby dojść do decyzji.
   ========================================================= */
.strona-rozdroza {
  min-height: 100vh;
}

.rozdroze {
  min-height: 100vh;
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: clamp(1.5rem, 4vh, 3rem);
  padding-block: clamp(1.5rem, 4vh, 2.5rem);
}

.rozdroze__glowa {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  flex-wrap: wrap;
}

.rozdroze__marka {
  margin: 0;
  font-size: clamp(1.5rem, 3vw, 2rem);
  font-weight: 700;
  letter-spacing: -0.04em;
  line-height: 1;
}

.rozdroze__opis {
  margin: 0.5rem 0 0;
  font-family: var(--mono);
  font-size: 0.75rem;
  letter-spacing: 0.04em;
  color: var(--stal);
}

.rozdroze__wnetrze {
  display: flex;
  align-items: stretch;
}
.rozdroze__wnetrze .bramy__siatka {
  width: 100%;
}

.rozdroze__dol {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  font-family: var(--mono);
  font-size: 0.75rem;
  color: var(--stal);
}
.rozdroze__dol a {
  color: inherit;
}

/* Na rozdrożu brama jest jedynym elementem na ekranie, więc może
   oddychać i nieść większy nagłówek niż w zwykłej sekcji. */
.rozdroze .brama {
  padding: clamp(1.75rem, 4vw, 3.25rem);
  gap: 1rem;
}
.rozdroze .brama__tytul {
  font-size: clamp(1.75rem, 3.6vw, 2.75rem);
}

@media (max-width: 760px) {
  .rozdroze {
    min-height: 0;
  }
  .rozdroze__glowa {
    align-items: flex-start;
  }
}

/* =========================================================
   Scena wczytywania: rusztowanie składane element po elemencie
   Kolejność jest taka, jak przy prawdziwym montażu: stopki,
   stojaki, ryglowanie, stężenia, złącza, podesty, bortnice,
   barierki. Kolejne kondygnacje idą jedna po drugiej.

   Wszystkie elementy liniowe mają pathLength="1", więc jedna
   reguła rysuje je od początku do końca niezależnie od tego,
   czy mają dziesięć pikseli, czy sto siedemdziesiąt.
   ========================================================= */
.rusz-stojak,
.rusz-rygiel,
.rusz-ukos,
.rusz-barierka {
  fill: none;
  stroke-linecap: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  animation: ruszRysuj 0.38s cubic-bezier(0.22, 1, 0.36, 1) var(--o) forwards;
}

.rusz-stojak {
  stroke: var(--akcent);
  stroke-width: 2.6;
}
.rusz-rygiel {
  stroke: var(--stal);
  stroke-width: 1.8;
}
.rusz-ukos {
  stroke: var(--cynk);
  stroke-width: 1.4;
}
.rusz-barierka {
  stroke: var(--stal);
  stroke-width: 1.5;
}

.rusz-podest,
.rusz-bortnica {
  fill: var(--cynk-jasny);
  stroke: var(--akcent);
  stroke-width: 1;
  opacity: 0;
  animation: ruszOpada 0.4s cubic-bezier(0.22, 1, 0.36, 1) var(--o) forwards;
}
.rusz-bortnica {
  fill: var(--cynk);
  stroke: none;
}

.rusz-stopka {
  fill: var(--akcent);
  opacity: 0;
  animation: ruszOpada 0.3s cubic-bezier(0.22, 1, 0.36, 1) var(--o) forwards;
}

.rusz-zlacze {
  fill: var(--akcent);
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
  animation: ruszZlacze 0.28s cubic-bezier(0.34, 1.4, 0.64, 1) var(--o) forwards;
}

@keyframes ruszRysuj {
  from {
    stroke-dashoffset: 1;
  }
  to {
    stroke-dashoffset: 0;
  }
}

@keyframes ruszOpada {
  from {
    opacity: 0;
    transform: translateY(-9px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes ruszZlacze {
  from {
    opacity: 0;
    transform: scale(0.2);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

/* =========================================================
   Scena wczytywania: koparka
   Trzy zagnieżdżone obroty, po jednym na przegub, każdy
   z punktem obrotu w miejscu sworznia. Nadwozie obraca się
   osobno, żeby wysypać urobek obok wykopu.
   ========================================================= */
.kop-gasienica {
  fill: var(--grafit-2);
}
.kop-kolo {
  fill: var(--piasek);
}
.kop-korpus,
.kop-ramie {
  fill: var(--akcent);
}
.kop-kabina,
.kop-lyzka {
  fill: var(--akcent-ciemny);
}
.kop-przeciwwaga {
  fill: var(--grafit-2);
}

.kop-obrot,
.kop-wysiegnik,
.kop-przedramie,
.kop-lyzka-obrot {
  transform-origin: 0 0;
}
.kop-obrot {
  animation: kopObrot 2.6s cubic-bezier(0.45, 0, 0.55, 1) infinite;
}
.kop-wysiegnik {
  animation: kopWysiegnik 2.6s cubic-bezier(0.45, 0, 0.55, 1) infinite;
}
.kop-przedramie {
  animation: kopPrzedramie 2.6s cubic-bezier(0.45, 0, 0.55, 1) infinite;
}
.kop-lyzka-obrot {
  animation: kopLyzka 2.6s cubic-bezier(0.45, 0, 0.55, 1) infinite;
}

@keyframes kopObrot {
  0%,
  48% {
    transform: rotate(0deg);
  }
  62%,
  74% {
    transform: rotate(-7deg);
  }
  92%,
  100% {
    transform: rotate(0deg);
  }
}
@keyframes kopWysiegnik {
  0%,
  100% {
    transform: rotate(-20deg);
  }
  22%,
  42% {
    transform: rotate(0deg);
  }
  60%,
  78% {
    transform: rotate(-26deg);
  }
}
@keyframes kopPrzedramie {
  0%,
  100% {
    transform: rotate(28deg);
  }
  22% {
    transform: rotate(54deg);
  }
  42%,
  60% {
    transform: rotate(16deg);
  }
  78% {
    transform: rotate(22deg);
  }
}
@keyframes kopLyzka {
  0%,
  100% {
    transform: rotate(-12deg);
  }
  22% {
    transform: rotate(-38deg);
  }
  42%,
  58% {
    transform: rotate(26deg);
  }
  68%,
  76% {
    transform: rotate(-46deg);
  }
}

.kop-urobek {
  fill: var(--cynk);
  opacity: 0;
  animation: ruszOpada 0.5s cubic-bezier(0.22, 1, 0.36, 1) var(--o) forwards;
}
.kop-urobek--jasny {
  fill: var(--cynk-jasny);
}

@media (prefers-reduced-motion: reduce) {
  :root:not([data-ruch="wlaczony"]) .rusz-stojak,
  :root:not([data-ruch="wlaczony"]) .rusz-rygiel,
  :root:not([data-ruch="wlaczony"]) .rusz-ukos,
  :root:not([data-ruch="wlaczony"]) .rusz-barierka {
    stroke-dashoffset: 0;
    animation: none;
  }
  :root:not([data-ruch="wlaczony"]) .rusz-podest,
  :root:not([data-ruch="wlaczony"]) .rusz-bortnica,
  :root:not([data-ruch="wlaczony"]) .rusz-stopka,
  :root:not([data-ruch="wlaczony"]) .rusz-zlacze,
  :root:not([data-ruch="wlaczony"]) .kop-urobek {
    animation-name: zsCeglaSpokojna;
  }
  :root:not([data-ruch="wlaczony"]) .kop-obrot,
  :root:not([data-ruch="wlaczony"]) .kop-wysiegnik,
  :root:not([data-ruch="wlaczony"]) .kop-przedramie,
  :root:not([data-ruch="wlaczony"]) .kop-lyzka-obrot {
    animation: none;
  }
}

/* Kwota w rejestrze realizacji. Osobna kolumna, bo na stronie
   z pełnym wykazem to ona jest najczęściej szukaną informacją. */
.rejestr__kwota {
  font-family: var(--mono);
  font-size: 0.8125rem;
  color: var(--akcent-ciemny);
  white-space: nowrap;
}

.rejestr--pelny li {
  grid-template-columns: 4.5rem minmax(0, 1.1fr) minmax(0, 1.3fr) 7.5rem 7.5rem;
}

.rejestr__nota {
  margin-top: 1.5rem;
  padding: 1.15rem 1.35rem;
  background: var(--piasek-2);
  border-left: 3px solid var(--akcent);
  font-size: 0.9375rem;
}
.rejestr__nota b {
  font-weight: 700;
}

@media (max-width: 760px) {
  .rejestr--pelny li {
    grid-template-columns: 1fr;
  }
  .rejestr__kwota {
    color: var(--akcent-ciemny);
  }
}

/* =========================================================
   Pasek sąsiednich zakresów robót
   Ktoś, kto trafił z wyszukiwarki na jedną usługę, nie ma skąd
   wiedzieć, że robimy jeszcze trzy inne. Menu tego nie pokaże,
   bo mieści pięć pozycji, a nie osiem.
   ========================================================= */
.sasiedzi {
  padding-block: clamp(2.5rem, 5vw, 3.5rem);
  border-top: 1px solid var(--linia);
  background: var(--piasek-2);
}

.sasiedzi__siatka {
  margin-top: 1.15rem;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  background: var(--linia);
  border: 1px solid var(--linia);
}

.sasiad {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  padding: 1.25rem 1.35rem;
  background: var(--piasek);
  text-decoration: none;
  color: inherit;
  border-left: 3px solid transparent;
  transition:
    background 0.18s ease,
    border-color 0.18s ease;
}
.sasiad:hover {
  background: var(--piasek-2);
  border-left-color: var(--akcent);
}

.sasiad__nazwa {
  font-weight: 700;
  letter-spacing: -0.02em;
}
.sasiad__opis {
  font-size: 0.875rem;
  color: var(--stal);
}

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

/* Bieżąca strona zaznaczona także w stopce. Przy dwudziestu siedmiu
   podstronach to realna pomoc w orientacji, a nie ozdobnik. */
.stopka a[aria-current="page"] {
  color: var(--piasek);
  font-weight: 500;
}

/* =========================================================
   Odsłanianie treści przy przewijaniu
   Elementy dostają atrybut ze skryptu, więc bez JavaScriptu
   nic się nie ukrywa i strona pozostaje w całości czytelna.
   ========================================================= */
[data-odslon] {
  opacity: 0;
  transform: translateY(14px);
  transition:
    opacity 0.55s cubic-bezier(0.22, 1, 0.36, 1) var(--zwloka, 0s),
    transform 0.55s cubic-bezier(0.22, 1, 0.36, 1) var(--zwloka, 0s);
}
[data-odslon="widoczne"] {
  opacity: 1;
  transform: none;
}

/* =========================================================
   Pasek postępu czytania
   Cienka kreska na dolnej krawędzi przyklejonego paska.
   Przy wykazie dwudziestu dziewięciu realizacji albo
   dwudziestu sześciu pytaniach mówi, ile jeszcze zostało.
   ========================================================= */
.pasek-czytania {
  position: absolute;
  left: 0;
  bottom: -1px;
  height: 2px;
  width: 0;
  background: var(--akcent);
  transition: width 0.1s linear;
  pointer-events: none;
}

/* =========================================================
   Rozwijanie odpowiedzi
   ========================================================= */
.odpowiedz {
  animation: odpowiedzWchodzi 0.32s cubic-bezier(0.22, 1, 0.36, 1);
}
details > summary {
  transition: color 0.16s ease;
}
details[open] > summary {
  color: var(--akcent-ciemny);
}

@keyframes odpowiedzWchodzi {
  from {
    opacity: 0;
    transform: translateY(-6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* =========================================================
   Stany naciśnięcia
   Bez tego przycisk na telefonie nie daje żadnej odpowiedzi
   na dotknięcie i przez chwilę wygląda jak zepsuty.
   ========================================================= */
.przycisk,
.telefon-naglowek,
.przycisk-menu {
  transition:
    background 0.18s ease,
    border-color 0.18s ease,
    color 0.18s ease,
    transform 0.08s ease;
}
.przycisk:active,
.telefon-naglowek:active,
.przycisk-menu:active {
  transform: translateY(1px);
}

.sciezka,
.brama,
.sasiad,
.miasta a {
  transition:
    background 0.2s ease,
    border-color 0.2s ease,
    transform 0.2s cubic-bezier(0.22, 1, 0.36, 1);
}
.sciezka:active,
.brama:active,
.sasiad:active {
  transform: translateY(1px);
}

@media (prefers-reduced-motion: reduce) {
  :root:not([data-ruch="wlaczony"]) {
    scroll-behavior: auto;
  }
  :root:not([data-ruch="wlaczony"]) [data-odslon] {
    opacity: 1;
    transform: none;
    transition: none;
  }
  :root:not([data-ruch="wlaczony"]) .odpowiedz {
    animation: none;
  }
  :root:not([data-ruch="wlaczony"]) .pasek-czytania {
    transition: none;
  }
  :root:not([data-ruch="wlaczony"]) .przycisk:active,
  :root:not([data-ruch="wlaczony"]) .sciezka:active,
  :root:not([data-ruch="wlaczony"]) .brama:active,
  :root:not([data-ruch="wlaczony"]) .sasiad:active {
    transform: none;
  }
}

/* =========================================================
   Wykaz realizacji ułożony według miejscowości
   Ten sam materiał, inny porządek. Ktoś szukający wykonawcy
   w swojej gminie nie musi przeglądać dwudziestu dziewięciu
   wierszy ułożonych po latach.
   ========================================================= */
.miejscowosci {
  margin-top: 2rem;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 270px), 1fr));
  gap: 1px;
  background: var(--linia);
  border: 1px solid var(--linia);
}

.miejscowosc {
  background: var(--piasek);
  padding: 1.25rem 1.35rem 1.4rem;
}
.miejscowosc:target {
  background: var(--piasek-2);
  box-shadow: inset 3px 0 0 var(--akcent);
}

.miejscowosc__nazwa {
  margin: 0 0 0.85rem;
  font-size: 1.0625rem;
  font-weight: 700;
  letter-spacing: -0.025em;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem;
  padding-bottom: 0.6rem;
  border-bottom: 1px solid var(--linia);
}
.miejscowosc__nazwa span {
  font-family: var(--mono);
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--akcent-ciemny);
}

.miejscowosc__lista {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.85rem;
}
.miejscowosc__lista li {
  display: grid;
  gap: 0.15rem;
}

.miejscowosc__rok {
  font-family: var(--mono);
  font-size: 0.6875rem;
  letter-spacing: 0.1em;
  color: var(--stal);
}
.miejscowosc__co {
  font-size: 0.9375rem;
  line-height: 1.45;
}
.miejscowosc__kto {
  font-size: 0.8125rem;
  color: var(--stal);
}

/* Liczba realizacji przy miejscowości w stopce */
.stopka__ile {
  font-family: var(--mono);
  font-size: 0.6875rem;
  color: var(--akcent-jasny);
  margin-left: 0.35rem;
}

/* =========================================================
   Rytm typograficzny
   ========================================================= */

/* Wiersz dłuższy niż mniej więcej siedemdziesiąt pięć znaków
   męczy przy czytaniu, bo oko gubi początek następnego. */
.czolo__lead,
.sprzet__wstep,
.przebieg__wstep,
.pytania__glowa p,
.sciezki__glowa p,
.roznica__tekst p,
.ofirmie__glowa p,
.odpowiedz p,
.dokument__tresc p,
.dokument__tresc li {
  max-width: 62ch;
}
.czolo__lead {
  max-width: 54ch;
}

/* Polskie złożenia bywają dłuższe niż wąska kolumna. Dzielenie
   włączamy tam, gdzie kolumna jest naprawdę wąska, a nie wszędzie. */
.dane p,
.brama__opis,
.sasiad__opis,
.miejscowosc__co,
.sciezka__opis {
  hyphens: auto;
  overflow-wrap: break-word;
}

/* Liczby w jednej kolumnie mają stać w pionie równo. */
.rejestr__kwota,
.rozpiska b,
.dane b,
.miejscowosc__nazwa span,
.wynik__kwota {
  font-variant-numeric: tabular-nums;
}

/* Nadkreślenia mono w całym serwisie mają jeden rytm liter.
   Wcześniej rozjeżdżały się między 0,14 a 0,2 em. */
.etykieta,
.pasmo__etykieta,
.brama__etykieta,
.stopka h3,
.wykres__glowa,
.otwarcie__podpis {
  letter-spacing: 0.16em;
}

/* Nagłówek sekcji nie może kleić się do treści nad nim
   ani odklejać od własnego wprowadzenia. */
.sprzet__glowa,
.przebieg__glowa,
.ofirmie__glowa,
.sciezki__glowa {
  margin-bottom: clamp(1.75rem, 3.5vw, 2.5rem);
}

/* Ostatni element sekcji nie zostawia pustego pasa nad krawędzią. */
section > .oprawa > *:last-child {
  margin-bottom: 0;
}

/* =========================================================
   Kadry z placu i z roboty

   Trzy warianty jednej rodziny. Nazwy sprawdzone wobec całego
   arkusza przed dopisaniem, bo `.pasmo` już raz się zderzyło
   ze słupkami wykresu.

   `.kadr-pasmo`  zdjęcie na pełną szerokość okna, podpis na nim
   `.kadry`       siatka miniatur, każda otwiera `.lupa`
   `.lupa`        okno z powiększeniem, natywny `dialog`

   Trzeci wariant, zdjęcie obok kolumny tekstu, jest opisany
   w `03 Prototypy/kadry-warianty.html` i świadomie nie trafił
   tutaj, żeby nie trzymać w arkuszu reguł, których nikt nie używa.

   Wszystkie kolory schodzą ze zmiennych akcentu, więc gałąź
   budowlana dostanie ceglany bez drugiego zestawu reguł.
   ========================================================= */

/* --- Pasmo pełnej szerokości ------------------------------- */

/* Wyjście z oprawy na całą szerokość okna. `100vw` liczy się
   ze szerokością paska przewijania, dlatego szerokość bierzemy
   z `100%` korzenia, który paska nie wlicza. */
.kadr-pasmo {
  position: relative;
  margin: clamp(2rem, 4vw, 3rem) 0 0;
  width: 100%;
  overflow: hidden;
  background: var(--grafit);
}
.kadr-pasmo img {
  display: block;
  width: 100%;
  height: clamp(320px, 50vh, 560px);
  object-fit: cover;
  object-position: center 45%;
  background: var(--grafit-2);
}
.kadr-pasmo__opis {
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  padding: clamp(3rem, 8vw, 5rem) 0 clamp(1.25rem, 3vw, 2rem);
  color: var(--piasek);
  /* Przejście do pełnego grafitu u dołu. Pierwsza wersja miała 0,76
     krycia na 45% wysokości, a etykieta wypada wyżej, więc leżała
     na wartości bliskiej 0,3. Na kadrze z wypalonym niebem robiła
     się nieczytelna. Teraz płaskie 0,92 przez całą wysokość tekstu,
     zanikanie dopiero powyżej niego. Dzięki temu kontrast nie zależy
     od tego, jak jasne trafi się zdjęcie: przy najgorszym możliwym
     tle, czyli bieli, etykieta ma 4,92:1 na gałęzi rusztowań i 4,68:1
     na budowlanej, a akapit 9,88:1. Przelicza to `kontrast-pasm.py`
     z katalogu prototypów — obniżenie tego krycia zapali się tam. */
  background: linear-gradient(
    to top,
    rgba(35, 38, 42, 0.95) 0%,
    rgba(35, 38, 42, 0.92) 72%,
    rgba(35, 38, 42, 0) 100%
  );
}
.kadr-pasmo__opis > div {
  width: 100%;
  max-width: var(--maks);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.kadr-pasmo__opis b {
  display: block;
  font-family: var(--mono);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--akcent-jasny);
  margin-bottom: 0.5rem;
}
.kadr-pasmo__opis p {
  margin: 0;
  max-width: 54ch;
  font-size: clamp(1rem, 1.5vw, 1.125rem);
  line-height: 1.65;
}

/* Odnośnik pod skróconą listą pytań na stronie głównej gałęzi.
   Pełen zestaw stoi na osobnej podstronie, tu zostają trzy. */
.pytania__wiecej {
  margin: clamp(1.25rem, 2.5vw, 1.75rem) 0 0;
  padding-top: clamp(1rem, 2vw, 1.25rem);
  border-top: 1px solid var(--linia);
  font-size: 0.9375rem;
  line-height: 1.65;
  color: var(--stal);
  max-width: 58ch;
}
.pytania__wiecej a {
  color: var(--akcent);
  font-weight: 500;
}

/* --- Siatka miniatur --------------------------------------- */

.kadry {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: clamp(0.75rem, 1.5vw, 1.25rem);
  margin-top: clamp(2rem, 4vw, 3rem);
  list-style: none;
  padding: 0;
}
/* Na telefonie DWIE kolumny, nie jedna.

   Minimum 200 px przy szerokości ekranu 375 px nie mieści dwóch pól,
   więc `auto-fit` schodził do jednej kolumny. Przy sześciu kadrach
   nikt tego nie zauważył, przy trzydziestu dwóch galeria urosła do
   osiemnastu ekranów przewijania i zasłaniała resztę strony.

   Atrybut `sizes` w znacznikach od początku mówił `45vw` poniżej
   560 px, czyli zakładał dwie kolumny. Arkusz tego nie dowoził. */
@media (max-width: 560px) {
  .kadry {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
.kadry > li {
  margin: 0;
}
.kadry__kafel {
  display: block;
  width: 100%;
  padding: 0;
  border: 1px solid var(--linia);
  background: var(--cynk-jasny);
  cursor: zoom-in;
  position: relative;
  overflow: hidden;
  text-align: left;
}
.kadry__kafel img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  transition: transform 0.45s cubic-bezier(0.2, 0.7, 0.3, 1);
}
.kadry__kafel:hover img {
  transform: scale(1.04);
}
/* Obrys rysuje pseudoelement, żeby ramka nie przycinała się
   razem z powiększanym zdjęciem pod `overflow: hidden`. */
.kadry__kafel::after {
  content: "";
  position: absolute;
  inset: 0;
  box-shadow: inset 0 0 0 0 var(--akcent);
  transition: box-shadow 0.2s;
  pointer-events: none;
}
.kadry__kafel:hover::after {
  box-shadow: inset 0 0 0 3px var(--akcent);
}

@media (prefers-reduced-motion: reduce) {
  .kadry__kafel img {
    transition: none;
  }
  .kadry__kafel:hover img {
    transform: none;
  }
}

/* --- Powiększenie ------------------------------------------ */

.lupa {
  border: none;
  padding: 0;
  max-width: min(94vw, 1400px);
  max-height: 94vh;
  background: var(--grafit);
  color: var(--piasek);
}
.lupa::backdrop {
  background: rgba(20, 22, 25, 0.9);
}
.lupa img {
  display: block;
  width: auto;
  max-width: 100%;
  max-height: 80vh;
  margin-inline: auto;
  background: var(--grafit-2);
}
.lupa__stopka {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 0.75rem 1.5rem;
  padding: 0.875rem clamp(1rem, 3vw, 1.5rem);
  border-top: 1px solid var(--linia-jasna);
}
.lupa__tekst {
  font-family: var(--mono);
  font-size: 0.75rem;
  line-height: 1.6;
  color: var(--stal-jasna);
  max-width: 62ch;
  min-width: 0;
}
.lupa__zamknij {
  font-family: var(--mono);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  background: none;
  border: 1px solid var(--akcent-jasny);
  color: var(--akcent-jasny);
  padding: 0.5rem 1.125rem;
  cursor: pointer;
  flex: 0 0 auto;
}
.lupa__zamknij:hover {
  background: var(--akcent-jasny);
  color: var(--grafit);
}

/* =========================================================
   REZERWACJA ONLINE

   Rodzina klas "rez". Sprawdzone przed nazwaniem: korzeń
   "rezerw" nie występował w arkuszu ani razu, a "krok"
   owszem, bo .kroki i .krok__nr siedzą na dziesięciu
   podstronach. Steper nazwany .krok przejąłby ich reguły.

   Komponenty czytają wyłącznie --akcent, --akcent-ciemny
   i --akcent-jasny, więc przełączenie gałęzi działa bez
   ani jednej dodatkowej reguły.
   ========================================================= */
.rez {
  background: var(--cynk-jasny);
  border-top: 1px solid var(--linia);
  border-bottom: 1px solid var(--linia);
  padding-block: var(--sekcja);
}

/* ---------- Steper ---------- */
.rez-steper {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 1px;
  list-style: none;
  margin: 0 0 clamp(2rem, 4vw, 3rem);
  padding: 0;
  background: var(--linia);
  border: 1px solid var(--linia);
}
.rez-steper__poz button {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  width: 100%;
  height: 100%;
  padding: 0.85rem 0.9rem;
  background: var(--piasek);
  border: 0;
  border-top: 2px solid transparent;
  font: inherit;
  color: var(--stal);
  text-align: left;
  cursor: default;
}
.rez-steper__poz b {
  font-family: var(--mono);
  font-size: 0.8125rem;
  width: 1.65rem;
  height: 1.65rem;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  border: 1px solid var(--linia-mocna);
  color: var(--stal);
}
.rez-steper__poz span {
  font-size: 0.875rem;
  font-weight: 500;
}

/* Krok już wypełniony da się kliknąć i wrócić do niego */
.rez-steper__poz[data-stan="zrobiony"] button {
  cursor: pointer;
  color: var(--grafit);
}
.rez-steper__poz[data-stan="zrobiony"] b {
  background: var(--akcent);
  border-color: var(--akcent);
  color: var(--biel);
}
.rez-steper__poz[data-stan="zrobiony"] button:hover {
  background: var(--piasek-2);
}
.rez-steper__poz[data-stan="czynny"] button {
  border-top-color: var(--akcent);
  color: var(--grafit);
}
.rez-steper__poz[data-stan="czynny"] b {
  border-color: var(--akcent);
  color: var(--akcent);
  font-weight: 600;
}

/* ---------- Układ ---------- */
.rez-uklad {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr);
  gap: clamp(2rem, 4vw, 4rem);
  align-items: start;
}

.rez-panel h3 {
  font-size: clamp(1.25rem, 2.4vw, 1.6rem);
  margin: 0 0 0.6rem;
}
.rez-wstep {
  color: var(--stal);
  max-width: 62ch;
  font-size: 0.9375rem;
  margin: 0 0 1.5rem;
}

.rez-grupa {
  border: 0;
  padding: 0;
  margin: 0 0 1.75rem;
}
.rez-grupa legend {
  font-family: var(--mono);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--stal);
  padding: 0 0 0.7rem;
}

/* ---------- Karty wyboru ---------- */
.rez-karty {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 0.6rem;
}
.rez-karta {
  display: flex;
  align-items: flex-start;
  gap: 0.7rem;
  padding: 0.8rem 0.9rem;
  border: 1px solid var(--linia-mocna);
  background: var(--piasek);
  cursor: pointer;
  transition:
    border-color 0.16s ease,
    background 0.16s ease;
}
.rez-karta:has(input:checked) {
  border-color: var(--akcent);
  box-shadow: inset 0 0 0 1px var(--akcent);
}
.rez-karta[data-nieczynne="tak"] {
  cursor: not-allowed;
  background: var(--piasek-2);
}
.rez-karta[data-nieczynne="tak"] b {
  color: var(--stal);
}
.rez-karta input {
  margin-top: 0.2rem;
  accent-color: var(--akcent);
  flex: 0 0 auto;
}
.rez-karta b {
  display: block;
  font-size: 0.9375rem;
  font-weight: 600;
}
.rez-karta em {
  display: block;
  font-style: normal;
  font-size: 0.8125rem;
  line-height: 1.45;
  color: var(--stal);
  margin-top: 0.15rem;
}

/* ---------- Przełącznik dwustanowy ---------- */
.rez-przelacznik {
  display: inline-flex;
  border: 1px solid var(--linia-mocna);
  margin-bottom: 1rem;
}
.rez-przelacznik label {
  cursor: pointer;
}
.rez-przelacznik input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
}
.rez-przelacznik span {
  display: block;
  padding: 0.6rem 1.1rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--stal);
  background: var(--piasek);
}
.rez-przelacznik label:has(input:checked) span {
  background: var(--akcent);
  color: var(--biel);
}
/* Pole ukryte nie rysuje obrysu, więc przy nawigacji klawiaturą
   sygnał musi wziąć na siebie etykieta. */
.rez-przelacznik label:has(input:focus-visible) span {
  outline: 2px solid var(--grafit);
  outline-offset: -2px;
}

/* ---------- Siatka pól ---------- */
.rez-pola {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.25rem 1.5rem;
  margin-bottom: 1.25rem;
}
.rez-pola .pole--szerokie {
  grid-column: 1 / -1;
}
.rez-nip {
  display: flex;
  gap: 0.5rem;
  align-items: stretch;
}
.rez-nip .pole__wejscie {
  flex: 1;
  min-width: 0;
}
.rez-nip .przycisk {
  flex: 0 0 auto;
  padding-inline: 1rem;
  font-size: 0.8125rem;
}

/* ---------- Pole wyboru z opisem ---------- */
.rez-wybor {
  display: flex;
  align-items: flex-start;
  gap: 0.7rem;
  padding: 0.8rem 0.9rem;
  border: 1px solid var(--linia-mocna);
  background: var(--piasek);
  margin-bottom: 0.55rem;
  cursor: pointer;
}
.rez-wybor:has(input:checked) {
  border-color: var(--akcent);
}
.rez-wybor input {
  margin-top: 0.2rem;
  accent-color: var(--akcent);
  flex: 0 0 auto;
}
.rez-wybor b {
  display: block;
  font-size: 0.9375rem;
  font-weight: 600;
}
.rez-wybor em {
  display: block;
  font-style: normal;
  font-size: 0.8125rem;
  line-height: 1.45;
  color: var(--stal);
  margin-top: 0.15rem;
}

.rez-nota {
  margin: 0.9rem 0 0;
  padding: 0.75rem 0.9rem;
  border-left: 2px solid var(--akcent);
  background: var(--piasek);
  font-size: 0.8125rem;
  line-height: 1.55;
  color: var(--grafit);
}

/* ---------- Kalendarz obłożenia ---------- */
.rez-kalendarz {
  border: 1px solid var(--linia-mocna);
  background: var(--piasek);
}
.rez-kalendarz__glowa {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.65rem 0.75rem;
  border-bottom: 1px solid var(--linia);
  background: var(--piasek-2);
}
.rez-kalendarz__glowa strong {
  font-size: 0.9375rem;
  font-weight: 600;
}
.rez-kalendarz__strzalka {
  background: none;
  border: 1px solid var(--linia-mocna);
  color: var(--grafit);
  width: 2rem;
  height: 2rem;
  cursor: pointer;
  font-size: 1rem;
  line-height: 1;
}
.rez-kalendarz__strzalka:hover:not(:disabled) {
  background: var(--piasek);
  border-color: var(--grafit);
}
.rez-kalendarz__strzalka:disabled {
  color: var(--cynk);
  cursor: not-allowed;
}

.rez-kalendarz__dni {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  padding: 0.5rem 0.25rem 0;
  font-family: var(--mono);
  font-size: 0.6875rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--stal);
  text-align: center;
}
.rez-kalendarz__siatka {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 2px;
  padding: 0.35rem 0.25rem 0.5rem;
}

.rez-dzien {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.3rem;
  padding: 0.45rem 0.2rem 0.35rem;
  background: none;
  border: 1px solid transparent;
  font: inherit;
  color: var(--grafit);
  cursor: pointer;
  min-height: 3.1rem;
}
.rez-dzien__nr {
  font-family: var(--mono);
  font-size: 0.8125rem;
}
/* Tor paska obłożenia. Długość wypełnienia niesie informację,
   nie kolor, więc czyta się także przy wadach widzenia barw. */
.rez-dzien__tor {
  width: 100%;
  height: 0.3rem;
  background: var(--cynk);
  /* Sam tor daje wobec tła komórki 1,82:1, czyli poniżej progu 3:1,
     i przy jaśniejszym gruncie nie da się tego naprawić doborem
     jednego koloru: żeby tor odciął się od tła, musiałby być tak
     ciemny, że przestałby się odcinać od wypełnienia. Zakres paska
     wyznacza więc kreska pod spodem, 5,85:1. */
  box-shadow: inset 0 -1px 0 var(--stal);
}
.rez-dzien__tor i {
  display: block;
  height: 100%;
  background: var(--akcent);
}
.rez-dzien:hover:not(:disabled) {
  border-color: var(--linia-mocna);
}
.rez-dzien[data-stan="wybrany"] {
  background: var(--akcent);
  border-color: var(--akcent);
  color: var(--biel);
}
.rez-dzien[data-stan="wybrany"] .rez-dzien__tor {
  background: var(--akcent-ciemny);
  /* Na akcencie kreska stalowa dawałaby 1,20:1, więc jaśnieje
     razem z resztą dnia wybranego. */
  box-shadow: inset 0 -1px 0 var(--stal-jasna);
}
.rez-dzien[data-stan="wybrany"] .rez-dzien__tor i {
  background: var(--akcent-jasny);
}
.rez-dzien[data-stan="w-oknie"] {
  background: var(--akcent-jasny);
  border-color: var(--akcent-jasny);
}
.rez-dzien[data-stan="w-oknie"] .rez-dzien__tor {
  box-shadow: inset 0 -1px 0 var(--grafit);
}

/* ---------- Sobota i niedziela ----------
   Oba dni sa nieczynne, ale z roznych powodow warto je rozroznic:
   sobota bywa dniem, w ktorym klient sam pracuje na budowie, a
   niedziela nie. Kolor niesie tu informacje, wiec nie zostaje sam:
   dzien i tak jest wylaczony, a czytnik ekranu czyta pelna etykiete.

   Selektory MUSZA zawierac `:disabled`. Weekend jest zawsze dniem
   wylaczonym, a regula `.rez-dzien:disabled` ma te sama
   specyficznosc (0-2-0) co `.rez-dzien[data-weekend="niedziela"]`
   i stoi nizej w pliku, wiec bez tego dopisku wygrywa i czerwien
   niedzieli nie pojawia sie nigdy. */
.rez-dzien[data-weekend="sobota"],
.rez-dzien[data-weekend="sobota"]:disabled {
  background: var(--cynk-jasny);
  color: var(--stal);
}
.rez-dzien[data-weekend="niedziela"],
.rez-dzien[data-weekend="niedziela"]:disabled {
  background: var(--cynk-jasny);
  color: var(--niedziela);
}
.rez-dzien[data-weekend="niedziela"] .rez-dzien__nr,
.rez-dzien[data-weekend="niedziela"]:disabled .rez-dzien__nr {
  color: var(--niedziela);
}
.rez-dzien[data-weekend] .rez-dzien__tor {
  opacity: 0.35;
}

/* Doba buforowa: dzien firmy, nie klienta. Ukos zamiast wypelnienia,
   zeby na pierwszy rzut oka bylo widac, ze to inny rodzaj dnia niz
   najem, a nie po prostu slabiej zaznaczony najem. */
.rez-dzien[data-stan="bufor"] {
  border-color: var(--akcent);
  background-image: repeating-linear-gradient(
    -45deg,
    transparent 0 4px,
    var(--akcent-jasny) 4px 8px
  );
}
.rez-dzien[data-stan="bufor"] .rez-dzien__nr {
  font-weight: 600;
}

/* ---------- Dwie kwoty: przelew kontra gotowka ----------
   Kaucja stala wczesniej pod suma i czytalo sie ja jak kolejna
   pozycje rachunku. Teraz obie kwoty sa rownorzedne i kazda ma
   etykiete mowiaca, CZYM sie ja placi, bo to jedyna roznica,
   ktora naprawde trzeba zapamietac. */
.dwie-kwoty {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
  gap: 1px;
  margin-top: clamp(1.25rem, 3vw, 2rem);
  background: var(--linia-mocna);
  border: 1px solid var(--linia-mocna);
}
.dwie-kwoty__poz {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  padding: 1.1rem 1.2rem;
  background: var(--piasek);
}
.dwie-kwoty__poz[data-rola="gotowka"] {
  background: var(--grafit);
  color: var(--piasek);
}
.dwie-kwoty__etykieta {
  font-family: var(--mono);
  font-size: 0.6875rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--stal);
}
.dwie-kwoty__poz[data-rola="gotowka"] .dwie-kwoty__etykieta {
  color: var(--cynk);
}
.dwie-kwoty__suma {
  font-size: clamp(1.75rem, 5vw, 2.25rem);
  line-height: 1.05;
  font-variant-numeric: tabular-nums;
  color: var(--grafit);
}
.dwie-kwoty__poz[data-rola="gotowka"] .dwie-kwoty__suma {
  color: var(--biel);
}
.dwie-kwoty__opis {
  font-size: 0.875rem;
  color: var(--stal);
}
.dwie-kwoty__poz[data-rola="gotowka"] .dwie-kwoty__opis {
  color: var(--cynk-jasny);
}
.dwie-kwoty__opis b {
  color: var(--grafit);
}
.dwie-kwoty__poz[data-rola="gotowka"] .dwie-kwoty__opis b {
  color: var(--biel);
}

/* ---------- To samo na ekranie potwierdzenia ----------
   Krok piaty bywa drukowany albo pokazywany komus jeszcze, wiec
   podzial musi byc czytelny takze wyrwany z kontekstu. */
.platnosc-podzial {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
  gap: 1rem;
  margin: 1.25rem 0;
}
.platnosc-podzial__poz {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  padding: 0.9rem 1rem;
  border: 1px solid var(--linia-jasna);
}
.platnosc-podzial__poz[data-rola="gotowka"] {
  border-color: var(--akcent-jasny);
}
.platnosc-podzial__etykieta {
  font-family: var(--mono);
  font-size: 0.6875rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--akcent-jasny);
}
.platnosc-podzial__poz b {
  font-size: 1.5rem;
  font-variant-numeric: tabular-nums;
  color: var(--biel);
}
.platnosc-podzial__poz span:last-child {
  font-size: 0.8125rem;
  color: var(--cynk-jasny);
}

/* ---------- Harmonogram czterech dat ----------
   Dwie doby buforowe wygladaja inaczej niz dni najmu, bo to dni
   firmy, nie klienta. Ukos ten sam co w kalendarzu, zeby lista
   i siatka mowily tym samym jezykiem. */
.harmonogram {
  list-style: none;
  margin: 1.25rem 0 0;
  padding: 0;
  display: grid;
  gap: 0;
  border: 1px solid var(--linia-mocna);
}
.harmonogram[hidden] {
  display: none;
}
.harmonogram li {
  display: grid;
  grid-template-columns: minmax(0, 10rem) minmax(0, 13rem) minmax(0, 1fr);
  gap: 0.35rem 1rem;
  align-items: baseline;
  padding: 0.75rem 1rem;
  border-top: 1px solid var(--linia);
}
.harmonogram li:first-child {
  border-top: 0;
}
.harmonogram li[data-bufor="tak"] {
  background-image: repeating-linear-gradient(
    -45deg,
    transparent 0 6px,
    var(--piasek-2) 6px 12px
  );
}
.harmonogram b {
  font-family: var(--mono);
  font-size: 0.6875rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--stal);
}
.harmonogram time {
  font-weight: 600;
  color: var(--grafit);
  font-variant-numeric: tabular-nums;
}
.harmonogram span {
  font-size: 0.875rem;
  color: var(--stal);
}
@media (max-width: 760px) {
  .harmonogram li {
    grid-template-columns: 1fr;
    gap: 0.15rem;
  }
}

/* Legenda kalendarza: trzy rodzaje dni obok siebie. */
.rez-dni-legenda {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1.1rem;
  margin: 0.9rem 0 0;
  font-size: 0.8125rem;
  color: var(--stal);
}
.rez-dni-legenda span {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
}
.rez-dni-legenda i {
  width: 1rem;
  height: 1rem;
  border: 1px solid var(--linia-mocna);
  flex: none;
}
.rez-dni-legenda i[data-rodzaj="najem"] {
  background: var(--akcent-jasny);
  border-color: var(--akcent-jasny);
}
.rez-dni-legenda i[data-rodzaj="bufor"] {
  border-color: var(--akcent);
  background-image: repeating-linear-gradient(
    -45deg,
    transparent 0 3px,
    var(--akcent-jasny) 3px 6px
  );
}
.rez-dni-legenda i[data-rodzaj="wolne"] {
  background: var(--biel);
}
.rez-dzien[data-pusty="tak"] {
  visibility: hidden;
}
/* Dzień, w którym metraż się nie mieści. Przekreślenie jest
   drugim sygnałem obok wyszarzenia, bo sam kolor nie wystarcza. */
.rez-dzien:disabled {
  cursor: not-allowed;
  color: var(--stal);
}
.rez-dzien:disabled::after {
  content: "";
  position: absolute;
  left: 0.15rem;
  right: 0.15rem;
  top: 1.15rem;
  height: 1px;
  /* Kreska bierze kolor dnia, wiec przy niedzieli jest czerwona
     razem z cyfra, a nie szara na czerwonym. */
  background: currentColor;
  transform: rotate(-24deg);
}
.rez-dzien[data-dzis="tak"] .rez-dzien__nr {
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.rez-legenda {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0;
  padding: 0.55rem 0.75rem;
  border-top: 1px solid var(--linia);
  font-size: 0.75rem;
  color: var(--stal);
}
.rez-legenda__slupek {
  display: block;
  width: 2rem;
  height: 0.3rem;
  background: var(--cynk);
  flex: 0 0 auto;
}
.rez-legenda__slupek i {
  display: block;
  height: 100%;
  background: var(--akcent);
}

.rez-termin {
  margin: 1.25rem 0 0;
  font-size: 0.9375rem;
}
.rez-termin b {
  font-family: var(--mono);
}

/* ---------- Tabela kosztów ---------- */
.rez-tabela {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 1.5rem;
}
.rez-tabela th,
.rez-tabela td {
  /* Odstep miedzy kolumnami. Przy zerowym marginesie bocznym
     metraz sklejal sie z sasiednia komorka i w panelu wychodzilo
     „630 m2DECYZJA U GORY" jednym ciagiem. Skrajne komorki
     zostaja przy krawedziach, zeby tabela nie odjezdzala od
     naglowka sekcji. */
  padding: 0.7rem 0.75rem;
  border-bottom: 1px solid var(--linia);
  text-align: left;
  font-weight: 400;
  font-size: 0.9375rem;
  vertical-align: top;
}
.rez-tabela th:first-child,
.rez-tabela td:first-child {
  padding-left: 0;
}
.rez-tabela th:last-child,
.rez-tabela td:last-child {
  padding-right: 0;
}
.rez-tabela td {
  text-align: right;
  font-family: var(--mono);
  white-space: nowrap;
}
.rez-tabela th em {
  display: block;
  font-style: normal;
  font-size: 0.75rem;
  color: var(--stal);
  margin-top: 0.15rem;
}
.rez-tabela__suma th,
.rez-tabela__suma td {
  border-top: 1px solid var(--linia-mocna);
  font-weight: 600;
}
.rez-tabela__brutto th,
.rez-tabela__brutto td {
  font-size: 1.0625rem;
  font-weight: 700;
  border-bottom: 0;
}

.rez-kaucja {
  padding: 1rem 1.1rem;
  background: var(--piasek);
  border-left: 2px solid var(--akcent);
}
.rez-kaucja p {
  margin: 0;
  font-size: 0.8125rem;
  line-height: 1.6;
  color: var(--stal);
}
.rez-kaucja p:first-child {
  margin-bottom: 0.5rem;
  font-size: 0.9375rem;
  color: var(--grafit);
}
.rez-kaucja b {
  display: block;
}
.rez-kaucja b span {
  font-family: var(--mono);
}

/* ---------- Nawigacja między krokami ---------- */
.rez-nawigacja {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 2rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--linia);
}

/* ---------- Potwierdzenie ---------- */
.rez-potwierdzenie {
  padding: clamp(1.25rem, 3vw, 2rem);
  background: var(--piasek);
  border: 1px solid var(--akcent);
  margin-bottom: 1.75rem;
}
.rez-numer {
  font-family: var(--mono);
  font-size: clamp(1.75rem, 5vw, 2.5rem);
  font-weight: 600;
  letter-spacing: 0.02em;
  margin: 0.4rem 0 0.3rem;
  color: var(--akcent);
}
/* Awaria rysowania zgłoszenia.

   Panel przez godzinę pokazywał licznik „4" i pustą listę, bez słowa
   w konsoli, bo wyjątek z `.map()` leci do `.then()` obietnicy
   i przepada. Cicha pusta lista to najgorszy możliwy komunikat:
   obsługa myśli, że zamówień nie ma. */
.zgloszenie__awaria {
  margin: 0 0 1rem;
  padding: 0.9rem 1.1rem;
  background: var(--biel);
  border: 1px solid var(--ceglana);
  border-left: 4px solid var(--ceglana);
  font-size: 0.875rem;
  line-height: 1.55;
  color: var(--grafit);
}

/* Narzędzia panelu: druk i zapis obok wylogowania. */
.panel-narzedzia {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

/* Instrukcja dla brygady na karcie zgłoszenia.

   Numerowana, bo to jest kolejność, a nie lista rzeczy do zrobienia
   w dowolnym porządku. Data stoi pierwsza i wyróżniona, bo to jej
   szuka wzrok: „co mam zrobić dzisiaj”. */
.zgloszenie__kroki {
  counter-reset: krok;
  list-style: none;
  margin: 1.1rem 0 0;
  padding: 0;
  display: grid;
  gap: 0.7rem;
  border-top: 1px solid var(--linia);
  padding-top: 1.1rem;
}
.zgloszenie__kroki li {
  counter-increment: krok;
  display: grid;
  grid-template-columns: 1.6rem minmax(0, 1fr);
  gap: 0 0.7rem;
  font-size: 0.9375rem;
  line-height: 1.5;
}
.zgloszenie__kroki li::before {
  content: counter(krok);
  font-family: var(--mono);
  font-size: 0.8125rem;
  color: var(--akcent);
  padding-top: 0.1rem;
}
.zgloszenie__kroki b {
  display: block;
  font-weight: 600;
}
.zgloszenie__kroki span {
  grid-column: 2;
}
.zgloszenie__kiedy {
  grid-column: 2;
  font-family: var(--mono);
  font-size: 0.75rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--stal);
}

/* Narzędzie testowe. Celowo brzydkie i celowo podpisane: ma się
   rzucać w oczy, żeby nikt nie pomylił go z częścią serwisu. */
.rez-proba {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 0.9rem;
  margin: 0 0 1rem;
  padding: 0.7rem 0.9rem;
  border: 1px dashed var(--ceglana-jasna);
  background: rgba(138, 75, 42, 0.12);
}
.rez-proba span {
  font-size: 0.8125rem;
  color: var(--stal-jasna);
}


@media print {
  /* Na papier idzie sama lista i zgłoszenia. Nagłówek serwisu,
     menu, stopka i formularz blokady tylko zabierają miejsce. */
  .naglowek,
  .stopka,
  .panel-narzedzia,
  .rez-logowanie,
  .zgloszenie__akcje,
  .ladowanie {
    display: none;
  }
  .zgloszenie,
  .zamowienie,
  .zgloszenie__kroki li {
    break-inside: avoid;
  }

  /* Druk jednego zamowienia. Panel zostaje na ekranie taki, jaki
     byl, a na papier idzie sama karta: brygadzista bierze do
     kieszeni jedno zlecenie, nie cala baze. Nowe okno odpada, bo
     blokuje je przegladarka, a ramka z wpisana trescia wpada pod
     `frame-src` z naglowka CSP.

     `data-drukujaca` niesie droge od karty do korzenia dokumentu.
     Chowamy kazde rodzenstwo na tej drodze, wiec regula nie zna
     ani jednej nazwy z ukladu panelu i nie trzeba jej poprawiac
     po dolozeniu kolejnej sekcji. */
  body[data-drukuj="zamowienie"] > *:not([data-drukujaca]):not([data-drukowana]),
  body[data-drukuj="zamowienie"] [data-drukujaca] > *:not([data-drukujaca]):not([data-drukowana]) {
    display: none;
  }
  body[data-drukuj="zamowienie"] .zamowienie__stopka {
    display: none;
  }
  body[data-drukuj="zamowienie"] .zgloszenia {
    padding: 0;
    background: transparent;
    border: 0;
  }

  /* ----- Jedno zamowienie, jedna kartka -----

     Na ekranie karta ma 942 px i po doliczeniu marginesow drukarki
     rozchodzi sie na trzy strony. Na papierze nie ma najechania
     myszka ani przewijania, wiec wszystko moze stac ciasniej,
     a dane w dwoch kolumnach: etykiety sa krotkie i i tak
     zajmowaly polowe wiersza pustym miejscem. */
  .zamowienie {
    border-width: 1px;
  }
  .zamowienie__glowa {
    padding: 0.45rem 0.7rem 0.45rem 0.7rem;
    gap: 0.2rem 0.7rem;
  }
  .zamowienie__glowa::before {
    display: none;
  }
  /* Zegar liczy czas od chwili wydruku, wiec „wydanie za trzy dni"
     klamie juz nastepnego ranka. Na kartce zostaja same daty. */
  .zamowienie__zegar {
    display: none;
  }
  .zamowienie__srodek {
    gap: 0.5rem;
    padding: 0.6rem 0.7rem;
  }
  .zgloszenie__dane {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.15rem 1.2rem;
  }
  .zgloszenie__dane > div {
    grid-template-columns: 6.5rem minmax(0, 1fr);
    gap: 0.4rem;
  }
  .zgloszenie__dane dd {
    font-size: 0.8125rem;
  }
  /* Krok w dwoch kolumnach zamiast w trzech wierszach: data z lewej,
     polecenie z prawej. Trzy wiersze na krok kosztowaly 89 px razy
     piec krokow, czyli pol kartki na sam odstep. */
  .zamowienie__wybor li {
    padding: 0.3rem 0.6rem;
    font-size: 0.8125rem;
    break-inside: avoid;
  }
  .zgloszenie__kroki {
    margin-top: 0.6rem;
    padding-top: 0.6rem;
    gap: 0.35rem;
  }
  .zgloszenie__kroki li {
    grid-template-columns: 1.1rem 6.8rem minmax(0, 1fr);
    gap: 0 0.5rem;
    font-size: 0.78rem;
    line-height: 1.35;
  }
  .zgloszenie__kroki li::before {
    font-size: 0.7rem;
  }
  .zgloszenie__kiedy {
    grid-column: 2;
    align-self: start;
  }
  /* Tytul wchodzi w zdanie: szesc krokow razy jeden wiersz mniej
     to sto osiem pikseli, czyli roznica miedzy jedna kartka a dwiema. */
  .zgloszenie__kroki b {
    display: inline;
  }
  /* Dwa czlony w selektorze, nie jeden: `.zgloszenie__kroki span`
     z ekranu ma wieksza wage i przy krotszym zapisie wygrywalo,
     wpychajac caly opis do waskiej kolumny z data. */
  .zgloszenie__kroki .zgloszenie__co {
    grid-column: 3;
  }
}

/* Kwit na ekranie końcowym: co, kiedy, gdzie.

   NAZWA JEST INNA NIŻ `.rez-podsumowanie` CELOWO. Tamta klasa należy
   do bocznego panelu z ceną przy formularzu i ma regułę, która na
   telefonie przestawia go na początek układu. Ten sam człon nazwy
   ściągnąłby tę regułę i tutaj.

   Ekran końcowy pokazywał wcześniej numer i kwotę, ale nie to, czego
   numer dotyczy. Klient nie miał jak sprawdzić, czy nie pomylił się
   o miesiąc, a to ostatni moment przed wpłatą. */
.rez-kwit {
  display: grid;
  gap: 0;
  margin: 1.5rem 0 0;
  border: 1px solid var(--linia);
}
.rez-kwit > div {
  display: grid;
  grid-template-columns: 9rem minmax(0, 1fr);
  gap: 0 1rem;
  padding: 0.7rem 1rem;
  border-top: 1px solid var(--linia);
}
.rez-kwit > div:first-child {
  border-top: 0;
}
.rez-kwit dt {
  font-family: var(--mono);
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--stal);
  align-self: baseline;
}
.rez-kwit dd {
  margin: 0;
  font-size: 0.9375rem;
  line-height: 1.5;
}
@media (max-width: 560px) {
  .rez-kwit > div {
    grid-template-columns: minmax(0, 1fr);
    gap: 0.15rem;
  }
}

/* Adres, na który poszło potwierdzenie. Stoi osobno i wysoko, bo
   literówka w domenie jest najczęstszym powodem „nic nie przyszło",
   a wyłapać ją da się tylko wtedy, gdy adres widać wypisany. */
.rez-poczta {
  margin: 1.25rem 0 0;
  padding: 0.9rem 1.1rem;
  background: var(--piasek);
  border-left: 3px solid var(--akcent);
  font-size: 0.9375rem;
  color: var(--grafit);
}
.rez-poczta b {
  font-family: var(--mono);
  overflow-wrap: anywhere;
}

.rez-dalej {
  list-style: none;
  counter-reset: rezdalej;
  margin: 0 0 1.75rem;
  padding: 0;
}
.rez-dalej li {
  counter-increment: rezdalej;
  position: relative;
  padding: 0 0 1rem 2.6rem;
}
.rez-dalej li::before {
  content: counter(rezdalej);
  position: absolute;
  left: 0;
  top: 0;
  width: 1.75rem;
  height: 1.75rem;
  display: grid;
  place-items: center;
  border: 1px solid var(--akcent);
  color: var(--akcent);
  font-family: var(--mono);
  font-size: 0.8125rem;
}
.rez-dalej b {
  display: block;
  font-size: 0.9375rem;
}
.rez-dalej p {
  margin: 0.2rem 0 0;
  font-size: 0.875rem;
  color: var(--stal);
}

.rez-platnosc {
  background: var(--grafit);
  color: var(--piasek);
  padding: clamp(1.25rem, 3vw, 1.75rem);
  margin-bottom: 1.75rem;
}
.rez-platnosc h3 {
  font-size: 1rem;
  margin: 0 0 0.9rem;
}
/* Przycisk zapłaty razem z notą, dlaczego jeszcze nie działa.

   Nota ma stać jak najbliżej przycisku, żeby nikt nie klikał
   w wyłączony guzik, nie wiedząc, czemu nie reaguje. W szerokiej
   kolumnie mieści się obok, w wąskiej zawija się pod spód —
   `flex-wrap` decyduje o tym sam, bo panel płatności jest węższy
   niż treść strony i sztywne dwie kolumny rozpychałyby go w bok. */
.rez-platnosc__akcja {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 1rem;
  margin: 0 0 1.1rem;
}
.rez-platnosc__akcja .przycisk:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}
.rez-platnosc__akcja-nota {
  flex: 1 1 14rem;
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--stal-jasna);
}

.rez-platnosc__formy {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 0.9rem;
}
.rez-platnosc__formy span {
  padding: 0.5rem 0.9rem;
  border: 1px solid var(--stal-jasna);
  font-family: var(--mono);
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--stal-jasna);
}
.rez-platnosc p {
  margin: 0;
  font-size: 0.8125rem;
  line-height: 1.6;
  color: var(--stal-jasna);
}

.rez-zaufanie {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 1px;
  list-style: none;
  margin: 0;
  padding: 0;
  background: var(--linia);
  border: 1px solid var(--linia);
}
.rez-zaufanie li {
  background: var(--piasek);
  padding: 0.9rem 1rem;
}
.rez-zaufanie b {
  display: block;
  font-size: 0.875rem;
}
.rez-zaufanie span {
  display: block;
  font-size: 0.75rem;
  color: var(--stal);
  margin-top: 0.2rem;
}

/* ---------- Podsumowanie boczne ----------
   Komponent stoi na .wynik, czyli na ciemnym panelu, który
   już jest w arkuszu. Poniżej tylko to, co dochodzi. */
.rez-podsumowanie__metraz {
  margin: 0.75rem 0 1.25rem;
}
.rez-podsumowanie__metraz b {
  display: block;
  font-family: var(--mono);
  font-size: clamp(1.6rem, 4vw, 2.1rem);
  font-weight: 600;
  color: var(--biel);
}
.rez-podsumowanie__metraz span {
  font-size: 0.8125rem;
  color: var(--stal-jasna);
}
.rez-podsumowanie__lista {
  margin: 0 0 1.25rem;
  padding-top: 1rem;
  border-top: 1px solid var(--linia-jasna);
}
.rez-podsumowanie__lista div {
  display: flex;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.4rem 0;
  font-size: 0.8125rem;
}
.rez-podsumowanie__lista dt {
  color: var(--stal-jasna);
}
.rez-podsumowanie__lista dd {
  margin: 0;
  font-family: var(--mono);
  text-align: right;
  color: var(--piasek);
}
.rez-podsumowanie__kwota {
  margin: 0;
  padding-top: 1rem;
  border-top: 1px solid var(--linia-jasna);
  font-family: var(--mono);
  font-size: clamp(1.75rem, 4.5vw, 2.4rem);
  font-weight: 600;
  color: var(--biel);
  line-height: 1.1;
}
.rez-podsumowanie__kwota small {
  display: block;
  font-family: var(--font);
  font-size: 0.75rem;
  font-weight: 400;
  color: var(--stal-jasna);
  margin-top: 0.2rem;
}
.rez-podsumowanie__netto {
  margin: 0.5rem 0 0;
  font-size: 0.8125rem;
  color: var(--stal-jasna);
}
.rez-podsumowanie__netto span {
  font-family: var(--mono);
}
.rez-podsumowanie__uwaga {
  margin: 1rem 0 0;
  padding: 0.7rem 0.85rem;
  background: rgba(239, 233, 223, 0.06);
  border-left: 2px solid var(--akcent-jasny);
  font-size: 0.8125rem;
  line-height: 1.55;
  color: var(--piasek);
}

/* ---------- Stan placu ---------- */
.rez-plac {
  padding-block: var(--sekcja);
}

/* ---------- Wąskie ekrany ---------- */
@media (max-width: 960px) {
  .rez-uklad {
    grid-template-columns: minmax(0, 1fr);
  }
  /* Na telefonie panel z kwotą nie może przykrywać formularza */
  .rez-podsumowanie {
    position: static;
    order: -1;
  }
  .rez-steper span {
    display: none;
  }
  .rez-steper__poz button {
    justify-content: center;
    padding-inline: 0.4rem;
  }
}
@media (max-width: 560px) {
  .rez-pola {
    grid-template-columns: minmax(0, 1fr);
  }
  .rez-nawigacja {
    flex-direction: column-reverse;
  }
  .rez-nawigacja .przycisk {
    justify-content: center;
  }
  .rez-dzien {
    min-height: 2.8rem;
    padding-inline: 0;
  }
}

/* ---------- Panel blokad ----------
   Oś sześćdziesięciu dni. Słupek rośnie od dołu, więc czyta się
   jak wykres, a nie jak pasek postępu. */
.rez-os {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  align-items: end;
  gap: 1px;
  height: 5rem;
  margin: 1rem 0 0;
  padding: 0 0.25rem;
  border: 1px solid var(--linia-mocna);
  /* Podstawa osi rysowana grafitem, 12,58:1, żeby było widać,
     od czego słupki rosną. */
  border-bottom: 2px solid var(--grafit);
  background: var(--piasek);
}
.rez-os__dzien {
  display: flex;
  align-items: flex-end;
  height: 100%;
  background: var(--cynk-jasny);
  /* Tak samo jak w kalendarzu: zakres słupka wyznacza kreska,
     nie sam kolor toru. Oś ma pod spodem grubszą krawędź. */
}
.rez-os__dzien i {
  display: block;
  width: 100%;
  background: var(--akcent);
}

.rez-usun {
  background: none;
  border: 1px solid var(--linia-mocna);
  color: var(--grafit);
  font-family: var(--mono);
  font-size: 0.6875rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 0.35rem 0.7rem;
  cursor: pointer;
}
.rez-usun:hover {
  border-color: var(--grafit);
  background: var(--piasek-2);
}
/* Anulowanie potwierdzonej rezerwacji wyglada inaczej niz reszta
   dzialan w tej kolumnie, bo jako jedyne odwoluje cos, na co klient
   juz dostal potwierdzenie. */
.rez-usun--odwolaj {
  border-color: var(--ceglana);
  color: var(--ceglana-ciemna);
}
.rez-usun--odwolaj:hover {
  background: var(--ceglana);
  border-color: var(--ceglana);
  color: var(--biel);
}
.rez-przyklad {
  font-family: var(--mono);
  font-size: 0.6875rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--stal);
}

/* ---------- Grupa pól wyłączona ----------
   Wariant niewybrany zostaje na ekranie, ale przygaszony
   i odcięty od klawiatury. Ukrycie go byłoby gorsze: człowiek
   nie widziałby, że jest druga droga wpisania metrażu.

   Kontrast wewnątrz spada poniżej progu i tak ma być: wytyczne
   wyłączają z wymagań elementy nieczynne, a przygaszenie jest
   tu jedynym sygnałem, że pole nic nie zmienia. */
/* Blok nieaktywny to alternatywa, ktorej klient nie wybral: gotowe
   zestawy kontra wlasny metraz, dane firmy kontra osoba prywatna.
   Wczesniej byl tylko przygaszony i dalej zajmowal miejsce, wiec
   osoba prywatna ogladala trzy wyszarzone pola firmowe, w ktore nie
   dalo sie nawet kliknac. Atrybut `disabled` na polach zostaje
   niezaleznie od tego i to on trzyma ich wartosci poza wysylka. */
[data-wylaczone="tak"] {
  display: none;
}

/* ---------- Zamówienie ponad próg ---------- */
.rez-stop {
  margin-top: 1.5rem;
  padding: clamp(1.1rem, 3vw, 1.6rem);
  background: var(--piasek);
  border: 1px solid var(--akcent);
  border-left-width: 3px;
}
.rez-stop p {
  margin: 0.5rem 0 1rem;
  font-size: 0.9375rem;
  line-height: 1.65;
  max-width: 62ch;
}
.rez-stop__godziny {
  margin: 0.75rem 0 0;
  font-size: 0.8125rem;
  color: var(--stal);
}
/* Przycisk „Dalej” wyłączony przy zamówieniu ponad próg */
.rez-nawigacja .przycisk:disabled {
  background: var(--cynk);
  border-color: var(--cynk);
  color: var(--piasek);
  cursor: not-allowed;
}

/* ---------- Sterowanie długością najmu ---------- */
/* ---------- Wybor dlugosci najmu ----------
   Dwa wiersze, bo to dwie rozne czynnosci. Gorny dostraja termin
   juz wybrany i trzyma date startu. Dolny wybiera gotowa dlugosc
   i w razie potrzeby przesuwa start, zeby wyszlo rowno. Wczesniej
   staly w jednej linii, w identycznych przyciskach, wiec nie bylo
   widac, ze robia co innego. */
.rez-dlugosc {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  margin-top: 1.25rem;
  padding: clamp(0.9rem, 2.5vw, 1.15rem);
  background: var(--piasek);
  border: 1px solid var(--linia-mocna);
}
.rez-dlugosc__wiersz {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.55rem 0.9rem;
}
.rez-dlugosc__wiersz + .rez-dlugosc__wiersz {
  padding-top: 0.85rem;
  border-top: 1px solid var(--linia);
}
.rez-dlugosc__etykieta {
  flex: none;
  min-width: 7.5rem;
  font-family: var(--mono);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--stal);
}
/* Jedno zdanie „co dalej" zamiast czterech ponumerowanych akapitów.
   Reszta procedury idzie mailem, który klient dostaje w tej samej
   sekundzie, więc ekran nie musi jej powtarzać. */
.rez-dalej-krotko {
  margin: 1.5rem 0 0;
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--stal);
}

/* Podsumowanie firmy pobranej z Białej listy.

   Zastępuje dwa pola tekstowe. Dane z rejestru są pewniejsze niż
   przepisane ręcznie, więc domyślnie pokazujemy sam wynik, a pola
   wracają dopiero po kliknięciu „popraw ręcznie". */
.rez-firma-podsumowanie {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.2rem 0.6rem;
  grid-column: 1 / -1;
  margin: 0;
  padding: 0.85rem 1rem;
  background: var(--piasek-2);
  border: 1px solid var(--linia);
  font-size: 0.9375rem;
  line-height: 1.5;
}
.rez-firma-podsumowanie b {
  flex-basis: 100%;
  font-weight: 600;
}
.rez-firma-podsumowanie span {
  color: var(--stal);
}
.rez-firma-popraw {
  margin-left: auto;
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  font-size: 0.8125rem;
  color: var(--akcent);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
.rez-firma-popraw:hover {
  color: var(--akcent-ciemny);
}

/* Sama liczba dni, bez przycisków dostrajania.

   Wcześniej stał tu licznik z −7 −1 +1 +7. Wypadł, bo przy minimum
   czternastu dniach dostrajanie co dzień rzadko komu było potrzebne,
   a szybki wybór pod spodem robi to samo jednym kliknięciem. Liczba
   zostaje, bo bez niej nie widać, co się wybrało. */
.rez-dlugosc__liczba {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 6.25rem;
  min-height: 44px;
  padding-inline: 0.75rem;
  font-family: var(--mono);
  font-size: 1rem;
  font-variant-numeric: tabular-nums;
  color: var(--grafit);
  background: var(--piasek-2);
  border: 1px solid var(--linia-mocna);
}
.rez-dlugosc button {
  background: none;
  border: 0;
  font: inherit;
  font-family: var(--mono);
  font-size: 0.8125rem;
  color: var(--grafit);
  padding: 0.5rem 0.75rem;
  min-height: 44px;
  cursor: pointer;
}
.rez-dlugosc__gotowe {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}
.rez-dlugosc__gotowe button {
  background: var(--biel);
  border: 1px solid var(--linia-mocna);
  font-size: 0.8125rem;
  letter-spacing: 0.02em;
  padding: 0.5rem 0.85rem;
  /* Etykieta ma sie nie lamac w srodku. Przy waskim ekranie caly
     przycisk przechodzi do nastepnego wiersza, zamiast rosnac
     w gore i rozjezdzac rzad na trzy rozne wysokosci. */
  white-space: nowrap;
}
.rez-dlugosc__gotowe button:hover {
  border-color: var(--akcent);
  color: var(--akcent-ciemny);
}
/* Wybrana dlugosc zostaje widoczna po powrocie do tego kroku. */
.rez-dlugosc__gotowe button[data-wybrany="tak"] {
  background: var(--akcent);
  border-color: var(--akcent);
  color: var(--biel);
}
.rez-dlugosc__gotowe button[data-wybrany="tak"]:hover {
  color: var(--biel);
}
/* Czyszczenie to nie podpowiedz, tylko cofniecie wyboru, wiec
   stoi osobno i wyglada inaczej. */
.rez-dlugosc__wyczysc {
  margin-left: auto;
  color: var(--stal);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.rez-dlugosc__wyczysc:hover {
  color: var(--ceglana-ciemna);
}
@media (max-width: 640px) {
  .rez-dlugosc__etykieta {
    min-width: 100%;
  }
  .rez-dlugosc__wyczysc {
    margin-left: 0;
  }
}

/* ---------- Podtytuł wewnątrz siatki pól ---------- */
.rez-podtytul {
  padding-top: 0.5rem;
  border-top: 1px solid var(--linia);
}
.rez-podtytul .pole__podpowiedz {
  margin-top: 0.3rem;
}

/* ---------- Licznik słów w formularzu kontaktowym ---------- */
.licznik-slow {
  display: inline-block;
  margin-left: 0.35rem;
  padding: 0.15rem 0.5rem;
  border: 1px solid var(--linia-mocna);
  font-family: var(--mono);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  color: var(--stal);
  white-space: nowrap;
}
.licznik-slow[data-stan="ok"] {
  border-color: var(--akcent);
  color: var(--akcent);
}

@media (max-width: 560px) {
  .rez-dlugosc__gotowe {
    margin-left: 0;
  }
  /* Na telefonie przyciski długości najmu muszą mieć wysokość
     celu dotykowego, a przy domyślnym odstępie miały 36 px. */
  .rez-dlugosc button {
    padding-block: 0.72rem;
  }
}

/* ---------- Autouzupełnianie przeglądarki ----------
   Chrome i Edge przemalowują pole uzupełnione z pamięci na
   własny jasny błękit i robią to regułą, której zwykłe `background`
   nie przebija. Na ciemnym formularzu kontaktowym wychodziło
   z tego dwa jasne pola obok dwóch ciemnych, czyli formularz
   wyglądał na zepsuty.

   Tło przemalowuje cień wewnętrzny, bo jego przeglądarka nie
   nadpisuje, a kolor tekstu osobna własność `-webkit-text-fill-color`.
   Długie przejście tła to znany sposób na odsunięcie w czasie
   animacji, którą przeglądarka odtwarza przy uzupełnianiu. */
.pole__wejscie input:-webkit-autofill,
.pole__wejscie input:-webkit-autofill:hover,
.pole__wejscie input:-webkit-autofill:focus,
.pole__wejscie textarea:-webkit-autofill {
  -webkit-text-fill-color: var(--grafit);
  -webkit-box-shadow: 0 0 0 1000px var(--piasek) inset;
  box-shadow: 0 0 0 1000px var(--piasek) inset;
  caret-color: var(--grafit);
  transition: background-color 100000s ease-in-out 0s;
}

/* Na ciemnym formularzu ten sam zabieg, tylko w drugą stronę.
   Tekst piaskowy na graficie daje 12,58:1. */
.formularz .pole__wejscie input:-webkit-autofill,
.formularz .pole__wejscie input:-webkit-autofill:hover,
.formularz .pole__wejscie input:-webkit-autofill:focus,
.formularz .pole__wejscie textarea:-webkit-autofill {
  -webkit-text-fill-color: var(--piasek);
  -webkit-box-shadow: 0 0 0 1000px var(--grafit) inset;
  box-shadow: 0 0 0 1000px var(--grafit) inset;
  caret-color: var(--piasek);
}

/* ---------- Licznik słów na ciemnym formularzu ----------
   Wersja podstawowa liczona jest na piaskowym tle i na graficie
   dawała 1,70:1 przy progu 4,5:1. Na ciemnym stal jaśnieje:
   4,73:1, a stan spełniony 4,94:1. */
.formularz .licznik-slow {
  border-color: var(--stal-jasna);
  color: var(--stal-jasna);
}
.formularz .licznik-slow[data-stan="ok"] {
  border-color: var(--akcent-jasny);
  color: var(--akcent-jasny);
}

/* ---------- Komunikat przy polu ----------
   Kolor bierzemy z ceglanego akcentu gałęzi budowlanej, bo paleta
   nie ma czerwieni, a ceglany odcina się od morskiego i nie wpada
   w barwę stanu poprawnego. Sygnałem jest też pionowa kreska
   i pogrubienie, więc komunikat czyta się bez rozpoznawania barw. */
.pole__blad {
  display: block;
  margin-top: 0.4rem;
  padding-left: 0.55rem;
  border-left: 2px solid var(--ceglana);
  font-size: 0.8125rem;
  font-weight: 500;
  line-height: 1.5;
  color: var(--ceglana);
}

/* Pole z komunikatem dostaje obrys w tym samym kolorze, żeby
   dało się je znaleźć wzrokiem bez czytania całej kolumny. */
.pole__wejscie:has([aria-invalid]) {
  border-color: var(--ceglana);
}

/* Zgody w bramce i w formularzu kontaktowym to etykiety, nie
   komórki siatki, więc komunikat musi zająć całą szerokość. */
.zgoda,
.rez-wybor {
  flex-wrap: wrap;
}
.zgoda .pole__blad,
.rez-wybor .pole__blad {
  flex-basis: 100%;
  margin-left: 1.4rem;
}

/* Na ciemnym formularzu ceglany ciemny daje 1,30:1,
   więc przechodzimy na wersję jasną: 4,71:1 wobec grafitu-2. */
.formularz .pole__blad {
  border-left-color: var(--ceglana-jasna);
  color: var(--ceglana-jasna);
}
.formularz .pole__wejscie:has([aria-invalid]) {
  border-color: var(--ceglana-jasna);
}

/* ---------- Logowanie do panelu blokad ---------- */
.rez-logowanie {
  max-width: 26rem;
  margin-bottom: 1.5rem;
  padding: 1rem 1.1rem;
  background: var(--piasek);
  border: 1px solid var(--linia-mocna);
  border-left: 3px solid var(--akcent);
}
.rez-logowanie code {
  font-family: var(--mono);
  font-size: 0.8125rem;
}
.rez-lista-glowa {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}
.rez-lista-glowa .przycisk {
  font-size: 0.75rem;
  padding: 0.5rem 0.9rem;
}

/* ---------- Zgłoszenia czekające na decyzję ----------
   Karty, nie wiersze tabeli. Obsługa musi zobaczyć telefon, adres
   budowy i kwotę w jednym rzucie oka, zanim naciśnie „potwierdź",
   a w komórce tabeli te dane się nie mieszczą. */
.zgloszenia {
  margin-bottom: clamp(2rem, 5vw, 3rem);
  padding: clamp(1.1rem, 3vw, 1.6rem);
  background: var(--piasek);
  border: 1px solid var(--linia-mocna);
  border-left: 4px solid var(--akcent);
}
.zgloszenia__glowa {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
}
.zgloszenia__glowa h2 {
  margin: 0;
}
.zgloszenia__licznik {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.9rem;
  height: 1.9rem;
  padding: 0 0.5rem;
  border-radius: 999px;
  background: var(--akcent);
  color: var(--biel);
  font-family: var(--mono);
  font-size: 0.875rem;
  font-variant-numeric: tabular-nums;
}
.zgloszenia .rez-wstep {
  margin-bottom: 1.25rem;
}
/* Jedna kolumna, nie siatka. Przy trzech kartach dwie kolumny
   oszczedzaly przewijanie, przy stu zwinietych wierszach rozbijaja
   porzadek: oko czyta z gory na dol, a nie zygzakiem. */
.zgloszenia > #panel-zgloszenia-lista {
  display: block;
}

.zgloszenie {
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
  padding: 1.1rem;
  background: var(--biel);
  border: 1px solid var(--linia-mocna);
}
.zgloszenie[data-wygasla="tak"] {
  border-color: var(--ceglana);
}
.zgloszenie__glowa {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem;
  flex-wrap: wrap;
  padding-bottom: 0.7rem;
  border-bottom: 1px solid var(--linia);
}
.zgloszenie__numer {
  margin: 0;
  font-family: var(--mono);
  font-size: 1.0625rem;
  letter-spacing: 0.04em;
  color: var(--grafit);
}
.zgloszenie__zegar {
  margin: 0;
  font-family: var(--mono);
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--akcent-ciemny);
}
.zgloszenie[data-wygasla="tak"] .zgloszenie__zegar {
  color: var(--ceglana-ciemna);
}
.zgloszenie__dane {
  display: grid;
  gap: 0.5rem;
  margin: 0;
}
.zgloszenie__dane > div {
  display: grid;
  grid-template-columns: 7.5rem minmax(0, 1fr);
  gap: 0.75rem;
  align-items: baseline;
}
.zgloszenie__dane dt {
  font-family: var(--mono);
  font-size: 0.6875rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--stal);
}
.zgloszenie__dane dd {
  margin: 0;
  font-size: 0.9375rem;
  color: var(--grafit);
  overflow-wrap: anywhere;
}
.zgloszenie__dane a {
  color: var(--akcent-ciemny);
}
.zgloszenie__akcje {
  display: flex;
  gap: 0.6rem;
  flex-wrap: wrap;
  padding-top: 0.7rem;
  border-top: 1px solid var(--linia);
}
/* 44 px to najmniejszy cel, w który da się trafić kciukiem bez
   pudłowania. Bez tej wysokości przyciski wychodziły na 35 i 40 px,
   w dodatku różne, bo „odrzuć" spada w telefonie do drugiego rzędu
   i nie ma się już do czego rozciągnąć. */
.zgloszenie__akcje .przycisk {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  font-size: 0.8125rem;
  padding: 0.55rem 1rem;
}
/* Odrzucenie wygląda inaczej niż potwierdzenie, bo jako jedyne
   z tych dwóch działań jest widoczne na zewnątrz i nieodwracalne. */
.zgloszenie__odrzuc {
  margin-left: auto;
  border-color: var(--ceglana);
  color: var(--ceglana-ciemna);
}
.zgloszenie__odrzuc:hover {
  background: var(--ceglana);
  border-color: var(--ceglana);
  color: var(--biel);
}

/* =========================================================
   Lista zamowien w panelu

   Przy stu pozycjach o wszystkim decyduje naglowek: musi
   powiedziec numer, termin, nazwisko, stan i kwote w jednej
   linii, zeby nie trzeba bylo rozwijac karty dla sprawdzenia,
   czy to ta.
   ========================================================= */
.zamowienia__pilne {
  margin: 0.75rem 0 0;
  padding: 0.6rem 0.9rem;
  background: var(--biel);
  border-left: 3px solid var(--akcent);
  font-size: 0.875rem;
  color: var(--grafit);
}

.zamowienia__sito {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem 0.9rem;
  margin-bottom: 1.1rem;
  padding-bottom: 1.1rem;
  border-bottom: 1px solid var(--linia);
}
.zamowienia__szukajka {
  flex: 1 1 16rem;
}
.zamowienia__szukajka input {
  width: 100%;
  min-height: 44px;
  padding: 0.55rem 0.8rem;
  background: var(--biel);
  border: 1px solid var(--linia-mocna);
  font-family: inherit;
  font-size: 0.9375rem;
  color: var(--grafit);
}
.zamowienia__kolejnosc {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--mono);
  font-size: 0.6875rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--stal);
}
.zamowienia__kolejnosc select {
  min-height: 44px;
  padding: 0.4rem 0.6rem;
  background: var(--biel);
  border: 1px solid var(--linia-mocna);
  font-family: var(--font);
  font-size: 0.875rem;
  letter-spacing: 0;
  text-transform: none;
  color: var(--grafit);
}

.zamowienia__chipy {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}
/* Wcisniety filtr musi byc widoczny takze bez koloru, bo to jedyna
   informacja o tym, dlaczego lista jest krotsza, niz sie ktos
   spodziewa. Stad zmiana tla ORAZ grubosci obrysu. */
.chip {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  min-height: 36px;
  padding: 0.35rem 0.75rem;
  background: var(--biel);
  border: 1px solid var(--linia-mocna);
  font-family: inherit;
  font-size: 0.8125rem;
  color: var(--grafit);
  cursor: pointer;
}
.chip b {
  font-family: var(--mono);
  font-size: 0.75rem;
  font-variant-numeric: tabular-nums;
  color: var(--stal);
}
.chip:hover {
  background: var(--piasek-2);
}
.chip[aria-pressed="true"] {
  background: var(--akcent);
  border-color: var(--akcent);
  color: var(--biel);
}
.chip[aria-pressed="true"] b {
  color: var(--biel);
}

.przycisk--drobny {
  min-height: 36px;
  padding: 0.4rem 0.8rem;
  font-size: 0.8125rem;
}

/* Karta jako `<details>`. Trojkat przegladarki zastepujemy wlasnym
   znakiem, bo domyslny stoi w innym miejscu w kazdej z nich, a tu
   ma trzymac kolumne razem z numerami. */
.zamowienie {
  background: var(--biel);
  border: 1px solid var(--linia-mocna);
}
.zamowienie + .zamowienie {
  margin-top: 0.5rem;
}
.zamowienie[data-etap="czeka"] {
  border-left: 4px solid var(--akcent);
}
.zamowienie[data-etap="wygasla"] {
  border-left: 4px solid var(--ceglana);
}
.zamowienie[data-etap="zakonczone"] {
  background: var(--piasek);
}

.zamowienie__glowa {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem 0.8rem;
  padding: 0.8rem 1rem 0.8rem 2rem;
  position: relative;
  cursor: pointer;
  list-style: none;
}
.zamowienie__glowa::-webkit-details-marker {
  display: none;
}
.zamowienie__glowa::before {
  content: "\203a";
  position: absolute;
  left: 0.9rem;
  font-size: 1.1rem;
  line-height: 1;
  color: var(--stal);
  transition: transform 0.15s ease;
}
.zamowienie[open] > .zamowienie__glowa::before {
  transform: rotate(90deg);
}
.zamowienie__glowa:hover {
  background: var(--piasek);
}
.zamowienie[open] > .zamowienie__glowa {
  border-bottom: 1px solid var(--linia);
}

.zamowienie__numer {
  font-family: var(--mono);
  font-size: 0.9375rem;
  letter-spacing: 0.04em;
  color: var(--grafit);
}
.zamowienie__okres {
  font-family: var(--mono);
  font-size: 0.8125rem;
  font-variant-numeric: tabular-nums;
  color: var(--stal);
}
.zamowienie__kto {
  flex: 1 1 8rem;
  min-width: 0;
  font-size: 0.875rem;
  color: var(--grafit);
  overflow-wrap: anywhere;
}
.zamowienie__kwota {
  font-family: var(--mono);
  font-size: 0.875rem;
  font-variant-numeric: tabular-nums;
  color: var(--grafit);
}
/* Obie plaski w jednej grupie, dociete do prawej krawedzi. Luzem
   rozjezdzaly sie na osobne rzedy, bo nazwisko rosnie i wypycha
   je po kolei. Trzy rzedy razy sto pozycji to dwa dodatkowe ekrany
   przewijania na nic. */
.zamowienie__stany {
  display: flex;
  gap: 0.4rem;
  margin-left: auto;
}
.zamowienie__zegar {
  flex-basis: 100%;
  font-family: var(--mono);
  font-size: 0.6875rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--stal);
}
.zamowienie[data-etap="czeka"] .zamowienie__zegar {
  color: var(--akcent-ciemny);
}
.zamowienie[data-etap="wygasla"] .zamowienie__zegar {
  color: var(--ceglana-ciemna);
}

.zamowienie__srodek {
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
  padding: 1rem;
}

/* Znaczniki stanu. Kazdy niesie tresc slowem, kolor tylko ja
   powtarza: przy wadzie widzenia barw sama plamka nie mowi nic. */
.znacznik {
  display: inline-flex;
  align-items: center;
  padding: 0.2rem 0.55rem;
  border: 1px solid var(--linia-mocna);
  border-radius: 999px;
  font-family: var(--mono);
  font-size: 0.6875rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--stal);
}
.znacznik--czeka {
  background: var(--akcent);
  border-color: var(--akcent);
  color: var(--biel);
}
.znacznik--wygasla {
  background: var(--ceglana);
  border-color: var(--ceglana);
  color: var(--biel);
}
.znacznik--trwa {
  border-color: var(--akcent);
  color: var(--akcent-ciemny);
}
.znacznik--oplacone {
  border-color: var(--akcent);
  color: var(--akcent-ciemny);
}
.znacznik--nieoplacone {
  border-color: var(--ceglana);
  color: var(--ceglana-ciemna);
}

/* Pasek dzialan na zaznaczonych.

   Ukryty, dopoki nic nie jest zaznaczone: cztery przyciski nad
   lista, z ktorych dwa kasuja, a klikniecie w nie nie robi nic,
   to zaproszenie do pomylki. */
.zamowienia__hurtem {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem 1rem;
  margin-bottom: 0.75rem;
  padding: 0.6rem 0.9rem;
  background: var(--piasek-2);
  border: 1px solid var(--linia-mocna);
}
.zamowienia__wszystkie {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--mono);
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--grafit);
  cursor: pointer;
}
.zamowienia__hurtem-akcje {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
}

/* Pole wyboru w naglowku karty. Wieksze niz domyslne, bo trafia
   sie w nie kciukiem obok napisu, ktory rozwija cala karte. */
.zamowienie__wybor-pole {
  display: inline-flex;
  align-items: center;
  padding: 0.2rem;
  cursor: pointer;
}
.zamowienie__wybor-pole input {
  width: 18px;
  height: 18px;
  cursor: pointer;
}

@media print {
  .zamowienia__hurtem,
  .zamowienie__wybor-pole {
    display: none;
  }
}

/* Potwierdzenie wyborow klienta.

   Wypisujemy takze to, czego klient NIE zamowil. Brygada na budowie
   musi wiedziec, ze montaz jest po stronie klienta, a nie domyslac
   sie tego z braku wiersza — brak czyta sie jak przeoczenie, nie
   jak „nie". Stad kolumna TAK/NIE zamiast samej listy zamowionych
   dodatkow. */
.zamowienie__wybor {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 1px;
  background: var(--linia);
  border: 1px solid var(--linia);
}
.zamowienie__wybor li {
  display: grid;
  grid-template-columns: 10rem 3rem minmax(0, 1fr);
  gap: 0.75rem;
  align-items: baseline;
  padding: 0.45rem 0.7rem;
  background: var(--biel);
  font-size: 0.875rem;
}
.zamowienie__wybor-co {
  font-family: var(--mono);
  font-size: 0.6875rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--stal);
}
/* TAK i NIE roznia sie slowem, kolorem i grubosca — przy wadzie
   widzenia barw sam kolor nie mowi nic, a to jest lista, przy
   ktorej pomylka kosztuje kurs samochodu. */
.zamowienie__wybor-czy {
  font-family: var(--mono);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.06em;
}
[data-wybrane="tak"] .zamowienie__wybor-czy {
  color: var(--akcent-ciemny);
}
[data-wybrane="nie"] .zamowienie__wybor-czy {
  color: var(--stal);
}
[data-wybrane="nie"] .zamowienie__wybor-jak {
  color: var(--stal);
}
.zamowienie__wybor-jak {
  color: var(--grafit);
  overflow-wrap: anywhere;
}

@media (max-width: 600px) {
  .zamowienie__wybor li {
    grid-template-columns: minmax(0, 1fr) 3rem;
    gap: 0.2rem 0.5rem;
  }
  .zamowienie__wybor-jak {
    grid-column: 1 / -1;
  }
}

/* Wplata i papier w jednym pasku, bo obie rzeczy robi sie po
   rozmowie: najpierw zapisuje wplate, potem drukuje protokol. */
.zamowienie__stopka {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
  padding-top: 0.8rem;
  border-top: 1px solid var(--linia);
}
.zamowienie__kasa,
.zamowienie__papier {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
}
.zamowienie__wplata {
  font-family: var(--mono);
  font-size: 0.75rem;
  letter-spacing: 0.04em;
  color: var(--akcent-ciemny);
}
.zamowienie__wplata--brak {
  color: var(--ceglana-ciemna);
}

@media (max-width: 600px) {
  /* Ciasniejsze odstepy w naglowku: numer, termin i kwota maja
     zmiescic sie w jednym rzedzie takze przy „do wyceny". Kazdy
     dodatkowy rzad to 29 px razy sto pozycji. */
  .zamowienie__glowa {
    padding-left: 1.8rem;
    gap: 0.35rem 0.5rem;
  }
  /* 44 px to najmniejszy cel, w ktory da sie trafic kciukiem bez
     pudlowania. Na duzym ekranie te przyciski moga byc drobne,
     na telefonie nie. */
  .chip,
  .przycisk--drobny {
    min-height: 44px;
  }
  .zamowienie__kto {
    flex-basis: 100%;
  }
  .zamowienie__stany {
    margin-left: 0;
  }
  .zamowienia__kolejnosc {
    flex: 1 1 100%;
  }
  .zamowienia__kolejnosc select {
    flex: 1 1 auto;
    min-width: 0;
  }
}

@media (max-width: 600px) {
  .zgloszenie__dane > div {
    grid-template-columns: 1fr;
    gap: 0.1rem;
  }
  .zgloszenie__odrzuc {
    margin-left: 0;
  }
}

/* ---------- Porównanie wariantów usługi ---------- */
.porownanie {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  gap: clamp(1.5rem, 4vw, 3rem);
  align-items: start;
  margin-top: clamp(1.5rem, 4vw, 2.5rem);
}
.porownanie .rez-tabela {
  margin-bottom: 0;
}
.porownanie .rez-tabela td {
  text-align: right;
}
/* Kolumna z montażem jest tą, o którą chodzi, więc dostaje ton
   tła zamiast wykrzyknika w nagłówku. */
.porownanie .rez-tabela td:last-child,
.porownanie .rez-tabela th:last-child {
  background: var(--piasek);
  padding-right: 0.9rem;
  padding-left: 0.9rem;
}
.porownanie__wniosek {
  padding: clamp(1.1rem, 3vw, 1.6rem);
  background: var(--piasek);
  border-left: 3px solid var(--akcent);
}
.porownanie__liczba {
  margin: 0 0 0.5rem;
  font-family: var(--mono);
  font-size: clamp(2rem, 5vw, 2.75rem);
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--akcent);
}
.porownanie__wniosek p {
  margin: 0 0 0.75rem;
  font-size: 0.9375rem;
  line-height: 1.65;
  color: var(--stal);
}
.porownanie__wniosek p:last-child {
  margin-bottom: 0;
}

@media (max-width: 860px) {
  .porownanie {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ---------- Terminy realizacji ---------- */
.terminy {
  padding-block: var(--sekcja);
  border-top: 1px solid var(--linia);
}
.terminy__lista {
  list-style: none;
  counter-reset: termin;
  margin: clamp(1.5rem, 4vw, 2.5rem) 0 0;
  padding: 0;
  display: grid;
  gap: 1px;
  background: var(--linia);
  border: 1px solid var(--linia);
}
.terminy__lista li {
  counter-increment: termin;
  background: var(--piasek);
  padding: 1.1rem 1.25rem 1.1rem 3.4rem;
  position: relative;
}
.terminy__lista li::before {
  content: counter(termin);
  position: absolute;
  left: 1.25rem;
  top: 1.15rem;
  width: 1.6rem;
  height: 1.6rem;
  display: grid;
  place-items: center;
  border: 1px solid var(--akcent);
  color: var(--akcent);
  font-family: var(--mono);
  font-size: 0.75rem;
}
.terminy__lista b {
  font-size: 1rem;
  margin-right: 0.6rem;
}
/* Czas jest tym, po co człowiek tu przyszedł, więc stoi obok
   nazwy kroku, a nie w tekście pod spodem. */
.terminy__czas {
  display: inline-block;
  font-family: var(--mono);
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  padding: 0.2rem 0.55rem;
  border: 1px solid var(--linia-mocna);
  background: var(--piasek-2);
  white-space: nowrap;
}
.terminy__lista p {
  margin: 0.5rem 0 0;
  font-size: 0.9375rem;
  line-height: 1.65;
  color: var(--stal);
  max-width: 68ch;
}
.terminy__uwagi {
  margin-top: clamp(1.5rem, 3vw, 2rem);
  display: grid;
  gap: 0.75rem;
}
.terminy__uwagi p {
  margin: 0;
  padding: 0.85rem 1rem;
  background: var(--piasek);
  border-left: 2px solid var(--akcent);
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--stal);
}
.terminy__uwagi b {
  color: var(--grafit);
}

/* =========================================================
   UMOWA NAJMU DO WYDRUKU

   Osobny świat: strona ma wyjść na papier, więc nie dziedziczy
   nagłówka serwisu ani stopki. Reguły druku chowają wszystko,
   co na kartce jest szumem.
   ========================================================= */
.umowa-strona {
  background: var(--piasek);
}
.umowa {
  max-width: 46rem;
  margin: 0 auto;
  padding: clamp(1.5rem, 4vw, 3rem) clamp(1.1rem, 4vw, 2rem) 5rem;
}
.umowa__pasek {
  margin: 0 0 2rem;
  padding: 0.75rem 1rem;
  background: var(--piasek-2);
  border-left: 3px solid var(--akcent);
  font-size: 0.8125rem;
  color: var(--stal);
}
.umowa__glowa {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem;
  padding-bottom: 1rem;
  border-bottom: 2px solid var(--grafit);
}
.umowa__glowa h1 {
  font-family: var(--mono);
  font-size: clamp(1.5rem, 4vw, 2rem);
  letter-spacing: 0.02em;
  margin: 0.3rem 0 0;
}
.umowa__data {
  margin: 0;
  font-size: 0.875rem;
  color: var(--stal);
}
.umowa h2 {
  font-size: 1rem;
  margin: 2rem 0 0.6rem;
  padding-bottom: 0.35rem;
  border-bottom: 1px solid var(--linia);
}
.umowa__strony {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: 1.5rem;
}
.umowa__strony p {
  margin: 0;
  font-size: 0.9375rem;
  line-height: 1.7;
}
.umowa__tabela {
  width: 100%;
  border-collapse: collapse;
}
.umowa__tabela th,
.umowa__tabela td {
  text-align: left;
  vertical-align: top;
  padding: 0.55rem 0.75rem 0.55rem 0;
  border-bottom: 1px solid var(--linia);
  font-size: 0.9375rem;
  font-weight: 400;
}
.umowa__tabela th {
  width: 12rem;
  color: var(--stal);
}
.umowa__tabela--puste td {
  border-bottom: 1px solid var(--linia-mocna);
  height: 2rem;
}
.umowa__nota,
.umowa__wypelnij {
  margin: 0.6rem 0 0;
  font-size: 0.8125rem;
  color: var(--stal);
}
.umowa__warunki {
  padding-left: 1.2rem;
  font-size: 0.9375rem;
  line-height: 1.65;
}
.umowa__warunki li {
  margin-bottom: 0.5rem;
}
.umowa__podpisy {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
  gap: 2.5rem;
  margin-top: 4rem;
}
.umowa__podpisy span {
  display: block;
  border-bottom: 1px solid var(--grafit);
  height: 2.5rem;
}
.umowa__podpisy p {
  margin: 0.4rem 0 0;
  font-size: 0.8125rem;
  color: var(--stal);
  text-align: center;
}

/* ---------- Zawarcie umowy ----------
   Zamiast rubryk na podpisy: co sie wydarzylo i o ktorej godzinie.
   Umowa najmu rzeczy ruchomej nie wymaga formy pisemnej, wiec to
   te zdania sa dowodem zawarcia, a nie kreska pod slowem „Najemca". */
.umowa__zawarcie ul {
  margin: 0;
  padding-left: 1.1rem;
  font-size: 0.9375rem;
  line-height: 1.6;
}
.umowa__zawarcie li {
  margin-bottom: 0.35rem;
}

/* ---------- Protokol odbioru technicznego ----------
   Rubryki zostaja PUSTE i to jest zamierzone: dokument stwierdza
   czynnosc wykonana na budowie, wiec wypelnia go ten, kto ja
   wykonal, a nie system, ktory jej nie widzial. */
.umowa__do-wpisania {
  border-bottom: 1px solid var(--linia-mocna);
  min-width: 8rem;
}
.umowa__kontrola th[scope="col"] {
  font-family: var(--mono);
  font-size: 0.6875rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--stal);
}
.umowa__kontrola td {
  width: 3.2rem;
  height: 1.7rem;
  border-bottom: 1px solid var(--linia-mocna);
}
.umowa__kontrola td:last-child {
  width: auto;
  min-width: 7rem;
}
.umowa__stan-siatka td {
  width: 4.5rem;
}
.umowa__orzeczenie {
  margin-top: 1rem;
  padding: 0.7rem 0.9rem;
  border: 1px solid var(--linia-mocna);
  border-left: 4px solid var(--akcent);
  font-size: 0.9375rem;
}
.umowa__orzeczenie p {
  margin: 0;
}
.umowa__podpisy--protokol small {
  display: block;
  font-size: 0.6875rem;
}

@media print {
  .umowa-strona {
    background: #fff;
  }
  .umowa__pasek {
    display: none;
  }
  .umowa {
    max-width: none;
    padding: 0;
  }
  .umowa section {
    break-inside: avoid;
  }

  /* ----- Jedna kartka A4 -----

     Umowa i protokol maja zmiescic sie na jednej stronie. Na
     papierze czyta sie je z bliska i w calosci, wiec odstepy
     z ekranu — liczone pod przewijanie kciukiem — sa tu czystym
     marnowaniem miejsca. Nic nie znika, wszystko sie zaciesnia. */
  .umowa {
    font-size: 0.8125rem;
    line-height: 1.4;
  }
  .umowa h2 {
    margin: 0.7rem 0 0.3rem;
    font-size: 0.875rem;
  }
  .umowa section {
    margin-bottom: 0.5rem;
  }
  .umowa__glowa {
    margin-bottom: 0.6rem;
  }
  .umowa__glowa h1 {
    font-size: 1.25rem;
  }
  .umowa__strony {
    gap: 1.2rem;
  }
  .umowa__strony p,
  .umowa__tabela th,
  .umowa__tabela td,
  .umowa__zawarcie ul {
    font-size: 0.78rem;
    line-height: 1.35;
  }
  .umowa__tabela th,
  .umowa__tabela td {
    padding: 0.22rem 0.4rem;
  }
  .umowa__tabela--puste td,
  .umowa__kontrola td {
    height: 1.35rem;
  }
  .umowa__nota,
  .umowa__wypelnij {
    margin-top: 0.3rem;
    font-size: 0.7rem;
  }
  .umowa__orzeczenie {
    margin-top: 0.5rem;
    padding: 0.4rem 0.6rem;
    font-size: 0.78rem;
  }
  .umowa__podpisy {
    margin-top: 1.6rem;
    gap: 2rem;
  }
  .umowa__podpisy span {
    height: 1.8rem;
  }
  .umowa__podpisy p {
    font-size: 0.7rem;
  }

  /* Protokol jest gestszy od umowy: sama tabela sprawdzen ma
     dziewiec wierszy, a caly dokument wychodzil dokladnie na
     1047 px, czyli na styk z kartka. Przy marginesach szerszych
     niz domyslne rozjezdzal sie na dwie strony, a protokol na
     dwoch kartkach gubi sie na budowie. */
  .umowa--protokol {
    font-size: 0.75rem;
  }
  .umowa--protokol h2 {
    margin: 0.5rem 0 0.2rem;
    font-size: 0.8125rem;
  }
  .umowa--protokol section {
    margin-bottom: 0.35rem;
  }
  .umowa--protokol .umowa__strony p,
  .umowa--protokol .umowa__tabela th,
  .umowa--protokol .umowa__tabela td {
    font-size: 0.72rem;
    line-height: 1.3;
  }
  .umowa--protokol .umowa__tabela th,
  .umowa--protokol .umowa__tabela td {
    padding: 0.16rem 0.35rem;
  }
  .umowa--protokol .umowa__kontrola td,
  .umowa--protokol .umowa__tabela--puste td {
    height: 1.1rem;
  }
  .umowa--protokol .umowa__orzeczenie {
    margin-top: 0.35rem;
    padding: 0.35rem 0.5rem;
    font-size: 0.72rem;
  }
  .umowa--protokol .umowa__podpisy {
    margin-top: 1.1rem;
  }
}

/* ---------- Żywy licznik wolnego sprzętu ----------
   Ukryty domyślnie, pokazuje się dopiero gdy serwer poda liczbę.
   Lepiej nie pokazać nic niż pokazać wartość wpisaną na sztywno,
   która po tygodniu przestaje być prawdą. */
.wolne-dzis {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
  margin: 0 0 1.25rem;
  padding: 0.7rem 0.95rem;
  background: var(--piasek);
  border: 1px solid var(--linia-mocna);
  border-left: 3px solid var(--akcent);
  font-size: 0.875rem;
  color: var(--stal);
}
.wolne-dzis b {
  font-family: var(--mono);
  font-size: 1.0625rem;
  color: var(--grafit);
}
.wolne-dzis__tor {
  display: block;
  width: 5rem;
  height: 0.4rem;
  background: var(--cynk);
  box-shadow: inset 0 -1px 0 var(--stal);
  flex: 0 0 auto;
}
.wolne-dzis__tor i {
  display: block;
  height: 100%;
  width: 0;
  background: var(--akcent);
  transition: width 0.4s ease;
}
@media (prefers-reduced-motion: reduce) {
  :root:not([data-ruch="wlaczony"]) .wolne-dzis__tor i {
    transition: none;
  }
}

/* ---------- Cennik elementów w regulaminie ---------- */
.cennik-elementow {
  width: 100%;
  border-collapse: collapse;
  margin: 1.25rem 0 0;
  font-size: 0.9375rem;
}
.cennik-elementow th,
.cennik-elementow td {
  text-align: left;
  padding: 0.55rem 0.75rem 0.55rem 0;
  border-bottom: 1px solid var(--linia);
  font-weight: 400;
  vertical-align: top;
}
.cennik-elementow thead th {
  font-family: var(--mono);
  font-size: 0.6875rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--stal);
  border-bottom-color: var(--linia-mocna);
}
/* Kwoty w kolumnach, więc cyfry o stałej szerokości. */
.cennik-elementow td {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.cennik-elementow tbody th {
  color: var(--grafit);
}
.cennik-elementow tbody tr:last-child th,
.cennik-elementow tbody tr:last-child td {
  border-bottom: 0;
}
.cennik-elementow__nota {
  margin-top: 0.6rem;
  font-size: 0.8125rem;
  color: var(--stal);
}
@media (max-width: 640px) {
  .cennik-elementow {
    display: block;
    overflow-x: auto;
  }
}
.cennik-elementow__brak {
  color: var(--stal);
  font-family: var(--font);
  font-size: 0.8125rem;
}

/* ---------- Domknięcie strony ----------
   Ostatni takt każdej podstrony wynajmu: dwie drogi dalej,
   kalendarz albo telefon. Powód: siedem z dwunastu podstron
   kończyło się bez ani jednego odnośnika do rezerwacji
   w treści, więc jedyną drogą było menu. */
.domkniecie {
  background: var(--grafit);
  color: var(--piasek);
  padding-block: clamp(2.5rem, 6vw, 4rem);
}
.domkniecie__uklad {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 0.7fr);
  gap: clamp(1.5rem, 4vw, 3rem);
  align-items: center;
}
.domkniecie .etykieta {
  color: var(--stal-jasna);
}
.domkniecie h2 {
  margin: 0.4rem 0 0.6rem;
  font-size: clamp(1.4rem, 3.2vw, 2rem);
  letter-spacing: -0.02em;
  color: var(--biel);
  text-wrap: balance;
}
.domkniecie p {
  margin: 0;
  max-width: 56ch;
  font-size: 0.9375rem;
  line-height: 1.65;
  color: var(--stal-jasna);
}
.domkniecie__drogi {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  align-items: stretch;
}
.domkniecie__drogi .przycisk {
  justify-content: center;
}
/* Wariant jasny na ciemnym paśmie: obrys musi się odciąć od
   grafitu, więc bierze piaskowy, nie ten sam co na jasnym tle. */
.przycisk--jasny {
  background: transparent;
  color: var(--piasek);
  border-color: var(--stal-jasna);
  font-family: var(--mono);
  letter-spacing: 0.04em;
}
.przycisk--jasny:hover {
  background: var(--piasek);
  border-color: var(--piasek);
  color: var(--grafit);
}
.domkniecie__godziny {
  font-size: 0.75rem;
  color: var(--stal-jasna);
  text-align: center;
}

@media (max-width: 860px) {
  .domkniecie__uklad {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ---------- Panel: pozycja wymagająca działania ----------
   Rezerwacja wstępna wygasa po dobie, więc jest jedyną pozycją
   na liście, która ma termin. Dostaje kreskę z boku i inny ton,
   żeby dało się ją znaleźć bez czytania całej tabeli. */
.rez-tabela tr[data-pilne="tak"] th,
.rez-tabela tr[data-pilne="tak"] td {
  background: var(--piasek);
}
.rez-tabela tr[data-pilne="tak"] th {
  border-left: 3px solid var(--akcent);
  padding-left: 0.75rem;
}
.rez-podsumowanie__pilne dt {
  color: var(--akcent-jasny);
  font-weight: 600;
}
.rez-podsumowanie__pilne dd {
  color: var(--akcent-jasny);
}

/* ---------- Cele dotykowe na telefonie ----------
   Zmierzone w przeglądarce przy 375 px: przycisk menu miał 33 px
   wysokości, a wylogowanie z panelu 32 px, przy progu 44 px.
   Przycisk menu jest jedyną drogą do nawigacji na wąskim ekranie,
   więc trafienie w niego nie może wymagać celowania. */
@media (max-width: 1040px) {
  .przycisk-menu {
    min-height: 44px;
    padding-inline: 1rem;
  }
}
@media (max-width: 560px) {
  .rez-lista-glowa .przycisk,
  .rez-usun {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }
}

/* ==========================================================
   Ukrywanie atrybutem `hidden`

   Wbudowana regula przegladarki to `[hidden] { display: none }`
   o specyficznosci 0-0-1, wiec przegrywa z DOWOLNA klasa
   ustawiajaca `display`. Skutek: element dostaje `hidden`
   w skrypcie, a mimo to zostaje na ekranie. Trafione tu wiele
   razy, za kazdym razem lataniem pojedynczego przypadku:
   przycisk „Wyloguj" bez serwera i licznik „Czeka na
   potwierdzenie: 0" byly szostym i siodmym.

   Powtorzony atrybut daje 0-2-0 i stoi na koncu arkusza, wiec
   bije kazda regule `display` w tym projekcie, takze
   `.zgloszenie__akcje .przycisk`. Osiagamy to sama specyficznoscia,
   bez znacznika wymuszajacego, ktorego ten projekt nie uzywa.

   Jesli kiedys przestanie wystarczac, powodem bedzie nowa regula
   `display` o specyficznosci ponad 0-2-0 celujaca w element,
   ktory bywa ukrywany. Wtedy dopisz trzecie `[hidden]`, nie
   kolejna latke na jedna klase.
   ========================================================== */
[hidden][hidden] {
  display: none;
}

/* ---------- Pytania o podatek ----------
   Widoczne tylko przy montazu, bo tylko wtedy stawka moze zejsc
   z 23 na 8 procent. Oddzielone ramka od reszty pol transportu,
   zeby bylo widac, ze to inny temat niz dowoz. */
.rez-vat {
  margin: 1.25rem 0;
  padding: clamp(1rem, 3vw, 1.4rem);
  border: 1px solid var(--linia-mocna);
  border-left: 3px solid var(--akcent);
  background: var(--piasek);
}
.rez-vat[hidden] {
  display: none;
}
.rez-vat__wstep {
  margin: 0 0 1rem;
  font-size: 0.9375rem;
  color: var(--grafit);
}
.rez-vat .rez-grupa {
  margin-bottom: 1rem;
}
.rez-vat .rez-karta em {
  font-size: 0.8125rem;
}
#rez-vat-wynik {
  margin-top: 0.9rem;
  margin-bottom: 0;
  font-weight: 600;
  color: var(--akcent-ciemny);
}

/* ---------- Wybor odbiorcy na wejsciu ----------
   Trzy grupy klientow zaczynaja od czego innego, wiec pytamy
   o to jako pierwsze. Wybor niczego nie zabiera: ustawia tylko
   punkt wyjscia, ktory potem da sie zmienic w kazdym polu. */
.rez-grupa--kto {
  padding-bottom: 1.25rem;
  margin-bottom: 1.5rem;
  border-bottom: 1px solid var(--linia-mocna);
}
.rez-karty--sciezka {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr));
}
#rez-nota-sciezka {
  margin-top: 0.85rem;
  margin-bottom: 0;
}
#rez-nota-sciezka[hidden] {
  display: none;
}
.rez-karty--budynek {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr));
}
#rez-grupa-budynek {
  margin-top: 1.25rem;
}

/* ---------- Montaz wliczony w oferte ----------
   Przy wspolnocie montaz nie jest opcja, tylko czescia uslugi.
   Pole zostaje widoczne i zaznaczone, ale wylaczone: chodzi o to,
   zeby bylo widac, ze montaz JEST, a nie zeby zniknal z oczu. */
.rez-wybor[data-wymuszony="tak"] {
  opacity: 0.85;
  cursor: default;
}
.rez-wybor[data-wymuszony="tak"] em::after {
  content: " Wliczone w ofertę dla wspólnot.";
  color: var(--akcent-ciemny);
  font-style: normal;
  font-weight: 600;
}

/* ---------- Kafel kaucji, gdy kaucji nie ma ---------- */
.dwie-kwoty__poz[data-pusta="tak"] .dwie-kwoty__suma,
.platnosc-podzial__poz[data-pusta="tak"] b {
  font-size: 1.25rem;
  color: var(--cynk);
}
.dwie-kwoty__poz[data-pusta="tak"] .dwie-kwoty__suma::after {
  content: " bez kaucji";
  font-size: 0.8125rem;
}

/* Alarm w panelu blokad.

   Powstal po dniu, w ktorym poczta nie dzialala przez kilka godzin,
   a jedynym sladem byl plik dziennika. Stoi nad lista pozycji, bo to
   pierwsza rzecz widoczna po zalogowaniu, i znika sam, gdy kolejka
   wiadomosci sie oprozni. */
.panel-alarm {
  border: 1px solid var(--ceglana);
  border-left: 4px solid var(--ceglana);
  border-radius: 0 6px 6px 0;
  background: color-mix(in srgb, var(--ceglana) 8%, var(--piasek));
  padding: 0.9rem 1.1rem;
  margin-bottom: 1.25rem;
}
.panel-alarm--pilne {
  border-color: var(--niedziela);
  border-left-color: var(--niedziela);
  background: color-mix(in srgb, var(--niedziela) 8%, var(--piasek));
}
.panel-alarm__tytul {
  display: block;
  font-size: 1rem;
  margin-bottom: 0.35rem;
}
.panel-alarm__tresc,
.panel-alarm__powod {
  margin: 0;
  max-width: 62ch;
  font-size: 0.95rem;
}
.panel-alarm__powod {
  margin-top: 0.5rem;
  font-family: var(--mono);
  font-size: 0.8rem;
  color: var(--stal);
  overflow-wrap: anywhere;
}