/* ==========================================================================
   EDISON PRO CLEAN — system stylów
   Sekcje: 1 tokeny · 2 reset · 3 typografia · 4 layout · 5 komponenty · 6 responsive
   ========================================================================== */

/* ---------- 0. KROJE PISMA (własny hosting, WOFF2) ----------
   Dwa kroje zmienne, pobrane z repozytorium Google Fonts i przycięte
   do pełnego zakresu łacińskiego: podstawowy, Latin Extended-A i -B,
   interpunkcja i waluty. Komplet polskich znaków — ą ć ę ł ń ó ś ź ż
   i wersalikami — sprawdzony w pliku wynikowym, nie założony.

   Pliki leżą na naszym serwerze. Żadnego CDN Google: przy ładowaniu
   z fonts.gstatic.com adres IP odwiedzającego trafia do Google przy
   każdym wejściu, jeszcze zanim ktokolwiek kliknie w baner zgód.
   Zbudowaliśmy cały mechanizm zgód po to, żeby tak się nie działo.

   Brak unicode-range jest celowy. Zakres wypisuje się wtedy, gdy font
   jest pocięty na kilka plików i przeglądarka ma wybrać właściwy.
   Tutaj mamy jeden plik na krój z kompletem potrzebnych znaków —
   niepełna lista zakresów mogłaby tylko wyłączyć część liter.

   Ścieżka jest WZGLĘDNA wobec tego arkusza. Sprawdzone, nie przepisane:
   arkusz leży w assets/main.css, fonty w assets/fonts/, więc poprawny
   zapis to fonts/… — nie ../fonts/…, bo to wyprowadziłoby o katalog za wysoko. */
@font-face{
  font-family:'Manrope';
  src:url('fonts/Manrope-Variable.woff2') format('woff2');
  font-style:normal;font-weight:200 800;font-display:swap}
@font-face{
  font-family:'Inter';
  src:url('fonts/Inter-Variable.woff2') format('woff2');
  font-style:normal;font-weight:100 900;font-display:swap}

/* ---------- 1. TOKENY ---------- */
:root{
  --ink-900:#070A08; --ink-850:#0B0F0C; --ink-800:#0D120F; --ink-700:#161D18;
  --paper:#fff; --paper-2:#F5F7F4; --paper-3:#EAEFE8;
  --line:#E3E9E1; --line-dark:rgba(255,255,255,.10);

  /* Kolory marki wzięte wprost z logo: zieleń tarczy i złoto napisu.
     Nazwy zmiennych (--blue-*) zostały, żeby nie przepisywać całego arkusza. */
  --blue-700:#0B6B00; --blue-600:#177F05; --blue-500:#2FA80E; --blue-400:#46C523;
  --cyan-400:#FFD24D;
  --gold:#F0C000;

  --fg:#101A15; --fg-2:#3C4A42; --fg-3:#5A6960;
  /* Tekst na ciemnym tle. Poprzednie wartości miały niebieskawy odcień
     po dawnej, niebieskiej palecie — na zielono-czarnym tle wyglądały brudno
     i za ciemno. Teraz neutralne, z wyższym kontrastem:
     17,4:1 / 12,6:1 / 7,5:1 — wszystkie w AAA. */
  /* Tekst na ciemnym tle. Wartości podniesione: najsłabszy odcień miał
     poprzednio 7,5:1, ale używaliśmy go do podpisów o rozmiarze 13-15 px,
     gdzie liczy się każdy punkt kontrastu. Teraz najniższy to --fg-inv-3
     i nadal mieści się w AAA. Żaden z nich nie jest przezroczysty:
     opacity pod tekstem użytkowym psuje kontrast nieprzewidywalnie,
     bo zależy od tego, co akurat jest pod spodem. */
  --fg-inv:#F5F7FA; --fg-inv-2:#D7DEE6; --fg-inv-3:#B4BFCC;

  /* Biały tekst i białe ikony leżą wprost na tym gradiencie (numery kroków,
     pigułka „Łódź — wszystkie dzielnice"). Jasny koniec dawał kontrast 3,1:1,
     czyli poniżej progu czytelności — stąd ciemniejszy wariant. */
  --grad-brand:linear-gradient(135deg,#0B6B00 0%,#177F05 100%);
  --grad-dark:radial-gradient(125% 95% at 12% 0%,#1C2620 0%,#0D120F 52%,#070A08 100%);

  --r-sm:8px; --r:14px; --r-lg:20px; --r-xl:28px; --r-full:999px;
  --sh-1:0 1px 2px rgba(10,20,14,.06),0 4px 12px rgba(10,20,14,.05);
  --sh-2:0 2px 6px rgba(10,20,14,.07),0 16px 40px rgba(10,20,14,.09);
  --sh-blue:0 8px 26px rgba(23,127,5,.34);

  --wrap:1180px; --gut:20px;
  --s-1:4px; --s-2:8px; --s-3:12px; --s-4:16px; --s-5:24px;
  --s-6:32px; --s-7:48px; --s-8:64px; --s-9:88px; --s-10:120px;

  --font-system:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",
         "Noto Sans",Arial,"Apple Color Emoji","Segoe UI Emoji",sans-serif;
  /* Dwie rodziny i ani jednej więcej.
     Inter do czytania (tekst, formularze, podpisy), Manrope do nagłówków,
     nawigacji i przycisków. Oba mają komplet polskich znaków.
     Arial na końcu stosu to zapas na wypadek, gdyby plik się nie wczytał —
     font-display:swap i tak pokaże tekst od pierwszej klatki. */
  --font-body:'Inter',Arial,var(--font-system);
  --font-display:'Manrope',Arial,var(--font-system);
  /* --font-heading to ta sama wartość pod drugą nazwą. Arkusz w kilkudziesięciu
     miejscach pyta o --font-display; przemianowanie wymagałoby ruszenia ich
     wszystkich bez żadnego zysku, a każda taka zmiana to okazja do pomyłki. */
  --font-heading:var(--font-display);
  --font:var(--font-body);   /* zgodność wstecz — stare reguły pytają o --font */
  --measure:66ch;   /* maksymalna długość wiersza tekstu ciągłego */
}

/* ---------- 2. RESET ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}}
body{margin:0;font-family:var(--font-body);font-size:18px;line-height:1.65;font-weight:400;
  color:var(--fg);background:var(--paper);text-rendering:optimizeLegibility;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;overflow-x:hidden}
/* Pola formularzy biorą krój tekstowy. Bez tego przeglądarka wstawia
   własny systemowy i formularz wygląda jak wklejony z innej strony. */
button,input,select,textarea{font-family:var(--font-body)}
img,svg,video{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}
ul,ol{margin:0;padding:0;list-style:none}
h1,h2,h3,h4,p{margin:0}
:focus-visible{outline:3px solid var(--blue-500);outline-offset:2px;border-radius:4px}

/* ---------- 3. TYPOGRAFIA ---------- */
/* 750 zamiast 800: krój zmienny pozwala na dowolną wartość pośrednią,
   a przy 800 polskie znaki diakrytyczne (ą ę ł) zlewały się z literą.
   text-wrap:balance wyrównuje długość wierszy w nagłówkach — koniec
   z jednym samotnym wyrazem w ostatniej linii. */
h1,h2,h3,h4{font-family:var(--font-display);font-weight:750;line-height:1.12;
  letter-spacing:-.022em;text-wrap:balance}
h2>svg,h3>svg,h4>svg,p>svg{width:1.1em;height:1.1em;display:inline-block;vertical-align:-.14em;
  color:var(--blue-600);flex:none}
.on-dark h2>svg,.on-dark h3>svg{color:var(--cyan-400)}
/* 36 px na telefonie, 56 px na desktopie. Górna granica to 56, a nie 64:
   nagłówki stron usług mają po kilka słów („Pranie kanap i narożników — Łódź
   i okolice") i przy 64 px zajmowały trzy wiersze, spychając przyciski poniżej
   pierwszego ekranu. */
h1{font-size:clamp(2.25rem,1.52rem + 2.9vw,3.5rem);line-height:1.08;letter-spacing:-.028em}
/* 30-34 px na telefonie, 40-48 px na desktopie */
/* 34 px na telefonie, 44 px na desktopie. Specyfikacja mówiła o 56 px,
   ale H1 ma maksymalnie 56 — przy równych rozmiarach znika hierarchia
   i czytelnik przestaje odróżniać tytuł strony od tytułu sekcji. */
h2{font-size:clamp(2.125rem,1.7rem + 1.7vw,2.75rem);line-height:1.08;letter-spacing:-.025em}
h3{font-size:clamp(1.375rem,1.2rem + .7vw,1.75rem);line-height:1.15;letter-spacing:-.018em}
h4{font-size:1.19rem;line-height:1.3}
.lead{font-size:clamp(1.0625rem,1rem + .4vw,1.3125rem);line-height:1.55;color:var(--fg-2);
  max-width:680px}
/* Podłoga czytelności: 16 px i 15 px. Wcześniej 14,7 i 13,1 px —
   to są podpisy pod zdjęciami i noty pod przyciskami, czyli miejsca,
   gdzie klient szuka warunków. Nieczytelny warunek to warunek,
   którego klient nie zna, a potem jest zaskoczony na miejscu. */
.small{font-size:1rem;line-height:1.55}.tiny{font-size:.94rem;line-height:1.5}
/* Tekst ciągły nie rozjeżdża się na szeroki wiersz — oko gubi początek linii. */
p,li,.ans,blockquote{max-width:var(--measure)}
.center p,.center li{margin-inline:auto}
/* Miejsca, w których ograniczenie szerokości przeszkadza układowi */
.form p,.ftr p,.ptab td,.ptab th,.rev q,.trust-i span,.hero-note,
.checks span,.pcard span,.svc p,.bc li{max-width:none}
/* Inter jest wyraźnie węższy od kroju systemowego, którego używaliśmy wcześniej:
   w tej samej szerokości kolumny mieści się o kilkanaście znaków więcej.
   Wiersze dobiły do 83 znaków, a powyżej mniej więcej siedemdziesięciu oko
   gubi początek następnej linii i czyta się wolniej. Górna granica dotyczy
   tylko akapitów, nie komórek tabel ani okruszków — tam łamanie szkodzi. */
.checks span,.svc p,.pcard span,.hero-note,.form p,.ftr p{max-width:70ch}
/* Akapity w kartach i w wyniku kalkulatora: te same 70 znaków.
   Leżą w kontenerach bez ograniczenia szerokości, więc na dużym
   ekranie rozciągały się na całą kolumnę. */
.card p,.card li,.calc-out p,.calc-out li,.cta-band p{max-width:70ch}
/* Noty i drobne objaśnienia — ten sam limit. Są rozsiane po wielu
   komponentach, więc zamiast wyliczać każdy z osobna ograniczamy klasę. */
.small,.tiny,.legal-list li{max-width:70ch}
.muted{color:var(--fg-3)}
.on-dark .muted,.on-dark .lead{color:var(--fg-inv-2)}
strong,b{font-weight:600}
.eyebrow{font-family:var(--font-display);font-size:.79rem;font-weight:600;letter-spacing:.11em;
  text-transform:uppercase;color:var(--blue-600)}
.on-dark .eyebrow{color:var(--cyan-400)}
.grad-text{background:linear-gradient(135deg,#FFD24D 0%,#F0A800 100%);-webkit-background-clip:text;background-clip:text;color:transparent}


/* ---------- 3b. KRÓJ NAGŁÓWKOWY W INTERFEJSIE ----------
   Liczby, etykiety i elementy sterujące — krój nagłówkowy, grubość 600–700:
   innych grubości nie wgrywamy, żeby przeglądarka nie dorabiała ich sztucznie. */
.logo span small,.trust-i b,.rating b,.svc-price b,.price-card span,.pcard-t,.pcard-p b,
.pcard-go,.calc-tab,.chip,.calc-sum .val,.calc-sum .lbl,.trust-score,.rev-score-num,
.ftr-h,.ptab th,.ptab td:last-child,.mnav a,.mnav-more summary,.mnav-label,.sticky a,
.hdr-phone,.step h3,.field label,.calc-opt-label,.rev footer b,.faq summary,.calc-dot,
.rev-count,.areas span,.ba-tag,.pill,.hero-note b,.form-note b{font-family:var(--font-display)}
.trust-score,.rev-score-num,.calc-sum .val,.pcard-p b,.svc-price b,.price-card span,
.rating b,.calc-dot{font-weight:700}
/* Cyfry o równej szerokości — kwoty w kalkulatorze nie „skaczą" przy przeliczaniu. */
.calc-sum .val,.trust-score,.rev-score-num,.price-card span,.svc-price b,.pcard-p b,
.ptab td:last-child{font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1}

/* ---------- 4. LAYOUT ---------- */
.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gut)}
.wrap-narrow{max-width:820px}
.sec{padding-block:var(--s-9)}
.sec-sm{padding-block:var(--s-8)}
.sec-tight{padding-block:var(--s-7)}
.on-dark{background:var(--grad-dark);color:var(--fg-inv)}
/* Druga, płaska odmiana ciemnego tła. Cała strona na jednym gradiencie
   zlewa się w jedną plamę i klient przestaje widzieć, gdzie kończy się
   jedna sekcja, a zaczyna druga. Naprzemienność zostaje — zmienia się
   tylko z „ciemne / jasne" na „ciemne / trochę jaśniejsze ciemne". */
.on-dark-2{background:var(--ink-850);color:var(--fg-inv)}
.on-paper2{background:var(--paper-2)}

/* Strona jest ciemna domyślnie — także tło pod sekcjami i obszar
   przewijania poza nimi (na iPhonie widać go przy „gumowym" scrollu). */
body{background:var(--ink-900)}
.grid{display:grid;gap:var(--s-5)}
.g2{grid-template-columns:repeat(2,1fr)}
.g3{grid-template-columns:repeat(3,1fr)}
.g4{grid-template-columns:repeat(4,1fr)}
.stack>*+*{margin-top:var(--s-4)}
.center{text-align:center}
.sec-head{max-width:720px;margin-bottom:var(--s-7)}
.sec-head.center{margin-inline:auto}
.sec-head .eyebrow{display:block;margin-bottom:var(--s-3)}
.sec-head p{margin-top:var(--s-4)}
.skip{position:absolute;left:-9999px}
.skip:focus{left:12px;top:12px;z-index:999;background:#fff;padding:10px 16px;border-radius:8px}

/* ---------- 5. KOMPONENTY ---------- */

/* Przyciski */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;
  padding:15px 26px;border-radius:var(--r-full);font-family:var(--font-heading);
  font-weight:700;font-size:1.0625rem;min-height:48px;letter-spacing:-.005em;
  border:1px solid transparent;cursor:pointer;transition:transform .16s,box-shadow .16s,background .16s,border-color .16s;
  text-align:center;line-height:1.15}
.btn svg{width:20px;height:20px;flex:none}
.btn:hover{transform:translateY(-1px)}
.btn-wa{background:#25D366;color:#04321A;box-shadow:0 8px 26px rgba(37,211,102,.34)}
.btn-wa:hover{background:#1FBF5B}
.btn-primary{background:linear-gradient(135deg,#FFD24D 0%,#F0A800 100%);color:#2A1E00;
  box-shadow:0 8px 26px rgba(240,168,0,.30);font-weight:700}
.btn-primary svg{color:#2A1E00}
.btn-primary:hover{background:linear-gradient(135deg,#FFDD70 0%,#FFB81A 100%)}
.btn-ghost{background:rgba(255,255,255,.07);color:var(--fg-inv);border-color:rgba(255,255,255,.22);
  backdrop-filter:blur(10px)}
.btn-ghost:hover{background:rgba(255,255,255,.13)}
.btn-outline{background:#fff;color:var(--fg);border-color:var(--line);box-shadow:var(--sh-1)}
.btn-outline:hover{border-color:var(--blue-400)}
.btn-lg{padding:17px 30px;font-size:1.06rem}
.btn-sm{padding:11px 18px;font-size:.92rem}
.btn-block{width:100%}
.btn-row{display:flex;flex-wrap:wrap;gap:var(--s-3)}

/* Karty */
.card{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);
  padding:var(--s-6);box-shadow:var(--sh-1);transition:box-shadow .2s,transform .2s,border-color .2s}
.card-link:hover{box-shadow:var(--sh-2);transform:translateY(-3px);border-color:var(--blue-400)}
.card-glass{background:rgba(255,255,255,.055);border:1px solid var(--line-dark);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);box-shadow:none;color:var(--fg-inv)}
.card-glass:hover{background:rgba(255,255,255,.085);border-color:rgba(70,197,35,.45)}
.card-icon{width:52px;height:52px;border-radius:15px;display:grid;place-items:center;
  background:linear-gradient(135deg,rgba(47,168,14,.15),rgba(240,192,0,.15));
  color:var(--blue-600);margin-bottom:var(--s-4)}
.card-icon svg{width:27px;height:27px}
.on-dark .card-icon{background:rgba(70,197,35,.18);color:var(--cyan-400)}

/* Badge / pill */
.pill{display:inline-flex;align-items:center;gap:7px;padding:7px 14px;border-radius:var(--r-full);
  font-size:.83rem;font-weight:600;background:var(--paper-3);color:var(--fg-2)}
.pill-glass{background:rgba(255,255,255,.09);border:1px solid rgba(255,255,255,.16);color:var(--fg-inv-2)}
.pill svg{width:15px;height:15px}

/* Ocena Google */
.rating{display:inline-flex;align-items:center;gap:9px;padding:8px 15px;border-radius:var(--r-full);
  background:rgba(255,255,255,.09);border:1px solid rgba(255,255,255,.17);backdrop-filter:blur(10px);
  font-weight:600;font-size:.93rem}
.rating--light{background:#fff;border-color:var(--line);box-shadow:var(--sh-1);color:var(--fg)}
.rating b{font-size:1.06rem;font-weight:700}
.rating .stars{display:inline-flex;gap:2px;color:var(--gold)}
.rating .stars svg{width:15px;height:15px}
.rating small{color:var(--fg-inv-2);font-weight:500}
.rating--light small{color:var(--fg-3)}

/* Header */
.hdr{position:sticky;top:0;z-index:60;background:rgba(7,10,8,.86);
  backdrop-filter:saturate(160%) blur(14px);-webkit-backdrop-filter:saturate(160%) blur(14px);
  border-bottom:1px solid rgba(255,255,255,.09);color:var(--fg-inv)}
.hdr-in{display:flex;align-items:center;gap:var(--s-5);height:70px}
.logo{display:flex;align-items:center;gap:11px;font-family:var(--font-display);font-weight:600;
  letter-spacing:-.02em;font-size:1.05rem;flex:none}
.logo-mark{width:62px;height:auto;flex:none;display:block;
  filter:drop-shadow(0 3px 8px rgba(0,0,0,.45))}
.logo span small{display:block;font-size:.63rem;letter-spacing:.16em;font-weight:600;
  color:var(--fg-inv-3);text-transform:uppercase;margin-top:-3px}
.nav{display:flex;align-items:center;gap:4px;margin-left:auto}
/* Menu: 17 px, grubość 600, wysokość celu 44 px (minimum dla palca).
   Krój tekstowy, nie nagłówkowy — Manrope w małych rozmiarach ma za duży
   kontrast kresek i w pasku nawigacji robi się nerwowo.
   Markery list zdejmujemy TYLKO w obrębie nagłówka: te same reguły puszczone
   globalnie zabrały punktory z list usług, FAQ i stopki. */
.hdr nav ul,.hdr nav li{list-style:none;margin:0;padding:0}
.hdr nav li::marker{content:""}
.hdr nav li::before,.hdr nav li::after{content:none;display:none}
.nav a{white-space:nowrap;padding:0 13px;border-radius:10px;font-family:var(--font-heading);
  font-size:1.0625rem;font-weight:600;letter-spacing:-.01em;line-height:1;
  min-height:44px;display:inline-flex;align-items:center;color:var(--fg-inv-2);
  transition:color .15s,background .15s}
.nav a:hover,.nav a[aria-current]{color:#fff;background:rgba(255,255,255,.09)}
.hdr-cta{display:flex;align-items:center;gap:10px;flex:none}
.hdr-phone{display:inline-flex;align-items:center;gap:9px;font-weight:600;white-space:nowrap}
.hdr-phone svg{width:20px;height:20px;color:var(--cyan-400);flex:none}
/* Telefon dwuwierszowo. Sam numer bez podpisu nie mówi, co się stanie po
   kliknięciu — zwłaszcza na desktopie, gdzie „kliknięcie w numer" nie jest
   odruchem. Etykieta to tłumaczy, a numer rośnie na tyle, żeby dało się go
   przepisać wzrokiem na telefon komórkowy. */
.hdr-phone-txt{display:flex;flex-direction:column;align-items:flex-start;line-height:1.1}
.hdr-phone-txt small{font-size:10.5px;text-transform:uppercase;letter-spacing:.13em;
  font-weight:600;color:var(--fg-inv-3)}
.hdr-phone-txt b{font-size:19px;font-weight:700;letter-spacing:-.01em;color:var(--fg-inv);
  font-family:var(--font-display);font-variant-numeric:tabular-nums}
.hdr-phone:hover .hdr-phone-txt b{color:var(--gold)}
.burger{display:none;width:44px;height:44px;border-radius:12px;background:rgba(255,255,255,.09);
  border:1px solid rgba(255,255,255,.15);color:#fff;align-items:center;justify-content:center;margin-left:auto}
.burger svg{width:22px;height:22px}
/* Panel menu mobilnego.
   Wysokość podana wprost, nie tylko przez `inset`. W motywie potomnym Astry
   nagłówek siedzi wewnątrz kontenerów motywu nadrzędnego; jeśli któryś
   z nich dostanie `transform`, `filter` albo `contain`, to `position:fixed`
   przestaje się odnosić do okna i panel kurczy się do wysokości treści —
   wtedy spod menu widać stronę, zamiast pełnego ciemnego ekranu.
   `height` plus zapas `background` sprawiają, że nawet w tym wypadku
   panel zasłania to, co pod nim. */
.mnav{display:none;position:fixed;inset:70px 0 0;z-index:95;background:var(--ink-900);
  height:calc(100vh - 70px);height:calc(100dvh - 70px);
  padding:var(--s-5) var(--gut) 120px;overflow-y:auto;-webkit-overflow-scrolling:touch}
.mnav.open{display:block}
.mnav a{display:block;padding:15px 4px;border-bottom:1px solid rgba(255,255,255,.08);
  font-size:1.06rem;font-weight:600;color:var(--fg-inv)}
.mnav .sub a{padding-left:16px;font-size:.97rem;font-weight:500;color:var(--fg-inv-2)}
body.nav-open{overflow:hidden}

/* Hero */
.hero{position:relative;padding-block:var(--s-8) var(--s-8);overflow:hidden}
.hero::after{content:"";position:absolute;inset:auto -10% -60% 40%;height:70%;
  background:radial-gradient(closest-side,rgba(240,192,0,.16),transparent 72%);pointer-events:none}
.hero-in{position:relative;z-index:1;display:grid;grid-template-columns:1.28fr .82fr;
  gap:var(--s-7);align-items:center}
.hero h1{margin-bottom:var(--s-4)}
.hero .lead{max-width:56ch}
.hero-cta{margin-top:var(--s-6)}
.hero-note{margin-top:var(--s-4);font-size:1rem;line-height:1.55;
  color:var(--fg-inv-2);max-width:56ch}
.hero-badges{display:flex;flex-wrap:wrap;gap:9px;margin-top:var(--s-6)}
.hero-visual{position:relative}
.hero-card{border-radius:var(--r-xl);overflow:hidden;border:1px solid rgba(255,255,255,.13);
  background:rgba(255,255,255,.05);backdrop-filter:blur(12px);aspect-ratio:4/3;
  display:grid;place-items:center;text-align:center;padding:var(--s-6);color:var(--fg-inv-3)}
.hero-card img{width:100%;height:100%;object-fit:cover}

/* Pasek zaufania — cztery nieruchome pozycje.
   Animowana pętla poszła do kosza: wymuszała szerokość ponad ekran
   (stąd poziome przewijanie na 1280 px) i nie dawała się przeczytać. */
.trust{border-top:1px solid rgba(255,255,255,.09);border-bottom:1px solid rgba(255,255,255,.09);
  padding-block:var(--s-5)}
.trust-row{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s-5) var(--s-6);align-items:start}
.trust-i{display:flex;align-items:flex-start;gap:13px;font-size:.92rem;color:var(--fg-inv-2);
  line-height:1.45;min-width:0}
.trust-i svg{width:26px;height:26px;color:var(--cyan-400);flex:none;margin-top:1px}
.trust-i b{display:block;color:#fff;font-weight:700;font-size:1.02rem;letter-spacing:-.01em;
  margin-bottom:3px;line-height:1.25}
@media (max-width:900px){ .trust-row{grid-template-columns:repeat(2,1fr)} }
@media (max-width:520px){ .trust-row{grid-template-columns:1fr;gap:var(--s-4)} }

/* Karty usług */
.svc{display:flex;flex-direction:column;height:100%}
.svc h3{margin-bottom:var(--s-2)}
.svc p{color:var(--fg-2);font-size:.96rem;flex:1}
.svc-price{margin-top:var(--s-4);padding-top:var(--s-4);border-top:1px solid var(--line);
  display:flex;align-items:baseline;justify-content:space-between;gap:10px}
.svc-price b{font-size:1.3rem;font-weight:700;color:var(--blue-700)}
.svc-price .more{font-size:.9rem;font-weight:600;color:var(--blue-600);display:inline-flex;align-items:center;gap:5px}
.svc-price .more svg{width:16px;height:16px;transition:transform .18s}
.card-link:hover .more svg{transform:translateX(3px)}
.svc-list{display:flex;flex-wrap:wrap;gap:10px;margin-top:var(--s-5)}
.svc-list a{display:inline-flex;align-items:center;gap:7px;padding:10px 16px;border-radius:var(--r-full);
  background:#fff;border:1px solid var(--line);font-size:.92rem;font-weight:600;box-shadow:var(--sh-1);
  transition:border-color .15s,transform .15s}
.svc-list a:hover{border-color:var(--blue-400);transform:translateY(-1px)}
.svc-list svg{width:17px;height:17px;color:var(--blue-600)}

/* Kroki */
.steps{counter-reset:s;display:grid;gap:var(--s-5)}
.step{position:relative;padding-left:64px;counter-increment:s}
.step::before{content:counter(s);position:absolute;left:0;top:0;width:44px;height:44px;border-radius:14px;
  background:var(--grad-brand);color:#fff;display:grid;place-items:center;font-weight:700;font-size:1.05rem;
  box-shadow:var(--sh-blue)}
.step h3{margin-bottom:5px;font-size:1.08rem}
.step p{color:var(--fg-2);font-size:.96rem}
.on-dark .step p{color:var(--fg-inv-2)}

/* Lista z checkami */
.checks{display:grid;gap:12px}
.checks li{display:flex;gap:12px;align-items:flex-start;font-size:.99rem}
.checks svg{width:21px;height:21px;color:var(--blue-600);flex:none;margin-top:2px}
.on-dark .checks svg{color:var(--cyan-400)}

/* Przed / po */
.ba{border-radius:var(--r-lg);overflow:hidden;border:1px solid var(--line);background:#fff;box-shadow:var(--sh-1)}
.ba-imgs{position:relative;aspect-ratio:4/3;background:var(--paper-3);overflow:hidden;
  --pos:50%;touch-action:pan-y;cursor:grab;user-select:none;-webkit-user-select:none}
.ba-imgs:active,.ba-imgs.is-dragging{cursor:grabbing}
/* Obrazki nie mogą dać się przeciągnąć — inaczej przeglądarka uruchamia własne
   przeciąganie pliku i przejmuje wskaźnik w połowie ruchu suwaka. */
.ba-imgs img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  -webkit-user-drag:none;user-select:none;pointer-events:none}
.ba-imgs .after{clip-path:inset(0 0 0 var(--pos));will-change:clip-path}
/* Kliknięcie w bok płynnie przesuwa podział; podczas przeciągania animacja
   jest wyłączona, żeby uchwyt nadążał za palcem. */
.ba-imgs .after,.ba-handle{transition:clip-path .22s cubic-bezier(.22,.61,.36,1),
  left .22s cubic-bezier(.22,.61,.36,1)}
.ba-imgs.is-dragging .after,.ba-imgs.is-dragging .ba-handle{transition:none}
@media (prefers-reduced-motion:reduce){
  .ba-imgs .after,.ba-handle{transition:none}
}
.ba-ph{position:absolute;inset:0;display:grid;place-items:center;color:var(--fg-3);font-size:.88rem;
  background:repeating-linear-gradient(45deg,#EDF2E9,#EDF2E9 10px,#E4EAE0 10px,#E4EAE0 20px)}
.ba-handle{position:absolute;top:0;bottom:0;left:var(--pos);width:3px;background:#fff;
  box-shadow:0 0 0 1px rgba(0,0,0,.18);pointer-events:none}
/* Uchwyt ze strzałkami w obie strony — sam biały krążek nie mówi,
   że można go złapać i pociągnąć. */
.ba-handle::after{content:"";position:absolute;top:50%;left:50%;translate:-50% -50%;
  width:46px;height:46px;border-radius:50%;background:#fff;box-shadow:var(--sh-2);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23101A15' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 6l-5 6 5 6M15 6l5 6-5 6'/%3E%3C/svg%3E");
  background-size:24px 24px;background-position:center;background-repeat:no-repeat;
  transition:transform .16s,box-shadow .16s}
.ba-imgs:hover .ba-handle::after{transform:translate(-50%,-50%) scale(1.06)}
.ba-imgs.is-dragging .ba-handle::after{transform:translate(-50%,-50%) scale(.95)}
.ba-imgs:focus-visible{outline:3px solid var(--blue-500);outline-offset:-3px}

/* Jednorazowa podpowiedź przy pierwszym wejściu w pole widzenia:
   podział przejeżdża w bok i wraca. Bez tego część osób nie zauważa,
   że zdjęcie w ogóle da się ruszyć. */
.ba-imgs.is-hinting .after{animation:ba-hint 1.7s cubic-bezier(.45,.05,.55,.95)}
.ba-imgs.is-hinting .ba-handle{animation:ba-hint-handle 1.7s cubic-bezier(.45,.05,.55,.95)}
@keyframes ba-hint{
  0%{clip-path:inset(0 0 0 50%)} 34%{clip-path:inset(0 0 0 74%)}
  70%{clip-path:inset(0 0 0 30%)} 100%{clip-path:inset(0 0 0 50%)}}
@keyframes ba-hint-handle{
  0%{left:50%} 34%{left:74%} 70%{left:30%} 100%{left:50%}}
@media (prefers-reduced-motion:reduce){
  .ba-imgs.is-hinting .after,.ba-imgs.is-hinting .ba-handle{animation:none}
}
.ba-tag{position:absolute;top:12px;padding:5px 11px;border-radius:var(--r-full);font-size:.74rem;
  font-weight:600;letter-spacing:.05em;text-transform:uppercase;background:rgba(7,10,8,.76);color:#fff;
  backdrop-filter:blur(6px);z-index:2}
.ba-tag.l{left:12px}.ba-tag.r{right:12px;background:var(--blue-600)}
.ba-body{padding:var(--s-5)}
.ba-body h4{margin-bottom:5px}
.ba-body p{font-size:1rem;line-height:1.5;color:var(--fg-2);max-width:none;
  overflow:visible;display:block;-webkit-line-clamp:none}
.on-dark .ba-body p{color:var(--fg-inv-2)}

/* Kalkulator */
.calc{background:#fff;border:1px solid var(--line);border-radius:var(--r-xl);box-shadow:var(--sh-2);overflow:hidden}
.calc-tabs{display:flex;gap:4px;padding:10px;background:var(--paper-2);border-bottom:1px solid var(--line);
  overflow-x:auto;scrollbar-width:none}
.calc-tabs::-webkit-scrollbar{display:none}
.calc-tab{display:inline-flex;align-items:center;gap:8px;padding:11px 17px;border-radius:var(--r-full);
  border:1px solid transparent;background:transparent;font-weight:600;font-size:.94rem;white-space:nowrap;
  cursor:pointer;color:var(--fg-2)}
.calc-tab svg{width:19px;height:19px}
.calc-tab[aria-selected="true"]{background:#fff;border-color:var(--line);color:var(--blue-700);box-shadow:var(--sh-1)}
.calc-body{padding:var(--s-6)}
.calc-rows{display:grid;gap:10px}
.calc-row{display:flex;align-items:center;gap:var(--s-4);padding:13px 15px;border:1px solid var(--line);
  border-radius:var(--r);background:var(--paper-2);transition:border-color .15s,background .15s}
.calc-row.on{border-color:var(--blue-400);background:#fff;box-shadow:var(--sh-1)}
.calc-row .nm{flex:1;font-size:.96rem;font-weight:600}
.calc-row .pr{font-size:.87rem;color:var(--fg-3);white-space:nowrap}
.qty{display:inline-flex;align-items:center;gap:0;border:1px solid var(--line);border-radius:var(--r-full);
  background:#fff;flex:none}
.qty button{width:36px;height:36px;border:0;background:transparent;font-size:1.15rem;font-weight:600;
  color:var(--blue-600);cursor:pointer;border-radius:var(--r-full)}
.qty button:hover{background:var(--paper-3)}
.qty input{width:44px;text-align:center;border:0;background:transparent;font-weight:600;font-size:.98rem;
  -moz-appearance:textfield}
.qty input::-webkit-outer-spin-button,.qty input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.calc-opts{display:grid;gap:var(--s-4);margin-top:var(--s-6);padding-top:var(--s-5);border-top:1px solid var(--line)}
.calc-opt label{display:block;font-size:.86rem;font-weight:600;margin-bottom:8px;color:var(--fg-2)}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{padding:9px 15px;border-radius:var(--r-full);border:1px solid var(--line);background:#fff;
  font-size:.9rem;font-weight:600;cursor:pointer;transition:.15s}
.chip[aria-pressed="true"]{background:var(--blue-600);border-color:var(--blue-600);color:#fff}
.calc-out{margin-top:var(--s-6);padding:var(--s-6);border-radius:var(--r-lg);background:var(--grad-dark);
  color:var(--fg-inv)}
.calc-sum{display:flex;align-items:flex-end;justify-content:space-between;gap:var(--s-4);flex-wrap:wrap}
.calc-sum .lbl{font-size:.86rem;color:var(--fg-inv-3);text-transform:uppercase;letter-spacing:.09em;font-weight:600}
.calc-sum .val{font-size:clamp(1.7rem,1.3rem + 1.7vw,2.5rem);font-weight:700;letter-spacing:-.03em;line-height:1.1}
.calc-items{margin-top:var(--s-4);font-size:.9rem;color:var(--fg-inv-2);line-height:1.7}
.calc-warn{margin-top:var(--s-4);padding:12px 15px;border-radius:var(--r);background:rgba(255,176,32,.13);
  border:1px solid rgba(255,176,32,.3);font-size:.89rem;color:#FFD79B}
.calc-note{margin-top:var(--s-4);font-size:.84rem;color:var(--fg-inv-2)}
.calc-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:var(--s-5)}
.calc-empty{color:var(--fg-inv-2);font-size:.95rem}

/* Cennik */
.ptab{width:100%;border-collapse:collapse;background:#fff;border-radius:var(--r-lg);overflow:hidden;
  box-shadow:var(--sh-1);border:1px solid var(--line)}
.ptab caption{text-align:left;font-weight:700;font-size:1.14rem;padding:var(--s-5) var(--s-5) var(--s-3)}
.ptab th,.ptab td{padding:13px var(--s-5);text-align:left;border-top:1px solid var(--line);font-size:.96rem}
.ptab th{font-size:.79rem;text-transform:uppercase;letter-spacing:.07em;color:var(--fg-3);font-weight:600;
  background:var(--paper-2)}
.ptab td:last-child,.ptab th:last-child{text-align:right;white-space:nowrap;font-weight:600;color:var(--blue-700)}
.ptab tbody tr:hover{background:var(--paper-2)}
.tbl-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
/* Długa tabela w lewej kolumnie, dwie krótkie jedna pod drugą w prawej.
   Powód w komentarzu przy priceTablesBlock() w blocks.mjs. */
.ptab-grid{display:grid;gap:var(--s-5);align-items:start}
.ptab-col{display:grid;gap:var(--s-5);align-content:start}
@media(min-width:900px){.ptab-grid{grid-template-columns:1fr 1fr}}

/* FAQ */
.faq{display:grid;gap:10px}
.faq details{background:#fff;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;
  box-shadow:var(--sh-1)}
.faq summary{padding:18px var(--s-5);font-weight:600;cursor:pointer;list-style:none;display:flex;
  align-items:flex-start;justify-content:space-between;gap:var(--s-4);font-size:1rem}
.faq summary::-webkit-details-marker{display:none}
.faq summary svg{width:20px;height:20px;color:var(--blue-600);flex:none;transition:transform .2s;margin-top:2px}
.faq details[open] summary svg{transform:rotate(180deg)}
.faq .ans{padding:0 var(--s-5) 20px;color:#C8D2CC;font-size:.97rem}

/* Opinie */
.rev{display:flex;flex-direction:column;gap:var(--s-4);height:100%}
.rev .stars{display:flex;gap:2px;color:var(--gold)}
.rev .stars svg{width:17px;height:17px}
.rev q{font-style:normal;font-size:1rem;color:var(--fg);line-height:1.62;flex:1;quotes:"\201E" "\201D"}
.rev footer{font-size:.88rem;color:var(--fg-3);display:flex;justify-content:space-between;gap:10px;
  padding-top:var(--s-3);border-top:1px solid var(--line)}
.rev footer b{color:var(--fg);font-weight:600}

/* Obszar działania */
.areas{display:flex;flex-wrap:wrap;gap:9px;margin-top:var(--s-5)}
.areas span{padding:8px 15px;border-radius:var(--r-full);background:rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.13);font-size:.9rem;color:var(--fg-inv-2);
  transition:background .18s,border-color .18s,color .18s,transform .18s}
.areas span.pri{background:var(--grad-brand);border-color:transparent;color:#fff;font-weight:600}
/* Reakcja na kursor. Lista miejscowości to nie są odnośniki, więc nie udajemy,
   że da się w nie kliknąć — brak cursor:pointer. Podświetlenie ma tylko
   potwierdzić, że klient trafił wzrokiem na swoją miejscowość w dłuższej liście. */
@media (hover:hover){
  .areas span:not(.pri):hover{background:rgba(70,197,35,.16);border-color:rgba(70,197,35,.55);
    color:var(--fg-inv);transform:translateY(-2px)}
  .areas span.pri:hover{transform:translateY(-2px)}
}
@media (prefers-reduced-motion:reduce){
  .areas span{transition:none}
  .areas span:hover{transform:none}
}

/* Formularz */
.form{display:grid;gap:var(--s-4)}
.field label{display:block;font-size:.87rem;font-weight:600;margin-bottom:7px;color:var(--fg-2)}
.field input,.field select,.field textarea{width:100%;padding:14px 16px;border:1px solid var(--line);
  border-radius:var(--r);background:#fff;font-size:1rem;transition:border-color .15s,box-shadow .15s}
.field textarea{min-height:118px;resize:vertical}
/* BŁĄD, KTÓRY TO NAPRAWIA: pole wyboru usługi dziedziczyło interlinię 1.65
   z <body> (przez `font:inherit`). Safari na iPhonie nie powiększa przez to
   wysokości pola, tylko przycina tekst w pionie — na telefonie właściciela
   z nazwy usługi widać było sam środek liter.
   Dlatego interlinia i wysokość są tu podane wprost, a nie dziedziczone. */
.field select{
  -webkit-appearance:none;appearance:none;
  line-height:1.35;min-height:52px;padding-right:44px;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23596560' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 15px center;background-size:19px 19px;
  text-overflow:ellipsis}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--blue-500);
  box-shadow:0 0 0 3px rgba(47,168,14,.18)}
.field .hint{font-size:.81rem;color:var(--fg-3);margin-top:6px}
.hp{position:absolute;left:-9999px;opacity:0;height:0}
.form-note{font-size:.83rem;color:var(--fg-3)}
.form-msg{padding:14px 16px;border-radius:var(--r);font-size:.94rem;display:none}
.form-msg.ok{display:block;background:#E7F7EE;border:1px solid #A9E0C3;color:#0B5B32}
.form-msg.err{display:block;background:#FDECEC;border:1px solid #F3B9B9;color:#8A1F1F}

/* Pasmo CTA */
.cta-band{background:var(--grad-dark);color:var(--fg-inv);border-radius:var(--r-xl);padding:var(--s-8) var(--s-7);
  display:grid;grid-template-columns:1.15fr .85fr;gap:var(--s-7);align-items:center;position:relative;overflow:hidden}
.cta-band::after{content:"";position:absolute;right:-8%;top:-40%;width:52%;height:180%;
  background:radial-gradient(closest-side,rgba(240,192,0,.20),transparent 70%);pointer-events:none}
.cta-band>*{position:relative;z-index:1}
.cta-band h2{margin-bottom:var(--s-4)}

/* Cross-sell */
.xsell{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--s-4)}
.xsell a{display:flex;align-items:center;gap:var(--s-4);padding:var(--s-5);background:#fff;
  border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--sh-1);transition:.18s}
.xsell a:hover{border-color:var(--blue-400);transform:translateY(-2px);box-shadow:var(--sh-2)}
.xsell .ic{width:44px;height:44px;border-radius:13px;display:grid;place-items:center;flex:none;
  background:linear-gradient(135deg,rgba(47,168,14,.14),rgba(240,192,0,.14));color:var(--blue-600)}
.xsell .ic svg{width:23px;height:23px}
.xsell b{display:block;font-weight:600;font-size:.99rem}
.xsell small{color:var(--fg-3);font-size:.86rem}

/* Breadcrumbs */
.bc{font-size:.85rem;color:var(--fg-inv-3);padding-top:var(--s-5)}
.bc ol{display:flex;flex-wrap:wrap;gap:7px}
.bc li+li::before{content:"/";margin-right:7px;opacity:.5}
.bc a:hover{color:#fff;text-decoration:underline}

/* Stopka */
.ftr{background:var(--ink-900);color:var(--fg-inv-2);font-size:1rem;line-height:1.6;padding-block:var(--s-8) var(--s-6);
  border-top:1px solid rgba(255,255,255,.08)}
/* Kolumny szersze: przy 1fr nazwy usług łamały się po każdym wyrazie. */
.ftr-top{display:grid;grid-template-columns:1.5fr 1.15fr 1.15fr 1.2fr;gap:var(--s-7)}
.ftr h4{color:#fff;font-size:.9375rem;text-transform:uppercase;letter-spacing:.1em;margin-bottom:var(--s-4);
  font-weight:600}
.ftr li{margin-bottom:11px;font-size:1rem;line-height:1.6}
.ftr a:hover{color:#fff;text-decoration:underline}
.ftr-contact li{display:flex;gap:10px;align-items:flex-start}
/* Wysokość bazowa odnośników w stopce. Blok @media (pointer:coarse) niżej
   podnosi ją do 44 px — dlatego ta reguła musi stać przed nim. */
.ftr li a,.ftr-contact a{display:inline-flex;align-items:center;min-height:30px}
.ftr-contact svg{width:18px;height:18px;color:var(--cyan-400);flex:none;margin-top:3px}
.ftr-bot{margin-top:var(--s-7);padding-top:var(--s-5);border-top:1px solid rgba(255,255,255,.08);
  display:flex;justify-content:space-between;gap:var(--s-4);flex-wrap:wrap;font-size:.85rem;color:var(--fg-inv-3)}

/* Sticky CTA mobile */
.sticky{display:none;position:fixed;left:0;right:0;bottom:0;z-index:70;
  background:rgba(7,10,8,.95);backdrop-filter:blur(14px);border-top:1px solid rgba(255,255,255,.12);
  padding:9px 10px calc(9px + env(safe-area-inset-bottom));gap:8px}
.sticky a{flex:1;display:flex;flex-direction:column;align-items:center;gap:3px;padding:8px 4px;
  border-radius:13px;font-size:.72rem;font-weight:600;color:var(--fg-inv-2)}
.sticky a svg{width:21px;height:21px}
.sticky .s-wa{background:#25D366;color:#04321A}
.sticky .s-cta{background:linear-gradient(135deg,#FFD24D 0%,#F0A800 100%);color:#2A1E00}
.sticky .s-cta svg{color:#2A1E00}
/* BŁĄD, KTÓRY TO NAPRAWIA: skrypt chował pasek przez atrybut `hidden`,
   ale reguła `.sticky{display:flex}` w media query wygrywała z `[hidden]`
   (klasa bije selektor atrybutu w stylach przeglądarki). Pasek nie znikał
   nigdy — ani przy pisaniu w formularzu, ani gdy formularz był na ekranie.
   Efekt: na telefonie zasłaniał przycisk „Wyślij zapytanie". */
.sticky[hidden]{display:none}

/* Pasek stoi na dole, a w tym samym rogu siadają dwa cudze elementy:
   bąbel zgód Cookiebota i strzałka „do góry" Astry. Nachodziły na przyciski
   i ucinały ich treść — stąd „…na ze zdjęć" zamiast „Wycena ze zdjęć".
   Podnosimy je ponad pasek zamiast je ukrywać: zgody muszą być dostępne. */
@media (max-width:1024px){
  body.has-sticky #CookiebotWidget,
  body.has-sticky .CookiebotWidget-logo{bottom:92px !important}
  body.has-sticky #ast-scroll-top,
  body.has-sticky .ast-scroll-top-icon{bottom:92px !important}
  /* Przy otwartym menu bąbel zgód zasłaniał pozycje listy — na czas menu
     chowamy go razem ze strzałką Astry. Po zamknięciu wraca. */
  body.nav-open #CookiebotWidget,
  body.nav-open .CookiebotWidget-logo,
  body.nav-open #ast-scroll-top,
  body.nav-open .ast-scroll-top-icon{display:none !important}
}

/* ---------- 6. RESPONSIVE ---------- */
@media (max-width:1024px){
  .hero-in{grid-template-columns:1fr;gap:var(--s-7)}
  .hero-visual{order:2}
  .cta-band{grid-template-columns:1fr;padding:var(--s-7) var(--s-5)}
  .ftr-top{grid-template-columns:1fr 1fr}
  .nav,.hdr-cta{display:none}
  .burger{display:flex}
  .sticky{display:flex}
  body{padding-bottom:74px}
  .g4{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:760px){
  :root{--gut:16px}
  body{font-size:17px}
  .sec{padding-block:var(--s-8)}
  .g2,.g3,.g4,.xsell{grid-template-columns:1fr}
  .card{padding:var(--s-5)}
  .btn{width:100%}
  .btn-row .btn{flex:1 1 100%}
  .calc-body{padding:var(--s-5)}
  .calc-row{flex-wrap:wrap;gap:10px}
  .calc-row .nm{flex:1 1 100%}
  .ftr-top{grid-template-columns:1fr;gap:var(--s-6)}
  .step{padding-left:56px}
  .step::before{width:38px;height:38px}
}

/* licznik pozycji na zakładce kalkulatora */
.calc-dot{display:inline-grid;place-items:center;min-width:20px;height:20px;padding:0 5px;
  border-radius:var(--r-full);background:var(--blue-600);color:#fff;font-size:.72rem;font-weight:700}
.calc-opts:empty{display:none}
.svc-price b small{display:block;font-size:.72rem;font-weight:600;color:var(--fg-3);
  letter-spacing:0;margin-top:2px}
.rev q{white-space:pre-line}
.rev footer{align-items:flex-start}
.rev-badge{display:block;font-size:.75rem;font-weight:600;color:var(--blue-600);margin-top:2px}

/* ---------- Strona opinii ---------- */
.rev-summary{display:grid;grid-template-columns:auto 1fr auto;gap:var(--s-7);align-items:center;
  background:#fff;border:1px solid var(--line);border-radius:var(--r-xl);padding:var(--s-6) var(--s-7);
  box-shadow:var(--sh-1)}
.rev-score{text-align:center;flex:none}
.rev-score-num{font-size:3.6rem;font-weight:700;line-height:1;letter-spacing:-.04em;color:var(--fg)}
.rev-score .stars{display:flex;gap:3px;justify-content:center;color:var(--gold);margin-top:8px}
.rev-score .stars svg{width:19px;height:19px}
.rev-dist{display:grid;gap:7px;min-width:180px}
.rev-dist-row{display:flex;align-items:center;gap:10px;font-size:.82rem;color:var(--fg-3);font-weight:600}
.rev-bar{flex:1;height:8px;border-radius:var(--r-full);background:var(--paper-3);overflow:hidden}
.rev-bar i{display:block;height:100%;background:var(--gold);border-radius:var(--r-full)}
.rev-summary-cta{max-width:270px}

.rev-filters{display:flex;flex-wrap:wrap;gap:9px;margin:var(--s-7) 0 var(--s-5)}
.rev-filters .chip{display:inline-flex;align-items:center;gap:8px}
.rev-count{display:inline-grid;place-items:center;min-width:21px;height:21px;padding:0 6px;
  border-radius:var(--r-full);background:var(--paper-3);color:var(--fg-3);font-size:.74rem;font-weight:700}
.rev-filters .chip[aria-pressed="true"] .rev-count{background:rgba(255,255,255,.24);color:#fff}

.rev-masonry{columns:3;column-gap:var(--s-5)}
.rev-m{break-inside:avoid;margin-bottom:var(--s-5);display:block}
.rev-m .stars{display:flex;gap:2px;color:var(--gold);margin-bottom:var(--s-4)}
.rev-m .stars svg{width:17px;height:17px}
.rev-m q{display:block;margin-bottom:var(--s-4)}
.rev-m footer{display:flex;flex-direction:column;gap:3px;
  padding-top:var(--s-4);border-top:1px solid var(--line);font-size:.88rem;color:var(--fg-3)}
.rev-m footer b{color:var(--fg);font-weight:600;font-size:.94rem}

@media (max-width:1024px){
  .rev-summary{grid-template-columns:auto 1fr;gap:var(--s-6)}
  .rev-summary-cta{grid-column:1/-1;max-width:none}
  .rev-masonry{columns:2}
}
@media (max-width:760px){
  .rev-summary{grid-template-columns:1fr;text-align:center;padding:var(--s-5)}
  .rev-dist{max-width:280px;margin-inline:auto}
  .rev-summary-cta{max-width:none;margin-inline:auto}
  .rev-masonry{columns:1}
}

/* Długie ciągi bez spacji (adresy e-mail, URL-e) nie mogą rozpychać layoutu na telefonie */
body{overflow-wrap:break-word}
a.card[href^="mailto:"] b,.card a[href^="mailto:"] b,.ftr-contact a{overflow-wrap:anywhere}
/* elementy flex/grid domyślnie mają min-width:auto i nie dają się zwęzić poniżej treści */
.card>span,.xsell a>span,.grid>*{min-width:0}
@media (max-width:420px){
  a.card[href^="mailto:"] b,.card a[href^="mailto:"] b{font-size:.9rem}
}

/* ---------- Blok właściciela ---------- */
.owner{display:grid;grid-template-columns:minmax(0,340px) 1fr;gap:var(--s-8);align-items:center}
.owner-photo{margin:0;border-radius:var(--r-xl);overflow:hidden;position:relative;
  box-shadow:var(--sh-2);background:var(--ink-800)}
.owner-photo::after{content:"";position:absolute;inset:0;border-radius:var(--r-xl);
  border:1px solid rgba(255,255,255,.14);pointer-events:none}
.owner-photo img{width:100%;height:100%;object-fit:cover;display:block}
.owner-text h2{max-width:18ch}

.owner-mini{display:flex;gap:var(--s-4);align-items:center}
.owner-mini img{width:82px;height:82px;border-radius:18px;object-fit:cover;object-position:50% 18%;flex:none;
  box-shadow:var(--sh-1)}
.owner-mini b{font-size:1.02rem}

@media (max-width:860px){
  .owner{grid-template-columns:1fr;gap:var(--s-6)}
  .owner-photo{max-width:320px;margin-inline:auto}
}

/* ============================================================
   KOMPONENTY WERSJI 2
   ============================================================ */

/* ---------- Blok zaufania: ocena + wstęga ---------- */
.trust-block{padding-top:var(--s-6)}
.trust-grid{display:grid;grid-template-columns:auto 1fr;gap:var(--s-7);align-items:center;
  padding-bottom:var(--s-5)}
.trust-rating{display:flex;align-items:center;gap:var(--s-4);flex-wrap:wrap}
.trust-score{font-size:2.9rem;font-weight:700;line-height:1;letter-spacing:-.04em;color:#fff}
.trust-rating .stars{display:flex;gap:3px;color:var(--gold)}
.trust-rating .stars svg{width:18px;height:18px}
.trust-rating p{margin-top:4px;color:var(--fg-inv-2)}
.trust-claim{color:var(--fg-inv-2);font-size:1.02rem;max-width:52ch;margin-left:auto;text-align:right}

/* ---------- Cztery kierunki ---------- */
.pillar-grid .svc h3{font-size:1.12rem}
.pillar-grid .svc p{font-size:.95rem}

/* ---------- Karty cen w skrócie ---------- */
.price-card{display:flex;flex-direction:column;gap:6px;text-align:center;padding:var(--s-5)}
.price-card b{font-size:.96rem;font-weight:600}
.price-card span{font-size:1.35rem;font-weight:700;color:var(--blue-700);letter-spacing:-.02em}

/* ---------- Sekcja formularza ---------- */
.form-sec{display:grid;grid-template-columns:1fr 1.05fr;gap:var(--s-8);align-items:start}
.form-card{background:#fff;color:var(--fg)}
.form-card h2,.form-card label,.form-card .form-note{color:var(--fg)}
.form-alt{display:flex;flex-wrap:wrap;gap:10px;margin-top:var(--s-6)}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--s-4)}
.field-wide{grid-column:1/-1}
.field-err{display:block;margin-top:6px;font-size:.83rem;color:#B3261E;font-weight:600}
.field.has-err input,.field.has-err select,.field.has-err textarea{border-color:#E4A2A2;
  box-shadow:0 0 0 3px rgba(179,38,30,.12)}
.field-consent.has-err{outline:2px solid #E4A2A2;outline-offset:6px;border-radius:8px}

/* ---------- Zgoda ---------- */
.checkbox{display:flex;gap:12px;align-items:flex-start;font-size:.92rem;line-height:1.5;cursor:pointer}
.checkbox input{width:22px;height:22px;flex:none;margin-top:1px;accent-color:var(--blue-600)}
.checkbox a{text-decoration:underline}

/* ---------- Wgrywanie zdjęć ---------- */
.drop{position:relative;border:2px dashed var(--line);border-radius:var(--r-lg);background:var(--paper-2);
  transition:border-color .15s,background .15s}
.drop.over,.drop:focus-within{border-color:var(--blue-500);background:#fff}
.drop input[type=file]{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer}
.drop-inner{display:flex;flex-direction:column;align-items:center;gap:7px;padding:var(--s-6) var(--s-4);
  text-align:center;pointer-events:none}
.drop-inner svg{width:30px;height:30px;color:var(--blue-600)}
.drop-inner b{font-size:.99rem}
.thumbs{display:flex;flex-wrap:wrap;gap:10px;margin-top:14px;padding:0;list-style:none}
.thumb{position:relative;width:84px;height:84px;border-radius:var(--r);overflow:hidden;
  border:1px solid var(--line);background:var(--paper-3)}
.thumb img{width:100%;height:100%;object-fit:cover}
.thumb-x{position:absolute;top:4px;right:4px;width:26px;height:26px;border-radius:50%;border:0;
  background:rgba(7,10,8,.80);color:#fff;font-size:1.05rem;line-height:1;cursor:pointer}
.thumb-size{position:absolute;left:0;right:0;bottom:0;background:rgba(7,10,8,.76);color:#fff;
  font-size:.66rem;text-align:center;padding:2px 0}
.upload-bar{margin-top:12px;height:8px;border-radius:var(--r-full);background:var(--paper-3);overflow:hidden}
.upload-bar i{display:block;height:100%;width:0;background:var(--grad-brand);transition:width .2s}

/* ---------- Komunikaty formularza ---------- */
.form-msg{padding:14px 16px;border-radius:var(--r);font-size:.94rem;line-height:1.5}
.form-msg.ok{background:#E7F7EE;border:1px solid #A9E0C3;color:#0B5B32}
.form-msg.err{background:#FDECEC;border:1px solid #F3B9B9;color:#8A1F1F}
.form-msg.warn{background:#FFF6E0;border:1px solid #F0D08A;color:#6B4A00}
.msg-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}

/* ---------- Wizualny akcent w finalnym CTA ---------- */
.cta-visual{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;
  padding:var(--s-6);border-radius:var(--r-lg);background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.12);text-align:center;color:var(--fg-inv-2)}
.cta-visual svg{width:46px;height:46px;color:var(--cyan-400)}

/* ---------- Wiersz kontaktu ---------- */
.contact-row{display:flex;gap:18px;align-items:center}
.contact-row b{font-size:1.06rem;display:block}

/* ---------- Menu mobilne ---------- */
.mnav-label{font-size:.74rem;letter-spacing:.12em;text-transform:uppercase;color:var(--fg-inv-3);
  font-weight:600;margin:var(--s-5) 0 6px}
.mnav a{display:flex;align-items:center;gap:12px}
.mnav a svg{width:22px;height:22px;color:var(--cyan-400);flex:none}
.mnav-more{border-bottom:1px solid rgba(255,255,255,.08)}
.mnav-more summary{display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:15px 4px;font-size:1.06rem;font-weight:600;color:var(--fg-inv);cursor:pointer;list-style:none}
.mnav-more summary::-webkit-details-marker{display:none}
.mnav-more summary svg{width:20px;height:20px;transition:transform .2s}
.mnav-more[open] summary svg{transform:rotate(180deg)}
.mnav-more .sub a{padding-left:18px;font-size:.97rem;font-weight:500;color:var(--fg-inv-2)}
.mnav-cta{margin-top:var(--s-6);display:grid;gap:10px}
.mnav-hours{margin-top:var(--s-5);font-size:.85rem;color:var(--fg-inv-3);line-height:1.55}

/* ---------- Pasek mobilny: dwie akcje ---------- */
.sticky{gap:10px}
.sticky a{flex:1;flex-direction:row;gap:9px;padding:14px 10px;font-size:.94rem;min-height:52px}
.sticky a svg{width:22px;height:22px}
.sticky .s-cta{background:linear-gradient(135deg,#FFD24D 0%,#F0A800 100%);color:#2A1E00}
.sticky .s-cta svg{color:#2A1E00}
.sticky .s-wa{background:#25D366;color:#04321A}
body.has-sticky{padding-bottom:82px}

/* ---------- Stopka ---------- */
.ftr-h{color:#fff;font-size:.83rem;text-transform:uppercase;letter-spacing:.1em;margin-bottom:var(--s-4);
  font-weight:600}
.ftr-social{display:flex;gap:10px;margin-top:18px}
.ftr-social a{width:42px;height:42px;border-radius:12px;display:grid;place-items:center;
  background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.13);color:var(--fg-inv-2)}
.ftr-social a:hover{background:rgba(255,255,255,.13);color:#fff}
.ftr-social svg{width:21px;height:21px}

/* ---------- Kalkulator: etykieta opcji ---------- */
.calc-opt-label{display:block;font-size:.86rem;font-weight:600;margin-bottom:8px;color:var(--fg-2)}
.calc-sum{align-items:center}
.calc-sum .btn{margin-left:auto}

/* ---------- Strona prawna ---------- */
.legal h2{font-size:1.22rem;margin-top:var(--s-6);margin-bottom:var(--s-3)}
.legal p{margin-bottom:var(--s-3);color:var(--fg-2)}
.legal-list{display:grid;gap:10px;margin:0 0 var(--s-4);padding-left:22px;list-style:disc;color:var(--fg-2)}
.legal-list li{padding-left:4px}
.legal a{color:var(--blue-700);text-decoration:underline}

/* ---------- Dostępność: wyraźny focus ---------- */
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,
textarea:focus-visible,summary:focus-visible,[tabindex]:focus-visible{
  outline:3px solid var(--blue-500);outline-offset:3px;border-radius:6px}

/* ---------- Responsywność v2 ---------- */
@media (max-width:1024px){
  .trust-grid{grid-template-columns:1fr;gap:var(--s-4)}
  .trust-claim{text-align:left;margin-left:0}
  .form-sec{grid-template-columns:1fr}
  .pillar-grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:760px){
  .form-grid{grid-template-columns:1fr}
  .pillar-grid{grid-template-columns:1fr}
  .trust-score{font-size:2.4rem}
  .contact-row{gap:14px}
  .thumb{width:76px;height:76px}
  .cta-visual{display:none}
}
@media (max-width:400px){
  .sticky a{font-size:.86rem;padding:13px 6px}
}

/* ---------- Cele dotykowe min. 44×44 px na ekranach dotykowych ---------- */
@media (pointer:coarse){
  .qty button{width:44px;height:44px}
  .qty input{width:52px;height:44px}
  .chip{min-height:44px;padding-block:11px}
  .calc-tab{min-height:44px}
  .faq summary{min-height:52px}
  .mnav-more summary{min-height:48px}
  .ftr li{margin-bottom:2px}
  .ftr li a,.ftr-contact a{display:inline-flex;align-items:center;min-height:44px}
  .rev-filters .chip{min-height:44px}
  .thumb-x{width:32px;height:32px}
  .areas span{min-height:40px;display:inline-flex;align-items:center}
}

/* ============================================================
   PASEK SOCIAL W NAGŁÓWKU
   Tylko desktop. Na telefonie pierwszy ekran ma sprzedawać usługę,
   a nie wyprowadzać ruch na Instagram — tam social jest w menu i stopce.
   ============================================================ */
.hdr-social{display:none}
@media (min-width:1080px){
  .hdr-social{display:inline-flex;align-items:center;gap:2px;margin-right:10px}
  .hdr-social a{display:inline-grid;place-items:center;width:34px;height:34px;border-radius:9px;
    color:var(--fg-inv-2);transition:color .15s,background .15s}
  .hdr-social a:hover{color:var(--gold);background:rgba(255,255,255,.07)}
  .hdr-social svg{width:18px;height:18px}
}

/* ============================================================
   KARTY KIERUNKÓW Z CENAMI — nachodzą na hero
   ============================================================ */
.pcards{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;
  margin-top:calc(var(--s-7) * -1);position:relative;z-index:2}
.pcard{display:flex;flex-direction:column;gap:6px;padding:18px 18px 16px;
  background:var(--paper);border:1px solid var(--line);border-radius:var(--r-lg);
  box-shadow:0 12px 30px rgba(0,0,0,.10);text-decoration:none;color:inherit;
  min-width:0;transition:transform .15s,box-shadow .15s,border-color .15s}
.pcard:hover{transform:translateY(-3px);box-shadow:0 18px 40px rgba(0,0,0,.14);
  border-color:var(--blue-400)}
.pcard-ico{display:inline-grid;place-items:center;width:38px;height:38px;border-radius:10px;
  background:var(--grad-brand);color:#fff;flex:none}
.pcard-ico svg{width:20px;height:20px}
.pcard-t{font-weight:600;font-size:1.02rem;line-height:1.25;color:var(--fg)}
.pcard-p{font-size:.95rem;color:var(--fg-3)}
.pcard-p b{font-size:1.18rem;color:var(--fg);font-weight:700}
.pcard-p small{font-size:.8rem}
.pcard-go{margin-top:auto;padding-top:8px;font-size:.88rem;font-weight:600;
  color:var(--blue-600);display:inline-flex;align-items:center;gap:6px}
.pcard-go svg{width:15px;height:15px}

@media (max-width:1023px){
  .pcards{grid-template-columns:repeat(2,1fr);margin-top:calc(var(--s-6) * -1)}
}
@media (max-width:560px){
  .pcards{grid-template-columns:1fr 1fr;gap:10px;margin-top:calc(var(--s-5) * -1)}
  .pcard{padding:14px 13px 13px}
  .pcard-t{font-size:.92rem}
  .pcard-p b{font-size:1.05rem}
  .pcard-go{font-size:.82rem}
}

/* ---- Kalkulator: rabat pakietowy, podpowiedź i zastrzeżenie o wycenie ---- */
.calc-bonus,.calc-hint{display:flex;gap:10px;align-items:flex-start;margin-top:12px;
  padding:12px 14px;border-radius:var(--r);font-size:.94rem;line-height:1.45}
.calc-bonus{background:rgba(70,197,35,.14);border:1px solid rgba(70,197,35,.32);color:var(--fg-inv)}
.calc-hint{background:rgba(255,255,255,.05);border:1px solid var(--line-dark);color:var(--fg-inv-2)}
.calc-bonus svg,.calc-hint svg{width:18px;height:18px;flex:none;margin-top:2px}
.calc-bonus svg{color:var(--blue-400)}
.calc-hint svg{color:var(--fg-inv-3)}
.calc-bonus b{color:#fff}
.calc-note-strong{margin-top:14px;padding:12px 14px;border-radius:var(--r);
  background:rgba(240,192,0,.10);border:1px solid rgba(240,192,0,.30);
  color:var(--fg-inv-2);font-size:.9rem;line-height:1.5}
.calc-note-strong b{color:var(--cyan-400)}

/* ---- Języki obsługi + flagi ---- */
.langs{list-style:none;margin:14px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:10px}
.langs li{display:inline-flex;align-items:center;gap:9px;padding:8px 14px;
  border:1px solid var(--line);border-radius:var(--r-full);background:var(--paper);font-size:.95rem}
.langs svg{width:22px;height:auto;border-radius:3px;flex:none;display:block}
.on-dark .langs li{background:rgba(255,255,255,.06);border-color:var(--line-dark)}
/* Ikony social w przyciskach — wypełnione glify potrzebują odrobinę mniej miejsca. */
.btn svg{width:1.05em;height:1.05em}

/* ============================================================
   IKONY SOCIAL W FIRMOWYCH BARWACH
   Kafelki zamiast samych glifów: Instagram i Facebook są rozpoznawalne
   z odległości po kolorze, a nie po kształcie. TikTok i Google dostają
   białe tło — ich glify są czarne/wielobarwne i na ciemnym pasku
   po prostu by zniknęły.
   ============================================================ */
.soc{display:inline-grid;place-items:center;border-radius:11px;flex:none;
  transition:transform .16s,box-shadow .16s,filter .16s}
.soc svg{width:56%;height:56%;display:block}
.soc:hover{transform:translateY(-2px);box-shadow:0 6px 16px rgba(0,0,0,.34)}
.soc-ig{background:linear-gradient(45deg,#F9CE34 2%,#EE2A7B 48%,#6228D7 98%);color:#fff}
.soc-fb{background:#1877F2;color:#fff}
.soc-tt{background:#fff;color:#0B0B0B}
.soc-gg{background:#fff}
.soc-gg svg{width:52%;height:52%}
/* Na jasnym tle (stopka jest ciemna, ale strona kontaktu już nie)
   białe kafelki dostają delikatną ramkę, żeby nie zlewały się z tłem. */
.on-light .soc-tt,.on-light .soc-gg{box-shadow:inset 0 0 0 1px var(--line)}

@media (min-width:1080px){
  .hdr-social{display:inline-flex;align-items:center;gap:7px;margin-right:12px}
  .hdr-social a{width:32px;height:32px;border-radius:9px}
}
.ftr-social{display:flex;gap:10px;margin-top:18px}
.ftr-social a{width:40px;height:40px;background:none;border:0}

/* ============================================================
   NAGŁÓWEK — mieszczenie się w szerokości
   Przy 1280 px pasek potrzebował 1329 px i przycisk WhatsApp uciekał
   poza ekran. Zamiast chować elementy „na oko", odbieramy im miejsce
   po kolei: najpierw profile, potem numer zostaje samą ikoną.
   ============================================================ */
.hdr-in{gap:var(--s-4);min-width:0}
.nav{gap:2px;min-width:0}
.nav a{padding-inline:10px}
.hdr-cta{gap:8px}
@media (max-width:1239px){ .hdr-social{display:none} }
/* Pełny dwuwierszowy blok telefonu działa aż do progu burgera.
   Wcześniej stała tu reguła, która od 1365 px w dół chowała etykietę
   „Zadzwoń" i zmniejszała numer do 17 px. Dołożyłem ją zapobiegawczo,
   bez zmierzenia — a pomiar pokazuje, że przy 1120 px zostaje jeszcze
   16 px luzu między menu a telefonem i 8 px przed przyciskiem WhatsApp.
   Reguła niczego nie ratowała, za to psuła wygląd na typowym laptopie
   1366 px. Usunięta; wariant kompaktowy zostaje tylko poniżej 1120 px. */
@media (max-width:1119px) and (min-width:1025px){
  .hdr-phone span,.hdr-phone{font-size:.92rem}
  .hdr-phone-txt{display:none}          /* zostaje sama ikona słuchawki */
  .hdr-phone{width:44px;height:44px;justify-content:center;border-radius:12px;
    background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.15)}
}

/* ============================================================
   PIERWSZY EKRAN — suwak przed/po po prawej stronie
   ============================================================ */
/* Ramka stoi na ciemnym tle, więc cała — razem z podpisem — musi być ciemna.
   Biały pasek pod zdjęciem wycinał w pierwszym ekranie jasną dziurę. */
.ba-hero{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.14);
  box-shadow:0 24px 60px rgba(0,0,0,.45);backdrop-filter:blur(10px)}
.ba-hero .ba-imgs{aspect-ratio:4/3}
.ba-hero .ba-body{padding:12px var(--s-5) 14px}
.ba-hero .ba-body p{color:var(--fg-inv-2);margin:0;max-width:none}
.hero-in{align-items:center}
@media (max-width:1024px){
  .ba-hero{max-width:560px;margin-inline:auto}
}

/* Numer telefonu w zdaniu nie może łamać się w połowie. */
.hero-note b,.form-note b,.cta-band .small b{white-space:nowrap}

/* ============================================================
   PIERWSZY EKRAN NA TELEFONIE — dowód przed wezwaniem do działania
   Na desktopie suwak przed/po stoi obok tekstu i widać go od razu.
   Na telefonie kolumny się układają jedna pod drugą, więc przy zwykłej
   kolejności dowód lądował dopiero pod przyciskami — czyli poza ekranem.
   display:contents rozpuszcza kolumnę tekstu w siatce, dzięki czemu
   da się wstawić zdjęcie pomiędzy wstęp a przyciski.
   ============================================================ */
.hero-actions{display:contents}
@media (max-width:1024px){
  /* Po rozpuszczeniu kolumny każdy element staje się osobną komórką siatki,
     więc odstępy z atrybutów style dodawały się do odstępu siatki i robiła się
     dziura między nagłówkiem a wstępem. Odstępy ustawiamy tu, w jednym miejscu. */
  .hero-in{grid-template-columns:1fr;gap:0}
  .hero-text{display:contents}
  .hero-text h1{margin-top:12px!important}
  .hero-text .lead{margin-top:14px!important}
  .hero-text .eyebrow{order:1}
  .hero-text h1{order:2}
  .hero-text .lead{order:3}
  .hero-visual{order:4;margin-top:var(--s-5)}
  .hero-actions{display:contents}
  .hero-cta{order:5;margin-top:var(--s-5)}
  .hero-note{order:6;margin-top:var(--s-4)}
  .hero-badges{order:7;margin-top:var(--s-5)}
}

/* ============================================================
   JASNE KARTY W CIEMNYCH SEKCJACH
   Reguły .on-dark ustawiają jasny tekst dla całej sekcji. Biała karta
   formularza stoi w środku takiej sekcji, więc dziedziczyła jasnoszary
   kolor na białym tle — podpowiedzi pod polami były praktycznie niewidoczne.
   ============================================================ */
/* ODWRÓCENIE DOMYŚLNEJ KARTY NA CIEMNYM TLE
   Dawniej: karta na ciemnej sekcji była biała, a szkło trzeba było włączać
   klasą. Po przejściu całej strony na ciemno ta domyślność pracowała
   przeciwko nam — każda nowa sekcja wracała do bieli.
   Teraz jest odwrotnie: na ciemnym tle karta jest domyślnie szklana,
   a biel włącza się świadomie klasą `.card-light`.

   Biała została TYLKO karta formularza. To nie przeoczenie: na ciemnej
   stronie biały prostokąt jest najjaśniejszym punktem ekranu i przyciąga
   wzrok dokładnie tam, gdzie klient ma zostawić zapytanie. Gdyby formularz
   też był szkłem, strona byłaby spójna i pozbawiona punktu zaczepienia. */
.on-dark .card:not(.card-light):not(.form-card){
  background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.11);
  box-shadow:none;color:var(--fg-inv)}
.on-dark .card:not(.card-light):not(.form-card) h1,
.on-dark .card:not(.card-light):not(.form-card) h2,
.on-dark .card:not(.card-light):not(.form-card) h3,
.on-dark .card:not(.card-light):not(.form-card) h4{color:var(--fg-inv)}
.on-dark .card:not(.card-light):not(.form-card) p,
.on-dark .card:not(.card-light):not(.form-card) li,
.on-dark .card:not(.card-light):not(.form-card) .checks span,
.on-dark .card:not(.card-light):not(.form-card) .lead{color:var(--fg-inv-2)}
.on-dark .card:not(.card-light):not(.form-card) .muted,
.on-dark .card:not(.card-light):not(.form-card) .tiny,
.on-dark .card:not(.card-light):not(.form-card) small,
.on-dark .card:not(.card-light):not(.form-card) .hint{color:var(--fg-inv-3)}
.on-dark .card:not(.card-light):not(.form-card) b,
.on-dark .card:not(.card-light):not(.form-card) strong{color:var(--fg-inv)}
.on-dark .card:not(.card-light):not(.form-card) .checks svg{color:var(--cyan-400)}
.on-dark .card-link:not(.card-light):not(.form-card):hover{
  background:rgba(255,255,255,.08);border-color:rgba(240,192,0,.42)}

/* Karta jasna — świadomy wyjątek. Reguły .on-dark ustawiają jasny tekst
   dla całej sekcji, więc wewnątrz białej karty trzeba go cofnąć,
   inaczej podpowiedzi pod polami są praktycznie niewidoczne. */
.on-dark .card.card-light,.form-card{background:#fff;color:var(--fg);border:1px solid var(--line)}
.on-dark .card.card-light .lead,.form-card .lead{color:var(--fg-2)}
.on-dark .card.card-light .muted,.on-dark .card.card-light .tiny,
.on-dark .card.card-light .hint,.on-dark .card.card-light .form-note,
.on-dark .card.card-light small,
.form-card .muted,.form-card .tiny,.form-card .hint,.form-card .form-note,
.form-card small{color:var(--fg-3)}
.on-dark .card.card-light h1,.on-dark .card.card-light h2,
.on-dark .card.card-light h3,.on-dark .card.card-light h4,
.form-card h1,.form-card h2,.form-card h3,.form-card h4{color:var(--fg)}
.on-dark .card.card-light .checks svg,.form-card .checks svg{color:var(--blue-600)}

/* ============================================================
   CIEMNE BLOKI POZA SEKCJAMI .on-dark
   Pasmo końcowego CTA i wynik kalkulatora mają ciemne tło,
   ale leżą w jasnych sekcjach — nie łapały więc reguł .on-dark
   i tekst pomocniczy zostawał w kolorze dla jasnego tła.
   ============================================================ */
.cta-band .lead,.cta-band p,.calc-out .lead,.calc-out p{color:var(--fg-inv-2)}
.cta-band .muted,.cta-band .small,.calc-out .muted,.calc-out .small{color:var(--fg-inv-2)}
.cta-band h1,.cta-band h2,.cta-band h3,.calc-out h2,.calc-out h3{color:var(--fg-inv)}
.cta-band .checks svg,.calc-out .checks svg{color:var(--cyan-400)}
/* Podpis „Google" przy ocenie: na ciemnym pasku musi być jasny. */
.rating .muted,.rating .tiny{color:var(--fg-inv-2)}
.rating--light .muted,.rating--light .tiny{color:var(--fg-3)}

/* ---------- Cele dotykowe: drobne poprawki po pomiarach ---------- */
.hdr-phone{padding:8px 10px;border-radius:10px}
.hdr-phone:hover{background:rgba(255,255,255,.07)}
.qty input{height:38px}
@media (pointer:coarse){
  .ftr-social a,.hdr-social a{width:44px;height:44px}
  .checkbox input{width:24px;height:24px}
  .qty input{height:44px}
}

/* ---------- Lista usług w ramach kierunku ---------- */
.svc-groups{gap:var(--s-6) var(--s-7)}
.svc-group h3{display:flex;align-items:center;gap:10px;margin-bottom:8px}
.svc-group h3 svg{width:1.05em;height:1.05em;color:var(--blue-600);flex:none}
.svc-group>p{margin-bottom:var(--s-4);max-width:52ch}
.svc-group .svc-list{margin-top:0;flex-direction:column;align-items:stretch;gap:8px}
.svc-group .svc-list a{display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding:13px 18px;border-radius:var(--r);text-align:left;min-height:48px;font-weight:500}
.svc-group .svc-list a b{font-family:var(--font-display);font-weight:700;color:var(--blue-700);
  white-space:nowrap;font-size:.95rem}
.svc-group .svc-list a:hover{transform:none;border-color:var(--blue-400);box-shadow:var(--sh-2)}

/* ---------- Odstępy między sekcjami ----------
   88 px u góry i 88 px u dołu dawało 176 px pustki między sąsiednimi
   sekcjami. Na dużym ekranie strona przez to „rozjeżdżała się" na długość,
   a klient musiał przewijać przez puste pola zamiast czytać treść. */
:root{--s-9:72px}
@media (max-width:760px){ :root{--s-9:52px} }

/* ---------- Kafelek ikony w karcie ---------- */
.card-icon{background:linear-gradient(135deg,rgba(11,107,0,.13),rgba(240,192,0,.16));
  box-shadow:inset 0 0 0 1px rgba(11,107,0,.10)}
.svc-groups{align-items:start}

/* ---------- Kierunki i karty kontaktu na ciemnym tle ----------
   Ta sama treść stała wcześniej na stronie głównej na biało, a na /uslugi/
   na ciemno — dwa języki wizualne dla jednej rzeczy. Ujednolicamy w stronę
   ciemną, bo to ona niesie pozycjonowanie premium: złota cena na ciemnym
   tle czyta się jako wartość, zielona na białym jako promocja.
   Akcenty złote, nie zielone — zieleń zostawiamy przyciskom (WhatsApp,
   CTA), żeby to one były najjaśniejszym punktem i nadal przyciągały klik. */
.on-dark .svc-group h3{color:var(--fg-inv)}
.on-dark .svc-group h3 svg{color:var(--gold)}
.on-dark .svc-group>p{color:var(--fg-inv-2)}
.on-dark .svc-list a{background:rgba(255,255,255,.045);border-color:rgba(255,255,255,.10);
  color:var(--fg-inv);box-shadow:none}
.on-dark .svc-list a b{color:var(--gold)}
.on-dark .svc-list svg{color:var(--gold)}
.on-dark .svc-list a:hover{background:rgba(255,255,255,.075);border-color:rgba(240,192,0,.45);
  box-shadow:none}
.on-dark .svc-list a:focus-visible{outline:3px solid var(--gold);outline-offset:3px}

/* Karty kontaktu: szkło zamiast bieli. Nagłówki i treść muszą dostać jasny
   kolor jawnie — reguła .on-dark .card:not(.card-glass) ich nie obejmuje,
   a bez tego tekst zostaje ciemny na ciemnym. */
.on-dark .card-glass h2,.on-dark .card-glass h3{color:var(--fg-inv)}
.on-dark .card-glass h2>svg,.on-dark .card-glass h3>svg{color:var(--gold)}
.on-dark .card-glass p,.on-dark .card-glass .lead{color:var(--fg-inv-2)}
.on-dark .card-glass .muted,.on-dark .card-glass small,.on-dark .card-glass .tiny{color:var(--fg-inv-3)}
.on-dark .card-glass b,.on-dark .card-glass strong{color:var(--fg-inv)}
.on-dark .card-glass a:not(.btn){color:var(--fg-inv)}

/* Zgoda: klikalny jest cały wiersz z tekstem, więc to on musi mieć
   wysokość celu dotykowego — nie sam kwadracik. */
.field-consent .checkbox{min-height:44px;align-items:center}

/* ============================================================
   OPINIE GOOGLE — przewijany zestaw
   Przewijanie natywne (scroll-snap), bez biblioteki karuzeli.
   Działa palcem, kółkiem myszy, klawiaturą i przyciskami,
   a przy wyłączonym JavaScripcie nadal da się je przewinąć.
   ============================================================ */
.rev-slider{position:relative}
/* Flex, nie grid. W siatce z grid-auto-columns: minmax(0, …) kolumny ściskały
   się do szerokości kontenera zamiast go przepełnić — sześć kart mieściło się
   na ekranie po 168 px każda i nie było czego przewijać.
   flex: 0 0 <szerokość> nie pozwala się ścisnąć, więc zestaw realnie wystaje. */
.rev-track{display:flex;gap:var(--s-5);overflow-x:auto;scroll-snap-type:x mandatory;
  scroll-behavior:smooth;scrollbar-width:none;padding:4px 4px 10px}
.rev-track::-webkit-scrollbar{display:none}
.rev-track:focus-visible{outline:3px solid var(--blue-500);outline-offset:4px;border-radius:var(--r-lg)}
.rev-slide{scroll-snap-align:start;flex:0 0 min(86%,340px);min-width:0}
@media (min-width:760px){ .rev-slide{flex-basis:calc(50% - var(--s-5)/2)} }
@media (min-width:1080px){ .rev-slide{flex-basis:calc(33.333% - var(--s-5)*2/3)} }
@media (prefers-reduced-motion:reduce){ .rev-track{scroll-behavior:auto} }

/* Autor opinii — wymagany przez zasady Google, nie ozdoba. */
.rev-author{display:flex;align-items:center;gap:12px;padding-top:var(--s-4);
  border-top:1px solid var(--line);font-size:.88rem;color:var(--fg-3)}
.rev-author img{width:40px;height:40px;border-radius:50%;flex:none;object-fit:cover;
  background:var(--paper-3)}
.rev-meta{display:flex;flex-direction:column;min-width:0;flex:1}
.rev-meta b{color:var(--fg);font-weight:600;font-size:.95rem;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
.rev-meta a{text-decoration:none}
.rev-meta a:hover b{text-decoration:underline}
.rev-meta small{color:var(--fg-3);font-size:.82rem}
.rev-link{display:grid;place-items:center;width:34px;height:34px;border-radius:9px;
  background:var(--paper-2);flex:none;transition:background .15s}
.rev-link:hover{background:var(--paper-3)}
.rev-link svg{width:17px;height:17px}

.rev-nav{display:flex;gap:10px;justify-content:flex-end;margin-top:var(--s-4)}
.rev-btn{width:46px;height:46px;border-radius:50%;border:1px solid var(--line);
  background:#fff;color:var(--fg-2);display:grid;place-items:center;cursor:pointer;
  box-shadow:var(--sh-1);transition:border-color .15s,transform .15s,opacity .15s}
.rev-btn:hover:not(:disabled){border-color:var(--blue-400);transform:translateY(-1px)}
.rev-btn:disabled{opacity:.35;cursor:default}
.rev-btn svg{width:20px;height:20px}
.rev-btn[data-rev-prev] svg{transform:rotate(90deg)}
.rev-btn[data-rev-next] svg{transform:rotate(-90deg)}
@media (pointer:coarse){ .rev-nav{display:none} }   /* palcem przewija się wprost */

/* Opinie bywają bardzo różnej długości — od dwóch zdań do dwustu słów.
   W suwaku dawało to karty o skrajnie różnej wysokości i rozjechany rząd.
   Przycinamy podgląd do ośmiu wierszy; pełną treść widać po kliknięciu
   w ikonę Google, a odnośnik do oryginału i tak jest wymagany przez zasady Google. */
.rev-track{align-items:stretch}
.rev-slide{display:flex}
.rev-slide.rev{height:auto}
.rev-slide q{display:-webkit-box;-webkit-line-clamp:8;-webkit-box-orient:vertical;
  overflow:hidden;flex:1 1 auto;min-height:0}
.rev-slide .rev-author{margin-top:auto}

/* ============================================================
   POJAWIANIE SIĘ SEKCJI (§4)
   Ukrywamy TYLKO wtedy, gdy skrypt zdążył dołożyć klasę js-reveal.
   Bez tego awaria JavaScriptu zostawiłaby pustą stronę.
   ============================================================ */
.js-reveal [data-reveal],
.js-reveal [data-reveal-item]{opacity:0;translate:0 18px;
  transition:opacity .42s cubic-bezier(.22,.61,.36,1),translate .42s cubic-bezier(.22,.61,.36,1)}
.js-reveal [data-reveal].is-visible,
.js-reveal [data-reveal-item].is-visible{opacity:1;translate:0 0}
/* Sekcja i jej karty animują się niezależnie — inaczej opóźnienie kart
   sumowałoby się z opóźnieniem sekcji i dolne rzędy wchodziłyby za późno. */
.js-reveal [data-reveal] [data-reveal-item]{transition-property:opacity,translate}

@media (prefers-reduced-motion:reduce){
  .js-reveal [data-reveal],
  .js-reveal [data-reveal-item]{opacity:1;translate:none;transition:none}
}

/* ---------- Delikatne uniesienie pod kursorem ---------- */
@media (hover:hover){
  .card-link,.pcard,.xsell a,.svc-list a{transition:transform .22s cubic-bezier(.22,.61,.36,1),
    box-shadow .22s,border-color .18s}
}
/* Poświata żółtego CTA. Statyczna — pulsowanie łamałoby zasadę
   „żadnego stałego ruchu" i przy dłuższym czytaniu męczy wzrok. */
.btn-primary{box-shadow:0 8px 26px rgba(240,168,0,.30),0 0 0 0 rgba(255,210,77,0)}
.btn-primary:hover{box-shadow:0 10px 30px rgba(240,168,0,.40),0 0 30px 0 rgba(255,210,77,.22)}
.btn-wa:hover{box-shadow:0 10px 30px rgba(37,211,102,.42)}

/* Krótki blok „kto przyjedzie" na stronie głównej — zdjęcie mniejsze
   niż na podstronie O nas, bo tu ma tylko uwiarygodnić, a nie opowiadać. */
.owner-short{grid-template-columns:minmax(0,300px) 1fr;gap:var(--s-7);align-items:center}
.owner-short .owner-photo{aspect-ratio:3/4}
.owner-short .owner-photo img{height:100%}
@media (max-width:860px){
  .owner-short{grid-template-columns:1fr}
  .owner-short .owner-photo{max-width:280px;margin-inline:auto}
}

/* Stopka: doszła kolumna „Dokumenty", więc pięć kolumn zamiast czterech. */
.ftr-top{grid-template-columns:1.5fr 1fr 1fr .8fr 1.1fr}
@media (max-width:1100px){ .ftr-top{grid-template-columns:1fr 1fr 1fr} }
@media (max-width:760px){ .ftr-top{grid-template-columns:1fr} }

/* Trzy kroki — równe kafelki.
   Wcześniej każdy krok miał własną wysokość wyznaczoną długością tekstu,
   więc rząd wyglądał na krzywy, a między nimi zostawało puste miejsce. */
.steps-row{align-items:stretch}
.steps-row .steps{display:flex}
/* Numer kroku siedzi NAD tytułem, nie obok niego.
   Układ bazowy ustawia licznik absolutnie po lewej i rezerwuje na niego
   64 px wcięcia — w kafelku z własnym paddingiem numer wszedł na tytuł.
   Tutaj zdejmujemy wcięcie i przesuwamy licznik do rogu kafelka. */
.steps-row .step{flex:1;display:flex;flex-direction:column;padding-left:0;
  background:rgba(255,255,255,.045);border:1px solid rgba(255,255,255,.10);
  border-radius:var(--r-lg);padding:var(--s-5);backdrop-filter:blur(6px);
  transition:border-color .2s,background .2s}
.steps-row .step::before{position:static;margin-bottom:var(--s-4);
  width:42px;height:42px;border-radius:12px;box-shadow:none}
.steps-row .step h3{font-size:1.25rem;font-weight:700;line-height:1.25;margin-bottom:10px}
.steps-row .step p{font-size:1.0625rem;line-height:1.6;color:var(--fg-inv-2);max-width:none}
@media (max-width:860px){
  .steps-row{grid-template-columns:1fr;gap:var(--s-4)}
  .steps-row .step{padding:var(--s-5)}
}

/* ---------- Strona /uslugi/ ----------
   Jedno ciemne tło na całą listę, a nie biała wstęga pod każdą kategorią:
   pięć naprzemiennych pasów rozbijało stronę na pięć osobnych stron.
   Rozdzielenie kategorii robi odstęp i cienka linia, nie zmiana koloru. */
.uslugi-lista{padding-block:var(--s-8) var(--s-9)}
.uslugi-lista .svc-group + .svc-group,
.uslugi-lista .services-paired-row + .svc-group{margin-top:var(--s-8);padding-top:var(--s-8);
  border-top:1px solid rgba(255,255,255,.10)}
.uslugi-lista .sec-head{margin-bottom:32px;max-width:720px}
.uslugi-lista .sec-head h2{display:flex;align-items:center;gap:12px}
.uslugi-lista .sec-head p{color:var(--fg-inv-2)}

/* Materace i Dywany obok siebie — dwie kolumny, każda z nagłówkiem i jedną
   kartą. Nagłówki i karty startują na tej samej wysokości, bo obie kolumny
   są siatkami o takim samym układzie wierszy. */
.services-paired-row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:32px;
  margin-top:var(--s-8);padding-top:var(--s-8);border-top:1px solid rgba(255,255,255,.10)}
.services-paired-row .svc-group{display:grid;grid-template-rows:auto 1fr;margin-top:0;
  padding-top:0;border-top:0}
.svc-cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:28px;align-items:stretch}
.svc-cards.one{grid-template-columns:1fr}
/* Pojedyncza karta nie rozciąga się na całą szerokość kolumny do absurdu,
   ale i nie zostaje wysepką 290 px w pustej sekcji. */
.svc-cards.one .svc{max-width:none}

.uslugi-lista .svc{background:rgba(255,255,255,.045);border:1px solid rgba(255,255,255,.10);
  color:var(--fg-inv);display:flex;flex-direction:column;gap:12px;padding:var(--s-5);
  transition:transform .22s,border-color .22s,background .22s,box-shadow .22s}
.uslugi-lista .svc h3{font-size:1.3125rem;font-weight:700;line-height:1.3;color:var(--fg-inv)}
.uslugi-lista .svc p{font-size:1.0625rem;line-height:1.55;color:var(--fg-inv-2);max-width:none;
  overflow:visible;display:block;-webkit-line-clamp:none;flex:1}
.uslugi-lista .svc .svc-price{margin-top:auto;display:flex;justify-content:space-between;
  align-items:flex-end;gap:16px;flex-wrap:wrap}
.uslugi-lista .svc .svc-price b{font-size:1.1875rem;font-weight:700;color:var(--gold)}
.uslugi-lista .svc .svc-price small{display:block;font-size:.875rem;font-weight:400;
  color:var(--fg-inv-3);margin-top:3px}
.uslugi-lista .svc .more{font-size:1rem;font-weight:600;color:var(--fg-inv);
  display:inline-flex;align-items:center;gap:6px}
.uslugi-lista .svc:hover{transform:translateY(-4px);background:rgba(255,255,255,.07);
  border-color:rgba(240,192,0,.45);box-shadow:0 10px 34px rgba(0,0,0,.38)}
.uslugi-lista .svc:focus-visible{outline:3px solid var(--gold);outline-offset:3px}

@media (max-width:768px){
  .services-paired-row{grid-template-columns:1fr;gap:var(--s-7)}
  .svc-cards{grid-template-columns:1fr;gap:24px}
  .uslugi-lista{padding-block:var(--s-7)}
  .uslugi-lista .svc-group + .svc-group,
  .uslugi-lista .services-paired-row + .svc-group,
  .services-paired-row{margin-top:var(--s-7);padding-top:var(--s-7)}
}

/* Karty na /uslugi/ są szklane, nie białe.
   Reguła .on-dark .card:not(.card-glass) celowo robi z kart na ciemnym tle
   białe kafelki — i słusznie, bo tak wyglądają na stronie głównej.
   Tutaj karta ma być częścią ciemnego tła, więc podnosimy specyficzność
   zamiast dopisywać !important: ten sam zapis, tylko o jedną klasę dłuższy. */
.on-dark .uslugi-lista .svc,
.uslugi-lista.on-dark .svc{color:var(--fg-inv)}
.on-dark .uslugi-lista .svc h3,.uslugi-lista.on-dark .svc h3,
.on-dark .uslugi-lista .svc h4,.uslugi-lista.on-dark .svc h4{color:var(--fg-inv)}
.on-dark .uslugi-lista .svc p,.uslugi-lista.on-dark .svc p{color:var(--fg-inv-2)}
.on-dark .uslugi-lista .svc small,.uslugi-lista.on-dark .svc small{color:var(--fg-inv-3)}
.on-dark .uslugi-lista .svc .svc-price b,.uslugi-lista.on-dark .svc .svc-price b{color:var(--gold)}
.on-dark .uslugi-lista .svc .more,.uslugi-lista.on-dark .svc .more{color:var(--fg-inv)}

/* Dwie kolumny startują równo: nagłówek do nagłówka, karta do karty.
   Zamiast subgrid (który przy zagnieżdżonych siatkach zachowywał się różnie
   i spychał drugi nagłówek na dół wiersza) wpuszczamy dzieci kolumn wprost
   do siatki rodzica przez display:contents i ustawiamy je jawnie:
   nagłówki w wierszu 1, karty w wierszu 2. Wyrównanie wynika z konstrukcji,
   nie z tego, który tekst akurat jest dłuższy. */
.services-paired-row{grid-template-rows:auto 1fr;gap:0 32px}
.services-paired-row > .svc-group{display:contents}
.services-paired-row > .svc-group:nth-child(1) > .sec-head{grid-column:1;grid-row:1}
.services-paired-row > .svc-group:nth-child(1) > .svc-cards{grid-column:1;grid-row:2}
.services-paired-row > .svc-group:nth-child(2) > .sec-head{grid-column:2;grid-row:1}
.services-paired-row > .svc-group:nth-child(2) > .svc-cards{grid-column:2;grid-row:2}
.services-paired-row .sec-head{margin-bottom:0;align-self:start;padding-bottom:32px}

@media (max-width:768px){
  /* Na telefonie jedna kolumna: wracamy do naturalnego przepływu,
     bo jawne numery wierszy ustawiłyby karty obok nagłówków. */
  .services-paired-row{grid-template-rows:none;gap:var(--s-7)}
  .services-paired-row > .svc-group{display:block}
  .services-paired-row > .svc-group > .sec-head,
  .services-paired-row > .svc-group > .svc-cards{grid-column:auto;grid-row:auto}
  .services-paired-row .sec-head{padding-bottom:24px}
}

/* Nagłówek kategorii wewnątrz kolumny „Usługi" w stopce. */
.ftr-kat{font-size:.9375rem;font-weight:700;color:var(--fg-inv);margin:var(--s-4) 0 7px;
  letter-spacing:-.01em}
.ftr-kat:first-of-type{margin-top:0}
.ftr-kat + ul{margin-bottom:var(--s-4)}

/* ==========================================================================
   STRONA USŁUGI — kompozycja

   Wcześniej cała treść siedziała w dwóch sekcjach po dwie kolumny.
   Skutek: nagłówek prawej kolumny wisiał w połowie wysokości lewej,
   a pod krótszą kolumną zostawała dziura wysokości tej dłuższej.
   Teraz jeden blok myślowy = jedna sekcja, z własnym rytmem pionowym.
   ========================================================================== */
.service-page .content-section{padding-block:clamp(56px,6vw,88px)}
/* Dwie sąsiadujące sekcje o tym samym tle dają podwójny odstęp — stąd
   setki pikseli pustki przed kalkulatorem. Sklejamy je w jeden rytm. */
.service-page .content-section + .content-section:not(.on-dark):not(.on-paper2){padding-top:0}
.service-page .section-heading{margin-bottom:clamp(28px,3vw,40px)}
.service-page .section-heading h2{margin:0 0 24px;font-size:clamp(2.125rem,4vw,3.25rem);
  line-height:1.08;font-weight:750;letter-spacing:-.03em}
.service-page .section-heading p{max-width:720px;margin-top:14px;margin-bottom:0}
.service-page p,.service-page li{font-family:var(--font-body);
  font-size:clamp(1rem,1.15vw,1.125rem);line-height:1.65;font-weight:400}

/* ---------- Co wchodzi w zakres ---------- */
.service-page .scope-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.service-page .scope-card{display:flex;gap:14px;align-items:flex-start;padding:24px;
  background:#fff;border:1px solid rgba(11,23,18,.10);border-radius:20px;
  box-shadow:0 12px 32px rgba(11,23,18,.06)}
.service-page .scope-card p{margin:0;max-width:none}
.service-page .scope-ico{flex:none;width:40px;height:40px;border-radius:12px;
  display:grid;place-items:center;background:rgba(23,127,5,.10);color:var(--blue-700)}
.service-page .scope-ico svg{width:21px;height:21px}
@media (max-width:1024px){.service-page .scope-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){.service-page .scope-grid{grid-template-columns:1fr}}

/* Ograniczenie usługi jako osobna plamka, a nie ostatni punkt listy.
   W wyliczeniu ginęło, a to informacja, przez którą klient może czekać
   na ekipę, która i tak nie weźmie tego zlecenia. */
.service-page .uwaga{display:flex;gap:14px;align-items:flex-start;margin-top:28px;
  padding:20px 24px;border-radius:16px;background:rgba(240,192,0,.12);
  border:1px solid rgba(240,192,0,.42)}
.service-page .uwaga p{margin:0;max-width:none;font-weight:500}
.service-page .uwaga-ico{flex:none;color:#8a6b00}
.service-page .uwaga-ico svg{width:22px;height:22px}

/* ---------- Dla kogo ---------- */
.service-page .audience-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}
.service-page .audience-card{display:flex;flex-direction:column;gap:10px;padding:28px;height:100%}
.service-page .audience-card h3{font-size:1.25rem;line-height:1.25;margin:0}
.service-page .audience-card p{margin:0;max-width:none}
@media (max-width:700px){.service-page .audience-grid{grid-template-columns:1fr}}

/* ---------- Jak pracujemy ---------- */
.service-page .process-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:20px}
.service-page .process-card{display:flex;flex-direction:column;gap:10px;padding:24px;
  background:var(--paper-2);border:1px solid var(--line);border-radius:18px}
.service-page .process-num{font-family:var(--font-heading);font-size:1.5rem;font-weight:750;
  line-height:1;color:var(--blue-600);letter-spacing:-.03em}
.service-page .process-card h3{font-size:1.0625rem;line-height:1.3;margin:0}
.service-page .process-card p{margin:0;max-width:none;font-size:1rem}
@media (max-width:1100px){.service-page .process-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:760px){
  /* Na telefonie etapy czytają się jako kolejność, nie jako siatka. */
  .service-page .process-grid{grid-template-columns:1fr;gap:0}
  .service-page .process-card{flex-direction:row;align-items:flex-start;gap:16px;
    background:none;border:0;border-left:2px solid var(--line);border-radius:0;
    padding:0 0 28px 22px;margin-left:14px}
  .service-page .process-card:last-child{padding-bottom:0}
  .service-page .process-num{flex:none;width:34px}
  .service-page .process-card h3{margin-bottom:4px}
}

/* ---------- FAQ w dwóch kolumnach ---------- */
.faq-split .faq-cols{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);
  gap:clamp(32px,5vw,72px);align-items:start}
.faq-split .section-heading{margin-bottom:0;position:static}
.faq-split .faq{margin:0}
/* Cała linia pytania klikalna, minimum 56 px wysokości. */
.faq summary{min-height:56px;align-items:center}
@media (max-width:900px){.faq-split .faq-cols{grid-template-columns:1fr;gap:32px}}

/* Kalkulator i CTA na stronie usługi — własny rytm, bez podwójnych odstępów. */
.service-page #kalkulator{padding-block:clamp(56px,6vw,88px)}

/* Podpisy grup wewnątrz jednej kategorii kalkulatora. */
.calc-group{font-family:var(--font-heading);font-size:.9375rem;font-weight:700;
  letter-spacing:.04em;text-transform:uppercase;color:var(--fg-3);
  margin:var(--s-5) 0 10px}
.calc-group:first-child{margin-top:0}
.calc-opt-note{font-size:.9375rem;line-height:1.5;color:var(--fg-3);margin-top:10px;max-width:62ch}

/* ============================================================
   CAŁA STRONA NA CIEMNO — warianty komponentów
   Sekcje przeszły na .on-dark, ale komponenty w środku miały
   zaszyte białe tła i ciemny tekst: FAQ, tabele cennika, opinie,
   podpisy pod zdjęciami przed/po, zakładki kalkulatora.
   Bez tych reguł jasny tekst sekcji lądował na białej karcie
   i znikał. Kolejność: ten blok stoi na końcu arkusza, więc
   wygrywa z regułami bazowymi bez podbijania specyficzności.
   ============================================================ */

/* FAQ */
.on-dark .faq details{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.11);
  box-shadow:none}
.on-dark .faq summary{color:var(--fg-inv)}
.on-dark .faq summary svg{color:var(--gold)}
.on-dark .faq details[open]{background:rgba(255,255,255,.07)}
.on-dark .faq .faq-a,.on-dark .faq details p{color:var(--fg-inv-2)}
.on-dark .faq details a{color:var(--fg-inv);text-decoration:underline}

/* Tabele cennika */
.on-dark .ptab{background:rgba(255,255,255,.04);border-color:rgba(255,255,255,.11);
  box-shadow:none;color:var(--fg-inv)}
.on-dark .ptab caption{color:var(--fg-inv)}
.on-dark .ptab th{background:rgba(255,255,255,.05);color:var(--fg-inv-3);
  border-top-color:rgba(255,255,255,.09)}
.on-dark .ptab td{border-top-color:rgba(255,255,255,.09)}
.on-dark .ptab td:last-child,.on-dark .ptab th:last-child{color:var(--gold)}
.on-dark .ptab tbody tr:hover{background:rgba(255,255,255,.06)}
.on-dark .ptab .muted,.on-dark .ptab .tiny{color:var(--fg-inv-3)}

/* Przed / po — podpis pod porównaniem */
.on-dark .ba{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.11);
  border-radius:var(--r-lg);overflow:hidden}
.on-dark .ba-body h3,.on-dark .ba-body h4{color:var(--fg-inv)}
.on-dark .ba-body p{color:var(--fg-inv-2)}

/* Opinie */
.on-dark .rev q,.on-dark .rev p{color:var(--fg-inv-2)}
.on-dark .rev footer b,.on-dark .rev footer{color:var(--fg-inv)}
.on-dark .rev-score-num{color:var(--fg-inv)}

/* Kroki „jak pracujemy" */
.on-dark .step h3,.on-dark .step h4{color:var(--fg-inv)}
.on-dark .step p{color:var(--fg-inv-2)}

/* Karty cen w skrócie i kafelki filarów */
.on-dark .price-card span{color:var(--gold)}
.on-dark .pcard{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.11);
  box-shadow:none;color:var(--fg-inv)}
.on-dark .pcard b,.on-dark .pcard .pcard-go{color:var(--fg-inv)}
.on-dark .pcard span{color:var(--fg-inv-2)}

/* Powiązane usługi */
.on-dark .xsell a{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.11);
  color:var(--fg-inv)}
.on-dark .xsell a:hover{border-color:rgba(240,192,0,.42);box-shadow:none}

/* Kalkulator: pasek zakładek był jasnoszary na ciemnej karcie */
.on-dark .calc-tabs{background:rgba(255,255,255,.04);border-bottom-color:rgba(255,255,255,.1)}

/* Listy miast/dzielnic i drobne plakietki */
.on-dark .chip{background:rgba(255,255,255,.07);color:var(--fg-inv-2);
  border:1px solid rgba(255,255,255,.12)}

/* Kalkulator — karta i wiersze. Po przejściu sekcji na ciemno wiersze
   zostały jasnoszare, a tekst w nich zrobił się jasny: biały na białym.
   Wyłapał to automat kontrastu, nie oko. */
.on-dark .calc{background:rgba(255,255,255,.04);border-color:rgba(255,255,255,.11);box-shadow:none}
.on-dark .calc-row{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.1)}
.on-dark .calc-row.on{background:rgba(255,255,255,.09);border-color:rgba(240,192,0,.42);box-shadow:none}
.on-dark .calc-row .nm{color:var(--fg-inv)}
.on-dark .calc-row .pr{color:var(--fg-inv-3)}
.on-dark .calc-group{color:var(--fg-inv-3)}
.on-dark .qty{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.14)}
.on-dark .qty button{color:var(--fg-inv)}
.on-dark .qty button:hover{background:rgba(255,255,255,.12)}
.on-dark .qty input,.on-dark .qty output{color:var(--fg-inv)}
.on-dark .calc-tab{color:var(--fg-inv-2)}
.on-dark .calc-tab[aria-selected="true"]{background:rgba(255,255,255,.12);color:var(--fg-inv);
  border-color:rgba(240,192,0,.42)}
.on-dark .calc-opt{color:var(--fg-inv-2)}
.on-dark .calc-opt b{color:var(--fg-inv)}

/* Odnośnik „Przejdź do treści" pokazuje się dopiero po tabulacji, ale na
   ciemnej stronie dziedziczył ciemny kolor tekstu na ciemnym tle. */
.skip:focus{background:#fff;color:var(--fg)}

/* Pozostałe komponenty z zaszytą bielą, wyłapane przez automat kontrastu
   po przełączeniu stron na ciemne tło. */
.on-dark .legal,.on-dark .legal p,.on-dark .legal li,.on-dark .legal td{color:var(--fg-inv-2)}
.on-dark .legal h1,.on-dark .legal h2,.on-dark .legal h3,.on-dark .legal b,
.on-dark .legal strong{color:var(--fg-inv)}
.on-dark .legal a{color:var(--gold)}
.on-dark .legal .small,.on-dark .legal small{color:var(--fg-inv-3)}
.on-dark .legal table,.on-dark .legal th,.on-dark .legal td{border-color:rgba(255,255,255,.12)}
.on-dark .legal th{background:rgba(255,255,255,.05);color:var(--fg-inv-2)}

.on-dark .rev-summary{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.11);
  box-shadow:none}
.on-dark .rev-score-num,.on-dark .rev-summary b{color:var(--fg-inv)}
.on-dark .rev-summary p,.on-dark .rev-summary span{color:var(--fg-inv-2)}
.on-dark .rev-btn{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.14);
  color:var(--fg-inv);box-shadow:none}
.on-dark .rev-btn:hover:not(:disabled){border-color:rgba(240,192,0,.45)}

.on-dark .btn-outline{background:rgba(255,255,255,.07);color:var(--fg-inv);
  border-color:rgba(255,255,255,.18);box-shadow:none}
.on-dark .btn-outline:hover{background:rgba(255,255,255,.12);border-color:rgba(240,192,0,.45)}

/* Pole „Przejdź do treści" bywa mierzone także poza fokusem. */
/* Poza fokusem link siedzi poza ekranem — kolor jasny, żeby pasował
   do ciemnej strony. Ciemny dopiero na białym tle po fokusie. */
.skip{color:var(--fg-inv)}

/* Strony usług: karty zakresu i kroków pracy miały białe i jasnoszare tła. */
.on-dark .scope-card{background:rgba(255,255,255,.05);
  border-color:rgba(255,255,255,.11);box-shadow:none}
.on-dark .scope-card p{color:var(--fg-inv-2)}
.on-dark .scope-ico{background:rgba(240,192,0,.14);color:var(--gold)}
.on-dark .audience-card h3{color:var(--fg-inv)}
.on-dark .audience-card p{color:var(--fg-inv-2)}
.on-dark .process-card{background:rgba(255,255,255,.05);
  border-color:rgba(255,255,255,.11)}
.on-dark .process-card h3{color:var(--fg-inv)}
.on-dark .process-card p{color:var(--fg-inv-2)}
.on-dark .process-num{color:var(--gold)}

/* Kalkulator: etykiety „Materiał" i „Stopień zabrudzenia" oraz podpowiedzi
   przy wysyłce zdjęć („Cały mebel w kadrze…"). */
.on-dark .calc-sel label,.on-dark .calc-sel .lbl,.on-dark .calc-sel legend,
.on-dark .calc-body label,.on-dark .calc-body legend{color:var(--fg-inv-2)}
.on-dark .calc-body select,.on-dark .calc-body input[type=text]{
  background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.14);color:var(--fg-inv)}
.on-dark .photo-hints li,.on-dark .photo-hints span,
.on-dark .hint-list li,.on-dark .hint-list span{color:var(--fg-inv-2)}

/* Karta wyróżniona („Jak zrobić dobre zdjęcie"). Miała tło wpisane stylem
   inline, który bił każdą regułę arkusza — na ciemnej stronie zostawała
   jasnoszara z jasnym tekstem. Teraz to klasa, więc da się ją odmienić. */
.card-akcent{background:var(--paper-2)}
.on-dark .card-akcent{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.13)}

/* Etykiety grup opcji w kalkulatorze. */
.on-dark .calc-opt-label{color:var(--fg-inv-2)}
.on-dark .calc-opt .chip{background:rgba(255,255,255,.07);color:var(--fg-inv-2);
  border-color:rgba(255,255,255,.14)}
.on-dark .calc-opt .chip[aria-pressed="true"],
.on-dark .calc-opt .chip.on{background:rgba(240,192,0,.18);color:var(--fg-inv);
  border-color:rgba(240,192,0,.5)}

/* Ostatnie dwa miejsca z automatu kontrastu. */
/* Podpis ceny w kafelkach „powiązane usługi" — szary --fg-3 na szkle. */
.on-dark .xsell a small{color:var(--fg-inv-3)}
.on-dark .xsell a b{color:var(--fg-inv)}
/* Licznik przy filtrach opinii: biel na jasnej zieleni dawała 3.1:1.
   Przyciemniamy tło plakietki — tekst jest mały, więc próg to 4.5:1. */
.rev-count{background:var(--blue-700)}
.on-dark .rev-count{background:rgba(240,192,0,.22);color:var(--gold)}
/* Plakietka na WŁĄCZONYM filtrze opinii: półprzezroczysta biel na zielonym
   przycisku dawała biały tekst na jasnej zieleni (3.3:1). Przyciemniamy
   samą plakietkę — przycisk zostaje zielony, liczba staje się czytelna. */
.rev-filters .chip[aria-pressed="true"] .rev-count{background:rgba(0,0,0,.42);color:#fff}

/* ---------- Pasek mobilny: trzy akcje ----------
   Zadzwoń · WhatsApp · Wycena. Przy trzech przyciskach na 360 px zabrakło
   miejsca na pionowy układ ikona+podpis, więc wracamy do poziomego i tniemy
   odstępy. Minimalna wysokość 48 px — próg dotykowy WCAG to 44 px, zostawiamy
   zapas, bo pasek stoi przy dolnej krawędzi, gdzie kciuk trafia najgorzej. */
.sticky{gap:8px}
.sticky a{flex:1 1 0;min-width:0;min-height:48px;padding:12px 8px;font-size:.9rem;
  flex-direction:row;gap:7px;white-space:nowrap}
.sticky a svg{width:19px;height:19px;flex:none}
.sticky .s-tel{background:rgba(255,255,255,.12);color:var(--fg-inv);
  border:1px solid rgba(255,255,255,.2)}
.sticky .s-tel svg{color:var(--gold)}
@media (max-width:380px){
  .sticky a{font-size:.84rem;padding:12px 5px;gap:5px}
  .sticky a svg{width:17px;height:17px}
}
/* Pasek żyje tylko na telefonie i tablecie — do 1024 px. */
@media (min-width:1025px){ .sticky{display:none !important} }
/* Zapas pod paskiem rośnie o bezpieczny obszar iPhone'a, żeby ostatni
   element strony nie chował się pod paskiem ani pod paskiem systemowym. */
body.has-sticky{padding-bottom:calc(84px + env(safe-area-inset-bottom))}

/* Podpis Astry w stopce. Filtry w inc/audyt.php zdejmują go w większości
   wersji motywu nadrzędnego, ale budowniczy stopki w nowszych Astrach
   wstrzykuje go inną drogą. To ostatnia linia obrony — stopkę rysuje
   w całości nasz szablon, więc elementy Astry są tu zbędne. */
.ast-footer-copyright,.site-footer .ast-builder-footer-grid,
.site-below-footer-wrap,.ast-small-footer{display:none !important}

/* Kotwice sekcji kierunków na /uslugi/. Nagłówek jest przyklejony, więc bez
   odsunięcia tytuł sekcji ląduje pod paskiem i wygląda, jakby odnośnik
   przeniósł w złe miejsce. */
.svc-group[id]{scroll-margin-top:88px}
@media (max-width:1024px){ .svc-group[id]{scroll-margin-top:76px} }

/* Przycisk „Ustawienia cookies" ma wyglądać i działać jak odnośnik,
   ale musi być <button> — otwiera panel, nie prowadzi pod adres. */
/* Cel dotykowy: na telefonie sam tekst miał 22 px wysokości, czyli połowę
   progu WCAG. Powiększamy obszar kliknięcia samym odstępem wewnętrznym,
   bez zmiany wyglądu napisu. To samo dotyczy sąsiednich odnośników,
   żeby cały pasek reagował jednakowo. */
.ftr-link{background:none;border:0;font:inherit;color:inherit;
  cursor:pointer;text-decoration:underline;text-underline-offset:3px}
.ftr-bot a,.ftr-link{display:inline-flex;align-items:center;min-height:44px;padding:0}
.ftr-link:hover{color:var(--fg-inv)}
.ftr-link:focus-visible{outline:3px solid var(--gold);outline-offset:3px;border-radius:4px}