/* ==========================================================================
   Bocian — wynajem podnośników koszowych
   Kolory i wymiary odczytane z projektu w Figmie (ramka 1:149).
   Kolory wyłącznie przez zmienne — nie wpisuj hexów w regułach.
   ========================================================================== */

/* --- Fonty ---------------------------------------------------------------
   Cała strona składa się krojem Core Mellow (S-Core) w odmianach zwężonych:
   47 Cn Regular na treść, 77 Cn ExtraBold na nagłówki. Pliki leżą w fonts/
   i są serwowane z własnego serwera, nie z CDN — to warunek ustalenia, że
   strona nie potrzebuje banera cookies.

   UWAGA: Core Mellow to krój komercyjny. Licencja webowa do potwierdzenia
   przed prawdziwym startem strony — szczegóły w PRD.
   --------------------------------------------------------------------------- */

/* Odmiany zwężone (Cn) — cała treść i nagłówki. Rozróżnia je font-stretch,
   bo menu korzysta z Core Mellow o normalnej szerokości (patrz niżej). */

@font-face {
  font-family: "Core Mellow";
  src: url("../fonts/CoreMellow-47CnRegular.otf") format("opentype");
  font-weight: 400;
  font-stretch: 75%;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Core Mellow";
  src: url("../fonts/CoreMellow-57CnMedium.otf") format("opentype");
  font-weight: 500;
  font-stretch: 75%;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Core Mellow";
  src: url("../fonts/CoreMellow-67CnBold.otf") format("opentype");
  font-weight: 700;
  font-stretch: 75%;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Core Mellow";
  src: url("../fonts/CoreMellow-77CnExtraBold.otf") format("opentype");
  font-weight: 800;
  font-stretch: 75%;
  font-style: normal;
  font-display: swap;
}

/* Odmiana o normalnej szerokości — w projekcie używa jej wyłącznie menu. */
@font-face {
  font-family: "Core Mellow";
  src: url("../fonts/CoreMellow-65Bold.otf") format("opentype");
  font-weight: 700;
  font-stretch: 100%;
  font-style: normal;
  font-display: swap;
}


:root {
  /* paleta — wersja 3 projektu: pomarańcz jest tłem strony, ciemny kolor
     dostają karty i sekcje. Wcześniej było odwrotnie. */
  --orange: #fda832;
  /* ciemniejszy odcień pomarańczu — pionowy pas za odznaką w „co nas wyróżnia" */
  --orange-deep: #f69328;
  /* ciepła czerń — karty, sekcje, tekst (wcześniej ciemna zieleń #162f30) */
  --ink: #3c3c3b;
  --white: #ffffff;
  /* ciepła biel — tekst na pomarańczowym tle (baner CTA) */
  --cream: #fff9f2;

  --off-white: #f5f5f5;
  --dot-idle: #d9d9d9;

  /* role — tłem strony jest pomarańcz, treść siedzi na ciemnych kartach */
  --fg: var(--ink);
  --bg: var(--orange);

  /* typografia */
  --font-display: "Core Mellow", "Segoe UI", system-ui, sans-serif;
  --font-body: "Core Mellow", "Segoe UI", system-ui, -apple-system, sans-serif;

  /* siatka */
  --max-width: 1728px;
  /* Margines boczny wszystkich sekcji. Rośnie płynnie z szerokością ekranu:
     24 px na telefonie, 96 px przy 1920 px (5vw trafia dokładnie w tę wartość).
     .wrap ma go wliczonego w max-width, więc przy 1920 px treść ma równo
     1728 px — tyle, ile pasek menu i karty w projekcie. */
  --gutter: clamp(24px, 5vw, 96px);
  --radius: 16px;

  /* Wysokość paska kropek pod sliderem: 24 px odstępu + 12 px kropki.
     Trzymamy to w zmiennej, bo karty liczb równają się do dolnej krawędzi
     ZDJĘCIA, nie do kropek — muszą więc odjąć dokładnie ten pasek. */
  --pasek-kropek: 36px;


}

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

html { scroll-behavior: smooth; }

/* przyklejony pasek zasłaniałby górę sekcji, do której skacze kotwica
   (dotyczy też stopki — to cel linku „Kontakt") */
section[id], footer[id] { scroll-margin-top: 128px; }

/* Tłem strony jest szachownica z dwóch pomarańczy. Widać ją dookoła sekcji,
   bo każda z nich jest wciętym blokiem o szerokości treści, nie pasem na całą
   szerokość okna. Pole ma 14 px, więc powtarzalny kafel ma 28 px. */
body {
  margin: 0;
  background-color: var(--bg);
  background-image:
    linear-gradient(45deg, var(--orange-deep) 25%, transparent 25% 75%, var(--orange-deep) 75%),
    linear-gradient(45deg, var(--orange-deep) 25%, transparent 25% 75%, var(--orange-deep) 75%);
  background-size: 28px 28px;
  background-position: 0 0, 14px 14px;
  color: var(--fg);
  font-family: var(--font-body);
  font-size: 22px;
  line-height: 1.45;
  /* domyślnie odmiana zwężona — menu nadpisuje to na 100% */
  font-stretch: 75%;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
ul { margin: 0; padding: 0; list-style: none; }
p { margin: 0 0 1em; }

/* Margines boczny robi przezroczysta ramka, nie padding. Dzięki temu tło
   sekcji można przyciąć do `padding-box`: kończy się na krawędzi treści,
   ale obejmuje odstępy pionowe, które padding by z niego wyciął. */
.wrap {
  max-width: calc(var(--max-width) + 2 * var(--gutter));
  margin-inline: auto;
  border-inline: var(--gutter) solid transparent;
}

/* Sekcje są pomarańczowymi blokami o szerokości treści — szachownica tła
   zostaje widoczna tylko w marginesach bocznych i pod paskiem prawnym. */
.hero > .wrap,
.section > .wrap,
.cta > .wrap,
.footer > .wrap:not(:last-child) {
  background: var(--orange);
  background-clip: padding-box;
}

.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  margin: -1px; padding: 0; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ==========================================================================
   HEADER
   ========================================================================== */

/* Nagłówek jedzie z przewijaniem. W spoczynku stoi tam, gdzie w projekcie
   (pasek 79 px od góry, krążek logo 15 px). Po przewinięciu dostaje klasę
   .is-stuck: podjeżdża pod górną krawędź. Logotyp siedzi w całości w pasku,
   więc nic nie trzeba przy tym skalować. */
.header {
  position: fixed;
  inset: 40px 0 auto;
  z-index: 50;
  padding-inline: var(--gutter);
  transition: top 0.25s ease;
}

.header.is-stuck { top: 12px; }

.header__bar {
  /* punkt odniesienia dla rozwiniętego menu — bez tego liczyłoby się ono
     względem całego nagłówka i wystawało poza pasek */
  position: relative;
  max-width: var(--max-width);
  height: 100px;
  margin-inline: auto;
  /* Korekta optyczna, nie pomyłka: po lewej stoi okrągłe logo, które dotyka
     linii wcięcia tylko w jednym punkcie — przy krawędziach paska jest już
     ok. 52 px od brzegu, więc przy równych 34 px lewa strona czytała się na
     luźniejszą od prawej, gdzie numer telefonu ma płaską krawędź. Mniejsza
     liczba po lewej daje równe ŚWIATŁO, a nie równą wartość. */
  padding-inline: 44px 54px;
  background: var(--ink);
  display: flex;
  align-items: center;
  gap: 24px;
}

/* Logo to okrągła odznaka wyższa od paska — wystaje nad i pod niego, jak
   w projekcie. Ujemny margines pionowy pozwala jej wyjść poza pasek,
   nie rozpychając go na boki. */
.logo {
  flex: none;
  width: 160px;
  height: 160px;
  /* odznaka jest o 60 px wyższa od paska, więc wystaje po 30 px nad i pod niego */
  margin-block: -30px;
}

.logo img { width: 100%; height: 100%; }

.nav {
  display: flex;
  align-items: stretch;
  margin-inline: auto;
}

.nav__link {
  display: flex;
  align-items: center;
  height: 100px;
  padding-inline: 40px;
  /* Core Mellow 65 Bold — odmiana o normalnej szerokości, nie zwężona */
  font-stretch: 100%;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 0.36px;
  color: var(--white);
  white-space: nowrap;
  transition: background-color 0.15s ease, color 0.15s ease;
}

/* Pasek jest teraz ciemny, więc inwersja idzie w drugą stronę niż wcześniej:
   podświetlenie to pomarańcz z ciemnym tekstem. */
.nav__link:hover,
.nav__link:focus-visible,
.nav__link.is-active {
  background: var(--orange-deep);
  color: var(--ink);
}

.header__phone {
  display: flex;
  align-items: center;
  gap: 16px;
  /* W projekcie numer składa Core Mellow 55 Medium — odmiana o normalnej
     szerokości w wadze 500. Tego pliku nie mamy; najbliższy jest 65 Bold,
     czyli ta sama szerokość, ale cięższa kreska. */
  font-size: 30px;
  font-stretch: 100%;
  font-weight: 700;
  white-space: nowrap;
  color: var(--white);
}

/* line-height: 1 zawęża pudełko tekstu do samych liter — bez tego numer
   wydaje się przesunięty względem ikony, mimo wyśrodkowania w osi. */
.header__phone span { line-height: 1; }

.header__phone img { width: 43px; height: 43px; flex: none; }

.nav-toggle { display: none; }

/* ==========================================================================
   HERO
   ========================================================================== */

/* Hero to pomarańczowy blok z nagłówkiem po lewej i konturową ilustracją
   wtopioną w tło po prawej. Góra robi miejsce na przyklejony pasek menu,
   który leży nad nim. */
.hero { padding-top: 140px; }

/* Wcięcia z projektu: blok ma 660 px wysokości, nagłówek siedzi 50 px od góry
   i dołu, a 139 px od lewej krawędzi bloku. */
.hero__blok {
  position: relative;
  padding: 50px clamp(24px, 7.2vw, 139px);
}

.hero__title {
  /* 140 px w projekcie przy szerokości 1920; niżej skaluje się płynnie. */
  position: relative;
  z-index: 1;
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(2.25rem, 0.3rem + 7.3vw, 8.75rem);
  font-weight: 800;
  line-height: 1;
  text-transform: uppercase;
  color: var(--ink);
}

/* Każda linia osobno — projekt łamie nagłówek w czterech stałych miejscach. */
.hero__title span { display: block; }

/* --- ilustracja ---
   Pudełko obejmuje wszystkie trzy elementy i trzyma ich wzajemne proporcje.
   Zakotwiczone w prawym dolnym rogu bloku, bo tam leży w projekcie. */
.hero__ilustracja {
  position: absolute;
  /* Stała wartość, nie procent: scena ma trzymać od prawej krawędzi dokładnie
     tyle samo, co numer telefonu w pasku menu nad nią. Przy 1.39% odstęp
     zmieniał się z szerokością ekranu i przy 1488 px wychodziło 18 px. */
  right: 54px;
  bottom: 5.17%;
  z-index: 0;
  width: 36.71%;
  aspect-ratio: 634.3 / 526.85;
}

.rys { position: absolute; }
.rys img { display: block; width: 100%; height: auto; }

.rys--kamienica { left: 56.17%; top: 0;      width: 43.83%; }
.rys--drzewo    { left: 16.60%; top: 20.88%; width: 50.29%; }
.rys--podnosnik { left: 24px;   top: 48.94%; width: 38.47%; }

@media (max-width: 1000px) {
  /* Odstęp paska od góry i jego wysokość trzymamy w zmiennych, bo blok hero
     musi zaczynać się dokładnie pod paskiem — inaczej wychodzi między nimi
     pasek szachownicy. Dzięki temu zmiana którejkolwiek z tych wartości
     przelicza się sama. */
  :root { --naglowek-gora: 28px; --naglowek-pasek: 64px; }

  .hero { padding-top: calc(var(--naglowek-gora) + var(--naglowek-pasek)); }
  /* Dołu nie wcinamy wcale: tuż pod blokiem hero zaczyna się górne wcięcie
     sekcji „o firmie" (48 px) w tym samym pomarańczu, więc oba odstępy czytają
     się jako jeden. Dzięki temu nagłówek ma 48 px nad sobą i 48 px pod sobą,
     licząc do ciemnej karty. Zmiana tamtych 48 px wymaga poprawienia tych. */
  .hero__blok { padding-block: 48px 0; }
  /* na wąskim ekranie rysunek schodzi na drugi plan, żeby nie wchodzić
     w nagłówek — zostaje jako delikatna faktura w rogu */
  .hero__ilustracja { width: 58%; opacity: 0.55; }
}

/* --- animacja wejścia hero ---
   Nagłówek wstaje linia po linii, potem scena buduje się od tła: kamienica,
   drzewo, a na końcu podnośnik wjeżdża z lewej — tak, jak faktycznie
   podjeżdża pod budynek. `backwards` trzyma stan początkowy w trakcie
   opóźnienia, inaczej elementy mrugnęłyby w docelowym miejscu. */
@keyframes hero-wstaje {
  from { opacity: 0; transform: translateY(28px); }
  to   { opacity: 1; transform: none; }
}

@keyframes hero-podjezdza {
  from { opacity: 0; transform: translateX(-64px); }
  to   { opacity: 1; transform: none; }
}

/* Korona drzewa ledwo zauważalnie kołysze się na wietrze.
   Cykl zaczyna się i kończy w pozycji spoczynkowej — przy `alternate`
   z klatkami od -0.8deg animacja skakała na starcie z zera na skraj
   wychylenia i było to widać jako szarpnięcie. */
@keyframes hero-kolysze {
  0%, 100% { transform: rotate(0deg); }
  25%      { transform: rotate(-0.8deg); }
  75%      { transform: rotate(0.8deg); }
}

.hero__title span {
  animation: hero-wstaje 0.75s cubic-bezier(0.2, 0.7, 0.3, 1) backwards;
}

.hero__title span:nth-child(1) { animation-delay: 0.08s; }
.hero__title span:nth-child(2) { animation-delay: 0.2s; }
.hero__title span:nth-child(3) { animation-delay: 0.32s; }
.hero__title span:nth-child(4) { animation-delay: 0.44s; }

.rys { animation: hero-wstaje 0.9s cubic-bezier(0.2, 0.7, 0.3, 1) backwards; }

.rys--kamienica { animation-delay: 0.45s; }
.rys--drzewo    { animation-delay: 0.65s; }

.rys--podnosnik {
  animation-name: hero-podjezdza;
  animation-duration: 1.1s;
  animation-delay: 0.85s;
}

/* Kołysanie siedzi na obrazku, a nie na pozycjonowanym elemencie — obie
   animacje ruszają `transform`, więc muszą być na osobnych warstwach. */
.rys--drzewo img {
  transform-origin: 50% 100%;
  /* Wychylenie jest minimalne — przez 7 s korona przesuwa się ledwie o kilka
     pikseli. Bez własnej warstwy przeglądarka przerysowuje ten dość złożony
     SVG (maski + <use>) co klatkę i zaokrągla pozycję do pełnych pikseli,
     przez co ruch idzie skokami. `will-change` zdejmuje to na GPU. */
  will-change: transform;
  animation: hero-kolysze 7s ease-in-out 1.8s infinite;
}

@media (prefers-reduced-motion: reduce) {
  .hero__title span,
  .rys,
  .rys--drzewo img,
  .cta.wszedl .rys-cta--drzewo img { animation: none; }
}

/* ==========================================================================
   SEKCJE
   ========================================================================== */

/* Odstępy pionowe siedzą na .wrap, nie na sekcji — inaczej wypadłyby poza
   pomarańczowy blok i prześwitywałaby przez nie szachownica. */
.section > .wrap { padding-block: 80px; }

/* Treść leży teraz na ciemnych kartach rozpiętych na pełną szerokość, a nie na
   jasnych pasach — tłem strony jest pomarańcz, więc karta sama się odcina.
   Wspólny wygląd karty; sekcje różnią się tylko odstępami. */
/* Duże bloki sekcji mają w projekcie ostre narożniki — zaokrąglenie 16 px
   zostaje tylko dla drobnych elementów: kafli liczb, ikon i zdjęć. */
.karta-ciemna {
  background: var(--ink);
  color: var(--cream);
}

.karta-ciemna--pad { padding: clamp(32px, 4vw, 72px); }

/* --- karta „co nas wyróżnia" ---
   Lewa kolumna to nagłówek i lista przewag, prawa — pomarańczowy pas na całą
   wysokość karty z odznaką pośrodku. Pas nie dochodzi do prawej krawędzi:
   za nim zostaje jeszcze kawałek ciemnego tła, tak jak w projekcie. */
/* Karta ma w projekcie 1728 × 760 px, a treść jest w niej wcięta o 142 px
   z lewej i prawej — odznaka kończy się dokładnie tam, gdzie zaczynają się
   punktory po drugiej stronie. Stąd własny padding zamiast wspólnego
   `karta-ciemna--pad`. */
.wyroznia {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) min(450px, 31%);
  column-gap: clamp(24px, 3vw, 60px);
  align-items: center;
  padding: clamp(32px, 4.6vw, 88px) clamp(24px, 7.4vw, 142px) clamp(40px, 7.6vw, 145px);
  overflow: hidden;
}

.wyroznia__text { min-width: 0; }

/* Pas rozciąga się na pełną wysokość karty, więc musi wyjść poza jej padding. */
/* Ujemne marginesy wyprowadzają pas poza padding karty, żeby sięgał jej górnej
   i dolnej krawędzi — w projekcie ma pełne 760 px wysokości. */
.wyroznia__znak {
  position: relative;
  align-self: stretch;
  display: grid;
  place-items: center;
  margin-block: calc(-1 * clamp(32px, 4.6vw, 88px)) calc(-1 * clamp(40px, 7.6vw, 145px));
}

/* Pas jest węższy od odznaki (340 wobec 450 px) i dzieli z nią oś pionową.
   Wyśrodkowanie przez `left: 50%` zamiast sztywnego odsunięcia od krawędzi
   sprawia, że odznaka zostaje z nim wyrównana na każdej szerokości ekranu. */
.wyroznia__znak::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 75.56%;
  transform: translateX(-50%);
  background: var(--orange-deep);
}

.wyroznia__znak img {
  position: relative;
  width: 100%;
  height: auto;
}

@media (max-width: 1000px) {
  .wyroznia { grid-template-columns: minmax(0, 1fr); row-gap: 40px; }

  /* Na wąskim ekranie pas kładzie się poziomo pod listą i rozciąga na pełną
     szerokość karty, a odznaka zostaje na nim wyśrodkowana. */
  .wyroznia__znak {
    /* Bez ujemnego marginesu u dołu: pas ma być wstęgą w środku ciemnej karty,
       więc jej dolne wcięcie zostaje widoczne jako ciemny pas pod odznaką.
       Na desktopie pas sięga krawędzi karty i tam ujemny margines zostaje. */
    margin-block: 0;
    /* Bez wcięcia: wysokość pasa nie zależy już od tego elementu, tylko jest
       ułamkiem wysokości odznaki — patrz reguła `::before` niżej. */
    padding-block: 0;
  }

  /* Pas jest NIŻSZY od odznaki i wyśrodkowany na jej osi, żeby odznaka
     wystawała nad niego i pod niego. Podstawa to 55% wysokości odznaki plus
     po 24 px u góry i u dołu — stąd `+ 48px`. */
  .wyroznia__znak::before {
    top: 50%;
    bottom: auto;
    left: 50%;
    height: calc(55% + 48px);
    width: calc(100% + 2 * clamp(24px, 7.4vw, 142px));
    transform: translate(-50%, -50%);
  }

  .wyroznia__znak img { max-width: 260px; }
}

#o-firmie > .wrap { padding-block: 72px 80px; }

/* Dolnego wcięcia tu nie ma celowo: pod spodem leży baner CTA w tym samym
   pomarańczu, więc oba odstępy zlewają się w jeden i nagłówek CTA dostawał
   153 px światła u góry przy 67 px u dołu. Odstęp nad tym nagłówkiem wyznacza
   teraz wyłącznie wcięcie samego banera. */
.section--wroclaw > .wrap { padding-block: 98px 0; }

/* galeria realizacji — ciemny blok przylega wprost do sekcji nad nim */
.section--tight > .wrap { padding-block: 0; }

/* 40 px szachownicy między kartą galerii a stopką. Wcięcie siedzi na samej
   sekcji, a nie na `.wrap` — wzór tła strony widać wyłącznie poza tłem `.wrap`,
   i o to odcięcie tu chodzi. Wewnątrz `.wrap` wyszedłby pomarańczowy pas. */
.section--tight { padding-bottom: 40px; }

/* 280 px nad nagłówkiem i 160 px pod podpisami — tyle zostawia projekt
   między tą sekcją a sąsiednimi blokami. */
/* Blok ma 760 px wysokości, a treść siedzi w nim wyśrodkowana w pionie.
   `min-height`, nie `height` — gdy kafle rozsypią się na kilka rzędów (tablet,
   telefon), blok rośnie, zamiast przycinać zawartość. */
.section--uslugi > .wrap {
  display: flex;
  flex-direction: column;
  justify-content: center;
  /* 760 px przy 1920 (39.58vw) i proporcjonalnie mniej na węższych ekranach —
     sztywne 760 zostawiało przy 1400 px prawie 280 px pustki nad i pod kaflami. */
  min-height: clamp(420px, 39.58vw, 760px);
  padding-block: clamp(32px, 3.3vw, 64px);
}

/* 80 px przy 1920 i interlinia 60 px — wartości wprost z projektu.
   Dolny odstęp też stamtąd: 92 px do rzędu kafli. */
.section__title {
  margin: 0 0 clamp(40px, 4.8vw, 92px);
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 4.51vw - 0.42rem, 5rem);
  font-weight: 800;
  line-height: 0.75;
  text-align: center;
  text-transform: lowercase;
  color: inherit;
}

/* Na ciemnych sekcjach nagłówek jest pomarańczowy, na pomarańczowym tle
   strony — ciemny. Stąd kolor brany z kontekstu, a nie na sztywno. */
.karta-ciemna .section__title,
.section--tight .section__title { color: var(--orange); }

.display {
  margin: 0 0 24px;
  font-family: var(--font-display);
  font-size: clamp(2rem, 1.2rem + 2.4vw, 3.125rem);
  font-weight: 800;
  line-height: 1.2;
  color: var(--ink);
}

.display--lower { text-transform: lowercase; }

/* --- układ dwukolumnowy: tekst + zdjęcie --- */

/* Kolumny równane górą; zdjęcie trzyma proporcje z projektu. */
.split {
  display: grid;
  row-gap: 40px;
  align-items: start;
}

/* Proporcje kolumn i odstęp między nimi bierzemy wprost z projektu; na węższych
   ekranach odstęp maleje płynnie, żeby nie zjadał miejsca na treść. */
.split--hero {
  grid-template-columns: minmax(0, 749fr) minmax(0, 643fr);
  column-gap: clamp(24px, 7.6vw, 129px);
  /* Kolumna tekstu rozciąga się na wysokość zdjęcia, żeby karty liczb mogły
     usiąść na jego dolnej krawędzi zamiast wisieć w powietrzu. */
  align-items: stretch;
}

/* `min-width: 0` na obu kolumnach jest konieczne: ścieżka `1fr` to w istocie
   `minmax(auto, 1fr)`, więc minimum kolumny wyznacza najszersza niełamliwa
   treść w środku. Rząd z liczbami rozpychał przez to kolumnę ponad wcięcie
   ciemnej karty i akapity wychodziły 55 px poza jej krawędź. */
.split__text,
.split__media { min-width: 0; }

.split--hero .split__text {
  display: flex;
  flex-direction: column;
}

/* `auto` spycha karty na sam dół kolumny, a odjęcie paska kropek sprowadza je
   z dołu kolumny medialnej na dolną krawędź samego zdjęcia. */
.split--hero .liczby {
  margin-top: auto;
  margin-bottom: var(--pasek-kropek);
}

/* Mapa jest tu pierwszą kolumną — w projekcie leży po lewej, tekst po prawej. */
.split--mapa {
  grid-template-columns: minmax(0, 619fr) minmax(0, 748fr);
  column-gap: clamp(24px, 9vw, 153px);
}

/* Proporcja z projektu obowiązuje jako minimum. Gdy kolumna tekstu okaże się
   wyższa (dłuższe akapity, większy stopień pisma), zdjęcie dorasta do niej —
   bez tego dolne krawędzie obu kolumn się rozjeżdżają i karty liczb nie mają
   do czego się równać. `cover` pilnuje, żeby kadr się nie rozciągnął. */
.split--hero .split__media { height: 100%; }
/* Slider oddaje pasek kropek, więc samo zdjęcie kończy się dokładnie tam,
   gdzie dolna krawędź kart liczb w kolumnie obok. */
.split--hero .slider { height: calc(100% - var(--pasek-kropek)); }
.split--hero .slider__track { height: 100%; }

.split__media .slider__slide {
  aspect-ratio: 643 / 544;
  height: auto;
  min-height: 100%;
}

/* Interlinia ciaśniejsza niż domyślna dla strony — inaczej kolumna tekstu rośnie
   ponad wysokość z projektu i zdjęcie obok wygląda przy niej na przytłoczone.
   Przy 1920 px oba bloki mają dzięki temu po 544 px. */
.split__text p {
  font-size: clamp(1.25rem, 1.15rem + 0.35vw, 1.625rem);
  line-height: 1.4;
}

/* 79 px od dolnej krawędzi nagłówka do pierwszego punktora, 20 px między nimi. */
.benefits {
  display: grid;
  gap: 20px;
  margin-top: clamp(32px, 4.1vw, 79px);
}

/* Pozycja jest zwykłym blokiem, nie kontenerem flex — inaczej wyróżnienie
   i reszta zdania stają się osobnymi elementami siatki i łamią się niezależnie,
   układając tekst w dwie rozjeżdżające się kolumny. */
/* 34 px w projekcie; wyróżnienie składa odmiana o normalnej szerokości,
   reszta zdania — zwężona regularna. Wcięcie 81 px to szerokość punktora
   (40 px) plus 41 px światła do tekstu. */
.benefits li {
  position: relative;
  padding-left: clamp(40px, 4.2vw, 81px);
  font-size: clamp(1.125rem, 0.458rem + 1.389vw, 2.125rem);
  line-height: 1.4;
}

/* pomarańczowy kwadracik zamiast kropki */
/* Punktor to zaokrąglony kwadrat 40 × 40 o promieniu 16 px — nie kropka.
   Równany do pierwszego wiersza, nie do środka pozycji, żeby przy zawinięciu
   tekstu do dwóch linii nie zjeżdżał na dół. */
.benefits li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.12em;
  width: clamp(22px, 2.1vw, 40px);
  height: clamp(22px, 2.1vw, 40px);
  border-radius: var(--radius);
  background: var(--orange);
}

/* wyróżnienie składa się odmianą o normalnej szerokości, tak jak menu */
.benefits strong {
  font-stretch: 100%;
  font-weight: 700;
}

/* ==========================================================================
   USŁUGI
   ========================================================================== */

/* Sześć kafli po 224 px z odstępem 20 px daje rząd szerokości 1444 px.
   W projekcie jest on wyśrodkowany w bloku 1728 px, czyli wcięty po 142 px
   z każdej strony — stąd max-width, a nie rozciąganie na całą szerokość. */
/* Sześć kafli po 224 px z odstępem 20 px daje rząd szerokości 1444 px,
   wyśrodkowany w bloku 1728 px — czyli wcięty o 142 px z każdej strony.
   Wcięcie podajemy w procentach (1444 / 1728 = 83.56%), a nie sztywno:
   dzięki temu proporcja z projektu trzyma się na każdej szerokości ekranu,
   zamiast znikać, gdy okno zwęzi się poniżej 1728 px. */
.uslugi {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 20px;
  width: min(1444px, 83.56%);
  margin-inline: auto;
}

.usluga {
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Kafel jest częścią pliku SVG — jasne tło, ikona i ciemny pasek u dołu
   siedzą w jednym obrazku, więc nie ma tu osobnej warstwy na kartę. */
/* 224 px to rozmiar z projektu i obowiązuje jako GÓRNA granica. Poniżej kafel
   zwęża się razem z kolumną, a `aspect-ratio` pilnuje, żeby malała też jego
   wysokość — przy sztywnym `height: 224px` kafle zostawały wysokie na wąskiej
   kolumnie i sekcja robiła się trzykrotnie wyższa od ekranu telefonu. */
.usluga__ikona {
  width: 100%;
  max-width: 224px;
  height: auto;
  aspect-ratio: 1;
}

/* Core Mellow 65 Bold — odmiana o normalnej szerokości, nie zwężona,
   jak w menu i danych kontaktowych. */
.usluga__label {
  /* W projekcie jest 20 px, ale interlinia 32 px przy stopniu 22 px dokłada
     jeszcze ok. 5 px światła nad pierwszym wierszem i odstęp czytał się na
     większy niż w Figmie. 8 px daje optycznie to, co projekt zakłada. */
  margin: 8px auto 0;
  max-width: 224px;
  font-stretch: 100%;
  font-weight: 700;
  font-size: 22px;
  line-height: 32px;
  text-align: center;
  color: var(--ink);
}

/* --- budowanie sekcji przy wejściu w okno ---
   Stan początkowy wisi na klasie .js-wjazd ustawianej przez skrypt: przy
   wyłączonym JS nic się nie chowa. Klasę .wszedl dokłada obserwator
   w `main.js`, gdy sekcja wjedzie w okno. */
.js-wjazd [data-wjazd] .section__title,
.js-wjazd [data-wjazd] .usluga,
.js-wjazd [data-wjazd] .cta__text span,
.js-wjazd [data-wjazd] .cta__phone {
  opacity: 0;
  transform: translateY(26px) scale(0.94);
  transition:
    opacity 0.55s ease,
    transform 0.55s cubic-bezier(0.2, 0.7, 0.3, 1);
}

.js-wjazd [data-wjazd].wszedl .section__title,
.js-wjazd [data-wjazd].wszedl .usluga,
.js-wjazd [data-wjazd].wszedl .cta__text span,
.js-wjazd [data-wjazd].wszedl .cta__phone {
  opacity: 1;
  transform: none;
}

/* Baner CTA wstaje wierszami, jak nagłówek hero — tylko że wyzwala go
   przewijanie, bo sekcja leży poniżej pierwszego ekranu. Numer telefonu
   wchodzi ostatni i z większym odstępem, żeby został puentą. */
.js-wjazd [data-wjazd].wszedl .cta__text span:nth-child(1) { transition-delay: 0.05s; }
.js-wjazd [data-wjazd].wszedl .cta__text span:nth-child(2) { transition-delay: 0.13s; }
.js-wjazd [data-wjazd].wszedl .cta__text span:nth-child(3) { transition-delay: 0.21s; }
.js-wjazd [data-wjazd].wszedl .cta__text span:nth-child(4) { transition-delay: 0.29s; }
.js-wjazd [data-wjazd].wszedl .cta__text span:nth-child(5) { transition-delay: 0.37s; }
.js-wjazd [data-wjazd].wszedl .cta__text span:nth-child(6) { transition-delay: 0.45s; }
.js-wjazd [data-wjazd].wszedl .cta__phone { transition-delay: 0.62s; }

/* Nagłówek wchodzi pierwszy, potem kafle jeden po drugim — stąd wrażenie,
   że sekcja się składa, a nie pojawia naraz. */
.js-wjazd [data-wjazd].wszedl .usluga:nth-child(1) { transition-delay: 0.12s; }
.js-wjazd [data-wjazd].wszedl .usluga:nth-child(2) { transition-delay: 0.2s; }
.js-wjazd [data-wjazd].wszedl .usluga:nth-child(3) { transition-delay: 0.28s; }
.js-wjazd [data-wjazd].wszedl .usluga:nth-child(4) { transition-delay: 0.36s; }
.js-wjazd [data-wjazd].wszedl .usluga:nth-child(5) { transition-delay: 0.44s; }
.js-wjazd [data-wjazd].wszedl .usluga:nth-child(6) { transition-delay: 0.52s; }

/* ==========================================================================
   BOCIAN W LICZBACH
   ========================================================================== */

/* Liczby siedzą teraz pod tekstem w pierwszym bloku, jako trzy białe karty. */
.liczby {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 25px;
  margin-top: 60px;
}

.liczba {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 140px;
  padding: 18px 12px;
  background: var(--orange);
  border-radius: var(--radius);
}

.liczba__wartosc {
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 1.3rem + 1.2vw, 2.5rem);
  font-weight: 800;
  line-height: 1.5;
  text-transform: lowercase;
  color: var(--ink);
  white-space: nowrap;
  /* równe szerokości cyfr — inaczej liczba drga w trakcie animacji */
  font-variant-numeric: tabular-nums;
}

.liczba__opis {
  max-width: 233px;
  font-size: 22px;
  line-height: 26px;
  text-align: center;
  color: var(--ink);
}

/* ==========================================================================
   MAPA OBSZARU DZIAŁANIA
   ========================================================================== */

.mapa {
  width: 100%;
  height: auto;
  border-radius: var(--radius);
}

/* ==========================================================================
   SLIDER
   ========================================================================== */

.slider {
  overflow: hidden;
  /* pionowe przewijanie strony zostaje przy palcu, poziome przejmuje slider */
  touch-action: pan-y;
}

.slider:has(.slider__dot) { cursor: grab; }
.slider.is-dragging { cursor: grabbing; }

.slider__slide {
  user-select: none;
  -webkit-user-drag: none;
}

.slider__track {
  display: flex;
  gap: 26px;
  transition: transform 0.35s ease;
}

.slider__slide {
  flex: 0 0 100%;
  width: 100%;
  /* Bez tego obrazek jako element zastępczy wymusza minimalną szerokość równą
     swojej szerokości własnej i przebija flex-basis — slajdy galerii rozjeżdżały
     się do 976 px zamiast jednej trzeciej szerokości. */
  min-width: 0;
  border-radius: var(--radius);
  object-fit: cover;
}

.slider--galeria .slider__slide {
  flex: 0 0 calc((100% - 2 * 26px) / 3);
  aspect-ratio: 488 / 445;
}

.slider__dots {
  display: flex;
  gap: 12px;
  justify-content: center;
  /* Suma odstępu i wysokości kropki siedzi w --pasek-kropek — zmieniając
     tu cokolwiek, popraw też tamtą zmienną. */
  margin-top: 24px;
}

.slider__dots:empty { display: none; }

.slider__dot {
  width: 12px;
  height: 12px;
  padding: 0;
  border: 0;
  border-radius: 6px;
  background: var(--dot-idle);
  cursor: pointer;
  transition: width 0.25s ease, background-color 0.25s ease;
}

.slider__dot.is-active { width: 48px; background: var(--orange); }

/* ==========================================================================
   LIGHTBOX
   ========================================================================== */

.lightbox {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 24px;
  background: rgba(33, 32, 32, 0.94);
}

.lightbox[hidden] { display: none; }

.lightbox__figura {
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  min-width: 0;
}

.lightbox__img {
  max-width: min(1200px, calc(100vw - 160px));
  max-height: calc(100vh - 140px);
  width: auto;
  border-radius: var(--radius);
  object-fit: contain;
}

.lightbox__licznik {
  font-family: var(--font-display);
  font-size: 20px;
  color: var(--off-white);
}

.lightbox__btn {
  flex: none;
  width: 56px;
  height: 56px;
  border: 0;
  border-radius: 50%;
  background: var(--orange);
  color: var(--white);
  font-size: 34px;
  line-height: 1;
  cursor: pointer;
  transition: filter 0.15s ease;
}

.lightbox__btn:hover { filter: brightness(1.1); }

.lightbox__btn:focus-visible {
  outline: 3px solid var(--white);
  outline-offset: 3px;
}

.lightbox__close {
  position: absolute;
  top: 24px;
  right: 24px;
}

/* strona pod spodem nie przewija się, gdy powiększenie jest otwarte */
body.is-locked { overflow: hidden; }

/* zdjęcia w galerii zapraszają do kliknięcia */
[data-lightbox] .slider__slide { cursor: zoom-in; }
[data-lightbox].is-dragging .slider__slide { cursor: grabbing; }

@media (max-width: 1000px) {
  .lightbox { padding: 12px; }

  /* strzałki na zdjęciu, a nie obok — inaczej zabierają połowę szerokości */
  .lightbox__prev,
  .lightbox__next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
  }

  .lightbox__prev { left: 12px; }
  .lightbox__next { right: 12px; }

  .lightbox__img { max-width: calc(100vw - 24px); max-height: calc(100vh - 120px); }
  .lightbox__btn { width: 44px; height: 44px; font-size: 26px; }
  .lightbox__close { top: 12px; right: 12px; }
}

/* ==========================================================================
   BANER CTA
   ========================================================================== */

.cta { padding-block: 0; }

/* Blok ma w projekcie 1728 × 760 px. Tekst jest wyrównany do lewej i wcięty
   o 140 px, tak jak treść w pozostałych sekcjach. */
.cta__blok {
  position: relative;
  /* Ta sama zasada co w sekcji usług: 760 px przy 1920 i proporcjonalnie mniej
     niżej, treść wyśrodkowana w pionie. `min-height`, żeby przy łamaniu
     nagłówka na więcej wierszy blok rósł, zamiast przycinać tekst. */
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: clamp(420px, 39.58vw, 760px);
  padding: clamp(32px, 4.8vw, 92px) clamp(24px, 7.3vw, 140px);
  /* Tekst trzyma się lewej krawędzi — ilustracja zostaje drugą kolumną po
     prawej. Wyśrodkowanie dotyczy tylko pionu: światło nad i pod nagłówkiem
     jest równe, bo wcięcia pionowe są takie same, a `justify-content`
     rozkłada nadmiar po równo. */
  align-items: flex-start;
}

/* 50 px przy interlinii 80, tak jak w projekcie — współczynnik dobrany tak,
   żeby docelowy rozmiar był osiągnięty już przy 1600 px szerokości. */
/* 80 px przy interlinii 80 px — każda linia to osobny wiersz, bo projekt łamie
   je w stałych miejscach i przypisuje im różne kolory. */
.cta__text {
  position: relative;
  z-index: 1;
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(2rem, 5.05vw - 0.47rem, 5.6rem);
  font-weight: 800;
  line-height: 1;
  text-transform: uppercase;
}

.cta__text span { display: block; }

.cta__jasny { color: var(--cream); }
.cta__ciemny { color: var(--ink); }

/* Numer to siódmy wiersz nagłówka — ten sam stopień i interlinia, kolor
   wraca do ciepłej bieli. */
.cta__phone {
  position: relative;
  z-index: 1;
  display: block;
  font-family: var(--font-display);
  font-size: clamp(2rem, 5.05vw - 0.47rem, 5.6rem);
  font-weight: 800;
  line-height: 1;
  color: var(--cream);
}

.cta__phone:hover { text-decoration: underline; }

/* --- ilustracja CTA ---
   Pudełko obejmuje cztery elementy i trzyma ich wzajemne proporcje; zakotwiczone
   w prawym dolnym rogu bloku, bo tam leży w projekcie. */
.cta__ilustracja {
  position: absolute;
  /* Ta sama linia co ilustracja w hero i numer telefonu w pasku menu —
     stała wartość, nie procent, żeby nie zmieniała się z szerokością ekranu. */
  right: 54px;
  bottom: 6.91%;
  z-index: 0;
  width: 49.03%;
  aspect-ratio: 847.3 / 538.53;
}

.rys-cta { position: absolute; }
.rys-cta img { display: block; width: 100%; height: auto; }

.rys-cta--drzewo    { left: 13.96%; top: 0;      width: 48.98%; }
.rys-cta--dom       { left: 48.78%; top: 26.76%; width: 51.22%; }
.rys-cta--podnosnik { left: 0;      top: 49.95%; width: 28.80%; }
.rys-cta--rebak     { left: 25.85%; top: 68.06%; width: 28.80%; }

/* Kolejność warstw: dom z tyłu, przed nim drzewo, potem podnośnik z koszem
   w koronie, a najbliżej widza rębak. */
.rys-cta--dom       { z-index: 1; }
.rys-cta--drzewo    { z-index: 2; }
.rys-cta--podnosnik { z-index: 3; }
.rys-cta--rebak     { z-index: 4; }

/* Wejście razem z resztą sekcji — scena buduje się od tła, a podnośnik
   podjeżdża z lewej, tak samo jak w hero. */
.js-wjazd [data-wjazd] .rys-cta {
  opacity: 0;
  transform: translateY(30px);
  transition:
    opacity 0.7s ease,
    transform 0.7s cubic-bezier(0.2, 0.7, 0.3, 1);
}

.js-wjazd [data-wjazd] .rys-cta--podnosnik { transform: translateX(-64px); }

.js-wjazd [data-wjazd].wszedl .rys-cta {
  opacity: 1;
  transform: none;
}

.js-wjazd [data-wjazd].wszedl .rys-cta--dom       { transition-delay: 0.25s; }
.js-wjazd [data-wjazd].wszedl .rys-cta--drzewo    { transition-delay: 0.4s; }
.js-wjazd [data-wjazd].wszedl .rys-cta--podnosnik { transition-delay: 0.55s; }
.js-wjazd [data-wjazd].wszedl .rys-cta--rebak     { transition-delay: 0.7s; }

/* Korona kołysze się tak samo jak w hero, ale dopiero po wejściu sekcji. */
.cta.wszedl .rys-cta--drzewo img {
  transform-origin: 50% 100%;
  will-change: transform;
  animation: hero-kolysze 7s ease-in-out 1.6s infinite;
}

@media (max-width: 1000px) {
  /* rysunek schodzi na drugi plan, żeby nie wchodzić w nagłówek */
  .cta__ilustracja { width: 78%; opacity: 0.5; }

  /* Poniżej 1000 px wzór z desktopu schodził do dolnej granicy i nagłówek stał
     na 32 px, mimo że w wierszu zostawało jeszcze ponad połowa miejsca.
     Własne skalowanie: 56 px przy 768 i 30 px przy 375 — dobrane tak, żeby
     najdłuższy wiersz („ZAINTERESOWANY") mieścił się na każdej z tych
     szerokości bez łamania. */
  .cta__text,
  .cta__phone { font-size: clamp(2.375rem, 6.62vw + 0.825rem, 3.5rem); }
}

/* ==========================================================================
   STOPKA
   ========================================================================== */

/* Plan Wrocławia jako subtelna faktura tła — wygaszenie jest wypalone
   w pliku, więc kolor pod spodem służy tylko jako podkład na czas ładowania. */
.footer { padding-top: 0; }

.footer__blok {
  background-color: var(--ink);
  background-image: url("../images/tla/stopka.jpg");
  background-size: cover;
  background-position: center;
  color: var(--off-white);
  padding: 108px clamp(24px, 4vw, 72px) 72px;
}

.footer__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 643px;
  gap: 24px;
  /* Kolumny równej wysokości, żeby ikony społecznościowe mogły usiąść na dolnej
     krawędzi karty z formularzem — patrz `.footer__title--social`. */
  align-items: stretch;
}

.footer__col:first-child {
  display: flex;
  flex-direction: column;
}

.footer__title {
  margin: 0 0 34px;
  font-size: clamp(1.5rem, 1.2rem + 0.9vw, 1.75rem);
  font-weight: 500;
  letter-spacing: 0.56px;
  color: var(--off-white);
}

/* `auto` spycha nagłówek razem z ikonami na dół kolumny; `padding-top`
   pilnuje minimalnych 84 px odstępu od danych kontaktowych na wypadek, gdyby
   kolumna zrobiła się ciasna (marginesu `auto` nie da się już wtedy skrócić). */
/* Pudełko z nagłówkiem i ikonami jedzie na dół kolumny w całości; odstęp
   nagłówka od ikon zostaje taki jak przy danych kontaktowych (34 px z reguły
   `.footer__title`), więc nie trzeba go nigdzie powtarzać. */
.footer__social { margin-top: auto; padding-top: 84px; }

.kontakt { display: grid; gap: 24px; }

/* dane kontaktowe składa odmiana o normalnej szerokości, jak menu */
.kontakt li {
  display: flex;
  align-items: center;
  gap: 16px;
  font-stretch: 100%;
  font-size: 22px;
  font-weight: 700;
  color: var(--white);
}

.kontakt li img { width: 31px; height: 31px; flex: none; }
.kontakt address { font-style: normal; line-height: 1.35; }
.kontakt a:hover { color: var(--orange); }

.social {
  display: flex;
  align-items: flex-end;
  gap: 48px;
  --social-h: 70px;
}

.social a { display: block; }

/* Kształt bierze się z pliku SVG, kolor z tła — stąd zmiana barwy na hover.
   Proporcje każdej ikony pochodzą z jej viewBox. */
.social__ikona {
  display: block;
  height: var(--social-h);
  width: auto;
  background-color: var(--orange);
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  -webkit-mask-size: contain;
  transition: background-color 0.15s ease;
}

/* na ciemnej stopce rozjaśniamy ikonę do bieli — jeden pomarańcz nie daje
   miejsca na drugi odcień */
.social a:hover .social__ikona,
.social a:focus-visible .social__ikona { background-color: var(--white); }

.social__ikona--fb {
  aspect-ratio: 49 / 70;
  mask-image: url("../images/icons/social-fb.svg");
  -webkit-mask-image: url("../images/icons/social-fb.svg");
}

.social__ikona--ig {
  aspect-ratio: 69 / 70;
  mask-image: url("../images/icons/social-ig.svg");
  -webkit-mask-image: url("../images/icons/social-ig.svg");
}

.social__ikona--tiktok {
  aspect-ratio: 69 / 72;
  mask-image: url("../images/icons/social-tiktok.svg");
  -webkit-mask-image: url("../images/icons/social-tiktok.svg");
}

/* --- formularz --- */

.form-card {
  background: var(--ink);
  border-radius: var(--radius);
  padding: 40px;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.8);
}

.form-card__title {
  margin: 0 0 12px;
  font-size: clamp(1.375rem, 1.1rem + 0.8vw, 1.75rem);
  font-weight: 500;
  letter-spacing: 0.56px;
  color: var(--off-white);
}

.field { display: grid; gap: 8px; margin-bottom: 8px; }

.field label {
  font-size: 18px;
  font-weight: 500;
  color: var(--off-white);
}

.req { color: var(--orange); }

.field input,
.field textarea {
  width: 100%;
  border: 0;
  border-radius: var(--radius);
  background: var(--white);
  color: var(--ink);
  font: inherit;
  font-size: 18px;
  padding: 8px 12px;
}

.field input { height: 40px; }
.field textarea { height: 140px; resize: vertical; }

.field input:focus-visible,
.field textarea:focus-visible {
  outline: 3px solid var(--orange);
  outline-offset: 2px;
}

.field input[aria-invalid="true"],
.field textarea[aria-invalid="true"] {
  outline: 2px solid var(--orange);
}

.form__actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: 24px;
}

.btn {
  height: 48px;
  padding-inline: 24px;
  border: 0;
  border-radius: var(--radius);
  font-stretch: 100%;
  background-color: var(--orange);
  color: var(--off-white);
  font-family: inherit;
  font-size: 20px;
  font-weight: 700;
  letter-spacing: 0.4px;
  cursor: pointer;
  transition: background-color 0.15s ease;
}

/* Ten sam ciemniejszy pomarańcz co w podświetleniu menu — paleta ma dwa
   odcienie, więc stan najechania bierze drugi z nich, zamiast przyciemniać
   pierwszy filtrem. */
.btn:hover,
.btn:focus-visible { background-color: var(--orange-deep); }
.btn[disabled] { opacity: 0.6; cursor: progress; }

.form__note {
  font-size: 16px;
  color: var(--orange);
}

.form__status {
  margin: 16px 0 0;
  font-size: 18px;
  color: var(--off-white);
}

.form__status.is-error { color: var(--orange); }

.form__rodo {
  margin: 16px 0 0;
  font-size: 15px;
  line-height: 1.5;
  color: var(--white);
}

.form__rodo a { color: var(--orange); text-decoration: underline; }

/* honeypot — ukryty przed ludźmi, widoczny dla botów */
.hp {
  position: absolute;
  left: -9999px;
  opacity: 0;
  height: 0;
  width: 0;
}

/* --- pasek dolny --- */

/* Pasek w ukośne paski zastąpił pomarańczową kreskę nad tym rzędem. */
/* Pasek prawny nie ma własnego tła — leży wprost na szachownicy strony,
   składany ciemnym tekstem, bo na pomarańczowym wzorze biel była nieczytelna. */
.footer__bottom {
  color: var(--ink);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-block: 12px;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.3px;
}

.footer__bottom p { margin: 0; }
.footer__bottom a:hover { text-decoration: underline; }

/* ==========================================================================
   PODSTRONY PROSTE (polityka prywatności, regulamin)
   ========================================================================== */

.strona-prosta {
  padding-block: 48px 96px;
  font-size: clamp(1rem, 0.9rem + 0.35vw, 1.375rem);
  line-height: 1.5;
}

.strona-prosta__logo {
  display: inline-block;
  width: 140px;
  margin-bottom: 32px;
}

.strona-prosta__logo img { width: 100%; height: auto; }

.strona-prosta p { max-width: 62ch; }

.strona-prosta a { color: var(--orange); text-decoration: underline; }

.strona-prosta__powrot {
  display: inline-block;
  margin-top: 24px;
  font-weight: 600;
}

/* ==========================================================================
   PASEK TELEFONU (mobile)
   ========================================================================== */

.call-bar {
  display: none;
  position: fixed;
  inset: auto 0 0;
  z-index: 60;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 10px 12px;
  background-color: var(--orange-deep);
  color: var(--white);
  font-family: var(--font-display);
  font-size: 30px;
  font-weight: 800;
}

/* jak w nagłówku — pudełko tekstu zawężone do liter, żeby numer stał
   równo z ikoną, a nie odrobinę poniżej */
.call-bar span { line-height: 1; }

.call-bar img { width: 44px; height: 44px; flex: none; }

/* ==========================================================================
   RESPONSYWNOŚĆ
   ========================================================================== */

@media (max-width: 1400px) {
  .nav__link { padding-inline: 24px; }
  .footer__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); }
}

/* Zakres pośredni: pasek nadal poziomy, ale logo, menu i telefon przestają się
   mieścić obok siebie — zaciskamy odstępy i zmniejszamy logotyp. */
@media (max-width: 1250px) {
  .header__bar { padding-inline: 20px; }
  /* Pudełko musi zostać kwadratowe — odznaka jest okrągła. Wcześniej stało tu
     200 × 55 po dawnym, poziomym logotypie i rysunek był rozciągany w placek.
     120 px mieści się przy pasku 100 px, wystając po 10 px nad i pod. */
  .logo { width: 120px; height: 120px; margin-block: -10px; }
  .nav__link { padding-inline: 14px; }
  .header__phone { font-size: 20px; gap: 12px; }
  .header__phone img { width: 32px; height: 32px; }
}

@media (max-width: 1100px) {

  .split { grid-template-columns: 1fr; column-gap: 0; row-gap: 40px; }

  /* Bloki sekcji idą do pełnej szerokości .wrap, tak samo jak kafle usług
     i galeria — dzięki temu wszystkie sekcje mają identyczny margines boczny.
     Długość wiersza ograniczamy na samym tekście, a nie na całej kolumnie,
     żeby zdjęcie obok trzymało tę samą krawędź co reszta strony. */
  .split__text p,
  .benefits li { max-width: 62ch; }
  .footer__grid { grid-template-columns: 1fr; gap: 56px; }

  /* Gdy stopka układa się w jedną kolumnę, formularz idzie na górę, a dane
     kontaktowe i social pod niego. */
  .footer__col:first-child { order: 2; }
  .footer__col:last-child { order: 1; }

  .footer__social { margin-top: 56px; padding-top: 0; }
  .cta__blok { padding-block: 72px; }
}

/* Po złożeniu stopki w jedną kolumnę pod danymi kontaktowymi zostawało pół
   ekranu pustej mapy, a ikony społecznościowe wisiały nisko pod spodem.
   W tym zakresie jest miejsce, żeby ustawić je obok: dane po lewej,
   „Obserwuj nas" po prawej, oba nagłówki w jednym rzędzie. Poniżej 600 px
   kolumny by się nie zmieściły i układ wraca do pionowego. */
@media (max-width: 1100px) and (min-width: 600px) {
  .footer__col:first-child {
    display: grid;
    grid-template-columns: auto auto;
    column-gap: 24px;
    justify-content: space-between;
    align-content: start;
  }

  /* `:not` jest konieczne: nagłówek social nosi obie klasy, a sam selektor
     `.footer__title--social` ma niższą swoistość niż ten z potomkiem i przegrywał,
     przez co oba nagłówki lądowały w pierwszej kolumnie, jeden na drugim. */
  .footer__col:first-child > .footer__title:not(.footer__title--social) { grid-area: 1 / 1; }
  .footer__col:first-child > .kontakt { grid-area: 2 / 1; }

  /* Całe pudełko siada w komórce obok listy kontaktów, dolną krawędzią równo
     z ostatnim wierszem adresu, i jest dosunięte do prawej. Odstęp nagłówka
     od ikon bierze się z `.footer__title` — ten sam, co po lewej stronie. */
  .footer__social {
    grid-area: 2 / 2;
    align-self: end;
    margin-top: 0;
    padding-top: 0;
    text-align: right;
  }

  .social { justify-content: flex-end; }
}

/* Próg układu mobilnego. Poniżej tej szerokości poziomy pasek nie pomieści już
   logo, czterech pozycji menu i numeru — wchodzi hamburger i dolny pasek
   z telefonem. Ta sama wartość siedzi w js/main.js (liczba slajdów w galerii). */
@media (max-width: 1000px) {
  body { font-size: 18px; }

  section[id], footer[id] { scroll-margin-top: 88px; }

  .header { top: var(--naglowek-gora); }
  .header.is-stuck { top: 8px; }

  /* pasek: logo + telefon + hamburger */
  .header__bar { height: var(--naglowek-pasek); padding-inline: 16px; gap: 12px; }
  /* Odznaka trzyma tę samą proporcję do paska co na desktopie: tam 160 px przy
     pasku 100 px, czyli 1,6 — przy pasku 64 px wychodzi 102 px. Wystaje po
     19 px nad i pod pasek, dokładnie jak wyżej po 30 px. */
  .logo { width: 102px; height: 102px; margin-block: -19px; }

  .nav-toggle {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    order: 3;
    width: 44px;
    height: 44px;
    padding: 10px;
    border: 0;
    background: transparent;
    cursor: pointer;
  }

  .nav-toggle span {
    display: block;
    height: 3px;
    border-radius: 2px;
    /* Hamburger leży na ciemnym pasku, więc kreski muszą być jasne —
       w kolorze `--ink` znikały w tle. */
    background: var(--white);
    transition: transform 0.2s ease, opacity 0.2s ease;
  }

  .nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
  .nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
  .nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

  .nav {
    position: absolute;
    inset: calc(100% + 8px) 0 auto;
    flex-direction: column;
    margin: 0;
    padding: 8px;
    background: var(--white);
    border-radius: var(--radius);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.18);
    display: none;
  }

  .nav.is-open { display: flex; }

  /* Rozwinięte menu to biały panel pod paskiem, a nie sam ciemny pasek —
     biały tekst z reguły bazowej był na nim niewidoczny. */
  .nav__link {
    height: 52px;
    width: 100%;
    padding-inline: 16px;
    border-radius: var(--radius);
    color: var(--ink);
  }

  /* telefon w pasku menu znika — jego rolę przejmuje .call-bar na dole ekranu */
  .header__phone { display: none; }
  .nav-toggle { margin-left: auto; }

  .section > .wrap { padding-block: 48px; }
  /* Sekcja „o firmie" celuje selektorem z identyfikatorem (`#o-firmie > .wrap`),
     który bije regułę klasową wyżej — bez tego powtórzenia zostawała na
     wartościach desktopowych 72/80 i reguła responsywna nic nie robiła. */
  #o-firmie > .wrap { padding-block: 48px; }
  .section--uslugi > .wrap { padding-block: 56px 64px; }
  /* Poniżej 1000 px dolny ogranicznik wysokości tylko rozdyma bloki — na
     telefonie zostawiał w banerze CTA ponad 200 px pustki. Wysokość bierze
     się stąd z samej treści. */
  .section--uslugi > .wrap,
  .cta__blok { min-height: 0; }
  .liczby { grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 40px; }
  .liczba { min-height: 120px; padding: 14px 8px; }
  .liczba__opis { font-size: 18px; line-height: 22px; }
  .usluga__label { font-size: 18px; line-height: 24px; }
  /* To wcięcie widać jako odstęp POD kaflami usług, bo obie sekcje mają to samo
     pomarańczowe tło. Razem z dolnym wcięciem usług (16 px) daje 64 px —
     dokładnie tyle, ile jest nad nagłówkiem usług. Przy 120 px robiło się
     140 px pod sekcją wobec 64 px nad nią. */
  .section--wroclaw > .wrap { padding-top: 48px; padding-bottom: 0; }
  .section--tight > .wrap { padding-block: 0; }
  .section__title { margin-bottom: 40px; }


  .slider--galeria .slider__slide { flex: 0 0 100%; }

  .form-card { padding: 24px; }
  .form__actions { flex-direction: column; align-items: flex-start; }

  .footer__blok { padding-top: 64px; }
  /* linki i copyright zostają obok siebie, jak na desktopie — mniejszy stopień
     pisma pozwala im się zmieścić w jednym rzędzie */
  .footer__bottom {
    gap: 12px;
    font-size: 12px;
    letter-spacing: 0.24px;
  }

  .kontakt li { font-size: 20px; }
  .social { gap: 32px; --social-h: 52px; }

  .call-bar { display: flex; }
  .footer__bottom { padding-bottom: 72px; }
}

/* Tablet i węższe laptopy: trzy kolumny.
   Kafel ma w projekcie 224 px, a sześć takich obok siebie (1444 px rzędu)
   mieści się dopiero przy oknie ~1920 px. Niżej rząd musiałby się kurczyć —
   przy 1280 px kafle spadały do 142 px i sekcja wyglądała na zgubioną
   w marginesach. Trzy kolumny to 3 × 224 + 2 × 20 = 712 px, czyli kafle
   wracają do naturalnego rozmiaru. */
@media (max-width: 1400px) {
  .uslugi {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    width: min(712px, 92%);
  }
}

/* Próg telefonu. Trzy kolumny po 224 px nie mieszczą się już na ekranie
   telefonu, więc kafle schodzą do dwóch. Rząd ma wtedy 2 × 224 + 20 = 468 px
   i od tego miejsca zwęża się razem z ekranem. */
@media (max-width: 600px) {
  /* Na telefonie scena przestaje być tłem pod napisem i staje się osobnym
     pasem pod nim: nagłówek u góry, grafika na dole. `relative`, nie `static` —
     części sceny są pozycjonowane bezwzględnie względem tego pudełka, więc
     musi ono zostać kontenerem pozycjonowania, inaczej rozsypałyby się
     względem całego bloku hero. */
  .hero__ilustracja {
    position: relative;
    right: auto;
    bottom: auto;
    width: 100%;
    margin-top: 28px;
    opacity: 1;
  }

  /* Podnośnik wraca na samą lewą krawędź sceny: 24 px odsunięcia ma sens
     tylko na desktopie, gdzie scena jest tłem obok nagłówka. Tutaj grafika
     ma trzymać obie krawędzie równo z kolumną tekstu. */
  .rys--podnosnik { left: 0; }

  /* Nagłówek rośnie z 36 px. Granicę wyznacza najdłuższy wiersz: przy 375 px
     mieści się do 45 px, przy 390 px do 47 — stąd ten współczynnik. */
  .hero__title { font-size: clamp(2.5rem, 11.5vw, 3.5rem); }

  /* Baner CTA układa się tak samo jak hero: napis u góry, scena osobnym pasem
     pod nim. `relative` z tego samego powodu co tam — cztery części sceny są
     pozycjonowane bezwzględnie względem tego pudełka. */
  .cta__ilustracja {
    position: relative;
    right: auto;
    bottom: auto;
    width: 100%;
    margin-top: 28px;
    opacity: 1;
  }

  .uslugi {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: min(468px, 100%);
  }

  /* Stopnie pisma z szerszych ekranów są na telefonie za duże: akapit schodzi
     z 20 na 17 px, a wcięcie ciemnej karty z 32 na 20 px, żeby wiersz nie
     robił się nienaturalnie krótki. */
  .karta-ciemna--pad { padding: 20px; }
  .split__text p { font-size: 19px; line-height: 27px; }

  /* Trzy karty w rzędzie nie mieszczą już podpisów — przy 400 px na kartę
     zostaje 88 px, a samo „zrealizowanych" potrzebuje ponad 90 px. Układamy
     je więc jedna pod drugą; każda jest wtedy szeroka i czytelna. */
  .liczby { grid-template-columns: 1fr; gap: 10px; }

  .liczba {
    flex-direction: row;
    gap: 12px;
    min-height: 0;
    padding: 14px 18px;
  }

  .liczba__opis { max-width: none; font-size: 16px; line-height: 20px; text-align: left; }

  /* Sekcja usług ma zmieścić się w jednym ekranie telefonu: nagłówek, sześć
     kafli i podpisy naraz. Dlatego wszystkie wymiary idą w dół — wcięcia,
     odstęp pod nagłówkiem, siatka i stopień podpisów. */
  /* Równe 16 px z obu stron. Światło nad nagłówkiem i pod kaflami domykają
     wcięcia sąsiednich sekcji (48 px u góry z „o firmie", 48 px u dołu
     z „co nas wyróżnia") — po 64 px z każdej strony. */
  .section--uslugi > .wrap { padding-block: 16px; }
  .section__title { font-size: 24px; line-height: 28px; margin-bottom: 16px; }
  .uslugi { gap: 12px; width: min(264px, 100%); }

  /* Punktory „co nas wyróżnia": 18 px na telefonie daje długie, rwane wiersze.
     Razem ze stopniem schodzi punktor i wcięcie, żeby proporcje zostały. */
  .benefits { gap: 16px; }
  .benefits li { font-size: 16px; line-height: 22px; padding-left: 32px; }
  .benefits li::before { width: 18px; height: 18px; }
  .usluga__label { margin-top: 6px; font-size: 14px; line-height: 17px; }
}

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