/* ══ 100 MW House · Osiedle Brzozowy Las ══════════════════════════════════════
   JEDNOSTRONICOWIEC w układzie willapark-okrzeszyniec.pl (decyzja K. 02.11.2026), szlif 02.11 po „dużo lepiej”.
   Krój: Hanken Grotesk (jedna rodzina, zmienna grubość 100-900, latin + latin-ext, lokalnie) - spokojny grotesk,
   który w cienkich wersalikach wygląda jak szyld dobrego biura nieruchomości, a w tekście czyta się lekko.
   Kolory: paleta klientki (wytyczna 5: pastelowa zieleń, brąz, ciepła biel) w ROLACH kolorów wzoru:
     żółty wzoru  (#E9B71A, kreski, strzałki, pas kontaktu, boczne zakładki) → szałwia (--akcent*)
     zielony wzoru (#596E0F / #1A7A46, przyciski, aktywna zakładka, PDF, linki) → brąz dębu (--braz*)
   Ruch: czasy i krzywe tylko z tokenów niżej (--t-*, --ease*), wszystko gaśnie przy prefers-reduced-motion (rdzeń). */
@font-face{font-family:"Hanken Grotesk";font-style:normal;font-weight:100 900;font-display:swap;
  src:url(../fonts/hanken-grotesk-latin-ext.woff2) format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Hanken Grotesk";font-style:normal;font-weight:100 900;font-display:swap;
  src:url(../fonts/hanken-grotesk-latin.woff2) format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

:root{
  /* rola ŻÓŁTEGO wzoru: szałwia z liści brzozy */
  --akcent:#9DAE8C;          /* kreska przy nagłówku, strzałki listy (ozdoba) */
  --akcent-jasny:#B9C7AA;
  --akcent-tekst:#D6E4C6;    /* jasna zieleń na ciemnym tle (nazwa osiedla w hero, metraż na kartach) */
  --akcent-ciemny:#5C6B50;   /* przycisk telefonu, boczne zakładki; biały na nim = 5,7:1 */
  --akcent-ciemny-hover:#4B5941;
  --etykieta:#56664A;        /* małe wersaliki nad nagłówkiem; na ciepłej bieli 5,9:1 */
  --pas-od:#627256;          /* pas kontaktu (gradient 35°), biały tekst ≥ 5:1 na całej długości */
  --pas-do:#4A5841;
  /* rola ZIELONEGO wzoru: dąb bagienny z okien osiedla */
  --braz:#5A4535;            /* przyciski, aktywna zakładka, PDF, linki; biały na nim = 9:1 */
  --braz-hover:#73594A;
  /* ciepła biel i szarości */
  --tlo:#FCFAF6;
  --tlo-2:#F4F0E8;           /* sekcja wyróżniona (dostępność) */
  --tlo-szare:#EFECE6;
  --tlo-tabela:#F6F3EE;
  --pas-liczb:#E4DFD6;
  --tekst:#2C2A27;
  --tekst-2:#625E57;
  --linia:#E0DAD0;
  --st-wolny:#3F7A4A;
  --st-rezerwacja:#E2B23C;
  --st-sprzedany:#A33E34;
  --wa:#1E7A46;
  /* układ */
  --wrap:1180px;
  --top-h:84px;              /* pasek stałej wysokości (nie kurczy się) */
  --top-h-stuck:84px;
  --sekcja:clamp(72px,8.5vw,124px);
  --naglowek-dol:clamp(36px,4vw,56px);
  --miara:64ch;
  --cap-gora:9px;            /* od góry pierwszej linii tekstu 18/1,7 do góry wersalików (zmierzone): wyrównanie zdjęć i map do tekstu */
  --r:4px;
  --cien-1:0 1px 2px rgba(44,36,26,.06),0 6px 18px -8px rgba(44,36,26,.18);
  --cien-2:0 2px 4px rgba(44,36,26,.06),0 18px 40px -16px rgba(44,36,26,.32);
  /* ruch: jedne krzywe i czasy na całą stronę */
  --ease:cubic-bezier(.2,.7,.3,1);          /* domowa (rdzeń używa jej w .rv) */
  --ease-expo:cubic-bezier(.16,1,.3,1);     /* mocny start, długie wyhamowanie: wjazdy, wejście */
  --ease-io:cubic-bezier(.65,0,.35,1);
  --t-1:.18s;                /* kolor, obrys */
  --t-2:.32s;                /* tło paska, cień, podniesienie karty */
  --t-3:.7s;                 /* zdjęcie w ramce */
  --t-wjazd:.85s;            /* wejście sekcji */
  --font:"Hanken Grotesk",system-ui,-apple-system,"Segoe UI",sans-serif;
  --fs-h2:clamp(27px,1.25rem + 1.35vw,40px);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-padding-top:calc(var(--top-h) + 16px)}
html,body{overflow-x:clip}
body{font-family:var(--font);color:var(--tekst);background:var(--tlo);font-size:17px;line-height:1.65;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-feature-settings:"kern","liga"}
img{display:block;max-width:100%;height:auto}
a{color:var(--braz);text-underline-offset:.18em;text-decoration-thickness:1px;transition:color var(--t-1) var(--ease)}
a:hover{color:var(--braz-hover)}
.wrap{width:min(var(--wrap),100% - 40px);margin-inline:auto}
h1,h2,h3,h4{font-weight:600;line-height:1.15;text-wrap:balance}
b,strong{font-weight:650}
::selection{background:var(--akcent-tekst);color:var(--tekst)}
:focus-visible{outline:2px solid var(--braz);outline-offset:3px;border-radius:2px}

/* ── WJAZD SEKCJI: dłuższy, z mocnym wyhamowaniem (tylko pod myszą; na dotyku rdzeń zostawia samo przenikanie) ── */
@media (pointer:fine){
  .rv{transform:translateY(26px);transition:opacity var(--t-wjazd) var(--ease-expo),transform var(--t-wjazd) var(--ease-expo)}
}
.kaskada.is-in>*{animation-duration:.7s;animation-timing-function:cubic-bezier(.16,1,.3,1);animation-delay:calc(var(--i,0) * 90ms)}

/* ── NAGŁÓWEK SEKCJI wzoru: pionowa kreska akcentu + etykieta + nagłówek WERSALIKAMI ── */
.hs{position:relative;padding-left:26px;margin-bottom:var(--naglowek-dol);max-width:880px}
.hs::before{content:"";position:absolute;top:2px;bottom:2px;left:0;width:3px;border-radius:2px;background:linear-gradient(180deg,var(--akcent-jasny),var(--akcent-ciemny));transform-origin:top}
.hs.rv::before{transform:scaleY(0);transition:transform 1.1s var(--ease-expo) .15s}
.hs.rv.is-in::before{transform:none}
.hs p{font-size:13px;line-height:1.4;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--etykieta);max-width:none}
.hs h1,.hs h2{font-size:var(--fs-h2);font-weight:600;text-transform:uppercase;letter-spacing:.02em;color:var(--tekst);line-height:1.14}
.hs p + h1,.hs p + h2{margin-top:12px}
/* wariant wzoru bez wersalików („Mieszkania deweloperskie Rybnik”, „Sprawdź dostępne…”) */
.hs-lekki h2{font-size:clamp(26px,1.2rem + 1.1vw,36px);font-weight:500;text-transform:none;letter-spacing:-.005em;line-height:1.18}
.hs-bialy p,.hs-bialy h2{color:#fff}
.hs-bialy::before{background:linear-gradient(180deg,#E3EBD9,var(--akcent-jasny))}
@media (max-width:767px){.hs{padding-left:20px}.hs p{font-size:12px;letter-spacing:.16em}}

/* ── PRZYCISKI: jedna rodzina (ten sam krój, wysokość, promień, czasy); warianty różnią się tylko kolorem ── */
.btn-t{--b-tlo:var(--braz);--b-tekst:#fff;--b-obrys:var(--braz);--b-tlo-h:var(--braz-hover);--b-tekst-h:#fff;--b-obrys-h:var(--braz-hover);
  display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:48px;padding:12px 24px;border-radius:var(--r);
  background:var(--b-tlo);color:var(--b-tekst);border:1.5px solid var(--b-obrys);
  font:600 15px/1.2 var(--font);letter-spacing:.03em;text-decoration:none;cursor:pointer;white-space:nowrap;
  transition:background-color var(--t-1) var(--ease),color var(--t-1) var(--ease),border-color var(--t-1) var(--ease),box-shadow var(--t-2) var(--ease),transform var(--t-2) var(--ease-expo)}
.btn-t:hover{background:var(--b-tlo-h);color:var(--b-tekst-h);border-color:var(--b-obrys-h);box-shadow:0 8px 20px -10px rgba(44,36,26,.45);transform:translateY(-1px)}
.btn-t:active{transform:none;box-shadow:none}
.btn-t:focus-visible{outline:2px solid var(--braz);outline-offset:3px}
.btn-t svg{width:18px;height:18px;flex:none}
.btn-t-pelny{}
.btn-t-obrys{--b-tlo:transparent;--b-tekst:var(--braz);--b-tlo-h:var(--braz);--b-tekst-h:#fff;--b-obrys-h:var(--braz)}
.btn-t-akcent{--b-tlo:var(--akcent-ciemny);--b-obrys:var(--akcent-ciemny);--b-tlo-h:var(--akcent-ciemny-hover);--b-obrys-h:var(--akcent-ciemny-hover)}
.btn-t-szary{--b-tlo:var(--tlo-szare);--b-tekst:var(--tekst);--b-obrys:var(--tlo-szare);--b-tlo-h:#E4DFD6;--b-tekst-h:var(--tekst);--b-obrys-h:#E4DFD6}
.btn-t-wa{--b-tlo:var(--wa);--b-obrys:var(--wa);--b-tlo-h:#17663a;--b-obrys-h:#17663a}
.btn-t-jasny{--b-tlo:#fff;--b-tekst:var(--tekst);--b-obrys:#fff;--b-tlo-h:var(--tlo-2);--b-tekst-h:var(--tekst);--b-obrys-h:var(--tlo-2)}
.btn-duzy{min-height:56px;padding:14px 28px;font-size:16px}
@media (max-width:480px){.btn-duzy{display:flex;width:100%;flex-wrap:wrap;gap:2px 8px;white-space:normal;text-align:center;padding-inline:18px}}
.przyciski-rzad{display:flex;flex-wrap:wrap;gap:10px;margin-top:28px}

/* ── PASEK: jeden rząd, stała wysokość; na hero przezroczysty, po przewinięciu jasne tło z rozmyciem ── */
.top{position:fixed;inset:0 0 auto;z-index:60;height:var(--top-h);color:var(--tekst);background:rgba(252,250,246,0);
  transition:background-color var(--t-2) var(--ease),box-shadow var(--t-2) var(--ease),color var(--t-2) var(--ease)}
.top.is-hidden{transform:none}      /* stała obecność paska (K. 10.10, Strong-Instal) */
.top::before{content:"";position:absolute;inset:0 0 -40px;z-index:-1;pointer-events:none;opacity:0;transition:opacity var(--t-2) var(--ease);
  background:linear-gradient(180deg,rgba(20,18,15,.5),rgba(20,18,15,.18) 60%,rgba(20,18,15,0))}
.top.na-zdjeciu{color:#fff;text-shadow:none}   /* rdzeń daje .na-zdjeciu cień tekstu - na znaku wejścia wyglądałby jak poświata */
html:not(.intro-on) .top.na-zdjeciu:not(.is-stuck) .znak{text-shadow:0 1px 10px rgba(0,0,0,.28)}
html:not(.intro-on) .top.na-zdjeciu:not(.is-stuck) .logo-symbol{filter:drop-shadow(0 1px 6px rgba(0,0,0,.22))}
.top.na-zdjeciu::before{opacity:1}
.top.is-stuck,.top:not(.na-zdjeciu){color:var(--tekst);background:rgba(252,250,246,.92);box-shadow:0 1px 0 var(--linia),0 10px 30px -18px rgba(44,36,26,.35);
  -webkit-backdrop-filter:saturate(1.4) blur(12px);backdrop-filter:saturate(1.4) blur(12px)}
.top.is-stuck::before{opacity:0}
.top-wrap{height:100%;display:flex;align-items:center;gap:24px}
.brand{flex:none;display:flex;align-items:center;color:inherit;text-decoration:none;margin-right:auto}
.brand:hover{color:inherit}
/* LOGO: symbol z Flow (dom z pni brzóz, build.py _symbol) + napis; wszystko w em (kurtyna wejścia powiększa font-size).
   Kolor symbolu przez --zn-pien / --zn-lisc: kolorowy na jasnym tle, biały na zdjęciu hero (pasek przed przewinięciem). */
.logo{--znak-fs:17px;--zn-pien:var(--akcent-ciemny);--zn-lisc:var(--braz);display:inline-flex;align-items:center;gap:.8em;font-size:var(--znak-fs);line-height:1;color:inherit}
.logo-symbol{flex:none;display:block;height:2.4em;width:1.44em;overflow:visible}
.logo-symbol path{transition:fill var(--t-2) var(--ease)}
.zn-pien{fill:var(--zn-pien)}
.zn-lisc{fill:var(--zn-lisc)}
.logo .znak{font-size:1em}
.top.na-zdjeciu:not(.is-stuck) .logo{--zn-pien:#fff;--zn-lisc:#fff}
.top:has(.nawigacja.is-open) .logo{--zn-pien:var(--akcent-ciemny);--zn-lisc:var(--braz)}
/* napis: nazwa rozstrzelona + „Rybnik” między kreskami */
.znak{--znak-fs:17px;display:inline-flex;flex-direction:column;align-items:center;gap:.42em;font-size:var(--znak-fs);line-height:1;white-space:nowrap;color:inherit}
.znak-nazwa{font-weight:600;letter-spacing:.3em;margin-right:-.3em;text-transform:uppercase}
.znak-miasto{display:flex;align-items:center;gap:.75em;font-size:.6em;font-weight:500;letter-spacing:.5em;margin-right:-.5em;text-transform:uppercase;opacity:.9}
.znak-miasto::before,.znak-miasto::after{content:"";width:2.2em;height:1px;background:currentColor;opacity:.7}
.znak-miasto::before{transform-origin:right}
.znak-miasto::after{transform-origin:left;margin-left:-.5em}
.nawigacja{display:flex;align-items:center}
.nawigacja a:not(.btn){padding:10px 14px;font-size:15px;font-weight:500;letter-spacing:.02em;line-height:20px;color:inherit;text-decoration:none;transition:color var(--t-1) var(--ease),opacity var(--t-1) var(--ease)}
.nawigacja a:not(.btn)::after{left:14px;right:14px;bottom:3px;height:1.5px;transition:transform var(--t-2) var(--ease-expo)}
.nawigacja a:not(.btn).is-aktywny::after{transform:scaleX(1)}
.top.na-zdjeciu:not(.is-stuck) .nawigacja a:not(.btn){text-shadow:0 1px 8px rgba(0,0,0,.35)}
.top.is-stuck .nawigacja a:not(.btn):hover,.top:not(.na-zdjeciu) .nawigacja a:not(.btn):hover,
.top.is-stuck .nawigacja a.is-aktywny,.top:not(.na-zdjeciu) .nawigacja a.is-aktywny{color:var(--braz)}
.top-tel{flex:none;min-height:44px;padding:10px 20px;font-size:15px;font-variant-numeric:tabular-nums}
.burger{display:none}
@media (max-width:1100px){
  .nawigacja a:not(.btn){padding:10px 10px}
  .nawigacja a:not(.btn)::after{left:10px;right:10px}
}
@media (max-width:1024px){
  :root{--top-h:72px;--top-h-stuck:72px}
  .logo{--znak-fs:14px}
  .top-wrap{gap:10px}
  .burger{display:inline-flex;align-items:center;gap:10px;height:44px;padding:0 16px 0 14px;border-radius:var(--r);border:1.5px solid currentColor;background:transparent;color:inherit;
    font:600 14px/1 var(--font);letter-spacing:.06em;text-transform:uppercase;cursor:pointer;transition:background-color var(--t-1) var(--ease)}
  .top.na-zdjeciu:not(.is-stuck) .burger{border-color:rgba(255,255,255,.75)}
  .burger i,.burger i::before,.burger i::after{display:block;width:18px;height:1.5px;background:currentColor;position:relative;transition:transform var(--t-2) var(--ease-expo),background-color var(--t-1)}
  .burger i::before,.burger i::after{content:"";position:absolute;left:0}
  .burger i::before{top:-6px}.burger i::after{top:6px}
  .burger[aria-expanded="true"] i{background:transparent}
  .burger[aria-expanded="true"] i::before{transform:translateY(6px) rotate(45deg)}
  .burger[aria-expanded="true"] i::after{transform:translateY(-6px) rotate(-45deg)}
  .js .nawigacja{position:fixed;top:var(--top-h);left:0;right:0;flex-direction:column;align-items:stretch;background:var(--tlo);padding:6px 20px 22px;box-shadow:0 24px 40px -20px rgba(44,36,26,.35);display:none;color:var(--tekst)}
  .js .nawigacja.is-open{display:flex;animation:menu-wjazd .32s var(--ease-expo)}
  .nawigacja a:not(.btn),.top .nawigacja a:not(.btn){display:flex;justify-content:space-between;align-items:center;color:var(--tekst);text-shadow:none;padding:16px 2px;border-bottom:1px solid var(--linia);font-size:18px}
  /* strzałka → w kolorze akcentu przy prawej krawędzi (skill strona-docelowa: menu na telefonie) */
  .nawigacja a:not(.btn)::after,.nawigacja a:not(.btn):hover::after,.nawigacja a:not(.btn).is-aktywny::after{content:"→";position:static;transform:none;background:none;height:auto;width:auto;color:var(--akcent-ciemny);font-size:18px}
  .nawigacja a.is-aktywny{color:var(--braz)!important}
  .top.na-zdjeciu:has(.nawigacja.is-open){color:var(--tekst);background:var(--tlo)}
  .top:has(.nawigacja.is-open)::before{opacity:0}
}
@keyframes menu-wjazd{from{opacity:0;transform:translateY(-8px)}}
@media (max-width:560px){
  .top-tel{width:44px;min-height:44px;padding:0;border-radius:var(--r)}
  .top-tel svg{width:19px;height:19px}
  .top-tel-nr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
}
@media (max-width:360px){.logo{--znak-fs:12.5px}.burger span{display:none}.burger{padding:0 12px}}

/* ── boczne zakładki przy prawej krawędzi (wzór) + „na górę” ── */
.boczne{position:fixed;right:0;top:42%;z-index:50;display:flex;flex-direction:column;gap:10px}
.boczne a{width:50px;height:44px;display:grid;place-items:center;background:var(--akcent-ciemny);color:#fff;border-radius:var(--r) 0 0 var(--r);
  transition:background-color var(--t-1) var(--ease),width var(--t-2) var(--ease-expo)}
.boczne a:hover{background:var(--braz);color:#fff;width:58px}
.boczne svg{width:24px;height:24px}
.na-gore{position:fixed;right:18px;bottom:22px;z-index:50;width:46px;height:46px;display:grid;place-items:center;border-radius:50%;border:1px solid var(--linia);
  background:rgba(252,250,246,.94);color:var(--tekst);cursor:pointer;box-shadow:var(--cien-1);opacity:0;transform:translateY(10px);pointer-events:none;
  transition:opacity var(--t-2) var(--ease),transform var(--t-2) var(--ease-expo),background-color var(--t-1),color var(--t-1)}
.na-gore.is-on{opacity:1;transform:none;pointer-events:auto}
.na-gore:hover{background:var(--braz);color:#fff;border-color:var(--braz)}
.na-gore svg{width:20px;height:20px}
/* telefon: zakładki przy krawędzi zasłaniałyby tekst → okrągłe przyciski w lewym dolnym rogu; telefon jest już w pasku */
@media (max-width:767px){
  .boczne{top:auto;bottom:16px;right:auto;left:12px;flex-direction:row;gap:8px}
  .boczne a{width:46px;height:46px;border-radius:50%;box-shadow:0 6px 16px -6px rgba(0,0,0,.45)}
  .boczne a:hover{width:46px}
  .boczne a[href^="tel:"]{display:none}
  .boczne svg{width:22px;height:22px}
  .na-gore{right:12px;bottom:16px;width:46px;height:46px}
}

/* ── stopka: logo w kolorze + jedna cienka linia jak we wzorze ── */
.stopka{background:var(--tlo);padding:22px 0 24px;font-size:14px;line-height:1.5;color:var(--tekst-2);border-top:1px solid var(--linia)}
.stopka .wrap{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:14px 24px}
.stopka-logo{display:inline-flex;color:var(--tekst);text-decoration:none}
.stopka-logo:hover{color:var(--tekst)}
.stopka-logo .logo{--znak-fs:14px}
.stopka a{color:var(--braz)}
@media (max-width:767px){.stopka{padding-bottom:96px}}

/* ── lightbox (mechanika w rdzeniu) ── */
.lb{position:fixed;inset:0;z-index:90;background:rgba(25,25,22,.94);display:grid;place-items:center;padding:4vh 4vw}
.lb[hidden]{display:none}
.lb img{max-height:84vh;max-width:92vw;width:auto}
.lb-cap{color:#fff;margin-top:.8rem;text-align:center;font-size:.92rem}
.lb button{position:absolute;background:rgba(255,255,255,.14);color:#fff;border:0;width:50px;height:50px;border-radius:50%;font-size:1.5rem;cursor:pointer;transition:background-color var(--t-1)}
.lb button:hover{background:rgba(255,255,255,.26)}
.lb-x{top:16px;right:16px}.lb-p{left:16px;top:50%}.lb-n{right:16px;top:50%}

/* ── mapa Google: obraz + przycisk włączający żywą mapę (rdzeń, blok 6) ── */
.mapa{position:relative;overflow:hidden;background:var(--tlo-szare);cursor:pointer}
.mapa img{width:100%;height:auto}
.mapa .pk-btn{position:absolute;box-shadow:var(--cien-2)}
.mapa .pk-btn:active{transform:translate(-50%,-50%)}
.przypis{font-size:13.5px;color:var(--tekst-2);margin-top:12px;line-height:1.55}

.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.nw{white-space:nowrap}
.stopka-txt>span:not(.sep){white-space:nowrap}
@media (max-width:760px){.stopka-txt .sep{display:none}.stopka-txt>span:not(.sep){display:block;white-space:normal}.stopka-txt>span+span:not(.sep){margin-top:4px}}

/* ── SEKCJE w kolejności wzoru. Rytm: jeden token odstępu (--sekcja), nagłówek → treść (--naglowek-dol), miara tekstu ≤ 64 znaki ── */
.sekcja{padding-block:var(--sekcja)}
.sekcja-bez-gory{padding-top:0}
.sekcja-tlo{background:var(--tlo-2);border-block:1px solid var(--linia)}
main.bez-zdjecia{padding-top:var(--top-h)}
.strona-tekst{padding-block:clamp(56px,6vw,80px) clamp(72px,8vw,110px)}

/* dwie kolumny: zdjęcie + tekst (wzór 540 + 530 px) */
.dwie{display:grid;grid-template-columns:minmax(0,540px) minmax(0,1fr);gap:clamp(32px,4.5vw,64px);align-items:center}
.dwie-gora{align-items:start}
.kadr{position:relative;overflow:hidden;border-radius:var(--r);background:var(--tlo-szare)}
.kadr img{width:100%;height:100%;object-fit:cover;aspect-ratio:540/446;transition:transform var(--t-3) var(--ease-expo)}
.kadr:hover img{transform:scale(1.03)}
.tekst > * + *{margin-top:16px}
.tekst p{font-size:17px;line-height:1.7;max-width:var(--miara)}
.tekst-duzy p{font-size:18px;line-height:1.7}
.tekst-maly p{font-size:16.5px;line-height:1.7}
.akapit-szeroki{font-size:17px;line-height:1.7;margin:0 0 clamp(28px,3vw,40px);max-width:var(--miara)}
.strzalki{list-style:none;display:grid;gap:14px;margin-top:22px}
.strzalki li{position:relative;padding-left:36px;font-size:16.5px;line-height:1.55}
/* strzałka listy wzoru (znak interfejsu, kształt z CSS) */
.strzalki li::before{content:"";position:absolute;left:0;top:.28em;width:20px;height:15px;background:var(--akcent);
  clip-path:polygon(0 38%,55% 38%,55% 0,100% 50%,55% 100%,55% 62%,0 62%)}
.etapy-tyt{font-size:15px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--etykieta);line-height:1.3;margin-top:30px!important}
.etapy{line-height:1.7}
@media (max-width:1024px){.dwie{grid-template-columns:1fr 1fr}}
@media (max-width:860px){
  .dwie{grid-template-columns:minmax(0,1fr);gap:30px}
  .tekst-duzy p{font-size:17px}
}

/* ── HERO: wizualizacja na cały ekran, H1 cienki WERSALIKAMI + nazwa osiedla w kolorze akcentu ── */
.hero{position:relative;min-height:min(860px,max(640px,94vh));min-height:min(860px,max(640px,94svh));display:flex;align-items:center;justify-content:center;text-align:center;color:#fff;isolation:isolate;padding:150px 20px 170px}
.hero-tlo{position:absolute;inset:0;z-index:-1;overflow:hidden;background:#3a3a32}
.hero-tlo img{width:100%;height:100%;object-fit:cover;object-position:50% 60%}
.hero-tlo::after{content:"";position:absolute;inset:0;background:
  radial-gradient(ellipse 70% 55% at 50% 48%,rgba(24,22,18,.38),rgba(24,22,18,0) 75%),
  linear-gradient(180deg,rgba(24,22,18,.42) 0%,rgba(24,22,18,.18) 42%,rgba(24,22,18,.46) 100%)}
.hero h1{font-weight:300;font-size:clamp(40px,1.4rem + 3.6vw,74px);line-height:1.02;letter-spacing:.04em;text-transform:uppercase;text-shadow:0 2px 24px rgba(0,0,0,.28)}
.hero h1 span{display:block;font-weight:600;letter-spacing:-.005em;text-transform:none;color:var(--akcent-tekst);margin-top:.28em;font-size:.86em}
.hero-pod{font-size:clamp(19px,.9rem + .8vw,27px);font-weight:400;letter-spacing:.06em;margin-top:22px;text-shadow:0 2px 14px rgba(0,0,0,.4)}
/* wjazd tekstu hero: po zdjęciu kurtyny (klasa hero-gra; przy powrocie na stronę od razu) */
.js:not(.hero-gra) .hero-srodek > *,.js:not(.hero-gra) .hero h1 span{opacity:0}
.hero-gra .hero-srodek > *,.hero-gra .hero h1 span{animation:hero-wjazd 1s var(--ease-expo) both}
.hero-gra .hero h1 span{animation-delay:.12s}
.hero-gra .hero-pod{animation-delay:.24s}
@keyframes hero-wjazd{from{opacity:0;transform:translateY(22px);filter:blur(8px)}to{opacity:1;transform:none;filter:blur(0)}}
/* trzy karty atutów nachodzące na dół hero (wzór: 3 × 380 px) */
.atuty{position:relative;z-index:2;margin-top:-128px}
.atuty ul{list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(18px,2.4vw,32px)}
.atuty li{position:relative;background:#fff;border-radius:6px;box-shadow:var(--cien-2);padding:30px 30px 32px;text-align:center;display:flex;flex-direction:column;align-items:center;
  transition:transform var(--t-2) var(--ease-expo),box-shadow var(--t-2) var(--ease)}
.atuty li::after{content:"";position:absolute;left:30px;right:30px;top:0;height:2px;background:var(--akcent);transform:scaleX(.18);transition:transform var(--t-3) var(--ease-expo)}
.atuty li:hover{transform:translateY(-4px);box-shadow:0 4px 8px rgba(44,36,26,.06),0 28px 50px -22px rgba(44,36,26,.4)}
.atuty li:hover::after{transform:scaleX(1)}
/* slot ikony z Google Flow (320 × 320 na bieli; multiply zdejmuje biel na każdym jasnym tle) */
.atuty .ikona{display:block;width:84px;height:84px;margin-inline:auto;object-fit:contain;mix-blend-mode:multiply}
/* uwaga K. 02.11 wieczór: ikona, tytuł i tekst w tej samej osi i na tej samej wysokości we wszystkich kartach -
   wiersze karty to podsiatka wspólnej siatki (tytuł w dwóch liniach w jednej karcie przesuwa tekst we wszystkich) */
@supports (grid-template-rows:subgrid){
  .atuty ul{grid-template-rows:auto auto 1fr}
  .atuty li{display:grid;grid-row:span 3;grid-template-rows:subgrid;row-gap:0;justify-items:center;align-content:start}
}
.atuty h3{width:100%;font-size:17px;font-weight:600;letter-spacing:.12em;padding-left:.12em;text-transform:uppercase;text-align:center;text-wrap:balance;color:var(--tekst);line-height:1.3;margin-top:16px;align-self:start}
.atuty p{font-size:16px;line-height:1.6;margin-top:10px;color:var(--tekst-2);max-width:34ch;text-align:center}
/* podstrona elewacji: niższe hero bez kart */
.hero-podstrona{min-height:min(620px,72vh);min-height:min(620px,72svh);padding-bottom:90px}
.hero-podstrona h1{font-size:clamp(36px,1.2rem + 3vw,60px)}
.hero-podstrona .hero-pod{font-size:clamp(17px,.9rem + .3vw,20px);letter-spacing:0;line-height:1.55;max-width:720px;margin-inline:auto}
@media (max-width:1024px){.atuty li{padding:26px 22px 28px}}
@media (max-width:860px){
  .hero{min-height:600px;padding:120px 20px 150px}
  .atuty{margin-top:-96px}
  .atuty ul{grid-template-columns:minmax(0,420px);grid-template-rows:none;justify-content:center;gap:18px}
  .atuty li{display:flex;grid-row:auto}
  .hero-podstrona{min-height:480px;padding-bottom:70px}
}

/* ── pas liczb (wzór: inwestor + wielkie liczby z podpisem WERSALIKAMI) ── */
.liczby{background:var(--pas-liczb);padding-block:clamp(48px,5.5vw,76px)}
.liczby ul{list-style:none;display:flex;justify-content:center;align-items:center;gap:28px clamp(36px,5.5vw,80px);flex-wrap:wrap}
.liczby li{display:flex;flex-direction:column;align-items:flex-start}
.liczby li > b{font-weight:600;font-size:clamp(58px,2rem + 5vw,108px);line-height:.9;color:var(--braz);letter-spacing:-.035em;font-variant-numeric:tabular-nums}
.liczby li > span:not(.znak){font-weight:600;font-size:14px;line-height:1.3;letter-spacing:.16em;text-transform:uppercase;color:var(--tekst);margin-top:12px;max-width:12em}
.liczby-inwestor{align-items:center!important;padding:18px 26px;border:1px solid rgba(90,69,53,.28);border-radius:var(--r)}
.znak-inwestor{--znak-fs:21px;color:var(--braz)}
.znak-inwestor .znak-nazwa{letter-spacing:.14em;margin-right:-.14em}
.liczby-inwestor > span:not(.znak){margin-top:10px!important;font-size:12px!important;color:var(--tekst-2)!important}

/* ── typy mieszkań na wyblakłym tle zdjęcia (wzór: 2 karty z półprzezroczystym paskiem) ── */
.typy-sekcja{position:relative;padding:var(--sekcja) 0 clamp(40px,4vw,56px);isolation:isolate}
.typy-sekcja::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(rgba(252,250,246,.88),rgba(252,250,246,.88)),url(../img/wiz/wiz-osiedle-m.jpg) center/cover}
.typy{display:grid;grid-template-columns:1fr 1fr;gap:clamp(18px,2.5vw,30px)}
.typ{position:relative;display:block;aspect-ratio:555/317;overflow:hidden;color:#fff;text-decoration:none;border-radius:var(--r);box-shadow:var(--cien-1)}
.typ:hover{color:#fff}
.typ img{width:100%;height:100%;object-fit:cover;transition:transform var(--t-3) var(--ease-expo)}
.typ:hover img{transform:scale(1.04)}
.kliknij{position:absolute;top:14px;right:14px;background:rgba(40,38,34,.9);color:#fff;font-size:13px;font-weight:600;letter-spacing:.04em;line-height:1;padding:9px 14px;border-radius:var(--r);transition:background-color var(--t-1) var(--ease)}
.typ:hover .kliknij{background:var(--braz)}
.typ-pasek{position:absolute;left:0;right:0;bottom:0;background:linear-gradient(180deg,rgba(24,22,18,.78),rgba(24,22,18,.9));padding:12px 22px 16px;display:block;transition:padding var(--t-2) var(--ease-expo)}
.typ-pasek b{display:block;font-size:clamp(30px,1.2rem + 1.4vw,44px);font-weight:600;letter-spacing:-.01em;line-height:1.1;color:var(--akcent-tekst)}
.typ-pasek span{display:block;font-weight:500;font-size:clamp(15px,.8rem + .35vw,18px);line-height:1.35;margin-top:3px}
.typ:hover .typ-pasek{padding-bottom:22px}
@media (max-width:760px){.typy{grid-template-columns:1fr}}

/* ── galeria z zakładkami (wzór: aktywna zakładka pełnym kolorem, siatka 2 kolumny) ── */
.zakladki{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:26px}
.zakladki button{font:600 15px/1.2 var(--font);letter-spacing:.03em;min-height:46px;padding:12px 22px;border:1.5px solid var(--tlo-szare);border-radius:var(--r);background:var(--tlo-szare);color:var(--tekst);cursor:pointer;
  transition:background-color var(--t-1) var(--ease),color var(--t-1) var(--ease),border-color var(--t-1) var(--ease)}
.zakladki button:hover{background:#E4DFD6;border-color:#E4DFD6}
.zakladki button[aria-selected="true"]{background:var(--braz);border-color:var(--braz);color:#fff}
.galeria{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.g-kafel{position:relative;display:block;aspect-ratio:565/377;overflow:hidden;background:var(--tlo-szare);border-radius:var(--r)}
.g-kafel img{width:100%;height:100%;object-fit:cover;transition:transform var(--t-3) var(--ease-expo),filter var(--t-2) var(--ease)}
.g-kafel::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(24,22,18,0) 55%,rgba(24,22,18,.28));opacity:0;transition:opacity var(--t-2) var(--ease)}
.g-kafel:hover img{transform:scale(1.04)}
.g-kafel:hover::after{opacity:1}
.g-kafel[hidden]{display:none}
.g-zakladki .g-kafel{animation:kafel-wjazd .5s var(--ease-expo) both}
@keyframes kafel-wjazd{from{opacity:0;transform:translateY(8px)}}
.g-siatka{grid-template-columns:repeat(4,1fr)}
.g-siatka .g-kafel{aspect-ratio:4/3}
.g-wiecej-wrap{text-align:center;margin-top:30px}
@media (max-width:760px){.galeria{grid-template-columns:1fr}.g-siatka{grid-template-columns:1fr 1fr}.zakladki button{font-size:14px;padding:10px 16px}}

/* ── wyposażenie (wzór: rząd ikon z podpisem) ── */
.wyp-tyt{font-size:15px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--etykieta);text-align:center;margin:clamp(44px,5vw,64px) 0 clamp(28px,3vw,40px)}
.wyposazenie{list-style:none;display:flex;flex-wrap:wrap;justify-content:center;gap:34px 20px}
.wyposazenie li{width:196px;display:flex;flex-direction:column;align-items:center;text-align:center}
.wyposazenie img{width:88px;height:88px;object-fit:contain;mix-blend-mode:multiply;transition:transform var(--t-2) var(--ease-expo)}
.wyposazenie li:hover img{transform:translateY(-3px)}
.wyposazenie span{font-size:16px;line-height:1.45;margin-top:10px}
@media (max-width:560px){.wyposazenie{gap:26px 10px}.wyposazenie li{width:calc(50% - 5px)}}

/* ── dwie kolumny tekstu SEO ── */
.kolumny{display:grid;grid-template-columns:1fr 1fr;gap:clamp(36px,5vw,72px)}
.kolumny .hs{margin-bottom:26px}
.kolumny p{font-size:17px;line-height:1.7;max-width:var(--miara)}
.kolumny p + p{margin-top:14px}
@media (max-width:860px){.kolumny{grid-template-columns:1fr;gap:48px}}

/* ── pliki do pobrania (wzór: ikony PDF w kolorze, podpis pod spodem) ── */
.pliki-tyt{font-size:15px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--etykieta);text-align:center;margin-bottom:26px}
.pliki{list-style:none;display:flex;justify-content:center;flex-wrap:wrap;gap:20px 46px}
.pliki a,.pliki .plik-brak{display:flex;flex-direction:column;align-items:center;text-align:center;font-size:16px;font-weight:500;line-height:1.35;color:var(--braz);text-decoration:none;min-width:150px}
.pliki a:hover{color:var(--braz-hover)}
.pliki a:hover .pdf{transform:translateY(-3px)}
.pliki .plik-brak{color:var(--tekst-2)}
.pliki small{font-size:13px;font-weight:400}
.pdf{position:relative;padding:22px 12px 9px;border:2px solid currentColor;border-radius:3px 12px 3px 3px;font:700 10px/1 var(--font);letter-spacing:.06em;margin-bottom:12px;color:var(--akcent-ciemny);transition:transform var(--t-2) var(--ease-expo)}

/* ── O nas (uwaga K. 02.11 wieczór: „rozjechane”): tekst lewo, zdjęcie prawo na wysokość tekstu (górne i dolne krawędzie
   równo), pod spodem karta biura sprzedaży w jednym poziomym rzędzie (⛔ formularza nie ma - wytyczna klientki) ── */
.dwie.o-nas{align-items:stretch}
.o-nas-foto{position:relative;display:block;border-radius:6px;overflow:hidden;min-height:320px}
.o-nas-foto img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 38%;transition:transform var(--t-3) var(--ease-expo)}
.o-nas-foto:hover img{transform:scale(1.03)}
.o-nas-foto span{position:absolute;left:0;right:0;bottom:0;padding:11px 16px;background:rgba(30,28,24,.86);color:#fff;font-size:14px}
@media (min-width:861px){.o-nas-foto{margin-top:var(--cap-gora)}}   /* góra zdjęcia = góra wersalików pierwszej linii tekstu */
.biuro{display:grid;grid-template-columns:minmax(0,1.15fr) auto auto;align-items:center;gap:20px clamp(28px,3.5vw,56px);margin-top:clamp(36px,4vw,56px);
  border:1px solid var(--linia);border-radius:6px;background:#fff;padding:30px clamp(26px,3vw,40px);box-shadow:var(--cien-1)}
.biuro-kontakt .biuro-dol{margin-top:4px}
@media (max-width:1024px){.biuro{grid-template-columns:minmax(0,1fr) auto}.biuro-przyciski{grid-column:1 / -1}}
@media (max-width:860px){.o-nas-foto{min-height:0;aspect-ratio:4/3}.biuro{grid-template-columns:minmax(0,1fr);padding:26px 22px}}
.lk-etyk{font-size:12.5px;font-weight:600;color:var(--etykieta);text-transform:uppercase;letter-spacing:.16em}
.biuro h3{font-size:24px;font-weight:600;letter-spacing:.03em;text-transform:uppercase;margin:6px 0 8px}
.biuro p{font-size:16px;line-height:1.6}
.biuro-tel{display:inline-flex;align-items:center;gap:12px;font-weight:600;font-size:clamp(26px,1rem + 1.2vw,32px);letter-spacing:.01em;font-variant-numeric:tabular-nums;color:var(--tekst);text-decoration:none;white-space:nowrap}
.biuro-tel:hover{color:var(--braz)}
.biuro-tel svg{width:26px;height:26px;color:var(--akcent-ciemny)}
.biuro-przyciski{display:flex;flex-wrap:wrap;gap:10px}
.biuro-dol{font-size:14px!important;color:var(--tekst-2)}

/* ── pas kontaktu na pełnym kolorze (wzór: gradient 35°, kolumny z białą kreską pod nagłówkiem) ── */
.kontakt-pas{background:linear-gradient(35deg,var(--pas-od) 0%,var(--pas-do) 100%);color:#fff;padding:clamp(60px,7vw,96px) 0 clamp(64px,7.5vw,104px)}
.kontakt-kol{display:grid;grid-template-columns:repeat(3,1fr);gap:30px}
.kontakt-kol h3{font-size:15px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;line-height:1.3;position:relative;padding-bottom:16px;margin-bottom:18px}
.kontakt-kol h3::after{content:"";position:absolute;left:0;bottom:0;width:36px;height:2px;background:#fff}
.kontakt-kol p{font-size:17px;line-height:1.7}
.kontakt-kol a{color:#fff}
.kontakt-kol a:hover{color:#E3EBD9}
@media (max-width:860px){.kontakt-kol{grid-template-columns:1fr;gap:34px}}

/* ── mapa Google od krawędzi do krawędzi tuż nad zielonym pasem kontaktu (uwaga K. 02.11 wieczór): bez tła, ramki,
   zaokrągleń i odstępów; obraz → klik = żywa mapa ── */
.mapa-pas{position:relative;margin:0;padding:0;background:none;line-height:0}
.mapa-pas .mapa,.mapa-pas [data-po-kliknieciu]{display:block;padding:0;gap:0;border-radius:0;box-shadow:none;background:none}
.mapa-pas .mapa img{display:block;width:100%;height:auto;aspect-ratio:430/460;object-fit:cover;border-radius:0;transition:filter var(--t-2) var(--ease)}
.mapa-pas .mapa:hover img{filter:saturate(1.1) brightness(1.02)}
.mapa-pas iframe{display:block;width:100%;height:460px;border:0}
.mapa-pas .pk-btn{line-height:1.2;min-height:52px;padding:14px 28px;font-size:16px;box-shadow:0 10px 30px -8px rgba(30,28,24,.55),0 0 0 1px rgba(30,28,24,.08)}
.mapa .pk-btn{right:auto;left:50%;bottom:auto;top:50%;transform:translate(-50%,-50%)}
.mapa .pk-btn:hover{transform:translate(-50%,calc(-50% - 1px))}
@media (min-width:641px){.mapa-pas .mapa img{aspect-ratio:1024/420}.mapa-pas iframe{height:420px}}
@media (min-width:1100px){.mapa-pas .mapa img{aspect-ratio:1366/460}.mapa-pas iframe{height:460px}}
@media (min-width:1400px){.mapa-pas .mapa img{aspect-ratio:1680/500}.mapa-pas iframe{height:500px}}
@media (min-width:1700px){.mapa-pas .mapa img{aspect-ratio:2048/540}.mapa-pas iframe{height:540px}}

/* ── elewacje: kroki pracy, miasta, mapa zasięgu ── */
.kroki{list-style:none;display:grid;grid-template-columns:repeat(4,1fr);gap:24px;counter-reset:krok}
.kroki li{counter-increment:krok;background:#fff;border-radius:6px;box-shadow:var(--cien-1);padding:28px 24px 30px;text-align:center;transition:transform var(--t-2) var(--ease-expo),box-shadow var(--t-2) var(--ease)}
.kroki li:hover{transform:translateY(-3px);box-shadow:var(--cien-2)}
.kroki li::before{content:counter(krok,decimal-leading-zero);display:block;font-weight:300;font-size:44px;line-height:1;color:var(--braz);margin-bottom:12px;font-variant-numeric:tabular-nums}
.kroki h3{font-size:16px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;line-height:1.35}
.kroki p{font-size:15.5px;line-height:1.6;margin-top:10px;color:var(--tekst-2)}
@media (max-width:1024px){.kroki{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.kroki{grid-template-columns:1fr}}
.zasieg-miasta{columns:3;column-gap:30px;display:block}
.zasieg-miasta li{break-inside:avoid;margin-bottom:12px}
.zasieg-pas{margin-top:50px}
.zasieg-pas iframe{width:100%;aspect-ratio:2.75/1;border:0;display:block}
.mapa-zasieg img{width:100%;height:auto}
@media (max-width:640px){.zasieg-miasta{columns:2}.zasieg-pas iframe{aspect-ratio:4/5}}

/* ── polityka, 404 ── */
.prosto > * + *{margin-top:14px}
.prosto p{max-width:min(100%,var(--miara));line-height:1.7}
.prosto h2{font-size:20px;font-weight:600;letter-spacing:.02em;margin-top:34px}
.prosto .hs + h2{margin-top:0}

/* ── DOSTĘPNOŚĆ: plan osiedla + karta lokalu, legenda, ramka plików, filtr, tabela (wzór: „Kliknij w wybrany, dostępny lokal”) ──
   Plan główny = widok osiedla z Google Flow (img/plan/) + wielokąty lokali w SVG o viewBox obrazu (design/plan/plan.json).
   Zapas, gdy plan.json zniknie: makieta SVG narysowana z rysunku Z2 (build.py: makieta()). Kolor pola = status. */
.makieta{display:grid;grid-template-columns:minmax(0,1fr) 310px;gap:20px;align-items:start}
.makieta-plan{position:relative;border:1px solid var(--linia);border-radius:6px;background:#fff;padding:10px;box-shadow:var(--cien-1)}
.makieta-svg{width:100%;height:auto;display:block;font-family:var(--font)}

/* plan z obrazu: obraz i SVG w jednym pudełku o proporcjach obrazu, wielokąty nakładają się co do piksela */
.plan-obraz{position:relative;overflow:hidden;border-radius:3px;background:var(--tlo-szare)}
.plan-obraz img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.plan-obraz .makieta-svg{position:absolute;inset:0;width:100%;height:100%}
.plan-obraz .mk-pole{stroke:#fff;stroke-width:4;stroke-linejoin:round;fill-opacity:.42;transition:fill-opacity var(--t-1) var(--ease),stroke-width var(--t-1) var(--ease)}
.plan-obraz [data-status="wolny"] .mk-pole{fill:#4F9A5C}
.plan-obraz [data-status="rezerwacja"] .mk-pole{fill:#E7B53A}
.plan-obraz [data-status="sprzedany"] .mk-pole{fill:#B2463B}
.plan-obraz .mk-lokal[tabindex]:hover .mk-pole,.plan-obraz .mk-lokal.is-hot .mk-pole,.plan-obraz .mk-lokal:focus-visible .mk-pole{fill-opacity:.7;stroke-width:7}
.plan-obraz .mk-lokal.is-wybrany .mk-pole{fill-opacity:.72;stroke:var(--braz);stroke-width:9}
.plan-obraz .mk-kropka{stroke-width:5}
.mk-nr-obraz{fill:#fff!important;font-weight:700}
.plan-obraz .mk-lokal.is-dim{opacity:.18}

/* makieta zapasowa (bez obrazu) */
.mk-trawa{fill:#F1F3EA}
.mk-drzewa circle{fill:var(--akcent);opacity:.42}
.mk-ulica{fill:#E3DED4}
.mk-os{stroke:#fff;stroke-width:2;stroke-dasharray:14 12}
.mk-ulica-txt,.mk-droga-txt{font-size:14px;font-weight:500;fill:#6A665E;letter-spacing:.08em}
.mk-droga{fill:#E9E5DC}
.mk-ogrod{fill:#E2EAD9}
.mk-plot{stroke:var(--akcent);stroke-width:1.5;stroke-dasharray:4 4}
.mk-parking{fill:#fff;stroke:#BDB6A8;stroke-width:1.2}
.mk-parking-txt{font-size:15px;font-weight:600;fill:#9A9385}
.mk-etap{fill:none;stroke:var(--braz);stroke-width:1.6;stroke-dasharray:7 6;opacity:.7}
.mk-etap-zakladka{fill:var(--braz)}
.mk-etap-txt{font-size:13.5px;font-weight:600;letter-spacing:.04em;fill:#fff}
.mk-bud{fill:none;stroke:var(--tekst);stroke-width:2.5;pointer-events:none}
.mk-sciana{stroke:var(--tekst);stroke-width:2.5}
.mk-polnoc{font-size:13px;font-weight:600;fill:#6A665E}
.mk-pole{stroke:rgba(0,0,0,.14);transition:fill var(--t-1) var(--ease)}
[data-status="wolny"] .mk-pole{fill:#D7E8D3}
[data-status="rezerwacja"] .mk-pole{fill:#F6E7BF}
[data-status="sprzedany"] .mk-pole{fill:#F0D3CF}
.mk-kropka{stroke:#fff;stroke-width:2.5}
[data-status="wolny"] .mk-kropka{fill:var(--st-wolny)}
[data-status="rezerwacja"] .mk-kropka{fill:var(--st-rezerwacja)}
[data-status="sprzedany"] .mk-kropka{fill:var(--st-sprzedany)}
.mk-nr{font-weight:700;font-size:24px;fill:var(--tekst)}
.mk-kond{font-size:14px;font-weight:700;fill:#555}
.mk-lokal[tabindex]{cursor:pointer;outline:none}
/* stany makiety zapasowej (SVG wprost w .makieta-plan; plan z obrazu ma własne wyżej) */
.makieta-plan > .makieta-svg .mk-lokal[tabindex]:hover .mk-pole,.makieta-plan > .makieta-svg .mk-lokal.is-hot .mk-pole{fill:#fff}
.makieta-plan > .makieta-svg .mk-lokal[tabindex]:focus-visible .mk-pole{stroke:var(--braz);stroke-width:3}
.makieta-plan > .makieta-svg .mk-lokal.is-wybrany .mk-pole{fill:#fff;stroke:var(--braz);stroke-width:4}
.mk-lokal.is-dim{opacity:.22}
.mk-lokal{transition:opacity var(--t-2) var(--ease)}

/* dymek nad lokalem (najechanie myszą albo fokus z klawiatury) */
.plan-dymek{position:absolute;z-index:5;left:0;top:0;min-width:200px;max-width:260px;padding:12px 14px 13px;background:rgba(30,28,24,.95);color:#fff;border-radius:var(--r);
  box-shadow:0 14px 30px -12px rgba(0,0,0,.5);font-size:14px;line-height:1.45;pointer-events:none;
  transform:translate(-50%,calc(-100% - 12px));opacity:0;transition:opacity var(--t-1) var(--ease)}
.plan-dymek.is-on{opacity:1}
.plan-dymek::after{content:"";position:absolute;left:50%;bottom:-6px;width:12px;height:12px;background:inherit;transform:translateX(-50%) rotate(45deg)}
.plan-dymek b{display:block;font-size:16px;font-weight:600;letter-spacing:.02em}
.plan-dymek .pd-cena{display:block;font-size:17px;font-weight:600;margin-top:4px;color:var(--akcent-tekst)}
.plan-dymek .pd-st{display:inline-flex;align-items:center;gap:6px;margin-top:4px;font-weight:500}
.plan-dymek .pd-st .st{box-shadow:0 0 0 1.5px rgba(255,255,255,.6)}

/* legenda: próbka = to samo pole co na planie (kolor statusu + kropka) */
.legenda{list-style:none;display:flex;flex-wrap:wrap;align-items:center;gap:8px 20px;margin-top:14px;font-size:14px;color:var(--tekst)}
.legenda li{display:flex;align-items:center;gap:8px}
.lg-pole{position:relative;display:inline-block;width:26px;height:18px;border-radius:3px;flex:none;border:1px solid rgba(0,0,0,.12)}
.lg-pole b{position:absolute;left:50%;top:50%;width:8px;height:8px;margin:-4px 0 0 -4px;border-radius:50%;box-shadow:0 0 0 1.5px #fff}
.lg-pole[data-status="wolny"]{background:#D7E8D3}.lg-pole[data-status="wolny"] b{background:var(--st-wolny)}
.lg-pole[data-status="rezerwacja"]{background:#F6E7BF}.lg-pole[data-status="rezerwacja"] b{background:var(--st-rezerwacja)}
.lg-pole[data-status="sprzedany"]{background:#F0D3CF}.lg-pole[data-status="sprzedany"] b{background:var(--st-sprzedany)}
.lg-odstep{margin-left:8px;padding-left:20px;border-left:1px solid var(--linia)}
.lg-etap{display:inline-block;width:26px;height:16px;border:1.6px dashed var(--braz);border-radius:3px}
.lg-parking{display:inline-grid;place-items:center;width:18px;height:22px;border:1.2px solid #BDB6A8;border-radius:3px;font-style:normal;font-size:11px;font-weight:600;color:#9A9385}
.lg-znak{display:inline-grid;place-items:center;min-width:18px;height:18px;font-size:12px;font-weight:700;color:#555}
.st{display:inline-block;width:10px;height:10px;border-radius:50%;flex:none}
.st-wolny{background:var(--st-wolny)}.st-rezerwacja{background:var(--st-rezerwacja)}.st-sprzedany{background:var(--st-sprzedany)}
.st-txt{display:inline-flex;align-items:center;gap:6px}

/* karta lokalu obok planu */
.lokal-karta{background:#fff;border:1px solid var(--linia);border-radius:6px;padding:24px;position:sticky;top:calc(var(--top-h) + 16px);box-shadow:var(--cien-1)}
.lokal-karta h3{font-size:24px;font-weight:600;letter-spacing:.03em;text-transform:uppercase;margin-top:4px}
.lokal-karta .lk-pusto{color:var(--tekst-2);margin-top:12px;font-size:15.5px;line-height:1.55}
.lokal-karta.is-nowa > *{animation:karta-wjazd .45s var(--ease-expo) both}
.lokal-karta.is-nowa > :nth-child(2){animation-delay:.03s}.lokal-karta.is-nowa > :nth-child(3){animation-delay:.06s}.lokal-karta.is-nowa > :nth-child(n+4){animation-delay:.09s}
@keyframes karta-wjazd{from{opacity:0;transform:translateY(6px)}}
.lk-dane{display:grid;grid-template-columns:auto 1fr;gap:8px 12px;margin:16px 0 18px;padding-block:14px;border-block:1px solid var(--linia);font-size:14.5px}
.lk-dane dt{color:var(--tekst-2)}
.lk-dane dd{font-weight:600;text-align:right}
.lk-cena{font-weight:600;font-size:30px;letter-spacing:-.01em;color:var(--braz);line-height:1.1;font-variant-numeric:tabular-nums}
.lk-cena-m2{font-size:14px;color:var(--tekst-2);margin-top:3px}
.lokal-karta .btn-t{width:100%;margin-top:10px}
.lokal-karta .btn-t:first-of-type{margin-top:16px}
.lk-uwaga{font-size:13px;line-height:1.5;color:var(--tekst-2);margin-top:12px}
@media (max-width:980px){.makieta{grid-template-columns:1fr}.lokal-karta{position:static}}

/* ramka „Pliki do pobrania” pod planem (wzór: obrys w kolorze przycisków) */
.pliki-ramka{margin-top:28px;border:1.5px solid var(--braz);border-radius:6px;background:#fff;padding:16px 20px;display:flex;flex-wrap:wrap;align-items:center;gap:8px 26px}
.pliki-ramka h3{width:100%;font-size:13px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--etykieta)}
.pliki-ramka a{display:inline-flex;align-items:center;gap:8px;font-weight:600;color:var(--braz);text-decoration:none}
.pliki-ramka a:hover{text-decoration:underline}
.pliki-ramka a span{display:inline-grid;place-items:center;width:22px;height:22px;background:var(--braz);color:#fff;border-radius:3px;font-size:13px;transition:transform var(--t-2) var(--ease-expo)}
.pliki-ramka a:hover span{transform:translateY(2px)}
.pliki-ramka .plik-brak{color:var(--tekst-2);font-size:15px}

/* filtr (wzór: etykieta nad listą, szary „Wyczyść”) */
.filtr{display:flex;flex-wrap:wrap;gap:12px;align-items:flex-end;margin:30px 0 14px}
.filtr label{display:grid;gap:5px;font-size:12px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--tekst-2)}
.filtr select{font:500 15px var(--font);letter-spacing:0;text-transform:none;padding:8px 34px 8px 12px;border:1px solid #C9C2B6;border-radius:var(--r);background:#fff;color:var(--tekst);min-height:48px;min-width:132px;cursor:pointer;transition:border-color var(--t-1) var(--ease)}
.filtr select:hover{border-color:var(--braz)}
.filtr .btn-t{min-height:48px}
.filtr-ile{margin-left:auto;font-size:14px;color:var(--tekst-2);align-self:center}

/* tabela (wzór: obramowane komórki, co drugi wiersz szary, pigułki statusu, dwa przyciski) */
.tabela-wrap{overflow-x:auto;background:#fff}
.tabela-wrap:focus-visible{outline:2px solid var(--braz);outline-offset:2px}
.tabela{width:100%;border-collapse:collapse;font-size:14.5px;line-height:1.45;min-width:1000px}
.tabela th,.tabela td{padding:11px 14px;text-align:left;border:1px solid var(--linia);vertical-align:middle}
.tabela thead th{font-size:12px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--tekst-2);background:var(--tlo-tabela);white-space:nowrap}
.tabela tbody tr:nth-child(odd){background:rgba(128,120,100,.05)}
.tabela tbody th{font-weight:600;white-space:nowrap}
.tabela tbody th small{display:block;font-weight:400;font-size:12px;color:var(--tekst-2)}
.tabela .num{white-space:nowrap;font-variant-numeric:tabular-nums}
.tabela tbody tr{cursor:pointer;transition:background-color var(--t-1) var(--ease)}
.tabela tbody tr:hover,.tabela tbody tr.is-hot{background:#EEF2E9}
.tabela tbody tr.is-wybrany{background:#E3EBD9;box-shadow:inset 3px 0 0 var(--akcent-ciemny)}
.tabela tr[hidden]{display:none}
.akcje{white-space:nowrap}
.akcje .btn-t{min-height:38px;padding:8px 14px;font-size:14px}
.akcje .btn-t + .btn-t{margin-left:7px}
.pig{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;font-weight:600;line-height:1;padding:6px 11px;border-radius:20px;white-space:nowrap}
.pig-wolny{background:var(--st-wolny);color:#fff}
.pig-rezerwacja{background:var(--st-rezerwacja);color:#2B2104}
.pig-sprzedany{background:var(--st-sprzedany);color:#fff}

/* ── MAPA OKOLICY: obraz z MapLibre + OpenFreeMap (design/mapa/mapa-okolica.mjs), znaczniki HTML nad obrazem ──
   Pozycje w % z renderu (build.py, OKOLICA_ZN): --xk/--yk kadr „kol” (od 641 px), --xt/--yt kadr „tel”. Wymiary znaczników
   (kropka osiedla R 9 px, dziobek 8 px, punkt 26 px + biała obwódka 2 px, plakietka) = pola kolizji w renderze - zmiana tu
   wymaga zmiany tam i ponownego renderu. */
.lok .tekst>p:first-child{margin-top:0}
@media (min-width:1025px){.dwie.lok{grid-template-columns:minmax(0,1fr) minmax(0,660px);gap:clamp(36px,4.2vw,56px)}}
.mapa-wrap{min-width:0}
@media (min-width:861px){.lok .mapa-wrap{margin-top:var(--cap-gora)}}
.okolica{margin:0}
.ok-mapa{position:relative;border-radius:6px;overflow:hidden;background:#F2EDE4;box-shadow:0 0 0 1px var(--linia),var(--cien-1)}
.ok-mapa picture,.ok-mapa img{display:block;width:100%;height:auto}
.ok-kreski{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.ok-kreski line{stroke:var(--akcent-ciemny);stroke-width:1.3;vector-effect:non-scaling-stroke}
.ok-kreski circle{fill:var(--akcent-ciemny)}
.ok-pkt,.ok-osiedle{--x:var(--xk);--y:var(--yk);position:absolute;left:var(--x);top:var(--y)}
.ok-t{display:none}
@media (max-width:640px){
  .ok-pkt,.ok-osiedle{--x:var(--xt);--y:var(--yt)}
  .ok-k{display:none}.ok-t{display:block}
}
.ok-pkt{width:26px;height:26px;margin:-13px 0 0 -13px;border-radius:50%;background:var(--akcent-ciemny);color:#fff;font:700 13px/26px var(--font);text-align:center;
  font-variant-numeric:tabular-nums;box-shadow:0 0 0 2px #fff,0 3px 8px -2px rgba(44,36,26,.45);cursor:default;
  transition:transform var(--t-2) var(--ease-expo),background-color var(--t-1) var(--ease)}
.ok-pkt.is-hot{transform:scale(1.22);background:var(--braz);z-index:2}
.ok-osiedle{width:0;height:0;z-index:3}
.ok-osiedle::before{content:"";position:absolute;left:-9px;top:-9px;width:12px;height:12px;border:3px solid #fff;border-radius:50%;background:var(--braz);box-shadow:0 2px 6px rgba(44,36,26,.4)}
.ok-osiedle::after{content:"";position:absolute;left:-18px;top:-18px;width:36px;height:36px;border-radius:50%;background:var(--braz);opacity:.16;z-index:-1}
.ok-plak{position:absolute;display:flex;flex-direction:column;gap:2px;padding:8px 14px 9px;border-radius:4px;background:var(--braz);color:#fff;white-space:nowrap;line-height:1.15;
  box-shadow:0 8px 18px -8px rgba(44,36,26,.55)}
.ok-plak b{font-size:13px;font-weight:650;letter-spacing:.1em;text-transform:uppercase}
.ok-plak small{font-size:12px;font-weight:500;letter-spacing:.04em;color:#E9DFD5}
.ok-plak::after{content:"";position:absolute;border:8px solid transparent}
/* strona plakietki względem kropki (wybiera render, osobno dla kadru): góra / dół / prawo / lewo; 17 px = kropka 9 + dziobek 8 */
@media (min-width:641px){
  .ok-osiedle[data-k=gora] .ok-plak{left:0;bottom:17px;transform:translateX(-50%)}
  .ok-osiedle[data-k=gora] .ok-plak::after{left:50%;top:100%;margin-left:-8px;border-top-color:var(--braz);border-bottom:0}
  .ok-osiedle[data-k=dol] .ok-plak{left:0;top:17px;transform:translateX(-50%)}
  .ok-osiedle[data-k=dol] .ok-plak::after{left:50%;bottom:100%;margin-left:-8px;border-bottom-color:var(--braz);border-top:0}
  .ok-osiedle[data-k=prawo] .ok-plak{left:17px;top:0;transform:translateY(-50%)}
  .ok-osiedle[data-k=prawo] .ok-plak::after{right:100%;top:50%;margin-top:-8px;border-right-color:var(--braz);border-left:0}
  .ok-osiedle[data-k=lewo] .ok-plak{right:17px;top:0;transform:translateY(-50%)}
  .ok-osiedle[data-k=lewo] .ok-plak::after{left:100%;top:50%;margin-top:-8px;border-left-color:var(--braz);border-right:0}
}
@media (max-width:640px){
  .ok-osiedle[data-t=gora] .ok-plak{left:0;bottom:17px;transform:translateX(-50%)}
  .ok-osiedle[data-t=gora] .ok-plak::after{left:50%;top:100%;margin-left:-8px;border-top-color:var(--braz);border-bottom:0}
  .ok-osiedle[data-t=dol] .ok-plak{left:0;top:17px;transform:translateX(-50%)}
  .ok-osiedle[data-t=dol] .ok-plak::after{left:50%;bottom:100%;margin-left:-8px;border-bottom-color:var(--braz);border-top:0}
  .ok-osiedle[data-t=prawo] .ok-plak{left:17px;top:0;transform:translateY(-50%)}
  .ok-osiedle[data-t=prawo] .ok-plak::after{right:100%;top:50%;margin-top:-8px;border-right-color:var(--braz);border-left:0}
  .ok-osiedle[data-t=lewo] .ok-plak{right:17px;top:0;transform:translateY(-50%)}
  .ok-osiedle[data-t=lewo] .ok-plak::after{left:100%;top:50%;margin-top:-8px;border-left-color:var(--braz);border-right:0}
}
.ok-atryb{margin-top:8px;font-size:12px;line-height:1.4;color:var(--tekst-2);text-align:right}
.ok-atryb a{color:inherit}
/* lista punktów: siatka pod tekstem i mapą, numer jak na mapie */
.ok-lista{list-style:none;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));column-gap:clamp(20px,2.6vw,40px);margin-top:clamp(36px,4vw,56px);border-top:1px solid var(--linia)}
.ok-lista li{display:flex;align-items:flex-start;gap:12px;padding:16px 6px 17px 0;border-bottom:1px solid var(--linia);transition:background-color var(--t-1) var(--ease)}
.ok-lista li.is-hot{background:linear-gradient(90deg,var(--tlo-2),transparent)}
.ok-lista b{flex:none;display:grid;place-items:center;width:26px;height:26px;border-radius:50%;background:var(--akcent-ciemny);color:#fff;font-size:13px;font-weight:700;
  font-variant-numeric:tabular-nums;transition:background-color var(--t-1) var(--ease)}
.ok-lista li.is-hot b{background:var(--braz)}
.ok-lista span{font-size:16px;font-weight:500;line-height:1.35;padding-top:2px}
.ok-lista small{display:block;margin-top:3px;font-size:14px;font-weight:400;color:var(--tekst-2)}
.ok-przypis{margin-top:14px}
@media (max-width:1024px){.ok-lista{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.ok-lista{grid-template-columns:minmax(0,1fr)}.ok-lista li{padding:13px 0 14px}}

/* ── WEJŚCIE NA STRONĘ (skill wejscie-na-strone): jasna kurtyna z pasów + znak typograficzny ──
   Takty: 1) nazwa wyłania się maską i z rozmycia (0,5 s) → 2) „Rybnik” i kreski (0,46 s, opóźnienie 0,14 s) →
   3) pasy kurtyny zjeżdżają w dół od środka (górna krawędź odsłania pasek pierwsza), znak bieleje i leci do paska po zdjęciu (0,72 s).
   Znak na kurtynie ma PRAWDZIWY większy rozmiar pisma (font-size × k), do paska wraca scale(1/k) < 1 - nigdy nie powiększamy.
   ⛔ Żadnego drop-shadow ani poświaty na znaku; pasek bez backdrop-filter na czas wejścia. Bezpieczniki: build.py (WEJSCIE_*). */
.kurtyna{display:none}
.intro-on .kurtyna{display:flex;position:fixed;inset:0;z-index:70;pointer-events:none}
.kurtyna i{flex:1 1 0;margin-right:-1px;background:var(--tlo);transform-origin:50% 100%;
  transition:transform .56s cubic-bezier(.16,1,.3,1) calc(var(--n) * 28ms)}
.intro-out .kurtyna i{transform:scaleY(0)}
.intro-on .top{z-index:80;background:transparent!important;box-shadow:none!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important}
.intro-on:not(.intro-out) .top::before{opacity:0}
.intro-on.intro-out .top::before{transition-delay:.12s}
.intro-on .nawigacja,.intro-on .top-tel,.intro-on .burger{opacity:0}
.intro-on.intro-out .nawigacja,.intro-on.intro-out .top-tel,.intro-on.intro-out .burger{opacity:1;transition:opacity .45s var(--ease) .3s}
.intro-gotowe .brand{width:var(--i-bw);height:var(--i-bh)}
.intro-gotowe .top .logo{position:fixed;left:50%;top:50%;z-index:81;font-size:calc(var(--znak-fs) * var(--i-k));color:var(--tekst);
  transform:translate(-50%,-50%);transition:transform .72s cubic-bezier(.16,.84,.44,1),color .22s var(--ease)}
/* symbol na kurtynie kolorowy (jasne tło), po zjeździe kurtyny przechodzi w biały na zdjęciu */
.intro-on:not(.intro-out) .top .logo{--zn-pien:var(--akcent-ciemny);--zn-lisc:var(--braz)}
.intro-gotowe .top .logo-symbol{opacity:0;filter:blur(6px);transform:translateY(.3em) scale(.96)}
.intro-gra .top .logo-symbol{opacity:1;filter:blur(0);transform:none;
  transition:opacity .5s var(--ease),filter .5s cubic-bezier(.16,1,.3,1),transform .6s cubic-bezier(.16,1,.3,1)}
.intro-gotowe .top .znak-nazwa{clip-path:inset(-.3em 100% -.3em 0);filter:blur(12px);transform:scale(1.045)}
.intro-gotowe .top .znak-miasto{opacity:0;filter:blur(6px);transform:translateY(.4em)}
.intro-gotowe .top .znak-miasto::before,.intro-gotowe .top .znak-miasto::after{transform:scaleX(0)}
.intro-gra .top .znak-nazwa{clip-path:inset(-.3em -.6em -.3em 0);filter:blur(0);transform:none;
  transition:clip-path .5s cubic-bezier(.16,1,.3,1),filter .5s cubic-bezier(.16,1,.3,1),transform .6s cubic-bezier(.16,1,.3,1)}
.intro-gra .top .znak-miasto{opacity:.9;filter:blur(0);transform:none;
  transition:opacity .46s var(--ease) .14s,filter .46s var(--ease) .14s,transform .46s cubic-bezier(.16,1,.3,1) .14s}
.intro-gra .top .znak-miasto::before,.intro-gra .top .znak-miasto::after{transform:scaleX(1);transition:transform .5s cubic-bezier(.16,1,.3,1) .24s}
.intro-out .top .logo{color:inherit;transform:translate(calc(-50% + var(--i-px)),calc(-50% + var(--i-py))) scale(calc(1 / var(--i-k)))}

/* ══ TELEFON (K. 03.11.2026: „większość ludzi ogląda stronę z telefonu - ogarnij to porządnie”) ══════════════
   Plik ładuje się OSTATNI i nadpisuje układ tylko na wąskich ekranach. Zasady:
   pierwszy ekran = zdjęcie domu + cena + dwa przyciski · krótkie przewijanie (zwarte kafle, liczby w rzędzie,
   galeria w bok) · tabela lokali jako karty, bez przewijania w bok · kontakt w pasku przy kciuku. */

.hero-cta{display:none}
.t-kond{display:none}
.b-txt{display:none}
.btn-t-obrys-bialy{--b-tlo:rgba(255,255,255,.06);--b-tekst:#fff;--b-obrys:rgba(255,255,255,.85);--b-tlo-h:#fff;--b-tekst-h:var(--tekst);--b-obrys-h:#fff}
.hero-gra .hero-cta{animation-delay:.36s}

@media (max-width:760px){
  :root{--sekcja:56px;--naglowek-dol:26px}

  /* ── pierwszy ekran: dom widać od dachu, tekst i przyciski na dole kadru, nic go nie zasłania ── */
  .hero{min-height:max(560px,100vh);min-height:max(560px,100svh);align-items:flex-end;padding:96px 20px 28px}
  .hero-tlo img{object-position:50% 55%}
  .hero-tlo::after{background:linear-gradient(180deg,rgba(24,22,18,.5) 0%,rgba(24,22,18,0) 22%,rgba(24,22,18,0) 38%,rgba(24,22,18,.62) 66%,rgba(24,22,18,.82) 100%)}
  .hero-srodek{width:100%}
  .hero h1{font-size:clamp(28px,8.6vw,36px);line-height:1.06;letter-spacing:.03em}
  .hero h1 span{font-size:clamp(26px,7.8vw,33px);margin-top:.22em}
  .hero-pod{font-size:16.5px;letter-spacing:.02em;margin-top:12px}
  .hero-cta{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:22px}
  .hero-cena{grid-column:1 / -1;font-size:15px;letter-spacing:.04em;margin-bottom:4px;text-shadow:0 1px 10px rgba(0,0,0,.45)}
  .hero-cena b{font-size:22px;font-weight:600;letter-spacing:0;color:var(--akcent-tekst);margin-left:4px;white-space:nowrap}
  .hero-cta .btn-t{min-height:52px;padding-inline:12px;font-size:15px}

  /* ── trzy atuty: jedna biała karta, ikona z lewej, zamiast trzech wysokich kafli ── */
  .atuty{margin-top:0;padding-top:28px}
  .atuty ul{display:block;background:#fff;border-radius:6px;box-shadow:var(--cien-2);padding:2px 18px;max-width:none}
  .atuty li{display:grid;grid-template-columns:50px minmax(0,1fr);grid-template-rows:none;grid-row:auto;column-gap:16px;align-items:start;justify-items:start;
    text-align:left;background:none;box-shadow:none;border-radius:0;padding:20px 0}
  .atuty li + li{border-top:1px solid var(--linia)}
  .atuty li::after{display:none}
  .atuty li:hover{transform:none;box-shadow:none}
  .atuty .ikona{width:50px;height:50px;margin:0}
  .atuty h3{font-size:15px;letter-spacing:.1em;padding-left:0;text-align:left;margin-top:0;align-self:center}
  .atuty p{grid-column:1 / -1;font-size:15.5px;line-height:1.6;margin-top:10px;max-width:none;text-align:left}

  /* ── liczby: inwestor nad, trzy liczby w jednym rzędzie ── */
  .liczby{padding-block:34px 38px}
  .liczby ul{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px 8px;justify-items:center}
  .liczby li{align-items:center;text-align:center}
  .liczby-inwestor{grid-column:1 / -1;padding:12px 22px}
  .znak-inwestor{--znak-fs:16px}
  .liczby li > b{font-size:clamp(34px,10vw,42px)}
  .liczby li > span:not(.znak){font-size:11px;letter-spacing:.1em;margin-top:8px;max-width:11em}

  /* ── galeria: zakładki jak przełącznik w trzech równych polach, zdjęcia przewijane palcem w bok ── */
  .zakladki{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;margin-bottom:16px}
  .zakladki button{min-height:50px;padding:8px 12px;font-size:13.5px;letter-spacing:0;line-height:1.2}
  .g-zakladki{display:flex;gap:10px;overflow-x:auto;scroll-snap-type:x mandatory;margin-inline:-20px;padding:0 20px 4px;scroll-padding-inline:20px;
    scrollbar-width:none;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain}
  .g-zakladki::-webkit-scrollbar{display:none}
  .g-zakladki .g-kafel{flex:0 0 86%;aspect-ratio:4/3;scroll-snap-align:start}

  /* ── wyposażenie: 9 pozycji w trzech kolumnach zamiast pięciu wierszy ── */
  .wyposazenie{gap:24px 8px}
  .wyposazenie li{width:calc((100% - 16px) / 3)}
  .wyposazenie img{width:60px;height:60px}
  .wyposazenie span{font-size:14px;line-height:1.35;margin-top:8px}

  /* ── pliki: na telefonie zostaje jedna ramka przy planie (ta sama treść stała dwa razy w odstępie jednego ekranu) ── */
  #do-pobrania{display:none}

  /* ── biuro sprzedaży: dwa przyciski równej szerokości, jeden pod drugim ── */
  .biuro-przyciski{display:grid;gap:10px}
  .biuro-przyciski .btn-t{width:100%;margin:0}

  /* ── plan i filtr ── */
  .makieta-plan{padding:6px}
  .filtr{display:grid;grid-template-columns:1fr 1fr;gap:10px;align-items:end}
  .filtr select{min-width:0;width:100%}
  .filtr-ile{margin:0;text-align:right}

  /* ── tabela lokali → karty: wszystko widać bez przewijania w bok ── */
  .tabela-wrap{overflow:visible;background:none}
  .tabela{display:block;min-width:0;font-size:15px}
  .tabela caption,.tabela thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .tabela tbody{display:grid;gap:12px}
  .tabela tbody tr,.tabela tbody tr:nth-child(odd){display:grid;grid-template-columns:minmax(0,1fr) auto;
    grid-template-areas:"nr st" "pow cena" "dod cm2" "akc akc";gap:2px 0;padding:14px 16px 16px;
    background:#fff;border:1px solid var(--linia);border-radius:6px;box-shadow:var(--cien-1)}
  .tabela tbody tr:hover,.tabela tbody tr.is-hot{background:#fff}
  .tabela tbody tr.is-wybrany{background:#F3F6EF;border-color:var(--akcent-ciemny);box-shadow:inset 3px 0 0 var(--akcent-ciemny)}
  .tabela th,.tabela td{display:block;padding:0;border:0;min-width:0}
  .tabela tbody th{grid-area:nr;font-size:18px;align-self:stretch;display:flex;align-items:center;flex-wrap:wrap;padding-bottom:16px;margin-bottom:10px;border-bottom:1px solid var(--linia)}
  .tabela tbody th small{display:inline;margin-left:8px;font-size:13px}
  .tabela .t-status{grid-area:st;justify-self:end;align-self:stretch;display:flex;align-items:center;justify-content:flex-end;padding-bottom:16px;margin-bottom:10px;border-bottom:1px solid var(--linia);width:100%;text-align:right}
  .tabela .t-pow{grid-area:pow;font-size:17px;font-weight:600;align-self:end}
  .tabela .t-kond{display:inline;font-weight:400;color:var(--tekst-2);font-size:15px}
  .tabela .t-dod{grid-area:dod;color:var(--tekst-2);font-size:14.5px}
  .tabela .t-kd{display:none}
  .tabela .t-cena{grid-area:cena;font-size:21px;font-weight:600;color:var(--braz);line-height:1.15;text-align:right;align-self:end}
  .tabela .t-cena,.tabela .t-m2{padding-left:12px}
  .tabela .t-m2{grid-area:cm2;text-align:right;color:var(--tekst-2);font-size:14px}
  .tabela .akcje{grid-area:akc;display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:8px}
  .tabela .akcje{margin-top:12px}
  .akcje .btn-t{min-height:46px;width:100%;padding-inline:12px}
  .akcje .btn-t + .btn-t{margin-left:0}
}

/* ── pasek kontaktu przy kciuku (zamiast kółek, które zasłaniały tekst) ── */
@media (max-width:767px){
  .boczne{left:0;right:0;bottom:0;top:auto;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr) 50px;gap:8px;
    padding:10px 12px calc(10px + env(safe-area-inset-bottom));background:rgba(252,250,246,.96);
    -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-top:1px solid var(--linia);box-shadow:0 -12px 26px -16px rgba(44,36,26,.4);
    transform:translateY(110%);transition:transform var(--t-2) var(--ease-expo)}
  .pasek-on .boczne{transform:none}
  .boczne a,.boczne a.b-tel{display:flex;align-items:center;justify-content:center;gap:8px;width:auto;height:48px;border-radius:var(--r);box-shadow:none;
    font:600 15.5px/1 var(--font);letter-spacing:.02em;color:#fff;text-decoration:none}
  .boczne a:hover{width:auto}
  .boczne a.b-tel{background:var(--braz)}
  .boczne a.b-wa{background:var(--wa)}
  .boczne a.b-mail{background:#fff;color:var(--tekst);border:1px solid #D9D2C6}
  .boczne svg{width:20px;height:20px}
  .b-txt{display:inline}
  .na-gore{bottom:calc(80px + env(safe-area-inset-bottom));width:42px;height:42px}
}