/* 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. */
.av-frame img{width:100%;aspect-ratio:4/3;object-fit:cover}
.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: prosty plan (akordeon) ----------
Uklad z 1.8.0, wzorem zrzutu klienta: po lewej przyklejona kolumna
(naglowek, kafel z liczba krokow, CTA i kontakt), po prawej kroki jako
akordeon. Zwiniety krok to numer, nadtytul i tytul; zdjecie z opisem
pokazuja sie dopiero po rozwinieciu, wiec siedem krokow miesci sie
na jednym ekranie zamiast na trzech. Animacje wysokosci robi main.js
(data-av-acc*), ten sam mechanizm co w FAQ. */
.av-process{display:grid;grid-template-columns:minmax(0,.78fr) minmax(0,1.22fr);gap:clamp(2rem,4vw,3.5rem);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}
/* Kafel z liczba krokow: bialy na zielonym tle sekcji, zeby lewa kolumna
miala ciezar podobny do listy obok. Liczba idzie z PHP (liczba krokow
w configu), wiec po dodaniu kroku nic tu nie trzeba poprawiac. */
.av-process__count{margin-top:clamp(1.5rem,3vw,2.25rem);
padding:clamp(1.5rem,3vw,2.25rem);background:var(--av-surface)}
/* Liczba krokow i numery przy krokach ida KURSYWA SZERYFOWA (1.9.3, prosba
klienta): tym samym krojem, co wyrozniony fragment naglowka. Liczba przestaje
byc etykieta, a staje sie elementem typografii - i od razu widac, ze "07"
w kaflu i "01" przy kroku to ta sama rodzina znakow.
Fallback jak w .av-serif: bez wgranego kroju spada na krój naglowkow. */
.av-process__count-num{margin:0;font-family:var(--av-font-serif,var(--av-font-head));
font-style:italic;font-weight:400;
font-size:clamp(4.4rem,8.5vw,6.8rem);line-height:.82;letter-spacing:-.04em;color:var(--av-accent)}
.av-process__count-label{margin:.7rem 0 0;font-family:var(--av-font-head);
font-size:clamp(1.25rem,2.1vw,1.55rem);line-height:1.2;letter-spacing:-.015em;color:var(--av-ink)}
.av-process__count-label strong{display:block;font-weight:var(--av-head-weight)}
.av-process__count-text{margin:.9rem 0 0;font-size:.96rem;line-height:1.6;color:var(--av-ink-soft)}
.av-process__actions{margin-top:clamp(1.15rem,2.5vw,1.6rem)}
.av-process__actions .av-btn{width:100%}
.av-steps{display:grid;gap:0;margin:0;padding:0;list-style:none;
border-top:var(--av-border-w) solid var(--av-line)}
.av-steps__item{border-bottom:var(--av-border-w) solid var(--av-line)}
.av-steps__det{background:none;border:0}
.av-steps__sum{list-style:none;cursor:pointer;display:grid;
grid-template-columns:auto minmax(0,1fr) auto;align-items:center;
gap:clamp(1rem,2.5vw,1.75rem);padding:clamp(1.15rem,2vw,1.55rem) 0}
.av-steps__sum::-webkit-details-marker{display:none}
.av-steps__num{font-family:var(--av-font-serif,var(--av-font-head));
font-style:italic;font-weight:400;
font-size:clamp(1.45rem,2.8vw,2rem);line-height:1;letter-spacing:-.02em;color:var(--av-accent)}
.av-steps__heads{min-width:0}
.av-steps__label{display:block;font-size:.8rem;font-weight:600;line-height:1.35;
color:var(--av-ink-soft);margin-bottom:.15rem}
.av-steps__title{display:block;font-size:clamp(1.08rem,1.8vw,1.32rem);line-height:1.3;
color:var(--av-ink);transition:color var(--av-ease)}
/* Znacznik: cienki plus, ktory po otwarciu obraca sie w krzyzyk.
Cienszy niz w FAQ i bez podkladki - tutaj linijka kroku jest gestsza
(numer, nadtytul, tytul) i kwadrat z tlem przeciagalby na siebie wzrok. */
.av-steps__sum::after{content:"";width:22px;height:22px;color:var(--av-ink-soft);
background-image:linear-gradient(currentColor,currentColor),linear-gradient(currentColor,currentColor);
background-size:18px 1.5px,1.5px 18px;background-position:center,center;background-repeat:no-repeat;
transition:transform .3s cubic-bezier(.4,0,.2,1),color var(--av-ease)}
.av-steps__det[open] .av-steps__sum::after{transform:rotate(45deg);color:var(--av-accent)}
.av-steps__sum:hover .av-steps__title,.av-steps__det[open] .av-steps__title{color:var(--av-accent-ink)}
.av-steps__sum:focus-visible{outline:2px solid var(--av-accent);outline-offset:4px}
.av-steps__panel{overflow:hidden}
/* Tresc wciagnieta pod tytul, nie pod numer: rozwiniety krok czyta sie jako
ciag dalszy linijki, a nie jako osobny blok. */
.av-steps__inner{display:grid;grid-template-columns:minmax(0,260px) minmax(0,1fr);
gap:clamp(1rem,2.5vw,1.75rem);align-items:start;
padding:0 0 clamp(1.35rem,2.5vw,1.85rem) clamp(0rem,4.5vw,3.9rem)}
.av-steps__body p{margin:0;color:var(--av-ink-soft);line-height:1.65}
/* Druga linijka pod opisem: konkret, ktory ma sie czytac jako przypis do kroku,
a nie jako ciag dalszy zdania - stad mniejszy stopien i wyrazny odstep. */
/* Selektor dwuczlonowy, nie !important: regula ".av-steps__body p" wyzej ma
wieksza moc niz sama klasa i zerowalaby ten margines. */
.av-steps__body .av-steps__note{margin:.9rem 0 0;font-size:.84rem;line-height:1.55;
color:var(--av-ink-soft);opacity:.85}
@media (prefers-reduced-motion:reduce){
.av-steps__sum::after{transition:none}
}
@media (max-width:820px){
.av-steps__inner{grid-template-columns:1fr;padding-left:0}
.av-steps__sum{gap:.9rem}
}
/* ---------- 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}
.av-stats__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));
gap:1px;background:var(--av-line-dark);border:var(--av-border-w) solid var(--av-line-dark)}
.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:50% 0}
/* ---------- 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 ----------
Zadnych kart ani pudelek, tylko cienkie linie miedzy pytaniami i cienki
plus po prawej. Od 1.8.0 sekcja jest jasna (zrzut klienta 24.09), wczesniej
lista szla bialym tekstem po zdjeciu - przy dwoch kolumnach zdjecie robilo
sie tlem dla samego tekstu i tylko zabieralo kontrast. */
.av-faq__list{display:block;border-top:var(--av-border-w) solid var(--av-line)}
.av-faq__item{background:none;border:0;box-shadow:none;
border-bottom:var(--av-border-w) solid var(--av-line)}
.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:var(--av-ink);
transition:color var(--av-ease)}
.av-faq__item summary::-webkit-details-marker{display:none}
.av-faq__item summary:hover,.av-faq__item[open] summary{color:var(--av-accent-ink)}
.av-faq__item summary:focus-visible{outline:2px solid var(--av-accent);outline-offset:4px}
/* Znacznik: cienki plus, ktory po otwarciu obraca sie w krzyzyk. */
.av-faq__item summary::after{content:"";flex:none;margin-left:auto;
width:24px;height:24px;color:var(--av-ink-soft);
background-image:
linear-gradient(currentColor,currentColor),
linear-gradient(currentColor,currentColor);
background-size:19px 1.5px,1.5px 19px;
background-position:center,center;background-repeat:no-repeat;
transition:transform .3s cubic-bezier(.4,0,.2,1),color var(--av-ease)}
.av-faq__item[open] summary::after{transform:rotate(45deg);color:var(--av-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:var(--av-ink-soft);font-size:1rem;line-height:1.7}
.av-faq__a p:last-child{margin-bottom:0}
.av-faq__a strong{color:var(--av-ink)}
/* Bez JS panel jest po prostu widoczny, wiec tresc nigdy nie znika.
Klase wiesza main.js na korzeniu akordeonu (FAQ i proces). */
.av-acc--js [data-av-acc-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}
.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)}
/* ---------- 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)}
.av-footer__credits a{color:var(--av-accent)}
.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){
/* PASTYLKA Z NUMEREM w prawym dolnym rogu (1.9.0). Wczesniej byla tu belka
przez caly ekran z dwoma przyciskami - zajmowala 60 px na stale i dublowala
CTA z sekcji. Pastylka zaslania rog, a nie pas tresci.
Nie ma tu body{padding-bottom}: belka chowa sie, zanim stopka wejdzie na
ekran, a rezerwa zostawala po niej bialym pasem (poprawka z ARKI 1.6.5). */
.av-callbar{display:block;position:fixed;right:clamp(.75rem,3vw,1.25rem);
left:auto;z-index:120;
/* safe-area: na iPhonie z paskiem gestow dol ekranu zjada ~34 px i pastylka
siedziala na samej krawedzi, pod paskiem adresu Safari. */
bottom:calc(clamp(.75rem,3vw,1.25rem) + env(safe-area-inset-bottom,0px));
transform:translateY(calc(100% + 2rem));
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}
}
/* Rozmiar podniesiony w 1.9.5 (prosba klienta): pastylka lezy w rogu ekranu,
czyli tam, gdzie kciuk siega najlatwiej, ale tez tam, gdzie najlatwiej trafic
obok. Kolo z ikona ma teraz 50 px, czyli powyzej progu 48x48 z wytycznych
dostepnosci, a numer urosl do 1,18 rem. Wiekszy nie moze byc: pastylka
zaslania tresc, a przy szerokosci powyzej ~70% ekranu zaczyna wygladac jak
belka, od ktorej wlasnie odeszlismy. */
.av-callbar__pill{display:flex;align-items:center;gap:.8rem;
padding:.55rem 1.35rem .55rem .55rem;text-decoration:none;
background:var(--av-surface);color:var(--av-ink);
border-radius:999px;
/* Cien, nie obrys: pastylka lezy NA tresci strony i musi sie od niej odkleic
takze wtedy, gdy przewija sie pod nia biala sekcja. */
box-shadow:0 10px 30px rgba(var(--av-ink-rgb),.22),0 2px 6px rgba(var(--av-ink-rgb),.12)}
.av-callbar__icon{flex:none;display:grid;place-items:center;width:50px;height:50px;
border-radius:50%;background:var(--av-surface-dark);color:var(--av-on-dark)}
.av-callbar__icon svg{width:23px;height:23px}
.av-callbar__txt{display:block;min-width:0}
.av-callbar__txt em{display:block;font-style:normal;font-size:.72rem;font-weight:700;
letter-spacing:.08em;text-transform:uppercase;color:var(--av-ink-soft)}
.av-callbar__txt strong{display:block;font-family:var(--av-font-head);
font-weight:700;font-size:1.18rem;line-height:1.2;letter-spacing:-.01em;white-space:nowrap}
.av-callbar__pill:active{transform:translateY(1px)}
}
/* ---------- 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-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)}
/* ---------- Wolne terminy nad formularzem ---------- */
/* Wiersz, nie kafel z ramka: klient zobaczyl u siebie wersje w ramce
("tabelka") i nie przekonala go ani na telefonie, ani na Chrome. Zostaje
sama ikona i zdanie, w odstepie od naglowka karty - informacja, nie plakat.
Element jest hidden do czasu, az main.js policzy liczbe (patrz _slots.php). */
.av-slots{display:flex;align-items:center;gap:.55rem;
margin:0 0 1.1rem;font-size:.86rem;line-height:1.45;color:var(--av-ink-soft)}
.av-slots svg{flex:none;width:18px;height:18px;color:var(--av-accent-ink)}
.av-slots b{font-weight:700;color:var(--av-accent-ink)}
.av-slots[hidden]{display:none}
/* Podtytul karty ma wlasny margines na dol; wiersz o terminach idzie zaraz za
nim, wiec bez tego dociagniecia karta miala nad polami dwa odstepy naraz -
czyli dokladnie te pustke, ktora wlasnie zamykamy. */
.av-card__sub+.av-slots{margin-top:-.45rem}
/* ---------- Wyskakujace komunikaty ---------- */
/* Lewy dolny rog, czyli po przekatnej od pastylki z numerem - dwa plywajace
elementy w tym samym rogu zakrywalyby sie na telefonie.
z-index 115: pod pastylka (120), nad trescia strony. */
.av-proof{position:fixed;left:clamp(.75rem,3vw,1.25rem);z-index:115;
/* WYSOKO NAD DOLNA KRAWEDZIA, bo dol ekranu jest zajety: belka CTA ma okolo
80 px, a w lewym rogu siada plakietka zgod iubenda (1.9.4, zgloszenie
klienta - dymek wchodzil na jedno i drugie). 7 rem mija belke z zapasem
i zostawia miejsce na plakietke pod spodem. */
bottom:calc(7rem + env(safe-area-inset-bottom,0px));
display:flex;align-items:center;gap:.7rem;
max-width:min(340px,calc(100vw - 2rem));
padding:.7rem .95rem;
background:var(--av-surface);border:var(--av-border-w) solid var(--av-line);
box-shadow:0 12px 34px rgba(var(--av-ink-rgb),.16);
/* Wjazd od dolu z lekkim wyhamowaniem, tak jak pastylka. */
transform:translateY(calc(100% + 1.5rem));opacity:0;
transition:transform .4s cubic-bezier(.22,.61,.36,1),opacity .4s ease;
pointer-events:none}
.av-proof.is-visible{transform:none;opacity:1}
.av-proof[hidden]{display:none}
.av-proof__icon{flex:none;display:grid;place-items:center;width:32px;height:32px;
border-radius:50%;background:var(--av-accent-soft);color:var(--av-accent-ink)}
.av-proof__icon svg{width:17px;height:17px}
.av-proof__txt{min-width:0;font-size:.84rem;line-height:1.35;color:var(--av-ink-soft)}
.av-proof__txt strong{display:block;font-weight:650;color:var(--av-ink)}
.av-proof__time{flex:none;align-self:flex-start;font-size:.7rem;color:var(--av-ink-soft);opacity:.8;white-space:nowrap}
@media (max-width:900px){
/* Nad pastylka z numerem, nie obok niej: przy 360 px szerokosci oba elementy
w jednym pasie zachodza na siebie. Pastylka ma ~60 px i wlasny odstep od
krawedzi, wiec dymek startuje dopiero nad nia. */
.av-proof{right:clamp(.75rem,3vw,1.25rem);max-width:none;
bottom:calc(7.25rem + env(safe-area-inset-bottom,0px))}
}
@media (prefers-reduced-motion:reduce){
.av-proof{transition:opacity .2s ease;transform:none}
}
/* 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)}
/* Plakietka wpuszczona w kadr, a nie przyklejona do rogu (1.8.0, zrzut
klienta): biale pole na zdjeciu czyta sie jako pieczatka na realizacji,
nie jako etykieta systemowa. */
.av-sold__flag{position:absolute;top:.8rem;left:.8rem;padding:.4rem .9rem;
background:var(--av-surface);color:var(--av-ink);
font-size:.68rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase}
.av-sold__body{padding:1.15rem 1.25rem}
/* Linijka "rodzaj - miejscowosc" rozciagnieta na szerokosc karty: dwa konce
daja karcie os, po ktorej oko wchodzi w tytul. */
.av-sold__tags{display:flex;align-items:baseline;justify-content:space-between;gap:1rem;
margin:0 0 .6rem;padding-bottom:.6rem;border-bottom:var(--av-border-w) solid var(--av-line);
font-size:.7rem;font-weight:700;letter-spacing:var(--av-tracking-eyebrow);
text-transform:uppercase;color:var(--av-ink-soft)}
.av-sold__body .av-h4{margin:0 0 .35rem;font-size:1.15rem;line-height:1.25;letter-spacing:-.015em}
.av-sold__meta{margin:0;font-size:.9rem;color:var(--av-ink-soft)}
/* 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 (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:1px;background:var(--av-line-dark)}
.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}}
/* ---------- 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)}
@media (max-width:860px){
.av-cmp__thead{display:none}
.av-cmp__row{grid-template-columns:1fr}
.av-cmp__crit{padding-bottom:.35rem;background:var(--av-surface-alt)}
.av-cmp__row:nth-child(even){background:transparent}
.av-cmp__cell--win{box-shadow:inset 3px 0 0 var(--av-accent)}
.av-cmp__cell::before{font-size:.68rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
align-self:center;flex:none;width:3.2rem;color:var(--av-ink-soft)}
.av-cmp__cell--win::before{content:"Z NAMI";color:var(--av-ink-soft)}
.av-cmp__cell--lose::before{content:"SAM"}
}
/* ---------- Portfolio: karty realizacji ----------
Uklad z 1.8.0 (zrzut klienta 24.09): trzy osobne karty w suwaku, kadr
u gory, pod nim linijka "rodzaj - miejscowosc", tytul i wynik sprzedazy,
wszystko do lewej. Wczesniej byla wstega zebata przez cala szerokosc ekranu
(kadry stykaly sie bez przerw, podpisy wysrodkowane, parzyste karty
odwrocone). Czytala sie efektownie, ale klient pokazal uklad kart - a przy
wstedze nie ma gdzie postawic linijki z rodzajem i miejscowoscia. */
.av-slider--portfolio{--av-slide:clamp(280px,31%,380px)}
/* Naglowek portfolio siedzi blizej kadrow: domyslny odstep sekcji zostawial
dziure, ktora rozbijala zwiazek miedzy tytulem a kartami. */
.av-slider--portfolio .av-slider__head{margin-bottom:clamp(1.25rem,2.5vw,2rem)}
.av-slider--portfolio .av-slider__head .av-shead{margin-bottom:0}
.av-slider--portfolio .av-sold__item{background:none;border:0}
.av-slider--portfolio .av-sold__media{border:0;background:var(--av-surface-alt)}
.av-slider--portfolio .av-sold__media img{width:100%;aspect-ratio:4/3;object-fit:cover;
transition:transform .5s ease}
.av-slider--portfolio .av-sold__item:hover .av-sold__media img{transform:scale(1.03)}
.av-slider--portfolio .av-sold__body{padding:1rem 0 0}
/* Karta bez ramki: kreska nad linijka trzyma rytm i zastepuje krawedz. */
.av-slider--portfolio .av-sold__tags{padding:.7rem 0 0;margin-bottom:.5rem;
border-bottom:0;border-top:2px solid var(--av-accent)}
@media (max-width:700px){
/* Na telefonie jeden kadr z zapowiedzia nastepnego. */
.av-slider--portfolio{--av-slide:min(78vw,340px)}
}
/* ---------- 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 ---------- */
/* Belka przyklejona u dolu - uklad ze strony, ktora klient wygenerowal sam:
jasna plyta ODSUNIETA od krawedzi okna, po lewej obietnica w dwoch wierszach,
posrodku numer zwyklym linkiem, po prawej jeden przycisk i zamkniecie.
Wczesniej byla ciemna listwa na cala szerokosc z dwoma przyciskami obok
siebie - dzielily uwage po polowie.
Zaokraglenia zostaja na 0: referencja ma zaokraglone rogi, ale promien 0 to
swiadoma decyzja marki (brand.json -> layout), a klient jej nie cofal. */
.av-ctabar{position:fixed;left:0;right:0;bottom:0;z-index:110;
padding:0 clamp(.75rem,2vw,1.5rem) clamp(.75rem,2vw,1.5rem);
transform:translateY(120%);transition:transform var(--av-ease);
pointer-events:none}
.av-ctabar.is-visible{transform:translateY(0)}
.av-ctabar__in{pointer-events:auto;
display:flex;align-items:center;justify-content:space-between;
gap:clamp(1rem,2.5vw,2.25rem);flex-wrap:wrap;
width:min(100%,var(--av-max));margin-inline:auto;
padding:clamp(.85rem,1.6vw,1.15rem) clamp(1rem,2vw,1.6rem);
background:var(--av-surface);color:var(--av-ink);
border:var(--av-border-w) solid var(--av-line);
box-shadow:0 18px 44px -22px rgba(var(--av-ink-rgb),.45)}
/* Dwa wiersze: obietnica i warunek pod nia. */
.av-ctabar__msg{min-width:0;margin:0}
.av-ctabar__msg strong{display:block;font-family:var(--av-font-head);
font-weight:650;font-size:1.02rem;line-height:1.3;color:var(--av-ink)}
.av-ctabar__msg span{display:block;margin-top:.15rem;
font-size:.86rem;line-height:1.4;color:var(--av-ink-soft)}
.av-ctabar__actions{display:flex;align-items:center;gap:clamp(.75rem,1.6vw,1.25rem);flex-shrink:0}
/* Numer zwyklym linkiem, nie przyciskiem: belka ma prowadzic do jednego miejsca. */
.av-ctabar__tel{font-family:var(--av-font-head);font-weight:650;font-size:1.02rem;
white-space:nowrap;text-decoration:none;color:var(--av-ink);
padding:.4rem .2rem;transition:color var(--av-ease)}
.av-ctabar__tel:hover{color:var(--av-accent-ink);text-decoration:underline}
.av-ctabar .av-btn{min-height:46px;padding:.65rem 1.3rem;font-size:.92rem;white-space:nowrap}
/* Przycisk tylko z ikona, w zieleni WhatsAppa: znak rozpoznawalny bez podpisu.
Selektor podwojny, bo ".av-ctabar .av-btn" wyzej ustawia padding i przy
pojedynczej klasie zostawalo na ikone kilka pikseli. */
.av-ctabar .av-ctabar__wa{display:inline-flex;align-items:center;justify-content:center;
width:46px;min-height:46px;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:24px;height:24px}
/* Krzyzyk zielenia Polnocy (Green 04), nie szaroscia (1.9.1, uwaga klienta).
Belka ma BIALE tlo, a krzyzyk dziedziczyl kolor z czasow, gdy byla ciemna:
--av-on-dark-soft przy 65% krycia dawalo na bieli okolo 1,2:1, czyli ksztalt,
ktorego praktycznie nie widac. Green 04 ma 6,27:1 i przy okazji mowi, ze to
element tej samej marki, co przycisk obok. */
.av-ctabar__close{flex:none;display:grid;place-items:center;width:38px;height:38px;
background:none;border:0;cursor:pointer;color:var(--av-accent-ink);
transition:color var(--av-ease),background var(--av-ease)}
.av-ctabar__close:hover{color:var(--av-accent-dark);background:var(--av-accent-soft)}
.av-ctabar__close svg{width:17px;height:17px;stroke-width:2.2}
/* Na mobile role belki pelni av-callbar, dwa paski na raz zjadlyby ekran. */
@media (max-width:900px){.av-ctabar{display:none}}
@media (prefers-reduced-motion:reduce){.av-ctabar{transition:none}}
/* ---------- Zdjecie w rozwinietym kroku ----------
Kadr 4:3 z punktem zaczepienia od gory (step.position w configu przestawia
go dla ujec z ludzmi), bo przyciecie ma zabierac podloge, nie glowy.
Akcent (1.8.4): kreska w kolorze marki na LEWEJ krawedzi kadru, a tresc
rozwijanego kroku wychodzi wlasnie od niej - zdjecie odslania sie w prawo
spod kreski, tekst dosuwa sie z lewej z lekkim opoznieniem. Numer kroku stoi
juz w linijce nad panelem, wiec na kadrze go nie ma (byl tam w 1.8.3 i wypadl
na prosbe klienta: ten sam numer drugi raz to szum, nie akcent).
Wszystko siedzi W OBRYSIE kadru: panel akordeonu ma overflow:hidden (inaczej
nie dalo by sie animowac wysokosci), wiec cokolwiek wystaje poza zdjecie,
zostaje przyciete na dole i po bokach. */
.av-steps__media{position:relative;overflow:hidden;background:var(--av-surface-alt);
border-left:3px solid var(--av-accent)}
.av-steps__media img{width:100%;aspect-ratio:4/3;object-fit:cover;display:block;
object-position:var(--av-step-pos,50% 0);transition:transform .5s ease}
.av-steps__det[open] .av-steps__media:hover img{transform:scale(1.03)}
/* Odsloniecie od kreski: clip-path, nie szerokosc - nie wywoluje przeliczenia
ukladu, wiec panel nie podskakuje w trakcie animacji, a kadr ma przez caly
czas ten sam stosunek bokow. Animacja rusza sama, bo regula lapie sie
dopiero, gdy dostaje [open]. */
@keyframes av-step-media-in{
from{clip-path:inset(0 100% 0 0);opacity:.4}
to{clip-path:inset(0 0 0 0);opacity:1}
}
/* Opis jedzie samym przesunieciem, bez wygaszania: gdyby animacja stanela
na pierwszej klatce (wylaczone animacje, przycieta strona), tekst ma byc
czytelny, tylko odsuniety o kilkanascie pikseli. */
@keyframes av-step-body-in{
from{transform:translateX(-14px)}
to{transform:none}
}
/* BEZ animation-fill-mode. Z "both" stan poczatkowy (kadr zasloniety, tekst
przezroczysty) obowiazuje takze ZANIM animacja ruszy i gdyby nie ruszyla
nigdy - a wtedy tresc kroku zostaje niewidoczna i nikt tego nie zglasza.
Bez wypelnienia zdjecie i opis sa widoczne domyslnie, animacja tylko je
odslania. Sprawdzone: w przegladarce bez odpalonej animacji clip-path
zostaje "none", czyli kadr widac w calosci. */
.av-steps__det[open] .av-steps__media img{animation:av-step-media-in .5s cubic-bezier(.4,0,.2,1)}
.av-steps__det[open] .av-steps__body{animation:av-step-body-in .42s cubic-bezier(.4,0,.2,1) .1s}
@media (max-width:820px){
.av-steps__media img{aspect-ratio:16/10}
}
@media (prefers-reduced-motion:reduce){
.av-steps__media img{transition:none}
.av-steps__det[open] .av-steps__media:hover img{transform:none}
/* Bez ruchu tresc ma byc od razu na miejscu, a nie czekac na animacje. */
.av-steps__det[open] .av-steps__media img,
.av-steps__det[open] .av-steps__body{animation:none}
}
/* ---------- Sekcja na zdjeciu (liczby, FAQ) ----------
Zdjecie jako , 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(var(--av-scrim-rgb),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)}
/* 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{position:absolute;right:.85rem;bottom:.85rem;z-index:2;
display:flex;gap:.5rem;margin:0;padding:0;list-style:none}
.av-contact__social a{display:grid;place-items:center;width:40px;height:40px;
background:rgba(var(--av-scrim-rgb),.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{background:var(--av-accent);color:var(--av-on-accent);border-color:var(--av-accent)}
.av-contact__social svg{width:19px;height:19px}
/* Zamkniecie belki: w prawym rogu, nie konkuruje z CTA. TYLKO POLOZENIE -
kolor niesie blok wyzej. Do 1.9.0 stalo tu drugie ustawienie koloru
(--av-on-dark-soft i opacity .65) i to ono wygrywalo, bo lezy nizej
w pliku: krzyzyk byl prawie niewidoczny na bialej belce, a poprawka koloru
wyzej nie dawala zadnego efektu. Nie dopisuj tu koloru z powrotem. */
.av-ctabar__in{position:relative;padding-right:2.5rem}
.av-ctabar__close{position:absolute;right:0;top:50%;transform:translateY(-50%);
width:32px;height:32px;padding:0}
/* ---------- 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}
.av-guarantee__item{transition:border-color var(--av-ease)}
.av-guarantee__item:hover{border-color:var(--av-accent)}
/* ---------- Proces: lewa kolumna jedzie z lista ----------
Stos sklejajacych sie kart (kazdy krok sticky z rosnacym offsetem) odpadl
w 1.8.0 razem z kartami: akordeon ma pozycje wysokosci jednej linijki,
wiec nie ma czego na siebie nasuwac. Zostaje przyklejona kolumna z CTA. */
@media (min-width:1041px){
.av-process__intro{position:sticky;top:calc(var(--av-nav-h,80px) + 1.5rem);align-self:start}
}
/* ---------- 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(var(--av-scrim-rgb),.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}
.av-contact__wa{position:static;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 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. */
.av-contact__photo{border:0}
.av-contact__photo::before{display:none}
.av-contact__photo img{border:var(--av-border-w) solid var(--av-line-dark)}
}
/* ---------- 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(var(--av-scrim-rgb),.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(var(--av-scrim-rgb),.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(var(--av-scrim-rgb),.28),rgba(var(--av-scrim-rgb),.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(var(--av-scrim-rgb),.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}
/* Kadr rolki w miejscu zdjecia (1.9.0). Proporcje niesie .av-reel__frame
(9:16), wiec figura nie narzuca tu wlasnego kadru - inaczej pion rolki
zostalby przyciety do 4/5 zdjecia. Zapas szerokosci, bo 9:16 przy 420 px
ma ponad 700 px wysokosci i sekcja rozjezdzala sie w pionie. */
.av-why__media--reel{max-width:340px}
.av-why__media--reel .av-reel__frame{width:100%}
/* Zdjecie w tej figurze ma narzucone aspect-ratio 4/5 (regula wyzej). Plakat
rolki wypelnia kadr 9:16 i ma jawne width i height, wiec aspect-ratio i tak
go nie dotyczy - ale zapisane wprost, zeby nikt nie szukal tego pol dnia. */
.av-why__media--reel .av-reel__poster,
.av-why__media--reel picture img{aspect-ratio:auto}
@media (max-width:1040px){
.av-why__media--reel{max-width:300px;margin-inline:auto}
}
.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-on-dark-soft)}
.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}
}
/* ---------- Opinia napisana na przerywniku ----------
Bez karty i bez ramki: cytat lezy wprost na fotografii, na cala szerokosc
sekcji, wiec zdjecie i slowa klienta czytaja sie jako jedno. Sekcja rosnie
do wysokosci tekstu (height:auto), bo przy sztywnych 40vh dluzsza opinia
wychodzila poza kadr. Zdjecie dalej jest position:fixed i przyciete
clip-path, wiec parallax dziala tak samo jak przy pustym przerywniku.
Welon idzie z gory do dolu i jest mocniejszy niz przy CTA: bialy tekst musi
trzymac kontrast na KAZDYM kadrze, takze na jasnym niebie czy sniegu, a nie
tylko na tym zdjeciu, ktore akurat siedzi w configu. */
.av-parallax--quote{height:auto;min-height:min(62vh,520px);max-height:none;
display:grid;align-items:center;padding-block:clamp(3.25rem,7vw,5.5rem)}
.av-parallax--quote::before{content:"";position:absolute;inset:0;z-index:1;
background:linear-gradient(rgba(var(--av-scrim-rgb),.42) 0%,
rgba(var(--av-scrim-rgb),.62) 55%,rgba(var(--av-scrim-rgb),.74) 100%)}
.av-parallax__quote-wrap{position:relative;z-index:2}
.av-pquote{margin:0;color:#fff}
/* Nadtytul i gwiazdki na jednej wlosowej linii - ta sama szerokosc, co cytat
pod nia, wiec caly blok ma wspolna os lewa i prawa. */
.av-pquote__gora,.av-pquote__stopka{display:flex;align-items:center;
justify-content:space-between;gap:1rem;flex-wrap:wrap}
.av-pquote__gora{padding-bottom:1rem;border-bottom:1px solid rgba(255,255,255,.3)}
/* Na kadrze wszystko jest biale, bez akcentu marki: Green 04 (#156B6B) to
kolor pod BIALE tlo - na fotografii ciemna zielen po prostu znika, a i tak
nie ma zadnej gwarancji, jaki kadr klient tu wstawi. */
.av-pquote__eyebrow{margin:0;color:#fff}
.av-pquote__stars{color:#fff}
/* Gwiazdki w jednej linii. Reguly motywu na .av-stars-row sa zawezone do
.av-opinia (karta w sekcji opinii), wiec tutaj span zostaje domyslnie
inline - bez tego kazda gwiazdka schodzila do wlasnego wiersza. */
.av-pquote__stars .av-stars-row,.av-pquote__stars .av-stars-grh,
.av-pquote__stars .grh-stars{display:inline-flex;align-items:center;gap:2px}
.av-pquote__stars svg{display:block;flex:none}
/* Cytat kursywa szeryfowa, jak wyroznienia w naglowkach sekcji od 1.7.0, tylko
w skali naglowka: to ma brzmiec jak czyjs glos rzucony na zdjecie, a nie jak
akapit. Cien pod tekstem jest miekki i szeroki - odkleja litery od kadru,
nie robiac z nich napisu z obwodka. */
.av-pquote__tekst{margin:clamp(1.5rem,3.5vw,2.75rem) 0;border:0;padding:0}
.av-pquote__tekst p{margin:0;font-family:var(--av-font-serif,var(--av-font-head));
font-style:italic;font-weight:400;font-size:clamp(1.45rem,3.6vw,2.9rem);
line-height:1.22;letter-spacing:-.02em;text-wrap:balance;
color:#fff;text-shadow:0 2px 30px rgba(var(--av-scrim-rgb),.55)}
.av-pquote__stopka{padding-top:1.1rem;border-top:1px solid rgba(255,255,255,.3)}
.av-pquote__kto{font-style:normal;font-family:var(--av-font-head);font-weight:700;
font-size:1rem;letter-spacing:-.01em;color:#fff}
.av-pquote__zrodlo{display:inline-flex;align-items:center;gap:.5rem;
font-size:.78rem;font-weight:600;letter-spacing:.02em;color:rgba(255,255,255,.82);
text-decoration:none;transition:color var(--av-ease)}
.av-pquote__zrodlo svg{flex:none}
a.av-pquote__zrodlo span{border-bottom:1px solid rgba(255,255,255,.4);padding-bottom:.1rem;
transition:border-color var(--av-ease)}
a.av-pquote__zrodlo:hover{color:#fff}
a.av-pquote__zrodlo:hover span{border-color:#fff}
@media (max-width:640px){
/* Na telefonie cytat i tak zajmuje cala szerokosc, wiec obie linijki
schodza do lewej - rozstrzelone konce wygladalyby jak blad ukladu. */
.av-parallax--quote{min-height:0}
.av-pquote__gora,.av-pquote__stopka{justify-content:flex-start;gap:.75rem}
.av-pquote__stopka{flex-direction:column;align-items:flex-start;gap:.6rem}
}
/* ---------- 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. */
.av-consult__badge{position:absolute;right:-1.25rem;bottom:1.5rem;z-index:2;
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(var(--av-scrim-rgb),.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:-1.1rem}
}
/* 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}
/* ---------- 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__brand img{margin-inline:auto;object-position:center}
.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 ----------
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}
/* ---------- Numer przy nadtytule sekcji ----------
Wzorzec ze strony wygenerowanej przez klienta: "WYBRANE REALIZACJE / 01".
Kreski z .av-eyebrow znikaja, kiedy numer jest obecny - referencja ich nie
ma, a kreska, numer i ukosnik naraz to trzy ozdoby na jednym wierszu. */
.av-eyebrow__nr{color:var(--av-accent-ink);font-variant-numeric:tabular-nums}
.av-eyebrow:has(.av-eyebrow__nr)::before,
.av-eyebrow:has(.av-eyebrow__nr)::after{display:none}
.av-sec--dark .av-eyebrow__nr,.av-sec--photo .av-eyebrow__nr{color:var(--av-accent)}
/* ---------- Sekcja z formularzem tuz pod hero ----------
Przeniesione z arka-nieruchomosci 1.9.x. Lewa kolumna: naglowek, twarz,
jedno zdanie i checklista. Prawa: karta formularza. To ta sekcja niesie
kotwice #kontakt, wiec wszystkie CTA na stronie ladują wlasnie tutaj. */
.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}}
/* Karta formularza jedzie z czytelnikiem, tak jak w sekcji kontaktowej na dole
(1.9.2, prosba klienta). Lewa kolumna ma zdjecie, akapit i checkliste, wiec
jest wyrazniej wyzsza od karty - bez tego formularz uciekal do gory, zanim
ktokolwiek doczytal, po co ma go wypelnic.
align-self:start jest OBOWIAZKOWE: siatka ma align-items:center, a przy
wysrodkowaniu obszar siatki jest dokladnie tak wysoki, jak sama karta -
sticky nie ma wtedy ani piksela zapasu i nie robi nic. Ten sam dopisek stoi
przy .av-process__intro, z tego samego powodu.
Prog wysokosci okna, nie tylko szerokosci: karta ma okolo 600 px, wiec
w niskim oknie przyklejona do gory chowalaby przycisk pod krawedzia ekranu
i nie dalo by sie go domacac - przy sticky element przestaje sie przewijac
razem ze strona, wiec to, co wystaje, zostaje poza zasiegiem. Ponizej 760 px
wysokosci karta zostaje zwykla, przewijalna. */
@media (min-width:901px) and (min-height:760px){
.av-lform__card{position:sticky;align-self:start;top:calc(var(--av-nav-h,80px) + 1.5rem)}
}
.av-lform__copy{min-width:0}
.av-lform__slowa{min-width:0}
/* Zdjecie i teksty maja JEDNA szerokosc - szerokosc kolumny. Przy sztywnym
kadrze kazdy blok konczyl sie gdzie indziej i kolumna wygladala poszarpana. */
/* JEDEN duzy zaokraglony rog, od strony formularza - chwyt ze strony, ktora
klient wygenerowal sam: u niego kadr w hero ma zaokraglony lewy gorny (tekst
jest po lewej), a kadr w "Osobiscie" prawy gorny (tekst po prawej). Tutaj
zdjecie stoi po lewej, wiec rog idzie w prawy gorny.
Promien MUSI byc i na figurze, i na obrazku: figura ma overflow:visible
(wystaje z niej przycisk telefonu), wiec sama nie przytnie zdjecia, a jej
cien z warstwa 0 0 0 1px rysuje pierscien po ksztalcie figury.
To jedyne zaokraglenie na stronie - reszta zostaje przy promieniu 0
(brand.json -> layout). */
.av-lform__foto{position:relative;overflow:visible;
margin:clamp(1.1rem,2.2vw,1.6rem) 0 2.2rem;max-width:none;
--av-rog:0 clamp(2.5rem,7vw,5rem) 0 0;border-radius:var(--av-rog);
box-shadow: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-lform__foto img{width:100%;aspect-ratio:4/3;object-fit:cover;object-position:center top;display:block;
border-radius:var(--av-rog)}
/* Zaokraglony rog kadru. Figury maja overflow:visible (wystaje z nich przycisk
WhatsApp i plakietka czasu), wiec promien musi byc i na figurze, i na obrazku.
NIE "border-radius:inherit" na obrazku - i to jest cala historia buga
zgloszonego 25.09 ("zdjecie prostokat, a ramka zaokraglona"). Imagify
opakowuje kazdy w , wiec rodzicem obrazka nie jest juz figura,
tylko - a zadnego promienia nie ma. "inherit" bierze
wartosc OD RODZICA, czyli w tym ukladzie zero: ramka byla zaokraglona,
zdjecie w srodku zostawalo prostokatem. Lokalnie, bez Imagify, wygladalo
poprawnie, dlatego przeszlo.
Zmienna dziala, bo wlasciwosci niestandardowe DZIEDZICZA sie przez
w dol do obrazka - var(--av-rog) trafia tam, gdzie inherit nie dociera.
Kontakt ma rog po LEWEJ (prosba klienta 25.09), konsultacja zostaje przy
prawym - w niej tekst nadal stoi po prawej stronie kadru. */
.av-contact__photo{--av-rog:clamp(2.5rem,7vw,5rem) 0 0 0}
.av-consult__media{--av-rog:0 clamp(2.5rem,7vw,5rem) 0 0}
.av-contact__photo,.av-consult__media{border-radius:var(--av-rog)}
.av-contact__photo img,.av-consult__media img{border-radius:var(--av-rog)}
/* Ozdobny kwadratowy naroznik (zolty offset ramki) siedzial dokladnie w tym
rogu i klocil sie z lukiem - zostaje sam luk. */
.av-consult__media::before,.av-contact__photo::before{display:none}
.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;max-width:none;
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 w PRAWYM DOLNYM rogu zdjecia, wychodzi poza kadr
o kawalek, zeby bylo widac, ze jest warstwe wyzej. */
.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);
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-ink);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}
/* Plakietki social w LEWYM dolnym rogu kadru, zeby nie zderzyly sie
z przyciskiem telefonu w prawym. */
.av-lform__social{position:absolute;left:.85rem;bottom:.85rem;z-index:2;
display:flex;gap:.4rem;margin:0;padding:0;list-style:none}
.av-lform__social a{display:grid;place-items:center;width:40px;height:40px;
color:var(--av-ink);background:rgba(255,255,255,.92);
border:var(--av-border-w) solid var(--av-line);
transition:background var(--av-ease),color var(--av-ease),border-color var(--av-ease)}
.av-lform__social a:hover{background:var(--av-accent);color:var(--av-on-accent);border-color:var(--av-accent)}
.av-lform__social svg{width:19px;height:19px}
/* Karta formularza: 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__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}
.av-lform__card.av-card::before{content:"";position:absolute;left:0;right:0;top:0;height:3px;
background:linear-gradient(90deg,var(--av-accent-dark),var(--av-accent) 45%,rgba(var(--av-accent-rgb),.55) 70%,var(--av-accent))}
.av-lform__card.av-card::after{content:"";position:absolute;inset:-12px;pointer-events:none;
border:1px solid rgba(var(--av-accent-rgb),.4)}
@media (max-width:640px){.av-lform__card.av-card::after{inset:-8px}}
.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}
/* Pola na czystej bieli: tlo karty ma u dolu gradient i pole sie z nim zlewalo. */
.av-lform__card .av-field input,.av-lform__card .av-field textarea{background:#fff}
/* ---------- 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 (poprawka z ARKI 1.5.9/1.6.2): img jest
absolutny, wiec kolumna ma tyle, ile formularz obok. Zdjecie zabiera cala
wolna wysokosc (flex:1) - przy sztywnych 380 px pod kontaktem zostawal pusty
pas ~150 px. Kadr od gory. */
.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). */
.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 (jak Kwadrat 1.17.3): na 1366x768 mniej,
na 1920x1080 wiecej powietrza, bez przelewania za 94svh. */
.av-exit__body{padding:clamp(1.1rem,3svh,2.25rem) clamp(1.5rem,3vw,2.25rem)}
/* Okno bez przewijania na 1366x768: gestszy formularz. Pusty wiersz statusu
bez miejsca, ale bez display:none - to region aria-live. */
.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 w jednym wierszu, bez akapitu pod nim (exit_popup.text usuniety). */
.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;
white-space:nowrap;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)}
.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 , 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. */
/* Pasek z grania Tatr (template-parts/brand-band.php). Wchodzi ujemnym
marginesem na dol sekcji powyzej, wiec nie dodaje wysokosci: dolna krawedz
zdjecia albo ciemnej sekcji przechodzi w linie gor w kolorze sekcji ponizej.
Blizsza gran pelnym kolorem, dalsza przezroczysta dla glebi. */
.av-bband{--av-bb:var(--av-surface);display:block;position:relative;z-index:2;line-height:0;
height:clamp(26px,4.2vw,60px);margin-top:calc(-1 * clamp(26px,4.2vw,60px));pointer-events:none}
.av-bband--light{--av-bb:var(--av-surface)}
.av-bband--alt{--av-bb:var(--av-surface-alt)}
.av-bband--dark{--av-bb:var(--av-surface-dark)}
.av-bband__ridge{display:block;width:100%;height:100%}
.av-bband__far{fill:var(--av-bb);opacity:.45}
.av-bband__near{fill:var(--av-bb)}
.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. */
/* Lockup 6,97:1 (1.11.0): przy dawnych 52 px znak mial 362 px i wychodzil
poza kolumne marki w siatce stopki. Nizszy = wezszy, max-width domyka. */
/* Selektor przez KONTENER, nie klase na obrazku (1.13.2): Imagify w trybie
picture przenosi class z img na picture, ktore ma display:contents, wiec
regula na .av-footer__logo przestawala dzialac na produkcji. object-fit:
contain, bo przy stalej wysokosci max-width:100% scinal tylko SZEROKOSC
i lockup 6,97:1 splaszczal sie w wezszej kolumnie (uwaga klienta 29.09,
"logo w stopce sie odksztalca" na PC). Teraz pole obrazka moze sie zwezic,
ale znak zachowuje proporcje i trzyma sie lewej krawedzi. */
.av-footer__brand img{display:block;width:auto;height:clamp(36px,3.8vw,46px);max-width:100%;
object-fit:contain;object-position:left center;margin-bottom:.85rem}
/* 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: ZERO rezerwy w ukladzie, dopoki widget nie powstanie (1.9.0,
uwaga klienta 25.09). Do 1.8.5 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: pole ma wysokosc 0 i rozwija sie po dodaniu
is-ready przez main.js. Rosnie POD polami i nad przyciskiem (patrz kolejnosc
w _lead-form.php), wiec nie odpycha pola, w ktorym ktos wlasnie pisze. */
.av-turnstile[data-av-turnstile]{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)}
/* 200 px, nie "auto": max-height nie animuje sie z auto, a widget Cloudflare ma
65-70 px, wiec zapas jest bezpieczny i nie zostawia pustego miejsca. */
.av-turnstile[data-av-turnstile].is-ready{max-height:200px;opacity:1;margin-bottom:1rem}
/* Bez JS (i w starszych przegladarkach) widget nie powstanie w ogole, wiec nie ma
czego pokazywac; gdyby jednak cos wyrenderowalo sie samo, regula nizej zdejmuje
zwijanie, zeby widget nie zostal przyciety do zera. */
.av-turnstile[data-av-turnstile]: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. */
.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