/* NBD Gold Skin — arkusz strony publicznej.
Paleta i kroje wprost z karty znaku: NB Ciemna skóra, NB Złoty, NB Brąz premium,
NB Beż, NB Jasny. Kroje pisma NIE są tu zaszyte — wchodzą przez --font-head i --font-body,
które ustawia panel (core/fonts.php).
Kolory oznaczone jako zmienne (--ink, --gold, --cta…) są nadpisywane blokiem :root
wypisywanym przez index.php PO tym pliku, żeby działała zmiana kolorów z panelu. */
:root{
--ink:#1A120B; /* NB Ciemna skóra */
--gold:#D4AF37; /* NB Złoty */
--brown:#5B3A1E; /* NB Brąz premium */
--sand:#D9C2A5; /* NB Beż */
--light:#F8F5EB; /* NB Jasny */
--cta:#D4AF37;
--cta-2:#A8801A;
--cta-ink:#1A120B;
--logo-h:54px;
/* Pochodne — liczone raz tutaj, żeby odcień tła i linii nie był wklepywany
na nowo w każdej regule (i nie rozjeżdżał się po pierwszej poprawce). */
--bg:#140E08; /* skóra w cieniu */
--bg-2:#241809; /* skóra w świetle — cieplejsza, nie „jaśniejsza czerń” */
--bone:#EDE4D3; /* druga powierzchnia: garbowana surowa skóra */
--bone-ink:#22170D; /* tekst na jasnym */
--tx:#EFE7DA;
--line:rgba(212,175,55,.26);
--line-soft:rgba(239,231,218,.12);
--radius:3px; /* prawie ostre — pokrycie tapicerskie nie ma zaokrągleń */
/* Kroje pisma. Rzeczywiste wartości nadpisuje blok :root wypisywany przez index.php
na podstawie ustawienia z panelu (core/fonts.php); te poniżej to wariant zapasowy. */
--font-head:'Poppins',system-ui,-apple-system,'Segoe UI',sans-serif;
--font-body:'Poppins',system-ui,-apple-system,'Segoe UI',sans-serif;
--head-weight:600;
}
/* Bez tego pojedynczy selektor klasy (np. .card{display:flex}) bije regułę przeglądarki
dla [hidden] i „schowany" element dalej jest widoczny. */
[hidden]{display:none!important}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
margin:0;background:var(--bg);color:var(--tx);
font-family:var(--font-body);
font-size:17px;line-height:1.7;font-weight:400;
-webkit-font-smoothing:antialiased;
}
/* Ziarno. Skóra ma pory — jednolita, gładka płaszczyzna czyta się jak plastik. Szum jest
generowany filtrem SVG w locie (żadnego pliku do pobrania) i jest ledwo widoczny; jego
zadaniem jest odebrać tłu wrażenie druku, a nie być zauważonym. */
body::before{
content:"";position:fixed;inset:0;z-index:0;pointer-events:none;opacity:.055;
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
}
body>*{position:relative;z-index:1}
img{max-width:100%;height:auto;display:block}
a{color:var(--gold);text-decoration:none}
a:hover{text-decoration:underline}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px;border-radius:4px}
h1,h2,h3,h4{font-family:var(--font-head);font-weight:var(--head-weight);line-height:1.2;
color:var(--light);margin:0 0 .5em;letter-spacing:-.01em}
/* Nagłówki mają być mocne, ale nie mają krzyczeć. Pierwsza wersja łączyła trzy wzmacniacze
naraz — wersaliki, wagę 900 i 5 rem — a każdy z nich osobno już wystarcza. Zostaje jeden:
rozmiar. Zdanie pisane normalnie czyta się od razu jako zdanie, a nie jako szyld, i nie
zmusza oka do składania wyrazów z samych wielkich liter. */
h1{font-size:clamp(1.9rem,3.6vw,3.1rem);line-height:1.1;letter-spacing:-.022em;font-weight:500}
h2{font-size:clamp(1.45rem,2.2vw,2rem);line-height:1.15;letter-spacing:-.018em;font-weight:700}
h3{font-size:1.08rem;letter-spacing:-.005em;font-weight:600}
h4{font-size:1rem;font-family:var(--font-body);font-weight:600;
text-transform:uppercase;letter-spacing:.12em;color:var(--gold)}
p{margin:0 0 1em}
.wrap{max-width:1160px;margin:0 auto;padding:0 24px}
.wrap.narrow{max-width:780px}
/* Wstęp sekcji jest DO LEWEJ i wąski. Wyśrodkowany blok „etykieta / tytuł / zdanie”
powtórzony w każdej sekcji to najczęstszy rytm generowanych stron; do lewej czyta się
szybciej i zostawia miejsce po prawej, którego strona używa na treść zamiast na powietrze. */
.center{max-width:780px}
.intro{max-width:760px;margin-bottom:34px}
.intro h2{margin-bottom:.3em}
.intro .lead{margin-bottom:0}
.mt{margin-top:32px}
.hint{color:var(--sand);font-size:.92rem;opacity:.85}
/* SZEW — jedyne urządzenie graficzne tej strony i jej znak rozpoznawczy.
Kreskowana linia to ścieg siodlarski: rzecz, którą w tapicerce widać na każdym wyrobie.
Zastępuje wszystkie ozdobniki, których nie ma: nadpisy wersalikami, ikonki przy nagłówkach,
gradientowe obwódki. Jedna rzecz, używana konsekwentnie, zamiast pięciu przypadkowych. */
.stitch{border:0;height:0;border-top:2px dashed var(--gold);opacity:.55;margin:0}
/* Ścieg dzielący sekcje zaszywa się przy wjeździe w kadr. Wycinamy go `clip-path`, a nie
skalowaniem: `scaleX` rozciągałby same kreski, więc linia nie tyle by się rysowała, co
rosła — a to już nie wygląda na szycie.
Klasę `czeka` nadaje skrypt TYLKO dzielnikom, które przy wejściu na stronę leżą pod
krawędzią ekranu. Te widoczne od razu zostają narysowane i nic nie mrugnie; efekt gra
wtedy, kiedy ma sens — w trakcie przewijania. */
@keyframes nbd-rysuj-szew{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}
hr.stitch.czeka{clip-path:inset(0 100% 0 0)}
hr.stitch.rysuj{animation:nbd-rysuj-szew .8s cubic-bezier(.35,0,.2,1) both}
.stitch-b{border-top-color:rgba(34,23,13,.35);opacity:1}
.lead{font-size:1.1rem;color:var(--sand);line-height:1.72;font-weight:300;max-width:56ch}
/* TRZECIA POWIERZCHNIA: brąz premium z karty znaku. Do tej pory strona miała tylko dwie —
ciemną i kostną — i przy stronie z czterema długimi rozdziałami naprzemienność „ciemne,
jasne, ciemne, jasne” robiła się monotonna jak szachownica. Brąz jest ciemny, więc tekst
zachowuje się na nim tak samo, ale odcień jest wyraźnie cieplejszy i rozdziały przestają
być swoimi kopiami. */
.section.hide{background:linear-gradient(180deg,#2C1D0E,#241809)}
.section.hide h1,.section.hide h2,.section.hide h3{color:var(--light)}
/* Sekcja na jasnej powierzchni. Naprzemienność ciemne/jasne robi rytm strony bez dokładania
ozdób — i wyprowadza ją z jednolitej czerni, która sama w sobie jest dziś szablonem. */
.section.bone{background:var(--bone);color:var(--bone-ink)}
.section.bone h1,.section.bone h2,.section.bone h3,.section.bone h4{color:#150E06}
.section.bone .lead,.section.bone p,.section.bone li{color:#4A3A27}
.section.bone .hint{color:#6B5740}
/* ── przyciski ─────────────────────────────────────────────────────── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;
padding:15px 28px;border-radius:2px;border:1px solid transparent;cursor:pointer;
font-family:var(--font-body);font-size:.92rem;font-weight:700;letter-spacing:.01em;
text-decoration:none;transition:background .15s,color .15s,border-color .15s}
.btn:hover{text-decoration:none}
/* Przycisk główny jest PEŁNY, bez gradientu i bez poświaty. Gradient plus cień to dziś
domyślne „ładnie” — a płaska plama złota na ciemnym tle i tak jest najmocniejszym
punktem na ekranie, więc nie potrzebuje pomocy. */
.btn-primary{background:var(--cta);color:var(--cta-ink)}
.btn-primary:hover{background:#E9C44F}
/* Drugi przycisk ma obwódkę PRZESZYTĄ — ten sam ścieg co linie działowe. */
.btn-line{background:transparent;color:var(--gold);border:2px dashed var(--line)}
.btn-line:hover{border-color:var(--gold);color:var(--light)}
.btn-ghost{background:transparent;color:var(--tx);border:2px dashed var(--line-soft)}
.btn-ghost.on-dark:hover{border-color:var(--gold);color:var(--gold)}
.section.bone .btn-line{color:#6B4A16;border-color:rgba(34,23,13,.3)}
.section.bone .btn-line:hover{border-color:#6B4A16;color:#150E06}
/* Bez globalnego white-space:nowrap na .btn — etykiety bywają długie („Wyślij zdjęcia
i zapytaj o wycenę") i muszą móc się zawinąć, inaczej rozpychają układ na 320 px. */
/* ── pasek górny, nagłówek ─────────────────────────────────────────── */
.topbar{background:#0D0905;border-bottom:1px solid var(--line-soft);font-size:.84rem;
letter-spacing:.04em;color:var(--sand)}
.topbar .wrap{display:flex;justify-content:space-between;align-items:center;gap:16px;
min-height:38px;padding-top:6px;padding-bottom:6px}
.topbar a{font-weight:600}
/* Przełącznik języka: kody, nie flagi. Flaga oznacza kraj, nie język — niemieckim mówi się
w trzech krajach i żadna flaga nie jest tu poprawna. Mieszka w nagłówku, żeby przetrwać
ukrycie paska górnego na telefonie. */
.langs{position:relative;flex:0 0 auto}
.langs summary{display:flex;align-items:center;gap:5px;cursor:pointer;list-style:none;
font-size:.78rem;font-weight:600;letter-spacing:.06em;color:var(--gold);
padding:9px 11px;border-radius:8px;border:1px solid var(--line);line-height:1;
background:rgba(212,175,55,.07);transition:background .15s,border-color .15s}
.langs summary::-webkit-details-marker{display:none}
.langs summary:hover{background:rgba(212,175,55,.15);border-color:var(--gold)}
.langs summary svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.6}
/* Flagi mają WŁASNE kolory, więc nie mogą dziedziczyć stroke/fill po przycisku — stąd
jawne `fill:none;stroke:none` zdjęte i delikatna ramka, żeby białe pola (Polska, Finlandia)
nie zlewały się z jasnym tłem listy. */
.flag{width:20px!important;height:14px!important;flex:0 0 auto;border-radius:2px;
stroke:none!important;fill:none;box-shadow:0 0 0 1px rgba(0,0,0,.35)}
.langs summary .flag{width:18px!important;height:12.6px!important}
.langs-caret{width:12px!important;height:12px!important;opacity:.8;transition:transform .15s}
.langs[open] .langs-caret{transform:rotate(180deg)}
.langs[open] summary{color:var(--gold);border-color:var(--gold)}
.langs-list{position:absolute;right:0;top:calc(100% + 6px);z-index:60;min-width:11rem;
display:grid;gap:1px;padding:6px;border-radius:10px;
background:var(--bg-2);border:1px solid var(--line);box-shadow:0 18px 40px -14px rgba(0,0,0,.85)}
.langs-list a{display:flex;align-items:center;gap:9px;padding:8px 10px;border-radius:6px;
font-size:.86rem;color:var(--sand);white-space:nowrap}
.langs-list a b{font-size:.7rem;letter-spacing:.08em;color:var(--gold);min-width:1.7rem}
.langs-list a{gap:8px}
.langs-list a:hover{background:rgba(212,175,55,.1);color:var(--light);text-decoration:none}
.langs-list a.on{background:rgba(212,175,55,.16);color:var(--light)}
header.site{position:sticky;top:0;z-index:50;background:rgba(20,14,8,.92);
backdrop-filter:blur(10px);border-bottom:1px solid var(--line-soft)}
header.site .wrap{display:flex;align-items:center;gap:26px;min-height:84px}
.brand{flex:0 0 auto}
.brand img{height:var(--logo-h);width:auto}
nav.main{display:flex;gap:6px;margin-left:auto;flex-wrap:wrap}
nav.main a{color:var(--tx);font-size:.92rem;font-weight:500;letter-spacing:.03em;
padding:10px 12px;border-radius:8px;transition:color .15s,background .15s}
nav.main a:hover,nav.main a.active{color:var(--gold);background:rgba(212,175,55,.08);text-decoration:none}
/* .nav-cta nie może być tym, co się kurczy: flex zabierał miejsce ostatniemu elastycznemu
elementowi, etykieta łamała się na dwie linie i nagłówek rósł. */
.nav-cta{flex:0 0 auto;display:flex;align-items:center;gap:10px}
.nav-cta .btn{white-space:nowrap;padding:12px 22px}
.burger{display:none;background:none;border:1px solid var(--line-soft);color:var(--gold);
font-size:1.3rem;line-height:1;padding:9px 13px;border-radius:10px;cursor:pointer}
/* ── kadr otwierający ──────────────────────────────────────────────── */
/* Bez radialnych poświat. Dwie rozmyte plamy światła pod tekstem to dziś domyślne tło
każdej ciemnej strony; tutaj robotę robi faktura ziarna i sam stopień pisma. */
.hero{position:relative;padding:92px 0 84px;overflow:hidden;background:var(--bg)}
/* Warstwy kadru otwierającego, od spodu: 0 zdjęcie tła, 1 gradient przyciemniający,
2 szew, 3 treść. Szew stoi NAD gradientem celowo — pod nim ginąłby dokładnie tam, gdzie
przyciemnienie jest najmocniejsze, czyli na całej lewej połowie. */
.hero .wrap{position:relative;z-index:3}
/* ── szew zaszywający się w tle kadru otwierającego ─────────────────── */
/* Wygaszenie od lewej: tam stoi nagłówek i lead, i tam tło ma być czyste. Szew narasta
w prawo, ku zdjęciu — dzięki temu wiąże fotografię z tłem, zamiast leżeć pod tekstem.
To jest maska CSS na kontenerze, niezależna od maski SVG odsłaniającej same szwy. */
/* `inset` na minusie daje zapas na przesunięcie za kursorem — przy `inset:0` odjechana
warstwa odsłaniałaby pusty pas przy krawędzi kadru. `.hero` i tak ma `overflow:hidden`. */
.szew-tlo{position:absolute;inset:-26px;z-index:2;pointer-events:none;
transition:transform .4s cubic-bezier(.2,.6,.2,1);
-webkit-mask-image:linear-gradient(100deg,transparent 0,transparent 26%,rgba(0,0,0,.45) 52%,#000 78%);
mask-image:linear-gradient(100deg,transparent 0,transparent 26%,rgba(0,0,0,.45) 52%,#000 78%)}
.szew-svg{display:block;width:100%;height:100%}
/* Sam ścieg: ta sama kreska co dzielniki sekcji (2px, złoto, przerywana), tylko położona
na krzywej. Okrągłe zakończenia robią z kresek nitkę, a nie z linii przerywanej. */
.szew-g{fill:none;stroke:var(--gold);stroke-width:2.5;stroke-dasharray:15 11;
stroke-linecap:round;opacity:.15}
/* Ścieżki maski: szeroka biała kreska, która odsłania szew od lewej do prawej.
`pathLength="1"` w HTML sprawia, że 1 = cała długość, więc offset 1 to szew niewidoczny,
a 0 to zaszyty do końca — niezależnie od tego, jak długa jest dana krzywa.
Bez `infinite`: to ma być jeden gest przy wejściu, nie ruch w tle przez cały czas.
Przy `prefers-reduced-motion` globalna reguła skraca czas do 0,01 ms, a `forwards`
zostawia szwy narysowane w całości — czyli dokładnie to, co trzeba, bez osobnej reguły. */
.szew-r{fill:none;stroke:#fff;stroke-width:40;stroke-dasharray:1 1;stroke-dashoffset:1;
animation:nbd-szyj 2.4s cubic-bezier(.35,0,.2,1) forwards}
.szew-r.r2{animation-delay:.15s}
.szew-r.r3{animation-delay:.3s}
.szew-r.r4{animation-delay:.45s}
.szew-r.r5{animation-delay:.6s}
@keyframes nbd-szyj{to{stroke-dashoffset:0}}
/* Tło kadru otwierającego: osobna warstwa pod treścią, z krycia sterowanego z panelu.
Do tego stały gradient przyciemniający od lewej — tam stoi tekst i tam musi być ciemno
niezależnie od tego, jakie zdjęcie ktoś wgra. Samo obniżenie krycia nie wystarcza:
jasny kadr rozjaśnia całe tło równomiernie i nagłówek zaczyna się gubić. */
.hero-bg{position:absolute;inset:0;z-index:0;background-size:cover;background-position:center;
background-repeat:no-repeat}
.hero.has-bg::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
background:linear-gradient(100deg,var(--bg) 8%,rgba(20,14,8,.82) 42%,rgba(20,14,8,.35) 100%)}
@media (max-width:900px){
/* Na wąskim ekranie tekst leży na całej szerokości, więc przyciemnienie musi być równomierne
— gradient „od lewej” zostawiłby jasny róg dokładnie pod ostatnim wierszem nagłówka. */
.hero.has-bg::after{background:linear-gradient(180deg,rgba(20,14,8,.86),rgba(20,14,8,.7))}
/* Z tego samego powodu szew wygasza się od GÓRY: przy jednej kolumnie nagłówek leży na
całej szerokości, więc wygaszenie „od lewej” zostawiłoby szwy dokładnie pod tekstem. */
.szew-tlo{-webkit-mask-image:linear-gradient(180deg,transparent 0,transparent 24%,rgba(0,0,0,.4) 50%,#000 76%);
mask-image:linear-gradient(180deg,transparent 0,transparent 24%,rgba(0,0,0,.4) 50%,#000 76%)}
}
.hero .wrap{display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:center}
/* Dopóki nie ma zdjęcia otwierającego, hero jest JEDNOKOLUMNOWY. Logo dryfujące w pustej
połowie ekranu to nie kompozycja, tylko dziura — a znak i tak stoi w nagłówku wyżej. */
.hero.solo .wrap{grid-template-columns:1fr}
.hero.solo h1{max-width:20ch}
.hero.solo .lead{max-width:62ch}
.hero h1{margin-bottom:.35em}
.hero .actions{display:flex;gap:14px;flex-wrap:wrap;margin-top:30px}
.hero-media img{border-radius:var(--radius);border:1px solid var(--line);
aspect-ratio:4/3;object-fit:cover;box-shadow:0 30px 60px -28px rgba(0,0,0,.9)}
.hero-logo{display:flex;justify-content:center}
.hero-logo img{max-width:min(86%,380px);height:auto}
/* Fakty pod nagłówkiem: jeden ciąg oddzielony ściegiem, nie cztery kafelki z liczbami.
To nie są dane liczbowe, tylko krótkie stwierdzenia — układ w „statystyki” obiecywałby
metryki, których tu nie ma. */
.stats{display:flex;flex-wrap:wrap;gap:0 34px;margin-top:46px;padding-top:26px;
border-top:2px dashed var(--line)}
.stats>div{padding:6px 0}
.stats b{display:block;font-size:1rem;font-weight:700;color:var(--gold);line-height:1.3}
.stats span{display:block;font-size:.82rem;color:var(--sand);margin-top:2px;opacity:.8}
/* ── nagłówek podstrony ────────────────────────────────────────────── */
.page-hero{padding:66px 0 52px;background:var(--bg)}
.page-hero .lead{max-width:760px}
/* Nadpis został WYŁĄCZNIE na stronach lądowania, gdzie niesie treść („Dojazd z Tczewa”),
a nie powtarza nagłówka wersalikami. Dlatego wygląda jak zdanie, nie jak etykieta. */
.eyebrow{display:block;font-size:.95rem;color:var(--gold);font-weight:400;margin-bottom:10px}
/* Szew zamyka nagłówek każdej podstrony — jeden powtarzalny gest zamiast obwódek i cieni. */
.page-hero .wrap::after{content:"";display:block;height:0;margin-top:34px;
border-top:2px dashed var(--gold);opacity:.5}
/* ── sekcje ────────────────────────────────────────────────────────── */
.section{padding:76px 0}
.section.alt{background:var(--bg-2)}
.two{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:start}
/* Na podstronie usługi kolumny nie są równorzędne: po lewej czyta się opis, po prawej stoi
samo wezwanie do wyceny. Równy podział dawałby opisowi linijki po 45 znaków. */
.two.tekst{grid-template-columns:1.7fr 1fr;gap:56px}
.grid{display:grid;gap:22px}
.grid.g2{grid-template-columns:repeat(auto-fit,minmax(320px,1fr))}
.grid.g3{grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
.grid.g4{grid-template-columns:repeat(auto-fit,minmax(230px,1fr))}
/* Pudełko zostaje TYLKO tam, gdzie naprawdę jest pojemnikiem na osobną całość (formularz,
ramka z boku). Treść, która jest listą równorzędnych rzeczy, dostaje linie zamiast ramek —
inaczej cała strona zamienia się w zestaw identycznych prostokątów, a to jest dziś
rozpoznawalny znak strony składanej z gotowców. */
.card{background:rgba(255,255,255,.03);border:1px solid var(--line-soft);
border-radius:var(--radius);padding:28px;position:relative}
/* CZTERY OBSZARY — pas rozdzielony pionowym ściegiem, bez ramek i bez cieni. */
.domains{display:grid;grid-template-columns:repeat(4,1fr);gap:0;
border-top:2px dashed var(--line);border-bottom:2px dashed var(--line)}
/* Zawartość kolumny wyśrodkowana — ikona, nagłówek i opis na jednej osi. Wyrównanie do
lewej zostawiało ikonę „przyklejoną" do krawędzi kolumny, a że jest teraz duża, ciągnęła
wzrok w bok zamiast nad tekst, do którego należy. */
.domains>div{padding:30px 26px;border-left:2px dashed var(--line-soft);text-align:center}
.domains>div:first-child{border-left:0}
.domains h3{margin-bottom:.45em}
.domains p{margin:0 auto;color:var(--sand);font-size:.92rem;font-weight:300;line-height:1.6;
max-width:30ch}
/* Ikona obszaru jest tu jedyną grafiką w całej sekcji, więc ma prawo być duża. Przy 30 px
ginęła obok nagłówka; 46 px robi z niej znak, a nie znaczek. Kreska cieńsza niż domyślna
(1.4), bo przy tej wielkości gruba linia zaczyna wyglądać jak piktogram z ostrzeżenia. */
.domains .icon{width:46px;height:46px;margin:0 auto 20px;background:none;border:0;
display:block;border-radius:0}
.domains .icon svg{width:46px;height:46px;stroke:var(--gold);stroke-width:1.4}
@media (max-width:900px){
.domains{grid-template-columns:1fr 1fr}
.domains>div{padding:24px 20px;border-top:2px dashed var(--line-soft)}
.domains>div:nth-child(-n+2){border-top:0}
.domains>div:nth-child(odd){border-left:0}
}
@media (max-width:560px){
.domains{grid-template-columns:1fr}
.domains>div{border-left:0}
.domains>div:nth-child(n+2){border-top:2px dashed var(--line-soft)}
}
.card h3{margin-bottom:.45em}
.card p{margin-bottom:0;color:var(--sand);font-size:.95rem;line-height:1.65;font-weight:300}
.card.has-img{padding-top:0;overflow:hidden}
.card-img{margin:0 -28px 20px;}
.card-img img{width:100%;aspect-ratio:4/3;object-fit:cover;border-bottom:1px solid var(--line-soft)}
@media (max-width:640px){.card-img{margin:0 -22px 18px}}
.card .icon{width:54px;height:54px;border-radius:12px;display:flex;align-items:center;
justify-content:center;margin-bottom:18px;
background:linear-gradient(135deg,rgba(212,175,55,.22),rgba(91,58,30,.35));
border:1px solid var(--line)}
.card .icon svg{width:30px;height:30px;fill:none;stroke:var(--gold);stroke-width:1.6;
stroke-linecap:round;stroke-linejoin:round}
/* Nagłówek grupy usług. Sam spis jest teraz zestawem kafelków murowanych (.svc-boxes),
więc style wiersza tabelarycznego zostały usunięte — nic ich już nie renderowało. */
.svc-group{margin-bottom:0}
.svc-group>h2{margin-bottom:6px}
.svc-group>.stitch{margin-bottom:0}
/* Cena w kafelku: nie liczba, tylko obietnica „powiemy Ci ile”, więc jest odnośnikiem. */
.svc-price{white-space:nowrap;font-size:.86rem;font-weight:700;color:var(--gold)}
a.svc-price:hover{color:var(--light);text-decoration:none}
.section.bone a.svc-price{color:#6B4A16}
.section.bone a.svc-price:hover{color:#150E06}
.badge{display:inline-block;font-size:.68rem;font-weight:700;
letter-spacing:.06em;color:var(--gold);vertical-align:middle}
.section.bone .badge{color:#7A560F}
/* ── kroki ─────────────────────────────────────────────────────────── */
/* KROKI — bloki obok siebie, nie lista z kółkami.
Numer jest tu uzasadniony, bo to naprawdę sekwencja, a nie ozdobnik. Odpadło natomiast
kółko w osobnej kolumnie 56 px: przy dłuższym tytule kroku numer następnej pozycji
wchodził w tekst poprzedniej, a sam okrąg dublował informację, którą niesie już pozycja
bloku w rzędzie.
Ramkę robi ŚCIEG u góry — ten sam gest, co dzielniki sekcji — więc bloki nie potrzebują
obwódki, tła ani cienia. Cztery identyczne karty z cieniem byłyby dokładnie tym zestawem,
którego ten serwis unika. */
.steps{list-style:none;margin:0;padding:0;display:grid;gap:34px 28px;
grid-template-columns:repeat(auto-fit,minmax(215px,1fr))}
/* Ścieg nad blokiem jest PSEUDOELEMENTEM, nie obramowaniem samego
. Powód jest
praktyczny: rysowanie robimy `clip-path`, a nałożony na
przyciąłby razem z kreską
cały tekst kroku. Na osobnej warstwie obcinamy wyłącznie kreskę. */
.steps li{padding-top:16px;position:relative}
.steps li::before{content:"";position:absolute;top:0;left:0;right:0;
border-top:2px dashed var(--gold)}
/* Cztery ściegi zaszywają się PO KOLEI, z lewej na prawo. Przy sekwencji kroków to nie jest
sam efekt — kolejność rysowania powtarza kolejność czytania. */
.steps.czeka li::before{clip-path:inset(0 100% 0 0)}
.steps.rysuj li::before{animation:nbd-rysuj-szew .7s cubic-bezier(.35,0,.2,1) both}
.steps.rysuj li:nth-child(2)::before{animation-delay:.12s}
.steps.rysuj li:nth-child(3)::before{animation-delay:.24s}
.steps.rysuj li:nth-child(4)::before{animation-delay:.36s}
.steps .n{display:block;font-family:var(--font-head);font-size:1.45rem;font-weight:600;
line-height:1;color:var(--gold);margin-bottom:14px}
.steps h3{font-size:1.15rem;margin-bottom:.4em}
.steps p{color:var(--sand);margin-bottom:0;font-weight:300;font-size:.95rem;line-height:1.7}
/* Kroków jest cztery, więc `auto-fit` w środkowym zakresie daje trzy w rzędzie i czwarty sam
— układ 2×2 czyta się tam lepiej i zachowuje parzystość sekwencji. */
@media (max-width:1000px){.steps{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.steps{grid-template-columns:1fr;gap:26px}}
/* KAFELKI USŁUG NA STRONIE GŁÓWNEJ — zdjęcie urwane u dołu jak rozdarta skóra.
Krawędź rysuje `clip-path`, nie plik graficzny: nie ma czego pobierać, skaluje się do każdej
szerokości i da się ją dostroić jedną linijką. Punkty są nierówne z premedytacją — regularna
piła wygląda jak wzór z edytora, a rozdarcie ma wyglądać na przypadkowe.
Podstrona /uslugi zostaje spisem: dwadzieścia dziewięć takich kafelków byłoby ścianą. */
/* Układ murowany (masonry) przez kolumny CSS, nie przez siatkę. Powód jest praktyczny:
`grid-template-rows: masonry` wciąż nie działa w większości przeglądarek, a kolumny robią
dokładnie to, o co chodzi — kafelki układają się jeden pod drugim i wypełniają lukę,
zamiast wyrównywać się do najwyższego w rzędzie.
Cena tego rozwiązania: kolejność czytania biegnie W DÓŁ kolumny, nie w poprzek rzędu.
Przy równorzędnym spisie usług to bez znaczenia — nie jest to sekwencja i nikt nie czyta
go po kolei. Przy treści, która ma porządek (kroki, ranking), kolumn używać nie wolno. */
.svc-boxes{columns:3;column-gap:26px}
.svc-box{background:rgba(255,255,255,.035);border:1px solid var(--line-soft);
display:block;break-inside:avoid;-webkit-column-break-inside:avoid;margin:0 0 26px}
@media (max-width:1000px){.svc-boxes{columns:2}}
@media (max-width:620px){.svc-boxes{columns:1}}
.section.bone .svc-box{background:rgba(255,255,255,.55);border-color:rgba(34,23,13,.14)}
/* Na brązowej powierzchni kafelek musi być JAŚNIEJSZY od tła, a nie ciemniejszy — inaczej
znika. Wartość dobrana tak, żeby kontrast z tekstem został ten sam co na tle głównym. */
.section.hide .svc-box{background:rgba(255,255,255,.05);border-color:rgba(239,231,218,.14)}
.section.hide .svc-box.featured{background:rgba(212,175,55,.1);border-color:var(--line)}
.svc-box.featured{border-color:var(--line);background:rgba(212,175,55,.07)}
.section.bone .svc-box.featured{background:rgba(212,175,55,.14);border-color:rgba(138,98,18,.35)}
/* Ujemny margines wsuwa tekst pod najgłębsze zęby, żeby między rozdarciem a nagłówkiem
nie było pustego pasa — rozdarcie ma wchodzić w treść, a nie wisieć nad nią. */
.svc-box-img{margin-bottom:-18px}
/* Bez wymuszonej proporcji: przy układzie murowanym to WŁAŚNIE różne wysokości zdjęć
tworzą rytm. Przycięcie wszystkiego do 4:3 dałoby z powrotem równy rząd, tylko poszarpany
u dołu. Wysokość ograniczamy od góry, żeby jeden bardzo pionowy kadr nie zajął ekranu. */
.svc-box-img img{width:100%;max-height:420px;object-fit:cover;display:block;
/* Punkty są nierówne w OBU osiach — i szerokość zębów, i ich głębokość. Równe odstępy
przy równej głębokości dają ząbkowane nożyce, nie rozdarcie; oko rozpoznaje regularność
natychmiast. Zakres głębokości 83–99% daje miejscami niemal całe pasmo, miejscami ledwie
naddarcie, czyli to, co widać na prawdziwie rozdartej skórze. */
clip-path:polygon(
0 0, 100% 0,
100% 86%, 97.2% 92%, 95.8% 87%, 93.1% 96%, 90.4% 90%, 88.9% 98%, 85.2% 91%,
83.7% 84%, 80.1% 95%, 77.6% 88%, 74.2% 97%, 72.8% 90%, 69.3% 83%, 66.1% 94%,
63.7% 87%, 60.2% 98%, 58.4% 91%, 54.9% 85%, 52.1% 96%, 49.3% 89%, 46.8% 99%,
43.2% 92%, 41.6% 86%, 37.9% 95%, 35.1% 88%, 31.8% 97%, 29.4% 90%, 26.2% 84%,
23.7% 94%, 20.1% 87%, 17.9% 96%, 14.3% 90%, 11.8% 99%, 8.2% 92%, 5.6% 86%,
2.4% 95%, 0 89%
)}
.svc-box-in{padding:22px 24px 26px}
.svc-box h3{margin:0 0 .3em}
/* Nazwa usługi jest odnośnikiem do jej podstrony, ale ma dalej wyglądać jak nagłówek —
podkreślenie dopiero przy najechaniu, kolor dziedziczony. */
.svc-box h3 a{color:inherit;text-decoration:none}
.svc-box h3 a:hover,.svc-box h3 a:focus-visible{text-decoration:underline;text-decoration-color:var(--gold);text-underline-offset:4px}
.svc-box p{margin:0;color:var(--sand);font-size:.94rem;font-weight:300;line-height:1.6}
.section.bone .svc-box p{color:#4A3A27}
.svc-box .badge{margin:0 0 .5em;display:inline-block}
/* W układzie murowanym kafelki mają z założenia różne wysokości, więc dociskanie ceny do dołu
(`margin-top:auto`) nie ma czego wyrównywać — wystarczy stały odstęp od opisu. */
.svc-box .svc-price{display:inline-block;margin-top:18px}
@media (max-width:560px){
.svc-boxes{grid-template-columns:1fr;gap:20px}
}
/* PAS DOWODU pod kadrem otwierającym. Zdjęcie idzie na PEŁNĄ szerokość okna, poza wspólny
kontener — jedyne miejsce na stronie, gdzie coś wychodzi poza siatkę, i właśnie dlatego
przyciąga wzrok bez żadnej dodatkowej ozdoby. */
.proof{padding:0 0 76px;background:var(--bg)}
.proof-head{max-width:760px;padding-bottom:30px}
.proof-head h2{margin-bottom:.3em}
.proof-head .lead{margin-bottom:0}
.proof-shot{width:100%}
.proof-shot .shot{margin:0}
.proof-shot .ba-box{border-left:0;border-right:0;border-radius:0;aspect-ratio:21/9}
.proof-shot .shot img{border-radius:0;border-left:0;border-right:0}
.proof-shot figcaption{max-width:1160px;margin:14px auto 0;padding:0 24px;text-align:left}
/* Uchwyt suwaka jest tu większy: pas jest szeroki, a mały punkt na 1600 px szerokości
ginie i nikt nie zgaduje, że da się to przesunąć. */
.proof-shot .ba-range::-webkit-slider-thumb{width:46px;height:46px}
.proof-shot .ba-range::-moz-range-thumb{width:46px;height:46px}
.proof-more{margin:30px 0 0}
@media (max-width:760px){
.proof{padding-bottom:52px}
.proof-shot .ba-box{aspect-ratio:4/3}
}
/* ── realizacje: kafelek i suwak przed/po ──────────────────────────── */
.shot{margin:0}
.shot img{border-radius:var(--radius);border:1px solid var(--line-soft);
aspect-ratio:4/3;object-fit:cover;width:100%}
.shot figcaption{margin-top:12px;font-size:.9rem;color:var(--sand);text-align:center;font-weight:300}
.ba-box{position:relative;border-radius:var(--radius);overflow:hidden;border:1px solid var(--line);
aspect-ratio:4/3}
.ba-box img{border:0;border-radius:0;height:100%;aspect-ratio:auto}
.ba-after,.ba-before{position:absolute;inset:0}
.ba-after img,.ba-before img{width:100%;height:100%;object-fit:cover}
/* Warstwa „przed" jest przycinana szerokością, a nie przezroczystością — inaczej oba
zdjęcia prześwitywałyby przez siebie i nie dałoby się ocenić żadnego z nich. */
.ba-before{width:50%;overflow:hidden}
.ba-before img{width:auto;min-width:0;max-width:none;height:100%}
.ba-line{position:absolute;top:0;bottom:0;left:50%;width:2px;background:var(--gold);
transform:translateX(-1px);pointer-events:none;box-shadow:0 0 14px rgba(212,175,55,.7)}
.ba-tag{position:absolute;bottom:12px;font-size:.7rem;font-weight:700;letter-spacing:.14em;
text-transform:uppercase;padding:5px 11px;border-radius:999px;background:rgba(20,14,8,.8);
color:var(--sand);pointer-events:none;border:1px solid var(--line-soft)}
.ba-tag-l{left:12px}
.ba-tag-r{right:12px}
/* Suwak to natywny rozciągnięty na całym kafelku: obsługa klawiatury
i czytnika ekranu przychodzi za darmo, a palcem działa tak samo jak własne przeciąganie. */
.ba-range{position:absolute;inset:0;width:100%;height:100%;margin:0;padding:0;
appearance:none;-webkit-appearance:none;background:transparent;cursor:ew-resize}
.ba-range::-webkit-slider-thumb{-webkit-appearance:none;width:34px;height:34px;border-radius:50%;
background:var(--gold);border:3px solid var(--ink);box-shadow:0 4px 14px rgba(0,0,0,.6);cursor:ew-resize}
.ba-range::-moz-range-thumb{width:34px;height:34px;border-radius:50%;background:var(--gold);
border:3px solid var(--ink);box-shadow:0 4px 14px rgba(0,0,0,.6);cursor:ew-resize}
.ba-range:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
/* Przejście dokładamy WYŁĄCZNIE na czas samoczynnego pokazu (klasa zdejmowana po nim przez
skrypt). Na stałe psułoby ciągnięcie palcem: warstwa goniłaby palec z opóźnieniem,
zamiast iść za nim. Czas jest zmienną, bo pas dowodowy pod kadrem otwierającym odsłania
się wolniej niż podpowiedź w galerii. */
.ba-gra .ba-before{transition:width var(--ba-czas,.8s) cubic-bezier(.35,0,.2,1)}
.ba-gra .ba-line{transition:left var(--ba-czas,.8s) cubic-bezier(.35,0,.2,1)}
/* ── ramki i cytat marki ───────────────────────────────────────────── */
.note-box{border:1px solid var(--line);border-left:3px solid var(--gold);border-radius:var(--radius);
padding:30px 34px;background:rgba(212,175,55,.05)}
.note-box h2{font-size:1.5rem}
.note-box p{color:var(--sand);font-weight:300}
/* Okruszek: gdzie jestem i którędy wracam. Drobny, bo to nie jest treść strony. */
.okruszek{margin:0 0 14px;font-size:.88rem;color:var(--sand);font-weight:300}
.okruszek a{color:var(--gold);text-decoration:none}
.okruszek a:hover{text-decoration:underline}
.okruszek span{margin:0 .45em;opacity:.5}
.usluga-tresc p{max-width:68ch}
.usluga-tresc h3{font-size:1.35rem;margin:1.7em 0 .5em}
.usluga-tresc h3:first-child{margin-top:0}
.usluga-tresc>p:first-child{font-size:1.1rem;color:var(--light)}
.usluga-box{position:sticky;top:96px}
.usluga-cena{font-family:var(--font-head);font-size:1.5rem;color:var(--gold);margin:.2em 0 .8em}
@media(max-width:900px){.usluga-box{position:static}}
.aside{border:1px solid var(--line);border-radius:var(--radius);padding:30px;
background:rgba(255,255,255,.035)}
.aside h2{font-size:1.4rem}
.aside p,.aside li{color:var(--sand);font-weight:300}
.portrait img{border-radius:var(--radius);border:1px solid var(--line-soft)}
.claim-box{display:flex;flex-direction:column;justify-content:center;align-items:flex-start;
border:2px dashed var(--line);padding:44px 38px;background:none}
.claim{font-family:var(--font-head);font-size:clamp(1.25rem,1.9vw,1.6rem);font-weight:600;
letter-spacing:-.015em;color:var(--light);margin:0 0 .45em;line-height:1.3}
.claim-sub{font-size:.9rem;color:var(--gold);margin:0;font-weight:400}
/* Listy z render_text(): wiersz „- " w bazie staje się punktem ze złotym znacznikiem. */
ul.check{list-style:none;margin:0 0 1em;padding:0;display:grid;gap:11px}
ul.check li{position:relative;padding-left:28px;color:var(--sand);font-weight:300}
ul.check li::before{content:"";position:absolute;left:2px;top:.62em;width:9px;height:9px;
border-radius:50%;background:var(--gold);opacity:.9}
/* Przełącznik ścieżki wyceny: dwie duże, klikalne karty zamiast pary radiobuttonów —
to jest pierwsza decyzja, jaką podejmuje odwiedzający, i musi być widoczna. */
.switch{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.switch-opt{position:relative;display:block;cursor:pointer}
.switch-opt input{position:absolute;opacity:0;width:0;height:0}
.switch-opt span{display:block;padding:16px 18px;border-radius:12px;
border:1px solid var(--line-soft);background:rgba(0,0,0,.2);transition:border-color .15s,background .15s}
.switch-opt strong{display:block;font-family:var(--font-head);font-size:1.05rem;color:var(--light)}
.switch-opt small{display:block;margin-top:3px;font-size:.82rem;color:var(--sand);font-weight:300;line-height:1.5}
.switch-opt input:checked + span{border-color:var(--gold);background:rgba(212,175,55,.1)}
.switch-opt input:focus-visible + span{outline:2px solid var(--gold);outline-offset:2px}
.field input[type=file]{padding:11px 13px;font-size:.9rem}
.field small.formnote{margin-top:2px;font-size:.84rem}
@media (max-width:860px){.switch{grid-template-columns:1fr}}
.contact-cta p{color:var(--sand);font-weight:300}
/* Słownik pojęć: hasło po lewej, objaśnienie po prawej, rozdzielone ściegiem — ten sam
układ co spis usług, bo to ta sama rodzina treści: pozycja i to, co za nią stoi. */
.glossary{display:grid;margin:0}
.glossary>div{display:grid;grid-template-columns:minmax(12rem,18rem) 1fr;gap:28px;
padding:24px 0;border-bottom:1px dashed rgba(34,23,13,.18)}
.glossary>div:last-child{border-bottom:0}
.glossary dt{font-weight:700;font-size:1.14rem;color:#150E06;margin:0}
.glossary dd{margin:0}
.glossary dd p{margin:0;color:#4A3A27;font-size:.95rem;line-height:1.66;font-weight:300;max-width:62ch}
@media (max-width:760px){
.glossary>div{grid-template-columns:1fr;gap:8px}
}
/* ── FAQ ───────────────────────────────────────────────────────────── */
.faq{border-bottom:1px solid var(--line-soft)}
.faq summary{cursor:pointer;list-style:none;padding:22px 40px 22px 0;position:relative;
font-family:var(--font-head);font-size:1.1rem;color:var(--light)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:6px;top:50%;transform:translateY(-50%);
color:var(--gold);font-size:1.5rem;font-family:var(--font-body);line-height:1}
.faq[open] summary::after{content:"–"}
.faq[open] summary{color:var(--gold)}
.faq-a{padding:0 0 22px}
.faq-a p,.faq-a li{color:var(--sand);font-weight:300}
/* ── kontakt i formularz ───────────────────────────────────────────── */
.contact-list{list-style:none;margin:0 0 18px;padding:0;display:grid;gap:14px}
.contact-list li{display:grid;grid-template-columns:110px 1fr;gap:14px;align-items:baseline;
padding-bottom:14px;border-bottom:1px solid var(--line-soft)}
.contact-list li:last-child{border-bottom:0;padding-bottom:0}
.contact-list span{font-size:.75rem;letter-spacing:.14em;text-transform:uppercase;color:var(--gold)}
.form{display:grid;gap:18px}
.field{display:grid;gap:7px}
.field label{font-size:.8rem;letter-spacing:.1em;text-transform:uppercase;color:var(--gold);font-weight:600}
.field input,.field select,.field textarea{
font:inherit;font-size:.97rem;color:var(--tx);background:rgba(0,0,0,.28);
border:1px solid var(--line-soft);border-radius:10px;padding:13px 15px;width:100%}
.field textarea{min-height:130px;resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--gold)}
.field select{appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--gold) 50%),
linear-gradient(135deg,var(--gold) 50%,transparent 50%);
background-position:calc(100% - 20px) calc(1.25em),calc(100% - 15px) calc(1.25em);
background-size:5px 5px,5px 5px;background-repeat:no-repeat}
.consent{display:grid;grid-template-columns:22px 1fr;gap:12px;align-items:start;
font-size:.88rem;color:var(--sand);font-weight:300;line-height:1.6}
.consent input{width:20px;height:20px;margin-top:3px;accent-color:var(--gold)}
.formnote{color:var(--sand);font-size:.93rem;font-weight:300}
/* Pole-pułapka na boty. Nie `display:none`: część botów pomija pola, których nie widać
w drzewie układu, więc zostaje w nim, ale poza ekranem. */
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.msg{padding:13px 17px;border-radius:10px;font-size:.94rem;margin-bottom:14px}
.msg-ok{background:rgba(212,175,55,.12);border:1px solid var(--line);color:var(--light)}
.msg-err{background:rgba(180,60,40,.16);border:1px solid rgba(220,90,70,.4);color:#FFD9D2}
.chips{display:flex;flex-wrap:wrap;gap:10px;justify-content:center}
.chip{display:inline-block;padding:9px 18px;border-radius:999px;border:1px solid var(--line);
font-size:.87rem;color:var(--sand);background:rgba(255,255,255,.03)}
.chip:hover{border-color:var(--gold);color:var(--gold);text-decoration:none}
/* ── dokumenty prawne ──────────────────────────────────────────────── */
.doc h3{margin-top:1.8em;font-size:1.25rem}
.doc h3:first-child{margin-top:0}
.doc p,.doc li{color:var(--sand);font-weight:300}
/* ── pas wezwania i stopka ─────────────────────────────────────────── */
/* Płaski pas w cieplejszym odcieniu skóry, obwiedziony ściegiem. Gradient plus poświata
dawały „banner”, którego ta strona nie potrzebuje — kontrast powierzchni wystarczy. */
.cta{padding:78px 0;background:var(--bg-2);
border-top:2px dashed var(--line);border-bottom:2px dashed var(--line)}
/* Bez własnej, węższej szerokości: cała strona stoi na jednej krawędzi po lewej, a wężSzy
kontener przesuwał ten pas o kilkadziesiąt pikseli i psuł tę linię. Długość wiersza
ogranicza samo `.lead`. */
.cta h2{margin-bottom:.35em;max-width:26ch}
.cta .lead{margin-left:0}
.cta .actions{display:flex;gap:14px;flex-wrap:wrap;margin-top:30px}
footer.site{background:#0D0905;border-top:1px solid var(--line-soft);padding:62px 0 34px;font-size:.93rem}
footer.site .cols{display:grid;grid-template-columns:1.5fr .8fr 1.7fr 1fr;gap:36px}
footer.site .logo-box img{height:calc(var(--logo-h) * 1.05);width:auto}
footer.site p{color:var(--sand);font-weight:300;font-size:.9rem;line-height:1.65}
footer.site ul{list-style:none;margin:0;padding:0;display:grid;gap:9px}
/* Lista miejscowości jest długa z rozmysłu (link z każdej podstrony do każdej strony
lądowania), więc łamie się na kolumny zamiast ciągnąć w dół. `display:block` jest tu
konieczne: grid ignoruje `columns`, a reguła wyżej ustawia grid wszystkim listom stopki. */
footer.site ul.footer-miasta{display:block;columns:2;column-gap:22px}
footer.site ul.footer-miasta li{break-inside:avoid;margin-bottom:9px}
footer.site a{color:var(--sand)}
footer.site a:hover{color:var(--gold)}
.footer-claim{font-family:var(--font-head);font-style:italic;color:var(--gold);margin-top:14px}
.legal-line{margin-top:36px;padding-top:20px;border-top:1px solid var(--line-soft);
font-size:.84rem;color:var(--sand);opacity:.75}
/* Dwa osobne w flexie ze space-between: podpis producenta przy lewej krawędzi,
dokumenty przy prawej. Przy jednym spanie wszystko zbijało się w lewo. */
.copy{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;
margin-top:22px;padding-top:20px;border-top:1px solid var(--line-soft);
font-size:.82rem;color:var(--sand);opacity:.8}
.sticky-call{display:none}
/* ══════════════════════ MODUŁ ZGÓD (core/gdpr.php) ══════════════════ */
.cc{position:fixed;z-index:9000;background:var(--bg-2);color:var(--tx);border:1px solid var(--line);
border-radius:16px;box-shadow:0 18px 44px -12px rgba(0,0,0,.8)}
.cc[hidden]{display:none}
.cc-box-left{left:16px;bottom:16px;width:min(440px,calc(100vw - 32px))}
.cc-box-right{right:16px;bottom:16px;width:min(440px,calc(100vw - 32px))}
.cc-bottom{left:12px;right:12px;bottom:12px;max-width:1160px;margin:0 auto}
.cc-in{padding:18px 20px}
.cc-bottom .cc-in{display:flex;gap:18px;align-items:center;justify-content:space-between;flex-wrap:wrap}
.cc-tx strong{display:block;font-family:var(--font-head);font-size:1.1rem;
color:var(--light);margin-bottom:4px}
.cc-tx p{margin:0 0 8px;font-size:.88rem;line-height:1.55;color:var(--sand)}
.cc-pol{font-size:.85rem;font-weight:600}
.cc-akcje{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}
.cc-bottom .cc-akcje{margin-top:0}
.cc-akcje .btn{white-space:nowrap;font-size:.85rem;padding:.6rem 1rem}
.ccm{position:fixed;inset:0;z-index:9100;background:rgba(10,7,4,.75);display:flex;
align-items:center;justify-content:center;padding:16px}
.ccm[hidden]{display:none}
.ccm-box{background:var(--bg-2);border:1px solid var(--line);border-radius:18px;width:min(640px,100%);
max-height:88vh;display:flex;flex-direction:column;overflow:hidden;box-shadow:0 26px 60px -20px rgba(0,0,0,.85)}
.ccm-head{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;
border-bottom:1px solid var(--line-soft)}
.ccm-head strong{font-family:var(--font-head);font-size:1.1rem;color:var(--light)}
.ccm-x{background:none;border:0;font-size:1.6rem;line-height:1;cursor:pointer;color:var(--sand);padding:0 4px}
.ccm-body{padding:6px 20px 12px;overflow:auto}
.ccm-kat{padding:14px 0;border-bottom:1px solid var(--line-soft)}
.ccm-kat:last-child{border-bottom:0}
.ccm-kat-top{display:flex;align-items:center;justify-content:space-between;gap:12px}
.ccm-kat-top strong{font-size:.98rem;color:var(--light)}
.ccm-zawsze{font-size:.76rem;font-weight:600;color:var(--sand);background:rgba(255,255,255,.06);
border-radius:999px;padding:3px 10px}
.ccm-desc{margin:6px 0 0;font-size:.87rem;line-height:1.55;color:var(--sand)}
.ccm-toggle{background:none;border:0;padding:6px 0 0;font:inherit;font-size:.83rem;font-weight:600;
color:var(--gold);cursor:pointer;text-decoration:underline}
.ccm-lista{margin-top:8px;overflow-x:auto}
.ccm-lista table{width:100%;border-collapse:collapse;font-size:.81rem}
.ccm-lista td{padding:6px 10px 6px 0;border-top:1px solid var(--line-soft);vertical-align:top;color:var(--sand)}
.ccm-lista code{background:rgba(255,255,255,.06);border-radius:5px;padding:1px 6px;font-size:.79rem}
.ccm-foot{display:flex;gap:10px;justify-content:flex-end;padding:14px 20px;
border-top:1px solid var(--line-soft);flex-wrap:wrap}
/* Przełącznik — natywny checkbox schowany, ale nadal to on decyduje (klawiatura działa). */
.ccm-sw{position:relative;display:inline-block;width:46px;height:26px;flex:0 0 auto}
.ccm-sw input{position:absolute;opacity:0;width:100%;height:100%;margin:0;cursor:pointer;z-index:2}
.ccm-sw span{position:absolute;inset:0;background:rgba(255,255,255,.18);border-radius:999px;transition:background .15s}
.ccm-sw span::after{content:"";position:absolute;top:3px;left:3px;width:20px;height:20px;background:#fff;
border-radius:50%;transition:transform .15s;box-shadow:0 1px 3px rgba(0,0,0,.35)}
.ccm-sw input:checked + span{background:var(--gold)}
.ccm-sw input:checked + span::after{transform:translateX(20px)}
.ccm-sw input:focus-visible + span{outline:2px solid var(--gold);outline-offset:2px}
/* Tekst tylko dla czytników ekranu. Bez tej klasy napis „Ustawienia prywatności”
renderuje się w pełnym rozmiarze w okrągłym przycisku i wypycha ikonę do zera. */
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
.cc-wroc{position:fixed;left:16px;bottom:16px;z-index:8000;width:44px;height:44px;border-radius:50%;
border:1px solid var(--line);background:#0D0905;color:var(--gold);cursor:pointer;display:flex;
align-items:center;justify-content:center;box-shadow:0 10px 24px -8px rgba(0,0,0,.8);
transition:transform .15s,box-shadow .15s}
.cc-wroc[hidden]{display:none}
.cc-wroc svg{flex:0 0 auto}
.cc-wroc:hover{transform:translateY(-2px);border-color:var(--gold)}
.cc-wroc:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
@media (prefers-reduced-motion:reduce){
*,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}
html{scroll-behavior:auto}
}
/* ══════════════════════ TELEFONY I TABLETY ══════════════════════════ */
@media (max-width:1040px){
header.site .wrap{gap:16px}
nav.main a{padding:10px 9px;font-size:.88rem}
}
@media (max-width:900px){
/* Menu zjeżdża pod nagłówek i rozwija się burgerem — w rzędzie nie ma już miejsca
na pięć pozycji plus logo plus przycisk. */
.burger{display:block}
nav.main{display:none;order:10;width:100%;flex-direction:column;gap:2px;
padding:10px 0 16px;border-top:1px solid var(--line-soft);margin-left:0}
nav.main.open{display:flex}
/* Na telefonie przełącznik zostaje w rzędzie nagłówka obok burgera — zwinięty zajmuje
tyle co jeden przycisk, więc nie potrzebuje własnego wiersza. Kolejność jest jawna:
bez niej `order:5` na samym przełączniku wypychało go ZA burgera i burger lądował
tuż przy logo, z pustą dziurą po prawej. */
.langs{order:4;margin-left:auto}
.nav-cta{order:5}
header.site .wrap{flex-wrap:wrap;min-height:72px;padding-top:10px;padding-bottom:10px}
.nav-cta{margin-left:8px}
.hero{padding:48px 0 56px}
.hero .wrap{grid-template-columns:1fr;gap:28px}
/* Zdjęcie i logo nad tekstem — na wąskim ekranie mają przywitać, a nie czekać pod spodem. */
.hero-logo,.hero-media{order:-1}
.hero-media img{aspect-ratio:16/10}
.hero-logo img{max-width:min(78%,300px)}
.two,.two.tekst{grid-template-columns:1fr;gap:30px}
footer.site .cols{grid-template-columns:1fr 1fr;gap:32px}
.cc-wroc{bottom:96px}
}
@media (max-width:640px){
body{font-size:16px}
.langs summary{padding:7px 8px}
.wrap{padding:0 18px}
/* Przycisk w nagłówku dubluje przyklejony pasek na dole i zabiera miejsce logo. */
.nav-cta .btn{display:none}
/* Górny pasek zawijał się na dwie linie i zjadał 90 px nad zgięciem. Telefon jest
w przyklejonym pasku, a miasto w nadpisie hero — nic tu nie ginie. */
.topbar{display:none}
.brand img{height:calc(var(--logo-h) * .9)}
header.site .wrap{min-height:64px}
.section{padding:48px 0}
.page-hero{padding:38px 0 42px}
.hero{padding:32px 0 44px}
.lead{font-size:1.04rem}
/* Przyciski na całą szerokość — kciukiem trafia się w cel, nie w krawędź. */
.hero .actions,.cta .actions{gap:10px}
.hero .actions .btn,.cta .actions .btn{width:100%}
.stats{grid-template-columns:1fr 1fr;gap:16px;margin-top:28px;padding-top:22px}
.card{padding:22px}
.grid{gap:16px}
.note-box,.aside,.claim-box{padding:24px}
.contact-list li{grid-template-columns:1fr;gap:3px}
.svc-group{margin-bottom:40px}
footer.site{padding-bottom:100px}
footer.site .cols{grid-template-columns:1fr;gap:28px}
footer.site ul.footer-miasta{columns:2;column-gap:18px}
.copy{font-size:.8rem}
.cc-box-left,.cc-box-right,.cc-bottom{left:8px;right:8px;bottom:8px;width:auto}
.cc-akcje{width:100%}
.cc-akcje .btn{flex:1 1 100%;text-align:center}
.cc-wroc{bottom:96px;width:38px;height:38px}
}
@media (max-width:380px){
.wrap{padding:0 14px}
.btn{font-size:.92rem;padding:12px 18px}
.stats{grid-template-columns:1fr}
h1{font-size:1.9rem}
}
/* Przyklejony pasek z telefonem — najkrótsza droga do kontaktu na komórce. */
@media (max-width:900px){
.sticky-call{
display:flex;position:fixed;inset:auto 0 0 0;z-index:60;
padding:10px 16px calc(10px + env(safe-area-inset-bottom,0px));
background:rgba(13,9,5,.95);backdrop-filter:blur(8px);
border-top:1px solid var(--line);
}
.sticky-call .btn{width:100%}
body{padding-bottom:88px}
}
/* Powiększone cele dotyku: linki w stopce miały 18 px wysokości. */
@media (pointer:coarse){
footer.site a{padding:10px 0;line-height:1.45}
.topbar a{padding:9px 0}
nav.main a{padding:14px 12px}
.faq summary{padding-top:20px;padding-bottom:20px}
.contact-list a{display:inline-block;padding:6px 0}
}
/* ══════════════════════ ODŚWIEŻENIE WYGLĄDU (10.2026) ════════════════════
Na prośbę właściciela: „żeby strona nie była taka jednolita”. Trzy zmiany, wszystkie
z karty znaku, nic spoza niej:
1. Kroje z karty — Playfair Display w nagłówkach, Montserrat w tekście (core/fonts.php,
zestaw `playfair`). Szeryf robi tu to, czego nie zrobi żaden kolor: mówi „rzemiosło”.
2. Więcej powierzchni z karty znaku (kolory i rytm zmieniła druga runda — patrz blok
„JASNA TREŚĆ, CIEMNE AKCENTY” na końcu arkusza).
3. Grafika w nagłówkach podstron (core/art.php) — każda o czymś, każda ze ściegu.
Nadal bez: gradientowych poświat, wersalikowych nadpisów, ikon z zestawu. */
:root{
--sand-ink:#2A1B0E; /* tekst na beżu */
}
/* ── typografia ───────────────────────────────────────────────────────── */
h1{font-weight:600;font-size:clamp(2.15rem,4.4vw,3.7rem);line-height:1.05;letter-spacing:-.018em}
h2{font-weight:600;font-size:clamp(1.65rem,2.7vw,2.45rem);line-height:1.12;letter-spacing:-.012em}
h3{font-weight:600;font-size:1.2rem;letter-spacing:-.005em}
/* Etykiety bez wersalików i bez rozstrzelenia — to był ostatni szablonowy nadpis na stronie
(nagłówki stopki, etykiety pól, opisy w danych kontaktowych). Zostają zdaniem. */
h4{text-transform:none;letter-spacing:0;font-family:var(--font-head);font-size:1.12rem;font-weight:600}
.field label{text-transform:none;letter-spacing:0;font-size:.9rem;color:var(--sand);font-weight:500}
.contact-list span{text-transform:none;letter-spacing:0;font-size:.88rem;color:var(--sand);opacity:.75}
.ba-tag{text-transform:none;letter-spacing:.02em;font-size:.78rem}
.lead{font-weight:400}
.steps .n{font-size:2.6rem;font-weight:500;margin-bottom:10px}
/* ── kadr otwierający: dwie próbki skóry, ramka zszywana przy wejściu ─── */
/* Szwy w tle są teraz statyczne: jedynym ruchem kadru jest igła na ramce zdjęcia. */
.szew-r{animation:none;stroke-dashoffset:0}
.szew-g{opacity:.11}
.hero .wrap{grid-template-columns:1.08fr .92fr;gap:64px}
.hero-kadr{position:relative;padding:0 0 52px 54px;max-width:520px;justify-self:end;width:100%}
.kadr-glowny{position:relative;margin:0}
.kadr-glowny img{width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:2px;
box-shadow:0 46px 80px -40px rgba(0,0,0,.95)}
.kadr-szew{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible}
/* Druga próbka: odbitka w jasnej oprawie, przeszyta ściegiem w kolorze brązu — jak próbnik
skór przypięty do zdjęcia zlecenia. */
.kadr-probka{position:absolute;left:0;bottom:0;width:46%;margin:0;z-index:2;transform:rotate(-5deg);
border:6px solid var(--bone);outline:2px dashed rgba(91,58,30,.75);outline-offset:-13px;
box-shadow:0 28px 50px -22px rgba(0,0,0,.95);animation:nbd-rozloz 1s cubic-bezier(.2,.8,.2,1) 2.6s both}
.kadr-probka img{width:100%;aspect-ratio:1;object-fit:cover}
@keyframes nbd-rozloz{from{opacity:0;translate:0 26px}}
/* ── elementy rysunków SVG (core/art.php) ─────────────────────────────── */
.art-szew{fill:none;stroke:var(--gold);stroke-width:2.4;stroke-dasharray:9 7;stroke-linecap:round}
.art-szew.gruby{stroke-width:3}
.art-szew.xl{stroke-width:5.5;stroke-dasharray:14 10}
.art-szew.cienki{stroke-width:1.6;stroke-dasharray:6 5}
.art-szew.stale{opacity:.5}
/* Maska odsłaniająca ścieg — ten sam mechanizm co szwy w tle kadru otwierającego. */
.art-r{fill:none;stroke:#fff;stroke-width:34;stroke-dasharray:1 1;stroke-dashoffset:1;
animation:nbd-szyj-od 1.6s cubic-bezier(.35,0,.2,1) both}
@keyframes nbd-szyj-od{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
.art-l{fill:none;stroke:var(--gold);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.art-l.cienka{stroke-width:1.5}
.art-l.zlota{stroke:#B8902B}
.rys{stroke-dasharray:1;stroke-dashoffset:1;animation:nbd-szyj-od 1.2s cubic-bezier(.35,0,.2,1) var(--d,0s) both}
.art-skora{fill:rgba(122,66,32,.6)}
.rys.art-skora{animation:nbd-szyj-od 1.2s cubic-bezier(.35,0,.2,1) var(--d,0s) both,nbd-wypelnij .8s ease 1s both}
@keyframes nbd-wypelnij{from{fill-opacity:0}}
.art-wyp{fill:var(--gold)}
.art-igla-c{fill:#EFE7DA;stroke:#7D6E5B;stroke-width:.6}
.art-ucho{fill:#1A120B}
.art-nic{fill:none;stroke:var(--gold);stroke-width:1.4;stroke-linecap:round}
.art-nic.gruba{stroke-width:2.6}
.art-flesz rect{fill:#fff;opacity:0;animation:nbd-flesz .55s ease 1.2s both}
@keyframes nbd-flesz{0%{opacity:0}30%{opacity:.7}100%{opacity:0}}
.art-metka{transform-box:view-box;transform-origin:306px 214px;animation:nbd-metka .9s cubic-bezier(.3,1.5,.5,1) 2.45s both}
@keyframes nbd-metka{from{opacity:0;transform:rotate(-16deg) translateX(-14px)}}
.art-skora-pl{fill:var(--brown);stroke:rgba(212,175,55,.35);stroke-width:1.5}
.art-rozdarcie{fill:none;stroke:#0D0905;stroke-width:7;stroke-linejoin:miter;stroke-linecap:round}
.art-scieg{fill:none;stroke:var(--gold);stroke-width:3;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:1;
animation:nbd-szyj-od .22s ease-out var(--d,0s) both}
.art-supel{fill:var(--gold);transform-box:fill-box;transform-origin:center;animation:nbd-supel .45s cubic-bezier(.3,1.6,.5,1) 2s both}
@keyframes nbd-supel{from{transform:scale(0)}}
.art-wjazd{animation:nbd-wypelnij-l .6s ease var(--d,0s) both}
@keyframes nbd-wypelnij-l{from{opacity:0}}
/* ── nagłówki podstron z ilustracją ───────────────────────────────────── */
.page-hero.has-art .wrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(240px,400px);column-gap:64px;align-items:center}
.page-hero.has-art .wrap>*{grid-column:1}
.page-hero.has-art .ph-art{grid-column:2;grid-row:1 / span 5;align-self:center}
.page-hero.has-art .wrap::after{grid-column:1 / -1}
.ph-art svg{width:100%;height:auto;display:block;overflow:visible}
/* Drugi ton nagłówka: brąz premium. Usługi, O pracowni i strony miast zaczynają się innym
kolorem niż wycena czy FAQ — wchodząc z menu widać, że to inna część serwisu. */
.page-hero.ton-braz{background:#33210F}
/* Próbki zdjęć w nagłówku /uslugi i na podstronie usługi — rozkładane raz przy wejściu. */
.ph-probki{position:relative;height:320px}
.probka{position:absolute;width:54%;border:5px solid var(--bone);outline:2px dashed rgba(91,58,30,.7);outline-offset:-11px;
box-shadow:0 26px 50px -24px rgba(0,0,0,.95);animation:nbd-rozloz .9s cubic-bezier(.2,.8,.2,1) both}
.probka img{width:100%;aspect-ratio:4/5;object-fit:cover}
.probka.p0{left:0;top:26px;transform:rotate(-7deg);animation-delay:.1s}
.probka.p1{left:23%;top:0;transform:rotate(2deg);z-index:2;animation-delay:.28s}
.probka.p2{right:0;top:40px;transform:rotate(8deg);z-index:3;animation-delay:.46s}
.ph-jedna{height:auto}
.ph-jedna .probka.p0{position:relative;width:74%;margin-left:auto;top:0;left:auto;transform:rotate(3deg)}
/* ── mapa dojazdów ────────────────────────────────────────────────────── */
.mapa{width:100%;height:auto;display:block}
.m-brzeg{fill:none;stroke:rgba(217,194,165,.4);stroke-width:1.8;stroke-linejoin:round;stroke-linecap:round}
.m-morze{fill:rgba(217,194,165,.45);font-family:var(--font-head);font-style:italic;font-size:15px}
.art-szew.trasa{stroke-width:1.7;stroke-dasharray:5 5;opacity:.85}
.art-szew.trasa-ja{stroke-width:3.2;stroke-dasharray:9 6}
.art-szew.trasa-tlo{stroke-width:1;stroke-dasharray:3 5;opacity:.22}
.m-pkt circle{fill:var(--gold);stroke:#1E1409;stroke-width:2}
.m-pkt:hover circle,.m-pkt:focus-visible circle{fill:var(--light)}
.m-pkt.tlo circle{fill:rgba(212,175,55,.4);stroke-width:1}
.m-pkt.ja circle{fill:var(--light);stroke:var(--gold);stroke-width:3}
.m-nazwa text{fill:var(--light);font-family:var(--font-body);font-size:13px;font-weight:500;
paint-order:stroke;stroke:#1E1409;stroke-width:3.5px;stroke-linejoin:round}
.m-nazwa:hover text{fill:var(--gold)}
.m-nazwa.ja text{fill:var(--gold);font-size:17px;font-weight:700}
.m-gdansk circle{fill:var(--gold)}
.m-gdansk .m-pierscien{fill:none;stroke:var(--gold);stroke-width:1.6;stroke-dasharray:4 4}
.m-gdansk text{fill:var(--light);font-family:var(--font-head);font-size:21px;font-weight:700;
paint-order:stroke;stroke:#1E1409;stroke-width:4px;stroke-linejoin:round}
.m-gdansk .m-adres{font-family:var(--font-body);font-size:12px;font-weight:400;fill:var(--sand)}
.mapa.mala .m-adres{display:none}
/* Duża mapa na /kontakt szyje trasy dopiero przy wjeździe w kadr (skrypt dodaje czeka → rysuj);
bez skryptu jest narysowana od razu. */
.mapa-duza{max-width:780px;margin-left:auto;margin-right:auto}
.mapa-duza .art-r{animation:none;stroke-dashoffset:0}
.mapa-duza.czeka .art-r{stroke-dashoffset:1}
.mapa-duza.rysuj .art-r{animation:nbd-szyj-od 1.3s cubic-bezier(.35,0,.2,1) both}
/* ── powierzchnie ─────────────────────────────────────────────────────── */
.section.sand{background:var(--sand);color:var(--sand-ink)}
.section.sand h1,.section.sand h2,.section.sand h3{color:#1A120B}
.section.sand p,.section.sand li,.section.sand .lead{color:#3D2A17}
.section.sand .hint{color:#5E4A33}
.section.sand .steps li::before{border-top-color:var(--brown)}
.section.sand .steps .n{color:var(--brown)}
.section.sand .steps p{color:#3D2A17}
.section.sand ul.check li{color:#3D2A17}
.section.sand ul.check li::before{background:var(--brown)}
.section.sand .btn-line{color:var(--brown);border-color:rgba(26,18,11,.35)}
.section.sand .btn-line:hover{border-color:var(--brown);color:#1A120B}
.section.sand .card,.section.bone .card{background:rgba(248,245,235,.5);border-color:rgba(26,18,11,.14)}
.section.sand .card p,.section.bone .card p{color:#3D2A17}
.section.sand .card .icon,.section.bone .card .icon{background:rgba(91,58,30,.1);border-color:rgba(91,58,30,.3)}
.section.sand .card .icon svg,.section.bone .card .icon svg{stroke:var(--brown)}
/* Podpisy zdjęć na jasnym tle były jasne na jasnym — nieczytelne (podstrony usług). */
.section.bone .shot figcaption,.section.sand .shot figcaption{color:#4A3A27}
.section.bone .claim-box{border-color:rgba(26,18,11,.3)}
.section.bone .claim{color:#1A120B}
.section.bone .claim-sub{color:#7A4E12}
@media (prefers-reduced-motion:reduce){
*,*::before,*::after{animation-delay:0s!important}
.art-igla{display:none}
}
@media (max-width:900px){
/* Ta reguła MUSI tu być: dwukolumnowy .hero .wrap wyżej w tym bloku stoi później niż reguła
mobilna z początku arkusza i bez powtórzenia wygrywał także na telefonie (zdjęcie jako
wąski pasek obok tekstu ściśniętego do kilku słów w wierszu). */
.hero .wrap{grid-template-columns:1fr;gap:30px}
.hero-kadr{order:-1;justify-self:center;max-width:380px;padding:0 0 40px 40px}
.page-hero.has-art .wrap{grid-template-columns:1fr}
.page-hero.has-art .ph-art{grid-column:1;grid-row:auto;max-width:330px;margin-top:22px}
.page-hero.has-art .ph-mapa{max-width:460px}
.ph-probki{height:250px}
}
@media (max-width:640px){
.ph-probki{height:210px}
.hero-kadr{max-width:320px}
}
.m-nazwa.tlo text{fill:rgba(239,231,218,.55);font-size:12px}
.mapa.mala .m-pkt.tlo circle{r:3.5px}
.ph-mapa{background:rgba(13,9,5,.35);border:2px dashed rgba(212,175,55,.28);padding:10px}
.ph-jedna .probka.p0{width:60%}
.ph-mapa svg{overflow:hidden}
.mapa-duza{margin-bottom:0}
.mapa-duza figcaption{margin-top:10px;text-align:center;font-size:.88rem;color:var(--sand);opacity:.8}
/* ══════════════════════ JASNA TREŚĆ, CIEMNE AKCENTY (10.2026, druga runda) ═══════════════
Właściciel po pierwszej rundzie: „cała czarna”, a koniakowy pas wezwania — „sraczkowaty”.
Paletę dobieraliśmy razem na żywej stronie (podgląd wstrzykiwany w przeglądarce) i stanęło na:
- CIEMNE zostaje tam, gdzie robi luksus: nagłówek, kadr otwierający, pas „przed i po”, stopka
i pojedyncze akcenty w treści (.section.ciemna — proces na głównej, mapa na kontakcie,
ramka z hasłem marki);
- TREŚĆ jest jasna: NB Jasny, kość, beż z karty znaku — rozdział po rozdziale inny odcień;
- pas wezwania jest ZŁOTY z ciemnym tekstem — najmocniejszy kolor marki, a nie brąz.
Mechanizm: w jasnych sekcjach przemapowujemy zmienne, których używa cały arkusz (--light dla
nagłówków, --sand dla tekstu, --tx, --gold dla linków i ściegów, --line*). Dzięki temu karty,
FAQ, formularz, okruszek i ilustracje SVG przechodzą na jasne tło same, bez kopii każdej reguły.
Złoto na jasnym jest przyciemnione do #7A560F — jasne #D4AF37 miało tam za mały kontrast. */
main .section:not(.ciemna){
--light:#1A120B;--tx:#2A1B0E;--sand:#5A4632;--gold:#7A560F;
--line-soft:rgba(26,18,11,.13);--line:rgba(138,98,18,.42);
background:var(--light-bg,#F8F5EB);color:#2A1B0E}
/* Audyt 7.10.2026: cztery prawie identyczne beże czytały się jak broszura. Jasny jest teraz JEDEN
(kość); sąsiednie jasne sekcje rozdziela szew, a nie kolejny odcień. */
main .section:not(.ciemna){--light-bg:#EDE4D3}
main .section:not(.ciemna)+.section:not(.ciemna){border-top:1px dashed rgba(138,98,18,.38)}
main .page-hero.ton-braz{background:#1C130B}
main .section:not(.ciemna) :is(.card,.svc-box,.aside){background:rgba(255,255,255,.62);border-color:rgba(26,18,11,.12)}
main .section:not(.ciemna) .field :is(input,select,textarea){background:#fff;color:#1A120B;border-color:rgba(26,18,11,.18)}
main .section:not(.ciemna) .switch-opt span{background:#fff;border-color:rgba(26,18,11,.15)}
main .section:not(.ciemna) .switch-opt input:checked + span{background:#F6EBCB;border-color:#7A560F}
main .section:not(.ciemna) .chip{background:rgba(255,255,255,.6)}
/* Etykiety „przed / po” leżą na zdjęciu, nie na tle sekcji — zostają jasne na ciemnym. */
main .ba-tag{color:#EDE4D3;background:rgba(20,14,8,.82);border-color:rgba(239,231,218,.15)}
/* Próbki zdjęć w nagłówkach: na jasnym tle potrzebują mocniejszego cienia, żeby się odkleić. */
main .page-hero .probka{box-shadow:0 26px 50px -22px rgba(26,18,11,.55)}
/* Ciemny akcent w treści — przywraca paletę z góry arkusza (zmiennych nie przemapowujemy). */
.section.ciemna{background:var(--ink)}
.section.ciemna .steps .n{font-size:4rem;color:var(--gold)}
/* Ramka z hasłem marki na jasnym tle: ciemna „metka” przeszyta złotem. */
main .section.bone .claim-box{background:var(--ink);border:2px dashed rgba(212,175,55,.55);padding:56px 44px}
main .section.bone .claim{color:#F8F5EB;font-size:clamp(1.5rem,2.4vw,2.1rem)}
main .section.bone .claim-sub{color:#D4AF37}
/* Pas wezwania: PRAWDZIWA SKÓRA zamiast płaskiego koloru. Koniak („sraczkowaty”) i złoto
(„nie przekonuje”) właściciel odrzucił; zostało zdjęcie pikowania z sofy, którą pracownia
sama odnowiła (assets/tlo-skora-pikowana.jpg — wycinek z realizacji, nie zdjęcie z banku).
Przyciemnienie idzie od lewej, bo tam stoi tekst; po prawej skóra zostaje widoczna. */
.cta{position:relative;overflow:hidden;background:#1A120B url("/assets/tlo-skora-pikowana.jpg") center/cover no-repeat;
border-top:2px dashed rgba(212,175,55,.55);border-bottom:2px dashed rgba(212,175,55,.55)}
.cta::before{content:"";position:absolute;inset:0;pointer-events:none;
background:linear-gradient(90deg,rgba(20,14,8,.94) 0%,rgba(20,14,8,.84) 42%,rgba(20,14,8,.35) 100%)}
.cta .wrap{position:relative}
.cta h2{color:var(--light)}
.cta .lead{color:#E6D7C2}
.cta .btn-ghost.on-dark{border-color:rgba(248,245,235,.55);color:var(--light)}
.cta .btn-ghost.on-dark:hover{border-color:var(--gold);color:var(--gold)}
@media (max-width:760px){.cta::before{background:rgba(20,14,8,.82)}}
/* Mała mapa w jasnym nagłówku strony miasta ma własne ciemne pole — wracają w nim kolory
z ciemnej palety, inaczej podpisy byłyby ciemne na ciemnym. */
main .page-hero .ph-mapa{background:#1E1409;border-color:rgba(212,175,55,.35);
--gold:#D4AF37;--light:#F8F5EB;--sand:#D9C2A5;--tx:#EFE7DA}
/* ── opinie klientów: slider (core/opinie.php) ──────────────────────────── */
/* Nagłówek po lewej, strzałki po prawej w tej samej linii — sterowanie stoi przy treści,
którą przewija, a nie pod nią, gdzie na telefonie trzeba by go szukać. */
.opinie-glowa{display:flex;align-items:flex-end;justify-content:space-between;gap:24px}
.opinie-glowa .intro{margin-bottom:28px}
.opinie-nawig{display:flex;gap:10px;margin-bottom:34px;flex:0 0 auto}
.op-strz{width:52px;height:52px;border-radius:50%;border:2px dashed var(--line);background:transparent;
color:var(--light);font-size:1.25rem;cursor:pointer;transition:border-color .15s,background .15s,color .15s}
.op-strz:hover:not(:disabled){border-color:var(--gold);border-style:solid;background:var(--gold);color:#1A120B}
.op-strz:disabled{opacity:.3;cursor:default}
.op-strz:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
/* Tor: trzy karty na szerokim ekranie, dwie na tablecie, jedna z kawałkiem następnej na telefonie
(wystający brzeg to jedyna podpowiedź „przesuń”, która działa bez słów). */
.opinie-tor{list-style:none;margin:0;padding:6px 2px 18px;display:grid;grid-auto-flow:column;
grid-auto-columns:calc((100% - 2 * 24px) / 3);column-gap:24px;overflow-x:auto;
scroll-snap-type:x mandatory;scroll-behavior:smooth;overscroll-behavior-x:contain;scrollbar-width:none}
.opinie-tor::-webkit-scrollbar{display:none}
.opinie-tor:focus-visible{outline:2px solid var(--gold);outline-offset:6px}
.opinia{scroll-snap-align:start;margin:0;padding:30px 28px 26px;display:flex;flex-direction:column;
background:#FFFDF8;border:1px solid rgba(26,18,11,.1);border-top:3px solid var(--gold);
box-shadow:0 18px 36px -26px rgba(26,18,11,.45)}
.opinia blockquote{margin:14px 0 22px;font-family:var(--font-head);font-size:1.14rem;line-height:1.55;color:#1A120B;flex:1}
.opinia-autor{margin:0;padding-top:16px;border-top:1px dashed rgba(26,18,11,.18);font-weight:600;font-size:.95rem;color:#2A1B0E}
.opinia-autor span{display:block;font-weight:400;font-size:.8rem;color:#7A6650;margin-top:2px}
.gwiazdki{display:inline-flex;gap:3px;font-size:1.15rem;line-height:1}
.gwiazdki i{font-style:normal;color:#C9A227}
.gwiazdki i.pusta{color:rgba(26,18,11,.16)}
.opinie-kropki{display:flex;gap:8px;justify-content:center;margin-top:10px;min-height:10px}
.opinie-kropki i{width:8px;height:8px;border-radius:50%;background:rgba(26,18,11,.18);transition:background .2s,transform .2s}
.opinie-kropki i.on{background:var(--gold);transform:scale(1.35)}
.opinie-link{margin:22px 0 0;display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.opinie-srednia{font-size:.95rem;color:var(--sand)}
.opinie-srednia b{font-family:var(--font-head);font-size:1.5rem;color:var(--light);margin-right:2px}
@media (max-width:1000px){.opinie-tor{grid-auto-columns:calc((100% - 24px) / 2)}}
@media (max-width:620px){
.opinie-tor{grid-auto-columns:86%;column-gap:16px}
.opinie-glowa{align-items:flex-start}
.opinie-nawig{display:none!important} /* na telefonie przewija się palcem; kropki zostają */
}
/* ── strona miasta: sąsiedzi i zdjęcia przy tekście ───────────────────── */
.sasiedzi{list-style:none;margin:14px 0 18px;padding:0;display:grid;gap:0}
.sasiedzi li{display:flex;justify-content:space-between;gap:16px;padding:12px 0;border-bottom:1px dashed var(--line)}
.sasiedzi a{font-family:var(--font-head);font-size:1.15rem}
.sasiedzi span{color:var(--sand);font-size:.9rem;white-space:nowrap}
.landing-foty{display:grid;gap:22px;align-content:start}
/* ══════════════════════ MIĘKKIE KSZTAŁTY (10.2026, trzecia runda) ═══════════════════════
Właściciel: „strona jest strasznie kwadratowa”. Pierwsza wersja trzymała promień 3 px z założeniem
„tapicerka nie ma zaokrągleń” — błędnym: skóra jest miękka, poduszki, siedziska i zagłówki są
zaokrąglone, a przeszycie idzie po łuku. Teraz:
- sekcje układają się na sobie jak poduszki: każda następna nachodzi na poprzednią i ma duży
promień u góry — zamiast prostego cięcia przez całą szerokość ekranu;
- kadr otwierający ma kształt łuku (ścieg igły w core/art.php idzie po tym samym łuku);
- zdjęcia, karty, mapa i slider dostają wspólny, wyraźny promień; przyciski są pigułkami,
a przeszyte obwódki zostają — ścieg na zaokrągleniu wygląda jak prawdziwe przeszycie. */
:root{--radius:18px;--r-duzy:28px;--poduszka:0px}
/* Sekcje-poduszki (nachodzenie z zaokrąglonymi rogami) — WYCOFANE na prośbę właściciela:
rogi na krawędziach ekranu czytały się jak wycięcia. Przejścia między sekcjami są proste;
miękkie zostają karty, zdjęcia, przyciski i łuk kadru otwierającego. */
/* Przyciski: pigułki. Przeszyta obwódka drugiego przycisku zostaje — teraz biegnie po łuku. */
.btn{border-radius:999px;padding-left:30px;padding-right:30px}
nav.main a{border-radius:999px}
.burger{border-radius:999px}
/* Kadr otwierający: łuk. Proporcje promieni odpowiadają ścieżce ściegu (viewBox 400×500). */
.kadr-glowny img{border-radius:50% 50% 16px 16px / 40% 40% 16px 16px}
.kadr-probka{border-radius:18px;transform:rotate(-6deg)}
.kadr-probka img{border-radius:12px}
/* Zdjęcia i kontenery. */
.shot img,.ba-box,.portrait img,.hero-media img{border-radius:var(--radius)}
.card,.aside,.note-box,.svc-box,.claim-box,.opinia,.ph-mapa,.landing-foty .shot{border-radius:var(--radius)}
.card,.svc-box{overflow:hidden}
.probka{border-radius:16px}
.probka img{border-radius:10px}
.proof-shot{padding:0 24px}
.proof-shot .ba-box{border-radius:var(--r-duzy);border:1px solid var(--line)}
.proof-shot .shot img{border-radius:0}
.mapa-duza svg{border-radius:var(--r-duzy)}
.opinia{border-top:0;box-shadow:0 18px 40px -26px rgba(26,18,11,.5),inset 0 3px 0 var(--gold)}
.field input,.field select,.field textarea{border-radius:14px}
.switch-opt span{border-radius:16px}
.chip{border-radius:999px}
.op-strz{border-radius:50%}
/* Kafelki usług: rozdarcie zostaje, ale górne rogi zdjęcia idą za zaokrągleniem kafelka. */
.svc-box-img img{border-radius:var(--radius) var(--radius) 0 0}
/* Pas czterech obszarów na głównej: zamiast tabeli z kreskami — cztery zaokrąglone pola. */
.domains{gap:18px;border:0}
.domains>div{border:2px dashed var(--line);border-radius:var(--radius);padding:0 0 26px;overflow:hidden}
.domains>div:first-child{border-left:2px dashed var(--line)}
.domains>div:not(.has-img){padding-top:30px}
.domains .card-img{margin:0 0 18px}
.domains .card-img img{border-radius:0}
.domains h3,.domains p{padding:0 18px}
@media (max-width:900px){
:root{--r-duzy:22px}
.domains>div{border:2px dashed var(--line)!important}
}
@media (max-width:640px){
:root{--radius:14px}
.proof-shot{padding:0 14px}
}
/* ══════════════════════ ZAJAWKA I SZLIF (10.2026, czwarta runda) ═══════════════════════
Właściciel: „żeby nie wyglądało na AI”, „zajebistość i delikatność”, „nowoczesność”, „animacje,
tła z zajawkami — pobaw się CSS i SVG”. Wszystko poniżej jest z tego samego świata — skóra,
nić, pikowanie — i wszystko ma wyłącznik przy prefers-reduced-motion na końcu bloku. */
/* ── szlif: lżej, więcej powietrza, cieńsze linie ───────────────────────── */
h1{font-weight:500;font-size:clamp(2.4rem,5vw,4.4rem);letter-spacing:-.025em;line-height:1.02}
h2{font-weight:500;font-size:clamp(1.8rem,3vw,2.75rem);letter-spacing:-.018em}
.lead{font-weight:300;font-size:1.14rem}
.section{padding-top:104px;padding-bottom:calc(104px + var(--poduszka) * .6)}
.intro{margin-bottom:46px}
/* Ścieg zostaje tylko tam, gdzie jest znakiem (ramka kadru, kroki, pas wezwania, hasło marki);
pudełka i przyciski dostają cienką, spokojną linię albo miękki cień. */
.btn-line,.btn-ghost{border-width:1px;border-style:solid}
.domains>div{border:1px solid var(--line-soft)!important;box-shadow:0 22px 44px -34px rgba(26,18,11,.55);background:rgba(255,255,255,.45)}
main .section:not(.ciemna) :is(.card,.svc-box,.aside){border-color:rgba(26,18,11,.07);box-shadow:0 24px 48px -36px rgba(26,18,11,.5)}
.page-hero .wrap::after{border-top-width:1px;opacity:.6}
hr.stitch{border-top-width:1px}
/* Spójna kolorystyka zdjęć: zdjęcia z telefonu, robione latami w różnym świetle, dostają jedną,
delikatną korekcję — trochę ciepła, mniej krzykliwego nasycenia. Jak w sesji, a nie w albumie. */
/* Ta sama korekcja na „przed” i „po” — inaczej porównanie byłoby nieuczciwe. */
main img{filter:saturate(.9) contrast(1.04) sepia(.06)}
/* Przybliżenie zdjęcia pod kursorem — ruch tylko w odpowiedzi na rękę. */
.svc-box-img,.card-img,.domains .card-img{overflow:hidden}
.svc-box-img img,.card-img img{transition:transform .9s cubic-bezier(.2,.7,.2,1)}
.svc-box:hover .svc-box-img img,.domains>div:hover .card-img img{transform:scale(1.045)}
/* Szklany nagłówek po przewinięciu. */
header.site{transition:background .35s,box-shadow .35s,border-color .35s}
header.site.przewiniety{background:rgba(20,14,8,.72);backdrop-filter:blur(18px) saturate(1.3);
-webkit-backdrop-filter:blur(18px) saturate(1.3);box-shadow:0 10px 30px -18px rgba(0,0,0,.7)}
/* Połysk na złotym przycisku — przebiega raz przy najechaniu, jak światło po lakierowanej skórze. */
.btn-primary{position:relative;overflow:hidden;isolation:isolate}
.btn-primary::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;transform:translateX(-120%);
background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.55) 50%,transparent 70%)}
.btn-primary:hover::after{transform:translateX(120%);transition:transform .8s cubic-bezier(.2,.7,.2,1)}
.btn-primary:hover{background:var(--cta)}
/* ── tło z pikowaniem chesterfield w jasnych sekcjach ───────────────────── */
/* Romb z guziczkami w narożnikach — dokładnie to, co widać na pikowanej sofie z realizacji.
Wzór jest ledwo widoczny i wygaszony do środka (maska), żeby tekst stał na czystym tle,
a wzór „wychodził” dopiero przy krawędziach ekranu. */
main .section.ciemna::before,main .page-hero::before{
content:"";position:absolute;inset:0;pointer-events:none;z-index:0;border-radius:inherit;
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='96' height='96' viewBox='0 0 96 96'%3E%3Cg fill='none' stroke='%23D4AF37' stroke-opacity='.07' stroke-width='1'%3E%3Cpath d='M0 48 L48 0 L96 48 L48 96 Z'/%3E%3Cpath d='M48 0 Q44 24 48 48 Q52 72 48 96' stroke-opacity='.05'/%3E%3Cpath d='M0 48 Q24 52 48 48 Q72 44 96 48' stroke-opacity='.05'/%3E%3C/g%3E%3Cg fill='%23D4AF37' fill-opacity='.14'%3E%3Ccircle cx='48' cy='0' r='2.4'/%3E%3Ccircle cx='0' cy='48' r='2.4'/%3E%3Ccircle cx='96' cy='48' r='2.4'/%3E%3Ccircle cx='48' cy='96' r='2.4'/%3E%3C/g%3E%3C/svg%3E");
-webkit-mask-image:radial-gradient(ellipse 70% 80% at 50% 45%,transparent 35%,#000 100%);
mask-image:radial-gradient(ellipse 70% 80% at 50% 45%,transparent 35%,#000 100%)}
main .section.ciemna,main .page-hero{position:relative}
main .section>.wrap,main .page-hero>.wrap{position:relative;z-index:1}
/* ── złota nić w ciemnych sekcjach, szyta przewijaniem ──────────────────── */
.section.ciemna{position:relative;overflow:hidden}
.nic-tlo{position:absolute;inset:0;pointer-events:none;z-index:0;opacity:.22}
.nic-tlo svg{width:100%;height:100%;display:block}
.nic-sz{fill:none;stroke:var(--gold);stroke-width:2;stroke-dasharray:10 8;stroke-linecap:round;vector-effect:non-scaling-stroke}
.nic-r{fill:none;stroke:#fff;stroke-width:40;stroke-dasharray:1 1;stroke-dashoffset:0}
@supports (animation-timeline: view()){
.nic-r{animation:nbd-szyj-od linear both;animation-timeline:view();animation-range:entry 10% cover 65%}
}
/* ── wjazd elementów przy przewijaniu ──────────────────────────────────── */
/* Pierwsza wersja była „przyklejona” do pozycji przewijania (animation-timeline): w trakcie ruchu
elementy wisiały półprzezroczyste i niedoodsłonięte — właściciel: „to przewijanie jest słabe”.
Teraz element wjeżdża RAZ, kiedy pojawi się w kadrze, płynnie i do końca (skrypt w index.php
nadaje .wjazd → .widoczny). To, co widać od razu po wejściu na stronę, nie dostaje klasy wcale,
więc nic nie mruga; bez skryptu wszystko stoi na miejscu. */
.wjazd{opacity:0;transform:translateY(34px) scale(.985);
transition:opacity .9s cubic-bezier(.2,.7,.2,1),transform 1.1s cubic-bezier(.16,1,.3,1);transition-delay:var(--wj,0s)}
.wjazd.widoczny{opacity:1;transform:none}
@media (max-width:900px){
.section{padding-top:72px;padding-bottom:calc(72px + var(--poduszka) * .6)}
}
@media (prefers-reduced-motion:reduce){
.nic-r{animation:none!important;stroke-dashoffset:0}
.wjazd{opacity:1!important;transform:none!important;transition:none!important}
.btn-primary::after{display:none}
}
/* ══════════════════════ AUDYT WYGLĄDU 7.10.2026 ═══════════════════════════════════════════
Na podstawie audytu przekazanego przez właściciela. Decyzje właściciela przy nim: kolorystyka
„hybrydowa” (ciemne prowadzi, jasna kość dwa razy jako oddech — lista usług i opinie), w kadrze
otwierającym ocena 4,9 zamiast lat działalności (roku założenia nie ma), H1 bez złotego słowa. */
:root{
--gold-hi:#E8C979;--gold-lo:#8E6B26;
--gold-grad:linear-gradient(135deg,#E8C979 0%,#C9A24A 48%,#9C7A2E 100%);
--bg-2:#1C130B;--bg-3:#261A0F;
}
body{font-weight:400}
.lead{font-weight:400}
/* ── złoto jak metal, nie jak musztarda ─────────────────────────────────── */
.btn-primary{background:var(--gold-grad);color:#1A120B;
box-shadow:0 1px 0 rgba(255,255,255,.4) inset,0 10px 24px -12px rgba(201,162,74,.65);
transition:transform .2s,box-shadow .2s,filter .2s}
.btn-primary:hover{background:var(--gold-grad);transform:translateY(-1px);filter:brightness(1.06);
box-shadow:0 1px 0 rgba(255,255,255,.45) inset,0 16px 32px -12px rgba(201,162,74,.75)}
.cta .btn-primary,.sticky-call .btn-primary{background:var(--gold-grad)}
/* ── kadr otwierający ───────────────────────────────────────────────────── */
/* Jeden szew w tle zamiast pięciu — i za zdjęciem, nie przez nie. */
.szew-g path:not(:nth-child(3)){display:none}
.szew-g{opacity:.14}
.stats{display:none}
.wskazniki{display:flex;flex-wrap:wrap;gap:26px 46px;margin-top:46px;padding-top:28px;border-top:1px solid rgba(212,175,55,.22)}
.wskazniki>div{min-width:0}
.wskazniki b{display:flex;align-items:baseline;gap:6px;font-family:var(--font-head);font-weight:500;line-height:1.05;
font-size:clamp(1.7rem,2.6vw,2.6rem);background:var(--gold-grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.wskazniki b i{font-style:normal;font-size:.62em}
.wskazniki span{display:block;margin-top:8px;font-size:.86rem;color:var(--sand);opacity:.85}
/* ── przed / po: bohater strony ─────────────────────────────────────────── */
.proof{background:var(--bg-2);padding:96px 0 96px}
.proof-head{padding-bottom:34px}
.proof-scena{max-width:1100px;margin:0 auto}
.proof-scena .shot{margin:0}
.proof-scena .ba-box{aspect-ratio:4/3;border-radius:var(--r-duzy);border:1px solid rgba(212,175,55,.3);
box-shadow:0 40px 90px -50px rgba(0,0,0,.95)}
.proof-scena .shot img{border-radius:0;border:0}
.proof-scena figcaption{margin-top:16px;font-family:var(--font-head);font-size:1.1rem;color:var(--light)}
/* Uchwyt: duży, złoty, ze strzałkami — ma być oczywiste, że to się przesuwa. */
.proof-scena .ba-range::-webkit-slider-thumb{width:60px;height:60px;border:0;background:#C9A24A url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231A120B' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 6l-6 6 6 6M15 6l6 6-6 6'/%3E%3C/svg%3E") center/26px no-repeat;
box-shadow:0 0 0 7px rgba(201,162,74,.22),0 12px 30px rgba(0,0,0,.55)}
.proof-scena .ba-range::-moz-range-thumb{width:60px;height:60px;border:0;background:#C9A24A url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231A120B' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 6l-6 6 6 6M15 6l6 6-6 6'/%3E%3C/svg%3E") center/26px no-repeat;
box-shadow:0 0 0 7px rgba(201,162,74,.22),0 12px 30px rgba(0,0,0,.55)}
.proof-scena .ba-line{width:2px;background:var(--gold-hi);box-shadow:0 0 14px rgba(232,201,121,.85)}
.proof-scena .ba-tag{top:20px;bottom:auto;padding:8px 16px;font-size:.82rem;font-weight:600;letter-spacing:.04em;
background:rgba(18,12,7,.5);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);color:#F8F5EB}
.proof-scena .ba-tag-l{left:20px}.proof-scena .ba-tag-r{right:20px}
/* Miniatury — wybór realizacji. */
.proof-mini{display:grid;grid-template-columns:repeat(6,1fr);gap:14px;max-width:1100px;margin:22px auto 0}
.proof-mini button{all:unset;cursor:pointer;display:block;border-radius:14px;overflow:hidden;position:relative;
outline:2px solid transparent;outline-offset:3px;transition:outline-color .2s,transform .2s}
.proof-mini button img{width:100%;aspect-ratio:4/3;object-fit:cover;display:block;opacity:.55;transition:opacity .25s}
.proof-mini button span{display:block;padding:8px 2px 0;font-size:.78rem;line-height:1.35;color:var(--sand)}
.proof-mini button:hover img,.proof-mini button[aria-selected="true"] img{opacity:1}
.proof-mini button[aria-selected="true"]{outline-color:var(--gold)}
.proof-mini button:focus-visible{outline-color:var(--gold-hi)}
.proof-more{margin:34px 0 0;text-align:center}
/* ── czym się zajmujemy: bento ─────────────────────────────────────────── */
.areas{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:230px;gap:16px}
.area{position:relative;border-radius:var(--r-duzy);overflow:hidden;background:var(--bg-3);
border:1px solid rgba(212,175,55,.16);display:flex;flex-direction:column;justify-content:flex-end}
.area.a-0{grid-column:span 2;grid-row:span 2}
.area.a-1{grid-column:span 2}
.area>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .9s cubic-bezier(.2,.7,.2,1)}
.area.z-foto::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(14,9,5,.94) 0%,rgba(14,9,5,.55) 42%,rgba(14,9,5,.05) 75%)}
.area:hover>img{transform:scale(1.045)}
.area-tresc{position:relative;z-index:1;padding:24px 26px}
.area-tresc h3{font-size:1.45rem;margin:0 0 .3em;color:#F8F5EB}
.area.a-0 .area-tresc h3{font-size:2.1rem}
.area-tresc p{margin:0;color:#E2D3BD;font-size:.93rem;line-height:1.55;max-width:42ch}
.area:not(.z-foto) .icon{position:absolute;top:24px;left:26px;width:46px;height:46px}
.area:not(.z-foto) .icon svg{width:46px;height:46px;fill:none;stroke:var(--gold);stroke-width:1.4}
/* Kafel bez zdjęcia: pikowanie zamiast pustki. */
.area:not(.z-foto){background:var(--bg-3) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64'%3E%3Cpath d='M0 32 L32 0 L64 32 L32 64 Z' fill='none' stroke='%23D4AF37' stroke-opacity='.12'/%3E%3Ccircle cx='32' cy='0' r='2' fill='%23D4AF37' fill-opacity='.2'/%3E%3Ccircle cx='0' cy='32' r='2' fill='%23D4AF37' fill-opacity='.2'/%3E%3C/svg%3E")}
.domains{display:none}
/* ── pełny zakres: lista jak karta w restauracji ───────────────────────── */
.cennik{list-style:none;margin:0;padding:0;columns:2;column-gap:64px}
.cennik li{break-inside:avoid;display:grid;grid-template-columns:auto 1fr auto;align-items:baseline;gap:10px;padding:16px 0 14px}
.c-nazwa{font-family:var(--font-head);font-size:1.22rem;color:#1A120B;text-decoration:none}
.c-nazwa:hover{color:#7A560F;text-decoration:none}
.c-kropki{border-bottom:2px dotted rgba(138,98,18,.4);transform:translateY(-5px)}
.c-cena{font-size:.84rem;font-weight:600;color:#7A560F;white-space:nowrap}
.cennik p{grid-column:1 / -1;margin:2px 0 0;font-size:.9rem;color:#5A4632;max-width:58ch}
/* ── kroki: punkty połączone prostym szwem ─────────────────────────────── */
.kroki-sekcja .steps{position:relative;gap:28px}
.kroki-sekcja .steps::before{content:"";position:absolute;left:32px;right:32px;top:32px;border-top:2px dashed rgba(212,175,55,.5)}
.kroki-sekcja .steps li{padding-top:0}
.kroki-sekcja .steps li::before{display:none}
.kroki-sekcja .steps .n{position:relative;z-index:1;width:64px;height:64px;border-radius:50%;display:flex;align-items:center;justify-content:center;
font-size:1.7rem;font-weight:500;margin-bottom:22px;background:var(--bg);border:1.5px solid var(--gold);color:var(--gold-hi);
box-shadow:0 0 0 8px var(--ink)}
@media (max-width:1000px){
.kroki-sekcja .steps{grid-template-columns:1fr;gap:0}
.kroki-sekcja .steps::before{left:31px;right:auto;top:32px;bottom:32px;border-top:0;border-left:2px dashed rgba(212,175,55,.5)}
.kroki-sekcja .steps li{display:grid;grid-template-columns:64px 1fr;gap:22px;padding-bottom:28px}
.kroki-sekcja .steps .n{margin-bottom:0}
}
/* ── opinie ────────────────────────────────────────────────────────────── */
.opinie-ocena{display:flex;align-items:center;gap:16px;margin-top:18px}
.opinie-ocena>b{font-family:var(--font-head);font-weight:500;font-size:3.4rem;line-height:1;color:#1A120B}
.opinie-ocena>span{font-size:.92rem;color:#5A4632}
.opinie-ocena .gwiazdki{display:flex;font-size:1.25rem;margin-bottom:4px}
.opinie-tor{align-items:start}
.opinia-autor{display:flex;align-items:center;gap:12px}
.opinia-autor .ini{flex:0 0 auto;width:40px;height:40px;border-radius:50%;display:flex;align-items:center;justify-content:center;
background:var(--gold-grad);color:#1A120B;font-weight:600;font-size:.86rem}
.opinia-autor small{display:block;font-weight:400;font-size:.78rem;color:#7A6650;margin-top:1px}
.opinia blockquote{font-style:italic}
/* ── pracownia ─────────────────────────────────────────────────────────── */
.pracownia{align-items:center}
.pracownia-foto{margin:0;position:relative}
.pracownia-foto img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:var(--r-duzy);box-shadow:0 40px 80px -46px rgba(0,0,0,.95)}
.pracownia-foto figcaption{position:absolute;left:18px;bottom:18px;padding:8px 14px;border-radius:999px;font-size:.84rem;
background:rgba(18,12,7,.6);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);color:var(--gold-hi)}
/* ── rozdarta krawędź zdjęć w kafelkach usług — wycofana (audyt: kiczowata przy Playfairze) ── */
.svc-box-img img{clip-path:none;max-height:340px}
.svc-box-img{margin-bottom:0}
/* ── stopka ────────────────────────────────────────────────────────────── */
.footer-wiecej{margin-top:6px}
.footer-wiecej summary{cursor:pointer;color:var(--gold);font-size:.9rem;list-style:none}
.footer-wiecej summary::-webkit-details-marker{display:none}
.footer-wiecej[open] summary{margin-bottom:10px}
/* ── wjazd szybciej (audyt: przy szybkim przewijaniu treść była długo półprzezroczysta) ── */
.wjazd{transform:translateY(16px);transition:opacity .5s ease-out,transform .6s cubic-bezier(.16,1,.3,1);transition-delay:var(--wj,0s)}
/* ── pasek na telefonie: dwa przyciski ─────────────────────────────────── */
@media (max-width:900px){
.sticky-call{gap:10px}
.sticky-call .btn{flex:1 1 50%;width:auto;padding-left:12px;padding-right:12px}
.areas{grid-template-columns:1fr 1fr;grid-auto-rows:200px}
.area.a-0{grid-column:span 2;grid-row:span 2}
.area.a-1{grid-column:span 2}
.proof-mini{grid-template-columns:repeat(3,1fr)}
.cennik{columns:1}
.proof{padding:64px 0}
}
@media (max-width:560px){
.areas{grid-template-columns:1fr;grid-auto-rows:220px}
.area.a-0,.area.a-1{grid-column:auto;grid-row:auto}
.area.a-0{grid-row:span 2}
.proof-scena .ba-range::-webkit-slider-thumb{width:48px;height:48px}
.wskazniki{gap:20px 30px}
}
/* Małe kafle bento: tytuł mniejszy, opis przycięty do trzech linii — inaczej tekst zasłaniał całe zdjęcie. */
.areas{grid-auto-rows:250px}
.area.a-2 .area-tresc h3,.area.a-3 .area-tresc h3{font-size:1.22rem}
.area.a-2 .area-tresc p,.area.a-3 .area-tresc p{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;font-size:.88rem}
/* ── kadr otwierający, runda po audycie (7.10.2026) ────────────────────────
Właściciel: bez „kształtu lustra” (łuku), ocena 4,9 jako plakietka nachodząca na zdjęcie
po prawej, pozostałe dwa fakty mniejsze i inaczej. */
.kadr-glowny img{border-radius:var(--r-duzy)}
.hero-kadr{overflow:visible}
.kadr-ocena{position:absolute;z-index:3;top:46px;right:-34px;display:flex;align-items:center;gap:14px;
padding:14px 20px 14px 18px;border-radius:20px;text-decoration:none;
background:rgba(20,14,8,.72);backdrop-filter:blur(14px) saturate(1.2);-webkit-backdrop-filter:blur(14px) saturate(1.2);
border:1px solid rgba(212,175,55,.35);box-shadow:0 22px 50px -20px rgba(0,0,0,.9);
animation:nbd-rozloz .9s cubic-bezier(.2,.8,.2,1) 2.9s both;transition:transform .25s}
.kadr-ocena:hover{text-decoration:none;transform:translateY(-2px)}
.kadr-ocena b{font-family:var(--font-head);font-weight:500;font-size:2.6rem;line-height:1;
background:var(--gold-grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.kadr-ocena>span{font-size:.8rem;line-height:1.4;color:#E6D7C2}
.kadr-ocena .gwiazdki{display:flex;font-size:.95rem;margin-bottom:3px}
/* Dwa fakty: mały rząd z ikonkami zamiast dużych złotych napisów. */
.wskazniki{list-style:none;display:flex;flex-wrap:wrap;gap:14px 34px;margin:40px 0 0;padding:24px 0 0;
border-top:1px solid rgba(212,175,55,.2)}
.wskazniki li{display:flex;align-items:center;gap:12px}
.wsk-ik{flex:0 0 auto;width:38px;height:38px;border-radius:50%;display:flex;align-items:center;justify-content:center;
border:1px solid rgba(212,175,55,.45);background:rgba(212,175,55,.08)}
.wsk-ik svg{width:18px;height:18px;fill:none;stroke:var(--gold);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.wskazniki b{display:block;font-family:var(--font-body);font-weight:600;font-size:.95rem;line-height:1.3;
color:var(--light);background:none;-webkit-background-clip:initial;background-clip:initial}
.wskazniki small{display:block;font-size:.8rem;color:var(--sand);opacity:.8;margin-top:1px}
@media (max-width:900px){
.kadr-ocena{right:-8px;top:24px;padding:10px 14px;gap:10px}
.kadr-ocena b{font-size:2rem}
}
@media (max-width:420px){ .kadr-ocena{right:-4px} }
.wskazniki li>span{margin-top:0;font-size:inherit;opacity:1;color:inherit}
.wskazniki li>.wsk-ik{display:flex}
.wskazniki li>span:not(.wsk-ik){display:block}
/* Cyfry w kółkach kroków: Playfair domyślnie rysuje cyfry „starodrukowe” — 3 i 4 schodzą pod linię
i wystawały poza złote kółko (właściciel: „literki nachodzą na siebie”). Cyfry równej wysokości. */
.kroki-sekcja .steps .n,.steps .n,.wskazniki b,.kadr-ocena b,.opinie-ocena>b{font-variant-numeric:lining-nums;font-feature-settings:"lnum" 1}
.kroki-sekcja .steps .n{line-height:1;padding-top:2px}
/* ── opinie: ciemne skórzane metki z przeszyciem (właściciel: „inny css dla opinii”) ── */
.opinie-tor{align-items:stretch}
.opinia{position:relative;overflow:hidden;background:linear-gradient(160deg,#241809 0%,#1A120B 70%);border:0;
padding:38px 34px 30px;border-radius:22px;box-shadow:0 30px 60px -34px rgba(26,18,11,.75)}
.opinia::before{content:"";position:absolute;inset:10px;border:1.5px dashed rgba(212,175,55,.38);border-radius:14px;pointer-events:none}
.opinia::after{content:"\201D";position:absolute;top:-18px;right:20px;font-family:var(--font-head);font-size:9rem;line-height:1;
color:rgba(212,175,55,.13);pointer-events:none}
.opinia blockquote{position:relative;z-index:1;color:#F1E7D6;font-size:1.1rem;line-height:1.6;margin:16px 0 24px}
.opinia .gwiazdki i{color:#E2BE5E}
.opinia .gwiazdki i.pusta{color:rgba(239,231,218,.18)}
.opinia-autor{position:relative;z-index:1;border-top:1px dashed rgba(212,175,55,.28);color:#F8F5EB}
.opinia-autor small{color:#B9A68C}
.opinia-autor .ini{box-shadow:0 0 0 3px rgba(212,175,55,.18)}
.opinie-kropki i{background:rgba(26,18,11,.22)}
.op-strz{border-color:rgba(26,18,11,.25);color:#1A120B}
/* Cyfra w kółku kroków. `.section.ciemna .steps .n{font-size:4rem}` (starsza runda) ma wyższą
specyficzność niż `.kroki-sekcja .steps .n` i wpychała 64-pikselową cyfrę w 64-pikselowe kółko.
Selektor celowo z `.section.ciemna`, żeby wygrać. Playfair ma wysokie „oczko”, więc cyfra
dostaje line-height:1 i jest centrowana flexem, bez ręcznego paddingu. */
.section.ciemna.kroki-sekcja .steps .n,.kroki-sekcja .steps .n{font-size:1.75rem;line-height:1;padding:0 0 3px;
font-weight:500;font-variant-numeric:lining-nums;font-feature-settings:"lnum" 1}
@media (max-width:1000px){ .section.ciemna.kroki-sekcja .steps .n{width:56px;height:56px;font-size:1.55rem}
.kroki-sekcja .steps li{grid-template-columns:56px 1fr}
.kroki-sekcja .steps::before{left:27px;top:28px;bottom:28px} }
/* ── Fraunces w nagłówkach, mniejsze stopnie (właściciel, 7.10.2026: „mniejsza czcionka”) ──
Fraunces ma większe oczko niż Playfair, więc ten sam rozmiar wyglądał na krzykliwy. */
h1{font-size:clamp(2rem,3.8vw,3.3rem);font-weight:500;letter-spacing:-.02em;line-height:1.06;font-variation-settings:"opsz" 96}
h2{font-size:clamp(1.5rem,2.3vw,2.1rem);font-weight:500;letter-spacing:-.015em;font-variation-settings:"opsz" 72}
h3{font-size:1.1rem;font-weight:600;letter-spacing:-.005em}
.card h2,.contact-card h2{font-size:clamp(1.3rem,1.8vw,1.6rem)}
/* Fraunces przy dużym rozmiarze sam przechodzi w wariant „wystawowy” (opsz 144): ostry kontrast
i ściśnięte litery — znów wyglądał jak Playfair. Stały opsz tekstowy i luźniejszy odstęp. */
h1,h2,h3{font-variation-settings:"opsz" 28;letter-spacing:-.005em;text-wrap:balance}
/* ── /uslugi: „Co przyjmujemy, a czego nie” — dwie metki zamiast jednej ramki (7.10.2026) ── */
.tak-nie{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:28px}
.tn{position:relative;padding:34px 32px 28px;border-radius:22px;overflow:hidden}
.tn::before{content:"";position:absolute;inset:10px;border:1.5px dashed;border-radius:14px;pointer-events:none}
.tn h3{font-size:1.3rem;margin:16px 0 10px}
.tn p{margin:0;line-height:1.7}
.tn-ik{display:flex;align-items:center;justify-content:center;width:46px;height:46px;border-radius:50%}
.tn-ik svg{width:22px;height:22px;fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
/* TAK: ciemna skóra ze złotym ściegiem — to, co pracownia robi. */
.tn-tak{background:linear-gradient(160deg,#241809,#1A120B 75%);color:#E6D7C2;box-shadow:0 30px 60px -34px rgba(26,18,11,.75)}
.tn-tak::before{border-color:rgba(212,175,55,.4)}
.tn-tak h3{color:#F8F5EB}
.tn-tak .tn-ik{background:var(--gold-grad);}
.tn-tak .tn-ik svg{stroke:#1A120B}
/* NIE: jasna, wyciszona — informacja, nie reklama. */
.tn-nie{background:rgba(255,255,255,.45);color:var(--tx)}
.tn-nie::before{border-color:rgba(91,58,30,.28)}
.tn-nie .tn-ik{border:1.5px solid rgba(91,58,30,.35)}
.tn-nie .tn-ik svg{stroke:#5B3A1E}
.section.ciemna .tn-nie{background:rgba(248,245,235,.06);color:var(--sand)}
.section.ciemna .tn-nie::before{border-color:rgba(212,175,55,.25)}
.section.ciemna .tn-nie .tn-ik{border-color:rgba(212,175,55,.4)}
.section.ciemna .tn-nie .tn-ik svg{stroke:var(--gold)}
@media (max-width:760px){ .tak-nie{grid-template-columns:1fr} .tn{padding:28px 24px 24px} }
/* ── /wycena: dwie ścieżki jako „bilety” (7.10.2026) ── */
.sciezki{display:grid;grid-template-columns:1.1fr 1fr;gap:26px;align-items:stretch}
.sciezka{position:relative;display:flex;flex-direction:column;padding:40px 38px 34px;border-radius:24px;overflow:hidden}
.sciezka::before{content:"";position:absolute;inset:10px;border:1.5px dashed;border-radius:16px;pointer-events:none}
.sc-glowa{display:flex;align-items:center;gap:16px;margin-bottom:14px}
.sc-glowa h2{margin:0;font-size:clamp(1.4rem,2vw,1.75rem)}
.sc-ik{flex:0 0 auto;width:58px;height:58px;border-radius:18px;display:flex;align-items:center;justify-content:center}
.sc-ik svg{width:28px;height:28px;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.sc-lead{margin:0 0 22px;line-height:1.7}
.sciezka ul.check{list-style:none;padding:0;margin:0 0 28px;display:grid;gap:10px}
.sciezka ul.check li{position:relative;padding:11px 14px 11px 46px;border-radius:12px;line-height:1.45;margin:0}
.sciezka ul.check li::before{content:"";position:absolute;left:12px;top:50%;width:22px;height:22px;margin-top:-11px;border-radius:50%;
background:var(--gold-grad) center/14px no-repeat;
-webkit-mask:none;mask:none}
.sciezka ul.check li::after{content:"";position:absolute;left:18px;top:50%;width:10px;height:5px;margin-top:-4px;
border-left:2px solid #1A120B;border-bottom:2px solid #1A120B;transform:rotate(-45deg)}
.sciezka .btn{margin-top:auto;align-self:flex-start;position:relative;z-index:1}
/* Ze zdjęć — ciemna skóra, ścieżka główna */
.sc-zdjecia{background:linear-gradient(160deg,#2a1c0d,#1A120B 70%);color:#E6D7C2;box-shadow:0 34px 70px -36px rgba(26,18,11,.8)}
.sc-zdjecia::before{border-color:rgba(212,175,55,.4)}
.sc-zdjecia h2{color:#F8F5EB}
.sc-zdjecia .sc-ik{background:var(--gold-grad)}
.sc-zdjecia .sc-ik svg{stroke:#1A120B}
.sc-zdjecia ul.check li{background:rgba(248,245,235,.05);color:#E6D7C2}
/* Online — jasna */
.sc-online{background:rgba(255,255,255,.5);color:var(--tx);box-shadow:0 30px 60px -40px rgba(26,18,11,.35)}
.sc-online::before{border-color:rgba(138,98,18,.35)}
.sc-online .sc-ik{border:1.5px solid rgba(138,98,18,.45);background:rgba(212,175,55,.1)}
.sc-online .sc-ik svg{stroke:#7A560F}
.sc-online ul.check li{background:rgba(26,18,11,.04)}
.sc-online .btn-ghost{border:2px dashed rgba(138,98,18,.5);color:#5B3A1E}
.sc-online .btn-ghost:hover{border-color:#7A560F;color:#1A120B}
@media (max-width:860px){ .sciezki{grid-template-columns:1fr} .sciezka{padding:32px 24px 28px} }
.sciezka ul.check li{font-weight:400}
.sciezka ul.check li::before{transform:none}
.sc-online ul.check li{color:var(--tx)}
/* Znaczek ✓ jako jedna grafika SVG — składany z dwóch pseudo-elementów zwężał się od starszych reguł listy. */
.sciezka ul.check li::after{content:none}
.sciezka ul.check li::before{left:12px;top:50%;width:22px!important;height:22px!important;min-width:22px;margin-top:-11px;opacity:1;border-radius:50%;
background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 22'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop offset='0' stop-color='%23F1D57A'/%3E%3Cstop offset='1' stop-color='%23B38A2A'/%3E%3C/linearGradient%3E%3C/defs%3E%3Ccircle cx='11' cy='11' r='11' fill='url(%23g)'/%3E%3Cpath d='m6.5 11.3 3 3 6-6.3' fill='none' stroke='%231A120B' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/22px 22px no-repeat}
/* ── /wycena: formularz w dwóch kolumnach (7.10.2026) ── */
.form-uklad{display:grid;grid-template-columns:minmax(260px,.8fr) 1.7fr;border-radius:26px;overflow:hidden;
background:#FBF8F1;box-shadow:0 40px 80px -46px rgba(26,18,11,.55);scroll-margin-top:90px}
.form-bok{position:relative;padding:44px 36px;background:linear-gradient(165deg,#2a1c0d,#1A120B 70%);color:#D9C9B2}
.form-bok::before{content:"";position:absolute;inset:12px;border:1.5px dashed rgba(212,175,55,.38);border-radius:16px;pointer-events:none}
.form-bok h2{color:#F8F5EB;margin:0 0 14px}
.form-bok>p{font-size:.92rem;line-height:1.7;margin:0 0 26px}
.form-kroki{list-style:none;padding:0;margin:0 0 30px;display:grid;gap:14px}
.form-kroki li{display:flex;align-items:center;gap:14px;color:#F1E7D6;font-weight:600;font-size:.95rem}
.form-kroki li>span,.form-tel>span:first-child{flex:0 0 auto;width:42px;height:42px;border-radius:13px;display:flex;align-items:center;justify-content:center;
border:1.5px solid rgba(212,175,55,.45);background:rgba(212,175,55,.08)}
.form-kroki svg,.form-tel svg{width:20px;height:20px;fill:none;stroke:var(--gold);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.form-tel{position:relative;z-index:1;display:flex;align-items:center;gap:14px;padding:14px 16px;border-radius:16px;
background:rgba(248,245,235,.06);text-decoration:none;transition:background .2s}
.form-tel:hover{background:rgba(212,175,55,.14);text-decoration:none}
.form-tel>span:first-child{background:var(--gold-grad);border:0}
.form-tel>span:first-child svg{stroke:#1A120B}
.form-tel small{display:block;font-size:.78rem;color:#B9A68C}
.form-tel b{display:block;font-size:1.2rem;color:#F8F5EB;letter-spacing:.02em}
.form-pole{padding:40px 42px;color:#2A1D10}
.form-pole .msg{margin-bottom:20px}
/* przełącznik ścieżki: trzy kafle z ikonami */
.form-pole .switch{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:28px}
.form-pole .switch-opt{margin:0}
.form-pole .switch-opt>span{display:flex;flex-direction:column;gap:3px;height:100%;padding:16px 16px 14px;border-radius:16px;
background:#fff;border:1.5px solid rgba(91,58,30,.14);transition:border-color .2s,box-shadow .2s,transform .2s;cursor:pointer}
.form-pole .switch-opt>span:hover{transform:translateY(-2px)}
.form-pole .switch-opt strong{font-family:var(--font-head);font-weight:500;font-size:1.05rem;color:#1A120B}
.form-pole .switch-opt small{font-size:.78rem;line-height:1.4;color:#7A6650}
.sw-ik{display:flex;width:36px;height:36px;border-radius:11px;align-items:center;justify-content:center;margin-bottom:8px;
background:rgba(212,175,55,.12)}
.sw-ik svg{width:19px;height:19px;fill:none;stroke:#7A560F;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.form-pole .switch-opt input:checked+span{border-color:#C9A13B;background:#FFFBEF;box-shadow:0 14px 30px -18px rgba(138,98,18,.6)}
.form-pole .switch-opt input:checked+span .sw-ik{background:var(--gold-grad)}
.form-pole .switch-opt input:checked+span .sw-ik svg{stroke:#1A120B}
.form-pole .switch-opt input:focus-visible+span{outline:2px solid #7A560F;outline-offset:2px}
/* pola w siatce */
.form-siatka{display:grid;grid-template-columns:1fr 1fr;gap:16px 18px}
.form-siatka .pelne{grid-column:1/-1}
.form-siatka .field{margin:0}
.form-pole label:not(.switch-opt):not(.consent):not(.upuść){display:block;font-size:.8rem;font-weight:600;color:#5B3A1E;margin-bottom:6px}
.form-pole input:not([type=radio]):not([type=checkbox]):not([type=file]),.form-pole select,.form-pole textarea{
width:100%;background:#fff;border:1.5px solid rgba(91,58,30,.16);border-radius:12px;padding:13px 15px;font:inherit;font-size:.95rem;color:#1A120B;
transition:border-color .2s,box-shadow .2s}
.form-pole textarea{min-height:130px;resize:vertical}
.form-pole input:focus,.form-pole select:focus,.form-pole textarea:focus{outline:0;border-color:#C9A13B;box-shadow:0 0 0 4px rgba(212,175,55,.18)}
.form-pole ::placeholder{color:#A8957D}
/* strefa zdjęć */
.upuść{position:relative;display:flex;flex-direction:column;align-items:center;gap:6px;padding:28px 20px;border-radius:18px;text-align:center;
border:2px dashed rgba(138,98,18,.45);background:rgba(212,175,55,.06);cursor:pointer;transition:background .2s,border-color .2s}
.upuść:hover,.upuść:focus-within{background:rgba(212,175,55,.13);border-color:#7A560F}
.upuść b{font-family:var(--font-head);font-weight:500;font-size:1.15rem;color:#1A120B}
.upuść>span:not(.up-ik){font-size:.85rem;color:#7A6650}
.up-ik{width:48px;height:48px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:var(--gold-grad);margin-bottom:4px}
.up-ik svg{width:22px;height:22px;fill:none;stroke:#1A120B;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.upuść input[type=file]{position:absolute;inset:0;opacity:0;cursor:pointer}
.up-podglad{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.up-podglad img{width:64px;height:64px;object-fit:cover;border-radius:10px;box-shadow:0 6px 14px -8px rgba(0,0,0,.5)}
.up-podglad small{align-self:center;color:#7A6650}
.form-pole .formnote{color:#7A6650}
/* zgoda */
.form-pole .consent{display:flex;gap:12px;align-items:flex-start;margin:22px 0 20px;font-size:.84rem;line-height:1.55;color:#5B4A36}
.form-pole .consent input{flex:0 0 auto;width:20px;height:20px;margin-top:1px;accent-color:#B38A2A}
.form-pole .consent a{color:#7A560F}
.form-pole button[type=submit]{min-width:220px}
@media (max-width:900px){
.form-uklad{grid-template-columns:1fr}
.form-bok{padding:34px 26px}
.form-pole{padding:30px 22px}
}
@media (max-width:620px){
.form-pole .switch{grid-template-columns:1fr}
.form-pole .switch-opt>span{flex-direction:row;flex-wrap:wrap;align-items:center;column-gap:12px}
.form-pole .switch-opt>span .sw-ik{margin:0}
.form-pole .switch-opt small{flex-basis:100%;padding-left:48px;margin-top:-6px}
.form-siatka{grid-template-columns:1fr}
}
/* Lewa metka jest krótsza od formularza — jej treść jedzie razem z przewijaniem, żeby dół nie był pustą płytą. */
@media (min-width:901px){ .form-bok>*{position:relative;z-index:1} .form-bok-tresc{position:sticky;top:110px} }
/* ── /faq: kategorie, wyszukiwarka, akordeon (7.10.2026) ── */
.faq-narzedzia{position:sticky;top:84px;z-index:5;margin:0 -16px 34px;padding:16px;border-radius:22px;
background:rgba(237,228,211,.88);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
.faq-szukaj{position:relative;display:block}
.faq-szukaj svg{position:absolute;left:18px;top:50%;width:20px;height:20px;margin-top:-10px;fill:none;stroke:#7A560F;stroke-width:2;stroke-linecap:round}
.faq-szukaj input{width:100%;padding:15px 20px 15px 50px;border-radius:99px;border:1.5px solid rgba(91,58,30,.18);background:#fff;
font:inherit;font-size:1rem;color:#1A120B;transition:border-color .2s,box-shadow .2s}
.faq-szukaj input:focus{outline:0;border-color:#C9A13B;box-shadow:0 0 0 4px rgba(212,175,55,.18)}
.faq-kat{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.faq-kat button{padding:8px 16px;border-radius:99px;border:1.5px solid rgba(91,58,30,.2);background:transparent;
font:600 .82rem var(--font-body);color:#5B3A1E;cursor:pointer;transition:background .2s,border-color .2s}
.faq-kat button:hover{border-color:#7A560F}
.faq-kat button.on{background:var(--gold-grad);border-color:transparent;color:#1A120B}
.faq-grupa{margin-bottom:46px;scroll-margin-top:200px}
.faq-grupa>h2{display:flex;align-items:baseline;justify-content:space-between;gap:16px;margin:0 0 6px;padding-bottom:12px;
border-bottom:2px dashed rgba(138,98,18,.35);font-size:clamp(1.35rem,2vw,1.7rem)}
.faq-grupa>h2 small{font-family:var(--font-body);font-size:.8rem;font-weight:600;color:#7A560F;white-space:nowrap}
main .faq{border-bottom:1px solid rgba(91,58,30,.14);scroll-margin-top:220px}
main .faq summary{font-family:var(--font-head);font-weight:500;font-size:clamp(1.02rem,1.6vw,1.18rem);line-height:1.4;color:#1A120B;
padding:20px 52px 20px 0;transition:color .2s}
main .faq summary:hover{color:#7A560F}
main .faq summary::after{content:"";right:4px;width:30px;height:30px;border-radius:50%;border:1.5px solid rgba(138,98,18,.45);
background:linear-gradient(#7A560F,#7A560F) center/12px 2px no-repeat,linear-gradient(#7A560F,#7A560F) center/2px 12px no-repeat;
transition:transform .3s,background-color .3s}
main .faq[open] summary::after{content:"";transform:translateY(-50%) rotate(45deg);background-color:rgba(212,175,55,.18)}
main .faq[open] summary{color:#1A120B}
main .faq-a{padding:0 0 24px;max-width:68ch}
main .faq-a p,main .faq-a li{color:#4A3A28;font-weight:400;line-height:1.75}
.faq-cta{margin-top:6px}
.faq-pusto{padding:26px;border-radius:18px;background:rgba(255,255,255,.5);text-align:center}
.faq-dalej{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:20px;margin-top:20px;padding:30px 32px;border-radius:24px;
position:relative;background:linear-gradient(160deg,#2a1c0d,#1A120B 70%);color:#D9C9B2}
.faq-dalej::before{content:"";position:absolute;inset:10px;border:1.5px dashed rgba(212,175,55,.38);border-radius:16px;pointer-events:none}
.faq-dalej b{display:block;font-family:var(--font-head);font-weight:500;font-size:1.35rem;color:#F8F5EB;margin-bottom:4px}
.faq-dalej-btn{display:flex;flex-wrap:wrap;gap:10px;position:relative;z-index:1}
.faq-dalej .btn-ghost{border-color:rgba(248,245,235,.45);color:#F8F5EB}
@media (max-width:640px){
.faq-narzedzia{top:64px;margin:0 -10px 26px;padding:12px}
.faq-kat{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin-right:-12px;padding-right:12px}
.faq-kat button{flex:0 0 auto}
.faq-dalej{padding:26px 22px}
}
main .faq{scroll-margin-top:250px}
@media (max-width:640px){ main .faq{scroll-margin-top:190px} }
/* ── /kontakt: mapa Google ładowana po kliknięciu ── */
.mapa-google{position:relative;border-radius:24px;overflow:hidden;aspect-ratio:21/9;min-height:320px;
background:#1A120B url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120'%3E%3Cg fill='none' stroke='%23D4AF37' stroke-opacity='.10' stroke-width='1'%3E%3Cpath d='M0 30h120M0 90h120M30 0v120M90 0v120'/%3E%3Cpath d='M0 60 60 0M60 120 120 60' stroke-dasharray='4 6'/%3E%3C/g%3E%3C/svg%3E");
box-shadow:0 34px 70px -40px rgba(26,18,11,.7)}
.mapa-google::before{content:"";position:absolute;inset:12px;border:1.5px dashed rgba(212,175,55,.35);border-radius:16px;pointer-events:none;z-index:1}
.mapa-google.wczytana::before{display:none}
.mapa-google iframe{position:absolute;inset:0;width:100%;height:100%;border:0;filter:none}
.mg-zaslepka{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;padding:30px;text-align:center;color:#C9B89F;z-index:2}
.mg-pin{width:64px;height:64px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:var(--gold-grad);
box-shadow:0 0 0 10px rgba(212,175,55,.12),0 0 0 22px rgba(212,175,55,.06);margin-bottom:12px}
.mg-pin svg{width:30px;height:30px;fill:none;stroke:#1A120B;stroke-width:1.8;stroke-linejoin:round}
.mg-zaslepka b{font-family:var(--font-head);font-weight:500;font-size:clamp(1.3rem,2.2vw,1.8rem);color:#F8F5EB}
.mg-zaslepka>span:not(.mg-pin){font-size:.85rem;max-width:46ch}
.mg-btn{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin-top:10px}
.mg-btn .btn-ghost{border-color:rgba(248,245,235,.45);color:#F8F5EB}
@media (max-width:640px){ .mapa-google{aspect-ratio:auto;min-height:380px} }
/* ── Pas „Pracowaliśmy dla” (7.10.2026): same nazwy, rozdzielone złotym węzłem ściegu ── */
.klienci-sekcja{padding-block:clamp(56px,7vw,90px)}
.klienci-sekcja h2{margin-bottom:6px}
.klienci{list-style:none;display:flex;flex-wrap:wrap;align-items:center;gap:14px 0;margin:30px 0 0;padding:26px 0 0;border-top:1.5px dashed rgba(212,175,55,.35)}
.klienci li{position:relative;font-family:var(--font-head);font-weight:500;font-size:clamp(1.15rem,1.9vw,1.55rem);color:#F1E7D6;
letter-spacing:-.005em;padding:0 26px 0 0;margin-right:26px;white-space:nowrap}
.klienci li::after{content:"";position:absolute;right:-4px;top:50%;width:8px;height:8px;margin-top:-4px;transform:rotate(45deg);
background:var(--gold-grad);opacity:.85}
.klienci li:last-child{margin-right:0;padding-right:0}
.klienci li:last-child::after{display:none}
@media (max-width:640px){
.klienci{display:grid;grid-template-columns:1fr 1fr;gap:14px 18px}
.klienci li{padding:0;margin:0;white-space:normal;font-size:1.1rem;padding-left:18px}
.klienci li::after{display:block;left:0;right:auto}
.klienci li:last-child::after{display:block}
}
/* Para przed/po z różnych ujęć — obok siebie (gallery.obok, np. Recaro). */
.shot.obok .obok-para{display:grid;grid-template-columns:1fr 1fr;gap:6px;border-radius:var(--r-duzy,18px);overflow:hidden}
.shot.obok .obok-para>div{position:relative;aspect-ratio:3/4;overflow:hidden}
.shot.obok .obok-para img{width:100%;height:100%;object-fit:cover;display:block}
.shot.obok .ba-tag{top:12px;bottom:auto}
/* ── Podstrona usługi: linki do stron miast (26.10.2026) ── */
.dojazd-usl .chips{justify-content:flex-start}
.dojazd-opis{margin:26px 0 12px;font-weight:600;color:var(--light)}
.dojazd-usl .chip{color:#E6D7C2;border-color:rgba(212,175,55,.3);transition:border-color .2s,background .2s,color .2s}
.dojazd-usl .chip:hover{border-color:var(--gold);color:#F8F5EB;text-decoration:none;background:rgba(212,175,55,.1)}
.dojazd-usl .chip.on{background:var(--gold-grad);color:#1A120B;border-color:transparent;font-weight:600}
/* ── Strony „usługa + miasto” (26.10.2026) ── */
.okruszki{font-size:.82rem;color:var(--sand);margin-bottom:18px;display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.okruszki a{color:var(--sand);text-decoration:none;border-bottom:1px dashed rgba(212,175,55,.35)}
.okruszki a:hover{color:var(--gold)}
.okruszki [aria-current]{color:var(--light)}
.lok-fakty{list-style:none;display:flex;flex-wrap:wrap;gap:12px 34px;margin:30px 0 0;padding:22px 0 0;border-top:1px solid rgba(212,175,55,.2)}
.lok-fakty b{display:block;font-family:var(--font-head);font-weight:500;font-size:1.25rem;color:var(--light)}
.lok-fakty span{font-size:.82rem;color:var(--sand)}
.lok-tresc{align-items:start}
.lok-body h2{margin-top:1.6em}
.lok-aside{position:sticky;top:100px}
.lok-aside-img{border-radius:16px;overflow:hidden;margin-bottom:16px}
.lok-aside-img img{width:100%;display:block}
.lok-cena a{font-weight:600;color:var(--gold)}
@media (max-width:900px){ .lok-aside{position:static} }
/* Audyt 26.10.2026: linki „wycena po…” miały 23 px wysokości — za mały cel dotyku na telefonie
(Google/WCAG: min. ~44 px). Powiększamy obszar kliknięcia paddingiem, bez zmiany wyglądu. */
a.svc-price,a.c-cena{display:inline-flex;align-items:center;min-height:44px;padding-block:10px;margin-block:-10px}
h3.dojazd-opis{font-family:var(--font-body);font-size:1rem;font-weight:600;letter-spacing:0}
/* Śródtytuły treści stojącej pod H1 (render_text(…, 2), 27.10.2026): semantycznie H2, wyglądają
jak dotychczasowe H3 — zmiana poziomu naprawia strukturę nagłówków, nie wygląd strony. */
h2.tx{font-size:1.35rem;line-height:1.25;margin:1.7em 0 .5em;letter-spacing:-.005em;font-weight:600}
h2.tx:first-child{margin-top:0}
.doc h2.tx{font-size:1.25rem;margin-top:1.8em}
.doc h2.tx:first-child{margin-top:0}
/* Cennik w językach z długimi słowami (de „Angebot nach Besichtigung”, fi „hinta-arvio katselmuksen
jälkeen”): siatka auto | 1fr | auto z cenami nowrap była szersza niż telefon i cała strona
przewijała się w bok (test mobilny 27.10.2026). Na wąskim ekranie kropki znikają, cena może się
łamać, a nazwa zajmuje resztę. */
.cennik li{grid-template-columns:minmax(0,max-content) minmax(12px,1fr) minmax(0,max-content)}
.c-nazwa{overflow-wrap:anywhere}
@media (max-width:640px){
.cennik li{grid-template-columns:minmax(0,1fr) auto;column-gap:14px}
.c-kropki{display:none}
.c-cena{white-space:normal;text-align:right;max-width:42vw;line-height:1.3}
}
/* Nagłówek szerszy niż treść (właściciel, 27.10.2026): w niemieckim („Über die Werkstatt”,
„Angebot anfordern”) menu łamało się na drugi wiersz. Pozycje menu się nie łamią; między
900 a 1280 px menu i przycisk dostają ciaśniejsze odstępy, poniżej 900 px jest burger. */
header.site .wrap{max-width:1440px}
nav.main a{white-space:nowrap}
@media (min-width:901px){ nav.main{flex-wrap:nowrap} }
@media (max-width:1280px) and (min-width:901px){
header.site .wrap{gap:14px}
nav.main{gap:2px}
nav.main a{padding:10px 8px;font-size:.86rem;letter-spacing:.01em}
.nav-cta .btn{padding:11px 16px}
}
/* 901–1120 px: obce menu (de/fi/uk/sk) nie mieści się w jednym wierszu nawet ściśnięte — tu też
burger, z tymi samymi regułami co poniżej 900 px. */
@media (max-width:1120px) and (min-width:901px){
.burger{display:block}
nav.main{display:none;order:10;width:100%;flex-direction:column;gap:2px;flex-wrap:nowrap;
padding:10px 0 16px;border-top:1px solid var(--line-soft);margin-left:0}
nav.main.open{display:flex}
nav.main a{padding:14px 12px;font-size:.95rem}
.langs{order:4;margin-left:auto}
.nav-cta{order:5;margin-left:8px}
header.site .wrap{flex-wrap:wrap;min-height:72px;padding-top:10px;padding-bottom:10px}
}
/* Ozdobne elementy przesunięte transformacją (szew w tle) wystawały w niektórych szerokościach
i językach o kilkanaście pikseli → przewijanie w bok. `clip`, nie `hidden`: hidden robi z body
kontener przewijania i psuje przyklejony nagłówek. */
html,body{overflow-x:clip}
/* Realizacje pogrupowane według usług (27.10.2026). */
.shot figcaption .shot-opis{display:block;margin-top:4px;font-size:.84rem;font-weight:400;opacity:.78;line-height:1.45}
.realizacje-linki{display:flex;flex-wrap:wrap;gap:12px;margin-top:26px}
.realizacje-wstep h2.tx:first-child{margin-top:0}
/* Godziny pracy i WhatsApp (27.10.2026). */
.contact-list .godziny{display:flex;flex-direction:column;gap:2px}
.contact-list .godziny b{font-weight:600}
.form-wa{margin-top:10px}
.form-godz{margin:14px 0 0;font-size:.86rem;opacity:.85}