/* Kroje pisma z własnego serwera. Wygenerowane przez
   tools/fonty-lokalne.py, nie poprawiaj ręcznie.
   Rodziny 'X zapasowy' mają miary policzone z POMIARU w przeglądarce,
   osobno dla grubości lekkiej i pogrubionej, żeby zajmowały tyle samo
   miejsca co krój właściwy. Podmiana po wczytaniu nie rusza układu.  */
@font-face {
  font-family: 'Outfit';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(../fonts/outfit-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Outfit';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(../fonts/outfit-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Outfit zapasowy';
  font-weight: 1 600;
  src: local('Arial'), local('Helvetica'), local('Liberation Sans');
  size-adjust: 97.81%;
  ascent-override: 102.24%;
  descent-override: 26.58%;
  line-gap-override: 0.0%;
}

@font-face {
  font-family: 'Outfit zapasowy';
  font-weight: 601 1000;
  src: local('Arial Bold'), local('Helvetica Bold'), local('Liberation Sans Bold'), local('Arial');
  size-adjust: 95.13%;
  ascent-override: 105.12%;
  descent-override: 27.33%;
  line-gap-override: 0.0%;
}

/* ==========================================================================
   BM-Architekci — arkusz glowny
   Estetyka: Studio Clean, poziom 5
   Kolor akcentu pochodzi z sygnetu klienta (#ff6500).
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tokeny
   -------------------------------------------------------------------------- */

:root {
  /* Kolory. Wartosci HEX sa zrodlem prawdy — OKLCH w komentarzu dla orientacji. */
  /* Granatowo-grafitowa czern zamiast czystej — cieplejsza i glebsza.
     Proporcje przejete ze wzorca jakosci (arlek.pl). */
  --ink:          #22201d;
  --ink-soft:     #2e2b27;
  --ink-mid:      #5c554c;   /* tekst drugorzedny, 7,4:1 na bieli */
  --paper:        #ffffff;
  /* Bez zamiast chlodnej szarosci — prosba klientki z 10.08.2026. */
  --paper-warm:   #f7f3ec;
  --paper-bez:    #efe7db;
  --gray:         #a09585;
  --gray-line:    #e6ddd0;   /* linia ozdobna, nie niesie znaczenia */
  /* Linia, ktora MOWI, gdzie konczy sie element: obrys pola formularza
     i przycisku obrysowego. WCAG 1.4.11 wymaga tu 3:1, bo bez tej linii
     nie widac, gdzie kliknac. Zmierzone: 3,85:1 na bieli, 3,48:1 na
     `--paper-warm`, 4,22:1 na `--ink` w stopce. Ozdobna `--gray-line` ma
     w tych samych miejscach 1,34:1 i to byl blad, nie decyzja. */
  --linia-mocna:  #8c8073;

  /* Pomarancz z sygnetu bm.
     ZAKAZ wynikajacy z pomiaru: #ff6500 na bieli daje 2,95:1 — nie moze byc
     kolorem liter na jasnym tle. Do wypelnien tak, do tekstu nie. */
  --accent:       #ff6500;
  /* Wypelnienie przyciskow. Pawel chce na nich bialy napis i biala ikone.
     Biel na #ff6500 to 2,95:1 — ponizej progu 4,50, wiec zamiast zmieniac
     tylko kolor liter, przyciemniamy samo pole. #c94300 to wciaz ten sam
     pomaranczowy ze znaku, a biel na nim daje 4,90:1. Ustalone 12.08.2026. */
  --accent-btn:   #c94300;
  /* Litery akcentowe na jasnym tle. #c24a00 dawalo 4,91:1 na czystej bieli,
     ale tylko 4,48:1 na cieplym tle sekcji (#f6f4f2) — ponizej progu.
     #b84600: 5,37:1 na bieli, 4,89:1 na #f6f4f2. */
  --accent-ink:   #b84600;
  --accent-dark:  #e05a00;

  --focus:        #0b57d0;   /* obrys ogniskowania, widoczny na obu tlach */

  /* Szerokosci tresci. Zero ograniczen w `ch` na tekscie — tekst dziedziczy
     szerokosc kontenera. */
  --w-content: clamp(20rem, 92vw, 68rem);
  --w-wide:    clamp(20rem, 94vw, 82rem);

  /* Odstepy poziome */
  --px-mobile:  1.25rem;
  --px-tablet:  2rem;
  --px-desktop: clamp(2rem, 5vw, 4.5rem);

  /* Odstepy pionowe sekcji */
  /* Trzy odstepy pionowe. Kazda sekcja bierze jeden z nich,
     gora i dol zawsze takie same. */
  --section-sm: clamp(1.75rem, 3vw, 2.5rem);   /* 28 -> 40 */
  --section-md: clamp(2.5rem, 4vw, 3.5rem);    /* 40 -> 56 */
  --section-lg: clamp(3rem, 5vw, 4.5rem);      /* 48 -> 72 */

  /* Siatka 8 px */
  /* Pol kroku siatki. Nie kazdy odstep da sie sensownie zaokraglic do 4 px:
     przerwa miedzy gwiazdkami oceny albo miedzy etykieta a wartoscia to
     korekta optyczna, a nie rytm ukladu. Zamiast wpisywac `2px` w pieciu
     miejscach, mamy jeden token i wiadomo, ze to decyzja. */
  /* Barwa bledu. Do 25.08.2026 `#b3261e` bylo wpisane wprost w czterech
     miejscach; jeden token znaczy, ze zmiana odcienia to jedna linia. */
  --blad: #b3261e;

  --space-05: 0.125rem;
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;

  /* Typografia — jedna rodzina zmienna, kontrast budujemy grubosciami.
     Pliki leza u nas (assets/fonts), nie u Google. Rodzina zapasowa ma miary
     policzone z pomiaru w przegladarce, wiec podmiana nie rusza ukladu. */
  --font-display: 'Outfit', 'Outfit zapasowy', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --font: 'Outfit', 'Outfit zapasowy', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;

  /* Skala modularna, krok 1,25. Osiem stopni na cala strone.
     Zaden element nie definiuje wlasnego `clamp()` — pomiar wykazal, ze
     wlasnie to rozbilo strone na dwanascie roznych stopni pisma. */
  --fs-mega:  clamp(1.875rem, 1.50rem + 1.65vw, 2.75rem);  /* 30 -> 44 */
  --fs-h1:    clamp(1.625rem, 1.38rem + 1.05vw, 2.25rem);  /* 26 -> 36 */
  --fs-h2:    clamp(1.4375rem, 1.28rem + 0.70vw, 1.875rem);/* 23 -> 30 */
  --fs-h3:    clamp(1.125rem, 1.06rem + 0.30vw, 1.3125rem);/* 18 -> 21 */
  --fs-h4:    1.0625rem;                                    /* 17 */
  --fs-lead:  clamp(1rem, 0.97rem + 0.16vw, 1.125rem);      /* 16 -> 18 */
  --fs-body:  1rem;                                         /* 16 */
  --fs-small: 0.9375rem;                                    /* 15 */
  --fs-micro: 0.75rem;                                      /* 12 */

  /* Trzy grubosci. Nic poza nimi. */
  /* Przygaszona biel na ciemnym tle. JEDNA wartosc, nie piec.
     Do 25.08.2026 bylo 0,68 / 0,78 / 0,82 / 0,86 / 0,88 w piaciu miejscach:
     kontrast od 8,19:1 do 12,78:1, czyli roznica niewidoczna golym okiem,
     a zestaw barw tekstu na stronie urosl do trzynastu. */
  --biel-mid:  rgba(255, 255, 255, 0.82);   /* 11,28:1 na --ink */

  --w-zwykla: 400;
  --w-srednia: 600;
  --w-mocna: 700;

  /* Trzy interlinie. */
  --lh-ciasna: 1.12;   /* naglowki */
  --lh-srednia: 1.45;  /* leady, podpisy */
  --lh-luzna: 1.7;     /* akapity */

  /* Ruch */
  --ease:      cubic-bezier(0.22, 1, 0.36, 1);
  --ease-out:  cubic-bezier(0.16, 1, 0.3, 1);
  /* Piec czasow na cala strone i ani jednej wartosci wpisanej wprost
     w regule. Przed uporzadkowaniem 25.08.2026 bylo ich szesc rozsianych
     po arkuszu: 160, 260, 520, 600, 620, 640, 700, 760 i 900 ms.
     Rozne czasy dla tej samej rzeczy (powiekszenie zdjecia pod kursorem
     600 ms w galerii, 900 ms w kaflu) widac jako niespojnosc, nawet gdy
     nikt nie potrafi jej nazwac. */
  --dur-fast:    160ms;   /* drobny ruch: ikona, przesuniecie o piksel */
  --dur-base:    260ms;   /* barwa, obrys, cien pod kursorem i przy fokusie */
  --dur-slow:    520ms;   /* otwieranie, zwijanie, zmiana ukladu */
  --dur-wejscie: 640ms;   /* wejscie sekcji i kafli przy przewijaniu */
  --dur-obraz:   900ms;   /* powolne powiekszenie zdjecia pod kursorem */
  --opoznienie-1: 300ms;  /* kolejnosc wejsc: drugi element */
  --opoznienie-2: 380ms;  /* trzeci element */

  /* Lagodne zaokraglenia i miekkie cienie zamiast ostrych ramek —
     strona ma byc przyjazna dla klienta, nie surowa. */
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 16px;
  /* Dwa promienie spoza skali kart, kazdy z wlasnym powodem:
     `--r-xs` to drobiazgi wielkosci kilku pikseli (paski hamburgera,
     kropka nadtytulu), `--r-kolo` to ksztalt okragly. Bez tokenow
     leżały jako `2px` i `50%` w szesciu miejscach. */
  /* Poswiata wokol pola, ktore ma fokus albo blad. Jedna grubosc (3 px),
     ta sama co obrys `:focus-visible`, wiec oba stany wygladaja jak jeden
     system, a nie dwa pomysly. */
  --ring-akcent: 0 0 0 3px rgba(255, 101, 0, 0.18);
  --ring-blad:   0 0 0 3px rgba(179, 38, 30, 0.14);

  --r-xs: 2px;
  --r-kolo: 50%;
  --cien-sm: 0 1px 2px rgba(16, 24, 40, 0.05);
  --cien-md: 0 6px 20px -6px rgba(16, 24, 40, 0.10), 0 2px 6px rgba(16, 24, 40, 0.04);
  --cien-lg: 0 22px 48px -18px rgba(16, 24, 40, 0.20), 0 4px 12px rgba(16, 24, 40, 0.05);

  --header-h: 106px;
  --h-ciastek: 0px;
}

@media (min-width: 1024px) {
  :root { --header-h: 116px; }
}

/* --------------------------------------------------------------------------
   2. Reset i podstawy
   -------------------------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }

/* <picture> nie tworzy wlasnego pudelka.
   Owijanie zdjec w <picture> (AVIF/WebP, patrz inc/obrazy.php) wstawia nowego
   rodzica miedzy kafel a obraz. Reguly typu `.bm-mozaika__kafel img { height:
   100% }` liczyly wtedy wysokosc wzgledem <picture>, ktore jest elementem
   liniowym o wysokosci automatycznej: kafle mozaiki przestaly wypelniac swoje
   miejsce, a najechanie kursorem przestalo cokolwiek zmieniac. Zmierzone
   audytem 25.08.2026, 19 elementow "hover nic nie zmienia".
   `display: contents` usuwa to pudelko z ukladu, wiec caly dotychczasowy CSS
   dziala tak jak przed zmiana. */
picture { display: contents; }

* { margin: 0; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 1rem);
}

body {
  font-family: var(--font);
  font-size: var(--fs-body);
  font-weight: var(--w-zwykla);
  line-height: var(--lh-luzna);
  color: var(--ink-soft);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* clip zamiast hidden — hidden na body robi z niego kontener przewijania
     i psuje position:sticky w srodku */
  overflow-x: clip;
}

img, picture, svg, video {
  display: block;
  max-width: 100%;
  height: auto;
}

input, button, textarea, select { font: inherit; color: inherit; }

button { cursor: pointer; background: none; border: none; padding: 0; }

a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 0.22em; }

h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: var(--w-srednia);
  line-height: var(--lh-ciasna);
  letter-spacing: -0.03em;
  text-wrap: balance;
  color: var(--ink);
}

h4, h5, h6 {
  font-family: var(--font);
  font-weight: var(--w-mocna);
  line-height: var(--lh-ciasna);
  letter-spacing: -0.015em;
  text-wrap: balance;
  color: var(--ink);
}

h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); line-height: var(--lh-ciasna); }
h4 { font-size: var(--fs-h4); }

/* Kursywa szeryfowa jako akcent w naglowku — jedyna ozdoba w projekcie */
.bm-kursywa { color: var(--accent-ink); }

p { text-wrap: pretty; }

:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 3px;
  border-radius: var(--r-xs);
}

::selection { background: var(--accent); color: var(--ink); }

/* --------------------------------------------------------------------------
   3. Uklad
   -------------------------------------------------------------------------- */

.bm-container {
  width: 100%;
  max-width: var(--w-content);
  margin-inline: auto;
  padding-inline: var(--px-mobile);
}

.bm-container--wide { max-width: var(--w-wide); }
.bm-container--full { max-width: 100%; padding-inline: 0; }

@media (min-width: 768px)  { .bm-container { padding-inline: var(--px-tablet); } }
@media (min-width: 1200px) { .bm-container { padding-inline: var(--px-desktop); } }

.bm-section { padding-block: var(--section-md); }
.bm-odstep-gora { margin-top: var(--section-md); }

/* Klasy zamiast wartosci wpisywanych wprost w szablony — inaczej skala
   rozjezdza sie przy kazdej drobnej zmianie. */
.bm-adres {
  font-style: normal;
  line-height: var(--lh-luzna);
}
.bm-dana__tresc--zwykla { font-weight: var(--w-srednia); }
.bm-dana__wartosc {
  margin: 0;
  font-weight: var(--w-srednia);
  color: var(--ink);
}
.bm-section--lg { padding-block: var(--section-lg); }
.bm-section--sm { padding-block: var(--section-sm); }
.bm-section--warm { background: var(--paper-warm); }
.bm-section--dark { background: var(--ink); color: #efefef; }
.bm-section--dark h1,
.bm-section--dark h2,
.bm-section--dark h3,
.bm-section--dark h4 { color: #fff; }
/* Kafelki wewnatrz ciemnej sekcji maja jasne tlo, wiec ich naglowki
   musza wrocic do ciemnego. Bez tego tytul jest bialy na bialym
   i po prostu znika — pomiar tego nie widzi, bo tekst w kodzie jest. */
.bm-section--dark .bm-etap__tytul,
.bm-section--dark .bm-filar__tytul,
.bm-section--dark .bm-karta-form h1,
.bm-section--dark .bm-karta-form h2,
.bm-section--dark .bm-karta-form h3,
.bm-section--dark .bm-karta-form h4 { color: var(--ink); }

.bm-skip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 1000;
  background: var(--ink);
  color: #fff;
  padding: var(--space-3) var(--space-5);
}
.bm-skip:focus { left: var(--space-4); top: var(--space-4); }

/* Etykieta sekcji — mala, rozstrzelona, z pomaranczowa kreska */
.bm-naglowek-sekcji {
  text-align: center;
  margin-inline: auto;
  margin-bottom: clamp(1.75rem, 3.5vw, 2.75rem);
}
.bm-naglowek-sekcji .bm-eyebrow { justify-content: center; margin-bottom: var(--space-3); }
.bm-naglowek-sekcji__opis {
  margin-top: var(--space-4);
  font-size: var(--fs-lead);
  color: var(--ink-mid);
}

.bm-eyebrow {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-size: var(--fs-micro);
  font-weight: var(--w-srednia);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-mid);
  margin-bottom: var(--space-5);
}
.bm-eyebrow::before {
  content: '';
  width: 7px;
  height: 7px;
  border-radius: var(--r-kolo);
  background: var(--accent);
  flex: none;
}
.bm-section--dark .bm-eyebrow { color: var(--gray); }
/* Opis pod naglowkiem sekcji dziedziczyl `--ink-mid` — ciemnoszare litery,
   ktore na ciemnym tle dawaly 2,21:1 przy progu 4,50. Widoczne golym okiem,
   niewidoczne dla audytu, bo ten sprawdzal wtedy tylko wybrane klasy. */
.bm-section--dark .bm-naglowek-sekcji__opis { color: var(--biel-mid); }
/* Okruszek nawigacji bywa odnosnikiem — musi miec pelne pole dotyku */
.bm-eyebrow a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  text-decoration: none;
  color: inherit;
}
.bm-eyebrow a:hover { color: var(--accent-ink); }

/* --------------------------------------------------------------------------
   4. Przyciski
   -------------------------------------------------------------------------- */

.bm-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  min-height: 46px;          /* ponad progiem pola dotyku 44 px */
  padding: var(--space-2) var(--space-6);
  font-size: var(--fs-small);
  font-weight: var(--w-mocna);
  letter-spacing: 0.02em;
  text-decoration: none;
  border: 1.5px solid var(--ink);
  border-radius: var(--r-sm);
  background: var(--ink);
  color: #fff;
  transition: background var(--dur-base) var(--ease),
              color var(--dur-base) var(--ease),
              border-color var(--dur-base) var(--ease),
              transform var(--dur-fast) var(--ease);
}
.bm-btn:hover,
.bm-btn:focus-visible {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--ink);         /* czarny na pomaranczowym = 6,40:1 */
  transform: translateY(-2px);
}
.bm-btn .bm-icon { transition: transform var(--dur-base) var(--ease); }
.bm-btn:hover .bm-icon { transform: translateX(4px); }

.bm-btn--sm {
  min-height: 44px;
  padding: var(--space-2) var(--space-5);
  font-size: var(--fs-small);
}

.bm-btn--ghost {
  background: transparent;
  color: var(--ink);
}
.bm-btn--ghost:hover,
.bm-btn--ghost:focus-visible {
  background: var(--ink);
  border-color: var(--ink);
  color: #fff;
}

.bm-btn--light {
  background: transparent;
  border-color: var(--linia-mocna);
  color: var(--ink);
}
.bm-btn--light:hover,
.bm-btn--light:focus-visible {
  background: var(--ink);
  border-color: var(--ink);
  color: #fff;
}
/* w jasnej stopce ten sam wariant musi byc ciemny */
.bm-footer .bm-btn--light {
  background: var(--ink);
  border-color: var(--ink);
  color: #fff;
}
.bm-btn--light:hover,
.bm-btn--light:focus-visible {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--ink);
}

/* Odnosnik tekstowy z podkresleniem rosnacym od lewej */
.bm-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 44px;           /* prog pola dotyku; audyt lapal 31 px */
  font-weight: var(--w-srednia);
  color: var(--accent-ink);   /* 4,91:1 na bieli */
  text-decoration: none;
  position: relative;
  padding-block: var(--space-2);
}
.bm-link::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 2px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dur-base) var(--ease);
}
.bm-link:hover::after,
.bm-link:focus-visible::after { transform: scaleX(1); }
.bm-section--dark .bm-link { color: var(--accent); } /* 6,40:1 na czerni */

/* Powrot do listy realizacji. Wczesniej mial styl w atrybucie i zadnej
   reakcji na najazd — `stany.py` slusznie to zglaszal. */
.bm-wroc { color: inherit; text-decoration: none; }
.bm-wroc:hover,
.bm-wroc:focus-visible { color: var(--accent-ink); text-decoration: underline; text-underline-offset: 3px; }

/* --------------------------------------------------------------------------
   5. Naglowek strony
   -------------------------------------------------------------------------- */

.bm-header {
  position: fixed;
  inset-inline: 0;
  top: 0;
  z-index: 100;
  background: var(--paper);
  box-shadow: 0 1px 0 var(--gray-line);
  transition: box-shadow var(--dur-base) var(--ease);
}
.bm-header.is-scrolled { box-shadow: var(--cien-md); }

/* --- pasek gorny --- */
.bm-pasek {
  background: var(--ink);
  color: var(--biel-mid);
  font-size: var(--fs-micro);
}
.bm-pasek__inner {
  max-width: var(--w-wide);
  margin-inline: auto;
  padding: 0 var(--px-mobile);
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-6);
}
@media (min-width: 768px)  { .bm-pasek__inner { padding-inline: var(--px-tablet); } }
@media (min-width: 1200px) { .bm-pasek__inner { padding-inline: var(--px-desktop); } }

.bm-pasek__haslo { margin: 0; letter-spacing: 0.02em; }
@media (max-width: 767px) { .bm-pasek__haslo { display: none; } }

.bm-pasek__kontakt {
  display: flex;
  align-items: center;
  gap: var(--space-6);
  margin-left: auto;
}
.bm-pasek__kontakt a {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 44px;
  color: var(--biel-mid);
  text-decoration: none;
  transition: color var(--dur-base) var(--ease);
}
.bm-pasek__kontakt a:hover { color: var(--accent); }
.bm-pasek__kontakt strong { color: #fff; font-weight: var(--w-srednia); }

/* Kazda architektka to jedna grupa: adres i numer trzymaja sie razem,
   wiec przy zawijaniu nie rozjezdzaja sie na dwa konce paska. */
.bm-pasek__osoba {
  display: inline-flex;
  align-items: center;
  gap: var(--space-4);
}

/* Im wezszy ekran, tym mniej danych — kolejno znika adres drugiej osoby,
   potem cala druga osoba, na koncu adres pierwszej. Numer zostaje zawsze,
   bo to jedyny kontakt, ktory da sie wykonac jednym tapnieciem. */
@media (max-width: 1199px) {
  .bm-pasek__osoba:nth-child(2) a[href^="mailto:"] { display: none; }
}
@media (max-width: 900px) {
  .bm-pasek__osoba:nth-child(2) { display: none; }
}
@media (max-width: 560px) {
  .bm-pasek__osoba a[href^="mailto:"] { display: none; }
}

/* --- pasek nawigacji --- */
.bm-nawig__inner {
  max-width: var(--w-wide);
  margin-inline: auto;
  padding: 0 var(--px-mobile);
  min-height: 66px;
  display: flex;
  align-items: center;
  gap: var(--space-5);
}
/* Na duzych ekranach: znak po lewej, menu dokladnie na srodku, przycisk
   po prawej. Boczne kolumny maja te sama szerokosc, wiec menu stoi
   w osi strony, a nie „gdzies obok logo”. */
@media (min-width: 1100px) {
  .bm-nawig__inner {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: var(--space-6);
  }
  .bm-nawig__inner > .bm-logo { justify-self: start; }
  .bm-nawig__inner > .bm-nav  { justify-self: center; }
  .bm-nawig__inner > .bm-nawig__cta { justify-self: end; }
}
@media (min-width: 768px)  { .bm-nawig__inner { padding-inline: var(--px-tablet); } }
@media (min-width: 1200px) { .bm-nawig__inner { padding-inline: var(--px-desktop); min-height: 72px; } }

.bm-nawig__cta { display: none; }
@media (min-width: 1100px) { .bm-nawig__cta { display: inline-flex; } }

/* --- znak firmowy: czytelny, ale nie dominujacy --- */
.bm-logo {
  display: inline-flex;
  align-items: center;
  /* 8 px, nie 9. Roznica jest niewidoczna, a wartosc spoza siatki widac
     w audycie spojnosci i po pol roku nikt nie pamieta, czy 0,55rem bylo
     decyzja, czy literowka. */
  gap: var(--space-2);
  min-height: 48px;
  text-decoration: none;
  flex: none;
  transition: opacity var(--dur-base) var(--ease);
}
/* Znak jest odnosnikiem do strony glownej, wiec musi dawac znac, ze da sie
   w niego kliknac. `stany.py` zglaszal brak reakcji. Delikatnie, bo to znak
   firmowy klienta, a nie przycisk. */
.bm-logo:hover,
.bm-logo:focus-visible { opacity: 0.72; }
.bm-logo__sygnet {
  width: auto;
  height: clamp(19px, 1.6vw, 22px);
  flex: none;
}
.bm-logo__napis {
  width: auto;
  height: clamp(36px, 3vw, 46px);
  flex: none;
}
.bm-logo__napis--jasny { display: none; }

/* --- pozycje menu --- */
.bm-nav { display: none; }
@media (min-width: 1024px) {
  .bm-nav { display: flex; align-items: center; margin-left: var(--space-6); }
}
@media (min-width: 1100px) { .bm-nav { margin-left: 0; } }
.bm-nav__list {
  display: flex;
  align-items: center;
  gap: var(--space-8);
  list-style: none;
  padding: 0;
  margin: 0;
}
.bm-nav__link {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding-inline: var(--space-2);
  font-size: var(--fs-small);
  font-weight: var(--w-srednia);
  letter-spacing: 0.01em;
  text-decoration: none;
  color: var(--ink-soft);
  transition: color var(--dur-base) var(--ease);
}
.bm-nav__link::after {
  content: '';
  position: absolute;
  left: var(--space-2);
  right: var(--space-2);
  bottom: 12px;
  height: 2px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dur-base) var(--ease);
}
.bm-nav__link:hover,
.bm-nav__link:focus-visible { color: var(--accent-ink); }
.bm-nav__link:hover::after,
.bm-nav__link:focus-visible::after,
.bm-nav__item.is-active .bm-nav__link::after { transform: scaleX(1); }
.bm-nav__item.is-active .bm-nav__link { color: var(--ink); font-weight: var(--w-srednia); }
/* Pozycja biezacej strony ma juz kolor `--ink` i podkreslenie, wiec zwykla
   regula najazdu niczego przy niej nie zmieniala. Nadal jest odnosnikiem
   i nadal ma potwierdzac najechanie. */
.bm-nav__item.is-active .bm-nav__link:hover,
.bm-nav__item.is-active .bm-nav__link:focus-visible { color: var(--accent-ink); }

/* --- przycisk menu na male ekrany --- */
.bm-burger {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: var(--space-1);
  width: 48px;
  height: 48px;
  margin-left: auto;
  margin-inline-end: -6px;
}
@media (min-width: 1024px) { .bm-burger { display: none; } }
.bm-burger__line {
  display: block;
  width: 24px;
  height: 2px;
  border-radius: var(--r-xs);
  background: var(--ink);
  transition: transform var(--dur-base) var(--ease),
              opacity var(--dur-fast) var(--ease);
}
.bm-burger[aria-expanded="true"] .bm-burger__line:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.bm-burger[aria-expanded="true"] .bm-burger__line:nth-child(2) { opacity: 0; }
.bm-burger[aria-expanded="true"] .bm-burger__line:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Menu pelnoekranowe */
.bm-mobile {
  position: fixed;
  inset: 0;
  z-index: 99;
  display: flex;
  flex-direction: column;
  justify-content: center;
  /* `center` w kontenerze, ktory sie przewija, ucina gore BEZPOWROTNIE:
     nadmiar wychodzi po rowno gora i dolem, a `scrollTop: 0` pokazuje juz
     srodek, wiec do poczatku listy nie da sie dojechac. Przy 320x568 px
     ginely w ten sposob dwie pierwsze pozycje menu. `safe center` centruje
     tylko wtedy, gdy jest miejsce, a przy ciasnocie zachowuje sie jak
     `flex-start`. Starsze przegladarki nie znaja tej wartosci i zostaja
     przy linii wyzej, dlatego obie deklaracje stoja obok siebie. */
  justify-content: safe center;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  background: var(--paper);
  padding: calc(var(--header-h) + var(--space-8)) var(--px-mobile) var(--space-12);
  /* Zamkniete menu wygaszamy, nie odsuwamy w bok.
     `translateX(100%)` na elemencie `fixed` o szerokosci ekranu wypycha prawa
     krawedz na 200% i strona daje sie przewijac w bok — audyt zlapal nadmiar
     95 px przy 320 px szerokosci. Wygaszanie nie zmienia szerokosci wcale. */
  opacity: 0;
  visibility: hidden;
  transform: translateY(-10px);
  transition: opacity var(--dur-base) var(--ease),
              transform var(--dur-base) var(--ease),
              visibility 0s linear var(--dur-base);
  overflow-y: auto;
}
.bm-mobile.is-open {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition: opacity var(--dur-base) var(--ease),
              transform var(--dur-base) var(--ease),
              visibility 0s;
}
@media (min-width: 1024px) { .bm-mobile { display: none; } }

.bm-mobile__list { list-style: none; margin: 0; padding: 0; }
.bm-mobile__item { border-bottom: 1px solid var(--gray-line); }
.bm-mobile__link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 64px;
  padding-block: var(--space-4);
  font-family: var(--font-display);
  font-size: var(--fs-h2);
  font-weight: var(--w-srednia);
  letter-spacing: -0.03em;
  text-decoration: none;
  color: var(--ink);
}
.bm-mobile__item.is-active .bm-mobile__link { color: var(--accent-ink); }
.bm-mobile__foot {
  margin-top: var(--space-10);
  display: grid;
  gap: var(--space-3);
  font-size: var(--fs-small);
}
.bm-mobile__foot a {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 44px;
  font-weight: var(--w-srednia);
  text-decoration: none;
}

/* Kazda architektka osobno: nazwisko, numer, adres. Bez nazwiska gosc nie
   wie, do kogo dzwoni, a numery obu pan stoja obok siebie. */
.bm-mobile__osoba {
  display: grid;
  gap: var(--space-05);
  padding-bottom: var(--space-3);
}
.bm-mobile__osoba + .bm-mobile__osoba {
  border-top: 1px solid var(--gray-line);
  padding-top: var(--space-3);
}
.bm-mobile__osoba-nazwa {
  margin: 0;
  font-size: var(--fs-micro);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-mid);
}

body.bm-menu-open { overflow: hidden; }

/* --------------------------------------------------------------------------
   6. Naglowek glowny strony (hero)
   -------------------------------------------------------------------------- */

.bm-hero {
  position: relative;
  padding-top: var(--header-h);
  background: var(--paper);
}

.bm-hero__grid {
  display: grid;
  gap: var(--space-8);
  align-items: center;
  padding-block: clamp(2rem, 4vw, 3.5rem);
}
@media (min-width: 1024px) {
  .bm-hero__grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
    gap: clamp(2rem, 4vw, 3.5rem);
  }
}

.bm-hero__title {
  margin-top: var(--space-4);
  font-family: var(--font-display);
  font-size: var(--fs-mega);
  font-weight: var(--w-srednia);
  line-height: var(--lh-ciasna);
  letter-spacing: -0.03em;
  color: var(--ink);
}
.bm-hero__title .bm-hero__line { display: block; overflow: hidden; }
.bm-hero__title .bm-hero__line > span {
  display: block;
  transform: translateY(102%);
  animation: bm-wjazd var(--dur-wejscie) var(--ease-out) forwards;
}
.bm-hero__title .bm-hero__line:nth-child(1) > span { animation-delay: 40ms; }
.bm-hero__title .bm-hero__line:nth-child(2) > span { animation-delay: 120ms; }
.bm-hero__title .bm-hero__line:nth-child(3) > span { animation-delay: 200ms; }

@keyframes bm-wjazd { to { transform: translateY(0); } }

.bm-hero .bm-kursywa { color: var(--accent-ink); }

.bm-hero__lead {
  margin-top: var(--space-5);
  font-size: var(--fs-lead);
  line-height: var(--lh-srednia);
  color: var(--ink-mid);
  opacity: 0;
  animation: bm-pojaw var(--dur-wejscie) var(--ease-out) var(--opoznienie-1) forwards;
}

@keyframes bm-pojaw {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

.bm-hero__akcje {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: var(--space-6);
  opacity: 0;
  animation: bm-pojaw var(--dur-wejscie) var(--ease-out) var(--opoznienie-2) forwards;
}

.bm-hero__tel {
  margin-top: var(--space-5);
  font-size: var(--fs-small);
  color: var(--ink-mid);
}
.bm-hero__tel a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--ink);
  font-weight: var(--w-srednia);
  text-decoration: none;
  box-shadow: inset 0 -1px 0 var(--gray-line);
}
.bm-hero__tel a:hover { color: var(--accent-ink); box-shadow: inset 0 -1px 0 var(--accent); }

/* --- Mozaika trzech realizacji zamiast jednego zdjecia ---
 *
 * Kafle sa poziome, bo poziome sa wszystkie zdjecia architektury. Pionowy
 * kafel przy `object-fit: cover` pokazuje cala wysokosc fotografii i wycina
 * z niej waski srodkowy pasek — na zdjeciu domow w Bieszczadach wypadal
 * dokladnie miedzy budynkami, czyli sam snieg. Zmierzone: kafel 0,74,
 * zdjecie 1,33, widoczne 56% szerokosci.
 */
.bm-mozaika {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-3);
}

.bm-mozaika__kafel {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: var(--r-md);
  background: var(--paper-warm);
  box-shadow: var(--cien-sm);
  text-decoration: none;
  opacity: 0;
  animation: bm-pojaw var(--dur-wejscie) var(--ease-out) forwards;
  transition: box-shadow var(--dur-slow) var(--ease),
              transform var(--dur-slow) var(--ease);
}
.bm-mozaika__kafel img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--dur-obraz) var(--ease);
}
.bm-mozaika__kafel:hover,
.bm-mozaika__kafel:focus-visible { box-shadow: var(--cien-lg); transform: translateY(-3px); }
.bm-mozaika__kafel:hover img,
.bm-mozaika__kafel:focus-visible img { transform: scale(1.06); }

/* Uklad: szeroki kafel na gorze, dwa mniejsze pod nim */
.bm-mozaika__kafel--1 {
  grid-column: 1 / -1;
  aspect-ratio: 16 / 9;
  animation-delay: 220ms;
}
.bm-mozaika__kafel--2 { aspect-ratio: 4 / 3; animation-delay: 320ms; }
.bm-mozaika__kafel--3 { aspect-ratio: 4 / 3; animation-delay: 400ms; }

/* Budynek na zdjeciu architektury lezy nad linia horyzontu, a pod nim jest
 * przedpole — droga, trawa, snieg. Kadr przesuniety w gore trzyma bryle
 * w ramce zamiast pokazywac sam pierwszy plan. */
.bm-mozaika__kafel--1 img { object-position: 50% 26%; }

.bm-mozaika__podpis {
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  padding: var(--space-6) var(--space-4) var(--space-3);
  font-size: var(--fs-small);
  font-weight: var(--w-srednia);
  color: #fff;
  background: linear-gradient(to top, rgba(10, 16, 24, 0.85), rgba(10, 16, 24, 0));
  opacity: 0;
  transition: opacity var(--dur-base) var(--ease);
}
.bm-mozaika__kafel--1 .bm-mozaika__podpis { opacity: 1; }
.bm-mozaika__kafel:hover .bm-mozaika__podpis,
.bm-mozaika__kafel:focus-visible .bm-mozaika__podpis { opacity: 1; }
@media (max-width: 599px) {
  .bm-mozaika__kafel--2 .bm-mozaika__podpis,
  .bm-mozaika__kafel--3 .bm-mozaika__podpis { display: none; }
}

/* Glowne wezwanie — bialy napis i biala ikona na pomaranczu.
 *
 * Biel na `#ff6500` daje 2,95:1 przy progu 4,50, wiec samo przemalowanie liter
 * zrobiloby przycisk gorzej czytelnym. Zamiast tego przyciemnione jest
 * wypelnienie: `#c94300` to nadal ten sam pomaranczowy ze znaku klienta,
 * a biel na nim ma **4,90:1**. Jasny `--accent` zostaje tam, gdzie nie ma
 * na nim tekstu: kropka przy nadtytule, kafelki ikon, akcenty w ciemnych
 * sekcjach. */
.bm-btn--akcent {
  background: var(--accent-btn);
  border-color: var(--accent-btn);
  color: #fff;
}
.bm-btn--akcent svg { color: #fff; }
.bm-btn--akcent:hover,
.bm-btn--akcent:focus-visible {
  background: var(--ink);
  border-color: var(--ink);
  color: #fff;
}

/* --- Ciemny pasek pod naglowkiem: przelamanie rytmu --- */
.bm-zaufanie {
  background: var(--ink);
  color: var(--biel-mid);
  padding-block: var(--space-8);
}
/* Kreska tylko miedzy pozycjami w tym samym rzedzie */
/* Komorki rownej wysokosci (`stretch`), tresc wysrodkowana w komorce.
 * Przy `align-items: start` pozycja z dwuliniowym opisem ustalala wysokosc
 * paska, a trzy jednoliniowe zostawaly przy gornej krawedzi — zmierzone
 * 32 px nad trescia i 54 px pod nia. Pasek byl wysrodkowany arytmetycznie
 * i przechylony optycznie. Przy okazji kreski miedzy pozycjami maja teraz
 * jednakowa wysokosc. */
.bm-zaufanie__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-6) var(--space-4);
  align-items: stretch;
}
/* Kolumny licza sie z pozycji, nie z zalozenia — dokladnie ten sam blad,
   ktory zostawil puste pole w „Zakresie projektu". Po usunieciu pozycji
   o nieruchomosciach zostaly trzy fakty i czterokolumnowa siatka zostawilaby
   dziure z prawej. 12.08.2026. */
@media (min-width: 1100px) {
  .bm-zaufanie__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-6); }
  .bm-zaufanie__grid:has(> :nth-child(4)) { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .bm-zaufanie__grid:has(> :nth-child(5)) { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}

.bm-zaufanie__poz {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--space-3);
  align-items: center;
}
@media (min-width: 1100px) {
  .bm-zaufanie__poz + .bm-zaufanie__poz {
    padding-left: var(--space-6);
    border-left: 1px solid rgba(255, 255, 255, 0.14);
  }
}

.bm-zaufanie__ikona {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: var(--r-sm);
  background: rgba(255, 255, 255, 0.08);
  color: var(--accent);
}
.bm-zaufanie__tresc { display: grid; grid-template-rows: auto auto; min-width: 0; }
.bm-zaufanie__liczba {
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  font-weight: var(--w-mocna);
  line-height: 1.1;
  color: #fff;
}
.bm-zaufanie__opis {
  font-size: var(--fs-small);
  line-height: var(--lh-srednia);
  color: var(--biel-mid);
  overflow-wrap: anywhere;
}

/* Pasek z liczbami pod naglowkiem */
.bm-fakty {
  background: var(--paper-warm);
  border-bottom: 1px solid var(--gray-line);
}
.bm-fakty__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
}
@media (min-width: 900px) { .bm-fakty__grid { grid-template-columns: repeat(4, 1fr); } }

.bm-fakt {
  padding: var(--space-8) var(--space-4) var(--space-8) 0;
  border-right: 1px solid var(--gray-line);
}
.bm-fakty__grid > .bm-fakt:nth-child(2n) { border-right: 0; }
@media (min-width: 900px) {
  .bm-fakty__grid > .bm-fakt:nth-child(2n) { border-right: 1px solid var(--gray-line); }
  .bm-fakty__grid > .bm-fakt:last-child { border-right: 0; }
}
.bm-fakt__liczba {
  font-family: var(--font-display);
  font-size: var(--fs-mega);
  font-weight: var(--w-srednia);
  letter-spacing: -0.035em;
  line-height: var(--lh-ciasna);
  color: var(--ink);
}
.bm-fakt__opis {
  margin-top: var(--space-2);
  font-size: var(--fs-small);
  color: var(--ink-mid);
  /* jednoliniowe opisy w siatce — inaczej kafelki maja rozna wysokosc */
  text-wrap: balance;
}

/* --------------------------------------------------------------------------
   7. Realizacje
   -------------------------------------------------------------------------- */

.bm-prace {
  display: grid;
  gap: var(--space-4);
  grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 800px) {
  .bm-prace { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-5); }
  /* Pierwsza praca zajmuje dwie kolumny i dwa rzedy — siatka dostaje rytm,
     a rzedy pozostaja pelne. */
  .bm-prace--z-wyroznieniem > .bm-praca--duza { grid-column: span 2; grid-row: span 2; }
}

.bm-praca {
  position: relative;
  display: block;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: var(--r-md);
  background: var(--paper-warm);
  text-decoration: none;
  color: #fff;
  box-shadow: var(--cien-sm);
  transition: box-shadow var(--dur-slow) var(--ease),
              transform var(--dur-slow) var(--ease);
}
@media (min-width: 800px) {
  .bm-praca--duza { aspect-ratio: auto; }
}
.bm-praca:hover,
.bm-praca:focus-visible {
  box-shadow: var(--cien-lg);
  transform: translateY(-3px);
}

.bm-praca__foto {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--dur-obraz) var(--ease);
}
.bm-praca:hover .bm-praca__foto,
.bm-praca:focus-visible .bm-praca__foto { transform: scale(1.05); }

/* Przyciemnienie tylko u dolu — zdjecie zostaje widoczne, a napis czytelny.
   Pomiar z pikseli, nie z CSS: najslabszy kafelek (Milanowek, jasne zdjecie)
   mial 4,49:1 przy progu 4,50 — dokladnie na granicy. Po wzmocnieniu gradientu
   najgorszy przypadek jest wyraznie powyzej. Narzedzie `stany.py` pokazuje tu
   1,11:1, bo czyta kolor z CSS i nie widzi przyciemnienia pod tekstem
   (pamiec: lekcja-kontrast-tekstu-na-zdjeciu). */
.bm-praca__zaslona {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgba(10, 16, 24, 0.94) 0%,
    rgba(10, 16, 24, 0.72) 30%,
    rgba(10, 16, 24, 0.16) 54%,
    rgba(10, 16, 24, 0) 72%
  );
  transition: opacity var(--dur-slow) var(--ease);
}
.bm-praca:hover .bm-praca__zaslona,
.bm-praca:focus-visible .bm-praca__zaslona { opacity: 0.94; }

.bm-praca__tresc {
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  padding: var(--space-5);
  gap: var(--space-05);
}
@media (min-width: 800px) {
  .bm-praca--duza .bm-praca__tresc { padding: var(--space-8); }
}

.bm-praca__nr {
  font-size: var(--fs-micro);
  font-weight: var(--w-mocna);
  letter-spacing: 0.16em;
  color: var(--accent);
  margin-bottom: var(--space-2);
}

.bm-praca__tytul {
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  font-weight: var(--w-srednia);
  line-height: var(--lh-ciasna);
  letter-spacing: -0.02em;
  color: #fff;
  overflow-wrap: anywhere;
}
@media (min-width: 800px) {
  .bm-praca--duza .bm-praca__tytul { font-size: var(--fs-h2); }
}

.bm-praca__opis {
  font-size: var(--fs-small);
  color: var(--biel-mid);
  margin-top: var(--space-1);
}

/* Wezwanie wjezdza dopiero przy najechaniu — na dotyku widoczne od razu,
   bo tam nie ma stanu najechania. */
.bm-praca__wiecej {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-3);
  font-size: var(--fs-small);
  font-weight: var(--w-srednia);
  color: var(--accent);
}
@media (hover: hover) {
  .bm-praca__wiecej {
    max-height: 0;
    opacity: 0;
    margin-top: 0;
    overflow: hidden;
    transition: max-height var(--dur-slow) var(--ease),
                opacity var(--dur-base) var(--ease),
                margin-top var(--dur-slow) var(--ease);
  }
  .bm-praca:hover .bm-praca__wiecej,
  .bm-praca:focus-visible .bm-praca__wiecej {
    max-height: 3rem;
    opacity: 1;
    margin-top: var(--space-3);
  }
}
.bm-praca:hover .bm-praca__wiecej .bm-icon,
.bm-praca:focus-visible .bm-praca__wiecej .bm-icon { transform: translateX(3px); }
.bm-praca__wiecej .bm-icon { transition: transform var(--dur-base) var(--ease); }

.bm-prace__stopka {
  margin-top: var(--space-10);
  text-align: center;
}

/* --------------------------------------------------------------------------
   8. Wielki tekst obok zdjecia
   -------------------------------------------------------------------------- */

/* --- O studiu: tekst szeroko, portret waski obok --- */
.bm-studio {
  display: grid;
  gap: var(--space-8);
}
/* Kolumna z tekstem szersza od poprzedniej wersji.
 *
 * Klientka prosi, zeby kazde zdanie w „O studiu" stalo w jednej linii.
 * Zmierzone przy poprzednim podziale 1,75fr / 1fr: kolumna prozy miala 703 px,
 * a dwa zdania potrzebuja 776 px i 886 px — lamaly sie mimo poprawnego
 * podzialu na zdania. Portret schodzi do stalych 300 px, co jest zgodne
 * z wczesniejsza uwaga Pawla („zdjecie mniejsze"). 16.08.2026. */
@media (min-width: 900px) {
  .bm-studio {
    grid-template-columns: minmax(0, 1fr) 240px;
    gap: clamp(1.5rem, 3vw, 2rem);
    align-items: start;
  }
}

.bm-studio__proza { margin-top: var(--space-5); color: var(--ink-mid); }
.bm-studio__proza p + p { margin-top: var(--space-4); }
.bm-studio__proza strong { color: var(--ink); font-weight: var(--w-srednia); }
.bm-studio__akcja { margin-top: var(--space-6); }

.bm-studio__bok {
  display: grid;
  gap: var(--space-6);
  justify-items: start;
}
/* Portret celowo niewielki — ma towarzyszyc tresci, nie z nia konkurowac */
.bm-studio__foto {
  margin: 0;
  width: min(100%, 260px);
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border-radius: var(--r-md);
  background: var(--paper);
  box-shadow: var(--cien-md);
}
.bm-studio__foto img { width: 100%; height: 100%; object-fit: cover; }

.bm-osoby { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-4); }
.bm-osoba { padding-left: var(--space-4); border-left: 2px solid var(--accent); }
.bm-osoba__imie {
  display: block;
  font-weight: var(--w-mocna);
  letter-spacing: -0.01em;
  color: var(--ink);
}
.bm-osoba__rola {
  display: block;
  font-size: var(--fs-small);
  color: var(--ink-mid);
}

/* --- Etapy: kafelki na siatce, numer jako znak w rogu --- */
.bm-etapy {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--space-4);
  grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 700px)  { .bm-etapy { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .bm-etapy { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-5); } }

.bm-etap {
  position: relative;
  padding: var(--space-8) var(--space-6) var(--space-6);
  border: 1px solid var(--gray-line);
  border-radius: var(--r-md);
  background: var(--paper);
  overflow: hidden;
  transition: border-color var(--dur-base) var(--ease),
              box-shadow var(--dur-base) var(--ease),
              transform var(--dur-base) var(--ease);
}
.bm-etap:hover {
  border-color: transparent;
  box-shadow: var(--cien-md);
  transform: translateY(-3px);
}
/* Numer jako duzy, jasny znak w rogu — porzadkuje, nie krzyczy */
.bm-etap__nr {
  position: absolute;
  top: var(--space-3);
  right: var(--space-4);
  font-family: var(--font-display);
  font-size: var(--fs-h1);
  font-weight: var(--w-mocna);
  line-height: 1;
  color: var(--gray-line);
  transition: color var(--dur-base) var(--ease);
  pointer-events: none;
}
.bm-etap:hover .bm-etap__nr { color: rgba(255, 101, 0, 0.3); }

.bm-etap__tytul {
  position: relative;
  font-family: var(--font);
  font-size: var(--fs-h4);
  font-weight: var(--w-mocna);
  letter-spacing: -0.015em;
  color: var(--ink);
  padding-right: var(--space-10);
}
.bm-etap__opis {
  margin-top: var(--space-3);
  font-size: var(--fs-small);
  color: var(--ink-mid);
}

/* --- Kontakt: formularz na karcie, dane i mapa w waskiej kolumnie --- */
.bm-kontakt { background: var(--paper-warm); }

.bm-kontakt__uklad { display: grid; gap: var(--space-6); }
@media (min-width: 900px) {
  .bm-kontakt__uklad {
    grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
    gap: var(--space-8);
    align-items: start;
  }
}

.bm-karta-form {
  padding: clamp(1.5rem, 3vw, 2.5rem);
  background: var(--paper);
  border: 1px solid var(--gray-line);
  border-radius: var(--r-lg);
  box-shadow: var(--cien-sm);
}

.bm-kontakt__bok { display: grid; gap: var(--space-6); align-content: start; }

.bm-dane { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-4); }
.bm-dana {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--space-3);
  align-items: start;
  padding: var(--space-4);
  background: var(--paper);
  border: 1px solid var(--gray-line);
  border-radius: var(--r-md);
  transition: border-color var(--dur-base) var(--ease),
              box-shadow var(--dur-base) var(--ease);
}
.bm-dana:hover { border-color: transparent; box-shadow: var(--cien-md); }
.bm-dana__ikona {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: var(--r-kolo);
  background: var(--paper-warm);
  color: var(--accent-ink);
}
.bm-dana__etykieta {
  display: block;
  font-size: var(--fs-micro);
  font-weight: var(--w-mocna);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-mid);
  margin-bottom: var(--space-05);
}
.bm-dana__wartosc {
  display: inline-flex;
  align-items: center;
  /* 44 px, bo to klikalny telefon i adres poczty na telefonie.
     Zmierzone 30 px — ponizej naszego progu. 12.08.2026. */
  min-height: 44px;
  font-weight: var(--w-srednia);
  color: var(--ink);
  text-decoration: none;
  overflow-wrap: anywhere;
}
a.bm-dana__wartosc:hover { color: var(--accent-ink); }

/* Ramka jednej osoby: nazwisko na gorze, pod nim telefon i adres poczty,
   kazdy w osobnym wierszu. Dwa odnosniki obok siebie w jednej linii
   zlewalyby sie w jeden ciag znakow. */
.bm-dana--osoba > span:last-child { display: grid; gap: var(--space-05); }
.bm-dana--osoba .bm-dana__wartosc { justify-self: start; }
.bm-dana__wartosc--mail {
  font-weight: var(--w-zwykla);
  color: var(--ink-mid);
}
a.bm-dana__wartosc--mail:hover { color: var(--accent-ink); }
.bm-dana__dodatek {
  display: block;
  margin-top: var(--space-1);
  font-size: var(--fs-small);
  color: var(--ink-mid);
}

/* Mapa mniejsza — do zorientowania sie w polozeniu, nie do planowania trasy */
.bm-mapa {
  border: 1px solid var(--gray-line);
  border-radius: var(--r-md);
  overflow: hidden;
  aspect-ratio: 4 / 3;
  background: var(--paper);
}
.bm-mapa iframe { width: 100%; height: 100%; border: 0; display: block; }
/* Mapa jest osiagalna klawiatura, ale nic tego nie pokazywalo — `macierz.py`
   zglaszala niewidoczny fokus na iframe.
   Obrys wisi na RAMCE i lapie `:focus-within`, nie na samym `iframe`.
   Zmierzone: po `iframe.focus()` `document.activeElement` wskazuje ramke,
   ale `iframe.matches(':focus')` zwraca **false** — fokus przechodzi do
   dokumentu wewnatrz ramki, wiec sam element nigdy nie pasuje do `:focus`
   ani `:focus-visible`. `:focus-within` na rodzicu pasuje i rysuje obrys. */
.bm-mapa:focus-within,
.bm-mapa-pas__ramka:focus-within {
  outline: 3px solid var(--accent-btn);
  outline-offset: -3px;
}

/* Formularz */
.bm-form { display: grid; gap: var(--space-4); }
.bm-form__rzad { display: grid; gap: var(--space-4); }
@media (min-width: 640px) { .bm-form__rzad { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.bm-pole { display: grid; gap: var(--space-2); }
.bm-pole__etykieta {
  font-size: var(--fs-small);
  font-weight: var(--w-srednia);
  color: var(--ink);
}
.bm-pole__wymagane { color: var(--accent-ink); }
.bm-pole input,
.bm-pole textarea {
  width: 100%;
  min-height: 48px;
  padding: var(--space-3) var(--space-4);
  font-size: 1rem;
  background: var(--paper);
  border: 1px solid var(--linia-mocna);
  border-radius: var(--r-sm);
  color: var(--ink);
  transition: border-color var(--dur-base) var(--ease),
              box-shadow var(--dur-base) var(--ease);
}
.bm-pole textarea { min-height: 132px; resize: vertical; }
.bm-pole input:hover,
.bm-pole textarea:hover { border-color: var(--gray); }
.bm-pole input:focus,
.bm-pole textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: var(--ring-akcent);
}
.bm-pole--blad input,
.bm-pole--blad textarea {
  border-color: var(--blad);
  box-shadow: var(--ring-blad);
}
.bm-pole__blad {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--fs-small);
  line-height: var(--lh-srednia);
  color: var(--blad);
}
.bm-pole__blad::before {
  content: "";
  flex: none;
  width: 6px;
  height: 6px;
  border-radius: var(--r-kolo);
  background: var(--blad);
}

.bm-zgoda {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--space-3);
  align-items: start;
  font-size: var(--fs-small);
  color: var(--ink-mid);
}
/* Zgoda: pole i akapit z bledem stoja w jednym `.bm-pole`, wiec komunikat
   laduje pod calym wierszem, a nie miedzy kwadratem a tekstem. */
.bm-pole--zgoda { display: grid; gap: var(--space-2); }

/* 24 px to minimum z WCAG 2.5.8. Caly `<label>` i tak jest polem klikalnym. */
.bm-zgoda input {
  width: 24px;
  height: 24px;
  /* `margin` i `padding` wprost, zeby nie zostac z domyslnymi wartosciami
     przegladarki (1-2 px, rozne w kazdej). */
  margin: var(--space-05) 0 0;
  padding: 0;
  accent-color: var(--accent);
}
.bm-zgoda a { color: var(--accent-ink); }

.bm-honey { position: absolute; left: -9999px; opacity: 0; height: 0; overflow: hidden; }

.bm-form__odpowiedz {
  padding: var(--space-4);
  border-radius: var(--r-sm);
  border-left: 3px solid var(--accent);
  background: var(--paper-warm);
  font-size: var(--fs-small);
}
.bm-form__odpowiedz--blad { border-left-color: var(--blad); }
.bm-form__odpowiedz[hidden] { display: none; }

/* --------------------------------------------------------------------------
   11. Galeria realizacji
   -------------------------------------------------------------------------- */

.bm-galeria {
  display: grid;
  gap: var(--space-4);
  grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 700px)  { .bm-galeria { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .bm-galeria { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.bm-galeria__poz {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: var(--r-md);
  background: var(--paper-warm);
  border: 0;
  padding: 0;
  cursor: zoom-in;
  box-shadow: var(--cien-sm);
}
.bm-galeria__poz img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--dur-obraz) var(--ease); }
.bm-galeria__poz {
  transition: outline-color var(--dur-base) var(--ease);
  outline: 3px solid transparent;
  outline-offset: -3px;
}
.bm-galeria__poz:hover,
.bm-galeria__poz:focus-visible { outline-color: var(--accent); }
.bm-galeria__poz:hover img,
.bm-galeria__poz:focus-visible img { transform: scale(1.05); }

/* Podglad zdjecia */
.bm-lightbox {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: grid;
  place-items: center;
  padding: var(--space-4);
  background: rgba(17, 17, 17, 0.95);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--dur-base) var(--ease), visibility 0s linear var(--dur-base);
}
.bm-lightbox.is-open { opacity: 1; visibility: visible; transition: opacity var(--dur-base) var(--ease), visibility 0s; }
/* `dvh`, nie `vh`: na iOS pasek adresu chowa sie przy przewijaniu i `vh`
   liczy sie wtedy od innej wysokosci niz ta, ktora widac. Zdjecie w oknie
   podgladu wychodzilo przez to poza ekran. `vh` zostaje jako zapas dla
   przegladarek sprzed 2022 roku. */
.bm-lightbox img {
  max-width: 100%;
  max-height: 86vh;
  max-height: 86dvh;
  width: auto;
  object-fit: contain;
}
.bm-lightbox__zamknij,
.bm-lightbox__nawig {
  position: absolute;
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  color: #fff;
  background: rgba(255, 255, 255, 0.1);
  transition: background var(--dur-base) var(--ease);
}
.bm-lightbox__zamknij:hover,
.bm-lightbox__nawig:hover { background: var(--accent); color: var(--ink); }
.bm-lightbox__zamknij { top: var(--space-4); right: var(--space-4); }
.bm-lightbox__nawig--wstecz { left: var(--space-4); top: 50%; transform: translateY(-50%); }
.bm-lightbox__nawig--dalej  { right: var(--space-4); top: 50%; transform: translateY(-50%); }
.bm-lightbox__licznik {
  position: absolute;
  bottom: var(--space-5);
  left: 50%;
  transform: translateX(-50%);
  color: #fff;
  font-size: var(--fs-small);
  font-variant-numeric: tabular-nums;
}

/* --------------------------------------------------------------------------
   12. Stopka
   -------------------------------------------------------------------------- */

.bm-footer {
  background: var(--paper-warm);
  color: var(--ink-mid);
  border-top: 1px solid var(--gray-line);
  padding-block: var(--section-md) var(--space-6);
}
.bm-footer__grid { display: grid; gap: var(--space-8); }
@media (min-width: 900px) {
  .bm-footer__grid { grid-template-columns: minmax(0, 5fr) minmax(0, 3fr) minmax(0, 4fr); gap: var(--space-8); }
}
.bm-footer__tytul {
  font-family: var(--font-display);
  font-size: var(--fs-h2);
  font-weight: var(--w-srednia);
  letter-spacing: -0.035em;
  color: var(--ink);
  line-height: var(--lh-ciasna);
}
.bm-footer__naglowek {
  font-size: var(--fs-micro);
  font-weight: var(--w-mocna);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-mid);
  margin-bottom: var(--space-4);
}
/* `:not(.bm-btn)` takze w regule spoczynkowej — bez tego `.bm-footer a`
   (0,1,1) bije `.bm-btn` (0,1,0) i napis na ciemnym przycisku robi sie
   ciemny, czyli nieczytelny. */
.bm-footer a:not(.bm-btn) { color: var(--ink-soft); text-decoration: none; overflow-wrap: anywhere; }
.bm-footer a { overflow-wrap: anywhere; }
/* Przyciski wykluczone: `.bm-footer a:hover` ma wyzsza specyficznosc niz
   `.bm-btn--light:hover`, wiec przejmowalo kolor liter i po najechaniu
   napis stawal sie pomaranczowy na pomaranczowym tle — kontrast 1,00:1,
   czyli tekst znikal. */
.bm-footer a:not(.bm-btn):hover { color: var(--accent-ink); }
.bm-footer__lista { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-1); }
.bm-footer__lista a { display: inline-flex; align-items: center; min-height: 44px; }

.bm-footer__dol a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}

.bm-footer__dol {
  margin-top: var(--space-8);
  padding-top: var(--space-5);
  border-top: 1px solid var(--gray-line);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  justify-content: space-between;
  font-size: var(--fs-small);
  color: var(--ink-mid);
}

/* --------------------------------------------------------------------------
   13. Telefon na komorce
   -------------------------------------------------------------------------- */

.bm-tel-float {
  position: fixed;
  right: var(--space-4);
  /* Pasek ciasteczek zaslanial przycisk na kazdej szerokosci ponizej 834 px.
     `--h-ciastek` ustawia skrypt na realna wysokosc paska; gdy pasek znika,
     wraca do zera. */
  bottom: calc(var(--space-4) + var(--h-ciastek, 0px));
  transition: bottom var(--dur-base) var(--ease);
  z-index: 90;
  display: grid;
  place-items: center;
  width: 60px;
  height: 60px;
  border-radius: var(--r-kolo);
  background: var(--accent);
  color: var(--ink);
  /* Obrys w ciemniejszym pomaranczu ze znaku klienta. Sam pomaranczowy
     krazek ma na bieli 2,95:1, czyli 0,05 ponizej progu 3:1 z WCAG 1.4.11,
     a to jedyna rzecz, po ktorej widac, gdzie ten przycisk jest. Obrys ma
     5,37:1 i nie zmienia charakteru przycisku. Ikona na pomaranczu: 5,50:1. */
  box-shadow: 0 0 0 2px var(--accent-ink), 0 8px 26px rgba(17, 17, 17, 0.28);
  opacity: 0;
  visibility: hidden;
  transform: scale(0.7);
  transition: opacity var(--dur-base) var(--ease),
              transform var(--dur-base) var(--ease),
              visibility 0s linear var(--dur-base);
}
.bm-tel-float.is-visible {
  opacity: 1;
  visibility: visible;
  transform: scale(1);
  transition: opacity var(--dur-base) var(--ease), transform var(--dur-base) var(--ease), visibility 0s;
}
@media (min-width: 1024px) { .bm-tel-float { display: none; } }

/* Pulsowanie nie moze przechwytywac dotkniec — stad pointer-events */
.bm-tel-float::after {
  content: '';
  position: absolute;
  inset: -6px;
  border-radius: var(--r-kolo);
  border: 2px solid var(--accent);
  animation: bm-puls 2.4s var(--ease) infinite;
  pointer-events: none;
}
@keyframes bm-puls {
  0%   { transform: scale(1);    opacity: 0.7; }
  70%  { transform: scale(1.35); opacity: 0; }
  100% { transform: scale(1.35); opacity: 0; }
}

/* --------------------------------------------------------------------------
   14. Pasek ciasteczek
   -------------------------------------------------------------------------- */

.bm-cookies {
  position: fixed;
  inset-inline: 0;
  bottom: 0;
  z-index: 95;
  background: var(--ink);
  color: var(--biel-mid);
  padding: var(--space-3) var(--px-mobile);
  font-size: var(--fs-micro);
  /* miejsce po prawej na przycisk telefonu */
  padding-right: calc(var(--px-mobile) + 84px);
  transform: translateY(110%);
  transition: transform var(--dur-slow) var(--ease);
}
.bm-cookies__tekst {
  margin: 0;
  line-height: var(--lh-srednia);
  font-size: 0.75rem;
  min-width: 0;
  flex: 1 1 0;
}
@media (min-width: 1024px) { .bm-cookies__tekst { font-size: var(--fs-small); } }
/* Najwezsze ekrany: zostaje sam odnosnik do zasad, zeby pasek nie urosl.
   Prog 400 px, bo przy 360 px pelne zdanie zawijalo sie na cztery wiersze
   i pasek mial 94 px zamiast 80. */
@media (max-width: 400px) {
  .bm-cookies__krotki { display: none; }
  .bm-cookies__btn { padding-inline: var(--space-2); font-size: 0.6875rem; }
  .bm-cookies { padding-inline: var(--space-3); }
}
/* Na waskim ekranie pasek nie moze zajmowac polowy widoku —
   norma to najwyzej 80 px wysokosci. */
.bm-cookies__krotki { display: inline; }
.bm-cookies__pelny  { display: none; }
@media (min-width: 1024px) {
  .bm-cookies { font-size: var(--fs-small); padding-block: var(--space-4); }
  .bm-cookies__btn { padding-inline: var(--space-5); font-size: var(--fs-small); }
  .bm-cookies__krotki { display: none; }
  .bm-cookies__pelny  { display: inline; }
}
.bm-cookies.is-visible { transform: translateY(0); }
@media (min-width: 1024px) { .bm-cookies { padding-right: var(--px-desktop); } }

.bm-cookies__inner {
  max-width: var(--w-wide);
  margin-inline: auto;
  display: flex;
  flex-wrap: nowrap;      /* jeden rzad — pasek ma byc niski */
  align-items: center;
  gap: var(--space-3);
  justify-content: space-between;
}
@media (min-width: 700px) { .bm-cookies__inner { gap: var(--space-6); } }
.bm-cookies a { color: var(--accent); }
.bm-cookies__akcje { display: flex; gap: var(--space-2); flex: 0 0 auto; }
.bm-cookies__btn {
  min-height: 44px;
  border-radius: var(--r-sm);
  padding: var(--space-2) var(--space-3);
  font-size: 0.75rem;
  white-space: nowrap;
  font-weight: var(--w-mocna);
  border: 1px solid rgba(255, 255, 255, 0.4);
  color: #fff;
  transition: background var(--dur-base) var(--ease), color var(--dur-base) var(--ease);
}
.bm-cookies__btn--tak { background: var(--accent); border-color: var(--accent); color: var(--ink); }
.bm-cookies__btn:hover { background: #fff; color: var(--ink); border-color: #fff; }
.bm-cookies__btn--tak:hover { background: #fff; }

/* --------------------------------------------------------------------------
   15. Tresc podstron
   -------------------------------------------------------------------------- */

.bm-naglowek-strony {
  padding-top: calc(var(--header-h) + var(--section-md));
  padding-bottom: var(--section-md);
  background: var(--paper-warm);
  border-bottom: 1px solid var(--gray-line);
}
.bm-naglowek-strony__tytul { font-size: var(--fs-h1); }
.bm-naglowek-strony__lead {
  margin-top: var(--space-5);
  font-size: var(--fs-lead);
  color: var(--ink-mid);
}

/* Tresc redakcyjna. Bez ograniczenia szerokosci — tekst idzie ta sama
   szerokoscia co reszta strony. */
.bm-tresc { font-size: var(--fs-body); line-height: var(--lh-luzna); }
.bm-tresc > * + * { margin-top: var(--space-5); }
.bm-tresc h2 { font-size: var(--fs-h2); margin-top: var(--space-12); }
.bm-tresc h3 { font-size: var(--fs-h3); margin-top: var(--space-10); }
.bm-tresc ul, .bm-tresc ol { padding-left: var(--space-6); display: grid; gap: var(--space-2); }
.bm-tresc a { color: var(--accent-ink); text-decoration-thickness: 1px; text-underline-offset: 3px; }
/* Odnosnik w prozie musi reagowac na najazd — `stany.py` slusznie zglaszal,
   ze na stronie polityki prywatnosci nie zmienial sie w zaden sposob. */
.bm-tresc a:hover,
.bm-tresc a:focus-visible { color: var(--ink); text-decoration-thickness: 2px; }
/* Telefon i poczta w tresci sa celem tapniecia, nie ozdoba zdania.
   `padding-block` powieksza pole dotyku do 44 px, ujemny `margin-block`
   pilnuje, zeby rytm akapitu sie nie rozjechal. */
.bm-tresc a[href^="mailto:"],
.bm-tresc a[href^="tel:"] {
  display: inline-block;
  padding-block: 0.65rem;
  margin-block: -0.65rem;
}
.bm-tresc strong { color: var(--ink); }
.bm-tresc table { width: 100%; border-collapse: collapse; }
.bm-tresc th, .bm-tresc td { padding: var(--space-3); border-bottom: 1px solid var(--gray-line); text-align: left; }

/* Na waskim ekranie tabela przestaje byc tabela.
 *
 * Zmierzone na polityce prywatnosci: tabela trzykolumnowa nie schodzi ponizej
 * 384 px, wiec przy oknie 390 px rozpychala strone o 26 px, a przy 320 px
 * o 84 px. Poziome przewijanie w dokumencie prawnym to zla lektura, wiec
 * kazdy wiersz staje sie karta, a naglowki kolumn wracaja jako podpisy
 * z `data-etykieta`. */
@media (max-width: 700px) {
  .bm-tresc table { display: block; }
  /* `display: block` na tabeli i tak zdejmuje jej role tabeli w przegladarce,
   * a podpisy kolumn wracaja przy kazdej komorce przez `data-etykieta`.
   * Naglowek jest wiec zbedny takze dla czytnika ekranu. Chowanie go technika
   * „visually hidden" zostawialo go 80 px poza ramka rodzica i audyt slusznie
   * to zglaszal. */
  .bm-tresc thead { display: none; }
  .bm-tresc tbody { display: grid; gap: var(--space-4); }
  .bm-tresc tr {
    display: grid;
    gap: var(--space-2);
    padding: var(--space-4);
    border: 1px solid var(--gray-line);
    border-radius: var(--r-sm);
    background: var(--paper-warm);
  }
  .bm-tresc td { padding: 0; border: 0; }
  .bm-tresc td[data-etykieta]::before {
    content: attr(data-etykieta);
    display: block;
    margin-bottom: var(--space-05);
    font-size: var(--fs-mini, 0.75rem);
    font-weight: var(--w-srednia);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--ink-mid);
  }
}

/* Szerokie elementy przewijaja sie w swoim pudelku, nie rozpychaja strony */
.bm-przewijalne { overflow-x: auto; }

/* Pytania i odpowiedzi */
.bm-faq { display: grid; }
.bm-faq__poz { border-top: 1px solid var(--gray-line); }
.bm-faq__poz:last-child { border-bottom: 1px solid var(--gray-line); }
.bm-faq__pytanie {
  font-family: var(--font);
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  min-height: 64px;
  padding-block: var(--space-5);
  text-align: left;
  font-size: var(--fs-h4);
  font-weight: var(--w-mocna);
  color: var(--ink);
}
.bm-faq__znak { flex: none; transition: transform var(--dur-base) var(--ease); color: var(--accent-ink); }
.bm-faq__pytanie[aria-expanded="true"] .bm-faq__znak { transform: rotate(45deg); }
.bm-faq__odp {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--dur-slow) var(--ease);
}
.bm-faq__odp > div { overflow: hidden; }
.bm-faq__poz.is-open .bm-faq__odp { grid-template-rows: 1fr; }
.bm-faq__odp p { padding-bottom: var(--space-6); color: var(--ink-mid); }

/* --------------------------------------------------------------------------
   16. Odslanianie przy przewijaniu
   -------------------------------------------------------------------------- */

/* Element ukryty tylko wtedy, gdy skrypt dziala — inaczej przy wylaczonym
   JavaScripcie cala sekcja zostaje niewidoczna. */
.js .bm-anim {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity var(--dur-wejscie) var(--ease-out),
              transform var(--dur-wejscie) var(--ease-out);
}
.js .bm-anim.is-visible { opacity: 1; transform: none; }
.js .bm-anim--2 { transition-delay: 90ms; }
.js .bm-anim--3 { transition-delay: 180ms; }
.js .bm-anim--4 { transition-delay: 270ms; }

/* --------------------------------------------------------------------------
   17. Mniej ruchu
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .bm-hero__title .bm-hero__line > span { transform: none; }
  .bm-hero__lead,
  .bm-hero__akcje { opacity: 1; }
  .bm-hero__media img { clip-path: none; }
  .js .bm-anim { opacity: 1; transform: none; }
}

/* --------------------------------------------------------------------------
   18. Druk
   -------------------------------------------------------------------------- */

@media print {
  .bm-header, .bm-mobile, .bm-tel-float, .bm-cookies, .bm-form { display: none !important; }
  body { color: #000; background: #fff; }
  a[href^="http"]::after { content: ' (' attr(href) ')'; font-size: 0.8em; }
}


/* --------------------------------------------------------------------------
   Zakres projektu — najwazniejsza sekcja strony
   -------------------------------------------------------------------------- */

.bm-filary {
  display: grid;
  gap: var(--space-4);
  grid-template-columns: minmax(0, 1fr);
}
/* Liczba kolumn ma wynikac z liczby kart, nie z zalozenia.
 *
 * Bylo tu `repeat(5, 1fr)` z czasow, gdy filarow bylo piec. Przy czterech
 * zostawalo puste pole z prawej i sekcja wygladala, jakby ktos usunal z niej
 * kafelek. Do tego czwarta karta byla w zakresie 900–1300 px odsuwana o pol
 * kolumny — zabieg sensowny przy piatce, myslacy przy czworce.
 *
 * Teraz: 1 / 2x2 / rzad rowny liczbie kart. `:has()` obsluguje przypadek,
 * gdyby klientka dopisala piaty filar w panelu. */
@media (min-width: 640px) { .bm-filary { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1200px) {
  .bm-filary { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .bm-filary:has(> :nth-child(5)) { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}

.bm-filar {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: var(--space-6) var(--space-5) var(--space-6);
  border: 1px solid var(--gray-line);
  border-radius: var(--r-lg);
  background: var(--paper);
  box-shadow: var(--cien-sm);
  overflow: hidden;
  min-width: 0;
  transition: box-shadow var(--dur-base) var(--ease),
              transform var(--dur-base) var(--ease),
              border-color var(--dur-base) var(--ease);
}
/* Pomaranczowa kreska u gory wysuwa sie przy najechaniu */
.bm-filar::before {
  content: '';
  position: absolute;
  inset-inline: 0;
  top: 0;
  height: 3px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dur-slow) var(--ease);
}
.bm-filar:hover {
  border-color: transparent;
  box-shadow: var(--cien-md);
  transform: translateY(-4px);
}
.bm-filar:hover::before { transform: scaleX(1); }

.bm-filar__ikona {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  margin-bottom: var(--space-5);
  border-radius: var(--r-md);
  background: var(--paper-warm);
  color: var(--accent-ink);
  transition: background var(--dur-base) var(--ease),
              color var(--dur-base) var(--ease);
}
.bm-filar:hover .bm-filar__ikona { background: var(--accent); color: var(--ink); }
.bm-filar__ikona svg { width: 26px; height: 26px; }

.bm-filar__numer {
  font-size: var(--fs-micro);
  font-weight: var(--w-mocna);
  letter-spacing: 0.14em;
  color: var(--ink-mid);
  margin-bottom: var(--space-2);
}

.bm-filar__tytul {
  font-family: var(--font);
  font-size: var(--fs-h4);
  font-weight: var(--w-mocna);
  letter-spacing: -0.015em;
  line-height: var(--lh-ciasna);
  color: var(--ink);
}
/* Gdy pozycja nie ma opisu, tytul nie potrzebuje zapasu na drugi wiersz */
.bm-filar:has(.bm-filar__opis) .bm-filar__tytul { min-height: 2.24em; }

.bm-filar__opis {
  margin-top: var(--space-3);
  font-size: var(--fs-small);
  line-height: var(--lh-srednia);
  color: var(--ink-mid);
}

/* Lista wypunktowana z pomaranczowa kreska */
.bm-lista { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--space-3); }
.bm-lista li {
  position: relative;
  padding-left: var(--space-8);
  color: var(--ink-mid);
}
.bm-lista li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.7em;
  width: 1.125rem;
  height: 2px;
  border-radius: var(--r-xs);
  background: var(--accent);
}

/* Uklad dwukolumnowy uzywany na podstronach */
.bm-duo {
  display: grid;
  gap: var(--space-8);
  /* Do gory, nie do srodka — przy roznej wysokosci kolumn wysrodkowanie
     sprawia, ze naglowek i lista zaczynaja sie na roznych poziomach. */
  align-items: start;
}
@media (min-width: 900px) {
  .bm-duo { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(2rem, 5vw, 4rem); }
  .bm-duo--odwrocone > :first-child { order: 2; }
}
.bm-duo__media {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: var(--r-lg);
  background: var(--paper-warm);
  box-shadow: var(--cien-md);
}
.bm-duo__media img { width: 100%; height: 100%; object-fit: cover; }
.bm-duo__tekst { color: var(--ink-mid); }
.bm-duo__tekst p + p { margin-top: var(--space-4); }
.bm-duo__tekst strong { color: var(--ink); font-weight: var(--w-srednia); }

/* Wartosc w bloku danych na podstronie nieruchomosci */
.bm-dana__tresc {
  font-size: var(--fs-h4);
  font-weight: var(--w-srednia);
  color: var(--ink);
}
.bm-dana__tresc a { text-decoration: none; overflow-wrap: anywhere; }
.bm-dana__tresc a:hover { color: var(--accent-ink); }

/* Kontenery bez wlasnego wygladu — zdefiniowane, zeby nie byly sierotami */
.bm-hero__tresc,
.bm-studio__tekst,
.bm-nawig { min-width: 0; }


/* --------------------------------------------------------------------------
   Opinia w Google i mapa dojazdu
   -------------------------------------------------------------------------- */

.bm-opinia {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-4);
  /* Obrys niesie znaczenie: to jedyna rzecz, po ktorej widac, ze ocena
     z wizytowki Google jest odnosnikiem, a nie samym napisem. 3,85:1. */
  border: 1px solid var(--linia-mocna);
  border-radius: var(--r-md);
  background: var(--paper);
  text-decoration: none;
  color: var(--ink);
  transition: border-color var(--dur-base) var(--ease),
              box-shadow var(--dur-base) var(--ease);
}
a.bm-opinia:hover,
a.bm-opinia:focus-visible { border-color: transparent; box-shadow: var(--cien-md); }

.bm-opinia__gwiazdki {
  display: inline-flex;
  gap: var(--space-05);
  color: #f5a623;          /* barwa gwiazdek w Google */
}
.bm-opinia__tresc { display: flex; align-items: baseline; gap: var(--space-2); flex-wrap: wrap; }
.bm-opinia__tresc strong {
  font-size: var(--fs-h4);
  font-weight: var(--w-mocna);
  color: var(--ink);
}
.bm-opinia__tresc span { font-size: var(--fs-small); color: var(--ink-mid); }

/* Mapa na calej szerokosci okna, przycisk dojazdu na niej */
.bm-mapa-pas {
  position: relative;
  margin-top: var(--section-sm);
}
/* Mapa konczy sekcje kontaktu, wiec sekcja nie dokłada juz dolnego odstepu */
.bm-kontakt { padding-bottom: 0; }
.bm-mapa-pas__ramka {
  height: clamp(260px, 38vw, 440px);
  background: var(--paper-warm);
  border-top: 1px solid var(--gray-line);
  filter: saturate(0.85);
}
.bm-mapa-pas__ramka iframe { width: 100%; height: 100%; border: 0; display: block; }

.bm-mapa-pas__dojazd {
  position: absolute;
  right: var(--px-mobile);
  /* Ponad paskiem Google u dolu mapy — inaczej przycisk go zaslania */
  bottom: var(--space-10);
  box-shadow: var(--cien-md);
}
@media (min-width: 768px)  { .bm-mapa-pas__dojazd { right: var(--px-tablet); } }
@media (min-width: 1200px) {
  .bm-mapa-pas__dojazd {
    right: max(var(--px-desktop), calc((100vw - var(--w-wide)) / 2));
    bottom: var(--space-8);
  }
}


/* --------------------------------------------------------------------------
   Ikona strony i drobne domkniecia
   -------------------------------------------------------------------------- */

/* Zaznaczenie tekstu w barwie marki jest wyzej, w sekcji „Reset i podstawy".
   Tu bylo drugi raz, slowo w slowo. */

/* Pasek przewijania na duzych ekranach */
@media (min-width: 1024px) {
  * { scrollbar-width: thin; scrollbar-color: var(--gray) transparent; }
  *::-webkit-scrollbar { width: 10px; height: 10px; }
  *::-webkit-scrollbar-track { background: transparent; }
  *::-webkit-scrollbar-thumb {
    background: var(--gray-line);
    border-radius: 999px;
    border: 3px solid var(--paper);
  }
  *::-webkit-scrollbar-thumb:hover { background: var(--gray); }
}

/* Docisk przy nacisnieciu.
   Do 25.08.2026 mialy go tylko przyciski. Kafel projektu, kafel mozaiki,
   zdjecie w galerii i ocena z wizytowki reagowaly na kursor, ale pod palcem
   nie dawaly zadnego znaku, ze tapniecie doszlo. Na telefonie to jedyny
   moment, w ktorym mozna cokolwiek pokazac: hovera tam nie ma. */
.bm-btn:active,
.bm-cookies__btn:active { transform: translateY(1px); }

.bm-praca:active,
.bm-mozaika__kafel:active,
.bm-opinia:active,
.bm-tel-float:active { transform: translateY(1px) scale(0.995); }

.bm-galeria__poz:active { transform: scale(0.985); }

.bm-nav__link:active,
.bm-mobile__link:active,
.bm-faq__pytanie:active { opacity: 0.7; }

/* Szary prostokat, ktory przegladarki mobilne rysuja na tapnietym elemencie,
   pojawia sie z opoznieniem i zostaje po palcu. Wlasny stan `:active` wyzej
   mowi to samo, tylko od razu i w barwach strony. */
a, button, [role="button"], input, select, textarea, summary {
  -webkit-tap-highlight-color: transparent;
}

/* Wylaczone: przycisk i pole formularza. Samo `opacity` nie wystarcza —
   bez `cursor` uzytkownik probuje klikac i nie rozumie, czemu nic sie nie
   dzieje. */
.bm-btn[disabled],
.bm-btn[aria-disabled="true"] {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}

.bm-pole input[disabled],
.bm-pole textarea[disabled],
.bm-pole input[readonly] {
  background: var(--paper-warm);
  color: var(--ink-mid);
  border-color: var(--gray-line);
  cursor: not-allowed;
}