/* =========================================================================
   ZD002 — Krzysztof Moskwa, arkusz globalny (Wygląd → Dodatkowy CSS)
   Wariant B: grafit + terakota.
   UWAGA: Kadence ustawia kolor bezposrednio na h1..h6 oraz na a:hover —
   regula bezposrednia bije dziedziczenie, dlatego (1) wymuszamy dziedziczenie
   naglowkow na poczatku pliku, (2) przy KAZDYM :hover na linku powtarzamy color.
   ========================================================================= */

body h1, body h2, body h3, body h4, body h5, body h6{color:inherit}

:root{
  --graphite:#1E1E1E; --graphite-2:#262626;
  --terakota:#B5623C;  --terakota-2:#9E5333;
  --sand:#F7F5F2; --line:#E3DED8; --text:#2B2B2B; --muted:#6B6560;
  --maxw:1180px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth; scroll-padding-top:76px}
body{
  margin:0; background:#fff; color:var(--text);
  font-family:"Segoe UI", system-ui, -apple-system, Roboto, Arial, sans-serif;
  font-size:17px; line-height:1.65; -webkit-font-smoothing:antialiased;
}
img{max-width:100%; height:auto; display:block}
.wrap{max-width:var(--maxw); margin:0 auto; padding:0 24px}

/* --- ukrycie chromu motywu: wlasny naglowek i stopka z mu-plugina --- */
#masthead, .site-header, #colophon, .site-footer, .kadence-breadcrumbs,
.entry-hero, .entry-hero-container-inner,
header.entry-header, .entry-header, .post-title, .page-title,
.entry-taxonomies, .entry-meta, .entry-title{display:none !important}
#wrapper, #inner-wrap, .site, .site-container, .content-area, .site-main,
#primary, .entry-content-wrap, .content-bg, .entry-content, .single-content,
article.post, article.page{
  margin:0 !important; padding:0 !important; max-width:none !important;
  width:100% !important; background:transparent !important;
  box-shadow:none !important; border:0 !important;
}

/* --- KLUCZOWE: WordPress opakowuje zawartosc bloku "grupa" w dodatkowy
   .wp-block-group__inner-container. Przez to siatka (.tiles) miala JEDNO dziecko
   (ten wrapper), a nie kafelki — stad ukladaly sie jeden pod drugim; hero tracil
   centrowanie z tego samego powodu. display:contents usuwa wrapper z ukladu,
   dzieki czemu dzieci znow sa bezposrednimi dziecmi sekcji. --- */
.wp-block-group__inner-container{display:contents}

/* --- tekst wyjustowany z dzieleniem wyrazow (tylko szerokie kolumny) --- */
.just, .post-body p, .wp-block-post-content p{
  text-align:justify; hyphens:auto; -webkit-hyphens:auto;
}

/* ========================= NAGLOWEK ========================= */
.zen-header{
  position:sticky; top:0; z-index:50;
  background:rgba(30,30,30,.94); backdrop-filter:blur(10px);
  border-bottom:1px solid rgba(255,255,255,.08);
}
.zen-header .navrow{display:flex; align-items:center; justify-content:space-between; gap:20px; height:76px}
.zen-header .brand{
  display:flex; flex-direction:column; flex:0 1 auto; min-width:0;
  text-decoration:none; color:#fff; line-height:1.15;
}
.zen-header .brand:hover{color:#fff}
.brand .n{display:block; font-size:19px; font-weight:700; letter-spacing:.03em; text-transform:uppercase; line-height:1.12}
.brand .s{display:block; font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; color:#A8A29B; margin-top:3px; line-height:1.2}
.zen-header nav{flex:0 1 auto; min-width:0}
.zen-header nav ul{display:flex; flex-wrap:nowrap; gap:17px; list-style:none; margin:0; padding:0}
.zen-header nav a{
  color:#D6D1CB; text-decoration:none; font-size:12px; letter-spacing:.05em;
  text-transform:uppercase; padding:6px 0; border-bottom:2px solid transparent; white-space:nowrap;
}
.zen-header nav a:hover{color:#fff; border-bottom-color:var(--terakota)}
.navphones{display:flex; gap:8px; flex:0 0 auto}
.navphone{
  display:flex; flex-direction:column; text-decoration:none; white-space:nowrap;
  background:var(--terakota); color:#fff; padding:8px 14px; border-radius:3px;
  font-weight:700; font-size:14.5px; line-height:1.15;
}
.navphone span{display:block; font-size:9.5px; font-weight:400; letter-spacing:.1em; text-transform:uppercase; opacity:.85; margin-bottom:2px}
.navphone:hover{background:var(--terakota-2); color:#fff}
.navphone.alt{background:transparent; color:#E6E1DB; border:1px solid rgba(255,255,255,.28)}
.navphone.alt:hover{background:rgba(255,255,255,.08); color:#fff; border-color:rgba(255,255,255,.5)}
.burger{display:none}
#mnu{display:none}
/* Telefony w rozwinietym menu — w pasku nagłówka na telefonie nie ma na nie
   miejsca, a numer wspolpracownicy ma byc dostepny tak samo jak wlasciciela. */
.zen-header .nav-tel{display:none}

/* ========================= HERO ze slajdami =========================
   Zdjecia siedza w zwyklym bloku galerii (klientka moze je podmienic w panelu),
   a przenikanie robi CSS — bez biblioteki i bez JS. */
.hero{
  position:relative; min-height:640px; display:flex; align-items:center;
  overflow:hidden; color:#fff; padding:96px 0;
  /* Naglowek i akapit hero maja konczyc sie na tej samej krawedzi. Szerokosc
     kolumny liczymy z rozmiaru fontu naglowka (23ch = 13.23 x font-size), wiec
     obie skaluja sie razem na kazdej szerokosci ekranu. Jedno miejsce do zmiany. */
  --hero-kolumna:calc(clamp(34px,5.2vw,60px) * 13.23);
}
.hero .hero-slides{
  position:absolute !important; inset:0; margin:0 !important; display:block !important;
  gap:0 !important; z-index:0;
}
.hero .hero-slides figure.wp-block-image{
  position:absolute; inset:0; margin:0 !important; width:auto !important; opacity:0;
  animation:heroSlajd 21s infinite;
}
.hero .hero-slides figure.wp-block-image img{
  width:100% !important; height:100% !important; object-fit:cover; border-radius:0;
}
.hero .hero-slides figure.wp-block-image:nth-child(1){animation-delay:0s}
.hero .hero-slides figure.wp-block-image:nth-child(2){animation-delay:7s}
.hero .hero-slides figure.wp-block-image:nth-child(3){animation-delay:14s}
@keyframes heroSlajd{
  0%{opacity:0} 4%{opacity:1} 33%{opacity:1} 38%{opacity:0} 100%{opacity:0}
}
/* przyciemnienie pod tekstem */
.hero::after{
  content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(90deg, rgba(18,17,16,.74) 0%, rgba(18,17,16,.50) 46%, rgba(18,17,16,.22) 100%);
}
.hero .hero-tresc{
  position:relative; z-index:2; width:100%;
  max-width:var(--maxw); margin-left:auto; margin-right:auto;   /* centrowanie w hero */
}
/* miedzy sekcjami strony glownej nie ma byc bialych przerw od marginesow blokow */
body.page .single-content > *{margin-top:0 !important; margin-bottom:0 !important}

/* AOS domyslnie startuje z przesunieciem 100 px w dol — przy pelnoekranowych
   sekcjach widac przez to biale pasy, zanim animacja sie odpali. 24 px wystarcza,
   zeby efekt byl czytelny, a przerwy niewidoczne. */
[data-aos^="fade"][data-aos^="fade"]{transform:translate3d(0,24px,0)}
[data-aos^="fade"][data-aos^="fade"].aos-animate{transform:translate3d(0,0,0)}
@media (prefers-reduced-motion:reduce){
  .hero .hero-slides figure.wp-block-image{animation:none}
  .hero .hero-slides figure.wp-block-image:nth-child(1){opacity:1}
}
.hero .eyebrow{color:var(--terakota)!important; font-size:12px; letter-spacing:.22em; margin:0 0 20px}
/* Kolumna musi pomiescic dluzsza z dwoch logicznych linii rozdzielonych <br>
   ("ktore koncza sie w terminie" = 748 px przy 60 px fontu). Wczesniejsze 17ch
   dawalo 587 px, wiec obie linie lamaly sie dodatkowo - cztery wiersze zamiast
   dwoch. Ponizej ok. 470 px tekst zawija sie naturalnie, bo ogranicza go juz
   szerokosc kontenera. */
.hero h1{
  font-size:clamp(34px,5.2vw,60px); line-height:1.1; margin:0 0 22px;
  font-weight:700; letter-spacing:-.015em; max-width:var(--hero-kolumna); color:#fff;
}
.hero p.lead{font-size:19px; color:#DED8D1; max-width:var(--hero-kolumna); margin:0 0 34px; text-align:left}
/* przyciski = blok core/buttons (edytowalny), stylowany na nasz wyglad */
.wp-block-buttons{display:flex; flex-wrap:wrap; gap:14px; align-items:center; margin:0}
.wp-block-buttons .wp-block-button{margin:0}
/* Kolory przyciskow pochodza z ustawien MOTYWU (Kadence → Ogolne → Przyciski):
   buttons_background = #B5623C / hover #9E5333, buttons_color = #fff.
   Dzieki temu kazdy przycisk dodany pozniej przez klientke jest od razu w kolorach
   marki i nie trzeba niczego nadpisywac. Tutaj wylacznie geometria. */
.wp-block-buttons .wp-block-button__link{
  padding:15px 30px; border-radius:3px; font-weight:600; font-size:16px;
  text-decoration:none; display:inline-block; border:0;
}
/* wariant obrysowy na ciemnym tle (hero) */
.wp-block-button.btn-ghost .wp-block-button__link{
  background:transparent; background-color:transparent;
  border:1px solid rgba(255,255,255,.35); color:#fff;
}
.wp-block-button.btn-ghost .wp-block-button__link:hover{
  background:rgba(255,255,255,.08); background-color:rgba(255,255,255,.08);
  border-color:#fff; color:#fff;
}
/* Kadence ma w content.min.css `.single-content .wp-block-buttons{margin-top:0}`
   — ta sama specyficznosc co nasza regula, ale jego arkusz laduje sie POZNIEJ,
   wiec wygrywa. Stad selektor o jedna klase wyzej. W edytorze content.min.css
   sie nie laduje — dlatego tam odstep byl poprawny, a na stronie zerowy. */
.single-content .wp-block-buttons.zen-cta-row{justify-content:center; margin-top:44px}
.wp-block-buttons.zen-cta-row{justify-content:center}
.single-content .wp-block-buttons.post-cta-btn{justify-content:center; margin-top:0}
.wp-block-buttons.post-cta-btn{justify-content:center}

/* ========================= PASEK STATYSTYK (bloki Count Up) ========================= */
.stats{background:var(--graphite-2); color:#fff; border-top:3px solid var(--terakota)}
.stats .grid{display:grid; grid-template-columns:repeat(3,1fr)}
.stats .wp-block-kadence-countup,
.stats .stat-link{
  padding:34px 20px; text-align:center; margin:0;
  border-left:1px solid rgba(255,255,255,.09); display:block; text-decoration:none;
}
.stats .stat-link .wp-block-kadence-countup{padding:0; border-left:0}
.stats .grid > *:first-child{border-left:0}
.stats .kb-count-up-number{font-size:40px; font-weight:700; line-height:1; color:var(--terakota); transition:color .18s}
.stats .kb-count-up-title{font-size:12.5px; letter-spacing:.12em; text-transform:uppercase; color:#B3ADA6; margin-top:10px}
.stats .stat-link:hover .kb-count-up-number{color:var(--terakota-2)}

/* ========================= SEKCJE ========================= */
.sec{padding:96px 0}
.sec-alt{background:#F1ECE5}
/* Tlo strony daje Kadence (#F7FAFC, laduje sie po naszym arkuszu), a --sand (#F7F5F2)
   jest od niego prawie nieodroznialny - sekcje sie zlewaly. Stad ciemniejszy ton tylko
   dla sekcji naprzemiennych. O nas bez tla, jak w makiecie: naprzemiennosc od Co robimy. */
#o-nas.sec-alt{background:none}
/* Sekcja wyceny stracila w edytorze (2026-09-04) zewnetrzna grupe .sec i zostala sama .wrap,
   bez odstepu gora/dol. Odstep z CSS, zeby nie ruszac tresci edytowanej przez klientke. */
#wycena{padding-top:96px; padding-bottom:96px}
.eyebrow{
  font-size:12px; letter-spacing:.2em; text-transform:uppercase;
  color:var(--terakota); font-weight:700; margin:0 0 14px; text-align:left;
}
h2{font-size:clamp(28px,3.6vw,42px); line-height:1.15; margin:0 0 20px; font-weight:700; letter-spacing:-.01em}
h3{font-size:19px; margin:0 0 8px; font-weight:700}
/* ZASADA SZEROKOSCI (jedna dla calej strony):
   szerokosc tresci wyznacza WYLACZNIE .wrap (1180 px + 24 px paddingu = 1132 px).
   Zaden element sekcji nie ma wlasnego max-width — inaczej naglowek, wstep, ramka
   i FAQ koncza sie w roznych miejscach i uklad wyglada na rozjechany.
   Podstrona wpisu ma wlasna, wezsza kolumne czytania (860 px) — ale JEDNA dla wszystkiego. */
.sec-head{max-width:none; margin:0 0 52px}
.sec-head h2, .sec-head .wp-block-heading{max-width:none}
.sec-head p:not(.eyebrow){color:var(--muted); font-size:18px; margin:0; max-width:none}
.two-col{min-width:0}
.two{display:grid; grid-template-columns:1.05fr .95fr; gap:60px; align-items:start}
.databox{background:#fff; border:1px solid var(--line); border-radius:5px; padding:30px}
.sec-alt .databox{background:#fff}
.note{
  background:var(--sand); border-left:3px solid var(--terakota);
  padding:26px 28px; border-radius:0 4px 4px 0; max-width:none; margin:0;
}

/* ========================= KAFELKI ========================= */
/* align-items:stretch jawnie — bez tego ostatni kafelek w rzedzie bywa wyzszy
   od pozostalych (siatka nie wyrownuje wysokosci). */
.tiles{display:grid; grid-template-columns:repeat(3,1fr); gap:22px; align-items:stretch}
/* UWAGA: display:contents na .wp-block-group__inner-container sprawia, ze DOM-owym
   rodzicem kafelka NIE jest .tiles — selektor z '>' nie trafia. Uzywamy potomka. */
.tiles .tile{height:100%}
.tiles-gap{margin-top:56px}
.tile{
  background:#fff; border:1px solid var(--line); border-radius:4px;
  padding:26px; transition:border-color .18s, transform .18s;
}
.tile:hover{border-color:var(--terakota); transform:translateY(-3px)}
.tile p{margin:0; color:var(--muted); font-size:15.5px}
/* tick w tej samej linii co tytul, mniejszy (uwaga klientki nr 2) */
.tile-title{display:flex; align-items:baseline; gap:9px; font-size:18px; margin:0 0 8px}
.tile-title::before{
  content:"✓"; color:var(--terakota); font-size:14px; font-weight:700; flex:0 0 auto;
}

/* ========================= OPINIE ========================= */
.reviews{
  background:var(--graphite); color:#fff; border-radius:5px; padding:44px;
  display:grid; grid-template-columns:auto 1fr; gap:44px; align-items:center;
  margin-bottom:56px;
}
.score{text-align:center; padding-right:44px; border-right:1px solid rgba(255,255,255,.12)}
.score .big{font-size:56px; font-weight:700; line-height:1; color:var(--terakota); margin:0}
.score .of{font-size:14px; color:#A8A29B; margin:6px 0 0}
.score .cnt{font-size:14px; color:#DED8D1; margin:14px 0 0}
.quotes .opinia{margin:0 0 18px; padding:0 0 0 20px; border-left:2px solid var(--terakota); font-size:16.5px; color:#E4DFD9}
.quotes .opinia p{margin:0; text-align:left}
.quotes .opinia cite{display:block; font-style:normal; font-size:13.5px; color:#9E9891; margin-top:6px}
.quotes .lnk{margin:6px 0 0}
.quotes .lnk a{color:var(--terakota); font-weight:600; text-decoration:none; font-size:15px}
.quotes .lnk a:hover{text-decoration:underline; color:var(--terakota)}

/* ========================= KROKI WYCENY ========================= */
.steps{display:grid; grid-template-columns:repeat(5,1fr); gap:18px; margin:0 0 44px}
.step{position:relative; padding-top:26px}
.step::before{content:""; position:absolute; top:8px; left:0; right:0; height:2px; background:var(--line)}
.step .n{
  position:absolute; top:0; left:0; width:18px; height:18px; border-radius:50%;
  background:var(--terakota); color:#fff; font-size:10px; font-weight:700;
  display:flex; align-items:center; justify-content:center; margin:0; line-height:1;
}
.step h3{font-size:16px; margin:0 0 5px}
.step p:not(.n){margin:0; font-size:14.5px; color:var(--muted); text-align:left}

/* ========================= FAQ (natywny blok Akordeon) ========================= */
.faq.wp-block-accordion{max-width:none}
.faq .wp-block-accordion-item{border-bottom:1px solid var(--line)}
.faq .wp-block-accordion-heading{margin:0}
.faq .wp-block-accordion-heading__toggle{
  width:100%; background:none; border:0; cursor:pointer; font:inherit; color:inherit;
  display:flex; align-items:center; justify-content:space-between; gap:20px;
  padding:20px 4px 20px 0; text-align:left; font-weight:600; font-size:17.5px;
}
.faq .wp-block-accordion-heading__toggle:hover{color:var(--terakota)}
/* po kliknieciu przegladarka rysuje wlasna obwodke focusu wokol przycisku —
   zostawiamy ja tylko dla nawigacji klawiatura (:focus-visible). */
.faq .wp-block-accordion-heading__toggle:focus{outline:none; box-shadow:none}
.faq .wp-block-accordion-heading__toggle:focus-visible{outline:2px solid var(--terakota); outline-offset:3px}
.faq .wp-block-accordion-heading__toggle-title{text-decoration:none !important}
.faq .wp-block-accordion-heading__toggle[aria-expanded="true"]{color:var(--terakota)}
.faq .wp-block-accordion-heading__toggle-icon{
  color:var(--terakota); font-size:24px; font-weight:400; line-height:1; flex:0 0 auto;
}
.faq .wp-block-accordion-panel{padding:2px 0 22px; border:0; box-shadow:none}
/* Od WP 7.1 zwiniete odpowiedzi ukrywa dopiero skrypt bloku (hidden="until-found"),
   wiec przez chwile po zaladowaniu FAQ jest rozwiniete. AOS liczy wtedy pozycje sekcji
   i kontakt ponizej FAQ nie pojawial sie wcale. Regula dziala tylko przed startem
   skryptu: potem zwiniete panele maja [hidden], a rozwiniete sa w .is-open. */
.wp-block-accordion-item:not(.is-open) > .wp-block-accordion-panel:not([hidden]){display:none}
.faq .wp-block-accordion-panel p{margin:0; color:var(--muted)}

/* ========================= KONTAKT ========================= */
.contact{display:grid; grid-template-columns:.85fr 1.15fr; gap:56px; align-items:start}
.cbox{margin-bottom:26px}
.cbox.last{margin-bottom:0}
.cbox .k{font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); margin:0 0 5px}
.cbox .v{font-size:19px; font-weight:600; margin:0}
.cbox .v + .v{margin-top:4px}
.cbox .v.small{font-size:17px; font-weight:400}
.cbox .v em{font-style:normal; font-size:13px; color:var(--muted); font-weight:400; letter-spacing:.06em; text-transform:uppercase; margin-left:6px}
/* bez jawnego koloru linki lapia granat z palety Kadence */
.cbox .v a{text-decoration:none; color:var(--terakota)}
.cbox .v a:hover{color:var(--terakota-2); text-decoration:underline}

/* --- WPForms w stylu strony --- */
.cform .wpforms-container{margin:0; background:var(--sand); border:1px solid var(--line); border-radius:5px; padding:32px}
.cform .wpforms-form .wpforms-field{padding:0 0 18px}
.cform .wpforms-form label.wpforms-field-label{
  font-size:13px !important; letter-spacing:.08em; text-transform:uppercase;
  color:var(--muted) !important; font-weight:400 !important; margin-bottom:7px;
}
.cform .wpforms-form input[type=text], .cform .wpforms-form input[type=email],
.cform .wpforms-form input[type=tel], .cform .wpforms-form textarea{
  width:100% !important; max-width:none !important; padding:13px 14px;
  border:1px solid var(--line); border-radius:3px; font:inherit; font-size:16px; background:#fff;
}
.cform .wpforms-form textarea{min-height:120px}
.cform .wpforms-form input:focus, .cform .wpforms-form textarea:focus{outline:2px solid var(--terakota); outline-offset:-1px; border-color:transparent}
.cform .wpforms-form .wpforms-field-checkbox label{font-size:13.5px; color:var(--muted); line-height:1.5}
.cform .wpforms-form button[type=submit]{
  background:var(--terakota) !important; color:#fff !important; border:0 !important;
  padding:15px 34px !important; border-radius:3px !important; font-family:inherit !important;
  font-weight:600 !important; font-size:16px !important; cursor:pointer;
  /* bez tego tekst ladowal przy dolnej krawedzi: WPForms zostawia wysoki
     line-height z body (1.65) i wlasna wysokosc przycisku */
  line-height:1.2 !important; height:auto !important; min-height:0 !important;
  display:inline-flex !important; align-items:center; justify-content:center;
}
.cform .wpforms-form button[type=submit]:hover{background:var(--terakota-2) !important; color:#fff !important}
.cform .wpforms-confirmation-container-full{background:var(--sand); border:1px solid var(--terakota); border-radius:5px; padding:26px; color:var(--text)}

/* ========================= LISTA REALIZACJI (Query Loop) ========================= */
.zen-real, .zen-real-arch{padding:0; background:transparent}
/* core WP ma .wp-block-post-template{padding:0;margin:0} o tej samej specyficznosci —
   stad selektor z kontekstem sekcji */
.zen-real ul.wp-block-post-template, .zen-real-arch ul.wp-block-post-template{
  display:grid; grid-template-columns:repeat(3,1fr); gap:20px; list-style:none;
  margin:0; padding:0;
}
li.wp-block-post{
  background:#fff; border:1px solid var(--line); border-radius:4px; overflow:hidden;
  display:flex; flex-direction:column; margin:0; position:relative;
  transition:border-color .18s, transform .18s;
}
.zen-real-arch li.wp-block-post{background:var(--sand)}
li.wp-block-post:hover{border-color:var(--terakota); transform:translateY(-3px)}
li.wp-block-post .wp-block-post-featured-image{margin:0}
li.wp-block-post .wp-block-post-featured-image img{width:100%; aspect-ratio:4/3; object-fit:cover}
/* zastepcza miniatura tylko gdy wpis nie ma zdjecia wyrozniajacego */
li.wp-block-post:not(:has(.wp-block-post-featured-image))::before{
  content:""; display:block; height:200px; background:linear-gradient(135deg,#4A4340,#2C2825);
}
.wp-block-post-title{font-size:17.5px !important; line-height:1.3; margin:0 !important; padding:20px 22px 0; font-weight:700}
.wp-block-post-title a{text-decoration:none; color:inherit}
.wp-block-post-title a::after{content:""; position:absolute; inset:0; z-index:1}  /* caly kafel klikalny */
li.wp-block-post:hover .wp-block-post-title a{color:var(--terakota)}
.wp-block-post-excerpt{padding:8px 22px 22px; margin:0}
.wp-block-post-excerpt p{margin:0; color:var(--muted); font-size:14.5px; line-height:1.55; text-align:left}
.wp-block-post-excerpt__more-link{display:none}

.wp-block-query-pagination{display:flex; justify-content:center; align-items:center; gap:10px; margin-top:48px; flex-wrap:wrap}
.wp-block-query-pagination a, .wp-block-query-pagination .current{
  display:inline-block; padding:10px 16px; border:1px solid var(--line); border-radius:3px;
  text-decoration:none; color:var(--text); font-size:15px; font-weight:600;
}
.wp-block-query-pagination a:hover{border-color:var(--terakota); color:var(--terakota)}
.wp-block-query-pagination .current{background:var(--terakota); border-color:var(--terakota); color:#fff}

/* ========================= PODSTRONA REALIZACJI ========================= */
.post-hero{background:var(--graphite); color:#fff; padding:74px 0 54px}
.post-hero .eyebrow{color:var(--terakota); margin-bottom:14px}
.post-hero h1{font-size:clamp(28px,4.2vw,44px); line-height:1.12; margin:0; max-width:none; font-weight:700; letter-spacing:-.01em; color:#fff}
/* jeden znacznik dla wpisu (mu-plugin) i archiwum (blok): <p class="backlink"><a>…</a></p> */
.backlink{margin:0 0 22px; font-size:15px}
.backlink a{color:var(--terakota); text-decoration:none; font-weight:600}
.backlink a:hover{text-decoration:underline; color:var(--terakota-2)}
.post-hero .eyebrow{margin-top:0}
/* Tresc WPISU realizacji: jeden czytelny slup.
   UWAGA: Kadence nadaje klase .single-content takze STRONOM, dlatego regula musi
   byc zawezona do body.single — inaczej sciska sekcje strony glownej do 860 px. */
/* Kadence wstawia zdjecie wyrozniajace nad trescia — bez tego tekst zaczynal sie
   tuz pod krawedzia zdjecia (0 px odstepu). Ograniczamy tez wysokosc banera. */
/* Zdjecie wyrozniajace wpisu.
   PULAPKA: Kadence buduje kadr proporcjonalny technika padding-bottom + height:0
   i pozycjonuje obrazek absolutnie. Ustawienie wlasnego `padding` na .post-thumbnail
   kasuje ten padding-bottom i zdjecie zapada sie do zera wysokosci.
   Tutaj swiadomie rozbrajamy caly kadr, zeby zdjecie bylo w pelnych proporcjach. */
body.single .post-thumbnail{
  max-width:1180px !important; margin:0 auto 8px !important;
  height:auto !important; padding-bottom:0 !important; width:auto !important;
}
body.single .post-thumbnail .post-thumbnail-inner{position:static !important; height:auto !important}
body.single .post-thumbnail img{
  position:static !important; width:100% !important; height:auto !important;
  max-width:1400px; max-height:none; object-fit:contain; border-radius:4px; margin:0 auto;
}
body.single .single-content{padding:70px 24px 96px !important}
body.single .single-content > *{max-width:860px; margin-left:auto; margin-right:auto}
body.single .single-content > .post-cta{max-width:860px}
.post-meta{
  display:flex; flex-wrap:wrap; gap:38px; margin:0 0 34px;
  padding:26px 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line);
}
.post-meta .cbox{margin:0}
.post-meta .cbox .k{font-size:11px}
.post-meta .cbox .v{font-size:17px}
.post-cta{background:var(--graphite); color:#fff; text-align:center; padding:70px 24px; margin-top:56px; border-radius:5px}
.post-cta h2{color:#fff; margin-bottom:14px}
.post-cta p{color:#C9C3BC; max-width:52ch; margin:0 auto 30px; text-align:center}

/* --- galeria zdjec: uklad kolumnowy (masonry) ---
   Rowne kafle i brak przycinania wykluczaja sie przy mieszanych orientacjach:
   pionowe zdjecie w kadrze 4:3 zostawia szerokie puste pasy po bokach ("ramki").
   Dlatego wysokosc kafla wyznacza samo zdjecie, a spojnosc daje rowna szerokosc
   kolumn. Zadne zdjecie nie jest przyciete i zadne nie ma pustego tla dookola.
   Dla klientki nic sie nie zmienia - to nadal ten sam blok core/gallery. */
.zen-gallery.wp-block-gallery{
  display:block !important; columns:3; column-gap:14px;
}
.zen-gallery.wp-block-gallery figure.wp-block-image{
  display:block !important; break-inside:avoid; -webkit-column-break-inside:avoid;
  margin:0 0 14px !important; width:100% !important; flex:none !important;
  aspect-ratio:auto !important; background:none; border:0;
  overflow:hidden; position:relative;
}
/* Core wymusza na obrazku w galerii flex:1 0 0%, height:100% i object-fit:cover
   regula z ID w specyficznosci (:not(#individual-image)) - stad wszedzie !important.
   Ramka <img> musi miec prawdziwe proporcje pliku, bo natywny lightbox WP liczy
   z niej docelowy kadr powiekszenia. */
.zen-gallery.wp-block-gallery figure.wp-block-image img{
  display:block; flex:none !important;
  width:100% !important; height:auto !important;
  max-width:100% !important; max-height:none !important;
  object-fit:contain !important; border-radius:4px;
}
@media (max-width:1000px){ .zen-gallery.wp-block-gallery{columns:2} }
@media (max-width:600px){ .zen-gallery.wp-block-gallery{columns:1} }

/* ========================= RESPONSYWNOSC ========================= */
@media (max-width:1180px){
  .zen-header nav ul{gap:13px}
  .zen-header nav a{font-size:11.5px}
  .navphone{font-size:13.5px; padding:7px 11px}
}
@media (max-width:1080px){
  .zen-header nav{
    position:absolute; top:76px; left:0; right:0; background:var(--graphite-2);
    border-bottom:1px solid rgba(255,255,255,.1); display:none;
  }
  .zen-header nav ul{flex-direction:column; gap:0; padding:8px 24px 18px}
  .zen-header nav a{display:block; padding:13px 0; border-bottom:1px solid rgba(255,255,255,.07); font-size:12.5px}
  #mnu:checked ~ nav{display:block}
  .burger{display:flex; flex-direction:column; gap:5px; cursor:pointer; padding:10px; flex:0 0 auto}
  .burger i{display:block; width:24px; height:2px; background:#fff}
  .zen-header .nav-tel{display:block}
  .zen-header .nav-tel a{
    color:var(--terakota); font-weight:700; font-size:13.5px; letter-spacing:.04em;
    text-transform:none;
  }
  .zen-header .nav-tel:first-of-type a{padding-top:18px}
}
@media (max-width:1000px){
  .two, .contact{grid-template-columns:1fr; gap:40px}
  .tiles{grid-template-columns:repeat(2,1fr)}
  .zen-real ul.wp-block-post-template, .zen-real-arch ul.wp-block-post-template{grid-template-columns:repeat(2,1fr)}
  .steps{grid-template-columns:repeat(2,1fr); gap:26px}
  .step::before{display:none}
  .step{padding-top:0; padding-left:30px}
  .step .n{top:3px}
  .reviews{grid-template-columns:1fr; gap:30px; padding:34px}
  .score{padding-right:0; padding-bottom:26px; border-right:0; border-bottom:1px solid rgba(255,255,255,.12)}
}
@media (max-width:760px){
  body{font-size:16px}
  .sec, .zen-real{padding:66px 0}
  #wycena{padding-top:66px; padding-bottom:66px}
  .navphone.alt{display:none}                 /* na telefonie jeden przycisk */
  .navphone span{display:none}
  .navphone{padding:10px 14px; font-size:14px}
  .wp-block-cover.hero{min-height:520px}
  .wp-block-cover.hero .wp-block-cover__inner-container{padding:70px 0}
  .stats .grid{grid-template-columns:repeat(2,1fr)}
  .stat{border-left:0; border-top:1px solid rgba(255,255,255,.09); padding:26px 14px}
  .stat:nth-child(-n+2){border-top:0}
  .stat:last-child{grid-column:1/-1}
  .stat .num{font-size:33px}
  .tiles{grid-template-columns:1fr}
  .zen-real ul.wp-block-post-template, .zen-real-arch ul.wp-block-post-template{grid-template-columns:1fr}
  .steps{grid-template-columns:1fr}
  .reviews{padding:26px}
  .post-meta{gap:22px}
  .just, .post-body p{text-align:left}        /* justowanie ma sens dopiero od tabletu */
}

/* ========================= STOPKA =========================
   Tresc pochodzi z bloku synchronizowanego "Stopka strony" (panel → Stopka strony),
   wiec sa to zwykle bloki: grupy, akapity i listy. */
.zen-footer{background:var(--graphite); color:#9E9891; padding:56px 0 30px; font-size:14.5px}
.zen-footer .fgrid{display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:44px; margin-bottom:38px}
.zen-footer .fcol p{margin:0 0 10px}
.zen-footer .fbrand-n{color:#fff; font-size:18px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; margin:0 !important}
.zen-footer .fbrand-s{font-size:11.5px; letter-spacing:.16em; text-transform:uppercase; color:#7E7871; margin:3px 0 14px !important}
.zen-footer h4{color:#fff; font-size:13px; letter-spacing:.14em; text-transform:uppercase; margin:0 0 14px; font-weight:700}
.zen-footer ul{list-style:none; margin:0; padding:0}
.zen-footer li{margin-bottom:9px}
.zen-footer a{text-decoration:none; color:inherit}
.zen-footer a:hover{color:var(--terakota)}
.zen-footer .fbot{
  border-top:1px solid rgba(255,255,255,.1); padding-top:22px;
  display:flex; justify-content:space-between; align-items:center;
  gap:12px 26px; flex-wrap:wrap; font-size:13.5px;
}
.zen-footer .fbot p{margin:0}
.zen-footer .fautor{margin-left:auto; color:#7E7871}
.zen-footer .fautor a{color:#9E9891}
.zen-footer .fautor a:hover{color:var(--terakota)}
@media (max-width:1000px){ .zen-footer .fgrid{grid-template-columns:1fr 1fr; gap:32px} }
@media (max-width:760px){
  .zen-footer .fgrid{grid-template-columns:1fr}
  .zen-footer .fbot{flex-direction:column; align-items:flex-start}
  .zen-footer .fautor{margin-left:0}
}