@media all {

}
@media (max-width: 1200px) {

}
@media (max-width: 1000px) {
	
}
@media (max-width: 700px) {

}

/* === [BLOCK: header-logo-size] START === */
/* Większe logo w headerze — 70px na PC, 55px na mobile */
header.header_main section .logo a img,
header.header_main .logo a img {
	height: 70px;
	width: auto;
	max-width: none;
}
@media (max-width: 600px) {
	header.header_main section .logo a img,
	header.header_main .logo a img {
		height: 55px;
	}
}
/* === [BLOCK: header-logo-size] END === */
/* === [BLOCK: landing-lexinvest-brand] START === */
/* Identyfikacja LexInvest: zloto #b38600 na grafitowym tle.
   Tekst na zlocie musi byc ciemny - biale litery na tym odcieniu daja kontrast 3.2:1,
   czyli ponizej progu czytelnosci; ciemny grafit daje 6.6:1. */
:root{--ok-cta-ink:#14110b}
nav.neon p a,.split-cta,input[type=submit],button[type=submit]{color:#14110b !important;font-weight:700}
.split-cta .material-symbols-outlined{color:#14110b}

/* JEDNA barwa ciemna w calym serwisie. Wczesniej byly trzy: hero grafitowe, sekcja
   formularza granatowa (biblioteka bierze tlo z tokenu --ink, nie --ok-ink) i stopka
   #424242, jedyny kolor bez nasycenia w calej palecie. */
.bg-ok-ink{--ink:#12131a;--ink-2:#1b1d27}
.footer_content.bg-grey-dark{background:#12131a}

/* 🛑 NIE DOKLADAJ TU REGUL DLA FORMULARZA NA CIEMNYM TLE. Formularz kontaktowy siedzi
   w bialej karcie `split-form` z biblioteki, wiec ma ciemny tekst na jasnym tle.
   Wczesniejsze rozjasnianie pol (`.bg-ok-ink form input{color:#fff}`) bylo potrzebne,
   gdy stal wprost na granacie — dzis dalby biale litery na bialym tle. */

/* Stopka: listy bez kropek - nigdzie indziej na stronie takich nie ma. */
.footer_content ul{list-style:none;padding-left:0;margin-left:0}
.footer_content li{margin-bottom:.4rem}

/* Zlota linia pod naglowkami sekcji - motyw powtarzajacy sie w logo klienta. */
.eyebrow::before{background:linear-gradient(90deg,#8a6800,#c9a227)}
.feature-card{border-top:3px solid transparent;transition:border-color .2s,transform .2s}
.feature-card:hover{border-top-color:var(--mark);transform:translateY(-2px)}
/* === [BLOCK: landing-lexinvest-brand] END === */

/* === [BLOCK: landing-lexinvest-portrety] START === */
/* Uzupelnienia strony glownej LexInvest. Uklady sekcji pochodza z klockow biblioteki
   (feature-cards, steps-list, screenshot-showcase, split-section, bullet-icon-list);
   ponizej jest tylko to, czego biblioteka nie ma, kazde z powodem obok. */

/* ── Zdjecia ludzi: biblioteka operuje ikonami i inicjalami, nie fotografiami ─ */
.dnt-avatar{width:56px;height:56px;border-radius:50%;object-fit:cover;flex:0 0 56px}
.dnt-portret{width:100%;max-width:240px;aspect-ratio:1/1;object-fit:cover;object-position:50% 30%;border-radius:14px;margin:0 auto .9rem}
.feature-card .dnt-portret{display:block}

/* ── Pas zaufania pod hero ────────────────────────────────────────────────────
   Jasny pas w barwach marki: kremowe tlo, ciemny tekst, zlote ikony i cienka zlota
   linia u gory. Wczesniej byl granatowy — nie pasowal do identyfikacji kancelarii,
   gdzie ciemna jest wylacznie stopka. */
.pas-zaufania{background:linear-gradient(180deg,#fdfbf5,#f6f1e4);
  border-top:1px solid rgba(179,134,0,.28);border-bottom:1px solid rgba(179,134,0,.18)}
.zaufanie{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1.6rem}
.zaufanie-kafel{display:flex;align-items:center;gap:.8rem;color:#12131a;font-size:.95rem;
  line-height:1.25;font-weight:600}
.zaufanie-kafel .material-symbols-outlined{font-size:1.9rem;color:#8a6800;flex:0 0 auto}



/* ── Zespol: karty z biblioteki, tu tylko srodkowanie i mniejszy opis ───────── */
.feature-card.osoba h3{margin:0 0 .5rem;text-align:center}
.feature-card.osoba p{font-size:.86rem;line-height:1.45}

/* ── Sekcja powodow (klocek `steps-list`) ─────────────────────────────────────
   Cyfra: klocek stawia biala na kolorze marki. Na zlocie klienta daje to kontrast 3.2:1
   (ponizej progu czytelnosci), ciemny grafit daje 6.6:1. */
.wow .step-number{color:#14110b}
/* Kreska laczaca kroki: klocek jest pod TRZY kroki w jednym rzedzie i rysuje ja przy
   kazdym elemencie procz ostatniego. Przy szesciu powodach (dwa rzedy po trzy) wychodzila
   poza trzeci i szosty kafelek, w pusta przestrzen po prawej stronie sekcji. */
.wow .steps-list .step-item:nth-child(3n)::after{display:none}



/* ── Oferta: cztery huby ──────────────────────────────────────────────────────
   Kafel to caly link — zdjecie u gory, pod nim tytul, zdanie i licznik pozycji. */
.huby-siatka{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1.4rem}
.hub-kafel{display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);
  border-radius:16px;overflow:hidden;text-decoration:none;color:inherit;
  transition:transform .2s,box-shadow .2s,border-color .2s}
.hub-kafel:hover{transform:translateY(-4px);border-color:var(--mark);
  box-shadow:0 22px 48px -20px rgba(18,19,26,.28)}
.hub-foto{position:relative;display:block;aspect-ratio:4/5;overflow:hidden;background:#f4ecd8}
/* Zdjecie kafla to gotowa kompozycja 4:5 z `tla_slajdow.py` (28.09): zdjecie z sesji albo
   sylwetka na rozmytym wnetrzu biura. Tlo jest juz w pliku, wiec wystarcza `cover`.
   Wczesniej (17.08) byla tu sylwetka bez tla + gradient i wyblakla ikona obszaru w tle —
   wygladalo jak identyfikator, nie jak zdjecie (uwaga Przemka 28.09). */
.hub-foto > img:first-child{width:100%;height:100%;object-fit:cover;object-position:50% 30%;
  display:block;transition:transform .5s;transform-origin:50% 60%}
.hub-kafel:hover .hub-foto > img:first-child{transform:scale(1.04)}
/* Kółko z osobą prowadzącą obszar + podpis autora zdjęcia (licencje CC BY/BY-SA, 28.09).
   Na kaflu oferty kółko stoi na granicy zdjęcia i opisu (w `.hub-tresc`, przesunięte
   o połowę w górę) — w całości na zdjęciu zasłaniało napisy na tablicach MS i UODO.
   W pasku usług siedzi w prawym dolnym rogu zdjęcia. */
.hub-osoba,.usluga-osoba{position:absolute;z-index:2;border-radius:50%;object-fit:cover;
  border:3px solid #fff;background:#f6f0e2;box-shadow:0 8px 22px -6px rgba(18,19,26,.45)}
.hub-tresc{position:relative}
.hub-osoba{width:72px;height:72px;right:1rem;top:-36px}
.hub-tresc strong{padding-right:4.6rem}
.usluga-osoba{right:.55rem;bottom:.55rem}
.zrodla-zdjec{margin:0;font-size:.7rem;line-height:1.4;color:var(--muted);text-align:center}
.hub-tresc{display:flex;flex-direction:column;gap:.5rem;padding:1.2rem 1.3rem 1.4rem;flex:1}
.hub-tresc strong{font-family:var(--font-family-header,inherit);font-size:1.25rem;color:var(--ink)}
.hub-opis{font-size:.88rem;line-height:1.55;color:var(--text-soft);flex:1}
.hub-ile{display:inline-flex;align-items:center;gap:.35rem;font-size:.8rem;font-weight:700;
  letter-spacing:.03em;color:var(--mark-dark);text-transform:uppercase}
.hub-ile .material-symbols-outlined{font-size:1rem}

/* ── Pasek pozostalych uslug: przewijanie bez JavaScriptu ─────────────────────
   `scroll-snap` zamiast karuzeli owl — nie wymaga inicjalizacji skryptem, dziala
   palcem na telefonie i kolkiem myszy na komputerze. */
/* Nagłówek paska: wcześniej 0,8 rem w kolorze `--muted` — na białym tle prawie nie
   istniał (uwaga Przemka 17.08: „Najczęściej zamawiane usługi są niewidoczne, może być
   trochę większy i mniej szary"). Teraz większy, ciemny i pogrubiony. */
.pasek-tytul{display:flex;align-items:center;justify-content:space-between;gap:1rem;
  font-size:1.02rem !important;letter-spacing:.02em;text-transform:none;font-weight:700;
  font-family:var(--font-family-header,inherit);
  color:var(--ink) !important;margin:2.6rem 0 .9rem !important}
.pasek-hint{display:inline-flex;align-items:center;gap:.3rem;text-transform:none;
  letter-spacing:0;font-size:.82rem;font-weight:400;color:var(--text-soft)}
.uslugi-pasek{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(215px,1fr);
  gap:1rem;overflow-x:auto;scroll-snap-type:x mandatory;padding:.2rem .2rem 1.1rem;
  scrollbar-width:thin}
.usluga-mini{scroll-snap-align:start;background:#fff;border:1px solid var(--line);
  border-radius:14px;overflow:hidden;display:flex;flex-direction:column}
/* 4:3 zamiast paska 110 px — w płaskim kadrze pionowe zdjęcia traciły głowy (28.09).
   Punkt kadrowania każdego zdjęcia przychodzi z treści (`uslugi.json` → `kadr`). */
.usluga-foto{position:relative;display:block}
.usluga-foto > img:first-child{width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;display:block}
.usluga-osoba{width:52px;height:52px;border-width:2px}
.usluga-mini strong{display:block;padding:.8rem .95rem .25rem;font-size:.95rem;color:var(--ink)}
.usluga-mini span{display:block;padding:0 .95rem 1rem;font-size:.82rem;line-height:1.5;
  color:var(--text-soft)}
.uslugi-pasek::-webkit-scrollbar{height:8px}
.uslugi-pasek::-webkit-scrollbar-thumb{background:var(--line-soft);border-radius:4px}

/* ── Naglowek wezszy niz strona ───────────────────────────────────────────────
   Gdy tresc pod naglowkiem ma 960 px (kroki, karuzele), naglowek na pelnej szerokosci
   zostawia pusty pas z prawej. Ta klasa daje mu te sama szerokosc i srodkuje. */
.naglowek-waski{max-width:960px;margin-left:auto;margin-right:auto;text-align:center}
.naglowek-waski .eyebrow::before{margin-left:auto;margin-right:auto}
.naglowek-waski p{max-width:62ch;margin-left:auto;margin-right:auto}

/* ── „Media o nas": karta jak na starej stronie (28.09) ──────────────────────
   Logotyp redakcji 3:2 na bieli, tytuł, zajawka, link do oryginału — to samo na podstronie
   (galeria 9401, klasa `p9401` na <main>) i w sekcji o kancelarii na stronie głównej
   (`.media-lista`, 4 najnowsze, bez zajawek — w połowie szerokości byłyby ścianą tekstu).
   Dane: `galerie.py` + `media_o_nas.json`. Treść karty siedzi w polu `name` zdjęcia.
   🛑 `min-width:0` NA KOLUMNACH JEST KONIECZNE: kolumna siatki ma domyślnie minimalną
   szerokość równą swojej zawartości, więc szeroka zawartość rozpycha ją poza ekran,
   a tekst w sąsiedniej kolumnie ściska się do czterech słów w wierszu. */
.wow .split-wrap > *{min-width:0}
.karuzela-tytul{font-size:.76rem !important;letter-spacing:.1em;text-transform:uppercase;
  color:var(--muted) !important;margin:0 0 .8rem !important}
:is(.media-lista,main.p9401) .gallery_item{display:flex;flex-direction:column;gap:.9rem;
  background:#fff;border:1px solid var(--line);border-radius:14px;padding:1rem 1rem 1.2rem;
  margin:0;text-align:center;box-shadow:0 14px 30px -24px rgba(18,19,26,.5);
  transition:transform .2s,box-shadow .2s}
:is(.media-lista,main.p9401) .gallery_item:hover{transform:translateY(-3px);
  box-shadow:0 22px 40px -24px rgba(18,19,26,.45)}
:is(.media-lista,main.p9401) .gallery_photo a{display:block}
:is(.media-lista,main.p9401) .gallery_photo img{width:100%;aspect-ratio:3/2;object-fit:contain;
  background:#fff;border-radius:8px;display:block}
:is(.media-lista,main.p9401) .gallery_name{display:flex;flex-direction:column;gap:.55rem;flex:1;
  font-size:.86rem;line-height:1.55;color:var(--text-soft)}
.media-tytul-art{display:block;color:var(--ink);font-size:1rem;line-height:1.38;font-weight:600}
.media-zajawka{display:-webkit-box;-webkit-line-clamp:6;-webkit-box-orient:vertical;overflow:hidden}
.media-oryginal{margin-top:auto;padding-top:.3rem;font-weight:700;font-size:.82rem;
  color:var(--mark-dark) !important;text-decoration:none}
.media-oryginal:hover{text-decoration:underline}
.media-lista .galleries_wrapper{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.9rem}
.media-lista .media-zajawka{display:none}
.media-lista .media-tytul-art{font-size:.9rem}
/* Podstrona: motyw ściska galerię do 970 px i dzieli na 6 kolumn po 155 px (uwaga Przemka
   28.09: „dziwnie wąska ta zakładka"). Na starej stronie są 4 kolumny na pełną szerokość. */
main.p9401 > .section_container{width:100%;max-width:1400px;flex:1 1 auto}
main.p9401 .galleries_wrapper{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1.6rem}
@media (max-width:1100px){main.p9401 .galleries_wrapper{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:800px){main.p9401 .galleries_wrapper{grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem}}
@media (max-width:520px){main.p9401 .galleries_wrapper{grid-template-columns:minmax(0,1fr)}}

/* ── „Z bloga" na stronie głównej (28.09) ────────────────────────────────────
   Trzy kafle z `[ADDON_BLOG-BY-CAT]` (szablon `box_artykul.php`, wariant `h`): miniatura 3:2,
   tytuł, zajawka ucięta do 3 wierszy, „czytaj więcej" przy dolnej krawędzi. */
.blog-glowna .articles_wrapper{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.4rem;
  max-width:1200px;margin:0 auto}
.blog-glowna .article_container{margin:0;height:100%}
.blog-glowna .article_container > a{display:flex;flex-direction:column;height:100%;background:#fff;
  border:1px solid var(--line);border-radius:14px;overflow:hidden;text-decoration:none;color:inherit;
  box-shadow:0 14px 30px -24px rgba(18,19,26,.5);transition:transform .2s,box-shadow .2s}
.blog-glowna .article_container > a:hover{transform:translateY(-4px);
  box-shadow:0 22px 44px -22px rgba(18,19,26,.35)}
.blog-glowna .article_photo{display:block;aspect-ratio:3/2;overflow:hidden}
.blog-glowna .article_photo img{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .5s}
.blog-glowna .article_container > a:hover .article_photo img{transform:scale(1.04)}
/* 🛑 Selektor `.articles_wrapper article.article_container.h` celowo: motyw pisze kafle bloga
   dokładnie tak (4 klasy + element), więc każdy krótszy zapis przegrywa (`width:100%`
   + wyśrodkowanie, `margin:1rem 0` tytułu, `display:none` na „czytaj więcej"). Krótszy zapis przegrywał — `width:100%` plus padding
   wypychał tekst poza prawą krawędź karty, a tytuł i zajawka stały wyśrodkowane. */
.blog-glowna .articles_wrapper article.article_container.h .article_description{display:flex;flex-direction:column;gap:.6rem;
  flex:1;width:auto;box-sizing:border-box;padding:1.1rem 1.25rem 1.3rem;text-align:left}
.blog-glowna .articles_wrapper article.article_container.h :is(.article_title,.articles_text,.article_more){text-align:left;
  width:auto;margin:0}
/* Motyw chowa „czytaj więcej" w wariancie `h` i daje zajawce `display:block` (bez niego
   ucięcie do 3 wierszy nie działa) — obie rzeczy przywracamy tą samą siłą selektora. */
.blog-glowna .articles_wrapper article.article_container.h .articles_text{display:-webkit-box;-webkit-line-clamp:3;
  -webkit-box-orient:vertical;overflow:hidden}
.blog-glowna .articles_wrapper article.article_container.h .article_more{display:block;margin-top:auto}
.blog-glowna{margin-top:2.2rem}
.blog-glowna .article_title{font-family:var(--font-family-header,inherit);font-size:1.12rem;
  line-height:1.35;color:var(--ink);font-weight:400}
.blog-glowna .articles_text{font-size:.88rem;line-height:1.55;color:var(--text-soft);
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.blog-glowna .article_more{margin-top:auto;font-size:.8rem;font-weight:700;letter-spacing:.03em;
  text-transform:uppercase;color:var(--mark-dark)}
@media (max-width:900px){.blog-glowna .articles_wrapper{grid-template-columns:minmax(0,1fr);
  max-width:520px}}

/* ── Tło sekcji: kremowe, nie szare ──────────────────────────────────────────
   Klocek `bg-grey-lighter` daje neutralną szarość, która na tej stronie wyglądała jak
   obce ciało (uwaga Przemka 17.08: „to szare tło kompletnie nie pasuje do strony, białe
   lub złote?"). Kancelaria ma biel + złoto, więc sekcje wyróżnione dostają kość słoniową
   ze złotymi liniami na styku z bielą. */
.tlo-kremowe{background:linear-gradient(180deg,#fdfbf5,#f7f1e3);
  border-top:1px solid rgba(179,134,0,.16);border-bottom:1px solid rgba(179,134,0,.16)}
/* Sekcje kremowe stojące jedna pod drugą (zespół i opinie) — bez kreski na styku. */
.tlo-kremowe + .tlo-kremowe{border-top:0}

/* Odstęp pod nagłówkiem „Oferta" — sam nagłówek ma własny dolny margines sekcji,
   a kafle zaczynały się dopiero ~100 px niżej (uwaga Przemka 17.08). */
.naglowek-oferty h2{margin-bottom:0}

/* ── Opinie i referencje: dwie karuzele obok siebie ─────────────────────────── */
.opinie-i-referencje{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);
  gap:2.5rem;align-items:start;margin-top:2rem}
.opinie-i-referencje h3{font-size:1rem !important;letter-spacing:.08em;text-transform:uppercase;
  color:var(--muted) !important;margin:0 0 1rem !important}
/* Karuzela opinii pochodzi z CMS (`testimonials`) — dopasowujemy ja do reszty strony. */
.testimonial{background:#fff;border:1px solid var(--line);border-radius:16px;padding:1.5rem;
  height:100%}
.testimonial .author{display:flex;align-items:center;gap:.85rem;margin-bottom:.9rem}
.testimonial .author .img img,.testimonial .avatar_default{width:52px;height:52px;
  border-radius:50%;object-fit:cover;display:flex;align-items:center;justify-content:center;
  background:var(--mark);color:#14110b;font-weight:700}
.testimonial .name{font-weight:700;color:var(--ink)}
.testimonial .date{font-size:.8rem;color:var(--muted)}
.testimonial .text{font-size:.92rem;line-height:1.6;color:var(--text-soft)}
.testimonial .source{display:flex;align-items:center;gap:.6rem;margin-top:1rem;padding-top:.9rem;
  border-top:1px dashed var(--line);font-size:.78rem;color:var(--muted)}
.testimonial .source .img img{height:22px;width:auto}
.kol-referencje .gallery_photo img{width:100%;height:230px;object-fit:cover;border-radius:12px;
  border:1px solid var(--line)}
.kol-referencje .gallery_name{margin-top:.6rem;font-size:.82rem;color:var(--muted);text-align:center}
/* Kropki nawigacji owl — theme ich nie stylizuje pod nasza palete. */
.owl-wrapper .owl-dots{display:flex;justify-content:center;gap:.4rem;margin-top:1.2rem}
.owl-wrapper .owl-dot span{display:block;width:8px;height:8px;border-radius:50%;
  background:var(--line-soft)}
.owl-wrapper .owl-dot.active span{background:var(--mark)}

/* ── Sekcja „Dlaczego AI poleca" na jasnym tle ────────────────────────────────
   Klocek `ai-authority` z biblioteki zaklada ciemne tlo (biale litery, przezroczyste
   karty). Sekcja jest jasna, wiec przestawiamy kolory: karty biale ze zlota ramka,
   liczby w kolorze marki, tekst ciemny. Uklad i odstepy zostaja z klocka. */
.ai-jasna .ai-auth h2,.ai-jasna .ai-auth .ai-auth-lead{color:var(--ink)}
.ai-jasna .ai-auth .ai-auth-lead{opacity:1;color:var(--text-soft)}
.ai-jasna .ai-stat{background:#fff;border:1px solid rgba(179,134,0,.28);
  box-shadow:0 14px 30px -22px rgba(18,19,26,.35)}
.ai-jasna .ai-stat-num{color:var(--mark-dark)}
.ai-jasna .ai-stat-lbl{color:var(--text-soft)}
.ai-jasna .ai-auth-quote{background:#fff;border:1px solid rgba(179,134,0,.28)}
.ai-jasna .ai-auth-quote p{color:var(--text)}
.ai-jasna .ai-auth-quote strong{color:var(--ink)}
.ai-jasna .ai-auth-ico{color:var(--mark)}
.ai-jasna .ai-chip{background:#fff;border:1px solid rgba(179,134,0,.3);color:var(--text)}
.ai-jasna .ai-chip .material-symbols-outlined{color:var(--mark)}

/* ── Megamenu Oferty ──────────────────────────────────────────────────────────
   Theme daje pozycji menu `position:static`, a samemu megamenu tylko klase — reszta
   nalezy do nas. Panel rozciaga sie na pelna szerokosc naglowka i pokazuje cztery huby
   ze struktury serwisu. */
/* 🛑 PUNKT ODNIESIENIA PANELU. Panel jest pozycjonowany bezwzglednie, wiec liczy sie od
   najblizszego pozycjonowanego przodka. Domyslnie byl nim `nav.header_menu` szeroki na
   445 px — cztery kolumny scisnely sie tam do nieczytelnej szerokosci i tytuly na siebie
   nachodzily. Przenosimy punkt odniesienia na `.center` (1400 px, wysrodkowany kontener
   naglowka), zdejmujac `relative` z nawigacji.
   BEZPIECZNE dla zwyklych rozwijanych podmenu: theme nadaje `position:relative`
   POZYCJI LISTY (`<li class="relative">`, header.php ~440), a nie nawigacji — one
   odnosza sie do swojego `li` i ta zmiana ich nie dotyka. */
header .center{position:relative}
nav.header_menu{position:static}
.megamenu{position:absolute;top:100%;left:0;right:0;z-index:60;background:#fff;
  border-top:2px solid var(--mark);box-shadow:0 26px 60px -18px rgba(18,19,26,.28);
  padding:2rem 2.4rem 2.2rem;border-radius:0 0 16px 16px}
.mm-siatka{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:2rem;
  max-width:1280px;margin:0 auto}
/* Nieruchomosci na cala szerokosc: pozycji jest kilkakrotnie wiecej niz w pozostalych
   hubach razem, wiec lista lamie sie na kolumny zamiast ciagnac w jednym slupku. */
.mm-blok-szeroki{max-width:1280px;margin:0 auto 1.6rem;padding-bottom:1.4rem;
  border-bottom:1px solid var(--line)}
.mm-lista-kolumny{column-count:4;column-gap:2rem}
.mm-lista-kolumny li{break-inside:avoid}
.mm-siatka-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.mm-tytul{display:flex;align-items:center;gap:.6rem;
  font-size:1rem !important;font-weight:700;color:var(--ink) !important;margin:0 0 .3rem !important}
/* Znak obszaru przy nazwie hubu — ten sam, co na kaflach oferty. Cztery listy usług
   stały wcześniej jedna przy drugiej bez żadnego rozróżnienia i zlewały się w jedną
   ścianę tekstu (uwaga Przemka 17.08). */
.mm-ikona{display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;
  width:34px;height:34px;border-radius:10px;color:var(--mark-dark);
  background:linear-gradient(180deg,#fdfbf5,#f2e9d4);border:1px solid rgba(179,134,0,.3)}
.mm-ikona .material-symbols-outlined{font-size:1.15rem}
.mm-opis{font-size:.8rem !important;color:var(--muted) !important;line-height:1.4;
  margin:0 0 .9rem !important;padding-bottom:.7rem;border-bottom:1px solid var(--line)}
.megamenu ul{list-style:none;margin:0;padding:0}
.megamenu li{margin:0 0 .5rem}
/* Motyw ma wlasny znacznik pozycji (`li:before` ze znakiem z Font Awesome 7), ale tego
   fontu strona nie wczytuje — zamiast strzalki wychodzil pusty prostokat. Wylaczamy go
   i rysujemy wlasny przy odnosniku, ligatura z Material Symbols (ten font jest wczytany
   dla calej strony, uzywaja go ikony w sekcjach). */
.mm-siatka li::before,.megamenu li::before{content:none !important;display:none !important}
/* 🛑 SELEKTOR MUSI MIEC `header nav`. Motyw ustawia `nav.header_menu .megamenu ul li a
   {padding:0}` — regula z czterema elementami i dwiema klasami bije krotszy zapis, przez
   co strzalka ladowala na pierwszej literze zamiast w swietle przed tekstem. Liczy sie
   liczba KLAS, nie dlugosc selektora: `header nav .megamenu` (jedna klasa) nadal
   przegrywalo, dopiero `nav.header_menu` + `.megamenu` (dwie) wygrywa. */
header nav.header_menu .megamenu ul li,header nav .megamenu_responsive ul li{padding-left:0}
header nav.header_menu .megamenu ul li a,header nav .megamenu_responsive ul li a{position:relative;
  display:block;padding-left:1.35rem;font-size:.88rem;color:var(--text-soft);
  text-decoration:none;line-height:1.4;transition:color .15s,padding-left .15s}
header nav.header_menu .megamenu ul li a::before,header nav .megamenu_responsive ul li a::before{
  content:'chevron_right';position:absolute;left:0;top:0;
  font-family:'Material Symbols Outlined';font-size:1.05rem;line-height:1.35;
  color:rgba(179,134,0,.6);transition:color .15s,transform .15s}
header nav.header_menu .megamenu ul li a:hover,header nav .megamenu_responsive ul li a:hover{
  color:var(--mark-dark);padding-left:1.55rem}
header nav.header_menu .megamenu ul li a:hover::before,
header nav .megamenu_responsive ul li a:hover::before{
  color:var(--mark-dark);transform:translateX(2px)}
.mm-wiecej a{font-weight:700;color:var(--mark-dark) !important;font-size:.84rem !important}
/* Menu mobilne dostaje ten sam panel w jednej kolumnie. */
.megamenu_responsive .mm-siatka{grid-template-columns:minmax(0,1fr);gap:1.4rem}
.megamenu_responsive .mm-lista-kolumny{column-count:1}
.megamenu_responsive{padding:1rem 0}

/* ── Pasek kontaktu w naglowku (`header_icon`) ────────────────────────────── */
.header_icon{display:flex;align-items:center;gap:1.2rem}
.header_icon a{display:inline-flex;align-items:center;gap:.45rem;text-decoration:none;
  color:var(--ink) !important;font-weight:600;font-size:.92rem}
.header_icon a:hover{color:var(--mark-dark) !important}
.header_icon .material-symbols-outlined{color:var(--mark);font-size:1.3rem}

/* ── Media spolecznosciowe: pasek nad stopka ────────────────────────────────── */
.social-pasek{display:flex;justify-content:center;flex-wrap:wrap;gap:1rem;margin-top:1.8rem}
.social-kafel{display:inline-flex;align-items:center;gap:.6rem;padding:.85rem 1.5rem;
  border:1px solid var(--line);border-radius:999px;background:#fff;text-decoration:none;
  color:var(--ink) !important;font-weight:600;font-size:.92rem;transition:border-color .2s,transform .2s}
.social-kafel:hover{border-color:var(--mark);transform:translateY(-2px)}
.social-kafel .material-symbols-outlined{color:var(--mark);font-size:1.3rem}

/* ── Sekcja o kancelarii: etykieta nad chipami mediow ───────────────────────── */
.media-tytul{font-size:.76rem !important;letter-spacing:.1em;text-transform:uppercase;
  color:var(--muted) !important;margin:1.7rem 0 .7rem !important}

/* ── Dane kontaktowe: cztery biale karty w rzedzie ───────────────────────────
   Wariant jasny (bez klasy `dark`), bo sekcja kontaktu przestala byc granatowa. */
.icon-list.dnt-kontakt{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1rem}
.icon-list.dnt-kontakt li{align-items:flex-start;background:#fff;border:1px solid var(--line);
  border-radius:12px;padding:1rem 1.1rem}
.icon-list.dnt-kontakt a{color:var(--text);text-decoration:none}
.icon-list.dnt-kontakt a:hover{color:var(--mark-dark)}
.icon-list.dnt-kontakt .il-ico .material-symbols-outlined{color:var(--mark)}
.kontakt-naglowek{margin-bottom:2rem}

/* ── Mapa w kolumnie obok formularza ──────────────────────────────────────────
   Klocek `split-section` nie przewiduje osadzonej ramki, a `iframe` bez wymuszonej
   wysokosci zapada sie do 150 px domyslnych przegladarki. */
.mapa-kontakt{border-radius:16px;overflow:hidden;border:1px solid var(--line);
  box-shadow:0 18px 40px -24px rgba(18,19,26,.28);min-height:430px}
.mapa-kontakt iframe{display:block;width:100%;height:100%;min-height:430px;border:0}

/* ── Formularz kontaktowy ─────────────────────────────────────────────────────
   Biala karta `split-form` z biblioteki. Zostaje przycisk: klocek styluje `button`,
   a formularz CMS renderuje `input[type=submit]`. */
.wow .split-form input[type=submit],.wow.split-form input[type=submit]{
  background:var(--mark);color:#14110b;border:0;border-radius:12px;padding:.95rem 2.4rem;
  font-weight:700;cursor:pointer;font-size:1rem;width:auto;
  box-shadow:0 14px 32px -14px rgba(179,134,0,.7)}
.wow .split-form input[type=submit]:hover,.wow.split-form input[type=submit]:hover{
  background:var(--mark-dark);color:#fff}
.wow .split-form .rodo_agree,.wow.split-form .rodo_agree{font-size:.82rem;
  color:var(--text-soft);line-height:1.5}
.formularz-kontakt form{margin:0}


/* ── Stopka ──────────────────────────────────────────────────────────────────
   Theme wstrzykuje do trzeciej kolumny link "Odstapienie od umowy / zwrot"
   (footer.php, PATCH s-zwrot-stopka-fb3 — wymog dla sklepow, wstrzykiwany bezwarunkowo).
   Kancelaria nie sprzedaje towarow, wiec pozycja jest mylaca. Ukrywamy ja stylem,
   bo edycja pliku theme oznaczalaby customizacje core u wszystkich klientow. */
.footer_box li:has(a[href*="formularz-zwrotu"]){display:none}
.footer_box a[href*="formularz-zwrotu"]{display:none}
.nowrap{white-space:nowrap}

@media (max-width:1100px){
  .huby-siatka{grid-template-columns:repeat(2,minmax(0,1fr))}
  .opinie-i-referencje{grid-template-columns:minmax(0,1fr);gap:2rem}
  .zaufanie{grid-template-columns:repeat(2,minmax(0,1fr))}
  .icon-list.dnt-kontakt{grid-template-columns:repeat(2,minmax(0,1fr))}
  .mapa-kontakt,.mapa-kontakt iframe{min-height:320px}
  .showcase-item .showcase-img{height:280px}
}
@media (max-width:900px){
  /* Na telefonie cztery wystąpienia stoją obok siebie w przewijanym pasku — pionowa lista
     zajmowałaby pół ekranu. Przewijanie działa palcem, a skrypt w treści sekcji dokłada
     automatyczne przesuwanie (zatrzymywane pierwszym gestem użytkownika). */
  /* 🛑 `grid-template-columns:none` JEST KONIECZNE. Motyw nadaje galerii klase `x1`,
     ktora ustawia JEDNA kolumne jawna — przy przelaczeniu na uklad poziomy zostawala ona
     w siatce jako pierwsza, scisnieta do 26 px, a `grid-auto-columns` dotyczy tylko kolumn
     dokladanych automatycznie. Efekt: pierwsze wystapienie bylo paskiem szerokosci ikony. */
  .media-lista .galleries_wrapper{grid-auto-flow:column;grid-template-columns:none;
    grid-auto-columns:86%;overflow-x:auto;scroll-snap-type:x mandatory;
    padding-bottom:.6rem;scrollbar-width:thin}
  .media-lista .gallery_item{scroll-snap-align:center}
}
@media (max-width:700px){
  .huby-siatka{grid-template-columns:minmax(0,1fr)}
  .hub-foto{aspect-ratio:4/3}
  .hub-foto > img:first-child{object-position:50% 45%}
  /* Tablice MS i UODO są skadrowane pod 4:5 (napis kończy się nad połową kółka) — każdy
     niższy kadr ucina albo godło, albo napis, albo wsuwa napis pod kółko. Zostają 4:5. */
  :is(.motyw-spolki,.motyw-rodo) .hub-foto{aspect-ratio:4/5}
  .social-kafel{padding:.7rem 1.1rem;font-size:.86rem}
  .zaufanie{grid-template-columns:minmax(0,1fr);gap:1rem}
  .icon-list.dnt-kontakt{grid-template-columns:minmax(0,1fr)}
  .showcase-item .showcase-img{height:260px}
}
/* === [BLOCK: landing-lexinvest-portrety] END === */

/* === [BLOCK: landing-lexinvest-hero] START === */
/* ── Hero: karta z tekstem na zdjęciu ────────────────────────────────────────
   Szablon wybrany 17.08 spośród czterech (podstrony `/szablon-slidera-1..4/`).

   🛑 KONTENERY MOTYWU MUSZA STRACIC `position:relative`. Warstwa z kartą stoi
   `position:absolute; inset:0`, zeby dojechac do krawedzi ekranu, a `inset` liczy sie od
   najblizszego przodka z pozycjonowaniem — takich jest w tym lancuchu az piec (`.center`,
   `.slider_txt`, `.slider_txt_pc`, `section.container` page-buildera, `.section-content`).
   Warstwa przyklejala sie do kontenera o zerowej wysokosci i `overflow:hidden` obcinal
   cala tresc, przez co slajd wygladal na pusty.
   Selektor ma szesc klas celowo: motyw trzyma `.slider_txt` regula z pieciu
   (`.swiper-container .swiper-wrapper .swiper-slide .center .slider_txt`), wiec krotszy
   zapis przegrywa specyficznoscia. */
.pages_slider .swiper-container .swiper-wrapper .swiper-slide:has(.hero-warstwa)
  :is(.center,.slider_txt,.slider_txt_pc,.container,.section-content,.section-content > div){
  position:static;max-width:none;margin:0;padding:0;width:auto;height:auto}

/* Kadrowanie zdjecia. Motyw wpisuje w znacznik slajdu samo `background-image`, wiec
   `background-size` i `background-position` musza przyjsc stad. */
.pages_slider .swiper-slide:has(.hero-warstwa){background-size:cover;background-repeat:no-repeat}
/* `poz-plansza` — tlo skladane przez `tla_slajdow.py`, ma proporcje slajdu, wiec kadru
   nie przesuwamy: kazde przesuniecie ucina sylwetce glowe albo nogi. */
.pages_slider .swiper-slide:has(.poz-plansza){background-position:50% 50%}
.pages_slider .swiper-slide:has(.poz-gora){background-position:50% 12%}
.pages_slider .swiper-slide:has(.poz-srodek){background-position:50% 28%}
.pages_slider .swiper-slide:has(.poz-dol){background-position:50% 50%}
/* `poz-yNN` — pelny kadr 16:9 z Gemini, punkt kadrowania w pionie ustawiony na twarz. */
.pages_slider .swiper-slide:has(.poz-y0){background-position:50% 0%}
.pages_slider .swiper-slide:has(.poz-y5){background-position:50% 5%}
.pages_slider .swiper-slide:has(.poz-y12){background-position:50% 12%}
.pages_slider .swiper-slide:has(.poz-y15){background-position:50% 15%}
.pages_slider .swiper-slide:has(.poz-y50){background-position:50% 50%}

/* Wysokosc rosnie z szerokoscia ekranu. Motyw wpisuje w znacznik slajdu sztywne
   `height:640px` (pole „wysokosc" slajdu), wiec bez `!important` sie nie da. Przy stalych
   640 px monitor 2560 px dawal slajd 4:1 i `cover` ucinal ~44% wysokosci zdjecia — razem
   z twarzami. Teraz: 640 px do 1600 px szerokosci, potem 40vw, najwyzej 75% wysokosci okna.
   Telefon (<=900 px) zostaje przy wysokosci z danych slajdu. */
@media (min-width:901px){
  .pages_slider .swiper-slide:has(.hero-warstwa){height:clamp(640px,40vw,75vh) !important}
}

/* Rozjasnienie lewej strony kadru — pod karta. Warstwa `::before`, bo styl w znaczniku
   (tam motyw wpisuje tlo) bije kazda regule z arkusza. Przy okazji ratuje czytelnosc:
   zdjecia klienta maja ~900 px szerokosci, a hero 1440 px, wiec lewa polowa jest miekka.
   Karta i tak ja zakrywa. */
.pages_slider .swiper-slide:has(.hero-warstwa)::before{content:'';position:absolute;inset:0;
  z-index:1;background:linear-gradient(90deg,rgba(253,251,245,.96) 0%,
    rgba(253,251,245,.9) 30%,rgba(253,251,245,.5) 50%,rgba(253,251,245,0) 70%)}

.hero-warstwa{position:absolute;inset:0;z-index:2;display:flex;align-items:center;
  overflow:hidden}
.hero-plansza{width:100%;max-width:1340px;margin:0 auto;padding:0 32px}
.hero-karta{max-width:600px;background:rgba(255,255,255,.92);border-left:4px solid #b38600;
  border-radius:4px;padding:2.4rem 2.6rem;
  box-shadow:0 34px 80px -46px rgba(18,19,26,.7)}
.hero-karta .eyebrow{display:inline-block;margin-bottom:.9rem;color:#8a6800}
.hero-tytul{font-family:var(--font-family-header,inherit);
  font-size:clamp(2rem,3.5vw,3.1rem);line-height:1.14;color:#12131a;margin:0 0 .9rem;
  font-weight:400}
.hero-tytul em{font-style:normal;color:#8a6800}
.hero-opis{color:#4a4f5c;font-size:1.05rem;line-height:1.65;margin:0 0 1.7rem;max-width:44ch}
.hero-karta nav.neon p{margin:0}
/* Kto prowadzi ten obszar — pod przyciskiem, zeby nie kolidowac ze strzalkami slidera,
   ktore motyw stawia w prawym dolnym rogu slajdu. */
.hero-osoba{margin:1.7rem 0 0;padding-left:.9rem;font-size:.84rem;line-height:1.45;
  color:#6b7280;border-left:2px solid rgba(179,134,0,.55)}
.hero-osoba strong{display:block;color:#12131a;font-size:.95rem}

/* ── Wejscie tresci ───────────────────────────────────────────────────────────
   Karta wjezdza z lewej przy kazdej zmianie slajdu (animacja siedzi na
   `.swiper-slide-active`). Uzytkownik z wylaczonymi animacjami w systemie dostaje
   slajd bez ruchu. */
@keyframes hero-wjazd{from{opacity:0;transform:translateX(-26px)}to{opacity:1;transform:none}}
.swiper-slide-active .hero-karta{animation:hero-wjazd .6s cubic-bezier(.22,.9,.3,1) both}
@media (prefers-reduced-motion:reduce){
  .swiper-slide-active .hero-karta{animation:none}
}

/* ── Nawigacja slidera ─────────────────────────────────────────────────────── */
.pages_slider .nav{position:absolute;right:0;bottom:1.6rem;z-index:5;display:flex;gap:.6rem;
  justify-content:flex-end;width:auto}
/* Selektor musi byc co najmniej tak szczegolowy jak theme'owy
   `.swiper-container .nav .swiper-button-prev{background:transparent}`. */
.pages_slider .nav .swiper-button-prev,
.pages_slider .nav .swiper-button-next{display:inline-flex;align-items:center;gap:.5rem;
  cursor:pointer;padding:.55rem 1.1rem;border-radius:999px;font-size:.85rem;letter-spacing:.02em;
  background:rgba(18,19,26,.9) !important;color:#fff !important;
  border:1px solid rgba(201,162,39,.7);backdrop-filter:blur(6px);
  transition:background .2s,border-color .2s,color .2s}
.pages_slider .nav .swiper-button-prev:hover,
.pages_slider .nav .swiper-button-next:hover{background:#b38600 !important;
  border-color:#c9a227;color:#14110b !important}
.pages_slider .nav .swiper-button-prev i,.pages_slider .nav .swiper-button-next i{margin:0 !important}
.pages_slider .nav i{font-size:.8rem}

/* Slajdy nieaktywne musza byc calkowicie przezroczyste. Przy trybie `loop` Swiper
   tworzy duplikaty slajdow, ktore potrafia zostac z opacity 1 — wtedy spod tresci
   aktywnego slajdu przebija tekst nastepnego. */
.pages_slider .swiper-slide{transition:opacity .8s ease}
.pages_slider .swiper-slide:not(.swiper-slide-active){opacity:0 !important;pointer-events:none}
/* Zanim Swiper sie zainicjalizuje, zaden slajd nie ma klasy `swiper-slide-active`,
   wiec przez ulamek sekundy wszystkie nakladaja sie na siebie. */
.pages_slider .swiper-container:not(.swiper-initialized):not(.swiper-container-initialized) .swiper-slide{opacity:0 !important}
.pages_slider .swiper-container:not(.swiper-initialized):not(.swiper-container-initialized) .swiper-slide:first-child{opacity:1 !important}

@media (max-width:900px){
  /* Nawigacja: element ma szerokosc trescia, nie calego ekranu — inaczej `right`
     odnosi sie do pasa szerokiego na 100% i przyciski wyjezdzaja poza kadr. */
  .pages_slider .nav{position:absolute;left:50%;right:auto;transform:translateX(-50%);
    bottom:1rem;width:max-content;max-width:calc(100% - 2rem)}
  /* Na telefonie karta zajmuje cala szerokosc, a zdjecie widac nad nia i pod nia.
     Rozjasnienie idzie z gory na dol, bo karta nie stoi juz po lewej stronie kadru. */
  .pages_slider .swiper-slide:has(.hero-warstwa)::before{
    background:linear-gradient(180deg,rgba(253,251,245,.55) 0%,rgba(253,251,245,.9) 45%,
      rgba(253,251,245,.96) 100%)}
  .pages_slider .swiper-slide:has(.poz-gora),
  .pages_slider .swiper-slide:has(.poz-srodek){background-position:62% 14%}
  /* Plansza skladana: na waskim ekranie kadr `cover` przycina ja po bokach, wiec
     przesuwamy go na sylwetke — inaczej widac sam pusty lewy margines planszy. */
  .pages_slider .swiper-slide:has(.poz-plansza),
  .pages_slider .swiper-slide:has(.hero-warstwa[class*="poz-y"]){background-position:72% 0%}
  .hero-plansza{padding:1.4rem 20px 4rem}
  .hero-karta{max-width:none;padding:1.5rem 1.6rem}
  .hero-tytul{font-size:clamp(1.6rem,7vw,2.1rem)}
  .hero-opis{font-size:.96rem;margin-bottom:1.2rem}
  .hero-osoba{margin-top:1.1rem;font-size:.8rem}
}
/* === [BLOCK: landing-lexinvest-hero] END === */
/* === [BLOCK: landing-lexinvest-podstrony] START === */
/* Wzory podstron LexInvest. Uklady sekcji to klocki biblioteki (split-section,
   feature-cards, pill-chips, bullet-icon-list); ponizej tylko to, czego biblioteka
   nie ma — kazda grupa z powodem. */

/* ── Przyciski poza lewa kolumna `split-section` ─────────────────────────────
   Klocek styluje `.split-cta` wylacznie w `.split-left`. W naglowku podstrony, w karcie
   obszaru i w tekscie artykulu przycisk stoi gdzie indziej i wychodzil jako goly link.
   Tekst ciemny zamiast bialego: bialy na zlocie marki ma kontrast ok. 3:1 (za malo),
   ciemny grafit ok. 7:1. Wariant `ghost` = obrys, dla drugiej akcji obok glownej. */
.wow .split-cta{display:inline-flex;align-items:center;gap:.5rem;background:var(--mark);
  color:#14110b !important;padding:.85rem 1.5rem;border-radius:12px;font-weight:700;
  text-decoration:none !important;border:1px solid var(--mark);line-height:1.2;
  transition:background .2s,transform .15s,color .2s;
  box-shadow:0 12px 28px -14px rgba(179,134,0,.75)}
.wow .split-cta:hover{background:var(--mark-dark);border-color:var(--mark-dark);color:#fff !important;
  transform:translateY(-1px)}
.wow .split-cta.ghost{background:#fff;color:var(--ink) !important;border-color:rgba(179,134,0,.45);
  box-shadow:none}
.wow .split-cta.ghost:hover{background:#fdf8ea;color:var(--ink) !important;border-color:var(--mark)}
.wow .split-cta .material-symbols-outlined{font-size:1.15rem}
/* 🛑 Klocek ustawia bialy tekst przez `.split-left .split-cta` (dwie klasy + `.wow` = trzy)
   — krotsza regula wyzej przegrywa i w lewej kolumnie przycisk zostawal bialy na zlocie. */
.wow .split-left .split-cta{color:#14110b !important}
.wow .split-left .split-cta:hover{color:#fff !important}
.wow .split-left .split-cta.ghost,.wow .split-left .split-cta.ghost:hover{color:var(--ink) !important}
/* 🛑 ZLOTE PRZYCISKI = BIALY NAPIS (decyzja 30.09 przed wysylka demo klientce, swiadomie
   wbrew kontrastowi ok. 3,3:1 — NIE „naprawiac” z powrotem na ciemny). Nadpisuje ciemny
   napis z `brand.py` (`landing-lexinvest-brand`) i z regul nizej. Tylko przyciski: numery
   krokow i plakietki pakietow zostaja ciemne. Wariant `ghost` (biale tlo) bez zmian. */
html body .split-cta:not(.ghost),html body .wow .split-left .split-cta:not(.ghost),
html body .split-cta:not(.ghost) .material-symbols-outlined,
html body nav.neon p a,html body .wow nav.neon p > a,html body nav.wow.neon p > a,
html body input[type=submit],html body button[type=submit],
html body .wow .ck-zamow,html body .wow .split-form input[type=submit],
html body .pages_slider .nav .swiper-button-prev:hover,
html body .pages_slider .nav .swiper-button-next:hover{color:#fff !important}
/* Lista z ikonami poza lewa kolumna `split-section` (ramka na stronie lokalnej, opis
   produktu). Klocek styluje `ul.split-list` tylko w `.split-left`, wiec gdzie indziej
   wychodzila kropka motywu i ikona sklejona z tekstem. */
.wow ul.split-list{list-style:none;padding:0;margin:1rem 0 0}
.wow ul.split-list li{display:flex;gap:.65rem;align-items:flex-start;padding:.4rem 0;
  list-style:none;color:var(--text)}
.wow ul.split-list li::before{content:none}
.wow ul.split-list li .material-symbols-outlined{color:var(--mark);flex-shrink:0;font-size:1.3rem}
.przyciski-rzad,.ph-przyciski{display:flex;flex-wrap:wrap;gap:.8rem;margin-top:1.4rem}

/* ── Nosnik wstawiany znacznikiem [ADDON_PAGES-BY-ID] ────────────────────────
   Nosnik ma wlasne sekcje; opakowanie ma byc przezroczyste na pelna szerokosc. */
.nosnik > .section-content > div{width:100%}

/* ── Naglowek podstrony: tekst + osoba prowadzaca obszar ─────────────────────
   Mniejsza odmiana hero ze strony glownej (kremowe tlo, zlote akcenty), bez slidera. */
.podstrona-hero{background:linear-gradient(180deg,#fff 0%,#fdfbf5 55%,#f6efdd 100%);
  border-bottom:1px solid rgba(179,134,0,.2)}
.ph-siatka{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,.9fr);gap:3rem;
  align-items:end;max-width:1240px;margin:0 auto}
.ph-tekst{padding-bottom:3rem}
.okruszki{display:flex;flex-wrap:wrap;align-items:center;gap:.25rem;font-size:.82rem;
  color:var(--muted);margin-bottom:1.3rem}
.okruszki a{color:var(--text-soft);text-decoration:none}
.okruszki a:hover{color:var(--mark-dark);text-decoration:underline}
.okruszki .okr-sep{font-size:1rem;color:rgba(179,134,0,.6)}
.okruszki span[aria-current]{color:var(--ink);font-weight:600}
.podstrona-hero h1{font-family:var(--font-family-header,inherit);
  font-size:clamp(2rem,4vw,3.1rem) !important;line-height:1.12 !important;
  color:var(--ink) !important;margin:.4rem 0 1rem !important;letter-spacing:-.01em}
.ph-lead{font-size:1.1rem !important;line-height:1.65 !important;color:var(--text) !important;
  max-width:60ch;margin:0 0 1.2rem !important}
.ph-fakty{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:.55rem}
.ph-fakty li{display:inline-flex;align-items:center;gap:.4rem;background:#fff;
  border:1px solid rgba(179,134,0,.3);border-radius:999px;padding:.4rem .85rem;
  font-size:.86rem;font-weight:600;color:var(--ink)}
.ph-fakty li::before{content:none}
.ph-fakty .material-symbols-outlined{font-size:1.05rem;color:var(--mark-dark)}
/* Postac bez tla (`wyciete/*.webp`) oparta o dolna krawedz sekcji, na zlotym luku —
   ten sam zabieg co na kaflach oferty strony glownej. */
.ph-osoba{position:relative;margin:0;height:430px;display:flex;align-items:flex-end;
  justify-content:center}
.ph-osoba::before{content:'';position:absolute;left:8%;right:8%;bottom:0;height:78%;
  border-radius:220px 220px 0 0;background:linear-gradient(180deg,#f7ecd0,#efe0b8);
  border:1px solid rgba(179,134,0,.25);border-bottom:0}
.ph-osoba img{position:relative;z-index:1;height:100%;width:auto;max-width:100%;
  object-fit:contain;object-position:50% 100%;display:block;transform:scaleX(-1)}
/* ^ Lustrzane odbicie: na portrecie postac jest zwrocona w prawo, czyli OD tekstu. Po odbiciu
   patrzy w strone naglowka i przyciskow (uwaga Przemka 25.09). Podpis stoi obok obrazka,
   wiec napis sie nie odwraca. */

/* ── Wariant B naglowka: pionowy film zamiast zdjecia ────────────────────────
   Karta 9:16 na tym samym zlotym luku co zdjecie. Do klikniecia miniatura z przyciskiem,
   potem odtwarzacz TikToka w tej samej ramce (`lexinvest_film.php`). */
.ph-film{position:relative;margin:0;height:470px;display:flex;align-items:flex-end;
  justify-content:center;padding-bottom:1.4rem}
.ph-film::before{content:'';position:absolute;left:8%;right:8%;bottom:0;height:78%;
  border-radius:220px 220px 0 0;background:linear-gradient(180deg,#f7ecd0,#efe0b8);
  border:1px solid rgba(179,134,0,.25);border-bottom:0}
.phf-start,.phf-odtwarzacz{position:relative;z-index:1;display:block;height:100%;
  aspect-ratio:9/16;border-radius:22px;overflow:hidden;border:4px solid #fff;
  box-shadow:0 30px 60px -24px rgba(18,19,26,.55);background:#12131a}
.phf-start img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s}
.phf-start:hover img{transform:scale(1.04)}
.phf-play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:74px;height:74px;
  border-radius:50%;background:rgba(255,255,255,.92);display:flex;align-items:center;
  justify-content:center;box-shadow:0 14px 34px -10px rgba(0,0,0,.5);transition:transform .2s}
.phf-play .material-symbols-outlined{font-size:2.6rem;color:var(--mark-dark);
  font-variation-settings:'FILL' 1}
.phf-start:hover .phf-play{transform:translate(-50%,-50%) scale(1.08)}
.phf-czas{position:absolute;left:.8rem;top:.8rem;display:inline-flex;align-items:center;gap:.3rem;
  background:rgba(18,19,26,.72);color:#fff;font-size:.74rem;font-weight:700;border-radius:999px;
  padding:.3rem .65rem}
.phf-czas .material-symbols-outlined{font-size:1rem}
.ph-film figcaption{position:absolute;z-index:2;left:0;bottom:2.6rem;background:#fff;
  border:1px solid rgba(179,134,0,.3);border-radius:12px;padding:.7rem 1rem;
  box-shadow:0 18px 40px -22px rgba(18,19,26,.45);max-width:220px}
.ph-film figcaption strong{display:block;font-size:.9rem;color:var(--ink);line-height:1.3}
.ph-film figcaption span{display:block;font-size:.78rem;color:var(--text-soft)}
.ph-z-filmem .ph-siatka{align-items:center}
/* Karta filmu przesunieta w prawo, zeby podpis stal glownie OBOK niej, a nie na filmie.
   Po kliknieciu podpis znika (klasa `gra` z lexinvest_film.php) — zaslanialby odtwarzacz. */
.ph-film{justify-content:flex-end;padding-right:9%}
.ph-film.gra figcaption{display:none}
.ph-osoba figcaption{position:absolute;z-index:2;left:0;bottom:1.4rem;background:#fff;
  border:1px solid rgba(179,134,0,.3);border-radius:12px;padding:.7rem 1rem;
  box-shadow:0 18px 40px -22px rgba(18,19,26,.45);max-width:250px}
.ph-osoba figcaption strong{display:block;font-size:.9rem;color:var(--ink);line-height:1.3}
.ph-osoba figcaption span{display:block;font-size:.78rem;color:var(--text-soft)}

/* ── Sekcje tekstowe ─────────────────────────────────────────────────────── */
.tekst-waski{max-width:820px;margin:0 auto}
.tekst-waski h2,.tekst-2kol h2{font-size:clamp(1.5rem,2.6vw,2rem) !important;
  line-height:1.25 !important;color:var(--ink) !important;margin:0 0 1rem !important}
.tekst-2kol h2.h2-maly{font-size:1.35rem !important}
.tekst-waski p,.tekst-2kol p{font-size:1.02rem;line-height:1.75;color:var(--text)}
.tekst-2kol{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:3rem;
  max-width:1180px;margin:0 auto}
/* Zdjecie po lewej, tekst po prawej — przeplatanie sekcji jak na starej stronie. */
.split-wrap.split-odwrocony{grid-template-columns:1fr 1.4fr}
.split-wrap.split-odwrocony > .split-right{order:-1}
.split-photo img{aspect-ratio:4/5;object-fit:cover}
.lista-2kol{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:1.4rem}
.wow .split-list li{font-size:.95rem;line-height:1.5}
.ramka-lista{background:#fff;border:1px solid rgba(179,134,0,.28);border-radius:16px;
  padding:1.6rem 1.6rem 1.2rem;box-shadow:0 20px 44px -30px rgba(18,19,26,.4)}
.ramka-lista h2{margin:0 0 .6rem !important;color:var(--ink) !important}
.lista-gesta li{padding:.28rem 0 !important;font-size:.92rem !important}
.pills-srodek{justify-content:center;display:flex;flex-wrap:wrap;gap:.5rem;margin-top:1.4rem}

/* ── Lista kontrolna (PDF do pobrania) ─────────────────────────────────────── */
.lista-kontrolna{display:flex;flex-direction:column;gap:.55rem;background:#fff;
  border:1px solid rgba(179,134,0,.35);border-radius:18px;padding:1.8rem;text-decoration:none;
  color:inherit;box-shadow:0 24px 50px -32px rgba(18,19,26,.5);transition:transform .2s,border-color .2s}
.lista-kontrolna:hover{transform:translateY(-3px);border-color:var(--mark)}
.lk-ikona{font-size:2.4rem !important;color:var(--mark-dark)}
.lk-etykieta{font-size:.74rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);font-weight:700}
.lista-kontrolna strong{font-family:var(--font-family-header,inherit);font-size:1.2rem;color:var(--ink);line-height:1.3}
.lk-opis{font-size:.9rem;color:var(--text-soft);line-height:1.5}
.lk-cta{display:inline-flex;align-items:center;gap:.35rem;font-weight:700;color:var(--mark-dark);margin-top:.3rem}

/* ── Przyklad dokumentu z podpisem ─────────────────────────────────────────── */
.foto-dokument{display:block;position:relative;text-decoration:none}
.foto-dokument img{aspect-ratio:4/5;object-fit:cover;object-position:50% 0}
/* Podpis POD zdjeciem, nie na nim: grafika klienta ma wlasny przycisk „Pobierz fragment"
   w dolnym rogu i nakladka go zaslaniala. */
.fd-podpis{display:flex;align-items:center;gap:.4rem;padding:.75rem 1rem;
  font-size:.88rem;font-weight:700;color:var(--ink);border-top:1px solid var(--line)}

/* ── Cennik pakietow ─────────────────────────────────────────────────────────
   Klocek `pricing-table` biblioteki jest pod DWA pakiety z przelacznikiem miesiac/rok;
   tu sa cztery jednorazowe, wiec siatka i karta sa wlasne. */
.cennik-siatka{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1.2rem;
  max-width:1280px;margin:2.2rem auto 0;align-items:stretch}
.cennik-siatka.cs-3{grid-template-columns:repeat(3,minmax(0,1fr));max-width:1000px}
.cennik-karta{position:relative;display:flex;flex-direction:column;background:#fff;
  border:1px solid var(--line);border-radius:18px;padding:1.6rem 1.4rem 1.4rem;
  box-shadow:0 22px 48px -34px rgba(18,19,26,.5)}
.cennik-karta.ck-wyrozniony{border:2px solid var(--mark);transform:translateY(-6px);
  box-shadow:0 30px 60px -30px rgba(179,134,0,.55)}
.ck-plakietka{position:absolute;top:-.8rem;left:50%;transform:translateX(-50%);white-space:nowrap;
  background:var(--mark);color:#14110b;font-size:.72rem;font-weight:800;letter-spacing:.06em;
  text-transform:uppercase;border-radius:999px;padding:.3rem .8rem}
.ck-glowa{padding-bottom:1rem;margin-bottom:1rem;border-bottom:1px dashed var(--line)}
.ck-ikona{font-size:1.8rem !important;color:var(--mark-dark)}
.cennik-karta h3{font-size:1.15rem !important;margin:.35rem 0 .3rem !important;color:var(--ink) !important}
.ck-cena{margin:0 !important;color:var(--text-soft);font-size:.9rem}
.ck-cena strong{font-family:var(--font-family-header,inherit);font-size:1.9rem;color:var(--ink);
  margin-right:.15rem}
.ck-lista{list-style:none;margin:0 0 1rem;padding:0;flex:1}
.ck-lista li{display:flex;gap:.45rem;align-items:flex-start;font-size:.86rem;line-height:1.45;
  color:var(--text);padding:.28rem 0}
.ck-lista li::before{content:none}
.ck-lista .material-symbols-outlined{font-size:1.05rem;color:var(--mark-dark);flex:0 0 auto;margin-top:.05rem}
.ck-gratis{display:flex;gap:.45rem;align-items:flex-start;font-size:.8rem !important;
  line-height:1.45;color:var(--text-soft) !important;background:#fdf8ea;border-radius:10px;
  padding:.6rem .75rem;margin:0 0 1rem !important}
.ck-gratis .material-symbols-outlined{font-size:1.05rem;color:var(--mark-dark)}
.ck-mala p{font-size:.92rem;color:var(--text-soft);flex:1}
.ck-akcje{display:flex;flex-direction:column;gap:.6rem;align-items:stretch;margin-top:auto}
.wow .ck-zamow{display:inline-flex;justify-content:center;align-items:center;gap:.45rem;
  background:var(--mark);color:#14110b !important;border-radius:12px;padding:.8rem 1rem;
  font-weight:700;text-decoration:none !important}
.wow .ck-zamow:hover{background:var(--mark-dark);color:#fff !important}
.ck-link{text-align:center;font-size:.86rem;font-weight:600;color:var(--mark-dark) !important}

/* ── Korzysci: ikona w karcie `feature-cards` (klocek zaklada emoji) ────────── */
.feature-card .fc-ikona{display:inline-flex;width:48px;height:48px;align-items:center;
  justify-content:center;border-radius:14px;background:#fdf8ea;color:var(--mark-dark);
  font-size:1.6rem;margin-bottom:.8rem;border:1px solid rgba(179,134,0,.25)}

/* ── Kto prowadzi obszar ───────────────────────────────────────────────────── */
.obszar-karta{display:grid;grid-template-columns:260px minmax(0,1fr);gap:2.6rem;
  align-items:end;max-width:1040px;margin:0 auto}
.ok-foto{height:320px;display:flex;align-items:flex-end;justify-content:center;
  background:radial-gradient(circle at 50% 70%,#f3e6c4,transparent 70%)}
.ok-foto img{height:100%;width:auto;object-fit:contain}
.ok-tresc{padding-bottom:1.2rem}
.ok-tresc h2{margin:.3rem 0 .2rem !important;color:var(--ink) !important}
.ok-rola{font-size:.9rem;color:var(--mark-dark);font-weight:600;margin:0 0 1rem !important}
.ok-tresc p{max-width:62ch;line-height:1.7}
.ok-orly{display:block;max-width:360px;width:100%;height:auto;margin:1rem 0 .4rem}

/* ── Kontakt na dole podstron: dane w dwoch kolumnach obok formularza ───────── */
.icon-list.dnt-kontakt.kontakt-2kol{grid-template-columns:repeat(2,minmax(0,1fr));margin-top:1.6rem}

/* ── Obszar: kafle uslug ze zdjeciem + lista pozostalych ───────────────────── */
.uslugi-siatka{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.3rem;margin-top:2rem}
.usluga-kafel{display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);
  border-radius:16px;overflow:hidden;text-decoration:none;color:inherit;
  transition:transform .2s,box-shadow .2s,border-color .2s}
.usluga-kafel:hover{transform:translateY(-4px);border-color:var(--mark);
  box-shadow:0 22px 48px -20px rgba(18,19,26,.28)}
.usluga-kafel img{width:100%;height:190px;object-fit:cover;display:block}
.uk-tresc{display:flex;flex-direction:column;gap:.45rem;padding:1.1rem 1.2rem 1.3rem;flex:1}
.uk-tresc strong{font-family:var(--font-family-header,inherit);font-size:1.12rem;color:var(--ink)}
.uk-tresc > span:not(.uk-wiecej){font-size:.88rem;line-height:1.55;color:var(--text-soft);flex:1}
.uk-wiecej{display:inline-flex;align-items:center;gap:.3rem;font-size:.8rem;font-weight:700;
  text-transform:uppercase;letter-spacing:.04em;color:var(--mark-dark)}
.uk-wiecej .material-symbols-outlined{font-size:1rem}
.uslugi-lista{list-style:none;margin:0;padding:0;column-count:3;column-gap:2rem}
.uslugi-lista li{break-inside:avoid;margin:0 0 .45rem}
.uslugi-lista li::before{content:none}
.uslugi-lista a{display:flex;gap:.3rem;align-items:flex-start;color:var(--text);text-decoration:none;font-size:.94rem}
.uslugi-lista a:hover{color:var(--mark-dark)}
.uslugi-lista .material-symbols-outlined{font-size:1.1rem;color:rgba(179,134,0,.7)}

/* ── Strona lokalna: sady okolicznych miejscowosci ─────────────────────────── */
.sady-siatka{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1rem;
  max-width:1280px;margin:2rem auto 0}
.sad-karta{background:#fff;border:1px solid var(--line);border-radius:14px;padding:1.1rem 1.15rem}
.sad-miasto{display:inline-flex;align-items:center;gap:.25rem;font-size:.74rem;font-weight:800;
  letter-spacing:.08em;text-transform:uppercase;color:var(--mark-dark)}
.sad-miasto .material-symbols-outlined{font-size:.95rem}
.sad-karta h3{font-size:.98rem !important;line-height:1.35 !important;margin:.45rem 0 .4rem !important;
  color:var(--ink) !important}
.sad-karta p{font-size:.86rem;color:var(--text-soft);margin:0 0 .3rem;line-height:1.45}
.sad-tel{display:flex;align-items:center;gap:.3rem}
.sad-tel .material-symbols-outlined{font-size:1rem;color:var(--mark-dark)}
.sad-tel a{color:var(--text);text-decoration:none}

/* ── Artykul (t.php: tresc + staly prawy pasek) ──────────────────────────────
   Motyw nie ma typografii dlugiego tekstu — akapity i listy staly scisniete. */
body.t .text_container h2{font-family:var(--font-family-header,inherit);
  font-size:1.55rem !important;line-height:1.3 !important;color:var(--ink) !important;
  margin:2.2rem 0 .9rem !important;scroll-margin-top:110px}
body.t .text_container p,body.t .text_container li{font-size:1.04rem;line-height:1.8;color:var(--text)}
body.t .text_container ul{margin:0 0 1.2rem 1.2rem}
body.t .text_container li::marker{color:var(--mark)}
body.t .p_slider img{border-radius:18px;width:100%;height:auto;aspect-ratio:1730/650;object-fit:cover}
.art-lead{font-size:1.15rem !important;line-height:1.75 !important;color:var(--ink) !important;
  border-left:3px solid var(--mark);padding-left:1.2rem}
.art-spis{background:#fdfbf5;border:1px solid rgba(179,134,0,.25);border-radius:14px;
  padding:1.1rem 1.4rem;margin:1.6rem 0 0}
.art-spis-tytul{display:flex;align-items:center;gap:.4rem;font-weight:700;color:var(--ink) !important;
  margin:0 0 .5rem !important}
.art-spis-tytul .material-symbols-outlined{color:var(--mark-dark)}
.art-spis ol{margin:0 0 0 1.3rem}
.art-spis li{font-size:.95rem !important;line-height:1.6 !important}
.art-spis a{color:var(--text);text-decoration:none;border-bottom:1px solid rgba(179,134,0,.35)}
.art-spis a:hover{color:var(--mark-dark)}
.art-uwaga{display:flex;gap:.8rem;align-items:flex-start;background:#fff8e6;border-radius:12px;
  padding:1rem 1.2rem;margin:1.4rem 0}
.art-uwaga .material-symbols-outlined{color:#8a6800;flex:0 0 auto}
.art-uwaga p{margin:0 !important;font-size:.98rem !important}
.art-cta{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:1.2rem;align-items:center;
  background:linear-gradient(180deg,#fdfbf5,#f6efdd);border:1px solid rgba(179,134,0,.3);
  border-radius:16px;padding:1.4rem 1.5rem}
.art-cta-ikona{font-size:2.2rem !important;color:var(--mark-dark)}
.art-cta strong{font-size:1.1rem;color:var(--ink)}
.art-cta p{margin:.3rem 0 0 !important;font-size:.94rem !important;line-height:1.55 !important}
.pasek-kontakt,.pasek-uslugi{background:#fff;border:1px solid rgba(179,134,0,.28);
  border-radius:14px;padding:1.1rem 1.2rem;margin-bottom:1rem}
.pasek-kontakt{background:linear-gradient(180deg,#fdfbf5,#f6efdd)}
.pk-tytul{font-weight:800;color:var(--ink) !important;margin:0 0 .4rem !important}
.pasek-kontakt p{font-size:.88rem}
.pasek-kontakt a{display:flex;align-items:center;gap:.4rem;font-weight:700;color:var(--ink);
  text-decoration:none;margin-top:.45rem;font-size:.92rem}
.pasek-kontakt .material-symbols-outlined{color:var(--mark-dark);font-size:1.15rem}
.pasek-uslugi ul{list-style:none;margin:0;padding:0}
.pasek-uslugi li{padding:.3rem 0;border-bottom:1px dashed var(--line);font-size:.9rem}
.pasek-uslugi a{color:var(--text);text-decoration:none}
.pasek-uslugi a:hover{color:var(--mark-dark)}

/* ── Karta produktu (s.php) — pakiet uslugi, nie towar ───────────────────────
   Porownywarki i ulubionych nie da sie wylaczyc flaga, a dla uslugi prawnej sa mylace. */
body.s .store_options{display:none}
/* „Nasi klienci kupili takze" — CMS wypelnia ten blok produktami z tej samej kategorii,
   bo nie ma jeszcze historii zamowien. Dla kancelarii to deklaracja bez pokrycia, a obok
   i tak stoi „Inne produkty z kategorii" z tymi samymi pakietami. */
body.s .store_related_products.first_category{display:none}
/* Kolumna opisu jako karta w barwach marki; zdjecie okladki nie moze zajmowac pol ekranu. */
body.s .store_photos_container .photos img{max-height:560px;width:auto;max-width:100%;
  margin:0 auto;display:block;border-radius:16px}
body.s .store_description_container .sticky{background:linear-gradient(180deg,#fdfbf5,#f6efdd);
  border:1px solid rgba(179,134,0,.28);border-radius:18px;padding:1.8rem}
body.s .store_description_container h1{font-family:var(--font-family-header,inherit);
  font-size:clamp(1.8rem,3vw,2.5rem) !important;line-height:1.15 !important;color:var(--ink) !important}
body.s .store_features{font-size:.9rem;color:var(--mark-dark);font-weight:600}
body.s .store_basket_summary,body.s .tb{background:#fff;border-radius:12px}
.produkt-opis{max-width:820px}
/* Opis pakietu z filmem: lista po lewej, pionowy film Magdy po prawej (ten sam co w ofercie). */
.produkt-z-filmem{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,.9fr);gap:2.5rem;
  align-items:center;max-width:1180px}
.produkt-z-filmem .produkt-opis{max-width:none}
.produkt-z-filmem .ph-film{height:460px;padding-right:0;justify-content:center}
.produkt-z-filmem .ph-film figcaption{left:-.5rem}
@media (max-width:900px){.produkt-z-filmem{grid-template-columns:minmax(0,1fr)}}
.kat-lead{font-size:1.05rem;line-height:1.7;color:var(--text);max-width:70ch}
/* Kategoria sklepu: przy pieciu uslugach filtry „Nowosc / Bestseller", sortowanie
   i zakres cen to szum — zostaje sama lista kategorii. */
body.s_cat .msa_special_offers,body.s_cat .msa_orders,body.s_cat .msa_price_range{display:none}
body.s_cat h1.h4{font-family:var(--font-family-header,inherit);font-size:clamp(1.8rem,3vw,2.4rem) !important;
  color:var(--ink) !important}

/* ── Kontakt ─────────────────────────────────────────────────────────────── */
.kontakt-wrap{max-width:1240px;margin:0 auto}
.kontakt-glowa{max-width:760px;margin-bottom:2rem}
.wow .formularz-kontakt h2{font-size:1.45rem !important;margin:0 0 1.2rem !important}

/* ── Karta obszaru na bialym tle, oddzielona linia od kremowego kontaktu ─────── */
.obszar-sekcja{border-top:1px solid rgba(179,134,0,.16)}

@media (max-width:1100px){
  .cennik-siatka{grid-template-columns:repeat(2,minmax(0,1fr))}
  .cennik-karta.ck-wyrozniony{transform:none}
  .sady-siatka{grid-template-columns:repeat(2,minmax(0,1fr))}
  .uslugi-siatka{grid-template-columns:repeat(2,minmax(0,1fr))}
  .uslugi-lista{column-count:2}
}
@media (max-width:900px){
  .ph-siatka{grid-template-columns:minmax(0,1fr);gap:0}
  .ph-tekst{padding-bottom:1.5rem}
  .ph-osoba{height:300px}
  .ph-film{height:auto;padding:0 0 1.6rem;flex-direction:column;align-items:center;
    justify-content:flex-end}
  .phf-start,.phf-odtwarzacz{height:auto;width:min(300px,78vw)}
  .ph-film::before{height:70%}
  .ph-film figcaption{position:relative;left:auto;bottom:auto;margin-top:-1.2rem;max-width:none}
  .tekst-2kol{grid-template-columns:minmax(0,1fr);gap:2rem}
  .split-wrap.split-odwrocony{grid-template-columns:minmax(0,1fr)}
  .split-wrap.split-odwrocony > .split-right{order:0}
  .obszar-karta{grid-template-columns:minmax(0,1fr);gap:1rem}
  .ok-foto{height:260px}
  .art-cta{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:700px){
  .cennik-siatka,.cennik-siatka.cs-3,.sady-siatka,.uslugi-siatka{grid-template-columns:minmax(0,1fr)}
  .lista-2kol,.icon-list.dnt-kontakt.kontakt-2kol{grid-template-columns:minmax(0,1fr)}
  .uslugi-lista{column-count:1}
  .ph-osoba figcaption{left:.5rem;bottom:.8rem}
}
/* Podstrony z generatora agenta SEO (08.10, tester W3 pilota):
   - akapit pod naglowkiem sekcji dotykal siatki kart i karuzeli opinii (0 px);
   - data opinii i „Opublikowano na" z modulu opinii mialy #CCC na bialym (1,61:1). */
.naglowek-waski + .feature-grid,.naglowek-waski + .kol-opinie{margin-top:2rem}
.kol-opinie .testimonials .testimonial .author .vote .date,
.kol-opinie .testimonials .testimonial .source .name span{color:#767676}
/* 3, 6, 9 kart instytucji (miasta satelickie) - siatka 3 zamiast 4, bez pustych miejsc w rzedzie */
@media (min-width:1101px){.sady-siatka.ss-3{grid-template-columns:repeat(3,minmax(0,1fr));max-width:1100px;
  margin-left:auto;margin-right:auto}}
/* Tablet (siatka 2 kolumn): nieparzysty ostatni kafel uslugi stal sam z pusta polowa rzedu
   (tester etapu 2, /rodo/ 768) - wysrodkowany, tej samej szerokosci co pozostale */
@media (min-width:701px) and (max-width:1100px){
  .uslugi-siatka > :last-child:nth-child(odd){grid-column:1/-1;justify-self:center;width:calc(50% - .65rem)}}
/* Zdjecie obok dlugiego tekstu „jedzie” z nim (generator dodaje klocek split-sticky) -
   ponizej przyklejonego naglowka strony, nie pod nim */
.wow .split-right.split-sticky{top:6.5rem}
/* Tester etapu 3 (08.10): akapit pod lista z ptaszkami przyklejony (0 px) */
.wow ul.split-list + p{margin-top:1rem!important}
/* 3 karty „feature-grid" w ukladzie 2-kolumnowym biblioteki (561-900 px): trzecia na srodku */
@media (min-width:561px) and (max-width:900px){
  .wow .feature-grid.cols-3 > :last-child:nth-child(odd){grid-column:1/-1;justify-self:center;
    width:calc(50% - .75rem)}}
/* Lista „pozostale uslugi" z 1-3 pozycjami - jedna kolumna zamiast porozrzucanych trzech */
.uslugi-lista.ul-krotka{column-count:1}
/* Dokumenty prawne (polityka prywatnosci, regulamin, polityka opinii) wstawione jako tekst:
   kolumna do czytania i paragrafy mniejsze niz naglowki sekcji */
.dokument-prawny{max-width:860px;margin:0 auto}
.dokument-prawny h2{font-size:1.45rem;line-height:1.3;margin:2.2rem 0 .7rem}
.dokument-prawny h3{font-size:1.1rem;line-height:1.35;margin:1.8rem 0 .6rem}
.dokument-prawny li{margin:0 0 .45rem}
.dokument-prawny ol,.dokument-prawny ul{padding-left:1.6rem}
@media (max-width:600px){.dokument-prawny h2{font-size:1.2rem}
  .dokument-prawny ol,.dokument-prawny ul{padding-left:1.25rem}}
.dokument-prawny a{overflow-wrap:anywhere}
/* === [BLOCK: landing-lexinvest-podstrony] END === */