@charset "UTF-8";

/* ==================================================================
   Parking Pasaż Parsęta -system „Dzienna / Nocna zmiana"
   North Star: „Malowana linia" (patrz DESIGN.md)

   Jeden arkusz dla całej witryny. Wcześniej te reguły siedziały inline
   w index.html; przy witrynie wielostronicowej wspólny plik jest
   jednym źródłem prawdy i cache'uje się między podstronami.

   Spis:
    1. Czcionka (self-host)          8. Tablice i kafle
    2. Tokeny „Dziennej zmiany"      9. Cennik
    3. Reset i baza                 10. Mapa za zgodą + adres
    4. Layout i typografia          11. Galeria (filmstrip)
    5. Listwa i nawigacja           12. Dokument (FAQ, polityka, 404)
    6. Przyciski                    13. Kontakt, stopka, callbar
    7. Hero i nagłówki stron        14. Motyw ciemny, druk, a11y
   ================================================================== */

/* ============ 1. CZCIONKA -hostowana lokalnie (zero zapytań do Google) ============ */
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-display: swap;
  src: url(fonts/archivo-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: 'Archivo';
  font-style: normal;
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-display: swap;
  src: url(fonts/archivo-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;
}

/* ==================================================================
   2. „DZIENNA ZMIANA" -jasny system wprost ze zdjęć obiektu:
   beton, asfaltowa czerń, zieleń malowanych bram garażowych,
   jeden ślad żółtej farby znakującej przy najlepszej cenie.
   ================================================================== */
:root {
  --bg:          oklch(0.97 0.005 160);   /* beton -tło strony */
  --surface:     oklch(0.995 0.002 160);  /* białe tablice */
  --ink:         oklch(0.22 0.012 170);   /* asfalt -nagłówki */
  --ink-2:       oklch(0.38 0.018 168);   /* akapity */
  --ink-3:       oklch(0.455 0.02 168);   /* etykiety (tylko duże/krótkie) */
  --line:        oklch(0.885 0.012 165);  /* fugi między płytami */
  --line-2:      oklch(0.79 0.015 165);

  --brand:       oklch(0.46 0.115 158);   /* zieleń bram -kolor prowadzący */
  --brand-deep:  oklch(0.385 0.095 160);  /* hover / cień farby */
  /* Zieleń do DROBNEGO tekstu (etykiety, numery, kickery). W jasnym motywie to ta sama
     zieleń bram; w ciemnym rozjaśniona, bo brand na `surface` daje tam tylko 4.36:1.
     Patrz „Zasada koloru na kolorze" w DESIGN.md. */
  --brand-ink:   oklch(0.46 0.115 158);
  --brand-dark:  oklch(0.29 0.05 162);    /* stopka */
  --brand-tint:  oklch(0.945 0.028 158);  /* podświetlenie wiersza */
  --on-brand:    oklch(0.985 0.004 160);  /* tekst na zieleni */
  --on-brand-2:  oklch(0.955 0.022 156);  /* tekst drugorzędny na zieleni (≥4.5:1) */

  --board:       oklch(0.25 0.014 172);   /* ciemna tablica informacyjna */
  --board-line:  oklch(1 0 0 / 0.13);
  --on-board:    oklch(0.985 0.004 160);  /* tekst na ciemnych kaflach -zawsze jasny */
  --on-board-2:  oklch(0.79 0.015 165);
  --board-icon:    oklch(0.76 0.11 152);     /* ikony na ciemnych tablicach (oba motywy) */
  --board-icon-bg: oklch(0.62 0.16 152 / 0.1);

  --paint:       oklch(0.87 0.145 95);    /* żółta farba znakująca */
  --paint-ink:   oklch(0.31 0.065 90);

  /* powierzchnie i akcenty przełączane między motywami (patrz „NOCNA ZMIANA") */
  --topbar-bg:      oklch(0.995 0.002 160 / 0.92);  /* szklana listwa */
  --brand-wash:     oklch(0.46 0.115 158 / 0.08);   /* podświetlenie hoverów */
  --brand-wash-2:   oklch(0.46 0.115 158 / 0.12);   /* tło plakietki oszczędności */
  --head-bg:        oklch(0.22 0.012 170);          /* nagłówek tablicy cennika */
  --head-ink:       oklch(0.995 0.002 160);
  --head-ink-2:     oklch(0.80 0.012 165);
  --inline-underline: oklch(0.46 0.115 158 / 0.4);  /* podkreślenie linków w tekście */
  --on-footer:      oklch(0.985 0.004 160);         /* tekst w stopce -zawsze jasny */
  --on-footer-2:    oklch(0.93 0.035 156);
  --footer-mark-bg: oklch(0.995 0.002 160);         /* znak „P" w stopce */
  --footer-mark-ink:oklch(0.29 0.05 162);
  --plate-shadow:   0 18px 44px oklch(0.22 0.012 170 / 0.16);
  --cta-shadow:     0 6px 18px oklch(0.46 0.115 158 / 0.28);
  --cta-shadow-hi:  0 10px 24px oklch(0.46 0.115 158 / 0.34);
  /* Woal pod otwartym arkuszem menu (jedyne użycie przygaszania w systemie) */
  --scrim:          oklch(0.22 0.012 170 / 0.28);

  --sans: 'Archivo', system-ui, sans-serif;
  --r-xs: 6px;    /* drobne plakietki (oszczędność, atrybucja mapy) */
  --r-sm: 8px;    /* przyciski, plakietki */
  --r-md: 12px;   /* tablice, zdjęcia */

  /* Krzywe: mocny ease-out dla wjazdów, krótkie „ease" dla stanów.
     Wbudowane easingi są zbyt miękkie i ruch traci intencję. */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --t-press: 140ms;
  --t-state: 160ms;

  /* Semantyczna skala warstw -żadnych 999 */
  --z-callbar: 60;
  --z-topbar: 50;
  --z-plate: 2;
  --z-consent: 70;
  --z-skip: 100;
}

/* ============ 3. RESET I BAZA ============ */
* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
html, body {
  background: var(--bg); color: var(--ink);
  font-family: var(--sans);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden; overflow-x: clip;
}
body { font-size: 16.5px; line-height: 1.55; overflow-wrap: break-word; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
strong { font-weight: 700; }
::selection { background: var(--brand); color: var(--on-brand); }
:where(a, button, summary, [tabindex]):focus-visible {
  outline: 3px solid var(--brand); outline-offset: 2px; border-radius: var(--r-sm);
}
.on-dark :where(a, button):focus-visible { outline-color: oklch(0.97 0.01 160); }
main:focus, main:focus-visible { outline: none; }

.visually-hidden {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}

/* ============ 4. LAYOUT I TYPOGRAFIA ============ */
/* Poziomy padding respektuje wcięcia bezpieczne (notch) w orientacji poziomej -env()=0 na zwykłych urządzeniach */
.container {
  max-width: 1180px; margin: 0 auto; position: relative;
  padding: 0 max(clamp(20px, 4vw, 36px), env(safe-area-inset-right)) 0 max(clamp(20px, 4vw, 36px), env(safe-area-inset-left));
}
/* Wariant dokumentowy -kolumna tekstu prawnego / FAQ */
.container--doc { max-width: 880px; }

h1, h2, h3 { text-wrap: balance; }
p { text-wrap: pretty; }

section { padding: clamp(64px, 10vw, 104px) 0; }
section.tight { padding: clamp(48px, 7vw, 76px) 0; }
[id] { scroll-margin-top: 86px; }

.section-title {
  font-size: clamp(32px, 4.6vw, 56px);
  font-weight: 800; font-stretch: 122%;
  line-height: 1.04; letter-spacing: -0.018em;
  margin-bottom: 26px;
}
.section-title em { font-style: normal; color: var(--brand); }
.section-lead { font-size: clamp(16.5px, 1.8vw, 19px); line-height: 1.6; color: var(--ink-2); max-width: 38em; }
.section-title + .section-lead { margin-top: -6px; }

.prose-narrow { max-width: 64ch; }
.prose-narrow p { font-size: clamp(16.5px, 1.9vw, 18.5px); line-height: 1.68; color: var(--ink-2); }
.prose-narrow p + p { margin-top: 16px; }
.prose-narrow h3 {
  font-size: clamp(19px, 2.2vw, 23px); font-weight: 800; font-stretch: 115%;
  line-height: 1.25; letter-spacing: -0.012em; color: var(--ink);
  margin: clamp(30px, 3.6vw, 40px) 0 12px;
}
.prose-narrow h3:first-child { margin-top: 0; }
.prose-narrow a.inline, .link-inline { color: var(--brand-deep); font-weight: 600; border-bottom: 1.5px solid var(--inline-underline); }
@media (hover: hover) {
  .prose-narrow a.inline:hover, .link-inline:hover { border-bottom-color: var(--brand); }
}

/* Wjeżdża transformem, nie własnością `top` -animacja layoutu wymusza reflow */
.skip-link {
  position: absolute; left: 16px; top: 12px; z-index: var(--z-skip);
  background: var(--ink); color: var(--surface);
  padding: 12px 18px; border-radius: var(--r-sm); font-weight: 600;
  transform: translateY(-200%);
  transition: transform .2s var(--ease-out);
}
.skip-link:focus-visible { transform: none; }

/* ==================================================================
   5. LISTWA I NAWIGACJA WIELOSTRONICOWA

   Zasada: nawigacja to prawdziwe linki do stron, działa bez JS.
   • ≥901px: jeden wiersz (brand · nawigacja · telefon), listwa sticky.
   • ≤900px: listwa jest przyklejona i wąska (58px z malowaną linią),
     a pięć pozycji plus telefon siedzi w arkuszu menu otwieranym
     hamburgerem (sekcja 5a). Arkusz to natywny popover, więc rozwijanie
     nie zależy od JavaScriptu; gdy przeglądarka nie zna popovera,
     nawigacja wraca do zawijanych chipów pod niesticky listwą (wariant
     zapasowy niżej). Telefon zostaje w zasięgu kciuka w callbarze.
   ================================================================== */
.topbar {
  position: sticky; top: 0; z-index: var(--z-topbar);
  background: var(--topbar-bg);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-top: 4px solid var(--brand);      /* malowana linia -sygnatura */
  border-bottom: 1px solid var(--line);
}
.topbar-inner { display: flex; align-items: center; justify-content: space-between; gap: 20px; min-height: 66px; }
.brand { display: flex; align-items: center; gap: 12px; font-weight: 800; font-stretch: 115%; font-size: 15px; letter-spacing: 0.01em; text-transform: uppercase; }
.brand-mark {
  width: 34px; height: 34px; flex-shrink: 0;
  background: var(--brand); color: var(--on-brand);
  display: grid; place-items: center;
  font-size: 20px; font-weight: 800; font-stretch: 125%;
  border-radius: var(--r-sm);
}
.mainnav { display: flex; gap: 6px; }
.mainnav a {
  position: relative;
  font-size: 15px; font-weight: 600; color: var(--ink-2);
  padding: 12px 14px; border-radius: var(--r-sm);
  transition: color var(--t-state) ease, background var(--t-state) ease, transform var(--t-press) var(--ease-out);
}
.mainnav a:active { transform: scale(0.97); }
@media (hover: hover) {
  .mainnav a:hover { color: var(--ink); background: var(--brand-wash); }
}
/* Strona bieżąca: malowana linia pod etykietą + pełny kontrast tekstu */
.mainnav a[aria-current="page"] { color: var(--ink); background: var(--brand-wash); font-weight: 700; }
.mainnav a[aria-current="page"]::after {
  content: ""; position: absolute; left: 14px; right: 14px; bottom: 6px;
  /* `brand-ink`, nie `brand`: cienki znacznik na tle brand-wash. W jasnym motywie
     oba tokeny są identyczne, w ciemnym `brand` dawał tu 2.84:1 zamiast 3.88:1. */
  height: 3px; border-radius: 2px; background: var(--brand-ink);
}
.topbar-actions { display: flex; align-items: center; gap: 6px; }
.topbar-tel {
  display: inline-flex; align-items: center; gap: 10px; min-height: 44px;
  font-weight: 800; font-stretch: 110%; font-size: 16px;
  color: var(--brand); padding: 10px 14px; border-radius: var(--r-sm);
  font-variant-numeric: tabular-nums;
  transition: color var(--t-state) ease, background var(--t-state) ease, transform var(--t-press) var(--ease-out);
}
@media (hover: hover) {
  .topbar-tel:hover { color: var(--brand-deep); background: var(--brand-wash); }
}
/* Telefon to element konwersji -wciśnięcie musi dawać odpowiedź także bez hovera */
.topbar-tel:active { transform: scale(0.97); }
.topbar-tel svg { width: 17px; height: 17px; stroke: currentColor; fill: none; stroke-width: 2; flex-shrink: 0; }

/* Ukryty bez JS -przełącznik nic by nie robił i miałby błędną etykietę;
   motyw automatyczny (prefers-color-scheme) działa niezależnie od tego przycisku. */
.theme-toggle {
  display: none; place-items: center;
  width: 44px; height: 44px; flex-shrink: 0;
  background: transparent; color: var(--ink-2);
  border: 1.5px solid var(--line-2); border-radius: var(--r-sm);
  cursor: pointer;
  transition: color var(--t-state) ease, border-color var(--t-state) ease, background var(--t-state) ease, transform var(--t-press) var(--ease-out);
}
html.js .theme-toggle { display: inline-grid; }
@media (hover: hover) {
  .theme-toggle:hover { color: var(--brand); border-color: var(--brand); background: var(--brand-wash); }
}
.theme-toggle:active { transform: scale(0.94); }
.theme-toggle svg { width: 19px; height: 19px; stroke: currentColor; fill: none; stroke-width: 2; }
/* Ikona odzwierciedla motyw efektywny -działa też bez JS (śledzi te same warunki co motyw) */
.theme-toggle .icon-sun { display: none; }
.theme-toggle .icon-moon { display: block; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) .theme-toggle .icon-sun { display: block; }
  :root:not([data-theme]) .theme-toggle .icon-moon { display: none; }
}
:root[data-theme="dark"] .theme-toggle .icon-sun { display: block; }
:root[data-theme="dark"] .theme-toggle .icon-moon { display: none; }

/* Ciasny desktop (1024-1120px): skracamy oddechy, nawigacja zostaje w jednym wierszu */
@media (max-width: 1120px) and (min-width: 901px) {
  .topbar-inner { gap: 12px; }
  .brand { font-size: 12.5px; gap: 10px; }
  .brand-name { max-width: 12ch; line-height: 1.15; }
  .mainnav a { font-size: 14.5px; padding: 12px 11px; }
  .mainnav a[aria-current="page"]::after { left: 11px; right: 11px; }
  .topbar-tel { font-size: 15px; padding: 10px 10px; gap: 8px; }
}

/* ---------- ≤900px: wspólna baza listwy (dla obu wariantów nawigacji) ---------- */
@media (max-width: 900px) {
  .brand { flex: 1 1 auto; min-width: 0; }
  .topbar-actions { flex: 0 0 auto; }
}

/* ---------- Wariant zapasowy: przeglądarka bez popovera ----------
   Dokładnie zachowanie z poprzedniej wersji witryny: listwa nie jest
   przyklejona, a pełna nawigacja stoi pod nią w dwóch wierszach chipów.
   Nawigacja nigdy nie zależy od skryptu ani od nowego API. */
@supports not selector(:popover-open) {
  @media (max-width: 900px) {
    .topbar { position: static; }
    .topbar-inner { flex-wrap: wrap; gap: 10px 12px; padding: 12px 0; min-height: 0; }
    .mainnav {
      order: 3; flex: 1 0 100%;
      flex-wrap: wrap; gap: 8px;
    }
    .mainnav a {
      display: inline-flex; align-items: center; min-height: 44px;
      padding: 10px 14px; font-size: 14px; font-weight: 700;
      border: 1px solid var(--line); background: var(--surface);
    }
    .mainnav a[aria-current="page"] { border-color: var(--brand); background: var(--brand-wash); }
    .mainnav a[aria-current="page"]::after { left: 13px; right: 13px; bottom: 5px; }
    [id] { scroll-margin-top: 16px; }
  }
  @media (max-width: 420px) {
    .brand-name { font-size: 11px; max-width: 14ch; line-height: 1.2; }
  }
}

/* Wąskie telefony: numer w listwie ustępuje miejsca ikonie (nazwa dostępna
   zostaje w aria-label, więc czytnik ekranu nadal czyta pełny numer).
   Pełny numer stoi obok w arkuszu menu, w callbarze i w treści strony. */
@media (max-width: 480px) {
  .topbar-tel { padding: 10px; gap: 0; min-width: 44px; justify-content: center; }
  .topbar-tel .tel-num { display: none; }
}

/* ==================================================================
   5a. MENU MOBILNE -arkusz nawigacji (≤900px)

   Mechanizm: natywny popover. Przycisk to zwykły <button popovertarget>,
   arkusz to <div popover>. Przeglądarka daje z tego warstwę górną,
   zamknięcie klawiszem Esc, zamknięcie kliknięciem obok i powrót fokusu
   na przycisk -bez ani jednej linii JavaScriptu. Skrypt dokłada wyłącznie
   lustrzane `aria-expanded` i domknięcie arkusza przy zmianie na desktop.

   Przeglądarka bez popovera nie widzi tych reguł (blok @supports wyżej
   zostawia jej chipy), więc nawigacja nie zależy ani od skryptu,
   ani od nowego API.
   ================================================================== */
.navtoggle { display: none; }
@supports not selector(:popover-open) {
  .navsheet { display: none; }
}

@supports selector(:popover-open) {
  @media (max-width: 900px) {
    /* Wysokość listwy jest deterministyczna (44px przycisków < 54px wiersza,
       więc powiększenie samego tekstu jej nie zmienia) -arkusz może się
       o nią zaczepić bez pomiaru w JS. 54 + 4 malowanej linii + 1 fugi. */
    :root { --bar-h: 59px; }

    /* Listwa wraca do sticky: hamburger ma sens tylko wtedy, gdy jest pod
       ręką na całej długości strony. W zamian wiersz jest niski i mieści
       tylko wordmark, telefon i przycisk menu. */
    .topbar { position: sticky; top: 0; }
    .topbar-inner { flex-wrap: nowrap; gap: 10px; min-height: 54px; }
    /* Wordmark w jednym wierszu (to trzyma wysokość listwy stałą), więc skala
       musi zmieścić pełną nazwę obok telefonu i przycisku menu. Elipsa zostaje
       tylko jako bezpiecznik przy skrajnym powiększeniu tekstu. */
    .brand { font-size: 12px; gap: 10px; }
    .brand-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .mainnav { display: none; }
    /* Motyw to preferencja, nie nawigacja -na telefonie schodzi do arkusza,
       żeby w listwie zostały trzy elementy, z czego jeden to konwersja. */
    html.js .topbar-actions .theme-toggle { display: none; }
    .navtoggle { display: inline-grid; }
    /* Kotwice muszą minąć przyklejoną listwę */
    [id] { scroll-margin-top: calc(var(--bar-h) + 12px); }

    /* ---------- Przycisk menu ---------- */
    .navtoggle {
      width: 44px; height: 44px; flex-shrink: 0; place-items: center;
      background: transparent; color: var(--ink-2);
      border: 1.5px solid var(--line-2); border-radius: var(--r-sm);
      cursor: pointer;
      transition: color var(--t-state) ease, border-color var(--t-state) ease,
                  background var(--t-state) ease, transform var(--t-press) var(--ease-out);
    }
    /* Hover tylko tam, gdzie istnieje wskaźnik (na dotyku stan by się przyklejał).
       Przycisk żyje poniżej 901px, więc hover dotyczy głównie zwężonego okna
       na desktopie -ale bez niego kontrolka byłaby tam martwa w reakcji. */
    @media (hover: hover) and (pointer: fine) {
      .navtoggle:hover { color: var(--brand-ink); border-color: var(--brand); background: var(--brand-wash); }
    }
    .navtoggle:active { transform: scale(0.94); }
    .navtoggle svg { width: 20px; height: 20px; stroke: currentColor; fill: none; stroke-width: 2; }
    /* Ikona podąża za stanem arkusza -bez JS, bez obracania i bez odbicia */
    .navtoggle .icon-close { display: none; }
    html:has(.navsheet:popover-open) .navtoggle {
      color: var(--brand-ink); border-color: var(--brand); background: var(--brand-wash);
    }
    html:has(.navsheet:popover-open) .navtoggle .icon-burger { display: none; }
    html:has(.navsheet:popover-open) .navtoggle .icon-close { display: block; }

    /* ---------- Arkusz ---------- */
    .navsheet {
      position: fixed; inset: var(--bar-h) 0 auto 0;
      width: auto; max-width: none; height: auto;
      max-height: calc(100dvh - var(--bar-h) - 12px);
      overflow-y: auto; overscroll-behavior: contain;
      margin: 0;
      padding: 10px max(14px, env(safe-area-inset-right, 0px))
               calc(14px + env(safe-area-inset-bottom, 0px)) max(14px, env(safe-area-inset-left, 0px));
      background: var(--surface); color: var(--ink);
      border: 0; border-bottom: 1px solid var(--line);
      border-radius: 0 0 var(--r-md) var(--r-md);
      box-shadow: var(--plate-shadow);
      /* Wjazd 190ms, wyjazd 120ms -system odpowiada szybciej, niż się otwiera */
      opacity: 0; transform: translateY(-10px);
      transition: opacity 120ms var(--ease-out), transform 120ms var(--ease-out),
                  display 120ms allow-discrete, overlay 120ms allow-discrete;
    }
    .navsheet:popover-open { opacity: 1; transform: translateY(0); transition-duration: 190ms; }
    @starting-style {
      .navsheet:popover-open { opacity: 0; transform: translateY(-10px); }
    }

    /* Woal: mówi, że tło jest wyłączone (przewijanie naprawdę stoi) i odcina
       arkusz od zielonego CTA strony pod nim. Pierwsze 59px zostaje czyste,
       więc wordmark, telefon i „✕" w listwie nie tracą kontrastu.
       Wartość podana wprost, bo dziedziczenie zmiennych do ::backdrop
       jest młodsze niż samo API popovera. */
    .navsheet::backdrop {
      background: linear-gradient(to bottom, transparent 0 59px, var(--scrim) 59px);
      opacity: 0;
      transition: opacity 120ms var(--ease-out),
                  display 120ms allow-discrete, overlay 120ms allow-discrete;
    }
    .navsheet:popover-open::backdrop { opacity: 1; transition-duration: 190ms; }
    @starting-style {
      .navsheet:popover-open::backdrop { opacity: 0; }
    }
    /* Przewijanie tła stoi, dopóki arkusz jest otwarty. `overflow` na <html>,
       nie `position: fixed` na <body> -to drugie gubi pozycję na iOS. */
    html:has(.navsheet:popover-open) { overflow: hidden; }

    /* ---------- Pozycje ---------- */
    .navsheet-nav { display: grid; }
    .navsheet-nav a {
      display: flex; align-items: center; min-height: 52px;
      padding: 12px 14px; border-radius: var(--r-sm);
      font-size: 16px; font-weight: 700; font-stretch: 110%; color: var(--ink-2);
      transition: color var(--t-state) ease, background var(--t-state) ease,
                  transform var(--t-press) var(--ease-out);
    }
    @media (hover: hover) and (pointer: fine) {
      .navsheet-nav a:hover { color: var(--ink); background: var(--brand-wash); }
    }
    .navsheet-nav a:active { transform: scale(0.985); }
    /* Strona bieżąca: malowana linia pod etykietą, tak jak w listwie na desktopie */
    /* Malowana linia w `brand-ink`, nie `brand`: to cienki znacznik na jasnym
       tle brand-wash, a w trybie ciemnym `brand` daje tam tylko 2.84:1
       (Zasada zieleni tekstowej z DESIGN.md). `brand-ink` -> 3.88:1. */
    .navsheet-nav a[aria-current="page"] {
      color: var(--ink); background: var(--brand-wash);
      text-decoration: underline; text-decoration-color: var(--brand-ink);
      text-decoration-thickness: 3px; text-underline-offset: 5px;
    }

    /* ---------- Stopka arkusza: telefon i motyw ---------- */
    .navsheet-foot { margin-top: 10px; padding-top: 12px; border-top: 1px solid var(--line); }
    .navsheet-tel {
      display: flex; align-items: center; justify-content: center; gap: 10px;
      min-height: 54px; border-radius: var(--r-sm);
      background: var(--brand); color: var(--on-brand);
      font-size: 16px; font-weight: 800; font-stretch: 112%; letter-spacing: 0.02em;
      font-variant-numeric: tabular-nums;
      box-shadow: var(--cta-shadow);
      transition: background var(--t-state) ease, transform var(--t-press) var(--ease-out);
    }
    @media (hover: hover) and (pointer: fine) {
      .navsheet-tel:hover { background: var(--brand-deep); box-shadow: var(--cta-shadow-hi); }
    }
    .navsheet-tel:active { background: var(--brand-deep); transform: scale(0.97); }
    .navsheet-tel svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 2; flex-shrink: 0; }
    .navsheet-godziny {
      margin-top: 8px; text-align: center;
      font-size: 13px; font-weight: 600; color: var(--ink-3);
    }
    .navsheet-theme { display: none; }
    html.js .navsheet-theme {
      display: flex; align-items: center; justify-content: space-between; gap: 12px;
      margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line);
    }
    .navsheet-theme span {
      font-size: 13px; font-weight: 700; font-stretch: 112%;
      letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-3);
    }

    /* Arkusz jest jedynym „zawsze pod kciukiem" elementem, dopóki jest otwarty:
       callbar i baner zgody schodzą, żeby nie licytowały się z jego CTA. */
    html:has(.navsheet:popover-open) .callbar { transform: translateY(110%); }
    html:has(.navsheet:popover-open) .cookie-baner {
      opacity: 0; transform: translateY(20px); pointer-events: none;
      transition: opacity var(--t-state) ease, transform var(--t-state) ease;
    }
  }
  /* Telefon w orientacji poziomej: przy jednej kolumnie CTA z numerem wypadało
     poza ekran i trzeba było do niego przewijać arkusz. Pozycje idą w dwie
     kolumny, więc telefon zostaje widoczny od razu. */
  @media (max-width: 900px) and (max-height: 480px) {
    .navsheet-nav { grid-template-columns: 1fr 1fr; column-gap: 8px; }
    .navsheet-nav a { min-height: 48px; }
    .navsheet-tel { min-height: 50px; }
    .navsheet-godziny { margin-top: 6px; }
  }
  @media (max-width: 400px) {
    .brand { font-size: 10px; gap: 8px; }
    .brand-mark { width: 30px; height: 30px; font-size: 18px; }
  }
  /* Poniżej 360px pełna nazwa nie zmieści się obok telefonu i menu bez ucinania
     jej elipsą. Identyczność niesie wtedy sama tabliczka „P", a nazwa zostaje
     w nazwie dostępnej linku -zamiast „Parking Pasaż Pa…" na ekranie. */
  @media (max-width: 359px) {
    .brand-name {
      position: absolute; width: 1px; height: 1px; overflow: hidden;
      clip-path: inset(50%); white-space: nowrap;
    }
  }
  /* Zmiana na desktop przy otwartym arkuszu: CSS chowa go od razu (bez JS),
     a skrypt dodatkowo domyka jego stan. */
  @media (min-width: 901px) {
    .navsheet:popover-open { display: none; }
  }
}

/* ============ ŚCIEŻKA (breadcrumbs) ============ */
.breadcrumbs ol { list-style: none; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; }
.breadcrumbs li {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 13px; font-weight: 700; font-stretch: 110%;
  letter-spacing: 0.05em; text-transform: uppercase; color: var(--ink-3);
}
.breadcrumbs li + li::before {
  content: ""; width: 9px; height: 3px; border-radius: 2px;
  background: var(--line-2); flex-shrink: 0;
}
.breadcrumbs a { color: var(--brand-deep); padding: 4px 0; }
@media (hover: hover) { .breadcrumbs a:hover { color: var(--brand); text-decoration: underline; text-underline-offset: 3px; } }
.breadcrumbs [aria-current="page"] { color: var(--ink-2); }

/* ============ 6. PRZYCISKI ============ */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 52px; padding: 14px 24px;
  border-radius: var(--r-sm); border: 1.5px solid transparent;
  font-family: inherit; font-size: 14px; font-weight: 800; font-stretch: 112%;
  letter-spacing: 0.05em; text-transform: uppercase; cursor: pointer;
  transition: transform var(--t-press) var(--ease-out), background var(--t-state) ease, border-color var(--t-state) ease, color var(--t-state) ease, box-shadow var(--t-state) ease;
}
.btn svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 2; flex-shrink: 0; }
.btn-primary { background: var(--brand); color: var(--on-brand); box-shadow: var(--cta-shadow); }
.btn-secondary { background: transparent; color: var(--ink); border-color: var(--line-2); }
/* Podniesienie tylko przy prawdziwym hoverze -na dotyku stan nie „przykleja się" po tapnięciu */
@media (hover: hover) {
  .btn-primary:hover { background: var(--brand-deep); transform: translateY(-1px); box-shadow: var(--cta-shadow-hi); }
  .btn-secondary:hover { border-color: var(--brand); color: var(--brand); }
}
/* Wciśnięcie: wyraźny, natychmiastowy feedback także bez hovera (dotyk). */
.btn:active { transform: scale(0.97); }
.btn-primary:active { background: var(--brand-deep); }
/* Wariant na ciemnym/zielonym tle */
.on-dark .btn-secondary { color: var(--on-board); border-color: oklch(1 0 0 / 0.4); }
@media (hover: hover) {
  .on-dark .btn-secondary:hover { color: var(--on-board); border-color: var(--on-board); background: oklch(1 0 0 / 0.08); }
}
.btn-row { display: flex; gap: 12px; flex-wrap: wrap; }

/* Link „dalej" -tekstowy, z malowaną strzałką */
.link-next {
  display: inline-flex; align-items: center; gap: 10px; min-height: 44px;
  font-size: 14.5px; font-weight: 800; font-stretch: 112%;
  letter-spacing: 0.04em; text-transform: uppercase; color: var(--brand-deep);
  transition: color var(--t-state) ease, transform var(--t-press) var(--ease-out);
}
/* Strzałka jedzie transformem (nie `gap`), więc ruch nie przelicza layoutu wiersza */
.link-next svg {
  width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 2.2; flex-shrink: 0;
  transition: transform var(--t-state) var(--ease-out);
}
@media (hover: hover) {
  .link-next:hover { color: var(--brand); }
  .link-next:hover svg { transform: translateX(4px); }
}
.link-next:active { transform: scale(0.98); }
.on-dark .link-next { color: var(--board-icon); }

/* ============ 7. HERO (strona główna) ============ */
.hero { padding: clamp(44px, 7vh, 84px) 0 clamp(40px, 6vh, 72px); }
.hero-meta {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  font-size: 14.5px; font-weight: 600; color: var(--ink-2);
  margin-bottom: 26px;
}
.hero-meta .live {
  display: inline-flex; align-items: center; gap: 9px;
  color: var(--ink); font-weight: 700;
  background: var(--brand-wash);
  padding: 7px 14px; border-radius: 999px;
}
/* Znacznik w motywie „malowanej linii" -zielony pasek, nie kropka-status */
.hero-meta .live::before { content: ""; width: 13px; height: 3px; border-radius: 2px; background: var(--brand); flex-shrink: 0; }
.hero h1 {
  font-size: clamp(38px, 5.8vw, 74px);
  font-weight: 800; font-stretch: 122%;
  line-height: 1.02; letter-spacing: -0.02em;
  margin-bottom: 24px;
}
.hero h1 em { font-style: normal; color: var(--brand); }
.hero-lead { font-size: clamp(17px, 2vw, 19.5px); line-height: 1.6; color: var(--ink-2); max-width: 34em; margin-bottom: 34px; }
.hero-actions { display: flex; gap: 12px; flex-wrap: wrap; }
.hero-actions .cta-num { display: none; }
/* Na desktopie z myszą tap-to-call jest słabszy niż na telefonie. Zamiast chować
   całe CTA (i zostawiać hero bez przycisku), pokazujemy w przycisku sam numer
   -czytelny od razu, a link tel: nadal działa. */
@media (min-width: 901px) and (pointer: fine) {
  .hero-actions .cta-call { display: none; }
  .hero-actions .cta-num  { display: inline; }
}
/* Szerokie zdjęcie -w hero i jako samodzielny pas na podstronie */
.hero-photo, .wide-photo { margin-top: clamp(36px, 5vw, 56px); }
.hero-photo img, .wide-photo img {
  width: 100%; height: auto; aspect-ratio: 21 / 9; object-fit: cover;
  border-radius: var(--r-md); border: 1px solid var(--line);
}
.hero-photo figcaption, .wide-photo figcaption {
  margin-top: 12px; font-size: 14px; font-weight: 600; color: var(--ink-3);
  display: flex; align-items: center; gap: 9px;
}
.hero-photo figcaption::before, .wide-photo figcaption::before { content: ""; width: 18px; height: 4px; border-radius: 2px; background: var(--brand); flex-shrink: 0; }
@media (max-width: 860px) { .hero-photo img, .wide-photo img { aspect-ratio: 16 / 10; } }
@media (max-width: 560px) { .hero-photo img, .wide-photo img { aspect-ratio: 4 / 3; } }

@media (prefers-reduced-motion: no-preference) {
  .hero-copy > * { animation: rise .65s var(--ease-out) backwards; }
  .hero-copy > *:nth-child(2) { animation-delay: .07s; }
  .hero-copy > *:nth-child(3) { animation-delay: .14s; }
  .hero-copy > *:nth-child(4) { animation-delay: .21s; }
  /* Kaskada wjazdu dotyczy wyłącznie hero -ten sam komponent użyty niżej na stronie
     nie może animować się w tle, poza zasięgiem wzroku. */
  .hero .hero-photo { animation: rise .7s var(--ease-out) .18s backwards; }
  @keyframes rise { from { opacity: 0; transform: translateY(16px); } }
}

/* ============ NAGŁÓWEK PODSTRONY ============ */
.page-head { padding: clamp(28px, 4vw, 44px) 0 clamp(34px, 5vw, 52px); }
.page-head .breadcrumbs { margin-bottom: clamp(20px, 3vw, 30px); }
.page-title {
  font-size: clamp(34px, 5vw, 62px);
  font-weight: 800; font-stretch: 122%;
  line-height: 1.03; letter-spacing: -0.02em;
  margin-bottom: 22px; max-width: 22ch;
}
.page-title em { font-style: normal; color: var(--brand); }
.page-lead { font-size: clamp(17px, 2vw, 19.5px); line-height: 1.62; color: var(--ink-2); max-width: 40em; }
.page-head .btn-row { margin-top: clamp(26px, 3.5vw, 36px); }
@media (prefers-reduced-motion: no-preference) {
  .page-head > .container > * { animation: rise .55s var(--ease-out) backwards; }
  .page-head > .container > *:nth-child(2) { animation-delay: .06s; }
  .page-head > .container > *:nth-child(3) { animation-delay: .12s; }
  .page-head > .container > *:nth-child(4) { animation-delay: .18s; }
}

/* ============ 8. TABLICE I KAFLE ============ */

/* Ciemny pas faktów */
.facts { background: var(--board); color: var(--on-board); }
.facts-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 0 clamp(28px, 4vw, 56px); padding-block: clamp(28px, 4vw, 40px);
}
.facts-grid > div { padding: 6px 0; }
.facts-grid > div + div { border-left: 1px solid oklch(1 0 0 / 0.22); padding-left: clamp(28px, 4vw, 56px); }
.fact-label {
  font-size: 12.5px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--on-board-2); margin-bottom: 8px;
}
.fact-value { font-size: 17.5px; font-weight: 600; line-height: 1.45; }
@media (max-width: 760px) {
  .facts-grid { grid-template-columns: 1fr; gap: 0; padding-block: 14px; }
  .facts-grid > div { padding: 16px 0; }
  .facts-grid > div + div { border-left: 0; padding-left: 0; border-top: 1px solid oklch(1 0 0 / 0.22); }
}

/* Tablica atutów -kafle na fugach, pierwszy wiersz z hierarchią */
.features-board {
  margin-top: 44px;
  background: var(--line); border: 1px solid var(--line);
  border-radius: var(--r-md); overflow: hidden;
  display: grid; grid-template-columns: 1fr 1fr; gap: 1px;
}
.feature {
  background: var(--board); color: var(--on-board);
  padding: clamp(24px, 3vw, 34px) clamp(22px, 3vw, 34px);
  display: grid; grid-template-columns: 46px 1fr; gap: 8px 18px;
}
.feature-icon {
  grid-row: span 2;
  width: 46px; height: 46px; border-radius: var(--r-sm);
  border: 1px solid var(--board-line);
  display: grid; place-items: center;
  color: var(--board-icon);
  background: var(--board-icon-bg);
}
.feature-icon svg { width: 23px; height: 23px; stroke: currentColor; fill: none; stroke-width: 1.6; }
.feature h3 { font-size: 19.5px; font-weight: 700; font-stretch: 112%; line-height: 1.2; align-self: center; color: var(--on-board); }
.feature p { font-size: 14.5px; line-height: 1.55; color: var(--on-board-2); }
/* Pierwszy wiersz -dwa główne argumenty większe od pozostałych, żeby tablica
   miała hierarchię zamiast identycznych kafli */
.feature--primary { padding-block: clamp(30px, 3.6vw, 42px); }
.feature--primary h3 { font-size: clamp(21px, 2.3vw, 25px); font-stretch: 118%; letter-spacing: -0.01em; }
.feature--primary p { font-size: 15.5px; }
@media (max-width: 760px) { .features-board { grid-template-columns: 1fr; } }

/* Zastosowania -asymetryczna kompozycja z dominującą pierwszą kolumną.
   Świadomie NIE siatka równych kart: pionowe fugi + większy typ pierwszej
   kolumny budują hierarchię. */
.uses {
  margin-top: clamp(34px, 4.5vw, 56px);
  display: grid; grid-template-columns: 1.4fr 1fr 1fr;
}
.use { padding: 0 clamp(26px, 3vw, 44px); }
.use:first-child { padding-left: 0; }
.use + .use { border-left: 1px solid var(--line); }
.use-title { font-size: 18px; font-weight: 800; font-stretch: 112%; line-height: 1.28; margin-bottom: 10px; }
.use-title::before { content: ""; display: block; width: 26px; height: 4px; border-radius: 2px; background: var(--brand); margin-bottom: 15px; }
.use-desc { font-size: 15.5px; line-height: 1.6; color: var(--ink-2); }
.use .link-next { margin-top: 12px; font-size: 13px; }
.use--primary .use-title { font-size: clamp(21px, 2.4vw, 27px); font-stretch: 118%; letter-spacing: -0.01em; }
.use--primary .use-desc { font-size: 16.5px; max-width: 24em; }
.uses--even { grid-template-columns: repeat(2, 1fr); row-gap: clamp(28px, 4vw, 40px); }
.uses--even .use:nth-child(odd) { padding-left: 0; }
.uses--even .use:nth-child(3) { border-left: 0; }
@media (max-width: 860px) {
  .uses, .uses--even { grid-template-columns: 1fr; }
  .use { padding: 22px 0; }
  .use:first-child { padding-top: 6px; }
  .use + .use { border-left: 0; border-top: 1px solid var(--line); }
  .uses--even .use:nth-child(3) { border-top: 1px solid var(--line); }
}

/* Lista „co jest w cenie" -na ciemnej tablicy, dwie kolumny, bez kart */
.board-list {
  margin-top: clamp(30px, 4vw, 44px);
  background: var(--board); color: var(--on-board);
  border-radius: var(--r-md); padding: clamp(26px, 3.4vw, 38px);
}
.board-list h3 {
  font-size: clamp(19px, 2.2vw, 23px); font-weight: 800; font-stretch: 115%;
  line-height: 1.2; margin-bottom: clamp(20px, 2.6vw, 28px);
}
.board-list ul { list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: 16px clamp(28px, 4vw, 48px); }
.board-list li {
  display: grid; grid-template-columns: 22px 1fr; gap: 12px; align-items: start;
  font-size: 15.5px; line-height: 1.5; color: var(--on-board-2);
}
.board-list li strong { color: var(--on-board); font-weight: 700; }
.board-list li svg { width: 20px; height: 20px; margin-top: 1px; stroke: var(--board-icon); fill: none; stroke-width: 2; }
.board-list .note { margin-top: clamp(20px, 2.6vw, 26px); padding-top: 18px; border-top: 1px solid var(--board-line); font-size: 14.5px; color: var(--on-board-2); }
@media (max-width: 700px) { .board-list ul { grid-template-columns: 1fr; } }

/* Kroki najmu -prawdziwa sekwencja, dlatego numery mają tu sens */
.steps { list-style: none; margin-top: clamp(30px, 4vw, 44px); display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--r-md); overflow: hidden; }
.steps li { background: var(--surface); padding: clamp(24px, 3vw, 32px); }
.step-n {
  display: block; font-size: 13px; font-weight: 800; font-stretch: 125%;
  color: var(--brand-ink); font-variant-numeric: tabular-nums; letter-spacing: 0.08em;
  margin-bottom: 14px;
}
.steps h3 { font-size: 19px; font-weight: 800; font-stretch: 112%; line-height: 1.25; margin-bottom: 9px; }
.steps p { font-size: 15.5px; line-height: 1.55; color: var(--ink-2); }
@media (max-width: 760px) { .steps { grid-template-columns: 1fr; } }

/* Ramka informacyjna -zielony akcent u góry, pełne obramowanie (bez pasków bocznych) */
.callout {
  background: var(--surface); border: 1px solid var(--line);
  border-top: 3px solid var(--brand);
  border-radius: var(--r-md); padding: 22px 26px; margin: 26px 0;
  max-width: 68ch;
}
.callout p { font-size: 16px; line-height: 1.6; color: var(--ink-2); }
.callout p + p { margin-top: 12px; }
.callout-label {
  font-size: 12px; font-weight: 800; font-stretch: 118%;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--brand-ink);
  margin-bottom: 12px;
}

/* Pas z jedną liczbą / stawką -kompaktowy wskaźnik na podstronie */
.rate-strip {
  margin-top: clamp(30px, 4vw, 42px);
  background: var(--board); color: var(--on-board);
  border-radius: var(--r-md); overflow: hidden;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px;
}
.rate-strip > div { background: var(--board); padding: clamp(20px, 2.6vw, 28px) clamp(20px, 2.6vw, 30px); }
.rate-strip > div + div { box-shadow: -1px 0 0 var(--board-line); }
.rate-strip--2 { grid-template-columns: repeat(2, 1fr); }
.rate-strip .r-label { font-size: 12.5px; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase; color: var(--on-board-2); margin-bottom: 10px; }
.rate-strip .r-value { font-size: clamp(30px, 3.4vw, 40px); font-weight: 800; font-stretch: 122%; line-height: 1; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.rate-strip .r-cur { font-size: 0.45em; font-weight: 700; letter-spacing: 0; margin-left: 2px; }
.rate-strip .r-unit { font-size: 13.5px; font-weight: 600; color: var(--on-board-2); margin-top: 10px; line-height: 1.45; }
.rate-strip + .btn-row { margin-top: clamp(24px, 3vw, 30px); }
@media (max-width: 700px) {
  .rate-strip, .rate-strip--2 { grid-template-columns: 1fr; }
  .rate-strip > div + div { box-shadow: 0 -1px 0 var(--board-line); }
}

/* ============ 9. CENNIK ============ */
.pricing { background: var(--surface); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.pricing-grid {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: clamp(20px, 3vw, 28px); margin-top: 44px;
}
.price-board {
  background: var(--bg); border: 1px solid var(--line-2);
  border-radius: var(--r-md); overflow: hidden;
}
.price-board-head { padding: 18px 26px 20px; background: var(--head-bg); color: var(--head-ink); }
.price-board-head h3 { font-size: 19px; font-weight: 800; font-stretch: 115%; letter-spacing: 0.03em; text-transform: uppercase; }
.price-board-head p { margin-top: 5px; font-size: 13.5px; font-weight: 500; color: var(--head-ink-2); }
.price-board ul { list-style: none; }
.price-row { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 22px 26px; }
.price-row + .price-row { border-top: 1px solid var(--line); }
.p-meta { display: block; font-size: 12.5px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 5px; }
.p-name { font-size: 21px; font-weight: 700; font-stretch: 112%; }
.p-amount { text-align: right; }
.p-value {
  font-size: clamp(38px, 4vw, 48px); font-weight: 800; font-stretch: 122%;
  line-height: 1; letter-spacing: -0.02em; font-variant-numeric: tabular-nums;
}
.p-unit { font-size: 13.5px; font-weight: 600; color: var(--ink-3); }
.p-save {
  display: inline-block; margin-top: 8px;
  font-size: 12.5px; font-weight: 700; font-style: normal;
  color: var(--brand-deep); background: var(--brand-wash-2);
  padding: 5px 10px; border-radius: var(--r-xs);
}
.price-row.featured { background: var(--brand-tint); position: relative; border-top: 1px solid var(--line); }
.price-row.featured .p-value { color: var(--brand-deep); }
.price-tag {
  position: absolute; top: -11px; right: 22px;
  background: var(--paint); color: var(--paint-ink);
  font-size: 11.5px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase;
  padding: 5px 11px; border-radius: 999px;
}
.pricing-note {
  margin-top: 28px; display: inline-flex; align-items: center; gap: 10px;
  font-size: 15px; font-weight: 600; color: var(--ink-2);
  background: var(--brand-wash); border: 1px solid var(--line);
  padding: 14px 20px; border-radius: var(--r-sm);
}
.pricing-note svg { width: 18px; height: 18px; stroke: var(--brand); fill: none; stroke-width: 1.8; flex-shrink: 0; }
@media (max-width: 860px) {
  .pricing-grid { grid-template-columns: 1fr; }
  .price-row { padding: 18px 20px; }
  .price-board-head { padding: 16px 20px; }
}
@media (max-width: 480px) { .p-unit { display: block; margin-top: 5px; } }

/* Tabela porównawcza -w duchu tablic cennika: ciemny nagłówek, wiersze na fugach.
   Porównuje cechy (nie powtarza stawek, które stoją wyżej w tablicach). */
.table-wrap { overflow-x: auto; margin-top: clamp(30px, 4vw, 44px); border: 1px solid var(--line-2); border-radius: var(--r-md); }
table.compare { width: 100%; border-collapse: collapse; font-size: 15.5px; min-width: 560px; background: var(--surface); }
table.compare thead th {
  text-align: left; background: var(--head-bg); color: var(--head-ink);
  font-size: 12px; font-weight: 800; font-stretch: 115%;
  letter-spacing: 0.08em; text-transform: uppercase;
  padding: 16px 18px;
}
table.compare tbody th {
  text-align: left; font-weight: 700; color: var(--ink); font-size: 15.5px;
  padding: 15px 18px; vertical-align: top;
}
table.compare tbody td { padding: 15px 18px; color: var(--ink-2); line-height: 1.5; vertical-align: top; }
table.compare tbody tr + tr th, table.compare tbody tr + tr td { border-top: 1px solid var(--line); }
table.compare .yes, table.compare .no { display: inline-flex; align-items: center; gap: 9px; font-weight: 600; }
table.compare .yes { color: var(--brand-deep); }
table.compare svg { width: 17px; height: 17px; stroke: currentColor; fill: none; stroke-width: 2.2; flex-shrink: 0; }
table.compare tbody tr:last-child th, table.compare tbody tr:last-child td { font-weight: 800; color: var(--ink); font-variant-numeric: tabular-nums; }
.table-hint { margin-top: 10px; font-size: 13.5px; font-weight: 600; color: var(--ink-3); }
/* Odstęp nad samotnym linkiem „dalej" pod blokiem treści */
.after-block { margin-top: clamp(22px, 3vw, 30px); }
@media (min-width: 761px) { .table-hint { display: none; } }

/* ============ 10. MAPA ZA ZGODĄ + TABLICZKA ADRESOWA ============ */
.location-map-wrap { position: relative; margin-top: 44px; }
.location-map {
  position: relative;
  background: var(--line); border-radius: var(--r-md); overflow: hidden;
  border: 1px solid var(--line-2); height: clamp(380px, 48vw, 520px);
}
.location-map--tall { height: clamp(420px, 54vw, 620px); }
/* Iframe leży NAD podglądem i odsłania się dopiero po realnym załadowaniu (zdarzenie load) -
   offline lub awaria Google zostawia widoczny statyczny podgląd zamiast pustej białej ramki */
.location-map iframe {
  position: absolute; inset: 0; width: 100%; height: 100%; border: none; display: block;
  opacity: 0; transition: opacity .3s ease;
}
.location-map.mapa-zaladowana iframe { opacity: 1; }
/* Przed zgodą w miejscu mapy stoi statyczny podgląd z naszego serwera (dane © OpenStreetMap) -
   wygląda jak mapa, ale nie wysyła nigdzie żadnych danych. */
.map-placeholder { position: relative; height: 100%; overflow: hidden; }
.map-static { width: 100%; height: 100%; object-fit: cover; filter: saturate(0.85); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) .map-static { filter: invert(0.92) hue-rotate(180deg) saturate(0.5) contrast(0.92); }
}
:root[data-theme="dark"] .map-static { filter: invert(0.92) hue-rotate(180deg) saturate(0.5) contrast(0.92); }
:root[data-theme="light"] .map-static { filter: saturate(0.85); }
.map-pin {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -100%);
  width: 44px; height: 44px; color: var(--brand);
  filter: drop-shadow(0 4px 10px oklch(0.22 0.012 170 / 0.4));
}
.map-pin svg { width: 100%; height: 100%; stroke: currentColor; fill: var(--surface); stroke-width: 1.8; }
.map-card {
  position: absolute; left: 50%; top: 22px; transform: translateX(-50%);
  width: min(88%, 400px);
  background: var(--topbar-bg);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border: 1px solid var(--line); border-top: 3px solid var(--brand);
  border-radius: var(--r-md); box-shadow: var(--plate-shadow);
  padding: 16px 20px; text-align: center;
  display: grid; gap: 12px; justify-items: center;
}
.map-card p { font-size: 14.5px; line-height: 1.5; color: var(--ink-2); }
.map-card .btn { min-height: 46px; padding: 11px 20px; }
/* Bez JS nie ma jak wyrazić zgody -podpowiadamy istniejącą alternatywę */
.map-card-alt { font-size: 13px; color: var(--ink-3); }
html.js .map-card-alt { display: none; }
.map-attrib {
  position: absolute; right: 8px; bottom: 8px;
  font-size: 11px; font-weight: 600; color: var(--ink-3);
  background: var(--topbar-bg); padding: 3px 8px; border-radius: var(--r-xs);
}
[data-map-load] { display: none; }
html.js [data-map-load] { display: inline-flex; }
@media (max-width: 760px) {
  /* Niski kontener: karta centralnie u góry zachodziłaby na pinezkę w centrum -
     schodzi na dół (tabliczka adresowa jest wtedy POD mapą), a atrybucja ucieka do góry */
  .map-card { top: auto; bottom: 16px; }
  .map-attrib { bottom: auto; top: 8px; }
}

.address-plate {
  position: absolute; left: 24px; bottom: 24px; z-index: var(--z-plate);
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-md); padding: 24px 26px;
  box-shadow: var(--plate-shadow);
  max-width: 360px;
}
.address-plate .label { font-size: 12px; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--brand-ink); margin-bottom: 10px; }
.address-plate .name { font-size: 22px; font-weight: 800; font-stretch: 115%; line-height: 1.1; margin-bottom: 4px; }
.address-plate .street { font-size: 15.5px; color: var(--ink-2); margin-bottom: 18px; }
.maps-link {
  display: inline-flex; align-items: center; gap: 9px;
  min-height: 46px; padding: 11px 18px;
  background: var(--brand); color: var(--on-brand);
  border-radius: var(--r-sm);
  font-size: 13px; font-weight: 800; font-stretch: 110%; letter-spacing: 0.05em; text-transform: uppercase;
  transition: background var(--t-state) ease, transform var(--t-press) var(--ease-out);
}
@media (hover: hover) { .maps-link:hover { background: var(--brand-deep); transform: translateY(-1px); } }
/* Stoi za regułą :hover, żeby wciśnięcie wygrywało kaskadę także na desktopie */
.maps-link:active { transform: scale(0.97); }
.maps-link svg { width: 15px; height: 15px; stroke: currentColor; fill: none; stroke-width: 2; }
@media (max-width: 760px) {
  .address-plate { position: static; max-width: none; box-shadow: none; margin-top: 16px; }
  .location-map, .location-map--tall { height: 340px; }
}

/* Punkty lokalizacji -malowana linia nad każdym */
.location-points {
  list-style: none; margin-top: clamp(28px, 4vw, 40px);
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px;
}
.location-points li {
  font-size: 15.5px; line-height: 1.5; color: var(--ink-2);
  padding-top: 14px; border-top: 3px solid var(--brand);
}
.location-points strong { color: var(--ink); }
.location-points--3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 860px) { .location-points, .location-points--3 { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .location-points, .location-points--3 { grid-template-columns: 1fr; gap: 16px; } }

/* Baner cookie (dotyczy wyłącznie mapy Google) */
.cookie-baner {
  position: fixed; left: 16px; right: 16px;
  bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  z-index: var(--z-consent);
  max-width: 620px; margin-inline: auto;
  background: var(--surface); border: 1px solid var(--line); border-top: 4px solid var(--brand);
  border-radius: var(--r-md); box-shadow: var(--plate-shadow);
  padding: 20px 22px;
}
.cookie-baner p { font-size: 14.5px; line-height: 1.55; color: var(--ink-2); margin-bottom: 14px; }
.cookie-baner strong { color: var(--ink); }
.cookie-baner-akcje { display: flex; gap: 10px; flex-wrap: wrap; }
.cookie-baner .btn { min-height: 46px; padding: 11px 18px; }
@media (max-width: 480px) {
  /* Wąskie telefony: długie etykiety zgody nie mieszczą się obok siebie */
  .cookie-baner { left: 12px; right: 12px; padding: 18px; }
  .cookie-baner-akcje { flex-direction: column; align-items: stretch; }
  .cookie-baner .btn { width: 100%; padding-inline: 12px; }
  .map-card .btn { width: 100%; padding-inline: 12px; }
}
@media (prefers-reduced-motion: no-preference) {
  .cookie-baner { animation: baner-wjazd .5s var(--ease-out); }
  @keyframes baner-wjazd { from { opacity: 0; transform: translateY(18px); } }
}
@media (max-width: 900px) {
  /* nad mobilnym paskiem połączenia */
  .cookie-baner { bottom: calc(88px + env(safe-area-inset-bottom, 0px)); }
}

/* ============ 11. GALERIA (filmstrip, działa bez JS) ============ */
.gallery-head { display: none; }
html.js .gallery-head { display: flex; justify-content: flex-end; margin: clamp(28px, 4vw, 44px) 0 14px; }
html.js .gallery-head + .strip { margin-top: 0; }
.gallery-arrows { display: none; gap: 10px; }
html.js .gallery-arrows { display: flex; }
.gallery-arrows button {
  width: 48px; height: 48px; border-radius: var(--r-sm);
  background: var(--surface); border: 1.5px solid var(--line-2); color: var(--ink);
  cursor: pointer; display: grid; place-items: center;
  transition: background var(--t-state) ease, border-color var(--t-state) ease, color var(--t-state) ease, opacity var(--t-state) ease, transform var(--t-press) var(--ease-out);
}
@media (hover: hover) { .gallery-arrows button:hover:not(:disabled) { border-color: var(--brand); color: var(--brand); } }
.gallery-arrows button:active:not(:disabled) { transform: scale(0.94); }
/* Kraniec galerii -strzałka gaśnie, gdy nie ma już czego przewijać */
.gallery-arrows button:disabled { opacity: 0.35; cursor: default; }
.gallery-arrows svg { width: 20px; height: 20px; stroke: currentColor; fill: none; stroke-width: 2; }
@media (max-width: 760px) { html.js .gallery-arrows { display: none; } }

.strip {
  margin-top: clamp(28px, 4vw, 44px);
  display: flex; gap: 14px;
  overflow-x: auto; scroll-snap-type: x proximity;
  padding: 4px 4px 18px;
  scrollbar-width: thin; scrollbar-color: var(--line-2) transparent;
  -webkit-overflow-scrolling: touch;
}
.strip figure { flex-shrink: 0; scroll-snap-align: start; }
.strip img {
  height: clamp(280px, 38vw, 440px); width: auto;
  border-radius: var(--r-md); border: 1px solid var(--line);
}
.strip-hint { margin-top: 6px; font-size: 13.5px; font-weight: 600; color: var(--ink-3); }
@media (min-width: 761px) { html.js .strip-hint { display: none; } }

/* Zdjęcie z opisem -układ dwukolumnowy podstrony */
.photo-split {
  margin-top: clamp(34px, 4.5vw, 52px);
  display: grid; grid-template-columns: 1.15fr 1fr; gap: clamp(26px, 4vw, 48px); align-items: start;
}
.photo-split figure { margin: 0; }
.photo-split img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--r-md); border: 1px solid var(--line); }
.photo-split figcaption { margin-top: 12px; font-size: 14px; font-weight: 600; color: var(--ink-3); display: flex; align-items: center; gap: 9px; }
.photo-split figcaption::before { content: ""; width: 18px; height: 4px; border-radius: 2px; background: var(--brand); flex-shrink: 0; }
.spec-list { list-style: none; }
.spec-list li { padding: 16px 0; border-top: 1px solid var(--line); }
.spec-list li:last-child { border-bottom: 1px solid var(--line); }
.spec-list dt, .spec-list .k {
  font-size: 12.5px; font-weight: 800; font-stretch: 112%;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--brand-ink);
  margin-bottom: 7px;
}
.spec-list .v { font-size: 16px; line-height: 1.5; color: var(--ink-2); }
.spec-list .v strong { color: var(--ink); }
@media (max-width: 820px) { .photo-split { grid-template-columns: 1fr; } }

/* ============ 12. DOKUMENT (FAQ, polityka, 404) ============ */
.doc-hero { padding: clamp(40px, 6vh, 72px) 0 clamp(24px, 4vh, 36px); }
.eyebrow {
  display: inline-flex; align-items: center; gap: 12px;
  font-size: 13px; font-weight: 800; font-stretch: 118%;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--brand-ink);
  margin-bottom: 22px;
}
.eyebrow::before { content: ""; width: 22px; height: 4px; border-radius: 2px; background: var(--brand); }
.doc-title {
  font-size: clamp(38px, 6vw, 68px);
  font-weight: 800; font-stretch: 122%;
  line-height: 1.02; letter-spacing: -0.02em;
  margin-bottom: 22px;
}
.doc-lead { font-size: clamp(17px, 2vw, 19.5px); line-height: 1.6; color: var(--ink-2); max-width: 42em; }
.doc-updated {
  margin-top: 24px; display: inline-flex; align-items: center; gap: 9px;
  font-size: 13.5px; font-weight: 700; letter-spacing: 0.04em;
  color: var(--ink-3); font-variant-numeric: tabular-nums;
}
.doc-updated::before { content: ""; width: 13px; height: 3px; border-radius: 2px; background: var(--brand); }

.doc-body { padding: 8px 0 clamp(72px, 10vw, 104px); }
.doc-body h2 {
  font-size: clamp(25px, 3.4vw, 34px);
  font-weight: 800; font-stretch: 118%; line-height: 1.1;
  letter-spacing: -0.015em;
  margin: 48px 0 16px; padding-top: 30px;
  border-top: 1px solid var(--line);
  display: flex; align-items: baseline; gap: 14px;
}
.doc-body h2 .n {
  font-size: 15px; font-weight: 800; font-stretch: 125%;
  color: var(--brand-ink); font-variant-numeric: tabular-nums;
  letter-spacing: 0; flex-shrink: 0;
}
.doc-body h2 em { font-style: normal; color: var(--brand); }
.doc-body h3 { font-size: 18.5px; font-weight: 800; font-stretch: 112%; color: var(--ink); margin: 26px 0 10px; }
.doc-body p { font-size: 16.5px; line-height: 1.7; color: var(--ink-2); margin-bottom: 14px; max-width: 68ch; }
.doc-body ul { list-style: none; margin: 10px 0 18px; max-width: 68ch; }
.doc-body ul li { position: relative; padding-left: 26px; margin-bottom: 11px; font-size: 16.5px; line-height: 1.65; color: var(--ink-2); }
.doc-body ul li::before { content: ""; position: absolute; left: 0; top: 11px; width: 13px; height: 3px; border-radius: 2px; background: var(--brand); }
.doc-body strong { color: var(--ink); font-weight: 700; }
.doc-body a.inline { color: var(--brand-deep); font-weight: 600; border-bottom: 1.5px solid var(--inline-underline); }
@media (hover: hover) { .doc-body a.inline:hover { border-bottom-color: var(--brand); } }

/* Tabela danych w dokumencie */
.doc-table-wrap { overflow-x: auto; margin: 18px 0 24px; border: 1px solid var(--line-2); border-radius: var(--r-md); }
.doc-table-wrap table { width: 100%; border-collapse: collapse; font-size: 15.5px; min-width: 580px; }
.doc-table-wrap thead th {
  text-align: left; background: var(--bg);
  font-size: 11.5px; font-weight: 800; font-stretch: 115%;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--brand-ink);
  padding: 15px 18px; border-bottom: 1px solid var(--line-2);
}
.doc-table-wrap tbody td { padding: 15px 18px; color: var(--ink-2); line-height: 1.55; border-bottom: 1px solid var(--line); vertical-align: top; }
.doc-table-wrap tbody tr:last-child td { border-bottom: 0; }
.doc-table-wrap tbody td:first-child { color: var(--ink); font-weight: 700; }

/* ============ FAQ (details, wielokrotnie otwarte) ============ */
.faq { background: var(--surface); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.faq-list { max-width: 820px; border-top: 1px solid var(--line); }
.faq-group-title {
  font-size: clamp(21px, 2.6vw, 27px); font-weight: 800; font-stretch: 115%;
  line-height: 1.2; letter-spacing: -0.012em; margin: clamp(40px, 5vw, 56px) 0 18px;
}
.faq-group-title:first-of-type { margin-top: 0; }
.faq-item { border-bottom: 1px solid var(--line); }
.faq-item summary {
  list-style: none; cursor: pointer;
  display: flex; align-items: center; justify-content: space-between; gap: 18px;
  padding: 22px 2px; min-height: 44px;
  font-size: clamp(17px, 2vw, 20px); font-weight: 700; font-stretch: 112%;
  line-height: 1.3; letter-spacing: -0.01em; color: var(--ink);
  transition: color var(--t-state) ease;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary:focus-visible { outline: 3px solid var(--brand); outline-offset: 3px; border-radius: var(--r-xs); }
@media (hover: hover) { .faq-item summary:hover { color: var(--brand-ink); } }
.faq-item summary:active { transform: scale(0.995); }
.faq-chevron {
  width: 22px; height: 22px; flex-shrink: 0;
  stroke: var(--brand); fill: none; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round;
  transition: transform .2s var(--ease-out);
}
.faq-item[open] .faq-chevron { transform: rotate(180deg); }
.faq-answer { padding: 0 2px 24px; }
.faq-answer p { max-width: 68ch; font-size: 16.5px; line-height: 1.65; color: var(--ink-2); }
.faq-answer p + p { margin-top: 12px; }
.faq-answer a { color: var(--brand-deep); font-weight: 600; border-bottom: 1.5px solid var(--inline-underline); }
@media (hover: hover) { .faq-answer a:hover { border-bottom-color: var(--brand); } }
@media (prefers-reduced-motion: reduce) { .faq-chevron { transition: none; } }

/* ============ 13. KONTAKT, STOPKA, CALLBAR ============ */
.contact { background: var(--brand); color: var(--on-brand); padding: clamp(80px, 12vw, 128px) 0; }
.contact .section-title { color: var(--on-brand); max-width: 13em; }
.contact-lead { font-size: clamp(16.5px, 1.8vw, 19px); line-height: 1.6; color: var(--on-brand-2); max-width: 34em; margin-bottom: 42px; }
.contact-phone {
  display: inline-flex; align-items: center; gap: clamp(14px, 2vw, 22px);
  font-size: clamp(27px, 6.4vw, 72px);
  font-weight: 800; font-stretch: 122%; letter-spacing: -0.015em;
  line-height: 1.1; color: var(--on-brand);
  font-variant-numeric: tabular-nums;
  border-bottom: 4px solid oklch(1 0 0 / 0.35);
  padding-bottom: 10px;
  transition: border-color .18s ease, transform var(--t-press) var(--ease-out);
}
@media (hover: hover) { .contact-phone:hover { border-color: var(--on-brand); } }
/* Duży element, więc skala subtelniejsza niż w przyciskach */
.contact-phone:active { transform: scale(0.985); }
.contact-phone svg {
  width: clamp(24px, 4.6vw, 52px); height: clamp(24px, 4.6vw, 52px);
  stroke: currentColor; fill: none; stroke-width: 1.8; flex-shrink: 0;
}
.contact-sub { margin-top: 26px; font-size: 15px; font-weight: 600; color: var(--on-brand-2); }
/* Wariant podstronowy: ten sam zielony finał, mniejsza skala i inny rytm */
.contact--compact { padding: clamp(52px, 7vw, 76px) 0; }
.contact--compact .contact-inner { display: grid; grid-template-columns: 1.1fr auto; gap: clamp(24px, 4vw, 56px); align-items: center; }
.contact--compact h2 {
  font-size: clamp(26px, 3.4vw, 38px); font-weight: 800; font-stretch: 118%;
  line-height: 1.12; letter-spacing: -0.015em; color: var(--on-brand); max-width: 20ch;
}
.contact--compact p { margin-top: 14px; font-size: 16px; line-height: 1.55; color: var(--on-brand-2); max-width: 40ch; }
.contact--compact .contact-phone { font-size: clamp(26px, 3.6vw, 44px); border-bottom-width: 3px; padding-bottom: 7px; }
.contact--compact .contact-phone svg { width: clamp(22px, 2.8vw, 34px); height: clamp(22px, 2.8vw, 34px); }
.contact--compact .contact-sub { margin-top: 14px; font-size: 14px; }
@media (max-width: 860px) {
  .contact--compact .contact-inner { grid-template-columns: 1fr; }
}

footer { background: var(--brand-dark); color: var(--on-footer); padding: 56px 0 32px; }
.footer-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 40px; margin-bottom: 44px; }
.footer-brand { display: flex; align-items: flex-start; gap: 13px; font-size: 22px; font-weight: 800; font-stretch: 115%; line-height: 1.15; }
.footer-brand .brand-mark { background: var(--footer-mark-bg); color: var(--footer-mark-ink); }
.footer-brand .small { display: block; font-size: 12.5px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--on-footer-2); margin-top: 7px; }
.footer-col h3 { font-size: 12.5px; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--on-footer-2); margin-bottom: 14px; }
.footer-col p, .footer-col a { display: block; font-size: 15.5px; font-weight: 600; line-height: 1.7; color: var(--on-footer); }
.footer-col a { transition: opacity var(--t-state) ease; }
@media (hover: hover) { .footer-col a:hover { opacity: 0.75; } }
.footer-col a[aria-current="page"] { text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 2px; }
.footer-bottom {
  display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap;
  padding-top: 24px; border-top: 1px solid oklch(1 0 0 / 0.2);
  font-size: 13px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--on-footer-2);
}
.footer-bottom a { text-decoration: underline; text-underline-offset: 3px; }
@media (hover: hover) { .footer-bottom a:hover { color: var(--on-footer); } }
@media (max-width: 900px) { .footer-grid { grid-template-columns: 1fr 1fr; gap: 32px; } }
@media (max-width: 560px) {
  .footer-grid { grid-template-columns: 1fr; gap: 28px; }
  .footer-bottom { flex-direction: column; }
}

/* Mobilny pasek połączenia -zawsze pod kciukiem */
.callbar { display: none; }
@media (max-width: 900px) {
  .callbar {
    display: block; position: fixed; left: 0; right: 0; bottom: 0; z-index: var(--z-callbar);
    padding: 10px max(14px, env(safe-area-inset-right, 0px)) calc(10px + env(safe-area-inset-bottom, 0px)) max(14px, env(safe-area-inset-left, 0px));
    background: var(--topbar-bg);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-top: 1px solid var(--line);
    transition: transform .3s var(--ease-out);
  }
  .callbar.schowany { transform: translateY(110%); }
  /* Etykieta i numer to dwa nierozrywalne kawałki. Gdy oba mieszczą się
     w wierszu, rozdziela je odstęp; gdy nie, numer przenosi się w całości
     (nigdy między grupami cyfr) i nie zostaje po nim wisząca kropka. */
  .callbar-label, .callbar-num { white-space: nowrap; }
  .callbar a {
    display: flex; align-items: center; justify-content: center;
    flex-wrap: wrap; gap: 0 12px;
    min-height: 54px; border-radius: var(--r-sm);
    background: var(--brand); color: var(--on-brand);
    font-size: 14.5px; font-weight: 800; font-stretch: 112%;
    letter-spacing: 0.04em; text-transform: uppercase;
    box-shadow: 0 6px 18px oklch(0.46 0.115 158 / 0.3);
    transition: transform var(--t-press) var(--ease-out), background var(--t-state) ease;
  }
  .callbar a:active { background: var(--brand-deep); transform: scale(0.97); }
  .callbar svg { width: 17px; height: 17px; stroke: currentColor; fill: none; stroke-width: 2; }
  /* Rezerwa na pasek wewnątrz ciemnej stopki, nie na <body> -inaczej przy schowanym
     pasku pod stopką prześwitywałby jasny pas tła strony. */
  footer { padding-bottom: calc(32px + 78px + env(safe-area-inset-bottom, 0px)); }
}

/* ============ REVEAL (tylko z JS, treść zawsze widoczna bez niego) ============ */
html.js .reveal { opacity: 0; transform: translateY(14px); transition: opacity .6s ease, transform .6s var(--ease-out); }
html.js .reveal.in { opacity: 1; transform: none; }

/* ==================================================================
   14. „NOCNA ZMIANA" -tryb ciemny.
   Ten sam obiekt po zmroku: asfalt czernieje, betonowe tablice stają się
   łupkowe, a zieleń bram zaczyna świecić jak podświetlony znak parkingowy.
   Żółta farba znakująca zostaje jedynym ciepłem.

   Cały motyw to wyłącznie zmienne :root -komponenty czytają je same z siebie.
   • bez JS: sterują preferencje systemu (blok @media poniżej),
     chyba że użytkownik dokonał świadomego wyboru (atrybut data-theme),
   • z przełącznikiem: wybór zapisuje data-theme="dark|light" i wygrywa.
   Oba zestawy zmiennych MUSZĄ pozostać identyczne -zmieniaj je razem.
   ================================================================== */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    --bg:          oklch(0.205 0.012 232);
    --surface:     oklch(0.245 0.013 232);
    --ink:         oklch(0.955 0.006 230);
    --ink-2:       oklch(0.805 0.013 230);
    --ink-3:       oklch(0.70 0.016 230);
    --line:        oklch(0.335 0.014 232);
    --line-2:      oklch(0.44 0.018 232);
    --brand:       oklch(0.60 0.132 156);
    --brand-deep:  oklch(0.68 0.138 156);
    --brand-ink:   oklch(0.68 0.138 156);
    --brand-dark:  oklch(0.20 0.026 160);
    --brand-tint:  oklch(0.305 0.05 158);
    --on-brand:    oklch(0.15 0.024 160);
    --on-brand-2:  oklch(0.17 0.03 160);
    --board:       oklch(0.275 0.015 232);
    --board-line:  oklch(1 0 0 / 0.1);
    --on-board:    oklch(0.955 0.006 230);
    --on-board-2:  oklch(0.78 0.013 230);
    --paint:       oklch(0.83 0.15 92);
    --paint-ink:   oklch(0.24 0.05 92);
    --topbar-bg:      oklch(0.205 0.012 232 / 0.85);
    --brand-wash:     oklch(0.60 0.132 156 / 0.16);
    --brand-wash-2:   oklch(0.60 0.132 156 / 0.2);
    --head-bg:        oklch(0.275 0.015 232);
    --head-ink:       oklch(0.955 0.006 230);
    --head-ink-2:     oklch(0.74 0.015 230);
    --inline-underline: oklch(0.68 0.138 156 / 0.45);
    --on-footer:      oklch(0.955 0.006 230);
    --on-footer-2:    oklch(0.72 0.015 230);
    --footer-mark-bg: oklch(0.60 0.132 156);
    --footer-mark-ink:oklch(0.15 0.024 160);
    --plate-shadow:   0 18px 44px oklch(0 0 0 / 0.5);
    --cta-shadow:     0 6px 18px oklch(0 0 0 / 0.4);
    --cta-shadow-hi:  0 10px 24px oklch(0 0 0 / 0.5);
    --scrim:          oklch(0.12 0.01 232 / 0.5);
  }
}
:root[data-theme="dark"] {
  --bg:          oklch(0.205 0.012 232);
  --surface:     oklch(0.245 0.013 232);
  --ink:         oklch(0.955 0.006 230);
  --ink-2:       oklch(0.805 0.013 230);
  --ink-3:       oklch(0.70 0.016 230);
  --line:        oklch(0.335 0.014 232);
  --line-2:      oklch(0.44 0.018 232);
  --brand:       oklch(0.60 0.132 156);
  --brand-deep:  oklch(0.68 0.138 156);
  --brand-ink:   oklch(0.68 0.138 156);
  --brand-dark:  oklch(0.20 0.026 160);
  --brand-tint:  oklch(0.305 0.05 158);
  --on-brand:    oklch(0.15 0.024 160);
  --on-brand-2:  oklch(0.17 0.03 160);
  --board:       oklch(0.275 0.015 232);
  --board-line:  oklch(1 0 0 / 0.1);
  --on-board:    oklch(0.955 0.006 230);
  --on-board-2:  oklch(0.78 0.013 230);
  --paint:       oklch(0.83 0.15 92);
  --paint-ink:   oklch(0.24 0.05 92);
  --topbar-bg:      oklch(0.205 0.012 232 / 0.85);
  --brand-wash:     oklch(0.60 0.132 156 / 0.16);
  --brand-wash-2:   oklch(0.60 0.132 156 / 0.2);
  --head-bg:        oklch(0.275 0.015 232);
  --head-ink:       oklch(0.955 0.006 230);
  --head-ink-2:     oklch(0.74 0.015 230);
  --inline-underline: oklch(0.68 0.138 156 / 0.45);
  --on-footer:      oklch(0.955 0.006 230);
  --on-footer-2:    oklch(0.72 0.015 230);
  --footer-mark-bg: oklch(0.60 0.132 156);
  --footer-mark-ink:oklch(0.15 0.024 160);
  --plate-shadow:   0 18px 44px oklch(0 0 0 / 0.5);
  --cta-shadow:     0 6px 18px oklch(0 0 0 / 0.4);
  --cta-shadow-hi:  0 10px 24px oklch(0 0 0 / 0.5);
  --scrim:          oklch(0.12 0.01 232 / 0.5);
}

/* ============ TRYB WYSOKIEGO KONTRASTU (Windows) ============ */
@media (forced-colors: active) {
  /* Przyciski i chipy tracą tło w forced-colors; jawna ramka utrzymuje ich granice */
  .btn, .maps-link, .callbar a, .price-tag, .mainnav a,
  .navtoggle, .navsheet-tel, .navsheet-nav a { border: 1.5px solid ButtonText; }
  .mainnav a[aria-current="page"] { border-color: Highlight; }
  .mainnav a[aria-current="page"]::after { background: Highlight; }
  /* W forced-colors podkreślenie idzie na currentColor, więc bieżącą pozycję
     arkusza znaczy ramka (tak samo jak chip w listwie) */
  .navsheet-nav a[aria-current="page"] { border-color: Highlight; }
  .navsheet { border: 1px solid ButtonText; }
}

/* ============ DRUK (oferta w PDF / na papierze) ============ */
@media print {
  .topbar, .callbar, .gallery-arrows, .strip-hint, .skip-link, .hero-actions,
  .cookie-baner, .page-head .btn-row, .table-hint, .navsheet { display: none !important; }
  html.js .reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
  section, .facts { padding: 20px 0; }
  .hero, .page-head { padding: 12px 0 8px; }
  /* Pas zdjęć zawija się w siatkę zamiast przewijania */
  .strip { flex-wrap: wrap; overflow: visible; padding: 0; }
  .strip img { height: 150px; }
  /* Mapa nie drukuje się sensownie; tabliczka adresowa wystarcza */
  .location-map { display: none; }
  .address-plate { position: static; box-shadow: none; max-width: none; border: 1px solid var(--line-2); margin-top: 0; }
  .faq-answer { display: block !important; }
}

/* ============ OGRANICZENIE RUCHU (dostępność) ============ */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  html.js .reveal { opacity: 1; transform: none; transition: none; }
}