@font-face{font-family:"Figtree";font-style:normal;font-weight:400 800;font-display:swap;
  src:url(fonts/figtree-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:"Figtree";font-style:normal;font-weight:400 800;font-display:swap;
  src:url(fonts/figtree-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}

/* ---------- TOKENY: układ barw darek-hydraulik.pl, barwy z logo Strong-Instal ---------- */
:root{
  --cyjan:#05A0E2;        /* logo: dom, „O”, belka INSTAL */
  --cyjan-d:#0490CB;
  --cyjan-tekst:#046A9B;  /* cyjan jako litera na jasnym (5,9:1) */
  --woda:#7ED8FF;
  --granat:#0E2A47;       /* ciemne płaszczyzny jak u darka, przygaszone pod grafit logo */
  --granat-2:#143656;
  --ink:#171B20;
  --ink-2:#3A434D;
  --muted:#5C666F;
  --tlo:#FFFFFF;
  --tlo-2:#EEF5FA;        /* bladoniebieskie pasy jak u darka */
  --linia:rgba(23,27,32,.12);
  --ease:cubic-bezier(.16,.84,.44,1);
  --r-btn:8px;   /* K. 10.10: przyciski, filtry, plakietki - wariant C (było 999px = pigułki) */
  --r:4px;   /* K. 10.10: mniej zaokrąglone zdjęcia i karty („żeby nie wyglądała jak AI z jednego prompta”), było 18px */
  --wrap:1180px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
html,body{overflow-x:clip}
body{font-family:"Figtree",system-ui,sans-serif;color:var(--ink);background:var(--tlo);font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
.wrap{width:min(var(--wrap),100% - 40px);margin-inline:auto}
h1,h2,h3{font-weight:700;line-height:1.15;letter-spacing:-.015em}
h2{font-size:clamp(1.65rem,1.2rem + 1.6vw,2.4rem)}
.kreska{display:block;width:64px;height:4px;border-radius:9px;margin-top:18px;transform:scaleX(0);transform-origin:left;
  background:linear-gradient(90deg,var(--cyjan-d),var(--cyjan) 60%,var(--woda));transition:transform .9s var(--ease) .25s}
html:not(.mt-on) .kreska,.in .kreska,.kreska.in{transform:none}
.srodek{text-align:center}.srodek .kreska{margin-inline:auto;transform-origin:center}

/* ---------- PRZYCISKI (pigułki jak u darka) ---------- */
.btn{display:inline-flex;align-items:center;gap:.6em;border-radius:var(--r-btn);padding:.95em 1.7em;font-weight:700;font-size:.95rem;letter-spacing:.01em;
  transition:transform .25s var(--ease),background-color .25s,color .25s;white-space:nowrap}
.btn:hover{transform:translateY(-2px)}
.btn-cyjan{background:var(--cyjan);color:#0C1218;box-shadow:0 10px 24px -12px rgba(5,160,226,.75)}
.btn-cyjan:hover{background:#18ACEB}
.btn-bialy{background:#fff;color:var(--ink)}
.btn-bialy:hover{background:#EAF3F9}
.btn-szary{background:#E4ECF2;color:var(--ink)}
.btn-szary:hover{background:#D7E3EC}
.btn-obrys{border:1.5px solid rgba(255,255,255,.7);color:#fff}
.btn-obrys:hover{background:rgba(255,255,255,.12)}
.btn-wa{background:#25D366;color:#06210F}
.btn-wa:hover{background:#3BDD78}
.btn-wa svg{width:20px;height:20px}

/* ---------- PASEK (darek: biały, logo z lewej, pigułka Kontakt) ---------- */
.top{position:sticky;top:env(safe-area-inset-top,0px);z-index:100;background:rgba(255,255,255,.96);backdrop-filter:saturate(1.4) blur(10px);border-bottom:1px solid transparent;transition:border-color .3s,box-shadow .3s,transform .4s var(--ease)}
.top.is-stuck{border-bottom-color:var(--linia);box-shadow:0 6px 24px -18px rgba(14,42,71,.45)}
/* spokojny pasek (K. 10.10: „wibruje, nie musi się rozsuwać i zsuwać”): stała wysokość i bez chowania.
   Zmiana 88→72 px przy y>8 przesuwała treść o 16 px, przewinięcie wracało pod próg i pasek drgał */
.top .wrap{display:flex;align-items:center;justify-content:space-between;height:80px}
.top.is-hidden{transform:none}
.brand{display:block;height:60px;flex:none}
.brand img{height:100%;width:auto}
.nawigacja{display:flex;align-items:center;gap:clamp(18px,2.6vw,40px)}
.nawigacja a:not(.btn){font-weight:600;font-size:1.02rem;position:relative;padding:.3em 0}
.nawigacja a:not(.btn)::after{content:"";position:absolute;left:0;right:0;bottom:-2px;height:2px;border-radius:2px;background:var(--cyjan);transform:scaleX(0);transform-origin:left;transition:transform .35s var(--ease)}
.nawigacja a:not(.btn):hover::after,.nawigacja a:not(.btn)[aria-current]::after{transform:scaleX(1)}
.burger{display:none}

/* ---------- HERO (WDS: pełne zdjęcie, tekst z lewej, pigułka, kropki pionowo z prawej) ---------- */
.hero{position:relative;height:min(calc(100svh - 88px),820px);min-height:560px;overflow:hidden;color:#fff;background:#1B2229}
.hero-slajd{position:absolute;inset:0;opacity:0;transition:opacity 1.4s ease}
.hero-slajd.on{opacity:1}
.hero-slajd img{width:100%;height:100%;object-fit:cover;transform:scale(1.06);transition:transform 7.5s linear}
.hero-slajd.on img{transform:scale(1)}
.hero::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(90deg,rgba(9,16,24,.72) 0%,rgba(9,16,24,.45) 48%,rgba(9,16,24,.18) 100%),linear-gradient(0deg,rgba(9,16,24,.35),transparent 40%)}
.hero-tresc{position:absolute;inset:0;z-index:2;display:flex;align-items:flex-end;padding-bottom:clamp(56px,11vh,120px)}
.hero h1{font-size:clamp(2.3rem,1.5rem + 3.2vw,4.1rem);max-width:15ch;text-shadow:0 2px 24px rgba(0,0,0,.25)}
.hero-lead{font-size:clamp(1.05rem,.95rem + .45vw,1.3rem);line-height:1.5;max-width:40ch;margin-top:26px;font-weight:500;opacity:.96}
.hero-akcje{display:flex;flex-wrap:wrap;gap:14px;margin-top:34px;align-items:center}

.kropki{position:absolute;z-index:3;right:clamp(18px,3vw,44px);top:50%;transform:translateY(-50%);display:flex;flex-direction:column;gap:22px}
.kropki button{width:16px;height:16px;border-radius:50%;border:1.5px solid rgba(255,255,255,.85);background:transparent;cursor:pointer;position:relative;padding:0}
.kropki button::after{content:"";position:absolute;inset:3px;border-radius:50%;background:#fff;transform:scale(0);transition:transform .35s var(--ease)}
.kropki button[aria-current="true"]::after{transform:scale(1)}


/* ---------- MARKI (WDS „Partners”: loga w kolorze, wyśrodkowane) ---------- */
.marki{padding:clamp(56px,7vw,88px) 0 clamp(48px,6vw,72px)}
.marki h2{font-size:clamp(1.4rem,1.1rem + 1vw,1.9rem)}
.marki-rzad{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:clamp(28px,6vw,88px);margin-top:44px}
.marki-rzad figure{display:flex;flex-direction:column;align-items:center;gap:12px}
.marki-rzad img{height:58px;width:auto;max-width:210px;object-fit:contain}
.marki-rzad img.wyz{height:44px}
.marki-rzad figcaption{font-size:.8rem;color:var(--muted);font-weight:600;letter-spacing:.02em}

/* ---------- CZYM SIĘ ZAJMUJEMY (darek: wiersze usługi) ---------- */
.uslugi{padding:clamp(64px,8vw,104px) 0}
.uslugi-glowa{display:grid;grid-template-columns:1.25fr .75fr;gap:40px;align-items:end}
.uslugi-glowa p{color:var(--ink-2);max-width:62ch;margin-top:22px}
.link-strzalka{font-weight:700;font-size:.9rem;color:var(--cyjan-tekst);letter-spacing:.03em;justify-self:end;display:inline-flex;gap:.5em;align-items:center}
.link-strzalka span{transition:transform .3s var(--ease)}
.link-strzalka:hover span{transform:translateX(4px)}
.wiersze{margin-top:46px;border-top:1px solid var(--linia)}
.wiersz{position:relative;display:grid;grid-template-columns:52px 1fr 380px 104px;gap:clamp(18px,3vw,44px);align-items:center;padding:30px 0;border-bottom:1px solid var(--linia)}
.wiersz::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;border-radius:2px;background:linear-gradient(90deg,var(--cyjan-d),var(--cyjan) 60%,var(--woda));transform:scaleX(0);transform-origin:left;transition:transform .8s var(--ease)}
.wiersz:hover::after,.wiersz:focus-visible::after{transform:scaleX(1)}
.wiersz-nr{font-size:.92rem;font-weight:700;color:var(--cyjan-tekst);font-variant-numeric:tabular-nums;letter-spacing:.04em}
.wiersz h3{font-size:clamp(1.3rem,1.05rem + .75vw,1.75rem)}
.przod p{color:var(--ink-2);font-size:1.05rem;margin-top:6px}
.tyl{font-size:1.02rem;line-height:1.55;color:var(--ink-2);margin-top:10px;max-width:36ch}
.wt .l{display:block;overflow:hidden;padding-bottom:.1em;margin-bottom:-.1em}
.wt .l>i{display:block;font-style:normal}
.wiersz-art{width:100%;aspect-ratio:3/2;border-radius:var(--r);overflow:hidden;background:var(--tlo-2)}
.wiersz-art img{width:100%;height:100%;object-fit:cover;transition:transform .9s var(--ease)}
.wiersz:hover .wiersz-art img{transform:scale(1.06)}
.wiersz-btn{justify-self:end;width:96px;height:52px;border-radius:var(--r-btn);border:1.5px solid var(--ink);display:grid;place-items:center;font-size:1.15rem;overflow:hidden;transition:background .35s,color .35s,border-color .35s}
.wiersz-btn i{font-style:normal;transition:transform .45s var(--ease)}
.wiersz:hover .wiersz-btn{background:var(--cyjan);border-color:var(--cyjan);color:#0C1218}
.wiersz:hover .wiersz-btn i{transform:rotate(-45deg)}
.wiersz.maly{grid-template-columns:52px 1fr 104px;padding:20px 0}
.wiersz.maly h3{font-size:1.12rem;font-weight:600}
/* hover: podpis odjeżdża w górę zza maski, opis wjeżdża od dołu (tylko mysz) */
@media (hover:hover) and (min-width:981px){
  .wt{display:grid;align-items:center}
  .wt>*{grid-area:1/1}
  .tyl{margin-top:0;font-size:clamp(1.08rem,.98rem + .35vw,1.28rem);color:var(--ink);max-width:30ch}
  .wt .l>i{transition:transform .7s var(--ease),opacity .5s var(--ease);transition-delay:calc(.16s + var(--k,0) * 70ms)}
  .tyl .l>i{transform:translateY(105%);opacity:0;transition-delay:calc(var(--k,0) * 40ms)}
  .wiersz:hover .przod .l>i,.wiersz:focus-visible .przod .l>i{transform:translateY(-105%);opacity:0;transition-delay:calc(var(--k,0) * 60ms)}
  .wiersz:hover .tyl .l>i,.wiersz:focus-visible .tyl .l>i{transform:none;opacity:1;transition-delay:calc(.18s + var(--k,0) * 70ms)}
}

/* ---------- CZYSTE POWIETRZE (darek: zdjęcie w tle + biała karta) ---------- */
.baner{position:relative;padding:clamp(64px,9vw,120px) 0;overflow:hidden}
.baner-tlo{position:absolute;inset:0;overflow:hidden}
/* mocna paralaksa (K. 10.10: 64 px było niewyczuwalne): amplituda 140 px, zapas 210 px = 1,5x (rdzeń 10c) */
.baner-tlo img{position:absolute;left:0;top:-210px;width:100%;height:calc(100% + 420px);object-fit:cover;object-position:center 60%;will-change:transform}
@media (max-width:900px){ .baner-tlo img{top:0;height:100%;will-change:auto} }
.baner-tlo::after{content:"";position:absolute;inset:0;background:rgba(14,42,71,.55)}
.baner-karta{position:relative;background:#fff;border-radius:var(--r);padding:clamp(32px,5vw,58px);max-width:900px;margin-inline:auto;text-align:center;box-shadow:0 30px 60px -30px rgba(0,0,0,.5);border:1.5px solid var(--cyjan)}
.baner-karta .kreska{margin-inline:auto;transform-origin:center}
.baner-karta p{color:var(--ink-2);margin:22px auto 0;max-width:60ch}
.baner-akcje{display:flex;justify-content:center;flex-wrap:wrap;gap:14px;margin-top:30px}

/* ---------- DLACZEGO: liczby jak w gazecie + zdjęcie i lista cech na kreskach ---------- */
.dlaczego{padding:clamp(72px,9vw,120px) 0 0}
/* FAKTY wg Vitsœ (K. 10.10): nagłówek z linkiem nad cienką linią, 4 równe kolumny (lekki duży tytuł + drobny tekst), linia, doradztwo ze zdjęciem */
.fakty{padding:clamp(72px,9vw,120px) 0 clamp(24px,3vw,40px)}
.fakty-glowa{display:flex;justify-content:space-between;align-items:baseline;gap:20px;padding-top:28px;border-top:1px solid var(--linia)}
.fakty-glowa h2{font-size:clamp(1.6rem,1.2rem + 1.4vw,2.2rem);font-weight:800;letter-spacing:-.02em}
.fakty-kolumny{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(20px,2.6vw,40px);margin-top:clamp(28px,3.5vw,48px);padding-bottom:clamp(36px,4.5vw,60px);border-bottom:1px solid var(--linia)}
.fakty h3{font-size:clamp(1.3rem,1.05rem + .8vw,1.7rem);font-weight:400;line-height:1.2;letter-spacing:-.01em;text-wrap:balance}
/* ikony z Google Flow (K. 13.10): 3D matowe, 192 px webp na 64 px = gęstość 3× */
.ikona{display:block;width:64px;height:64px;object-fit:contain}
.fakty-kolumny .ikona{width:64px;height:64px;margin:0 0 18px -4px}
.fakty-kolumny p,.fakty-dol p{color:var(--ink-2);font-size:.97rem;margin-top:16px;max-width:34ch}
.fakty-dol{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.5fr);gap:clamp(28px,4vw,64px);padding-top:clamp(28px,3.5vw,44px);align-items:start}
.fakty-dol .link-strzalka{margin-top:22px}
.fakty-art{border-radius:var(--r);overflow:hidden;aspect-ratio:4/3}
.fakty-art img{width:100%;height:100%;object-fit:cover;display:block}
@media (max-width:980px){.fakty-kolumny{grid-template-columns:1fr 1fr}.fakty-dol{grid-template-columns:1fr}}
@media (max-width:560px){.fakty-kolumny{grid-template-columns:1fr}.fakty-glowa{flex-direction:column;gap:8px}}
.liczby{display:grid;grid-template-columns:repeat(3,1fr);margin-top:44px;border-top:1.5px solid var(--ink)}
.liczba{padding:26px 20px 0 0}
.liczba+.liczba{padding-left:clamp(16px,3vw,44px);border-left:1px solid var(--linia)}
.liczba-l{display:flex;align-items:flex-start;line-height:.9}
.liczba b{font-size:clamp(3rem,1.9rem + 4.6vw,6.4rem);font-weight:800;letter-spacing:-.045em;color:var(--granat);font-variant-numeric:tabular-nums}
.liczba em{font-style:normal;font-weight:800;color:var(--cyjan);font-size:clamp(1.8rem,1.2rem + 2.4vw,3.4rem);margin-left:4px}
.liczba span{display:block;margin-top:14px;color:var(--ink-2);font-size:1.02rem}
.dl-siatka{display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(32px,5.5vw,88px);margin-top:clamp(52px,6vw,84px);align-items:center}
.dl-art{border-radius:var(--r);overflow:hidden;aspect-ratio:4/5}
.dl-art img{width:100%;height:100%;object-fit:cover}
.cechy{border-top:1px solid var(--linia)}
.cechy>div{display:grid;grid-template-columns:170px 1fr;gap:24px;padding:24px 0;border-bottom:1px solid var(--linia)}
.cechy dt{font-weight:700;font-size:1.1rem}
.cechy dd{color:var(--ink-2)}
.cechy+.link-strzalka{margin-top:30px}

/* ---------- OPINIE (WDS: karty z oceną i źródłem) ---------- */
.opinie{padding:clamp(64px,8vw,104px) 0;background:var(--tlo-2);margin-top:clamp(64px,8vw,104px)}
.opinie-tasma{margin:46px calc(50% - 50vw) 0;overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent)}
.opinie-tor{display:flex;align-items:stretch;gap:24px;width:max-content;padding:8px 0 34px;}
.karuzela--gotowa .opinie-tor{animation:tasma var(--czas,70s) linear infinite}
.opinie-tasma:hover .opinie-tor,.opinie-tasma:focus-within .opinie-tor{animation-play-state:paused}
@keyframes tasma{to{transform:translateX(calc(-1 * var(--tasma)))}}
.opinia{width:min(380px,80vw);flex:none}
.opinia{background:#fff;border-radius:var(--r);padding:28px 28px 24px;display:flex;flex-direction:column;box-shadow:0 1px 0 rgba(14,42,71,.04),0 18px 40px -30px rgba(14,42,71,.35);transition:transform .4s var(--ease),box-shadow .4s}
.opinia:hover{transform:translateY(-4px);box-shadow:0 1px 0 rgba(14,42,71,.04),0 26px 50px -30px rgba(14,42,71,.45)}
.opinia-kto{display:flex;align-items:center;gap:12px}
.awatar{width:46px;height:46px;border-radius:50%;display:grid;place-items:center;color:#fff;font-weight:700;font-size:1.15rem;flex:none}
.opinia-kto b{display:block;font-size:1rem}
.opinia-kto small{color:var(--muted);font-size:.82rem}
.gwiazdki{display:flex;gap:2px;margin:16px 0 12px}
.gwiazdki svg{width:19px;height:19px;fill:#FBBC05}
.opinia blockquote{font-size:1rem;line-height:1.6;color:var(--ink);flex:1}
.opinia blockquote.dlugi{font-size:.95rem}
.zrodlo{display:flex;align-items:center;gap:10px;margin-top:20px;padding-top:16px;border-top:1px solid var(--linia);font-size:.82rem;color:var(--muted);line-height:1.3}
.zrodlo b{display:block;color:#1A73E8;font-weight:600;font-size:.92rem}
.zrodlo .oferteo{color:#E5531A}
.opinie-pod{text-align:center;margin-top:34px}

/* ---------- REALIZACJE: równa mozaika + pasek z ceną ---------- */
.realizacje{padding:clamp(64px,8vw,104px) 0}
.sekcja-glowa{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap}
.sekcja-glowa p{color:var(--ink-2);margin-top:20px;max-width:52ch}
.bento{display:grid;grid-template-columns:1.1fr 1fr 1fr;grid-template-rows:repeat(2,clamp(220px,22vw,300px));gap:20px;margin-top:44px}
.m-tile{border-radius:var(--r);overflow:hidden;background:var(--tlo-2)}
.m-tile img{width:100%;height:100%;object-fit:cover;transition:transform .9s var(--ease)}
.m-tile:hover img{transform:scale(1.05)}
.b1{grid-row:1/3}.b2{grid-column:2/4}
.cena-pasek{display:flex;justify-content:space-between;align-items:center;gap:28px 48px;margin-top:20px;padding:clamp(26px,3.5vw,40px) clamp(24px,4vw,52px);background:var(--tlo-2);border-radius:var(--r)}
.cena-pasek h3{font-size:clamp(1.3rem,1.1rem + .6vw,1.6rem)}
.cena-pasek p{color:var(--ink-2);margin-top:8px;max-width:62ch}

/* ---------- ZASIĘG (darek „gdzie działamy”) ---------- */
.zasieg{padding:clamp(64px,8vw,104px) 0;background:var(--tlo-2)}
.zasieg-siatka{display:grid;grid-template-columns:.8fr 1.2fr;gap:clamp(32px,5vw,72px);align-items:start}
.zasieg .woj{margin-top:0}
.zasieg-art{aspect-ratio:4/3;border-radius:var(--r)}
.zasieg p{color:var(--ink-2);margin-top:22px}
.woj{margin-top:24px;display:grid;gap:12px}
.woj div{display:grid;grid-template-columns:120px 1fr;gap:12px;font-size:.98rem;padding-bottom:12px;border-bottom:1px solid var(--linia)}
.woj dt{font-weight:700}
.woj dd{color:var(--ink-2)}
.woj dd b{color:var(--ink);font-weight:700}

/* ---------- KONTAKT + STOPKA (darek: granat) ---------- */
.kontakt{background:var(--granat);color:#fff;padding:clamp(64px,8vw,100px) 0;text-align:center;position:relative;overflow:hidden}
.kontakt p{opacity:.85;margin-top:16px}
.kontakt .baner-akcje{margin-top:32px}
.stopka{background:#0A1F35;color:rgba(255,255,255,.8);padding:clamp(56px,7vw,84px) 0 28px;font-size:.97rem}
.stopka-gora{display:grid;grid-template-columns:1.5fr .7fr .9fr 1fr;gap:clamp(28px,4vw,56px)}
.stopka-marka img{height:62px;width:auto}
.stopka-marka p{margin-top:20px;max-width:36ch;line-height:1.6}
.stopka h4{font-size:.86rem;font-weight:700;color:var(--woda);letter-spacing:.04em;margin-bottom:16px}
.stopka ul{list-style:none;display:grid;gap:6px}
.stopka ul a{display:inline-block;padding:3px 0;min-height:24px}
.stopka a{transition:color .25s}
.stopka a:hover{color:#fff}
.stopka-tel{font-size:1.3rem;font-weight:800;color:#fff;letter-spacing:-.01em}
.sociale{display:flex;flex-wrap:wrap;gap:10px;margin-top:24px}
.fb{display:inline-flex;align-items:center;gap:10px;padding:10px 16px 10px 12px;border-radius:var(--r-btn);border:1px solid rgba(255,255,255,.22);font-weight:600;font-size:.92rem;color:#fff}
.fb svg{width:20px;height:20px;flex:none}
.fb:hover{background:rgba(255,255,255,.08)}
.stopka-dol{margin-top:clamp(44px,5vw,64px);padding-top:22px;border-top:1px solid rgba(255,255,255,.12);font-size:.84rem;color:rgba(255,255,255,.6);display:flex;justify-content:space-between;gap:12px 24px;flex-wrap:wrap}
.stopka-dol a:hover{color:#fff}

/* WhatsApp w rogu (komputer) i pasek pod kciukiem (telefon) */
.wa-rog{position:fixed;right:24px;bottom:24px;z-index:90;width:60px;height:60px;border-radius:50%;background:#25D366;display:grid;place-items:center;box-shadow:0 12px 30px -10px rgba(0,0,0,.45);transition:transform .3s var(--ease)}
.wa-rog:hover{transform:scale(1.08)}
.wa-rog svg{width:32px;height:32px}
/* FB nad WhatsAppem (K. 10.10: „jak mają fb, to trzeba dodać tutaj”); na telefonie tylko w stopce, jak u Kańskiego */
.fb-rog{position:fixed;right:24px;bottom:96px;z-index:90;width:60px;height:60px;border-radius:50%;background:#1877F2;display:grid;place-items:center;box-shadow:0 12px 30px -10px rgba(0,0,0,.45);transition:transform .3s var(--ease)}
.fb-rog:hover{transform:scale(1.08)}
.fb-rog svg{width:18px;height:29px;translate:1px 0}
.pasek-tel{display:none}

/* ============ WEJŚCIA - te same co w demie Strong-Instal ============ */
/* 1) kurtyna ze znakiem i rurą, która napełnia się wodą (raz na wizytę, ?intro odtwarza) */
.kurtyna{display:none}
.intro-on .kurtyna{display:block;position:fixed;inset:0;z-index:300;background:#fff;clip-path:inset(0 0 0 0)}
.intro-on.intro-out .kurtyna{clip-path:inset(0 0 100% 0);transition:clip-path .62s cubic-bezier(.66,0,.24,1)}
.kurtyna .znak{position:fixed;left:50%;top:50%;width:min(420px,74vw);transform:translate(-50%,-50%) scale(1.045);clip-path:inset(0 100% 0 0);filter:blur(14px)}
.kurtyna .znak img{width:100%;height:auto}
.intro-gra .kurtyna .znak{transform:translate(-50%,-50%) scale(1);clip-path:inset(0 0 0 0);filter:blur(0);
  transition:transform .5s var(--ease),clip-path .5s var(--ease),filter .5s var(--ease)}
.intro-out .kurtyna .znak{transform:translate(calc(-50% + var(--dx,0px)),calc(-50% + var(--dy,0px))) scale(var(--sk,1));transition:transform .72s var(--ease)}
.kurtyna .rura{position:fixed;left:50%;top:calc(50% + min(420px,74vw) * .2 + 28px);transform:translateX(-50%);width:min(420px,74vw);height:6px;border-radius:99px;overflow:hidden;background:rgba(14,42,71,.08)}
.kurtyna .rura i{display:block;height:100%;transform:scaleX(0);transform-origin:0 50%;background:linear-gradient(90deg,var(--cyjan-d),var(--cyjan) 58%,var(--woda))}
.intro-gra .kurtyna .rura i{transform:scaleX(1);transition:transform .5s cubic-bezier(.16,1,.3,1) .14s}
.intro-out .kurtyna .rura{opacity:0;transition:opacity .2s}
.intro-on:not(.intro-done) .top .brand{visibility:hidden}

/* 2) nagłówki linia po linii zza maski */
.mt-lines .mt-line{display:block;overflow:hidden;padding-bottom:.2em;margin-bottom:-.2em}
.mt-lines.mt-in .mt-line{animation:mt-unmask 0s linear 1.3s forwards}
@keyframes mt-unmask{to{overflow:visible}}
.mt-lines .mt-line>i{display:block;font-style:inherit;translate:0 108%;transition:translate .95s var(--ease) var(--mt-d,0s)}
.mt-lines.mt-in .mt-line>i{translate:0 0}

/* 3) bloki: wjazd z dołu, kolejne po sobie (.wj, bo .rv należy do rdzenia) */
.mt-on .wj:not(.in){opacity:0}
.mt-on .wj.in{animation:wej .9s var(--ease) both;animation-delay:calc(var(--i,0) * 90ms);--wy:44px}

/* 3b) wejścia kierunkowe jak u darka (AOS): całe kolumny wjeżdżają z boków i z dołu.
   Na animation, nie transition: opóźnienie wejścia nie może zostać na elemencie i spowalniać hovera (bramka 09.10). */
.mt-on [data-wej]:not(.in){opacity:0}
.mt-on [data-wej].in{animation:wej 1.1s var(--ease) both;animation-delay:calc(var(--i,0) * 110ms)}
[data-wej="gora"]{--wy:80px}
[data-wej="lewo"]{--wx:-100px}
[data-wej="prawo"]{--wx:100px}
[data-wej="zoom"]{--wy:50px;--ws:.9}
@keyframes wej{from{opacity:0;translate:var(--wx,0) var(--wy,0);scale:var(--ws,1)}to{opacity:1;translate:0 0;scale:1}}

/* 4) zdjęcia: kurtyna + zoom-out, kierunek z układu */
.mt-on .mt-ph{overflow:hidden}
.mt-on .mt-ph>img{clip-path:inset(100% 0 0 0);scale:1.1;transition:clip-path 1.05s var(--ease) var(--mt-d,0s),scale 1.5s var(--ease) var(--mt-d,0s),transform .7s var(--ease)}
.mt-on .mt-ph[data-dir="right"]>img{clip-path:inset(0 100% 0 0);transform-origin:left center}
.mt-on .mt-ph[data-dir="left"]>img{clip-path:inset(0 0 0 100%);transform-origin:right center}
.mt-on .mt-ph.in>img{clip-path:inset(0 0 0 0);scale:1}

@media (prefers-reduced-motion:reduce){
  .kurtyna{display:none!important}
  .hero-slajd img{transition:none;transform:none}
  .opinie-tasma{overflow-x:auto;-webkit-mask-image:none;mask-image:none}.opinie-tor{animation:none}
  *{scroll-behavior:auto}
}

/* ---------- TELEFON ---------- */
@media (max-width:980px){
  .wiersz{grid-template-columns:1fr;gap:16px;padding:26px 0}
  .wiersz-art{order:-1}.wiersz-nr{display:none}.wiersz-btn{display:none}
  .wiersz.maly{grid-template-columns:1fr auto;padding:18px 0}.wiersz.maly .wiersz-btn{display:grid;width:52px;height:44px}
  .dl-siatka,.zasieg-siatka{grid-template-columns:1fr}
  .dl-art{aspect-ratio:4/3.4}
  .bento{grid-template-columns:1fr 1fr;grid-template-rows:none}
  .b1{grid-row:auto;grid-column:1/-1;aspect-ratio:4/3.2}.b2{grid-column:1/-1;aspect-ratio:16/10}.b3,.b4{aspect-ratio:1}
  .cena-pasek{flex-direction:column;align-items:flex-start}
  .stopka-gora{grid-template-columns:1fr 1fr}.stopka-marka{grid-column:1/-1}
}
@media (max-width:820px){
  body{font-size:16px}
  .top .wrap{height:72px}.brand{height:40px}
  .burger{display:inline-flex;align-items:center;gap:10px;background:none;border:1.5px solid var(--ink);border-radius:var(--r-btn);padding:9px 16px;font:inherit;font-weight:700;font-size:.92rem;color:var(--ink);cursor:pointer}
  .burger i{display:grid;gap:4px}.burger i::before,.burger i::after{content:"";display:block;width:16px;height:2px;background:currentColor;border-radius:2px}
  .js .nawigacja{position:absolute;top:100%;left:0;right:0;background:#fff;flex-direction:column;align-items:stretch;gap:0;padding:8px 20px 22px;border-bottom:1px solid var(--linia);box-shadow:0 20px 30px -20px rgba(14,42,71,.4);display:none}
  .js .nawigacja.is-open{display:flex}
  .nawigacja a:not(.btn){display:flex;justify-content:space-between;align-items:center;padding:15px 2px;border-bottom:1px solid var(--linia);font-size:1.08rem}
  .nawigacja a:not(.btn)::after{content:"→";position:static;transform:none;background:none;height:auto;color:var(--cyjan-tekst)}
  .nawigacja .btn{margin-top:18px;justify-content:center}
  .hero{height:auto;min-height:calc(100svh - 72px)}
  .hero-tresc{position:relative;inset:auto;min-height:calc(100svh - 72px);padding:120px 0 calc(48px + 72px)}
  .hero::after{background:linear-gradient(0deg,rgba(9,16,24,.82) 0%,rgba(9,16,24,.5) 55%,rgba(9,16,24,.2) 100%)}
  .kropki{bottom:auto;top:24px;right:20px;transform:none;flex-direction:row;gap:14px}
  .uslugi-glowa{grid-template-columns:1fr}.link-strzalka{justify-self:start}
  .woj div{grid-template-columns:1fr;gap:2px}
  .marki-rzad{display:grid;grid-template-columns:1fr 1fr;gap:34px 20px;justify-items:center}
  .marki-rzad img{max-width:150px}
  .wa-rog,.fb-rog{display:none}
  .pasek-tel{display:grid;grid-template-columns:1fr 1fr;gap:10px;position:fixed;left:0;right:0;bottom:0;z-index:95;padding:10px 12px calc(10px + env(safe-area-inset-bottom));background:rgba(255,255,255,.97);border-top:1px solid var(--linia)}
  .pasek-tel .btn{justify-content:center;padding:.85em 1em}
  body{padding-bottom:72px}
  .liczba{padding-right:8px}.liczba+.liczba{padding-left:12px}.liczba span{font-size:.86rem}
  .cechy>div{grid-template-columns:1fr;gap:4px;padding:18px 0}
}

/* ---------- OPINIE NA TELEFONIE (K. 13.10) ----------
   Taśma w ruchu ucinała kartę przy krawędzi i tekst uciekał przed przeczytaniem.
   Na telefonie: karty przesuwane palcem, jedna cała na środku + skrawek następnej,
   co kilka sekund przeskok do kolejnej (js/20-app.js), dotyk wstrzymuje. */
@media (max-width:820px){
  .opinie-tasma{overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scrollbar-width:none;-webkit-mask-image:none;mask-image:none}
  .opinie-tasma::-webkit-scrollbar{display:none}
  .opinie-tor,.karuzela--gotowa .opinie-tor{animation:none;gap:12px;padding:8px 32px 34px}
  .opinia{width:calc(100vw - 64px);scroll-snap-align:center}
  .opinia[aria-hidden="true"]{display:none}
  .opinia:hover{transform:none}
}

/* ---------- SPOKOJNE PRZEWIJANIE NA TELEFONIE (K. 13.10: „dziwnie miga przy scrollu”) ----------
   Zmierzone (scratchpad/miganie*.mjs, 390 px, 1500 px/s): na Ofercie do 24% ekranu było puste
   (kurtyny zdjęć usług), a tekst wjeżdżający z prawej wystawał do 470 px przy ekranie 390.
   Na telefonie: bez wjazdów z boku i bez kurtyn, tylko krótkie pojawienie się, odpalane
   zanim element wejdzie w kadr (rootMargin w js/20-app.js). Pasek bez rozmycia tła -
   backdrop-filter na przyklejonym pasku migocze w Safari na iPhonie. */
@media (max-width:820px){
  .top{backdrop-filter:none;-webkit-backdrop-filter:none;background:#fff}
  [data-wej]{--wx:0px;--wy:18px;--ws:1}
  .mt-on .wj.in{--wy:14px}
  .mt-on .wj.in,.mt-on [data-wej].in{animation-duration:.6s;animation-delay:calc(var(--i,0) * 60ms)}
  .mt-on .mt-ph>img,.mt-on .mt-ph[data-dir]>img{clip-path:none;scale:1;transition:transform .7s var(--ease)}
}

/* ============ PODSTRONY: nagłówek, oferta, realizacje, o nas, kontakt, polityka ============ */

/* ---------- NAGŁÓWEK PODSTRONY: pas zdjęcia z paralaksą, tytuł z lewej u dołu ---------- */
.naglowek{position:relative;min-height:clamp(320px,46vh,500px);display:flex;align-items:flex-end;color:#fff;overflow:hidden;background:var(--granat)}
.naglowek-tlo{position:absolute;inset:0;overflow:hidden}
.naglowek-tlo img{position:absolute;left:0;top:-70px;width:100%;height:calc(100% + 140px);object-fit:cover}
.naglowek::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(90deg,rgba(9,16,24,.78) 0%,rgba(9,16,24,.5) 55%,rgba(9,16,24,.25) 100%),linear-gradient(0deg,rgba(9,16,24,.45),transparent 55%)}
.naglowek .wrap{position:relative;z-index:2;padding:clamp(48px,7vw,84px) 0 clamp(40px,6vw,64px)}
.naglowek h1{font-size:clamp(2.2rem,1.5rem + 2.8vw,3.7rem);max-width:18ch;text-shadow:0 2px 24px rgba(0,0,0,.25)}
.naglowek .hero-lead{max-width:52ch;margin-top:18px}
.okruszki{display:flex;gap:.5em;font-size:.88rem;font-weight:600;letter-spacing:.02em;opacity:.85;margin-bottom:18px}
.okruszki a:hover{text-decoration:underline;text-underline-offset:3px}
.naglowek.jasny{background:var(--tlo-2);color:var(--ink);min-height:0}
.naglowek.jasny::after{display:none}
.naglowek.jasny h1{text-shadow:none}
.naglowek.jasny .hero-lead{color:var(--ink-2);text-shadow:none}

/* ---------- WSPÓLNE ---------- */
.sekcja{padding:clamp(64px,8vw,104px) 0}
.sekcja.tlo{background:var(--tlo-2)}
.lead{font-size:clamp(1.05rem,.98rem + .3vw,1.2rem);color:var(--ink-2);max-width:58ch;margin-top:22px}
.lista{list-style:none;display:grid;gap:12px;margin-top:24px}
.lista li{position:relative;padding-left:28px;color:var(--ink-2)}
.lista li::before{content:"";position:absolute;left:0;top:.72em;width:16px;height:3px;border-radius:3px;background:linear-gradient(90deg,var(--cyjan-d),var(--woda))}
.lista li b{color:var(--ink)}
.etykieta{display:inline-block;font-size:.85rem;font-weight:700;letter-spacing:.06em;color:var(--cyjan-tekst);margin-bottom:12px}

/* skróty do usług (pigułki) */
.skoki{display:flex;flex-wrap:wrap;gap:10px;margin-top:30px}
.skoki a{border:1.5px solid var(--linia);border-radius:var(--r-btn);padding:.55em 1.15em;font-weight:600;font-size:.95rem;transition:border-color .25s,background .25s,color .25s}
.skoki a:hover{border-color:var(--cyjan);background:var(--cyjan);color:#0C1218}

/* ---------- OFERTA: usługa = zdjęcie + tekst, naprzemiennie ---------- */
.usluga{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,5.5vw,88px);align-items:center;padding:clamp(48px,6vw,80px) 0;border-top:1px solid var(--linia);scroll-margin-top:90px}
.usluga:first-child{border-top:0}
.usluga:nth-child(even) .usluga-art{order:2}
.usluga-art{aspect-ratio:5/4;border-radius:var(--r);overflow:hidden;background:var(--tlo-2)}
.usluga-art img{width:100%;height:100%;object-fit:cover}
.usluga h2{font-size:clamp(1.6rem,1.2rem + 1.3vw,2.2rem)}
.usluga p{color:var(--ink-2);margin-top:20px;max-width:56ch}
.usluga .btn{margin-top:30px}
.dwie-karty{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:clamp(40px,5vw,64px)}
.karta{background:var(--tlo-2);border-radius:var(--r);padding:clamp(26px,3.5vw,40px);scroll-margin-top:90px}
.karta h3{font-size:clamp(1.25rem,1.1rem + .5vw,1.5rem)}
.karta p{color:var(--ink-2);margin-top:12px}
.karta .link-strzalka{margin-top:20px}

/* jak pracujemy: kroki na kresce jak liczby na Start */
.kroki{list-style:none;display:grid;grid-template-columns:repeat(4,1fr);margin-top:44px;border-top:1.5px solid var(--ink);counter-reset:k}
.kroki li{counter-increment:k;padding:26px 24px 0 0}
.kroki li+li{padding-left:clamp(16px,2.4vw,32px);border-left:1px solid var(--linia)}
.kroki li::before{content:"0" counter(k);display:block;font-size:clamp(2.2rem,1.6rem + 2vw,3.4rem);font-weight:800;letter-spacing:-.04em;color:var(--cyjan);line-height:1}
.kroki h3{font-size:1.15rem;margin-top:16px}
.kroki p{color:var(--ink-2);margin-top:8px;font-size:.98rem}

/* ---------- REALIZACJE: foldery = jedna realizacja, galeria w powiększeniu ---------- */
.filtry{display:flex;flex-wrap:wrap;gap:10px;margin-top:30px}
.filtry button{font:inherit;font-weight:600;font-size:.95rem;border:1.5px solid var(--linia);background:#fff;color:var(--ink);border-radius:var(--r-btn);padding:.55em 1.2em;cursor:pointer;transition:border-color .25s,background .25s}
.filtry button:hover{border-color:var(--cyjan)}
.filtry button[aria-pressed="true"]{background:var(--granat);border-color:var(--granat);color:#fff}
.foldery{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(18px,2.4vw,30px);margin-top:40px}
.folder{display:block;cursor:pointer;border-radius:var(--r);outline-offset:4px}
.folder[hidden]{display:none}
.folder-art{position:relative;aspect-ratio:4/3;border-radius:var(--r);overflow:hidden;background:var(--tlo-2)}
.folder-art img{width:100%;height:100%;object-fit:cover;transition:transform .9s var(--ease)}
.folder:hover .folder-art img,.folder:focus-visible .folder-art img{transform:scale(1.05)}
.folder-ile{position:absolute;right:14px;bottom:14px;background:#0A1F35;color:#fff;font-size:.82rem;font-weight:700;border-radius:var(--r-btn);padding:6px 12px;backdrop-filter:blur(6px)}
.folder h3{font-size:1.15rem;margin-top:16px}
.folder p{color:var(--muted);font-size:.92rem;margin-top:4px}
.folder .zdjecia{display:none}

/* powiększenie (mechanika w rdzeniu: .lb, .lb-x, .lb-p, .lb-n, .lb-cap) */
.lb{position:fixed;inset:0;z-index:400;background:rgba(6,12,20,.94);display:flex;align-items:center;justify-content:center;padding:56px 72px}
.lb[hidden]{display:none}
.lb img{max-width:100%;max-height:calc(100svh - 150px);width:auto;height:auto;border-radius:var(--r)}
.lb-cap{position:absolute;left:0;right:0;bottom:22px;text-align:center;color:rgba(255,255,255,.88);font-size:.95rem;padding:0 20px}
.lb button{position:absolute;width:52px;height:52px;border-radius:50%;border:1.5px solid rgba(255,255,255,.4);background:rgba(255,255,255,.06);color:#fff;font:inherit;font-size:1.3rem;cursor:pointer;display:grid;place-items:center;transition:background .25s}
.lb button:hover{background:rgba(255,255,255,.16)}
.lb-x{top:18px;right:18px}.lb-p{left:16px;top:50%;translate:0 -50%}.lb-n{right:16px;top:50%;translate:0 -50%}

/* ---------- O NAS ---------- */
.historia{display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(32px,5.5vw,88px);align-items:center}
.historia-cytat{font-size:clamp(1.7rem,1.2rem + 1.9vw,2.7rem);font-weight:700;line-height:1.18;letter-spacing:-.02em}
.historia-cytat em{font-style:normal;color:var(--cyjan-tekst)}
.historia p{color:var(--ink-2)}
.historia p+p{margin-top:18px}
.uprawnienia{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:44px}
.uprawnienie{background:#fff;border-radius:var(--r);padding:28px 26px;border-top:4px solid var(--cyjan)}
.uprawnienie .ikona{width:76px;height:76px;margin:-8px 0 12px -6px}
.uprawnienie h3{font-size:1.12rem}
.uprawnienie p{color:var(--ink-2);margin-top:8px;font-size:.97rem}
.wspolpraca{display:grid;grid-template-columns:auto 1fr;gap:clamp(24px,4vw,56px);align-items:center;margin-top:clamp(40px,5vw,64px);padding:clamp(26px,3.5vw,40px);border:1.5px solid var(--linia);border-radius:var(--r)}
.wspolpraca img{height:40px;width:auto}
.wspolpraca p{color:var(--ink-2)}
.dane-firmy{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-top:36px}
.dane-firmy div{border-top:1px solid var(--linia);padding-top:16px}
.dane-firmy dt{font-size:.85rem;font-weight:700;color:var(--muted);letter-spacing:.03em}
.dane-firmy dd{margin-top:6px;font-weight:600}

/* ---------- KONTAKT ---------- */
.kt-siatka{display:grid;grid-template-columns:1fr 1.05fr;gap:clamp(32px,5vw,72px);align-items:start}
.kanaly{border-top:1px solid var(--linia)}
.kanal{display:grid;grid-template-columns:150px 1fr;gap:20px;padding:22px 0;border-bottom:1px solid var(--linia);align-items:baseline}
.kanal dt{font-weight:700;color:var(--muted);font-size:.92rem;letter-spacing:.02em}
.kanal dd{font-size:1.1rem;font-weight:600;min-width:0}
.kanal dd a{display:inline-block;padding:4px 0}
.kanal dd small{display:block;font-size:.92rem;font-weight:400;color:var(--ink-2);margin-top:4px}
.kanal .duzy{font-size:clamp(1.6rem,1.2rem + 1.4vw,2.2rem);font-weight:800;letter-spacing:-.02em;color:var(--granat)}
.kanal a:hover{color:var(--cyjan-tekst)}
.formularz{background:#fff;border-radius:var(--r);padding:clamp(26px,3.5vw,44px);box-shadow:0 1px 0 rgba(14,42,71,.04),0 30px 60px -36px rgba(14,42,71,.45);border:1px solid var(--linia)}
.formularz h2{font-size:clamp(1.4rem,1.15rem + .8vw,1.8rem)}
.formularz>p{color:var(--ink-2);margin-top:10px}
.pole{display:grid;gap:7px;margin-top:20px}
.pole label{font-weight:700;font-size:.92rem}
.pole input,.pole select,.pole textarea{font:inherit;font-size:1rem;color:var(--ink);background:#F7FAFC;border:1.5px solid #D5E0E8;border-radius:var(--r);padding:.8em .95em;width:100%;transition:border-color .2s,box-shadow .2s,background .2s}
.pole textarea{min-height:120px;resize:vertical}
.pole input:focus,.pole select:focus,.pole textarea:focus{outline:none;border-color:var(--cyjan);background:#fff;box-shadow:0 0 0 4px rgba(5,160,226,.15)}
.pola-2{display:grid;grid-template-columns:1fr 1fr;gap:0 16px}
.formularz .btn{margin-top:26px;width:100%;justify-content:center;border:0;cursor:pointer;font-family:inherit}
.formularz-uwaga{font-size:.85rem;color:var(--muted);margin-top:14px;text-align:center}
.mapa-google{margin-top:44px;border-radius:var(--r);overflow:hidden;aspect-ratio:21/8;background:var(--tlo-2) center/cover no-repeat;position:relative}
.mapa-google iframe{width:100%;height:100%;display:block}

/* ---------- MAPA ZASIĘGU na Starcie: zwykła mapa Google (K. 10.10), kadr = zrzut 680×560 ---------- */
/* pas od krawędzi do krawędzi: proporcja ramy = proporcja kadru z <source> w danym przedziale */
.zasieg-pas{margin-top:clamp(40px,5vw,64px)}
.mapa-google.mapa-zasieg{margin-top:0;border-radius:0;aspect-ratio:1920/600;border-block:1px solid var(--linia)}
@media (max-width:1760px){ .mapa-google.mapa-zasieg{aspect-ratio:1600/560} }
@media (max-width:1440px){ .mapa-google.mapa-zasieg{aspect-ratio:1280/520} }
@media (max-width:1150px){ .mapa-google.mapa-zasieg{aspect-ratio:1024/480} }
@media (max-width:920px){ .mapa-google.mapa-zasieg{aspect-ratio:820/440} }
/* przycisk na dole, żeby nie zasłaniał pinezki Kietrza w środku mapy */
.mapa-google.mapa-zasieg [data-po-kliknieciu]{justify-content:flex-end;padding:0 0 clamp(72px,9vw,120px)}
.mapka-podpis{font-size:.88rem;color:var(--muted);margin-top:14px}
.zasieg .woj{margin-top:28px}
.wsie{margin-top:20px;font-size:.95rem;color:var(--ink-2)}

/* ---------- POLITYKA ---------- */
.tekst{max-width:56ch}
.tekst h2{font-size:clamp(1.3rem,1.1rem + .6vw,1.6rem);margin-top:44px}
.tekst p,.tekst li{color:var(--ink-2);margin-top:14px}
.tekst ul{padding-left:1.2em}
.tekst a{color:var(--cyjan-tekst);text-decoration:underline;text-underline-offset:3px}

/* ---------- TELEFON ---------- */
@media (max-width:980px){
  .usluga,.historia,.kt-siatka{grid-template-columns:1fr}
  .usluga:nth-child(even) .usluga-art{order:0}
  .foldery{grid-template-columns:1fr 1fr}
  .kroki{grid-template-columns:1fr 1fr;border-top:0}
  .kroki li,.kroki li+li{padding:22px 16px 22px 0;border-left:0;border-top:1.5px solid var(--ink)}
  .uprawnienia{grid-template-columns:1fr 1fr}
  .dane-firmy{grid-template-columns:1fr 1fr}
  .mapa-google{aspect-ratio:4/3}
}
@media (max-width:700px){ .mapa-google.mapa-zasieg{aspect-ratio:1} }
.zasieg-pas .mapka-podpis{margin-top:14px}
@media (max-width:820px){
  .naglowek{min-height:clamp(280px,40svh,380px)}
  .naglowek-tlo img{top:0;height:100%}
  .naglowek::after{background:linear-gradient(0deg,rgba(9,16,24,.82) 0%,rgba(9,16,24,.5) 60%,rgba(9,16,24,.3) 100%)}
  .dwie-karty,.uprawnienia,.pola-2{grid-template-columns:1fr}
  .wspolpraca{grid-template-columns:1fr}
  .kanal{grid-template-columns:1fr;gap:4px}
  .lb{padding:64px 12px}
  .lb-p,.lb-n{top:auto;bottom:12px;translate:none}
  .lb-cap{bottom:84px}
}
@media (max-width:560px){
  .foldery{grid-template-columns:1fr}
  .kroki{grid-template-columns:1fr}
  .dane-firmy{grid-template-columns:1fr}
}

/* mapa Google: zrzut tego samego osadzenia, żywa mapa po kliknięciu (rdzeń, blok 6) */
/* przycisk na dole kadru, nie na pinezce (K. 10.10 na Starcie; 13.10 to samo na Kontakcie) - pinezka stoi w środku zrzutu */
.mapa-google [data-po-kliknieciu]{position:relative;padding:0 0 clamp(40px,5vw,56px);height:100%;background:none;justify-content:flex-end}
.mapa-google picture,.mapa-google picture img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.mapa-google .pk-btn{position:relative;z-index:2;box-shadow:0 14px 30px -12px rgba(0,0,0,.45)}

/* nie łam kodu pocztowego ani NIP-u („48-” / „130 Kietrz” na telefonie, 13.10) */
.nw{white-space:nowrap}

/* realizacje: wejście z podmenu (#kotly) przewija do filtrów, nie pod pasek */
.filtry,.filtry button{scroll-margin-top:110px}

/* menu: „Realizacje” z listą kategorii na najechanie (K. 13.10); mechanika w rdzeniu (.ma-podmenu) */
.strzalka{display:inline-block;position:relative;width:10px;height:10px}
.strzalka::before{content:"";position:absolute;inset:0;margin:auto;width:6px;height:6px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:translateY(-2px) rotate(45deg)}
.podmenu{top:calc(100% + 22px);left:-16px;min-width:230px;display:flex;flex-direction:column;padding:8px;background:#fff;border:1px solid var(--linia);border-radius:var(--r);box-shadow:0 24px 44px -20px rgba(14,42,71,.38)}
.podmenu::before{top:-24px;height:24px}
.nawigacja .podmenu a{display:block;padding:11px 14px;border-radius:var(--r);font-weight:600;font-size:.98rem;color:var(--ink);white-space:nowrap;transition:background .2s,color .2s}
.nawigacja .podmenu a:hover,.nawigacja .podmenu a:focus-visible{background:var(--tlo-2);color:var(--cyjan-tekst)}
.nawigacja .podmenu a:first-child{border-bottom:1px solid var(--linia);border-radius:var(--r) var(--r) 0 0;margin-bottom:4px}
@media (max-width:820px){
  .podmenu,.strzalka{display:none}
}