/* ==========================================================================
   mobile-v58.css  (Wzorowa Agencja, strona 03.11–05.11.2026)
   Osobny układ na TELEFON. Ładowany NA KOŃCU strony (przed </body>).
   Wszystko w @media (max-width:820px) albo (max-width:1023px).
   Nic poza tymi blokami nie zmienia komputera (>=1024 px), z jednym wyjątkiem
   technicznym: elementy dodane przez mobile-v58.js mają display:none poza telefonem.
   Skala odstępów: 8 / 16 / 24 / 32 / 48 / 64. Margines strony: 20 px.
   Selektory z "html body.pracownia", bo reguły strony mają .pracownia i część !important.
   ========================================================================== */

/* elementy dodawane skryptem / łatką HTML (licznik slajdów, przycisk menu): poza telefonem nie istnieją */
.sl-licznik{display:none}
.m58-menu-btn{display:none}

@media (max-width:820px){

/* ---------- 0. wspólne -------------------------------------------------- */
html{overflow-x:clip}
html body.pracownia{overflow-x:clip}

/* ---------- 1. PIERWSZY EKRAN: kicker, nagłówek (zamrożony), slider ------- */
/* Kolejność na telefonie: najpierw to, co klient ogląda (makieta komputer + telefon),
   potem opis realizacji, na końcu sterowanie "2 / 15" ze strzałkami. */
html body.pracownia .kicker2{font-size:16px;line-height:1.4}
html body.pracownia #sl{display:flex;flex-direction:column;gap:0}
html body.pracownia #sl .sl-scena{order:1;margin:0 -20px;width:calc(100% + 40px);height:clamp(260px,78vw,330px)}
html body.pracownia #sl .sl-vp{order:2;margin-top:-16px;position:relative;z-index:7}
html body.pracownia #sl .sl-ster{order:3}
html body.pracownia #sl .sl-tasma{display:none}
html body.pracownia #sl .sl-title{font-size:24px;line-height:1.15}
html body.pracownia #sl .sl-sub{font-size:17px;line-height:1.4}
html body.pracownia #sl .sl-btn{min-height:48px}

/* sterowanie: licznik po lewej, strzałki po prawej; kropki znikają (15 kropek + strzałki się nie mieściły) */
html body.pracownia #sl .sl-ster{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-top:16px}
html body.pracownia #sl .sl-kropki{display:none}
html body.pracownia #sl .sl-licznik{display:block;margin:0;font:800 28px/1 "Sofia Sans Extra Condensed","Arial Narrow",sans-serif;letter-spacing:.06em;color:#FFD60A;font-variant-numeric:tabular-nums}
html body.pracownia #sl .sl-licznik i{font-style:normal;color:rgba(255,255,255,.72)}
html body.pracownia #sl .sl-str{gap:8px}
html body.pracownia #sl .sl-str button{width:48px;height:48px}
/* makieta przyjmuje gest przeciągnięcia (przełącza slajd); linki do stron klientów w makietach zostają nieaktywne */
html body.pracownia #sl .sl-scena.m58-swipe{pointer-events:auto;touch-action:pan-y}
html body.pracownia #sl .sl-scena.m58-swipe a{pointer-events:none}

/* ---------- 5. JAK PRACUJEMY: ta sama scena z arkuszem, krótszy odcinek przewijania ---- */
/* Przypięta scena z 4 etapami miała ok. 3700 px przewijania; teraz ok. 2400 px (progi etapów liczone proporcjonalnie, bez zmiany JS). */
html body.pracownia.js-jw .jw-scena{height:calc(var(--vh)*2.9)}
html body.pracownia .jw-et-n{font-size:20px}
html body.pracownia .jw-et-t{font-size:20px;line-height:1.35}
/* napisy na arkuszu (ilustracja): podłoga 12 px zamiast 10-11 px */
html body.pracownia .jw-lbl{font-size:max(12px,2.8cqw)}
html body.pracownia .jw-dec-et{font-size:max(12px,2.6cqw)}
html body.pracownia .jw-lista-t,html body.pracownia .jw-chips-t{font-size:max(12px,2.6cqw)}
html body.pracownia .jw-chips li{font-size:max(12px,3.1cqw)}
/* "PRZYKŁAD DZIAŁANIA, NIE KLIENT" było ukryte na telefonie (nachodziło na tytuł arkusza); wraca u dołu arkusza, bo to uczciwe oznaczenie ilustracji */
html body.pracownia .jw-przyklad{display:block;top:auto;bottom:2.2%;right:5%;left:auto;z-index:3;font-size:12px;letter-spacing:.08em;text-align:right;color:#6b6552}

/* ---------- 6. REALIZACJE: telefon wyśrodkowany, etykiety czytelne ---------- */
html body.pracownia .a-et{font-size:16px}
html body.pracownia .rz-foto figcaption{font-size:13px}
html body.pracownia .a-mech .bp-r{margin-left:auto;margin-right:auto}

/* ---------- 8. DROBNE PODŁOGI CZYTELNOŚCI (tekst pomocniczy: nie mniej niż 12-13 px, tekst główny 16 px) ---- */
html body.pracownia header.pasek-app nav a.kontakt-p{font-size:16px!important}
html body.pracownia .krol-nad{font-size:16px}
html body.pracownia .kr-nl{font-size:12px}
html body.pracownia .os-lead{font-size:16px;line-height:1.45}
html body.pracownia .os-nota p{font-size:16px;line-height:1.45}
html body.pracownia .lu-pl b{font-size:16px}
html body.pracownia .sek-pas span{font-size:13px}
html body.pracownia .rfh.sf.fZ .fZ-o{min-width:44px}

/* ---------- 7. OKNO "Napisz do nas" (formularz): przewija się samo, gdy klawiatura zabiera pół ekranu ---------- */
html body.pracownia .rfh.kt.kt-dialog{inset:0;margin:0;width:100%;max-width:100%;height:100%;max-height:100dvh;
  overflow-x:hidden;overflow-y:auto;padding:28px 16px 24px;box-sizing:border-box;overscroll-behavior:contain}
html body.pracownia .rfh.kt.kt-dialog .kt-karta{max-width:520px;margin:0 auto}
html body.pracownia .rfh.kt.kt-dialog .kt-dh{font-size:30px;max-width:none}

/* plakietka "Poznajemy": na najwęższych ekranach napis wchodził na przerwy między segmentami */
@media (max-width:360px){html body.pracownia .poz-seg span{letter-spacing:.14em}}

/* ---------- 9. FINAŁ / STOPKA --------------------------------------------- */
/* Jedna kolumna. Kolejność z komputera zostaje: promocja, hasło + wezwanie, nazwa, dane, prawne.
   Wezwanie "Opowiedz nam o swojej firmie" jest na całą szerokość, numery telefonu to osobne duże cele dotyku. */
html body.pracownia .rfh.sf.fZ{--u:1px;--ry:20px}
html body.pracownia .rfh.sf.fZ .fZ-w{display:block;width:calc(100% - 40px)}

/* promocja (pasek) */
html body.pracownia .rfh.sf.fZ .fZ-promo{padding:24px 0}
html body.pracownia .rfh.sf.fZ .fZ-pr{display:flex;flex-direction:column;align-items:stretch;gap:16px}
html body.pracownia .rfh.sf.fZ .fZ-tag{align-self:flex-start;font-size:14px;padding:8px 20px 8px 12px}
html body.pracownia .rfh.sf.fZ .fZ-pt{display:flex;flex-direction:column;align-items:flex-start;gap:8px}
html body.pracownia .rfh.sf.fZ .fZ-pt b{font-size:28px;line-height:1.08}
html body.pracownia .rfh.sf.fZ .fZ-pt span{font-size:17px;line-height:1.4}
html body.pracownia .rfh.sf.fZ .fZ-pc{width:100%;min-height:48px;justify-content:space-between;font-size:17px;padding:0 24px}

/* hasło, wezwanie, nazwa */
html body.pracownia .rfh.sf.fZ .fZ-t{display:block;padding-top:48px}
html body.pracownia .rfh.sf.fZ .fZ-l{display:block}
html body.pracownia .rfh.sf.fZ .fn-h{margin:0;font-size:min(56px,calc((100vw - 40px)*.105));line-height:.98;letter-spacing:0}
html body.pracownia .rfh.sf.fZ .fZ-cta{display:flex;width:100%;min-height:56px;margin-top:24px;justify-content:space-between;font-size:18px;padding:0 24px;box-sizing:border-box}
html body.pracownia .rfh.sf.fZ .fZ-slowo{display:flex;width:100%;margin-top:32px;font-size:calc((100vw - 40px)*.2579);line-height:.8;padding-bottom:0;justify-content:space-between}

/* dane kontaktowe: jedna kolumna, etykieta nad wartością */
html body.pracownia .rfh.sf.fZ .fZ-dane{display:block;margin-top:32px;padding-top:24px}
html body.pracownia .rfh.sf.fZ .fZ-dane .fZ-b{display:block;grid-column:auto;padding:0 0 24px}
html body.pracownia .rfh.sf.fZ .fZ-dane .fZ-b + .fZ-b{padding-top:24px;border-top:1px solid rgba(11,11,15,.28)}
html body.pracownia .rfh.sf.fZ .fZ-b a{display:flex;align-items:center;min-height:48px;font-size:32px;line-height:1.1}
html body.pracownia .rfh.sf.fZ .fZ-b a.fZ-m{display:inline-flex;font-size:22px;margin-top:0;border-bottom-width:2px}
html body.pracownia .rfh.sf.fZ .fZ-b p{font-size:17px;line-height:1.45}
html body.pracownia .rfh.sf.fZ .fZ-r{margin-top:16px;display:flex;flex-wrap:wrap;justify-content:flex-start;gap:12px 24px}
html body.pracownia .rfh.sf.fZ .fZ-r dd{font-size:16px}
html body.pracownia .rfh.sf.fZ .fZ-r dt{font-size:13px}
html body.pracownia .rfh.sf.fZ .et{font-size:14px;margin-bottom:8px}

/* prawne */
html body.pracownia .rfh.sf.fZ .fZ-d{display:block;margin-top:0;padding:24px 0 32px}
html body.pracownia .rfh.sf.fZ .fZ-c{font-size:16px;margin:0 0 16px}
html body.pracownia .rfh.sf.fZ .fZ-gr{display:flex;flex-wrap:wrap;gap:0 24px}
html body.pracownia .rfh.sf.fZ .fZ-gr .et{flex:0 0 100%;margin:0 0 4px}
html body.pracownia .rfh.sf.fZ .fZ-gr a{min-height:44px;font-size:16px}

/* ---------- 2. KRÓLESTWO SPECJALIZACJI: ośmiu kart w jednym pasie do przesuwania ---- */
/* Osiem kartek jedna pod drugą to 2000 px przewijania. Na telefonie: jeden pas, kartka ma numer "01 / 08",
   następna zawsze wystaje z prawej strony, więc widać, że można przesunąć. */
html body.pracownia .krol-siatka{display:flex;grid-template-columns:none;gap:16px;overflow-x:auto;overflow-y:hidden;
  scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none;
  margin:0 -20px;padding:24px 20px 24px;scroll-padding-left:20px}
html body.pracownia .krol-siatka::-webkit-scrollbar{display:none}
html body.pracownia .krol-siatka>li{flex:0 0 min(80vw,330px);scroll-snap-align:start;min-width:0;display:flex}
html body.pracownia .krol-siatka>li>.kr-k{display:block;width:100%}
html body.pracownia .kr-co{font-size:16px;line-height:1.4}
html body.pracownia .kr-co li{padding-left:28px;margin-bottom:4px}
html body.pracownia .kr-ch{font-size:13px;padding:2px 8px}
html body.pracownia .kr-nr,html body.pracownia .kr-wiecej{font-size:14px}

/* ---------- 3. LUDZIE: duet, nagłówek ------------------------------------- */
html body.pracownia .lu-pl span{font-size:13px;letter-spacing:.08em}

html body.pracownia .lu-duo{height:auto;width:min(100%,440px)}

/* ---------- 4. DZIAŁY I LUDZIE: jeden dział = jeden wiersz do przesuwania ------ */
/* mobile-v58.js owija zdjęcia każdego działu w <div class="m58-rail">. Poza telefonem wrapper ma display:contents. */
html body.pracownia .os-panel{display:flex;flex-direction:column;gap:0;grid-template-columns:none}
html body.pracownia .os-panel .m58-rail{display:flex;gap:12px;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling:touch;scrollbar-width:none;margin:12px -20px 0;padding:0 20px 8px;scroll-padding-left:20px}
html body.pracownia .os-panel .m58-rail::-webkit-scrollbar{display:none}
html body.pracownia .os-panel .m58-rail>.os-c{flex:0 0 150px;min-width:0;scroll-snap-align:start}
html body.pracownia .os-et{margin-top:40px;font-size:22px;gap:8px}
html body.pracownia .os-et i{font-size:15px}
html body.pracownia .os-im span{font-size:12px;letter-spacing:.08em}
html body.pracownia .os-im b{font-size:18px}
html body.pracownia .os-tip code{font-size:12px;letter-spacing:0;overflow-wrap:anywhere;line-height:1.3}
/* "w trzech krokach": spokojniejsze wiersze */
html body.pracownia .os-kr{margin-top:24px}
html body.pracownia .os-kr ol{gap:8px}
html body.pracownia .os-kr li{padding:8px 12px;min-height:48px}
html body.pracownia .os-kr li b{font-size:14px}

}

/* ==== RUNDA POPRAWEK PO ODBIORZE UX (05.11.2026): na końcu pliku, żeby wygrywała z wcześniejszymi regułami ==== */
@media (max-width:820px){
/* 6. "Jak pracujemy", końcówka: ramka "20 lat" */
/* nagłówek z ramką: odstęp min. 16 px (24 px) */
html body.pracownia .hero-r.jw-20 .b{margin-top:24px}
/* etykieta "Poznajemy": czytelna jako etap (napis nad trzema cienkimi odcinkami), nie jak przycisk */
html body.pracownia .hero-r .b li.b-poz{margin:0 0 16px}
html body.pracownia .poz-seg{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:4px;height:auto;row-gap:8px}
html body.pracownia .poz-seg span{position:static;grid-column:1/-1;grid-row:1;display:block;place-items:unset;
  font:800 14px/1 "Sofia Sans Extra Condensed","Arial Narrow",sans-serif;letter-spacing:.2em;color:#FFD60A;text-align:left}
html body.pracownia .poz-seg i,html body.pracownia .poz-seg i:first-child,html body.pracownia .poz-seg i:nth-child(3){grid-row:2;height:6px;border-radius:3px}
/* kroki 1-2-3: numer przy pierwszej linii tekstu także, gdy tekst zawija się na 2-3 linie (320 px) */
html body.pracownia .hero-r .b li.is-done,html body.pracownia .hero-r .b li.is-active{align-items:start;height:auto;min-height:44px;padding:8px 0}
html body.pracownia .hero-r .b li.is-active{padding-bottom:8px}
html body.pracownia .hero-r .b li .n{margin-top:2px}
html body.pracownia .hero-r .b li .t{line-height:1.3}
html body.pracownia .hero-r .b li.is-done::after{top:22px;height:100%}
/* przycisk "Zobacz referencje" dalej od listy */
html body.pracownia .hero-r .b li.b-cta{padding-top:24px}

/* 10. Ludzie: kroki działów w jednym wierszu do przesuwania (treść ta sama, mniej przewijania) */
html body.pracownia .os-kd{margin-top:16px}
html body.pracownia .os-kd .os-kr-s{margin-bottom:12px}
html body.pracownia .os-kd ol{flex-direction:row;gap:10px;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;
  scrollbar-width:none;margin:0 -20px;padding:0 20px 4px;scroll-padding-left:20px}
html body.pracownia .os-kd ol::-webkit-scrollbar{display:none}
html body.pracownia .os-kd li{flex:0 0 min(70vw,250px);align-items:flex-start;scroll-snap-align:start;min-height:76px}
html body.pracownia .os-et{margin-top:32px}
}
@media (max-width:860px){
/* 7. Referencje, karta z telefonem (Dehoust): makieta NAD cytatem w osobnym wierszu, bez kremowego słupka */
html body.pracownia .rfh .teczka:has(.wkl){padding:36px 20px 28px;min-height:0}
html body.pracownia .rfh .teczka::before{left:20px}
html body.pracownia .rfh .teczka .wkl{display:none}
html body.pracownia .rfh .teczka img.ph{position:relative;left:auto;top:auto;display:block;width:132px;height:auto;margin:20px auto 24px;border-width:3px}
html body.pracownia .rfh .teczka .clip{left:calc(50% - 11px);top:34px;width:22px;height:54px;border-width:3px}
/* cytat na jasnym brązie: ciemne pismo (było białe na #d8b878, kontrast ok. 1,9:1) */
html body.pracownia .rfh .teczka .tt p,html body.pracownia .rfh .teczka .tt .kl{color:#23221f}
}
@media (max-width:1023px){
/* 8. Pismo pomocnicze: min. 13 px (chipy 14 px), ciemniejszy szary na kartkach (kontrast >= 4,5:1; liczby w RAPORT.md) */
html body.pracownia .kr-nl{font-size:13px;color:#3d3c37}
html body.pracownia .kr-nr{color:#3d3c37}
html body.pracownia .kr-ch{font-size:14px}
html body.pracownia .jw-przyklad{font-size:13px}
html body.pracownia .jw-lbl{font-size:max(13px,2.8cqw);letter-spacing:.06em}
html body.pracownia .jw-dec-et,html body.pracownia .jw-lista-t,html body.pracownia .jw-chips-t{font-size:max(13px,2.6cqw)}
html body.pracownia .jw-chips li{font-size:max(13px,3.1cqw)}
html body.pracownia .jw-chips li:not(.on){color:#57523f}
html body.pracownia .jw-chips li em{font-size:max(13px,4.4cqw)}
html body.pracownia .os-im span{font-size:13px}
html body.pracownia .os-tip code{font-size:13px}
html body.pracownia .os-et i{font-size:14px}
html body.pracownia .a-et{color:#5a4800}
html body.pracownia .a-tabs button i{color:#5a4800}
html body.pracownia .rz-foto figcaption,html body.pracownia .bp-r figcaption{font-size:13px;color:#4a4630}
html body.pracownia .ptxt em{font-size:13px}
html body.pracownia .lu-pl span{font-size:13px}

/* 9. Okno "Porozmawiajmy": pola z ramką, widoczny fokus, zwarte odstępy, przycisk zawsze w zasięgu kciuka */
html body.pracownia .rfh.kt.kt-dialog{padding:14px 12px 8px}
html body.pracownia .rfh.kt.kt-dialog .kt-karta{gap:12px;padding:28px 16px 14px}
html body.pracownia .rfh.kt.kt-dialog .kt-dh{font-size:26px;line-height:1.1}
html body.pracownia .rfh.kt .kt-pole{gap:6px}
html body.pracownia .rfh.kt .kt-pole label{font-size:16px;letter-spacing:.12em}
html body.pracownia .rfh.kt .kt-pole input,html body.pracownia .rfh.kt .kt-pole textarea,html body.pracownia .rfh.kt .kt-pole select{
  min-height:48px;padding:10px 12px;border:2px solid #23221f;border-radius:8px;background-color:#fffdf6;font-size:18px}
html body.pracownia .rfh.kt .kt-pole select{padding-right:40px}
html body.pracownia .rfh.kt .kt-pole textarea{min-height:76px;background-image:none}
html body.pracownia .rfh.kt .kt-pole input:focus,html body.pracownia .rfh.kt .kt-pole textarea:focus,html body.pracownia .rfh.kt .kt-pole select:focus{
  outline:3px solid #111;outline-offset:2px;background-color:#fff3b0;box-shadow:0 0 0 5px #FFD60A}
html body.pracownia .rfh.kt .kt-btn{position:sticky;bottom:8px;z-index:2;min-height:56px;justify-self:stretch;justify-content:center}
html body.pracownia .rfh.kt .kt-zg{font-size:15px;line-height:1.45}
html body.pracownia .rfh.kt .kt-zg a{display:inline-block;padding:14px 0;margin:-14px 0}
html body.pracownia .rfh.kt.kt-dialog .kt-x{top:6px;right:6px}
}

/* ---------- TABLET 821-1023 px: tylko sterowanie sliderem (licznik zamiast 15 małych kropek) ---------- */
@media (min-width:821px) and (max-width:1023px){
html body.pracownia #sl .sl-kropki{display:none}
html body.pracownia #sl .sl-licznik{display:block;margin:0;font:800 28px/1 "Sofia Sans Extra Condensed","Arial Narrow",sans-serif;letter-spacing:.06em;color:#FFD60A;font-variant-numeric:tabular-nums}
html body.pracownia #sl .sl-licznik i{font-style:normal;color:rgba(255,255,255,.72)}
html body.pracownia #sl .sl-str button{width:48px;height:48px}
}

/* ==========================================================================
   MENU NA TELEFON I TABLET (<= 1023 px): 6 pozycji w szufladzie
   Zamknięte: w pasku logo, "Kontakt" (jak dotąd) i przycisk z trzema kreskami.
   Otwarte: panel pod paskiem na całą szerokość, pięć pozycji jako duże wiersze (56 px),
   "Kontakt" na dole jako żółty przycisk. Poza tym przełącznikiem nic nie zmienia komputera.
   ========================================================================== */
@media (max-width:1023px){
html{scroll-padding-top:60px}
html body.pracownia header.pasek-app .bar2{gap:8px}
html body.pracownia header.pasek-app .bar2 nav{margin-left:auto}
html body.pracownia header.pasek-app .m58-menu-btn{display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;
  width:44px;height:44px;padding:0;margin:0;border:1.5px solid rgba(255,255,255,.75);border-radius:50%;background:transparent;color:#fff;cursor:pointer}
html body.pracownia header.pasek-app .m58-menu-btn:focus-visible{outline:3px solid #FFD60A;outline-offset:3px}
html body.pracownia header.pasek-app .m58-menu-ikona{position:relative;display:block;width:18px;height:2px;border-radius:2px;background:currentColor;transition:background-color 120ms linear}
html body.pracownia header.pasek-app .m58-menu-ikona::before,
html body.pracownia header.pasek-app .m58-menu-ikona::after{content:"";position:absolute;left:0;width:18px;height:2px;border-radius:2px;background:currentColor;transition:transform 180ms ease}
html body.pracownia header.pasek-app .m58-menu-ikona::before{top:-6px}
html body.pracownia header.pasek-app .m58-menu-ikona::after{top:6px}
html body.pracownia header.pasek-app.m58-open .m58-menu-ikona{background:transparent}
html body.pracownia header.pasek-app.m58-open .m58-menu-ikona::before{transform:translateY(6px) rotate(45deg)}
html body.pracownia header.pasek-app.m58-open .m58-menu-ikona::after{transform:translateY(-6px) rotate(-45deg)}

/* szuflada */
html body.pracownia header.pasek-app.m58-open nav{position:absolute;left:0;right:0;top:56px;margin:0;width:100%;
  height:calc(100vh - 56px);height:calc(100dvh - 56px);overflow-y:auto;overscroll-behavior:contain;
  box-sizing:border-box;padding:8px 20px 32px;background:#0b0b0d;border-top:1px solid rgba(255,255,255,.12)}
html body.pracownia header.pasek-app.m58-open nav ul{display:flex;flex-direction:column;align-items:stretch;gap:0;max-width:560px;margin:0 auto}
html body.pracownia header.pasek-app.m58-open nav li:not(:last-child){display:block;border-bottom:1px solid rgba(255,255,255,.14)}
html body.pracownia header.pasek-app.m58-open nav li a{display:flex;align-items:center;justify-content:flex-start;box-sizing:border-box;width:100%;
  min-height:60px;height:auto;padding:0 4px;margin:0;border:0;border-radius:0;background:transparent;
  font:800 32px/1.1 "Sofia Sans Extra Condensed","Arial Narrow",sans-serif;letter-spacing:.01em;color:#fff;text-decoration:none}
html body.pracownia header.pasek-app.m58-open nav li a:hover{background:rgba(255,255,255,.06)}
html body.pracownia header.pasek-app.m58-open nav li a:focus-visible{outline:3px solid #FFD60A;outline-offset:-3px}
html body.pracownia header.pasek-app.m58-open nav li:last-child{margin-top:24px}
html body.pracownia header.pasek-app.m58-open nav li:last-child a{justify-content:center;min-height:56px;padding:0 24px;border-radius:999px;
  background:#FFD60A;color:#0b0b0f;font:800 20px/1 "Sofia Sans Extra Condensed","Arial Narrow",sans-serif;letter-spacing:.14em;text-transform:uppercase}
html body.pracownia header.pasek-app.m58-open nav li:last-child a:hover{background:#FFE14D}
html.m58-menu-lock,html.m58-menu-lock body{overflow:hidden}
}
@media (max-width:1023px) and (prefers-reduced-motion:no-preference){
html body.pracownia header.pasek-app.m58-open nav{animation:m58-szuflada 180ms ease-out}
@keyframes m58-szuflada{from{opacity:0}to{opacity:1}}
}

/* wrapper dodany skryptem: poza telefonem nie istnieje dla układu (komputer zostaje bez zmian) */
.m58-rail{display:contents}