@charset "UTF-8";
/* ==========================================================================
   Glow Home — demo WK Digital (wk-digital.pl/005/)
   Jeden arkusz na cały serwis. Kroje pisma z własnego serwera, bez bibliotek
   z zewnątrz, bez ładowania czcionek z Google.
   ========================================================================== */

/* --- Kroje pisma ---------------------------------------------------------- */
@font-face{font-family:Inter;src:url(../fonts/inter-latin-ext.woff2) format("woff2");
  font-weight:100 900;font-style:normal;font-display:swap;
  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:Inter;src:url(../fonts/inter-latin.woff2) format("woff2");
  font-weight:100 900;font-style:normal;font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:Lora;src:url(../fonts/lora-latin-ext.woff2) format("woff2");
  font-weight:400 700;font-style:normal;font-display:swap;
  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:Lora;src:url(../fonts/lora-latin.woff2) format("woff2");
  font-weight:400 700;font-style:normal;font-display:swap;
  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}

/* --- Zmienne -------------------------------------------------------------- */
:root{
  /* Tło przyciemnione 10.09.2026 na prośbę właściciela (było #FBF9F6 / #F4F0E9 / #EBE4D8). */
  --tlo:#F4EFE7;      --tlo-2:#ECE5DA;    --tlo-3:#E2D9CA;
  --ciemne:#191713;   --ciemne-2:#231F1A;
  --atrament:#201E1B; --atrament-2:#575048; --atrament-3:#867D71;
  --mosiadz:#86601C;  --mosiadz-ciemny:#6E4E13; --mosiadz-jasny:#DCB165; --mosiadz-tlo:#F0E4CF;
  --szalwia:#3C574D;  --szalwia-tlo:#EAF0ED;
  /* Kolor znaku firmowego. Celowo niezależny od palety motywu — logo zostaje
     mosiężne w każdym wariancie, bo to znak marki, a nie element dekoracji. */
  --znak:#9C6F22;
  --linia:#DCD1C0;    --linia-ciemna:#3A342C;
  --biel:#fff;

  --font:Inter,-apple-system,"Segoe UI",Roboto,system-ui,sans-serif;
  --font-tyt:Lora,Georgia,"Times New Roman",serif;

  --r:16px; --r-mala:9px; --r-duza:26px;
  --cien:0 1px 2px rgba(32,30,27,.05),0 8px 26px -12px rgba(32,30,27,.14);
  --cien-mocny:0 2px 6px rgba(32,30,27,.07),0 26px 60px -22px rgba(32,30,27,.3);
  --wrap:1200px;
  --pion:clamp(60px,8vw,116px);
}

/* --- Podstawy ------------------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:96px}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
}
body{
  margin:0;background:var(--tlo);color:var(--atrament);
  font-family:var(--font);font-size:1.0625rem;line-height:1.68;
  font-feature-settings:"kern","liga";text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img,svg,video{max-width:100%;height:auto;display:block}
a{color:var(--mosiadz-ciemny);text-decoration-thickness:1px;text-underline-offset:3px}
a:hover{color:var(--atrament)}
:focus-visible{outline:3px solid var(--mosiadz);outline-offset:3px;border-radius:4px}
::selection{background:var(--mosiadz);color:#fff}

h1,h2,h3,h4{font-family:var(--font-tyt);font-weight:600;line-height:1.14;
  letter-spacing:-.015em;margin:0 0 .5em;color:var(--atrament);text-wrap:balance}
h1{font-size:clamp(2.25rem,1.35rem + 3.4vw,4rem)}
h2{font-size:clamp(1.75rem,1.25rem + 1.9vw,2.7rem)}
h3{font-size:clamp(1.2rem,1.06rem + .5vw,1.45rem)}
h4{font-size:1.05rem;font-family:var(--font);font-weight:650;letter-spacing:0}
p{margin:0 0 1.05em;text-wrap:pretty}
p:last-child{margin-bottom:0}
ul,ol{margin:0 0 1.1em;padding-left:1.15em}
li{margin-bottom:.4em}
b,strong{font-weight:650}
hr{border:0;border-top:1px solid var(--linia);margin:var(--pion) 0}

.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:clamp(20px,5vw,40px)}
section{padding-block:var(--pion)}
section.ciasno{padding-block:clamp(40px,5vw,70px)}
.srodek{text-align:center}
.lead{font-size:clamp(1.09rem,1.02rem + .34vw,1.3rem);line-height:1.62;color:var(--atrament-2);max-width:64ch}
.srodek .lead{margin-inline:auto}
.tiny{font-size:.85rem;line-height:1.6;color:var(--atrament-3)}
.przygaszone{color:var(--atrament-2)}
.nadtytul{font-size:.76rem;font-weight:650;letter-spacing:.17em;text-transform:uppercase;
  color:var(--mosiadz);margin:0 0 .85em;display:flex;align-items:center;gap:.7em}
.nadtytul::before{content:"";width:26px;height:2px;background:var(--mosiadz);flex:none}
.srodek .nadtytul{justify-content:center}
.ikona{width:1.15em;height:1.15em;flex:none}
/* Nazwy domen i adresy e-mail nie mogą się łamać na dywizie — inaczej
   „glow-home.pl" rozjeżdża się na „glow-" i „home.pl" w osobnych wierszach. */
.nolam{white-space:nowrap}

.pomin{position:absolute;left:-9999px;top:0;z-index:200;background:var(--ciemne);color:#fff;
  padding:12px 20px;border-radius:0 0 var(--r-mala) 0;font-weight:600}
.pomin:focus{left:0}

/* --- Przyciski ------------------------------------------------------------ */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.6em;
  padding:.82em 1.5em;border-radius:999px;font-weight:600;font-size:.97rem;
  letter-spacing:.005em;text-decoration:none;border:1.5px solid transparent;cursor:pointer;
  transition:background .18s,color .18s,border-color .18s,transform .18s,box-shadow .18s;
  line-height:1.25;text-align:center}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:translateY(0)}
.btn-duzy{padding:1em 1.85em;font-size:1.02rem}
.btn-mosiadz{background:var(--mosiadz);color:#fff;box-shadow:0 8px 22px -12px rgba(156,111,34,.85)}
.btn-mosiadz:hover{background:var(--mosiadz-ciemny);color:#fff;box-shadow:0 14px 30px -14px rgba(156,111,34,.9)}
.btn-obrys{border-color:var(--linia);color:var(--atrament);background:transparent}
.btn-obrys:hover{border-color:var(--atrament);color:var(--atrament);background:var(--tlo-2)}
.btn-ciemny{background:var(--ciemne);color:#fff}
.btn-ciemny:hover{background:#000;color:#fff}
.na-ciemnym .btn-obrys{border-color:rgba(255,255,255,.28);color:#fff}
.na-ciemnym .btn-obrys:hover{border-color:#fff;background:rgba(255,255,255,.09);color:#fff}
.rzad-btn{display:flex;flex-wrap:wrap;gap:14px;align-items:center}

/* --- Pasek demonstracyjny ------------------------------------------------- */
.pasek-demo{background:var(--ciemne);color:#CFC7BA;font-size:.82rem;line-height:1.55;
  padding:9px 0;border-bottom:1px solid var(--linia-ciemna)}
.pasek-demo .wrap{display:flex;flex-wrap:wrap;gap:6px 26px;align-items:center;justify-content:space-between}
.pasek-demo p{margin:0}
.pasek-demo b{color:#fff}
.pasek-demo a{color:var(--mosiadz-jasny);text-decoration:none;border-bottom:1px solid rgba(220,177,101,.4)}
.pasek-demo a:hover{color:#fff;border-color:#fff}
.pasek-demo-linki{display:flex;gap:20px;flex:none}
.pasek-demo .przelacznik-motywu{display:flex;flex-wrap:wrap;align-items:center;
  justify-content:flex-start;gap:6px 12px;
  margin-top:7px;padding-top:7px;border-top:1px solid rgba(255,255,255,.1)}
.przelacznik-motywu>span:first-child{color:#8E867A;letter-spacing:.03em}
.przelacznik-motywu>span:last-child{display:flex;flex-wrap:wrap;gap:6px}
.przelacznik-motywu a{border:1px solid rgba(255,255,255,.16);border-bottom-color:rgba(255,255,255,.16);
  border-radius:999px;padding:3px 12px;color:#CFC7BA;font-weight:550;line-height:1.5}
.przelacznik-motywu a:hover{background:rgba(255,255,255,.08);color:#fff;border-color:rgba(255,255,255,.4)}
.przelacznik-motywu a[aria-current]{background:var(--mosiadz-jasny);border-color:var(--mosiadz-jasny);
  color:#191713;font-weight:650}

/* --- Nagłówek ------------------------------------------------------------- */
.szapka{position:sticky;top:0;z-index:90;background:rgba(244,239,231,.9);
  backdrop-filter:saturate(1.6) blur(14px);-webkit-backdrop-filter:saturate(1.6) blur(14px);
  border-bottom:1px solid transparent;transition:border-color .25s,box-shadow .25s}
.szapka.przyklejona{border-bottom-color:var(--linia);box-shadow:0 6px 24px -20px rgba(32,30,27,.5)}
.szapka-in{display:flex;align-items:center;gap:22px;min-height:78px}
.marka{flex:none;display:flex;align-items:center;gap:11px;text-decoration:none;color:inherit}
/* Godło jest rysunkiem wektorowym dziedziczącym kolor — samo dopasowuje się do motywu. */
.godlo{width:auto;height:46px;flex:none;transition:height .25s;color:var(--znak);overflow:visible}
.marka img{width:auto;height:46px;transition:height .25s;flex:none}
.marka-napis{display:flex;flex-direction:column;line-height:1}
.marka-napis b{font-family:var(--font-tyt);font-size:1.32rem;font-weight:600;letter-spacing:.055em;
  color:var(--atrament);text-transform:uppercase;transition:font-size .25s}
.marka-napis em{font-style:normal;font-size:.63rem;font-weight:600;letter-spacing:.22em;
  text-transform:uppercase;color:var(--mosiadz);margin-top:5px}
.szapka.przyklejona .marka img{height:38px}
.szapka.przyklejona .godlo{height:38px}
.szapka.przyklejona .marka-napis b{font-size:1.15rem}
.marka-stopka{margin:0 0 16px}
.marka-stopka .marka-napis b{color:#fff}
.marka-stopka .marka-napis em{color:#DCB165}
.marka-stopka img{height:52px}
.marka-stopka .godlo{height:52px;color:#DCB165}

.nawigacja{margin-left:auto;display:flex;align-items:center;gap:26px}
.nawigacja ul{display:flex;gap:4px;list-style:none;margin:0;padding:0}
.nawigacja li{margin:0}
.nawigacja ul a{display:block;padding:.55em .8em;border-radius:var(--r-mala);
  color:var(--atrament);text-decoration:none;font-weight:550;font-size:.97rem;
  white-space:nowrap;transition:background .16s,color .16s}
.nawigacja ul a:hover{background:var(--tlo-2)}
.nawigacja ul a[aria-current=page]{color:var(--mosiadz-ciemny);background:var(--mosiadz-tlo)}
.nawigacja-kontakt{display:flex;gap:10px;align-items:center}
.nawigacja-kontakt .btn{padding:.66em 1.1em;font-size:.92rem;white-space:nowrap}
/* Przy ciasnym nagłówku menu ma się zwężać, a nie łamać pozycje na dwie linie. */
@media (min-width:881px) and (max-width:1180px){
  .szapka-in{gap:14px}
  .nawigacja{gap:14px}
  .nawigacja ul a{padding:.55em .6em;font-size:.93rem}
  .nawigacja-kontakt .btn{padding:.62em .95em;font-size:.87rem}
  .marka-napis b{font-size:1.18rem}
  .godlo{height:40px}
}
.szapka-tel{display:none}

.hamburger{display:none;width:46px;height:46px;border:1px solid var(--linia);background:var(--biel);
  border-radius:var(--r-mala);padding:0;cursor:pointer;flex-direction:column;
  align-items:center;justify-content:center;gap:5px;flex:none}
.hamburger span{display:block;width:20px;height:2px;background:var(--atrament);border-radius:2px;
  transition:transform .25s,opacity .18s}
.hamburger[aria-expanded=true] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.hamburger[aria-expanded=true] span:nth-child(2){opacity:0}
.hamburger[aria-expanded=true] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* --- Sekcja powitalna ----------------------------------------------------- */
.hero{padding-block:clamp(38px,5vw,74px) clamp(50px,6vw,90px);position:relative;overflow:hidden}
.hero::before{content:"";position:absolute;inset:auto -20% 40% 42%;height:520px;
  background:radial-gradient(closest-side,rgba(156,111,34,.09),transparent);pointer-events:none}
.hero-in{display:grid;grid-template-columns:1.06fr .94fr;gap:clamp(34px,4.5vw,72px);align-items:center;position:relative}
.hero h1{margin-bottom:.34em}
.hero h1 em{font-style:normal;color:var(--mosiadz);display:block}
.hero .lead{margin-bottom:1.7em}
.hero-zaufanie{display:flex;flex-wrap:wrap;gap:10px 26px;margin-top:2.2em;
  padding-top:1.6em;border-top:1px solid var(--linia);list-style:none;padding-left:0}
.hero-zaufanie li{display:flex;align-items:center;gap:.5em;font-size:.9rem;font-weight:550;
  color:var(--atrament-2);margin:0}
.hero-zaufanie .ikona{color:var(--mosiadz);width:1.15rem;height:1.15rem}

.hero-obraz{position:relative}
.hero-obraz>img{width:100%;aspect-ratio:3/4;object-fit:cover;object-position:center 62%;border-radius:var(--r-duza);
  box-shadow:var(--cien-mocny)}
.hero-plakietka{position:absolute;left:-26px;bottom:38px;background:var(--biel);
  border:1px solid var(--linia);border-radius:var(--r);padding:16px 20px;box-shadow:var(--cien-mocny);
  max-width:230px}
.hero-plakietka b{display:block;font-family:var(--font-tyt);font-size:1.85rem;line-height:1;
  color:var(--mosiadz);margin-bottom:4px}
.hero-plakietka span{font-size:.83rem;line-height:1.45;color:var(--atrament-2);display:block}
.hero-podpis{position:absolute;right:18px;top:18px;background:rgba(25,23,19,.72);color:#fff;
  backdrop-filter:blur(6px);font-size:.74rem;padding:6px 12px;border-radius:999px;letter-spacing:.02em}

/* --- Siatki i karty ------------------------------------------------------- */
.siatka{display:grid;gap:clamp(18px,2.2vw,26px)}
.k2{grid-template-columns:repeat(2,1fr)}
.k3{grid-template-columns:repeat(3,1fr)}
.k4{grid-template-columns:repeat(4,1fr)}
.naglowek-sekcji{max-width:66ch;margin-bottom:clamp(30px,4vw,52px)}
.naglowek-sekcji.srodek{margin-inline:auto}
.naglowek-sekcji h2{margin-bottom:.35em}

.karta{background:var(--biel);border:1px solid var(--linia);border-radius:var(--r);
  padding:clamp(22px,2.4vw,30px);transition:transform .22s,box-shadow .22s,border-color .22s}
.karta:hover{transform:translateY(-3px);box-shadow:var(--cien);border-color:#D9CFBD}
.karta h3{margin-bottom:.45em}
.karta p{color:var(--atrament-2);font-size:.97rem;margin:0}
.karta-ikona{width:46px;height:46px;border-radius:12px;background:var(--mosiadz-tlo);
  color:var(--mosiadz-ciemny);display:grid;place-items:center;margin-bottom:16px}
.karta-ikona .ikona{width:23px;height:23px}

/* --- Style łazienek ------------------------------------------------------- */
.style-siatka{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2vw,24px)}
.styl{position:relative;border-radius:var(--r);overflow:hidden;background:var(--ciemne);
  display:block;text-decoration:none;isolation:isolate}
.styl img{width:100%;aspect-ratio:3/4;object-fit:cover;transition:transform .6s cubic-bezier(.2,.7,.3,1)}
.styl:hover img{transform:scale(1.06)}
.styl::after{content:"";position:absolute;inset:0;
  background:linear-gradient(to top,rgba(20,18,15,.9) 0%,rgba(20,18,15,.42) 38%,transparent 68%)}
.styl-tekst{position:absolute;left:0;right:0;bottom:0;padding:24px;z-index:1;color:#fff}
.styl-tekst h3{color:#fff;font-family:var(--font);font-weight:650;font-size:1.06rem;
  letter-spacing:.06em;text-transform:uppercase;margin-bottom:.35em}
.styl-tekst p{color:rgba(255,255,255,.82);font-size:.92rem;margin:0}

/* --- Zakres prac (10 etapów) ---------------------------------------------- */
/* Linie rysujemy cieniem wewnątrz komórek, a nie odstępem w siatce — dzięki temu
   niepełny ostatni wiersz nie zostawia szarej dziury. */
.zakres{display:grid;grid-template-columns:repeat(auto-fill,minmax(268px,1fr));gap:0;
  background:var(--tlo);border:1px solid var(--linia);border-radius:var(--r);overflow:hidden}
.zakres-poz{background:var(--tlo);padding:clamp(22px,2.3vw,30px);transition:background .2s;
  box-shadow:inset -1px -1px 0 var(--linia)}
.zakres-poz:hover{background:var(--biel)}
.zakres-nr{font-family:var(--font-tyt);font-size:.98rem;font-weight:600;color:var(--mosiadz);
  display:block;margin-bottom:.9em;letter-spacing:.06em}
.zakres-poz h3,.zakres-poz .zakres-tyt{font-family:var(--font);font-size:1.03rem;font-weight:650;letter-spacing:.03em;
  text-transform:uppercase;margin-bottom:.5em}
.zakres-poz p{font-size:.94rem;color:var(--atrament-2);margin:0}

/* --- Kroki współpracy ----------------------------------------------------- */
.kroki{list-style:none;padding:0;margin:0;display:grid;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,164px),1fr));gap:clamp(16px,1.8vw,24px)}
.kroki li{margin:0;position:relative;padding-top:30px}
.kroki li::before{content:"";position:absolute;top:13px;left:0;right:0;height:1px;background:var(--linia)}
.kroki li::after{content:"";position:absolute;top:8px;left:0;width:11px;height:11px;border-radius:50%;
  background:var(--tlo);border:2.5px solid var(--mosiadz)}
.kroki li:last-child::before{background:linear-gradient(to right,var(--linia) 40%,transparent)}
.krok-nr{font-size:.74rem;font-weight:700;letter-spacing:.15em;color:var(--mosiadz);display:block;margin-bottom:.5em}
.kroki h3{font-family:var(--font);font-size:1.02rem;font-weight:650;margin-bottom:.4em}
.kroki p{font-size:.93rem;color:var(--atrament-2);margin:0}

/* --- Galeria -------------------------------------------------------------- */
.galeria{display:grid;grid-template-columns:repeat(auto-fill,minmax(228px,1fr));gap:clamp(12px,1.4vw,18px)}
.galeria-poz{position:relative;margin:0;border-radius:var(--r-mala);overflow:hidden;
  background:var(--tlo-3);cursor:zoom-in;border:0;padding:0;display:block;width:100%}
.galeria-poz img{width:100%;aspect-ratio:3/4;object-fit:cover;
  transition:transform .55s cubic-bezier(.2,.7,.3,1),filter .3s}
.galeria-poz:hover img{transform:scale(1.05)}
.galeria-poz::after{content:"";position:absolute;inset:0;
  background:linear-gradient(to top,rgba(20,18,15,.55),transparent 46%);opacity:0;transition:opacity .3s}
.galeria-poz:hover::after,.galeria-poz:focus-visible::after{opacity:1}
.galeria-lupa{position:absolute;right:12px;bottom:12px;z-index:2;width:34px;height:34px;
  border-radius:50%;background:rgba(255,255,255,.94);color:var(--atrament);display:grid;place-items:center;
  opacity:0;transform:translateY(6px);transition:opacity .3s,transform .3s}
.galeria-poz:hover .galeria-lupa,.galeria-poz:focus-visible .galeria-lupa{opacity:1;transform:none}
.galeria-lupa svg{width:17px;height:17px}
.galeria-szeroka{grid-column:span 2;grid-row:span 2}

/* Podgląd zdjęcia */
.podglad{position:fixed;inset:0;z-index:150;background:rgba(14,12,10,.97);
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  display:none;align-items:center;justify-content:center;padding:clamp(14px,3vw,44px)}
.podglad[open]{display:flex}
.podglad img{max-width:min(100%,860px);max-height:82vh;width:auto;border-radius:var(--r-mala);
  box-shadow:0 30px 80px -30px #000}
.podglad-opis{position:absolute;left:0;right:0;bottom:clamp(14px,3vw,30px);text-align:center;
  color:rgba(255,255,255,.8);font-size:.88rem;padding-inline:20px}
.podglad-x,.podglad-nawi{position:absolute;background:rgba(255,255,255,.1);border:0;color:#fff;
  width:48px;height:48px;border-radius:50%;cursor:pointer;display:grid;place-items:center;
  transition:background .2s;font-size:0}
.podglad-x:hover,.podglad-nawi:hover{background:rgba(255,255,255,.24)}
.podglad-x{top:clamp(14px,3vw,26px);right:clamp(14px,3vw,26px)}
.podglad-nawi svg,.podglad-x svg{width:22px;height:22px}
.podglad-prev{left:clamp(10px,2vw,26px);top:50%;transform:translateY(-50%)}
.podglad-next{right:clamp(10px,2vw,26px);top:50%;transform:translateY(-50%)}

/* --- Projekty ------------------------------------------------------------- */
.projekt{display:grid;grid-template-columns:1fr 1fr;gap:clamp(26px,3.5vw,58px);align-items:center}
.projekt+.projekt{margin-top:clamp(40px,5vw,76px);padding-top:clamp(40px,5vw,76px);border-top:1px solid var(--linia)}
.projekt:nth-child(even) .projekt-foto{order:-1}
.projekt-foto{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.projekt-foto img{width:100%;aspect-ratio:3/4;object-fit:cover;border-radius:var(--r-mala)}
.projekt-foto img:first-child{grid-row:span 2;aspect-ratio:3/5}
.plakietka{display:inline-flex;align-items:center;gap:.5em;background:var(--mosiadz-tlo);
  color:var(--mosiadz-ciemny);font-size:.78rem;font-weight:650;letter-spacing:.05em;
  text-transform:uppercase;padding:.42em .95em;border-radius:999px;margin-bottom:1em}

/* --- Mapa ----------------------------------------------------------------- */
.mapa-sekcja{background:var(--tlo-2);border-block:1px solid var(--linia)}
.mapa-in{display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(30px,4vw,64px);align-items:center}
.mapa-rama{background:var(--biel);border:1px solid var(--linia);border-radius:var(--r);
  padding:clamp(12px,1.6vw,22px);box-shadow:var(--cien)}
.mapa{width:100%;height:auto;font-family:var(--font)}
.mapa-kregi circle{fill:none;stroke:var(--mosiadz);stroke-opacity:.3;stroke-width:1.2;stroke-dasharray:5 7}
.mapa-km{fill:var(--mosiadz);fill-opacity:.75;font-size:12px;font-weight:600;text-anchor:middle;letter-spacing:.05em}
.mapa-nici line{stroke:var(--atrament-3);stroke-opacity:.42;stroke-width:1.3;stroke-dasharray:3 6}
.mapa-pin .mapa-kropka{fill:var(--mosiadz);transition:r .2s}
.mapa-pin:hover .mapa-kropka{r:8}
.mapa-etykieta{fill:var(--atrament);font-size:15px;font-weight:600}
.mapa-dystans{fill:var(--atrament-3);font-size:12px;font-weight:500}
.mapa-baza .mapa-kropka{fill:var(--mosiadz);stroke:var(--biel);stroke-width:3.5}
.mapa-etykieta-baza{font-size:17px;font-weight:700;fill:var(--atrament)}
.mapa-podpis{fill:var(--mosiadz);font-size:12px;font-weight:600;letter-spacing:.09em;text-transform:uppercase}
.mapa-puls{fill:var(--mosiadz);fill-opacity:.14;animation:puls 3.4s ease-out infinite}
@keyframes puls{0%{r:14;fill-opacity:.28}70%{r:34;fill-opacity:0}100%{r:34;fill-opacity:0}}
.mapa-realizacja .mapa-kropka{fill:var(--biel);stroke:var(--szalwia);stroke-width:2.6}
.mapa-realizacja .mapa-etykieta{fill:var(--szalwia)}
.mapa-legenda{list-style:none;padding:0;margin:22px 0 0;display:flex;flex-wrap:wrap;gap:8px 24px;font-size:.87rem}
.mapa-legenda li{display:flex;align-items:center;gap:.6em;color:var(--atrament-2);margin:0}
.mapa-znak{width:12px;height:12px;border-radius:50%;flex:none}
.mapa-znak-baza{background:var(--mosiadz);box-shadow:0 0 0 3px rgba(156,111,34,.2)}
.mapa-znak-miasto{background:var(--mosiadz)}
.mapa-znak-real{background:var(--biel);border:2.5px solid var(--szalwia)}
.miasta-lista{list-style:none;padding:0;margin:0 0 26px;display:flex;flex-wrap:wrap;gap:9px}
.miasta-lista li{margin:0}
.miasta-lista span{display:inline-flex;align-items:center;gap:.45em;background:var(--biel);
  border:1px solid var(--linia);border-radius:999px;padding:.42em 1em;font-size:.9rem;font-weight:550}
.miasta-lista .ikona{color:var(--mosiadz);width:14px;height:14px}

/* --- Pytania i odpowiedzi ------------------------------------------------- */
.faq{max-width:840px;margin-inline:auto;border-top:1px solid var(--linia)}
.faq details{border-bottom:1px solid var(--linia)}
.faq summary{list-style:none;cursor:pointer;padding:1.15em 46px 1.15em 0;position:relative;
  font-weight:600;font-size:1.06rem;font-family:var(--font-tyt);color:var(--atrament)}
.faq summary::-webkit-details-marker{display:none}
.faq summary:hover{color:var(--mosiadz-ciemny)}
.faq summary::after{content:"";position:absolute;right:8px;top:50%;width:11px;height:11px;
  border-right:2px solid var(--mosiadz);border-bottom:2px solid var(--mosiadz);
  transform:translateY(-70%) rotate(45deg);transition:transform .25s}
.faq details[open] summary::after{transform:translateY(-30%) rotate(-135deg)}
.faq-tresc{padding:0 0 1.4em;color:var(--atrament-2);max-width:70ch}
.faq-tresc p{margin-bottom:.7em}

/* --- Pas wezwania --------------------------------------------------------- */
.cta-pas{background:var(--ciemne);color:#EFE9DF;position:relative;overflow:hidden}
.cta-pas::before{content:"";position:absolute;inset:-40% -10% auto auto;width:600px;height:600px;
  background:radial-gradient(closest-side,rgba(220,177,101,.16),transparent);pointer-events:none}
.cta-pas h2{color:#fff;margin-bottom:.4em}
.cta-pas .lead{color:rgba(239,233,223,.78)}
.cta-pas .nadtytul{color:var(--mosiadz-jasny)}
.cta-pas .nadtytul::before{background:var(--mosiadz-jasny)}
.cta-pas-in{display:grid;grid-template-columns:1.35fr .65fr;gap:clamp(28px,4vw,60px);
  align-items:center;position:relative}
.cta-pas-btn{display:flex;flex-direction:column;gap:12px;align-items:stretch}
.cta-pas-btn .btn{width:100%}
.cta-pas-btn .btn-mosiadz{background:var(--mosiadz-jasny);color:var(--ciemne)}
.cta-pas-btn .btn-mosiadz:hover{background:#fff;color:var(--ciemne)}
.cta-pas-btn .btn-obrys{border-color:rgba(255,255,255,.3);color:#fff}
.cta-pas-btn .btn-obrys:hover{background:rgba(255,255,255,.1);border-color:#fff}
.cta-pas-btn .tiny{color:rgba(239,233,223,.55);text-align:center;margin-top:2px}

/* --- Nagłówek podstrony --------------------------------------------------- */
.czolo{padding-block:clamp(34px,4.5vw,64px) clamp(28px,3.5vw,48px);
  background:linear-gradient(to bottom,var(--tlo-2),var(--tlo));border-bottom:1px solid var(--linia)}
.czolo h1{margin-bottom:.35em;max-width:20ch}
.okruszki{display:flex;flex-wrap:wrap;gap:.5em;font-size:.84rem;color:var(--atrament-3);margin-bottom:1.6em}
.okruszki a{color:var(--atrament-3);text-decoration:none}
.okruszki a:hover{color:var(--mosiadz-ciemny);text-decoration:underline}

/* --- Tekst ciągły (analiza, oferta, polityka) ----------------------------- */
.proza{max-width:74ch;margin-inline:auto}
.proza.szeroka{max-width:900px}
.proza h2{margin-top:2.1em;padding-top:.2em}
.proza h2:first-child{margin-top:0}
.proza h3{margin-top:1.9em;font-family:var(--font);font-weight:650;font-size:1.13rem}
.proza ul,.proza ol{padding-left:1.3em}
.proza li{margin-bottom:.55em}
.proza li::marker{color:var(--mosiadz)}
.proza table{width:100%;border-collapse:collapse;margin:1.5em 0;font-size:.94rem}
.proza th,.proza td{text-align:left;padding:.72em .9em;border-bottom:1px solid var(--linia);vertical-align:top}
.proza th{font-weight:650;background:var(--tlo-2);font-size:.85rem;letter-spacing:.03em;text-transform:uppercase}
.tabela-przewijana{overflow-x:auto;margin:1.5em 0;-webkit-overflow-scrolling:touch}
.tabela-przewijana table{margin:0;min-width:560px}

/* --- Znaleziska (analiza) ------------------------------------------------- */
.wynik{border:1px solid var(--linia);border-left:4px solid var(--mosiadz);border-radius:var(--r-mala);
  background:var(--biel);padding:clamp(18px,2vw,26px);margin:1.2em 0}
.wynik h3{margin-top:0;margin-bottom:.5em;display:flex;align-items:flex-start;gap:.6em;font-size:1.08rem}
.wynik p:last-child{margin-bottom:0}
.wynik-krytyczny{border-left-color:#B4402C}
.wynik-wazny{border-left-color:#C2820F}
.wynik-drobny{border-left-color:var(--szalwia)}
.waga{display:inline-flex;align-items:center;font-size:.68rem;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;padding:.32em .7em;border-radius:999px;white-space:nowrap;flex:none;margin-top:.25em}
.waga-krytyczny{background:#FBE9E5;color:#8E2E1D}
.waga-wazny{background:#FCF1DC;color:#8A5A05}
.waga-drobny{background:var(--szalwia-tlo);color:var(--szalwia)}
.wynik-tresc{margin-top:.7em}
.wynik dl{margin:.9em 0 0;display:grid;grid-template-columns:auto 1fr;gap:.35em 1em;font-size:.93rem}
.wynik dt{font-weight:650;color:var(--atrament-3);white-space:nowrap}
.wynik dd{margin:0;color:var(--atrament-2)}
code{font-family:ui-monospace,"Cascadia Mono",Menlo,Consolas,monospace;font-size:.88em;
  background:var(--tlo-3);padding:.15em .42em;border-radius:4px;word-break:break-word}
.podsumowanie{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:1px;
  background:var(--linia);border:1px solid var(--linia);border-radius:var(--r);
  overflow:hidden;margin:2em 0}
.podsumowanie div{background:var(--biel);padding:22px 20px;text-align:center}
.podsumowanie b{display:block;font-family:var(--font-tyt);font-size:2.3rem;line-height:1;
  color:var(--mosiadz);margin-bottom:6px}
.podsumowanie span{font-size:.85rem;color:var(--atrament-2);line-height:1.4;display:block}

/* --- Cennik --------------------------------------------------------------- */
.warianty{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(18px,2.4vw,28px);margin:2em 0}
.wariant{border:1px solid var(--linia);border-radius:var(--r);background:var(--biel);
  padding:clamp(24px,2.6vw,34px);display:flex;flex-direction:column}
.wariant-polecany{border-color:var(--mosiadz);box-shadow:0 0 0 3px var(--mosiadz-tlo)}
.wariant h3{margin-top:0}
.wariant-kwota{font-family:var(--font-tyt);font-size:2.6rem;line-height:1;color:var(--atrament);margin:.2em 0 .1em}
.wariant-kwota small{font-size:1rem;font-family:var(--font);color:var(--atrament-3);font-weight:500}
.wariant ul{list-style:none;padding:0;margin:1.3em 0 0}
.wariant li{display:flex;gap:.65em;align-items:flex-start;font-size:.95rem;margin-bottom:.7em;color:var(--atrament-2)}
.wariant li .ikona{color:var(--mosiadz);margin-top:.25em;width:1.05rem;height:1.05rem}
.wariant-stopka{margin-top:auto;padding-top:1.5em}
.cennik-poz{display:flex;gap:20px;justify-content:space-between;align-items:flex-start;
  padding:1.1em 0;border-bottom:1px solid var(--linia)}
.cennik-poz h3{margin:0 0 .3em;font-size:1.05rem;font-family:var(--font);font-weight:650}
.cennik-poz p{margin:0;font-size:.94rem;color:var(--atrament-2)}
.cennik-kwota{font-family:var(--font-tyt);font-size:1.5rem;font-weight:600;color:var(--mosiadz);
  white-space:nowrap;flex:none;text-align:right}

/* --- Formularz ------------------------------------------------------------ */
.formularz{display:grid;grid-template-columns:repeat(2,1fr);gap:18px}
.pole{display:flex;flex-direction:column;gap:7px}
.pole-szerokie{grid-column:1/-1}
.pole label{font-weight:600;font-size:.9rem}
.pole label .wym{color:#B4402C}
.pole input,.pole select,.pole textarea{font:inherit;font-size:1rem;padding:.78em .95em;
  border:1.5px solid var(--linia);border-radius:var(--r-mala);background:var(--biel);
  color:var(--atrament);width:100%;transition:border-color .18s,box-shadow .18s}
.pole textarea{min-height:140px;resize:vertical}
.pole input:focus,.pole select:focus,.pole textarea:focus{outline:0;border-color:var(--mosiadz);
  box-shadow:0 0 0 3px var(--mosiadz-tlo)}
.pole .podpowiedz{font-size:.82rem;color:var(--atrament-3)}
.pole-blad input,.pole-blad select,.pole-blad textarea{border-color:#B4402C;background:#FDF6F4}
.blad{color:#8E2E1D;font-size:.85rem;font-weight:550}
.zgoda{grid-column:1/-1;display:flex;gap:.8em;align-items:flex-start;font-size:.88rem;
  color:var(--atrament-2);line-height:1.55}
.zgoda input{width:20px;height:20px;flex:none;margin-top:2px;accent-color:var(--mosiadz)}
.komunikat{grid-column:1/-1;border-radius:var(--r-mala);padding:1em 1.2em;font-size:.95rem;margin-bottom:4px}
.komunikat-ok{background:var(--szalwia-tlo);border:1px solid #BFD3CA;color:#254A3C}
.komunikat-blad{background:#FBE9E5;border:1px solid #EFC4BA;color:#8E2E1D}
.pulapka{position:absolute;left:-9999px}
.kontakt-siatka{display:grid;grid-template-columns:1.25fr .75fr;gap:clamp(30px,4vw,60px);align-items:start}
.dane-blok{background:var(--tlo-2);border:1px solid var(--linia);border-radius:var(--r);
  padding:clamp(24px,2.6vw,32px)}
.dane-lista{list-style:none;padding:0;margin:0}
.dane-lista li{display:flex;gap:.85em;align-items:flex-start;padding:.85em 0;border-bottom:1px solid var(--linia)}
.dane-lista li:last-child{border-bottom:0;padding-bottom:0}
.dane-lista .ikona{color:var(--mosiadz);margin-top:.28em;width:1.15rem;height:1.15rem}
.dane-lista span{display:block;font-size:.78rem;letter-spacing:.08em;text-transform:uppercase;
  color:var(--atrament-3);margin-bottom:.15em}
.dane-lista a,.dane-lista b{font-weight:600;font-size:1.02rem;color:var(--atrament);text-decoration:none}
.dane-lista a:hover{color:var(--mosiadz-ciemny);text-decoration:underline}

/* --- Stopka --------------------------------------------------------------- */
.stopka{background:var(--ciemne);color:#B9B1A5;padding-top:clamp(48px,6vw,80px);font-size:.94rem}
.stopka-siatka{display:grid;grid-template-columns:1.5fr 1fr 1fr 1.1fr;gap:clamp(26px,3vw,46px);
  padding-bottom:clamp(34px,4vw,54px)}
.stopka-marka img{height:64px;width:auto;margin-bottom:16px}
.stopka-marka p{max-width:34ch;font-size:.92rem;line-height:1.65}
.stopka-tyt{font-family:var(--font);font-size:.78rem;font-weight:700;letter-spacing:.15em;
  text-transform:uppercase;color:var(--mosiadz-jasny);margin-bottom:1.2em}
.stopka-lista,.stopka-miasta,.stopka-rejestr{list-style:none;padding:0;margin:0}
.stopka-lista li{display:flex;gap:.7em;align-items:center;margin-bottom:.85em}
.stopka-lista .ikona{color:var(--mosiadz-jasny);width:1.05rem;height:1.05rem}
.stopka a{color:#DED7CB;text-decoration:none}
.stopka a:hover{color:#fff;text-decoration:underline}
.stopka-miasta{columns:2;column-gap:20px;font-size:.9rem}
.stopka-miasta li{margin-bottom:.5em;break-inside:avoid}
.stopka-dane{color:#9C9488;margin-bottom:1.1em}
.stopka-dane b{color:#DED7CB;font-weight:600}
.stopka-rejestr li{display:flex;gap:.6em;font-size:.85rem;margin-bottom:.4em;color:#9C9488}
.stopka-rejestr span{color:var(--mosiadz-jasny);font-weight:600;min-width:52px}
.social{display:flex;gap:10px;list-style:none;padding:0;margin:20px 0 0}
.social li{margin:0}
.social a{width:40px;height:40px;border-radius:50%;border:1px solid var(--linia-ciemna);
  display:grid;place-items:center;color:#DED7CB;transition:background .2s,border-color .2s,color .2s}
.social a:hover{background:var(--mosiadz-jasny);border-color:var(--mosiadz-jasny);color:var(--ciemne)}
.social .ikona{width:18px;height:18px}
.stopka-dol{border-top:1px solid var(--linia-ciemna);padding-block:22px;
  display:flex;flex-wrap:wrap;gap:10px 30px;align-items:center;justify-content:space-between;font-size:.85rem}
.stopka-dol p{margin:0;color:#8B8378}
.stopka-dol nav{display:flex;flex-wrap:wrap;gap:6px 20px}

/* --- Pasek telefonu na komórkach ------------------------------------------ */
.pasek-tel{display:none;position:fixed;left:0;right:0;bottom:0;z-index:95;
  background:rgba(25,23,19,.97);backdrop-filter:blur(10px);
  border-top:1px solid var(--linia-ciemna);padding:8px 8px calc(8px + env(safe-area-inset-bottom))}
.pasek-tel a{flex:1;display:flex;flex-direction:column;align-items:center;gap:3px;
  padding:8px 4px;color:#E6DFD4;text-decoration:none;font-size:.74rem;font-weight:600;
  border-radius:var(--r-mala);letter-spacing:.02em}
.pasek-tel a:active{background:rgba(255,255,255,.09)}
.pasek-tel .ikona{width:20px;height:20px}
.pasek-tel-glowny{background:var(--mosiadz)!important;color:#fff!important}

/* ==========================================================================
   Zachowanie na mniejszych ekranach
   ========================================================================== */
@media (max-width:1100px){
  .stopka-siatka{grid-template-columns:1fr 1fr}
  .hero-plakietka{left:-10px}
}
@media (max-width:980px){
  .hero-in{grid-template-columns:1fr;gap:34px}
  .hero-obraz{max-width:520px;margin-inline:auto;width:100%}
  .hero-obraz>img{aspect-ratio:5/4}
  .hero-plakietka{left:auto;right:14px;bottom:-18px}
  .mapa-in{grid-template-columns:1fr}
  .cta-pas-in{grid-template-columns:1fr}
  .cta-pas-btn{max-width:420px}
  .kontakt-siatka{grid-template-columns:1fr}
  .projekt{grid-template-columns:1fr}
  .projekt:nth-child(even) .projekt-foto{order:0}
  .k4{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:880px){
  /* Uwaga: backdrop-filter na nagłówku tworzy własny układ odniesienia dla
     elementów position:fixed w środku — wysuwane menu przykleiłoby się wtedy
     do paska, a nie do okna. Dlatego na wąskich ekranach zamiast rozmycia
     dajemy pełne tło. */
  .szapka{backdrop-filter:none;-webkit-backdrop-filter:none;background:var(--tlo)}
  body.menu-otwarte .szapka{z-index:100}
  .szapka-in{min-height:68px;gap:12px}
  .marka img{height:38px}
  .godlo{height:36px}
  .szapka.przyklejona .godlo{height:33px}
  .marka-napis b{font-size:1.08rem}
  .marka-napis em{font-size:.56rem;letter-spacing:.18em}
  .szapka.przyklejona .marka img{height:34px}
  .hamburger{display:flex}
  .szapka-tel{display:inline-flex;align-items:center;gap:.45em;margin-left:auto;
    font-weight:650;font-size:.93rem;color:var(--atrament);text-decoration:none;
    padding:.5em .85em;border-radius:999px;background:var(--mosiadz-tlo)}
  .szapka-tel .ikona{color:var(--mosiadz);width:1rem;height:1rem}
  .szapka-tel span{display:none}
  .nawigacja{position:fixed;inset:0 0 0 auto;width:min(330px,84vw);background:var(--biel);
    flex-direction:column;align-items:stretch;justify-content:flex-start;gap:0;
    padding:88px 24px 34px;box-shadow:-18px 0 50px -30px rgba(0,0,0,.5);
    transform:translateX(102%);transition:transform .3s cubic-bezier(.4,0,.2,1);
    overflow-y:auto;margin-left:0;z-index:99}
  .nawigacja.otwarte{transform:none}
  .nawigacja ul{flex-direction:column;gap:2px}
  .nawigacja ul a{padding:.85em .9em;font-size:1.05rem;border-radius:var(--r-mala)}
  .nawigacja-kontakt{flex-direction:column;align-items:stretch;gap:10px;
    margin-top:26px;padding-top:24px;border-top:1px solid var(--linia)}
  .nawigacja-kontakt .btn{width:100%;padding:.85em 1.2em;font-size:1rem}
  .zaslona{position:fixed;inset:0;background:rgba(20,18,15,.55);z-index:96;
    opacity:0;pointer-events:none;transition:opacity .3s}
  .zaslona.widoczna{opacity:1;pointer-events:auto}
  body.menu-otwarte{overflow:hidden}
  .pasek-tel{display:flex;gap:6px}
  body{padding-bottom:72px}
  .podglad{padding-bottom:86px}
  .style-siatka{grid-template-columns:1fr;max-width:420px;margin-inline:auto}
  .pasek-demo .wrap{justify-content:flex-start}
  .pasek-demo-linki{gap:16px}
}
/* Pasek demonstracyjny nie może zjadać pół ekranu telefonu. */
@media (max-width:640px){
  .pasek-demo{font-size:.76rem;line-height:1.45;padding:7px 0}
  .pasek-demo .wrap{gap:4px 14px}
  .pasek-demo-linki{gap:14px}
  .pasek-demo .przelacznik-motywu{margin-top:6px;padding-top:6px;gap:5px 7px}
  .przelacznik-motywu a{padding:2px 9px;font-size:.74rem}
}
@media (max-width:760px){
  :root{--r:13px;--r-duza:18px}
  .k2,.k3,.k4{grid-template-columns:1fr}
  .stopka-siatka{grid-template-columns:1fr;gap:32px}
  .stopka-marka p{max-width:none}
  .stopka-dol{flex-direction:column;align-items:flex-start;gap:14px}
  .galeria{grid-template-columns:repeat(2,1fr);gap:10px}
  .galeria-szeroka{grid-column:span 2;grid-row:auto}
  .galeria-szeroka img{aspect-ratio:4/3}
  .projekt-foto{grid-template-columns:1fr 1fr}
  .projekt-foto img:first-child{grid-row:auto;aspect-ratio:3/4}
  .warianty{grid-template-columns:1fr}
  .formularz{grid-template-columns:1fr}
  .cennik-poz{flex-direction:column;gap:8px}
  .cennik-kwota{text-align:left}
  .kroki li{padding-top:0;padding-left:26px}
  .kroki li::before{top:0;bottom:0;left:5px;right:auto;width:1px;height:auto}
  .kroki li:last-child::before{background:linear-gradient(to bottom,var(--linia) 40%,transparent)}
  .kroki li::after{top:5px;left:0}
  .podsumowanie{grid-template-columns:repeat(2,1fr)}
  .wynik dl{grid-template-columns:1fr;gap:.15em}
  .wynik dt{margin-top:.5em}
  .hero-zaufanie{gap:8px 18px}
  .podglad-nawi{width:42px;height:42px}
}
@media (max-width:420px){
  .galeria{grid-template-columns:1fr}
  .galeria-szeroka{grid-column:span 1;grid-row:auto}
  .galeria-szeroka img{aspect-ratio:3/4}
  .podsumowanie{grid-template-columns:1fr}
  .hero-plakietka{position:static;max-width:none;margin-top:14px;box-shadow:var(--cien)}
}

@media print{
  .pasek-demo,.szapka,.pasek-tel,.cta-pas,.podglad,.social{display:none!important}
  body{background:#fff;padding-bottom:0;font-size:11pt}
  .stopka{background:#fff;color:#000;border-top:1px solid #ccc}
  .stopka a,.stopka-tyt{color:#000}
  a{color:#000}
  .wynik{break-inside:avoid}
}

/* --- Klasy zastępujące style pisane wprost w szablonie -------------------
   W wersji demonstracyjnej te trzy drobiazgi siedziały w atrybucie style=""
   pojedynczych znaczników. W motywie WordPressa treść bywa przepuszczana
   przez filtry, które atrybut style potrafią wyciąć, więc mają własne klasy. */
.pas-tlo{background:var(--tlo-2);border-block:1px solid var(--linia)}
.pod-sekcja{margin-top:30px}
.lead-mapa{margin-bottom:1.6em}

/* --- Drobiazgi przeniesione z atrybutów style="" wersji demonstracyjnej ---- */
.projekt-tyt{font-family:var(--font-tyt);font-size:clamp(1.4rem,1.2rem + .9vw,2rem);font-weight:600}
.kontakt-tyt{margin-bottom:.4em}
.kontakt-wstep{margin-bottom:1.8em}
.komunikat-dalej{margin:.5em 0 0}
.pod-przyciskiem{margin-top:.9em}
.btn-pelny{width:100%}
.dane-blok-tyt{margin-top:0;font-size:1.4rem}
.dane-blok-opis{font-size:.96rem}
.dane-blok .dane-lista{margin-top:1.2em}
.dane-blok-btn{margin-top:1.5em}
.dane-blok-jasny{margin-top:20px;background:var(--biel)}
.dane-firmy{font-size:.95rem;margin-bottom:1em}
.rejestr-kontakt{color:var(--atrament-2);font-size:.88rem}
.rejestr-kontakt span{color:var(--mosiadz);font-weight:600;min-width:52px;display:inline-block}
.strony-wpisu{margin-top:2em;font-size:.94rem}

/* ==========================================================================
   Wersja 1.0.3 — układ starej strony klienta w nowym wyglądzie
   Te same sekcje, teksty i zdjęcia co na starej stronie (analiza/tresc-starej-strony.md);
   zmienia się tylko forma. Zdjęcia tła = te, które stały w tych miejscach.
   ========================================================================== */

/* --- Logo ze starej strony (napis jest w obrazku) ------------------------- */
.marka-logo{height:66px;width:auto;flex:none;transition:height .25s}
.szapka.przyklejona .marka-logo{height:54px}
.szapka-in{min-height:86px}

/* --- Podtytuł pod nagłówkiem strony (na starej stronie: H4 pod H1) -------- */
.podtytul{font-family:var(--font);font-size:clamp(1.05rem,.98rem + .45vw,1.32rem);font-weight:600;
  letter-spacing:.01em;line-height:1.45;color:var(--mosiadz);margin:0 0 .9em;max-width:48ch}

/* --- Sekcja powitalna na zdjęciu ------------------------------------------ */
.hero{padding-block:clamp(96px,14vw,200px);color:#fff;isolation:isolate;
  background:#0C0A07 var(--hero-tlo) center/cover no-repeat}
.hero::before{inset:0;height:auto;z-index:-1;
  background:linear-gradient(90deg,rgba(12,10,7,.93) 0%,rgba(12,10,7,.74) 46%,rgba(12,10,7,.28) 100%)}
.hero-in{display:block}
.hero-in>*{max-width:40rem}
.hero h1{color:#fff;margin-bottom:.22em}
.hero .lead{color:rgba(255,255,255,.84)}
.hero .podtytul{color:var(--mosiadz-jasny)}
.hero .nadtytul{color:var(--mosiadz-jasny)}
.hero .nadtytul::before{background:var(--mosiadz-jasny)}

/* --- Nagłówek podstrony na zdjęciu ---------------------------------------- */
.czolo-tlo{position:relative;isolation:isolate;border-bottom:0;color:#fff;
  padding-block:clamp(72px,10vw,150px) clamp(56px,8vw,112px);
  background:#0C0A07 var(--czolo-tlo) center/cover no-repeat}
.czolo-tlo::before{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(90deg,rgba(12,10,7,.92) 0%,rgba(12,10,7,.62) 58%,rgba(12,10,7,.34) 100%)}
.czolo-tlo h1{color:#fff}
.czolo-tlo .lead{color:rgba(255,255,255,.84)}
.czolo-tlo .podtytul{color:var(--mosiadz-jasny)}
.czolo-tlo .okruszki,.czolo-tlo .okruszki a{color:rgba(255,255,255,.62)}

/* --- Listy z ptaszkami (wszystkie wypunktowania ze starej strony) --------- */
.ptaszki{list-style:none;padding:0;margin:0 0 1.4em;display:grid;gap:.65em}
.ptaszki li{display:flex;gap:.7em;align-items:flex-start;margin:0}
.ptaszki .ikona{color:var(--mosiadz);margin-top:.28em;width:1.1rem;height:1.1rem;flex:none}
.ptaszki-duze li{font-size:1.04rem;font-weight:550;padding:.85em 1.1em;background:var(--biel);
  border:1px solid var(--linia);border-radius:var(--r-mala)}
.ptaszki-miasta{grid-template-columns:repeat(2,minmax(0,1fr));gap:.5em 1.4em}

/* --- Strona główna: „Nasza oferta", wyróżniki ----------------------------- */
.oferta-wstep{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(24px,4vw,64px);
  align-items:center;margin-bottom:clamp(34px,4vw,56px)}
.oferta-wstep .naglowek-sekcji{margin-bottom:1.4em}
.oferta-wstep .ptaszki{margin:0}
.wyrozniki{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);
  gap:clamp(12px,1.8vw,22px)}
.wyrozniki li{margin:0;display:flex;align-items:center;gap:14px;background:var(--biel);
  border:1px solid var(--linia);border-radius:var(--r);padding:18px 20px}
.wyrozniki .karta-ikona{margin:0}
.wyrozniki h3{font-family:var(--font);font-size:1rem;font-weight:650;margin:0;line-height:1.3}

/* --- „Zaplanuj swoją wymarzoną łazienkę" ---------------------------------- */
.zaplanuj{background:var(--ciemne);color:#EFE9DF}
.zaplanuj-in{display:grid;grid-template-columns:1fr 1.1fr;gap:clamp(28px,4vw,64px);align-items:center}
.zaplanuj h2{color:#fff}
.zaplanuj .lead{color:rgba(239,233,223,.8)}
.zaplanuj .rzad-btn{margin-top:1.6em}
.zaplanuj img{width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:var(--r);box-shadow:var(--cien-mocny)}

/* --- „Dlaczego klienci wybierają Glow Home?" — pięć kafelków w rzędzie ---- */
.atuty{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,200px),1fr));gap:clamp(14px,1.8vw,22px)}

/* --- Karuzele zdjęć (jak karuzele na starej stronie) ----------------------- */
.karuzela{position:relative}
.karuzela+.karuzela{margin-top:clamp(10px,1.2vw,16px)}
.karuzela-tor{display:flex;gap:clamp(10px,1.2vw,16px);overflow-x:auto;scroll-snap-type:x mandatory;
  overscroll-behavior-x:contain;scrollbar-width:thin;scrollbar-color:var(--mosiadz) transparent;
  padding-bottom:10px;border-radius:var(--r-mala)}
.karuzela-poz{flex:0 0 auto;width:auto;height:clamp(250px,32vw,400px);scroll-snap-align:start}
.karuzela-poz img{width:auto;height:100%;max-width:86vw;aspect-ratio:auto;object-fit:cover}
.karuzela-strzalka{position:absolute;top:calc(50% - 5px);transform:translateY(-50%);z-index:3;
  width:46px;height:46px;border-radius:50%;border:0;cursor:pointer;display:grid;place-items:center;
  background:rgba(255,255,255,.95);color:#17140F;box-shadow:0 8px 24px -10px rgba(0,0,0,.65);
  transition:opacity .2s}
.karuzela-strzalka[hidden]{display:none}
.karuzela-strzalka:disabled{opacity:0;pointer-events:none}
.karuzela-strzalka svg{width:22px;height:22px}
.karuzela-wstecz{left:-12px}
.karuzela-dalej{right:-12px}

/* --- Realizacje: Wrocław, Zielęcice, galeria ------------------------------ */
.realizacja-glowa{max-width:78ch;margin-bottom:clamp(22px,3vw,34px)}
.realizacja-glowa .lead{max-width:none}

/* --- O nas ---------------------------------------------------------------- */
.dwie-kolumny{display:grid;grid-template-columns:1.2fr .8fr;gap:clamp(28px,4vw,70px);align-items:center}
.o-nas-logo{width:min(100%,340px);margin-inline:auto;background:var(--ciemne);
  padding:clamp(22px,3vw,40px);border-radius:var(--r-duza);box-shadow:var(--cien-mocny)}
.o-nas-pasja{width:100%}

/* --- Kontakt -------------------------------------------------------------- */
.kontakt-bok{display:grid;gap:18px}
.kontakt-foto{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:var(--r)}
.kontakt-bok .dane-blok-tyt{font-family:var(--font);font-size:.95rem;font-weight:650;letter-spacing:.04em;
  line-height:1.5;margin-bottom:.4em}
.kontakt-bok .dane-lista{margin-top:.6em}
.umow-blok{text-align:center}
.umow-tyt{font-weight:600;margin:0 0 .25em;color:var(--atrament-2)}
.umow-tel{font-family:var(--font-tyt);font-size:clamp(1.6rem,1.3rem + 1vw,2.1rem);font-weight:700;
  color:var(--mosiadz);text-decoration:none;white-space:nowrap}
.umow-tel:hover{color:var(--mosiadz-ciemny)}

/* --- Pas nad stopką: „DLACZEGO GLOW HOME?" i „OBSZAR DZIAŁANIA" ------------ */
.pas-dlaczego{display:grid;grid-template-columns:1fr 1fr;padding:0;background:var(--ciemne);color:#EFE9DF}
.pas-dlaczego-pol{position:relative;isolation:isolate;display:flex;align-items:center;gap:24px;
  padding:clamp(48px,6vw,92px) clamp(20px,5vw,64px)}
.pas-dlaczego-foto{background:#0C0A07 var(--pas-tlo) center/cover no-repeat}
.pas-dlaczego-foto::before{content:"";position:absolute;inset:0;z-index:-1;background:rgba(12,10,7,.8)}
.pas-dlaczego-tresc{width:100%;max-width:30rem;margin-left:auto}
.pas-obszar{background:#100E0A;justify-content:space-between}
.pas-dlaczego h2{color:#fff;font-size:clamp(1.45rem,1.2rem + 1.1vw,2.05rem)}
.pas-dlaczego .ptaszki li{color:#EFE9DF}
.pas-dlaczego .ptaszki .ikona{color:var(--mosiadz-jasny)}
.pas-dlaczego .btn-mosiadz{margin-top:.6em}
.pas-obszar-dopisek{display:flex;gap:.5em;align-items:center;color:var(--mosiadz-jasny);font-weight:600;margin:1em 0 0}

/* --- Stopka jak na starej stronie ------------------------------------------ */
.stopka-logo{width:150px;height:auto;margin-bottom:4px}

/* --- Mniejsze ekrany (1.0.3) ----------------------------------------------- */
@media (min-width:761px){
  .galeria-3{grid-template-columns:repeat(3,1fr)}
  .stopka-siatka{grid-template-columns:1.3fr 1fr 1fr}
}
@media (max-width:980px){
  .oferta-wstep,.zaplanuj-in,.dwie-kolumny{grid-template-columns:1fr}
  .wyrozniki{grid-template-columns:repeat(2,1fr)}
  .o-nas-logo{width:220px}
}
@media (max-width:880px){
  .marka-logo{height:52px}
  .szapka.przyklejona .marka-logo{height:46px}
  .szapka-in{min-height:70px}
}
@media (max-width:760px){
  .karuzela-strzalka{display:none}
  .karuzela-poz{height:min(380px,92vw)}
  .hero-in>*{max-width:none}
}
@media (max-width:520px){
  .wyrozniki{grid-template-columns:1fr}
  .ptaszki-miasta{grid-template-columns:1fr 1fr}
}
/* Oferta: dziesięć etapów w dwóch pełnych rzędach po pięć (wcześniej 4+4+2 z pustymi polami). */
@media (min-width:1101px){.zakres{grid-template-columns:repeat(5,1fr)}}
@media (min-width:681px) and (max-width:1100px){.zakres{grid-template-columns:repeat(2,1fr)}}
@media (max-width:680px){.zakres{grid-template-columns:1fr}}

/* ==========================================================================
   Wersja 1.0.4 — przezroczysta mapa z animacją, stopka na telefonie
   (życzenie klienta 11.09.2026: mapa bez czarnego tła, „fajniej", większa;
   dół strony od mapy w dół dopracowany na komórkach)
   ========================================================================== */

/* --- Obszar działania: tytuł, mapa, lista -------------------------------- */
.pas-obszar{isolation:isolate}
.pas-obszar::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(circle at 72% 58%,rgba(220,177,101,.12),transparent 55%)}
.pas-obszar-siatka{display:grid;grid-template-columns:minmax(0,1fr) auto;
  grid-template-areas:"tytul mapa" "lista mapa";column-gap:clamp(22px,3vw,48px);
  align-items:center;width:100%;max-width:44rem}
.pas-obszar-tyt{grid-area:tytul;align-self:end}
.pas-obszar-lista{grid-area:lista;align-self:start}
.pas-obszar .ptaszki-miasta{grid-template-columns:1fr}

/* --- Mapa: same złote kontury na przezroczystym tle ---------------------- */
.mapa-obszar{grid-area:mapa;position:relative;margin:0;width:clamp(220px,20vw,300px)}
.mapa-kontur{width:100%;height:auto;display:block;
  filter:drop-shadow(0 0 4px rgba(220,177,101,.28));
  animation:mapa-oddech 5s ease-in-out 2.4s infinite alternate}
@keyframes mapa-oddech{to{filter:drop-shadow(0 0 10px rgba(220,177,101,.55))}}

/* złoty błysk przebiegający po liniach — maską jest sama mapa */
.mapa-blysk{position:absolute;inset:0;pointer-events:none;
  -webkit-mask:var(--mapa-maska) center/100% 100% no-repeat;mask:var(--mapa-maska) center/100% 100% no-repeat;
  background:linear-gradient(112deg,transparent 44%,rgba(255,245,220,.95) 50%,transparent 56%) no-repeat;
  background-size:300% 100%;background-position:100% 0;
  animation:mapa-blysk 6.5s ease-in-out 2.6s infinite}
@keyframes mapa-blysk{0%{background-position:100% 0}40%,100%{background-position:0 0}}

/* pinezka nad Kędzierzynem-Koźlem, fale od czubka */
.mapa-pin{position:absolute;left:44.34%;top:55.73%;width:13.86%;pointer-events:none}
.mapa-pin img{width:100%;height:auto;display:block;position:relative;z-index:1;
  filter:drop-shadow(0 6px 6px rgba(0,0,0,.45));transform-origin:50% 94%;
  animation:mapa-unosi 3.2s ease-in-out 2.2s infinite}
@keyframes mapa-unosi{0%,100%{transform:translateY(0)}50%{transform:translateY(-7%)}}
.mapa-fala{position:absolute;left:48.3%;top:94%;width:220%;aspect-ratio:2.6/1;border-radius:50%;
  border:2px solid rgba(233,196,122,.9);transform:translate(-50%,-50%) scale(.1);opacity:0;
  animation:mapa-fala 3s ease-out 2.1s infinite}
.mapa-fala+.mapa-fala{animation-delay:3.6s}
@keyframes mapa-fala{0%{transform:translate(-50%,-50%) scale(.1);opacity:.95}
  100%{transform:translate(-50%,-50%) scale(1.25);opacity:0}}

/* wejście: kontury „rysują się" z góry, pinezka spada */
.mapa-obszar .mapa-kontur{transition:clip-path 1.7s cubic-bezier(.6,.05,.3,1),opacity 1.2s ease}
.mapa-obszar.czeka .mapa-kontur{clip-path:inset(0 0 100% 0);opacity:.15}
.mapa-obszar.czeka .mapa-pin,.mapa-obszar.czeka .mapa-blysk{opacity:0}
.mapa-obszar.widoczna .mapa-pin{animation:mapa-spada .75s cubic-bezier(.3,1.5,.55,1) 1.2s both}
@keyframes mapa-spada{0%{transform:translateY(-140%);opacity:0}60%{opacity:1}100%{transform:none;opacity:1}}

@media (prefers-reduced-motion:reduce){
  .mapa-fala,.mapa-blysk{display:none}
  .mapa-kontur,.mapa-pin img{animation:none}
}

/* --- Menu na telefonie: schowane nie rzuca cienia na prawą krawędź ------- */
@media (max-width:880px){
  .nawigacja{box-shadow:none;visibility:hidden;transition:transform .3s cubic-bezier(.4,0,.2,1),visibility 0s linear .3s}
  .nawigacja.otwarte{box-shadow:-18px 0 50px -30px rgba(0,0,0,.5);visibility:visible;
    transition:transform .3s cubic-bezier(.4,0,.2,1)}
}

/* --- Stopka ---------------------------------------------------------------- */
.stopka-siatka{align-items:center}
.stopka-marka .stopka-logo{width:190px;height:auto}
.stopka-lista li{font-size:1rem}
.stopka-rejestr li{font-size:.92rem}

/* --- Pas nad stopką: jedna kolumna już na tabletach ------------------------ */
@media (max-width:1100px){
  .pas-dlaczego{grid-template-columns:1fr}
  .pas-dlaczego-tresc,.pas-obszar-siatka{margin-inline:auto;max-width:44rem}
}

/* --- Telefon: wszystko od mapy w dół wyśrodkowane -------------------------- */
@media (max-width:760px){
  .pas-dlaczego-pol{padding-block:52px}
  .pas-obszar-siatka{grid-template-columns:1fr;grid-template-areas:"tytul" "mapa" "lista";text-align:center}
  .pas-obszar-tyt{align-self:auto}
  .mapa-obszar{justify-self:center;width:min(68vw,290px);margin:10px 0 30px}
  .pas-obszar .ptaszki-miasta{grid-template-columns:1fr 1fr;text-align:left;
    max-width:24rem;margin-inline:auto}
  .pas-obszar-dopisek{justify-content:center;text-align:left;max-width:24rem;margin-inline:auto}
  .pas-dlaczego-foto .pas-dlaczego-tresc{text-align:center}
  .pas-dlaczego-foto .ptaszki{width:max-content;max-width:100%;margin-inline:auto;text-align:left}

  .stopka{text-align:center;padding-top:44px}
  .stopka-siatka{justify-items:center;gap:22px;padding-bottom:30px}
  .stopka-marka{display:flex;flex-direction:column;align-items:center}
  .stopka-marka .stopka-logo{width:200px;margin-bottom:10px}
  .social{justify-content:center;margin-top:12px}
  .social a{width:46px;height:46px}
  .stopka-lista{display:grid;gap:10px;width:100%;max-width:22rem}
  .stopka-lista li{justify-content:center;margin:0;padding:12px 16px;border:1px solid var(--linia-ciemna);
    border-radius:999px}
  .stopka-rejestr{display:flex;flex-wrap:wrap;justify-content:center;gap:6px 18px}
  .stopka-rejestr li{margin:0}
  .stopka-rejestr span{min-width:0}
  .stopka-dol{align-items:center;text-align:center;gap:10px}
}

/* --- Realizacje: nagłówek „Nasze pozostałe realizacje" nad galerią -------- */
.galeria-glowa{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:18px clamp(24px,4vw,60px);
  align-items:end;margin-bottom:clamp(26px,3.5vw,44px)}
.galeria-glowa .naglowek-sekcji{margin-bottom:0;max-width:72ch}
.galeria-glowa>p{margin:0}
@media (max-width:880px){.galeria-glowa{grid-template-columns:1fr;align-items:start}}

/* --- Baner ciasteczek na telefonie nad paskiem „Zadzwoń / WhatsApp / Wycena" (1.0.5) --- */
@media (max-width:880px){
  #moove_gdpr_cookie_info_bar{bottom:calc(66px + env(safe-area-inset-bottom))!important}
}

/* --- Telefon: lżejsze zdjęcia tła nagłówków (1.0.5, audyt Lighthouse) ----- */
@media (max-width:760px){
  .hero{background-image:var(--hero-tlo-sm,var(--hero-tlo))}
  .czolo-tlo{background-image:var(--czolo-tlo-sm,var(--czolo-tlo))}
}