@import url("../fonts/archivo.css");

/* ══════════════════════════════════════════════════════════════════════════
   LUX-BUD HOME — system wizualny strony
   Język: plansza projektowa. Kalka, linie wymiarowe, numery rysunków, metryczka.
   Rozdział od Lux-Bud Design stoi na czterech dźwigniach: krój (grotesk zamiast
   szeryfu), temperatura (chłodny grafit zamiast piasku), kadr (bryła zamiast
   detalu), język (etap i termin zamiast faktury i wyboru).

   ⚠ Kontrasty poniżej są POLICZONE, nie dobrane na oko. Nie zmieniać par
   kolorów bez ponownego przeliczenia — trzy z nich leżą tuż nad progiem.
   ══════════════════════════════════════════════════════════════════════════ */

:root{
  /* ── grafit: chłodny, nie ciepła czerń Designu ── */
  --grafit:#1C1F22;
  --grafit-mid:#23272B;
  --grafit-plus:#2A2F34;

  /* ── jasne ── */
  --biel:#F5F5F3;
  --papier:#F7F7F4;

  /* ── stal: trzy odcienie, bo jeden nie obsłuży jasnego i ciemnego naraz ── */
  /* Paleta wzięta ze znaku marki (#0097B2). Sam cyjan z logo ma na bieli
     3,17:1 — za mało na tekst — więc na tekst i bloki idzie jego ciemniejszy
     stopień, a czysty kolor znaku zostaje w samym logo. */
  --stal:#00708A;        /* 5,22:1 na bieli — bloki i tekst na jasnym */
  --stal-mid:#33ABC1;    /* 6,10:1 na grafcie — duże liczby i grafika na ciemnym */
  --stal-jasna:#7FCBD9;  /* 9,02:1 na grafcie — mały tekst akcentowy na ciemnym */
  /* ❌ --stal na grafcie = 2,95:1. ❌ grafit na bloku stali = 2,95:1 → tekst BIAŁY. */

  /* ── tekst ── */
  --atrament:#23272B;    /* 13,78:1 na bieli */
  --proza:#4A5157;       /* 7,38:1 na bieli */
  --proza-inv:#B9BFC4;   /* 8,92:1 na grafcie */

  /* ── linie: cienkie jak na rysunku, nigdy grube ── */
  --linia:rgba(35,39,43,.14);
  --linia-mocna:rgba(35,39,43,.30);
  --linia-inv:rgba(245,245,243,.16);
  --linia-stal:rgba(0,112,138,.42);

  --kalka:72px;          /* moduł siatki — ten sam w całym serwisie */
  --ease:cubic-bezier(.16,1,.3,1);
  --maks:1152px;                  /* 16 × --kalka; było 1280 — strona jest węższa */
  --luz:clamp(3.5rem,7.5vw,6.75rem);
  /* Zmniejszone NACHYLENIE (9vw→7,5vw), nie tylko sufit. Samo obniżenie sufitu
     dawało cięcie 6,7% w paśmie, w którym ludzie naprawdę patrzą (750–1290 px),
     a zarzut „rozlazłe” dotyczył właśnie odstępów. Teraz jest równe −16,7%
     w całym paśmie i −25% powyżej 1440 px. Sufit 108 px = 1,5 × --kalka. */

  /* ══ DRABINA TYPOGRAFICZNA — krok 1,25 (pasmo 25–35%) ══════════════════
     Skoki między poziomami były dotąd przypadkowe: +50%, +67%, +56%, a między
     .d4 a .lead tylko +8% — czyli w tym miejscu hierarchia NIE ISTNIAŁA.
     Teraz każdy sąsiedni stopień dzieli ten sam współczynnik, bo to on buduje
     „skanowanie strony oczami”: czytelnik omiata stronę i po samej wielkości
     rozpoznaje poziom, zanim cokolwiek przeczyta.

     SUFIT (duży ekran) idzie krokiem 1,25:
       11 · 12,8 · 16 · 20 · 25 · 31,2 · 39 · 48,8 · 60,8 · 76 px
     PODŁOGA (telefon) idzie własnym, też regularnym krokiem 1,12:
       16 · 18 · 20 · 22,4 · 25 · 28 · 31,2 · 35,2 px
     Podłoga musi mieć swój krok, bo przy ściśnięciu do dolnych granic
     sufitowy 1,25 nie da się utrzymać — a nieregularna podłoga odtworzyłaby
     na telefonie dokładnie tę wadę, którą naprawiamy na dużym ekranie.

     NACHYLENIA vw są proporcjonalne do sufitów (sufit/12,8), więc porządek
     stopni zachowuje się przy KAŻDEJ szerokości okna — hierarchia nie może
     się odwrócić. */
  --st-etykieta:.6875rem;                        /* 11 px — PRZYPIĘTA PODŁOGA, poza drabiną */
  --st-drobne:.8rem;                             /* 12,8 px */
  --st-tekst:1rem;                               /* 16 px — baza; płasko, bez clamp */
  --st-lead:clamp(1.125rem,1.5625vw,1.25rem);    /* 18 → 20 */
  --st-t4:clamp(1.25rem,1.95vw,1.5625rem);       /* 20 → 25 */
  --st-t3:clamp(1.4rem,2.44vw,1.95rem);          /* 22,4 → 31,2 */
  --st-wyr:clamp(1.5625rem,3.05vw,2.44rem);      /* 25 → 39 */
  --st-t2:clamp(1.75rem,3.81vw,3.05rem);         /* 28 → 48,8 */
  --st-rezerwa:clamp(1.95rem,4.75vw,3.8rem);     /* 31,2 → 60,8 — wielkie liczby */
  /* H1 zszedł o jeden stopień: 76 px brało cały pierwszy ekran i spychało
     zdjęcie do roli miniatury. `--st-t1` używa wyłącznie H1, `--st-rezerwa`
     wyłącznie wielkie liczby — nigdy nie stoją obok siebie w jednym widoku. */
  --st-t1:clamp(2.05rem,4.75vw,3.8rem);          /* 32,8 → 60,8 */
  /* Dwa stopnie POWYŻEJ H1, tym samym krokiem 1,25 (60,8 · 76 · 95 · 118,75).
     Używa tego wyłącznie numer pozycji w sekcji przewijanej — to cyfra, nie
     nagłówek, i stoi sama na ekranie, więc nie konkuruje z hierarchią. */
  --st-pion:clamp(3.5rem,9.28vw,7.42rem);        /* 56 → 118,75 */
}

/* ══ reset ══════════════════════════════════════════════════════════════ */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;
    transition-duration:.01ms!important}
}
body{
  font-family:'Archivo',system-ui,-apple-system,'Segoe UI',sans-serif;
  font-weight:300;font-size:var(--st-tekst);line-height:1.58;
  color:var(--proza);background:var(--biel);
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img,svg,video{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
ul,ol{list-style:none}
::selection{background:var(--stal);color:#fff}

/* ══ typografia ═════════════════════════════════════════════════════════
   Skala oparta na clamp() — jeden zestaw rozmiarów od telefonu po monitor,
   bez skoków na progach. Nagłówki: grotesk, waga 600, ciasny tracking.       */

.disp{
  font-weight:600;line-height:.99;letter-spacing:-.032em;
  color:var(--atrament);text-wrap:balance;
  /* 🚨 Polskie słowa bywają dłuższe niż kolumna. „PODPISZESZ," w nagłówku
     strony głównej wychodziło poza tekst i dotykało zdjęcia. `balance` tego
     nie ratuje, bo problem to POJEDYNCZE słowo szersze od kontenera. */
  overflow-wrap:break-word;
}
.disp em{font-style:normal;color:var(--stal)}
.na-ciemnym .disp,.ciemna .disp{color:var(--biel)}
.na-ciemnym .disp em,.ciemna .disp em{color:var(--stal-jasna)}

/* Długie polskie słowo w nagłówku wyszłoby poza kafel: .disp ma własne
   zabezpieczenie, ale 171 elementów .d1–.d4 na stronie NIE ma klasy .disp. */
.d1,.d2,.d3,.d4{overflow-wrap:break-word}
.d1{font-size:var(--st-t1)}
.d2{font-size:var(--st-t2)}
.d3{font-size:var(--st-t3);letter-spacing:-.024em;line-height:1.1}
.d4{font-size:var(--st-t4);letter-spacing:-.014em;line-height:1.22;font-weight:600}

/* nadtytuł — wersaliki, szeroki rozstrzel. Znak firmowy Home. */
.tag{
  font-size:var(--st-etykieta);font-weight:600;letter-spacing:.28em;text-transform:uppercase;
  color:var(--stal);display:block;
}
.ciemna .tag,.na-ciemnym .tag{color:var(--stal-jasna)}

/* ══ TRYB SKANOWANIA ═══════════════════════════════════════════════════
   Reguła firmowa: nagłówkiem dla oka jest tekst ≥24 px ALBO ≥16 px przy wadze
   ≥600. Zmierzone na 20 podstronach PRZED tą zmianą: 6,1–13,9% treści
   przetrwałoby czytanie samych nagłówków, przy celu 24–33%. Poniżej podnosimy
   RANGĘ tego, co już jest — nie skracamy ani słowa.

   🚨 `strong` renderował się z wagą 400. `bolder` liczy się WZGLĘDNIE od wagi
      rodzica, a tekst ma 300 — więc „pogrubienie” w prozie nie było pogrubione
      ani dla oka, ani dla pomiaru. */
strong,.proza b{font-weight:600;color:var(--atrament)}
/* Werdykt = pierwsze zdanie akapitu. Ta sama wielkość co reszta akapitu —
   różnicę robi waga i kolor, nie stopień. Dzięki temu akapit dalej czyta się
   jak akapit, a przy omiataniu strony zostaje z niego sens. */
.werdykt{font-weight:600;color:var(--atrament)}
.ciemna .werdykt,.na-ciemnym .werdykt{color:var(--biel)}
.ciemna strong,.na-ciemnym strong,.ciemna .proza b{color:var(--biel)}

/* Zajawka sekcji to jej werdykt — ma się czytać przy omiataniu strony. */
.lead{font-size:var(--st-lead);line-height:1.5;max-width:50ch;font-weight:600;color:var(--atrament)}
.ciemna .lead,.na-ciemnym .lead{color:var(--proza-inv)}
.proza p+p{margin-top:.9em}
/* 🚨 `ch` to szerokość cyfry zero, NIE średniego znaku. Zmierzone na naszym
   pliku Archivo: 1ch = 0,572 em, a średni znak polskiej prozy = 0,44 em,
   czyli 1ch ≈ 1,3 znaku. Dotychczasowe 64ch dawało ~80 znaków w wierszu
   przy normie 45–75. Wartości niżej są przeliczone na PRAWDZIWE znaki. */
.proza{max-width:52ch}
.ciemna .proza,.na-ciemnym .proza{color:var(--proza-inv)}
/* 🚨 `.drobne` NIE jest na tej stronie drobnym drukiem. Policzone na 24 plikach:
   245 użyć, z czego 161 to akapity dłuższe niż 100 znaków, najdłuższy ma 460.
   To druga kolumna tekstu do czytania. Dlatego akapit `.drobne` idzie na stopień
   TEKSTU (16 px), a drugi plan robi mu kolor i krycie, nie mniejsze litery.
   Na drobnym druku zostają tylko krótkie napisy w span/div. */
.drobne{font-size:var(--st-drobne);line-height:1.55;color:var(--proza);opacity:.8}
p.drobne{font-size:var(--st-tekst);line-height:1.55}
/* Na ciemnym pasie drobny druk musi mieć WŁASNY kolor i pełne krycie —
   `--proza` na graficie daje 2,4:1, czyli tekst, którego się nie czyta. */
.ciemna .drobne,.dol .drobne,.wolanie .drobne{color:var(--proza-inv);opacity:1}

/* wielkie liczby — jedyne miejsce na wagę 700 */
/* 🚨 `.liczba` NIE MIAŁA tu rozmiaru — przychodził ze stylu wpisanego wprost
   w generatorach (skladaj.py, poligon.py, szkielet.py), czyli 43 rozmiary
   w HTML-u poza jakąkolwiek skalą. Rozmiar wraca do arkusza. */
.liczba{font-size:var(--st-rezerwa);font-weight:700;line-height:.78;letter-spacing:-.06em;color:var(--stal)}
.ciemna .liczba,.na-ciemnym .liczba{color:var(--stal-mid)}

/* ══ układ ══════════════════════════════════════════════════════════════ */
/* Margines PŁYNNY, bez progu. Dwustopniowy (2.5rem → 5rem) robił uskok:
   przy 899 px kontener miał 851 px, przy 900 px już 772 px — 79 px w jednym
   pikselu okna. Dokładnie w tym punkcie najdłuższe słowo H1 wychodziło poza
   kolumnę bohatera i pękało w środku. Płynny clamp daje 24 px z boku na
   telefonie, 64 px przy 1280 px i 144 px na dużym monitorze — bez uskoku. */
.wnetrze{width:min(100% - clamp(3rem,10vw,8rem),var(--maks));margin-inline:auto}

/* 🚨 PASEK NAWIGACJI ZOSTAJE NA STAREJ SZEROKOŚCI. Nagłówek to
   `<div class="wnetrze gora-w">`, więc zwężenie kontenera ścisnęłoby menu:
   siedem pozycji + logotyp + telefon to około 1085 px, a menu włącza się już
   od 1000 px. To ta sama pułapka, którą mamy zapisaną po innym kliencie —
   tylko że wchodzi kontenerem, nie rozmiarem pisma. */
.gora .wnetrze{width:min(100% - 2.5rem,1280px)}
@media (min-width:900px){.gora .wnetrze{width:min(100% - 5rem,1280px)}}

.pas{padding-block:var(--luz);position:relative}
.pas.ciemna{background:var(--grafit);color:var(--proza-inv)}
.pas.papier{background:var(--papier)}
.pas.stal{background:var(--stal);color:#fff}
.pas.stal .tag{color:rgba(255,255,255,.75)}
.pas.stal .disp{color:#fff}

.siatka2{display:grid;gap:clamp(2rem,4vw,3.5rem)}
@media (min-width:860px){
  .siatka2{grid-template-columns:repeat(2,1fr)}
  /* Zdjęcie było SZERSZE od kolumny tekstu (1.1 do 0.9). Teraz jest węższe —
     tekst dostaje więcej miejsca, zdjęcie mniej. */
  .siatka2.tekst-obok{grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);align-items:start}
}
.siatka3{display:grid;gap:1px;background:var(--linia)}
@media (min-width:760px){.siatka3{grid-template-columns:repeat(3,1fr)}}
.siatka4{display:grid;gap:1px;background:var(--linia)}
@media (min-width:640px){.siatka4{grid-template-columns:repeat(2,1fr)}}
/* Próg czterech kolumn podniesiony z 1040 na 1200 px: w węższym kontenerze
   kafel przy 1040 px miał na tekst 185 px, czyli 23 znaki w wierszu. */
@media (min-width:1200px){.siatka4{grid-template-columns:repeat(4,1fr)}}
.ciemna .siatka3,.ciemna .siatka4{background:var(--linia-inv)}

/* ══ kalka — siatka modularna pod spodem ═══════════════════════════════
   Element, który spina całą markę. Nigdy nie jest mocniejszy niż 7% czerni:
   ma być wyczuwalny, a nie widoczny.                                        */
.kalka{position:relative;isolation:isolate}
.kalka::before{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background-image:
    linear-gradient(rgba(35,39,43,.055) 1px,transparent 1px),
    linear-gradient(90deg,rgba(35,39,43,.055) 1px,transparent 1px);
  background-size:var(--kalka) var(--kalka);
  mask-image:linear-gradient(180deg,transparent,#000 12%,#000 88%,transparent);
}
.ciemna.kalka::before{
  background-image:
    linear-gradient(rgba(245,245,243,.05) 1px,transparent 1px),
    linear-gradient(90deg,rgba(245,245,243,.05) 1px,transparent 1px);
}

/* ══ ramka rysunkowa ═══════════════════════════════════════════════════ */
.ramka{position:relative}
.ramka::after{
  content:"";position:absolute;inset:.75rem;border:1px solid var(--linia-stal);
  pointer-events:none;z-index:2;
}

/* ══ linia wymiarowa ═══════════════════════════════════════════════════
   Kreska z zakończeniami jak na rysunku technicznym. Rysuje się przy wejściu
   sekcji w kadr (patrz js/home.js). To jest nasz efekt firmowy.             */
.wymiar{
  position:relative;height:1px;background:var(--stal);
  transform-origin:left;transition:transform 1.1s var(--ease);
}
.wymiar::before,.wymiar::after{
  content:"";position:absolute;top:-5px;width:1px;height:11px;background:var(--stal);
}
.wymiar::before{left:0}
.wymiar::after{right:0}
/* Chowamy TYLKO gdy skrypt działa — inaczej kreska po prostu jest.
   Kolejność i specyficzność liczą się tu podwójnie: `.js .wymiar` i
   `.js .wymiar.widoczny` muszą stać obok siebie, żeby druga wygrała. */
.js .wymiar{transform:scaleX(0)}
.js .wymiar.widoczny,.js .widoczny .wymiar{transform:scaleX(1)}
.ciemna .wymiar,.ciemna .wymiar::before,.ciemna .wymiar::after{background:var(--stal-mid)}

.wymiar-opis{
  font-size:var(--st-etykieta);letter-spacing:.16em;text-transform:uppercase;
  font-weight:600;color:var(--stal);margin-top:.5rem;
}
.ciemna .wymiar-opis{color:var(--stal-jasna)}

/* ══ numer rysunku — znacznik sekcji ═══════════════════════════════════ */
.numer{
  display:flex;align-items:baseline;gap:.85rem;
  font-size:var(--st-etykieta);letter-spacing:.28em;text-transform:uppercase;font-weight:600;
  color:var(--stal);margin-bottom:1.5rem;
}
.numer b{font-size:var(--st-tekst);letter-spacing:.04em;font-weight:700}
.numer::after{content:"";flex:1;height:1px;background:var(--linia-stal);
  transform:translateY(-.28em)}
.ciemna .numer{color:var(--stal-jasna)}

/* ══ karta ═════════════════════════════════════════════════════════════
   Bez zaokrągleń i bez cienia. Kartę wyznacza tło i linia, tak jak pole
   na planszy projektowej.                                                    */
.karta{background:var(--biel);padding:clamp(1.5rem,2.4vw,2rem)}
.ciemna .karta{background:var(--grafit)}
.karta .d4{margin-bottom:.7rem}
.karta-nr{
  font-size:var(--st-etykieta);letter-spacing:.2em;font-weight:700;color:var(--stal);
  display:block;margin-bottom:1rem;
}
.ciemna .karta-nr{color:var(--stal-mid)}

/* ══ przycisk ══════════════════════════════════════════════════════════
   Prostokąt. Żadnych pigułek 999px — to najczęstszy odcisk domyślnego stylu. */
.btn{
  display:inline-flex;align-items:center;gap:.85rem;
  padding:1.0625rem 2rem;
  font-size:var(--st-drobne);font-weight:600;letter-spacing:.2em;text-transform:uppercase;
  background:var(--stal);color:#fff;border:1px solid var(--stal);
  transition:background .3s var(--ease),color .3s var(--ease),gap .3s var(--ease);
}
.btn:hover{background:var(--grafit);border-color:var(--grafit);gap:1.3rem}
.btn:focus-visible{outline:2px solid var(--stal);outline-offset:3px}
.btn::after{content:"→";font-weight:400;letter-spacing:0}

.btn-obrys{background:transparent;color:var(--atrament);border-color:var(--linia-mocna)}
.btn-obrys:hover{background:var(--atrament);color:var(--biel);border-color:var(--atrament)}
.ciemna .btn-obrys{color:var(--biel);border-color:var(--linia-inv)}
.ciemna .btn-obrys:hover{background:var(--biel);color:var(--grafit);border-color:var(--biel)}

/* ══ telefon jako element pierwszoplanowy ══════════════════════════════ */
.tel{
  font-weight:600;letter-spacing:-.02em;font-size:var(--st-t3);
  color:var(--atrament);display:inline-block;
  border-bottom:2px solid var(--stal);padding-bottom:.1em;
  transition:color .3s var(--ease),border-color .3s var(--ease);
}
.tel:hover{color:var(--stal)}
.ciemna .tel{color:var(--biel);border-color:var(--stal-mid)}
.ciemna .tel:hover{color:var(--stal-jasna)}

/* ══ nagłówek strony ═══════════════════════════════════════════════════ */
.gora{
  position:sticky;top:0;z-index:60;background:rgba(245,245,243,.92);
  backdrop-filter:saturate(1.4) blur(14px);
  border-bottom:1px solid var(--linia);
  transition:transform .4s var(--ease),background .3s var(--ease);
}
.gora-w{display:flex;align-items:center;justify-content:space-between;
  gap:1.5rem;min-height:74px;flex-wrap:nowrap}
/* 🚨 Bez min-width:0 pozycje z `white-space:nowrap` rozpychają pasek szerzej niż
   ekran. Na telefonie strona nie przewijała się w bok (body ma overflow-x:hidden)
   — po prostu URYWAŁA tekst przy prawej krawędzi. Wyglądało to jak błąd akapitu,
   a winny był nagłówek. Sprawdzone renderem przy 390 px. */
.gora-w>*{min-width:0}
/* Znak marki jest obrazem, nie tekstem — wysokość steruje wszystkim,
   szerokość dolicza się z proporcji pliku (2,61:1). */
.znak{display:block;flex:0 0 auto}
.znak picture,.znak img{display:block;height:34px;width:auto}
.znak-dol img{height:40px}
@media (max-width:600px){
  .gora-w{gap:.6rem;min-height:64px}
  .znak img{height:28px}
  .gora-w .btn{padding:.6rem .8rem;font-size:.6875rem;letter-spacing:.08em;gap:.4rem}
  .gora-w .btn::after{display:none}
  .szuflada{inset:64px 0 0}
}

.menu{display:none;gap:2rem;align-items:center}
@media (min-width:1000px){.menu{display:flex}}
.menu a{
  font-size:.75rem;font-weight:500;letter-spacing:.14em;text-transform:uppercase;
  color:var(--proza);padding-block:.4rem;position:relative;
}
.menu a::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--stal);
  transform:scaleX(0);transform-origin:right;transition:transform .35s var(--ease);
}
.menu a:hover::after,.menu a[aria-current]::after{transform:scaleX(1);transform-origin:left}
.menu a[aria-current]{color:var(--atrament)}

.burger{display:flex;flex-direction:column;gap:5px;padding:.6rem}
@media (min-width:1000px){.burger{display:none}}
.burger i{display:block;width:22px;height:1.5px;background:var(--atrament);
  transition:transform .35s var(--ease),opacity .25s}
.burger[aria-expanded="true"] i:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
.burger[aria-expanded="true"] i:nth-child(2){opacity:0}
.burger[aria-expanded="true"] i:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}

.szuflada{
  position:fixed;inset:74px 0 0;background:var(--grafit);z-index:55;
  padding:2.5rem clamp(1.5rem,5vw,4rem);display:flex;flex-direction:column;gap:.25rem;
  transform:translateY(-100%);visibility:hidden;
  transition:transform .5s var(--ease),visibility .5s;
  overflow-y:auto;
}
.szuflada[data-otwarta]{transform:translateY(0);visibility:visible}
.szuflada a{
  font-size:1.5rem;font-weight:600;letter-spacing:-.02em;color:var(--biel);
  padding:.85rem 0;border-bottom:1px solid var(--linia-inv);
}
@media (min-width:1000px){.szuflada{display:none}}

/* ══ stopka ════════════════════════════════════════════════════════════ */
.dol{background:var(--grafit);color:var(--proza-inv);padding-block:3.5rem 1.5rem}
.dol a:hover{color:var(--stal-jasna)}
.dol-siatka{display:grid;gap:2.5rem}
@media (min-width:760px){.dol-siatka{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1060px){.dol-siatka{grid-template-columns:1.5fr 1fr 1fr 1.15fr}}
.dol-marka{grid-column:1/-1}
@media (min-width:1060px){.dol-marka{grid-column:auto}}
.dol h3{font-size:var(--st-etykieta);letter-spacing:.26em;text-transform:uppercase;
  font-weight:600;color:var(--stal-jasna);margin-bottom:1.1rem}
.dol li{margin-bottom:.55rem;font-size:var(--st-tekst)}
.dol-kreska{border-top:1px solid var(--linia-inv);margin-top:2.25rem;padding-top:1.5rem;
  display:flex;flex-wrap:wrap;gap:1rem;justify-content:space-between;font-size:var(--st-drobne)}

/* ══ wejście w kadr ════════════════════════════════════════════════════
   Jeden mechanizm dla całej strony: element czeka przygaszony i lekko niżej,
   wchodzi po dodaniu klasy przez obserwatora. Bez sprężyn i bez odbić.       */
/* 🚨 Ukrywamy TYLKO wtedy, gdy skrypt naprawdę działa — stąd `.js` na <html>,
   dokładane inline w <head>. Bez tego wyłączony albo niedoczytany skrypt
   zostawiał całą treść przy opacity:0 i strona wyglądała na pustą, mimo że
   HTML był kompletny. To ta sama rodzina błędu co „pusta skorupa" u klientów. */
.js [data-wejscie]{opacity:0;transform:translateY(22px);
  transition:opacity .8s var(--ease),transform .8s var(--ease)}
.js [data-wejscie].widoczny{opacity:1;transform:none}
[data-wejscie][data-opoznienie="1"]{transition-delay:.09s}
[data-wejscie][data-opoznienie="2"]{transition-delay:.18s}
[data-wejscie][data-opoznienie="3"]{transition-delay:.27s}
[data-wejscie][data-opoznienie="4"]{transition-delay:.36s}
@media (prefers-reduced-motion:reduce){
  .js [data-wejscie]{opacity:1;transform:none}
  .js .wymiar,.js .wymiar.widoczny{transform:scaleX(1)}
}

/* ══ zdjęcia ═══════════════════════════════════════════════════════════ */
.foto{position:relative;overflow:hidden;background:var(--grafit-mid)}
/* ⚠ <picture> jest domyślnie inline i NIE dziedziczy wysokości rodzica —
   bez tej reguły obrazek w kadrze o stałej proporcji znika, a zostaje
   samo ciemne tło. Sprawdzone renderem: wyglądało jak brak pliku. */
.foto picture{display:block;width:100%;height:100%}
.foto img{width:100%;height:100%;object-fit:cover;
  transition:transform 1.2s var(--ease)}
.foto-podpis{
  position:absolute;left:0;bottom:0;z-index:3;
  background:var(--grafit);color:var(--biel);
  padding:.6rem 1rem;font-size:var(--st-etykieta);letter-spacing:.16em;text-transform:uppercase;
  font-weight:600;
}
.foto-podpis b{color:var(--stal-jasna);font-weight:600}
a.foto:hover img,.foto.zoom:hover img{transform:scale(1.035)}

/* proporcje — nazwane, żeby nie sypać magicznych liczb po HTML-u */
/* Kafle galerii były PIONOWE (4:5). Poziome 4:3 są o 40% niższe,
   więc galeria przestaje zajmować cały ekran. */
.p-4-5{aspect-ratio:4/3}
.p-21-9{aspect-ratio:21/9}
@media (max-width:700px){.p-21-9{aspect-ratio:4/3}}
.p-3-2{aspect-ratio:3/2;max-height:clamp(18rem,34vw,26rem)}
/* Pierwszy ekran: kadr 4:3 obok czterech wierszy nagłówka wyglądał jak
   miniatura. Pion wypełnia kolumnę na całej wysokości tekstu. */
@media (min-width:860px){.hero .foto.p-4-5{aspect-ratio:4/5}}
.js .hero .foto img{transform:scale(1.05);transition:transform 1.4s cubic-bezier(.22,.61,.36,1)}
.js .hero .foto.widoczny img{transform:none}
@media (prefers-reduced-motion:reduce){.js .hero .foto img{transform:none;transition:none}}
.p-16-9{aspect-ratio:16/9}
/* Na telefonie 16:9 daje 184 px wysokości — za mało, żeby porównać dwa
   kadry palcem. Ten sam zabieg co przy pasach zdjęć: pion na wąskim ekranie. */
@media (max-width:700px){.p-16-9{aspect-ratio:4/3}}
.p-1-1{aspect-ratio:1/1}

/* ══ lista etapów ══════════════════════════════════════════════════════ */
.etapy{border-top:1px solid var(--linia)}
.ciemna .etapy{border-color:var(--linia-inv)}
.etap{
  display:grid;grid-template-columns:3.25rem 1fr;gap:1.25rem;align-items:baseline;
  padding:1.35rem 0;border-bottom:1px solid var(--linia);
}
.ciemna .etap{border-color:var(--linia-inv)}
.etap>b{font-weight:700;font-size:var(--st-drobne);letter-spacing:.08em;color:var(--stal)}
.ciemna .etap>b{color:var(--stal-mid)}
.etap-t{font-size:var(--st-t4);font-weight:500;color:var(--atrament);
  letter-spacing:-.018em}
.ciemna .etap-t{color:var(--biel)}
.etap-o{font-size:var(--st-tekst);margin-top:.4rem;max-width:52ch}

/* ══ pasek postępu (oś etapów) ═════════════════════════════════════════ */
.tor{height:10px;background:rgba(35,39,43,.10);position:relative;margin-top:.6rem}
.ciemna .tor{background:rgba(245,245,243,.12)}
.tor i{position:absolute;inset:0 auto 0 0;background:var(--stal);width:0;
  transition:width 1.3s var(--ease)}
.ciemna .tor i{background:var(--stal-mid)}

/* ══ tabela porównawcza ════════════════════════════════════════════════ */
.zestaw{width:100%;border-collapse:collapse;font-size:var(--st-tekst);min-width:34rem}
/* Tabela pięciokolumnowa (zakres.html) potrzebuje więcej — dopiero z `min-width`
   `.przewijak{overflow-x:auto}` w ogóle się uruchamia; dotąd tabela się ZGNIATAŁA. */
.zestaw:has(thead th:nth-child(5)){min-width:52rem}
.zestaw th,.zestaw td{padding:.9rem .7rem;text-align:left;border-bottom:1px solid var(--linia);
  vertical-align:top}
.zestaw thead th{font-weight:600;
  font-size:var(--st-etykieta);letter-spacing:.2em;text-transform:uppercase;font-weight:600;
  color:var(--stal);border-bottom-color:var(--linia-mocna);
}
/* Nagłówek wiersza to etykieta — czyli dokładnie to, co człowiek czyta,
   gdy skanuje tabelę wzrokiem. Waga 500 wyglądała prawie jak treść komórki
   i w trybie skanowania nie liczyła się wcale. 600 daje tabeli kręgosłup. */
.zestaw tbody th{font-weight:600;color:var(--atrament)}
.zestaw .tak{color:var(--stal);font-weight:600}
.przewijak{overflow-x:auto;-webkit-overflow-scrolling:touch}

/* ══ formularz ═════════════════════════════════════════════════════════ */
.pole{margin-bottom:1.35rem}
.pole label{
  display:block;font-size:var(--st-etykieta);letter-spacing:.18em;text-transform:uppercase;
  font-weight:600;color:var(--stal);margin-bottom:.5rem;
}
.pole input,.pole textarea,.pole select{
  width:100%;padding:.95rem 1rem;font:inherit;font-size:1rem;
  background:var(--biel);color:var(--atrament);
  border:1px solid var(--linia-mocna);border-radius:0;
  transition:border-color .25s var(--ease),box-shadow .25s var(--ease);
}
.pole input:focus,.pole textarea:focus,.pole select:focus{
  outline:0;border-color:var(--stal);box-shadow:inset 0 -2px 0 var(--stal);
}
.pole textarea{min-height:9rem;resize:vertical}
.pole-blad{border-color:#B3382F!important}
.komunikat{font-size:var(--st-drobne);margin-top:.4rem;color:#B3382F}

/* ══ formularz — układ i zgoda ═════════════════════════════════════════ */
.formularz{background:var(--papier);padding:clamp(1.5rem,3vw,2.25rem);
  border:1px solid var(--linia)}
.pole.zgoda{display:grid;grid-template-columns:1.25rem 1fr;gap:.75rem;align-items:start}
.pole.zgoda input{width:1.25rem;height:1.25rem;margin-top:.15rem;accent-color:var(--stal)}
.pole.zgoda label{text-transform:none;letter-spacing:0;font-size:var(--st-tekst);font-weight:400;
  color:var(--proza);line-height:1.5;margin:0}
.pole.zgoda label a{color:var(--stal);text-decoration:underline}

.opcjonalne{font-weight:400;letter-spacing:0;text-transform:none;opacity:.6;font-size:var(--st-drobne)}

/* ══ pytania i odpowiedzi ══════════════════════════════════════════════ */
.pyt{border-bottom:1px solid var(--linia)}
.pyt summary{
  list-style:none;cursor:pointer;padding:1.35rem 2.5rem 1.35rem 0;position:relative;
  font-size:var(--st-t4);font-weight:600;color:var(--atrament);
  letter-spacing:-.014em;
}
.pyt summary::-webkit-details-marker{display:none}
.pyt summary::after{
  content:"";position:absolute;right:.4rem;top:50%;width:13px;height:1px;
  background:var(--stal);transition:transform .3s var(--ease);
}
.pyt summary::before{
  content:"";position:absolute;right:.4rem;top:50%;width:13px;height:1px;
  background:var(--stal);transform:rotate(90deg);transition:transform .3s var(--ease);
}
.pyt[open] summary::before{transform:rotate(0)}
.pyt-tresc{padding-bottom:1.5rem;max-width:52ch}

/* ══ budowa sterowana przewijaniem ═════════════════════════════════════
   Sekwencja klatek z kamery, która stała na budowie od płyty do dachu.
   Sekcja jest wysoka, a jej wnętrze przyklejone — przewijanie strony
   przewija budowę. Bez tego JS strona pokazuje pierwszą klatkę i podpisy,
   więc treść nie znika nikomu, kto ma wyłączone skrypty.                   */
.budowa{position:relative;background:var(--grafit);color:var(--biel)}
.budowa-tor{height:340vh}
.budowa-klej{position:sticky;top:0;height:100vh;display:flex;flex-direction:column;
  justify-content:center;overflow:hidden}
.budowa-kadr{position:relative;width:100%;aspect-ratio:16/9;background:var(--grafit-mid)}
.budowa-kadr img{width:100%;height:100%;object-fit:cover}
.budowa-kadr::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(28,31,34,.55) 0%,rgba(28,31,34,0) 26%,
    rgba(28,31,34,0) 58%,rgba(28,31,34,.86) 100%)}
.budowa-opis{position:absolute;left:0;right:0;bottom:0;z-index:3;
  padding:clamp(1.25rem,3vw,2.5rem)}
.budowa-etap{font-size:var(--st-wyr);font-weight:600;letter-spacing:-.03em;
  line-height:1.04;color:var(--biel)}
.budowa-nr{font-size:var(--st-etykieta);letter-spacing:.28em;text-transform:uppercase;
  font-weight:600;color:var(--stal-jasna);margin-bottom:.6rem;display:block}
.budowa-pasek{height:2px;background:rgba(245,245,243,.18);margin-top:1.1rem;position:relative}
.budowa-pasek i{position:absolute;inset:0 auto 0 0;background:var(--stal-mid);width:0;
  transition:width .18s linear}
/* Licznik klatek — mówi wprost, że to jeden ciąg z jednej kamery, a nie zlepek zdjęć. */
.budowa-licznik{margin-top:.7rem;font-size:var(--st-etykieta);letter-spacing:.18em;
  text-transform:uppercase;font-weight:600;color:rgba(245,245,243,.62);
  font-variant-numeric:tabular-nums}
.budowa-licznik span{color:var(--biel)}
.budowa-licznik em{font-style:normal;letter-spacing:.12em;margin-left:.5rem;
  color:rgba(245,245,243,.45)}
.budowa-podpowiedz{position:absolute;top:clamp(1rem,2.5vw,2rem);right:clamp(1rem,2.5vw,2rem);
  border:1px solid rgba(245,245,243,.3);padding:.45rem .9rem;
  background:rgba(28,31,34,.45);backdrop-filter:blur(6px);
  z-index:3;font-size:var(--st-etykieta);letter-spacing:.2em;text-transform:uppercase;font-weight:600;
  color:rgba(245,245,243,.62)}
@media (prefers-reduced-motion:reduce){
  .budowa-tor{height:auto}
  .budowa-klej{position:static;height:auto}
}

/* ══ przekrój warstw ═══════════════════════════════════════════════════ */
.przekroj{display:flex;flex-direction:column-reverse;gap:2px}
.warstwa{display:grid;grid-template-columns:1fr auto;gap:1rem;align-items:center;
  padding:.85rem 1.1rem;background:var(--grafit-plus);
  transition:opacity .5s var(--ease),transform .5s var(--ease)}
.warstwa[data-akcent]{background:var(--stal)}
.warstwa-n{font-size:var(--st-tekst);font-weight:500;color:var(--biel)}
.warstwa-g{font-size:var(--st-etykieta);letter-spacing:.16em;font-weight:600;color:var(--stal-jasna);
  white-space:nowrap}
.warstwa[data-akcent] .warstwa-g,.warstwa[data-akcent] .warstwa-n{color:#fff}
.warstwa-o{grid-column:1/-1;font-size:var(--st-drobne);color:var(--proza-inv);margin-top:.2rem}
.warstwa[data-akcent] .warstwa-o{color:rgba(255,255,255,.86)}

/* ══ suwak „co widać / czego nie widać" ════════════════════════════════ */
.suwak{position:relative;overflow:hidden;user-select:none;cursor:ew-resize;touch-action:pan-y}
.suwak img{width:100%;display:block}
.suwak-gora{position:absolute;inset:0}
.suwak-gora img{height:100%;object-fit:cover}
.suwak-uchwyt{position:absolute;top:0;bottom:0;width:2px;background:var(--biel);
  z-index:4;transform:translateX(-1px)}
.suwak-uchwyt::after{
  content:"↔";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:44px;height:44px;background:var(--biel);color:var(--grafit);
  display:grid;place-items:center;font-size:var(--st-tekst);font-weight:600;
}
.suwak-uchwyt:focus-visible{outline:2px solid var(--stal-jasna);outline-offset:4px}
.suwak-etykieta{position:absolute;bottom:1rem;z-index:5;background:var(--grafit);
  color:var(--biel);padding:.45rem .8rem;font-size:var(--st-etykieta);letter-spacing:.2em;
  text-transform:uppercase;font-weight:600}

/* ══ elementy prozy ════════════════════════════════════════════════════ */
.wypunkt{margin:1.1rem 0}
.wypunkt li{position:relative;padding-left:1.5rem;margin-bottom:.6rem}
.wypunkt li::before{content:"";position:absolute;left:0;top:.62em;width:8px;height:1px;
  background:var(--stal)}
.ciemna .wypunkt li::before{background:var(--stal-mid)}

blockquote{margin:1.6rem 0;padding:.2rem 0 .2rem 1.5rem;border-left:2px solid var(--stal);
  font-size:var(--st-tekst)}
blockquote p{color:var(--atrament)}
.ciemna blockquote{border-color:var(--stal-mid)}
.ciemna blockquote p{color:var(--biel)}

/* ══ lista kontrolna odbioru — mechanizm, którego nie ma nikt na rynku ══ */
.kontrolna{border-top:1px solid var(--linia)}
.ciemna .kontrolna{border-color:var(--linia-inv)}
.ptaszek{display:grid;grid-template-columns:2.75rem 1fr;gap:1rem;align-items:start;
  padding:1.15rem 0;border-bottom:1px solid var(--linia)}
.ciemna .ptaszek{border-color:var(--linia-inv)}
.ptaszek>b{font-size:var(--st-drobne);font-weight:700;letter-spacing:.08em;color:var(--stal);
  padding-top:.25em}
.ciemna .ptaszek>b{color:var(--stal-mid)}
.ptaszek .d4{color:var(--atrament)}
.ciemna .ptaszek .d4{color:var(--biel)}

/* ══ galeria ═══════════════════════════════════════════════════════════ */
.galeria{display:grid;gap:1px;background:var(--linia)}
@media (min-width:620px){.galeria{grid-template-columns:repeat(2,1fr)}
  /* Przy dwóch kolumnach nieparzysta liczba kafli zostawiała ostatni sam
     obok pustego pola. Niech zajmie cały wiersz — wtedy wygląda na
     decyzję, a nie na brakujące zdjęcie. */
  .galeria[data-ile="3"] figure:last-child,
  .galeria[data-ile="5"] figure:last-child{grid-column:1/-1}}
@media (min-width:980px){.galeria{grid-template-columns:repeat(3,1fr)}
  /* Cztery kafle w trzech kolumnach zostawiały jeden sam w ostatnim
     wierszu, obok dwóch pustych pól. Dwie kolumny wypełniają się
     równo. To samo dotyczy dwóch kafli. */
  .galeria[data-ile="4"],.galeria[data-ile="2"]{grid-template-columns:repeat(2,1fr)}
  .galeria[data-ile="3"] figure:last-child{grid-column:auto}
  .galeria[data-ile="5"] figure:last-child{grid-column:1/-1}}
.galeria figure{margin:0}

/* ══ most do Lux-Bud Design — jedyne miejsce spotkania marek ═══════════ */
.most{border:1px solid var(--linia-stal);padding:clamp(1.75rem,4vw,3rem);
  background:var(--papier)}
.ciemna .most{background:var(--grafit-plus)}
/* 🚨 `.pas.stal` maluje CAŁĄ sekcję na biało (`color:#fff`), a `.most` kładzie
   pod tym kartę w kolorze papieru — biel na papierze, kontrast **1,07:1**,
   na pięciu podstronach. Karta ma własne tło, więc ma też własny kolor pisma.
   Zmierzone na żywej stronie, nie w podglądzie. */
.pas.stal .most,
.pas.stal .most .disp,
.pas.stal .most .proza,
.pas.stal .most .proza a{color:var(--atrament)}
.pas.stal .most .tag{color:var(--stal)}

/* ══ pas wywoławczy na dole każdej podstrony ═══════════════════════════ */
.wolanie{background:var(--grafit);color:var(--biel);padding-block:var(--luz)}
.wolanie .lead{color:var(--proza-inv)}

/* ══ pasek autorstwa VIAM ══════════════════════════════════════════════
   Stoi PO </footer>, nie w środku — inaczej dziedziczy padding stopki
   i przestaje być na pełną szerokość (wpadka z lipca u kilku klientów).
   Zapas na dole na telefonie, żeby nie zakryły go pływające przyciski.   */
.viam-credit{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:.6rem;
  width:100%;padding:.9rem 1.25rem;background:var(--papier);
  border-top:1px solid var(--linia);
  font-size:var(--st-drobne);letter-spacing:.04em;color:var(--proza);
}
.viam-credit a{color:var(--atrament);border-bottom:1px solid var(--linia-mocna)}
.viam-credit a:hover{color:var(--stal);border-color:var(--stal)}
.viam-v{display:grid;place-items:center;width:18px;height:18px;background:var(--grafit);
  color:var(--biel);font-size:var(--st-etykieta);font-weight:700;letter-spacing:0}
@media (max-width:768px){.viam-credit{margin-bottom:74px}}

/* ══ okruszki ══════════════════════════════════════════════════════════ */
.okruszki{font-size:var(--st-drobne);letter-spacing:.08em;color:var(--proza);
  padding-block:1.25rem;border-bottom:1px solid var(--linia)}
.okruszki a:hover{color:var(--stal)}
.okruszki span{opacity:.5;margin-inline:.4rem}

/* ══ pomoc dla czytających klawiaturą ══════════════════════════════════ */
.przeskocz{
  position:absolute;left:-9999px;top:0;z-index:100;
  background:var(--stal);color:#fff;padding:.85rem 1.25rem;font-size:var(--st-drobne);
  letter-spacing:.14em;text-transform:uppercase;font-weight:600;
}
.przeskocz:focus{left:.5rem;top:.5rem}

/* ══ druk ══════════════════════════════════════════════════════════════ */
@media print{
  .gora,.szuflada,.wolanie,.btn{display:none}
  body{background:#fff;color:#000}
  .pas{padding-block:1.5rem;break-inside:auto}
  .karta,.etap,.pyt{break-inside:avoid}
  h1,h2,h3,.disp,.tag{break-after:avoid}
  p,li{orphans:3;widows:3}
}


/* ── przekrój przez podłogę (SVG z _deploy/przekroj.py) ──────────────────
   🚨 Te reguły MIESZKAŁY TYLKO w przekroj.py, w stronie podglądowej, która
      dodatkowo sama definiowała sobie zmienne. Podgląd wyglądał wzorowo,
      a na żywej stronie SVG nie miał żadnego stylu: `fill` wracał do
      wartości domyślnej, czyli CZERNI na graficie — kontrast 1,27:1.
      Podpisów przekroju praktycznie nie było widać. Reguły należą tutaj. */
.rysunek{width:100%;height:auto;display:block}
.rysunek text{font-family:'Archivo',system-ui,sans-serif;fill:var(--proza-inv)}
/* 🚨 Reguły szczegółowe MUSZĄ być zapisane przez `.rysunek`, bo inaczej
   `.rysunek text` (swoistość 0,1,1) bije samo `.rys-nazwa` (0,1,0) i cały
   rysunek dostaje jeden kolor: nazwa warstwy przestaje być biała, a akcent
   stalowy. Hierarchia rysunku znikała po cichu — kontrast był poprawny,
   więc nic tego nie zgłaszało. */
.rysunek .rys-nazwa{font-size:15px;font-weight:600;fill:var(--biel)}
.rysunek .rys-akcent{fill:var(--stal-jasna)}
/* Waga 300 przy 12,5 px to na grafcie tekst, który się rozpływa.
   400 nie zmienia układu rysunku, a daje realną czytelność. */
.rysunek .rys-opis{font-size:12.5px;font-weight:400;fill:rgba(245,245,243,.72)}
.rysunek .rys-wymiar-tx{font-size:11px;font-weight:600;letter-spacing:.16em;
  text-transform:uppercase;fill:var(--stal-jasna);text-anchor:middle}
/* Na wąskim ekranie rysunek Z PODPISAMI zmniejszyłby tekst do kilku pikseli,
   więc pozwalamy mu się przewinąć w bok — ten sam zabieg co przy tabelach.
   🚨 Wariant wąski (`.rysunek-waski`) jest z tego WYŁĄCZONY. Podpisów nie ma,
      więc mieści się w każdej szerokości — a `min-width` bije `max-width:100%`
      i rozpychał go na telefonie do 720 px w kontenerze 327 px. */
@media (max-width:820px){
  .rysunek:not(.rysunek-waski){min-width:720px}
}

/* Pas zdjęcia doklejony pod treścią sekcji, która sama zdjęcia nie rysuje.
   Powód: 16 z 46 przypisanych kadrów nie renderowało się w ogóle, bo pole
   `zdjecie` czytały tylko dwa typy sekcji. Na telefonie dawało to ciągi
   powyżej dziesięciu ekranów bez ani jednego obrazu. */
.pas-foto{margin-top:clamp(2.25rem,4vw,3.5rem)}
/* Pas 21:9 wycina ŚRODEK kadru, a w zdjęciach domu środek to niebo —
   w pasie zostawał sam dach na chmurach. Punkt kadrowania idzie niżej. */
.pas-foto img{object-position:50% 64%}
/* Spokojne wejście pasa: kadr osiada z lekkiego powiększenia, gdy pas wchodzi
   w kadr. Jeden ruch, bez przesuwania w bok — pas ma się otworzyć, nie tańczyć.
   Sam pas ma `data-wejscie`, więc korzystamy z obserwatora, który już działa. */
.js .pas-foto img{transform:scale(1.06);transition:transform 1.1s cubic-bezier(.22,.61,.36,1)}
.js .pas-foto.widoczny img{transform:none}
@media (prefers-reduced-motion:reduce){.js .pas-foto img{transform:none;transition:none}}

/* ══ sekcja przewijana w pionie ════════════════════════════════════════════
   Jedna pozycja na ekran. Panel stoi, treść się zmienia.
   🚨 STAN PODSTAWOWY (bez JS, bez `.js` na <html>) to ZWYKŁA LISTA — wszystko
      widoczne, jedno pod drugim. Tryb przewijany dokłada dopiero `.js`. */
.pion-poz{padding-block:clamp(1.75rem,4vw,2.5rem);border-top:1px solid var(--linia)}
.pion-poz:first-child{border-top:0}
.ciemna .pion-poz{border-color:var(--linia-inv)}
.pion-glowa{display:flex;align-items:baseline;gap:.9rem}
.pion-slowo{font-size:var(--st-etykieta);letter-spacing:.28em;text-transform:uppercase;
  color:var(--stal);font-weight:600}
.ciemna .pion-slowo{color:var(--stal-jasna)}
.pion-nr{font-size:var(--st-pion);font-weight:700;line-height:.78;letter-spacing:-.06em;
  color:var(--stal);font-variant-numeric:tabular-nums}
.ciemna .pion-nr{color:var(--stal-mid)}
.pion-t{font-size:var(--st-t2);margin-top:1rem;text-wrap:balance}
.pion-o{max-width:52ch;margin-top:1rem;color:var(--proza)}
/* Na szerokim ekranie numer i treść stoją obok siebie — inaczej panel na pełną
   wysokość okna ma pustą całą prawą połowę. */
@media (min-width:860px){
  .pion-poz{display:grid;grid-template-columns:minmax(0,.32fr) minmax(0,.68fr);
    gap:clamp(2rem,5vw,4.5rem);align-items:start}
  .pion-glowa{flex-direction:column;align-items:flex-start;gap:.35rem}
  .pion-t{margin-top:0}
}
.ciemna .pion-o{color:var(--proza-inv)}
.pion-nawigacja{display:none}

/* tryb przewijany — tylko z JS i tylko, gdy ruch jest w porządku */
@media (prefers-reduced-motion:no-preference){
  .js .pion-tor{height:calc(var(--pion-ile) * var(--pion-krok,88vh))}
  .js .pion-klej{position:sticky;top:0;min-height:100vh;display:flex;
    flex-direction:column;justify-content:center;gap:2rem}
  .js .pion-scena{position:relative;min-height:clamp(20rem,44vh,26rem)}
  .js .pion-poz{position:absolute;inset:0;border-top:0;padding-block:0;
    opacity:0;transform:translateY(26px);pointer-events:none;
    transition:opacity .5s ease,transform .5s cubic-bezier(.22,.61,.36,1)}
  .js .pion-poz.aktywna{opacity:1;transform:none;pointer-events:auto}
  .js .pion-nawigacja{display:flex;gap:.5rem;align-items:center}
  .js .pion-nawigacja i{display:block;width:1.75rem;height:2px;background:var(--linia-stal);
    transition:background .35s ease}
  .js .pion-nawigacja i.aktywna{background:var(--stal)}
  .js .ciemna .pion-nawigacja i.aktywna{background:var(--stal-jasna)}
}
/* Na wąskim ekranie panel na pełną wysokość okna bywa wyższy niż samo okno
   z paskiem przeglądarki — wtedy sticky przestaje trzymać. Dlatego niżej. */
@media (prefers-reduced-motion:no-preference) and (max-width:700px){
  .js .pion-tor{height:calc(var(--pion-ile) * var(--pion-krok-tel,78vh))}
  .js .pion-klej{min-height:92vh}
  .js .pion-scena{min-height:clamp(18rem,52vh,24rem)}
}

/* ══ przekrój warstw — przewijany ══════════════════════════════════════════
   Osiem warstw to osiem pozycji, więc krok toru jest krótszy niż przy etapach
   — inaczej sam rysunek zabierałby siedem ekranów przewijania. */
.przekroj{--pion-krok:56vh;--pion-krok-tel:52vh}
.przekroj-rys-waski{display:none}
.przekroj-rys svg,.przekroj-rys-waski svg{width:100%;height:auto;max-height:70vh}
/* 🚨 Podpisy w SVG zajmują 42% szerokości rysunku. Na telefonie rysunek idzie
   bez nich, a nazwa i opis warstwy stoją pod nim jako zwykły tekst HTML. */
@media (max-width:859px){
  .przekroj-rys{display:none}
  .przekroj-rys-waski{display:block}
}
@media (min-width:860px){
  .przekroj-opisy{display:none}
  .przekroj .pion-klej{gap:1.5rem}
}
/* podświetlenie bieżącej warstwy — działa na obu wariantach rysunku */
@media (prefers-reduced-motion:no-preference){
  /* Trzy podejścia, trzecie jest tym właściwym:
       1. przyciemnianie wszystkiego opacity → osiem pasów zlewało się w jedno;
       2. zdjęcie wypełnień z nieaktywnych → rysunek stawał się pustym szkicem;
       3. TERAZ: KAŻDA warstwa ma swój materiał, bieżąca dostaje mocny błękit
          marki NA WIERZCHU plus biały obrys i poświatę.
     Podpisów nie gasimy prawie wcale — całą listę ma się dać przeczytać
     od razu, bez przewijania przez wszystkie osiem pozycji. */
  .js .przekroj [data-warstwa]>rect{
    stroke:rgba(255,255,255,.55);stroke-width:1.2;
    transition:stroke .35s ease,stroke-width .35s ease}
  .js .przekroj .rys-podswietl{transition:opacity .35s ease}
  .js .przekroj [data-warstwa].warstwa-aktywna .rys-podswietl{
    opacity:.82;stroke:#fff;stroke-width:3.5}
  .js .przekroj [data-warstwa].warstwa-aktywna>rect{stroke:#fff;stroke-width:3.5}
  .js .przekroj [data-warstwa].warstwa-aktywna{
    filter:drop-shadow(0 0 26px rgba(127,203,217,.9))}
  /* Podpisy: jasne dla wszystkich, błękitne dla bieżącego. */
  .js .przekroj [data-warstwa$="-opis"] .rys-nazwa{fill:rgba(245,245,243,.92)}
  .js .przekroj [data-warstwa$="-opis"] .rys-opis{fill:rgba(245,245,243,.72)}
  .js .przekroj [data-warstwa$="-opis"].warstwa-aktywna .rys-nazwa{fill:var(--stal-jasna)}
  .js .przekroj [data-warstwa$="-opis"].warstwa-aktywna .rys-opis{fill:#fff}
  .js .przekroj .przekroj-opisy{min-height:clamp(11rem,26vh,15rem)}

  /* 🚨 FATAMORGANA. Kalka (siatka 7% czerni) jest przypięta do SEKCJI, a panel
     stoi w miejscu — przy torze na kilka ekranów siatka przejeżdżała pod
     nieruchomym rysunkiem i migotała. Panel dostaje własne, nieprzezroczyste
     tło i własną siatkę, która stoi razem z nim. */
  .js .pion-klej{background:var(--biel)}
  .js .pas.ciemna .pion-klej{background:var(--grafit)}
  .js .pas.papier .pion-klej{background:var(--papier)}
  .js .pas.stal .pion-klej{background:var(--stal)}
  .js .pion-klej{position:sticky;isolation:isolate}
  /* Siatkę dostaje tylko panel w sekcji, która kalkę NOSIŁA — inaczej
     dokładalibyśmy ją tam, gdzie jej z założenia nie ma. */
  .js .pas.kalka .pion-klej::before{
    content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
    background-image:
      linear-gradient(rgba(35,39,43,.055) 1px,transparent 1px),
      linear-gradient(90deg,rgba(35,39,43,.055) 1px,transparent 1px);
    background-size:var(--kalka) var(--kalka);
  }
  .js .pas.ciemna.kalka .pion-klej::before{
    background-image:
      linear-gradient(rgba(245,245,243,.05) 1px,transparent 1px),
      linear-gradient(90deg,rgba(245,245,243,.05) 1px,transparent 1px);
  }
  /* Sekcja z torem nie rysuje już własnej kalki — byłaby tą, która jedzie. */
  .js .pas.ma-tor.kalka::before{display:none}
}