/* ergohestia.glogow.pl – statyczna kopia strony (wcześniej WordPress + Elementor). Studio Di, 2026.
   Wymiary, kolory i kroje odczytane z CSS i pomiarów obecnej strony.
   Krój „Muli” z CSS Elementora nigdy się nie ładował, więc odwiedzający widzieli Helvetica/Arial: zostawiamy to 1:1. */

@font-face { font-family: "Lato"; font-style: normal; font-weight: 400; font-display: swap; src: url(/assets/fonts/lato-400.woff2) format("woff2"); }
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 500; font-display: swap; src: url(/assets/fonts/poppins-500.woff2) format("woff2"); }
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 600; font-display: swap; src: url(/assets/fonts/poppins-600.woff2) format("woff2"); }
@font-face { font-family: "Roboto"; font-style: normal; font-weight: 400; font-display: swap; src: url(/assets/fonts/roboto-400.woff2) format("woff2"); }

:root {
  --font: sans-serif;        /* jak na obecnej stronie: „Muli” się nie ładował, więc przeglądarka brała swój domyślny krój bezszeryfowy */
  --czerwony: #cd1734;
  --czerwony-hover: #c10033;
  --czerwony-linia: #ff0000;
  --ciemny: #1b1b1b;
  --tekst: #686767;
  --tytul: #777777;
  --tlo: #f4f4f4;
  --tlo-2: #f3f2f2;
  --szary: #6e6e6e;          /* w oryginale #a8a8a8 – przyciemniony do kontrastu 4,5:1 */
  --menu: #212121;
  --boki: 50px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: 20px; }
body { margin: 0; background: #fff; color: var(--tekst); font: 400 14px/22px var(--font); -webkit-font-smoothing: antialiased; overflow-x: hidden; }
img { display: block; max-width: 100%; height: auto; }
picture { display: contents; }
picture > source { display: none; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, h4, p, ul, ol, figure, blockquote { margin: 0; }
h1, h2, h3, h4 { font-weight: 400; }
button { font: inherit; }
b, strong { font-weight: 700; }
:focus-visible { outline: 2px solid var(--czerwony); outline-offset: 2px; }
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip { position: absolute; left: 10px; top: -60px; z-index: 200; background: var(--czerwony); color: #fff; padding: 12px 18px; font-weight: 700; }
.skip:focus { top: 10px; }
.nw { white-space: nowrap; }

/* ---------- Kontener i sekcje ---------- */
.w { max-width: calc(1240px + 2 * var(--boki)); margin: 0 auto; padding: 0 var(--boki); }
.w--f { max-width: 1240px; padding: 0 20px; }           /* sekcje „full width” Elementora z kolumnami po 10 px */

/* ---------- Nagłówek i menu ---------- */
.naglowek { background: #fff; position: relative; z-index: 50; }
.naglowek__wew { display: flex; align-items: center; justify-content: space-between; min-height: 106px; padding: 0 60px; }
.logo { display: block; width: 85px; flex: none; }
.logo img { width: 85px; height: 48px; }
.menu ul { list-style: none; margin: 0; padding: 0; display: flex; }
.menu li a { position: relative; display: block; padding: 13px 20px; font: 700 16px/60px var(--font); letter-spacing: 1px; color: var(--menu); transition: color .3s; }
.menu li a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--czerwony); opacity: 0; transition: opacity .3s; }
.menu li a:hover, .menu li a:focus-visible, .menu li a[aria-current="page"] { color: var(--czerwony); }
.menu li a:hover::after, .menu li a[aria-current="page"]::after { opacity: 1; }
.menu-przycisk { display: none; }

@media (max-width: 1024px) {
  .naglowek__wew { min-height: 100px; padding: 0 20px; }
  .menu-przycisk { display: flex; align-items: center; justify-content: center; position: fixed; top: 26px; right: 16px; z-index: 120; width: 48px; height: 48px; padding: 0; border: 0; border-radius: 3px; background: rgba(255, 255, 255, .96); box-shadow: 0 2px 10px rgba(0, 0, 0, .12); color: var(--menu); cursor: pointer; }
  .menu-przycisk span, .menu-przycisk span::before, .menu-przycisk span::after { display: block; width: 22px; height: 2px; background: currentColor; border-radius: 1px; transition: transform .3s ease, background-color .3s ease; }
  .menu-przycisk span { position: relative; }
  .menu-przycisk span::before, .menu-przycisk span::after { content: ""; position: absolute; left: 0; }
  .menu-przycisk span::before { top: -7px; }
  .menu-przycisk span::after { top: 7px; }
  .menu-otwarte .menu-przycisk { background: transparent; box-shadow: none; color: #fff; }
  .menu-otwarte .menu-przycisk span { background: transparent; }
  .menu-otwarte .menu-przycisk span::before { transform: translateY(7px) rotate(45deg); }
  .menu-otwarte .menu-przycisk span::after { transform: translateY(-7px) rotate(-45deg); }

  .menu { position: fixed; inset: 0; z-index: 110; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 28px; padding: 90px 24px 32px; background: var(--czerwony); overflow-y: auto; overscroll-behavior: contain;
    visibility: hidden; opacity: 0; clip-path: circle(0 at calc(100% - 40px) 50px); transition: clip-path .45s cubic-bezier(.4, 0, .2, 1), opacity .3s ease, visibility 0s linear .45s; }
  .menu-otwarte .menu { visibility: visible; opacity: 1; clip-path: circle(150% at calc(100% - 40px) 50px); transition: clip-path .5s cubic-bezier(.4, 0, .2, 1), opacity .2s ease, visibility 0s; }
  .menu ul { flex-direction: column; align-items: center; gap: 4px; }
  .menu li { opacity: 0; transform: translateY(12px); transition: opacity .3s ease, transform .3s ease; }
  .menu-otwarte .menu li { opacity: 1; transform: none; transition-delay: calc(.12s + var(--i, 0) * .04s); }
  .menu li a { color: #fff; font-size: 22px; line-height: 30px; letter-spacing: .5px; padding: 9px 18px; text-align: center; }
  .menu li a::after { left: 18px; right: 18px; bottom: 5px; height: 2px; background: #fff; }
  .menu li a:hover, .menu li a:focus-visible, .menu li a[aria-current="page"] { color: #fff; }
  .menu li a:focus-visible { outline-color: #fff; }
  .menu-otwarte, .menu-otwarte body { overflow: hidden; }
}
@media (max-width: 1024px) {
  html:not(.js) .menu-przycisk { display: none; }
  html:not(.js) .naglowek__wew { flex-wrap: wrap; padding-bottom: 10px; }
  html:not(.js) .menu { position: static; width: 100%; padding: 0; visibility: visible; opacity: 1; clip-path: none; background: none; }
  html:not(.js) .menu ul { flex-direction: row; flex-wrap: wrap; justify-content: center; }
  html:not(.js) .menu li { opacity: 1; transform: none; }
  html:not(.js) .menu li a { color: var(--menu); font-size: 15px; line-height: 26px; padding: 9px 10px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: .01ms !important; transition-delay: 0s !important; animation-duration: .01ms !important; scroll-behavior: auto !important; }
}

/* ---------- Tytuł podstrony (szary pas) i podmenu „O nas” ---------- */
.tytul { background: var(--tlo); padding: 40px 30px; text-align: center; }
.tytul h1 { font: 700 40px/40px var(--font); color: var(--tytul); }
.podmenu { padding: 50px var(--boki) 70px; }
.podmenu ul { list-style: none; margin: 0 auto; padding: 0; max-width: 1240px; display: flex; flex-wrap: wrap; justify-content: center; }
.podmenu li { padding: 10px; }
.podmenu a { display: block; padding: 12px 24px; background: var(--czerwony); color: #fff; font: 300 14px/22px var(--font); transition: background-color .3s; }
.podmenu a:hover, .podmenu a[aria-current="page"] { background: var(--czerwony-hover); }

/* ---------- Wspólne elementy treści ---------- */
.nad { font: 400 17px/27px var(--font); color: var(--czerwony); }
.nad--kreska::after { content: ""; display: inline-block; width: 110px; height: 2px; background: var(--czerwony-linia); margin-left: 40px; position: relative; top: -3px; }
.h-duzy { font: 700 43px/55px var(--font); color: var(--ciemny); }
.h-sredni { font: 400 27px/34px var(--font); color: var(--ciemny); }
.h-maly { font: 400 20px/30px var(--font); color: var(--ciemny); }
.tekst p + p, .tekst p + ul, .tekst ul + p { margin-top: 1.5em; }
.tekst a { color: var(--czerwony); }
.tekst a:hover { text-decoration: underline; }
.justuj { text-align: justify; }
.odstep-p { margin-top: 1.5em; }
a.ciemny { color: inherit; }
a.ciemny:hover { color: var(--czerwony); }
.box-czerwony { background: var(--czerwony); color: #fff; padding: 20px 40px; }
.box-czerwony h2 { font: 400 20px/30px var(--font); color: #fff; }
.box-czerwony p { font: 300 14px/22px var(--font); }
.kreska-biala { display: block; width: 45px; height: 2px; background: #fff; margin: 20px 0; }
.odstep-50 { height: 50px; }
.odstep-70 { height: 70px; }
.odstep-100 { height: 100px; }

/* ---------- Strona główna ---------- */
.hero { position: relative; isolation: isolate; overflow: hidden; padding: 150px var(--boki); }
.hero__tlo, .hero__tlo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; z-index: -1; }
.hero__wew { position: relative; max-width: 1240px; margin: 0 auto; }
.hero__oddzial { font: 300 25px/28px var(--font); color: #0a0a0a; }
.hero__rzad { display: flex; align-items: center; padding: 20px 0 30px; margin-top: 20px; }
.hero__rzad img { width: 133px; height: 133px; flex: none; margin-right: 20px; }
.hero h1 { font: 700 60px/70px var(--font); color: #0a0a0a; }
.przycisk-bialy { display: inline-flex; align-items: center; gap: 11px; background: #fff; color: #bf0808; font: 700 15px/17px var(--font); padding: 20px 30px; transition: background-color .3s, color .3s; }
.przycisk-bialy svg { width: 14px; height: 14px; fill: currentColor; }
.przycisk-bialy:hover, .przycisk-bialy:focus-visible { background: #c10000; color: #fff; }
.przycisk-link { display: inline-block; font: 400 17px/17px "Lato", var(--font); color: #d11919; border-bottom: 2px solid #d11919; padding-bottom: 10px; transition: transform .3s; }
.przycisk-link:hover { transform: translateY(-2px); }

.kontakt-glowna { padding: 50px var(--boki) 20px; background: linear-gradient(0deg, var(--tlo-2) 70%, #fff 70%); }
.kontakt-glowna__siatka, .dojazd__siatka { max-width: 1240px; margin: 0 auto; display: grid; grid-template-columns: 50% 25% 24.666%; }
.kontakt-glowna__dane .h-sredni { font-weight: 300; margin-top: 100px; }
/* telefon i e-mail biura tylko na /kontakt/ (prośba klienta 2026-10): w ich miejscu godziny i przycisk do Kontaktu */
.kontakt-glowna__dni { margin-top: 20px; font: 400 17px/24px var(--font); color: var(--tekst); }
.kontakt-glowna__godz { font: 700 43px/55px var(--font); color: var(--ciemny); }
.kontakt-glowna__przycisk { margin-top: 24px; }
.kolumna-foto img { width: 100%; aspect-ratio: 1; object-fit: cover; }
.dojazd { padding: 20px var(--boki) 50px; background: linear-gradient(180deg, var(--tlo-2) 54%, #fff 54%); }
.dojazd__siatka { grid-template-columns: 25% 24.666% 50%; }
.dojazd__adres { padding-left: 50px; }
.dojazd__adres .h-sredni { font-weight: 300; margin-top: 20px; }
.dojazd__adres .h-duzy { margin-top: 20px; }
.dojazd__adres .h-hasło, .dojazd__haslo { font: 300 28px/34px var(--font); color: var(--ciemny); margin-top: 20px; padding: 15px 0 10px; }

/* ---------- O nas ---------- */
.onas { background: linear-gradient(180deg, #fff 25%, var(--tlo-2) 25%); }
.onas__siatka { max-width: 1240px; margin: 0 auto; display: grid; grid-template-columns: 50% 25% 24.666%; }
.onas__tekst { padding: 50px 55px 50px 50px; }
.onas__tekst .h-sredni { margin-bottom: 20px; }
.onas__tekst p { text-align: justify; }
.onas__czytaj { display: inline-flex; align-items: center; gap: 8px; margin: 20px 0; font: 400 13px/16px var(--font); color: var(--ciemny); }
.onas__czytaj::after { content: "›"; color: var(--czerwony); font-size: 18px; }
.onas__czytaj:hover { color: var(--czerwony); }
.onas__zdjecia img { width: 100%; aspect-ratio: 1; object-fit: cover; }
.onas__zdjecia img + img, .onas__zdjecia picture + picture img { margin-top: 20px; }
.onas__czerwona { background: linear-gradient(180deg, var(--czerwony) 74%, var(--tlo-2) 74%); }
.onas__czerwona .ikona { padding: 40px 40px 20px; }
.onas__czerwona h2 { font: 300 20px/30px var(--font); color: #fff; padding: 20px 40px 0; }
.onas__czerwona .kreska-biala { width: 50px; margin: 15px 40px 55px; }
.onas__czerwona .mapka { display: block; margin-top: 20px; }
.onas__czerwona .mapka img { width: 100%; aspect-ratio: 1; object-fit: cover; }
.zespol { padding: 70px var(--boki) 100px; }
.zespol > h2 { text-align: center; margin-bottom: 35px; }
.zespol__siatka { max-width: 1180px; margin: 0 auto; display: grid; grid-template-columns: repeat(4, 1fr); }
.osoba-foto { padding: 10px; }
.osoba-foto img { width: 275px; }
.osoba-opis { padding: 30px 107px 0 10px; }
.osoba-opis .rola { font: 400 13px/16px var(--font); color: var(--czerwony); text-transform: uppercase; }
.osoba-opis .imie { font: 400 20px/30px var(--font); color: var(--ciemny); margin: 5px 0 20px; }
.osoba-opis .motto { font: 400 14px/22px var(--font); color: var(--tekst); }
.misja { background: var(--tlo-2); padding: 0 var(--boki); }
.misja__siatka { max-width: 1240px; margin: 0 auto; display: grid; grid-template-columns: 75% 25%; }
.misja__tekst { padding: 50px 0 40px; }
.misja__tekst h2 { margin-bottom: 20px; }
.misja__foto img { width: 100%; height: 100%; object-fit: cover; }
.galeria { padding: 0 var(--boki) 50px; background: linear-gradient(180deg, var(--tlo-2) 64%, #fff 64%); }
.galeria__siatka { max-width: 1240px; margin: 0 auto; display: grid; grid-template-columns: 50% 25% 24.666%; align-items: start; }
.galeria__siatka img { width: 100%; }
.galeria__siatka .kw img { aspect-ratio: 1; object-fit: cover; }

/* ---------- Oferta ---------- */
.oferta { background: var(--tlo-2); padding: 0 var(--boki); margin-top: 120px; }
.oferta__siatka { max-width: 1240px; margin: 0 auto; display: grid; grid-template-columns: 40% 60%; }
.oferta__tekst { padding: 100px 60px 80px 10px; }
.oferta__tekst h2 { margin-bottom: 20px; }
.oferta__tekst h2 span { display: block; margin-top: 34px; }
.oferta__film { padding: 10px; margin-top: -70px; }
.oferta__film img { width: 100%; aspect-ratio: 780 / 436; object-fit: cover; }
.partnerzy { max-width: 1240px; margin: 0 auto; padding: 50px 20px 70px; display: grid; grid-template-columns: 1fr 1fr; }
.partnerzy > div { padding: 20px; }
.partnerzy .h-maly { margin-bottom: 20px; }
.partnerzy .h-duzy a:hover { text-decoration: underline; text-decoration-color: var(--czerwony); }

/* ---------- Szkody ---------- */
.szkody { padding: 100px var(--boki) 50px; }
.szkody__siatka { max-width: 1240px; margin: 0 auto; display: grid; grid-template-columns: 47% 53%; }
.szkody__tekst { padding: 60px; }
.szkody__tekst h2 { margin-bottom: 20px; }
.szkody__tekst h2 { margin-top: 20px; }
.szkody__tekst h2:first-child { margin-top: 0; }
.szkody__tekst .szkody__wyroznienie { font: 400 17px/27px var(--font); color: var(--czerwony); }
.szkody__tekst p { text-align: justify; }
.szkody__foto { padding: 10px; }
.szkody__foto img { width: 100%; }
.szkody-h { text-align: center; padding: 10px 20px; }
.towarzystwa { max-width: calc(1180px + 2 * var(--boki)); margin: 0 auto; padding: 50px var(--boki); display: grid; grid-template-columns: repeat(3, 1fr); }
.towarzystwa > div { padding: 30px; }
.towarzystwa > div:nth-child(odd) { background: var(--tlo); }
.towarzystwa img { width: 100%; aspect-ratio: 500 / 350; object-fit: contain; background: #fff; margin-bottom: 20px; }
.towarzystwa p { color: var(--tekst); }
.towarzystwa a { color: var(--czerwony); }
.towarzystwa a:hover { text-decoration: underline; }
.towarzystwa a.tel { color: inherit; }

/* ---------- Dołącz ---------- */
.zyski-h { text-align: center; padding: 60px 20px 60px; }
.zyski { max-width: calc(1180px + 2 * var(--boki)); margin: 0 auto; padding: 0 var(--boki) 50px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 50px 30px; }
.zysk { background: var(--tlo); padding: 55px 33px 50px; transition: background-color 1.5s; }
.zysk:hover { background: #e6e6e6; }
.zysk h3 { font: 400 20px/30px var(--font); color: var(--ciemny); margin-bottom: 15px; }
.zysk p { font: 400 13px/16px var(--font); color: var(--ciemny); text-align: justify; hyphens: auto; -webkit-hyphens: auto; }
.zysk a { color: var(--czerwony); word-break: break-all; }
.zysk-foto { grid-column: 4; grid-row: 3; margin-top: -50px; }
.ihestia { background: var(--tlo-2); padding: 0 var(--boki) 100px; margin: 120px 0 70px; }
.ihestia__siatka { max-width: 1240px; margin: 0 auto; display: grid; grid-template-columns: 40% 60%; }
.ihestia__tekst { padding: 100px 60px 50px 10px; }
.ihestia__tekst h2 { margin-bottom: 20px; }
.ihestia__tekst ul { margin: 0; padding: 0 0 0 45px; color: #666d74; }
.ihestia__film { padding: 10px; margin-top: -70px; }

/* ---------- Film / mapa ładowane po kliknięciu ---------- */
.na-klik { position: relative; display: block; width: 100%; overflow: hidden; background: #111; }
.na-klik iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.na-klik__przycisk { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; width: 100%; padding: 20px; border: 0; background: transparent; color: #fff; cursor: pointer; text-align: center; }
.na-klik__przycisk img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.na-klik__etykieta { position: relative; display: inline-flex; align-items: center; gap: 10px; min-height: 48px; padding: 12px 24px; background: var(--czerwony); color: #fff; font: 700 15px/20px var(--font); transition: background-color .3s; }
.na-klik__przycisk:hover .na-klik__etykieta, .na-klik__przycisk:focus-visible .na-klik__etykieta { background: var(--czerwony-hover); }
.na-klik__etykieta svg { width: 18px; height: 18px; fill: currentColor; }
.na-klik__info { position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%); width: max-content; max-width: calc(100% - 28px); font: 400 13px/18px var(--font); color: #fff; background: rgba(0, 0, 0, .68); padding: 6px 10px; text-align: center; }
.na-klik__info a { text-decoration: underline; }
.film { aspect-ratio: 16 / 9; }
/* „Oferta”: logo ERGO Hestii w lewym dolnym rogu kadru – przycisk na zdjęciu po prawej, informacja o YouTube pod filmem */
.film--oferta { overflow: visible; margin-bottom: 52px; }
.film--oferta .na-klik__przycisk { justify-content: flex-end; padding: 0 0 26px 24%; }
.film--oferta .na-klik__info { top: 100%; bottom: auto; left: 0; transform: none; width: 100%; max-width: none; padding: 8px 0 0; background: none; color: var(--tekst); text-align: left; }

/* ---------- Do pobrania: miniaturki druków jak na starej stronie, podpis w jasnym polu ---------- */
.pliki { max-width: calc(1180px + 2 * var(--boki)); margin: 0 auto; padding: 60px var(--boki) 80px; }
.pliki ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 50px 30px; }
.plik { display: flex; flex-direction: column; height: 100%; color: var(--tekst); }
.plik__miniatura { display: flex; align-items: flex-end; justify-content: center; aspect-ratio: 240 / 301; padding: 0 10px 18px; }
.plik__miniatura img { width: auto; max-width: 100%; max-height: 100%; transition: transform .3s; }
.plik:hover .plik__miniatura img, .plik:focus-visible .plik__miniatura img { transform: translateY(-6px); }
.plik__opis { flex: 1; display: flex; flex-direction: column; justify-content: center; gap: 4px; padding: 10px 12px; background: #f8f8f8; text-align: center; transition: background-color .3s; }
.plik__nazwa { font: 300 14px/20px var(--font); color: var(--tekst); transition: color .3s; }
.plik__info { font: 400 12px/16px var(--font); color: var(--szary); }
.plik:hover .plik__opis { background: #efefef; }
.plik:hover .plik__nazwa { color: var(--czerwony); }
.plik:focus-visible { outline: 2px solid var(--czerwony); outline-offset: 4px; }

/* ---------- Kontakt ---------- */
/* Ramka dla osób spoza oddziału (prośba klienta 2026-10): kieruje do infolinii i obsługi online centrali */
.dla-kogo { width: calc(100% - 2 * var(--boki)); max-width: 1180px; margin: 50px auto 0; padding: 30px 30px 30px 26px; background: var(--tlo); border-left: 4px solid var(--czerwony); }
.dla-kogo__tytul { font: 700 20px/28px var(--font); color: var(--ciemny); margin-bottom: 12px; }
.dla-kogo p { max-width: 880px; }
.dla-kogo__przyciski { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 22px; }
.dla-kogo__my { margin-top: 20px; font-size: 13px; line-height: 20px; color: var(--szary); }
.dla-kogo + .kontakt { padding-top: 30px; }
.przycisk-obrys { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 48px; padding: 10px 26px; border: 2px solid var(--czerwony); color: var(--czerwony); font: 700 15px/20px var(--font); transition: background-color .3s, color .3s; }
.przycisk-obrys:hover { background: var(--czerwony); color: #fff; }
.przycisk-obrys svg { width: 18px; height: 18px; fill: currentColor; }
.przycisk-obrys, .przycisk-czerwony { text-align: center; }
@media (max-width: 400px) { .przycisk-obrys svg { display: none; } }   /* „Obsługa online Ergo Hestii” w jednej linii od 360 px */
.link-strzalka { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; color: var(--czerwony); font-weight: 700; }
.link-strzalka svg { flex: none; width: 16px; height: 16px; fill: currentColor; transition: transform .3s; }
.link-strzalka:hover { text-decoration: underline; }
.link-strzalka:hover svg { transform: translateX(3px); }
.online p + p { margin-top: 8px; }
.kontakt { max-width: calc(1180px + 2 * var(--boki)); margin: 0 auto; padding: 50px var(--boki); display: grid; grid-template-columns: 1fr 1fr; }
.kontakt__adresy { padding: 30px; }
.kontakt__adresy .h-duzy { margin: 20px 0; }
.kontakt__tel { font: 400 27px/34px var(--font); color: var(--ciemny); }
.kontakt__tel a:hover { color: var(--czerwony); }
.kontakt__blok + .kontakt__blok { margin-top: 20px; }
.kontakt__blok--glogow { padding-bottom: 40px; }
.godziny { font: 400 20px/30px var(--font); color: var(--ciemny); margin-top: 20px; }
.kontakt__budynek { margin-top: 50px; }
.kontakt__budynek img { width: 100%; }
.kontakt__osoby { padding: 30px; }
.rzad { display: grid; grid-template-columns: 1fr 1fr; align-items: center; }
.rzad + .rzad { margin-top: 0; }
.rzad__foto { padding: 10px; }
.rzad__opis { padding: 10px; }
.online-ikona { display: flex; justify-content: center; padding: 45px 0; }
.online-ikona img { width: 81px; }
.online h2 { font: 400 20px/30px var(--font); color: #cd1936; margin-bottom: 20px; }
.online p { font: 400 14px/22px var(--font); }
.rzad__opis .rola { font: 400 13px/16px var(--font); color: #cd1936; text-transform: uppercase; }
.rzad__opis .imie { font: 400 20px/30px var(--font); color: var(--ciemny); margin: 20px 0; }
.rzad__opis ul { list-style: none; margin: 0; padding: 0; font: 300 14px/22px var(--font); }
.rzad__opis li + li { margin-top: 5px; }
.rzad__opis a { color: #dd0026; }
@media (min-width: 1025px) { .rzad__opis a { white-space: nowrap; } }
.rzad__opis a:hover { text-decoration: underline; }
.rzad__opis .tel { color: var(--tekst); }
.mapa-sekcja { padding: 50px var(--boki); }
.mapa-sekcja__wew { max-width: 1240px; margin: 0 auto; background: #151515 url(/assets/img/tlo-mapa-1920.jpg) center / cover no-repeat; padding: 100px 30px 30px; }
.mapa-sekcja h2 { color: #fff; text-align: center; padding: 0 50px; }
.mapa-sekcja h2::after { content: ""; display: inline-block; width: 110px; height: 2px; background: var(--czerwony-linia); margin-left: 40px; position: relative; top: -3px; }
.mapa { height: 420px; margin-top: 70px; }
.mapa .na-klik__przycisk img { filter: grayscale(1) brightness(.75); }
/* ---------- Formularz kontaktowy: karta = czerwony panel z danymi + szary panel z polami ---------- */
.formularz-sekcja { padding: 100px var(--boki); }
.formularz-karta { max-width: 1180px; margin: 0 auto; display: grid; grid-template-columns: 360px minmax(0, 1fr); }
.formularz-info { background: var(--czerwony); color: #fff; padding: 50px 40px; }
.formularz-info :focus-visible { outline-color: #fff; }
.formularz-info__ikona { display: block; width: 56px; height: 42px; margin-bottom: 30px; color: #fff; }
.formularz-info__nad { font: 400 17px/27px var(--font); }
.formularz-info__nad::after { content: ""; display: block; width: 45px; height: 2px; margin-top: 15px; background: #fff; }
.formularz-info__tytul { margin-top: 20px; font: 700 43px/50px var(--font); color: #fff; }
.formularz-info__opis { margin-top: 18px; font: 300 15px/24px var(--font); }
.formularz-info__lista { list-style: none; margin: 30px 0 0; padding: 24px 0 0; border-top: 1px solid rgba(255, 255, 255, .35); }
.formularz-info__lista li { display: flex; align-items: center; gap: 12px; min-height: 44px; font: 400 15px/20px var(--font); }
.formularz-info__lista svg { flex: none; width: 18px; height: 18px; fill: currentColor; }
.formularz-info__lista a { display: inline-flex; align-items: center; min-height: 44px; color: #fff; overflow-wrap: anywhere; }
.formularz-info__lista a:hover { text-decoration: underline; }
.formularz { background: var(--tlo); padding: 50px 60px; }
.formularz__pola { display: grid; grid-template-columns: 1fr 1fr; gap: 24px 20px; }
.pole { min-width: 0; }
.pole--cale { grid-column: 1 / -1; }
.pole__etykieta { display: block; margin-bottom: 8px; padding: 0; font: 700 14px/20px var(--font); color: var(--ciemny); }
.wymagane { color: var(--czerwony); }
.formularz input[type="text"], .formularz input[type="email"], .formularz input[type="tel"], .formularz textarea {
  display: block; width: 100%; height: 50px; padding: 0 16px; border: 1px solid #d4d4d4; border-radius: 0; background: #fff; color: var(--ciemny);
  font: 400 16px/1.4 var(--font); -webkit-appearance: none; appearance: none; transition: border-color .2s, box-shadow .2s; }
.formularz textarea { height: auto; min-height: 150px; padding: 13px 16px; resize: vertical; }
.formularz ::placeholder { color: #8a8a8a; opacity: 1; }
.formularz input:hover, .formularz textarea:hover { border-color: #a8a8a8; }
.formularz input:focus, .formularz textarea:focus { outline: none; border-color: var(--czerwony); box-shadow: 0 0 0 3px rgba(205, 23, 52, .18); }
.formularz input[aria-invalid="true"], .formularz textarea[aria-invalid="true"] { border-color: var(--czerwony); background-color: #fff8f9; }
.pole-blad { display: flex; align-items: flex-start; gap: 7px; margin-top: 8px; font: 400 13px/18px var(--font); color: #b3102b; }
.pole-blad::before { content: "!"; flex: none; width: 16px; height: 16px; margin-top: 1px; border-radius: 50%; background: #b3102b; color: #fff; font: 700 11px/16px var(--font); text-align: center; }
.sprawy { margin: 0; padding: 0; border: 0; min-width: 0; }
.sprawy__lista { display: flex; flex-wrap: wrap; gap: 8px; }
.sprawa { position: relative; cursor: pointer; }
.sprawa input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.sprawa span { display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; border: 1px solid #d4d4d4; background: #fff; font: 400 14px/18px var(--font); color: var(--ciemny); transition: background-color .2s, border-color .2s, color .2s; }
.sprawa:hover span { border-color: var(--czerwony); color: var(--czerwony); }
.sprawa input:checked + span { background: var(--czerwony); border-color: var(--czerwony); color: #fff; }
.sprawa input:focus-visible + span { outline: 2px solid var(--czerwony); outline-offset: 2px; }
/* „Czy jesteś klientem naszego Oddziału?” (prośba klienta 2026-10): „Nie” chowa pola i pokazuje infolinię centrali.
   Klasę .formularz--poza ustawia JS; reguła z :has() robi to samo bez JS (osobno, bo przeglądarka bez :has odrzuciłaby całą listę selektorów). */
.klient { border: 0; margin: 0; padding: 0; }
.klient__lista { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.klient__opcja { position: relative; display: block; min-height: 100%; padding: 16px 18px 16px 52px; border: 1px solid #d4d4d4; background: #fff; cursor: pointer; transition: border-color .2s, box-shadow .2s; }
.klient__opcja:hover { border-color: var(--czerwony); }
.formularz .klient__opcja input { position: absolute; left: 18px; top: 17px; width: 20px; height: 20px; margin: 0; border: 1px solid #a8a8a8; border-radius: 50%; background: #fff;
  -webkit-appearance: none; appearance: none; cursor: pointer; transition: background-color .2s, border-color .2s, box-shadow .2s; }
.formularz .klient__opcja input:checked { border-color: var(--czerwony); background: var(--czerwony); box-shadow: inset 0 0 0 4px #fff; }
.formularz .klient__opcja input:focus { box-shadow: none; }
.formularz .klient__opcja input:checked:focus { box-shadow: inset 0 0 0 4px #fff; }
.formularz .klient__opcja input:focus-visible { outline: 2px solid var(--czerwony); outline-offset: 3px; }
.klient__opcja:has(input:checked) { border-color: var(--czerwony); box-shadow: inset 0 0 0 1px var(--czerwony); }
.klient__tytul { display: block; font: 700 15px/22px var(--font); color: var(--ciemny); }
.klient__opis { display: block; margin-top: 4px; font: 400 13px/19px var(--font); color: var(--tekst); }
.klient[aria-invalid="true"] .klient__opcja { border-color: var(--czerwony); background: #fff8f9; }
.poza { display: none; padding: 26px 28px 26px 24px; border-left: 4px solid var(--czerwony); background: #fff; }
.poza:focus { outline: none; }
.poza__tytul { margin-bottom: 10px; font: 700 20px/28px var(--font); color: var(--ciemny); }
.poza__przyciski { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 20px; }
.poza__zmiana { margin-top: 18px; font-size: 13px; line-height: 20px; color: var(--szary); }
.formularz--poza .poza { display: block; }
.formularz--poza .formularz__pola > :not(.klient):not(.poza) { display: none; }
.formularz:has(#k-nie:checked) .poza { display: block; }
.formularz:has(#k-nie:checked) .formularz__pola > :not(.klient):not(.poza) { display: none; }
.zgoda { display: flex; gap: 12px; align-items: flex-start; font: 400 13px/20px var(--font); color: var(--tekst); cursor: pointer; }
.zgoda input { flex: none; display: grid; place-content: center; width: 22px; height: 22px; margin: 0; border: 1px solid #a8a8a8; border-radius: 0; background: #fff;
  -webkit-appearance: none; appearance: none; cursor: pointer; transition: background-color .2s, border-color .2s; }
.zgoda input::after { content: ""; width: 11px; height: 6px; border: solid #fff; border-width: 0 0 2px 2px; transform: translateY(-1px) rotate(-45deg) scale(0); transition: transform .15s; }
.zgoda input:checked { background: var(--czerwony); border-color: var(--czerwony); }
.zgoda input:checked::after { transform: translateY(-1px) rotate(-45deg) scale(1); }
.zgoda input:focus-visible { outline: 2px solid var(--czerwony); outline-offset: 2px; }
.zgoda input[aria-invalid="true"] { border-color: var(--czerwony); }
.zgoda a { color: var(--czerwony); text-decoration: underline; }
.formularz__dol { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 16px; }
.formularz__wyslij { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 12px; min-height: 52px; padding: 0 34px; border: 0; border-radius: 0;
  background: var(--czerwony); color: #fff; font: 700 15px/20px var(--font); cursor: pointer; transition: background-color .3s; }
.formularz__wyslij svg { width: 18px; height: 18px; fill: currentColor; transition: transform .25s; }
.formularz__wyslij:hover { background: var(--czerwony-hover); }
.formularz__wyslij:hover svg { transform: translateX(4px); }
.formularz__wyslij:focus-visible { outline: 2px solid var(--ciemny); outline-offset: 3px; }
.formularz__wyslij.trwa { cursor: progress; background: var(--czerwony-hover); }
.formularz__wyslij.trwa svg { display: none; }
.formularz__wyslij.trwa::after { content: ""; width: 16px; height: 16px; border: 2px solid rgba(255, 255, 255, .4); border-top-color: #fff; border-radius: 50%; animation: kreci .8s linear infinite; }
@keyframes kreci { to { transform: rotate(360deg); } }
.formularz__uwaga { font: 400 13px/18px var(--font); color: var(--szary); }
.miodek { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }
.komunikat { margin-bottom: 26px; padding: 16px 20px; border-left: 4px solid; background: #fff; font: 400 14px/22px var(--font); }
.komunikat:focus { outline: none; }
.komunikat--blad { border-color: var(--czerwony); color: #7a0d1f; }
.komunikat ul { margin: 6px 0 0; padding-left: 20px; }
.komunikat a { color: var(--czerwony); }
.komunikat--ok { margin: 0; padding: 40px; border-color: #2e7d32; color: var(--tekst); }
.komunikat__ikona { display: grid; place-content: center; width: 52px; height: 52px; margin-bottom: 20px; border-radius: 50%; background: #2e7d32; }
.komunikat__ikona svg { width: 26px; height: 26px; fill: #fff; }
.komunikat__tytul { font: 700 24px/30px var(--font); color: var(--ciemny); }
.komunikat--ok p + p { margin-top: 10px; }
.komunikat__ponownie { display: inline-flex; align-items: center; min-height: 44px; margin-top: 16px; padding: 0; border: 0; background: none; color: var(--czerwony); font: 700 14px/20px var(--font); text-decoration: underline; cursor: pointer; }
.formularz--wyslany .formularz__pola { display: none; }

/* ---------- Informacje o Grupie ---------- */
.grupa { max-width: calc(1180px + 2 * var(--boki)); margin: 0 auto; padding: 50px var(--boki); display: grid; grid-template-columns: 50% 25% 24.666%; align-items: start; }
.grupa__tekst { background: var(--tlo-2); padding: 50px; }
.grupa__tekst .nad { font-weight: 300; margin: 20px 0; }
.grupa__tekst a { color: var(--ciemny); }
.grupa__liczby { background: var(--tlo-2); align-self: stretch; }
.liczba { color: #fff; padding: 50px; }
.liczba--ciemna { background: #2d2d2d; }
.liczba--czerwona { background: var(--czerwony); padding-top: 100px; }
.liczba img { width: 51px; margin-bottom: 50px; }
.liczba p { font: 300 20px/30px var(--font); }
.liczba .kreska-biala { width: 40px; margin: 30px 0 0; }
.grupa__foto img { width: 100%; }

/* ---------- Najwyższy standard ---------- */
.artykul { max-width: calc(1180px + 2 * var(--boki)); margin: 0 auto; padding: 0 var(--boki) 50px; }
.artykul h2 { padding: 10px 10px 20px; }
.artykul .tekst { padding: 0 10px; }
.cytat { position: relative; padding: 20px; margin: 20px 0 25px; background: url(/assets/img/cudzyslow-55.png) top left / 55px auto no-repeat; }
.cytat p { background: repeating-linear-gradient(180deg, transparent 0 30px, #e6e6e6 30px 31px); }
.cytat p { font: italic 300 17px/31px var(--font); color: #444; }
.przypisy { margin-top: 14px; overflow-wrap: anywhere; }
.przypisy a { color: var(--czerwony); }

/* ---------- Certyfikaty: siatka + lekki lightbox na <dialog> (jak na ubezpieczenia.glogow.pl) ---------- */
.cert { max-width: calc(1180px + 2 * var(--boki)); margin: 0 auto; padding: 0 var(--boki) 80px; }
.cert__siatka { display: flex; flex-wrap: wrap; justify-content: center; gap: 50px 30px; list-style: none; margin: 0; padding: 0; }
.cert__siatka + .cert__siatka { margin-top: 50px; }
.cert__siatka li { flex: 0 0 calc((100% - 3 * 30px) / 4); }
.cert__siatka--male li { flex-basis: calc((100% - 5 * 30px) / 6); }
.cert__siatka a { display: block; }
.cert__siatka img { display: block; width: 100%; transition: transform .3s; }
.cert__siatka a:hover img { transform: scale(1.03); }
.cert__siatka a:focus-visible { outline: 2px solid var(--czerwony); outline-offset: 4px; }
.lb { width: 100vw; max-width: none; height: 100vh; max-height: none; margin: 0; padding: 0; border: 0; background: rgba(20, 20, 20, .92); color: #fff; }
.lb::backdrop { background: rgba(20, 20, 20, .6); }
.lb[open] { display: flex; align-items: center; justify-content: center; }
.lb__fig { display: flex; flex-direction: column; align-items: center; max-width: 92vw; max-height: 92vh; margin: 0; }
.lb__fig img { max-width: 92vw; max-height: calc(92vh - 40px); width: auto; height: auto; background: #fff; box-shadow: 0 10px 40px rgba(0, 0, 0, .5); }
.lb__opis { margin-top: 10px; font: 400 14px/20px var(--font); color: #e6e6e6; }
.lb__btn { position: absolute; display: flex; align-items: center; justify-content: center; width: 48px; height: 48px; padding: 0; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .14); color: #fff; cursor: pointer; }
.lb__btn:hover, .lb__btn:focus-visible { background: var(--czerwony); }
.lb__btn:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.lb__btn svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.lb__zamknij { top: 16px; right: 16px; }
.lb__prev { left: 16px; top: 50%; transform: translateY(-50%); }
.lb__next { right: 16px; top: 50%; transform: translateY(-50%); }

/* ---------- Dane rejestrowe ---------- */
.dane { max-width: 1240px; margin: 0 auto; padding: 0 20px 70px; display: grid; grid-template-columns: 33% 67%; align-items: center; }
.dane__foto { padding: 60px 0 60px 60px; }
.dane__foto img { width: 300px; }
.dane__tekst { padding: 51px; text-align: justify; }
.dane__tekst a { color: var(--czerwony); word-break: break-all; }

/* ---------- Polityka prywatności ---------- */
.tytul-polityka { background: #f7f7f7; padding: 50px 40px; text-align: center; }
.tytul-polityka h1 { font: 600 35px/35px "Poppins", var(--font); color: var(--tytul); }
.okruszki { margin-top: 20px; font: 500 15px/25px "Poppins", var(--font); color: #6b7178; }
.okruszki a:hover { color: var(--czerwony); }
.okruszki span[aria-hidden] { margin: 0 6px; color: #a8a8a8; }
.polityka { max-width: 1240px; margin: 0 auto; padding: 20px 30px 40px; font: 400 16px/24px "Roboto", var(--font); color: #737373; }
.polityka h2 { font: 600 20px/28px "Poppins", var(--font); color: #444; margin: 28px 0 10px; }
.polityka p + p, .polityka ul, .polityka ol { margin-top: 10px; }
.polityka ul, .polityka ol { padding-left: 22px; }
.polityka li + li { margin-top: 6px; }
.polityka a { color: var(--czerwony); text-decoration: underline; }
.polityka__data { margin-top: 28px; font-size: 14px; }

/* ---------- 404 ---------- */
.blad404 { padding: 80px var(--boki) 100px; text-align: center; }
.blad404 p { font-size: 17px; line-height: 27px; }
.blad404 .przycisk-czerwony { margin-top: 30px; }
.blad404__kontakt { margin-top: 30px; }
.blad404__kontakt a { color: var(--czerwony); }
.przycisk-czerwony { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 48px; padding: 12px 28px; background: var(--czerwony); color: #fff; font: 700 15px/20px var(--font); transition: background-color .3s; }
.przycisk-czerwony:hover { background: var(--czerwony-hover); }
.przycisk-czerwony svg { width: 18px; height: 18px; fill: currentColor; }

/* ---------- Stopka ---------- */
.stopka { background: var(--tlo); padding-top: 120px; }
.stopka__siatka { max-width: 1240px; margin: 0 auto; display: grid; grid-template-columns: repeat(4, 1fr); }
.stopka__kol { padding: 10px; }
.stopka__kol > * + * { margin-top: 20px; }
.stopka__logo img { width: 180px; height: 97px; }
.stopka h2 { font: 400 20px/30px var(--font); color: #2c2c2c; }
.stopka .maly { font: 300 14px/22px var(--font); color: var(--szary); }
.stopka ul { list-style: none; margin: 0; padding: 0; }
.stopka__nav li + li { margin-top: 10px; }
.stopka__nav a { display: inline-flex; align-items: center; gap: 10px; font: 400 14px/22px var(--font); color: var(--szary); }
.stopka__nav a::before { content: ""; width: 7px; height: 7px; border: solid #e34b50; border-width: 2px 2px 0 0; transform: rotate(45deg); margin-right: 2px; }
.stopka__nav a:hover { color: var(--czerwony); text-decoration: underline; }
.stopka__godziny { margin: 0; }
.stopka__godziny dd { margin: 2px 0 0; }
.stopka__godziny div + div { margin-top: 16px; }
.stopka__duzy { font: 400 20px/30px var(--font); color: #2c2c2c; }
.stopka__duzy a:hover { color: var(--czerwony); }
.stopka__kontakt .stopka__duzy { margin-top: 10px; }
.stopka__kontakt .maly { margin-top: 20px; }
.stopka__kontakt .maly + .stopka__duzy { margin-top: 10px; }
.stopka__dalej a { display: inline-flex; align-items: center; gap: 10px; font: 700 14px/22px var(--font); color: var(--czerwony); }
.stopka__dalej a::after { content: ""; width: 7px; height: 7px; border: solid currentColor; border-width: 2px 2px 0 0; transform: rotate(45deg); transition: transform .2s; }
.stopka__dalej a:hover { text-decoration: underline; }
.stopka__dalej a:hover::after { transform: translateX(3px) rotate(45deg); }
/* Dolny pasek jak w pozostałych stronach Studio Di: „logo | Realizacja studiodi.pl” i prawa autorskie.
   Litery logo i tekst przygaszone (kontrast 5,5:1 na tle paska), piksele logo ciemne; po najechaniu zmieniają się tylko piksele (czerwień strony) */
.stopka__dol { margin-top: 70px; background: #e9e9e9; color: #5c5c5c; font: 400 13px/16px var(--font); }
.stopka__dol-wew { max-width: 1240px; margin: 0 auto; padding: 4px 10px; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.stopka__autor { display: inline-flex; align-items: center; gap: 12px; min-height: 44px; color: #5c5c5c; }
.stopka__autor strong { font-weight: 700; color: #2c2c2c; }
.stopka__kreska { color: #a0a0a0; }
.stopka__logo-sd { display: block; flex: none; width: auto; height: 14px; aspect-ratio: 244 / 49; color: #5c5c5c; }
.stopka__piksel { fill: var(--ciemny); transition: fill .2s; }
.stopka__autor:hover .stopka__piksel, .stopka__autor:focus-visible .stopka__piksel { fill: var(--czerwony); }
.stopka__prawa { margin: 0; }

/* ---------- Tablet (768–1024 px) ---------- */
@media (max-width: 1024px) {
  :root { --boki: 20px; }
  .hero h1 { font-size: 50px; line-height: 60px; }
  .kontakt-glowna { background: linear-gradient(180deg, #fff 100px, var(--tlo-2) 100px); }
  .kontakt-glowna__siatka { grid-template-columns: 1fr 1fr; }
  .kontakt-glowna__dane { grid-column: 1 / -1; padding-bottom: 40px; }
  .kontakt-glowna__dane .h-sredni { margin-top: 40px; }
  .dojazd__siatka { grid-template-columns: 1fr 1fr; }
  .dojazd__adres { grid-column: 1 / -1; padding: 40px 0 0; }
  .onas__siatka { grid-template-columns: 1fr 1fr; }
  .onas__tekst { grid-column: 1 / -1; padding: 40px 20px; }
  .zespol__siatka { grid-template-columns: 1fr 1fr; }
  .osoba-opis { padding: 20px; }
  .misja__siatka { grid-template-columns: 1fr 1fr; }
  .misja__tekst { grid-column: 1 / -1; padding: 40px 0 30px; }
  .misja__foto { grid-column: 1 / -1; }
  .misja__foto img { max-width: 332px; }
  .galeria__siatka { grid-template-columns: 1fr 1fr; }
  .galeria__siatka > :first-child { grid-column: 1 / -1; }
  .oferta__siatka, .ihestia__siatka { grid-template-columns: 1fr; }
  .oferta__tekst, .ihestia__tekst { padding: 60px 10px 30px; }
  .oferta__film, .ihestia__film { margin-top: 0; }   /* na desktopie film wystaje 70 px w górę; w jednej kolumnie wchodziłby na tekst */
  .partnerzy { grid-template-columns: 1fr; padding: 40px 20px 50px; }
  .szkody__siatka { grid-template-columns: 1fr 1fr; }
  .szkody__tekst { padding: 20px; }
  .towarzystwa > div { padding: 20px; }
  .zyski { grid-template-columns: 1fr 1fr; gap: 30px; }
  .pliki ul { grid-template-columns: repeat(3, 1fr); gap: 40px 24px; }
  .cert__siatka li { flex-basis: calc((100% - 2 * 30px) / 3); }
  .cert__siatka--male li { flex-basis: calc((100% - 3 * 30px) / 4); }
  .zysk-foto { grid-column: 2; grid-row: auto; margin-top: -30px; }
  .kontakt, .grupa { grid-template-columns: 1fr; }
  .kontakt__osoby { padding: 0 30px 30px; }
  .grupa { grid-template-columns: 1fr 1fr; }
  .grupa__tekst { grid-column: 1 / -1; padding: 30px; }
  .mapa { height: 380px; margin-top: 50px; }
  .formularz-sekcja { padding: 60px var(--boki); }
  .formularz-karta { grid-template-columns: 1fr; }
  .formularz-info { padding: 36px 40px; }
  .formularz-info__lista { display: flex; flex-wrap: wrap; gap: 0 32px; margin-top: 24px; padding-top: 16px; }
  .formularz { padding: 40px; }
  .stopka { padding-top: 50px; }
  .stopka__siatka { grid-template-columns: 1fr 1fr; row-gap: 30px; padding: 0 10px; }
  .stopka__dol-wew { padding: 4px 20px; }
  .dane { grid-template-columns: 1fr 2fr; }
  .dane__foto { padding: 20px 0 20px 20px; }
}

/* ---------- Telefon (do 767 px) ---------- */
@media (max-width: 767px) {
  body { font-size: 14px; }
  .naglowek__wew { padding: 0 20px; }
  .menu-przycisk { right: 12px; }
  .tytul { padding: 30px 30px; }
  .tytul h1 { font-size: 32px; line-height: 40px; }
  .podmenu { padding: 30px 20px; }
  .podmenu li { padding: 5px; }
  .h-duzy { font-size: 33px; line-height: 42px; }
  .hero { padding: 50px 20px 20px; }
  .hero__oddzial { font-size: 22px; line-height: 28px; }
  .hero__rzad { display: block; padding: 20px 0 30px; }
  .hero__rzad img { margin: 0 0 12px; }
  .hero h1 { font-size: min(60px, 15.4vw); line-height: 1.17; overflow-wrap: break-word; }
  .kontakt-glowna { padding: 20px; background: linear-gradient(180deg, #fff 66px, var(--tlo-2) 66px); }
  .kontakt-glowna__siatka, .dojazd__siatka { grid-template-columns: 1fr; }
  .kontakt-glowna__dane { padding-bottom: 0; }
  .kontakt-glowna__dane .h-sredni { margin-top: 20px; }
  .kontakt-glowna__godz { font-size: 40px; }
  .kontakt-glowna__przycisk { width: 100%; max-width: 350px; margin-bottom: 20px; }
  .box-czerwony { padding: 20px 40px 30px; }
  .dojazd { padding: 0 20px 20px; background: var(--tlo-2); }
  .dojazd__adres { padding: 30px 20px 20px; background: #fff; }
  .dojazd__adres .h-sredni { font-size: 27px; }
  .dojazd__haslo { font-size: 25px; line-height: 31px; }
  .onas { background: #fff; }
  .onas__siatka { grid-template-columns: 1fr; }
  .onas__tekst { padding: 20px; }
  .onas__zdjecia picture + picture img, .onas__zdjecia img + img { margin-top: 20px; }
  .onas__czerwona { background: var(--czerwony); margin-top: 20px; }
  .onas__czerwona h2 { padding: 10px 40px 0; }
  .onas__czerwona .kreska-biala { margin: 15px 40px 40px; }
  .zespol { padding: 50px 20px 30px; }
  .zespol > h2 { margin-bottom: 20px; }
  .zespol__siatka { grid-template-columns: 1fr; }
  .osoba-foto { display: flex; justify-content: center; }
  .osoba-opis { padding: 10px 20px 40px; text-align: center; }
  .misja { padding: 0 20px; }
  .misja__siatka { grid-template-columns: 1fr; }
  .misja__tekst { padding: 30px 0 20px; }
  .misja__foto img { max-width: none; }
  .galeria { padding: 20px 20px 30px; background: var(--tlo-2); }
  .galeria__siatka { grid-template-columns: 1fr; gap: 20px; }
  .oferta { margin-top: 40px; padding: 0; }
  .oferta__tekst { padding: 30px 20px; }
  .oferta__film { margin: 0; padding: 0 20px 20px; }
  .partnerzy { grid-template-columns: 1fr; padding: 30px 10px 40px; }
  .partnerzy .h-duzy { font-size: 25px; line-height: 32px; overflow-wrap: anywhere; }
  .szkody { padding: 20px 20px 0; }
  .szkody__siatka { grid-template-columns: 1fr; }
  .szkody__tekst { padding: 0 0 20px; }
  .szkody__foto { padding: 0 0 30px; }
  .towarzystwa { grid-template-columns: 1fr; padding: 20px; gap: 20px; }
  .towarzystwa > div { background: var(--tlo); }
  .zyski-h { padding: 30px 20px; }
  .zyski { grid-template-columns: 1fr; gap: 20px; padding: 0 20px 30px; }
  .zysk { padding: 30px 25px; }
  .zysk-foto { grid-column: auto; margin-top: -20px; }
  .ihestia { margin: 30px 0 0; padding: 0 0 30px; }
  .ihestia__tekst { padding: 30px 20px 20px; }
  .ihestia__tekst ul { padding-left: 20px; }
  .ihestia__film { margin: 0; padding: 0 20px; }
  .film { overflow: visible; margin-bottom: 64px; }
  .film .na-klik__info { top: 100%; bottom: auto; left: 0; transform: none; width: 100%; max-width: none; padding: 8px 0 0; background: none; color: var(--tekst); text-align: left; }
  .film--oferta .na-klik__przycisk { padding-bottom: 16px; }
  .cert { padding: 0 20px 40px; }
  .cert__siatka { gap: 20px 14px; }
  .cert__siatka + .cert__siatka { margin-top: 20px; }
  .cert__siatka li { flex-basis: calc((100% - 14px) / 2); }
  .cert__siatka--male li { flex-basis: calc((100% - 2 * 14px) / 3); }
  .lb__prev, .lb__next { top: auto; bottom: 16px; transform: none; }
  .pliki { padding: 30px 20px 50px; }
  .pliki ul { grid-template-columns: 1fr 1fr; gap: 28px 16px; }
  .plik__miniatura { padding: 0 6px 12px; }
  .plik__opis { padding: 8px; }
  .plik__nazwa { font-size: 13px; line-height: 18px; }
  .kontakt { padding: 20px; }
  .dla-kogo { margin-top: 30px; padding: 20px 20px 20px 16px; }
  .dla-kogo__tytul { font-size: 18px; line-height: 26px; }
  .dla-kogo__przyciski a { width: 100%; }
  .dla-kogo + .kontakt { padding-top: 20px; }
  .kontakt__adresy, .kontakt__osoby { padding: 0; }
  .kontakt__tel { font-size: 23px; line-height: 32px; }
  .kontakt__budynek { margin: 30px 0 20px; }
  .rzad { grid-template-columns: 1fr; margin-top: 20px; }
  .rzad__foto img, .online-ikona img { margin: 0 auto; }
  .online-ikona { padding: 20px 0; }
  .mapa-sekcja { padding: 0; }
  .mapa-sekcja__wew { padding: 40px 20px 20px; }
  .mapa-sekcja h2 { padding: 0; }
  .mapa-sekcja h2::after { display: none; }
  .mapa { height: 360px; margin-top: 30px; }
  .formularz-sekcja { padding: 40px 20px; }
  .formularz-info { padding: 30px 24px; }
  .formularz-info__ikona { width: 44px; height: 33px; margin-bottom: 20px; }
  .formularz-info__tytul { font-size: 33px; line-height: 40px; }
  .formularz-info__lista { flex-direction: column; gap: 0; }
  .formularz { padding: 28px 20px 32px; }
  .formularz__pola { grid-template-columns: 1fr; gap: 20px; }
  .klient__lista { grid-template-columns: 1fr; }
  .poza { padding: 20px 16px 20px 14px; }
  .poza__tytul { font-size: 18px; line-height: 26px; }
  .poza__przyciski a, .dla-kogo__przyciski a { width: 100%; padding-left: 14px; padding-right: 14px; }
  .formularz__dol { flex-direction: column; align-items: stretch; }
  .formularz__wyslij { width: 100%; }
  .formularz__uwaga { text-align: center; }
  .komunikat--ok { padding: 28px 22px; }
  .grupa { grid-template-columns: 1fr; padding: 20px; }
  .grupa__tekst { padding: 20px; }
  .liczba { padding: 40px 30px; }
  .liczba--czerwona { padding-top: 40px; }
  .artykul { padding: 0 20px 30px; }
  .artykul h2 { padding: 10px 0 20px; font-size: 28px; line-height: 36px; }
  .artykul .tekst { padding: 0; }
  .cytat { padding: 20px 0 0 10px; }
  .dane { grid-template-columns: 1fr; padding: 0 20px 40px; }
  .dane__foto { padding: 10px; display: flex; justify-content: center; }
  .dane__foto img { width: 220px; }
  .dane__tekst { padding: 20px 0; }
  .tytul-polityka { padding: 30px 20px; }
  .tytul-polityka h1 { font-size: 28px; line-height: 34px; }
  .polityka { padding: 20px 20px 30px; font-size: 15px; line-height: 23px; }
  .stopka { padding-top: 20px; }
  .stopka__siatka { grid-template-columns: 1fr; padding: 0 10px; row-gap: 10px; }
  .stopka__dol { margin-top: 30px; }
  .stopka__dol-wew { flex-direction: column; align-items: flex-start; gap: 0; padding: 6px 20px 16px; }
  .stopka__nav li + li { margin-top: 0; }
  .stopka__nav a { min-height: 44px; }
  .stopka__duzy a, .stopka__dalej a { display: inline-flex; align-items: center; min-height: 44px; }
  .stopka__kontakt .stopka__duzy { margin-top: 0; }
  /* cele dotyku min. 44 px bez zmiany wyglądu (większy obszar kliknięcia, ujemne marginesy) */
  .przycisk-link { padding-top: 15px; margin-top: -15px; }
  .partnerzy .h-duzy a { display: inline-block; padding: 8px 0; margin: 12px 0 -8px; }
  .onas__czytaj { min-height: 44px; margin: 6px 0; }
  .rzad__opis li a, .kontakt__tel a, .godziny a { display: inline-flex; align-items: center; min-height: 44px; }
  .rzad__opis li + li { margin-top: 0; }
}