/* Apartamenty Przemysl - strona (etap 1, 2026-09-28), z makiety C (2026-09-05)
   Skora: NAVY jako jedyna (decyzja Michala po rozmowie 23.09) - tokeny wpisane w :root.
   Kroje: Oswald (display, przerobka Alternate Gothic z 1903) + Onest (tekst).
   Paleta z kadru: noc, kosc, tynk, zar okien, zielen, cegla dachu.
   Motyw elewacji: hairline (boniowanie), podwojna linia gzymsu, ramka CTA odsunieta od pola. */

@font-face{font-family:'Oswald';font-style:normal;font-weight:200 600;font-display:swap;
  src:url(/assets/fonts/Oswald-200-600-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Oswald';font-style:normal;font-weight:200 600;font-display:swap;
  src:url(/assets/fonts/Oswald-200-600-latin-ext.woff2) format('woff2');
  unicode-range:U+0100-02AF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Onest';font-style:normal;font-weight:300 700;font-display:swap;
  src:url(/assets/fonts/Onest-300-700-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Onest';font-style:normal;font-weight:300 700;font-display:swap;
  src:url(/assets/fonts/Onest-300-700-latin-ext.woff2) format('woff2');
  unicode-range:U+0100-02AF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF}

/* Cyrylica dla wersji ukrainskiej (/ua/). Bez tych subsetow przegladarka podmienia krój
   na systemowy - tekst po ukrainsku wygladalby jak z innej strony. Zakresy `unicode-range`
   1:1 z Google Fonts, wiec wersja polska nie pobiera z tego ani bajta. */
@font-face{font-family:'Oswald';font-style:normal;font-weight:200 600;font-display:swap;
  src:url(/assets/fonts/Oswald-200-600-cyrillic.woff2) format('woff2');
  unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:'Oswald';font-style:normal;font-weight:200 600;font-display:swap;
  src:url(/assets/fonts/Oswald-200-600-cyrillic-ext.woff2) format('woff2');
  unicode-range:U+0460-052F,U+1C80-1C88,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F}
@font-face{font-family:'Onest';font-style:normal;font-weight:300 700;font-display:swap;
  src:url(/assets/fonts/Onest-300-700-cyrillic.woff2) format('woff2');
  unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:'Onest';font-style:normal;font-weight:300 700;font-display:swap;
  src:url(/assets/fonts/Onest-300-700-cyrillic-ext.woff2) format('woff2');
  unicode-range:U+0460-052F,U+1C80-1C88,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F}

:root{
  --noc:#0C1B33;
  --noc-2:#16274A;
  --kosc:#F4EFE4;
  --kosc-2:#D9D2C4;
  --tynk:#EFE9DC;
  --tynk-2:#E4DCCB;
  --zar:#E0A85C;
  --zielen:#14392A;
  --cegla:#7D3F31;
  --atrament:#1A1A1A;
  --szary:#5B5346;
  --linia:rgba(244,239,228,.22);
  --linia-mocna:rgba(244,239,228,.45);
  --linia-c:rgba(12,27,51,.18);
  --linia-c-mocna:rgba(12,27,51,.45);
  --hero-scrim:rgba(8,18,36,.16);
  --hero-plyta:rgba(12,27,51,.66);
  --hero-plyta-mob:rgba(12,27,51,.64);
  --bok:clamp(1rem,4.5vw,4rem);
  --naglowek-h:72px;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:var(--naglowek-h)}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--tynk);color:var(--atrament);
  font-family:'Onest',system-ui,sans-serif;font-weight:400;font-size:17px;line-height:1.6;
  font-variant-numeric:tabular-nums}
img,video{display:block;max-width:100%}
a{color:inherit}
h1,h2,h3{font-family:'Oswald',system-ui,sans-serif;font-weight:300;margin:0;line-height:1.05;
  text-transform:uppercase;letter-spacing:.04em}
p{margin:0 0 1rem}
ul,ol,dl{margin:0;padding:0}
li{list-style:none}
b{font-weight:600}
.pomin{position:absolute;left:-9999px}
.pomin:focus{left:1rem;top:1rem;z-index:99;background:var(--kosc);color:var(--noc);padding:.6rem 1rem}

/* ---------- naglowek (sticky) ---------- */
.naglowek{position:fixed;inset:0 0 auto 0;z-index:20;height:var(--naglowek-h);
  display:flex;align-items:center;gap:1rem 2rem;padding:0 var(--bok);color:var(--kosc);
  border-bottom:1px solid transparent;background:transparent;
  transition:background .25s,border-color .25s}
.naglowek-lity,.menu-rozwiniete{background:var(--noc);border-bottom-color:var(--linia)}
.wartownik{height:1px}
.marka{font-family:'Oswald',sans-serif;font-weight:300;text-transform:uppercase;letter-spacing:.16em;
  font-size:.92rem;text-decoration:none;white-space:nowrap;
  transform-origin:left top;transition:transform .28s ease}
.marka span{font-weight:500}
.marka img{display:block;height:66px;width:auto;transition:height .28s ease}
/* Logo przy wczytaniu (naglowek przezroczysty nad hero) jest o 50% wieksze i przy pierwszym
   przewinieciu wskakuje do paska (Michal 05.10). Skala, nie wysokosc: pasek ma stala wysokosc,
   wiec powiekszone logo wychodzi POZA niego w dol (origin lewo-gora) i nie przesuwa menu,
   telefonu ani CTA - inaczej caly pasek skakalby przy scrollu. Transform na <a>, nie na <img>,
   zeby powiekszyl sie takze obszar klikalny. Podstrony maja `naglowek-staly` (lity od startu),
   wiec tam logo jest male od razu. */
.naglowek:not(.naglowek-lity):not(.menu-rozwiniete) .marka{transform:scale(1.5)}
/* Desktop: nad hero logo blizej lewej krawedzi i nizej - pozycja przeciagnieta przez Michala
   na zrzucie (07.10): ramka ~1,5rem od krawedzi okna niezaleznie od --bok, 26 px w dol. */
@media (min-width:901px){
  .naglowek:not(.naglowek-lity):not(.menu-rozwiniete) .marka{transform:translate(calc(1.5rem - var(--bok)),26px) scale(1.5)}
}
@media (prefers-reduced-motion:reduce){.marka,.marka img{transition:none}}
.menu{display:flex;gap:1.35rem;margin-left:auto;font-size:.9rem}
.menu a{text-decoration:none;opacity:.88;border-bottom:1px solid transparent;padding-bottom:2px;
  white-space:nowrap}
.menu a:hover{opacity:1;border-bottom-color:var(--linia-mocna)}
.naglowek-prawo{display:flex;align-items:center;gap:1.2rem;font-size:.86rem;flex:0 0 auto}
.naglowek-tel{text-decoration:none;font-variant-numeric:tabular-nums;white-space:nowrap}
.jezyki{display:inline-flex;gap:.55rem;font-family:'Oswald',sans-serif;letter-spacing:.14em;font-size:.78rem;
  white-space:nowrap}
.jezyki a{text-decoration:none;opacity:.6}
.jezyki span{padding-bottom:2px;border-bottom:1px solid var(--kosc)}
.naglowek-cta{text-decoration:none;font-family:'Oswald',sans-serif;text-transform:uppercase;
  letter-spacing:.14em;font-size:.82rem;background:var(--kosc);color:var(--zielen);
  padding:.55rem 1.2rem;font-weight:500;white-space:nowrap;position:relative}
.naglowek-cta::before{content:"";position:absolute;inset:-5px;border:1px solid var(--linia);pointer-events:none}
.menu-przycisk{display:none;background:transparent;border:1px solid var(--linia-mocna);
  color:var(--kosc);font:inherit;font-size:.78rem;text-transform:uppercase;
  letter-spacing:.14em;padding:.45rem .9rem;cursor:pointer}

/* ---------- hero ---------- */
.hero{position:relative;min-height:min(100svh,max(calc(100vw*1152/2048),560px));display:flex;align-items:flex-end;
  background:var(--noc);overflow:hidden}
.hero-plansze{position:absolute;inset:0}
/* Przejscie noc <-> dzien. Sama zmiana opacity wygladala jak podmiana slajdu; dochodzaca
   plansza startuje przygaszona i rozjasnia sie do 100% - stad wrazenie wschodu, nie ciecia.
   2,2 s zamiast 3 s: przejscie ma byc jedno i ma sie domknac, zanim gosc zjedzie nizej
   (Michal 20.09 - "szybsze przelaczanie"). Ruch dalej nie przykuwa uwagi. */
.hero-plansza{position:absolute;inset:0;opacity:0;filter:brightness(.62) saturate(.78);
  transition:opacity 2.2s ease-in-out,filter 2.2s ease-in-out;will-change:opacity}
.hero-plansza.jest-widoczna{opacity:1;filter:none}
.hero-media{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:60% top}
/* Kropki pod kadrem - dwie, bo dwie plansze. Subtelne: nieaktywna ledwo widoczna,
   aktywna pelna koscia. Nie sa przyciskiem, wiec bez kursora i bez hovera. */
.hero-kropki{position:absolute;left:50%;bottom:1.3rem;transform:translateX(-50%);z-index:3;
  display:flex;gap:.55rem;pointer-events:none}
.hero-kropki span{width:7px;height:7px;border-radius:50%;background:var(--kosc);opacity:.32;
  transition:opacity .8s ease-in-out}
.hero-kropki span.jest-aktywna{opacity:.95}
.hero-nakladka{position:absolute;inset:0;background:var(--hero-scrim)}
.hero-tresc{position:relative;z-index:2;color:var(--kosc);
  background:var(--hero-plyta);
  margin:0 auto clamp(2rem,6vw,5rem) var(--bok);
  padding:clamp(1.6rem,3vw,2.6rem) clamp(1.5rem,3.5vw,3.2rem) clamp(1.8rem,3.5vw,3rem);
  width:min(40rem,calc(100% - 2*var(--bok)));
  border-left:1px solid var(--linia-mocna)}
.hero-odznaka{position:absolute;top:.35rem;right:1.2rem;width:76px;display:block;text-align:center;
  text-decoration:none;color:var(--kosc)}
.hero-odznaka-marka{display:block;font-family:'Oswald',sans-serif;font-weight:400;font-size:.62rem;
  letter-spacing:.02em;line-height:1;margin:0 0 .3rem;opacity:.95}
.hero-odznaka img{width:64px;height:auto;margin:0 auto;display:block}
.hero-odznaka:focus-visible{outline:2px solid var(--zar);outline-offset:4px}
.hero-nad{font-family:'Oswald',sans-serif;text-transform:uppercase;letter-spacing:.2em;font-size:.74rem;
  opacity:.85;margin:0 0 2.2rem;padding-right:96px}
/* line-height .95 sciagalo wiersze tak mocno, ze kreska nad "Ś" w PRZEMYŚL wchodzila
   w litery APARTAMENTY (zglosil Michal 20.09). Wersaliki z polskimi znakami potrzebuja
   wiecej niz sama wysokosc wersalika - stad 1.06. */
.hero-tytul{font-size:clamp(3rem,7vw,6.2rem);font-weight:200;letter-spacing:.015em;line-height:1.06}
.hero-tytul span{display:block}
.hero-tytul span:last-child{font-weight:300}
.hero-podpis{font-size:clamp(1.05rem,1.7vw,1.35rem);line-height:1.4;margin:1.4rem 0 1.9rem;font-weight:300;max-width:34rem}
.hero-akcje{display:flex;align-items:center;gap:1.6rem 2.4rem;flex-wrap:wrap}
.hero-tel{text-decoration:none;font-size:.95rem;opacity:.9}
.hero-tel b{font-weight:600;border-bottom:1px solid var(--linia-mocna);padding-bottom:1px}
.ikona-tel{display:none}

/* ---------- CTA z ramka odsunieta (motyw: obramienie okna) ---------- */
.cta{position:relative;display:inline-block;text-decoration:none;
  background:var(--kosc);color:var(--zielen);
  font-family:'Oswald',sans-serif;font-weight:500;text-transform:uppercase;
  letter-spacing:.12em;font-size:.95rem;padding:1.05rem 2.4rem;border:0;cursor:pointer;
  transition:background .2s}
.cta::before{content:"";position:absolute;inset:-12px;border:1px solid var(--linia-mocna);pointer-events:none;
  transition:inset .2s}
.cta:hover{background:#fff}
.cta:hover::before{inset:-8px}
.cta:focus-visible{outline:2px solid var(--zar);outline-offset:4px}
.jasna .cta::before,.sekcja:not(.ciemna) .cta::before{border-color:var(--linia-c-mocna)}
.sekcja:not(.ciemna) .cta{background:var(--noc);color:var(--kosc)}
.sekcja:not(.ciemna) .cta:hover{background:var(--zielen)}

/* ---------- pas faktow ---------- */
.fakty{background:var(--noc);color:var(--kosc);padding:0 var(--bok);
  border-top:1px solid var(--linia);border-bottom:1px solid var(--linia)}
.fakty dl{display:flex;flex-wrap:wrap;margin:0}
.fakty div{flex:1 1 220px;padding:1.5rem 1.6rem 1.5rem 0;border-right:1px solid var(--linia)}
.fakty div+div{padding-left:1.6rem}
.fakty div:last-child{border-right:0}
.fakty dt{font-family:'Oswald',sans-serif;text-transform:uppercase;letter-spacing:.16em;
  font-size:.7rem;opacity:.7;margin-bottom:.35rem}
.fakty dd{margin:0;font-size:1rem;line-height:1.4}
.fakty dd b{font-family:'Oswald',sans-serif;font-weight:400;font-size:1.45rem;color:var(--zar);margin-right:.15rem}
.fakty dd small{display:block;font-size:.78rem;opacity:.7}

/* ---------- sekcje ---------- */
.sekcja{padding:clamp(3.5rem,8vw,7rem) var(--bok);position:relative}
.sekcja+.sekcja:not(.ciemna){border-top:1px solid var(--linia-c)}
.ciemna{background:var(--noc);color:var(--kosc)}
.ciemna+.ciemna{border-top:1px solid var(--linia)}
/* gzyms: podwojna linia nad sekcja ciemna */
.ciemna::before{content:"";position:absolute;left:var(--bok);right:var(--bok);top:14px;height:5px;
  border-top:1px solid var(--linia);border-bottom:1px solid var(--linia);pointer-events:none}
.sekcja-glowa{max-width:62rem;margin-bottom:clamp(2rem,4vw,3.2rem)}
.nad{font-family:'Oswald',sans-serif;text-transform:uppercase;letter-spacing:.2em;font-size:.74rem;
  color:var(--szary);margin:0 0 1.1rem;display:flex;align-items:center;gap:.9rem}
.ciemna .nad{color:var(--kosc-2)}
.nad i{font-style:normal;font-weight:500;letter-spacing:.08em;padding-right:.9rem;border-right:1px solid var(--linia-c-mocna)}
.ciemna .nad i{border-right-color:var(--linia-mocna)}
.sekcja h2{font-size:clamp(1.9rem,3.6vw,3rem);max-width:26ch}
.sekcja h3{font-size:1rem;letter-spacing:.12em;font-weight:500}
.sekcja-lead{max-width:60ch;margin:1.4rem 0 0;color:var(--szary);font-size:1.02rem}
.ciemna .sekcja-lead{color:var(--kosc-2)}
.sekcja-akcje{display:flex;align-items:center;gap:2.4rem;flex-wrap:wrap;margin-top:clamp(2rem,4vw,3rem);padding-left:12px}
.link-dalej{display:inline-block;font-family:'Oswald',sans-serif;text-transform:uppercase;
  letter-spacing:.16em;font-size:.8rem;text-decoration:none;
  border-bottom:1px solid currentColor;padding-bottom:3px}

/* ---------- dla kogo ---------- */
/* Tekst z lewej, animacja rysunkowa z prawej. Scenariusze schodza z trzech kolumn na jedna -
   przy polowie szerokosci sekcji trzy kolumny mialyby po ~12 znakow w wierszu.
   Proporcja odwrocona 20.09 (1.15:1 -> 1:1.15): kolumna filmu rosnie o 15%, bo rysunek
   kamienicy byl za maly (Michal). Tekstu ubywa 13% szerokosci - scenariusze to krotkie
   akapity, mieszcza sie bez zmian. */
.dla-kogo{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:3rem;align-items:start}
.dla-kogo-film{margin:0;align-self:center}
/* Film ma sie WTOPIC, bez ramki i bez prostokata. Dwie rzeczy naraz, bo zadna sama nie wystarcza:
   1. `darken` - papier klatki chodzi od 235 do 246 na kanal, a sekcja stoi na 239 (--tynk).
      Tam, gdzie papier jest jasniejszy, darken oddaje tlo sekcji. Kreska jest ciemna, przechodzi.
   2. maska krawedzi - zostaje pas, w ktorym papier jest CIEMNIEJSZY niz sekcja; miekkie zejscie
      po obu osiach gasi go bez rysowania krawedzi. Pomiar papieru: /tmp/poster-szkic.png. */
.dla-kogo-film video{width:100%;height:auto;display:block;mix-blend-mode:darken;
  -webkit-mask-image:linear-gradient(to right,transparent,#000 7%,#000 93%,transparent),
                     linear-gradient(to bottom,transparent,#000 7%,#000 93%,transparent);
  -webkit-mask-composite:source-in;
  mask-image:linear-gradient(to right,transparent,#000 7%,#000 93%,transparent),
             linear-gradient(to bottom,transparent,#000 7%,#000 93%,transparent);
  mask-composite:intersect}
.dla-kogo .scenariusze{grid-template-columns:1fr}
.dla-kogo .scenariusze li{border-right:0;border-bottom:1px solid var(--linia-c);padding:1.3rem 0}
.dla-kogo .scenariusze li+li{padding-left:0}
.dla-kogo .scenariusze li:last-child{border-bottom:0}
.scenariusze{display:grid;grid-template-columns:repeat(3,1fr);gap:0;border-top:1px solid var(--linia-c-mocna)}
.scenariusze li{padding:1.8rem 1.8rem 1.8rem 0;border-right:1px solid var(--linia-c);counter-increment:sc}
.scenariusze li+li{padding-left:1.8rem}
.scenariusze li:last-child{border-right:0}
.scenariusze h3{margin-bottom:.7rem;font-size:1.05rem}
.scenariusze p{margin:0;color:var(--szary)}

/* ---------- jak to dziala ---------- */
.kroki{display:grid;grid-template-columns:repeat(3,1fr);gap:2.5rem 2rem}
.kroki li{position:relative;padding-top:1.2rem;border-top:1px solid var(--linia)}
.krok-nr{font-family:'Oswald',sans-serif;font-weight:200;font-size:4.2rem;line-height:1;color:var(--zar);display:block;margin-bottom:.6rem}
.kroki h3{font-size:1.05rem;margin-bottom:.6rem}
.kroki p{margin:0;color:var(--kosc-2)}
.jak-stopka{margin:2.6rem 0 0;font-size:.9rem;color:var(--kosc-2);padding-left:1rem;border-left:1px solid var(--zar);max-width:60ch}

/* ---------- apartamenty: tabela-lista ---------- */
.typy{border-top:1px solid var(--linia-c-mocna)}
.typy li{display:grid;grid-template-columns:minmax(11rem,1.1fr) minmax(0,2.2fr) minmax(0,2fr);gap:1.5rem 2.5rem;
  padding:1.6rem 0;border-bottom:1px solid var(--linia-c);align-items:start}
.typ-wyroznik{background:var(--tynk-2);margin:0 calc(-1*var(--bok));padding:1.6rem var(--bok) !important;
  border-top:1px solid var(--linia-c-mocna)}
.typy>li:first-child{border-top:0}
.typ-nazwa h3{font-size:1.7rem;font-weight:300;letter-spacing:.04em}
.typ-nazwa h3 a{text-decoration:none}
.typ-nazwa h3 a:hover{color:var(--cegla)}
.typ-nazwa span{display:block;font-size:.8rem;color:var(--szary);text-transform:uppercase;letter-spacing:.12em;
  font-family:'Oswald',sans-serif;margin-top:.3rem}
.typ-dane{display:grid;grid-template-columns:3.6rem 3rem minmax(0,1fr) minmax(0,1.15fr);gap:.5rem 1.4rem}
.typ-dane dt{font-family:'Oswald',sans-serif;text-transform:uppercase;letter-spacing:.14em;font-size:.66rem;color:var(--szary)}
.typ-dane dd{margin:0;font-size:.98rem;line-height:1.35}
.typ-opis{margin:0;color:var(--szary);font-size:.98rem}

/* ---------- galeria ---------- */
.galeria-siatka{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:220px;gap:8px}
.galeria-siatka li{margin:0;overflow:hidden;background:var(--tynk-2)}
.g-szeroki{grid-column:span 2}
.galeria-siatka button{display:block;width:100%;height:100%;padding:0;border:0;background:none;cursor:zoom-in;position:relative}
.galeria-siatka img{width:100%;height:100%;object-fit:cover;transition:transform .5s}
.galeria-siatka button:hover img{transform:scale(1.03)}
.galeria-siatka button::after{content:"";position:absolute;inset:8px;border:1px solid rgba(244,239,228,.5);opacity:0;transition:opacity .2s;pointer-events:none}
.galeria-siatka button:hover::after,.galeria-siatka button:focus-visible::after{opacity:1}
.galeria-siatka button:focus-visible{outline:2px solid var(--noc);outline-offset:2px}
.galeria-nota{margin:1.4rem 0 0;font-size:.9rem;color:var(--szary)}

/* ---------- rezerwacja / hotres ---------- */
.hotres-rama{background:#fff;border:1px solid var(--linia);padding:0;position:relative}
.hotres-rama::before{content:"";position:absolute;inset:-10px;border:1px solid var(--linia);pointer-events:none}
.hotres-rama iframe{display:block;width:100%;border:0;background:#fff}
.hotres-awaryjny{margin:1.6rem 0 0;font-size:.9rem;color:var(--kosc-2);max-width:60ch}
.hotres-awaryjny a{color:var(--zar);text-underline-offset:.2em}
.hotres-rama iframe.hotres-staly{min-height:420px}
.rezerwacja-alt{margin-top:2.4rem;display:flex;flex-wrap:wrap;gap:1rem 3rem;align-items:baseline}
.rezerwacja-alt p{margin:0;color:var(--kosc-2);max-width:32ch}
.rezerwacja-kanaly{display:flex;flex-wrap:wrap;gap:.8rem 1.8rem}
.rezerwacja-kanaly a{text-decoration:none;font-family:'Oswald',sans-serif;text-transform:uppercase;letter-spacing:.12em;
  font-size:.82rem;border-bottom:1px solid var(--linia-mocna);padding-bottom:3px}

/* ---------- w cenie ---------- */
.lista-cenie{display:grid;grid-template-columns:repeat(2,1fr);gap:0 3rem;border-top:1px solid var(--linia-c-mocna)}
.lista-cenie li{padding:1rem 0 1rem 1.6rem;border-bottom:1px solid var(--linia-c);position:relative;color:var(--szary)}
.lista-cenie li::before{content:"";position:absolute;left:0;top:1.55rem;width:.7rem;height:1px;background:var(--cegla)}
.lista-cenie b{color:var(--atrament)}

/* ---------- uczciwie ---------- */
.uczciwie{background:var(--tynk-2)}
.uczciwie-lista{display:grid;grid-template-columns:repeat(3,1fr);gap:2rem}
.uczciwie-lista div{padding:1.4rem 0 0;border-top:1px solid var(--cegla)}
.uczciwie-lista dt{font-family:'Oswald',sans-serif;text-transform:uppercase;letter-spacing:.1em;font-size:1.05rem;font-weight:500;margin-bottom:.6rem}
.uczciwie-lista dd{margin:0;color:var(--szary)}

/* ---------- zaufanie ---------- */
.oceny{display:grid;grid-template-columns:repeat(3,1fr);gap:0;border-top:1px solid var(--linia);border-bottom:1px solid var(--linia)}
.ocena{display:flex;flex-direction:column;gap:.5rem;padding:1.8rem 1.8rem 1.8rem 0;text-decoration:none;
  border-right:1px solid var(--linia)}
.ocena+.ocena{padding-left:1.8rem}
.ocena:last-child{border-right:0}
.ocena-liczba{font-family:'Oswald',sans-serif;font-weight:200;font-size:4rem;line-height:1;color:var(--zar)}
.ocena-liczba small{font-size:1.3rem;font-weight:300;margin-left:.2rem;color:var(--kosc-2)}
.ocena-opis{font-size:.98rem;line-height:1.4}
.ocena-opis small{font-size:.8rem;color:var(--kosc-2)}
a.ocena:hover .ocena-opis{text-decoration:underline}
.ocena-znaczek img{width:min(100%,220px);height:auto;border:1px solid var(--linia)}
.zaufanie-nota{margin:1.4rem 0 0;font-size:.9rem;color:var(--kosc-2);max-width:60ch}

/* ---------- proza (tresc oryginalu) ---------- */
.proza{max-width:60ch}
.proza .sekcja-glowa{margin-bottom:1.4rem}
.proza h3{color:var(--szary);margin-top:.8rem}
.proza-dopisek{color:var(--szary)}

/* ---------- lokalizacja ---------- */
.lokalizacja{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.3fr);gap:3rem;align-items:start}
.lokalizacja h2{font-size:clamp(1.9rem,3.6vw,3rem)}
.adres{font-family:'Oswald',sans-serif;font-size:1.5rem;font-weight:300;text-transform:uppercase;letter-spacing:.06em;line-height:1.15;margin:1.2rem 0 1.6rem}
.dojazd div{padding:1rem 0;border-top:1px solid var(--linia-c)}
.dojazd dt{font-family:'Oswald',sans-serif;text-transform:uppercase;letter-spacing:.14em;font-size:.72rem;color:var(--szary);margin-bottom:.3rem}
.dojazd dd{margin:0;color:var(--szary)}
.lokalizacja .link-dalej{margin-top:1.6rem}
.lokalizacja-foto{margin:0;display:grid;gap:8px}
.lokalizacja-foto img{width:100%;height:auto}
.lokalizacja-foto figcaption{font-size:.74rem;color:var(--szary)}

/* Mapa za zgoda. Zrzut OSM lezy POD panelem (position:absolute), nie nad nim - inaczej
   gosc klika zgode, mapa sie laduje, a on dalej widzi obrazek i ma prawo myslec, ze nic
   sie nie stalo (defekt zlapany w builderze 17.09). Podglad i atrybucja znikaja razem
   z panelem; zywa mapa Google niesie wlasna atrybucje. */
.mapa-zgoda{position:relative;overflow:hidden;aspect-ratio:1400/875;border:1px solid var(--linia-c)}
/* Selektor musi byc mocniejszy niz `.lokalizacja-foto img{height:auto}` - inaczej podglad
   nie wypelnia kadru i przy wyzszej proporcji (telefon) pod mapa zostaje pusty pas. */
.lokalizacja-foto .mapa-zgoda-podglad{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.mapa-zgoda iframe{width:100%;height:100%;border:0;display:block}
.mapa-zgoda iframe[hidden]{display:none}
.mapa-zgoda-atryb{position:absolute;right:8px;bottom:6px;z-index:1;font-size:11px;line-height:1;
  color:var(--atrament);background:rgba(244,239,228,.88);padding:3px 7px}
/* Panel trzyma sie gory kadru, nie srodka: pinezka kamienicy siedzi ponizej srodka
   i wysrodkowany przycisk ja zaslanial - czyli zaslepka chowala dokladnie to,
   po co gosc na nia patrzy. */
.mapa-zgoda-panel{position:relative;z-index:1;height:100%;display:flex;flex-direction:column;
  align-items:center;justify-content:flex-start;gap:1.4rem;padding:2rem 1.4rem;text-align:center}
.mapa-zgoda-tresc{max-width:42ch;margin:0;padding:1rem 1.3rem;font-size:.92rem;line-height:1.5;
  color:var(--noc);background:rgba(244,239,228,.94);box-shadow:0 6px 22px rgba(11,17,27,.28)}
.mapa-zgoda-btn{font-size:.85rem;padding:.85rem 1.9rem}
.mapa-zgoda-link{color:var(--noc)}
/* Na telefonie kadr 1400x875 daje ~215 px wysokosci - panel zjadal cala mape i przycisk
   wchodzil na atrybucje. Wyzszy kadr: tekst u gory, pinezka i podpis dworca zostaja widoczne. */
@media (max-width:720px){
  .mapa-zgoda{aspect-ratio:4/5}
  .mapa-zgoda-tresc{font-size:.84rem;padding:.85rem 1rem;line-height:1.45}
  .mapa-zgoda-panel{padding:1.4rem 1rem;gap:1.1rem}
}

/* ---------- faq ---------- */
.faq-lista{max-width:62rem;border-top:1px solid var(--linia-c-mocna)}
.faq-lista details{border-bottom:1px solid var(--linia-c)}
.faq-lista summary{cursor:pointer;list-style:none;padding:1.1rem 2.5rem 1.1rem 0;font-family:'Oswald',sans-serif;
  font-size:1.05rem;letter-spacing:.04em;position:relative}
.faq-lista summary::-webkit-details-marker{display:none}
.faq-lista summary::after{content:"+";position:absolute;right:.4rem;top:.9rem;font-weight:300;font-size:1.5rem;color:var(--cegla)}
.faq-lista details[open] summary::after{content:"−"}
.faq-lista p{margin:0 0 1.2rem;color:var(--szary);max-width:60ch}

/* ---------- stopka ---------- */
.stopka{background:var(--noc);color:var(--kosc);padding:clamp(3rem,6vw,4.5rem) var(--bok) 6rem;
  display:grid;grid-template-columns:repeat(3,1fr);gap:2rem 3rem;position:relative}
.stopka::before{content:"";position:absolute;left:var(--bok);right:var(--bok);top:14px;height:5px;
  border-top:1px solid var(--linia);border-bottom:1px solid var(--linia)}
.stopka h3{font-size:.74rem;letter-spacing:.2em;color:var(--kosc-2);margin-bottom:.8rem}
.stopka a{text-decoration:none}
.stopka a:hover{text-decoration:underline}
.stopka-szkic{position:absolute;left:0;bottom:0;z-index:0;pointer-events:none;
  /* opacity .17 gubila szkic na ciemnym tle stopki (uwaga Michala 20.09, potem "jeszcze
     jasniejszy") - .46 trzyma go czytelnym, a tekst stopki stoi wyzej w z-index i ma
     pelny kontrast. Proporcja z bbox nowego rysunku (apartamenty_szkic.png, 780x641). */
  width:clamp(260px,34vw,540px);aspect-ratio:780/641;background:var(--zar);opacity:.46;
  -webkit-mask:url(/assets/img/szkic-kamienica-maska.webp) left bottom/contain no-repeat;
  mask:url(/assets/img/szkic-kamienica-maska.webp) left bottom/contain no-repeat}
.stopka>*:not(.stopka-szkic){position:relative;z-index:1}
.spolecznosc{display:flex;flex-wrap:wrap;gap:.4rem 1.2rem}
.stopka-menu{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:.6rem 1.6rem;padding-top:1.6rem;border-top:1px solid var(--linia);font-size:.9rem}
.stopka-dol{grid-column:1/-1;font-size:.8rem;color:var(--kosc-2);margin:0}

/* ---------- sticky pasek dolny (mobile) ---------- */
.pasek-dol{display:none}
.pasek-dol[hidden]{display:none !important}

/* ---------- lightbox ---------- */
.lightbox{border:0;padding:0;background:transparent;max-width:100vw;max-height:100vh;width:100vw;height:100vh;margin:0}
.lightbox::backdrop{background:rgba(11,17,27,.94)}
.lightbox img{position:absolute;inset:0;margin:auto;max-width:min(92vw,1400px);max-height:88vh;width:auto;height:auto;object-fit:contain}
.lightbox button{position:absolute;background:transparent;color:var(--kosc);border:1px solid var(--linia-mocna);cursor:pointer;font:inherit}
.lightbox-zamknij{top:1rem;right:1rem;font-family:'Oswald',sans-serif;text-transform:uppercase;letter-spacing:.14em;font-size:.78rem;padding:.5rem 1rem}
.lightbox-nav{top:50%;transform:translateY(-50%);width:3rem;height:3rem;font-size:2rem;line-height:1}
.lightbox-wstecz{left:1rem}.lightbox-dalej{right:1rem}

/* ---------- responsywnosc ---------- */
/* pasek naglowka: najpierw sciesniamy, potem chowamy telefon, na koncu zwijamy do hamburgera */
@media (max-width:1340px){
  .menu{gap:1.05rem;font-size:.85rem}
  .naglowek-tel{display:none}
}
@media (max-width:1200px){
  .naglowek{flex-wrap:wrap;height:auto;min-height:var(--naglowek-h);padding-top:.7rem;padding-bottom:.7rem}
  .menu-przycisk{display:block;order:2;margin-left:auto}
  .menu{display:none;order:5;flex-basis:100%;flex-direction:column;gap:.9rem;
    padding:1rem 0 .4rem;border-top:1px solid var(--linia);font-size:1rem}
  .menu-otwarte{display:flex}
  .naglowek-prawo{order:3;gap:.9rem}
}
@media (max-width:1100px){
  .galeria-siatka{grid-template-columns:repeat(3,1fr);grid-auto-rows:200px}
  .typy li{grid-template-columns:minmax(9rem,1fr) minmax(0,2fr);}
  .typ-opis{grid-column:2}
}
@media (max-width:900px){
  :root{--naglowek-h:60px}
  .naglowek{gap:.6rem 1rem}
  .naglowek-cta{display:none}
  .marka{font-size:.78rem;letter-spacing:.14em}
  .marka img{height:52px}
  /* Na telefonie pasek jest zwiniety do hamburgera i miejsca obok logo jest mniej:
     przy 1,5x powiekszone logo weszloby na przycisk MENU (zmierzone na 360 px). 1,4x
     zostawia odstep i roznicy w odbiorze nie robi. */
  .naglowek:not(.naglowek-lity):not(.menu-rozwiniete) .marka{transform:scale(1.4)}
  .hero{min-height:100svh}
  .hero-nad{display:none}
  .hero-media{object-position:63% top}
  .hero-odznaka{top:.9rem;right:.9rem;width:56px}
  .hero-tresc{margin:0;width:100%;border-left:0;padding:1rem 1.2rem 1.5rem;background:var(--hero-plyta-mob)}
  .hero-podpis{margin:.8rem 0 1rem;font-size:1rem}
  .hero-tytul{font-size:clamp(2.4rem,10.5vw,3.6rem)}
  /* CTA + sluchawka w jednym rzedzie */
  .hero-akcje{flex-wrap:nowrap;justify-content:space-between;gap:1.2rem;margin-top:.2rem}
  .hero-akcje .cta{flex:1 1 auto;text-align:center;padding:1rem .8rem;font-size:.9rem;letter-spacing:.1em}
  .hero-tel{flex:0 0 auto;width:3.4rem;height:3.4rem;border:1px solid var(--linia-mocna);display:flex;
    align-items:center;justify-content:center;opacity:1;position:relative}
  .hero-tel::before{content:"";position:absolute;inset:-9px;border:1px solid var(--linia);pointer-events:none}
  .hero-tel-tekst{position:absolute;left:-9999px}
  .ikona-tel{display:block;width:1.5rem;height:1.5rem;fill:var(--kosc)}
  .cta::before{inset:-9px}
  .fakty div{flex-basis:100%;border-right:0;border-bottom:1px solid var(--linia);padding:1.1rem 0}
  .fakty div+div{padding-left:0}
  .fakty div:last-child{border-bottom:0}
  .dla-kogo{grid-template-columns:1fr;gap:2rem}
  .scenariusze{grid-template-columns:1fr}
  .scenariusze li{border-right:0;border-bottom:1px solid var(--linia-c);padding:1.4rem 0}
  .scenariusze li+li{padding-left:0}
  .scenariusze li:last-child{border-bottom:0}
  .kroki{grid-template-columns:1fr;gap:2rem}
  .krok-nr{font-size:3.2rem}
  .typy li{grid-template-columns:1fr;gap:.9rem;padding:1.4rem 0}
  .typ-opis{grid-column:auto}
  .typ-dane{grid-template-columns:repeat(2,minmax(0,1fr));gap:.5rem 1.6rem}
  .galeria-siatka{grid-template-columns:repeat(2,1fr);grid-auto-rows:150px;gap:6px}
  .g-szeroki{grid-column:span 2}
  .lista-cenie{grid-template-columns:1fr}
  .uczciwie-lista{grid-template-columns:1fr;gap:1.4rem}
  .oceny{grid-template-columns:1fr}
  .ocena{border-right:0;border-bottom:1px solid var(--linia);padding:1.4rem 0}
  .ocena+.ocena{padding-left:0}
  .ocena:last-child{border-bottom:0}
  .ocena-liczba{font-size:3.2rem}
  .lokalizacja{grid-template-columns:1fr;gap:2rem}
  .stopka{grid-template-columns:1fr;padding-bottom:7rem}
  /* Szkic kamienicy na telefonie: PRAWY GORNY rog stopki (Michal 20.09). Na dole stopka
     jest gesta - menu, linia praw autorskich i nad tym wszystkim sticky pasek
     Zadzwon|Rezerwuj; wolne miejsce jest tylko obok pierwszego bloku "Adres".
     Krycie takie jak na desktopie - szkic ma byc widoczny, nie domyslany. */
  .stopka-szkic{left:auto;right:0;bottom:auto;top:0;width:min(56vw,250px);opacity:.42;
    -webkit-mask:url(/assets/img/szkic-kamienica-maska.webp) right top/contain no-repeat;
    mask:url(/assets/img/szkic-kamienica-maska.webp) right top/contain no-repeat}
  .hotres-rama::before{display:none}
  /* sticky pasek: Zadzwon + Rezerwuj */
  .pasek-dol{display:grid;grid-template-columns:1fr 1fr;position:fixed;left:0;right:0;bottom:0;z-index:30;
    background:var(--noc);border-top:1px solid var(--linia);padding:.6rem .8rem calc(.6rem + env(safe-area-inset-bottom))}
  .pasek-dol a{display:block;text-align:center;text-decoration:none;font-family:'Oswald',sans-serif;
    text-transform:uppercase;letter-spacing:.14em;font-size:.86rem;padding:.85rem .5rem;font-weight:500}
  .pasek-tel{color:var(--kosc);border:1px solid var(--linia-mocna);margin-right:.5rem}
  .pasek-rez{background:var(--kosc);color:var(--zielen);position:relative}
  .pasek-rez::before{content:"";position:absolute;inset:-4px;border:1px solid var(--linia);pointer-events:none}
}
@media (max-width:480px){
  .hero-tytul{font-size:clamp(2.2rem,11.5vw,3.2rem)}
  .typ-dane{grid-template-columns:repeat(2,1fr)}
}
@media (prefers-reduced-motion:reduce){
  .galeria-siatka img,.cta,.cta::before{transition:none}
  /* Hero staje na nocy: JS w ogole nie uruchamia przejscia (patrz data-hero-plansze).
     Kropki znikaja razem z nim - nie ma czego wskazywac, a dwie kropki bez ruchu
     obiecuja przelaczanie, ktorego nie bedzie. */
  .hero-plansza{transition:none}
  .hero-kropki{display:none}
}

/* ==========================================================================
   ETAP 1 (28.09) - komponenty dopisane po rozmowie 23.09
   ========================================================================== */
.ik{width:1.25em;height:1.25em;flex:0 0 auto;display:inline-block;vertical-align:-.25em}

/* naglowek: WhatsApp Oleny obok telefonu (ustalenia §6) */
.naglowek-wa{display:inline-flex;align-items:center;justify-content:center;width:2.2rem;height:2.2rem;
  border:1px solid var(--linia-mocna);border-radius:50%;text-decoration:none}
.naglowek-wa .ik{width:1.15rem;height:1.15rem}
.naglowek-wa:hover{background:rgba(244,239,228,.12)}
.naglowek-cta:focus-visible,.naglowek-wa:focus-visible,.menu a:focus-visible,.jezyki a:focus-visible{outline:2px solid var(--zar);outline-offset:3px}

/* WhatsApp - zakladka przyklejona z boku ("jak czat", propozycja Pawla), tylko desktop */
.wa-zakladka{position:fixed;right:0;bottom:22vh;z-index:25;display:flex;align-items:center;gap:.7rem;
  background:var(--noc);color:var(--kosc);text-decoration:none;padding:.75rem 1rem .75rem .9rem;
  border:1px solid var(--linia-mocna);border-right:0;box-shadow:0 8px 24px rgba(8,18,36,.28);
  transform:translateX(calc(100% - 3.3rem));transition:transform .3s ease}
.wa-zakladka .ik{width:1.6rem;height:1.6rem;color:var(--zar)}
.wa-zakladka:hover,.wa-zakladka:focus-visible{transform:none}
.wa-zakladka:focus-visible{outline:2px solid var(--zar);outline-offset:2px}
.wa-zakladka-tekst{display:flex;flex-direction:column;line-height:1.25;white-space:nowrap}
.wa-zakladka-tekst b{font-family:'Oswald',sans-serif;font-weight:500;letter-spacing:.08em;text-transform:uppercase;font-size:.84rem}
.wa-zakladka-tekst small{font-size:.74rem;color:var(--kosc-2);letter-spacing:.12em}
@media (prefers-reduced-motion:reduce){.wa-zakladka{transition:none}}

/* pasek dolny (telefon): Zadzwon / WhatsApp / Rezerwuj (M4) */
.pasek-dol.pasek-ukryty{transform:translateY(110%)}
@media (max-width:900px){
  .wa-zakladka{display:none}
  .pasek-dol{grid-template-columns:1fr 1fr 1.25fr;gap:.45rem;transition:transform .25s ease}
  .pasek-dol a{display:flex;align-items:center;justify-content:center;gap:.4rem;font-size:.8rem;letter-spacing:.1em;padding:.8rem .3rem}
  .pasek-dol .ik{width:1.1rem;height:1.1rem}
  .pasek-tel,.pasek-wa{color:var(--kosc);border:1px solid var(--linia-mocna);margin:0}
  .pasek-wa .ik{color:var(--zar)}
  .naglowek-wa{width:2rem;height:2rem}
  .stopka{padding-bottom:8rem}
}

/* pas faktow - ocena klikalna do Bookinga (P [49:10]) */
.fakt-ocena{text-decoration:none}
.fakt-ocena:hover{text-decoration:underline}

/* 01 - instrukcja zameldowania: szkic + kroki w pionie (dawne 01+02) */
.wejscie{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:3.5rem;align-items:center}
.wejscie-szkic{margin:0;position:relative}
.wejscie-szkic img{width:100%;height:auto;mix-blend-mode:darken;
  -webkit-mask-image:linear-gradient(to right,transparent,#000 7%,#000 93%,transparent),linear-gradient(to bottom,transparent,#000 7%,#000 93%,transparent);
  -webkit-mask-composite:source-in;
  mask-image:linear-gradient(to right,transparent,#000 7%,#000 93%,transparent),linear-gradient(to bottom,transparent,#000 7%,#000 93%,transparent);
  mask-composite:intersect}
.film-przycisk{position:absolute;left:8%;bottom:6%;display:flex;align-items:center;gap:1rem;text-decoration:none;
  background:var(--noc);color:var(--kosc);padding:.8rem 1.4rem .8rem .8rem;box-shadow:0 10px 28px rgba(8,18,36,.3)}
.film-przycisk::before{content:"";position:absolute;inset:-9px;border:1px solid var(--linia-c-mocna);pointer-events:none}
.film-play{width:3.2rem;height:3.2rem;border-radius:50%;background:var(--zar);color:var(--noc);display:flex;align-items:center;justify-content:center;flex:0 0 auto}
.film-play .ik{width:1.5rem;height:1.5rem;margin-left:3px}
.film-przycisk b{display:block;font-family:'Oswald',sans-serif;font-weight:500;text-transform:uppercase;letter-spacing:.08em;font-size:.95rem;line-height:1.2}
.film-przycisk small{display:block;font-size:.8rem;color:var(--kosc-2);margin-top:.2rem}
.film-przycisk:hover .film-play{background:#f0bd76}
.film-przycisk:focus-visible{outline:2px solid var(--zar);outline-offset:4px}
.kroki-pion{border-top:1px solid var(--linia-c-mocna)}
.kroki-pion li{display:grid;grid-template-columns:3.4rem minmax(0,1fr);gap:1.2rem;padding:1.3rem 0;border-bottom:1px solid var(--linia-c)}
.kroki-pion .krok-nr{font-size:3rem;margin:0;color:var(--cegla)}
.kroki-pion h3{font-size:1.05rem;margin-bottom:.45rem}
.kroki-pion p{margin:0;color:var(--szary)}
.wejscie .jak-stopka{color:var(--szary);border-left-color:var(--cegla)}
.film-okno{border:0;padding:0;background:transparent;width:min(92vw,1100px);max-width:none;max-height:none;overflow:visible}
.film-okno::backdrop{background:rgba(8,18,36,.94)}
.film-okno video{width:100%;height:auto;background:#000;display:block}
.film-okno .film-zamknij{position:absolute;top:-3rem;right:0;background:transparent;color:var(--kosc);border:1px solid var(--linia-mocna);
  cursor:pointer;font-family:'Oswald',sans-serif;text-transform:uppercase;letter-spacing:.14em;font-size:.78rem;padding:.5rem 1rem}

/* 02 - tabela typow: caly wiersz klikalny + miniatura + sygnal (O+P [31:52]) */
.typy li{grid-template-columns:9rem minmax(10rem,1fr) minmax(0,2.2fr) minmax(0,1.8fr);position:relative;align-items:center;
  transition:background .2s}
.typy li:hover{background:rgba(12,27,51,.04)}
.typ-wyroznik:hover{background:#ddd3c0}
.typ-miniatura{aspect-ratio:4/3;overflow:hidden;background:var(--tynk-2)}
.typ-miniatura img{width:100%;height:100%;object-fit:cover;transition:transform .4s}
.typy li:hover .typ-miniatura img{transform:scale(1.04)}
.typ-nazwa h3 a::after{content:"";position:absolute;inset:0;z-index:1}
.typ-nazwa h3 a:focus-visible{outline:none}
.typy li:focus-within{outline:2px solid var(--noc);outline-offset:4px}
.typ-dane{grid-template-columns:repeat(2,minmax(0,1fr));gap:.6rem 1.4rem}
.typ-dane div{display:grid;grid-template-columns:1.4rem minmax(0,1fr);column-gap:.5rem;align-items:start}
.typ-dane .ik{grid-row:span 2;width:1.3rem;height:1.3rem;color:var(--cegla);margin-top:.1rem}
.typ-sygnal{grid-column:2/-1;justify-self:end;display:inline-flex;align-items:center;gap:.4rem;
  font-family:'Oswald',sans-serif;text-transform:uppercase;letter-spacing:.14em;font-size:.76rem;color:var(--cegla);margin-top:-.6rem}
.typy li:hover .typ-sygnal .ik{transform:translateX(4px)}
.typ-sygnal .ik{transition:transform .2s}
@media (max-width:1100px){
  .typy li{grid-template-columns:8rem minmax(0,1fr) minmax(0,1.6fr)}
  .typ-opis{grid-column:2/-1}
}
@media (max-width:900px){
  .typy li{grid-template-columns:7rem minmax(0,1fr);gap:.8rem 1rem;padding:1.2rem 0}
  .typ-miniatura{grid-row:span 2;align-self:start}
  .typ-dane,.typ-opis{grid-column:1/-1}
  .typ-sygnal{grid-column:1/-1;justify-self:start;margin-top:0}
}

/* galeria: linki zamiast przyciskow (dziala bez JS) */
.galeria-siatka a{display:block;width:100%;height:100%;cursor:zoom-in;position:relative}
.galeria-siatka a:hover img{transform:scale(1.03)}
.galeria-siatka a:focus-visible{outline:2px solid var(--noc);outline-offset:2px}

/* 05 - W cenie jako siatka ikon (O [34:17]) */
.ikony-cenie{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;border-top:1px solid var(--linia-c-mocna)}
.ikony-cenie li{display:flex;flex-direction:column;gap:.35rem;padding:1.6rem 1.4rem 1.6rem 0;border-bottom:1px solid var(--linia-c)}
.ikony-cenie .ik{width:2.1rem;height:2.1rem;color:var(--cegla);margin-bottom:.4rem}
.ikony-cenie b{font-family:'Oswald',sans-serif;font-weight:500;text-transform:uppercase;letter-spacing:.06em;font-size:1rem}
.ikony-cenie span{color:var(--szary);font-size:.92rem;line-height:1.4}
@media (max-width:1100px){.ikony-cenie{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:480px){.ikony-cenie li{padding-right:.8rem}.ikony-cenie .ik{width:1.8rem;height:1.8rem}}

/* rezerwacja - kanaly z ikonami */
.rezerwacja-kanaly a{display:inline-flex;align-items:center;gap:.5rem}
.rezerwacja-kanaly .ik-whatsapp{color:var(--zar)}
.ocena-znaczek{text-decoration:none}
a.ocena-znaczek:hover small{text-decoration:underline}

/* stopka: ikony spolecznosci, naglowki h2 (bylo h3), bez nachodzenia (DO_ZROBIENIA 1.1) */
.stopka h2{font-family:'Oswald',sans-serif;font-weight:500;text-transform:uppercase;font-size:.74rem;letter-spacing:.2em;color:var(--kosc-2);margin:0 0 .8rem}
.stopka small{color:var(--kosc-2)}
.spolecznosc{gap:.6rem}
.spolecznosc a{width:2.4rem;height:2.4rem;display:inline-flex;align-items:center;justify-content:center;border:1px solid var(--linia-mocna);border-radius:50%}
.spolecznosc a:hover{background:rgba(244,239,228,.12);text-decoration:none}
.spolecznosc .ik{width:1.15rem;height:1.15rem}
.stopka-jezyki{font-size:.86rem;color:var(--kosc-2);margin-top:.4rem}
.kontakt-kanaly .stopka-jezyki{color:var(--szary)}
@media (max-width:900px){
  .stopka-szkic{top:2.6rem}
}

/* PODSTRONY */
.podstrona main{padding-top:var(--naglowek-h)}
.pas-tytulu{background:var(--noc);color:var(--kosc);padding:clamp(2.4rem,5vw,4rem) var(--bok) clamp(2.2rem,4vw,3.4rem);position:relative}
.pas-tytulu h1{font-size:clamp(2.1rem,4.6vw,3.8rem);font-weight:200;max-width:24ch;line-height:1.08}
.pas-lead{font-size:clamp(1.02rem,1.5vw,1.2rem);font-weight:300;max-width:58ch;margin:1.2rem 0 0;color:var(--kosc-2)}
.pas-tytulu .cta{margin-top:1.8rem}
.okruszki ol{display:flex;flex-wrap:wrap;gap:.3rem .6rem;margin:0 0 1.4rem;font-size:.8rem;color:var(--kosc-2)}
.okruszki li+li::before{content:"/";margin-right:.6rem;opacity:.6}
.okruszki a{text-decoration:none}
.okruszki a:hover{text-decoration:underline}
.proza{max-width:68ch}
.proza h2{font-size:clamp(1.4rem,2.4vw,1.9rem);margin:2.4rem 0 1rem}
.proza h2:first-child{margin-top:0}
.proza h3{font-size:1.05rem;margin:1.8rem 0 .7rem;letter-spacing:.08em;color:var(--atrament)}
.proza p,.proza li{color:#3f3a31}
.proza a{color:var(--cegla)}
.tabela-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:1rem 0}
.cookie-tabela{border-collapse:collapse;font-size:.9rem;min-width:36rem}
.cookie-tabela th,.cookie-tabela td{text-align:left;vertical-align:top;padding:.5rem .6rem;border-bottom:1px solid rgba(12,27,51,.15)}
.cookie-tabela th{color:var(--atrament)}
.proza code{font-size:.92em}
.proza a.cta{color:var(--kosc)}
.proza .lista,.proza ul,.proza ol{margin:0 0 1.2rem;padding-left:1.2rem}
.proza .lista li,.proza ul li,.proza ol li{list-style:disc;margin:.35rem 0}
.proza ol li{list-style:decimal}
.proza .obraz{margin:1.6rem 0}
.proza .obraz img{max-width:100%;height:auto}
.kontakt-link a{display:inline-flex;align-items:center;gap:.6rem;font-size:1.1rem;text-decoration:none;border-bottom:1px solid var(--linia-c-mocna)}
.tabela-rama{overflow-x:auto;margin:1rem 0 1.6rem}
.tabela{border-collapse:collapse;width:100%;font-size:.95rem}
.tabela th,.tabela td{text-align:left;padding:.6rem .8rem;border-bottom:1px solid var(--linia-c)}
.tabela th{font-family:'Oswald',sans-serif;font-weight:500;text-transform:uppercase;letter-spacing:.08em;font-size:.76rem;color:var(--szary);border-bottom-color:var(--linia-c-mocna)}
.podstrona .sekcja.apartamenty{padding-bottom:1rem}
.podstrona .rezerwacja{padding-top:3.2rem}
.broszura-lista{counter-reset:b;max-width:68ch;border-top:1px solid var(--linia-c-mocna);margin-bottom:1.6rem}
.broszura-lista li{counter-increment:b;display:grid;grid-template-columns:2.4rem minmax(0,1fr);padding:.9rem 0;border-bottom:1px solid var(--linia-c);color:var(--szary)}
.broszura-lista li::before{content:counter(b);font-family:'Oswald',sans-serif;font-weight:300;font-size:1.4rem;color:var(--cegla);line-height:1.1}
.broszura .link-dalej{display:inline-flex;align-items:center;gap:.4rem}
.lokalizacja-kontakt{display:block;padding-top:0}
.lokalizacja-kontakt .lokalizacja-foto{max-width:60rem}

/* przyciski: Rezerwuj / Zadzwon / WhatsApp (podstrony typow, ustalenia §6) */
.typ-przyciski{display:flex;flex-wrap:wrap;gap:1.4rem 1.6rem;margin-top:2rem;padding-left:12px}
.typ-przyciski .cta,.przycisk-kontur{display:inline-flex;align-items:center;gap:.6rem}
.typ-przyciski .ik{width:1.2rem;height:1.2rem}
.przycisk-kontur{text-decoration:none;font-family:'Oswald',sans-serif;font-weight:500;text-transform:uppercase;letter-spacing:.12em;
  font-size:.9rem;padding:1rem 1.6rem;border:1px solid currentColor}
.przycisk-kontur:hover{background:rgba(12,27,51,.06)}
.ciemna .przycisk-kontur:hover,.typ-hero .przycisk-kontur:hover{background:rgba(244,239,228,.1)}
.przycisk-wa .ik{color:var(--zar)}
.sekcja:not(.ciemna) .przycisk-wa .ik{color:#1f7a4d}
.przycisk-kontur:focus-visible{outline:2px solid var(--zar);outline-offset:3px}

.typ-hero{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);background:var(--noc);color:var(--kosc);min-height:min(78svh,720px)}
.typ-hero-tekst{padding:clamp(2.2rem,4.5vw,4rem) var(--bok);align-self:center}
.typ-hero h1{font-size:clamp(2rem,4.2vw,3.5rem);font-weight:200;line-height:1.08;max-width:18ch}
.typ-hero .typ-przyciski .cta{background:var(--kosc);color:var(--zielen)}
.typ-hero .cta::before{border-color:var(--linia-mocna)}
.typ-hero-foto{display:block;position:relative;overflow:hidden;cursor:zoom-in}
.typ-hero-foto img{width:100%;height:100%;object-fit:cover;position:absolute;inset:0}
.typ-dane-duze{margin-top:1.8rem;border-top:1px solid var(--linia);padding-top:1.4rem;grid-template-columns:repeat(2,minmax(0,1fr));max-width:34rem}
.typ-hero .typ-dane dt{color:var(--kosc-2)}
.typ-hero .typ-dane .ik{color:var(--zar)}
.typ-para{margin:1.6rem 0 0;font-size:.95rem}
.typ-para a{color:var(--kosc)}
.typ-opis-sekcja{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:3rem;align-items:start}
.ikony-wyposazenie{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 1.4rem;border-top:1px solid var(--linia-c-mocna)}
.ikony-wyposazenie li{display:flex;align-items:center;gap:.7rem;padding:.7rem 0;border-bottom:1px solid var(--linia-c);font-size:.95rem}
.ikony-wyposazenie .ik{width:1.35rem;height:1.35rem;color:var(--cegla)}
.typ-plan img{max-width:min(100%,720px);height:auto;margin-top:1.4rem;background:#fff;padding:1rem;border:1px solid var(--linia-c)}
.typ-plan h2{font-size:clamp(1.4rem,2.4vw,1.9rem)}
.typ-rezerwacja .typ-przyciski{margin-top:0}
.inne-typy{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1.2rem}
.inne-typy a{display:flex;flex-direction:column;gap:.4rem;text-decoration:none}
.inne-typy img{width:100%;aspect-ratio:4/3;object-fit:cover;height:auto}
.inne-typy span{font-family:'Oswald',sans-serif;text-transform:uppercase;letter-spacing:.08em;font-size:1.1rem}
.inne-typy small{color:var(--szary)}
.inne-typy a:hover span{color:var(--cegla)}
@media (max-width:900px){
  .wejscie{grid-template-columns:1fr;gap:1.6rem}
  .wejscie-szkic{order:2}
  .film-przycisk{left:0;right:0;bottom:-1rem;margin:0 auto;width:max-content;max-width:100%;padding:.7rem 1rem .7rem .7rem}
  .film-play{width:2.8rem;height:2.8rem}
  .typ-hero{grid-template-columns:1fr}
  .typ-hero-foto{aspect-ratio:4/3;order:-1}
  .typ-opis-sekcja{grid-template-columns:1fr;gap:2rem}
  .inne-typy{grid-template-columns:repeat(2,minmax(0,1fr))}
  .typ-przyciski{gap:1.1rem;padding-left:9px}
  .typ-przyciski>*{flex:1 1 100%;justify-content:center}
}

/* poprawki po bramce wizualnej 28.09 */
/* zakladka WhatsApp: zar zamiast granatu - na granatowych sekcjach ginela */
.wa-zakladka{background:var(--zar);color:var(--noc);border-color:rgba(12,27,51,.35)}
.wa-zakladka .ik{color:var(--noc)}
.wa-zakladka-tekst small{color:rgba(12,27,51,.75)}
/* stopka: szkic kamienicy we wlasnej kolumnie - nie lezy juz pod adresem (Pawel 23.09 "cos nachodzi") */
@media (min-width:901px){
  .stopka{grid-template-columns:minmax(200px,.9fr) repeat(3,minmax(0,1fr))}
  .stopka-szkic{position:relative;left:auto;bottom:auto;grid-row:1 / span 3;align-self:end;width:100%;max-width:360px;margin-top:1.2rem}
  .stopka-menu,.stopka-dol{grid-column:2 / -1}
}

/* ==========================================================================
   RUNDA 2 (28.09 wieczor) - uwagi Michala po przegladzie demo
   ========================================================================== */
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* zakladka WhatsApp: jezyk wiadomosci wybiera gosc (PL/UA/EN), nie jezyk strony */
.wa-zakladka{cursor:default}
.wa-zakladka:hover,.wa-zakladka:focus-within{transform:none}
.wa-jezyki{display:flex;gap:.4rem;margin-top:.35rem}
.wa-jezyki a{font-family:'Oswald',sans-serif;font-weight:500;letter-spacing:.1em;font-size:.8rem;text-decoration:none;
  color:var(--noc);border:1px solid rgba(12,27,51,.45);padding:.2rem .55rem}
.wa-jezyki a:hover,.wa-jezyki a:focus-visible{background:var(--noc);color:var(--kosc);outline:none}

/* liczba osob: N x ikona jednej osoby */
.dane-osoby dd{display:flex;flex-wrap:wrap;align-items:center;gap:.15rem .6rem}
.osoby-ikony{display:inline-flex;gap:1px}
.osoby-ikony .ik{width:1.05rem;height:1.05rem;color:var(--cegla);margin:0}
.osoby-ikony .osoba-opcja{opacity:.4}
.typ-dane .osoby-ikony .ik{grid-row:auto}
.typ-hero .osoby-ikony .ik{color:var(--zar)}
.dane-osoby small{flex-basis:100%;font-size:.78rem;color:var(--kosc-2);line-height:1.3}

/* hero typu: plan w granatowej kolumnie, obok danych */
.typ-hero-uklad.ma-plan{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:1.6rem;align-items:end;max-width:44rem}
.typ-hero-uklad .typ-dane-duze{max-width:none}
.typ-hero-plan{margin:0;opacity:.92}
.typ-hero-plan img{width:100%;height:auto;max-height:19rem;object-fit:contain}
.typ-hero-plan figcaption{font-family:'Oswald',sans-serif;text-transform:uppercase;letter-spacing:.16em;font-size:.66rem;color:var(--kosc-2);margin-top:.5rem;text-align:center}
.typ-hero-uklad.ma-plan .typ-dane-duze{grid-template-columns:1fr}

/* wyposazenie tematycznie */
.wyposazenie h2{font-size:clamp(1.4rem,2.4vw,1.9rem);margin-bottom:.4rem}
.wyposazenie h3{font-size:.8rem;letter-spacing:.16em;color:var(--szary);margin:1.4rem 0 .3rem}
.wyposazenie .ikony-wyposazenie{border-top-color:var(--linia-c)}

/* "Co to znaczy w praktyce" (O nas) - ikony zamiast kropek */
.proza .lista-ikony{padding:0;margin:0 0 1.4rem;border-top:1px solid var(--linia-c-mocna)}
.proza .lista-ikony li{list-style:none;display:grid;grid-template-columns:2rem minmax(0,1fr);gap:.9rem;align-items:start;
  padding:.9rem 0;margin:0;border-bottom:1px solid var(--linia-c)}
.lista-ikony .ik{width:1.6rem;height:1.6rem;color:var(--cegla)}

/* O nas: rysunek kamienicy w granatowym pasie */
.pas-z-rysunkiem{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:2rem;align-items:end}
.pas-rysunek{aspect-ratio:780/641;width:100%;max-width:26rem;justify-self:end;background:var(--zar);opacity:.85;
  -webkit-mask:url(/assets/img/szkic-kamienica-maska.webp) center bottom/contain no-repeat;
  mask:url(/assets/img/szkic-kamienica-maska.webp) center bottom/contain no-repeat}
@media (max-width:900px){.pas-z-rysunkiem{grid-template-columns:1fr}.pas-rysunek{max-width:15rem;justify-self:start}}

/* tabela "Ktory lokal wybrac": szersza niz proza, tak/nie jako znaczki */
/* tylko desktop: na telefonie 100vw rosnie razem z przelewem i rama sie rozpycha (overflow 40 px, 28.09) */
@media (min-width:901px){.proza .tabela-rama{width:min(64rem,calc(100vw - 2*var(--bok)))}}
/* rama = blok zawierajacy dla .sr, inaczej ukryty tekst ucieka poza przewijana rame (overflow 40 px @390) */
.tabela-rama{position:relative}
.tabela td.tak,.tabela td.nie{text-align:center;font-size:1.15rem;line-height:1}
.tabela td.tak{color:#1f7a4d}
.tabela td.nie{color:var(--szary)}
.tabela th:nth-child(n+4){text-align:center}

/* CTA pod lista apartamentow odsuniete od linii sekcji */
.podstrona .sekcja.apartamenty{padding-bottom:clamp(3rem,6vw,4.5rem)}

/* szkic wejscia: odreczna strzalka do drzwi apartamentow */
.wejscie-strzalka{position:absolute;left:0;top:0;width:100%;height:auto;aspect-ratio:1280/720;pointer-events:none;overflow:visible}
/* kolor = kreska szkicu (grafit z plakatu), grubosc jak linie elewacji */
.strzalka-kreska{fill:none;stroke:#4a463f;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.strzalka-kropka{fill:#4a463f}
.wejscie-strzalka text{font-family:'Oswald',sans-serif;font-weight:400;font-size:22px;letter-spacing:.24em;text-transform:uppercase;fill:#4a463f}
@media (max-width:900px){.wejscie-strzalka text{font-size:34px}.strzalka-kreska{stroke-width:4}}

/* hero: plyta z tekstem po PRAWEJ - zaslania rozowa kamienice obok, nasza zostaje odslonieta (Michal 28.09) */
/* Rozowa kamienica to ~23% kadru V9 - plyta musi sie zmiescic w tym pasie, inaczej zaslania
   narozny balkon z para i wejscie (zrzut 28.09). Stad waska plyta i mniejszy tytul. */
@media (min-width:901px){
  .hero-tresc{margin:calc(var(--naglowek-h) + 1rem) var(--bok) 4.5rem auto;align-self:center;border-left:0;border-right:1px solid var(--linia-mocna);
    width:min(25rem,27vw);padding:clamp(1.3rem,2vw,2rem) clamp(1.2rem,2vw,1.9rem) clamp(1.4rem,2.2vw,2rem)}
  .hero-tytul{font-size:clamp(2.4rem,3.9vw,4.2rem)}
  .hero-nad{padding-right:84px;margin-bottom:1.6rem;line-height:1.6}
  .hero-podpis{font-size:clamp(1rem,1.15vw,1.12rem);margin:1rem 0 1.5rem}
  .hero-akcje{gap:1.2rem 1.6rem}
  .hero-akcje .cta{padding:1rem 1.6rem}
}

/* hero desktop, runda 2c (Michal 28.09): boks wiekszy i mniej przezroczysty, typografia
   dopracowana, sluchawka odsunieta od napisu; zakladka WhatsApp POD boksem */
@media (min-width:901px){
  .hero-tresc{width:min(29rem,31vw);margin-right:clamp(1.5rem,2.5vw,2.5rem);background:rgba(12,27,51,.86);
    padding:clamp(1.6rem,2.4vw,2.4rem) clamp(1.5rem,2.3vw,2.3rem) clamp(1.6rem,2.4vw,2.3rem);
    box-shadow:0 18px 50px rgba(6,12,24,.35)}
  .hero-nad{font-size:.7rem;letter-spacing:.22em;color:var(--kosc-2);opacity:1;
    padding-bottom:1.1rem;border-bottom:1px solid var(--linia);margin-bottom:1.4rem}
  .hero-tytul{font-size:clamp(2.6rem,4.1vw,4.4rem);letter-spacing:.02em}
  .hero-podpis{font-size:clamp(1rem,1.2vw,1.14rem);line-height:1.5;color:var(--kosc-2);margin:1.1rem 0 1.7rem}
  .hero-akcje{flex-direction:column;align-items:flex-start;gap:1.5rem}
  .hero-akcje .cta{margin-left:12px}
  .hero-tel{display:inline-flex;align-items:center;gap:.7rem;font-size:.92rem;color:var(--kosc-2);opacity:1;margin-left:2px}
  .hero-tel .ikona-tel{display:block;width:1.15rem;height:1.15rem;color:var(--zar);flex:0 0 auto}
  .hero-tel b{color:var(--kosc);font-size:1.02rem;letter-spacing:.02em;margin-left:.25rem}
  .wa-zakladka{bottom:1.5rem}
}
/* V10 ma 16:9 - na ekranach szerszych niz 16:9 tniemy od gory, nie od dolu: wejscie ze
   schodkami ma byc cale (Michal 28.09), szczyty lukarn moga stracic kilka pikseli */
@media (min-width:901px){.hero-media{object-position:60% 80%}}

/* 01 - rysunek rysuje sie sam, potem strzalka + ramka drzwi, kroki 1-2-3 po kolei (Michal 28.09).
   Stan spoczynkowy = wszystko widoczne; klasy animacji dokleja JS tylko gdy ruch dozwolony. */
.wejscie-szkic .szkic-wideo{position:absolute;inset:0;width:100%;height:auto;mix-blend-mode:darken;
  -webkit-mask-image:linear-gradient(to right,transparent,#000 7%,#000 93%,transparent),linear-gradient(to bottom,transparent,#000 7%,#000 93%,transparent);
  -webkit-mask-composite:source-in;
  mask-image:linear-gradient(to right,transparent,#000 7%,#000 93%,transparent),linear-gradient(to bottom,transparent,#000 7%,#000 93%,transparent);
  mask-composite:intersect}
.drzwi-ramka{fill:none;stroke:var(--cegla);stroke-width:2.4;stroke-linejoin:miter}
.drzwi-ramka-2{stroke-width:1.2;opacity:.8}
.wejscie-strzalka text{transition:opacity .6s ease .9s}
.strzalka-kropka{transition:opacity .3s ease .1s}
.wejscie.anim .szkic-rys img{opacity:0}
.wejscie.anim .drzwi-ramka,.wejscie.anim .strzalka-kreska{stroke-dasharray:1;stroke-dashoffset:1}
.wejscie.anim .wejscie-strzalka text,.wejscie.anim .strzalka-kropka{opacity:0}
.wejscie.anim.narysowany .drzwi-ramka{stroke-dashoffset:0;transition:stroke-dashoffset 1.1s ease-in-out}
.wejscie.anim.narysowany .drzwi-ramka-2{transition-delay:.25s}
.wejscie.anim.narysowany .strzalka-kreska{stroke-dashoffset:0;transition:stroke-dashoffset .8s ease-out .5s}
.wejscie.anim.narysowany .strzalka-grot{transition-delay:1.2s;transition-duration:.35s}
.wejscie.anim.narysowany .wejscie-strzalka text,.wejscie.anim.narysowany .strzalka-kropka{opacity:1}
.wejscie.anim .kroki-pion li{opacity:0;transform:translateY(14px);transition:opacity .6s ease,transform .6s ease}
.wejscie.anim .kroki-pion li.krok-widoczny,.wejscie.anim.kroki-widoczne .kroki-pion li{opacity:1;transform:none}
/* szybki scroll: ramka i strzalka domykaja sie w 0,3 s, bez opoznien (Michal 28.09) */
.wejscie.anim.szybko .drzwi-ramka,.wejscie.anim.szybko .strzalka-kreska,.wejscie.anim.szybko .wejscie-strzalka text,
.wejscie.anim.szybko .strzalka-kropka{transition-duration:.3s!important;transition-delay:0s!important}
/* telefon: przycisk filmu POD rysunkiem - na rysunku zaslanial drzwi, strzalke i ramke (28.09) */
@media (max-width:900px){.film-przycisk{position:relative;left:auto;right:auto;bottom:auto;margin:1.4rem 10px 0;width:auto;max-width:none;display:flex}}
/* UA: dluzsze slowa w dolnym pasku (Зателефонувати / Забронювати) - ucinaly sie przy 390 px */
@media (max-width:900px){html[lang="uk"] .pasek-dol a{font-size:.68rem;letter-spacing:.03em;gap:.3rem}}

/* Najwezsze telefony: przy 320-375 px pasek i tak lamie sie na dwa rzedy, wiec powiekszone
   logo nachodziloby na jezyki i WhatsApp. Tu rosnie WYSOKOSCIA (nie skala) - naglowek ma
   `height:auto`, wiec rozsuwa sie sam i nic na nic nie wchodzi. */
@media (max-width:380px){
  .naglowek:not(.naglowek-lity):not(.menu-rozwiniete) .marka{transform:none}
  .naglowek:not(.naglowek-lity):not(.menu-rozwiniete) .marka img{height:78px}
}

/* Baner zgod cookies (tylko production, gen.py baner()). Nad paskiem dolnym i zakladka WA. */
.consent-baner{position:fixed;left:0;right:0;bottom:0;z-index:60;padding:.75rem;display:flex;justify-content:center;box-sizing:border-box}
.consent-baner *{box-sizing:border-box}
.consent-baner[hidden]{display:none}
.consent-panel{max-width:46rem;width:100%;max-height:calc(100dvh - 2rem);overflow:auto;background:var(--kosc);color:var(--noc);
  border:1px solid var(--kosc-2);box-shadow:0 10px 40px rgba(12,27,51,.35);padding:1.2rem 1.3rem}
.consent-panel h2{font-family:'Oswald',sans-serif;font-weight:500;font-size:1.15rem;margin:0 0 .5rem;letter-spacing:.02em}
.consent-tresc{margin:0 0 .9rem;font-size:.95rem;line-height:1.5}
.consent-kat{display:flex;justify-content:space-between;gap:1rem;align-items:flex-start;padding:.6rem 0;border-top:1px solid var(--kosc-2)}
.consent-kat p{margin:.2rem 0 0;font-size:.88rem}
.consent-kat input{width:1.3rem;height:1.3rem;flex:none;accent-color:var(--noc)}
.consent-zawsze{font-size:.8rem;white-space:nowrap;opacity:.75}
.consent-ustawienia{margin-bottom:.9rem}
.consent-akcje{display:flex;flex-wrap:wrap;gap:.5rem}
.consent-btn{font:inherit;font-size:.92rem;padding:.65rem 1rem;cursor:pointer;border:1px solid var(--noc);min-height:44px}
.consent-btn[hidden]{display:none}
.consent-btn-glowny{background:var(--noc);color:var(--kosc);flex:1 1 10rem}
.consent-btn-drugi{background:transparent;color:var(--noc)}
.consent-link{display:inline-block;margin-top:.7rem;font-size:.88rem;color:var(--noc)}

/* Formularz kontaktowy /kontakt/ (07.10 - zamiast maila na stronie) */
.formularz-sekcja{padding-top:0}
.formularz{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.1rem 1.4rem;max-width:60rem;margin-top:1.6rem}
.formularz p{margin:0}
.formularz .pole{display:flex;flex-direction:column;gap:.4rem}
.formularz .pole-szerokie,.formularz-info,.formularz-akcje,.formularz-status{grid-column:1/-1}
.formularz label{font-family:'Oswald',sans-serif;font-weight:500;text-transform:uppercase;letter-spacing:.12em;font-size:.76rem;color:var(--szary)}
.formularz input,.formularz textarea{font:inherit;font-size:1rem;color:var(--atrament);background:#fff;border:1px solid var(--linia-c-mocna);border-radius:0;padding:.75rem .85rem;width:100%}
.formularz textarea{resize:vertical;min-height:9rem}
.formularz input:focus-visible,.formularz textarea:focus-visible{outline:2px solid var(--zar);outline-offset:1px;border-color:var(--noc)}
.formularz-info{font-size:.86rem;color:var(--szary);max-width:62ch}
.formularz-info a{color:var(--cegla)}
.formularz-akcje{padding:12px 0 0 12px}
.formularz button.cta{line-height:inherit}
.formularz button.cta[disabled]{opacity:.7;cursor:progress}
.formularz-status:empty{display:none}
.formularz-status{padding:.8rem 1rem;border-left:3px solid var(--szary);background:rgba(12,27,51,.04)}
.formularz-status.jest-ok{border-left-color:#1f7a4d}
.formularz-status.jest-blad{border-left-color:var(--cegla)}
.pole-pulapka{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
@media (max-width:700px){.formularz{grid-template-columns:minmax(0,1fr)}}