/* DOMHOM | warstwa graficzna stron lokalnych. SHIFT.
   Wszystko pod .dh, zeby nie zderzac sie z motywem ani Elementorem. */
@import url('https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Manrope:wght@300;400;500;600;700&family=IBM+Plex+Mono:wght@400;500&display=swap');

/* ---- Zmienne dostepne poza kontenerem .dh ----------------------------
 * Baner zgody na ciasteczka stoi poza .dh, wiec kazda regula uzywajaca
 * tam var(--tq) czy var(--ink) byla niewazna i po cichu znikala.
 * Efekt: przycisk akceptacji mial przezroczyste tlo i prawie czarny
 * tekst na ciemnym banerze, czyli byl niewidoczny. Te same wartosci
 * powtarzamy na :root, zeby cokolwiek poza strona tez je widzialo. */
:root{--g:#0A1413;--p:#111F1E;--ink:#EDEAE4;--ink2:#93A5A2;--tq:#35C9BE;--rule:#1E3230}

.dh{--g:#0A1413;--p:#111F1E;--ink:#EDEAE4;--ink2:#93A5A2;--tq:#35C9BE;--rule:#1E3230;
  background:var(--g);color:var(--ink);font-family:Manrope,system-ui,sans-serif;
  font-size:16px;line-height:1.65;-webkit-font-smoothing:antialiased}
.dh *{box-sizing:border-box}
.dh img{max-width:100%;display:block}
.dh > *{max-width:1080px;margin-left:auto;margin-right:auto;padding-left:40px;padding-right:40px}
.dh h1,.dh h2,.dh h3{font-family:"Instrument Serif",Georgia,serif;font-weight:400;text-wrap:balance;margin:0}
.dh h1{font-size:clamp(38px,5vw,64px);line-height:1.05;letter-spacing:-.015em}
.dh h2{font-size:clamp(27px,3.4vw,40px);line-height:1.12;margin-bottom:18px;max-width:22ch}
.dh h3{font-size:21px;line-height:1.25;margin-bottom:8px}
.dh p{margin:0 0 15px;color:var(--ink2);max-width:64ch;font-weight:300}
.dh a{color:var(--tq)}
.dh strong,.dh b{color:var(--ink);font-weight:600}
.dh .eyebrow{font-size:11.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--tq);margin-bottom:14px}
.dh section{padding:74px 40px;border-top:1px solid var(--rule)}
.dh .btn{display:inline-block;padding:15px 28px;font-size:14px;font-weight:600;text-decoration:none;
  border-radius:2px;border:1px solid var(--tq);color:var(--tq);background:transparent;
  transition:transform .18s ease}
.dh .btn.f{background:var(--tq);color:#04100F}
.dh .btn:hover{transform:translateY(-2px)}
.dh .btn:focus-visible{outline:2px solid var(--tq);outline-offset:3px}

.dh .crumbs{font-family:"IBM Plex Mono",monospace;font-size:12px;color:#7E9491;
  padding-top:26px;display:flex;gap:9px;flex-wrap:wrap}
.dh .crumbs a{color:#7E9491;text-decoration:none}
.dh .crumbs a:hover{color:var(--tq)}
.dh .crumbs span{color:var(--ink2)}

.dh .head{display:grid;grid-template-columns:1.15fr .85fr;gap:48px;align-items:end;padding:26px 40px 0}
.dh .head .sub p{font-size:19px;max-width:46ch;margin:22px 0 28px}
.dh .head .cta{display:flex;gap:12px;flex-wrap:wrap}
.dh .head .lead p{font-size:15px;max-width:48ch;margin:24px 0 0;padding-top:22px;
  border-top:1px solid var(--rule)}
.dh .head .lead{padding-bottom:54px}
.dh .shot{position:relative;margin:0}
.dh .shot .frame{position:relative;width:100%;aspect-ratio:4/5;overflow:hidden;
  border-radius:2px 2px 0 0;background:var(--p)}
.dh .shot .frame img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 30%}
.dh .shot .frame:after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--tq)}
.dh .shot figcaption{font-family:"IBM Plex Mono",monospace;font-size:11.5px;color:#7E9491;padding-top:10px}
.dh .shot figcaption b{color:var(--tq);font-weight:500}

.dh .autor p{border:1px solid var(--rule);border-radius:2px;padding:16px 20px;background:var(--p);
  max-width:660px;font-size:14.5px;margin:0}
.dh .autor .lic{font-family:"IBM Plex Mono",monospace;font-size:12px;color:var(--tq)}

.dh .rynek p+p{margin-top:0}
.dh .dalej{padding-top:0;border-top:0}

.dh .two{display:grid;grid-template-columns:.9fr 1.1fr;gap:52px;align-items:start}
.dh .steps{display:grid;gap:1px;background:var(--rule);border:1px solid var(--rule)}
.dh .step{background:var(--g);padding:22px 26px;display:grid;grid-template-columns:40px 1fr;gap:16px;
  transition:background .25s ease}
.dh .step:hover{background:var(--p)}
.dh .step i{font-style:normal;color:var(--tq);font-size:13px;font-weight:500;padding-top:4px;
  font-family:"IBM Plex Mono",monospace}
.dh .step b{display:block;margin-bottom:4px;font-size:16.5px}
.dh .step span{color:var(--ink2);font-size:15px;font-weight:300}
.dh .hub{margin-top:22px;font-size:15px}

.dh .creed{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.dh .creed li{position:relative;padding-left:24px;color:var(--ink2);font-weight:300;
  font-size:15.5px;max-width:56ch}
.dh .creed li:before{content:"";position:absolute;left:0;top:11px;width:11px;height:1px;background:var(--tq)}

.dh .quote{background:var(--p);display:grid;grid-template-columns:auto 1fr;gap:34px;align-items:start}
.dh .quote .stars{color:var(--tq);letter-spacing:.28em;font-size:13px;padding-top:8px}
.dh .quote blockquote{font-family:"Instrument Serif",serif;font-size:clamp(21px,2.5vw,30px);
  line-height:1.35;margin:0 0 18px;max-width:34ch}
.dh .quote cite{font-style:normal;font-size:12.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink2)}

.dh .faq details{border-top:1px solid var(--rule)}
.dh .faq summary{cursor:pointer;font-size:17px;font-weight:500;list-style:none;display:flex;
  justify-content:space-between;gap:24px;padding:20px 0;transition:color .2s}
.dh .faq summary:hover{color:var(--tq)}
.dh .faq summary::-webkit-details-marker{display:none}
.dh .faq summary:after{content:"+";color:var(--tq);font-size:20px;line-height:1;flex:0 0 auto}
.dh .faq details[open] summary:after{content:"\2013"}
.dh .faq details p{padding-bottom:22px;margin:0;font-size:15.5px}
.dh .faq summary strong{font-weight:500;color:inherit}

.dh .contact{display:grid;grid-template-columns:1fr 1fr;gap:52px;align-items:start}
.dh .direct{display:grid;gap:10px;margin-top:26px}
.dh .direct a{font-family:"IBM Plex Mono",monospace;font-size:16px;text-decoration:none;color:var(--ink);
  border-left:2px solid var(--tq);padding-left:14px;transition:color .2s}
.dh .direct a:hover{color:var(--tq)}
.dh .form-slot .wpcf7,.dh .form-slot form{margin:0}
.dh .form-slot input[type=text],.dh .form-slot input[type=tel],.dh .form-slot input[type=email],
.dh .form-slot textarea{width:100%;padding:14px;border:1px solid var(--rule);border-radius:2px;
  background:var(--p);font-family:Manrope,sans-serif;font-size:15px;color:var(--ink)}
.dh .form-slot input:focus,.dh .form-slot textarea:focus{outline:none;border-color:var(--tq)}
.dh .form-slot input[type=submit],.dh .form-slot button{background:var(--tq);color:#04100F;border:0;
  padding:15px 28px;border-radius:2px;font-weight:600;font-size:14px;cursor:pointer}

.dh .near{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:26px}
.dh .near a{display:block;border:1px solid var(--rule);border-radius:2px;padding:20px 22px;
  text-decoration:none;background:var(--p);transition:border-color .2s,transform .2s}
.dh .near a:hover{border-color:var(--tq);transform:translateY(-2px)}
.dh .near b{display:block;color:var(--ink);font-size:17px;margin-bottom:4px}
.dh .near span{color:var(--ink2);font-size:14px;font-weight:300}

@media (max-width:900px){
  .dh .head,.dh .two,.dh .contact{grid-template-columns:1fr!important;gap:30px}
  .dh .near{grid-template-columns:1fr}
  .dh .quote{grid-template-columns:1fr;gap:18px}
  .dh > *{padding-left:22px;padding-right:22px}
  .dh section{padding:56px 22px}
}
@media (prefers-reduced-motion:reduce){
  .dh .btn:hover,.dh .near a:hover{transform:none}
}

/* strony, ktore maja tylko jeden akapit wstepu */
.dh .head .lead:empty{padding-bottom:0}
.dh .head .lead p:only-child{margin-bottom:0}

/* siatka dzielnic na stronach filarowych */
.dh .gdz{margin-top:28px}
.dh .gdz+.gdz{margin-top:34px}
.dh .gdz .lab{font-family:"IBM Plex Mono",monospace;font-size:11.5px;letter-spacing:.14em;
  text-transform:uppercase;color:#7E9491;padding-bottom:12px;border-bottom:1px solid var(--rule);margin-bottom:14px}
.dh .gdz .siatka{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--rule);border:1px solid var(--rule)}
.dh .gdz a{display:block;background:var(--g);padding:15px 18px;text-decoration:none;color:var(--ink);
  font-size:15.5px;transition:background .2s,color .2s}
.dh .gdz a:hover{background:var(--p);color:var(--tq)}
.dh .strip{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--rule);border:1px solid var(--rule);margin-top:14px}
.dh .strip div{background:var(--g);padding:22px 24px}
.dh .strip b{display:block;font-family:"Instrument Serif",serif;font-size:38px;line-height:1;color:var(--tq);font-variant-numeric:tabular-nums}
.dh .strip span{display:block;font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink2);margin-top:9px}
.dh .dwie{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--rule);border:1px solid var(--rule);margin-top:30px}
.dh .dwie>div{background:var(--g);padding:26px}
.dh .dwie .nasza{background:var(--p)}
.dh .dwie .lab{font-family:"IBM Plex Mono",monospace;font-size:11px;letter-spacing:.14em;text-transform:uppercase;margin-bottom:12px;color:#7E9491}
.dh .dwie .nasza .lab{color:var(--tq)}
.dh .dwie .zrodlo{margin-top:16px;padding-top:13px;border-top:1px solid var(--rule);font-size:13.5px;color:#7E9491}
.dh .daje-siatka{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--rule);border:1px solid var(--rule);margin-top:26px}
.dh .karta{border:1px solid var(--rule);border-radius:3px;background:var(--p);padding:26px}
.dh .zap{display:flex;flex-wrap:wrap;gap:14px;margin-top:16px;padding-top:14px;border-top:1px solid var(--rule)}
.dh .zap span{font-family:"IBM Plex Mono",monospace;font-size:11.5px;color:#7E9491;display:flex;align-items:center;gap:7px}
.dh .zap span:before{content:"";width:5px;height:5px;border-radius:50%;background:var(--tq);flex:0 0 auto}
@media (max-width:900px){.dh .gdz .siatka{grid-template-columns:repeat(2,1fr)}
  .dh .strip,.dh .dwie,.dh .daje-siatka{grid-template-columns:1fr}}

/* rejony, opisy od Marcina */
.dh .rejony .rejon{border-top:1px solid var(--rule);padding:30px 0 6px;margin-top:26px}
.dh .rejony .rejon:first-of-type{margin-top:30px}
.dh .rejony h3{font-size:26px;margin-bottom:14px}
.dh .rejony .etykieta{font-family:"IBM Plex Mono",monospace;font-size:10.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--tq);display:inline-block;margin-right:9px;vertical-align:1px}
.dh .rejony .za{font-family:"IBM Plex Mono",monospace;font-size:10.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--tq);margin:20px 0 12px}
.dh .rejony .creed li{max-width:62ch}


/* ---- Nadpisanie globalnych stylow Elementora (kit-9) wewnatrz .dh ----
   Kit narzuca h1-h4 kolor #232323 i linkom #CCA75B. Na ciemnym tle daje to
   kontrast 1.19:1. Podnosimy specyficznosc przez "body" i wracamy do palety. */
body .dh :is(h1,h2,h3,h4,h5,h6){color:var(--ink)}
body .dh :is(h1,h2,h3,h4) b,
body .dh :is(h1,h2,h3,h4) strong,
body .dh :is(h1,h2,h3,h4) em,
body .dh :is(h1,h2,h3,h4) i{color:inherit}
body .dh a:not([class]){color:var(--tq)}


/* Kontrast malego tekstu: #5F7573 dawal 3.81:1, czyli ponizej progu WCAG AA
   (4.5:1 dla tekstu mniejszego niz 18px). Cala paleta podpisow, okruszkow
   i etykiet przeniesiona na #7E9491 = 5.82:1. */


/* ---- Czytelnosc tekstu drugiego planu ----
   #93A5A2 na tle #0A1413 dawal 7.35:1, wiec kontrast byl w normie, ale przy
   wadze 300 tekst na ciemnym tle optycznie sie rozmywal. Rozjasniamy ton do
   #B3C3C0 (10.4:1) i wracamy do wagi 400. */
.dh{--ink2:#B3C3C0}
.dh p,
.dh .creed li,
.dh .step span,
.dh .near span{font-weight:400}

/* ---- Zdjecia rejonow (materialy wlasne klienta) ---- */
.dh .rejony .rejon-foto{margin:0 0 20px;max-width:640px}
.dh .rejony .rejon-foto img{width:100%;height:auto;aspect-ratio:3/2;object-fit:cover;
  display:block;border-radius:2px;border:1px solid var(--rule)}

/* Male etykiety w IBM Plex Mono mialy #7E9491 (5.82:1). Po rozjasnieniu
   tekstu glownego zaczynaly odstawac, wiec ida na #9DB2AE (8.49:1). */
.dh .crumbs,
.dh .crumbs a,
.dh .shot figcaption,
.dh .gdz .lab,
.dh .dwie .lab,
.dh .dwie .zrodlo,
.dh .zap span{color:#9DB2AE}

/* ---- Przelacznik jezyka w pasku okruszkow ----
   Odsuniety na prawy koniec paska. Na waskich ekranach okruszki i tak sie
   zawijaja, wiec link laduje w nowej linii i nic nie przykrywa. */
.dh .crumbs .jezyk{margin-left:auto;color:var(--tq);text-decoration:none;
  border:1px solid var(--rule);border-radius:2px;padding:1px 10px 2px;
  letter-spacing:.08em;transition:border-color .2s,background .2s}
.dh .crumbs .jezyk:hover{border-color:var(--tq);background:var(--p)}
.dh .crumbs .jezyk:focus-visible{outline:2px solid var(--tq);outline-offset:2px}
@media (max-width:600px){.dh .crumbs .jezyk{margin-left:0}}

/* ---- Drugi prog responsywny ----
   Do tej pory cala warstwa miala JEDEN prog (900 px), ktory obslugiwal
   wszystko od tabletu po najwezszy telefon. Wiekszosc siatek zwija sie tam
   do jednej kolumny, ale siatka linkow do dzielnic zostawala na dwoch,
   co przy nazwach w rodzaju Konstancin-Jeziorna robilo sie ciasne.
   Dokladamy prog 560 px: jedna kolumna, ciasniejsze odstepy i mniejszy
   naglowek, zeby pierwszy ekran telefonu nie byl w calosci tytulem. */
@media (max-width:560px){
  .dh .gdz .siatka{grid-template-columns:1fr}
  .dh section{padding:46px 18px}
  .dh > *{padding-left:18px;padding-right:18px}
  .dh h1{font-size:clamp(30px,8.4vw,40px)}
  .dh .rejony h3{font-size:22px}
  .dh .rejony .rejon{padding-top:24px;margin-top:20px}
  .dh .karta{padding:20px}
  .dh .step{padding:18px 20px}
  .dh .btn{padding:14px 22px;width:100%;text-align:center}
  .dh .head .cta{gap:10px}
}

/* Pola formularza w ciemnej warstwie. Elementor wymusza biale tlo,
   przez co wpisywany tekst bywa nieczytelny. */
.dh .elementor-field-group input:not([type=submit]),
.dh .elementor-field-group select,
.dh .elementor-field-group textarea{background:#111F1E !important;color:#EDEAE4 !important;border:1px solid #1E3230 !important;border-radius:2px;padding:12px 14px;font-family:Manrope,sans-serif;font-size:15px}
.dh .elementor-field-group input::placeholder,
.dh .elementor-field-group textarea::placeholder{color:#8FA5A2;opacity:1}
.dh .elementor-field-group select option{background:#111F1E;color:#EDEAE4}
.dh .elementor-field-group input:focus,
.dh .elementor-field-group select:focus,
.dh .elementor-field-group textarea:focus{outline:none;border-color:#35C9BE !important}
.dh .elementor-field-group label{color:#B3C3C0}
.dh .elementor-field-type-upload input{color:#B3C3C0 !important}

/* --- Telefon: kolumna formularza nie moze byc szersza niz ekran ---
   Lista rozwijana  przyjmuje szerokosc najdluzszej opcji
   ("Warminsko-Mazurskie"), a element siatki domyslnie nie zwezi sie
   ponizej wlasnej tresci (min-width:auto). Efekt: kolumna formularza
   miala 498px na ekranie 390px i CALA strona przewijala sie w bok.
   Dotyczylo to kazdej strony z polskim formularzem, czyli okolo 90. */
.dh .contact > *,
.dh .two > *,
.dh .head > *{min-width:0}
.dh .form-slot,
.dh .form-slot *{min-width:0}
.dh .form-slot .elementor-column,
.dh .form-slot .elementor-widget-wrap{min-width:0 !important}
.dh .form-slot select,
.dh .form-slot input,
.dh .form-slot textarea{max-width:100%}

/* --- Telefon: formularz na pelna szerokosc ---
   Widget formularza ma w ustawieniach Elementora 50px marginesu z kazdej
   strony, a sekcja i kolumna dokladaja swoje. Na komputerze to eleganckie
   wciecie, na telefonie zjadalo 100 ze 354 pikseli i pola mialy 198px.
   Zdejmujemy te wciecia tylko ponizej 900px. */
/* Zdejmujemy te wciecia na KAZDEJ szerokosci. Na desktopie 50px marginesu
   z kazdej strony zabieralo 100 z 474px kolumny i pola mialy po 134px,
   mimo ze miejsca bylo dosc. Uklad kolumn ustawiamy sami, wyzej. */
.dh .form-slot .elementor-widget-container{margin-left:0 !important;margin-right:0 !important}
.dh .form-slot .elementor-section{padding-left:0 !important;padding-right:0 !important}
.dh .form-slot .elementor-widget-wrap{padding-left:0 !important;padding-right:0 !important}

/* --- Zgoda na kontakt i klauzula RODO pod formularzem ---
   Formularz zbieral imie, telefon, adres i zdjecia bez zadnej zgody i bez
   informacji, kto jest administratorem danych. Checkbox i klauzula sa teraz
   czescia szablonu formularza, tu tylko ubieramy je w palete .dh. */
.dh .form-slot .elementor-field-type-acceptance{margin-top:4px}
.dh .form-slot .elementor-field-option label{color:#93A5A2 !important;font-size:13.5px;font-weight:300;line-height:1.5;cursor:pointer}
.dh .form-slot input[type=checkbox]{width:18px !important;height:18px !important;accent-color:#35C9BE;
	margin-right:9px;vertical-align:-4px;cursor:pointer}
.dh .form-slot .dh-klauzula{font-size:12.5px;line-height:1.55;color:#7E9491;margin:12px 0 0;max-width:60ch}
.dh .form-slot .dh-klauzula a{color:#35C9BE}
.dh .form-slot .elementor-field-type-html{margin-top:0}

/* --- Formularz w palecie marki, nie w domyslnej palecie Elementora ---
   Etykiety pol i przycisk wysylki dziedziczyly niebieski z zestawu stylow
   Elementora, przez co formularz na 90 stronach wygladal jak wklejony
   z innej witryny. */
.dh .form-slot .elementor-field-group > label{color:#B3C3C0 !important;font-size:13.5px !important;
	font-weight:400 !important;letter-spacing:.01em}
.dh .form-slot button[type=submit],
.dh .form-slot input[type=submit],
.dh .form-slot .elementor-button{background-color:#35C9BE !important;color:#04100F !important;
	border:0 !important;border-radius:2px !important;font-weight:700 !important;font-size:14.5px !important;
	text-transform:none !important;letter-spacing:.02em !important;transition:background-color .2s ease}
.dh .form-slot .elementor-button:hover{background-color:#2FB5AB !important}

/* --- Siatka dzielnic: koniec z pusta komorka ---
   Siatka byla sztywna na cztery kolumny, a dzielnic jest osiemnascie.
   Ostatni rzad zostawal niepelny i w rogu swiecila jasna, pusta plama
   w kolorze linii. To samo pod okolicami, gdzie pozycji jest siedem.
   Zamieniamy sztywne komorki na etykiety, ktore zawijaja sie same, wiec
   niepelny rzad przestaje istniec przy kazdej liczbie pozycji. Na telefonie
   zamiast osiemnastu wierszy na cala szerokosc jest zwarta grupa. */
.dh .gdz .siatka{display:flex;flex-wrap:wrap;gap:8px;background:none;border:0}
.dh .gdz a{background:var(--p);border:1px solid var(--rule);border-radius:2px;
	padding:9px 15px;font-size:14.5px;line-height:1.3;white-space:nowrap}
.dh .gdz a:hover{background:var(--p);border-color:var(--tq);color:var(--tq)}
@media (max-width:900px){
	.dh .gdz .siatka{grid-template-columns:none;gap:7px}
	.dh .gdz a{padding:8px 13px;font-size:14px}
}

/* --- Formularz uklada sie w dwie kolumny, zamiast rosnac w dol ---
   Dziewiec pol jedno pod drugim rozciagalo strone tak, ze na wycenie
   formularz byl waskim slupkiem obok pustej polowy ekranu.
   Uzywamy zapytania kontenerowego, a nie szerokosci okna, bo formularz
   raz stoi w szerokiej sekcji, a raz w waskiej karcie. Dzieki temu sam
   decyduje: ciasno to jedna kolumna, luzno to dwie. */
.dh .form-slot{container-type:inline-size}
@container (min-width:460px){
	.dh .form-slot .elementor-form-fields-wrapper{display:grid;grid-template-columns:1fr 1fr;
		gap:0 16px;align-items:start}
	.dh .form-slot .elementor-field-group{width:100% !important;max-width:none !important}
	.dh .form-slot .elementor-field-type-textarea,
	.dh .form-slot .elementor-field-type-upload,
	.dh .form-slot .elementor-field-type-acceptance,
	.dh .form-slot .elementor-field-type-html,
	.dh .form-slot .elementor-field-group-klauzula,
	.dh .form-slot .e-form__buttons{grid-column:1 / -1}
}

/* Strona wyceny ma formularz w karcie obok naglowka. Przy podziale
   1,15 do 0,85 karta byla za waska na cokolwiek. Wyrownujemy kolumny,
   zeby formularz mial czym oddychac i zmiescil sie w dwie kolumny. */
@media (min-width:901px){
	.dh .head:has(.form-slot){grid-template-columns:1fr 1fr}
}

/* --- Zdjecie w wizytowce bylo sciskane ---
   Portret 4:5 wpychany w kwadrat przez object-fit:fill, czyli splaszczony.
   Teraz kadrujemy z gory, zeby twarz byla w calosci. */
.dh .wizytowka img{object-fit:cover !important;object-position:50% 15% !important}

/* ---- Opinie jako karuzela, przewijanie w bok ---- */
.dh section .opinie{display:flex;grid-template-columns:none;gap:16px;background:none;border:0;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.dh section .opinie::-webkit-scrollbar{display:none}
.dh section .opinie > .quote{flex:0 0 86%;max-width:520px;scroll-snap-align:start;border:1px solid var(--rule)}
@media (min-width:901px){.dh section .opinie > .quote{flex:0 0 calc(50% - 8px);max-width:none}}
.dh .karuzela{display:flex;gap:8px;align-items:center;margin-top:16px}
.dh .karuzela button{width:44px;height:44px;border-radius:2px;border:1px solid var(--rule);background:var(--p);color:var(--ink);font-size:18px;line-height:1;cursor:pointer}
.dh .karuzela button:hover:not(:disabled){border-color:var(--tq);color:var(--tq)}
.dh .karuzela button:disabled{opacity:.35;cursor:default}
.dh .karuzela span{margin-left:8px;font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:12px;color:var(--ink2);font-variant-numeric:tabular-nums}
@media (prefers-reduced-motion:reduce){.dh section .opinie{scroll-behavior:auto}}

/* ---- Portret na jasnym tle, kadr w ramce ---- */
.dh .frame.jasna{border:1px solid var(--rule);background:#EDEAE4}
.dh .shot.jasna figcaption{color:var(--ink2)}

/* ---- Kadr poziomy, np. zdjecie z drona ---- */
.dh .frame.szeroka{aspect-ratio:3 / 2}
.dh .frame.szeroka img{aspect-ratio:3 / 2;height:auto}

/* ---- Sekcja dwukolumnowa, ktora ma tylko jedna kolumne ---- */
.dh .two.jedna{grid-template-columns:minmax(0,64ch)}

/* ---- Wygoda na telefonie: pola formularza i cele dotyku ---- */
@media (max-width:900px){
	.dh .form-slot input,.dh .form-slot select,.dh .form-slot textarea,
	.dh .form-slot .elementor-field-textual{font-size:16px !important}
	.dh-stopka__kol a,.dh-stopka__soc a,.dh-stopka__kontakt a{display:inline-block;padding:9px 0}
	.dh .dane a,.dh .direct a{display:inline-block;padding:8px 0}
	.dh .gdz a,.dh .siatka a{padding-top:11px;padding-bottom:11px}
	.dh .crumbs a{display:inline-block;padding:6px 0}
}


/* --- Inne otwarcie kazdej zakladki -------------------------------
   Marcin zglaszal, ze podstrony sprawiaja wrazenie ciagle tej samej
   strony glownej. Naglowek kazdej zakladki dostaje wiec inny uklad.
   Sterujemy klasa page-id z body, zeby nie mieszac w tresci stron. */


/* Sprzedaz mieszkania: szerszy naglowek, wezszy portret, rownanie do gory */
body.page-id-20001 .dh .head{grid-template-columns:1.15fr 0.85fr}

/* Sprzedaz domu: lustro, zdjecie po lewej, rownanie do gory */
body.page-id-20004 .dh .head{grid-template-columns:0.85fr 1.15fr}
body.page-id-20004 .dh .head > .tekst{order:2}
body.page-id-20004 .dh .head > .shot{order:1}

/* O nas: naglowek na ciemniejszym panelu, na calej szerokosci */
body.page-id-55 .dh .head{background:var(--p);border-bottom:1px solid var(--rule);}

@media (max-width:900px){
		body.page-id-20004 .dh .head > .tekst{order:1}
	body.page-id-20004 .dh .head > .shot{order:2}
}


/* --- Sekcja kontaktowa i formularz --------------------------------
   Formularz jest kilka razy wyzszy od tekstu obok niego. Przy rownaniu
   do dolu robila sie nad nagłówkiem kilkusetpikselowa dziura, a same
   pola zajmowaly za duzo miejsca w pionie. */
.dh section.kontakt .head{align-items:start;grid-template-columns:0.8fr 1.2fr}

/* Naglowek strony bez zdjecia nie ma po co trzymac pustej kolumny obok */
.dh header.head:not(:has(> .shot)){grid-template-columns:minmax(0,1fr)}

/* Pola ciasniej w pionie */
.dh .form-slot .elementor-field-group{margin-bottom:10px}
.dh .form-slot .elementor-field-group > label{padding-bottom:5px}
.dh .form-slot .elementor-field-textual{padding-top:10px;padding-bottom:10px}


@media (max-width:900px){
	.dh section.kontakt .head{grid-template-columns:1fr}
}


/* Obszary, do ktorych nie mamy jeszcze osobnej strony. Filtr zdejmuje z nich
   link (patrz snippet Warstwa stron lokalnych), zeby nikt nie trafial na strone
   o innej usludze. Kafelek zostaje w tym samym rytmie, tylko wygaszony. */
.dh .nieczynny{display:block;border:1.5px solid var(--rule);background:var(--p);
	border-radius:2px;padding:9px 15px;font-size:14.5px;color:var(--ink2);opacity:.75}
.dh .nieczynny:not(:has(b)){line-height:1.3}
.dh .nieczynny:has(b){padding:20px 22px;font-size:16px}


/* --- Dostepnosc: focus i cele dotykowe ----------------------------
   Obrys przy nawigacji klawiatura mialy juz przyciski, menu, kafelki
   near/gdz/uslugi i formularz. Brakowalo go w okruszkach, w siatkach
   obszarow i w calej stopce, czyli tam, gdzie linkow jest najwiecej. */
.dh .crumbs a:focus-visible,
.dh .siatka a:focus-visible,
.dh .opinie a:focus-visible,
.dh-stopka a:focus-visible{outline:2px solid var(--tq);outline-offset:3px;border-radius:2px}

/* Na telefonie czesc linkow miala pole dotyku ponizej 44 px.
   Powiekszamy sam obszar klikalny, nie zmieniajac rytmu tekstu. */
@media (max-width:900px){
	.dh .hub a{display:inline-block;padding:11px 0}
	.dh .direct a{padding-top:11px;padding-bottom:11px}
	.dh .siatka a{padding-top:13px;padding-bottom:13px}
	.dh-stopka__soc a{padding-top:9px;padding-bottom:9px}
}


/* --- Wizytowka pod zdjeciem w naglowku -----------------------------
   Marcin poprosil, zeby obok jego zdjecia byl telefon, mail, licencja
   i LinkedIn. Podpis zamienia sie wiec w mala wizytowke. */
.dh .head .shot figcaption{display:flex;flex-direction:column;gap:3px;align-items:flex-start}
.dh .head .shot figcaption b{color:var(--ink);font-weight:500}
.dh .head .shot figcaption .lic{color:var(--ink2)}
.dh .head .shot figcaption a{color:var(--tq);text-decoration:none}
.dh .head .shot figcaption a:hover{text-decoration:underline}
.dh .head .shot figcaption a:focus-visible{outline:2px solid var(--tq);outline-offset:3px;border-radius:2px}
@media (max-width:900px){
	.dh .head .shot figcaption a{padding:7px 0}
}

/* Naglowek sekcji opinii miał byc wiekszy i czytelniejszy. */
.dh section .hub a{font-size:16px}

/* Wynajem: portret wrocil na prosbe Marcina, wiec zeby zakladka nie wygladala
   jak kopia strony glownej, zdjecie jest wieksze i rownane do gory. */
body.page-id-20003 .dh .head{grid-template-columns:1fr 1fr}


/* --- Wlasny rytm sekcji dla kazdej zakladki ------------------------
   Naglowki juz sie roznily, ale nizej kazda strona miala ten sam rytm:
   przezroczyste tlo, cienka linia u gory, naglowek zawsze z lewej.
   Stad poczucie Marcina, ze wciaz jest na stronie glownej. Kazda
   zakladka dostaje wiec inny sposob prowadzenia sekcji.
   Strona glowna zostaje wzorcem, do ktorego reszta sie odnosi. */

/* Sprzedaz mieszkania: co druga sekcja na pasie przez cala szerokosc */
body.page-id-20001 .dh > section:nth-of-type(odd){
	background:var(--p);border-top:0;
	box-shadow:0 0 0 100vmax var(--p);
	clip-path:inset(0 -100vmax);
}

/* Sprzedaz domu: naglowki sekcji na srodku, wezsza kolumna tekstu */
body.page-id-20004 .dh .two{grid-template-columns:minmax(0,70ch);justify-content:center;text-align:center}
body.page-id-20004 .dh .two h2{max-width:none}
body.page-id-20004 .dh .two p{margin-left:auto;margin-right:auto}
body.page-id-20004 .dh .creed,
body.page-id-20004 .dh .steps{text-align:left;max-width:56ch;margin-left:auto;margin-right:auto}

/* Wynajem: naglowek sekcji po prawej, tresc po lewej */
body.page-id-20003 .dh .two{grid-template-columns:0.55fr 0.45fr}
body.page-id-20003 .dh .two > div:first-child{order:2}

/* Wycena: ciasniejszy rytm, mniejsze naglowki, strona ma dzialac jak narzedzie */
body.page-id-20002 .dh > section{padding-top:46px;padding-bottom:46px}
@media (min-width:901px){body.page-id-20002 .dh h2{font-size:30px}}

/* O nas: ciagla pionowa linia przez cala strone, jak os opowiesci */
body.page-id-55 .dh > section{border-top:0;position:relative;padding-left:64px}
body.page-id-55 .dh > section::before{content:'';position:absolute;left:40px;top:0;bottom:0;width:1.5px;background:var(--rule)}
body.page-id-55 .dh > section::after{content:'';position:absolute;left:36px;top:76px;width:9px;height:9px;border-radius:50%;background:var(--tq)}

@media (max-width:900px){
	body.page-id-20003 .dh .two > div:first-child{order:1}
	body.page-id-20004 .dh .two,
	body.page-id-20004 .dh .two p{text-align:left}
	body.page-id-55 .dh > section{padding-left:34px}
	body.page-id-55 .dh > section::before{left:14px}
	body.page-id-55 .dh > section::after{left:10px;top:60px}
}


/* --- Zdjecie w naglowku dopasowane do wysokosci tekstu --------------
   Zdjecie mialo sztywne proporcje 4:5, wiec przy dluzszym tekscie
   zostawalo pod nim martwe pole, a przy rownaniu do dolu zjezdzalo nisko.
   Teraz wypelnia dokladnie tyle, ile zajmuje kolumna tekstu. */
.dh .head{align-items:stretch}
.dh .head .shot{display:flex;flex-direction:column}
.dh .head .shot .frame{flex:1 1 auto;aspect-ratio:auto;min-height:400px}
.dh .head .shot .frame img{object-position:50% 22%}

/* Pasek liczb dopasowuje sie do liczby kafelkow, zeby nie zostawal pusty slot */
.dh .strip{display:flex;flex-wrap:wrap;grid-template-columns:none}
.dh .strip > div{flex:1 1 180px}

@media (max-width:900px){
	.dh .head .shot .frame{aspect-ratio:4 / 5;min-height:0}
}

/* Sprzedaz mieszkania wrocila do naglowka dwukolumnowego z portretem.
   Poziome zdjecie osiedla zostaje szerokim pasem, ale juz pod naglowkiem. */

body.page-id-20001 .dh .shot.pas{margin:26px 40px 0}
body.page-id-20001 .dh .shot.pas .frame img{object-position:50% 58%}
@media (max-width:900px){body.page-id-20001 .dh .shot.pas{margin-left:0;margin-right:0}}


/* --- Strony dzielnic: tresc nie moze wisiec przy lewej krawedzi ------
   Sekcja miala 1080 px, a akapit 449, wiec na duzym ekranie zostawalo
   ponad 600 px pustki po prawej. Zwezamy sekcje i centrujemy ja. */
body.page-child .dh > section{max-width:880px;margin-left:auto;margin-right:auto}
body.page-child .dh > section p{max-width:64ch}
body.page-child .dh > section .rejon p{max-width:none}

/* Wizytowka: byla malym zdjeciem nad tekstem, teraz karta ze zdjeciem obok */
.dh .wizytowka{display:flex;gap:22px;align-items:center;background:var(--p);
	border:1px solid var(--rule);border-radius:3px;padding:20px 22px}
.dh .wizytowka img{flex:0 0 auto;width:132px;height:165px;border-radius:2px}
.dh .wizytowka p{margin:0;max-width:60ch}

@media (max-width:900px){
	.dh .wizytowka{flex-direction:column;align-items:flex-start;gap:14px}
	.dh .wizytowka img{width:110px;height:138px}
	body.page-child .dh > section p{max-width:none}
}


/* --- Blok pojedynczej opinii --------------------------------------
   Gwiazdki siedzialy w kolumnie szerokiej na 270 px, wiec miedzy nimi
   a cytatem ziala pustka, a sam cytat mial 30 px i budowal wieze.
   Teraz gwiazdki sa tuz nad cytatem, mniejsze i spokojniejsze. */
.dh section.quote{grid-template-columns:minmax(0,1fr);gap:16px;max-width:760px}
.dh section.quote blockquote{font-size:23px;line-height:1.45;max-width:60ch}
.dh .stars{font-size:12.5px;letter-spacing:2px;color:var(--tq);opacity:.85}
.dh section.quote cite{margin-top:16px}

@media (max-width:900px){
	.dh section.quote blockquote{font-size:20px}
}


/* --- Sekcje jednokolumnowe nie moga wisiec przy lewej krawedzi -----
   Sekcja miala 1080 px, a naglowek 405 i akapit 449, wiec po prawej
   zostawalo ponad 600 px pustki. Zwezamy takie sekcje i centrujemy. */
.dh > section:not(:has(.two)):not(:has(.steps)):not(:has(.gdz)):not(:has(.near)):not(:has(.opinie)):not(:has(.contact)):not(:has(.faq)):not(.zdrona){
	max-width:780px;margin-left:auto;margin-right:auto}
.dh > section p{max-width:62ch}

/* O nas: panel z zasadami wypelnia wysokosc, zeby pod nim nie bylo dziury */
body.page-id-55 .dh .two{align-items:stretch}
body.page-id-55 .dh .two > div{display:flex;flex-direction:column}
body.page-id-55 .dh .karta{flex:1 1 auto}

/* Kontakt: kadr trzymal sie za wysoko i uciinal sylwetke */
body.page-id-46 .dh .head .shot .frame img{object-position:50% 32%}

/* Jednostka przy liczbie w pasku, zeby nie sklejala sie z opisem */
.dh .strip b i{font-style:normal;font-size:.46em;font-weight:400;color:var(--ink2);letter-spacing:.01em}


/* Mapy dzielnic maja podpis wypalony w dolnej czesci obrazka, wiec
   rozciaganie kadru go ucinalo. Trzymamy naturalne proporcje. */
body.page-child .dh .head .shot .frame{aspect-ratio:4 / 5;flex:0 0 auto;min-height:0}
body.page-child .dh .head .shot{justify-content:flex-start}

/* Elementor dokladal wlasny padding 74 px u gory i u dolu formularza,
   przez co pod przyciskiem zostawalo ponad 130 px pustki. */
.dh .form-slot .elementor-section.elementor-top-section{padding-top:0;padding-bottom:0}


/* --- Baner ciasteczek ----------------------------------------------
   Wtyczka wstawiala wlasne kolory, ktore gryzly sie z marka.
   Sprowadzamy go do palety strony. */
#cookie-notice{background:#0B1615 !important;border-top:1px solid var(--rule)}
#cookie-notice .cookie-notice-container{padding:16px 20px}
#cookie-notice #cn-notice-text,
#cookie-notice .cn-text-container{color:var(--ink2) !important;font-size:14px;line-height:1.55}
#cookie-notice a:not(.cn-button){color:var(--tq) !important;text-decoration:underline}
#cookie-notice .cn-button{font:500 14px Manrope,system-ui,sans-serif !important;border-radius:2px !important;padding:11px 20px !important;border:1px solid transparent !important;text-decoration:none !important}
#cookie-notice #cn-accept-cookie{background:var(--tq) !important;color:#06100F !important;font-weight:700 !important}
#cookie-notice #cn-more-info{background:transparent !important;color:var(--ink) !important;border-color:var(--rule) !important}
#cookie-notice #cn-more-info:hover{border-color:var(--tq) !important;color:var(--tq) !important}
#cookie-notice .cn-button:focus-visible{outline:2px solid var(--tq);outline-offset:3px}

/* ---- Kotwice na stronie -------------------------------------------
 * Motyw ustawia html{scroll-behavior:smooth}. Tam gdzie przegladarka
 * albo system ma wylaczone plynne przewijanie, skok do kotwicy nie
 * dziala wcale, wiec przycisk "Bezplatna wycena" nie robil nic.
 * Plynnosc bierzemy z wlasnego skryptu, a tu zostawiamy zachowanie
 * natywne, ktore dziala zawsze. scroll-margin trzyma naglowek sekcji
 * pod przyklejonym paskiem, a nie za nim. */
html{scroll-behavior:auto}
.dh > section[id],.dh [id^="kontakt"]{scroll-margin-top:96px}
@media (max-width:900px){.dh > section[id],.dh [id^="kontakt"]{scroll-margin-top:72px}}
.dh .rejon[id],.dh .rejon > h3[id]{scroll-margin-top:96px}
@media (max-width:900px){.dh .rejon[id],.dh .rejon > h3[id]{scroll-margin-top:72px}}

/* ---- Szerokie zdjecie w naglowku ------------------------------------
 * Ramka .szeroka rozciagala sie na wysokosc kolumny z tekstem, a samo
 * zdjecie trzymalo wlasne proporcje 3:2 i konczylo sie wyzej. Pod
 * fotografia zostawalo puste pole, na Kontakcie 179 px, na Pytaniach
 * 130 px. Teraz ksztalt ustala ramka, a zdjecie ja wypelnia. */
.dh .head .shot .frame.szeroka,
body.page-child .dh .head .shot .frame.szeroka{aspect-ratio:3 / 2;flex:0 0 auto;min-height:0}
.dh .frame.szeroka img{aspect-ratio:auto;height:100%}


/* ---- Poziome zdjecie idzie pasem pod tekst --------------------------
 * W ukladzie dwukolumnowym fotografia 3:2 konczy sie duzo wyzej niz
 * kolumna z tekstem i po prawej zostaje pusty slup. Wzorzec z podstrony
 * sprzedazy mieszkania rozwiazuje to inaczej: naglowek na jedna kolumne,
 * zdjecie pasem na pelna szerokosc pod tekstem. */
.dh .head:has(.shot.pas),
body.page-child .dh .head:has(.shot.pas){grid-template-columns:minmax(0,1fr)}
.dh .head .shot.pas{margin:26px 0 0}
.dh .head .shot.pas .frame,
body.page-child .dh .head .shot.pas .frame{aspect-ratio:3 / 2;flex:0 0 auto;min-height:0}
.dh .head .shot.pas .frame img{aspect-ratio:auto;height:100%;object-position:50% 50%}

/* ---- Filmy z YouTube -------------------------------------------------
 * Zamiast osadzac ramke YouTube pokazujemy wlasna miniature z przyciskiem.
 * Ramka wchodzi dopiero po kliknieciu, wiec strona sie nie dlawi i YouTube
 * nie ustawia ciasteczek zanim ktos naprawde zechce obejrzec. */
.dh .filmy{display:grid;grid-template-columns:1.55fr 0.72fr;gap:22px;align-items:start;margin-top:26px}
.dh .film{margin:0}
.dh .film figcaption{margin-top:10px;font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink2)}
.dh .film figcaption b{display:block;margin-top:3px;letter-spacing:.04em;text-transform:none;font-size:13px;color:var(--ink);font-family:Manrope,system-ui,-apple-system,'Segoe UI',sans-serif;font-weight:500}
.dh .odtwarzacz{position:relative;display:block;width:100%;padding:0;border:1px solid var(--rule);border-radius:3px;overflow:hidden;background:var(--p);cursor:pointer;line-height:0}
.dh .odtwarzacz img{display:block;width:100%;height:auto}
.dh .odtwarzacz .ikona{position:absolute;left:50%;top:50%;width:64px;height:64px;margin:-32px 0 0 -32px;border-radius:50%;background:var(--tq);display:block;transition:transform .18s ease}
.dh .odtwarzacz .ikona::after{content:"";position:absolute;left:26px;top:20px;border-style:solid;border-width:12px 0 12px 19px;border-color:transparent transparent transparent #06100F}
.dh .odtwarzacz:hover .ikona{transform:scale(1.08)}
.dh .odtwarzacz:focus-visible{outline:2px solid var(--tq);outline-offset:3px}
.dh .film iframe{display:block;width:100%;aspect-ratio:16 / 9;border:1px solid var(--rule);border-radius:3px}
.dh .film.pion iframe{aspect-ratio:9 / 16}
@media (prefers-reduced-motion:reduce){.dh .odtwarzacz:hover .ikona{transform:none}}
@media (max-width:900px){
	.dh .filmy{grid-template-columns:minmax(0,1fr);gap:26px}
	.dh .film.pion{max-width:300px}
	.dh .odtwarzacz .ikona{width:54px;height:54px;margin:-27px 0 0 -27px}
	.dh .odtwarzacz .ikona::after{left:22px;top:17px;border-width:10px 0 10px 16px}
}

/* ---- Warianty siatki filmow -----------------------------------------
 * male: rzad krotkich poradnikow, po trzy w wierszu.
 * jeden: pojedynczy pionowy Short obok tekstu, wezszy niz kolumna. */
.dh .filmy.male{grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.dh .filmy.male .odtwarzacz .ikona{width:46px;height:46px;margin:-23px 0 0 -23px}
.dh .filmy.male .odtwarzacz .ikona::after{left:19px;top:14px;border-width:9px 0 9px 14px}
.dh .filmy.male figcaption b{font-size:12.5px}
.dh .filmy.jeden{grid-template-columns:minmax(0,320px)}
@media (max-width:900px){
	.dh .filmy.male{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
	.dh .filmy.jeden{grid-template-columns:minmax(0,1fr)}
	.dh .filmy.jeden .film{max-width:300px}
}
@media (max-width:560px){.dh .filmy.male{grid-template-columns:minmax(0,1fr)}}

/* ---- Przyciski dziedzicza krój pisma --------------------------------
 * Przegladarka nie przekazuje font-family do button, input, select ani
 * textarea, wiec przycisk wysylki formularza, strzalki opinii i przycisk
 * menu renderowaly sie Montserratem z ustawien Elementora zamiast naszym
 * Manrope. Na najwazniejszym przycisku na stronie bylo to widoczne. */
.dh button,.dh input,.dh select,.dh textarea,
.dh-nag button,.dh-szuflada button,
.dh .form-slot .elementor-button,
.dh .form-slot .elementor-button-text,
.dh .karuzela button{font-family:Manrope,system-ui,-apple-system,"Segoe UI",sans-serif}

/* ---- Podpisy zdjec bez kursywy ---------------------------------------
 * Motyw ustawia figcaption na kursywe, a my nie wczytujemy kursywy IBM
 * Plex Mono, wiec przegladarka pochylala krzywo litery sama z siebie.
 * W kroju o stalej szerokosci wyglada to tanio. */
.dh figcaption,.dh .film figcaption,.dh .shot figcaption{font-style:normal}

/* ---- Przycisk odmowy na banerze -------------------------------------
 * Odmowa ma byc rownie latwa jak zgoda, wiec ten sam rozmiar, ta sama
 * czcionka i wyrazne tlo, tylko w spokojniejszym kolorze. Wtyczka
 * wstawiala tu wlasny niebieski, ktory gryzl sie z paleta. */
#cookie-notice #cn-refuse-cookie{background:#22403D !important;color:#EDEAE4 !important;border:1px solid #35C9BE !important;font-weight:600 !important}
#cookie-notice #cn-refuse-cookie:hover{background:#2A4F4B !important;color:#FFFFFF !important}
#cookie-notice .cn-buttons-container{display:inline-flex;flex-wrap:wrap;gap:10px;align-items:center}


/* --- Kompozycja: poprawki po przegladzie -----------------------------
 * 1. Pas zdjeciowy stojacy poza naglowkiem rownal sie do krawedzi ekranu,
 *    a nie do kolumny tekstu. Teraz trzyma te sama siatke co reszta strony.
 * 2. W ukladzie dwukolumnowym prawa kolumna startowala na wysokosci malej
 *    etykiety, wiec wygladala za wysoko wzgledem duzego naglowka po lewej.
 * 3. Pionowy film obok poziomego byl o polowe wyzszy. Proporcje kolumn sa
 *    dobrane tak, ze obie ramki koncza sie na tej samej linii.
 * 4. Na telefonie filmy stały przy lewej krawedzi zamiast posrodku. */

.dh > .shot.pas,
body.page-child .dh > .shot.pas{max-width:1080px;width:100%;margin:26px auto 0}
body.page-id-20001 .dh > .shot.pas{margin:26px auto 0}

@media (min-width:901px){
  .dh .two > div:first-child:has(> .eyebrow:first-child) + *:not(:has(.eyebrow)){padding-top:34px}
  .dh .filmy{grid-template-columns:1.7778fr 0.5625fr}
}

@media (max-width:900px){
  .dh .filmy{justify-items:center}
  .dh .filmy .film{width:100%;margin-inline:auto}
  .dh .film.pion,
  .dh .filmy.jeden .film{max-width:300px}
}


/* --- Runda poprawek Marcina ------------------------------------------
 * Kadr portretu na stronie glownej obcinal dlonie przy szerszych ekranach.
 * Wizytowka pod zdjeciem byla nieczytelna, wszystko jedna wielkoscia.
 * Pasek z liczbami zostawial puste marginesy po bokach.
 * Licznik w karuzeli opinii schodzi, zostaja same strzalki.
 * Portret na sprzedazy domu byl rozciagany w pionie o 16 procent. */

.dh-glowna .head .shot .frame{aspect-ratio:4 / 5}
.dh-glowna .head .shot .frame img{object-position:50% 50%}

.dh-glowna .head .shot figcaption{display:grid;gap:7px;font-size:15px}
.dh-glowna .head .shot figcaption b{font-size:19px}
.dh-glowna .head .shot figcaption .lic{font-size:12.5px}
.dh-glowna .head .shot figcaption a{font-size:17px;font-weight:600}

/* Pasek z liczbami i kafelki uslug byly wezsze niz reszta strony, stad
 * puste marginesy po bokach. Teraz trzymaja te sama siatke co naglowek. */
.dh-glowna .liczby,.dh-glowna #uslugi{max-width:1080px !important}
.dh .liczby .strip{max-width:none;width:100%}

.dh .hub a{font-size:19px}
@media (max-width:900px){.dh .hub a{font-size:17px}}

.dh .karuzela span{display:none}

.dh .head p.lead{font-size:20px;color:var(--ink)}

.dh .wideo .eyebrow{font-size:14px;letter-spacing:.16em}

.dh .dane b{font-size:21px}

body.page-id-20004 .dh .head .shot{align-self:start}
body.page-id-20004 .dh .head .shot .frame{aspect-ratio:2 / 3;min-height:0}


/* Krotki film pionowy na stronie Buying: jedna kolumna, wysrodkowana,
 * zeby nie zostawial pustej polowy ekranu po prawej. */
.dh .wideo.krotki .two{grid-template-columns:minmax(0,1fr);text-align:center;gap:10px}
.dh .wideo.krotki .two > div:last-child{padding-top:0 !important}
.dh .wideo.krotki .filmy.jeden{justify-content:center;justify-items:center}


/* Strona About po angielsku: dane kontaktowe pod zdjeciem maja byc
 * czytelne, a nie drobnym monospace jak podpis techniczny. */
.dh-en-about .head .shot figcaption,body.page-id-20270 .dh .head .shot figcaption{display:grid;gap:6px;font-size:14px}
body.page-id-20270 .dh .head .shot figcaption a{font-size:16px;font-weight:600}


/* Telefon i mail w sekcji kontaktu maja sie rzucac w oczy, nie stac
 * obok formularza tym samym stopniem pisma co reszta akapitow. */
.dh .contact .direct a{font-size:21px;font-weight:600}
@media (max-width:900px){.dh .contact .direct a{font-size:19px}}


/* --- Runda trzecia ---------------------------------------------------
 * 1. Sekcja o Warszawie dostaje w tle zdjecie z drona, to samo, ktore mamy
 *    juz na stronie z pytaniami. Zdjecie zamiast filmu: ten sam efekt,
 *    80 kB zamiast kilku megabajtow doladowywanych przy kazdym wejsciu.
 * 2. Marker przy listach byl kreska szeroka na 11 pikseli i czytal sie jak
 *    myslnik. Zamiast niej kropka.
 * 3. Link do opinii w Google ma sie rzucac w oczy. */

.dh .zdrona{position:relative;isolation:isolate;overflow:hidden}
.dh .zdrona::before{content:"";position:absolute;inset:0;z-index:-2;background:url(/wp-content/uploads/2026/09/warszawa-drona-centrum-hd.webp) center/cover no-repeat;opacity:.18}
.dh .zdrona::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,var(--g) 0%,rgba(10,20,19,.35) 26%,rgba(10,20,19,.35) 74%,var(--g) 100%)}

.dh .creed li::before{width:5px;height:5px;border-radius:50%;top:9px}

.dh .hub a,.dh section .hub a{font-size:22px}
@media (max-width:900px){.dh .hub a,.dh section .hub a{font-size:18px}}

/* Linia dzielnic nad kontaktem na stronach EN. Regula powyzej podnosi
   kazdy link .hub do 22 px, przez co etykieta Districts wygladala przy
   nazwach jak przypis. Tutaj wyrownujemy jedno z drugim. */
.dh .hub.dzielnice-inline{font-size:17px;line-height:1.7}
.dh .hub.dzielnice-inline a,.dh section .hub.dzielnice-inline a{font-size:17px}

/* Kadr portretow na Kontakcie i O nas. Ramka jest niemal kwadratowa,
   a zdjecia sa pionowe, wiec przy object-fit:cover cos musi wyjsc poza
   kadr. Przy 32 i 22 procentach ucinalo czubek glowy. Zsuwamy kadr
   do samej gory: lepiej stracic marynarke na dole niz glowe. */
/* Ramka byla niemal kwadratowa, a portret jest w proporcji 4:5,
   wiec cover musial cos uciac. Ustawiamy ramke na proporcje zdjecia
   i nie przycinamy juz nic. */
body.page-id-46 .dh .head .shot .frame,
body.page-id-55 .dh .head .shot .frame{aspect-ratio:4 / 5;height:auto;min-height:0}
body.page-id-46 .dh .head .shot .frame img,
body.page-id-55 .dh .head .shot .frame img{object-position:50% 50% !important}

/* Akapit przedstawiajacy Marcina pod przyciskami w naglowku.
   Byl za drobny wobec reszty kolumny, a to jedyne miejsce, gdzie
   Marcin mowi o sobie pierwszej osobie. Podnosimy i domykamy
   pusta przestrzen, ktora zostawala pod przyciskami. */
.dh .head .lead{margin-top:24px}
.dh .head .lead p{font-size:18px;line-height:1.65;color:var(--ink)}
@media (max-width:900px){.dh .head .lead p{font-size:17px}}

/* Dwa tla naraz w sekcji Warszawa. Pod filmem lezalo jeszcze
   nieruchome zdjecie z drona i oba przenikaly sie w kasze.
   Gdy film jest w kadrze, zdjecie chowamy. Zostaje jako zapas
   tylko wtedy, gdy filmu nie ma, czyli na telefonie i przy
   wylaczonych animacjach. */
.dh .zdrona.film-gra::before{opacity:0}

/* Odnosnik w zdaniu nie moze byc wiekszy od zdania, w ktorym stoi.
   Regula podnoszaca linki .hub do 22 px lapala takze te wtracone
   w akapit, przez co Pelny opis na stronie ... puchl. */
.dh p.hub{font-size:17px;line-height:1.7}
.dh p.hub a,.dh section p.hub a{font-size:inherit}

/* Naglowek przy liscie krokow. Lewa kolumna miala 96 px przy prawej
   na 861, wiec zostawalo 765 px pustki. Naglowek jedzie teraz razem
   ze scrollem, a pustka znika. */


/* Kreska pod przyciskami byla dublowana: raz z sekcji, raz z bloku
   ponizej. Zostawiamy jedna. */
.dh .head .cta + .lead{border-top:0;padding-top:0}
.dh .head .lead + hr,.dh .head hr + hr{display:none}

/* ===== Portrety: nigdy nic nie ucinamy =====
   Ramka byla rozciagana do wysokosci wiersza, a zdjecie lezalo w niej
   absolutnie z object-fit:cover. Przy ramce 0,649 i pliku 0,800 zjadalo
   to 19 procent po bokach, czyli bark i rekaw. Teraz odwracamy zaleznosc:
   to zdjecie wyznacza wysokosc ramki, wiec kadr jest zawsze pelny,
   niezaleznie od proporcji pliku. */
.dh .head .shot{align-self:start !important}
.dh .head .shot .frame{min-height:0 !important;height:auto !important;aspect-ratio:auto !important}
.dh .head .shot .frame img{position:static !important;width:100% !important;height:auto !important;object-fit:contain !important;object-position:50% 50% !important}
.dh .wizytowka img{object-fit:contain !important;object-position:50% 50% !important;height:auto !important}

/* Kadry poza naglowkiem tez bez ucinania */
.dh .shot .frame{aspect-ratio:auto !important;height:auto !important;min-height:0 !important}
.dh .shot .frame img{position:static !important;width:100% !important;height:auto !important;object-fit:contain !important}

/* Wizytowka pod zdjeciem: nazwisko wieksze, kontakt tuz pod nim */
.dh .head .shot figcaption b,.dh-glowna .head .shot figcaption b{font-size:22px;line-height:1.25;font-weight:600;letter-spacing:-.01em}
.dh .head .shot figcaption .lic,.dh-glowna .head .shot figcaption .lic{font-size:12.5px;margin-top:1px}
.dh .head .shot figcaption a{font-size:16px;line-height:1.5}
.dh .head .shot figcaption .lic + a{margin-top:9px}
.dh .head .shot figcaption p:empty{display:none}
@media (max-width:600px){
  .dh .head .shot figcaption b,.dh-glowna .head .shot figcaption b{font-size:24px}
  .dh .head .shot figcaption a{font-size:17px}
}

/* Pusty blok pod przyciskami nie zostawia dziury */
.dh .head div.lead:not(:has(*)){margin-top:0;display:none}

/* Kontakt: dane sa juz w bloku Dane, nad formularzem ich nie powtarzamy */
body.page-id-46 .dh .contact .direct{display:none}

/* Zglos nieruchomosc: dane sa 300 px wyzej pod zdjeciem, nad formularzem ich nie powtarzamy */
body.page-id-331 .dh .contact .osoba,
body.page-id-331 .dh .contact .direct{display:none}

/* Glowna: kolumna z tekstem wysrodkowana wzgledem portretu, zeby nie zostawala dziura pod przyciskami */
@media (min-width:901px){
  body.page-id-13 .dh .head .tekst{align-self:center}
}

/* Etapy: naglowek nad krokami, zamiast pustej kolumny obok */
@media (min-width:901px){
  .dh .two.two:has(> .steps){grid-template-columns:1fr;gap:30px;justify-content:stretch;text-align:left}
  .dh .two.two:has(> .steps) > div:first-child{position:static;max-width:54ch}
  .dh .two.two:has(> .steps) > .steps{grid-template-columns:1fr 1fr}
  .dh .two.two:has(> .steps) > .steps > .step:last-child:nth-child(odd){grid-column:1 / -1}
}

/* Wyjatki stron: kolejnosc i szerokosc krokow */
.dh .two.two:has(> .steps) > div:first-child{order:0}
.dh .two.two:has(> .steps) > .steps{order:1}
@media (min-width:901px){
  body.page-id-20004 .dh .two.two:has(> .steps) > .steps{grid-template-columns:1fr;max-width:66ch}
}

/* Kolumny wyrownane do srodka, zeby krotsza nie zostawiala pustki */
@media (min-width:901px){
  .dh .contact{align-items:center}
  .dh .head{align-items:center}
  body.page-id-13 .dh .head .tekst{align-self:auto}
}

/* Klauzula pod formularzem czytelna takze na telefonie */
@media (max-width:600px){
  .dh .form-slot .dh-klauzula{font-size:13.5px;line-height:1.6}
}

/* Opinie na telefonie: mniejszy font i wezszy margines, zeby linia nie byla na trzy slowa */
@media (max-width:600px){
  .dh .opinie .quote blockquote, .dh .quote blockquote{font-size:17px;line-height:1.5}
  .dh section .opinie > .quote{padding:22px 20px}
  .dh .quote{gap:14px}
}
.dh .wizytowka p:empty,.dh-glowna .wizytowka p:empty{display:none}
/* Poprawki Marcina 5.09: foto nad przyciskami na telefonie (sprzedaz domu, wynajem) */
@media (max-width:900px){
  body.page-id-20004 .dh .head,body.page-id-20003 .dh .head{display:flex;flex-direction:column;gap:0}
  body.page-id-20004 .dh .head > .tekst,body.page-id-20003 .dh .head > .tekst{display:contents}
  body.page-id-20004 .dh .head > .tekst > h1,body.page-id-20003 .dh .head > .tekst > h1{order:1}
  body.page-id-20004 .dh .head > .tekst > .sub,body.page-id-20003 .dh .head > .tekst > .sub{order:2}
  body.page-id-20004 .dh .head > .shot,body.page-id-20003 .dh .head > .shot{order:3;margin:20px 0 24px}
  body.page-id-20004 .dh .head > .tekst > .cta,body.page-id-20003 .dh .head > .tekst > .cta{order:4}
  body.page-id-20004 .dh .head > .tekst > .lead,body.page-id-20003 .dh .head > .tekst > .lead{order:5}
}
/* Portret nie rozciaga sie ponad swoja rozdzielczosc (pikseloza na tablecie) */
@media (max-width:900px){.dh .head .shot .frame{max-width:460px;margin-left:auto;margin-right:auto}}
/* Hub Poznaj Warszawe: dzielnice w dwoch kolumnach */
.dh .dzielnice{display:grid;grid-template-columns:1fr 1fr;gap:34px 44px;align-items:start}
.dh .dzielnice .gdz{margin:0;min-width:0}
.dh .dzielnice .lab{margin-bottom:12px;padding-bottom:10px}
.dh .dzielnice .lab{border-bottom:1px solid var(--linia,#1E3230)}
.dh .dzielnice .lab a{font-family:Newsreader,Georgia,serif;font-size:21px;line-height:1.25;letter-spacing:-.01em;text-transform:none;color:inherit}
.dh .dzielnice .lab a:hover{color:#35C9BE}
.dh .dzielnice .lab .ile{display:block;font-family:inherit;font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;color:#7E9491;margin-top:5px}
.dh .dzielnice .siatka a{min-height:44px;display:inline-flex;align-items:center}
@media (max-width:900px){.dh .dzielnice{grid-template-columns:1fr;gap:26px}}
/* Akcent w tekscie, prosba Marcina przy sprzedazy dzialki */
.dh .akcent{color:#35C9BE}
/* Naglowek stoi nad siatka, wiec gorny padding siatki robil pusty pas w jej kolorze */
@media (min-width:901px){.dh .two.two.two:has(> .steps) > .steps.steps{padding-top:0}}
/* Cele dotykowe w stopce: 39px to za malo na kciuk */
@media (max-width:900px){.dh-stopka__kol a,.dh-stopka__kontakt a{padding-top:12px;padding-bottom:12px}}

/* Oddech pod zdjeciem naglowka i karuzela przy dwoch cytatach */
.dh .shot + .dalej{margin-top:56px}
@media (max-width:900px){.dh .shot + .dalej{margin-top:36px}}
.dh .opinie:has(> .quote:only-child) + .karuzela,
.dh .opinie:has(> .quote:nth-child(2):last-child) + .karuzela{display:none}

/* Dron na pelna szerokosc, tekst zostaje w kolumnie */
.dh .zdrona > p,.dh .zdrona > h2,.dh .zdrona > .cta{max-width:1000px;margin-left:0;margin-right:auto}
.dh .zdrona > p:empty{display:none}

/* Wizytowka na telefonie: jedna ramka zamiast ramki w ramce, portret kadrowany
   zamiast letterboxa, numer licencji bez monospace. */
@media (max-width:900px){
	.dh .autor{padding-top:40px;padding-bottom:40px}
	.dh .autor .wizytowka{gap:16px;padding:18px}
	.dh .autor .wizytowka img{width:150px !important;height:188px !important;
		object-fit:cover !important;object-position:50% 15% !important}
	.dh .autor .wizytowka p{border:0;background:none;padding:0;font-size:15px}
	.dh .autor .wizytowka .lic{font-family:inherit;font-size:inherit;letter-spacing:0}
}

/* Wizytowka na tablecie: jest miejsce obok zdjecia, wiec karta wraca do ukladu poziomego.
   Na telefonie zostaje kolumna. */
@media (min-width:521px) and (max-width:900px){
	.dh .autor .wizytowka{flex-direction:row;align-items:center;gap:22px}
}

/* Portret w pelnym kadrze na stronie glownej. Plik ma 2:3, wiec ramka dostaje
   te sama proporcje i nic sie nie przycina. */
.dh .frame.wysoka{aspect-ratio:2 / 3}
.dh .frame.wysoka img{aspect-ratio:2 / 3;height:auto;object-fit:cover !important;object-position:50% 12% !important}

/* Pas z dronem tuz pod naglowkiem nasuwal sie na przyciski. */
.dh .head + .zdrona{margin-top:56px}
@media (max-width:900px){.dh .head + .zdrona{margin-top:36px}}

/* Podpis mapy dzielnicy to zrodlo danych, a nie nazwisko. Dziedziczyl
   styl wizytowki spod portretu i wychodzil na 22 px. */
.dh .head .shot figcaption.zrodlo{display:block;font-family:"IBM Plex Mono",monospace;
	font-size:11.5px;line-height:1.5;letter-spacing:.04em;color:var(--ink2);padding-top:10px}
.dh .head .shot figcaption.zrodlo b{display:inline;margin:0;font-size:11.5px;font-weight:500;
	letter-spacing:.04em;color:var(--ink2);font-family:inherit}

/* Pas ze zdjeciem rezerwuje miejsce, zanim obrazek sie doczyta.
   Bez tego kadr ma zero wysokosci i strona podskakuje przy ladowaniu. */
.dh .shot.pas .frame.szeroka{aspect-ratio:3 / 2 !important;height:auto !important}
.dh .shot.pas .frame.szeroka img{height:100% !important}

/* Akapity pod dwukolumnowym naglowkiem zaczynaly sie o 150 px dalej
   niz tekst nad nimi i strona wygladala na rozjechana. */
.dh header.head:has(> figure.shot) ~ section.dalej{max-width:1080px !important}
.dh header.head:has(> figure.shot) ~ section.dalej > p{max-width:700px;margin-left:0;margin-right:auto}
@media (max-width:900px){.dh header.head:has(> figure.shot) ~ .dalej{margin-left:auto}}

/* Ramka "o mnie" bez zdjecia byla drobniejsza niz tekst wokol niej.
   Marcin poprosil o wiecej miejsca, wiec dostaje szerszy kadr i wiekszy stopien. */
.dh section.autor:has(.wizytowka.bez-foto){max-width:1040px !important}
.dh .wizytowka.bez-foto{padding:34px 38px;max-width:100%}
.dh .wizytowka.bez-foto p{font-size:17px;line-height:1.65}
@media (max-width:900px){
	.dh .wizytowka.bez-foto{padding:24px 22px}
	.dh .wizytowka.bez-foto p{font-size:16px}
}

/* Na stronie glownej zniknal akapit spod naglowka i przyciski przykleily sie
   do H1. Odstep dawal margines tamtego akapitu, wiec gdy .cta idzie
   zaraz po naglowku, dokladamy go osobno. */
.dh .head h1 + .cta{margin-top:36px}
@media (max-width:900px){.dh .head h1 + .cta{margin-top:28px}}

/* Marcin prosil o powietrze w naglowkach stron uslugowych: miedzy
   tytulem a akapitem i miedzy akapitem a przyciskami bylo ciasno. */
.dh .head h1 + .sub,
.dh .head h1 + .lead{margin-top:22px}
.dh .head .sub + .cta,
.dh .head .lead + .cta{margin-top:34px}
@media (max-width:900px){
	.dh .head h1 + .sub,
	.dh .head h1 + .lead{margin-top:18px}
	.dh .head .sub + .cta,
	.dh .head .lead + .cta{margin-top:26px}
}

/* Jedyna twarda liczba na stronie sprzedazy. Dostaje turkusowa ramke,
   zeby nie ginela w akapicie. */
.dh p.lead.ramka{border:1px solid var(--tq);border-left-width:3px;
	border-radius:2px;padding:18px 22px;margin-top:26px}
@media (max-width:900px){.dh p.lead.ramka{padding:15px 17px}}

/* Pasek z liczbami przeniesiony do naglowka strony glownej. Kolumna
   tekstu byla o 191 px nizsza od portretu obok, wiec z gory i z dolu
   zostawala pusta przestrzen. Liczby zapelniaja ja dowodem, a nie
   kolejnym przyciskiem, i trafiaja nad zgiecie. */
/* Liczby sa teraz osobnym dzieckiem naglowka, nie czescia kolumny tekstu.
   Dzieki temu na komputerze siedza pod tekstem w lewej kolumnie, a na
   telefonie schodza pod portret, czyli dokladnie tam, gdzie byly przed
   zmiana. Marcin prosil, zeby telefonu nie ruszac. */
@media (min-width:901px){
	/* Liczby siedza teraz w kolumnie tekstu, tuz pod przyciskami.
	   Wczesniej byly osobnym wierszem gridu, a portret rozpiety na dwa
	   wiersze rozciagal je oba i robil dziure pod przyciskami. */
	.dh-glowna .head .liczby-hero{margin-top:46px}
}
@media (max-width:900px){
	/* Na telefonie trzeci przycisk zostaje widoczny, liczby schodza pod portret. */
	.dh-glowna .head .liczby-hero{margin-top:36px}
}
.dh .head .liczby-hero .strip{display:grid;grid-template-columns:1fr 1fr;gap:28px;
	background:none;border:0;box-shadow:none;border-radius:0;overflow:visible}
.dh .head .liczby-hero .strip > div{background:none;border:0;padding:0;box-shadow:none}
.dh .head .liczby-hero .strip > div{min-width:0}
.dh .head .liczby-hero b{display:block;font-family:Newsreader,Georgia,serif;font-weight:400;
	font-size:39px;line-height:1.05;color:var(--tq);letter-spacing:-.01em}
.dh .head .liczby-hero b i{font-style:normal;font-size:17px;color:inherit;opacity:.85}
.dh .head .liczby-hero span{display:block;margin-top:6px;font-family:"IBM Plex Mono",ui-monospace,monospace;
	font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink2)}
@media (max-width:900px){
	.dh .head .liczby-hero{margin-top:28px;padding-top:22px}
	.dh .head .liczby-hero .strip{gap:20px}
	.dh .head .liczby-hero b{font-size:28px}
	.dh .head .liczby-hero b i{font-size:15px}
}

/* Trzy przyciski w hero ukladaly sie w schodek: dwa w rzedzie,
   trzeci wezszy pod spodem. Teraz trzeci konczy sie rowno z drugim,
   wiec blok ma jedna krawedz zamiast trzech roznych. */
@media (min-width:901px){
	.dh-glowna .head .cta{display:grid;grid-template-columns:auto auto;justify-content:start;align-items:start}
	.dh-glowna .head .cta > :nth-child(3){grid-column:1 / -1}
}

/* Porzadki w kreskach na podstronach. W okolicy wizytowki schodzily sie trzy
   poziome linie o roznych szerokosciach: separator nad sekcja (780 px),
   ramka wizytowki (700 px) i ramka akapitu w jej srodku (500 px), przy
   czym dwie ostatnie mialy identyczny kolor i to samo tlo. Zostaje samo
   pudelko wizytowki. */
.dh .autor .wizytowka p{border:0;background:none;padding:0;max-width:none}
.dh section.autor{border-top:0}
/* Pusty akapit, ktory WordPress dokleja w wizytowce, nie ma czego pokazac. */
.dh .wizytowka p:empty{display:none}

/* Regula .dh section lapala tez sekcje Elementora w srodku formularza,
   przez co nad polami wisiala urwana kreska szerokosci 474 px i 74 px
   pustego paddingu. Sekcje Elementora nie sa naszymi sekcjami. */
.dh section.elementor-section,
.dh section.e-con,
.dh section.elementor-element{border-top:0;padding:0}

/* W naglowkach nie ma juz zadnych wewnetrznych kresek. Na stronie glownej
   zdjelismy linie nad liczbami, tu robimy to samo z linia nad dodatkowym
   akapitem. Odstep oddziela tak samo, a nie mnozy poziomych krech. */
.dh .head .lead p{border-top:0;padding-top:0;margin-top:26px}


/* Na telefonie linki stopki i przelacznik jezyka mialy 36 do 39 px wysokosci,
   czyli ponizej progu 44 px. Pseudoelement powieksza cel dotykowy,
   nie ruszajac ani o piksel ukladu. */
@media (max-width:900px){
	.dh-stopka a,
	.dh .crumbs .jezyk{position:relative}
	.dh-stopka a::after,
	.dh .crumbs .jezyk::after{content:"";position:absolute;inset:-7px -4px}
}

/* Wejscie na strone. Naglowek byl jedyna sekcja bez ruchu, bo skrypt odsloniec
   celowo go pomija (to najwiekszy malowany element, nie chcemy go opozniac).
   Przez to strona sprawiala wrazenie zastanej. Kaskada na czystym CSS, bez JS,
   wiec nie ma mrugniecia ani czekania na skrypt. Zdjecie dostaje samo
   przenikanie, bez ruchu, zeby nie ruszac ukladu w trakcie ladowania. */
@keyframes dh-wejscie{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
@keyframes dh-przenikanie{from{opacity:0}to{opacity:1}}
.dh .head > .tekst > *,
.dh .head > .liczby-hero{animation:dh-wejscie .55s cubic-bezier(.16,1,.3,1) backwards}
.dh .head > .tekst > h1{animation-delay:.03s}
.dh .head > .tekst > .sub,
.dh .head > .tekst > .lead{animation-delay:.12s}
.dh .head > .tekst > .cta{animation-delay:.2s}
.dh .head .liczby-hero{animation-delay:.27s}
.dh .head > figure.shot{animation:dh-przenikanie .75s ease .08s backwards}
.dh .crumbs{animation:dh-przenikanie .5s ease backwards}
@media (prefers-reduced-motion:reduce){
	.dh .head > .tekst > *,
	.dh .head > .liczby-hero,
	.dh .head > figure.shot,
	.dh .crumbs{animation:none}
}

/* Wyroznienie gotowych rejonow zdjete na prosbe Marcina: lista ma
   traktowac wszystkie rejony rowno. Klasa ma-strone zostaje w tresci,
   wiec wystarczy przywrocic te cztery reguly, gdyby wrocil do pomyslu. */


/* Wizytowka pod portretem szla krojem maszynowym, tym samym co etykiety
   i podpisy techniczne. Marcin poprosil o krój spojny z reszta strony,
   wiec nazwisko, licencja i dane kontaktowe ida teraz Manrope, czyli tym,
   czym pisana jest cala tresc. Wizytowka w jednym kroju z tekstem. */
.dh figure.shot figcaption b,
.dh figure.shot figcaption .lic,
.dh figure.shot figcaption a{font-family:Manrope,ui-sans-serif,system-ui,sans-serif !important}
.dh figure.shot figcaption b{letter-spacing:-.01em;font-weight:600}
.dh figure.shot figcaption .lic{letter-spacing:.01em}
.dh figure.shot figcaption a{letter-spacing:0;font-weight:600}

/* Marcin: przycisk menu na telefonie byl za drobny. Kreski mialy 20 na 1,5 px,
   napis 14 px. Powiekszamy jedno i drugie, obszar dotyku i tak mial juz 44 px. */
@media (max-width:900px){
	.dh-nag__burger span{width:26px !important;height:2px !important}
	.dh-nag__burger i{font-size:16px !important;letter-spacing:.06em !important}
	.dh-nag__burger{gap:10px}
}

/* Krzyzyk w banerze zgody mial domyslny roz wtyczki i na telefonie
   wychodzil poza baner na przycisk. Zostaja dwa wyrazne przyciski. */
#cookie-notice .cn-close-icon{display:none !important}


/* Strony obszarow bez wlasnego zdjecia. Naglowek idzie na pelna szerokosc,
   zeby po prawej nie zostawala pusta kolumna po zdjeciu. */
@media (min-width:901px){
	.dh .head.bez-foto{grid-template-columns:1fr}
	.dh .head.bez-foto > .tekst{max-width:760px}
}


/* Wizytowka w wersji angielskiej. Marcin prosil o mniejszy format
   i ciemne tlo, bo jego zdjecie powtarzalo sie na jednej stronie. */
[data-jezyk="en"] .dh section.autor .wizytowka{background:transparent;border:0;padding:0;gap:20px;max-width:720px}
[data-jezyk="en"] .dh section.autor .wizytowka img{width:104px !important;height:130px !important;object-fit:cover;object-position:50% 12%}
[data-jezyk="en"] .dh section.autor .wizytowka p{font-size:14px;line-height:1.7;border:0;background:none;padding:0;max-width:none}
@media (max-width:520px){
	[data-jezyk="en"] .dh section.autor .wizytowka img{width:88px !important;height:110px !important}
}


/* Lista rejonow na stronie dzielnicy. Ten sam wyglad co chipy
   w Poznaj Warszawe, zeby nie byla to naga lista linkow. */
.dh section.rejony-lista .siatka{display:flex;flex-wrap:wrap;gap:10px;margin-top:18px}
.dh section.rejony-lista .siatka a{display:inline-block;padding:9px 15px;border:1px solid var(--rule);border-radius:2px;font-size:14.5px;color:var(--tx);text-decoration:none;transition:border-color .2s,color .2s}
.dh section.rejony-lista .siatka a:hover{border-color:var(--tq);color:var(--tq)}
.dh section.rejony-lista .siatka a:focus-visible{outline:2px solid var(--tq);outline-offset:3px}


/* Na nizszych ekranach baner zgody zaslanial dol menu razem z przyciskiem
   Zglos nieruchomosc. Szuflada dostaje zapas na jego wysokosc, zeby dalo sie
   doscrollowac do konca. */
@media (max-width:900px){
	body:has(#cookie-notice.cookie-notice-visible) .dh-szuflada{padding-bottom:250px} /* szuflada-baner */
}


/* Zdanie o srednim czasie sprzedazy bylo wieksze od reszty tekstu.
   Marcin prosil o ten sam krok co akapity. */
.dh .head p.lead.akcent.ramka{font-size:16px;line-height:1.62}

/* Snippet WebP owija zdjecia w . Bez tej reguly  staje sie
   elementem ukladu (flex, siatka) i razem z max-width:100% sciska zdjecie,
   np. w wizytowce z 150 px do 35 px. display:contents usuwa go z ukladu. */
.dh picture,.dh-stopka picture{display:contents}