/* =========================================================================
   BIURO PROJEKTOWE — arkusz stylów
   Minimalizm architektoniczny. Motyw przewodni: metryka rysunku technicznego.
   Paleta domyślna: A — „Beton i stal". Warianty B i C w komentarzu niżej.
   Zmiana palety = podmiana ośmiu wartości w bloku :root. Nic więcej.
   ========================================================================= */

:root {
  /* Strona nie ma trybu ciemnego — bez tego niektóre przeglądarki mobilne
     (m.in. Chrome na Androidzie z systemowym trybem ciemnym) same
     przemalowują kolory tekstu, czasem z dziwnymi przesunięciami barwy. */
  color-scheme: light;

  /* --- Paleta A (domyślna) --- */
  --paper: #ffffff;
  --surface: #f3f3f1;
  --ink: #12161a;
  --muted: #6e757c;
  --line: #e2e2de;
  --accent: #2f566b;
  --accent-ink: #23404f;
  --accent-wash: #eef2f4;

  /* --- Typografia --- */
  --font-display: "Archivo", "Segoe UI", system-ui, -apple-system, sans-serif;
  --font-sans: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Consolas, monospace;

  /* --- Skala typograficzna --- */
  --t-metric: 0.6875rem;
  /* Dolna wartość dotyczy wyłącznie telefonów (poniżej ~548 px) i jest celowo
     niska: nagłówek hero leży na zdjęciu, a przy 2.75rem ostatnia linia
     dochodziła do samej krawędzi kadru. Klasy display-xl używa tylko ten
     jeden nagłówek, więc zmiana nie rusza reszty serwisu. */
  --t-display-xl: clamp(2.125rem, 6.2vw, 5.25rem);
  --t-display-l: clamp(2.125rem, 4.4vw, 3.5rem);
  --t-display-m: clamp(1.625rem, 2.8vw, 2.25rem);
  --t-lead: clamp(1.0625rem, 1.5vw, 1.3125rem);

  /* --- Rytm --- */
  --sec: 6.5rem;
  --sec-lg: 9.5rem;
  --radius: 2px;
  --max: 1440px;
  --max-narrow: 720px;
}

/* -------------------------------------------------------------------------
   WARIANT B — „Ciepła szarość i ziemia"
   --surface:#f4f2ef; --ink:#1b1a18; --muted:#77716a; --line:#e4e0d9;
   --accent:#8a5a44; --accent-ink:#6f4634; --accent-wash:#f6efea;

   WARIANT C — „Grafit i oliwka"
   --surface:#f2f3f1; --ink:#14171a; --muted:#6c7370; --line:#e0e3dd;
   --accent:#5f6f43; --accent-ink:#4a5834; --accent-wash:#eff2ea;
   ------------------------------------------------------------------------- */

/* --- Fonty: wgraj pliki .woff2 do katalogu fonts/ (patrz fonts/CZYTAJ.txt).
       Bez nich strona użyje fontów systemowych — wygląd zbliżony, bez zapytań
       do serwerów zewnętrznych, co jest istotne przy RODO. --- */
@font-face { font-family: "Archivo"; src: url("../fonts/archivo-300.woff2") format("woff2"); font-weight: 300; font-display: swap; }
@font-face { font-family: "Archivo"; src: url("../fonts/archivo-400.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Inter"; src: url("../fonts/inter-300.woff2") format("woff2"); font-weight: 300; font-display: swap; }
@font-face { font-family: "Inter"; src: url("../fonts/inter-400.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "IBM Plex Mono"; src: url("../fonts/plex-mono-400.woff2") format("woff2"); font-weight: 400; font-display: swap; }

/* =========================== RESET =============================== */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
img, svg, iframe { display: block; max-width: 100%; }
button, input, textarea { font: inherit; color: inherit; }
ul, ol { list-style: none; }
a { color: inherit; text-decoration: none; }

body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-sans);
  font-weight: 300;
  line-height: 1.6;
  letter-spacing: -0.005em;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 300;
  letter-spacing: -0.025em;
  line-height: 1.1;
  text-wrap: balance;
}
p { text-wrap: pretty; }
::selection { background: var(--accent); color: var(--paper); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--ink); color: var(--paper); padding: 0.75rem 1.25rem;
}
.skip-link:focus { left: 1rem; top: 1rem; }

/* =========================== UKŁAD =============================== */
/* Strona jest projektowana pod typowe szerokości monitorów i nie rozciąga się
   dalej niż --max. Powyżej tej szerokości całość jest wyśrodkowana, a poza nią
   widać neutralne tło. Dzięki temu pasy pełnej szerokości (zwłaszcza zdjęcie
   hero) zachowują zaprojektowane proporcje zamiast rozjeżdżać się na ultrawide,
   gdzie kadr robił się skrajnie panoramiczny i przycinał zdjęcie do paska.
   Tło poza stroną jest białe — marginesy mają zniknąć, nie tworzyć ramki. */
html { background: var(--paper); }
body { max-width: var(--max); margin-inline: auto; }
/* elementy fixed trzeba dosunąć do tej samej ramy — inaczej kleiłyby się do
   krawędzi okna, a nie do krawędzi strony */
.pasek-telefonu { max-width: var(--max); margin-inline: auto; }

.kontener { width: 100%; max-width: var(--max); margin-inline: auto; padding-inline: 1.25rem; }
.kontener--waski { max-width: var(--max-narrow); }
@media (min-width: 640px) { .kontener { padding-inline: 2rem; } }
@media (min-width: 1024px) { .kontener { padding-inline: 3rem; } }

.sekcja { padding-block: 4rem; }
@media (min-width: 640px) { .sekcja { padding-block: var(--sec); } }
.sekcja--duza { padding-block: 4.5rem; }
@media (min-width: 640px) { .sekcja--duza { padding-block: var(--sec-lg); } }
.sekcja--zwarta { padding-block: 3.5rem; }
.sekcja--beton { background: var(--surface); }
.sekcja--atrament { background: var(--ink); color: var(--paper); }
.sekcja--atrament h2 { color: var(--paper); }

/* ===================== METRYKA I LINIA WYMIAROWA ================= */
.metryka {
  font-family: var(--font-mono);
  font-size: var(--t-metric);
  line-height: 1.2;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
}
.wymiar { display: flex; align-items: center; gap: 1rem; width: 100%; }
.wymiar::before, .wymiar::after { content: ""; width: 1px; height: 0.625rem; background: var(--line); flex-shrink: 0; }
.wymiar__linia { height: 1px; background: var(--line); flex: 1; }
.wymiar__etykieta { flex-shrink: 0; }
.sekcja--atrament .wymiar::before,
.sekcja--atrament .wymiar::after,
.sekcja--atrament .wymiar__linia { background: rgba(255,255,255,0.3); }
.sekcja--atrament .metryka { color: rgba(255,255,255,0.6); }

/* =========================== TYPOGRAFIA ========================== */
/* 1.02 bylo ciasniejsze niz naturalna wysokosc wiersza fontu, wiec ogonki
   (ą, ę, ć) wychodzily ~5 px ponizej pudelka wiersza. Przy naglowku lezacym
   na zdjeciu ten nadmiar wypadal juz poza kadr. 1.1 nadal czyta sie zwarcie,
   ale atrament miesci sie w mierzonej wysokosci -- a od niej zalezy kadr. */
.display-xl { font-size: var(--t-display-xl); line-height: 1.1; }
.display-l  { font-size: var(--t-display-l); line-height: 1.06; }
.display-m  { font-size: var(--t-display-m); line-height: 1.14; }
.lead { font-size: var(--t-lead); line-height: 1.6; color: var(--muted); }
.lead--ink { color: var(--ink); }
.sekcja--atrament .lead { color: rgba(255,255,255,0.7); }
.tekst { color: var(--muted); }
.tekst p + p { margin-top: 1.25rem; }
.waski-tekst { max-width: 62ch; }

/* =========================== PRZYCISKI =========================== */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.625rem;
  padding: 0.625rem 1.25rem; border: 1px solid transparent; border-radius: var(--radius);
  font-size: 0.9375rem; cursor: pointer; transition: background-color .2s, color .2s, border-color .2s;
}
.btn--duzy { padding: 1rem 1.75rem; font-size: 1rem; }
.btn--pelny { width: 100%; }
.btn--glowny { background: var(--accent); color: var(--paper); }
.btn--glowny:hover { background: var(--accent-ink); }
.btn--obrys { border-color: rgba(18,22,26,0.25); color: var(--ink); }
.btn--obrys:hover { border-color: var(--ink); background: var(--ink); color: var(--paper); }
.btn--jasny { background: var(--paper); color: var(--ink); }
.btn--jasny:hover { background: rgba(255,255,255,0.85); }
.btn--obrys-jasny { border-color: rgba(255,255,255,0.3); color: var(--paper); }
.btn--obrys-jasny:hover { border-color: var(--paper); background: var(--paper); color: var(--ink); }
.btn[disabled] { opacity: .5; cursor: not-allowed; }

/* =========================== NAGŁÓWEK ============================ */
.naglowek {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255,255,255,0.95); backdrop-filter: blur(6px);
  border-bottom: 1px solid var(--line);
}
.naglowek__pasek {
  display: flex; align-items: center; justify-content: space-between; gap: 1.5rem;
  height: 72px;
}
@media (min-width: 1024px) { .naglowek__pasek { height: 80px; } }
.logo { display: flex; align-items: center; gap: 0.75rem; }
.logo__znak {
  display: flex; align-items: center; justify-content: center;
  width: 2.25rem; height: 2.25rem; border: 1px solid var(--ink);
  font-family: var(--font-mono); font-size: var(--t-metric); letter-spacing: 0.1em;
}
.logo__nazwa { font-family: var(--font-display); font-size: 1.0625rem; letter-spacing: -0.02em; }
/* Nazwisko właściciela pod nazwą marki — nagłówek jest przyklejony do góry
   i widoczny od razu po otwarciu KAŻDEJ podstrony, więc to najpewniejsze
   miejsce ekspozycji. Font mono spina je z systemem metryk rysunku. */
.logo__tekst { display: flex; flex-direction: column; line-height: 1.15; }
.logo__osoba {
  font-family: var(--font-mono); font-size: 0.6875rem; letter-spacing: 0.06em;
  color: var(--muted); margin-top: 0.25rem; white-space: nowrap;
}
/* Na wąskim ekranie nagłówek dzieli miejsce z przyciskiem „Zadzwoń"
   i hamburgerem. W jednej linii nazwisko rozpychało pasek o 15 px i strona
   przewijała się poziomo, więc tu łamiemy je na dwie linie i ograniczamy
   szerokość do mniej więcej szerokości nazwy marki — logo przestaje rosnąć. */
@media (max-width: 1023px) {
  /* marka zostaje w jednej linii — bez tego zawężenie poniżej łamało także ją
     i nagłówek robił się czterowierszowy */
  .logo__nazwa { white-space: nowrap; }
  .logo__osoba {
    font-size: 0.625rem; letter-spacing: 0.02em;
    white-space: normal; max-width: 9rem; line-height: 1.25;
    /* wcięcie wiszące: pierwsza linia cofnięta o szerokość „inż. ”, kolejne
       zostają wcięte — dzięki temu „Gryczewski” wyrównuje się do „Eugeniusz”.
       Font jest monospace, więc 5 znaków to dokładnie 5ch, bez zgadywania. */
    padding-left: 5ch; text-indent: -5ch;
  }
}
/* Najwęższe telefony (360 px i mniej): sama nazwa marki miała 122 px i pasek
   wystawał poza ekran o 9 px. Odrobinę mniejszy stopień pisma i ciaśniejszy
   odstęp od znaku wystarczą, żeby wszystko zmieściło się bez przewijania. */
@media (max-width: 374px) {
  .logo { gap: 0.5rem; }
  .logo__nazwa { font-size: 0.9375rem; }
}
.nawigacja { display: none; }
@media (min-width: 1024px) { .nawigacja { display: block; } }
.nawigacja ul { display: flex; align-items: center; gap: 2.25rem; }
.nawigacja a { font-size: 0.9375rem; transition: color .2s; }
.nawigacja a:hover, .nawigacja a[aria-current="page"] { color: var(--accent); }
.naglowek__akcje { display: none; align-items: center; gap: 1.5rem; }
@media (min-width: 1024px) { .naglowek__akcje { display: flex; } }
.telefon-naglowek { display: flex; flex-direction: column; line-height: 1.2; }
.telefon-naglowek span:last-child { font-family: var(--font-display); font-size: 1.125rem; letter-spacing: -0.02em; transition: color .2s; }
.telefon-naglowek:hover span:last-child { color: var(--accent); }
.naglowek__mobile { display: flex; align-items: center; gap: 0.75rem; }
@media (min-width: 1024px) { .naglowek__mobile { display: none; } }
.przelacznik {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px;
  width: 2.75rem; height: 2.75rem; border: 1px solid var(--line); background: none; cursor: pointer;
}
.przelacznik span { display: block; width: 1.25rem; height: 1px; background: var(--ink); transition: transform .2s; }
.przelacznik[aria-expanded="true"] span:first-child { transform: translateY(3px) rotate(45deg); }
.przelacznik[aria-expanded="true"] span:last-child { transform: translateY(-3px) rotate(-45deg); }
/* Menu wjeżdża płynnie: zamiast display:none/block (czego nie da się animować)
   przełączamy opacity + visibility. Visibility trzyma zamknięte menu poza
   nawigacją klawiaturą i czytnikiem ekranu, a że ma zadany czas trwania, jego
   zmiana czeka na koniec wygaszania. Panel jest pozycjonowany absolutnie pod
   paskiem nagłówka, więc nakłada się na treść, zamiast rozpychać nagłówek. */
.menu-mobilne {
  position: absolute; inset-inline: 0; top: 100%;
  max-height: calc(100dvh - 72px); overflow-y: auto;
  border-top: 1px solid var(--line); background: var(--paper);
  opacity: 0; visibility: hidden;
  transition: opacity .25s ease, visibility .25s;
}
.menu-mobilne.otwarte { opacity: 1; visibility: visible; }
@media (min-width: 1024px) { .menu-mobilne { display: none; } }

/* Przy otwartym menu treść strony pod spodem jest rozmywana. Warstwa leży nad
   stroną (z-index 45), ale pod nagłówkiem (50), więc pasek i sam panel menu
   zostają ostre. backdrop-filter rozmywa to, co narysowane pod spodem. */
body::after {
  content: ""; position: fixed; inset: 0; z-index: 45; pointer-events: none;
  background: rgba(255,255,255,0.35);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  opacity: 0; visibility: hidden;
  transition: opacity .25s ease, visibility .25s;
}
body.menu-otwarte::after { opacity: 1; visibility: visible; }
/* zabezpieczenie, gdyby okno urosło do desktopu przy otwartym menu */
@media (min-width: 1024px) { body.menu-otwarte::after { display: none; } }
.menu-mobilne li + li { border-top: 1px solid var(--line); }
.menu-mobilne a { display: flex; align-items: baseline; justify-content: space-between; padding: 1rem 0; font-size: 1.125rem; }
.menu-mobilne .btn { margin: 1.5rem 0 1rem; }

/* ======================= PASEK TELEFONU (MOBILE) ================= */
.pasek-telefonu {
  position: fixed; inset-inline: 0; bottom: 0; z-index: 40;
  background: rgba(255,255,255,0.97); backdrop-filter: blur(6px);
  border-top: 1px solid var(--line);
}
@media (min-width: 1024px) { .pasek-telefonu { display: none; } }
.pasek-telefonu a { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0.75rem 1.25rem; }
.pasek-telefonu__numer { font-family: var(--font-display); font-size: 1.125rem; letter-spacing: -0.02em; }
.pasek-telefonu__akcja { background: var(--accent); color: var(--paper); padding: 0.625rem 1.25rem; border-radius: var(--radius); font-size: 0.9375rem; }
body { padding-bottom: 72px; }
@media (min-width: 1024px) { body { padding-bottom: 0; } }

/* =========================== HERO ================================ */
.hero { border-bottom: 1px solid var(--line); padding-top: 3.5rem; }
@media (min-width: 640px) { .hero { padding-top: 5rem; } }
.hero--zdjecie { padding-top: 0; }
.hero__tytul { margin-top: 2rem; max-width: 16ch; }
.hero__siatka { margin-top: 3rem; display: grid; gap: 2.5rem; }
@media (min-width: 1024px) { .hero__siatka { grid-template-columns: 1fr 1fr; align-items: end; } }
.hero__akcje { display: flex; flex-direction: column; gap: 1rem; }
@media (min-width: 640px) { .hero__akcje { flex-direction: row; align-items: center; } }
@media (min-width: 1024px) { .hero__prawa { justify-self: end; text-align: right; } .hero__akcje { justify-content: flex-end; } }

/* Hero ze zdjęciem: .hero__scena jest jedynym miejscem wysokości — zdjęcie
   (position:absolute, inset:0) wypełnia dokładnie sumę wysokości .hero__tresc
   (nagłówek) i .hero__siatka-tlo (lead + przyciski), bez sztywnego min-height.
   Dzięki temu nie ma pustki nad tekstem ani nic nie "wystaje" pod zdjęciem —
   każdy blok ma tyle wysokości, ile realnie potrzebuje jego treść.
   Pod 1024px .hero__siatka-tlo dostaje nieprzezroczyste białe tło: wizualnie
   wygląda jak osobna biała sekcja pod zdjęciem, mimo że technicznie zdjęcie
   sięga też za nią (i tam po prostu niewidoczne). Od 1024px tło robi się
   przezroczyste i lead/przyciski lądują na wierzchu zdjęcia, tak jak nagłówek. */
/* Scena to siatka o dwóch wierszach: [1] nagłówek, [2] lead z przyciskami.
   Zdjęcie dzieli komórkę z wierszem 1, więc kadr ma DOKŁADNIE wysokość
   nagłówka. Wcześniej zdjęcie było rozciągane na całą scenę (także pod biały
   blok, gdzie i tak go nie widać) — na wąskim ekranie dawało to kadr pionowy
   375×590, z którego cover obcinał 64% szerokości i wycinał właśnie bryłę.
   Od 1024px zdjęcie rozpina się na oba wiersze, bo tam leży pod całością. */
.hero__scena { position: relative; display: grid; grid-template-columns: 1fr; }
/* dzieli komórkę siatki z .hero__tresc (wiersz 1) — stąd wysokość kadru.
   MUSI stać przed blokiem @media niżej: obie reguły mają tę samą swoistość,
   więc gdyby była po nim, nadpisałaby desktopowe rozpięcie na oba wiersze. */
.hero__zdjecie { grid-row: 1; grid-column: 1; position: relative; overflow: hidden; z-index: 0; }
/* Od 1024px scena dostaje minimalną wysokość rosnącą wraz z szerokością okna.
   Bez tego na szerokim monitorze wysokość wyznaczała sama treść (która przy
   dużej szerokości mniej się zawija, więc jest NIŻSZA), a object-fit:cover
   przycinał zdjęcie 16:9 do wąskiego paska. Górna granica pilnuje, żeby na
   ultrawide hero nie urosło ponad ekran. Flex ze space-between rozkłada nadmiar
   wysokości między nagłówek u góry a lead z przyciskami u dołu. */
@media (min-width: 1024px) {
  .hero__scena {
    /* strona ma stałą maksymalną szerokość, więc wysokość też jest stała;
       86vh pilnuje, żeby na niskim oknie hero nie zepchnęło CTA pod krawędź */
    min-height: min(40rem, 86vh);
    align-content: space-between;
  }
  /* tu zdjęcie leży pod obiema strefami, więc rozpinamy je na oba wiersze */
  .hero__zdjecie { grid-row: 1 / 3; }
  /* Kadr wciąż jest nieco szerszy niż proporcja zdjęcia, więc cover przycina je
     w pionie. Domyślne "center" łapało pas z pustym niebem u góry; przesunięcie
     okna kadru w dół podstawia w to miejsce bryłę i żwir. */
  .hero__zdjecie img { object-position: center 72%; }
}
/* aspect-ratio: auto jest tu KLUCZOWE. Klasa .zdjecie--16-9 narzuca proporcje
   16:9 i Chrome liczy z niej wysokosc (szerokosc x 9/16) mimo inset:0 --
   przegrywa wtedy offset "bottom", a nie aspect-ratio. Na waskim ekranie
   dawalo to kadr nizszy niz blok tekstu: przy 375 px zdjecie mialo 211 px,
   a naglowek potrzebowal 272 px, wiec ostatnia linia ladowala pod fotografia.
   Na szerokim ekranie ta sama proporcja wychodzila wyzsza niz tekst, dlatego
   objaw byl widoczny wylacznie na telefonach.
   Tu kadr ma wypelnic scene, a nie trzymac proporcje -- proporcje pilnuje
   object-fit: cover na samym <img>.
   Bez szarego tla zastepnika: gdyby zdjecie sie nie wczytalo, biel jest mniej
   rzucajaca sie w oczy niz szara plama. */
.hero__zdjecie .zdjecie {
  position: absolute; inset: 0;
  aspect-ratio: auto;
  background: none;
}

/* Dolny padding to jednoczesnie odstep ostatniej linii naglowka od krawedzi
   zdjecia -- wysokosc kadru wynika z wysokosci tego bloku. 2.5rem daje
   widoczny oddech nawet gdy czcionka zastepcza wypadnie wieksza niz zalozona. */
.hero__tresc { grid-row: 1; grid-column: 1; position: relative; z-index: 1; padding-top: 1.5rem; padding-bottom: 2.5rem; }
@media (min-width: 1024px) { .hero__tresc { padding-top: 2.5rem; padding-bottom: 3rem; } }

/* Żadnego przyciemniania pod nagłówkiem: ciemna nakładka rozciągnięta na całą
   wysokość bloku dawała nad jasnym niebem wyraźny szary pas w dolnym pasie
   paddingu. Czarny nagłówek czyta się na zdjęciu dzięki białej obwódce niżej,
   więc zdjęcie zostaje czyste. Nakładka wraca tylko od 1024px i tylko pod
   blokiem lead + przyciski, gdzie tekst jest biały i realnie jej potrzebuje. */
.hero__nakladka { display: none; position: absolute; inset: 0; z-index: 0; }
.hero__tresc-wnetrze { position: relative; z-index: 1; }
.hero__tresc-wnetrze h1, .hero__tresc-wnetrze .hero__eyebrow {
  color: var(--ink);
  text-shadow:
    1px 1px 0 rgba(255,255,255,.95), -1px -1px 0 rgba(255,255,255,.95),
    1px -1px 0 rgba(255,255,255,.95), -1px 1px 0 rgba(255,255,255,.95),
    0 0 10px rgba(255,255,255,.95), 0 0 24px rgba(255,255,255,.8);
}

/* Pod 1024px odstępy wokół leadu (zdjęcie→lead i lead→przyciski) oraz górny
   i dolny padding bloku są celowo zbite do 0.375rem i identyczne, żeby całość
   czytała się jako jeden zwarty blok. Od 1024px wracają do rytmu sekcji. */
.hero__siatka-tlo { grid-row: 2; grid-column: 1; position: relative; z-index: 1; background: var(--paper); padding-block: 0.375rem; }
.hero__siatka-tlo .hero__siatka { position: relative; z-index: 1; margin-top: 0; row-gap: 0.375rem; }

@media (min-width: 1024px) {
  .hero__siatka-tlo { background: transparent; padding-block: 3rem; }
  .hero__siatka-tlo .hero__siatka { row-gap: 2.5rem; }
  .hero__siatka-tlo .hero__nakladka--dol {
    display: block;
    /* Gradient trzyma pelna sile tylko tam, gdzie realnie lezy bialy tekst
       (40-80%), a w dolnym pasie paddingu wygasa. Wczesniej dochodzil do 0.6
       az do samej krawedzi i na jasnym, pozbawionym faktury zwirze zamienial
       sie w plaski szary pasek -- najlepiej widoczny na niskich ekranach
       (np. 1024x600), gdzie ten pusty pas zajmuje duzo kadru. */
    background: linear-gradient(to bottom,
      rgba(18,22,26,0) 0%, rgba(18,22,26,0.5) 40%,
      rgba(18,22,26,0.55) 80%, rgba(18,22,26,0.12) 100%);
  }
  .hero__siatka-tlo .lead { color: rgba(255,255,255,0.85); }
  .hero__siatka-tlo .metryka { color: rgba(255,255,255,0.7); }
  .hero__siatka-tlo .btn--obrys { border-color: rgba(255,255,255,0.35); color: var(--paper); }
  .hero__siatka-tlo .btn--obrys:hover { border-color: var(--paper); background: var(--paper); color: var(--ink); }
}

/* --- Niskie ekrany w układzie desktopowym (np. Nest Hub 1024x600, laptop
   1366x768 z paskami przeglądarki) ------------------------------------------
   Hero jest tu wyższe niż okno, więc przycisk CTA wypada pod krawędzią i
   trzeba przewijać, żeby go zobaczyć. Skracamy nagłówek i odstępy tak, żeby
   cała sekcja zmieściła się na ekranie. Dotyczy wyłącznie niskich okien —
   przy normalnej wysokości nic się nie zmienia. */
@media (min-width: 1024px) and (max-height: 700px) {
  :root { --t-display-xl: clamp(2.125rem, 4.2vw, 3.25rem); }
  .hero__tresc { padding-top: 1.5rem; padding-bottom: 1.75rem; }
  .hero__siatka-tlo { padding-block: 1.5rem; }
  .hero__siatka-tlo .hero__siatka { row-gap: 1.5rem; }
  .hero__scena { min-height: 0; }
}

.hero__metryki {
  margin-top: 3rem;
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem 1.5rem;
  border-top: 1px solid var(--line); padding-top: 1rem;
}
@media (min-width: 640px) { .hero__metryki { grid-template-columns: repeat(4, 1fr); } }
.hero__metryki p:last-child { font-size: 0.875rem; margin-top: 0.375rem; }
.hero__stopka { margin-top: 4rem; padding-bottom: 0; }

/* ===================== ZASTĘPNIK ZDJĘCIA ========================= */
.zdjecie { position: relative; overflow: hidden; background: var(--surface); }
.zdjecie img { width: 100%; height: 100%; object-fit: cover; }
.zdjecie--16-9 { aspect-ratio: 16 / 9; }
.zdjecie--3-2 { aspect-ratio: 3 / 2; }
.zdjecie--4-3 { aspect-ratio: 4 / 3; }
.zdjecie--3-4 { aspect-ratio: 3 / 4; }
.zdjecie--pusty { display: flex; align-items: center; justify-content: center; }
.zdjecie--pusty::before {
  content: ""; position: absolute; inset: 0; opacity: .35;
  background-image:
    linear-gradient(to right, var(--line) 1px, transparent 1px),
    linear-gradient(to bottom, var(--line) 1px, transparent 1px);
  background-size: 32px 32px;
}
.zdjecie--pusty::after { content: ""; position: absolute; inset: 1rem; border: 1px solid var(--line); }
.zdjecie__etykieta { position: relative; z-index: 1; background: var(--surface); padding: 0 0.75rem; text-align: center; }

/* =========================== SIATKI ============================== */
.naglowek-sekcji { margin-bottom: 3.5rem; }
.naglowek-sekcji__tresc { margin-top: 2.5rem; display: flex; flex-direction: column; gap: 2rem; }
@media (min-width: 1024px) { .naglowek-sekcji__tresc { flex-direction: row; align-items: flex-end; justify-content: space-between; } }
.naglowek-sekcji .lead { margin-top: 1.25rem; max-width: 44rem; }

.siatka-linii { display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); }
.siatka-linii > * { background: var(--paper); }
@media (min-width: 640px) { .siatka-linii--2 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .siatka-linii--3 { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 640px) { .siatka-linii--4 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .siatka-linii--4 { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 640px) { .siatka-linii--5 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .siatka-linii--5 { grid-template-columns: repeat(5, 1fr); } }
/* sześć pozycji układamy 3×2, a nie 6 w rzędzie — przy sześciu kolumnach
   dłuższe nazwy zakresów łamałyby się na cztery wiersze */
@media (min-width: 640px) { .siatka-linii--6 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .siatka-linii--6 { grid-template-columns: repeat(3, 1fr); } }
/* pozycja domykająca niepełny rząd siatki — inaczej w pustej komórce
   prześwitywałoby tło kontenera (linia) jako szary prostokąt */
@media (min-width: 640px) { .siatka-linii__pelny { grid-column: 1 / -1; } }

.kafel { display: flex; flex-direction: column; padding: 2rem; height: 100%; transition: background-color .2s; }
@media (min-width: 1024px) { .kafel { padding: 2.5rem; } }
a.kafel:hover { background: var(--surface); }
.kafel__tytul { font-family: var(--font-display); font-size: 1.25rem; letter-spacing: -0.02em; margin-top: 1rem; transition: color .2s; }
a.kafel:hover .kafel__tytul { color: var(--accent); }
.kafel__opis { margin-top: 1rem; font-size: 0.875rem; line-height: 1.7; color: var(--muted); }
.kafel__link { margin-top: auto; padding-top: 2rem; font-size: 0.875rem; color: var(--accent); }
.kafel__numer { color: var(--accent); }

.lista-zakresu li { display: flex; gap: 0.75rem; font-size: 0.875rem; line-height: 1.7; }
.lista-zakresu li + li { margin-top: 0.75rem; }
.lista-zakresu li::before { content: ""; flex-shrink: 0; width: 1rem; height: 1px; background: var(--accent); margin-top: 0.7rem; }

/* =========================== USŁUGI ============================== */
.usluga { scroll-margin-top: 6rem; }
.usluga__siatka { margin-top: 3rem; display: grid; gap: 3rem; }
@media (min-width: 1024px) { .usluga__siatka { grid-template-columns: 7fr 5fr; gap: 3.5rem; } }
.karta-boczna { border: 1px solid var(--line); background: var(--paper); padding: 1.75rem; }
@media (min-width: 1024px) { .karta-boczna { padding: 2rem; } }
.karta-boczna__blok { margin-top: 1.75rem; border-top: 1px solid var(--line); padding-top: 1.25rem; }

/* ========================= REALIZACJE ============================ */
.filtry { display: flex; flex-wrap: wrap; gap: 0.5rem; border-block: 1px solid var(--line); padding-block: 1rem; }
.filtr {
  border: 1px solid var(--line); border-radius: var(--radius); background: none;
  padding: 0.5rem 1rem; font-size: 0.875rem; color: var(--muted); cursor: pointer;
  transition: border-color .2s, color .2s, background-color .2s;
}
.filtr:hover { border-color: var(--ink); color: var(--ink); }
.filtr[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: var(--paper); }
.filtr__licznik { font-family: var(--font-mono); font-size: var(--t-metric); margin-left: 0.5rem; opacity: .7; }
.siatka-realizacji { margin-top: 2.5rem; display: grid; gap: 3.5rem 2rem; }
@media (min-width: 640px) { .siatka-realizacji { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .siatka-realizacji { grid-template-columns: repeat(3, 1fr); } }
.realizacja { display: flex; flex-direction: column; height: 100%; }
.realizacja__meta { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; }
.realizacja__tresc { border-top: 1px solid var(--line); padding-top: 1.25rem; margin-top: 0; display: flex; flex-direction: column; flex: 1; }
.realizacja__tytul { font-family: var(--font-display); font-size: 1.25rem; letter-spacing: -0.02em; margin-top: 0.75rem; }
.realizacja__opis { margin-top: 0.75rem; font-size: 0.875rem; line-height: 1.7; color: var(--muted); }
.realizacja__dane { margin-top: 1.5rem; border-top: 1px solid var(--line); padding-top: 1rem; display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; font-size: 0.875rem; }
.realizacja__dane dd { margin-top: 0.25rem; }
.realizacja__zakres { margin-top: 1rem; font-size: 0.875rem; color: var(--muted); }
.pusto { margin-top: 2.5rem; border: 1px solid var(--line); padding: 2.5rem; text-align: center; }

/* ============================ ZESPÓŁ ============================= */
.siatka-zespolu { margin-top: 3.5rem; display: grid; gap: 3rem 2rem; }
@media (min-width: 640px) { .siatka-zespolu { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .siatka-zespolu { grid-template-columns: repeat(4, 1fr); } }
.osoba__dane { margin-top: 1.25rem; border-top: 1px solid var(--line); padding-top: 1rem; }
.osoba__imie { font-family: var(--font-display); font-size: 1.125rem; letter-spacing: -0.02em; }
.osoba__opis { margin-top: 0.75rem; font-size: 0.875rem; line-height: 1.7; color: var(--muted); }

/* =========================== OPINIE ============================== */
.opinia { display: flex; flex-direction: column; }
.opinia blockquote { flex: 1; }
.opinia blockquote p { font-family: var(--font-display); font-size: 1.125rem; line-height: 1.6; letter-spacing: -0.02em; }
.opinia footer { margin-top: 2rem; border-top: 1px solid var(--line); padding-top: 1.25rem; }
.opinia footer p:first-child { font-size: 0.875rem; }

/* ========================= WARTOŚCI (O NAS) ====================== */
.wartosci { margin-top: 3rem; display: grid; gap: 2.5rem; }
@media (min-width: 640px) { .wartosci { grid-template-columns: repeat(2, 1fr); } }
.wartosc { border-top: 1px solid var(--line); padding-top: 1.5rem; }
.wartosc h2 { font-family: var(--font-display); font-size: 1.25rem; letter-spacing: -0.02em; }
.wartosc p { margin-top: 0.75rem; color: var(--muted); }

/* =========================== CTA ================================= */
.cta__siatka { margin-top: 3rem; display: grid; gap: 3rem; }
@media (min-width: 1024px) { .cta__siatka { grid-template-columns: 7fr 5fr; align-items: end; } }
@media (min-width: 1024px) { .cta__prawa { justify-self: end; } }
.telefon-blok { display: inline-flex; flex-direction: column; }
.telefon-blok__numer { margin-top: 0.75rem; font-family: var(--font-display); font-size: var(--t-display-m); letter-spacing: -0.025em; transition: color .2s; }
.telefon-blok:hover .telefon-blok__numer { color: var(--accent); }
.sekcja--atrament .telefon-blok__numer { color: var(--paper); }
.sekcja--atrament .telefon-blok:hover .telefon-blok__numer { color: rgba(255,255,255,0.7); }
.cta__przyciski { margin-top: 2rem; display: flex; flex-direction: column; gap: 0.75rem; }
@media (min-width: 640px) { .cta__przyciski { flex-direction: row; } }

/* =========================== KONTAKT ============================= */
.kontakt__siatka { display: grid; gap: 3.5rem; }
@media (min-width: 1024px) { .kontakt__siatka { grid-template-columns: 7fr 5fr; } }
.pole { margin-bottom: 1.75rem; }
.pole label { display: block; }
.pole__podpowiedz { margin-top: 0.5rem; font-size: 0.875rem; color: var(--muted); }
.pole input[type="text"], .pole input[type="email"], .pole input[type="tel"], .pole textarea {
  width: 100%; margin-top: 0.5rem; padding: 0.75rem 1rem;
  border: 1px solid var(--line); border-radius: var(--radius); background: var(--paper);
  transition: border-color .2s;
}
.pole textarea { resize: vertical; min-height: 9rem; }
.pole input:focus, .pole textarea:focus { border-color: var(--accent); outline: none; }
.pole--blad input, .pole--blad textarea { border-color: var(--accent-ink); }
.blad { margin-top: 0.5rem; font-size: 0.875rem; color: var(--accent-ink); }
.zgoda { border-top: 1px solid var(--line); padding-top: 1.5rem; margin-bottom: 1.75rem; }
.zgoda label { display: flex; align-items: flex-start; gap: 0.75rem; cursor: pointer; }
.zgoda input { margin-top: 0.35rem; width: 1rem; height: 1rem; flex-shrink: 0; accent-color: var(--accent); }
.zgoda span { font-size: 0.875rem; line-height: 1.7; color: var(--muted); }
.zgoda__nota { margin-top: 1rem; font-size: 0.75rem; line-height: 1.7; color: var(--muted); }
.formularz__akcje { display: flex; flex-direction: column; gap: 1rem; }
@media (min-width: 640px) { .formularz__akcje { flex-direction: row; align-items: center; } }
.komunikat { margin-top: 1.5rem; border: 1px solid var(--line); background: var(--surface); padding: 1rem; font-size: 0.875rem; }
.sukces { border: 1px solid var(--line); padding: 2rem; }
.honeypot { position: absolute; left: -9999px; opacity: 0; height: 0; overflow: hidden; }
.dane-kontaktowe { margin-top: 2rem; border-block: 1px solid var(--line); }
.dane-kontaktowe > div { display: flex; align-items: baseline; justify-content: space-between; gap: 1.5rem; padding-block: 1rem; }
.dane-kontaktowe > div + div { border-top: 1px solid var(--line); }
.dane-kontaktowe dd { text-align: right; }
.mapa { aspect-ratio: 16 / 9; border: 1px solid var(--line); background: var(--surface); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.75rem; padding: 2rem; text-align: center; }
.mapa iframe { width: 100%; height: 100%; border: 0; }
/* wariant z realną mapą: padding i wyśrodkowanie były pod tekstowy zastępnik,
   przy osadzonym iframie mapa ma wypełnić całą ramkę */
.mapa--osadzona { padding: 0; gap: 0; display: block; }
.karta-rejestrowa { margin-top: 2.5rem; border: 1px solid var(--line); background: var(--surface); padding: 1.5rem; }
.karta-rejestrowa address { font-style: normal; font-size: 0.875rem; color: var(--muted); margin-top: 1rem; }
.karta-rejestrowa address p + p { margin-top: 0.375rem; }

/* ========================== DOKUMENT ============================= */
.dokument section + section { margin-top: 3.5rem; }
.dokument h2 { font-family: var(--font-display); font-size: 1.5rem; letter-spacing: -0.02em; margin-top: 0.75rem; }
.dokument .tekst { margin-top: 1.25rem; }
.dokument .lista-zakresu { margin-top: 1.25rem; border-top: 1px solid var(--line); padding-top: 1.25rem; }

/* =========================== STOPKA ============================== */
.stopka { background: var(--ink); color: var(--paper); padding-top: 5rem; padding-bottom: 7rem; }
@media (min-width: 1024px) { .stopka { padding-bottom: 5rem; } }
.stopka__siatka { margin-top: 3rem; display: grid; gap: 3rem; }
@media (min-width: 1024px) { .stopka__siatka { grid-template-columns: 5fr 3fr 4fr; } }
.stopka__marka { font-family: var(--font-display); font-size: var(--t-display-m); letter-spacing: -0.025em; }
.stopka__tagline { margin-top: 1rem; color: rgba(255,255,255,0.6); max-width: 24rem; }
.stopka a { color: rgba(255,255,255,0.8); transition: color .2s; }
.stopka a:hover { color: var(--paper); text-decoration: underline; text-underline-offset: 4px; }
.stopka__lista { margin-top: 1.25rem; }
.stopka__lista li + li { margin-top: 0.75rem; }
.stopka address { font-style: normal; font-size: 0.875rem; color: rgba(255,255,255,0.7); margin-top: 1.25rem; }
.stopka address p + p { margin-top: 0.5rem; }
.stopka__telefon { display: inline-flex; flex-direction: column; margin-top: 2.5rem; }
.stopka__telefon span:last-child { font-family: var(--font-display); font-size: 1.5rem; letter-spacing: -0.025em; color: var(--paper); }
.stopka__dol {
  margin-top: 4rem; border-top: 1px solid rgba(255,255,255,0.15); padding-top: 2rem;
  display: flex; flex-direction: column; gap: 1rem;
  font-size: 0.875rem; color: rgba(255,255,255,0.5);
}
@media (min-width: 640px) { .stopka__dol { flex-direction: row; align-items: center; justify-content: space-between; } }
.stopka .metryka { color: rgba(255,255,255,0.6); }

/* ======================== BANER COOKIES ========================== */
.cookies {
  position: fixed; inset-inline: 0; bottom: 0; z-index: 60;
  max-width: var(--max); margin-inline: auto;
  background: var(--paper); border-top: 1px solid var(--line); padding: 1.25rem;
}
@media (min-width: 1024px) {
  /* na szerokim ekranie doklejamy baner do prawej krawędzi STRONY, nie okna —
     stąd doliczony boczny margines ramy, gdy okno jest szersze niż --max */
  .cookies {
    inset-inline: auto; margin-inline: 0;
    /* 100%, nie 100vw — vw wlicza pasek przewijania i baner wypadał o kilka
       pikseli za daleko od krawędzi strony */
    right: max(1.5rem, calc((100% - var(--max)) / 2 + 1.5rem));
    bottom: 1.5rem; max-width: 28rem; border: 1px solid var(--line); padding: 1.5rem;
  }
}
.cookies[hidden] { display: none; }
.cookies__tekst { margin-top: 0.75rem; font-size: 0.875rem; line-height: 1.7; color: var(--muted); }
.cookies__tekst a { color: var(--ink); text-decoration: underline; text-underline-offset: 4px; }
.cookies__akcje { margin-top: 1.25rem; display: flex; flex-direction: column; gap: 0.75rem; }
@media (min-width: 640px) { .cookies__akcje { flex-direction: row; } .cookies__akcje .btn { flex: 1; } }

/* ====================== POMOCNICZE ODSTĘPY ======================= */
.mt-1 { margin-top: 0.5rem; }
.mt-2 { margin-top: 1rem; }
.mt-3 { margin-top: 1.5rem; }
.mt-4 { margin-top: 2rem; }
.mt-5 { margin-top: 2.5rem; }
.mt-6 { margin-top: 3rem; }
.mt-8 { margin-top: 4rem; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

@media print {
  .naglowek, .pasek-telefonu, .cookies, .filtry { display: none !important; }
  body { padding-bottom: 0; }
}