/* ============ FONTY: lokalnie (woff2, latin + latin-ext), bez Google Fonts → bez banera ============
   Hanken Grotesk (zmienny: normal 100–500, kursywa 200–300) i IBM Plex Mono 400/500, licencja SIL OFL 1.1.
   Ścieżki względem assets/app.css. Źródło @font-face: fonts/_font-face.css (sklejane tu 1:1). */
@font-face{font-family:'Hanken Grotesk';font-style:italic;font-weight:200 300;font-display:swap;src:url('../fonts/hanken-grotesk-latin-ext-italic.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Hanken Grotesk';font-style:italic;font-weight:200 300;font-display:swap;src:url('../fonts/hanken-grotesk-latin-italic.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Hanken Grotesk';font-style:normal;font-weight:100 500;font-display:swap;src:url('../fonts/hanken-grotesk-latin-ext-normal.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Hanken Grotesk';font-style:normal;font-weight:100 500;font-display:swap;src:url('../fonts/hanken-grotesk-latin-normal.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:400;font-display:swap;src:url('../fonts/ibm-plex-mono-latin-ext-400.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:400;font-display:swap;src:url('../fonts/ibm-plex-mono-latin-400.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:500;font-display:swap;src:url('../fonts/ibm-plex-mono-latin-ext-500.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:500;font-display:swap;src:url('../fonts/ibm-plex-mono-latin-500.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}

/* „1” do dużych cyfr: Hanken 200 z prostą flagą zamiast poziomego daszka (design/_kierunki/fonts/jedynka.py, K. 30.09) */
@font-face{font-family:'Kanski Jedynka';font-style:normal;font-weight:200;font-display:swap;src:url('../fonts/kanski-jedynka-200.woff2') format('woff2');unicode-range:U+0031}

/* ══════════════════════════════════════════════════════════════════════════════
   KAŃSKI BUDOWNICTWO — baza: tokeny, typografia, nawigacja, arkusz, tabelka,
   odnośnik, linia wymiarowa, przycisk, pola formularza, ruch wspólny.
   Źródło prawdy o wyglądzie: DESIGN.md. Przeniesione z makiety kierunek-final-pas.html
   (sprawdzonej zrzutami) prawie 1:1; zmiany opisane w NOTATKI-BUDOWY.md („STAN PO C1”).
   Rdzeń (assets/rdzen.css) jest wpięty PRZED tym plikiem: mechanika, zero wyglądu.
   ⛔ Klasy rdzenia: .postep .rv .kaskada .top .hero-media [data-paralaksa] .lb (nie używać).
   ══════════════════════════════════════════════════════════════════════════════ */

/* ============ TOKENY ============ */
:root {
  --tlo: #F6F3EF;          /* złamana biel, ciepła */
  --blok: #E6E2DB;         /* przesunięty szary blok (C) */
  --arkusz: #FBFAF8;       /* papier arkusza (A), jaśniejszy od tła */
  --tusz: #1F2328;         /* grafit: tekst, rama arkusza */
  --tusz-2: #4A4F56;       /* tekst wtórny, etykiety tabelki */
  --linia: #C9C3BA;        /* włosowa linia na tle */
  --kreska: #D6D1C9;       /* linie wewnątrz tabelki */
  --akcent: #0C6BB4;       /* niebieski z logo: kreska, wymiar, odnośnik, przycisk */
  --akcent-mocny: #0A5A99;
  --kroj: 'Hanken Grotesk', sans-serif;
  --mono: 'IBM Plex Mono', ui-monospace, monospace;   /* TYLKO odnośniki, tabelki, linie wymiarowe */
  --pole: clamp(20px, 3.4vw, 48px);       /* krawędź: logo, menu */
  --wciecie: clamp(20px, 8.4vw, 120px);   /* lewa oś tekstu */
  --ciecie: clamp(22px, 4vw, 58px);       /* ile arkusza ucina prawa krawędź */
  --lewy: 52px;                           /* margines arkusza na linię wymiarową */
  --sekcja: clamp(4rem, 8vw, 8rem);
  --przycisk-h: 56px;
  --f2: clamp(3rem, 7vw, 6.6rem);         /* H2 sekcji */
  --ease: cubic-bezier(.2, .7, .2, 1);
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--tlo); color: var(--tusz);
  font-family: var(--kroj); font-weight: 400; font-size: 1rem; line-height: 1.6;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
img { display: block; max-width: 100%; }
/* 07.10: <picture> z WebP (build.py owija każde zdjęcie JPG, zdjecia_webp.py) bez własnego pudełka: obraz układa się
   jak dziecko rodzica, tak jak przed zmianą (mapa ma własne `.mapa-g__btn picture`, mocniejsze) */
picture { display: contents; }
a { color: inherit; }
button { font: inherit; color: inherit; }
/* rdzeń daje obrys 2,5 px w kolorze tekstu z zaokrągleniem 2 px; tu: akcent i 0 px (DESIGN.md: 0 px wszędzie) */
:focus-visible { outline: 2px solid var(--akcent); outline-offset: 3px; border-radius: 0; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { background: var(--tusz); color: var(--tlo); font-size: 15px; text-decoration: none; }
dl { margin: 0; }

/* H2 sekcji: duży, cienki, przy lewej osi (jak „Realizacje”) */
.h2 { margin: 0; font-weight: 200; font-size: var(--f2); line-height: 1; letter-spacing: -.04em; padding-bottom: .12em; }
/* link tekstowy ze strzałką (np. „Wszystkie realizacje →”): podkreślenie w akcencie, nigdy tekst w akcencie */
.pas__wiecej { flex: none; margin-bottom: 6px; display: inline-flex; align-items: center; gap: 14px; font-size: 15px; text-decoration: none; border-bottom: 1px solid var(--akcent); padding-bottom: 3px; }
.pas__wiecej svg { width: 18px; height: 18px; flex: none; }
.pas__wiecej:hover { border-bottom-width: 2px; }

/* ============ NAWIGACJA (C) ============
   Mechanika menu = rdzeń (blok 1): przycisk .burger przełącza .nav.is-open i aria-expanded,
   Esc i klik w link zamykają. Tu tylko wygląd. */
.nav {
  position: relative; z-index: 20; display: flex; align-items: center;
  gap: clamp(16px, 2.6vw, 40px); height: 88px; padding: 0 var(--pole);
}
.nav__logo { display: block; flex: none; }
.nav__logo img { height: 42px; width: auto; }
.nav__logo-ciemne { display: none; }
.nav__menu { margin-left: auto; display: flex; align-items: center; }
.nav__linki { display: flex; align-items: center; gap: clamp(20px, 2.2vw, 34px); list-style: none; margin: 0; padding: 0; }
.nav__linki a { display: block; font-size: 15px; text-decoration: none; padding: 6px 0; border-bottom: 1px solid transparent; transition: border-color .3s var(--ease); }
.nav__linki a:hover, .nav__linki a[aria-current="page"] { border-bottom-color: var(--akcent); }
.nav__kontakt { display: none; }
.nav__wycena { display: none; }   /* przycisk do wyceny w menu tylko na telefonie (blok „MENU NA TELEFONIE” niżej) */
.nav__tel { font-size: 15px; font-weight: 500; text-decoration: none; padding: 6px 0; border-bottom: 1px solid var(--akcent); white-space: nowrap; font-variant-numeric: tabular-nums; }
.nav__przycisk { display: none; }

/* ============ ARKUSZ (wspólny: hero, realizacje, kosztorys, zasięg, kontakt) ============ */
.rama { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; z-index: 4; }
.rama rect { width: 100%; height: 100%; fill: none; stroke: var(--tusz); stroke-width: 1; vector-effect: non-scaling-stroke; }
.arkusz__pole { position: relative; }

/* okno = kadr zdjęcia. Zdjęcie (.skala) zawsze pokrywa okno jak object-fit: cover,
   a --fx/--fy to punkt kadrowania (0–1, jak object-position). Odnośniki leżą w układzie
   współrzędnych zdjęcia, więc trafiają w ten sam element przy każdej szerokości. */
.okno { position: relative; overflow: hidden; container-type: size; background: #E3DFD8; }
.skala {
  --px: var(--fx, .5); --py: var(--fy, .5);
  --W: max(100cqw, 100cqh * var(--ar));
  position: absolute; width: var(--W); aspect-ratio: var(--ar);
  left: calc((100cqw - var(--W)) * var(--px));
  top: calc((100cqh - var(--W) / var(--ar)) * var(--py));
  transform-origin: 50% 50%;
}
.skala > img, .skala > picture > img { width: 100%; height: 100%; object-fit: cover; }
.odnosniki { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.odnosniki .halo { fill: none; stroke: rgba(251,250,248,.85); stroke-width: 4; vector-effect: non-scaling-stroke; stroke-linecap: round; stroke-linejoin: round; }
.odnosniki .lin { fill: none; stroke: var(--akcent); stroke-width: 1.25; vector-effect: non-scaling-stroke; stroke-linejoin: round; }
.odnosniki circle { fill: var(--akcent); stroke: var(--arkusz); stroke-width: 1.5; vector-effect: non-scaling-stroke; }
.odnosnik {
  position: absolute; font: 500 12.5px/1 var(--mono); letter-spacing: -.01em; color: var(--tusz);
  background: var(--arkusz); border: 1px solid var(--akcent); padding: 7px 12px 8px; white-space: nowrap;
  transform: translate(0, -50%);
}
.odnosnik--lewy { transform: translate(-100%, -50%); }

/* linia wymiarowa pionowa: miejscowość wzdłuż lewej krawędzi zdjęcia */
.wymiar { position: absolute; color: var(--akcent); pointer-events: none; }
.wymiar svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.wymiar line { stroke: var(--akcent); stroke-width: 1; vector-effect: non-scaling-stroke; }
.wymiar .pom { stroke-width: .75; opacity: .75; }
.wymiar__opis { position: absolute; font: 500 12px/1 var(--mono); color: var(--akcent); white-space: nowrap; background: var(--arkusz); }
.wymiar--pion { top: 0; bottom: 0; left: -38px; width: 28px; }
.wymiar--pion .wymiar__opis { top: 50%; left: 15px; writing-mode: vertical-rl; transform: translate(-50%, -50%) rotate(180deg); padding: 8px 0; }

/* tabelka rysunkowa: pasek przez całą szerokość arkusza, komórki kończą się przed cięciem */
.tabelka {
  margin: 16px 0 0 calc(-1 * var(--lewy)); padding-right: var(--ciecie);
  border-top: 1px solid var(--tusz); display: flex; position: relative; z-index: 3; background: var(--arkusz);
}
.tabelka > div { flex: 1 1 auto; min-width: 0; padding: 10px 16px 12px; border-left: 1px solid var(--kreska); }
.tabelka > div:first-child { border-left: 0; padding-left: 18px; }
.tabelka > div:last-child { flex: 0 0 auto; padding-right: 24px; }
.tabelka dt { font: 400 11.5px/1.2 var(--mono); color: var(--tusz-2); letter-spacing: -.01em; }
.tabelka dd { margin: 4px 0 0; font: 400 15.5px/1.3 var(--kroj); color: var(--tusz); white-space: nowrap; }
.tabelka .nr dd { font: 500 15px/1.3 var(--mono); letter-spacing: .02em; }

/* ============ ZDJĘCIE BEZ RAMY (K. 01.10, uwaga 10: „tam, gdzie nie dodaje wartości, wywal obramówkę”) ============
   Rama + papier + tabelka zostają tylko tam, gdzie niosą informację albo są znakiem rozpoznawczym (DESIGN.md „Arkusz: gdzie rama
   zostaje”). Zdjęcie „do oglądania” stoi samo: bez ramy, papieru i tabelki, dosunięte do prawej krawędzi ekranu (jak u Paro).
   Proporcja z width/height pliku albo --foto-ar (wtedy kadruje object-fit z punktem --foto-x/--foto-y).
   Kadr odsłania się maską jak zdjęcia dziennika (data-ruch="maska" na .foto__kadr), podpis tylko się rozjaśnia. */
.foto { margin: 0; min-width: 0; }
.foto__kadr { overflow: hidden; background: #E3DFD8; }
.foto__kadr img { width: 100%; height: auto; aspect-ratio: var(--foto-ar, auto); object-fit: cover; object-position: var(--foto-x, 50%) var(--foto-y, 50%); }
.foto__podpis { margin: 12px 0 0; font-size: 14px; line-height: 1.45; color: var(--tusz-2); }

/* ============ PRZYCISK (jeden główny) ============ */
.przycisk {
  display: inline-flex; align-items: center; gap: 22px; height: var(--przycisk-h);
  padding: 0 24px 0 28px; background: var(--akcent); color: #fff; text-decoration: none; border: 0; border-radius: 0; cursor: pointer;
  font-size: 16px; font-weight: 500; letter-spacing: .005em; transition: background-color .3s var(--ease);
}
.przycisk:hover { background: var(--akcent-mocny); }
.przycisk svg { width: 20px; height: 20px; flex: none; }

/* ============ POLA FORMULARZA (K. 01.10: „dużo cienkich pasków, nie widać, gdzie wpisać”) ============
   Wyraźne pole: papier arkusza na tle strony, ramka 1 px (linia), 0 zaokrągleń, ok. 50 px wysokości, etykieta nad polem.
   Fokus = obwódka 2 px w akcencie (5,3:1 na papierze, 5,0:1 na tle). Komunikat błędu: .form-error niżej. */
.pole { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; align-content: start; }   /* minmax: długa nazwa pliku nie rozpycha pola */
.pole label { font-size: 15px; line-height: 1.3; color: var(--tusz-2); }
.pole input:not([type="file"]), .pole textarea {
  width: 100%; margin: 0; padding: 12px 14px; border: 1px solid var(--linia); border-radius: 0;
  background: var(--arkusz); color: var(--tusz); font: 400 17px/1.4 var(--kroj); box-shadow: none;
  transition: border-color .3s var(--ease); -webkit-appearance: none; appearance: none;
}
.pole textarea { display: block; min-height: 7.5em; resize: vertical; }
.pole input:not([type="file"]):hover, .pole textarea:hover { border-color: var(--tusz-2); }
.pole input:not([type="file"]):focus, .pole textarea:focus { outline: 2px solid var(--akcent); outline-offset: -1px; border-color: var(--akcent); }
/* plik: natywny input leży przezroczysty na własnej strefie (klik, klawiatura i upuszczenie pliku działają jak w przeglądarce),
   strefa pokazuje „Wybierz plik” i nazwę wybranego pliku (js/app.js). Bez JS zostaje natywne pole z przyciskiem w tym samym stylu. */
.plik { position: relative; }
.pole input[type="file"] { width: 100%; margin: 0; font: 400 15px/1.4 var(--kroj); color: var(--tusz-2); cursor: pointer; }
.pole input[type="file"]::file-selector-button {
  margin-right: 16px; padding: 10px 16px; border: 1px solid var(--tusz); border-radius: 0; background: transparent;
  color: var(--tusz); font: 500 15px/1 var(--kroj); cursor: pointer;
}
.plik__strefa { display: none; }
.js .plik input[type="file"] { position: absolute; inset: 0; z-index: 2; height: 100%; opacity: 0; }
.js .plik__strefa {
  display: flex; align-items: center; gap: 16px; min-height: 64px; padding: 10px 16px 10px 11px;
  border: 1px dashed var(--tusz-2); background: var(--arkusz); transition: border-color .3s var(--ease);
}
.plik__przycisk { flex: none; padding: 10px 16px; border: 1px solid var(--tusz); font: 500 15px/1 var(--kroj); color: var(--tusz); transition: border-color .3s var(--ease); }
.plik__nazwa { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 15px; color: var(--tusz-2); }
.plik__strefa.ma-plik .plik__nazwa { color: var(--tusz); font-weight: 500; }
.plik input:hover + .plik__strefa, .plik__strefa.nad { border-color: var(--akcent); }
.plik input:hover + .plik__strefa .plik__przycisk, .plik__strefa.nad .plik__przycisk { border-color: var(--akcent); }
.plik input:focus-visible + .plik__strefa { outline: 2px solid var(--akcent); outline-offset: -1px; border-color: var(--akcent); }
.pole__opis { margin: 0; font-size: 13px; color: var(--tusz-2); }
.form-error { margin: 0; font-size: 15px; font-weight: 500; color: var(--tusz); }
.form-error:empty { display: none; }   /* stoi nad polami w siatce z gap — pusty nie może dokładać odstępu */
.form-error:not(:empty) { padding-left: 12px; border-left: 2px solid var(--akcent); }

/* ============ RUCH (wspólny) ============ */
/* C: szary blok → maska zdjęcia → wiersze nagłówka; reszta tylko się rozjaśnia */
[data-ruch="blok"] { transition: transform 1000ms var(--ease) var(--d, 0ms); transform-origin: left center; }
[data-ruch="pojaw"] { transition: opacity 900ms var(--ease) var(--d, 0ms); }
[data-ruch="linie"] .linia { display: block; overflow: hidden; padding: .1em 0 .14em; margin: -.1em 0 -.14em; }
[data-ruch="linie"] .linia > span { display: block; transition: transform 950ms var(--ease) calc(var(--d, 0ms) + var(--i) * 110ms); }
html.js:not(.bez-ruchu) [data-ruch="blok"]:not(.jest) { transform: scaleX(0); }
html.js:not(.bez-ruchu) [data-ruch="pojaw"]:not(.jest) { opacity: 0; }
html.js:not(.bez-ruchu) [data-ruch="linie"]:not(.jest) .linia > span { transform: translateY(108%); }
[data-ruch="maska"] { transition: clip-path 1100ms var(--ease) var(--d, 0ms); }
[data-ruch="maska"] img { transition: transform 1700ms var(--ease) var(--d, 0ms); }
html.js:not(.bez-ruchu) [data-ruch="maska"] { clip-path: inset(0 0 0 0); }
html.js:not(.bez-ruchu) [data-ruch="maska"]:not(.jest) { clip-path: inset(100% 0 0 0); }
html.js:not(.bez-ruchu) [data-ruch="maska"]:not(.jest) img { transform: scale(1.1); }

/* A: kreślenie arkusza. .ark = element sterujący (arkusz w hero, karty pasa, plansze sekcji) */
/* stan końcowy maski MUSI być jawny (inset 0), bo z inset() do none przeglądarka nie animuje */
html.js:not(.bez-ruchu) .ark .okno,
html.js:not(.bez-ruchu) .ark .wymiar__opis,
html.js:not(.bez-ruchu) .ark .odnosnik,
html.js:not(.bez-ruchu) .ark .tabelka > div > * { clip-path: inset(0 0 0 0); }
.ark { --d-rama: 150ms; --t-okno: 1100ms; --d-okno: 320ms; --d-wym: 950ms; --d-wym-opis: 1350ms; --d-odn: 1300ms; --d-odn-opis: 1650ms; --d-tab: 1050ms; --t-krok: 90ms; }
html.js:not(.bez-ruchu) .ark .rama rect { stroke-dasharray: 1; transition: stroke-dashoffset 1200ms var(--ease) var(--d-rama); }
html.js:not(.bez-ruchu) .ark:not(.jest) .rama rect { stroke-dashoffset: 1; }
html.js:not(.bez-ruchu) .ark .okno { transition: clip-path var(--t-okno) var(--ease) var(--d-okno); }
html.js:not(.bez-ruchu) .ark:not(.jest) .okno { clip-path: inset(0 100% 0 0); }
html.js:not(.bez-ruchu) .ark .wymiar line { stroke-dasharray: 1; transition: stroke-dashoffset 800ms var(--ease) var(--d-wym); }
html.js:not(.bez-ruchu) .ark:not(.jest) .wymiar line { stroke-dashoffset: 1; }
html.js:not(.bez-ruchu) .ark .wymiar__opis,
html.js:not(.bez-ruchu) .ark .odnosnik { transition: opacity 500ms var(--ease), clip-path 650ms var(--ease); }
html.js:not(.bez-ruchu) .ark .wymiar__opis { transition-delay: var(--d-wym-opis); }
html.js:not(.bez-ruchu) .ark .odnosnik { transition-delay: var(--d-odn-opis); }
html.js:not(.bez-ruchu) .ark:not(.jest) .wymiar__opis,
html.js:not(.bez-ruchu) .ark:not(.jest) .odnosnik { opacity: 0; clip-path: inset(0 100% 0 0); }
html.js:not(.bez-ruchu) .ark .odnosniki .lin,
html.js:not(.bez-ruchu) .ark .odnosniki .halo { stroke-dasharray: 1; transition: stroke-dashoffset 700ms var(--ease) var(--d-odn); }
html.js:not(.bez-ruchu) .ark:not(.jest) .odnosniki .lin,
html.js:not(.bez-ruchu) .ark:not(.jest) .odnosniki .halo { stroke-dashoffset: 1; }
html.js:not(.bez-ruchu) .ark .odnosniki circle { transition: opacity 300ms var(--d-odn); }
html.js:not(.bez-ruchu) .ark:not(.jest) .odnosniki circle { opacity: 0; }
html.js:not(.bez-ruchu) .ark .tabelka > div > * { transition: opacity 500ms var(--ease), clip-path 650ms var(--ease); transition-delay: calc(var(--d-tab) + var(--i, 0) * var(--t-krok)); }
html.js:not(.bez-ruchu) .ark:not(.jest) .tabelka > div > * { opacity: 0; clip-path: inset(0 100% 0 0); }
.bez-przejsc, .bez-przejsc * { transition: none !important; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}

/* ============ MENU ≤ 1100 px: pełny ekran jak Espiro (grafit, duże cienkie linki po lewej, kontakt na dole) ============
   Zwinięte tylko pod .js (klasa ustawiana w <head>): bez skryptu linki zostają widoczne pod paskiem. */
@media (max-width: 1100px) {
  .nav__logo, .nav__przycisk { position: relative; z-index: 2; }
  .nav__tel { margin-left: auto; }
  .js .nav__przycisk {
    display: inline-flex; align-items: center; gap: 10px; margin-left: 28px; height: 44px; padding: 0 2px 0 12px;
    background: none; border: 0; font: 500 15px/1 var(--kroj); color: var(--tusz); cursor: pointer; transition: color .35s var(--ease);
  }
  .kreski { display: grid; gap: 6px; width: 22px; }
  .kreski i { display: block; height: 1px; background: currentColor; transition: transform .3s var(--ease); }
  .nav__przycisk[aria-expanded="true"] .kreski i:first-child { transform: translateY(3.5px) rotate(45deg); }
  .nav__przycisk[aria-expanded="true"] .kreski i:last-child { transform: translateY(-3.5px) rotate(-45deg); }
  .js .nav__menu {
    position: fixed; inset: 0; z-index: 1; margin: 0; overflow-y: auto;
    flex-direction: column; align-items: flex-start; justify-content: flex-start;
    padding: 132px var(--wciecie) 40px; background: var(--tusz); color: var(--tlo);
    visibility: hidden; opacity: 0; transition: opacity .4s var(--ease), visibility 0s linear .4s;
  }
  .js .nav.is-open .nav__menu { visibility: visible; opacity: 1; transition: opacity .4s var(--ease); }
  .js .nav__linki { flex-direction: column; align-items: flex-start; gap: 0; }
  .js .nav__linki li { overflow: hidden; }
  .js .nav__linki a {
    position: relative;
    font-size: clamp(34px, 5.6vw, 56px); font-weight: 200; line-height: 1.12; letter-spacing: -.028em; padding: 4px 0 8px; border: 0;
    transform: translateY(105%); transition: transform .75s var(--ease);
  }
  /* opóźnienie kaskady tylko przy otwieraniu: stałe transition-delay na linku bramka czyta jako spóźnione najechanie */
  .js .nav.is-open .nav__linki a { transform: none; transition-delay: calc(80ms + var(--i) * 60ms); }
  .js .nav__linki a:hover { text-decoration: underline 1px; text-underline-offset: .16em; }
  /* bieżąca podstrona: krótka kreska przed linkiem */
  .js .nav__linki a[aria-current="page"] { padding-left: 34px; }
  .js .nav__linki a[aria-current="page"]::before { content: ""; position: absolute; left: 0; top: 50%; width: 22px; height: 1px; background: var(--tlo); }
  .js .nav__menu :focus-visible { outline-color: var(--tlo); }
  .js .nav__kontakt { display: grid; justify-items: start; gap: 12px; margin-top: auto; padding-top: 48px; font-size: 16px; }
  .nav__kontakt a { text-decoration: none; border-bottom: 1px solid rgba(246, 243, 239, .45); padding-bottom: 2px; }
  .nav__kontakt a:hover { border-bottom-color: var(--tlo); }
  .nav__kontakt .nav__kontakt-tel { font-size: 24px; font-weight: 300; letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
  .nav__kontakt p { margin: 4px 0 0; font-size: 14px; color: #B9B4AC; }
  .nav.is-open .nav__przycisk { color: var(--tlo); }
  .nav.is-open .nav__logo-jasne { display: none; }
  .nav.is-open .nav__logo-ciemne { display: block; }
  html:has(.nav.is-open) { overflow: hidden; }
  .bez-ruchu .nav__linki a { transform: none; }
  /* bez JS: linki w rzędzie pod paskiem, zawsze widoczne */
  html:not(.js) .nav { flex-wrap: wrap; height: auto; padding-top: 22px; padding-bottom: 14px; row-gap: 10px; }
  html:not(.js) .nav__menu { order: 3; flex-basis: 100%; margin: 0; }
  html:not(.js) .nav__linki { flex-wrap: wrap; gap: 4px 22px; }
}

/* ============ MENU NA TELEFONIE (≤ 820 px; audyt 07.10, pkt 19) ============
   Było: kontakt dosunięty do dołu ekranu (margin-top: auto), między nim a linkami ok. 280 px pustego grafitu i brak wezwania.
   Teraz jeden blok od góry: linki → „Wyślij projekt do wyceny” (przycisk strony: akcent, 54 px, cała szerokość) → kontakt.
   Przycisk wchodzi we własnej masce od dołu jako szósta pozycja kaskady linków (--i = 5 w build.py).
   Tablet (821-1100 px) bez zmian: tam kontakt dalej stoi na dole, a przycisku nie ma. */
@media (max-width: 820px) {
  /* odstępy tylko marginesami (blok tabletu dokłada gap 20 px); flex: none, bo maska (overflow) pozwoliłaby zgnieść przycisk
     do zera, gdy menu nie mieści się w oknie (wtedy menu ma się przewinąć). Całość mieści się w 360 × 640 i 375 × 667. */
  .js .nav__menu { row-gap: 0; }
  .js .nav__wycena { display: block; flex: none; align-self: stretch; margin-top: 24px; overflow: hidden; }
  .js .nav__wycena .przycisk { transform: translateY(105%); transition: transform .75s var(--ease), background-color .3s var(--ease); }
  .js .nav.is-open .nav__wycena .przycisk { transform: none; transition-delay: calc(80ms + var(--i) * 60ms), 0s; }
  .bez-ruchu .nav__wycena .przycisk { transform: none; }
  /* obwódka fokusu do środka (biała, jak w pasku kontaktu), bo maska (overflow) ucięłaby ją na zewnątrz */
  .js .nav__wycena .przycisk:focus-visible { outline: 2px solid #fff; outline-offset: -6px; }
  .nav__wycena svg { pointer-events: none; }   /* rdzeń zamyka menu po kliknięciu w <a>; strzałka nie może przejąć celu kliknięcia */
  .js .nav__kontakt { flex: none; margin-top: 28px; padding-top: 0; gap: 8px; }
  .nav__kontakt .nav__kontakt-tel { line-height: 1.3; }
  .nav__kontakt p { margin-top: 2px; }
}

/* ============ TABLET ============ */
@media (max-width: 1080px) {
  .nav__menu { gap: 20px; }
  .tabelka > div { padding: 9px 11px 10px; }
  .tabelka dd { font-size: 14.5px; }
}

/* ============ TELEFON ============ */
@media (max-width: 820px) {
  :root { --przycisk-h: 54px; --lewy: 32px; --f2: 3.3rem; }
  .nav { height: 72px; }
  .nav__logo img { height: 40px; }
  .nav__tel { display: none; }
  .js .nav__przycisk { margin-left: auto; }
  .js .nav__menu { padding: 104px var(--pole) 32px; }
  .js .nav__linki a { font-size: clamp(32px, 9.6vw, 42px); }

  .wymiar--pion { left: -26px; width: 20px; }
  .wymiar--pion .wymiar__opis { left: 11px; font-size: 11px; }
  .odnosnik { font-size: 11px; line-height: 1.25; padding: 7px 12px; white-space: normal; max-width: calc(11.5ch + 26px); }
  .tabelka { margin-top: 10px; }
  .tabelka > div { padding: 7px 10px 8px; }
  .tabelka > div:first-child { padding-left: 12px; }
  /* 07.10 (pkt 7): 12 / 15 px (było 10,5 / 13,5: na telefonie za drobne, etykieta mono ledwo czytelna) */
  .tabelka dt { font-size: 12px; }
  .tabelka dd { font-size: 15px; margin-top: 2px; }
  .tabelka .nr dd { font-size: 15px; }
  /* przy większym kroju komórka tabelki w rzędzie (flex, np. karta na dziekujemy.html) nie może być węższa od swojego
     najdłuższego słowa: z min-width: 0 etykieta „Miejscowość” wchodziła pod sąsiednią komórkę i była ucinana */
  .tabelka > div { min-width: auto; }
  .tabelka > div:last-child { flex-shrink: 1; }   /* ostatnia też się łamie (360 px: „stan surowy z dachem” wychodził za ramę) */
  /* 07.10 (pkt 6): komórka bez pary w tabelce dwukolumnowej bierze cały wiersz: bez lewej kreski (obok niej jest rama albo nic),
     górna kreska przez całą szerokość. Klasa w znacznikach zamiast reguł nth-child, które łamały kreski (Sprzęt na O firmie,
     Telefon w polityce). !important, bo przebija reguły nth-child podstron o wyższej szczegółowości (css/43, css/46). */
  .tabelka > .t-cala-m { grid-column: 1 / -1 !important; border-left: 0 !important; }
}

/* ══════════════════════════════════════════════════════════════════════════════
   INTRO Z LOGO (K. 01.10, tylko strona główna, raz na sesję). DESIGN.md → „Ruch” → „Intro z logo”.
   Decyzja w <head> (build.py INTRO_GLOWA): klasy z-intro + z-intro-a na <html> (z-intro-a: logo w pasku czeka na lądowanie).
   Przebieg (build.py INTRO_HTML): odsłonięcie maską → logo leci na logo w pasku, papier gaśnie (wariant A „przechodzi”,
   K. 01.10; wariant B „otwiera” usunięty). Hero rusza po intrze (js/app.js, poIntrze).
   ⛔ filter i drop-shadow na logo (bramka poswiata_na_znaku_wejscia), fade + skala logo (wzór taniej roboty).
   ══════════════════════════════════════════════════════════════════════════════ */
.intro { display: none; }
html.z-intro:not(.bez-ruchu) .intro {
  position: fixed; inset: 0; z-index: 100; display: flex; align-items: center; justify-content: center;
  /* bezpiecznik: skrypt intra padł albo się zaciął → warstwa schodzi sama po 3 s (strona nigdy nie zostaje zasłonięta) */
  animation: intro-bezpiecznik .3s linear 3s forwards;
}
/* papier na osobnej warstwie, żeby gasł sam, bez logo */
.intro::before { content: ""; position: absolute; inset: 0; background: var(--tlo); }
.intro__logo {
  position: relative; width: clamp(240px, 46vw, 560px); height: auto; max-width: none;
  clip-path: inset(0 100% 0 0); transform-origin: 0 0;
}
/* 1) odsłonięcie maską od lewej (stan końcowy jawny: z inset() do none przeglądarka nie animuje) */
.intro.gra .intro__logo { clip-path: inset(0 0 0 0); transition: clip-path 650ms var(--ease); }
/* 2) przelot na logo w pasku: transform wpisuje skrypt (translate + scale < 1), papier gaśnie w tym samym czasie */
.intro.leci .intro__logo { transition: transform 700ms cubic-bezier(.65, 0, .35, 1); }
.intro.leci::before { opacity: 0; transition: opacity 700ms cubic-bezier(.4, 0, .2, 1); }
/* pominięcie (klik, dotyk, klawisz, kółko, przewinięcie): szybkie wygaszenie, kliki już przechodzą do strony */
.intro.pomin { opacity: 0; pointer-events: none; transition: opacity 200ms linear; }
/* logo w pasku czeka na lądowanie (bez skoku); ten sam bezpiecznik 3 s przywraca je, gdyby skrypt padł */
html.z-intro-a:not(.bez-ruchu) .nav__logo-jasne { opacity: 0; animation: intro-logo-wraca 0s linear 3s forwards; }
@keyframes intro-bezpiecznik { to { opacity: 0; visibility: hidden; } }
@keyframes intro-logo-wraca { to { opacity: 1; } }
@media print { .intro { display: none !important; } }

/* ══════════════════════════════════════════════════════════════════════════════
   STRONA GŁÓWNA: hero + ocena · marki · pas realizacji z finałem · dziennik ·
   cena · kto buduje · zasięg · wycena i kontakt.
   Sekcje 1–4 przeniesione z makiety kierunek-final-pas.html prawie 1:1 (kolejność reguł
   zachowana, bo makieta jest sprawdzona zrzutami). Sekcje 5–8 wg DESIGN.md i handoveru C1.
   ══════════════════════════════════════════════════════════════════════════════ */

/* ============ HERO (C) + arkusz (A) ============ */
.hero {
  position: relative; overflow: hidden;       /* ucina arkusz prawą krawędzią, nie body */
  display: grid;
  --h1-pt: clamp(44px, 5.5vw, 76px);
  --kto: clamp(16px, 1.3vw, 19px);
  --kto-mb: clamp(14px, 1.8vw, 26px);
  --f: clamp(2.55rem, 5.85vw, 5.5rem);
  grid-template-columns: var(--wciecie) minmax(0, 1fr) clamp(300px, 41vw, 640px);
  grid-template-rows: auto auto 1fr auto;
  grid-template-areas:
    ".  h1     ark"
    ".  plyta  ark"
    ".  cta    ark"
    ".  ocena  ocena";
  padding-bottom: clamp(3rem, 6vw, 6rem);
}
/* rdzeń daje `.hero h1` cień pod napis na zdjęciu; tu H1 stoi na jasnym tle */
.hero .hero__h1 { text-shadow: none; }
.hero__h1 { grid-area: h1; position: relative; z-index: 2; margin: 0; padding: var(--h1-pt) 48px 0 0; font-weight: 200; }
.h1__kto { display: flex; align-items: center; gap: 16px; font-size: var(--kto); font-weight: 400; letter-spacing: 0; line-height: 1.3; margin-bottom: var(--kto-mb); }
.h1__kto::before { content: ""; flex: none; width: 40px; height: 1px; background: var(--akcent); }
.h1__zdanie { display: block; font-weight: 200; font-size: var(--f); line-height: 1.04; letter-spacing: -.032em; }
.h1__zdanie .linia { display: block; }
/* 08.10: hasło Błażeja w całości w H1 (3 wiersze), więc mniejszy stopień niż dawne 2-wierszowe hasło */
.h1__zdanie--dlugie { font-size: calc(var(--f) * .7); line-height: 1.08; font-weight: 400; letter-spacing: -.025em; }

.hero__blok {
  grid-column: 1 / 3; grid-row: 1 / 4; z-index: 0; background: var(--blok);
  /* górna krawędź = linia bazowa 1. wiersza H1 (0,87 em przy interlinii 1,04), jak u Paro */
  margin-top: calc(var(--h1-pt) + var(--kto) * 1.3 + var(--kto-mb) + var(--f) * .87);
  margin-right: calc(-1 * clamp(40px, 7vw, 110px));   /* wchodzi pod arkusz */
  margin-bottom: calc(var(--przycisk-h) / 2);          /* krawędź na wysokości środka przycisku */
}
.hero__plyta { grid-area: plyta; position: relative; z-index: 2; padding: clamp(28px, 3vw, 44px) 56px 0 0; }
.lead { font-size: clamp(17px, 1.36vw, 19.5px); line-height: 1.58; margin: 0 0 26px; max-width: 33em; }
.fakty { font-size: 14px; line-height: 1.7; color: var(--tusz-2); margin: 0; }
.fakty > span:not(.fakty__sep) { display: block; }
.fakty__sep { display: none; }
.fakty--tel { display: none; }   /* wersja faktów na telefon (07.10, pkt 12): komputer pokazuje .fakty--kom bez zmian */
.hero__cta { grid-area: cta; align-self: end; position: relative; z-index: 2; padding-top: 30px; }
.kontakt { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 26px; font-size: 15px; margin: 0 0 26px; }
.kontakt a { text-decoration: none; border-bottom: 1px solid var(--akcent); padding-bottom: 2px; font-variant-numeric: tabular-nums; }
.kontakt a:hover { border-bottom-width: 2px; }
.kontakt__etykieta { color: var(--tusz-2); margin-right: 8px; }

/* arkusz w hero: tam, gdzie w C było zdjęcie; ucięty prawą krawędzią ekranu */
.hero__arkusz {
  grid-area: ark; position: relative; z-index: 3; margin: 0 calc(-1 * var(--ciecie)) 0 0;
  display: flex; flex-direction: column; background: var(--arkusz); padding: 16px 0 0 var(--lewy);
}
.hero__arkusz .arkusz__pole { flex: 1 0 auto; display: flex; flex-direction: column; }
/* co najmniej 6:5; gdy lewa kolumna jest wyższa, okno rośnie do jej wysokości */
.hero__arkusz .okno { flex: 1 0 auto; aspect-ratio: 6 / 5; }
.hero__arkusz .tabelka { display: grid; grid-template-columns: auto auto auto; }
.hero__arkusz .tabelka > .t-stan { grid-column: 1 / 3; }
.hero__arkusz .tabelka > .t-r2 { border-top: 1px solid var(--kreska); }
.hero__arkusz .tabelka > .t-l { border-left: 0; padding-left: 18px; }

/* ---- ocena Google (C): zaprojektowany element ---- */
.ocena {
  grid-area: ocena; position: relative; z-index: 2;
  display: grid; grid-template-columns: auto minmax(0, 1fr) clamp(300px, 41vw, 640px);
  align-items: end; column-gap: clamp(20px, 2.4vw, 36px);
  margin-top: clamp(4.5rem, 8vw, 7.5rem);
}
.ocena__wynik { text-decoration: none; display: contents; }
.ocena__liczba { font-weight: 100; font-size: clamp(5rem, 10vw, 9.5rem); line-height: .78; letter-spacing: -.055em; font-variant-numeric: lining-nums; }
.ocena__opis { display: flex; flex-direction: column; gap: 12px; padding-bottom: 6px; }
.gwiazdy { display: flex; gap: 5px; }
.gwiazdy svg { width: 17px; height: 17px; fill: var(--akcent); }
.ocena__ile { font-size: 15px; line-height: 1.3; align-self: flex-start; text-decoration: underline 1px var(--akcent); text-underline-offset: 6px; }
.ocena__wynik:hover .ocena__ile { text-decoration-thickness: 2px; }
.cytat { margin: 0; padding-right: var(--pole); }
.cytat__duzy { margin: 0; font-style: italic; font-weight: 200; font-size: clamp(1.9rem, 3.3vw, 3.1rem); line-height: 1.08; letter-spacing: -.025em; }
.cytat__maly { margin: 18px 0 0; font-size: 17px; line-height: 1.5; font-weight: 300; font-style: italic; max-width: 26em; }
.cytat__kto { margin: 14px 0 0; font-size: 13px; color: var(--tusz-2); }

/* ============ REALIZACJE: pas arkuszy, przewijanie przesuwa go z prawej w lewo ============ */
/* Komputer: scena przyklejona do okna (sticky), przewijanie strony w dół przesuwa pas w lewo.
   Telefon, prefers-reduced-motion, zrzut automatu i brak JS: zwykły pas przesuwany palcem (scroll-snap). */
.realizacje { position: relative; }
.realizacje__glowa { position: relative; z-index: 2; padding-left: var(--wciecie); }

.pas__scena {
  --start: calc(var(--wciecie) + clamp(110px, 13vw, 200px));   /* gdzie stoi pierwsza karta (u Paro ok. 21% ekranu) */
  --blok-w: max(58vw, 600px);
  --kh: clamp(300px, calc(100vh - 360px), 520px);
  --odstep: clamp(28px, 2.8vw, 40px);
  --panel: clamp(150px, 11.5vw, 176px);
  position: relative; overflow: hidden; padding: clamp(1rem, 3vw, 3rem) 0 clamp(2rem, 4vw, 3.5rem);
}
html.pas-przyklej .pas__scena { position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; justify-content: center; pointer-events: none; }
html.pas-przyklej .pas__scena > :not(.final) { pointer-events: auto; }
.pas__rzad { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); padding-bottom: 34px; }
/* szary blok (jak u Paro): od lewej krawędzi, górna krawędź na linii bazowej „Realizacje”,
   pod nim pusty pas przed pierwszą kartą; karty przejeżdżają po nim i znikają lewą krawędzią ekranu */
.pas__blok { position: absolute; z-index: 0; left: 0; top: calc(var(--f2) * -.27); bottom: 0; width: var(--blok-w); background: var(--blok); }

/* licznik zamiast spisu, w rzędzie pod pasem, na szarym bloku: duży cienki numer (jak „5,0”),
   miejscowość, linijka i link do podstrony (w miejscu „więcej realizacji” z Paro) */
.pas__licznik { grid-row: 2; position: relative; z-index: 2; display: flex; align-items: flex-end; width: calc(var(--blok-w) - clamp(32px, 3.4vw, 56px)); padding: 26px 0 0 var(--wciecie); }
.licznik__nr { flex: none; display: flex; align-items: baseline; gap: 10px; margin: 0; overflow: hidden; padding: .08em 0 .04em; }
.licznik__nr b { display: block; font-family: 'Kanski Jedynka', var(--kroj); font-weight: 200; font-size: clamp(3.6rem, 5vw, 4.6rem); line-height: .8; letter-spacing: -.055em; font-variant-numeric: proportional-nums lining-nums; }
.licznik__nr span { font-size: 15px; color: var(--tusz-2); font-variant-numeric: tabular-nums; }
.licznik__nazwa { flex: none; margin: 0 0 3px 22px; font-size: clamp(19px, 1.62vw, 23px); font-weight: 300; line-height: 1.25; letter-spacing: -.012em; white-space: nowrap; }

/* okno pasa: cała szerokość ekranu, karty ucięte obiema krawędziami */
.pas__klip { grid-row: 1; position: relative; z-index: 3; overflow: hidden; }
html:not(.pas-przyklej) .pas__klip { scroll-padding-left: var(--start); overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: thin; scrollbar-color: var(--linia) transparent; }
.pas__tor { display: flex; align-items: flex-start; gap: var(--odstep); width: max-content; list-style: none; margin: 0; padding: 0 var(--pole) 0 var(--start); }
html.pas-przyklej .pas__tor { will-change: transform; }
.karta { flex: none; margin: calc((1 - var(--m, 1)) * var(--kh) * var(--y, 0)) 0 0; scroll-snap-align: start; }
.karta__link { display: block; color: inherit; text-decoration: none; }

/* karta = mały arkusz: rama, linia wymiarowa, zdjęcie, obok tabelka postawiona pionowo
   (to jest „szare pole obok zdjęcia” z Paro, tylko z treścią) */
.karta__ark { position: relative; display: flex; height: calc(var(--kh) * var(--m, 1)); margin: 0; padding: 14px 14px 14px var(--lewy); background: var(--arkusz); }
.karta__ark--bez-wymiaru { padding-left: 14px; }
.karta__ark .arkusz__pole { flex: none; height: 100%; width: calc((var(--kh) * var(--m, 1) - 28px) * var(--ok)); }
.karta__ark .okno { width: 100%; height: 100%; }
.karta__ark figcaption { flex: none; display: flex; flex-direction: column; justify-content: flex-end; width: var(--panel); margin-left: 14px; }
.tabelka.tabelka--pion { flex: none; flex-direction: column; margin: 0; padding: 0; border-top: 1px solid var(--tusz); border-left: 1px solid var(--tusz); background: none; }
.tabelka.tabelka--pion > div { flex: none; padding: 11px 0 12px 14px; border-left: 0; border-top: 1px solid var(--kreska); }
.tabelka.tabelka--pion > div:first-child { padding: 10px 0 12px 14px; border-top: 0; }
.tabelka.tabelka--pion > div:last-child { flex: none; padding: 11px 0 0 14px; border-top: 1px solid var(--tusz); }
.tabelka.tabelka--pion dd { white-space: normal; }

/* ============ MARKI: przewijana wstęga, logotypy w kolorze ============ */
/* pod oceną, przed realizacjami (K. 30.09): jeden pas od osi tekstu do prawej krawędzi, bez linii (K. 30.09), logotypy o 25 % większe,
   nagłówek w pasie; odstęp nad pasem = odstęp pod nim (do „Realizacje”) */
.marki { margin-top: clamp(2rem, 3.4vw, 3rem); padding: 0 0 var(--sekcja) var(--wciecie); }
.marki__pas {
  display: grid; grid-template-columns: clamp(200px, 21vw, 300px) minmax(0, 1fr); align-items: center;
}
.marki__h { margin: 0; padding-right: 32px; font-size: clamp(18px, 1.55vw, 22px); font-weight: 300; line-height: 1.3; letter-spacing: -.01em; }
.wstega {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 72px); mask-image: linear-gradient(90deg, transparent 0, #000 72px);
}
.wstega__tor { display: flex; width: max-content; list-style: none; margin: 0; padding: 0; animation: tor 60s linear infinite; }
.wstega:hover .wstega__tor { animation-play-state: paused; }
@keyframes tor { to { transform: translateX(-50%); } }
.marka { flex: none; height: 132px; display: flex; align-items: center; padding: 0 clamp(32px, 3.6vw, 56px); }
.marka img { height: calc(var(--h) * 1.25); width: auto; max-width: none; }
/* Dachy Konarzewski: złoty znak z białym napisem, pokazany w kolorze na małym grafitowym polu */
.marka__pole { display: flex; align-items: center; background: var(--tusz); padding: 10px 14px; }
/* Euro-Płyta: w małej skali ucinamy hasło pod znakiem (zostaje sam znak i nazwa) */
.marka--bez-hasla { overflow: hidden; }
.marka--bez-hasla img { transform: translateY(13%); clip-path: inset(0 0 26% 0); }
.bez-ruchu .wstega__tor { animation: none; }

/* B: paralaksa — kadr powiększony o 12 %, jedzie wolniej niż rama (przesunięcie liczy skrypt) */
.karta .skala { --W: calc(max(100cqw, 100cqh * var(--ar)) * 1.12); transform: translate3d(var(--par, 0px), 0, 0); }
/* D: karta = link do podstrony; najechanie: rama w akcencie, w ostatniej komórce „zobacz budowę →” */
.karta__ark .rama rect { transition: stroke .3s var(--ease); }
html.js:not(.bez-ruchu) .karta__ark.ark .rama rect { transition: stroke-dashoffset 1200ms var(--ease) var(--d-rama), stroke .3s var(--ease); }
.karta__link:hover .rama rect, .karta__link:focus-visible .rama rect { stroke: var(--akcent); }
.karta__link:focus-visible { outline-offset: 6px; }
.tabelka .nr dd { display: grid; }
.nr dd > span { grid-area: 1 / 1; transition: opacity .3s var(--ease); }
.nr__zobacz { display: inline-flex; align-items: center; gap: 8px; opacity: 0; font: 500 14px/1.3 var(--kroj); letter-spacing: 0; color: var(--akcent); white-space: nowrap; }
.nr__zobacz svg { width: 16px; height: 16px; flex: none; }
.karta__link:hover .nr__n, .karta__link:focus-visible .nr__n { opacity: 0; }
.karta__link:hover .nr__zobacz, .karta__link:focus-visible .nr__zobacz { opacity: 1; }
/* E (30.09): na dotyku nie ma najechania, więc „zobacz budowę →” stoi w karcie stale zamiast „NN / 09”
   (numer i tak jest w liczniku pod pasem). Bez tego na telefonie nic nie mówi, że karta prowadzi do galerii. */
@media (hover: none) {
  .karta__link .nr__n { opacity: 0; }
  .karta__link .nr__zobacz { opacity: 1; }
  /* uwaga 11: iPhone po dotknięciu (też przy przesuwaniu pasa) zostawia :hover na karcie — rama zostawała niebieska
     na przypadkowej karcie. Na dotyku rama w akcencie tylko przy fokusie z klawiatury. */
  .karta__link:hover:not(:focus-visible) .rama rect { stroke: var(--tusz); }
}
/* D: linijka — 9 ukośnych znaczników jak w linii wymiarowej, bieżący odcinek w akcencie, klik = skok do karty */
.linijka { position: relative; flex: 1 1 auto; min-width: 120px; height: 34px; margin: 0 28px 4px; }
.linijka__os { position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: var(--tusz-2); opacity: .5; }
.linijka__odc { position: absolute; left: 0; top: calc(50% - .5px); width: 100%; height: 2px; background: var(--akcent); transform-origin: 0 50%; transform: scaleX(0); }
.linijka__kreska { position: absolute; top: 0; left: calc(var(--k) * 100% / 8); width: 26px; height: 34px; margin-left: -13px; padding: 0; border: 0; background: none; cursor: pointer; }
.linijka__kreska::before { content: ""; position: absolute; left: 50%; top: 50%; width: 1px; height: 13px; background: var(--tusz-2); transform: translate(-50%, -50%) rotate(45deg); transition: background-color .3s var(--ease), height .3s var(--ease); }
.linijka__kreska:hover::before, .linijka__kreska.teraz::before { background: var(--akcent); height: 20px; }
/* C: finał — okno karty 09 rośnie na cały ekran (tylko komputer, tryb przyklejony) */
.final { position: absolute; inset: 0; z-index: 10; overflow: hidden; visibility: hidden; pointer-events: none; }
.final.widac { visibility: visible; }
.final__img { position: absolute; left: 0; top: 0; max-width: none; transform-origin: 0 0; will-change: transform; }
html:not(.pas-przyklej) .final { display: none; }

/* ============ DZIENNIK BUDOWY: początek (skrót; cały na podstronie) ============ */
.dziennik { position: relative; z-index: 12; --zakladka: clamp(240px, 36vh, 340px); padding-bottom: clamp(3rem, 5vw, 4.5rem); }
.dziennik__okladka { height: min(100vh, 56vw); overflow: hidden; background: #E3DFD8; }
.dziennik__okladka img { width: 100%; height: 100%; object-fit: cover; object-position: 45% 50%; }
html.pas-przyklej .dziennik__okladka { display: none; }
/* głowa wchodzi na zdjęcie: szary blok od lewej krawędzi zakrywa dolny lewy róg kadru */
.dziennik__glowa { position: relative; width: max(66vw, 640px); margin-top: calc(-1 * var(--zakladka)); padding: clamp(26px, 3vw, 42px) clamp(32px, 3.4vw, 56px) 0 var(--wciecie); }
.dziennik__blok { position: absolute; z-index: 0; left: 0; right: 0; top: 0; bottom: calc(-1 * clamp(40px, 5vw, 72px)); background: var(--blok); }
.dziennik__glowa > :not(.dziennik__blok) { position: relative; z-index: 1; }
.dziennik__glowa .h2 { white-space: nowrap; }
.dziennik__tabelka { display: grid; grid-template-columns: auto auto auto; margin: clamp(16px, 2vw, 26px) 0 0; padding: 0; }
.dziennik__tabelka > .t-l { border-left: 0; padding-left: 18px; }
.dziennik__tabelka > .t-r2 { border-top: 1px solid var(--kreska); }
.wpisy { position: relative; list-style: none; margin: clamp(5rem, 9vw, 8rem) 0 0; padding: 0; --os: calc(var(--wciecie) * .5); }
.wpisy__os { position: absolute; left: var(--os); top: 0; bottom: 0; width: 1px; background: var(--linia); }
.wpisy__postep { position: absolute; inset: 0; background: var(--akcent); transform-origin: 50% 0; transform: scaleY(var(--postep, 0)); }
.wpis { display: grid; grid-template-columns: var(--wciecie) clamp(170px, 17vw, 250px) minmax(0, 1fr); padding-bottom: clamp(3.5rem, 6vw, 5.5rem); }
.wpis__kiedy { grid-column: 2; }
/* 200 + własna „1” (Kanski Jedynka): w Hanken daszek „1” wygląda na koślawą (K. 30.09) */
.wpis__data { margin: 0; font-family: 'Kanski Jedynka', var(--kroj); font-weight: 200; font-size: clamp(3.2rem, 5.4vw, 5rem); line-height: .9; letter-spacing: -.05em; font-variant-numeric: lining-nums proportional-nums; }
.wpis__rok { margin: 10px 0 0; font-size: 15px; color: var(--tusz-2); }
.wpis__ikona { display: block; width: clamp(64px, 6.4vw, 96px); height: auto; margin-top: 26px; }
.wpis__tresc { grid-column: 3; padding-right: var(--pole); }
.wpis__foto { margin: 0; max-width: 1000px; aspect-ratio: 2.2; overflow: hidden; background: #E3DFD8; }
.wpis__foto img { width: 100%; height: 100%; object-fit: cover; }
.wpis__etap { margin: 22px 0 0; font-size: clamp(20px, 1.7vw, 24px); font-weight: 300; line-height: 1.25; letter-spacing: -.012em; }
.wpis__opis { margin: 8px 0 0; font-size: 16px; color: var(--tusz-2); max-width: 36em; }
.wpis--bok .wpis__tresc { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); column-gap: clamp(24px, 3vw, 48px); align-items: end; }
.wpis--bok .wpis__etap { margin-top: 0; }
.dziennik__wiecej { margin-left: calc(var(--wciecie) + clamp(170px, 17vw, 250px)); }

/* kreślenie: papier arkusza i linie tabelki wchodzą razem z ramą */
html.js:not(.bez-ruchu) .hero__arkusz.ark .skala { transition: transform calc(var(--t-okno) + 600ms) var(--ease) var(--d-okno); }
html.js:not(.bez-ruchu) .hero__arkusz.ark:not(.jest) .skala { transform: scale(1.08); }
html.js:not(.bez-ruchu) .hero__arkusz { transition: background-color 700ms var(--ease) 100ms; }
html.js:not(.bez-ruchu) .hero__arkusz:not(.jest) { background-color: transparent; }
html.js:not(.bez-ruchu) .hero__arkusz .tabelka, html.js:not(.bez-ruchu) .hero__arkusz .tabelka > div { transition: border-color 700ms var(--ease) calc(var(--d-tab) - 250ms), background-color 700ms var(--ease) 100ms; }
html.js:not(.bez-ruchu) .hero__arkusz:not(.jest) .tabelka, html.js:not(.bez-ruchu) .hero__arkusz:not(.jest) .tabelka > div { border-color: transparent; background-color: transparent; }
/* karty pasa: kreślą się, gdy wjeżdżają do okna (rama → zdjęcie → wymiar → tabelka) */
.karta__ark.ark { --t-okno: 1000ms; --d-okno: 240ms; --d-wym: 800ms; --d-wym-opis: 1150ms; --d-tab: 820ms; --t-krok: 80ms; }
html.js:not(.bez-ruchu) .karta__ark { transition: background-color 700ms var(--ease) 100ms; }
html.js:not(.bez-ruchu) .karta__ark:not(.jest) { background-color: transparent; }
html.js:not(.bez-ruchu) .karta__ark .tabelka, html.js:not(.bez-ruchu) .karta__ark .tabelka > div { transition: border-color 700ms var(--ease) calc(var(--d-tab) - 250ms); }
html.js:not(.bez-ruchu) .karta__ark:not(.jest) .tabelka, html.js:not(.bez-ruchu) .karta__ark:not(.jest) .tabelka > div { border-color: transparent; }

/* ============ PLANSZA: arkusz sekcji niżej (kosztorys, zasięg; też plansze podstron) ============
   Ten sam papier, rama i tabelka co w hero. Ucięta prawą krawędzią (--ciecie) albo cała (plansza--cala).
   K. 01.10 (uwaga 10): kto buduje i kontakt (busy) mają zdjęcie BEZ ramy (.foto w css/10-baza.css). */
.plansza { position: relative; z-index: 3; margin: 0 calc(-1 * var(--ciecie)) 0 0; background: var(--arkusz); padding: 16px 0 0 16px; }
.plansza--cala { margin-right: 0; padding-right: 16px; }
.plansza--cala .tabelka { margin-left: -16px; margin-right: -16px; padding-right: 0; }
.plansza .tabelka { margin-left: -16px; }
.plansza .okno { aspect-ratio: var(--okno-ar, 2); }
html.js:not(.bez-ruchu) .plansza { transition: background-color 700ms var(--ease) 100ms; }
html.js:not(.bez-ruchu) .plansza:not(.jest) { background-color: transparent; }
html.js:not(.bez-ruchu) .plansza .tabelka, html.js:not(.bez-ruchu) .plansza .tabelka > div { transition: border-color 700ms var(--ease) calc(var(--d-tab) - 250ms), background-color 700ms var(--ease) 100ms; }
html.js:not(.bez-ruchu) .plansza:not(.jest) .tabelka, html.js:not(.bez-ruchu) .plansza:not(.jest) .tabelka > div { border-color: transparent; background-color: transparent; }
html.js:not(.bez-ruchu) .plansza.ark .skala { transition: transform calc(var(--t-okno) + 600ms) var(--ease) var(--d-okno); }
html.js:not(.bez-ruchu) .plansza.ark:not(.jest) .skala { transform: scale(1.08); }

/* ============ CENA SIĘ NIE ZMIENIA ============
   Jak hero: szary blok od lewej, górna krawędź na linii bazowej 1. wiersza H2, wchodzi pod kosztorys,
   dolna na środku przycisku. Kosztorys = arkusz ucięty prawą krawędzią. ⛔ Tekst w akcencie na bloku. */
.cena {
  position: relative; overflow: hidden; display: grid;
  grid-template-columns: var(--wciecie) minmax(0, 1fr) clamp(340px, 46vw, 720px);
  grid-template-rows: auto auto 1fr;
  grid-template-areas:
    ".  h2    ark"
    ".  lewa  ark"
    ".  cta   ark";
  padding: var(--sekcja) 0;
}
.cena__h2 { grid-area: h2; position: relative; z-index: 2; padding-right: 32px; }
.cena__blok {
  grid-column: 1 / 3; grid-row: 1 / 4; z-index: 0; background: var(--blok);
  margin-top: calc(var(--f2) * .85);                     /* linia bazowa 1. wiersza (interlinia 1) */
  margin-right: calc(-1 * clamp(40px, 7vw, 110px));
  margin-bottom: calc(var(--przycisk-h) / 2);
}
.cena__lewa { grid-area: lewa; position: relative; z-index: 2; padding: clamp(28px, 3vw, 44px) 56px 0 0; }
/* zdanie w głosie firmy pod H2 (redakcja E, K. 01.10: „nie musisz dawać cytatów”): bez podpisu i bez kursywy */
.cena__cytat p { margin: 0; font-style: normal; font-weight: 200; font-size: clamp(1.7rem, 2.7vw, 2.6rem); line-height: 1.12; letter-spacing: -.022em; max-width: 15em; }
.cena__dew { margin: clamp(28px, 3vw, 44px) 0 0; font-size: 16px; line-height: 1.6; max-width: 31em; }
.cena__cta { grid-area: cta; align-self: end; position: relative; z-index: 2; padding-top: 32px; }
.kosztorys { grid-area: ark; align-self: end; padding: clamp(18px, 2vw, 26px) 0 clamp(20px, 2.4vw, 32px) clamp(20px, 2.4vw, 36px); }
.kosztorys__glowa { display: grid; grid-template-columns: 3.4em minmax(0, 1fr); column-gap: clamp(12px, 1.6vw, 24px); margin: 0 0 12px; font: 400 11.5px/1.2 var(--mono); color: var(--tusz-2); letter-spacing: -.01em; }
.kosztorys__lista { list-style: none; margin: 0; padding: 0 calc(var(--ciecie) + clamp(18px, 2vw, 28px)) 0 0; border-top: 1px solid var(--tusz); }
.kosztorys__lista > li {
  display: grid; grid-template-columns: 3.4em minmax(0, 1fr) auto; column-gap: clamp(12px, 1.6vw, 24px); align-items: baseline;
  padding: clamp(14px, 1.5vw, 20px) 0; border-bottom: 1px solid var(--kreska);
}
.kosztorys__lista > li:last-child { border-bottom-color: var(--tusz); }
.kosztorys__lp { font: 400 12px/1 var(--mono); color: var(--tusz-2); }
.kosztorys__co { font-size: clamp(18px, 1.5vw, 21px); font-weight: 300; line-height: 1.25; letter-spacing: -.01em; }
.kosztorys__ile { text-align: right; font-size: clamp(15px, 1.2vw, 17px); line-height: 1.3; }
.kosztorys__ile small { display: block; margin-top: 3px; font-size: 13px; color: var(--tusz-2); }
html.js:not(.bez-ruchu) .kosztorys__lista > li > * { transition: opacity 500ms var(--ease), clip-path 650ms var(--ease); transition-delay: calc(var(--d-tab) + var(--i, 0) * var(--t-krok)); clip-path: inset(0 0 0 0); }
html.js:not(.bez-ruchu) .ark:not(.jest) .kosztorys__lista > li > * { opacity: 0; clip-path: inset(0 100% 0 0); }
html.js:not(.bez-ruchu) .kosztorys__lista, html.js:not(.bez-ruchu) .kosztorys__lista > li { transition: border-color 700ms var(--ease) 500ms; }
html.js:not(.bez-ruchu) .ark:not(.jest) .kosztorys__lista, html.js:not(.bez-ruchu) .ark:not(.jest) .kosztorys__lista > li { border-color: transparent; }
.kosztorys.ark { --d-tab: 700ms; --t-krok: 90ms; }

/* ============ KTO BUDUJE ============ */
.kto { position: relative; overflow: hidden; padding: 0 0 var(--sekcja); }
.kto__glowa { padding: 0 var(--pole) 0 var(--wciecie); }
.kto__lead { margin: clamp(20px, 2.4vw, 32px) 0 0; font-size: clamp(17px, 1.36vw, 19.5px); line-height: 1.58; max-width: 36em; }
.kto__rzad {
  display: grid; grid-template-columns: var(--wciecie) minmax(0, 1fr) clamp(320px, 42vw, 660px);
  align-items: start; margin-top: clamp(40px, 5vw, 72px);
}
/* odstęp między kolumnami marginesem drugiej kolumny, nie column-gap (ten odsunąłby treść od osi tekstu) */
.kto__lista { grid-column: 2; margin: 0 clamp(32px, 4.4vw, 72px) 0 0; border-bottom: 1px solid var(--linia); }
.kto__lista > div { display: grid; grid-template-columns: clamp(120px, 11vw, 168px) minmax(0, 1fr); column-gap: 20px; padding: 18px 0 20px; border-top: 1px solid var(--linia); }
.kto__lista dt { font-size: 15px; line-height: 1.5; color: var(--tusz-2); padding-top: 1px; }
.kto__lista dd { margin: 0; font-size: 17px; line-height: 1.5; }
.kto__lista dd p { margin: 0; }
.kto__lista dd p + p { margin-top: 6px; }
.kto__ikony { display: flex; gap: clamp(16px, 2vw, 28px); margin-top: 14px; }
.kto__ikony img { width: clamp(72px, 6.6vw, 100px); height: auto; }
/* zdjęcie bez ramy (K. 01.10, uwaga 10), od kolumny do prawej krawędzi ekranu; górą równo z pierwszą kreską listy.
   Kadr 1,7:1 zamiast całego pliku (2,2:1): bez ramy i tabelki zdjęcie ma mieć wysokość, a z prawego brzegu znika skrawek busa. */
.kto__foto { grid-column: 3; --foto-ar: 1.7; --foto-x: 40%; --foto-y: 60%; }

/* ============ ZASIĘG: NORMALNA MAPA GOOGLE PRZEZ CAŁĄ SZEROKOŚĆ EKRANU (K. 30.09, 14:05 i 15:02) ============
   Obraz mapy (zrzut osadzenia Google z atrybucją, design/_kierunki/mapa-google.mjs) widać od razu; klik = żywa mapa
   (rdzeń [data-po-kliknieciu] podmienia zasłonę na <iframe>). Bez okręgu i bez rysunku. Pod mapą tabelka i lista.
   Proporcja okna = proporcja zrzutu (2,75:1 — K. 30.09 17:33 „krótsza”, telefon 4:5), więc obraz tylko się skaluje i atrybucja nigdy nie jest ucięta. */
.zasieg { position: relative; overflow: hidden; padding: 0 0 var(--sekcja); }
.zasieg__glowa { padding: 0 var(--pole) 0 var(--wciecie); }
.zasieg__lead { margin: clamp(20px, 2.4vw, 32px) 0 0; font-size: clamp(17px, 1.36vw, 19.5px); line-height: 1.58; max-width: 34em; }
.zasieg__pas.plansza { margin: clamp(40px, 5vw, 72px) -1px 0; padding: 0; }
.zasieg__mapa { position: relative; aspect-ratio: 2.75; overflow: hidden; background: var(--blok); }
.zasieg__mapa > [data-po-kliknieciu], .zasieg__mapa > iframe { position: absolute; inset: 0; width: 100%; height: 100%; padding: 0; display: block; }
.mapa-g__btn { position: relative; display: block; width: 100%; height: 100%; padding: 0; background: none; font: inherit; color: inherit; }
.mapa-g__btn picture, .mapa-g__btn img { display: block; width: 100%; height: 100%; object-fit: cover; }
.mapa-g__btn:focus-visible { outline: 2px solid var(--akcent); outline-offset: -4px; }
/* podpowiedź w wolnym prawym górnym rogu (karta firmy Google stoi w lewym, atrybucja na dole) */
.mapa-g__znak { position: absolute; top: clamp(12px, 1.4vw, 20px); right: clamp(12px, 1.4vw, 20px); padding: 9px 14px; background: var(--arkusz);
  border: 1px solid var(--tusz); font-size: 14px; font-weight: 500; line-height: 1.2; color: var(--tusz); transition: border-color 200ms, color 200ms; }
.mapa-g__btn:hover .mapa-g__znak, .mapa-g__btn:focus-visible .mapa-g__znak { border-color: var(--akcent); color: var(--akcent); }
.zasieg__dol { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); column-gap: clamp(24px, 4vw, 72px);
  padding: clamp(28px, 3vw, 44px) var(--pole) clamp(28px, 3vw, 44px) var(--wciecie); }
.zasieg__tabelka.tabelka--pion { align-self: start; justify-self: start; min-width: min(100%, 240px); }
.zasieg__tabelka.tabelka--pion > div:last-child { border-top-color: var(--kreska); }
.zasieg__lista-h { margin: 0 0 8px; font-size: 15px; color: var(--tusz-2); font-weight: 400; }
.zasieg__lista { list-style: none; margin: 0; padding: 0; columns: 3; column-gap: 32px; }
.zasieg__lista li { break-inside: avoid; padding: 16px 0 5px; border-top: 1px solid var(--linia); font-size: 15px; line-height: 1.3; }
html.js:not(.bez-ruchu) .zasieg__pas .mapa-g__btn picture { transition: clip-path var(--t-okno, 1100ms) var(--ease) var(--d-okno, 300ms); clip-path: inset(0 0 0 0); }
html.js:not(.bez-ruchu) .zasieg__pas:not(.jest) .mapa-g__btn picture { clip-path: inset(0 100% 0 0); }

/* ============ WYCENA I KONTAKT (formularz z projektem PDF) ============
   K. 01.10 (uwaga 10): busy „zdecydowanie większe” i bez ramy → kolumna zdjęcia 56vw (do 900 px) zamiast 42vw, dosunięta
   do prawej krawędzi ekranu, górą na wysokości liter H2. Pod zdjęciem w tej samej kolumnie „Wiadomość” z formularza. */
.kontakt-sek {
  position: relative; overflow: hidden; display: grid;
  grid-template-columns: var(--wciecie) minmax(0, 1fr) clamp(340px, 56vw, 900px);
  align-items: start; padding: 0 0 var(--sekcja);
}
.kontakt-sek__dane { grid-column: 2; grid-row: 1; min-width: 0; margin-right: clamp(32px, 4.4vw, 72px); }
.stan { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin: clamp(22px, 2.6vw, 34px) 0 0; font-size: 15px; color: var(--tusz-2); }
/* K. 07.10: kolory stanu jak obiecane Błażejowi 04.09 (zielone otwarte, czerwone zamknięte), ale stonowane, bez neonów:
   jedna kropka 8 px, puls = miękka fala wokół (nie mruganie), tylko przy „otwarte”; zamknięte stoi bez ruchu. */
.stan { --stan-ok: #2E8540; --stan-nie: #B3261E; }
.stan__kropka { width: 8px; height: 8px; border-radius: 50%; border: 1px solid var(--tusz-2); flex: none; }
.stan__teraz { display: inline-flex; flex-wrap: wrap; align-items: baseline; gap: 0 8px; color: var(--tusz-2); }
.stan__teraz[hidden] { display: none; }
.stan__teraz b { color: var(--tusz); font-weight: 500; }
.stan__kiedy::before, .stan__teraz:not([hidden]) + .stan__godz::before { content: "·"; margin-right: 10px; color: var(--tusz-2); }
.stan__godz[hidden] { display: none; }
.stan.otwarte .stan__kropka { border-color: var(--stan-ok); background: var(--stan-ok); animation: puls 2.6s cubic-bezier(.2, .6, .35, 1) infinite; }
.stan.zamkniete .stan__kropka { border-color: var(--stan-nie); background: var(--stan-nie); }
@keyframes puls { 0% { box-shadow: 0 0 0 0 rgba(46, 133, 64, .42); } 75%, 100% { box-shadow: 0 0 0 8px rgba(46, 133, 64, 0); } }
@media (prefers-reduced-motion: reduce) { .stan.otwarte .stan__kropka { animation: none; } }
html.bez-ruchu .stan__kropka { animation: none !important; }
.kontakt-sek__tel { display: inline-block; margin-top: 10px; font-size: clamp(2.5rem, 4.4vw, 4.1rem); font-weight: 200; line-height: 1.1; letter-spacing: -.03em; text-decoration: none; border-bottom: 1px solid var(--akcent); font-variant-numeric: tabular-nums; }
.kontakt-sek__tel:hover { border-bottom-width: 2px; }
.kontakt-sek__linki { display: flex; flex-wrap: wrap; gap: 8px 28px; margin: 22px 0 0; font-size: 16px; }
.kontakt-sek__linki a { text-decoration: none; border-bottom: 1px solid var(--akcent); padding-bottom: 2px; overflow-wrap: anywhere; }
.kontakt-sek__linki a:hover { border-bottom-width: 2px; }
.kontakt-sek__adres { margin: 14px 0 0; font-size: 15px; color: var(--tusz-2); font-style: normal; }
.kontakt-sek__uwaga { margin: 14px 0 0; font-size: 15px; color: var(--tusz-2); }
/* formularz (ten sam na wycena.html): K. 01.10 — bez kresek nad tytułem i pod plikiem, pola jako wyraźne pola (css/10-baza.css).
   Kolumna minmax(0, 1fr): długa nazwa wybranego pliku skraca się wielokropkiem zamiast rozpychać formularz poza ekran. */
.formularz { grid-column: 2; grid-row: 2; min-width: 0; margin-right: clamp(32px, 4.4vw, 72px); display: grid; grid-template-columns: minmax(0, 1fr); gap: 22px; margin-top: clamp(48px, 5.6vw, 80px); max-width: 640px; scroll-margin-top: 24px; }
.formularz__glowa { display: grid; gap: 10px; }
.formularz__tytul { margin: 0; font-size: clamp(20px, 1.7vw, 24px); font-weight: 300; line-height: 1.25; letter-spacing: -.012em; }
/* blok D: linki w akapitach tekstu jak w kontakcie (kreska w akcencie) */
.cena__dew a, .zasieg__lead a, .pole__opis a { color: inherit; text-decoration: none; border-bottom: 1px solid var(--akcent); padding-bottom: 1px; }
.cena__dew a:hover, .zasieg__lead a:hover, .pole__opis a:hover { border-bottom-width: 2px; }
.formularz__glowa .form-error:not(:empty) { margin-top: 6px; }
.formularz__para { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 22px 28px; }
.formularz .przycisk { justify-self: start; }
.formularz__zgoda { margin: 0; font-size: 13px; line-height: 1.55; color: var(--tusz-2); max-width: min(100%, 33em); }
.formularz__zgoda a { text-underline-offset: 3px; }
.kontakt-sek__foto { grid-column: 3; grid-row: 1; margin-top: calc(var(--f2) * .2); }   /* górna krawędź ≈ góra liter „Wycena” */
/* komputer: formularz pod rzędem „dane | busy” na szerokość obu kolumn (K. 01.10: „po prawej dużo białej przestrzeni”).
   Lewa kolumna = pod danymi (pary pól, plik, przycisk), prawa = wiadomość na wysokość lewej kolumny.
   Prawa kolumna formularza zaczyna się równo ze zdjęciem busów (56vw), więc zdjęcie i „Wiadomość” tworzą jedną kolumnę
   (sprawdzone 01.10 zrzutem: wariant z „Wiadomością” na 42vw dawał schodek bez powodu). Kolejność w DOM (i Tab) bez zmian. */
@media (min-width: 821px) {
  .kontakt-sek .formularz {
    grid-column: 2 / 4; margin-right: var(--pole); max-width: none;
    grid-template-columns: minmax(0, 1fr) calc(clamp(340px, 56vw, 900px) - var(--pole));
    column-gap: clamp(32px, 4.4vw, 72px);
    grid-template-areas:
      "glowa  glowa"
      "para1  wiad"
      "para2  wiad"
      "plik   wiad"
      "wyslij ."
      "zgoda  .";
  }
  .kontakt-sek .formularz__glowa { grid-area: glowa; }
  .kontakt-sek .formularz__glowa + .formularz__para { grid-area: para1; }
  .kontakt-sek .formularz__para + .formularz__para { grid-area: para2; }
  .kontakt-sek .pole--plik { grid-area: plik; }
  .kontakt-sek .pole--wiadomosc { grid-area: wiad; grid-template-rows: auto minmax(0, 1fr) auto; }
  .kontakt-sek .pole--wiadomosc textarea { height: 100%; resize: none; }
  .kontakt-sek .formularz .przycisk { grid-area: wyslij; }
  .kontakt-sek .formularz__zgoda { grid-area: zgoda; }
}

/* ============ TABLET ============ */
@media (max-width: 1080px) {
  .hero { grid-template-columns: var(--wciecie) minmax(0, 1fr) 44vw; }
  .hero { --f: clamp(2.55rem, 5.1vw, 5.1rem); }
  .hero__h1 { padding-right: 28px; }
  .ocena { grid-template-columns: auto minmax(0, 1fr) 44vw; }
  .kto__lista > div { grid-template-columns: minmax(0, 1fr); row-gap: 4px; }
}

/* średni ekran: lista miejscowości w dwóch kolumnach pod mapą */
@media (max-width: 1180px) {
  .zasieg__lista { columns: 2; column-gap: 24px; }
}

/* niski ekran komputera (np. 1280 × 720): tabelka w karcie ciaśniej, żeby zmieściła się w niższej karcie */
@media (min-width: 821px) and (max-height: 820px) {
  .tabelka.tabelka--pion > div, .tabelka.tabelka--pion > div:last-child { padding: 6px 0 7px 12px; }
  .tabelka.tabelka--pion > div:first-child { padding: 8px 0 7px 12px; }
  .tabelka--pion dt { font-size: 10.5px; }
  .tabelka--pion dd { font-size: 14px; margin-top: 2px; }
}

/* ============ TELEFON ============
   K. 01.10 (uwaga 11, iPhone): „raz do lewej, raz do prawej krawędzi nie wygląda najlepiej na telefonie”. Zasada (DESIGN.md
   „Telefon: jedna oś, spad tylko symetryczny”): treść, arkusze w ramie i zdjęcia bez ramy stoją między marginesami --pole
   (20 px z obu stron), szare bloki idą na całą szerokość ekranu, do krawędzi dochodzi tylko to, co dochodzi do OBU
   (mapa, okładka dziennika, wstęga marek, stopka). Wyjątek: przewijane w bok pasy (karty realizacji, „Więcej zdjęć”) —
   wystająca z prawej NASTĘPNA karta to znak „przesuń”. Komputer bez zmian: wszystko poniżej siedzi w tym bloku. */
@media (max-width: 820px) {
  .hero {
    grid-template-columns: var(--pole) minmax(0, 1fr) var(--pole);
    grid-template-rows: none;
    grid-template-areas:
      ".    h1    .  "
      ".    ark   .  "
      ".    ocena .  "
      ".    cta   .  "
      ".    plyta .  ";
    padding-bottom: 3.5rem;
  }
  .hero__h1 { padding: 16px 0 0; }
  .h1__kto { font-size: 16px; margin-bottom: 12px; gap: 12px; }
  .h1__kto::before { width: 28px; }
  .h1__zdanie { font-size: clamp(2.3rem, 10.6vw, 3.6rem); line-height: 1.05; }
  .h1__zdanie--dlugie { font-size: clamp(1.45rem, 6.5vw, 2.6rem); line-height: 1.1; }
  /* arkusz cały między marginesami (było: ucięty prawą krawędzią o --ciecie), rama widać z czterech stron */
  .hero__arkusz { margin: 18px 0 0; padding: 10px 10px 0 var(--lewy); }
  /* 4:3 zamiast 3:2: pionowe zdjęcie (4:5) pokazuje 60 % wysokości zamiast 53 %, a okno ma prawie tę samą wysokość
     (węższy arkusz) — dom i oba odnośniki w kadrze, ucięte niebo i pole; przycisk dalej na pierwszym ekranie 390 × 844 */
  .hero__arkusz .okno { aspect-ratio: 4 / 3; flex: none; }
  .okno .skala { --px: var(--fx-m, var(--fx, .5)); --py: var(--fy-m, var(--fy, .5)); }
  .hero__arkusz .tabelka { margin-right: -10px; padding-right: 0; }
  .hero__arkusz .tabelka > div:last-child { padding-right: 10px; }
  .hero__arkusz .tabelka > .t-l { padding-left: 12px; }
  /* 07.10 (pkt 7): przy wartościach 15 px trzy kolumny mieszczą się w jednym wierszu od ok. 390 px; węższy telefon
     łamie wartość w komórce (było: nowrap ucinał „jednorodzinny” przy 360 px) */
  .hero__arkusz .tabelka dd { white-space: normal; }
  /* 07.10 (pkt 12): fakty to całe frazy (nowrap), kropka stoi PRZED każdą. Akapit jest o szerokość kropki w lewo,
     a clip-path ucina ten pas, więc kropka frazy, która zaczyna wiersz, znika za osią: „·” nigdy nie kończy
     ani nie zaczyna wiersza (było: kropka na końcu wiersza przy 390 px, na początku przy 360 px). Osobny akapit
     (.fakty--tel), bo podział tekstu komputera na elementy przesuwał glify o ułamek piksela. */
  .fakty--kom { display: none; }
  .fakty--tel { display: flex; flex-wrap: wrap; margin-left: -1.1em; clip-path: inset(0 0 0 1.1em); }
  .fakt { white-space: nowrap; }
  .fakt::before { content: "·"; display: inline-block; width: 1.1em; text-align: center; }
  /* szary blok na całą szerokość (było: od lewej krawędzi do 12 px przed prawą); arkusz stoi na nim między marginesami */
  .hero__blok {
    grid-column: 1 / -1; grid-row: 3 / 5;
    margin-top: -96px; margin-right: 0; margin-bottom: calc(var(--przycisk-h) / 2);
  }
  .ocena { grid-template-columns: auto minmax(0, 1fr); column-gap: 16px; margin-top: 18px; align-items: center; }
  .ocena__liczba { font-size: 4.4rem; line-height: .8; }
  .ocena__opis { gap: 8px; padding-bottom: 0; }
  .gwiazdy svg { width: 15px; height: 15px; }
  .ocena__ile { font-size: 14px; }
  .cytat { grid-column: 1 / -1; padding: 0; margin-top: 12px; }
  .cytat__duzy { font-size: 1.5rem; }
  .ocena .cytat__maly { display: none; }   /* tylko w hero (brak miejsca); na o-firmie i wycenie zostaje (E, 30.09) */
  .cytat__kto { margin-top: 6px; }
  .hero__cta { padding-top: 16px; align-self: auto; }
  .kontakt { font-size: 15px; margin-bottom: 16px; gap: 6px 22px; }
  .kontakt__etykieta { display: none; }
  /* 07.10 (pkt 17): WhatsApp i telefon w hero mają 23-27 px wysokości; niewidoczne pole dotyku 45-47 px (wygląd bez zmian) */
  .hero__cta .kontakt a { position: relative; }
  .hero__cta .kontakt a::after { content: ""; position: absolute; inset: -12px -8px; }
  .przycisk { width: 100%; justify-content: space-between; padding: 0 20px 0 22px; }
  .hero__plyta { padding: 40px 0 0; }
  .lead { font-size: 17px; margin-bottom: 20px; }

  .realizacje__glowa { padding-left: var(--pole); }
  /* odstęp 24 px > margines 20 px: karta dociągnięta do osi chowa poprzednią całą za lewą krawędzią
     (przy 16 px wystawał z lewej 4-pikselowy pasek ramy poprzedniej karty) */
  .pas__scena { --kh-m: 44vw; --start: var(--pole); --odstep: 24px; padding-top: 1rem; }
  .pas__rzad { padding-bottom: 0; }
  /* szary blok na całą szerokość (było 62vw od lewej krawędzi): linia bazowa „Realizacje” na jego górnej krawędzi jak na komputerze */
  .pas__blok { width: auto; right: 0; bottom: auto; height: calc(var(--f2) * .27 + var(--kh-m) * .6); }
  /* 07.10 (pkt 2): karty miały 294-459 px wysokości, stały u góry, a licznik pod najwyższą: pod domami ok. 155 px pustego
     tła, na 360 × 640 licznik prawie pod ekranem. Teraz wszystkie karty mają jedną wysokość (stretch, tabelka na dole arkusza
     jak tabelka rysunkowa), a licznik stoi zawsze 30 px pod kartą. Różnicę w tabelkach (2-4 wiersze) zabiera głównie kadr:
     karty z krótką tabelką mają wyższe okno (--dodatek-m z dane/karty.json, „okno_pas_m”), ostatnia karta (09) jest szersza.
     Resztę (najwyżej ok. 40 px) bierze papier nad tabelką. Kadry sprawdzone zrzutami: domy całe albo 86 % szerokości,
     Boruja Kościelna 53 % (cały budynek ze szczytem, --pas-fx-m), Wolsztyn cała panorama. */
  .pas__tor { padding: 0 var(--pole); align-items: stretch; }
  .karta__link { height: 100%; }
  .pas__licznik {
    width: auto; padding: 30px var(--pole) 0;
    display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 16px; align-items: end;
  }
  .licznik__nr b { font-size: 3.4rem; }
  .licznik__nazwa { margin: 0 0 6px; font-size: 19px; white-space: normal; }
  .pas__wiecej { grid-column: 1 / -1; justify-self: start; margin: 20px 0 0; }
  .karta__ark { flex-direction: column; height: 100%; padding: 10px 10px 0 var(--lewy); }
  .karta__ark--bez-wymiaru { padding-left: 10px; }
  /* uwaga 12: okno w proporcji ZDJĘCIA (--ar), nie okna z komputera (--ok), w granicach 40-68vw; bez powiększenia 1,12
     (paralaksa jest tylko na komputerze). Panoramy 2,17:1 pokazują ok. 71 % szerokości (było 47-53 %). */
  .karta__ark .arkusz__pole { height: auto; width: auto; }
  .karta__ark .okno { --okno-h: calc(var(--kh-m) + var(--dodatek-m, 0px)); height: var(--okno-h); width: clamp(40vw, calc(var(--okno-h) * var(--ar)), 68vw); }
  .karta .okno .skala { --px: var(--pas-fx-m, var(--fx-m, var(--fx, .5))); }
  /* 09 (Wolsztyn) jest ostatnia, więc nie musi zostawiać miejsca na następną: cała szerokość między marginesami i cała
     panorama (okno w proporcji pliku). Tabelka ma tu 4 wiersze; niższe okno wyrównuje kartę z pozostałymi. */
  .karta:last-child .okno { --szer: calc(100vw - 2 * var(--pole) - var(--lewy) - 10px); width: var(--szer); height: calc(var(--szer) / var(--ar)); }
  .karta .skala { --W: max(100cqw, 100cqh * var(--ar)); transform: none; }
  /* tabelka na dole arkusza: margines auto zabiera wolne miejsce karty niższej od najwyższej */
  .karta__ark figcaption { width: 0; min-width: 100%; margin: auto 0 0; padding-top: 10px; }
  /* 07.10 (pkt 1, 6): tabelka pionowa na telefonie = 2 kolumny pod zdjęciem (karty pasa i tabelka pod mapą).
     Układ wierszy dają klasy z build.py (t-r1-m pierwszy wiersz, t-p-m prawa kolumna, t-cala-m pole bez pary: uwaga 12,
     „jednorodzinny” w wąskiej karcie; .nr cały dolny wiersz: E 30.09, „zobacz budowę →” w połowie karty wystawał poza ramę),
     a nie nth-child: tamte reguły przegrywały z wersją pionową z komputera (dwie klasy) i łamały kreski: górna kreska
     drugiej komórki szara 1 px pod czarną, podwójna linia nad „Arkuszem”, kreska pod „Arkuszem” 1 px nad ramą.
     Tekst równo z lewą krawędzią zdjęcia, bez lewej kreski (jak tabelka pod mapą); górna kreska w kolorze tekstu zostaje. */
  .tabelka.tabelka--pion { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); border-left: 0; }
  .tabelka.tabelka--pion > div, .tabelka.tabelka--pion > div:first-child, .tabelka.tabelka--pion > div:last-child {
    margin: 0; padding: 9px 10px 11px 0; border: 0; border-top: 1px solid var(--kreska);
  }
  .tabelka.tabelka--pion > div.t-r1-m { border-top: 0; }
  .tabelka.tabelka--pion > div.t-p-m { padding-left: 12px; border-left: 1px solid var(--kreska); }
  /* „Arkusz”: nad nim kreska w kolorze tekstu (jak na komputerze), pod nim 12 px papieru do ramy (pkt 1; było 0 px) */
  .tabelka.tabelka--pion > div.nr { grid-column: 1 / -1; border-top-color: var(--tusz); padding-bottom: 12px; }

  .karta { margin-top: 0; }
  .linijka { grid-column: 1 / -1; margin: 14px 0 0; }
  /* 07.10 (pkt 17): znaczniki linijki mają pole dotyku 26 × 34 px; teraz 44 px wysokości i szerokość odstępu między
     znacznikami (najwyżej 44 px), więc pola się nie nakładają. Kreska znacznika (::before) zostaje w tym samym miejscu. */
  .linijka__kreska { top: -5px; height: 44px; width: min(44px, 100% / 8); margin-left: calc(min(44px, 100% / 8) / -2); }
  /* odbiór 07.10 (pkt 17 na podstronach): te same linki ze strzałką („Cena się nie zmienia”, „Zobacz budowę”, „Więcej o firmie”,
     „Zobacz zdjęcie z tego dnia”…) i WhatsApp / telefon nad stopką podstron miały 27-28 px; pole dotyku 44 px (28 + 2 × 8),
     tyle wynosi odstęp linków jeden pod drugim, więc pola się nie nakładają */
  .pas__wiecej, .kontakt a { position: relative; }
  .pas__wiecej::after, .kontakt a::after { content: ""; position: absolute; inset: -8px -8px; }
  /* „Wszystkie realizacje” i „Cały dziennik budowy” mają 28 px wysokości: niewidoczne pole dotyku ok. 46 px */
  .pas__licznik .pas__wiecej, .dziennik__wiecej { position: relative; }
  .pas__licznik .pas__wiecej::after, .dziennik__wiecej::after { content: ""; position: absolute; inset: -10px -8px; }
  /* uwaga 12: okładka (klatka 18.10, 2,194:1) w oknie 1,8:1 przez całą szerokość (symetrycznie) zamiast 62vh × 100vw.
     Było: ok. 34 % szerokości kadru (pół domu, pół ładowarki, a ładowarkę zakrywał szary blok). Jest: 82 % (x 9-91 %),
     cały dom i cała ładowarka. Głowa NIE zachodzi na zdjęcie (zakładka 0): ładowarka stoi przy dolnej krawędzi kadru.
     07.10 (pkt 10): bez dolnego odstępu sekcji: „Cały dziennik budowy” → „Cena się nie zmienia.” miało 120 px (48 + 72),
     a każde inne przejście między sekcjami na telefonie 72 px (padding sekcji 4,5 rem). */
  .dziennik { --zakladka: 0px; padding-bottom: 0; }
  .dziennik__okladka { height: auto; aspect-ratio: 1.8; }
  .dziennik__okladka img { object-position: 50% 50%; }
  .dziennik__glowa .h2 { white-space: normal; }
  /* szary blok głowy na całą szerokość (było: od lewej krawędzi do 20 px przed prawą) */
  .dziennik__glowa { width: auto; margin-right: 0; padding: 20px var(--pole) 0; }
  .dziennik__blok { bottom: -36px; }
  .dziennik__tabelka { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .dziennik__tabelka > div, .dziennik__tabelka > .t-l, .dziennik__tabelka > .t-r2 { border-left: 0; border-top: 1px solid var(--kreska); padding-left: 12px; }
  .dziennik__tabelka > div:nth-child(-n+2) { border-top: 0; }
  .dziennik__tabelka > div:nth-child(even) { border-left: 1px solid var(--kreska); }
  .dziennik__tabelka dd { white-space: normal; }
  .wpisy { --os: 7px; margin-top: 4.5rem; }
  .wpis { display: block; padding: 0 var(--pole) 3.2rem 30px; }
  .wpis__kiedy { display: flex; align-items: flex-end; gap: 12px; margin-bottom: 14px; }
  .wpis__data { font-size: 3rem; }
  .wpis__rok { margin: 0 0 4px; }
  .wpis__ikona { width: 56px; margin: 0 0 0 auto; }
  .wpis__tresc, .wpis--bok .wpis__tresc { display: block; padding: 0; }
  .wpis--bok .wpis__etap { margin-top: 18px; }
  .dziennik__wiecej { margin-left: 30px; }

  .marki { margin-top: 0; padding: 0 0 3.5rem; }
  .marki__pas { grid-template-columns: minmax(0, 1fr); }
  .marki__h { padding: 18px var(--pole) 0; font-size: 19px; }
  .wstega { -webkit-mask-image: none; mask-image: none; }
  .marka { height: 104px; padding: 0 26px; }
  .marka img { height: calc(var(--h) * 1.05); }

  /* plansza (arkusz sekcji) na telefonie cała między marginesami (uwaga 11; było: ucięta prawą krawędzią o --ciecie).
     Pełna szerokość od krawędzi do krawędzi zostaje tylko tam, gdzie jest symetryczna (mapa: .zasieg__pas, .wyc-mapa__ark). */
  .plansza { margin-right: 0; padding-right: 16px; }
  .plansza .tabelka { margin-right: -16px; padding-right: 0; }

  /* sekcje 5–8: jedna kolumna, marginesy 20 px z obu stron */
  .cena {
    grid-template-columns: var(--pole) minmax(0, 1fr) var(--pole);
    grid-template-rows: none;
    /* E (30.09): kosztorys zaraz pod H2 (redakcja D, U-1; wtedy pod listą stał cytat Błażeja, od redakcji E 01.10 zdanie firmy).
       Dalej jak hero na telefonie: blok wchodzi pod dół kosztorysu, zdanie i akapit na bloku, przycisk połową na jego dolnej krawędzi.
       Uwaga 11: kosztorys między marginesami (było: od marginesu za prawą krawędź), blok na całą szerokość. */
    grid-template-areas:
      ".    h2    .  "
      ".    ark   .  "
      ".    lewa  .  "
      ".    cta   .  ";
    padding: 4.5rem 0;
  }
  .cena__blok { grid-column: 1 / -1; grid-row: 3 / 5; margin-top: -72px; margin-right: 0; }
  .cena__lewa { padding: 32px 0 0; }
  .cena__cytat p { font-size: 1.6rem; }
  .cena__cta { padding-top: 28px; }
  .kosztorys { margin: 28px 0 0; padding: 14px 16px 16px; }
  .kosztorys__lista { padding-right: 0; }
  .kosztorys__lista > li { grid-template-columns: 2.6em minmax(0, 1fr); row-gap: 4px; }
  .kosztorys__ile { grid-column: 2; text-align: left; }
  .kosztorys__co { font-size: 18px; }
  .kosztorys__glowa { grid-template-columns: 2.6em minmax(0, 1fr); }

  .kto { padding-bottom: 4.5rem; }
  .kto__glowa, .zasieg__glowa { padding: 0 var(--pole); }
  .kto__rzad { grid-template-columns: var(--pole) minmax(0, 1fr) var(--pole); column-gap: 0; margin-top: 32px; }
  /* zdjęcie bez ramy między marginesami (uwaga 11; było: od marginesu do prawej krawędzi ekranu).
     07.10 (pkt 11): kadr 1,4:1 od lewej (x 10 %) zamiast 1,7:1 (x 40 %): ładowarka z podpisu stoi w lewej połowie kadru,
     większa, z budynkiem za nią, a nie wciśnięta w lewy dolny róg. Dół ładowarki ucina już sam plik (kadr z kamery),
     więc pionowego punktu kadrowania nie ma czym przesunąć: obraz pokazuje całą wysokość pliku. */
  .kto__foto { grid-column: 2; grid-row: 1; margin-bottom: 32px; --foto-ar: 1.4; --foto-x: 10%; }
  .kto__lista { grid-column: 2; grid-row: 2; margin-right: 0; }
  .kto__lista dd { font-size: 16px; }

  .zasieg { padding-bottom: 4.5rem; }
  .zasieg__pas.plansza { margin-top: 32px; }
  .zasieg__mapa { aspect-ratio: .8; }
  /* 07.10 (pkt 20): plansza mapy wystaje 1 px za obie krawędzie ekranu (rama znika), więc treść pod mapą i podpowiedź
     dostają ten 1 px z powrotem: stoją na osi 20 px, jak tekst nad mapą (było 19 px i 9 px) */
  .zasieg__dol { grid-template-columns: minmax(0, 1fr); row-gap: 28px; padding: 24px calc(var(--pole) + 1px) 28px; }
  /* tabelka na osi (było: margines −16 px z .plansza .tabelka i lewa kreska 4 px od krawędzi ekranu); komórki: reguły
     .tabelka--pion wyżej (klasy t-r1-m / t-p-m w build.py) */
  .zasieg__tabelka.tabelka--pion { justify-self: stretch; margin-left: 0; margin-right: 0; border-left: 0; border-bottom: 1px solid var(--kreska); }
  .mapa-g__znak { font-size: 13px; padding: 8px 12px; top: auto; right: auto; left: calc(var(--pole) + 1px); bottom: 64px; }
  .zasieg__lista { columns: 2; column-gap: 20px; }

  .kontakt-sek { grid-template-columns: var(--pole) minmax(0, 1fr) var(--pole); column-gap: 0; padding-bottom: 4.5rem; }
  .kontakt-sek__dane { grid-column: 2; grid-row: 1; margin-right: 0; }
  .kontakt-sek__foto { grid-column: 2; grid-row: 2; margin-top: 36px; }   /* busy między marginesami (uwaga 11), oba całe */
  .formularz { grid-column: 2; grid-row: 3; margin-right: 0; }
  .kontakt-sek__tel { font-size: 2.4rem; }
  .formularz .przycisk { justify-self: stretch; }
  /* odbiór 07.10 (pkt 16, jak .wyc w css/45): komunikat błędu ZASTĘPUJE podpowiedź „Podaj telefon albo e-mail, wystarczy
     jedno.” zamiast stać pod nią z tym samym zdaniem innymi słowami; błąd staje w wierszu podpowiedzi */
  .kontakt-sek .formularz__glowa:has(.form-error:not(:empty)) > .pole__opis { display: none; }
  .kontakt-sek .formularz__glowa .form-error:not(:empty) { margin-top: 0; }
}

/* ══════════════════════════════════════════════════════════════════════════════
   STOPKA (na bloku przez całą szerokość) i PASEK KONTAKTU NA TELEFONIE.
   Wspólne dla wszystkich stron. ⛔ Pas „Gotowy na…? Skontaktuj się” nad stopką.
   Linki (audyt telefonu 07.10, pkt 18): podkreślenie 1 px w akcencie jak linki w treści (WhatsApp i telefon w hero,
   „WhatsAppie / e-mailem” pod polem pliku, okruchy); po najechaniu 2 px. Lista „Strona” to nawigacja, więc bez kreski
   (jak linki menu na pasku), po najechaniu kreska w akcencie. Kreska w akcencie na bloku = 4,3:1, a to nie tekst
   (DESIGN.md: tekst w akcencie nie stoi na bloku; kreski tak, jak „Wszystkie realizacje →” na bloku pasa).
   ══════════════════════════════════════════════════════════════════════════════ */

.stopka { background: var(--blok); padding: clamp(3rem, 5.5vw, 5rem) var(--pole) 0 var(--wciecie); font-size: 15px; line-height: 1.6; }
.stopka__siatka { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr) minmax(0, 1fr); gap: 36px clamp(32px, 5vw, 80px); }
.stopka__logo { display: inline-block; }
.stopka__logo img { height: 42px; width: auto; }
.stopka__nap { margin: 22px 0 0; font-style: normal; }
.stopka__nap span { display: block; }
.stopka__nap .stopka__nap-mail { display: none; }   /* e-mail pod adresem tylko na telefonie (niżej); komputer ma go w „Kontakt” */
.stopka__firma { font-weight: 500; }
.stopka__rejestr { margin: 10px 0 0; font-size: 14px; color: var(--tusz-2); font-variant-numeric: tabular-nums; }
.stopka__etykieta { margin: 0 0 12px; font-size: 14px; color: var(--tusz-2); }
.stopka__lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; justify-items: start; }
/* kreska przez text-decoration, nie border: na telefonie wiersz ma 40 px (pole dotyku), a kreska musi zostać przy literach */
.stopka__lista a {
  text-decoration-line: underline; text-decoration-color: transparent; text-decoration-thickness: 1px; text-underline-offset: 5px;
  transition: text-decoration-color .3s var(--ease);
}
.stopka__lista a:hover { text-decoration-color: var(--akcent); }
.stopka__lista .stopka__podkr { text-decoration-color: var(--akcent); font-variant-numeric: tabular-nums; }
.stopka__lista .stopka__podkr:hover { text-decoration-thickness: 2px; }
.stopka__marka { display: none; }   /* loga marek przed napisem tylko na telefonie (niżej) */
.stopka__godz { color: var(--tusz-2); }
.stopka__dol {
  display: flex; flex-wrap: wrap; gap: 8px 28px; margin-top: clamp(40px, 5vw, 64px); padding: 20px 0 24px;
  border-top: 1px solid var(--linia); font-size: 13.5px; color: var(--tusz-2);
}
/* prawy zapas = róg (31-rog.css: kafel 44 px w polu --pole) + 24 px: na samym dole strony „na górę” stoi obok
   „Projekt strony”, a kreska stopki kończy się przed nim (margin, nie padding, bo kreska biegłaby pod przyciskiem) */
.stopka__dol { margin-right: 68px; }
.stopka__dol a { color: var(--tusz); text-underline-offset: 3px; text-decoration-thickness: 1px; text-decoration-color: var(--akcent); }
.stopka__dol a:hover { text-decoration-thickness: 2px; }
.stopka__dol span:last-child { margin-left: auto; }
/* zgoda pod formularzem (główna, wycena): ten sam link do polityki prywatności co w dolnym wierszu stopki, więc ta sama kreska;
   stoi tu, a nie w 20-glowna.css, żeby oba miejsca tego linku zmieniały się razem */
.formularz__zgoda a { text-decoration-color: var(--akcent); text-decoration-thickness: 1px; }
.formularz__zgoda a:hover { text-decoration-thickness: 2px; }

/* pasek kontaktu (telefon): przyklejony do dołu, pojawia się, gdy przyciski hero wyjadą z ekranu.
   Bez JS ukryty (numer i tak stoi w hero, w kontakcie i w stopce). */
.pasek-kontakt { display: none; }

@media (max-width: 1080px) {
  .stopka__siatka { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .stopka__siatka > :first-child { grid-column: 1 / -1; }
}

@media (max-width: 820px) {
  /* audyt 07.10 pkt 13: było 888 px w jednej kolumnie, zaraz pod kontaktem z tymi samymi danymi.
     Teraz: logo i dane firmy (z e-mailem) na całą szerokość, pod nimi „Strona” i „Kontakt” w dwóch kolumnach,
     wiersz linku 40 px (pole dotyku; było 22 px), dolny wiersz bez zapasu na róg (róg na telefonie zniknął). */
  .stopka { padding: 44px var(--pole) 0; }
  .stopka__siatka { grid-template-columns: minmax(0, 1fr) minmax(0, 1.12fr); gap: 28px 16px; }
  .stopka__logo img { height: 40px; }
  .stopka__nap { margin-top: 18px; }
  .stopka__nap .stopka__nap-mail { display: block; }
  .stopka__nap-mail a {
    display: inline-flex; align-items: center; min-height: 40px; margin: -8px 0;
    text-decoration-line: underline; text-decoration-color: var(--akcent); text-decoration-thickness: 1px; text-underline-offset: 5px;
  }
  .stopka__li-mail { display: none; }
  .stopka__rejestr { margin-top: 8px; }
  .stopka__etykieta { margin-bottom: 2px; }
  .stopka__lista { gap: 0; }
  .stopka__lista a { display: inline-flex; align-items: center; min-height: 40px; }
  .stopka__lista .stopka__podkr { overflow-wrap: anywhere; }
  .stopka__godz { display: flex; align-items: center; min-height: 40px; }
  /* K. 07.10: loga marek prawdziwe, w ich kolorach (te same co róg na komputerze), 18 px przed napisem */
  .stopka__marka { display: block; flex: none; width: 18px; height: 18px; margin-right: 10px; }
  .stopka__dol { margin-top: 32px; margin-right: 0; padding-right: 0; gap: 6px 24px; }
  .stopka__dol span:last-child { margin-left: 0; }
  .js .stopka__dol { padding-bottom: calc(24px + 56px + env(safe-area-inset-bottom, 0px)); }

  /* uwaga 13 (K. 01.10): pasek w niebieskim z logo (#0C6BB4), biały tekst 5,6:1, wciśnięcie = #0A5A99 (7,2:1).
     Odstępstwo od „akcent nie jako płaszczyzna” (DESIGN.md): pasek to przycisk przyklejony do dołu, jak „Wyślij projekt”.
     Audyt 07.10 pkt 4: trzecie, wąskie pole „na górę” (56 px, kwadrat jak kafel rogu) zamiast kafla pływającego nad tekstem.
     Wysokość bez zmian: 56 px + kreska 1 px u góry w kolorze paska. */
  .js .pasek-kontakt {
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 56px;
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 15;
    background: var(--akcent); color: #fff; border-top: 1px solid var(--akcent); padding-bottom: env(safe-area-inset-bottom, 0px);
    transform: translateY(101%); visibility: hidden;
    transition: transform .45s var(--ease), visibility 0s linear .45s;
  }
  .js .pasek-kontakt.widac { transform: none; visibility: visible; transition: transform .45s var(--ease); }
  .pasek-kontakt > a, .pasek-kontakt__gora {
    position: relative; display: flex; align-items: center; justify-content: center; gap: 8px; height: 56px; margin: 0; padding: 0 8px;
    background: none; border: 0; border-radius: 0; font: 500 15px/1.2 var(--kroj); color: #fff; text-decoration: none; white-space: nowrap;
    cursor: pointer; -webkit-tap-highlight-color: transparent; -webkit-appearance: none; appearance: none; transition: background-color .15s linear;
  }
  /* rozdzielacz: cienka jaśniejsza kreska, nie na całą wysokość (jak przerwa w linii wymiarowej) */
  .pasek-kontakt > * + *::before { content: ""; position: absolute; left: 0; top: 14px; bottom: 14px; width: 1px; background: rgba(255, 255, 255, .45); }
  .pasek-kontakt > a:active, .pasek-kontakt__gora:active { background: var(--akcent-mocny); }
  .pasek-kontakt > a:focus-visible, .pasek-kontakt__gora:focus-visible { outline: 2px solid #fff; outline-offset: -6px; }
  .pasek-kontakt b { font-weight: 500; font-variant-numeric: tabular-nums; }
  /* K. 07.10: ikony w bieli paska (słuchawka linią 1,5, logo WhatsAppa pełne), 18-20 px, optycznie na środku wiersza */
  .pasek-kontakt__ik { width: 20px; height: 20px; flex: none; }
  .pasek-kontakt__ik--tel { width: 18px; height: 18px; }
  /* „na górę”: ta sama strzałka co w rogu (20 px, linia 1,2), biała. Kreśli się, gdy pasek wjeżdża: trzon, potem grot
     (jak kafel rogu na komputerze); przy chowaniu znika od razu. */
  .pasek-kontakt__gora svg { width: 20px; height: 20px; flex: none; }
  .js .pasek-kontakt__gora path { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 200ms var(--ease); }
  .js .pasek-kontakt.widac .pasek-kontakt__gora path { stroke-dashoffset: 0; transition: stroke-dashoffset 450ms var(--ease) 300ms; }
  .js .pasek-kontakt.widac .pasek-kontakt__gora path + path { transition-delay: 560ms; }
  html.bez-ruchu .pasek-kontakt__gora path { transition: none !important; }
}
/* najwęższe telefony (320 px): „Wizytówka Google” z logo (154 px) nie mieściła się w kolumnie i łamała rytm wierszy */
@media (max-width: 340px) {
  .stopka { font-size: 14px; }
  .stopka__siatka { grid-template-columns: auto minmax(0, 1fr); }
}
@media print { .pasek-kontakt { display: none !important; } }

/* ══════════════════════════════════════════════════════════════════════════════
   RÓG: Facebook, wizytówka Google i „na górę” (K. 01.10, uwaga 8; pasek menu nie jest przyklejony).
   DESIGN.md → „Komponenty” → „Róg”. HTML: build.py stopka() (zaraz za .pasek-kontakt), zachowanie: js/app.js (blok „róg”).

   Komputer (> 820 px): dwa kafle papieru z ramą 1 px (jak komórki tabelki, wspólna kreska) w polu marginesu
   (--pole od prawej i od dołu). Po ok. jednym ekranie przewijania (klasa .z-gora) pod nimi odsłania się maską
   od dołu przycisk „na górę”, a kafle w tym samym czasie odjeżdżają w górę o kafel + odstęp — jeden ruch,
   jakby przycisk je wypychał (transform i clip-path, 650 ms, krzywa strony). Potem strzałka kreśli się jak linia
   wymiarowa: trzon w górę, grot. Powrót na górę = to samo wstecz.
   Telefon (≤ 820 px): rogu NIE MA (audyt 07.10, pkt 4: kafel „na górę” leżał na kolumnie tekstu i ucinał końce wierszy).
   „Na górę” jest trzecim polem paska kontaktu (30-stopka.css, js/61-pasek-gora.js), WhatsApp, FB i Google z logo w stopce
   (skill strona-docelowa, reguła 07.09: dolny róg telefonu nie jest dla sociali).
   .ustap (js): grupa gaśnie, gdy pod nią wjeżdża duży przycisk (.przycisk); na telefonie bez znaczenia (rogu nie ma).
   Warstwy: nad treścią (14), pod paskiem kontaktu (15), menu (20), intrem (100) i powiększalnikiem (200).
   ⛔ Cień, zaokrąglenia, kółka (poza kołem w samym logo Facebooka), podskakiwanie po najechaniu, wjazd „fade + w górę”.
   Kolory marek tylko w ich logach (K. 07.10).
   ══════════════════════════════════════════════════════════════════════════════ */
.rog {
  --rog-k: 44px;          /* bok kafla = pole dotyku */
  --rog-odstep: 8px;      /* między linkami a przyciskiem (rytm 8 px) */
  --rog-pasek: 0px;       /* o ile grupa podjeżdża razem z paskiem kontaktu (tylko telefon) */
  position: fixed; right: var(--pole); bottom: calc(var(--pole) + env(safe-area-inset-bottom, 0px)); z-index: 14;
  width: var(--rog-k); pointer-events: none;      /* klikają tylko kafle, nie puste miejsce obok */
  transition: transform .45s var(--ease), opacity .3s var(--ease), visibility 0s linear 0s;
}
.rog.ustap { opacity: 0; visibility: hidden; transition: transform .45s var(--ease), opacity .3s var(--ease), visibility 0s linear .3s; }

.rog__sociale { list-style: none; margin: 0; padding: 0; transition: transform 650ms var(--ease); }
.rog__sociale li + li { margin-top: -1px; }      /* wspólna kreska między kaflami, jak w tabelce */
.rog__kafel {
  position: relative; display: flex; align-items: center; justify-content: center;
  width: var(--rog-k); height: var(--rog-k); margin: 0; padding: 0;
  background: var(--arkusz); color: var(--tusz); border: 1px solid var(--tusz); border-radius: 0;
  font: inherit; text-decoration: none; cursor: pointer; pointer-events: auto; -webkit-appearance: none; appearance: none;
  transition: border-color .3s var(--ease), color .3s var(--ease);
}
.rog__kafel svg { width: 20px; height: 20px; flex: none; }
/* loga marek w ich kolorach (K. 07.10): 22 px w kaflu 44 px, czyli 11 px papieru dookoła, jak margines na arkuszu */
.rog__kafel svg.rog__marka { width: 22px; height: 22px; }
.rog__kafel:focus-visible { z-index: 2; }
/* najechanie = rama w akcencie (jak karta pasa); tylko tam, gdzie jest kursor — na dotyku nic nie zależy od :hover */
@media (hover: hover) {
  .rog__kafel:hover { z-index: 1; border-color: var(--akcent); color: var(--akcent); }
  .rog__kafel:hover svg.rog__marka { transform: scale(1.08); }
  .rog__kafel svg.rog__marka { transition: transform .3s var(--ease); }
}

/* „na górę”: bez JS ukryty (i tak nie wiadomo, czy przewinięto). Maska od dołu; jej stan końcowy jawny i o 6 px
   szerszy od kafla, bo inaczej przycięłaby obwódkę fokusu (2 px + 3 px odstępu). */
.rog__gora { display: none; }
.js .rog__gora {
  display: flex; position: absolute; right: 0; bottom: 0;
  visibility: hidden; clip-path: inset(100% -6px -6px -6px);
  transition: clip-path 650ms var(--ease), border-color .3s var(--ease), color .3s var(--ease), visibility 0s linear 650ms;
}
.js .rog.z-gora .rog__gora {
  visibility: visible; clip-path: inset(-6px -6px -6px -6px);
  transition: clip-path 650ms var(--ease), border-color .3s var(--ease), color .3s var(--ease);
}
.js .rog.z-gora .rog__sociale { transform: translateY(calc(-1 * (var(--rog-k) + var(--rog-odstep)))); }
/* strzałka kreśli się po odsłonięciu (pathLength = 1): trzon, potem grot; przy chowaniu znika od razu */
.js .rog__gora path { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 200ms var(--ease); }
.js .rog.z-gora .rog__gora path { stroke-dashoffset: 0; transition: stroke-dashoffset 450ms var(--ease) 300ms; }
.js .rog.z-gora .rog__gora path + path { transition-delay: 560ms; }

/* po kliknięciu „na górę” fokus stoi na <body> (tabindex -1, js): bez obwódki dookoła całej strony */
body[tabindex="-1"]:focus { outline: none; }

/* zrzuty automatu i „bez ruchu”: od razu stan końcowy */
html.bez-ruchu .rog, html.bez-ruchu .rog * { transition: none !important; }

/* telefon: bez rogu (do 07.10 był tu sam kafel „na górę” 16 px nad paskiem; zasłaniał tekst, przeszedł do paska) */
@media (max-width: 820px) {
  .rog { display: none; }
}

@media print { .rog { display: none !important; } }

/* ══════════════════════════════════════════════════════════════════════════════
   PODSTRONY (C2): wspólny nagłówek podstrony. build.py → naglowek(); każda podstrona ma własny css/4x-<nazwa>.css.
   Logika jak w hero głównej (C + Paro): okruchy z kreską w akcencie na miejscu „Błażej Kański”, duży cienki H1
   przy lewej osi, szary blok od lewej krawędzi ekranu, którego górna krawędź leży na linii bazowej 1. wiersza H1
   (pierwszy wiersz na bieli, reszta i lead na szarości). ⛔ Zdjęcie pod H1, wyśrodkowanie, wersaliki.
   ══════════════════════════════════════════════════════════════════════════════ */
.glowa-p {
  position: relative; display: grid;
  --h1-pt: clamp(36px, 4.6vw, 64px);
  --kto: clamp(16px, 1.3vw, 19px);
  --kto-mb: clamp(14px, 1.8vw, 26px);
  --f: clamp(2.55rem, 5.85vw, 5.5rem);
  grid-template-columns: var(--wciecie) minmax(0, max(58vw, 600px)) minmax(0, 1fr);
  padding-bottom: clamp(3rem, 6vw, 6rem);
}
.glowa-p > * { grid-column: 2; position: relative; z-index: 2; }
/* wiersze jawnie: blok ma grid-row 2/4, więc bez tego auto-układ omija zajęte komórki i spycha H1 i lead w dół */
.okruchy { grid-row: 1; }
.glowa-p__h1 { grid-row: 2; }
.glowa-p__lead { grid-row: 3; }
.okruchy { display: flex; align-items: center; flex-wrap: wrap; gap: 0 16px; margin: 0; padding: var(--h1-pt) 0 var(--kto-mb);
  font-size: var(--kto); line-height: 1.3; color: var(--tusz); }
.okruchy::before { content: ""; flex: none; width: 40px; height: 1px; background: var(--akcent); }
.okruchy ol { display: flex; flex-wrap: wrap; gap: 0 .45em; list-style: none; margin: 0; padding: 0; }
.okruchy li + li::before { content: "/"; margin-right: .45em; color: var(--tusz-2); }
.okruchy a { display: inline-block; min-height: 24px; color: var(--tusz); text-decoration: underline; text-decoration-color: var(--akcent); text-underline-offset: 4px; text-decoration-thickness: 1px; }
.okruchy a:hover { color: var(--akcent); }
.okruchy [aria-current] { color: var(--tusz-2); }
.glowa-p__h1 { margin: 0; padding-right: 48px; font-weight: 200; font-size: var(--f); line-height: 1.04; letter-spacing: -.032em; }
.glowa-p__h1 .linia { display: block; }
.glowa-p__blok {
  grid-column: 1 / 3; grid-row: 2 / 4; z-index: 0; background: var(--blok);
  margin-top: calc(var(--f) * .87);      /* linia bazowa 1. wiersza H1 (interlinia 1,04) */
}
.glowa-p__lead { padding: clamp(28px, 3vw, 44px) 56px clamp(36px, 4vw, 60px) 0; max-width: 40em; }
.glowa-p__lead p { margin: 0; font-size: clamp(17px, 1.36vw, 19.5px); line-height: 1.58; font-weight: 300; }
.glowa-p__lead p + p { margin-top: 1em; }

@media (max-width: 820px) {
  .glowa-p { grid-template-columns: var(--pole) minmax(0, 1fr) var(--pole); --f: clamp(2.3rem, 10.6vw, 3.6rem); padding-bottom: 3rem; }
  .glowa-p__h1 { padding-right: 0; }
  /* uwaga 11: szary blok na całą szerokość ekranu (było: od lewej krawędzi do 20 px przed prawą), lead na osi z obu stron */
  .glowa-p__blok { grid-column: 1 / -1; }
  .glowa-p__lead { padding: 24px 0 32px; }
}

/* Zakończenie podstrony treściowej (build.py → koniec_p()): kreska, przycisk do wyceny i kontakt przy lewej osi.
   ⛔ Hasło w stylu „Gotowy na…? Skontaktuj się” i wyśrodkowany pas (DESIGN.md, zakazy AI). */
.koniec-p { display: flex; flex-wrap: wrap; align-items: center; gap: 20px clamp(28px, 3vw, 48px);
  margin: 0 var(--pole) 0 var(--wciecie); padding: clamp(36px, 4vw, 56px) 0 var(--sekcja); border-top: 1px solid var(--linia); }
.koniec-p .kontakt { margin: 0; }
@media (max-width: 820px) {
  .koniec-p { margin: 0 var(--pole); padding-bottom: 4.5rem; flex-direction: column; align-items: stretch; }
}

/* ══════════════════════════════════════════════════════════════════════════════
   PODSTRONA REALIZACJE (C2 30.09, układ od nowa 01.10 po uwagach K.: „na początku zbyt duży chaos”,
   „tak samo przejścia pomiędzy realizacjami”). JEDNA oś (--wciecie) i JEDEN wzór dla każdej budowy:
   mały numer → H2 → zdanie → arkusz w szerokości treści (bez cięcia prawą krawędzią) z tabelką pod zdjęciem
   → „Więcej zdjęć” w tej samej szerokości → odstęp i kreska 1 px (--linia, jak nad zakończeniem podstrony).
   Szary blok tylko raz, w nagłówku podstrony. Domy 05-08: jedna sekcja, arkusze 2 × 2.
   Klocki z DESIGN.md: arkusz (papier, rama, linia wymiarowa, okno z odnośnikami, tabelka), odnośnik ze strzałką.
   ⛔ Zamiana stron lewo/prawo, szare bloki przy budowach, zaokrąglenia, cienie, wyśrodkowanie, wersaliki,
   kafle 3-4 w rzędzie, tekst w akcencie na bloku, filter na żywo.
   ══════════════════════════════════════════════════════════════════════════════ */

/* ---- linia odnośników do budów: pod leadem, na szarym bloku (zwykłe linki, kreska w akcencie jak w okruchach) ---- */
.spis-r { margin-top: clamp(22px, 2.4vw, 32px); }
.spis-r ul { display: flex; flex-wrap: wrap; gap: 2px clamp(18px, 1.9vw, 28px); list-style: none; margin: 0; padding: 0; }
.spis-r a { display: inline-block; padding: 4px 0; font-size: 16px; line-height: 1.35; color: var(--tusz);
  text-decoration: underline; text-decoration-color: var(--akcent); text-decoration-thickness: 1px; text-underline-offset: 5px; }
.spis-r a:hover { text-decoration-thickness: 2px; }   /* na bloku bez koloru akcentu w tekście (4,3:1) */

/* ---- kolumna treści: od osi do marginesu krawędzi, najwyżej 1560 px (na 1920 × 1080 panorama z nagłówkiem mieści się
   na ekranie; zdjęcia arkuszy mają srcset z szerokościami, więc duży ekran 1x bierze plik 2400 px) ---- */
.realizacje-p { position: relative; overflow: hidden; --kolumna: 1560px; }
.realizacje-p ~ .koniec-p { max-width: 1560px; }

/* ---- jedna budowa ---- */
.bud { position: relative; max-width: var(--kolumna); margin: 0 var(--pole) 0 var(--wciecie);
  padding: clamp(3rem, 5.5vw, 5.5rem) 0 clamp(3.5rem, 6vw, 6rem); border-top: 1px solid var(--linia); }
.realizacje-p > .bud:first-child { padding-top: 0; border-top: 0; }

.bud__nr { display: flex; align-items: baseline; gap: 8px; margin: 0; font-size: 15px; line-height: 1.3; font-variant-numeric: tabular-nums; }
.bud__nr b { font-weight: 500; }
.bud__nr span { color: var(--tusz-2); }
/* width: fit-content — pudło nagłówka kończy się na tekście, a nie przy prawym marginesie: inaczej bramka „zaslona_fixed”
   brała róg (31-rog.css) za zasłonę „Nowy Tomyśl” na 1. ekranie 1440 × 900, choć tekst kończy się ok. 1000 px przed nim */
.bud__h { margin: 10px 0 0; width: fit-content; max-width: 100%; font-weight: 200; font-size: clamp(2.2rem, 3.6vw, 3.4rem); line-height: 1.04; letter-spacing: -.032em; }
.bud__opis { margin: clamp(12px, 1.3vw, 18px) 0 0; font-size: clamp(17px, 1.36vw, 19.5px); line-height: 1.5; font-weight: 300; max-width: 34em; }
.bud__dalej { margin: 12px 0 0; font-size: 16px; line-height: 1.6; max-width: 36em; }
.bud__link { margin-top: 20px; }

/* arkusz: papier, rama, linia wymiarowa, okno (proporcja z build: --okno), tabelka przez całą szerokość papieru */
.bud__ark { --lw: var(--lewy); position: relative; display: flex; flex-direction: column; margin: clamp(24px, 2.8vw, 40px) 0 0;
  padding: 16px 16px 0 var(--lw); background: var(--arkusz); }
.bud__ark--bez-wymiaru { --lw: 16px; }
.bud__ark .okno { width: 100%; aspect-ratio: var(--okno, 1.8); flex: none; }
/* <picture> z mniejszym plikiem na telefon (podstrony/realizacje.py _okno, dziś stodoła czarna): bez własnego pudełka,
   obraz układa się dokładnie jak `.skala > img` (css/10) */
.skala > picture { display: contents; }
.skala > picture > img { width: 100%; height: 100%; object-fit: cover; }
.bud__tabelka { display: grid; grid-template-columns: var(--kolumny, auto); margin: 16px -16px 0 calc(-1 * var(--lw)); padding-right: 0; }
.bud__tabelka > div { border-left: 1px solid var(--kreska); }
.bud__tabelka > .t-l { border-left: 0; padding-left: 18px; }
.bud__tabelka > .t-r2 { border-top: 1px solid var(--kreska); }

/* domy 05-08: cztery arkusze w siatce 2 × 2, każdy z kotwicą (karta pasa prowadzi do #dom-N) */
.domy__siatka { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(24px, 3vw, 40px); margin-top: clamp(24px, 2.8vw, 40px); }
.dom { min-width: 0; scroll-margin-top: 28px; }
.dom .bud__ark { margin-top: 0; }

/* „Więcej zdjęć”: jeden rząd miniatur o równej wysokości, dokładnie na szerokość arkusza (flex-grow = proporcja kadru),
   klik = powiększalnik rdzenia z wersją ok. 2000 px. Najechanie: rama w akcencie (jak karta pasa). */
.bud__foto { margin-top: clamp(20px, 2.2vw, 28px); }
.bud__foto-h { margin: 0 0 10px; font-size: 14px; line-height: 1.3; color: var(--tusz-2); }
.bud__zdjecia { display: flex; gap: 10px; list-style: none; margin: 0; padding: 0; }
.bud__zdjecia > li { flex: var(--ar, 1.5) 1 0%; min-width: 0; }
.bud__min { position: relative; display: block; width: 100%; margin: 0; padding: 0; border: 0; background: #E3DFD8; cursor: zoom-in; }
.bud__min img { width: 100%; height: auto; }
.bud__min::after { content: ""; position: absolute; inset: 0; border: 1px solid transparent; transition: border-color .3s var(--ease); pointer-events: none; }
.bud__min:hover::after { border-color: var(--akcent); }
.bud__min:focus-visible { outline: 2px solid var(--akcent); outline-offset: 3px; }

/* ── kreślenie arkusza (jak plansze na głównej): papier i linie tabelki wchodzą razem z ramą ── */
html.js:not(.bez-ruchu) .bud__ark { transition: background-color 700ms var(--ease) 100ms; }
html.js:not(.bez-ruchu) .bud__ark:not(.jest) { background-color: transparent; }
html.js:not(.bez-ruchu) .bud__ark .tabelka, html.js:not(.bez-ruchu) .bud__ark .tabelka > div { transition: border-color 700ms var(--ease) calc(var(--d-tab) - 250ms), background-color 700ms var(--ease) 100ms; }
html.js:not(.bez-ruchu) .bud__ark:not(.jest) .tabelka, html.js:not(.bez-ruchu) .bud__ark:not(.jest) .tabelka > div { border-color: transparent; background-color: transparent; }
html.js:not(.bez-ruchu) .bud__ark .skala { transition: transform calc(var(--t-okno) + 600ms) var(--ease) var(--d-okno); }
html.js:not(.bez-ruchu) .bud__ark:not(.jest) .skala { transform: scale(1.08); }

/* ── POWIĘKSZALNIK (rdzeń: .lb, .lb-cap, .lb-x, .lb-p, .lb-n; [hidden] przełącza skrypt) ──
   Warstwa na chwilę jak menu, ale jasna (tło strony, bez prześwitu): zdjęcie w całości, podpis pod jego lewą krawędzią
   z kreską w akcencie, „Zamknij” jak przycisk menu, strzałki w ramce 1 px na papierze. */
.lb { position: fixed; inset: 0; z-index: 200; display: grid; grid-template-columns: 76px minmax(0, 1fr) 76px; grid-template-rows: 76px minmax(0, 1fr) 28px;
  padding: 0 var(--pole); background: var(--tlo); }
.lb[hidden] { display: none; }
.lb__fig { grid-column: 2; grid-row: 2; align-self: center; justify-self: center; min-width: 0; max-width: 100%; margin: 0; display: grid; justify-items: start; }
.lb__fig img { width: auto; height: auto; max-width: 100%; max-height: calc(100vh - 76px - 28px - 64px); background: #E3DFD8; }
.lb-cap { width: 0; min-width: 100%; margin: 16px 0 0; display: flex; align-items: center; gap: 14px; font-size: 15px; line-height: 1.4; color: var(--tusz); }
.lb-cap::before { content: ""; flex: none; width: 28px; height: 1px; background: var(--akcent); }
.lb-cap:empty { visibility: hidden; }
.lb button { font: 500 15px/1 var(--kroj); color: var(--tusz); background: none; border: 0; cursor: pointer; }
.lb-x { grid-column: 2 / 4; grid-row: 1; justify-self: end; align-self: center; display: inline-flex; align-items: center; gap: 10px; height: 44px; padding: 0 2px 0 12px; }
.lb-x .kreski { display: grid; gap: 6px; width: 22px; }
.lb-x .kreski i { display: block; height: 1px; background: currentColor; }
.lb-x .kreski i:first-child { transform: translateY(3.5px) rotate(45deg); }
.lb-x .kreski i:last-child { transform: translateY(-3.5px) rotate(-45deg); }
.lb .lb-p, .lb .lb-n { grid-row: 2; align-self: center; width: 52px; height: 52px; display: grid; place-items: center; background: var(--arkusz); box-shadow: inset 0 0 0 1px var(--tusz); transition: box-shadow .3s var(--ease), color .3s var(--ease); }
.lb-p { grid-column: 1; justify-self: start; }
.lb-n { grid-column: 3; justify-self: end; }
.lb-p svg, .lb-n svg { width: 22px; height: 22px; }
.lb-p svg { transform: rotate(180deg); }
/* odbiór 07.10: najechanie tylko pod myszą; na dotyku :hover „przykleja się” do stukniętej strzałki (zostawała niebieska) */
@media (hover: hover) {
  .lb .lb-p:hover, .lb .lb-n:hover, .lb .lb-x:hover { color: var(--akcent); }
  .lb .lb-p:hover, .lb .lb-n:hover { box-shadow: inset 0 0 0 1px var(--akcent); }
}
.lb :focus-visible { outline: 2px solid var(--akcent); outline-offset: 3px; }
/* licznik „03 / 26” między strzałkami: tylko telefon (js/60-powiekszalnik.js wstawia go, css niżej pokazuje do 820 px),
   zapis jak numer budowy „01 / 09” (Hanken 15 px, numer 500, „/ 26” tekst wtórny) */
.lb__licznik { display: none; align-items: center; gap: 8px; font-size: 15px; line-height: 1; font-variant-numeric: tabular-nums; color: var(--tusz); }
.lb__licznik b { font-weight: 500; }
.lb__licznik span { color: var(--tusz-2); }
.lb__licznik[hidden] { display: none !important; }

/* ============ TELEFON: ta sama kolejność w jednej kolumnie, marginesy --pole, galerie palcem ============ */
@media (max-width: 820px) {
  .spis-r a { padding: 6px 0; }

  .bud { margin: 0 var(--pole); padding: 3rem 0 3.5rem; }
  .bud__h { margin-top: 8px; font-size: 2.3rem; }
  .bud__ark { margin-top: 22px; padding: 10px 10px 0 var(--lw); }
  .bud__ark--bez-wymiaru { --lw: 10px; }
  /* uwaga 12: panoramy 1,6:1 (było 3:2 = 69 % szerokości pliku) → 74 %, kadr punktem --fx-m; Boruja Nowa (1,5:1) 94 % wysokości */
  .bud__ark .okno { aspect-ratio: 1.6; }
  .okno .skala { --px: var(--fx-m, var(--fx, .5)); --py: var(--fy-m, var(--fy, .5)); }
  .bud__tabelka { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); margin: 10px -10px 0 calc(-1 * var(--lw)); }
  .bud__tabelka > div, .bud__tabelka > .t-l { grid-column: auto !important; border-left: 0; border-top: 1px solid var(--kreska); padding-left: 12px; }
  .bud__tabelka > div:nth-child(-n+2) { border-top: 0; }
  .bud__tabelka > div:nth-child(even) { border-left: 1px solid var(--kreska); }
  .bud__tabelka > div:only-child, .bud__tabelka > div:last-child:nth-child(odd) { grid-column: 1 / -1 !important; }
  .bud__tabelka dd { white-space: normal; }

  /* audyt 07.10, pkt 8: domy 05-08 w siatce 2 × 2 jak na komputerze, tylko w małych arkuszach (było: cztery pełne arkusze
     jeden pod drugim, każdy z tą samą tabelką, ok. 4 ekrany; jest: jeden ekran). Okno kwadratowe dla wszystkich (rząd równy;
     poziome domy 75 % szerokości, stodoła czarna 75 % wysokości jak dotąd), w tabelce tylko „Arkusz NN / 09”: „Obiekt: dom
     jednorodzinny” mówi już nagłówek sekcji, a w połowie szerokości łamał się na trzy wiersze. Dotknięcie arkusza otwiera
     zdjęcie w powiększalniku (js/60-powiekszalnik.js, [data-zoom-tel]). Kotwice #dom-1…4 bez zmian; przy wejściu z karty
     pasa nad arkuszem zostaje nagłówek sekcji (pierwszy rząd) albo dół pierwszego rzędu, a wskazany dom ma ramę w akcencie. */
  .domy__siatka { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 22px; }
  .dom { scroll-margin-top: 112px; }
  .bud__ark--dom { --lw: 8px; padding: 8px 8px 0; margin-top: 0; cursor: zoom-in; }
  .bud__ark--dom .okno { aspect-ratio: 1; }
  .bud__ark--dom .bud__tabelka { grid-template-columns: minmax(0, 1fr); margin: 8px -8px 0; }
  .bud__ark--dom .bud__tabelka > div:first-child { display: none; }
  .bud__ark--dom .bud__tabelka > .nr { position: relative; grid-column: 1 / -1 !important; border: 0; padding-left: 10px; }
  /* znak „powiększ” (dwie strzałki w rogi, kreska 1,2 jak strzałki strony, tekst wtórny): arkusz domu jest przyciskiem */
  .bud__ark--dom[role="button"] .bud__tabelka > .nr::after { content: ""; position: absolute; right: 10px; top: 50%; width: 18px; height: 18px; margin-top: -9px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%234A4F56' stroke-width='1.2'%3E%3Cpath d='M11.5 2.5h6v6M17.5 2.5l-6 6M8.5 17.5h-6v-6M2.5 17.5l6-6'/%3E%3C/svg%3E") center / 18px no-repeat; }
  .bud__ark--dom[role="button"]:focus-visible { outline: 2px solid var(--akcent); outline-offset: 3px; }
  .dom:target .bud__ark--dom .rama rect { stroke: var(--akcent); }

  /* galeria: pas przesuwany palcem do prawej krawędzi ekranu (jak pas realizacji na głównej) */
  .bud__zdjecia { flex-wrap: nowrap; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x proximity;
    margin-right: calc(-1 * var(--pole)); padding-right: var(--pole); scrollbar-width: thin; scrollbar-color: var(--linia) transparent; }
  .bud__zdjecia > li { flex: none; scroll-snap-align: start; }
  .bud__min { width: auto; height: 116px; }
  .bud__min img { width: auto; height: 100%; max-width: none; }

  /* ── POWIĘKSZALNIK (audyt 07.10, pkt 9) ──
     Zdjęcie od krawędzi do krawędzi ekranu (było: między marginesami, panorama 350 × 162 px na ok. 60 % pustego papieru),
     pod nim podpis, a tuż pod podpisem strzałki z licznikiem „03 / 26” pośrodku (były ok. 300 px niżej, przy dolnej
     krawędzi). Grupa zdjęcie + podpis + strzałki stoi dołem na stałej wysokości (26 % ekranu nad dolną krawędzią;
     panorama wypada na środku, 4:3 trochę wyżej), więc strzałki nie skaczą między panoramą a pionowym zdjęciem
     (Wolsztyn, domy) i zostają pod kciukiem; zdjęcie rośnie w górę, „Zamknij” w prawym górnym rogu. Pionowe zdjęcie
     najwyżej do wysokości, przy której grupa mieści się na ekranie (svh: przy widocznych paskach Safari).
     Przesuwanie palcem i wjazd zdjęcia: js/60-powiekszalnik.js. */
  .lb { grid-template-columns: var(--pole) 52px minmax(0, 1fr) 52px var(--pole);
    grid-template-rows: minmax(64px, 1fr) auto auto 26vh; grid-template-rows: minmax(64px, 1fr) auto auto 26svh;
    padding: 0 0 env(safe-area-inset-bottom, 0px); overscroll-behavior: contain; }
  .lb__fig { grid-column: 1 / -1; grid-row: 2; justify-self: stretch; justify-items: center; }
  .lb__fig img { max-height: calc(74vh - 206px); max-height: calc(74svh - 206px); }
  .lb-cap { justify-self: stretch; width: auto; min-width: 0; margin: 14px var(--pole) 0; font-size: 14px; }
  .lb-x { grid-column: 3 / 5; grid-row: 1; align-self: start; margin-top: 10px; }
  .lb .lb-p, .lb .lb-n { grid-row: 3; align-self: start; width: 52px; height: 52px; margin-top: 18px; }
  .lb-p { grid-column: 2; }
  .lb-n { grid-column: 4; }
  .lb__licznik { display: flex; grid-column: 3; grid-row: 3; align-self: start; justify-self: center; height: 52px; margin: 18px 0 0; }
}

/* ══════════════════════════════════════════════════════════════════════════════
   PODSTRONA „DZIENNIK BUDOWY” (C2, podstrony/dziennik.py): cały dziennik z Wolsztyna, 7 wpisów.
   Klocki z głównej (20-glowna.css): .dziennik__okladka, .dziennik__glowa, .dziennik__blok, .dziennik__tabelka,
   .wpisy (oś z postępem, js/app.js), .wpis, .wpis--bok. Tu tylko odmiany, wszystkie pod .dziennik--cala,
   żeby nie ruszyć sekcji na głównej:
   · .dz-kadr — na szarym bloku głowy data okładki „18.10” (Hanken 200 + jedynka jak w wpisach) i jej stan;
   · .wpis--szeroki — 17.09, ostatnie zdjęcie listy, najszersze i ucięte prawą krawędzią ekranu (jak arkusze);
   · .wpis--bez-zdjecia — 18.10: kadr z tego dnia jest okładką, więc na liście tylko słowa i link w górę.
   Cięcie prawą krawędzią robi overflow sekcji, nie body (DESIGN.md „Układ i siatka”).
   ══════════════════════════════════════════════════════════════════════════════ */
.dziennik--cala { overflow: hidden; --zakladka: clamp(220px, 33vh, 300px); }
/* zakładka mniejsza niż na głównej (tam nad tabelką stoi wysokie H2): szary blok ma wyjść pod zdjęcie, a nie kończyć się z nim równo */

/* głowa na okładce: data + stan zamiast H2 „Dziennik budowy” (ten stoi w H1 nagłówka podstrony) */
.dz-kadr { display: flex; align-items: flex-end; gap: 0 clamp(18px, 1.8vw, 28px); }
.dz-kadr .wpis__data { flex: none; }
.dz-kadr__opis { display: grid; margin: 0 0 .2em; }
.dz-kadr__opis .wpis__rok { margin: 0; }
.dz-kadr__stan { margin-top: 4px; font-size: clamp(20px, 1.7vw, 24px); font-weight: 300; line-height: 1.25; letter-spacing: -.012em; }
.dziennik--cala .dziennik__tabelka { margin-top: clamp(22px, 2.4vw, 32px); }

/* 17.09: zdjęcie od kolumny treści do prawej krawędzi ekranu i dalej o --ciecie (ucięte), tekst wraca na margines */
.wpis--szeroki .wpis__tresc { padding-right: 0; margin-right: calc(-1 * var(--ciecie)); }
.wpis--szeroki .wpis__foto { max-width: none; }
.wpis--szeroki .wpis__tekst { padding-right: calc(var(--pole) + var(--ciecie)); }

/* 18.10: bez zdjęcia; etap stoi przy dacie, link „Zobacz kadr z tego dnia ↑” prowadzi do okładki */
.wpis--bez-zdjecia { padding-bottom: clamp(3rem, 5vw, 4.5rem); }
.wpis--bez-zdjecia .wpis__tresc { padding-top: clamp(6px, .9vw, 14px); }
.wpis--bez-zdjecia .wpis__etap { margin-top: 0; }
.wpis__wroc { margin: 22px 0 0; }
.dziennik--cala .dziennik__wiecej { margin-bottom: 0; }

@media (max-width: 820px) {
  .dziennik--cala { --zakladka: 0px; }   /* jak na głównej: okładka 1,8:1 cała, głowa pod nią (uwaga 12; reguła wyżej nadpisałaby ją bez tego) */
  /* audyt 07.10, pkt 21: okładka dosunięta do szarego bloku nagłówka (było: 48 px papieru = dolny odstęp .glowa-p, pasek
     między dwiema płaszczyznami na całą szerokość wyglądał jak szpara). Blok nagłówka → zdjęcie → blok głowy dziennika
     tworzą jedną płaszczyznę, jak okładka z podpisem. */
  .glowa-p + .dziennik--cala { margin-top: -3rem; }
  .dz-kadr { gap: 0 14px; }
  .dz-kadr .wpis__data { font-size: 3rem; }
  .dz-kadr__stan { font-size: 19px; }
  .dziennik--cala .dziennik__tabelka { margin-top: 18px; }
  /* telefon (uwaga 11): zdjęcie 17.09 jak pozostałe wpisy, między osią czasu a marginesem (było: ucięte prawą krawędzią,
     jedyny wpis dosunięty do krawędzi). Na komputerze zostaje najszersze i ucięte. */
  .wpis--szeroki .wpis__tresc { margin-right: 0; }
  .wpis--szeroki .wpis__tekst { padding-right: 0; }
  .wpis--bez-zdjecia .wpis__tresc { padding-top: 0; }
}

/* ══════════════════════════════════════════════════════════════════════════════
   PODSTRONA „O FIRMIE” (C2, podstrony/o_firmie.py). Rozwinięcie „Kto buduje” z głównej
   w tym samym języku klocków: szary blok od lewej krawędzi, arkusz z ramą (plansza),
   tabelka rysunkowa, linia wymiarowa, odnośnik, lista z włosowymi liniami.
   Klasy .fi-ark, .fi-lista, .fi-h3, .fi-h-maly, .fi-linki są też na „Dla deweloperów” (44).
   ⛔ Wyśrodkowanie, kafle w rzędzie, zaokrąglenia, cienie, wersaliki (DESIGN.md).
   ══════════════════════════════════════════════════════════════════════════════ */

/* ---- arkusz podstrony: papier, rama, okno zdjęcia, tabelka pod spodem (jak w hero) ---- */
.plansza.fi-ark { margin: 0; padding: 16px 16px 0; }
.plansza.fi-ark--wymiar { padding-left: var(--lewy); }
.fi-ark .okno { aspect-ratio: var(--okno-ar, 1.6); }
.plansza.fi-ark .tabelka { margin: 16px -16px 0; padding-right: 0; }
.plansza.fi-ark--wymiar .tabelka { margin-left: calc(-1 * var(--lewy)); }
.plansza.fi-ark .tabelka > div:first-child { padding-left: 18px; }
/* ucięty prawą krawędzią ekranu (sekcja ma overflow: hidden), komórki kończą się przed cięciem */
.plansza.fi-ark--tnij { margin-right: calc(-1 * var(--ciecie)); padding-right: 0; }
.plansza.fi-ark--tnij .tabelka { margin-right: 0; padding-right: var(--ciecie); }

/* ---- lista „etykieta | treść” z włosowymi liniami (jak „Kto buduje” na głównej) ---- */
.fi-lista { margin: 0; border-bottom: 1px solid var(--linia); }
.fi-lista > div { display: grid; grid-template-columns: clamp(120px, 11vw, 168px) minmax(0, 1fr); column-gap: 20px; padding: 16px 0 18px; border-top: 1px solid var(--linia); }
.fi-lista dt { font-size: 15px; line-height: 1.5; color: var(--tusz-2); padding-top: 2px; }
.fi-lista dd { margin: 0; font-size: 17px; line-height: 1.5; }
.fi-lista dd p { margin: 0; }
.fi-lista dd p + p { margin-top: 8px; }
.fi-h3 { margin: 0 0 16px; font-size: clamp(20px, 1.7vw, 24px); font-weight: 300; line-height: 1.25; letter-spacing: -.012em; }
.fi-h-maly { margin: 0; font-size: clamp(18px, 1.55vw, 22px); font-weight: 300; line-height: 1.3; letter-spacing: -.01em; }
.fi-linki { display: flex; flex-wrap: wrap; gap: 16px 36px; margin: 30px 0 0; }
.fi-linki .pas__wiecej { margin: 0; }

/* ============ UPRAWNIENIA I UBEZPIECZENIE: jak „Cena” na głównej ============
   Szary blok od lewej, górna krawędź na linii bazowej 1. wiersza H2, wchodzi pod arkusz z busem;
   tabelka arkusza = dane rejestrowe firmy (jak tabelka rysunkowa z danymi wykonawcy). */
.fi-upr {
  position: relative; overflow: hidden; display: grid;
  grid-template-columns: var(--wciecie) minmax(0, 1fr) clamp(340px, 40vw, 620px);
  grid-template-rows: auto 1fr;
  grid-template-areas:
    ".  h2    ark"
    ".  lewa  ark";
  padding: clamp(1.5rem, 4vw, 4.5rem) 0 var(--sekcja);    /* więcej bieli między szarym blokiem nagłówka a tym */
}
.fi-upr__h2 { grid-area: h2; position: relative; z-index: 2; padding-right: 32px; }
.fi-upr__blok {
  grid-column: 1 / 3; grid-row: 1 / 3; z-index: 0; background: var(--blok);
  margin-top: calc(var(--f2) * .85);                   /* linia bazowa 1. wiersza (interlinia 1) */
  margin-right: calc(-1 * clamp(40px, 7vw, 110px));    /* wchodzi pod arkusz */
}
.fi-upr__lewa { grid-area: lewa; position: relative; z-index: 2; padding: clamp(28px, 3vw, 44px) 56px clamp(44px, 5vw, 72px) 0; max-width: 820px; }
.fi-upr__lista { border-bottom-color: var(--linia); }
.fi-upr__lista dd { font-size: clamp(17px, 1.3vw, 19px); line-height: 1.5; }
.fi-upr__ark { grid-area: ark; align-self: end; position: relative; z-index: 3; --okno-ar: 1.3; }
/* Rzetelna Firma (K. 01.10, uwaga 14): miniatura certyfikatu w wierszu „Rzetelność płatnicza”, mała (czerwień spoza palety)
   i bez ramy arkusza; klik = powiększalnik rdzenia (.lb, css/41-realizacje.css). Najechanie jak miniatury realizacji. */
.fi-cert { display: inline-flex; flex-direction: column; align-items: flex-start; gap: 12px; margin: 6px 0 0; padding: 0;
  background: none; border: 0; font: inherit; color: inherit; text-align: left; cursor: zoom-in; }
.fi-cert img { width: 200px; height: auto; outline: 1px solid transparent; outline-offset: 0; transition: outline-color .3s var(--ease); }
.fi-cert:hover img { outline-color: var(--akcent); }
/* podkreślenie jak linki tekstowe (kreska 1 px w akcencie), ale przez text-decoration: to <span> w przycisku, a nie <a>,
   więc kreska jako border czytała się w bramce wyglądu jak linia oddzielająca bez światła */
.fi-cert__opis { font-size: 15px; line-height: 1.3; text-decoration: underline 1px var(--akcent); text-underline-offset: 6px; }
.fi-cert:hover .fi-cert__opis { text-decoration-thickness: 2px; }
.fi-cert:focus-visible { outline: 2px solid var(--akcent); outline-offset: 4px; }
.fi-upr__ark .tabelka { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.fi-upr__ark .tabelka > div { border-left: 0; border-top: 1px solid var(--kreska); padding-left: 18px; }
.fi-upr__ark .tabelka > div:first-child { border-top: 0; }
.fi-upr__ark .tabelka > div:last-child { border-left: 1px solid var(--kreska); padding-right: 16px; }
.fi-upr__ark .tabelka > .t-cala { grid-column: 1 / -1; }
.fi-upr__ark .tabelka dd { white-space: normal; }

/* ============ SPRZĘT: arkusz przy osi, obok zdanie o sprzęcie i ikony ============ */
.fi-sprzet { position: relative; overflow: hidden; padding: 0 0 var(--sekcja); }
.fi-sprzet__glowa { padding: 0 var(--pole) 0 var(--wciecie); }
.fi-sprzet__rzad {
  display: grid; grid-template-columns: var(--wciecie) minmax(0, 1.5fr) minmax(0, 1fr);
  align-items: end; margin-top: clamp(32px, 4vw, 56px);
}
.fi-sprzet__ark { grid-column: 2; --okno-ar: 2.1645; }
.fi-sprzet__tekst { grid-column: 3; padding: 0 var(--pole) 8px clamp(32px, 4.4vw, 72px); }
.fi-sprzet__zdanie { margin: 0; max-width: 15em; font-size: clamp(20px, 1.9vw, 27px); font-weight: 300; line-height: 1.35; letter-spacing: -.012em; }
.fi-ikony { display: flex; gap: clamp(16px, 2vw, 28px); margin-top: clamp(22px, 2.6vw, 34px); }
.fi-ikony img { width: clamp(72px, 6.6vw, 100px); height: auto; }

/* ============ CO BUDUJEMY I JAK WYCENIAMY: dwie listy na bieli (asymetrycznie) ============ */
.fi-zakres { position: relative; padding: 0 0 var(--sekcja); }
.fi-zakres__glowa { padding: 0 var(--pole) 0 var(--wciecie); }
.fi-zakres__kolumny {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); column-gap: clamp(32px, 5vw, 88px);
  align-items: start; margin: clamp(36px, 4.4vw, 64px) var(--pole) 0 var(--wciecie);
}

/* ============ OPINIE W GOOGLE (jak ocena na głównej) + MARKI (statycznie, ≤ 6, w kolorze) ============ */
.fi-opinie { position: relative; padding: 0 0 var(--sekcja); }
.fi-ocena {
  display: grid; grid-template-columns: auto auto minmax(0, 1fr); column-gap: clamp(20px, 2.4vw, 36px);
  align-items: end; padding: 0 var(--pole) 0 var(--wciecie);
}
.fi-ocena > .fi-h-maly { grid-column: 1 / -1; margin-bottom: clamp(22px, 2.6vw, 36px); }
.fi-ocena__wynik { display: contents; text-decoration: none; }
.fi-ocena__wynik:hover .ocena__ile { text-decoration-thickness: 2px; }
.fi-cytat { padding: 0 0 0 clamp(24px, 4vw, 72px); }
/* nagłówek nad rzędem (w rzędzie obok nagłówka 6 znaków w skali ×1,25 łamało się na 4 + 2) */
.fi-marki { margin-top: clamp(4rem, 7vw, 7rem); padding: 0 var(--pole) 0 var(--wciecie); }
.fi-marki__lista { display: flex; flex-wrap: wrap; align-items: center; gap: 24px clamp(36px, 4.4vw, 68px); list-style: none; margin: clamp(18px, 2vw, 28px) 0 0; padding: 0; }
.fi-marki__lista li { display: flex; align-items: center; min-height: 72px; }
.fi-marki__lista img { height: calc(var(--h) * 1.25); width: auto; max-width: none; }

/* ============ TABLET ============ */
@media (max-width: 1080px) {
  .fi-lista > div { grid-template-columns: minmax(0, 1fr); row-gap: 4px; }
  .fi-sprzet__rzad { grid-template-columns: var(--wciecie) minmax(0, 1.25fr) minmax(0, 1fr); }
}

/* ============ TELEFON: jedna kolumna, marginesy --pole, arkusze ucięte prawą krawędzią ============ */
@media (max-width: 820px) {
  /* tabelka arkusza w dwóch kolumnach (jak tabelka dziennika na głównej); arkusz z busem ma własny układ */
  .plansza.fi-ark:not(.fi-upr__ark) .tabelka { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .plansza.fi-ark:not(.fi-upr__ark) .tabelka > div { border-left: 0; border-top: 1px solid var(--kreska); padding-left: 12px; }
  .plansza.fi-ark:not(.fi-upr__ark) .tabelka > div:nth-child(-n+2) { border-top: 0; }
  .plansza.fi-ark:not(.fi-upr__ark) .tabelka > div:nth-child(even) { border-left: 1px solid var(--kreska); }
  .plansza.fi-ark .tabelka dd { white-space: normal; }

  /* uwaga 11: arkusze na telefonie między marginesami (było: ucięte prawą krawędzią), szary blok na całą szerokość */
  .plansza.fi-ark--tnij { margin-right: 0; padding-right: 16px; }
  .plansza.fi-ark--tnij .tabelka { margin-right: -16px; padding-right: 0; }

  .fi-upr {
    grid-template-columns: var(--pole) minmax(0, 1fr) var(--pole);
    grid-template-rows: none;
    grid-template-areas:
      ".  h2    .  "
      ".  lewa  .  "
      ".  ark   .  ";
    padding: 1rem 0 4.5rem;
  }
  .fi-upr__blok { grid-column: 1 / -1; grid-row: 1 / 3; margin-right: 0; }
  .fi-upr__lewa { padding: 24px 0 36px; }
  /* uwaga 12: okno 1,6:1 (było 1,25:1 = 58 % szerokości panoramy) → 74 %. Audyt 07.10, pkt 11: 1,7:1 (78 %) i punkt --fx-m
     .1 (o_firmie.py): x 2-81 % pliku = cały bus z logo (w pliku 0-33 %) i ściany z silki do prawego filara (było .3: x 8-82 %,
     tył busa ucięty krawędzią okna, logo przy samej krawędzi) */
  .fi-upr__ark { margin-top: 36px; --okno-ar: 1.7; }
  .fi-upr__lista dd { font-size: 17px; }
  .fi-upr__h2 { padding-right: 0; }
  /* audyt 07.10, pkt 15: wszystkie H2 tej strony w jednym rozmiarze (było: „Uprawnienia i ubezpieczenie.” 42 px, „Sprzęt”
     i „Zakres i wycena” 52,8 px). „ubezpieczenie.” nie mieści się w 3,3 rem, więc cała strona dostaje rozmiar, w którym się
     mieści (≈ 42 px na 390, 39 px na 360). Przez --f2, bo od niego liczy się też górna krawędź szarego bloku (linia bazowa). */
  .fi-upr, .fi-sprzet, .fi-zakres { --f2: clamp(2.3rem, 10.8vw, 3.3rem); }

  .fi-sprzet { padding-bottom: 4.5rem; }
  .fi-sprzet__glowa, .fi-zakres__glowa { padding: 0 var(--pole); }
  .fi-sprzet__rzad { grid-template-columns: var(--pole) minmax(0, 1fr) var(--pole); margin-top: 28px; }
  /* okno 1,6:1 (było 1,35:1 = 62 %) → 74 %: ściana z odnośnikiem „keramzyt” i cała ładowarka */
  .fi-sprzet__ark { grid-column: 2; --okno-ar: 1.6; }
  .fi-sprzet__tekst { grid-column: 2; padding: 30px 0 0; }
  .fi-sprzet__zdanie { font-size: 21px; }

  .fi-zakres { padding-bottom: 4.5rem; }
  .fi-zakres__kolumny { grid-template-columns: minmax(0, 1fr); row-gap: 48px; margin: 32px var(--pole) 0; }

  .fi-opinie { padding-bottom: 4.5rem; }
  .fi-ocena { grid-template-columns: auto minmax(0, 1fr); column-gap: 16px; align-items: center; padding: 0 var(--pole); }
  .fi-ocena .ocena__liczba { font-size: 4.4rem; }
  .fi-cytat { grid-column: 1 / -1; padding: 0; margin-top: 14px; }
  .fi-marki { margin-top: 3.5rem; padding: 0 var(--pole); }
  /* audyt 07.10, pkt 14: stała siatka 2 × 3 zamiast zawijanego rzędu (druga kolumna zaczynała się na 173/178/201 px).
     Komórki równej szerokości i wysokości 64 px, logo na środku wiersza w pionie, przy lewej krawędzi komórki, więc obie
     kolumny mają jedną oś (lewa = oś tekstu). Szerokie znaki (Manitou, Czamaninek) najwyżej na szerokość komórki
     (object-fit, bez zniekształcenia). --wl = pusty pas po lewej w pliku znaku (Porotherm: 9,4 % szerokości), ściągany
     ujemnym marginesem, żeby litera stała na osi, a nie 12 px za nią. Bez linii między komórkami (K. 30.09: „wywalić paski”). */
  .fi-marki__lista { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 16px; }
  .fi-marki__lista li { min-width: 0; min-height: 0; height: 64px; }
  .fi-marki__lista img { --hm: calc(var(--h) * 1.05); height: var(--hm); max-width: calc(100% + var(--wl, 0) * var(--hm) * var(--ar, 1));
    object-fit: contain; object-position: left center; margin-left: calc(-1 * var(--wl, 0) * var(--hm) * var(--ar, 1)); }
}

/* ══════════════════════════════════════════════════════════════════════════════
   PODSTRONA „DLA DEWELOPERÓW” (C2, podstrony/dla_deweloperow.py).
   Klocki z „O firmie” (css/43: .fi-ark, .fi-lista, .fi-linki) + układy jak na głównej:
   Pniewy jak hero (szary blok od lewej, arkusz ucięty prawą krawędzią), kto buduje jak „Kto buduje”.
   ⛔ Wyśrodkowanie, kafle, zaokrąglenia, cienie, wersaliki (DESIGN.md).
   ══════════════════════════════════════════════════════════════════════════════ */

/* ============ PNIEWY: jak hero — H2 pierwszym wierszem na bieli, blok od lewej wchodzi pod arkusz ============ */
.dw-pniewy {
  position: relative; overflow: hidden; display: grid;
  grid-template-columns: var(--wciecie) minmax(0, 1fr) clamp(340px, 62vw, 960px);
  grid-template-rows: auto 1fr;
  grid-template-areas:
    ".  h2    ark"
    ".  lewa  ark";
  padding: clamp(1.5rem, 4vw, 4.5rem) 0 var(--sekcja);
}
.dw-pniewy__h2 { grid-area: h2; position: relative; z-index: 2; padding-right: 32px; }
.dw-pniewy__blok {
  grid-column: 1 / 3; grid-row: 1 / 3; z-index: 0; background: var(--blok);
  margin-top: calc(var(--f2) * .85);                   /* linia bazowa H2 (interlinia 1) */
  margin-right: calc(-1 * clamp(40px, 7vw, 110px));    /* wchodzi pod arkusz */
}
.dw-pniewy__lewa {
  grid-area: lewa; position: relative; z-index: 2; display: flex; flex-direction: column; align-items: flex-start;
  justify-content: space-between; gap: 32px; padding: clamp(24px, 2.6vw, 40px) 40px clamp(28px, 3vw, 44px) 0;
}
.dw-pniewy__co { margin: 0; font-size: clamp(20px, 1.9vw, 27px); font-weight: 300; line-height: 1.3; letter-spacing: -.012em; }
.dw-pniewy__ark { grid-area: ark; align-self: end; position: relative; z-index: 3; --okno-ar: 2.1661; }

/* ============ WYCENA I UMOWA: wiersze „etykieta | treść” jak w „Kto buduje” (K. 01.10, uwaga 9) ============
   Dawniej dwa akapity w lewej połowie pod wielkim H2 („wciśnięte na siłę”, pusta prawa połowa). Teraz ta sama lista
   z włosowymi liniami co niżej, na komputerze w dwóch kolumnach po dwa wiersze, od osi do marginesu (jak „Zakres i wycena”
   na „O firmie”). Wiersze w jednej siatce, więc kreski obu kolumn leżą na tej samej wysokości. Telefon: jedna kolumna. */
.dw-wycena { position: relative; padding: 0 0 var(--sekcja); }
.dw-wycena__glowa { padding: 0 var(--pole) 0 var(--wciecie); }
.dw-wycena__wiersze { margin: clamp(36px, 4.4vw, 64px) var(--pole) 0 var(--wciecie); }
.dw-wycena__lista {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: auto auto; grid-auto-flow: column;
  column-gap: clamp(32px, 5vw, 88px); border-bottom: 0;
}
/* wiersz niższy od sąsiada z drugiej kolumny: treść u góry (≤ 1080 px etykieta i treść są dwoma wierszami siatki, które
   bez tego rozciągały się na całą wysokość i „Umowa” stała pośrodku) */
.dw-wycena__lista > div { align-content: start; }
/* kreska pod ostatnim wierszem każdej kolumny (kreska pod całą listą biegłaby też przez odstęp między kolumnami) */
.dw-wycena__lista > div:nth-child(2n) { border-bottom: 1px solid var(--linia); }

/* ============ KTO BUDUJE: lista przy osi + zdjęcie bez ramy (K. 01.10, uwaga 10) do prawej krawędzi ============ */
.dw-kto { position: relative; overflow: hidden; padding: 0 0 var(--sekcja); }
.dw-kto__glowa { padding: 0 var(--pole) 0 var(--wciecie); }
.dw-kto__rzad {
  display: grid; grid-template-columns: var(--wciecie) minmax(0, 1fr) clamp(320px, 42vw, 660px);
  align-items: start; margin-top: clamp(40px, 5vw, 72px);
}
.dw-kto__lewa { grid-column: 2; min-width: 0; margin-right: clamp(32px, 4.4vw, 72px); }
.dw-kto__foto { grid-column: 3; --foto-ar: 1.55; --foto-y: 62%; }

/* ============ TELEFON ============ */
@media (max-width: 820px) {
  /* uwaga 11: arkusz Pniew między marginesami (było: ucięty prawą krawędzią; .fi-ark--tnij odcięte w css/43), blok na całą szerokość */
  .dw-pniewy {
    grid-template-columns: var(--pole) minmax(0, 1fr) var(--pole);
    grid-template-rows: none;
    grid-template-areas:
      ".    h2    .  "
      ".    lewa  .  "
      ".    ark   .  ";
    padding: 1rem 0 4.5rem;
  }
  .dw-pniewy__blok { grid-column: 1 / -1; grid-row: 1 / 3; margin-right: 0; }
  .dw-pniewy__lewa { padding: 20px 0 28px; gap: 22px; }
  .dw-pniewy__ark { margin-top: 32px; --okno-ar: 1.6; }   /* uwaga 12: 1,6:1 (było 1,5 = 69 % panoramy) → 74 % */

  .dw-wycena { padding-bottom: 4.5rem; }
  .dw-wycena__glowa, .dw-kto__glowa { padding: 0 var(--pole); }
  .dw-wycena__wiersze { margin: 28px var(--pole) 0; }
  .dw-wycena__lista { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; grid-auto-flow: row; }
  .dw-wycena__lista > div:nth-child(2n) { border-bottom: 0; }
  .dw-wycena__lista > div:last-child { border-bottom: 1px solid var(--linia); }

  .dw-kto { padding-bottom: 4.5rem; }
  .dw-kto__rzad { grid-template-columns: var(--pole) minmax(0, 1fr) var(--pole); margin-top: 28px; }
  .dw-kto__lewa { grid-column: 2; grid-row: 2; margin-right: 0; }
  /* zdjęcie bez ramy między marginesami (uwaga 11; było do prawej krawędzi), kadr 1,6:1 (było 1,35 = 62 % panoramy) → 74 % */
  .dw-kto__foto { grid-column: 2; grid-row: 1; margin-bottom: 32px; --foto-ar: 1.6; --foto-x: 40%; }
}

/* ══════════════════════════════════════════════════════════════════════════════
   WYCENA I KONTAKT (wycena.html, podstrony/wycena.py). Ten sam język co sekcja kontaktu na głównej
   (css/20-glowna.css → .kontakt-sek): lewa oś, dane + formularz w środkowej kolumnie, plansze ucięte prawą
   krawędzią w prawej. Pełniej: druga plansza „Co wysłać / Jak powstaje wycena” (wiersze jak kosztorys)
   i mapa Google przez całą szerokość ekranu, od krawędzi do krawędzi, jak na głównej (K. 30.09 17:35: „symetrycznie”).
   Telefon: dane → ocena Google → formularz → plansza wyceny → bus → mapa. ⛔ Tekst w akcencie na bloku, wyśrodkowanie.
   ══════════════════════════════════════════════════════════════════════════════ */
/* K. 01.10 (uwaga 10): busy „zdecydowanie większe” i bez ramy. Zdjęcie ma 56vw (do 900 px) jak na głównej, plansza wyceny
   pod nim zostaje 42vw, więc siatka ma 4 kolumny: oś | dane i formularz | dopełnienie do szerokości busów | plansza.
   Zdjęcie bierze dwie ostatnie (stopień nad planszą), formularz dwie środkowe (szerokość bez zmian). */
.wyc {
  --wyc-prawa: clamp(340px, 42vw, 660px);
  --wyc-bus: clamp(340px, 56vw, 900px);
  position: relative; overflow: hidden; display: grid;
  grid-template-columns: var(--wciecie) minmax(0, 1fr) calc(var(--wyc-bus) - var(--wyc-prawa)) var(--wyc-prawa);
  align-items: start; padding: 0 0 var(--sekcja);
}
.wyc__dane { grid-column: 2; grid-row: 1; min-width: 0; margin-right: clamp(32px, 4.4vw, 72px); }
.wyc__h { margin: 0; font-size: clamp(20px, 1.7vw, 24px); font-weight: 300; line-height: 1.25; letter-spacing: -.012em; }
.wyc__dane .stan { margin-top: clamp(18px, 2vw, 26px); }
/* K. 01.10: formularz bez kreski nad tytułem → tytuł „Wycena z projektu” w jednej linii z „Co wysłać do wyceny”
   (odstęp planszy + jej górny margines wewnętrzny) */
.wyc .formularz { grid-column: 2 / 4; grid-row: 3 / 5; margin-top: calc(clamp(40px, 5vw, 64px) + clamp(22px, 2.4vw, 32px)); }

/* E (30.09, redakcja D S-W1): ocena Google pod danymi, przed formularzem — tu człowiek decyduje, czy wysłać projekt.
   Ten sam klocek co na „O firmie” (o_firmie.ocena), w wąskiej kolumnie ułożony jak na telefonie: 5,0 + gwiazdki, cytat pod spodem. */
.wyc__ocena.fi-ocena { grid-column: 2; grid-row: 2; grid-template-columns: auto minmax(0, 1fr); column-gap: 18px; align-items: center;
  padding: 0; margin: clamp(40px, 4.4vw, 60px) clamp(32px, 4.4vw, 72px) 0 0; }
.wyc__ocena > .fi-h-maly { margin-bottom: 18px; }
.wyc__ocena .ocena__liczba { font-size: clamp(4.4rem, 6vw, 6rem); }
.wyc__ocena .fi-cytat { grid-column: 1 / -1; padding: 0; margin-top: 22px; }
.wyc__ocena .cytat__duzy { font-size: clamp(1.5rem, 2.1vw, 2rem); }
.wyc__ocena .cytat__maly { margin-top: 12px; font-size: 16px; }

/* „Co wysłać do wyceny” przed formularzem to tylko telefon (audyt 07.10, pkt 16; podstrony/wycena.py _co_wyslac_tel);
   na komputerze ta lista stoi w planszy obok formularza, więc kopia telefonu jest wyłączona */
.wyc__co { display: none; }

/* prawa strona: busy (wiersze danych i oceny, górą równo z nagłówkiem danych) i arkusz wyceny (wiersz formularza,
   nagłówek równo z tytułem formularza) */
.wyc__bus { grid-column: 3 / 5; grid-row: 1 / 3; min-width: 0; }
.wyc__arkusz { grid-column: 4; grid-row: 3; min-width: 0; margin-top: clamp(40px, 5vw, 64px); }
.wyc__plansza { padding: clamp(22px, 2.4vw, 32px) 0 clamp(24px, 2.6vw, 36px) clamp(20px, 2.4vw, 36px); }
.wyc__plansza.ark { --d-tab: 700ms; --t-krok: 80ms; }
.wyc__ark-h { margin: 0 0 14px; font-size: clamp(19px, 1.5vw, 22px); font-weight: 300; line-height: 1.25; letter-spacing: -.01em; }
.wyc__lista + .wyc__ark-h { margin-top: clamp(32px, 3.4vw, 44px); }
.wyc__dew { margin: clamp(26px, 2.8vw, 36px) 0 0; padding-right: calc(var(--ciecie) + clamp(18px, 2vw, 28px)); font-size: 15px; line-height: 1.6; max-width: 34em; }
.wyc__linki { display: flex; flex-wrap: wrap; gap: 14px 32px; margin: 22px 0 0; }
.wyc__linki .pas__wiecej { margin: 0; }
html.js:not(.bez-ruchu) .wyc__plansza .wyc__ark-h,
html.js:not(.bez-ruchu) .wyc__plansza .wyc__dew,
html.js:not(.bez-ruchu) .wyc__plansza .wyc__linki { transition: opacity 700ms var(--ease) 500ms; }
html.js:not(.bez-ruchu) .wyc__plansza:not(.jest) .wyc__ark-h,
html.js:not(.bez-ruchu) .wyc__plansza:not(.jest) .wyc__dew,
html.js:not(.bez-ruchu) .wyc__plansza:not(.jest) .wyc__linki { opacity: 0; }

/* ============ SKĄD DOJEŻDŻAMY: mapa przez całą szerokość ekranu (symetrycznie, jak na głównej) ============ */
.wyc-mapa { position: relative; overflow: hidden; padding: 0 0 var(--sekcja); }
.wyc-mapa__glowa { padding: 0 var(--pole) 0 var(--wciecie); }
.wyc-mapa__lead { margin: clamp(20px, 2.4vw, 32px) 0 0; font-size: clamp(17px, 1.36vw, 19.5px); line-height: 1.58; max-width: 34em; }
.wyc-mapa__ark.plansza { margin: clamp(40px, 5vw, 72px) -1px 0; padding: 0; }
.wyc-mapa__ark .tabelka { margin: 0 0 0 var(--wciecie); padding-right: var(--pole); }
html.js:not(.bez-ruchu) .wyc-mapa__ark .mapa-g__btn picture { transition: clip-path var(--t-okno, 1100ms) var(--ease) var(--d-okno, 300ms); clip-path: inset(0 0 0 0); }
html.js:not(.bez-ruchu) .wyc-mapa__ark:not(.jest) .mapa-g__btn picture { clip-path: inset(0 100% 0 0); }

/* ============ TABLET ============ */
@media (max-width: 1080px) {
  .wyc { --wyc-prawa: 44vw; }
  .wyc-mapa__tabelka { flex-wrap: wrap; }
}

/* ============ TELEFON: telefon i WhatsApp → formularz → reszta ============ */
@media (max-width: 820px) {
  .wyc { grid-template-columns: var(--pole) minmax(0, 1fr) var(--pole); padding-bottom: 4.5rem; }
  .wyc__dane { grid-column: 2; grid-row: 1; margin-right: 0; }
  .wyc__ocena.fi-ocena { grid-column: 2; grid-row: 2; margin: 40px 0 0; }
  .wyc__ocena .ocena__liczba { font-size: 4.4rem; }
  /* audyt 07.10, pkt 16: „Co wysłać do wyceny” (własna mała plansza) → formularz → „Jak powstaje wycena” (duża plansza
     bez pierwszej listy) → busy. Było: obie listy w jednej planszy POD formularzem, a lista mówi, co do niego włożyć. */
  .wyc__co { display: block; grid-column: 2; grid-row: 3; margin-top: 48px; }
  .wyc .formularz { grid-column: 2; grid-row: 4; margin: 48px 0 0; }
  .wyc__plansza .wyc__ark-h--co, .wyc__plansza .wyc__ark-h--co + .wyc__lista { display: none; }
  .wyc__plansza .wyc__lista + .wyc__ark-h { margin-top: 0; }
  /* Komunikat błędu ZASTĘPUJE podpowiedź nad polami (było: „Podaj telefon albo e-mail, wystarczy jedno.” i tuż pod nią
     „Podaj telefon albo adres e-mail, żeby dostać odpowiedź.”, dwa razy to samo zdanie). Treść komunikatu jest w rdzeniu
     (assets/rdzen.js, blok 8), tu tylko miejsce: błąd staje w wierszu podpowiedzi. */
  .wyc .formularz__glowa:has(.form-error:not(:empty)) > .pole__opis { display: none; }
  .wyc .formularz__glowa .form-error:not(:empty) { margin-top: 0; }
  /* uwaga 11: plansza wyceny i busy między marginesami (było: od marginesu do prawej krawędzi i dalej) */
  .wyc__arkusz { grid-column: 2; grid-row: 5; margin-top: 48px; }
  .wyc__bus { grid-column: 2; grid-row: 6; margin-top: 40px; }
  .wyc__plansza { padding: 18px 16px 22px; }
  .wyc__plansza .kosztorys__lista { padding-right: 0; }
  .wyc__dew { padding-right: 0; }
  .wyc__plansza .kosztorys__lista > li { grid-template-columns: 2.6em minmax(0, 1fr); row-gap: 4px; }
  .wyc__plansza .kosztorys__ile { grid-column: 2; text-align: left; }
  .wyc__plansza .kosztorys__co { font-size: 18px; }
  .wyc__linki { flex-direction: column; align-items: flex-start; }

  .wyc-mapa { padding-bottom: 4.5rem; }
  .wyc-mapa__glowa { padding: 0 var(--pole); }
  .wyc-mapa__ark.plansza { margin: 32px -1px 0; }
  /* uwaga 11: kreski komórek od marginesu do marginesu (było: od lewej krawędzi ekranu do 20 px przed prawą); górna kreska
     tabelki (pod mapą) i rama planszy dalej od krawędzi do krawędzi, jak mapa */
  /* odbiór 07.10 (pkt 20): plansza wystaje 1 px za obie krawędzie ekranu, więc +1 px: tekst i kreski na osi 20 px (było 19 px),
     tak samo jak .zasieg__dol na głównej */
  .wyc-mapa__tabelka { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); padding: 0 calc(var(--pole) + 1px); }
  .wyc-mapa__ark .wyc-mapa__tabelka { margin-left: 0; }
  .wyc-mapa__tabelka > div, .wyc-mapa__tabelka > div:first-child, .wyc-mapa__tabelka > div:last-child { padding: 8px 10px 9px 0; border-left: 0; border-top: 1px solid var(--kreska); }
  .wyc-mapa__tabelka > .wyc-mapa__adres { grid-column: 1 / -1; border-top: 0; }
  .wyc-mapa__tabelka > div:nth-child(3) { padding-left: 12px; border-left: 1px solid var(--kreska); }
  .wyc-mapa__tabelka > div:nth-child(4) { grid-column: 1 / -1; }
  .wyc-mapa__tabelka dd { white-space: normal; }
}

/* ══════════════════════════════════════════════════════════════════════════════
   POLITYKA PRYWATNOŚCI (polityka-prywatnosci.html, podstrony/polityka.py).
   Wąska kolumna przy lewej osi (maks. 42em), śródtytuły Hanken 300 oddzielone włosową linią
   (jak lista „Kto buduje”), dane administratora w tabelce rysunkowej: górna i lewa kreska w kolorze tekstu,
   komórki rozdzielone kreską, ostatnie pole „Obowiązuje od” jak numer arkusza (mono 500).
   ══════════════════════════════════════════════════════════════════════════════ */
.pol { display: grid; grid-template-columns: var(--wciecie) minmax(0, 42em) minmax(0, 1fr); padding: 0 0 var(--sekcja); }
.pol__tresc { grid-column: 2; min-width: 0; }
.pol__sek { margin-top: clamp(28px, 3vw, 40px); padding-top: clamp(26px, 2.8vw, 36px); border-top: 1px solid var(--linia); }
.pol__sek:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.pol__h { margin: 0; font-size: clamp(22px, 1.9vw, 27px); font-weight: 300; line-height: 1.25; letter-spacing: -.012em; }
.pol__sek p, .pol__sek li { max-width: min(100%, 62ch); }   /* Hanken: 68ch dawało 81-83 znaki w wierszu */
.pol__sek p { margin: 14px 0 0; font-size: 16px; line-height: 1.65; }
.pol__sek a { text-decoration: underline; text-decoration-color: var(--akcent); text-decoration-thickness: 1px; text-underline-offset: 3px; overflow-wrap: anywhere; }
.pol__sek a:hover { text-decoration-thickness: 2px; }

/* tabelka administratora: 2 kolumny, „Obowiązuje od” przez całą szerokość */
.pol__tabelka.tabelka {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  margin: 24px 0 0; padding: 0; border: 1px solid var(--tusz);        /* rama arkusza 1 px */
}
.pol__tabelka.tabelka > div { padding: 10px 16px 12px; border-left: 0; border-top: 1px solid var(--kreska); }
.pol__tabelka.tabelka > div:nth-child(-n+2) { border-top: 0; }
.pol__tabelka.tabelka > div:nth-child(even) { border-left: 1px solid var(--kreska); }
.pol__tabelka.tabelka > .nr { grid-column: 1 / -1; border-top-color: var(--tusz); }
.pol__tabelka dd { white-space: normal; overflow-wrap: anywhere; }
.pol__tabelka dd a { display: inline-block; min-height: 24px; padding-top: 3px; text-decoration: none; border-bottom: 1px solid var(--akcent); }

@media (max-width: 820px) {
  .pol { grid-template-columns: var(--pole) minmax(0, 1fr) var(--pole); padding-bottom: 4.5rem; }
  .pol__sek p { font-size: 16px; }
  .pol__tabelka.tabelka > div, .pol__tabelka.tabelka > div:nth-child(2) { padding: 8px 12px 9px; border-left: 0; border-top: 1px solid var(--kreska); }
  .pol__tabelka.tabelka > div:first-child { border-top: 0; }
  .pol__tabelka.tabelka > div:nth-child(4) { border-left: 1px solid var(--kreska); }
  .pol__tabelka.tabelka > .pol__szer, .pol__tabelka.tabelka > div:nth-child(6) { grid-column: 1 / -1; }
  .pol__tabelka.tabelka > .nr { border-top-color: var(--tusz); }
}

/* ══════════════════════════════════════════════════════════════════════════════
   MAŁE STRONY: 404.html (podstrony/blad404.py) i dziekujemy.html (podstrony/dziekujemy.py).
   404: lista stron jak lista „Kto buduje” (włosowe linie, nazwa Hanken 300, strzałka), pod nią telefon.
   Dziękujemy: jak kontakt na głównej (lewa oś, duży telefon, stan „otwarte teraz”), po prawej plansza z kartą
   realizacji ucięta prawą krawędzią. Nagłówek „Sprawa jest pilna?” = .wyc__h z css/45-wycena.css.
   ══════════════════════════════════════════════════════════════════════════════ */

/* ============ 404 ============ */
.brak { padding: 0 var(--pole) var(--sekcja) var(--wciecie); }
.brak__h { margin: 0; font-size: 15px; font-weight: 400; line-height: 1.4; color: var(--tusz-2); }
.brak__lista { list-style: none; margin: 14px 0 0; padding: 0; max-width: 640px; border-bottom: 1px solid var(--linia); }
.brak__lista a {
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  padding: 16px 0 17px; border-top: 1px solid var(--linia); text-decoration: none;
  font-size: clamp(20px, 1.8vw, 26px); font-weight: 300; line-height: 1.25; letter-spacing: -.01em;
}
.brak__lista a span { border-bottom: 1px solid transparent; transition: border-color .3s var(--ease); }
.brak__lista a:hover span, .brak__lista a:focus-visible span { border-bottom-color: var(--akcent); }
.brak__lista svg { width: 20px; height: 20px; flex: none; }
.brak__kontakt { margin: clamp(28px, 3vw, 40px) 0 0; }

/* ============ DZIĘKUJEMY ============ */
.dzieki {
  position: relative; overflow: hidden; display: grid;
  grid-template-columns: var(--wciecie) minmax(0, 1fr) clamp(340px, 42vw, 660px);
  align-items: start; padding: 0 0 var(--sekcja);
}
.dzieki__dane { grid-column: 2; min-width: 0; margin-right: clamp(32px, 4.4vw, 72px); }
.dzieki__dane .stan { margin-top: clamp(18px, 2vw, 26px); }
.dzieki__tekst { margin: clamp(24px, 2.6vw, 32px) 0 0; font-size: 16px; line-height: 1.6; max-width: 32em; }
.dzieki__linki { display: flex; flex-wrap: wrap; gap: 14px 32px; margin: clamp(26px, 2.8vw, 36px) 0 0; }
.dzieki__linki .pas__wiecej { margin: 0; }
.dzieki__karta { grid-column: 3; min-width: 0; }
.dzieki__ark { --okno-ar: 2.166; }
.dzieki__okno-link { display: block; }
.dzieki__okno-link:focus-visible { outline-offset: 2px; }

@media (max-width: 820px) {
  .brak { padding: 0 var(--pole) 4.5rem; }
  .brak__lista a { font-size: 20px; padding: 14px 0 15px; }

  .dzieki { grid-template-columns: var(--pole) minmax(0, 1fr) var(--pole); padding-bottom: 4.5rem; }
  .dzieki__dane { grid-column: 2; margin-right: 0; }
  .dzieki__karta { grid-column: 2; margin-top: 40px; }   /* karta Nowy Tomyśl między marginesami (uwaga 11; było do prawej krawędzi i dalej) */
  .dzieki__ark .tabelka dd { white-space: normal; }       /* 360 px: „Nowy Tomyśl” w wąskiej komórce łamie się zamiast wchodzić na sąsiednią */
  .dzieki__linki { flex-direction: column; align-items: flex-start; }
}