/* ==========================================================================
   Best Bruk - arkusz strony jednostronicowej. WERSJA 2.0.0

   ODWZOROWANIE 1:1 z referencji `best-bruk-onepager.html` z projektu.

   Wszystkie wartosci sa PRZENIESIONE z referencji, nie wymyslone na nowo.
   Gdzie referencja ma 34px, tu jest 34px. Gdzie ma #F5F2ED, tu jest #F5F2ED.

   DLACZEGO CALY WLASNY ARKUSZ, A NIE DOKLADKA DO MOTYWU
   -----------------------------------------------------
   Dwie poprzednie proby (bloki podstawowe + siatki CSS, potem bloki Kadence)
   przegraly z pojemnikami cudzych blokow: core/group renderuje pojemnik
   wewnetrzny, rzad Kadence ma trzy poziomy zagniezdzenia, a kazdy z nich
   dokłada wlasna wysciolke i maksymalna szerokosc. Przy wymogu "1:1"
   walka z tym jest strata czasu.

   Ta wersja renderuje strone z WLASNEGO SZABLONU, ktory omija naglowek,
   stopke i kontenery motywu. Zaden element ukladu nie pochodzi z Kadence,
   wiec nie ma z czym walczyc.

   DWIE ZASADY
   -----------
   1. ARKUSZ JEST W rem - od 2026-08-05, decyzja opiekuna.
      Wczesniej byl w pikselach, bo obowiazywala zasada odwrotna; zostala
      uchylona. Podstawe rem ustala blok REM & RWD na gorze style.css
      motywu potomnego: 1rem to 9 px na telefonie, 10 px od 1440 px,
      14 px od 2400 px i 16 px od 2880 px.

      PRZELICZNIK: 10 px = 1rem, czyli wartosc z progu 90em. Dzieki temu
      przy 1440 px strona wyglada DOKLADNIE tak jak przed przeliczeniem -
      to jest ta szerokosc, przy ktorej odwzorowywalismy projekt 1:1.

      W pikselach zostaja swiadomie: wlos ramki, cien, obrys, promien
      zaokraglenia i warunki @media. Przeliczenie zrobil
      narzedzia/px-na-rem.py — nowe wartosci dopisuj juz w rem.
   2. KLASY MAJA POJEDYNCZE MYSLNIKI.
   ========================================================================== */

/* --------------------------------------------------------------------------
   TOKENY - JEDYNE MIEJSCE Z WARTOSCIAMI KOLOROW I KROJOW (spec. 2, M4; spec. 1, F7)

   Reguly nizej nie maja ani jednego koloru ani kroju wpisanego wprost -
   siegaja po te zmienne. Kolory, ktore strona ma wspolne z „Wygladem marki"
   w Dostosuj (glowny, czern, tekst, tlo jasne, biel, czerwien bledu), biora
   wartosc ze zmiennych motywu nadrzednego `--bp-*` - zmiana palety
   w Dostosuj przechodzi przez te strone. Pozostale odcienie projektu stoja
   tu raz, jako tokeny strony. Przezroczystosci liczy `color-mix()` z tokenu,
   wiec nie ma drugiej kopii tego samego koloru.
   -------------------------------------------------------------------------- */
:root {
  --bb-akcent: var(--bp-akcent);
  --bb-czern: var(--bp-czern);
  --bb-tekst: var(--bp-tekst);
  --bb-tlo-jasne: var(--bp-tlo-jasne);
  --bb-biel: var(--bp-biel);
  --bb-blad: var(--bp-blad);

  --bb-akcent-gleboki: #C2410C;
  /* Kolor glowny w tekscie formularza na bialym (motyw 1.23.2): gwiazdki,
     „czytaj wiecej", numer - pomarancz #f97316 mial 2,8:1, ten 5,2:1. */
  --bp-akcent-tekst: var(--bb-akcent-gleboki);
  --bb-czern-ciepla: #121110;
  --bb-czern-2: #141414;
  --bb-smola: #0A0A0A;
  --bb-cien: #000000;
  --bb-tekst-ciemny: #3F3B35;
  --bb-tekst-2: #6B655C;
  --bb-szary-ciemny: #4A4640;
  --bb-szary: #5A554D;
  --bb-szary-neutralny: #616161;
  --bb-ramka: #E0DAD1;
  --bb-tlo-kafla: #EFEBE4;

  --bb-pismo-tresci: Barlow, system-ui, -apple-system, sans-serif;
  --bb-pismo: Barlow, sans-serif;
  --bb-pismo-naglowkow: Archivo, sans-serif;
  --bb-pismo-waskie: 'Barlow Condensed', sans-serif;
  --bb-ikony: 'Material Symbols Outlined';
}

/* --------------------------------------------------------------------------
   0. ZEROWANIE

   Motyw Kadence nadal wczytuje swoj arkusz. Nie walczymy z nim po kawalku —
   zerujemy to, co moze wejsc w droge, raz i w jednym miejscu.
   -------------------------------------------------------------------------- */
body.bb-page {
  /* WYSOKOSC NAGLOWKA W JEDNYM MIEJSCU.

     Ta liczba wystepowala dotad w trzech regulach naraz: ujemny margines
     pierwszego ekranu, odstep kotwic i rezerwa na naglowek w sekcji
     startowej. Trzy kopie tej samej wartosci to trzy okazje, zeby sie
     rozjechaly przy pierwszej zmianie wysokosci logo.

     Wartosci: wysciolka naglowka (2 x 2rem) + logo (6.2rem) + kreska (1px). */
  --bb-naglowek: 10.3rem;

  margin: 0;
  padding: 0;
  background: var(--bb-czern);
  font-family: var(--bb-pismo-tresci);
  font-size: 1.6rem;
  line-height: 1.5;
  color: var(--bb-tekst);
  -webkit-font-smoothing: antialiased;
}

body.bb-page * {
  box-sizing: border-box;
}

/* ZEROWANIE OWINIETE W :where() — I TO JEST WAZNE.

   Poprzednia wersja miala tu `body.bb-page a { color: inherit }`. Ten
   selektor ma wage (0,1,2) i po cichu bil KAZDA regule klasowa (0,1,0),
   ktora miala go nadpisac. Kosztowalo nas to trzy osobne usterki:
   czarne zakladki w naglowku, czarny telefon i czarny napis na przycisku
   "Odbierz wycene", ktory przez to znikal na ciemnym filmie.

   `:where()` NIE DODAJE WAGI. Dzieki temu `:where(body.bb-page) a` ma
   wage (0,0,1) — czyli slabsza od kazdej klasy — i zerowanie robi to,
   do czego bylo pomyslane: ustawia punkt wyjscia, zamiast wygrywac
   z wszystkim, co po nim nastepuje. */
:where(body.bb-page) h1,
:where(body.bb-page) h2,
:where(body.bb-page) h3,
:where(body.bb-page) p {
  margin: 0;
  text-transform: none;
}

:where(body.bb-page) a {
  color: inherit;
  text-decoration: none;
}

:where(body.bb-page) img {
  max-width: 100%;
  border-radius: 0;
}

:where(body.bb-page) button {
  font: inherit;
  border-radius: 0;
}

html {
  scroll-behavior: smooth;
}

.bb-ikona {
  font-family: var(--bb-ikony);
  font-weight: normal;
  font-style: normal;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  -webkit-font-feature-settings: 'liga';
  -webkit-font-smoothing: antialiased;
}

/* Kotwice chowaly sie pod przyklejonym naglowkiem. 103px to jego wysokosc. */
.bb-sekcja {
  scroll-margin-top: var(--bb-naglowek);
}

/* ==========================================================================
   1. NAGLOWEK

   Przyklejony, na starcie przezroczysty nad wideo. Sekcja startowa ma
   margin-top: -10.3rem, wiec naglowek LEZY NA NIEJ — tak jest w referencji.
   ========================================================================== */
.bb-header {
  position: sticky;
  top: 0;
  z-index: 40;
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 2rem 6.4rem;
  border-bottom: 1px solid color-mix(in srgb, var(--bb-biel) 12%, transparent);
  transition: background 0.25s, padding 0.25s, border-color 0.25s;
}

/* Pasek administratora WordPressa jest position: fixed i lezy nad wszystkim.
   Bez tego zalogowany opiekun widzi obciety naglowek, a odwiedzajacy poprawny —
   blad niewidoczny inaczej niz w trybie incognito. */
body.admin-bar .bb-header {
  top: 3.2rem;
}

@media (max-width: 782px) {
  body.admin-bar .bb-header {
    top: 4.6rem;
  }
}

.bb-header-lewo {
  display: flex;
  align-items: center;
  gap: 3.4rem;
}

.bb-logo img {
  height: 6.2rem;
  display: block;
  width: auto;
}

/* WAGA SELEKTORA — tu byl blad, ktory dawal DWA LOGA NARAZ.
   `.bb-logo img` ma wage (0,1,1) i bilo `.bb-logo-kolor` (0,1,0),
   wiec `display: none` nigdy nie wchodzilo. Klasa musi stac PRZY
   selektorze obrazka, zeby wygrac. */
.bb-logo img.bb-logo-kolor {
  display: none;
}

.bb-nav {
  display: flex;
  gap: 3.8rem;
  font-family: var(--bb-pismo);
  letter-spacing: 0.01em;
  /* 16 -> 17 px (zalozenie projektowe): zakladki byly odrobine
     za drobne wzgledem reszty naglowka. Dotyczy wszystkich szerokosci
     komputerowych - prog 1280 px tez zostal podniesiony o 1 px. */
  font-size: 1.7rem;
  font-weight: 600;
}

/* TEN SAM BLAD, DRUGI RAZ: `body.bb-page a { color: inherit }` z sekcji
   zerujacej ma wage (0,1,2) i bilo `.bb-nav a` (0,1,1) — dlatego zakladki
   i telefon byly czarne na przezroczystym naglowku, czyli niewidoczne
   na ciemnym filmie. Przedrostek `body.bb-page` wyrownuje rachunek. */
body:is(.bb-page, .bb-podstrona) .bb-nav a {
  color: var(--bb-biel);
  transition: color 0.2s;
}

body:is(.bb-page, .bb-podstrona) .bb-nav a:hover,
body:is(.bb-page, .bb-podstrona) .bb-nav a.bb-aktywny {
  color: var(--bb-akcent);
}

.bb-header-prawo {
  display: flex;
  align-items: center;
  gap: 2rem;
}

.bb-header-dane {
  text-align: right;
  line-height: 1.2;
}

.bb-godziny {
  font-family: var(--bb-pismo-waskie);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  /* 12px -> 13px. Referencja ma 12, ale przy kroju waskim (Condensed)
     i wersalikach to bylo na granicy czytelnosci nad ruchomym filmem. */
  font-size: 1.3rem;
  color: color-mix(in srgb, var(--bb-biel) 85%, transparent);
}

body:is(.bb-page, .bb-podstrona) .bb-telefon {
  color: var(--bb-biel);
  font-size: 2rem;
  font-weight: 700;
  display: block;
}

body:is(.bb-page, .bb-podstrona) .bb-header-cta {
  background: var(--bb-akcent);
  color: var(--bb-tekst);
  font-family: var(--bb-pismo);
  letter-spacing: 0.01em;
  font-weight: 700;
  font-size: 1.6rem;
  padding: 1.5rem 2.4rem;
  cursor: pointer;
  border: 1px solid var(--bb-akcent);
  display: inline-block;
  transition: background 0.2s, color 0.2s, border-color 0.2s;
}

body:is(.bb-page, .bb-podstrona) .bb-header-cta:hover {
  background: var(--bb-czern);
  border-color: var(--bb-czern);
  color: var(--bb-biel);
}

/* Stan po przewinieciu: biale tlo, ciemne linki, kolorowe logo. */
body.bb-przyklejony .bb-header {
  background: var(--bb-biel);
  border-bottom-color: var(--bb-ramka);
  box-shadow: 0 10px 30px color-mix(in srgb, var(--bb-cien) 10%, transparent);
}

body:is(.bb-page, .bb-podstrona).bb-przyklejony .bb-nav a {
  color: var(--bb-tekst-ciemny);
}

body:is(.bb-page, .bb-podstrona).bb-przyklejony .bb-nav a:hover,
body:is(.bb-page, .bb-podstrona).bb-przyklejony .bb-nav a.bb-aktywny {
  color: var(--bb-akcent);
}

body:is(.bb-page, .bb-podstrona).bb-przyklejony .bb-telefon {
  color: var(--bb-tekst);
}

body.bb-przyklejony .bb-godziny {
  color: var(--bb-tekst-2);
}

body.bb-przyklejony .bb-logo img.bb-logo-biale {
  display: none;
}

body.bb-przyklejony .bb-logo img.bb-logo-kolor {
  display: block;
}

/* Menu na telefon */
.bb-menu-przycisk {
  display: none;
  background: transparent;
  border: 1px solid color-mix(in srgb, var(--bb-biel) 35%, transparent);
  color: var(--bb-biel);
  padding: 1rem 1.2rem;
  cursor: pointer;
  font-size: 2.2rem;
  line-height: 1;
}

body.bb-przyklejony .bb-menu-przycisk {
  border-color: color-mix(in srgb, var(--bb-czern) 30%, transparent);
  color: var(--bb-tekst);
}

/* OBWODKA PO KLIKNIECIU MA BYC POMARANCZOWA, NIE NIEBIESKA.
   Niebieska ramka to domyslna obwodka skupienia przegladarki. Nie kasujemy
   jej — bez niej osoba poruszajaca sie klawiatura nie wie, gdzie jest —
   tylko przemalowujemy na kolor marki. `-webkit-tap-highlight-color`
   gasi dodatkowo niebieski blysk przy dotknieciu na telefonie. */
/* NIEBIESKIE TLO PO KLIKNIECIU — PRZYCZYNA NIE BYLA TAM, GDZIE SZUKALEM.
   Ikona hamburgera to LIGATURA TEKSTOWA (slowo "menu" w kroju Material
   Symbols), a nie obrazek. Przytrzymanie palcem zaznaczalo ten tekst
   i przegladarka rysowala niebieskie tlo zaznaczenia. Obwodka i kolor
   byly juz pomaranczowe od 2.14.0 — tla nigdy nie ruszalem, bo szukalem
   go w stanie skupienia zamiast w zaznaczeniu.

   Stad `user-select: none`. Tlo wymuszamy dodatkowo we WSZYSTKICH stanach,
   zeby zaden domyslny styl przegladarki juz sie tu nie wcisnal. */
.bb-menu-przycisk {
  -webkit-tap-highlight-color: transparent;
  -webkit-user-select: none;
  user-select: none;
}

.bb-menu-przycisk,
.bb-menu-przycisk:hover,
.bb-menu-przycisk:focus,
.bb-menu-przycisk:focus-visible,
.bb-menu-przycisk:active,
.bb-menu-przycisk[aria-expanded="true"],
body.bb-przyklejony .bb-menu-przycisk,
body.bb-przyklejony .bb-menu-przycisk:hover,
body.bb-przyklejony .bb-menu-przycisk:focus,
body.bb-przyklejony .bb-menu-przycisk:active,
body.bb-przyklejony .bb-menu-przycisk[aria-expanded="true"] {
  background: transparent;
}

.bb-menu-przycisk::selection,
.bb-menu-przycisk .bb-ikona::selection {
  background: transparent;
}

.bb-menu-przycisk:focus,
.bb-menu-przycisk:focus-visible,
body.bb-przyklejony .bb-menu-przycisk:focus,
body.bb-przyklejony .bb-menu-przycisk:focus-visible {
  outline: 2px solid var(--bb-akcent);
  outline-offset: 2px;
  border-color: var(--bb-akcent);
  color: var(--bb-akcent);
}

/* Otwarte menu: przycisk zostaje pomaranczowy, zeby bylo widac stan. */
.bb-menu-przycisk[aria-expanded="true"],
body.bb-przyklejony .bb-menu-przycisk[aria-expanded="true"] {
  border-color: var(--bb-akcent);
  color: var(--bb-akcent);
}

/* ==========================================================================
   2. SEKCJA STARTOWA (HERO)
   ========================================================================== */
/* ==========================================================================
   OSTRZEZENIE: PONIZSZYCH REGUL NIE POPRZEDZAJ KOMENTARZEM.

   Autoptimize dwa razy z rzedu uszkodzil regule `.bb-ekran`:
   raz wyrzucil ja w calosci (gdy miala `calc(var(--x) * -1)`),
   raz zjadl SAM SELEKTOR razem z komentarzem stojacym tuz przed nim —
   w serwowanej sklejce zostalo golе `margin-top:-10.3rem;min-height:100vh;`
   bez `.bb-ekran {`, czyli deklaracje bez wlasciciela.

   Dlatego komentarz jest TUTAJ, oddzielony pusta linia i inna regula,
   a sama regula stoi nizej naga. Nie przenosic z powrotem.

   CO ROBI: sekcja startowa i pomaranczowy pasek siedza we wspolnym
   pojemniku o wysokosci dokladnie jednego ekranu. Sekcja bierze reszte
   (`flex: 1 1 auto`), pasek trzyma swoja wysokosc (`flex: 0 0 auto`),
   wiec pasek zawsze konczy sie rowno z dolna krawedzia okna — niezaleznie
   od tego, ile ma wierszy i jak dlugie sa teksty.

   Ujemny margines wpisany WPROST, nie przez calc() — patrz wyzej.
   ========================================================================== */

.bb-ekran-znacznik { display: none; }

.bb-ekran {
  margin-top: -10.3rem;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

@media (max-width: 1280px) {
  .bb-ekran { margin-top: -9.9rem; }
}

@media (max-width: 640px) {
  .bb-ekran { margin-top: -7.5rem; }
}

/* Pasek administratora WordPressa zabiera 32px u gory, wiec zalogowany
   opiekun ma o tyle mniej miejsca niz odwiedzajacy. Bez tej reguly
   dopasowanie dzialaloby tylko dla jednego z nich. */
body.admin-bar .bb-ekran {
  min-height: calc(100vh - 3.2rem);
}

@media (max-width: 782px) {
  body.admin-bar .bb-ekran {
    min-height: calc(100vh - 4.6rem);
  }
}

.bb-hero {
  position: relative;
  /* Zajmuje cala reszte ekranu po odjeciu paska. */
  flex: 1 1 auto;
  min-height: 48rem;
  overflow: hidden;
  background: var(--bb-czern);
  /* Sama tez jest ukladem pionowym — patrz komentarz przy .bb-hero-wrap. */
  display: flex;
  flex-direction: column;
}

.bb-hero video,
.bb-hero .bb-hero-poster {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(0.9) contrast(1.05);
}

.bb-hero-nakladka {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    100deg,
    color-mix(in srgb, var(--bb-smola) 95%, transparent) 0%,
    color-mix(in srgb, var(--bb-smola) 86%, transparent) 34%,
    color-mix(in srgb, var(--bb-smola) 50%, transparent) 66%,
    color-mix(in srgb, var(--bb-smola) 20%, transparent) 100%
  );
}

/* TRESC MA BYC WYSRODKOWANA MIEDZY DOLNA KRAWEDZIA NAGLOWKA
   A GORNA KRAWEDZIA POMARANCZOWEGO PASKA.

   Naglowek LEZY NA sekcji startowej, wiec jej gorne 103px sa zaslonione.
   Wczesniej srodek liczyl sie od samej gory sekcji, czyli spod naglowka —
   i dlatego tresc wychodzila optycznie za wysoko.

   Rezerwa jako wysciolka gornego pojemnika zalatwia to raz: przegladarka
   srodkuje juz tylko w tym, co ZOSTAJE pod naglowkiem. Zadnej arytmetyki
   z nierownymi wysciolkami, ktora rozjezdza sie przy kazdej zmianie
   wysokosci sekcji. */
/* DLACZEGO `flex`, A NIE `height: 100%`.

   Bylo tu `height: 100%` i NIE DZIALALO: sekcja startowa miala 59rem,
   a ten pojemnik 520px, czyli tyle, ile jego wlasna tresc. Wysokosc
   procentowa rozwiazuje sie wzgledem RODZICA O ZNANEJ WYSOKOSCI, a wysokosc
   sekcji bierze sie z rozciagniecia przez uklad elastyczny — dla przegladarki
   to nie jest wysokosc "znana" w chwili liczenia procentu.

   Skutek byl taki, ze tresc srodkowala sie w 520px zamiast w 590px
   i wychodzila 35px za wysoko. Zmierzone, nie zgadniete.

   Uklad elastyczny nie ma tego problemu: `flex: 1` bierze wszystko,
   co zostalo, bez pytania o procenty. */
.bb-hero-wrap {
  position: relative;
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  padding-top: var(--bb-naglowek);
}

/* Wysciolka NIEROWNA i to jest celowe: 16px z gory, 64px z dolu.

   Suma zostaje ta sama (80px), wiec WYSOKOSC SEKCJI SIE NIE ZMIENIA
   i pomaranczowy pasek stoi tam, gdzie stal. Przesuwa sie tylko sama
   tresc — o 24px w gore. Zmierzone na zywo przed wyslaniem.

   Dlaczego nie przez `justify-content` albo margines: tak dziala
   NIEZALEZNIE od tego, czy pojemnik pierwszego ekranu jest rozciagniety.
   A ten potrafi nie byc — patrz ostrzezenie przy `.bb-ekran`. */
.bb-hero-tresc {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 1.6rem 6.4rem 6.4rem;
  max-width: 102rem;
}

/* Rozmiar H1 z ustawien globalnych (spec. 2, M4): `--bp-h1-tel` / `--bp-h1`
   z „Rozmiarow pisma" w Dostosuj, progi ustawia motyw nadrzedny. */
.bb-hero h1 {
  font-family: var(--bb-pismo-naglowkow);
  font-weight: 800;
  font-size: var(--bp-h1-tel);
  line-height: 1.06;
  letter-spacing: -0.035em;
  color: var(--bb-biel);
  text-wrap: balance;
}

.bb-hero-lead {
  margin: 2.6rem 0 0;
  max-width: 62rem;
  font-size: 2.1rem;
  line-height: 1.5;
  color: color-mix(in srgb, var(--bb-biel) 82%, transparent);
  text-wrap: pretty;
}

.bb-hero-cta {
  display: flex;
  gap: 1.4rem;
  margin-top: 3.8rem;
  flex-wrap: wrap;
}

/* PRZYCISKI SEKCJI STARTOWEJ SA PRZYCISKAMI MOTYWU (spec. 2, M4 i M5):
   `.bp-btn` (pelny) i `.bp-btn .bp-btn--kontur` (konturowy). Kolor, promien,
   wysciolka i kroj ida z „Wygladu przyciskow" w Dostosuj - ten arkusz nie
   ustawia im niczego. Klasy `bb-btn-pelny` / `bb-btn-obrys-jasny` zostaja
   w szablonie tylko jako zaczepienie podgladu na ekranie edycji tresci.
   Od progu 60em H1 bierze rozmiar komputerowy - ten sam prog co u rodzica. */
@media (min-width: 60em) {
  .bb-hero h1 {
    font-size: var(--bp-h1);
  }
}

/* Przycisk „Zadzwon" jest odnosnikiem `tel:`. Motyw nadrzedny daje
   odnosnikom `tel:` kolor otoczenia regula o wyzszej wadze niz `.bp-btn`,
   wiec napis przestalby sluchac koloru z „Wygladu przyciskow". Tu wracamy
   do tej samej zmiennej, ktorej uzywa `.bp-btn`. */
.bb-hero-cta a.bp-btn[href^="tel"] {
  color: var(--bp-btn-napis);
}

.bb-hero-cta a.bp-btn[href^="tel"]:hover,
.bb-hero-cta a.bp-btn[href^="tel"]:focus {
  color: var(--bp-btn-napis-hover);
}

/* ==========================================================================
   3. PASEK ZAUFANIA
   ========================================================================== */
.bb-zaufanie {
  display: flex;
  align-items: stretch;
  background: var(--bb-akcent);
  color: var(--bb-tekst);
  /* Nie kurczy sie: to sekcja startowa oddaje miejsce, nie pasek. */
  flex: 0 0 auto;
}

.bb-zaufanie-poz {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 1.2rem;
  padding: 1.8rem 3.2rem;
  border-right: 1px solid color-mix(in srgb, var(--bb-czern) 18%, transparent);
  font-size: 1.6rem;
  font-weight: 600;
}

/* Pierwsze pole ma szersza wysciolke — wyrownuje sie z krawedzia naglowka. */
.bb-zaufanie-poz:first-child {
  padding-left: 6.4rem;
}

.bb-zaufanie-poz:last-child {
  border-right: 0;
  padding-right: 6.4rem;
}

.bb-ocena {
  font-family: var(--bb-pismo-naglowkow);
  font-weight: 800;
  font-size: 3.4rem;
  line-height: 1;
  letter-spacing: -0.02em;
}

.bb-ocena-opis {
  font-size: 1.5rem;
  font-weight: 600;
  line-height: 1.25;
}

/* ==========================================================================
   4. DWIE DROGI
   ========================================================================== */
.bb-drogi {
  background: var(--bb-biel);
  border-top: 1px solid var(--bb-ramka);
  padding: 9rem 5.6rem 10rem;
}

.bb-naglowek-sekcji {
  max-width: 72rem;
  margin-bottom: 4.8rem;
}

.bb-naglowek-sekcji-rozstrzelony {
  max-width: none;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 4rem;
}

.bb-h2 {
  font-family: var(--bb-pismo-naglowkow);
  font-weight: 800;
  font-size: 4.4rem;
  line-height: 1.08;
  letter-spacing: -0.03em;
  color: var(--bb-czern-ciepla);
}

.bb-nadtytul {
  font-size: 1.4rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--bb-akcent-gleboki);
  margin-bottom: 1.4rem;
}

.bb-nadtytul-jasny {
  font-family: var(--bb-pismo-waskie);
  letter-spacing: 0.18em;
  color: var(--bb-akcent);
}

/* Nadtytul sekcji sprzetu: krój waski, kolor gleboki. Do wydania zgodnosci
   ten kolor stal w szablonie atrybutem `style`. */
.bb-nadtytul-jasny.bb-nadtytul-gleboki {
  color: var(--bb-akcent-gleboki);
}

.bb-drogi-siatka {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2.8rem;
}

.bb-droga {
  border: 1px solid var(--bb-ramka);
  background: var(--bb-tlo-jasne);
  display: flex;
  flex-direction: column;
}

.bb-droga-foto {
  height: 26rem;
  overflow: hidden;
}

.bb-droga-foto img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.bb-droga-tresc {
  padding: 3.4rem 3.4rem 3.6rem;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.bb-kind {
  font-size: 1.3rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--bb-akcent-gleboki);
  margin-bottom: 1rem;
}

/* Rozmiar H3 z ustawien globalnych (spec. 2, M4). */
.bb-droga h3 {
  font-family: var(--bb-pismo-naglowkow);
  font-weight: 800;
  font-size: var(--bp-h3);
  letter-spacing: -0.02em;
  color: var(--bb-czern-ciepla);
}

.bb-droga-opis {
  margin: 1.2rem 0 0;
  font-size: 1.7rem;
  line-height: 1.55;
  color: var(--bb-szary-ciemny);
}

.bb-droga-punkty {
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
  margin: 2rem 0 2.6rem;
  font-size: 1.6rem;
  color: var(--bb-szary);
}

.bb-droga-cta {
  align-self: flex-start;
  margin-top: auto;
  background: var(--bb-akcent);
  color: var(--bb-tekst);
  border: 1px solid var(--bb-akcent);
  padding: 1.4rem 2.4rem;
  font-size: 1.6rem;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
}

.bb-droga-cta:hover {
  background: var(--bb-czern);
  border-color: var(--bb-czern);
  color: var(--bb-biel);
}

.bb-droga-cta-obrys {
  background: transparent;
  border: 1px solid var(--bb-czern);
  color: var(--bb-tekst);
}

.bb-droga-cta-obrys:hover {
  background: var(--bb-czern);
  color: var(--bb-biel);
}

/* ==========================================================================
   5. USLUGI — DZIESIEC KAFELKOW
   ========================================================================== */
.bb-uslugi {
  background: var(--bb-tlo-jasne);
  padding: 9.2rem 5.6rem 10.4rem;
}

.bb-uslugi .bb-h2 {
  font-size: 4.6rem;
  line-height: 1.06;
}

.bb-uslugi-siatka {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 2rem;
}

.bb-karta {
  background: var(--bb-biel);
  border: 1px solid var(--bb-ramka);
  display: flex;
  flex-direction: column;
  transition: border-color 0.18s;
}

.bb-karta:hover {
  border-color: var(--bb-akcent);
}

.bb-karta-usluga {
  padding: 2.6rem 2.2rem 2.8rem;
  gap: 1.2rem;
}

.bb-karta-usluga .bb-ikona {
  font-size: 3.2rem;
  color: var(--bb-akcent);
}

.bb-h3 {
  font-family: var(--bb-pismo-naglowkow);
  font-weight: 700;
  font-size: 1.9rem;
  line-height: 1.22;
  letter-spacing: -0.01em;
  color: var(--bb-czern-ciepla);
}

.bb-note {
  font-size: 1.5rem;
  line-height: 1.5;
  color: var(--bb-tekst-2);
}

/* ==========================================================================
   6. PROCES WYNAJMU
   ========================================================================== */
.bb-proces {
  background: var(--bb-czern);
  color: var(--bb-biel);
  padding: 8.8rem 5.6rem 9.6rem;
}

.bb-proces .bb-h2 {
  font-size: 4.2rem;
  line-height: 1.08;
  color: var(--bb-biel);
  margin-bottom: 1.2rem;
}

.bb-proces-siatka {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2.8rem;
  margin-top: 3.6rem;
}

.bb-krok {
  border-top: 3px solid var(--bb-akcent);
  padding: 2.6rem 0 0;
}

.bb-krok-numer {
  font-family: var(--bb-pismo-naglowkow);
  font-weight: 900;
  font-size: 6.2rem;
  line-height: 1;
  color: var(--bb-akcent);
  text-shadow: 0 0 28px color-mix(in srgb, var(--bb-akcent) 60%, transparent);
  margin-bottom: 1.8rem;
}

.bb-krok .bb-h3 {
  color: var(--bb-biel);
}

.bb-krok .bb-note {
  color: color-mix(in srgb, var(--bb-biel) 66%, transparent);
  margin-top: 1rem;
}

/* ==========================================================================
   7. SPRZET DO WYNAJECIA
   ========================================================================== */
.bb-sprzet {
  background: var(--bb-tlo-jasne);
  padding: 9.2rem 5.6rem 10.4rem;
}

.bb-sprzet .bb-naglowek-sekcji {
  margin-bottom: 4.4rem;
}

.bb-sprzet .bb-h2 {
  font-size: 4.2rem;
  line-height: 1.08;
}

.bb-sprzet-siatka {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2.2rem;
}

.bb-sprzet-foto {
  height: 18rem;
  overflow: hidden;
  /* Wzorek widoczny, dopoki karta nie ma jeszcze wlasnego zdjecia. */
  background: repeating-linear-gradient(
    135deg,
    color-mix(in srgb, var(--bb-akcent) 8%, transparent) 0 10px,
    color-mix(in srgb, var(--bb-akcent) 2%, transparent) 10px 20px
  );
}

.bb-sprzet-foto img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.bb-sprzet-tresc {
  padding: 2.2rem 2.2rem 2.4rem;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.bb-sprzet-tresc .bb-note {
  margin: 0.8rem 0 1.8rem;
  color: var(--bb-szary-ciemny);
}

.bb-btn-obrys {
  align-self: flex-start;
  margin-top: auto;
  font-family: var(--bb-pismo);
  font-size: 1.5rem;
  font-weight: 700;
  padding: 1.2rem 1.8rem;
  cursor: pointer;
  border: 1px solid var(--bb-czern);
  background: transparent;
  color: var(--bb-tekst);
  transition: background 0.2s, color 0.2s;
}

.bb-btn-obrys:hover {
  background: var(--bb-czern);
  color: var(--bb-biel);
}

/* ==========================================================================
   8. REALIZACJE — MOZAIKA
   ========================================================================== */
.bb-realizacje {
  background: var(--bb-czern-2);
  padding: 9.2rem 6.4rem 10.4rem;
  border-top: 1px solid color-mix(in srgb, var(--bb-biel) 14%, transparent);
}

.bb-realizacje .bb-naglowek-sekcji {
  margin-bottom: 4rem;
}

.bb-realizacje .bb-h2 {
  color: var(--bb-biel);
  letter-spacing: 0;
  line-height: 1.06;
}

.bb-mozaika {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 19rem;
  gap: 1.4rem;
}

.bb-kafel {
  overflow: hidden;
  cursor: pointer;
  position: relative;
}

.bb-kafel img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.35s ease, opacity 0.2s;
}

.bb-kafel:hover img {
  transform: scale(1.04);
  opacity: 0.88;
}

/* Uklad mozaiki 1:1 z referencji. */
.bb-kafel:nth-child(1) { grid-column: span 2; grid-row: span 2; }
.bb-kafel:nth-child(3) { grid-row: span 2; }
.bb-kafel:nth-child(5) { grid-column: span 2; }

/* ==========================================================================
   9. KONTAKT
   ========================================================================== */
.bb-kontakt {
  display: grid;
  grid-template-columns: 1fr 1fr;
  background: var(--bb-akcent);
  color: var(--bb-tekst);
}

.bb-kontakt-lewo {
  padding: 8.4rem 6.4rem 9rem;
}

.bb-kontakt .bb-h2 {
  font-size: 4.6rem;
  line-height: 1.05;
  color: var(--bb-tekst);
}

.bb-kontakt-opis {
  margin: 1.8rem 0 3.4rem;
  max-width: 46rem;
  font-size: 1.9rem;
  line-height: 1.5;
}

.bb-dane {
  display: flex;
  flex-direction: column;
  gap: 2.2rem;
}

/* IKONY WYSRODKOWANE, nie wyrownane do gory.

   Referencja ma `align-items: flex-start`, ale pozycje maja rozna wysokosc
   tekstu (telefon 23px, e-mail 19px, adres i godziny 18px w dwoch wierszach),
   wiec ikony ladowaly 9-12px nad srodkiem tekstu — kazda inaczej.
   Zmierzone na zywo. Wysrodkowanie daje spojny rzad niezaleznie od tego,
   ile wierszy ma dana pozycja. */
.bb-dana {
  display: flex;
  align-items: center;
  gap: 1.6rem;
}

.bb-dana .bb-ikona {
  font-size: 2.6rem;
  line-height: 1.1;
  color: var(--bb-tekst);
}

/* Etykieta 1:1 z referencji: Barlow Condensed, 12px, 700, przezroczystosc 0.7.
   Wczesniej bylo 13px i 0.18em — stad wrazenie rozjechanego wyrownania. */
.bb-dana-etykieta {
  font-family: var(--bb-pismo-waskie);
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-size: 1.2rem;
  font-weight: 700;
  line-height: 1.2;
  opacity: 0.7;
  margin-bottom: 2px;
}

/* Wartosc domyslna: 18px, waga zwykla — tak jak adres i godziny w referencji. */
.bb-dana-wartosc {
  font-size: 1.8rem;
  line-height: 1.4;
  font-weight: 400;
}

/* W referencji pierwsze dwie pozycje sa wyroznione: telefon 23px/700,
   e-mail 19px/600. Reszta zostaje na 18px. Kolejnosc bierze sie z pol ACF —
   po przestawieniu pozycji wyroznienie pojedzie za nowa kolejnoscia. */
.bb-dana:nth-child(1) .bb-dana-wartosc,
.bb-dana:nth-child(1) .bb-dana-wartosc a {
  font-size: 2.3rem;
  font-weight: 700;
}

.bb-dana:nth-child(2) .bb-dana-wartosc,
.bb-dana:nth-child(2) .bb-dana-wartosc a {
  font-size: 1.9rem;
  font-weight: 600;
}

/* Ikona i pierwszy wiersz tekstu maja stac na jednej linii optycznej.
   Ikona ma 26px i wlasna linie bazowa, etykieta 12px — bez tej korekty
   ikona wisi o kilka pikseli za wysoko. */
.bb-dana .bb-ikona {
  font-size: 2.6rem;
  line-height: 1.1;
  color: var(--bb-tekst);
}

.bb-dana-wartosc a:hover {
  text-decoration: underline;
}

.bb-kontakt-prawo {
  padding: 8.4rem 6.4rem 9rem;
  border-left: 1px solid color-mix(in srgb, var(--bb-czern) 20%, transparent);
}

/* Podstrona kontaktowa: ten sam uklad, ale na pelna wysokosc ekranu.
   Naglowek lezy na niej tak samo jak na sekcji startowej strony glownej. */
.bb-kontakt-strona {
  min-height: calc(100vh - 10.3rem);
  align-items: start;
}

.bb-form-pod {
  margin: -1.4rem 0 2.6rem;
  font-size: 1.6rem;
  line-height: 1.5;
  color: color-mix(in srgb, var(--bb-czern) 72%, transparent);
}

/* Przyciski kart sa teraz odnosnikami, nie przyciskami — bez tego
   wysciolka nie dziala, bo odnosnik jest elementem liniowym. */
a.bb-droga-cta,
a.bb-btn-obrys {
  display: inline-block;
  text-align: center;
}

/* Tytul jest teraz PIERWSZYM elementem w bialym boksie, nie napisem
   nad nim. Kreska pod nim oddziela go od pol. */
.bb-form-tytul {
  font-family: var(--bb-pismo-naglowkow);
  font-weight: 800;
  letter-spacing: -0.02em;
  font-size: 2.4rem;
  line-height: 1.2;
  margin: 0 0 2rem;
  padding-bottom: 1.6rem;
  border-bottom: 1px solid var(--bb-tlo-kafla);
}

/* ==========================================================================
   10. FORMULARZ (Contact Form 7 i formularz w oknie)
   ========================================================================== */
/* --------------------------------------------------------------------------
   POLA W STYLU GOOGLE MATERIAL (wariant "outlined")

   Zasada, ktora opisuje specyfikacja Material Design: pole NIE MA
   podpowiedzi typu "Jan Kowalski". Ma etykiete, ktora w stanie spoczynku
   lezy w srodku pola, a po klknieciu albo po wpisaniu tresci zmniejsza sie
   i wskakuje NA gorna krawedz obramowania. Dzieki temu uzytkownik przez
   caly czas widzi, czego dotyczy pole — przy zwyklym placeholderze
   ta informacja znika w chwili, gdy zaczyna pisac.

   Jak to dziala technicznie: pole dostaje placeholder ze SPACJI (nie pusty),
   zeby zadzialal warunek :placeholder-shown. Etykieta jest osobnym
   elementem obok pola, a nie jego placeholderem.
   -------------------------------------------------------------------------- */
/* BIALY, ZAOKRAGLONY BOKS WOKOL CALEGO FORMULARZA.

   SWIADOME ODSTEPSTWO OD HANDOFFU, ktory mowi wprost: "wszystkie elementy
   maja border-radius: 0". opiekun poprosil o to dwa razy, wskazujac wlasna
   strone jako wzor, i ma racje w jednym: formularz na pomaranczowym tle
   bez pojemnika wyglada, jakby pola wisialy w powietrzu.

   Wartosci przeniesione ze wskazanej inspiracji
   (brandperspective.pl/bezplatna-wycena): biale tlo, zaokraglenie 0.8rem,
   delikatny cien. Wysciolka podniesiona do 32px, bo nasze pola sa wieksze.

   To JEDYNE zaokraglenie na calej stronie — reszta zostaje kanciasta. */
.bb-form-box {
  background: var(--bb-biel);
  border-radius: 8px;
  padding: 2.8rem;
  box-shadow: 0 2px 6px color-mix(in srgb, var(--bb-czern) 14%, transparent);
}

.bb-form .wpcf7-form > p,
.bb-form form > p {
  margin: 0;
}

.bb-pole {
  position: relative;
  /* 26px -> 18px. Formularz ma byc zwarty; etykieta wychodzi ponad pole
     tylko o 12px, wiec 18px nadal wystarcza, zeby nie dotykala pola wyzej. */
  margin: 0 0 1.8rem;
}

/* CF7 SAM OWIJA POLA W AKAPITY i to wlasnie przez to etykieta wczesniej
   nie reagowala: regula celowala w bezposrednie dziecko, a miedzy polem
   a jego pojemnikiem siedzial <p>. Wtyczka wylacza teraz to owijanie
   dla naszego formularza, ale gdyby wrocilo, akapit nie moze niczego
   rozpychac ani przykrywac etykiety. */
.bb-pole p {
  margin: 0;
}

.bb-pole .wpcf7-form-control-wrap {
  display: block;
}

/* Adres e-mail i telefon obok siebie, po polowie szerokosci. */
.bb-pole-rzad {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 1.6rem;
}

.bb-form input[type='text'],
.bb-form input[type='email'],
.bb-form input[type='tel'],
.bb-form textarea {
  width: 100%;
  box-sizing: border-box;
  border: 1px solid var(--bp-ramka);
  border-radius: var(--bp-btn-promien);
  background: var(--bb-biel);
  /* Wysciolka, interlinia i zaokraglenie — dokladnie ze wzorca
     formularza. Zadnej wlasnej wartosci: wzorzec jest jeden. */
  padding: 1.4rem 1.6rem;
  font-family: var(--bb-pismo);
  font-size: 1.7rem;
  line-height: 2.4rem;
  color: var(--bb-tekst);
  transition: border-color 0.15s, box-shadow 0.15s;
}

.bb-form textarea {
  resize: vertical;
  /* Nizsze na starcie — uzytkownik i tak moze je rozciagnac uchwytem,
     a wysokie puste pole niepotrzebnie rozpycha formularz.

     `height` obok `min-height` jest tu potrzebne, bo Contact Form 7 ustawia
     w znaczniku `rows="4"`, co daje wlasna wysokosc wynikajaca z liczby
     wierszy. Sam `min-height` by jej nie przebil. Uchwyt do rozciagania
     dziala dalej. */
  min-height: 10rem;
  height: 10rem;
}

/* Po klknieciu pole tylko PRZYCIEMNIA obramowanie.

   Wczesniej dokladalem `box-shadow: inset 0 0 0 1px #101010`, zeby
   obramowanie wygladalo na grubsze. Efekt byl taki, ze wokol pola pojawial
   sie twardy czarny kontur — opiekun nazwal go "dziwnym" i mial racje.
   Wystarczy zmiana koloru; zadnego outline, zadnego cienia. */
.bb-form input:focus,
.bb-form textarea:focus {
  outline: none;
  border-color: var(--bp-akcent);
  box-shadow: none;
}

/* Etykieta w spoczynku: lezy W POLU, jak zwykla podpowiedz.
   Wartosci przeniesione ze wskazanej inspiracji
   (brandperspective.pl/bezplatna-wycena): pozycja bezwzgledna,
   ten sam rozmiar co tekst pola, wysciolka 2px 5px. */
.bb-pole label {
  position: absolute;
  left: 1rem;
  top: 1.4rem;
  padding: 0 0.6rem;
  font-family: var(--bb-pismo);
  font-size: 1.7rem;
  font-weight: 400;
  line-height: 2.4rem;
  color: var(--bp-tekst-slabszy);
  /* Tlo etykiety jest biale JUZ W SPOCZYNKU - to ono robi wciecie
     w konturze, gdy etykieta na niego wjedzie. Przezroczyste dawalo
     napis przecinajacy kreske. */
  background: var(--bb-biel);
  pointer-events: none;
  transform-origin: left center;
  transition: transform 0.15s, color 0.15s;
}

/* Etykieta aktywna: wjezdza NA kontur i sie zmniejsza.

   Wczesniej tylko przeskakiwala w gore, bez zmiany rozmiaru - bralem to
   z innej strony. Wzorzec formularza robi jedno i drugie: przesuniecie
   o 2.3rem i skala 0.8. Obowiazuje wzorzec, nie tamta inspiracja. */
.bb-pole:focus-within label,
.bb-pole:has(input:not(:placeholder-shown)) label,
.bb-pole:has(textarea:not(:placeholder-shown)) label {
  transform: translateY(-2.3rem) scale(0.8);
  color: var(--bp-tekst-slabszy);
}

/* Kolor glowny dostaje WYLACZNIE etykieta pola z kursorem (spec. 1, F8).
   Pole wypelnione, bez kursora - etykieta zostaje w kolorze pobocznym. */
.bb-pole:focus-within label {
  color: var(--bp-akcent);
}

/* Gwiazdka pola wymaganego - w kolorze akcentu strony. Ze wzorca:
   to konwencja, ktora wszyscy rozumieja, i ma byc widoczna. */
.bb-pole label .wym {
  color: var(--bb-akcent);
}

/* Dopisek "(nieobowiazkowe)" przy telefonie.

   PULAPKA ZE WZORCA: samo wygaszenie nie wystarczy. Napis staje sie
   niewidoczny, ale nadal zajmuje szerokosc, a etykieta ma biale tlo -
   w konturze pola zostaje wtedy biala dziura. Trzeba ZWINAC jego
   szerokosc do zera, nie tylko go wygasic.

   Odstep przed nawiasem jest twarda spacja wewnatrz spanu: zwykla
   spacja przed elementem liniowo-blokowym zostaje przycieta i dopisek
   przykleja sie do nazwy pola. */
.bb-pole label .opcjonalne {
  display: inline-block;
  vertical-align: bottom;
  max-width: 20rem;
  overflow: hidden;
  white-space: nowrap;
  transition: max-width 0.15s, opacity 0.1s;
}

.bb-pole:focus-within label .opcjonalne,
.bb-pole:has(input:not(:placeholder-shown)) label .opcjonalne {
  max-width: 0;
  opacity: 0;
}

/* Placeholder jest spacja i ma pozostac niewidoczny. */
.bb-form input::placeholder,
.bb-form textarea::placeholder {
  color: transparent;
}

.bb-form input[type='submit'],
.bb-form .wpcf7-submit {
  /* Geometria ze wzorca: przycisk na CALA szerokosc formularza,
     odstep 2.4rem nad nim, wysciolka 1.7/3.2. Kolory i zaokraglenie
     z „Wygladu przyciskow" w Dostosuj (spec. 1, F7; spec. 2, M5). */
  display: block;
  background: var(--bp-btn-tlo);
  color: var(--bp-btn-napis);
  border: 1px solid var(--bp-btn-tlo);
  border-radius: var(--bp-btn-promien);
  margin-top: 2.4rem;
  padding: 1.7rem 3.2rem;
  font-family: var(--bb-pismo);
  letter-spacing: 0.01em;
  font-weight: 600;
  font-size: 1.7rem;
  cursor: pointer;
  width: 100%;
  transition: background 0.2s, color 0.2s;
}

.bb-form input[type='submit']:hover,
.bb-form .wpcf7-submit:hover {
  background: var(--bp-btn-tlo-hover);
  border-color: var(--bp-btn-tlo-hover);
  color: var(--bp-btn-napis-hover);
}

.bb-form .wpcf7-not-valid-tip {
  font-size: 1.3rem;
  color: var(--bb-blad);
  margin-top: 0.5rem;
  font-weight: 400;
}

.bb-form .wpcf7-response-output {
  border: 1px solid color-mix(in srgb, var(--bb-czern) 35%, transparent) !important;
  margin: 1.4rem 0 0 !important;
  padding: 1.2rem 1.4rem !important;
  font-size: 1.5rem;
}

/* Zgoda RODO - odstepy ze wzorca: 0.6rem nad nia (do tego 1.8rem
   odstepu pola wyzej, razem 2.4rem), a pod nia nic, bo odstep nad
   przyciskiem nalezy juz do przycisku. */
.bb-form .bb-zgoda {
  margin: 0.6rem 0 0;
}

.bb-form .bb-zgoda label {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 0.7rem;
  font-weight: 400;
  font-size: 1.4rem;
  line-height: 2rem;
  position: static;
  transform: none;
  color: var(--bp-tekst-slabszy);
  background: transparent;
  pointer-events: auto;
  padding: 0;
}

.bb-form .bb-zgoda .wpcf7-list-item {
  margin: 0;
}

.bb-form .bb-zgoda input[type='checkbox'] {
  /* Kwadracik ma stac przy PIERWSZYM wierszu tekstu, nie na srodku
     dwoch - dlatego rzad jest wyrownany do gory, a kwadracik schodzi
     o 0.2rem, zeby sie zgadzal z linia pisma. Ze wzorca. */
  margin: 0.2rem 0 0;
  flex: none;
  width: 1.8rem;
  height: 1.8rem;
  accent-color: var(--bp-akcent);
}

/* ==========================================================================
   11. STOPKA
   ========================================================================== */
.bb-stopka {
  background: var(--bb-czern);
  padding: 2.6rem 6.4rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2.4rem;
  flex-wrap: wrap;
  font-size: 1.4rem;
  color: color-mix(in srgb, var(--bb-biel) 50%, transparent);
}

.bb-stopka a {
  color: var(--bb-akcent);
  font-weight: 700;
}

.bb-stopka a:hover {
  color: var(--bb-biel);
}

/* ==========================================================================
   12. OKNA MODALNE I LIGHTBOX
   ========================================================================== */
.bb-modal {
  position: fixed;
  inset: 0;
  z-index: 90;
  background: color-mix(in srgb, var(--bb-smola) 74%, transparent);
  -webkit-backdrop-filter: blur(0.4rem);
  backdrop-filter: blur(0.4rem);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4rem;
}

.bb-modal[hidden] {
  display: none;
}

.bb-modal-foto {
  background: color-mix(in srgb, var(--bb-smola) 82%, transparent);
  -webkit-backdrop-filter: blur(0.6rem);
  backdrop-filter: blur(0.6rem);
  gap: 2.8rem;
}

.bb-modal-box {
  width: 62rem;
  max-width: 100%;
  max-height: 80vh;
  overflow: auto;
  background: var(--bb-biel);
  border: 1px solid var(--bb-ramka);
}

.bb-modal-box-waski {
  width: 56rem;
}

.bb-modal-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 2.4rem;
  padding: 2.6rem 3rem;
  border-bottom: 1px solid var(--bb-ramka);
}

.bb-modal-title {
  font-family: var(--bb-pismo-naglowkow);
  font-weight: 800;
  font-size: 2.6rem;
  letter-spacing: -0.02em;
  color: var(--bb-czern-ciepla);
}

.bb-modal-pod {
  margin-top: 0.6rem;
  font-size: 1.5rem;
  color: var(--bb-tekst-2);
}

.bb-modal-x {
  background: transparent;
  border: 0;
  cursor: pointer;
  font-family: var(--bb-ikony);
  font-size: 2.6rem;
  line-height: 1;
  color: var(--bb-tekst-2);
  padding: 0;
  flex: none;
}

.bb-modal-x:hover {
  color: var(--bb-tekst);
}

.bb-modal-body {
  padding: 0.8rem 3rem 2.6rem;
}

.bb-spec-row {
  display: flex;
  justify-content: space-between;
  gap: 2.4rem;
  padding: 1.4rem 0;
  border-bottom: 1px solid var(--bb-tlo-kafla);
  font-size: 1.6rem;
  color: var(--bb-tekst-2);
}

.bb-spec-row strong {
  color: var(--bb-czern-ciepla);
  text-align: right;
}

.bb-strzalka {
  flex: none;
  width: 5.6rem;
  height: 5.6rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background: color-mix(in srgb, var(--bb-biel) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--bb-biel) 30%, transparent);
  color: var(--bb-biel);
  cursor: pointer;
  font-family: var(--bb-ikony);
  font-size: 2.8rem;
  transition: background 0.2s, color 0.2s, border-color 0.2s;
}

.bb-strzalka:hover {
  background: var(--bb-akcent);
  color: var(--bb-tekst);
  border-color: var(--bb-akcent);
}

.bb-lb-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.6rem;
  min-width: 0;
}

.bb-lb-inner img {
  max-width: 78vw;
  max-height: 78vh;
  object-fit: contain;
  display: block;
  box-shadow: 0 40px 120px color-mix(in srgb, var(--bb-cien) 60%, transparent);
}

.bb-lb-stopka {
  display: flex;
  align-items: center;
  gap: 1.6rem;
  color: color-mix(in srgb, var(--bb-biel) 70%, transparent);
  font-size: 1.5rem;
}

.bb-btn-lb {
  font-family: var(--bb-pismo);
  font-size: 1.5rem;
  font-weight: 700;
  padding: 0.9rem 1.6rem;
  border: 1px solid color-mix(in srgb, var(--bb-biel) 30%, transparent);
  background: transparent;
  color: var(--bb-biel);
  cursor: pointer;
}

.bb-btn-lb:hover {
  background: var(--bb-biel);
  color: var(--bb-tekst);
}

body.bb-modal-otwarty {
  overflow: hidden;
}

/* ==========================================================================
   13. TELEFON I TABLET

   Projekt powstal na 1440 px. Ponizej rozkladamy siatki wedlug ustalen
   z projektu: 5 -> 2 kolumny, 4 -> 2, mozaika 4 -> 2, kontakt 2 -> 1,
   H1 okolo 36-40 px, nawigacja w rozwijanym menu.
   ========================================================================== */
@media (max-width: 1280px) {
  body.bb-page { --bb-naglowek: 9.9rem; }
  .bb-header { padding: 1.8rem 3.2rem; }
  .bb-nav { gap: 2.4rem; font-size: 1.6rem; }
  .bb-hero-tresc { padding: 3.6rem 3.2rem; }
  .bb-zaufanie-poz:first-child { padding-left: 3.2rem; }
  .bb-zaufanie-poz:last-child { padding-right: 3.2rem; }
  .bb-drogi, .bb-uslugi, .bb-proces, .bb-sprzet { padding-left: 3.2rem; padding-right: 3.2rem; }
  .bb-realizacje { padding-left: 3.2rem; padding-right: 3.2rem; }
  .bb-kontakt-lewo, .bb-kontakt-prawo { padding: 6.4rem 3.2rem 7rem; }
  .bb-stopka { padding: 2.6rem 3.2rem; }
  .bb-uslugi-siatka { grid-template-columns: repeat(3, 1fr); }
  .bb-sprzet-siatka { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 1024px) {
  .bb-nav,
  .bb-header-dane { display: none; }
  .bb-menu-przycisk { display: block; }

  /* Rozwijane menu na telefon */
  .bb-nav.bb-otwarte {
    display: flex;
    flex-direction: column;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--bb-czern);
    padding: 2rem 3.2rem 2.6rem;
    gap: 1.8rem;
    border-bottom: 1px solid color-mix(in srgb, var(--bb-biel) 12%, transparent);
  }

  .bb-nav.bb-otwarte a { color: var(--bb-biel); }

  /* WAGA SELEKTORA, TRZECI RAZ W TYM ARKUSZU.
     `body.bb-page.bb-przyklejony .bb-nav a` ma wage (0,3,1) i po cichu bilo
     regule wyzej (0,2,1) — po przewinieciu strony pozycje rozwinietego menu
     robily sie szare na czarnym tle panelu. Panel JEST czarny niezaleznie
     od tego, czy pasek naglowka zrobil sie bialy, wiec tekst ma byc bialy
     zawsze. Stad przedrostek, ktory wyrownuje rachunek. */
  body:is(.bb-page, .bb-podstrona).bb-przyklejony .bb-nav.bb-otwarte a { color: var(--bb-biel); }
  body:is(.bb-page, .bb-podstrona).bb-przyklejony .bb-nav.bb-otwarte a:hover,
  body:is(.bb-page, .bb-podstrona).bb-przyklejony .bb-nav.bb-otwarte a.bb-aktywny { color: var(--bb-akcent); }

  .bb-header { position: sticky; }

  /* RÓWNA WYSOKOSC PRZYCISKU WYCENY I HAMBURGERA.
     Wczesniej oba mialy tylko wysciolke i rozne rozmiary pisma, wiec
     przycisk wyceny byl wyrazniej wyzszy. Wysokosc wpisana wprost jest
     jedyna wersja, ktora sie nie rozjedzie przy zmianie napisu. */
  .bb-header-cta,
  body:is(.bb-page, .bb-podstrona) .bb-header-cta {
    height: 4.4rem;
    padding: 0 1.6rem;
    display: inline-flex;
    align-items: center;
    font-size: 1.4rem;
  }

  .bb-menu-przycisk {
    height: 4.4rem;
    padding: 0 1.2rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  .bb-hero, .bb-hero-wrap { min-height: 62rem; }
  .bb-hero-lead { font-size: 1.8rem; }
  .bb-h2 { font-size: 3.4rem; }
  .bb-uslugi .bb-h2, .bb-kontakt .bb-h2 { font-size: 3.4rem; }

  .bb-zaufanie { flex-wrap: wrap; }
  .bb-zaufanie-poz { flex: 1 1 50%; }
  .bb-zaufanie-poz:nth-child(2) { border-right: 0; }

  .bb-drogi-siatka { grid-template-columns: 1fr; }
  .bb-uslugi-siatka { grid-template-columns: repeat(2, 1fr); }
  .bb-sprzet-siatka { grid-template-columns: repeat(2, 1fr); }
  .bb-proces-siatka { grid-template-columns: repeat(2, 1fr); }
  .bb-mozaika { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 16rem; }
  .bb-kontakt { grid-template-columns: 1fr; }
  .bb-kontakt-prawo { border-left: 0; border-top: 1px solid color-mix(in srgb, var(--bb-czern) 20%, transparent); }
}

@media (max-width: 640px) {
  /* Pasek zawija sie tu na trzy rzedy, wiec sekcja startowa musi moc
     zejsc nizej, zeby caly pierwszy ekran nadal sie miescil. */
  .bb-hero { min-height: 38rem; }

  /* Na telefonie e-mail i telefon wracaja jeden pod drugim — dwa pola
     po polowie szerokosci sa tam nieklikalne. */
  .bb-pole-rzad { grid-template-columns: 1fr; }

  /* FILM MA SIE ODTWARZAC TAKZE NA TELEFONIE (polecenie opiekuna 2026-08-05).
     Wczesniej byl tu `display: none` — zalozenie z projektu, ze na telefonie
     wystarczy sama klatka. Zalozenie: filmu wszedzie.

     Znacznik ma juz wszystko, czego wymagaja przegladarki mobilne do
     samoczynnego odtwarzania: `muted`, `playsinline` i `autoplay`. Bez
     `playsinline` iOS otworzylby film na pelnym ekranie, bez `muted`
     nie odtworzylby go wcale.

     Czego i tak nie przeskoczymy: tryb oszczedzania energii w iOS blokuje
     samoczynne odtwarzanie niezaleznie od kodu. Wtedy widac plakat —
     i dlatego plakat zostaje. */
  .bb-hero-tresc { padding: 2.8rem 2rem; }
  .bb-hero-cta { flex-direction: column; align-items: stretch; }
  body.bb-page { --bb-naglowek: 7.5rem; }
  .bb-header { padding: 1.4rem 2rem; }
  .bb-logo img { height: 4.6rem; }
  /* PASEK ZAUFANIA NA TELEFONIE: jeden pod drugim, rowne wiersze,
     rozdzielone cienka kreska.

     Bez tego pozycje mialy rozna wysokosc (pierwsza ma duza liczbe
     i gwiazdki, reszta jedna linijke tekstu) i zlewaly sie w jeden
     pomaranczowy blok bez podzialu. */
  .bb-zaufanie-poz {
    flex: 1 1 100%;
    border-right: 0;
    padding: 1.6rem 2rem;
    min-height: 7.2rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
  .bb-zaufanie-poz + .bb-zaufanie-poz { border-top: 1px solid color-mix(in srgb, var(--bb-czern) 18%, transparent); }

  /* Pierwsza pozycja ma ocene, gwiazdki i podpis, wiec sama z siebie jest
     o polowe wyzsza od reszty (104 px kontra 65 px, zmierzone). Ukladamy
     ja w jednej linii - wtedy wszystkie wiersze maja rowna wysokosc,
     o co prosil opiekun, i nie trzeba rozpychac pozostalych do jej rozmiaru. */
  .bb-zaufanie-poz:first-child {
    flex-direction: row;
    align-items: center;
    gap: 1.2rem;
  }
  .bb-zaufanie-poz:first-child .bb-ocena { white-space: nowrap; }
  .bb-zaufanie-poz:first-child, .bb-zaufanie-poz:last-child { padding-left: 2rem; padding-right: 2rem; }
  .bb-drogi, .bb-uslugi, .bb-proces, .bb-sprzet, .bb-realizacje {
    padding-left: 2rem; padding-right: 2rem;
  }
  .bb-uslugi-siatka, .bb-sprzet-siatka, .bb-proces-siatka { grid-template-columns: 1fr; }
  .bb-mozaika { grid-template-columns: 1fr; grid-auto-rows: 20rem; }
  .bb-kafel:nth-child(1), .bb-kafel:nth-child(3), .bb-kafel:nth-child(5) {
    grid-column: auto; grid-row: auto;
  }
  .bb-kontakt-lewo, .bb-kontakt-prawo { padding: 4.8rem 2rem 5.4rem; }
  .bb-stopka { padding: 2.2rem 2rem; }
  .bb-modal { padding: 1.6rem; }
  .bb-modal-foto { gap: 0.8rem; }
  .bb-strzalka { width: 4.2rem; height: 4.2rem; font-size: 2.2rem; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .bb-kafel img { transition: none; }

  /* FILM ZOSTAJE WIDOCZNY TAKZE PRZY "OGRANICZ RUCH".
     Bylo tu `.bb-hero video { display: none }` i to jest NAJPEWNIEJSZY
     podejrzany w sprawie "na telefonie film sie nie laduje": ustawienie
     "Ogranicz ruch" / "Usun animacje" jest w telefonach wlaczane czesto,
     a wtedy ta jedna linijka chowala film, mimo ze wszystko inne dzialalo.

     Swiadomy kompromis: film jest wyciszony, w petli, bez ciec i blyskow —
     ryzyko dla osoby wrazliwej na ruch jest male, a Zalozenie: go
     na telefonie. Reszta regul ograniczajacych ruch zostaje. */
}

/* ==========================================================================
   SZEROKOSC TRESCI - WZOR WIAZACY (specyfikacja 2, M9).

   Pasy strony ida na cala szerokosc ekranu (tlo, film, pomaranczowe pasy),
   wiec kontener 140rem odwzorowuje boczna wysciolka: pol nadwyzki szerokosci
   ponad 140rem plus oddech (1/2/2/4/12/18rem ze style.css), nie mniej niz
   10 px. Procent liczy sie od szerokosci rodzica, czyli od ekranu bez paska
   przewijania - tak samo jak `.bp-tresc` motywu nadrzednego.
   Dwie kolumny kontaktu i pola paska zaufania sa elementami siatki, dla
   ktorych procent liczylby sie od polowy - tam szerokosc bierze sie
   z jednostek kontenera (`cqw`) pasa-rodzica.
   Krawedz tresci: 10 / 18 / 52,5 / 372,5 px przy 390 / 1024 / 1440 / 1920.
   ========================================================================== */
body:is(.bb-page, .bb-podstrona) {
  --bb-bok: max(10px, calc((100% - min(100%, 140rem)) / 2 + var(--global-content-edge-padding)));
  --bb-bok-pasa: max(10px, calc((100cqw - min(100cqw, 140rem)) / 2 + var(--global-content-edge-padding)));
}

.bb-zaufanie,
.bb-kontakt {
  container-type: inline-size;
}

.bb-header,
.bb-drogi,
.bb-uslugi,
.bb-proces,
.bb-sprzet,
.bb-realizacje,
.bb-stopka {
  padding-left: var(--bb-bok);
  padding-right: var(--bb-bok);
}

.bb-hero-tresc { padding-left: var(--bb-bok); }
.bb-zaufanie-poz:first-child { padding-left: var(--bb-bok-pasa); }
.bb-zaufanie-poz:last-child { padding-right: var(--bb-bok-pasa); }
.bb-kontakt-lewo { padding-left: var(--bb-bok-pasa); }
.bb-kontakt-prawo { padding-right: var(--bb-bok-pasa); }

@media (max-width: 1024px) {
  .bb-nav.bb-otwarte { padding-left: var(--bb-bok); padding-right: var(--bb-bok); }
  .bb-zaufanie-poz:nth-child(odd) { padding-left: var(--bb-bok-pasa); }
  .bb-zaufanie-poz:nth-child(even) { padding-right: var(--bb-bok-pasa); }
  .bb-kontakt-lewo,
  .bb-kontakt-prawo { padding-left: var(--bb-bok-pasa); padding-right: var(--bb-bok-pasa); }
}

@media (max-width: 640px) {
  .bb-hero-tresc { padding-right: var(--bb-bok); }
  .bb-zaufanie-poz,
  .bb-zaufanie-poz:first-child,
  .bb-zaufanie-poz:last-child { padding-left: var(--bb-bok-pasa); padding-right: var(--bb-bok-pasa); }
}

/* ==========================================================================
   ARKUSZE MOTYWU NADRZEDNEGO SA WCZYTANE (spec. 2, M7 - od wydania zgodnosci)

   Do tego wydania strona zdejmowala arkusze rodzica. Teraz je wczytuje -
   zmienne `--bp-*`, podstawa rem i okno zgody przychodza z motywu
   nadrzednego. Reset rodzica zmienial na tej stronie dokladnie cztery
   rzeczy w formularzu i tytule okna specyfikacji (pomiar wyliczonych stylow
   530 elementow przy 390 / 1024 / 1440 / 1920 px). Ponizsze reguly
   przywracaja obraz sprzed zmiany.
   ========================================================================== */
:is(.bb-page, .bb-podstrona) .bb-form .wpcf7-form {
  overflow: visible;
}

:is(.bb-page, .bb-podstrona) .bb-wyslij .wpcf7-submit {
  line-height: normal;
}

:is(.bb-page, .bb-podstrona) .bb-form .bp-formularz-telefon {
  margin-top: 1.6rem;
  font-size: 1.6rem;
  line-height: 1.4;
}

.bb-page .bb-modal-title {
  line-height: 1.5;
}

/* ==========================================================================
   NAGLOWEK, SEKCJA KONTAKTOWA I STOPKA NA KAZDYM INNYM WIDOKU
   (spec. 2, M20 - 404, polityka, podziekowanie, wyniki wyszukiwania,
   kazda podstrona)

   Te widoki maja klase `bb-podstrona`, a nie `bb-page` - zerowanie strony
   glownej zmieniloby tresc podstron (marginesy akapitow i naglowkow, kroj,
   tlo). Ponizej to samo zerowanie, zawezone do naglowka, sekcji kontaktowej
   i stopki. Wszystko w :where(), czyli z zerowa waga - ma ustawic punkt
   wyjscia (to, co na stronie glownej te elementy dziedzicza po `body`),
   a nie wygrywac z regulami klasowymi wyzej.
   ========================================================================== */
:where(body.bb-podstrona) {
  --bb-naglowek: 10.3rem;
}

@media (max-width: 1280px) {
  :where(body.bb-podstrona) { --bb-naglowek: 9.9rem; }
}

@media (max-width: 640px) {
  :where(body.bb-podstrona) { --bb-naglowek: 7.5rem; }
}

:where(body.bb-podstrona) :where(.bb-header, .bb-kontakt, .bb-stopka) {
  font-family: var(--bb-pismo-tresci);
  font-size: 1.6rem;
  line-height: 1.5;
  color: var(--bb-tekst);
  -webkit-font-smoothing: antialiased;
}

:where(body.bb-podstrona) :where(.bb-header, .bb-kontakt, .bb-stopka) :where(h1, h2, h3, p) {
  margin: 0;
  text-transform: none;
}

:where(body.bb-podstrona) :where(.bb-header, .bb-kontakt, .bb-stopka) a {
  color: inherit;
  text-decoration: none;
}

:where(body.bb-podstrona) :where(.bb-header, .bb-kontakt, .bb-stopka) img {
  max-width: 100%;
  border-radius: 0;
}

:where(body.bb-podstrona) :where(.bb-header, .bb-kontakt, .bb-stopka) button {
  font: inherit;
  border-radius: 0;
}

/* Na stronie glownej pod przezroczystym naglowkiem lezy ciemny film. Na
   podstronie filmu nie ma, wiec naglowek dostaje ciemne tlo - wyglada tak
   samo jak na starcie strony glownej (biale logo, biale zakladki), a po
   przewinieciu robi sie bialy tak jak tam (`bb-przyklejony` wygrywa waga). */
:where(body.bb-podstrona) .bb-header {
  background: var(--bb-czern);
}