/* ============================================================
   ONLY FAST CARS · Poznań — design system "Quiet Luxury"
   Fotografia na pierwszym planie, ciemne szkło, spokojna typografia.
   Czerwień marki tylko jako drobny akcent i kolory funkcjonalne.
   ============================================================ */

/* ---------- krój: Hanken Grotesk (self-hosted, zmienny woff2) ----------
   Grotesk z domieszką geometrii: szerokie, otwarte litery, okrągłe brzuszki,
   końcówki cięte poziomo — ta sama kategoria, w której leży Soin Sans Neue
   używany przez Gordona Murraya (krój komercyjny, więc tu wolny odpowiednik).
   Zmienny, jeden plik na podzakres niesie wagi 300–800. Zakres latin-ext
   dokłada ą ę ć ł ń ó ś ź ż — bez niego przeglądarka podmieniłaby polskie
   znaki na zastępczy krój i w słowie „MARZEŃ" jedna litera byłaby obca. */
@font-face {
  font-family: "Hanken Grotesk";
  font-style: normal;
  font-weight: 300 800;
  font-display: swap;
  src: url("/assets/fonts/hanken-grotesk-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Hanken Grotesk";
  font-style: normal;
  font-weight: 300 800;
  font-display: swap;
  src: url("/assets/fonts/hanken-grotesk-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  color-scheme: dark;
  --bg0: #0a0a0b;
  --bg1: #101012;
  --bg2: #16161a;
  --ink: #f5f5f4;
  --dim: #a2a6ac;
  --line: rgba(255, 255, 255, .08);
  --red: #e32227;
  --red2: #ff4a50;
  --amber: #f5a524;
  --green: #2fbf71;
  --glass-bg: rgba(17, 17, 19, .55);
  --glass-border: rgba(255, 255, 255, .1);
  --shadow-lg: 0 22px 60px rgba(0, 0, 0, .45);
  --r-lg: 22px;
  --r-md: 16px;
  --r-sm: 11px;
  --font-display: "Hanken Grotesk", "Helvetica Neue", Helvetica, "Segoe UI", Arial, sans-serif;
  --font-body: "Hanken Grotesk", "Helvetica Neue", Helvetica, "Segoe UI", Arial, sans-serif;
  --font-data: "Hanken Grotesk", "Helvetica Neue", Helvetica, "Segoe UI", Arial, sans-serif;
  --nav-h: 76px;
}

/* ---------- reset / baza ---------- */
*, *::before, *::after { box-sizing: border-box; }
/* atrybut hidden musi wygrywać z display: flex/grid ustawianym niżej */
[hidden] { display: none !important; }
html {
  scroll-behavior: smooth;
  /* Safari na telefonie w poziomie sam powiększa tekst w szerokich blokach,
     żeby „lepiej wypełnić" wiersz; łamie to każdą wyliczoną wysokość i psuje
     rytm typografii. Strona ma własne skalowanie przez clamp(). */
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
body {
  margin: 0;
  background: var(--bg0);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  /* Szara plama, którą Safari i Chrome rysują na dotkniętym elemencie, spóźnia
     się o ~100 ms i zostaje jeszcze po puszczeniu palca; przy ciemnym tle
     wygląda jak usterka. Własne stany :active niżej dają odpowiedź od razu. */
  -webkit-tap-highlight-color: transparent;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
input, select, textarea { font: inherit; color: inherit; }
::selection { background: rgba(227, 34, 39, .85); color: #fff; }
:focus-visible { outline: 2px solid rgba(255, 255, 255, .75); outline-offset: 3px; border-radius: 6px; }

body::after { /* delikatne ziarno */
  content: "";
  position: fixed; inset: 0; z-index: 999; pointer-events: none; opacity: .03;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='0.6'/%3E%3C/svg%3E");
}

/* ---------- typografia ---------- */
/* Nagłówki: wersaliki w wadze średniej, trakting leciutko rozstrzelony,
   interlinia z zapasem. Odwrotnie niż w typografii plakatowej — tu siła
   bierze się z powietrza wokół liter, nie z ich grubości. Dlatego waga 500,
   a nie 700: wersaliki i tak niosą wagę wizualną, a bold w tym zestawieniu
   robi się ciężki. Dodatnie odstępy są konieczne, bo wielkie litery mają
   płaskie boki i przy zerowym traktingu zlewają się w jeden pas. */
.display {
  font-family: var(--font-display);
  font-weight: 500;
  letter-spacing: .012em;
  line-height: 1.14;
  text-transform: uppercase;
  text-wrap: balance;        /* wersaliki łatwo zostawiają wdowę — wyrównujemy wiersze */
  margin: 0;
}
.eyebrow {
  font-size: .68rem;
  font-weight: 500;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--dim);
  display: inline-flex;
  align-items: center;
  gap: .8em;
  margin: 0 0 18px;
}
.eyebrow::before {
  content: "";
  width: 5px; height: 5px; border-radius: 50%;
  background: var(--red);
  flex: none;
}
.accent { color: var(--red); }

.lead { color: var(--dim); font-size: 1rem; max-width: 58ch; font-weight: 400; }

/* ---------- layout ---------- */
.container { width: min(1240px, 92vw); margin-inline: auto; }
/* Szersza odmiana dla stron, na których się pracuje, a nie czyta: karta auta
   (galeria, cennik, dane) i sekcja rezerwacji. Tam 1240 px zostawiało po ~340 px
   czerni na boku, a kalendarz i listy pakietów dusiły się w kolumnach. Przy
   samym tekście zostaje węższa miara wiersza, bo tak się go czyta wygodniej. */
.container--szeroki { width: min(1560px, 94vw); }
.section { padding-block: clamp(80px, 10vw, 140px); position: relative; }
.section-head { margin-bottom: clamp(36px, 5vw, 64px); }
.section-head h2 { font-size: clamp(1.7rem, 3.4vw, 2.5rem); }
.section-head .lead { margin-top: 12px; }

/* ---------- płynne szkło (liquid glass) ---------- */
.lg {
  position: relative;
  isolation: isolate;
  background: linear-gradient(168deg, rgba(255, 255, 255, .085), rgba(255, 255, 255, .018) 46%, rgba(255, 255, 255, .05));
  border: 1px solid rgba(255, 255, 255, .13);
  border-radius: 24px;
  backdrop-filter: blur(34px) saturate(190%);
  -webkit-backdrop-filter: blur(34px) saturate(190%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .22),
    inset 0 -1px 0 rgba(0, 0, 0, .35),
    0 30px 70px -28px rgba(0, 0, 0, .8);
}
.lg::before { /* refleks światła u góry — jak na szkle Apple */
  content: "";
  position: absolute; inset: 0; z-index: -1;
  border-radius: inherit; pointer-events: none;
  background: radial-gradient(130% 74% at 24% -12%, rgba(255, 255, 255, .16), transparent 62%);
}

/* ---------- ciemne szkło ---------- */
.glass {
  position: relative;
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: var(--r-lg);
  backdrop-filter: blur(20px) saturate(130%);
  -webkit-backdrop-filter: blur(20px) saturate(130%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .07), var(--shadow-lg);
}

/* subtelna poświata (ekran logowania admina) */
.streak {
  position: absolute;
  pointer-events: none;
  width: 120%;
  height: 200px;
  left: -10%;
  background: radial-gradient(50% 100% at 50% 50%, rgba(227, 34, 39, .12), transparent 70%);
  filter: blur(50px);
}

/* ---------- przyciski ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .55em;
  padding: 14px 30px;
  border-radius: 999px;
  font-size: .9rem;
  font-weight: 500;
  letter-spacing: .01em;
  white-space: nowrap;
  transition: transform .25s cubic-bezier(.2,.8,.2,1), background .25s, border-color .25s, box-shadow .25s, color .25s;
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn-primary {
  background: #fff;
  color: #0b0b0c;
  box-shadow: 0 12px 34px rgba(0, 0, 0, .35);
}
.btn-primary:hover { background: #ebebeb; box-shadow: 0 16px 44px rgba(0, 0, 0, .45); }
.btn-ghost {
  background: rgba(255, 255, 255, .08);
  border: 1px solid rgba(255, 255, 255, .16);
  color: var(--ink);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.btn-ghost:hover { background: rgba(255, 255, 255, .14); border-color: rgba(255, 255, 255, .28); }
.btn-red {
  background: var(--red);
  color: #fff;
  box-shadow: 0 10px 30px rgba(227, 34, 39, .28);
}
.btn-red:hover { background: #c91d22; box-shadow: 0 14px 38px rgba(227, 34, 39, .4); }
.btn[disabled] { opacity: .45; pointer-events: none; }

/* ---------- chipy ---------- */
.chip {
  display: inline-flex; align-items: center; gap: .5em;
  padding: 6px 13px;
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 999px;
  background: rgba(255, 255, 255, .05);
  font-size: .74rem;
  font-weight: 400;
  letter-spacing: .02em;
  color: var(--dim);
}
.chip b { color: var(--ink); font-weight: 500; }
.chip-red { border-color: rgba(227, 34, 39, .45); color: #ff9ea1; background: rgba(227, 34, 39, .1); }

/* ============================================================
   NAWIGACJA
   ============================================================ */
.nav {
  position: fixed; inset: 0 0 auto 0; z-index: 100;
  height: var(--nav-h);
  display: flex; align-items: center;
  transition: background .35s, border-color .35s;
  border-bottom: 1px solid transparent;
}
.nav.scrolled {
  background: rgba(10, 10, 11, .62);
  border-bottom-color: var(--line);
  backdrop-filter: blur(20px) saturate(140%);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
}
/* pasek idzie od krawędzi do krawędzi — nie trzyma się kolumny treści.
   Skrajne elementy odsuwa od brzegu sam padding, rosnący razem z ekranem. */
.nav-inner {
  display: flex; align-items: center; gap: 34px;
  width: 100%;
  padding-inline: clamp(20px, 3.2vw, 48px);
}
.nav-logo { display: flex; align-items: center; margin-right: auto; }
.nav-logo .logo { font-size: 19px; }
.nav-links { display: flex; gap: 28px; align-items: center; }
/* Pięć działów zamiast czterech (doszedł „Program partnerski", najdłuższy
   napis w pasku) i na stronie miasta jeszcze plakietka lokalizacji obok.
   Poniżej 1080 px schodzi ramka telefonu, ale menu i tak dobijało wtedy do
   lupy, więc na tych szerokościach odstępy między działami są ciaśniejsze.
   Pasek zwija się do burgera dopiero przy 720 px. */
@media (max-width: 1080px) { .nav-links { gap: 18px; } }
/* Sześć działów (doszedł „Voucher") nie mieści się już na tablecie obok
   pełnego znaku: „Kontakt" i lupa wypadały za prawą krawędź. Między burgerem
   (720 px) a ~920 px zostaje sam monogram OFC — ten sam zabieg co poniżej
   560 px — a odstępy między działami schodzą jeszcze o stopień. */
@media (min-width: 721px) and (max-width: 920px) {
  .nav-logo .logo-rule, .nav-logo .logo-text { display: none; }
  .nav-links { gap: 14px; }
}
.nav-links a, .nav-city {
  font-size: .86rem;
  font-weight: 400;
  color: var(--dim);
  padding: 6px 2px;
  position: relative;
  white-space: nowrap;
  transition: color .25s;
}
.nav-links a::after, .nav-city::after {
  content: ""; position: absolute; left: 0; bottom: 0;
  width: 100%; height: 1px;
  background: rgba(255, 255, 255, .7);
  transform: scaleX(0); transform-origin: left;
  transition: transform .3s;
}
.nav-links a:hover, .nav-city:hover { color: var(--ink); }
.nav-links a:hover::after, .nav-city:hover::after { transform: scaleX(1); }
.nav .btn { padding: 11px 24px; font-size: .84rem; border-radius: 10px; }

/* ---------- telefon w pasku ----------
   Numer i lupa to jedna para na prawym końcu paska: ta sama wysokość, ten sam
   promień, ta sama kreska. Przycisk nie ma własnej powierzchni; zostaje sama
   ramka narysowana na tym, co pod spodem, więc nad kadrem hero widać przez
   niego zdjęcie, a po zescrollowaniu mrożone tło paska. Promień 10 px bierze
   z `.nav .btn` wyżej, dlatego ten blok musi zostać za tamtym.
   Komputer pokazuje pełny numer, telefon krótkie „Zadzwoń", a dotknięcie od
   razu wybiera numer; stąd dwa napisy w środku, a mobilny blok niżej przełącza
   jeden na drugi. Na szerokościach pośrednich (tablet, zanim pasek zwinie się
   do burgera) ramka schodzi całkiem; obok pełnych odnośników i plakietki
   miasta nie ma już na nią miejsca. */
.nav .nav-call {
  height: 40px; padding: 0 16px;
  font-size: .82rem;
  white-space: nowrap;
  color: var(--ink);
  background: none;
  /* ta sama kreska, którą lupa pokazuje po najechaniu; --line (.08) gubiło
     się na jasnych partiach kadru */
  border: 1px solid rgba(255, 255, 255, .14);
  /* napis ma nowrap, więc zamiast się złamać wyszedłby poza ramkę */
  flex: none;
}
/* obok stoi nieruchoma lupa, więc ramka nie podskakuje jak zwykły .btn */
.nav .nav-call:hover { transform: none; }
.nav-call-cta { display: none; }
@media (max-width: 1080px) {
  .nav .nav-call { display: none; }
}
/* Numer i lupa to jedna grupa na prawym końcu paska: obie prowadzą do
   działania, a nie do działu strony, więc stoją bliżej siebie niż
   odnośniki menu (34 px odstępu w .nav-inner). */
.nav-akcje { display: flex; align-items: center; gap: 12px; }

/* ---------- wybrana lokalizacja w pasku ----------
   Mówi, czyją stronę oglądasz, a klik wraca na mapę wyboru. Ubrana dokładnie
   jak sąsiednie odnośniki menu (wspólne reguły wyżej) — to część tej samej
   listy, tylko z nazwą miasta zamiast działu. */

/* ---------- wyszukiwarka w nawigacji ---------- */
.nav-search { position: relative; }
.nav-search-btn {
  display: flex; align-items: center; justify-content: center;
  width: 40px; height: 40px;
  border-radius: 10px;
  color: var(--ink);
  border: 1px solid transparent;
  transition: background .25s, border-color .25s;
}
.nav-search-btn svg { width: 19px; height: 19px; }

/* ---------- konto klienta w pasku ----------
   Ikona wstawiana przez shared.js (initNav), ubrana jak lupa obok; kropka
   znaczy „zalogowany" (klasa .zalogowany z localStorage). */
.nav-konto {
  position: relative;
  display: flex; align-items: center; justify-content: center;
  width: 40px; height: 40px;
  border-radius: 10px;
  color: var(--ink);
  border: 1px solid transparent;
  transition: background .25s, border-color .25s;
}
.nav-konto svg { width: 19px; height: 19px; }
.nav-konto:hover, .nav-konto[aria-current="page"] {
  background: rgba(255, 255, 255, .08);
  border-color: rgba(255, 255, 255, .14);
}
.nav-konto-kropka {
  position: absolute; top: 8px; right: 8px;
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--red);
  box-shadow: 0 0 0 2px var(--bg0);
  opacity: 0; transform: scale(.5);
  transition: opacity .25s, transform .25s;
}
.nav-konto.zalogowany .nav-konto-kropka { opacity: 1; transform: none; }

/* pasek „zalogowany w Klubie OFC" nad formularzem rezerwacji (car.js) */
.klub-pasek {
  display: flex; align-items: center; gap: 12px;
  margin-bottom: 16px; padding: 12px 16px;
  border: 1px solid rgba(227, 34, 39, .35);
  border-radius: var(--r-sm);
  background: linear-gradient(120deg, rgba(227, 34, 39, .12), rgba(227, 34, 39, .03));
  font-size: .85rem; line-height: 1.55; color: var(--ink);
}
.klub-pasek svg { flex: none; color: var(--red2); }
.klub-pasek span { flex: 1; min-width: 0; }
.klub-pasek a { flex: none; color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
/* serduszko „ulubione" w pasku klubu; czerwone, gdy auto jest na liście */
.klub-serce {
  flex: none; width: 34px; height: 34px; border-radius: 50%;
  display: grid; place-items: center;
  border: 1px solid rgba(255, 255, 255, .18); color: var(--ink);
  transition: background .2s, color .2s, border-color .2s, transform .25s;
}
.klub-serce svg { width: 15px; height: 15px; }
.klub-serce:hover { transform: scale(1.08); }
.klub-serce.on { background: var(--red); border-color: var(--red); color: #fff; }
.klub-serce[disabled] { opacity: .6; }
.sum-row.klub b { color: var(--green); }
/* numer telefonu dzieli stan najechania z lupą; po najechaniu oba mają
   dokładnie tę samą warstwę i tę samą kreskę */
.nav-search-btn:hover,
.nav-search.open .nav-search-btn,
.nav .nav-call:hover {
  background: rgba(255, 255, 255, .08);
  border-color: rgba(255, 255, 255, .14);
}
.search-panel {
  position: absolute; top: calc(100% + 12px); right: 0;
  width: min(420px, calc(100vw - 6vw));
  border-radius: var(--r-md);
  padding: 10px;
  z-index: 101;
  animation: search-in .18s ease-out;
}
@keyframes search-in { from { opacity: 0; transform: translateY(-6px); } }
.search-field { display: flex; align-items: center; gap: 10px; padding: 0 10px; }
/* ta sama lupa co w filtrach floty, więc i ten sam kolor */
.search-field svg { width: 17px; height: 17px; color: var(--red); flex: none; }
.search-field input {
  flex: 1; min-width: 0;
  padding: 11px 0;
  background: none; border: 0; outline: none;
  font-size: .92rem;
}
.search-field input::placeholder { color: var(--dim); }
.search-field input::-webkit-search-cancel-button { -webkit-appearance: none; }
.search-results { list-style: none; margin: 0; padding: 0; max-height: min(58vh, 420px); overflow-y: auto; }
.search-results:not(:empty) { margin-top: 8px; border-top: 1px solid var(--line); padding-top: 8px; }
.search-results a {
  display: flex; align-items: center; gap: 12px;
  padding: 9px 10px;
  border-radius: var(--r-sm);
  transition: background .18s;
}
.search-results a:hover,
.search-results li.on a { background: rgba(255, 255, 255, .07); }
.search-results img {
  width: 62px; height: 42px; flex: none;
  object-fit: cover; border-radius: 7px;
}
.search-res-tx { min-width: 0; flex: 1; }
.search-res-tx b { display: block; font-size: .88rem; font-weight: 500; line-height: 1.3; }
.search-res-tx span {
  display: block; font-size: .74rem; color: var(--dim);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.search-res-price { font-size: .78rem; color: var(--dim); white-space: nowrap; }
.search-empty { padding: 14px 10px 10px; font-size: .84rem; color: var(--dim); }
/* 44 px w pionie to najmniejsze pole, w które palec trafia bez celowania;
   sam rysunek trzech kresek ma 14 px, więc niesie go padding. */
.nav-burger { display: none; flex-direction: column; justify-content: center; gap: 5px; min-height: 44px; padding: 10px; }
.nav-burger span { width: 24px; height: 1.5px; background: var(--ink); transition: .3s; }
/* Przy otwartym menu kreski składają się w krzyżyk. Bez tego jedynym sygnałem,
   że tym samym miejscem się je zamyka, jest domysł. Przesunięcie 6,5 px to
   odstęp między środkami kresek (gap 5 + grubość 1,5). */
.nav-burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.nav-burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

.mobile-menu {
  position: fixed; inset: 0; z-index: 99;
  background: rgba(8, 8, 9, .88);
  backdrop-filter: blur(28px) saturate(130%);
  -webkit-backdrop-filter: blur(28px) saturate(130%);
  display: none;
  flex-direction: column; align-items: center; gap: 6px;
  /* Wyściółka zamiast wyśrodkowania w całym oknie: u góry stoi pasek
     nawigacji, u dołu pigułka ustawień, więc menu dostaje wyłącznie pas
     między nimi. Bez tego przy niższym oknie (telefon z paskami przeglądarki
     ma około 700 px, nie 844) ostatnia pozycja wchodziła na przycisk
     z numerem, a przy jeszcze niższym także na pigułkę ustawień. */
  padding: calc(var(--nav-h) + 4px) 20px calc(96px + env(safe-area-inset-bottom));
  overflow-y: auto;
  overscroll-behavior: contain;
}
.mobile-menu.open { display: flex; }
/* Dwa marginesy „auto" dzielą wolne miejsce na pół: pozycje siadają pośrodku
   pasa, stopka przy jego dolnej krawędzi. Gdy miejsca zabraknie, oba schodzą
   do zera i menu się przewija, zamiast nakładać jedno na drugie. */
.mobile-menu > a:first-child { margin-top: auto; }
.mobile-menu a {
  font-weight: 500;
  font-size: clamp(1.5rem, 6vw, 2.2rem);
  letter-spacing: -.01em;
  padding: 12px;
  color: var(--ink);
}
.mobile-menu a:hover { color: var(--dim); }
/* Odnośnik do działu, na którym właśnie stoimy, nie może wyglądać tak samo jak
   pozostałe; na telefonie menu jest jedyną mapą serwisu. */
.mobile-menu a[aria-current="page"] { color: var(--dim); }

/* ---------- stopka menu telefonu (dokłada ją shared.js) ----------
   Menu było listą pięciu odnośników na pustym ekranie: całą górę i cały dół
   zajmowała czerń, a jedyne realne działanie w wypożyczalni (telefon) siedziało
   w małej ramce paska, przykrytej właśnie otwartym menu. Tutaj dostaje pełną
   szerokość i wysokość, w jakiej palec nie musi celować. */
.mm-stopka {
  /* w układzie, nie nad nim: wcześniej wisiała bezwzględnie nad listą i przy
     krótszym oknie obie treści lądowały w tym samym miejscu */
  margin-top: auto;
  padding-top: 20px;
  width: 100%;
  display: flex;
  justify-content: center;
}
/* Selektor złożony, bo .mobile-menu a wyżej ustawia wielkość napisu i wyściółkę
   dla wszystkich odnośników menu; sama klasa by z nim przegrała. */
.mobile-menu .mm-tel {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  width: min(100%, 340px);
  min-height: 54px;
  padding: 0 22px;
  border: 1px solid rgba(255, 255, 255, .22);
  border-radius: 999px;
  font-size: 1rem;
  font-weight: 500;
  letter-spacing: .01em;
  color: var(--ink);
}
/* Niskie okno (telefon w poziomie, mniejszy ekran, powiększona czcionka
   systemowa): sześć pozycji w rozmiarze plakatowym plus przycisk z numerem nie
   mieszczą się między paskiem a pigułką ustawień i menu zaczyna się przewijać,
   a pigułka — jako element pływający — kładzie się na stopce. Napisy schodzą
   więc o stopień i całość znów mieści się w kadrze. */
@media (max-height: 640px) {
  .mobile-menu { gap: 2px; padding-top: calc(var(--nav-h) + 2px); }
  .mobile-menu a { font-size: clamp(1.15rem, 4.6vw, 1.5rem); padding: 8px 12px; }
  .mm-stopka { padding-top: 14px; }
  .mobile-menu .mm-tel { min-height: 48px; font-size: .94rem; }
}

/* Bardzo niskie okno — przede wszystkim telefon obrócony na bok. Kolumna
   sześciu pozycji nie zmieści się tam w żadnym rozmiarze pisma, który da się
   jeszcze przeczytać, więc lista łamie się na dwie szpalty, a przycisk
   z numerem bierze cały wiersz pod nimi. */
@media (max-height: 520px) {
  .mobile-menu {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-content: center;
    gap: 4px 14px;
    padding: calc(var(--nav-h) + 4px) 24px calc(92px + env(safe-area-inset-bottom));
  }
  .mobile-menu.open { display: grid; }
  .mobile-menu > a { font-size: 1.05rem; padding: 7px 10px; text-align: center; }
  /* margines z układu kolumnowego rozpychałby wiersz siatki */
  .mobile-menu > a:first-child { margin-top: 0; }
  .mm-stopka { grid-column: 1 / -1; margin-top: 8px; padding-top: 0; }
  .mobile-menu .mm-tel { min-height: 46px; }
}

.mm-tel svg { width: 19px; height: 19px; flex: none; color: var(--red2); }
.mm-tel:active { background: rgba(255, 255, 255, .08); }
html[data-motyw="jasny"] .mm-tel { border-color: rgba(23, 24, 27, .2); }

/* ============================================================
   HERO — wideo w tle (fotografia jako plakat / fallback)
   ============================================================ */
.hero {
  position: relative;
  min-height: max(680px, 100svh);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding-bottom: 34px;
}
/* Kadrowanie siedzi na tle, nie na całym hero: dryfujące zdjęcie nie może
   wystawać poza kadr, ale lista miast pod paskiem wyszukiwania musi móc
   wyjść poza dolną krawędź sekcji — hero z overflow: hidden ucinało ją
   w połowie ostatniej pozycji. */
.hero-bg { position: absolute; inset: 0; overflow: hidden; }
.hero-bg img,
.hero-video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: 50% 46%;
}
.hero-bg img {
  transform: scale(1.02);
  animation: hero-drift 26s ease-in-out infinite alternate;
}
@keyframes hero-drift {
  from { transform: scale(1.02) translateX(0); }
  to { transform: scale(1.07) translateX(-1.2%); }
}
/* wideo dociąga się w tle i wchodzi miękko na plakat (ta sama klatka — brak przeskoku) */
.hero-video {
  opacity: 0;
  transition: opacity .8s ease;
  pointer-events: none;
}
.hero.is-playing .hero-video { opacity: 1; }
.hero.is-playing .hero-bg img { animation: none; }
.hero-shade {
  position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(10,10,11,.55), transparent 24%),
    /* dół hero dochodzi do czystej czerni, bo pod nim zaczyna się czarny
       manifest — bez tego na styku sekcji widać ostrą krechę */
    linear-gradient(180deg, transparent 34%, rgba(10,10,11,.66) 72%, rgba(0,0,0,.94) 90%, #000),
    linear-gradient(100deg, rgba(10,10,11,.72), rgba(10,10,11,.12) 58%),
    /* kadr z filmu jest jaśniejszy i mocniej nasycony niż reszta strony */
    linear-gradient(rgba(10,10,11,.18), rgba(10,10,11,.18));
}
.hero-content { position: relative; z-index: 2; padding-bottom: 46px; text-align: center; }
.hero-content h1 {
  margin-inline: auto;       /* h1 ma własną miarę — bez tego wyśrodkowałby się
                                sam tekst, a blok zostałby przy lewej krawędzi */
  /* dolna granica skaluje się z ekranem, nie jest stała — inaczej na wąskim
     telefonie najdłuższy człon („prowadź auto marzeń,") nie mieści się w wierszu
     i łamie się w środku, zostawiając osierocone „marzeń," */
  font-size: clamp(1.35rem, 6.4vw, 3.1rem);
  /* hasło ma się łamać na przecinkach, a nie w środku „auto marzeń" — dlatego
     bez balansowania wierszy (ono wyrównuje ich długość i rozbija frazę)
     i z miarą dobraną tak, by pierwszy człon zmieścił się w całości */
  max-width: 24ch;
  text-wrap: initial;
  /* lekka przezroczystość — kadr delikatnie przebija przez litery. Alfa siedzi
     w kolorze, a nie w opacity, bo opacity przygasiłoby też czerwone
     podkreślenie, które ma zostać pełne. */
  color: rgba(245, 245, 244, .84);
}

/* ---------- nagłówek hero na stronie lokalizacji ----------
   Dwa człony w jednej kolumnie: rodzaj wypożyczalni drobnym, rozstrzelonym
   pismem i nazwa miasta na całą szerokość kadru. Miasto niesie tu całą wagę,
   bo to ono odpowiada na pytanie, po co ktoś wszedł na tę stronę; człon nad
   nim mówi tylko, o jakiej wypożyczalni mowa. */
.hero-h1 {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .42em;
  max-width: none;
  font-size: inherit;
}
.hero-h1-lead {
  font-size: clamp(.58rem, 1.5vw, .8rem);
  font-weight: 500;
  letter-spacing: .3em;
  line-height: 1.5;
  color: rgba(245, 245, 244, .62);
}
.hero-h1-city {
  font-size: clamp(2.5rem, 9vw, 5.6rem);
  line-height: .96;
  letter-spacing: .008em;
  color: rgba(245, 245, 244, .94);
}
/* dawne hasło hero; po dołożeniu miasta schodzi pod nagłówek i zostaje
   zdaniem, a nie tytułem */
.hero-tag {
  margin: 16px auto 0;
  /* miara na całe zdanie w jednym wierszu na desktopie; na telefonie i tak
     zawija, ale wtedy łamie się na przecinku, a nie przed ostatnim słowem */
  max-width: 46ch;
  text-wrap: balance;
  color: var(--dim);
  font-size: clamp(.86rem, 2vw, 1rem);
}

/* ---------- wyszukiwarka terminu w hero ----------
   Ciemna pigułka z segmentami rozdzielonymi włoskowymi kreskami: miejsce
   odbioru, termin, godzina i model auta; szukanie zatwierdza Enter.
   Obok osobny biały przycisk do floty. Całość wyśrodkowana pod nagłówkiem. */
.hero-find {
  display: flex; justify-content: center; align-items: center;
  gap: 12px; flex-wrap: wrap;
  margin-top: 38px;
}
/* Powłoka trzyma podpowiedzi i kalendarz przy pasku — pasek sam jest flexem,
   więc pozycjonowanie względem niego rozbiłoby układ segmentów.
   Miara jest dobrana pod treść: pole szukania jako jedyne rośnie i zabiera
   cały zapas, więc szerszy pasek to nie równomiernie większe segmenty, tylko
   jedno rozdęte pole tekstowe obok czterech normalnych. */
.hf-shell { position: relative; width: min(430px, 100%); }
.hf-bar {
  display: flex; align-items: center;
  /* równo z 44-pikselowym „Zobacz kolekcję" obok; kiedyś tę wysokość nadawała
     strzałka szukania, po jej usunięciu pigułka opadała do wiersza tekstu */
  min-height: 44px;
  padding: 5px 17px;
  border-radius: 999px;
  background: rgba(26, 26, 29, .72);
  border: 1px solid rgba(255, 255, 255, .09);
  backdrop-filter: blur(18px) saturate(130%);
  -webkit-backdrop-filter: blur(18px) saturate(130%);
  transition: border-color .25s;
}
.hf-bar:focus-within { border-color: rgba(255, 255, 255, .22); }
/* Wyściółka pól jest wąska nie z upodobania, tylko z arytmetyki: cztery
   segmenty w 430-pikselowej pigułce dzielą się co do piksela, a „Wrocław" jest
   o 10 px szerszy od „Poznania". Przy 12 px na stronę data urywała się
   wielokropkiem, gdy padło na dłuższe miasto. */
.hf-field { display: flex; align-items: center; gap: 8px; padding: 0 10px; cursor: pointer; }
.hf-city { padding-left: 0; }
/* pole z otwartym kalendarzem podświetla się na tle pigułki — inaczej przy
   panelu na pół ekranu nie widać, które z dwóch pól się właśnie ustawia */
.hf-field.open { background: rgba(255, 255, 255, .07); border-radius: 999px; }
/* pełna, wypełniona pinezka — przy tym samym rozmiarze niesie więcej masy niż
   konturowa, więc jest odrobinę mniejsza i ciemniejsza, żeby nie przeważyła
   nad nazwą miasta obok */
.hf-pin { width: 12px; height: 12px; color: #7e838a; flex: none; }
.hf-lbl {
  font-size: .58rem; font-weight: 500; line-height: 1;
  letter-spacing: .2em; text-transform: uppercase; color: var(--dim);
}
.hf-field input,
.hf-field select {
  border: 0; background: none; padding: 0;
  font-size: .87rem; font-weight: 500; color: var(--ink);
  font-variant-numeric: tabular-nums;
  cursor: pointer;
}
.hf-field input:focus, .hf-field select:focus { outline: none; }
/* Klikalne ma być całe pole, nie sam wiersz tekstu. Przy wyśrodkowaniu input
   miał 24 px w 56-pikselowej pigułce i dotknięcie jej górnej krawędzi nic nie
   robiło; rozciągnięcie oddaje palcowi całą wysokość. */
.hf-field input,
.hf-field select,
.hf-city-btn,
.hf-pick-btn { align-self: stretch; }
/* Pole szukania bierze to, co zostanie po sąsiadach, ale nie mniej niż próg,
   przy którym nie widać już wpisywanych liter. Miara startowa jest równa temu
   progowi, a nie własnej szerokości pola tekstowego: przy „auto" input żądał
   około 170 px, przez co pasek liczył się jako przepełniony i ściskał datę
   obok, urywając ją wielokropkiem.

   Próg jest o tyle niski, żeby przy najdłuższym zestawie (Wrocław + termin
   z dwóch miesięcy) została jeszcze rezerwa na datę. To pole ma się kurczyć
   pierwsze: napis „Szukaj" da się dopowiedzieć z kontekstu, urwanej daty nie. */
.hf-q { flex: 1 1 76px; min-width: 76px; }
.hf-q input { width: 100%; cursor: text; }
.hf-q input::placeholder { color: var(--dim); font-weight: 400; }
/* natywny krzyżyk czyszczenia w input[type=search] jest czarny i ginie na
   ciemnym tle — pole i tak czyści się klawiaturą */
.hf-q input::-webkit-search-cancel-button { appearance: none; }
/* ---- wybór miasta ---- */
.hf-city { position: relative; }
.hf-city-btn {
  display: flex; align-items: center; gap: 7px;
  font-size: .87rem; font-weight: 500; color: var(--ink);
  white-space: nowrap;
}
/* Strzałka listy była rysunkiem 10×7; nowa jest kwadratowa, więc pole też
   musi być kwadratem — inaczej maska zmieściłaby się na siedmiu pikselach. */
.hf-chev { width: 11px; height: 11px; color: var(--dim); transition: transform .22s ease; }
.hf-city.open .hf-chev { transform: rotate(180deg); }
.hf-city-list {
  position: absolute; top: calc(100% + 14px); left: -6px;
  z-index: 25;
  min-width: 148px;
  list-style: none; margin: 0; padding: 6px;
  border-radius: 14px;
  text-align: left;
  /* menu musi być kryjące — szkło z reszty serwisu jest zbyt przezroczyste
     i spod listy przebijałaby treść paska */
  background: rgba(20, 20, 23, .97);
  animation: hf-drop .18s ease-out;
}
@keyframes hf-drop { from { opacity: 0; transform: translateY(-6px); } }
.hf-city-list li {
  padding: 9px 12px;
  border-radius: 9px;
  font-size: .86rem; font-weight: 500; color: #c8cbd0;
  cursor: pointer;
  transition: background .18s, color .18s;
}
/* biel wprost, nie przez --ink: menu zostaje ciemne również w jasnym motywie,
   a zmienna przewracała napis pod kursorem na czarny i gasiła go w tle */
.hf-city-list li:hover, .hf-city-list li.on { background: rgba(255, 255, 255, .09); color: #fff; }
/* wybrane miasto znika z listy — na pasku i tak je widać, więc w rozwinięciu
   zostają same realne alternatywy */
.hf-city-list li[aria-selected="true"] { display: none; }

/* ---- rozwijane pole wyboru (initSelect) ----
   Skórka na natywnym <select>; ten sam język co przy wyborze lokalizacji, więc
   filtry katalogu przestają wyglądać jak wklejka ze stylu systemu. Lista zostaje
   ciemna także w jasnym motywie — dokładnie jak menu miast i panel kalendarza. */
/* align-self, nie sama szerokość: klikalna ma być cała pigułka, a nie wiersz
   tekstu w jej środku — dotknięcie górnej krawędzi palcem musi otwierać listę */
.ofc-pick {
  position: relative;
  display: flex; align-items: center; align-self: stretch;
  width: 100%; min-width: 0;
}
.ofc-pick-btn {
  display: flex; align-items: center; gap: 9px;
  width: 100%; min-width: 0; height: 100%;
  font-size: .82rem; font-weight: 400; letter-spacing: .01em;
  color: var(--ink); white-space: nowrap;
  cursor: pointer;
}
.ofc-pick-label { overflow: hidden; text-overflow: ellipsis; }
.ofc-pick-btn .hf-chev { margin-left: auto; }
.ofc-pick.open .hf-chev { transform: rotate(180deg); }
.ofc-pick-list {
  position: absolute; top: calc(100% + 12px); left: -14px;
  z-index: 25;
  min-width: calc(100% + 28px);
  max-height: 320px; overflow-y: auto;
  list-style: none; margin: 0; padding: 6px;
  border-radius: 14px;
  text-align: left;
  background: rgba(20, 20, 23, .97);
  box-shadow: 0 18px 44px rgba(0, 0, 0, .5);
  animation: hf-drop .18s ease-out;
}
.ofc-pick-list li {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 12px;
  border-radius: 9px;
  font-size: .84rem; color: #c8cbd0;
  white-space: nowrap;
  cursor: pointer;
  transition: background .18s, color .18s;
}
/* Biel wpisana wprost, nie przez --ink: menu zostaje ciemne także w jasnym
   motywie, a zmienna przewróciłaby napisy na czarne i schowała je w tle. */
.ofc-pick-list li:hover, .ofc-pick-list li.on { background: rgba(255, 255, 255, .09); color: #fff; }
/* ptaszek zamiast samego podświetlenia: przy otwartej liście kursor i tak
   podświetla wiersz pod myszą, więc wybór musi się odróżniać czymś trwałym */
.ofc-pick-list li[aria-selected="true"] { color: #fff; }
.ofc-pick-list li[aria-selected="true"]::after {
  content: '✓'; margin-left: auto; font-size: .8em; color: var(--red2);
}
.hf-sep { width: 1px; height: 19px; background: rgba(255, 255, 255, .14); flex: none; }

/* ---- termin i godzina ----
   Oba pola otwierają to samo rozwinięcie; różnią się tylko tym, na czym
   stawiają ognisko po otwarciu. */
/* Pole terminu może się zwęzić poniżej swojej treści, a etykieta wtedy urwie
   się wielokropkiem. To zabezpieczenie, nie stan docelowy: pasek jest na tyle
   szeroki, że mieści najdłuższą postać („16.08 → 30.08"). Bez tego wyjścia
   dłuższa etykieta rozpychała zawartość i wypychała strzałkę poza pigułkę. */
.hf-when { position: relative; min-width: 0; }
.hf-ico { width: 13px; height: 13px; color: #7e838a; flex: none; }
.hf-pick-btn {
  display: flex; align-items: center;
  min-width: 0;
  font-size: .87rem; font-weight: 500; color: var(--ink);
  font-variant-numeric: tabular-nums;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.hf-pick-label { overflow: hidden; text-overflow: ellipsis; }
/* stan bez wyboru czyta się jak podpowiedź w polu tekstowym, nie jak wartość */
.hf-pick-btn.empty .hf-pick-label { color: var(--dim); font-weight: 400; }

/* ---- rozwinięcie z kalendarzem ----
   Otwiera się W GÓRĘ: pasek stoi tuż nad dolną krawędzią hero, więc panel
   rozwinięty w dół wisiałby w całości na następnej sekcji. Nad paskiem
   miejsca jest aż nadto. */
.hf-cal {
  position: absolute;
  bottom: calc(100% + 12px);
  left: 50%;
  transform: translateX(-50%);
  z-index: 30;
  /* Szerokość dyktuje treść, nie pasek: dwa miesiące obok siebie potrzebują
     swojego, a pasek jest od nich znacznie węższy. Panel jest więc rozwinięciem
     wyśrodkowanym na polu, nie jego przedłużeniem. */
  width: min(560px, calc(100vw - 28px));
  padding: 18px 18px 16px;
  border-radius: 22px;
  text-align: left;
  /* panel musi być kryjący — pod spodem jest jasny kadr z filmu, a przez
     zwykłe szkło z reszty serwisu przebijałyby przez siatkę dni */
  background: rgba(16, 16, 19, .95);
  animation: hf-rise .2s ease-out;
}
@keyframes hf-rise { from { opacity: 0; transform: translateX(-50%) translateY(10px); } }
.hf-cal-months { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.hf-cal .cal-head { margin-bottom: 4px; }
.hf-cal .cal-title { font-size: .8rem; }
.hf-cal .cal-grid { gap: 2px; }
.hf-cal .cal-day { padding: 0; font-size: .78rem; }
.hf-nav-btn {
  width: 28px; height: 28px; border-radius: 50%; flex: none;
  border: 1px solid rgba(255, 255, 255, .12);
  display: grid; place-items: center;
  font-size: .95rem; line-height: 1; color: var(--dim);
  transition: color .2s, border-color .2s, background .2s;
}
/* Strzałka miesiąca zapala się czerwienią marki — kalendarz jest rozwinięciem
   paska wyszukiwania, więc reaguje jego kolorem akcentu. */
.hf-nav-btn:hover:not(:disabled) {
  color: var(--red2);
  border-color: rgba(227, 34, 39, .5);
  background: rgba(227, 34, 39, .1);
}
.hf-nav-btn:disabled { opacity: .25; cursor: default; }
/* Każdy miesiąc ma obie strzałki, bo na wąskim ekranie zostaje z nich tylko
   jeden; przy dwóch widocznych zbędne połówki znikają. */
.hf-cal-months .cal:first-child .hf-nav-btn.next,
.hf-cal-months .cal + .cal .hf-nav-btn.prev { visibility: hidden; }

.hf-cal-hours { margin-top: 15px; padding-top: 14px; border-top: 1px solid rgba(255, 255, 255, .08); }
.hf-cal-lbl {
  margin: 0 0 10px;
  font-size: .78rem; font-weight: 500; color: #e4e6e9;
}
.hf-cal-lbl span { font-size: .74rem; font-weight: 400; color: var(--dim); }
.hf-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.hf-chip {
  padding: 7px 12px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, .1);
  background: rgba(255, 255, 255, .04);
  font-size: .78rem; color: #c8cbd0;
  font-variant-numeric: tabular-nums;
  transition: background .18s, border-color .18s, color .18s;
}
.hf-chip:hover { border-color: rgba(227, 34, 39, .45); color: #fff; }
/* Wybrana godzina nie jest czystą bielą, tylko mleczną z ciepłym przejściem —
   tym samym refleksem marki, który wędruje po przyciskach w pasku. */
.hf-chip.on {
  background: linear-gradient(135deg, #fff 52%, rgba(255, 224, 224, .96));
  border-color: #fff;
  color: #0b0b0c; font-weight: 500;
}
.hf-chip--day { padding-inline: 15px; }
/* dopłata za wieczorną godzinę; w jednej linii z godziną, żeby pigułki
   w zawijanym rzędzie zostały tej samej wysokości */
.hf-chip small { margin-left: 6px; font-size: .7rem; color: #9aa0a7; }
.hf-chip.on small { color: rgba(11, 11, 12, .58); }
.hf-chip:hover small { color: #d7d9dd; }
.hf-chip.on:hover small { color: rgba(11, 11, 12, .58); }

.hf-cal-foot {
  display: flex; align-items: center; justify-content: space-between;
  gap: 14px; flex-wrap: wrap;
  margin-top: 15px; padding-top: 14px;
  border-top: 1px solid rgba(255, 255, 255, .08);
}
.hf-cal-sum { margin: 0; font-size: .78rem; color: var(--dim); line-height: 1.5; }
.hf-cal-sum b { color: var(--ink); font-weight: 500; font-variant-numeric: tabular-nums; }
.hf-cal-acts { display: flex; align-items: center; gap: 10px; margin-left: auto; }
.hf-cal-clear {
  font-size: .78rem; color: var(--dim);
  text-decoration: underline; text-decoration-color: rgba(255, 255, 255, .25);
  text-underline-offset: 4px;
  transition: color .2s, text-decoration-color .2s;
}
.hf-cal-clear:hover { color: var(--ink); text-decoration-color: rgba(255, 255, 255, .6); }
/* Ten sam przycisk co „Zobacz kolekcję” w hero: mleczna baza z wędrującym
   rozjaśnieniem i ciepłym refleksem marki. Reguły tła i fali stoją niżej,
   przy .hf-all — tutaj zostaje sam rozmiar. */
.hf-cal-done {
  padding: 9px 22px; border-radius: 999px;
  color: #0b0b0c;
  font-size: .8rem; font-weight: 500;
}

/* przyciemnienie tła należy do wariantu arkuszowego (wąski ekran) */
.hf-scrim { display: none; }

/* ---- mleczne przyciski z falującym tłem ----
   Tło i fala siedzą w pseudoelementach na z-index: -1, bo pseudoelement
   pozycjonowany bez ujemnego z-index malowałby się NAD tekstem przycisku.
   isolation: isolate zamyka je w przycisku, żeby nie wypadły pod hero. */
.hf-all, .hf-cal-done, .time-chip.on {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background: none;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.hf-all::before, .hf-cal-done::before, .time-chip.on::before {
  content: "";
  position: absolute; inset: 0; z-index: -1;
  border-radius: inherit;
  /* baza celowo nie jest czystą bielą — dopiero na przygaszonym tle widać
     wędrujące rozjaśnienie; alfa zostawia ślad kadru pod spodem */
  background: rgba(243, 243, 244, .82);
  transition: background .25s;
}
.hf-all:hover::before, .hf-cal-done:hover::before, .time-chip.on:hover::before { background: rgba(250, 250, 250, .9); }
/* jasna plama dryfuje po przycisku, a za nią idzie ledwo widoczny ciepły
   refleks marki — razem czyta się jak powolne falowanie światła, nie jak
   kolorowy gradient */
.hf-all::after, .hf-cal-done::after, .time-chip.on::after {
  content: "";
  position: absolute; inset: -45%; z-index: -1;
  background:
    radial-gradient(44% 68% at 32% 45%, rgba(255, 255, 255, .98), transparent 66%),
    radial-gradient(38% 62% at 70% 58%, rgba(227, 34, 39, .16), transparent 68%);
  animation: hf-wave 9s ease-in-out infinite alternate;
}
.hf-all::after { animation-duration: 12s; animation-delay: -4s; }
@keyframes hf-wave {
  0%   { transform: translate3d(-20%, -10%, 0) scale(1); }
  50%  { transform: translate3d(16%, 11%, 0) scale(1.22); }
  100% { transform: translate3d(-9%, 15%, 0) scale(1.06); }
}
/* podpowiedzi pod paskiem — ta sama lista co w lupie w nawigacji */
.hf-results {
  position: absolute; top: calc(100% + 10px); left: 0; right: 0;
  z-index: 20;
  max-height: 340px; overflow-y: auto;
  list-style: none; margin: 0; padding: 8px;
  border-radius: var(--r-md);
  text-align: left;
}
.hf-results li a {
  display: flex; align-items: center; gap: 12px;
  padding: 9px 10px; border-radius: 10px;
  transition: background .18s;
}
.hf-results li a:hover, .hf-results li.on a { background: rgba(255, 255, 255, .08); }
.hf-results img { width: 56px; height: 38px; object-fit: cover; border-radius: 6px; flex: none; }
.hf-results .hf-res-tx { flex: 1; min-width: 0; }
.hf-results .hf-res-tx b {
  display: block; font-size: .88rem; font-weight: 500; line-height: 1.3;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.hf-results .hf-res-price { font-size: .78rem; color: var(--dim); white-space: nowrap; }
.hf-results .hf-empty { padding: 14px 10px; font-size: .84rem; color: var(--dim); text-align: center; }
/* auto zajęte w wybranym terminie; zostaje na liście, bo termin można zmienić,
   ale nie udaje dostępnego */
.hf-results li.off a { opacity: .6; }
.hf-res-ok, .hf-res-no { font-style: normal; font-weight: 500; }
.hf-res-ok { color: #8fe3b0; }
.hf-res-no { color: var(--red2); }

/* przycisk ma być dokładnie tak wysoki jak pasek: 34 px treści + 2 × 5 px
   wyściółki pigułki — dlatego stała wysokość zamiast pionowego paddingu */
.hf-all {
  height: 44px; padding: 0 26px;
  font-size: .86rem;
}
/* W hero przycisk stoi tuż przy pasku i jest odrobinę węższy, żeby nie
   konkurować z pigułką. Te same przyciski niżej stoją samotnie na swoich
   sekcjach i zostają szersze. */
.hero-find .hf-all { padding: 0 21px; font-size: .84rem; }
.hf-msg {
  margin: 18px 0 0;
  font-size: .85rem; color: var(--dim);
  min-height: 1.3em;                   /* stała wysokość — komunikat nie przesuwa hero */
}
.hf-msg b { color: var(--ink); font-weight: 500; }
.hf-msg.err { color: var(--red2); }
.hf-msg button {
  color: var(--ink); font-size: inherit;
  text-decoration: underline; text-decoration-color: rgba(255, 255, 255, .35);
  text-underline-offset: 4px;
  transition: text-decoration-color .25s;
}
.hf-msg button:hover { text-decoration-color: var(--ink); }

/* ============================================================
   MANIFEST — czarny oddech między hero a flotą.
   Pełna wysokość okna, żeby przy czytaniu nie wystawała już flota.
   Zdanie rozświetla się słowo po słowie, ale NIE jest przywiązane do
   pozycji paska przewijania: skrypt dokłada klasę .lit, gdy zdanie
   wejdzie w środek ekranu, a resztę robią opóźnienia przejść. Dzięki
   temu wystarczy jeden ruch w dół — animacja dogrywa się sama.
   ============================================================ */
/* ============================================================
   PRELOADER — czarny ekran z podświetlającym się logo.
   Widoczny od pierwszego malowania (site.css blokuje render);
   home.js zdejmuje go po window.load, nie wcześniej niż po 1,4 s.
   ============================================================ */
.loader {
  position: fixed; inset: 0; z-index: 2000;
  display: flex; align-items: center; justify-content: center;
  background: #020203;
  transition: opacity .45s ease, visibility .45s;
}
.loader.done { opacity: 0; visibility: hidden; pointer-events: none; }
.loader-box { display: flex; flex-direction: column; align-items: center; gap: 26px; }
.loader-logo {
  font-size: clamp(24px, 4.4vw, 44px);
  filter: brightness(.3);
  /* czasy dobrane pod pół sekundy, przez którą plansza wisi; wcześniej trwały
     1,5 s i to one, a nie ładowanie, trzymały czarny ekran */
  animation: loader-light .62s ease-out .04s forwards;
}
@keyframes loader-light { /* logo „zapala się" i łapie czerwoną poświatę */
  55% { filter: brightness(.72); }
  100% { filter: brightness(1) drop-shadow(0 0 26px rgba(227, 34, 39, .3)); }
}
.loader-bar {
  align-self: stretch;      /* szerokość logo — box mierzy się najszerszym dzieckiem */
  height: 1px;
  background: rgba(255, 255, 255, .12);
  overflow: hidden;
}
.loader-bar i {
  display: block; height: 100%;
  background: linear-gradient(90deg, var(--red), #ff6a4d);
  transform: scaleX(0); transform-origin: left;
  animation: loader-fill .58s cubic-bezier(.35, 0, .1, 1) .05s forwards;
}
@keyframes loader-fill { to { transform: scaleX(1); } }
/* dopóki loader wisi, strona pod nim nie przewija się */
body.is-loading { overflow: hidden; }

/* ---------- logo (typograficzne) ----------
   Rysowane tekstem zamiast bitmapą: ostre w każdej skali i na każdym DPI.
   Cały układ skaluje się jedną wartością font-size na .logo. */
.logo {
  display: inline-flex; align-items: center;
  gap: .82em;
  font-size: 20px;                  /* jedyne pokrętło rozmiaru */
  line-height: 1;
  white-space: nowrap;
  color: var(--ink);
}
.logo-mark {
  font-size: 1.62em;
  font-weight: 400;
  letter-spacing: .17em;
  text-indent: .17em;               /* kompensuje światło dodane po ostatniej literze */
}
.logo-rule {
  width: 1px; height: 2.4em;
  background: var(--red);
  flex: none;
}
.logo-text { display: flex; flex-direction: column; gap: .28em; }
.logo-name {
  font-size: .84em;
  font-weight: 400;
  letter-spacing: .13em;
  text-indent: .13em;
}
.logo-name em { font-style: normal; color: var(--red); }
.logo-sub {
  /* Podpis skaluje się razem ze znakiem, ale nie schodzi poniżej progu, przy
     którym jest już tylko szarą kreską: na telefonie logo ma 15–16 px, więc
     same .4em dawało 6 px. */
  font-size: max(.4em, 9.5px);
  font-weight: 400;
  letter-spacing: .2em;
  text-indent: .2em;
  text-transform: uppercase;
  color: #9aa0a7;
}

/* Kontener sprawdzenia „czy to człowiek" (Turnstile). Stoi pusty i nic nie
   zajmuje, dopóki Cloudflare nie każe pokazać zadania; dopiero wtedy dostaje
   wysokość i odstęp od przycisku pod spodem. */
.ts-box:not(:empty) {
  display: flex;
  justify-content: center;
  margin: 0 0 14px;
}

/* Pułapka na boty: pole formularza, którego nie widać na ekranie i którego nie
   przeczyta czytnik (aria-hidden stoi w HTML). Nie używamy .sr-only — tamto
   jest właśnie dla czytników, a pułapkę ma wypełniać wyłącznie program. */
.pulapka {
  position: absolute; left: -9999px; top: auto;
  width: 1px; height: 1px; overflow: hidden;
  opacity: 0; pointer-events: none;
}

/* czytelne dla czytników, niewidoczne na ekranie */
.sr-only {
  position: absolute; width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  clip-path: inset(50%); overflow: hidden; white-space: nowrap;
}

/* ============================================================
   FLOTA — karuzela dużych kart.
   Domyślny układ w kodzie niżej to tryb ZWYKŁY: szyna przewijana natywnie
   (gest, przeciągnięcie, strzałki), sekcja normalnej wysokości. Tryb przypięty
   dokłada skrypt klasą .is-pinned — dopiero wtedy sekcja rośnie, kadr się
   usztywnia, a szyną steruje transform pod przewijanie strony. Ta kolejność
   jest celowa: bez JS strona zostaje w wariancie, który zawsze działa.
   ============================================================ */
.fleet {
  position: relative;
  background: #000;
  /* clip, NIE hidden: hidden tworzy kontener przewijania, a wtedy sticky
     w środku przykleja się do sekcji zamiast do okna i przypięcie nie działa.
     Clip tak samo chroni <body> przed poziomym paskiem. */
  overflow: clip;
}
.fleet-pin { padding-block: clamp(70px, 10vh, 120px); }
/* Karty i stopka trzymają linię logo w nawigacji, a nie węższej kolumny
   treści — sekcja ma sięgać tak samo daleko w lewo jak pasek na górze. */
.fleet-view {
  overflow-x: auto; overflow-y: hidden;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  /* zatrzask ma zrównać kartę z lewą krawędzią kolumny treści, a nie okna */
  scroll-padding-inline-start: clamp(20px, 3.2vw, 48px);
}
.fleet-view::-webkit-scrollbar { display: none; }
.fleet-view:focus-visible { outline: 2px solid rgba(255,255,255,.75); outline-offset: -2px; }
@media (hover: hover) and (pointer: fine) { .fleet-view { cursor: grab; } }
/* Na czas przeciągania zatrzask musi zniknąć: przy scroll-snap-type: mandatory
   przeglądarka cofa KAŻDY programowy przyrost scrollLeft do najbliższego punktu,
   więc gest myszą nie ruszał szyny w ogóle. Po puszczeniu zatrzask wraca
   i sam dociąga kartę do krawędzi. */
.fleet-view.drag { scroll-snap-type: none; scroll-behavior: auto; cursor: grabbing; }
.fleet-view.drag .fleet-card,
.fleet-view.drag .fleet-intro { pointer-events: none; }
.fleet-rail {
  display: flex;
  gap: clamp(12px, 1.4vw, 22px);
  padding-inline: clamp(20px, 3.2vw, 48px);
}

/* ---- tryb przypięty ----
   Wysokość sekcji = okno + dystans przewijania liczony w skrypcie z liczby
   kart, a nie z szerokości szyny. Dzięki temu przełożenie jest większe niż
   1:1 i cała flota przejeżdża w około półtora ekranu zamiast w sześciu. */
.fleet.is-pinned { height: calc(100vh + var(--fleet-span, 130vh)); }
.fleet.is-pinned .fleet-pin {
  position: sticky; top: 0;
  height: 100vh;
  display: flex; flex-direction: column; justify-content: center;
  padding-block: 0;
}
/* natywne przewijanie w poziomie musi zniknąć — szyną steruje transform,
   a zatrzaski cofałyby każdą klatkę do najbliższego punktu */
.fleet.is-pinned .fleet-view { overflow: clip; scroll-snap-type: none; cursor: default; }
.fleet.is-pinned .fleet-card,
.fleet.is-pinned .fleet-intro { scroll-snap-align: none; }
/* warstwa kompozytora tylko wtedy, gdy sekcja jest blisko kadru: szyna to
   siedem dużych kadrów i trzymanie jej tekstury przez całe życie strony
   byłoby kosztowne bez powodu */
.fleet.is-near .fleet-rail { will-change: transform; }

/* karta: szeroki kadr poziomy, treść w lewym dolnym rogu */
.fleet-card,
.fleet-intro {
  position: relative;
  /* Proporcja z referencji (5:3), ale rozmiar wiązany z WYSOKOŚCIĄ okna —
     przy wiązaniu z szerokością karta na niskim ekranie wychodziła poza kadr
     razem z przyciskiem. Szerokość dolicza aspect-ratio. */
  flex: 0 0 auto;
  /* 78vh to wartość docelowa, ale przy niskim oknie karta podchodziła pod
     przyklejony pasek nawigacji (76 px) — drugi człon min() gwarantuje, że nad
     i pod kadrem zostaje po ~95 px niezależnie od wysokości ekranu */
  height: clamp(340px, min(78vh, 100vh - 190px), 980px);
  aspect-ratio: 5 / 3;
  max-width: 86vw;
  scroll-snap-align: start;
  overflow: hidden;
  background: var(--bg2);
  display: block;
  isolation: isolate;
}
.fleet-card img,
.fleet-intro img,
.fleet-intro video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 1.2s cubic-bezier(.22,.84,.18,1);
}
.fleet-card:hover img { transform: scale(1.03); }
/* Przyciemnienie jest celowo delikatne: w referencji zdjęcie zostaje jasne,
   a tekst broni się samą wagą kroju. Mocniejszy gradient zamieniał kartę
   w ciemny prostokąt ze zdjęciem gdzieś w tle. */
.fleet-card::after,
.fleet-intro::after {
  content: "";
  position: absolute; inset: 0;
  background:
    linear-gradient(0deg, rgba(0,0,0,.88) 0%, rgba(0,0,0,.68) 24%, rgba(0,0,0,.4) 42%, rgba(0,0,0,.12) 58%, transparent 72%),
    linear-gradient(90deg, rgba(0,0,0,.5) 0%, transparent 46%);
}
/* film wjeżdża dopiero, gdy naprawdę gra — inaczej przez ułamek sekundy
   widać czarny prostokąt zamiast plakatu */
.fleet-intro-vid { opacity: 0; transition: opacity .6s ease; }
.fleet-intro-vid.on { opacity: 1; }

.fleet-card-in,
.fleet-intro-in {
  position: absolute; inset: auto auto 0 0; z-index: 2;
  /* szerzej niż w pierwszej wersji: przy wąskim bloku dłuższe hasła szły na
     trzy wiersze i wypychały nadpis w jasną część kadru */
  max-width: min(38rem, 80%);
  /* wcięcie ~4% szerokości karty, tak jak w referencji */
  padding: 0 clamp(20px, 3.8%, 44px) clamp(22px, 4%, 44px);
}
.fleet-no {
  display: block;
  font-size: .72rem; font-weight: 500;
  letter-spacing: .16em; text-transform: uppercase; color: #b9bcc1;
}
/* pierwszy człon nadpisu jest akcentem („NEW • S1 LM" w referencji) */
.fleet-no em { font-style: normal; color: var(--red2); }
.fleet-card h3,
.fleet-intro-in b {
  display: block;
  margin: 13px 0 0;
  font-family: var(--font-display);
  font-size: clamp(1.1rem, 1.9vw, 1.7rem);
  font-weight: 500; letter-spacing: .012em; line-height: 1.24;
  text-transform: uppercase;
  text-wrap: balance;
}
/* przycisk konturowy jak w referencji — nie wypełniony, żeby nie walczył
   z kadrem; to i tak część klikalnej karty, więc wizualnie jest wskazówką */
.fleet-cta {
  display: inline-block; margin-top: clamp(18px, 3.4%, 34px);
  padding: 13px 24px;
  border: 1px solid rgba(255,255,255,.5);
  font-size: .68rem; font-weight: 500;
  letter-spacing: .16em; text-transform: uppercase;
  transition: background .25s, border-color .25s, color .25s;
}
.fleet-card:hover .fleet-cta,
.fleet-intro:hover .fleet-cta { background: var(--ink); border-color: var(--ink); color: #0b0b0c; }

/* ============================================================
   FLOTA NA STRONIE GŁÓWNEJ — czytelna siatka modeli
   ============================================================ */
.home-fleet {
  position: relative;
  padding: clamp(110px, 15vh, 170px) 0 clamp(120px, 17vh, 190px);
  border-top: 1px solid rgba(255,255,255,.055);
  background: #050506;
  color: #f3f3f1;
}
.home-fleet-shell { width: 100%; padding-inline: clamp(20px, 3.2vw, 48px); }
.home-fleet-head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 40px;
  margin-bottom: clamp(44px, 7vh, 76px);
}
.home-fleet-head h2 {
  margin: 0;
  font-size: clamp(2.5rem, 4.8vw, 5.4rem);
  font-weight: 400;
  letter-spacing: -.05em;
  line-height: .95;
  text-transform: uppercase;
}
.home-fleet-head h2 span { color: #74767b; }
.home-fleet-head p {
  margin: 16px 0 0;
  color: rgba(255,255,255,.5);
  font-size: .8rem;
}
.home-fleet-head > a,
.home-fleet-noscript a {
  display: inline-flex;
  align-items: center;
  gap: 16px;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(255,255,255,.3);
  font-size: .62rem;
  font-weight: 600;
  letter-spacing: .15em;
  text-transform: uppercase;
  transition: gap 220ms cubic-bezier(.23,1,.32,1), border-color 220ms ease;
}
.home-fleet-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(14px, 1.45vw, 22px);
}
.home-car {
  min-width: 0;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 8px;
  background: #0b0b0d;
  transition: border-color 240ms ease;
}
.home-car-media {
  position: relative;
  display: block;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: #121216;
}
.home-car-media::after {
  content: "";
  position: absolute; inset: auto 0 0;
  height: 28%;
  background: linear-gradient(transparent, rgba(0,0,0,.22));
  pointer-events: none;
}
.home-car-media img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 700ms cubic-bezier(.16,1,.3,1);
}
.home-car-badge {
  position: absolute;
  z-index: 2;
  top: 14px; left: 14px;
  max-width: calc(100% - 28px);
  overflow: hidden;
  padding: 6px 10px;
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 999px;
  color: rgba(255,255,255,.78);
  background: rgba(4,4,5,.52);
  backdrop-filter: blur(10px);
  font-size: .52rem;
  font-weight: 600;
  letter-spacing: .13em;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}
.home-car-body { display: block; padding: clamp(17px, 1.6vw, 23px); }
.home-car-title {
  min-height: 42px;
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 14px;
}
.home-car-title h3 {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(.92rem, 1.15vw, 1.12rem);
  font-weight: 500;
  letter-spacing: -.01em;
  line-height: 1.2;
  text-transform: uppercase;
}
.home-car-title > small { color: #72747a; font-size: .65rem; font-variant-numeric: tabular-nums; }
.home-car-specs {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 18px;
  margin-top: 17px;
  padding-bottom: 18px;
}
.home-car-specs > span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: rgba(255,255,255,.65);
  font-size: .68rem;
  white-space: nowrap;
}
.home-car-specs svg {
  width: 14px; height: 14px;
  color: var(--red2);
  fill: none;
  stroke: var(--red2);
  stroke-width: 1.25;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.home-car-prices {
  display: grid;
  gap: 10px;
  padding-top: 16px;
  border-top: 1px solid rgba(255,255,255,.09);
}
.home-car-prices > span { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; }
.home-car-prices small { color: #6e7076; font-size: .65rem; }
.home-car-prices b { color: rgba(255,255,255,.46); font-size: .68rem; font-weight: 400; }
.home-car-prices strong { font-size: .9rem; font-weight: 600; }
.home-fleet-noscript { margin-top: 30px; }
@media (hover: hover) and (pointer: fine) {
  .home-car:hover { border-color: rgba(255,255,255,.26); }
  .home-car:hover .home-car-media img { transform: scale(1.025); }
  .home-fleet-head > a:hover,
  .home-fleet-noscript a:hover { gap: 22px; border-color: #fff; }
}
@media (max-width: 1050px) {
  .home-fleet-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 650px) {
  .home-fleet { padding: 94px 0 110px; }
  .home-fleet-shell { padding-inline: 16px; }
  .home-fleet-head { align-items: start; flex-direction: column; gap: 26px; margin-bottom: 38px; }
  .home-fleet-head h2 { max-width: 9ch; font-size: clamp(2.35rem, 12vw, 3.5rem); }
  .home-fleet-head p { max-width: 32ch; font-size: .74rem; }
  .home-fleet-grid { grid-template-columns: 1fr; gap: 16px; }
  .home-car-title h3 { font-size: 1rem; }
  .home-car-body { padding: 18px; }
}

/* Wariant OFC — układ konfiguratora w ciemnej, technicznej estetyce marki. */
.home-fleet {
  padding: clamp(96px, 13vh, 144px) 0 clamp(105px, 14vh, 158px);
  border-top: 1px solid rgba(255,255,255,.055);
  background: #050506;
  color: #f4f4f2;
}
.home-fleet-shell {
  max-width: none;
  padding-inline: clamp(24px, 2.5vw, 48px);
}
.home-fleet-head { align-items: center; margin-bottom: clamp(44px, 6vh, 68px); }
.home-fleet-head h2 {
  font-size: clamp(2.6rem, 4vw, 4.5rem);
  letter-spacing: -.045em;
  line-height: 1;
  text-transform: uppercase;
}
.home-fleet-head p {
  max-width: 49ch;
  margin-top: 17px;
  color: rgba(255,255,255,.46);
  font-size: .84rem;
  line-height: 1.55;
}
.home-fleet-head > a,
.home-fleet-noscript a {
  flex: none;
  min-height: 40px;
  justify-content: center;
  padding: 0 22px;
  border: 1px solid rgba(255,255,255,.22);
  border-radius: 999px;
  color: #fff;
  background: rgba(255,255,255,.055);
  box-shadow: inset 0 1px rgba(255,255,255,.08);
  font-size: .62rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  transition: transform 140ms cubic-bezier(.23,1,.32,1), background 200ms ease, border-color 200ms ease;
}
.home-fleet-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(12px, 1.25vw, 18px);
}
.home-car {
  aspect-ratio: 1 / 1;
  display: flex;
  flex-direction: column;
  padding: 10px;
  border: 1px solid rgba(255,255,255,.085);
  border-radius: 12px;
  background: #09090a;
}
.home-car-media {
  aspect-ratio: 16 / 10;
  border: 1px solid rgba(255,255,255,.055);
  border-radius: 8px;
  background: radial-gradient(circle at 50% 70%, #18181b 0, #0e0e10 44%, #09090a 76%);
}
.home-car-media::after { display: none; }
.home-car-media img {
  object-fit: cover;
  padding: 0;
  filter: none;
  transform: scale(1);
}
.home-car-body { display: flex; flex: 1; flex-direction: column; padding: 14px 3px 2px; }
.home-car-title { min-height: 42px; display: block; }
.home-car-title h3 {
  color: #f3f3f1;
  font-family: var(--font-display);
  font-size: clamp(.88rem, .9vw, 1.05rem);
  font-weight: 500;
  letter-spacing: -.012em;
  line-height: 1.2;
  text-transform: uppercase;
}
.home-car-title h3 small { color: #6f7176; font-size: .64em; font-weight: 400; white-space: nowrap; }
.home-car-specs {
  display: flex;
  flex-wrap: nowrap;
  gap: 6px;
  margin: 6px 0 14px;
  padding: 0;
  overflow: hidden;
}
.home-car-specs > span {
  min-width: 0;
  gap: 5px;
  padding: 7px 8px;
  border: 1px solid rgba(255,255,255,.07);
  border-radius: 999px;
  color: rgba(255,255,255,.58);
  background: rgba(255,255,255,.035);
  font-size: clamp(.5rem, .62vw, .62rem);
  text-overflow: ellipsis;
  overflow: hidden;
}
.home-car-specs svg { width: 12px; height: 12px; flex: none; stroke: var(--red2); stroke-width: 1.2; }
.home-car-actions {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: auto;
}
.home-car-actions a {
  width: auto;
  min-height: auto;
  display: inline-flex;
  border-radius: 999px;
  font-size: .9rem;
  font-weight: 500;
  transition: transform .25s cubic-bezier(.2,.8,.2,1), background .25s, border-color .25s, box-shadow .25s, color .25s;
}
.home-car-details {
  color: var(--ink);
  border: 1px solid rgba(255,255,255,.16);
  background: rgba(255,255,255,.08);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.home-car-book { color: #0b0b0c; background: #fff; box-shadow: 0 12px 34px rgba(0,0,0,.35); }
.home-fleet-head > a:active { transform: scale(.97); }
@media (hover: hover) and (pointer: fine) {
  .home-car:hover { border-color: rgba(255,255,255,.2); }
  .home-car:hover .home-car-media img { transform: scale(1.025); }
  .home-car-details:hover { color: #fff; border-color: rgba(255,255,255,.28); background: rgba(255,255,255,.14); }
  .home-car-book:hover { background: #ebebeb; box-shadow: 0 16px 44px rgba(0,0,0,.45); }
  .home-fleet-head > a:hover { gap: 16px; border-color: rgba(255,255,255,.48); background: rgba(255,255,255,.1); }
}
@media (max-width: 1180px) {
  .home-fleet-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .home-car-specs { flex-wrap: wrap; overflow: visible; }
}
@media (max-width: 650px) {
  .home-fleet { padding: 72px 0 90px; }
  .home-fleet-grid { grid-template-columns: 1fr; }
  .home-fleet-head { gap: 28px; margin-bottom: 40px; }
  .home-fleet-head h2 { max-width: none; font-size: clamp(2.35rem, 11vw, 3.3rem); }
  .home-fleet-head p { max-width: 34ch; }
  .home-fleet-head > a { min-height: 42px; padding-inline: 20px; }
  .home-car { padding: 10px; border-radius: 16px; }
  .home-car-media { flex: none; aspect-ratio: 16 / 7.5; }
  .home-car-body { padding: 12px 4px 2px; }
  .home-car-title { min-height: 0; }
  .home-car-specs { margin: 10px 0; }
  .home-car-specs > span { padding: 6px 8px; font-size: .56rem; }
  .home-car-actions { flex-wrap: nowrap; }
  .home-car-actions a { min-width: 0; padding: 12px 18px; font-size: .72rem; }
}

/* ============================================================
   MARKI W KOLEKCJI — spokojny, monochromatyczny pas
   ============================================================ */
.brand-strip {
  position: relative;
  overflow: hidden;
  width: 100%;
  margin-top: clamp(26px, 3.5vh, 38px);
  color: #f5f5f3;
  background: transparent;
}
.hero-brands {
  /* Pasek wychodzi z ograniczonego kontenera hero i wykorzystuje cały ekran. */
  width: 100vw;
  margin-left: calc(50% - 50vw);
  top: clamp(12px, 1.8vh, 18px);
}
.brand-strip-list {
  width: 100%;
  min-height: clamp(60px, 5.6vw, 86px);
  display: grid;
  grid-template-columns: repeat(9, minmax(0, 1fr));
  align-items: stretch;
  margin: 0;
  padding: 0 clamp(20px, 2.6vw, 52px);
  list-style: none;
}
.brand-strip-item {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(7px, .65vw, 11px);
  min-width: 0;
  color: rgba(255,255,255,.42);
  transition: color 220ms cubic-bezier(.23,1,.32,1), transform 220ms cubic-bezier(.23,1,.32,1);
}
.brand-strip-item img {
  width: clamp(34px, 2.3vw, 46px);
  height: clamp(34px, 2.3vw, 46px);
  object-fit: contain;
  opacity: .48;
  transition: opacity 220ms cubic-bezier(.23,1,.32,1);
}
/* Znaki szersze niż wysokie potrzebują własnej miary; w kwadratowym polu
   muszka Chevroleta i cztery pierścienie Audi wyglądałyby o połowę mniej. */
.brand-strip-item--audi img,
.brand-strip-item--ford img,
.brand-strip-item--camaro img { width: clamp(50px, 3.4vw, 68px); }
.brand-strip-item--mclaren img {
  width: clamp(88px, 6vw, 116px);
  height: clamp(62px, 4.25vw, 82px);
}
.brand-strip-item span {
  overflow: hidden;
  color: inherit;
  font-family: var(--font-display);
  font-size: clamp(.61rem, .68vw, .78rem);
  font-weight: 550;
  letter-spacing: .12em;
  line-height: 1;
  text-transform: uppercase;
  text-overflow: ellipsis;
  white-space: nowrap;
}
@media (hover: hover) and (pointer: fine) {
  .brand-strip-item:hover { color: rgba(255,255,255,.82); transform: translateY(-2px); }
  .brand-strip-item:hover img { opacity: .82; }
}

/* ============================================================
   WIELKIE KAFLE FLOTY — poziomy showcase w duchu Gordon Murray
   ============================================================ */
.fleet-showcase {
  position: relative;
  overflow: hidden;
  padding: 0;
  border-top: 0;
  color: #f5f5f3;
  background: #020203;
}
.fleet-showcase-head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 40px;
  min-height: clamp(122px, 15vh, 154px);
  margin-bottom: clamp(28px, 3.2vh, 40px);
  padding-inline: clamp(24px, 2.1vw, 40px);
}
.fleet-showcase .fleet-showcase-rail {
  opacity: 0;
  clip-path: inset(0 0 18% 0);
  transition:
    opacity 1.15s ease .12s,
    clip-path 1.45s cubic-bezier(.16,.84,.24,1) .12s;
}
.fleet-showcase.showcase-in .fleet-showcase-rail {
  opacity: 1;
  clip-path: inset(0);
}
.fleet-showcase.showcase-settled .fleet-showcase-rail { clip-path: none; }
.fleet-showcase-head p {
  margin: 0 0 15px;
  color: rgba(255,255,255,.46);
  font-size: .6rem;
  font-weight: 600;
  letter-spacing: .2em;
  text-transform: uppercase;
}
.fleet-showcase-head h2 {
  margin: 0;
  max-width: 24ch;
  color: rgba(245,245,244,.84);
  font-size: clamp(1.35rem, 6.4vw, 3.1rem);
  font-weight: 500;
  letter-spacing: .012em;
  line-height: 1.14;
}
.fleet-showcase-all { flex: none; }
.fleet-showcase-rail {
  display: flex;
  gap: clamp(20px, 2.1vw, 40px);
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-inline: contain;
  overscroll-behavior-block: auto;
  padding-inline: clamp(24px, 2.1vw, 40px);
  scroll-padding-inline: clamp(24px, 2.1vw, 40px);
  scroll-snap-type: none;
  scrollbar-width: none;
  cursor: grab;
  touch-action: pan-y pinch-zoom;
}
.fleet-showcase-rail::-webkit-scrollbar { display: none; }
.fleet-showcase-rail.is-grabbing { cursor: grabbing; }

/* ---- podpowiedź „przesuń" przy kursorze ----
   Wspólna dla szyny floty i pasa opinii — obie rzeczy przesuwa się ręką i mają
   mówić to samo, stąd nazwa bez przypisania do jednej sekcji.
   Sam napis, bez tła i ikony. Pozycję pisze skrypt do `transform`, dlatego
   wejście korzysta z osobnej właściwości `translate` — obie składają się ze
   sobą, więc nic się nie nadpisuje. Element wisi przy <body>, żeby nie dało się
   go przyciąć kadrowaniem szyny ani jej przewijaniem w poziomie.
   Cień jest jedyną obroną czytelności na jasnych kadrach — bez tła nie ma się
   za czym schować. */
.hint-przesun {
  position: fixed;
  z-index: 90;
  top: 0;
  left: 0;
  color: #fbfbfa;
  font-size: .58rem;
  font-style: normal;
  font-weight: 600;
  letter-spacing: .22em;
  text-transform: uppercase;
  text-shadow: 0 0 1px rgba(0,0,0,.85), 0 0 4px rgba(0,0,0,.8), 0 0 10px rgba(0,0,0,.7), 0 1px 20px rgba(0,0,0,.6);
  white-space: nowrap;
  opacity: 0;
  translate: 0 5px;
  pointer-events: none;
  transition: opacity .2s ease, translate .34s cubic-bezier(.16,.84,.24,1);
}
.hint-przesun.on { opacity: 1; translate: 0 0; will-change: transform; }
@media (prefers-reduced-motion: reduce) {
  .hint-przesun { transition: none; }
}
.fleet-showcase-card {
  position: relative;
  flex: 0 0 clamp(820px, 55vw, 1060px);
  aspect-ratio: 5 / 3;
  overflow: hidden;
  background: #101012;
  user-select: none;
  /* Wewnętrzne z-indexy (odnośnik 2, przycisk 3) mają porządkować TĘ kartę,
     a bez własnego kontekstu warstw liczyły się w głównym kontekście strony —
     ponad warstwą hero (z-index: 2), w której wiszą podpowiedzi, kalendarz
     i kurtyna. Rozpięty na całą kartę przezroczysty odnośnik zjadał wtedy
     stuknięcia w listę podpowiedzi nad kartą: widać było listę, a dotyk
     otwierał stronę auta spod niej. */
  isolation: isolate;
}
.fleet-showcase-card > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  -webkit-user-drag: none;
  user-select: none;
  translate: var(--fleet-shift, 0px) 0;
  transform: scale(1.03);
  /* Parallax jest aktualizowany w każdej klatce. Transition na translate
     zaczynał się wtedy wciąż od nowa i dawał wrażenie spóźnionego ruchu. */
  transition: transform 900ms cubic-bezier(.16,1,.3,1);
  will-change: translate, transform;
}
.fleet-showcase-shade {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, transparent 42%, rgba(0,0,0,.2) 62%, rgba(0,0,0,.82) 100%),
    linear-gradient(90deg, rgba(0,0,0,.22), transparent 58%);
  pointer-events: none;
}
.fleet-showcase-link {
  position: absolute;
  z-index: 2;
  inset: 0;
  color: inherit;
  -webkit-user-drag: none;
}
.fleet-showcase-link:focus-visible { outline: 1px solid #fff; outline-offset: -8px; }
.fleet-showcase-copy {
  position: absolute;
  z-index: 2;
  left: clamp(28px, 3vw, 52px);
  right: clamp(28px, 3vw, 52px);
  bottom: clamp(96px, 7.4vw, 116px);
  display: block;
  pointer-events: none;
  /* napisy stoją na zdjęciu, więc barwa jest z kadru, nie z motywu — jasny
     motyw przestawia kolor całej sekcji i przewracał nazwę auta na czarno */
  color: #f5f5f3;
}
.fleet-showcase-copy strong {
  display: block;
  max-width: 22ch;
  font-family: var(--font-display);
  font-size: clamp(1.35rem, 1.65vw, 2rem);
  font-weight: 500;
  letter-spacing: -.02em;
  line-height: 1.05;
  text-transform: uppercase;
}
.fleet-rok { font-weight: 400; color: rgba(255, 255, 255, .6); }
/* dane szeptem pod nazwą; rozdziela je samo światło, hierarchię robi
   kontrast nazwy i ceny, nie ozdobniki */
.fleet-showcase-specs {
  display: flex;
  align-items: baseline;
  gap: 19px;
  margin: 7px 0 15px;
  font-size: .7rem;
  font-weight: 400;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .58);
  text-shadow: 0 1px 8px rgba(0, 0, 0, .8);
}
.fleet-showcase-specs i { font-style: normal; line-height: 1.2; }
.fleet-showcase-price {
  display: inline-flex;
  align-items: baseline;
  gap: 7px;
  margin-top: 11px;
  color: #fff;
  font-size: clamp(1.25rem, 1.5vw, 1.8rem);
  font-weight: 500;
  letter-spacing: -.02em;
}
.fleet-showcase-price small {
  color: rgba(255,255,255,.58);
  font-size: .6rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
}
/* ---- odznaka dostępności ----
   Odpowiedź „wolne czy zajęte" daje wyłącznie katalog; szyna na stronie miasta
   zostaje czystym zaproszeniem do floty. Styl stoi w arkuszu wspólnym, a nie
   w katalogowym, bo to gotowy element do wzięcia, gdyby odznaka miała się
   kiedyś pojawić także gdzie indziej.

   Siada w lewym górnym rogu kadru, czyli tam, gdzie nie ma nazwy ani ceny.
   Bez znaczka „✓" i „✕" przed napisem: stan niesie samo zdanie („Dostępne
   dziś", „Zajęte do 27.08"), więc barwa nie jest jedynym nośnikiem i przy
   daltonizmie nic się nie gubi; znaczek dokładał trzeci głos do tego samego. */
.cat-badge {
  position: absolute;
  top: 12px; left: 12px;
  display: inline-flex; align-items: center;
  padding: 6px 11px;
  border-radius: 999px;
  border: 1px solid transparent;
  font-size: .72rem; font-weight: 500; letter-spacing: .01em;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  pointer-events: none;
}
.cat-badge.ok {
  background: rgba(20, 62, 40, .72);
  border-color: rgba(47, 191, 113, .5);
  color: #b7f0d0;
}
.cat-badge.busy {
  background: rgba(58, 16, 18, .72);
  border-color: rgba(227, 34, 39, .5);
  color: #ffbcbe;
}

/* Promocja auta na karcie: drobna linia tekstu pod wierszem ceny, dosunięta
   do prawej, więc czyta się jako podpis pod kwotą. Osobny wiersz, nie część
   .cat-cena: w środku kolumny z ceną jej szerokość liczyłaby się do
   kolumny i spychała kwotę pod dane auta. W bursztynie jak
   „taniej o…" w podsumowaniu, czyli w kolorze, którym serwis mówi
   o oszczędności. Bez pigułki i bez tła: wypełnione na czerwono pigułki
   w wierszu ceny spychały na telefonie kwotę do osobnej linii, a obrysowane
   w osobnym wierszu wyglądały jak odznaka „Zajęte"; właściciel 08.09.2026
   odrzucił obie wersje. Na kadrze też nie: właściciel nie chce napisów
   na zdjęciu. Dwie promocje stoją w jednej linii rozdzielone kropką. */
/* .cat-line.cat-promos, nie samo .cat-promos: reguła wiersza w flota.css ma
   tę samą wagę i gap 12 px, a tu odstęp między dwiema promocjami robi sama
   kropka (::before niżej); z gapem 12 px doliczałby się do jej marginesu */
.cat-line.cat-promos {
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 2px 0;
  margin-top: -2px;
  /* wiersz stoi w każdej karcie, także bez promocji, i zawsze ma wysokość
     jednej linii (.7rem × 1.3): pasek pod kadrem jest wtedy w całej siatce
     tym samym prostokątem, zamiast rosnąć przy autach z promocją */
  min-height: .91rem;
}
.cat-promo {
  flex: none;
  color: var(--amber);
  font-size: .7rem; font-weight: 500; letter-spacing: .01em;
  line-height: 1.3;
  white-space: nowrap;
  pointer-events: none;
}
.cat-promo + .cat-promo::before { content: "·"; margin: 0 7px; color: rgba(255, 255, 255, .38); }
/* na jasnym tle bursztyn z motywu ciemnego jest za blady; ciemniejszy odcień
   tej samej barwy zostaje czytelny i dalej mówi „oszczędność" */
html[data-motyw="jasny"] .cat-promo { color: #a8650a; }
html[data-motyw="jasny"] .cat-promo + .cat-promo::before { color: var(--dim); }

.fleet-showcase-book {
  position: absolute;
  z-index: 3;
  left: clamp(28px, 3vw, 52px);
  bottom: clamp(28px, 4vw, 50px);
  min-width: 122px;
  height: 46px;
  display: inline-grid;
  place-items: center;
  padding-inline: 20px;
  border: 1px solid rgba(255,255,255,.68);
  color: #fff;
  background: rgba(8,8,9,.08);
  font-size: .61rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  transition:
    color 180ms ease,
    background-color 180ms ease,
    transform 140ms cubic-bezier(.23,1,.32,1);
  -webkit-user-drag: none;
}
.fleet-showcase-book:active { transform: scale(.97); }
@media (hover: hover) and (pointer: fine) {
  .fleet-showcase-book:hover { color: #09090a; background: #f5f5f3; }
}
.fleet-showcase-progress {
  height: 1px;
  margin: clamp(54px, 7vh, 76px) clamp(24px, 2.1vw, 40px) 0;
  overflow: hidden;
  background: rgba(255,255,255,.12);
}
.fleet-showcase-progress i {
  display: block;
  width: 100%;
  height: 100%;
  background: var(--red2);
  transform: scaleX(0);
  transform-origin: left;
  will-change: transform;
}
@media (hover: hover) and (pointer: fine) {
  .fleet-showcase-card:hover > img { transform: scale(1.055); }
}
.fleet-showcase-rail.is-grabbing .fleet-showcase-card > img { transition: none; }
@media (max-width: 720px) {
  .fleet-showcase { padding: 0; }
  .fleet-showcase-head { min-height: 0; align-items: start; flex-direction: column; gap: 22px; margin-bottom: 26px; padding: 86px 16px 8px; }
  .fleet-showcase-head h2 { max-width: 24ch; font-size: clamp(1.35rem, 6.4vw, 3.1rem); }
  /* Szyna zatrzaskuje się na kartach. Na szerokim ekranie w kadrze stoi
     półtorej karty i swobodny przesuw wygląda jak przeglądanie regału; na
     telefonie karta jest szersza niż to, co widać, więc bez zatrzasku nazwa
     auta i cena stały w połowie przycięte przez krawędź. Powolne samo­
     przesuwanie szyny (home.js) na dotyku nie działa właśnie z tego powodu. */
  .fleet-showcase-rail {
    gap: 14px;
    padding-inline: 16px;
    scroll-padding-inline: 16px;
    scroll-snap-type: x mandatory;
    /* pan-x wpuszcza natywne przewijanie w bok; bez tego palec obsługiwałby
       tylko przeciąganie liczone w home.js, a to z zatrzaskiem się gryzie */
    touch-action: pan-x pan-y pinch-zoom;
  }
  .fleet-showcase-card { flex-basis: 86vw; aspect-ratio: 4 / 5; scroll-snap-align: center; }
  .fleet-showcase-copy { left: 22px; right: 22px; bottom: 91px; }
  .fleet-showcase-copy strong { max-width: 18ch; font-size: clamp(1.35rem, 6vw, 1.7rem); }
  .fleet-showcase-price { font-size: 1.3rem; }
  /* 43 px wysokości i napis 9,8 px to za mało na przycisk, który jest tu
     jedynym wyjściem z karty do rezerwacji */
  .fleet-showcase-book { left: 22px; bottom: 22px; min-width: 130px; height: 48px; font-size: .68rem; }
  .fleet-showcase-progress { margin: 34px 16px 0; }
}
@media (prefers-reduced-motion: reduce) {
  .fleet-showcase .fleet-showcase-rail { opacity: 1; clip-path: none; transition: none; }
  .fleet-showcase-card > img { translate: none; transform: none; transition: none; }
}

/* ============================================================
   WYBÓR AUT — pojedynczy, pełnoekranowy konfigurator (starszy wariant)
   ============================================================ */
.fleet-choice {
  position: relative;
  min-height: max(760px, 100svh);
  overflow: clip;
  color: #f4f4f2;
  border-top: 1px solid rgba(255,255,255,.055);
  background:
    radial-gradient(ellipse 58% 38% at 50% 47%, rgba(255,255,255,.045), transparent 72%),
    linear-gradient(180deg, #020203 0%, #060607 52%, #020203 100%);
}
.fleet-choice::before {
  content: "";
  position: absolute; inset: 0;
  pointer-events: none;
  background: linear-gradient(90deg, transparent 3.2vw, rgba(255,255,255,.045) 3.2vw, rgba(255,255,255,.045) calc(3.2vw + 1px), transparent calc(3.2vw + 1px));
}
.choice-stage {
  position: relative;
  z-index: 1;
  min-height: max(760px, 100svh);
  outline: none;
  touch-action: pan-y;
  user-select: none;
}
.choice-stage:focus-visible::after {
  content: "";
  position: absolute; inset: 10px;
  border: 1px solid rgba(255,255,255,.46);
  pointer-events: none;
}
.choice-head {
  position: absolute;
  z-index: 7;
  top: calc(var(--nav-h) + clamp(44px, 5.5vh, 62px));
  left: clamp(20px, 3.2vw, 48px);
}
.choice-head h2 {
  margin: 0;
  font-size: clamp(1.85rem, 2.8vw, 3.4rem);
  font-weight: 400;
  letter-spacing: -.035em;
  line-height: 1;
  text-transform: uppercase;
}
.choice-brand {
  position: absolute;
  z-index: 1;
  top: 43%; left: 50%;
  transform: translate(-50%, -50%);
  white-space: nowrap;
  color: rgba(255,255,255,.012);
  font-family: var(--font-display);
  font-size: clamp(6rem, 14vw, 15.5rem);
  font-weight: 400;
  letter-spacing: -.06em;
  line-height: .72;
  text-transform: uppercase;
  -webkit-text-stroke: 1px rgba(255,255,255,.065);
  pointer-events: none;
}
.choice-visual {
  position: absolute;
  z-index: 3;
  inset: 17% 4% 20%;
  display: grid;
  place-items: center;
  pointer-events: none;
}
.choice-car {
  position: absolute;
  width: min(104vw, 1560px);
  height: min(76vh, 760px);
  object-fit: contain;
  filter: drop-shadow(0 30px 24px rgba(0,0,0,.64));
  transform-origin: 50% 62%;
}
.choice-stage[data-model="lamborghini-huracan-evo-spyder"] .choice-car { height: min(69vh, 680px); }
.choice-stage[data-model="bmw-m2-g87"] .choice-car { height: min(84vh, 820px); }
.choice-stage[data-model="audi-rs5-avant"] .choice-car { height: min(62vh, 620px); }
.choice-stage.is-changing .choice-car { will-change: transform, opacity; }
.choice-floor {
  position: absolute;
  z-index: 2;
  left: 50%; top: 62%;
  width: min(78vw, 1180px); height: 82px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(0,0,0,.72) 0%, rgba(0,0,0,.35) 44%, transparent 72%);
  filter: blur(12px);
  pointer-events: none;
}
.choice-info {
  position: absolute;
  z-index: 6;
  left: clamp(20px, 3.2vw, 48px);
  bottom: clamp(40px, 5.5vh, 66px);
  width: min(470px, 40vw);
}
.choice-info h3 {
  max-width: 14ch;
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 2.7vw, 3rem);
  font-weight: 400;
  letter-spacing: -.035em;
  line-height: .95;
  text-transform: uppercase;
  text-wrap: balance;
}
.choice-cta {
  display: inline-flex;
  align-items: center;
  gap: 16px;
  margin-top: 20px;
  padding-bottom: 7px;
  border-bottom: 1px solid rgba(255,255,255,.28);
  font-size: .62rem;
  font-weight: 600;
  letter-spacing: .15em;
  text-transform: uppercase;
  transition: gap .3s ease, border-color .3s ease;
}
.choice-arrow {
  position: absolute;
  z-index: 8;
  top: 49%;
  width: 44px; height: 44px;
  display: grid; place-items: center;
  border: 1px solid rgba(255,255,255,.13);
  border-radius: 50%;
  color: rgba(255,255,255,.62);
  background: transparent;
  transition: color .25s, border-color .25s, background .25s, transform .25s;
}
.choice-arrow--prev { left: clamp(18px, 3.2vw, 48px); }
.choice-arrow--next { right: clamp(18px, 3.2vw, 48px); }
.choice-arrow svg { width: 16px; fill: none; stroke: currentColor; stroke-width: 1.25; }
.choice-arrow:active { transform: scale(.96); }
.choice-dots {
  position: absolute;
  z-index: 8;
  right: clamp(20px, 3.2vw, 48px);
  bottom: clamp(38px, 5.4vh, 62px);
  display: flex;
  align-items: center;
  gap: 4px;
}
.choice-dots button {
  width: 30px; height: 28px;
  display: grid; place-items: center;
  transition: transform 140ms cubic-bezier(.23,1,.32,1);
}
.choice-dots button:active { transform: scale(.94); }
.choice-dots button span {
  display: block;
  width: 18px; height: 1px;
  background: rgba(255,255,255,.18);
  transform-origin: left;
  transition: background .3s, transform .45s cubic-bezier(.16,1,.3,1);
}
.choice-dots button.is-active span { background: rgba(255,255,255,.82); transform: scaleX(1.45); }
@media (hover: hover) and (pointer: fine) {
  .choice-arrow:hover { color: #fff; border-color: rgba(255,255,255,.46); background: rgba(255,255,255,.035); }
  .choice-cta:hover { gap: 22px; border-color: #fff; }
}

@media (max-width: 720px) {
  .fleet-choice, .choice-stage { min-height: max(720px, 100svh); }
  .choice-head { top: calc(var(--nav-h) + 38px); left: 16px; }
  .choice-head h2 { max-width: 10ch; font-size: clamp(1.95rem, 9vw, 3.2rem); }
  .choice-brand { top: 39%; font-size: clamp(4.6rem, 20vw, 7rem); -webkit-text-stroke-color: rgba(255,255,255,.055); }
  .choice-visual { inset: 18% -8% 31%; }
  .choice-car { width: 120vw; height: 46vh; }
  .choice-stage[data-model="lamborghini-huracan-evo-spyder"] .choice-car { width: 106vw; height: 46vh; }
  .choice-stage[data-model="bmw-m2-g87"] .choice-car { width: 132vw; height: 46vh; }
  .choice-stage[data-model="audi-rs5-avant"] .choice-car { width: 112vw; height: 46vh; }
  .choice-floor { top: 56%; width: 94vw; height: 60px; }
  .choice-arrow { top: 49%; width: 42px; height: 42px; }
  .choice-arrow--prev { left: 14px; }
  .choice-arrow--next { right: 14px; }
  .choice-info { left: 16px; right: 16px; bottom: 64px; width: auto; }
  .choice-info h3 { max-width: 12ch; font-size: clamp(1.75rem, 7.9vw, 2.5rem); }
  .choice-cta { margin-top: 18px; font-size: .57rem; }
  .choice-dots { right: 12px; bottom: 18px; }
}

/* ============================================================
   WEJŚCIE HERO — po zejściu loadera.
   Stan wyjściowy jest uzbrajany klasą .intro na <html>, którą dokłada skrypt.
   Bez niej hero po prostu stoi widoczne — gdyby stan „ukryty" siedział
   w arkuszu na stałe, awaria skryptu zostawiłaby pustą stronę.
   ============================================================ */
html.intro .nav { opacity: 0; transform: translateY(-14px); }
html.intro .hero-bg { transform: scale(1.16); }
html.intro .hero-find { opacity: 0; transform: translateY(26px); filter: blur(7px); }
html.intro .hf-msg { opacity: 0; }
html.intro .hero-tag { opacity: 0; transform: translateY(12px); }
html.intro .hero-brands .brand-strip-item { opacity: 0; transform: translateY(14px); filter: blur(4px); }

/* Słowa nagłówka wyjeżdżają spod maski — stąd dwa spany: zewnętrzny przycina,
   wewnętrzny się przesuwa. Sama przezroczystość dałaby zwykłe „pojawienie się",
   a nie wrażenie, że tekst wchodzi w kadr. */
.hero-content h1 .hwm { display: inline-block; overflow: hidden; vertical-align: bottom; padding-bottom: .06em; }
.hero-content h1 .hw { display: inline-block; }
html.intro .hero-content h1 .hw { transform: translateY(1.1em); }

html.intro.intro-go .nav {
  opacity: 1; transform: none;
  transition: opacity .9s ease .18s, transform 1s cubic-bezier(.16,.86,.22,1) .18s,
              background .35s, border-color .35s;
}
html.intro.intro-go .hero-bg { transform: none; transition: transform 2.4s cubic-bezier(.16,.84,.24,1); }
html.intro.intro-go .hero-content h1 .hw {
  transform: none;
  transition: transform 1.15s cubic-bezier(.16,.86,.22,1);
  transition-delay: calc(.1s + var(--i, 0) * 70ms);
}
/* Opóźnienia i czasy zejścia przezroczystości są krótsze niż w pierwotnej
   choreografii (.5 s + .9 s): przeglądarka liczy największe malowanie (LCP)
   dopiero wtedy, gdy element dojedzie do pełnej widoczności, więc każda
   dziesiąta sekundy fade'u wchodzi wprost do wyniku strony. Pomiar na
   telefonie: hasło hero z 2,3 s zeszło pod 1,6 s, a wjazd dalej wygląda
   jak wjazd; wysuwanie nagłówka (transform) zostaje w dawnym tempie. */
html.intro.intro-go .hero-find {
  opacity: 1; transform: none; filter: none;
  transition: opacity .6s ease .35s, transform .85s cubic-bezier(.16,.86,.22,1) .35s, filter .6s ease .35s;
}
html.intro.intro-go .hf-msg { opacity: 1; transition: opacity .6s ease .5s; }
/* Hasło: także przesunięcie krótsze (0,6 s), bo przeglądarka zgłasza LCP
   dopiero, gdy element przestaje się ruszać; przy 1 s wychodziło 1,85 s. */
html.intro.intro-go .hero-tag {
  opacity: 1; transform: none;
  transition: opacity .5s ease .2s, transform .6s cubic-bezier(.16,.86,.22,1) .2s;
}
html.intro.intro-go.brands-revealed .hero-brands .brand-strip-item {
  opacity: 1;
  transform: none;
  filter: none;
  transition:
    opacity .7s ease,
    transform .8s cubic-bezier(.16,.86,.22,1),
    filter .7s ease;
  transition-delay: calc(var(--i, 0) * 45ms);
}

/* ============================================================
   ODSŁANIANIE GRUPOWE (.rvg)
   Obserwowany jest kontener, a dzieci wchodzą kaskadą z --i. Dzięki temu
   kaskada rusza raz i idzie od góry do dołu, zamiast odpalać się kawałkami
   w miarę wjeżdżania kolejnych wierszy w kadr.
   ============================================================ */
.rvg > * {
  opacity: 0;
  transform: translateY(28px);
  filter: blur(6px);
  transition: opacity .95s ease, transform 1.05s cubic-bezier(.16,.84,.24,1), filter .95s ease;
  transition-delay: calc(var(--i, 0) * 110ms);
}
.rvg.in > * { opacity: 1; transform: none; filter: none; }
/* Grupa widoczna od pierwszego ekranu (klasę dokłada revealObserver
   w shared.js): krótsze zejście i gęstsza kaskada, bo tu nikt nie czeka
   na przewinięcie, a przeglądarka mierzy LCP dopiero przy pełnej
   widoczności. Kolejność czasów odpowiada liście transition wyżej. */
.rvg.in-start > * {
  transition-duration: .55s, .7s, .55s;
  transition-delay: calc(var(--i, 0) * 70ms);
}

/* ============================================================
   DRIVE STORY — filmowa przesłona sterowana przewijaniem
   ============================================================ */
.drive-story {
  position: relative;
  height: 360svh;
  background: #050506;
  color: #fff;
}
.drive-story-pin {
  position: sticky;
  top: 0;
  height: 100svh;
  min-height: 620px;
  overflow: clip;
  isolation: isolate;
  background: #050506;
}
.drive-story-media {
  position: absolute;
  inset: 0;
  overflow: hidden;
  clip-path: inset(14% 23% 14% 23% round 2px);
  background: #111;
  will-change: clip-path;
}
.drive-film {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transform: scale(1.07);
  will-change: transform;
}
.drive-story-vignette {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(0,0,0,.5), transparent 30%, transparent 58%, rgba(0,0,0,.74)),
    linear-gradient(90deg, rgba(0,0,0,.72), transparent 54%);
}
.drive-story-out {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  background: #000;
  opacity: 0;
  will-change: opacity;
}
.drive-story-intro {
  position: absolute;
  z-index: 4;
  inset: 0;
  display: grid;
  place-content: center;
  width: min(1380px, 92vw);
  margin: auto;
  text-align: center;
  pointer-events: none;
  will-change: transform, opacity;
}
.drive-story-intro p {
  margin: 0 0 22px;
  font-size: .66rem;
  font-weight: 500;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: rgba(255,255,255,.66);
}
.drive-story-intro h2 {
  font-size: clamp(2.7rem, 7vw, 7rem);
  line-height: .91;
  letter-spacing: -.035em;
  text-shadow: 0 3px 40px rgba(0,0,0,.35);
}
.drive-story-intro h2 span {
  color: transparent;
  -webkit-text-stroke: 1px rgba(255,255,255,.74);
}
.drive-story-copy {
  position: absolute;
  z-index: 4;
  /* Ta sama oś co logo w pełnoszerokiej nawigacji. */
  left: clamp(20px, 3.2vw, 48px);
  bottom: clamp(76px, 10vh, 118px);
  width: min(610px, 48vw);
  min-height: 292px;
  pointer-events: none;
  opacity: 0;
  transform: translateY(18px);
  will-change: transform, opacity;
}
.drive-copy {
  position: absolute;
  inset: auto 0 0;
  opacity: 0;
  transform: translateY(20px);
  filter: blur(5px);
  pointer-events: none;
  transition: opacity .48s ease, transform .62s cubic-bezier(.23,1,.32,1), filter .48s ease;
}
.drive-copy.is-active {
  opacity: 1;
  transform: none;
  filter: none;
  pointer-events: auto;
}
.drive-kicker {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 22px;
  color: rgba(255,255,255,.7);
  font-size: .65rem;
  font-weight: 500;
  letter-spacing: .26em;
  text-transform: uppercase;
}
.drive-kicker span { color: #fff; font-variant-numeric: tabular-nums; }
.drive-kicker::before { content: ""; width: 36px; height: 1px; background: var(--red2); }
.drive-copy h3 {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(2.25rem, 5.4vw, 5.2rem);
  font-weight: 500;
  line-height: .95;
  letter-spacing: -.035em;
  text-transform: uppercase;
}
.drive-copy > p:not(.drive-kicker) {
  max-width: 42ch;
  margin: 22px 0 0;
  color: rgba(255,255,255,.72);
  font-size: clamp(.9rem, 1.1vw, 1.02rem);
  line-height: 1.55;
}
.drive-film-cta {
  width: fit-content;
  display: inline-flex;
  align-items: center;
  gap: 18px;
  margin-top: 28px;
  padding-bottom: 7px;
  border-bottom: 1px solid rgba(255,255,255,.48);
  color: #fff;
  font-size: .75rem;
  font-weight: 500;
  letter-spacing: .18em;
  text-transform: uppercase;
  pointer-events: auto;
  transition: border-color .2s ease, gap .25s cubic-bezier(.23,1,.32,1);
}
@media (hover: hover) and (pointer: fine) {
  .drive-film-cta:hover { gap: 24px; border-color: #fff; }
}
.drive-story-ui {
  position: absolute;
  z-index: 5;
  left: clamp(20px, 3.2vw, 48px);
  right: clamp(20px, 3.2vw, 48px);
  bottom: 34px;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 20px;
  color: rgba(255,255,255,.55);
  font-size: .6rem;
  font-weight: 500;
  letter-spacing: .22em;
  text-transform: uppercase;
  opacity: 0;
}
.drive-story-ui i { height: 1px; overflow: hidden; background: rgba(255,255,255,.22); }
.drive-story-ui i b {
  display: block;
  width: 100%;
  height: 100%;
  background: #fff;
  transform: scaleX(0);
  transform-origin: left;
}
.drive-story-ui em { min-width: 56px; font-style: normal; font-variant-numeric: tabular-nums; text-align: right; }

/* ============================================================
   FEATURED CARS — redakcyjny podgląd kolekcji
   ============================================================ */
.featured {
  position: relative;
  overflow: clip;
  padding-bottom: clamp(120px, 18vh, 210px);
  background: #000;
  color: #f5f5f3;
}
.featured-head {
  min-height: 86svh;
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(260px, .55fr);
  grid-template-rows: auto auto;
  align-content: center;
  column-gap: clamp(48px, 8vw, 140px);
  padding: clamp(110px, 15vh, 170px) clamp(20px, 3.2vw, 48px);
}
.featured-head > p {
  grid-column: 1 / -1;
  margin: 0 0 clamp(28px, 5vh, 54px);
  color: #74767b;
  font-size: .62rem;
  font-weight: 600;
  letter-spacing: .24em;
  text-transform: uppercase;
}
.featured-head > p::before {
  content: "";
  display: inline-block;
  width: 5px; height: 5px;
  margin: 0 11px 1px 0;
  border-radius: 50%;
  background: var(--red2);
}
.featured-head h2 {
  margin: 0;
  font-size: clamp(5.5rem, 12vw, 12rem);
  font-weight: 400;
  letter-spacing: -.065em;
  line-height: .76;
  text-transform: uppercase;
}
.featured-head h2 span {
  color: rgba(255,255,255,.035);
  -webkit-text-stroke: 1px rgba(255,255,255,.28);
}
.featured-lead {
  align-self: end;
  max-width: 29rem;
  padding-bottom: .65em;
}
.featured-lead > p {
  max-width: 36ch;
  margin: 0;
  color: rgba(255,255,255,.56);
  font-size: .84rem;
  line-height: 1.65;
}
.featured-lead > a {
  display: inline-flex;
  align-items: center;
  gap: 16px;
  margin-top: 28px;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(255,255,255,.32);
  font-size: .63rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  transition: gap 240ms cubic-bezier(.23,1,.32,1), border-color 240ms ease;
}
.featured-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr);
  gap: clamp(14px, 1.7vw, 26px);
  padding-inline: clamp(20px, 3.2vw, 48px);
}
.featured-card {
  position: relative;
  min-width: 0;
  height: min(74svh, 740px);
  overflow: hidden;
  isolation: isolate;
  background: #0b0b0c;
  transform: translateZ(0);
}
.featured-card--hero {
  grid-column: 1 / -1;
  height: min(84svh, 860px);
}
.featured-card figure {
  position: absolute; inset: 0;
  margin: 0;
  overflow: hidden;
  transition: transform 800ms cubic-bezier(.16,1,.3,1);
}
.featured-card img { width: 100%; height: 100%; object-fit: cover; }
.featured-card--hero img { object-position: center 58%; }
.featured-card--lambo img { object-position: 55% center; }
.featured-card--m2 img { object-position: 53% center; }
.featured-shade {
  position: absolute; inset: 0; z-index: 1;
  background:
    linear-gradient(180deg, rgba(0,0,0,.2), transparent 36%, rgba(0,0,0,.83) 100%),
    linear-gradient(90deg, rgba(0,0,0,.32), transparent 52%);
  pointer-events: none;
}
.featured-card-top {
  position: absolute;
  z-index: 2;
  top: clamp(20px, 2.5vw, 34px);
  left: clamp(20px, 2.5vw, 34px);
  color: rgba(255,255,255,.66);
  font-size: .58rem;
  font-weight: 600;
  letter-spacing: .2em;
  text-transform: uppercase;
}
.featured-card-copy {
  position: absolute;
  z-index: 2;
  left: clamp(20px, 2.5vw, 38px);
  right: clamp(20px, 2.5vw, 38px);
  bottom: clamp(22px, 3vw, 42px);
  display: grid;
  justify-items: start;
}
.featured-card-copy small {
  margin-bottom: 9px;
  color: rgba(255,255,255,.62);
  font-size: .62rem;
  font-weight: 600;
  letter-spacing: .2em;
  text-transform: uppercase;
}
.featured-card-copy strong {
  max-width: 15ch;
  font-size: clamp(2.15rem, 4vw, 4.8rem);
  font-weight: 400;
  letter-spacing: -.045em;
  line-height: .94;
  text-transform: uppercase;
  text-wrap: balance;
}
.featured-card:not(.featured-card--hero) .featured-card-copy strong { font-size: clamp(1.85rem, 3.2vw, 3.7rem); }
.featured-card-copy em {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-top: 20px;
  font-size: .6rem;
  font-style: normal;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.featured-card-copy b { font-size: .85rem; font-weight: 400; transition: transform 220ms cubic-bezier(.23,1,.32,1); }
.featured-card:active { transform: scale(.997); }
@media (hover: hover) and (pointer: fine) {
  .featured-card:hover figure { transform: scale(1.018); }
  .featured-card:hover .featured-card-copy b { transform: translate(3px, -3px); }
  .featured-lead > a:hover { gap: 22px; border-color: #fff; }
}
@supports (animation-timeline: view()) {
  .featured-card {
    animation: featured-reveal linear both;
    animation-timeline: view(block);
    animation-range: entry 4% cover 38%;
  }
  .featured-card img {
    animation: featured-image linear both;
    animation-timeline: view(block);
    animation-range: entry 0% cover 48%;
  }
  @keyframes featured-reveal {
    from { clip-path: inset(0 0 16% 0); opacity: .28; }
    to { clip-path: inset(0); opacity: 1; }
  }
  @keyframes featured-image {
    from { transform: scale(1.075); }
    to { transform: scale(1); }
  }
}

@media (max-width: 900px) {
  .featured-head {
    min-height: 78svh;
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto;
    align-content: center;
  }
  .featured-head > p { grid-column: auto; }
  .featured-lead { margin-top: clamp(38px, 7vh, 68px); padding: 0; }
  .featured-grid { grid-template-columns: 1fr; }
  .featured-card--hero { grid-column: auto; }
}
@media (max-width: 720px) {
  .featured { padding-bottom: 110px; }
  .featured-head {
    min-height: 76svh;
    padding: 100px 16px 76px;
  }
  .featured-head > p { margin-bottom: 28px; font-size: .55rem; }
  .featured-head h2 { font-size: clamp(4.6rem, 22vw, 7.2rem); line-height: .78; }
  .featured-lead { margin-top: 48px; }
  .featured-lead > p { max-width: 32ch; font-size: .76rem; }
  .featured-lead > a { margin-top: 22px; font-size: .57rem; }
  .featured-grid { gap: 18px; padding-inline: 16px; }
  .featured-card,
  .featured-card--hero { height: max(520px, 66svh); }
  .featured-card--hero img { object-position: 57% center; }
  .featured-card--lambo img { object-position: 52% center; }
  .featured-card--m2 img { object-position: 56% center; }
  .featured-card-copy strong,
  .featured-card:not(.featured-card--hero) .featured-card-copy strong { font-size: clamp(2rem, 10vw, 3rem); }
  .featured-card-top { top: 20px; left: 20px; font-size: .53rem; }
  .featured-card-copy { left: 20px; right: 20px; bottom: 24px; }
  .featured-card-copy em { margin-top: 16px; font-size: .55rem; }
}

/* ============================================================
   OFC PHILOSOPHY — starszy układ
   ============================================================ */
.ofc-philosophy {
  position: relative;
  z-index: 2;
  overflow: clip;
  /* ta sama czerń co pasy sąsiadów (#020203); wcześniejsze #000 różniło się
     odcieniem i na styku sekcji był widoczny szew */
  background: #020203;
  color: #f5f5f4;
}
.ph-label {
  margin: 0;
  color: rgba(255,255,255,.56);
  font-size: .62rem;
  font-weight: 500;
  letter-spacing: .28em;
  text-transform: uppercase;
}
.ph-art { position: relative; padding-top: 7svh; }
.why-services {
  position: relative;
  width: calc(100% - 24px);
  min-height: max(720px, 92svh);
  display: grid;
  grid-template-columns: minmax(0, .8fr) minmax(560px, 1.2fr);
  margin-inline: auto;
  overflow: hidden;
  border-radius: 2px;
  background: #242526;
  scroll-margin-top: var(--nav-h);
  isolation: isolate;
}
.why-services-intro {
  position: relative;
  z-index: 2;
  min-width: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
/* Liczby stoją przy dolnej krawędzi kolumny, wyrównane do lewej z tytułem;
   pchnięte tam przez margin-top: auto, więc rosnąca kolumna tekstu nigdy ich
   nie zepchnie poza kadr. */
.why-services-intro .ph-stats {
  width: min(88%, 600px);
  margin-top: auto;
  padding: clamp(36px, 4.5vw, 64px) 0 clamp(44px, 5.5vw, 84px) clamp(24px, 3.2vw, 52px);
  gap: clamp(16px, 2.2vw, 40px);
  text-align: left;
}
.why-services-intro .ph-stats > div { justify-items: start; }
.why-services-intro .ph-stats strong { justify-content: flex-start; }
.why-services-bg,
.why-services-shade { position: absolute; inset: 0; }
.why-services-bg {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* wycinek dobrany pomiarem: najciemniejsza część kadru ląduje pod panelem */
  object-position: 35% 68%;
  /* Powolny dojazd kadru przy wejściu sekcji — ruch kończy się na docelowej
     skali 1.025, więc po animacji obraz stoi tam, gdzie stał wcześniej. */
  transform: scale(1.085);
  transition: transform 2.4s cubic-bezier(.16,.84,.24,1);
}
.why-services.in .why-services-bg { transform: scale(1.025); }
.why-services-shade {
  z-index: 1;
  background:
    /* Przygaszenie dobrane pomiarem pod to zdjęcie — wnętrze McLarena jest
       jaśniejsze od poprzedniego kadru, a prawa strona, gdzie stoi panel,
       najjaśniejsza. Przy słabszym przyciemnieniu tytuły wierszy schodziły
       do 3,65:1 przy progu 4,5. */
    linear-gradient(180deg, rgba(15,16,17,.56), rgba(15,16,17,.4) 48%, rgba(18,19,20,.7) 100%),
    linear-gradient(90deg, rgba(17,18,19,.94), rgba(17,18,19,.74) 40%, rgba(17,18,19,.6) 100%);
}
.why-services-copy {
  position: relative;
  z-index: 2;
  width: min(88%, 600px);
  padding: clamp(62px, 7vw, 112px) 0 0 clamp(24px, 3.2vw, 52px);
}
.why-services-copy h2 {
  /* Zestrojone z hero (.hero-content h1): ten sam limit rozmiaru ORAZ ta sama
     grubość, światło i interlinia z .display. Przy 400 i świetle -.045em ten sam
     stopień pisma czytał się wyraźnie mniej, mimo identycznych pikseli.
     Człon vw jest mniejszy niż w hero, bo tekst siedzi w wąskiej kolumnie,
     a nie na całej szerokości okna. */
  max-width: 21ch;
  margin: 0;
  color: rgba(250,250,248,.94);
  font-size: clamp(1.9rem, 3.45vw, 3.1rem);
}
.why-services-lead {
  max-width: 38ch;
  margin: clamp(28px, 3vw, 46px) 0 0;
  color: rgba(255,255,255,.62);
  font-size: clamp(.82rem, 1.1vw, 1.05rem);
  line-height: 1.6;
}
.why-panel {
  /* Jedno źródło prawdy dla siatki wiersza. Tytuł i opis muszą stać na tej samej
     lewej krawędzi, więc --wp-text liczy się z tych samych wartości co kolumny,
     zamiast być osobno zgadywanym clampem. */
  --wp-pad: clamp(16px, 1.8vw, 26px);
  --wp-no: clamp(52px, 5vw, 72px);
  --wp-gap: clamp(12px, 1vw, 16px);
  --wp-text: calc(var(--wp-pad) + var(--wp-no) + var(--wp-gap));
  position: relative;
  z-index: 2;
  width: min(calc(100% - clamp(24px, 2.5vw, 42px)), 900px);
  aspect-ratio: 528 / 434;
  /* Poniżej ~1180px sama proporcja daje wiersze za niskie na tytuł plus opis. */
  min-height: 620px;
  min-width: 0;
  display: grid;
  grid-template-rows: repeat(4, minmax(0, 1fr));
  align-self: center;
  justify-self: center;
  border-left: 1px solid rgba(255,255,255,.09);
  background: transparent;
}
.why-panel-item {
  position: relative;
  min-width: 0;
  overflow: hidden;
  padding: 0;
  border: 0;
  color: rgba(255,255,255,.82);
  background: transparent;
  text-align: left;
  cursor: pointer;
  transition: background 200ms ease;
}
/* Kreska rozdzielająca jako pseudoelement, nie border — tylko wtedy da się ją
   narysować od lewej do prawej przy wejściu sekcji. */
.why-panel-item::before {
  content: "";
  position: absolute;
  z-index: 3;
  right: 0;
  bottom: 0;
  left: 0;
  height: 1px;
  background: rgba(255,255,255,.11);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 1s cubic-bezier(.16,.84,.24,1);
  transition-delay: calc(var(--i, 0) * 130ms);
  pointer-events: none;
}
.why-panel-item:last-child::before { content: none; }
.why-panel.in .why-panel-item::before { transform: scaleX(1); }
.why-panel-item > img,
.why-panel-item::after { position: absolute; inset: 0; }
.why-panel-item > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transform: scale(1.035);
  transition: opacity 220ms ease, transform 460ms cubic-bezier(.23,1,.32,1);
}
.why-panel-item::after {
  content: "";
  z-index: 1;
  opacity: 0;
  background: linear-gradient(90deg, rgba(11,12,13,.9), rgba(11,12,13,.64) 62%, rgba(11,12,13,.78));
  transition: opacity 220ms ease;
}
.why-panel-top {
  position: absolute;
  z-index: 2;
  top: 50%;
  right: var(--wp-pad);
  left: var(--wp-pad);
  display: grid;
  grid-template-columns: var(--wp-no) minmax(0, 1fr);
  align-items: center;
  gap: var(--wp-gap);
  transform: translateY(-50%);
  /* Wejście idzie przez `translate`, bo `transform` trzyma wyśrodkowanie wiersza
     i przesuw stanu aktywnego. Obie właściwości składają się ze sobą. */
  opacity: 0;
  translate: 0 14px;
  transition: transform 240ms cubic-bezier(.23,1,.32,1),
              opacity .85s ease,
              translate .95s cubic-bezier(.16,.84,.24,1);
  transition-delay: 0s,
                    calc(140ms + var(--i, 0) * 130ms),
                    calc(140ms + var(--i, 0) * 130ms);
}
.why-panel.in .why-panel-top { opacity: 1; translate: 0 0; }
.why-panel-no {
  color: rgba(255,255,255,.76);
  font-size: clamp(1.32rem, 1.54vw, 1.63rem);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}
.why-panel-top strong {
  min-width: 0;
  font-size: clamp(1.32rem, 1.6vw, 1.68rem);
  font-weight: 400;
  letter-spacing: -.025em;
  line-height: 1.2;
}
.why-panel-description {
  position: absolute;
  z-index: 2;
  right: clamp(64px, 5.5vw, 86px);
  bottom: clamp(14px, 1.5vh, 20px);
  left: var(--wp-text);
  max-width: 56ch;
  color: rgba(255,255,255,.78);
  font-size: clamp(.7rem, .78vw, .8rem);
  line-height: 1.5;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 200ms ease, transform 240ms cubic-bezier(.23,1,.32,1);
}
.why-panel-item.is-active,
.why-panel-item[aria-expanded="true"] { background: rgba(7,8,9,.28); }
.why-panel-item.is-active > img,
.why-panel-item[aria-expanded="true"] > img { opacity: .68; transform: scale(1); }
.why-panel-item.is-active::after,
.why-panel-item[aria-expanded="true"]::after { opacity: 1; }
.why-panel-item.is-active .why-panel-top,
.why-panel-item[aria-expanded="true"] .why-panel-top { transform: translateY(calc(-50% - 30px)); }
.why-panel-item.is-active .why-panel-description,
.why-panel-item[aria-expanded="true"] .why-panel-description { opacity: 1; transform: none; }
.why-panel-item:focus-visible { outline: 2px solid rgba(255,255,255,.9); outline-offset: -3px; }
.ph-stats {
  width: min(820px, calc(100% - 40px));
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(30px, 6vw, 86px);
  margin-top: clamp(58px, 7vh, 78px);
  text-align: center;
}
.ph-stats > div {
  display: grid;
  /* start, nie stretch: kolumny mają wspólną wysokość, a wiersze auto
     rozpychały się w tej z krótszym podpisem, przez co „lat doświadczenia"
     zaczynało się 7 px niżej niż sąsiedzi */
  align-content: start;
  gap: 9px;
  min-width: 0;
  justify-items: center;
}
.ph-stats strong {
  display: flex;
  align-items: baseline;
  color: #fff;
  justify-content: center;
  font-size: clamp(1.9rem, 2.55vw, 2.75rem);
  font-weight: 400;
  line-height: 1;
  letter-spacing: -.045em;
  font-variant-numeric: tabular-nums;
}
.ph-stats strong i { font-style: normal; font-weight: 400; }
.ph-stats p {
  margin: 0;
  color: rgba(255,255,255,.54);
  font-size: clamp(.64rem, .72vw, .72rem);
  letter-spacing: .025em;
  line-height: 1.35;
}

/* ============================================================
   ANSWERS — jasny, redakcyjny kontrapunkt po kinowym kadrze
   ============================================================ */
.answers {
  position: relative;
  z-index: 2;
  padding-block: clamp(100px, 13vw, 190px);
  background: #efeee9;
  color: #101011;
}
.answers-grid {
  display: grid;
  grid-template-columns: minmax(300px, .82fr) minmax(500px, 1.18fr);
  gap: clamp(70px, 10vw, 155px);
  align-items: start;
}
.answers-head { position: sticky; top: 130px; }
.answers-index {
  margin: 0 0 clamp(46px, 7vw, 90px);
  color: #6d6b68;
  font-size: .65rem;
  font-weight: 600;
  letter-spacing: .26em;
  text-transform: uppercase;
}
.answers-head h2 {
  font-size: clamp(3rem, 6.4vw, 6.4rem);
  line-height: .88;
  letter-spacing: -.045em;
}
.answers-head > p:not(.answers-index) {
  max-width: 34ch;
  margin: 28px 0 0;
  color: #65635f;
  font-size: .94rem;
  line-height: 1.55;
}
.answers-contact {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-top: 44px;
  padding-bottom: 5px;
  border-bottom: 1px solid rgba(16,16,17,.35);
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  transition: border-color 180ms ease, color 180ms ease;
}
.answers-contact span { color: var(--red); }
.answers-list { border-bottom: 1px solid rgba(16,16,17,.26); }
.answers-list details { border-top: 1px solid rgba(16,16,17,.26); }
.answers-list summary {
  list-style: none;
  cursor: pointer;
  display: grid;
  grid-template-columns: 36px 1fr 24px;
  gap: 18px;
  align-items: center;
  padding: 29px 0;
  font-size: clamp(1.02rem, 1.5vw, 1.3rem);
  font-weight: 500;
  letter-spacing: -.012em;
}
.answers-list summary::-webkit-details-marker { display: none; }
.answers-list summary span {
  color: #8b8984;
  font-size: .62rem;
  font-variant-numeric: tabular-nums;
  letter-spacing: .14em;
}
.answers-list summary i {
  position: relative;
  width: 20px;
  height: 20px;
  transition: transform 240ms cubic-bezier(.23,1,.32,1);
}
.answers-list summary i::before,
.answers-list summary i::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 14px;
  height: 1px;
  background: currentColor;
  transform: translate(-50%, -50%);
}
.answers-list summary i::after { transform: translate(-50%, -50%) rotate(90deg); }
.answers-list details[open] summary i { transform: rotate(45deg); }
.answers-list .faq-body {
  max-width: 58ch;
  margin-left: 54px;
  padding: 0 36px 30px 0;
  color: #65635f;
  font-size: .9rem;
  line-height: 1.65;
}
@supports (interpolate-size: allow-keywords) {
  .answers-list details::details-content {
    block-size: 0;
    overflow: hidden;
    transition: block-size .45s cubic-bezier(.23,1,.32,1), content-visibility .45s allow-discrete;
  }
  .answers-list details[open]::details-content { block-size: auto; }
}

/* ============================================================
   FINAŁ — zaproszenie nad kadrem (dziś tylko strona Audi RS5)
   Nagłówek po lewej, zdanie z przyciskiem po prawej, a pod spodem kadr
   wpuszczony w to samo wcięcie co treść stopki (2,6vw). Strona miasta
   miała tu film, a potem finał-wizytówkę; dziś nie ma na dole ani jednego,
   ani drugiego, więc ten układ niesie już tylko stronę RS5 z jej zdjęciem.
   ============================================================ */
.final-drive { padding: clamp(56px, 7vw, 104px) 0 0; background: #020203; }
.final-drive-copy {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(20px, 3vw, 48px);
  align-items: start;
  padding-inline: 2.6vw;
  margin-bottom: clamp(26px, 3.4vw, 52px);
}
.final-drive-copy h2 {
  max-width: 16ch;
  margin: 0;
  font-size: clamp(1.5rem, 3.2vw, 2.7rem);
  color: rgba(247,247,245,.96);
  text-wrap: balance;
}
/* Zdanie i przycisk stoją w jednej kolumnie po prawej — to jeden element
   kaskady odsłaniania (--i), a nie dwa, więc wchodzą razem. */
.final-drive-obok {
  display: grid;
  justify-items: start;
  gap: clamp(14px, 1.8vw, 26px);
  max-width: 42ch;
}
.final-drive-card {
  position: relative;
  margin-inline: 2.6vw;
  min-height: clamp(400px, 62svh, 760px);
  overflow: clip;
  /* czarne wypełnienie zanim doładuje się kadr — na ciemnym serwisie nie mruga */
  background: #000;
}
.final-drive-card > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 52%;
}
/* Słowa wyjeżdżają spod maski — ten sam ruch co w hero, tylko wyzwalany
   wejściem sekcji w kadr, a nie zdjęciem ekranu ładowania. Klasę dokłada
   skrypt po rozbiciu nagłówka na słowa; bez skryptu zostaje zwykłe
   odsłonięcie grupy, więc tekst nigdy nie zostaje niewidoczny. */
.final-drive-copy h2.hw-split { opacity: 1; transform: none; filter: none; }
.final-drive-copy h2 .hwm { display: inline-block; overflow: hidden; vertical-align: bottom; padding-bottom: .06em; }
.final-drive-copy h2 .hw {
  display: inline-block;
  transform: translateY(1.1em);
  transition: transform 1.15s cubic-bezier(.16,.86,.22,1);
  transition-delay: calc(var(--i, 0) * 70ms);
}
.rvg.in .final-drive-copy h2 .hw,
.final-drive-copy.rvg.in h2 .hw { transform: none; }
.final-drive-lead {
  margin: 0;
  color: rgba(255,255,255,.78);
  font-size: clamp(.85rem, .95vw, 1rem);
  line-height: 1.62;
}
.final-drive-cta { margin: 0; }
/* Stopka pod filmem: kreska nad jej treścią jest wcięta tak samo jak kadr,
   zamiast iść przez całą szerokość ekranu — inaczej film wyglądałby na
   podklejony pod obcy pas. Kreskę niesie shell, któremu wcięcie przechodzi
   z dopełnienia na margines (treść zostaje w tym samym miejscu, ale krawędź
   elementu — a z nią kreska — zaczyna się przy treści). Podwójna klasa, bo
   .footer--dark ustawia własną kreskę dalej w pliku i przy równej wadze
   wygrywałby kolejnością. */
.footer--dark.footer--film {
  border-top: 0;
  /* dół strony domyka wielki znak marki: zero dopełnienia od dołu, żeby
     litery siedziały tuż przy krawędzi okna; overflow chowa ewentualną
     nadwyżkę szerokości napisu bez poziomego paska przewijania */
  padding-bottom: 0;
  overflow: hidden;
}
.footer--film .footer-shell {
  width: auto;
  margin-inline: 2.6vw;
  padding-inline: 0;
  border-top: 1px solid var(--line);
  padding-top: clamp(30px, 3.4vw, 54px);
}
@media (hover: hover) and (pointer: fine) {
  .answers-contact:hover { color: var(--red); border-color: var(--red); }
  .answers-list summary:hover { color: var(--red); }
}

/* ============================================================
   ROZDZIAŁY — pełnoekranowe kadry pod flotą.
   Zdjęcie jedzie paralaksą pod przewijanie, osią czasu w CSS. Tutaj oddanie
   ruchu kompozytorowi jest właściwe (inaczej niż w szynie floty): paralaksa
   DZIELI drogę przewijania mniej więcej siedmiokrotnie, więc nierówności
   gestu są tłumione, a nie wzmacniane.
   ============================================================ */
.chap {
  position: relative;
  min-height: max(620px, 100svh);
  display: flex; align-items: flex-end;
  overflow: clip;
  padding-block: clamp(80px, 12vh, 150px);
  background: #000;
}
.chap-media { position: absolute; inset: 0; overflow: clip; }
.chap-media img {
  width: 100%; height: 100%;
  object-fit: cover;
  /* zapas na przesuw; zostaje też jako stan bez wsparcia dla osi czasu */
  transform: scale(1.14);
}
@supports (animation-timeline: view()) {
  .chap-media img {
    animation: chap-parallax linear both;
    animation-timeline: view(block);
    animation-range: cover 0% cover 100%;
  }
  /* ±6,5% mieści się w 7% zapasu, który daje scale(1.14) — kadr nigdy nie
     odsłania krawędzi zdjęcia. Skala rośnie przez całą sekcję, więc do
     przesuwu dochodzi powolny najazd. */
  @keyframes chap-parallax {
    from { transform: translate3d(0, -6.5%, 0) scale(1.14); }
    to   { transform: translate3d(0,  6.5%, 0) scale(1.22); }
  }

  /* Treść dryfuje w PRZECIWNĄ stronę niż zdjęcie. To ta różnica prędkości —
     nie sam przesuw — daje wrażenie głębi: tekst i kadr są wtedy dwiema
     osobnymi płaszczyznami, a nie jedną naklejką. Zakres celowo mały,
     bo blok tekstu wjeżdżałby w jaśniejsze partie kadru. */
  .chap-inner, .closer-inner {
    animation: chap-drift linear both;
    animation-timeline: view(block);
    animation-range: cover 0% cover 100%;
  }
  /* Zakres jest niesymetryczny celowo. Wersja ±34 px unosiła tekst przy
     wychodzeniu sekcji z ciemnego pasa u dołu w jaśniejszą część kadru
     i kontrast spadał do 0,8 progu. Tutaj droga jest ta sama, ale koniec
     zatrzymuje się tuż nad położeniem spoczynkowym. */
  @keyframes chap-drift {
    from { transform: translate3d(0, 30px, 0); }
    to   { transform: translate3d(0, -6px, 0); }
  }
}

/* Góra i dół domykają się do czystej czerni, więc rozdziały wtapiają się
   w siebie i w czarne sekcje nad nimi — bez krechy na styku. */
.chap-shade {
  position: absolute; inset: 0;
  background:
    linear-gradient(180deg, #000 0%, rgba(0,0,0,.42) 14%, transparent 34%),
    linear-gradient(180deg, transparent 24%, rgba(0,0,0,.62) 52%, rgba(0,0,0,.9) 78%, #000 100%),
    linear-gradient(96deg, rgba(0,0,0,.9) 0%, rgba(0,0,0,.66) 26%, rgba(0,0,0,.24) 52%, transparent 74%);
}
.chap--right .chap-shade {
  background:
    linear-gradient(180deg, #000 0%, rgba(0,0,0,.42) 14%, transparent 34%),
    linear-gradient(180deg, transparent 24%, rgba(0,0,0,.62) 52%, rgba(0,0,0,.9) 78%, #000 100%),
    linear-gradient(264deg, rgba(0,0,0,.9) 0%, rgba(0,0,0,.66) 26%, rgba(0,0,0,.24) 52%, transparent 74%);
}
.chap-inner { position: relative; z-index: 2; }
.chap-copy { position: relative; max-width: 620px; }
.chap--right .chap-copy { margin-left: auto; text-align: right; }

/* Przyciemnienie pod tekstem siedzi w gradiencie CAŁEJ sekcji (.chap-shade),
   a nie w pudełku pod blokiem tekstu. Wersja z osobną poświatą pod .chap-copy
   rysowała widoczny prostokąt: gradient nie zdążał dojść do przezroczystości
   przed krawędzią swojego pudełka i było widać jaśniejszy kwadrat. */

.chap-no {
  display: flex; align-items: center; gap: 16px;
  margin: 0 0 24px;
  font-size: .68rem; font-weight: 500;
  letter-spacing: .3em; text-transform: uppercase;
  /* Nadpis leży na zdjęciu, więc NIE jest czerwony. Czerwień marki ma niską
     luminancję (#ff4a50) i na jasnym kadrze schodzi do 2,3:1 — poniżej progu
     czytelności dla drobnego tekstu. Akcent przenosimy na kreskę obok, bo
     to grafika, której próg kontrastu nie dotyczy. */
  color: #dfe2e6;
}
.chap--right .chap-no { justify-content: flex-end; }
.chap-no b { font-weight: 500; color: var(--ink); font-variant-numeric: tabular-nums; }
/* kreska dorysowuje się razem z kaskadą */
.chap-no i {
  flex: none; width: 54px; height: 1px;
  background: var(--red);
  transform: scaleX(0); transform-origin: left;
  transition: transform .9s cubic-bezier(.16,.84,.24,1) .3s;
}
.chap--right .chap-no i { transform-origin: right; }
.rvg.in .chap-no i { transform: scaleX(1); }

.chap-title {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(2rem, 5vw, 4rem);
  font-weight: 500;
  line-height: 1.02;
  letter-spacing: -.005em;
  text-transform: uppercase;
  text-wrap: balance;
}
.chap-text {
  margin: 24px 0 34px;
  max-width: 46ch;
  color: #c5c8cc;
  font-size: clamp(.95rem, 1.1vw, 1.05rem);
  line-height: 1.65;
}
.chap--right .chap-text { margin-left: auto; }

.chap-link {
  position: relative; display: inline-block;
  padding-bottom: 10px;
  font-size: .82rem; font-weight: 500;
  letter-spacing: .14em; text-transform: uppercase;
}
.chap-link span { display: inline-block; transition: transform .5s cubic-bezier(.16,.84,.24,1); }
.chap-link::after {
  content: ""; position: absolute; inset: auto 0 0 0;
  height: 2px; background: var(--red);
  transition: background .3s;
}
.chap-link:hover span { transform: translateX(7px); }
.chap-link:hover::after { background: var(--red2); }

/* ============================================================
   ZAMKNIĘCIE — ostatni kadr przed stopką
   ============================================================ */
.closer {
  position: relative;
  min-height: max(540px, 84svh);
  display: flex; align-items: center;
  overflow: clip;
  background: #000;
  padding-block: clamp(80px, 12vh, 150px);
  text-align: center;
}
.closer-shade {
  position: absolute; inset: 0;
  background:
    linear-gradient(180deg, #000 0%, rgba(0,0,0,.5) 16%, rgba(0,0,0,.34) 42%, rgba(0,0,0,.72) 82%, #000 100%),
    linear-gradient(rgba(0,0,0,.3), rgba(0,0,0,.3));
}
.closer-inner { position: relative; z-index: 2; }
/* ta sama poświata co pod tekstem rozdziałów — kadr o zmierzchu jest w środku
   jaśniejszy niż przy krawędziach i lead schodził do 4,3:1 */
.closer-inner::before {
  content: ""; position: absolute; z-index: -1; pointer-events: none;
  inset: -24% -10%;
  background: radial-gradient(72% 92% at 50% 46%,
    rgba(0,0,0,.74) 0%, rgba(0,0,0,.52) 46%, rgba(0,0,0,.18) 74%, transparent 92%);
}
.closer-inner h2 { font-size: clamp(1.9rem, 4.6vw, 3.4rem); }
.closer-inner .lead { margin: 18px auto 36px; max-width: 52ch; }
/* nadpis leży na zdjęciu, więc jasny zamiast czerwonego — z tego samego
   powodu co w rozdziałach (czerwień na jasnym kadrze schodzi do 1,8:1) */
.closer-inner .eyebrow { color: #dfe2e6; }
.closer-inner .eyebrow::before { background: var(--red); }

/* odznaka „Popularne" przy dodatkach na stronie auta */
.extra-pop {
  align-self: start;
  font-size: .6rem; letter-spacing: .16em; text-transform: uppercase;
  font-weight: 500;
  color: var(--amber); border: 1px solid rgba(245,165,36,.4);
  background: rgba(245,165,36,.08);
  padding: 3px 10px; border-radius: 99px;
}

/* ============================================================
   FAQ
   ============================================================ */
.faq-sec { background: var(--bg1); border-block: 1px solid var(--line); }
.faq { max-width: 720px; margin-inline: auto; display: grid; gap: 8px; }
/* Płynne rozwijanie <details>. Bez interpolate-size przeglądarka nie umie
   animować przejścia z 0 do auto i akordeon skacze — dlatego całość jest
   pod @supports, a starsze przeglądarki dostają zwykłe, natychmiastowe
   otwarcie zamiast zepsutej animacji. */
@supports (interpolate-size: allow-keywords) {
  html { interpolate-size: allow-keywords; }
  .faq details::details-content {
    block-size: 0;
    overflow: hidden;
    transition: block-size .45s cubic-bezier(.16,.84,.24,1), content-visibility .45s allow-discrete;
  }
  .faq details[open]::details-content { block-size: auto; }
}
.faq details {
  border-radius: 12px;
  overflow: hidden;
  transition: border-color .3s, background .3s;
}
.faq details:hover { border-color: rgba(255, 255, 255, .2); }
.faq details[open] { background: rgba(22, 22, 26, .62); }
.faq summary {
  list-style: none; cursor: pointer;
  padding: 14px 18px;
  display: flex; justify-content: space-between; align-items: center; gap: 14px;
  font-weight: 500;
  font-size: .88rem;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+";
  font-size: 1.05rem; font-weight: 400; color: var(--red2);
  line-height: 1;
  transition: transform .3s;
}
.faq details[open] summary::after { transform: rotate(45deg); }
.faq .faq-body { padding: 0 18px 16px; color: var(--dim); font-size: .82rem; }

/* ============================================================
   CTA BAND / FOOTER
   ============================================================ */

.footer { border-top: 1px solid var(--line); background: var(--bg1); padding: 64px 0 36px; }
.footer-brand .logo { font-size: 21px; margin-bottom: 22px; }
.footer-brand p { color: var(--dim); font-size: .88rem; max-width: 34ch; margin: 0; }
.footer h4 {
  font-size: .68rem; font-weight: 500;
  letter-spacing: .22em; text-transform: uppercase; color: var(--dim);
  margin: 0 0 16px;
}
.footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.footer ul a, .footer ul li { color: #d6d8db; font-size: .9rem; }
.footer ul a:hover { color: #fff; }
/* zastrzeżenie: serwis nie jest oficjalną stroną wypożyczalni */
.disclaimer {
  display: flex; align-items: flex-start; gap: 12px;
  margin-top: 40px; padding: 14px 18px;
  border: 1px solid rgba(255, 255, 255, .12);
  border-left: 2px solid var(--red);
  border-radius: 12px;
  background: rgba(255, 255, 255, .03);
  color: var(--dim);
  font-size: .78rem; line-height: 1.6;
}
.disclaimer svg { width: 16px; height: 16px; color: var(--red2); flex: none; margin-top: 2px; }
.disclaimer b { color: #d8dade; font-weight: 500; }
.footer .disclaimer + .footer-bottom { margin-top: 22px; }

.footer-bottom {
  margin-top: 46px; padding-top: 22px;
  border-top: 1px solid var(--line);
  display: flex; justify-content: space-between; align-items: center; gap: 14px; flex-wrap: wrap;
  color: var(--dim); font-size: .78rem;
}
.footer-bottom a { color: var(--dim); }
.footer-bottom a:hover { color: #fff; }

/* ---- pasek stopki na podstronach ----
   Wąski pasek pod treścią podstron niósł tylko wiersz © i garść dokumentów,
   przy czym każda strona miała inny zestaw: flota linkowała lokalizacje,
   regulamin nie linkował nic poza dokumentami. Teraz wszędzie stoi ten sam
   blok: pas przekierowań do reszty serwisu, pod nim prawa i dwa profile.
   Zerowanie kreski i marginesu robi ta klasa, a nie styl w atrybucie
   powtarzany przy każdej z trzydziestu stron. */
.footer-bottom--pelna {
  margin-top: 0; padding-top: 0; border-top: 0;
  flex-direction: column; align-items: stretch; gap: 20px;
}
/* Bez kropek rozdzielających: każda musiałaby siedzieć wewnątrz odnośnika
   (::after), a wtedy pole kliknięcia sięgałoby aż do sąsiada i na telefonie
   dawało trafienia w nie tę pozycję. Odstęp robi tę samą robotę. */
.footer-linki { display: flex; flex-wrap: wrap; gap: 2px 22px; }
.footer-linki a { display: inline-flex; align-items: center; min-height: 34px; }
.footer-dol {
  display: flex; flex-wrap: wrap; align-items: center;
  justify-content: space-between; gap: 14px;
}

/* ---- profile w mediach społecznościowych ----
   Firma ma dwa: Instagram i Facebook. Stoją w stopce każdej strony; na stronie
   miasta pod logo, na podstronach w wierszu z prawami, na ekranie wyboru
   miasta w pasku na dole. Kwadrat 40 px to cały cel dotyku, więc pole
   kliknięcia zgadza się z tym, co widać.

   Same znaki są rysunkami wpisanymi w HTML (Feather, licencja MIT), z obrysem
   w currentColor i z atrybutami width/height, a NIE maskami .ik z tego arkusza.
   Powód jest praktyczny: /css/* ma `stale-while-revalidate`, więc po wdrożeniu
   pierwsze wejście dostaje nowy HTML i arkusz z pamięci przeglądarki. Przy
   masce znaczyło to `--ik` bez wartości i `<svg>` bez rozmiaru, a taki rozlewa
   się na 100% szerokości rodzica i wypełnia kolorem tekstu; w stopce strony
   miasta wychodził z tego biały prostokąt na całą kolumnę (widziane na
   produkcji 07.09.2026). Rysunek w HTML nie zależy od wersji arkusza. */
/* Selektor z nazwą znacznika, nie samo `.social`: wyżej stoi `.footer ul`
   z `display: grid`, o tej samej swoistości co klasa z elementem, i bez tego
   wygrywa — profile ustawiały się jeden pod drugim przy prawej krawędzi. */
ul.social { list-style: none; display: flex; gap: 10px; margin: 0; padding: 0; }
.social-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px;
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 12px;
  color: #9a9da2;
  transition: color 180ms ease, border-color 180ms ease, background-color 180ms ease;
}
.social-btn .social-ico { width: 19px; height: 19px; }
@media (hover: hover) and (pointer: fine) {
  .social-btn:hover {
    color: #fff;
    border-color: rgba(255, 255, 255, .32);
    background: rgba(255, 255, 255, .05);
  }
}
/* W bloku marki wielkiej stopki profile idą pod wiersz praw, o krok dalej niż
   odstęp między samymi wierszami praw (18 px): mają czytać się jako osobna
   rzecz, a nie trzecia linijka wizytówki. */
.social--marka { margin-top: 34px; }

/* ---- stopka z wielkim znakiem marki ----
   Treść i napis idą poza kolumnę .container, bo znak ma sięgać krawędzi okna.
   Wcięcie boczne jest w `vw`, nie w clamp(): dzięki temu szerokość dostępna dla
   napisu jest stałym ułamkiem okna, a jeden rozmiar w `vw` wypełnia ją tak samo
   przy każdej szerokości. Przy wcięciu w pikselach napis wypełniałby kadr coraz
   ciaśniej im węższy ekran. */
.footer--dark { padding: clamp(60px, 6.5vw, 100px) 0 clamp(22px, 2.4vw, 40px); border-top: 1px solid var(--line); background: #020203; }
.footer-shell { width: 100%; padding-inline: 2.6vw; }
.footer-top {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: clamp(40px, 5vw, 110px);
  align-items: start;
}
.footer--dark .footer-brand .logo { font-size: 21px; }
.footer--dark .footer-brand p {
  max-width: 34ch;
  margin: 20px 0 0;
  color: var(--dim);
  font-size: .8rem;
  line-height: 1.7;
}
.footer-cols {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, auto));
  gap: clamp(30px, 4.4vw, 90px);
}
.footer-cols h4 {
  margin: 0 0 18px;
  color: #f2f2f0;
  font-size: .66rem;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
}
.footer-cols ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.footer-cols li,
.footer-cols a { color: #9a9da2; font-size: .82rem; }
/* godziny stoją niżej niż reszta kolumny — mniejszy odstęp między wierszami
   wiąże je w jeden blok zamiast dwóch osobnych pozycji */
.footer-cols .footer-hours { color: #7f8288; font-size: .76rem; }
.footer-cols .footer-hours + .footer-hours { margin-top: -5px; }
.footer-cols li:not(.footer-hours) + .footer-hours { margin-top: 4px; }
/* Kolumna „Serwis" ma osiem odnośników; w jednym słupku była dwa razy wyższa
   od sąsiednich i zostawiała obok siebie puste pole. Idzie więc w dwa słupki po
   cztery, wypełniane w dół, a nie w poprzek: kolejność czytania i tabulacji
   zostaje ta sama co w kodzie. Cztery wiersze to połowa listy; dopisanie
   dziewiątej pozycji wymaga poprawienia tej liczby. */
.footer-kol--para ul {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: repeat(4, auto);
  grid-auto-flow: column;
  column-gap: clamp(20px, 2.6vw, 44px);
}
.footer-cols a { transition: color 180ms ease; }
@media (hover: hover) and (pointer: fine) {
  .footer-cols a:hover { color: #fff; }
}
/* ---- wielki znak marki domykający stronę ----
   Napis od krawędzi do krawędzi, ale ledwo odróżnia się od tła — to faktura,
   nie treść (stąd aria-hidden w HTML). Rozmiar tylko w vw, bez górnej granicy
   w px — znak ma wypełniać całą szerokość przy każdym oknie. Litery są w
   całości widoczne: ciasny line-height dosuwa je do dolnej krawędzi strony,
   niczego nie przycinając. */
.footer-znak {
  margin-top: clamp(56px, 7vw, 120px);
  font-family: var(--font-display);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .01em;
  white-space: nowrap;
  text-align: center;
  line-height: .82;
  font-size: 12.1vw;
  color: rgba(255, 255, 255, .05);
  user-select: none;
}
/* ® wisi przy wersalikach jak w logotypach: mniejszy i podniesiony do linii
   wierzchołków, zamiast stać na linii pisma wielkości litery. */
.footer-znak-r { font-size: .3em; vertical-align: 1.45em; letter-spacing: 0; }
/* wiersz © pod logo w bloku marki; dwie linijki związane ciaśniej niż
   domyślny margines akapitu w .footer-brand */
.footer--dark .footer-brand .footer-prawa { margin-top: 18px; }
.footer--dark .footer-brand .footer-prawa + .footer-prawa { margin-top: 4px; }
/* ---- dokumenty: regulamin, polityka prywatności ---- */
.doc-page {
  padding: calc(var(--nav-h) + clamp(52px, 6vw, 92px)) 0 clamp(72px, 8vw, 124px);
  background: #020203;
}
.doc { width: min(720px, 90vw); margin-inline: auto; }
/* .doc-kicker i .doc-date to akapity wewnątrz .doc, więc bez dołożonego
   rodzica przegrywają swoistością z regułą `.doc p` niżej. */
.doc .doc-kicker {
  margin: 0 0 18px;
  color: var(--red2);
  font-size: .62rem;
  font-weight: 600;
  letter-spacing: .22em;
  text-transform: uppercase;
}
.doc-head h1 { margin: 0; font-size: clamp(2rem, 4.6vw, 3.1rem); }
.doc .doc-date { margin: 18px 0 0; color: #9a9da2; font-size: .76rem; }
/* Zastrzeżenie widoczne wyłącznie w widoku angielskim: teksty prawne
   tłumaczy słownik z js/tlumaczenia/, ale wiąże wersja polska i czytający
   musi to wiedzieć. Atrybut lang="en" na <html> ustawia js/ustawienia.js,
   zanim przeglądarka namaluje pierwszą klatkę, więc akapit nie mryga.

   W HTML-u akapit ma atrybut `hidden` i to on jest zabezpieczeniem: przy
   pierwszym wejściu po wdrożeniu przeglądarka potrafi wziąć arkusz z pamięci
   (patrz uwaga o cache w README), a wtedy bez `hidden` angielskie
   zastrzeżenie stanęłoby także pod polskim regulaminem. Reguła autorska
   niżej wygrywa z `[hidden]` przeglądarki, więc w widoku EN akapit wraca. */
.doc-tylko-en { display: none; }
html[lang="en"] .doc-tylko-en {
  display: block;
  margin: 22px 0 0;
  padding: 12px 16px;
  border-left: 2px solid var(--red2);
  color: #9a9da2;
  font-size: .82rem;
  line-height: 1.6;
}
html[data-motyw="jasny"][lang="en"] .doc-tylko-en { color: var(--dim); }
.doc .disclaimer { margin-top: clamp(32px, 4vw, 48px); }
.doc section { margin-top: clamp(36px, 4vw, 56px); }
.doc h2 {
  margin: 0 0 16px;
  color: #f2f2f0;
  font-size: 1.05rem;
  font-weight: 500;
  letter-spacing: -.01em;
}
.doc p { margin: 0 0 14px; color: #b3b6bb; font-size: .9rem; line-height: 1.78; }
.doc p:last-child { margin-bottom: 0; }
.doc ul { margin: 0 0 14px; padding-left: 1.15em; display: grid; gap: 9px; }
.doc li { color: #b3b6bb; font-size: .9rem; line-height: 1.7; }
.doc b { color: #e4e6e9; font-weight: 500; }
.doc a { color: #f2f2f0; text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
/* pigułka zamykająca podstronę „O nas"; reguła .doc a wygrywałaby z barwą
   przycisku i kładła białe pismo na mlecznej bazie, więc odnośnik w pigułce
   wraca do barw .btn-primary (selektor z klasą pigułki bije też .doc a:hover
   z bloku niżej, żeby napis nie czerwieniał pod myszą) */
.doc .doc-cta { margin-top: clamp(28px, 4vw, 40px); }
.doc .doc-cta a.hf-all { text-decoration: none; color: #0b0b0c; }
html[data-motyw="jasny"] .doc .doc-cta a.hf-all { color: #f5f5f4; }
@media (hover: hover) and (pointer: fine) {
  .doc a:hover { color: var(--red2); }
}
.doc-code {
  padding: 1px 6px;
  border-radius: 3px;
  background: rgba(255,255,255,.07);
  color: #dcdee1;
  font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  font-size: .84em;
}
@media (max-width: 900px) {
  .footer-top { grid-template-columns: 1fr; gap: 46px; }
  /* Trzy kolumny obok siebie schodzą tu do ~90 px szerokości i łamią nazwy.
     „Serwis" bierze więc całą szerokość ze swoimi dwoma słupkami, a Dokumenty
     i Kontakt stają obok siebie pod spodem. */
  .footer-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 34px 24px; }
  .footer-kol--para { grid-column: 1 / -1; }
  /* pas przekierowań łamie się na kilka wierszy; pełne 44 px na pozycję,
     żeby dwa sąsiednie odnośniki nie stykały się polami dotyku */
  .footer-linki { gap: 0 20px; }
  .footer-linki a { min-height: 44px; }
}

/* ============================================================
   PODSTRONA AUTA
   ============================================================ */
/* ---------- kadr otwierający stronę auta ----------
   Ten sam pomysł co hero: zdjęcie na całą szerokość, treść na nim, przyciemnienie
   schodzące do tła strony. Nazwa auta dzieli się na markę (biała) i model
   (czerwony), pod spodem cztery najważniejsze dane. */
.car-hero { padding-top: 0; }

.car-cover {
  position: relative;
  /* Niższy kadr niż wcześniej (było 88vh): zdjęcie ma się przedstawić, a nie
     zająć cały ekran, bo zaraz pod nim zaczyna się galeria z cennikiem. */
  min-height: clamp(440px, 66vh, 780px);
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  background: #0a0a0b;
}
.car-cover > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Wyżej niż środek, więc kadr zjada górę zdjęcia: nad autem było najwięcej
     pustego nieba, a auto ma zostać w całości. */
  object-position: 50% 62%;
}
/* Lżej niż wcześniej: zdjęcie ma zostać czyste, przyciemniamy tylko górę
   pod pasek nawigacji i dół pod napisy. */
.car-cover-shade {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(6,6,7,.6), rgba(6,6,7,.06) 30%, rgba(6,6,7,.1) 55%, rgba(6,6,7,.72) 86%, var(--bg0) 100%);
  pointer-events: none;
}
/* bez własnej szerokości — .container ma ją ustawić, inaczej treść dokleja się
   do lewej krawędzi okna zamiast trzymać miarę reszty strony */
.car-cover-copy {
  position: relative;
  z-index: 2;
  padding-top: calc(var(--nav-h) + 40px);
  padding-bottom: clamp(26px, 3vw, 44px);
}
/* Typografia prosto z hero: rozstrzelenie i interlinia zostają te z .display,
   tu dokładamy tylko miarę i biel. Cała nazwa jest jednym kolorem. */
.car-cover-copy h1 {
  margin: 0;
  color: #fff;
  font-size: clamp(1.5rem, 4.6vw, 3.4rem);
}

/* Ruch identyczny z hero: zewnętrzny span przycina, wewnętrzny wyjeżdża.
   Stan początkowy siedzi tylko na .hw, których bez skryptu w ogóle nie ma. */
.car-cover-copy h1 .hwm {
  display: inline-block;
  overflow: hidden;
  vertical-align: bottom;
  padding-bottom: .06em;
}
.car-cover-copy h1 .hw { display: inline-block; }
.car-cover.hw-split h1 .hw { transform: translateY(1.1em); }
.car-cover.gra h1 .hw {
  transform: none;
  transition: transform 1.15s cubic-bezier(.16, .86, .22, 1);
  transition-delay: calc(.1s + var(--i, 0) * 70ms);
}
/* Dane wchodzą za nazwą: kolumna po kolumnie, a wewnątrz kolumny podpis,
   wartość i dopisek wyjeżdżają w górę spod maski jeden po drugim. Maską jest
   sam wiersz (overflow), przesuwa się wkładka .cs-w. */
.car-spec .cs-w {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.car-cover.hw-split .car-spec .cs-w { transform: translateY(1.3em); opacity: 0; }
.car-cover.gra .car-spec .cs-w {
  transform: none;
  opacity: 1;
  transition: transform 1.05s cubic-bezier(.16, .86, .22, 1), opacity .7s ease;
  transition-delay: calc(.42s + var(--i, 0) * 90ms + var(--r, 0) * 55ms);
}

/* Pasek danych: podpis nad wartością, dopisek pod nią. Bez kresek; kolumny
   rozdziela sam odstęp. Kolumny mają własną miarę i stoją przy lewej pod
   nazwą, zamiast rozciągać się na całą szerokość okna. */
.car-cover-specs {
  display: grid;
  /* cztery kolumny: rocznik z klasą auta plus trzy grupy osiągów */
  grid-template-columns: repeat(4, minmax(0, 11.5rem));
  gap: clamp(14px, 2vw, 30px);
  margin-top: clamp(26px, 3vw, 42px);
  /* Miejsce na dane, zanim car.js je wpisze. Bez tej rezerwacji grid stał pusty
     do odpowiedzi API i cała kolumna z nazwą auta zjeżdżała w dół, gdy dane
     przyszły; na telefonie dawało to przesunięcie układu 0,093 przy progu 0,1,
     który Google liczy jako wadę strony. Pozycji jest zawsze cztery, więc
     liczba wierszy jest z góry znana: jeden przy czterech kolumnach, dwa przy
     trzech i przy dwóch. Wysokości zmierzone w przeglądarce, nie oszacowane. */
  min-height: 74px;
}
.car-spec { min-width: 0; }
.car-spec-label,
.car-spec b,
.car-spec-sub { display: block; overflow: hidden; color: #fff; }
.car-spec-label {
  margin-bottom: 7px;
  font-size: .58rem;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
}
.car-spec b {
  font-family: var(--font-display);
  font-size: clamp(1.05rem, 1.9vw, 1.7rem);
  font-weight: 500;
  letter-spacing: -.02em;
  line-height: 1.2;
  font-variant-numeric: tabular-nums;
}
.car-spec-sub {
  margin-top: 4px;
  font-size: .66rem;
  line-height: 1.35;
}

.car-hero > .container { padding-top: clamp(26px, 3vw, 44px); }

@media (max-width: 980px) {
  /* trzy kolumny, czyli dwa wiersze; rezerwacja miejsca jak wyżej */
  .car-cover-specs { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px 20px; min-height: 139px; }
}
@media (max-width: 720px) {
  /* Na telefonie tytuł i pięć par danych same zajmują ~430 px, więc kadr
     skraca się łagodniej niż na monitorze; przy 56vh napisy siadały autu
     na masce i ze zdjęcia nic nie zostawało. */
  .car-cover { min-height: clamp(380px, 64vh, 560px); }
  .car-cover-specs { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 22px; min-height: 144px; }
  /* .58rem to na telefonie 9,3 px; przy wersalikach i rozstrzeleniu za mało,
     żeby podpis dało się przeczytać jednym spojrzeniem. Podpis w tabeli danych
     potrzebuje mocniejszego zapisu, bo jego reguła stoi w arkuszu niżej. */
  .car-spec-label,
  .car-data .spec-cell span { font-size: .65rem; }
  .mod-ico { width: 56px; height: 56px; }
  .mod-ico img { width: 36px; height: 36px; }
  .mod-item span { font-size: .8rem; }
  /* strzałki miesięcy: 32 px to za mało na palec */
  .cal-nav, #calPrev, #calNext { width: 40px; height: 40px; }
}

/* ---------- reszta strony auta w języku katalogu ----------
   Czarne tło, kanciaste płaszczyzny, włos ramki zamiast szkła z cieniem.
   Przyciski zostają pigułkami — to element z hero i on się nie zmienia. */
.car-page { background: #000; }
.car-page .glass,
.car-page .monthly-card,
.car-page .rule,
.car-page .bk-step,
.car-page .book-panel,
.car-page .sum-card,
.car-page .cal-wrap,
.car-page .gallery-main,
.car-page .gallery-thumbs button,
.car-page .lg,
.car-page .bk-block,
.car-page .summary,
.car-page .sum-hero,
.car-page .sum-alert {
  border-radius: 0;
  background: #09090a;
  border: 1px solid rgba(255, 255, 255, .08);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  box-shadow: none;
}
/* pasek nawigacji i lupa zostają szkłem — są wspólne dla całego serwisu */
.car-page .nav .glass,
.car-page .search-panel { border-radius: var(--r-lg); }
.car-page .nav.scrolled { background: rgba(0, 0, 0, .92); }
.car-page .price-note { background: transparent; }
/* Nadpisy bez czerwonej kropki; na tej stronie prowadzi sam napis, a kropka
   wracała jako jedyny kolorowy punkt w spokojnym układzie. */
.car-page .eyebrow::before { display: none; }
.car-page .success-card { border-radius: 0; }
/* Bez strzałki, więc odnośnik dostaje język podpisów z kadru: wersaliki,
   rozstrzelenie, mała miara. Kreska pod tekstem robi dwie rzeczy naraz:
   niesie sygnał „to odnośnik" zamiast strzałki i odróżnia go od nadpisu
   „O aucie" tuż niżej, który bez niej wyglądał jak drugi taki sam podpis.
   Pionowy padding to pole dotyku: sam tekst ma 16 px, palec potrzebuje 40. */
.back-link {
  position: relative;
  display: inline-block;
  padding: 12px 0;
  font-size: .64rem; font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .58);
  margin-bottom: clamp(10px, 1.4vw, 20px);
  transition: color .25s;
}
.back-link::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 8px;
  height: 1px;
  background: rgba(255, 255, 255, .26);
  transition: background .25s;
}
.back-link:hover { color: #fff; }
.back-link:hover::after { background: rgba(255, 255, 255, .7); }

.car-layout { display: grid; grid-template-columns: 1.55fr 1fr; gap: 30px; align-items: start; }
/* Jak przy podsumowaniu rezerwacji: na szerokim ekranie kolumna cennika dostaje
   górny limit, żeby nie rozlewała się na 600 px rzadkich wierszy. Nadmiar idzie
   w lewo, do galerii. Obie prawe kolumny na tej stronie mają więc 470 px. */
@media (min-width: 1500px) {
  .car-layout { grid-template-columns: minmax(0, 1.55fr) minmax(300px, 470px); }
}
/* Lewa kolumna to jeden blok: galeria i dane pod nią. Bez tego opakowania dane
   trafiłyby w drugi rząd siatki, a pole cennika kończyłoby się na wysokości
   samej galerii, więc przyklejanie miałoby jeszcze mniej miejsca. */
.car-main { display: grid; gap: clamp(26px, 3vw, 40px); min-width: 0; }

.gallery { display: grid; gap: 12px; }
.gallery-main {
  position: relative; aspect-ratio: 16 / 9.4; overflow: hidden;
  border-radius: var(--r-lg); border: 1px solid var(--glass-border);
  cursor: zoom-in;
  box-shadow: var(--shadow-lg);
}
.gallery-main img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s; }
.gallery-main:hover img { transform: scale(1.02); }
/* Miniatury zawsze w jednym rzędzie: liczbę kolumn podaje skrypt (--n), więc
   przy ośmiu zdjęciach nic się nie zawija na ogon, a przy trzech pasek nie
   rozciąga się bez potrzeby; kadr miniatury ma wtedy górne 130 px. */
/* Górny limit na miniaturę zostaje (przy trzech zdjęciach nie mają się rozdąć
   na pół ekranu), ale po poszerzeniu karty auta 130 px zostawiało pasek krótszy
   od zdjęcia nad nim; przy sześciu zdjęciach 168 px równa go z kadrem. */
.gallery-thumbs {
  display: grid;
  grid-template-columns: repeat(var(--n, 6), minmax(0, 1fr));
  gap: 10px;
  width: min(100%, calc(var(--n, 6) * 168px + (var(--n, 6) - 1) * 10px));
}
.gallery-thumbs button {
  aspect-ratio: 16/10; border-radius: 10px; overflow: hidden; padding: 0;
  border: 1px solid var(--line); opacity: .5; transition: .25s;
}
.gallery-thumbs button.on, .gallery-thumbs button:hover { opacity: 1; border-color: rgba(255,255,255,.55); }
.gallery-thumbs img { width: 100%; height: 100%; object-fit: cover; }

.price-rail { position: sticky; top: calc(var(--nav-h) + 20px); display: grid; gap: 16px; }
.price-card { padding: 24px; }
.price-card h3 {
  margin: 0 0 14px;
  font-size: .7rem; font-weight: 500;
  letter-spacing: .24em; text-transform: uppercase; color: var(--dim);
}
.tier-row {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 11px 2px;
  border-bottom: 1px solid rgba(255,255,255,.06);
}
.tier-row:last-child { border-bottom: 0; }
.tier-range { display: flex; align-items: center; gap: 10px; font-size: .9rem; color: #d6d8db; }
.tier-range svg { width: 14px; height: 14px; color: var(--red); flex: none; }
.tier-val { text-align: right; display: grid; }
/* Biel wpisana wprost, nie przez --ink: karta cennika zostaje ciemna także
   w jasnym motywie, a zmienna przewracała kwoty na czarne i gasiła je w tle
   (kontrast spadał do 1,1:1, czyli ceny znikały). */
.tier-val b { font-size: .95rem; font-weight: 500; font-variant-numeric: tabular-nums; color: #f5f5f4; }
.tier-val span { font-size: .7rem; color: var(--dim); }
.monthly-card {
  padding: 22px 24px;
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-left: 2px solid var(--red);
  border-radius: var(--r-lg);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.07), var(--shadow-lg);
}
.monthly-card .row { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; padding: 6px 0; }
.monthly-card .row span { color: var(--dim); font-size: .84rem; }
.monthly-card .row b { font-weight: 500; font-variant-numeric: tabular-nums; }
.monthly-card .big { font-size: 1.7rem; font-weight: 500; letter-spacing: -.01em; }
.price-notes { display: grid; gap: 10px; }
.price-note {
  display: flex; gap: 12px; align-items: center;
  padding: 13px 16px; border-radius: var(--r-md);
  font-size: .82rem; color: var(--dim);
}
/* Notki idą pod cennikiem w tej samej kolumnie, więc ich ikony chodzą w tej
   samej czerwieni co zegary przy stawkach; szare wyglądały jak resztka. */
.price-note svg { width: 17px; height: 17px; color: var(--red); flex: none; }

/* ---------- wstęp o aucie ----------
   Podpis „O aucie" z hasłem otwiera kartę auta: stoi między odnośnikiem
   powrotu a galerią, więc pierwszy ekran mówi, na co się patrzy. Sam opis
   czeka niżej, pod galerią i cennikiem (.car-lede). */
.car-lede-head { margin-bottom: clamp(22px, 2.8vw, 38px); }
.car-lede-eyebrow { margin-bottom: 12px; }
.car-lede-title { font-size: clamp(1.5rem, 3vw, 2.2rem); }
/* Opis stoi pod galerią i tabelą danych, więc odstęp jest mu potrzebny od
   góry, nie od dołu; niżej i tak zaczyna się sekcja rezerwacji z własną
   wyściółką. Bez tego akapity kleiłyby się do ramki z danymi. */
.car-lede { margin-top: clamp(44px, 5vw, 72px); }
.car-lede-text p { color: #c9cbce; margin: 0 0 16px; font-size: .97rem; max-width: 62ch; }
.car-lede-text p:last-child { margin-bottom: 0; }

/* ---------- dane techniczne pod zdjęciami ----------
   Osiem osobnych kafli po cztery w rzędzie, jak na arkuszu, z którego wycięte
   są rysunki. Wcześniej te same dane stały po dwa w rzędzie wewnątrz jednej
   dużej karty i zabierały ponad dwa razy tyle wysokości, choć żadna wartość
   nie ma więcej niż trzy słowa — pozycja kończyła się długą pustką z prawej,
   a cała tabela sięgała niżej niż galeria obok.

   Ramkę ma teraz każdy kafel z osobna, więc wspólna karta pod spodem zniknęła
   (patrz car.html); dwie obwódki jedna w drugiej niczego nie porządkowały.
   Rysunek zszedł przy okazji z 42 do 28 px: przy zwartym kaflu prowadzi
   wartość, a ikona ma tylko powiedzieć, na którą pozycję się patrzy. */
.car-data > .eyebrow { margin-bottom: 16px; }
.spec-table {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}
.spec-cell {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  background: #09090a;
  border: 1px solid rgba(255, 255, 255, .08);
}
.spec-ico { flex: none; display: block; width: 28px; height: 28px; }
.spec-ico img { display: block; width: 100%; height: 100%; }
/* Bez tego długa wartość („Quattro (AWD)") rozpychałaby kolumnę zamiast się
   złamać — element siatki domyślnie nie zwęża się poniżej swojej treści. */
.spec-txt { min-width: 0; }
.spec-cell span {
  display: block;
  margin-bottom: 3px;
  color: rgba(255, 255, 255, .5);
  font-size: .58rem;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
}
.spec-cell b {
  display: block;
  color: #fff;
  font-size: .95rem;
  font-weight: 500;
  line-height: 1.35;
}
/* Kafel poniżej ~190 px przestaje działać: to w nim wartości takie jak
   „Quattro (AWD)" i podpis „Moment obrotowy" zaczynają się łamać na dwa
   wiersze, więc rząd puchnie zamiast się skracać. Cztery w rzędzie wymagają
   przez to ~780 px na całą siatkę, trzy — ~600 px.

   Szerokość siatki nie idzie tu za szerokością okna wprost: powyżej 1080 px
   tabela dzieli rząd z cennikiem i dostaje ledwie 1,55/2,55 kontenera, więc
   na cztery kafle ma miejsce dopiero od ~1420 px, a niżej mieszczą się trzy.
   Poniżej 1080 px cennik przenosi się nad nią, tabela odzyskuje całą szerokość
   strony i znów jest cztery — stąd te progi zamiast jednego.

   Przy trzech kolumnach ostatnia z ośmiu pozycji zostawałaby sama w rzędzie
   obok pustego miejsca, więc dostaje podwójną szerokość i rząd się domyka. */
@media (min-width: 1081px) and (max-width: 1420px) {
  .spec-table { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .spec-cell:last-child { grid-column: span 2; }
}
@media (max-width: 850px) {
  .spec-table { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* Na telefonie kafel ma ~164 px i węższa wyściółka z mniejszym rysunkiem
   dokładają tekstowi kilkanaście pikseli — tyle, żeby „Quattro (AWD)" zmieściło
   się w jednym wierszu. Dwuwyrazowe podpisy i tak się łamią: wersalikami z
   rozstrzeleniem „Moment obrotowy" potrzebuje ~130 px, a zejście z podpisem
   poniżej .65rem to na telefonie 9 px i już się tego nie czyta. Rząd rośnie
   wtedy o jeden wiersz podpisu i tyle. */
@media (max-width: 560px) {
  .spec-cell { padding: 14px 12px; gap: 10px; }
  .spec-ico { width: 24px; height: 24px; }
}

/* ---------- modyfikacje pod danymi technicznymi ----------
   Druga karta w tej samej kolumnie; odstęp jak między sekcjami strony auta,
   żeby podpis „Modyfikacje" należał wyraźnie do tego, co pod nim, a nie do
   tabeli wyżej. */
.car-mody { margin-top: clamp(30px, 3.2vw, 44px); }
.car-mody > .eyebrow { margin-bottom: 16px; }

/* ---------- modyfikacje ----------
   Kafle same się układają: przy czterech modyfikacjach stoją w jednym rzędzie
   jak w tabeli danych obok, przy siedmiu zawijają się bez dziur. Ikona siedzi
   w kółku z włosem ramki, tym samym co reszta szkła na stronie; podpis pod nią
   trzyma najwyżej ~20 znaków w wierszu, bo dłuższa linia rozpychałaby kolumnę
   i rozjeżdżała odstępy między kaflami. */
.mod-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(148px, 1fr));
  gap: clamp(22px, 2.4vw, 30px) clamp(14px, 1.8vw, 24px);
  padding: clamp(24px, 2.6vw, 32px);
}
.mod-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  text-align: center;
}
.mod-ico {
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: rgba(255, 255, 255, .04);
}
/* Rysunki są bogatsze niż zwykła piktogramowa kreska (siatka grilla, bieżnik
   opony, żeberka chłodnicy), więc dostają więcej miejsca; przy 26 px szczegóły
   zlewały się w plamę. */
.mod-ico img { width: 42px; height: 42px; }
.mod-item span {
  max-width: 20ch;
  color: var(--ink);
  font-size: .88rem;
  font-weight: 500;
  line-height: 1.35;
}

/* ============================================================
   REZERWACJA
   ============================================================ */
/* Rezerwacja zaczyna się tuż pod wstępem o aucie: akapity wstępu stoją teraz
   w prawej, wąskiej kolumnie, więc pełna wyściółka sekcji robiła między nimi
   a nagłówkiem rezerwacji ekran pustki. Dolna wyściółka zostaje z .section. */
.booking { scroll-margin-top: 90px; padding-top: clamp(36px, 4vw, 60px); }
/* Rezerwacja idzie w tej samej szerokiej kolumnie co karta auta wyżej;
   patrz .container--szeroki. */
.booking > .container { width: min(1560px, 94vw); }

/* Odpowiedź na termin przyniesiony z wyszukiwarki. Kolor niesie znaczenie,
   więc nie zostaje sam: zieleń chodzi ze znaczkiem, a zajęty termin z krzyżem
   — inaczej przy daltonizmie oba wiersze mówiłyby to samo. */
.term-note {
  display: flex; align-items: flex-start; gap: 10px;
  margin: 0 0 20px;
  padding: 14px 18px;
  border-radius: 14px;
  border: 1px solid transparent;
  font-size: .84rem; line-height: 1.55;
}
.term-note::before { font-size: .95rem; line-height: 1.35; flex: none; }
.term-note.ok {
  background: rgba(47, 191, 113, .1);
  border-color: rgba(47, 191, 113, .28);
  color: #a8e8c3;
}
.term-note.ok::before { content: "✓"; }
.term-note.busy {
  background: rgba(227, 34, 39, .1);
  border-color: rgba(227, 34, 39, .3);
  color: #ffb3b5;
}
.term-note.busy::before { content: "✕"; }
.term-note b { color: #fff; font-weight: 500; font-variant-numeric: tabular-nums; }

/* zasady rezerwacji — trzy kompaktowe kafle */
.rules { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 26px; }
.rule {
  display: flex; gap: 12px; align-items: flex-start;
  padding: 16px 18px; border-radius: 14px;
  font-size: .81rem; line-height: 1.55; color: #b7bbc0;
}
.rule svg { width: 15px; height: 15px; color: var(--red2); flex: none; margin-top: 3px; }

/* pasek postępu rezerwacji */
.bk-steps {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px;
  margin-bottom: 18px;
}
.bk-step {
  display: flex; align-items: center; gap: 12px;
  padding: 13px 18px;
  border-radius: 16px;
  background: rgba(255, 255, 255, .028);
  border: 1px solid rgba(255, 255, 255, .07);
  transition: background .3s, border-color .3s;
}
.bk-step .bk-dot {
  flex: none;
  width: 26px; height: 26px; border-radius: 50%;
  display: grid; place-items: center;
  border: 1px solid rgba(255, 255, 255, .2);
  font-size: .72rem; font-weight: 500;
  color: var(--dim);
  font-variant-numeric: tabular-nums;
  transition: .3s;
}
.bk-step .bk-lbl { font-size: .82rem; font-weight: 500; color: #9aa0a7; transition: color .3s; }
.bk-step.on {
  background: rgba(255, 255, 255, .06);
  border-color: rgba(255, 255, 255, .18);
}
.bk-step.on .bk-dot { border-color: rgba(255, 255, 255, .85); color: #fff; }
.bk-step.on .bk-lbl { color: var(--ink); }
.bk-step.done { border-color: rgba(47, 191, 113, .3); background: rgba(47, 191, 113, .07); }
.bk-step.done .bk-lbl { color: #d6dade; }
.bk-step.done .bk-dot {
  background: var(--green); border-color: var(--green);
  color: transparent; font-size: 0;
  position: relative;
}
.bk-step.done .bk-dot::after {
  content: "";
  position: absolute;
  width: 9px; height: 5px;
  border-left: 2px solid #07130c; border-bottom: 2px solid #07130c;
  transform: rotate(-45deg) translate(1px, -1px);
}

.booking-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.62fr) minmax(310px, 1fr);
  gap: 20px; align-items: start;
}
/* Dopiero na szerokim ekranie podsumowanie dostaje górny limit: to kolumna
   liczb, która przy 600 px robi się rzadka i pełna pustych przerw. Zysk z
   szerszej sekcji idzie wtedy w lewo, do kalendarza i formularza. Niżej rządzi
   sam stosunek kolumn, bo tam każdy piksel jest potrzebny po obu stronach. */
@media (min-width: 1500px) {
  .booking-layout { grid-template-columns: minmax(0, 1.62fr) minmax(310px, 470px); }
}
.booking-col { display: grid; gap: 16px; }

.bk-block { padding: 28px 30px 30px; }
.bk-head { display: flex; gap: 14px; align-items: baseline; margin-bottom: 22px; }
.bk-num {
  flex: none;
  font-size: .66rem; font-weight: 500; letter-spacing: .16em;
  color: var(--red2);
  font-variant-numeric: tabular-nums;
}
.bk-head h3 { margin: 0; font-size: 1rem; font-weight: 500; letter-spacing: -.01em; }
.bk-head .hint { margin: 5px 0 0; color: var(--dim); font-size: .82rem; line-height: 1.5; }

/* wybrany termin — trzy kafelki nad kalendarzem */
.bk-pills { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 22px; }
.bk-pill {
  padding: 12px 16px;
  border-radius: 14px;
  background: rgba(255, 255, 255, .035);
  border: 1px solid rgba(255, 255, 255, .08);
  transition: border-color .3s, background .3s;
}
.bk-pill span {
  display: block;
  font-size: .58rem; font-weight: 500;
  letter-spacing: .16em; text-transform: uppercase; color: #82878f;
  margin-bottom: 4px;
}
.bk-pill b { font-size: .92rem; font-weight: 500; font-variant-numeric: tabular-nums; color: #6f757c; }
.bk-pill.set { background: rgba(255, 255, 255, .07); border-color: rgba(255, 255, 255, .2); }
.bk-pill.set b { color: var(--ink); }

/* podsekcja wewnątrz kroku (godziny pod kalendarzem) */
.bk-sub { margin-top: 26px; padding-top: 24px; border-top: 1px solid rgba(255, 255, 255, .08); }
.bk-sub h4 { margin: 0; font-size: .92rem; font-weight: 500; letter-spacing: -.01em; }
.bk-sub p { margin: 5px 0 16px; color: var(--dim); font-size: .8rem; line-height: 1.5; }

/* --- kalendarz --- */
/* Dwa miesiące w ramce panelu. Kalendarz dostaje własny oddech: bez
   wewnętrznego marginesu koła skrajnych kolumn kleiły się do krawędzi ramki,
   a rzędy stały bliżej siebie niż kolumny i siatka czytała się jak ściśnięta.
   Odstęp między kołami opisuje jedna liczba (--cal-luz) i obowiązuje w obie
   strony; --cal-dzien to średnica koła. */
.cal-wrap {
  display: grid; grid-template-columns: 1fr 1fr; gap: 30px;
  padding: 20px 22px 22px;
  --cal-dzien: 58px;
  --cal-luz: 9px;
}
.cal { user-select: none; }
.cal-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 10px; }
.cal-title { font-weight: 500; font-size: .84rem; letter-spacing: .01em; color: #e4e6e9; }
.cal-nav { display: flex; gap: 6px; }
.cal-nav button {
  width: 32px; height: 32px; border-radius: 50%;
  border: 1px solid rgba(255,255,255,.12); background: rgba(255,255,255,.04);
  display: grid; place-items: center;
  font-size: 1rem; line-height: 1; color: var(--dim);
  transition: .2s;
}
.cal-nav button:hover { color: #fff; border-color: rgba(255,255,255,.45); background: rgba(255,255,255,.09); }
.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; }
/* Siatka nie rozciąga się na całą szerokość kolumny, tylko dokładnie na tyle,
   ile zajmuje siedem kół z odstępami; inaczej kolumna zostaje szersza od koła
   i poziome przerwy robią się większe od pionowych. Nadmiar szerokości idzie
   po równo na boki, więc nagłówki dni dalej stoją nad swoimi kolumnami. */
.cal-wrap .cal-grid {
  gap: var(--cal-luz);
  max-width: calc(7 * var(--cal-dzien) + 6 * var(--cal-luz));
  margin-inline: auto;
}
.cal-dow {
  text-align: center; font-size: .58rem; font-weight: 500;
  letter-spacing: .1em; text-transform: uppercase; color: #7f858d;
  padding: 4px 0 8px;
}
/* rzędy dostały własny odstęp, więc podpis dnia nie musi już dokładać swojego */
.cal-wrap .cal-dow { padding: 2px 0 5px; }
/* Dzień jest kołem o proporcji 1:1, więc rośnie razem z kolumną. W szerokiej
   sekcji rezerwacji kolumna miała ~140 px i koła robiły się wielkie na pół
   ekranu; górny limit trzyma je w rozmiarze wygodnym dla palca. W kalendarzu
   rezerwacji limit podaje --cal-dzien, bo tam od niego zależy też szerokość
   całej siatki; w hero zostaje wpisane 54 px. */
.cal-day {
  aspect-ratio: 1; border-radius: 50%;
  width: 100%; max-width: var(--cal-dzien, 54px); justify-self: center;
  display: grid; place-items: center;
  font-size: .8rem; font-weight: 400;
  border: 1px solid transparent;
  position: relative;
  font-variant-numeric: tabular-nums;
  transition: background .18s, border-color .18s, color .18s;
}
.cal-day.free { cursor: pointer; background: rgba(255,255,255,.04); }
.cal-day.free:hover { border-color: rgba(255,255,255,.55); color: #fff; background: rgba(255,255,255,.09); }
.cal-day.other { opacity: 0; pointer-events: none; }
.cal-day.past { color: rgba(255,255,255,.2); background: transparent; }
.cal-day.booked { color: #ff9ea1; background: rgba(227,34,39,.2); border-color: rgba(227,34,39,.28); cursor: not-allowed; }
.cal-day.pending { color: #ffd28a; background: rgba(245,165,36,.14); border-color: rgba(245,165,36,.26); cursor: pointer; }
.cal-day.pstart { /* najem startuje po południu — rano wolne */
  cursor: pointer;
  background: linear-gradient(to right, rgba(255,255,255,.045) 0 48%, rgba(227,34,39,.28) 52%);
  border-color: rgba(227,34,39,.25);
}
.cal-day.pend { /* najem kończy się rano — po południu wolne */
  cursor: pointer;
  background: linear-gradient(to right, rgba(227,34,39,.28) 0 48%, rgba(255,255,255,.045) 52%);
  border-color: rgba(227,34,39,.25);
}
/* Auto zajęte w środku dnia — na przykład serwis od 10:00 do 14:00. Rano i
   wieczorem stoi wolne, więc dzień nadaje się i na odbiór, i na zwrot, ale nie
   da się go przejechać w środku najmu; stąd czerwony pas w środku, a nie przy
   krawędzi jak w dniu wyjazdu i powrotu. */
.cal-day.part {
  cursor: pointer;
  background: linear-gradient(to right, rgba(255,255,255,.045) 0 26%, rgba(227,34,39,.28) 32% 68%, rgba(255,255,255,.045) 74%);
  border-color: rgba(227,34,39,.25);
}
.cal-day.blocked {
  color: rgba(255,255,255,.28); cursor: not-allowed;
  background: repeating-linear-gradient(135deg, rgba(255,255,255,.06) 0 5px, transparent 5px 10px);
}
/* Biały krążek na ciemnej siatce wystarczy sam — poświata pod nim rozmywała
   się na sąsiednie dni i czytała jak zabrudzenie, a nie jak zaznaczenie. */
.cal-day.sel {
  background: #fff !important; color: #0b0b0c !important; border-color: #fff !important;
  font-weight: 500; z-index: 1;
}
.cal-day.range { background: rgba(255,255,255,.14); border-color: rgba(255,255,255,.1); color: #fff; }
.cal-legend {
  display: flex; flex-wrap: wrap; gap: 10px 18px;
  margin-top: 24px; padding-top: 18px;
  border-top: 1px solid rgba(255,255,255,.07);
}
.leg { display: inline-flex; align-items: center; gap: 7px; font-size: .72rem; color: #9aa0a7; }
.leg i { width: 11px; height: 11px; border-radius: 50%; display: inline-block; flex: none; }
.leg .l-free { background: rgba(255,255,255,.12); }
.leg .l-booked { background: rgba(227,34,39,.5); }
.leg .l-pending { background: rgba(245,165,36,.5); }
.leg .l-partial { background: linear-gradient(135deg, rgba(227,34,39,.55) 0 46%, rgba(255,255,255,.12) 54%); }
.leg .l-blocked { background: repeating-linear-gradient(135deg, rgba(255,255,255,.25) 0 3px, transparent 3px 6px); }
.leg .l-sel { background: #fff; }

/* --- godziny ---
   Odbiór i zwrot to dwa osobne wybory, więc stoją jako dwie kolumny obok
   siebie: jeden rzut oka mówi, o której auto wyjeżdża i o której wraca.
   Wcześniej wszystkie godziny leżały w jednej długiej siatce, która łamała się
   dwanaście plus trzy i wyglądała, jakby ostatni rząd został po drodze. */
.time-two { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.time-col {
  min-width: 0;                       /* bez tego siatka w środku rozpycha kolumnę */
  padding: 16px 16px 18px;
  border-radius: 20px;
  border: 1px solid rgba(255, 255, 255, .08);
  background: rgba(255, 255, 255, .022);
}
.time-col-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 10px; margin-bottom: 14px;
}
.time-col-lbl {
  font-size: .62rem; font-weight: 500;
  letter-spacing: .14em; text-transform: uppercase; color: #8b9097;
}
.time-col-val { font-size: .92rem; font-weight: 500; font-variant-numeric: tabular-nums; color: var(--ink); }
.time-col-val.pusta { color: #6f757c; }
/* W kolumnie kafelki są węższe niż w siatce miast: dwie siatki obok siebie
   mają zmieścić się bez przewijania, a godzina to cztery znaki. Liczbę kolumn
   podaje car.js (kolumnyGodzin) — dobiera ją tak, żeby ostatni rząd nie został
   sam z jednym kafelkiem; auto-fill tego nie umie. */
.time-two .time-grid { grid-template-columns: repeat(var(--kolumny, 5), minmax(0, 1fr)); gap: 8px; }
/* Wysokość jest jedna dla wszystkich kafelków, nie tylko dla tych w jednym
   rzędzie: godziny z dopłatą niosą pod liczbą drugą linijkę i same rosły, więc
   dwa górne rzędy wychodziły niższe i siatka wyglądała, jakby ostatni rząd był
   z innego zestawu. */
.time-two .time-chip { min-height: 58px; padding: 9px 4px; border-radius: 14px; font-size: .86rem; }

.time-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(74px, 1fr)); gap: 8px; }
.time-chip {
  /* treść na środku kafelka: w rzędzie, w którym choć jedna godzina ma
     dopłatę, wszystkie kafelki równają się do najwyższego i sama liczba
     zostawała wtedy przy górnej krawędzi */
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 12px 0; text-align: center;
  border-radius: 13px;
  border: 1px solid rgba(255,255,255,.1);
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  font-size: .82rem; font-weight: 400;
  font-variant-numeric: tabular-nums;
  transition: transform .2s cubic-bezier(.2,.8,.2,1), background .2s, border-color .2s, box-shadow .2s;
}
.time-chip:hover {
  border-color: rgba(255,255,255,.4);
  background: linear-gradient(180deg, rgba(255,255,255,.11), rgba(255,255,255,.05));
  transform: translateY(-1px);
}
/* Zaznaczony kafel godziny i miasta idzie w tym samym mlecznym stylu co
   przyciski w hero (patrz .hf-all wyżej; tło i falujące światło niesie tamta
   reguła). Wcześniej była tu płaska biel i kafle odstawały od reszty strony.
   Krawędź w tonie tła, żeby pigułka czytała się jako jedna plama. */
.time-chip.on {
  border-color: rgba(243, 243, 244, .82); color: #0b0b0c; font-weight: 500;
  box-shadow: 0 8px 22px rgba(255,255,255,.14);
}
/* dopłata pod godziną albo nazwą miasta; kafle w jednym wierszu siatki i tak
   równają się do najwyższego, więc rząd z kwotami rośnie razem, bez schodków */
.time-chip small {
  display: block; margin-top: 3px;
  font-size: .63rem; font-weight: 400; line-height: 1;
  color: #9aa0a7; white-space: nowrap;
}
.time-chip.on small { color: rgba(11,11,12,.6); }
/* Godzina zabrana przez sąsiedni najem albo blokadę: auto wraca o 14:00, więc
   o 10:00 nie ma czego wydawać. Wygaszamy kafelek, zamiast go chować — luka
   w siatce nie tłumaczy, dlaczego godzina zniknęła, a szary kafelek z podpisem
   tłumaczy to od razu. */
.time-chip.zajeta {
  color: rgba(255,255,255,.24);
  background: none;
  border-color: rgba(255,255,255,.06);
  cursor: not-allowed;
}
.time-chip.zajeta:hover { transform: none; background: none; border-color: rgba(255,255,255,.06); }
.time-chip.zajeta small { color: rgba(255,255,255,.16); }

/* --- dokładna pora: pełna godzina albo wpół do ---
   Siatka idzie co pełną godzinę, bo tak wygląda oferta i tylko tak mieści się
   w kolumnie. Wpół do bywa jednak ważne (pociąg, odprawa), więc pod rzędem
   z wybraną godziną rozwija się pasek z dwiema dokładnymi porami. Pasek stoi
   w siatce jako własny rząd na całą jej szerokość: wsunięty między kafelki
   rozjechałby kolumny, a dopięty pod siatką nie mówiłby, której godziny
   dotyczy. Kafelki w środku są zwykłymi kafelkami godziny — mają stąd tylko
   inny rozmiar, bo wybór jest tu węższy i nie niesie kwoty. */
.time-pol {
  grid-column: 1 / -1;
  display: flex; align-items: center; gap: 6px;
  padding: 6px; border-radius: 15px;
  border: 1px solid rgba(255, 255, 255, .08);
  background: rgba(255, 255, 255, .035);
  animation: pol-wjazd .18s cubic-bezier(.2, .8, .2, 1);
}
/* pasek, który po przerysowaniu siatki stoi w tym samym miejscu, nie wjeżdża
   drugi raz — powtórzony wjazd czyta się jak mrugnięcie, nie jak ruch */
.time-pol.bez-wjazdu { animation: none; }
.time-pol-lbl {
  flex: 0 0 auto; padding-left: 5px;
  font-size: .58rem; font-weight: 500;
  letter-spacing: .12em; text-transform: uppercase; color: #8b9097;
}
.time-two .time-pol .time-chip,
.time-pol .time-chip {
  flex: 1 1 0; min-width: 0;
  min-height: 40px; padding: 0 4px;
  border-radius: 11px; font-size: .82rem;
}
@keyframes pol-wjazd {
  from { opacity: 0; transform: translateY(-5px); }
  to   { opacity: 1; transform: none; }
}

/* ---------- odbiór pod adresem klienta ----------
   Pole wjeżdża pod kaflami dopiero po wybraniu „Własnej lokalizacji". Zdanie
   pod polem jest zarazem podpowiedzią, paskiem postępu i komunikatem błędu —
   jedno miejsce, w które klient patrzy po wpisaniu adresu. */
.bk-wlasny { margin-top: 16px; }
.bk-wlasny[hidden] { display: none; }
.bk-wlasny-pole { display: grid; gap: 7px; }
.bk-wlasny-pole > label {
  font-size: .64rem; font-weight: 500;
  letter-spacing: .14em; text-transform: uppercase; color: #8b9097;
}
.bk-wlasny-pole input {
  width: 100%;
  background: rgba(255,255,255,.045);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 13px;
  padding: 0 15px;
  height: 48px;
  color: var(--ink);
  font-size: .9rem;
  transition: border-color .22s, background .22s;
}
.bk-wlasny-pole input::placeholder { color: #6d737a; }
.bk-wlasny-pole input:hover { border-color: rgba(255,255,255,.2); }
.bk-wlasny-pole input:focus { outline: none; border-color: rgba(255,255,255,.5); background: rgba(255,255,255,.07); }
/* Pole i lista muszą mieć wspólny punkt odniesienia, bo lista wisi pod polem
   na pozycji bezwzględnej. */
.bk-wlasny-input { position: relative; }
/* Każdy blok rezerwacji jest „szkłem", a backdrop-filter zakłada własny kontekst
   nakładania — lista podpowiedzi nie wyjdzie ponad sąsiedni blok, choćby miała
   w środku najwyższy z-index. Dlatego na czas otwarcia listy podnosimy cały
   blok; klasę zdejmuje ten sam kod, który chowa listę. */
.bk-block.podp-otwarte { z-index: 40; }
.bk-podp {
  position: absolute; top: calc(100% + 6px); left: 0; right: 0;
  z-index: 30;
  max-height: 290px; overflow-y: auto;
  list-style: none; margin: 0; padding: 6px;
  border-radius: 14px;
  /* kryjące tło, nie szkło: pod spodem stoją kafle miast i przez półprzezroczyste
     tło podpowiedzi robiły się nieczytelne */
  /* w pelni kryjace: przy nawet dwuprocentowej przezroczystosci przez liste
     przebijal tekst z bloku pod spodem */
  background: #14141a;
  border: 1px solid rgba(255, 255, 255, .1);
  box-shadow: 0 18px 44px rgba(0, 0, 0, .5);
}
.bk-podp[hidden] { display: none; }
.bk-podp li {
  display: grid; gap: 2px;
  padding: 9px 12px;
  border-radius: 9px;
  cursor: pointer;
  transition: background .16s;
}
.bk-podp li:hover, .bk-podp li.on { background: rgba(255, 255, 255, .09); }
.bk-podp li b { font-size: .86rem; font-weight: 400; color: #f0f1f2; }
/* druga linijka odróżnia te same ulice w różnych stronach kraju */
.bk-podp li span { font-size: .74rem; color: var(--dim); }
html[data-motyw="jasny"] .bk-podp { background: #14141a; }

.bk-wlasny-info { margin: 9px 0 0; font-size: .8rem; line-height: 1.5; color: var(--dim); }

/* zieleń = trasa policzona, czerwień = adres do poprawki; ten sam język kolorów
   co przy dostępności terminu wyżej */
.bk-wlasny-info.ok { color: #8fe3b0; }
.bk-wlasny-info.warn { color: var(--red2); }
html[data-motyw="jasny"] .bk-wlasny-pole input { background: #fff; border-color: var(--line); }

/* --- miejsce odbioru ---
   Te same kafle co godziny, tylko szersze: mieszczą nazwę miasta, a nie 5 znaków
   zegara. Zdanie pod spodem czerwienieje, gdy wybrane miasto wyklucza ten najem. */
.pick-grid { grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); }
.bk-sub p.warn { color: var(--red2); }

/* --- pakiety w rezerwacji ---
   Dwie kolumny, bo w jednej osiem pozycji stawało się ścianą: przy szerokim
   panelu kwota odjeżdżała od nazwy o pół ekranu, opis ciągnął się na 130
   znaków w wierszu (czyta się do ~75) i cały krok miał ponad 700 px wysokości.
   Węższa karta trzyma kwotę tuż przy nazwie, skraca wiersz opisu do wygodnej
   miary i mieści listę w czterech rzędach zamiast ośmiu. */
.extras-pick { display: grid; gap: 10px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.extra-pick {
  display: flex; gap: 14px; align-items: flex-start;
  padding: 16px 18px; border-radius: 16px;
  border: 1px solid rgba(255,255,255,.09);
  background: linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.015));
  cursor: pointer;
  transition: border-color .22s, background .22s, box-shadow .22s;
}
.extra-pick:hover { border-color: rgba(255,255,255,.26); background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.03)); }
.extra-pick.on {
  border-color: rgba(255,255,255,.55);
  background: linear-gradient(180deg, rgba(255,255,255,.11), rgba(255,255,255,.045));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.16);
}
.extra-pick input { position: absolute; opacity: 0; pointer-events: none; }
/* Kwadracik, nie kółko: pakiety wybiera się wiele naraz, a kółko czyta się
   jako „jedno z" — tak samo wygląda pole przy zgodach niżej w tym samym
   formularzu. */
.extra-pick .box {
  width: 20px; height: 20px; border-radius: 6px; flex: none; margin-top: 1px;
  border: 1.5px solid rgba(255,255,255,.3);
  display: grid; place-items: center;
  transition: .2s;
}
.extra-pick.on .box { background: #fff; border-color: #fff; }
.extra-pick .box svg { width: 11px; height: 11px; opacity: 0; transform: scale(.5); transition: .2s; color: #0b0b0c; }
.extra-pick.on .box svg { opacity: 1; transform: scale(1); }
/* Kafelek z rysunkiem między kwadracikiem a tekstem. Rysunki są z tego samego
   firmowego arkusza co ikony modyfikacji, więc kafelek powtarza ich oprawę:
   delikatne tło i ramka, tylko kwadratowa, bo tutaj stoi w wierszu obok tekstu,
   a nie w siatce pod nim. */
.extra-ico {
  flex: none;
  display: grid;
  place-items: center;
  width: 40px; height: 40px;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 11px;
  background: rgba(255,255,255,.05);
}
.extra-ico img { width: 28px; height: 28px; }
.extra-pick.on .extra-ico { border-color: rgba(255,255,255,.28); background: rgba(255,255,255,.1); }
.extra-pick .tx { flex: 1; min-width: 0; }
.extra-pick .tx .nm {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  font-weight: 500; font-size: .89rem;
}
.extra-pick .tx .nm b {
  color: var(--ink); font-weight: 500; white-space: nowrap;
  font-variant-numeric: tabular-nums; font-size: .86rem;
}
.extra-pick .tx p { margin: 4px 0 0; color: #92979e; font-size: .78rem; line-height: 1.5; }
.extra-pick .extra-pop { display: inline-block; margin-left: 8px; transform: translateY(-1px); }
/* Karta poniżej ~300 px nie mieści już nazwy z kwotą w jednym wierszu, a to
   właśnie ta para ma się czytać jednym spojrzeniem; przy oknie węższym niż
   ~700 px dwie kolumny schodzą poniżej tej granicy i lepiej wychodzi jedna,
   szeroka. Odznaka „Popularne" spada wtedy pod nazwę wcześniej — dotyczy
   jednej pozycji z ośmiu, więc nie warto pod nią ustawiać całej siatki. */
@media (max-width: 700px) {
  .extras-pick { grid-template-columns: minmax(0, 1fr); }
}

/* --- kilometry dokupione z góry ---
   Jedna szeroka karta pod siatką pakietów: to nie jest kolejny kafelek do
   zaznaczenia, tylko liczba do ustawienia, więc zamiast kwadracika ma
   licznik z minusem i plusem. Oprawa ta sama co kafelków, żeby czytało się
   jako część kroku „Pakiety dodatkowe". */
.kmx {
  margin-top: 10px;
  padding: 16px 18px; border-radius: 16px;
  border: 1px solid rgba(255,255,255,.09);
  background: linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.015));
  transition: border-color .22s, background .22s, box-shadow .22s;
}
.kmx.on {
  border-color: rgba(255,255,255,.55);
  background: linear-gradient(180deg, rgba(255,255,255,.11), rgba(255,255,255,.045));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.16);
}
.kmx-head { display: flex; gap: 14px; align-items: flex-start; }
.kmx-ico {
  flex: none; display: grid; place-items: center;
  width: 40px; height: 40px; border-radius: 11px;
  border: 1px solid rgba(255,255,255,.1); background: rgba(255,255,255,.05);
}
/* rysunek z firmowego arkusza (kreska z kanałem alfa, jak ikony pakietów);
   kwadrat pliku ma zapas wokół rysunku, stąd 34 px w polu 40 px */
.kmx-ico img { display: block; width: 34px; height: 34px; }
.kmx.on .kmx-ico { border-color: rgba(255,255,255,.28); background: rgba(255,255,255,.1); }
.kmx-tx { flex: 1; min-width: 0; }
.kmx-tx > b { display: block; font-weight: 500; font-size: .89rem; }
.kmx-tx p { margin: 4px 0 0; color: #92979e; font-size: .78rem; line-height: 1.5; max-width: 62ch; }
.kmx-tx p b { color: var(--ink); font-weight: 500; font-variant-numeric: tabular-nums; }
.kmx-pick { display: flex; align-items: center; gap: 10px; margin-top: 14px; flex-wrap: wrap; }
/* Pole liczby: klient wpisuje dowolną liczbę kilometrów. Wysokość 44 px jak
   inne cele dotyku w formularzu; jednostka stoi w ramce, żeby nie odjeżdżała
   od liczby. */
.kmx-lbl { font-size: .82rem; color: #b6babf; }
.kmx-in {
  display: inline-flex; align-items: center; gap: 8px;
  height: 44px; padding: 0 12px 0 4px; border-radius: 12px;
  border: 1px solid rgba(255,255,255,.22); background: rgba(255,255,255,.06);
  transition: border-color .2s;
}
.kmx-in:focus-within { border-color: rgba(255,255,255,.55); }
.kmx-in input {
  width: 92px; height: 100%; padding: 0 8px; border: 0; background: transparent;
  color: var(--ink); font: inherit; font-size: 1.05rem; font-weight: 500;
  font-variant-numeric: tabular-nums; text-align: right; outline: none;
  -moz-appearance: textfield; appearance: textfield;
}
.kmx-in input::-webkit-outer-spin-button, .kmx-in input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.kmx-unit { font-size: .85rem; color: #92979e; }
.kmx-sum { margin-left: auto; font-weight: 500; font-variant-numeric: tabular-nums; white-space: nowrap; }
.kmx-sum .taniej { display: block; text-align: right; font-weight: 400; font-size: .74rem; color: var(--green); }
@media (max-width: 480px) {
  .kmx-sum { margin-left: 0; flex-basis: 100%; }
  .kmx-sum .taniej { text-align: left; }
}

/* --- formularz --- */
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 16px; }
.field { display: grid; gap: 7px; min-width: 0; }
.field.full { grid-column: 1 / -1; }
.field label {
  font-size: .64rem; font-weight: 500;
  letter-spacing: .14em; text-transform: uppercase; color: #8b9097;
}
.field label b { color: var(--red2); }
.field input, .field textarea, .field select {
  width: 100%;
  background: rgba(255,255,255,.045);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 13px;
  padding: 0 15px;
  height: 48px;
  color: var(--ink);
  font-size: .9rem;
  transition: border-color .22s, background .22s, box-shadow .22s;
}
.field input::placeholder { color: #6d737a; }
.field input:hover, .field textarea:hover { border-color: rgba(255,255,255,.2); }
.field input:focus, .field textarea:focus, .field select:focus {
  outline: none; border-color: rgba(255,255,255,.5);
  background: rgba(255,255,255,.08);
  box-shadow: 0 0 0 4px rgba(255,255,255,.06);
}
.field textarea { min-height: 90px; height: auto; padding: 13px 15px; resize: vertical; }
.field input.err { border-color: var(--red); background: rgba(227,34,39,.07); }

/* --- kod rabatowy ---
   Pole z przyciskiem w jednej linii: procent zależy od kodu, więc klient musi
   go sprawdzić, zanim wyśle zgłoszenie — inaczej kwota obok pokazywałaby cenę
   sprzed rabatu. Przycisk ma wysokość pola (48 px, nie 44 jak w hero), żeby
   oba stały równo w siatce formularza. */
.kod-wiersz { display: flex; gap: 8px; align-items: stretch; }
.kod-wiersz input { flex: 1 1 auto; min-width: 0; }
/* Selektor z dwoma klasami, a nie sam .kod-btn: mobilna reguła hero
   (.hf-all { width: 100% }) stoi w tym pliku niżej i przy równej wadze
   wygrywałaby kolejnością — przycisk zjadał wtedy całą szerokość wiersza,
   a z pola kodu zostawał kikut na trzy znaki. Tak samo broni się przycisk
   w pasku wyceny (.bk-pasek .btn). */
.kod-wiersz .kod-btn { flex: none; width: auto; height: 48px; padding: 0 20px; }
/* Zajęty przycisk zostaje widoczny, ale nie klikalny; .btn[disabled] gasi go
   do 45% i to wystarczy, żeby było widać, że coś się dzieje. */
.kod-stan {
  font-size: .78rem; line-height: 1.4; color: var(--dim);
}
.kod-stan.ok { color: var(--green); }
.kod-stan.err { color: var(--red2); }
.kod-stan b { color: var(--ink); font-weight: 500; }

/* --- „gdzie znajdę?" przy numerze blankietu ---
   Jedyne pole formularza, którego klient nie zna z pamięci i którego zwykle
   szuka nie tam, gdzie trzeba (numer z pola 5 to nie numer blankietu).
   Odnośnik stoi w linii etykiety, żeby nie rozpychać siatki pól, a okno
   pokazuje odwrocie prawa jazdy z zaznaczonym numerem. */
.field-top { display: flex; align-items: baseline; flex-wrap: wrap; gap: 2px 8px; }
.pole-pomoc {
  flex: none;
  /* palec trafia w napis wysoki na 16 px tylko przypadkiem; pole klikalne
     rośnie paddingiem (razem 44 px), a ujemny margines trzyma napis w linii
     etykiety */
  padding: 14px 0; margin: -14px 0;
  font-size: .7rem; font-weight: 500; color: var(--red2);
  text-decoration: underline; text-decoration-style: dotted; text-underline-offset: 3px;
  transition: color .22s;
}
.pole-pomoc:hover { color: var(--ink); }
.pole-pomoc:focus-visible { outline: 2px solid var(--red2); outline-offset: 3px; border-radius: 3px; }

.pj-pomoc {
  position: fixed; inset: 0; z-index: 300;
  display: grid; place-items: center;
  background: rgba(6,6,7,.9);
  backdrop-filter: blur(14px);
  padding: 20px;
}
.pj-pomoc[hidden] { display: none; }
/* karta bez .glass: przezroczyste szkło w oknie, które samo rozmywa tło,
   Chromium renderuje na czarno (zagnieżdżony backdrop-filter) i w jasnym
   motywie wychodził czarny prostokąt z czarnym napisem */
.pj-pomoc-karta {
  position: relative; width: 100%; max-width: 520px;
  padding: 30px 28px 26px;
  background: var(--bg1);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-lg);
}
.pj-pomoc-karta h3 { margin: 0 0 10px; font-size: 1.15rem; font-weight: 500; letter-spacing: -.01em; }
.pj-pomoc-karta p { margin: 0; font-size: .88rem; line-height: 1.6; color: var(--dim); }
/* zdjęcie jest jasnym skanem, więc dostaje białe podłoże także w motywie
   ciemnym — inaczej róg blankietu zlewa się z kartą */
.pj-pomoc-karta img {
  display: block; width: 100%; height: auto;
  margin: 18px 0 14px;
  border-radius: 12px; border: 1px solid var(--line); background: #fff;
}
.pj-pomoc-karta p.pj-pomoc-uwaga { font-size: .78rem; color: #7e848b; }
.pj-pomoc-x {
  position: absolute; top: 12px; right: 12px;
  width: 34px; height: 34px; border-radius: 50%;
  background: rgba(255,255,255,.08); border: 1px solid var(--line);
  display: grid; place-items: center; font-size: .8rem;
  transition: background .22s, color .22s;
}
.pj-pomoc-x:hover { background: #fff; color: #0b0b0c; }
.consents {
  display: grid; gap: 12px;
  margin-top: 22px; padding-top: 20px;
  border-top: 1px solid rgba(255,255,255,.07);
}
.consent { display: flex; gap: 12px; align-items: flex-start; font-size: .79rem; line-height: 1.55; color: #9aa0a7; cursor: pointer; }
.consent input { width: 16px; height: 16px; accent-color: #fff; margin-top: 2px; flex: none; }
.consent a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.consent a:hover { color: #fff; }

/* --- podsumowanie --- */
.summary {
  position: sticky; top: calc(var(--nav-h) + 18px);
  padding: 0; overflow: hidden;
}
.sum-hero { position: relative; aspect-ratio: 16 / 8; overflow: hidden; }
.sum-hero img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 52%; }
.sum-hero::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(10,10,11,.1) 20%, rgba(10,10,11,.86));
}
.sum-hero .t { position: absolute; z-index: 2; left: 18px; right: 18px; bottom: 14px; }
.sum-hero b { display: block; font-size: .96rem; font-weight: 500; line-height: 1.25; letter-spacing: -.01em; }
.sum-hero span { display: block; font-size: .72rem; color: #b9bcc1; margin-top: 3px; }
.sum-body { padding: 20px 20px 22px; }

/* ---------- pasek wyceny na telefonie ----------
   Kwota przy kciuku, gdy pełne podsumowanie stoi poza ekranem. Pojawia się
   z pierwszym wybranym terminem (JS zdejmuje hidden), a klasa .przykryty
   zsuwa go w dół, gdy podsumowanie samo wjedzie w kadr. Na szerokich
   ekranach paska nie ma wcale: boczna kolumna z wyceną jest tam widoczna
   cały czas. */
.bk-pasek {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 90;
  display: none;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 10px clamp(14px, 4vw, 20px) calc(10px + env(safe-area-inset-bottom));
  /* Pełne tło z tokenu, bez szkła: półprzezroczysta czerń z backdrop-filter
     gubiła na Chrome pod Androidem własne tło i zdjęcia z galerii przebijały
     przez pasek na całą jasność (zrzut od właściciela, 08.09.2026). Przy 92%
     krycia rozmycia i tak nie było widać, więc nic nie ubywa. */
  background: var(--bg0);
  border-top: 1px solid var(--line);
  transition: transform .28s ease, opacity .28s ease;
}
.bk-pasek-info { display: flex; flex-direction: column; min-width: 0; }
.bk-pasek-info b { font-size: 1.12rem; font-weight: 700; font-variant-numeric: tabular-nums; }
/* > span, nie span: podpis pod kwotą jest bezpośrednim dzieckiem, a wewnątrz
   samej kwoty stoi jeszcze span z ceną po rabacie, który ma zostać duży */
.bk-pasek-info > span { font-size: .76rem; color: #91969d; }
/* kwota netto nad kwotą do zapłaty: jaśniejsza od podpisu pod spodem i
   z tymi samymi cyframi tabelarycznymi co brutto, ale wyraźnie mniejsza,
   żeby kwota do zapłaty została pierwsza; słowo „netto" jak „brutto" niżej */
.bk-pasek-info > .bk-pasek-netto { font-size: .84rem; font-weight: 600; color: #d8dade; font-variant-numeric: tabular-nums; }
.bk-pasek-info > .bk-pasek-netto small { font-size: .6rem; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: #8b9097; margin-left: 4px; }
/* width: auto nadpisuje mobilną regułę hero (.hf-all { width: 100% }) —
   w pasku przycisk stoi obok kwoty i nie może jej zgniatać */
.bk-pasek .btn { flex: none; width: auto; padding-left: 20px; padding-right: 20px; }
/* Kwota po rabacie razem z podpisem „brutto" nie łamie się w środku, a kwota
   oszczędności w opisie nie zostawia „taniej o 1" nad „346 zł" — przy braku
   miejsca cały fragment schodzi do następnej linii. Przycisk ma węższe
   pole (20 px zamiast 30), bo kolumna z kwotami potrzebuje tych 20 px. */
.bk-pasek-info b .bk-pasek-kwota { white-space: nowrap; }
.bk-pasek-info > span .taniej { white-space: nowrap; }
.bk-pasek.przykryty { transform: translateY(110%); opacity: 0; pointer-events: none; }
@media (max-width: 900px) {
  /* :not([hidden]) — inaczej display: flex wygrywałby z atrybutem hidden
     i pasek stałby na ekranie także bez wybranego terminu */
  .bk-pasek:not([hidden]) { display: flex; }
}

.sum-row {
  display: flex; justify-content: space-between; gap: 12px;
  padding: 8px 0; font-size: .84rem;
  border-bottom: 1px solid rgba(255,255,255,.055);
}
.sum-row:last-child { border-bottom: 0; }
/* wiersz tuż nad grubą kreską; bez tego kończyłby się własną hairline i pod
   nią, kilka pikseli niżej, stała druga linia */
.sum-row.bez-kreski { border-bottom: 0; }
/* Gruba kreska dzieli podsumowanie na dwie części: warunki najmu nad nią,
   rachunek pod nią. Mocniejsza od hairline między wierszami, żeby czytała się
   jako granica sekcji, a nie kolejny wiersz. */
.sum-sep {
  height: 2px; margin: 26px 0 18px;
  background: rgba(255,255,255,.4);
  border-radius: 2px;
}
/* Nagłówek rachunku: od tego miejsca nie dochodzą już pozycje, tylko liczy się
   to, co wyżej. Większy od wierszy, żeby kwota najmu i podatek czytały się pod
   nim jako drobny druk prowadzący do sumy. */
.sum-head {
  margin: 16px 0 4px;
  font-size: 1.02rem; font-weight: 600; letter-spacing: -.01em;
  color: var(--ink);
}
.sum-row span { color: #91969d; }
.sum-row b { font-weight: 500; text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.sum-row.muted b { color: #6f757c; font-weight: 400; }
.sum-row.extra span { color: #b6babf; }
/* dopłata za dowiezienie albo wieczorną godzinę; jaśniejsza niż pakiet, bo
   nie jest wyborem klienta, tylko konsekwencją terminu i miejsca */
.sum-row.fee span { color: #d8dade; }
/* rabat jako jedyny obniża kwotę, więc jako jedyny ma kolor */
.sum-row.rabat span, .sum-row.rabat b { color: var(--green); }
/* zapowiedź rabatu pod kalendarzem; ta sama zieleń, żeby zdanie i wiersz
   w podsumowaniu czytały się jako jedna rzecz */
.bk-rabat { color: var(--green); }
/* promocja nad rabatem: mocniejszy głos, bo to oferta, a nie drobny druk */
/* Zdanie o promocji idzie zwykłym kolorem podpowiedzi; na pomarańczowo
   tylko nazwa promocji, żeby akcent nie zalewał całego akapitu. */
.bk-promo-nazwa { color: var(--amber); font-weight: 600; }
/* Auto z dwiema promocjami dostaje wiersz na każdą i trzeci na rezygnację:
   złożone w jeden akapit zlewały się w ścianę tekstu, w której nie widać, że
   to dwie różne długości najmu do wyboru. */
.bk-promo-linia { display: block; }
.bk-promo-linia + .bk-promo-linia { margin-top: 6px; }
/* Rezygnacja z promocji: przycisk udaje zwykły odnośnik w zdaniu — to wybór
   w tekście, nie osobne działanie formularza. */
.bk-promo-off {
  padding: 0; border: 0; background: none;
  color: inherit; font: inherit; font-weight: 600;
  text-decoration: underline; text-underline-offset: 3px;
  cursor: pointer;
}
.bk-promo-off:hover { color: var(--ink); }

/* ---------- cena przed rabatem ----------
   Przekreślona kwota stoi przed tą do zapłaty: mniejsza i przygaszona, żeby
   wzrok szedł na liczbę, którą klient naprawdę zapłaci, a czerwona kreska
   mówiła bez słów, że tamta już nie obowiązuje. Rośnie i maleje razem z
   kwotą obok (em, nie px), więc ta sama para działa w pasku przy kciuku,
   w podsumowaniu i w zdaniu o promocji. */
.cena-stara {
  margin-right: .42em;
  color: var(--dim);
  font-size: .74em; font-weight: 400;
  text-decoration: line-through;
  text-decoration-color: rgba(227, 34, 39, .8);
  text-decoration-thickness: 1.5px;
}
.cena-nowa { font-variant-numeric: tabular-nums; }
/* ile schodzi z ceny; bursztyn ten sam co plakietka promocji w katalogu */
.taniej { color: var(--amber); font-weight: 600; }
.sum-total {
  display: flex; justify-content: space-between; align-items: baseline; gap: 12px;
  margin-top: 14px; padding-top: 16px;
  border-top: 1px solid rgba(255,255,255,.14);
}
.sum-total > span { font-size: .64rem; font-weight: 500; letter-spacing: .18em; text-transform: uppercase; color: #8b9097; }
.sum-total b { font-size: 1.65rem; font-weight: 500; letter-spacing: -.015em; font-variant-numeric: tabular-nums; }
/* słowo „brutto" przy kwocie do zapłaty (ramka podsumowania i pasek na
   telefonie); pojawia się tylko przy cenach netto */
.sum-total b small, .bk-pasek-info b small { font-size: .62rem; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: #8b9097; margin-left: 4px; }
/* dwa wiersze zamykające rachunek przy cenach netto: suma netto i podatek */
.sum-row.netto span { color: #d8dade; }
.sum-row.vat span, .sum-row.vat b { color: #91969d; font-size: .82rem; }
/* Słowo „brutto" przy pakiecie i dopłacie: te kwoty są końcowe, bo podatek
   dotyczy samego najmu. Idzie tą samą szarością co etykiety wierszy, żeby
   liczba obok została pierwsza. */
/* to samo drobnym drukiem przy kwocie najmu, tyle że słowem „netto": podatek
   dochodzi dopiero wiersz niżej */
.sum-row b .sum-brutto, .sum-row b .sum-netto { font-size: .62rem; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: #8b9097; margin-left: 5px; }
.sum-note { font-size: .72rem; line-height: 1.5; color: #7e848b; margin: 10px 0 16px; }
/* dopisek przy limicie kilometrów: zwykłym pismem, nie wersalikami jak „brutto",
   bo to zdanie z liczbą, a nie etykieta jednostki */
.sum-row b .sum-km { font-size: .72rem; font-weight: 400; color: #8b9097; margin-left: 6px; white-space: nowrap; }

.summary .btn { width: 100%; }
.sum-alert {
  margin-top: 14px; padding: 12px 15px; border-radius: 11px;
  background: rgba(227,34,39,.1); border: 1px solid rgba(227,34,39,.35);
  color: #ffb0b3; font-size: .8rem; line-height: 1.5; display: none;
}
.sum-alert.show { display: block; }

/* --- sukces rezerwacji --- */
.success-overlay {
  position: fixed; inset: 0; z-index: 200;
  display: none; place-items: center;
  background: rgba(8,8,9,.82);
  backdrop-filter: blur(16px);
  padding: 20px;
}
.success-overlay.show { display: grid; }
.success-card { max-width: 520px; padding: 44px 40px; text-align: center; }
.success-card .ok-ico {
  width: 70px; height: 70px; margin: 0 auto 22px;
  border-radius: 50%;
  display: grid; place-items: center;
  background: rgba(47,191,113,.12); border: 1px solid rgba(47,191,113,.45);
  color: var(--green);
}
.success-card .ok-ico svg { width: 32px; height: 32px; }
.success-card h3 { font-size: 1.4rem; margin: 0 0 8px; }
.success-card .res-id { font-size: 1.02rem; letter-spacing: .08em; font-weight: 500; }
.success-card p { color: var(--dim); font-size: .9rem; }

/* ---------- lightbox ---------- */
.lightbox {
  position: fixed; inset: 0; z-index: 300;
  display: none; place-items: center;
  background: rgba(6,6,7,.93);
  backdrop-filter: blur(14px);
  padding: 4vmin;
}
.lightbox.show { display: grid; }
.lightbox img { max-width: 100%; max-height: 88vh; border-radius: 14px; box-shadow: var(--shadow-lg); }
.lightbox-close {
  position: absolute; top: 22px; right: 26px;
  width: 46px; height: 46px; border-radius: 50%;
  background: rgba(255,255,255,.08); border: 1px solid var(--line);
  display: grid; place-items: center; font-size: 1.1rem;
}
.lightbox-close:hover { background: #fff; color: #0b0b0c; }

/* ---------- toast ---------- */
.toast {
  position: fixed; bottom: 26px; left: 50%; transform: translate(-50%, 20px);
  z-index: 400; padding: 14px 24px; border-radius: 999px;
  background: rgba(20,20,23,.92); border: 1px solid var(--line);
  backdrop-filter: blur(18px);
  box-shadow: var(--shadow-lg);
  font-size: .88rem;
  opacity: 0; pointer-events: none;
  transition: .35s cubic-bezier(.2,.8,.2,1);
}
.toast.show { opacity: 1; transform: translate(-50%, 0); }
.toast.err { border-color: rgba(227,34,39,.5); color: #ffb0b3; }
.toast.ok { border-color: rgba(47,191,113,.45); color: #9fe8c3; }

/* ---------- animacje wejścia ---------- */
.rv { opacity: 0; transform: translateY(22px); transition: opacity .8s ease, transform .8s cubic-bezier(.2,.8,.2,1); }
.rv.in { opacity: 1; transform: none; }
.rv-d1 { transition-delay: .08s; } .rv-d2 { transition-delay: .16s; }
.rv-d3 { transition-delay: .24s; } .rv-d4 { transition-delay: .32s; }

/* ---------- responsywność ---------- */
@media (max-width: 1080px) {
  .answers-grid { grid-template-columns: .75fr 1.25fr; gap: 64px; }
  .drive-story-media { clip-path: inset(15% 15% 15% 15% round 2px); }
  .car-layout, .booking-layout { grid-template-columns: 1fr; }
  /* W jednej kolumnie cennik ma iść zaraz po zdjęciach, a dane techniczne na
     koniec; opakowanie lewej kolumny znika, żeby dało się je przestawić. */
  .car-main { display: contents; }
  .gallery { order: 1; }
  .price-rail { order: 2; }
  .car-data { order: 3; }
  .price-rail, .summary { position: static; }
  /* Na wąskim ekranie wszystkie rozdziały wracają do lewej. Samo text-align
     nie wystarczy: nadpis jest flexem, a kreska rysuje się od swojej krawędzi —
     bez tych trzech reguł wiersz „02 · DOSTAWA" zostawał przy prawej. */
  .chap-copy, .chap--right .chap-copy { max-width: none; margin-left: 0; text-align: left; }
  .chap--right .chap-no { justify-content: flex-start; }
  .chap--right .chap-no i { transform-origin: left; }
  .chap--right .chap-text { margin-left: 0; }
  .booking-layout { gap: 16px; }
  /* Bez podziału na lewo/prawo cała siła musi iść w pion — tekst leży tu
     w dolnej połowie, często na masce auta. Zmierzone bez tego: nadpis 2,8:1,
     akapit 3,1:1. */
  .chap-shade, .chap--right .chap-shade {
    background:
      linear-gradient(180deg, #000 0%, rgba(0,0,0,.35) 12%, transparent 28%),
      linear-gradient(180deg, transparent 22%, rgba(0,0,0,.55) 44%,
                      rgba(0,0,0,.84) 66%, rgba(0,0,0,.94) 86%, #000 100%);
  }
  /* na telefonie karta przy 66vw robi się pionowa i mocno przycina kadr —
     szersza i niższa trzyma proporcję bliżej zdjęcia */
  /* na telefonie karta 5:3 przy 66vw jest za niska na tekst — szersza
     i w proporcji 4:3 trzyma i kadr, i czytelny blok w rogu */
  /* na telefonie wracamy do wiązania z szerokością: przy wysokim, wąskim
     ekranie wiązanie z wysokością robiło z karty pionowy prostokąt */
  .fleet-card, .fleet-intro { flex: 0 0 88vw; height: auto; max-width: none; aspect-ratio: 4 / 3; }
  .cat-search { flex: 1; }
  .why-services { grid-template-columns: minmax(0, .82fr) minmax(500px, 1.18fr); }
  .why-services-copy { width: 94%; }
  /* Dolne granice muszą tu zejść niżej niż w układzie szerokim: druga kolumna ma
     min. 500px, więc między 721 a ~900px kolumna tekstu zwęża się do ~160px. */
  .why-services-copy h2 { font-size: clamp(1.6rem, 3.6vw, 3.1rem); }
  .why-services-lead { font-size: clamp(.74rem, 1.1vw, 1.05rem); }
}
@media (max-width: 720px) {
  .brand-strip-list {
    min-height: 34px;
    grid-template-columns: repeat(9, minmax(0, 1fr));
    padding-inline: 0;
  }
  .brand-strip-item {
    gap: 0;
  }
  .brand-strip-item img { width: 23px; height: 23px; }
  .brand-strip-item--audi img,
  .brand-strip-item--ford img,
  .brand-strip-item--camaro img { width: 31px; }
  .brand-strip-item--mclaren img { width: 56px; height: 42px; }
  .brand-strip-item span { display: none; }
  .hero-brands { margin-top: 20px; }
  .drive-story { height: 330svh; }
  .drive-story-pin { min-height: 560px; }
  .drive-story-media { clip-path: inset(18% 7% 18% 7% round 2px); }
  .drive-film { object-position: 53% center; }
  .drive-story-intro { width: 94vw; }
  .drive-story-intro p { margin-bottom: 16px; font-size: .58rem; }
  .drive-story-intro h2 { font-size: clamp(2.5rem, 12vw, 4.6rem); line-height: .93; }
  .drive-story-copy {
    left: 16px;
    right: 16px;
    bottom: 76px;
    width: auto;
    min-height: 300px;
  }
  .drive-copy h3 { font-size: clamp(2.35rem, 12vw, 4rem); }
  .drive-copy > p:not(.drive-kicker) { max-width: 33ch; margin-top: 16px; font-size: .87rem; }
  .drive-film-cta { margin-top: 22px; font-size: .66rem; }
  .drive-kicker { margin-bottom: 14px; font-size: .58rem; letter-spacing: .2em; }
  .drive-story-ui { left: 16px; right: 16px; bottom: 22px; grid-template-columns: 1fr auto; gap: 14px; }
  .drive-story-ui > span { display: none; }
  .drive-story-vignette {
    background:
      linear-gradient(180deg, rgba(0,0,0,.48), transparent 25%, transparent 48%, rgba(0,0,0,.9)),
      linear-gradient(90deg, rgba(0,0,0,.35), transparent 75%);
  }
  .drive-scene[data-scene="0"] img { object-position: 58% center; }
  /* Nad panelem nie stoi już żadna plansza z hasłem, więc odstęp od kafli
     floty musi dać sama sekcja; przy zerze karta auta dotykała jej krawędzi. */
  .ph-art { padding-top: 44px; }
  .why-services {
    width: calc(100% - 16px);
    min-height: 0;
    grid-template-columns: 1fr;
  }
  .why-services-intro { min-height: max(620px, 78svh); }
  .why-services-bg { object-position: 42% 62%; }
  .why-services-shade {
    /* Uwaga przy edycji: ta reguła podmienia całe `background`, a nie dokłada
       warstwę — każda zmiana w wersji szerokoekranowej musi tu trafić osobno. */
    background:
      linear-gradient(180deg, rgba(12,13,14,.62), rgba(12,13,14,.42) 42%, rgba(18,19,20,.92) 100%),
      linear-gradient(90deg, rgba(14,15,16,.94), rgba(14,15,16,.6) 82%);
  }
  .why-services-copy {
    width: 100%;
    padding: 64px 20px 0;
  }
  .why-services-copy h2 {
    /* szersza miara niż wcześniej — przy świetle .display te same słowa
       schodziły o wiersz niżej */
    max-width: 17ch;
    font-size: clamp(2.1rem, 9.2vw, 2.75rem);
  }
  .why-services-lead {
    max-width: 34ch;
    margin-top: 28px;
    font-size: .78rem;
  }
  /* ---------- panel korzyści jako harmonijka ----------
     Na szerokim ekranie cztery wiersze dzielą stałą wysokość kadru i opis
     pojawia się w miejscu, które i tak stoi puste. Przeniesione wprost na
     telefon dawało to panel wysoki na 880 px (a poniżej 400 px nawet 980 px),
     w którym widać było wyłącznie cztery numery z tytułami: prawie tysiąc
     pikseli przewijania na cztery wiersze tekstu, a opis wymagał dotknięcia.

     Tutaj wiersz ma wysokość swojej treści, a opis rozwija się pod tytułem.
     Zamknięty panel to około 300 px zamiast 880, otwarty wiersz dokłada tyle,
     ile naprawdę zajmuje opis. Rozwijanie idzie przez grid-template-rows
     0fr → 1fr, więc animuje się bez zgadywanej wysokości i bez dodatkowego
     opakowania w HTML. */
  .why-panel {
    --wp-pad: 18px;
    --wp-no: 44px;
    --wp-gap: 14px;
    width: 100%;
    aspect-ratio: auto;
    min-height: 0;
    display: block;
    align-self: stretch;
    justify-self: stretch;
    border-top: 1px solid rgba(255,255,255,.09);
    border-left: 0;
  }
  .why-panel-item {
    display: grid;
    grid-template-rows: auto 0fr;
    padding: 20px var(--wp-pad);
    transition: grid-template-rows 340ms cubic-bezier(.23,1,.32,1), background 200ms ease;
  }
  .why-panel-item.is-active,
  .why-panel-item[aria-expanded="true"] { grid-template-rows: auto 1fr; }
  .why-panel-top {
    position: static;
    right: auto;
    left: auto;
    top: auto;
    /* trzecia kolumna to znak rozwinięcia; bez niego nic nie mówi, że wiersz
       da się dotknąć */
    grid-template-columns: var(--wp-no) minmax(0, 1fr) 22px;
    transform: none;
  }
  .why-panel-top::after {
    content: "";
    width: 13px; height: 13px;
    justify-self: end;
    border-right: 1.5px solid rgba(255,255,255,.55);
    border-bottom: 1.5px solid rgba(255,255,255,.55);
    transform: rotate(45deg) translate(-3px, -3px);
    transition: transform 300ms cubic-bezier(.23,1,.32,1);
  }
  .why-panel-item.is-active .why-panel-top,
  .why-panel-item[aria-expanded="true"] .why-panel-top { transform: none; }
  .why-panel-item.is-active .why-panel-top::after,
  .why-panel-item[aria-expanded="true"] .why-panel-top::after {
    transform: rotate(225deg) translate(-3px, -3px);
  }
  .why-panel-no { font-size: 1.25rem; }
  .why-panel-top strong { font-size: 1.25rem; }
  .why-panel-description {
    position: static;
    right: auto;
    bottom: auto;
    left: auto;
    /* min-height: 0 jest tu konieczne: bez niego wiersz 0fr i tak zajmuje
       wysokość treści i harmonijka nigdy się nie domyka */
    min-height: 0;
    overflow: hidden;
    max-width: none;
    padding-left: calc(var(--wp-no) + var(--wp-gap));
    font-size: .8rem;
    transform: none;
    transition: opacity 220ms ease, padding-top 300ms ease;
  }
  .why-panel-item.is-active .why-panel-description,
  .why-panel-item[aria-expanded="true"] .why-panel-description { padding-top: 12px; }
  .why-panel-item::after {
    background: linear-gradient(90deg, rgba(9,10,11,.93), rgba(9,10,11,.82) 60%, rgba(9,10,11,.88));
  }
  @media (max-width: 400px) {
    /* Na najwęższych ekranach „Dostawa i bezpośredni kontakt" łamie się na dwie
       linie; węższe kolumny boczne oddają miejsce tytułowi. */
    .why-panel { --wp-pad: 15px; --wp-no: 38px; --wp-gap: 12px; }
    .why-panel-no,
    .why-panel-top strong { font-size: 1.12rem; }
  }
  .ph-stats { width: 100%; gap: 8px; margin-top: 62px; text-align: center; }
  /* Podpisy liczb wyrównane do lewej mają całą szerokość kolumny; miara 12ch
     z wersji wyśrodkowanej łamała je w poszarpaną drabinkę. */
  .why-services-intro .ph-stats { width: 100%; padding: 48px 20px 54px; gap: 12px; }
  .why-services-intro .ph-stats p { max-width: none; font-size: .64rem; }
  .ph-stats > div { justify-items: center; gap: 8px; }
  .ph-stats strong { justify-content: center; font-size: clamp(1.65rem, 7.5vw, 2.25rem); }
  .ph-stats p { max-width: 12ch; font-size: .59rem; line-height: 1.35; }
  .answers { padding-block: 92px 110px; }
  .answers-grid { grid-template-columns: 1fr; gap: 72px; }
  .answers-head { position: static; }
  .answers-index { margin-bottom: 40px; }
  .answers-head h2 { font-size: clamp(3rem, 16vw, 5.6rem); }
  .answers-contact { margin-top: 34px; }
  .answers-list summary { grid-template-columns: 28px 1fr 22px; gap: 12px; padding: 23px 0; font-size: 1rem; line-height: 1.35; }
  .answers-list .faq-body { margin-left: 40px; padding: 0 14px 25px 0; font-size: .84rem; }
  /* Na wąskim ekranie dwie kolumny nie mają z czego żyć: nagłówek i zdanie
     z przyciskiem stają jedno pod drugim, a kadr robi się wyższy niż szerszy,
     bo inaczej z auta zostałby pasek. */
  .final-drive { padding-top: clamp(44px, 11vw, 72px); }
  .final-drive-copy {
    grid-template-columns: minmax(0, 1fr);
    gap: 18px;
    padding-inline: 20px;
  }
  .final-drive-copy h2 { max-width: 14ch; }
  .final-drive-card { margin-inline: 20px; min-height: clamp(360px, 56svh, 520px); }
  .final-drive-cta { width: auto; padding-inline: 34px; }
  /* Pasek nawigacji schodzi do 16 px dopiero TUTAJ, więc szyna i stopka muszą
     zmieniać wcięcie w tym samym progu. Wcześniej ta para siedziała w progu
     1080 px i między 721 a 1080 px karta stała o 8–18 px na lewo od logo. */
  .fleet-rail { padding-inline: 16px; }
  .fleet-view { scroll-padding-inline-start: 16px; }
  /* Etykieta znika z nadpisu na wąskim ekranie. Pełny ciąg („Isle of Man Green
     • BMW M3 Competition xDrive") łamał się na dwa wiersze i wypychał cały blok
     tekstu w górę karty, na jasną część zdjęcia. Sama nazwa modelu mieści się
     w jednym wierszu, a etykieta i tak zwykle powtarza to, co jest w haśle. */
  .fleet-no em, .fleet-no i { display: none; }
  /* Karta 4:3 na telefonie ma ~257 px wysokości, więc ten sam gradient
     w procentach daje o połowę mniej pikseli przyciemnienia niż na desktopie
     i blok tekstu ląduje na jasnym niebie. Zmierzone: nadpis miał kontrast
     0,82:1, czyli tło jaśniejsze od liter. Stopnie przesunięte wyżej. */
  .fleet-card::after, .fleet-intro::after {
    background:
      linear-gradient(0deg, rgba(0,0,0,.96) 0%, rgba(0,0,0,.9) 30%, rgba(0,0,0,.84) 52%,
                      rgba(0,0,0,.5) 70%, rgba(0,0,0,.16) 86%, transparent 100%),
      linear-gradient(90deg, rgba(0,0,0,.45) 0%, transparent 52%);
  }
  /* nadpis to najmniejszy tekst na karcie, więc na telefonie idzie bliżej bieli
     — sam gradient nie wyciągał go do progu czytelności */
  .fleet-no { color: #d7d9dc; }
  /* plakietka lokalizacji schodzi razem z menu — wejście na mapę jest
     w rozwijanym menu, a w pasku nie ma dla niej miejsca obok burgera */
  .nav-links, .nav .btn:not(.nav-call), .nav-city { display: none; }
  .nav-burger { display: flex; }
  /* ramka telefonu wraca przy burgerze, ale mówi krótko „Zadzwoń";
     pełny numer nie mieści się obok logo i lupy. Wysokość zostaje równa
     lupie, żeby obie krawędzie stały w jednej linii; węższa wyściółka,
     bo napis jest krótki, a o miejsce walczy jeszcze burger. */
  .nav .nav-call { display: inline-flex; height: 40px; padding: 0 14px; }
  .nav-call-nr { display: none; }
  .nav-call-cta { display: inline; }
  .nav-logo .logo { font-size: 16px; }
  /* pasek sięga krawędzi, więc na wąskim ekranie o miejsce walczą logo,
     lupa i burger — ściągamy odstępy, inaczej burger wychodzi poza kadr */
  .nav-inner { gap: 12px; padding-inline: 16px; }
  /* panel wyszukiwarki jest szerszy niż odległość lupy od lewej krawędzi,
     więc kotwiczony do przycisku uciekał poza ekran — na wąskim widoku
     rozpinamy go między krawędziami okna zamiast wieszać pod lupą */
  .search-panel {
    position: fixed;
    top: calc(var(--nav-h) - 8px);
    left: 16px; right: 16px;
    width: auto;
  }
  /* Na telefonie o szerokość walczy siedem kolumn naraz, więc kalendarz
     oddaje wewnętrzny margines i część odstępu: koło dnia ma zostać w rozmiarze
     wygodnym dla palca, a to jedyne miejsce, z którego można wziąć piksele. */
  .cal-wrap { grid-template-columns: 1fr; gap: 24px; padding: 14px 4px 16px; --cal-luz: 4px; }
  .form-grid { grid-template-columns: 1fr; }
  .rules { grid-template-columns: 1fr; }
  .bk-block { padding: 22px 20px 24px; }
  .bk-steps { grid-template-columns: 1fr; gap: 8px; }
  .bk-step { padding: 11px 15px; }
  .bk-pills { grid-template-columns: 1fr 1fr; }
  .bk-pills .bk-pill:last-child { grid-column: 1 / -1; }
  .time-grid { grid-template-columns: repeat(auto-fill, minmax(68px, 1fr)); }
  /* Na telefonie dwie kolumny godzin dałyby po trzy kafelki w rzędzie, więc
     odbiór i zwrot ustawiają się jeden pod drugim; podpis nad każdą siatką
     dalej mówi, o którą porę chodzi. Podział na kolumny zostaje ten sam, bo
     kolumna rozciągnięta na całą szerokość ekranu ma na niego miejsce. */
  .time-two { grid-template-columns: 1fr; gap: 10px; }
  /* Na wąskim ekranie osiem miniatur w rzędzie zrobiłoby się nieklikalne,
     więc pasek przesuwa się palcem zamiast łamać na kilka rzędów. */
  .gallery-thumbs {
    display: flex;
    width: 100%;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
  }
  .gallery-thumbs::-webkit-scrollbar { display: none; }
  .gallery-thumbs button { flex: 0 0 98px; scroll-snap-align: start; }
}
/* Poniżej ~560 px pełny znak z podpisem nie mieści się już obok języka, lupy
   i burgera — burger lądował poza prawą krawędzią i menu było nie do otwarcia.
   Zostaje sam monogram OFC; pełny znak dalej stoi w stopce i preloaderze. */
@media (max-width: 560px) {
  .nav-logo .logo-rule, .nav-logo .logo-text { display: none; }
}
/* ---------- kalendarz jako arkusz ----------
   Rozwinięcie w górę potrzebuje nad paskiem tyle miejsca, ile ma wysokości.
   Na wąskim ekranie tego miejsca nie ma w poziomie, na niskim w pionie — więc
   w obu przypadkach panel odkleja się od paska, siada przy dolnej krawędzi
   ekranu i przyciemnia tło. Warunek jest jednym zapytaniem, bo reguły są
   dokładnie te same.

   Granica wysokości wynika z rachunku, nie z okrągłej liczby: pasek stoi tuż
   nad dolną krawędzią hero, panel ma około 540 px, a przy 800 px widoku jego
   górna krawędź ląduje tuż pod nawigacją. Niżej zaczynałby wychodzić poza
   ekran, więc od tego miejsca w dół rządzi arkusz. */
@media (max-width: 760px), (max-height: 800px) {
  .hf-scrim {
    display: block;
    position: fixed; inset: 0; z-index: 29;
    background: rgba(6, 6, 7, .62);
    animation: hf-fade .2s ease-out;
    /* Machnięcie zaczęte na kurtynie przewijało stronę POD arkuszem; po paru
       gestach pod panelem stała już szyna aut i nietrafione „Gotowe" (tap
       w kurtynę zamyka arkusz) zostawiało palec nad kartą auta — następne
       dotknięcie otwierało stronę auta zamiast domknąć wybór terminu. */
    touch-action: none;
  }
  /* Otwarty arkusz ma być jedynym, co przyjmuje dotyk — dwiema warstwami
     obrony, bo strona jest pełna własnych z-indexów i pojedynczy przepis
     zawsze coś przepuszczał: najpierw nawigację (100), potem odnośniki kart
     „Poznaj naszą flotę" (z-index: 2–3 liczone w głównym kontekście strony,
     czyli PONAD warstwą hero z kurtyną). Klasę hf-arkusz zakłada shared.js
     na czas otwartego arkusza.

     1) Dotyk: cała strona traci zdarzenia wskaźnika; odzyskują je tylko
     arkusz i kurtyna (tap = zamknięcie). Nawet element namalowany nad
     kurtyną przez jakiś przyszły z-index nie przyjmie stuknięcia — hit-test
     omija martwe elementy i spada na kurtynę pod nimi. Toast (z-index: 400)
     dalej widać nad arkuszem; zdarzeń nie dostaje, ale tak ma zawsze
     (pointer-events: none w jego bazie) — nie wolno mu ich tu przywracać,
     bo pusty kontener toastu wisi na stałe nad dołem ekranu i łapałby
     stuknięcia w kurtynę.

     2) Malowanie: na stronie miasta kurtyna siedzi w warstwie hero
     (.hero-content, z-index: 2) i z jej środka nie da się jej wynieść wyżej,
     więc nad nawigację i sekcje idzie cała warstwa. Na stronie floty kurtyna
     stoi w głównym kontekście (29) — tam wystarczy zdjęcie nawigacji (100),
     pigułki ustawień (95) i podpowiedzi „przesuń" (90) w dół. */
  body.hf-arkusz { pointer-events: none; }
  body.hf-arkusz .hf-cal,
  body.hf-arkusz .hf-scrim { pointer-events: auto; }
  body.hf-arkusz .hero-content { z-index: 101; }
  body.hf-arkusz .nav,
  body.hf-arkusz .prefs-dock,
  body.hf-arkusz .hint-przesun { z-index: 1; }
  /* Wjazd hero (html.intro wyżej) trzyma na formularzu transform i filtr,
     a każde z nich robi z formularza układ odniesienia dla position: fixed —
     kurtyna i arkusz otwarte w trakcie wjazdu kryły wtedy sam formularz
     (361 × 250 px) zamiast okna i dotyk obok przechodził do strony. Otwarty
     arkusz i tak wszystko zasłania, więc wjazd dokańcza się natychmiast.
     !important, bo reguła wjazdu z trzema klasami jest bardziej szczegółowa. */
  body.hf-arkusz .hero-find {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    transition: none !important;
  }
  .hf-cal {
    position: fixed;
    top: auto; bottom: 12px;
    left: 50%; right: auto;
    width: min(600px, calc(100vw - 20px));
    /* Pasek nawigacji rysuje się NAD panelem (leży w kadrze hero, czyli
       w warstwie z-index: 2, a pasek ma 100), więc arkusz nie może sięgać pod
       niego. Przy oknie wysokim na 700 px nagłówek miesiąca i strzałki
       lądowały dokładnie pod znakiem firmowym, telefonem i burgerem. */
    max-height: calc(100svh - var(--nav-h) - 24px);
    overflow-y: auto;
    /* wnętrze panelu ma własny przewijak; po jego dnie gest nie może jechać
       dalej stroną pod kurtyną (patrz komentarz przy .hf-scrim wyżej) */
    overscroll-behavior: contain;
    animation: hf-sheet .24s cubic-bezier(.16, .86, .22, 1);
  }
  /* „Gotowe" zawsze w kadrze: panel bywa wyższy niż ekran i stopka lądowała
     poza nim — trzeba było jej szukać przewijaniem, a nietrafione dotknięcia
     lądowały obok arkusza. Stopka klei się więc do dna, a dni i godziny
     przewijają się pod nią; ujemne marginesy kładą ją też na wyściółce
     panelu, stąd własna wyściółka, kryjące tło (barwa panelu bez alfy,
     bo pod stopką suną komórki dni) i dolne zaokrąglenia arkusza. */
  .hf-cal-foot {
    position: sticky;
    bottom: -16px;
    margin: 15px -18px -16px;
    padding: 12px 18px 14px;
    background: rgb(16, 16, 19);
    border-radius: 0 0 22px 22px;
  }
  /* pigułka „Gotowe" rośnie do pełnego celu dotyku (44 px) */
  .hf-cal-done { padding: 11px 26px; }
}
@keyframes hf-fade { from { opacity: 0; } }
@keyframes hf-sheet { from { opacity: 0; transform: translateX(-50%) translateY(18px); } }

/* ---------- pasek wyszukiwania na węższym ekranie ----------
   Cztery pola w jednym rzędzie mieszczą się tylko na szerokim ekranie. Niżej
   pigułka łamie się na dwa wiersze: wybory (miasto, termin, godzina) zostają
   u góry, a szukanie auta schodzi pod nie na pełną szerokość. */
@media (max-width: 760px) {
  .hf-bar { flex-wrap: wrap; row-gap: 2px; }
  .hf-when { flex: 1 1 auto; justify-content: center; }
  /* Napis terminu centrował się w tym, co zostawało PO kalendarzyku, więc stał
     11 px w prawo od osi pigułki — obok „Szukaj" i miasta, które stoją w osi
     (lupa jest na wąskim ekranie ukryta, a strzałka miasta równoważy pinezkę).
     Ikona wychodzi z układu wiersza: pole odzyskuje pełną szerokość, a napis
     siada dokładnie na środku. Wyściółka po bokach zostaje symetryczna, żeby
     dłuższa wartość („28.08 → 30.08") nie weszła pod ikonę. */
  .hf-when .hf-ico { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); }
  .hf-when .hf-pick-btn { padding-inline: 20px; }
  .hf-sep--q { display: none; }
  .hf-q { flex: 1 1 100%; order: 8; }

  /* jeden miesiąc naraz; przewijanie kalendarza w bok byłoby gorsze niż
     przeskok strzałką */
  .hf-cal-months { grid-template-columns: 1fr; }
  .hf-cal-months .cal + .cal { display: none; }
  .hf-cal-months .cal:first-child .hf-nav-btn.next { visibility: visible; }
  .hf-cal .cal-day { font-size: .85rem; }
}

@media (max-width: 460px) {
  /* na wąskim ekranie miasto i szukajka nie mieszczą się obok siebie —
     pigułka rozwija się w kolumnę zaokrąglonych wierszy. Termin i godzina
     dzielą jeden wiersz: obie wartości są krótkie, a pasek rozbity na pięć
     rzędów zjadałby pół ekranu telefonu. */
  .hf-bar {
    border-radius: 24px;
    padding: 8px;
    gap: 6px;
  }
  /* Wcięcie w pionie siedzi na samym polu, a nie na wierszu: inaczej input ma
     24 px wysokości w 56-pikselowej pigułce i dotknięcie jej górnej krawędzi
     nie ustawia kursora. */
  .hf-field {
    justify-content: center;
    padding: 0 16px;
    border-radius: 18px;
    background: rgba(255, 255, 255, .05);
  }
  .hf-q input,
  .hf-city-btn,
  .hf-pick-btn { padding-block: 15px; }
  .hf-city { padding-left: 16px; }
  /* pole jest tu na całą szerokość paska, więc lista też — przyklejona do
     lewej krawędzi zasłaniałaby sąsiednie pole */
  .hf-city-list { left: 0; right: 0; min-width: 0; top: calc(100% + 8px); }
  .hf-city, .hf-q { flex: 1 1 100%; }
  .hf-when { flex: 1 1 100%; }
  .hf-q input { text-align: center; }
  /* napis centruje się w polu, a lupa jako osobny element flexa zostawała
     przy lewej krawędzi wiersza — bez niej pole wygląda jak sąsiednie */
  .hf-q .hf-ico { display: none; }
  /* wcięcie pola jest tu szersze niż w rzędzie wyżej, więc kalendarzyk
     (wyjęty z układu w zapytaniu o 760 px) odsuwa się razem z nim */
  .hf-when .hf-ico { left: 16px; }
  .hf-when .hf-pick-btn { padding-inline: 28px; }
  .hf-sep { display: none; }
  .hf-shell, .hf-all { width: 100%; }
  /* w finale przycisk stoi pod zdaniem i ma obejmować napis, a nie rozciągać
     się na kolumnę jak ten w hero */
  .final-drive-cta { width: auto; }
  .cat-grid { grid-template-columns: 1fr; }
}


/* ---------- pola formularzy na telefonie ----------
   iPhone przybliża całą stronę, gdy dotknięte pole ma litery mniejsze niż
   16 px, a po takim przybliżeniu trzeba ręcznie oddalać widok, żeby wrócić do
   formularza. Wszystkie pola do wpisywania dostają więc na wąskim ekranie
   równo 16 px; panel admina ma tę samą regułę u siebie. Pola wyboru (ptaszki)
   pomijamy — one przybliżenia nie wyzwalają.

   Ten blok musi stać po regułach bazowych: selektory mają tę samą ważność,
   a zapytanie o szerokość jej nie podnosi, więc decyduje kolejność. */
@media (max-width: 720px) {
  .field input, .field textarea, .field select,
  .bk-wlasny-pole input,
  .search-field input,
  .hf-q input { font-size: 16px; }
}

/* ---------- dostępność ruchowa ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001s !important; transition-duration: .001s !important; }
  .rv { opacity: 1; transform: none; }
  /* treść odsłonięta od razu, bez czekania na obserwator wejścia w kadr */
  .rvg > * { opacity: 1; transform: none; filter: none; }
  /* Ściana opinii ma własne zapytanie o ograniczony ruch, przy swoich
     regułach niżej w pliku: pas musi tam dostać przewijanie w bok, a ta sama
     waga selektora z bloku stojącego wyżej by z nimi przegrała. */
  .hero-bg img { animation: none; }
  .hero-video { display: none; }

  /* Skrócenie czasu animacji NIE wyłącza ruchu sterowanego przewijaniem —
     taka animacja nie ma czasu trwania, jej postęp bierze się z pozycji paska.
     Paralaksę, dryf treści i pasek postępu trzeba więc zdjąć osobno; to
     dokładnie ten rodzaj ruchu, który ta preferencja ma wyciszać. */
  .chap-media img, .chap-inner, .closer-inner { animation: none !important; }
  .chap-media img { transform: scale(1.14); }
  .chap-inner, .closer-inner { transform: none; }
  .drive-story { height: auto; }
  .drive-story-pin { position: relative; min-height: 100svh; }
  .drive-story-media { clip-path: inset(0); }
  .drive-film { transform: none !important; }
  .drive-story-out { opacity: 0 !important; }
  .drive-story-intro { display: none; }
  .drive-story-copy { opacity: 1; transform: none; }
  .drive-story-ui { display: none; }
  .featured-card,
  .featured-card img { animation: none !important; }
  .featured-card { clip-path: inset(0); opacity: 1; }
  .featured-card img { transform: none; }
  .ph-reveal,
  .ph-reveal img { animation: none !important; transform: none; filter: none; }
  .ph-reveal { opacity: 1; clip-path: inset(0); }

  /* Wejście sekcji „Cztery rzeczy" — stan docelowy od razu, bez czekania na
     obserwator. Bez tego treść zostałaby przezroczysta, gdyby skrypt nie
     doszedł do skutku. */
  .why-services-bg { transform: scale(1.025) !important; transition: none; }
  .why-panel-item::before { transform: scaleX(1); transition: none; }
  .why-panel-top { opacity: 1; translate: none; transition: none; }
}

/* ============================================================
   JĘZYK I MOTYW — pływająca pigułka w lewym dolnym rogu, ta sama na
   każdej stronie publicznej. Zeszła z paska nawigacji, bo to ustawienia
   widoku, a nie nawigacja: u dołu są pod ręką, a górny pasek zostaje
   przy telefonie i wyszukiwarce. Obsługa w js/ustawienia.js.
   ============================================================ */
.prefs-dock {
  position: fixed;
  left: clamp(14px, 2.6vw, 28px);
  bottom: calc(clamp(14px, 2.6vw, 28px) + env(safe-area-inset-bottom));
  /* pod nawigacją (100) i menu telefonu (99), nad treścią strony */
  z-index: 95;
  display: flex; align-items: center; gap: 4px;
  padding: 5px;
  border: 1px solid var(--line); border-radius: 999px;
  background: rgba(10, 10, 11, .62);
  backdrop-filter: blur(20px) saturate(140%);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
  transition: transform .28s ease;
}
.pref-btn {
  display: inline-flex; align-items: center; justify-content: center;
  height: 34px; min-width: 34px; padding: 0 11px;
  border: 1px solid transparent; border-radius: 999px;
  font-size: .68rem; font-weight: 500; letter-spacing: .14em;
  color: var(--dim);
  transition: color .25s, border-color .25s, background-color .25s;
}
.pref-btn:hover { color: var(--ink); background: rgba(255, 255, 255, .09); }
.pref-btn svg { width: 17px; height: 17px; }
/* ikona motywu pokazuje to, NA CO przełącza: w ciemnym księżyc → słońce */
.ikona-slonce { display: none; }
html[data-motyw="jasny"] .ikona-slonce { display: block; }
html[data-motyw="jasny"] .ikona-ksiezyc { display: none; }
/* ---------- pigułka ustawień na telefonie ----------
   Na szerokim ekranie pływa w lewym dolnym rogu i nikomu nie przeszkadza; na
   telefonie leżała dokładnie na treści. Zmierzone przypadki: zasłaniała dzień
   31 w kalendarzu rezerwacji, godzinę 13:00 w wyborze odbioru, przycisk
   „Wyczyść" w panelu terminu i pierwsze wiersze każdej sekcji tekstowej.
   Wychodzi więc z widoku i wraca dopiero w otwartym menu telefonu, gdzie ma
   całą dolną krawędź dla siebie. Wariant „w stopce" (ekran wyboru miasta) tego
   nie dotyczy: on nie pływa i nie ma tam menu. */
@media (max-width: 900px) {
  .prefs-dock:not(.prefs-dock--wstopce) { display: none; }
  body.menu-open .prefs-dock:not(.prefs-dock--wstopce) {
    /* nad przykryciem menu (99), pod paskiem nawigacji (100) */
    z-index: 99;
    left: 50%;
    bottom: calc(28px + env(safe-area-inset-bottom));
    display: flex;
    transform: translateX(-50%);
    background: rgba(255, 255, 255, .06);
  }
  /* 44 px w obu wymiarach; wcześniej 32 px, czyli poniżej progu, w który palec
     trafia bez celowania */
  .pref-btn { height: 44px; min-width: 44px; padding: 0 14px; font-size: .68rem; }
}

/* ============================================================
   MOTYW JASNY
   Zasada podziału: CHROM strony (nawigacja, stopka, dokumenty, katalogowe
   filtry, panele rezerwacji, plansze tekstowe) przechodzi na jasne
   powierzchnie; pasma zbudowane NA FOTOGRAFIACH (hero, szyna floty,
   filozofia, finał) zostają ciemne — to kadry, nie tło strony.
   Tokeny niżej łapią wszystko, co pisane var(...); reszta to punktowe
   nadpisania miejsc z zaszytą ciemną barwą.
   ============================================================ */
html[data-motyw="jasny"] {
  color-scheme: light;
  --bg0: #f5f4f2;
  --bg1: #fdfdfc;
  --bg2: #eae8e4;
  --ink: #17181b;
  --dim: #575c65;
  --line: rgba(23, 24, 27, .13);
  --glass-bg: rgba(255, 255, 255, .82);
  --glass-border: rgba(23, 24, 27, .13);
  --shadow-lg: 0 22px 60px rgba(40, 42, 60, .16);
}
html[data-motyw="jasny"] body::after { opacity: .05; filter: invert(1); }

/* nawigacja i menu */
html[data-motyw="jasny"] .nav.scrolled { background: rgba(250, 249, 247, .8); }
html[data-motyw="jasny"] .nav-links a::after, html[data-motyw="jasny"] .nav-city::after { background: rgba(23, 24, 27, .65); }
html[data-motyw="jasny"] .nav .nav-call { border-color: rgba(23, 24, 27, .14); }
html[data-motyw="jasny"] .nav-search-btn:hover,
html[data-motyw="jasny"] .nav-search.open .nav-search-btn,
html[data-motyw="jasny"] .nav .nav-call:hover { background: rgba(23, 24, 27, .06); border-color: rgba(23, 24, 27, .14); }
html[data-motyw="jasny"] .prefs-dock { background: rgba(250, 249, 247, .82); }
html[data-motyw="jasny"] .pref-btn:hover { background: rgba(23, 24, 27, .07); }
html[data-motyw="jasny"] .mobile-menu { background: rgba(248, 247, 245, .95); }

/* przyciski */
html[data-motyw="jasny"] .btn-primary { background: #17181b; color: #fff; box-shadow: 0 12px 34px rgba(35, 38, 50, .22); }
html[data-motyw="jasny"] .btn-primary:hover { background: #2b2d33; box-shadow: 0 16px 44px rgba(35, 38, 50, .3); }
html[data-motyw="jasny"] .btn-ghost { background: rgba(23, 24, 27, .05); border-color: rgba(23, 24, 27, .16); }

/* stopka */
html[data-motyw="jasny"] .footer--dark { background: var(--bg2); }

/* dokumenty (regulamin, polityka) */
html[data-motyw="jasny"] .doc-page { background: var(--bg0); }

/* strona auta: tło i panele */
html[data-motyw="jasny"] .car-page { background: var(--bg0); }
html[data-motyw="jasny"] .car-page .lg,
html[data-motyw="jasny"] .car-page .bk-block,
html[data-motyw="jasny"] .car-page .summary,
html[data-motyw="jasny"] .car-page .sum-hero,
/* ramka kalendarza ma na jasnym tle ten sam kolor co blok, w którym stoi;
   bez tego zostawała czarnym prostokątem z ledwo widocznymi dniami */
html[data-motyw="jasny"] .car-page .cal-wrap { background: var(--bg1); border-color: var(--line); }
/* Wiersze podsumowania mają barwy dobrane pod ciemne tło (jasne szarości od
   #91969d do #d8dade). Na białej karcie „Wydanie i odbiór o 20:00" i „Razem
   netto" ginęły w tle, więc w jasnym motywie idą tokenami: opis przygaszony,
   kwota atramentem. Wiersz podatku zostaje o stopień lżejszy od reszty, bo
   to podsuma, a nie pozycja rachunku. */
html[data-motyw="jasny"] .sum-row span,
html[data-motyw="jasny"] .sum-row.fee span,
html[data-motyw="jasny"] .sum-row.extra span,
html[data-motyw="jasny"] .sum-row.netto span { color: var(--dim); }
html[data-motyw="jasny"] .sum-row b { color: var(--ink); }
html[data-motyw="jasny"] .sum-row.muted b { color: var(--dim); }
html[data-motyw="jasny"] .sum-row.vat span,
html[data-motyw="jasny"] .sum-row.vat b { color: var(--dim); }
html[data-motyw="jasny"] .sum-row b .sum-brutto,
html[data-motyw="jasny"] .sum-row b .sum-netto { color: var(--dim); }
html[data-motyw="jasny"] .sum-row b .sum-km { color: var(--dim); }
/* biała karta: kreska sekcji z tokenów, inaczej biały pasek ginie w tle */
html[data-motyw="jasny"] .sum-sep { background: rgba(23, 24, 27, .34); }
html[data-motyw="jasny"] .sum-total > span,
html[data-motyw="jasny"] .sum-total b small,
html[data-motyw="jasny"] .bk-pasek-info b small,
html[data-motyw="jasny"] .bk-pasek-info > .bk-pasek-netto small { color: var(--dim); }
/* kwota netto w pasku na jasnym tle: atramentem, nie jasną szarością z ciemnego motywu */
html[data-motyw="jasny"] .bk-pasek-info > .bk-pasek-netto { color: var(--ink); }
html[data-motyw="jasny"] .car-lede-text p { color: var(--dim); }
html[data-motyw="jasny"] .back-link:hover { color: var(--ink); }
html[data-motyw="jasny"] .back-link:hover::after { background: rgba(23, 24, 27, .6); }

/* pola formularza, kafelki godzin, kalendarz — zaszyte biało-przezroczyste
   ramki znikają na jasnym tle, więc dostają ciemne odpowiedniki */
html[data-motyw="jasny"] .field input,
html[data-motyw="jasny"] .field textarea,
html[data-motyw="jasny"] .field select { background: #fff; border-color: var(--line); }
/* podpowiedź do numeru blankietu: mleczne tło krzyżyka ginie na jasnej karcie */
html[data-motyw="jasny"] .pj-pomoc { background: rgba(240, 241, 243, .88); }
html[data-motyw="jasny"] .pj-pomoc-x { background: rgba(23, 24, 27, .05); }
html[data-motyw="jasny"] .pj-pomoc-x:hover { background: var(--ink); color: var(--bg0); }
html[data-motyw="jasny"] .time-chip,
html[data-motyw="jasny"] .bk-pill,
html[data-motyw="jasny"] .rule,
html[data-motyw="jasny"] .extra-pick,
html[data-motyw="jasny"] .monthly-card,
html[data-motyw="jasny"] .cal-month,
/* dni tylko w kalendarzu rezerwacji (.cal-wrap); ten sam kalendarz w hero
   (.hf-cal) wisi na ciemnym panelu i zachowuje barwy motywu ciemnego */
html[data-motyw="jasny"] .cal-wrap .cal-day { background: rgba(23, 24, 27, .035); border-color: var(--line); }
/* Reszta kalendarza rezerwacji idzie tą samą drogą: nazwa miesiąca, strzałki
   i stany dnia są opisane bielą, więc na jasnej ramce zaznaczony dzień robił
   się niewidzialny, a dni minione i niedostępne przestawały różnić się od
   wolnych. Zaznaczenie odwraca się tak samo jak kafelek godziny wyżej: ciemny
   krążek, jasny napis. Hero (.hf-cal) zostaje przy barwach ciemnych. */
html[data-motyw="jasny"] .cal-wrap .cal-title { color: var(--ink); }
html[data-motyw="jasny"] .cal-wrap .cal-nav button { color: var(--dim); border-color: var(--line); background: rgba(23, 24, 27, .04); }
html[data-motyw="jasny"] .cal-wrap .cal-nav button:hover { color: var(--ink); border-color: rgba(23, 24, 27, .4); background: rgba(23, 24, 27, .08); }
html[data-motyw="jasny"] .cal-wrap .cal-day.free:hover { color: var(--ink); border-color: rgba(23, 24, 27, .45); background: rgba(23, 24, 27, .09); }
html[data-motyw="jasny"] .cal-wrap .cal-day.past { color: rgba(23, 24, 27, .26); background: transparent; }
html[data-motyw="jasny"] .cal-wrap .cal-day.blocked {
  color: rgba(23, 24, 27, .3);
  background: repeating-linear-gradient(135deg, rgba(23, 24, 27, .09) 0 5px, transparent 5px 10px);
}
html[data-motyw="jasny"] .cal-wrap .cal-day.sel {
  background: #17181b !important; color: #f5f5f4 !important; border-color: #17181b !important;
}
html[data-motyw="jasny"] .cal-wrap .cal-day.range { background: rgba(23, 24, 27, .12); border-color: rgba(23, 24, 27, .08); color: var(--ink); }
/* legenda pod kalendarzem: te same trzy kropki opisane bielą */
html[data-motyw="jasny"] .leg .l-free { background: rgba(23, 24, 27, .12); }
html[data-motyw="jasny"] .leg .l-sel { background: #17181b; }
html[data-motyw="jasny"] .leg .l-partial { background: linear-gradient(135deg, rgba(227, 34, 39, .55) 0 46%, rgba(23, 24, 27, .12) 54%); }
html[data-motyw="jasny"] .leg .l-blocked { background: repeating-linear-gradient(135deg, rgba(23, 24, 27, .3) 0 3px, transparent 3px 6px); }
html[data-motyw="jasny"] .time-chip small { color: var(--dim); }
/* Ramka kolumny godzin: na jasnym tle biała przezroczystość znika, więc obie
   kolumny zlewałyby się w jedną plamę. */
html[data-motyw="jasny"] .time-col { background: rgba(23, 24, 27, .025); border-color: var(--line); }
html[data-motyw="jasny"] .time-col-val { color: var(--ink); }
/* Pasek z dokładną porą stoi wewnątrz kolumny godzin, więc na jasnym tle musi
   być o ton ciemniejszy od niej; z bielą 3,5% zniknąłby razem z ramką. */
html[data-motyw="jasny"] .time-pol { background: rgba(23, 24, 27, .05); border-color: var(--line); }
html[data-motyw="jasny"] .time-pol-lbl { color: var(--dim); }
/* Mleczna pigułka z hero działa na ciemnym tle; w jasnym motywie zlewałaby się
   z sekcją i nie było widać, która godzina jest wybrana. Zaznaczenie idzie tu
   więc odwrotnie: ciemny kafel, jasny napis. Falujące światło zostaje, ale
   przygaszone — na ciemnym tle pełna jasna plama byłaby kleksem. */
html[data-motyw="jasny"] .time-chip.on::before { background: rgba(23, 24, 27, .94); }
html[data-motyw="jasny"] .time-chip.on:hover::before { background: rgba(23, 24, 27, 1); }
html[data-motyw="jasny"] .time-chip.on::after { opacity: .22; }
html[data-motyw="jasny"] .time-chip.on {
  color: #f5f5f4;
  border-color: rgba(23, 24, 27, .94);
  box-shadow: 0 8px 22px rgba(23, 24, 27, .18);
}
html[data-motyw="jasny"] .time-chip.on small { color: rgba(245, 245, 244, .66); }
html[data-motyw="jasny"] .tier-row { border-color: var(--line); }
html[data-motyw="jasny"] .consent { color: var(--dim); }
/* Kwadracik pakietu ma ramkę z bieli 30% i na jasnej karcie znikał zupełnie —
   nie było widać, że w ogóle jest co zaznaczyć. Zaznaczenie idzie tu odwrotnie
   niż w ciemnym motywie, tak samo jak przy kafelkach godzin wyżej: ciemne pole,
   jasny znaczek. */
html[data-motyw="jasny"] .extra-pick .box { border-color: rgba(23, 24, 27, .32); }
html[data-motyw="jasny"] .extra-pick.on .box { background: #17181b; border-color: #17181b; }
html[data-motyw="jasny"] .extra-pick .box svg { color: #f5f5f4; }
/* Rysunki pakietów mają białą kreskę: na jasnej karcie zostałby po nich sam
   czerwony akcent. Kafelek robi się więc ciemny — tak samo jak zaznaczona
   godzina wyżej, ciemne pole i jasny rysunek. */
html[data-motyw="jasny"] .extra-ico { background: #17181b; border-color: #17181b; }
html[data-motyw="jasny"] .extra-pick.on .extra-ico { background: #17181b; border-color: #17181b; }

/* ---------- pytania i odpowiedzi (FAQ na stronie miasta) ----------
   Lista stoi na <details>, więc rozwijanie działa bez skryptu. Znak plus
   obraca się w krzyżyk przy otwarciu; to jedyna animacja, bo sekcja czytana
   jest wzrokiem, a nie oglądana. */

.pytania { padding: clamp(72px, 10vw, 128px) 0; background: var(--bg1); }
.pyt-shell { display: grid; grid-template-columns: minmax(0, 1fr); gap: 40px; }

.pyt-head { max-width: 620px; }
.pyt-kicker {
  margin: 0 0 12px;
  font-size: .78rem; letter-spacing: .18em; text-transform: uppercase;
  color: var(--red2);
}
.pyt-head h2 { font-size: clamp(1.9rem, 4.6vw, 2.9rem); margin: 0 0 16px; }
.pyt-lead { margin: 0; color: var(--dim); }
.pyt-lead a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }

.pyt-lista { border-top: 1px solid var(--line); }

.pyt-poz { border-bottom: 1px solid var(--line); }

.pyt-pytanie {
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  padding: 22px 2px;
  cursor: pointer;
  list-style: none;
  font-family: var(--font-display);
  font-size: clamp(1rem, 1.6vw, 1.12rem);
  font-weight: 500;
  line-height: 1.45;
  transition: color .18s ease;
}
/* strzałka domyślnego <details> znika w obu silnikach */
.pyt-pytanie::-webkit-details-marker { display: none; }
.pyt-pytanie::marker { content: ""; }
.pyt-pytanie:hover { color: var(--red2); }

.pyt-znak {
  flex: 0 0 auto; width: 19px; height: 19px;
  color: var(--dim);
  transition: transform .25s ease, color .18s ease;
}
.pyt-poz[open] .pyt-znak { transform: rotate(45deg); color: var(--red2); }

.pyt-odp { padding: 0 44px 24px 2px; color: var(--dim); max-width: 78ch; }
.pyt-odp p { margin: 0; line-height: 1.75; }

/* Płynne rozwijanie odpowiedzi bez ani jednej linii skryptu: przeglądarki
   znające interpolate-size animują wysokość ::details-content między 0 i auto
   (content-visibility z allow-discrete trzyma treść widoczną także w drodze
   powrotnej), starsze po prostu przeskakują — czyli robią to, co dotąd.
   Ruch-ograniczony tryb łapie globalna reguła transition-duration wyżej. */
.pyt-poz { interpolate-size: allow-keywords; }
.pyt-poz::details-content {
  height: 0;
  overflow: clip;
  transition: height .42s cubic-bezier(.2, .8, .2, 1), content-visibility .42s allow-discrete;
}
.pyt-poz[open]::details-content { height: auto; }

/* treść odpowiedzi łagodnie dojeżdża tuż za rozsuwającą się wysokością;
   tam, gdzie wysokość się nie animuje, zostaje samo krótkie pojawienie */
.pyt-odp {
  opacity: 0;
  translate: 0 -6px;
  transition: opacity .3s ease .1s, translate .3s ease .1s;
}
.pyt-poz[open] .pyt-odp { opacity: 1; translate: 0 0; }

@media (min-width: 900px) {
  /* Nagłówek zostaje przy lewej krawędzi, pytania biorą resztę szerokości;
     przy jednej kolumnie sekcja rozjeżdżała się na całą stronę i wiersze
     robiły się za długie do czytania. */
  .pyt-shell { grid-template-columns: minmax(280px, 380px) minmax(0, 1fr); gap: 64px; align-items: start; }
  /* Tytuł schodzi kawałek w dół, zamiast startować równo z górną krawędzią
     listy: obok niego jest wtedy pierwsze pytanie, a nie kreska nad nim.
     Tylko przy dwóch kolumnach — w układzie jednokolumnowym tytuł stoi nad
     listą i wcięcie zrobiłoby samą dziurę. */
  .pyt-head { padding-top: clamp(20px, 3vh, 44px); }
}

@media (max-width: 640px) {
  .pyt-odp { padding-right: 8px; }
}

/* Odmiana strony miasta: szeroki pas na pełną szerokość ekranu. Kolory bazowe
   są pod motyw ciemny; w jasnym motywie pas przechodzi na jasne powierzchnie
   razem z sąsiadami (blok MOTYW JASNY; PASY SEKCJI na końcu pliku). */
.pytania--noc { background: #020203; color: #f5f5f3; }
/* Pełna szerokość zamiast środkowego kontenera: to samo wcięcie co .nav-inner,
   więc lewa krawędź siada pod logo, a prawa pod wyszukiwarką w pasku. */
.pytania--noc .pyt-shell {
  width: auto;
  max-width: none;
  margin-inline: 0;
  padding-inline: clamp(20px, 3.2vw, 48px);
}
.pytania--noc .pyt-head { max-width: none; }
.pytania--noc .pyt-head h2 { font-size: clamp(1.9rem, 4.6vw, 3.1rem); }
/* na szerokiej sekcji pytania rosną razem z nią */
.pytania--noc .pyt-pytanie {
  padding: clamp(24px, 3.2vh, 34px) 2px;
  font-size: clamp(1.1rem, 1.9vw, 1.5rem);
}
.pytania--noc .pyt-znak { width: 24px; height: 24px; }
.pytania--noc .pyt-odp { font-size: 1.05rem; max-width: 88ch; }
.pytania--noc .pyt-lead { color: rgba(255, 255, 255, .55); }
.pytania--noc .pyt-lead a { color: #f5f5f3; }
.pytania--noc .pyt-lista { border-top-color: rgba(255, 255, 255, .08); }
.pytania--noc .pyt-poz { border-bottom-color: rgba(255, 255, 255, .08); }
.pytania--noc .pyt-znak { color: rgba(255, 255, 255, .48); }
.pytania--noc .pyt-poz[open] .pyt-znak { color: var(--red2); }
.pytania--noc .pyt-odp { color: rgba(255, 255, 255, .6); }

/* Wejście sekcji: tytuł wyjeżdża spod maski słowo po słowie — ten sam ruch
   co w hero i sekcji zamykającej, wyzwalany klasą .in grupy. Stan startowy
   siedzi wyłącznie na .hw, których bez skryptu w ogóle nie ma, więc nagłówek
   nigdy nie zostaje niewidoczny; wiersze pytań niesie zwykła kaskada .rvg. */
.pytania--noc .pyt-head h2.hw-split { opacity: 1; transform: none; filter: none; }
.pytania--noc .pyt-head h2 .hwm { display: inline-block; overflow: hidden; vertical-align: bottom; padding-bottom: .06em; }
.pytania--noc .pyt-head h2 .hw {
  display: inline-block;
  transform: translateY(1.1em);
  transition: transform 1.15s cubic-bezier(.16,.86,.22,1);
  transition-delay: calc(var(--i, 0) * 70ms);
}
.pytania--noc .pyt-head.rvg.in h2 .hw { transform: none; }

@media (min-width: 900px) {
  /* Kolumna nagłówka bierze dokładnie tyle, ile trzeba na tytuł w jednej
     linii (max-content) — sztywna szerokość łamała go na dwa wiersze,
     a lista pytań zostawała z pustką po prawej. */
  .pytania--noc .pyt-shell {
    grid-template-columns: max-content minmax(0, 1fr);
    gap: clamp(56px, 5vw, 100px);
  }
  /* tytuł skaluje się z ekranem łagodniej niż bazowy display: przy max-content
     w siatce dłuższy napis na sztywnym stopniu zjadałby kolumnę pytań */
  .pytania--noc .pyt-head h2 { font-size: clamp(1.7rem, 2.6vw, 3rem); }
  .pytania--noc .pyt-pytanie { font-size: clamp(1.2rem, 2vw, 1.6rem); }
}

/* ---------- zapowiedź bloga na stronie miasta ----------
   Dwa kafle w jednym wierszu; ten pod myszką rośnie kosztem sąsiada.
   Efekt niesie sam flex-grow — szerokości nie trzeba liczyć, a płótno
   z object-fit: cover po prostu odsłania więcej kadru. Opis stoi u góry
   kafla (nadpis z tematu i tytuł zdaniem), na dole zaproszenie do
   czytania; klik niesie odnośnik rozpięty na całym kadrze. */

.blogzap {
  padding: clamp(64px, 8vw, 104px) 0 clamp(56px, 7vw, 96px);
  background: #020203;
  color: #f5f5f3;
}
/* nagłówek pożyczony z floty ma tam duży min-height pod animację wjazdu;
   tu sekcja jest krótsza, więc zostaje samo wyrównanie i typografia */
.blogzap .fleet-showcase-head { min-height: 0; margin-bottom: clamp(22px, 3vh, 34px); }

.blogzap-lista {
  display: flex;
  gap: clamp(14px, 1.4vw, 24px);
  height: clamp(360px, 44vw, 620px);
  padding-inline: clamp(24px, 2.1vw, 40px);
}

.bz-card {
  position: relative;
  overflow: hidden;
  background: #101012;
  flex: 1 1 0%;
  min-width: 0;
  transition: flex-grow 720ms cubic-bezier(.22, 1, .36, 1);
}
/* Pierwszy kafel jest domyślnie szerszy — najnowszy wpis ma wyróżnienie
   także bez kursora i na dotyku. Najazd na sąsiada odwraca proporcje:
   wyróżnienie idzie za uwagą, nie za kolejnością. Warunek stoi na :has();
   tam, gdzie go nie ma, zostaje stała asymetria bez ruchu — czyli dokładnie
   stan spoczynkowy. */
.bz-card:first-child { flex-grow: 1.72; }
@media (hover: hover) and (pointer: fine) {
  .blogzap-lista:has(.bz-card + .bz-card:hover) .bz-card:first-child,
  .blogzap-lista:has(.bz-card + .bz-card:focus-within) .bz-card:first-child { flex-grow: 1; }
  .bz-card + .bz-card:hover,
  .bz-card + .bz-card:focus-within { flex-grow: 1.72; }
}

.bz-card > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.bz-brak {
  position: absolute; inset: 0;
  background: linear-gradient(135deg, #16161a, #0d0d0f);
}
/* przyciemnienie całego kadru jak w kartach usług: tekst stoi na zdjęciu
   u góry i u dołu, więc cień musi trzymać oba brzegi */
.bz-shade {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg,
    rgba(0,0,0,.68) 0%, rgba(0,0,0,.30) 34%,
    rgba(0,0,0,.34) 66%, rgba(0,0,0,.64) 100%);
  pointer-events: none;
}

.bz-copy {
  position: absolute;
  z-index: 3;
  /* tytuł stoi na zdjęciu wpisu — barwa z kadru, nie z motywu (jak w szynie
     floty), inaczej jasny motyw gasił go na ciemnym kadrze */
  color: #f5f5f3;
  left: clamp(22px, 2.4vw, 40px);
  right: clamp(22px, 2.4vw, 40px);
  top: clamp(22px, 2.4vw, 38px);
  pointer-events: none;
}
.bz-kicker {
  display: block;
  margin-bottom: 11px;
  font-size: .66rem;
  font-weight: 600;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .78);
}
.bz-copy strong {
  display: block;
  max-width: 30ch;
  font-family: var(--font-display);
  font-size: clamp(1.02rem, 1.35vw, 1.35rem);
  font-weight: 600;
  line-height: 1.45;
}

/* czerwone kółko ze strzałką wypływa na najechanym kaflu */
.bz-strzalka {
  position: absolute;
  z-index: 3;
  left: clamp(22px, 2.4vw, 40px);
  top: 50%;
  translate: 0 -50%;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--red);
  color: #fff;
  opacity: 0;
  scale: .7;
  transition: opacity 280ms ease, scale 380ms cubic-bezier(.22, 1, .36, 1);
  pointer-events: none;
}
@media (hover: hover) and (pointer: fine) {
  .bz-card:first-child .bz-strzalka,
  .bz-card:hover .bz-strzalka,
  .bz-card:focus-within .bz-strzalka { opacity: 1; scale: 1; }
  .blogzap-lista:has(.bz-card + .bz-card:hover) .bz-card:first-child .bz-strzalka,
  .blogzap-lista:has(.bz-card + .bz-card:focus-within) .bz-card:first-child .bz-strzalka { opacity: 0; scale: .7; }
}

.bz-read {
  position: absolute;
  z-index: 3;
  left: clamp(22px, 2.4vw, 40px);
  bottom: clamp(20px, 2.2vw, 34px);
  font-size: .64rem;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: #fff;
  pointer-events: none;
}
.bz-data {
  position: absolute;
  z-index: 3;
  right: clamp(22px, 2.4vw, 40px);
  bottom: clamp(20px, 2.2vw, 34px);
  font-size: .64rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .55);
  white-space: nowrap;
  pointer-events: none;
}

.bz-link { position: absolute; z-index: 2; inset: 0; }
.bz-link:focus-visible { outline: 1px solid #fff; outline-offset: -8px; }

@media (max-width: 760px) {
  /* bez hovera nie ma zabawy szerokością — kafle stają jeden pod drugim */
  .blogzap-lista { flex-direction: column; height: auto; }
  .bz-card,
  .bz-card:first-child { flex: none; height: clamp(240px, 62vw, 340px); }
  .bz-data { display: none; }
}

/* ============================================================
   INSTAGRAM — cztery ostatnie posty z profilu (sekcja na stronie miasta).
   Karty odwzorowują prawdziwy post z Instagrama: biała ramka, nagłówek
   profilu z awatarem i miejscem, kwadratowy kadr, rząd ikon z kropkami
   karuzeli, liczba polubień i podpis. Co druga karta stoi niżej i w cieniu
   (filtr jasności na całej karcie, ze zdjęciem) — rytm wprost z projektu
   graficznego; najechanie wyciąga ją do światła. Nagłówek sekcji to sam
   tytuł „Nasz Instagram"; w tle pas dzielą te same kreski łamu co w sekcji
   „O nas" (element .onas-kreski, styl przy tamtej sekcji), więc rytm
   rozkładówki ciągnie się przez oba pasy.
   Karty są z założenia białe w obu motywach (jak pierwowzór), więc motywy
   różnią się tylko pasem sekcji; blok MOTYW JASNY na końcu pliku.
   ============================================================ */
.insta {
  position: relative;
  padding: clamp(64px, 8vw, 104px) 0 clamp(56px, 7vw, 96px);
  background: #020203;
  color: #f5f5f3;
}
/* kreski łamu w całości ze wspólnej reguły .onas-kreski (styl przy sekcji
   „O nas"); tutaj tylko wystają lekko ponad i pod pas — sekcja celowo nie
   ma overflow: hidden, a sąsiednie pasy niosą tę samą czerń, więc linie
   po prostu płyną kawałek po ich tle */
.insta .onas-kreski {
  top: calc(-1 * clamp(40px, 5vw, 72px));
  bottom: calc(-1 * clamp(40px, 5vw, 72px));
}
/* nagłówek i karty nad kreskami tła; kreski są absolutne, więc bez własnego
   kontekstu malowałyby się po wierzchu statycznej treści */
.insta-head { position: relative; padding-inline: clamp(24px, 2.1vw, 40px); margin-bottom: clamp(30px, 4.4vh, 56px); }
/* wzór ma tytuł pisany normalnie, więc wersaliki klasy .display schodzą */
.insta-title { margin: 0; font-size: clamp(1.5rem, 3.2vw, 3rem); line-height: 1.22; color: #fff; text-transform: none; }

.insta-lista {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(16px, 1.7vw, 30px);
  align-items: start;
  padding-inline: clamp(24px, 2.1vw, 40px);
  /* zapas na karty zepchnięte w dół */
  padding-bottom: 56px;
}

.ig-post {
  background: #fff;
  color: #111214;
  border-radius: 10px;
  overflow: hidden;
  transition: filter 320ms ease;
}
/* co druga karta w cieniu i niżej; przyciemnia się cała, ze zdjęciem,
   jak karta odsunięta w głąb sceny */
.ig-post--cien { translate: 0 48px; scale: .96; filter: brightness(.5); }
@media (hover: hover) and (pointer: fine) {
  .ig-post--cien:hover,
  .ig-post--cien:focus-within { filter: brightness(1); }
}

.ig-glowa { display: flex; align-items: center; gap: 10px; padding: 10px 12px; }
.ig-awatar {
  flex: none;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  overflow: hidden;
  background: #0a0a0b;
  display: grid;
  place-items: center;
}
.ig-awatar img { width: 70%; height: 70%; object-fit: contain; }
.ig-kto { display: flex; flex-direction: column; min-width: 0; line-height: 1.3; }
.ig-nick {
  font-size: .78rem;
  font-weight: 700;
  color: #111214;
  text-decoration: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
a.ig-nick:hover { text-decoration: underline; }
.ig-gdzie { font-size: .66rem; color: #85878c; }

.ig-kadr { position: relative; aspect-ratio: 1 / 1; background: #e9e9ec; }
.ig-kadr img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ig-kadr-link { position: absolute; inset: 0; }
.ig-kadr-link:focus-visible { outline: 2px solid #111214; outline-offset: -6px; }

.ig-stopka { padding: 10px 12px 14px; }
.ig-akcje { display: flex; align-items: center; gap: 12px; margin-bottom: 9px; color: #111214; }
.ig-akcje > svg { flex: none; width: 20px; height: 20px; display: block; }
/* kropki karuzeli w środku rzędu; zakładka odjeżdża przez to na prawo */
.ig-kropki { display: flex; gap: 4px; margin-inline: auto; }
.ig-kropki i { width: 5px; height: 5px; border-radius: 50%; background: #c9cace; }
.ig-kropki i.on { background: #3897f0; }

.ig-lajki { margin: 0 0 4px; font-size: .74rem; font-weight: 700; color: #111214; }
.ig-podpis {
  margin: 0;
  font-size: .74rem;
  line-height: 1.5;
  color: #3c3e42;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}
.ig-podpis strong { color: #111214; }

@media (max-width: 760px) {
  /* dwie karty w rzędzie; schodek cienia zostaje, tylko płytszy.
     Kreski redukują się razem z „O nas" (wspólna reguła przy tamtej
     sekcji): na telefonie zostają lewa i środkowa. */
  .insta-lista { grid-template-columns: repeat(2, 1fr); gap: 14px; padding-bottom: 40px; }
  .ig-post--cien { translate: 0 26px; }
  /* Karta ma tu 164 px, a rząd ikon w oryginalnych proporcjach potrzebuje 184;
     nadmiar obcinała krawędź karty (overflow: hidden) i zakładka z prawej
     kończyła się w połowie rysunku. Ikony i przerwy schodzą o tyle, żeby rząd
     zmieścił się w karcie z zapasem. */
  .ig-akcje { gap: 8px; }
  .ig-akcje > svg { width: 17px; height: 17px; }
  .ig-stopka, .ig-glowa { padding-inline: 10px; }
}

/* ============================================================
   OPINIE — prawdziwe opinie z wizytówki Google (sekcja na stronie miasta).
   Kolory bazowe są pod motyw ciemny; jasne odpowiedniki niesie blok
   MOTYW JASNY; PASY SEKCJI na końcu pliku.
   ============================================================ */
.opinie {
  padding: clamp(64px, 8vw, 104px) 0 clamp(56px, 7vw, 96px);
  background: #020203;
  color: #f5f5f3;
}
/* nagłówek pożyczony z floty; jak w blogu zostaje samo wyrównanie */
.opinie .fleet-showcase-head { min-height: 0; margin-bottom: clamp(22px, 3vh, 34px); }

/* podsumowanie pod tytułem: gwiazdki, średnia, liczba opinii; nadpisuje
   drobny wersalikowy druk, który nagłówek floty daje akapitom */
.opinie .fleet-showcase-head p.opinie-suma {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 12px 0 0;
  color: rgba(255, 255, 255, .55);
  font-size: .92rem;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
}
.opinie-suma strong { color: #f5f5f3; font-weight: 700; }
.op-krop { opacity: .6; }

/* Skąd te opinie są zebrane. Widget Trustindexu pokazuje to we własnej stopce,
   której nie rysujemy. Ton ciszej niż podpisy w kartach, żeby nie konkurował
   z treścią opinii ani z przyciskiem do Google w nagłówku sekcji. */
.opinie-zrodlo {
  margin: 6px 0 0;
  padding-inline: clamp(24px, 2.1vw, 40px);
  color: rgba(255, 255, 255, .34);
  font-size: .78rem;
}
.opinie-zrodlo a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.opinie-zrodlo a:hover { color: #f5f5f3; }

.op-gwiazdki { display: inline-flex; gap: 2px; }
.op-gwiazdki i { display: inline-flex; width: 15px; height: 15px; }
.op-gwiazdki svg { width: 100%; height: 100%; color: rgba(255, 255, 255, .16); }
.op-gwiazdki i.pelna svg { color: var(--amber); }

/* Kolumny zamiast siatki: kart jest pięć i mają różne wysokości, a multicol
   sam wyrównuje wysokość łamów — siatka zostawiała samotną kartę w rogu
   drugiego rzędu z dziurą obok. Szerokość łamu steruje ich liczbą. */
/* Jeden rząd równych kart zamiast łamów. Opinie mają skrajnie różną długość
   i multicol układał je w trzy kolumny o poszarpanych krawędziach. Tutaj
   wysokości wyrównuje samo domyślne align-items: stretch, a że tekst jest
   przycięty do stałej liczby wierszy, najwyższa karta ma zawsze ten sam,
   przewidywalny rozmiar — nie trzeba więc żadnej wysokości wpisywać z palca. */
.opinie-szyna { position: relative; }
.opinie-lista {
  display: flex;
  gap: clamp(14px, 1.4vw, 24px);
  padding-inline: clamp(24px, 2.1vw, 40px);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: clamp(24px, 2.1vw, 40px);
  scroll-behavior: smooth;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.opinie-lista::-webkit-scrollbar { width: 0; height: 0; }
.opinie-lista:focus-visible { outline: 2px solid rgba(255, 255, 255, .45); outline-offset: 4px; border-radius: var(--r-md); }

/* Strzałki tylko tam, gdzie jest mysz: na dotyku rząd przesuwa się palcem,
   a przycisk zasłaniałby kartę. Na krańcach rzędu znikają (hidden zdejmuje
   i zakłada home.js), żeby nie proponować ruchu donikąd. */
.opinie-strzalka {
  position: absolute;
  top: 50%;
  z-index: 3;
  translate: 0 -50%;
  width: 44px; height: 44px;
  display: grid; place-items: center;
  border: 1px solid rgba(255, 255, 255, .13);
  border-radius: 50%;
  background: rgba(8, 8, 9, .72);
  color: rgba(255, 255, 255, .62);
  backdrop-filter: blur(6px);
  transition: color .25s, border-color .25s, background .25s;
}
.opinie-strzalka:hover { color: #f5f5f3; border-color: rgba(255, 255, 255, .3); background: rgba(8, 8, 9, .92); }
.opinie-strzalka:active { scale: .96; }
.opinie-strzalka svg.ik { width: 15px; height: 15px; }
.opinie-strzalka--wstecz { left: clamp(6px, 1vw, 16px); }
.opinie-strzalka--wstecz svg.ik { rotate: 180deg; }
.opinie-strzalka--dalej { right: clamp(6px, 1vw, 16px); }
@media (hover: none) { .opinie-strzalka { display: none; } }

.op-card {
  flex: 0 0 clamp(262px, 24vw, 330px);
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: clamp(18px, 1.8vw, 26px);
  background: rgba(255, 255, 255, .035);
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: var(--r-md);
}

.op-head { display: flex; align-items: center; gap: 12px; }
.op-awatar {
  flex: none;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .1);
  font-size: .88rem;
  font-weight: 700;
  letter-spacing: .04em;
  color: rgba(255, 255, 255, .6);
}
.op-kto { display: flex; flex-direction: column; min-width: 0; }
.op-kto strong {
  font-size: .96rem;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.op-kiedy { color: rgba(255, 255, 255, .48); font-size: .8rem; }
.op-g { flex: none; margin-left: auto; width: 18px; height: 18px; opacity: .9; }
.op-g svg { width: 100%; height: 100%; }

.op-tekst {
  margin: 0;
  color: rgba(255, 255, 255, .82);
  font-size: .93rem;
  line-height: 1.65;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 7;
  overflow: hidden;
}

.op-wiecej {
  align-self: start;
  /* karty są równej wysokości, więc przycisk musi trzymać się dolnej
     krawędzi, a nie kończyć tam, gdzie skończył się krótszy tekst */
  margin-top: auto;
  padding: 0;
  color: rgba(255, 255, 255, .48);
  font-size: .84rem;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.op-wiecej:hover { color: #f5f5f3; }

/* Okno z pełną opinią. Tło karty jest własne, nie szklane: nakładka ma
   backdrop-filter i .glass w jej środku czernieje (ta sama pułapka co
   w oknie kalendarza). */
.op-okno {
  position: fixed;
  inset: 0;
  z-index: 300;
  display: none;
  place-items: center;
  padding: 5vmin;
}
.op-okno.show { display: grid; }
.op-okno-kurtyna {
  position: absolute;
  inset: 0;
  background: rgba(6, 6, 7, .84);
  backdrop-filter: blur(10px);
}
.op-okno-karta {
  position: relative;
  width: min(560px, 100%);
  max-height: 82vh;
  overflow-y: auto;
  overscroll-behavior: contain;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: clamp(24px, 3vw, 36px);
  background: #101012;
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: var(--r-md);
  color: #f5f5f3;
  box-shadow: var(--shadow-lg);
}
/* krzyżyk stoi w prawym górnym rogu karty, więc znak platformy musi mu ustąpić */
.op-okno-karta .op-head { padding-right: 40px; }
/* pre-line, bo opinie bywają wieloakapitowe i w karcie te akapity giną */
.op-okno-tekst {
  margin: 0;
  color: rgba(255, 255, 255, .84);
  font-size: .97rem;
  line-height: 1.7;
  white-space: pre-line;
}
.op-okno-zamknij {
  position: absolute;
  top: 12px; right: 12px;
  width: 38px; height: 38px;
  border-radius: 50%;
  display: grid; place-items: center;
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .12);
  color: rgba(255, 255, 255, .7);
  font-size: 1.05rem;
  line-height: 1;
}
.op-okno-zamknij:hover { background: #fff; color: #0b0b0c; }

/* ============================================================
   O NAS — winieta redakcyjna zaraz po szynie floty (strona miasta).
   Trzy stopnie z góry na dół: drobny wersalikowy nadpis „02 / O nas",
   jeden duży akapit o firmie i rząd czterech liczb nad podpisami.
   Pas dzielą na ćwiartki ledwo widoczne pionowe kreski na całą wysokość;
   liczby stoją w tych samych ćwiartkach, więc kreski czytają się jak
   linie łamu rozkładówki, a nie jak przypadkowa ozdoba. Bez fotografii
   w tle: to pas tekstowy, więc w jasnym motywie jaśnieje jak sąsiedzi
   (blok MOTYW JASNY na końcu pliku).
   ============================================================ */
.onas {
  position: relative;
  overflow: hidden;
  background: #020203;
  color: #f5f5f3;
}
/* kreski łamu: jeden element i cztery wąskie gradienty zamiast czterech
   pustych divów; ćwiartki w 25/50/75% plus linia przy samej lewej krawędzi.
   Kolor przez własność, bo jasny motyw podmienia go w jednym miejscu.
   Ten sam element rysuje kreski także w sekcji Instagrama (tam z drobnym
   nadpisaniem — linie wystają poza pas). */
.onas-kreski {
  position: absolute;
  inset: 0;
  pointer-events: none;
  --onas-kreska: rgba(255, 255, 255, .07);
  background-image:
    linear-gradient(var(--onas-kreska), var(--onas-kreska)),
    linear-gradient(var(--onas-kreska), var(--onas-kreska)),
    linear-gradient(var(--onas-kreska), var(--onas-kreska)),
    linear-gradient(var(--onas-kreska), var(--onas-kreska));
  background-repeat: no-repeat;
  background-size: 1px 100%;
  background-position: clamp(12px, 1vw, 20px) 0, 25% 0, 50% 0, 75% 0;
}
.onas-shell {
  position: relative;
  /* głębokie, symetryczne odstępy z góry i z dołu: pas ma odetchnąć od kart
     floty nad sobą i od sekcji filozofii pod sobą, żeby nic nie stało zbite */
  padding: clamp(96px, 12vw, 180px) clamp(20px, 3.2vw, 48px);
}
/* kaskada wejścia odrobinę gęściej niż domyślne 110 ms z bloku .rvg:
   kroki są tu tylko trzy i przy szerokim odstępie pas wchodził leniwie */
.onas .rvg > * { transition-delay: calc(var(--i, 0) * 90ms); }

/* tytuł w kroju pozostałych nagłówków sekcji; te same widełki co w ścianie
   opinii i pytaniach */
.onas-shell h2 {
  margin: 0;
  font-size: clamp(1.7rem, 2.6vw, 3rem);
}
/* tytuł wjeżdża słowo po słowie spod maski — ten sam ruch co w opiniach,
   pytaniach i sekcji zamykającej; stan początkowy siedzi wyłącznie na .hw,
   których bez skryptu w ogóle nie ma, więc nagłówek nigdy nie znika */
.onas-shell h2.hw-split { opacity: 1; transform: none; filter: none; }
.onas-shell h2 .hwm { display: inline-block; overflow: hidden; vertical-align: bottom; padding-bottom: .06em; }
.onas-shell h2 .hw {
  display: inline-block;
  transform: translateY(1.1em);
  transition: transform 1.15s cubic-bezier(.16,.86,.22,1);
  transition-delay: calc(var(--i, 0) * 70ms);
}
.onas-shell.rvg.in h2 .hw { transform: none; }
.onas-akapit {
  max-width: 62ch;
  margin: clamp(20px, 2.6vw, 34px) 0 0;
  color: rgba(255, 255, 255, .84);
  font-size: clamp(1.15rem, 1.9vw, 1.7rem);
  font-weight: 350;
  line-height: 1.5;
}

/* ---------- liczby ----------
   Wielka liczba nad drobnym podpisem, po jednej na ćwiartkę; szeroki
   odstęp od akapitu robi z dołu sekcji własny, spokojny rząd. */
.onas-liczby {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(20px, 3vw, 40px);
  margin: clamp(64px, 9vw, 140px) 0 0;
  padding: 0;
  list-style: none;
}
/* rząd odsłaniają jego własne pozycje (ul sam jest grupą .rvg), więc krok
   kaskady muszli trzeba z niego zdjąć; inaczej całość najpierw wyostrza się
   jako jeden blok, a potem rusza w nim czwórka liczb — dwa ruchy zamiast
   jednego */
.onas-shell.rvg > .onas-liczby { opacity: 1; transform: none; filter: none; transition: none; }
/* liczby ruszają po akapicie nad sobą, żeby pas czytał się jako jeden
   przejazd z góry na dół */
.onas .onas-liczby > li { transition-delay: calc(160ms + var(--i, 0) * 90ms); }
.onas-liczby strong {
  display: flex;
  align-items: baseline;
  gap: .3em;
  font-family: var(--font-display);
  font-size: clamp(2.4rem, 4.6vw, 4.2rem);
  font-weight: 400;
  line-height: 1;
  letter-spacing: -.015em;
}
/* słowo przy liczbie („5 Lat"), mniejsze i przy linii pisma */
.onas-liczby strong span {
  font-size: .42em;
  letter-spacing: 0;
}
.onas-liczby p {
  margin: clamp(22px, 3vw, 40px) 0 0;
  color: rgba(255, 255, 255, .55);
  font-size: .82rem;
  line-height: 1.5;
}

/* pigułka na podstronę /o-nas domyka pas pod rzędem liczb; wchodzi jako
   ostatni krok kaskady, już po starcie liczb */
.onas-cta { margin: clamp(44px, 6vw, 72px) 0 0; }

@media (max-width: 700px) {
  /* liczby w dwóch kolumnach; kreski ćwiartek przestają się wtedy
     z czymkolwiek pokrywać, więc zostają lewa i środkowa */
  .onas-liczby {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    row-gap: clamp(32px, 8vw, 48px);
  }
  .onas-liczby p { margin-top: 14px; }
  .onas-kreski {
    background-image:
      linear-gradient(var(--onas-kreska), var(--onas-kreska)),
      linear-gradient(var(--onas-kreska), var(--onas-kreska));
    background-position: 10px 0, 50% 0;
  }
}

/* ============================================================
   MOTYW JASNY; PASY SEKCJI STRONY MIASTA.
   Dotąd na jasne przechodził tylko chrom (nawigacja, stopka, panele),
   a wszystkie pasy między hero a stopką miały czerń zaszytą na sztywno;
   po przełączeniu motywu strona i tak była prawie cała czarna.
   Zasada po zmianie: ciemne zostają wyłącznie KADRY, czyli miejsca,
   gdzie tło jest fotografią lub filmem (hero, karty szyny floty,
   sekcja filozofii ze zdjęciem wnętrza, karty blogowe, kadr finału).
   Wszystkie pasy tekstowe stoją na jasnych powierzchniach z tokenów.
   Blok leży na końcu pliku, żeby kolejnością wygrywać z regułami sekcji.
   ============================================================ */

/* preloader; jasny start zamiast czarnego błysku przed jasną stroną */
html[data-motyw="jasny"] .loader { background: var(--bg0); }
html[data-motyw="jasny"] .loader-bar { background: rgba(23, 24, 27, .12); }

/* nawigacja nad ciemnym hero: dopóki pasek nie złapie .scrolled, wisi wprost
   na fotografii, więc napisy muszą zostać jasne jak w ciemnym motywie;
   po zescrollowaniu tło robi się jasne i wracają kolory z tokenów.
   Warunek :has(.hero) ogranicza to do stron z fotograficznym hero;
   na dokumentach i stronie auta pasek od początku stoi na jasnym tle. */
html[data-motyw="jasny"] body:has(.hero) .nav:not(.scrolled) .logo { color: #f5f5f4; }
html[data-motyw="jasny"] body:has(.hero) .nav:not(.scrolled) .nav-links a { color: rgba(255, 255, 255, .72); }
html[data-motyw="jasny"] body:has(.hero) .nav:not(.scrolled) .nav-links a:hover { color: #fff; }
html[data-motyw="jasny"] body:has(.hero) .nav:not(.scrolled) .nav-city { color: rgba(255, 255, 255, .75); }
html[data-motyw="jasny"] body:has(.hero) .nav:not(.scrolled) .nav-city:hover { color: #fff; }
html[data-motyw="jasny"] body:has(.hero) .nav:not(.scrolled) .nav-search-btn { color: #f5f5f4; }
html[data-motyw="jasny"] body:has(.hero) .nav:not(.scrolled) .nav-search-btn:hover { background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .14); }
/* numer telefonu nad kadrem: ramka i pismo zostają jasne jak reszta paska,
   inaczej ciemna kreska motywu jasnego gubi się na fotografii */
html[data-motyw="jasny"] body:has(.hero) .nav:not(.scrolled) .nav-call { color: #f5f5f4; border-color: rgba(255, 255, 255, .14); }
html[data-motyw="jasny"] body:has(.hero) .nav:not(.scrolled) .nav-call:hover { background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .14); }
html[data-motyw="jasny"] body:has(.hero) .nav:not(.scrolled) .nav-burger span { background: #f5f5f4; }

/* szyna floty: pas i nagłówek na jasno, karty zostają kadrami z fotografii */
html[data-motyw="jasny"] .fleet-showcase { background: var(--bg0); color: var(--ink); }
html[data-motyw="jasny"] .fleet-showcase-head p { color: var(--dim); }
html[data-motyw="jasny"] .fleet-showcase-head h2 { color: var(--ink); }
html[data-motyw="jasny"] .fleet-showcase-progress { background: rgba(23, 24, 27, .12); }

/* filozofia: kadr ze zdjęciem wnętrza ma własne ciemne tło i zostaje ciemny,
   ale tło SEKCJI wokół niego (górny odstęp i wąskie boczne marginesy kadru)
   jaśnieje; bez tego między jasną szyną floty a zdjęciem wisiał czarny pas */
html[data-motyw="jasny"] .ofc-philosophy { background: var(--bg0); }

/* opinie z Google: jasny pas, białe karty z cienką kreską */
html[data-motyw="jasny"] .opinie { background: var(--bg0); color: var(--ink); }
html[data-motyw="jasny"] .opinie .fleet-showcase-head p.opinie-suma { color: var(--dim); }
html[data-motyw="jasny"] .opinie-suma strong { color: var(--ink); }
html[data-motyw="jasny"] .opinie-zrodlo { color: var(--dim); }
html[data-motyw="jasny"] .opinie-zrodlo a:hover { color: var(--ink); }
html[data-motyw="jasny"] .op-gwiazdki svg { color: rgba(23, 24, 27, .16); }
html[data-motyw="jasny"] .op-gwiazdki i.pelna svg { color: var(--amber); }
html[data-motyw="jasny"] .op-card { background: var(--bg1); border-color: var(--line); }
html[data-motyw="jasny"] .op-awatar { background: rgba(23, 24, 27, .05); border-color: var(--line); color: var(--dim); }
html[data-motyw="jasny"] .op-kiedy { color: var(--dim); }
html[data-motyw="jasny"] .op-tekst { color: rgba(23, 24, 27, .82); }
html[data-motyw="jasny"] .op-wiecej { color: var(--dim); }
html[data-motyw="jasny"] .op-wiecej:hover { color: var(--ink); }
html[data-motyw="jasny"] .opinie-strzalka { background: rgba(255, 255, 255, .88); border-color: var(--line); color: var(--dim); }
html[data-motyw="jasny"] .opinie-strzalka:hover { background: #fff; border-color: rgba(23, 24, 27, .22); color: var(--ink); }
html[data-motyw="jasny"] .op-okno-kurtyna { background: rgba(23, 24, 27, .55); }
html[data-motyw="jasny"] .op-okno-karta { background: var(--bg1); border-color: var(--line); color: var(--ink); }
html[data-motyw="jasny"] .op-okno-tekst { color: rgba(23, 24, 27, .82); }
html[data-motyw="jasny"] .op-okno-zamknij { background: rgba(23, 24, 27, .06); border-color: var(--line); color: var(--dim); }
html[data-motyw="jasny"] .op-okno-zamknij:hover { background: var(--ink); color: var(--bg0); }

/* o nas: po przeprojektowaniu to pas tekstowy bez fotografii, więc jaśnieje
   jak sąsiedzi; kreski łamu przechodzą z bieli na atrament */
html[data-motyw="jasny"] .onas { background: var(--bg0); color: var(--ink); }
html[data-motyw="jasny"] .onas-kreski { --onas-kreska: rgba(23, 24, 27, .1); }
html[data-motyw="jasny"] .onas-akapit { color: rgba(23, 24, 27, .85); }
html[data-motyw="jasny"] .onas-liczby strong { color: var(--ink); }
html[data-motyw="jasny"] .onas-liczby p { color: var(--dim); }

/* pytania na stronie miasta: odmiana --noc trzymała stały ciemny pas między
   dwoma ciemnymi sekcjami; po rozjaśnieniu sąsiadów wraca do zwykłych barw
   sekcji pytań, czyli tokenów, które jasny motyw sam odwraca */
html[data-motyw="jasny"] .pytania--noc { background: var(--bg1); color: var(--ink); }
html[data-motyw="jasny"] .pytania--noc .pyt-lead { color: var(--dim); }
html[data-motyw="jasny"] .pytania--noc .pyt-lead a { color: var(--ink); }
html[data-motyw="jasny"] .pytania--noc .pyt-lista { border-top-color: var(--line); }
html[data-motyw="jasny"] .pytania--noc .pyt-poz { border-bottom-color: var(--line); }
html[data-motyw="jasny"] .pytania--noc .pyt-znak { color: var(--dim); }
html[data-motyw="jasny"] .pytania--noc .pyt-poz[open] .pyt-znak { color: var(--red2); }
html[data-motyw="jasny"] .pytania--noc .pyt-odp { color: var(--dim); }

/* zapowiedź bloga: jasny pas, kafle zostają kadrami ze zdjęć wpisów */
html[data-motyw="jasny"] .blogzap { background: var(--bg0); color: var(--ink); }

/* Instagram: jasny pas; białe karty dostają kreskę, żeby nie zlewały się
   z tłem, a tytuł przechodzi na atrament. Karty w cieniu zostają
   przy filtrze jasności — na jasnym pasie też czytają się jako odsunięte. */
html[data-motyw="jasny"] .insta { background: var(--bg0); color: var(--ink); }
html[data-motyw="jasny"] .insta-title { color: var(--ink); }
html[data-motyw="jasny"] .ig-post { border: 1px solid var(--line); }

/* finał: pas z napisami na jasno, kadr z filmem zostaje czarny jak w hero */
html[data-motyw="jasny"] .final-drive { background: var(--bg0); }
html[data-motyw="jasny"] .final-drive-copy h2 { color: var(--ink); }
html[data-motyw="jasny"] .final-drive-lead { color: var(--dim); }
/* znak w jasnym motywie tą samą ledwo widoczną szarością, tylko z atramentu */
html[data-motyw="jasny"] .footer-znak { color: rgba(23, 24, 27, .07); }

/* mleczne pigułki (btn btn-primary hf-all): jasna nakładka .btn-primary kładła
   biały tekst, a mleczna baza ::before dalej malowała się nad tłem przycisku;
   napis znikał w bieli na każdej stronie. Na jasnych powierzchniach pigułka
   odwraca się więc tak samo jak wybrany kafelek godziny: ciemna baza, jasne
   pismo, przygaszona fala. */
html[data-motyw="jasny"] .hf-all {
  background: none;
  color: #f5f5f4;
  box-shadow: 0 12px 30px rgba(23, 24, 27, .18);
}
html[data-motyw="jasny"] .hf-all::before { background: rgba(23, 24, 27, .94); }
html[data-motyw="jasny"] .hf-all:hover::before { background: rgba(23, 24, 27, 1); }
html[data-motyw="jasny"] .hf-all::after { opacity: .22; }
/* w hero kadr zostaje ciemny również w jasnym motywie, więc tam pigułka
   wraca do mlecznej bazy z ciemnym pismem, jak w motywie ciemnym */
html[data-motyw="jasny"] .hero-find .hf-all { background: none; color: #0b0b0c; box-shadow: none; }
html[data-motyw="jasny"] .hero-find .hf-all::before { background: rgba(243, 243, 244, .82); }
html[data-motyw="jasny"] .hero-find .hf-all:hover::before { background: rgba(250, 250, 250, .9); }
html[data-motyw="jasny"] .hero-find .hf-all::after { opacity: 1; }

/* dolny pasek rezerwacji na stronie auta: to chrom, nie kadr, więc na jasnym
   motywie jaśnieje jak nawigacja; kwota i opis biorą kolory z tokenów */
html[data-motyw="jasny"] .bk-pasek { background: var(--bg0); }

/* Pasek wyszukiwania w hero i finale stoi na fotografii, więc pigułka zostaje
   ciemna także w jasnym motywie — a napisy w niej dostają jasne barwy wprost,
   bo tokeny przewracały „Kłodzko", „Termin" i „Szukaj" na czarno i gasiły je
   na ciemnym tle. */
html[data-motyw="jasny"] .hf-field input,
html[data-motyw="jasny"] .hf-field select,
html[data-motyw="jasny"] .hf-city-btn,
html[data-motyw="jasny"] .hf-pick-btn { color: #f5f5f4; }
html[data-motyw="jasny"] .hf-lbl,
html[data-motyw="jasny"] .hf-q input::placeholder,
html[data-motyw="jasny"] .hf-bar .hf-chev { color: #a2a6ac; }
html[data-motyw="jasny"] .hf-pick-btn.empty .hf-pick-label { color: #a2a6ac; }

/* rozwinięcie z kalendarzem nad paskiem: ciemny panel niezależnie od motywu,
   więc wszystko, co pisane tokenami, wraca do barw motywu ciemnego */
html[data-motyw="jasny"] .hf-cal { color: #f5f5f4; }
html[data-motyw="jasny"] .hf-nav-btn,
html[data-motyw="jasny"] .hf-cal-lbl span,
html[data-motyw="jasny"] .hf-cal-sum,
html[data-motyw="jasny"] .hf-cal-clear { color: #a2a6ac; }
html[data-motyw="jasny"] .hf-cal-sum b { color: #f5f5f4; }
html[data-motyw="jasny"] .hf-cal-clear:hover { color: #f5f5f4; }
html[data-motyw="jasny"] .hf-nav-btn:hover:not(:disabled) { color: var(--red2); }

/* wyniki szukania pod paskiem: ten sam ciemny panel co lista miast, bo szkło
   z tokenów robiło się białe i gryzło z resztą rozwinięć na fotografii */
html[data-motyw="jasny"] .hf-results { background: rgba(20, 20, 23, .97); color: #f5f5f4; }
html[data-motyw="jasny"] .hf-results .hf-res-price,
html[data-motyw="jasny"] .hf-results .hf-empty { color: #a2a6ac; }

/* stopka: kolumny i odnośniki mają zaszyte jasne szarości pod czarne tło,
   więc na jasnej stopce znikały — tu przechodzą na tokeny */
html[data-motyw="jasny"] .footer h4,
html[data-motyw="jasny"] .footer-cols h4 { color: var(--ink); }
html[data-motyw="jasny"] .footer ul a,
html[data-motyw="jasny"] .footer ul li,
html[data-motyw="jasny"] .footer-cols a,
html[data-motyw="jasny"] .footer-cols li { color: var(--dim); }
html[data-motyw="jasny"] .footer ul a:hover,
html[data-motyw="jasny"] .footer-cols a:hover { color: var(--ink); }
html[data-motyw="jasny"] .footer-cols .footer-hours { color: #6d727a; }
html[data-motyw="jasny"] .footer-bottom a:hover { color: var(--ink); }
/* Przyciski profili mają w ciemnym motywie białą kreskę na czerni; na jasnym
   tle znikałaby, więc obie barwy schodzą na tokeny. */
html[data-motyw="jasny"] .social-btn { border-color: var(--line); color: var(--dim); }
html[data-motyw="jasny"] .social-btn:hover {
  color: var(--ink);
  border-color: rgba(23, 24, 27, .26);
  background: rgba(23, 24, 27, .04);
}
html[data-motyw="jasny"] .disclaimer { border-color: rgba(23, 24, 27, .14); border-left-color: var(--red); background: rgba(23, 24, 27, .035); }
html[data-motyw="jasny"] .disclaimer b { color: var(--ink); }

/* dokumenty: treść regulaminu i polityki pisana jasnymi szarościami pod
   czarne tło — na jasnym tle dokumentów przechodzi na ciemne odpowiedniki */
html[data-motyw="jasny"] .doc h2,
html[data-motyw="jasny"] .doc b,
html[data-motyw="jasny"] .doc a { color: var(--ink); }
html[data-motyw="jasny"] .doc p,
html[data-motyw="jasny"] .doc li { color: #3e434c; }
html[data-motyw="jasny"] .doc .doc-date { color: var(--dim); }
html[data-motyw="jasny"] .doc a:hover { color: var(--red2); }
html[data-motyw="jasny"] .doc-code { background: rgba(23, 24, 27, .06); color: var(--ink); }

/* ============================================================
   TELEFON; wykończenie dotykowe
   Blok stoi na końcu pliku celowo: zbiera poprawki, które dotyczą wszystkich
   sekcji naraz (wielkość celów dotyku, odpowiedź na dotknięcie, widok
   poziomy), więc przy każdej z nich z osobna byłby powtórzony kilkanaście
   razy. Reguły są tu ostatnie w kolejności, a to przy równej ważności
   selektorów rozstrzyga.
   ============================================================ */

/* ---------- odpowiedź na dotknięcie ----------
   Bez kursora nie ma stanu „najechania", więc jedynym potwierdzeniem, że
   przycisk przyjął dotknięcie, jest to, co dzieje się w chwili nacisku.
   Domyślną szarą plamę przeglądarki wyłącza -webkit-tap-highlight-color na
   <body>; tu wchodzi zamiennik. Skala zamiast zmiany tła: działa tak samo
   w ciemnym i jasnym motywie, więc nie wymaga dwóch zestawów barw. */
@media (hover: none) {
  .btn:active,
  .nav-call:active,
  .nav-search-btn:active,
  .pref-btn:active,
  .wyb-skip:active,
  .cat-toggle:active,
  .hf-pick-btn:active,
  .ofc-pick-btn:active,
  .bk-pill:active,
  .cal-day:active,
  .time-grid button:active { transform: scale(.97); }
  /* Wiersze list i karty tylko przygasają: skala na elemencie o wysokości
     ekranu wygląda jak drgnięcie całej strony. */
  .wyb-lista a:active,
  .mobile-menu a:active,
  .cat-card:active,
  .search-results a:active,
  .pyt-pytanie:active,
  .why-panel-item:active { opacity: .72; }
  /* Przejście musi być krótkie: przy 250 ms z reguł najechania odpowiedź
     przychodzi już po oderwaniu palca. */
  .btn, .nav-call, .nav-search-btn, .pref-btn, .wyb-skip, .cat-toggle,
  .hf-pick-btn, .ofc-pick-btn, .bk-pill, .cal-day,
  .wyb-lista a, .mobile-menu a, .cat-card, .search-results a, .why-panel-item {
    transition-duration: 120ms;
  }
}

/* ---------- cele dotyku ----------
   Poniżej 44 px palec musi celować, a przy chybieniu strona reaguje nie tym,
   czym trzeba. Wartości mierzone na iPhonie 390 px i Androidzie 360 px. */
@media (max-width: 900px) {
  /* Najdrobniejsze podpisy (nadtytuły, miejsce przy poście z Instagrama,
     nagłówki kolumn stopki) miały 10,6–10,9 px; na telefonie w słońcu to za
     mało. Krok w górę o pół piksela nie rusza układu, a schodzi z listy
     zastrzeżeń audytu czytelności. */
  .eyebrow, .ig-gdzie, .footer-cols h4 { font-size: .72rem; }
  /* znak firmowy w pasku miał 26 px wysokości, a jest wyjściem na stronę
     główną z każdej podstrony */
  .nav-logo { display: inline-flex; align-items: center; min-height: 44px; }
  /* odnośniki w stopce stały w wierszach po 18–21 px, jeden pod drugim;
     w kolumnie takich samych odsyłaczy chybienie o wiersz jest najłatwiejsze */
  .footer-cols li a,
  .footer-bottom a,
  .lok-link { display: inline-flex; align-items: center; min-height: 40px; }
  /* W treści (regulamin, polityka, „O nas", pytania) odsyłacze siedzą w środku
     zdań, więc rozpychanie ich do 40 px połamałoby akapit. Zamiast tego rosną
     tylko odstępy nad i pod napisem: z 17 px robi się 33 px, palec ma w co
     trafić, a wiersz tekstu zostaje na miejscu. Przyciski (.btn) omijamy, bo
     mają własną wysokość, a nadmiarowa wyściółka spłaszczyłaby je do napisu. */
  .doc p a:not(.btn),
  .doc li a:not(.btn),
  .lok-faq p a,
  .consent span a,
  .ig-nick { padding-block: 13px; }
  /* pigułka „Zadzwoń" i lupa: równa wysokość, obie w progu trafienia */
  .nav .nav-call,
  .nav-search-btn { height: 44px; }
  .nav-search-btn { width: 44px; }
}

/* ---------- pola paska wyszukiwania wypełniają pigułkę ----------
   Obsługę otwierania przeniósł na całe pole shared.js (tam pełny opis), ale
   sam przycisk musi jeszcze urosnąć: to on dostaje obrys ogniska i reakcję na
   dotknięcie, więc zostawiony przy szerokości napisu podświetlałby środek
   pigułki, a resztę zostawiał martwą na oko. Zmierzone przed poprawką: pole
   miasta 341 px przy przycisku 74 px, pole terminu 341 px przy 54 px. */
@media (max-width: 760px) {
  .hf-city-btn,
  .hf-pick-btn {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 0;
  }
  /* Ikony pól nie są celem same w sobie; kliknięcie w nie i tak otwiera panel
     (obsługa siedzi na polu), a bez tego stoją między przyciskiem a krawędzią
     jak dziura w pigułce. */
  .hf-when .hf-ico,
  .hf-city .hf-pin { pointer-events: none; }
}

/* ---------- podłoga wielkości pisma ----------
   Drobne wersaliki z szerokim odstępem to język całej strony i nie ma powodu
   go zmieniać. Ale kilka z nich zeszło na telefonie do 9,3–10,2 px, a niosą
   rzeczy, na których klient traci pieniądze albo gubi się w formularzu:
   dopłaty przy godzinach i miejscach odbioru, etykiety pól, podpisy dat
   rezerwacji i wiersz „Razem". Te idą w górę; plakietki i nadpisy sekcji
   (dekoracja, nie treść) zostają jak były. */
@media (max-width: 720px) {
  .hero-h1-lead { font-size: .68rem; }
  .bk-pill span { font-size: .68rem; }
  .field label,
  .bk-wlasny-pole label { font-size: .7rem; }
  .time-chip small { font-size: .72rem; }
  .sum-total span { font-size: .72rem; }
  .back-link { font-size: .7rem; }
  .fleet-showcase-price small { font-size: .68rem; }
}

/* ---------- telefon w poziomie ----------
   Pasek nawigacji zwija się do burgera dopiero przy 720 px szerokości, więc
   telefon obrócony na bok (najczęściej 844×390) dostawał pełne menu w oknie
   wysokim na 390 px: „O nas" łamało się na dwie linijki, a hero z podłogą
   680 px zajmowało prawie dwa ekrany. Rozstrzyga tu wysokość okna, nie
   szerokość; przy 480 px i mniej mówimy już wyłącznie o telefonie. */
@media (orientation: landscape) and (max-height: 480px) {
  .nav-links a { white-space: nowrap; }
  .hero { min-height: 100svh; }
  /* Pasek wyszukiwania w hero i tak nie zmieści się pod nagłówkiem w oknie
     tej wysokości; nagłówek schodzi więc o stopień, żeby oba weszły w kadr. */
  .hero-h1-city { font-size: clamp(2.6rem, 11vh, 4.4rem); }
  .hero-content { padding-bottom: 18px; }
  /* Kalendarz jako arkusz ma już swoje zapytanie (max-height: 800px), ale
     przy 390 px wysokości musi jeszcze oddać margines górny. */
  .hf-cal { bottom: 8px; max-height: calc(100svh - var(--nav-h) - 16px); }
}

/* ---------- pasek nad otwartym menu telefonu ----------
   Nad kadrem hero pasek jest biały niezależnie od motywu (blok „MOTYW JASNY"
   wyżej), bo leży na fotografii. Otwarte menu podkłada pod niego własną,
   jasną powierzchnię i biały znak firmowy razem z krzyżykiem znikał z widoku;
   trzeba było trafić w niewidoczny przycisk, żeby menu zamknąć. Przy otwartym
   menu pasek wraca więc do barw motywu. */
html[data-motyw="jasny"] body.menu-open .nav:not(.scrolled) .logo,
html[data-motyw="jasny"] body.menu-open .nav:not(.scrolled) .nav-search-btn,
html[data-motyw="jasny"] body.menu-open .nav:not(.scrolled) .nav-call { color: var(--ink); }
html[data-motyw="jasny"] body.menu-open .nav:not(.scrolled) .nav-call { border-color: rgba(23, 24, 27, .2); }
html[data-motyw="jasny"] body.menu-open .nav:not(.scrolled) .nav-burger span { background: var(--ink); }

/* ==========================================================
   NEWSLETTER — pas zapisu przed stopką
   ==========================================================
   Wzór to formularz „Enquire" ze strony Gordona Murraya: sam tytuł,
   jeden akapit i pola w wąskiej kolumnie na czystej czerni. Nic tu nie
   jest zaokrąglone ani wypełnione: pola i przycisk to te same kwadratowe
   ramki, różni je tylko napis. Stąd własne reguły dla pól zamiast
   globalnego .field, które ma pigułkowe rogi i etykiety nad polem;
   tutaj etykietę niesie podpowiedź w środku, a dla czytników zostaje
   .sr-only w HTML.

   Obsługa w js/newsletter.js, podstrona /newsletter w newsletter.html.
   ========================================================== */
.nl {
  background: #000;
  padding: clamp(76px, 9.5vw, 150px) 20px;
}
html[data-motyw="jasny"] .nl { background: var(--bg0); }
/* Wariant podstrony /newsletter: ten sam pas, ale sam na stronie, więc
   musi zejść spod paska nawigacji i wypełnić okno do stopki. */
.nl--strona {
  min-height: 72vh;
  display: grid;
  align-content: center;
  padding-top: calc(var(--nav-h) + clamp(40px, 7vw, 96px));
}

.nl-shell {
  width: 100%;
  max-width: 440px;
  margin-inline: auto;
  display: grid;
  justify-items: center;
  text-align: center;
}
/* Tytuł lżejszy niż reszta nagłówków strony (400, nie 500): jedno słowo
   w tej wielkości niesie wagę samą literą, bold robiłby się ciężki. */
.nl-title {
  font-weight: 400;
  font-size: clamp(2.1rem, 4vw, 3.2rem);
  letter-spacing: .02em;
  color: #fff;
}
html[data-motyw="jasny"] .nl-title { color: var(--ink); }
.nl-lead {
  max-width: 36ch;
  margin: 22px 0 0;
  color: #b9bcc2;
  font-size: .98rem;
  line-height: 1.55;
}
html[data-motyw="jasny"] .nl-lead { color: var(--dim); }
.nl-lead--zle { color: var(--red2); }

/* Przyciski pod treścią (potwierdzenie zapisu, wypis): te same kwadratowe
   ramki co pola formularza, równej wysokości, w jednym rzędzie. Jeden
   przycisk bierze całą szerokość, dwa dzielą ją po połowie; na telefonie
   stają jeden pod drugim. Pełny (biały) jest ten, po który się tu
   przyszło; drugi zostaje ramką. */
.nl-akcje {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); gap: 12px;
  width: 100%;
  margin-top: clamp(28px, 3.5vw, 40px);
}
.nl-btn {
  display: inline-flex; align-items: center; justify-content: center;
  height: 50px; width: 100%; padding: 0 18px;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, .28);
  border-radius: 0;
  color: #fff;
  font: inherit; font-size: .78rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
  text-align: center; text-decoration: none; cursor: pointer;
  transition: border-color .2s, background .2s, color .2s;
}
.nl-btn:hover { background: #fff; color: #000; border-color: #fff; }
.nl-btn--pelny { background: #fff; color: #000; border-color: #fff; }
.nl-btn--pelny:hover { background: transparent; color: #fff; border-color: rgba(255, 255, 255, .7); }
.nl-btn:disabled { opacity: .45; cursor: default; }
html[data-motyw="jasny"] .nl-btn { border-color: rgba(23, 24, 27, .3); color: var(--ink); }
html[data-motyw="jasny"] .nl-btn:hover { background: var(--ink); color: #fff; border-color: var(--ink); }
html[data-motyw="jasny"] .nl-btn--pelny { background: var(--ink); color: #fff; border-color: var(--ink); }
html[data-motyw="jasny"] .nl-btn--pelny:hover { background: transparent; color: var(--ink); }
@media (max-width: 520px) { .nl-akcje { grid-template-columns: 1fr; } }

.nl-form { width: 100%; margin-top: clamp(30px, 4vw, 44px); text-align: left; }
/* Imię i adres obok siebie, przycisk pod nimi na całą szerokość. */
.nl-pola { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.nl-pola input, .nl-send {
  width: 100%;
  height: 50px;
  padding: 0 18px;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, .28);
  border-radius: 0;
  color: #fff;
  font-size: .92rem;
  transition: border-color .2s, background .2s, color .2s;
}
.nl-pola input::placeholder { color: #8f939a; }
.nl-pola input:hover { border-color: rgba(255, 255, 255, .45); }
.nl-pola input:focus { outline: none; border-color: rgba(255, 255, 255, .8); }
.nl-pola input.err { border-color: var(--red); }
.nl-send {
  grid-column: 1 / -1;
  text-transform: uppercase;
  letter-spacing: .14em;
  font-weight: 600;
  font-size: .78rem;
  cursor: pointer;
}
.nl-send:hover { background: #fff; color: #000; border-color: #fff; }
.nl-send:disabled { opacity: .45; cursor: default; background: transparent; color: #fff; border-color: rgba(255, 255, 255, .28); }
html[data-motyw="jasny"] .nl-pola input,
html[data-motyw="jasny"] .nl-send { border-color: rgba(23, 24, 27, .3); color: var(--ink); }
html[data-motyw="jasny"] .nl-pola input:focus { border-color: rgba(23, 24, 27, .8); }
html[data-motyw="jasny"] .nl-send:hover { background: var(--ink); color: #fff; border-color: var(--ink); }
html[data-motyw="jasny"] .nl-send:disabled { background: transparent; color: var(--ink); }

/* Zgoda pod przyciskiem: musi tu być (to podstawa przetwarzania), ale ma
   być cicha, żeby nie konkurować z formularzem. */
.nl-zgoda {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 10px;
  align-items: start;
  margin-top: 16px;
  color: #8f939a;
  font-size: .74rem;
  line-height: 1.55;
  cursor: pointer;
}
.nl-zgoda input {
  width: 15px; height: 15px;
  margin: 2px 0 0;
  accent-color: #fff;
  cursor: pointer;
}
html[data-motyw="jasny"] .nl-zgoda input { accent-color: var(--ink); }
.nl-zgoda a { color: #d8dadd; text-decoration: underline; text-underline-offset: 3px; }
html[data-motyw="jasny"] .nl-zgoda a { color: var(--ink); }
.nl-zgoda.err span { color: var(--red2); }

.nl-stopka { margin-top: 12px; }
.nl-info { margin: 0; min-height: 1.3em; font-size: .8rem; color: #8f939a; text-align: center; }
.nl-info.err { color: var(--red2); }
.nl-info.ok { color: #8fe3b0; }
html[data-motyw="jasny"] .nl-info.ok { color: #1d7a4c; }

/* Po zapisie na miejscu formularza zostaje samo potwierdzenie; wyśrodkowane
   jak reszta pasa, bo pól, które trzymałyby lewą krawędź, już nie ma. */
.nl-form--wyslany { display: grid; gap: 12px; justify-items: center; text-align: center; }
.nl-form--wyslany h3 {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.02rem; font-weight: 500; letter-spacing: .08em; text-transform: uppercase;
}
.nl-form--wyslany p { margin: 0; max-width: 40ch; color: #b9bcc2; font-size: .9rem; line-height: 1.6; }
html[data-motyw="jasny"] .nl-form--wyslany p { color: var(--dim); }

@media (max-width: 520px) {
  /* Dwa pola w jednym wierszu zostawiają na telefonie miejsce na dwa
     słowa; jedna kolumna czyta się tak, jak formularz wypełnia się palcem. */
  .nl-pola { grid-template-columns: 1fr; }
}

/* ==========================================================
   IKONY INTERFEJSU
   ==========================================================
   Rysunki leżą w /assets/ikony jako czarna kreska z kanałem alfa, wycięte
   z firmowego arkusza przez tools/wytnij-ikony-ui.js. Na stronie nie są
   obrazkiem, tylko maską: pod nią leży kolor tekstu, więc jedna ikona świeci
   bielą w nocy, czernieje w dzień i czerwienieje tam, gdzie czerwieni się
   napis obok. Dlatego dalej stoją w kodzie jako <svg>, tyle że pusty —
   wszystkie miary z tego arkusza (.hf-ico, .mm-tel svg, .op-gwiazdki svg…)
   celują w svg i mają działać bez zmian.

   Nowa ikona to plik w /assets/ikony plus jeden wiersz niżej; ten sam zestaw
   powtarza się w admin/admin.css, bo panel wczytuje własny arkusz.
   ========================================================== */
svg.ik {
  background-color: currentColor;
  -webkit-mask-image: var(--ik); mask-image: var(--ik);
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: center; mask-position: center;
  -webkit-mask-size: contain; mask-size: contain;
}
.ik-auto { --ik: url("/assets/ikony/auto.webp"); }
.ik-blyskawica { --ik: url("/assets/ikony/blyskawica.webp"); }
.ik-dymek { --ik: url("/assets/ikony/dymek.webp"); }
.ik-gwiazdka { --ik: url("/assets/ikony/gwiazdka.webp"); }
.ik-kadr { --ik: url("/assets/ikony/kadr.webp"); }
.ik-kafle { --ik: url("/assets/ikony/kafle.webp"); }
.ik-kalendarz { --ik: url("/assets/ikony/kalendarz.webp"); }
.ik-karta { --ik: url("/assets/ikony/karta.webp"); }
.ik-klodka { --ik: url("/assets/ikony/klodka.webp"); }
.ik-koperta { --ik: url("/assets/ikony/koperta.webp"); }
.ik-ksiazka { --ik: url("/assets/ikony/ksiazka.webp"); }
.ik-ksiezyc { --ik: url("/assets/ikony/ksiezyc.webp"); }
.ik-link { --ik: url("/assets/ikony/link.webp"); }
.ik-lupa { --ik: url("/assets/ikony/lupa.webp"); }
.ik-metka { --ik: url("/assets/ikony/metka.webp"); }
.ik-naped { --ik: url("/assets/ikony/naped.webp"); }
.ik-olowek { --ik: url("/assets/ikony/olowek.webp"); }
.ik-pin { --ik: url("/assets/ikony/pin.webp"); }
.ik-plus { --ik: url("/assets/ikony/plus.webp"); }
.ik-procent { --ik: url("/assets/ikony/procent.webp"); }
.ik-ptaszek { --ik: url("/assets/ikony/ptaszek.webp"); }
.ik-samolot { --ik: url("/assets/ikony/samolot.webp"); }
.ik-serce { --ik: url("/assets/ikony/serce.webp"); }
.ik-skrzynia { --ik: url("/assets/ikony/skrzynia.webp"); }
.ik-slonce { --ik: url("/assets/ikony/slonce.webp"); }
.ik-strzalka-dol { --ik: url("/assets/ikony/strzalka-dol.webp"); }
.ik-strzalka-lewo { --ik: url("/assets/ikony/strzalka-lewo.webp"); }
.ik-strzalka-prawo { --ik: url("/assets/ikony/strzalka-prawo.webp"); }
.ik-telefon { --ik: url("/assets/ikony/telefon.webp"); }
.ik-uwaga { --ik: url("/assets/ikony/uwaga.webp"); }
.ik-wyloguj { --ik: url("/assets/ikony/wyloguj.webp"); }
.ik-zakladka { --ik: url("/assets/ikony/zakladka.webp"); }
.ik-zebatka { --ik: url("/assets/ikony/zebatka.webp"); }
.ik-zegar { --ik: url("/assets/ikony/zegar.webp"); }

/* ============================================================
   PASEK O CIASTECZKACH
   ============================================================
   Nazwy klas i id celowo bez słowa „cookie": listy blokujące powiadomienia
   o ciasteczkach (EasyList Cookie, wbudowana w Brave i Operę, w uBlocku pod
   „Annoyances") mają ogólne reguły w rodzaju ###cookieBar i ##.cookie-bar-*,
   które chowają taki element na każdej stronie chwilę po wstawieniu.
   Strona nie ustawia ciasteczek, więc to nie jest brama zgody: nic nie
   blokuje, niczego nie pyta, ma jeden przycisk zamykający i odnośnik do
   dokumentu. Stoi w prawym dolnym rogu, bo lewy zajmuje pigułka języka
   i motywu; na wąskim ekranie pigułka i tak znika, więc pasek bierze
   całą szerokość. Wstawia go js/ustawienia.js prosto do <body> — nakładki
   position: fixed nie wolno kłaść pod elementem z transform ani filter,
   bo wtedy odnoszą się do niego, a nie do okna. */
.pasek-info {
  position: fixed;
  right: clamp(14px, 2.6vw, 28px);
  bottom: calc(clamp(14px, 2.6vw, 28px) + env(safe-area-inset-bottom));
  /* nad pigułką ustawień (95), pod paskiem nawigacji (100) i menu (99) */
  z-index: 96;
  width: min(400px, calc(100vw - 28px));
  display: grid;
  gap: 14px;
  padding: 18px 20px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: rgba(10, 10, 11, .94);
  box-shadow: var(--shadow-lg);
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .4s ease, transform .4s cubic-bezier(.2, .8, .2, 1);
}
.pasek-info.pokaz { opacity: 1; transform: none; }
.pasek-info-tekst { margin: 0; color: #b3b6bb; font-size: .82rem; line-height: 1.65; }
.pasek-info-tekst a {
  color: #f2f2f0;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}
@media (hover: hover) and (pointer: fine) {
  .pasek-info-tekst a:hover { color: var(--red2); }
}
.pasek-info-akcje { display: flex; justify-content: flex-end; }
.pasek-info .btn { padding: 11px 26px; font-size: .82rem; }
/* Otwarty arkusz rezerwacji zasłania ekran i sam trzyma stuknięcia; pasek
   wiszący nad nim łapałby palec obok arkusza (tak samo chowa się pigułka). */
body.hf-arkusz .pasek-info { display: none; }
@media (max-width: 700px) {
  /* Na telefonie pasek stoi nad pierwszym ekranem, więc liczy się każdy
     piksel wysokości: przycisk wchodzi w ten sam wiersz co tekst, zamiast
     stać pod nim. Pełna szerokość, bo pigułka ustawień i tak jest tu ukryta. */
  .pasek-info {
    left: 10px;
    right: 10px;
    width: auto;
    bottom: calc(10px + env(safe-area-inset-bottom));
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px 14px;
    padding: 14px 16px;
  }
  .pasek-info-tekst { font-size: .78rem; line-height: 1.55; }
  /* 44 px wysokości: próg, w który palec trafia bez celowania */
  .pasek-info .btn { padding: 12px 20px; min-height: 44px; font-size: .78rem; }
}
@media (prefers-reduced-motion: reduce) {
  .pasek-info { transition: none; }
}
html[data-motyw="jasny"] .pasek-info {
  border-color: rgba(23, 24, 27, .14);
  background: rgba(255, 255, 255, .97);
  box-shadow: 0 22px 60px rgba(23, 24, 27, .16);
}
html[data-motyw="jasny"] .pasek-info-tekst { color: #3e434c; }
html[data-motyw="jasny"] .pasek-info-tekst a { color: var(--ink); }

/* ---------- akapity o wynajmie w mieście ----------
   Sekcja pod opiniami na stronach /wroclaw, /klodzko, /poznan, /lodz
   i /krakow; treść wstawia functions/[miasto].js z lib/miasta-strona.json.
   Wygląd jeden do jednego z pasem „O nas” wyżej na tej samej stronie:
   ciemny pas na pełną szerokość, kreski łamu w tle (ten sam element
   .onas-kreski, co w „O nas” i Instagramie), tytuł wersalikami przy lewej
   kreślce, pod nim akapity w jasnym, lekkim kroju i przycisk na dole.
   Właściciel wskazał ten pas jako wzór; dwie sekcje w jednym języku
   starzeją się razem, więc wartości są przepisane z .onas-*. */
.miasto-tresc {
  position: relative;
  overflow: hidden;
  background: #020203;
  color: #f5f5f3;
}

.miasto-tresc-shell {
  position: relative;
  padding: clamp(96px, 12vw, 180px) clamp(20px, 3.2vw, 48px);
}
.miasto-tresc .rvg > * { transition-delay: calc(var(--i, 0) * 90ms); }

.miasto-tresc-shell h2 {
  margin: 0;
  font-size: clamp(1.7rem, 2.6vw, 3rem);
}

.miasto-tresc-shell p {
  max-width: 62ch;
  margin: clamp(20px, 2.6vw, 34px) 0 0;
  color: rgba(255, 255, 255, .84);
  font-size: clamp(1.15rem, 1.9vw, 1.7rem);
  font-weight: 350;
  line-height: 1.5;
}
.miasto-tresc-shell p + p { margin-top: clamp(16px, 2vw, 26px); }

/* Odnośnik do strony oddziału w tej samej pigułce, co „Poznaj nas”. */
.miasto-tresc-shell p.miasto-tresc-wiecej {
  max-width: none;
  margin: clamp(44px, 6vw, 72px) 0 0;
}

html[data-motyw="jasny"] .miasto-tresc { background: var(--bg0); color: var(--ink); }
html[data-motyw="jasny"] .miasto-tresc-shell p { color: rgba(23, 24, 27, .85); }