/* Zjazd na działkę — styl wspólny.
   Paleta i typografia: patrz README.md (sekcja „Znak i typografia”). */
:root{
  --asfalt:#1B2430;        /* ink — nawierzchnia */
  --papier:#FCFBF9;        /* tło */
  --papier-2:#F3F1EC;      /* tło sekcji wyróżnionej */
  --szary:#5C6773;         /* tekst drugorzędny */
  --linia:#DCDFE3;         /* linie cienkie */
  --znak:#F2B01E;          /* akcent — żółć znaku drogowego */
  --znak-ciemny:#8A5B00;   /* akcent na jasnym tle, kontrast AA */
  /* Pasma jezdni: pasek górny, stopka, linie segregacyjne. NIE odwracają się
     w trybie ciemnym — asfalt zostaje asfaltem. Żółć znaku jest w księdze
     marki stała, więc gdyby pasmo zjaśniało, każdy najazd na „Zadzwoń" albo
     „Menu" dawał żółć na jasnym tle, czyli 1,6:1. */
  --pasmo:#1B2430;
  --pasmo-tekst:#FCFBF9;
  --ok:#1F7A4D; --blad:#A32B2B;
  --tresc:66ch;
  color-scheme:light only;
}
/* Tryb ciemny wyłączony (12.10.2026): strona ma zawsze jasny papier. */
*{box-sizing:border-box}
body{
  margin:0;background:var(--papier);color:var(--asfalt);
  font-family:"Source Sans 3",-apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,sans-serif;
  font-size:17px;line-height:1.65;-webkit-font-smoothing:antialiased;
}
h1,h2,h3,.marka,.krok-nr{font-family:"Barlow Condensed","Arial Narrow",Arial,sans-serif;font-weight:600;letter-spacing:.01em;text-wrap:balance}
h1{font-size:clamp(2.1rem,6vw,3.1rem);line-height:1.08;margin:0 0 .4em}
h2{font-size:clamp(1.5rem,4vw,2rem);line-height:1.15;margin:2.4em 0 .5em}
h3{font-size:1.2rem;margin:1.8em 0 .4em}
p,ul,ol{margin:0 0 1.1em}
a{color:inherit;text-decoration:underline;text-decoration-color:var(--znak);text-underline-offset:3px;text-decoration-thickness:2px}
a:hover{text-decoration-thickness:3px}
:focus-visible{outline:3px solid var(--znak);outline-offset:2px}
.wrap{max-width:var(--tresc);margin-inline:auto;padding-inline:20px}
.szeroko{max-width:78ch}

/* nagłówek */
.pasek{background:var(--pasmo);color:var(--pasmo-tekst)}
.pasek-in{max-width:78ch;margin-inline:auto;padding:14px 20px;display:flex;gap:16px;align-items:center;justify-content:space-between;flex-wrap:wrap}
.marka{font-size:1.25rem;text-transform:uppercase;letter-spacing:.06em;color:var(--pasmo-tekst);text-decoration:none}
.marka-napis span{color:var(--znak)}
.pasek-kontakt{display:flex;gap:10px;align-items:center;font-size:.95rem}
.tel{display:inline-block;padding:7px 14px;border-radius:2px;background:var(--znak);color:#1B2430;font-weight:600;text-decoration:none}
.tel.brak{background:transparent;border:1px dashed var(--znak);color:var(--znak);font-weight:500}

/* nawigacja okruszkowa */
.okruszki{font-size:.85rem;color:var(--szary);padding-top:22px}
.okruszki a{text-decoration-color:var(--linia)}

/* lead */
.lead{font-size:1.2rem;color:var(--szary);max-width:60ch}
.meta{font-family:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.78rem;letter-spacing:.04em;text-transform:uppercase;color:var(--szary)}

/* ramka faktów — styl arkusza rysunkowego */
.fakty{border:1px solid var(--asfalt);margin:2em 0;background:var(--papier)}
.fakty h2{margin:0;padding:10px 16px;font-size:1.05rem;border-bottom:1px solid var(--asfalt);letter-spacing:.06em;text-transform:uppercase}
.fakty dl{margin:0;display:grid;grid-template-columns:minmax(9rem,32%) 1fr}
.fakty dt{padding:10px 16px;border-bottom:1px solid var(--linia);border-right:1px solid var(--linia);font-family:"IBM Plex Mono",monospace;font-size:.8rem;text-transform:uppercase;letter-spacing:.03em;color:var(--szary)}
.fakty dd{padding:10px 16px;border-bottom:1px solid var(--linia);margin:0}
.fakty dt:last-of-type,.fakty dd:last-of-type{border-bottom:0}

/* podstawa prawna */
.akt{font-family:"IBM Plex Mono",monospace;font-size:.82rem;background:var(--papier-2);padding:1px 6px;border-radius:2px;overflow-wrap:anywhere}
.uwaga{border-left:4px solid var(--znak);background:var(--papier-2);padding:14px 18px;margin:1.6em 0}
.uwaga p:last-child{margin-bottom:0}
.uwaga strong{font-weight:600}

/* lista kroków */
.kroki{list-style:none;padding:0;margin:1.5em 0;display:grid;gap:14px}
.kroki li{display:grid;grid-template-columns:2.6rem 1fr;gap:14px;align-items:start}
.krok-nr{font-size:1.5rem;color:var(--znak-ciemny);line-height:1.1;font-variant-numeric:tabular-nums}
.kroki p{margin:0}
.kroki .podpis{color:var(--szary);font-size:.95rem}

/* checklista */
.check{list-style:none;padding:0;margin:1.2em 0;display:grid;gap:10px}
.check li{padding-left:34px;position:relative}
.check li::before{content:"";position:absolute;left:0;top:.28em;width:18px;height:18px;border:1.5px solid var(--asfalt);border-radius:2px}
.check li::after{content:"";position:absolute;left:5px;top:.5em;width:9px;height:5px;border-left:2px solid var(--znak-ciemny);border-bottom:2px solid var(--znak-ciemny);transform:rotate(-45deg)}

/* rysunek */
figure{margin:2.2em 0}
figure svg{width:100%;height:auto;display:block}
figcaption{font-family:"IBM Plex Mono",monospace;font-size:.78rem;color:var(--szary);margin-top:8px;text-transform:uppercase;letter-spacing:.03em}

/* formularz */
.cta{background:var(--papier-2);border-top:3px solid var(--asfalt);margin-top:3.5em;padding-block:2.5em 3em}
.form{display:grid;gap:16px;max-width:52ch}
.pole{display:grid;gap:5px}
.pole label{font-family:"IBM Plex Mono",monospace;font-size:.78rem;text-transform:uppercase;letter-spacing:.04em;color:var(--szary)}
.pole input,.pole select,.pole textarea{
  font:inherit;font-size:1rem;padding:11px 12px;border:1px solid var(--linia);border-radius:2px;
  background:var(--papier);color:var(--asfalt);width:100%;
}
.pole input:focus,.pole select:focus,.pole textarea:focus{border-color:var(--asfalt)}
.pole textarea{min-height:110px;resize:vertical}
.zgoda{display:grid;grid-template-columns:22px 1fr;gap:10px;align-items:start;font-size:.92rem;color:var(--szary)}
.zgoda input{width:20px;height:20px;margin:2px 0 0}
.przycisk{justify-self:start;font:inherit;font-weight:600;font-size:1.05rem;padding:13px 26px;border:0;border-radius:2px;background:var(--asfalt);color:var(--papier);cursor:pointer}
.przycisk:hover{background:var(--znak);color:#1B2430}
.przycisk[disabled]{opacity:.6;cursor:progress}
.hp{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
.odp{padding:12px 14px;border-radius:2px;font-size:.95rem}
.odp.ok{background:rgba(31,122,77,.12);border:1px solid var(--ok);color:var(--ok)}
.odp.blad{background:rgba(163,43,43,.10);border:1px solid var(--blad);color:var(--blad)}

/* stopka */
.stopka{background:var(--pasmo);color:var(--pasmo-tekst);margin-top:0;padding-block:2.2em 2.6em;font-size:.92rem}
.stopka a{color:var(--pasmo-tekst)}
.stopka-in{max-width:78ch;margin-inline:auto;padding-inline:20px;display:grid;gap:18px}
.stopka .meta{color:#9AA6B2}
.doupe{background:var(--znak);color:#1B2430;padding:0 6px;font-weight:600}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* ==========================================================================
   Układ aplikacyjny: przyklejony pasek u góry, pasek kroków u dołu.
   Wysokości pasków są tokenami, bo od nich zależą odstępy treści.
   ========================================================================== */
:root{--dock-h:66px;--pasek-h:58px}

.omin{position:absolute;top:0;left:8px;transform:translateY(-120%);background:var(--pasmo);color:var(--pasmo-tekst);padding:10px 16px;z-index:100}
.omin:focus{transform:translateY(8px)}

/* --- pasek górny --- */
.pasek{position:sticky;top:env(safe-area-inset-top,0px);z-index:50;box-shadow:0 1px 0 rgba(0,0,0,.18)}
.pasek-in{max-width:78ch;margin-inline:auto;padding:9px 16px;display:flex;gap:12px;align-items:center;justify-content:space-between}
.marka{font-size:1.15rem;text-transform:uppercase;letter-spacing:.06em;color:var(--pasmo-tekst);
  text-decoration:none;white-space:nowrap;display:inline-flex;align-items:center;gap:9px}
/* znak marki: droga w perspektywie z wyciętą osią — dziura pokazuje tło,
   więc ten sam plik działa na asfalcie i na papierze */
.znak{width:25px;height:auto;flex:0 0 auto;display:block}
.marka-napis{display:inline-block}
.pasek-akcje{display:flex;gap:8px;align-items:center}
.motto{
  margin:0;background:#2A3643;                      /* zapas dla starszych przeglądarek */
  background:color-mix(in srgb, var(--pasmo) 86%, var(--pasmo-tekst));
  color:#D9DFE6;
  color:color-mix(in srgb, var(--pasmo-tekst) 84%, var(--pasmo));
  font-size:.88rem;line-height:1.35;letter-spacing:.01em;
  padding:7px 16px;text-align:center;
  border-top:1px solid rgba(255,255,255,.08);
}
@media (min-width:860px){.motto{text-align:left;padding-left:max(16px,calc(50vw - 39ch + 16px))}}
@media (max-width:360px){.motto{font-size:.8rem;padding:6px 12px}}
/* Przejście z hasła do poradnika — obrys, nie plama: pełna żółć jest już
   zajęta przez „Zleć nam" w pasku wyżej i dwa żółte klocki jeden pod drugim
   konkurowałyby ze sobą. Zawija się razem z hasłem, więc na wąskim ekranie
   ląduje w drugim wierszu zamiast rozpychać pasek. */
.motto-btn{display:inline-flex;align-items:center;gap:3px;margin-left:10px;
  padding:2px 9px 2px 10px;border:1px solid var(--znak);border-radius:999px;
  color:var(--znak);text-decoration:none;font-weight:600;font-size:.82rem;
  letter-spacing:.02em;white-space:nowrap;vertical-align:1px;
  transition:background-color .15s ease, color .15s ease}
.motto-btn:hover{background:var(--znak);color:#1B2430}
.motto-ik{width:13px;height:13px;flex:0 0 auto;fill:none;stroke:currentColor;
  stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
/* „Zleć nam" wpisane w zdanie — ta sama żółć co przycisk w pasku, ale skala
   zdania, nie paska: ma czytać się jak wyróżnione słowo, a nie jak drugi
   przycisk pod pierwszym. */
.motto-zamow{display:inline-block;padding:1px 10px;border-radius:3px;
  background:var(--znak);color:#1B2430;text-decoration:none;font-weight:600;
  white-space:nowrap}
.motto-zamow:hover{filter:brightness(1.07)}
@media (max-width:420px){.motto-btn{margin-left:8px;font-size:.78rem;padding:1px 8px}}

.btn{display:inline-flex;align-items:center;gap:7px;min-height:42px;padding:0 15px;border:0;border-radius:3px;
  font:inherit;font-weight:600;font-size:.97rem;cursor:pointer;text-decoration:none;white-space:nowrap}
.btn-zamow{background:var(--znak);color:#1B2430}          /* akcja pierwszoplanowa */
.btn-zamow:hover{filter:brightness(1.06)}
.btn-tel{background:transparent;color:var(--pasmo-tekst);border:1.5px solid rgba(255,255,255,.45)}
.btn-tel:hover{border-color:var(--znak);color:var(--znak)}
.btn-tel[data-odsloniety="1"]{font-variant-numeric:tabular-nums;letter-spacing:.02em;
  border-color:var(--znak);color:var(--znak)}
.ikona{width:18px;height:18px;fill:currentColor}
.btn-link{background:none;border:0;padding:0;font:inherit;color:inherit;text-decoration:underline;
  text-decoration-color:var(--znak);text-underline-offset:3px;cursor:pointer}
.mail{cursor:pointer;text-decoration:underline;text-decoration-color:var(--znak);text-underline-offset:3px}

/* --- dolny pasek aplikacyjny: 2 kroki + „Zamów" + 2 kroki ----------------
   Bez ikon: pozycję opisuje numer kroku i do trzech krótkich wierszy tekstu. */
.dock{
  position:fixed;left:0;right:0;bottom:0;z-index:60;
  display:grid;grid-template-columns:1fr 1fr 78px 1fr 1fr;align-items:stretch;
  background:var(--papier);border-top:1px solid var(--linia);
  padding-bottom:env(safe-area-inset-bottom,0px);
  box-shadow:0 -2px 14px rgba(27,36,48,.10);
  transition:transform .22s ease;
}
.dock.schowany{transform:translateY(130%)}
.dock-poz{
  display:flex;flex-direction:column;align-items:center;justify-content:flex-start;
  gap:1px;min-height:var(--dock-h);padding:7px 3px 8px;text-decoration:none;
  color:var(--szary);position:relative;text-align:center;
}
.dock-nr{font-family:"Barlow Condensed",sans-serif;font-size:.92rem;font-weight:600;
  line-height:1;color:var(--znak-ciemny);font-variant-numeric:tabular-nums}
.dock-w{font-size:.7rem;line-height:1.18;letter-spacing:.005em;
  overflow:hidden;text-overflow:ellipsis;max-width:100%;white-space:nowrap}
.dock-poz.biezacy{color:var(--asfalt)}
.dock-poz.biezacy .dock-w{font-weight:600}
.dock-poz.biezacy::before{content:"";position:absolute;top:0;left:16%;right:16%;height:3px;background:var(--znak)}
.dock-poz:active{background:var(--papier-2)}

/* środkowy przycisk — wypukły, jak w aplikacjach */
.dock-zamow{color:var(--asfalt);justify-content:flex-end;padding-bottom:8px}
.dock-zamow .dock-w{font-weight:600;font-size:.74rem}
.dock-koło{
  position:absolute;top:-21px;left:50%;transform:translateX(-50%);
  width:52px;height:52px;border-radius:50%;display:grid;place-items:center;
  background:var(--znak);color:#1B2430;border:3px solid var(--papier);
  box-shadow:0 5px 16px rgba(27,36,48,.30);
}
.dock-koło .dock-ik{width:23px;height:23px;fill:none;stroke:currentColor;stroke-width:1.8;
  stroke-linecap:round;stroke-linejoin:round}
.dock-zamow:active .dock-koło{transform:translateX(-50%) scale(.94)}

/* na szerokim ekranie pasek unosi się jako wyśrodkowana pigułka */
@media (min-width:860px){
  .dock{left:50%;right:auto;transform:translateX(-50%);bottom:18px;width:min(560px,92vw);
    border:1px solid var(--linia);border-radius:16px;box-shadow:0 10px 34px rgba(27,36,48,.20)}
  .dock.schowany{transform:translate(-50%,180%)}
}
@media (max-width:360px){.dock-w{font-size:.66rem}}
body{padding-bottom:calc(var(--dock-h) + 20px + env(safe-area-inset-bottom,0px))}

/* --- drobiazgi mobilne --- */
:target{scroll-margin-top:calc(var(--pasek-h) + 12px)}
#kontakt{scroll-margin-top:calc(var(--pasek-h) + 8px)}
.zgoda-tekst{font-family:inherit;text-transform:none;letter-spacing:0;font-size:inherit}
.stopka-marka{font-size:1.1rem;text-transform:uppercase;display:flex;align-items:center;gap:10px}
.stopka-marka .znak{width:30px}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
@media (max-width:470px){
  /* marka i przyciski mieszczą się w jednym wierszu — pasek ma dwa wiersze,
     nie trzy: akcje + motto */
  .pasek-in{flex-wrap:nowrap;gap:7px;padding:8px 12px}
  .marka{font-size:.84rem;letter-spacing:.02em;gap:6px}
  .znak{width:17px}
  .btn{padding:0 9px;font-size:.86rem;min-height:38px;gap:5px}
  .ikona{width:15px;height:15px}
}
@media (max-width:383px){
  .marka{font-size:.86rem}
  .znak{width:16px}
}
@media (max-width:420px){
  h1{font-size:2rem}
  .fakty dl{grid-template-columns:1fr}
  .fakty dt{border-right:0;padding-bottom:2px}
  .fakty dd{padding-top:2px}
}


/* ==========================================================================
   Język drogowy — jedna zasada podziału:
     ciemna płaszczyzna (asfalt)  → linie BIAŁE, jak oznakowanie poziome P-1…P-4,
     jasna płaszczyzna (papier)   → cienkie linie w kolorze asfaltu, jak na arkuszu,
     żółć                          → wyłącznie znaki i akcje (przyciski, ostrzeżenia).
   Polskie oznakowanie stałe jest białe; żółte bywa tylko tymczasowe, więc żółta
   linia segregacyjna byłaby fałszywym skojarzeniem.
   ========================================================================== */

/* jezdnia: ciemne pasmo z głębią — jaśniej u góry, ciemniej przy krawędzi */
.pasek,.stopka,.pas{
  background-color:var(--pasmo);
  background-image:
    radial-gradient(circle at 30% 40%, rgba(255,255,255,.05) .9px, transparent 1px),
    radial-gradient(circle at 70% 75%, rgba(0,0,0,.16) 1px, transparent 1.2px),
    linear-gradient(180deg,
      color-mix(in srgb, var(--pasmo) 86%, var(--pasmo-tekst)) 0%,
      var(--pasmo) 46%,
      color-mix(in srgb, var(--pasmo) 90%, #000) 100%);
  background-size:7px 7px, 11px 11px, 100% 100%;
}
.pasek{
  /* cień pod paskiem: mocny przy krawędzi, gasnący w dół */
  box-shadow:0 1px 0 rgba(0,0,0,.45), 0 14px 26px -14px rgba(0,0,0,.65);
}

/* linie segregacyjne — białe, w ciemnym pasie */
.pas{display:block;width:100%;height:10px;
  fill:color-mix(in srgb, var(--pasmo-tekst) 90%, var(--pasmo));
  box-shadow:inset 0 3px 6px -4px rgba(0,0,0,.75), inset 0 -3px 6px -4px rgba(0,0,0,.75)}
.pas-stopka{box-shadow:inset 0 6px 12px -8px rgba(0,0,0,.8)}

/* stopka: światło gaśnie ku dołowi */
.stopka{position:relative}
.stopka::before{content:"";position:absolute;inset:0 0 auto;height:56px;
  background:linear-gradient(180deg,rgba(0,0,0,.34),transparent);pointer-events:none}


/* ostrzeżenie to znak, nie linia — tu żółć jest na miejscu */
.uwaga{border-left:0;padding-left:20px;position:relative}
.uwaga::before{content:"";position:absolute;left:0;top:0;bottom:0;width:5px;background:var(--znak)}

/* nagłówek ramki faktów — poprzeczne kreski pobocza, kolorem rysunku */
.fakty h2{position:relative}
.fakty h2::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;
  background:repeating-linear-gradient(to right,var(--asfalt) 0 6px,transparent 6px 11px)}

/* pole formularza w stanie aktywnym — krawędź jezdni (znak, więc żółta) */
.pole input:focus,.pole select:focus,.pole textarea:focus{
  border-color:var(--asfalt);
  box-shadow:inset 0 -3px 0 -1px var(--znak)}

/* rysunki techniczne */
.rys{margin:2.2em 0}
.rys svg{width:100%;height:auto;display:block;color:var(--asfalt)}
.rys figcaption{font-family:"IBM Plex Mono",monospace;font-size:.78rem;color:var(--szary);
  margin-top:10px;text-transform:uppercase;letter-spacing:.03em;
  padding-top:8px;border-top:2px dashed var(--linia)}

/* dolny pasek: unosi się nad treścią, więc cień mocny przy krawędzi i gasnący */
.dock{box-shadow:0 -1px 0 var(--linia), 0 -14px 28px -18px rgba(27,36,48,.6)}
@media (min-width:860px){
  .dock{box-shadow:0 14px 34px -18px rgba(27,36,48,.5), 0 2px 0 rgba(27,36,48,.06)}
}


/* --- karty kroków: rysunek, ramka z oznakowania, cień ---------------------
   Ramka nie jest zwykłym obrysem: górna krawędź to linia przerywana P-1,
   dolna — ciągła. Rysunek w każdej karcie mówi o tym, czego krok dotyczy. */
.siatka-krokow{display:grid;gap:16px;margin:1.8em 0 2.6em}
@media (min-width:640px){.siatka-krokow{grid-template-columns:1fr 1fr}}

.karta{
  display:block;position:relative;isolation:isolate;
  padding:0 0 18px;text-decoration:none;color:inherit;
  background:var(--papier);
  border:1px solid var(--linia);
  border-top:0;border-bottom:2px solid var(--asfalt);
  box-shadow:0 10px 20px -18px rgba(27,36,48,.75);
  transition:box-shadow .18s ease, transform .18s ease;
}
/* górna krawędź — linia przerywana, jak P-1 na jezdni */
.karta::before{content:"";position:absolute;inset:0 0 auto;height:3px;
  background:repeating-linear-gradient(to right,var(--asfalt) 0 14px,transparent 14px 22px)}
.karta:hover{transform:translateY(-2px);box-shadow:0 18px 30px -20px rgba(27,36,48,.85)}
.karta:hover::before{background:var(--asfalt)}   /* najazd „zamyka" linię */

.karta-rys{display:block;width:100%;height:auto;margin:0 0 14px;
  color:var(--asfalt);background:var(--papier-2);
  border-bottom:1px solid var(--linia);padding:14px 16px 10px}
/* co druga karta malowana bielą na asfalcie */
.karta-ciemna .karta-rys{color:var(--papier);background:var(--asfalt);border-bottom-color:var(--asfalt);
  background-image:
    radial-gradient(circle at 30% 40%, rgba(255,255,255,.05) .9px, transparent 1px),
    radial-gradient(circle at 70% 75%, rgba(0,0,0,.16) 1px, transparent 1.2px),
    linear-gradient(180deg, color-mix(in srgb, var(--asfalt) 88%, var(--papier)) 0%, var(--asfalt) 70%);
  background-size:7px 7px, 11px 11px, 100% 100%}
.karta-nr{display:block;padding:0 20px;font-family:"Barlow Condensed",sans-serif;
  font-size:.92rem;letter-spacing:.16em;text-transform:uppercase;color:var(--znak-ciemny)}
.karta h2{margin:.15em 0 .35em;padding:0 20px;font-size:1.25rem}
.karta p{margin:0;padding:0 20px;color:var(--szary);font-size:.97rem}


/* ==========================================================================
   Kreator zlecenia (/zlec.html)
   Formularz kontaktowy zniknął ze stron: kontakt to telefon i „Zleć nam".
   Kreator prosi tylko o to, co pozwala od razu ruszyć ze sprawą.
   ========================================================================== */
.kreator{max-width:52ch;margin:2.2em 0 0}

/* pasek trzech kroków — kółka połączone linią przerywaną jak P-1 */
.pasek-krokow{list-style:none;display:grid;grid-template-columns:repeat(3,1fr);
  margin:0 0 2.2em;padding:0}
.pasek-krokow li{position:relative;text-align:center;padding-top:36px;
  font-family:"Barlow Condensed","Arial Narrow",Arial,sans-serif;font-weight:600;
  font-size:.92rem;text-transform:uppercase;letter-spacing:.06em;color:var(--szary)}
.pasek-krokow li span{position:absolute;top:0;left:50%;transform:translateX(-50%);
  width:27px;height:27px;border-radius:50%;display:grid;place-items:center;z-index:1;
  background:var(--papier);border:2px solid var(--linia);color:var(--szary);font-size:.88rem}
.pasek-krokow li::before{content:"";position:absolute;top:12.5px;left:-50%;right:50%;height:2px;
  background:repeating-linear-gradient(to right,var(--linia) 0 7px,transparent 7px 13px)}
.pasek-krokow li:first-child::before{display:none}
.pasek-krokow li.zrobiony{color:var(--asfalt)}
.pasek-krokow li.zrobiony span{border-color:var(--asfalt);background:var(--asfalt);color:var(--papier)}
.pasek-krokow li.zrobiony::before,.pasek-krokow li.biezacy::before{
  background:repeating-linear-gradient(to right,var(--asfalt) 0 7px,transparent 7px 13px)}
.pasek-krokow li.biezacy{color:var(--asfalt)}
.pasek-krokow li.biezacy span{border-color:var(--znak);background:var(--znak);color:#1B2430}

.ekran{border:0;padding:0;margin:0;display:grid;gap:16px}
.ekran legend{padding:0;margin:0 0 .1em;color:var(--asfalt);
  font-family:"Barlow Condensed","Arial Narrow",Arial,sans-serif;font-weight:600;font-size:1.5rem}
.podpowiedz{margin:0;font-size:.92rem;color:var(--szary)}
.etykieta{font-family:"IBM Plex Mono",monospace;font-size:.78rem;text-transform:uppercase;
  letter-spacing:.04em;color:var(--szary)}
.opcja{font-family:inherit;text-transform:none;letter-spacing:0;font-size:.82em;
  color:var(--szary);font-weight:400}

/* wybór zakresu — pola dotykowe, nie mikroskopijne kwadraciki */
.wybor{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.wybor input{position:absolute;opacity:0;width:1px;height:1px}
.wybor label{display:block;position:relative;padding:12px 14px 12px 44px;cursor:pointer;
  border:1px solid var(--linia);border-radius:3px;background:var(--papier);font-size:.98rem}
.wybor label::before{content:"";position:absolute;left:14px;top:50%;margin-top:-9px;
  width:18px;height:18px;border:1.5px solid var(--asfalt);border-radius:2px;background:var(--papier)}
.wybor input:checked + label{border-color:var(--asfalt);background:var(--papier-2)}
.wybor input:checked + label::after{content:"";position:absolute;left:19px;top:50%;margin-top:-5px;
  width:9px;height:5px;transform:rotate(-45deg);
  border-left:2px solid var(--znak-ciemny);border-bottom:2px solid var(--znak-ciemny)}
.wybor input:focus-visible + label{outline:3px solid var(--znak);outline-offset:2px}
.wybor label em{display:block;margin-top:3px;font-style:normal;font-size:.76rem;
  font-family:"IBM Plex Mono",monospace;text-transform:uppercase;letter-spacing:.04em;
  color:var(--znak-ciemny)}

.nawigacja{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin-top:26px}
.btn-wstecz{font:inherit;font-size:.97rem;padding:12px 18px;cursor:pointer;
  border:1.5px solid var(--linia);border-radius:2px;background:transparent;color:var(--szary)}
.btn-wstecz:hover{border-color:var(--asfalt);color:var(--asfalt)}

/* bez JS: wszystkie ekrany widoczne, zwykła wysyłka formularza */
.btn-wstecz,#z-dalej{display:none}
.kreator.js .ekran{display:none}
.kreator.js .ekran.widoczny{display:grid}
.kreator.js .btn-wstecz{display:inline-block}
.kreator.js #z-dalej{display:inline-block}
.kreator.js.pierwszy .btn-wstecz{visibility:hidden}
.kreator.js.ostatni #z-dalej{display:none}
.kreator.js:not(.ostatni) #z-wyslij{display:none}

.potwierdzenie{margin:2.2em 0;padding:22px 22px 8px;background:var(--papier-2);
  scroll-margin-top:calc(var(--pasek-h) + 26px);
  border:1px solid var(--linia);border-top:4px solid var(--znak)}
.potwierdzenie:focus{outline:none}
.potwierdzenie h2{margin:.1em 0 .6em;font-size:1.5rem}
.potwierdzenie strong{font-family:"IBM Plex Mono",monospace;font-size:.88em;letter-spacing:.04em}

/* pasek czterech kroków mieści się na telefonie tylko przy krótszych napisach */
.pasek-krokow{grid-template-columns:repeat(4,1fr)}
@media (max-width:420px){
  .pasek-krokow li{font-size:.78rem;letter-spacing:.03em;padding-top:33px}
  .pasek-krokow li span{width:24px;height:24px;font-size:.8rem}
  .pasek-krokow li::before{top:11px}
}

/* przypis RODO — mały, na każdym ekranie, zawsze o TYM ekranie */
.rodo{margin:6px 0 0;padding:11px 13px 11px 14px;position:relative;
  font-size:.86rem;line-height:1.5;color:var(--szary);
  background:var(--papier-2);border-left:3px solid var(--linia)}
.rodo span{display:inline-block;margin-right:7px;padding:1px 6px;border-radius:2px;
  background:var(--asfalt);color:var(--papier);
  font-family:"IBM Plex Mono",monospace;font-size:.68rem;font-weight:500;
  letter-spacing:.08em;vertical-align:1px}
.rodo strong{color:var(--asfalt);font-weight:600}
.rodo a{text-decoration-color:var(--znak)}

/* licznik tego, co klient już ma — informacja o tempie, nie ocena */
.licznik{margin:2px 0 0;padding:10px 14px;font-size:.92rem;color:var(--asfalt);
  background:var(--papier);border:1px dashed var(--linia);border-radius:3px;min-height:1.5em}

/* drobne pozycje w listach wyboru mają podpis, co dana rzecz załatwia */
.wybor label em{line-height:1.35}

/* ==========================================================================
   Okna modalne po złożeniu zlecenia
   Dwa po kolei: numer sprawy, potem „co się dzieje dalej". Natywny <dialog>,
   więc Esc, pułapka na fokus i tło robi przeglądarka, nie nasz skrypt.
   ========================================================================== */
dialog.modal{
  width:min(440px, calc(100vw - 28px));
  max-height:min(84vh, 760px);
  padding:0;border:0;border-radius:4px;
  background:var(--papier);color:var(--asfalt);
  display:flex;flex-direction:column;overflow:hidden;
  box-shadow:0 28px 64px -22px rgba(0,0,0,.65), 0 3px 10px rgba(0,0,0,.20);
}
dialog.modal:not([open]){display:none}
dialog.modal::backdrop{background:rgba(27,36,48,.62)}

/* górna krawędź okna to linia przerywana P-1, jak w kartach kroków */
.modal-krawedz{margin:0;height:3px;flex:0 0 auto;
  background:repeating-linear-gradient(to right,var(--asfalt) 0 14px,transparent 14px 22px)}

.modal-in{padding:20px 22px 4px;overflow:auto;-webkit-overflow-scrolling:touch}
.modal-in h2{margin:.15em 0 .5em;font-size:1.45rem}
.modal-in > p:last-child{margin-bottom:16px}
.modal-in strong{font-family:"IBM Plex Mono",monospace;font-size:.9em;letter-spacing:.04em}
.modal-in .kroki{margin-bottom:16px}

.modal-stopka{flex:0 0 auto;display:flex;justify-content:flex-end;
  padding:13px 22px calc(13px + env(safe-area-inset-bottom,0px));
  background:var(--papier-2);border-top:1px solid var(--linia)}
.modal-stopka .przycisk{min-width:96px;justify-content:center;text-align:center}

@media (prefers-reduced-motion:no-preference){
  dialog.modal[open]{animation:modal-wejscie .18s ease-out}
  @keyframes modal-wejscie{from{opacity:0;transform:translateY(8px) scale(.985)}}
}
@media (max-width:420px){
  .modal-in{padding:18px 18px 4px}
  .modal-in h2{font-size:1.3rem}
  .modal-stopka{padding-inline:18px}
  .modal-stopka .przycisk{flex:1}
}

/* Treść okna bywa dłuższa niż ekran telefonu. Cień pod stopką mówi, że tekst
   idzie dalej — bez tego urwany akapit wygląda na błąd, a nie na przewijanie. */
.modal-stopka{box-shadow:0 -12px 16px -14px rgba(27,36,48,.65)}
/* w oknie lista kroków jest ciaśniejsza niż na stronie — mniej przewijania */
.modal-in .kroki{gap:11px}
.modal-in .kroki li{grid-template-columns:2.1rem 1fr;gap:11px}
.modal-in .kroki .krok-nr{font-size:1.3rem}
.modal-in .kroki p{font-size:.97rem}
.modal-in .kroki .podpis{font-size:.87rem}

/* --- spis odnośników w stopce ------------------------------------------- */
.stopka-nav{display:grid;gap:20px;margin-top:4px}
@media (min-width:560px){.stopka-nav{grid-template-columns:1fr 1fr;gap:28px}}
.stopka-tytul{margin:0 0 8px;font-family:"Barlow Condensed","Arial Narrow",Arial,sans-serif;
  font-weight:600;font-size:1rem;text-transform:uppercase;letter-spacing:.08em;color:var(--znak)}
.stopka-nav ul{list-style:none;margin:0;padding:0;display:grid;gap:7px}
.stopka-nav a{text-decoration:none;color:#D9DFE6;
  color:color-mix(in srgb, var(--pasmo-tekst) 86%, var(--pasmo));font-size:.94rem}
.stopka-nav a:hover{color:var(--pasmo-tekst);text-decoration:underline;
  text-decoration-color:var(--znak);text-underline-offset:3px;text-decoration-thickness:2px}
/* Kolumna „Sprawy" to ten sam wykaz co menu w pasku, ale leży na asfalcie,
   więc ma własną klasę. Wspólna klasa z panelem menu dawała na najeździe
   papier na papierze — 1,03:1. */
.stopka-poz{display:block}
.stopka-poz.biezacy{font-weight:600;color:var(--pasmo-tekst);
  box-shadow:inset 3px 0 0 var(--znak);padding-left:9px}

/* wzór matematyczny w cenniku — mono, wyśrodkowany, na papierze warsztatowym */
.wzor{font-family:"IBM Plex Mono",monospace;font-size:.95rem;text-align:center;
  background:var(--papier-2);border:1px dashed var(--linia);border-radius:3px;
  padding:14px 12px;margin:1.2em 0;overflow-wrap:anywhere}

/* ==========================================================================
   Rozwijane menu w pasku górnym
   Te same pozycje co kolumna „Sprawy" w stopce — jedno źródło w dane.json.
   Hamburger jest na każdej szerokości, także na desktopie: pasek ma zostać
   miejscem dwóch akcji (zadzwoń, zleć), a nie rozlewającej się nawigacji.
   ========================================================================== */
.btn-menu{background:transparent;color:var(--pasmo-tekst);border:1.5px solid rgba(255,255,255,.28);
  gap:8px;padding:0 13px}
.btn-menu:hover{border-color:var(--znak);color:var(--znak)}
.btn-menu[aria-expanded="true"]{background:var(--papier);color:var(--asfalt);border-color:var(--papier)}
.ikona-kreski{fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
.btn-menu-napis{font-weight:600}

.menu{position:absolute;left:0;right:0;top:100%;z-index:55;
  background:var(--papier);border-bottom:2px solid var(--asfalt);
  box-shadow:0 18px 34px -18px rgba(0,0,0,.65)}
.menu[hidden]{display:none}
.menu ul{list-style:none;margin:0 auto;padding:6px 0 10px;max-width:78ch}
.menu-poz{display:block;padding:13px 20px;text-decoration:none;color:var(--asfalt);
  font-size:1.02rem;border-bottom:1px solid var(--linia)}
.menu li:last-child .menu-poz{border-bottom:0}
.menu-poz:hover{background:var(--papier-2)}
.menu-poz.biezacy{font-weight:600;box-shadow:inset 4px 0 0 var(--znak)}
@media (prefers-reduced-motion:no-preference){
  .menu{animation:menu-wejscie .16s ease-out}
  @keyframes menu-wejscie{from{opacity:0;transform:translateY(-6px)}}
}
/* od 640 px menu nie rozlewa się na całą szerokość — wisi pod przyciskiem */
@media (min-width:640px){
  .menu{left:auto;right:max(16px,calc(50vw - 39ch + 16px));width:min(320px,calc(100vw - 32px));
    border:1px solid var(--linia);border-top:0;border-radius:0 0 4px 4px}
  .menu ul{padding:4px 0 6px}
}

/* Na wąskim ekranie „Zadzwoń" zostaje samą ikoną — hamburger musi się zmieścić.
   Po odsłonięciu numeru napis wraca, bo wtedy to właśnie numer jest treścią.
   Po usunięciu „Zleć nam" z paska napis „Menu" mieści się już od 360 px w górę
   — sam hamburger bez podpisu jest gorzej rozpoznawalny, więc wraca wszędzie,
   gdzie starcza miejsca. */
@media (max-width:360px){
  .btn-menu-napis{display:none}
  .btn-menu{padding:0 11px}
}
@media (max-width:470px){
  .btn-tel:not([data-odsloniety="1"]) #tel-napis{display:none}
  .btn-tel:not([data-odsloniety="1"]){padding:0 11px}
}

/* Odsłonięty numer jest długi („+48 797 101 878") i na wąskim ekranie rozpycha
   pasek — dlatego wtedy maleje. Zlecenie wychodzi teraz z motta pod paskiem
   i z paska dolnego, więc w samym pasku nie ma już czego mu ustępować. */
@media (max-width:560px){
  .btn-tel[data-odsloniety="1"]{font-size:.9rem;padding:0 11px;letter-spacing:0}
}
@media (max-width:360px){
  .btn-tel[data-odsloniety="1"]{font-size:.82rem;padding:0 8px;gap:4px}
}
/* Na najwęższych ekranach numer wypiera także wordmark — sygnet zostaje
   i nadal prowadzi na stronę główną. Numer, o który ktoś właśnie poprosił,
   jest w tym momencie ważniejszy niż powtórzenie nazwy marki. */
@media (max-width:470px){
  .pasek-z-numerem .marka-napis{display:none}
  .pasek-z-numerem .btn-tel .ikona{display:none}
}

/* --- cennik: kwota ma być pierwszą rzeczą, którą widać w wierszu ---------- */
.cennik dd{display:grid;gap:3px}
.cena{font-family:"IBM Plex Mono",monospace;font-size:1.05rem;font-weight:500;
  letter-spacing:.01em;color:var(--asfalt)}
.cena-duza{font-size:1.35rem;font-weight:600}
.cena-opis{font-size:.93rem;color:var(--szary);line-height:1.5}
/* wiersz „komplet" odcina się od pozycji pojedynczych — to jest ta oferta */
.cennik .dt-komplet,.cennik .dd-komplet{background:var(--papier-2);
  border-top:2px solid var(--asfalt);border-bottom:0}
.cennik .dt-komplet{color:var(--asfalt);font-weight:600}
.cennik .dd-komplet .cena{color:var(--znak-ciemny)}
/* brutto pod ceną netto — mniejsze i szare, bo to kwota pomocnicza */
.cena-brutto{display:block;font-family:"IBM Plex Mono",monospace;font-size:.82rem;
  color:var(--szary);letter-spacing:0;margin-top:1px}
.cena-duza + .cena-brutto{font-size:.88rem}

/* Zachęta w toku tekstu — przycisk i dopowiedzenie w jednym wierszu.
   Stoi po liście rzeczy, na których sprawa się zacina, bo to jest miejsce,
   w którym czytający sam sobie zadaje pytanie „czy chce mi się to prowadzić".
   Bez ramki i tła: to ma być zdanie z przyciskiem, a nie baner reklamowy. */
.zacheta{display:flex;align-items:center;justify-content:center;gap:14px;flex-wrap:wrap;
  margin:2.2em 0 2.6em;padding:20px 22px;text-align:center;border-radius:6px;
  background:#FAECCD;                                   /* zapas dla starszych przeglądarek */
  background:color-mix(in srgb, var(--znak) 20%, var(--papier));
  border:1px solid color-mix(in srgb, var(--znak) 34%, var(--papier))}
.zacheta-tekst{color:var(--szary);font-size:1.02rem}
@media (max-width:420px){.zacheta{gap:11px;padding:18px 16px}.zacheta-tekst{font-size:.97rem}}

/* ==========================================================================
   ODDECH — 12.10.2026
   Zasada: pustka to też treść. Telefon czyta się w pionie, więc odstęp między
   sekcjami musi być wyraźnie większy niż między akapitami — inaczej strona
   jest jednym ciągiem. Nagłówki sekcji są duże i mają nad sobą kreskę
   (jak odcinek linii P-1), żeby oko zatrzymało się na nich przy przewijaniu.
   Ten blok stoi na końcu pliku i nadpisuje wcześniejsze wartości.
   ========================================================================== */

/* --- pasek „Zleć nam" pod nagłówkiem: nie jest przyklejony, przewija się ---- */
.motto{display:grid;gap:12px;justify-items:center;margin:0;
  padding:18px 20px 20px;text-align:center;font-size:1rem;border-top:0}
.motto-tekst{margin:0;font-size:1.02rem;line-height:1.35;letter-spacing:.01em}
.motto-akcje{display:flex;gap:10px;width:100%;max-width:440px}
.motto .motto-zamow{flex:1;display:inline-flex;align-items:center;justify-content:center;gap:8px;
  min-height:52px;padding:0 20px;border-radius:10px;background:var(--znak);color:#1B2430;
  font-size:1.15rem;font-weight:700;letter-spacing:.01em;text-decoration:none;white-space:nowrap;
  box-shadow:0 6px 16px -8px rgba(0,0,0,.6)}
.motto .motto-zamow .motto-ik{width:18px;height:18px;stroke-width:2.6}
.motto .motto-btn{display:inline-flex;align-items:center;justify-content:center;margin:0;
  min-height:52px;padding:0 18px;border-radius:10px;border:1.5px solid rgba(255,255,255,.45);
  color:var(--pasmo-tekst);font-size:1rem;font-weight:600;letter-spacing:.01em;vertical-align:0}
.motto .motto-btn:hover{background:transparent;border-color:var(--znak);color:var(--znak)}
@media (min-width:860px){
  .motto{grid-template-columns:1fr auto;justify-items:stretch;text-align:left;
    padding:16px max(20px,calc(50vw - 39ch + 20px))}
  .motto-tekst{font-size:1.1rem;align-self:center}
  .motto-akcje{width:auto}
  .motto .motto-zamow{flex:0 0 auto;padding:0 28px}
}
@media (max-width:360px){.motto .motto-zamow{font-size:1.05rem;padding:0 14px}.motto .motto-btn{padding:0 12px}}

/* --- tekst: większy krój i szerszy margines na telefonie ------------------- */
body{line-height:1.7}
.wrap{padding-inline:24px}
@media (max-width:859px){body{font-size:18px}}
p,ul,ol{margin:0 0 1.4em}
.okruszki{padding-top:32px;margin-bottom:1.6em}

/* --- nagłówki: duże, z przestrzenią nad sobą ------------------------------- */
h1{font-size:clamp(2.5rem,10vw,3.8rem);line-height:1.02;letter-spacing:-.005em;margin:.15em 0 .55em}
.lead{font-size:clamp(1.22rem,4.8vw,1.42rem);line-height:1.5;margin-bottom:2.2em}
.wrap > h2, .wrap > section > h2{
  font-size:clamp(2rem,7.6vw,2.7rem);line-height:1.08;letter-spacing:-.003em;
  margin:clamp(4rem,14vw,6rem) 0 .75em}
.wrap > h2::before, .wrap > section > h2::before{
  content:"";display:block;width:44px;height:4px;margin-bottom:20px;background:var(--asfalt)}
.wrap > h3{font-size:clamp(1.35rem,5vw,1.55rem);line-height:1.2;margin:2.6em 0 .6em}
.meta{line-height:1.6}

/* --- listy, ramki, ostrzeżenia --------------------------------------------- */
.kroki{gap:30px;margin:2em 0 2.4em}
.kroki li{gap:18px}
.krok-nr{font-size:1.9rem}
.check{gap:20px;margin:1.6em 0 2em}
.uwaga{margin:2.6em 0;padding:24px 24px 24px 28px;border-radius:0 8px 8px 0}
.fakty{margin:2.6em 0}
.fakty dt,.fakty dd{padding-top:14px;padding-bottom:14px}
.wzor{margin:2em 0;padding:20px 14px}
figure,.rys{margin:3em 0}

/* --- karty kroków na stronie głównej --------------------------------------- */
.siatka-krokow{gap:28px;margin:2.6em 0 1em}
.karta{padding-bottom:26px;border-radius:0 0 6px 6px}
.karta-rys{margin-bottom:20px}
.karta h2{font-size:1.6rem;margin:.25em 0 .45em}
.karta p{font-size:1.02rem;line-height:1.6}

/* --- kreator: duże pola dotykowe i powietrze między nimi ------------------- */
.pasek-krokow{margin-bottom:3em}
.ekran{gap:26px}
.ekran legend{font-size:clamp(1.8rem,6.6vw,2.2rem);line-height:1.1;margin-bottom:.35em}
.pole{gap:9px}
.pole input,.pole select,.pole textarea{min-height:54px;padding:13px 14px;font-size:1.08rem;border-radius:8px}
.pole textarea{min-height:140px}
.wybor{gap:12px}
.wybor label{padding:17px 16px 17px 50px;border-radius:8px;font-size:1.02rem}
.wybor label::before{left:16px}
.wybor input:checked + label::after{left:21px}
.podpowiedz{font-size:1rem;line-height:1.6}
.rodo{padding:16px 18px;font-size:.92rem;line-height:1.6;border-radius:0 8px 8px 0}
.nawigacja{gap:12px;margin-top:34px}
.przycisk,.btn-wstecz{min-height:56px;border-radius:10px}
.przycisk{padding:0 30px;font-size:1.1rem}
@media (max-width:640px){
  .nawigacja{flex-wrap:nowrap}
  .nawigacja .przycisk{flex:1}
  .kreator.js.pierwszy .btn-wstecz{display:none}
}
.potwierdzenie{padding:28px 24px 14px;border-radius:0 0 8px 8px}

/* --- koniec treści i stopka ------------------------------------------------ */
main{padding-bottom:clamp(4rem,14vw,6rem)}
.stopka{padding-block:3.6em 4em}
.stopka-in{gap:28px}
.stopka-nav ul{gap:12px}
.stopka-nav a{font-size:1rem}

/* --- poprawki po przeglądzie zrzutów ---------------------------------------- */
/* Na stronie kreatora pasek „Zleć nam zjazd" prowadziłby do samego siebie. */
body[data-krok="zlec"] .motto{display:none}
/* Odstęp na pasek dolny dokłada stopka, nie body — inaczej pod ciemną stopką
   zostaje jasny pas papieru. */
body{padding-bottom:0}
.stopka{padding-bottom:calc(4em + var(--dock-h) + env(safe-area-inset-bottom,0px))}

/* --- „Zleć nam" w górnym pasku ---------------------------------------------
   Duży przycisk pod nagłówkiem przewija się z treścią. Gdy zniknie z ekranu,
   skrypt dodaje paskowi klasę .z-zamow i ten sam przycisk pojawia się
   pośrodku przyklejonego paska — akcja jest widoczna zawsze, a pasek nie
   rośnie. Bez skryptu przycisk zostaje schowany; jest duży pod nagłówkiem
   i w pasku dolnym. */
.pasek-zamow{display:none}
.pasek.z-zamow .pasek-zamow{display:inline-flex;margin-inline:auto;
  padding:0 18px;border-radius:9px;font-weight:700;font-size:1rem;
  box-shadow:0 4px 12px -6px rgba(0,0,0,.7)}
@media (prefers-reduced-motion:no-preference){
  .pasek.z-zamow .pasek-zamow{animation:zamow-wejscie .2s ease-out}
  @keyframes zamow-wejscie{from{opacity:0;transform:translateY(-4px) scale(.96)}}
}
/* na telefonie robimy miejsce: znika napis marki (sygnet zostaje) */
@media (max-width:470px){
  .pasek.z-zamow .marka-napis{display:none}
  .pasek.z-zamow .pasek-zamow{padding:0 16px;font-size:.98rem}
}
/* odsłonięty numer telefonu jest ważniejszy — wtedy na wąskim ekranie
   „Zleć nam" zostaje tylko w pasku dolnym */
/* odsłonięty numer na wąskim ekranie: gdy „Zleć nam" jest w pasku, telefon
   wraca do samej słuchawki (dalej dzwoni — to już odnośnik tel:) */
@media (max-width:470px){
  .pasek.z-zamow.pasek-z-numerem .btn-tel #tel-napis{display:none}
  .pasek.z-zamow.pasek-z-numerem .btn-tel .ikona{display:block}
  .pasek.z-zamow.pasek-z-numerem .btn-tel{padding:0 11px}
}
.pasek-zamow[hidden]{display:none!important}

/* --- przycisk telefonu: zawsze zielony, słuchawka biała (btn-tel-zielony) ---
   Wyjątek od czterech kolorów marki, decyzja właściciela 12.10.2026: zieleń
   połączenia jest rozpoznawalna od razu, bez czytania. Odcień #17803A ma
   kontrast 5:1 z bielą, więc odsłonięty numer też jest czytelny. */
.pasek .btn-tel,.pasek .btn-tel[data-odsloniety="1"]{
  background:#17803A;color:#fff;border:1.5px solid #17803A}
.pasek .btn-tel:hover,.pasek .btn-tel[data-odsloniety="1"]:hover{
  background:#126A30;border-color:#126A30;color:#fff}
.pasek .btn-tel .ikona{fill:#fff}

/* ==========================================================================
   SPRAWDŹ KOSZT — okno wyceny, jedno pytanie na ekran
   Na telefonie okno zajmuje cały ekran: góra (tytuł, licznik, zamknij),
   pasek postępu, pytanie na środku, przyciski przyklejone do dołu.
   Od 640 px — karta pośrodku ekranu.
   ========================================================================== */
html.w-otwarte{overflow:hidden}
dialog.wycena{position:fixed;inset:0;width:100%;max-width:100%;height:100%;height:100dvh;
  max-height:100%;max-height:100dvh;margin:0;padding:0;border:0;
  background:var(--papier);color:var(--asfalt);overflow:hidden}
dialog.wycena:not([open]){display:none}
dialog.wycena::backdrop{background:rgba(27,36,48,.62)}
.w-forma{display:flex;flex-direction:column;height:100%;margin:0}
.w-gora{display:flex;align-items:center;gap:12px;padding:12px 12px 10px 20px;
  padding-top:calc(12px + env(safe-area-inset-top,0px));
  background:var(--pasmo);color:var(--pasmo-tekst)}
.w-tytul{margin:0;font-family:"Barlow Condensed","Arial Narrow",Arial,sans-serif;font-weight:600;
  font-size:1.2rem;text-transform:uppercase;letter-spacing:.06em;color:var(--znak)}
.w-licznik{margin:0 0 0 auto;font-family:"IBM Plex Mono",monospace;font-size:.8rem;
  letter-spacing:.04em;color:#C9D1DA}
.w-zamknij{width:44px;height:44px;display:grid;place-items:center;border:0;border-radius:8px;
  background:transparent;color:var(--pasmo-tekst);cursor:pointer}
.w-zamknij svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round}
.w-zamknij:hover{background:rgba(255,255,255,.1)}
.w-postep{height:5px;background:var(--linia)}
.w-postep span{display:block;height:100%;width:0;background:var(--znak);transition:width .25s ease}
.w-srodek{flex:1;overflow:auto;-webkit-overflow-scrolling:touch;padding:clamp(28px,7vh,56px) 24px 24px}
.w-pytanie{margin:0 0 .45em;font-size:clamp(1.9rem,7.4vw,2.4rem);line-height:1.08;outline:none}
.w-podp{margin:0 0 1.4em;color:var(--szary);font-size:1.02rem;line-height:1.55}
.w-pole{display:grid;gap:10px}
.w-etyk{font-family:"IBM Plex Mono",monospace;font-size:.78rem;text-transform:uppercase;
  letter-spacing:.04em;color:var(--szary);margin-top:8px}
.w-input{font:inherit;font-size:1.15rem;width:100%;min-height:58px;padding:14px 16px;
  border:1.5px solid var(--linia);border-radius:10px;background:#fff;color:var(--asfalt)}
.w-input:focus{outline:none;border-color:var(--asfalt);box-shadow:inset 0 -3px 0 -1px var(--znak)}
select.w-input{appearance:none;-webkit-appearance:none;padding-right:44px;
  background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 9l6 6 6-6' fill='none' stroke='%231B2430' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 14px center/20px}
textarea.w-input{min-height:150px;resize:vertical}
.w-pole .wybor{gap:10px}
.w-pole .wybor label{font-size:1.08rem;padding:18px 16px 18px 52px;border-radius:10px;background:#fff}
.w-pole .wybor input[type=radio] + label::before{border-radius:50%}
.w-pole .wybor input[type=radio]:checked + label::after{left:21px;width:10px;height:10px;margin-top:-5px;
  border:0;border-radius:50%;background:var(--asfalt);transform:none}
.w-info p{font-size:1.08rem;line-height:1.6;margin:0 0 1em}
.w-info .w-male,.w-male{font-size:.95rem;color:var(--szary)}
.w-ladowanie{color:var(--szary)}
.w-blad{margin:14px 0 0;padding:12px 14px;border-radius:8px;font-size:.98rem;
  background:rgba(163,43,43,.08);border:1px solid var(--blad);color:var(--blad)}
.w-dol{display:flex;gap:10px;padding:12px 16px;padding-bottom:calc(12px + env(safe-area-inset-bottom,0px));
  border-top:1px solid var(--linia);background:var(--papier)}
.w-wstecz,.w-dalej{font:inherit;font-weight:600;font-size:1.08rem;min-height:56px;border-radius:10px;cursor:pointer}
.w-wstecz{padding:0 20px;background:transparent;border:1.5px solid var(--linia);color:var(--szary)}
.w-wstecz:hover{border-color:var(--asfalt);color:var(--asfalt)}
.w-dalej{flex:1;border:0;background:var(--asfalt);color:var(--papier)}
.w-dalej.w-wyslij{background:var(--znak);color:#1B2430;font-weight:700}
.w-dalej[disabled]{opacity:.6;cursor:progress}
@media (min-width:640px){
  dialog.wycena{inset:0;width:min(560px,94vw);height:fit-content;max-height:min(88vh,780px);
    margin:auto;border-radius:16px;box-shadow:0 30px 70px -24px rgba(0,0,0,.65)}
  .w-forma{height:auto;max-height:min(88vh,780px)}
  .w-gora{padding-top:12px}
  .w-srodek{padding:40px 36px 28px}
  .w-dol{padding:14px 20px}
}
@media (prefers-reduced-motion:no-preference){
  dialog.wycena[open] .w-srodek{animation:w-wejscie .18s ease-out}
  @keyframes w-wejscie{from{opacity:0;transform:translateY(6px)}}
}

/* komunikat po wysłaniu — zostaje, aż ktoś go zamknie */
.w-toast{position:fixed;z-index:95;left:12px;right:12px;
  bottom:calc(var(--dock-h) + 14px + env(safe-area-inset-bottom,0px));
  padding:18px 18px 16px;border-radius:12px;background:var(--pasmo);color:var(--pasmo-tekst);
  box-shadow:0 18px 40px -16px rgba(0,0,0,.7)}
.w-toast p{margin:0 0 .6em;font-size:1rem;line-height:1.5}
.w-toast-tyt{font-family:"Barlow Condensed","Arial Narrow",Arial,sans-serif;font-weight:600;
  font-size:1.3rem;color:var(--znak)}
.w-toast strong{color:#fff}
.w-toast-ok{font:inherit;font-weight:700;min-height:44px;padding:0 22px;border:0;border-radius:8px;
  background:var(--znak);color:#1B2430;cursor:pointer}
@media (min-width:640px){.w-toast{left:auto;right:24px;max-width:440px}}

/* przycisk startu na stronie wyceny */
.wycena-start-wiersz{margin:1.6em 0 1em}
.wycena-start{min-height:60px;padding:0 34px;border-radius:12px;font-size:1.2rem;font-weight:700;
  box-shadow:0 8px 20px -10px rgba(0,0,0,.5)}
@media (max-width:640px){.wycena-start{display:flex;justify-content:center;width:100%}}
.dock-zamow .dock-w{white-space:normal;line-height:1.1}

/* --- przełączniki z panelu (np. zakładka Cennik) ----------------------------
   Pozycja z data-przelacznik jest domyślnie ukryta. Pokazuje ją klasa na <html>
   dodawana przez assets/ustawienia.js — plik zapisuje panel administracyjny. */
[data-przelacznik="cennik"]{display:none!important}
html.pokaz-cennik [data-przelacznik="cennik"]{display:revert!important}
.w-lista{margin:0 0 1.1em;padding-left:1.2em;display:grid;gap:8px}
.w-lista li{font-size:1.04rem;line-height:1.5}

/* --- okno wyceny: bez przewijania, zielone „Dalej”, licznik kroków na dole ---
   Ekran ma się mieścić bez przewijania: treści są krótkie, a co się nie
   mieści, idzie na osobny ekran. Przewijanie zostaje tylko jako siatka
   bezpieczeństwa dla bardzo niskich okien. */
.w-srodek{padding:clamp(18px,4vh,40px) 22px 10px;overscroll-behavior:contain}
.w-pytanie{font-size:clamp(1.65rem,6.6vw,2.15rem);margin-bottom:.4em}
.w-podp{margin-bottom:1em;font-size:1rem}
.w-info p{font-size:1.05rem;line-height:1.55;margin:0 0 .85em}
.w-lista{gap:10px;margin-bottom:1em}
.w-gesto{gap:8px}
.w-pole .w-gesto label{padding:13px 14px 13px 48px;font-size:1.02rem}
.w-dol{display:block;padding:10px 16px;padding-bottom:calc(12px + env(safe-area-inset-bottom,0px))}
.w-kroki{display:flex;gap:3px;list-style:none;margin:0 0 10px;padding:0}
.w-kroki li{flex:1;min-width:0}
.w-kroki button{display:block;width:100%;height:30px;padding:0;border:0;border-radius:5px;cursor:pointer;
  background:#E3E6EA;color:#5C6773;font:600 .7rem/1 "IBM Plex Mono",monospace;font-variant-numeric:tabular-nums}
.w-kroki button.zal{background:#17803A;color:#fff}
.w-kroki button.biez{outline:2.5px solid var(--asfalt);outline-offset:1px}
.w-kroki button:disabled{opacity:.45;cursor:not-allowed}
.w-przyciski{display:flex;gap:10px}
.w-wstecz:disabled{opacity:.35;cursor:default}
.w-dalej,.w-dalej.w-wyslij{background:#17803A;color:#fff;font-weight:700;font-size:1.12rem;
  box-shadow:0 6px 14px -8px rgba(23,128,58,.9)}
.w-dalej:hover{background:#126A30}
@media (max-height:700px){
  .w-srodek{padding-top:16px}
  .w-pytanie{font-size:1.5rem}
  .w-info p,.w-lista li{font-size:.98rem;margin-bottom:.6em}
  .w-pole .wybor label{padding:13px 14px 13px 50px}
  .w-pole .w-gesto label{padding:10px 12px 10px 46px;font-size:.98rem}
  .w-input{min-height:50px;padding:11px 14px}
  .w-kroki button{height:26px}
  .w-wstecz,.w-dalej{min-height:50px}
}
/* górny pasek okna zawsze w jednej linii — nie zjada wysokości */
.w-tytul,.w-licznik{white-space:nowrap}
@media (max-width:380px){ .w-licznik{display:none} .w-zamknij{margin-left:auto} }   /* na wąskim ekranie licznik jest i tak na dole */
/* niskie ekrany (iPhone SE, mały Android, telefon z dużą czcionką) */
@media (max-height:620px){
  .w-gora{padding-top:8px;padding-bottom:6px}
  .w-srodek{padding:10px 18px 6px}
  .w-pytanie{font-size:1.32rem;margin-bottom:.3em}
  .w-podp{font-size:.92rem;margin-bottom:.6em}
  .w-info p,.w-lista li{font-size:.93rem;line-height:1.45;margin-bottom:.45em}
  .w-lista{gap:6px}
  .w-gesto{gap:6px}
  .w-pole .wybor label{padding:10px 12px 10px 46px}
  .w-pole .w-gesto label{padding:8px 12px 8px 44px;font-size:.94rem}
  .w-input{min-height:46px}
  .w-dol{padding-top:8px}
  .w-kroki{margin-bottom:8px}
  .w-kroki button{height:22px}
  .w-wstecz,.w-dalej{min-height:46px}
}
@media (max-width:360px){ .w-kroki{gap:2px} .w-kroki button{font-size:.6rem;letter-spacing:-.05em;border-radius:4px} }
/* niewypełnione kroki: wyraźnie szare, nie wyblakłe */
.w-kroki button:disabled{opacity:1;background:#E3E6EA;color:#8A949E}
/* nagłówek grupy nad listą wyborów (DOKUMENTACJA / BUDOWA) — w kontrze, pomarańczowy:
   to najważniejszy wybór w formularzu, ma się rzucać w oczy */
.w-grupa{margin:0 0 12px;padding:10px 12px;border-radius:8px;background:#D9590B;color:#fff;
  text-align:center;font:700 1.3rem/1.1 "Barlow Condensed","Arial Narrow",Arial,sans-serif;
  letter-spacing:.12em;text-transform:uppercase}
@media (max-height:620px){ .w-grupa{margin-bottom:6px;padding:5px 10px;font-size:1.12rem} }

/* --- dolne menu w kolorze marki (12.10): tło = 30% żółtego znaku na bieli,
   bieżąca/kliknięta pozycja = pełny żółty znak z ciemnym tekstem (w kontrze) --- */
.dock{background:#FBE7BC;border-top-color:#EFD08A}
.dock-poz{color:#4A5562}
.dock-nr{color:#8A5A00}
.dock-poz.biezacy,.dock-poz:active{background:var(--znak);color:var(--asfalt)}
.dock-poz.biezacy .dock-nr,.dock-poz:active .dock-nr{color:var(--asfalt)}
.dock-poz.biezacy::before{display:none}
.dock-zamow.biezacy,.dock-zamow:active{background:none}      /* środek ma własne koło */
.dock-koło{border-color:#FBE7BC}
@media (min-width:860px){
  .dock{border-color:#EFD08A;overflow:visible}
  .dock-poz:first-child{border-radius:15px 0 0 15px}
  .dock-poz:last-child{border-radius:0 15px 15px 0}
}

/* --- „Start” w dolnym pasku: koło tej samej wielkości co „Sprawdź koszt”, czarne z białym domkiem --- */
.dock{grid-template-columns:minmax(0,1fr) minmax(0,1fr) 66px 66px minmax(0,1fr) minmax(0,1fr)}
.dock-start .dock-koło{background:var(--asfalt);color:#fff}
.dock-start.biezacy .dock-w{font-weight:700}
@media (max-width:360px){ .dock{grid-template-columns:minmax(0,1fr) minmax(0,1fr) 57px 57px minmax(0,1fr) minmax(0,1fr)} .dock-poz{padding-left:1px;padding-right:1px} .dock-w{font-size:.62rem} }