/* =============================================================================
   Miejsce dla Ciebie — warstwa komponentów
   Wymaga assets/css/tokens.css (plik produkcyjny Graphic Designera).
   Reguła: zero surowych hexów. Wyłącznie tokeny semantyczne.

   Przebudowa warstwy wizualnej 2026-09-07 wg 05_Review/02_kierunek-przebudowy.md
   (D10–D16): hero z fotografią, sekcje na pełnej szerokości siatki, panel
   renderowany, portrety w pełnej wielkości, bento, ruch, gęstość 72 px.
   ========================================================================== */

/* --- 1. Kroje self-hosted ------------------------------------------------ */
@font-face {
  font-family: Literata;
  src: url("/assets/fonts/literata-var.woff2") format("woff2-variations");
  font-weight: 400 700;
  font-stretch: 100%;
  font-display: swap;
}
@font-face {
  font-family: "Fira Sans";
  src: url("/assets/fonts/fira-sans-400.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Fira Sans";
  src: url("/assets/fonts/fira-sans-500.woff2") format("woff2");
  font-weight: 500;
  font-display: swap;
}

/* --- 2. Warstwa bazowa uzupełniająca tokeny ------------------------------ */
*, *::before, *::after { box-sizing: border-box; }

/* `hidden` musi wygrywać z każdą regułą display w tym pliku — na tym atrybucie
   opiera się cała warstwa stanów (§6). */
[hidden] { display: none !important; }

:root {
  --header-h: 4.5rem;                 /* 72 — wysokość ramy nad hero */
  --container-wide: 90rem;            /* 1440 — kontener hero (tekst w granicach marginesu strony) */
}

/* D16: 72 px między sekcjami na desktopie, nie 96. Tokeny bez zmian — nadpisanie
   zmiennej w warstwie komponentów, tak jak przewiduje kierunek przebudowy.
   D21: jeden próg zamiast trzech z tokens.css — 48 px poniżej 900 px, 72 px od 900 px. */
:root { --section-y: 3rem; }
@media (min-width: 56.25rem) {
  :root { --section-y: 4.5rem; }
}

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  /* miejsce na przyklejony pasek kontaktu na wąskim ekranie */
  padding-bottom: var(--bar-space, 0px);
}

img, svg, picture { max-width: 100%; }
img { height: auto; display: block; }

strong, b, th { font-weight: var(--fw-medium); }

ul, ol { margin: 0 0 var(--sp-4); padding-left: var(--sp-5); }
li { margin-bottom: var(--sp-2); max-width: var(--measure); }

hr { border: 0; border-top: 1px solid var(--border); margin: var(--sp-6) 0; }

.skip {
  position: absolute;
  left: var(--sp-4);
  top: calc(-1 * var(--sp-10));
  z-index: 100;
  background: var(--bg-raised);
  color: var(--fg);
  border: 1px solid var(--border-strong);
  padding: var(--sp-3) var(--sp-4);
  text-decoration: none;
}
.skip:focus { top: var(--sp-2); }

.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  margin: -1px; padding: 0; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}

/* Odnośnik w treści: sygnał niesie podkreślenie, kolor go wzmacnia (§0.4). */
main a, footer a, .prose a { text-decoration: underline; }
a.btn-primary, a.btn-secondary, a.plain { text-decoration: none; }
a.plain:hover { text-decoration: underline; }

/* --- 3. Rama: nagłówek --------------------------------------------------- */
/* Nagłówek leży na hero (przezroczysty), po 80 px przewinięcia dostaje tło
   z kryciem 92% i --sh-1 (D15). Bez JS ma tło strony od razu (ocena v2, P6):
   przyklejony nagłówek bez tła nachodził na treść przy każdym przewinięciu.
   Przezroczystość dostaje wyłącznie dokument ze skryptem, który umie ją zdjąć. */
.site-header {
  position: sticky;
  top: 0;
  z-index: 40;
  background: var(--bg-page);
  transition: background-color var(--dur-2) var(--ease-std), box-shadow var(--dur-2) var(--ease-std);
}
html.js .site-header:not(.is-compact) { background: transparent; }
.site-header.is-compact {
  background: color-mix(in srgb, var(--bg-page) 92%, transparent);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  box-shadow: var(--sh-1);
}
/* Przeglądarka bez color-mix: pełne tło zamiast braku tła. */
@supports not (background: color-mix(in srgb, red 50%, transparent)) {
  .site-header.is-compact { background: var(--bg-page); }
}

.header-row {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  min-height: var(--header-h);
  padding-block: var(--sp-2);
}

.brand { display: inline-flex; align-items: center; min-height: 44px; text-decoration: none; color: var(--fg); }
.brand img { display: block; width: auto; height: 34px; }
.brand:focus-visible { outline-offset: 4px; }

.header-nav { display: none; }
.header-actions { display: flex; align-items: center; gap: var(--sp-2); margin-left: auto; }

.nav-list { display: flex; gap: var(--sp-1); list-style: none; margin: 0; padding: 0; }
.nav-list li { margin: 0; }
.nav-list a {
  display: inline-flex; align-items: center;
  min-height: 44px; padding-inline: var(--sp-2);
  color: var(--fg); text-decoration: none;
  white-space: nowrap;
  border-bottom: 2px solid transparent;
}
.nav-list a:hover { text-decoration: underline; }
.nav-list a[aria-current="page"] {
  border-bottom-color: var(--gold-500);
  font-weight: var(--fw-medium);
}

/* Telefon w nagłówku */
.tel-link {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  min-height: 44px; min-width: 44px; justify-content: center;
  padding-inline: var(--sp-3);
  color: var(--fg); text-decoration: none;
  font-variant-numeric: tabular-nums;
}
.tel-link:hover { text-decoration: underline; }
.tel-link svg { width: 20px; height: 20px; flex: none; }
.tel-link .tel-label { display: none; white-space: nowrap; }

.lang {
  display: flex; align-items: center; gap: 1px;
  border: 1px solid var(--border-strong);
  border-radius: var(--r-md);
  overflow: hidden;
}
.lang a, .lang span {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 44px; min-height: 44px;
  font-size: var(--t-sm); font-weight: var(--fw-medium);
  text-decoration: none; color: var(--fg);
}
.lang [aria-current="true"] { background: var(--n-900); color: var(--n-50); }

.btn-primary, .btn-secondary {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 48px; text-align: center;
}
.btn-block { width: 100%; }

/* Menu na wąskim ekranie: <details> działa bez JavaScriptu. */
.menu > summary {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2);
  min-width: 44px; min-height: 44px; padding-inline: var(--sp-3);
  border: 1px solid var(--border-strong); border-radius: var(--r-md);
  font-weight: var(--fw-medium); cursor: pointer; list-style: none;
  background: var(--bg-page);
}
.menu > summary::-webkit-details-marker { display: none; }
.menu[open] > summary .menu-open-label { display: none; }
.menu:not([open]) > summary .menu-close-label { display: none; }

.menu-panel {
  position: fixed; inset: 0; top: 0; z-index: 50;
  background: var(--bg-page);
  overflow-y: auto;
  padding: var(--sp-4) var(--page-margin) var(--sp-8);
}
.menu-panel h2 { font-size: var(--t-h4); }
.menu-panel ul { list-style: none; margin: 0; padding: 0; }
.menu-panel li { border-bottom: 1px solid var(--border); margin: 0; max-width: none; }
.menu-panel li a {
  display: block; padding-block: var(--sp-3); min-height: 44px;
  color: var(--fg); text-decoration: none;
}
.menu-panel li a:hover .menu-item-name { text-decoration: underline; }
.menu-item-name { display: block; font-weight: var(--fw-medium); }
.menu-item-desc { display: block; font-size: var(--t-sm); color: var(--fg-muted); }
.menu-close {
  position: absolute; top: var(--sp-4); right: var(--page-margin);
  min-width: 44px; min-height: 44px;
}

/* --- 4. Rama: stopka ---------------------------------------------------- */
.site-footer {
  margin-top: auto;
  background: var(--bg-inverse);
  color: var(--fg-on-inverse);
  padding-block: var(--sp-6) var(--sp-5);
}
.site-footer a { color: var(--gold-500); }
.site-footer .footer-lead { color: var(--fg-on-inverse); max-width: 46ch; }
.footer-cols { display: grid; gap: var(--sp-4); grid-template-columns: 1fr; margin-block: var(--sp-5); }
.footer-col { border-top: 1px solid var(--border-inverse); }
.footer-col > summary {
  display: flex; align-items: center; justify-content: space-between;
  min-height: 48px; cursor: pointer; list-style: none;
  font-size: var(--t-xs); font-weight: var(--fw-medium);
  letter-spacing: var(--ls-label); text-transform: uppercase;
  color: var(--n-300);
}
.footer-col > summary::-webkit-details-marker { display: none; }
.footer-col > summary::after { content: "+"; font-size: var(--t-h4); }
.footer-col[open] > summary::after { content: "\2212"; }
.footer-col ul { list-style: none; margin: 0 0 var(--sp-4); padding: 0; }
.footer-col li { margin: 0; }
.footer-col li a { display: block; padding-block: var(--sp-2); min-height: 44px; }
.footer-legal {
  border-top: 1px solid var(--border-inverse);
  padding-top: var(--sp-4);
  font-size: var(--t-sm); color: var(--n-300);
}
.footer-legal p { max-width: none; margin-bottom: var(--sp-2); }

/* --- 5. Przyklejony pasek kontaktu (wąski ekran) ------------------------- */
.sticky-bar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 45;
  display: grid; grid-template-columns: 1fr 1fr;
  border-top: 1px solid var(--border-strong);
  background: var(--bg-page);
}
.sticky-bar a {
  display: flex; align-items: center; justify-content: center; gap: var(--sp-2);
  min-height: 56px; text-decoration: none; font-weight: var(--fw-medium);
  color: var(--fg);
}
.sticky-bar a:first-child { background: var(--gold-500); color: var(--n-900); }
.sticky-bar a + a { border-left: 1px solid var(--border-strong); }
.sticky-bar[hidden] { display: none; }
.sticky-bar svg { width: 20px; height: 20px; }

/* --- 6. Sekcje i typografia strony -------------------------------------- */
.prose > * + h2 { margin-top: var(--sp-7); }
.prose > * + h3 { margin-top: var(--sp-6); }
.section-band { background: var(--bg-sunken); }
/* D8 (CMO, 2026-09-07): na tle zapadniętym obramowanie przycisku pobocznego
   z --n-400 dawało 2,74:1 — jedyny sygnał, że to przycisk. --n-600 daje 4,68:1.
   Ocena v2, P2: to samo obramowanie na welonach nagłówków podstron dawało
   2,1–2,3:1, a na --n-50 3,06:1 (zapas 0,06). --n-600 obowiązuje więc na każdym
   tle jasnym: 5,30:1 na --n-50, 5,82:1 na --n-0, 4,68:1 na --n-100; na welonach
   nagłówków zmierzone w README §12. Pasmo ciemne ma własną regułę (--n-300). */
.btn-secondary { border-color: var(--n-600); }

/* Miara zostaje na nagłówku sekcji (60ch); treść sekcji idzie na pełną
   szerokość kontenera przez siatkę (D16). */
.section-head { max-width: 60ch; margin-bottom: var(--sp-6); }
.section-head p:last-child { margin-bottom: 0; }
.section-head .lead { margin-bottom: 0; }
.section-head .lead + p { margin-top: var(--sp-4); }

/* D21: rytm pionowy podstron jedną regułą — margines jednostronny.
   Odstęp między sąsiednimi blokami <main> to jeden --section-y niesiony marginesem
   górnym; sekcja nie ma własnego paddingu (reguła `section { padding-block }`
   z tokens.css jest dla main > section wyzerowana), więc dolne marginesy ostatnich
   dzieci (figura 24 px, lista i akapit 16 px) zapadają się w odstęp zamiast go
   dublować. Pasmo z tłem dokłada --section-y wewnątrz, po obu stronach krawędzi
   tła. Zakres: każda podstrona zaczyna <main> od .page-hero albo .page-head —
   reguła obejmuje ich rodzeństwo, więc strona główna (.hero; #panel, #zespol,
   #narzedzia i #formularz leżą tam wprost w <main>) zostaje przy rytmie z D16
   (bez tego zakresu wysokość / spadała z 6420 do 6276 px). Kotwice:
   scroll-margin-top równe wysokości nagłówka, bo odstęp nie jest już paddingiem
   sekcji. Pomiary w README §13. */
main > :is(.page-hero, .page-head) ~ section { padding-block: 0; scroll-margin-top: var(--header-h); }
main > :is(.page-hero, .page-head) ~ * { margin-top: var(--section-y); }
main > :is(.page-hero, .page-head) ~ section:last-child { padding-bottom: var(--section-y); }
main > :is(.page-hero, .page-head) ~ :is(.section-band, .band-inverse) { padding-block: var(--section-y); }
/* Blok otwierający nowy wątek wewnątrz sekcji (h3 po siatce kart, po liście) — 48 px. */
main > section > h3, section > .section-head ~ h3, .stages + h3, .stage-grid + h3, ul + h3 { margin-top: var(--sp-7); }

/* Nagłówek sekcji z działaniem po prawej — jeden wiersz na pełnej szerokości. */
.head-row { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--sp-4) var(--sp-6); margin-bottom: var(--sp-6); }
.head-row .section-head { margin-bottom: 0; }
.head-row .head-action { flex: none; }
/* Nagłówek sekcji 7:5 — H2 po lewej, lead i działanie po prawej */
.head-split { display: grid; gap: var(--sp-4) var(--sp-6); align-items: end; margin-bottom: var(--sp-5); }
.head-split .section-head { margin-bottom: 0; }
.head-aside .lead { margin-bottom: var(--sp-4); }
.head-aside .head-action { margin-bottom: 0; }

.brandline {
  font-family: var(--font-display);
  font-size: var(--t-h3); line-height: var(--lh-h3);
  color: var(--fg); margin-bottom: var(--sp-4); max-width: 34ch;
}

.breadcrumbs { padding-block: var(--sp-4) 0; font-size: var(--t-sm); }
.breadcrumbs ol { display: flex; flex-wrap: wrap; gap: var(--sp-2); list-style: none; margin: 0; padding: 0; }
.breadcrumbs li { margin: 0; color: var(--fg-muted); }
.breadcrumbs li + li::before { content: "/"; margin-right: var(--sp-2); color: var(--n-400); }
/* D21: na podstronie z obrazem okruszki stoją w hero, nad nadtytułem, na welonie
   (blok okruszków w przepływie między nagłówkiem a hero wsuwał hero pod siebie,
   nie pod nagłówek: heroTop 38 px przy scrollY 0). Na welonie --fg-muted dawało
   1,0–4,8:1, a odnośnik w gold-700 1,2–5,3:1 (README §13) — na fotografii okruszki
   w --fg; sygnał odnośnika niesie podkreślenie (§0.4). */
.page-hero .breadcrumbs { padding-top: 0; margin-bottom: var(--sp-3); }
.page-hero .breadcrumbs li, .page-hero .breadcrumbs a { color: var(--fg); }

/* Kontener hero: tekst w granicach marginesu strony, obraz od krawędzi do krawędzi. */
.container-wide {
  width: 100%;
  max-width: var(--container-wide);
  margin-inline: auto;
  padding-inline: var(--page-margin);
}

/* --- 6a. Hero strony głównej (D10, D18) ---------------------------------- */
/* Fotografia na całą szerokość ekranu, min(88vh, 860px). Trzy okna po lewej,
   pusta ściana po prawej: nagłówek stoi na ścianie, na prawej połowie.
   object-position 50% — granica okno/ściana leży w obrazie na 49,6%
   szerokości, więc przy każdej szerokości ekranu wypada w połowie widoku.
   D18: na hero zostają nadtytuł, linia kanonu, H1 i jedno złote działanie;
   lead stoi pod listwą ścieżek, telefon w nagłówku i pasku dolnym. */
.hero {
  position: relative;
  isolation: isolate;
  display: grid;
  align-items: end;
  min-height: min(88vh, 860px);
  margin-top: calc(-1 * var(--header-h));
  padding-top: calc(var(--header-h) + var(--sp-6));
  padding-bottom: var(--sp-7);
  overflow: hidden;
}
.hero-media { position: absolute; inset: 0; z-index: -1; overflow: hidden; }
.hero-media picture, .hero-media img { width: 100%; height: 100%; }
.hero-media img { object-fit: cover; object-position: 50% 50%; }
/* D7 (ocena v2): na wąskim ekranie kadr na ścianę (prawa część obrazu), nie na
   środek z oknem i balustradą — tekst stoi wtedy na jednolitym tle. */
.hero .hero-media img { object-position: 64% 50%; }
.hero-inner { display: grid; gap: var(--sp-6); }
/* Welon (D18): krem z kryciem 30% wyłącznie pod obrysem bloku tekstu, z miękką
   krawędzią (cień rozmyty 64 px, rozszerzony 48 px) — nie na całą połowę
   fotografii. Faktura ściany zostaje; kontrast H1 zmierzony po zmianie (README §12).
   D21: ta sama reguła obsługuje hero strony głównej i .page-hero podstron —
   gradient .page-hero .hero-media::after (krem 92% na całą wysokość, na desktopie
   90 → 78% na 78% szerokości) usunięty; fotografia poza blokiem tekstu bez welonu. */
.hero-copy { position: relative; max-width: 45rem; }
.hero-copy::before {
  content: "";
  position: absolute; inset: 0; z-index: -1;
  background: var(--bg-page);
  box-shadow: 0 0 64px 48px var(--bg-page);
  border-radius: var(--r-lg);
  opacity: 0.3;
}
.hero .kicker, .page-hero .kicker { margin-bottom: var(--sp-3); color: var(--fg); }
.page-hero .hero-note, .page-hero .hero-note a { color: var(--fg); }
.hero .brandline { font-size: var(--t-h4); line-height: var(--lh-h4); margin-bottom: var(--sp-3); max-width: none; }
/* Identyfikacja §4.2: --t-display ma w systemie jedno użycie — H1 hero.
   D18: 56 px na desktopie (trzy wiersze), D7: 32 px na 390 px (trzy wiersze) —
   nadpisanie zmiennej w zasięgu hero, tokeny bez zmian. */
.hero { --t-display: clamp(2rem, 1.2rem + 2.6vw, 3.5rem); }
.hero h1 {
  font-size: var(--t-display); line-height: var(--lh-display);
  letter-spacing: var(--ls-display); font-weight: var(--fw-medium);
  max-width: none;
}
.hero-actions { display: flex; flex-wrap: wrap; gap: var(--sp-3) var(--sp-5); align-items: center; margin-bottom: var(--sp-4); }
.hero-actions .btn-primary, .hero-actions .btn-secondary { flex: 1 1 auto; }
/* Ocena v2 P2 po D18: na fotografii pod welonem ≤ 30% obramowanie gold-700 przycisku
   głównego nie sięga 3:1 wobec ściany (zmierzone: hero 1,98, nagłówek nad sufitem
   1,88 w najgorszym punkcie pierścienia). Granicę działania niesie --n-900 — ta sama
   zasada, którą D8 przyjęło dla tła strony: kontrast 1.4.11 daje obramowanie, nie
   powierzchnia. Dotyczy wyłącznie elementów stojących na zdjęciu hero strony głównej:
   działania w hero oraz przycisku i przycisku menu (390 px: 1,18) w nagłówku, dopóki
   nagłówek jest przezroczysty. */
.hero .btn-primary,
html.js body:has(.hero) .site-header:not(.is-compact) .btn-primary,
html.js body:has(.hero) .site-header:not(.is-compact) .menu > summary { border-color: var(--n-900); }
.hero-note {
  border-top: 1px solid var(--border);
  padding-top: var(--sp-3);
  font-size: var(--t-sm); color: var(--fg-muted); max-width: 52ch;
}
/* D17 (identyfikacja §8.3): fotografia hero bez najazdu przy załadowaniu —
   obraz stoi w skali 1,0 od pierwszej klatki, bez klasy ze skryptu. */

/* --- 6b. Nagłówek podstrony z obrazem ------------------------------------ */
.page-hero {
  position: relative;
  isolation: isolate;
  display: grid;
  align-items: end;
  min-height: min(48vh, 520px);
  margin-top: calc(-1 * var(--header-h));
  padding-top: calc(var(--header-h) + var(--sp-6));
  padding-bottom: var(--sp-6);
  overflow: hidden;
}
.page-hero .kicker { margin-bottom: var(--sp-3); }
.page-hero h1 { max-width: 22ch; }
.page-hero .brandline { font-size: var(--t-h4); line-height: var(--lh-h4); }
.page-hero .lead { color: var(--fg); max-width: 56ch; }
.page-hero p:not(.lead):not(.brandline):not(.kicker):not(.hero-actions):not(.hero-note):not(.label) { max-width: 60ch; }
.page-hero .hero-copy { max-width: 44rem; }
/* D21: kadr i welon per fotografia — modyfikator na sekcji (.page-hero--elewacja,
   --salon, --klucze); charakterystyczny fragment obok tekstu, nie pod nim.
   Na 1440 obraz wypełnia szerokość hero, więc na desktopie działa składowa pionowa;
   pozioma decyduje poniżej ~640 px.
   Elewacja (tekst po lewej): oba rzędy okien i balkon — 62%; 60% odcina drzewo z lewej.
   Salon (tekst po prawej): łuki okien po lewej w całości — 0; na wąskim ekranie ściana (60%).
   Klucze (tekst po prawej — klucze, dokumenty i okulary zostają obok tekstu, na lewo):
   40%; na wąskim ekranie notes i blat (100%) — pod tekstem bez czarnych okularów. */
.page-hero--elewacja .hero-media img { object-position: 60% 62%; }
.page-hero--salon .hero-media img { object-position: 60% 0; }
.page-hero--klucze .hero-media img { object-position: 100% 40%; }
/* Welon 0,3 z D18 wystarcza na jasnej ścianie salonu (H1 9,25:1 na 9 punktach). Na elewacji
   cienie okien (piksele 40–70 z 255) i na kluczach słoje blatu dają przy 0,3 najgorzej
   2,5–2,8:1 w każdym kadrze i położeniu tekstu (mieszanie sRGB: 0,7·p + 74 ≥ 128 tylko dla
   p ≥ 77); przy 0,4 3,5–3,8; przy 0,5 ≥ 4,87 dla H1, leadu, nadtytułu i okruszków na 1440
   i 390 (README §13). Krycie 0,5 wykracza poza „≤ 30 %" z D21 — do potwierdzenia przez CMO;
   alternatywą jest jaśniejsza fotografia, nie ciemniejszy tekst. */
.page-hero--elewacja .hero-copy::before, .page-hero--klucze .hero-copy::before { opacity: 0.5; }

/* Nagłówek strony narzędzia: bez obrazu, ten sam rytm. */
.page-head { padding-block: var(--sp-7) var(--sp-6); border-bottom: 1px solid var(--border); }
.page-head h1 { max-width: 24ch; }
.page-head .lead { max-width: 60ch; }

/* Pasek ścieżek pobocznych: biała listwa nachodząca na dolną krawędź hero */
.paths { position: relative; z-index: 2; margin-top: calc(-1 * var(--sp-6)); }
.paths ul {
  display: grid; list-style: none; margin: 0; padding: 0;
  background: var(--bg-raised); border: 1px solid var(--border); border-radius: var(--r-md);
  box-shadow: var(--sh-2); overflow: hidden;
}
.paths li { margin: 0; max-width: none; }
.paths a {
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3);
  min-height: 64px; padding: var(--sp-2) var(--sp-5); color: var(--fg); text-decoration: none;
  font-weight: var(--fw-medium); border-bottom: 1px solid var(--border);
}
.paths li:last-child a { border-bottom: 0; }
.paths a:hover .paths-label { text-decoration: underline; }
.paths a::after {
  content: "\2192"; color: var(--gold-700);
  transition: transform var(--dur-1) var(--ease-std);
}
.paths a:hover::after { transform: translateX(4px); }

/* --- 7. Karty i siatki --------------------------------------------------- */
.cols { display: grid; gap: var(--gutter); }
.cols-2, .cols-3, .cols-4 { display: grid; gap: var(--gutter); }
.card {
  background: var(--bg-raised);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: var(--sp-5);
}
.card > :last-child { margin-bottom: 0; }
.card h3 { font-size: var(--t-h4); }

/* Ruch kart (D17, identyfikacja §8.2–8.3): uniesienie −2 px i --sh-2 w --dur-2.
   Bez zoomu obrazu na hover — fotografii nie animujemy. */
.card-hover {
  transition: transform var(--dur-2) var(--ease-std), box-shadow var(--dur-2) var(--ease-std);
}
.card-hover:hover, .card-hover:focus-within { transform: translateY(-2px); box-shadow: var(--sh-2); }
.media-zoom { overflow: hidden; }

/* Harmonogram: cztery karty w rzędzie, złota linia u góry */
.stage {
  background: var(--bg-raised); border: 1px solid var(--border); border-top: 3px solid var(--gold-500);
  border-radius: var(--r-lg); padding: var(--sp-4) var(--sp-5);
}
.stage .stage-when {
  font-size: var(--t-xs); font-weight: var(--fw-medium);
  letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--fg-muted);
  margin-bottom: var(--sp-2); display: block;
}
.stage h3 { font-size: var(--t-h4); margin-bottom: var(--sp-2); }
.stage p { font-size: var(--t-sm); margin-bottom: 0; }

/* Numerowane filary / kroki */
.pillar .num {
  font-family: var(--font-display); font-size: var(--t-h2);
  color: var(--gold-700); display: block; line-height: 1;
  margin-bottom: var(--sp-2);
}

/* Osoby (D12): portret w pełnej wielkości. Karta pionowa (strona główna)
   i rząd portret + tekst (o nas). */
.team-photo { margin: 0 0 var(--sp-5); }
.team-photo img { width: 100%; aspect-ratio: 21 / 9; object-fit: cover; object-position: 50% 38%; border-radius: var(--r-lg); }
.people { display: grid; gap: var(--gutter); }
.person {
  display: grid; gap: var(--sp-4);
  background: var(--bg-raised); border: 1px solid var(--border); border-radius: var(--r-lg);
  overflow: hidden;
}
.person picture { display: block; }
.person-photo img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 15%; }
.person-body { padding: 0 var(--sp-5) var(--sp-5); }
.person-body > :last-child { margin-bottom: 0; }
.person h2, .person h3 { font-size: var(--t-h3); margin-bottom: var(--sp-1); }
.person .role { font-size: var(--t-sm); color: var(--fg-muted); margin-bottom: var(--sp-3); }
.person-links { display: flex; flex-wrap: wrap; gap: var(--sp-1) var(--sp-4); font-size: var(--t-sm); }
.person-links a { display: inline-flex; align-items: center; min-height: 44px; }
.person--row { gap: var(--sp-5); }
.person--row .person-body { padding: 0 var(--sp-5) var(--sp-5); }

.figure { margin: 0 0 var(--sp-5); }
.figure img { border-radius: var(--r-lg); }
.figure figcaption { font-size: var(--t-sm); color: var(--fg-muted); margin-top: var(--sp-2); }
.figure--wide img { width: 100%; aspect-ratio: 21 / 9; object-fit: cover; }

/* Bento (D13): trzy karty w rzędzie, obraz u góry. */
.bento { display: grid; gap: var(--gutter); }
.bento-card {
  display: flex; flex-direction: column;
  background: var(--bg-raised); border: 1px solid var(--border); border-radius: var(--r-lg);
  overflow: hidden;
}
.bento-media img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.bento-body { display: flex; flex-direction: column; flex: 1 1 auto; padding: var(--sp-5); }
.bento-body h2, .bento-body h3 { font-size: var(--t-h3); margin-bottom: var(--sp-2); }
.bento-body .lead { font-size: var(--t-base); line-height: var(--lh-base); margin-bottom: var(--sp-4); }
.bento-body .bento-action { margin-top: auto; margin-bottom: 0; }

/* Cienkie sekcje podstron złożone w siatkę kart (D16: karty zamiast cienkich sekcji) */
.cards { display: grid; gap: var(--gutter); }
.card h2 { font-size: var(--t-h3); }
.card-head { margin-bottom: var(--sp-3); }
.card-head p:last-child { margin-bottom: 0; }
.card-head .lead { font-size: var(--t-base); line-height: var(--lh-base); }
.card .btn-primary, .card .btn-secondary { margin-top: var(--sp-2); }
.people-rows { display: grid; gap: var(--gutter); }

/* Siatka 5:7 (D14) i 4:8 */
.split { display: grid; gap: var(--sp-6); align-items: start; }
.split-4-8 { display: grid; gap: var(--sp-6); align-items: start; }

/* Ciemne pasmo sekcji panelu (D14) */
.band-inverse .section-head .brandline { color: var(--fg); }
.band-inverse ul { color: var(--fg); }
.band-inverse .btn-secondary { color: var(--fg); border-color: var(--n-300); }
.band-inverse .btn-secondary:hover { background: var(--bg-inverse-raised); border-color: var(--n-50); }
.band-inverse .lead { color: var(--fg-muted); }
/* Ocena v2, D6: przy wysokiej prawej kolumnie H2 stało samotnie na dole
   230-pikselowej pustki — na pasmach podstron nagłówek 7:5 równa do góry. */
.band-inverse .head-split { margin-bottom: var(--sp-5); align-items: start; }
/* Ocena v2, P5: kolumna tekstu (465 px) jest niższa niż okno panelu — środkowanie
   zamiast 226 px pustki pod tekstem. */
.band-inverse .split { align-items: center; }
.band-inverse .head-aside p { max-width: 60ch; }

/* --- 8. Pytania i odpowiedzi -------------------------------------------- */
.qa { border-top: 1px solid var(--border); }
.qa > summary {
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4);
  min-height: 56px; cursor: pointer; list-style: none;
  font-family: var(--font-display); font-weight: var(--fw-semibold);
  font-size: var(--t-h4); line-height: var(--lh-h4);
}
.qa > summary::-webkit-details-marker { display: none; }
.qa > summary::after { content: "+"; flex: none; color: var(--gold-700); font-family: var(--font-text); }
.qa[open] > summary::after { content: "\2212"; }
.qa-body { padding-bottom: var(--sp-4); }
.qa-body > :last-child { margin-bottom: 0; }
/* Pytania w siatce: każde jako karta, żeby zwinięty wiersz nie był pustym pasem */
.qa-grid { display: grid; gap: var(--sp-3) var(--gutter); align-items: start; }
.qa-grid .qa { background: var(--bg-raised); border: 1px solid var(--border); border-radius: var(--r-md); padding-inline: var(--sp-4); }

/* --- 9. Formularze ------------------------------------------------------- */
.form-wrap { background: var(--bg-raised); border: 1px solid var(--border); border-radius: var(--r-lg); padding: var(--sp-5); }
.field { margin-bottom: var(--sp-4); }
.field > label, .fieldset > legend {
  display: block; font-weight: var(--fw-medium); margin-bottom: var(--sp-2);
}
.req { color: var(--clay-700); }
.hint { display: block; font-size: var(--t-sm); color: var(--fg-muted); margin-bottom: var(--sp-2); }
/* Dwa lub trzy pola w wierszu od 600 px — ten sam formularz, mniej wysokości (D16).
   Kontrolki w wierszu równają do dołu, żeby pola z podpowiedzią i bez stały w jednej linii. */
.field-row { display: grid; gap: 0 var(--sp-4); }
.field-row > .field { display: flex; flex-direction: column; }
.field-row > .field > input, .field-row > .field > select, .field-row > .field > textarea { margin-top: auto; }
/* Ocena v2, P3: w wierszu z grupą kontaktu (.span-2) wysokość wyznacza dwukolumnowy
   fieldset — samotna kontrolka obok niego nie równa do dołu (dawało 118 px
   między etykietą „Kiedy chcesz sprzedać" a listą). Wiersz z dwojgiem dzieci. */
.field-row-3 > .field:first-child:nth-last-child(2) > select,
.field-row-3 > .field:first-child:nth-last-child(2) > input { margin-top: 0; }

input[type="text"], input[type="tel"], input[type="email"], input[type="number"],
input[type="search"], select, textarea {
  width: 100%;
  min-height: 48px;
  padding: var(--sp-3);
  font-family: var(--font-text);
  font-size: var(--t-base);
  color: var(--fg);
  background: var(--bg-page);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-md);
}
textarea { min-height: 120px; resize: vertical; }
select {
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--fg) 50%),
                    linear-gradient(135deg, var(--fg) 50%, transparent 50%);
  background-position: right 20px center, right 14px center;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
  padding-right: var(--sp-8);
}
input:hover, select:hover, textarea:hover { border-color: var(--n-600); }
[aria-invalid="true"] { border-color: var(--clay-700); border-width: 2px; }

.fieldset { border: 0; padding: 0; margin: 0 0 var(--sp-4); }
.choices { display: grid; gap: var(--sp-2); }
.choice, .check {
  display: flex; align-items: flex-start; gap: var(--sp-3);
  min-height: 44px; padding: var(--sp-2) var(--sp-3);
  border: 1px solid var(--border); border-radius: var(--r-md);
  cursor: pointer;
}
.choice:hover, .check:hover { border-color: var(--border-strong); background: var(--bg-sunken); }
.choice input, .check input { width: 20px; height: 20px; margin-top: 2px; flex: none; accent-color: var(--gold-700); }
.check { align-items: flex-start; padding-block: var(--sp-3); }
.check span { font-size: var(--t-sm); }

.field-error {
  display: block; margin-top: var(--sp-2);
  font-size: var(--t-sm); font-weight: var(--fw-medium);
  color: var(--clay-700);
}
.field-error:empty { display: none; }

.form-msg { border-radius: var(--r-md); padding: var(--sp-4); margin-bottom: var(--sp-5); }
.form-msg[hidden] { display: none; }
.form-msg h3 { font-size: var(--t-h4); margin-bottom: var(--sp-2); }
.form-msg ul { margin-bottom: 0; }
.form-msg.is-error, .form-msg.is-server { background: var(--clay-100); color: var(--n-900); border-left: 4px solid var(--clay-700); }
.form-msg.is-ok { background: var(--green-100); color: var(--n-900); border-left: 4px solid var(--green-700); }
.form-msg.is-error a, .form-msg.is-server a { color: var(--clay-700); }

.form-foot { border-top: 1px solid var(--border); padding-top: var(--sp-4); margin-top: var(--sp-5); }
.form-foot p { font-size: var(--t-sm); color: var(--fg-muted); max-width: none; }
button[aria-busy="true"] { cursor: progress; }

/* --- 10. Blok kontaktu --------------------------------------------------- */
/* Sekcja kontaktu: nagłówek i dane biura w jednym wierszu 4:8, pod spodem
   formularz na pełnej szerokości w karcie (D16 — bez pustej lewej kolumny). */
.contact-head { margin-bottom: var(--sp-5); }
.contact-head .section-head { margin-bottom: 0; }
.contact-dl { display: grid; gap: var(--sp-3) var(--sp-6); margin: 0; }
.contact-dl > div { min-width: 0; }
.contact-dl dd { margin-bottom: 0; }
.contact-form { background: var(--bg-raised); border: 1px solid var(--border); border-radius: var(--r-lg); padding: var(--sp-5); }
.contact-form .form-wrap { border: 0; padding: 0; background: transparent; border-radius: 0; }
.form-intro h3 { margin-bottom: var(--sp-2); }
.form-intro .lead { margin-bottom: var(--sp-5); }
.check-row { display: grid; gap: var(--sp-2) var(--sp-4); }
.check-row .fieldset { margin-bottom: 0; }
.check-row + .form-submit, .fieldset + .form-submit { margin-top: var(--sp-4); }
.form-submit { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-3) var(--sp-5); }
.form-submit .hint { margin: 0; }
.contact-block dl { margin: 0 0 var(--sp-5); }
.contact-block dt {
  font-size: var(--t-xs); font-weight: var(--fw-medium);
  letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--fg-muted);
  margin-bottom: var(--sp-1);
}
.contact-block dd { margin: 0 0 var(--sp-4); }
.contact-big { font-family: var(--font-display); font-size: var(--t-h3); }
/* Telefon i e-mail w bloku kontaktu to cele główne, nie odnośniki w zdaniu. */
.contact-block dd > a { display: inline-flex; align-items: center; min-height: 44px; }

/* Podsumowanie zgłoszenia na ekranie potwierdzenia (§6.2, §7.3) */
.sent-summary { border: 1px solid var(--border); border-radius: var(--r-md);
  padding: var(--sp-4); margin-bottom: var(--sp-5); }
.sent-summary h2 { font-size: var(--t-h4); margin-bottom: var(--sp-3); }
.sent-summary dl { margin: 0; }
.sent-summary dt { font-size: var(--t-xs); font-weight: var(--fw-medium);
  letter-spacing: var(--ls-label); text-transform: uppercase;
  color: var(--fg-muted); margin-bottom: var(--sp-1); }
.sent-summary dd { margin: 0 0 var(--sp-3); }
.sent-summary dd:last-child { margin-bottom: 0; }

/* --- 11. Demo panelu właściciela (D11): renderowany interfejs ----------- */
/* Okno panelu jest jasne także na ciemnym paśmie — lokalne odwrócenie ról
   z tokenów bazowych, żeby wyglądało jak produkt, nie jak tekst na paśmie. */
.app {
  --bg-page: var(--n-50);
  --bg-raised: var(--n-0);
  --bg-sunken: var(--n-100);
  --fg: var(--n-900);
  --fg-muted: var(--n-600);
  --fg-link: var(--gold-700);
  --border: var(--n-200);
  --border-strong: var(--n-400);
  --focus-ring: var(--gold-700);
  background: var(--bg-raised);
  color: var(--fg);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-3);
  overflow: hidden;
}
.app-bar {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2) var(--sp-4);
  padding: var(--sp-3) var(--sp-5);
  background: var(--bg-sunken);
  border-bottom: 1px solid var(--border);
}
.app-bar .badge { background: var(--gold-500); color: var(--n-900); flex: none; }
.app-title { font-size: var(--t-sm); margin: 0; max-width: none; }
.app-title strong { font-weight: var(--fw-medium); }
/* Ocena v2, P5: mniejszy dolny padding okna panelu i widoku (pasmo ≈ 690 px). */
.app-body { padding: var(--sp-4) var(--sp-5) var(--sp-4); }
.app-note {
  font-size: var(--t-sm); color: var(--fg-muted);
  margin: var(--sp-3) 0 0; max-width: none;
}
.app .status-ok { color: var(--green-700); background: transparent; }
.status-dot {
  display: inline-block; width: 8px; height: 8px; border-radius: 50%;
  background: currentColor; margin-right: var(--sp-2); vertical-align: middle; position: relative; top: -2px;
}

.tabs { display: none; gap: var(--sp-1); border-bottom: 1px solid var(--border); margin-bottom: var(--sp-5); }
.tabs button {
  min-height: 48px; padding-inline: var(--sp-3);
  background: transparent; border: 0; border-bottom: 3px solid transparent;
  font: var(--fw-medium) var(--t-sm)/1.2 var(--font-text);
  color: var(--fg-muted); cursor: pointer;
  transition: color var(--dur-1) var(--ease-std), border-color var(--dur-1) var(--ease-std);
}
.tabs button:hover { color: var(--fg); }
.tabs button[aria-selected="true"] { color: var(--fg); border-bottom-color: var(--gold-500); }
.js-on .tabs { display: flex; flex-wrap: wrap; }

.panel-view { border-top: 1px solid var(--border); }
.panel-view:first-child { border-top: 0; }
.js-on .panel-view { border-top: 0; }
.panel-view > summary {
  display: flex; align-items: center; justify-content: space-between;
  min-height: 56px; cursor: pointer; list-style: none;
  font-family: var(--font-display); font-size: var(--t-h4); font-weight: var(--fw-semibold);
}
.panel-view > summary::-webkit-details-marker { display: none; }
.panel-view > summary::after { content: "+"; color: var(--gold-700); font-family: var(--font-text); }
.panel-view[open] > summary::after { content: "\2212"; }
.panel-body { padding-bottom: var(--sp-2); }
.panel-body > :last-child { margin-bottom: 0; }
.panel-body h4 { font-size: var(--t-xs); font-weight: var(--fw-medium); letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--fg-muted); margin: var(--sp-4) 0 var(--sp-2); font-family: var(--font-text); }
.panel-body h4:first-child { margin-top: 0; }
.panel-body p { max-width: none; }
.panel-body .hint { display: inline; }
.panel-body p > .hint, .panel-body dd > .hint { display: block; margin: var(--sp-1) 0 0; font-size: var(--t-xs); }
.panel-body table { font-size: var(--t-sm); }
.panel-body th, .panel-body td { padding: var(--sp-2) var(--sp-3); }
.panel-body .table-wrap { margin-bottom: var(--sp-3); }
.demo-line {
  font-size: var(--t-xs); font-weight: var(--fw-medium);
  letter-spacing: var(--ls-label); text-transform: uppercase;
  color: var(--fg-muted); margin-bottom: var(--sp-3);
}
.tiles { display: grid; gap: var(--sp-3); grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 0 0 var(--sp-3); }
.tile { border: 1px solid var(--border); border-radius: var(--r-md); padding: var(--sp-3) var(--sp-4); background: var(--bg-page); }
.tile dt { font-size: var(--t-xs); color: var(--fg-muted); margin-bottom: var(--sp-1); letter-spacing: var(--ls-label); text-transform: uppercase; font-weight: var(--fw-medium); }
.tile dd { margin: 0; font-family: var(--font-display); font-size: var(--t-h4); line-height: var(--lh-h4); }
.tile dd .hint { font-family: var(--font-text); }
.tile-num { font-size: var(--t-h3); }

.app-cols { display: grid; gap: var(--sp-5); margin-top: var(--sp-2); }
.timeline { list-style: none; margin: 0; padding: 0; border-left: 2px solid var(--border); }
.timeline li { position: relative; margin: 0; padding: 0 0 var(--sp-3) var(--sp-4); font-size: var(--t-sm); max-width: none; }
.timeline li:last-child { padding-bottom: 0; }
.timeline li::before {
  content: ""; position: absolute; left: -5px; top: 0.45em;
  width: 8px; height: 8px; border-radius: 50%; background: var(--gold-500);
}
.timeline time { display: block; font-size: var(--t-xs); color: var(--fg-muted); font-weight: var(--fw-medium); letter-spacing: var(--ls-sm); }
.next-step { border: 1px solid var(--border); border-left: 3px solid var(--gold-500); border-radius: var(--r-md); padding: var(--sp-3) var(--sp-4); background: var(--bg-page); align-self: start; }
.next-step h4 { margin-top: 0; }
.next-step p { margin-bottom: 0; }
.next-step .next-title { font-family: var(--font-display); font-size: var(--t-h4); margin-bottom: var(--sp-1); }
.plain-list { list-style: none; padding: 0; margin: 0 0 var(--sp-3); }
.plain-list li { margin: 0; padding-block: var(--sp-1); border-bottom: 1px solid var(--border); font-size: var(--t-sm); max-width: none; }
.plain-list li:last-child { border-bottom: 0; }
.price { font-family: var(--font-display); font-size: var(--t-h4); }

/* Zakładki włączone przez JS: kontener o stałej wysokości (blokada CLS) */
.js-on .panel-stack { min-height: var(--panel-min-h, 0); }

/* Notka demo na stronie narzędzia (stary wariant; zostaje dla zgodności) */
.demo-notice {
  display: flex; gap: var(--sp-3); align-items: flex-start;
  background: var(--n-900); color: var(--n-50);
  border-radius: var(--r-md); padding: var(--sp-4);
  margin-bottom: var(--sp-5); font-weight: var(--fw-medium);
}
.demo-notice svg { width: 24px; height: 24px; flex: none; color: var(--gold-500); }
.demo-notice p { margin: 0; max-width: none; }

/* --- 12. Tabele ---------------------------------------------------------- */
.table-wrap { overflow-x: auto; margin-bottom: var(--sp-5); }
.section-band .table-wrap { background: var(--bg-raised); border: 1px solid var(--border); border-radius: var(--r-lg); padding: var(--sp-3) var(--sp-4); }
table { width: 100%; border-collapse: collapse; font-size: var(--t-sm); }
caption { text-align: left; font-size: var(--t-sm); color: var(--fg-muted); margin-bottom: var(--sp-2); }
th, td { text-align: left; padding: var(--sp-3); border-bottom: 1px solid var(--border); vertical-align: top; }
thead th { border-bottom: 2px solid var(--border-strong); white-space: nowrap; }

/* --- 13. Stan pusty jako dwa wejścia ------------------------------------- */
.entry-cards { display: grid; gap: var(--gutter); margin-bottom: var(--sp-6); }
.entry-card { border: 1px solid var(--border-strong); border-radius: var(--r-lg); padding: var(--sp-5); background: var(--bg-raised); }
.entry-card h2, .entry-card h3 { font-size: var(--t-h3); }
.entry-card .form-wrap { border: 0; padding: 0; background: transparent; }
.exit-line { border-top: 1px solid var(--border); padding-top: var(--sp-4); max-width: none; }
.exit-line a, .hero-note a { display: inline-block; padding-block: var(--sp-2); }

/* --- 14. Mapa dzielnic --------------------------------------------------- */
.districts { display: grid; gap: var(--gutter); }
.district-map { display: none; }
.district-map svg { width: 100%; height: auto; }
.dm-shape { fill: none; stroke: var(--n-400); stroke-width: 2; }
.dm-shape.is-active { fill: var(--gold-500); stroke: var(--gold-600); }
.dm-label { font-family: var(--font-text); font-size: 13px; fill: var(--fg-muted); }
.dm-river { fill: var(--n-200); }
.district-list { list-style: none; margin: 0; padding: 0; }
.district-list li { border-bottom: 1px solid var(--border); margin: 0; max-width: none; }
.district-list a { display: block; min-height: 48px; padding-block: var(--sp-3); color: var(--fg); }
.district-list .is-off { display: block; min-height: 48px; padding-block: var(--sp-3); color: var(--fg-muted); }
.district-list .dl-name { font-weight: var(--fw-medium); color: var(--fg); }
.district-list .dl-note { display: block; font-size: var(--t-sm); color: var(--fg-muted); }

/* --- 15. Kreator wyceny -------------------------------------------------- */
.wizard-progress { margin-bottom: var(--sp-5); }
.wizard-progress p { font-weight: var(--fw-medium); margin-bottom: var(--sp-2); }
.bar { height: 8px; background: var(--bg-sunken); border-radius: var(--r-pill); overflow: hidden; }
.bar span { display: block; height: 100%; background: var(--gold-500); }
.step { border-top: 1px solid var(--border); padding-top: var(--sp-5); margin-bottom: var(--sp-5); }
.step legend { font-family: var(--font-display); font-size: var(--t-h3); font-weight: var(--fw-semibold); }
.js-on .step { border-top: 0; padding-top: 0; }
.js-on .step[hidden] { display: none; }
.wizard-nav { display: flex; flex-wrap: wrap; gap: var(--sp-3); align-items: center; }
.wizard-nav .btn-primary { flex: 1 1 200px; }
.tool-grid { display: grid; gap: var(--gutter); align-items: start; }

/* --- 16. Kalkulator ------------------------------------------------------ */
.calc-grid { display: grid; gap: var(--gutter); }
.calc-result { border: 1px solid var(--border); border-radius: var(--r-lg); padding: var(--sp-5); background: var(--bg-raised); }
.calc-result.is-muted { opacity: 0.55; }
.calc-blocked { border-left: 4px solid var(--clay-700); background: var(--clay-100); padding: var(--sp-4); border-radius: var(--r-md); }
.calc-blocked > :last-child { margin-bottom: 0; }
.calc-total { display: flex; justify-content: space-between; gap: var(--sp-4); border-top: 2px solid var(--border-strong); padding-top: var(--sp-3); font-family: var(--font-display); font-size: var(--t-h3); }

/* --- 17. Plakietki i noty ------------------------------------------------ */
.badge {
  display: inline-block; border-radius: var(--r-pill);
  padding: var(--sp-1) var(--sp-3); font-size: var(--t-xs);
  font-weight: var(--fw-medium); letter-spacing: var(--ls-label); text-transform: uppercase;
}
.note {
  border-left: 4px solid var(--gold-500);
  background: var(--gold-100);
  padding: var(--sp-4); border-radius: var(--r-md);
  margin-bottom: var(--sp-5);
}
.note > :last-child { margin-bottom: 0; }
.todo {
  font-family: var(--font-text); font-size: 0.9em;
  background: var(--bg-sunken); border-bottom: 1px dashed var(--n-400);
  padding-inline: 2px;
}

.hide-narrow { display: none; white-space: nowrap; }

/* --- 18. Ruch: wejście sekcji w widok (D17, ocena v2 B1) ---------------- */
/* Stan spoczynkowy jest widoczny w każdym dokumencie — także pod html.js.
   Żadna reguła nie ustawia opacity: 0 w spoczynku; wejście to jednorazowa
   animacja 12 px / --dur-2 / --ease-out (identyfikacja §8.3), odpalana klasą
   .is-in, którą nadaje IntersectionObserver (próg 0, rootMargin 0 0 -10%).
   Element widoczny już przy załadowaniu albo przy wejściu z kotwicy dostaje
   .is-in bez animacji (.is-immediate) — nagłówek jest na ekranie w chwili,
   w której ekran się pojawia. */
.reveal { opacity: 1; }
@keyframes reveal-in {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: none; }
}
html.js .reveal.is-in { animation: reveal-in var(--dur-2) var(--ease-out) 1 both; }
html.js .reveal.is-in.is-immediate { animation: none; }

/* --- 19. Punkty zmiany układu ------------------------------------------- */
@media (min-width: 37.5rem) {          /* 600 */
  .cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cols-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .entry-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .paths ul { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .paths a { border-bottom: 0; }
  .paths li + li a { border-left: 1px solid var(--border); }
  .hero-actions .btn-primary, .hero-actions .btn-secondary { flex: 0 0 auto; }
  .field-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .contact-dl { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .form-wide .btn-block { width: auto; min-width: 20rem; }
  .tiles { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  /* Ocena v2, D1: przy czterech kaflach „Prezentacja" w --t-h4 miało 109 px
     w kaflu o 94 px — wartość kafla w --t-base, liczby (.tile-num) bez zmian. */
  .tile dd { font-size: var(--t-base); line-height: var(--lh-base); }
  .app-cols { grid-template-columns: 3fr 2fr; }
}

@media (min-width: 48rem) {            /* 768 */
  .cards-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cards-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .people { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .person--row { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: start; }
  .person--row .person-body { padding: var(--sp-5) var(--sp-5) var(--sp-5) 0; }
  .bento { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .footer-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--gutter); }
  .districts { grid-template-columns: 1fr 1fr; align-items: start; }
  .district-map { display: block; }
  .calc-grid { grid-template-columns: 1fr 1fr; align-items: start; }
  .tool-grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
  .head-split { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
  .field-row-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .field-row-3 > .span-2 { grid-column: span 2; }
  .field-row-3 > .fieldset { margin-bottom: var(--sp-4); }
  .check-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .form-wide .form-foot p { column-count: 2; column-gap: var(--sp-6); }
  /* Hero: tekst na prawej połowie, na ścianie; kadr znów na środek (D7 dotyczy
     wąskiego ekranu). Welon tylko pod .hero-copy — reguła wspólna wyżej. */
  .hero { align-items: center; }
  .hero .hero-media img { object-position: 50% 50%; }
  .hero-inner { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gutter); }
  .hero-copy { grid-column: 2; }
  /* Ocena v2, D8: tytuły kart bento łamały się na 2 i 3 wiersze, leady startowały
     na trzech wysokościach — tytuł ma wysokość trzech wierszy. */
  .bento-body h2 { min-height: calc(var(--lh-h2) * 3em); }
  .bento-body h3 { min-height: calc(var(--lh-h3) * 3em); }
  .page-hero { align-items: center; }
  .page-hero .hero-inner { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .page-hero .hero-copy { grid-column: 1 / span 8; }
  .page-hero--right .hero-copy { grid-column: 6 / span 7; }
}

@media (min-width: 56.25rem) {         /* 900 */
  .tel-link .tel-label { display: inline; }
  .hide-narrow { display: inline-flex; }
  /* Ocena v2, P5: wiersz 36 px zamiast 44 (cele dotykowe 44 px są potrzebne
     poniżej 900 px), listy bez dolnego marginesu, mniejszy odstęp od leadu.
     Cztery kolumny („Formalne" pod „Narzędzia") sprawdzone i odrzucone: kolumna
     złożona (4 + 2 pozycje, dwa nagłówki) była wyższa niż „Biuro" — stopka
     rosła do 594 px przy 64,6% pustych komórek. Zostaje pięć kolumn. */
  .footer-cols { grid-template-columns: repeat(5, minmax(0, 1fr)); margin-block: var(--sp-4) var(--sp-5); }
  .footer-col ul { margin-bottom: 0; }
  .footer-col > summary { pointer-events: none; min-height: 36px; }
  .footer-col > summary::after { content: none; }
  .footer-col li a { min-height: 36px; padding-block: var(--sp-1); }
  /* Ocena v2, P5: nagłówek formularza w jednym wierszu (H3 obok leadu). */
  .form-intro { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 var(--sp-5); }
  .form-intro h3, .form-intro .lead { margin-bottom: var(--sp-4); }
  .split { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--sp-7); }
  .split-4-8 { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: var(--sp-7); }
  .sticky-bar { display: none; }
  body { padding-bottom: 0; }
  .page-hero .hero-copy { grid-column: 1 / span 7; }
  .page-hero--right .hero-copy { grid-column: 6 / span 7; }
  /* D21: dwie kolumny pytań tylko przy co najmniej czterech; przy 2–3 jedna kolumna
     na pełnej szerokości kontenera (pusta komórka to wada, nie układ). */
  .qa-grid:has(.qa:nth-child(4)) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Menu poziome dopiero tam, gdzie mieści się komplet z §8.1: znak, sześć pozycji,
   telefon, działanie główne i przełącznik języka. Niżej — przycisk menu. */
@media (min-width: 75rem) {            /* 1200 */
  .site-header .menu { display: none; }
  .header-nav { display: block; }
  .hero .brandline { font-size: var(--t-h3); line-height: var(--lh-h3); }
}

/* Sekcje pokrewne: listwa ścieżek i plan czternastu dni — 48 px (D16) */
@media (min-width: 64rem) { .order-plan { padding-top: var(--sp-7); } }

/* Wąski ekran: kolejność sekcji z §9.4 */
@media (max-width: 56.24rem) {
  .order-plan { order: -1; }
  .home-flow { display: flex; flex-direction: column; }
}

/* --- 20. Ograniczenie ruchu ---------------------------------------------- */
/* Tokeny §17 skracają czasy do 1 ms; tu dodatkowo znikają przesunięcia
   i skalowania, zostaje wyłącznie zmiana koloru (identyfikacja §8.4). */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  html.js .reveal.is-in { animation: none; }
  .card-hover:hover, .card-hover:focus-within { transform: none; }
  .paths a:hover::after { transform: none; }
}
/* Ocena v2, D2: przewijanie płynne dopiero po zdarzeniu load (klasa is-ready ze
   skryptu) — wejście z kotwicy jest skokiem, nie przejazdem przez całą stronę;
   kliknięcie w kotwicę na załadowanej stronie przewija płynnie. */
@media (prefers-reduced-motion: no-preference) {
  html.is-ready { scroll-behavior: smooth; }
}

/* Druk: wersja czytelna, bez ramy nawigacyjnej */
@media print {
  .site-header, .sticky-bar, .site-footer nav, .skip { display: none; }
  body { padding-bottom: 0; }
  .hero, .page-hero { min-height: 0; margin-top: 0; padding-top: 0; }
  .hero-media { display: none; }
  html.js .reveal.is-in { animation: none; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 0.85em; }
}

/* Pole antyspamowe formularzy — niewidoczne dla użytkownika, dostępne w DOM dla botów. */
.honeypot-field { position:absolute !important; left:-10000px !important; width:1px !important; height:1px !important; overflow:hidden !important; }