/* MakiForma — układy strony (design v0.1)
   Wartości systemu siedzą w `04 - Styleguide/tokens.css` i tylko tam.
   Ten plik opisuje układ sekcji i komponentów, wyłącznie przez var(--token).

   Pochodzenie: `02 - Wireframes/assets/wire.css`. Układy przeniesione bez zmian,
   bo wireframe v0.1 jest zatwierdzoną makietą. Zmieniła się warstwa koloru
   (skala szarości ustąpiła palecie v2) oraz tryb audytu treści, którego tu nie ma.
*/

/* MakiForma — wireframe v0.1
   Skala szarości, zero koloru marki. Kolor wchodzi dopiero w etapie 3/4.
   Wszystkie wartości siedzą tutaj. Sekcja nie ma własnych kolorów ani odstępów. */


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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 88px; }

body {
  margin: 0;
  background: var(--c-bg);
  color: var(--c-text);
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 17px;
  line-height: 1.6;
  font-feature-settings: "ss01", "cv05";
  -webkit-font-smoothing: antialiased;
}

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

/* ——— Typografia ——————————————————————————————————————————— */

h1, h2, h3, h4 {
  font-family: Outfit, Inter, sans-serif;
  font-weight: 400;
  letter-spacing: -0.02em;
  margin: 0;
  text-wrap: balance;
}

.t-xxl { font-size: clamp(38px, 7.2vw, 82px); line-height: 1.02; letter-spacing: -0.035em; font-weight: 300; }
.t-xl  { font-size: clamp(27px, 3.9vw, 46px); line-height: 1.08; letter-spacing: -0.03em; font-weight: 300; }
.t-l   { font-size: clamp(22px, 2.6vw, 32px);   line-height: 1.16; letter-spacing: -0.025em; }
.t-m   { font-size: clamp(19px, 1.6vw, 23px); line-height: 1.28; font-weight: 500; }
.t-s   { font-size: 17px; line-height: 1.4; font-weight: 500; }

p { margin: 0; max-width: var(--tekst); }
.lead { font-size: clamp(18px, 1.5vw, 21px); line-height: 1.55; color: var(--c-text-soft); }
.mala { font-size: 15px; line-height: 1.5; color: var(--c-text-soft); }

a { color: inherit; }

/* ——— Układ ————————————————————————————————————————————————— */

.sekcja { padding: var(--sekcja) 0; }
.sekcja--gora0 { padding-top: 0; }
.sekcja--gora-pol { padding-top: calc(var(--sekcja) / 2); }
.sekcja--dol0  { padding-bottom: 0; }
.sekcja--alt   { background: var(--c-bg-alt); }
.sekcja--band  { background: var(--c-bg-band); }
/* Deklaracja B2B: jedno zdanie z materiałów źródłowych jako statement typograficzny,
   nie szary akapit. Sekcja zostaje biała, pracuje typografia. */
.sekcja--soft  { background: var(--c-bg); }
.deklaracja {
  font-family: var(--f-head); font-weight: 300;
  font-size: clamp(22px, 2.4vw, 31px); line-height: 1.35; letter-spacing: -.02em;
  color: var(--c-text); max-width: 34ch; margin: 0 auto;
}
/* Słowa ciemnieją w miarę scrolla (app.js). Jasny stan to kolor linii,
   nie szarość tekstu: ma wyglądać na niewypełniony, nie na wyblakły. */
@media (prefers-reduced-motion: no-preference) {
  .deklaracja span { color: #D9D3C4; transition: color .35s ease; }
  .deklaracja span.ciemne { color: var(--c-text); }
}

.wrap { width: 100%; max-width: var(--kolumna); margin: 0 auto; padding: 0 var(--marg); }
.wrap--waski { max-width: 860px; }
.pelna { width: 100%; }

.naglowek-sekcji { margin-bottom: var(--s-8); }

/* Nagłówek i wyjście z sekcji w jednym wierszu. Nagłówek nie siedzi
   w wąskiej kolumnie, więc łamie się tam, gdzie chcemy, a nie gdzie wypadnie. */
.naglowek-rzad {
  display: flex; flex-wrap: wrap; gap: var(--s-5) var(--s-8);
  align-items: center; justify-content: space-between;
  margin-bottom: var(--s-8);
}
.naglowek-rzad h2 { margin: 0; text-wrap: initial; }
.naglowek-rzad .btn-grupa { margin-left: auto; }
.naglowek-sekcji p { margin-top: var(--s-4); }

/* Dwie kolumny: nagłówek po lewej, treść po prawej */
.dwie {
  display: grid; gap: var(--s-6);
  grid-template-columns: 1fr;
  align-items: start;
  margin-bottom: var(--s-8);
}
@media (min-width: 900px) {
  .dwie { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: var(--s-8); }
}
/* Prawa kolumna jest treścią sekcji, nie wstępem do niej: dolny odstęp znika,
   bo pod .dwie nic już nie stoi. */
.dwie--zwarta { margin-bottom: 0; }

/* Nagłówek zostaje w polu widzenia, gdy sąsiednia kolumna przewija się obok.
   Ta sama wartość co scroll-padding-top w html, żeby nie wchodził pod nagłówek strony. */
@media (min-width: 900px) { .lepki { position: sticky; top: 96px; } }

.stos > * + * { margin-top: var(--s-4); }
.stos-l > * + * { margin-top: var(--s-6); }

hr.linia { border: 0; border-top: 1px solid var(--c-line); margin: 0; }

/* ——— Placeholder zdjęcia ——————————————————————————————————— */
/* Etykieta trzyma format wymagany przez /audyt-zdjec:
   <span class="ph__label"><b>KOD</b><span>opis</span></span> */

.ph {
  position: relative;
  background-color: var(--c-ph);
  background-image:
    repeating-linear-gradient(135deg,
      rgba(28,28,26,.045) 0 1px, transparent 1px 14px);
  border: 1px solid var(--c-line);
  border-radius: var(--r-duze);
  display: flex; align-items: flex-end;
  overflow: hidden;
  aspect-ratio: 4 / 3;
}
.ph--kwadrat { aspect-ratio: 1 / 1; }
.ph--pion    { aspect-ratio: 4 / 5; }
.ph--szeroki { aspect-ratio: 16 / 9; }
.ph--pas     { aspect-ratio: 21 / 9; }
.ph--pas-hi  { aspect-ratio: 21 / 10; }
.ph--makro   { aspect-ratio: 3 / 2; }
.ph--fill    { aspect-ratio: auto; height: 100%; min-height: 240px; }

@media (max-width: 700px) {
  .ph--pas, .ph--pas-hi { aspect-ratio: 3 / 2; }
}

/* Krzyż konstrukcyjny — czytelny znak „tu wchodzi zdjęcie" */
.ph::after {
  content: "";
  position: absolute; inset: 0;
  background:
    linear-gradient(to bottom right, transparent calc(50% - .5px), var(--c-line) 50%, transparent calc(50% + .5px)),
    linear-gradient(to bottom left,  transparent calc(50% - .5px), var(--c-line) 50%, transparent calc(50% + .5px));
  opacity: .55;
  pointer-events: none;
}

.ph__label {
  position: relative; z-index: 1;
  margin: var(--s-4);
  display: inline-flex; flex-direction: column; gap: 2px;
  background: var(--c-bg);
  border: 1px solid var(--c-line);
  border-radius: var(--r);
  padding: 8px 12px;
  max-width: calc(100% - 2 * var(--s-4));
}
.ph__label b {
  font-size: 11px; font-weight: 600; letter-spacing: .1em;
  text-transform: uppercase; color: var(--c-text);
}
.ph__label span { font-size: 13px; line-height: 1.35; color: var(--c-text-soft); }

/* ——— Przyciski ————————————————————————————————————————————— */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2);
  min-height: 52px;
  padding: 0 var(--s-6);
  border: 1px solid var(--c-accent);
  border-radius: var(--r);
  background: var(--c-accent);
  color: var(--c-text-on-accent);   /* biały na zieleni: 6,42:1 */
  font-family: Inter, sans-serif; font-size: 16px; font-weight: 500;
  text-decoration: none; cursor: pointer;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.btn:hover { background: var(--c-accent-hover); border-color: var(--c-accent-hover); }
.btn--ghost { background: transparent; color: var(--c-text); border-color: var(--c-line); }
.btn--ghost:hover { background: transparent; border-color: var(--c-text); }
.btn--maly { min-height: 42px; padding: 0 var(--s-4); font-size: 15px; }
.btn--blok { width: 100%; }

.btn-grupa { display: flex; flex-wrap: wrap; gap: var(--s-3); }
/* Przyciski w grupie schodzą na pełną szerokość na całym paśmie dotykowym,
   nie dopiero od 520 px. Przy dwóch w rzędzie na 600 px każdy dostawał połowę
   i "Zamów próbkę opakowania" łamało się na dwa wiersze. */
@media (max-width: 767px) { .btn-grupa { flex-direction: column; } .btn-grupa .btn { width: 100%; } }

/* Link tekstowy ze strzałką */
.link {
  display: inline-flex; align-items: center; gap: var(--s-2);
  font-size: 15px; font-weight: 500; text-decoration: none;
  border-bottom: 1px solid var(--c-line);
  padding-bottom: 2px;
}
.link:hover { border-color: var(--c-text); }
.link::after { content: "→"; }
/* Pole trafienia odsyłacza ma 27 px wysokości, na dotyku to za mało.
   Powiększamy je warstwą, nie paddingiem, żeby kreska została na miejscu. */
@media (max-width: 619px) {
  .link { position: relative; }
  .link::before { content: ""; position: absolute; inset: -10px 0; }
}

/* ——— Nagłówek strony ——————————————————————————————————————— */

.head {
  position: sticky; top: 0; z-index: 40;
  background: rgba(253, 252, 250, .92);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--c-line);
}
/* Strona główna: nagłówek bez własnego tła leży NA zdjęciu hero (wzorzec
   z archiwalnej iteracji, gdzie ciemny nagłówek zlewał się z ciemnym hero).
   Krem kadru przechodzi pod nawigację, więc pas tła i kreska wypadają. */
.strona-glowna .head {
  position: absolute; left: 0; right: 0; top: 0;
  background: transparent; backdrop-filter: none; border-bottom: 0;
}
.head__in {
  display: flex; align-items: center; gap: var(--s-5);
  min-height: 72px;
}
.head__logo { flex: none; display: block; }
.head__logo img { width: 148px; height: auto; }

.nav { display: none; margin-left: auto; align-items: center; gap: var(--s-6); }
.nav a { font-size: 15px; text-decoration: none; color: var(--c-text-soft); }
.nav a:hover, .nav a[aria-current] { color: var(--c-text); }

.head__akcje { margin-left: auto; display: flex; align-items: center; gap: var(--s-3); }
.head__tel { display: none; font-size: 15px; text-decoration: none; color: var(--c-text-soft); }
.head__cta { display: none; }

.lang { position: relative; }
.lang summary {
  list-style: none;
  display: flex; align-items: center; gap: var(--s-2);
  border: 1px solid var(--c-line); border-radius: var(--r);
  min-height: 42px; padding: 0 var(--s-3);
  font-family: inherit; font-size: 14px; color: var(--c-text-soft); cursor: pointer;
}
.lang summary::-webkit-details-marker { display: none; }
.lang summary::after {
  content: ""; width: 7px; height: 7px;
  border-right: 1px solid currentColor; border-bottom: 1px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
}
.lang[open] summary { color: var(--c-text); border-color: var(--c-text); }
.lang[open] summary::after { transform: translateY(2px) rotate(225deg); }

.lang__lista {
  position: absolute; right: 0; top: calc(100% + 6px); z-index: 50;
  min-width: 168px; margin: 0; padding: var(--s-2);
  list-style: none;
  background: var(--c-bg);
  border: 1px solid var(--c-line); border-radius: var(--r);
}
.lang__lista a {
  display: block; padding: 10px var(--s-3);
  border-radius: var(--r);
  font-size: 15px; color: var(--c-text-soft); text-decoration: none;
}
.lang__lista a:hover { background: var(--c-bg-alt); color: var(--c-text); }
.lang__lista a[aria-current] { color: var(--c-text); }

/* Przycisk menu wprost z makiety 65:15702: kwadrat 50 px, obrys 1 px,
   promień 8 px, w środku trzy kreski 23,06 x 1,708 px z przerwą 7,687 px.
   Makieta ma obrys #1C1C1A, w tokenach najbliżej jest --c-text (#16211D);
   trzymamy token, bo styleguide jest źródłem prawdy. */
.burger {
  width: 50px; height: 50px; padding: 0;
  border: 1px solid var(--c-text); border-radius: var(--r);
  background: transparent; color: var(--c-text);
  display: grid; place-items: center;
  cursor: pointer;
}
.burger__ikona {
  display: grid; gap: 7.687px; width: 23.063px;
}
.burger__ikona i {
  display: block; height: 1.708px; background: currentColor;
  transition: transform .2s ease, opacity .15s ease;
}
/* Po otwarciu trzy kreski składają się w X: skrajne zjeżdżają do środka
   i krzyżują, środkowa gaśnie. Krok to kreska plus przerwa, 9,395 px. */
.burger[aria-expanded="true"] .burger__ikona i:nth-child(1) { transform: translateY(9.395px) rotate(45deg); }
.burger[aria-expanded="true"] .burger__ikona i:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] .burger__ikona i:nth-child(3) { transform: translateY(-9.395px) rotate(-45deg); }
@media (prefers-reduced-motion: reduce) {
  .burger__ikona i { transition: none; }
}

/* Menu na dotyku jest pełnoekranową warstwą pod nagłówkiem. Wcześniej stało
   w toku strony: kończyło się w połowie ekranu, spod spodu wystawał hero,
   tło dawało się przewijać, a menu nie zamykało się ani odsyłaczem, ani
   klawiszem. */
.menu {
  position: fixed; inset: 72px 0 0; z-index: 39;
  display: flex; flex-direction: column;
  background: var(--c-bg);
  overflow-y: auto; overscroll-behavior: contain;
  opacity: 0; visibility: hidden; translate: 0 -6px;
  transition: opacity .18s ease, translate .18s ease, visibility 0s .18s;
}
.menu[data-otwarte] {
  opacity: 1; visibility: visible; translate: 0 0;
  transition: opacity .18s ease, translate .18s ease;
}
.menu > .wrap {
  display: flex; flex-direction: column; flex: 1;
  padding-top: var(--s-5);
  padding-bottom: max(var(--s-6), env(safe-area-inset-bottom));
}
.menu ul { list-style: none; margin: 0; padding: 0; }
.menu li + li { border-top: 1px solid var(--c-line); }
.menu li a {
  display: flex; align-items: center; justify-content: space-between;
  min-height: 60px; padding: 0;
  font-family: var(--f-head); font-size: 21px; letter-spacing: -.02em;
  color: var(--c-text); text-decoration: none;
}
.menu li a::after { content: "→"; font-size: 17px; color: var(--c-text-soft); }
.menu li a[aria-current] { color: var(--c-accent); }
/* Wezwanie i kontakt siadają na dole warstwy, nie w połowie listy. */
.menu .btn { margin: auto 0 var(--s-4); }
.menu .mala { margin: 0; color: var(--c-text-soft); }
/* Wybór języka schodzi z paska do menu: makieta 65:15645 zostawia w nagłówku
   tylko logo i przycisk. Osobne odsyłacze zamiast <li>, żeby nie złapały
   stylu pozycji nawigacji. */
.menu__jezyki {
  display: flex; gap: var(--s-5);
  margin-top: var(--s-5); padding-top: var(--s-4);
  border-top: 1px solid var(--c-line);
}
.menu__jezyki a {
  display: inline-block; padding: 8px 0; margin: -8px 0;
  font-size: 15px; color: var(--c-text-soft); text-decoration: none;
}
.menu__jezyki a[aria-current] { color: var(--c-text); }

/* Nagłówek strony głównej jest przezroczysty, bo leży na kadrze hero.
   Przy otwartym menu musi dostać tło, inaczej lista przebija przez logo. */
body[data-menu] .head { background: var(--c-bg); border-bottom: 1px solid var(--c-line); }
body[data-menu] { overflow: hidden; }

/* Poniżej progu nawigacji przełącznik języka nie stoi już w pasku. */
@media (max-width: 1079.98px) { .lang { display: none; } }

@media (min-width: 1080px) {
  .nav { display: flex; }
  .head__akcje { margin-left: 0; }
  .head__tel, .head__cta { display: inline-flex; }
  .burger { display: none; }
  .menu { display: none; }
}

/* ——— Hero ——————————————————————————————————————————————————— */

.hero { padding: var(--s-9) 0 var(--s-9); }

/* Strona główna: hero zajmuje cały pierwszy ekran, zdjęcie zaczyna się
   dopiero pod nim. Bez tego duży kadr wchodzi w pierwszy ekran i tnie się
   na wysokości przycisków. */
.hero--pelny {
  min-height: calc(100svh - 72px);
  display: flex; flex-direction: column; justify-content: center;
  padding: var(--s-8) 0;
}
@media (max-height: 620px) {
  .hero--pelny { min-height: 0; padding: var(--s-9) 0; }
}
.hero__tekst { max-width: 18ch; }

/* Hero ze zdjęciem z serii kremowej. Sekcja jest biała (założenie: dużo bieli
   i przestrzeni), a krem sceny zostaje WEWNĄTRZ kadru: zdjęcie wypełnia
   zaokrągloną kartę i samo niesie swoje tło. */
.hero--foto { background: var(--c-bg); }
.hero--foto .wrap { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-7); align-items: center; }
.hero__obraz { border-radius: var(--r-duze); overflow: hidden; background: var(--c-scena-krem); }
/* Kadr przycięty do prawej części zdjęcia: pudełko siedzi w prawej trzeciej
   części ujęcia, a lewa połowa to samo tło, które i tak mamy pod nagłówkiem. */
.hero__obraz img { width: 100%; height: 100%; aspect-ratio: 4 / 3; object-fit: cover; object-position: 72% center; }
@media (min-width: 1000px) { .hero__obraz img { aspect-ratio: 5 / 4; } }
/* Pasek liczb idzie przez całą szerokość, pod obiema kolumnami. W kolumnie
   tekstu ściskał się do trzech wąskich słupków. */
.hero--foto .hero__fakty { grid-column: 1 / -1; }
@media (min-width: 1000px) {
  .hero--foto .wrap { grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: var(--s-8); }
  /* Kadr dojeżdża do prawej krawędzi okna. Pudełko siedzi w prawej trzeciej części
     zdjęcia i przy zamkniętym kadrze robiło się znaczkiem. */
  .hero--foto .hero__obraz { border-radius: var(--r-duze); }
}
.hero .lead { margin-top: var(--s-6); max-width: 46ch; }
.hero .btn-grupa { margin-top: var(--s-7); }
.hero__foto { margin-top: var(--s-8); }

/* Hero z tekstem nałożonym na zdjęcie. Układ z makiety 43:13732: zdjęcie
   na całą szerokość, tekst leży na pustej kremowej części kadru, więc bez
   przyciemnienia. Kadr ma pustkę po lewej TYLKO w szerokim oknie: poniżej
   1100 px zdjęcie schodzi pod treść, bo cover przycina pustą ladę. */
.hero-foto { position: relative; background: var(--c-scena-krem); overflow: hidden; }
.hero-foto .ph { aspect-ratio: 21 / 9; border: 0; border-radius: 0; }
.hero-foto__tlo { display: block; width: 100%; height: auto; }
@media (min-width: 1100px) {
  .hero-foto__tlo { position: absolute; inset: 0; height: 100%; object-fit: cover; object-position: right center; }
  .hero-foto { min-height: min(46.9vw, 820px); }  /* proporcja zdjęcia 2,1:1, sufit dla 4K */
}
.hero-foto__tresc { padding-top: calc(72px + var(--s-6)); padding-bottom: var(--s-8); }
/* Wąski ekran ma własny kadr pionowy 4:5 (patrz <picture> w index.html).
   Zdjęcie jest tłem całej sekcji, tak samo jak w szerokim oknie, a nagłówek
   i przycisk stoją na nim od góry. Wcześniej zdjęcie było zwykłym blokiem
   w toku i tekst spadał pod nie, na sam dół pierwszego ekranu. */
/* Tylko hero strony głównej: ono jedno ma kadr pionowy w <picture>. Hero
   podstron (--podstrona) zostaje przy kadrze poziomym 2,6:1, bo nie ma
   wariantu pionowego, a cover w oknie 4:5 ucinał mu 70% szerokości. */
@media (max-width: 767px) {
  /* Wysokość bierze się z proporcji kadru (4:5 to 125% szerokości), więc
     zdjęcie wchodzi w sekcję w całości. Sztywne 82svh kadrowało je o 30%
     wszerz i ucinało pudełko z obu stron. */
  /* Wysokość z proporcji kadru mobilnego (3488x4415, czyli 126,6% szerokości),
     więc zdjęcie wchodzi w sekcję w całości, bez przycięcia. */
  .hero-foto:not(.hero-foto--podstrona) { min-height: min(126.6vw, 760px); display: flex; flex-direction: column; }
  .hero-foto:not(.hero-foto--podstrona) .hero-foto__tlo {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    object-fit: cover; object-position: 50% 50%;
    aspect-ratio: 3488 / 4415;
  }
  /* Bez rozjaśniacza pod tekstem: kadr pionowy ma u góry tyle wolnego tła,
     że nagłówek stoi na czystym kremie i nic go nie musi podkładać. */
  .hero-foto:not(.hero-foto--podstrona) .hero-foto__tresc {
    position: relative; z-index: 2;
    padding-top: 72px; padding-bottom: 0;   /* góra: tyle, ile ma nagłówek strony */
  }
  /* Wartości wprost z makiety 65:15177, zdjętej przy 354 px, przeliczone na
     jednostki względne: 37,902 px = 10,707vw, pismo 26,64 px = 0,703em
     nagłówka, koło 86,78 px = 24,515vw, jego napis 11,944 px = 3,374vw.
     Interlinia 1,04 i światło -0,035em zgadzały się już wcześniej. */
  .hero-foto:not(.hero-foto--podstrona) .hero-foto__naglowek {
    font-size: 10.707vw;
    /* 324 px przy 354 px szerokości okna. Kolumna tekstu ma 314 px, więc
       wiersz wychodzi 10 px poza prawy margines i dzięki temu "zasługuje na"
       zostaje w jednym wierszu, tak jak w makiecie 65:15182. */
    max-width: none; width: 91.53vw;
    /* Nagłówki mają globalnie text-wrap: balance, który wyrównuje długość
       wierszy. Makieta jest składana zachłannie, więc tutaj balansowanie
       wyłączamy, inaczej "na" spada do trzeciego wiersza. */
    text-wrap: wrap;
  }
  .hero-foto:not(.hero-foto--podstrona) .hero-foto__pismo {
    font-size: 0.703em;
    /* Dosunięcie do miejsca z makiety; wartości w em, żeby szły za krojem. */
    position: relative; left: -0.127em; top: 0.367em;
  }
  /* Na wąskim ekranie pismo jest mniejsze, więc swasz schodzi płycej:
     nachodzenie znika od zera. Ujemna wartość dopasowana wcześniej
     do makiety kładła "apetyt." wprost na ogonie "buduje". */
  .hero-foto:not(.hero-foto--podstrona) .hero-foto__pismo i + i {
    margin: 0.05em 0 0 1.541em;
  }
  /* Hero podstron nie ma kadru pionowego, więc zostaje poziomy, ale kadr
     2,6:1 schodził na 390 px do paska 149 px. Przycinamy go do 16:10,
     czyli 244 px, bez ruszania kompozycji w poziomie. */
  .hero-foto--podstrona .hero-foto__tlo { aspect-ratio: 16 / 10; object-fit: cover; }
  /* W wariancie --prawo pusta strefa kadru jest po prawej, czyli temat siedzi
     po lewej. Kadrowanie od środka ucinało mu bok, więc kotwiczymy do lewej. */
  .hero-foto--prawo .hero-foto__tlo { object-position: left center; }
}
@media (min-width: 1100px) {
  .hero-foto__tresc { position: relative; padding-top: calc(72px + 4.5vw); }
}
.hero-foto__naglowek {
  font-size: clamp(31px, 3.6vw, 68px); line-height: 1.04;
  letter-spacing: -0.035em; font-weight: 300; max-width: 13ch;
}
.hero-foto__naglowek b { font-weight: 700; }
/* Jak w makiecie: dwa osobne wiersze pisma, drugi zsunięty w prawo i w dół,
   całość pod obrotem -12°. W jednej linii swasze adelii wchodziły na siebie. */
.hero-foto__pismo {
  display: inline-flex; flex-direction: column;
  transform: rotate(-12deg) translateY(.32em); transform-origin: left center;
  font-family: var(--f-pismo); font-weight: 400; color: var(--c-pismo);
  font-size: 0.88em; line-height: 1; letter-spacing: 0;
  margin-left: .2em; vertical-align: baseline;
  /* Kontekstowe alternaty adelii doklejały poziome swasze przez środek słowa
     i wyglądało to jak przekreślenie. Wyłączamy je celowo. */
  font-feature-settings: "calt" 0, "clig" 0, "dlig" 0, "liga" 0, "swsh" 0, "cswh" 0;
}
.hero-foto__pismo i { font-style: normal; display: block; }
/* Swasz wyprowadzający z "e" w "buduje" biegnie w prawo i w dół, przez co
   przy .18em przechodził przez "apetyt.". Mierzone nachodzenie tuszu (nie
   pudełek) znika dopiero od .4em, więc zostaje .45em z zapasem. */
.hero-foto__pismo i + i { margin: .45em 0 0 1.15em; }

/* Wariant dla podstron: bez okrągłego przycisku, niższy kadr, nagłówek
   wyśrodkowany w pionie na pustej części zdjęcia. */
.hero-foto--podstrona .hero-foto__naglowek { max-width: 15ch; }

/* Pusta strefa kadru bywa po prawej (makieta 51:14580) — wtedy nagłówek
   przechodzi do drugiej połowy kolumny. */
@media (min-width: 1000px) {
  .hero-foto--prawo .hero-foto__tresc {
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }
  .hero-foto--prawo .hero-foto__naglowek { grid-column: 2; }
}

/* Ciemne ujęcie (makieta 51:14591): biały nagłówek na ciemnej ladzie.
   Kontrast liczony na realnym pikselu pod tekstem, nie na kolorze z CSS. */
.hero-foto--ciemny { background: var(--c-scena-noc); }
.hero-foto--ciemny .hero-foto__naglowek { color: var(--c-text-on-dark); }

/* Kadr wypełniony treścią po całości (packshot z nadrukiem) nie ma pustej
   strefy pod tekst. Wtedy nagłówek dostaje własną: pionowy gradient z tła
   sceny, gasnący w połowie kadru. Nie przyciemnienie — rozjaśnienie kremem. */
.hero-foto--kryty { position: relative; }
.hero-foto--kryty::before {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(100deg,
    rgb(253 252 250 / .96) 0%, rgb(253 252 250 / .9) 26%, rgb(253 252 250 / 0) 62%);
}
.hero-foto--kryty .hero-foto__tresc { z-index: 2; }
@media (min-width: 1100px) {
  .hero-foto--podstrona { min-height: min(38vw, 560px); display: grid; align-items: center; }
  .hero-foto--podstrona .hero-foto__tresc { padding-top: 72px; padding-bottom: 0; }
}

/* Okrągły przycisk. Spoczywa pod nagłówkiem kadru; wskazany kursorem w hero
   wędruje za nim z opóźnieniem (app.js, lerp). Na dotyku stoi w miejscu. */
.hero-foto__kolo {
  position: absolute; left: 50%; bottom: 9%;
  translate: -50% 0;
  width: 156px; height: 156px; border-radius: 50%;
  padding: 0;
  display: grid; place-items: center; text-align: center;
  background: var(--c-accent); color: var(--c-text-on-accent);
  border: 1px solid rgba(255, 255, 255, .04);
  font-family: Inter, sans-serif; font-size: 16px; font-weight: 600; line-height: 1.28;
  text-decoration: none;
  will-change: transform;
}
.hero-foto__kolo:hover { background: var(--c-accent-hover); }
/* Poniżej 1100 px magnes nie działa (chodzi tylko za myszą), a samo koło
   156 px zostaje wtedy plamą zieleni na pustym kremie. Wąski ekran dostaje
   zwykły przycisk, wyrównany do lewej z kolumną tekstu. */
/* Koło na wąskim ekranie: wymiary wprost z makiety 65:15177 (86,78 px przy
   354 px szerokości = 24,515vw, napis 11,944 px = 3,374vw). Blok musi stać
   ZA regułą bazową .hero-foto__kolo, inaczej przegrywa kolejnością. */
@media (max-width: 767px) {
  .hero-foto__kolo {
    position: relative; z-index: 2; align-self: flex-start;
    left: auto; bottom: auto; translate: none;
    width: 24.515vw; height: 24.515vw; min-height: 0;
    padding: 0; border-radius: 50%;
    display: grid; place-items: center; text-align: center;
    font-size: 3.374vw; line-height: 1.28;
    /* Pudełko nagłówka sięga niżej niż ostatni wiersz, bo pismo jest obrócone
       i wystaje poza wiersz. Ujemny margines zdejmuje tę nadwyżkę, żeby koło
       stanęło tam, gdzie w makiecie (248,05 px przy 354 px). */
    margin: -3.065vw var(--marg) var(--s-6);
  }
}

@media (min-width: 768px) and (max-width: 1099px) {
  .hero-foto__kolo {
    position: static; translate: none;
    width: auto; height: auto; min-height: 52px;
    padding: 0 var(--s-6); border-radius: var(--r);
    display: inline-flex; align-items: center; justify-content: center;
    font-weight: 500;
    margin: 0 var(--marg) var(--s-7);
  }
  .hero-foto__kolo br { display: none; }
}

/* ——— Pasek konkretów ——————————————————————————————————————— */

/* Kreska nad każdą liczbą osobno, nie jedna ciągła przez całą szerokość:
   przerwa w linii dzieli pasek na trzy pozycje bez dokładania separatorów. */
.fakty { display: grid; grid-template-columns: 1fr; gap: 0; }
.fakt { padding: var(--s-5) 0 0; border-top: 1px solid var(--c-line); }
.fakt b { display: block; font-family: Outfit, sans-serif; font-size: clamp(26px, 3vw, 38px); font-weight: 300; letter-spacing: -.02em; }
.fakt span { display: block; margin-top: var(--s-1); font-size: 14px; color: var(--c-text-soft); }
@media (min-width: 760px) {
  .fakty { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-8); }
}

/* ——— Benefity ————————————————————————————————————————————————— */
/* Cztery argumenty sprzedażowe. Bez kresek i bez ramek: kolumnę wyznacza
   sam odstęp. Kwadrat u góry to miejsce na ikonę, w wireframie z kodem,
   żeby dało się je zamówić razem z resztą grafik. */

/* Ciemny pas nori (kierunek: trzy ciemne miejsca na stronie, nie więcej).
   Karty na pasie stoją na --c-bg-dark-soft, numer w krafcie. */
.sekcja--ciemna { background: var(--c-bg-dark); color: var(--c-text-on-dark); }
.sekcja--ciemna .lead { color: var(--c-text-on-dark-soft); }
.sekcja--ciemna .karta--tekst { background: var(--c-bg-dark-soft); border: 0; }
.sekcja--ciemna .karta--tekst b { color: var(--c-kraft); }
.sekcja--ciemna .karta--tekst p { color: var(--c-text-on-dark); }

.benefity {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: 1fr; gap: var(--s-7);
}
@media (min-width: 620px)  { 
.benefity { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-8) var(--s-6); } }
@media (min-width: 1000px) { 
.benefity { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
/* Trzy punkty zamiast czterech: siatka ma iść po trzech kolumnach */
@media (min-width: 620px)  { .benefity:has(> :nth-child(3):last-child) { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.benefit {
  display: flex; flex-direction: column; align-items: center;
  gap: var(--s-4); text-align: center;
}
/* Kółko bez wypełnienia: sekcja stoi na --c-bg-alt i biały krążek robił
   z ikony plakietkę. Zostaje sama kreska i zielony glif. */
.benefit__ikona {
  width: 82px; height: 82px; flex: none;
  display: grid; place-items: center;
  background: transparent; border: 1px solid var(--c-line); border-radius: 50%;
  font-size: 10px; letter-spacing: .06em; color: var(--c-accent);
}
.benefit__ikona svg { width: 38px; height: 38px; display: block; }
.benefit__tekst {
  font-family: var(--f-head); font-size: 19px; line-height: 1.35;
  font-weight: 400; letter-spacing: -.01em; color: var(--c-text);
  max-width: 20ch;
}
/* Poniżej 620 px cztery wyśrodkowane kolumny zajmowały 869 px na cztery
   hasła, czyli ekran z okładem prawie pustego kremu. Wąski ekran czyta
   je jako listę: ikona po lewej, hasło po prawej. */
@media (max-width: 619px) {
  .benefity { gap: var(--s-5); }
  .benefit { flex-direction: row; align-items: center; text-align: left; gap: var(--s-4); }
  .benefit__ikona { width: 56px; height: 56px; }
  .benefit__ikona svg { width: 28px; height: 28px; }
  .benefit__tekst { font-size: 17px; max-width: none; }
}
/* Pas przewag jest zwarty: cztery hasła nie utrzymują pełnego --sekcja
   i przy 160 px wisiały w pustce. */
.sekcja--zwarta { padding: var(--s-8) 0; }

/* ——— Split: tekst obok dużego zdjęcia ——————————————————————— */

.split { display: grid; grid-template-columns: 1fr; gap: var(--s-6); align-items: center; }
@media (min-width: 900px) {
  .split { grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: var(--s-9); }
  .split--flip .split__tekst { order: 2; }
}
.split__tekst > * + * { margin-top: var(--s-5); }

/* ——— Cytat / teza ——————————————————————————————————————————— */

.teza { max-width: 20ch; }
.teza-wrap { display: grid; gap: var(--s-6); }

/* ——— Siatka kart ————————————————————————————————————————————— */

.karty { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-4); }
@media (min-width: 700px)  { .karty { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-5); } }
@media (min-width: 1000px) { .karty { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.karta { display: flex; flex-direction: column; gap: var(--s-3); text-decoration: none; }
.karta .ph { aspect-ratio: 1 / 1; }
.karta h3 { font-size: 17px; line-height: 1.25; font-weight: 500; }
.karta p { font-size: 14px; line-height: 1.45; color: var(--c-text-soft); }
.karta .link { margin-top: auto; align-self: flex-start; }

.karta--wiecej {
  align-items: center; justify-content: center; text-align: center;
  border: 1px solid var(--c-text); border-radius: var(--r-duze);
  min-height: 200px; padding: var(--s-5); gap: var(--s-2);
}
/* Bez tego link ląduje na samym dole kafelka przez .karta .link{margin-top:auto} */
.karta--wiecej .link { margin-top: var(--s-4); align-self: center; }
.karta--wiecej b { font-family: Outfit, sans-serif; font-size: 34px; font-weight: 300; }

/* ——— Wiersze możliwości ————————————————————————————————————— */

.rzedy { border-top: 1px solid var(--c-line); }
.rzad {
  display: grid; grid-template-columns: 1fr; gap: var(--s-4);
  padding: var(--s-6) 0;
  border-bottom: 1px solid var(--c-line);
  align-items: center;
}
.rzad__nr { font-size: 13px; color: var(--c-text-soft); letter-spacing: .1em; }
.rzad__tekst > * + * { margin-top: var(--s-2); }
.rzad .ph { aspect-ratio: 3 / 2; }
@media (min-width: 860px) {
  .rzad { grid-template-columns: 56px minmax(0, 4fr) minmax(0, 5fr) 220px; gap: var(--s-6); }
}

/* ——— Stepper ————————————————————————————————————————————————— */

/* Oś procesu. Kroki wiszą na wspólnej kresce: na dotyku biegnie ona w pionie
   z lewej, od 860 px w poziomie nad kolumnami. Kropka akcentu siedzi na osi,
   numer pod nią w Outfit 300 — jedyny zielony tekst poza przyciskami,
   celowo: numer jest nawigacją po procesie, nie ozdobą. */
.kroki { display: grid; grid-template-columns: 1fr; gap: 0; counter-reset: krok; }
.krok {
  counter-increment: krok;
  position: relative;
  margin-left: 5px;
  padding: 0 0 var(--s-7) calc(var(--s-5) + 6px);
  border-left: 1px solid var(--c-line);
}
.krok:last-child { padding-bottom: 0; border-left-color: transparent; }
.krok::after {
  content: "";
  position: absolute; top: 6px; left: -6px;
  width: 11px; height: 11px; border-radius: 50%;
  background: var(--c-accent);
}
.krok::before {
  content: counter(krok, decimal-leading-zero);
  display: block; margin-bottom: var(--s-3);
  font-family: var(--f-head); font-weight: 300;
  font-size: clamp(24px, 1.9vw, 30px); line-height: 1; letter-spacing: -0.01em;
  color: var(--c-accent);
}
.krok h3 { font-size: 19px; font-weight: 500; margin-bottom: var(--s-2); }
.krok p { font-size: 15px; color: var(--c-text-soft); max-width: 36ch; }
@media (min-width: 860px) {
  .kroki--poziom { grid-template-columns: repeat(var(--kolumn, 3), minmax(0, 1fr)); gap: var(--s-6); border-top: 1px solid var(--c-line); }
  .kroki--poziom .krok { margin-left: 0; padding: var(--s-6) 0 0; border-left: 0; }
  .kroki--poziom .krok::after { top: -6px; left: 0; }
}

/* Zaproszenie pod procesem: własna powierzchnia, żeby lead z CTA nie wisiały
   w pustce między osią a karuzelą inspiracji. */
.sekcja__stopka--panel {
  background: var(--c-bg-alt);
  border-radius: var(--r-duze);
  padding: var(--s-8) var(--s-6);
}
.sekcja__stopka--panel .lead { margin-inline: auto; }

/* ——— PPWR: tekst na scenie kremowej, kadr za tekstem —————————— */

/* Zdjęcie kryje całą sekcję bez masek, a tekst stoi na białej karcie
   (decyzja: gradient wypadł, karta czyta się lepiej). Poniżej 900 px karta
   wraca na kolor sceny, a kadr schodzi pod tekst jako pełny pas. */
.ppwr { position: relative; background: var(--c-scena-krem); overflow: hidden; }
.ppwr .wrap { position: relative; z-index: 1; }
.ppwr__tekst {
  max-width: 60ch;
  background: var(--c-scena-biel);
  border-radius: var(--r-duze);
  padding: var(--s-7);
}
.ppwr .foto {
  position: absolute; inset: 0;
  height: 100%; width: 100%;
  border-radius: 0; background: transparent;
}
.ppwr .foto img { object-position: right center; }
@media (min-width: 900px) {
  .ppwr__tekst { max-width: min(640px, 62vw); }
}
@media (max-width: 899.98px) {
  .ppwr { padding-bottom: 0; }
  .ppwr__tekst { background: transparent; border-radius: 0; padding: 0; }
  .ppwr .foto {
    position: static; width: 100%; height: auto;
    margin-top: var(--s-7);
  }
}

/* Kadr tymczasowy: najbliższe istniejące ujęcie w miejscu, na które audyt
   zdjęć wciąż zamawia docelowy materiał. Plakietka mówi to wprost przy
   przeglądzie; do zdjęcia jedną linijką (display: none), gdy dojdzie materiał docelowy. */
.foto--tymczasowa { position: relative; }
.foto--tymczasowa::after {
  content: "kadr tymczasowy";
  position: absolute; left: var(--s-3); bottom: var(--s-3);
  padding: 2px 8px; border-radius: 999px;
  background: rgba(253, 252, 250, .82); color: var(--c-text-soft);
  font-size: 11px; letter-spacing: .06em; text-transform: uppercase;
}

/* Kompetencje zaplecza: wyliczenie ośmiu pozycji podane jako
   siatka parametrów, a nie zdanie z przecinkami. Osiem pozycji w jednym
   akapicie czytało się jak lista zakupów. */
.kompetencje {
  list-style: none; margin: var(--s-6) 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s-3) var(--s-5);
}
.kompetencje li {
  font-size: var(--fs-spec); letter-spacing: var(--ls-spec);
  text-transform: uppercase; color: var(--c-text-soft);
  padding-top: var(--s-3); border-top: 1px solid var(--c-line);
}

/* ——— Ciemny pas ze zdjęciem w tle ———————————————————————————— */

/* Kadr z ciemnej rodziny leży pod treścią na tyle słabo, że czyta się jak
   faktura, nie jak zdjęcie. Nori zostaje pod spodem, więc nawet gdyby obraz
   się nie wczytał, kontrast tekstu jest ten sam co bez niego. */
.sekcja--ciemna-foto { position: relative; overflow: hidden; }
.sekcja--ciemna-foto > .wrap { position: relative; z-index: 1; }
.sekcja__tlo {
  position: absolute; inset: 0; z-index: 0;
  width: 100%; height: 100%; object-fit: cover; object-position: center;
  /* Rozmycie plus niska krycie: jasne miejsca kadru (biały rękaw kucharza)
     przy samym kryciu wciąż czytały się jak pełne zdjęcie. Lekkie
     powiększenie chowa miękką krawędź, którą blur robi przy brzegach. */
  opacity: .09;
  filter: blur(3px);
  transform: scale(1.04);
}

/* ——— Sekcja Forpy: kadr pełnej szerokości, film przewijany scrollem —— */

/* Tło sceny w wideo trzyma tę samą wartość co tło sekcji, więc kadr nie ma
   widocznej krawędzi: pudełko stoi po lewej, a biel po prawej jest tłem sekcji,
   nie pikselami w pliku. Wartość zostaje tutaj, nie w tokenach — używa jej
   tylko ta sekcja (zasada 3 z tokens.css).
   Uwaga na liczbę: w pliku źródłowym tło ma #FCFCFC, ale H.264 trzyma jasność
   w zakresie TV i przeglądarka rozciąga ją przy dekodowaniu, więc na ekranie
   wychodzi #FEFEFE. Dobieramy pod to, co widać, nie pod to, co w pliku —
   przy #FCFCFC na styku leciał pionowy szew.
   Kadr niczego nie przycina (`contain`), więc pudełko przetrwa każdą wysokość
   sekcji; nadmiar powierzchni i tak ma kolor tła. */
.forpa {
  --c-scena-moku: #FEFEFE;
  position: relative;
  padding: 0;
  background: var(--c-scena-moku);
  overflow: hidden;
}
.forpa__kadr { margin: 0; }
.forpa__wideo { width: 100%; height: 100%; object-fit: contain; }
.forpa__wrap { position: relative; }
.forpa__tekst > * + * { margin-top: var(--s-5); }

@media (max-width: 899.98px) {
  /* Na dotyku tekst nie zmieści się na kadrze, więc kadr zostaje pasem
     nad nim, przez całą szerokość okna. */
  .forpa__kadr { aspect-ratio: 4 / 5; }
  .forpa__wideo { object-position: center; }
  .forpa__tekst { padding: var(--sekcja) 0; }
}

@media (min-width: 900px) {
  /* Kadr wypełnia sekcję od góry do dołu i dochodzi do prawej krawędzi okna,
     tekst leży na nim po lewej. Strona jest wybrana pod ujęcie, nie pod rytm
     układu: przedramię wychodzi poza prawą krawędź materiału, więc dosunięte
     do brzegu okna urywa się tam, gdzie ucięcie czyta się naturalnie.
     Przy kadrze po lewej ta sama krawędź stawała pionową kreską w połowie
     bieli i wyglądała na błąd kadrowania.
     `min-height` trzyma kadr wysoki także przy krótszym tekście. */
  /* Sekcja stoi na prawie białym tle, tak samo jak sekcja nad nią, więc
     pełne --sekcja z obu stron zlewało się w jedną pustkę: 160 px z dołu
     poprzedniej plus 182 px nad nagłówkiem. Tutaj oddech jest krótszy. */
  .forpa { min-height: min(74vh, 720px); display: flex; align-items: center; }
  .forpa__kadr {
    position: absolute; top: 0; bottom: 0; right: 0; width: 56%;
  }
  .forpa__wideo { object-position: right center; }
  .forpa__wrap { width: 100%; }
  .forpa__tekst {
    width: 44%; margin-right: auto;
    padding: calc(var(--sekcja) * .65) 0;
  }
  /* Sekcja nad Forpą kończy się prawie białą płytą, a Forpa nią zaczyna.
     Dwa pełne --sekcja stykały się w jedną pustkę bez żadnej krawędzi. */
  .sekcja:has(+ .forpa) { padding-bottom: calc(var(--sekcja) * .55); }
}

/* ——— Hero podstron: nagłówek połączony z kadrem ———————————————— */

/* Tytuł stoi na białej płycie, która nachodzi na górną krawędź zdjęcia:
   jedna kompozycja zamiast dwóch pasów. Płyta jest w kolorze tła strony,
   więc nad zdjęciem w ogóle jej nie widać. */
.hero--zlaczony { padding-bottom: 0; }
.hero--zlaczony .wrap { position: relative; z-index: 1; }
.hero--zlaczony .hero__tekst {
  display: inline-block;
  background: var(--c-bg);
  border-radius: 0 0 var(--r-duze) 0;
  padding: 0 var(--s-8) var(--s-6) 0;
}
.hero--zlaczony .hero__foto { margin-top: calc(-1 * var(--s-9)); }
@media (max-width: 759.98px) {
  .hero--zlaczony .hero__tekst { padding-right: var(--s-5); }
  .hero--zlaczony .hero__foto { margin-top: calc(-1 * var(--s-6)); }
}

/* ——— Karta kontaktu przy wycenie —————————————————————————————— */

/* Telefon pracuje pierwszy: kupiec B2B na podstronie kontaktu szuka numeru,
   nie formularza. Karta stoi w hero, obok nagłówka. */
.panel-boczny { background: var(--c-bg-alt); border-radius: var(--r-duze); padding: var(--s-6); }
.kontakt-karta__etykieta {
  font-size: var(--fs-spec); letter-spacing: var(--ls-spec);
  text-transform: uppercase; color: var(--c-text-soft); margin-bottom: var(--s-3);
}
.kontakt-karta__tel {
  display: block; font-family: var(--f-head); font-weight: 400;
  font-size: clamp(22px, 2vw, 28px); color: var(--c-text);
  text-decoration: none; margin-bottom: var(--s-2);
}
.kontakt-karta__tel:hover { color: var(--c-accent); }
.kontakt-karta a { color: var(--c-text); }
@media (max-width: 619px) {
  .kontakt-karta p > a { display: inline-block; padding: 8px 0; margin: -6px 0; }
}
.kontakt-karta p + p { margin-top: var(--s-2); }

/* ——— Lista definicyjna ——————————————————————————————————————— */

.spec { border-top: 1px solid var(--c-line); margin: 0; }
.spec > div {
  display: grid; grid-template-columns: 1fr; gap: var(--s-2);
  padding: var(--s-5) 0; border-bottom: 1px solid var(--c-line);
}
.spec dt { font-size: 15px; font-weight: 500; }
.spec dd { margin: 0; font-size: 15px; color: var(--c-text-soft); max-width: var(--tekst); }
@media (min-width: 760px) {
  .spec > div { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: var(--s-6); }
}

/* ——— Pasek kotwic ————————————————————————————————————————————— */

.kotwice {
  position: sticky; top: 72px; z-index: 30;
  background: rgba(245,244,241,.94);
  backdrop-filter: blur(10px);
  border-top: 1px solid var(--c-line);
  border-bottom: 1px solid var(--c-line);
}
.kotwice ul {
  display: flex; gap: var(--s-5); list-style: none; margin: 0; padding: var(--s-3) 0;
  overflow-x: auto; scrollbar-width: none;
}
.kotwice ul::-webkit-scrollbar { display: none; }
.kotwice a { font-size: 14px; text-decoration: none; color: var(--c-text-soft); white-space: nowrap; }
.kotwice a:hover { color: var(--c-text); }

/* ——— Blok kategorii ——————————————————————————————————————————— */

.kat { padding: var(--sekcja) 0; border-bottom: 1px solid var(--c-line); }
.kat:last-of-type { border-bottom: 0; }
.kat__tekst > * + * { margin-top: var(--s-5); }

/* ——— Formularz ————————————————————————————————————————————————— */

.pole { display: block; }
.pole + .pole { margin-top: var(--s-5); }
.pole > span {
  display: block; margin-bottom: var(--s-2);
  font-size: 14px; font-weight: 500;
}
.input, .select, .textarea {
  width: 100%; min-height: 52px;
  padding: var(--s-3) var(--s-4);
  background: var(--c-bg);
  border: 1px solid var(--c-line); border-radius: var(--r);
  font-family: inherit; font-size: 16px; color: var(--c-text);
}
.textarea { min-height: 132px; resize: vertical; }
.pole-2 { display: grid; grid-template-columns: 1fr; gap: var(--s-5); }
@media (min-width: 700px) { .pole-2 { grid-template-columns: 1fr 1fr; } }
.pole-2 .pole + .pole { margin-top: 0; }

.zgoda { display: flex; gap: var(--s-3); align-items: flex-start; font-size: 14px; color: var(--c-text-soft); }
.zgoda + .zgoda { margin-top: var(--s-4); }
.zgoda input { margin-top: 4px; flex: none; width: 18px; height: 18px; }

.drop {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--s-2);
  min-height: 200px; padding: var(--s-6);
  text-align: center;
  background: var(--c-bg);
  border: 1px dashed var(--c-line); border-radius: var(--r-duze);
}
.drop b { font-size: 17px; font-weight: 500; }
.drop span { font-size: 14px; color: var(--c-text-soft); max-width: 44ch; }

.wizard { background: var(--c-bg); border: 1px solid var(--c-line); border-radius: var(--r-duze); padding: var(--s-6); }
@media (min-width: 760px) { .wizard { padding: var(--s-8); } }
.postep { display: flex; gap: var(--s-2); margin-bottom: var(--s-6); }
.postep span { flex: 1; height: 3px; background: var(--c-line); border-radius: 2px; }
.postep span[data-aktywny] { background: var(--c-text); }
.postep-opis { font-size: 13px; letter-spacing: .1em; text-transform: uppercase; color: var(--c-text-soft); margin-bottom: var(--s-5); }
.form-nav { display: flex; flex-wrap: wrap; gap: var(--s-3); margin-top: var(--s-7); padding-top: var(--s-6); border-top: 1px solid var(--c-line); }
/* Ten sam problem co w .btn-grupa: dwa przyciski w rzędzie dzieliły się
   szerokością i "Zamów próbkę opakowania" łamało się na dwa wiersze. */
@media (max-width: 767px) {
  .form-nav { flex-direction: column; }
  .form-nav .btn { width: 100%; }
}

/* ——— Pas z wezwaniem ————————————————————————————————————————— */

/* Pas CTA na piaskowym --c-bg-band #F1EDE4: cieplejszy od zwykłej sekcji,
   ale spokojniejszy od kremu sceny, który przy tej powierzchni robił się
   dominującą płaszczyzną. Kontrasty: tekst 14,16:1, tekst wtórny 5,10:1. */
.cta-band { background: var(--c-bg-band); }
.cta-band .wrap { padding-top: var(--sekcja); padding-bottom: var(--sekcja); }
@media (max-width: 619px) {
  .cta-band .mala a { display: inline-block; padding: 8px 0; margin: -6px 0; }
}
.cta-band h2 { max-width: 22ch; }
.cta-band ul { list-style: none; margin: var(--s-6) 0 0; padding: 0; }

/* Lista z odhaczeniem. Bez kresek: ptaszek sam dzieli pozycje. */
.ticki li {
  display: flex; align-items: flex-start; gap: var(--s-3);
  padding: var(--s-2) 0;
  font-size: 16px; color: var(--c-text);
}
.ticki li::before {
  content: "";
  flex: none; width: 20px; height: 20px; margin-top: 3px;
  background: var(--c-text);
  border-radius: 50%;
  /* ptaszek wycięty w kółku */
  -webkit-mask: no-repeat center / 11px 11px
    url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 12"><path d="M1.5 6.4 4.4 9.3 10.5 3" fill="none" stroke="black" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/></svg>');
  mask: no-repeat center / 11px 11px
    url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 12"><path d="M1.5 6.4 4.4 9.3 10.5 3" fill="none" stroke="black" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/></svg>');
}

/* ——— Stopka ——————————————————————————————————————————————————— */

.foot { background: var(--c-bg-dark); color: var(--c-text-on-dark); padding: var(--s-9) 0 var(--s-6); }
.foot__gora { display: grid; grid-template-columns: 1fr; gap: var(--s-8); }
@media (min-width: 900px) { .foot__gora { grid-template-columns: minmax(0, 4fr) repeat(2, minmax(0, 3fr)); gap: var(--s-8); } }
.foot__logo img { width: 160px; height: auto; }
@media (max-width: 619px) {
  .head__logo { position: relative; }
  .head__logo::after { content: ""; position: absolute; inset: -11px -8px; }
}
.foot__opis { margin-top: var(--s-5); font-size: 15px; color: var(--c-text-on-dark-soft); max-width: 40ch; }
/* Nagłówki kolumn na bieli, nie w krafcie: kraft ciągnął wzrok mocniej niż
   same odnośniki pod nimi, a to tylko etykieta grupy. */
.foot h3 { font-size: 13px; letter-spacing: .12em; text-transform: uppercase; color: var(--c-text-on-dark); margin-bottom: var(--s-4); font-family: Inter, sans-serif; font-weight: 500; }
.foot ul { list-style: none; margin: 0; padding: 0; }
.foot li + li { margin-top: var(--s-3); }
.foot a { font-size: 15px; text-decoration: none; color: var(--c-text-on-dark-soft); }
/* Odsyłacze stopki mają 18 px wysokości i 12 px przerwy, czyli na dotyku
   sąsiadują za blisko. Pole trafienia rośnie paddingiem, a ujemny margines
   zdejmuje z powrotem to, co padding dołożyłby do odstępów. */
@media (max-width: 619px) {
  .foot li + li { margin-top: var(--s-4); }
  .foot li a { display: inline-block; padding: 8px 0; margin: -8px 0; }
}
.foot a:hover { color: var(--c-text-on-dark); }
/* Trzy pozycje: nota o prawach do lewej, dane rejestrowe na środek,
   polityka do prawej. Środkowa kolumna jest szeroka, bo adres z NIP-em
   jest najdłuższy i to on wyznacza szerokość. */
.foot__dol {
  margin-top: var(--s-8); padding-top: var(--s-5);
  border-top: 1px solid var(--c-line-dark);
  display: grid; grid-template-columns: 1fr; gap: var(--s-3);
  font-size: 13px; color: var(--c-text-on-dark-soft);
  text-align: center;
}
.foot__dol a { font-size: 13px; color: var(--c-text-on-dark-soft); }
@media (max-width: 619px) {
  .foot__dol a { display: inline-block; padding: 9px 0; margin: -9px 0; }
}
.foot__dol a:hover { color: var(--c-text-on-dark); }
@media (min-width: 900px) {
  .foot__dol {
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    gap: var(--s-6); align-items: baseline;
  }
  .foot__dol > :first-child { text-align: left; }
  .foot__dol > :last-child { text-align: right; }
}

/* ——— Dostępność ————————————————————————————————————————————————— */

:focus-visible { outline: 2px solid var(--c-focus); outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition: none !important; }
}

/* Zdjęcie pełnej szerokości — bez bocznych krawędzi i zaokrągleń */
.ph--pelna { border-left: 0; border-right: 0; border-radius: 0; }

/* ——— Kadr ze zdjęciem —————————————————————————————————————— */

/* Odpowiednik `.ph` z tym samym zestawem proporcji: placeholder i zdjęcie
   zajmują dokładnie to samo miejsce, więc podmiana nie rusza układu.
   Produkt rzadko siedzi na środku ujęcia, stąd --foto-pos przy kadrach,
   które trzeba przesunąć. */
.foto { margin: 0; border-radius: var(--r-duze); overflow: hidden; background: var(--c-ph); }
.foto img, .foto video { width: 100%; height: 100%; object-fit: cover; object-position: var(--foto-pos, center); }
.foto--kwadrat { aspect-ratio: 1 / 1; }
.foto--pion    { aspect-ratio: 4 / 5; }
.foto--szeroki { aspect-ratio: 16 / 9; }
.foto--pas     { aspect-ratio: 21 / 9; }
.foto--pas-hi  { aspect-ratio: 21 / 10; }
.foto--makro   { aspect-ratio: 3 / 2; }
.foto--fill    { height: 100%; min-height: 240px; }
.foto--pelna   { border-radius: 0; }

/* ——— Karuzela wychodząca poza krawędź ekranu ————————————————— */
/* Tor zaczyna się w kolumnie tekstu, a kończy dopiero za prawą krawędzią
   okna. Ucięty kafelek jest jedyną informacją, że da się przewinąć,
   więc szerokość kafelka nie może się układać w równą wielokrotność. */

.karuzela { position: relative; }

.karuzela__tor {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 76%;
  gap: var(--s-4);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  padding: 0 var(--marg) var(--s-5);
  scroll-padding-left: var(--marg);
  scrollbar-width: none;
}
.karuzela__tor::-webkit-scrollbar { display: none; }
.karuzela__tor > * { scroll-snap-align: start; }

@media (min-width: 700px) {
  .karuzela__tor { grid-auto-columns: 44%; gap: var(--s-5); }
}
@media (min-width: 1000px) {
  /* 425 px to kafelek z siatki czterokolumnowej powiększony o połowę */
  .karuzela__tor {
    grid-auto-columns: 425px;
    padding-left: max(var(--marg), calc((100% - var(--kolumna)) / 2 + var(--marg)));
    /* Prawe wcięcie równe lewemu: po dojechaniu do końca ostatni kafelek
       kończy się dokładnie na prawej krawędzi kolumny treści, a nie 64 px przed nią */
    padding-right: max(var(--marg), calc((100% - var(--kolumna)) / 2 + var(--marg)));
    scroll-padding-left: max(var(--marg), calc((100% - var(--kolumna)) / 2 + var(--marg)));
  }
}

/* Strzałki: tylko tam, gdzie jest kursor. Na dotyku wystarczy gest.
   Siadają na początku i na końcu toru, w pionie na środku kafelka — jego
   wysokość podaje wire.js w zmiennej --wys-kafla, bo zależy od długości opisu. */
.karuzela__ster { display: none; }
@media (hover: hover) and (min-width: 1000px) {
  .karuzela__ster {
    position: absolute; z-index: 5;
    left: 0; right: 0;
    top: calc(var(--wys-kafla, 420px) / 2);
    transform: translateY(-50%);
    display: flex; justify-content: space-between;
    padding: 0 var(--marg);
    pointer-events: none;
  }
  .karuzela__ster button {
    pointer-events: auto;
    width: 52px; height: 52px;
    display: grid; place-items: center;
    border: 1px solid var(--c-line); border-radius: var(--r);
    background: var(--c-bg); color: var(--c-text);
    font-family: inherit; font-size: 18px; line-height: 1; cursor: pointer;
  }
  .karuzela__ster button:hover:not(:disabled) { border-color: var(--c-text); }
  .karuzela__ster button:disabled { color: var(--c-text-soft); opacity: .55; cursor: default; }
}

/* Kafelek karuzeli jest większy, więc podpis może być odrobinę mocniejszy,
   a odstępy między kadrem, tytułem i opisem o stopień szersze niż w siatce. */
.karuzela .karta { gap: var(--s-4); }
.karuzela .karta h3 { font-size: 20px; }
/* Kafelek bez opisu udźwignie mocniejszy podpis, bo nic z nim nie konkuruje */
.karuzela .karta:not(:has(p)) h3 { font-size: 24px; line-height: 1.2; }
.karuzela .karta p { font-size: 15px; }
.karuzela .karta .link { margin-top: var(--s-2); }
.karuzela .karta--wiecej { min-height: 100%; }

/* ——— Prosta lista z separatorami ————————————————————————————— */

.lista { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--c-line); }
.lista li {
  padding: var(--s-3) 0;
  border-bottom: 1px solid var(--c-line);
  font-size: 15px; color: var(--c-text-soft);
}

/* ——— Akordeon ————————————————————————————————————————————————— */
/* Na <details>, bez JS-a: rozwijanie działa też przy wyłączonym skrypcie,
   a czytnik ekranu dostaje stan otwarty/zamknięty za darmo. */

.akordeon { border-top: 1px solid var(--c-line); }

/* Górna krawędź akordeonu równa się z górą pudełka nagłówka, przez co
   siedzi wyżej niż jego pierwsza linia. Kilka pikseli w dół wyrównuje optycznie. */
@media (min-width: 900px) {
  .dwie > .akordeon { margin-top: var(--s-5); }
}
.akordeon details { border-bottom: 1px solid var(--c-line); }

.akordeon summary {
  list-style: none;
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-4);
  padding: var(--s-5) 0;
  cursor: pointer;
  font-family: Outfit, Inter, sans-serif;
  font-size: clamp(19px, 1.5vw, 22px); font-weight: 400; letter-spacing: -.02em;
}
.akordeon summary::-webkit-details-marker { display: none; }
.akordeon summary::after {
  content: "+";
  flex: none;
  width: 34px; height: 34px;
  display: grid; place-items: center;
  border: 1px solid var(--c-line); border-radius: var(--r);
  font-family: Inter, sans-serif; font-size: 20px; line-height: 1; color: var(--c-text-soft);
}
.akordeon details[open] summary::after { content: "–"; color: var(--c-text); border-color: var(--c-text); }
.akordeon summary:hover::after { border-color: var(--c-text); }

/* Jedna kolumna: tekst, pod nim kadr na pełną szerokość pozycji.
   Zdjęcie obok tekstu robiło się znaczkiem, a to detal makro. */
.akordeon__tresc { display: grid; gap: var(--s-5); padding: 0 0 var(--s-6); }
.akordeon__tresc p { font-size: 15px; color: var(--c-text-soft); }
.akordeon__tresc .ph { aspect-ratio: 16 / 9; }

/* ——— Siatka kart: warianty liczby kolumn ——————————————————————— */

/* Dwie kolumny po 167 px to 103 px na tekst po odjęciu padding. "Buduje
   rozpoznawalność lokalu." rozjeżdżało się wtedy na pięć wierszy i dotykało
   krawędzi karty. Na wąskim ekranie karty idą jedna pod drugą. */
@media (max-width: 619px) {
  .karty--3 { grid-template-columns: minmax(0, 1fr); }
  .karty--3 .karta--tekst { padding: var(--s-5); }
}
@media (min-width: 700px)  { .karty--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .karty--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* Karta bez zdjęcia: sam numer i tekst, na własnej powierzchni */
.karta--tekst {
  background: var(--c-bg);
  border: 1px solid var(--c-line);
  border-radius: var(--r-duze);
  padding: var(--s-6);
  gap: var(--s-4);
  min-height: 200px;
}
/* Na ciemnym pasie karta z jednym zdaniem nie utrzymuje 200 px:
   zostaje po niej pusty dół. Wysokość wyznacza treść. */
.sekcja--ciemna .karta--tekst { min-height: 0; }
.karta--tekst b {
  font-family: Outfit, sans-serif; font-size: 13px; font-weight: 400;
  letter-spacing: .12em; color: var(--c-text-soft);
}
.karta--tekst p { font-size: 17px; line-height: 1.45; color: var(--c-text); max-width: none; }
.karta--tekst h3 + p { font-size: 15px; color: var(--c-text-soft); }

/* Dwie kolumny opisu pod katalogiem: kreska nad każdą wiąże je ze sobą
   i odcina od siatki produktów nad nimi. */
.dwie--opis > * { padding-top: var(--s-5); border-top: 1px solid var(--c-line); }
.dwie--opis .lead { color: var(--c-text); }
.dwie--opis .stos > * + * { margin-top: var(--s-4); }

/* ——— Sekcja z nagłówkiem na środku ————————————————————————————— */

.srodek { text-align: center; }
.srodek h2, .srodek p { margin-left: auto; margin-right: auto; }
.srodek .btn-grupa { justify-content: center; }
.sekcja__stopka { margin-top: var(--s-8); }

/* Pasek liczb w hero: mniejszy niż samodzielna sekcja, żeby nie bił się
   z nagłówkiem, i bez dolnej krawędzi, bo pod nim zaczyna się zdjęcie. */
.hero__fakty { margin-top: var(--s-8); }
.hero__fakty .fakt b { font-size: clamp(23px, 2.2vw, 30px); }
@media (max-width: 759px) {
  .hero__fakty .fakt + .fakt { margin-top: var(--s-4); }
}

/* ——— Widok katalogowy ————————————————————————————————————————— */
/* Układ katalogowy: filtry w lewej kolumnie, siatka produktów
   po prawej, a przy każdym produkcie od razu minimalny nakład. To liczba,
   po której kupiec B2B odsiewa dostawcę, więc nie może siedzieć w karcie
   dopiero po kliknięciu. */

.katalog { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-7); align-items: start; }
@media (min-width: 1000px) {
  .katalog { grid-template-columns: 240px minmax(0, 1fr); gap: var(--s-8); }
}

.filtry { position: sticky; top: 96px; }
/* Grupy są zwinięte: trzy otwarte listy
   zjadały cały pion, a siatka zaczynała się poniżej zgięcia. Wiersz grupy
   ma 48 px, bo to wygodny cel dotykowy. */
.filtry__grupa { border-bottom: 1px solid var(--c-line-soft); }
.filtry__grupa:last-child { border-bottom: 0; }
.filtry__grupa > summary {
  list-style: none; cursor: pointer;
  display: flex; align-items: center; justify-content: space-between;
  min-height: 48px; font-size: 16px;
}
.filtry__grupa > summary::-webkit-details-marker { display: none; }
.filtry__grupa > summary::after {
  content: ""; width: 8px; height: 8px;
  border-right: 1.5px solid var(--c-text); border-bottom: 1.5px solid var(--c-text);
  transform: rotate(45deg) translateY(-2px); transition: transform var(--przejscie);
}
.filtry__grupa[open] > summary::after { transform: rotate(225deg) translateY(-2px); }
.filtry__grupa ul { padding-bottom: var(--s-3); }
/* Liczba pasujących kategorii, policzona z opisów. Stoi tylko przy
   pozycjach, dla których dane są kompletne. */
.filtry__ile { margin-left: auto; font-size: 14px; color: var(--c-text-soft); }
.filtry li { display: flex; align-items: center; gap: var(--s-3); min-height: 40px; }
.filtry li label { flex: 1; }

.wynik-licznik { font-size: 15px; color: var(--c-text-soft); margin-bottom: var(--s-4); }
.filtry summary > span, .filtry h3 {
  font-family: Inter, sans-serif; font-size: 12px; font-weight: 500;
  letter-spacing: .12em; text-transform: uppercase; color: var(--c-text-soft);
  margin-bottom: var(--s-3);
}
.filtry ul { list-style: none; margin: 0; padding: 0; }
.filtry li + li { margin-top: 2px; }
.filtry label {
  display: flex; align-items: center; gap: var(--s-3);
  padding: 6px 0; font-size: 15px; color: var(--c-text-soft); cursor: pointer;
}
.filtry label:hover { color: var(--c-text); }
.filtry input { width: 17px; height: 17px; flex: none; accent-color: var(--c-text); }

/* Na wąskim ekranie filtry zwijają się do jednego bloku */
@media (max-width: 999px) {
  .filtry { position: static; border: 1px solid var(--c-line); border-radius: var(--r-duze); padding: var(--s-5); background: var(--c-bg); }
  .filtry > summary {
    list-style: none; cursor: pointer;
    display: flex; justify-content: space-between; align-items: center;
    font-size: 16px; font-weight: 500;
  }
  .filtry > summary::-webkit-details-marker { display: none; }
  .filtry > summary::after { content: "+"; font-size: 20px; color: var(--c-text-soft); }
  .filtry[open] > summary::after { content: "–"; }
  .filtry__ciało { margin-top: var(--s-5); }
}
@media (min-width: 1000px) {
  .filtry > summary { display: none; }
}


/* minmax(0, 1fr) zamiast 1fr: przy `1fr` długie słowo w opisie ("projektowo-konstrukcyjne")
   ustala min-content kolumny i siatka wychodzi poza ekran na 390 px. */
.produkty { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-4); }
@media (min-width: 700px)  { .produkty { gap: var(--s-5); } }
@media (min-width: 1240px) { .produkty { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* Karta bez ramki, tła i paddingu.
   Biel zostaje na samym kadrze, bo packshoty mają białe tło i na --c-bg
   pokazywałyby własny prostokąt. Kartę wyznacza zdjęcie i odstęp. */
.produkt {
  display: flex; flex-direction: column; gap: var(--s-3);
  text-decoration: none;
  scroll-margin-top: 120px;
}
.produkt .foto { background: var(--c-scena-biel); }
/* Bez ramki nie ma czego przyciemniać: reakcją na kursor zostaje samo
   powiększenie kadru z reguły `a:hover .foto img` niżej. */
.produkt .ph { aspect-ratio: 1 / 1; background-color: var(--c-bg-alt); }
/* Zdjęcie w karcie katalogu trzyma ten sam kwadrat co placeholder. Bez tego
   karty rozjeżdżają się w pionie, bo ujęcia mają różne proporcje. */
.produkt .foto { aspect-ratio: 1 / 1; }
.produkt h2, .produkt h3 { font-size: 17px; line-height: 1.25; font-weight: 500; }
.produkt__opis { font-size: 14px; line-height: 1.45; color: var(--c-text-soft); }
.produkt__opis:last-child { margin-top: auto; padding-top: var(--s-2); }

/* Wiersz „Formaty" to parametr techniczny, nie zdanie opisu: idzie krojem
   nagłówkowym w rozmiarze spec, żeby nie zlewał się z opisem kategorii. */
.produkt__spec {
  margin-top: auto; padding-top: var(--s-3);
  font-family: var(--f-head); font-size: var(--fs-spec);
  letter-spacing: var(--ls-spec); text-transform: uppercase;
  line-height: 1.5; color: var(--c-text-soft);
}

/* Pudełko zamknięte, wskazane kursorem pokazuje otwarte z zawartością.
   Drugi kadr leży pod spodem; na dotyku zostaje zamknięte. Figura celowo
   bez data-obr, żeby _zdjecia.py nie zwinął pary do jednego kadru. */
.foto-para { position: relative; }
.foto-para img + img { position: absolute; inset: 0; opacity: 0; transition: opacity var(--przejscie); }
@media (hover: hover) {
  .produkt:hover .foto-para img + img,
  .karta:hover .foto-para img + img { opacity: 1; }
}

/* Plakietki pod nagłówkiem katalogu */
.plakietki { display: flex; flex-wrap: wrap; gap: var(--s-3); margin-top: var(--s-6); }
.plakietki span {
  border: 1px solid var(--c-line); border-radius: var(--r);
  padding: 8px 14px; font-size: 13px; color: var(--c-text-soft);
}

/* Formularz na stronie głównej: tekst w węższej kolumnie, pola w szerszej.
   Dziesięć pól nie mieści się czytelnie w połowie szerokości. */
.formularz { display: grid; grid-template-columns: 1fr; gap: var(--s-7); align-items: start; }
@media (min-width: 1000px) {
  .formularz { grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: var(--s-9); }
  .formularz__tekst { position: sticky; top: 104px; }
}
.formularz__tekst > * + * { margin-top: var(--s-5); }
.formularz__tekst .ticki { margin-top: var(--s-6); }

/* ——— Karta produktu ———————————————————————————————————————————— */
/* Układ karty produktu: galeria po lewej, po prawej nazwa, wyróżniki, wybór
   parametrów i wezwanie. U nas w miejscu ceny i koszyka stoi wycena,
   bo widełek cenowych nie ma i strona nie jest sklepem. */

.okruszki { font-size: 13px; color: var(--c-text-soft); display: flex; flex-wrap: wrap; gap: var(--s-2); }
.okruszki a { text-decoration: none; color: inherit; }
.okruszki a:hover { color: var(--c-text); }
@media (max-width: 619px) {
  .okruszki { gap: var(--s-2) var(--s-3); }
  .okruszki a { display: inline-block; padding: 7px 0; margin: -7px 0; }
}

.produkt-glowa { display: grid; grid-template-columns: 1fr; gap: var(--s-7); align-items: start; }
@media (min-width: 1000px) {
  .produkt-glowa { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: var(--s-9); }
  .produkt-glowa__panel { position: sticky; top: 104px; }
}

/* Reguły muszą łapać i placeholder, i wstawione zdjęcie: po `_zdjecia.py`
   `.ph` znika i zostaje `<figure class="foto">`, więc sam `.ph` przestawał
   działać i miniatury traciły proporcje oraz kursor. */
.galeria__glowna .ph,
.galeria__glowna .foto { aspect-ratio: 4 / 3; }
.galeria__male { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s-3); margin-top: var(--s-3); }
.galeria__male .ph,
.galeria__male .foto { aspect-ratio: 1 / 1; }
.galeria__male .ph__label { margin: var(--s-2); padding: 4px 6px; }
.galeria__male .ph__label span { display: none; }

/* Miniatura jest przyciskiem, nie obrazkiem z nasłuchem: klawiatura i czytnik
   ekranu dostają obsługę za darmo. Kliknięcie zamienia ją z kadrem głównym,
   więc żadne ujęcie nie wypada z galerii. */
.galeria__mini {
  display: block; padding: 0; border: 0; background: none;
  cursor: pointer; border-radius: var(--r-duze);
  transition: opacity var(--przejscie);
}
.galeria__mini:hover { opacity: .78; }
.galeria__mini:focus-visible { outline: 2px solid var(--c-focus); outline-offset: 3px; }
.galeria__mini .foto, .galeria__mini .ph { pointer-events: none; }

.produkt-glowa__panel > * + * { margin-top: var(--s-5); }

/* Wybór parametru: kafelki zamiast listy rozwijanej, jak w konfiguratorze */
.opcje { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.opcje label {
  border: 1px solid var(--c-line); border-radius: var(--r);
  padding: 10px var(--s-4);
  font-size: 15px; color: var(--c-text-soft); cursor: pointer;
}
.opcje input { position: absolute; opacity: 0; pointer-events: none; }
.opcje label:hover { border-color: var(--c-text); }
.opcje input:checked + span, .opcje label:has(input:checked) {
  border-color: var(--c-text); color: var(--c-text); background: var(--c-bg);
}
.opcje-grupa + .opcje-grupa { margin-top: var(--s-5); }
.opcje-grupa > span {
  display: block; margin-bottom: var(--s-3);
  font-size: 14px; font-weight: 500;
}

/* Nakład: pole liczbowe zamiast kafelków. Nakłady poza listą były częstsze
   niż te z listy, a minimum 500 szt. trzeba powiedzieć raz i przy polu. */
.naklad { position: relative; max-width: 220px; }
.naklad .input { padding-right: 56px; }
.naklad__jedn {
  position: absolute; right: var(--s-4); top: 50%; transform: translateY(-50%);
  font-size: 15px; color: var(--c-text-soft); pointer-events: none;
}
/* Strzałki kroku nachodziły na jednostkę, a nakład i tak wpisuje się z ręki. */
.naklad .input { appearance: textfield; -moz-appearance: textfield; }
.naklad .input::-webkit-outer-spin-button,
.naklad .input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.naklad__info { margin-top: var(--s-2); font-size: 14px; color: var(--c-text-soft); }
/* Błąd bez czerwieni: czerwony w tym wireframie znaczy „nasz tekst", nie „błąd". */
.naklad[data-blad] .input { border-color: var(--c-text); box-shadow: inset 0 0 0 1px var(--c-text); }
.naklad__info[data-blad] { color: var(--c-text); font-weight: 500; }

/* Zakładki opisu pod głową produktu */
.zakladki { border-top: 1px solid var(--c-line); }
.zakladki__pasek {
  display: flex; gap: var(--s-6);
  overflow-x: auto; scrollbar-width: none;
  border-bottom: 1px solid var(--c-line);
}
.zakladki__pasek::-webkit-scrollbar { display: none; }
.zakladki__tab {
  flex: none; appearance: none; background: none; border: 0;
  margin-bottom: -1px; padding: var(--s-5) 0;
  border-bottom: 2px solid transparent;
  font-family: Outfit, Inter, sans-serif; font-size: 20px; letter-spacing: -.02em;
  color: var(--c-text-soft); white-space: nowrap; cursor: pointer;
}
.zakladki__tab:hover { color: var(--c-text); }
.zakladki__tab[aria-selected="true"] { color: var(--c-text); border-bottom-color: var(--c-text); }
@media (max-width: 700px) { .zakladki__tab { font-size: 17px; } }
.zakladki__panel { padding: var(--s-6) 0; max-width: var(--tekst); }
.zakladki__panel:focus { outline: none; }
.zakladki__panel > * + * { margin-top: var(--s-4); }
.zakladki__panel .spec { max-width: none; }


/* ——— Hero: zdjęcie obok tekstu (O nas, makieta 51:14580) —————— */
/* Tło sceny kremowej pod całą sekcją, więc kadr zlewa się z tłem po prawej
   stronie zdjęcia. Tekst stoi obok, nie na zdjęciu: kadr może być wypełniony. */
.hero-obok { background: var(--c-scena-krem); position: relative; overflow: hidden; }
.hero-obok__foto { display: block; width: 100%; height: auto; }
.hero-obok__tresc { padding-top: var(--s-8); padding-bottom: var(--s-8); }
.hero-obok__naglowek {
  font-size: clamp(31px, 3.6vw, 68px); line-height: 1.04;
  letter-spacing: -0.035em; font-weight: 300; max-width: 14ch;
}
@media (min-width: 1000px) {
  .hero-obok {
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: center; min-height: min(38vw, 560px);
  }
  .hero-obok__foto { height: 100%; object-fit: cover; object-position: center; }
  .hero-obok__tresc {
    max-width: none; padding: var(--s-8) clamp(var(--s-7), 5vw, var(--s-9));
  }
}

/* ——— Hero z osobami (personalizacja, makieta 48:14338) ————————— */
/* Gradient i wycinanka dwojga ludzi dosunięta do prawego dołu. Ludzie
   patrzą w lewo, w stronę nagłówka, więc kolejność stron jest wiążąca. */
.hero-osoby {
  position: relative; overflow: hidden;
  background: linear-gradient(-58deg, #FFFFEF 0%, #F7E2C7 100%);
  /* Kremowy gradient i tło następnej sekcji (--c-bg-alt) są zbyt bliskie,
     bez kreski hero nie kończy się nigdzie. */
  border-bottom: 1px solid var(--c-line);
}
/* Tylko pion: skrót „padding: X 0” zerował boczny margines .wrap
   i na telefonie nagłówek oraz przycisk stały przy krawędzi ekranu. */
.hero-osoby__tresc { padding-top: var(--s-9); padding-bottom: var(--s-8); }
.hero-osoby__naglowek {
  font-size: clamp(34px, 3.75vw, 72px); line-height: 1.16;
  letter-spacing: -.04em; font-weight: 300;
}
.hero-osoby .btn-grupa { margin-top: var(--s-7); }
/* Odbicie lustrzane: osoby patrzą w stronę nagłówka, nie poza kadr. */
.hero-osoby__foto { display: block; width: min(100%, 640px); height: auto; margin: 0 0 0 auto; transform: scaleX(-1); }
@media (min-width: 900px) {
  .hero-osoby { min-height: 560px; display: grid; align-items: center; }
  .hero-osoby__tresc { padding-top: var(--s-9); padding-bottom: var(--s-9); }
  .hero-osoby__naglowek { max-width: 12ch; }
  .hero-osoby__foto {
    position: absolute; right: 4vw; bottom: 0;
    width: min(52vw, 900px); max-height: 92%; object-fit: contain; object-position: bottom right;
  }
}

/* ——— Odzyskane z wireframe'u ————————————————————————————————— */
/* Przy pierwszym przenoszeniu arkusza ucięcie bloku audytu zabrało też
   wszystko, co stało za nim: karty--srodek, taby i lista-zakres. */

/* Karty na środku: nagłówek, tekst i sama siatka. Przy pięciu pozycjach
   ostatni rząd ma dwie karty i bez wyśrodkowania wisi przy lewej krawędzi. */
.srodek .karty { justify-items: stretch; }
.karty--srodek { justify-content: center; }
.karty--srodek .karta--tekst { text-align: center; align-items: center; }
.karty--srodek .karta--tekst p { max-width: 34ch; }

/* ——— Zakładki pionowe ————————————————————————————————————————— */
/* Lista parametrów po lewej, treść i kadr po prawej. Na dotyku lista
   kładzie się poziomo i przewija, bo siedem pozycji w pionie zjadałoby
   cały ekran, zanim pokaże się treść. */

/* minmax(0, 1fr), nie 1fr: pasek tabów ma własny scroll w poziomie, a przy `1fr`
   jego min-content (przyciski z nowrap) rozpycha kolumnę i całą stronę na 390 px. */
.taby { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-5); align-items: start; }
@media (min-width: 900px) {
  .taby { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: var(--s-8); }
}

.taby__lista { display: flex; gap: var(--s-2); }
@media (max-width: 899px) {
  .taby__lista { overflow-x: auto; scrollbar-width: none; padding-bottom: var(--s-2); }
  .taby__lista::-webkit-scrollbar { display: none; }
  .taby__lista button { white-space: nowrap; }
}
@media (min-width: 900px) {
  .taby__lista { flex-direction: column; gap: 0; border-top: 1px solid var(--c-line); }
}

.taby__lista button {
  flex: none;
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-4);
  padding: var(--s-4) var(--s-4);
  background: transparent; border: 1px solid var(--c-line); border-radius: var(--r);
  font-family: Outfit, Inter, sans-serif; font-size: 17px; letter-spacing: -.01em;
  color: var(--c-text-soft); text-align: left; cursor: pointer;
}
@media (min-width: 900px) {
  .taby__lista button {
    width: 100%;
    border: 0; border-bottom: 1px solid var(--c-line); border-radius: 0;
    padding: var(--s-5) var(--s-3) var(--s-5) 0;
  }
  .taby__lista button::after {
    content: "→"; opacity: 0; transition: opacity .15s ease;
  }
  .taby__lista button[aria-selected="true"]::after { opacity: 1; }
}
.taby__lista button:hover { color: var(--c-text); }
.taby__lista button[aria-selected="true"] {
  color: var(--c-text); font-weight: 500;
  border-color: var(--c-text);
}

.taby__panel[hidden] { display: none; }
.taby__panel > * + * { margin-top: var(--s-5); }
.taby__panel p { font-size: 17px; line-height: 1.6; color: var(--c-text-soft); max-width: var(--tekst); }
.taby__panel .ph { aspect-ratio: 16 / 9; }

/* Lista zakresu przy dużym kadrze: pozycje rozdzielone samą kreską,
   bez ramek i bez kart. Kadr po lewej trzyma się góry sekcji. */
.lista-zakres { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--c-line); }
.lista-zakres li { padding: var(--s-5) 0; border-bottom: 1px solid var(--c-line); }
.lista-zakres h3 { margin-bottom: var(--s-2); }
.lista-zakres p { font-size: 15px; line-height: 1.5; color: var(--c-text-soft); max-width: 52ch; }
@media (min-width: 900px) {
  .split .ph--pion { position: sticky; top: 104px; }
}

/* ——— Atuty: kafle z ikoną ——————————————————————————————————— */
/* Wariant E z przeglądu wariantów: miękkie kafle bez obrysu, trzy w górnym
   rzędzie i dwa wyśrodkowane w dolnym. Przy siatce po trzy piąta pozycja
   zostawała sama przy lewej krawędzi. */
.atuty { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--s-4); }
.atut {
  flex: 0 1 320px;
  display: flex; flex-direction: column; align-items: center; text-align: center;
  background: var(--c-bg); border-radius: var(--r-duze); padding: var(--s-6);
}
@media (min-width: 1000px) { .atut { flex: 0 1 calc(33.333% - var(--s-4)); } }
.atut__ikona { display: block; color: var(--c-accent); margin-bottom: var(--s-5); }
.atut__ikona svg { width: 34px; height: 34px; display: block; }
.atut__tytul {
  font-family: var(--f-head); font-size: 19px; font-weight: 500;
  letter-spacing: -.01em; margin-bottom: var(--s-2);
}
.atut p { font-size: 15px; line-height: 1.5; color: var(--c-text-soft); max-width: 36ch; }
/* Na sekcji alternatywnej kafel i tak zostaje bielą, żeby był czytelny */
.sekcja--alt .atut { background: var(--c-bg); }

/* ——— Pasek przewijania karuzeli ————————————————————————————— */
/* Widoczny ślad, ile jeszcze zostało w torze. Bez czerni:
   tor w kolorze linii, uchwyt w tekście wtórnym, oba cienkie. Rysuje go
   app.js z proporcji scrollWidth do clientWidth, więc długość uchwytu mówi
   prawdę o liczbie kafli. Pasek znika, gdy nie ma czego przewijać. */
.karuzela__pasek {
  position: relative; height: 2px; margin-top: var(--s-6);
  background: var(--c-line); border-radius: 2px;
  max-width: var(--kolumna);
  margin-inline: auto;
  width: calc(100% - 2 * var(--marg));
}
.karuzela__pasek[hidden] { display: none; }
.karuzela__pasek i {
  position: absolute; top: -1px; left: 0; height: 4px;
  background: var(--c-text-soft); border-radius: 4px;
  transition: transform .12s linear;
  transform-origin: left center;
}
@media (prefers-reduced-motion: reduce) { .karuzela__pasek i { transition: none; } }

/* ——— Animacje ——————————————————————————————————————————————— */
/* Wszystko w jednym bloku prefers-reduced-motion: kto wyłączył animacje
   w systemie, dostaje stronę statyczną bez wyjątków.
   Klasę .anim nadaje app.js, więc bez JS strona po prostu stoi widoczna. */

@media (prefers-reduced-motion: no-preference) {
  .anim {
    opacity: 0;
    transform: translateY(22px);
    transition: opacity .65s ease, transform .65s cubic-bezier(.22, .61, .36, 1);
    transition-delay: var(--anim-delay, 0ms);
  }
  .anim--in { opacity: 1; transform: none; }

  /* Kadr reaguje na wskazanie całej karty, nie samego obrazka */
  .foto img { transition: transform .6s cubic-bezier(.22, .61, .36, 1); }
  a:hover .foto img,
  a:focus-visible .foto img { transform: scale(1.04); }

  /* Bez unoszenia kart: przy siatce kilkunastu kafli skakanie pod kursorem
     rozprasza, a samo powiększenie zdjęcia wystarcza za sygnał. */

  .btn { transition: background .15s ease, color .15s ease, border-color .15s ease; }

  /* Plus akordeonu obraca się w krzyżyk zamiast skakać na minus.
     Przy wyłączonych animacjach zostaje statyczna podmiana na minus. */
  .akordeon summary::after { transition: transform .25s ease, color .15s ease, border-color .15s ease; }
  .akordeon details[open] summary::after { content: "+"; transform: rotate(45deg); }
}

/* Pasek kategorii nad katalogiem: skrót do środka
   katalogu, zanim ktokolwiek dotknie filtrów. Kafelek jest w całości biały,
   bo packshoty mają biel wypaloną w pliku i na beżu pokazują własny kwadrat.
   Hover nie podmienia tła z tego samego powodu: beż na hoverze przywracał
   ten kwadrat. Reakcja idzie tak jak na kartach katalogu, uniesieniem,
   plus włos obrysu dla wyłączonych animacji. */
/* Pasek stoi na środku kolumny i ma własne powietrze nad sobą: przyklejony
   do nagłówka czytał się jak jego dalszy ciąg, a nie osobny skrót do kategorii.
   Przy zwężaniu okna wraca do przewijania w poziomie. */
.pas-kat {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: var(--s-3); overflow-x: auto; scrollbar-width: none;
  margin-top: var(--s-7); padding-bottom: var(--s-2); margin-bottom: var(--s-7);
}
.pas-kat > a { flex: 0 0 150px; }
@media (max-width: 760px) {
  .pas-kat { flex-wrap: nowrap; justify-content: flex-start; }
}
.pas-kat::-webkit-scrollbar { display: none; }
.pas-kat a {
  display: grid; gap: var(--s-3); justify-items: center; text-align: center;
  text-decoration: none; color: inherit;
  background: var(--c-scena-biel);
  border: 1px solid transparent; border-radius: var(--r);
  padding: var(--s-4) var(--s-3);
  font-size: 13px; line-height: 1.3;
}
/* Obrys ledwie widoczny: kafel ma zareagować, nie zmienić się w przycisk.
   Bez unoszenia — pasek stoi tuż pod nagłówkiem i skakanie kafli w tym
   miejscu odciąga wzrok od tytułu strony. */
.pas-kat a:hover,
.pas-kat a:focus-visible { border-color: rgba(227, 221, 208, .55); }
.pas-kat .foto {
  width: 72px; aspect-ratio: 1 / 1;
  background: var(--c-scena-biel); border-radius: 0;
}
/* Packshot mieści się w kadrze w całości. Przy cover z kadru 4:3 wypadały
   końce podłużnych pudełek, a to one odróżniają kategorie od siebie. */
.pas-kat .foto img { object-fit: contain; }

@media (prefers-reduced-motion: no-preference) {
  .pas-kat a { transition: border-color var(--przejscie); }
}