/* ============================================================
   bartoszewicz.co : port 1:1 do statycznego HTML
   Wspólny arkusz całego serwisu. Tokeny odwzorowane z motywu
   Qode Cevian produkcji www.bartoszewicz.co:
   Open Sans 15/25 w300 #707070, Montserrat na nagłówkach #222,
   akcent terakota #b47759, granat #293478, beże #f5f1ed / #f5f2ed.
   Ikony = oryginalne fonty ikon motywu (pliki na tym samym serwerze).
   ============================================================ */

:root {
  /* typografia (1:1 z motywu) */
  --font-naglowki: 'Montserrat', sans-serif;
  --font-tekst: 'Open Sans', sans-serif;

  /* kolory (1:1 z motywu) */
  --c-tekst: #707070;          /* body */
  --c-naglowek: #222222;       /* h1-h6 */
  --c-akcent: #b47759;         /* terakota: tytuły usług, kontakt */
  --c-akcent-ciemny: #9d4c24;  /* hover linków kontaktowych */
  --c-akcent-jasny: #dcc6bb;   /* ikony linea w kaflach */
  --c-akcent-hover: #efe8df;   /* hover kafla usługi */
  --c-granat: #293478;         /* paski postępu, przyciski */
  --c-granat-jasny: #e3e2ed;   /* tło przycisku solid */
  --c-granat-tor: #c9ccdd;     /* tor paska postępu */
  --c-tlo-cieple: #f5f1ed;     /* tło siatki usług + bandu referencji */
  --c-tlo-cieple-2: #f5f2ed;   /* tło kolumn kontaktu */
  --c-linia: #dbc1b2;          /* linie pod tytułami kolumn kontaktu */
  --c-linia-ref: #e1ccc0;      /* ramki sekcji referencji (testimonials) */
  --c-stopka: #171717;         /* tło stopki (produkcyjny custom CSS, nie #222) */
  --c-stopka-tekst: #cccccc;
  --c-stopka-szary: #8e8e8e;
  --c-copyright: #8e8e8e;      /* tekst i linki paska copyright; SWEEP ATRAKCYJNOSCI 2026-08-07: bylo #707070 = 3,62:1 na #171717 (fail AA), teraz 5,47:1 (ten sam szary co reszta stopki) */

  /* layout: drabinka szerokości siatki Qode 1:1 z produkcją
     (.qodef-grid: 1100px domyślnie, 1300px od 1400px wzwyż, dalej stałe progi) */
  --szer-grid: 1100px;
  --wys-topbar: 46px;
  --wys-header: 94px;
}
@media (min-width: 1400px) { :root { --szer-grid: 1300px; } }
@media (max-width: 1200px) { :root { --szer-grid: 950px; } }
@media (max-width: 1024px) { :root { --szer-grid: 768px; } }
@media (max-width: 768px)  { :root { --szer-grid: 600px; } }
/* SWEEP MOBILE 2026-08-07: dwa dolne progi plynne zamiast sztywnych 420/300px.
   Sztywne 420px na produkcji kleilo karty do krawedzi (430px ekranu = 5px marginesu),
   a sztywne 300px lokalnie sciskalo tresc (390px ekranu = 45px pustych marginesow).
   Teraz kontener wypelnia opadowana sekcje; kazda pelnoekranowa sekcja ma wlasny
   padding boczny >= 16px (jedyna bez niego, .bz-projekty, dostaje go nizej). */
@media (max-width: 680px)  { :root { --szer-grid: min(420px, 100%); } }
@media (max-width: 480px)  { :root { --szer-grid: 100%; } }

/* ---------- reset + baza ---------- */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--font-tekst);
  font-size: 15px;
  font-weight: 300;
  line-height: 25px;
  color: var(--c-tekst);
  background: #fff;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-naglowki);
  color: var(--c-naglowek);
  margin: 25px 0;
  overflow-wrap: break-word;
}
h1 { font-size: 60px; line-height: 1.2em; }
h2 { font-size: 42px; line-height: 1.19em; }
h3 { font-size: 33px; line-height: 1.21em; }
h4 { font-size: 22px; line-height: 1.32em; }
h5 { font-size: 17px; line-height: 1.29em; font-weight: 600; }
h6 { font-size: 16px; line-height: 1.3em; font-weight: 300; }
p { font-size: 16px; margin: 10px 0; } /* produkcyjny custom CSS: p{font-size:16px;margin:10px 0} (body zostaje 15px) */
a { color: inherit; text-decoration: none; transition: color .2s ease-out; }
img { max-width: 100%; height: auto; border: 0; display: inline-block; }
ul { list-style: none; }
button { font-family: inherit; cursor: pointer; }
:focus-visible { outline: 2px solid var(--c-granat); outline-offset: 2px; }
.bz-sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

.bz-kontener { width: 100%; max-width: var(--szer-grid); margin: 0 auto; padding: 0; } /* siatka Qode: stała szerokość, bez bocznego paddingu */

/* ---------- fonty ikon motywu (te same pliki co produkcja WP) ---------- */
@font-face {
  font-family: 'linea-basic-10';
  src: url('/wp-content/themes/cevian/framework/lib/icons-pack/linea-icons/basic/fonts/linea-basic-10.woff') format('woff');
  font-weight: 400; font-style: normal; font-display: block;
}
@font-face {
  font-family: 'linea-arrows-10';
  src: url('/wp-content/themes/cevian/framework/lib/icons-pack/linea-icons/arrows/fonts/linea-arrows-10.woff') format('woff');
  font-weight: 400; font-style: normal; font-display: block;
}
@font-face {
  font-family: 'linea-ecommerce-10';
  src: url('/wp-content/themes/cevian/framework/lib/icons-pack/linea-icons/ecommerce/fonts/linea-ecommerce-10.woff') format('woff');
  font-weight: 400; font-style: normal; font-display: block;
}
@font-face {
  font-family: 'Linearicons-Free';
  src: url('/wp-content/themes/cevian/framework/lib/icons-pack/linear-icons/fonts/Linearicons-Free.woff2?w118d') format('woff2'),
       url('/wp-content/themes/cevian/framework/lib/icons-pack/linear-icons/fonts/Linearicons-Free.woff?w118d') format('woff');
  font-weight: 400; font-style: normal; font-display: block;
}
@font-face {
  font-family: 'ElegantIcons';
  src: url('/wp-content/themes/cevian/framework/lib/icons-pack/elegant-icons/fonts/ElegantIcons.woff') format('woff');
  font-weight: 400; font-style: normal; font-display: block;
}
@font-face {
  font-family: 'Font Awesome 5 Brands';
  src: url('/wp-content/themes/cevian/framework/lib/icons-pack/font-awesome/webfonts/fa-brands-400.woff2') format('woff2'),
       url('/wp-content/themes/cevian/framework/lib/icons-pack/font-awesome/webfonts/fa-brands-400.woff') format('woff');
  font-weight: 400; font-style: normal; font-display: block;
}
@font-face {
  font-family: 'Ionicons';
  src: url('/wp-content/themes/cevian/framework/lib/icons-pack/ion-icons/fonts/ionicons.woff?v=2.0.0') format('woff');
  font-weight: 400; font-style: normal; font-display: block;
}

[class^="bz-ico-"], [class*=" bz-ico-"] {
  display: inline-block; font-style: normal; font-weight: 400; line-height: 1;
  speak: never; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
}
/* linea basic (kafle usług) */
.bz-ico-todo::before         { font-family: 'linea-basic-10'; content: '\e016'; }
.bz-ico-mixer::before        { font-family: 'linea-basic-10'; content: '/'; }
.bz-ico-target::before       { font-family: 'linea-basic-10'; content: '\e015'; }
.bz-ico-compass::before      { font-family: 'linea-basic-10'; content: 'B'; }
.bz-ico-pencil-ruler::before { font-family: 'linea-basic-10'; content: '?'; }
.bz-ico-cloud::before        { font-family: 'linea-basic-10'; content: 'z'; }
.bz-ico-lock-open::before    { font-family: 'linea-basic-10'; content: '!'; }
.bz-ico-calendar::before     { font-family: 'linea-basic-10'; content: 'r'; }
.bz-ico-expand::before       { font-family: 'linea-arrows-10'; content: '\e028'; }
.bz-ico-sales::before        { font-family: 'linea-ecommerce-10'; content: ';'; }
/* linearicons (topbar, kontakt, stopka) */
.bz-ico-apartment::before    { font-family: 'Linearicons-Free'; content: '\e801'; }
.bz-ico-envelope::before     { font-family: 'Linearicons-Free'; content: '\e818'; }
.bz-ico-phone::before        { font-family: 'Linearicons-Free'; content: '\e830'; }
/* ElegantIcons (małe ikony social) */
.bz-ico-social-fb::before    { font-family: 'ElegantIcons'; content: '\e093'; }
/* X (d. Twitter): oficjalny glif jako maska SVG, kolor dziedziczony z currentColor (decyzja Rafała 2026-08-04) */
.bz-ico-social-tw::before{
  content: '';
  display: inline-block;
  width: 1em; height: 1em;
  vertical-align: -0.1em;
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z'/%3E%3C/svg%3E") no-repeat center / contain;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z'/%3E%3C/svg%3E") no-repeat center / contain;
}
.bz-ico-social-ig::before    { font-family: 'ElegantIcons'; content: '\e09a'; }
.bz-ico-social-in::before    { font-family: 'ElegantIcons'; content: '\e09d'; }
/* Ionicons (strzałki przycisków, back to top) */
.bz-ico-arrow-right::before  { font-family: 'Ionicons'; content: '\f3d3'; }
.bz-ico-arrow-up::before     { font-family: 'Ionicons'; content: '\f3d8'; }

/* ---------- topbar ---------- */
.bz-topbar {
  position: relative; z-index: 110;
  height: var(--wys-topbar);
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 40px;
  font-size: 12px; line-height: 1; color: #fff;
  background: var(--c-naglowek);
}
.bz-topbar-lewa, .bz-topbar-prawa { display: flex; align-items: center; }
.bz-topbar a { display: inline-flex; align-items: center; color: #fff; min-height: 44px; }
.bz-topbar a:hover { color: rgba(255, 255, 255, .7); } /* 1:1: .qodef-top-bar .qodef-icon-widget-holder:hover */
.bz-topbar [class^="bz-ico-"] { font-size: 14px; }
.bz-topbar .bz-ico-envelope { font-size: 15px; }
.bz-topbar-mail { margin: 0 40px; }
.bz-ico-tekst { padding-left: 10px; font-weight: 400; }
.bz-topbar-social a { font-size: 12px; margin-left: 5px; padding: 0 6px; }
.bz-topbar-social a:hover { color: #fff; } /* 1:1: social w topbarze nie zmieniają koloru na hover */
/* home: topbar przezroczysty nad hero (1:1 z page-id-225) */
.bz-strona-hero .bz-topbar {
  position: absolute; top: 0; left: 0; right: 0;
  background: transparent;
  border-bottom: 1px solid rgba(255, 255, 255, .3);
}
@media (max-width: 1024px) { .bz-topbar { display: none; } }

/* ---------- header (desktop) ---------- */
.bz-header {
  position: relative; z-index: 100;
  height: var(--wys-header);
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 40px;
  background: #fff;
}
.bz-strona-hero .bz-header {
  position: absolute; top: var(--wys-topbar); left: 0; right: 0;
  background: transparent;
}
.bz-logo img { height: 94px; width: auto; display: block; }
.bz-menu { display: flex; align-items: center; }
.bz-menu a {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 32px;
  font-family: var(--font-naglowki); font-size: 17px; line-height: 23px; font-weight: 600;
  color: var(--c-naglowek);
}
/* 1:1: menu produkcji nie zmienia koloru na hover ani na aktywnej pozycji (#222 zawsze, na hero #fff) */
.bz-menu a:hover, .bz-menu a[aria-current="page"], .bz-menu a[aria-current="true"] { color: var(--c-naglowek); }
/* home: menu białe nad hero (qodef-light-header) */
.bz-strona-hero .bz-menu a { color: #fff; }
.bz-strona-hero .bz-menu a:hover,
.bz-strona-hero .bz-menu a[aria-current="page"], .bz-strona-hero .bz-menu a[aria-current="true"] { color: #fff; }

/* ---------- header mobilny + menu mobilne ---------- */
.bz-header-mobilny {
  display: none;
  position: fixed; top: 0; left: 0; right: 0; z-index: 210;
  height: 60px; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .08);
  align-items: center; justify-content: space-between; padding: 0 15px;
}
.bz-header-mobilny .bz-logo img { height: 100px; }
.bz-burger {
  display: flex; background: none; border: 0; width: 44px; height: 44px;
  flex-direction: column; align-items: center; justify-content: center; gap: 5px;
  color: var(--c-naglowek);
}
.bz-burger span { display: block; width: 24px; height: 2px; background: currentColor; transition: transform .25s, opacity .25s; }
.bz-burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.bz-burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.bz-burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
.bz-menu-mobilne {
  display: none;
  position: fixed; top: 60px; left: 0; right: 0; z-index: 200;
  background: #fff; box-shadow: 0 10px 30px rgba(0, 0, 0, .12);
  padding: 8px 25px 20px;
}
.bz-menu-mobilne.otwarte { display: block; }
.bz-menu-mobilne a {
  display: block; padding: 12px 5px;
  font-family: var(--font-naglowki); font-size: 17px; font-weight: 600; color: var(--c-naglowek);
  border-bottom: 1px solid #eee;
}
.bz-menu-mobilne a[aria-current="page"], .bz-menu-mobilne a[aria-current="true"] { color: var(--c-naglowek); } /* 1:1: qodef-active-item = #222 */
@media (max-width: 1024px) {
  .bz-header { display: none; }
  .bz-header-mobilny { display: flex; }
  body { padding-top: 60px; }
  body.bz-strona-hero { padding-top: 60px; }
}

/* ---------- przyciski (1:1: .qodef-btn.qodef-btn-solid, border-radius:5em) ---------- */
.bz-btn {
  display: inline-flex; align-items: center;
  padding: 13px 50px; border: 1px solid transparent; border-radius: 5em;
  font-family: var(--font-naglowki); font-size: 14px; font-weight: 600; line-height: 2em;
  background: var(--c-granat-jasny); color: var(--c-granat);
  white-space: nowrap; /* KONTRAKT 2026-08-07: pigulka NIGDY nie lamie tekstu (mobile: patrz sweep na koncu pliku) */
  transition: color .2s ease-in-out, background-color .2s ease-in-out, border-color .2s ease-in-out;
}
/* 1:1: przyciski home (solid+icon) NIE zmieniają tła na hover; strzałka Ionicons 16px, 5px od tekstu */
.bz-btn [class^="bz-ico-"] { font-size: 16px; margin-left: 5px; line-height: inherit; }

/* ---------- hero (statyczny zamiennik Slider Revolution) ---------- */
.bz-hero {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  background-color: #6b625a; /* fallback pod białym H1 zanim wczyta się zdjęcie; niewidoczny gdy zdjęcie jest */
  background-size: cover; background-position: center;
  display: flex; align-items: center;
}
.bz-hero-tresc { width: 100%; padding: 0 40px 0 100px; }
.bz-hero h1 {
  max-width: 701px; margin: 0;
  font-size: 50px; line-height: 53px; font-weight: 600; color: #fff;
  animation: bz-fade-in-lewo .5s ease-out both;
}
@keyframes bz-fade-in-lewo {
  from { opacity: 0; transform: translateX(-50px); }
  to { opacity: 1; transform: translateX(0); }
}
@media (max-width: 1024px) {
  .bz-hero { min-height: 72vh; }
  .bz-hero h1 { font-size: 40px; line-height: 45px; max-width: 432px; }
  .bz-hero-tresc { padding-left: 40px; }
}
/* MOBILE HERO v2 (2026-08-07, Architekt): H1 38px/320px lamal sie na 7-8 linii
   i zjadal caly ekran. Nowy kontrakt: hero = zwarty blok typograficzny,
   wysokosc z TRESCI (nie 100vh/82vh), H1 30px z balansowanym lamaniem,
   CTA + mikrotekst + secondary w pierwszym ekranie albo tuz pod nim. */
@media (max-width: 680px) {
  .bz-hero { min-height: 0; }
  .bz-hero-tresc { padding: 56px 20px 52px; }
  /* QA 2026-08-07: kontrakt H1 = max 4 linie na mobile. Progi zmierzone
     w harnessie (iframe, Montserrat 600, tresc frozen): 4 linie przy
     360px -> <=24px, 390px -> <=26px, 430px -> <=29px. Stad 6.6vw:
     360 -> 23,8px / 390 -> 25,7px / 430 -> 28px (cap) = wszedzie 4 linie.
     Poprzedni clamp(26px, 7.7vw, 31px) dawal 5 linii na 360-430. */
  .bz-hero h1 {
    font-size: clamp(23px, 6.6vw, 28px); line-height: 1.28; max-width: none;
    margin: 0 auto; text-align: center; text-wrap: balance;
  }
}

/* ---------- siatka usług (2 rzędy x 5 kafli) ---------- */
.bz-uslugi { background: var(--c-tlo-cieple); }
.bz-uslugi-rzad { display: grid; grid-template-columns: repeat(5, 1fr); }
.bz-usluga {
  display: block; padding: 70px 30px 75px; text-align: center;
  transition: background-color .3s ease;
  min-height: 100%;
}
.bz-usluga:hover { background: var(--c-akcent-hover); }
.bz-usluga [class^="bz-ico-"] { font-size: 68px; color: var(--c-akcent-jasny); }
.bz-usluga h3 { font-size: 17px; line-height: 1.29em; font-weight: 600; color: var(--c-akcent); margin: 28px 0 0; }
.bz-usluga p { color: var(--c-akcent); margin: 14px 0 0; }
@media (max-width: 1200px) { .bz-uslugi-rzad { grid-template-columns: repeat(5, 1fr); } .bz-usluga { padding: 45px 14px 50px; } }
/* mobile: siatka 2 kolumny zamiast karuzeli z wypalonymi JPG (Rafal 2026-08-07).
   Kalibracja 2026-08-07 (Architekt): 68px ikona + padding 45/14/50 dawaly kafel
   ~300px wysokosci przy 195px szerokosci = slup tekstu. Skala mobilna zjezdza
   do 52px ikony i ciasniejszego rytmu, opis 14/1.5 zeby nie lamal sie po 2 slowa. */
@media (max-width: 768px) {
  /* JEDNA siatka 2x5, nie dwie siatki po 5 kafli. Przy `display:block` na
     .bz-uslugi-rzady kazdy z dwoch rzedow po 5 kafli lamal sie osobno na
     2+2+1, wiec w kolumnie stawaly DWIE dziury (poz. 3 i 6, zmierzone na 390).
     `display:contents` na rzedzie wypuszcza kafle do wspolnej siatki rodzica. */
  .bz-uslugi-rzady { display: grid; grid-template-columns: repeat(2, 1fr); }
  .bz-uslugi-rzad { display: contents; }
  .bz-usluga { padding: 28px 16px 32px; }
  .bz-usluga [class^="bz-ico-"] { font-size: 52px; }
  .bz-usluga h3 { font-size: 16px; margin-top: 16px; }
  .bz-usluga p { font-size: 14px; line-height: 1.5; margin-top: 8px; }
}

/* ---------- sekcje 50/50 tekst + zdjęcie ---------- */
.bz-split { display: flex; align-items: stretch; }
/* paddingi 1:1 z Qode elements-holder (tam % liczony od itemu 50%, tu od rodzica, więc wartości ÷2):
   baza >1600: 10% itemu = 5%; 1367-1600: 10/15/13/15 → 5/7.5/6.5/7.5; 1025-1366: 10/11/10/14 → 5/5.5/5/7; 769-1024: 10/8/10/12 → 5/4/5/6 */
.bz-split-tekst { width: 50%; padding: 5%; align-self: center; }
@media (min-width: 1367px) and (max-width: 1600px) { .bz-split-tekst { padding: 5% 7.5% 6.5% 7.5%; } }
@media (min-width: 1025px) and (max-width: 1366px) { .bz-split-tekst { padding: 5% 5.5% 5% 7%; } }
@media (min-width: 769px) and (max-width: 1024px) { .bz-split-tekst { padding: 5% 4% 5% 6%; } }
.bz-split-foto { width: 50%; background-size: cover; background-position: center; min-height: 640px; }
.bz-split-tekst h2 { margin-top: 0; }
.bz-split-tekst .bz-btn { margin-top: 25px; }
@media (max-width: 768px) {
  .bz-split { flex-direction: column; }
  .bz-split-tekst, .bz-split-foto { width: 100%; }
  .bz-split-foto { min-height: 0; padding: 32% 0; }
  .bz-split-tekst { padding: 0 12.5% 15%; } /* Qode 681-768: 0/10/15/15; boki wyrownane 2026-08-07, by wycentrowany .bz-btn stal na osi ekranu */
  /* na mobile zdjęcie zawsze POD tekstem (1:1 z oryginałem) */
  .bz-split-foto { order: 2; }
  .bz-split-tekst { order: 1; }
}
@media (max-width: 680px) {
  .bz-split-tekst { padding: 0 9% 10%; } /* Qode <=680: 0/8/10/10; boki wyrownane 2026-08-07 (osiowanie .bz-btn) */
}

/* ---------- kompetencje / paski postępu ---------- */
.bz-kompetencje { position: relative; overflow: hidden; }
.bz-kompetencje-tlo {
  position: absolute; inset: 0; z-index: 0;
  display: flex; align-items: flex-start; justify-content: center;
  padding-left: 10%;
  font-family: var(--font-naglowki); font-size: 200px; line-height: 1;
  color: rgba(227, 226, 237, .3); white-space: nowrap; pointer-events: none;
  user-select: none;
}
@media (min-width: 1440px) { .bz-kompetencje-tlo { font-size: 240px; } }
.bz-kompetencje-inner { position: relative; z-index: 1; display: flex; gap: 40px; align-items: flex-start; }
.bz-kompetencje-tresc { width: 41.67%; padding: 12% 12% 60px 0; }
.bz-caption { display: block; margin: 0; font-size: 16px; line-height: 1.3em; font-weight: 300; color: var(--c-tekst); }
.bz-kompetencje-tresc h2 { font-size: 33px; line-height: 1.21em; margin: 6px 0 18px; }
@media (max-width: 1024px) { .bz-kompetencje-tlo { font-size: 120px; } }
@media (max-width: 768px) {
  .bz-kompetencje-inner { flex-direction: column; }
  .bz-kompetencje-tresc { width: 100%; padding: 40px 25px; }
  .bz-kompetencje-tlo { font-size: 70px; }
}

/* ---------- projekty (1:1: qodef-team 4-column z wysuwanym panelem roli) ----------
   Dwa rzędy po 4 szare loga (20% szerokości), przy AKTYWNYM logo z prawej wysuwa się
   biały panel z rolą i opisem, a kolejne loga odjeżdżają w prawo. Aktywny na start:
   rząd 1 = logo 1, rząd 2 = logo 3 (data-aktywny); hover/fokus przenosi aktywność
   i ZOSTAWIA ją (tak działa JS produkcji). Wartości left/przesunięć = CSS motywu. */
.bz-projekty { padding: 40px 0 20px; }
.bz-projekty-naglowek h2 { font-size: 33px; line-height: 1.21em; margin-bottom: 0; } /* h3 w oryginale */
.bz-projekty-naglowek em a { color: var(--c-naglowek); font-weight: 400; } /* 1:1: link #222, bez zmiany na hover */
.bz-team { position: relative; padding: 0 5px; margin: 0 45px 10px 0; } /* pełna szerokość minus 45px z prawej (margin-right 30 + padding 15 vc_row produkcji) */
.bz-team::after { content: ''; display: block; clear: both; }
.bz-team-item {
  position: relative; float: left; width: 20%; padding: 0 5px; left: 0;
  transition: all .4s ease-in-out;
}
.bz-team-logo img { display: block; width: 100%; height: auto; }
/* (2026-08-09) UWAGA: plik theshire.png z serwera mial srednia jasnosc "inku"
   L=197 przy L=84-86 dla bee-pl i taniaksiazka-pl, czyli okolo 1,8:1 na bialym
   i logo praktycznie znikalo w torze. Poprawka jest w SAMYM PLIKU (krzywa na
   tuszu, biale tlo bez zmian, oryginal zachowany jako theshire-oryginal-jasny.png),
   nie w CSS: filtr brightness przyciemnial tez nieprzezroczyste biale tlo PNG.
   Deploy musi wgrac nowy /img/logo/theshire.png. */
.bz-team-info {
  visibility: hidden; opacity: 0; z-index: 1;
  position: absolute; top: 0; left: 374px; width: 100%; height: 100%;
  background: #fff; display: flex; align-items: center;
  transition: all .1s ease-in-out;
}
.bz-team-item.aktywny .bz-team-info { visibility: visible; opacity: 1; transition: all .3s ease-in-out .3s; }
.bz-team-info-outer { padding: 9px 9px 9px 0; }
.bz-team-info-inner { padding: 24px 10px 31px 27px; }
.bz-team-nazwa { margin: 0; font-size: 17px; line-height: 1.29em; font-weight: 600; color: var(--c-naglowek); } /* h5 w oryginale */
.bz-team-opis { margin: 8px 0 13px; color: var(--c-tekst); }
/* aktywny/hover na logo 1-3: kolejne loga odjeżdżają w prawo */
.bz-team-item.aktywny ~ .bz-team-item, .bz-team-item:hover ~ .bz-team-item { left: 379px; }
@media (max-width: 1440px) {
  .bz-team-info { left: 282px; }
  .bz-team-item.aktywny ~ .bz-team-item, .bz-team-item:hover ~ .bz-team-item { left: 286px; }
}
@media (max-width: 1366px) {
  .bz-team-info { left: 272px; }
  .bz-team-item.aktywny ~ .bz-team-item, .bz-team-item:hover ~ .bz-team-item { left: 272px; }
}
@media (max-width: 1280px) {
  .bz-team-info { left: 250px; }
  .bz-team-item.aktywny ~ .bz-team-item, .bz-team-item:hover ~ .bz-team-item { left: 255px; }
}
/* (QA 2026-08-07) OSTATNI kafel nie ma nastepnika, wiec jego panel ladowal
   ZA prawa krawedzia okna i rozpychal cala strone: zmierzone scrollWidth 1490
   przy innerWidth 1280 (poziomy pasek na home przy KAZDEJ szerokosci >=1025px,
   sprawdzone 1025/1100/1200/1279/1280/1281/1366/1367/1440/1441/1600/1920).
   Panel ostatniego odbijamy w lewo o ten sam dystans (laduje na poprzednim
   logo, tak jak panele 1-3 laduja na nastepnym), a sekcje przycinamy, zeby
   zaden przyszly element nie odtworzyl poziomego scrolla. */
.bz-projekty { overflow-x: hidden; overflow-x: clip; }
@media (min-width: 1025px) {
  .bz-team-item:last-child .bz-team-info { left: -374px; }
}
@media (min-width: 1025px) and (max-width: 1440px) {
  .bz-team-item:last-child .bz-team-info { left: -282px; }
}
@media (min-width: 1025px) and (max-width: 1366px) {
  .bz-team-item:last-child .bz-team-info { left: -272px; }
}
@media (min-width: 1025px) and (max-width: 1280px) {
  .bz-team-item:last-child .bz-team-info { left: -250px; }
}
/* 769-1024: lista pionowa, logo 50% + panel widoczny statycznie po prawej */
@media (max-width: 1024px) {
  .bz-team-item, .bz-team-item.aktywny ~ .bz-team-item, .bz-team-item:hover ~ .bz-team-item { float: none; display: block; width: 100%; padding: 0; left: auto; margin: 0 auto; }
  .bz-team-logo { float: left; width: 50%; }
  .bz-team-info {
    position: relative; left: auto; top: auto; float: left; width: 50%; height: auto;
    visibility: visible; opacity: 1; background: transparent;
    margin-top: 25%; transform: translateY(-50%);
  }
  .bz-team-item::after { content: ''; display: block; clear: both; }
}
/* (2026-08-09) 769-1024: port produkcji dawal logo na 50% szerokosci, wiec KAZDA
   pozycja miala okolo 405px wysokosci. Przy 11 firmach sekcja urosla do 4986px
   (ZMIERZONE na 810px), czyli piec ekranow samych logotypow. Ten sam uklad
   logo + rola, ale logo na 24% i pionowe centrowanie flexem zamiast marginesu
   procentowego: sekcja schodzi do okolo 2000px, tresc bez zmian. */
@media (min-width: 769px) and (max-width: 1024px) {
  /* te same trzy selektory co w bloku wyzej, inaczej rodzenstwo po kaflu
     .aktywny wygrywa specyficznoscia i wraca do display:block (tekst laduje
     wtedy POD logo na pelnej szerokosci) */
  .bz-team-item,
  .bz-team-item.aktywny ~ .bz-team-item,
  .bz-team-item:hover ~ .bz-team-item { display: flex; align-items: center; gap: 24px; }
  .bz-team-item::after { display: none; }
  .bz-team-logo { float: none; width: 24%; flex: 0 0 24%; }
  .bz-team-info {
    position: static; float: none; width: auto; flex: 1 1 auto;
    height: auto; margin-top: 0; transform: none;
  }
  .bz-team-info-outer { padding: 0; }
  .bz-team-info-inner { padding: 0; }
}
/* (2026-08-09) 11 logotypow zamiast 8: ponizej 769px port produkcyjny pokazywal
   TYLKO rzad 2 (4 z 8 firm), a karuzela ≤568 wymagala przewijania, zeby zobaczyc
   reszte. Dowod spoleczny ma byc widoczny od razu, wiec ponizej 769px znikaja
   wszystkie rzedy z panelami rol, a wchodzi jedna siatka 2 kolumn z kompletem
   11 logotypow (opisy rol zostaja na desktopie, gdzie jest na nie miejsce). */
/* RUNDA 3 2026-08-10: blok skasowany. Ukrywal .bz-team na telefonie, przez co
   znikaly wszystkie role i opisy wdrozen. Zastapiony przez (R7) na koncu pliku. */
/* RUNDA 4 2026-08-10: blok .bz-projekty-mobil skasowany razem z markupem.
   Byl to DRUGI zestaw tych samych 11 logotypow, pokazywany tylko ponizej 768px,
   a od rundy 3 (R7) juz nawet tam ukryty: te same firmy stoja wyzej z rola
   i opisem. Martwy kod plus 11 pobran obrazow{ display: grid; grid-template-columns: 1fr 1fr 1fr; align-items: stretch; margin: 60px 0 0; } */
.bz-kontakt-dane { padding: 46px 55px 70px; }
.bz-kontakt-dane h3 { margin: 0 0 10px; }
.bz-kontakt-dane h3 span { color: var(--c-akcent); }
.bz-kontakt-linia { display: inline-flex; align-items: center; margin-top: 10px; min-height: 44px; color: var(--c-akcent); }
.bz-kontakt-linia [class^="bz-ico-"] { font-size: 16px; flex: none; }
.bz-kontakt-linia span + span { padding-left: 20px; }
.bz-kontakt-linia:hover { color: var(--c-akcent-ciemny); } /* h4 w oryginale */
@media (max-width: 1200px) { .bz-social-kafel [class^="bz-ico-"] { font-size: 48px; } .bz-social-kafel h3 { font-size: 18px; } }
@media (max-width: 1024px) {
  .bz-kontakt-dane { padding: 46px 35px 70px; }
}

/* ---------- formularz (1:1: CF7 cf7_custom_style_1 + qodef-gold-cf7) ---------- */
.bz-form { padding: 0 0 0 2px; display: flex; flex-direction: column; flex: 1; }
.bz-form p { margin: 0; }
.bz-form input[type="text"],
.bz-form input[type="email"],
.bz-form textarea {
  display: block; width: 100%; padding: 14px 35px 14px 60px;
  font-family: var(--font-tekst); font-size: 14px; font-weight: 300; line-height: 28px;
  color: var(--c-akcent);
  background: transparent;
  border: 0; border-bottom: 1px solid var(--c-linia); border-radius: 0;
  -webkit-appearance: none;
  transition: border-color .2s, color .2s;
}
.bz-form input::placeholder, .bz-form textarea::placeholder { color: var(--c-akcent); opacity: 1; }
.bz-form input:focus, .bz-form textarea:focus { outline: none; }
.bz-form input:focus-visible, .bz-form textarea:focus-visible { outline: 2px solid var(--c-granat); outline-offset: 2px; } /* fokus klawiatury widoczny, mysz bez zmian */
.bz-form input[aria-invalid="true"], .bz-form textarea[aria-invalid="true"] { border-color: #b3261e; }
.bz-form .bz-blad-pola { display: block; margin: 6px 0 0; font-size: 13px; line-height: 1.4; color: #b3261e; }
.bz-form textarea { height: 197px; resize: vertical; padding: 14px 35px 14px 34px; border-bottom: none; }
/* ikony w polach (gold-cf7: lnr user \e82a 15px / lnr envelope \e818 17px, left 34px, terakota) */
.bz-cf-pole { position: relative; display: block; }
.bz-cf-pole::before {
  font-family: 'Linearicons-Free'; position: absolute; left: 34px; z-index: 2;
  color: var(--c-akcent); pointer-events: none;
}
.bz-cf-imie::before  { content: '\e82a'; font-size: 15px; top: 21px; }
.bz-cf-email::before { content: '\e818'; font-size: 17px; top: 20px; }
.bz-form button[type="submit"] {
  margin-top: auto; width: 100%; height: 80px; border: 0; border-radius: 0;
  font-family: var(--font-naglowki); font-size: 14px; font-weight: 600;
  color: var(--c-akcent); background: #e8d9cf;
}
/* 1:1: hover submitu nie zmienia tła; tekst + strzałka jadą 8px w prawo, strzałka znika */
.bz-form .bz-btn-text { display: inline-block; position: relative; transition: all .3s ease; will-change: transform; }
.bz-form .bz-btn-text::after {
  content: '\f3d3'; font-family: 'Ionicons'; padding-left: 7px;
  position: relative; display: inline-block; transition: all .3s ease;
}
.bz-form button[type="submit"]:hover .bz-btn-text { transform: translateX(8px); }
.bz-form button[type="submit"]:hover .bz-btn-text::after { opacity: 0; transform: translateX(8px); }
.bz-form button[type="submit"]:disabled { opacity: .6; cursor: wait; }
/* (QA 2026-08-07) legenda pól wymaganych: reguła żyła tylko w <style> strony
   Kontakt, a formularz na home dostał ten sam znacznik "*", więc jedzie do
   arkusza wspólnego (selektor podwójny, bo .bz-form p { margin: 0 } wygrywa
   z samą klasą) */
.bz-form .bz-form-legenda { margin: 0 0 10px; font-size: 13px; line-height: 1.5; color: var(--c-tekst-czytanie); }
/* honeypot: pole "firma_www" ukryte przed ludźmi */
.bz-hp { position: absolute !important; left: -9999px !important; top: -9999px !important; height: 1px; overflow: hidden; }
.bz-form-status { display: none; margin: 0; padding: 14px 24px; font-weight: 400; }
.bz-form-status.ok { display: block; color: #2e7d32; }
.bz-form-status.blad { display: block; color: #b3261e; }

/* ---------- referencje z LinkedIn (1:1: qodef-testimonials-standard qodef-testimonials-wide-style) ----------
   Band na całą szerokość, tło #f5f1ed, ramki #e1ccc0. Górny pas 109px: numeracja 01-05 (380px,
   linia po prawej) + nagłówek terakota. Dolny pas 320px: JEDEN awatar 150px (crossfade) w boksie
   380px + pionowy slider cytatów (terakota italic). Wszystko zmierzone na produkcji. */
.bz-referencje { background: var(--c-tlo-cieple); }
.bz-ref-top { display: flex; width: 100%; border: 1px solid var(--c-linia-ref); border-left: none; }
.bz-ref-pag {
  width: 380px; height: 109px; flex: none;
  border-right: 1px solid var(--c-linia-ref);
  display: flex; align-items: flex-start; padding: 32px 0 0 90px; /* środek numerów jak na produkcji: x~117, y~50 */
}
.bz-ref-pag button {
  position: relative; width: 35px; height: 35px; margin: 0 8.5px; padding: 0;
  border: 0; background: transparent; border-radius: 50%;
  font-family: var(--font-tekst); font-size: 15px; font-weight: 600; line-height: 35px;
  color: var(--c-akcent); text-align: center;
}
.bz-ref-pag button::before {
  content: ''; position: absolute; inset: 0; border-radius: 50%;
  background: #e8d9cf; opacity: 0; transform: scale(.5); transition: .2s;
}
.bz-ref-pag button span { position: relative; z-index: 1; }
.bz-ref-pag button:hover::before, .bz-ref-pag button[aria-current="true"]::before { opacity: .6; transform: scale(1); }
.bz-ref-label { flex: 1; min-width: 0; padding: 15px 0; }
.bz-ref-label h2 { margin: 25px 0 25px 35px; font-size: 22px; line-height: 1.32em; font-weight: 600; color: var(--c-akcent); } /* h4 w oryginale */
.bz-ref-dol { display: flex; border-right: 1px solid var(--c-linia-ref); }
.bz-ref-awatary { position: relative; width: 380px; height: 320px; flex: none; border-right: 1px solid var(--c-linia-ref); }
.bz-ref-awatary img {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: 150px; height: 150px; border-radius: 50%; object-fit: cover;
  opacity: 0; transition: opacity .3s ease-in-out;
}
.bz-ref-awatary img.aktywny { opacity: 1; }
.bz-ref-okno { flex: 1; min-width: 0; height: 320px; overflow: hidden; }
.bz-ref-tor { transition: transform .6s ease; will-change: transform; }
.bz-referencja { height: 320px; margin: 0; display: flex; flex-direction: column; justify-content: center; }
.bz-referencja blockquote { margin: 0; }
.bz-referencja blockquote p {
  width: 60%; margin: 0 0 39px 35px;
  font-size: 20px; font-style: italic; line-height: 29px; color: var(--c-akcent);
}
.bz-referencja figcaption { margin: 24px 0 0; }
.bz-ref-imie { display: block; margin-left: 35px; font-family: var(--font-naglowki); font-size: 17px; font-weight: 600; line-height: 29px; color: var(--c-akcent); }
.bz-ref-rola { display: block; margin-left: 35px; font-size: 15px; font-weight: 400; font-style: italic; line-height: 29px; color: var(--c-akcent); }
@media (max-width: 1440px) { .bz-referencja blockquote p { width: 75%; } }
@media (max-width: 1024px) { .bz-referencja blockquote p { width: 90%; font-size: 17px; } }
@media (max-width: 768px) { .bz-referencje { display: none; } } /* mobile-none w oryginale */
@media (prefers-reduced-motion: reduce) { .bz-ref-tor { transition: none; } .bz-ref-awatary img { transition: none; } }

/* ---------- stopka (1:1: qodef-footer-top-holder #171717, full-width 50/50/10, tytuły CENTROWANE) ---------- */
.bz-stopka { background: var(--c-stopka); color: var(--c-stopka-tekst); }
.bz-stopka-gora {
  display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 30px;
  padding: 50px 50px 10px; /* 1:1: qodef-footer-top-inner.qodef-full-width, treść kolumn od x=50 */
}
.bz-stopka h2 { color: #fff; margin: 0 0 16px; font-size: 22px; line-height: 1.32em; text-align: center; } /* h4.qodef-widget-title: centrowany */
.bz-stopka p { color: var(--c-stopka-szary); font-size: 16px; margin: 0 0 10px; }
.bz-stopka-gora p { text-align: left; } /* kolumny do lewej, copyright zostaje wycentrowany */
.bz-stopka-social { text-align: center; margin-top: 41px; } /* 41px pod tytułem jak na produkcji (margines łączy się z mb tytułu) */
.bz-stopka-social a {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 44px; min-height: 44px;
  color: #fff; font-size: 14px; margin: 1px 0 0 5px;
}
/* 1:1: hover = biała aureola 27px opacity .2 (kolor ikony bez zmian) */
.bz-stopka-social a::after {
  content: ''; position: absolute; left: 50%; top: 50%; width: 27px; height: 27px;
  margin: -13.5px 0 0 -13.5px; border-radius: 50%; background: currentColor;
  opacity: 0; transform: scale(.5); transition: .2s;
}
.bz-stopka-social a:hover::after { opacity: .2; transform: scale(1); }
.bz-stopka-linia { display: flex; align-items: center; min-height: 27px; padding: 1px 0; line-height: 25px; color: var(--c-stopka-szary); font-size: 15px; }
.bz-stopka-linia:first-of-type { margin-top: 35px; } /* 35px pod akapitem jak na produkcji (margines łączy się z mb akapitu) */
.bz-stopka-linia:hover { color: #fff; }
.bz-stopka-linia [class^="bz-ico-"] { font-size: 16px; flex: none; }
.bz-copyright {
  padding: 0 0 10px; text-align: center; font-size: 16px;
  color: var(--c-copyright);
}
.bz-copyright p { margin: 0; color: var(--c-copyright); }
.bz-copyright a { color: var(--c-copyright); }
@media (max-width: 680px) { .bz-stopka-gora { grid-template-columns: 1fr; gap: 55px; padding: 50px 35px 10px; } } /* produkcja: 3 kolumny trzymają się do 681px */

/* ---------- back to top (1:1: #qodef-back-to-top: kółko 36px transparent, obwódka #cccfdd, strzałka granat) ---------- */
#bz-do-gory {
  position: fixed; right: 25px; bottom: 25px; z-index: 90;
  width: 41px; height: 41px; padding: 0;
  background: transparent; border: 0;
  display: none; align-items: center; justify-content: center;
}
#bz-do-gory.widoczny { display: inline-flex; }
.bz-do-gory-kolo {
  display: flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; border: 1px solid #cccfdd; border-radius: 5em;
  color: var(--c-granat); font-size: 14px; background: transparent; overflow: hidden;
}
.bz-do-gory-kolo .bz-ico-arrow-up { transition: transform .15s ease .05s; }
#bz-do-gory:hover .bz-ico-arrow-up { transform: translateY(-8px); transition: transform .2s cubic-bezier(1, -1.21, .25, 1.43); }
@media (prefers-reduced-motion: reduce) { #bz-do-gory:hover .bz-ico-arrow-up { transform: none; } }
@media (max-width: 600px) {
  h1 { font-size: 34px; }
  h2 { font-size: 32px; }
}

/* ---------- pomocnicze 1:1 z produkcji ---------- */
.mobile-none { display: revert; }
@media (max-width: 768px) { .mobile-none { display: none !important; } }
.desktop-none { display: none !important; }
@media (max-width: 768px) { .desktop-none { display: revert !important; } }

/* ---------- poprawki jakości wykonania (niewidoczne w wyglądzie produkcyjnym) ---------- */
a, button { touch-action: manipulation; }
.bz-skip { position: fixed; top: 8px; left: 8px; z-index: 4000; background: var(--c-granat); color: #fff; padding: 12px 18px; font-size: 15px; transform: translateY(-200%); }
.bz-skip:focus { transform: none; outline: 2px solid #fff; outline-offset: 2px; }
@media (max-width: 768px) { .bz-form input, .bz-form textarea { font-size: 16px; } } /* 15px < 16px = auto-zoom na iOS */

/* ============================================================
   KOMPONENTY LEAD-GEN (2026-08-04) : plan PLAN-ux-pod-leady.md
   Jedna rodzina CTA: ciemna terakota #9d4c24 (biały tekst 6,0:1).
   Bazowa terakota #b47759 na białym tekście = 3,7:1 (za mało),
   dlatego CTA używa --c-akcent-ciemny. Reszta w tokenach :root.
   ============================================================ */
:root {
  --c-cta: var(--c-akcent-ciemny);   /* tło primary CTA (#9d4c24) */
  --c-cta-hover: #8a421f;            /* hover primary CTA */
  --wys-pasek-mobile: 68px;          /* wysokość sticky paska (bez safe-area) */
}

/* ---------- przyciski CTA (pigułka 1:1 z .bz-btn, inna barwa) ---------- */
.bz-btn-cta { background: var(--c-cta); color: #fff; }
.bz-btn-cta:hover, .bz-btn-cta:focus-visible { background: var(--c-cta-hover); color: #fff; }
.bz-btn-outline { background: transparent; border-color: var(--c-granat); color: var(--c-granat); }
.bz-btn-outline:hover { background: rgba(41, 52, 120, .06); }
/* mikrotekst pod przyciskiem („30 minut, wychodzisz z 2-3 konkretnymi obserwacjami") */
.bz-btn-mikro { display: block; margin-top: 10px; font-size: 13px; line-height: 1.5; color: var(--c-tekst); }

/* ---------- hero: overlay + podtytuł + akcje (tylko home, klasa dodawana świadomie) ---------- */
/* Decyzja Rafala 2026-08-04: zdjecie hero BEZ przyciemnienia (czytelnosc = cien tekstu, efekt blizszy produkcji) */
.bz-hero-ciemny::before { content: none; }
.bz-hero-tresc { position: relative; z-index: 1; }
.bz-hero-tresc h1, .bz-hero-lead {
  text-shadow: 0 1px 3px rgba(22, 17, 13, .55), 0 8px 32px rgba(22, 17, 13, .35);
}
.bz-hero-lead {
  max-width: 620px; margin: 22px 0 0;
  font-size: 18px; line-height: 29px; font-weight: 300; color: #fff;
  animation: bz-fade-in-lewo .5s ease-out .09s both;
}
.bz-hero-akcje {
  display: flex; flex-wrap: wrap; align-items: flex-start; gap: 18px 20px;
  margin-top: 36px;
  animation: bz-fade-in-lewo .5s ease-out .18s both;
}
.bz-hero .bz-btn-outline { border-color: rgba(255, 255, 255, .75); color: #fff; }
.bz-hero .bz-btn-outline:hover { background: rgba(255, 255, 255, .12); }
.bz-hero .bz-btn-mikro { color: #fff; max-width: 320px; }
@media (max-width: 680px) {
  /* MOBILE HERO v2: podtytul 15px/1.6 (24px), rytm ciasniejszy, akcje wycentrowane */
  .bz-hero-lead { margin: 16px auto 0; max-width: 340px; text-align: center; font-size: 15px; line-height: 24px; }
  .bz-hero-akcje { flex-direction: column; align-items: center; gap: 14px; margin-top: 28px; }
  .bz-hero .bz-btn-mikro { text-align: center; margin-top: 8px; }
  /* H1 wycentrowany siega prawej (jasnej) strefy gradientu => na mobile overlay plaski .62 (kontrast >= 4.5:1) */
  .bz-hero-ciemny::before { background: rgba(22, 17, 13, .62); }
}

/* ---------- sekcja oferty wejściowej #druga-opinia (2 kolumny: treść + formularz) ---------- */
.bz-oferta { padding: 90px 40px; background: var(--c-tlo-cieple-2); scroll-margin-top: 80px; }
.bz-oferta-siatka {
  display: grid; grid-template-columns: 1fr 1fr; gap: 70px;
  max-width: var(--szer-grid); margin: 0 auto; align-items: start;
}
.bz-oferta-tresc h2 { margin-top: 0; }
.bz-oferta-lead { font-size: 17px; line-height: 28px; }
.bz-oferta-lista { margin: 25px 0 0; }
.bz-oferta-lista li { position: relative; padding-left: 26px; margin: 12px 0; }
.bz-oferta-lista li::before { content: ''; position: absolute; left: 0; top: 12px; width: 10px; height: 1px; background: var(--c-akcent); }
.bz-oferta-tel { margin-top: 28px; }
.bz-oferta-tel a { color: var(--c-akcent); font-weight: 600; white-space: nowrap; }
.bz-oferta-tel a:hover { color: var(--c-akcent-ciemny); }
/* biała karta formularza na ciepłym tle */
.bz-oferta-form { background: #fff; padding: 40px 35px 28px; display: flex; flex-direction: column; }
.bz-oferta-form .bz-form button[type="submit"] { margin-top: 25px; }
@media (max-width: 1200px) { .bz-oferta-siatka { gap: 50px; } }
@media (max-width: 768px) {
  .bz-oferta { padding: 60px 25px; }
  .bz-oferta-siatka { grid-template-columns: 1fr; gap: 40px; }
  .bz-oferta-form { padding: 32px 22px 24px; }
}

/* ---------- selecty formularza (język gold-cf7: terakota, dolna linia, chevron maską) ---------- */
.bz-form select {
  display: block; width: 100%; padding: 14px 55px 14px 34px;
  font-family: var(--font-tekst); font-size: 14px; font-weight: 300; line-height: 28px;
  color: var(--c-akcent);
  background: transparent;
  border: 0; border-bottom: 1px solid var(--c-linia); border-radius: 0;
  appearance: none; -webkit-appearance: none; -moz-appearance: none;
  cursor: pointer;
  transition: border-color .2s, color .2s;
}
.bz-form select:focus { outline: none; }
.bz-form select:focus-visible { outline: 2px solid var(--c-granat); outline-offset: 2px; }
.bz-form select[aria-invalid="true"] { border-color: #b3261e; }
.bz-form select option { color: var(--c-tekst); }
.bz-cf-select { position: relative; display: block; }
.bz-cf-select::after {
  content: ''; position: absolute; right: 35px; top: 50%; margin-top: -4px;
  width: 12px; height: 8px; pointer-events: none;
  background-color: var(--c-akcent);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23000' stroke-width='1.5'/%3E%3C/svg%3E") no-repeat center / contain;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23000' stroke-width='1.5'/%3E%3C/svg%3E") no-repeat center / contain;
}
/* ikona budynku przy polu „Firma" (Linearicons apartment, jak topbar) */
.bz-cf-firma::before { content: '\e801'; font-size: 16px; top: 20px; }
/* SLA pod przyciskiem formularza */
.bz-form-sla { margin: 14px 0 0; font-size: 13px; line-height: 1.5; color: var(--c-tekst); text-align: center; }
@media (max-width: 768px) { .bz-form select { font-size: 16px; } } /* anty auto-zoom iOS */

/* ---------- cytat przy formularzu (social proof przy punkcie decyzji) ---------- */
.bz-cytat { margin: 35px 0 0; padding: 2px 0 2px 24px; border-left: 1px solid var(--c-linia); }
.bz-cytat blockquote { margin: 0; }
.bz-cytat blockquote p { margin: 0; font-size: 17px; line-height: 27px; font-style: italic; color: var(--c-akcent); }
.bz-cytat figcaption { margin-top: 14px; }
.bz-cytat-osoba { display: block; font-family: var(--font-naglowki); font-size: 15px; font-weight: 600; color: var(--c-naglowek); }
.bz-cytat-rola { display: block; font-size: 14px; font-style: italic; color: var(--c-tekst); }
.bz-cytat-link { display: inline-block; margin-top: 10px; min-height: 24px; font-size: 14px; color: var(--c-akcent); border-bottom: 1px solid var(--c-linia); }
.bz-cytat-link:hover { color: var(--c-akcent-ciemny); border-color: var(--c-akcent-ciemny); }

/* ---------- blok CTA pod artykułem usługi (10 podstron consulting) ---------- */
.bz-cta-artykul { margin: 70px 0 0; padding: 55px 50px 60px; background: var(--c-tlo-cieple); text-align: center; }
.bz-cta-artykul h2 { margin: 0 0 12px; font-size: 28px; line-height: 1.25em; }
.bz-cta-artykul p { max-width: 640px; margin: 0 auto 10px; }
.bz-cta-artykul .bz-btn { margin-top: 28px; } /* CTA min. 24px od treści i krawędzi */
.bz-cta-artykul .bz-btn-mikro { margin-top: 12px; }
.bz-cta-artykul-tel { margin: 26px auto 0; font-size: 15px; }
.bz-cta-artykul-tel a { color: var(--c-akcent); font-weight: 600; white-space: nowrap; }
.bz-cta-artykul-tel a:hover { color: var(--c-akcent-ciemny); }
@media (max-width: 768px) { .bz-cta-artykul { padding: 45px 25px 50px; margin-top: 50px; } }

/* ---------- sticky pasek mobile (≤768px, pokazywany klasą .widoczny po ~100vh) ---------- */
.bz-pasek-mobile { display: none; }
@media (max-width: 768px) {
  .bz-pasek-mobile {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 220;
    display: flex; gap: 10px;
    padding: 10px 12px calc(10px + env(safe-area-inset-bottom));
    background: #fff; border-top: 1px solid #eee;
    box-shadow: 0 -6px 18px rgba(0, 0, 0, .08);
    visibility: hidden; transform: translateY(110%);
    transition: transform .25s ease, visibility 0s linear .25s;
  }
  .bz-pasek-mobile.widoczny { visibility: visible; transform: translateY(0); transition: transform .25s ease; }
  .bz-pasek-mobile a {
    flex: 1; display: inline-flex; align-items: center; justify-content: center;
    min-height: 48px; padding: 0 10px; border-radius: 5em;
    font-family: var(--font-naglowki); font-size: 14px; font-weight: 600;
  }
  .bz-pasek-btn-tel { border: 1px solid var(--c-granat); color: var(--c-granat); background: #fff; }
  .bz-pasek-btn-form { border: 1px solid transparent; background: var(--c-cta); color: #fff; }
  /* pasek widoczny = treść i elementy pływające NAD paskiem */
  body.bz-ma-pasek { padding-bottom: calc(var(--wys-pasek-mobile) + env(safe-area-inset-bottom)); }
  body.bz-ma-pasek #bz-do-gory { bottom: calc(var(--wys-pasek-mobile) + 12px + env(safe-area-inset-bottom)); }
  /* baner zgód nad pasek (wygrywa specyficznością z inline !important banera) */
  body.bz-ma-pasek #bz-consent { bottom: calc(var(--wys-pasek-mobile) + 12px + env(safe-area-inset-bottom)) !important; }
}
@media (prefers-reduced-motion: reduce) { .bz-pasek-mobile { transition: none; } }
.bz-kroki { list-style: none; counter-reset: bz-krok; margin: 20px 0 0; }
.bz-kroki li { position: relative; counter-increment: bz-krok; padding: 0 0 0 64px; margin: 28px 0; }
.bz-kroki li::before {
  content: counter(bz-krok, decimal-leading-zero);
  position: absolute; left: 0; top: 1px;
  font-family: var(--font-naglowki); font-size: 22px; line-height: 1.32em; font-weight: 600;
  color: var(--c-akcent);
}
.bz-kroki li h3 { margin: 0 0 6px; font-size: 17px; line-height: 1.35em; font-weight: 600; }
.bz-kroki li p { margin: 0; }
@media (max-width: 680px) {
  .bz-kroki li { padding-left: 52px; }
}

/* ---------- pas logotypów projektów (social proof, /kontakt/) ---------- */
.bz-loga-pas { padding: 55px 40px 50px; background: #fff; text-align: center; }
.bz-loga-tytul { margin: 0 0 30px; font-family: var(--font-naglowki); font-size: 22px; line-height: 1.32em; color: var(--c-naglowek); font-weight: 400; }
.bz-loga-siatka { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 10px 28px; max-width: var(--szer-grid); margin: 0 auto; }
.bz-loga-siatka img { width: 110px; height: auto; }
@media (max-width: 680px) {
  .bz-loga-pas { padding: 40px 25px 35px; }
  .bz-loga-siatka { gap: 6px 16px; }
  .bz-loga-siatka img { width: 76px; }
}

/* ============================================================
   SZABLON PODSTRONY v2 (2026-08-05) : Architekt
   Podstrony schodzą z układu starego WP na rytm home: pas tytułowy
   na czystym tle (beż/biel, bez zdjęć z błonami), artykuł w kolumnie
   czytelniczej + sidebar usług, CTA po artykule, siatka pozostałych
   usług POD nim, wariant prosty (polityka/mapa/dziekuje).
   Wszystko na tokenach :root. NIE zmienia niczego powyżej tej linii.
   ============================================================ */
:root {
  --c-tekst-czytanie: #595959; /* ink długiego czytania: 7,0:1 na bieli, 6,3:1 na beżu (bazowy #707070 = 4,5:1 tylko na bieli) */
  --szer-czytanie: 760px;      /* kolumna czytelnicza artykułu i wariantu prostego */
}

/* ---------- pas tytułowy podstrony (beż domyślnie, wariant biały) ---------- */
.bz-pas-tytul { padding: 78px 40px 66px; background: var(--c-tlo-cieple); }
.bz-pas-tytul-bialy { background: #fff; border-bottom: 1px solid #efece7; }
.bz-pas-tytul h1 { margin: 0; font-size: 42px; line-height: 1.19em; }
.bz-pas-lead { max-width: 680px; margin: 18px 0 0; font-size: 17px; line-height: 28px; font-weight: 300; color: var(--c-tekst-czytanie); }
/* breadcrumbs (opcjonalne, nad H1) */
.bz-okruszki { margin: 0 0 22px; }
.bz-okruszki ol { list-style: none; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; font-family: var(--font-naglowki); font-size: 12px; line-height: 1.6; letter-spacing: .08em; text-transform: uppercase; font-weight: 600; }
.bz-okruszki a { display: inline-block; padding: 4px 0; color: var(--c-akcent-ciemny); }
.bz-okruszki a:hover { color: var(--c-naglowek); }
.bz-okruszki li + li::before { content: '/'; margin-right: 10px; color: var(--c-akcent-jasny); font-weight: 400; }
.bz-okruszki [aria-current="page"] { color: var(--c-naglowek); }
@media (max-width: 1024px) { .bz-pas-tytul { padding: 55px 25px 46px; } }
@media (max-width: 600px) {
  .bz-pas-tytul h1 { font-size: 34px; }
  .bz-pas-lead { font-size: 15px; line-height: 25px; margin-top: 14px; }
  .bz-okruszki { margin-bottom: 16px; }
}

/* ---------- rytm czytelniczy (wspólny: artykuł + wariant prosty) ---------- */
.bz-czytanie { color: var(--c-tekst-czytanie); }
.bz-czytanie > :first-child { margin-top: 0; }
.bz-czytanie h2 { font-size: 28px; line-height: 1.25em; margin: 50px 0 16px; }
.bz-czytanie h3 { font-size: 20px; line-height: 1.35em; margin: 38px 0 12px; }
.bz-czytanie p { font-size: 16px; line-height: 27px; margin: 16px 0; }
.bz-czytanie a { color: var(--c-akcent-ciemny); border-bottom: 1px solid var(--c-linia); }
.bz-czytanie a:hover { border-color: currentColor; }
.bz-czytanie ul, .bz-czytanie ol { margin: 18px 0; }
.bz-czytanie ul li { position: relative; padding-left: 26px; margin: 10px 0; }
.bz-czytanie ul li::before { content: ''; position: absolute; left: 0; top: 13px; width: 10px; height: 1px; background: var(--c-akcent); }
.bz-czytanie ol { list-style: none; counter-reset: bz-poz; }
.bz-czytanie ol li { position: relative; counter-increment: bz-poz; padding-left: 34px; margin: 10px 0; }
.bz-czytanie ol li::before { content: counter(bz-poz, decimal-leading-zero); position: absolute; left: 0; top: 0; font-family: var(--font-naglowki); font-size: 13px; font-weight: 600; line-height: 27px; color: var(--c-akcent); }
/* wyróżnik cytatu w treści */
.bz-czytanie blockquote { margin: 32px 0; padding: 2px 0 2px 24px; border-left: 1px solid var(--c-linia); }
.bz-czytanie blockquote p { margin: 0; font-size: 19px; line-height: 30px; font-style: italic; color: var(--c-akcent-ciemny); }

/* ---------- siatka artykułu: treść + sidebar usług ---------- */
.bz-art { padding: 70px 40px 0; }
.bz-art-siatka {
  max-width: var(--szer-grid); margin: 0 auto;
  display: grid; grid-template-columns: minmax(0, var(--szer-czytanie)) 300px;
  justify-content: space-between; column-gap: 60px; align-items: start;
}
.bz-art-sidebar { position: sticky; top: 40px; }
.bz-art-etykieta { display: block; margin: 0 0 10px; font-family: var(--font-naglowki); font-size: 12px; line-height: 1.6; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--c-naglowek); }
.bz-art-nav ul { margin: 0; }
.bz-art-nav a {
  display: flex; align-items: center; gap: 16px;
  min-height: 52px; padding: 4px 0;
  border-bottom: 1px solid #ebebeb;
  font-family: var(--font-naglowki); font-size: 14px; font-weight: 600; color: var(--c-naglowek);
  transition: color .2s ease-out;
}
.bz-art-nav img { flex: none; display: block; width: 40px; height: 40px; }
.bz-art-nav a:hover { color: var(--c-akcent-ciemny); }
.bz-art-nav a[aria-current="page"] { color: var(--c-akcent-ciemny); box-shadow: inset 2px 0 0 var(--c-akcent); padding-left: 14px; }
@media (max-width: 1024px) {
  .bz-art { padding: 50px 25px 0; }
  .bz-art-siatka { display: block; }
  /* sidebar pod treścią, odcięty hairlinem */
  .bz-art-sidebar { position: static; margin-top: 55px; padding-top: 35px; border-top: 1px solid #ebebeb; }
}

/* ---------- CTA po artykule: dopracowanie v2 (blok .bz-cta-artykul bez zmian logiki) ---------- */
.bz-cta-artykul h2 { max-width: 620px; margin-left: auto; margin-right: auto; }

/* ---------- siatka pozostałych usług (POD blokiem CTA) ---------- */
.bz-uslugi-inne { padding: 65px 40px 75px; background: #fff; }
.bz-uslugi-inne-glowa { max-width: var(--szer-grid); margin: 0 auto 25px; }
.bz-uslugi-inne-glowa h2 { margin: 0; font-size: 22px; line-height: 1.32em; }
/* PRZEBUDOWA 2026-08-07 (Architekt): tor przewijany -> ZWARTA SIATKA.
   Bylo: flex + overflow-x, kafle .bz-usluga bez flex-basis kurczyly sie do
   177x435 px (zmierzone na 1280), tekst lamal sie po jednym slowie, 6 z 9
   pozycji stalo poza krawiedzia w ukrytym scrollu.
   Jest: siatka 5 kolumn na tym samym polu co siatka na home, ale w skali
   WTORNEJ (ikona 44 zamiast 68, nizszy kafel): sekcja czyta sie jak nawigacja
   po zakresie pod artykulem, nie jak drugie hero. Zero ukrytej tresci, zero
   swipe'a, zero poziomego scrolla. Puste pole przy 9 pozycjach znika w bezu
   kontenera. Hover i focus 1:1 z .bz-usluga (kaskada wyzej). */
.bz-uslugi-inne-tor {
  max-width: var(--szer-grid); margin: 0 auto;
  display: grid; grid-template-columns: repeat(5, 1fr);
  background: var(--c-tlo-cieple);
}
.bz-uslugi-inne-tor .bz-usluga { padding: 34px 20px 38px; }
.bz-uslugi-inne-tor .bz-usluga [class^="bz-ico-"] { font-size: 44px; }
.bz-uslugi-inne-tor .bz-usluga h3 { font-size: 15px; margin-top: 14px; }
.bz-uslugi-inne-tor .bz-usluga p { font-size: 13px; line-height: 1.54; margin-top: 7px; }
/* drabinka kolumn: kafel nigdy wezszy niz ~190px (--szer-grid / kolumny) */
@media (max-width: 1200px) { .bz-uslugi-inne-tor { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 1024px) {
  .bz-uslugi-inne-tor { grid-template-columns: repeat(3, 1fr); }
  .bz-uslugi-inne-tor .bz-usluga { padding: 30px 16px 34px; }
}
@media (max-width: 768px) {
  /* boki 16px zamiast 25px: przy 390px daje 179px na kafel zamiast 170px */
  .bz-uslugi-inne { padding: 46px 16px 54px; }
  .bz-uslugi-inne-tor { grid-template-columns: repeat(2, 1fr); }
  .bz-uslugi-inne-tor .bz-usluga { padding: 28px 14px 32px; }
  .bz-uslugi-inne-tor .bz-usluga [class^="bz-ico-"] { font-size: 46px; }
  .bz-uslugi-inne-tor .bz-usluga h3 { font-size: 15px; }
  .bz-uslugi-inne-tor .bz-usluga p { font-size: 13px; }
}
/* najwezsze telefony (SE 320px): 2 kolumny daja 147px na kafel, ponizej progu
   czytelnosci, wiec sekcja wtorna schodzi do jednej kolumny (zmierzone) */
@media (max-width: 359px) {
  .bz-uslugi-inne-tor { grid-template-columns: 1fr; }
  .bz-uslugi-inne-tor .bz-usluga { padding: 22px 18px 26px; }
}

/* ============================================================
   SWEEP MOBILE (2026-08-07) : Architekt
   Krawedzie 360/390/430, formularz, rytm pionowy. Wylacznie media
   queries mobile (desktop bez zmian). Blok na koncu pliku celowo:
   wygrywa kaskade z desktopowymi regulami formularza wyzej.
   ============================================================ */
@media (max-width: 768px) {
  /* chrome strony: rowne 16px od krawedzi */
  .bz-header-mobilny { padding: 0 16px; }
  .bz-pasek-mobile { padding: 10px 16px calc(10px + env(safe-area-inset-bottom)); }
  .bz-copyright { padding: 0 16px 10px; }
  /* projekty: jedyna sekcja z .bz-kontener bez wlasnego paddingu bocznego */
  .bz-projekty { padding: 40px 20px 20px; }
  /* rytm pionowy: tekst splitu nie startuje na styk z poprzednia sekcja */
  .bz-split-tekst { padding-top: 45px; }
  /* formularz: pola dostaja realna szerokosc (mniejszy martwy lewy padding),
     ikony gold-cf7 zostaja, tylko blizej krawedzi pola */
  .bz-form input[type="text"], .bz-form input[type="email"] { padding: 14px 16px 14px 52px; }
  .bz-cf-pole::before { left: 20px; }
  .bz-form select { padding: 14px 44px 14px 16px; }
  .bz-cf-select::after { right: 20px; }
  /* textarea: max ~5 wierszy zamiast 197px pustki; bez ikony = bez wciecia 34px */
  .bz-form textarea { height: 150px; padding: 14px 16px; }
  /* status wysylki: normalna wielkosc, oddech, nie krzyczy na cala szerokosc
     (selektor .bz-form .bz-form-status: margines musi wygrac z .bz-form p) */
  .bz-form .bz-form-status { margin: 14px 0 0; padding: 0; font-size: 15px; line-height: 1.5; }
}
/* ---------- pigulki na mobile (KONTRAKT 2026-08-07) ----------
   Regula Rafala: (1) pigulka nigdy nie lamie tekstu (nowrap w bazie),
   (2) na mobile przycisk akcji stoi WYCENTROWANY w kolumnie tresci
   (koniec z sierotami przy lewej krawedzi typu "Consulting"),
   (3) padding boczny 30px, zeby najdluzszy tekst ("Umow rozmowe
   diagnostyczna") miescil sie w jednej linii na 360px.
   margin-inline zamiast margin, by nie nadpisac rytmow margin-top. */
@media (max-width: 768px) {
  .bz-btn {
    display: flex; width: max-content; max-width: 100%;
    margin-inline: auto; justify-content: center;
    padding: 12px 30px;
  }
  .bz-split-tekst .bz-btn-mikro, .bz-dziekuje-tresc .bz-btn-mikro { text-align: center; }
}
@media (max-width: 680px) {
  .bz-split-tekst { padding-top: 40px; }
  /* naprawa martwej reguly: globalne content:none (decyzja desktop 2026-08-04) kasowalo
     pseudoelement, wiec mobilny overlay .62 z reguly nizej nigdy sie nie renderowal;
     tu komplet wlasciwosci, by H1/lead na jasnej strefie zdjecia trzymaly kontrast >= 4.5:1 */
  .bz-hero-ciemny::before { content: ''; position: absolute; inset: 0; background: rgba(22, 17, 13, .62); pointer-events: none; }
}

/* ============================================================
   SWEEP ATRAKCYJNOSCI (2026-08-07) : Architekt
   Wdrozenie potwierdzonych findings z audytu atrakcyjnosci
   (kontrasty wyliczone, stany sprawdzone na zywo 390/1280).
   Wylacznie tokeny :root, zero nowych kolorow. Blok na koncu
   pliku celowo: nadpisuje kaskade regul komponentowych wyzej.
   ============================================================ */

/* (P0) submit formularza = primary CTA, nie "disabled".
   Bylo: terakota #b47759 na #e8d9cf, kontrast 2,67:1 w punkcie decyzji.
   Teraz: biel na --c-cta (#9d4c24) 6,0:1, jedna rodzina z .bz-btn-cta.
   Uwaga: NIE #b47759 pod bialym tekstem (3,67:1, zakaz z KONWENCJE). */
.bz-form button[type="submit"] {
  background: var(--c-cta);
  color: #fff;
  transition: background-color .2s ease-in-out;
}
.bz-form button[type="submit"]:hover,
.bz-form button[type="submit"]:focus-visible { background: var(--c-cta-hover); }

/* (P1) kafle uslug: opis czytelny (--c-tekst-czytanie 6,2:1 na bezu,
   bylo 3,26:1), tytul zostaje terakotowym akcentem; ikony CELOWO bez
   zmian (faktura tla, przyciemnienie = nowy kolor spoza tokenow) */
.bz-usluga p { color: var(--c-tekst-czytanie); }

/* (P1, 2026-08-07 runda kafli) tytul kafla uslugi: #b47759 na bezu = 3,26:1
   (ZMIERZONE w przegladarce), a h3 ma 15-17px/600, wiec nie jest "large text"
   i obowiazuje prog 4,5:1. Ten sam #9d4c24 mial wczesniej tytul karty
   w "Pozostalych uslugach" (.bz-usluga-karta h3), wiec to powrot do koloru,
   ktory ta sekcja juz nosila: 5,35:1 na bezu, 6,03:1 na bieli. Zero nowych
   tokenow, ta sama rodzina terakoty, jasna terakota zostaje w ikonach. */
.bz-usluga h3 { color: var(--c-akcent-ciemny); }

/* (P1) cytaty i podpisy referencji + numeracja 01-05: bazowa terakota
   3,26:1 na bezu -> ciemna 5,35:1; charakter (italic) zostaje */
.bz-referencja blockquote p,
.bz-ref-imie,
.bz-ref-rola,
.bz-ref-pag button,
.bz-cytat blockquote p { color: var(--c-akcent-ciemny); }

/* (P2) sekcje 50/50 na home: etykiety i liczby dowodu w kolorze
   naglowka, akapit zostaje szary = hierarchia w scianie tekstu */
.bz-split-tekst p strong { color: var(--c-naglowek); }

/* (P2) sidebar uslug podstron: aktywna pozycja = podswietlony wiersz
   zamiast bocznego paska 2px (anty-wzorzec side-stripe z PRODUCT.md) */
.bz-art-nav a[aria-current="page"] {
  box-shadow: none;
  background: var(--c-tlo-cieple);
  padding-left: 12px; padding-right: 12px;
  margin-left: -12px; margin-right: -12px;
}

/* (P2) hub consulting: "wiecej..." wyglada jak link, nie jak szary
   ogon akapitu (bylo 12px w kolorze tekstu, zero affordancji) */
.bz-wiecej {
  font-size: 13px;
  color: var(--c-akcent-ciemny);
  border-bottom: 1px solid var(--c-linia);
  transition: color .2s ease-out, border-color .2s ease-out;
}
a:hover .bz-wiecej, a:focus-visible .bz-wiecej { color: var(--c-naglowek); border-color: currentColor; }

/* (P1) kotwice CTA celuja prosto w formularz: oddech od gornej
   krawedzi (mobile: fixed header 60px + 24px) */
#bz-formularz { scroll-margin-top: 84px; }

/* (P1) paski kompetencji: animacja 600 ms (JS liczy licznik od cel-15){ transition-duration: .6s; }

@media (max-width: 768px) {
  /* (P1) stopka: kolo back-to-top zaslanialo linki "Mapa strony /
     Prywatnosc" (kolizja zmierzona na 390); oddech pod copyrightem */
  .bz-copyright { padding-bottom: 78px; }
  /* USUNIETE 2026-08-07: `.bz-uslugi { background:#fff }`. Bialy override
     istnial tylko po to, by na bezu bylo widac granice bezowych slajdow
     karuzeli. Karuzela nie istnieje, a override rozjezdzal ten sam komponent:
     kafle na mobile stawaly na bieli, a te same kafle na desktopie i w sekcji
     "Pozostale uslugi" na bezu. Tlo wraca do --c-tlo-cieple na kazdej szerokosci. */
}

/* ============================================================
   RUNDA DOPRACOWAN (2026-08-07) : Architekt
   (1) referencje widoczne na mobile, (2) rytm sekcji 50/50 na home,
   (3) hover pigulek i menu desktop. Wylacznie tokeny :root.
   Blok na koncu pliku celowo: nadpisuje kaskade regul wyzej.
   ============================================================ */

/* ---------- (1) REFERENCJE NA MOBILE ----------
   Band desktopowy (numeracja + crossfade awatara + pionowy slider) nie ma
   sensu na 390, wiec ponizej 768px zmienia sie w czytana kolumne:
   rzad 5 twarzy (dowod: pieciu ludzi) + 2 rekomendacje PL + link do reszty.
   Slajdy 1/4/5 sa ukryte (nie usuniete: tresc bez zmian, desktop bez zmian),
   bo cytat Filipa Iwanskiego stoi juz przy formularzu w #druga-opinia,
   a sekcja ma zmiescic sie w ~jednym ekranie. */
#referencje { scroll-margin-top: 84px; } /* kotwica "Zobacz, jak pracuje" pod fixed headerem 60px */
.bz-ref-mobil-link { display: none; }
@media (max-width: 768px) {
  .bz-referencje { display: block; padding: 46px 20px 50px; }
  .bz-ref-top { display: block; border: 0; }
  .bz-ref-pag { display: none; }          /* numeracja 01-05 = sterowanie sliderem, na mobile bez zadania */
  .bz-ref-label { padding: 0; }
  .bz-ref-label h2 { margin: 0 0 20px; font-size: 20px; }
  .bz-ref-dol { display: block; border: 0; }
  /* awatary: z crossfade w boksie 380px na rzad twarzy */
  .bz-ref-awatary {
    position: static; display: flex; flex-wrap: wrap; gap: 8px;
    width: auto; height: auto; border: 0; margin: 0 0 24px;
  }
  .bz-ref-awatary img {
    position: static; transform: none; opacity: 1;
    width: 46px; height: 46px;
  }
  /* okno slidera: zwykly przeplyw (JS dalej ustawia transform na torze) */
  .bz-ref-okno { height: auto; overflow: visible; }
  .bz-ref-tor { transform: none !important; will-change: auto; }
  .bz-referencja { height: auto; display: block; }
  .bz-referencja:nth-child(1),
  .bz-referencja:nth-child(4),
  .bz-referencja:nth-child(5) { display: none; }
  .bz-referencja + .bz-referencja { margin-top: 24px; padding-top: 24px; border-top: 1px solid var(--c-linia-ref); }
  /* pierwszy WIDOCZNY cytat bez kreski (poprzednik jest ukryty, ale wciaz sasiadem) */
  .bz-referencja:nth-child(2) { margin-top: 0; padding-top: 0; border-top: 0; }
  .bz-referencja blockquote p { width: auto; margin: 0; font-size: 16px; line-height: 26px; }
  .bz-referencja figcaption { margin: 14px 0 0; }
  .bz-ref-imie { margin-left: 0; font-size: 15px; line-height: 23px; }
  .bz-ref-rola { margin-left: 0; font-size: 13px; line-height: 20px; }
  .bz-ref-mobil-link { display: block; margin: 26px 0 0; }
  .bz-ref-mobil-link a {
    display: inline-block; min-height: 24px; padding: 5px 0;
    font-size: 14px; color: var(--c-akcent-ciemny);
    border-bottom: 1px solid var(--c-linia);
  }
  .bz-ref-mobil-link a:hover { color: var(--c-naglowek); border-color: currentColor; }
}

/* ---------- (2) RYTM SEKCJI 50/50 NA HOME ----------
   Trzy splity pod rzad czytaly sie jak jeden dlugi blok. Srodkowa
   (dowody + CTA) siada na cieplym bezu, skrajne zostaja biale, a kolumna
   tekstu dostaje wiecej powietrza pionowego. Klasy tylko na home. */
.bz-split-cieply { background: var(--c-tlo-cieple); }
/* na bezu bazowy #707070 spada ponizej 4,5:1, wiec ink czytelniczy 6,3:1 */
.bz-split-cieply .bz-split-tekst { color: var(--c-tekst-czytanie); }
@media (min-width: 769px) {
  .bz-split-home .bz-split-tekst { padding-top: 7.5%; padding-bottom: 7.5%; }
}

/* ---------- (3) HOVERY (swiadome odejscie od 1:1 z WP) ----------
   Pigulka solid ciemnieje o jeden krok w rodzinie granatu (tekst #293478
   na #c9ccdd = 7,2:1), menu desktop reaguje kolorem{ background: var(--c-granat-tor); }
.bz-menu a { transition: color .18s ease-out; }
.bz-menu a:hover { color: var(--c-akcent-ciemny); }
.bz-strona-hero .bz-menu a:hover {
  color: #fff;
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 8px;
}

/* ============================================================
   SWEEP ULTRA-WIDE + TABLET (2026-08-09) : Architekt
   Zgloszenie Rafala z ekranu ~2000px: "co to jest???".
   ZMIERZONE PRZED (2000px): .bz-usluga 400x335 (na 1280 ma 256),
   .bz-split-foto 1000x640 obok kolumny tekstu 1000x905, .bz-team
   1955, .bz-referencja 1619, .bz-stopka-gora 2000, a .bz-kontener
   caly czas 1300 @350. Dwie rozne osie na jednym ekranie, stad
   wrazenie zepsutego ukladu.
   KONTRAKT: tla sekcji zostaja pelnoekranowe, TRESC kazdej sekcji
   siada na tej samej osi --szer-grid (1300px od 1400px wzwyz).
   Ponizej 1400px geometria bez zmian (poza kaflami uslug na
   tablecie, patrz nizej). Zero nowych kolorow, zero zmian tresci.
   ============================================================ */
@media (min-width: 1400px) {
  /* sekcje z wlasnym tlem: wciecie zamiast max-width, zeby tlo
     dalej szlo na cala szerokosc okna */
  .bz-split,
  .bz-projekty { padding-inline: calc((100% - var(--szer-grid)) / 2); }
  /* tor logotypow mial 45px marginesu z prawej (port vc_row); po wcieciu
     konczylby sie 45px przed prawa osia strony, wiec margines znika */
  .bz-team { margin-right: 0; }

  /* hero: H1 startuje na osi siatki (bylo 100px od krawedzi okna,
     reszta strony 350px) */
  .bz-hero-tresc { max-width: var(--szer-grid); margin-inline: auto; padding-inline: 0; }

  /* kafle uslug: 5 x 260px zamiast 5 x 400px.
     2026-08-09 (runda 3): os przenosi sie z .bz-uslugi-rzad na .bz-uslugi-rzady,
     bo rzedy sa juz `display: contents` i obie dziesiatki kafli siedza w JEDNEJ
     siatce rodzica (inaczej odstep 1px stalby tylko wewnatrz rzedu, a miedzy
     rzedami nie). */
  .bz-uslugi-rzady { max-width: var(--szer-grid); margin-inline: auto; }

  /* kompetencje / referencje / stopka: ta sama os */
  .bz-kompetencje-inner { max-width: var(--szer-grid); margin-inline: auto; }
  /* ramka bandu referencji byla otwarta z lewej, bo na pelnej szerokosci
     "wychodzila" poza ekran; po wcieciu domykamy ja, zeby czytala sie
     jak swiadoma karta, a nie jak ucieta tabela */
  .bz-ref-top, .bz-ref-dol { max-width: var(--szer-grid); margin-inline: auto; }
  .bz-ref-top { border-left: 1px solid var(--c-linia-ref); }
  .bz-ref-dol { border-left: 1px solid var(--c-linia-ref); border-bottom: 1px solid var(--c-linia-ref); }
  /* stopka ma wlasny padding 50px, wiec kolumny siadaja na osi przy +100 */
  .bz-stopka-gora { max-width: calc(var(--szer-grid) + 100px); margin-inline: auto; }
}

/* panel roli w "Projekty": drabinka left:374/282/272/250px byla
   kalibrowana pod pelna szerokosc okna i przy wciecu 1300px minelaby
   sie ze slotem o ponad 120px. Zamiana na miare wzgledna: panel = jeden
   slot w prawo (100% szerokosci kafla + 8px), sasiedzi odjezdzaja o jeden
   slot (20% toru + 8px). Dziala na kazdej szerokosci, bez drabinki. */
@media (min-width: 1025px) {
  .bz-team-item .bz-team-info { left: calc(100% + 8px); }
  .bz-team-item.aktywny ~ .bz-team-item,
  .bz-team-item:hover ~ .bz-team-item { left: calc(20% + 8px); }
  .bz-team-item:last-child .bz-team-info { left: calc(-100% - 8px); }
  /* rzad 3 ma 3 kafle na 5 slotach, wiec panel ostatniego kafla ma wolne
     miejsce po PRAWEJ: odbicie w lewo (potrzebne tylko przy pelnym rzedzie)
     tu tylko zaslanialoby sasiada, wiec kierunek zostaje w prawo */
  .bz-team-3 .bz-team-item:last-child .bz-team-info { left: calc(100% + 8px); }
}

/* ---------- hero: czytelnosc bialego tekstu (ZMIERZONE) ----------
   Jasnosc tla pod H1: L=0,40 (2000px), 0,42 (1440), 0,43 (1280),
   0,42 (810) => bialy H1 ma 2,2-2,3:1, czyli mniej niz prog 3:1 dla
   duzego tekstu; lead 18px jest w tym samym miejscu i ma prog 4,5:1.
   Decyzja Rafala z 2026-08-04 brzmiala "zdjecie hero BEZ przyciemnienia",
   wiec nie wraca plaski wash na cale zdjecie (taki jest tylko <=680px).
   Zamiast tego kurtyna kierunkowa: ciemnieje wylacznie lewa strefa pod
   kolumna tekstu, sylwetka i prawa czesc kadru zostaja bez zmian.
   DO AKCEPTACJI RAFALA: to jedyna zmiana dotykajaca tamtej decyzji. */
@media (min-width: 681px) {
  .bz-hero-ciemny::before {
    content: ''; position: absolute; inset: 0; pointer-events: none;
  }
}
/* Zasieg kurtyny idzie za kolumna tekstu, bo jej udzial w szerokosci okna
   zmienia sie skokowo: na 810 lead konczy sie na 81% szerokosci, na 1280
   na 63%, a od 1400 (tresc na osi 1300) juz na 53%. Stad trzy progi.
   Sila .52 wynika z pomiaru: w kadrze sa przepalone punkty (lampy, tablica),
   wiec zeby bialy tekst mial ~4,3:1 nawet na nich, trzeba scisnac biel
   do ok. 0,48 luminancji sRGB. */
@media (min-width: 681px) and (max-width: 1024px) {
  .bz-hero-ciemny::before {
    background: linear-gradient(to right, rgba(22, 17, 13, .52) 0%, rgba(22, 17, 13, .52) 88%, rgba(22, 17, 13, .30) 100%);
  }
}
@media (min-width: 1025px) and (max-width: 1199px) {
  /* H1 ma tu stale 701px przy wcieciu 100px, wiec konczy sie az na 78-84%
     szerokosci okna: kurtyna musi siegac dalej niz na 1280 */
  .bz-hero-ciemny::before {
    background: linear-gradient(to right, rgba(22, 17, 13, .52) 0%, rgba(22, 17, 13, .52) 86%, rgba(22, 17, 13, .18) 100%);
  }
}
@media (min-width: 1200px) and (max-width: 1399px) {
  .bz-hero-ciemny::before {
    background: linear-gradient(to right, rgba(22, 17, 13, .52) 0%, rgba(22, 17, 13, .52) 74%, rgba(22, 17, 13, 0) 97%);
  }
}
@media (min-width: 1400px) {
  .bz-hero-ciemny::before {
    background: linear-gradient(to right, rgba(22, 17, 13, .52) 0%, rgba(22, 17, 13, .52) 56%, rgba(22, 17, 13, 0) 84%);
  }
}

/* ---------- kafle uslug na tablecie 769-1024 ----------
   ZMIERZONE na 810: 5 kolumn = kafel 162x360, opis lamal sie na 5 linii
   po 2-3 slowa ("kontakty, ktore / przyczynia sie do / budowania /
   przewag Twojej / marki"). 10 kafli dzieli sie rowno tylko na 2 albo 5
   kolumn, wiec tablet dostaje ten sam uklad 2 kolumn co telefon. */
@media (min-width: 769px) and (max-width: 1024px) {
  .bz-uslugi-rzady { display: grid; grid-template-columns: repeat(2, 1fr); }
  .bz-uslugi-rzad { display: contents; }
  .bz-usluga { padding: 45px 24px 50px; }
  /* h2 42px w kolumnie splitu szerokiej na 405px lamalo naglowek na 4 linie
     ("Zewnetrzny / doradca to / mierzalne / efekty:"); 30px daje 2-3 linie */
  .bz-split-tekst h2 { font-size: 30px; line-height: 1.22em; }
}
/* miara opisu w kaflu nie rozjezdza sie razem z kaflem (dziala tam,
   gdzie kafel jest szerszy niz ~300px; na 1280 i wezej bez efektu) */
.bz-usluga h3, .bz-usluga p { max-width: 300px; margin-inline: auto; }

/* ---------- zdjecie zamykajace sekcje uslug ----------
   To osierocony .bz-split-foto wpiety wprost w <section class="bz-uslugi">
   (index.html, linia 227), a nie polowa zadnego splitu. Przy width:50%
   dawalo na desktopie blok 1000x640 przy lewej krawedzi i rowna mu pustke
   po prawej, tuz nad kolejnym zdjeciem tej samej osoby: dokladnie to,
   co Rafal opisal jako "dwa zdjecia jedno pod drugim po lewej".
   Od 769px robi sie z tego pelnoekranowy pas zdjecia (jedyny element,
   ktory na ultra-wide MA prawo isc od krawedzi do krawedzi), z wysokoscia
   plynna zamiast sztywnych 640px. Na mobile bez zmian (juz byl pasem). */
@media (min-width: 769px) {
  .bz-uslugi > .bz-split-foto {
    width: 100%; min-height: 0; height: clamp(260px, 20vw, 400px);
    /* kadr: przy poziomym pasie "center" tnie glowe w polowie, wiec punkt
       kadrowania idzie w gore (zmierzone na 2000/1440/810) */
    background-position: 50% 16%;
  }
}

/* ---------- formularz: kontrast pol (ZMIERZONE) ----------
   Tekst i placeholder mialy --c-akcent #b47759 na bieli = 3,67:1,
   a placeholder jest jedyna widoczna etykieta pola. Ta sama rodzina
   terakoty, krok ciemniejszy: #9d4c24 = 6,01:1. Ikony pol zostaja
   w #b47759 (grafika nietekstowa, prog 3:1, ma 3,67:1). */
.bz-form input[type="text"],
.bz-form input[type="email"],
.bz-form textarea,
.bz-form select { color: var(--c-akcent-ciemny); }
.bz-form input::placeholder,
.bz-form textarea::placeholder { color: var(--c-akcent-ciemny); opacity: 1; }

/* ---------- stopka: cel klikniecia linkow copyright ----------
   "Mapa strony" i "Prywatnosc & cookies" mialy 22px wysokosci
   (zmierzone na 390), prog to 24px. */
.bz-copyright a { display: inline-block; padding-block: 3px; }

/* ---------- rowna lewa krawedz tekstu w formularzu ----------
   Trzy rozne wciecia w jednej kolumnie pol (ZMIERZONE): input 60px
   (ikona), select 34px, textarea 34px na desktopie; na mobile
   odpowiednio 52 / 16 / 16. Placeholder jest tu jedyna etykieta, wiec
   te trzy schodki czytaly sie jak blad skladu. Jedna linia startu
   tekstu = linia inputow; ikony i strzalka selecta bez zmian. */
.bz-form select, .bz-form textarea { padding-left: 60px; }
@media (max-width: 768px) {
  .bz-form select, .bz-form textarea { padding-left: 52px; }
}

/* ============================================================
   RYTM I GESTOSC (2026-08-09, runda 2), Architekt
   Poprzedni sweep sprowadzil wszystkie sekcje na jedna os
   (--szer-grid), ale zostawil cztery miejsca, w ktorych PIONOWY
   rytm sie sypie i ekran czyta sie jako pusty. Kazda pozycja
   ponizej ma pomiar PRZED (2000px, chyba ze napisano inaczej).
   Zero nowych kolorow, zero zmian tresci, zero zmian osi poziomej.
   ============================================================ */

/* (1) Pas zdjecia zamykajacy uslugi dotykal zdjecia z kolejnej sekcji.
   ZMIERZONE: pas konczyl sie na y=2221, a kolumna foto splitu zaczynala
   sie na y=2221, czyli dwa kadry tej samej osoby stykaly sie w zero
   pikseli. Bezowa przerwa oddziela je jako dwa osobne bloki. */
@media (min-width: 769px) {
  .bz-uslugi { padding-bottom: clamp(48px, 4vw, 80px); }
}

/* (2) Kafle uslug: kafel mial 360px wysokosci przy 215px tresci,
   wiec miedzy rzedem 1 a 2 stalo 145px pustki (dolny padding 75 +
   gorny 70), czyli PIEC razy wiecej niz odstep ikona-tytul w kaflu.
   Dwa rzedy czytaly sie jak dwie niepowiazane sekcje. Nowe paddingi
   daja kafel ~322px i przerwe 108px, dalej wygodny cel klikniecia. */
@media (min-width: 1201px) {
  .bz-usluga { padding: 52px 28px 56px; }
}

/* (3) "Projekty", rzad 3: SPRAWDZONE I ODRZUCONE.
   Rzedy 1-2 maja po 4 logotypy, rzad 3 ma 3, wiec przy prawej krawedzi
   zostaje wolny slot. Probowalem wysrodkowac rzad 3 transformem
   translateX(10%): na 2000 wygladalo dobrze, ale na 1440 rzad wyjechal
   na 200..1500px przy oknie 1440 (panel roli 1253..1511 poza ekranem,
   maskowany tylko przez overflow-x: clip na sekcji). Powod: przesuniecie
   rodzenstwa po aktywnym kaflu ma INNA wartosc na kazdym progu
   (379 / 286 / 272 / 255px), wiec staly procent nie centruje niczego
   poza jedna szerokoscia. Wspolna lewa krawedz wszystkich trzech rzedow
   jest zreszta poprawniejsza niz centrowanie ostatniego. Bez zmiany. */

/* (4) Tablet 769-1024: logotyp to kwadratowy PNG 365x365 z duzym
   bialym marginesem w pliku. Przy szerokosci 24% toru dawal kafel
   180x180px, wiec KAZDA pozycja miala ~200px wysokosci przy ~110px
   tresci: sekcja "Projekty" urosla do 2193px (ZMIERZONE na 810).
   Limit wysokosci obrazu zdejmuje bialy margines z rytmu.
   ZMIERZONE (canvas, bbox tuszu wszystkich 11 plikow): tusz zajmuje
   3-35% wysokosci kadru i 29-82% szerokosci, reszta to bialy margines.
   Dlatego kadr jest przycinany (cover), a nie skalowany (contain):
   przy oknie 92px z kwadratu 365px zostaje srodkowe 51% wysokosci,
   czyli z zapasem wiecej niz najwyzszy tusz (35%, taniaksiazka.pl).
   Zaden znak nie jest przyciety, a sam znak jest DWA razy wiekszy
   niz przy contain. */
@media (min-width: 769px) and (max-width: 1024px) {
  .bz-team-logo img { height: 92px; object-fit: cover; object-position: center; }
}

/* (5) SPRAWDZONE I NIEAKTUALNE: dotyczylo .bz-projekty-mobil, usunietego
   w rundzie 4 razem z markupem (patrz komentarz przy linii ~518). */

/* (6) Stopka na ultra-wide: trzy rowne kolumny na torze 1400px daja
   srodkowej ("Odwiedz mnie na") 466px na tytul i cztery ikony, czyli
   ~200px pustki pod nimi (ZMIERZONE na 2000). Kolumny skrajne niosa
   akapity, wiec dostaja wiecej toru, srodkowa tyle, ile potrzebuje. */
@media (min-width: 1400px) {
  .bz-stopka-gora { grid-template-columns: 1.15fr .7fr 1.15fr; }
}

/* (7) Hero: wejscie H1 / leadu / CTA szlo z fill-mode "both", wiec do
   konca animacji te trzy elementy mialy opacity 0. ZMIERZONE opoznienia
   przed zmiana: H1 0,3s + 0,8s, lead 0,45 + 0,8, CTA 0,6 + 0,8, czyli
   glowny przycisk pojawial sie dopiero w 1,4 sekundy, a tekst H1
   (kandydat na LCP) w 1,1. Zostaje ten sam ruch i ta sama kolejnosc,
   tylko caly wjazd konczy sie w 0,68s: 0 / 0,09 / 0,18 + 0,5s.
   Reguly zmienione w miejscu (linie ~290, ~772, ~777). */

/* ============================================================
   RUNDA 3 (2026-08-09) : Architekt.
   Sweep ultra-wide zalatal geometrie (os 1300px, brak overflow),
   ale krytyk zdjal ocene na rzeczach, ktore klient premium widzi
   od razu: wyblakle ikony, brak odstepu miedzy kaflami, zimna
   paleta granatowo-lawendowa obok terakoty, pole "wiadomosc" bez
   ramki, referencje na mobile pokazujace 2 z 5.
   KONTRAKT: wylacznie tokeny :root (zero nowych wartosci kolorow),
   zero zmian tresci merytorycznej, zero zmian SEO i pomiaru.
   Blok na koncu pliku celowo: nadpisuje kaskade wyzej.
   ============================================================ */

/* ---------- (1) DRUGA PALETA WYCHODZI Z SERWISU ----------
   Na cieplej palecie (terakota #b47759 / #9d4c24, bez #f5f1ed,
   grafit #171717) siedziala druga, zimna: granat #293478 z lawenda
   #e3e2ed i torem #c9ccdd. Nosily ja: pigulka "Consulting", paski
   kompetencji, napis tlowy "My Skills", wykres kolowy na /o-mnie/,
   pierscien fokusa i skip-link. Zadna z tych rzeczy nie jest
   sygnalem marki, wiec zamiast lokalnych latek trzy tokeny granatu
   wskazuja teraz na WARTOSCI, ktore w tym serwisie juz sa
   (grafit stopki + dwa stopnie bezu). Komponenty, kaskada i
   geometria bez zmian: podmieniony jest sam pigment.
   KONTRAST PO ZMIANIE (policzony):
   - .bz-btn solid: #171717 na #efe8df = 15,0:1 (bylo 8,7:1)
   - .bz-btn solid hover: #171717 na #dbc1b2 = 10,4:1
   - wypelnienie paska: grafit na torze #dbc1b2 = 10,6:1 */
:root {
  --c-granat: var(--c-stopka);              /* #171717 grafit, byl #293478 */
  --c-granat-jasny: var(--c-akcent-hover);  /* #efe8df bez, byl #e3e2ed lawenda */
  --c-granat-tor: var(--c-linia);           /* #dbc1b2 linia, byl #c9ccdd */
}
/* Pierscien fokusa jest teraz grafitowy, wiec na ciemnych powierzchniach
   (hero, stopka, pas tytulowy ze zdjeciem) zniknalby. Druga, biala
   obwodka trzyma go widocznym na KAZDYM tle, jasnym i ciemnym.
   Geometria: outline zajmuje pasmo 2-4px od krawedzi (offset 2 + grubosc 2),
   wiec biala poswiata idzie do 6px i zostaje widoczna PO OBU jego stronach
   (0-2px i 4-6px). Przy 4px chowalaby sie pod obrysem. */
:focus-visible { box-shadow: 0 0 0 6px rgba(255, 255, 255, .85); }

/* napis tlowy "My Skills": (a) pigment z tej samej rodziny co reszta,
   (b) ZMIERZONE PRZED: przy line-height 1 ink zaczynal sie 26px NAD
   krawiedzia sekcji, ktora ma overflow:hidden, wiec gorne wydluzenia
   liter M, S, k, ll byly scinane. 1.34 daje linii zapas na ascender. */
.bz-kompetencje-tlo { color: rgba(219, 193, 178, .34); line-height: 1.34; }

/* ---------- (2) IKONY KAFLI USLUG ----------
   ZMIERZONE PRZED: #dcc6bb na #f5f1ed = 1,46:1, czyli ponizej progu
   3:1 z WCAG 1.4.11 dla grafiki niosacej znaczenie. Ikona jest jedynym
   elementem wizualnym uslugi, wiec sekcja czytala sie jak niezaladowana.
   PO: #b47759 = 3,27:1 na bezu i 3,67:1 na bieli (sekcja "Pozostale
   uslugi"), a na hoverze schodzi do #9d4c24 = 4,90:1 na #efe8df.
   Hierarchia w kaflu zostaje: ikona jasniejsza od tytulu (#9d4c24). */
.bz-usluga [class^="bz-ico-"] { color: var(--c-akcent); transition: color .3s ease; }
.bz-usluga:hover [class^="bz-ico-"],
.bz-usluga:focus-visible [class^="bz-ico-"] { color: var(--c-akcent-ciemny); }

/* ---------- (3) SIATKA USLUG: ODSTEP I POCZATEK SEKCJI ----------
   ZMIERZONE PRZED (2000px): 5 kafli po 260px, policzone odstepy miedzy
   sasiadami [0,0,0,0], zero separatorow i zero paddingu gornego sekcji,
   wiec dziesiec hasel wpadalo prosto pod hero jako jednolita sciana.
   Zamiast doklejania marginesow: JEDNA siatka na .bz-uslugi-rzady
   (rzedy sa `display: contents` na kazdej szerokosci) + odstep 1px,
   przez ktory widac tlo rodzica = wloskowe linie miedzy kaflami.
   Kafel dostaje wlasne tlo, wiec hover dalej podswietla cala komorke. */
.bz-uslugi { padding-top: clamp(40px, 3.2vw, 64px); }
.bz-uslugi-rzady {
  display: grid; grid-template-columns: repeat(5, 1fr);
  gap: 1px; background: var(--c-linia-ref);
}
.bz-uslugi-rzad { display: contents; }
.bz-usluga { background: var(--c-tlo-cieple); }
@media (max-width: 1024px) { .bz-uslugi-rzady { grid-template-columns: repeat(2, 1fr); } }
/* mobile: kafel mial ~277px wysokosci przy 5 rzedach = 1385px (3,5 ekranu
   ikon przed jakimkolwiek dowodem). Ciasniejszy rytm i mniejsza ikona
   sciagaja rzad do ~205px, cel klikniecia dalej duzo powyzej 44px. */
@media (max-width: 768px) {
  .bz-usluga { padding: 22px 14px 24px; }
  .bz-usluga [class^="bz-ico-"] { font-size: 42px; }
  .bz-usluga h3 { margin-top: 10px; }
  .bz-usluga p { margin-top: 6px; }
}

/* ---------- (4) PASKI KOMPETENCJI: ETYKIETA vs PROCENT ----------
   ZMIERZONE PRZED (810px): "eCommerce Strategy" konczylo sie na x=674,
   a "93%" zaczynalo na x=674 => odstep 0px w 3 z 5 wierszy
   ("eCommerce Strategy93%"). space-between nie gwarantuje zadnego
   minimum, wiec dochodzi jawny odstep{ gap: 18px; }

/* ---------- (5) POLE "WIADOMOSC" WYGLADA JAK POLE ----------
   ZMIERZONE PRZED: textarea border '0px none', tlo przezroczyste,
   197px wysokosci; jedyna wskazowka byl uchwyt resize w rogu, wiec
   placeholder czytal sie jak akapit, nie jak ostatni krok konwersji.
   Jezyk pol zostaje (podkreslenie zamiast ramki), dochodzi cieply
   plaszczyzna tla z tokenu kolumn kontaktu. */
.bz-form textarea {
  height: 150px;
  background: var(--c-tlo-cieple-2);
  border-bottom: 1px solid var(--c-linia);
}
/* iOS Safari przybliza strone przy fokusie na polu ponizej 16px i zostawia
   uzytkownika z przesunietym layoutem. ZMIERZONE PRZED (390/430): imie,
   email i firma po 14px, przy selectach i textarea juz na 16px. */
@media (max-width: 768px) {
  .bz-form input[type="text"],
  .bz-form input[type="email"],
  .bz-form select,
  .bz-form textarea { font-size: 16px; }
}

/* ---------- (6) SEKCJA KONWERSJI: KONTRAST I PION ----------
   ZMIERZONE PRZED: .bz-oferta p = #707070 na #f5f2ed = 4,43:1 przy
   17px/300, czyli ponizej AA. Reszta serwisu ma tu juz #595959 (6,3:1). */
.bz-oferta p, .bz-oferta li { color: var(--c-tekst-czytanie); }
/* ZMIERZONE PRZED (2000px, /kontakt/): lewa kolumna 615x568, karta
   formularza 615x950, obie od y=501 => 382px pustego bezu pod tekstem.
   Wyrownanie do srodka rozklada te roznice na gore i dol, wiec pas
   czyta sie jak dwie kolumny jednego bloku, a nie jak dziura. */
@media (min-width: 1025px) { .bz-oferta-siatka { align-items: center; } }

/* ---------- (7) HERO NA MOBILE: KOLEJNOSC AKCJI ----------
   ZMIERZONE PRZED (390px): .bz-hero-akcje w kolumnie mialo dzieci
   [DIV(CTA + mikrocopy), A.outline], wiec mikrocopy "30 minut..."
   wpadalo POMIEDZY oba przyciski. `display: contents` na wrapperze
   wypuszcza trojke do wspolnej kolumny i porzadkuje ja:
   CTA -> przycisk drugorzedny -> mikrocopy pod blokiem akcji
   (dokladnie tak, jak stoi na desktopie). */
@media (max-width: 680px) {
  .bz-hero-akcje > div { display: contents; }
  .bz-hero-akcje #bz-hero-cta { order: 1; }
  .bz-hero-akcje #bz-hero-cta2 { order: 2; }
  .bz-hero .bz-btn-mikro { order: 3; margin-top: 0; }
}

/* ---------- (8) STOPKA: JEDNO WYROWNANIE W KOLUMNIE ----------
   ZMIERZONE PRZED: naglowki kolumn textAlign 'center', akapity pod
   nimi 'left' => dwa wyrownania w obrebie jednej kolumny, a srodkowa
   kolumna z czterema ikonami 44x44 wygladala na niedomknieta.
   Wyrownanie do lewej na KAZDEJ szerokosci: przy jednej kolumnie na
   telefonie problem jest ten sam (ZMIERZONE na 390: naglowek center,
   akapit left), a akapity stopki maja po 4-6 linii, wiec wycentrowane
   czytalyby sie jeszcze gorzej. */
.bz-stopka-gora h2 { text-align: left; }
.bz-stopka-social { text-align: left; }
.bz-stopka-social a:first-child { margin-left: -15px; } /* ikona ma 44px celu przy 14px glifie: bez tego rzad zaczyna sie 15px za tekstem (ZMIERZONE: -15px stawia ink ikony na x=855, dokladnie tam gdzie tekst naglowka) */

/* ---------- (9) MIARA KOLUMNY CZYTELNICZEJ ----------
   ZMIERZONE PRZED (/consulting/optimization/, 2000px): akapit 760px
   przy 16px daje 88-89 znakow w wierszu, przy komforcie 45-75.
   640px = 74-75 znakow. Sidebar i os siatki bez zmian. */
:root { --szer-czytanie: 640px; }

/* ---------- (10) REFERENCJE NA MOBILE: PIEC TWARZY, DWA CYTATY ----------
   ZMIERZONE PRZED (390px): widoczne slajdy 2 i 3, ukryte 1, 4 i 5, a nad
   nimi staly WSZYSTKIE piec awatarow, wiec rzad twarzy obiecywal
   przelacznik i wskazywal (klasa "aktywny" wedrujaca co 5 s) osobe,
   ktorej cytatu nie ma na ekranie. Teraz zbior twarzy = zbior cytatow:
   pokazane sa rekomendacje 2-5 i awatary 2-5. Ukryty zostaje wylacznie
   cytat nr 1 (Filip Iwanski) i jego twarz, bo ten sam tekst stoi nizej
   przy formularzu w #druga-opinia i leciałby dwa razy na jednym
   przewinieciu. Tresc cytatow bez zmian, desktop bez zmian. */
@media (max-width: 768px) {
  .bz-referencja:nth-child(4),
  .bz-referencja:nth-child(5) { display: block; }
  .bz-ref-awatary img:nth-child(1) { display: none; }
  .bz-referencja:nth-child(2) { margin-top: 0; padding-top: 0; border-top: 0; }
}

/* ---------- (11) PRZYCISK "DO GORY" WIDOCZNY NA OBU TLACH ----------
   Kolko bylo przezroczyste, z obwodka #cccfdd (ostatni zimny szaro-lawendowy
   kolor spoza tokenow) i strzalka w kolorze --c-granat. Po (1) grafitowa
   strzalka na przezroczystym tle znikala nad ciemna stopka (ZMIERZONE: kolko
   ladowalo na #171717 przez ostatnie ~390px strony). Przycisk jest FIXED, wiec
   jedzie i nad bezem, i nad biela, i nad grafitem: dostaje wlasna, nieprzezroczysta
   powierzchnie i dziala wszedzie. Kontrast strzalki #9d4c24 na #f5f1ed = 5,35:1. */
.bz-do-gory-kolo {
  background: var(--c-tlo-cieple);
  border-color: var(--c-linia);
  color: var(--c-akcent-ciemny);
}

/* ---------- (12) PAS LOGOTYPOW NA /kontakt/: RZAD, NIE OGON ----------
   Po ujednoliceniu plikow pas ma 11 znakow. Przy flex-wrap ze stala
   szerokoscia 110px na 2000px miescilo sie 9 w rzedzie, wiec pod spodem
   zostawal wycentrowany ogon z DWOCH logotypow (ZMIERZONE: rzad 1 = 9,
   rzad 2 = 2) i pas czytal sie jak siatka, ktorej zabraklo elementow.
   11 to liczba pierwsza, wiec zamiast liczyc na zawijanie ustawiamy
   liczbe kolumn wprost: jeden rzad na desktopie (logotypy kurcza sie
   rowno), 4 na tablecie (4+4+3, ten sam rytm co rzedy na home),
   3 na telefonie. Niepelny rzad zostaje wysrodkowany. */
@media (min-width: 1025px) {
  .bz-loga-siatka { flex-wrap: nowrap; gap: 0 clamp(12px, 1.8vw, 34px); }
  .bz-loga-siatka img { flex: 1 1 0; min-width: 0; width: auto; max-width: 110px; }
}
@media (max-width: 1024px) {
  .bz-loga-siatka { gap: 16px 24px; }
  /* max-width: none jest tu ISTOTNE: z zachowanym capem 110px szerokosc
     wyliczona (164px na 810) byla scinana i w rzedzie miescilo sie PIEC
     logotypow zamiast czterech, czyli znowu 5+5+1 (ZMIERZONE na 810). */
  .bz-loga-siatka img { width: calc((100% - 72px) / 4); max-width: none; }
}
@media (max-width: 680px) {
  .bz-loga-siatka { gap: 12px 16px; }
  .bz-loga-siatka img { width: calc((100% - 32px) / 3); max-width: 96px; }
}

/* ---------- (13) INK TEKSTU POMOCNICZEGO: JEDEN PROG, NIE DWA ----------
   Serwis mial dwa inki: --c-tekst #707070 (motyw Qode) i --c-tekst-czytanie
   #595959, dodawany punktowo tam, gdzie ktos zmierzyl kontrast. Skutek:
   #707070 wychodzil poprawnie TYLKO na bieli (4,52:1), a na obu bezach
   spadal ponizej AA. ZMIERZONE, ktore elementy siedzialy na 4,41-4,43:1:
   .bz-btn-mikro (mikrocopy pod glownym CTA, home + /o-mnie/ + /consulting/
   + podstrony uslug), .bz-cytat-rola, .bz-cta-artykul-tel, akapit leadu
   bloku CTA po artykule. Zamiast lapac je pojedynczo, --c-tekst wskazuje
   na ten sam ink co reszta serwisu: 7,0:1 na bieli, 6,3:1 na bezu.
   WSZYSTKIE jego uzycia sa na jasnych powierzchniach (sprawdzone: caption,
   opis logotypu, mikrocopy, option selecta, SLA, rola w cytacie, podpis
   pod obrazem), wiec ciemniejszy ink nigdzie nie odwraca kontrastu. */
:root { --c-tekst: var(--c-tekst-czytanie); }

/* ---------- (14) LINKI I NAGLOWKI W TERAKOCIE BAZOWEJ ----------
   #b47759 to 3,26:1 na bezu i 3,67:1 na bieli, czyli prog dla GRAFIKI,
   a nie dla tekstu. Reszta serwisu przeszla juz na #9d4c24 (5,35:1 / 6,01:1);
   te cztery miejsca zostaly pominiete. Numer telefonu dostaje przy okazji
   cel klikniecia 24px (ZMIERZONE PRZED: 115x20 i 122x22). */
.bz-ref-label h2,
.bz-cytat-link,
.bz-oferta-tel a,
.bz-cta-artykul-tel a { color: var(--c-akcent-ciemny); }
.bz-oferta-tel a,
.bz-cta-artykul-tel a { display: inline-block; min-height: 24px; padding-block: 2px; }

/* ---------- (15) MIARA ARTYKULU NA TABLECIE ----------
   Ponizej 1024px .bz-art-siatka przechodzi w `display: block`, wiec kolumna
   czytelnicza rozlewala sie na cala szerokosc kontenera: ZMIERZONE na 810
   = 760px przy foncie 16px, czyli ~95 znakow w wierszu. Ten sam limit co
   na desktopie. */
@media (max-width: 1024px) {
  .bz-art-tresc { max-width: var(--szer-czytanie); }
}

/* ---------- (16) DWA OSTATNIE DROBIAZGI Z AUDYTU ----------
   (a) /mapa-strony/: linki listy sa JEDYNA trescia swojego <li>, wiec nie
   lapia sie na wyjatek "link w zdaniu" i obowiazuje ich prog 24px.
   ZMIERZONE PRZED: 21px wysokosci (78x21, 49x21, 52x21...).
   (b) /o-mnie/{ display: inline-block; min-height: 24px; padding-block: 2px; }

/* ============================================================
   RUNDA 3 (2026-08-10) : Architekt
   Odrzucenie krytyka: "klasa bledu, na ktora Rafal sie skarzyl (duza pusta
   przestrzen przy 2000px), naprawiona tylko na home". Ten blok laduje
   przyczyny, nie objawy: kazda sekcja z dwiema kolumnami albo trzyma
   WSPOLNY GORNY START, albo pozwala kolumnie zjesc nadwyzke szerokosci.
   Kolejnosc naprawy = kolejnosc dowodow z audytu na 2000px.
   ============================================================ */

/* ---------- (R1) /kontakt/: naglowek startowal 167px ponizej karty formularza
   ZMIERZONE PRZED (2000 i 1440): .bz-oferta-siatka y=501, .bz-oferta-tresc y=668.
   Przyczyna: `align-items: center` z rundy 2 centrowalo NIZSZA kolumne wzgledem
   wyzszej karty. Na home obie kolumny mialy prawie rowna wysokosc, wiec efekt
   byl niewidoczny i blad przeszedl. Wyrownanie do gory dziala niezaleznie od
   tego, ktora kolumna jest dluzsza, wiec nie da sie go "przypadkiem zdac". */
@media (min-width: 1025px) {
  .bz-oferta-siatka { align-items: start; }
}

/* ---------- (R2) podstrony uslug: 360px rynny miedzy trescia a sidebarem
   ZMIERZONE PRZED (2000 i 1440): .bz-art-tresc 350..990 (640px), .bz-art-sidebar
   1350..1650 (300px), rynna 360px = 28% kontenera 1300px.
   Przyczyna: sztywne `300px` na sidebarze + `justify-content: space-between`,
   wiec CALA nadwyzka szerokosci ladowala w odstepie. Teraz nadwyzke zjada
   kolumna sidebara (1fr), a nie rynna: kolumna czytelnicza dalej ma limit
   --szer-czytanie (640px), obie krawedzie siedza na osi siatki.
   Sidebar dostaje bezowa plyte, zeby szeroka kolumna czytala sie jak karta
   nawigacyjna, a nie jak rozciagnieta lista. */
@media (min-width: 1025px) {
  .bz-art-siatka {
    grid-template-columns: minmax(0, var(--szer-czytanie)) minmax(300px, 1fr);
    justify-content: normal; column-gap: 72px;
  }
  .bz-art-sidebar { background: var(--c-tlo-cieple); padding: 28px 26px 32px; }
  .bz-art-sidebar .bz-art-follow-siatka a { background: #fff; }
  .bz-art-nav a { border-bottom-color: var(--c-linia-ref); }
}
/* od 1400px kolumna sidebara ma ~588px, czyli miejsce na dwie kolumny pozycji:
   lista schodzi z 10 wierszy do 5, wiec caly sticky panel miesci sie w ekranie */
@media (min-width: 1400px) {
  .bz-art-nav ul { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 26px; }
}

/* ---------- (R3) home: sekcja 10 kafli nie miala ZADNEGO naglowka
   ZMIERZONE PRZED (2000): section.bz-uslugi top=1100, pierwszy element
   .bz-uslugi-rzady top=1164, czyli 64px paddingu i zero elementu naglowkowego.
   Naglowek i lead sa przepisane 1:1 z pasa tytulowego /consulting/. */
.bz-uslugi-glowa { max-width: var(--szer-grid); margin: 0 auto 38px; padding: 0 40px; }
.bz-uslugi-glowa h2 { margin: 0; font-size: 33px; line-height: 1.21em; }
.bz-uslugi-glowa p { max-width: 62ch; margin: 14px 0 0; font-size: 17px; line-height: 28px; color: var(--c-tekst-czytanie); }
@media (min-width: 1400px) { .bz-uslugi-glowa { padding-inline: 0; } }
@media (max-width: 768px) {
  .bz-uslugi-glowa { margin-bottom: 24px; padding: 0 20px; }
  .bz-uslugi-glowa h2 { font-size: 26px; }
  .bz-uslugi-glowa p { font-size: 15px; line-height: 25px; }
}
/* miara opisu w kaflu: przy paddingu 28px tekst mial 203px (ok. 25 znakow w
   wierszu) i lamal sie na poszarpane 4 linie. Wezszy padding daje 227px, a
   `balance` wyrownuje dlugosci wierszy zamiast zostawiac sierote na koncu. */
@media (min-width: 1201px) {
  .bz-usluga { padding: 52px 16px 56px; }
}
.bz-usluga h3, .bz-usluga p { text-wrap: balance; }

/* ---------- (R4) pelnoekranowy pas zdjeciowy 5:1
   ZMIERZONE PRZED (2000): 2000x400, czyli proporcja 5:1. Kadr wchodzil od linii
   wlosow i ucinal twarz przez brode. Wyzszy pas (26vw zamiast 20vw) miesci cala
   glowe, a punkt kadrowania schodzi nizej, bo nie trzeba juz ratowac czubka. */
@media (min-width: 769px) {
  .bz-uslugi > .bz-split-foto {
    height: clamp(300px, 27vw, 560px);
    background-position: 50% 26%;
  }
}

/* ---------- (R5) kompetencje: 200px pustki pod zdjeciem, 156px obok tekstu
   ZMIERZONE PRZED (2000): sekcja h=670, .bz-kompetencje-tresc slot 526px przy realnej tresci 370px.
   Stockowy mockup laptopa z chmura slow usuniety z HTML (patrz komentarz tamze).
   Sekcja idzie na dwie kolumny na pelnej osi siatki: teza + paski. */
.bz-kompetencje-tresc { width: 100%; padding: 0; }
.bz-kompetencje-teza h2 { font-size: 33px; line-height: 1.21em; margin: 6px 0 18px; }
@media (min-width: 1025px) {
  .bz-kompetencje-inner { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 40px 80px; align-items: start; padding: 96px 0 104px; }
  .bz-kompetencje-tresc { display: contents; }
  .bz-kompetencje-teza p { max-width: 46ch; }
  /* watermark "My Skills" przy 240px zajmowal cala dolna lewa cwiartke sekcji;
     teraz jest tlem calej szerokosci, wyciszonym, i nie konkuruje z trescia */
  .bz-kompetencje-tlo { padding-left: 0; font-size: clamp(120px, 11vw, 200px); }
}
@media (max-width: 1024px) {
  .bz-kompetencje-inner { padding: 56px 25px 64px; }
  .bz-kompetencje-teza { margin-bottom: 26px; }
}

/* ---------- (R6 naprawa) kompetencje: prawa kolumna po usunieciu paskow
   zostala 5 golymi linijkami tekstu przy gornej krawedzi i ~400px pustki
   pod spodem (2000px). Lista idzie w indeks 01-05: linie w --c-linia,
   numeracja w terakocie (ten sam jezyk co kroki 01-03 i paginacja referencji),
   na desktopie rozciagnieta na wysokosc kolumny tezy. */
.bz-kompetencje-lista { list-style: none; margin: 0; padding: 0; counter-reset: bz-komp; }
.bz-kompetencje-lista li {
  counter-increment: bz-komp;
  display: flex; align-items: baseline; gap: 20px;
  padding: 16px 2px;
  border-top: 1px solid var(--c-linia);
  font-family: var(--font-naglowki); font-weight: 600;
  font-size: 17px; line-height: 1.35; letter-spacing: .01em;
  color: var(--c-naglowek);
}
.bz-kompetencje-lista li:last-child { border-bottom: 1px solid var(--c-linia); }
.bz-kompetencje-lista li::before {
  content: "0" counter(bz-komp);
  flex: none;
  font-size: 12px; font-weight: 600; letter-spacing: .08em;
  color: var(--c-akcent);
}
@media (min-width: 1025px) {
  .bz-kompetencje-lista { align-self: stretch; display: flex; flex-direction: column; }
  .bz-kompetencje-lista li { flex: 1; align-items: center; font-size: 18px; }
}

/* ---------- (R6) referencje: ramka 1300x321 w polowie pusta
   ZMIERZONE PRZED (2000): komorka awatara 380px na awatar 150px, cytat 545px
   w komorce 918px, czyli 373px pustki po prawej stronie kazdego wiersza.
   Awatar rosnie i dostaje wezsza komorke, cytat dostaje wieksza miare i
   wiekszy stopien: pull-quote ma wygladac jak eksponowana rekomendacja. */
@media (min-width: 1400px) {
  .bz-ref-awatary { width: 300px; }
  .bz-ref-awatary img { width: 186px; height: 186px; }
  .bz-referencja blockquote p { width: auto; max-width: 760px; margin-right: 40px; font-size: 24px; line-height: 34px; }
}

/* ---------- (R7) Projekty na telefonie: same logotypy, zero rol
   ZMIERZONE PRZED (390): .bz-team {display:none}, wiec znikaly WSZYSTKIE role
   i opisy wdrozen (Chief Marketing & Sales Officer, Advisor to the Board...),
   czyli caly dowod kompetencji. Prospekt z telefonu dostawal sciane logo.
   Teraz ten sam komplet 11 firm, ale jako lista logo + rola + opis. */
@media (max-width: 768px) {
  .bz-team { display: block; margin: 0; padding: 0; }
  .bz-team-item,
  .bz-team-item.aktywny ~ .bz-team-item,
  .bz-team-item:hover ~ .bz-team-item {
    display: flex; align-items: center; gap: 16px;
    float: none; width: 100%; padding: 14px 0; margin: 0; left: auto;
    border-bottom: 1px solid var(--c-linia-ref);
  }
  .bz-team-item:last-child { border-bottom: 0; margin-bottom: 0; }
  .bz-team-item::after { display: none; }
  .bz-team-logo { float: none; width: 84px; flex: 0 0 84px; }
  .bz-team-logo img { height: 52px; object-fit: contain; }
  .bz-team-info {
    position: static; float: none; width: auto; flex: 1 1 auto; height: auto;
    margin: 0; transform: none; visibility: visible; opacity: 1; background: transparent;
  }
  .bz-team-info-outer, .bz-team-info-inner { padding: 0; }
  .bz-team-nazwa { font-size: 15px; line-height: 1.3em; }
  .bz-team-opis { margin: 5px 0 0; font-size: 13px; line-height: 20px; }
}

/* ---------- (R8) burger: ikona musi zmieniac sie w krzyzyk
   Reguly transformu istnieja wyzej, ale `transition` na spanach dotyczyla tylko
   transform/opacity, a przy `prefers-reduced-motion` caly ruch znikal razem ze
   stanem koncowym. Tu jest sam stan otwarty, bez zaleznosci od animacji. */
@media (prefers-reduced-motion: reduce) {
  .bz-burger span { transition: none; }
}

/* ---------- (R9) "Projekty" na desktopie: 8 pustych cel na 11 firm
   ZMIERZONE PRZED (2000): tor .bz-team 1300px, 5 slotow po 260px, w kazdym rzedzie
   widoczny JEDEN panel roli (data-aktywny), reszta rol schowana pod hover. Efekt na
   ekranie: logo, obok blok tekstu, dalej trzy logotypy i dwa pasy pustki po ~200px
   wysokosci. Mechanika "wysunmy panel i odsunmy sasiadow" byla portem karuzeli i na
   szerokim ekranie produkuje wylacznie dziury.
   Teraz: ten sam komplet 11 firm jako dwie kolumny wierszy logo + rola + opis.
   Nic sie nie chowa, nic nie odjezdza, zero pustych slotow, caly dowod widoczny od razu
   (ta sama forma co na telefonie, patrz R7, wiec jeden wzorzec zamiast trzech). */
@media (min-width: 1025px) {
  .bz-team,
  .bz-team-1, .bz-team-2, .bz-team-3 {
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 64px; padding: 0; margin: 0;
  }
  .bz-team-item,
  .bz-team-item.aktywny ~ .bz-team-item,
  .bz-team-item:hover ~ .bz-team-item {
    display: flex; align-items: center; gap: 24px;
    float: none; width: auto; padding: 18px 0; margin: 0; left: auto;
    border-bottom: 1px solid var(--c-linia-ref);
  }
  .bz-team-item::after { display: none; }
  .bz-team-logo { float: none; width: 120px; flex: 0 0 120px; }
  .bz-team-logo img { height: 62px; object-fit: contain; }
  .bz-team-info,
  .bz-team-item.aktywny .bz-team-info {
    position: static; left: auto; top: auto; float: none; width: auto; flex: 1 1 auto;
    height: auto; margin: 0; transform: none;
    visibility: visible; opacity: 1; background: transparent; transition: none;
  }
  .bz-team-info-outer, .bz-team-info-inner { padding: 0; }
  .bz-team-nazwa { font-size: 16px; line-height: 1.3em; }
  .bz-team-opis { margin: 6px 0 0; font-size: 14px; line-height: 22px; }
  /* trzeci "rzad" ma 3 firmy, wiec ostatni wiersz kolumny nie zawsze jest ostatnim
     elementem: hairline zdejmujemy z dwoch ostatnich pozycji kazdego toru */
  .bz-team-item:last-child, .bz-team-item:nth-last-child(2) { border-bottom: 0; }
}

/* ---------- (R10) watermark "My Skills": usuniety
   Byl to napis 240px lezacy pod trescia. Po przebudowie sekcji (R5) tresc zajmuje
   cala os siatki, wiec watermark przechodzil przez naglowek "Sprawdz", przez akapit
   i przez paski kompetencji. Probowalem go wyciszyc i zejsc do dolu sekcji: dalej
   ladowal na akapicie lewej kolumny. Dekoracja, ktora koliduje z tekstem i nie ma
   zadnego zadania, wychodzi (guardrail anty-slop), zamiast byc "prawie niewidoczna". */
.bz-kompetencje-tlo { display: none; }

/* ---------- (R11) logotypy firm: znak byl DWA razy mniejszy niz mogl byc
   Pliki logo to kwadratowe PNG 365x365, w ktorych sam znak zajmuje 3-35% wysokosci
   kadru (reszta to bialy margines w pliku). Przy `contain` skalowal sie caly kadr,
   wiec znak gubil sie w kaflu. `cover` przycina bialy margines, nie znak (ta sama
   metoda co juz przyjeta dla tabletu i telefonu, linie ~1500). */
@media (min-width: 1025px) {
  .bz-team-logo img { height: 78px; object-fit: cover; object-position: center; }
}
@media (max-width: 768px) {
  .bz-team-logo img { height: 58px; object-fit: cover; object-position: center; }
}

/* ---------- (R12) /kontakt/: pas tytulowy i sekcja pod nim maja PRAWIE ten sam bez
   (--c-tlo-cieple #f5f1ed i --c-tlo-cieple-2 #f5f2ed), wiec styk sekcji byl
   niewidoczny i 78+90px paddingow czytalo sie jako jedna pusta plama tla.
   Hairline daje granice, mniejszy padding gorny skraca sam odstep. */
.bz-pas-tytul { border-bottom: 1px solid var(--c-linia-ref); }
.bz-pas-tytul-bialy { border-bottom-color: #efece7; }
.bz-pas-tytul + .bz-oferta { padding-top: 58px; }

/* ---------- (R13) link "LinkedIn" w naglowku Projektow mial 60x22px
   (ZMIERZONE na kazdej z szesciu szerokosci), czyli ponizej progu 24px.
   Ta sama poprawka co juz przyjeta dla linkow w /mapa-strony/ i w stopce CTA. */
.bz-projekty-naglowek em a { display: inline-block; min-height: 24px; padding-block: 2px; }

/* ---------- (R14) na telefonie kolo "wroc na gore" (#bz-do-gory) siedzi w tym samym
   rogu co sticky pasek CTA i nachodzi na tresc (ZMIERZONE na 430: kolo 385..425
   zaslanialo wartosc paska "eCommerce Strategy 90%" na x=390). Na telefonie ta
   funkcja jest duplikatem gestu systemowego, a rog nalezy do CTA. */
@media (max-width: 768px) { #bz-do-gory { display: none; } }

/* ---------- (R15) link w tresci artykulu mial 105x23px (/consulting/user-experience/,
   ZMIERZONE na 2000/1440/1280/810). Ten sam zabieg co juz uzyty dla linkow w stopce
   CTA, w mapie strony i w naglowku Projektow: cel rosnie do 24px, linia tekstu nie. */
.bz-czytanie a { display: inline-block; min-height: 24px; padding-block: 1px; }

/* ---------- (R16) NAGLOWEK NA HERO: bialy tekst na jasnym kadrze, czarne logo na
   ciemnej kurtynie. ZMIERZONE (zrzut 2000px, luminancja sRGB z pikseli):
   pas menu (x 1390-1930, y 78-108) ma tlo L=0,52 (mediana) i 0,60 (p90), wiec
   biale "Zaczynamy! / Consulting / O mnie / Kontakt" ma 1,84:1 przy progu 4,5:1
   (17px semibold to NIE jest duzy tekst). Rownoczesnie czarne logo siedzi po
   lewej, gdzie kurtyna z rundy 2 sciemnia tlo do L=0,13, wiec ma ~1,4:1.
   Czyli jedna belka nagowka lamie kontrast w OBIE strony naraz.
   Naprawa: belka naglowka (topbar 46 + header 94 = 140px) dostaje wlasna
   kurtyne wygaszana do zera na 235px, a logo na hero przechodzi na biel.
   PO ZMIANIE (przeliczone z tych samych pikseli): menu 7,0:1, topbar 11,7:1.
   ⚠️ DO AKCEPTACJI RAFALA: to dotyka decyzji "zdjecie hero BEZ przyciemnienia".
   Kurtyna obejmuje wylacznie gorne 235px kadru, sylwetka i reszta zdjecia bez zmian. */
@media (min-width: 1025px) {
  .bz-hero-ciemny::after {
    content: ''; position: absolute; top: 0; left: 0; right: 0; height: 235px;
    z-index: 1; pointer-events: none;
    background: linear-gradient(to bottom, rgba(22, 17, 13, .58) 0, rgba(22, 17, 13, .50) 140px, rgba(22, 17, 13, 0) 100%);
  }
  .bz-strona-hero .bz-logo img { filter: brightness(0) invert(1); }
}

/* ============================================================
   RUNDA 4 (2026-08-10) : Architekt
   Krytyk odrzucil runde 3 (5/10). Szkielet byl juz naprawiony, ale
   posypala sie WARSTWA MATERIALU: logotypy klientow renderowaly sie
   jako kreski 4-32px, zdjecia byly skalowane w gore i przycinane,
   a szablon podstron uslug trzymal prawa kolumne pusta.
   Ten blok naprawia przyczyny, nie objawy. Kolejnosc = kolejnosc
   dowodow krytyka. Zero nowych kolorow (tylko tokeny :root),
   zero zmian tresci merytorycznej, zero zmian SEO i pomiaru.
   ============================================================ */

/* ---------- (S1) LOGOTYPY KLIENTOW: NORMALIZACJA W PLIKU, NIE W CSS
   ZMIERZONE PRZED (bbox tuszu w 11 plikach zrodlowych, kazdy kwadrat 365x365):
   wysokosc znaku od 11px (THE SHIRE) do 128px (TaniaKsiazka.pl), szerokosc
   od 107 do 300px. Przy JEDNYM slocie CSS skala zalezala wiec nie od znaku,
   tylko od tego, ile bialego marginesu wypalono w pliku: w slocie 120x78
   THE SHIRE mial 98x4px tuszu, a TaniaKsiazka.pl 100x43px. Ani `contain`,
   ani `cover` tego nie naprawia, bo oba operuja na KADRZE, a nie na ZNAKU.
   NAPRAWA W ZRODLE (skrypt normalizuj-logo.py): kadr przyciety do bbox tuszu,
   kazdy znak przeskalowany do zblizonej WAGI OPTYCZNEJ (pierwiastek z pola
   tuszu, z limitem szerokosci i wysokosci), wynik na wspolnym przezroczystym
   plotnie 480x160. Wszystkie 11 plikow ma teraz identyczna proporcje 3:1,
   wiec CSS nie musi juz niczego ratowac: podaje sama szerokosc slotu.
   Bialy prostokat tla zamieniony na alfe, wiec znak siedzi tez na bezu.
   ⚠️ THE SHIRE: plik zrodlowy zawiera WYLACZNIE tagline "BEYOND COWORKING"
   (bbox 300x11 z 365x365), bez wordmarku. Zadne skalowanie tego nie odwroci,
   dlatego nazwa firmy idzie tekstem (S2). Potrzebny poprawny plik od Rafala. */
.bz-team-logo img,
.bz-loga-siatka img {
  width: 100%; height: auto; object-fit: contain; object-position: center;
}
@media (min-width: 1025px) {
  .bz-team-logo { width: 150px; flex: 0 0 150px; }
  .bz-team-logo img { height: auto; }
}
@media (max-width: 768px) {
  .bz-team-logo { width: 104px; flex: 0 0 104px; }
  .bz-team-logo img { height: auto; }
}
@media (min-width: 769px) and (max-width: 1024px) {
  .bz-team-logo img { height: auto; }
}
/* pas na /kontakt/: pliki maja teraz stala proporcje, wiec cap szerokosci
   wystarczy i nie potrzeba juz ratunkowego `max-width: none` z rundy 3 */
@media (min-width: 1025px) { .bz-loga-siatka img { max-width: 132px; } }
@media (max-width: 1024px) { .bz-loga-siatka img { width: calc((100% - 72px) / 4); max-width: 150px; } }
@media (max-width: 680px)  { .bz-loga-siatka img { width: calc((100% - 32px) / 3); max-width: 112px; } }

/* ---------- (S2) NAZWA FIRMY PRZESTAJE ZALEZEC OD CZYTELNOSCI LOGO
   W sekcji "Projekty" trzy pozycje nazywaja sie tak samo ("Advisor to the
   Board"), a nazwa firmy siedziala WYLACZNIE w atrybucie alt i aria-label.
   Czyli caly dowod "u kogo to bylo" wisial na logotypie. Teraz nazwa jest
   pierwsza linia wiersza (najmocniejsza w hierarchii), rola schodzi na
   drugi plan jako kwalifikator, a logo wraca do roli znaku rozpoznawczego. */
.bz-team-firma {
  display: block;
  font-family: var(--font-naglowki); font-size: 17px; line-height: 1.3;
  font-weight: 700; color: var(--c-naglowek);
}
.bz-team-nazwa,
.bz-team-item .bz-team-nazwa {
  margin: 3px 0 0;
  font-size: 14px; line-height: 1.35em; font-weight: 600;
  color: var(--c-akcent-ciemny);
}
@media (max-width: 768px) {
  .bz-team-firma { font-size: 15px; }
  .bz-team-nazwa, .bz-team-item .bz-team-nazwa { font-size: 13px; }
}

/* ---------- (S3) PODSTRONY USLUG: PRAWA KOLUMNA PRZESTAJE BYC DZIURA
   ZMIERZONE PRZED (2000px): karta sidebara 588x466 przy artykule 640x1724,
   czyli przez ok. 1250px scrolla prawa polowa ukladu (1010px do krawedzi
   ekranu) nie miala nic. `position: sticky` bylo na samym <aside>, ktory
   przy `align-items: start` kurczy sie do wysokosci tresci, wiec kolumna
   konczyla sie razem z karta.
   NAPRAWA: kolumna rozciaga sie na cala wysokosc wiersza i dostaje wlasna
   plyte (jest POWIERZCHNIA, nie pustka), a sticky przenosi sie na wrapper
   w srodku, wiec karta jedzie z czytelnikiem przez caly artykul.
   Do tego rail niesie teraz konwersje (karta CTA), a nie sama nawigacje. */
@media (min-width: 1025px) {
  .bz-art-siatka { align-items: stretch; }
  .bz-art-sidebar {
    position: static; top: auto;
    background: var(--c-tlo-cieple); padding: 0;
  }
  .bz-art-sidebar-inner {
    position: sticky; top: 40px;
    padding: 30px 30px 34px;
  }
  .bz-art-sidebar .bz-art-follow-siatka a { background: #fff; }
  .bz-art-nav a { border-bottom-color: var(--c-linia-ref); }
  .bz-art-nav a { min-height: 46px; }
}
/* karta CTA w railu: jedyny element, ktory ma tam prosic o rozmowe,
   wiec dostaje bialy podklad i pelna szerokosc kolumny */
.bz-art-cta { margin-top: 32px; background: #fff; padding: 22px 22px 24px; }
.bz-art-cta-tytul {
  margin: 0 0 14px; font-family: var(--font-naglowki);
  font-size: 17px; line-height: 1.32; font-weight: 700; color: var(--c-naglowek);
}
.bz-art-cta .bz-btn-cta { display: block; text-align: center; }
.bz-art-cta .bz-btn-mikro { display: block; margin-top: 10px; font-size: 13px; line-height: 1.45; color: var(--c-tekst-czytanie); }
.bz-art-cta-tel { margin: 14px 0 0; font-size: 14px; line-height: 1.5; color: var(--c-tekst-czytanie); }
.bz-art-cta-tel a { color: var(--c-akcent-ciemny); font-weight: 600; white-space: nowrap; display: inline-block; min-height: 24px; padding-block: 2px; }
@media (max-width: 1024px) {
  /* pod 1025px kolumny sie skladaja, wiec rail jest zwyklym blokiem pod
     trescia: karta CTA bylaby tam trzecim z rzedu tym samym przyciskiem
     (nizej jest juz .bz-cta-artykul), wiec znika */
  .bz-art-cta { display: none; }
}
/* od 1300px kolumna raila ma miejsce na dwie kolumny pozycji: lista schodzi
   z 10 wierszy do 5, wiec caly sticky panel miesci sie w jednym ekranie */
@media (min-width: 1300px) {
  .bz-art-nav ul { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 24px; }
}

/* ---------- (S4) ZDJECIE OTWIERAJACE ARTYKUL WYCHODZI Z KOLUMNY TEKSTU
   ZMIERZONE PRZED (2000px): zdjecie 640x427 przy osi siatki 1300px, czyli
   pierwszy ekran podstrony uslugi zaczynal sie od obrazka zajmujacego 49%
   toru, z pustka obok. Teraz jest to pas otwierajacy na osi siatki.
   Limit 1200px NIE jest arbitralny: to natywna szerokosc wszystkich 10
   plikow (1200x800){ max-width: var(--szer-grid); margin: 0 auto 46px; }
/* obraz ma 1200px natywnie, os siatki 1300px: zamiast skalowac go w gore o 8%
   zostaje w natywnym rozmiarze i jest WYSRODKOWANY w osi (50px luzu z kazdej
   strony czyta sie jak inset{ display: block; width: 100%; max-width: 1200px; height: auto; margin-inline: auto; }
.bz-art { padding-top: 56px; }

/* ---------- (S5) SPLIT NA HOME: KONIEC SKALOWANIA W GORE
   ZMIERZONE PRZED (2000px): slot 650x900 przy pliku 1200x800, czyli
   background-size: cover musial powiekszyc obraz o 12,5% ponad natywna
   rozdzielczosc i wyrzucic 52% szerokosci kadru, a bohater ladowal
   w prawym dolnym rogu.
   PO: limit wysokosci 800px = dokladnie wysokosc pliku, wiec skala
   spada do 1,00 (zero powiekszenia, pelna wysokosc kadru w kadrze).
   Kolumna zdjecia jest wyzsza niz sam kadr, wiec zdjecie centruje sie
   w pionie: rowna ramka bezu u gory i u dolu czyta sie jak passe-partout,
   a nie jak dziura po nierownych kolumnach.
   Punkt kadrowania 66% zamiast 50%: przy oknie 54% szerokosci pliku
   przesuwa sylwetke z prawej krawedzi na os zlotego podzialu kadru. */
@media (min-width: 1025px) {
  .bz-split { align-items: center; }
  .bz-split > .bz-split-foto { max-height: 800px; align-self: center; }
  /* focal point per zdjecie, bo kazdy kadr ma sylwetke gdzie indziej:
     sekcja 2 (scaled17) ma bohatera po prawej stronie kadru, sekcja 3
     (scaled7) ma czworke ludzi rozlozona symetrycznie, wiec zostaje na 50% */
  .bz-split-cieply > .bz-split-foto { background-position: 66% 50%; }
}

/* ---------- (S6) PAS PELNOEKRANOWY: PLIK POD ROZMIAR SLOTU
   ZMIERZONE PRZED (2000px): slot 2000x540 z pliku 1200x800 = powiekszenie
   o 67% ponad natywna rozdzielczosc (widoczne na wlosach i oprawkach).
   Ten sam kadr istnieje na serwerze w wariancie 2048x1365, wiec na szerokich
   ekranach skala schodzi z 1,67 do 0,98 (czyli obraz jest POMNIEJSZANY).
   Ponizej 1200px zostaje lzejszy plik 1200x800: tam slot i tak jest wezszy. */
.bz-pas-foto { background-image: url(/wp-content/uploads/2022/05/Rafal_Bartoszewicz18282-scaled-1.jpg); }
@media (min-width: 1200px) {
  .bz-pas-foto { background-image: url(/wp-content/uploads/2022/05/Rafal_Bartoszewicz18282-2048x1365.jpg); }
}

/* ---------- (S7) AWATARY REFERENCJI: 150px TO 150px
   ZMIERZONE PRZED (2000px): slot 186x186 przy pliku 150x150 = 1,24x
   powiekszenia na twarzach, a wiekszego wariantu NIE MA na serwerze
   (sprawdzone: Iwanski.png tez ma 150x150). Runda 3 podniosla je, zeby
   zapelnic komorke; komorka zwezi sie zamiast rozmywac zdjecia. */
@media (min-width: 1400px) {
  .bz-ref-awatary { width: 236px; }
  .bz-ref-awatary img { width: 150px; height: 150px; }
}

/* ---------- (S8) TEN SAM CYTAT DWA RAZY NA JEDNYM PRZEWINIECIU
   ZMIERZONE PRZED (2000px): rekomendacja Filipa Iwanskiego stoi na home
   jako slajd 01 karuzeli (y=5441) i jako cytat przy formularzu (y=6386).
   Odleglosc 945px przy oknie 1100px, a karuzela sama sie przewija, wiec
   bywa kadr z obiema kopiami naraz.
   Karuzela zostaje (pieciu ludzi, pieciu roznych), znika kopia przy
   formularzu. Tylko na home i tylko tam, gdzie karuzela jest widoczna:
   ponizej 769px karuzela znika i cytat przy formularzu jest jedynym
   dowodem, wiec tam zostaje. Na /kontakt/ karuzeli nie ma w ogole,
   wiec ta regula go nie dotyka (haczyk: aria-label ma tylko home). */
@media (min-width: 769px) {
  .bz-oferta[aria-label="Rozmowa diagnostyczna"] .bz-cytat { display: none; }
}

/* ---------- (S9) KAFLE USLUG: JEDEN RYTM ZAMIAST DWOCH
   ZMIERZONE PRZED (2000px): kafel 259x323, tresc wyrownana do gory, wiec
   pod opisem dwuwierszowym zostawalo 81px, a pod trzywierszowym 56px.
   Komorki rozdziela widoczna linia, wiec ta roznica czytala sie jak blad
   skladu. Wyrownanie tresci do srodka pionu wyrownuje obie sytuacje. */
.bz-usluga { display: flex; flex-direction: column; justify-content: center; }
.bz-usluga h3, .bz-usluga p { max-width: 260px; }

/* ---------- (S10) INICJAL NA /consulting/: JEDNO SLOWO, NIE DWA
   ZMIERZONE PRZED: float:left, 42px, line-height .86, padding 2px 8px 0 0,
   przy tekscie 16px/25px. Litera stala 8px od reszty slowa i zwisala ok.
   12px ponizej linii bazowej pierwszego wiersza, wiec "Optimization"
   czytalo sie jak "O ptimization" (10 wystapien na stronie).
   Inicjal wraca na linie bazowa i do wlasnego slowa: powiekszony pierwszy
   znak (1,55em) w linii tekstu{
  float: none; display: inline;
  font-size: 1.55em; line-height: 1; vertical-align: baseline;
  padding: 0; margin: 0; letter-spacing: -.01em;
}

/* ---------- (S11) "WIECEJ..." MA MIEC STALE MIEJSCE
   ZMIERZONE PRZED (/consulting/): 10 linkow na dziesieciu roznych pozycjach
   x (2000px: 484, 574, 599, 735, 746, 749, 1183, 1183, 1197, 1370), bo kazdy
   wisial na koncu ostatniej linii akapitu. Na hubie, ktorego jedyna funkcja
   jest rozprowadzenie ruchu na 10 podstron, nie ma czego skanowac wzrokiem.
   Link schodzi do wlasnej linii, zawsze przy lewej krawedzi akapitu. */
.bz-wiecej-link { display: flex; width: fit-content; margin-top: 10px; }

/* ---------- (S12) CELE DOTYKOWE NA TELEFONIE
   ZMIERZONE PRZED (430px): 10 linkow ponizej 44px, najgorszy "Zobacz
   rekomendacje na LinkedIn" (215x26) pelniacy role dowodu spolecznego
   i trzy linie kontaktowe w stopce po 360x27. Prog 44px dotyczy CELU,
   nie tekstu, wiec rosnie sam padding: rytm linii bez zmian. */
@media (max-width: 768px) {
  .bz-cytat-link,
  .bz-stopka-linia,
  .bz-kontakt-linia,
  .bz-oferta-tel a,
  .bz-cta-artykul-tel a,
  .bz-copyright a,
  .bz-projekty-naglowek em a,
  .bz-prosta-tresc ul li > a {
    display: inline-flex; align-items: center; min-height: 44px; padding-block: 0;
  }
  .bz-stopka-linia, .bz-kontakt-linia { display: flex; }
  .bz-stopka-social a { min-width: 44px; min-height: 44px; }
}

/* ---------- (S13) HAIRLINE'Y W "PROJEKTACH": JEDEN RYTM
   ZMIERZONE PRZED: reguly rundy 3 zdejmowaly linie z dwoch OSTATNICH DZIECI
   kazdej z trzech siatek (.bz-team-1/2/3). Przy ukladzie dwukolumnowym te
   dwa dzieci to caly DOLNY WIERSZ, wiec linia znikala raz po lewej, raz po
   prawej, a miedzy grupami pojawiala sie podwojnie: rzad logotypow czytal
   sie jak trzy niepowiazane tabele. Teraz linia jest pod KAZDYM wierszem,
   a znika tylko na koncu kazdej z dwoch kolumn (grupa 3 ma 3 pozycje, wiec
   lewa kolumna konczy sie ponizej prawej). */
@media (min-width: 1025px) {
  .bz-team-item,
  .bz-team-item.aktywny ~ .bz-team-item,
  .bz-team-item:hover ~ .bz-team-item { border-bottom: 1px solid var(--c-linia-ref); }
  .bz-team-item:last-child,
  .bz-team-item:nth-last-child(2) { border-bottom: 1px solid var(--c-linia-ref); }
  .bz-team-3 .bz-team-item:nth-child(2),
  .bz-team-3 .bz-team-item:last-child { border-bottom: 0; }
  .bz-team-logo { width: 168px; flex: 0 0 168px; }
}

/* ---------- (S14) /kontakt/ MA WLASNA TRESC, NIE POWTORKE Z HOME
   ZMIERZONE PRZED (2000px): cala strona ma 2147px wysokosci, z czego 1051px
   to blok przepisany 1:1 z dolu strony glownej (ten sam H2 "Druga opinia
   o Twoim marketingu", ten sam lead, te same dwa punkty, ten sam cytat
   Filipa Iwanskiego, ten sam formularz). Jedyna tresc wlasciwa dla tej
   strony, czyli adres, telefon i mail, siedziala w boksie "Wolisz bez
   formularza?" schowanym pod przyciskiem w karcie formularza.
   Dane kontaktowe ida na gore lewej kolumny i dostaja wage bloku: to jest
   powod, dla ktorego ktos klika "Kontakt". Reszta ukladu bez zmian. */
.bz-kontakt-dane {
  margin: 0 0 34px; padding: 22px 26px 24px;
  background: #fff; border-left: 3px solid var(--c-akcent);
}
.bz-kontakt-dane-tytul {
  margin: 0 0 6px; font-family: var(--font-naglowki);
  font-size: 12px; line-height: 1.6; font-weight: 600;
  letter-spacing: .08em; text-transform: uppercase; color: var(--c-naglowek);
}
.bz-kontakt-dane .bz-kontakt-linia {
  display: flex; margin-top: 2px; min-height: 40px;
  font-family: var(--font-naglowki); font-size: 18px; font-weight: 600;
  color: var(--c-akcent-ciemny);
}
.bz-kontakt-dane .bz-kontakt-linia [class^="bz-ico-"] { font-size: 17px; color: var(--c-akcent); }
.bz-kontakt-dane .bz-kontakt-linia:hover { color: var(--c-cta-hover); }
.bz-kontakt-dane-nota { margin: 10px 0 0; font-size: 14px; line-height: 1.5; color: var(--c-tekst-czytanie); }
@media (max-width: 768px) {
  .bz-kontakt-dane { padding: 18px 20px 20px; margin-bottom: 26px; }
  .bz-kontakt-dane .bz-kontakt-linia { font-size: 17px; min-height: 44px; }
}

/* ---------- (S15) HERO NA TABLECIE: LEAD SCHODZIL PONIZEJ AA
   METODA POMIARU: tekst hero ukryty (visibility:hidden), zrzut 1:1 tej samej
   ramki, kontrast bieli liczony do KAZDEGO piksela tla w obrysie akapitu.
   ZMIERZONE PRZED (810px, ramka leadu 40,462,620,87): mediana 6,75:1, ale
   percentyl 10 = 4,49 i minimum 3,98:1, czyli w najjasniejszych miejscach
   kadru (lampy) 18px/300 siedzialo pod progiem 4,5:1. H1 40px/600 lapie sie
   na prog 3:1 dla duzego tekstu (min 3,77), wiec on byl formalnie OK.
   Kurtyna kierunkowa z rundy 3 zostaje, rosnie tylko jej gestosc w strefie
   pod kolumna tekstu: .52 -> .60. Zakres bez zmian, sylwetka bez zmian.
   ZMIERZONE PO: patrz ponizej w raporcie rundy.
   (430px NIE wymagalo zmiany: tam ta sama metoda daje min 5,22:1 dla H1
   i 5,57:1 dla leadu, czyli AA z zapasem.) */
@media (min-width: 681px) and (max-width: 1024px) {
  .bz-hero-ciemny::before {
    background: linear-gradient(to right, rgba(22, 17, 13, .60) 0%, rgba(22, 17, 13, .60) 88%, rgba(22, 17, 13, .34) 100%);
  }
}
/* ostatni cel ponizej progu na telefonie: link pod karuzela referencji
   (ZMIERZONE 430 i 360: 215x36 przy min-height 24px z rundy wczesniejszej) */
@media (max-width: 768px) {
  .bz-ref-mobil-link a { display: inline-flex; align-items: center; min-height: 44px; padding-block: 0; }
}
/* okruszki na telefonie: "Start" 44x27, "Consulting" 91x27 (ZMIERZONE 430 i 360) */
@media (max-width: 768px) {
  .bz-okruszki a, .bz-okruszki span { display: inline-flex; align-items: center; min-height: 44px; }
}
/* /o-mnie/: portret ma natywnie 700x1000, a na tablecie slot rosl do 770px
   (ZMIERZONE na 810: skala 1,10x). Wariant 1707x2560 istnieje, ale wazy 665 kB
   na slot ponizej 800px{ max-width: 700px; margin-inline: auto; }
/* po zdjeciu zdublowanego cytatu (S8) lewa kolumna bloku konwersji na HOME ma
   ok. 490px przy karcie formularza 750px, wiec przy wyrownaniu do gory zostawalo
   ok. 256px pustego bezu pod tekstem (ZMIERZONE na 2000px). Tu wyrownanie do
   srodka jest poprawne, bo to dwie kolumny JEDNEGO bloku o roznej dlugosci.
   Na /kontakt/ zostaje wyrownanie do gory z rundy 3: tam lewa kolumna zaczyna
   sie blokiem danych kontaktowych i musi startowac rowno z karta formularza. */
@media (min-width: 1025px) {
  .bz-oferta[aria-label="Rozmowa diagnostyczna"] .bz-oferta-siatka { align-items: center; }
}
/* ten sam blad rytmu co (S13), tylko na telefonie: regula z rundy 3 zdejmowala
   linie z OSTATNIEGO dziecka KAZDEJ z trzech siatek, wiec w liscie 11 firm
   brakowalo separatora po ClickMeeting i po Grouponie (ZMIERZONE na 430).
   Linia jest pod kazda pozycja, znika tylko pod ostatnia na stronie. */
@media (max-width: 768px) {
  .bz-team .bz-team-item { border-bottom: 1px solid var(--c-linia-ref); }
  .bz-team-3 .bz-team-item:last-child { border-bottom: 0; }
}
/* rail: sticky dopiero od 1300px. ZMIERZONE: ponizej tego progu lista obszarow
   jest jednokolumnowa (10 wierszy), wiec karta ma 980-1001px i jest WYZSZA niz
   typowy ekran laptopa 1280x800. Przyklejona karta zostalaby wtedy przycieta
   od dolu (CTA i ikony poza ekranem, bez mozliwosci doscrollowania). Na tych
   szerokosciach karta i tak ma niemal dokladnie wysokosc artykulu (zmierzone
   na /consulting/generations/: 1001 vs 1001 przy 1025px), wiec sticky nic
   by nie wnioslo, a psulo dostep do tresci. */
@media (min-width: 1025px) and (max-width: 1299px) {
  .bz-art-sidebar-inner { position: static; }
}

/* ============================================================
   RUNDA 5 (2026-08-10) : Architekt
   Krytyk odrzucil runde 4 (6/10). Szkielet i material sa juz OK
   (zero overflow, zero puchnacych zdjec, kafle nie rozlaza sie
   na 400px), ale zostala WARSTWA WYKONCZENIA: zygzak tytulow
   w kaflach, trzy rozne stopnie h2 na tym samym poziomie
   hierarchii, ramka referencji w cwierci pusta, os lewa chodzaca
   miedzy sekcjami, dziura w srodkowej kolumnie stopki i dwie
   konwencje pola w jednym formularzu.
   Kazda pozycja ma pomiar PRZED (2000px, chyba ze napisano inaczej).
   Zero nowych kolorow (tylko tokeny :root), zero zmian tresci
   merytorycznej, zero zmian SEO i pomiaru.
   ============================================================ */

/* ---------- (U1) JEDNA SKALA NAGLOWKOW SEKCJI
   ZMIERZONE PRZED (2000px, identycznie na 1440px): h2 tego samego poziomu
   hierarchii mialy 33 / 42 / 22 px, czyli rozpietosc prawie 2x, a zaden
   z nich nie zmienial sie miedzy 390px a 2000px ("Obszary konsultingu"
   33px na obu koncach). Najslabszy naglowek na stronie mialo pole dowodu
   spolecznego ("Referencje z LinkedIn", 22px = tyle co etykieta kolumny
   w stopce). Teraz sa DWA swiadome stopnie, oba plynne:
     teza  = zdanie, ktore ma przekonac (splity, blok konwersji)
     sekcja= etykieta bloku (uslugi, kompetencje, projekty, referencje)
   Stosunek 43,2 / 35 = 1,23 na 2000px, czyli czytelny krok skali. */
:root {
  --fs-h2-teza:   clamp(30px, 1.20rem + 1.20vw, 44px);
  --fs-h2-sekcja: clamp(27px, 1.05rem + 1.00vw, 35px);
}
.bz-split-tekst h2,
.bz-oferta h2 { font-size: var(--fs-h2-teza); line-height: 1.16em; }
.bz-uslugi-glowa h2,
.bz-kompetencje-teza h2,
.bz-projekty-naglowek h2,
.bz-ref-label h2,
.bz-uslugi-inne-glowa h2 { font-size: var(--fs-h2-sekcja); line-height: 1.21em; }
/* na tablecie kolumna splitu ma 405px, wiec teza dostaje wlasny, wezszy
   zakres (bez tego "Zewnetrzny doradca to mierzalne efekty:" lamie sie na 4 linie) */
@media (min-width: 769px) and (max-width: 1024px) {
  .bz-split-tekst h2 { font-size: clamp(26px, 3.6vw, 30px); }
}

/* ---------- (U2) KAFLE USLUG: JEDNA LINIA IKON I TYTULOW
   ZMIERZONE PRZED (2000px i 1440px, identycznie): wszystkie kafle
   cardTop=1390 h=323, ale ikona startowala na 65 / 65 / 52 / 52 / 65 px
   od gory kafla, a tytul na 169 / 169 / 156 / 157 / 169 px. Zrodlo:
   `justify-content: center` z rundy 4 centrowalo CALY blok tresci, wiec
   kafel z trzywierszowym opisem podnosil ikone i tytul o pol wiersza
   (13px) wzgledem sasiada z dwuwierszowym. Przy widocznych liniach
   podzialu komorek zygzak czytal sie wprost jako niedorobka.
   NAPRAWA (przyczyna, nie objaw): tresc wyrownana do GORY + staly slot
   ikony (1,12em = dokladnie zmierzone 76px przy 68px glifu, wiec skaluje
   sie razem z ikona na tablecie i telefonie) + slot opisu na trzy wiersze,
   zeby dolna krawedz tresci tez byla wspolna. */
.bz-usluga { justify-content: flex-start; }
.bz-usluga [class^="bz-ico-"] { display: block; height: 1.12em; line-height: 1.12em; }
.bz-uslugi .bz-usluga p { min-height: 75px; }
@supports (height: 1lh) { .bz-uslugi .bz-usluga p { min-height: 3lh; } }

/* ---------- (U3) SPLITY WRACAJA NA OS SIATKI
   ZMIERZONE PRZED (2000px): zdjecie splitu 1 startowalo na x=350 (os
   siatki), ale kolumna tekstu konczyla sie na 1585 przy prawej osi 1650,
   a naglowek splitu 2 startowal na x=415 zamiast 350. Zrodlo: procentowy
   padding `.bz-split-tekst { padding: 5% }` liczony od kontenera 1300px,
   wiec wciecie 65px doklejalo sie po ZEWNETRZNEJ stronie kolumny.
   Teraz wciecie jest tylko po stronie rynny miedzy kolumnami; krawedzie
   zewnetrzne obu kolumn siadaja dokladnie na osi siatki.
   Przy okazji to samo dla 1025-1399px: tam split byl pelnoekranowy
   (ZMIERZONE na 1280: .bz-split x=0 w=1280), wiec zdjecie szlo od
   krawedzi okna, a naglowek sekcji nad nim stal na x=90. */
@media (min-width: 1025px) and (max-width: 1399px) {
  .bz-split { padding-inline: calc((100% - var(--szer-grid)) / 2); }
}
@media (min-width: 1025px) {
  .bz-split > .bz-split-tekst { padding-inline: 0; }
  .bz-split > .bz-split-foto + .bz-split-tekst { padding-left: clamp(48px, 4.6vw, 80px); }
  .bz-split > .bz-split-tekst:first-child { padding-right: clamp(48px, 4.6vw, 80px); }
}

/* ---------- (U4) TA SAMA OS PONIZEJ 1400px
   ZMIERZONE PRZED (1280px): naglowek "Obszary konsultingu" mial tresc na
   x=130, siatka kafli szla 0..1280 (od krawedzi do krawedzi), a sekcja
   kompetencji miala kontener 0..1280 z paddingiem 0, wiec naglowek
   "Sprawdz" dotykal lewej krawedzi okna. Trzy rozne osie na jednym ekranie.
   Kazdy z tych kontenerow dostaje te sama os co .bz-kontener (--szer-grid). */
@media (min-width: 769px) {
  .bz-uslugi-glowa { max-width: var(--szer-grid); padding-inline: 0; }
  .bz-uslugi-rzady { max-width: var(--szer-grid); margin-inline: auto; }
  .bz-stopka-gora { max-width: calc(var(--szer-grid) + 100px); margin-inline: auto; }
}
@media (min-width: 1025px) and (max-width: 1399px) {
  .bz-kompetencje-inner { max-width: var(--szer-grid); margin-inline: auto; padding-inline: 0; }
}

/* ---------- (U5) REFERENCJE: Z TABELKI W BLOK REDAKCYJNY
   ZMIERZONE PRZED (2000px): .bz-ref-okno 587..1649 (1062px) przy akapicie
   cytatu ograniczonym do 760px, czyli 267px pustki w ramce; komorka
   naglowka 918px na tytul o szerokosci 197px; naglowek sekcji na x=766
   zamiast na osi 350. Na 810px bylo najgorzej: obramowany prostokat
   380x320 na jedno kolo 150px (47% szerokosci ekranu), cytat scisniety
   do 386px i lamiacy sie na 6 wierszy, a caly band szedl od krawedzi
   do krawedzi, podczas gdy sasiednia sekcja miala 40px marginesu.
   NAPRAWA: znika ramka (to ona zamieniala nadwyzke miejsca w "puste
   komorki"), band siada na osi siatki, naglowek wraca na lewa krawedz
   tresci, a nadwyzke szerokosci zjada TRESC, nie pustka: podpis
   (nazwisko + rola) staje sie trzecia kolumna obok cytatu. */
@media (min-width: 769px) {
  .bz-referencje {
    padding-block: clamp(56px, 4.6vw, 92px);
    padding-inline: calc((100% - var(--szer-grid)) / 2);
  }
  .bz-ref-top {
    max-width: none; margin-inline: 0;
    border: 0; border-bottom: 1px solid var(--c-linia-ref);
    align-items: center; padding-bottom: 18px;
  }
  .bz-ref-label { order: 0; flex: 1 1 auto; padding: 0; }
  .bz-ref-label h2 { margin: 0; color: var(--c-naglowek); }
  .bz-ref-pag {
    order: 1; flex: none; width: auto; height: auto;
    border: 0; padding: 0; margin-left: 24px;
    align-items: center;
  }
  .bz-ref-dol {
    max-width: none; margin-inline: 0; border: 0;
    align-items: center; padding-top: clamp(28px, 2.4vw, 44px);
  }
  .bz-ref-awatary {
    width: 150px; height: 150px; border: 0;
    margin-right: clamp(32px, 3vw, 56px);
  }
  .bz-referencja blockquote p { margin: 0; }
  .bz-ref-imie, .bz-ref-rola { margin-left: 0; }
}
/* trzecia kolumna (podpis) ma sens dopiero tam, gdzie po cytacie zostaje
   realne miejsce; ponizej 1200px podpis wraca pod cytat */
@media (min-width: 1200px) {
  .bz-referencja {
    display: grid; align-content: center; align-items: start;
    grid-template-columns: minmax(0, 1fr) minmax(210px, 290px);
    column-gap: clamp(36px, 3.2vw, 64px);
  }
  .bz-referencja blockquote { grid-column: 1; }
  .bz-referencja figcaption { grid-column: 2; margin: 6px 0 0; }
  /* `width: 75%` z reguly @media (max-width:1440px) dalej dzialalo w tym
     zakresie: kolumna cytatu miala 600px, a tekst lamal sie na 430px, wiec
     miedzy cytatem a podpisem stalo 190px pustki (ZMIERZONE na 1280).
     Miare wyznacza teraz kolumna siatki, nie procent nieistniejacej ramki. */
  .bz-referencja blockquote p { width: auto; line-height: 1.42em; }
}
@media (min-width: 769px) and (max-width: 1199px) {
  .bz-referencja blockquote p { width: auto; font-size: 18px; line-height: 1.5em; }
  .bz-referencja figcaption { margin: 18px 0 0; }
}

/* ---------- (U6) STOPKA: SRODKOWA KOLUMNA PRZESTAJE BYC DZIURA
   ZMIERZONE PRZED (2000px): kolumny stopki maja po 286px wysokosci, ale
   srodkowa niesie naglowek + cztery ikony 44x44 konczace sie na y=499,
   czyli ok. 60px tresci i ok. 150px pustki pod spodem. Do tego linia
   copyright byla wysrodkowana (x=577..1022) przy trzech kolumnach
   wyrownanych do lewej na osi 350..1650.
   NAPRAWA: cztery ikony to nie jest KOLUMNA, tylko pasek. Blok "Odwiedz
   mnie na" schodzi do wlasnego, pelnej szerokosci wiersza pod dwiema
   kolumnami tekstowymi (etykieta i ikony w jednej linii), a copyright
   siada na tej samej osi co reszta stopki. Zero zmian w HTML i w tresci. */
@media (min-width: 681px) {
  .bz-stopka-gora {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-areas: "historia kontakt" "social social";
    row-gap: clamp(28px, 2.4vw, 44px);
  }
  .bz-stopka-gora > div:nth-child(1) { grid-area: historia; }
  .bz-stopka-gora > div:nth-child(3) { grid-area: kontakt; }
  .bz-stopka-gora > div:nth-child(2) {
    grid-area: social;
    display: flex; align-items: center; flex-wrap: wrap;
    gap: 4px 22px;
    padding-top: clamp(20px, 1.8vw, 30px);
    /* separacja samym odstepem, bez nowej barwy: paleta stopki ma tylko
       #171717 / #cccccc / #8e8e8e, a hairline w kazdej z nich bylby albo
       niewidoczny, albo jasniejszy niz tekst obok */
  }
  /* etykieta paska zostaje w tym samym stopniu co tytuly kolumn stopki:
     trzy h2 tego samego poziomu maja miec ten sam stopien (to ten sam blad,
     ktory U1 naprawia w sekcjach glownych) */
  .bz-stopka-gora > div:nth-child(2) h2 { margin: 0; }
  .bz-stopka-gora > div:nth-child(2) .bz-stopka-social { margin-top: 0; }
  .bz-stopka-gora > div:nth-child(2) .bz-stopka-social a:first-child { margin-left: -10px; }
}
.bz-copyright { text-align: left; }
.bz-copyright p {
  max-width: calc(var(--szer-grid) + 100px); margin-inline: auto;
  padding-inline: 50px;
}
@media (max-width: 680px) { .bz-copyright p { padding-inline: 35px; } }

/* ---------- (U7) FORMULARZ: JEDNA KONWENCJA POLA
   ZMIERZONE PRZED (2000px i 810px): trzy pierwsze pola mialy ikone wiodaca
   na x=890, dwa nastepne (oba selecty) nie mialy jej wcale, wiec lewa
   szyna ikon urywala sie w polowie listy; do tego textarea miala tlo
   #f5f2ed, a pozostale pola tlo przezroczyste, wiec ostatnie pole
   wygladalo jak element z innego zestawu.
   NAPRAWA: (a) TA SAMA plaszczyzna pola dla wszystkich szesciu pol
   (token --c-tlo-cieple-2, ten sam, ktory od rundy poprzedniej mialo
   pole "Wiadomosc"), (b) szyna ikon domknieta: selecty i textarea
   dostaja wlasne ikony w tym samym jezyku kreski co chevron selecta
   (maska SVG, wiec nie zaleza od tego, czy dany glif istnieje
   w Linearicons). */
.bz-form input[type="text"],
.bz-form input[type="email"],
.bz-form select,
.bz-form textarea { background: var(--c-tlo-cieple-2); }
.bz-cf-przychod::before,
.bz-cf-sytuacja::before,
.bz-cf-wiadomosc::before {
  content: ''; position: absolute; left: 34px; z-index: 2;
  width: 17px; height: 17px; pointer-events: none;
  background-color: var(--c-akcent);
  -webkit-mask-repeat: no-repeat; -webkit-mask-position: center; -webkit-mask-size: contain;
  mask-repeat: no-repeat; mask-position: center; mask-size: contain;
}
.bz-cf-przychod::before {
  top: 21px;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 17 17'%3E%3Cg fill='none' stroke='%23000' stroke-width='1.2' stroke-linecap='round'%3E%3Cpath d='M2 14.5h13'/%3E%3Cpath d='M4.2 14.5V9'/%3E%3Cpath d='M8.5 14.5V4.5'/%3E%3Cpath d='M12.8 14.5V7'/%3E%3C/g%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 17 17'%3E%3Cg fill='none' stroke='%23000' stroke-width='1.2' stroke-linecap='round'%3E%3Cpath d='M2 14.5h13'/%3E%3Cpath d='M4.2 14.5V9'/%3E%3Cpath d='M8.5 14.5V4.5'/%3E%3Cpath d='M12.8 14.5V7'/%3E%3C/g%3E%3C/svg%3E");
}
.bz-cf-sytuacja::before {
  top: 21px;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 17 17'%3E%3Cg fill='none' stroke='%23000' stroke-width='1.2'%3E%3Ccircle cx='8.5' cy='8.5' r='6.3'/%3E%3Ccircle cx='8.5' cy='8.5' r='2.1'/%3E%3C/g%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 17 17'%3E%3Cg fill='none' stroke='%23000' stroke-width='1.2'%3E%3Ccircle cx='8.5' cy='8.5' r='6.3'/%3E%3Ccircle cx='8.5' cy='8.5' r='2.1'/%3E%3C/g%3E%3C/svg%3E");
}
.bz-cf-wiadomosc::before {
  top: 22px;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 17 17'%3E%3Cpath d='M2.2 3.2h12.6v8.4H8.1L4.6 14.6v-3H2.2z' fill='none' stroke='%23000' stroke-width='1.2' stroke-linejoin='round'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 17 17'%3E%3Cpath d='M2.2 3.2h12.6v8.4H8.1L4.6 14.6v-3H2.2z' fill='none' stroke='%23000' stroke-width='1.2' stroke-linejoin='round'/%3E%3C/svg%3E");
}
@media (max-width: 768px) {
  .bz-cf-przychod::before,
  .bz-cf-sytuacja::before,
  .bz-cf-wiadomosc::before { left: 20px; }
}

/* ---------- (U8) ZDJECIE OTWIERAJACE ARTYKUL: PAS, NIE PLAKAT
   ZMIERZONE PRZED (2000px, okno 1150px): FIGURE 350..1650 (1300px), ale
   IMG 400..1600 (1200x800), wiec (a) obraz byl wsuniety po 50px z kazdej
   strony wzgledem osi calej strony, (b) zajmowal 70% wysokosci ekranu na
   dekoracje, zanim czytelnik doszedl do pierwszego zdania.
   Zdjecie idzie na pelna os siatki i dostaje wysokosc pasa; kadrowanie
   przez `cover`{
  max-width: none; width: 100%;
  height: clamp(280px, 23vw, 460px);
  object-fit: cover; object-position: 50% 32%;
}

/* ---------- (U5b) REFERENCJE: STOPIEN CYTATU OD KONTENERA, NIE OD OKNA
   ZMIERZONE PO pierwszym podejsciu U5: przy `clamp(20px, 1.55vw, 26px)`
   ten sam band o szerokosci 1300px mial cytat 26px na 2000px i 22,3px
   na 1440px, czyli stopien pisma zmienial sie tam, gdzie miara wiersza
   NIE zmienia sie wcale (od 1400px band ma stale 1300px). Stad linia
   cytatu skakala z 5 na 4 wiersze bez powodu. Skala idzie teraz za
   drabinka --szer-grid, dokladnie jak reszta ukladu.
   Do tego wysokosc slajdu z 320px (slack 98px pod najdluzsza opinia)
   schodzi do wartosci wynikajacej z pomiaru najwyzszego slajdu. */
@media (min-width: 769px) {
  .bz-referencje { --h-ref-slajd: 240px; } /* najwyzszy slajd na 1024: 213px */
  .bz-ref-okno, .bz-referencja { height: var(--h-ref-slajd); }
  .bz-referencja blockquote p { font-size: 18px; line-height: 1.5em; }
}
@media (min-width: 1025px) and (max-width: 1199px) {
  .bz-referencje { --h-ref-slajd: 215px; } /* najwyzszy slajd: 190px */
  .bz-referencja blockquote p { font-size: 19px; }
}
@media (min-width: 1200px) and (max-width: 1399px) {
  /* ZMIERZONE na 1280: najwyzszy slajd (Justyna C.) ma 242px, wiec 250px
     zostawialo 8px zapasu; przy dowolnej zmianie tresci cytat by sie uciol */
  .bz-referencje { --h-ref-slajd: 230px; } /* najwyzszy slajd na 1280: 181px */
  .bz-referencja blockquote p { font-size: 21px; line-height: 1.44em; }
}
@media (min-width: 1400px) {
  .bz-referencje { --h-ref-slajd: 245px; } /* najwyzszy slajd: 213px */
  .bz-referencja blockquote p { font-size: 25px; line-height: 1.42em; }
}

/* ---------- (U9) "POZOSTALE USLUGI": NIEPELNY RZAD BEZ DZIURY
   ZMIERZONE (2000px, /consulting/optimization/): 9 kafli w siatce 5 kolumn
   = rzad 5 + rzad 4, wiec w prawym dolnym rogu bezowej plyty zostawal
   pusty slot 260x202. Liczba kafli jest zawsze 9 (dziesiec obszarow minus
   biezacy), wiec zamiast liczyc na zawijanie siatki niepelny rzad
   wyrownuje sie do srodka. Ta sama plyta, ta sama szerokosc kafla. */
@media (min-width: 1025px) {
  .bz-uslugi-inne-tor { display: flex; flex-wrap: wrap; justify-content: center; }
  .bz-uslugi-inne-tor .bz-usluga { flex: 0 0 20%; max-width: 20%; }
}

/* ---------- (U10) OS TRESCI NA TABLECIE: JEDNA MARGINES, NIE PIEC
   ZMIERZONE PRZED (810px): lewa krawedz tresci kolejnych sekcji stala na
   x = 21 (uslugi, projekty, referencje) / 25 (kompetencje) / 40 (blok
   konwersji) / 49 (kolumna tekstu splitu). Zrodlo pierwsze: drabinka
   --szer-grid ma na tablecie SZTYWNE 768px, wiec przy oknie 769px margines
   boczny spada do 0,5px, a przy 810px do 21px: gutter zalezal od tego, jak
   blisko progu jest okno. Zrodlo drugie: procentowe paddingi kolumny splitu
   i wlasne paddingi dwoch sekcji.
   Naprawa u zrodla: siatka na tablecie ma minimalny margines wpisany w sam
   token, a trzy sekcje z wlasnym wcieciem licza je z tego samego wzoru. */
@media (min-width: 769px) and (max-width: 1024px) {
  :root { --szer-grid: min(768px, calc(100vw - 64px)); }
  .bz-kompetencje-inner { padding-inline: calc((100% - var(--szer-grid)) / 2); }
  .bz-oferta { padding-inline: calc((100% - var(--szer-grid)) / 2); }
  .bz-split { padding-inline: 0; }
  .bz-split > .bz-split-tekst { padding-inline: 0; }
  .bz-split > .bz-split-foto + .bz-split-tekst {
    padding-left: 32px; padding-right: calc((100% - var(--szer-grid)) / 2);
  }
  .bz-split > .bz-split-tekst:first-child {
    padding-left: calc((100% - var(--szer-grid)) / 2); padding-right: 32px;
  }
}

/* ---------- (U11) STOPIEN PISMA W POLACH FORMULARZA
   ZMIERZONE PRZED: pola mialy 14px/300 na desktopie i tablecie, a 16px
   dopiero ponizej 769px. Dwa skutki: (a) placeholder jest tu JEDYNA
   etykieta pola, wiec 14px w wadze 300 to najslabszy tekst na calej
   stronie konwersji; (b) iOS przybliza strone przy fokusie na polu
   ponizej 16px, a tablet w pionie (810px) nie lapal sie na regule
   mobilna. Jeden stopien na kazdej szerokosci. */
.bz-form input[type="text"],
.bz-form input[type="email"],
.bz-form select,
.bz-form textarea { font-size: 16px; }
/* copyright na telefonie: wciecie 16px z .bz-copyright + 35px z akapitu
   dawalo x=51 przy kolumnach stopki na x=35 (ZMIERZONE na 430) */
@media (max-width: 768px) { .bz-copyright { padding-inline: 0; } }

/* ---------- (U12) H1 PODSTRON NAD, NIE POD, NAJWIEKSZYM H2
   ZMIERZONE PO wprowadzeniu U1 (/kontakt/, 2000px): h1 "Kontakt" mial
   staly stopien 42px, a h2 "Druga opinia o Twoim marketingu" dostal
   z tokenu tezy 43,2px, czyli naglowek DRUGIEGO poziomu byl wiekszy niz
   pierwszy. Dokladnie ten sam blad, ktory U1 naprawia niżej w hierarchii,
   tylko o pietro wyzej. H1 dostaje wlasny, plynny stopien nad teza
   (54 / 45 / 43 / 35 px dla 2000 / 1440 / 1280 / 810). */
:root { --fs-h1-strony: clamp(34px, 1.40rem + 1.60vw, 54px); }
.bz-pas-tytul h1 { font-size: var(--fs-h1-strony); }
@media (max-width: 680px) { .bz-pas-tytul h1 { font-size: var(--fs-h1-strony); } }

/* ---------- (U13) TRZECI STOPIEN: NAGLOWEK WEWNATRZ TRESCI
   ZMIERZONE PO U1 (360px): naglowek sekcji mial 27px, a naglowek WEWNATRZ
   artykulu staly 28px, wiec na telefonie hierarchia odwracala sie o 1px.
   Skala domyka sie trzecim, tez plynnym stopniem, zawsze ponizej sekcji:
   2000px: 54 (h1) / 43 (teza) / 35 (sekcja) / 25 (tresc)
   360px:  34 / 30 / 27 / 22 */
:root { --fs-h2-tresc: clamp(22px, 1.20rem + 0.30vw, 30px); }
.bz-czytanie h2,
.bz-cta-artykul h2{ font-size: var(--fs-h2-tresc); }

/* ---------- (R11) "Projekty": tor logotypow na osi siatki takze ponizej 1400px
   ZMIERZONE PRZED: 1280px -> naglowek h2 90..1190 (kontener 1100), a tor .bz-team
   0..1280, wiec pierwsze logo dotykalo krawedzi okna i cala sekcja stala na innej
   osi niz reszta strony. 810px -> naglowek 32..778, tor 0..765 (legacy margin-right
   45px z portu vc_row), czyli rozjazd 27px z lewej i 13px z prawej.
   Regula z bloku min-width:1400 (wciecie zamiast max-width, zeby tlo sekcji zostalo
   pelnoekranowe) obowiazuje teraz od 769px w gore. Ponizej 769px os trzyma
   .bz-projekty { padding: 40px 20px 20px }, wiec ten zakres zostaje bez zmian. */
@media (min-width: 769px) and (max-width: 1399px) {
  .bz-projekty { padding-inline: calc((100% - var(--szer-grid)) / 2); }
  .bz-team { margin-right: 0; padding-inline: 0; }
}

/* ============================================================
   DOMKNIECIE UWAG KRYTYKA (2026-08-10)
   4 uwagi "powazne" z werdyktu 7/10 + drobne szlify.
   ============================================================ */

/* (K1) Naglowek trzyma OS TRESCI. Do tej pory topbar i header mialy sztywne
   padding:0 40px, wiec przy 2000px logo stalo 310px na lewo od reszty strony
   (pierwsza rzecz, ktora widzi Rafal). Padding rosnie z ekranem az zrowna sie
   z siatka --szer-grid, na waskich ekranach zostaje 40px. */
.bz-topbar, .bz-header {
  padding-left: max(40px, calc((100% - var(--szer-grid)) / 2));
  padding-right: max(40px, calc((100% - var(--szer-grid)) / 2));
}

/* (K2) Styk siatki kafli z pelnoekranowym pasem foto: bylo 0px nad i 80px pod.
   Symetryczny oddech, zeby zdjecie nie wygladalo jak wrzucone na wierzch. */
@media (min-width: 769px) {
  .bz-pas-foto { margin-top: 80px; }
}

/* (K3) Hero na mobile: reszta strony jest do lewej, wiec hero tez;
   oba CTA rownej szerokosci (byla roznica 89px w wysrodkowanym stosie). */
@media (max-width: 680px) {
  .bz-hero-tresc { text-align: left; }
  .bz-hero-tresc h1, .bz-hero-lead, .bz-hero-mikro { text-align: left; }
  .bz-hero-akcje { align-items: stretch; }
  .bz-hero-akcje .bz-btn-cta, .bz-hero-akcje .bz-btn-outline { width: 100%; text-align: center; justify-content: center; }
}

/* (K4) Menu mobilne jak modal: przyciemnienie tla + CTA w menu.
   Blokade scrolla robi JS (klasa bz-menu-otwarte na body). */
#bz-menu-scrim {
  display: none; position: fixed; inset: 60px 0 0; z-index: 190;
  background: rgba(24, 17, 13, .45);
  -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
}
body.bz-menu-otwarte #bz-menu-scrim { display: block; }
body.bz-menu-otwarte { overflow: hidden; }
.bz-menu-mobilne .bz-menu-cta {
  display: block; margin: 14px 5px 2px; padding: 13px 20px;
  background: var(--c-cta); color: #fff; border: 0; border-radius: 5em;
  font-family: var(--font-naglowki); font-size: 15px; font-weight: 600;
  text-align: center; white-space: nowrap;
}
.bz-menu-mobilne .bz-menu-cta:hover { background: var(--c-cta-hover); color: #fff; }

/* (K5, drobne) Przycisk "do gory" nachodzil na tekst na telefonie,
   a nawigacje na mobile zapewnia sticky pasek. */
@media (max-width: 768px) {
  #bz-do-gory { display: none !important; }
}

/* ============================================================
   KONWERSJA, DOMKNIECIE (2026-08-17)
   CSS do sekcji dodanych w audycie konwersyjnym (agent dodal
   HTML, nie zdazyl z CSS) + sticky CTA + widoczne etykiety.
   ============================================================ */

/* Pas dowodu w hero (finding: zero dowodu nad zgieciem) */
.bz-hero-dowod {
  margin-top: 34px; display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px;
  font-size: 13px; letter-spacing: .02em; color: rgba(255, 255, 255, .82);
}
.bz-hero-dowod-etykieta { text-transform: uppercase; font-size: 11px; letter-spacing: .14em; color: rgba(255, 255, 255, .6); }
.bz-hero-dowod-lista { font-weight: 600; color: rgba(255, 255, 255, .92); }
.bz-hero-dowod-lista i { font-style: normal; margin: 0 7px; color: rgba(255, 255, 255, .45); }
.bz-hero-dowod-link { color: rgba(255, 255, 255, .82); text-decoration: underline; text-underline-offset: 3px; }
.bz-hero-dowod-link:hover { color: #fff; }
@media (max-width: 680px) { .bz-hero-dowod { margin-top: 24px; font-size: 12px; } }

/* Sekcja "Jak wyglada wspolpraca" (3 kroki przeniesione z /dziekuje/) */
/* RUNDA 6: sekcja miala padding boczny 0 i na <=480px (kontener 100%) tresc
   kleila sie do krawedzi ekranu; min. 20px jak w konwencji pelnoekranowych sekcji */
.bz-jak { padding: 84px max(20px, calc((100% - var(--szer-grid)) / 2)) 88px; background: var(--c-tlo-cieple, #f5f1ed); }
.bz-jak-glowa { max-width: 720px; margin-bottom: 44px; }
.bz-jak-glowa h2 { margin-bottom: 12px; }
.bz-jak-glowa p { color: var(--c-tekst-czytanie, #595959); }
.bz-kroki-poziom {
  list-style: none; counter-reset: bz-krok; margin: 0 0 40px; padding: 0;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 34px;
}
.bz-kroki-poziom li { counter-increment: bz-krok; position: relative; padding-top: 52px; }
.bz-kroki-poziom li::before {
  content: counter(bz-krok, decimal-leading-zero); position: absolute; top: 0; left: 0;
  font-family: var(--font-naglowki); font-size: 30px; font-weight: 700; color: var(--c-akcent-ciemny, #9d4c24);
}
.bz-kroki-poziom h3 { font-size: 19px; margin-bottom: 8px; }
.bz-kroki-poziom p { font-size: 15px; line-height: 1.6; color: var(--c-tekst-czytanie, #595959); margin: 0; }
.bz-jak-akcja { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; margin: 0; }
.bz-jak-akcja .bz-btn-mikro { font-size: 13px; color: var(--c-tekst-czytanie, #595959); }
@media (max-width: 900px) { .bz-kroki-poziom { grid-template-columns: 1fr; gap: 26px; } .bz-jak { padding: 60px max(20px, calc((100% - var(--szer-grid)) / 2)) 64px; } }

/* Role przy logotypach ZAWSZE widoczne, bez czekania na hover */
.bz-team-item .bz-team-info { visibility: visible; opacity: 1; }

/* Widoczne etykiety formularza (bylo: placeholder jako jedyna etykieta) */
.bz-form .bz-etykieta {
  display: block; margin-bottom: 6px;
  font-family: var(--font-naglowki); font-size: 13px; font-weight: 600; letter-spacing: .02em;
  color: var(--c-naglowek, #222);
}
.bz-form .bz-pole-hint { display: block; margin-top: 5px; font-size: 12.5px; line-height: 1.45; color: var(--c-tekst-czytanie, #595959); }
.bz-form-szczerosc { font-size: 13.5px; line-height: 1.5; color: var(--c-tekst-czytanie, #595959); margin: 2px 0 10px; }
.bz-form-linkedin { margin-top: 14px; font-size: 13.5px; color: var(--c-tekst-czytanie, #595959); }
.bz-form-linkedin a { text-decoration: underline; text-underline-offset: 3px; color: inherit; }
.bz-form-linkedin a:hover { color: var(--c-akcent-ciemny, #9d4c24); }

/* Sticky CTA na desktopie po przewinieciu za hero (na mobile jest juz pasek) */
#bz-sticky-cta {
  position: fixed; top: 0; left: 0; right: 0; z-index: 180;
  display: none; align-items: center; justify-content: space-between; gap: 20px;
  padding: 10px max(40px, calc((100% - var(--szer-grid)) / 2));
  background: rgba(255, 255, 255, .96); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  box-shadow: 0 2px 18px rgba(0, 0, 0, .09);
  transform: translateY(-100%); transition: transform .25s ease;
}
#bz-sticky-cta.widoczny { transform: translateY(0); }
#bz-sticky-cta .bz-sticky-kim { font-family: var(--font-naglowki); font-size: 14.5px; font-weight: 600; color: var(--c-naglowek, #222); }
#bz-sticky-cta .bz-btn-cta { padding: 11px 26px; font-size: 14px; }
@media (min-width: 1025px) { #bz-sticky-cta { display: flex; } }
@media (prefers-reduced-motion: reduce) { #bz-sticky-cta { transition: none; } }

/* Rzad faktow w sekcji kompetencji (zamiast paskow-samoocen) */
.bz-fakty-rzad { display: flex; gap: 48px; flex-wrap: wrap; margin-top: 34px; }
.bz-fakt strong { display: block; font-family: var(--font-naglowki); font-size: 34px; font-weight: 700; color: var(--c-naglowek, #222); line-height: 1.1; }
.bz-fakt span { font-size: 14px; color: var(--c-tekst-czytanie, #595959); }
@media (max-width: 680px) { .bz-fakty-rzad { gap: 26px; } .bz-fakt strong { font-size: 28px; } }

/* ============================================================
   RUNDA "CHARAKTER PODSTRON USLUG" (2026-08-18), Architekt
   Zakres: 10 podstron /consulting/<slug>/ (jedyne strony z .bz-art-tresc).
   Diagnoza z pomiaru na 2000px:
   (a) pas tytulowy 2000x332, tresc zajmowala lewe 680px, prawa polowa pusta;
   (b) artykul = 640x1209 jednego kroju: jeden h2 25,2px, potem sciana p/ul,
       cytat schowany za cienka szara linia, zero punktow zaczepienia;
   (c) dziesiec stron wygladalo identycznie, roznil je tylko tytul i zdjecie;
   (d) na 390px sama sekcja "Pozostale uslugi" miala 1217px wysokosci.
   Decyzja: serwis MA JUZ wlasny znak strukturalny, akrostych CONSULTING
   (C-O-N-S-U-L-T-I-N-G, uzyty na /consulting/ jako inicjal i w railu jako
   pliki *-literka.jpg). Litera zostaje ZNAKIEM PODSTRONY: jeden monogram
   w pasie tytulowym, dziesiec roznych znakow, zero nowych kolorow i zero
   nowych tresci. Cala odwaga idzie w to jedno miejsce plus w teze; reszta
   to rytm typograficzny.
   ============================================================ */

/* ---------- (C1) MONOGRAM W PASIE TYTULOWYM
   ZMIERZONE PRZED (2000px): .bz-pas-tytul 2000x332, .bz-pas-lead konczyl sie
   na x=1030 przy prawej osi siatki x=1650, czyli 620x332 pustki nad zdjeciem.
   Monogram siada na tej osi i konczy pustke, nie dotykajac kolumny tekstu.
   Wlaczony dopiero od 1025px: nizej kontener ma <=768px, a lead 680px, wiec
   litera wchodzilaby na tekst. Element dekoracyjny, aria-hidden. */
.bz-pas-usluga { position: relative; overflow: hidden; }
.bz-pas-usluga .bz-kontener { position: relative; }
@media (min-width: 1025px) {
  /* DWA ODRZUCONE WARIANTY ZNAKU (oba obejrzane na 2000px):
     1) litera konturowa (-webkit-text-stroke) 270px bez plyty: najladniejsza
        na "S" i "G", ale ZWERYFIKOWANE na /consulting/influence-marketing/
        litera "I" to w Montserrat sam stem, wiec obrysowana czytala sie jako
        pusty prostokat 54px szerokosci, nie jako litera;
     2) ta sama litera wypelniona na 17% krycia: "I" przestal byc bledem, ale
        zostal jasnym slupkiem bez znaczenia.
     Plyta rozwiazuje oba: ramka niesie komunikat "to jest znak", wiec litera
     nie musi bronic sie sama ksztaltem i "I" dziala tak samo jak "G".
     Bialy kwadrat z litera to zreszta ten sam obiekt, co kafelki *-literka.jpg
     w railu obok, tylko w skali naglowka. */
  .bz-pas-usluga .bz-okruszki,
  .bz-pas-usluga h1,
  .bz-pas-usluga .bz-pas-lead { position: relative; z-index: 1; }
}

/* ---------- (C2) WEJSCIE W ARTYKUL: TEZA STRONY, NIE KOLEJNY AKAPIT
   Krotka linia akcentu nad h2 to ten sam znak, ktory nizej otwiera blok CTA:
   "tu zaczyna sie twierdzenie". Pierwszy akapit po h2 dostaje stopien wiekszy
   krok, wiec czytelnik ma gdzie wejsc w tekst zamiast startowac w scianie. */
.bz-art-tresc.bz-czytanie h2 {
  font-size: 30px; line-height: 1.2em; letter-spacing: -.012em;
  margin: 0 0 18px;
}
.bz-art-tresc.bz-czytanie > h2:first-child::before {
  content: ''; display: block; width: 56px; height: 2px;
  background: var(--c-akcent); margin: 0 0 24px;
}
.bz-art-tresc.bz-czytanie h2 + p {
  font-size: 18px; line-height: 30px; color: var(--c-tekst-czytanie);
}
.bz-art-tresc.bz-czytanie p { color: var(--c-tekst-czytanie); }
.bz-art-tresc.bz-czytanie strong { font-weight: 600; color: var(--c-naglowek); }

/* ---------- (C3) LISTY JAKO ZESTAWIENIE, NIE CIAG DALSZY AKAPITU
   ZMIERZONE PRZED: pozycje listy mialy margin 10px i myslnik 10x1px, wiec
   w skanie strony nie odrozanialy sie od akapitow. Teraz lista jest jednym
   blokiem z hairline'ami: da sie ja policzyc wzrokiem bez czytania. */
.bz-art-tresc.bz-czytanie ul,
.bz-art-tresc.bz-czytanie ol {
  margin: 30px 0; padding: 0;
  border-top: 1px solid var(--c-linia-ref);
  border-bottom: 1px solid var(--c-linia-ref);
}
.bz-art-tresc.bz-czytanie ul li,
.bz-art-tresc.bz-czytanie ol li { margin: 0; padding-block: 12px; }
.bz-art-tresc.bz-czytanie ul li + li,
.bz-art-tresc.bz-czytanie ol li + li { border-top: 1px solid #ededed; }
.bz-art-tresc.bz-czytanie ul li::before { top: 25px; width: 12px; }
.bz-art-tresc.bz-czytanie ol li::before { top: 12px; }

/* ---------- (C4) TEZA: JEDYNY GLOSNY ELEMENT W TEKSCIE
   ZMIERZONE PRZED: blockquote to byl Open Sans 300 kursywa 19px za pionowa
   linia 1px, czyli element CICHSZY od otaczajacych akapitow, mimo ze niesie
   puente sekcji. Teraz to plyta na tokenie stopki (--c-stopka) z naglowkowym
   krojem: bialy tekst 17,9:1, jeden taki blok na strone, wyraznie inny niz
   bezowy rail obok (dwie bezowe plamy obok siebie by sie zlaly).
   Uwaga: /consulting/optimization/ nie ma blockquote w tresci, wiec tam rolę
   akcentu przejmuje zestawienie z (C3). Tresci nie dopisujemy. */
.bz-art-tresc.bz-czytanie blockquote {
  margin: 44px 0; padding: 32px 34px 34px; border-left: 0;
  background: var(--c-stopka);
}
.bz-art-tresc.bz-czytanie blockquote::before {
  content: ''; display: block; width: 40px; height: 2px;
  background: var(--c-akcent); margin: 0 0 20px;
}
.bz-art-tresc.bz-czytanie blockquote p {
  font-family: var(--font-naglowki); font-weight: 500; font-style: normal;
  font-size: 20px; line-height: 32px; color: #fff;
}

/* ---------- (C5) DOMKNIECIE ARTYKULU
   Ostatni akapit kazdej z 10 podstron jest zaproszeniem do rozmowy
   ("Zrobmy to wspolnie!", "Zapraszam do kontaktu.", ...), a mial dokladnie
   te sama wage co akapit srodkowy. Dostaje linie i stopien wiecej, wiec
   prowadzi wzrok do karty CTA w railu obok. */
.bz-art-tresc.bz-czytanie > p:last-child {
  margin-top: 38px; padding-top: 28px;
  border-top: 1px solid var(--c-linia-ref);
  font-size: 18px; line-height: 30px;
}
.bz-art-tresc.bz-czytanie > p:last-child strong { color: var(--c-akcent-ciemny); }

/* ---------- (C6) 2000px: KOLUMNA MA MIEC PRESENCJE, NIE SZEROKOSC
   ZMIERZONE PRZED (2000px): 640px przy foncie 16px = ok. 83 znaki w wierszu,
   czyli JUZ powyzej optimum. Poszerzanie kolumny pogorszyloby czytanie, wiec
   nadwyzke ekranu odbieramy stopniem pisma: 17,5px na tej samej szerokosci
   to ok. 76 znakow (lepsza miara) i wyrazniej wypelniona kolumna. */
@media (min-width: 1400px) {
  .bz-art-tresc.bz-czytanie h2 { font-size: 34px; }
  .bz-art-tresc.bz-czytanie p,
  .bz-art-tresc.bz-czytanie li { font-size: 17.5px; line-height: 30px; }
  .bz-art-tresc.bz-czytanie h2 + p,
  .bz-art-tresc.bz-czytanie > p:last-child { font-size: 19.5px; line-height: 33px; }
  .bz-art-tresc.bz-czytanie blockquote p { font-size: 22px; line-height: 35px; }
}

/* ---------- (C7) DOMKNIECIE STRONY: KATALOG CICHNIE, WEZWANIE ROSNIE
   Kolejnosc (siatka kafli PRZED blokiem CTA) zostala ustawiona 2026-08-13
   i zostaje bez zmian. Tu zmienia sie tylko WAGA: "Pozostale uslugi" to
   katalog wyjsc, wiec dostaje etykiete zamiast naglowka w wadze artykulu,
   a wezwanie dostaje ten sam znak akcentu, ktory otwiera artykul.
   Reguly ograniczone do stron z artykulem uslugi (hub /consulting/ oraz
   /o-mnie/ tez maja .bz-cta-artykul i zostaja nietkniete). */
body:has(.bz-art-tresc) .bz-uslugi-inne { border-top: 1px solid var(--c-linia-ref); }
body:has(.bz-art-tresc) .bz-uslugi-inne-glowa h2 {
  font-family: var(--font-naglowki); font-size: 13px; line-height: 1.6;
  font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
  color: var(--c-tekst-czytanie);
}
body:has(.bz-art-tresc) .bz-cta-artykul .bz-kontener::before {
  content: ''; display: block; width: 56px; height: 2px;
  background: var(--c-akcent); margin: 0 auto 26px;
}
@media (min-width: 1400px) {
  body:has(.bz-art-tresc) .bz-cta-artykul h2 { font-size: 33px; }
  body:has(.bz-art-tresc) .bz-cta-artykul p { font-size: 17px; line-height: 29px; }
}

/* ---------- (C8) 390px: KATALOG PRZESTAJE BYC DRUGA STRONA
   ZMIERZONE PRZED (390px): .bz-uslugi-inne 390x1217, czyli miedzy koncem
   artykulu a wezwaniem stalo 1,4 ekranu kafli w jednej kolumnie. Dwie
   kolumny mieszcza ten sam komplet dziewieciu wyjsc w ok. polowie wysokosci,
   a cel dotykowy kafla dalej ma grubo ponad 44px. */
@media (max-width: 480px) {
  .bz-uslugi-inne-tor { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bz-uslugi-inne-tor .bz-usluga { padding: 20px 12px 24px; }
  .bz-uslugi-inne-tor .bz-usluga [class^="bz-ico-"] { font-size: 34px; }
  .bz-uslugi-inne-tor .bz-usluga h3 { font-size: 14px; margin-top: 10px; }
  .bz-uslugi-inne-tor .bz-usluga p { font-size: 12.5px; line-height: 1.5; }
  .bz-art-tresc.bz-czytanie h2 { font-size: 24px; }
  .bz-art-tresc.bz-czytanie h2 + p,
  .bz-art-tresc.bz-czytanie > p:last-child { font-size: 17px; line-height: 29px; }
  .bz-art-tresc.bz-czytanie blockquote { padding: 26px 22px 28px; margin: 34px 0; }
  .bz-art-tresc.bz-czytanie blockquote p { font-size: 18px; line-height: 29px; }
}

/* ============================================================
   HUB CONSULTING: STRUKTURA ZAMIAST POWTORKI (2026-08-18, Architekt)
   Dotyczy WYLACZNIE /consulting/ (klasy .bz-hub-*), reszta serwisu bez zmian.

   ZMIERZONE PRZED (2000px): dokument 4579px. Pas tytulowy 360px mial tresc
   tylko po lewej (lead 680px w kontenerze 1300px), prawe ok. 620px + marginesy
   = pusta biel. Pod siatka 10 kafli (791px) szly TRZY sekcje .bz-split
   (699 + 891 + 749 = 2339px) z ta sama dziesiatka uslug opisana slowami,
   bez ani jednego naglowka, bez kotwic, bez sygnalu "to jest rozwiniecie
   kafli, ktore wlasnie widziales". Struktura plaska: h1 -> 10 x h3 w kaflach
   -> 2339px akapitow. Na 390px dokument mial 7005px.

   RUNDA 6 (2026-08-18): scalenie kafla z akapitem.
   Runda 5 dala prozie strukture, ale zostawila NAJWIEKSZE zrodlo powtorki:
   ten sam obszar mial na hubie dwa wystapienia (kafel ikona+nazwa+haslo,
   potem akapit z ta sama nazwa i tym samym haslem w naglowku), a trzecie
   stoi na stronie glownej, ktora ma identyczna siatke 10 kafli i identyczny
   lead. ZMIERZONE: siatka kafli 850px na 2000px i 1667px na 390px.
   PO: kafel i akapit to JEDEN wiersz obszaru (ikona | nazwa + haslo | akapit
   | wyjscie). Home zostaje warstwa przegladu, hub warstwa wyjasnienia,
   kazdy obszar ma na hubie dokladnie jedno miejsce i jedna kotwice.
   Wiersz zamiast kafla to tez ucieczka od siatki kart ikona+naglowek+tekst
   (anty-referencja z PRODUCT.md), a szeroki ekran dostaje robote: przy
   1240px+ wiersz rozklada sie na cztery kolumny na pelna szerokosc siatki.
   Grupy 3/4/3 (CON/SULT/ING) mialy przy 3 kolumnach sierote w grupie 4,
   wiec podzial idzie 5+5 (CONSU / LTING), tak jak dwa rzedy kafli.
   ============================================================ */

/* ---------- pas tytulowy: dwie kolumny od 1025px ---------- */
.bz-hub-pas-siatka { display: grid; gap: 34px; }
@media (min-width: 1025px) {
  .bz-hub-pas-siatka { grid-template-columns: minmax(0, 1fr) 360px; column-gap: 72px; align-items: end; }
}
@media (min-width: 1400px) {
  .bz-hub-pas-siatka { grid-template-columns: minmax(0, 1fr) 400px; column-gap: 100px; }
}
.bz-hub-pas-tresc .bz-pas-lead { max-width: 640px; }
.bz-hub-panel { background: var(--c-tlo-cieple); padding: 26px 28px 30px; }
.bz-hub-panel-tekst {
  margin: 0 0 20px; font-family: var(--font-naglowki); font-weight: 600;
  font-size: 18px; line-height: 1.45; color: var(--c-naglowek);
}
.bz-hub-panel .bz-btn { margin: 0; }
.bz-hub-panel .bz-btn-mikro { margin-top: 12px; }
@media (max-width: 1024px) { .bz-hub-panel { padding: 22px 22px 26px; } }
@media (max-width: 680px) {
  .bz-hub-panel-tekst { font-size: 16.5px; }
  .bz-hub-panel .bz-btn { display: flex; justify-content: center; }
}

/* ---------- nota o kolejnosci (pod leadem w pasie tytulowym) ---------- */
.bz-hub-most {
  max-width: 640px; margin: 16px 0 0;
  font-size: 15px; line-height: 1.6; color: var(--c-tekst-czytanie);
}
.bz-hub-most b {
  font-family: var(--font-naglowki); font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase; color: var(--c-akcent-ciemny);
}
@media (max-width: 768px) { .bz-hub-most { font-size: 14px; } }

/* ---------- grupa obszarow ---------- */
.bz-hub-grupa {
  padding: clamp(48px, 3.6vw, 72px) 40px clamp(42px, 3vw, 56px);
  scroll-margin-top: 88px; /* sticky CTA ma ok. 66px wysokosci */
}
.bz-hub-glowa {
  display: flex; flex-wrap: wrap; align-items: baseline;
  justify-content: space-between; gap: 10px 32px;
  margin-bottom: clamp(30px, 2.6vw, 46px);
}
.bz-hub-glowa h2 { margin: 0; font-size: clamp(21px, 1.6vw, 26px); line-height: 1.25em; }
.bz-hub-slowo {
  margin: 0; font-family: var(--font-naglowki); font-weight: 700;
  font-size: clamp(15px, 1.4vw, 21px); letter-spacing: .3em;
  color: var(--c-akcent-jasny); white-space: nowrap;
}
.bz-hub-slowo span:last-child { letter-spacing: 0; }
.bz-hub-litera-on { color: var(--c-akcent-ciemny); }

/* ---------- wiersz obszaru (kafel + akapit w jednym) ----------
   Kreska nad wierszem zamiast ramki karty: jedna seria, nie dziesiec pudelek.
   Cale pole wiersza jest klikalne przez rozciagniety link "wiecej", ale
   afordancja zostaje widoczna (runda 4), wiec nie ma ukrytego celu. */
.bz-hub-lista { display: grid; gap: 0; }
.bz-hub-poz {
  position: relative; display: grid; gap: 8px;
  /* ikona zawsze na szynie obok nazwy, nie nad nia: ZMIERZONE na 390px
     wlasny wiersz ikony kosztowal ok. 42px na pozycje, czyli 420px scrolla
     za element czysto dekoracyjny. */
  grid-template-columns: 40px minmax(0, 1fr);
  grid-template-areas: "ico tyt" ". txt" ". akc";
  column-gap: 16px;
  border-top: 1px solid var(--c-linia-ref);
  padding: 20px 16px 22px; margin-inline: -16px;
  scroll-margin-top: 96px;
  transition: background-color .18s ease;
}
.bz-hub-lista .bz-hub-poz:last-child { border-bottom: 1px solid var(--c-linia-ref); }
.bz-hub-poz:hover, .bz-hub-poz:focus-within { background: var(--c-akcent-hover); }
@media (prefers-reduced-motion: reduce) { .bz-hub-poz { transition: none; } }

.bz-hub-ico { grid-area: ico; font-size: 46px; line-height: 1; color: var(--c-akcent-jasny); }
.bz-hub-poz h3 {
  grid-area: tyt; margin: 0; font-size: 19px; line-height: 1.3em;
  font-weight: 600; color: var(--c-naglowek);
}
/* ZMIERZONE: --c-akcent (#b47759) na bieli daje 3,67:1, czyli AA fail dla
   tekstu 15px. --c-akcent-ciemny trzyma cieplo i daje 6,01:1 na bieli oraz
   4,95:1 na podswietleniu wiersza (#efe8df). */
.bz-hub-obietnica {
  display: block; margin-top: 6px; font-size: 15px; line-height: 1.5;
  font-weight: 400; color: var(--c-akcent-ciemny);
}
.bz-hub-akapit {
  grid-area: txt; margin: 0; max-width: 62ch;
  font-size: 15.5px; line-height: 1.62; color: var(--c-tekst-czytanie);
}
/* link ma wlasny obszar siatki i rozciaga sie na caly wiersz */
.bz-hub-poz > .bz-wiecej-link { grid-area: akc; margin-top: 2px; }
.bz-hub-poz > .bz-wiecej-link::after { content: ""; position: absolute; inset: 0; }
.bz-hub-poz:hover .bz-wiecej { color: var(--c-naglowek); border-color: currentColor; }
/* inicjal: ta sama figura co wczesniej, teraz jako pierwsza litera nazwy.
   Dziesiec inicjalow to naprawde slowo CONSULTING, wiec to informacja. */
.bz-hub-poz h3 .bz-duza-litera {
  display: inline; float: none; font-family: var(--font-naglowki);
  font-size: 1.45em; line-height: 1; vertical-align: baseline;
  letter-spacing: -.01em; font-weight: 700; color: var(--c-akcent-ciemny);
}

/* tablet i wezszy desktop: ikona na szynie po lewej, tekst w jednej kolumnie */
@media (min-width: 769px) {
  .bz-hub-poz {
    grid-template-columns: 56px minmax(0, 1fr);
    grid-template-areas: "ico tyt" ". txt" ". akc";
    column-gap: 26px; padding: 24px 16px 26px;
  }
  .bz-hub-ico { align-self: start; }
}
/* pelny wiersz: 4 kolumny na calej szerokosci siatki. Prog 1240px, bo dopiero
   powyzej 1200px --szer-grid wraca do 1100px (nizej 950px robi kolumne
   tekstu na 250px). ZMIERZONE: 1100px siatki = kolumna akapitu 400px,
   1300px siatki (od 1400px viewportu) = 600px, czyli ok. 62ch. */
@media (min-width: 1240px) {
  .bz-hub-poz {
    grid-template-columns: 56px 380px minmax(0, 1fr) 120px;
    grid-template-areas: "ico tyt txt akc";
    column-gap: 48px; align-items: start;
    padding: 26px 18px 28px; margin-inline: -18px;
  }
  .bz-hub-poz > .bz-wiecej-link { margin-top: 3px; justify-self: end; }
}
@media (max-width: 768px) {
  .bz-hub-grupa { padding: 30px 20px 32px; }
  /* ZMIERZONE na 390: h2 ma 169 / 177px, slowo 143px, odstep 32px, wiec
     w kolumnie 350px naglowek grupy i pasek postepu nie mieszcza sie obok
     siebie w kazdej grupie; pasek zawsze schodzi pod naglowek. */
  .bz-hub-glowa { display: block; margin-bottom: 18px; }
  .bz-hub-glowa h2 { margin-bottom: 5px; }
  .bz-hub-slowo { font-size: 14px; letter-spacing: .24em; }
  .bz-hub-ico { font-size: 32px; }
  .bz-hub-poz h3 { font-size: 17.5px; }
  .bz-hub-obietnica { font-size: 14.5px; }
  .bz-hub-akapit { font-size: 15px; }
}

/* ---------- wezwanie w polowie strony (jedyny .bz-split na hubie) ---------- */
.bz-hub-cta { background: var(--c-tlo-cieple); }
/* max-width 16ch lamalo naglowek na "Zanim wybierzesz / obszar, / porozmawiajmy"
   (sierota z przecinkiem w srodkowej linii); 21ch + balance daje dwa rowne wiersze */
.bz-hub-cta-tresc h2 { margin: 0; font-size: clamp(24px, 2vw, 32px); line-height: 1.22em; max-width: 21ch; text-wrap: balance; }
.bz-hub-cta-tresc .bz-btn { margin-top: 26px; }
@media (min-width: 769px) {
  /* `height:100%` dawalo 0px (procent od kontenera o wysokosci auto);
     samo zdjecie ma sie rozciagnac do wysokosci kolumny tekstu (align-items: stretch) */
  /* `.bz-split` ma dalej w pliku `align-items:center`, wiec bez `align-self`
     zdjecie zatrzymywalo sie na 300px i wisialo w polowie pasa */
  .bz-hub-cta .bz-split-foto { align-self: stretch; min-height: 300px; background-position: 50% 20%; }
  .bz-hub-cta .bz-split-tekst { padding-top: clamp(52px, 5%, 90px); padding-bottom: clamp(52px, 5%, 90px); }
}
@media (max-width: 768px) {
  .bz-hub-cta .bz-split-tekst { padding-top: 40px; }
  .bz-hub-cta-tresc h2 { max-width: none; }
}

/* USUNIETE w rundzie 6: .bz-hub-foto (pas zdjeciowy miedzy grupami).
   Klasa nie byla uzyta w zadnym pliku, a twarz ma prace tylko przy
   wezwaniu w polowie strony. */

/* ============================================================
   (N1) RUNDA NARRACJA 2026-08-18 (Architekt) - PODSTRONA /o-mnie/
   Strona buduje zaufanie do CZLOWIEKA, wiec dostaje narracje zamiast
   czterech rownolegle glosnych blokow: kto to jest (portret w pasie
   tytulowym) -> gdzie byl (szyna 01-05) -> czym sie kieruje (wartosci
   raz, nie w zakladkach) -> co obiecuje (ciemny blok "otwarte karty")
   -> cudze slowa (referencje) -> zaproszenie (CTA).
   Wszystkie klasy wyjete z <style> per strona; zero nowych kolorow,
   zero nowych stopni poza tokenami --fs-*.
   ZMIERZONE PRZED (o-mnie): 2000px sekcja .bz-kariera 1173px z portretem
   635x907 obok kolumny tekstu 508px; 810px ten sam portret renderowal sie
   700x1000 (natywnie, sekcja 1986px); 390px portret 390x557. Trzy zupelnie
   inne proporcje tego samego zdjecia. Ponizej proporcja jest deklarowana
   na kazdym progu (aspect-ratio + object-fit), wiec kadr nie skacze.
   ============================================================ */

/* ---------- (N1a) wejscie: pas tytulowy z portretem ---------- */
.bz-pas-osoba { position: relative; z-index: 2; }
.bz-osoba-foto { margin: 0; }
.bz-osoba-foto img { display: block; width: 100%; object-fit: cover; object-position: 50% 8%; }
/* WYLICZONE, nie na oko: oryginal 700x1000, glowa zaczyna sie ok. 39 px od gory.
   Przy kadrze 3:2 na tablecie okno cover to naturalne y 43..509 dla pozycji 8%,
   czyli 4 px zapasu nad wlosami. Pozycja 3% przesuwa okno na y 10..477 i daje
   ok. 29 px powietrza nad glowa na kazdym progu ponizej 1025 px. */
@media (max-width: 1024px) { .bz-osoba-foto img { object-position: 50% 3%; } }

@media (min-width: 1025px) {
  .bz-pas-osoba .bz-kontener {
    display: grid;
    grid-template-columns: minmax(0, 1fr) clamp(300px, 27vw, 400px);
    gap: 56px;
    align-items: center;
  }
  /* portret przechodzi przez dolna krawedz pasa: -136px marginesu przy 66px
     dolnego paddingu daje rowne 70px zwisu w biala sekcje ponizej, na kazdej
     szerokosci. .bz-droga ma 126px gory, wiec naglowek startuje 56px pod zdjeciem. */
  .bz-osoba-foto { align-self: end; margin-bottom: -136px; position: relative; z-index: 1; }
  .bz-osoba-foto img { aspect-ratio: 4 / 5; box-shadow: 0 18px 40px -22px rgba(23,23,23,.45); }
  .bz-osoba-tekst .bz-pas-lead { max-width: 640px; }
}
@media (max-width: 1024px) {
  .bz-osoba-foto { margin: 30px 0 0; }
  .bz-osoba-foto img { aspect-ratio: 3 / 2; }
}
@media (max-width: 680px) {
  .bz-osoba-foto { margin-top: 24px; }
  .bz-osoba-foto img { aspect-ratio: 4 / 3; }
}

/* ---------- (N1b) droga zawodowa: szyna 01-05 ----------
   PRZED: piec razy ten sam blok "numer 70px w kolorze 3,2:1 + naglowek 17px
   + akapit" w kolumnie 508px, bez zadnego widocznego tytulu sekcji (tytul
   siedzial wylacznie w aria-label, wiec widzacy uzytkownik czytal numeracje
   bez wyjasnienia). PO: numer jest cichym znacznikiem na ciaglej szynie,
   dominanta to nazwa firmy, a branza stoi w prawej rynnie i przez piec
   wierszy tworzy druga kolumne informacji. */
.bz-droga { padding: 126px 40px 88px; }
.bz-droga-tytul { margin: 0; font-size: var(--fs-h2-sekcja); line-height: 1.21em; }
/* Od 1025px sekcja ma kregoslup: tytul stoi w lewej kolumnie i jedzie z czytelnikiem
   (position: sticky), a szyna 01-05 przewija sie obok. Bez tego tytul znikal po
   pierwszym kroku i dalsze cztery wiersze czytalo sie bez kontekstu. */
@media (min-width: 1025px) {
  .bz-droga .bz-kontener { display: grid; grid-template-columns: minmax(0, 300px) minmax(0, 1fr); gap: 0 60px; align-items: start; }
  .bz-droga-tytul { position: sticky; top: 40px; align-self: start; }
  .bz-droga-lista { margin-top: 6px; }
}
.bz-droga-lista { list-style: none; margin: 46px 0 0; padding: 0; }
.bz-droga-krok { position: relative; display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: 0 28px; padding: 0 0 46px; }
.bz-droga-krok::before { content: ""; position: absolute; left: 5px; top: 28px; bottom: 0; width: 1px; background: var(--c-linia); }
.bz-droga-krok:last-child { padding-bottom: 0; }
.bz-droga-krok:last-child::before { display: none; }
/* prawa krawedz etykiety branzy trafia w prawa krawedz akapitu (oba 660px),
   wiec przez piec wierszy powstaje druga, wyrownana kolumna informacji. */
.bz-droga-h { margin: 0; max-width: 660px; display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 30px; }
.bz-droga-firma { font-size: clamp(19px, 0.95rem + 0.4vw, 24px); line-height: 1.26; font-weight: 600; color: var(--c-naglowek); }
.bz-droga-branza { font-family: var(--font-naglowki); font-size: 12px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; line-height: 1.5; text-align: right; color: var(--c-akcent-ciemny); }
.bz-droga-tresc p { margin: 12px 0 0; max-width: 660px; color: var(--c-tekst-czytanie); }

/* ---------- (N1c) wartosci: jeden ekran, lista RAZ ----------
   PRZED: trzy zakladki, z czego dwie mialy identyczna szescioelementowa liste
   checkow (przelaczenie nie zmienialo polowy panelu), a trzecia chowala
   najmocniejszy tekst serwisu. Do tego wykres kolowy 50/15/15/20 = samoocena
   w procentach, ten sam gatunek co paski zdjete ze strony glownej. */
.bz-wart { background: var(--c-tlo-cieple-2); padding: 86px 40px 90px; }
.bz-wart-glowa { display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(0, 0.88fr); gap: 30px 70px; align-items: start; }
.bz-wart-glowa h2 { margin: 0 0 16px; font-size: var(--fs-h2-sekcja); line-height: 1.21em; }
.bz-wart-kol p { margin: 0; color: var(--c-tekst-czytanie); }
.bz-wart-kol-cicha { padding-left: 40px; border-left: 1px solid var(--c-linia); }
.bz-wart-kol-cicha h3 { margin: 0 0 12px; font-size: 19px; line-height: 1.32em; }
.bz-wart-siatka { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 48px; margin: 54px 0 0; padding: 0; }
.bz-wart-siatka li { display: flex; align-items: baseline; gap: 14px; padding: 17px 0 16px; border-top: 1px solid var(--c-linia); font-family: var(--font-naglowki); font-size: 16px; line-height: 1.4; font-weight: 600; color: var(--c-naglowek); }
.bz-ico-check { flex: 0 0 auto; font-family: 'ElegantIcons'; font-style: normal; font-size: 15px; line-height: 1; color: var(--c-akcent-ciemny); }
.bz-ico-check::before { content: "\4e"; }

/* ---------- (N1d) "Gramy w otwarte karty": szczyt strony ----------
   Jedyny ciemny blok na stronie i jedyna etykieta typu eyebrow, wiec czyta sie
   jako akcent, a nie jako wzorzec powtarzany nad kazda sekcja. Ciemne tlo bierze
   token stopki, wiec nie wchodzi nowy kolor: #cccccc na #171717 = 11,4:1,
   biel = 18,3:1, terakota --c-akcent na #171717 = 5,0:1. */
.bz-karty { background: var(--c-stopka); padding: 90px 40px 94px; }
.bz-karty-etykieta { margin: 0 0 30px; font-family: var(--font-naglowki); font-size: 12px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--c-akcent); }
.bz-karty-siatka { display: grid; grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr); gap: 30px 80px; align-items: start; }
.bz-karty-siatka h2 { margin: 0; color: #fff; font-size: var(--fs-h2-teza); line-height: 1.12em; }
.bz-karty-tresc p { margin: 0 0 18px; color: var(--c-stopka-tekst); line-height: 28px; }
.bz-karty-tresc p:last-child { margin-bottom: 0; }
.bz-karty-tresc .bz-karty-lead { font-size: clamp(19px, 0.95rem + 0.5vw, 23px); line-height: 1.5; color: #fff; }

/* ---------- (N1e) tablet i telefon ---------- */
@media (max-width: 1024px) {
  .bz-droga { padding: 64px 25px 64px; }
  .bz-droga-lista { margin-top: 36px; }
  .bz-droga-krok { grid-template-columns: 76px minmax(0, 1fr); gap: 0 22px; padding-bottom: 40px; }
  .bz-wart { padding: 62px 25px 68px; }
  .bz-wart-glowa { grid-template-columns: 1fr; gap: 32px; }
  .bz-wart-kol-cicha { padding: 28px 0 0; border-left: 0; border-top: 1px solid var(--c-linia); }
  .bz-wart-siatka { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 32px; margin-top: 42px; }
  .bz-karty { padding: 66px 25px 70px; }
  .bz-karty-siatka { grid-template-columns: 1fr; gap: 22px; }
}
@media (max-width: 680px) {
  .bz-droga { padding: 52px 20px 52px; }
  .bz-droga-krok { grid-template-columns: 58px minmax(0, 1fr); gap: 0 14px; padding-bottom: 34px; }
  .bz-droga-krok::before { left: 4px; top: 26px; }
  .bz-droga-h { justify-content: flex-start; gap: 6px 16px; }
  .bz-droga-branza { text-align: left; }
  .bz-wart { padding: 52px 20px 56px; }
  .bz-wart-siatka { grid-template-columns: 1fr; gap: 0; margin-top: 34px; }
  .bz-karty { padding: 52px 20px 56px; }
  .bz-karty-etykieta { margin-bottom: 22px; }
}

/* ---------- (C9) MOBILE: REJESTR BEZ NADMIARU WYSOKOSCI
   ZMIERZONE PO (C3) na 390px: artykul urosl z 1967 do 2429px, z czego ok. 290px
   to sam oddech pozycji w dwoch listach. Na telefonie hairline sam wystarczy
   za separator, wiec oddech schodzi z 12 do 9px (marker jedzie razem z nim). */
@media (max-width: 680px) {
  .bz-art-tresc.bz-czytanie ul li,
  .bz-art-tresc.bz-czytanie ol li { padding-block: 9px; }
  .bz-art-tresc.bz-czytanie ul li::before { top: 22px; }
  .bz-art-tresc.bz-czytanie ol li::before { top: 9px; }
  .bz-art-tresc.bz-czytanie ul,
  .bz-art-tresc.bz-czytanie ol { margin: 24px 0; }
}

/* ============================================================
   RUNDA 6 (2026-08-18) : Architekt
   GRUPA: /kontakt/, /dziekuje/, /mapa-strony/, /polityka-prywatnosci/
   Cztery strony, ktore mialy szkielet, ale nie mialy szablonu:
   /kontakt/ = sam formularz bez powodu, zeby go wypelnic wlasnie tu,
   /dziekuje/ = najwyzsze zaangazowanie na najubozszym ekranie,
   dwie strony formalne = goly tekst bez szablonu czytania.
   Zero nowych kolorow (wylacznie tokeny :root), zero nowej tresci
   merytorycznej, zero zmian w SEO i w pomiarze.
   Kazda pozycja ma pomiar PRZED na 2000px, chyba ze napisano inaczej.
   ============================================================ */

/* ---------- (R6-1) /kontakt/: pas tytulowy dwukolumnowy
   ZMIERZONE PRZED (2000px): .bz-pas-tytul 2000x332, siatka 1300px, tekst
   ograniczony do 680px (--bz-pas-lead max-width), wiec 620px pasa (48%
   szerokosci siatki) bylo pustym bezem. Dane kontaktowe stoja teraz w tej
   pustce. Ponizej 1025px siatka wraca do jednej kolumny i dane ida pod lead,
   czyli dalej na pierwszym ekranie telefonu. */
.bz-tytul-siatka {
  display: grid; grid-template-columns: minmax(0, 1fr) 360px;
  justify-content: space-between; column-gap: 60px; align-items: start;
}
.bz-pas-tytul-kontakt .bz-pas-lead { max-width: 560px; }
.bz-pas-tytul-kontakt .bz-kontakt-dane { margin: 0; }
@media (max-width: 1024px) {
  .bz-tytul-siatka { grid-template-columns: 1fr; row-gap: 30px; }
  .bz-pas-tytul-kontakt .bz-pas-lead { max-width: none; }
}

/* ---------- (R6-2) /kontakt/: kolejnosc kolumn na telefonie + balans na desktopie
   ZMIERZONE PRZED (390px): .bz-oferta-form y=1497, bo miedzy trescia a formularzem
   stal cytat o wysokosci 311px. Na stronie KONTAKT pierwsze pole formularza bylo
   po prawie dwoch ekranach przewijania.
   Rozwiazanie: lewa kolumna to wrapper (.bz-oferta-tresc) z dwoma dziecmi
   (.bz-oferta-tekst i cytat). Ponizej 769px, czyli tam gdzie siatka i tak schodzi
   do jednej kolumny, wrapper dostaje display:contents, wiec oba dzieci staja sie
   osobnymi elementami siatki i daja sie ustawic w kolejnosci tresc / FORMULARZ /
   dowod. Powyzej 769px uklad jest klasyczny dwukolumnowy, bez zadnej zmiany.

   ZMIERZONE PRZED (2000px, po przeniesieniu danych kontaktowych do pasa tytulowego):
   lewa kolumna 579px przy karcie formularza 1067px, czyli 488px pustego bezu pod
   cytatem. Wyrownanie do gory z rundy 3 (R1) mialo swoj powod: lewa kolumna
   zaczynala sie WTEDY blokiem danych kontaktowych, ktory musial startowac rowno
   z karta. Tego bloku juz tam nie ma, wiec obowiazuje ta sama zasada co na HOME:
   dwie kolumny JEDNEGO bloku o roznej dlugosci wyrownuje sie do srodka, zeby
   pustka rozlozyla sie symetrycznie (2x ok. 244px) zamiast wisiec jedna plama
   pod trescia. Scope: .bz-oferta-kontakt, wiec blok konwersji na HOME nietkniety. */
@media (min-width: 1025px) {
  .bz-oferta-kontakt .bz-oferta-siatka { align-items: center; }
}
/* ZMIERZONE (810px): siatka trzymala dwie kolumny az do 768px, wiec karta
   formularza miala 348px, a samo pole wejsciowe 278px minus 95px paddingu
   ikon = 183px realnej miary. Formularz kwalifikujacy z dwoma selectami nie
   ma prawa dzialac w takim slocie. Na /kontakt/ siatka schodzi do jednej
   kolumny juz od 1024px w dol: formularz dostaje wtedy pelne 746px.
   Scope tylko .bz-oferta-kontakt, blok konwersji na HOME bez zmian. */
@media (max-width: 1024px) {
  .bz-oferta-kontakt .bz-oferta-siatka { grid-template-columns: 1fr; gap: 40px; }
}
/* ZMIERZONE (390px) po samym przeniesieniu cytatu: karta formularza y=1170.
   Para kwalifikacyjna zabierala nad nia kolejne 227px, wiec jedzie tez pod
   formularz. Na stronie KONTAKT formularz ma byc pierwsza rzecza po tezie,
   a kwalifikacja i dowod czytaja sie rownie dobrze po nim. */
@media (max-width: 1024px) {
  .bz-oferta-kontakt .bz-oferta-tresc { display: contents; }
  .bz-oferta-kontakt .bz-oferta-tekst  { order: 1; }
  .bz-oferta-kontakt .bz-oferta-form   { order: 2; }
  .bz-oferta-kontakt .bz-dopasowanie   { order: 3; margin-top: 0; }
  .bz-oferta-kontakt .bz-oferta-dowod  { order: 4; margin-top: 0; }
}

/* ---------- (R6-3) /kontakt/: kwalifikacja jako para, nie jako dwa myslniki
   ZMIERZONE PRZED: "Dla kogo" i "Nie moja specjalizacja" byly dwoma pozycjami
   listy .bz-oferta-lista, czyli informacja "czy to jest w ogole dla mnie"
   miala dokladnie taka sama wage jak zdanie ozdobne. Para blokow z etykietami
   i z linia u gory: terakota = pracuje, szara = nie pracuje. Opozycja jest
   zakodowana w strukturze, nie w kolorze tekstu (kontrast tekstu bez zmian). */
.bz-dopasowanie {
  margin-top: 30px; display: grid; grid-template-columns: 1fr 1fr; gap: 26px;
}
.bz-dopasowanie-poz { padding-top: 14px; border-top: 2px solid var(--c-linia); }
.bz-dopasowanie-tak { border-top-color: var(--c-akcent); }
.bz-oferta .bz-dopasowanie-poz p { font-size: 15px; line-height: 25px; margin: 0; }
/* etykieta jest akapitem, wiec musi bic regule wyzej specyficznoscia, nie kolejnoscia */
.bz-oferta .bz-dopasowanie-poz p.bz-dopasowanie-etykieta {
  margin: 0 0 6px; font-family: var(--font-naglowki);
  font-size: 12px; line-height: 1.6; font-weight: 600;
  letter-spacing: .08em; text-transform: uppercase; color: var(--c-naglowek);
}
@media (max-width: 680px) { .bz-dopasowanie { grid-template-columns: 1fr; gap: 20px; } }

/* ---------- (R6-4) /kontakt/: karta formularza dostaje glowe
   ZMIERZONE PRZED: pierwsza linia najwazniejszej karty na stronie brzmiala
   "Pola oznaczone * sa wymagane", czyli karta otwierala sie instrukcja obslugi
   i nie mowila, na co wlasciwie sie zapisujesz. Glowa nosi te sama nazwe co
   przycisk (jedna nazwa akcji przez caly flow) i obietnice "bez oferty na sile"
   przeniesiona z leadu lewej kolumny. Stopien naglowka celowo z tokenu tresci
   (--fs-h2-tresc), nie tezy: karta jest wtorna wobec H2 sekcji.
   Selektor podwojny, bo .bz-oferta h2 z bloku U1 ma ten sam poziom. */
.bz-oferta .bz-form-glowa h2 {
  margin: 0 0 8px; font-size: var(--fs-h2-tresc); line-height: 1.2em;
}
.bz-oferta .bz-form-glowa p {
  margin: 0; font-size: 14.5px; line-height: 24px; color: var(--c-tekst-czytanie);
}
.bz-form-glowa { margin: 0 0 26px; padding: 0 0 22px 2px; border-bottom: 1px solid var(--c-linia); }
@media (max-width: 768px) { .bz-form-glowa { margin-bottom: 22px; padding-bottom: 18px; } }

/* ---------- (R6-5) /dziekuje/: potwierdzenie zamiast akapitu
   ZMIERZONE PRZED (2000px): cala strona = kolumna 640px wysrodkowana w oknie
   2000px (680px pustki z kazdej strony), docH 1709px, zero elementu, ktory
   potwierdza, ze cokolwiek sie stalo. Teraz pas potwierdzenia na pelna
   szerokosc: znak + H1 + trzy pary etykieta/wartosc. Znak jest dekoracja
   (aria-hidden), tresc niesie tekst statusu. */
.bz-potw {
  padding: 74px 40px 62px; background: var(--c-tlo-cieple);
  border-bottom: 1px solid var(--c-linia-ref);
}
.bz-potw-siatka { display: grid; grid-template-columns: 64px minmax(0, 1fr); column-gap: 28px; align-items: start; }
.bz-potw-znak { display: block; width: 64px; height: 64px; margin-top: 4px; }
.bz-potw-znak svg { display: block; width: 64px; height: 64px; }
.bz-potw-kolo { fill: #fff; stroke: var(--c-akcent-jasny); stroke-width: 2; }
.bz-potw-ptaszek {
  fill: none; stroke: var(--c-akcent-ciemny); stroke-width: 4;
  stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 40;
}
@media (prefers-reduced-motion: no-preference) {
  .bz-potw-ptaszek { animation: bz-ptaszek .5s cubic-bezier(.2, .7, .3, 1) .12s backwards; }
  @keyframes bz-ptaszek { from { stroke-dashoffset: 40; } to { stroke-dashoffset: 0; } }
}
.bz-potw h1 { margin: 0; font-size: var(--fs-h1-strony); line-height: 1.14em; max-width: 15ch; }
.bz-potw-status {
  margin: 30px 0 0; display: flex; flex-wrap: wrap; gap: 12px 56px;
  border-top: 1px solid var(--c-linia); padding-top: 20px;
}
.bz-potw-status dt {
  font-family: var(--font-naglowki); font-size: 11px; line-height: 1.6; font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase; color: var(--c-tekst-czytanie);
}
.bz-potw-status dd {
  margin: 2px 0 0; font-family: var(--font-naglowki);
  font-size: 16px; font-weight: 600; color: var(--c-naglowek);
}
@media (max-width: 1024px) { .bz-potw { padding: 52px 25px 46px; } }
@media (max-width: 680px) {
  .bz-potw-siatka { grid-template-columns: 52px minmax(0, 1fr); column-gap: 18px; }
  .bz-potw-znak, .bz-potw-znak svg { width: 52px; height: 52px; }
  .bz-potw h1 { max-width: none; }
  .bz-potw-status { gap: 14px 32px; }
}

/* ---------- (R6-6) /dziekuje/: trzy kroki jako os postepu ze stanem
   Te same trzy kroki co w sekcji "Jak wyglada wspolpraca" na home, wiec jada
   na tym samym komponencie .bz-kroki-poziom (spojnosc, nie kopia stylu).
   Roznica jest merytoryczna: tutaj to nie opis wspolpracy, tylko odpowiedz
   "na ktorym kroku jestes", wiec krok pierwszy dostaje znacznik stanu, a dwa
   pozostale sa wyciszone. ZMIERZONE PRZED: kroki byly pionowa lista 640px
   z numeracja 01-03, a bezposrednio pod nimi stala DRUGA numeracja 01-02
   (pytania) w tej samej terakocie i w tym samym stopniu, czyli dwa rozne
   systemy numeracji jeden pod drugim. Pytania sa teraz w osobnej karcie. */
.bz-etapy { padding: 66px 40px 20px; background: #fff; }
.bz-etapy-tytul { margin: 0 0 34px; font-size: var(--fs-h2-tresc); line-height: 1.25em; }
.bz-kroki-stan li { padding-top: 56px; }
/* numer kroku nieaktywnego: --c-akcent (#b47759) = 3,65:1 na bieli, czyli AA dla
   duzego tekstu (30px/700). --c-akcent-jasny (#dcc6bb) dawal 1,7:1 i nie przechodzil,
   a numeracja niesie informacje o kolejnosci, wiec nie jest sama dekoracja.
   Rozroznienie stanu niesie roznica wagi: aktywny 6,0:1 vs nieaktywny 3,65:1. */
.bz-kroki-stan li:not(.jest-teraz)::before { color: var(--c-akcent); }
.bz-kroki-stan li:not(.jest-teraz) h3 { color: var(--c-tekst-czytanie); }
.bz-krok-stan {
  position: absolute; top: 4px; left: 44px;
  display: inline-flex; align-items: center; min-height: 22px; padding: 0 9px;
  background: var(--c-akcent-ciemny); color: #fff;
  font-family: var(--font-naglowki); font-size: 11px; font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase;
}
.bz-kroki-stan .jest-teraz h3 { color: var(--c-naglowek); }
@media (max-width: 1024px) { .bz-etapy { padding: 48px 25px 12px; } }
@media (max-width: 900px)  { .bz-kroki-stan li { padding-top: 52px; } }

/* ---------- (R6-7) /dziekuje/: karta z jedynym zadaniem
   ZMIERZONE PRZED: prosba "odpisz dwoma zdaniami" byla akapitem w ciagu
   tekstu, a jedyny przycisk na stronie (duzy, brazowy, 320px) prowadzil POZA
   serwis, na LinkedIn, czyli najmocniejszy element wizualny wypychal
   uzytkownika ze strony w momencie, w ktorym wlasnie zostawil dane.
   Teraz: zadanie w karcie na pierwszym planie, LinkedIn jako akcja wtorna
   (outline) obok cichego powrotu do serwisu. Karta trzyma OS TRESCI, nie jest
   wysrodkowana w oknie: cala reszta serwisu jest wyrownana do lewej. */
.bz-zadanie { padding: 24px 40px 90px; background: #fff; }
.bz-zadanie { padding-inline: max(40px, calc((100% - var(--szer-grid)) / 2)); }
.bz-zadanie-karta {
  max-width: 780px; padding: 34px 38px 36px;
  background: var(--c-tlo-cieple-2); border-left: 3px solid var(--c-akcent);
}
.bz-zadanie-etykieta {
  margin: 0 0 10px; font-family: var(--font-naglowki);
  font-size: 12px; line-height: 1.6; font-weight: 600;
  letter-spacing: .08em; text-transform: uppercase; color: var(--c-akcent-ciemny);
}
.bz-zadanie-karta h2 { margin: 0 0 12px; font-size: var(--fs-h2-tresc); line-height: 1.24em; }
.bz-zadanie-lead { margin: 0; font-size: 16px; line-height: 27px; color: var(--c-tekst-czytanie); }
.bz-zadanie-pytania { margin: 18px 0 0; list-style: none; counter-reset: bz-pyt; }
.bz-zadanie-pytania li {
  position: relative; counter-increment: bz-pyt; padding-left: 34px; margin: 12px 0;
  font-size: 16px; line-height: 27px; color: var(--c-naglowek);
}
.bz-zadanie-pytania li::before {
  content: counter(bz-pyt) '.'; position: absolute; left: 0; top: 0;
  font-family: var(--font-naglowki); font-size: 14px; font-weight: 600;
  line-height: 27px; color: var(--c-akcent);
}
.bz-zadanie-stopka {
  margin-top: 28px; padding-top: 22px; border-top: 1px solid var(--c-linia);
  display: flex; flex-wrap: wrap; align-items: center; gap: 14px 26px;
}
.bz-zadanie-powrot {
  display: inline-flex; align-items: center; min-height: 44px;
  font-size: 14px; color: var(--c-tekst-czytanie);
  border-bottom: 1px solid var(--c-linia);
}
.bz-zadanie-powrot:hover { color: var(--c-naglowek); border-color: currentColor; }
@media (max-width: 1024px) { .bz-zadanie { padding: 16px 25px 70px; } }
@media (max-width: 680px) {
  .bz-zadanie-karta { padding: 26px 22px 28px; }
  .bz-zadanie-stopka { gap: 6px 20px; }
  .bz-zadanie-stopka .bz-btn { width: 100%; text-align: center; justify-content: center; }
}

/* ---------- (R6-8) SZABLON DOKUMENTU dla stron formalnych
   /mapa-strony/ i /polityka-prywatnosci/ nie mialy zadnego szablonu: goly
   tekst w kolumnie 760px wysrodkowanej w oknie 2000px. Ta sama gramatyka co
   rail podstron uslug (.bz-art-siatka): kolumna czytelnicza + przyklejony
   pasek boczny, ta sama rynna, te same hairline'y. Na telefonie pasek idzie
   NAD tresc (order:-1): spis tresci przed dokumentem prawnym jest jedyna
   nawigacja, jaka ma tam uzytkownik, bo przycisk "do gory" jest na mobile
   wylaczony (K5). Sticky ma limit wysokosci i wlasny scroll, wiec dlugi spis
   nie moze zostac przyciety przez niski ekran laptopa. */
.bz-dok { padding: 66px 40px 90px; }
/* geometria 1:1 z (R2): nadwyzke szerokosci zjada kolumna paska, nie rynna,
   wiec obie krawedzie siedza na osi siatki, a rynna zostaje stala.
   Pasek dostaje bezowa plyte, dokladnie jak .bz-art-sidebar na podstronach
   uslug: szeroka kolumna ma sie czytac jak karta nawigacyjna, nie jak
   rozciagnieta lista. */
.bz-dok-siatka {
  max-width: var(--szer-grid); margin: 0 auto;
  display: grid; grid-template-columns: minmax(0, var(--szer-czytanie)) minmax(300px, 1fr);
  column-gap: 72px; align-items: start;
}
@media (min-width: 1025px) {
  .bz-dok-rail { background: var(--c-tlo-cieple); padding: 28px 26px 32px; }
  .bz-dok-spis a { border-bottom-color: var(--c-linia-ref); }
  .bz-dok-akcja-btn { background: #fff; }
}
/* od 1400px kolumna paska ma ok. 470px, czyli miejsce na dwie kolumny pozycji:
   spis polityki schodzi z 9 wierszy do 5 i caly sticky panel miesci sie
   w ekranie laptopa (ta sama sztuczka co w railu uslug od 1400px) */
@media (min-width: 1400px) {
  /* dwie kolumny tylko wtedy, gdy spis ma sens dzielic: od 7 pozycji w gore.
     Bez tego warunku trzypozycyjny spis /mapa-strony/ lamal sie na 2+1,
     czyli wygladal na przypadkowy. :has() zamiast klasy-modyfikatora, zeby
     regula opisywala warunek, a nie strone. */
  .bz-dok-spis ol:has(li:nth-child(7)) {
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 26px;
  }
}
.bz-dok-sekcja { scroll-margin-top: 90px; }
.bz-dok-sekcja + .bz-dok-sekcja { margin-top: 46px; padding-top: 40px; border-top: 1px solid #ebebeb; }
.bz-czytanie .bz-dok-sekcja > h2 { margin-top: 0; }
.bz-dok-sekcja:target > h2 { color: var(--c-akcent-ciemny); }
.bz-dok-rail { position: sticky; top: 30px; }
.bz-dok-rail-inner { max-height: calc(100vh - 60px); overflow-y: auto; }
.bz-dok-spis ol { list-style: none; counter-reset: bz-spis; margin: 0; }
.bz-dok-spis li { counter-increment: bz-spis; }
.bz-dok-spis a {
  display: flex; gap: 12px; align-items: baseline;
  min-height: 44px; padding: 9px 0;
  border-bottom: 1px solid #ebebeb;
  font-family: var(--font-naglowki); font-size: 14px; line-height: 1.4; font-weight: 600;
  color: var(--c-naglowek);
}
.bz-dok-spis a::before {
  content: counter(bz-spis, decimal-leading-zero); flex: none;
  font-size: 12px; font-weight: 600; color: var(--c-akcent);
}
.bz-dok-spis a:hover { color: var(--c-akcent-ciemny); }
/* ostatnia pozycja spisu bez linii: pod nia stoi juz terakotowa linia bloku
   akcji, wiec inaczej widac dwie kreski kilkanascie px od siebie */
.bz-dok-spis li:last-child a { border-bottom: 0; }
.bz-dok-akcja { margin-top: 32px; padding-top: 26px; border-top: 2px solid var(--c-akcent); }
.bz-dok-akcja-tytul {
  margin: 0 0 14px; font-family: var(--font-naglowki);
  font-size: 16px; line-height: 1.35; font-weight: 600; color: var(--c-naglowek);
}
.bz-dok-akcja .bz-btn { display: inline-flex; align-items: center; justify-content: center; }
.bz-dok-akcja-btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 44px; padding: 12px 22px;
  background: transparent; border: 1px solid var(--c-granat); border-radius: 5em;
  font-family: var(--font-naglowki); font-size: 13px; font-weight: 600; color: var(--c-granat);
  transition: background-color .2s ease;
}
.bz-dok-akcja-btn:hover { background: rgba(41, 52, 120, .06); }
.bz-dok-akcja-tel { margin: 14px 0 0; font-size: 13.5px; line-height: 1.5; color: var(--c-tekst-czytanie); }
/* cel dotykowy: link inline mial 103x20 (ZMIERZONE), prog to 24px,
   na telefonie 44px, tak samo jak reszta linkow tekstowych w serwisie */
.bz-dok-akcja-tel a {
  display: inline-flex; align-items: center; min-height: 24px;
  color: var(--c-akcent-ciemny); border-bottom: 1px solid var(--c-linia);
}
.bz-dok-akcja-tel a:hover { border-color: currentColor; }
@media (max-width: 768px) { .bz-dok-akcja-tel a { min-height: 44px; } }
@media (max-width: 1024px) {
  .bz-dok { padding: 46px 25px 70px; }
  .bz-dok-siatka { grid-template-columns: 1fr; row-gap: 0; }
  /* Pasek domyslnie POD trescia, dokladnie jak .bz-art-sidebar na podstronach
     uslug: blok akcji czyta sie wtedy jako domkniecie strony.
     Wyjatek: dokument z dlugim spisem (od 7 pozycji, ten sam warunek co przy
     dwoch kolumnach) hoistuje sie NAD tresc, bo tam spis jest jedyna nawigacja,
     jaka uzytkownik ma pod reka (przycisk "do gory" jest na mobile wylaczony,
     patrz K5). ZMIERZONE (810px): bez tego warunku trzypozycyjny spis
     /mapa-strony/ wypychal CTA "Napisz do mnie" NAD wlasciwa mape strony. */
  .bz-dok-rail { position: static; margin: 40px 0 0; padding: 22px 24px 24px; background: var(--c-tlo-cieple); }
  .bz-dok-rail:has(.bz-dok-spis li:nth-child(7)) { order: -1; margin: 0 0 40px; }
  .bz-dok-rail-inner { max-height: none; overflow: visible; }
  .bz-dok-spis a { border-bottom-color: var(--c-linia); }
}

/* ---------- (R6-9) /mapa-strony/: trzy nazwane grupy zamiast jednej wcinanej listy
   ZMIERZONE PRZED (2000px): 17 linkow o identycznej wadze w jednej liscie,
   z czego 10 to wciete dzieci pozycji "Consulting"; mapa czytala sie jak zrzut
   z wtyczki. Obszary konsultingu dostaja te same literowe ikony 40x40, ktorych
   serwis uzywa w railu na podstronach uslug, wiec siatka jest rozpoznawalna,
   a nie wymyslona od zera. Kazdy cel co najmniej 44px wysokosci. */
.bz-czytanie .bz-mapa-lista { margin: 0; }
.bz-czytanie .bz-mapa-lista li { padding-left: 0; margin: 0; }
.bz-czytanie .bz-mapa-lista li::before { content: none; }
.bz-czytanie .bz-mapa-lista a {
  display: flex; align-items: center; min-height: 52px; padding: 4px 0;
  border-bottom: 1px solid #ebebeb;
  font-family: var(--font-naglowki); font-size: 15px; font-weight: 600;
  color: var(--c-naglowek);
}
.bz-czytanie .bz-mapa-lista a:hover { color: var(--c-akcent-ciemny); }
.bz-czytanie .bz-mapa-lista a[aria-current="page"] { color: var(--c-akcent-ciemny); box-shadow: inset 2px 0 0 var(--c-akcent); padding-left: 14px; }
.bz-czytanie .bz-mapa-obszary {
  margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 0 34px;
}
.bz-czytanie .bz-mapa-obszary li { padding-left: 0; margin: 0; }
.bz-czytanie .bz-mapa-obszary li::before { content: none; }
.bz-czytanie .bz-mapa-obszary a {
  display: flex; align-items: center; gap: 16px; min-height: 56px; padding: 4px 0;
  border-bottom: 1px solid #ebebeb;
  font-family: var(--font-naglowki); font-size: 14px; font-weight: 600;
  color: var(--c-naglowek);
}
.bz-czytanie .bz-mapa-obszary img { flex: none; display: block; width: 40px; height: 40px; }
.bz-czytanie .bz-mapa-obszary a:hover { color: var(--c-akcent-ciemny); }
/* ostatni wiersz listy bez linii: pod nia stoi juz separator sekcji
   (.bz-dok-sekcja + .bz-dok-sekcja), wiec bez tego widac dwie rownolegle
   kreski 40px od siebie. W siatce dwukolumnowej ostatni wiersz to dwie
   ostatnie pozycje, w jednokolumnowej tylko jedna. */
.bz-czytanie .bz-mapa-lista li:last-child a,
.bz-czytanie .bz-mapa-obszary li:nth-last-child(-n+2) a { border-bottom: 0; }
@media (max-width: 680px) {
  .bz-czytanie .bz-mapa-obszary { grid-template-columns: 1fr; }
  .bz-czytanie .bz-mapa-obszary li:nth-last-child(2) a { border-bottom: 1px solid #ebebeb; }
}

/* ---------- (R6-10) /polityka-prywatnosci/: znacznik "Sugerowany tekst"
   przestaje byc najmocniejszym elementem akapitu
   ZMIERZONE PRZED: siedem z dziewieciu sekcji zaczyna sie od pogrubionego
   "Sugerowany tekst:" w kolorze naglowka, czyli oko lapie najpierw etykiete
   szablonu WordPressa, a dopiero potem tresc. Slowa BEZ ZMIAN (to dokument
   prawny, redakcja nie nalezy do designu), zmieniona sama waga typograficzna:
   z grubego inka na cichy marker. Kontrast dalej AA (--c-tekst-czytanie
   = 7,0:1 na bieli). Do decyzji Rafala: te frazy to boilerplate z kreatora
   WordPressa i docelowo powinny zniknac razem z akapitami o komentarzach
   i logowaniu{
  font-weight: 400; font-size: 13px; letter-spacing: .02em;
  color: var(--c-tekst-czytanie);
}

/* ---------- (R6-11) ostatni cel ponizej progu na /kontakt/
   ZMIERZONE (2000px): link "Poznaj moj sposob myslenia na LinkedIn" w stopce
   formularza mial 245x19, przy progu 24px. Element z poprzedniej rundy,
   wychodzi przy okazji tej grupy stron. Na telefonie prog 44px, tak jak
   reszta linkow tekstowych w serwisie. */
.bz-form-linkedin a { display: inline-flex; align-items: center; min-height: 24px; }
@media (max-width: 768px) { .bz-form-linkedin a { min-height: 44px; } }

/* ============================================================
   FORMULARZ: IKONY PO DODANIU WIDOCZNYCH ETYKIET (2026-08-18)
   Ikony byly pozycjonowane od GORY bloku .bz-cf-pole. Kiedy nad
   polem stanela widoczna etykieta (+31px: 25px tekstu + 6px odstepu),
   ikony zostaly w strefie etykiety zamiast w polu (widac na zrzucie Rafala).
   Kotwiczymy je od DOLU: pole ma stala wysokosc, wiec ikona trafia w srodek
   niezaleznie od tego, czy etykieta zlamie sie na dwie linie (mobile).
   Wartosci "bottom" = dokladnie te same odstepy co pierwotne "top"
   (pole 57px: 57 - 21 - 15 = 21 itd.), wiec centrowanie zostaje 1:1.
   ============================================================ */
.bz-form .bz-cf-imie::before     { top: auto; bottom: 16px; }
.bz-form .bz-cf-email::before    { top: auto; bottom: 16px; }
.bz-form .bz-cf-firma::before    { top: auto; bottom: 16px; }
.bz-form .bz-cf-przychod::before { top: auto; bottom: 19px; }
.bz-form .bz-cf-sytuacja::before { top: auto; bottom: 20px; }
/* wiadomosc: textarea 197px, ikona ma zostac przy GORNEJ krawedzi pola */
.bz-form .bz-cf-wiadomosc::before { top: auto; bottom: 114px; }
/* pole przychodu ma pod soba mikrocopy, wiec kotwica od dolu musi je pominac */
.bz-form .bz-cf-przychod { padding-bottom: 0; }
.bz-form .bz-cf-przychod::before { bottom: auto; top: calc(100% - 60px); }
/* zrodlo liczb efektow (2026-08-18, potwierdzone przez Rafala) */
.bz-efekty-zrodlo { margin: -6px 0 22px; font-size: 13.5px; line-height: 1.5; color: var(--c-tekst-czytanie); }

/* ============================================================
   (K1) RUNDA KARIERA 2026-08-18 (Architekt), PODSTRONA /o-mnie/
   Strona ma jedno zadanie: przekonac wlasciciela firmy, ze po drugiej
   stronie stolu siedzi ktos, kto te role naprawde pelnil. Najmocniejszym
   dowodem jest CIAGLOSC W CZASIE, a wlasnie czasu na tej stronie nie bylo
   w ogole: piec pozycji, zero dat, numeracja 01-05 czytana jak ranking.
   ZMIERZONE PRZED (2000px): strona 4659px, sekcja .bz-droga 925px, w niej
   lewa kolumna 300px pusta na 850px wysokosci (sam sticky tytul 2 wiersze),
   pas tytulowy 509px z akapitem konczacym sie na y=406 i pustym bezem
   ponizej portretu. Osiem rol widocznych na LinkedIn mialo reprezentacje
   pieciu, w tym zadnej trwajacej dzis.
   PO: dwa nazwane tory w jednej sekcji (role z datami + praktyka doradcza
   bez dat, bo LinkedIn ich nie podaje), daty jako wlasna kolumna typograficzna,
   lewa rynna sekcji zagospodarowana nota orientujaca, a pas tytulowy domkniety
   pasem trzech pol.
   Zero nowych kolorow (wylacznie tokeny :root), zero nowych stopni pisma poza
   --fs-* i clampami spojnymi z reszta serwisu, zero zmian w pomiarze i w SEO.
   ============================================================ */

/* ---------- (K1a) pas tytulowy: H1 jako zdanie + trzy pola ----------
   H1 przestal byc etykieta ("O mnie", 42px, dwa slowa na 844px kolumnie)
   i jest teraz zdaniem, wiec dostaje plynny stopien z wlasnym zakresem:
   przy 2000px 46px, przy 390px 30px. Fraza "O mnie" zostaje na poczatku,
   wiec strona nie traci swojego glownego wyrazenia. */
.bz-pas-osoba h1 {
  font-size: clamp(30px, 1.35rem + 1.10vw, 46px);
  line-height: 1.14em;
  max-width: 20ch;
}
.bz-pas-osoba .bz-pas-lead { max-width: 62ch; }

/* Trzy pola w tym samym rytmie co lista wartosci nizej (hairline u gory,
   Montserrat, oddech 16px), zeby pas tytulowy i sekcja wartosci czytaly sie
   jako jeden system. Etykieta jest cichym markerem{
  list-style: none; margin: 40px 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 40px;
}
/* Od 1025px pas wraca pod lead w lewej kolumnie (grid-row 2), a portret rozpina
   sie na obie linie, wiec zachowuje pelna wysokosc i swoj zwis w biala sekcje. */
@media (min-width: 1025px) {
  /* row-gap 0: odstep pasa od leadu robi jego wlasny margines 40px, a nie
     odziedziczony gap 56px (razem dawalo 96px dziury pod akapitem) */
  .bz-pas-osoba .bz-kontener { row-gap: 0; }
  .bz-pas-osoba .bz-osoba-tekst { grid-column: 1; grid-row: 1; }
  .bz-pas-osoba .bz-osoba-fakty { grid-column: 1; grid-row: 2; }
  .bz-pas-osoba .bz-osoba-foto { grid-column: 2; grid-row: 1 / span 2; }
}

/* ---------- (K1b) sekcja kariery: lewa rynna przestaje byc pusta ----------
   Tytul sam nie wypelnial 300px kolumny przez 850px scrolla. Teraz jedzie
   z czytelnikiem razem z nota, ktora mowi, CO wlasciwie oglada (dwa tory)
   i skad sa ramy czasowe. Nota jest jedynym miejscem z liczba "17 lat"
   w tej sekcji, wiec staz nie jest nigdzie wyliczany z osi. */
.bz-droga2 .bz-droga-nota {
  margin: 18px 0 0; max-width: 34ch;
  font-size: 15px; line-height: 26px; color: var(--c-tekst-czytanie);
}
@media (min-width: 1025px) {
  .bz-droga2 .bz-kontener { grid-template-columns: minmax(0, 320px) minmax(0, 1fr); gap: 0 70px; }
  .bz-droga2 .bz-droga-glowa { position: sticky; top: 40px; align-self: start; }
  .bz-droga2 .bz-droga-tytul { position: static; }
}

/* ---------- (K1c) dwa tory, oba nazwane ----------
   Tor bez naglowka to lista; tor z naglowkiem i podpisem to rozdzial.
   Podpis niesie regule ("od najnowszej", "od 2019, rownolegle"), wiec
   czytelnik wie, czemu w drugim torze nie ma dat, i nie czyta tego jako braku. */
.bz-droga-tory { display: block; }
.bz-droga-grupa + .bz-droga-grupa { margin-top: 64px; }
.bz-droga-grupa-glowa { padding-top: 16px; border-top: 2px solid var(--c-naglowek); }
.bz-droga-grupa-h {
  margin: 0; font-family: var(--font-naglowki);
  font-size: 20px; line-height: 1.3; font-weight: 600; color: var(--c-naglowek);
}
.bz-droga-grupa-o {
  margin: 4px 0 0; font-family: var(--font-naglowki);
  font-size: 12px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
  line-height: 1.5; color: var(--c-akcent-ciemny);
}

/* ---------- (K1d) wiersz roli: data jest kolumna, nie dopiskiem ----------
   Rynna 108px trzyma najdluzsza etykiete ("wrz 2016" = 62px przy 13px/.06em)
   z zapasem na znacznik. Przez osiem wierszy powstaje ciagla kolumna dat,
   czyli dokladnie ten dowod, ktorego strona wczesniej nie pokazywala.
   font-variant-numeric: tabular-nums, wiec cyfry stoja w pionie w jednej osi. */
.bz-droga2 .bz-droga-lista { margin: 30px 0 0; }
.bz-droga2 .bz-droga-krok { grid-template-columns: 108px minmax(0, 1fr); gap: 0 30px; padding-bottom: 40px; }
.bz-droga2 .bz-droga-krok::before { left: 5px; top: 26px; }
/* rola stoi miedzy nazwa firmy a opisem: to jedyna informacja, ktorej
   kupujacy szuka najszybciej ("kim tam byl"), a wczesniej trzeba ja bylo
   wylowic ze srodka akapitu albo jej nie bylo wcale */
.bz-droga-rola {
  margin: 7px 0 0; max-width: 660px;
  font-family: var(--font-naglowki); font-size: 13.5px; font-weight: 600;
  line-height: 1.5; color: var(--c-akcent-ciemny); /* 5,7:1 na bieli */
}
.bz-droga-rola + p { margin-top: 9px; }

/* ---------- (K1e) praktyka doradcza: karty z logotypami ----------
   Drugi tor musi wygladac inaczej niz pierwszy, bo to inny rodzaj dowodu
   (nie chronologia, tylko zbior). Karty na bezu z tokenu, logotypy z tego
   samego zestawu 480x160, ktory serwis juz ma, wiec nie wchodzi nowy zasob.
   Bez dat, bo LinkedIn ich nie podaje. */
.bz-praktyka-wstep { margin: 26px 0 0; max-width: 660px; color: var(--c-tekst-czytanie); }
.bz-praktyka-siatka {
  list-style: none; margin: 24px 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px;
}
.bz-praktyka-karta {
  display: flex; flex-direction: column; align-items: flex-start;
  padding: 22px 22px 20px; background: var(--c-tlo-cieple);
  border-bottom: 2px solid var(--c-linia);
}
/* ZMIERZONE: zestaw logotypow NIE ma jednej proporcji. autotesto/hammer/fly-pl
   to plotna 480x160 (3:1), a inpost-pay to 365x365 (1:1), wiec podanie samej
   szerokosci dawalo znak 108x108 obok trzech znakow 108x36. Slot ma wiec stala
   BANDE 132x44 i kazdy znak wpisuje sie w nia przez max-width/max-height:
   3:1 wypelnia szerokosc, 1:1 wypelnia wysokosc, dolna krawedz wspolna. */
.bz-praktyka-logo {
  display: flex; align-items: center; justify-content: flex-start;
  width: 132px; height: 44px; margin-bottom: 16px;
}
/* ZMIERZONE: inpost-pay.png (dodany pozniej niz reszta zestawu) ma NIEPRZEZROCZYSTE
   biale tlo, wiec na bezowej karcie rysowal sie bialy kwadrat, ktorego trzy pozostale
   znaki nie maja. mix-blend-mode: multiply gasi biel do koloru karty i nie rusza
   znakow z alfa. Zero zmian w plikach i zero nowego koloru.
   Docelowo do poprawki w SAMYM PLIKU (tak jak zrobiono z theshire.png). */
.bz-praktyka-logo img {
  display: block; width: auto; height: auto; max-width: 100%; max-height: 100%;
  object-fit: contain; mix-blend-mode: multiply;
}
.bz-praktyka-nazwa {
  font-family: var(--font-naglowki); font-size: 16px; font-weight: 600;
  line-height: 1.35; color: var(--c-naglowek);
}
.bz-praktyka-rola {
  margin-top: 4px; font-family: var(--font-naglowki); font-size: 12px; font-weight: 600;
  letter-spacing: .06em; line-height: 1.5; color: var(--c-akcent-ciemny);
}
.bz-praktyka-stopka { margin: 20px 0 0; font-size: 14px; line-height: 1.6; color: var(--c-tekst-czytanie); }
.bz-praktyka-stopka a {
  color: var(--c-akcent-ciemny); text-decoration: underline; text-underline-offset: 3px;
  display: inline-block; min-height: 24px;
}
.bz-praktyka-stopka a:hover { color: var(--c-naglowek); }
/* prog dotykowy jak w reszcie serwisu (R6-11): 24px na myszy, 44px na telefonie */
@media (max-width: 768px) { .bz-praktyka-stopka a { min-height: 44px; } }

/* ---------- (K1f) tablet ---------- */
@media (max-width: 1024px) {
  .bz-osoba-fakty { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 26px; margin-top: 34px; }
  /* bez tego akapit noty konczyl sie 8px nad kreska naglowka pierwszego toru */
  .bz-droga2 .bz-droga-glowa { margin-bottom: 38px; }
  .bz-droga2 .bz-droga-nota { max-width: 62ch; }
  .bz-droga2 .bz-droga-lista { margin-top: 26px; }
  .bz-droga2 .bz-droga-krok { grid-template-columns: 104px minmax(0, 1fr); gap: 0 22px; }
  .bz-droga-grupa + .bz-droga-grupa { margin-top: 52px; }
  .bz-praktyka-siatka { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---------- (K1g) telefon 390px ----------
   ZMIERZONE: rynna dat obok tresci zostawiala kolumnie opisu 244px przy 350px
   siatki (92px rynny + 14px odstepu), czyli okolo 30 znakow w wierszu. Za waska
   na czytanie. Dlatego na telefonie data przestaje byc kolumna i staje sie
   NADPISEM wiersza: "lip 2025 · obecnie" nad nazwa firmy, znacznik zostaje na
   szynie po lewej, a tresc odzyskuje pelne 324px (okolo 45 znakow).
   Separatorem jest kropka srodkowa, nie myslnik. */
@media (max-width: 680px) {
  .bz-droga2 .bz-droga-krok { display: block; padding: 0 0 30px 26px; }
  .bz-droga2 .bz-droga-krok::before { left: 4px; top: 22px; }
  /* branza schodzi do wlasnego wiersza ZAWSZE. Przy zawijaniu flexem krotkie
     nazwy (CCC S.A., GetResponse) zostawialy ja obok, a dlugie spychaly nizej,
     wiec przez osiem wierszy etykieta skakala raz w prawo, raz pod nazwe. */
  .bz-droga-h { display: block; max-width: none; }
  .bz-droga-branza { display: block; margin-top: 3px; }
  .bz-droga-rola, .bz-droga-tresc p { max-width: none; }
  .bz-droga-grupa + .bz-droga-grupa { margin-top: 44px; }
  .bz-droga2 .bz-droga-lista { margin-top: 22px; }
  .bz-praktyka-siatka { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .bz-praktyka-karta { padding: 16px 14px 14px; }
  .bz-praktyka-logo { width: 96px; height: 32px; margin-bottom: 12px; }
  .bz-praktyka-nazwa { font-size: 15px; }
}

/* ============================================================
   RUNDA 7 (2026-08-18, Architekt) - grupa stron
   /kontakt/, /dziekuje/, /mapa-strony/, /polityka-prywatnosci/
   Runda weryfikacyjna po R6: pomiar na 2000 / 1440 / 810 / 390,
   poprawiane sa tylko rzeczy, ktore pomiar pokazal jako puste
   albo niespojne. Nowe reguly dopisane na koncu arkusza, zadna
   regula globalna (:root, body, .bz-kontener, .bz-btn) nie jest
   ruszona. Kazda pozycja ma pomiar PRZED.
   ============================================================ */

/* ---------- (R7-1) /kontakt/: blok konwersji przestaje miec dziure nad teza
   ZMIERZONE PRZED (2000px): .bz-oferta-tresc y=836 przy .bz-oferta-form y=590,
   czyli H2 sekcji ("Druga opinia o Twoim marketingu") startowal 246px NIZEJ niz
   naglowek karty formularza, a nad nim stal pusty prostokat 615x246 bezu.
   R6-2 wyrownalo kolumny do srodka, zeby rozlozyc pustke symetrycznie, ale to
   przenosi polowe pustki NAD teze sekcji, gdzie czyta sie jak blad ladowania,
   i odwraca hierarchie: karta (element wtorny) zaczyna sie wyzej niz H2 bloku.
   R7 leczy przyczyne, nie objaw: lewa kolumna dostaje drugi dowod (R7-2), wiec
   jest realnie dluzsza, i moze wrocic do startu rownego z karta. Dodatkowo
   siatka przestaje byc 1:1 na rzecz przewagi karty (formularz to zadanie tej
   strony, tekst tylko go uzasadnia). Scope: .bz-oferta-kontakt. */
@media (min-width: 1025px) {
  .bz-oferta-kontakt .bz-oferta-siatka {
    align-items: start;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.12fr);
  }
}

/* ---------- (R7-2) /kontakt/: dowod jako grupa dwoch glosow
   ZMIERZONE PRZED: jedna rekomendacja, 212px w kolumnie 1067px.
   Dwa cytaty stoja na wspolnej lewej linii (ta sama hairline co .bz-cytat),
   jeden podpis grupy u gory i JEDEN link do LinkedIna na dole, zeby nie
   powtarzac tego samego wezwania dwa razy obok siebie. */
.bz-dowod-grupa { margin-top: 34px; }
.bz-dowod-tytul {
  margin: 0 0 18px; font-family: var(--font-naglowki);
  font-size: 12px; line-height: 1.6; font-weight: 600;
  letter-spacing: .08em; text-transform: uppercase; color: var(--c-naglowek);
}
.bz-dowod-grupa .bz-cytat { margin: 0; }
.bz-dowod-grupa .bz-cytat + .bz-cytat { margin-top: 24px; padding-top: 24px; }
/* drugi cytat dostaje wlasna gorna hairline TYLKO na odcinku tekstu, zeby
   dwa glosy czytaly sie jako lista, a nie jako jeden dlugi akapit */
.bz-dowod-grupa .bz-cytat + .bz-cytat { border-top: 1px solid var(--c-linia); }
.bz-dowod-grupa > .bz-cytat-link { margin-top: 20px; }
@media (max-width: 768px) {
  .bz-dowod-grupa { margin-top: 0; }
  .bz-dowod-grupa .bz-cytat blockquote p { font-size: 16px; line-height: 26px; }
}

/* ---------- (R7-3) /dziekuje/: karta zadania przestaje plywac w polowie wiersza
   ZMIERZONE PRZED (2000px): .bz-zadanie-karta 780x360 na siatce 1300px, czyli
   520px bialego pola po prawej stronie jedynego zadania na tej stronie. Karta
   trzymala os tresci (dobrze), ale konczyla strone polpustym wierszem.
   Karta obejmuje teraz cala siatke, a dwa pytania stoja obok siebie: panel
   domyka strone zamiast wisiec przy lewej krawedzi. Miara tekstu pilnowana
   osobno (max-width na leadzie), zeby szeroka karta nie dala dlugich wierszy. */
@media (min-width: 1100px) {
  .bz-zadanie-karta { max-width: none; padding: 40px 46px 42px; }
  .bz-zadanie-karta h2, .bz-zadanie-lead { max-width: 62ch; }
  .bz-zadanie-pytania {
    margin-top: 22px; display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 48px;
  }
  .bz-zadanie-pytania li { margin: 0; }
}

/* ============================================================
   PODSTRONY USLUG /consulting/*: ARTYKUL EKSPERTA (2026-08-18, Architekt)
   Dotyczy WYLACZNIE dziesieciu podstron uslug. Reszta serwisu bez zmian:
   wszystkie reguly sa albo pod nowymi klasami .bz-pas-usluga-* /
   .bz-art-spis / .bz-art-wyszczegol / .bz-art-teza, albo scalone
   selektorem `body:has(.bz-art-tresc)`. Zero zmian w :root, body,
   .bz-kontener i .bz-btn.

   ZMIERZONE PRZED (2000px, strategy):
   - dokument 4665px, wejscie w tresc dopiero na y=1034 (pas tytulowy 332px
     + plakat 460px + marginesy), a pierwsze 1000px scrolla to dwa slabby
     jeden pod drugim: bezowy pas z dekoracyjnym monogramem 224x224 po prawej
     i osobny pas zdjecia,
   - .bz-art-tresc 640x1997 obok .bz-art-sidebar 588x1997, ale tresc raila
     miala 694px wysokosci, wiec przez ~1300px scrolla prawa polowa ukladu
     byla bezowa plama bez zawartosci,
   - artykul: jeden h2 i osiem akapitow bez ani jednego srodtytulu.
   ZMIERZONE PRZED (390px):
   - .bz-art-sidebar 340x702 (lista 10 uslug) tuz nad .bz-uslugi-inne
     390x1014 (kafle tych samych 9 uslug): 1,7 tys. px tej samej nawigacji
     dwa razy pod rzad, miedzy koncem artykulu a wezwaniem.

   DECYZJA: ZMIENNA MIARA. Proza zostaje waska (--szer-czytanie), a dwa
   elementy, ktore realnie sprzedaja (teza i lista "wspolpraca ze mna
   pozwoli Ci"), wychodza na pelna szerokosc toru artykulu i dostaja wlasna
   forme. Rail chudnie z 588 do 340px, a odzyskana szerokosc idzie do toru
   artykulu, wiec H1, lead i pierwszy akapit stoja na
   jednej osi. */
@media (min-width: 1025px) {
  .bz-pas-usluga { padding-block: 62px 62px; }
  .bz-pas-usluga-siatka {
    display: grid;
    grid-template-columns: minmax(0, 1fr) clamp(360px, 43%, 560px);
    column-gap: clamp(48px, 7.7%, 100px);
    align-items: center;
  }
  .bz-pas-usluga-foto { margin: 0; }
  .bz-pas-usluga-foto img {
    display: block; width: 100%; max-width: none;
    height: clamp(280px, 20vw, 380px);
    object-fit: cover; object-position: 50% 30%;
  }
  /* H1 uslugi to jedno-dwa slowa; na duzym ekranie 42px gubilo sie obok
     panelu zdjecia 559x380, wiec kolumna tekstu dostaje wlasny stopien */
  .bz-pas-usluga h1 { font-size: 48px; letter-spacing: -.015em; }
}
@media (min-width: 1400px) { .bz-pas-usluga h1 { font-size: 54px; } }
@media (max-width: 1024px) {
  .bz-pas-usluga { padding-bottom: 0; }
  .bz-pas-usluga-foto { margin: 34px 0 0; }
  .bz-pas-usluga-foto img {
    display: block; width: 100%; max-width: none;
    height: clamp(200px, 40vw, 300px);
    object-fit: cover; object-position: 50% 30%;
  }
}
/* na telefonie zdjecie wychodzi na krawiedzie ekranu: pas tytulowy czyta sie
   jako jeden blok, a nie jako obrazek w ramce z bezu (.bz-pas-usluga ma
   overflow:hidden, wiec nie generuje poziomego scrolla) */
@media (max-width: 680px) { .bz-pas-usluga-foto { margin-inline: -25px; } }

/* ---------- (A2) TOR ARTYKULU I RAIL: 860 + 340 ZAMIAST 640 + 588
   Rail nie ma czym wypelnic 2 tys. px kolumny, wiec przestaje udawac, ze ma:
   chudnie do szerokosci panelu, plyta hugnie tresc (align-items: start),
   a odzyskane ~250px dostaje tor artykulu. Proza dalej ma --szer-czytanie,
   szerszy tor sluzy tylko blokom wyroznionym z (A4) i (A5). */
@media (min-width: 1025px) {
  .bz-art-siatka {
    grid-template-columns: minmax(0, 1fr) 260px;
    column-gap: 56px; justify-content: normal;
    /* align-items MUSI zostac `stretch`: przy `start` kolumna raila kurczy sie
       do wysokosci karty, wiec `position: sticky` na karcie nie ma po czym
       jechac (ZMIERZONE: karta odjezdzala na top = -1177px). Kolumna jest
       teraz pelnej wysokosci, ale PRZEZROCZYSTA, wiec nie robi sie z niej
       bezowy slab jak przed przebudowa: plyte ma tylko sama karta. */
    align-items: stretch;
  }
  .bz-art-sidebar { position: static; background: transparent; padding: 0; border-top: 0; margin-top: 0; }
  .bz-art-sidebar-inner { position: sticky; top: 32px; background: var(--c-tlo-cieple); padding: 26px 24px 28px; }
  .bz-art-tresc > * { max-width: var(--szer-czytanie); }
  .bz-art-tresc.bz-czytanie > blockquote,
  .bz-art-tresc.bz-czytanie > .bz-art-teza,
  .bz-art-tresc.bz-czytanie > .bz-art-wyszczegol { max-width: none; }
}
@media (min-width: 1400px) {
  .bz-art-siatka { grid-template-columns: minmax(0, 1fr) 340px; column-gap: 100px; }
  .bz-art-sidebar-inner { padding: 30px 30px 34px; }
}
/* panel ma ~610px wysokosci; na nizszym oknie sticky uciolby jego dol,
   wiec ponizej progu karta po prostu stoi na gorze kolumny */
@media (min-width: 1025px) and (max-height: 820px) {
  .bz-art-sidebar-inner { position: static; }
}

/* ---------- (A3) SRODTYTULY: RYTM ZAMIAST SCIANY
   Ta sama kreska akcentu co nad h2 i nad wezwaniem, o stopien mniejsza.
   Struktura jest teraz widoczna w skanie strony, nie tylko w czytaniu. */
.bz-art-tresc.bz-czytanie h3 {
  margin: 54px 0 14px; font-size: 21px; line-height: 1.28em;
  letter-spacing: -.008em; font-weight: 700; color: var(--c-naglowek);
}
.bz-art-tresc.bz-czytanie h3::before {
  content: ''; display: block; width: 34px; height: 2px;
  background: var(--c-akcent); margin: 0 0 18px;
}
.bz-art-tresc.bz-czytanie h3 + p { font-size: 17px; line-height: 29px; }
.bz-art-tresc.bz-czytanie h2,
.bz-art-tresc.bz-czytanie h3 { scroll-margin-top: 28px; }
/* (C5) daje ostatniemu akapitowi kreske domykajaca. Gdy ten akapit stoi TUZ
   pod srodtytulem (/optimization/, /leady-sprzedazowe/), wychodzily dwie
   kreski jedna nad druga: krotka kreska akcentu h3 i dluga kreska domkniecia.
   W tym ukladzie domkniecie ustepuje srodtytulowi. */
.bz-art-tresc.bz-czytanie h3 + p:last-child {
  margin-top: 0; padding-top: 0; border-top: 0;
}
@media (min-width: 1400px) {
  .bz-art-tresc.bz-czytanie h3 { font-size: 24px; }
  .bz-art-tresc.bz-czytanie h3 + p { font-size: 18.5px; line-height: 31px; }
}
@media (max-width: 480px) {
  .bz-art-tresc.bz-czytanie h3 { font-size: 19px; margin-top: 42px; }
  .bz-art-tresc.bz-czytanie h3 + p { font-size: 16.5px; line-height: 28px; }
}

/* ---------- (A4) TEZA: PLYTA NA PELNYM TORZE, TEKST W SWOJEJ MIERZE
   Plyta bierze cala szerokosc toru (do 860px na 2000), ale tekst zostaje
   w mierze ok. 50 znakow. Dzieki temu teza jest wyraznie inna niz akapit
   i nie robi sie z niej wiersz na 78 znakow. */
.bz-art-tresc.bz-czytanie blockquote { padding: 42px 56px 46px; }
.bz-art-tresc.bz-czytanie blockquote p { max-width: 760px; }
/* /consulting/optimization/ nie ma <blockquote> w tresci: role tezy przejmuje
   akapit, ktory juz tam byl ("Stworzmy strategie, dzieki ktorej efekty SEM
   zobaczysz nie tylko w wynikach wyszukiwania"). Zero nowej tresci, sama
   prezentacja, dokladnie jedna taka plyta na strone. */
.bz-art-tresc.bz-czytanie .bz-art-teza {
  margin: 44px 0; padding: 38px 44px 42px; background: var(--c-stopka);
  font-family: var(--font-naglowki); font-weight: 500; font-size: 20px;
  line-height: 32px; color: #fff;
}
.bz-art-tresc.bz-czytanie .bz-art-teza strong { font-weight: 500; color: #fff; }
.bz-art-tresc.bz-czytanie .bz-art-teza::before {
  content: ''; display: block; width: 40px; height: 2px;
  background: var(--c-akcent); margin: 0 0 20px;
}
@media (min-width: 1400px) {
  .bz-art-tresc.bz-czytanie .bz-art-teza { font-size: 22px; line-height: 35px; }
}
@media (max-width: 480px) {
  .bz-art-tresc.bz-czytanie blockquote,
  .bz-art-tresc.bz-czytanie .bz-art-teza { padding: 26px 22px 28px; }
  .bz-art-tresc.bz-czytanie .bz-art-teza { font-size: 18px; line-height: 29px; }
}

/* ---------- (A5) LISTA "CO DOSTAJESZ": ZESTAWIENIE, NIE CIAG DALSZY
   To jedyna lista na stronie, ktora jest oferta, wiec jako jedyna wychodzi
   na pelny tor i od 1400px idzie w dwie kolumny. Hairline'y sa teraz na
   pozycjach (a nie na calej liscie), wiec w dwoch kolumnach linie z obu
   stron stoja na tej samej wysokosci i blok czyta sie jak tabela. */
.bz-art-tresc.bz-czytanie .bz-art-wyszczegol { margin: 34px 0; border: 0; }
.bz-art-tresc.bz-czytanie .bz-art-wyszczegol li,
.bz-art-tresc.bz-czytanie .bz-art-wyszczegol li + li {
  /* padding-left 26px MUSI zostac w skrocie: bez niego znacznik ::before
     (kreska akcentu) laduje na pierwszej literze pozycji */
  border-top: 1px solid var(--c-linia-ref); padding: 13px 0 15px 26px;
}
.bz-art-tresc.bz-czytanie .bz-art-wyszczegol li::before { top: 26px; }
@media (min-width: 1400px) {
  .bz-art-tresc.bz-czytanie .bz-art-wyszczegol {
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 48px;
  }
}

/* ---------- (A6) RAIL: "GDZIE JESTES" + "CO ZROBIC"
   Panel ma teraz spis tresci (z podswietleniem czytanej sekcji), karte
   rozmowy i kompaktowy indeks obszarow. Blok ikon social wylecial: te same
   cztery linki sa w topbarze i w stopce kazdej strony. */
.bz-art-spis { margin: 0 0 24px; }
.bz-art-spis ol { list-style: none; margin: 10px 0 0; padding: 0; }
.bz-art-spis li { margin: 0; padding: 0; }
.bz-art-spis a {
  display: block; min-height: 24px; padding: 9px 0 9px 15px;
  border-left: 2px solid var(--c-linia-ref);
  font-family: var(--font-naglowki); font-size: 13.5px; line-height: 1.45;
  font-weight: 600; color: var(--c-tekst-czytanie);
  transition: color .2s ease-out, border-color .2s ease-out;
}
.bz-art-spis a:hover { color: var(--c-naglowek); border-left-color: var(--c-akcent); }
.bz-art-spis a.jest-teraz { color: var(--c-naglowek); border-left-color: var(--c-akcent); }
/* ZMIERZONE PO zwezeniu raila do 340px: karta CTA ma 280px, a przycisk
   "Umów rozmowę diagnostyczną" przy `white-space: nowrap` i paddingu 50px
   potrzebowal 277px SAMEJ tresci (scrollWidth 277 przy szerokosci 236),
   wiec napis wychodzil poza plamę przycisku. W railu przycisk moze sie lamac
   na dwa wiersze; reszta serwisu (sticky CTA, sekcja pod artykulem) bez zmian. */
.bz-art-cta .bz-btn-cta {
  white-space: normal; padding-inline: 20px; line-height: 1.35;
  min-height: 56px; display: flex; align-items: center; justify-content: center;
}
.bz-art-nav { margin-top: 26px; padding-top: 22px; border-top: 1px solid var(--c-linia-ref); }
.bz-art-nav a { gap: 0; min-height: 38px; font-size: 13.5px; }
@media (min-width: 1025px) { .bz-art-nav a { min-height: 38px; } }

/* ---------- (A7) 1024px I NIZEJ: SPIS NA GORZE, KONIEC Z PODWOJNA NAWIGACJA
   Rail przechodzi NAD artykul i zostaje z niego sam spis tresci w formie
   chipow (44px celu dotykowego). Indeks obszarow znika, bo 300px nizej stoi
   siatka kafli z dokladnie tymi samymi dziewiecioma linkami. */
@media (max-width: 1024px) {
  .bz-art-siatka { display: flex; flex-direction: column; align-items: stretch; }
  .bz-art-sidebar { order: -1; margin-top: 0; padding-top: 0; border-top: 0; }
  .bz-art-sidebar-inner { background: transparent; padding: 0; }
  .bz-art-nav { display: none; }
  .bz-art-spis { margin: 0 0 36px; }
  .bz-art-spis ol { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
  .bz-art-spis a {
    display: flex; align-items: center; min-height: 44px;
    padding: 8px 14px; border-left: 0; background: var(--c-tlo-cieple);
  }
  .bz-art-spis a.jest-teraz { background: var(--c-akcent-hover); color: var(--c-naglowek); }
}

/* ---------- (A8) KATALOG WYJSC: SIEROTA TAKZE PONIZEJ 1025px
   UWAGA na duplikat: blok (U9) wyzej JUZ wysrodkowuje niepelny rzad, ale
   tylko od 1025px (`display:flex` + `flex: 0 0 20%` + `max-width: 20%`).
   Ponizej 1025px siatka wraca do `grid`, wiec dziewiaty kafel zostawal sam
   przy lewej krawedzi (ZMIERZONE na 390: rzad 2 kolumny x 4 + jeden kafel
   dosuniety do lewej). Tu domykamy WYLACZNIE zakres <=1024px, zeby nie
   nadpisywac (U9) i nie wchodzic w kolizje z jego `max-width: 20%`
   (flex-basis 25% przy max-width 20% dawal dalej piec kolumn, nie cztery). */
@media (max-width: 1024px) {
  body:has(.bz-art-tresc) .bz-uslugi-inne-tor { display: flex; flex-wrap: wrap; justify-content: center; }
  body:has(.bz-art-tresc) .bz-uslugi-inne-tor .bz-usluga { flex: 0 0 33.333%; }
}
@media (max-width: 768px) { body:has(.bz-art-tresc) .bz-uslugi-inne-tor .bz-usluga { flex-basis: 50%; } }
@media (max-width: 359px) { body:has(.bz-art-tresc) .bz-uslugi-inne-tor .bz-usluga { flex-basis: 100%; } }

/* (K2) OFERTA NA SZEROKIM EKRANIE (2026-08-19, uwaga krytyka)
   .bz-oferta-siatka miala align-items:center, wiec krotsza lewa kolumna
   wisiala 259px PONIZEJ gornej krawedzi karty formularza: na 2000px czytalo
   sie to jako dziura nad naglowkiem. Wyrownanie do gory + naglowek startuje
   rowno z karta. Reszta bieli pod trescia to naturalny oddech sekcji. */
@media (min-width: 769px) {
  .bz-oferta-siatka { align-items: start; }
  .bz-oferta-tresc { padding-top: 8px; }
}

/* (K3) OS KARIERY BEZ DAT (2026-08-19, kolumna 108px) usunieta z HTML, wiec siatka
   kroku zwija sie do jednej kolumny; szyna i znaczniki zostaja. */
.bz-droga2 .bz-droga-krok { grid-template-columns: minmax(0, 1fr); }
@media (max-width: 1024px) { .bz-droga2 .bz-droga-krok { grid-template-columns: minmax(0, 1fr); } }

/* ============================================================
   (K4) DOMKNIECIE UWAG RAFALA (2026-08-20)
   1. Oferta na home: dziura nad naglowkiem. Sprawca: regula
      .bz-oferta[aria-label] .bz-oferta-siatka { align-items:center }
      (wyzsza specyficznosc niz (K2)). Lewa kolumna rozciaga sie teraz
      na wysokosc karty i ROZKLADA tresc: naglowek u gory, lista
      dla kogo / nie dla Ciebie jako panele, telefon na dole.
   2. Os kariery: po usunieciu rynny dat pionowa szyna przecinala
      tekst. Szyna i znaczniki znikaja, w ich miejsce wlosowe
      separatory miedzy pozycjami.
   ============================================================ */
.bz-oferta[aria-label="Rozmowa diagnostyczna"] .bz-oferta-siatka { align-items: stretch; }
@media (min-width: 1025px) {
  .bz-oferta[aria-label="Rozmowa diagnostyczna"] .bz-oferta-tresc {
    display: flex; flex-direction: column; padding-top: 8px;
  }
  .bz-oferta[aria-label="Rozmowa diagnostyczna"] .bz-oferta-lista { margin-top: 42px; }
  .bz-oferta[aria-label="Rozmowa diagnostyczna"] .bz-oferta-tel { margin-top: auto; padding-top: 34px; }
}
/* lista dla kogo / nie dla Ciebie jako panele z oddechem */
.bz-oferta-lista li { padding: 18px 0; border-top: 1px solid var(--c-linia); }
.bz-oferta-lista li:last-child { border-bottom: 1px solid var(--c-linia); }

/* os kariery bez szyny (przecinala tekst po zwinieciu rynny dat) */
.bz-droga2 .bz-droga-krok::before { display: none; }
.bz-droga2 .bz-droga-krok { padding-bottom: 34px; }
.bz-droga2 .bz-droga-krok + .bz-droga-krok { border-top: 1px solid var(--c-linia); padding-top: 34px; }
@media (max-width: 680px) {
  .bz-droga2 .bz-droga-krok { padding-left: 0; }
}

/* (K5) OS KARIERY: TRESC NA PELNA SZEROKOSC (2026-08-20, uwaga Rafala:
   "rozciagnij tekst na cala szerokosc danej pracy, a nie na kawalek
   i 1/4 zostaje pusta do linii"). Opisy i naglowki mialy max-width 660px
   z czasow rynny dat; kolumna ma 910px. Pas FIRMY/ROLE/DORADZTWO
   z pasa tytulowego usuniety z HTML (tresc jest nizej na osi). */
.bz-droga2 .bz-droga-h,
.bz-droga2 .bz-droga-tresc p { max-width: none; }

/* ============================================================
   (K6) POPRAWKI PO AUDYCIE SOLA (RAPORT-001, 2026-08-20)
   P1-03: trzy male numeracje 12-14px staly w --c-akcent (#b47759),
   kontrast 3,26-3,67:1 = fail AA dla zwyklego tekstu. Ciemniejszy
   token daje 5,35-6,01:1 (policzone niezaleznie, zgadza sie z Solem).
   ============================================================ */
.bz-kompetencje-lista li::before,
.bz-zadanie-pytania li::before,
.bz-dok-spis a::before { color: var(--c-akcent-ciemny); }

/* ============================================================
   (K7) LOGOTYPY: SZARE DOMYSLNIE, KOLOR BRANDU NA HOVER
   (2026-08-21, decyzja Rafala). Pliki PNG sa teraz KOLOROWE
   (6 marek z pozyskanym kolorem, reszta zostala mono), a szarosc
   robi CSS, wiec hover po prostu zdejmuje filtr. Dotyczy sekcji
   Projekty (home) i kart doradztwa (/o-mnie/).
   ============================================================ */
.bz-team-logo img, .bz-praktyka-logo img {
  filter: grayscale(1) opacity(.82);
  transition: filter .25s ease;
}
.bz-team-item:hover .bz-team-logo img,
.bz-team-item:focus-within .bz-team-logo img,
.bz-praktyka-karta:hover .bz-praktyka-logo img,
.bz-praktyka-karta:focus-within .bz-praktyka-logo img {
  filter: none;
}
@media (prefers-reduced-motion: reduce) {
  .bz-team-logo img, .bz-praktyka-logo img { transition: none; }
}

/* ============================================================
   (M1) MOBILE 2026-09-11
   Wspolna os tresci, skala pisma i zwarty rytm. Tylko do 680px.
   Wysokosci wynikaja z tresci: bez limitow, line-clamp i chowania tekstu.
   ============================================================ */
@media (max-width: 680px) {
  :root {
    --bz-bok-mobile: 20px;
    --bz-sekcja-mobile: 48px;
    --bz-h1-mobile: 30px;
    --bz-h2-mobile: 26px;
    --bz-h3-mobile: 19px;
    --bz-tekst-mobile: 15px;
    --bz-pomoc-mobile: 13px;
    --bz-kicker-mobile: 12px;
    --bz-interlinia-mobile: 1.5;
    --szer-grid: 100%;
  }

  /* Os jest na zewnetrznym kontenerze, bez sumowania dwoch rynien. */
  :is(.bz-jak, .bz-uslugi, .bz-projekty, .bz-referencje, .bz-oferta,
      .bz-pas-tytul, .bz-art, .bz-cta-artykul, .bz-uslugi-inne,
      .bz-droga, .bz-wart, .bz-karty, .bz-potw, .bz-dok, .bz-loga-pas,
      .bz-hub-grupa, .bz-etapy, .bz-zadanie) {
    padding: var(--bz-sekcja-mobile) var(--bz-bok-mobile);
  }
  .bz-pas-tytul + .bz-oferta { padding-top: var(--bz-sekcja-mobile); }
  .bz-kontener { width: 100%; max-width: 100%; padding-inline: 0; }
  .bz-header-mobilny, .bz-menu-mobilne, .bz-pasek-mobile {
    padding-inline: var(--bz-bok-mobile);
  }
  .bz-menu-mobilne a { padding-inline: 0; }
  .bz-split { padding: 0; }
  .bz-split .bz-split-tekst {
    width: 100%; padding: var(--bz-sekcja-mobile) var(--bz-bok-mobile);
  }
  .bz-kompetencje-inner {
    width: 100%; padding: var(--bz-sekcja-mobile) var(--bz-bok-mobile);
  }
  .bz-uslugi-glowa { padding: 0; margin-bottom: 20px; }
  .bz-pas-usluga-foto { margin-inline: calc(-1 * var(--bz-bok-mobile)); }
  .bz-hub-poz { margin-inline: 0; padding-inline: 0; }
  .bz-zadanie-karta, .bz-hub-panel, .bz-dok-rail { padding-inline: var(--bz-bok-mobile); }
  .bz-cta-artykul { margin-top: 0; }

  /* Specyficznosc #tresc pokrywa dotychczasowe selektory artykulow. */
  #tresc h1 {
    font-size: var(--bz-h1-mobile); line-height: 1.2;
  }
  #tresc h2 {
    font-size: var(--bz-h2-mobile); line-height: 1.2;
    letter-spacing: -.015em; text-transform: none;
  }
  #tresc h3 {
    font-size: var(--bz-h3-mobile); line-height: 1.25;
  }
  #tresc p {
    font-size: var(--bz-tekst-mobile); line-height: var(--bz-interlinia-mobile);
  }
  #tresc :is(.bz-btn-mikro, .bz-pole-hint, .bz-etykieta, .bz-ref-rola,
      .bz-cytat-rola, .bz-praktyka-rola, .bz-okruszki ol, .bz-potw-status dd) {
    font-size: var(--bz-pomoc-mobile); line-height: 1.5;
  }
  #tresc :is(.bz-art-etykieta, .bz-zadanie-etykieta, .bz-karty-etykieta,
      .bz-potw-status dt, .bz-hero-dowod-etykieta) {
    font-size: var(--bz-kicker-mobile); line-height: 1.5;
  }
  #tresc :is(.bz-droga-grupa-o, .bz-droga-branza) {
    font-size: var(--bz-pomoc-mobile); line-height: 1.5;
    letter-spacing: .04em;
  }
  #tresc .bz-droga-firma { font-size: var(--bz-h3-mobile); line-height: 1.25; }
  #tresc .bz-hub-poz h3 .bz-duza-litera { font-size: inherit; }
  .bz-hub-slowo { color: var(--c-tekst-czytanie); }
  #tresc :is(.bz-czytanie li, .bz-oferta-lista li, .bz-zadanie-pytania li) {
    font-size: var(--bz-tekst-mobile); line-height: 1.5;
  }
  #tresc :is(.bz-art-tresc, .bz-dok-tresc) h3 { margin-block: 28px 12px; }
  .bz-art-tresc.bz-czytanie h3::before { margin-bottom: 12px; }
  .bz-btn {
    min-height: 44px; padding: 10px 16px; white-space: normal;
    overflow-wrap: anywhere; line-height: 1.5; text-align: center;
  }
  :is(.bz-art-siatka, .bz-oferta-siatka, .bz-team-info, .bz-hub-panel,
      .bz-dok-siatka, .bz-droga-tresc, .bz-praktyka-karta) { min-width: 0; }
  :is(.bz-dok, .bz-art-tresc, .bz-stopka, .bz-praktyka-karta) { overflow-wrap: anywhere; }

  /* Hero: CTA po tezie i leadzie, przed dolnym banerem zgod. */
  .bz-hero-tresc { padding: 28px var(--bz-bok-mobile) 32px; }
  #tresc .bz-hero h1 { text-wrap: wrap; letter-spacing: -.02em; }
  .bz-hero-lead { max-width: none; margin: 14px 0 0; }
  .bz-hero-akcje { margin-top: 18px; gap: 10px; }
  #tresc .bz-hero-dowod { margin-top: 16px; font-size: var(--bz-pomoc-mobile); gap: 4px 8px; }
  .bz-hero-dowod-lista { display: flex; flex-wrap: wrap; align-items: baseline; }
  .bz-hero-dowod-lista i { margin-inline: 4px; }
  .bz-hero-dowod-link { display: inline-flex; align-items: center; min-height: 44px; }
  /* Bialy tekst na najjasniejszym mozliwym pikselu zdjecia: >= 6.40:1. */
  .bz-hero-ciemny::before { background: rgba(22, 17, 13, .70); }
  .bz-hero :is(.bz-hero-dowod, .bz-hero-dowod-etykieta,
      .bz-hero-dowod-lista, .bz-hero-dowod-lista i, .bz-hero-dowod-link) { color: #fff; }

  /* Kroki: numer w rynnie 32px, bez gornego slotu i marginesow li. */
  .bz-jak-glowa { margin-bottom: 20px; }
  .bz-jak-glowa h2 { margin-top: 0; }
  .bz-kroki.bz-kroki-poziom { grid-template-columns: minmax(0, 1fr); gap: 18px; margin: 0 0 20px; }
  .bz-kroki.bz-kroki-poziom li { padding: 0 0 0 32px; margin: 0; }
  .bz-kroki.bz-kroki-poziom li::before { top: 0; font-size: 19px; line-height: 1.25; }
  .bz-kroki li h3 { margin-bottom: 6px; }
  .bz-krok-stan {
    position: static; width: fit-content; margin-bottom: 8px;
    font-size: var(--bz-kicker-mobile); line-height: 1.5;
  }
  .bz-jak-akcja { gap: 6px; }
  .bz-jak-akcja .bz-btn-mikro { margin-top: 0; }

  /* Jedna lista dziesieciu uslug: ikona i tytul rozpoczynaja opis.
     Pelna szerokosc ogranicza lamanie dlugich polskich nazw. */
  .bz-uslugi-rzady { grid-template-columns: minmax(0, 1fr); gap: 1px; }
  .bz-uslugi .bz-usluga {
    display: flow-root; position: relative; min-height: 44px;
    padding: 6px 0 6px 32px; text-align: left; line-height: 1.5;
  }
  .bz-uslugi .bz-usluga [class^="bz-ico-"] {
    position: absolute; top: 6px; left: 0; float: none; margin: 0;
    width: 24px; font-size: 24px; height: auto; line-height: 1;
  }
  .bz-uslugi .bz-usluga h3 { display: inline; margin: 0 6px 0 0; max-width: none; text-wrap: wrap; }
  .bz-uslugi .bz-usluga p {
    display: inline; margin: 0; min-height: 0; max-width: none; text-wrap: wrap;
  }
  .bz-uslugi-inne-tor,
  body:has(.bz-art-tresc) .bz-uslugi-inne-tor {
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px;
  }
  .bz-uslugi-inne-tor .bz-usluga {
    max-width: none; min-width: 0; min-height: 44px; padding: 12px 8px;
  }
  .bz-uslugi-inne-tor .bz-usluga h3 { margin-top: 8px; text-wrap: wrap; }
  .bz-uslugi-inne-tor .bz-usluga p { margin-top: 6px; text-wrap: wrap; }
  .bz-uslugi-inne-tor .bz-usluga [class^="bz-ico-"] { font-size: 28px; }
  .bz-uslugi-inne-tor .bz-usluga:last-child:nth-child(odd) { grid-column: 1 / -1; }
  .bz-split > .bz-split-foto, .bz-uslugi > .bz-split-foto {
    min-height: 0; height: 140px; padding: 0;
  }
  .bz-uslugi > .bz-split-foto { height: 64px; margin-top: 16px; }
  .bz-split-tekst h2 { margin-bottom: 16px; }
  .bz-split-tekst p { margin-block: 10px; }
  .bz-split-tekst .bz-btn { margin-top: 18px; }
  .bz-kompetencje-teza { margin-bottom: 20px; }
  .bz-fakty-rzad { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-top: 20px; }
  .bz-fakt span { display: block; font-size: var(--bz-pomoc-mobile); line-height: 1.5; }
  .bz-kompetencje-lista li { padding: 12px 0; gap: 12px; font-size: 15px; }

  /* Projekty: osobna kolumna logo, firma, rola i opis na wspolnej osi.
     Rola 14px to metryczka projektu, swiadomy wyjatek od H3 19px. */
  .bz-projekty-naglowek { margin-bottom: 16px; }
  .bz-projekty-naglowek h2 { margin: 0 0 8px; }
  .bz-projekty-naglowek p { margin: 0; }
  .bz-team { display: block; margin: 0; padding: 0; }
  .bz-team .bz-team-item,
  .bz-team .bz-team-item.aktywny ~ .bz-team-item,
  .bz-team .bz-team-item:hover ~ .bz-team-item {
    display: grid; grid-template-columns: 72px minmax(0, 1fr);
    gap: 0 12px; align-items: start; float: none; width: 100%; left: auto;
    padding: 4px 0; margin: 0;
  }
  .bz-team-logo { float: none; width: 72px; height: 32px; margin: 0; }
  .bz-team-logo img { width: 100%; height: 32px; object-fit: contain; }
  .bz-team .bz-team-info {
    display: block; position: static; width: auto; height: auto;
    margin: 0; transform: none; float: none;
  }
  .bz-team-info-outer, .bz-team-info-inner { padding: 0; line-height: 1.35; }
  .bz-team-firma {
    display: block; font-size: 16px; font-weight: 600; line-height: 1.5;
    color: var(--c-naglowek); margin: 0;
  }
  #tresc .bz-team-item .bz-team-nazwa {
    display: block; margin: 0; font-size: 14px; font-weight: 600;
    color: var(--c-akcent-ciemny); line-height: 1.2; letter-spacing: -.02em;
  }
  #tresc .bz-team-opis { display: block; margin: 0; font-size: 15px; line-height: 1.5; }

  /* Cytaty bez nowego ukrywania. Istniejacy wybor mobile pozostaje. */
  .bz-ref-label h2 { margin-bottom: 16px; }
  .bz-ref-awatary { margin-bottom: 16px; }
  .bz-referencja + .bz-referencja { margin-top: 16px; padding-top: 16px; }
  .bz-referencja:nth-child(2) { margin-top: 0; padding-top: 0; }
  .bz-referencja figcaption { margin-top: 8px; }
  .bz-ref-imie, .bz-ref-rola { line-height: 1.5; }
  .bz-ref-mobil-link { margin-top: 16px; }

  /* Formularz: pole dotykowe zostaje >=44px, krotsze przerwy i textarea. */
  .bz-oferta-siatka, .bz-oferta-kontakt .bz-oferta-siatka { gap: 24px; }
  .bz-oferta-lista { margin-top: 16px; }
  .bz-oferta-lista li { margin: 0; padding: 12px 0 12px 20px; }
  .bz-oferta-lista li::before { top: 23px; }
  .bz-oferta-tel { margin-top: 16px; }
  .bz-oferta-form { padding: 20px var(--bz-bok-mobile); }
  .bz-form { padding: 0; gap: 10px; }
  .bz-form input[type="text"], .bz-form input[type="email"], .bz-form select {
    min-height: 44px; padding-block: 8px;
  }
  .bz-form textarea { height: 100px; min-height: 100px; }
  /* Ikona i kontrolka dziela rzad 2; etykieta i hint maja wlasne rzedy.
     Pozycjonowanie nie zalezy od liczby wierszy etykiety ani hintu. */
  .bz-form .bz-cf-pole { display: grid; grid-template-columns: minmax(0, 1fr); }
  .bz-form .bz-cf-pole > .bz-etykieta { grid-area: 1 / 1; }
  .bz-form .bz-cf-pole > :is(input, select, textarea) {
    grid-area: 2 / 1; min-width: 0; padding-left: 48px;
  }
  .bz-form .bz-cf-pole > .bz-pole-hint { grid-area: 3 / 1; }
  .bz-form .bz-cf-pole::before,
  .bz-form .bz-cf-select::after {
    position: relative; grid-area: 2 / 1; align-self: center;
    top: auto; right: auto; bottom: auto; left: auto; transform: none;
    margin: 0 0 0 20px; justify-self: start; pointer-events: none;
  }
  .bz-form .bz-cf-pole::before { width: 17px; height: 17px; line-height: 17px; }
  .bz-form .bz-cf-select::after { justify-self: end; margin: 0 20px 0 0; }
  .bz-form .bz-cf-wiadomosc::before { align-self: start; margin-top: 13.5px; }
  .bz-form .bz-etykieta { margin-bottom: 4px; }
  .bz-oferta-form .bz-form button[type="submit"] { margin-top: 8px; height: auto; min-height: 48px; padding: 10px; }
  .bz-form-glowa { margin-bottom: 16px; padding-bottom: 12px; }

  /* Os kariery: separatory po 12px, pelna szerokosc opisow. */
  .bz-droga2 .bz-droga-glowa { margin-bottom: 20px; }
  .bz-droga2 .bz-droga-nota { margin-top: 12px; }
  .bz-droga2 .bz-droga-lista { margin-top: 16px; }
  .bz-droga2 .bz-droga-krok { padding: 0 0 12px; }
  .bz-droga2 .bz-droga-krok + .bz-droga-krok { padding-top: 12px; }
  .bz-droga2 .bz-droga-krok:last-child { padding-bottom: 0; }
  .bz-droga-tresc p, .bz-droga-rola + p { margin-top: 6px; }
  .bz-droga-grupa + .bz-droga-grupa { margin-top: 24px; }
  .bz-droga-grupa-glowa { padding-top: 12px; }
  .bz-praktyka-wstep { margin-top: 16px; }
  .bz-praktyka-siatka { margin-top: 16px; gap: 8px; }
  .bz-praktyka-karta { padding: 12px; }
  .bz-praktyka-logo { margin-bottom: 8px; max-width: 100%; }
  .bz-praktyka-rola { letter-spacing: 0; }
  .bz-praktyka-stopka { margin-top: 12px; }

  /* Stopka: naglowek nad social, kazdy kontakt w osobnym wierszu.
     Dolny zapas na sticky jest juz na body.bz-ma-pasek. */
  .bz-stopka { padding: 16px var(--bz-bok-mobile); }
  .bz-stopka-gora { grid-template-columns: minmax(0, 1fr); gap: 8px; padding: 0; }
  .bz-stopka h2 { font-size: 20px; line-height: 1.2; margin: 0 0 4px; }
  .bz-stopka p { font-size: var(--bz-tekst-mobile); line-height: 1.5; margin: 0 0 4px; }
  .bz-stopka-gora > div:nth-child(2) { display: flex; flex-direction: column; align-items: stretch; gap: 8px; }
  .bz-stopka-gora > div:nth-child(2) h2 { min-width: 0; margin: 0; }
  .bz-stopka-social { display: flex; flex: none; margin: 0; }
  .bz-stopka-social a, .bz-stopka-social a:first-child { margin: 0; min-width: 44px; min-height: 44px; }
  .bz-stopka-gora > div:nth-child(3) {
    display: grid; grid-template-columns: minmax(0, 1fr);
  }
  .bz-stopka-linia, .bz-stopka-linia:first-of-type {
    min-height: 44px; margin: 0; font-size: var(--bz-pomoc-mobile); line-height: 1.5;
  }
  .bz-stopka-linia .bz-ico-tekst { padding-left: 6px; }
  .bz-copyright { padding: 4px 0 0; }
  .bz-stopka .bz-copyright p {
    display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px;
    padding: 0; margin: 0; font-size: var(--bz-pomoc-mobile);
  }
  .bz-copyright a { display: inline-flex; align-items: center; min-height: 44px; }
  .bz-copyright .bz-sep { display: none; }

  /* ZLECENIE-008 A1-A2: bez dekoracyjnego kadru, jedna przerwa 48px.
     Ostatni kafel ma dodatkowo 6px dolnego paddingu, razem 54px. */
  .bz-uslugi > .bz-split-foto { display: none; }
  .bz-uslugi:has(+ .bz-split-home) { padding-bottom: 0; }

  /* A6: separator i etykieta sa jedna para przy zawijaniu listy. */
  .bz-okruszki li { display: inline-flex; align-items: center; max-width: 100%; }
  .bz-okruszki li + li::before { flex: 0 0 auto; }
  .bz-okruszki li > :is(a, span) { min-width: 0; }
  .bz-menu-mobilne a[aria-current="page"] { color: var(--c-akcent-ciemny); font-weight: 700; }

  /* B2: trzy rowne kolumny, tekst i cele dotykowe bez stalej wysokosci. */
  #bz-consent {
    left: 8px; right: 8px; bottom: calc(8px + env(safe-area-inset-bottom));
    width: auto; max-width: calc(100vw - 16px); padding: 8px;
  }
  #bz-consent .bz-consent-akcje { gap: 6px; }
  #bz-consent .bz-consent-akcje button { padding: 4px; }
}

/* ============================================================
   (M2) CX 2026-09-11
   A3/A5/A8 i wspolna baza banera B; desktopowe stany menu A7.
   Mobilne poprawki wymiarow pozostaja w M1. Stare reguly bez zmian.
   ============================================================ */
.bz-loga-tytul {
  font-size: var(--fs-h2-sekcja); line-height: 1.21;
  font-weight: 700; text-align: left;
}
.bz-loga-siatka img { filter: grayscale(1) opacity(.82); transition: filter .25s ease; }
@media (min-width: 1025px) and (hover: hover) and (pointer: fine) {
  .bz-loga-siatka img:hover,
  .bz-loga-siatka img:focus-within { filter: none; }
}
.bz-kontakt-dane .bz-kontakt-linia { min-height: 44px; }

/* A7: te reguly sa aktywne; dawny blok hover wczesniej tkwi w komentarzu. */
@media (min-width: 1025px) {
  .bz-menu a { transition: color .2s ease-out; text-underline-offset: 8px; }
  .bz-menu a:hover,
  .bz-menu a:focus-visible,
  .bz-menu a[aria-current="page"] { color: var(--c-akcent-ciemny); }
  .bz-menu a[aria-current="page"] {
    text-decoration: underline; text-decoration-thickness: 2px;
  }
  .bz-strona-hero .bz-menu a:hover,
  .bz-strona-hero .bz-menu a:focus-visible,
  .bz-strona-hero .bz-menu a[aria-current="page"] {
    color: #fff; text-decoration: underline; text-decoration-thickness: 2px;
  }
  .bz-strona-hero .bz-menu a:focus-visible { outline-color: #fff; }
}
/* Ten sam stan menu na tablecie, do progu menu desktopowego. */
@media (min-width: 681px) and (max-width: 1024px) {
  .bz-menu-mobilne a[aria-current="page"] { color: var(--c-akcent-ciemny); font-weight: 700; }
}

/* B: dialog niemodalny, bez przejmowania fokusu przy pierwszej wizycie. */
:where(#bz-consent) {
  position: fixed; left: 20px; bottom: 20px; z-index: 99999;
  width: 440px; max-width: calc(100vw - 40px); padding: 14px;
  max-height: calc(100dvh - 100px - env(safe-area-inset-bottom)); overflow-y: auto;
  background: #fff; color: #4b4b4b; border: 1px solid #ebebeb; border-radius: 14px;
  box-shadow: 0 2px 8px rgba(24,24,24,.05), 0 14px 36px rgba(24,24,24,.10);
  font-size: 13px; line-height: 1.25; text-align: left;
}
#bz-consent[hidden], #bz-consent-panel[hidden] { display: none; }
#bz-consent p { margin: 0 0 6px; font-size: 13px; line-height: 1.25; }
#bz-consent a { text-decoration: underline; text-underline-offset: 2px; }
.bz-consent-akcje { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
#bz-consent button {
  min-height: 44px; min-width: 0; padding: 6px;
  font: 600 13px/1.25 var(--font-tekst); border: 1px solid var(--c-akcent-ciemny); border-radius: 9px;
}
.bz-consent-wybor { background: var(--c-akcent-ciemny); color: #fff; }
.bz-consent-wybor:hover { background: var(--c-cta-hover, #8a421f); }
.bz-consent-ustawienia { background: #fff; color: var(--c-akcent-ciemny); }
.bz-consent-przelacznik {
  display: flex; align-items: center; gap: 10px; min-height: 44px; cursor: pointer;
}
.bz-consent-przelacznik input { width: 20px; height: 20px; accent-color: var(--c-akcent-ciemny); }
.bz-consent-panel-akcje { display: flex; gap: 8px; }
#bz-consent :is(button, a, input):focus-visible { outline: 2px solid #181818; outline-offset: 2px; }
.bz-cookies-open {
  display: inline-flex; align-items: center; min-height: 44px;
  border: 0; padding: 0; background: transparent; color: inherit;
  font: inherit; text-decoration: underline; text-underline-offset: 3px;
}
.bz-cookies-open:hover { color: #fff; }
.bz-cookies-open:focus-visible { outline-color: #fff; }
@media (prefers-reduced-motion: reduce) {
  .bz-menu a, .bz-loga-siatka img { transition: none; }
}

/* ============================================================
   (M3) DOPRACOWANIE CX 2026-09-11
   P2-P5: link polityki, cele kategorii, stopka i okruszki mobile.
   ============================================================ */
#bz-consent-opis a { white-space: nowrap; }
#bz-consent-panel { padding-top: 8px; }
.bz-consent-kategoria { margin-bottom: 8px; }
.bz-consent-cel { display: block; font-size: 13px; line-height: 1.25; color: #4b4b4b; }
.bz-consent-przelacznik + .bz-consent-cel { padding-left: 30px; }
.bz-consent-przelacznik input { flex-shrink: 0; }

/* P4: te same wymiary i stany co linki w wierszu copyright. */
.bz-copyright .bz-cookies-open {
  display: inline-block; min-height: 0; padding: 3px 0;
  font: inherit; color: var(--c-copyright); text-decoration: none;
  transition: color .2s ease-out;
}
.bz-copyright .bz-cookies-open:hover { color: var(--c-copyright); }
.bz-copyright :is(a, .bz-cookies-open):focus-visible {
  outline: 2px solid #fff; outline-offset: 2px;
}
@media (max-width: 768px) {
  .bz-copyright .bz-cookies-open {
    display: inline-flex; align-items: center; min-height: 44px; padding-block: 0;
  }
}

/* P5: li wraz z separatorem pozostaje dostepny czytnikom ekranu. */
@media (max-width: 680px) {
  .bz-okruszki ol > li:last-child:nth-child(n + 3):has([aria-current="page"]) {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%);
    white-space: nowrap; border: 0;
  }
}