/* Kulmeble - premium landing. Palette wprost z identyfikacji klienta
   (logo, wizytówki): grafit + złoto. Theme lock: dark, cała strona. */

/* ---------- fonts (self-hosted, latin + latin-ext) ---------- */
@font-face { font-family:'Cormorant Garamond'; font-style:normal; font-weight:500; font-display:swap;
  src:url('fonts/CormorantGaramond-500-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0; }
@font-face { font-family:'Cormorant Garamond'; font-style:normal; font-weight:500; font-display:swap;
  src:url('fonts/CormorantGaramond-500-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+2000-206F,U+20AC,U+2212; }
@font-face { font-family:'Cormorant Garamond'; font-style:normal; font-weight:600; font-display:swap;
  src:url('fonts/CormorantGaramond-600-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0; }
@font-face { font-family:'Cormorant Garamond'; font-style:normal; font-weight:600; font-display:swap;
  src:url('fonts/CormorantGaramond-600-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+2000-206F,U+20AC,U+2212; }
@font-face { font-family:'Cormorant Garamond'; font-style:italic; font-weight:500; font-display:swap;
  src:url('fonts/CormorantGaramond-500i-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1E00-1E9F,U+1EF2-1EFF; }
@font-face { font-family:'Cormorant Garamond'; font-style:italic; font-weight:500; font-display:swap;
  src:url('fonts/CormorantGaramond-500i-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+2000-206F; }
@font-face { font-family:'Montserrat'; font-style:normal; font-weight:400; font-display:swap;
  src:url('fonts/Montserrat-400-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1E00-1E9F,U+1EF2-1EFF; }
@font-face { font-family:'Montserrat'; font-style:normal; font-weight:400; font-display:swap;
  src:url('fonts/Montserrat-400-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+2000-206F,U+20AC; }
@font-face { font-family:'Montserrat'; font-style:normal; font-weight:500; font-display:swap;
  src:url('fonts/Montserrat-500-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1E00-1E9F,U+1EF2-1EFF; }
@font-face { font-family:'Montserrat'; font-style:normal; font-weight:500; font-display:swap;
  src:url('fonts/Montserrat-500-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+2000-206F,U+20AC; }
@font-face { font-family:'Montserrat'; font-style:normal; font-weight:600; font-display:swap;
  src:url('fonts/Montserrat-600-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1E00-1E9F,U+1EF2-1EFF; }
@font-face { font-family:'Montserrat'; font-style:normal; font-weight:600; font-display:swap;
  src:url('fonts/Montserrat-600-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+2000-206F,U+20AC; }

/* ---------- tokens ---------- */
:root{
  --bg:#131315;
  --bg2:#191A1D;
  --ink:#ECE5D8;
  --muted:#A59C8C;
  --gold:#C69C53;
  --gold-2:#AC8A69;
  --line:rgba(198,156,83,.16);
  --serif:'Cormorant Garamond', Georgia, serif;
  --sans:'Montserrat', 'Avenir Next', sans-serif;
  --wrap:1360px;
  --pad:clamp(20px, 4vw, 56px);
}

*{margin:0;padding:0;box-sizing:border-box;-webkit-print-color-adjust:exact;print-color-adjust:exact}
/* scroll-padding: nagłówek jest przyklejony (64 px po przewinięciu), więc bez tego
   cel kotwicy (#tapicerka, #sypialnie z paska kategorii) lądował pod paskiem. */
html{scroll-behavior:smooth;scroll-padding-top:72px}
body{background:var(--bg);color:var(--ink);font:400 16px/1.7 var(--sans)}
img,video{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
::selection{background:var(--gold);color:var(--bg)}

.wrap{max-width:var(--wrap);margin:0 auto;padding-inline:var(--pad)}

h1,h2{font-family:var(--serif);font-weight:500;line-height:1.08;letter-spacing:.01em}
h2{font-size:clamp(34px,4vw,52px)}
.lead{color:var(--muted);max-width:52ch}

/* reveal on scroll - progressive enhancement.
   Stan początkowy dodajemy tylko, gdy JS działa (klasa .js na <html>).
   Bez tego przy wyłączonym lub niewczytanym JS cała treść zostaje niewidoczna,
   co widać także w narzędziach indeksujących. */
.js .reveal{opacity:0;transform:translateY(22px);transition:opacity .7s cubic-bezier(.16,1,.3,1),transform .7s cubic-bezier(.16,1,.3,1)}
.js .reveal.in{opacity:1;transform:none}
/* w druku i w PDF IntersectionObserver się nie uruchamia - bez tego cała treść
   wyszłaby pusta */
@media print{ .js .reveal{opacity:1;transform:none} }

@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  .js .reveal{opacity:1;transform:none;transition:none}
  .tile img{transition:none}
}

/* ---------- nav ---------- */
.nav{position:fixed;inset:0 0 auto 0;z-index:10;display:flex;align-items:center;justify-content:space-between;
  padding:18px var(--pad);background:linear-gradient(rgba(19,19,21,.82), rgba(19,19,21,0));}
/* Po przewinięciu poza górę strony pasek dostaje tło (klasa .scrolled z footer.php).
   Bez tego logo i numer lądowały na jasnych zdjęciach galerii i ginęły -
   sprawdzone na iPhonie 14.09. Tło jako ::before, żeby dało się je wygasić płynnie. */
.nav{transition:padding .25s ease}
.nav::before{content:"";position:absolute;inset:0;z-index:-1;background:rgba(19,19,21,.9);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);box-shadow:0 1px 0 var(--line);
  opacity:0;transition:opacity .25s ease}
.nav.scrolled{padding-block:10px}
.nav.scrolled::before{opacity:1}
.nav .logo svg{height:40px;width:auto;display:block;transition:height .25s ease}
.nav.scrolled .logo svg{height:32px}
.nav ul{display:flex;gap:34px;list-style:none;align-items:center}
.nav a{font:500 12.5px var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--ink);opacity:.85}
.nav a:hover{opacity:1;color:var(--gold)}
.nav .tel{color:var(--gold);opacity:1}

/* ---------- hero ---------- */
.hero{position:relative;min-height:100dvh;display:flex;align-items:flex-end;overflow:hidden}
.hero .bgs{position:absolute;inset:0}
.hero .bg{position:absolute;inset:0;width:100%;height:100%!important;object-fit:cover;object-position:center 38%}
/* Ruch bez wideo: powolny najazd na prawdziwe zdjęcie plus przenikanie trzech kadrów.
   Zero dodatkowych plików, zdjęcia są autentyczne, a nie wygenerowane. */
/* Kadry mają jawne klasy bg-1..bg-3, a nie pozycję w drzewie: kadry bywają owinięte
   w <picture> (webp + jpg), a wtedy każdy obrazek jest pierwszym dzieckiem swojego
   rodzica i reguły oparte na :nth-child() cicho przestają działać - wszystkie trzy
   kadry gasną naraz i hero robi się czarne. */
.hero .bg-2, .hero .bg-3{opacity:0}
@media (prefers-reduced-motion: no-preference){
  .hero .bg{animation:kb 26s ease-in-out infinite alternate, xf 27s linear infinite}
  .hero .bg-2{animation-delay:-4s, 9s}
  .hero .bg-3{animation-delay:-8s, 18s}
}
/* <picture> jest inline i ma zerowe wymiary - display:contents oddaje pozycjonowanie
   bezpośrednio obrazkowi. */
.hero .bgs > picture{display:contents}
@keyframes kb{ from{transform:scale(1.0) translateZ(0)} to{transform:scale(1.09) translateZ(0)} }
@keyframes xf{
  0%{opacity:1} 30%{opacity:1} 36%{opacity:0} 94%{opacity:0} 100%{opacity:1}
}
/* dwie warstwy: pionowa buduje czytelność pod tekstem, ukośna ratuje lewą kolumnę
   przy jasnym kadrze. Bez tego biały tekst na jasnym drewnie schodzi poniżej AA. */
.hero .scrim{position:absolute;inset:0;background:
  linear-gradient(180deg, rgba(19,19,21,.58) 0%, rgba(19,19,21,.42) 38%, rgba(19,19,21,.97) 100%),
  linear-gradient(100deg, rgba(19,19,21,.86) 0%, rgba(19,19,21,.58) 42%, rgba(19,19,21,.10) 74%)}
.hero .inner{position:relative;padding-bottom:clamp(56px,9vh,110px);max-width:820px}
.hero h1{font-size:clamp(46px,6.2vw,92px)}
.hero h1 em{font-style:italic;font-weight:500}
.hero p{margin-top:22px;font-size:17px;color:var(--ink);opacity:.82;max-width:44ch}
.hero .cta{margin-top:36px;display:flex;gap:22px;align-items:center;flex-wrap:wrap}
.btn{display:inline-block;background:var(--gold);color:#131315;font:600 13px var(--sans);
  letter-spacing:.1em;text-transform:uppercase;padding:17px 36px;transition:transform .25s cubic-bezier(.16,1,.3,1)}
.btn:hover{transform:translateY(-1px)}
.btn:active{transform:scale(.98)}
.link-tel{font:500 14px var(--sans);letter-spacing:.06em;color:var(--ink);border-bottom:1px solid var(--line);padding-bottom:4px}
.link-tel:hover{color:var(--gold);border-color:var(--gold)}

/* ---------- realizacje ---------- */
.section{padding-block:clamp(84px,11vw,150px)}
.sec-head{display:flex;flex-direction:column;gap:14px;margin-bottom:clamp(38px,5vw,64px)}
.cats{color:var(--muted);font-size:14px;letter-spacing:.02em}
.grid{display:grid;grid-template-columns:repeat(12,1fr);gap:clamp(14px,2vw,26px)}
.tile{position:relative}
.tile a{display:block}
.tile .ph{overflow:hidden;background:var(--bg2)}
.tile img{width:100%;height:100%!important;object-fit:cover;transition:transform .8s cubic-bezier(.16,1,.3,1)}
.tile:hover img{transform:scale(1.035)}
.tile figcaption{margin-top:14px;display:flex;flex-direction:column;gap:2px}
.tile .t{font-family:var(--serif);font-size:23px;font-weight:500}
.tile .m{color:var(--muted);font-size:13.5px}
.t7{grid-column:span 7}.t5{grid-column:span 5}.t4{grid-column:span 4}.t3{grid-column:span 3}.t8{grid-column:span 8}
/* Materiał od klienta jest w 95% pionowy, bo meble stolarskie są pionowe:
   wysokie zabudowy, ściany, drzwi ukryte. Kafel domyślnie pionowy - kadr
   poziomy ucinałby szafę w połowie. Poziome zostają wyjątkiem. */
.tile .ph{aspect-ratio:3/4}
.tile.szeroki .ph{aspect-ratio:8/5}
.grid .push{margin-top:clamp(24px,4vw,72px)}

/* ---------- zakres ---------- */
.zakres{background:var(--bg2)}
.zakres .rows{margin-top:10px}
.row{display:grid;grid-template-columns:1.1fr 1fr;gap:26px;align-items:baseline;
  padding:26px 0;border-bottom:1px solid var(--line)}
.row:last-child{border-bottom:none}
.row .n{font-family:var(--serif);font-size:clamp(22px,2.4vw,30px);font-weight:500}
.row .d{color:var(--muted);font-size:14.5px}

/* ---------- o nas ---------- */
.onas .cols{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(36px,6vw,96px);align-items:center}
.onas p{margin-top:20px;color:var(--muted)}
.onas p strong{color:var(--ink);font-weight:500}
.onas .sig{margin-top:30px;font-family:var(--serif);font-style:italic;font-size:20px;color:var(--gold-2)}
.onas .ph{overflow:hidden}
.onas img{aspect-ratio:4/5;object-fit:cover;width:100%;height:100%!important}

/* ---------- tapicerka: lustrzane odbicie sekcji o pracowni (kadr po lewej) ---------- */
.tapicerka .cols > .ph{order:-1}
.tapicerka ul{margin:22px 0 0;padding:0;list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:10px 24px;color:var(--ink)}
.tapicerka li{padding-left:18px;position:relative}
.tapicerka li::before{content:"";position:absolute;left:0;top:.66em;width:8px;height:1px;background:var(--gold)}
.onas.tapicerka img{object-position:center 40%}
@media (max-width:860px){
  .tapicerka .cols > .ph{order:0}
  .tapicerka ul{grid-template-columns:1fr}
  .onas.tapicerka img{object-position:center 78%}   /* na telefonie kadr 3:2 ma pokazać wezgłowie, nie lampę; .onas img z tej samej sekcji @media by wygrywał */
}

/* ---------- współpraca ---------- */
.wspolpraca{background:var(--bg2);text-align:center}
.wspolpraca .s{font-family:var(--serif);font-weight:500;font-size:clamp(26px,3.2vw,40px);
  line-height:1.35;max-width:21em;margin:0 auto}
.wspolpraca .s em{color:var(--gold);font-style:italic}

/* ---------- kontakt ---------- */
.kontakt .items{margin-top:44px;display:grid;grid-template-columns:repeat(3,auto);gap:clamp(30px,6vw,90px);justify-content:start}
.kontakt .val{display:block;font-family:var(--serif);font-size:clamp(22px,2.4vw,30px);font-weight:500}
a.val:hover{color:var(--gold)}
/* Podział ról jest prośbą klienta: Krzysztof prowadzi zlecenie od rozmowy do montażu,
   Sylwiusz odpowiada za montaż i wykończenie. Dla klienta premium to informacja,
   do kogo dzwonić - a nie ozdobnik. */
.kontakt .rola{display:block;margin-top:7px;color:var(--muted);font-size:13px;letter-spacing:.01em}

/* ---------- footer ---------- */
footer{border-top:1px solid var(--line);padding:34px 0 40px;color:var(--muted);font-size:13px}
footer .cols{display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap}
footer a{border-bottom:1px solid var(--line)}
footer a:hover{color:var(--gold)}

/* ---------- mobile ---------- */
@media (max-width: 860px){
  .nav ul{display:none}
  .nav .tel-m{display:block}
  .grid{grid-template-columns:1fr}
  /* każdy modyfikator szerokości musi tu być wymieniony: przy jednej kolumnie
     pozostawiony span tworzy niejawne kolumny i kafle robią się malutkie */
  .t7,.t5,.t4,.t3,.t8{grid-column:auto}
  /* na telefonie zdjęcie 3:4 zajmuje pół ekranu wysokości - zostawiamy je duże,
     bo to jedyny nośnik jakości na tej stronie */
  .tile.szeroki .ph{aspect-ratio:4/3}
  .grid .push{margin-top:0}
  .row{grid-template-columns:1fr;gap:6px}
  .onas .cols{grid-template-columns:1fr}
  .onas img{aspect-ratio:3/2;object-position:center 35%}
  .kontakt .items{grid-template-columns:1fr;gap:26px}
}
@media (min-width: 861px){ .nav .tel-m{display:none} }

/* ---------- klipy (pionowe, z telefonu klienta) ---------- */
.klipy .tasma{
  display:grid; grid-auto-flow:column; grid-auto-columns:minmax(268px, 300px);
  gap:clamp(14px,2vw,24px); overflow-x:auto; scroll-snap-type:x mandatory;
  padding-inline:var(--pad); padding-bottom:8px;
  scrollbar-width:none;
}
.klipy .tasma::-webkit-scrollbar{display:none}
.klip{margin:0; scroll-snap-align:start}
.klip video{
  width:100%; aspect-ratio:9/16; height:auto!important; object-fit:cover;
  background:var(--bg2) center/cover no-repeat; display:block;
}
.klip figcaption{margin-top:12px; color:var(--muted); font-size:13.5px}
/* na dużym ekranie taśma mieści się w siatce strony i nie ucieka poza kontener */
@media (min-width: 1100px){
  .klipy .tasma{
    grid-auto-flow:row; grid-template-columns:repeat(4,1fr); overflow:visible;
    max-width:var(--wrap); margin-inline:auto;
  }
}

/* podpowiedź przesuwania taśmy z klipami */
.tasma-wrap{position:relative}
.przesun{
  position:absolute; right:calc(var(--pad) - 4px); bottom:52px;
  display:none; align-items:center; gap:7px;
  padding:9px 13px 9px 15px; border-radius:999px;
  background:rgba(19,19,21,.78); border:1px solid var(--line);
  color:var(--gold); font:500 11px var(--sans); letter-spacing:.12em; text-transform:uppercase;
  backdrop-filter:blur(6px); pointer-events:none;
  transition:opacity .45s ease;
}
.przesun svg{width:12px;height:12px;flex:none}
/* pokazujemy tylko wtedy, gdy jest co przesuwać, i tylko do pierwszego ruchu */
.da-sie-przesunac .przesun{display:flex}
.przesuniete .przesun{opacity:0}
/* delikatne kołysanie: sygnalizuje kierunek, nie przyciąga na siłę */
@media (prefers-reduced-motion: no-preference){
  .da-sie-przesunac .przesun svg{animation:pchnij 2.4s ease-in-out infinite}
}
@keyframes pchnij{ 0%,72%,100%{transform:translateX(0)} 84%{transform:translateX(4px)} }
/* miękkie ścięcie prawej krawędzi - widać, że kadr jest ucięty celowo */
.da-sie-przesunac::after{
  content:""; position:absolute; top:0; right:0; bottom:34px; width:56px; pointer-events:none;
  background:linear-gradient(90deg, rgba(19,19,21,0), rgba(19,19,21,.92));
}

/* ---------- podstrona: usługi dla stolarzy ---------- */
.podstrona-hero{padding:calc(96px + clamp(40px,7vw,90px)) 0 clamp(36px,5vw,60px);border-bottom:1px solid var(--line)}
.podstrona-hero h1{font-family:var(--serif);font-weight:500;font-size:clamp(38px,4.6vw,62px);line-height:1.1}
.podstrona-hero .lead{margin-top:18px}
.uslugi .row{grid-template-columns:1.1fr 1.4fr}
.kroki{list-style:none;counter-reset:k;display:grid;gap:clamp(18px,3vw,30px);
  grid-template-columns:repeat(3,1fr)}
.kroki li{counter-increment:k;border-top:1px solid var(--line);padding-top:18px;
  display:flex;flex-direction:column;gap:7px}
.kroki li::before{content:counter(k,decimal-leading-zero);font-family:var(--serif);
  font-size:26px;color:var(--gold-2);line-height:1}
.kroki b{font-family:var(--serif);font-size:22px;font-weight:500}
.kroki span{color:var(--muted);font-size:14.5px}
@media (max-width: 860px){ .kroki{grid-template-columns:1fr} .uslugi .row{grid-template-columns:1fr} }
.wiecej{color:var(--gold);border-bottom:1px solid var(--line);padding-bottom:1px;white-space:nowrap}
.wiecej:hover{border-color:var(--gold)}
/* podstrona ma mniej treści niż strona główna - te same odstępy zostawiały puste pola */
.uslugi, .jak{padding-block:clamp(56px,7vw,92px)}
.jak{padding-top:0}

/* ---------- social ---------- */
/* Klient poprosił o linki do FB i IG. Ikony są w kolorze tekstu, nie w oryginalnych
   barwach platform - kolorowe logotypy rozbijają paletę grafit/złoto i wyglądają
   jak wklejka. Powiększony obszar klikalny, bo to link dotykany kciukiem. */
.social{display:flex;gap:10px;align-items:center}
.social a{display:grid;place-items:center;width:40px;height:40px;border:1px solid var(--line);
  color:var(--ink);opacity:.82;transition:color .25s,border-color .25s,opacity .25s}
.social a:hover{color:var(--gold);border-color:var(--gold);opacity:1}
.social svg{width:18px;height:18px;display:block;overflow:visible}
.kontakt .social{margin-top:30px}
footer .social a{width:34px;height:34px}
footer .social svg{width:16px;height:16px}
@media (max-width: 860px){ .kontakt .social{margin-top:22px} }

/* ---------- podstrona: realizacje ---------- */
/* Osobna strona z pełną galerią - na stronie głównej pokazujemy wybór,
   tutaj cały materiał podzielony na kategorie, po których klient realnie szuka. */
.naglowek-strony{padding-top:clamp(120px,16vh,190px);padding-bottom:clamp(20px,3vw,34px)}
.naglowek-strony h1{font-family:var(--serif);font-weight:500;font-size:clamp(40px,5.4vw,74px);line-height:1.06}
.naglowek-strony .lead{margin-top:20px;font-size:17px}
.kat-nav{margin-top:34px;font:500 12.5px var(--sans);letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.kat-nav a{color:var(--ink);opacity:.85;border-bottom:1px solid var(--line);padding-bottom:3px}
.kat-nav a:hover{color:var(--gold);border-color:var(--gold);opacity:1}

.galeria{padding-block:clamp(46px,6vw,86px)}
.galeria .sec-head{margin-bottom:clamp(26px,3.4vw,44px)}
.gsiatka{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(12px,1.6vw,22px)}
.gk{margin:0;overflow:hidden;background:var(--bg2);aspect-ratio:3/4}
.gk img{width:100%;height:100%!important;object-fit:cover;
  transition:transform 1s cubic-bezier(.16,1,.3,1)}
.gk:hover img{transform:scale(1.04)}
/* kafle wchodzą kaskadą, ale bez opóźnień dłuższych niż pół sekundy -
   przy 13 zdjęciach w sekcji czekanie na ostatnie byłoby męczące */
.js .gk:nth-child(3n+2){transition-delay:.06s}
.js .gk:nth-child(3n+3){transition-delay:.12s}

@media (max-width: 1100px){ .gsiatka{grid-template-columns:repeat(2,1fr)} }
@media (max-width: 700px){
  .gsiatka{grid-template-columns:1fr}
  .kat-nav{line-height:2.4}
  .js .gk{transition-delay:0s!important}
}
@media (prefers-reduced-motion: reduce){ .gk img{transition:none} }

/* Widoczny fokus na przewijanej taśmie - element jest teraz w kolejności tabulacji,
   więc użytkownik klawiatury musi widzieć, gdzie jest. */
.tasma:focus-visible{outline:2px solid var(--gold);outline-offset:3px}

/* ---------- podstrona tekstowa ---------- */
/* Kolumna tekstu węższa niż siatka zdjęć: długa linia w ciemnym motywie męczy oczy,
   a polityka prywatności to jedyne miejsce, gdzie ktoś naprawdę czyta akapitami. */
.tresc{padding-top:clamp(10px,2vw,24px)}
.proza{max-width:68ch}
.proza h2{font-size:clamp(24px,2.6vw,32px);margin-top:clamp(34px,4vw,52px);margin-bottom:12px}
.proza h2:first-child{margin-top:0}
.proza p{color:var(--muted);margin-bottom:16px}
.proza a{color:var(--gold);border-bottom:1px solid var(--line)}
.proza a:hover{border-color:var(--gold)}
.proza ul{color:var(--muted);margin:0 0 16px 20px}
.proza li{margin-bottom:7px}

/* ---------- pasek administracyjny WordPressa ---------- */
/* Nasza nawigacja jest position:fixed, więc nie wie o pasku admina i wchodzi pod niego.
   Zwykły odwiedzający tego nie zobaczy, ale właściciel po zalogowaniu owszem - i to
   pierwsze, co rzuca mu się w oczy na własnej stronie. */
body.admin-bar .nav{top:32px}
@media screen and (max-width:782px){
  body.admin-bar .nav{top:46px}
}

/* ---------- wielkość celów dotykowych ---------- */
/* Linki w nagłówku miały 15 px wysokości - to wysokość samego tekstu.
   WCAG 2.2 (2.5.8) wymaga minimum 24 px, a na telefonie numer w nagłówku jest
   jedynym wezwaniem do działania i trafia się w niego kciukiem. Powiększamy
   obszar klikalny paddingiem, nie zmieniając wyglądu. */
.nav a{display:inline-block;padding-block:6px}
.nav .tel{padding-inline:4px}
@media (max-width: 860px){
  .nav .tel, .nav .tel-m{padding:10px 6px;margin-right:-6px}
}

/* ---------- podstrona usług: kadry ---------- */
/* Strona usług miała 1800 px tekstu bez jednego zdjęcia - przy stolarzu to strata,
   bo cała rozmowa jest o tym, jak coś wygląda z bliska. */
.uslugi-kadry{padding-top:0}
.uslugi-kadry .kadry{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(14px,2vw,26px)}
.uslugi-kadry figure{margin:0}
.uslugi-kadry .ph{overflow:hidden;background:var(--bg2);aspect-ratio:1}
.uslugi-kadry img{width:100%;height:100%!important;object-fit:cover;
  transition:transform 1s cubic-bezier(.16,1,.3,1)}
.uslugi-kadry figure:hover img{transform:scale(1.04)}
.uslugi-kadry figcaption{margin-top:13px;font-family:var(--serif);font-size:20px}
@media (max-width: 700px){ .uslugi-kadry .kadry{grid-template-columns:1fr} }
@media (prefers-reduced-motion: reduce){ .uslugi-kadry img{transition:none} }