/* Avigon Base, main.css (ladowany asynchronicznie).
   Sekcje below-the-fold. Tokeny i above-the-fold siedza w critical.css. */

/* ---------- Sekcje / rytm ---------- */
.av-sec{padding-block:var(--av-section-y)}
.av-sec--light{background:var(--av-surface);color:var(--av-ink)}
.av-sec--alt{background:var(--av-surface-alt);color:var(--av-ink)}
.av-sec--dark{background:var(--av-surface-dark);color:var(--av-on-dark)}
.av-sec--dark .av-lead,.av-sec--dark p{color:var(--av-on-dark-soft)}
.av-sec--dark .av-h2,.av-sec--dark .av-h3,.av-sec--dark .av-h4,.av-sec--dark strong{color:var(--av-on-dark)}
.av-sec__actions{margin:2rem 0 0}
.av-sec__actions--center{display:flex;justify-content:center;margin-top:2.75rem}

.av-shead{margin-bottom:clamp(2rem,4vw,3.25rem);max-width:72ch}
.av-shead--center{margin-inline:auto;text-align:center}
.av-shead--center .av-lead{margin-inline:auto}
.av-h2--on-dark{color:var(--av-on-dark)}

.av-prose p{margin:0 0 1.15em;max-width:68ch}
.av-prose p:last-child{margin-bottom:0}
.av-prose--on-dark p{color:var(--av-on-dark-soft)}
.av-prose--sm p{font-size:.94rem}
.av-prose strong{color:var(--av-ink);font-weight:650}
.av-prose--on-dark strong{color:var(--av-on-dark)}

.av-grid{display:grid;gap:1px;background:var(--av-line)}
.av-grid--2{grid-template-columns:repeat(2,minmax(0,1fr))}
.av-grid--3{grid-template-columns:repeat(3,minmax(0,1fr))}
.av-grid--4{grid-template-columns:repeat(4,minmax(0,1fr))}
.av-card--bordered{border:0;padding:clamp(1.5rem,2.5vw,2rem);background:var(--av-surface)}
.av-card--bordered h3{margin-bottom:.5rem}
.av-card--bordered p{margin:0;font-size:.92rem;color:var(--av-ink-soft)}

/* Listy z ptaszkiem, bez ikon SVG, czysty CSS */
.av-checks li{position:relative;padding-left:1.7rem;margin-bottom:.6rem;font-size:.93rem}
.av-checks li::before{content:"";position:absolute;left:0;top:.42em;width:.62rem;height:.34rem;
border-left:2px solid var(--av-accent);border-bottom:2px solid var(--av-accent);transform:rotate(-45deg)}
/* Na jasnym tle sam zolty ptaszek gubi sie w tle, wiec tam idzie ciemny. */
.av-sec--light .av-checks li::before,.av-sec--alt .av-checks li::before{
border-left-color:var(--av-ink);border-bottom-color:var(--av-ink)}
.av-checks--on-dark li::before,.av-sec--dark .av-checks li::before{border-color:var(--av-accent)}
.av-checks--on-dark li{color:var(--av-on-dark-soft)}

.av-frame{margin:0;border:var(--av-border-w) solid var(--av-line);position:relative}
/* aspect-ratio rezerwuje miejsce nawet gdy obrazek nie dostal width/height.
   Dzieje sie tak dla plikow, ktorych getimagesize() nie czyta (SVG) oraz dla
   obrazow podanych jako goly URL spoza biblioteki mediow, bez tego CLS. */
/* Kadr od gory i rozmiar 'large' w szablonach (nie av-card/av-portrait, ktore WP tnie od
   srodka): na serwerze w O nas, konsultacji i kontakcie sa zdjecia zespolu (1.6.7,
   _STANDARD/27 rozdz. 6a pkt 13). */
.av-frame img{width:100%;aspect-ratio:4/3;object-fit:cover;object-position:center top}
.av-frame--dark{border-color:var(--av-line-dark)}

/* ---------- Pasek zaufania ---------- */
.av-trust{padding-block:2.25rem;border-block:var(--av-border-w) solid var(--av-line);background:var(--av-surface)}
.av-trust__in{display:flex;align-items:center;gap:clamp(1rem,3vw,2.5rem);flex-wrap:wrap;justify-content:center}
.av-trust__title{margin:0;font-size:.78rem;font-weight:650;letter-spacing:.1em;
text-transform:uppercase;color:var(--av-ink-soft)}
.av-trust__list{display:flex;flex-wrap:wrap;align-items:center;gap:clamp(1rem,3vw,2.5rem);justify-content:center}
.av-trust__item{font-size:.9rem;font-weight:600;color:var(--av-ink-soft)}
.av-trust__item img{max-height:26px;width:auto;filter:grayscale(1);opacity:.7;transition:opacity var(--av-ease),filter var(--av-ease)}
.av-trust__item:hover img{filter:none;opacity:1}

/* ---------- O nas ---------- */
.av-about{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(2rem,5vw,4rem);align-items:start}

.av-about__cards{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--av-line);margin-top:1px}
.av-minicard{background:var(--av-surface);padding:1.15rem 1.25rem;display:block}
.av-minicard strong{display:block;font-size:.95rem;line-height:1.3;margin-bottom:.35rem}
.av-minicard span{display:block;font-size:.84rem;color:var(--av-ink-soft);line-height:1.5}
.av-sign{margin:1.75rem 0 0;padding-left:1rem;border-left:3px solid var(--av-accent)}
.av-sign__name{display:block;font-weight:700}
.av-sign__role{display:block;font-size:.82rem;color:var(--av-ink-soft)}

/* ---------- Dlaczego my ---------- */



.av-why__item p{font-size:.93rem;margin-bottom:0}

.av-quote{margin:clamp(2.5rem,5vw,4rem) 0 0;padding:clamp(1.75rem,3vw,2.5rem);
border:var(--av-border-w) solid var(--av-line-dark);max-width:80ch;margin-inline:auto;text-align:center}
.av-quote p{font-family:var(--av-font-head);font-size:clamp(1.05rem,1.8vw,1.3rem);
line-height:1.5;color:var(--av-on-dark);margin-bottom:.85rem}
.av-quote cite{font-style:normal;font-size:.82rem;letter-spacing:.08em;
text-transform:uppercase;color:var(--av-accent)}

/* ---------- Metoda sprzedazy ---------- */
.av-method{display:grid;gap:1px;background:var(--av-line)}
.av-method__item{background:var(--av-surface);display:grid;
grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);gap:clamp(1.5rem,3vw,3rem);
padding:clamp(1.75rem,3vw,2.75rem);align-items:center}
.av-method__item:nth-child(even) .av-method__media{order:-1}
.av-method__num{display:block;font-family:var(--av-font-head);font-size:.8rem;font-weight:800;
letter-spacing:.14em;color:var(--av-ink-soft);margin-bottom:.85rem}
.av-method__copy p{color:var(--av-ink-soft);max-width:62ch}
.av-method__media{margin:0;border:var(--av-border-w) solid var(--av-line)}
.av-method__media img{width:100%;aspect-ratio:4/3;object-fit:cover}

/* ---------- Pasek CTA ---------- */
.av-band{background:var(--av-surface-dark);color:var(--av-on-dark);padding-block:clamp(3rem,6vw,5rem)}
.av-band__in{display:flex;gap:2rem;align-items:center;justify-content:space-between;flex-wrap:wrap}
.av-band__in>div:first-child{max-width:56ch}
.av-band .av-h2{margin-bottom:.5rem}
.av-band__text{color:var(--av-on-dark-soft);margin:0}
.av-band__actions{display:flex;gap:.85rem;flex-wrap:wrap}

/* ---------- Proces ---------- */
.av-process{display:grid;grid-template-columns:minmax(0,.72fr) minmax(0,1.28fr);gap:clamp(2rem,4vw,3.25rem);align-items:start}
.av-process__intro{position:sticky;top:110px}
.av-process__tel{margin:1rem 0 0;font-size:1.15rem;font-weight:700}
.av-process__tel a{text-decoration:none}
.av-steps{display:grid;gap:clamp(1rem,2vw,1.5rem);margin:0;padding:0;list-style:none;counter-reset:none}
/* Zolta krawedz po lewej stronie karty: prowadzi wzrok w dol stosu i wiaze
   kroki z numeracja, ktora jest w tym samym kolorze. */
.av-steps__item{display:grid;grid-template-columns:minmax(0,230px) minmax(0,1fr);
gap:clamp(1.25rem,2.5vw,1.75rem);align-items:stretch;
background:var(--av-surface);border:var(--av-border-w) solid var(--av-line);
border-left:3px solid var(--av-accent);
transition:box-shadow var(--av-ease),border-color var(--av-ease)}
.av-steps__item:hover{box-shadow:0 10px 30px rgba(var(--av-ink-rgb),.09)}
.av-steps__num{display:inline-flex;align-items:center;gap:.55rem;
font-family:var(--av-font-head);font-weight:var(--av-head-weight);
font-size:1.05rem;letter-spacing:.08em;color:var(--av-ink-soft);margin-bottom:.5rem}
.av-steps__num::after{content:"";width:24px;height:2px;background:var(--av-accent)}
.av-steps__item p{margin:0;color:var(--av-ink-soft);font-size:.94rem}

/* ---------- Gwarancje ---------- */
.av-seal{margin:2.5rem auto 0;max-width:max-content;padding:.9rem 1.6rem;
border:2px solid var(--av-ink);font-weight:700;font-size:.92rem;text-align:center}

/* ---------- Liczby ---------- */
.av-stats{background:var(--av-surface-dark);color:var(--av-on-dark);padding-block:clamp(3rem,6vw,5rem)}
.av-stats__title{text-align:center;margin-bottom:2.5rem}
/* BEZ obramowki i bez siatki rysowanej odstepem 1 px. Ta ramka byla zrodlem
   "dziwnej ciemnej obwodki" wokol liczb: nadpisywalem ja nizej dla jednego
   wariantu sekcji, wiec wracala przy kazdej zmianie klasy sekcji. Kafelki maja
   wlasne tlo i cien, wiec rusztowanie nie potrzebuje zadnej kreski. */
.av-stats__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));
gap:clamp(.55rem,1.1vw,.9rem);background:transparent;border:0}
.av-stats__item{background:var(--av-surface-dark);padding:clamp(1.5rem,3vw,2.25rem);text-align:center}
.av-stats__item dt{font-family:var(--av-font-head);font-size:clamp(1.9rem,4vw,2.9rem);
font-weight:800;letter-spacing:-.03em;line-height:1;color:var(--av-accent)}
.av-stats__item dd{margin:.65rem 0 0;font-size:.85rem;color:var(--av-on-dark-soft);line-height:1.5}

/* ---------- Konsultacja ---------- */
.av-consult{display:grid;grid-template-columns:minmax(0,.78fr) minmax(0,1.22fr);gap:clamp(2rem,4.5vw,3.5rem);align-items:start}
.av-consult__badge{display:inline-block;font-size:.72rem;font-weight:800;letter-spacing:.14em;
text-transform:uppercase;color:var(--av-on-accent);background:var(--av-accent);padding:.45rem .85rem;margin-bottom:1.25rem}
.av-consult__media img{width:100%;aspect-ratio:4/5;object-fit:cover;
/* Kadr trzymamy od gory: to portret, wiec przy przycinaniu ma zniknac
   podloga, a nie twarz. */
object-position:center top}

/* ---------- Opinie ---------- */
.av-rating{display:flex;align-items:center;justify-content:center;gap:.75rem;flex-wrap:wrap;
margin:0 0 2.5rem;font-size:.9rem;color:var(--av-on-dark-soft)}
.av-rating__value{font-family:var(--av-font-head);font-size:2rem;font-weight:800;color:var(--av-on-dark);line-height:1}
.av-stars{color:var(--av-accent);letter-spacing:.12em}
.av-reviews{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(300px,1fr);
gap:1px;background:var(--av-line-dark);overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:thin}
.av-review{scroll-snap-align:start;background:var(--av-surface-dark);padding:clamp(1.5rem,2.5vw,2rem);
display:flex;flex-direction:column;gap:1rem}
.av-review__stars{color:var(--av-accent);margin:0;letter-spacing:.1em;font-size:.9rem}
.av-review blockquote{margin:0;flex:1}
.av-review blockquote p{margin:0;font-size:.94rem;color:var(--av-on-dark-soft);line-height:1.65}
.av-review__foot{display:flex;align-items:center;gap:.75rem;
border-top:var(--av-border-w) solid var(--av-line-dark);padding-top:1rem}
.av-review__avatar{flex:0 0 38px;width:38px;height:38px;display:grid;place-items:center;
background:var(--av-accent);color:var(--av-on-accent);font-weight:800;font-size:.95rem}
.av-review__foot strong{display:block;font-size:.9rem;color:var(--av-on-dark)}
.av-review__foot em{font-style:normal;font-size:.78rem;color:var(--av-on-dark-soft)}

/* ---------- FAQ ---------- */
/* FAQ w stylu metrohouse-row: zadnych kart ani pudelek, tylko cienkie linie
   miedzy pytaniami. Bialy tekst na zdjeciu, zolty znacznik. Proste linie,
   zero zaokraglen, zgodnie z reszta marki. */
.av-faq{max-width:52rem;margin-inline:auto}
.av-faq__list{display:block;border-top:var(--av-border-w) solid rgba(255,255,255,.16)}
.av-faq__item{background:none;border:0;box-shadow:none;
border-bottom:var(--av-border-w) solid rgba(255,255,255,.16)}
.av-faq__item summary{list-style:none;cursor:pointer;position:relative;
display:flex;align-items:center;gap:1.5rem;padding:1.45rem 0;
font-family:var(--av-font-head);font-weight:600;
font-size:clamp(1.02rem,1.5vw,1.14rem);line-height:1.4;color:#fff;
transition:color var(--av-ease)}
.av-faq__item summary::-webkit-details-marker{display:none}
.av-faq__item summary:hover{color:var(--av-accent)}
.av-faq__item[open] summary{color:var(--av-accent)}
.av-faq__item summary:focus-visible{outline:2px solid var(--av-accent);outline-offset:4px}
/* Znacznik: kwadratowy plus, ktory obraca sie w krzyzyk i zapala na zolto. */
.av-faq__item summary::after{content:"";flex:none;margin-left:auto;
width:32px;height:32px;background:rgba(255,255,255,.1);
background-image:
  linear-gradient(currentColor,currentColor),
  linear-gradient(currentColor,currentColor);
background-size:13px 2px,2px 13px;
background-position:center,center;background-repeat:no-repeat;
transition:transform .3s cubic-bezier(.4,0,.2,1),background-color var(--av-ease)}
.av-faq__item[open] summary::after{transform:rotate(45deg);
background-color:var(--av-accent);color:var(--av-on-accent)}
.av-faq__panel{overflow:hidden}
.av-faq__a{padding:0 3.5rem 1.6rem 0;border:0}
.av-faq__a p{margin:0 0 .9em;color:rgba(255,255,255,.82);font-size:1rem;line-height:1.7}
.av-faq__a p:last-child{margin-bottom:0}
.av-faq__a strong{color:#fff}
/* Bez JS panel jest po prostu widoczny, wiec tresc nigdy nie znika. */
.av-faq--js .av-faq__panel{height:0;will-change:height}
@media (prefers-reduced-motion:reduce){
  .av-faq__item summary::after{transition:none}
}
@media (max-width:620px){
  .av-faq__item summary{gap:1rem}
  .av-faq__a{padding-right:0}
}

/* ---------- Kontakt ---------- */
.av-contact__in{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,460px);gap:clamp(2rem,5vw,4rem);align-items:start}
.av-contact__list{border-top:var(--av-border-w) solid var(--av-line-dark);margin-top:.5rem}
.av-contact__list li{display:grid;grid-template-columns:120px 1fr;gap:1rem;padding:1rem 0;
border-bottom:var(--av-border-w) solid var(--av-line-dark);align-items:baseline}
.av-contact__k{font-size:.74rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--av-on-dark-soft)}
.av-contact__v{font-size:1.02rem;font-weight:600;color:var(--av-on-dark);text-decoration:none}
a.av-contact__v:hover{color:var(--av-accent)}
.av-contact__photo{margin-top:1.5rem}
.av-contact__photo img{width:100%;aspect-ratio:4/3;object-fit:cover;object-position:center top}
.av-contact .av-card--form{background:var(--av-surface);color:var(--av-ink)}
.av-contact .av-card--form p,.av-contact .av-card--form .av-card__sub{color:var(--av-ink-soft)}

/* ---------- Formularz jako druga sekcja ----------
   Karta z formularzem wyprowadzona z hero (1.7.0). Wyglad karty przeniesiony
   1:1 z dawnego .av-hero__form: jasny gradient, pasek akcentu u gory, gleboki
   cien z UJEMNYM rozrzutem (nie robi szarej obwodki) i cienka ramka odsunieta
   12 px na zewnatrz. Tytul wysrodkowany, pod nim linia i romb. */
.av-lform__in{display:grid;grid-template-columns:minmax(0,1fr) minmax(340px,440px);
gap:clamp(1.75rem,4vw,3.5rem);align-items:center}
@media (max-width:900px){.av-lform__in{grid-template-columns:1fr}}
/* Twarz z zespolu stoi POD tytulem, na szerokosc kolumny, a nie zepchnieta
   na bok (prosba klienta). Kadr 4:3, taki jak pliki portretow od klienta,
   wiec nic sie nie tnie. */
.av-lform__copy{min-width:0}
.av-lform__slowa{min-width:0}
/* Zdjecie i teksty maja JEDNA szerokosc - szerokosc kolumny. Wczesniej kadr
   mial sztywne 460 px, lead 52 znaki, a lista pelna szerokosc, wiec kazdy blok
   konczyl sie gdzie indziej i kolumna wygladala na poszarpana
   (prosba klienta 24.09.2026). */
.av-lform__foto{margin:clamp(1.1rem,2.2vw,1.6rem) 0 2.2rem;max-width:none;
/* Promien MUSI byc tez na figurze, nie tylko na obrazku: --av-cien-ramka ma
   warstwe 0 0 0 1px, czyli cienki pierscien, a ten rysuje sie po ksztalcie
   figury - bez promienia wychodzila z niego prosta ramka na zaokraglonym
   zdjeciu. overflow zostaje widoczny, bo z figury wystaje przycisk telefonu. */
border-radius:var(--av-radius);
box-shadow:var(--av-cien-ramka)}
.av-lform__points li{max-width:none}
.av-lform__foto img{border-radius:var(--av-radius)}
.av-lform__foto img{width:100%;aspect-ratio:4/3;object-fit:cover;object-position:center top;display:block}
.av-lform__text{margin:.85rem 0 0;max-width:none;font-size:1.02rem;line-height:1.65;color:var(--av-ink-soft)}
.av-lform__points{display:grid;gap:.6rem;margin:1.25rem 0 0;padding:0;list-style:none}
.av-lform__points li{display:flex;align-items:flex-start;gap:.65rem;font-size:.97rem;line-height:1.5}
.av-lform__points svg{flex:none;width:19px;height:19px;margin-top:.18rem;color:var(--av-accent-ink)}
/* Przycisk z telefonem siedzi w PRAWYM DOLNYM ROGU zdjecia (prosba klienta
   24.09.2026), tak jak przycisk WhatsApp na zdjeciu w sekcji kontaktowej.
   Wychodzi poza kadr o kawalek, zeby bylo widac, ze jest warstwe wyzej. */
.av-lform__foto{position:relative;overflow:visible}
.av-lform__tel{position:absolute;right:-.6rem;bottom:-1.1rem;z-index:2;
display:inline-flex;align-items:center;gap:.7rem;
padding:.65rem 1.1rem;text-decoration:none;color:var(--av-ink);
background:var(--av-surface);border:var(--av-border-w) solid var(--av-line);
border-radius:var(--av-radius);
box-shadow:0 14px 30px -18px rgba(var(--av-ink-rgb),.55);
transition:border-color var(--av-ease),box-shadow var(--av-ease)}
@media (max-width:620px){.av-lform__tel{right:0;bottom:-1.3rem}}
.av-lform__tel:hover{border-color:var(--av-accent);box-shadow:0 18px 34px -20px rgba(var(--av-ink-rgb),.55)}
.av-lform__tel svg{flex:none;width:21px;height:21px;color:var(--av-accent-ink)}
.av-lform__tel em{display:block;font-style:normal;font-size:.68rem;font-weight:650;
letter-spacing:.11em;text-transform:uppercase;color:var(--av-ink-soft)}
.av-lform__tel strong{display:block;font-family:var(--av-font-head);font-size:1.08rem;line-height:1.25}

.av-lform__card.av-card{position:relative;border:0;
background:linear-gradient(180deg,#fff 0%,var(--av-surface-alt) 100%);
box-shadow:0 34px 70px -40px rgba(var(--av-ink-rgb),.6),0 2px 0 rgba(255,255,255,.7) inset}
/* Oba pseudoelementy MUSZA miec promien, inaczej kasuja zaokraglenie karty:
   pasek lezy na jej gornych rogach, a ramka obrysowuje ja prostokatem.
   Ramka jest odsunieta o 12 px, wiec jej promien to promien karty PLUS te
   12 px - inaczej odstep miedzy nia a karta nie jest rowny w rogach. */
.av-lform__card.av-card::before{content:"";position:absolute;left:0;right:0;top:0;height:3px;
border-radius:var(--av-radius) var(--av-radius) 0 0;
background:linear-gradient(90deg,var(--av-accent-dark),var(--av-accent) 45%,rgba(var(--av-accent-rgb),.55) 70%,var(--av-accent))}
/* Promien ramki: min(..., radius*999) daje 0 przy layout.radius 0 (wzorzec), a przy
   promieniu marki > 0 zostaje radius + 12 px. Samo calc(radius + 12px) zaokraglalo
   ramke takze w motywie bez zaokraglen (1.2.3). */
.av-lform__card.av-card::after{content:"";position:absolute;inset:-12px;pointer-events:none;
border:1px solid rgba(var(--av-accent-rgb),.4);
border-radius:min(calc(var(--av-radius) + 12px),calc(var(--av-radius) * 999))}
@media (max-width:640px){
  .av-lform__card.av-card::after{inset:-8px;border-radius:min(calc(var(--av-radius) + 8px),calc(var(--av-radius) * 999))}
}
.av-lform__card .av-card__title{position:relative;font-family:var(--av-font-head);text-align:center;
padding-bottom:.8rem;margin-bottom:.7rem}
.av-lform__card .av-card__title::before{content:"";position:absolute;left:50%;bottom:4px;transform:translateX(-50%);
width:6rem;height:1px;background:linear-gradient(90deg,transparent,var(--av-accent) 25%,var(--av-accent) 75%,transparent)}
.av-lform__card .av-card__title::after{content:"";position:absolute;left:50%;bottom:1px;
width:6px;height:6px;transform:translateX(-50%) rotate(45deg);background:var(--av-accent)}
.av-lform__card .av-card__sub{text-align:center}
.av-lform__card .av-field input{background:#fff}

/* ---------- Tekst SEO ---------- */
.av-seotext__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:clamp(1.5rem,3vw,2.5rem)}
.av-seotext__grid h3{margin-bottom:.6rem}

/* ---------- Stopka ---------- */
.av-footer{background:var(--av-surface-dark);color:var(--av-on-dark-soft);
padding-block:clamp(3rem,5vw,4.5rem) 2rem;font-size:.9rem}
.av-footer__grid{display:grid;grid-template-columns:minmax(0,1.4fr) repeat(auto-fit,minmax(160px,1fr));
gap:clamp(1.75rem,4vw,3rem);padding-bottom:2.5rem;border-bottom:var(--av-border-w) solid var(--av-line-dark)}
.av-footer__name{font-family:var(--av-font-head);font-weight:800;font-size:1.15rem;
color:var(--av-on-dark);display:block;margin-bottom:.75rem;letter-spacing:-.02em}
.av-footer__desc{max-width:46ch;line-height:1.6}
.av-footer__rating{display:flex;gap:.5rem;align-items:center;font-size:.85rem;margin:0}
.av-footer__h{font-size:.76rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
color:var(--av-on-dark);margin-bottom:1rem}
.av-footer__col li{margin-bottom:.55rem;line-height:1.5}
.av-footer__col a{text-decoration:none}
.av-footer__col a:hover{color:var(--av-accent)}
.av-footer__bar{display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;
padding-top:1.75rem;font-size:.82rem}
.av-footer__bar p{margin:0}
.av-footer__legal{display:flex;gap:1.25rem;flex-wrap:wrap}
.av-footer__legal a{text-decoration:none}
.av-footer__legal a:hover{color:var(--av-accent)}
/* Podpis autora akcentem. Akcent na ciemnym tle ma 11,66:1 (patrz brand.json),
   wiec spokojnie niesie sie jako tekst. Zdejmujemy przy tym opacity: dziala na
   caly poddrzewo i dziecko go nie odzyska wlasnym opacity:1, wiec przy .7
   kontrast akcentu spadlby ponizej progu. */
.av-footer__credits{color:var(--av-on-dark-soft)}
/* Nestro: link w jasnej zieleni highlight (12,1:1 na granacie). */
.av-footer__credits a{color:var(--av-highlight)}
.av-footer__credits a:hover{color:var(--av-on-dark);text-decoration:underline}

/* ---------- Sticky call bar (mobile) ---------- */
.av-callbar{display:none}
@media (max-width:900px){
.av-callbar{display:grid;grid-template-columns:1fr 1fr;position:fixed;left:0;right:0;bottom:0;z-index:120;
background:var(--av-surface-dark);border-top:var(--av-border-w) solid var(--av-line-dark);
/* Wysuwa sie z dolu z wyhamowaniem: 220 ms wspolnego --av-ease bylo tu zbyt
   nagle, belka wjezdzala skokiem w pole widzenia. */
transform:translateY(100%);
transition:transform .42s cubic-bezier(.22,.61,.36,1),opacity .42s ease;
opacity:0;will-change:transform}
.av-callbar.is-visible{transform:none;opacity:1}
@media (prefers-reduced-motion:reduce){
  .av-callbar{transition:none}
}
.av-callbar__btn{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.1rem;
min-height:60px;padding:.6rem .75rem;text-decoration:none;font-size:.76rem;font-weight:650;
letter-spacing:.04em;text-transform:uppercase;color:var(--av-on-dark)}
.av-callbar__btn strong{font-size:.95rem;letter-spacing:0;text-transform:none}
.av-callbar__btn--form{background:var(--av-accent);color:var(--av-on-accent)}
/* BEZ body{padding-bottom}: belka chowa sie, zanim stopka wejdzie na ekran
   (main.js, data-av-ctabar="footer"), wiec na dole strony niczego nie zaslania.
   Rezerwa 60 px zostawala po jej zniknieciu jako bialy pasek pod stopka (1.6.5). */
}

/* ---------- Podstrony (polityka prywatnosci itp.) ---------- */
.av-page{padding-block:clamp(3rem,6vw,5rem);max-width:820px}
.av-page__title{font-size:clamp(1.8rem,4vw,2.6rem);margin-bottom:1.5rem}
.av-page__actions{display:flex;gap:.85rem;flex-wrap:wrap;margin-top:2rem}
.av-prose h2{font-size:1.5rem;margin-top:2rem}
.av-prose h3{font-size:1.2rem;margin-top:1.5rem}
.av-prose ul,.av-prose ol{margin:0 0 1.15em 1.25rem}
.av-prose li{list-style:disc;margin-bottom:.4rem}
.av-prose ol li{list-style:decimal}

/* ---------- Breakpointy ---------- */
@media (max-width:1040px){
.av-grid--4{grid-template-columns:repeat(2,minmax(0,1fr))}
.av-about,.av-process,.av-consult,.av-contact__in{grid-template-columns:1fr}
.av-process__intro{position:static}
.av-method__item{grid-template-columns:1fr}
.av-method__item:nth-child(even) .av-method__media{order:0}
}
@media (max-width:620px){
.av-grid--3,.av-grid--4,.av-about__cards{grid-template-columns:1fr}
.av-contact__list li{grid-template-columns:1fr;gap:.2rem}
.av-band__actions .av-btn{width:100%}
.av-steps__item{grid-template-columns:1fr;gap:.5rem}
.av-footer__bar{flex-direction:column}
}

/* Kotwice pod sticky navem, bez tego CTA #kontakt chowa naglowek pod paskiem */
[id]{scroll-margin-top:96px}
.av-burger[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.av-burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.av-burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* Mikro-dowód zaufania pod przyciskiem formularza */
.av-form__proof{display:flex;align-items:center;justify-content:center;gap:.5rem;
margin:.85rem 0 0;font-size:.82rem;font-weight:600;color:var(--av-ink-soft)}
.av-form__proof .av-stars{color:var(--av-accent);font-size:.9rem}

/* ---------- Partnerzy ---------- */
.av-partners__item{background:var(--av-surface);display:flex;flex-direction:column}
.av-partners__logo{display:flex;align-items:center;justify-content:center;min-height:104px;
padding:1.35rem 1.5rem;border-bottom:var(--av-border-w) solid var(--av-line);background:var(--av-surface)}
.av-partners__logo img{max-height:44px;width:auto;filter:grayscale(1);opacity:.72;
transition:opacity var(--av-ease),filter var(--av-ease)}
.av-partners__item:hover .av-partners__logo img{filter:none;opacity:1}
.av-partners__wordmark{font-weight:700;letter-spacing:.02em;color:var(--av-ink-soft)}
.av-partners__body{padding:clamp(1.25rem,2vw,1.65rem);display:flex;flex-direction:column;gap:.4rem;flex:1}
.av-partners__role{margin:0;font-size:.72rem;font-weight:700;letter-spacing:var(--av-tracking-eyebrow);
text-transform:uppercase;color:var(--av-ink-soft)}
.av-partners__text{margin:0;font-size:.88rem;line-height:1.6;color:var(--av-ink-soft)}
.av-partners__link{margin-top:auto;padding-top:.75rem;font-size:.82rem;font-weight:650;
color:var(--av-ink);text-decoration:none;border-bottom:2px solid var(--av-accent);align-self:flex-start}
.av-partners__link:hover{color:var(--av-accent-ink)}
.av-partners__note{margin:1.5rem 0 0;text-align:center;font-size:.84rem;color:var(--av-ink-soft)}

/* ---------- Profile spolecznosciowe w stopce ---------- */
.av-footer__social{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:1.15rem}
.av-footer__social a{display:inline-block;padding:.35rem .75rem;font-size:.78rem;font-weight:650;
letter-spacing:.03em;text-decoration:none;color:var(--av-on-dark);
border:var(--av-border-w) solid var(--av-line-dark);transition:all var(--av-ease)}
.av-footer__social a:hover{background:var(--av-accent);color:var(--av-on-accent);border-color:var(--av-accent)}


/* ---------- Slider (portfolio, partnerzy) ----------
   Track to scroll-snap: bez JS to zwykla przewijalna lista, z JS dochodza
   strzalki i kropki. Zadna tresc nie jest ukryta przed czytnikiem ekranu. */
.av-slider{position:relative}
.av-slider__head{display:flex;align-items:flex-end;justify-content:space-between;
gap:1.5rem;margin-bottom:clamp(1.5rem,3vw,2.25rem)}
/* Flex, nie grid: karty w portfolio maja rozne szerokosci, a grid-auto-columns
   wymusza jedna wartosc na wszystkie kolumny. Szerokosc MUSI byc sztywna
   (flex:0 0 X), inaczej karty zapadaja sie do zera przy 17 slajdach. */
/* Pasek przewijania schowany: nawigacje przejely strzalki i kropki pod trackiem,
   a systemowy suwak dokladal trzeci, niespojny element sterowania.
   Przewijanie gestem i kolkiem dziala dalej. */
.av-slider__track{display:flex;gap:clamp(1rem,2vw,1.5rem);
overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:0;
scrollbar-width:none;-ms-overflow-style:none}
.av-slider__track::-webkit-scrollbar{display:none}
.av-slider__track>*{scroll-snap-align:start;flex:0 0 var(--av-slide,300px)}
.av-slider__track:focus-visible{outline:2px solid var(--av-accent);outline-offset:4px}

.av-slider__foot{display:flex;align-items:center;justify-content:center;
gap:clamp(.75rem,2vw,1.5rem);margin-top:1.75rem}
.av-slider__nav{display:flex;align-items:center;gap:.5rem;flex-shrink:0}
.av-slider__btn{display:grid;place-items:center;width:44px;height:44px;flex-shrink:0;
background:var(--av-surface);color:var(--av-ink);cursor:pointer;
border:var(--av-border-w) solid var(--av-line);transition:all var(--av-ease)}
.av-slider__btn svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2}
.av-slider__btn:hover:not(:disabled){background:var(--av-accent);border-color:var(--av-accent);color:var(--av-on-accent)}
.av-slider__btn:disabled{opacity:.3;cursor:default}
.av-sec--dark .av-slider__btn,.av-sec--dark .av-slider__btn{background:transparent;color:var(--av-on-dark);border-color:var(--av-line-dark)}

.av-slider__dots{display:flex;justify-content:center;align-items:center;gap:.5rem;margin:0;flex-wrap:wrap}
/* Pasek zostaje 4 px wysoki, ale sam cel dotyku ma 24 px: padding powieksza
   obszar klikalny, background-clip trzyma kolor wylacznie na tresci, a ujemny
   margines oddaje ukradzione 20 px, wiec stopka slidera nie rosnie. */
.av-slider__dot{width:28px;height:4px;padding:10px 0;margin:-10px 0;box-sizing:content-box;
background-clip:content-box;cursor:pointer;background-color:var(--av-line);
border:0;transition:background-color var(--av-ease),width var(--av-ease)}
.av-slider__dot:hover{background-color:var(--av-accent-dark)}
.av-slider__dot.is-active{background-color:var(--av-accent);width:44px}
.av-slider:not(.is-live) .av-slider__foot{display:none}

/* Portfolio: karta sprzedanej nieruchomosci */
.av-sold__item{background:var(--av-surface);border:var(--av-border-w) solid var(--av-line);
display:flex;flex-direction:column;transition:border-color var(--av-ease)}
.av-sold__item:hover{border-color:var(--av-accent)}
.av-sold__media{position:relative;overflow:hidden;background:var(--av-surface-alt)}
.av-sold__media img{width:100%;aspect-ratio:3/2;object-fit:cover;transition:transform .5s ease}
.av-sold__item:hover .av-sold__media img{transform:scale(1.04)}
.av-sold__flag{position:absolute;top:0;left:0;padding:.4rem .85rem;
background:var(--av-accent);color:var(--av-on-accent);
font-size:.7rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase}
.av-sold__body{padding:1.15rem 1.25rem;border-top:var(--av-border-w) solid var(--av-line)}
.av-sold__body .av-h4{margin:0 0 .3rem;font-size:.98rem}
.av-sold__meta{margin:0;font-size:.84rem;color:var(--av-ink-soft);font-weight:650}

/* Partnerzy w sliderze: karta ma pelna wysokosc traku */
.av-slider__track .av-partners__item{border:var(--av-border-w) solid var(--av-line);height:100%}

@media (max-width:700px){
.av-slider__head{flex-direction:column;align-items:flex-start;gap:1rem}
}

/* ---------- Przerywnik parallax ----------
   Sam obraz, bez tresci i bez welonu. Zdjecie stoi, strona plynie po nim.
   clip-path przycina dziecko z position:fixed do obszaru sekcji, dzieki czemu
   tlem jest prawdziwy <img> (AVIF/WebP + srcset), a nie background-image,
   ktorego zadna wtyczka obrazkowa nie przekonwertuje. */
.av-parallax{position:relative;height:40vh;min-height:280px;max-height:520px;
overflow:hidden;background:var(--av-surface-alt)}
.av-parallax__media{position:absolute;inset:0;overflow:hidden}
.av-parallax__media img{width:100%;height:100%;object-fit:cover;object-position:center}
@supports (clip-path:inset(0)){
  .av-parallax{clip-path:inset(0)}
  .av-parallax__media{position:fixed}
}
/* Na dotyku i przy redukcji ruchu zdjecie stoi w sekcji, nie w oknie:
   position:fixed w iOS Safari powoduje skoki przy chowaniu paska adresu. */
@media (hover:none),(prefers-reduced-motion:reduce){
  .av-parallax__media{position:absolute}
}

/* ---------- Kafelki liczb: ramka + duza zolta wartosc ---------- */
.av-stats__grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
gap:clamp(.55rem,1.1vw,.9rem);background:transparent;border:0}
.av-stats__item{background:var(--av-surface-dark);padding:clamp(1.5rem,2.6vw,2.15rem)}
.av-stats__item dt{font-family:var(--av-font-head);font-weight:var(--av-head-weight);
font-size:clamp(2rem,3.6vw,2.9rem);line-height:1;letter-spacing:-.03em;color:var(--av-accent);
overflow-wrap:anywhere}
.av-stats__item dd{margin:.6rem 0 0;font-size:.86rem;line-height:1.5;color:var(--av-on-dark-soft)}
@media (max-width:900px){.av-stats__grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.av-stats__grid{grid-template-columns:1fr}}

/* ---------- Zdjecie w ramce z zoltym offsetem ---------- */
.av-frame{position:relative;margin:0;border:var(--av-border-w) solid var(--av-line)}
.av-frame::before{content:"";position:absolute;inset:-14px -14px auto auto;
width:58%;height:58%;border:2px solid var(--av-accent);z-index:-1;pointer-events:none}
.av-about__side,.av-consult__media,.av-contact__photo{isolation:isolate}

/* ---------- Prezentacja oferty (zdjecia, staging) ---------- */
/* Tekst dostaje mniej miejsca, zeby suwak przed/po mogl byc wiekszy:
   to on jest dowodem w tej sekcji, a nie akapit obok niego. */
.av-staging{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);
gap:clamp(2rem,4vw,3.25rem);align-items:start}
.av-staging__figures{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));
gap:1.5rem;margin:2rem 0 0;padding-top:1.75rem;border-top:var(--av-border-w) solid var(--av-line-dark)}
.av-staging__figures dt{font-family:var(--av-font-head);font-weight:var(--av-head-weight);
font-size:clamp(1.7rem,3vw,2.4rem);line-height:1;letter-spacing:-.03em;color:var(--av-accent)}
.av-staging__figures dd{margin:.45rem 0 0;font-size:.84rem;line-height:1.45;color:var(--av-on-dark-soft)}
.av-staging__media{margin:0;position:relative;border:var(--av-border-w) solid var(--av-line-dark)}
.av-staging__media img{width:100%;aspect-ratio:4/3;object-fit:cover;display:block}
.av-staging__media figcaption{padding:.9rem 1.1rem;font-size:.82rem;line-height:1.5;
color:var(--av-on-dark-soft);border-top:var(--av-border-w) solid var(--av-line-dark)}
@media (max-width:1040px){.av-staging{grid-template-columns:1fr}}
/* Kolumna tekstu obok suwaka: mniejszy tytul i tekst, bez duzej przerwy
   miedzy leadem a akapitem, przycisk pod opisem (1.6.1). */
.av-staging__copy .av-h2{font-size:clamp(1.6rem,1.2rem + 1.5vw,2.25rem)}
.av-staging__copy .av-lead{font-size:1rem;margin-bottom:.9rem}
.av-staging__copy .av-shead{margin-bottom:0}
.av-staging__copy .av-prose p{font-size:.95rem}
.av-staging__cta{margin-top:1.5rem}
@media (max-width:600px){.av-staging__cta .av-btn{width:100%}}


/* ---------- Porownanie: jedna siatka, wiersze wyrownane z konstrukcji ---------- */
.av-cmp{--av-cmp-cols:minmax(150px,.85fr) minmax(0,1.15fr) minmax(0,1.15fr);
margin-top:clamp(1.75rem,3vw,2.5rem);border:var(--av-border-w) solid var(--av-line)}
.av-cmp__thead,.av-cmp__row{display:grid;grid-template-columns:var(--av-cmp-cols);align-items:stretch}
.av-cmp__thead{background:var(--av-surface-dark);color:var(--av-on-dark)}
.av-cmp__th{display:flex;flex-direction:column;gap:.3rem;justify-content:flex-end;
padding:1.1rem 1.25rem;font-size:.95rem}
.av-cmp__th--crit{font-size:.72rem;font-weight:700;letter-spacing:var(--av-tracking-eyebrow);
text-transform:uppercase;color:var(--av-on-dark-soft)}
.av-cmp__th--win{background:var(--av-accent);color:var(--av-on-accent)}
.av-cmp__th strong{font-family:var(--av-font-head);font-size:1.05rem;font-weight:var(--av-head-weight);line-height:1.25}
.av-cmp__flag{font-size:.68rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;opacity:.85}
.av-cmp__flag--muted{color:var(--av-on-dark-soft)}

.av-cmp__row+.av-cmp__row,.av-cmp__thead+.av-cmp__row{border-top:var(--av-border-w) solid var(--av-line)}
.av-cmp__row:nth-child(even){background:var(--av-surface-alt)}
.av-cmp__crit{padding:1rem 1.25rem;font-size:.82rem;font-weight:700;letter-spacing:.04em;
text-transform:uppercase;color:var(--av-ink-soft);display:flex;align-items:center}
.av-cmp__cell{display:flex;gap:.6rem;align-items:flex-start;padding:1rem 1.25rem;font-size:.94rem;line-height:1.5}
.av-cmp__cell--win{background:rgba(var(--av-accent-rgb),.09);font-weight:600;
box-shadow:inset 3px 0 0 var(--av-accent)}
.av-cmp__cell--lose{color:var(--av-ink-soft)}
.av-cmp__mark{flex:none;width:18px;height:18px;margin-top:.15rem;position:relative}
.av-cmp__mark--yes::before,.av-cmp__mark--yes::after,
.av-cmp__mark--no::before,.av-cmp__mark--no::after{content:"";position:absolute;background:currentColor}
.av-cmp__mark--yes{color:var(--av-success)}
.av-cmp__mark--yes::before{left:2px;top:9px;width:6px;height:2px;transform:rotate(45deg)}
.av-cmp__mark--yes::after{left:5px;top:6px;width:12px;height:2px;transform:rotate(-50deg)}
.av-cmp__mark--no{color:var(--av-error);opacity:.75}
.av-cmp__mark--no::before,.av-cmp__mark--no::after{left:2px;top:8px;width:14px;height:2px}
.av-cmp__mark--no::before{transform:rotate(45deg)}
.av-cmp__mark--no::after{transform:rotate(-45deg)}

.av-cmp__who{display:none}

/* Telefon (1.13.0, poprawka klienta 30.09.2026): trzy kolumny sciete do jednej
   byly "chaotyczne" - etykieta Z NAMI / SAM po lewej, znak, tekst, a kryterium
   w szarym pasku wygladalo jak kolejny wiersz. Teraz kazde kryterium to
   naglowek z kreska i pod nim DWIE osobne karty: kolko z ptaszkiem albo
   krzyzykiem, nad tekstem kolorowa etykieta, czyja to droga. Wzor: makieta
   klienta, w naszych krojach i kolorach. */
@media (max-width:860px){
  .av-cmp{border:0;background:none}
  .av-cmp__thead{display:none}
  .av-cmp__row{grid-template-columns:1fr;gap:.6rem;background:none}
  .av-cmp__row:nth-child(even){background:none}
  .av-cmp__row+.av-cmp__row,.av-cmp__thead+.av-cmp__row{border-top:0;margin-top:1.6rem}
  .av-cmp__crit{padding:0 0 .6rem;margin-bottom:.15rem;background:none;
  border-bottom:var(--av-border-w) solid var(--av-line);font-size:.76rem;letter-spacing:var(--av-tracking-eyebrow)}
  .av-cmp__cell{gap:.85rem;padding:.95rem 1rem;font-size:.95rem;line-height:1.5;
  border:var(--av-border-w) solid var(--av-line);border-radius:var(--av-radius);background:var(--av-surface)}
  .av-cmp__cell--win{box-shadow:none;font-weight:500;color:var(--av-ink);
  background:rgba(var(--av-accent-rgb),.07);border-color:rgba(var(--av-accent-rgb),.4)}
  .av-cmp__cell--lose{color:var(--av-ink-soft)}
  .av-cmp__who{display:block;margin-bottom:.15rem;font-size:.78rem;font-weight:700;line-height:1.3}
  .av-cmp__cell--win .av-cmp__who{color:var(--av-success)}
  .av-cmp__cell--lose .av-cmp__who{color:var(--av-error)}
  /* Znak w kolku 30 px: kreski ptaszka i krzyzyka przesuniete o 6 px,
     czyli o polowe przyrostu wzgledem znaku 18 px z widoku biurkowego. */
  .av-cmp__mark{width:30px;height:30px;margin-top:0;border-radius:50%;
  background:color-mix(in srgb,currentColor 13%,transparent)}
  .av-cmp__mark--no{opacity:1}
  .av-cmp__mark--yes::before{left:8px;top:15px}
  .av-cmp__mark--yes::after{left:11px;top:12px}
  .av-cmp__mark--no::before,.av-cmp__mark--no::after{left:9px;top:14px;width:12px}
}

/* ---------- Portfolio: gesta siatka (1.13.0) ----------
   Wszystkie sprzedane widac od pierwszego rzutu oka, bez strzalek i bez
   przewijania w bok (poprawka klienta 30.09.2026: "mniejszy i gestszy").
   4 w rzedzie na komputerze, 3 na tablecie, 2 na telefonie. Kadr 3:2, bo takie
   sa pliki zrodlowe, wiec nic sie nie tnie. */
.av-sold__grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
gap:clamp(.6rem,1.2vw,1rem);margin:clamp(1.25rem,2.4vw,1.75rem) 0 0;padding:0;list-style:none}
.av-sold__grid .av-sold__item{border:0;border-radius:var(--av-radius);overflow:hidden;
box-shadow:0 3px 10px rgba(var(--av-ink-rgb),.08),0 0 0 1px rgba(var(--av-ink-rgb),.05)}
.av-sold__grid .av-sold__item:hover .av-sold__media img{transform:scale(1.03)}
.av-sold__grid .av-sold__flag{top:.5rem;left:.5rem;padding:.28rem .55rem;font-size:.6rem;letter-spacing:.12em}
.av-sold__grid .av-sold__body{padding:.6rem .75rem .7rem;border-top:2px solid var(--av-accent)}
.av-sold__grid .av-sold__body .av-h4{margin:0;font-size:.92rem;line-height:1.25}
.av-sold__grid .av-sold__meta{margin-top:.15rem;font-size:.7rem;font-weight:700;
letter-spacing:var(--av-tracking-eyebrow);text-transform:uppercase}
@media (max-width:1040px){.av-sold__grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
/* Zdjecie w karcie jest linkiem do lightboxa: kursor lupy i okragla ikonka
   w rogu, ktora na komputerze wyplywa dopiero po najechaniu. Na dotyku
   (hover:none) ikonka stoi stale - inaczej nie wiadomo, ze da sie powiekszyc. */
.av-sold__zoom{display:block;position:relative;cursor:zoom-in;color:inherit}
/* W mini-sliderze link do lightboxa wypelnia slajd - bez tego <img height:100%>
   liczyl sie od wysokosci auto i kadr zostawial pusty pas nad podpisem (1.2.2). */
.av-mini__slide>.av-sold__zoom{height:100%}
.av-sold__zoom:focus-visible{outline:3px solid var(--av-accent);outline-offset:-3px}
.av-sold__lupa{position:absolute;right:.5rem;bottom:.5rem;width:34px;height:34px;border-radius:50%;
display:grid;place-items:center;background:rgba(255,255,255,.92);color:var(--av-ink);
box-shadow:0 2px 8px rgba(var(--av-ink-rgb),.2);opacity:0;transform:scale(.85);
transition:opacity .25s ease,transform .25s ease}
.av-sold__lupa svg{width:18px;height:18px}
.av-sold__zoom:hover .av-sold__lupa,.av-sold__zoom:focus-visible .av-sold__lupa{opacity:1;transform:none}
@media (hover:none){.av-sold__lupa{opacity:1;transform:none;width:30px;height:30px}}

/* ---------- Lightbox (1.13.1) ----------
   Natywny <dialog> na calym ekranie. Zdjecie w naturalnych proporcjach
   (object-fit:contain, nic sie nie tnie), podpis z ulica i licznikiem pod
   spodem, strzalki po bokach. Tlo ciemne z lekkim rozmyciem strony. */
html.av-lb-open{overflow:hidden}
.av-lb{position:fixed;inset:0;width:100%;height:100%;max-width:none;max-height:none;margin:0;
padding:clamp(3.5rem,6vw,4.5rem) clamp(.75rem,6vw,5.5rem) clamp(1rem,3vw,2rem);
border:0;background:transparent;color:var(--av-on-dark);overflow:hidden}
.av-lb[open]{display:flex;align-items:center;justify-content:center;animation:av-lb-in .28s ease}
.av-lb::backdrop{background:rgba(12,14,15,.9);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.av-lb__fig{margin:0;display:flex;flex-direction:column;align-items:center;gap:.9rem;max-width:100%;max-height:100%}
.av-lb__img{display:block;max-width:100%;max-height:calc(100svh - 10rem);width:auto;height:auto;
object-fit:contain;border-radius:var(--av-radius);box-shadow:0 30px 80px -20px rgba(0,0,0,.6);
transition:opacity .2s ease,transform .3s ease}
.av-lb.is-zmiana .av-lb__img{opacity:.35;transform:scale(.985)}
.av-lb__cap{display:flex;align-items:baseline;gap:.85rem;font-size:.95rem;text-align:center}
.av-lb__cap strong{font-family:var(--av-font-head);font-weight:var(--av-head-weight);font-size:1.05rem}
.av-lb__licz{font-size:.72rem;font-weight:700;letter-spacing:var(--av-tracking-eyebrow);color:var(--av-accent)}
.av-lb__btn{position:absolute;display:grid;place-items:center;width:48px;height:48px;padding:0;
border:1px solid rgba(255,255,255,.18);border-radius:50%;background:rgba(255,255,255,.08);
color:#fff;cursor:pointer;transition:background .2s ease,border-color .2s ease}
.av-lb__btn:hover{background:var(--av-accent);border-color:var(--av-accent)}
.av-lb__btn:focus-visible{outline:3px solid var(--av-accent);outline-offset:2px}
.av-lb__btn svg{width:22px;height:22px}
.av-lb__close{top:clamp(.6rem,2vw,1.25rem);right:clamp(.6rem,2vw,1.25rem)}
.av-lb__nav{top:50%;transform:translateY(-50%)}
.av-lb__nav--prev{left:clamp(.5rem,2vw,1.5rem)}
.av-lb__nav--next{right:clamp(.5rem,2vw,1.5rem)}
/* Telefon: strzalki schodza na dol, pod kciuk, i nie zaslaniaja zdjecia. */
@media (max-width:700px){
  .av-lb{padding-bottom:5.5rem}
  .av-lb__img{max-height:calc(100svh - 12rem)}
  .av-lb__nav{top:auto;bottom:1.25rem;transform:none}
  .av-lb__nav--prev{left:calc(50% - 60px)}
  .av-lb__nav--next{right:calc(50% - 60px)}
}
@keyframes av-lb-in{from{opacity:0}to{opacity:1}}
@media (prefers-reduced-motion:reduce){
  .av-lb[open]{animation:none}
  .av-lb__img,.av-sold__lupa{transition:none}
}

@media (max-width:700px){
  .av-sold__grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .av-sold__grid .av-sold__body .av-h4{font-size:.84rem}
  .av-sold__grid .av-sold__meta{font-size:.62rem}
}

/* ---------- Zdjecia towarzyszace dluzszemu tekstowi ----------
   Kolumna ze zdjeciem jest krotsza od kolumny tekstu i zostawialaby pod soba
   puste pole. Sticky sprawia, ze zdjecie towarzyszy czytaniu zamiast wisiec
   u gory. Offset liczony z realnej wysokosci nawigacji, bo ona jest sticky. */


/* ---------- Plywajaca belka CTA ---------- */
/* Wjazd i wyjazd (1.2.1): przejscie bierze sie ze stanu DOCELOWEGO, wiec
   wjazd (.is-visible) dlugo wyhamowuje, a wyjazd (stan bazowy) krotko
   przyspiesza w dol. 220 ms wspolnego --av-ease bylo za nagle. Kolejnosc
   klas i atrybutu hidden pilnuje main.js ("Plywajaca belka CTA"). */
.av-ctabar{position:fixed;left:0;right:0;bottom:0;z-index:110;
background:var(--av-surface-dark);color:var(--av-on-dark);
border-top:2px solid var(--av-accent);
transform:translateY(100%);opacity:0;will-change:transform;
transition:transform .4s cubic-bezier(.4,0,.7,.2),opacity .32s ease .06s}
.av-ctabar.is-visible{transform:none;opacity:1;
transition:transform .6s cubic-bezier(.22,.61,.36,1),opacity .45s ease}
.av-ctabar__in{display:flex;align-items:center;justify-content:space-between;
gap:1.5rem;padding-block:.85rem;flex-wrap:wrap}
.av-ctabar__msg{margin:0;font-family:var(--av-font-head);font-weight:600;
font-size:1.02rem;line-height:1.3}
.av-ctabar__actions{display:flex;gap:.75rem;flex-shrink:0}
.av-ctabar .av-btn{min-height:44px;padding:.6rem 1.2rem;font-size:.9rem}
.av-ctabar .av-btn--ghost{color:var(--av-on-dark);border-color:rgba(255,255,255,.4)}
/* Przycisk tylko z ikona, w zieleni WhatsAppa: znak rozpoznawalny bez podpisu.
   Selektor musi byc podwojny, bo ".av-ctabar .av-btn" wyzej ustawia padding
   1.2rem i przy pojedynczej klasie zostawalo na ikone 5 px.
   Zielen na tle belki ma 8.91:1, wiec obrys przycisku jest czytelny; bialy
   znak w srodku to lockup marki. */
.av-ctabar .av-ctabar__wa{display:inline-flex;align-items:center;justify-content:center;
width:48px;min-height:48px;padding:0;flex:none;
background:#25d366;border-color:#25d366;color:#fff}
.av-ctabar .av-ctabar__wa:hover{background:#1ebe5d;border-color:#1ebe5d;color:#fff}
.av-ctabar .av-ctabar__wa svg{width:26px;height:26px}
.av-ctabar .av-btn--ghost:hover{background:var(--av-on-dark);color:var(--av-ink)}
/* Na mobile rolę belki pełni av-callbar, dwa paski na raz zjadłyby ekran. */
@media (max-width:900px){.av-ctabar{display:none}}
@media (prefers-reduced-motion:reduce){.av-ctabar,.av-ctabar.is-visible{transition:none}}

/* ---------- Kroki procesu ze zdjeciem ---------- */
/* Kadr NIE ma wlasnego promienia - przycina go karta.
   Wlasny promien dawal biala szczeline w naroznikach: karta ma ramke 1 px
   i akcent 3 px po lewej, wiec jej WEWNETRZNY promien jest o te wartosci
   mniejszy niz zewnetrzny (4 px przy lewej krawedzi, 6 px przy gornej).
   Zdjecie z pelnymi 7 px nie trafialo w ten luk i miedzy nim a ramka
   zostawal jasny pasek. Przyciecie na karcie trafia zawsze, niezaleznie
   od gruboci ramki i od promienia w brand.json. */
.av-steps__item{overflow:hidden}
.av-steps__media{overflow:hidden;background:var(--av-surface-alt);border-radius:0}
.av-steps__media img{width:100%;height:100%;min-height:200px;object-fit:cover;object-position:var(--av-step-pos,center top);display:block;
transition:transform .5s ease}
.av-steps__item:hover .av-steps__media img{transform:scale(1.03)}
.av-steps__body{padding:clamp(1.25rem,2.5vw,1.9rem) clamp(1.25rem,2.5vw,1.9rem) clamp(1.25rem,2.5vw,1.9rem) 0}
.av-steps__body p{margin:0;color:var(--av-ink-soft);line-height:1.6}
.av-steps__body .av-h3{margin-bottom:.5rem}
@media (max-width:820px){
  .av-steps__item{grid-template-columns:1fr}
  .av-steps__media img{min-height:180px;max-height:240px}
  .av-steps__body{padding:1.25rem}
}


/* ---------- Sekcja na zdjeciu (liczby, FAQ) ----------
   Zdjecie jako <img>, nie background-image: tla CSS nie przechodza przez
   konwersje do AVIF/WebP w zadnej metodzie Imagify. */
.av-sec--photo{position:relative;isolation:isolate;
background:var(--av-surface-dark);color:var(--av-on-dark)}
.av-sec__bg{position:absolute;inset:0;z-index:-2;overflow:hidden}
.av-sec__bg img{width:100%;height:100%;object-fit:cover;object-position:center}
.av-sec--photo::after{content:"";position:absolute;inset:0;z-index:-1;
background:rgba(10,12,13,var(--av-scrim,.86))}
.av-sec--photo .av-h2,.av-sec--photo .av-h3{color:var(--av-on-dark)}
.av-sec--photo .av-lead{color:var(--av-on-dark-soft)}
.av-sec--photo .av-eyebrow{color:var(--av-accent)}

/* Kafelki liczb na zdjeciu */
.av-sec--photo .av-stats__grid{background:transparent;gap:clamp(1rem,2vw,1.5rem)}
.av-sec--photo .av-stats__item{background:rgba(255,255,255,.05);
border:var(--av-border-w) solid rgba(255,255,255,.14);
padding:clamp(1.35rem,2.4vw,1.9rem);display:flex;flex-direction:column;gap:.7rem}
.av-stats__top{display:flex;align-items:flex-start;justify-content:space-between;gap:1rem}
.av-stats__value{margin:0;font-family:var(--av-font-head);font-weight:var(--av-head-weight);
font-size:clamp(1.9rem,3.4vw,2.7rem);line-height:1;letter-spacing:-.03em;color:var(--av-accent)}
.av-stats__icon{flex:none;display:grid;place-items:center;width:40px;height:40px;
border:var(--av-border-w) solid rgba(var(--av-accent-rgb),.45);color:var(--av-accent)}
.av-stats__icon svg{width:20px;height:20px}
.av-stats__label{margin:0;font-size:.88rem;line-height:1.5;color:var(--av-on-dark-soft)}

/* Sekcja na zdjeciu w wersji JASNEJ (av-sec--jasna). Zdjecie zostaje, ale
   welon jest bialy zamiast czarnego, a tokeny "na ciemnym" przelaczaja sie
   na ciemny tekst - ta sama sztuczka co przy .av-sec--dark. Przez welon
   widac wnetrze, czyli przeswit, o ktory prosil klient. */
.av-sec--photo.av-sec--jasna{
  --av-on-dark:var(--av-ink);
  --av-on-dark-soft:var(--av-ink-soft);
  background:var(--av-surface-alt);color:var(--av-ink)}
/* Welon jak w sekcjach szklanych (.av-sec--dark nizej): biel z dwoma
   zielonymi poswiatami, zeby "Doswiadczenie" pasowalo do "Konsultacji",
   a nie wygladalo jak szara plyta ze zdjeciem.
   --av-zielen steruje sila poswiaty; FAQ ma ja mocniejsza (nizej). */
.av-sec--photo.av-sec--jasna{--av-zielen:.22;--av-zielen-2:.18;--av-biel:.92;
  /* podklad welonu; domyslnie biel, FAQ bierze jasna zielen marki (#e8f6e7,
     czyli --av-accent-soft - tu jako skladowe RGB, bo idzie do rgba()) */
  --av-podklad:255,255,255}
.av-sec--photo.av-sec--jasna::after{background:
  radial-gradient(34% 40% at 26% 34%,rgba(var(--av-accent-rgb),var(--av-zielen)) 0%,rgba(var(--av-accent-rgb),0) 72%),
  radial-gradient(30% 36% at 78% 70%,rgba(var(--av-accent-rgb),var(--av-zielen-2)) 0%,rgba(var(--av-accent-rgb),0) 72%),
  /* Dolna krawedz gasnie do koloru, ktorym zaczyna sie nastepna sekcja, wiec
     miedzy nimi nie ma widocznego ciecia mimo zdjecia w tle. */
  linear-gradient(180deg,rgba(var(--av-podklad),0) 78%,var(--av-surface-alt) 100%),
  rgba(var(--av-podklad),var(--av-biel))}
/* FAQ: wyrazniejsza zielen (prosba klienta 24.09.2026). Lista siedzi WPROST
   na tle sekcji - bez bialej karty pod spodem, bo to robilo z niej pudelko
   w pudelku. Kontrast atramentu na tej zieleni to 17:1, wiec podkladka nie
   byla do niczego potrzebna. */
.av-sec--photo.av-sec--jasna#faq{--av-zielen:.34;--av-zielen-2:.28;--av-biel:.93;
  --av-podklad:232,246,231}
.av-sec--photo.av-sec--jasna .av-eyebrow{color:var(--av-accent-ink)}
.av-sec--photo.av-sec--jasna .av-stats__item{background:rgba(255,255,255,.78);
  border:0;border-radius:var(--av-radius);box-shadow:var(--av-cien-ramka)}
.av-sec--photo.av-sec--jasna .av-stats__grid{background:transparent;border:0;
  gap:clamp(.55rem,1.1vw,.9rem)}
.av-sec--photo.av-sec--jasna .av-stats__value{color:var(--av-accent-ink)}
.av-sec--photo.av-sec--jasna .av-stats__icon{border-color:rgba(var(--av-accent-rgb),.45);
  color:var(--av-accent-ink);border-radius:var(--av-radius)}

/* FAQ w wersji jasnej. Ta lista ma bialy tekst i biale kreski wpisane
   WPROST (rgba(255,255,255,...)), a nie przez tokeny, wiec tokeny jej nie
   przelacza i trzeba je nadpisac po kolei. */
.av-sec--jasna .av-faq__list,
.av-sec--jasna .av-faq__item{border-color:rgba(var(--av-ink-rgb),.14)}
.av-sec--jasna .av-faq__item summary{color:var(--av-ink)}
/* Pytanie NIE zmienia koloru na zielony - ani pod kursorem, ani po otwarciu.
   Na jasnej zieleni tla wygladalo to brudno. Sygnal stanu niesie sam znacznik
   plus/krzyzyk po prawej: pod kursorem ciemnieje, po otwarciu zapala sie
   zielenia marki. */
.av-sec--jasna .av-faq__item summary:hover,
.av-sec--jasna .av-faq__item[open] summary{color:var(--av-ink)}
.av-sec--jasna .av-faq__item summary:hover::after{background-color:rgba(var(--av-ink-rgb),.15)}
.av-sec--jasna .av-faq__item summary::after{background-color:rgba(var(--av-ink-rgb),.07);
  border-radius:var(--av-radius)}
.av-sec--jasna .av-faq__item[open] summary::after{background-color:var(--av-accent);
  color:var(--av-on-accent)}
.av-sec--jasna .av-faq__a p{color:var(--av-ink-soft)}
.av-sec--jasna .av-faq__a strong{color:var(--av-ink)}


/* Formularz kontaktowy jedzie z uzytkownikiem przy dlugiej liscie danych obok */
@media (min-width:1041px){
  .av-contact__form{position:sticky;top:calc(var(--av-nav-h,80px) + 1.5rem)}
}

/* ---------- Plakietki social na zdjeciu w kontakcie ---------- */
.av-contact__photo{position:relative}
.av-contact__social,
.av-lform__social{position:absolute;right:.85rem;bottom:.85rem;z-index:2;
display:flex;gap:.5rem;margin:0;padding:0;list-style:none}
.av-contact__social a,
.av-lform__social a{display:grid;place-items:center;width:40px;height:40px;
background:rgba(10,12,13,.72);color:#fff;
border:var(--av-border-w) solid rgba(255,255,255,.28);
transition:background var(--av-ease),color var(--av-ease),border-color var(--av-ease)}
.av-contact__social a:hover,
.av-lform__social a:hover{background:var(--av-accent);color:var(--av-on-accent);border-color:var(--av-accent)}
.av-contact__social svg,
.av-lform__social svg{width:19px;height:19px}
/* W sekcji "Kontakt i obsluga" plakietki ida do LEWEGO dolnego rogu:
   prawy zajmuje przycisk z telefonem, ktory wystaje poza kadr. */
.av-lform__social{right:auto;left:.85rem;border-radius:var(--av-radius)}
.av-lform__social a{border-radius:var(--av-radius)}
@media (max-width:620px){
  /* Na waskim ekranie przycisk z telefonem jest szeroki i siega az do lewej
     polowy dolnej krawedzi, wiec plakietki zderzalyby sie z nim. Ida wtedy
     do GORNEGO lewego rogu kadru, gdzie jest pusto. Sprawdzone pomiarem
     na 390 px. */
  .av-lform__social{bottom:auto;top:.85rem}
}

/* Zamkniecie belki: delikatne, w prawym rogu, nie konkuruje z CTA */
.av-ctabar__in{position:relative;padding-right:2.5rem}
.av-ctabar__close{position:absolute;right:0;top:50%;transform:translateY(-50%);
display:grid;place-items:center;width:32px;height:32px;padding:0;cursor:pointer;
background:none;border:0;color:var(--av-on-dark-soft);opacity:.65;
transition:opacity var(--av-ease),color var(--av-ease)}
.av-ctabar__close:hover{opacity:1;color:var(--av-accent)}
.av-ctabar__close svg{width:17px;height:17px}

/* ---------- Tasma logotypow partnerow ----------
   Jeden tor, lista w srodku dwa razy, przesuniecie o -50% szerokosci toru.
   Przy -50% druga kopia trafia dokladnie tam, gdzie stala pierwsza, wiec
   petla jest bezszwowa niezaleznie od liczby logotypow i szerokosci okna. */
.av-marquee{padding-block:clamp(1rem,2vw,1.5rem);
border-block:var(--av-border-w) solid var(--av-line);background:var(--av-surface);
overflow-x:clip}
.av-marquee__title{display:none;margin:0 0 1.5rem;text-align:center;font-size:.72rem;font-weight:700;
letter-spacing:var(--av-tracking-eyebrow);text-transform:uppercase;color:var(--av-ink-soft)}
.av-marquee__viewport{overflow-x:clip;overflow-y:visible;
-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.av-marquee__track{display:flex;align-items:center;width:max-content;
margin:0;padding:0;list-style:none;gap:clamp(2.5rem,5vw,4.5rem);
animation:av-marquee 40s linear infinite}
/* Tasma jedzie caly czas: zadnego zatrzymywania ani reakcji na kursor. */
.av-marquee__track li{flex:0 0 auto;display:flex;align-items:center;position:relative}
/* Wszystkie pliki logo maja identyczne plotno 640x180 z wyrownana masa
   optyczna znaku, wiec sama wysokosc daje juz rowny rzad. max-width jest
   celowo zdjety: wczesniej dusil szerokie wordmarki do polowy wysokosci. */
.av-marquee__track img{height:calc(64px * var(--av-logo-scale,1));width:auto;max-width:none;object-fit:contain;
/* Domyslnie szarosc, kolor dopiero pod kursorem: rzad logotypow ma byc tlem
   dla tresci, a nie piecioma konkurencyjnymi paletami tuz pod hero. */
filter:grayscale(1);opacity:.62;
transition:filter var(--av-ease),opacity var(--av-ease)}
.av-marquee__track li:hover img,
.av-marquee__track li:focus-within img{filter:none;opacity:1}
@media (prefers-reduced-motion:reduce){
  .av-marquee__track img{transition:none}
}
.av-marquee__wordmark{font-family:var(--av-font-head);font-weight:700;
letter-spacing:.02em;color:var(--av-ink-soft);white-space:nowrap}
@keyframes av-marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){
  .av-marquee__track{animation:none}
  .av-marquee__viewport{overflow-x:auto;scrollbar-width:none}
  .av-marquee__viewport::-webkit-scrollbar{display:none}
}

/* ---------- Ikona w karcie gwarancji ---------- */
/* Ikona w gwarancjach: wieksza i z wypelnieniem, zeby czytala sie jako znak,
   a nie drobna ramka obok tekstu. */
.av-guarantee__item .av-stats__icon{width:56px;height:56px;margin-bottom:1.1rem;
background:var(--av-surface-dark);border-color:var(--av-surface-dark);color:var(--av-accent)}
.av-guarantee__item .av-stats__icon svg{width:28px;height:28px}
/* Karta wysrodkowana: ikona, tytul i jedno zdanie na osi (prosba klienta 1.6.0). */
.av-guarantee__item{transition:border-color var(--av-ease);display:flex;flex-direction:column;align-items:center;text-align:center}
.av-guarantee__item .av-stats__icon{margin-inline:auto}
.av-guarantee__item p{margin-bottom:0}
.av-guarantee__item:hover{border-color:var(--av-accent)}

/* ---------- Proces: karty sklejaja sie w stos (wzorzec z ROW) ----------
   Kazda karta jest sticky z offsetem rosnacym o 18px na pozycje, wiec przy
   przewijaniu nasuwaja sie na siebie jak harmonijka. Zero JavaScriptu. */
@media (min-width:1041px){
  .av-process__intro{position:sticky;top:calc(var(--av-nav-h,80px) + 1.5rem);align-self:start}
  .av-steps__item{position:sticky;
  top:calc(var(--av-nav-h,80px) + 1.5rem + var(--i,0) * 18px)}
}
/* Na telefonie ten sam stos, tylko ciasniejszy: mniejszy odstep miedzy
   kartami (10 px zamiast 18) i mniejszy zapas nad nimi, bo ekran jest niski.
   Prosba klienta 24.09.2026, zeby animacja procesu dzialala rowniez na
   telefonie. Karta miesci sie w oknie (zdjecie ~200 px + tekst), wiec stos
   nie blokuje przewijania. */
@media (max-width:1040px){
  .av-steps__item{position:sticky;
  top:calc(var(--av-nav-h,64px) + .75rem + var(--i,0) * 10px)}
}
/* Uzytkownik, ktory prosi system o mniej ruchu, dostaje zwykla liste. */
@media (prefers-reduced-motion:reduce){
  .av-steps__item{position:static}
}

/* ---------- WhatsApp wychodzacy ze zdjecia w kontakcie ---------- */
/* Na desktopie przycisk nachodzi na dolna krawedz zdjecia: ma czytac sie jak
   zaproszenie do rozmowy, a nie kolejna pozycja listy. Plakietki social siedza
   w przeciwleglym rogu, wiec sie nie zderzaja. Zdjecie potrzebuje prześwitu
   pod soba, inaczej przycisk zaslania pierwszy wiersz listy kontaktowej. */
.av-contact__photo{overflow:visible;margin-bottom:3rem}
.av-contact__wa{position:absolute;left:1.15rem;bottom:-1.5rem;z-index:3;
display:inline-flex;align-items:center;gap:.5rem;
min-height:46px;padding:.65rem 1.15rem;font-size:.9rem;
box-shadow:0 10px 24px rgba(10,12,13,.35)}
.av-contact__wa svg{width:18px;height:18px;flex:none}
@media (max-width:560px){
  /* Na telefonie oba elementy wchodza w normalny przeplyw pod zdjeciem:
     przycisk na pelna szerokosc nachodzil na plakietki przyklejone do rogu. */
  .av-contact__photo{display:flex;flex-direction:column;gap:.85rem;margin-bottom:0}
  .av-contact__photo img{order:0}
  .av-contact__social{position:static;order:1;justify-content:center;margin:.85rem 0 0;gap:.65rem}
  /* Poza zdjeciem plakietki nie konkuruja juz z fotografia, wiec moga byc
     wieksze: na dotyk 48 px to wygodny cel. */
  .av-contact__social a{background:rgba(255,255,255,.08);width:48px;height:48px}
  .av-contact__social svg{width:23px;height:23px}
  /* relative + inset:auto, nie static: polysk (::after, inset:0) potrzebuje
     pozycjonowanego przycisku, inaczej rozciaga sie na cale zdjecie. */
  .av-contact__wa{position:relative;inset:auto;order:2;width:100%;justify-content:center;
  margin:0;box-shadow:none}
  /* Ramka nalezy do zdjecia, nie do calej kolumny. Gdy plakietki i przycisk
     wchodza w przeplyw, obramowany <figure> rosnie razem z nimi i wyglada,
     jakby przyciski wyjezdzaly ze zdjecia. Dlatego na mobile ramke przejmuje
     sam obrazek, a ozdobny naroznik znika: nie ma juz do czego przylegac. */
  /* Cien tez musi zejsc z figury na obrazek. Sama ramka nie wystarczyla:
     --av-cien-ramka zostawal na <figure>, wiec obrysowywal rowniez ikonki
     i przycisk, ktore weszly pod zdjecie - wygladalo to, jakby siedzialy
     w ramce kadru. */
  .av-contact__photo{border:0;box-shadow:none;border-radius:0}
  .av-contact__photo::before{display:none}
  .av-contact__photo img{border:0;border-radius:var(--av-radius);
  box-shadow:var(--av-cien-ramka)}
}

/* ---------- Suwak przed/po (home staging) ---------- */
.av-ba{margin:0}
.av-ba__frame{position:relative;overflow:hidden;user-select:none;
border:var(--av-border-w) solid var(--av-line-dark);background:var(--av-surface-dark)}
.av-ba__after,.av-ba__before{display:block}
.av-ba__after img,.av-ba__before img{width:100%;aspect-ratio:3/2;object-fit:cover;display:block}
/* Warstwa "przed" lezy na "po" i jest przycinana szerokoscia. Bez JS ma 50%. */
.av-ba__before{position:absolute;inset:0;width:50%;overflow:hidden}
.av-ba__before img{width:auto;height:100%;max-width:none}
.av-ba__frame{--av-ba-w:100%}
.av-ba__label{position:absolute;top:.85rem;padding:.35rem .8rem;
font-size:.7rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
background:rgba(10,12,13,.82);color:#fff}
.av-ba__label--before{left:.85rem}
.av-ba__label--after{right:.85rem;background:var(--av-accent);color:var(--av-on-accent)}
.av-ba__handle{position:absolute;top:0;bottom:0;left:50%;width:2px;
background:var(--av-accent);transform:translateX(-1px);pointer-events:none}
.av-ba__grip{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
display:grid;place-items:center;width:44px;height:44px;
background:var(--av-accent);color:var(--av-on-accent);
box-shadow:0 4px 16px rgba(10,12,13,.4)}
.av-ba__grip svg{width:20px;height:20px}
/* Suwak lezy na calym kadrze i jest niewidoczny: obsluge wizualna przejmuje uchwyt. */
.av-ba__range{position:absolute;inset:0;width:100%;height:100%;margin:0;
opacity:0;cursor:ew-resize;appearance:none;background:none}
.av-ba__range:focus-visible{opacity:1;outline:3px solid var(--av-accent);outline-offset:-3px}
.av-ba:not(.is-live) .av-ba__handle{display:none}
.av-ba__hint{margin:.9rem 0 0;font-size:.82rem;color:var(--av-on-dark-soft)}

/* Numer w kolumnie procesu: sam z siebie wyglada jak przypadkowa liczba,
   wiec dostaje etykiete i wyraznie czyta sie jako druga sciezka kontaktu. */
.av-process__tel{display:flex;flex-direction:column;gap:.15rem;margin-top:1.5rem;
padding-top:1.25rem;border-top:var(--av-border-w) solid var(--av-line)}
.av-process__tel-label{font-size:.72rem;font-weight:700;
letter-spacing:var(--av-tracking-eyebrow);text-transform:uppercase;color:var(--av-ink-soft)}
.av-process__tel a{font-family:var(--av-font-head);font-weight:700;
font-size:1.3rem;letter-spacing:-.01em;text-decoration:none;color:var(--av-ink)}
.av-process__tel a:hover{color:var(--av-accent-ink)}

/* CTA na przerywniku parallax: pojawia sie tylko tam, gdzie config je poda,
   wiec nie kazdy divider zamienia sie w kolejne wezwanie do dzialania. */
.av-parallax--cta{display:grid;place-items:center}
.av-parallax--cta::before{content:"";position:absolute;inset:0;z-index:1;
background:linear-gradient(rgba(10,12,13,.28),rgba(10,12,13,.62))}
.av-parallax__cta{position:relative;z-index:2;text-align:center;
padding-inline:var(--av-pad-x);max-width:44rem}
.av-parallax__cta p{margin:0 0 1.25rem;font-family:var(--av-font-head);
font-weight:var(--av-head-weight);line-height:1.2;letter-spacing:-.02em;
font-size:clamp(1.35rem,3vw,2.15rem);color:#fff;text-shadow:0 2px 16px rgba(10,12,13,.6)}

/* ---------- Dlaczego my: zdjecie agenta + kafelki 2 w rzedzie ----------
   Uklad z metrohouse-row. Zdjecie jest przyklejone, bo kolumna zalet jest
   od niego dluzsza i inaczej zostawialaby pod nim puste pole. */
.av-why{display:grid;gap:1px;background:var(--av-line-dark);
grid-template-columns:repeat(3,minmax(0,1fr))}
.av-why--photo{background:none;gap:clamp(1.75rem,3.5vw,3rem);
grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);align-items:start}
.av-why__media{position:relative;margin:0;isolation:isolate;
border:var(--av-border-w) solid var(--av-line-dark)}
/* 4:5 zamiast 3:4: przy 3:4 figura miala 736px, czyli tyle co cale okno po
   odjeciu nawigacji, wiec przyklejenie nie mialo czego przewijac. */
.av-why__media img{width:100%;aspect-ratio:var(--av-why-ratio,4/5);object-fit:cover;object-position:var(--av-why-pos,center top);display:block}
/* Zolta ramka offsetowa: ten sam akcent, co przy zdjeciu w sekcji o nas. */
.av-why__media::before{content:"";position:absolute;inset:auto auto -14px -14px;
width:58%;height:42%;border:2px solid var(--av-accent);z-index:-1;pointer-events:none}
.av-why__media figcaption{padding:1.15rem 1.25rem;background:var(--av-surface-dark-alt);
border-top:var(--av-border-w) solid var(--av-line-dark)}
.av-why__media blockquote{margin:0;font-size:.95rem;line-height:1.6;color:var(--av-on-dark)}
.av-why__media cite{display:block;margin-top:.6rem;font-style:normal;font-size:.76rem;
font-weight:700;letter-spacing:var(--av-tracking-eyebrow);text-transform:uppercase;color:var(--av-accent)}

.av-why__grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
gap:1px;background:var(--av-line-dark);margin:0;padding:0;list-style:none}
.av-why__item{background:var(--av-surface-dark);position:relative;
padding:clamp(1.35rem,2.4vw,1.9rem);display:flex;flex-direction:column;gap:.45rem}
.av-why__num{font-family:var(--av-font-head);font-weight:var(--av-head-weight);
font-size:.85rem;letter-spacing:.1em;color:var(--av-accent)}
.av-why__item .av-h4{margin:0;color:var(--av-on-dark)}
.av-why__item p{margin:0;font-size:.9rem;line-height:1.6;color:var(--av-on-dark-soft)}
.av-why__badge{align-self:flex-start;margin-top:auto;padding-top:.6rem;
font-size:.68rem;font-weight:700;letter-spacing:var(--av-tracking-eyebrow);
text-transform:uppercase;color:var(--av-accent)}


@media (max-width:1040px){
  .av-why,.av-why--photo{grid-template-columns:1fr}
  .av-why__media{position:relative;max-width:420px}
}
@media (max-width:620px){
  .av-why__grid{grid-template-columns:1fr}
}

/* Kontakt obok CTA na przerywniku */
.av-parallax__cta{max-width:52rem}
.av-parallax__actions{display:flex;align-items:center;justify-content:center;
gap:clamp(1rem,3vw,2.25rem);flex-wrap:wrap}
/* Telefon i mail jeden pod drugim, ikona po lewej: pionowy uklad czyta sie
   jak wizytowka, a nie jak dwa przypadkowe linki obok przycisku. */
.av-parallax__contact{display:grid;gap:.55rem;justify-items:start;
margin:0;padding:0;list-style:none;text-align:left}
.av-parallax__contact a{display:inline-flex;align-items:center;gap:.6rem;
font-family:var(--av-font-head);font-weight:650;font-size:1.02rem;
color:#fff;text-decoration:none;transition:color var(--av-ease)}
.av-parallax__contact svg{width:19px;height:19px;flex:none;color:var(--av-accent)}
.av-parallax__contact a span{border-bottom:2px solid rgba(var(--av-accent-rgb),.45);padding-bottom:.12rem;
transition:border-color var(--av-ease)}
.av-parallax__contact a:hover{color:var(--av-accent)}
.av-parallax__contact a:hover span{border-color:var(--av-accent)}
@media (max-width:620px){
  .av-parallax__actions{flex-direction:column-reverse}
  .av-parallax__contact{justify-items:center;text-align:center}
}

/* ---------- Konsultacja: dociagnieta do jezyka reszty strony ---------- */
/* Plakietka nachodzi na prawa krawedz zdjecia, po stronie tekstu: prowadzi
   wzrok z fotografii do tresci, zamiast wisiec w lewym rogu. */
/* Plakietka ma PRZECHODZIC przez dolna krawedz kadru, a nie lezec na zdjeciu:
   to ona wiaze zdjecie z trescia obok. Wczesniej siedziala 1,5 rem NAD
   krawedzia i wystawala tylko 20 px w bok, wiec przy dlugim napisie w ogole
   nie bylo widac, ze cokolwiek wychodzi poza kadr. Kontener ma overflow
   visible (nizej), inaczej plakietka jest ucinana. */
.av-consult__badge{position:absolute;right:-1.25rem;bottom:-.4rem;z-index:2;
/* margin:0 jest tu KONIECZNY. Wczesniejsza regula tej klasy (wariant w toku
   tekstu) daje margin-bottom:1.25rem, a przy pozycjonowaniu bezwzglednym
   'bottom' ustawia MARGIN box, wiec margines podnosil plakietke o dokladnie
   tyle, ile mialo jej wystawac - i lezala rowno w kadrze zamiast go przecinac. */
margin:0;
display:inline-flex;align-items:center;gap:.65rem;
background:var(--av-accent);color:var(--av-on-accent);
padding:.7rem 1.2rem;font-family:var(--av-font-head);font-size:.88rem;font-weight:700;
line-height:1.2;letter-spacing:.01em;box-shadow:0 10px 26px rgba(10,12,13,.4)}
.av-consult__badge::before{content:"";flex:none;width:9px;height:9px;
background:var(--av-on-accent)}
@media (max-width:1040px){
  .av-consult__badge{right:auto;left:1.15rem;bottom:-.4rem}
}
/* Korzysci jako numerowana lista: to jest agenda spotkania, wiec kolejnosc
   niesie znaczenie, a numer czyta sie lepiej niz kolejny ptaszek. */
.av-consult__gains{display:grid;gap:1px;background:var(--av-line-dark);
margin:1.75rem 0 0;padding:0;list-style:none;
border-block:var(--av-border-w) solid var(--av-line-dark)}
.av-consult__gains li{display:grid;grid-template-columns:auto 1fr;gap:1rem;
align-items:baseline;background:var(--av-surface-dark);
padding:.95rem .25rem;color:var(--av-on-dark);font-size:.97rem;line-height:1.55}
.av-consult__gain-num{font-family:var(--av-font-head);font-weight:var(--av-head-weight);
font-size:.82rem;letter-spacing:.1em;color:var(--av-accent)}
.av-consult__media{position:relative;margin:0 0 2.25rem;isolation:isolate;overflow:visible;
border:var(--av-border-w) solid var(--av-line-dark)}
.av-consult__media::before{content:"";position:absolute;inset:-14px -14px auto auto;
width:56%;height:40%;border:2px solid var(--av-accent);z-index:-1;pointer-events:none}
.av-consult .av-sec__actions{margin-top:1.9rem}

/* FAQ na zdjeciu: karty zostaja kryjace, wiec czytelnosc nie zalezy od kadru. */

/* ---------- Stopka na telefonie ----------
   Kolumny obok siebie na waskim ekranie daja cztery drabinki po dwa slowa.
   Na mobile ustawiamy je jedna pod druga i centrujemy, zeby czytalo sie
   jak podpis, a nie jak rozsypana tabela. */
@media (max-width:700px){
  .av-footer__grid{grid-template-columns:1fr;gap:2rem;text-align:center}
  .av-footer__brand{align-items:center}
  /* Logo jest obrazkiem, wiec text-align:center go nie dotyczy. */
  .av-footer__logo{margin-inline:auto}
  .av-footer__desc{margin-inline:auto;max-width:46ch}
  .av-footer__social{justify-content:center}
  .av-footer__col ul{display:flex;flex-wrap:wrap;justify-content:center;gap:.5rem 1.15rem}
  .av-footer__col li{margin:0}
  .av-footer__h{margin-bottom:.75rem}
  .av-footer__bar{flex-direction:column;align-items:center;gap:.75rem;text-align:center}
  .av-footer__legal{display:flex;flex-wrap:wrap;justify-content:center;gap:.5rem 1rem}
}

/* ---------- Akcent w tresci ----------
   <span class="acc"> wyroznia kluczowa frazę w zbitym akapicie. Kolor dobrany
   pod tlo: na jasnym idzie ciemniejszy wariant zoltego (5,94:1), na ciemnym
   czysty akcent marki (11,66:1). Samo pogrubienie ginie w dlugim tekscie. */
/* Zolty #fecc00 ma na bialym 1,52:1, wiec nie moze byc kolorem tekstu.
   Zamiast barwic litery na ciemne zloto, zostawiamy je czytelne i podkreslamy
   czystym kolorem marki. Akcent jest widoczny, tekst nadal spelnia WCAG. */
.acc{color:var(--av-ink);font-weight:650;
box-shadow:inset 0 -.42em 0 rgba(var(--av-accent-rgb),.35)}
.av-sec--dark .acc,.av-sec--photo .acc,.av-parallax .acc,
.av-hero--bg .acc,.av-footer .acc,.av-exit .acc{color:var(--av-accent);box-shadow:none}
.av-prose .acc,.av-lead .acc{font-weight:650}

/* Dane kontaktowe w kolumnie procesu */
.av-process__contact{display:grid;gap:.7rem;margin:1.5rem 0 0;padding-top:1.35rem;
list-style:none;border-top:var(--av-border-w) solid var(--av-line)}
.av-process__contact li{display:grid;grid-template-columns:auto 1fr;gap:.8rem;align-items:center}
/* Czysty zolty na bialym ma 1,52:1, czyli ponizej progu 3:1 dla elementow
   graficznych. Ikona dostaje wiec ciemna podkladke: kolor marki zostaje
   dokladnie taki, jaki ma byc, a kontrast rosnie do 11,66:1. */
.av-process__contact li::before{content:"";grid-row:1;grid-column:1;
width:34px;height:34px;background:var(--av-surface-dark)}
.av-process__contact svg{grid-row:1;grid-column:1;width:17px;height:17px;
place-self:center;color:var(--av-accent)}
.av-process__contact a,.av-process__contact span{font-size:.94rem;line-height:1.45;
color:var(--av-ink);text-decoration:none}
.av-process__contact a:hover{color:var(--av-accent-ink);text-decoration:underline}

/* ---------- Przyklejone zdjecia w sekcjach z dluzszym tekstem ----------
   CELOWO na samym koncu pliku. Reguly bazowe tych elementow ustawiaja
   position:relative dla ramek offsetowych; przy tej samej specyficznosci
   wygrywa deklaracja pozniejsza, wiec sticky musi stac jako ostatnie.
   Sticky sam ustanawia kontekst pozycjonowania, wiec ::before dziala dalej. */
@media (min-width:1041px){
  .av-about__side,
  .av-why__media,
  .av-consult__media{position:sticky;top:calc(var(--av-nav-h,80px) + 1.5rem)}
}

/* ---------- Popup wyjscia ---------- */
.av-exit{position:fixed;inset:0;z-index:200;display:grid;place-items:center;
padding:var(--av-pad-x)}
/* KRYTYCZNE: [hidden] i .av-exit maja te sama specyficznosc, wiec display:grid
   z reguly klasowej wygrywal z domyslnym display:none. Popup zostawal wtedy
   nad cala strona jako przezroczysta warstwa i przechwytywal wszystkie klikniecia.
   Ta deklaracja musi tu byc. */
.av-exit[hidden]{display:none}
.av-exit__overlay{position:absolute;inset:0;background:rgba(8,10,11,.72);
opacity:0;transition:opacity .28s var(--av-ease)}
.av-exit__dialog{position:relative;display:grid;
grid-template-columns:minmax(0,320px) minmax(0,1fr);
width:min(880px,100%);max-height:94svh;overflow:auto;
background:var(--av-surface-dark);color:var(--av-on-dark);
border-top:3px solid var(--av-accent);
box-shadow:0 30px 80px rgba(8,10,11,.55);
opacity:0;transform:translateY(14px) scale(.985);
transition:opacity .3s var(--av-ease),transform .3s var(--av-ease)}
.av-exit.is-open .av-exit__overlay{opacity:1}
.av-exit.is-open .av-exit__dialog{opacity:1;transform:none}
.av-exit__dialog:focus{outline:none}

/* Kolumna boczna: zdjecie zabiera cala wolna wysokosc, a plakietka i kontakt
   tylko tyle, ile potrzebuja. Wysokosc dyktuje formularz w drugiej kolumnie,
   wiec zdjecie samo dopasowuje sie do okna zamiast stac na sztywnej wartosci. */
.av-exit__aside{position:relative;display:flex;flex-direction:column;
background:var(--av-surface-dark-alt)}
/* Zdjecie i plakietka ida od krawedzi do krawedzi kolumny; wlasny odstep
   dostaje dopiero lista kontaktowa. Ramka i padding wokol zdjecia robily
   z niego obrazek w obrazku. */
/* Zdjecie NIE dyktuje wysokosci okna: img jest absolutny, wiec kolumna ma
   tyle, ile formularz obok. Wczesniej pionowe zdjecie mialo naturalne ~600 px,
   okno 787 px nie miescilo sie na laptopach (768-864 px) i trzeba bylo przewijac. Zdjecie bierze cala wolna wysokosc kolumny (flex:1, 1.6.8), plakietka i kontakt stoja pod nim.
   Kadr od gory, nadmiar schodzi z dolu; plakietka i kontakt wyzej. */
.av-exit__photo{position:relative;flex:1 1 auto;min-height:170px;margin:0;overflow:hidden}
.av-exit__photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
object-position:var(--av-exit-photo-pos,center top);display:block}


/* Plakietka jako pelny akcent, nie sam zolty tekst: na tej kolumnie ma byc
   jedynym mocnym punktem i prowadzic wzrok do danych kontaktowych. */
.av-exit__badge{flex:none;display:flex;align-items:center;gap:.5rem;margin:0;
padding:.7rem clamp(1rem,2vw,1.35rem);background:var(--av-accent);color:var(--av-on-accent);
font-size:.72rem;font-weight:800;line-height:1.25;
letter-spacing:var(--av-tracking-eyebrow);text-transform:uppercase}
.av-exit__badge svg{flex:none;width:16px;height:16px}

/* Wiekszy odstep od dolu podnosi plakietke i kontakt nad krawedz okna,
   zdjecie oddaje te wysokosc (flex:1). Wzorzec: kwadrat-warszawski 1.17.3. */
.av-exit__contact{flex:none;display:grid;gap:.45rem;list-style:none;
margin:0;padding:clamp(1rem,2vw,1.35rem) clamp(1rem,2vw,1.35rem) clamp(1.75rem,4svh,2.5rem)}
.av-exit__who{font-family:var(--av-font-head);font-weight:700;font-size:1rem;
color:var(--av-on-dark);margin-bottom:.1rem}
.av-exit__contact a{display:flex;align-items:center;gap:.55rem;
font-size:.92rem;color:var(--av-on-dark);text-decoration:none;
transition:color var(--av-ease)}
.av-exit__contact a svg{flex:none;width:16px;height:16px;color:var(--av-accent);
transition:color var(--av-ease)}
.av-exit__contact a:hover{color:var(--av-accent)}
.av-exit__contact a span{min-width:0;overflow-wrap:anywhere}

/* Pion liczony od wysokosci okna (kwadrat-warszawski 1.17.3): staly padding
   na laptopie 1366x768 przelewal formularz za max-height i wracal pasek. */
.av-exit__body{padding:clamp(1.1rem,3svh,2.25rem) clamp(1.5rem,3vw,2.25rem)}
/* Okno ma sie miescic bez przewijania na laptopie 1366x768 (okno ~690 px).
   Formularz w popupie jest gestszy niz na stronie: nizsze pola, mniejsze
   odstepy, pusty wiersz statusu nie zajmuje miejsca (bez display:none - to region aria-live i musi ogłosić wynik). */
.av-exit__body .av-eyebrow{margin-bottom:.6rem}
.av-exit__body .av-field{margin-bottom:.6rem}
.av-exit__body .av-field__label{margin-bottom:.25rem}
.av-exit__body .av-field input{min-height:0;height:46px;padding-block:.5rem}
.av-exit__body .av-consent{margin-bottom:.9rem}
.av-exit__body .av-btn{min-height:50px;padding-block:.75rem}
.av-exit__body .av-form__proof,.av-exit__body .av-form__note{margin-top:.6rem}
.av-exit__body .av-form__status:empty{min-height:0;margin:0}
/* Tytul sie lamie (1.1.1). Wzorzec mial white-space:nowrap pod krotki tytul;
   tutejszy jest dluzszy, wychodzil poza okno i dialog dostawal poziomy pasek
   (ten sam blad: freedom-michal-brodniewski, 05.10.2026). */
.av-exit__title{font-family:var(--av-font-head);font-weight:var(--av-head-weight);
font-size:clamp(1.2rem,1.9vw,1.55rem);line-height:1.2;letter-spacing:-.02em;
text-wrap:balance;overflow-wrap:anywhere;margin:0 0 1.1rem;color:var(--av-on-dark)}
.av-exit__text{margin:0 0 .9rem;font-size:.95rem;line-height:1.6;color:var(--av-on-dark-soft)}
.av-exit__body .av-field__label{color:var(--av-on-dark-soft)}
.av-exit__body .av-field input{background:rgba(255,255,255,.06);
border-color:rgba(255,255,255,.34);color:#fff}
.av-exit__body .av-field input::placeholder{color:rgba(255,255,255,.55)}
/* Fokus pola na granacie (1.3.2): czerwona ramka z formularzy na bieli miala
   tu 2,7:1, ponizej progu 3:1 dla wskaznika fokusu - mieta ma 10,3:1. */
.av-exit__body .av-field input:focus{border-color:var(--av-highlight);box-shadow:0 0 0 3px rgba(var(--av-highlight-rgb),.3)}
.av-exit__body .av-consent,.av-exit__body .av-form__note{color:var(--av-on-dark-soft)}
.av-exit__body .av-consent a,.av-exit__body .av-form__note a{color:var(--av-accent)}

.av-exit__close{position:absolute;right:.6rem;top:.6rem;z-index:2;
display:grid;place-items:center;width:38px;height:38px;padding:0;cursor:pointer;
background:rgba(8,10,11,.55);border:0;color:#fff;
transition:background var(--av-ease),color var(--av-ease)}
.av-exit__close:hover{background:var(--av-accent);color:var(--av-on-accent)}
.av-exit__close svg{width:18px;height:18px}

@media (max-width:760px){
  .av-exit__dialog{grid-template-columns:1fr}
  .av-exit__aside{display:none}
}
@media (prefers-reduced-motion:reduce){
  .av-exit__overlay,.av-exit__dialog{transition:none}
}

/* ---------- Belka partnera (logo + rola w transakcji) ----------
   Stoi tuz nad FAQ: jasny, spokojny pas miedzy blokiem gwarancji a ciemna
   sekcja pytan. Bez przycisku, bo to dowod, a nie kolejne wezwanie do akcji. */
.av-pband{padding-block:clamp(2rem,4vw,3rem);background:var(--av-surface-alt);
border-block:var(--av-border-w) solid var(--av-line)}
.av-pband__in{display:grid;gap:clamp(1.25rem,3vw,2.5rem);align-items:center;
grid-template-columns:minmax(190px,240px) minmax(0,1fr)}
/* Znak partnera jest ciemny i na szarym tle sekcji gubi kontur. */
.av-pband__logo{display:grid;place-items:center;padding:clamp(1rem,2vw,1.5rem);
background:var(--av-surface);border:var(--av-border-w) solid var(--av-line);
border-top:3px solid var(--av-accent)}
.av-pband__logo img{width:100%;max-width:250px;height:auto;object-fit:contain}
.av-pband__copy{min-width:0}
.av-pband__copy .av-eyebrow{margin-bottom:.6rem}
.av-pband__text{margin:.65rem 0 0;max-width:64ch;color:var(--av-ink-soft)}
.av-pband__note{margin:.7rem 0 0;font-size:.85rem;color:var(--av-ink-soft);
padding-left:.9rem;border-left:2px solid var(--av-accent)}
@media (max-width:760px){
  .av-pband__in{grid-template-columns:1fr;justify-items:start}
  .av-pband__logo{width:min(100%,220px)}
}

/* ---------- Pasek marki ---------- */
/* Grafika jest zwyklym <img>, nie tlem CSS: tylko wtedy Imagify poda ja
   w AVIF/WebP. Reguly ponizej dbaja o to, zeby przy proporcji 24:1 pasek
   nie zrobil sie na telefonie kilkupikselowym paskiem. */
.av-bband{display:block;line-height:0}
.av-bband--light{background:var(--av-surface)}
.av-bband--alt{background:var(--av-surface-alt)}
.av-bband--dark{background:var(--av-surface-dark)}
.av-bband__img{display:block;width:100%;height:auto;
min-height:clamp(30px,3.4vw,40px);object-fit:cover}
.av-bband--bleed{width:100vw;margin-left:calc(50% - 50vw);
margin-block:clamp(2rem,4vw,3.25rem) clamp(1.75rem,3.5vw,2.75rem)}
/* Logotyp w stopce zastepuje nazwe pisana tekstem, wiec przejmuje jej odstep. */
/* Imagify przenosi class z <img> na owijke <picture> (patrz picture{display:contents}
   w critical.css). Bez tego wysokosc dostawala owijka, a obraz wychodzil w naturalnym
   rozmiarze na opis firmy - wzorzec 1.2.0 na zywo. Owijka znika z ukladu,
   wymiary dostaje zawsze sam <img>. */
picture.av-footer__logo{display:contents}
.av-footer__logo:not(picture),picture.av-footer__logo>img{display:block;width:auto;max-width:100%;
height:clamp(72px,8vw,100px);margin-bottom:1.1rem}  /* 1.3.2: wieksze, jak w nawigacji */
/* Kontakt w stopce: ikona jako znacznik przy tresci, tekst zawija sie
   pod nia bez wciecia, dlatego siatka, a nie flex z gapem. */
.av-footer__contact li{display:grid;grid-template-columns:18px minmax(0,1fr);
gap:.6rem;align-items:start}
.av-footer__contact svg{width:18px;height:18px;margin-top:.15rem;color:var(--av-accent)}
.av-footer__contact a{overflow-wrap:anywhere}
/* Turnstile pokazuje sie tylko przy podejrzanym ruchu, wiec zwykle ma zerowa
   wysokosc. Margines dokladamy dopiero, gdy widget cos wyrenderuje. */
.av-turnstile:not(:empty){margin-bottom:1rem}
/* Widget renderuje sie dopiero po dotknieciu formularza (main.js), a stoi nad
   pierwszym polem: bez zarezerwowanej wysokosci zepchnalby pola w trakcie
   pisania. 65px = wysokosc widgetu w rozmiarze normal. NIE usuwaj. */
/* Turnstile: ZERO rezerwy w ukladzie, dopoki widget nie powstanie
   (_STANDARD/13 sekcja 7 "Gdzie postawic widget", 25.09.2026). Wczesniej stalo tu
   min-height:65px i formularz mial nad pierwszym polem pusty pas, ktorego nikt
   nie umial sobie wytlumaczyc: widget renderuje sie dopiero przy pierwszej
   interakcji, wiec u kogos, kto tylko czytal, rezerwa zostawala pusta przez cala
   wizyte. Miejsce wypracowuje sam widget - patrz kolejnosc w _lead-form.php:
   element siedzi na koncu formularza, wiec rosnie POD polami i nad przyciskiem.
   200 px, nie "auto": max-height nie animuje sie z auto, a widget Cloudflare ma
   65-70 px. Dwa selektory nizej, bo przy renderowaniu jawnym klase dokłada JS,
   a przy implicit wystarczy :not(:empty) - Cloudflare wstawia wtedy <iframe>
   jako dziecko i element sam przestaje byc pusty. */
.av-turnstile[data-appearance="always"]{min-height:0;margin-bottom:0;
overflow:hidden;max-height:0;opacity:0;
transition:max-height .28s cubic-bezier(.22,.61,.36,1),opacity .2s ease .08s,margin-bottom .28s cubic-bezier(.22,.61,.36,1)}
.av-turnstile[data-appearance="always"].is-ready,
.av-turnstile[data-appearance="always"]:not(:empty){max-height:200px;opacity:1;margin-bottom:1rem}
.av-turnstile iframe{max-width:100%}
/* Przewijanie wewnatrz okna nie przenosi sie na strone pod spodem. */
.av-exit__dialog{overscroll-behavior:contain}

/* Blok informacyjny na dole to przypis dla wyszukiwarki, nie tresc dla
   czytajacego. W rozmiarze tekstu glownego wyglada jak doklejony wypelniacz,
   wiec schodzi o stopien nizej i traci kontrast. */
.av-seotext__grid p{font-size:.82rem;line-height:1.65;color:var(--av-ink-soft)}
.av-seotext__grid h3{font-size:.95rem}
.av-seotext .av-sec__head{margin-bottom:1.25rem}

/* ---------- Baner zgod iubenda ---------- */
/* Ukrywamy WYLACZNIE plakietke z logo dostawcy, nie baner.
   Sam baner, przyciski zgody i odmowy oraz panel ustawien zostaja nietkniete:
   ukryty baner zgod to problem prawny, nie kosmetyczny. Zdejmujemy tylko
   sygnature "iubenda" doklejona do rogu, bo to reklama uslugi na stronie klienta.
   Regula obowiazuje na kazdym landingu.

   !important NIE jest tu ozdoba i nie wolno go "posprzatac". Bez niego regula
   jest cichym no-opem: plakietka zostaje, a w konsoli nie ma zadnego bledu.
   iubenda wstrzykuje wlasny arkusz w trakcie dzialania strony, a jej selektory
   sa zakotwiczone w identyfikatorze banera - "#iubenda-cs-banner .iubenda-cs-
   brand-badge" ma swoistosc 1,1,0, nasze ".iubenda-cs-brand-badge" ma 0,1,0.
   W core-pl.js 1.107.0 (sprawdzone 26.09.2026) 219 z 1893 regul niesie
   !important. Dopiero nasze !important wyrownuje warstwe.

   Nie probuj ukrywac opakowania ".iubenda-cs-brand-badge-outer" - iubenda
   trzyma je regula o swoistosci 1,3,0 z display:inline-flex!important, wiec
   przy rownej warstwie i tak wygra. Pusty kontener nie szkodzi: w ukladach
   default i default-floating iubenda sama daje mu height:0!important.
   Szczegoly i polecenie kontrolne: _STANDARD/08-IUBENDA.md. */
.iubenda-cs-brand-badge{display:none !important}

/* ---------- Wyceniarka ----------
   Uklad taki jak w sekcji kontaktu (tresc + karta z formularzem), ale na
   jasnym tle: wyceniarka stoi w srodku strony, a dwie ciemne sekcje pod rzad
   zlewaly sie w jeden blok. Karta jest lepka na duzych ekranach, bo lista
   korzysci po lewej jest dluzsza niz formularz. */
.av-wyc{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,480px);gap:clamp(2rem,5vw,4rem);align-items:start}
.av-wyc__card{background:var(--av-surface)}
.av-wyc__steps{display:grid;gap:1px;background:var(--av-line);margin:1.75rem 0 1.5rem;
border-block:var(--av-border-w) solid var(--av-line)}
.av-wyc__steps li{display:grid;grid-template-columns:auto 1fr;gap:1rem;align-items:baseline;
padding:.95rem .1rem;background:var(--av-surface-alt);font-size:.95rem}
.av-wyc__step-num{font-family:var(--av-font-head);font-weight:var(--av-head-weight);
font-size:.82rem;letter-spacing:.08em;color:var(--av-accent-ink)}
.av-wyc__embed{position:relative;aspect-ratio:3/4;min-height:520px}
.av-wyc__embed iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
@media (min-width:1041px){
  .av-wyc__card{position:sticky;top:calc(var(--av-nav-h,80px) + 1.5rem)}
}
@media (max-width:1040px){
  .av-wyc{grid-template-columns:1fr}
}

/* Pola o nieruchomosci wewnatrz formularza wyceny. */
.av-wycp{margin-bottom:1rem;padding-bottom:1rem;border-bottom:var(--av-border-w) solid var(--av-line)}
.av-wycp__typ{border:0;padding:0;margin:0 0 .85rem}
.av-wycp__row{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:.75rem}
@media (max-width:420px){
  .av-wycp__row{grid-template-columns:1fr}
}
.av-chips{display:flex;flex-wrap:wrap;gap:.5rem}
.av-chip input{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.av-chip label{display:inline-block;padding:.5rem .9rem;font-size:.88rem;font-weight:600;
border:var(--av-border-w) solid var(--av-line);background:var(--av-surface);
color:var(--av-ink-soft);cursor:pointer;transition:background .15s,border-color .15s,color .15s}
.av-chip label:hover{border-color:var(--av-accent-ink)}
.av-chip input:checked + label{background:var(--av-accent);border-color:var(--av-accent);
color:var(--av-on-accent)}
/* Fokus musi byc widoczny takze wtedy, gdy chip jest zaznaczony: sam kolor
   tla nie mowi uzytkownikowi klawiatury, gdzie stoi kursor. */
.av-chip input:focus-visible + label{outline:3px solid rgba(var(--av-accent-rgb),.55);outline-offset:2px}
/* Selecty nie byly stylowane w bazie motywu (formularz mial tylko inputy
   i textarea), a niestylowany <select> obok stylowanego <input> wyglada
   jak pole z innego formularza. */
.av-field select{width:100%;min-height:50px;padding:.75rem 2.2rem .75rem .9rem;
font:inherit;color:var(--av-ink);background-color:var(--av-surface);
border:var(--av-border-w) solid var(--av-line);border-radius:var(--av-radius);
appearance:none;-webkit-appearance:none;cursor:pointer;
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235a6459' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
background-repeat:no-repeat;background-position:right .75rem center;background-size:1.1rem}
.av-field select:focus{border-color:var(--av-accent-ink);outline:none;
box-shadow:0 0 0 3px rgba(var(--av-accent-rgb),.28)}

/* Przypis pod sekcja przygotowania (np. zastrzezenie o zakresie prac). */
.av-method__note{margin-top:1.5rem;font-size:.9rem;color:var(--av-ink-soft);max-width:72ch}

/* Podpis "Wizualizacja" na obrazach wygenerowanych (av_viz_label). Lewy gorny
   rog, bo dolna krawedz zajmuja podpisy i cytaty. Ciemna podkladka trzyma
   kontrast bialego tekstu niezaleznie od kadru. */
/* .av-why__media celowo NIE tutaj: ta regula stoi pod blokiem "Przyklejone
   zdjecia" i zdejmowala mu sticky (1.5.9). Sticky i tak ustala kontekst
   pozycjonowania dla plakietki. */
.av-method__media,.av-steps__media{position:relative}
.av-viz{position:absolute;top:.6rem;left:.6rem;z-index:2;padding:.22rem .5rem;
font-size:.68rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;line-height:1.3;
background:rgba(var(--av-ink-rgb),.78);color:#fff;pointer-events:none}

/* Sekcje pod zgieciem: przegladarka nie liczy ich layoutu przy pierwszym
   malowaniu, wiec dluga strona nie opoznia renderu hero (_STANDARD/12 5.9).
   Hero to .av-hero, nie .av-sec, a przerywniki parallax to .av-parallax -
   obu to nie dotyczy. `auto` w contain-intrinsic-size zapamietuje prawdziwa
   wysokosc, ale DOPIERO po pierwszym renderze sekcji - przy kliknieciu w menu
   zaraz po wejsciu cel liczy sie z zastepczych 800 px i przewijanie konczy
   sie za wczesnie. .av-cv-off wlacza JS na czas skoku do kotwicy (main.js,
   "Kotwice"): jeden pelny layout, wysokosci zapamietane, klasa znika. */
.av-sec{content-visibility:auto;contain-intrinsic-size:auto 800px}
.av-cv-off .av-sec{content-visibility:visible}

/* ---------- Rolka wideo w ramce telefonu ----------
   Tresc po lewej, telefon po prawej; na telefonie ramka pod trescia.
   Ramka ma zaokraglenia mimo layout.radius 0: to przedmiot (telefon), nie
   element interfejsu, i bez promienia nie czyta sie jako telefon.
   Kadr 9:16 rezerwuje miejsce, zanim cokolwiek sie wczyta (zero CLS).
   Selektory potomne bez ">", bo Imagify owija plakat w picture (_STANDARD/05). */
.av-reel__in{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:clamp(2rem,6vw,5rem);align-items:center}
.av-reel__actions{display:flex;flex-wrap:wrap;align-items:center;gap:1rem 1.5rem}
.av-reel__ig{display:inline-flex;align-items:center;gap:.55rem;min-height:44px;
color:var(--av-on-dark);font-weight:600;text-decoration:none}
.av-reel__ig svg{width:22px;height:22px;flex:none;color:var(--av-accent)}
.av-reel__ig:hover span{text-decoration:underline;text-underline-offset:3px}
.av-reel__phone{width:clamp(230px,24vw,300px);padding:10px;border-radius:44px;
background:#0a0d0b;box-shadow:0 0 0 2px #2b332d,0 30px 60px -20px rgba(0,0,0,.65);position:relative}
.av-reel__screen{position:relative;aspect-ratio:9/16;border-radius:34px;overflow:hidden;background:#000;isolation:isolate}
.av-reel__poster,.av-reel__screen video,.av-reel__screen iframe{position:absolute;inset:0;width:100%;height:100%;border:0;display:block}
.av-reel__poster img{width:100%;height:100%;object-fit:cover;display:block}
.av-reel__screen video{object-fit:cover}
.av-reel__poster{z-index:1;transition:opacity .35s ease}
.av-reel__screen.is-playing .av-reel__poster{opacity:0;pointer-events:none}
.av-reel__island{position:absolute;top:10px;left:50%;transform:translateX(-50%);width:32%;height:22px;
border-radius:999px;background:#000;z-index:3;pointer-events:none}
.av-reel__sound{position:absolute;inset:0;z-index:2;display:flex;align-items:flex-end;justify-content:center;
padding:0 0 12%;background:transparent;border:0;cursor:pointer;transition:opacity .28s ease}
.av-reel__sound.is-hidden{opacity:0;pointer-events:none}
.av-reel__pill{display:inline-flex;align-items:center;gap:.5rem;min-height:44px;padding:.55rem 1rem;
border-radius:999px;background:rgba(0,0,0,.62);color:#fff;font-size:.88rem;font-weight:600;
-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.av-reel__pill svg{width:20px;height:20px;flex:none}
.av-reel__sound:focus-visible .av-reel__pill{outline:3px solid var(--av-accent);outline-offset:3px}
@media (max-width:900px){
  .av-reel__in{grid-template-columns:1fr}
  .av-reel__phone{justify-self:center;width:min(78vw,300px)}
}
@media (prefers-reduced-motion:reduce){
  .av-reel__poster,.av-reel__sound{transition:none}
}

/* ---------- Opinie: pasek oceny + dwa rzedy w przeciwne strony ----------
   Inspiracja: sekcja [opinie_google] z innej strony floty, na tokenach Arki
   (zielen, grafit, zero zaokraglen). Rzedy na cala szerokosc, krawedzie
   wygaszone maska. Animacja rusza dopiero po sklonowaniu kart (.is-ready),
   bez klonow petla przeskakiwalaby w polowie. */
/* Pasek oceny = jeden link do wszystkich opinii w Google (cala powierzchnia
   klikalna). Komorki rowne, bez pustej przerwy: ocena | liczby | strzalka.
   Na hover pasek podnosi sie, a komorka ze strzalka zalewa sie akcentem. */
.av-opinie__pasek{position:relative;display:grid;grid-template-columns:minmax(0,1.35fr) repeat(auto-fit,minmax(0,1fr));
margin:0 0 clamp(2rem,4vw,3rem);background:var(--av-surface-dark);color:var(--av-on-dark);text-decoration:none;
box-shadow:0 12px 32px rgba(var(--av-ink-rgb),.18);transition:transform .3s ease,box-shadow .3s ease}
.av-opinie__pasek::before{content:"";position:absolute;inset:0 0 auto;height:3px;
background:linear-gradient(90deg,var(--av-accent),rgba(var(--av-accent-rgb),.15))}
.av-opinie__pasek--link:hover{transform:translateY(-3px);box-shadow:0 18px 40px rgba(var(--av-ink-rgb),.26)}
.av-opinie__pasek--link:focus-visible{outline:3px solid rgba(var(--av-accent-rgb),.6);outline-offset:3px}
.av-opinie__kom{display:flex;flex-direction:column;justify-content:center;gap:.35rem;min-width:0;
padding:1.6rem clamp(1.1rem,2.4vw,2.2rem);border-right:1px solid var(--av-line-dark)}
.av-opinie__kom:last-child{border-right:0}
.av-opinie__wynik{flex-direction:row;align-items:center;justify-content:flex-start;gap:1rem}
.av-opinie__wynik strong{display:block;font-family:var(--av-font-head);font-size:clamp(2.5rem,2rem + 2vw,3.5rem);
font-weight:800;line-height:.9;letter-spacing:-.03em;margin-bottom:.45rem}
.av-opinie__wynik .av-opinie__zrodlo{font-size:1.25rem;margin:0;letter-spacing:0}
.av-opinie__stat strong{font-family:var(--av-font-head);font-size:1.8rem;font-weight:800;line-height:1;color:var(--av-accent)}
.av-opinie__stat span{font-size:.72rem;font-weight:700;letter-spacing:.12em;line-height:1.35;text-transform:uppercase;color:var(--av-on-dark-soft)}
.av-opinie__wszystkie{flex-direction:row;align-items:center;justify-content:space-between;gap:.8rem;
background:rgba(var(--av-accent-rgb),.12);color:var(--av-on-dark);
font-size:.78rem;font-weight:700;letter-spacing:.12em;line-height:1.35;text-transform:uppercase;transition:background .25s ease,color .25s ease}
.av-opinie__wszystkie svg{flex:none;transition:transform .25s ease}
.av-opinie__pasek--link:hover .av-opinie__wszystkie,.av-opinie__pasek--link:focus-visible .av-opinie__wszystkie{background:var(--av-accent);color:var(--av-on-accent)}
.av-opinie__pasek--link:hover .av-opinie__wszystkie svg{transform:translateX(4px)}
@media (max-width:1040px){
  .av-opinie__pasek{grid-template-columns:repeat(3,minmax(0,1fr))}
  .av-opinie__wynik{grid-column:1/-1;border-right:0;border-bottom:1px solid var(--av-line-dark);padding-block:1.2rem}
  .av-opinie__stat{padding-block:1rem}
  .av-opinie__stat:nth-child(4){border-right:0}
  .av-opinie__stat strong{font-size:1.45rem}
  .av-opinie__wszystkie{grid-column:1/-1;border-right:0;border-top:1px solid var(--av-line-dark);padding-block:1rem;min-height:44px}
}
@media (max-width:520px){
  .av-opinie__kom{padding-inline:.8rem}
  .av-opinie__stat span{font-size:.64rem;letter-spacing:.08em}
}
@media (prefers-reduced-motion:reduce){
  .av-opinie__pasek,.av-opinie__wszystkie svg{transition:none}
  .av-opinie__pasek--link:hover{transform:none}
}
/* Gwiazdki: critical.css ma svg{display:block} - bez nadpisania kazda gwiazdka
   z wtyczki lądowala w osobnej linii (pionowy slupek). */
.av-stars-row,.av-stars-grh{display:inline-flex;align-items:center;gap:2px;color:var(--av-accent);line-height:0}
.av-stars-grh>*{display:inline-flex;align-items:center;gap:2px;flex-wrap:nowrap}
.av-stars-row svg,.av-stars-grh svg{display:inline-block;flex:none}
.av-glogo{display:block;flex:none}
.av-sr{position:absolute !important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

.av-opinie__rzedy{display:grid;gap:1.25rem}
.av-orzad{--av-gap:1.25rem;overflow-x:auto;scrollbar-width:none;
-webkit-mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);
mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent)}
.av-orzad::-webkit-scrollbar{display:none}
.av-orzad__tor{display:flex;align-items:stretch;gap:var(--av-gap);width:max-content;margin:0;
padding:.25rem clamp(1rem,4vw,2.5rem);list-style:none}
.av-orzad.is-ready{overflow:hidden}
.av-orzad.is-ready .av-orzad__tor{padding-inline:0;animation:av-orzad-jazda var(--av-orzad-czas,120s) linear infinite}
.av-orzad--rev.is-ready .av-orzad__tor{animation-direction:reverse}
.av-orzad.is-ready:hover .av-orzad__tor,.av-orzad.is-ready:focus-within .av-orzad__tor,
.av-opinie.has-modal .av-orzad__tor{animation-play-state:paused}
@keyframes av-orzad-jazda{from{transform:translateX(0)}to{transform:translateX(calc(-50% - var(--av-gap) / 2))}}
@media (prefers-reduced-motion:reduce){
  .av-orzad.is-ready{overflow-x:auto}
  .av-orzad.is-ready .av-orzad__tor{animation:none;padding-inline:clamp(1rem,4vw,2.5rem)}
}

.av-opinia{display:flex;flex-direction:column;gap:.75rem;width:min(24rem,78vw);flex:none;
padding:1.6rem;background:var(--av-surface);border:var(--av-border-w) solid var(--av-line);
transition:border-color .25s ease}
.av-opinia:hover{border-color:var(--av-accent)}
.av-opinia__gora{display:flex;align-items:center;gap:.75rem}
.av-opinia__avatar{flex:none;width:44px;height:44px;border-radius:50%;overflow:hidden;display:grid;place-items:center;
background:var(--av-accent-soft);color:var(--av-accent-ink);font-family:var(--av-font-head);font-weight:800}
.av-opinia__avatar img,.av-opinia .grh-avatar{width:100%;height:100%;object-fit:cover;display:block}
.av-opinia .grh-avatar--initials{display:grid;place-items:center;background:var(--av-accent-soft);color:var(--av-accent-ink)}
.av-opinia__kto{display:grid;min-width:0;line-height:1.3}
.av-opinia__kto strong{font-size:1rem;color:var(--av-ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.av-opinia__kto span{font-size:.8rem;color:var(--av-ink-soft)}
.av-opinia__tekst{margin:0;flex:1}
.av-opinia__tekst p{margin:0;font-size:.95rem;line-height:1.62;color:var(--av-ink-soft)}
.av-opinia__stopka{display:flex;align-items:center;justify-content:space-between;gap:.75rem;
margin-top:auto;padding-top:1rem;border-top:var(--av-border-w) solid var(--av-line)}
.av-opinia__zrodlo{display:inline-flex;align-items:center;gap:.5rem;min-height:32px;font-size:.8rem;font-weight:600;
color:var(--av-ink-soft);text-decoration:none}
a.av-opinia__zrodlo:hover{color:var(--av-accent-ink)}
.av-opinia__more{flex:none;min-height:36px;padding:.4rem .8rem;background:none;border:1px solid var(--av-accent);
color:var(--av-accent-ink);font:700 .74rem/1 var(--av-font-body);letter-spacing:.06em;text-transform:uppercase;cursor:pointer;
transition:background .25s ease,color .25s ease}
.av-opinia__more:hover{background:var(--av-accent);color:var(--av-on-accent)}
.av-opinia__more:focus-visible{outline:3px solid rgba(var(--av-accent-rgb),.55);outline-offset:2px}

/* Okno z pelna opinia. display:none, gdy zamkniete - ukryte-ale-obecne okno
   potrafi zostac elementem LCP (_STANDARD/12 5.8 "Modale kradna LCP"). */
.av-omodal{position:fixed;inset:0;z-index:9999;display:none;place-items:center;padding:clamp(1rem,4vw,3rem)}
.av-omodal.is-open{display:grid}
.av-omodal__tlo{position:absolute;inset:0;background:rgba(var(--av-ink-rgb),.78)}
.av-omodal__okno{position:relative;z-index:1;width:min(38rem,100%);max-height:84vh;overflow-y:auto;
padding:clamp(1.75rem,1rem + 2.5vw,2.75rem);background:var(--av-surface);border-top:3px solid var(--av-accent);
box-shadow:0 24px 60px rgba(0,0,0,.35)}
.av-omodal__zamknij{position:absolute;top:.75rem;right:.75rem;width:44px;height:44px;display:grid;place-items:center;
border:0;background:var(--av-surface-dark);color:#fff;cursor:pointer}
.av-omodal__zamknij:hover{background:var(--av-accent);color:var(--av-on-accent)}
.av-omodal__glowa{padding:0 3rem 1rem 0;margin-bottom:1.25rem;border-bottom:var(--av-border-w) solid var(--av-line)}
.av-omodal__autor{margin:0;font-family:var(--av-font-head);font-size:1.5rem;font-weight:800;line-height:1.2;color:var(--av-ink)}
.av-omodal__meta{margin:.2rem 0 0;font-size:.82rem;color:var(--av-ink-soft)}
.av-omodal__gwiazdki{display:inline-flex;gap:2px;margin-top:.75rem;color:var(--av-accent)}
.av-omodal__tresc{margin:0;font-size:1.05rem;line-height:1.7;color:var(--av-ink-soft);white-space:pre-line}
.av-omodal__stopka{display:flex;flex-wrap:wrap;align-items:center;gap:1rem;margin-top:1.75rem;padding-top:1.25rem;
border-top:var(--av-border-w) solid var(--av-line)}
.av-omodal__google{font-size:.82rem;font-weight:600;color:var(--av-ink-soft);text-underline-offset:3px}
body.av-omodal-lock{overflow:hidden}

/* ---------- Wyceniarka z Adresometrem (tryb .av-wyc--ado) ----------
   Po lewej lekki opis i podglad strony raportu PDF z plakietka, po prawej
   widzet. Karta widzetu bez naszego paska i paddingu - widzet ma wlasny
   wyglad w Shadow DOM. min-height rezerwuje miejsce, zanim skrypt dojedzie. */
.av-wyc--ado .av-wyc{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);
grid-template-areas:"opis widzet" "raport widzet";grid-template-rows:auto 1fr;row-gap:0}
.av-wyc--ado .av-wyc__copy{grid-area:opis}
.av-wyc--ado .av-wyc__card{grid-area:widzet}
.av-wyc--ado .av-wyc__raportbox{grid-area:raport}
.av-wyc--ado .av-wyc__card{padding:0;background:transparent;box-shadow:none;border:0}
.av-wyc--ado .av-wyc__card::before{display:none}
/* Rezerwacja = zmierzona wysokosc widzetu Adresometru (21.09.2026): 807 px,
   ponizej ~560 px szerokosci widzet sklada sie w kolumne i ma ~1050 px.
   Za mala rezerwacja (bylo 540) = skok ukladu przy doczytaniu, a przy skoku
   do kotwicy ponizej wyceny cel uciekal o te roznice. */
.av-wyc__ado{position:relative;min-height:807px}
@media (max-width:559px){.av-wyc__ado{min-height:1050px}}
.av-wyc__ado-wait{position:absolute;inset:0;display:grid;place-items:center;margin:0;
background:var(--av-surface);border:var(--av-border-w) solid var(--av-line);color:var(--av-ink-soft);font-size:.92rem}
.av-wyc__ado.is-loaded .av-wyc__ado-wait{display:none}

.av-wyc__raport{position:relative;margin:1.75rem 0 0;width:min(100%,340px);
transform:rotate(-2.5deg);transform-origin:40% 60%}
.av-wyc__raport img{width:100%;height:auto;display:block;background:#fff;
border:var(--av-border-w) solid var(--av-line);box-shadow:0 18px 40px -18px rgba(var(--av-ink-rgb),.45)}
/* Makieta: kartka A4 narysowana CSS-em, dopoki klient nie da zrzutu raportu. */
.av-wyc__kartka{display:flex;flex-direction:column;gap:.55rem;aspect-ratio:210/297;padding:1.4rem 1.3rem;
background:#fff;border:var(--av-border-w) solid var(--av-line);box-shadow:0 18px 40px -18px rgba(var(--av-ink-rgb),.45)}
.av-wyc__kartka span{display:block;height:7px;background:var(--av-line);width:88%}
.av-wyc__kartka span:nth-child(4){width:70%}
.av-wyc__kartka span:nth-child(5){width:80%}
.av-wyc__kartka .av-wyc__kartka-logo{width:34%;height:12px;background:var(--av-accent)}
.av-wyc__kartka .av-wyc__kartka-cena{width:62%;height:26px;margin:.6rem 0 .4rem;background:var(--av-accent-soft);
border-left:4px solid var(--av-accent)}
.av-wyc__kartka .av-wyc__kartka-mapa{width:100%;height:auto;flex:1;margin:.5rem 0;
background:repeating-linear-gradient(45deg,var(--av-surface-alt) 0 10px,#fff 10px 20px);border:var(--av-border-w) solid var(--av-line)}
/* Plakietka nachodzi na prawa krawedz kartki: prowadzi wzrok do widzetu. */
.av-wyc__badge{position:absolute;right:-1.25rem;bottom:1.5rem;display:inline-flex;align-items:center;gap:.5rem;
padding:.6rem .95rem;background:var(--av-accent);color:var(--av-on-accent);
font-size:.85rem;font-weight:700;transform:rotate(2.5deg);box-shadow:0 10px 24px -10px rgba(var(--av-ink-rgb),.5)}
.av-wyc__badge svg{width:18px;height:18px;flex:none}
.av-wyc__note{margin:1.75rem 0 0;font-size:.8rem;line-height:1.5;color:var(--av-ink-soft);max-width:52ch}
/* Telefon: opis -> formularz -> podglad raportu (kolejnosc jak w HTML).
   Wczesniej duzy podglad stal przed formularzem i trzeba go bylo przewinac. */
@media (max-width:1040px){
  .av-wyc--ado .av-wyc{grid-template-columns:1fr;grid-template-areas:"opis" "widzet" "raport";row-gap:2rem}
  .av-wyc__raport{margin-inline:auto;width:min(78%,300px)}
}
@media (max-width:480px){
  .av-wyc__badge{right:-.5rem}
}

/* Stopka: e-mail w jednej linii. overflow-wrap:anywhere lamal adres na dwie
   linie, choc miejsca bylo dosc; kolumna kontaktu bierze tyle, ile potrzebuje
   najdluzsza pozycja (max-content).
   PIEC blokow od 1.1.0: marka, Sprzedaz, Obszar dzialania (linki do LP), Biuro,
   Kontakt. Przy sztywnych 4 kolumnach piaty blok (Kontakt) spadal samotnie do
   drugiego rzedu. Miedzy 901 a 1100 px piec kolumn sie nie miesci - marka idzie
   wtedy na cala szerokosc, a cztery kolumny pod nia. */
@media (min-width:1101px){
  .av-footer__grid{grid-template-columns:minmax(0,1.3fr) repeat(3,minmax(0,.7fr)) max-content}
}
@media (min-width:901px) and (max-width:1100px){
  .av-footer__grid{grid-template-columns:repeat(3,minmax(0,1fr)) max-content}
  .av-footer__brand{grid-column:1/-1}
}
.av-footer__contact a[href^="mailto:"]{overflow-wrap:normal;white-space:nowrap}

/* ---------- Przygotowanie: slider mieszkanie / dom / dzialka (1.6.3) ----------
   Jeden rzad zamiast trzech blokow. Karty stoja w jednej komorce siatki
   (grid-area 1/1), wiec wysokosc sceny = najwyzsza karta i nic nie skacze
   przy przelaczaniu. Wejscie: zdjecie odslania sie od prawej (clip-path)
   z lekkim przyblizeniem, tekst wjezdza z lewej element po elemencie.
   Kierunek wstecz (.is-back) odwraca oba ruchy. Bez JS (.is-ready brak)
   karty stoja jedna pod druga, zakladki i pasek sa hidden. */
.av-prep{position:relative}
.av-prep__stage{display:grid;gap:clamp(1.5rem,3vw,2.5rem)}
.av-prep__slide{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);
background:var(--av-surface);border:var(--av-border-w) solid var(--av-line);
box-shadow:0 24px 60px -36px rgba(var(--av-ink-rgb),.45);overflow:hidden}
.av-prep__copy{padding:clamp(1.5rem,3.2vw,2.75rem);display:flex;flex-direction:column;justify-content:center;gap:.2rem}
.av-prep__num{font-family:var(--av-font-head);font-weight:800;font-size:.85rem;letter-spacing:.12em;color:var(--av-accent-ink);margin-bottom:.6rem}
.av-prep__num em{font-style:normal;color:var(--av-ink-soft);opacity:.7}
.av-prep__copy .av-h3{margin:0 0 .75rem}
.av-prep__copy p{margin:0 0 1rem;color:var(--av-ink-soft);max-width:58ch}
.av-prep__copy .av-checks{margin:0}
.av-prep__media{position:relative;margin:0;min-height:100%;overflow:hidden;background:var(--av-surface-alt)}
.av-prep__media img{width:100%;height:100%;min-height:340px;object-fit:cover;display:block}

/* Zakladki: pigulki nad karta, aktywna wypelniona akcentem. */
.av-prep__tabs{display:flex;flex-wrap:wrap;gap:.6rem;margin:0 0 1.25rem}
.av-prep__tab{display:inline-flex;align-items:center;gap:.6rem;min-height:44px;padding:.55rem 1.1rem;cursor:pointer;
background:var(--av-surface);border:var(--av-border-w) solid var(--av-line);color:var(--av-ink);
font:600 .95rem/1 var(--av-font-body);transition:background var(--av-ease),color var(--av-ease),border-color var(--av-ease)}
.av-prep__tab-num{font-family:var(--av-font-head);font-weight:800;font-size:.75rem;letter-spacing:.1em;color:var(--av-accent-ink);transition:color var(--av-ease)}
.av-prep__tab:hover{border-color:var(--av-accent)}
.av-prep__tab.is-active{background:var(--av-surface-dark);border-color:var(--av-surface-dark);color:#fff}
.av-prep__tab.is-active .av-prep__tab-num{color:var(--av-accent)}
.av-prep__tab:focus-visible,.av-prep__arrow:focus-visible{outline:3px solid rgba(var(--av-accent-rgb),.55);outline-offset:2px}

/* Pasek pod karta: notka po lewej, licznik + postep + strzalki po prawej. */
.av-prep__bar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1rem 2rem;margin-top:1.25rem}
.av-prep__note{margin:0;max-width:62ch;font-size:.9rem;line-height:1.55;color:var(--av-ink-soft)}
.av-prep__nav{display:flex;align-items:center;gap:.75rem;margin-left:auto}
.av-prep__count{font-family:var(--av-font-head);font-size:.9rem;color:var(--av-ink-soft);min-width:4.2em}
.av-prep__count b{color:var(--av-ink);font-weight:800}
.av-prep__progress{position:relative;width:clamp(70px,9vw,120px);height:2px;background:var(--av-line);overflow:hidden}
.av-prep__progress i{position:absolute;inset:0 auto 0 0;width:var(--av-prep-p,33%);background:var(--av-accent);
transition:width .5s cubic-bezier(.65,0,.35,1)}
.av-prep__arrow{display:grid;place-items:center;width:52px;height:52px;padding:0;cursor:pointer;
background:var(--av-surface);border:var(--av-border-w) solid var(--av-line);color:var(--av-ink);
transition:background var(--av-ease),color var(--av-ease),border-color var(--av-ease),transform var(--av-ease)}
.av-prep__arrow:hover{border-color:var(--av-ink)}
.av-prep__arrow--next{background:var(--av-accent);border-color:var(--av-accent);color:var(--av-on-accent)}
.av-prep__arrow--next:hover{background:var(--av-surface-dark);border-color:var(--av-surface-dark);color:#fff}
.av-prep__arrow svg{transition:transform var(--av-ease)}
.av-prep__arrow:hover svg{transform:translateX(-3px)}
.av-prep__arrow--next:hover svg{transform:translateX(3px)}

/* Tryb slidera (JS dolozyl .is-ready). */
.av-prep.is-ready .av-prep__stage{display:grid;gap:0}
.av-prep.is-ready .av-prep__slide{grid-area:1/1;visibility:hidden;opacity:0;pointer-events:none;
transition:opacity .45s ease,visibility 0s linear .45s}
.av-prep.is-ready .av-prep__slide.is-active{visibility:visible;opacity:1;pointer-events:auto;z-index:1;
transition:opacity .2s ease,visibility 0s}
.av-prep.is-ready .av-prep__stage{touch-action:pan-y}

.av-prep.is-anim .av-prep__slide.is-active .av-prep__media{animation:av-prep-odslon .8s cubic-bezier(.77,0,.18,1) both}
.av-prep.is-anim .av-prep__slide.is-active .av-prep__media img{animation:av-prep-zoom 1.2s cubic-bezier(.22,1,.36,1) both}
.av-prep.is-anim .av-prep__slide.is-active .av-prep__copy > *{animation:av-prep-tekst .6s cubic-bezier(.22,1,.36,1) both}
.av-prep.is-anim .av-prep__slide.is-active .av-prep__copy > :nth-child(2){animation-delay:.07s}
.av-prep.is-anim .av-prep__slide.is-active .av-prep__copy > :nth-child(3){animation-delay:.14s}
.av-prep.is-anim .av-prep__slide.is-active .av-prep__copy > :nth-child(4){animation-delay:.21s}
.av-prep.is-back .av-prep__slide.is-active .av-prep__media{animation-name:av-prep-odslon-wstecz}
@keyframes av-prep-odslon{from{clip-path:inset(0 0 0 100%)}to{clip-path:inset(0 0 0 0)}}
@keyframes av-prep-odslon-wstecz{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}
@keyframes av-prep-zoom{from{transform:scale(1.12)}to{transform:scale(1)}}
@keyframes av-prep-tekst{from{opacity:0;transform:translateX(-28px)}to{opacity:1;transform:none}}

@media (max-width:900px){
  .av-prep__slide{grid-template-columns:1fr}
  .av-prep__media{order:-1}
  .av-prep__media img{min-height:0;aspect-ratio:3/2}
  .av-prep__copy p{font-size:.98rem;line-height:1.6}
  .av-prep__copy .av-checks li{font-size:.92rem}
  .av-prep__tabs{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin-inline:calc(var(--av-pad-x) * -1);padding-inline:var(--av-pad-x)}
  .av-prep__tabs::-webkit-scrollbar{display:none}
  .av-prep__tab{flex:none}
  .av-prep__nav{margin-left:0;width:100%}
  .av-prep__progress{flex:1}
}
@media (prefers-reduced-motion:reduce){
  .av-prep.is-anim .av-prep__slide.is-active .av-prep__media,
  .av-prep.is-anim .av-prep__slide.is-active .av-prep__media img,
  .av-prep.is-anim .av-prep__slide.is-active .av-prep__copy > *{animation:none}
  .av-prep__progress i,.av-prep.is-ready .av-prep__slide{transition:none}
}

/* ==========================================================================
   JASNA PALETA I MIEKKIE RAMKI (1.7.0)
   Prosba klienta 23.09.2026: "motyw kolorystyczny jaśniejszy, nie podoba im
   się taki kontrast - bardziej jak na ich stronie: efekt lustra i prześwity,
   jasne, ale nie nudne samo białe" oraz "ramki zdjęć z cieniem, żeby nie były
   tak ostre (tak jak mamy opinie)".
   Blok stoi na KONCU pliku celowo: nadpisuje wczesniejsze reguly sekcji.
   ========================================================================== */

/* --- 1. Sekcje "ciemne" jako jasna szyba -------------------------------
   Zamiast przepisywac kazda regule z .av-sec--dark, podmieniamy TOKENY
   w obrebie sekcji. Dzieki temu wszystkie istniejace reguly (color:
   var(--av-on-dark), background:var(--av-surface-dark), obramowania
   var(--av-line-dark)) same przelaczaja sie na wersje jasna i nic nie znika.
   Nie zamieniaj tego na recznie przepisane kolory - przy kazdej nowej
   sekcji trzeba by pamietac o obu wariantach. */
/* Poswiaty maja SRODKI WEWNATRZ sekcji, nie w rogach, a alfa siega zera
   na 72% promienia - dzieki temu widoczna plama konczy sie przed krawedzia
   i nie jest przez nia scinana. Srodek w rogu (np. "at 10% 0%") daje polowe
   elipsy ucieta linia sekcji i to wlasnie wygladalo jak blad. */
.av-sec--dark{
  --av-surface-dark:rgba(255,255,255,.66);
  --av-surface-dark-alt:rgba(255,255,255,.84);
  --av-on-dark:var(--av-ink);
  --av-on-dark-soft:var(--av-ink-soft);
  --av-line-dark:rgba(var(--av-ink-rgb),.13);
  color:var(--av-ink);
  background:
    radial-gradient(34% 40% at 26% 34%,rgba(var(--av-accent-rgb),.13) 0%,rgba(var(--av-accent-rgb),0) 72%),
    radial-gradient(30% 36% at 78% 70%,rgba(var(--av-accent-rgb),.11) 0%,rgba(var(--av-accent-rgb),0) 72%),
    linear-gradient(180deg,var(--av-surface-alt) 0%,#ffffff 55%,var(--av-surface-alt) 100%);
}
/* Zielen marki ma na bieli tylko 3,01:1, wiec jako TEKST idzie wersja
   przyciemniona (--av-accent-ink, patrz brand.json). */
.av-sec--dark .av-eyebrow{color:var(--av-accent-ink)}
.av-sec--dark .acc{color:var(--av-ink);
box-shadow:inset 0 -.42em 0 rgba(var(--av-accent-rgb),.35)}
.av-sec--dark .av-staging__figures dt{color:var(--av-accent-ink)}
.av-sec--dark .av-consult__gain-num,
.av-sec--dark .av-why__num{color:var(--av-accent-ink)}
/* Drobny tekst pisany akcentem. Na ciemnym tle markowa zielen wystarczala,
   na jasnej szybie ma tylko 3:1 - zmierzone na telefonie: plakietka
   "Dlaczego my" wychodzila 2,6:1. Tu i nizej idzie wersja przyciemniona. */
.av-sec--dark .av-why__badge,
.av-sec--dark .av-quote cite,
.av-sec--dark .av-why__media cite{color:var(--av-accent-ink)}
/* Siatki kafelkow rysowane ODSTEPEM 1 px na ciemnym tle kontenera: na jasnej
   szybie ta kreska czyta sie jako szara plama miedzy zaokraglonymi kaflami.
   Zamiast niej realny odstep i przezroczysty kontener. */
.av-sec--dark .av-why,
.av-sec--dark .av-why__grid,
.av-sec--dark .av-stats__grid,
.av-sec--dark .av-consult__gains{background:transparent;gap:clamp(.55rem,1.1vw,.9rem)}
.av-sec--dark .av-consult__gains{border-block:0}
/* Bez kart, tak jak "Dlaczego my" i minikarty w "O nas": pozycje siedza wprost
   na tle, rozdzielone zielonym akcentem przy lewej krawedzi. Numer idzie
   akcentem i jest wyrazniejszy, bo to on prowadzi wzrok w dol listy. */
.av-sec--dark .av-consult__gains li{background:none;box-shadow:none;border:0;
border-radius:0;border-left:3px solid var(--av-accent);
padding:.15rem 0 .15rem clamp(.9rem,1.6vw,1.2rem);
grid-template-columns:auto 1fr;gap:.85rem;align-items:baseline}
.av-sec--dark .av-consult__gain-num{font-size:.95rem;font-weight:800}
.av-sec--dark .av-stats__item{background:rgba(255,255,255,.78);border:0;
  border-radius:var(--av-radius);box-shadow:var(--av-cien-ramka)}
.av-sec--dark .av-stats__value{color:var(--av-accent-ink)}
.av-sec--dark .av-stats__icon{border-color:rgba(var(--av-accent-rgb),.45);
  color:var(--av-accent-ink);border-radius:var(--av-radius)}
.av-sec--dark .av-stats__label{color:var(--av-ink-soft)}
/* Lead nad liczbami ma miescic sie w JEDNYM wierszu na kompie (prosba klienta
   24.09.2026). Domyslne 64ch lamalo go po "w Bialymstoku". Ponizej 1041 px
   wraca zwykle zawijanie, bo na telefonie jeden wiersz i tak nie wchodzi. */
@media (min-width:1041px){
  .av-stats .av-lead{max-width:none;text-wrap:nowrap}
}
.av-sec--dark a.av-contact__v:hover{color:var(--av-accent-ink)}
/* Kafle w szybie: bez ostrej kreski, z delikatnym cieniem pod spodem. */
.av-sec--dark .av-why__item,
.av-sec--dark .av-consult__gains li{backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px)}
/* Przeswity: kafle i ramki w jasnych sekcjach biora zaokraglenie marki,
   zeby szyba czytala sie jak szklo, a nie jak wyciety prostokat. */
.av-frame,.av-about__foto,.av-why__media,.av-staging__media,.av-hero__photo{border-radius:var(--av-radius);overflow:hidden}
/* Ramki, z ktorych coś WYSTAJE, musza zostac nieprzyciete: przycisk telefonu
   w sekcji kontaktowej pod hero, WhatsApp na zdjeciu w kontakcie i plakietka
   przy konsultacji wychodza poza kadr. Z overflow:hidden byly ucinane krawedzia
   zdjecia. Zaokraglenie idzie wtedy na sam obrazek, nie na kontener. */
/* Promien MUSI byc tez na figurze, nie tylko na obrazku: --av-cien-ramka ma
   warstwe 0 0 0 1px, czyli cienki pierscien, a ten rysuje sie po ksztalcie
   FIGURY - bez promienia wychodzila z niego prosta ramka na zaokraglonym
   zdjeciu. overflow zostaje widoczny, bo z tych kadrow cos wystaje
   (przycisk telefonu, plakietka, WhatsApp). */
.av-lform__foto,.av-contact__photo,.av-consult__media{overflow:visible;
border-radius:var(--av-radius)}
.av-lform__foto img,.av-contact__photo img,.av-consult__media img{border-radius:var(--av-radius)}
/* Ikony profili siedza na jasnym zdjeciu, wiec musza byc ciemne, a nie
   bialo-przezroczyste jak na dawnym ciemnym tle. */
.av-sec--dark .av-contact__social a{background:rgba(var(--av-ink-rgb),.62);
color:#fff;border-color:transparent}
.av-sec--dark .av-contact__social a:hover{background:var(--av-accent);color:var(--av-on-accent)}
/* Przycisk "jasny kontur" na jasnym tle bylby niewidoczny. */
.av-sec--dark .av-btn--outline-light{color:var(--av-ink);border-color:rgba(var(--av-ink-rgb),.28)}
.av-sec--dark .av-btn--outline-light:hover{background:var(--av-ink);color:var(--av-surface)}

/* --- 2. Ramki zdjec: cien zamiast ostrej kreski ------------------------ */
/* Cien w skali z arka-nieruchomosci.pl: tam najczestszy to
   rgba(0,0,0,.094) 0 6px 13px - miekki i plytki, a nie dramatyczny.
   Wczesniejsza wersja (-32px rozrzutu, alfa .55) byla za ciezka na jasna
   palete i robila z kazdego zdjecia wyciety kafelek. */
:root{--av-cien-ramka:0 6px 13px rgba(var(--av-ink-rgb),.09),0 22px 40px -28px rgba(var(--av-ink-rgb),.26),0 0 0 1px rgba(var(--av-ink-rgb),.05)}
.av-frame,
.av-why__media,
.av-consult__media,
.av-contact__photo,
.av-staging__media,
.av-about__side .av-frame{border:0;box-shadow:var(--av-cien-ramka)}
/* Kwadrat akcentu wystajacy zza rogu byl najostrzejszym elementem tych
   kadrow - klient prosil wprost o zmiekczenie. */
.av-frame::before,
.av-why__media::before,
.av-consult__media::before{display:none}
.av-staging__media figcaption,
.av-frame figcaption{border-top:0}

/* O nas: zdjecie wraca do kolumny po PRAWEJ (prosba klienta 24.09.2026),
   ale w naturalnych proporcjach pliku. aspect-ratio:auto i height:auto SA tu
   konieczne: .av-frame img ustawia 4:3 z object-fit:cover, czyli ciecie -
   przy kadrze 5:4 scinalo glowy, przy 2,5:1 skrajne osoby. Zadnego twardego
   kadru w tej ramce: klient podmienia to zdjecie i kazda proporcja ma przejsc
   bez strat. */
.av-about__foto{margin:0}
.av-about__foto img{width:100%;height:auto;aspect-ratio:auto;object-fit:fill}

/* ---------- Zaokraglenia SPOJNIE (1.9.1) ----------
   Promien marki (--av-radius, 7 px z brand.json) dostaja WSZYSTKIE kafle,
   kadry, plakietki i pola, a nie tylko te, ktore akurat ruszalem. Wybiorcze
   zaokraglanie czytalo sie jak niedokonczona zmiana.
   Zmieniasz promien? Tylko w brand.json (layout.radius) - tutaj nie ma zadnej
   wartosci na sztywno. */
.av-opinia,
.av-why__item,
.av-minicard,
.av-steps__item,
.av-guarantee__item,
.av-consult__gains,
.av-exit__dialog,
/* .av-ctabar i .av-callbar celowo BEZ promienia: plywajace belki maja
   przylegac do krawedzi ekranu, a zaokraglony pasek na calej szerokosci
   wyglada jak odklejony kafelek (decyzja klienta 24.09.2026). */
.av-opinie__kom,
.av-stats__icon,
.av-sold__flag,
.av-ba__label,
.av-consult__badge{border-radius:var(--av-radius)}
/* Tabela porownania: promien na kontenerze, a przyciecie zdejmuje ostre rogi
   skrajnych komorek. Same komorki zostaja kwadratowe, inaczej siatka rozpada
   sie na oddzielne pastylki. */
.av-cmp{border-radius:var(--av-radius);overflow:hidden}
/* Awatary w opiniach sa okragle, bo to zdjecia twarzy z wizytowki Google. */
.grh-avatar{border-radius:50%;overflow:hidden}
.av-steps__media img{border-radius:inherit}
/* Pasek liczb w hero: zaokraglony, gdy stoi w kontenerze. Na telefonie idzie
   od krawedzi do krawedzi, wiec tam promien zostaje zerowy (regula wyzej). */
@media (min-width:1041px){
  .av-hero__staty{border-radius:var(--av-radius) var(--av-radius) 0 0;overflow:hidden}
}
/* Druga tura: kontenery, ktorych dzieci maja wlasne tlo i wychodzily ostrym
   rogiem poza zaokraglona ramke, oraz siatki rysowane odstepem 1 px. */
.av-opinia{overflow:hidden}
/* Siatki "O nas" i "Dlaczego my" BEZ promienia: odkad nie ma w nich kart,
   zaokraglenie kontenera lapie tylko skrajny kafel i wyglada na przypadek.
   Zaokraglamy to, co ma wlasne tlo, a nie samo rusztowanie. */
.av-process__contact,
.av-ba__frame{border-radius:var(--av-radius);overflow:hidden}
.av-ba__grip,
.av-wyc__badge,
.av-topbar__social a,
.av-marquee__item img{border-radius:var(--av-radius)}

/* ---------- Bez kart: "Dlaczego my" i minikarty w "O nas" (1.9.3) ----------
   Prosba klienta 24.09.2026: te dwie siatki maja siedziec WPROST na tle, a nie
   w bialych pudelkach. Zamiast kart rozdziela je zielony akcent przy lewej
   krawedzi - ten sam zabieg, co przy podpisie w "O nas" (.av-sign) i przy
   krokach procesu, wiec strona zostaje spojna.
   Skoro nie ma kart, nie ma tez czego zaokraglac: promien i cien schodza. */
.av-about__cards,
.av-sec--dark .av-why__grid{background:transparent;gap:clamp(1rem,2vw,1.6rem);margin-top:clamp(1.25rem,2.4vw,1.75rem)}
.av-minicard,
.av-sec--dark .av-why__item{background:none;box-shadow:none;border:0;border-radius:0;
padding:.2rem 0 .2rem clamp(.9rem,1.6vw,1.2rem);
border-left:3px solid var(--av-accent);
backdrop-filter:none;-webkit-backdrop-filter:none}
/* Plakietka przy DOLE kafla (margin-top:auto), zeby w jednym rzedzie wszystkie
   staly na tej samej wysokosci niezaleznie od dlugosci tekstu - poprawka
   klienta 30.09.2026 ("napisy na zielono sa nierowno"). Kafle w rzedzie
   rozciaga siatka, wiec auto ma skad brac miejsce. */
.av-sec--dark .av-why__badge{margin-top:auto;padding-top:.75rem}

/* Pas ze zdjeciem zespolu pod liczbami w "Doswiadczeniu". W naturalnych
   proporcjach pliku (2,5:1), wiec nic sie nie tnie, i POD trescia, a nie pod
   nia jako tlo - jako tlo naglowek i kafelki zaslanialy ludziom glowy. */
.av-stats__foto{margin:clamp(1.75rem,3.5vw,2.75rem) 0 0;
border-radius:var(--av-radius);overflow:hidden;box-shadow:var(--av-cien-ramka)}
.av-stats__foto img{width:100%;height:auto;display:block}

/* ---------- "Doswiadczenie" na zdjeciu (1.9.4) ----------
   Szeroki kadr zespolu (projekt-5, 1920x768) jest TLEM sekcji. Uklad musi
   omijac twarze, wiec jest rozpisany na pomiarach pliku, nie na oko:
     - ludzie zajmuja 20-83% szerokosci i 20-100% wysokosci kadru,
     - glowy siedza mniej wiecej w pasie 20-39% wysokosci,
     - gorne 20% pliku to samo tlo sesji.
   Stad: naglowek trzyma sie GORY (ma pod soba wolny pas), kafelki liczb
   dosuwaja sie do DOLU, a miedzy nimi zostaje odslonieta twarze.
   Wysokosc sekcji nie moze przekroczyc ~960 px przy 1440 px szerokosci:
   powyzej tego 'cover' skaluje kadr wysokoscia i zaczyna obcinac skrajne
   osoby po bokach (obliczone: 2,5H - 1440 > H, czyli H > 960). */
@media (min-width:1041px){
  .av-sec--photo.av-sec--jasna.av-stats{padding-block:0}
  .av-sec--photo.av-sec--jasna.av-stats > .av-wrap{
    min-height:min(720px,calc(100svh - var(--av-head-h)));
    display:flex;flex-direction:column;justify-content:space-between;
    padding-block:clamp(1.5rem,3vw,2.5rem) clamp(1.75rem,3.5vw,3rem)}
  .av-sec--photo.av-sec--jasna.av-stats .av-shead{margin-bottom:0}
}
/* Welon pionowy: kryjacy pod naglowkiem u gory, najslabszy w pasie twarzy,
   znow mocniejszy nisko, gdzie stoja kafelki. Dol gasnie do koloru, ktorym
   zaczyna sie Konsultacja, wiec przejscie miedzy sekcjami zostaje plynne. */
.av-sec--photo.av-sec--jasna.av-stats::after{background:
  linear-gradient(180deg,
    rgba(255,255,255,.93) 0%,rgba(255,255,255,.86) 15%,
    rgba(255,255,255,.5) 27%,rgba(255,255,255,.34) 44%,
    rgba(255,255,255,.58) 68%,rgba(255,255,255,.76) 92%,
    var(--av-surface-alt) 100%)}
/* Na telefonie kadr 2,5:1 nie ma szans: sekcja jest waska i wysoka, wiec
   'cover' skaluje go wysokoscia i pokazuje tylko srodkowe ~25% szerokosci -
   skrajne osoby wypadaja, a tresc i tak laduje na twarzach (zmierzone na
   390 px: ludzie poza kadrem, naglowek na glowach). Zdjecie znika, zostaje
   sama jasna szyba. Obrazek jest lazy, a ukryty kontener nie wyzwala
   obserwatora, wiec przegladarka go nie pobiera. */
@media (max-width:1040px){
  .av-sec--photo.av-sec--jasna.av-stats .av-sec__bg{display:none}
  .av-sec--photo.av-sec--jasna.av-stats::after{background:
    radial-gradient(34% 40% at 26% 34%,rgba(var(--av-accent-rgb),.18) 0%,rgba(var(--av-accent-rgb),0) 72%),
    radial-gradient(30% 36% at 78% 70%,rgba(var(--av-accent-rgb),.14) 0%,rgba(var(--av-accent-rgb),0) 72%),
    linear-gradient(180deg,var(--av-surface-alt) 0%,#ffffff 55%,var(--av-surface-alt) 100%)}
}

/* Delikatna zielona poswiata rowniez w "O nas" i "Kontakt i obsluga" - obie
   byly plaska biela miedzy sekcjami szklanymi (prosba klienta 24.09.2026).
   Alfa dwa razy nizsza niz w szybie: ma byc detal, nie tlo. Srodki elips leza
   WEWNATRZ sekcji, a alfa siega zera na 72% promienia, wiec krawedz sekcji
   niczego nie scina. */
#o-nas,
.av-lform{background:
  radial-gradient(34% 40% at 26% 34%,rgba(var(--av-accent-rgb),.07) 0%,rgba(var(--av-accent-rgb),0) 72%),
  radial-gradient(30% 36% at 78% 70%,rgba(var(--av-accent-rgb),.06) 0%,rgba(var(--av-accent-rgb),0) 72%),
  var(--av-surface)}

/* Na telefonie ramka i cien naleza do OBRAZKA, nie do figury. Regula musi byc
   na KONCU pliku: blok "ramki z cieniem" z 1.7.0 dokleja --av-cien-ramka do
   .av-contact__photo nizej, wiec nadpisanie w media query przy samej sekcji
   przegrywalo kolejnoscia i cien dalej obrysowywal ikonki oraz przycisk,
   ktore na telefonie wchodza pod zdjecie. */
@media (max-width:560px){
  .av-contact__photo{box-shadow:none;border:0;border-radius:0}
  .av-contact__photo img{border:0;border-radius:var(--av-radius);
  box-shadow:var(--av-cien-ramka)}
}

/* ==========================================================================
   WZORZEC 1.0.0 — elementy dopisane w tym motywie
   ========================================================================== */

/* ---------- Skos gornej krawedzi sekcji ----------
   Urozmaicenie w motywie, ktory ma ZEROWE zaokraglenia (brand.json -> layout).
   Sekcja wchodzi pod poprzednia o wysokosc skosu (ujemny margines) i dopiero
   clip-path odslania to, co pod spodem - dzieki temu w szparze widac poprzednia
   sekcje, a nie tlo strony. Gorny padding rosnie o te sama wartosc, zeby tresc
   nie wjechala w sciety naroznik.
   Wlaczane flaga features.skosy w brand.json; bez niej szablon nie doda klasy. */
.av-sec--skos{
  --av-skos:clamp(1.25rem,3vw,3.25rem);
  clip-path:polygon(0 var(--av-skos),100% 0,100% 100%,0 100%);
  margin-top:calc(var(--av-skos) * -1);
  padding-top:calc(var(--av-section-y) + var(--av-skos));
  position:relative;z-index:1}
@media (max-width:700px){
  /* Na waskim ekranie ten sam kat daje duzo wieksza wyrwe w pionie. */
  .av-sec--skos{--av-skos:clamp(.75rem,2.5vw,1.25rem)}
}

/* ---------- Pozostale uslugi + kontakt (1.1.0, dawna belka pod hero) ----------
   Grafit z zoltym akcentem: jedyny ciemny pas na jasnej stronie, wiec zatrzymuje
   wzrok miedzy "Jakoscia obslugi" a opiniami. Po lewej uslugi w kaflach z ikona,
   po prawej karta kontaktu. Zolc na grafice 11,41:1, biel 16,76:1. */
.av-uslugi{position:relative;background:var(--av-surface-dark);color:var(--av-on-dark);
border-top:4px solid var(--av-highlight);padding-block:clamp(2.5rem,5vw,4rem)}
.av-uslugi__in{display:grid;gap:clamp(1.75rem,3.5vw,3rem);grid-template-columns:minmax(0,1fr);align-items:center}
@media (min-width:961px){.av-uslugi__in{grid-template-columns:minmax(0,1.55fr) minmax(0,1fr)}}
.av-uslugi__eyebrow{margin:0 0 .5rem;font-size:.72rem;font-weight:700;letter-spacing:var(--av-tracking-eyebrow);
text-transform:uppercase;color:var(--av-highlight)}
.av-uslugi__tyt{margin:0 0 clamp(1.1rem,2.2vw,1.6rem);font-family:var(--av-font-head);font-weight:var(--av-head-weight);
font-size:clamp(1.45rem,2.6vw,2rem);line-height:1.15;letter-spacing:-.02em;color:var(--av-on-dark)}
.av-uslugi__lista{list-style:none;margin:0;padding:0;display:grid;gap:clamp(.6rem,1.2vw,.9rem);
grid-template-columns:repeat(2,minmax(0,1fr))}
.av-uslugi__poz{display:flex;align-items:flex-start;gap:.8rem;padding:clamp(.85rem,1.6vw,1.1rem);
background:rgba(255,255,255,.045);border:1px solid rgba(255,255,255,.09);border-left:3px solid var(--av-accent);
transition:background-color var(--av-ease),border-color var(--av-ease)}
.av-uslugi__poz:hover{background:rgba(255,255,255,.075);border-left-color:var(--av-highlight)}
.av-uslugi__poz .av-stats__icon{flex:none;width:40px;height:40px;border:0;background:rgba(var(--av-highlight-rgb),.14);
color:var(--av-highlight)}
.av-uslugi__poz .av-stats__icon svg{width:21px;height:21px}
.av-uslugi__tresc{display:flex;flex-direction:column;gap:.2rem;line-height:1.4}
.av-uslugi__tresc b{font-size:.98rem;font-weight:700;color:var(--av-on-dark)}
.av-uslugi__tresc span{font-size:.84rem;color:var(--av-on-dark-soft)}

.av-uslugi__kontakt{background:var(--av-surface);color:var(--av-ink);padding:clamp(1.35rem,2.6vw,2rem);
border-top:4px solid var(--av-accent);box-shadow:0 26px 50px -24px rgba(0,0,0,.6)}
.av-uslugi__k-tyt{margin:0 0 .4rem;font-family:var(--av-font-head);font-weight:var(--av-head-weight);
font-size:1.3rem;color:var(--av-ink)}
.av-uslugi__k-txt{margin:0 0 1.1rem;font-size:.92rem;line-height:1.55;color:var(--av-ink-soft)}
.av-uslugi__tel{display:flex;align-items:center;justify-content:center;gap:.6rem;width:100%;font-size:1.15rem}
.av-uslugi__tel svg{width:20px;height:20px;flex:none}
.av-uslugi__dane{list-style:none;margin:1.1rem 0 0;padding:0;display:grid;gap:.65rem}
.av-uslugi__dane li{display:flex;align-items:center;gap:.6rem;font-size:.92rem;color:var(--av-ink)}
.av-uslugi__dane svg{width:18px;height:18px;flex:none;color:var(--av-accent-ink)}
.av-uslugi__dane a{color:var(--av-ink);text-decoration:underline;text-decoration-color:rgba(var(--av-accent-rgb),.6);
text-underline-offset:.2em;overflow-wrap:anywhere}
.av-uslugi__dane a:hover{color:var(--av-accent-ink)}
@media (max-width:560px){.av-uslugi__lista{grid-template-columns:1fr}}

/* ---------- Mini-slider w karcie sprzedanej nieruchomosci ----------
   Nieaktywne ujecia chowamy przez display:none, zeby nie zajmowaly miejsca
   w kadrze karty. Transferu to samo w sobie NIE oszczedza - zmierzone
   30.09.2026: Chrome pobiera leniwy obraz ukryty przez display:none tak samo
   jak widoczny. Oszczednosc bierze sie stad, ze kolejne ujecia przychodza
   z serwera bez atrybutu src (template-parts/_mini-slider.php). */
.av-mini{position:relative;width:100%;height:100%;overflow:hidden}
.av-sold__media .av-mini{height:100%}
.av-mini__stage{position:relative;width:100%;height:100%}
.av-mini__slide{display:none;width:100%;height:100%}
.av-mini__slide.is-active{display:block}
.av-mini__slide img{display:block;width:100%;height:100%;object-fit:cover}
/* Delikatne wejscie nowego ujecia. Bez ruchu w osi, zeby nie walczylo
   z powiekszeniem zdjecia przy najechaniu na karte. */
@keyframes av-mini-wejscie{from{opacity:.55}to{opacity:1}}
.av-mini[data-av-mini] .av-mini__slide.is-active{animation:av-mini-wejscie .22s ease-out}
@media (prefers-reduced-motion:reduce){
  .av-mini[data-av-mini] .av-mini__slide.is-active{animation:none}
}

.av-mini__btn{position:absolute;top:50%;transform:translateY(-50%);z-index:3;
width:2.4rem;height:2.4rem;display:grid;place-items:center;
background:rgba(var(--av-ink-rgb),.55);color:#fff;border:0;cursor:pointer;
opacity:0;transition:opacity var(--av-ease),background-color var(--av-ease)}
.av-mini__btn svg{width:1.1rem;height:1.1rem}
.av-mini__btn--prev{left:0}
.av-mini__btn--next{right:0}
.av-mini__btn:hover{background:var(--av-accent);color:var(--av-on-accent)}
/* Strzalki wchodza przy najechaniu na kadr, ale fokus z klawiatury musi je
   pokazac zawsze - inaczej tabulator zatrzymuje sie na niewidocznym przycisku. */
.av-sold__media:hover .av-mini__btn,
.av-mini__btn:focus-visible{opacity:1}
@media (hover:none){
  .av-mini__btn{opacity:1;background:rgba(var(--av-ink-rgb),.45)}
}

/* Licznik "1/5" zamiast kropek: przy pieciu ujeciach i karcie szerokiej
   na 320 px kropki byly nieczytelne, a liczba mowi wprost, ile jeszcze jest. */
.av-mini__licznik{position:absolute;right:0;top:0;z-index:3;margin:0;
padding:.3rem .6rem;font-size:.72rem;font-weight:700;letter-spacing:.06em;
background:var(--av-highlight);color:var(--av-on-highlight)}
.av-mini--jedno .av-mini__licznik{display:none}

/* Plakietka SPRZEDANE musi zostac nad mini-sliderem. */
.av-sold__flag{z-index:4}

/* ---------- Sekcja ZESPOL (1.2.0): nagranie jako tlo prawej polowy ----------
   Sekcja nosi .av-sec--dark dla rytmu, ale blok "jasna szyba" zamienia jej
   tokeny na jasne - dlatego kolory welonu sa tu wpisane wprost (biel).
   Prawa polowa = .av-zespol__tlo: <video> z JS (z-index 1, nad ewentualnym plakatem). */
.av-zespol{position:relative;overflow:hidden;isolation:isolate}
.av-zespol__tlo{position:relative;background:#e9ebe6;overflow:hidden}
.av-zespol__plakat,.av-zespol__tlo video{position:absolute;inset:0;width:100%;height:100%;
object-fit:cover;object-position:center 45%;display:block}
.av-zespol__tlo video{z-index:1;opacity:0;transition:opacity .6s ease}
.av-zespol__tlo.is-gra video{opacity:1}
.av-zespol__in{position:relative;z-index:2}
.av-zespol__copy{min-width:0;max-width:560px}

@media (min-width:961px){
  /* Tlo zajmuje prawa polowe sekcji od gory do dolu (lacznie ze skosem). */
  .av-zespol__tlo{position:absolute;top:0;right:0;bottom:0;width:52%;z-index:0}
  /* Miekkie wejscie w biel od strony tekstu - bez twardej krawedzi wideo. */
  .av-zespol__tlo::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(90deg,#ffffff 0%,rgba(255,255,255,.55) 14%,rgba(255,255,255,0) 34%)}
  .av-zespol__copy{width:46%;max-width:none}
}
@media (max-width:960px){
  /* Telefon i tablet: nagranie NAD tekstem, kadr 4:5 (pion 9:16 przyciety od gory). */
  .av-zespol__tlo{aspect-ratio:4/5;max-height:72vh;width:100%;margin:0 0 clamp(1.5rem,5vw,2.25rem)}
  /* Nagranie od gornej krawedzi sekcji - bez pustego pasa paddingu nad nim. */
  .av-zespol{padding-top:0}
  .av-zespol.av-sec--skos{padding-top:0}
}

/* Przycisk startu (tylko tam, gdzie petla nie rusza sama). Dzwieku nie ma od 1.2.1. */
.av-zespol__start{position:absolute;left:50%;top:50%;z-index:3;transform:translate(-50%,-50%);
width:68px;height:68px;display:grid;place-items:center;border:0;cursor:pointer;
background:var(--av-accent);color:var(--av-on-accent);box-shadow:0 12px 30px -8px rgba(0,0,0,.5)}
.av-zespol__start svg{width:44%;height:44%;margin-left:6%}
.av-zespol__start:focus-visible{outline:3px solid #fff;outline-offset:3px}
.av-zespol__tlo.is-gra .av-zespol__start,.av-zespol__tlo.is-auto .av-zespol__start{display:none}

/* Lista agentow: nazwiska RAZEM, bez przypisania do twarzy (DO-POTWIERDZENIA poz. 13). */
.av-zespol__ludzie{margin:clamp(1.25rem,3vw,1.85rem) 0 0;padding:clamp(.9rem,2vw,1.15rem) clamp(1rem,2.5vw,1.35rem);
border-left:4px solid var(--av-lime,var(--av-accent));background:var(--av-surface);
box-shadow:0 .6rem 1.6rem rgba(var(--av-ink-rgb),.08)}
.av-zespol__ludzie-tyt{margin:0 0 .35rem;font-size:.72rem;font-weight:700;letter-spacing:var(--av-tracking-eyebrow);
text-transform:uppercase;color:var(--av-accent-ink)}
.av-zespol__ludzie-lista{margin:0;font-size:.92rem;line-height:1.7;color:var(--av-ink)}

/* ==========================================================================
   FILMY (1.1.0): telewizor z filmem, pod nim kafle 2x2, obok tekst i wyrozniki
   ========================================================================== */
.av-filmy__in{display:grid;gap:clamp(1.75rem,3.5vw,3rem);
grid-template-columns:minmax(0,1fr);grid-template-areas:"head" "media" "copy"}
@media (min-width:1041px){
  .av-filmy__in{grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr);
  grid-template-areas:"media head" "media copy";align-items:start;row-gap:0}
  /* Tekst przy gornej krawedzi telewizora, a nie wysrodkowany w kolumnie. */
  .av-filmy__head .av-shead{margin-bottom:1.25rem}
}
.av-filmy__head{grid-area:head;min-width:0}
.av-filmy__media{grid-area:media;min-width:0}
.av-filmy__copy{grid-area:copy;min-width:0}

/* --- Telewizor. Ramka i nozka to sam CSS, zerowe zaokraglenia jak w motywie. --- */
.av-tv{position:relative}
.av-tv__ramka{position:relative;background:linear-gradient(180deg,#24282a 0%,#141718 100%);
padding:clamp(6px,.9vw,11px) clamp(6px,.9vw,11px) clamp(16px,1.8vw,22px);
box-shadow:0 2px 0 rgba(255,255,255,.06) inset,0 34px 60px -28px rgba(var(--av-ink-rgb),.55)}
.av-tv__ekran{position:relative;aspect-ratio:16/9;overflow:hidden;background:#000}
/* Dioda w dolnej listwie: zielen marki, jedyny kolorowy detal ramki. */
.av-tv__led{position:absolute;right:clamp(10px,1.4vw,18px);bottom:clamp(6px,.7vw,9px);
width:6px;height:6px;background:var(--av-accent);box-shadow:0 0 6px var(--av-accent)}
.av-tv__noga{display:block;width:22%;height:clamp(8px,1vw,12px);margin:0 auto;
background:linear-gradient(180deg,#1b1f20,#2c3133)}
.av-tv__noga::after{content:"";display:block;width:170%;height:4px;margin-left:-35%;
transform:translateY(clamp(8px,1vw,12px));background:#1b1f20;
box-shadow:0 10px 18px -6px rgba(var(--av-ink-rgb),.45)}

/* --- Pozycja filmu (ekran i kafel uzywaja tego samego wezla .av-film). --- */
.av-film{position:absolute;inset:0}
.av-film__plakat,.av-film video,.av-film iframe{position:absolute;inset:0;width:100%;height:100%;
object-fit:cover;border:0;display:block}
.av-film video{background:#000}
/* Podpis: zolta plakietka marki w rogu (ciemny tekst, 11,41:1). */
.av-film__tyt{position:absolute;left:0;top:0;z-index:2;max-width:85%;
padding:.3rem .6rem;font-size:.72rem;font-weight:700;letter-spacing:.04em;line-height:1.3;
background:var(--av-highlight);color:var(--av-on-highlight)}
.av-tv__ekran .av-film__tyt{font-size:.8rem;padding:.4rem .75rem}

/* Duzy przycisk odtwarzania na ekranie: kwadrat w zieleni marki. */
.av-tv__play{position:absolute;left:50%;top:50%;z-index:3;transform:translate(-50%,-50%);
width:clamp(56px,6vw,76px);height:clamp(56px,6vw,76px);display:grid;place-items:center;
border:0;background:var(--av-accent);color:var(--av-on-accent);cursor:pointer;
box-shadow:0 12px 30px -8px rgba(0,0,0,.55);transition:transform var(--av-ease),background-color var(--av-ease)}
.av-tv__play svg{width:42%;height:42%;margin-left:6%}
.av-tv__play:hover{transform:translate(-50%,-50%) scale(1.06);background:var(--av-accent-dark)}
.av-tv__play:focus-visible{outline:3px solid #fff;outline-offset:3px}
.av-tv__ekran.is-gra .av-tv__play{display:none}

/* --- Kafle 2x2 --- */
.av-filmy__kafle{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
gap:clamp(.55rem,1vw,.85rem);margin:clamp(1.75rem,2.6vw,2.4rem) 0 0;padding:0;list-style:none}
.av-filmy__kafel{position:relative;display:block;width:100%;aspect-ratio:16/9;padding:0;border:0;
background:#111;cursor:pointer;overflow:hidden;
box-shadow:0 8px 20px -10px rgba(var(--av-ink-rgb),.45)}
.av-filmy__kafel .av-film__plakat{transition:transform .5s ease,filter .3s ease;filter:saturate(.92)}
.av-filmy__kafel:hover .av-film__plakat,.av-filmy__kafel:focus-visible .av-film__plakat{transform:scale(1.05);filter:none}
.av-filmy__kafel:focus-visible{outline:3px solid var(--av-accent);outline-offset:2px}
/* Lekkie przyciemnienie od dolu, zeby ikona i podpis czytaly sie na kazdym kadrze. */
.av-filmy__kafel::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
background:linear-gradient(180deg,rgba(0,0,0,0) 45%,rgba(0,0,0,.45) 100%)}
.av-filmy__kafel-play{position:absolute;right:.5rem;bottom:.5rem;z-index:2;width:30px;height:30px;
display:grid;place-items:center;background:rgba(255,255,255,.92);color:var(--av-ink);
transition:background-color var(--av-ease),color var(--av-ease)}
.av-filmy__kafel-play svg{width:15px;height:15px;margin-left:2px}
.av-filmy__kafel:hover .av-filmy__kafel-play{background:var(--av-accent);color:var(--av-on-accent)}
/* Zamiana: krotki blysk nowego filmu na ekranie i kafla, z ktorego przyszedl. */
@keyframes av-film-wejscie{from{opacity:.25}to{opacity:1}}
.av-film.is-wchodzi{animation:av-film-wejscie .35s ease-out}
@media (prefers-reduced-motion:reduce){
  .av-film.is-wchodzi{animation:none}
  .av-filmy__kafel .av-film__plakat{transition:none}
}

/* --- Wyrozniki po prawej --- */
.av-filmy__wyr{list-style:none;margin:1.5rem 0 0;padding:0;display:grid;gap:1.1rem}
.av-filmy__wyr li{display:grid;grid-template-columns:auto minmax(0,1fr);gap:.9rem;align-items:start}
.av-filmy__wyr-nr{display:grid;place-items:center;width:2.4rem;height:2.4rem;
font-family:var(--av-font-head);font-weight:var(--av-head-weight);font-size:.85rem;
background:var(--av-accent-soft);color:var(--av-accent-ink);border-left:3px solid var(--av-accent)}
.av-filmy__wyr strong{display:block;font-family:var(--av-font-head);font-size:1rem;color:var(--av-ink);margin-bottom:.15rem}
.av-filmy__wyr li span span{display:block;font-size:.92rem;line-height:1.55;color:var(--av-ink-soft)}
@media (max-width:700px){
  .av-filmy__kafel-play{width:26px;height:26px}
  .av-film__tyt{font-size:.64rem;padding:.22rem .45rem}
}
/* "Wlacz dzwiek" przy filmie startujacym bez dzwieku (komputer). */
.av-tv__dzwiek{position:absolute;right:.75rem;bottom:.75rem;z-index:3;display:inline-flex;align-items:center;gap:.45rem;
padding:.45rem .8rem;border:0;background:rgba(0,0,0,.62);color:#fff;font-size:.78rem;font-weight:600;cursor:pointer;
transition:background-color var(--av-ease)}
.av-tv__dzwiek svg{width:18px;height:18px}
.av-tv__dzwiek:hover{background:var(--av-accent);color:var(--av-on-accent)}
.av-tv__dzwiek:focus-visible{outline:3px solid #fff;outline-offset:2px}
.av-tv__dzwiek[hidden]{display:none}


/* ==========================================================================
   SPRZEDANE jak w kwadrat-warszawski (wzorzec 1.1.0)
   Blok wyzej skopiowany 1:1 z kwadrat-warszawski 1.17.5 (prosba uzytkownika
   02.10.2026). Ponizej tylko to, czego Kwadrat nie ma: mini-slider w karcie.
   ========================================================================== */
/* ---------- Portfolio: wstega zebata ----------
   Duze prostokaty biegna od lewej do prawej. Nieparzyste maja zdjecie u gory
   i opis pod spodem, parzyste odwrotnie: opis u gory, zdjecie pod nim.
   Dzieki stalej wysokosci sciezki zdjecie parzystej karty zaczyna sie dokladnie
   tam, gdzie konczy sie opis nieparzystej, wiec calosc zazebia sie w rytm. */
/* 38vw daje na 1440px trzy kadry, z ktorych trzeci jest ucinany krawedzia
   ekranu. To ucinanie jest celowe: mowi uzytkownikowi, ze wstega leci dalej. */
.av-slider--portfolio{--av-pf-media:380px;--av-pf-body:122px}
/* Naglowek portfolio siedzi blizej kadrow: domyslny odstep sekcji zostawial
   dziure, ktora rozbijala zwiazek miedzy tytulem a wstega. */
.av-slider--portfolio .av-slider__head{margin-bottom:clamp(.75rem,1.5vw,1.15rem)}
.av-slider--portfolio .av-slider__head .av-shead{margin-bottom:0}
.av-slider--portfolio .av-slider__track{
  align-items:stretch;
  height:calc(var(--av-pf-media) + var(--av-pf-body));
  gap:0;   /* zdjecia maja stykac sie bez przerw */
  /* Wstega ma biec od krawedzi do krawedzi, a nie konczyc sie na kontenerze.
     Naglowek sekcji zostaje w kolumnie tekstowej. */
  width:100vw;margin-left:calc(50% - 50vw);
  padding-inline:var(--av-pad-x);scroll-padding-inline:var(--av-pad-x)}
.av-slider--portfolio .av-sold__item{
  flex:0 0 clamp(320px,38vw,560px);
  display:flex;flex-direction:column;justify-content:flex-start;
  background:none;border:0;height:100%}
.av-slider--portfolio .av-sold__media{
  flex:none;height:var(--av-pf-media);border:0;outline:0;
  background:var(--av-surface-alt)}
.av-slider--portfolio .av-sold__media img{width:100%;height:100%;aspect-ratio:auto;object-fit:cover}
.av-slider--portfolio .av-sold__item:hover .av-sold__media img{transform:scale(1.03)}

/* Opis: miasto jako mala etykieta nad ulica. Plakietka SPRZEDANE jest juz
   na zdjeciu, wiec podpis nie powtarza tej informacji drugi raz. */
.av-slider--portfolio .av-sold__body{
  flex:none;height:var(--av-pf-body);border:0;
  padding:.95rem 1rem 0;display:flex;flex-direction:column-reverse;
  justify-content:flex-end;align-items:center;text-align:center;gap:.35rem;
  border-top:2px solid var(--av-accent)}
.av-slider--portfolio .av-sold__body .av-h4{
  margin:0;font-size:1.15rem;line-height:1.2;letter-spacing:-.015em}
.av-slider--portfolio .av-sold__meta{
  margin:0;font-size:.7rem;font-weight:700;letter-spacing:var(--av-tracking-eyebrow);
  text-transform:uppercase;color:var(--av-ink-soft)}

@media (max-width:700px){
  /* Na telefonie jeden kadr na ekran, na cala szerokosc: przy 78vw sasiednie
     zdjecie zaglada zza krawedzi i rozprasza. */
  .av-slider--portfolio{--av-pf-media:62vw;--av-pf-body:104px}
  .av-slider--portfolio .av-slider__track{padding-inline:0;scroll-padding-inline:0}
  .av-slider--portfolio .av-sold__item{flex-basis:100vw}
  .av-slider--portfolio .av-sold__body{padding-inline:var(--av-pad-x)}
}

/* Plakietka siada na dolnej krawedzi kadru, tej stykajacej sie z podpisem,
   dzieki czemu plakietka i podpis czytaja sie jako jeden blok. */
.av-slider--portfolio .av-sold__flag{
  left:50%;transform:translateX(-50%);top:auto;bottom:0;
  padding:.45rem 1.1rem;letter-spacing:.14em}
.av-slider--portfolio .av-sold__media img{transition:transform .5s ease}

/* Mini-slider wypelnia caly kadr wstegi (stala wysokosc --av-pf-media). */
.av-slider--portfolio .av-sold__media{overflow:hidden}
.av-slider--portfolio .av-mini{height:100%}
.av-slider--portfolio .av-mini__slide img{height:100%}
/* Plakietka SPRZEDANE siedzi u Kwadratu na dolnej krawedzi kadru; lupa
   lightboxa idzie wiec do prawego GORNEGO rogu, obok licznika "1/5". */
.av-slider--portfolio .av-sold__lupa{bottom:auto;top:.6rem;right:3.6rem}
.av-slider--portfolio .av-mini--jedno .av-sold__lupa{right:.6rem}
.av-slider--portfolio .av-mini__licznik{top:.6rem;right:.6rem;padding:.3rem .55rem}

/* ==========================================================================
   wzorzec 1.2.0: limonka #9ccb01 (linie, krawedzie) i wiecej zolci (plakietki
   na zdjeciach) - prosba uzytkownika 02.10.2026. Limonka NIE jest tekstem na
   jasnym tle (1,92:1); na grafice (stopka, uslugi) moze byc (8,74:1).
   ========================================================================== */
/* Linie i krawedzie kafli: limonka zamiast zieleni przyciskow - zielen zostaje
   dla rzeczy klikalnych, limonka dla struktury. */
.av-minicard,
.av-sec--dark .av-why__item{border-left-color:var(--av-lime)}
.av-filmy__wyr-nr{border-left-color:var(--av-lime);background:rgba(var(--av-lime-rgb),.16)}
.av-slider--portfolio .av-sold__body,
.av-sold__body{border-top-color:var(--av-lime)}
.av-uslugi__poz{border-left-color:var(--av-lime)}
.av-tv__led{background:var(--av-lime);box-shadow:0 0 6px var(--av-lime)}
/* Stopka (grafit): naglowki kolumn i hover linkow w limonce - tu jest tekstem, 8,74:1. */
.av-footer__h{color:var(--av-lime)}
.av-footer__col a:hover,.av-footer__contact a:hover{color:var(--av-lime)}

/* Zolc na zdjeciach. "Sprzedane" na zolto jak flagi ofert na stronie klientki
   (.ofe-flag{background:#fed03d} w ich style.css) - licznik ujec przechodzi
   wiec na limonke, zeby dwie plakietki na jednym kadrze sie nie zlewaly. */
.av-sold__flag{background:var(--av-highlight);color:var(--av-on-highlight)}
.av-mini__licznik{background:var(--av-lime);color:var(--av-on-lime)}
.av-consult__badge{background:var(--av-highlight);color:var(--av-on-highlight)}
.av-consult__badge::before{background:var(--av-on-highlight)}
/* W kontakcie plakietka zostaje u gory: lewy dolny rog zajmuje WhatsApp
   wychodzacy ze zdjecia, prawy dolny ikony profili (1.1.2). */
.av-about__foto .av-foto-badge{top:auto;bottom:0}

/* ---------- FAQ ciemne (1.2.0) ----------
   Zdjecie wnetrza (sypialnia przy Rynku) pod grafitowym welonem: mocniejszym
   w srodku, gdzie stoi lista, slabszym przy krawedziach, zeby wnetrze bylo
   widac. Lista dostaje wlasna polprzezroczysta plyte - tekst czyta sie na
   kazdym fragmencie zdjecia. Akcent: limonka (8,74:1 na grafice) przy
   otwartym pytaniu, zolty znacznik "+". */
.av-faq-ciemne{background:#14171a}
.av-faq-ciemne::after{background:
  radial-gradient(70% 85% at 50% 50%,rgba(14,17,15,.9) 0%,rgba(14,17,15,.78) 55%,rgba(14,17,15,.55) 100%)}
.av-faq-ciemne .av-sec__bg img{object-position:center 40%}
.av-faq-ciemne .av-eyebrow{color:var(--av-lime)}
.av-faq-ciemne .av-h2{color:#fff}
.av-faq-ciemne .av-faq__list{background:rgba(14,17,15,.6);border:1px solid rgba(255,255,255,.08);
border-top:3px solid var(--av-lime);padding:.25rem clamp(1rem,2.5vw,1.75rem)}
.av-faq-ciemne .av-faq__item{border-bottom:1px solid rgba(255,255,255,.12)}
.av-faq-ciemne .av-faq__item:last-child{border-bottom:0}
.av-faq-ciemne .av-faq__item summary{color:#fff;font-size:1.05rem}
.av-faq-ciemne .av-faq__item summary:hover,
.av-faq-ciemne .av-faq__item[open] summary{color:var(--av-lime)}
.av-faq-ciemne .av-faq__item summary::after{background-color:rgba(255,255,255,.1);color:#fff}
.av-faq-ciemne .av-faq__item summary:hover::after{background-color:rgba(255,255,255,.2)}
.av-faq-ciemne .av-faq__item[open] summary::after{background-color:var(--av-highlight);color:var(--av-on-highlight)}
.av-faq-ciemne .av-faq__a p{color:rgba(255,255,255,.86)}
.av-faq-ciemne .av-faq__item[open]{box-shadow:inset 3px 0 0 var(--av-lime);padding-left:.9rem;margin-left:-.9rem}

/* ---------- Uslugi: zdjecie na cala wysokosc sekcji (1.2.0) ----------
   Komputer: kolumna zdjecia (30%) od gory do dolu sekcji, wtopiona gradientem
   w grafit; tresc w drugiej kolumnie. Padding sekcji przechodzi do tresci,
   zeby zdjecie dotykalo obu krawedzi. Telefon: szeroki pas nad trescia. */
.av-uslugi--foto{padding-block:0;display:grid;grid-template-columns:minmax(0,1fr)}
/* Wysokosc z clamp, nie aspect-ratio + min-height: ta para przy 390 px wymuszala
   szerokosc 440 px (220 x 2) - ramka wychodzila poza ekran, a zdjecie sie nie ladowalo. */
.av-uslugi__foto{position:relative;overflow:hidden;width:100%;min-width:0;height:clamp(220px,52vw,380px)}
.av-uslugi__foto img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 22%}
.av-uslugi__foto::after{content:"";position:absolute;inset:0;
background:linear-gradient(180deg,rgba(0,42,58,0) 55%,var(--av-surface-dark) 100%)}
.av-uslugi--foto .av-uslugi__in{padding-block:clamp(1.75rem,5vw,3rem) clamp(2.5rem,5vw,4rem)}
@media (min-width:1101px){
  .av-uslugi--foto{grid-template-columns:minmax(0,30%) minmax(0,1fr)}
  .av-uslugi__foto{height:auto;min-height:100%}
  .av-uslugi__foto::after{background:linear-gradient(90deg,rgba(0,42,58,0) 84%,var(--av-surface-dark) 100%)}
  .av-uslugi--foto .av-uslugi__in{padding-block:clamp(2.75rem,5vw,4.25rem);margin:0;max-width:1000px;
  padding-inline:clamp(1.5rem,3vw,3rem)}
  .av-uslugi--foto .av-uslugi__in{grid-template-columns:minmax(0,1.45fr) minmax(0,1fr)}
}

/* ---------- wzorzec 1.2.1: Sprzedane po DWIE karty na widok ----------
   Prosba 02.10.2026: "odstepy miedzy kartami, po 2 na strone i strzalki
   przewijaja te 2 widoczne". Wstega Kwadratu (od krawedzi do krawedzi, karty
   na styk, trzecia ucieta) zastapiona torem w kolumnie tresci: dwie rowne
   karty z odstepem, strzalka przesuwa o cala pare (data-av-strony w main.js).
   Telefon: jedna karta na widok, ten sam odstep. */
.av-slider--dwa{--av-pf-media:clamp(240px,26vw,370px);--av-pf-body:66px;--av-pf-gap:clamp(1rem,2.4vw,2rem)}
.av-slider--dwa .av-slider__track{width:100%;margin-left:0;padding-inline:0;scroll-padding-inline:0;
  gap:var(--av-pf-gap);scroll-snap-type:x mandatory}
.av-slider--dwa .av-sold__item{flex:0 0 calc((100% - var(--av-pf-gap)) / 2);background:none}

/* 1.2.2: podpis jako cienka linijka POD zdjeciem, nie biala karta 122 px.
   Prosba 02.10.2026: "z lepsza gracja te podpisy, akcent na zdjecia, karty
   jakies wielkie". Ulica po lewej, miasto drobnymi wersalikami po prawej,
   miedzy nimi wloskowa linia; kreska w kolorach logo tylko pod ulica. */
.av-slider--dwa .av-sold__body{height:var(--av-pf-body);padding:.85rem 0 0;border-top:0;background:none;
  flex-direction:row;align-items:baseline;justify-content:flex-start;text-align:left;gap:.9rem}
.av-slider--dwa .av-sold__body .av-h4{order:1;flex:none;font-size:clamp(1.12rem,1.5vw,1.3rem);font-weight:650;letter-spacing:-.01em;
  padding-bottom:.3rem;background:linear-gradient(90deg,var(--av-highlight) 0 33.33%,var(--av-lime) 33.33% 66.66%,var(--av-accent) 66.66%) left bottom/34px 2px no-repeat}
.av-slider--dwa .av-sold__body::after{content:"";order:2;flex:1;height:1px;align-self:center;background:var(--av-line)}
.av-slider--dwa .av-sold__meta{order:3;flex:none;font-size:.76rem;letter-spacing:.16em;color:var(--av-ink-soft)}

/* Plakietka SPRZEDANE w lewym gornym rogu zdjecia, mniejsza - nie przecina
   kadru na dole i nie konkuruje z podpisem. */
.av-slider--dwa .av-sold__flag{left:0;top:0;bottom:auto;transform:none;
  padding:.38rem .75rem;font-size:.64rem;letter-spacing:.16em}
@media (max-width:700px){
  .av-slider--dwa{--av-pf-media:62vw;--av-pf-body:60px}
  .av-slider--dwa .av-sold__item{flex-basis:100%}
}

/* ==========================================================================
   wzorzec 1.2.1: trzy kolory logo jako akcent - zielen, limonka, zolc
   Prosba 02.10.2026: "wiecej i inaczej akcenty, te 3 kolory logo".
   Zasady kontrastu bez zmian: limonka i zolc na bieli tylko jako plama pod
   ciemnym tekstem albo kreska, nigdy jako kolor liter (1,92 i 1,47:1).
   ========================================================================== */
/* Podpis "klockow" z logo pod kazdym naglowkiem sekcji: zolty | limonka | zielony. */
.av-shead .av-h2::after{content:"";display:block;width:72px;height:6px;margin-top:clamp(.75rem,1.4vw,1rem);
background:linear-gradient(90deg,var(--av-highlight) 0 33.33%,var(--av-lime) 33.33% 66.66%,var(--av-accent) 66.66% 100%)}
.av-shead--center .av-h2::after{margin-inline:auto}

/* Wyroznienie w tekscie: zakreslacz zolty zamiast zielonego podkreslenia. */
.acc,.av-sec--dark .acc{box-shadow:inset 0 -.45em 0 rgba(var(--av-highlight-rgb),.7)}
.av-sec--photo:not(.av-sec--jasna) .acc,.av-parallax .acc,.av-footer .acc,.av-exit .acc,
.av-faq-ciemne .acc{color:var(--av-lime);box-shadow:none}

/* Kafle z kreska z lewej: kolory po kolei jak klocki w logo. */
.av-minicard:nth-child(3n+1),.av-sec--dark .av-why__item:nth-child(3n+1),.av-uslugi__poz:nth-child(3n+1){border-left-color:var(--av-accent)}
.av-minicard:nth-child(3n+2),.av-sec--dark .av-why__item:nth-child(3n+2),.av-uslugi__poz:nth-child(3n+2){border-left-color:var(--av-lime)}
.av-minicard:nth-child(3n),.av-sec--dark .av-why__item:nth-child(3n),.av-uslugi__poz:nth-child(3n){border-left-color:var(--av-highlight)}

/* ---------- Dwie drogi: jasniejsza zielen (limonka) po stronie biura ----------
   Prosba 02.10.2026: "w dwie drogi ten drugi jasniejszy zielony mozesz uzyc".
   Naglowek kolumny biura: limonka z ciemnym tekstem (8,96:1), flaga na zolto.
   Komorki biura: limonkowa plama i kreska; ptaszek w ciemnej zieleni (6,24:1). */
.av-cmp__th--win{background:var(--av-lime);color:var(--av-on-lime)}
.av-cmp__th--win .av-cmp__flag{align-self:flex-start;opacity:1;padding:.2rem .5rem;
background:var(--av-highlight);color:var(--av-on-highlight)}
.av-cmp__cell--win{background:rgba(var(--av-lime-rgb),.16);box-shadow:inset 4px 0 0 var(--av-lime)}
.av-cmp__cell--win .av-cmp__mark--yes{color:var(--av-accent-ink)}
.av-cmp{border-top:4px solid var(--av-lime)}
@media (max-width:860px){
  .av-cmp{border-top:0}
  .av-cmp__cell--win{background:rgba(var(--av-lime-rgb),.14);border-color:var(--av-lime);box-shadow:inset 4px 0 0 var(--av-lime)}
  .av-cmp__cell--win .av-cmp__who{color:var(--av-accent-ink)}
}

/* ---------- Jakosc obslugi: ikony w kolorach klockow z logo (1.2.2) ----------
   Prosba 02.10.2026: "lepsze kolory ikon". Zamiast grafitowego kafla z zielona
   ikona - kafle jak klocki logo: zolty, limonka, zielony, po kolei; znak ciemny
   (11,4 / 9,0 / 7,0:1 na tych tlach). Karta po najechaniu dostaje kreske
   w kolorze swojego klocka. */
.av-guarantee__item .av-stats__icon{border:0;color:var(--av-on-highlight);background:var(--av-highlight);
  box-shadow:6px 6px 0 rgba(var(--av-ink-rgb),.07)}
.av-guarantee__item:nth-child(3n+2) .av-stats__icon{background:var(--av-lime);color:var(--av-on-lime)}
.av-guarantee__item:nth-child(3n) .av-stats__icon{background:var(--av-accent);color:var(--av-on-accent)}
.av-guarantee__item .av-stats__icon svg{stroke-width:2}
.av-guarantee__item{border-top:3px solid transparent}
.av-guarantee__item:nth-child(3n+1):hover{border-color:var(--av-line);border-top-color:var(--av-highlight)}
.av-guarantee__item:nth-child(3n+2):hover{border-color:var(--av-line);border-top-color:var(--av-lime)}
.av-guarantee__item:nth-child(3n):hover{border-color:var(--av-line);border-top-color:var(--av-accent)}

/* ---------- Zespol nizszy, tekst szerzej (1.2.2) ----------
   Prosba 02.10.2026: "nie taka wysoka i szersza jak ten tekst, bo mocno
   rozciaga video i jest pikseloza". Nagranie z panelu ma 576x1024 px: przy
   tle na 52% szerokosci i sekcji wysokiej od waskiej kolumny tekstu bylo
   powiekszane ok. 1,3x (na ekranach 2x - 2,6x). Teraz tekst ma 58%, lista
   w dwoch kolumnach, wiec sekcja ma ok. 600-650 px, a kolumna nagrania 36%
   (do 520 px) - plik idzie w skali ponizej 1:1. Ostrzej bedzie z plikiem
   1080x1920 (patrz CHANGELOG 1.2.2). */
@media (min-width:961px){
  .av-zespol__tlo{width:min(36%,520px)}
  /* 1.2.9: przejscie w biel tylko na 8% - przy 26% gradient zjadal osobe po lewej
     (nagranie to panorama wzdluz zespolu, kazdy pasek obrazu sie liczy). */
  .av-zespol__tlo::after{background:linear-gradient(90deg,#ffffff 0%,rgba(255,255,255,0) 8%)}
  .av-zespol__copy{width:58%}
  .av-zespol .av-shead{max-width:none}
  .av-zespol .av-checks{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:clamp(1rem,2.4vw,2rem);margin-top:1rem}
  .av-zespol.av-sec,.av-zespol.av-sec--skos{padding-block:clamp(3rem,5vw,4.25rem)}
  .av-zespol .av-shead{margin-bottom:1rem}
  .av-zespol .av-prose p{margin-bottom:0}
  .av-zespol__ludzie{margin-top:1.1rem}
  .av-zespol .av-sec__actions{margin-top:1.25rem}
}

/* Zespol bez dolnego paddingu (1.2.3): sekcja konczy sie na tresci, wiec tlo
   z nagraniem nie jest wyzsze, niz musi - mniej przyciecia i powiekszenia
   pliku 576x1024. Oddech przejmuje sekcja pod spodem: lekki gorny padding
   zamiast pelnego --av-section-y (prosba 02.10.2026). */
.av-zespol.av-sec,.av-zespol.av-sec--skos{padding-bottom:0}
.av-zespol + .av-sec{padding-top:clamp(2rem,4vw,3rem)}
.av-zespol + .av-sec.av-sec--skos{padding-top:calc(clamp(2rem,4vw,3rem) + var(--av-skos))}

/* Gwiazdki ocen w zolci z logo (1.2.3, prosba 02.10.2026) - pasek opinii,
   karty opinii, formularz, stopka. To grafika obok liczby 4,8, nie jedyny
   nosnik informacji, wiec niski kontrast zolci na bieli tu nie przeszkadza. */
.av-stars,.av-review__stars,.av-form__proof .av-stars,.av-stars-row,.av-stars-grh{color:var(--av-highlight)}

/* Filmy: dwa przyciski pod kaflami, razem na cala szerokosc kolumny (1.2.6). */
.av-filmy__cta{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(.6rem,1.4vw,1rem);
  margin-top:clamp(1rem,2vw,1.4rem)}
.av-filmy__cta .av-btn{width:100%;justify-content:center;text-align:center;white-space:nowrap}
.av-filmy__tel{display:inline-flex;align-items:center;gap:.55rem}
.av-filmy__tel svg{flex:none;width:20px;height:20px}
@media (max-width:480px){.av-filmy__cta{grid-template-columns:minmax(0,1fr)}}

/* Logo w stopce na telefonie wysrodkowane (1.3.4). Imagify owija <img> w <picture>
   z display:contents, wiec margines musi dostac sam obraz, nie owijka. */
@media (max-width:700px){
  .av-footer__logo:not(picture),picture.av-footer__logo>img{margin-inline:auto}
}

/* Kontakt na telefonie (1.3.4): plakietka z adresem biura
   nachodzila na ikone Facebooka w prawym dolnym rogu zdjecia. Na telefonie
   jej nie ma (prosba 02.10.2026) - adres stoi i tak tuz obok w danych kontaktu. */
@media (max-width:700px){
  .av-contact__photo .av-foto-badge{display:none}
}

/* Wyroznione frazy w tekscie (.acc) - kursywa szeryfowa jak druga linia H1 (1.4.0).
   Zolty zakreslacz zostaje; waga 400 i 1.12em, bo kursywa ma nizszy x-height
   niz Poppins. Na zdjeciach/ciemnym tle kolor jak dotad (limonka). */
.acc,.av-prose .acc,.av-lead .acc{font-family:var(--av-font-serif,var(--av-font-head));
  font-style:italic;font-weight:400;font-size:1.12em;letter-spacing:0}

/* 1.4.1: wyroznienia wieksze i w tytulach sekcji (prosba 05.10.2026: "pochylone
   sa mniejsze i nieczytelne", "w tytule tez, np. wszystkie jej tajniki").
   Instrument Serif Italic ma x-height ok. 20% nizszy niz Poppins, wiec dopiero
   ok. 1,2-1,25em wyglada na rowny stopien z reszta zdania. */
.av-h2 .av-accent,.av-uslugi__tyt .av-accent{font-family:var(--av-font-serif,var(--av-font-head));
  font-style:italic;font-weight:400;font-size:1.2em;letter-spacing:0;line-height:1;color:var(--av-accent-dark)}
.av-faq-ciemne .av-h2 .av-accent,.av-uslugi__tyt .av-accent,.av-sec--photo:not(.av-sec--jasna) .av-h2 .av-accent{color:var(--av-lime)}
.acc,.av-prose .acc,.av-lead .acc{font-size:1.38em;line-height:1;
  box-shadow:inset 0 -.32em 0 rgba(var(--av-highlight-rgb),.65)}

/* Krok procesu bez zdjecia (_STANDARD/27 par. 6a pkt 15): bez tej reguly siatka
   rezerwuje kolumne 230 px na obraz i sciska tekst przy krawedzi. */
.av-steps__item:not(:has(.av-steps__media)){grid-template-columns:1fr}

/* ==========================================================================
   NESTRO 1.0.0 (z wzorca carbon-estate 1.4.1) - nadpisania palety i wyroznien
   ========================================================================== */
/* Wyroznione frazy: Figtree, bez kursywy; mietowy marker pod tekstem jak paski
   pod tytulem planszy klienta "Standardy naszego biura" (granat na miecie 10,31:1). */
.acc,.av-prose .acc,.av-lead .acc{font-family:var(--av-font-body);font-style:normal;font-weight:700;
  font-size:1em;line-height:inherit;letter-spacing:inherit;color:var(--av-ink);
  box-shadow:inset 0 -.5em 0 rgba(var(--av-highlight-rgb),.95)}
/* Na granacie i na zdjeciach: bialy tekst z czerwona kreska (marker mietowy
   zlewalby sie z jasnym tekstem). */
.av-sec--photo:not(.av-sec--jasna) .acc,.av-parallax .acc,.av-footer .acc,
.av-exit .acc,.av-faq-ciemne .acc,.av-hero--bg .acc{color:var(--av-on-dark);box-shadow:inset 0 -.16em 0 var(--av-lime)}
.av-h2 .av-accent,.av-uslugi__tyt .av-accent{font-family:var(--av-font-head);font-style:normal;font-weight:inherit;
  font-size:1em;line-height:inherit;letter-spacing:inherit;color:var(--av-lime)}
.av-faq-ciemne .av-h2 .av-accent,
.av-sec--photo:not(.av-sec--jasna) .av-h2 .av-accent{color:var(--av-highlight)}

/* Podpis pod naglowkami sekcji i pod podpisami kart: czerwien | mieta | granat
   (we wzorcu trzy klocki logo poprzedniego klienta). Na granacie trzeci odcinek
   bialy, inaczej znika. Uwaga: .av-sec--dark jest w tym motywie JASNA (wzorzec
   przemalowal ciemne sekcje), wiec reguly 'na granacie' tylko dla FAQ i zdjec. */
.av-shead .av-h2::after{background:linear-gradient(90deg,var(--av-lime) 0 33.33%,var(--av-highlight) 33.33% 66.66%,var(--av-ink) 66.66% 100%)}
.av-faq-ciemne .av-shead .av-h2::after{
  background:linear-gradient(90deg,var(--av-lime) 0 33.33%,var(--av-highlight) 33.33% 66.66%,#fff 66.66% 100%)}

/* Kafle z kreska z lewej: czerwien, mieta, granat po kolei. */
.av-minicard:nth-child(3n+1),.av-sec--dark .av-why__item:nth-child(3n+1){border-left-color:var(--av-lime)}
.av-minicard:nth-child(3n+2),.av-sec--dark .av-why__item:nth-child(3n+2){border-left-color:var(--av-highlight)}
.av-minicard:nth-child(3n),.av-sec--dark .av-why__item:nth-child(3n){border-left-color:var(--av-ink)}

/* Dwie drogi: kolumna biura w granacie z biala etykieta (15,08:1), flaga mietowa. */
.av-cmp__th--win{background:var(--av-surface-dark);color:var(--av-on-dark)}
.av-cmp__cell--win{background:rgba(var(--av-highlight-rgb),.35);box-shadow:inset 4px 0 0 var(--av-lime)}
.av-cmp{border-top-color:var(--av-lime)}
@media (max-width:860px){
  .av-cmp__cell--win{background:rgba(var(--av-highlight-rgb),.3);border-color:var(--av-lime)}
}

/* Gwiazdki: czerwien marki (grafika obok liczby, nie jedyny nosnik informacji). */
.av-stars,.av-review__stars,.av-form__proof .av-stars,.av-stars-row,.av-stars-grh{color:var(--av-lime)}

/* FAQ bez zdjecia w tle: plaski granat z ksiegi zamiast grafitu wzorca. */
.av-faq-ciemne{background:var(--av-surface-dark)}
.av-faq-ciemne::after{background:none}
.av-faq-ciemne .av-faq__list{background:rgba(255,255,255,.04);border-color:rgba(255,255,255,.1)}
.av-faq-ciemne .av-faq__item summary:hover,
.av-faq-ciemne .av-faq__item[open] summary{color:var(--av-highlight)}
.av-faq-ciemne .av-eyebrow{color:var(--av-highlight)}

/* Stopka (granat): naglowki kolumn w miecie - 10,31:1; czerwien marki na
   granacie ma 4,10:1, za malo na drobny tekst. */
.av-footer__h{color:var(--av-highlight)}
.av-footer__col a:hover,.av-footer__contact a:hover{color:var(--av-highlight)}
/* Logo w stopce: poziomy znak Nestro (2,65:1). */
.av-footer__logo{max-height:64px;width:auto}

/* Opinia spoza Google: podpis zrodla bez znaczka, drobniej. */
.av-opinia__zrodlo span:only-child{font-size:.78rem;color:var(--av-ink-soft)}


/* ==========================================================================
   CARBON ESTATE 1.1.0 - "premium"
   ========================================================================== */
/* --- Typografia sekcji: wieksze, ciasniejsze H2, spokojniejszy lead --- */
.av-h2{font-size:clamp(1.9rem,1.25rem + 2.2vw,3.05rem);line-height:1.08;letter-spacing:-.03em;font-weight:700}
.av-h3,.av-h4{letter-spacing:-.015em}
.av-lead{font-size:clamp(1.04rem,.98rem + .35vw,1.2rem);line-height:1.7}
.av-prose p{line-height:1.75}
.av-shead .av-h2::after{width:84px;height:5px;margin-top:clamp(1rem,1.6vw,1.3rem)}
.av-hero__staty b{letter-spacing:-.03em}

/* --- Sygnet w stopce (bialy, 5%) --- */
.av-footer{position:relative;overflow:hidden}
.av-footer::before{content:"";position:absolute;right:-4%;top:-10%;z-index:0;pointer-events:none;
  width:min(45vw,560px);aspect-ratio:540/497;opacity:.05;
  background:url(../img/brand/nestro-sygnet-jasny.svg) no-repeat center/contain}
.av-footer > *{position:relative;z-index:1}

/* --- Kroki procesu ze zdjeciami (grafiki czynnosci z Higgsfield, bez ludzi) --- */
.av-steps__media img{transition:transform .9s cubic-bezier(.2,.65,.3,1)}

/* --- Animacje (wzor: investpartner-cieszyn 1.1.0) ---
   Wszystko pod .av-anim (dokleja JS) albo na :hover: bez JS i przy
   "ogranicz ruch" strona jest statyczna i kompletna. Tylko opacity/transform -
   zero reflow, zero CLS. Formularze nie sa animowane. */
.av-anim [data-av-in]{opacity:0;transform:translate3d(0,22px,0);
  transition:opacity .8s cubic-bezier(.2,.65,.3,1) var(--av-d,0ms),transform .8s cubic-bezier(.2,.65,.3,1) var(--av-d,0ms)}
.av-anim [data-av-in].is-in{opacity:1;transform:none}

/* Hero: powolne przyblizenie zdjecia wlascicieli, raz. */
@keyframes av-kenburns{from{transform:scale(1.06)}to{transform:scale(1)}}
.av-hero__tlo img{animation:av-kenburns 14s cubic-bezier(.2,.6,.3,1) both;transform-origin:65% 35%}
/* Przerywnik: lekkie przyblizenie panoramy, gdy wjezdza na ekran. */
.av-anim .av-parallax__media img{transform:scale(1.08);transition:transform 2.4s cubic-bezier(.2,.6,.3,1)}
.av-anim .av-parallax.is-in .av-parallax__media img{transform:scale(1)}

/* Czerwona kreska przy nadtytule rysuje sie przy wejsciu sekcji. */
.av-anim [data-av-in] .av-eyebrow::after{transform:scaleX(0);transform-origin:left center;
  transition:transform .9s cubic-bezier(.2,.65,.3,1) calc(var(--av-d,0ms) + 250ms)}
.av-anim [data-av-in].is-in .av-eyebrow::after{transform:scaleX(1)}
/* Podpis w trzech kolorach pod H2 tez sie rysuje. */
.av-anim [data-av-in] .av-h2::after{transform:scaleX(0);transform-origin:left center;
  transition:transform .9s cubic-bezier(.2,.65,.3,1) calc(var(--av-d,0ms) + 350ms)}
.av-anim .av-shead--center[data-av-in] .av-h2::after{transform-origin:center}
.av-anim [data-av-in].is-in .av-h2::after{transform:scaleX(1)}

/* Czerwone przyciski: polysk, uniesienie i fala (1.2.0, wzor: freedom-michal-
   brodniewski 1.8.8 "PRZYCISKI CTA: HOVER I PULS").
   position przez :where() (zerowa specyficznosc): zwykle .av-btn--accent stal
   na koncu pliku i wygrywal z position:absolute przycisku WhatsApp w kontakcie,
   ktory wpadal pod zdjecie i zaslanial plakietke (1.1.2).
   Polysk siedzi na ::before i jedzie przesunieciem tla, nie transformem, wiec
   przycisk nie potrzebuje overflow:hidden (do 1.1.2 ::after + translateX),
   a ::after jest wolny na fale, ktora wychodzi poza obrys. Blysk biegnie tylko
   przy najechaniu, przy zjechaniu wraca bez animacji. Uniesienie i blysk tylko
   przy myszy: na telefonie :hover zostaje po dotknieciu i przycisk wisialby. */
:where(.av-btn--accent){position:relative}
.av-btn--accent{isolation:isolate;
  transition:background var(--av-ease),color var(--av-ease),border-color var(--av-ease),
  transform .25s cubic-bezier(.22,1,.36,1),box-shadow .25s ease}
.av-btn--accent::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;pointer-events:none;
  background:linear-gradient(105deg,transparent 40%,rgba(255,255,255,.3) 50%,transparent 60%) 150% 0/250% 100% no-repeat}
@media (hover:hover){
  .av-btn--accent:hover{transform:translateY(-2px);box-shadow:0 12px 24px -12px rgba(var(--av-accent-rgb),.8)}
  .av-btn--accent:hover::before{background-position:-50% 0;transition:background-position .85s cubic-bezier(.22,1,.36,1)}
  .av-btn--puls:hover::after{filter:opacity(0)}
}
.av-btn--accent:active{transform:none;box-shadow:none}
.av-btn--accent:disabled{transform:none;box-shadow:none;cursor:default}
.av-btn--accent:disabled::before{display:none}

/* Fala co 4 s tylko na dwoch najwazniejszych przyciskach (.av-btn--puls:
   "Kontakt" w naglowku i "Zadzwon teraz" w hero) - u Michala pulsowal kiedys
   kazdy przycisk i bylo tego za duzo. Wylacznie transform + opacity. Skale X/Y
   liczy main.js ("Fala na CTA"), zeby fala odchodzila o 12 px z kazdej strony.
   Po najechaniu i przy fokusie gasnie przez filter (opacity zajmuje animacja). */
.av-btn--puls::after{content:"";position:absolute;inset:calc(-1 * var(--av-border-w,1px));border-radius:inherit;pointer-events:none;
  box-shadow:0 0 0 2px rgba(var(--av-accent-rgb),.8),0 0 16px 3px rgba(var(--av-accent-rgb),.45);
  opacity:0;transition:filter .35s ease;animation:av-puls 4s cubic-bezier(.22,.61,.36,1) 1.2s infinite}
@keyframes av-puls{
  0%{transform:scale(1);opacity:0}
  6%{opacity:.85}
  45%,100%{transform:scale(var(--av-puls-sx,1.07),var(--av-puls-sy,1.45));opacity:0}
}
.av-btn--puls:focus-visible::after{filter:opacity(0)}
.av-btn--puls:disabled::after{animation:none}

/* Porownanie: znaki tak/nie "wskakuja" po wierszu. */
@keyframes av-pop{0%{transform:scale(0)}70%{transform:scale(1.25)}100%{transform:scale(1)}}
.av-anim .av-cmp__row .av-cmp__mark{transform:scale(0)}
.av-anim .av-cmp__row.is-in .av-cmp__mark{animation:av-pop .45s cubic-bezier(.3,1.4,.5,1) calc(var(--av-d,0ms) + 300ms) both}

/* FAQ: lagodne wejscie odpowiedzi (wysokosc animuje main.js). */
@keyframes av-fade-up{from{opacity:0;transform:translate3d(0,8px,0)}to{opacity:1;transform:none}}
.av-faq--js .av-faq__item[open] .av-faq__a{animation:av-fade-up .4s cubic-bezier(.2,.65,.3,1) .08s both}

@media (prefers-reduced-motion:reduce){
  .av-hero__tlo img,.av-faq--js .av-faq__item[open] .av-faq__a{animation:none}
  /* Selektory z ta sama specyficznoscia co reguly wyzej, inaczej przegrywaja
     (u Michala w 1.7.2 fala chodzila mimo "ogranicz ruch"). */
  .av-btn--puls::after{animation:none}
  .av-btn--accent::before{display:none}
  .av-btn--accent:hover{transform:none}
  .av-steps__media img{transition:none}
}

/* Plakietka "Wizualizacja" na przerywniku: prawy dolny rog, ponad warstwa zdjecia. */
.av-parallax>.av-viz{top:auto;left:auto;right:.8rem;bottom:.8rem;z-index:3}

/* ==========================================================================
   CARBON ESTATE 1.2.0 - ruch z freedom-michal-brodniewski 1.8.8
   Liczniki, naglowki spod maski, stos krokow z glebia, przechyl kafli.
   Stan "przed" wlaczaja klasy dodawane przez main.js ("Ruch 1.2.0"), wiec bez
   JS i przy "ogranicz ruch" strona stoi kompletna. Tylko transform/opacity.
   ========================================================================== */

/* --- Liczniki: domkniecie, gdy liczba dojdzie do wartosci koncowej.
   Reszta stylu licznika jest w critical.css (pasek liczb w hero). --- */
.av-count.is-done .av-count__num{animation:av-count-done .6s cubic-bezier(.22,1,.36,1)}
@keyframes av-count-done{0%{transform:scale(1.06)}100%{transform:none}}

/* --- Naglowki sekcji: slowa wjezdzaja spod maski ---
   Kazde slowo siedzi w masce (.av-rv, overflow:clip) i wjezdza od dolu,
   kaskadowo co 45 ms (--i = numer slowa). Maska ma zapas na polskie znaki nad
   i pod linia (Ś, Ż, ą, ę, y), oddany ujemnym marginesem: uklad bez zmian.
   Ten sam zapas na wewnetrznym slowie - gradient z background-clip:text maluje
   tylko wnetrze pudelka i ogonki wygladalyby na uciete (u Michala 1.8.6).
   Bez filter:blur - przerysowywal litery w kazdej klatce i drgaly (1.8.7). */
.av-rv{display:inline-block;vertical-align:top;overflow:clip;
  padding:.14em .05em .12em;margin:-.14em -.05em -.12em}
.av-rv__in{display:inline-block;padding:.14em .05em .12em;margin:-.14em -.05em -.12em}
/* Zanikanie: od pelnego koloru u gory do 68% krycia u dolu, liczone od
   currentColor (granat zanika w granacie, biel w bieli). Bez czerwonych
   wyroznien: czerwien na jasnym tle ma 3,6:1, przygaszona spadlaby ponizej
   3:1 dla duzego tekstu. Bez color-mix() przegladarka zostaje przy pelnym kolorze. */
@supports ((-webkit-background-clip:text) or (background-clip:text)) and (color:color-mix(in srgb,red 50%,blue)){
  .av-rv-h .av-rv__in{background-image:linear-gradient(180deg,currentColor 46%,color-mix(in srgb,currentColor 68%,transparent) 100%);
    -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
  .av-rv-h .av-accent .av-rv__in{background-image:none;-webkit-text-fill-color:currentColor}
}
.av-rv-h .av-rv__in{transform:translate3d(0,108%,0);opacity:0;
  transition:transform .9s cubic-bezier(.22,1,.36,1),opacity .7s ease;
  transition-delay:calc(min(var(--i,0),14) * 45ms)}
.av-rv-h.is-in .av-rv__in{transform:none;opacity:1}

/* --- Stos krokow "Jak dzialamy" z glebia ---
   Karty juz sa przyklejone (wyzej, "Proces: karty sklejaja sie w stos").
   --q z main.js = jak bardzo nastepna karta przykryla te (0..1): przykryta
   maleje od gornej krawedzi i ciemnieje (warstwa ::after, tylko opacity).
   "scale" to osobna wlasciwosc, wiec nie gryzie sie z transformem wejscia. */
.av-steps.is-stos .av-steps__item{transform-origin:50% 0;scale:calc(1 - var(--q,0) * .06)}
.av-steps.is-stos .av-steps__item::after{content:"";position:absolute;inset:0;z-index:3;border-radius:inherit;
  background:var(--av-ink);opacity:calc(var(--q,0) * .3);pointer-events:none}

/* --- Przechyl 3D za kursorem z odblaskiem (tylko mysz) ---
   Kafle "Dlaczego my" i "Standardy" sa w Carbonie plaskie (bez tla), wiec
   sam przechyl bylby ledwo widoczny: pod kursorem kafel staje sie biala karta
   z cieniem. Odblask mietowy (kolor marki) - bialy w soft-light, jak u Michala
   na granatowych kartach, na bialym znikalby. Odblask lezy POD tekstem
   (z-index:-1; kafel z transformem jest wlasnym kontekstem warstw, wiec nad
   jego tlem): nad tekstem rozjasnial litery w rogu kursora.
   Kafel przejmuje przechyl dopiero po swoim wejsciu: main.js zdejmuje wtedy
   data-av-in, bo regula wejscia (.av-anim [data-av-in].is-in{transform:none})
   ma wyzsza specyficznosc i trzymalaby kafel plasko. position przez :where(),
   zeby nie nadpisac innego pozycjonowania. */
:where(.av-tilt){position:relative}
.av-tilt{isolation:isolate}
.av-tilt{transform:perspective(1000px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));
  transition:transform .7s cubic-bezier(.2,.8,.2,1),box-shadow .45s,background-color .35s,border-color var(--av-ease)}
.av-tilt.is-tilt{transform:perspective(1000px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translateY(-2px);
  transition:transform .18s linear,box-shadow .35s,background-color .35s,border-color var(--av-ease);
  z-index:2;background-color:#fff;box-shadow:0 22px 40px -26px rgba(var(--av-ink-rgb),.38),0 0 0 1px rgba(var(--av-ink-rgb),.05)}
.av-blask{position:absolute;inset:0;z-index:-1;border-radius:inherit;pointer-events:none;opacity:0;transition:opacity .4s;
  background:radial-gradient(circle at var(--gx,50%) var(--gy,50%),rgba(var(--av-highlight-rgb),.55),rgba(var(--av-highlight-rgb),0) 55%)}
.av-tilt.is-tilt .av-blask{opacity:1}

@media (prefers-reduced-motion:reduce){
  .av-count.is-done .av-count__num{animation:none}
  .av-rv-h .av-rv__in{transform:none;opacity:1;transition:none}
  .av-tilt{transform:none!important}
}

/* ==========================================================================
   CARBON ESTATE 1.3.0 - premium minimalizm (pakiet 1, 2, 3, 4, 7, 8, 10, 11)
   Nadpisania na koncu pliku: ta sama specyficznosc wygrywa kolejnoscia.
   Zasady: (1) tlo sekcji biel / jasna szarosc z nuta miety na przemian, bez
   poswiat; (2) czerwien tylko do dzialania (przyciski) i w naglowkach,
   drobiazgi w granacie i miecie; (3) jeden styl ramek: cienka linia
   --av-cline, jeden cien, zerowe zaokraglenia z ksiegi znaku.
   ========================================================================== */
:root{--av-cline:rgba(var(--av-ink-rgb),.1);--av-cline-mocna:rgba(var(--av-ink-rgb),.2);
  /* Szalwia z miety marki na duze numery: 3,3:1 na bieli (prog dla duzego tekstu). */
  --av-szalwia:#6e8f7c}

/* --- 1. Tlo sekcji: bez rozowej mgly ---
   Poswiaty z wzorca (wombat) byly zielone; z czerwienia Carbona wyszly rozowe
   plamy w szesciu sekcjach. Rytm: hero szare, dalej biel i #F2F5F3 na zmiane,
   FAQ granatowe. Skosy (av-sec--skos) wreszcie widac - odslaniaja sasiada
   w innym kolorze. */
.av-lform,.av-sec--dark,#porownanie,#opinie,#informacje{background:#fff}
#o-nas,#zespol,#gwarancje,#biuro{background:var(--av-surface-alt)}

/* --- 2. Czerwien tylko do dzialania --- */
/* Nadtytuly: kreski granatowe, tekst szary we wszystkich jasnych sekcjach. */
.av-eyebrow::before,.av-eyebrow::after{background:var(--av-ink)}
.av-sec--dark .av-eyebrow,.av-sec--photo.av-sec--jasna .av-eyebrow{color:var(--av-ink-soft)}
/* Na granacie (FAQ, przerywnik, stopka) mieta - 11:1 na #002A3A. */
.av-faq-ciemne .av-eyebrow,.av-parallax .av-eyebrow{color:var(--av-highlight)}
.av-faq-ciemne .av-eyebrow::before,.av-faq-ciemne .av-eyebrow::after,
.av-parallax .av-eyebrow::before,.av-parallax .av-eyebrow::after{background:var(--av-highlight)}
.av-hero__staty{border-top-color:var(--av-ink)}
.av-checks li::before,.av-sec--dark .av-checks li::before,.av-checks--on-dark li::before{border-color:var(--av-ink)}
.av-lform__points svg{color:var(--av-ink)}
.av-sign{border-left:2px solid var(--av-ink)}
.av-why__media cite,.av-sec--dark .av-why__media cite{color:var(--av-ink-soft)}
.av-steps__num::after{background:var(--av-ink)}
/* Porownanie: ptaszek granatowy, krzyzyk szary - kolor niesie ksztalt znaku. */
.av-cmp__mark--yes,.av-cmp__cell--win .av-cmp__mark--yes{color:var(--av-ink)}
.av-cmp__mark--no{color:var(--av-ink-soft);opacity:1}
.av-cmp__cell--win{box-shadow:inset 2px 0 0 var(--av-ink)}
.av-cmp{border-top:0}
@media (max-width:860px){
  .av-cmp__cell--win{border-color:var(--av-cline-mocna);box-shadow:inset 2px 0 0 var(--av-ink)}
  .av-cmp__cell--win .av-cmp__who{color:var(--av-ink)}
  .av-cmp__cell--lose .av-cmp__who{color:var(--av-ink-soft)}
}
/* FAQ na granacie: otwarte pytanie w miecie zamiast czerwieni. */
.av-faq-ciemne .av-faq__item[open] summary{color:var(--av-highlight)}
.av-faq-ciemne .av-faq__item[open]{box-shadow:inset 2px 0 0 var(--av-highlight)}
.av-faq-ciemne .av-faq__list{border-top:1px solid rgba(255,255,255,.08)}
/* Stopka i przerywnik: naglowki kolumn, ikony i podkreslenia w miecie. */
.av-footer__h{color:var(--av-highlight)}
.av-footer__contact svg,.av-parallax__contact svg{color:var(--av-highlight)}
.av-footer__col a:hover,.av-footer__contact a:hover,.av-parallax__contact a:hover{color:var(--av-highlight)}
.av-parallax__contact a span{border-bottom-color:rgba(var(--av-highlight-rgb),.5)}
.av-parallax__contact a:hover span{border-color:var(--av-highlight)}
/* Gwiazdki: granat (sa tylko w podsumowaniu oceny, pkt 11). */
.av-stars,.av-review__stars,.av-form__proof .av-stars,.av-stars-row,.av-stars-grh,.av-omodal__gwiazdki{color:var(--av-ink)}
.av-omodal__gwiazdki[hidden]{display:none}

/* --- 3. Jeden styl ramek ---
   Kafle bez kolorowych krawedzi na przemian (czerwien/mieta/granat): jedna
   cienka linia u gory. Dotyczy "Dlaczego my", minikart w "O nas", listy
   w "Konsultacji", krokow procesu i listy agentow. */
.av-minicard,.av-minicard:nth-child(n),
.av-sec--dark .av-why__item,.av-sec--dark .av-why__item:nth-child(n){border-left:0;border-top:1px solid var(--av-cline)}
.av-minicard{padding:.9rem 0 0}
.av-sec--dark .av-consult__gains li{border-left:2px solid var(--av-cline-mocna)}
.av-sec--dark .av-consult__gain-num{color:var(--av-ink)}
.av-steps__item{border-left:var(--av-border-w) solid var(--av-line)}
.av-zespol__ludzie{border-left:0;border-top:1px solid var(--av-cline);background:none;box-shadow:none;
  padding:clamp(.9rem,2vw,1.15rem) 0 0}
.av-zespol__ludzie-tyt{color:var(--av-ink-soft)}

/* --- 4. Formularz pod hero: biala karta z miekkim cieniem ---
   Bez rozowej obwodki odsunietej o 12 px i bez rombu pod tytulem. Zostaje
   jedna plaska czerwona linia u gory: to karta dzialania. Ikony FB/IG schodza
   ze zdjecia - profile sa w kontakcie i w stopce. */
.av-lform__card.av-card{background:#fff;
  box-shadow:0 30px 60px -38px rgba(var(--av-ink-rgb),.45),0 0 0 1px var(--av-cline)}
.av-lform__card.av-card::before{height:2px;background:var(--av-accent)}
.av-lform__card.av-card::after,
.av-lform__card .av-card__title::before,.av-lform__card .av-card__title::after{display:none}
.av-lform__card .av-card__title{padding-bottom:0;margin-bottom:.35rem}
.av-lform__social{display:none}

/* --- 7. Dlaczego my: duzy jasny numer i jedna linia ---
   Stale wypelnienie (takze bez kursora), zeby przechyl z 1.2.0 nie przesuwal
   tresci, gdy kafel staje sie biala karta. Plakietka (STAN PRAWNY...) szara
   i drobna: powtarza tytul, wiec nie ma konkurowac z nim kolorem. */
.av-sec--dark .av-why__item{padding:clamp(1.1rem,2vw,1.4rem) clamp(1rem,1.8vw,1.25rem) clamp(1rem,1.8vw,1.25rem)}
.av-why__num,.av-sec--dark .av-why__num{font-family:var(--av-font-head);font-size:clamp(1.9rem,1.5rem + 1.2vw,2.5rem);
  font-weight:500;line-height:1;letter-spacing:-.03em;color:var(--av-szalwia);margin-bottom:.35rem}
.av-why__badge,.av-sec--dark .av-why__badge{color:var(--av-ink-soft);font-size:.64rem}

/* --- 10. Standardy biura: ilustracje, jeden styl, pasek bez ramki ---
   Karty biale na szarej sekcji, bez kolorowej kreski po najechaniu. Ilustracje
   3D (Higgsfield) maja czyste biale tlo - zlewaja sie z karta; multiply
   zjada ewentualna roznice o 1-2 odcienie. Bez ilustracji: ikona w jednym
   kolorze (mieta), a nie w trzech. */
.av-guarantee__item,.av-guarantee__item:nth-child(n){border:0;background:#fff;
  box-shadow:0 0 0 1px var(--av-cline)}
.av-guarantee__item:nth-child(n):hover{border-color:transparent}
.av-guarantee__item .av-stats__icon,.av-guarantee__item:nth-child(n) .av-stats__icon{background:var(--av-highlight);
  color:var(--av-ink);box-shadow:none}
.av-guarantee__img{width:clamp(120px,10vw,150px);margin:-.25rem auto .9rem}
.av-guarantee__img img{display:block;width:100%;height:auto;mix-blend-mode:multiply}
/* Pasek "Analiza · Strategia · ..." wygladal jak przycisk, ktorego nie da
   sie kliknac: teraz drobny tekst z kreskami jak nadtytul. */
.av-seal{display:flex;align-items:center;justify-content:center;gap:.9rem;max-width:none;
  margin:clamp(2rem,4vw,2.75rem) auto 0;padding:0;border:0;
  font-size:.72rem;font-weight:700;letter-spacing:var(--av-tracking-eyebrow);text-transform:uppercase;color:var(--av-ink-soft)}
.av-seal::before,.av-seal::after{content:"";width:26px;height:1px;background:var(--av-cline-mocna);flex:none}

/* --- 11. Opinie: lekki wiersz oceny, karty rowne, "Czytaj wiecej" jako link --- */
.av-opinie__pasek{background:none;color:var(--av-ink);box-shadow:none;
  border-block:1px solid var(--av-cline)}
.av-opinie__pasek::before{display:none}
.av-opinie__pasek--link:hover{transform:none;box-shadow:none}
.av-opinie__kom{border-right-color:var(--av-cline);padding-block:1.1rem}
.av-opinie__wynik strong{font-size:clamp(2rem,1.7rem + 1.2vw,2.6rem);margin-bottom:.3rem;color:var(--av-ink)}
.av-opinie__stat strong{color:var(--av-ink)}
.av-opinie__stat span{color:var(--av-ink-soft)}
.av-opinie__wszystkie{background:none;color:var(--av-ink);justify-content:flex-end}
.av-opinie__pasek--link:hover .av-opinie__wszystkie,
.av-opinie__pasek--link:focus-visible .av-opinie__wszystkie{background:none;color:var(--av-accent-ink)}
@media (max-width:1040px){
  .av-opinie__wynik{border-bottom-color:var(--av-cline)}
  .av-opinie__wszystkie{border-top-color:var(--av-cline);justify-content:space-between}
}
.av-opinia{box-shadow:0 0 0 1px var(--av-cline);border-color:transparent}
.av-opinia:hover{border-color:transparent;box-shadow:0 0 0 1px var(--av-cline-mocna),0 18px 34px -26px rgba(var(--av-ink-rgb),.35)}
.av-opinia__avatar--litera,.av-opinia .grh-avatar--initials{background:var(--av-highlight);color:var(--av-ink)}
.av-opinia__more{min-height:44px;padding:0;border:0;background:none;color:var(--av-ink);
  font:600 .82rem/1 var(--av-font-body);letter-spacing:0;text-transform:none;
  text-decoration:underline;text-decoration-color:var(--av-cline-mocna);text-underline-offset:.3em}
.av-opinia__more:hover{background:none;color:var(--av-accent-ink);text-decoration-color:currentColor}

/* --- 16. Przerywnik: zywa panorama ---
   Film lezy nad zdjeciem w tej samej warstwie (.av-parallax__media bywa
   position:fixed), z tym samym kadrowaniem, i wchodzi przenikaniem dopiero,
   gdy naprawde gra (.is-gra z main.js). Przyblizenie przy wejsciu sekcji
   identyczne jak na zdjeciu, wiec warstwy sie nie rozjezdzaja. Telefon
   i "ogranicz ruch": film schowany, zostaje zdjecie. */
.av-parallax__video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;
  opacity:0;transition:opacity 1.2s ease;pointer-events:none}
.av-parallax__video.is-gra{opacity:1}
.av-anim .av-parallax__media video{transform:scale(1.08);
  transition:transform 2.4s cubic-bezier(.2,.6,.3,1),opacity 1.2s ease}
.av-anim .av-parallax.is-in .av-parallax__media video{transform:scale(1)}
@media (max-width:1040px),(prefers-reduced-motion:reduce){.av-parallax__video{display:none}}

/* Fakty w belce oceny (1.3.7): liczby w jednej linii niezaleznie od dlugosci
   podpisu - "7 lat" (podpis w 1 linii) stalo nizej niz "700+" i "11" (2 linie). */
.av-opinie__stat{justify-content:flex-start}

/* ==========================================================================
   Zespol w wariancie szerokim (1.3.10, zespol.photo_szerokie)
   Zdjecie calego zespolu jest poziome (16:9, 10 osob w rzedzie). Pionowy pas
   po prawej (36% / 4:5) obcinal je do 3-4 osob ze srodka, wiec tu zdjecie
   stoi na szerokosc tresci w swoich proporcjach: desktop pod tekstem,
   telefon nad tekstem (3:2, kadr lekko w prawo - ludzie od 17% do 94% szerokosci).
   ========================================================================== */
.av-zespol--szerokie{display:flex;flex-direction:column}
.av-zespol--szerokie .av-zespol__tlo{position:relative;inset:auto;width:min(100% - 2 * var(--av-pad-x),var(--av-max));
  max-height:none;margin:0 auto;aspect-ratio:3/2;background:var(--av-surface-alt)}
.av-zespol--szerokie .av-zespol__tlo::after{display:none}
.av-zespol--szerokie .av-zespol__plakat{object-position:58% 50%}
@media (max-width:960px){
  .av-zespol--szerokie.av-sec{padding-top:var(--av-section-y)}
  .av-zespol--szerokie .av-zespol__tlo{margin-bottom:clamp(1.5rem,5vw,2.25rem)}
}
@media (min-width:961px){
  .av-zespol--szerokie .av-zespol__tlo{order:2;aspect-ratio:16/9;margin-top:clamp(2rem,4vw,3rem)}
  .av-zespol--szerokie.av-sec,.av-zespol--szerokie.av-sec--skos{padding-bottom:var(--av-section-y)}
  .av-zespol--szerokie + .av-sec{padding-top:var(--av-section-y)}
  .av-zespol--szerokie + .av-sec.av-sec--skos{padding-top:calc(var(--av-section-y) + var(--av-skos,0px))}
  /* Tekst w dwoch kolumnach: naglowek i opis po lewej, lista i agenci po prawej. */
  .av-zespol--szerokie .av-zespol__copy{width:100%;display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);
    column-gap:clamp(2rem,5vw,4.5rem);align-items:start}
  .av-zespol--szerokie .av-zespol__copy > *{grid-column:1}
  .av-zespol--szerokie .av-zespol__copy > .av-checks{grid-column:2;grid-row:1 / span 2;grid-template-columns:minmax(0,1fr);margin-top:0;align-self:end}
  .av-zespol--szerokie .av-zespol__copy > .av-zespol__ludzie{grid-column:2;grid-row:3;margin-top:1.1rem}
  .av-zespol--szerokie .av-zespol__copy > .av-sec__actions{grid-column:1;grid-row:3}
}

/* Dane administratora w stopce (1.4.1): drobno, nad paskiem praw autorskich. */
.av-footer__meta{padding-top:1.75rem;font-size:.76rem;line-height:1.6;color:var(--av-on-dark-soft)}
.av-footer__meta p{margin:0 0 .35rem}

/* ==========================================================================
   NESTRO 1.0.0 - Zespol z kartami osob (zespol.osoby, template-parts/zespol.php)
   Bez zdjecia/nagrania po prawej: tekst na pelna szerokosc, pod nim siatka
   portretow 4:5 (sesja klienta na jednolitym szarym tle). Wymiary obrazow
   w HTML-u + aspect-ratio na ramce = zero CLS.
   ========================================================================== */
.av-zespol--karty.av-sec,.av-zespol--karty.av-sec--skos{padding-bottom:var(--av-section-y)}
.av-zespol--karty + .av-sec{padding-top:var(--av-section-y)}
.av-zespol--karty + .av-sec.av-sec--skos{padding-top:calc(var(--av-section-y) + var(--av-skos,0px))}
@media (max-width:960px){.av-zespol--karty.av-sec,.av-zespol--karty.av-sec--skos{padding-top:var(--av-section-y)}}
.av-zespol--karty .av-zespol__copy{width:100%;max-width:none}
.av-zespol--karty .av-shead{max-width:760px}
.av-osoby{list-style:none;margin:clamp(1.5rem,3.5vw,2.5rem) 0 0;padding:0;display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(1rem,2.5vw,1.75rem)}
@media (max-width:1040px){.av-osoby{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:600px){.av-osoby{grid-template-columns:minmax(0,1fr)}}
.av-osoba{margin:0;padding:0;background:#fff;box-shadow:0 0 0 1px var(--av-cline)}
.av-osoba__foto{aspect-ratio:4/5;overflow:hidden;background:#d9d9d9}
.av-osoba__foto picture,.av-osoba__img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 20%}
.av-osoba__imie{margin:0;padding:1rem 1.1rem .2rem;font:700 1.2rem/1.25 var(--av-font-head);color:var(--av-ink)}
.av-osoba__rola{margin:0;padding:0 1.1rem 1.1rem;font-size:.86rem;line-height:1.5;color:var(--av-ink-soft)}
.av-osoba__imie::after{content:"";display:block;width:36px;height:3px;margin-top:.55rem;background:var(--av-lime)}
.av-zespol--karty .av-zespol__ludzie{max-width:560px}
/* Telefon: karta pozioma (portret 112 px z lewej), zeby trzy osoby nie
   zajmowaly trzech ekranow przewijania. */
@media (max-width:600px){
  .av-osoby{gap:.75rem}
  .av-osoba{display:grid;grid-template-columns:112px minmax(0,1fr);grid-template-rows:auto 1fr;align-items:start}
  .av-osoba__foto{grid-row:1 / span 2}
  .av-osoba__imie{padding:1rem 1rem .2rem;font-size:1.1rem}
  .av-osoba__rola{padding:0 1rem 1rem}
}

/* ==========================================================================
   NESTRO 1.0.0 - ruch i uklad z poprzednich stron floty (prosba 13.10.2026)
   1 slowa zapalane przewijaniem, 2 linia postepu + licznik krokow,
   4 talia kart "Dlaczego" na telefonie, A karta z cytatem na przerywniku,
   C karta CTA w stopce. Ruch tylko na transform/opacity, przy "ogranicz
   ruch" wszystko stoi kompletne.
   ========================================================================== */

/* --- 1. Slowa zapalane przewijaniem (wzor: freedom-michal-brodniewski 1.8.8) ---
   Klase .av-slowa i spany .av-slowo dokleja main.js - bez JS tekst jest pelny. */
.av-slowa .av-slowo{opacity:.18;transition:opacity .35s ease}
.av-slowa .av-slowo.is-on{opacity:1}
@media (prefers-reduced-motion:reduce){.av-slowa .av-slowo{opacity:1}}

/* --- 2. "Jak dzialamy": linia postepu (--av-prog 0..1 z main.js) ---
   Szara szyna i zielone wypelnienie po lewej stronie kart, tylko scaleY. */
.av-anim .av-steps{position:relative}
.av-anim .av-steps::before,.av-anim .av-steps::after{content:"";position:absolute;top:0;bottom:0;
  left:calc(-1 * clamp(.7rem,1.6vw,1.4rem));width:2px;pointer-events:none}
.av-anim .av-steps::before{background:var(--av-cline-mocna)}
.av-anim .av-steps::after{background:var(--av-lime);transform:scaleY(var(--av-prog,0));transform-origin:top}
@media (max-width:620px){.av-anim .av-steps::before,.av-anim .av-steps::after{left:-.55rem}}

/* Licznik "Krok 02 / 04" pod przyciskiem w przyklejonej kolumnie
   (wzor: investpartner-cieszyn 1.2.0). Tylko desktop - na telefonie kolumna
   nie jest przyklejona i licznik stalby nad kartami na "01". */
.av-process__now{margin-top:2rem;padding-top:1.5rem;border-top:1px solid var(--av-cline)}
.av-process__now p{margin:0}
.av-process__now-label{font-size:.7rem;font-weight:700;letter-spacing:var(--av-tracking-eyebrow);
  text-transform:uppercase;color:var(--av-ink-soft)}
.av-process__now-num{display:flex;align-items:baseline;gap:.55rem;margin-top:.25rem;
  font-family:var(--av-font-head);line-height:1}
.av-process__now-num b{font-weight:700;font-size:clamp(3.2rem,4.6vw,4.4rem);color:var(--av-lime);
  font-variant-numeric:lining-nums tabular-nums}
.av-process__now-num span{font-size:1.4rem;color:var(--av-ink-soft)}
.av-process__now-title{margin-top:.55rem;min-height:1.3em;font-family:var(--av-font-head);
  font-weight:700;font-size:1.3rem;line-height:1.3;color:var(--av-ink)}
.av-process__now-bar{display:flex;gap:6px;max-width:260px;margin-top:1.1rem}
.av-process__now-bar i{flex:1;height:3px;background:var(--av-cline-mocna);transition:background-color .35s ease}
.av-process__now-bar i.is-on{background:var(--av-lime)}
@keyframes av-now-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.av-process__now.is-swap .av-process__now-num b,
.av-process__now.is-swap .av-process__now-title{animation:av-now-in .4s cubic-bezier(.2,.65,.3,1) both}
@media (max-width:1040px){.av-process__now{display:none}}
@media (prefers-reduced-motion:reduce){
  .av-process__now.is-swap .av-process__now-num b,.av-process__now.is-swap .av-process__now-title{animation:none}
}

/* --- 4. Talia kart "Dlaczego Nestro" na telefonie (wzor: Brodniewski 1.8.8) ---
   Klasy dokleja main.js tylko na telefonie w pionie i bez "ogranicz ruch".
   Karty w jednej komorce siatki; pozycje, krycie i przyciemnienie ustawia
   skrypt. Jasna wersja: biale karty z cieniem na bialej sekcji. */
.av-why__talia{position:relative}
.av-why__talia-pin{position:sticky;top:80px}
.av-why__grid.is-talia{grid-template-columns:minmax(0,1fr);gap:0;padding-top:36px;isolation:isolate;background:none}
.av-why__grid.is-talia > .av-why__item,
.av-sec--dark .av-why__grid.is-talia > .av-why__item{grid-area:1/1;transform-origin:50% 0;will-change:transform,opacity;
  background:#fff;border-top:0;box-shadow:0 0 0 1px var(--av-cline),0 -12px 26px -18px rgba(var(--av-ink-rgb),.4)}
.av-why__grid.is-talia > .av-why__item::after{content:"";position:absolute;inset:0;
  background:var(--av-surface-alt);opacity:var(--talia-dim,0);pointer-events:none}
.av-why__kropki{position:relative;z-index:1;display:flex;justify-content:center;gap:.4rem;margin:1.1rem 0 0;padding:0;list-style:none}
.av-why__kropki li{width:6px;height:6px;background:var(--av-cline-mocna);
  transition:width .35s cubic-bezier(.22,1,.36,1),background-color .35s}
.av-why__kropki li.is-on{width:20px;background:var(--av-lime)}

/* --- A. Przerywnik z karta cytatu (inspiracja: szablon Cloe) ---
   Desktop: biala karta w lewym dolnym rogu zdjecia. Telefon: zdjecie pasem
   u gory, karta pod nim na cala szerokosc (bez nachodzenia na kadr). */
.av-parallax--karta{height:clamp(500px,72vh,640px);max-height:none;display:flex;align-items:flex-end}
.av-parallax--karta::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(20deg,rgba(var(--av-ink-rgb),.45) 0%,rgba(var(--av-ink-rgb),0) 55%)}
.av-parallax__karta-wrap{position:relative;z-index:2;width:100%;padding-bottom:clamp(1.5rem,4vw,3rem)}
.av-parallax__karta{margin:0;max-width:460px;padding:clamp(1.4rem,2.6vw,2rem);background:#fff;
  box-shadow:0 30px 60px -30px rgba(var(--av-ink-rgb),.55);border-top:3px solid var(--av-lime)}
.av-parallax__karta .av-eyebrow{margin:0 0 .9rem}
.av-parallax__cytat{margin:0}
.av-parallax__cytat p{margin:0;font-family:var(--av-font-head);font-weight:700;letter-spacing:-.015em;
  font-size:clamp(1.45rem,1.1rem + 1.2vw,2rem);line-height:1.2;color:var(--av-ink)}
.av-parallax__autor{margin-top:.9rem;font-size:.74rem;font-weight:700;letter-spacing:var(--av-tracking-eyebrow);
  text-transform:uppercase;color:var(--av-ink-soft)}
.av-parallax__karta-cta{display:flex;flex-wrap:wrap;align-items:center;gap:.6rem 1.2rem;margin:1.3rem 0 0}
.av-parallax__tel{font-family:var(--av-font-head);font-weight:700;font-size:1.05rem;color:var(--av-ink);
  text-decoration:none;border-bottom:2px solid rgba(var(--av-ink-rgb),.2);padding-bottom:.1rem}
.av-parallax__tel:hover{border-color:var(--av-lime);color:var(--av-accent-ink)}
@media (max-width:700px){
  .av-parallax--karta{height:auto;display:block;padding-top:min(62vw,300px);clip-path:none}
  .av-parallax--karta .av-parallax__media{position:absolute;inset:0 0 auto 0;height:min(62vw,300px)}
  .av-parallax--karta::before{display:none}
  .av-parallax__karta-wrap{padding:0}
  .av-parallax__karta{max-width:none;box-shadow:none}
}

/* --- C. Karta CTA w stopce (inspiracja: szablon Cloe) ---
   Ostatni blok siatki: --av-fcols = liczba kolumn z linkami (footer.php). */
@media (min-width:1101px){
  .av-footer__grid--karta{grid-template-columns:minmax(0,1.25fr) repeat(var(--av-fcols,2),minmax(0,.62fr)) minmax(0,1.05fr) minmax(250px,1fr)}
}
@media (min-width:901px) and (max-width:1100px){
  .av-footer__grid--karta .av-footer__karta{grid-column:1/-1}
}
.av-footer__karta{align-self:start;padding:1.5rem;background:var(--av-accent);color:#fff;
  border-top:3px solid var(--av-highlight)}
.av-footer__karta-tyt{margin:0 0 .5rem;font-family:var(--av-font-head);font-weight:700;font-size:1.3rem;
  line-height:1.2;color:#fff}
.av-footer__karta-txt{margin:0 0 1.1rem;font-size:.86rem;line-height:1.55;color:rgba(255,255,255,.86)}
.av-footer__karta-btn{display:inline-flex;align-items:center;gap:.55rem;padding:.7rem 1rem;
  background:#fff;color:var(--av-ink);text-decoration:none;font-size:.86rem;font-weight:600;
  transition:transform .25s cubic-bezier(.22,1,.36,1),box-shadow .25s}
.av-footer__karta-btn svg{width:18px;height:18px;flex:none;color:var(--av-accent)}
.av-footer__karta-btn b{font-family:var(--av-font-head);font-weight:700;white-space:nowrap}
@media (hover:hover){.av-footer__karta-btn:hover{transform:translateY(-2px);box-shadow:0 12px 22px -12px rgba(0,0,0,.5)}}
.av-footer__karta-link{display:inline-block;margin-top:.9rem;font-size:.82rem;color:#fff;
  text-decoration:underline;text-underline-offset:.25em;text-decoration-color:rgba(255,255,255,.45)}
.av-footer__karta-link:hover{text-decoration-color:#fff}
@media (max-width:900px){.av-footer__karta{text-align:center}}
/* Talia: transform liczy skrypt co klatke - przejscia z animacji wejscia i przechylu by go opoznialy. */
.av-why__grid.is-talia > .av-why__item{transition:none!important}
/* Karta cytatu stoi na bieli: nadtytul i jego kreski w szarym granacie, nie w jasnej zieleni z przerywnika. */
.av-parallax .av-parallax__karta .av-eyebrow{color:var(--av-ink-soft)}
.av-parallax .av-parallax__karta .av-eyebrow::before,.av-parallax .av-parallax__karta .av-eyebrow::after{background:var(--av-ink)}
/* Stopka z karta: adres lamie sie w kolumnie Kontakt, numer w przycisku karty w jednej linii z "Zadzwon". */
.av-footer__grid--karta .av-footer__contact a,.av-footer__grid--karta .av-footer__contact span{overflow-wrap:anywhere}
.av-footer__grid--karta .av-footer__contact a[href^="mailto:"]{overflow-wrap:normal;white-space:nowrap}

/* ==========================================================================
   NESTRO 1.1.1 - zdjecia w tle sekcji przykryte kolorem sekcji
   (template-parts/_tlo-sekcji.php, config tla.<id>; FAQ: images.faq_bg)
   Zdjecie to <img> pod welonem w kolorze sekcji: krem marki na jasnych
   (granat na kremie dalej > 12:1), granat na FAQ. Lazy, poza pierwszym ekranem.
   ========================================================================== */
.av-sec--tlo{position:relative;isolation:isolate}
.av-tlo{position:absolute;inset:0;z-index:-1;overflow:hidden;pointer-events:none}
.av-tlo picture,.av-tlo__img{display:block;width:100%;height:100%}
.av-tlo__img{object-fit:cover;object-position:var(--av-tlo-pos,center)}
.av-tlo::after{content:"";position:absolute;inset:0}
.av-sec--tlo-jasne .av-tlo::after{
  background:linear-gradient(180deg,rgba(249,251,230,.93) 0%,rgba(249,251,230,.84) 45%,rgba(249,251,230,.93) 100%)}
.av-sec--tlo-ciemne .av-tlo::after{background:linear-gradient(180deg,rgba(12,25,85,.9),rgba(9,26,56,.94))}
/* FAQ ze zdjeciem: granatowy welon zamiast plaskiego granatu (Carbon zdjal welon, bo tla nie bylo). */
.av-faq-ciemne.av-faq--foto::after{background:linear-gradient(180deg,rgba(12,25,85,.9) 0%,rgba(9,26,56,.86) 50%,rgba(9,26,56,.94) 100%)}
.av-faq-ciemne.av-faq--foto .av-sec__bg img{object-position:center 55%}

/* ==========================================================================
   NESTRO 1.1.1 - przerywnik z panorama: bez "przyklejenia do okna"
   Media w position:fixed (sztuczka na tlo stojace przy przewijaniu) z <video>
   i przyblizeniem na wierzchu szarpaly przy przewijaniu w Chrome (zgloszenie
   13.10.2026: "dziwnie sie trzesie"). Sam film jest stabilny - zmierzone:
   przesuniecie miedzy klatkami 0 px. Tu warstwa przewija sie razem ze strona,
   a ruch zostaje w filmie i w jednym lagodnym przyblizeniu przy wejsciu.
   ========================================================================== */
.av-parallax--karta{clip-path:none}
.av-parallax--karta .av-parallax__media{position:absolute;inset:0;transform:translateZ(0)}
@media (max-width:700px){.av-parallax--karta .av-parallax__media{inset:0 0 auto 0}}
.av-anim .av-parallax--karta .av-parallax__media img,
.av-anim .av-parallax--karta .av-parallax__media video{transform:scale(1.05);
  transition:transform 3s cubic-bezier(.2,.6,.3,1),opacity 1.2s ease}
.av-anim .av-parallax--karta.is-in .av-parallax__media img,
.av-anim .av-parallax--karta.is-in .av-parallax__media video{transform:scale(1)}
