/* =============================================================
   TOKENS — Jacuńska · Kosik-Kalbarczyk (Kancelarie Radców Prawnych, Wrocław)
   Design system v1: nawiązuje do sprawnakancelaria.com, nie kopiuje.
   Oś palety: BIEL + kość słoniowa + GRANAT #1F4E79, z MOSIĄDZEM #C9A55C jako
   drugim kolorem na ciemnym tle (paleta „mosiądz", wybrana 2026-08-21).
   Wcześniejsza czerwień #E04B4B — jedyny element tożsamości przeniesiony
   z kancelarieradcow.pl — została odrzucona przez klientki wraz z bordo #3D1414,
   które jej towarzyszyło. Kopia serwisu na tamtej palecie leży w katalogu stara/.
   2026-08-18 (decyzja Mikołaja): dominującym tłem strony jest BIEL; kość
   słoniowa #F2EFE7 jest tłem sekcji naprzemiennych (.section--deep).
   Typografia: Hanken Grotesk (humanistyczny grotesk, zamiast Urbanist)
   Charakter: profesjonalnie, ale przystępnie — miękkie promienie 10px
   (nie pigułki), statyczna kreska z kropką-interpunktem (nie scroll-grow),
   edytorskie liczby (nie ringi), stopka w głębokim granacie.
   ŹRÓDŁO PRAWDY DLA BUILDU — podstrony stylują się tym plikiem.
   ============================================================= */
:root {
  /* — Kolory: papier — */
  --c-white:        #FFFFFF;                 /* TŁO GŁÓWNE strony + karty */
  --c-cream:        #F2EFE7;                 /* kość słoniowa: sekcje naprzemienne (--deep), hero, page-header */
  --c-cream-deep:   #E7E1D4;                 /* tekstury: hatch portretów, głębsze podkłady */
  --c-band:         #C9A55C;                 /* MOSIĄDZ — drugi kolor palety, patrz blok niżej */
  --c-ink:          #23262C;                 /* grafit z chłodną nutą — nagłówki, tekst (15.16:1 na bieli) */
  --c-ink-soft:     #5E6068;                 /* leady, podpisy, metadane (6.27 biel · 5.46 kość) */
  --c-ink-soft-band:#3C3E43;                 /* wariant muted NA MOSIĄDZU — 4.60:1
                                                (bazowy ink-soft ma tam tylko 2.69 — grubo poniżej AA) */

  /* — Kolory: akcent GRANAT —
     #1F4E79 zastąpił czerwień #E04B4B (odrzuconą przez klientki 2026-08-21).
     Granat jest CIEMNY, co odwraca dwie reguły obowiązujące przy czerwieni:

     · --c-accent      WYPEŁNIENIA, OBRYSY, grafiki (przyciski, kropki, kreski,
                       ikony, ringi). Na kości słoniowej 7.54:1, na bieli 8.66:1 —
                       próg grafiki 3.0 z dużym zapasem.
     · --c-accent-text TEKST na jasnych tłach (linki, kickery, wyróżnienia).
                       To TEN SAM granat: czerwień musiała mieć osobny, ciemniejszy
                       odcień tekstowy (3.53:1 nie wystarczało), granat nie musi.
     · --c-on-accent   etykieta NA granacie. Tu kość słoniowa (7.21:1), NIE ciemna —
                       przy czerwieni było odwrotnie. Dlatego hover CIEMNIEJE:
                       rozjaśnianie zbliżałoby tło do jasnej etykiety. */
  --c-accent:       #1F4E79;                 /* akcent bazowy */
  --c-accent-hover: #163A5C;                 /* hover/active — CIEMNIEJ (9.75:1 z etykietą) */
  --c-accent-deep:  #142B42;                 /* stopka, ciemne sekcje, .btn--deep — granat atramentowy */
  --c-accent-text:  #1F4E79;                 /* biel 8.66:1 · kość 7.54:1 · tint 7.04:1 */
  --c-accent-tint:  #DEE9F4;                 /* podkład ikon, chipów, marker w nagłówkach */
  --c-on-accent:    #EFEADD;                 /* etykieta na granacie — kość słoniowa (7.21:1) */
  --c-on-dark:      #EFEADD;                 /* tekst na accent-deep (12.02:1) */
  --c-on-dark-soft: rgba(239, 234, 221, 0.72);

  /* — MOSIĄDZ (--c-band) —
     Drugi kolor palety, nie drugi przycisk. Żyje WYŁĄCZNIE na ciemnym tle
     (.section--dark .accent, etykiety w stopce, stan bieżący w menu mobilnym)
     i jako cienka kreska: na granacie ma 6.20:1, ale na bieli tylko 2.33:1,
     więc jako tekst na jasnym jest NIEDOPUSZCZALNY. Nigdy jako wypełnienie
     przycisku i nigdy dwa razy w jednej sekcji — użyty za często przestaje
     czytać się jak mosiądz, a zaczyna jak złoto z reklamy. */

  /* — Linie — */
  --c-line:         rgba(35, 38, 44, 0.15);  /* hairlines dekoracyjne na jasnym */
  --c-line-dark:    rgba(239, 234, 221, 0.2);/* hairlines dekoracyjne na ciemnym */
  --c-line-field-dark: rgba(239, 234, 221, 0.5); /* granica kontrolki na ciemnym (4.16:1) */
  --c-line-field:   rgba(35, 38, 44, 0.55);  /* granica POLA formularza — jedyna oznaka
                                                kontrolki, więc musi trzymać 3:1 (WCAG 1.4.11):
                                                3.72 biel · 3.53 kość · 3.24 mosiądz.
                                                Hairline .15 dałby tam tylko 1.34:1. */

  /* — Typografia — */
  --font: 'Hanken Grotesk', system-ui, -apple-system, 'Segoe UI', sans-serif;
  /* wagi: 400 tekst (+italic cytaty przepisów/łacina) · 500 lead, nawigacja ·
     600 przyciski, etykiety, strong · 700 h3/h4, eyebrow · 800 h1/h2, logotyp, liczby */

  /* — Layout — */
  --container:   1200px;
  --header-h:    76px;
  /* odległość od krawędzi treści (.container) do krawędzi ekranu — bleed pasów
     i grafik poza siatkę; --real-vw = clientWidth (bez paska przewijania), ustawia JS */
  --edge: calc(max((var(--real-vw, 100vw) - var(--container)) / 2, 0px) + clamp(20px, 4vw, 48px));

  /* — Promienie: miękko, nie pigułkowo (pigułek NIE używamy — także w tagach) — */
  --radius-sm:   8px;    /* chipy, tagi, inputy, badge */
  --radius:      10px;   /* przyciski */
  --radius-lg:   14px;   /* karty, panele */
  --radius-round: 50%;   /* ikony w kołach, portrety, kropki */

  /* — Cienie (atramentowe) — */
  --shadow-sm:    0 6px 24px rgba(35, 38, 44, 0.06);
  --shadow-md:    0 14px 40px rgba(35, 38, 44, 0.1);
  --shadow-panel: 0 20px 44px rgba(35, 38, 44, 0.14);

  /* — Ruch — */
  --ease-out:    cubic-bezier(0.23, 1, 0.32, 1);    /* wejścia, hover, strzałki */
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);   /* zasłony i panele (menu mobilne) */
  /* czasy: hover 160–250ms · reveal 650–750ms */
}

/* =============================================================
   BAZA (warstwa, na której stoją wszystkie wzorce)
   ============================================================= */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font);
  font-size: 1.0625rem;               /* 17px */
  line-height: 1.65;
  color: var(--c-ink);
  background: var(--c-white);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img { max-width: 100%; display: block; }
h1, h2, h3, h4 { margin: 0 0 0.5em; }
h1 { font-size: clamp(2.6rem, 5.2vw, 4.25rem); font-weight: 800; line-height: 1.06; letter-spacing: -0.028em; }
h2 { font-size: clamp(1.95rem, 3.5vw, 2.9rem); font-weight: 800; line-height: 1.12; letter-spacing: -0.022em; }
h3 { font-size: clamp(1.45rem, 2.3vw, 1.85rem); font-weight: 700; line-height: 1.22; letter-spacing: -0.014em; }
h4 { font-size: clamp(1.15rem, 1.7vw, 1.35rem); font-weight: 700; line-height: 1.3; letter-spacing: -0.008em; }
p { margin: 0 0 1em; }
ul { margin: 0; padding: 0; list-style: none; }
a { color: inherit; }
.lead { font-size: clamp(1.15rem, 1.8vw, 1.3rem); font-weight: 500; line-height: 1.55; letter-spacing: -0.004em; color: var(--c-ink-soft); }
.muted { color: var(--c-ink-soft); }
::selection { background: var(--c-accent); color: var(--c-on-accent); }
:focus-visible { outline: 2px solid var(--c-accent); outline-offset: 3px; border-radius: 2px; }

.container {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 clamp(20px, 4vw, 48px);
  position: relative;
  z-index: 1;
}

/* kotwice z menu — sticky nagłówek nie może zasłonić początku sekcji */
[id] { scroll-margin-top: calc(var(--header-h) + 24px); }

/* skip link — pierwszy element w <body>, cel: <main id="tresc" tabindex="-1"> */
.skip-link {
  position: absolute; top: -60px; left: 16px; z-index: 200;
  background: var(--c-accent-deep); color: var(--c-on-dark);
  padding: 12px 20px; text-decoration: none;
  border-radius: 0 0 var(--radius-sm) var(--radius-sm);
  transition: top 200ms var(--ease-out);
}
.skip-link:focus { top: 0; }
[tabindex="-1"]:focus { outline: none; }   /* focus programowy nie rysuje ramki */

/* mikro-etykieta — JEDEN wzorzec dla wszystkich drobnych podpisów w wersalikach
   (nadtytuły w hero, dt w danych kontaktowych, nagłówki kolumn stopki) */
.micro-label {
  font-size: 0.72rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.16em;
  color: var(--c-ink-soft);
}

/* — Rytm sekcji + color-blocking (krem → krem głębszy → pas) — */
.section { padding: clamp(72px, 9vw, 130px) 0; overflow: hidden; position: relative; }
.section--deep { background: var(--c-cream); }
.section--band {
  /* pas z delikatnym ukośnym hatchem (ciepła tekstura płótna) */
  background:
    repeating-linear-gradient(-48deg, rgba(35, 38, 44, 0.03) 0 1px, transparent 1px 9px),
    var(--c-band);
  border-top: 1px solid var(--c-line);
  border-bottom: 1px solid var(--c-line);
}
/* PAS wymaga korekty dwóch rzeczy — obie załatwiamy podmianą w kontekście,
   bez listy wyjątków, żeby nie dało się o czymś zapomnieć przy nowym komponencie:
   1) --c-ink-soft ma na pasie tylko 4.13:1. Podmieniamy TOKEN, więc każdy element,
      który po nim dziedziczy (lead, opisy usług, kroki, zespół, FAQ, breadcrumbs,
      podpisy statystyk, legenda formularza), automatycznie trzyma 5.04:1.
   2) Granat ma na mosiądzu 3.72:1, więc próg 3:1 dla wskaźnika focusu i granicy
      pola przechodzi bez wyjątku. Podmiana na --c-accent-text zostaje mimo to:
      przy obecnej palecie oba tokeny to ten sam kolor, więc jest nieoperacyjna,
      ale gdyby akcent kiedyś się rozjaśnił, wyjątek zadziała bez szukania. */
.section--band { --c-ink-soft: var(--c-ink-soft-band); }
.section--band :focus-visible { outline-color: var(--c-accent-text); }
.section--band .field input:focus,
.section--band .field textarea:focus { border-bottom-color: var(--c-accent-text); }
.section--band .consent input { accent-color: var(--c-accent-text); }
.section--dark { background: var(--c-accent-deep); color: var(--c-on-dark); }
/* ta sama sztuczka co na pasie: podmieniamy token, żeby lead/muted/opisy
   nie zostały ciemnym atramentem na ciemnym tle (kość 72% daje 6.98:1) */
.section--dark { --c-ink-soft: var(--c-on-dark-soft); }
.section--tight { padding: clamp(56px, 7vw, 96px) 0; }   /* pas węższy niż sekcja bazowa */

/* Siatki kompozycyjne — powtarzają się na każdej podstronie */
.split { display: grid; grid-template-columns: 5fr 6fr; gap: clamp(40px, 6vw, 96px); align-items: start; }
.head-center { max-width: 620px; margin: 0 auto clamp(36px, 4.5vw, 60px); text-align: center; }
.head-center .eyebrow { justify-content: center; }
@media (max-width: 900px) { .split { grid-template-columns: 1fr; } }

/* Rząd, który świadomie łamie ramę 1200px (technika --real-vw ze Sprawnej) */
.bleed-row {
  --row-w: min(1560px, var(--real-vw, 100vw) - clamp(32px, 7vw, 96px));
  width: var(--row-w); margin-left: calc(50% - var(--row-w) / 2);
}

/* =============================================================
   WZORCE SYGNATUROWE
   ============================================================= */

/* — Nagłówek sekcji: numer + statyczna kreska z kropką-interpunktem —
   (świadomie BEZ scroll-grow Sprawnej: znak marki „·” pracuje w mikroskali) */
.eyebrow {
  display: flex; align-items: center; gap: 14px;
  font-size: 0.82rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.16em;
  color: var(--c-ink-soft); margin: 0 0 1.6em;
}
.eyebrow .num { font-weight: 800; color: var(--c-accent-text); }
.eyebrow-line {
  position: relative; display: inline-block;
  width: 40px; height: 1.5px; background: var(--c-line);
  margin-right: 8px;   /* miejsce na kropkę */
}
.eyebrow-line::after {
  content: ""; position: absolute; top: 50%; right: -8px;
  width: 5px; height: 5px; border-radius: var(--radius-round);
  background: var(--c-accent); transform: translateY(-50%);
}
/* akcent w H2: kolor + spokojne podkreślenie markerem (zamiast odręcznej elipsy) */
.accent { color: var(--c-accent-text); }
.accent--marker {
  background: linear-gradient(transparent 62%, var(--c-accent-tint) 62%, var(--c-accent-tint) 94%, transparent 94%);
}
.section--dark .accent { color: var(--c-band); }

/* — Przyciski: miękki prostokąt 10px (NIE pigułka), strzałka odjeżdża na hover — */
.btn {
  display: inline-flex; align-items: center; gap: 12px;
  padding: 16px 30px; border: 0; cursor: pointer;
  border-radius: var(--radius);
  font-family: var(--font); font-size: 0.84rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.1em;
  text-decoration: none;
  transition: background-color 200ms ease, color 200ms ease, transform 160ms var(--ease-out);
}
.btn--primary { background: var(--c-accent); color: var(--c-on-accent); }
/* na pasie samo wypełnienie nie wyznacza granicy przycisku (2.71:1 wobec tła),
   więc w tym kontekście dokładamy obrys — WCAG 1.4.11 dotyczy też kontrolek */
.section--band .btn--primary { box-shadow: inset 0 0 0 1.5px var(--c-accent-text); }
.btn--ghost { background: transparent; color: var(--c-ink); box-shadow: inset 0 0 0 1.5px var(--c-ink); }
.btn--on-dark { background: var(--c-on-dark); color: var(--c-accent-deep); }
.btn:active { transform: scale(0.97); }
.link-more {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: 0.82rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.12em;
  color: var(--c-accent-text); text-decoration: none;
}
.link-more .arrow { width: 16px; height: 16px; }
/* Link w treści: podkreślenie jest STAŁE, nie hoverowe. Sam kolor nie wystarczy —
   granat #1F4E79 kontra tekst #23262C to 1.75:1, a WCAG 1.4.1 wymaga 3:1 albo
   nośnika niekolorystycznego. Hover jedynie wzmacnia kreskę do pełnego granatu. */
.text-link {
  color: var(--c-accent-text); text-decoration: none;
  border-bottom: 1.5px solid rgba(31, 78, 121, 0.7);
  transition: border-color 200ms ease;
}
.arrow { width: 17px; height: 17px; flex-shrink: 0; transition: transform 200ms var(--ease-out); }
.cta-row { display: flex; flex-wrap: wrap; gap: 16px 28px; align-items: center; }

/* — Header: sticky na kremie, hairline po przewinięciu, podkreślenie od lewej — */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: var(--c-cream);
  border-bottom: 1px solid transparent;
  transition: border-color 250ms ease, box-shadow 250ms ease;
}
.site-header.is-scrolled { border-bottom-color: var(--c-line); box-shadow: var(--shadow-sm); }
.header-inner { display: flex; align-items: center; justify-content: space-between; gap: 32px; height: var(--header-h); }
.main-nav ul { display: flex; gap: clamp(16px, 2.2vw, 32px); }
.main-nav a {
  font-size: 0.82rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.1em;
  color: var(--c-ink); text-decoration: none; padding: 6px 2px; position: relative;
}
.main-nav a::after {
  content: ""; position: absolute; left: 0; right: 100%; bottom: 0; height: 2px;
  background: var(--c-accent); transition: right 250ms var(--ease-out);
}
/* Stan aktywny NIE jest oznaczony samym kolorem (#1F4E79 kontra #23262C to 1.75:1):
   pozycja bieżąca ma na stałe zapaloną granatową kreskę — tę samą, którą inne
   pozycje pokazują dopiero na hover. */
.main-nav a[aria-current="page"] { color: var(--c-accent-text); }
.main-nav a[aria-current="page"]::after { right: 0; }

/* — Menu mobilne: pełnoekranowa zasłona w accent-deep („domknięcie w granacie”) — */
/* UWAGA: display:flex nadpisuje atrybut [hidden] z arkusza przeglądarki, więc
   zamknięte menu byłoby wciąż w drzewie dostępności i rozpychało dokument.
   Reguła [hidden] poniżej jest OBOWIĄZKOWA, nie kosmetyczna. */
.mobile-menu[hidden] { display: none; }
.mobile-menu {
  position: fixed; inset: 0; z-index: 90; overflow-y: auto;
  background: var(--c-accent-deep); color: var(--c-on-dark);
  display: flex; flex-direction: column;
  padding: 24px clamp(20px, 6vw, 32px) 28px;
  transform: translateX(100%);
  transition: transform 320ms var(--ease-in-out);
}
.mobile-menu.is-open { transform: translateX(0); }
body.menu-open { overflow: hidden; }
/* menu MUSI być modalem: role="dialog" aria-modal="true", tło z inert,
   focus uwięziony w panelu, Esc zamyka — patrz skrypt w makiecie */
.hamburger {
  display: none; width: 44px; height: 44px;
  align-items: center; justify-content: center;
  background: transparent; border: 1.5px solid var(--c-line-field);
  border-radius: var(--radius-sm); color: var(--c-ink); cursor: pointer;
}
.hamburger svg { width: 20px; height: 20px; }
.mobile-menu .mm-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 28px; }
.mm-close {
  width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center;
  background: transparent; border: 1.5px solid var(--c-line-field-dark); border-radius: var(--radius-sm);
  color: inherit; cursor: pointer;
}
.mm-close svg { width: 18px; height: 18px; }
.mobile-menu nav a {
  display: block; padding: 15px 0;
  font-size: 1.45rem; font-weight: 700; letter-spacing: -0.01em;
  color: inherit; text-decoration: none;
  border-bottom: 1px solid var(--c-line-dark);
}
/* Na ciemnym różnica koloru jest za słaba (mosiądz #C9A55C kontra kość #EFEADD
   to 1.94:1), więc stan bieżący niesie też kropka-interpunkt i grubsza waga. */
.mobile-menu nav a[aria-current="page"] { color: var(--c-band); font-weight: 800; }
.mobile-menu nav a[aria-current="page"]::before { content: "·"; margin-right: 0.4em; }
.mobile-menu .mm-cta { margin-top: auto; padding-top: 28px; }

/* — Logotyp: monogram JKK (img/logo-jkk.png) —
   Plik jest CZARNO-BIAŁĄ MASKĄ: liczy się wyłącznie jego kanał alfa, a kolor
   daje `currentColor`. Dzięki temu jeden plik obsługuje biel headera (atrament)
   i granat stopki (kość słoniowa), bez drugiej wersji graficznej i bez filtrów.
   Podmiana logo = podmiana pliku o tej samej proporcji (1.875:1); inna proporcja
   wymaga poprawki `width` niżej, bo maska jest wpisana w prostokąt elementu.
   Logotypy są zwolnione z WCAG 1.4.3, ale oba warianty i tak trzymają kontrast. */
.brand-logo {
  --logo-h: clamp(30px, 3.2vw, 36px);
  display: inline-block; text-decoration: none; color: var(--c-ink);
  height: var(--logo-h); width: calc(var(--logo-h) * 1.875);
  background-color: currentColor;
  -webkit-mask-image: url(img/logo-jkk.png); mask-image: url(img/logo-jkk.png);
  -webkit-mask-repeat: no-repeat;           mask-repeat: no-repeat;
  -webkit-mask-position: left center;       mask-position: left center;
  -webkit-mask-size: contain;               mask-size: contain;
}
.brand-logo--on-dark { color: var(--c-on-dark); }
.brand-logo--big { --logo-h: clamp(44px, 5.2vw, 62px); }

/* — Lockup: monogram + deskryptor pod nim —
   Pod znakiem stoi SAM deskryptor. Nazwiska tu były i zostały zdjęte (decyzja
   Mikołaja 2026-08-21) — nie dopisywać ich z powrotem; nazwa kancelarii żyje
   w `aria-label` (BRAND_ALT w site.js). Kolumna, nie rząd: znak jest bardzo
   szeroki (1.875:1), więc w rzędzie zjadłby pas headera.
   `.brand` niesie kolor dla CAŁEGO lockupu (monogram bierze go przez currentColor),
   dlatego wariant na granacie ustawia się JEDNĄ klasą `.brand--on-dark`. */
.brand {
  display: inline-flex; flex-direction: column; align-items: flex-start; gap: 6px;
  text-decoration: none; color: var(--c-ink); line-height: 1.1;
}
/* `color: inherit` jest OBOWIĄZKOWE: .brand-logo ustawia własny `color: var(--c-ink)`,
   który bez tego wygrywa z dziedziczeniem i zostawia ciemny monogram na granacie. */
.brand .brand-logo { --logo-h: clamp(26px, 2.8vw, 30px); color: inherit; }
.brand-desc {
  font-size: 0.56rem; font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.2em; color: var(--c-ink-soft);
}
.brand--big { gap: 14px; }
.brand--big .brand-logo { --logo-h: clamp(40px, 5vw, 54px); }
.brand--big .brand-desc { font-size: 0.64rem; letter-spacing: 0.24em; }
.brand--on-dark { color: var(--c-on-dark); }
.brand--on-dark .brand-desc { color: var(--c-on-dark-soft); }
/* Bez wsparcia dla masek element byłby pełnym prostokątem atramentu — wtedy
   schodzimy na zwykłe tło (wariant na granacie traci kolor, ale zostaje czytelny). */
@supports not ((-webkit-mask-image: url(#m)) or (mask-image: url(#m))) {
  .brand-logo {
    background-color: transparent;
    background: url(img/logo-jkk.png) no-repeat left center / contain;
  }
}

/* — Karty usług: 2 kolumny + pionowy hairline, ikona w kole na tincie — */
.services-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(40px, 6vw, 96px); }
.services-col { position: relative; }
.services-col + .services-col::before {
  content: ""; position: absolute; left: calc(clamp(40px, 6vw, 96px) / -2);
  top: 8px; bottom: 8px; width: 1px; background: var(--c-line);
}
.service {
  display: flex; gap: 18px; padding: 22px 0;
  border-bottom: 1px solid var(--c-line); text-decoration: none; color: inherit;
}
/* poziom nagłówka (h3/h4) dobiera się do kontekstu strony — wygląd daje komponent */
.service h3, .service h4 {
  margin: 0 0 2px; font-size: clamp(1.15rem, 1.7vw, 1.35rem);
  line-height: 1.3; letter-spacing: -0.008em; transition: color 200ms ease;
}
.service p { margin: 0; font-size: 0.95rem; color: var(--c-ink-soft); }
.service-icon {
  flex-shrink: 0; width: 52px; height: 52px; display: grid; place-items: center;
  border-radius: var(--radius-round); background: var(--c-accent-tint); color: var(--c-accent-text);
  transition: background-color 200ms ease, color 200ms ease;
}
.service-icon svg { width: 22px; height: 22px; }
.tag { /* etykieta kolumny — miękki prostokąt, NIE pigułka */
  display: inline-block; padding: 6px 14px; border-radius: var(--radius-sm);
  box-shadow: inset 0 0 0 1.5px currentColor; color: var(--c-accent-text);
  font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.2em;
  margin-bottom: 16px;
}
.chip {
  display: inline-block; padding: 8px 16px; border-radius: var(--radius-sm);
  background: var(--c-accent-tint); color: var(--c-accent-text);
  font-size: 0.82rem; font-weight: 600;
}

/* — Checklist: kółko z ptaszkiem w granacie (cienka kreska musi być
   czytelna na jasnym podkładzie) — */
.check {
  flex-shrink: 0; width: 40px; height: 40px; display: grid; place-items: center;
  border-radius: var(--radius-round); color: var(--c-accent-text);
  border: 1.5px solid rgba(31, 78, 121, 0.65);
  background: rgba(31, 78, 121, 0.08);
  border-color: color-mix(in srgb, var(--c-accent), transparent 35%);
  background: color-mix(in srgb, var(--c-accent), transparent 92%);
}
.check svg { width: 20px; height: 20px; } /* stroke 2.2, polyline 5 12.5 10 17.5 19 7 */
.check-list li { display: flex; align-items: flex-start; gap: 16px; padding: 12px 0; }
.check-list h3, .check-list h4 { margin: 0 0 3px; font-size: 1.12rem; line-height: 1.3; }
.check-list p { margin: 0; font-size: 0.95rem; color: var(--c-ink-soft); }

/* — Liczby: edytorskie statystyki (świadomie NIE ringi Sprawnej) —
   wielka cyfra 800 nad hairline'em z kreską-interpunktem; tylko liczby,
   które dają się obronić (nigdy wartości < 10 w „licznikach”, nigdy symbole) */
.stats-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(28px, 4vw, 56px); }
.stat { position: relative; border-top: 1px solid var(--c-line); padding-top: 22px; }
.stat::before {
  content: ""; position: absolute; top: -1.5px; left: 0;
  width: 56px; height: 2px; background: var(--c-accent);
}
.stat::after {
  content: ""; position: absolute; top: -3px; left: 64px;
  width: 5px; height: 5px; border-radius: var(--radius-round); background: var(--c-accent);
}
.stat-value {
  margin: 0 0 6px; font-size: clamp(2.6rem, 4.2vw, 3.7rem);
  font-weight: 800; line-height: 1; letter-spacing: -0.03em;
}
.stat-caption { margin: 0; font-size: 0.95rem; color: var(--c-ink-soft); max-width: 30ch; }

/* — Karty opinii: płaskie, gwiazdki, ghostowy cudzysłów —
   wzorzec markup: <span class="stars" role="img" aria-label="5 z 5 gwiazdek">★★★★★</span>
   role="img" + aria-label są WYMAGANE, nie opcjonalne: ciąg ★★★★★ czytany przez
   czytnik ekranu znak po znaku jest bełkotem. Kontrast nie jest tu już problemem
   (granat na bieli 8.66:1), ale ocena i tak musi być dostępna jako tekst
   (u nas w podpisie „Opinia z Google · 5/5”). */
.review-card {
  position: relative; background: var(--c-white); border: 1px solid var(--c-line);
  border-radius: var(--radius-lg); padding: 28px 26px;
  display: flex; flex-direction: column; gap: 14px;
}
.review-card::after {
  content: "\201D"; position: absolute; top: 6px; right: 18px;
  font-size: 5rem; font-weight: 800; line-height: 1; color: var(--c-accent-tint);
  pointer-events: none;
}
.review-card .stars { color: var(--c-accent); letter-spacing: 2px; font-size: 0.95rem; }
.review-card blockquote { margin: 0; font-size: 0.98rem; line-height: 1.6; }
.review-card figcaption strong { display: block; }
.review-card .source { font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.14em; color: var(--c-ink-soft); }

/* — Kroki procesu: gigantyczny wyblakły numer | treść; kreska-interpunkt na hairlinie — */
.step {
  display: grid; grid-template-columns: minmax(96px, 150px) 1fr;
  gap: clamp(24px, 4vw, 64px); align-items: start;
  padding: clamp(28px, 4vw, 48px) 0; position: relative;
  border-top: 1px solid var(--c-line);
}
/* --fill (0..1) zapełnia kreskę granatem wzdłuż hairline'a, a kropka jedzie
   na jej końcu — animuje to GSAP przy scrollu (strona główna). Bez JS albo
   przy redukcji ruchu zostaje bazowa kreska 56px (var domyślnie 0). */
.step::before {
  content: ""; position: absolute; top: -1.5px; left: 0;
  width: calc(56px + (100% - 69px) * var(--fill, 0)); height: 2px; background: var(--c-accent);
}
.step::after {
  content: ""; position: absolute; top: -3px;
  left: calc(64px + (100% - 69px) * var(--fill, 0));
  width: 5px; height: 5px; border-radius: var(--radius-round); background: var(--c-accent);
}
.step-num {
  font-size: clamp(4.2rem, 8vw, 6.6rem); font-weight: 800; line-height: 0.9;
  letter-spacing: -0.03em; color: var(--c-cream-deep); transition: color 250ms ease;
}
/* ghost-numer musi być widoczny — inaczej kolumna 150px stoi pusta bez powodu.
   Beżowy odcień na kości dawał 1.10:1; granat przy 16% daje 1.29:1 — ślad, ale widoczny. */
.step-num { color: color-mix(in srgb, var(--c-accent), transparent 84%); }
.section--deep .step-num { color: color-mix(in srgb, var(--c-accent), transparent 80%); }
.step .kicker { font-size: 0.74rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.18em; color: var(--c-accent-text); margin: 0 0 6px; }
.step h3 { margin: 0 0 0.4em; }
.step p { margin: 0; color: var(--c-ink-soft); }

/* — Zespół: okrągły portret + hairline'y; granatowy ring na hover — */
.team-row { display: flex; gap: 24px; align-items: flex-start; padding: 26px 0; border-bottom: 1px solid var(--c-line); }
.team-row:last-child { border-bottom: 0; }
.portrait {
  flex-shrink: 0; width: 104px; height: 104px; border-radius: var(--radius-round);
  object-fit: cover; border: 2px solid transparent; transition: border-color 250ms ease;
  /* placeholder bez zdjęcia: hatch na kremie + inicjały */
  display: grid; place-items: center;
  font-weight: 800; font-size: 1.5rem; color: var(--c-ink-soft);
  background:
    repeating-linear-gradient(-48deg, rgba(35, 38, 44, 0.05) 0 1px, transparent 1px 8px),
    var(--c-cream-deep);
}
.team-row h3, .team-row h4 { margin: 0 0 2px; font-size: clamp(1.15rem, 1.7vw, 1.35rem); line-height: 1.3; }
.team-row .role { font-size: 0.74rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.16em; color: var(--c-accent-text); margin: 0 0 8px; }
.team-row p { margin: 0; font-size: 0.95rem; color: var(--c-ink-soft); }

/* — Formularz: pola tylko z dolną kreską, focus barwi granatem —
   wzorzec: wymagane pola mają atrybut required; gwiazdka aria-hidden="true";
   przy formularzu legenda „* pole wymagane” — */
.field { display: block; margin-bottom: 26px; }
.field .label {
  display: block; font-size: 0.74rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.16em; color: var(--c-ink); margin-bottom: 4px;
}
.field .label .req { color: var(--c-accent-text); }
.field input, .field textarea {
  width: 100%; border: 0; border-bottom: 1.5px solid var(--c-line-field);
  background: transparent; padding: 10px 2px; font-family: var(--font);
  font-size: 1rem; color: var(--c-ink);
  transition: border-color 200ms ease;
}
.field input:focus, .field textarea:focus { outline: none; border-bottom-color: var(--c-accent); }
.field textarea { resize: vertical; min-height: 96px; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; }
.consent { display: flex; gap: 12px; align-items: flex-start; font-size: 0.86rem; color: var(--c-ink-soft); margin-bottom: 26px; }
.consent input { width: 18px; height: 18px; margin-top: 3px; accent-color: var(--c-accent); }
.form-note { font-size: 0.78rem; color: var(--c-ink-soft); margin: 0 0 20px; }

/* — Podstrony: page-header, breadcrumbs, FAQ, cytat przepisu — */
.page-header { background: var(--c-cream); padding: clamp(48px, 6vw, 84px) 0 clamp(40px, 5vw, 64px); }
.page-header h1 { font-size: clamp(2.1rem, 3.8vw, 3.2rem); }
.breadcrumbs {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
  font-size: 0.78rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.12em;
  color: var(--c-ink-soft); margin: 0 0 22px;
}
.breadcrumbs a { text-decoration: none; color: inherit; transition: color 200ms ease; }
.breadcrumbs .sep { color: var(--c-accent); }   /* separator „·” — interpunkt marki */
.faq { border-bottom: 1px solid var(--c-line); }
.faq summary {
  display: flex; justify-content: space-between; align-items: center; gap: 16px;
  padding: 18px 0; cursor: pointer; list-style: none;
  font-weight: 700; font-size: 1.06rem;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+"; flex-shrink: 0;
  font-size: 1.5rem; font-weight: 500; line-height: 1; color: var(--c-accent);
  transition: transform 250ms var(--ease-out);
}
.faq[open] summary::after { transform: rotate(45deg); }
.faq .faq-body { padding: 0 0 20px; color: var(--c-ink-soft); max-width: 62ch; }
.law-quote { /* cytat przepisu — kursywa 400, lewa krawędź 2px granatu */
  margin: 1.6em 0; padding: 4px 0 4px 22px;
  border-left: 2px solid var(--c-accent);
  font-style: italic; font-size: 1.02rem; color: var(--c-ink-soft);
}
.law-quote .src {
  display: block; margin-top: 8px; font-style: normal;
  font-size: 0.78rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.14em; color: var(--c-accent-text);
}

/* — Wielkie słowo w tle (watermark) — granatowy (--c-accent-text), ~7%, oszczędnie — */
.watermark {
  position: absolute; z-index: 0;
  font-size: clamp(90px, 17vw, 230px); font-weight: 800;
  letter-spacing: -0.03em; line-height: 1;
  color: rgba(31, 78, 121, 0.07);
  user-select: none; pointer-events: none; white-space: nowrap;
  top: clamp(24px, 4vw, 64px); right: -1%;
  transform: translate3d(0, var(--py, 0px), 0); will-change: transform;
}
.watermark--low { top: auto; bottom: 22%; left: -2%; right: auto; }
.watermark--sm { font-size: clamp(70px, 11vw, 170px); top: 14px; }
/* OSZCZĘDNIE znaczy maksymalnie jeden watermark na sekcję i nie w każdej sekcji —
   przy pięciu naraz przestaje być akcentem, a zaczyna być cytatem ze Sprawnej. */

/* — Gigantyczny monogram J·K w hero — świadome nawiązanie do „S” Sprawnej,
   ale własnym glifem, wyprostowany (bez rotacji) i statyczny — */
.hero-monogram {
  position: absolute; right: -3%; top: 50%; z-index: 0;
  transform: translateY(-52%);
  font-size: clamp(300px, 38vw, 560px); font-weight: 800; line-height: 1;
  letter-spacing: -0.06em; color: rgba(31, 78, 121, 0.055);
  user-select: none; pointer-events: none;
}

/* — Stopka: głęboki granat (własny akcent — Sprawna ma białą) — */
.site-footer { background: var(--c-accent-deep); color: var(--c-on-dark); padding: clamp(32px, 5vw, 56px) 0 0; }
.site-footer a { color: inherit; }
.site-footer .muted { color: var(--c-on-dark-soft); }
.footer-nap {
  display: flex; flex-wrap: wrap; gap: 16px 48px; align-items: flex-start;
  padding-bottom: 32px; border-bottom: 1px solid var(--c-line-dark);
}
.footer-nap .col { font-size: 0.92rem; line-height: 1.6; }
.footer-nap .col strong {
  display: block; font-size: 0.72rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.16em; color: var(--c-band); margin-bottom: 6px;
}
/* podkreślenie linków w stopce mocniejsze niż hairline .2 (1.77:1) — to jedyne,
   co odróżnia link od tekstu, bo kolor jest dziedziczony */
.footer-nap a { color: inherit; text-decoration: none; border-bottom: 1px solid rgba(239, 234, 221, 0.45); }
/* pasek prawny: tło idzie pełną szerokością ekranu, ale treść musi trzymać
   siatkę — dlatego wyrównuje ją .container w środku, a nie padding paska */
.footer-bottom {
  padding: 18px 0; font-size: 0.82rem; color: var(--c-on-dark-soft);
  background: rgba(0, 0, 0, 0.22); margin-top: 24px;
}
.footer-bottom > .container {
  display: flex; flex-wrap: wrap; gap: 10px 24px;
  align-items: center; justify-content: space-between;
}
.footer-bottom a { color: inherit; text-decoration: none; border-bottom: 1px solid rgba(239, 234, 221, 0.45); }

/* — Scroll reveal — bramkowany klasą .js (ustawia ją inline'owy guard w <head>,
   zdejmuje animacje.js przy braku GSAP), żeby bez skryptu treść była widoczna.
   Stan ukryty konsumuje GSAP (animacje.js); transition wyłącza reguła
   w sekcji WZORCE WSPÓLNE niżej. Inline --reveal-delay czyta animacje.js. — */
.js [data-reveal] {
  opacity: 0; transform: translateY(26px);
  transition: opacity 650ms var(--ease-out), transform 650ms var(--ease-out);
  transition-delay: var(--reveal-delay, 0ms);
}

/* =============================================================
   HOVERY — tylko urządzenia z prawdziwym kursorem
   ============================================================= */
@media (hover: hover) and (pointer: fine) {
  .btn--primary:hover { background: var(--c-accent-hover); }
  .btn--ghost:hover { background: var(--c-ink); color: var(--c-cream); }
  .btn--on-dark:hover { background: var(--c-white); }
  .btn--deep:hover { background: color-mix(in srgb, var(--c-accent-deep), var(--c-band) 14%); }
  .main-nav .subnav a:hover { background: var(--c-cream); color: var(--c-accent-text); }
  .btn:hover .arrow, .link-more:hover .arrow { transform: translateX(5px); }
  .text-link:hover { border-bottom-color: var(--c-accent); }
  .main-nav a:hover::after { right: 0; }
  .service:hover .service-icon { background: var(--c-accent); color: var(--c-on-accent); }
  .service:hover h3, .service:hover h4 { color: var(--c-accent-text); }
  .step:hover .step-num { color: var(--c-accent-tint); }
  .team-row:hover .portrait { border-color: var(--c-accent); }
  .breadcrumbs a:hover { color: var(--c-accent-text); }
  .footer-nap a:hover { border-bottom-color: var(--c-band); }
  .btn--on-dark-ghost:hover { background: rgba(239, 234, 221, 0.12); }
  .scope-list summary:hover .s-label { color: var(--c-accent-text); }
}

/* =============================================================
   BREAKPOINTY WZORCÓW
   ============================================================= */
@media (max-width: 900px) {
  .services-grid { grid-template-columns: 1fr; }
  .services-col + .services-col::before { display: none; }
  .stats-grid { grid-template-columns: 1fr; }
}
@media (max-width: 700px) {
  .form-row { grid-template-columns: 1fr; }
  .step { grid-template-columns: 1fr; gap: 10px; }
}

/* =============================================================
   REDUKCJA RUCHU — stan końcowy bez animacji
   ============================================================= */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js [data-reveal] { transition: opacity 250ms ease; transform: none; }
  .watermark { --py: 0px; }   /* zostaje bazowy transform, znika tylko parallax */
}

/* =============================================================
   WZORCE WSPÓLNE SERWISU — awans z warstw stron (2026-08-18).
   Reguły przeniesione 1:1 z <style> makiet (razem z ich @media
   i hoverami); append na końcu pliku odtwarza dotychczasową
   kaskadę. Nav i stopkę wstrzykuje site.js (data-nav/data-footer),
   animacje obsługuje animacje.js (GSAP, konfiguracja data-*).
   ============================================================= */

/* — Utility: treść tylko dla czytników ekranu — */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* — Chrome headera: rozkład prawej strony + progi chowania nawigacji — */
.site-header .header-inner { gap: clamp(16px, 3vw, 40px); }
.nav-right { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.main-nav a { white-space: nowrap; }
/* CTA headera: „Umów konsultację" → kontakt. Poniżej 1100px, gdzie nav chowa się
   pod hamburger, tekst ustępuje ikonie kalendarza (44×44 = minimalny cel dotyku). */
.btn-cta-text { padding: 12px 20px; }   /* zamiast dawnego stylu inline */
.btn-cta-icon { display: none; width: 44px; height: 44px; padding: 0; justify-content: center; }
.btn-cta-icon svg { width: 19px; height: 19px; }
.mm-cta .btn { width: 100%; justify-content: center; }   /* zamiast stylu inline */
@media (max-width: 1100px) {
  .js .main-nav { display: none; }
  .js .btn-cta-text { display: none; }
  .js .btn-cta-icon { display: inline-flex; }
  .js .hamburger { display: inline-flex; }
}
@media (max-width: 520px) {
  :root { --header-h: 64px; }
  /* Specyficzność musi dorównać `.brand .brand-logo`, inaczej lockup zignoruje tę wartość. */
  .brand-logo, .brand .brand-logo { --logo-h: 24px; }
  .brand { gap: 5px; }
  .brand-desc { font-size: 0.5rem; letter-spacing: 0.16em; }
}
/* rezerwa pasa headera zanim site.js wstrzyknie nav (anty-CLS) */
[data-nav] { min-height: var(--header-h); }

/* — Animacje: GSAP przejmuje reveal (animacje.js) — CSS-owe przejście
   z sekcji „Scroll reveal" wyżej nie może się nakładać na easing GSAP-a.
   Gdy GSAP się nie wczyta, animacje.js zdejmuje z <html> klasę .js
   i strona wraca do wersji statycznej. — */
.js [data-reveal] { transition: none; }

/* — Pas zaufania: kolumny edytorskie z kreską-interpunktem (geometria
   jak w .stat); --fill zapełnia kreskę przy scrollu (animacje.js) — */
.trust-slim { padding: clamp(40px, 5vw, 64px) 0; }
.trust-cols { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(20px, 3vw, 44px); }
.trust-cols li {
  position: relative; border-top: 1px solid var(--c-line); padding-top: 16px;
  font-size: 0.98rem; font-weight: 600; line-height: 1.45; letter-spacing: -0.004em;
}
.trust-cols li::before {
  content: ""; position: absolute; top: -1.5px; left: 0;
  width: calc(56px + (100% - 69px) * var(--fill, 0)); height: 2px; background: var(--c-accent);
}
.trust-cols li::after {
  content: ""; position: absolute; top: -3px;
  left: calc(64px + (100% - 69px) * var(--fill, 0));
  width: 5px; height: 5px; border-radius: var(--radius-round); background: var(--c-accent);
}
@media (max-width: 900px) { .trust-cols { grid-template-columns: 1fr 1fr; gap: 28px; } }
@media (max-width: 560px) { .trust-cols { grid-template-columns: 1fr; gap: 22px; } }

/* — Karty-powody 2x2: uniesione karty z ikoną (sekcje „dlaczego") — */
.reason-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(20px, 3vw, 28px); }
.reason-card {
  background: var(--c-white); border: 1px solid var(--c-line);
  border-radius: var(--radius-lg); padding: clamp(26px, 3vw, 34px);
  box-shadow: var(--shadow-sm);
  transition: box-shadow 260ms ease, transform 260ms var(--ease-out);
}
.reason-card .service-icon { margin-bottom: 18px; }
.reason-card h3 { margin: 0 0 8px; }
.reason-card p { margin: 0; font-size: 0.95rem; color: var(--c-ink-soft); }
@media (hover: hover) and (pointer: fine) {
  .reason-card:hover { box-shadow: var(--shadow-md); transform: translateY(-3px); }
}
@media (max-width: 700px) { .reason-grid { grid-template-columns: 1fr; } }

/* — Zespół „Karty portretowe": duże portrety 4:5 z podpisem pod kadrem — */
.team-photo { border-radius: var(--radius-lg); overflow: hidden; }
.team-photo img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 500ms var(--ease-out); }
.team-role { font-size: 0.74rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.16em; color: var(--c-accent-text); margin: 0 0 12px; }
@media (hover: hover) and (pointer: fine) {
  .team-photo:hover img { transform: scale(1.04); }
}
.teamA { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 4.5vw, 56px); max-width: 960px; margin: 0 auto; }
.teamA figure { margin: 0; }
.teamA .team-photo { aspect-ratio: 4 / 5; box-shadow: var(--shadow-sm); }
.teamA figcaption { padding-top: 20px; }
.teamA h3 { margin: 0 0 2px; }
.teamA .team-role { margin-bottom: 10px; }
.teamA .bio { margin: 0; font-size: 0.95rem; color: var(--c-ink-soft); }
@media (max-width: 700px) { .teamA { grid-template-columns: 1fr; gap: 40px; } }

/* — Opinie: rząd 3 kart łamiący ramę + etykieta statusu sekcji — */
.reviews-status { margin: 0 0 28px; }
.reviews { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
@media (max-width: 900px) { .reviews { grid-template-columns: 1fr; } .bleed-row { width: auto; margin-left: 0; } }

/* — Pas CTA na ciemnym (domknięcie strony) — */
.cta-dark { text-align: center; }
.cta-dark p { max-width: 52ch; margin: 0 auto 30px; }
.cta-dark .cta-row { justify-content: center; }

/* — FAQ: kolumna edytorskiej szerokości pod head-center — */
.faq-list { max-width: 780px; margin: 0 auto; }

/* — Dane kontaktowe (dt granatowe, dd zwykłe); wariant --row = 3 kolumny — */
.contact-dl { margin: 34px 0 0; display: grid; gap: 24px; }
.contact-dl dt { margin-bottom: 5px; color: var(--c-accent-text); }
.contact-dl dd { margin: 0; font-size: 0.98rem; line-height: 1.6; }
.contact-dl--row {
  grid-template-columns: repeat(3, auto); justify-content: start;
  gap: 24px clamp(36px, 6vw, 88px);
  margin-top: clamp(28px, 4vw, 40px);
}
@media (max-width: 760px) { .contact-dl--row { grid-template-columns: 1fr; } }
.contact-note { font-size: 0.92rem; color: var(--c-ink-soft); margin: 0; max-width: 46ch; }

/* — Stopka: rozkład górnego pasa (markup wstrzykuje site.js) — */
.footer-top { display: flex; flex-wrap: wrap; gap: 24px 64px; align-items: flex-start; margin-bottom: 30px; }
.footer-top .footer-brand { flex: 1 1 260px; }
.footer-top .footer-brand p { margin: 14px 0 0; font-size: 0.92rem; color: var(--c-on-dark-soft); max-width: 34ch; }
.footer-top .footer-brand .footer-nip { display: block; margin-top: 10px; font-size: 0.8rem; color: var(--c-on-dark-soft); }
.footer-nav { display: flex; flex-wrap: wrap; gap: 10px 28px; }
.footer-nav a { font-size: 0.78rem; font-weight: 600; text-transform: uppercase;
                letter-spacing: 0.12em; text-decoration: none; color: var(--c-on-dark-soft); }
.footer-nav a:hover { color: var(--c-on-dark); }

/* — Pary „sytuacja → co wtedy robimy": edytorska lista dwukolumnowa dla podstron
   usługowych (sekcja „z czym do nas przychodzisz"). Geometria hairline'a i kreski-
   interpunktu jak w .step/.trust-cols, więc sekcja czyta się jako rodzeństwo kroków,
   a nie jako obcy klocek. --fill zapełnia kreskę przy scrollu, a animacje.js celuje
   w `[data-fill] li` — kontener MUSI być <ul data-fill>, pozycje <li>.
   Świadomie BEZ kart i cieni: karty w tej roli zjadłyby kontrast z .reason-grid,
   który wraca niżej na tej samej stronie. — */
.case-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 clamp(40px, 6vw, 88px); }
.case-grid li {
  position: relative; border-top: 1px solid var(--c-line);
  padding: clamp(22px, 2.6vw, 30px) 0 clamp(24px, 3vw, 34px);
}
.case-grid li::before {
  content: ""; position: absolute; top: -1.5px; left: 0;
  width: calc(56px + (100% - 69px) * var(--fill, 0)); height: 2px; background: var(--c-accent);
}
.case-grid li::after {
  content: ""; position: absolute; top: -3px;
  left: calc(64px + (100% - 69px) * var(--fill, 0));
  width: 5px; height: 5px; border-radius: var(--radius-round); background: var(--c-accent);
}
/* sytuacja mówi głosem czytelnika, odpowiedź kancelarii wchodzi pod granatową strzałką */
.case-when { margin: 0 0 10px; font-size: 1.12rem; font-weight: 700; line-height: 1.32; letter-spacing: -0.008em; }
.case-do { display: flex; gap: 12px; margin: 0; font-size: 0.95rem; color: var(--c-ink-soft); }
.case-do .arrow { margin-top: 5px; color: var(--c-accent-text); }
/* wariant jednokolumnowy — gdy .case-grid siedzi juz w kolumnie (np. wewnatrz
   .services-col, przy liscie rozbitej na dwie grupy odbiorcow) */
.case-grid--stack { grid-template-columns: 1fr; }
@media (max-width: 760px) { .case-grid { grid-template-columns: 1fr; } }

/* — Eyebrow i drugi przycisk NA CIEMNYM (pas CTA podstron) —
   .section--dark podmienia --c-ink-soft na wersję kościaną, więc sam tekst eyebrow
   jest już czytelny; poprawki wymaga tylko kreska (hairline jasnego tła znika na
   granacie) oraz obrys przycisku drugorzędnego: samo wypełnienie go nie wyznacza,
   a WCAG 1.4.11 dotyczy również kontrolek (--c-line-field-dark trzyma 4.16:1). — */
.section--dark .eyebrow-line { background: var(--c-line-dark); }
.cta-dark .eyebrow { justify-content: center; }
.btn--on-dark-ghost {
  background: transparent; color: var(--c-on-dark);
  box-shadow: inset 0 0 0 1.5px var(--c-line-field-dark);
}

/* — Pasek alertu pod hero: jedna pilna informacja (termin ustawowy, ryzyko),
   ktora dotyczy MNIEJSZOSCI czytelnikow, wiec ma byc widoczna, ale waska.
   Tint marki zamiast pelnego granatu: pasek wyroznia sie z rytmu biel-kosc,
   nie konkurujac z pasem CTA. Tekst atramentowy i .link-more (--c-accent-text)
   maja na troncie 7.04:1, wiec pasek nie potrzebuje wlasnych wyjatkow. — */
.alert-band {
  background: var(--c-accent-tint);
  border-top: 1px solid rgba(31, 78, 121, 0.18);
  border-bottom: 1px solid rgba(31, 78, 121, 0.18);
}
.alert-band-inner {
  display: flex; align-items: center; gap: clamp(14px, 2.4vw, 28px);
  padding-top: clamp(16px, 2vw, 22px); padding-bottom: clamp(16px, 2vw, 22px);
}
.alert-band p { margin: 0; font-size: 0.95rem; line-height: 1.5; max-width: 76ch; }
.alert-icon {
  flex-shrink: 0; width: 38px; height: 38px; display: grid; place-items: center;
  border-radius: var(--radius-round); background: var(--c-accent); color: var(--c-on-accent);
}
.alert-icon svg { width: 20px; height: 20px; }
.alert-band .link-more { flex-shrink: 0; margin-left: auto; }
@media (max-width: 900px) {
  .alert-band-inner { flex-wrap: wrap; }
  .alert-band .link-more { margin-left: 0; }
}

/* — Lista terminow: „ile masz czasu” w lewej kolumnie, rozwiniecie w prawej.
   Geometria i kreska-interpunkt jak w .step, ale zamiast widmowego numeru
   stoi tu ETYKIETA TERMINU (granat tekstowy) — bo w tej sekcji nosnikiem
   informacji jest sam termin, nie kolejnosc. Pozycje musza byc <li> w
   <ul data-fill>: animacje.js celuje w `[data-fill] li`. — */
.terms-list { display: grid; }
.term {
  position: relative; display: grid;
  grid-template-columns: minmax(130px, 190px) 1fr;
  gap: clamp(20px, 3.5vw, 56px); align-items: start;
  padding: clamp(24px, 3.2vw, 38px) 0;
  border-top: 1px solid var(--c-line);
}
.term::before {
  content: ""; position: absolute; top: -1.5px; left: 0;
  width: calc(56px + (100% - 69px) * var(--fill, 0)); height: 2px; background: var(--c-accent);
}
.term::after {
  content: ""; position: absolute; top: -3px;
  left: calc(64px + (100% - 69px) * var(--fill, 0));
  width: 5px; height: 5px; border-radius: var(--radius-round); background: var(--c-accent);
}
.term-when {
  font-size: clamp(1.25rem, 2vw, 1.6rem); font-weight: 800; line-height: 1.15;
  letter-spacing: -0.018em; color: var(--c-accent-text);
}
.term h3 { margin: 0 0 0.4em; font-size: clamp(1.2rem, 1.8vw, 1.45rem); }
.term p { margin: 0; color: var(--c-ink-soft); }
@media (max-width: 700px) { .term { grid-template-columns: 1fr; gap: 10px; } }

/* — Akordeon ZAKRESU uslug: nadbudowa na .faq (mechanika, znak „+” i plynne
   rozwijanie zostaja te same), ktora zmienia tylko szerokosc kolumny
   i doklada numer pozycji. Powod: strona uslugowa potrafi miec DWA akordeony
   — zakres na gorze i pytania na dole — a identyczne listy czytaja sie jak
   pomylka redakcyjna. Numer + szersza kolumna rozdzielaja je na pierwszy rzut oka.
   Nagłowek pozycji owijaj w .s-label: .faq summary jest flexem ze
   space-between, wiec numer i tekst musza byc JEDNYM dzieckiem, inaczej
   rozjada sie na przeciwne krawedzie. — */
.scope-list { max-width: 980px; }
/* Pozycje sa CELOWO wieksze od FAQ (tam 1.06rem): to nie jest lista pytan
   uzupelniajaca strone, tylko glowna tresc sekcji „czym sie zajmujemy”,
   ktora czytelnik skanuje w poszukiwaniu SWOJEJ sprawy. Przy szesciu
   podobnych wierszach na 980px mniejszy stopien pisma zlewal sie w blok. */
.scope-list summary {
  padding: clamp(20px, 2.4vw, 27px) 0;
  font-size: clamp(1.22rem, 1.8vw, 1.5rem);
  line-height: 1.28; letter-spacing: -0.012em;
}
.scope-list summary::after { font-size: 1.9rem; }
.scope-list .s-label { display: flex; align-items: baseline; gap: clamp(14px, 1.6vw, 22px); }
/* min-width trzyma tytuly w jednej osi mimo roznej szerokosci cyfr */
.scope-list .s-label .n {
  flex-shrink: 0; min-width: 1.9em;
  font-size: 0.92rem; font-weight: 800;
  letter-spacing: 0.06em; color: var(--c-accent-text);
}
/* rozwinieta pozycja zapala numer pelnym granatem — druga, poza znakiem „+”,
   oznaka stanu, zeby przy szesciu wierszach bylo widac, ktory jest otwarty */
.scope-list .faq[open] .s-label .n { color: var(--c-accent); }
.scope-list .faq-body { max-width: 74ch; padding-bottom: 26px; }

/* — Modele rozliczenia: trzy kolumny na hairlinie z kreska-interpunktem.
   Geometria jak .stat, ale BEZ wielkiej liczby — nosnikiem jest tu nazwa
   modelu, nie wartosc; .stats-grid zostaje zarezerwowany dla liczb
   o kancelarii. Pozycje musza byc <li> w <ul data-fill>: animacje.js
   celuje w `[data-fill] li`. — */
.plan-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(28px, 4vw, 56px); }
.plan-grid li { position: relative; border-top: 1px solid var(--c-line); padding-top: 24px; }
.plan-grid li::before {
  content: ""; position: absolute; top: -1.5px; left: 0;
  width: calc(56px + (100% - 69px) * var(--fill, 0)); height: 2px; background: var(--c-accent);
}
.plan-grid li::after {
  content: ""; position: absolute; top: -3px;
  left: calc(64px + (100% - 69px) * var(--fill, 0));
  width: 5px; height: 5px; border-radius: var(--radius-round); background: var(--c-accent);
}
.plan-name {
  margin: 0 0 8px; font-size: clamp(1.15rem, 1.7vw, 1.35rem);
  font-weight: 700; line-height: 1.28; letter-spacing: -0.008em;
}
.plan-grid p { margin: 0; font-size: 0.95rem; color: var(--c-ink-soft); }
/* wariant dwukolumnowy — gdy warianty sa dwa, trzeci pusty slot wygladalby
   jak brakujaca pozycja, a nie jak decyzja projektowa */
.plan-grid--2 { grid-template-columns: 1fr 1fr; }
@media (max-width: 900px) { .plan-grid, .plan-grid--2 { grid-template-columns: 1fr; gap: 26px; } }

/* — Przycisk telefonu w headerze: ciemny granat (decyzja Mikolaja 2026-08-19,
   kolor zmieniony 2026-08-21 wraz z paleta). Etykieta w kosci sloniowej daje
   na --c-accent-deep 12.02:1, wiec wariant nie potrzebuje obrysu. Hover
   ROZJASNIA domieszka mosiadzu (9.47:1 z etykieta) — domieszka samego akcentu
   nie dalaby widocznej roznicy, bo to ten sam granat. — */
.btn--deep { background: var(--c-accent-deep); color: var(--c-on-dark); }

/* — Rozwijane menu „Usługi" w nawigacji glownej —
   Otwiera sie na :hover ORAZ :focus-within, wiec dziala z klawiatury bez
   linii JS. Panel wisi 12px pod pozycja, a niewidzialny mostek (.has-sub::after)
   przykrywa te przerwe — bez niego kursor w drodze do panelu gubilby hover.
   Ponizej 1100px cala .main-nav jest ukryta i liste niesie menu mobilne. — */
.main-nav .has-sub { position: relative; }
.main-nav .has-sub > a { display: inline-flex; align-items: center; gap: 7px; }
.main-nav .caret { width: 11px; height: 11px; flex-shrink: 0; transition: transform 220ms var(--ease-out); }
.main-nav .has-sub:hover .caret, .main-nav .has-sub:focus-within .caret { transform: rotate(180deg); }
.has-sub::after { content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 14px; }
.main-nav .subnav {
  position: absolute; top: calc(100% + 12px); left: -16px; z-index: 60;
  min-width: 264px; display: block;
  background: var(--c-white); border: 1px solid var(--c-line);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-md); padding: 9px;
  opacity: 0; visibility: hidden; transform: translateY(-6px);
  transition: opacity 180ms ease, transform 180ms var(--ease-out), visibility 180ms;
}
.has-sub:hover .subnav, .has-sub:focus-within .subnav { opacity: 1; visibility: visible; transform: translateY(0); }
.main-nav .subnav li { display: block; }
.main-nav .subnav a {
  display: block; padding: 9px 14px; border-radius: var(--radius-sm);
  font-size: 0.8rem; letter-spacing: 0.08em;
  transition: background-color 180ms ease, color 180ms ease;
}
.main-nav .subnav a::after { display: none; }   /* podkreslenie z .main-nav a tu nie wchodzi */
.main-nav .subnav a[aria-current="page"] { color: var(--c-accent-text); background: var(--c-accent-tint); }

/* — Menu mobilne: „Usługi" jako grupa z podpozycjami — */
.mobile-menu .mm-group-label {
  margin: 22px 0 6px; font-size: 0.74rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.18em; color: var(--c-band);
}
.mobile-menu .mm-sub { padding-left: 16px; border-left: 1px solid var(--c-line-dark); }
.mobile-menu .mm-sub a { padding: 9px 0; font-size: 1.05rem; font-weight: 600; }


/* — Panel prostujacy nieporozumienie: kilka faktow o JEDNEJ sprawie, ktora
   czytelnik najczesciej rozumie zle. Tint marki niesie ten sam sygnal co
   .alert-band („przeczytaj uwaznie"), ale w formie panelu, nie waskiego pasa —
   bo tu nie chodzi o jedno zdanie ostrzezenia, tylko o rozbudowane sprostowanie.
   Wiszacy granatowy numer zamiast ikony: trzy wykrzykniki pod rzad brzmialyby
   alarmistycznie, a to ma byc rzeczowe.
   Panel stawiaj na BIELI — tint na kosci sloniowej ma za maly kontrast.
   Zywy przyklad: podzial-majatku.html sekcja 04. — */
.fact-panel {
  max-width: 900px;
  background: var(--c-accent-tint);
  border-radius: var(--radius-lg);
  padding: clamp(22px, 3vw, 38px);
}
.fact-panel li { display: grid; grid-template-columns: auto 1fr; gap: 0 clamp(14px, 1.8vw, 22px); padding: clamp(18px, 2.2vw, 24px) 0; }
.fact-panel li:first-child { padding-top: 0; }
.fact-panel li:last-child { padding-bottom: 0; }
.fact-panel li + li { border-top: 1px solid rgba(31, 78, 121, 0.18); }
.fact-n { font-size: 0.86rem; font-weight: 800; letter-spacing: 0.06em; color: var(--c-accent-text); padding-top: 3px; }
.fact-panel h3 { margin: 0 0 6px; font-size: clamp(1.12rem, 1.7vw, 1.32rem); line-height: 1.3; letter-spacing: -0.008em; }
.fact-panel p { grid-column: 2; margin: 0; font-size: 0.95rem; color: var(--c-ink-soft); }
@media (max-width: 560px) {
  .fact-panel li { grid-template-columns: 1fr; gap: 4px; }
  .fact-panel p { grid-column: 1; }
}

/* — Baner zgody na cookies — wstrzykuje go site.js, wiec istnieje w JEDNEJ kopii.
   Karta przy dolnej krawedzi, nie zaslona na cala strone: tresc pozostaje
   czytelna, a decyzje da sie podjac swiadomie.
   RODO: OBA przyciski maja identyczna wage wizualna (ten sam .btn--ghost).
   Odmowa musi byc rownie latwa co zgoda — nie zamieniac „Akceptuje" na
   .btn--primary, bo to psuje wazność zgody, a nie tylko estetyke.
   z-index 80: NAD headerem (50), ale POD menu mobilnym (90), zeby otwarte
   menu przykrywalo baner, a nie odwrotnie. — */
.cookie-bar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 80;
  padding: 0 clamp(12px, 3vw, 24px) clamp(12px, 3vw, 24px);
  pointer-events: none;   /* klikalna jest tylko karta, nie pas dookola */
}
.cookie-bar[hidden] { display: none; }
.cookie-card {
  pointer-events: auto;
  max-width: var(--container); margin: 0 auto;
  background: var(--c-white); border: 1px solid var(--c-line);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-panel);
  padding: clamp(20px, 2.6vw, 28px);
  display: grid; grid-template-columns: 1fr auto;
  gap: clamp(14px, 2.4vw, 36px); align-items: center;
}
.cookie-card h2 { margin: 0 0 6px; font-size: clamp(1.05rem, 1.5vw, 1.2rem); }
.cookie-card p { margin: 0; font-size: 0.92rem; line-height: 1.55; color: var(--c-ink-soft); max-width: 76ch; }
.cookie-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.cookie-actions .btn { padding: 12px 22px; }
@media (max-width: 860px) { .cookie-card { grid-template-columns: 1fr; } }

/* — Bramka na osadzoną treść zewnętrzną (mapy Google) —
   Ramka trzyma wysokosc, zeby po zaladowaniu mapy nic nie skakalo.
   `[data-embed] iframe[hidden]` jest OBOWIAZKOWE: strony ustawiaja
   `iframe { display: block }`, a to nadpisuje atrybut [hidden]
   z arkusza przegladarki — bez tej reguly ukryta mapa i tak by sie ladowala
   wizualnie jako pusty prostokat. Ten sam blad co przy .mobile-menu[hidden]. — */
[data-embed] iframe[hidden] { display: none; }
.embed-gate {
  display: grid; place-items: center; gap: 12px;
  min-height: 220px; padding: clamp(20px, 3vw, 32px) 20px;
  text-align: center; background: var(--c-cream);
}
.embed-gate p { margin: 0; font-size: 0.88rem; line-height: 1.5; color: var(--c-ink-soft); max-width: 40ch; }
.embed-gate .btn { padding: 11px 20px; }

/* =============================================================
   CMS — anty-FOUC
   site.js zapala .cms-cloak synchronicznie, a runtime CMS zdejmuje ją po
   nałożeniu opublikowanych treści albo po twardym timeoucie (~1 s). Bez tej
   reguły czytelnik zobaczyłby najpierw tekst ze źródła, a chwilę potem jego
   podmienioną wersję. Chowamy WYŁĄCZNIE <main> — nagłówek i stopka stoją
   nieruchomo, więc strona nie mruga całą powierzchnią.
   ============================================================= */
html.cms-cloak main { visibility: hidden; }