/* =========================================================================
   styles.css — WSPÓLNY arkusz stylów dla adwokatbednarek.pl
   Wyodrębniony z inline <style> (migracja do buildless). Każda strona
   linkuje ten plik; NIE wklejaj CSS inline. Nowe reguły dokładaj TUTAJ.
   Zawiera: system współdzielony + bloki PODSTRONA (unia wszystkich sekcji).
   ========================================================================= */

/* ═══════════════════════════════════════════════════════════════════════
   SYSTEM — adwokatbednarek.pl
   Źródło prawdy: ../../DESIGN_BOARD.md  ·  Katalog: ../../SECTIONS.md
   Ten plik jest wspólny dla WSZYSTKICH stron. Zmiana tutaj = zmiana wszędzie.

   • Typo: skala 1.25 (Major Third), baza 16px
     13 → 16 → 20 → 25 → 31 → 39 → 49 → 61
     Nagłówki = Libre Baskerville (serif), tekst = Libre Franklin (sans)
   • Odstępy: moduł 8px (8 · 16 · 24 · 32 · 40 · 48 · 64 · 96)
   • Breakpointy: TYLKO 768 / 1024, mobile-first
   • Radius: 0 struktura · 50% awatary · 30px pigułka CTA
   • Bez cieni. Bez gradientów. Akcent wyłącznie brass.
   ═══════════════════════════════════════════════════════════════════════ */

:root{
  /* ——— paleta operacyjna (DESIGN_BOARD B) ———
     2026-07-20: PRZEJŚCIE Z GRANATU NA ZIELEŃ ADWOKACKĄ. Zieleń jest kolorem
     żabotu adwokackiego, więc niesie znaczenie, którego granat nie niósł.
     Rodzina wyprowadzona z zieleni logo MRB (#215a40) — butelkowy szmaragd,
     hue ~155 — a nie z przypadkowej zieleni. Każdy token dostał wartość
     o TYM SAMYM kontraście co granatowy poprzednik (podany w nawiasie),
     więc progi WCAG z boardu zostały nienaruszone. */
  --ink:#13271e;            /* 15.71:1 na paper — AAA  (granat #16233f · 15.60) */
  --green:#1a4231;          /* 11.24:1 na paper — AAA  (granat #233a5f · 11.40) */
  --green-deep:#0f2419;     /* 16.32:1 na paper        (granat #14213b · 16.03) */
  /* REZERWACJA bez konsumenta od 2026-07-16 (kasacja .bento — jedynego
     klikalnego kafla zielonego). Zostaje, bo niesie regułę hover z DESIGN_BOARD E
     („kafel zielony → rozjaśnienie tła o stopień"); wróci przy pierwszym
     klikalnym kaflu zielonym. Nie usuwać bez zmiany boardu (paleta B). */
  --green-hover:#215540;    /*                         (granat #28426b) */
  --paper:#ffffff;
  /* neutralne: te same jasności co wcześniej, tint przesunięty z chłodnego
     niebieskiego na chłodny zielony; paper zostaje czystą bielą */
  --surface:#f0f5f2;        /*                         (granat #f1f5f9) */
  --surface-2:#e5ede8;      /*                         (granat #e7edf5) */
  --hairline:#d3e0d8;       /*                         (granat #d5deea) */
  --steel:#385c4b;          /*  7.50:1 na paper — AAA  (granat #42557a · 7.47) */
  /* ——— AKCENT: brass BEZ ZMIAN przy przejściu na zieleń ———
     Mosiądz na butelkowej zieleni to ten sam klasyczny duet co na granacie —
     wręcz bliższy tradycji (zielony żabot + złocenia). Kontrast sprawdzony
     na nowym ciemnym tle i NIE spadł. */
  --brass:#8a6a2b;          /*  5.03:1 na paper — AA  */
  --brass-deep:#6f5420;     /*  7.08:1 na paper — AAA (hover na jasnym) */
  --brass-bright:#a8823a;   /*  4.60:1 na green-deep — AA (akcent na ciemnym; na granacie 4.52) */
  --brass-light:#c79a4f;    /*  6.34:1 na green-deep — hover akcentu na ciemnym tle */
  --white:#ffffff;

  /* ——— tekst na ciemnym tle ———
     NIE używać rgba(255,255,255,…) do tekstu. Tylko te tokeny.
     Przeliczone na --green-deep, nie na dawny granat. */
  --on-dark:#dbeae1;        /* 13.1:1 na green-deep — AAA (granat #dbe4f1 · 12.5) */
  --on-dark-muted:#9dbcab;  /*  7.9:1 na green-deep — AAA (granat #9fb0c9 ·  7.3) */
  --on-dark-line:rgba(255,255,255,.14);

  /* tło nagłówka po przewinięciu — półprzezroczyste świadomie (backdrop-filter) */
  --header-bg-solid:rgba(255,255,255,.97);

  /* ——— logo MRB: zarezerwowane, NIEOPERACYJNE (DESIGN_BOARD B) ———
     Wyłącznie w oryginalnym lockupie MRB. Nigdzie indziej.
     CELOWO NIETKNIĘTE przy przejściu na zieleń: to kolory cudzego znaku
     firmowego, nie paleta strony. --mrb-navy zostaje granatowy — przemalowanie
     logo pod paletę witryny byłoby fałszowaniem identyfikacji MRB. */
  --mrb-navy:#233a5f;
  --mrb-green:#215a40;
  --mrb-gray:#919191;

  /* ——— typografia ——— */
  --serif:"Libre Baskerville",Georgia,"Times New Roman",serif;
  --sans:"Libre Franklin","Segoe UI",system-ui,sans-serif;

  /* ——— DRABINKA — jedyne miejsce z surowymi px rozmiaru ———
     Skala 1.25 (Major Third), baza 16. Poza tą listą nie ma nic; wszystko
     niżej to ALIAS ROLI na szczebel. Chcesz zmienić skalę — zmieniasz tutaj.
     14px jest szczeblem świadomym, nie pomyłką: niesie nawigację i stopkę,
     czyli chrome, który ma stać stopień poniżej treści (DESIGN_BOARD C). */
  --fs-13:13px;
  --fs-14:14px;
  --fs-16:16px;
  --fs-20:20px;
  --fs-25:25px;
  --fs-31:31px;
  --fs-39:39px;
  --fs-49:49px;
  --fs-61:61px;

  /* ——— role — alias na szczebel ——— */
  --fs-micro:var(--fs-13);            /* eyebrow, etykiety UPPERCASE */
  --fs-small:var(--fs-14);            /* meta, podpisy, nawigacja, stopka */
  --fs-body:var(--fs-16);             /* wszystkie akapity */
  --fs-lead:var(--fs-20);             /* wprowadzenia, wyróżnione dane */
  /* Skala nagłówków: każdy poziom WYRAŹNIE większy od akapitu (16px), a hierarchię
     niesie ROZMIAR + brass (eyebrow / .sig) i kolor — NIE waga. Dlatego h1–h5 stoją
     na 400; bold jest zarezerwowany dla <strong> w treści (.tresc) i dla akcentów
     (.idx, marka), nie dla nagłówków. (2026-07-20: <strong> zniknął z hero razem
     ze skróceniem h1 strony głównej — dziś żaden nagłówek w serwisie nie jest boldem.) (2026-07-17: h2 zdjęte z 49→39, tytuł karty z 31→25, h3/h4 → 400 —
     bold-szeryf w kartach był cięższy niż regularne H2 i spłaszczał hierarchię.)
       h4 25 = 1,56× · h3 31 = 1,94× (karta capowana do 25) · h2 31→39 = 1,94×→2,44× · h1 39→61 (hero cap 49) */
  --fs-h4:var(--fs-25);               /* nagłówek kafla (kroki/punkty/przebieg) */
  --fs-h3:var(--fs-31);               /* h3 rung — podtytuł redakcyjny (.tresc); tytuł karty capowany do 25 w .quad-cell */
  --fs-h2:clamp(var(--fs-31),3.4vw,var(--fs-39));
  --fs-h1:clamp(var(--fs-39),5vw,var(--fs-61));
  --fs-display:var(--fs-h1);          /* liczby „w liczbach" — ta sama skala co h1 (DESIGN_BOARD C) */

  --lh-body:1.5;
  --header-h:88px;

  /* ——— layout ——— */
  --container:1200px;
  --measure:620px;                    /* ~72 znaki przy 16px sans */
  --tr:all .2s ease-in-out;           /* jedna tranzycja na całą stronę */
}

*{margin:0;padding:0;box-sizing:border-box}
/* Nagłówek jest sticky (88px), więc kotwica bez zapasu ląduje POD nim.
   Dotyczy też skip-linku #main — bez tego funkcja dostępnościowa przenosi
   fokus pod niewidoczny obszar. Zapas = wysokość nagłówka + 16px oddechu. */
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--header-h) + 16px)}
body{
  font-family:var(--sans);
  font-size:var(--fs-body);
  line-height:var(--lh-body);
  color:var(--ink);
  background:var(--paper);
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
::selection{background:var(--surface-2);color:var(--ink)}

.container{max-width:var(--container);margin:0 auto;padding:0 24px}
@media(min-width:1024px){.container{padding:0 40px}}

/* skip-link (a11y) */
.skip{position:absolute;left:-9999px;top:0;z-index:200;background:var(--green);color:var(--white);padding:12px 20px}
.skip:focus{left:16px;top:12px;color:var(--white)}
a:focus-visible,button:focus-visible{outline:2px solid var(--brass-bright);outline-offset:3px}


/* Interlinie nagłówków: MINIMUM 1.25. Libre Baskerville ma wysokość znaku
   ~1.16em, a polskie ogonki (ą, ę) schodzą poniżej — przy 1.1–1.2 wiersze
   stykają się ze sobą. Nie schodzić poniżej 1.25 na szeryfie. */
h1,h2,h3,h4,h5{font-family:var(--serif);color:var(--green);font-weight:400;letter-spacing:-.25px}
h1{font-size:var(--fs-h1);line-height:1.25;letter-spacing:-.5px;color:var(--ink)}
h2{font-size:var(--fs-h2);line-height:1.25}
h3{font-size:var(--fs-h3);line-height:1.3;font-weight:400}
h4{font-size:var(--fs-h4);line-height:1.4;font-weight:400;color:var(--ink)}
/* KROK 2 (wariant B): tekst ciągły ma JEDEN rozmiar — --fs-body (16px). .lead
   nie podbija już rozmiaru; interlinia == --lh-body (1.5), więc leady i akapity
   są nierozróżnialne rozmiarem. --fs-lead (20px) zostaje TOKENEM roli (h4-alias,
   brand, dane kontaktu, pytania FAQ) — flatten dotyczy tylko KLASY .lead. */
.lead{font-size:var(--fs-body);line-height:var(--lh-body);color:var(--ink)}
p{max-width:var(--measure)}

a{color:var(--brass);text-decoration:none;transition:var(--tr)}
a:hover{color:var(--brass-deep)}

/* ——— mikrotypografia ——— */
.eyebrow{
  font-weight:600;font-size:var(--fs-micro);
  letter-spacing:.16em;text-transform:uppercase;color:var(--brass);
  display:inline-block;
}
/* linia-sygnatura 48×3 brass — JEDYNY wariant na całej stronie */
.sig{display:block;width:48px;height:3px;background:var(--brass);margin:16px 0 24px}
.sig-center{margin-left:auto;margin-right:auto}
.num{font-variant-numeric:tabular-nums}

/* chevron: motyw przewodni (DESIGN_BOARD E) — JEDNA klasa,
   SVG wpisany w markup (stroke 2px, linecap round) */
.chev-svg{display:inline-block;vertical-align:middle;flex:0 0 auto;transition:var(--tr)}

/* link tekstowy ze strzałką */
.link-x{font-weight:600;color:var(--brass);display:inline-flex;align-items:center;gap:8px;transition:var(--tr);cursor:pointer}
.link-x:hover{color:var(--brass-deep);gap:12px}


/* ═══════════════════════════════════════════════════════════
   BLOK TREŚCI REDAKCYJNEJ  —  <div class="tresc"> … </div>
   Każdy dłuższy tekst (podstrony, wpisy, nota prawna) idzie TUTAJ.
   Nie stylować ul/ol/blockquote ad hoc — to jest jedyne miejsce.
   ═══════════════════════════════════════════════════════════ */
.tresc{max-width:var(--measure)}
.tresc > * + *{margin-top:24px}
.tresc h2{margin-top:48px}
.tresc h3,.tresc h4{margin-top:40px}
.tresc > :first-child{margin-top:0}
.tresc p{max-width:none}
.tresc strong{font-weight:600;color:var(--ink)}
.tresc a{text-decoration:underline;text-underline-offset:3px}

.tresc ul,.tresc ol{list-style:none;display:flex;flex-direction:column;gap:12px}
.tresc li{position:relative;padding-left:28px}
.tresc li > ul,.tresc li > ol{margin-top:12px}

/* punktor = chevron, nie kropka (DESIGN_BOARD E: chevron jest systemem).
   maska + background:var(--brass) — dzięki temu kolor zostaje tokenem,
   czego nie da się osiągnąć kolorując SVG wewnątrz data-URI. */
.tresc ul li::before{
  content:"";position:absolute;left:2px;top:.42em;width:7px;height:12px;
  background:var(--brass);
  -webkit-mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 7 12'><path d='M1 1l5 5-5 5' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/></svg>") no-repeat center/contain;
  mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 7 12'><path d='M1 1l5 5-5 5' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/></svg>") no-repeat center/contain;
}

.tresc ol{counter-reset:li}
.tresc ol li{counter-increment:li}
.tresc ol li::before{
  content:counter(li) ".";
  position:absolute;left:0;top:0;
  font-family:var(--serif);font-weight:700;color:var(--brass);
}

/* cytat blokowy — kreska brass, echo linii-sygnatury */
.tresc blockquote{border-left:3px solid var(--brass);padding-left:24px}
.tresc blockquote p{font-family:var(--serif);font-style:italic;color:var(--ink)}
.tresc blockquote cite{display:block;margin-top:12px;font-family:var(--sans);font-style:normal;font-size:var(--fs-small);color:var(--steel)}

.tresc figure figcaption{margin-top:12px;font-size:var(--fs-small);color:var(--steel)}
.tresc hr{border:0;height:1px;background:var(--hairline);margin-top:48px}


/* ═══════════════════════════════════════════════════════════
   PRZYCISK CTA — jeden kształt, dwa warianty
   ═══════════════════════════════════════════════════════════ */
.btn-pill{
  font-family:var(--sans);font-size:var(--fs-micro);font-weight:600;line-height:1.4;
  letter-spacing:.08em;text-transform:uppercase;color:var(--white);
  background:var(--brass);border:1px solid var(--brass);border-radius:30px;cursor:pointer;
  display:inline-flex;align-items:center;gap:32px;padding:12px 32px 12px 40px;
  transition:var(--tr);
}
.btn-pill:hover{background:var(--brass-deep);border-color:var(--brass-deep);color:var(--white)}
.btn-pill .arrow{width:27px;height:14px;flex:0 0 auto;transition:var(--tr)}
.btn-pill:hover .arrow{transform:translateX(4px)}

/* wariant na ciemnym tle — brass na zieleni ma 2.3:1 i gubi się jako CTA */
.btn-pill--ghost{background:transparent;border-color:var(--white);color:var(--white)}
.btn-pill--ghost:hover{background:var(--white);border-color:var(--white);color:var(--green-deep)}


/* ═══════════════════════════════════════════════════════════
   MARKA (nagłówek + stopka)
   ═══════════════════════════════════════════════════════════ */
/* 2026-07-20: lockup składany z HTML+CSS (kwadrat „B" + nazwisko + podpis)
   ZASTĄPIONY prawdziwym logo kancelarii — jednym plikiem PNG. Skasowane razem
   z nim: .brand-mark, .brand-txt, .brand-name, .brand-sub oraz ich warianty
   kontekstowe w nagłówku i stopce (nic ich już nie renderuje; markup marki
   powstaje w site.js → brandHTML).
   Zniknął przy tym dopisek „· Kościan" spod nazwiska: logo jest zamkniętym
   lockupem i dokładanie tekstu obok tekstu, który już w nim jest, psuje znak.
   Miasto niesie dalej eyebrow każdego hero, adres w stopce i sekcja kontaktu. */
.brand{display:flex;align-items:center;text-decoration:none}
/* Proporcja pliku to 7.46:1, więc steruje WYŁĄCZNIE wysokość — szerokość
   liczy się sama. Wartości dobrane pod najciaśniejszy przypadek: przy 320px
   ekranu zostaje 272px światła, logo bierze 209, burger 44.
   POPRAWKA: ta suma pomijała gap:24px z .site-header .container — realnie
   209 + 24 + 44 = 277 > 272, czyli nagłówek przepełniał się o 5px i logo
   szło w ścisk (wysokość sztywna, więc deformacja). Gap na mobile zszedł
   do 16px, a logo do 26px: 194 + 16 + 44 = 254 < 272, zapas 18px.
   Nie podnosić wysokości mobilnej bez ponownego przeliczenia CAŁEJ sumy. */
.brand-logo{height:26px;width:auto;transition:var(--tr)}
@media(min-width:768px){.brand-logo{height:36px}}
@media(min-width:1024px){.brand-logo{height:40px}}


/* ═══════════════════════════════════════════════════════════
   NAGŁÓWEK STRONY
   Przezroczysty nad ciemnym hero (hero wsuwa się pod niego ujemnym
   marginesem), po przewinięciu → biały .solid.
   ═══════════════════════════════════════════════════════════ */
.site-header{position:sticky;top:0;z-index:50;background:transparent;border-bottom:1px solid transparent;transition:var(--tr)}
.site-header .container{display:flex;align-items:center;justify-content:space-between;gap:16px;height:var(--header-h)}
@media(min-width:768px){.site-header .container{gap:24px}}
/* NEGATYW LOGO NA CIEMNYM TLE — dwa konteksty, jedna reguła.
   Logo jest czarno-zielone, czyli czytelne wyłącznie na jasnym tle. Ciemne
   tło ma je w dwóch miejscach: przezroczysty nagłówek nad hero strony głównej
   (dopóki nie dostanie .solid) i stopka. Tam idzie w biel.
   DLACZEGO FILTR, A NIE DRUGI PLIK: negatyw nie może się rozjechać z oryginałem
   — podmiana logo w przyszłości to podmiana JEDNEGO pliku, bez pamiętania
   o wariancie. brightness(0) gasi wszystkie barwy do czerni (alfa zostaje),
   invert(1) odwraca ją w biel; monogram traci zieleń i to jest zamierzone —
   ten sam ruch, co .bigmark--neg robi z logo MRB.
   Przejście niesie transition na .brand-logo, więc przy przewijaniu strony
   głównej logo nie przeskakuje, tylko przechodzi razem z tłem nagłówka. */
.site-header:not(.solid) .brand-logo,
.foot-brand .brand-logo{filter:brightness(0) invert(1)}

/* menu — mobile: panel zsuwany z góry; desktop: rząd linków */
/* Zamknięte menu chowa NIE tylko transform, ale i visibility. Sam transform
   wypycha panel poza ekran wizualnie, lecz linki zostają fokusowalne i
   czytane przez AT — użytkownik klawiatury wpadał po logo w siedem
   niewidzialnych pozycji (WCAG 2.4.3 / 2.4.7). Dropdown obok robi to
   poprawnie przez display:none; tu display nie przejdzie, bo zabiłby
   animację, więc idzie visibility z opóźnieniem na czas przesuwu.
   max-height + overflow: rozwinięte „Specjalizacje" dają ~574px panelu,
   a position:fixed bez przewijania ucinał „Kontakt" na niskim ekranie
   (telefon w poziomie, iPhone SE). */
.site-nav{
  position:fixed;top:var(--header-h);left:0;right:0;z-index:49;
  display:flex;flex-direction:column;background:var(--green-deep);
  border-top:1px solid var(--on-dark-line);
  max-height:calc(100vh - var(--header-h));overflow-y:auto;overscroll-behavior:contain;
  transform:translateY(-130%);transition:transform .28s ease,visibility 0s linear .28s;
  visibility:hidden;
}
.site-nav.open{transform:none;visibility:visible;transition:transform .28s ease,visibility 0s}
/* rozmiar o stopień poniżej tekstu — nawigacja to chrome, nie treść */
.site-nav a{font-size:var(--fs-small);font-weight:500;color:var(--white);padding:16px 24px;border-bottom:1px solid var(--on-dark-line)}
.site-nav a:hover{color:var(--brass-bright)}
@media(min-width:1024px){
  /* visibility/max-height/overflow COFNIĘTE — to były łaty pod panel mobilny;
     na desktopie nav jest zwykłym rzędem linków i musi być widoczny zawsze. */
  .site-nav{position:static;flex-direction:row;align-items:center;gap:32px;background:none;border:0;transform:none;transition:none;visibility:visible;max-height:none;overflow:visible}
  .site-nav a{padding:0;border:0;letter-spacing:.02em}
}

.burger{display:inline-flex;flex-direction:column;justify-content:center;gap:4px;width:44px;height:44px;padding:0;background:none;border:0;cursor:pointer}
.burger span{display:block;width:24px;height:2px;margin:0 auto;background:var(--white);transition:var(--tr)}
@media(min-width:1024px){.burger{display:none}}

/* stan po przewinięciu */
.site-header.solid{background:var(--header-bg-solid);backdrop-filter:saturate(1.2) blur(6px);border-bottom-color:var(--hairline)}
/* logo w stanie .solid nie ma reguły — wraca do pełnych barw pliku */
.site-header.solid .burger span{background:var(--green)}
/* UWAGA: tylko desktop. Na mobile rozwinięte menu jest zielone, więc
   linki muszą zostać białe nawet gdy nagłówek jest biały. */
@media(min-width:1024px){
  .site-header.solid .site-nav a{color:var(--ink)}
  .site-header.solid .site-nav a:hover{color:var(--brass-deep)}
}


/* ═══════════════════════════════════════════════════════════
   NAWIGACJA — DROPDOWN „Specjalizacje"
   Mobile: przycisk = wiersz menu, podmenu rozwijane przez .open (site.js).
   Desktop: popover przyklejony do dolnej krawędzi nagłówka, pokazywany
   hover / focus-within / .open. Panel podmenu jest ZAWSZE zielony
   (green-deep) z białymi linkami — czytelny niezależnie od stanu nagłówka
   (przezroczysty nad hero vs biały .solid), dlatego stan .solid ma tu
   własne nadpisania utrzymujące biel.
   ═══════════════════════════════════════════════════════════ */
.nav-drop{display:flex;flex-direction:column}
.nav-drop-btn{
  width:100%;background:none;border:0;cursor:pointer;text-align:left;
  display:flex;align-items:center;justify-content:space-between;gap:8px;
  font-family:var(--sans);font-size:var(--fs-small);font-weight:500;color:var(--white);
  padding:16px 24px;border-bottom:1px solid var(--on-dark-line);
}
.nav-drop-btn:hover{color:var(--brass-bright)}
.nav-drop-chev{transform:rotate(90deg);transition:var(--tr)}
.nav-drop.open .nav-drop-chev{transform:rotate(-90deg)}
.nav-drop-menu{display:none;flex-direction:column;background:var(--green)}
.nav-drop.open .nav-drop-menu{display:flex}
/* linki podmenu — dopełnienie .site-nav a; wygrywają kolejnością w pliku */
.nav-drop-menu a{padding:16px 24px 16px 40px;font-size:var(--fs-small);color:var(--white);border-bottom:1px solid var(--on-dark-line)}
.nav-drop-menu a:hover{color:var(--brass-bright)}

@media(min-width:1024px){
  /* box przycisku na pełną wysokość nagłówka, żeby popover przyklejał się
     do jego dolnej krawędzi bez luki (inaczej hover gubi się w przerwie) */
  .nav-drop{position:relative;align-self:stretch;flex-direction:row;align-items:center}
  .nav-drop-btn{width:auto;padding:0;border:0;letter-spacing:.02em}
  .nav-drop-menu{
    position:absolute;top:100%;left:0;min-width:260px;z-index:60;
    background:var(--green-deep);border:1px solid var(--on-dark-line);
  }
  .nav-drop:hover .nav-drop-menu,
  .nav-drop:focus-within .nav-drop-menu,
  .nav-drop.open .nav-drop-menu{display:flex}
  .nav-drop:hover .nav-drop-chev,
  .nav-drop:focus-within .nav-drop-chev{transform:rotate(-90deg)}
  .nav-drop-menu a{padding:16px 24px;border-bottom:1px solid var(--on-dark-line);white-space:nowrap}
  .nav-drop-menu a:last-child{border-bottom:0}
  /* stan .solid: przycisk zmienia się jak reszta nawigacji, ale linki
     w zielonym popoverze zostają białe (przebijają .site-header.solid a) */
  .site-header.solid .nav-drop-btn{color:var(--ink)}
  .site-header.solid .nav-drop-btn:hover{color:var(--brass-deep)}
  .site-header.solid .nav-drop-menu a{color:var(--white)}
  .site-header.solid .nav-drop-menu a:hover{color:var(--brass-bright)}
}


/* ═══════════════════════════════════════════════════════════
   SEKCJE — szkielet wspólny
   Kolejność w .section-head ZAWSZE: eyebrow → sig → h2 → p
   ═══════════════════════════════════════════════════════════ */
section{padding:64px 0}
@media(min-width:768px){section{padding:96px 0}}
.section-surface{background:var(--surface)}
.section-dark{background:var(--green-deep);color:var(--on-dark)}
.section-dark h2,.section-dark h3{color:var(--white)}
.section-dark .eyebrow{color:var(--brass-bright)}
.section-dark .sig{background:var(--brass-bright)}
.section-dark p{color:var(--on-dark)}

/* ═══════════════════════════════════════════════════════════
   PASEK CTA — .ctaband                        (2026-07-20, wszystkie strony)
   Krótkie wezwanie w połowie strony. Nazwa wraca z mockup-home-v3 (patrz
   rodowód przy .takty) — tam pomysł powtórzonego CTA został odrzucony,
   dziś wraca jako osobny, wąski prymityw.

   ─── DLACZEGO --green, A NIE --green-deep ───
   Każda strona ma budżet DWÓCH pasów green-deep: hero + „Rozwiązanie"
   (na głównej: hero + „Prowadzę osobiście"). Trzeci najciemniejszy pas
   rozmiękczyłby ten rytm i zrównał wezwanie z sekcją-tezą. Pasek dostaje
   więc --green — tę samą średnią zieleń, co zielona karta .quad-cell--firma.
   Jest wyraźnie osobnym obiektem i budżet green-deep zostaje nienaruszony.

   ─── DLACZEGO BEZ .section-head ───
   To NIE jest sekcja, tylko pasek: żadnego eyebrow, żadnej kreski, żadnego
   h2. Jedno zdanie + guzik. Gdyby dostał pełną główkę, konkurowałby
   z sekcją kontaktu na dole każdej strony („Pierwszy telefon jest
   najtrudniejszy") — a to ma być zaczepka po drodze, nie druga taka sekcja.
   Stąd też niższy padding niż w `section` (48/56 zamiast 64/96).

   Zdanie jest SZERYFOWE i na szczeblu h4 (25px) — czyta się jak wtrącenie
   autora, nie jak nagłówek. Guzik w wariancie ghost, bo tło jest ciemne.
   Układ: kolumna na mobile → wiersz z justify-between od 1024.
   ═══════════════════════════════════════════════════════════ */
.ctaband{background:var(--green);padding:48px 0}
@media(min-width:768px){.ctaband{padding:56px 0}}
.ctaband .container{display:flex;flex-direction:column;align-items:flex-start;gap:28px}
@media(min-width:1024px){.ctaband .container{flex-direction:row;align-items:center;justify-content:space-between;gap:48px}}
.ctaband p{font-family:var(--serif);font-size:var(--fs-h4);line-height:1.35;color:var(--white);max-width:22em}
/* guzik nie może się kurczyć w wierszu — inaczej długie zdanie zjada pigułkę */
.ctaband .btn-pill{flex:0 0 auto}

.section-head{max-width:720px;margin-bottom:48px}
@media(min-width:768px){.section-head{margin-bottom:56px}}
.section-head.center{margin-left:auto;margin-right:auto;text-align:center}
.section-head p{color:var(--steel);margin-top:16px}
/* Akapit w WYŚRODKOWANEJ główce (2026-07-16, rozwody v2 „Oddech").
   `p{max-width:var(--measure)}` daje akapitowi 620px, a główka ma 720px —
   więc text-align:center centruje wiersze WEWNĄTRZ pudełka, ale samo pudełko
   zostaje przy lewej krawędzi i główka jest krzywa o 50px. Auto-marginesy
   dosuwają pudełko na środek.
   Do 2026-07-16 żadna .section-head.center nie miała <p> i dlatego problem nie
   wyszedł: na ciemnym tle akapitu w główce mieć NIE WOLNO (patrz `.section-dark`),
   a FAQ, `.stats` i aktualności go po prostu nie mają. */
.section-head.center p{margin-left:auto;margin-right:auto}

/* ═══════════════════════════════════════════════════════════
   STOPKA
   ═══════════════════════════════════════════════════════════ */
footer{background:var(--green-deep);color:var(--on-dark);padding:72px 0 32px}
.foot-grid{display:grid;grid-template-columns:1fr;gap:40px;padding-bottom:48px;border-bottom:1px solid var(--on-dark-line)}
@media(min-width:768px){.foot-grid{grid-template-columns:1.4fr 1fr 1fr}}
/* negatyw logo w stopce — reguła stoi przy nagłówku (wspólna dla obu tł) */
.foot-brand p{font-size:var(--fs-small);color:var(--on-dark-muted);margin-top:24px;max-width:340px}
/* Nagłówek kolumny stopki — DWAJ konsumenci od 2026-08-14: kolumna MRB
   i kolumna nawigacji. Wspólny selektor, bo te dwa napisy stoją obok siebie
   w tym samym rzędzie i rozjazd byłby widoczny natychmiast. */
.foot-mrb h5,.foot-nav h5{font-size:var(--fs-micro);letter-spacing:.14em;text-transform:uppercase;color:var(--brass-bright);margin-bottom:24px;font-weight:600}
.foot-bottom{display:flex;flex-wrap:wrap;justify-content:space-between;gap:16px;padding-top:24px;font-size:var(--fs-micro);color:var(--on-dark-muted)}
.foot-bottom a{color:var(--on-dark-muted)}
.foot-bottom a:hover{color:var(--brass-bright)}

/* ——— wariant dwukolumnowy: dane + MRB (index2, copy: sekcja 8) ———
   Kolumny nawigacyjnej nie ma, bo index2 jest jednostronicowcem i całą
   nawigację niesie sticky header. Musi stać PO regule bazowej — ta sama
   specyficzność, wygrywa kolejnością. */
@media(min-width:768px){.foot-grid--2{grid-template-columns:1fr 1fr}}
/* .foot-brand p (0,1,1) dało już margin-top:24px pod adresem — wiersz
   z telefonem ma stać bliżej, stąd dwie klasy (0,2,0). */
.foot-2 .foot-contact{margin-top:8px}
/* brass na granacie ma 2.3:1 i ginie — dane kontaktowe idą --on-dark */
.foot-2 .foot-contact a{color:var(--on-dark)}
.foot-2 .foot-contact a:hover{color:var(--brass-bright)}
.foot-mrb .bigmark{margin-bottom:24px}
.foot-mrb p{font-size:var(--fs-small);color:var(--on-dark-muted);margin-top:16px;max-width:340px}
.foot-mrb .foot-mrb-name{font-family:var(--serif);font-weight:700;font-size:var(--fs-body);color:var(--white)}
.foot-mrb .link-x{margin-top:16px;color:var(--brass-bright)}
.foot-mrb .link-x:hover{color:var(--brass-light)}


/* ═══════════════════════════════════════════════════════════
   ANIMACJE WEJŚCIA
   Nie nakładać .reveal na element z własnym transform — .reveal.in
   ustawia transform:none i skasuje np. translateY(-50%).
   ═══════════════════════════════════════════════════════════ */
.reveal{opacity:0;transform:translateY(12px);transition:opacity .6s cubic-bezier(.16,1,.3,1),transform .6s cubic-bezier(.16,1,.3,1)}
.reveal.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){
  .reveal{opacity:1;transform:none;transition:none}
  *{transition:none!important;animation:none!important;scroll-behavior:auto!important}
}

/* hero wsuwa się pod przezroczysty nagłówek */
.hero-m{position:relative;background:var(--green-deep);margin-top:calc(var(--header-h) * -1);padding:calc(var(--header-h) + 40px) 0 0}
.hero-m .container{position:relative}
.hero-m .hero-left{padding-bottom:40px}

/* na granacie brass ma 2.3:1 — stąd warianty brass-bright */
.hero-m .eyebrow{color:var(--brass-bright)}
.hero-m .sig{background:var(--brass-bright)}
/* link poboczny w rzędzie CTA („Dowiedz się więcej", 2026-07-20). Ta sama
   poprawka co eyebrow/sig wyżej: .link-x jest brass, a brass na green-deep
   ma 2.3:1 i ginie. Bliźniacza para reguł stoi w stopce (.foot-mrb .link-x),
   drugim ciemnym miejscu, gdzie ten prymityw pracuje. */
.hero-m .link-x{color:var(--brass-bright)}
.hero-m .link-x:hover{color:var(--brass-light)}
.hero-m h1{color:var(--white)}
.hero-m .hero-left p{color:var(--on-dark);margin-top:24px}

.hero-m .hero-photo{
  position:relative;width:100%;min-height:350px;margin-top:24px;
  background-image:url("img/hero.jpg");
  background-repeat:no-repeat;background-size:cover;background-position:50% 50%;
}

/* CTA i link poboczny w jednym rzędzie */
.hero-m .hero-actions{display:flex;flex-wrap:wrap;align-items:center;gap:32px;margin-top:32px}
/* mikrocopy pod CTA (strona główna). Trzy klasy, bo .hero-m .hero-left p (0,2,1)
   narzuca --on-dark i margin-top:24px — ten sam problem co .post-date. */
.hero-m .hero-left .hero-micro{font-size:var(--fs-small);color:var(--on-dark-muted);margin-top:16px;max-width:420px}

/* ——— tablet: tekst i zdjęcie obok siebie ——— */
@media(min-width:768px){
  .hero-m{min-height:640px}
  .hero-m .hero-left{width:50%;padding:0 32px 48px 0}
  .hero-m .hero-photo{position:absolute;top:calc(var(--header-h) + 40px);right:0;width:50%;min-height:460px;margin-top:0}
}

/* ——— desktop: układ wzorcowy ——— */
@media(min-width:1024px){
  .hero-m{padding:0;min-height:840px}
  .hero-m .container{min-height:840px}
  /* 50% zamiast 41,67% z wzorca — nasz nagłówek jest dłuższy niż u Milewskiej */
  .hero-m .hero-left{position:absolute;top:60%;transform:translateY(-50%);left:40px;width:50%;padding:0;z-index:2}
  .hero-m .hero-photo{top:auto;bottom:-65px;width:45%;min-height:750px;z-index:1}
}


/* ═══════════════════════════════════════════════════════════
   CAP h1 W HERO — .hero-m (strona główna)
   Jedna reguła, ale trzeba wiedzieć, czemu istnieje.

   Od 1024 .hero-left jest ABSOLUTNY i centrowany na `top:60%` w herosie
   o sztywnych 840 px. Działa to, dopóki blok tekstu nie urośnie poza zieleń —
   przy zbyt dużym h1 ostatni wiersz mikrocopy lądował na białym tle w kolorze
   --on-dark-muted, czyli 2.2:1. Audyt tego nie złapie (to kolizja geometrii,
   a nie tokenów), łapie to dopiero zrzut.

   2026-07-20 — DECYZJA MIKOŁAJA, która zamyka ten problem u źródła.
   Poprzednie copy miało h1 na 95 znaków (dwa zdania, drugie w <strong>),
   co przy 49px dawało 5–6 wierszy i blok ~682 px. Komentarz w tym miejscu
   od dawna wskazywał właściwe rozwiązanie: „krótszy h1 — do decyzji klienta".
   Nagłówek został skrócony do 47 znaków, jednego zdania, bez <strong>,
   i ma się mieścić w DWÓCH wierszach.

   Dlaczego 39px, a nie 49: kolumna .hero-left to 50% kontenera = 600 px przy
   1200. Libre Baskerville liczy ~0,565 em na znak (skalibrowane na renderze
   poprzedniej wersji), więc najdłuższy możliwy wiersz — „Adwokat w Kościanie,
   który", 26 znaków — potrzebuje 14,7 em:
       49px → 720 px  > 600  → łamie się na TRZY wiersze
       39px → 573 px  ≤ 600  → łamie się po „który" → DWA wiersze
   Zapas to ~27 px (4,5%). Gdyby na jakimś renderze wiersz jednak nie wszedł,
   NIE schodzić poniżej 39 (kolejny szczebel drabinki to 31 = minimum H2,
   hero traci obecność) — wymusić łamanie <br> po „który".

   Blok tekstu ma teraz ~364 px, centrowany na 60% z 840 → zajmuje 322–686 px:
   z zapasem pod nagłówkiem (88 px) i nad dolną krawędzią zieleni.
   ═══════════════════════════════════════════════════════════ */
@media(min-width:1024px){
  .hero-m h1{font-size:var(--fs-39)}
}


/* ═══════════════════════════════════════════════════════════
   SPECJALIZACJE — siatka 2×2, cztery karty              (strona główna)
   Wybór klienta spośród trzech wariantów (2026-07). Partial: uslugi.html

   DLACZEGO NIE TRZY KOLUMNY: copy daje na kartę lead + akapit + 5 punktów.
   W układzie 3-kolumnowym karta ma ~310px i tekst się dusi — to była mierzalna
   wada poprzedniej wersji. Przy dwóch kolumnach karta dostaje ~480px.
   Nie wracać do 3 kolumn bez skrócenia copy.

   ─── 2026-08-12: .quad-head SKASOWANY ───
   Do tego dnia pierwsze pole siatki zajmował zielony kafel-nagłówek (eyebrow +
   sig + h2 + akapit). Mikołaj kazał wyprowadzić główkę NAD siatkę, a zwolnione
   pole oddać czwartej karcie („Firmy i sprawy gospodarcze") — i to ona przejęła
   zieleń, stojąc na OSTATNIM polu. Główka jest dziś zwykłym .section-head, więc
   sekcja nie potrzebuje żadnej własnej reguły na nagłówek.
   Zieleń zostaje w siatce jako „kafel-bohater" (język .tile-a z bento,
   DESIGN_BOARD) — zmienił się tylko jej nośnik: z nagłówka na kartę.
   Klasy .quad-head NIE PRZYWRACAĆ: dwa zielone pola w jednej siatce
   (nagłówek + karta) zabiłyby sens „jednego bohatera".

   ⚠️ 2026-08-14 — KARTA JEST KLIKALNA W CAŁOŚCI (polecenie Mikołaja).
   Wcześniej stała tu nota odwrotna: „nic tu nie jest klikalne w całości
   i nie wolno tego udawać, afordancją jest .link-x". Ta zasada JUŻ NIE
   OBOWIĄZUJE — kafel prowadzi na podstronę z każdego miejsca. Znacznik
   został <article> (patrz blok „CAŁA KARTA KLIKALNA" niżej), więc powód
   dawnej noty — zakaz <a> w <a> — dalej jest spełniony.
   Lista idzie przez .tresc — jedyne miejsce, gdzie wolno stylować <ul>.
   ═══════════════════════════════════════════════════════════ */
.spec-quad{background:var(--surface)}
/* gap:2px na tle hairline = kreski siatki bez czterech stykających się ramek.
   Ta sama sztuczka co .spec .grid — nie wymyślamy drugiego sposobu. */
.quad{display:grid;grid-template-columns:1fr;gap:2px;border:1px solid var(--hairline);background:var(--hairline)}
@media(min-width:768px){.quad{grid-template-columns:repeat(2,1fr)}}
/* position:relative — układ odniesienia dla nakładki .link-x::after, która
   robi z całego kafla obszar klikalny (patrz blok „CAŁA KARTA KLIKALNA"). */
.quad-cell{position:relative;background:var(--paper);padding:40px 32px;display:flex;flex-direction:column}
.quad-cell .idx{font-family:var(--serif);font-size:var(--fs-31);line-height:1;color:var(--brass)}
.quad-cell h3{font-size:var(--fs-25);margin:16px 0 8px}
.quad-cell > p{color:var(--steel)}
/* .quad-cell .lead (0,2,0) przebija .quad-cell > p (0,1,1) — inaczej lead
   dostałby kolor steel i zlał się z akapitem */
.quad-cell .lead{color:var(--ink);margin-bottom:16px}
.quad-cell .sig{margin:24px 0}
.quad-cell .tresc{margin-bottom:32px}
/* align-self obowiązkowo: w kolumnie flex inline-flex rozciągnąłby się
   na całą szerokość kafla i link łapałby kliknięcia w pustce */
.quad-cell .link-x{margin-top:auto;align-self:flex-start}

/* ——— CAŁA KARTA KLIKALNA (2026-08-14, polecenie Mikołaja) ———————————————
   Kafel prowadzi na swoją podstronę z KAŻDEGO miejsca, nie tylko z .link-x.

   MECHANIZM: nakładka. Istniejący, prawdziwy link .link-x dostaje ::after
   rozpięty na cały kafel (inset:0), więc kliknięcie gdziekolwiek w karcie
   trafia w ten link. Zero zmian w HTML — dlatego szablon `front-page.php`
   został dokładnie taki, jak wyszedł z generatora.

   DLACZEGO NIE „cały <article> zamieniony na <a>", czyli wzorzec .wpis
   i .usluga--cta — trzy powody, każdy sam wystarczy:
   1. EDYTOR CMS-Mikołaj Kubiak. W karcie siedzi ~28 fragmentów owiniętych
      w cmk_block (nagłówek, dwa akapity, pięć punktów listy). Gdyby kafel
      był <a>, klik w akapit w trybie edycji NAWIGOWAŁBY na podstronę
      zamiast postawić kursor — `editor.js` blokuje nawigację tylko dla
      linków tel:/mailto:, nie dla zwykłych. Nakładkę da się wyłączyć
      jedną regułą (na dole tego bloku), całego <a> już nie.
   2. DOSTĘPNOŚĆ. Nazwą linku-karty stałaby się CAŁA jej treść — u nas
      ~600 znaków prozy z listą. Czytnik ekranu przeczytałby to jako jeden
      link. Przy .wpis to uszło (karta to meta + tytuł + lead), tutaj nie.
   3. Klucze CMK są liczone z tagu i treści; przepisanie <article> na <a>
      i <a class="link-x"> na <span> zmieniłoby markup, a więc i szablon,
      który jest generowany — czyli rozjazd przy każdej przebudowie.

   KOSZT, ŚWIADOMIE PRZYJĘTY: nakładka przykrywa tekst, więc treści karty
   nie da się zaznaczyć myszą. To jedyna wada tego rozwiązania.

   Afordancja: kursor (nakładka to <a href>), a do tego kolor — h3 schodzi
   w brass-deep, strzałka rozsuwa gap. Ten sam sygnał co w .wpis, ta sama
   zasada: BEZ cienia i BEZ podnoszenia kafla, sygnał niesie kolor.
   `gap:12px` i brass-deep na samej strzałce robi już bazowe .link-x:hover —
   pseudoelement jest częścią linku, więc :hover odpala się z całej karty. */
.quad-cell .link-x::after{content:"";position:absolute;inset:0}
.quad-cell:hover h3,
.quad-cell:focus-within h3{color:var(--brass-deep)}

/* TRYB EDYCJI CMK — nakładka schodzi, żeby klik stawiał kursor w tekście,
   a nie przenosił na podstronę. `body.cmk-editing` dokłada editor.js po
   wejściu w tryb edycji; dla gościa i dla zalogowanego, który TYLKO ogląda,
   karta zostaje klikalna w całości. */
body.cmk-editing .quad-cell .link-x::after{content:none}

/* ——— czwarta karta: FIRMY (2026-08-12) ———
   To MODYFIKATOR .quad-cell, nie osobny komponent: układ, paddingi, margines
   .sig i przyklejony do dołu .link-x dziedziczy w całości — nadpisuje wyłącznie
   kolory pod ciemne tło. Na zieleni akcent musi być brass-bright, nie brass
   (brass ma na --green 2.3:1).

   ⚠️ DŁUG DOSTĘPNOŚCIOWY, ODZIEDZICZONY — NIE nowy: brass-bright ma na --green
   3.40:1. Wystarcza dla .sig, punktora i licznika .idx (31px = duży tekst,
   próg 3:1), ale .link-x jest tekstem 16/600 i potrzebowałby 4.5:1. Ten sam
   zestaw stoi już w .usluga--cta niżej (ten sam --green, ten sam brass-bright),
   więc rozjeżdżanie się tu byłoby gorsze niż powtórzenie. Gdy to poprawiać —
   poprawiać OBA miejsca naraz; brass-light daje 4.37:1, czyli też za mało,
   więc realne wyjście to --on-dark albo --white na samym linku.

   ⚠️ KOLEJNOŚĆ MA ZNACZENIE: nadpisania mają tę SAMĄ specyficzność co reguły
   bazowe wyżej (.quad-cell .lead i .quad-cell--firma .lead to oba 0,2,0;
   .quad-cell > p i .quad-cell--firma > p to oba 0,1,1), więc wygrywają
   wyłącznie kolejnością. Tego bloku NIE przesuwać nad blok bazowy. */
.quad-cell--firma{background:var(--green);color:var(--on-dark)}
.quad-cell--firma .idx{color:var(--brass-bright)}
.quad-cell--firma h3{color:var(--white)}
.quad-cell--firma .lead{color:var(--white)}
.quad-cell--firma > p{color:var(--on-dark)}
.quad-cell--firma .sig{background:var(--brass-bright)}
/* chevron-punktor to maska na tle --brass — na zieleni ginie tak samo jak .sig */
.quad-cell--firma .tresc ul li::before{background:var(--brass-bright)}
.quad-cell--firma .link-x{color:var(--brass-bright)}
.quad-cell--firma .link-x:hover{color:var(--brass-light)}

/* ——— hover karty klikalnej, wariant na zieleni (2026-08-14) ———————————
   Na ciemnym tle zejście nagłówka w brass-deep byłoby nieczytelne, więc
   sygnał niesie TŁO: --green → --green-deep. Dokładnie ten sam ruch co
   .usluga--cta:hover niżej — drugi sposób na to samo byłby rozjazdem.
   Budżet ciemnych pasów nienaruszony: green-deep pojawia się tu tylko
   na hover, nie jako stałe tło sekcji.
   Specyficzność: .quad-cell--firma:hover h3 (0,2,1) równa się
   .quad-cell:hover h3 (0,2,1) z bloku bazowego — wygrywa WYŁĄCZNIE
   kolejnością w pliku. Tego nie przesuwać nad blok bazowy. */
.quad-cell--firma{transition:var(--tr)}
.quad-cell--firma:hover{background:var(--green-deep)}
.quad-cell--firma:hover h3,
.quad-cell--firma:focus-within h3{color:var(--white)}


/* ═══════════════════════════════════════════════════════════
   O MNIE — PANEL ZE SPADEM ZDJĘCIA        (strona główna, copy: sekcja 5)
   Wzorzec kompozycji: krawczykowska.net. Partial: o-mnie.html

   ─── DLACZEGO BEZ CIENIA ───
   We wzorcu panel jest odklejony od strony cieniem. U nas cień jest
   zakazany — DESIGN_BOARD E: „Cienie: BRAK. Głębia wyłącznie kolorem
   i hairline'em", H5 i H7. To nie jest kaprys: płaskość to DNA MRB i to
   ona odróżnia stronę od „materiałowych" szablonów z page-buildera.
   Board rozstrzyga ten konkretny przypadek wprost (H9, o źródle B, czyli
   o Krawczykowskiej): „bierzemy jego KOMPOZYCJĘ, nie tonację".
   Więc bierzemy panel i spad zdjęcia, a rozwarstwienie robimy tokenami,
   które istnieją dokładnie po to:
     --surface   „delikatne pole bez cieni"
     --hairline  „hairline premium zamiast cieni"
   NIE dodawać tu box-shadow. audit.py to odrzuci (reguła 7) — i ma rację.

   ─── DLACZEGO PANEL JEST SZARY, A STRONA BIAŁA (odwrotnie niż we wzorcu) ───
   Wzorzec ma biały panel na szarej stronie. U nas tło sekcji jest ZWIĄZANE
   rytmem: leży między .takty (green) a .kroki (surface), więc musi być paper.
   Gdyby sekcja zeszła na surface, skleiłaby się z .kroki, a odwrócenie
   rytmu kaskadowałoby przez cytat/opinie/faq — a te partiale dzieli
   z index.html. Panel na --surface daje tę samą figurę i to samo
   rozwarstwienie, tylko z odwróconą wartością. Nie ruszać bez zrzutu.
   ═══════════════════════════════════════════════════════════ */
.about-panel{background:var(--paper)}
.panel{background:var(--surface);border:1px solid var(--hairline);display:grid;grid-template-columns:1fr}
@media(min-width:1024px){.panel{grid-template-columns:1fr 1.1fr}}
.panel-body{padding:48px 32px}
@media(min-width:768px){.panel-body{padding:64px 48px}}
/* na desktopie tekst wyśrodkowany w pionie względem zdjęcia — align-self,
   bo domyślny stretch rozciągnąłby blok i tekst usiadłby przy górnej krawędzi */
@media(min-width:1024px){.panel-body{padding:64px;align-self:center}}
.panel-body h2{margin-bottom:24px}
.panel-body p + p{margin-top:24px}
.panel-body .btn-pill{margin-top:32px}
/* CTA + link poboczny w jednym rzędzie — ten sam wzorzec co .hero-actions.
   Reset margin-top na przycisku MUSI stać niżej niż .panel-body .btn-pill:
   ta sama specyficzność (0,2,0), więc wygrywa wyłącznie kolejnością.
   Odstęp od tekstu niesie teraz rząd, nie sam przycisk. */
.panel-cta{display:flex;flex-wrap:wrap;align-items:center;gap:32px;margin-top:32px}
.panel-cta .btn-pill{margin-top:0}
/* zdjęcie JEST komórką siatki — żadnego opakowania. Dzięki temu spad do
   krawędzi panelu jest darmowy: rozciągnięty grid item ma wysokość rzędu,
   więc height:100% + object-fit:cover wypełniają go bez deformacji.
   Obróbka jak w .about-portrait — chłodno i formalnie (DESIGN_BOARD F),
   NIE ciepła tonacja wzorca. */
.panel-photo{width:100%;height:100%;min-height:400px;object-fit:cover;object-position:50% 20%;filter:grayscale(.4) saturate(.8) contrast(1.02)}
@media(min-width:1024px){.panel-photo{min-height:560px}}


/* ═══════════════════════════════════════════════════════════
   LOCKUP LOGO MRB  —  .bigmark
   JEDYNE miejsce w projekcie, gdzie wolno użyć barw logo partnera
   (--mrb-*). Poza lockupem są nieoperacyjne (DESIGN_BOARD B).

   Baza jest bezkontekstowa, bo lockup stoi dziś w trzech miejscach
   o różnych tłach: .mrb (ciemna sekcja), .mrb-pas (jasny pas), stopka
   (negatyw). Wcześniej był przyszyty do `.mrb` — wartości przeniesione
   1:1, więc index.html renderuje się bez zmian.
   ═══════════════════════════════════════════════════════════ */
.bigmark{display:flex;gap:8px;align-items:center}
.bigmark span{width:74px;height:74px;display:flex;align-items:center;justify-content:center;font-family:var(--serif);color:var(--white);font-size:var(--fs-39);border:1px solid var(--on-dark-line)}
.bigmark .m{background:var(--mrb-navy)}
.bigmark .r{background:var(--mrb-green)}
.bigmark .b{background:var(--mrb-gray)}
/* mały — pas dowodu i stopka. Ramka pod jasne tło. */
.bigmark--sm span{width:48px;height:48px;font-size:var(--fs-25);border-color:var(--hairline)}
/* negatyw — biały kontur, ZERO barw logo. Musi stać po --sm (nadpisuje ramkę). */
.bigmark--neg .m,.bigmark--neg .r,.bigmark--neg .b{background:transparent;border-color:var(--on-dark-line)}


/* ═══════════════════════════════════════════════════════════
   PAS DOWODU MRB                              ← NOWA (copy: sekcja 2)
   Jasny odpowiednik .mrb, w formie pasa. Powód istnienia: leży tuż pod
   hero, a tam MUSI być jasne tło (zdjęcie zwisa 65 px — na granacie
   efekt znika). Ten sam układ i ta sama kolejność eyebrow → sig → h2.

   Padding-top na 1024 to 96px, nie 64: dokładnie tam wisi zdjęcie hero
   (z-index:1), a lockup stoi po tej samej, prawej stronie. 96 daje 31 px
   zapasu pod kadrem. Nie zmniejszać.
   ═══════════════════════════════════════════════════════════ */
.mrb-pas{padding:48px 0}
@media(min-width:768px){.mrb-pas{padding:64px 0}}
@media(min-width:1024px){.mrb-pas{padding:96px 0 64px}}
.mrb-pas .container{display:grid;grid-template-columns:1fr;gap:40px;align-items:center}
@media(min-width:1024px){.mrb-pas .container{grid-template-columns:1.3fr 1fr;gap:64px}}
.mrb-pas p{color:var(--steel);margin-top:16px}
.mrb-pas .mtxt{font-size:var(--fs-micro);color:var(--steel);letter-spacing:.04em;margin-top:16px}


/* ═══════════════════════════════════════════════════════════
   CYTAT
   Prymityw: wyśrodkowany cytat display.
   ═══════════════════════════════════════════════════════════ */
.quote-wrap{max-width:860px;margin:0 auto;text-align:center}
.quote-wrap .mark{font-family:var(--serif);font-size:var(--fs-61);color:var(--brass);line-height:.6;height:32px;display:block}
/* cytat trzyma SWÓJ rozmiar (pin na dawną skalę h2 25→31) — KROK 4 podniósł --fs-h2
   do 49, a pull-quote nie jest nagłówkiem sekcji i nie ma się rozdymać. */
.quote{font-family:var(--serif);font-size:clamp(var(--fs-25),3.2vw,var(--fs-31));line-height:1.45;color:var(--ink);margin:0 auto 24px;max-width:none;font-style:italic}
.quote-by{font-size:var(--fs-small);letter-spacing:.04em;color:var(--steel)}
.quote-by b{color:var(--ink);font-weight:600}


/* ═══════════════════════════════════════════════════════════
   OPINIE
   Prymityw: siatka 3 kart z autorem.
   ═══════════════════════════════════════════════════════════ */
.reviews{display:grid;grid-template-columns:1fr;gap:24px}
@media(min-width:768px){.reviews{grid-template-columns:repeat(3,1fr)}}
.review{border:1px solid var(--hairline);padding:32px;background:var(--paper);display:flex;flex-direction:column}
.review p{color:var(--ink);margin-bottom:24px}
.review .who{margin-top:auto;display:flex;align-items:center;gap:16px}
.review .av{width:42px;height:42px;border-radius:50%;background:var(--surface-2);border:1px solid var(--hairline);display:flex;align-items:center;justify-content:center;font-family:var(--serif);color:var(--green);font-weight:700}
.review .who b{font-size:var(--fs-small);font-weight:600;color:var(--ink);display:block}
.review .who span{font-size:var(--fs-micro);color:var(--steel)}


/* ═══════════════════════════════════════════════════════════
   FAQ
   Prymityw: akordeon. Wymaga site.js.
   ═══════════════════════════════════════════════════════════ */
.faq{max-width:820px;margin:0 auto}
.faq-item{border-bottom:1px solid var(--hairline)}
.faq-q{
  width:100%;background:none;border:none;cursor:pointer;text-align:left;
  display:flex;align-items:center;justify-content:space-between;gap:24px;
  padding:24px 0;font-family:var(--serif);font-size:var(--fs-lead);line-height:1.4;color:var(--green);
}
.faq-q .pm{font-family:var(--sans);font-size:var(--fs-25);line-height:1;color:var(--brass);flex:0 0 auto;transition:var(--tr)}
.faq-a{max-height:0;overflow:hidden;transition:max-height .3s ease}
.faq-a p{padding:0 0 24px;color:var(--steel)}


/* ═══════════════════════════════════════════════════════════
   KONTAKT
   Prymityw: wiersze danych z ikoną w kwadracie + mapa-szkic.
   DESIGN_BOARD H1: żadnych formularzy kontaktowych.
   ═══════════════════════════════════════════════════════════ */
.contact-grid{display:grid;grid-template-columns:1fr;gap:48px}
@media(min-width:1024px){.contact-grid{grid-template-columns:1fr 1fr;gap:64px}}
.contact-list{display:flex;flex-direction:column;gap:8px}
.contact-row{display:flex;align-items:center;gap:24px;padding:24px 0;border-bottom:1px solid var(--hairline)}
.contact-row:first-child{border-top:1px solid var(--hairline)}
.c-ico{width:67px;height:67px;border:1px solid var(--hairline);display:flex;align-items:center;justify-content:center;color:var(--green);flex:0 0 auto}
.c-ico svg{width:26px;height:26px}
/* display:block na obu — inaczej etykieta i wartość sklejają się w jedną linię */
.contact-row .lbl{display:block;font-size:var(--fs-micro);line-height:1.4;letter-spacing:.14em;text-transform:uppercase;color:var(--steel)}
/* overflow-wrap:anywhere, NIE break-word — tylko „anywhere" wchodzi do
   wyliczania min-content. Bez tego e-mail (jeden token bez spacji, 20px
   szeryfem) rozpycha kolumnę siatki ponad szerokość ekranu i CAŁA strona
   jedzie w bok na telefonie — razem z adresem, który sam w sobie by się zawinął.
   Miejsce podziału wskazuje <wbr> po „@" w partials/kontakt-dane.html. */
.contact-row .val{display:block;margin-top:4px;font-family:var(--serif);font-size:var(--fs-lead);line-height:1.3;color:var(--ink);overflow-wrap:anywhere}
.contact-row .val a{color:var(--ink)}
.contact-row .val a:hover{color:var(--brass-deep)}
.map{border:1px solid var(--hairline);aspect-ratio:4/3;background:var(--surface);position:relative;overflow:hidden}
.map-grid{position:absolute;inset:0;background-image:linear-gradient(var(--hairline) 1px,transparent 1px),linear-gradient(90deg,var(--hairline) 1px,transparent 1px);background-size:48px 48px;opacity:.7}
.map-pin{position:absolute;top:50%;left:50%;transform:translate(-50%,-100%);color:var(--brass);text-align:center}
.map-pin svg{width:36px;height:36px}
.map-pin span{display:block;font-size:var(--fs-micro);color:var(--green);background:var(--paper);border:1px solid var(--hairline);padding:4px 8px;margin-top:8px;white-space:nowrap}
.hours{margin-top:32px;color:var(--steel)}
.hours b{color:var(--ink);font-family:var(--serif);font-weight:700;display:block;margin-bottom:8px}


/* ═══════════════════════════════════════════════════════════
   POZOSTAŁE SPRAWY — .uslugi / .usluga         (copy: sekcja 3b)

   2026-07-20: sekcja przeszła z trzech kolumn gołego tekstu (.inne-cols,
   usunięte razem z tą zmianą — nic ich już nie używało) na KAFLE. Wzorzec
   przyniósł Mikołaj z zewnątrz: siatka kart „nazwa działu + lista haseł".
   Trzy rzeczy z tamtego wzorca ŚWIADOMIE odpadły, bo łamią system:
   • IKONY — strona nie ma zestawu ikon ilustracyjnych i nie zaczynamy go tu
     dla ośmiu kafli. Rolę „znacznika kafla" gra kreska brass (.sig), ten sam
     sygnał, co w .quad-cell i .punkt.
   • CIEŃ i wyśrodkowanie — DESIGN_BOARD E (płaskość) + idiom edytorski strony.
     Kafel wypełnia SURFACE na paper-owej sekcji: głębia kolorem, nie cieniem.
   • bold w tytułach — hierarchię niesie rozmiar, nie waga (patrz --fs-h4).

   Dlaczego GAP, a nie kratka hairline jak w .quad: działów jest osiem, więc
   przy trzech kolumnach ostatni rząd ma dwa kafle. W siatce zszytej hairline'em
   brakujące pole zostaje jako dziura w kratce; przy gapie niepełny rząd po
   prostu się kończy. Lista idzie przez .tresc — CLAUDE.md: to jedyne miejsce,
   gdzie wolno stylować <ul>; tu tylko zacieśniamy rytm do skali kafla.
   Kafel NIE jest klikalny w całości i nie ma hoveru — nic tu nie prowadzi
   dalej pojedynczo; wyjściem z sekcji jest jeden .btn-pill pod nią.
   ═══════════════════════════════════════════════════════════ */
.uslugi{display:grid;grid-template-columns:1fr;gap:16px}
@media(min-width:768px){
  .uslugi{grid-template-columns:repeat(2,1fr);gap:24px}
  /* Kafli jest DZIEWIĘĆ (8 działów + zielony CTA), a 9 nie dzieli się przez 2:
     przy dwóch kolumnach CTA zostawał sam w piątym rzędzie z pustą połową
     obok. Rozciągnięty na pełną szerokość domyka siatkę i czyta się jak
     puenta sekcji, a nie jak zgubiony kafel. Przy 1024 (3 kolumny) 9/3=3,
     więc tam rozciąganie jest zbędne i zostaje cofnięte niżej. */
  .usluga--cta{grid-column:1/-1}
}
@media(min-width:1024px){
  .uslugi{grid-template-columns:repeat(3,1fr);gap:32px}
  .usluga--cta{grid-column:auto}
}
.usluga{background:var(--surface);padding:32px 28px}
@media(min-width:1024px){.usluga{padding:40px 32px}}
/* tytuł działu — ta sama szczebel co nagłówek kafla w .quad-cell (25px, 400) */
.usluga h3{font-size:var(--fs-h4)}
.usluga .sig{margin:20px 0}
/* rytm listy zacieśniony względem .tresc (12px→8px): hasła są jednowyrazowe,
   pełny odstęp redakcyjny rozjeżdżałby kafel na dwa ekrany */
.usluga .tresc ul{gap:8px}
.usluga .tresc li{color:var(--steel)}
/* ——— dziewiąty kafel: CTA (.usluga--cta) ———
   Ośmiu działom brakowało jednego pola do pełnego rzędu 3×3 i to pole świeciło
   pustką. Zamiast zostawiać dziurę albo dorabiać dziewiąty dział, którego nie ma,
   wchodzi tu WYJŚCIE z sekcji: jedyny zielony kafel w siatce. Zielony robi tu
   dwie rzeczy naraz — domyka kompozycję i odróżnia „to jest link" od „to jest
   spis". Zastąpił osobny .btn-pill pod sekcją (reguła .inne-cta usunięta razem
   z nim — nic jej już nie używało).

   To JEDYNY kafel klikalny w całości, więc jako jedyny ma hover — dokładnie
   ten sam zestaw co karta wpisu .wpis: tło schodzi o stopień w głąb, strzałka
   odjeżdża, zero cienia. Kolory na zieleni: biel + brass-bright, bo brass ma
   na green 2.3:1 i ginie (ta sama poprawka co .hero-m .link-x i .foot-mrb).
   flex-column + margin-top:auto trzyma strzałkę przy dolnej krawędzi, równo
   z ostatnią pozycją list w sąsiednich kaflach. */
.usluga--cta{background:var(--green);display:flex;flex-direction:column;transition:var(--tr)}
.usluga--cta:hover{background:var(--green-deep)}
.usluga--cta h3{color:var(--white)}
.usluga--cta .sig{background:var(--brass-bright)}
.usluga--cta p{color:var(--on-dark)}
/* align-self: inline-flex w kolumnie flex rozciągnąłby się na całą szerokość
   i strzałka łapałaby najazd w pustce. Ten sam zestaw co .quad-cell .link-x. */
.usluga--cta .link-x{margin-top:auto;padding-top:32px;align-self:flex-start;color:var(--brass-bright)}
.usluga--cta:hover .link-x{color:var(--brass-light);gap:12px}
/* ═══════════════════════════════════════════════════════════
   PROWADZĘ OSOBIŚCIE — „trzy takty"           (strona główna, copy: sekcja 4)
   Wybór klienta spośród trzech wariantów (2026-07). Partial: osobiscie.html
   Rodowód: idea powtórzonego CTA z .ctaband (mockup-home-v3) — z tego
   zostało już tylko ciemne tło; CTA klient stąd zdjął (patrz niżej).

   Copy ma trzy takty retoryki: zarzut → pytanie → odpowiedź. Dostają trzy
   kolumny rozdzielone kreską — język pionowych kresek strona zna ze .steps.

   ⚠️ DWIE DECYZJE KLIENTA, KTÓRYCH NIE COFAĆ:
   1. Wszystkie trzy akapity mają IDENTYCZNĄ typografię. Wersja pokazowa
      dawała puencie szeryf 20px w bieli — odrzucone: „nie podoba mi się,
      że ten ostatni jest jakby większy". Hierarchię niesie wyłącznie układ.
      Nie dodawać tu wyróżnienia trzeciego akapitu.
   2. Brak CTA. Przycisk z telefonem usunięty na życzenie klienta — stąd
      w tym bloku nie ma reguły na .btn-pill. Telefon zostaje w hero,
      w .about i w kontakcie.
   ═══════════════════════════════════════════════════════════ */
.takty-grid{display:grid;grid-template-columns:1fr;gap:0}
/* mobile: takty jeden pod drugim, rozdzielone kreską poziomą */
.takt{padding:24px 0;border-top:1px solid var(--on-dark-line)}
.takt:first-child{border-top:0;padding-top:0}
@media(min-width:768px){
  .takty-grid{grid-template-columns:repeat(3,1fr)}
  .takt{border-top:0;border-left:1px solid var(--on-dark-line);padding:0 24px}
  .takt:first-child{border-left:0;padding-left:0}
  .takt:last-child{padding-right:0}
}
/* akapit w kolumnie ma trzymać jej szerokość, nie miarę 620px */
.takt p{max-width:none}


/* ═══════════════════════════════════════════════════════════
   PIERWSZY KROK (steps)   ← _archiwum/mockup-home-minimalist-skill.html
   Retrofit: rgba() → tokeny · 44px → 39px (drabinka) · 15px → 16px ·
   breakpoint 800 → 768 · odstępy z modułu 8px.
   Wersja JASNA, mimo że w archiwum pas był zielony: zieleń jest akcentem
   strukturalnym i na stronie głównej niesie go już #osobiscie. Drugi ciemny pas
   dwie sekcje niżej osłabiłby tamten zamiast dołożyć rytmu.
   ═══════════════════════════════════════════════════════════ */
.steps{display:grid;grid-template-columns:1fr;gap:0}
/* mobile: kroki jeden pod drugim, rozdzielone kreską poziomą */
.step{padding:32px 24px 32px 0;border-top:1px solid var(--hairline)}
.step:first-child{border-top:0;padding-top:0}

/* tablet: 2×2, NIE cztery kolumny. Archiwum stawiało 4 kolumny od 800px —
   my mamy tylko 768/1024, więc „4 kolumny od 768" oznaczałoby ~144px na
   kolumnę: ~18 znaków w wierszu i akapit łamiący się na osiem wierszy
   (sprawdzone na zrzucie przy 800px). Kreska pionowa dzieli kolumny,
   odstęp 32px dzieli rzędy. */
@media(min-width:768px){
  .steps{grid-template-columns:repeat(2,1fr);gap:32px 0}
  .step{border-top:0;border-left:1px solid var(--hairline);padding:0 24px}
  .step:nth-child(odd){border-left:0;padding-left:0}
  .step:nth-child(even){padding-right:0}
}
/* desktop: cztery kolumny jak w archiwum — tu 1fr to już ~230px */
@media(min-width:1024px){
  .steps{grid-template-columns:repeat(4,1fr);gap:0}
  /* cofa wyzerowanie z tabletu: w rzędzie czterech kreskę ma każdy oprócz
     pierwszego (:first-child stoi niżej, więc wygrywa przy równej wadze) */
  .step:nth-child(odd){border-left:1px solid var(--hairline);padding-left:24px}
  .step:first-child{border-left:0;padding-left:0}
  /* w rzędzie czterech prawą krawędź domyka ostatni, nie parzysty */
  .step:nth-child(even){padding-right:24px}
  .step:last-child{padding-right:0}
}
.step .n{display:block;font-family:var(--serif);font-size:var(--fs-39);line-height:1;color:var(--brass)}
.step h4{margin:16px 0 8px}
.step p{color:var(--steel)}


/* ═══════════════════════════════════════════════════════════
   CTA W SEKCJI KONTAKT — reguła OGÓLNA
   CTA stoi między .section-head a siatką danych (slot w partials/kontakt.html).
   Główka wnosi odstęp z góry, ten margines domyka odstęp z dołu.
   *{margin:0} — musi być jawny.

   Reguła jest ogólna (`.contact`), a nie przyszyta do jednej podstrony, bo
   potrzebują jej dwie: rozwody i „Pozostałe sprawy". Bliźniaczy
   `.kontakt-2 .btn-pill` skasowany 2026-07-16 razem z klasą w markupie —
   robił to samo, a warunek jego kasacji (decyzja v1/v2) został spełniony.
   Bezpieczne: .btn-pill wewnątrz .contact nie występuje nigdzie indziej —
   kontakt na index, o-mnie i karnej go nie ma, a kontakt-dane.html (wspólna
   siatka) nie zawiera żadnego przycisku.
   ═══════════════════════════════════════════════════════════ */
.contact .btn-pill{margin-bottom:48px}
/* .contact-note — MIKRO-PODPIS POD PIGUŁKĄ (2026-08-11, uwaga 2 klienta:
   bezpośredni kontakt z adwokatem prowadzącym sprawę).
   DLACZEGO TUTAJ, a nie kolejny akapit w treści: komunikat „prowadzę osobiście"
   pada w serwisie ~24 razy, ale ANI RAZU w punkcie, w którym czytelnik sięga
   po telefon. Ten podpis stoi przy CTA i nigdzie indziej.
   Token --fs-small (14px) + steel to ten sam szczebel, co podpis pod cytatem
   i meta w stopce — czyli „przypis do elementu wyżej", nie nowy głos.
   :has() ściąga odstęp pod pigułką TYLKO wtedy, gdy podpis pod nią stoi;
   przeglądarka bez :has() pokaże go 48px niżej — czytelny, układ się nie sypie.
   Konsumenci (6): sprawy-karne, rozwody, spadki, o-mnie, pozostale-sprawy, wpis-*.
   NIE ma go na index.html (tamta sekcja .contact nie ma pigułki) ani na
   kontakt.html (tam ten sam komunikat niesie akapit główki). */
.contact .btn-pill:has(+ .contact-note){margin-bottom:12px}
.contact-note{margin-bottom:48px;font-size:var(--fs-small);color:var(--steel)}



/* ═══════════════════════════════════════════════════════════════════════
   ═══  PODSTRONA: PRAWO KARNE  (sprawy-karne.html)  ═══
   Zbudowana na współdzielonym systemie: tokeny, szkielet sekcji, .tresc,
   .btn-pill, .faq, .contact, oraz .quad (siatka kart z numerem) — sytuacje
   klienta reużywają jej WPROST. Nowe są tylko trzy prymitywy: hero podstrony,
   „trzy punkty" i pionowa oś „przebieg".

   Rytm tła: hero(green) → sytuacje(surface) → rozwiązanie(green) →
   dlaczego-ja(paper) → przebieg(surface) → faq(paper) → kontakt(surface) →
   stopka(green). Dwa zielone pasy w treści (hero + rozwiązanie) — dokładnie
   jak strona główna niesie hero + #osobiscie. Akcent wyłącznie brass.
   ═══════════════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════
   HERO PODSTRONY — .hero-sub
   Nagłówek na podstronie jest BIAŁY (.solid): site.js wymusza go, bo na
   stronie nie ma .hero-m. Dlatego hero NIE wsuwa się pod nagłówek ujemnym
   marginesem (jak na stronie głównej) — leży pod nim w normalnym biegu.
   Ciemny pas nadaje sprawie powagę i orientuje; jest niższy niż hero strony
   głównej — podstrona ma orientować, nie robić wrażenia (h1 o szczebel niżej).
   ═══════════════════════════════════════════════════════════ */
.hero-sub{background:var(--green-deep);color:var(--on-dark);padding:56px 0 64px}
@media(min-width:768px){.hero-sub{padding:64px 0 88px}}
@media(min-width:1024px){.hero-sub{padding:80px 0 104px}}
.hero-sub .eyebrow{color:var(--brass-bright)}
.hero-sub .sig{background:var(--brass-bright)}
.hero-sub h1{color:var(--white);max-width:15em}
@media(min-width:1024px){.hero-sub h1{font-size:var(--fs-49)}}   /* cap h1 hero podstrony (KROK 4): 49px zamiast 39 */
/* `.hero-sub h1 strong` usunięte 2026-07-20 — od czasu skrócenia h1 podstron do
   samej nazwy działu żaden h1 w serwisie nie zawiera <strong> (bliźniacza reguła
   w .hero-m padła razem z nagłówkiem strony głównej). Wraca razem z <strong>. */
/* jeden akapit i koniec. 2026-07-20 z hero podstron zdjęto CTA i drugi akapit
   (przypis o właściwości sądów / współpracy MRB) — razem z nimi wyleciały stąd
   reguły `.hero-sub .hero-note` i `.hero-sub .hero-actions`; nic ich nie używa.
   `.hero-actions` żyje dalej, ale tylko w wariancie `.hero-m` (strona główna). */
.hero-sub .hero-p{color:var(--on-dark);margin-top:24px}

/* ═══════════════════════════════════════════════════════════
   TRZY PUNKTY — .punkty / .punkt
   „Oto N rzeczy": kolumny z kreską brass u góry (echo .sig). Ten sam prymityw
   pracuje na jasnym tle (Dlaczego ja) i na granacie (Rozwiązanie) — na ciemnym
   kreska i nagłówek wchodzą w wariant brass-bright / biel. Karta jest
   „bezramkowa": niesie ją sama kreska, żeby działała na dowolnym tle.
   ═══════════════════════════════════════════════════════════ */
.punkty{display:grid;grid-template-columns:1fr;gap:32px;margin-top:48px}
@media(min-width:768px){.punkty{grid-template-columns:repeat(3,1fr);gap:40px}}
.punkt{border-top:3px solid var(--brass);padding-top:24px}
.punkt h4{margin-bottom:8px}
.punkt p{max-width:none;color:var(--steel)}
/* Punkt bywa też skrótem do podstrony (o-mnie §4: trzy specjalizacje). Reguła
   jest OGÓLNA, nie przyszyta do jednej strony — link w punkcie to ten sam
   .link-x co wszędzie, brakuje mu wyłącznie odstępu od akapitu.
   margin-top:auto dosuwa strzałkę do dołu, żeby w rzędzie trzech kolumn
   o różnej długości tekstu linki stały na jednej linii — stąd flex na .punkt. */
.punkt{display:flex;flex-direction:column}
.punkt .link-x{margin-top:auto;padding-top:16px;align-self:flex-start}
/* na granacie: h4 nie jest objęte regułą .section-dark h2,h3 — trzeba jawnie */
.section-dark .punkt{border-top-color:var(--brass-bright)}
.section-dark .punkt h4{color:var(--white)}
.section-dark .punkt p{color:var(--on-dark)}

/* KROK 3 — editorial split „Rozwiązania". ZASADA WYRÓWNANIA: eyebrow + kreska to
   NADETYKIETA nad całością (.rozw-split-label — wrapper CELOWO bez własnej
   reguły w CSS: cały potrzebny odstęp niesie margin-bottom:24px z .sig, więc
   dokładanie tu czegokolwiek zdublowałoby rytm. Nie „brakująca reguła")
   — stoi PONAD splitem, nie wewnątrz
   kolumny, więc nie spycha treści prawej kolumny w górę. Split to dwie kolumny
   wyrównane do GÓRY (align-items:start): lewa = H2, prawa = oba akapity. Dzięki
   temu akapit zaczyna się na linii NAGŁÓWKA (H2), nie na linii eyebrow — sekcja
   liczy wysokość od nagłówka, nie od etykiety. Kreska (.sig) niesie odstęp
   etykieta→treść (margin-bottom 24), więc split nie potrzebuje własnego.
   Label i split to dzieci .container o pełnej szerokości, więc lewa/prawa krawędź
   pokrywa się z krawędziami .punkty poniżej. Dwie kolumny od 1024; niżej — jedna
   pod drugą (akapity zostają poza .section-head: tam p dostaje steel, na granacie
   nieczytelny — patrz komentarz przy .adres w archiwum). */
.rozw-split{display:grid;grid-template-columns:1fr;gap:24px}
@media(min-width:1024px){
  .rozw-split{grid-template-columns:5fr 7fr;column-gap:64px;align-items:start}
}
/* prawa kolumna sama daje miarę (~measure), więc akapity wypełniają ją do krawędzi */
.rozw-split-body p{max-width:none}
.rozw-split-body > p + p{margin-top:24px}
/* etykieta „Co to dla Ciebie znaczy" wprowadza .punkty — pełna szerokość, pod splitem */
.rozw-lbl{display:inline-block;margin-top:48px}

/* ═══════════════════════════════════════════════════════════
   PRZEBIEG SPRAWY — .przebieg / .krok
   Pięć etapów jako pionowa oś czasu: numer + nazwa + opis; węzeł to kwadrat
   brass na szynie (radius 0 = struktura, DESIGN_BOARD). Zostaje pionowo także
   na desktopie: pięć kolumn dałoby ~18 znaków w wierszu — ten sam błąd, przed
   którym broni się .steps. Oś czyta się jak lista, w której szukasz siebie.
   ═══════════════════════════════════════════════════════════ */
.przebieg{max-width:720px}
.krok{position:relative;padding:0 0 40px 40px;border-left:2px solid var(--hairline)}
.krok:last-child{padding-bottom:0}
.krok::before{content:"";position:absolute;left:-5px;top:6px;width:9px;height:9px;background:var(--brass)}
.krok-n{display:block;font-family:var(--serif);font-size:var(--fs-25);line-height:1;color:var(--brass)}
.krok h4{margin:8px 0}
.krok p{max-width:none;color:var(--steel)}

/* ═══════════════════════════════════════════════════════════════════════
   ═══  PODSTRONA: ROZWODY I PODZIAŁ MAJĄTKU  (rozwody-i-podzial-majatku.html)  ═══
   Strona stoi w całości na prymitywach współdzielonych (hero-sub, quad,
   rozw-split, punkty, przebieg, faq, contact). JEDYNY nowy komponent to .filar
   — sekcja „Podział majątku" (copy §6): drugi tematyczny filar strony, którego
   nie trzyma żaden istniejący klocek (2 akapity wstępu + 4 aspekty, nie 3).

   2026-07-20: komponent nazywał się `.podzial*` i został PRZEMIANOWANY na
   `.filar*` — bez jednej zmiany w wyglądzie. Powód: „Spadki i sprawy cywilne"
   potrzebują dokładnie tej samej figury dla sekcji „Sprawy cywilne", a klasa
   nazwana od podziału majątku kłamałaby na tamtej stronie. `.filar` = drugi
   tematyczny filar podstrony: główka + lead na 1–2 akapity + 4 aspekty 2×2.
   Konsumenci: rozwody §6, spadki §7.

   Rytm tła strony: hero(green) → sytuacje(surface) → rozwiązanie(green) →
   dlaczego-ja(paper) → przebieg(surface) → PODZIAŁ(green) → faq(paper) →
   kontakt(surface) → stopka(green). Trzy zielone pasy treści (hero, rozwiązanie,
   podział) — o jeden więcej niż „Sprawy karne", bo strona jest dłuższa i niesie
   drugą oś tematyczną; podział kotwiczy ciemnym akcentem dolną połowę. Akcent = brass.
   ═══════════════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════
   FILAR TEMATYCZNY — .filar (head + lead + grid + item)
   Drugi filar tematyczny podstrony: temat, który nie jest podsekcją głównego
   wątku, tylko osobną sprawą obok niego. Rozwody §6 „Podział majątku",
   spadki §7 „Sprawy cywilne". Forma celowo INNA niż .rozw-split, mimo
   wspólnego ciemnego tła:
   • .filar-head — jak .section-head, ale z własnym blokiem .filar-lead na
     1–2 akapity. Nie używamy tu .section-head, bo jego `p` na .section-dark
     dostaje steel (patrz komentarz przy .rozw-split) — na zieleni nieczytelny.
   • .filar-grid / .filar-item — cztery aspekty w siatce 2×2, każdy z kreską
     brass OD LEWEJ. Kreska-z-boku (echo .tresc blockquote) odróżnia komponent
     od .punkty (kreska u góry) i .quad (pełna ramka). Bazowo neutralny
     (ink/steel + brass), z wariantem .section-dark — dokładnie jak .punkt,
     więc klocek działa na dowolnym tle.
   ═══════════════════════════════════════════════════════════ */
.filar-head{max-width:720px;margin-bottom:48px}
@media(min-width:768px){.filar-head{margin-bottom:56px}}
.filar-lead{margin-top:16px}
.filar-lead > p{max-width:var(--measure);color:var(--steel)}
.filar-lead > p + p{margin-top:20px}
.section-dark .filar-lead > p{color:var(--on-dark)}

.filar-grid{display:grid;grid-template-columns:1fr;gap:32px}
@media(min-width:768px){.filar-grid{grid-template-columns:repeat(2,1fr);gap:40px 48px}}
.filar-item{border-left:2px solid var(--brass);padding-left:24px}
.filar-item h4{margin-bottom:8px}
.filar-item p{max-width:none;color:var(--steel)}
/* na zieleni: h4 nie jest objęte regułą .section-dark h2,h3 — trzeba jawnie */
.section-dark .filar-item{border-left-color:var(--brass-bright)}
.section-dark .filar-item h4{color:var(--white)}
.section-dark .filar-item p{color:var(--on-dark)}

/* ═══════════════════════════════════════════════════════════════════════
   ═══  PODSTRONA: KONTAKT  (kontakt.html)  ═══
   Strona stoi W CAŁOŚCI na prymitywach współdzielonych — ZERO własnego CSS.
   Ten baner jest więc pusty i to jest jego treść: dwie sekcje (hero-sub +
   contact/contact-grid) złożyły się z gotowych klocków bez ani jednej reguły.
   Rytm tła: hero(green) → dane(surface) → stopka(green).

   2026-07-20: strona skrócona do hero + dane (decyzja Mikołaja). Razem z
   sekcją-rozdzielnikiem usunięto stąd reguły `.punkt .link-x` (odstęp linku
   w „trzech punktach" + wariant brass-bright na ciemnym) — nic ich już nie
   używało: `.link-x` na index.html żyje w `.quad-cell`, nie w `.punkt`.
   Wracają razem z sekcją, jeśli kiedyś wróci.
   ═══════════════════════════════════════════════════════════════════════ */

/* stan bieżącej pozycji w menu (a11y: nav-state-active) */
.nav-drop-menu a[aria-current="page"]{color:var(--brass-bright)}
/* Pozycje TOP-LEVEL (Kontakt, dalej O mnie / Aktualności) — zapowiedziane
   w CLAUDE.md „gdy te strony powstaną", wchodzi z kontakt.html.
   Specyficzność: `.site-header.solid .site-nav a` (0,3,1) bije samo
   `.site-nav > a[aria-current]` (0,2,1), dlatego stan .solid ma osobną,
   mocniejszą regułę. Nad ciemnym hero / w menu mobilnym linki są białe →
   akcent brass-bright; na białym nagłówku (desktop) są ink → brass-deep. */
.site-nav > a[aria-current="page"]{color:var(--brass-bright)}
@media(min-width:1024px){
  .site-header.solid .site-nav > a[aria-current="page"]{color:var(--brass-deep)}
}


/* ═══════════════════════════════════════════════════════════════════════
   ═══  PODSTRONA: AKTUALNOŚCI  (aktualnosci.html + wpis-*.html)  ═══
   Strona stoi na prymitywach współdzielonych (hero-sub, section-head, tresc,
   link-x, contact) — JEDYNY nowy komponent to lista wpisów `.wpisy` / `.wpis`.
   Powód: żaden istniejący klocek nie trzyma pary zdjęcie + tekst w jednej linii.
   .quad to siatka bez zdjęć i celowo NIEKLIKALNA, .review nie ma obrazu,
   .przebieg jest osią czasu. Zamiast naginać któryś z nich — jeden nowy prymityw.

   Rytm tła: hero(green) → wpisy(surface) → stopka(green).
   Wpis: hero(green) → treść(paper) → kontakt(surface) → stopka(green).
   ═══════════════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════
   LISTA WPISÓW — .wpisy / .wpis
   Karta „w linii": zdjęcie w stałej kolumnie + tytuł, meta i lead obok.
   Kolumna ma STAŁE px, nie fr — przy 1fr/1fr zdjęcie rosłoby na szerokim
   ekranie szybciej niż tekst i karta zamieniałaby się w baner.
   Mobile: zdjęcie 16:9 na górze, treść pod spodem (jedna kolumna).

   Cała karta jest <a> — inaczej niż .quad-cell, która jest nieklikalna i ma
   .link-x jako jedyną afordancję. Tutaj klikalne jest wszystko, więc karta
   MUSI to pokazać: ramka → brass, tytuł → brass-deep, strzałka rozsuwa się
   (ta sama reguła co .link-x:hover), zdjęcie schodzi z szarości. Bez cienia
   i bez podnoszenia karty (DESIGN_BOARD: zero cieni) — sygnał niesie kolor.
   <a> nie może zawierać <a>, więc strzałka to <span class="link-x"> —
   .link-x jest zdefiniowany na klasie, nie na a.link-x, więc działa wprost.
   ═══════════════════════════════════════════════════════════ */
.wpisy{display:flex;flex-direction:column;gap:24px}
@media(min-width:768px){.wpisy{gap:32px}}

.wpis{
  display:grid;grid-template-columns:1fr;
  background:var(--paper);border:1px solid var(--hairline);
  color:var(--ink);transition:var(--tr);
}
@media(min-width:768px){.wpis{grid-template-columns:240px 1fr}}
@media(min-width:1024px){.wpis{grid-template-columns:320px 1fr}}
.wpis:hover{border-color:var(--brass);color:var(--ink)}
.wpis:hover h3{color:var(--brass-deep)}
.wpis:hover .link-x{color:var(--brass-deep);gap:12px}

/* Zdjęcie. Obróbka 1:1 z .panel-photo (DESIGN_BOARD F: chłodno i formalnie) —
   nie wymyślamy drugiego filtra. `background:var(--surface)` jest ZAMIERZONY:
   dopóki plik nie trafi do img/aktualnosci/, kolumna trzyma wymiar i karta
   nie ma dziury. Na desktopie zdjęcie rozciąga się na wysokość karty
   (height:100% + object-fit:cover), więc karty o różnej długości leadu
   nie mają pustych pasów. min-height chroni kartę z krótkim leadem. */
.wpis-foto{
  width:100%;aspect-ratio:16/9;object-fit:cover;
  background:var(--surface);
  filter:grayscale(.4) saturate(.8) contrast(1.02);
  transition:var(--tr);
}
@media(min-width:768px){
  .wpis-foto{aspect-ratio:auto;height:100%;min-height:200px}
}
.wpis:hover .wpis-foto{filter:grayscale(0) saturate(.9) contrast(1.02)}

.wpis-body{padding:24px;display:flex;flex-direction:column}
@media(min-width:768px){.wpis-body{padding:32px}}
@media(min-width:1024px){.wpis-body{padding:40px}}

/* Meta: data + dział. Ten sam idiom co .eyebrow (micro, uppercase, tracking),
   ale eyebrow jest brass w całości — tu brass niesie WYŁĄCZNIE dział, żeby
   data nie krzyczała akcentem. Kropka-separator jako ::before na dziale. */
.wpis-meta{
  display:flex;flex-wrap:wrap;align-items:center;gap:4px 12px;
  font-size:var(--fs-micro);line-height:1.4;
  letter-spacing:.14em;text-transform:uppercase;color:var(--steel);
}
.wpis-meta .dzial{color:var(--brass);font-weight:600}
.wpis-meta .dzial::before{content:"·";margin-right:12px;color:var(--hairline)}

/* Tytuł capowany do 25px — dokładnie jak .quad-cell h3. Szczebel h3 (31px)
   w karcie bije H2 sekcji i spłaszcza hierarchię (patrz komentarz przy
   drabince: „tytuł karty capowany do 25"). */
.wpis-body h3{font-size:var(--fs-25);line-height:1.3;margin:16px 0 12px;transition:var(--tr)}
.wpis-body p{max-width:none;color:var(--steel)}
/* margin-top:auto dosuwa strzałkę do dołu karty (karty w rzędzie mają różnej
   długości leady); align-self obowiązkowo — inline-flex w kolumnie flex
   rozciągnąłby się na całą szerokość. Ten sam zestaw co .quad-cell .link-x. */
.wpis-body .link-x{margin-top:auto;padding-top:24px;align-self:flex-start}

/* ═══════════════════════════════════════════════════════════
   STRONA WPISU — .wpis-meta w hero
   Data i dział stoją w ciemnym hero, POD tytułem: kanoniczna kolejność
   .hero-sub to eyebrow → sig → h1 → p i nie ma sensu jej rozbijać metadanymi.
   Steel (7.5:1 na papierze) na green-deep spada poniżej progu, brass też —
   dlatego wariant na ciemnym, dokładnie jak .hero-sub .eyebrow / .sig.
   ═══════════════════════════════════════════════════════════ */
.hero-sub .wpis-meta{color:var(--on-dark-muted);margin-top:24px}
.hero-sub .wpis-meta .dzial{color:var(--brass-bright)}
.hero-sub .wpis-meta .dzial::before{color:var(--on-dark-line)}
/* Powrót do listy — domknięcie treści wpisu. Stoi POZA .tresc (patrz komentarz
   w wpis-*.html: `.tresc a` dokłada podkreślenie, którego .link-x nie zdejmie),
   więc miarę musi wziąć sam — inaczej kreska ciągnęłaby się przez całe 1200px
   pod 620-pikselową kolumną tekstu. */
.wpis-powrot{max-width:var(--measure);margin-top:48px;padding-top:32px;border-top:1px solid var(--hairline)}

/* ═══════════════════════════════════════════════════════════
   STRONA WPISU — układ dwukolumnowy .wpis-layout + belka autora .autor
   Treść wpisu ma miarę 620px, a kontener 1200px — po prawej zostawało 500px
   pustki. Belka autora ją zagospodarowuje i domyka wpis tym, czego brakuje
   każdemu tekstowi na blogu kancelarii: KTO to pisze i co zrobić dalej.

   Kolumna boczna ma STAŁE 320px (jak zdjęcie w .wpis) — przy `fr` rosłaby
   razem z ekranem i zaczęła konkurować z tekstem. Poniżej 1024 belka schodzi
   POD treść: 620px tekstu i 320px belki obok siebie nie mieszczą się na tablecie.
   Kolejność w HTML (treść → belka) jest już kolejnością czytania, więc na
   mobile nie trzeba nic przestawiać ani ratować `order`.

   ⚠️ align-self:start jest OBOWIĄZKOWE przy position:sticky w gridzie —
   domyślny stretch rozciąga element na całą wysokość wiersza i sticky nie ma
   się po czym przesuwać (element „przykleja się", ale nigdzie nie jedzie).
   ═══════════════════════════════════════════════════════════ */
.wpis-layout{display:grid;grid-template-columns:1fr;gap:48px}
@media(min-width:1024px){
  .wpis-layout{grid-template-columns:minmax(0,1fr) 320px;column-gap:64px;align-items:start}
}

/* Ciemna belka na jasnej sekcji — ten sam chwyt co .quad-cell--firma (green, NIE
   green-deep: green-deep jest zarezerwowany dla całych sekcji i hero).
   To akcent 320px, nie pas, więc nie łamie rytmu tła strony.
   CELOWO BEZ .reveal: element jest sticky, a .reveal trzyma na nim transform,
   który przez moment przesuwałby przyklejoną belkę. Statyczny wjazd byłby
   okupiony drganiem przy scrollu — nie warto. */
.autor{background:var(--green);color:var(--on-dark);padding:32px}
@media(min-width:1024px){
  .autor{position:sticky;top:calc(var(--header-h) + 24px);align-self:start}
}

/* Lockup autora: awatar + nazwisko + rola. Awatar to jedyne w systemie
   miejsce z radius 50% (DESIGN_BOARD: 0 struktura · 50% awatary · 30px CTA) —
   idiom wzięty z .review .av, przełożony na ciemne tło (biały kontur + biel).
   (Do 2026-07-20 wskazywał tu na .foot-brand .brand-mark — ta reguła padła
   razem ze składanym lockupem marki, zastąpionym plikiem logo.)
   Monogram, nie zdjęcie: żadnego pliku nie brakuje i nic się nie psuje.
   Podmiana na fotografię = zamiana <span> na <img class="autor-av"> —
   reguła trzyma wymiar i okrągły kadr, dołóż tylko object-fit:cover. */
.autor-lockup{display:flex;align-items:center;gap:16px}
.autor-av{
  width:48px;height:48px;flex:0 0 auto;border-radius:50%;
  border:1px solid var(--on-dark-line);
  display:flex;align-items:center;justify-content:center;
  font-family:var(--serif);font-size:var(--fs-lead);line-height:1;
  color:var(--white);font-weight:700;
  object-fit:cover;
}
.autor-imie{display:block;font-family:var(--serif);font-size:var(--fs-body);line-height:1.3;color:var(--white);font-weight:700}
.autor-rola{display:block;margin-top:4px;font-size:var(--fs-micro);line-height:1.4;letter-spacing:.14em;text-transform:uppercase;color:var(--on-dark-muted)}
/* akapit trzyma szerokość belki, nie miarę 620px */
.autor p{max-width:none;font-size:var(--fs-small);color:var(--on-dark);margin-top:24px}

/* CTA. Kreska u góry oddziela „kto pisze" od „co dalej" — ten sam podział,
   co .wpis-powrot na dole treści. Pigułka wchodzi w wariant --ghost:
   brass na zieleni ma 2.3:1 i przestaje czytać się jako przycisk.
   Pigułka mieści się w 256px światła (320 − 2×32 paddingu) — nie zwężać
   jej paddingów pod tę belkę: kształt CTA jest w systemie JEDEN. */
.autor-cta{margin-top:24px;padding-top:24px;border-top:1px solid var(--on-dark-line)}
.autor-cta b{display:block;margin-bottom:16px;font-family:var(--serif);font-size:var(--fs-body);line-height:1.4;color:var(--white);font-weight:400}


/* ═══════════════════════════════════════════════════════════════════════
   ═══  PODSTRONA: SPADKI I SPRAWY CYWILNE  (spadki-i-sprawy-cywilne.html)  ═══
   Strona stoi na prymitywach współdzielonych (hero-sub, quad, rozw-split,
   punkty, przebieg, faq, contact) oraz na .filar — komponencie, który powstał
   przy rozwodach i tutaj wraca WPROST, bez jednej nowej reguły (sekcja §7
   „Sprawy cywilne": główka + lead + 4 aspekty 2×2, dokładnie ta figura).

   JEDYNY nowy komponent to .terminy — sekcja §4 „Trzy terminy".

   Rytm tła: hero(green) → sytuacje(surface) → rozwiązanie(green) →
   TERMINY(paper) → dlaczego-ja(surface) → przebieg(paper) → cywilne(green) →
   faq(paper) → kontakt(surface) → stopka(green). Trzy zielone pasy treści
   (hero, rozwiązanie, cywilne) — tyle samo co rozwody, bo strona ma tę samą
   długość i tę samą drugą oś tematyczną. Akcent wyłącznie brass.
   ═══════════════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════
   TRZY TERMINY — .terminy / .termin
   DLACZEGO NOWY KLOCEK, a nie .punkty / .przebieg / .filar:
   teza tej sekcji brzmi „te terminy są trzy, liczone od TRZECH RÓŻNYCH
   MOMENTÓW". Nośnikiem nie jest więc ani liczba (dwa z trzech to te same
   „sześć miesięcy"), ani kolejność — tylko punkt startu. Żeby argument dało
   się przeczytać wzrokiem, każdy wiersz musi mieć ten sam, jawnie oznaczony
   slot „Liczone od"; dopiero zestawienie trzech takich slotów pokazuje różnicę.
   .punkty to trzy krótkie kolumny bez miejsca na taki slot i bez miejsca na
   4-zdaniowy akapit. .przebieg czyta się jako SEKWENCJĘ (1→2→3), a te terminy
   biegną równolegle i wzajemnie się nie warunkują. .filar to siatka 2×2.

   Forma: wiersze rozdzielone włosową kreską (rejestr tabeli/terminarza, nie
   kart), lewa kolumna = licznik czasu w szeryfie brass, prawa = nazwa,
   slot „Liczone od" i akapit. Zero cieni, radius 0 — jak reszta struktury.
   Licznik stoi na --fs-39, czyli szczycie drabinki h2 (clamp 31→39): ma ważyć
   tyle co nagłówek sekcji, ale nie więcej — inaczej liczba zaczyna bić H2.
   ═══════════════════════════════════════════════════════════ */
.terminy{display:flex;flex-direction:column}
.termin{
  display:grid;grid-template-columns:1fr;gap:16px;
  padding:32px 0;border-top:1px solid var(--hairline);
}
.termin:last-child{border-bottom:1px solid var(--hairline)}
@media(min-width:768px){
  .termin{grid-template-columns:180px 1fr;column-gap:48px;padding:40px 0}
}
@media(min-width:1024px){
  .termin{grid-template-columns:220px 1fr;column-gap:64px}
}

/* Licznik: liczba w szeryfie + jednostka w mikrotypografii.
   Na telefonie licznik jest osobnym wierszem nad treścią, więc układa się
   W LINII („6 MIESIĘCY", wspólna linia bazowa) — dwa wiersze zjadałyby tam
   pion bez zysku. Od 768 licznik ma własną kolumnę i wtedy dopiero stackuje
   się w pionie: „6" i „5" siadają na tej samej linii we wszystkich trzech
   wierszach i czytają się jako jedna kolumna liczb. */
.termin-czas{display:flex;align-items:baseline;gap:12px}
@media(min-width:768px){.termin-czas{display:block}}
.termin-ile{
  display:block;font-family:var(--serif);font-size:var(--fs-39);
  line-height:1;color:var(--brass);
}
.termin-jedn{
  display:block;
  font-weight:600;font-size:var(--fs-micro);
  letter-spacing:.16em;text-transform:uppercase;color:var(--steel);
}
@media(min-width:768px){.termin-jedn{margin-top:8px}}

/* Nazwa terminu capowana do 25px — ten sam powód co w .quad-cell / .wpis-body:
   szczebel h3 (31px) w wierszu bije H2 sekcji i spłaszcza hierarchię. */
.termin-body h3{font-size:var(--fs-h4);line-height:1.3;margin-bottom:16px}

/* Slot „Liczone od" — jedyny element, dla którego ta sekcja istnieje.
   Wyróżniony tłem --surface (nie ramką i nie kreską-z-boku: kreska brass
   od lewej to już idiom .filar-item, a ta strona używa obu komponentów;
   dwa różne znaczenia nie mogą nosić tego samego znaku).
   ZAŁOŻENIE: sekcja stoi na --paper. Na .section-surface chip zniknie —
   wtedy trzeba dołożyć wariant, nie przenosić sekcji po cichu. */
.termin-od{max-width:none;background:var(--surface);padding:16px 20px;margin-bottom:16px}
.termin-od b{
  display:block;margin-bottom:4px;
  font-weight:600;font-size:var(--fs-micro);
  letter-spacing:.16em;text-transform:uppercase;color:var(--brass);
}
.termin-body > p{max-width:none;color:var(--steel)}


/* ═══════════════════════════════════════════════════════════════════════
   ═══  PODSTRONA: O MNIE  (o-mnie.html)  ═══
   Strona jest w 3/4 rekombinacją: hero-sub, .panel (ten sam blok „portret +
   bio", co na stronie głównej — komentarz przy .panel zapowiadał go tutaj
   od początku: „Partial: o-mnie.html"), rozw-split + punkty, contact.
   Dwa komponenty są NOWE, bo copy przyniosło dwie figury, których żaden
   klocek nie trzymał — obie opisane niżej.

   Rytm tła: hero(green) → droga(paper) → dwa światy(surface) →
   podejście(green) → specjalizacje(paper) → prywatnie(surface) →
   kontakt(paper) → stopka(green).
   UWAGA na kontakt: tu stoi na PAPER, nie na surface jak na pozostałych
   podstronach. Nie jest to niedopatrzenie — wyżej leży „Prywatnie" na
   surface, a dwa te same tła obok siebie kasują granicę sekcji.
   ═══════════════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════
   DWA ŚWIATY — .swiaty / .swiat                    ← NOWY (copy §2)
   Copy mówi wprost: „Na co dzień łączę dwa światy" — Poznań (spółka MRB,
   sprawy dla firm) i Kościan (klient indywidualny). To ZESTAWIENIE, nie
   lista i nie oś czasu: sens niesie sąsiedztwo dwóch kolumn, nie kolejność.

   DLACZEGO NIE ISTNIEJĄCY KLOCEK:
   • .punkty — siatka jest 3-kolumnowa (repeat(3,1fr)); dwa elementy zostawiają
     dziurę, a kreska brass u góry oznacza w tym systemie „oto N powodów",
     nie „oto dwie strony tej samej pracy".
   • .filar-grid — 2×2 i kreska brass OD LEWEJ; ten znak należy do .filar-item,
     a strona i tak używa .punkty dwa razy. Trzeci wariant kreski brass zamieniłby
     akcent w dekorację.
   • .rozw-split — 5fr/7fr, czyli nagłówek KONTRA tekst. Tu obie kolumny są
     równorzędne; asymetria kłamałaby, że Poznań jest ważniejszy od Kościana.
   Stąd własna figura, ale w JĘZYKU, który strona już zna: dwie kolumny
   rozdzielone kreską PIONOWĄ — dokładnie idiom .steps i .takty (mobile:
   kreska pozioma nad elementem, od 768: pionowa z lewej).

   Nazwa miasta to h3 CAPOWANY do 25px (--fs-h4) — jak .quad-cell h3
   i .wpis-body h3. Szczebel h3 (31px) bije H2 sekcji (39px) i spłaszcza
   hierarchię; ten cap jest w systemie regułą, nie wyjątkiem.

   ─── DRUGI KONSUMENT (2026-08-12): podmioty-gospodarcze.html §3 ───
   „Dwa tryby współpracy" (sprawa po sprawie ‖ stała obsługa) to ta sama
   figura: dwie RÓWNORZĘDNE kolumny + puenta pod obiema. Klocek wszedł tam
   bez jednej nowej reguły; .swiat-rola niesie etykietę trybu zamiast roli
   miasta.
   ⚠️ Nazwa zaczyna kłamać: „światy" opisują o-mnie, nie tryby współpracy.
   Precedens .podzial → .filar mówi, żeby przy drugim konsumencie przemianować
   klocek na neutralny (np. .zestaw / .zestaw-poz / .zestaw-rola). NIE zrobiono
   tego przy dokładaniu podmiotów gospodarczych, żeby nie ruszać o-mnie.html
   przy okazji innego zadania. Przy TRZECIM konsumencie przemianować bez pytania.
   ═══════════════════════════════════════════════════════════ */
.swiaty{display:grid;grid-template-columns:1fr;gap:0}
.swiat{padding:32px 0;border-top:1px solid var(--hairline)}
.swiat:first-child{border-top:0;padding-top:0}
@media(min-width:768px){
  .swiaty{grid-template-columns:repeat(2,1fr)}
  .swiat{border-top:0;border-left:1px solid var(--hairline);padding:0 40px}
  .swiat:first-child{border-left:0;padding-left:0}
  .swiat:last-child{padding-right:0}
}
.swiat h3{font-size:var(--fs-h4);line-height:1.4}
/* rola/adres pod nazwą miasta — mikrotypografia brass, ten sam idiom co .eyebrow,
   ale NIE .eyebrow: tamta klasa otwiera główkę sekcji i ma nad sobą .sig */
.swiat-rola{
  display:block;margin-top:8px;
  font-weight:600;font-size:var(--fs-micro);line-height:1.4;
  letter-spacing:.14em;text-transform:uppercase;color:var(--brass);
}
.swiat p{max-width:none;margin-top:16px;color:var(--steel)}
/* Puenta sekcji („To dla Ciebie oznacza jedno…") — pas pod OBIEMA kolumnami,
   bo dotyczy ich razem. Kreska WŁOSOWA, nie brass: brass u góry to znak .punkt,
   a te dwa komponenty stoją na tej samej stronie.
   Akapit trzyma miarę (620px z `p`), kreska idzie przez pełną szerokość —
   dlatego to div, nie sam <p>. Kolor ink, nie steel: to konkluzja, nie przypis. */
.swiaty-koniec{margin-top:48px;padding-top:32px;border-top:1px solid var(--hairline)}
.swiaty-koniec p{color:var(--ink)}

/* ═══════════════════════════════════════════════════════════
   PRYWATNIE — .prywatnie                           ← NOWY (copy §5)
   Najkrótsza sekcja strony i jedyna, która nie mówi o sprawach. Copy daje
   dwie różne rzeczy naraz: GARŚĆ FAKTÓW (rodzina, sport, lektury) i JEDNO
   ZDANIE UZASADNIENIA („łatwiej powierzyć sprawę komuś, kogo widzisz jako
   człowieka"). Wrzucone do jednego akapitu brzmią jak wyliczanka; rozdzielone
   — fakty czytają się jak dane, a zdanie jak myśl.

   Stąd split 5fr/7fr: po lewej lista faktów, po prawej powód.
   Kolejność w HTML (fakty → powód) JEST kolejnością czytania na mobile
   i nie wymaga `order`.

   Typografia listy to CELOWY cytat z .contact-row: etykieta micro/uppercase
   /steel + wartość szeryfem 20px/ink. Ta para niesie w systemie rolę
   „dane, nie proza" — i to samo robi tutaj. Etykiety („W ruchu",
   „Po godzinach") są wzięte z copy, nie dopisane.
   BEZ ikon i BEZ kwadratów — .c-ico należy do kontaktu; tutaj byłby ozdobą.
   ═══════════════════════════════════════════════════════════ */
.prywatnie{display:grid;grid-template-columns:1fr;gap:40px}
@media(min-width:1024px){.prywatnie{grid-template-columns:5fr 7fr;column-gap:64px;align-items:start}}
.prywatnie-lista{display:flex;flex-direction:column}
.prywatnie-poz{padding:20px 0;border-bottom:1px solid var(--hairline)}
.prywatnie-poz:first-child{border-top:1px solid var(--hairline)}
/* display:block na obu — inaczej etykieta i wartość sklejają się w jedną linię
   (ten sam powód, co przy .contact-row .lbl) */
.prywatnie-poz .lbl{display:block;font-size:var(--fs-micro);line-height:1.4;letter-spacing:.14em;text-transform:uppercase;color:var(--steel)}
.prywatnie-poz .val{display:block;margin-top:4px;font-family:var(--serif);font-size:var(--fs-lead);line-height:1.3;color:var(--ink)}
.prywatnie-txt p{max-width:none;color:var(--ink)}


/* ═══════════════════════════════════════════════════════════════════════
   ═══  PODSTRONA: POZOSTAŁE SPRAWY  (pozostale-sprawy.html)  ═══
   JEDYNA podstrona zaprojektowana INDYWIDUALNIE (decyzja Mikołaja, 2026-07-20:
   „staraj się nie używać komponentów na nowo, chyba że evergreen — hero, CTA").
   Powód nie jest kosmetyczny: to nie jest kolejna strona sprzedażowa jednego
   działu (problem → rozwiązanie → przebieg → FAQ), tylko REJESTR — spis
   siedmiu spraw w trzech grupach, do przejrzenia i znalezienia siebie.
   Żaden klocek systemu nie trzyma GRUPOWANEGO spisu:
   • .quad   — siatka kart bez grup, 2×2, kafel-nagłówek zjada jedno pole;
   • .punkty — sztywne repeat(3,1fr); grupy mają 2, 2 i 3 pozycje;
   • .filar  — 2×2 wokół JEDNEGO tematu, a tu tematów są trzy równorzędne;
   • .przebieg / .terminy — sekwencja i terminarz; spis nie jest ani jednym,
     ani drugim (kolejność grup nic nie znaczy).

   Rytm tła: hero(green-deep) → rejestr(paper) → firma(green-deep) →
   podejście(surface) → kontakt(paper) → stopka(green).
   UWAGA na kontakt: stoi na PAPER, nie na surface jak na karnej/rozwodach —
   wyżej leży „Wspólne podejście" na surface (ten sam powód co w o-mnie.html).

   Trzy nowe komponenty: .skierowanie · .rejestr · .firma. Reszta to prymitywy
   współdzielone (hero-sub, section-head, link-x, bigmark, btn-pill, contact).
   ═══════════════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════
   ROZDZIELNIK DO SPECJALIZACJI — .skierowanie      ← NOWY (copy §1)
   Copy otwiera zdaniem „najwięcej spraw prowadzę jako adwokat od spraw
   karnych, rozwodowych i spadkowych" i zaszywa w nim TRZY LINKI. Ta strona
   jest zbiorem resztek, więc część ruchu trafia tu przez pomyłkę — pasek
   ma ich zawrócić od razu, zanim zaczną czytać spis.

   NIE .punkty (kreska brass u góry znaczy „oto N powodów", a to jest
   nawigacja, nie argument) i NIE inline w akapicie główki (`a` w
   .section-head p nie ma podkreślenia — link bez afordancji).
   Forma: pas ograniczony włosową kreską z góry i z dołu, w środku trzy
   .link-x rozdzielone kreską PIONOWĄ — idiom .steps / .takty / .swiaty.
   ═══════════════════════════════════════════════════════════ */
.skierowanie{
  display:grid;grid-template-columns:1fr;
  border-top:1px solid var(--hairline);border-bottom:1px solid var(--hairline);
  margin-bottom:56px;
}
@media(min-width:768px){.skierowanie{margin-bottom:64px}}
/* .link-x jest inline-flex — jako element gridu rozciąga się na pełną komórkę
   (justify-self:stretch), więc kreska pionowa stoi na krawędzi kolumny. */
.skierowanie .link-x{padding:20px 0;border-top:1px solid var(--hairline)}
.skierowanie .link-x:first-child{border-top:0}
@media(min-width:768px){
  .skierowanie{grid-template-columns:repeat(3,1fr)}
  .skierowanie .link-x{border-top:0;border-left:1px solid var(--hairline);padding:20px 24px}
  .skierowanie .link-x:first-child{border-left:0;padding-left:0}
  .skierowanie .link-x:last-child{padding-right:0}
}

/* ═══════════════════════════════════════════════════════════
   REJESTR SPRAW — .rejestr (grupa / lbl / lista) + .sprawa
   Serce strony i jej jedyna duża figura. Trzy grupy tematyczne, w każdej
   2–3 sprawy, numeracja CIĄGŁA przez cały spis (01…07) — to nie ozdoba:
   ciągły licznik jest jedynym znakiem mówiącym „to jest komplet", czyli
   dokładnie tezę strony („a jeśli swojej nie widzisz, zadzwoń").

   Układ: od 1024 etykieta grupy stoi w lewej kolumnie i JEDZIE STICKY obok
   swoich pozycji — czytelnik przez cały czas wie, w której grupie jest.
   To rejestr, nie siatka kart, więc pozycje są WIERSZAMI rozdzielonymi
   włosową kreską; grupy rozdziela kreska GRUBA (2px, --green) — jedyne
   miejsce w systemie z kreską 2px w kolorze zieleni i właśnie ona odróżnia
   „granicę grupy" od „granicy pozycji". Zero ramek, zero kart, zero cieni.

   ⚠️ align-items:start jest OBOWIĄZKOWE — patrz komentarz przy .autor:
   przy domyślnym stretch etykieta wypełnia całą wysokość wiersza i sticky
   nie ma po czym jechać.
   ═══════════════════════════════════════════════════════════ */
.rejestr{display:flex;flex-direction:column}

.rejestr-grupa{
  display:grid;grid-template-columns:1fr;gap:32px;
  padding:40px 0;border-top:2px solid var(--green);
}
.rejestr-grupa:last-child{border-bottom:2px solid var(--green)}
@media(min-width:768px){.rejestr-grupa{padding:48px 0}}
@media(min-width:1024px){
  .rejestr-grupa{grid-template-columns:4fr 8fr;column-gap:64px;align-items:start;padding:56px 0}
}

/* Etykieta grupy. Kolejność eyebrow → sig → h3 jest tą samą kolejnością co
   w .section-head — eyebrow niesie tu LICZNIK pozycji („Dwie sprawy"), bo
   w rejestrze tally jest informacją, nie ozdobą.
   Nagłówek grupy to h3 (31px), nie h2: h2 (do 39px) należy do sekcji strony
   („Prowadzisz firmę?", „Wspólne podejście") i grupa ma stać szczebel niżej.
   Domyślna skala h3/h4 trafia tu dokładnie tam, gdzie trzeba — stąd w tym
   komponencie ZERO nadpisań font-size. */
@media(min-width:1024px){
  .rejestr-lbl{position:sticky;top:calc(var(--header-h) + 40px)}
}
.rejestr-lbl .sig{margin-bottom:16px}

.rejestr-lista{display:flex;flex-direction:column}
.sprawa{
  display:grid;grid-template-columns:1fr;
  padding:32px 0;border-top:1px solid var(--hairline);
}
.sprawa:first-child{border-top:0;padding-top:0}
.sprawa:last-child{padding-bottom:0}
@media(min-width:768px){
  .sprawa{grid-template-columns:56px 1fr;column-gap:24px}
}
/* Licznik w szeryfie brass. Na telefonie jest osobnym wierszem nad tytułem;
   od 768 dostaje własną kolumnę. padding-top:4px to optyczne wyrównanie:
   liczba stoi na 20px/1.3 (26px), a h4 obok na 25px/1.4 (35px) — bez nudge'u
   cyfra wisiałaby nad linią tytułu. Nie usuwać przy zmianie rozmiarów. */
.sprawa-nr{
  display:block;margin-bottom:8px;
  font-family:var(--serif);font-size:var(--fs-lead);line-height:1.3;color:var(--brass);
}
@media(min-width:768px){.sprawa-nr{margin-bottom:0;padding-top:4px}}
.sprawa h4{margin-bottom:12px}
.sprawa p{max-width:none;color:var(--steel)}

/* ═══════════════════════════════════════════════════════════
   PAS „PROWADZISZ FIRMĘ?" — .firma                 ← NOWY (copy §5)
   Jedyna sekcja strony, która NIE mówi o sprawach prowadzonych w Kościanie,
   tylko odsyła do spółki w Poznaniu. Dostaje ciemne tło, bo jest zmianą
   adresata (firma, nie osoba prywatna) — a nie kolejnym argumentem.

   ─── DRUGI KONSUMENT (2026-08-12): podmioty-gospodarcze.html §4 ───
   Ten sam pas niesie tam „most do Poznania": ta sama forma (7fr/5fr, tekst
   + lockup MRB), odwrócona teza — tu „idź do Poznania", tam „mam Poznań
   przy sobie". Nazwa klocka zostaje trafna na obu stronach, więc w
   przeciwieństwie do .podzial → .filar nie było czego przemianowywać.
   Z drugim konsumentem przyszła JEDNA reguła: .firma-pull (niżej).

   Nie .mrb-pas (jasny pas ze strony głównej): jego `p` ma na sztywno steel,
   który na zieleni nie czyta się wcale — wariant kosztowałby tyle co własna
   reguła. Nie .filar (2×2 aspektów — tu jest jeden akapit i lockup).
   Lockup .bigmark--sm .bigmark--neg wraca WPROST ze stopki: to jego
   zarezerwowane zastosowanie i jedyne miejsce z barwami cudzego znaku.

   NAGŁÓWEK I AKAPIT STOJĄ POZA .section-head — na .section-dark `.section-head p`
   (0,2,0, definiowane NIŻEJ) bije `.section-dark p` (0,2,0) i akapit dostaje
   steel. Ta sama pułapka co przy .rozw-split i .filar-lead.
   ═══════════════════════════════════════════════════════════ */
.firma{display:grid;grid-template-columns:1fr;gap:40px;align-items:start}
@media(min-width:1024px){.firma{grid-template-columns:7fr 5fr;column-gap:64px}}
.firma-txt > p{margin-top:16px}
.firma-txt > p + p{margin-top:20px}
/* brass ma na zieleni 2.3:1 — link poboczny musi wejść w brass-bright,
   dokładnie jak w .hero-m i .foot-mrb (CLAUDE.md: „na ciemnym tle .link-x…") */
.firma-txt .link-x{margin-top:32px;color:var(--brass-bright)}
.firma-txt .link-x:hover{color:var(--brass-light)}
/* PUENTA PASA — .firma-pull            (2026-08-12, podmioty-gospodarcze §4)
   Copy tej strony kończy pas jednym zdaniem w cudzysłowie („Nie usłyszysz ode
   mnie…"). Typografia jest CYTATEM z .ctaband p — szeryf na szczeblu h4 (25px),
   biel na zieleni — bo w tym systemie ta para znaczy „wtrącenie autora", a nie
   nagłówek. Drugiego sposobu na to nie zakładamy.
   SPECYFICZNOŚĆ: musi być `.firma-txt > .firma-pull` (0,2,0), bo samo
   `.firma-pull` (0,1,0) przegrałoby z `.firma-txt > p + p` (0,1,2) na
   margin-top, a z `.section-dark p` (0,2,0) — na kolorze wygrywa dopiero
   kolejnością (ten blok stoi niżej w pliku).
   Bez `max-width`: zdanie jest krótkie, a kolumna 7fr sama trzyma miarę. */
.firma-txt > .firma-pull{
  margin-top:32px;
  font-family:var(--serif);font-size:var(--fs-h4);line-height:1.35;
  color:var(--white);
}
/* Kolumna MRB: lockup + nazwa + adres. Typografia 1:1 z .foot-mrb — ten sam
   znak w tym samym rejestrze, żeby nie powstał drugi sposób pisania „MRB". */
.firma-mrb .bigmark{margin-bottom:24px}
.firma-nazwa{
  display:block;font-family:var(--serif);font-size:var(--fs-lead);
  line-height:1.3;color:var(--white);
}
.firma-mrb p{max-width:none;font-size:var(--fs-small);color:var(--on-dark-muted);margin-top:8px}

/* ═══════════════════════════════════════════════════════════
   WSPÓLNE PODEJŚCIE — domknięcie (copy §6)
   Sekcja-oświadczenie: sama wyśrodkowana główka, bez treści pod spodem.
   .section-head niesie margin-bottom 48/56 pod akapit, którego tu nie ma —
   zerujemy go, żeby sekcja nie miała 56px martwego pola u dołu.
   To JEDYNA reguła tej sekcji; reszta to .section-head.center + .sig-center.
   ═══════════════════════════════════════════════════════════ */
.podejscie .section-head{margin-bottom:0}


/* ═══════════════════════════════════════════════════════════════════════
   ═══  PODSTRONA: PODMIOTY GOSPODARCZE  (podmioty-gospodarcze.html)  ═══
   Ten baner jest prawie pusty i to jest jego treść: strona powstała w 100%
   z REKOMBINACJI istniejących klocków i dołożyła do systemu DOKŁADNIE JEDNĄ
   regułę — `.firma-pull`, która mieszka przy swoim komponencie (blok
   „PAS PROWADZISZ FIRMĘ?" wyżej), a nie tutaj.

   Mapa sekcja → klocek:
     §1 hero              → .hero-sub
     §2 z czym dzwoni     → .quad / .quad-cell ×6   (jak §2 „Spraw karnych")
     §3 dwa tryby         → .swiaty + .swiaty-koniec (drugi konsument, z o-mnie)
     §4 most do Poznania  → .firma na .section-dark  (drugi konsument) + .firma-pull
     §5 po telefonie      → .przebieg / .krok ×3
     §6 cicha lista       → .tresc
     §7 kontakt           → .contact + .contact-note + .contact-grid

   Rytm tła: hero(green-deep) → sytuacje(surface) → tryby(paper) →
   Poznań(green-deep) → przebieg(surface) → zakres(paper) → kontakt(surface)
   → stopka(green). Budżet DWÓCH pasów green-deep nienaruszony.

   NIE MA TU .mrb-pas, mimo że jest na czterech innych podstronach: metrykę
   MRB niesie na tej stronie ciemny pas §4, który jest jej OSIĄ. Drugi lockup
   dwie sekcje wyżej byłby powtórzeniem — ten sam powód, dla którego pasa nie
   ma pozostale-sprawy.html (ma własny ciemny .firma).

   NIE MA TU .ctaband: pasek wymaga guzika, a copy nie daje w połowie strony
   żadnego wezwania. Rolę „zaczepki po drodze" pełni puenta .firma-pull w §4.
   ═══════════════════════════════════════════════════════════════════════ */


/* ═══════════════════════════════════════════════════════════
   PAS INFORMACJI O PRYWATNOŚCI              (2026-08-14, polecenie Mikołaja)
   Markup: footer.php · logika: assets/site.js · treść: klucz global w CMS Kit

   NOWY KOMPONENT — pierwszy dołożony do systemu po migracji na WordPressa.
   Zbudowany wyłącznie z tego, co system już ma: pas na --green-deep jak hero
   i stopka, tekst --on-dark, włosowa kreska --on-dark-line jak w nagłówku
   i stopce, akcent --brass-bright (brass ma na zieleni 2.3:1 i ginie), CTA
   w istniejącym kształcie .btn-pill--ghost. Zero nowych tokenów, zero cieni,
   zero gradientów.

   ⚠️ NAZWA: „pas prywatności", nie „cookie". To nie jest pomyłka ani
   ostrożność — serwis NIE stosuje ciasteczek analitycznych ani reklamowych
   i polityka mówi to wprost. Komponent o nazwie .cookie-* przeczyłby własnej
   treści przy pierwszym czytaniu kodu.

   Sufiks „-pas" jest z systemu (.mrb-pas): znaczy poziomy blok na pełną
   szerokość, niosący jeden komunikat.

   .btn-pill NA <button>: sprawdzone — reguła bazowa ustawia własny
   font-family, border, background i cursor, więc nie zostaje nic, co
   przeglądarka mogłaby narzucić z domyślnych stylów kontrolki. Kształt CTA
   w systemie jest JEDEN i tu też nie ma wyjątku.
   ═══════════════════════════════════════════════════════════ */
.pas-prywatnosc{
  position:fixed;left:0;right:0;bottom:0;z-index:70;
  background:var(--green-deep);border-top:1px solid var(--on-dark-line);
  padding:20px 0;
  /* Wjazd od dołu. `hidden` zdejmuje site.js dopiero po sprawdzeniu, czy gość
     już potwierdził — stąd pas nie mignie wracającym. Klasa .in wchodzi
     w następnej klatce, żeby przeglądarka miała od czego animować. */
  transform:translateY(100%);transition:transform .28s ease;
}
.pas-prywatnosc.in{transform:none}
/* Jawnie, mimo że [hidden] i tak daje display:none — pas jest position:fixed
   i gdyby ktoś kiedyś dopisał mu `display`, zniknięcie przestałoby działać. */
.pas-prywatnosc[hidden]{display:none}

.pas-prywatnosc .container{display:flex;flex-direction:column;align-items:flex-start;gap:20px}
@media(min-width:768px){
  .pas-prywatnosc .container{flex-direction:row;align-items:center;justify-content:space-between;gap:32px}
}
.pas-prywatnosc p{font-size:var(--fs-small);color:var(--on-dark);max-width:var(--measure)}
.pas-prywatnosc .link-x{color:var(--brass-bright);white-space:nowrap}
.pas-prywatnosc .link-x:hover{color:var(--brass-light)}
/* flex:0 0 auto — bez tego pigułka ściska się przy długim tekście i łamie
   etykietę na dwie linie (ta sama pułapka co przy .autor-cta). */
.pas-prywatnosc .btn-pill{flex:0 0 auto}

/* TRYB EDYCJI CMK — pas schodzi, bo pasek edytora stoi w tym samym miejscu
   (dół ekranu) i zasłaniałyby się nawzajem. Ta sama zasada co przy nakładce
   klikalnej karty .quad-cell. */
body.cmk-editing .pas-prywatnosc{display:none}


/* ——— .skierowanie — wariant na CZTERY pozycje (2026-08-14) ———————————
   Baza ma od 768 sztywne `repeat(3,1fr)`, więc czwarta pozycja spadała do
   drugiego rzędu z wiszącą kreską po lewej i bez kreski nad sobą. Modyfikator
   układa ją 2×2 na tablecie i 4×1 od 1024.

   Dwaj konsumenci: `404.php` (rozdzielnik „dokąd dalej") oraz rozdzielnik
   na `pozostale-sprawy`, gdzie czwarta pozycja domyka rozjazd opisany
   w CLAUDE.md — menu ma cztery specjalizacje, a rozdzielnik wymieniał trzy.

   Kreski liczone przez :nth-child, nie przez :first-child — przy dwóch
   kolumnach rząd zaczyna co DRUGA pozycja, a nie tylko pierwsza w całości.
   Specyficzność równa regułom bazowym (0,3,0), więc wygrywa kolejnością:
   tego bloku nie przesuwać nad blok bazowy `.skierowanie`. */
@media(min-width:768px) and (max-width:1023px){
  .skierowanie--4{grid-template-columns:repeat(2,1fr)}
  .skierowanie--4 .link-x:nth-child(odd){border-left:0;padding-left:0}
  .skierowanie--4 .link-x:nth-child(even){padding-right:0}
  .skierowanie--4 .link-x:nth-child(n+3){border-top:1px solid var(--hairline)}
}
@media(min-width:1024px){
  .skierowanie--4{grid-template-columns:repeat(4,1fr)}
}


/* ——— KOLUMNA NAWIGACJI W STOPCE (2026-08-14, warstwa SEO) ——————————————
   Stopka niosła dotąd tylko markę i lockup MRB, w wariancie `.foot-grid--2`
   — bo powstała dla JEDNOSTRONICOWCA, gdzie całą nawigację miał sticky header.
   Przy jedenastu widokach to już nieprawda: trzy podstrony sprzedażowe nie
   miały w treści ANI JEDNEGO linku wewnętrznego, więc czytelnik i robot
   trafiali tam w ślepy zaułek.

   Zero nowej siatki: bazowa `.foot-grid` ma od 768 `1.4fr 1fr 1fr`, czyli
   trzy kolumny — wystarczyło zdjąć z markupu modyfikator `--2`, który
   spłaszczał ją do dwóch. Kolejność kolumn: marka (szersza) → nawigacja → MRB.

   Nagłówek kolumny dzieli regułę z `.foot-mrb h5` (patrz wyżej).
   Kolory linków 1:1 z `.foot-2 .foot-contact a`: `--on-dark` gubi się mniej
   niż brass, który na zieleni ma 2.3:1.

   Lista bierze `list-style:none` jawnie — reset punktorów w tym arkuszu jest
   zakresowy (`.tresc ul`), więc goły `<ul>` pokazałby kropki. */
.foot-nav ul{list-style:none;display:flex;flex-direction:column;gap:12px}
.foot-nav a{font-size:var(--fs-small);color:var(--on-dark)}
.foot-nav a:hover{color:var(--brass-bright)}
/* Bieżąca pozycja — ten sam znak co w nagłówku (`aria-current` + brass). */
.foot-nav a[aria-current="page"]{color:var(--brass-bright)}