/* System wizualny ALIAX v2 — proporcje zmierzone 23.08.2026 na stronie referencyjnej
 * (która: docs/struktura-nawigacji.md; tu tylko liczby).
 *
 * Skąd te liczby:
 *   ich strona branżowa (energetyka)   5437 px,  713 słów, 491 linków, 36 obrazów
 *   ich strona główna (US)             3921 px,  490 słów, 591 linków, 16 obrazów
 * Dla porównania nasz poprzedni wariant miał 21 095 px i ~1500 słów. Stąd zwrot:
 * strona ma być KRÓTKA i rzeczowa, a nie długa i efektowna.
 *
 * Typografia u nich:
 *   H1 strony branżowej   ITC Charter 400, 55px / 65px
 *   H2 sekcji             ITC Charter 400, 38px / 49px
 *   H3 karty              Helvetica    700, 28-32px
 *   H1 strony głównej     ITC Charter 400, 128px (pytanie)
 *   H2 sekcji na głównej  ITC Charter 400, 56px
 *   tekst                 Helvetica Neue, kolor #2D2D2D
 * U nas: Source Serif 4 zamiast ITC Charter (licencjonowany), Public Sans zamiast
 * Helvetiki, fiolet #4B1E9E — koniec gradientu logo — zamiast ich pomarańczy.
 * 15.09.2026: paleta przeniesiona z tealu na kolory znaku (fiolet #4B1E9E = koniec gradientu logo,
 * mięta #2EF7A7 na ciemnym tle). 16.09.2026: decyzja właściciela — fiolet zostaje; token nazywa się
 * --akcent (do tego dnia --teal, co po zmianie koloru mówiło nieprawdę). Wartości tealu w historii git.
 */
@import url("zgoda.css?v=1");

:root{
  --ink:#2D2D2D; --body:#464646; --muted:#66627A;
  --akcent:#4B1E9E; --akcent-noc:#2EF7A7; --akcent-soft:#D9D2EA; --deep:#0F0A1F;
  --line:#E3E3E3; --wash:#F2F2F2;   /* wersja obecna: biel; wariant B: html.papier-krem niżej */ --paper:#FFFFFF;
  --serif:'Source Serif 4',Georgia,serif;
  --sans:'Public Sans','Helvetica Neue',Helvetica,Arial,sans-serif;
  --wrap:1240px; --pad:32px;
}
/* Papier wariantu B (decyzja właściciela 25.10.2026 po pomiarze zapisanej strony FT i podglądzie czterech stron na dwóch kremach,
   docs/publikacje-warianty-2026-10-25.html#papier): krem jasny zamiast bieli, mniej blasku przy czytaniu; kontrast tekstu 8,8:1 (--body),
   12,8:1 (--ink), 5,1:1 (--muted), AA zachowane. Klasa na <html> stron wariantu (szkielet.b.html, oba fragmenty strony głównej); wersja
   obecna czyta ten sam arkusz i zostaje biała do publikacji, potem wartości przechodzą do :root. */
html.papier-krem{--paper:#FBF6EF;--wash:#F3EEE6}
/* Zgoda na cookies w wariancie B (25.10.2026, recenzja prawna: przyciski wyboru równorzędne wizualnie, wytyczne EROD o zwodniczych
   interfejsach): „Tylko niezbędne” i „Zapisz wybór” wyglądają jak „Akceptuję wszystkie” (ten sam rozmiar, kształt, wypełnienie i kontrast).
   „Ustawienia” to przejście do okna, nie decyzja, więc zostaje drugorzędne. */
html.papier-krem .zgoda-btn--obrys{background:var(--akcent);border-color:var(--akcent);color:var(--paper)}
html.papier-krem .zgoda-btn--obrys:hover{background:var(--deep);border-color:var(--deep);color:var(--paper)}
/* Okno zgody na środku, wymagające wyboru, jak na polskich stronach Deloitte i EY (pomiar 26.10.2026); klasę stawia zgoda.js. */
html.papier-krem.zgoda-wymagana{overflow:hidden}
html.papier-krem.zgoda-wymagana .zgoda::before{content:"";position:fixed;inset:0;z-index:59;background:rgba(15,10,31,.62)}
html.papier-krem .zgoda-pasek{left:50%;top:50%;bottom:auto;transform:translate(-50%,-50%);width:min(560px,calc(100% - 32px));
  grid-template-columns:1fr;gap:20px;padding:32px 36px 28px;text-align:center;border-top-width:6px}
/* strona główna animuje wejście karty (translateY → none po identzie): wyśrodkowanie musi wygrać z tymi regułami */
html.papier-krem body .zgoda-pasek,html.papier-krem body:not(.is-intro) .zgoda-pasek{transform:translate(-50%,-50%)}
html.papier-krem .zgoda-pasek .zgoda-tytul{font-family:var(--serif);font-weight:400;font-size:26px;margin:0 0 10px}
html.papier-krem .zgoda-pasek .zgoda-opis{font-size:15px;max-width:none}
html.papier-krem .zgoda-pasek .zgoda-akcje{display:grid;grid-template-columns:1fr 1fr;gap:12px;min-width:0}
html.papier-krem .zgoda-pasek .zgoda-btn{padding:13px 18px;font-size:15px}
html.papier-krem .zgoda-pasek:focus{outline:none}
html.papier-krem .zgoda-pasek .zgoda-btn--tekst{grid-column:1 / -1;justify-self:center;width:auto;border:0;background:none;
  padding:4px 8px;text-decoration:underline;text-underline-offset:3px;color:var(--akcent)}
@media (max-width:700px){
  html.papier-krem .zgoda-pasek{left:50%;right:auto;bottom:auto;width:calc(100% - 24px);padding:24px 20px 20px}
  html.papier-krem .zgoda-pasek .zgoda-akcje{grid-template-columns:1fr}
}
/* Chiński (25.10.2026): litery łacińskie dalej z krojów marki, znaki chińskie z systemowego kroju bezszeryfowego (PingFang na Apple,
   Microsoft JhengHei/YaHei na Windows, Noto Sans CJK na Androidzie); także nagłówki szeryfowe, bo systemowe kroje szeryfowe CJK na Windows
   (MingLiU, SimSun) są nieczytelne w dużych stopniach. Bez sztucznej kursywy i pogrubień dla znaków chińskich. */
html[lang="zh-HK"]{--sans:'Public Sans','PingFang HK','PingFang TC','Microsoft JhengHei','Noto Sans TC','Noto Sans CJK TC',sans-serif;
  --serif:'Source Serif 4','PingFang HK','PingFang TC','Microsoft JhengHei','Noto Sans TC','Noto Sans CJK TC',sans-serif}
html[lang="zh-CN"]{--sans:'Public Sans','PingFang SC','Microsoft YaHei','Noto Sans SC','Noto Sans CJK SC',sans-serif;
  --serif:'Source Serif 4','PingFang SC','Microsoft YaHei','Noto Sans SC','Noto Sans CJK SC',sans-serif}
html[lang^="zh"]{font-synthesis:none}
html[lang^="zh"] em{font-style:normal;font-weight:600}
/* nagłówki chińskie łamią się na interpunkcji (，。), nie w środku wyrazu; zbyt długi człon i tak się złamie (overflow-wrap) */
html[lang^="zh"] :is(h1,h2,h3,.h-strony,.h-sekcji,.h-sekcji-duza,.h-pytanie){word-break:keep-all;overflow-wrap:anywhere}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scrollbar-gutter:stable}
body{margin:0;font-family:var(--sans);color:var(--body);background:var(--paper);
  font-size:16px;line-height:1.55;-webkit-font-smoothing:antialiased}
img{display:block;max-width:100%}
a{color:var(--ink);text-decoration:none}
a:focus-visible,button:focus-visible{outline:3px solid var(--akcent);outline-offset:3px}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 var(--pad)}
.skip{position:absolute;left:-9999px}.skip:focus{left:12px;top:12px;background:var(--akcent);color:#fff;padding:12px 18px;z-index:200}

/* ---------- NAGŁÓWEK ---------- */
.top{border-bottom:1px solid var(--line);background:var(--paper);position:sticky;top:0;z-index:50}
/* Nagłówek wg pomiaru wzorca: 60–64 px, logo z lewej, nawigacja WYŚRODKOWANA, drobny
   blok po prawej. Do 14.09.2026 te reguły siedziały tylko w stronach branżowych
   (jako .w4 …), a reszta miała 78 px z nawigacją do lewej — dwa różne nagłówki
   na jednej stronie. Teraz jeden, tutaj. */
.top > .wrap{height:64px;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:24px}
.mark{display:block;color:var(--ink);justify-self:start;line-height:0}
/* Logo 1a: sygnet w gradiencie, napis w currentColor — dziedziczy kolor tekstu paska.
   26 px w pasku 64 px; proporcja 4,84:1 daje 126 px szerokości. */
.mark svg{height:26px;width:auto;display:block}
.mark--stopka svg{height:24px}
.nawig{display:flex;align-items:center;justify-self:center;gap:26px;font-size:14.5px;font-weight:400}
.top-prawa{justify-self:end;display:flex;align-items:center;gap:20px;font-size:13px;color:var(--muted)}
.top-prawa a{color:var(--muted);display:inline-block;padding:12px 6px;margin-right:-6px}
.top-prawa a:hover{color:var(--akcent)}
/* Przełącznik języka (decyzja właściciela 14.10.2026, „jak PwC”): ikona globusa + kod języka, lista „Polski / English” pod przyciskiem,
   bez flag (pomiar 16 serwisów: docs/przelacznik-jezyka-2026-10-14.md). Znacznik: szkielet.js jezykHtml(), otwieranie: menu.js. */
.jezyk{position:relative}
.jezyk-btn{display:inline-flex;align-items:center;gap:6px;background:transparent;border:0;padding:12px 6px;margin-right:-6px;font:inherit;font-size:13px;color:var(--muted);cursor:pointer}
.jezyk-btn:hover{color:var(--akcent)}
.jezyk-btn .chev{transition:transform .2s}
.jezyk-btn[aria-expanded="true"] .chev{transform:rotate(180deg)}
/* Otwieranie jak mega menu (.mm, uwaga właściciela 14.10.2026): lista zjeżdża z -10 px i pojawia się w .26 s tą samą krzywą,
   pozycje wjeżdżają z 8 px w .34 s z odstępem 45 ms. Atrybut hidden zostaje dla menu.js i czytników, display:block pozwala
   na przejście; w stanie zamkniętym visibility:hidden i pointer-events:none, więc lista nie łapie klików ani fokusu. */
.jezyk-lista[hidden]{display:block}
.jezyk-lista{opacity:0;transform:translateY(-10px);visibility:hidden;pointer-events:none;
  transition:opacity .26s cubic-bezier(.22,.61,.36,1),transform .26s cubic-bezier(.22,.61,.36,1),visibility 0s linear .26s}
.jezyk-lista:not([hidden]){opacity:1;transform:none;visibility:visible;pointer-events:auto;transition-delay:0s,0s,0s}
.jezyk-lista li{opacity:0;transform:translateY(8px);transition:opacity .34s ease,transform .34s ease}
.jezyk-lista li:nth-child(2){transition-delay:45ms}.jezyk-lista li:nth-child(3){transition-delay:90ms}.jezyk-lista li:nth-child(4){transition-delay:135ms}
.jezyk-lista:not([hidden]) li{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.jezyk-lista,.jezyk-lista li{transition:none}}
.jezyk-lista{position:absolute;right:0;top:100%;margin:2px 0 0;padding:6px 0;list-style:none;min-width:150px;background:var(--paper);border:1px solid var(--line);box-shadow:0 10px 28px rgba(15,10,31,.14);z-index:40;text-align:left}
.jezyk-lista a,.jezyk-lista span{display:flex;align-items:center;gap:10px;padding:9px 16px;margin:0;font-size:14.5px;line-height:1.3;color:var(--ink);text-decoration:none;white-space:nowrap}
.jezyk-flaga{width:20px;height:14px;flex:none;display:block;box-shadow:0 0 0 1px rgba(15,10,31,.14)}   /* flagi tylko w liście (25.10.2026); obrys, bo biel polskiej flagi ginie na papierze */
.jezyk-lista a:hover,.jezyk-lista a:focus-visible{background:var(--wash);color:var(--akcent)}
.jezyk-lista [aria-current]{font-weight:600;color:var(--akcent)}
html:not(.js) .jezyk-btn{display:none}
html:not(.js) .jezyk-lista{display:flex;gap:8px;position:static;min-width:0;padding:0;border:0;box-shadow:0;opacity:1;transform:none;visibility:visible;pointer-events:auto;transition:none}   /* bez JavaScriptu: oba języki obok siebie */
html:not(.js) .jezyk-lista li{opacity:1;transform:none;transition:none}
html:not(.js) .jezyk-lista a,html:not(.js) .jezyk-lista span{padding:12px 6px;font-size:13px;color:var(--muted)}
html:not(.js) .jezyk-flaga{display:none}   /* bez JavaScriptu lista stoi w nagłówku, nie w rozwijanym panelu: bez flag */
.mm{max-height:calc(100dvh - 65px)}
.nawig a{padding:6px 0;border-bottom:2px solid transparent}
.nawig a:hover,.nawig a[aria-current]{border-bottom-color:var(--akcent);color:var(--akcent)}
.nawig .lang{color:var(--muted);font-weight:400}

/* ---------- TYPOGRAFIA WEDŁUG POMIARU ---------- */
.h-strony{font-family:var(--serif);font-weight:400;font-size:clamp(38px,4.4vw,55px);
  line-height:1.18;letter-spacing:-.01em;color:var(--ink);margin:0}
.h-pytanie{font-family:var(--serif);font-weight:400;font-size:clamp(46px,8.4vw,128px);
  line-height:1.02;letter-spacing:-.03em;color:var(--ink);margin:0;text-wrap:balance}
.h-sekcji{font-family:var(--serif);font-weight:400;font-size:clamp(30px,3.2vw,38px);
  line-height:1.3;color:var(--ink);margin:0 0 10px}
.h-sekcji-duza{font-family:var(--serif);font-weight:400;font-size:clamp(34px,4.2vw,56px);
  line-height:1.14;letter-spacing:-.015em;color:var(--ink);margin:0 0 12px;text-wrap:balance}
.h-karty{font-family:var(--sans);font-weight:700;font-size:28px;line-height:1.28;
  color:var(--ink);margin:0;text-wrap:balance}
.h-karty-duza{font-family:var(--sans);font-weight:700;font-size:32px;line-height:1.25;
  color:var(--ink);margin:0;text-wrap:balance}
.lead{font-size:19px;line-height:1.6;color:var(--body);max-width:44em;margin:18px 0 0}
.nadpis{font-size:13px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--akcent);margin:0 0 14px}

/* ---------- SEKCJE ---------- */
.sekcja{padding:64px 0}
.sekcja--kreska{border-top:1px solid var(--line)}
.sekcja--wash{background:var(--wash)}
.sekcja--noc{background:var(--deep);color:#D9D2EA}
.sekcja--noc .h-sekcji,.sekcja--noc .h-sekcji-duza,.sekcja--noc .h-karty{color:#fff}
.sekcja--noc a:not(.btn){color:var(--akcent-noc)}
.sekcja--noc .nadpis{color:var(--akcent-noc)}

/* karty: siatka z równymi komórkami, nigdy flex-wrap (sieroty w ostatnim rzędzie) */
.karty{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:40px 32px;margin-top:36px}
.karty--2{grid-template-columns:repeat(auto-fill,minmax(420px,1fr))}
.karta{display:flex;flex-direction:column;gap:12px}
.karta .foto{aspect-ratio:16/9;overflow:hidden;background:var(--wash)}
.karta .foto img{width:100%;height:100%;object-fit:cover;transition:transform .5s cubic-bezier(.22,.61,.36,1)}
.karta .foto a:hover img,.karta .foto a:focus-visible img{transform:scale(1.03)}
.karta p{margin:0;font-size:15.5px}
.karta .wiecej{font-size:15px;font-weight:600;color:var(--akcent);margin-top:2px}

/* hero strony wewnętrznej: obraz nad treścią, nie pod nią */
/* U nich kolejność to: okruszki → H1 z podtytułem → dopiero baner.
   Tytuł nie leży na zdjęciu i nie jest przez nie poprzedzony. */
.hero-str{border-bottom:1px solid var(--line)}
/* Skrót padding zerował boki: H1 wystawał 32 px poza kolumnę nagłówka na stronie bez własnego nadpisania. */
.hero-str .tresc{padding:40px var(--pad) 34px}
.hero-str .foto{aspect-ratio:16/6;overflow:hidden;background:var(--wash)}
.hero-str .foto img{width:100%;height:100%;object-fit:cover}
/* Okruszki: własny pas pod nagłówkiem strony, nie wtopiona linijka.
   Pomiar strony referencyjnej, wariant branżowy (23.08.2026): pas 37px, padding 6px 15px,
   linki POGRUBIONE (700), 14px, czerń — nie szarość. Cztery poziomy łańcucha. */
.pas-okruszkow{background:var(--paper);border-bottom:1px solid var(--line)}
.pas-okruszkow .wrap{padding-top:9px;padding-bottom:9px}
.okruszki{font-size:14px;font-weight:700;color:#000;margin:0;display:flex;flex-wrap:wrap;
  align-items:center;gap:0 4px;line-height:1.5}
.okruszki a{color:#000;font-weight:700}
.okruszki a:hover{color:var(--akcent);text-decoration:underline}
.okruszki span{margin:0 6px;color:var(--muted);font-weight:400}
.okruszki [aria-current]{font-weight:700;color:#000}
@media (max-width:700px){ .okruszki{font-size:13px} }

/* pas kontaktowy */
.kontakt{background:var(--akcent);color:#fff}
.kontakt .wrap{padding:52px var(--pad);display:flex;justify-content:space-between;
  align-items:center;gap:36px;flex-wrap:wrap}
.kontakt h2{font-family:var(--serif);font-weight:400;font-size:32px;margin:0 0 8px;color:#fff}
.kontakt p{margin:0;color:#D9D2EA;max-width:42em}
.kontakt .btn{background:#fff;color:var(--akcent);padding:14px 30px;font-weight:600;white-space:nowrap}
/* Adres e-mail nie został podany — do czasu jego dostarczenia przycisk jest napisem [X], nie odnośnikiem. */
.kontakt .btn--brak{cursor:default}

/* stopka */
.stopka{background:var(--wash);border-top:1px solid var(--line)}
.stopka .wrap{padding:48px var(--pad) 32px;display:grid;
  grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:32px}
.stopka .naglowek-kol{font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--akcent);margin:0 0 12px}
.stopka ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.stopka li a{font-size:14.5px;color:var(--body)}
.stopka li a:hover{color:var(--akcent)}
.stopka-dol{background:var(--wash);border-top:1px solid #DEDEDE}
.stopka-dol .wrap{padding:18px var(--pad) 36px;display:flex;justify-content:space-between;
  gap:20px;flex-wrap:wrap;font-size:13px;color:var(--muted)}
.stopka-dol a{color:var(--muted)}

@media (max-width:860px){
  /* logo | przełącznik języka | przycisk menu; nawigacja idzie do panelu mobilnego (menu.js) */
  .top > .wrap{grid-template-columns:1fr auto auto}
  :root{--pad:20px}
  .js .nawig{display:none}
  /* bez JavaScriptu: odnośniki nawigacji stoją pod logo, nic nie znika */
  html:not(.js) .top > .wrap{height:auto;padding:10px 0}
  html:not(.js) .nawig{grid-column:1 / -1;flex-wrap:wrap;gap:8px 18px;justify-self:start}
  .karty,.karty--2{grid-template-columns:1fr}
  .hero-str .foto{aspect-ratio:16/9}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .karta .foto img{transition:none}
}
@media print{
  @page{size:381mm 265mm;margin:0}
  *{-webkit-print-color-adjust:exact !important;print-color-adjust:exact !important}
  .top{position:static !important}
}


/* ---------- MEGA MENU ----------
   Klasa kontenera to .mm-wrap, nie .wrap: wewnątrz .top łapałaby ją reguła
   .top > .wrap{height:78px}, przez co panel otwierałby się jako pasek. */
.top{position:sticky;top:0;z-index:50}
.nav-btn{font:inherit;font-weight:400;color:inherit;background:none;border:0;padding:6px 0;cursor:pointer;
  display:inline-flex;align-items:center;gap:7px;border-bottom:2px solid transparent;
  transition:border-color .18s,color .18s}
.nav-btn:hover{border-bottom-color:var(--akcent);color:var(--akcent)}
.nav-btn .chev{transition:transform .26s cubic-bezier(.22,.61,.36,1)}
.nav-btn[aria-expanded="true"]{border-bottom-color:var(--akcent);color:var(--akcent)}
.nav-btn[aria-expanded="true"] .chev{transform:rotate(180deg)}
.mm{position:absolute;top:100%;left:0;right:0;background:var(--paper);border-top:1px solid var(--line);
  box-shadow:0 26px 46px rgba(15,10,31,.11);opacity:0;transform:translateY(-10px);pointer-events:none;
  max-height:calc(100dvh - 79px);overflow-y:auto;overscroll-behavior:contain;
  transition:opacity .26s cubic-bezier(.22,.61,.36,1),transform .26s cubic-bezier(.22,.61,.36,1)}
.mm[hidden]{display:none}
.mm.is-open{opacity:1;transform:none;pointer-events:auto}
.mm-wrap{max-width:var(--wrap);margin:0 auto;height:auto;padding:28px var(--pad) 32px;
  display:grid;grid-template-columns:minmax(0,9fr) minmax(210px,3fr);gap:36px;align-items:start}
/* Kolumny i panel — ten sam znacznik i te same reguły co na stronie głównej
   (fragmenty/mega-menu.html). Do 14.09.2026 strony poza główną miały uboższą
   wersję bez opisów sektorów i bez zdjęcia w panelu; menu wyglądało inaczej
   po wejściu w branżę niż na starcie. */
.mm .kolumny{display:grid;grid-template-columns:repeat(auto-fit,minmax(196px,1fr));gap:22px 30px;align-content:start}
.mm .kol{opacity:0;transform:translateY(8px);
  transition:opacity .34s ease,transform .34s ease;transition-delay:calc(var(--k,0) * 45ms)}
.mm.is-open .kol{opacity:1;transform:none}
.mm .kol > a.glowna{font-family:var(--serif);font-size:17px;font-weight:600;color:var(--ink);
  display:block;padding-bottom:7px;border-bottom:1px solid var(--line);margin-bottom:10px;line-height:1.25}
.mm .kol > a.glowna:hover{color:var(--akcent)}
.mm .kol > p{margin:0;font-size:14px;line-height:1.45;color:var(--body)}
.mm .kol ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.mm .kol li a{font-size:14px;line-height:1.35;color:var(--body);display:inline-block;
  border-bottom:1px solid transparent;transition:color .16s ease,border-color .16s ease}
.mm .kol li a:hover{color:var(--akcent);border-bottom-color:var(--akcent)}
.mm .panel{border-left:1px solid var(--line);padding-left:28px;display:flex;flex-direction:column;gap:14px;
  opacity:0;transform:translateY(8px);transition:opacity .34s ease .16s,transform .34s ease .16s}
.mm.is-open .panel{opacity:1;transform:none}
.mm .panel .ph{aspect-ratio:16/9;overflow:hidden;background:var(--wash)}
.mm .panel .ph img{width:100%;height:100%;object-fit:cover}
.mm .panel .kick{font-size:11px;font-weight:700;letter-spacing:.09em;color:var(--akcent);text-transform:uppercase}
.mm .panel h4,.mm .panel .naglowek-kol{font-family:var(--serif);font-size:19px;font-weight:600;color:var(--ink);margin:0}
.mm .panel p{margin:0;font-size:13.5px;color:var(--body)}
.mm .panel .btn{background:var(--akcent);color:#fff;padding:11px 20px;font-size:14px;font-weight:600;align-self:flex-start}
@media (prefers-reduced-motion:reduce){.mm .kol,.mm .panel{transition:none}}
@media (max-width:900px){.mm-wrap{grid-template-columns:1fr}.mm .kolumny{grid-template-columns:1fr}.mm .panel{border-left:0;padding-left:0}}
.mm-scrim{position:fixed;inset:0;background:rgba(15,10,31,.30);z-index:40;opacity:0;
  transition:opacity .26s;pointer-events:none}
.mm-scrim[hidden]{display:none}
.mm-scrim.is-open{opacity:1;pointer-events:auto}
@media (max-width:860px){.mm-wrap{grid-template-columns:1fr}.mm-panel{border-left:0;padding-left:0}}


/* =====================================================================
   ZAKŁADKI — komponent wspólny wszystkich stron branżowych.

   WYMAGA KONTENERA 1440 / 50 (--wrap:1440px, --pad:50px na <body>), bo cała
   geometria z pomiaru jest zakotwiczona w treści 1340 px. Domyślne zmienne
   tego arkusza to 1240 / 32, czyli treść 1176 px — przy nich zakładka wyjdzie
   238 px zamiast 271, a panel pionowy 749 px zamiast 913. Strona, która chce
   ten komponent, musi ustawić zmienne kontenera tak jak branza-energetyka.html.
   Bez prefiksu wersji: te same reguły mają obsłużyć siedem stron.

   Geometria z pomiaru wzorca power-utilities (okno 1440x900, 23.08.2026).
   Kolorem akcentu jest nasz --akcent; pomarańczy wzorca nie kopiujemy.
   Każda liczba opisana niżej jako „rachunek" wynika z arytmetyki kontenera,
   a nie z pomiaru naszej strony — naszej strony nikt jeszcze nie zmierzył.

   ZNACZNIK. To jest kontrakt pliku zakladki.js, nie propozycja:
     <div class="zakladki" id="…" data-zakladki="poziome|pionowe"
          data-zakladki-etykieta="Nazwa listy dla czytnika ekranu">
       <article class="zakl-panel" data-etykieta="Etykieta zakładki">
         <figure class="zakl-foto"><img …></figure>      (tylko poziome)
         <div class="zakl-tresc">
           <span class="zakl-num">01</span>              (opcjonalnie)
           <h3 class="h-karty">…</h3>     (poziome; pionowe: .h-karty-duza)
           <p>…</p>
           <a class="wiecej" href="…">…</a>              (opcjonalnie)
         </div>
       </article>
       …                                       (co najmniej dwa panele)
     </div>

   CO DOKŁADA SKRYPT, a czego nie ma w HTML:
     pasek .zakl-pasek (role="tablist") z przyciskami .zakl-tab (role="tab")
     jako pierwsze dziecko kontenera, klasę .zakl-gotowe na kontenerze,
     aria-selected i roving tabindex na przyciskach, atrybut hidden na
     nieaktywnych panelach oraz jedną regułę układu w <head>:
     [data-zakladki] > [data-etykieta][hidden]{display:none}

   ŚWIADOME ODSTĘPSTWA OD PIERWSZEGO SZKICU ARKUSZA
     1. Szkic zakładał ręcznie pisany pasek (.zakl-guzik), opakowanie
        .zakl-panele i klasę gotowości .zakladki--gotowe. Skrypt leżący na
        dysku robi inaczej: sam buduje pasek (.zakl-tab), panele są
        BEZPOŚREDNIMI dziećmi kontenera, a klasa gotowości to .zakl-gotowe.
        Arkusz idzie za skryptem, bo to skrypt się wykona.
     2. Nie ma klasy .js na <html> i nie ma wstępnego chowania paneli
        arkuszem. Gdyby zakladki.js się nie pobrał albo padł na wyjątku,
        reguła „.js … {display:none}" schowałaby cztery panele z pięciu na
        stałe. Autor skryptu postawił ten warunek wprost: paneli nie chowa
        arkusz, chowa je wyłącznie skrypt atrybutem hidden. Kosztem jest
        możliwe krótkie mignięcie wszystkich paneli przed startem skryptu.
     3. Siatka wariantu pionowego wisi na .zakl-gotowe, nie na samym
        kontenerze — bez tego pięć widocznych paneli wpadłoby w dwie
        kolumny, zanim skrypt zdąży cokolwiek schować.
   ===================================================================== */

/* --- 1. zmienne komponentu ----------------------------------------- */
.zakladki{
  /* rachunek: 1440 − 2×50 = 1340 treści; 1340 + 2×7,5 = 1355 modułu wzorca */
  --zakl-wyciek:7.5px;
  --zakl-przerwa:30px;      /* poziome: odstęp kolumn panelu */
  --zakl-lista:427px;       /* pionowe: szerokość listy */
  --zakl-odstep:15px;       /* pionowe: odstęp listy od panelu */
  --zakl-pad:15px;          /* pionowe: padding pozycji */
  --zakl-tor:#DFE3E6;       /* tor pod nieaktywną zakładką, z pomiaru */
  --zakl-czas:.18s;
  margin:0;
  min-width:0;
}
/* Tor #DFE3E6 zmierzono na białym tle wzorca. Na naszym --wash #F2F2F2
   zniknąłby (rachunek: 1,15:1), więc na tym tle jest o tyle ciemniejszy,
   żeby zachować kontrast toru z pomiaru (rachunek: 1,31:1 wobec 1,29:1
   u wzorca). Tor jest DEKORACJĄ rozdzielającą — stanu zakładki nie niesie,
   więc próg 3:1 go nie dotyczy. Stan niosą: grubość paska 2 px → 8 px,
   kolor --akcent i pogrubienie etykiety. */
.sekcja--wash .zakladki{--zakl-tor:#D2D6D9}

/* --- 2. część wspólna: przycisk zakładki ---------------------------- */
.zakl-pasek{margin:0;padding:0;min-width:0}
.zakl-tab{
  position:relative;
  display:flex;align-items:center;
  margin:0;
  font-family:var(--sans);font-weight:400;color:var(--body);
  background:none;border:0;text-align:left;cursor:pointer;
  transition:color var(--zakl-czas) ease,background-color var(--zakl-czas) ease,
             border-color var(--zakl-czas) ease;
}
/* Ognisko dziedziczymy z uklad.css: 3 px --akcent, offset 3 px. Na białym i na
   --wash obwódka wychodzi poza pudełko przycisku i jest widoczna
   (rachunek: 9,92:1 na bieli, 8,86:1 na --wash). Wyjątek to zakładka
   wypełniona tealem — tam obwódka wjeżdża do środka i robi się biała,
   patrz sekcje 5 i 8. */

/* --- 3. część wspólna: panel ---------------------------------------- */
.zakl-panel{min-width:0;scroll-margin-top:96px}
.zakl-panel:focus-visible{outline:3px solid var(--akcent);outline-offset:4px}
.zakl-tresc{min-width:0}
/* rachunek pionowego panelu: 40 + 14 + 86,4 + 14 + 28,8 = 183,2 ≈ 183 px */
.zakl-tresc > * + *{margin-top:14px}
.zakl-tresc p{margin:0;font-size:18px;line-height:1.6;color:var(--body)}
/* numer porządkowy: 12 px / 700 / .12em / --akcent — jeden wariant etykiety
   numerycznej dla wszystkich stron branżowych. W panelu poziomym go NIE
   używamy: przesuwa H3 w dół i dwie kolumny przestają startować w tej samej
   linii, czego wzorzec nie robi. Zostaje dla wariantów bez obrazu. */
.zakl-num{display:block;font-size:12px;font-weight:700;letter-spacing:.12em;
  color:var(--akcent)}
.zakl-num + .h-karty{margin-top:8px}
/* odnośnik 18/700 wg pomiaru; podkreślenie tekstowe, nie kreska pudełkowa —
   border-bottom dodałby 3 px do wysokości panelu i zepsuł rachunek 183 px */
.zakl-panel .wiecej{
  display:inline-block;font-size:18px;font-weight:700;color:var(--akcent);
  text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:4px;
  transition:color var(--zakl-czas) ease}
.zakl-panel .wiecej:hover{color:var(--ink)}
.zakl-foto{margin:0;overflow:hidden;background:var(--wash);aspect-ratio:16/9}
.zakl-foto img{width:100%;height:100%;object-fit:cover}
/* Kadr 3:2 albo 4:3 przycięty do 16:9 traci 15,6% albo 25% wysokości.
   Przy ujęciach robionych pod górę centrowanie ucina to, co najważniejsze —
   ten modyfikator przesuwa punkt kadrowania bliżej góry. */
.zakl-foto--gora img{object-position:50% 30%}

/* =====================================================================
   4. WARIANT POZIOMY — pasek pięciu równych pól + panel dwukolumnowy
   rachunek paska:     (1340 + 15) / 5 = 271,0 px na zakładkę
   rachunek wysokości: 109 (przycisk) + 8 (krawędź aktywnej) = 117 px
   ===================================================================== */
.zakladki[data-zakladki="poziome"] .zakl-pasek{
  display:grid;
  grid-auto-flow:column;
  grid-auto-columns:minmax(0,1fr);      /* równe pola przy dowolnej liczbie */
  margin-inline:calc(var(--zakl-wyciek) * -1);
  padding-bottom:8px;                   /* miejsce na krawędź aktywnej */
}
.zakladki[data-zakladki="poziome"] .zakl-tab{
  justify-content:center;
  min-height:109px;padding:8px 14px;
  font-size:16px;line-height:1.7;       /* rachunek: 16 × 1,7 = 27,2 px */
  text-align:center;text-wrap:balance;
}
/* tor i krawędź jako pseudoelement POZA pudełkiem przycisku: przycisk ma
   wtedy dokładnie 109 px, a pasek z padding-bottom dokładnie 117 px */
.zakladki[data-zakladki="poziome"] .zakl-tab::after{
  content:"";position:absolute;inset-inline:0;top:100%;
  height:2px;background:var(--zakl-tor);
  transition:height var(--zakl-czas) ease,background-color var(--zakl-czas) ease;
}
.zakladki[data-zakladki="poziome"] .zakl-tab:hover{color:var(--akcent)}
.zakladki[data-zakladki="poziome"] .zakl-tab:hover::after{background:var(--akcent)}
/* Wzorzec różnicuje aktywną zakładkę wyłącznie grubością krawędzi. Dokładamy
   pogrubienie etykiety, żeby stan nie zależał od samego koloru (WCAG 1.4.1).
   Zapas szerokości na to jest: najszersza etykieta ma 161 px w polu 271 px
   (światło 243 px), a waga 600 dokłada ok. 2% — zmierzone canvas measureText
   w Public Sans, nie oszacowane. */
.zakladki[data-zakladki="poziome"] .zakl-tab[aria-selected="true"]{
  color:var(--akcent);font-weight:600}
.zakladki[data-zakladki="poziome"] .zakl-tab[aria-selected="true"]::after{
  height:8px;background:var(--akcent)}
/* Odziedziczona obwódka ogniska ma outline-offset 3 px, więc jej dolna krawędź
   rysuje się dokładnie na tealowym pasku stanu aktywnej zakładki: teal na tealu
   to 1:1 i kreska znika. Aktywna zakładka dostaje więc obwódkę w --ink
   (rachunek: #2D2D2D na bieli 13,58:1, na --wash 12,13:1, na tealu 1,39:1 —
   ale na teal trafia wyłącznie ten fragment, który i tak leżałby na pasku). */
.zakladki[data-zakladki="poziome"] .zakl-tab[aria-selected="true"]:focus-visible{
  outline-color:var(--ink)}

/* panel: 1340 = 655 + 30 + 655; obraz 16:9 → 655 / 16 × 9 = 368,44 px
   rachunek wysokości panelu: 20 + 368,44 + 20 = 408,44 ≈ 408 px */
.zakladki[data-zakladki="poziome"] .zakl-panel{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:var(--zakl-przerwa);
  align-items:center;      /* przegląd 16.09.2026: tekst na 3 zdania przy zdjęciu 368 px
                              zostawiał pustkę pod sobą; wyśrodkowanie w pionie zamyka ją
                              bez dopisywania treści, której nie mamy */
  padding-block:28px;
}
.zakladki[data-zakladki="poziome"] .zakl-panel .zakl-tresc{padding:8px 24px 8px 0}

/* =====================================================================
   5. WARIANT PIONOWY — lista 427 px + panel tekstowy 913 px
   rachunek wiersza:  427 + 15 + 913 = 1355 px
   rachunek pozycji:  15 + 27 + 15 + 1 = 58 px;  5 × 58 = 290 px
   rachunek w pionie: 24 + 290 + 24 = 338 px
   Siatka wisi na .zakl-gotowe: przed startem skryptu (i gdy skryptu nie ma)
   kontener zostaje blokiem i panele stoją jeden pod drugim.
   ===================================================================== */
.zakladki.zakl-gotowe[data-zakladki="pionowe"]{
  display:grid;
  grid-template-columns:minmax(0,var(--zakl-lista)) minmax(0,1fr);
  gap:var(--zakl-odstep);
  align-items:stretch;                  /* dół obu kolumn na jednej linii */
  margin-inline:calc(var(--zakl-wyciek) * -1);
  padding-block:24px;
}
.zakladki[data-zakladki="pionowe"] .zakl-pasek{display:flex;flex-direction:column}
.zakladki[data-zakladki="pionowe"] .zakl-tab{
  justify-content:flex-start;
  padding:var(--zakl-pad);
  font-size:18px;line-height:1.5;        /* rachunek: 18 × 1,5 = 27 px */
  color:var(--ink);
  border-bottom:1px solid transparent;
}
.zakladki[data-zakladki="pionowe"] .zakl-tab:hover{
  background:var(--wash);color:var(--akcent);border-bottom-color:var(--line)}
/* U wzorca aktywna pozycja ma tekst CZARNY na wypełnieniu akcentem. U nas
   czerń na #4B1E9E daje 2,12:1 i nie przechodzi AA, więc tekst jest biały:
   rachunek 9,92:1. Pogrubienie do 600 to druga, niekolorowa cecha stanu. */
.zakladki[data-zakladki="pionowe"] .zakl-tab[aria-selected="true"],
.zakladki[data-zakladki="pionowe"] .zakl-tab[aria-selected="true"]:hover{
  background:var(--akcent);color:var(--paper);font-weight:600;
  border-bottom-color:var(--akcent)}
/* Obwódka ogniska na wypełnieniu tealem: biała i wsunięta do środka.
   Teal na tealu to 1:1, biel na tealu 9,92:1. */
.zakladki[data-zakladki="pionowe"] .zakl-tab[aria-selected="true"]:focus-visible{
  outline-color:var(--paper);outline-offset:-6px}
.zakladki[data-zakladki="pionowe"] .zakl-panel{padding-block:0}
/* Wyrównanie dołu kolumn robimy siatką, nie sztywną wysokością. Sztywne
   min-height:290px wynikało z rachunku 5 × 58 px i rozjeżdżało się przy innej
   liczbie zakładek (przy trzech zostawiało 116 px dziury, przy siedmiu było
   za niskie), a przy realnej treści 168–197 px zostawiało do 122 px pustego
   pola pod tekstem. Teraz kolumny rozciągają się do wysokości wyższej z nich. */
.zakladki.zakl-gotowe[data-zakladki="pionowe"] .zakl-panel{min-height:0}

/* =====================================================================
   6. STAN PRZED SKRYPTEM I BEZ SKRYPTU
   Panele stoją jeden pod drugim jako zwykłe sekcje, rozdzielone kreską.
   To widzi ktoś z wyłączonym JavaScriptem i ktoś, komu zakladki.js się nie
   pobrał — nic nie znika i nie zostaje martwy przycisk.

   Wstępne chowanie (poniżej) działa TYLKO wtedy, gdy wbudowany skrypt z <head>
   zdążył postawić .js-zakl na <html>. Bez niego strona przed startem
   zakladki.js jest o ok. 2,4 tys. px wyższa niż po nim, czyli pasek przewijania
   skacze po pierwszym malowaniu. Trzy wyjścia awaryjne zdejmują to chowanie:
     - zakladki.js kończy budowę i stawia .zakl-gotowe,
     - przywroc() po wyjątku stawia .zakl-odpuszczone,
     - nasłuch load w <head> stawia .zakl-odpuszczone, gdy skrypt w ogóle
       się nie pobrał.
   ===================================================================== */
/* Selektor przez rodzeństwo, nie przez :first-child — pasek zakładek wchodzi
   jako pierwsze dziecko kontenera, więc :first-child przestałby wskazywać panel
   w chwili, w której skrypt zdąży wstawić pasek, a jeszcze nie postawić klasy. */
.js-zakl .zakladki:not(.zakl-gotowe):not(.zakl-odpuszczone) > .zakl-panel ~ .zakl-panel{
  display:none}
.zakladki:not(.zakl-gotowe) .zakl-panel + .zakl-panel{
  margin-top:34px;border-top:1px solid var(--line);padding-top:34px}

/* Zabezpieczenie chowania. Skrypt wstrzykuje regułę
   [data-zakladki] > [data-etykieta][hidden]{display:none} o swoistości 0-3-0,
   a nasze siatki paneli mają 0-3-0 i 0-4-0. Zapisujemy chowanie jeszcze raz,
   wyżej, żeby o kolejności nie decydowało to, w którym momencie skrypt dołoży
   swój <style>. Musi stać PO regułach z sekcji 4 i 5. */
.zakladki[data-zakladki="poziome"] .zakl-panel[hidden],
.zakladki[data-zakladki="pionowe"] .zakl-panel[hidden]{display:none}

/* =====================================================================
   7. SEKCJA NOCNA — ten sam komponent na tle --deep
   rachunki dla tego tła: #D9D2EA na --deep = 12,69:1;
   --akcent-noc #2EF7A7 na --deep = 9,00:1; --deep na --akcent-noc = 9,00:1
   ===================================================================== */
.sekcja--noc .zakladki{--zakl-tor:#2B1F4D}
.sekcja--noc .zakl-tab{color:#D9D2EA}
.sekcja--noc .zakl-tab:focus-visible{outline-color:var(--akcent-noc)}
/* Panel poziomy nie ma w środku nic ogniskowalnego, więc skrypt daje mu
   tabindex="0" — jest realnym przystankiem Tab i jego obwódka też musi być
   widoczna: --akcent na --deep to 1,8:1, --akcent-noc na --deep 9,0:1. */
.sekcja--noc .zakl-panel:focus-visible{outline-color:var(--akcent-noc)}
.sekcja--noc .zakl-tresc p{color:#D9D2EA}
.sekcja--noc .zakl-num{color:var(--akcent-noc)}
.sekcja--noc .zakl-panel .wiecej{color:var(--akcent-noc)}
.sekcja--noc .zakl-panel .wiecej:hover{color:#fff}
.sekcja--noc .zakl-foto{background:rgba(199,220,218,.08)}
.sekcja--noc .zakladki[data-zakladki="poziome"] .zakl-tab:hover{color:var(--akcent-noc)}
.sekcja--noc .zakladki[data-zakladki="poziome"] .zakl-tab:hover::after{
  background:var(--akcent-noc)}
.sekcja--noc .zakladki[data-zakladki="poziome"] .zakl-tab[aria-selected="true"]{color:#fff}
.sekcja--noc .zakladki[data-zakladki="poziome"] .zakl-tab[aria-selected="true"]::after{
  background:var(--akcent-noc)}
.sekcja--noc .zakladki[data-zakladki="pionowe"] .zakl-tab:hover{
  background:rgba(46,247,167,.10);color:var(--akcent-noc);border-bottom-color:#2B1F4D}
.sekcja--noc .zakladki[data-zakladki="pionowe"] .zakl-tab[aria-selected="true"],
.sekcja--noc .zakladki[data-zakladki="pionowe"] .zakl-tab[aria-selected="true"]:hover{
  background:var(--akcent-noc);color:var(--deep);border-bottom-color:var(--akcent-noc)}
.sekcja--noc .zakladki[data-zakladki="pionowe"] .zakl-tab[aria-selected="true"]:focus-visible{
  outline-color:var(--deep)}
.sekcja--noc .zakladki:not(.zakl-gotowe) .zakl-panel + .zakl-panel{border-top-color:#2B1F4D}

/* =====================================================================
   8. ZAKRESY RESPONSYWNE — 1100 i 860, jak w reszcie arkusza
   ===================================================================== */
@media (max-width:1100px){
  .zakladki{
    --zakl-wyciek:0px;          /* moduł 271 px traci sens, wyciek zbędny */
    --zakl-przerwa:24px;
    --zakl-lista:34%;           /* lista przestaje być sztywna */
  }
  .zakladki[data-zakladki="poziome"] .zakl-tab{min-height:96px;padding:8px 12px}
}

/* Poniżej 860 zakładki poziome stają się listą pionową — nie paskiem
   przewijanym w poziomie. Powody: (1) polskie etykiety są długie i w wąskim
   pasku trzeba by je przycinać; (2) pasek przewijany chowa pozycje bez
   widocznej zapowiedzi i wymusza gest poziomy wewnątrz strony przewijanej
   pionowo; (3) wariant pionowy już w tym komponencie jest, więc na małym
   ekranie zostaje jeden model obsługi zamiast dwóch. */
@media (max-width:860px){
  .zakladki{--zakl-odstep:0px;--zakl-lista:auto}

  .zakladki.zakl-gotowe[data-zakladki="pionowe"]{
    display:block;padding-block:0;margin-inline:0}
  .zakladki.zakl-gotowe[data-zakladki="pionowe"] .zakl-panel{
    min-height:0;margin-top:24px}

  .zakladki[data-zakladki="poziome"] .zakl-pasek{
    display:flex;flex-direction:column;
    margin-inline:0;padding-bottom:0;
    border-top:1px solid var(--line)}
  .zakladki[data-zakladki="poziome"] .zakl-tab{
    justify-content:flex-start;text-align:left;
    min-height:0;padding:var(--zakl-pad);
    font-size:17px;line-height:1.5;color:var(--ink);
    border-bottom:1px solid var(--line)}
  .zakladki[data-zakladki="poziome"] .zakl-tab::after{content:none}
  .zakladki[data-zakladki="poziome"] .zakl-tab:hover{
    background:var(--wash);color:var(--akcent)}
  .zakladki[data-zakladki="poziome"] .zakl-tab[aria-selected="true"],
  .zakladki[data-zakladki="poziome"] .zakl-tab[aria-selected="true"]:hover{
    background:var(--akcent);color:var(--paper);font-weight:600;
    border-bottom-color:var(--akcent)}
  .zakladki[data-zakladki="poziome"] .zakl-tab[aria-selected="true"]:focus-visible{
    outline-color:var(--paper);outline-offset:-6px}
  .zakladki[data-zakladki="pionowe"] .zakl-tab{border-bottom-color:var(--line)}

  .zakladki[data-zakladki="poziome"] .zakl-panel{
    grid-template-columns:1fr;gap:20px;padding-block:24px 0}
  .zakl-tresc p{font-size:17px}
  .zakl-panel .wiecej{font-size:17px}
}

/* =====================================================================
   9. RUCH I DRUK
   ===================================================================== */
@media (prefers-reduced-motion:reduce){
  .zakl-tab,
  .zakl-panel .wiecej,
  .zakladki[data-zakladki="poziome"] .zakl-tab::after{transition:none}
}
@media print{
  /* na papierze nie ma czym klikać: pasek znika, wszystkie panele wracają */
  .zakladki[data-zakladki] .zakl-pasek{display:none}
  .zakladki.zakl-gotowe[data-zakladki="pionowe"]{
    display:block;padding-block:0;margin-inline:0}
  .zakladki.zakl-gotowe[data-zakladki="pionowe"] .zakl-panel{min-height:0}
  .zakladki[data-zakladki="poziome"] .zakl-panel[hidden]{display:grid}
  .zakladki[data-zakladki="pionowe"] .zakl-panel[hidden]{display:block}
  .zakladki .zakl-panel + .zakl-panel{
    margin-top:20px;border-top:1px solid var(--line);padding-top:20px}
}

/* =====================================================================
   KOMPONENTY STRON GENEROWANYCH (tematy, usługi, firma) — 17.09.2026
   Wzorce z pomiarów strony referencyjnej z 16.09.2026 (docs/struktura-nawigacji.md):
   lista podstron w dwóch kolumnach z szewronem (Explore, 18 pozycji na hubie
   usług; 14 na hubie tematów), para tekst + zdjęcie w dwóch kolumnach (About us,
   Careers), jedna wyróżniona liczba bez ozdobników (About us), para kart
   odsyłających na jasnym tle (Careers / Press room).
   ===================================================================== */
.lista-szewron{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 28px}
.lista-szewron li{margin:0}
/* Siatka, nie flex: węzeł tekstowy ląduje w pierwszej komórce, <small> pod nim, szewron w drugiej
   kolumnie na wysokość obu wierszy. Flex ustawiał <small> obok tekstu (render 17.09.2026). */
.lista-szewron a,.lista-szewron span.poz{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;column-gap:16px;
  min-height:56px;padding:12px 18px;border:1px solid var(--line);background:var(--paper);
  font-weight:600;font-size:16px;line-height:1.35;color:var(--ink);transition:border-color .16s,color .16s}
.lista-szewron a::after{content:"";grid-column:2;grid-row:1 / span 2;width:8px;height:8px;border-right:2px solid var(--akcent);border-bottom:2px solid var(--akcent);transform:rotate(-45deg)}
.lista-szewron a > small{grid-column:1}
.lista-szewron a:hover{border-color:var(--akcent);color:var(--akcent)}
.lista-szewron small{display:block;font-weight:400;font-size:14px;color:var(--muted);margin-top:2px}
.lista-szewron--1{grid-template-columns:minmax(0,1fr)}

.dwie-kolumny{display:grid;grid-template-columns:minmax(0,58fr) minmax(0,42fr);gap:48px;align-items:center}
.dwie-kolumny--foto-lewo .dwie-kolumny-foto{order:-1}
.dwie-kolumny-foto{margin:0;overflow:hidden;background:var(--wash);aspect-ratio:4/3}
.dwie-kolumny-foto img{width:100%;height:100%;object-fit:cover}
.dwie-kolumny p{font-size:17px;line-height:1.6;color:var(--body);margin:0}
.dwie-kolumny p + p{margin-top:14px}
.dwie-kolumny .h-sekcji{margin-bottom:16px}

.liczba{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:40px;align-items:center;
  padding:40px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.liczba b{font-family:var(--serif);font-weight:400;font-size:clamp(56px,7vw,96px);line-height:1;letter-spacing:-.02em;color:var(--akcent)}
.liczba p{margin:0;font-size:22px;line-height:1.4;color:var(--ink)}

.etapy{list-style:none;margin:0;padding:0;counter-reset:etap;display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:32px}
.etapy li{counter-increment:etap;padding-top:14px;border-top:2px solid var(--akcent)}
.etapy li::before{content:counter(etap,decimal-leading-zero);display:block;font-size:13px;font-weight:700;letter-spacing:.1em;color:var(--akcent);margin-bottom:10px}
.etapy h3{margin:0 0 8px;font-size:20px;line-height:1.3;color:var(--ink)}
.etapy p{margin:0;font-size:16px;line-height:1.55;color:var(--body)}

.pas-miekki{background:var(--wash);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.pas-miekki .wrap{padding-top:44px;padding-bottom:44px;display:flex;justify-content:space-between;align-items:center;gap:32px;flex-wrap:wrap}
.pas-miekki h2{font-family:var(--serif);font-weight:400;font-size:30px;margin:0 0 6px;color:var(--ink)}
.pas-miekki p{margin:0;color:var(--body);max-width:44em}
.pas-miekki .btn{background:var(--akcent);color:#fff;padding:14px 28px;font-weight:600;white-space:nowrap}

.karty-odsylacze{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:28px}
.karty-odsylacze article{background:var(--wash);padding:32px 30px 30px;border-left:6px solid var(--akcent-soft);display:flex;flex-direction:column;gap:12px}
.karty-odsylacze h3{margin:0;font-family:var(--serif);font-weight:400;font-size:28px;line-height:1.2;color:var(--ink)}
.karty-odsylacze p{margin:0;color:var(--body);font-size:16px;line-height:1.55}
.karty-odsylacze .btn{align-self:flex-start;margin-top:auto;background:var(--akcent);color:#fff;padding:12px 22px;font-weight:600;font-size:15px}

.dane-tabela{border-collapse:collapse;width:100%;max-width:44em;font-size:16px}
.dane-tabela th,.dane-tabela td{text-align:left;padding:12px 16px 12px 0;border-bottom:1px solid var(--line);vertical-align:top}
.dane-tabela th{font-weight:600;color:var(--ink);width:11em;white-space:nowrap}
.dane-tabela td{color:var(--body)}

/* karty dowodowe poza stronami branżowymi (tematy, usługi): ten sam system, co .dowod w generatorze branż */
.dowody-mini{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:28px}
.dowody-mini article{background:var(--paper);border-left:6px solid var(--akcent);padding:22px 24px 24px;display:flex;flex-direction:column;gap:12px}
.dowody-mini article.zbiorcza{border-left-color:var(--akcent-soft)}
.dowody-mini h3{margin:0;font-size:22px;line-height:1.3;color:var(--ink)}
.dowody-mini p{margin:0;font-size:16px;line-height:1.58;color:var(--body)}
.dowody-mini .znaczniki{display:flex;flex-wrap:wrap;gap:6px 8px;margin-top:auto;padding-top:6px}
.dowody-mini .znaczniki span{font-size:12.5px;line-height:1.4;color:var(--muted);border:1px solid var(--line);padding:3px 9px}
.dowody-wiecej{margin:28px 0 0;font-size:16px}
.dowody-wiecej a{font-weight:600;color:var(--akcent);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:4px}
.dowody-wiecej a:hover{color:var(--ink)}
.sekcja--wash .dowody-mini article{background:var(--paper)}
.sekcja:not(.sekcja--wash) .dowody-mini article{background:var(--wash)}

@media (max-width:860px){
  .lista-szewron{grid-template-columns:1fr}
  .dwie-kolumny{grid-template-columns:1fr;gap:24px}
  .dwie-kolumny--foto-lewo .dwie-kolumny-foto{order:0}
  .liczba{grid-template-columns:1fr;gap:12px}
  .pas-miekki .wrap{display:block}
  .pas-miekki .btn{display:inline-block;margin-top:18px}
}

/* Baner wcięty i podtytuł dla stron generowanych (bez klasy .w4): te same reguły, co w szablonie
   branza-energetyka.html (pomiar 23.08.2026), skopiowane skryptem 17.09.2026. */
.hero-str--baner{border-bottom:0}
.hero-str--baner .tresc{padding:36px var(--pad) 32px}
.podtytul{font-size:20px;line-height:1.45;font-weight:400;color:#000;
  margin:15px 0 0;max-width:64em}
.baner{position:relative;aspect-ratio:1340/350;overflow:hidden;background:var(--wash)}
.baner img{width:100%;height:100%;object-fit:cover;object-position:50% 42%}
.baner .znak{position:absolute;top:0;right:0;height:100%;width:min(42%,470px);
  pointer-events:none}
.naglowek-sekcji{max-width:34em;margin-bottom:44px}
.sekcja--pierwsza{padding-top:56px}
@media (max-width:860px){ .baner{aspect-ratio:16/9} .baner .znak{width:52%} }

/* ---------- NAGŁÓWEK NAD KADREM (strona główna) ----------
   Ten sam znacznik i te same wymiary co na podstronach; różni się tylko tłem: przezroczysty
   nad hero, biały tekst, przyciemnienie pod paskiem (biały tekst nad jasnym kadrem schodził
   do 1,41:1). Po przewinięciu poza hero (menu.js dodaje .is-stuck) i przy otwartym menu
   (.has-menu) pasek staje się białym, przypiętym paskiem podstron. Do 18.09.2026 strona
   główna miała własny nagłówek: 84 px, logo 28 px, nawigacja 15,5 px, kontener 1280 px. */
.top--kadr{position:absolute;left:0;right:0;background:transparent;border-bottom:1px solid rgba(255,255,255,.22);
  transition:background .3s ease,border-color .3s ease}
.top--kadr::before{content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(180deg,rgba(10,6,22,.62) 0%,rgba(10,6,22,.28) 70%,rgba(10,6,22,0) 100%);transition:opacity .3s ease}
.top--kadr .mark,.top--kadr .nawig a,.top--kadr .nav-btn,.top--kadr .top-prawa a,.top--kadr .jezyk-btn,.top--kadr .menu-btn{
  color:#fff;text-shadow:0 1px 12px rgba(10,6,22,.55);transition:color .3s ease}
/* --akcent na ciemnym kadrze daje 1,8:1, więc stan wskazania idzie w miętę */
.top--kadr .nawig a:hover,.top--kadr .nav-btn:hover,.top--kadr .nav-btn[aria-expanded="true"]{
  color:var(--akcent-noc);border-bottom-color:var(--akcent-noc)}
.top--kadr.is-stuck,.top--kadr.has-menu{position:fixed;background:var(--paper);border-bottom-color:var(--line);
  box-shadow:0 1px 14px rgba(15,10,31,.08)}
.top--kadr.is-stuck::before,.top--kadr.has-menu::before{opacity:0}
.top--kadr.is-stuck .mark,.top--kadr.is-stuck .nawig a,.top--kadr.is-stuck .nav-btn,.top--kadr.is-stuck .menu-btn,
.top--kadr.has-menu .mark,.top--kadr.has-menu .nawig a,.top--kadr.has-menu .nav-btn,.top--kadr.has-menu .menu-btn{
  color:var(--ink);text-shadow:none}
.top--kadr.is-stuck .top-prawa a,.top--kadr.has-menu .top-prawa a,.top--kadr.is-stuck .jezyk-btn,.top--kadr.has-menu .jezyk-btn{color:var(--muted);text-shadow:none}
/* lista języków nad kadrem: panel jest biały, więc pozycje w kolorze tekstu, bez cienia z nagłówka */
.top--kadr .jezyk-lista a,.top--kadr .jezyk-lista span{color:var(--ink);text-shadow:none}
.top--kadr .jezyk-lista a:hover,.top--kadr .jezyk-lista a:focus-visible,.top--kadr .jezyk-lista [aria-current]{color:var(--akcent)}
.top--kadr.is-stuck .nawig a:hover,.top--kadr.is-stuck .nav-btn:hover,.top--kadr.is-stuck .nav-btn[aria-expanded="true"],
.top--kadr.has-menu .nawig a:hover,.top--kadr.has-menu .nav-btn:hover,.top--kadr.has-menu .nav-btn[aria-expanded="true"]{
  color:var(--akcent);border-bottom-color:var(--akcent)}

/* ---------- MENU MOBILNE ----------
   Do 18.09.2026 poniżej 860 px nawigacja była tylko ukryta: telefon nie miał żadnego menu.
   Przycisk stoi w znaczniku (szkielet), panel buduje menu.js z tej samej treści co mega menu
   (przyciski i odnośniki .nawig, główne pozycje kolumn .mm), więc jest jedno źródło. */
.menu-btn{display:none;align-items:center;gap:9px;min-width:44px;min-height:44px;padding:0 2px 0 8px;justify-self:end;
  font:600 14px/1 var(--sans);color:var(--ink);background:none;border:0;cursor:pointer}
.menu-btn .kreski{position:relative;width:22px;height:16px;flex:none}
.menu-btn .kreski span{position:absolute;left:0;right:0;height:2px;background:currentColor;border-radius:1px;
  transition:transform .26s cubic-bezier(.22,.61,.36,1),opacity .2s ease}
.menu-btn .kreski span:nth-child(1){top:0}
.menu-btn .kreski span:nth-child(2){top:7px}
.menu-btn .kreski span:nth-child(3){top:14px}
.menu-btn[aria-expanded="true"] .kreski span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.menu-btn[aria-expanded="true"] .kreski span:nth-child(2){opacity:0}
.menu-btn[aria-expanded="true"] .kreski span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
@media (max-width:860px){.js .menu-btn{display:inline-flex}}
.menu-mobilne{position:fixed;left:0;right:0;top:65px;bottom:0;z-index:49;background:var(--paper);
  overflow-y:auto;overscroll-behavior:contain;padding:4px var(--pad) 48px;border-top:1px solid var(--line)}
.menu-mobilne[hidden]{display:none}
.menu-mobilne ul{list-style:none;margin:0;padding:0}
.menu-mobilne .mm-lista > li{border-bottom:1px solid var(--line)}
.menu-mobilne .mm-lista > li > a,.menu-mobilne .mm-grupa > button{display:flex;align-items:center;justify-content:space-between;
  width:100%;min-height:54px;padding:14px 0;font:500 17px/1.3 var(--sans);color:var(--ink);background:none;border:0;
  text-align:left;cursor:pointer}
.menu-mobilne .mm-lista > li > a[aria-current]{color:var(--akcent)}
.menu-mobilne .mm-grupa > button .chev{transition:transform .26s cubic-bezier(.22,.61,.36,1)}
.menu-mobilne .mm-grupa > button[aria-expanded="true"]{color:var(--akcent)}
.menu-mobilne .mm-grupa > button[aria-expanded="true"] .chev{transform:rotate(180deg)}
.menu-mobilne .mm-grupa ul{padding:0 0 10px 14px;border-left:2px solid var(--wash);margin:0 0 12px}
.menu-mobilne .mm-grupa ul[hidden]{display:none}
.menu-mobilne .mm-grupa li a{display:block;min-height:44px;padding:10px 0;font-size:15.5px;line-height:1.35;color:var(--body)}
.menu-mobilne .mm-grupa li a.wszystkie{color:var(--akcent);font-weight:600}
body.menu-otwarte{overflow:hidden}
@media (prefers-reduced-motion:reduce){.menu-btn .kreski span,.menu-mobilne .mm-grupa > button .chev{transition:none}}

/* ---------- STOPKA: MARKA ----------
   Logo w stopce na każdej stronie (do 18.09.2026 miała je tylko strona główna, w innej stopce). */
.stopka .stopka-marka{grid-column:1 / -1;padding-bottom:20px;border-bottom:1px solid #DEDEDE}
.stopka .stopka-marka .mark{display:inline-block;vertical-align:middle}
/* Motto marki obok logo (właściciel 26.10.2026: motto z LinkedIna i dokumentów także na stronie; tekst z ALIAX_FIRMA.motto, ten sam w każdym języku). */
.stopka .stopka-marka .stopka-motto{display:inline-block;margin:0 0 0 20px;vertical-align:middle;color:var(--muted);font-size:14.5px;letter-spacing:.01em}
@media (max-width:600px){.stopka .stopka-marka .stopka-motto{display:block;margin:10px 0 0}}

/* ---------- WARIANT B TREŚCI (20.09.2026) ----------
   Komponenty stron wariantu (prototyp/b/): przyciski w hero, odnośnik „Wszystkie usługi" w mega menu,
   lista opisowa „Co robimy", pasek trzech liczb, karta osoby i pas „Jak zaczynamy" (układ niski z 25.09.2026,
   wybrany z trzech wariantów, od 14.10.2026 bazowy). Wyłącznie tokeny kolorów z :root. */
.hero-str .przyciski{display:flex;flex-wrap:wrap;gap:12px;margin:24px 0 0}
.hero-str .przyciski .btn{display:inline-block;background:var(--akcent);color:#fff;padding:13px 26px;font-weight:600;font-size:15.5px;
  border:2px solid var(--akcent);white-space:nowrap}
.hero-str .przyciski .btn--obrys{background:transparent;color:var(--akcent)}
.hero-str .przyciski .btn:hover{background:var(--deep);border-color:var(--deep);color:#fff}
.mm .kolumny .wszystkie-uslugi{grid-column:1 / -1;margin:0 0 -6px;font-size:14.5px;font-weight:600}
.mm .kolumny .wszystkie-uslugi a{color:var(--akcent);display:inline-block;padding-bottom:6px;border-bottom:2px solid var(--akcent-soft)}
.mm .kolumny .wszystkie-uslugi a:hover{border-bottom-color:var(--akcent)}
.lista-opisowa{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:28px 40px}
.lista-opisowa li{padding-top:14px;border-top:1px solid var(--line)}
.lista-opisowa h3{margin:0 0 8px;font-size:20px;line-height:1.3;color:var(--ink)}
.lista-opisowa p{margin:0;font-size:16px;line-height:1.55;color:var(--body)}
.technologie{margin:36px 0 0;font-size:15px;line-height:1.55;color:var(--muted);max-width:60em}
.technologie b{font-weight:600;color:var(--ink)}
.liczby{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:32px;margin:0 0 36px}
.liczby b{display:block;font-family:var(--serif);font-weight:400;font-size:clamp(44px,5vw,72px);line-height:1;letter-spacing:-.02em;color:var(--akcent)}
.liczby p{margin:10px 0 0;font-size:17px;line-height:1.4;color:var(--ink)}
.osoby{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:28px}
.osoba{background:var(--wash);border-left:6px solid var(--akcent);padding:28px 30px 26px;display:flex;flex-direction:column;gap:8px}
.osoba h3{margin:0;font-family:var(--serif);font-weight:400;font-size:28px;line-height:1.2;color:var(--ink)}
.osoba .rola{margin:0;font-size:15px;font-weight:600;color:var(--akcent)}
.osoba .bio{margin:4px 0 0;font-size:16px;line-height:1.55;color:var(--body)}
.osoba .kanaly{list-style:none;margin:8px 0 0;padding:0;display:flex;flex-direction:column;gap:4px;font-size:15.5px;color:var(--body)}
.osoba .kanaly a{color:var(--ink);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:4px}
.osoba .kanaly a:hover{color:var(--akcent)}
.jak-zaczynamy{background:var(--akcent);color:#fff}
.jak-zaczynamy .wrap{padding:44px var(--pad) 40px;display:grid;grid-template-columns:auto 1fr;column-gap:36px;grid-template-areas:"h h" "k k" "z z" "a c";align-items:center}
.jak-zaczynamy h2{grid-area:h;font-family:var(--serif);font-weight:400;font-size:28px;margin:0 0 20px;color:#fff}
.jak-zaczynamy .kroki{grid-area:k;list-style:none;margin:0;padding:0;counter-reset:krok;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px 32px}
.jak-zaczynamy .kroki li{counter-increment:krok;padding-top:12px;border-top:2px solid var(--akcent-soft)}
.jak-zaczynamy .kroki li::before{content:counter(krok,decimal-leading-zero);display:block;font-size:13px;font-weight:700;letter-spacing:.1em;color:var(--akcent-noc);margin-bottom:6px}
.jak-zaczynamy .kroki h3{margin:0 0 6px;font-size:18px;line-height:1.3;color:#fff}
.jak-zaczynamy .kroki p{margin:0;font-size:15px;line-height:1.55;color:var(--akcent-soft)}
.jak-zaczynamy .zdanie{grid-area:z;margin:22px 0 0;font-size:15.5px;line-height:1.55;color:var(--akcent-soft);max-width:44em}
.jak-zaczynamy .akcja{grid-area:a;margin:18px 0 0}
.jak-zaczynamy .btn{display:inline-block;background:#fff;color:var(--akcent);padding:12px 24px;font-weight:600;white-space:nowrap}
.jak-zaczynamy .btn:hover{background:var(--akcent-noc);color:var(--deep)}
.jak-zaczynamy .kanaly{grid-area:c;margin:18px 0 0;display:flex;flex-wrap:wrap;gap:8px 32px;font-size:15px;color:var(--akcent-soft)}
.jak-zaczynamy .kanaly a{color:#fff;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:4px}
.jak-zaczynamy .kanaly a:hover{color:var(--akcent-noc)}
@media (max-width:860px){
  .liczby{gap:20px}
  .jak-zaczynamy .wrap{display:block}
  .jak-zaczynamy .kroki{grid-template-columns:1fr}
}

/* Publikacje (wariant B, 20.09.2026): lista, strona wpisu, blok na stronie głównej. Tylko tokeny. */
.karta .meta,.card .meta,.publikacja-meta{margin:0;font-family:var(--mono);font-size:12.5px;letter-spacing:.02em;color:var(--muted)}
.karta--publikacja .h-karty a{color:var(--ink);text-decoration:none}
.karta--publikacja .h-karty a:hover,.card h3 a:hover{color:var(--akcent)}
.karta .wiecej,.karty-odsylacze .wiecej{margin-top:auto;font-weight:600;color:var(--akcent);text-decoration:none}
.karta .wiecej:hover,.karty-odsylacze .wiecej:hover{text-decoration:underline}
/* Zasada siatki kart ze zdjęciem (25.09.2026): tory subgrid, żeby tytuły, opisy i odnośniki stały w jednej linii w rzędzie. */
@supports (grid-template-rows:subgrid){
  .karty>.karta:has(.foto){display:grid;grid-template-rows:subgrid;grid-row:span 5;row-gap:12px;align-content:start}
  .karty>.karta--podusluga{grid-row:span 4}   /* zdjęcie, tytuł, lead, odnośnik (bez wiersza meta) */
  .karty>.karta:has(.foto)>.wiecej{margin-top:0;align-self:start}
}
/* ---------- PUBLIKACJA: UKŁAD C3 (decyzja właściciela 25.10.2026 po pięciu układach i poprawkach C2–C6, docs/publikacje-warianty-2026-10-25.html) ----------
   Etykieta usługi, tytuł i lead na całą szerokość; niżej lewa kolumna przyklejona (autor, data, czas czytania, spis śródtytułów, usługa),
   prawa ze zdjęciem z podpisem źródła i tekstem szeryfem 19,5 px w kolorze nagłówków w kolumnie 34 em (ok. 68 znaków w wierszu);
   na końcu autor, usługa i dwie inne publikacje. Pomiar z 25.10.2026: szary tekst (--body) w kolumnie 40 em „zlewał się z tłem”.
   Lista i karty na stronie głównej: etykieta usługi, tytuł szeryfem, wiersz autora. Tylko tokeny. */
.pub-kicker{font-family:var(--mono);font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--akcent);text-decoration:none}
.pub-kicker:hover{text-decoration:underline}
.pub-kicker-wiersz{margin:0 0 14px}
.pub-meta{margin:0;font-size:14.5px;line-height:1.4;color:var(--muted);display:flex;flex-wrap:wrap;gap:4px 10px;align-items:baseline}
.pub-meta .autor{color:var(--ink);font-weight:600}
.pub-meta .sep{opacity:.5}
.pub-meta--mala{font-size:13px}
.strona-publikacji .pub-tytul{margin:0 0 14px;font-family:var(--serif);font-weight:400;font-size:clamp(34px,4.4vw,54px);line-height:1.08;max-width:18em;color:var(--ink)}
.strona-publikacji .pub-lead{margin:0 0 36px;font-size:21px;line-height:1.45;color:var(--ink);max-width:36em}
.strona-publikacji .pub-uklad{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,9fr);gap:36px 64px;align-items:start;padding-top:26px;border-top:1px solid var(--line)}
.strona-publikacji .pub-bok{position:sticky;top:88px;font-size:14.5px;color:var(--body)}
.strona-publikacji .pub-bok-autor{margin:0;font-weight:600;color:var(--ink);font-size:16px}
.strona-publikacji .pub-bok-rola{margin:2px 0 14px;color:var(--muted)}
.strona-publikacji .pub-bok-meta{margin:0 0 26px;line-height:1.5}
.strona-publikacji .pub-bok .nadpis{margin:0 0 8px}
.strona-publikacji .pub-spis{list-style:none;margin:0 0 26px;padding:0;counter-reset:sr}
.strona-publikacji .pub-spis li{counter-increment:sr;margin:0 0 6px;padding-left:28px;position:relative;line-height:1.4}
.strona-publikacji .pub-spis li::before{content:counter(sr,decimal-leading-zero);position:absolute;left:0;top:1px;font-family:var(--mono);font-size:11.5px;color:var(--akcent)}
.strona-publikacji .pub-spis a{color:var(--ink);text-decoration:none}
.strona-publikacji .pub-spis a:hover{color:var(--akcent)}
.strona-publikacji .pub-bok-usluga{margin:0}
.strona-publikacji .pub-bok-usluga a{color:var(--akcent);font-weight:600;text-decoration:none}
.strona-publikacji .pub-bok-usluga a:hover{text-decoration:underline}
.strona-publikacji .pub-figura{margin:0 0 30px}
.strona-publikacji .pub-figura img{display:block;width:100%;height:auto}
.strona-publikacji .pub-figura figcaption{margin:10px 0 0;font-size:13px;color:var(--muted)}
.strona-publikacji .pub-tekst{max-width:34em;font-family:var(--serif);font-size:19.5px;line-height:1.6;color:var(--ink)}
.strona-publikacji .pub-tekst p{margin:0 0 1.15em}
.strona-publikacji .pub-tekst h2{font-family:var(--serif);font-weight:400;font-size:28px;line-height:1.2;color:var(--ink);margin:1.6em 0 .6em;scroll-margin-top:90px}
.strona-publikacji .pub-tekst h3{font-family:var(--sans);font-size:19px;font-weight:600;color:var(--ink);margin:1.4em 0 .5em}
.strona-publikacji .pub-tekst ul,.strona-publikacji .pub-tekst ol{margin:0 0 1.15em;padding-left:1.4em}
.strona-publikacji .pub-tekst li{margin:0 0 .45em}
.strona-publikacji .pub-tekst li::marker{color:var(--akcent)}
.strona-publikacji .pub-tekst a{color:var(--akcent);overflow-wrap:anywhere}
.strona-publikacji .pub-tekst strong{color:var(--ink)}
.strona-publikacji .pub-inne{margin-top:44px;padding-top:28px;border-top:1px solid var(--line)}
.strona-publikacji .pub-inne-lista{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px 48px;margin-top:14px}
.strona-publikacji .pub-inne-lista h3{margin:8px 0 8px;font-family:var(--serif);font-weight:400;font-size:24px;line-height:1.2}
.strona-publikacji .pub-inne-lista h3 a{color:var(--ink);text-decoration:none}
.strona-publikacji .pub-inne-lista h3 a:hover{color:var(--akcent)}
.strona-publikacji .pub-inne-lista p{margin:0;font-size:15px;line-height:1.5;color:var(--body)}
.karta--publikacja .h-karty{font-family:var(--serif);font-weight:400;font-size:26px;line-height:1.15}
.card--publikacja h3{font-family:var(--serif);font-weight:400;font-size:26px;line-height:1.15}
.card--publikacja .meta{font-family:var(--sans);font-size:14px;letter-spacing:0}
@media (max-width:860px){
  .strona-publikacji .pub-uklad{grid-template-columns:1fr;gap:26px}
  .strona-publikacji .pub-bok{position:static}
  .strona-publikacji .pub-inne-lista{grid-template-columns:1fr}
  .strona-publikacji .pub-lead{font-size:19px;margin-bottom:26px}
}
.artykul{max-width:40em;font-size:18px;line-height:1.65;color:var(--body)}
.artykul p{margin:0 0 1.15em}
.artykul h2{font-family:var(--serif);font-weight:400;font-size:30px;line-height:1.2;color:var(--ink);margin:1.6em 0 .6em}
.artykul h3{font-size:20px;font-weight:600;color:var(--ink);margin:1.4em 0 .5em}
.artykul ul,.artykul ol{margin:0 0 1.15em;padding-left:1.4em}
.artykul li{margin:0 0 .45em}
.artykul li::marker{color:var(--akcent)}
.artykul a{color:var(--akcent);overflow-wrap:anywhere}
.artykul strong{color:var(--ink)}
.sec .wszystkie{margin:28px 0 0}
@media (max-width:860px){.artykul{font-size:17px}.artykul h2{font-size:26px}}

/* ---------- HUB USŁUG: MOZAIKA ZDJĘĆ (decyzja właściciela 23.10.2026 po dwóch rundach układów, docs/hub-warianty-2026-10-18.html, układ G) ----------
   Tytuł i podtytuł, ściana sześciu kadrów usług z białą etykietą (numer i nazwa; tytuł nie leży na zdjęciu), zakresy w trzech
   kolumnach, szyna wymagań, pas. Bez okruszków i wstępu: pierwszy ekran to zdjęcia. Tylko tokeny. */
.strona-hub .hub-naglowek{padding:34px 0 18px}
.strona-hub .hub-naglowek h1{margin:0;font-family:var(--serif);font-weight:400;font-size:44px;line-height:1.05;color:var(--ink)}
.strona-hub .hub-naglowek p{margin:8px 0 0;font-size:17.5px;color:var(--body);max-width:44em;line-height:1.5}
.strona-hub .mozaika{list-style:none;margin:0 0 8px;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-auto-rows:214px;gap:10px}
.strona-hub .mozaika li{margin:0;position:relative;overflow:hidden;background:var(--wash)}
.strona-hub .mozaika li:nth-child(1){grid-column:span 2;grid-row:span 2}
.strona-hub .mozaika li:nth-child(4),.strona-hub .mozaika li:nth-child(5),.strona-hub .mozaika li:nth-child(6){grid-column:span 2}
.strona-hub .mozaika a{display:block;height:100%;color:var(--ink);text-decoration:none}
.strona-hub .mozaika img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .6s cubic-bezier(.22,.61,.36,1)}
.strona-hub .mozaika a:hover img{transform:scale(1.04)}
.strona-hub .mozaika .etyk{position:absolute;left:0;bottom:0;background:var(--paper);padding:12px 18px 12px 16px;max-width:calc(100% - 24px);display:grid;grid-template-columns:auto 1fr;gap:0 12px;align-items:baseline;border-top:3px solid var(--akcent)}
.strona-hub .mozaika .nr{font-family:var(--mono);font-size:12px;color:var(--akcent)}
.strona-hub .mozaika .nazwa{font-family:var(--serif);font-size:22px;line-height:1.15}
.strona-hub .mozaika li:nth-child(1) .nazwa{font-size:30px}
.strona-hub .mozaika a:hover .nazwa{color:var(--akcent)}
.strona-hub .zakresy-hub{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:40px 44px;margin-top:30px}
.strona-hub .zakresy-hub .nr{margin:0;font-family:var(--mono);font-size:12px;letter-spacing:.1em;color:var(--akcent)}
.strona-hub .zakresy-hub h3{margin:4px 0 8px;font-family:var(--serif);font-weight:400;font-size:24px;line-height:1.15;color:var(--ink)}
.strona-hub .zakresy-hub h3 a{color:inherit;text-decoration:none}
.strona-hub .zakresy-hub h3 a:hover{color:var(--akcent)}
.strona-hub .zakresy-hub p{margin:0 0 12px;font-size:15px;color:var(--body);line-height:1.5}
.strona-hub .hub-zakresy{list-style:none;margin:0;padding:0}
.strona-hub .hub-zakresy li{border-top:1px solid var(--line)}
.strona-hub .hub-zakresy li:last-child{border-bottom:1px solid var(--line)}
.strona-hub .hub-zakresy a{display:block;padding:7px 0;color:var(--ink);text-decoration:none;font-size:15px}
.strona-hub .hub-zakresy a:hover{color:var(--akcent)}
@media (max-width:900px){
  .strona-hub .mozaika{grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:170px}
  .strona-hub .mozaika li:nth-child(1){grid-column:span 2;grid-row:span 1}
  .strona-hub .mozaika li:nth-child(4),.strona-hub .mozaika li:nth-child(5),.strona-hub .mozaika li:nth-child(6){grid-column:span 1}
  .strona-hub .mozaika .nazwa,.strona-hub .mozaika li:nth-child(1) .nazwa{font-size:18px}
  .strona-hub .zakresy-hub{grid-template-columns:1fr;gap:30px}
}
@media (prefers-reduced-motion:reduce){.strona-hub .mozaika img{transition:none}.strona-hub .mozaika a:hover img{transform:none}}

/* ---------- ŚCIEŻKA USŁUG I SZYNA (25.09.2026): sekcja „Co robimy” C na stronie głównej B i hub usług ----------
   .sciezka: pięć usług w kolejności projektu na jednej linii z kropkami; .sciezka--pion: wersja hubu, pionowa, ze zdjęciem;
   .szyna--trzy: wymagania prawne „w trakcie całego projektu” w trzech grupach. Tylko tokeny. */
.sciezka{list-style:none;margin:44px 0 0;padding:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));column-gap:28px;position:relative}
.sciezka::before{content:"";position:absolute;left:0;right:0;top:8px;height:2px;background:var(--akcent-soft)}
.sciezka a{display:block;color:inherit}
.sciezka .krok{display:block;position:relative;padding-top:30px;font-family:var(--mono);font-size:12.5px;letter-spacing:.06em;color:var(--akcent)}
.sciezka .krok::before{content:"";position:absolute;left:0;top:0;width:18px;height:18px;border-radius:50%;background:var(--akcent);box-shadow:0 0 0 4px var(--paper)}
.sciezka .nazwa{display:block;margin-top:8px;font-size:19px;font-weight:700;line-height:1.25;color:var(--ink);transition:color .2s}
.sciezka .opis{display:block;margin-top:8px;font-size:14.5px;line-height:1.5;color:var(--body)}
.sciezka a:hover .nazwa,.sciezka a:focus-visible .nazwa{color:var(--akcent)}
.sciezka--pion{grid-template-columns:1fr;margin-top:12px;border-left:2px solid var(--akcent-soft);padding-left:36px}
.sciezka--pion::before{display:none}
.sciezka--pion li{padding:30px 0;border-bottom:1px solid var(--line)}
.sciezka--pion li:last-child{border-bottom:0}
.sciezka--pion a{display:grid;grid-template-columns:minmax(0,1fr) 320px;column-gap:44px;align-items:center}
.sciezka--pion .tresc-kroku{display:block}
.sciezka--pion .krok{padding-top:0}
.sciezka--pion .krok::before{left:-46px;top:0}
.sciezka--pion .nazwa{font-family:var(--serif);font-weight:400;font-size:30px;line-height:1.15;margin-top:8px}
.sciezka--pion .opis{font-size:16.5px;margin-top:10px;max-width:40em}
.sciezka--pion .wiecej{display:inline-block;margin-top:14px;font-weight:600;color:var(--akcent)}
.sciezka--pion .foto{display:block;aspect-ratio:4/3;overflow:hidden;background:var(--wash)}
.sciezka--pion .foto img{width:100%;height:100%;object-fit:cover;transition:transform .5s cubic-bezier(.22,.61,.36,1)}
.sciezka--pion a:hover .foto img{transform:scale(1.03)}
.szyna{display:grid;grid-template-columns:auto minmax(0,1fr) minmax(0,2fr);column-gap:28px;align-items:baseline;margin-top:40px;padding:22px 26px;background:var(--wash);border-left:6px solid var(--akcent);color:inherit}
.szyna .krok{font-family:var(--mono);font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--akcent)}
.szyna .nazwa{font-size:20px;font-weight:700;color:var(--ink);transition:color .2s}
.szyna .opis{font-size:15.5px;line-height:1.5;color:var(--body)}
.szyna:hover .nazwa{color:var(--akcent)}
.szyna--trzy{display:block;padding:26px 28px 24px}
.szyna--trzy .szyna-naglowek{margin:0;display:flex;flex-wrap:wrap;gap:6px 24px;align-items:baseline}
.szyna--trzy .wstep{font-size:16px;line-height:1.5;color:var(--body);max-width:52em}
.szyna--trzy ul{list-style:none;margin:20px 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px 32px}
.szyna--trzy .nazwa{display:block;font-size:17px;font-weight:700;line-height:1.3;color:var(--ink)}
.szyna--trzy .nazwa a{color:inherit;transition:color .2s}
.szyna--trzy .nazwa a:hover,.szyna--trzy .nazwa a:focus-visible{color:var(--akcent)}
.szyna--trzy .opis{display:block;margin-top:6px;font-size:14.5px;line-height:1.5;color:var(--body)}
/* tytuły grup w jednym torze, opisy w drugim (25.09.2026, uwaga właściciela: opisy na jednym poziomie) */
@supports (grid-template-rows:subgrid){
  .szyna--trzy li{display:grid;grid-template-rows:subgrid;grid-row:span 2;row-gap:6px;align-content:start}
  .szyna--trzy .opis{margin-top:0}
}
.szyna--trzy .dopisek{margin:18px 0 0;font-size:13.5px;color:var(--muted)}
@media (max-width:860px){
  .sciezka{grid-template-columns:1fr;row-gap:22px;border-left:2px solid var(--akcent-soft);padding-left:22px}
  .sciezka::before{display:none}
  .sciezka .krok{padding-top:0}
  .sciezka .krok::before{left:-30px;top:2px;width:14px;height:14px}
  .sciezka--pion li{padding:22px 0}
  .sciezka--pion a{grid-template-columns:1fr;row-gap:16px}
  .sciezka--pion .foto{order:-1}
  .sciezka--pion .nazwa{font-size:24px}
  .szyna{grid-template-columns:1fr;row-gap:6px}
  .szyna--trzy ul{grid-template-columns:1fr}
}

/* ---------- PODSTRONA PODUSŁUGI: standard z pomiaru 10 serwisów (26.09.2026, benchmark §9) ----------
   Czołówka barwna z przyciskiem i zdjęciem, sytuacje jako karty, „co robimy” jako numerowane bloki w dwóch
   kolumnach, „co dostajesz” w ramce, etapy, doświadczenie z kartą „Umów spotkanie”, pytania jako blok, rodzeństwo jako karty.
   Motyw wizualny (linia procesu i warstwy koloru) w bloku niżej, pod klasą body.podstrona-pod. */
.hero-pod{background:var(--wash);border-bottom:1px solid var(--line)}
.hero-pod__wrap{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:48px;align-items:center;padding-top:40px;padding-bottom:44px}
.hero-pod .nadpis{margin:0 0 10px}
.hero-pod .nadpis a{color:var(--akcent);text-decoration:none}
.hero-pod .nadpis a:hover{text-decoration:underline}
.hero-pod .h-strony{margin:0}
.hero-pod .podtytul{max-width:32em}
.hero-pod .przyciski{display:flex;flex-wrap:wrap;gap:12px;margin:26px 0 0}
.hero-pod .przyciski .btn{display:inline-block;background:var(--akcent);color:#fff;padding:13px 26px;font-weight:600;font-size:15.5px;border:2px solid var(--akcent);text-decoration:none}
.hero-pod .przyciski .btn--obrys{background:transparent;color:var(--akcent)}
.hero-pod .przyciski .btn:hover{background:var(--deep);border-color:var(--deep);color:#fff}
.hero-pod .baner{aspect-ratio:16/10}
.bloki-numer{list-style:none;margin:0;padding:0;counter-reset:blok;display:grid;grid-template-columns:repeat(auto-fit,minmax(460px,1fr));gap:30px 48px}   /* dwie kolumny po ok. 550 px (pomiar: Pretius, Software Mind) */
.bloki-numer li{counter-increment:blok;padding-top:14px;border-top:2px solid var(--akcent)}
.bloki-numer li::before{content:counter(blok,decimal-leading-zero);display:block;font-size:13px;font-weight:700;letter-spacing:.1em;color:var(--akcent);margin-bottom:10px}
.bloki-numer h3{margin:0 0 8px;font-size:20px;line-height:1.3;color:var(--ink)}
.bloki-numer p{margin:0 0 .8em;font-size:16.5px;line-height:1.6;color:var(--body)}
.bloki-numer p:last-child{margin-bottom:0}
.bloki-numer ul,.bloki-numer ol{margin:.3em 0 0;padding-left:1.3em;font-size:16px;line-height:1.55;color:var(--body)}
.bloki-numer li li{margin:0 0 .35em;padding:0;border:0;counter-increment:none}
.bloki-numer li li::before{content:none}
.dosw-wstep{max-width:40em;font-size:17px;line-height:1.6;color:var(--body);margin:0 0 20px}
.ramka-lista{background:var(--paper);border-left:6px solid var(--akcent);padding:28px 30px 24px}
.ramka-lista .lista-szewron span.poz{font-size:16.5px}
.dosw p{font-size:17px;line-height:1.6;color:var(--body);margin:0 0 14px}
.pytania-blok{list-style:none;margin:0;padding:0;counter-reset:pyt;display:grid;grid-template-columns:repeat(auto-fit,minmax(340px,1fr));gap:18px 32px}
.pytania-blok li{counter-increment:pyt;background:var(--paper);padding:22px 24px 22px 66px;position:relative;font-size:17px;line-height:1.5;color:var(--ink)}
.pytania-blok li::before{content:counter(pyt);position:absolute;left:24px;top:18px;font-family:var(--serif);font-size:28px;line-height:1;color:var(--akcent)}
.zakonczenie{max-width:40em;margin-top:36px;font-size:18px;line-height:1.6;color:var(--body)}
.zakonczenie p{margin:0 0 .8em}
.naglowek-sekcji .odsylacz{margin:10px 0 0;font-size:15.5px}
.naglowek-sekcji .odsylacz a{color:var(--akcent);font-weight:600}
.umow{background:var(--wash);border-left:6px solid var(--akcent);padding:28px 30px 26px;display:flex;flex-direction:column;gap:10px}
.umow h3{margin:0;font-family:var(--serif);font-weight:400;font-size:28px;line-height:1.2;color:var(--ink)}
.umow p{margin:0;font-size:16px;line-height:1.55;color:var(--body)}
.umow .akcja{margin-top:6px}
.umow .btn{display:inline-block;background:var(--akcent);color:#fff;padding:13px 26px;font-weight:600;font-size:15.5px;border:2px solid var(--akcent);text-decoration:none}
.umow .btn:hover{background:var(--deep);border-color:var(--deep)}
.umow .kanal{font-size:15.5px}
.umow .kanal a{color:var(--ink);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:4px}
.hero-pod .baner .znak{width:100%}
@media (max-width:860px){
  .hero-pod__wrap{grid-template-columns:1fr;gap:26px;padding-top:26px;padding-bottom:32px}
  .hero-pod .baner{aspect-ratio:16/9}
  .bloki-numer,.pytania-blok{grid-template-columns:1fr}
}

/* ---------- PODSTRONA PODUSŁUGI: linia procesu i warstwy w dwóch kolorach (finał 04.10.2026) ----------
   Motyw wybrany przez właściciela z siedmiu propozycji (docs/motywy-2026-09-26.html, motyw G = linia procesu z D
   plus warstwy fiolet/mięta z C). Linię rysuje prototyp/linia-procesu.js (svg nad <main>); reguły z klasą
   .linia-gotowa działają dopiero po jej narysowaniu, więc bez JavaScriptu elementy zachowują własne kreski.
   Znak pasów marki pada raz: na zdjęciu czołówki. */
/* Podłoże pod linię: <main> pozycjonowany, svg nad treścią, bez reakcji na mysz; margines na linię po obu stronach. */
.podstrona-pod main#tresc{position:relative}
.podstrona-pod .linia-procesu{position:absolute;left:0;top:0;width:100%;height:100%;pointer-events:none;z-index:3;overflow:visible;display:block}
/* Miejsce na linię: od 1320 px linia biegnie w zewnętrznym marginesie i treść stoi na osi logo; 861–1319 px treść odsuwa się o 40 px. */
@media (min-width:861px) and (max-width:1319px){
  .podstrona-pod .pod-uklad .wrap,.podstrona-pod #jak-zaczynamy .wrap,.podstrona-pod .pas-okruszkow .wrap{padding-left:calc(var(--pad) + 40px);padding-right:calc(var(--pad) + 40px)}
}


/* Czołówka: dolna kreska czołówki zastąpiona linią. */
.podstrona-pod .hero-pod{border-bottom:0}

/* Sytuacje: karty bez tła i lewej belki; ich górną linią jest odgałęzienie linii z pierścieniem (punkt wejścia). */
.podstrona-pod .karty-odsylacze article{background:transparent;border-left:0;border-top:2px solid var(--akcent);padding:30px 0 0}
.podstrona-pod.linia-gotowa .karty-odsylacze article{border-top-color:transparent}
.podstrona-pod .karty-odsylacze h3{font-size:26px}
.podstrona-pod .karty-odsylacze p{font-size:16px}

/* Co robimy: bloki jak dotąd (numer i górna kreska), kręgosłup i szczeble dorysowuje svg. */

/* Co dostajesz: tytuł po prawej, ramka biała z fioletową krawędzią i miętową podkładką (reguły warstw niżej); linia biegnie przy jej prawej krawędzi (na telefonie: lewej). */
.podstrona-pod .ramka-lista{padding:30px 34px 28px}
@media (min-width:861px){
  .podstrona-pod #co-dostajesz .naglowek-sekcji{margin-left:auto;text-align:right}
  .podstrona-pod #co-dostajesz .ramka-lista{margin-right:-20px}
}

/* Przebieg: cztery etapy w jednym rzędzie, bez własnej górnej kreski: siedzą bezpośrednio na linii. */
@media (min-width:861px){
  .podstrona-pod .etapy{grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:32px 28px}
  .podstrona-pod .etapy li{padding-top:20px}
  .podstrona-pod .etapy h3{margin-right:-8px}   /* tytuł etapu może wejść 8 px w odstęp kolumn: najwyżej 4 wiersze przy kolumnie 220 px */
  .podstrona-pod.linia-gotowa .etapy li{border-top-color:transparent}
}

/* Umów spotkanie: karta w fiolecie marki (właściciel 26.10.2026: granat „za ciemny, nie pasuje”, wariant A), objęta klamrą linii; przycisk miętowy. */
.podstrona-pod .umow{background:var(--akcent);border-left:0;padding:30px 32px 28px;gap:12px}
.podstrona-pod .umow h3{color:#fff}
.podstrona-pod .umow p{color:#E6DFF5}
.podstrona-pod .umow .btn{background:var(--akcent-noc);color:var(--deep);border-color:var(--akcent-noc)}
.podstrona-pod .umow .btn:hover{background:#fff;border-color:#fff;color:var(--deep)}
.podstrona-pod .umow .kanal{color:#E6DFF5}
.podstrona-pod .umow .kanal a{color:#fff}

/* Pytania: jedna kolumna przystanków zamiast kafli; numer w szeryfie przy linii, cienkie kreski między pytaniami. */
.podstrona-pod .pytania-blok{grid-template-columns:1fr;gap:0;max-width:56em;border-top:1px solid var(--line)}
.podstrona-pod .pytania-blok li{background:transparent;padding:18px 0 18px 62px;border-bottom:1px solid var(--line);font-size:17.5px;line-height:1.45}
.podstrona-pod .pytania-blok li::before{left:0;top:14px;font-size:30px}
.podstrona-pod #pytania .zakonczenie{margin-top:32px}

/* Zakresy: karty bez zmian w treści; odnogi i kropki dorysowuje svg nad zdjęciami. */
.podstrona-pod #zakresy .karty{margin-top:44px}

/* Jak zaczynamy: pas w fiolecie marki jak na pozostałych stronach (26.10.2026, wariant A), linia miętowa; kolory tekstu ustawione wprost. */
.podstrona-pod .jak-zaczynamy{background:var(--akcent);color:#fff;border-top:0}
.podstrona-pod .jak-zaczynamy h2,.podstrona-pod .jak-zaczynamy .kroki h3{color:#fff}
.podstrona-pod .jak-zaczynamy .kroki li{border-top-color:rgba(217,210,234,.28)}
.podstrona-pod .jak-zaczynamy .kroki li::before{color:var(--akcent-noc)}
.podstrona-pod .jak-zaczynamy .kroki p,.podstrona-pod .jak-zaczynamy .zdanie,.podstrona-pod .jak-zaczynamy .kanaly{color:var(--akcent-soft)}
.podstrona-pod .jak-zaczynamy .btn{background:var(--akcent-noc);color:var(--deep)}
.podstrona-pod .jak-zaczynamy .btn:hover{background:#fff;color:var(--deep)}
.podstrona-pod .jak-zaczynamy .kanaly a{color:#fff}
.podstrona-pod .jak-zaczynamy .kanaly a:hover{color:var(--akcent-noc)}

/* Telefon: linia idzie lewym marginesem; treść odsunięta od niej o 36 px, prawy margines bez zmian. */
@media (max-width:860px){
  .podstrona-pod .pod-uklad .wrap,.podstrona-pod #jak-zaczynamy .wrap,.podstrona-pod .pas-okruszkow .wrap{padding-left:calc(var(--pad) + 16px);padding-right:var(--pad)}
  .podstrona-pod .karty-odsylacze article{padding-top:26px}
  .podstrona-pod .karty-odsylacze h3{font-size:24px}
  .podstrona-pod #co-dostajesz .ramka-lista{margin-left:-21px;padding:26px 22px 24px 30px}
  .podstrona-pod .pytania-blok li{padding:16px 0 16px 46px;font-size:16.5px}
  .podstrona-pod .pytania-blok li::before{font-size:24px;top:15px}
  .podstrona-pod .umow{padding:26px 24px 24px}
}

/* ---------- część „C”: warstwy w dwóch kolorach marki (fiolet + mięta) ---------- */
.podstrona-pod{--g-f:var(--akcent);--g-m:var(--akcent-noc);--g-l:var(--akcent-soft);--g-d:var(--deep);--g-p:var(--paper);--g-off:14px}

/* przyciski jako wycinanki: fioletowy z miętowym cieniem, obrysowany z liliowym; w pasie końcowym miętowy z fioletowym */
.podstrona-pod .hero-pod .przyciski .btn,.podstrona-pod .umow .btn{box-shadow:5px 5px 0 var(--g-m);transition:transform .15s,box-shadow .15s,background-color .15s,border-color .15s}
.podstrona-pod .hero-pod .przyciski .btn--obrys{box-shadow:5px 5px 0 var(--g-l);background:var(--g-p)}
.podstrona-pod .umow .btn{box-shadow:5px 5px 0 var(--g-f)}
.podstrona-pod .jak-zaczynamy .btn{box-shadow:6px 6px 0 var(--g-f);transition:transform .15s,box-shadow .15s,background-color .15s}
.podstrona-pod .hero-pod .przyciski .btn:hover,.podstrona-pod .umow .btn:hover,.podstrona-pod .jak-zaczynamy .btn:hover{transform:translate(3px,3px);box-shadow:2px 2px 0 var(--g-m)}
.podstrona-pod .hero-pod .przyciski .btn--obrys:hover{background:var(--deep);border-color:var(--deep);color:#fff;box-shadow:2px 2px 0 var(--g-l)}
.podstrona-pod .umow .btn:hover,.podstrona-pod .jak-zaczynamy .btn:hover{box-shadow:2px 2px 0 var(--g-f)}

/* czołówka: zdjęcie w ramie z miętowym offsetem i fioletową kartką pod spodem (dwa kolory pod zdjęciem) */
.podstrona-pod .hero-pod__wrap{padding-bottom:calc(46px + var(--g-off) * 2)}
.podstrona-pod .hero-pod .baner{margin-right:calc(var(--g-off) * 2 + 14px)}
.podstrona-pod .hero-pod .baner{border:1px solid var(--g-d);background:var(--g-p);
  box-shadow:var(--g-off) var(--g-off) 0 var(--g-m),calc(var(--g-off) * 2) calc(var(--g-off) * 2) 0 var(--g-f)}
.podstrona-pod .hero-pod .baner img{filter:saturate(.9) contrast(1.04)}
.podstrona-pod .hero-pod .baner .znak{transform:scale(.5);transform-origin:100% 0}
.podstrona-pod .hero-pod .baner--znak-dol .znak{transform-origin:100% 100%}   /* kadry z twarzą w prawym górnym rogu: znak w prawym dolnym */

/* co dostajesz: ramka z podwójną krawędzią (fiolet na wierzchu, mięta pod spodem), tło białe */
.podstrona-pod .ramka-lista{background:var(--g-p);border:2px solid var(--g-f);box-shadow:10px 10px 0 -2px var(--g-p),10px 10px 0 0 var(--g-m)}
.podstrona-pod .ramka-lista .lista-szewron span.poz{border:0;border-bottom:1px solid var(--g-l);background:transparent;padding:12px 2px;min-height:0;height:100%;align-items:start;font-weight:500}
.podstrona-pod .ramka-lista .lista-szewron li:last-child span.poz,.podstrona-pod .ramka-lista .lista-szewron li:nth-last-child(2):nth-child(odd) span.poz{border-bottom:0}   /* bez kreski tylko ostatni rząd (jedna albo dwie pozycje) */

/* umów spotkanie: granatowa karta z D plus miętowa i fioletowa podkładka */
.podstrona-pod .umow{box-shadow:10px 10px 0 var(--g-m),20px 20px 0 var(--g-f)}
.podstrona-pod #doswiadczenie .karty-odsylacze article,.podstrona-pod.linia-gotowa #doswiadczenie .karty-odsylacze article{background:var(--g-p);border:1px solid var(--g-f);padding:30px 28px 28px;box-shadow:10px 10px 0 var(--g-m)}
.podstrona-pod .dosw p{padding-left:18px;border-left:2px solid var(--g-m)}

/* inne zakresy: odbitki z białym marginesem, pod zdjęciem fiolet i mięta na przemian */
.podstrona-pod .karty>.karta--podusluga{padding-top:4px}
.podstrona-pod .karta--podusluga .foto{margin-bottom:8px;border:8px solid var(--g-p);outline:1px solid var(--g-l);background:var(--g-p);
  box-shadow:8px 8px 0 var(--g-f),16px 16px 0 var(--g-m);transition:transform .2s,box-shadow .2s}
.podstrona-pod .karta--podusluga:nth-child(even) .foto{box-shadow:8px 8px 0 var(--g-m),16px 16px 0 var(--g-f)}
.podstrona-pod .karta--podusluga:hover .foto{transform:translate(2px,2px);box-shadow:6px 6px 0 var(--g-f),12px 12px 0 var(--g-m)}
.podstrona-pod .karta--podusluga:nth-child(even):hover .foto{box-shadow:6px 6px 0 var(--g-m),12px 12px 0 var(--g-f)}
.podstrona-pod .karta--podusluga .foto a:hover img,.podstrona-pod .karta--podusluga .foto a:focus-visible img{transform:none}
.podstrona-pod .karta--podusluga .foto img{filter:saturate(.92)}
.podstrona-pod #zakresy .karty{gap:44px 36px}

/* jak zaczynamy: tytuł jako miętowa etykieta z fioletowym cieniem na granacie */
.podstrona-pod .jak-zaczynamy h2{display:inline-block;justify-self:start;width:max-content;max-width:100%;background:var(--g-m);color:var(--g-d);
  padding:8px 20px 9px;box-shadow:8px 8px 0 var(--g-f)}
.podstrona-pod .jak-zaczynamy .zdanie{font-family:var(--serif);font-style:italic;color:var(--g-m)}

@media (max-width:860px){
  .podstrona-pod{--g-off:8px}
  .podstrona-pod .hero-pod__wrap{padding-bottom:calc(36px + var(--g-off) * 2)}
  .podstrona-pod .hero-pod .baner{margin-right:calc(var(--g-off) * 2 + 10px)}
  .podstrona-pod .ramka-lista{box-shadow:8px 8px 0 -2px var(--g-p),8px 8px 0 0 var(--g-m)}
  .podstrona-pod .ramka-lista .lista-szewron li:nth-last-child(2):nth-child(odd) span.poz{border-bottom:1px solid var(--g-l)}   /* jedna kolumna: kreska wraca */
  .podstrona-pod .umow{box-shadow:8px 8px 0 var(--g-m),16px 16px 0 var(--g-f)}
  .podstrona-pod #doswiadczenie .karty-odsylacze article,.podstrona-pod.linia-gotowa #doswiadczenie .karty-odsylacze article{box-shadow:8px 8px 0 var(--g-m)}
  .podstrona-pod .karta--podusluga .foto{box-shadow:6px 6px 0 var(--g-f),12px 12px 0 var(--g-m)}
  .podstrona-pod .karta--podusluga:nth-child(even) .foto{box-shadow:6px 6px 0 var(--g-m),12px 12px 0 var(--g-f)}
  .podstrona-pod .jak-zaczynamy h2{padding:7px 16px 8px;box-shadow:6px 6px 0 var(--g-f)}
}

/* Ognisko klawiatury na granacie: --akcent na --deep daje 1,83:1, --akcent-noc 13,8:1 (wzorzec z .sekcja--noc). */
.podstrona-pod .umow a:focus-visible,.podstrona-pod #jak-zaczynamy a:focus-visible{outline-color:var(--akcent-noc)}
/* Telefon: miejsce na łącznik linii nad kartą „Umów spotkanie”; najwęższe ekrany: karty w jednej kolumnie bez minimum 280 px. */
@media (max-width:860px){ .podstrona-pod #doswiadczenie .dwie-kolumny > div + div{margin-top:34px} }
@media (max-width:400px){ .podstrona-pod .karty-odsylacze{grid-template-columns:minmax(0,1fr)} }
/* Mniej ruchu: przyciski i odbitki bez przesunięć. */
@media (prefers-reduced-motion:reduce){
  .podstrona-pod .hero-pod .przyciski .btn,.podstrona-pod .umow .btn,.podstrona-pod .jak-zaczynamy .btn,.podstrona-pod .karta--podusluga .foto{transition:none}
  .podstrona-pod .hero-pod .przyciski .btn:hover,.podstrona-pod .umow .btn:hover,.podstrona-pod .jak-zaczynamy .btn:hover,.podstrona-pod .karta--podusluga:hover .foto{transform:none}
}
/* Druk: svg linii jest liczone z geometrii ekranu; na papierze linia znika, a elementy odzyskują własne kreski. */
@media print{
  /* Chrome rozstrzyga (max-width:860px) względem papieru z okna druku, nie względem @page size z reguły ogólnej: podstrona dostaje
     własną stronę w rozmiarze papieru, więc media queries i szerokość strony się zgadzają (zdjęcie czołówki zostaje na stronie 1). */
  @page pod{size:auto;margin:0}
  .podstrona-pod{page:pod}
  .podstrona-pod .linia-procesu{display:none}
  .podstrona-pod.linia-gotowa .karty-odsylacze article,.podstrona-pod.linia-gotowa .etapy li{border-top-color:var(--akcent)}
  .podstrona-pod .karty>.karta--podusluga{break-inside:avoid}   /* karta zakresu w całości na jednej stronie */
}

/* ---------- STRONA USŁUGI W MOTYWIE G (13.10.2026, prośba właściciela o spójność z podstronami) ----------
   Strona usługi wariantu B ma klasy body.podstrona-pod (motyw: linia procesu, warstwy koloru, czołówka, ramka wyniku, karta „Umów”,
   pas granatowy) i body.strona-uslugi (elementy własne strony usługi): zakresy usługi jako stacje na linii ze zdjęciem z podkładkami,
   „Czego nie robimy” jako lista z kreskami, przykład realizacji w trzech kolumnach z miętową kreską (jak „Doświadczenie” podstrony),
   usługi powiązane jako wiersze z kreskami (jak lista w ramce wyniku). Tylko tokeny. */
.stacje{list-style:none;margin:0;padding:0}
.stacje li{display:grid;grid-template-columns:minmax(0,1fr) min(300px,38%);column-gap:48px;align-items:center;padding:30px 0;border-top:1px solid var(--line)}
.stacje .h-karty{margin:0 0 10px;font-family:var(--serif);font-weight:400;font-size:30px;line-height:1.15;color:var(--ink)}
.stacje .h-karty a{color:inherit;text-decoration:none}
.stacje .h-karty a:hover,.stacje .h-karty a:focus-visible{color:var(--akcent)}
.stacje p{margin:0;font-size:16.5px;line-height:1.55;color:var(--body);max-width:40em}
.stacje .wiecej{display:inline-block;margin-top:14px;font-size:15px;font-weight:600;color:var(--akcent);text-decoration:none}
.stacje .wiecej:hover{text-decoration:underline}
.stacje .foto{aspect-ratio:16/10;overflow:hidden;background:var(--g-p);border:8px solid var(--g-p);outline:1px solid var(--g-l);
  box-shadow:8px 8px 0 var(--g-f),16px 16px 0 var(--g-m);transition:transform .2s,box-shadow .2s}
.stacje li:nth-child(even) .foto{box-shadow:8px 8px 0 var(--g-m),16px 16px 0 var(--g-f)}
.stacje li:hover .foto{transform:translate(2px,2px);box-shadow:6px 6px 0 var(--g-f),12px 12px 0 var(--g-m)}
.stacje li:nth-child(even):hover .foto{box-shadow:6px 6px 0 var(--g-m),12px 12px 0 var(--g-f)}
.stacje .foto a{display:block;height:100%}
.stacje .foto img{display:block;width:100%;height:100%;object-fit:cover;filter:saturate(.92)}
.granice .nadpis{margin:4px 0 12px}
.granice__lista{list-style:none;margin:0;padding:0}
.granice__lista li{position:relative;padding:12px 0 12px 26px;border-top:1px solid var(--line);font-size:16.5px;line-height:1.5;color:var(--ink)}
.granice__lista li:last-child{border-bottom:1px solid var(--line)}
.granice__lista li::before{content:"";position:absolute;left:0;top:calc(12px + .75em);width:12px;height:2px;background:var(--g-f)}   /* kreska: pozycja poza zakresem, nie szewron */
.przyklad-trzy{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:32px 40px}
.przyklad-trzy h3{margin:0 0 10px;font-size:13px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--akcent)}
.przyklad-trzy p{margin:0;padding-left:18px;border-left:2px solid var(--g-m);font-size:16.5px;line-height:1.6;color:var(--body)}
.strona-uslugi #powiazane .lista-szewron a{min-height:0;padding:14px 2px;border:0;border-bottom:1px solid var(--g-l);background:transparent}
.strona-uslugi #powiazane .lista-szewron li:first-child a{border-top:1px solid var(--g-l)}
.strona-uslugi #powiazane .lista-szewron a:hover{border-color:var(--g-f)}
.strona-uslugi .technologie{margin-top:44px}   /* miejsce na powrót linii z kręgosłupa bloków na lewą stronę strony */
/* karty dowodów (dowody.js) jak karta usługi nadrzędnej na podstronie: biała, fioletowa krawędź, miętowa podkładka */
.strona-uslugi .dowody-mini{gap:36px 40px}
.strona-uslugi .dowody-mini article{border:1px solid var(--g-f);box-shadow:10px 10px 0 var(--g-m)}
.strona-uslugi .dowody-mini article.zbiorcza{border-color:var(--g-l)}
.strona-uslugi .dowody-wiecej{margin-top:38px}
@media (max-width:860px){
  .podstrona-pod #powiazane .dwie-kolumny > div + div{margin-top:34px}   /* łącznik linii nad kartą „Umów spotkanie”, jak w #doswiadczenie */
  .stacje li{grid-template-columns:1fr;row-gap:18px;padding:24px 0}
  .stacje .foto{order:-1;margin-right:12px;box-shadow:6px 6px 0 var(--g-f),12px 12px 0 var(--g-m)}
  .stacje li:nth-child(even) .foto{box-shadow:6px 6px 0 var(--g-m),12px 12px 0 var(--g-f)}
  .stacje .h-karty{font-size:24px}
  .przyklad-trzy{grid-template-columns:1fr;gap:22px}
}
@media (prefers-reduced-motion:reduce){
  .stacje .foto{transition:none}
  .stacje li:hover .foto{transform:none}
}
@media print{ .stacje li{break-inside:avoid} }

/* ---------- STRONA USŁUGI: CZOŁÓWKA „OKŁADKA” (decyzja właściciela 14.10.2026 po porównaniu czterech układów,
   docs/uklady-strony-uslugi-2026-10-13.html) ----------
   Hierarchia wobec podstrony robiona skalą, nie innym językiem: zdjęcie na całą szerokość u góry (kadr 1340:420) z miętową i fioletową
   krawędzią pod spodem (podkładki karty w skali strony), pod nim kicker, tytuł, lead i przyciski jak w .hero-pod; „Zakresy tej usługi”
   od razu po czołówce. Tylko tokeny. */
.czolowka-g .nadpis{margin:0 0 10px}
.czolowka-g .nadpis a{color:var(--akcent);text-decoration:none}
.czolowka-g .nadpis a:hover{text-decoration:underline}
.czolowka-g .h-strony{margin:0}
.czolowka-g .podtytul{max-width:34em}
.czolowka-g .przyciski{display:flex;flex-wrap:wrap;gap:12px;margin:26px 0 0}
.czolowka-g .przyciski .btn{display:inline-block;background:var(--akcent);color:#fff;padding:13px 26px;font-weight:600;font-size:15.5px;border:2px solid var(--akcent);text-decoration:none;
  box-shadow:5px 5px 0 var(--g-m);transition:transform .15s,box-shadow .15s,background-color .15s,border-color .15s}
.czolowka-g .przyciski .btn--obrys{background:var(--g-p);color:var(--akcent);box-shadow:5px 5px 0 var(--g-l)}
.czolowka-g .przyciski .btn:hover{background:var(--deep);border-color:var(--deep);color:#fff;transform:translate(3px,3px);box-shadow:2px 2px 0 var(--g-m)}
.czolowka-g .przyciski .btn--obrys:hover{box-shadow:2px 2px 0 var(--g-l)}
/* zdjęcie na całą szerokość: kadr 1340:420, znak pasów w prawej części w połowie skali (na kadrach z twarzą w prawym górnym rogu: na dole) */
.baner--szeroki{aspect-ratio:1340/420}
.baner--szeroki .znak{width:100%;transform:scale(.45);transform-origin:100% 0}
.baner--szeroki.baner--znak-dol .znak{transform-origin:100% 100%}
.baner--szeroki img{filter:saturate(.9) contrast(1.04)}
.hero-okladka{background:var(--wash)}
.hero-okladka .baner{box-shadow:0 var(--g-off) 0 var(--g-m),0 calc(var(--g-off) * 2) 0 var(--g-f);margin-bottom:calc(var(--g-off) * 2)}
.hero-okladka__tresc{padding-top:44px;padding-bottom:46px}
@media (max-width:860px){
  .baner--szeroki{aspect-ratio:16/9}
  .hero-okladka__tresc{padding-top:30px;padding-bottom:36px}
}
@media (prefers-reduced-motion:reduce){
  .czolowka-g .przyciski .btn{transition:none}
  .czolowka-g .przyciski .btn:hover{transform:none}
}