/* ============================================================
STOLBASZ — premium, architektoniczny B2B fit-out
Jasna paleta, zero brązu. System wg premium-web-craft.
Projekt strony: Impulseo (impulseo.pl)
============================================================ */
:root{
/* PALETA — jasna, architektoniczna, chłodna */
--paper:#F4F6F8; /* główne tło */
--paper-2:#E7EBEF; /* sekcje alternatywne (chłodny jasny szary) */
--paper-3:#E7EBEF; /* delikatne wypełnienia */
--ink:#15212E; /* tekst główny — chłodny grafit */
--ink-soft:#243443; /* nagłówki drugorzędne */
--muted:#6B7785; /* tekst poboczny */
--line:rgba(21,33,46,.12);/* hairline */
--accent:#E8A317; /* stonowany petrol-slate — jedyny akcent */
--accent-d:#C9870C;
--accent-soft:rgba(232,163,23,.10);
--dark:#15212E; /* sekcje ciemne (stopka/CTA) */
/* HOVER ZDJĘĆ — JEDEN standard dla całego silnika (decyzja K. 04.08.2026, artefakt z wariantami).
Delikatny zoom 1.02 + rozjaśnienie. Dawne scale(1.05) ODRZUCONE: skakał kadr.
Spoczynek lekko przygaszony, ale TYLKO tam, gdzie jest mysz (@media hover:hover) —
na telefonie zdjęcia zostają w pełnej jasności. */
--img-zoom:1.02;
--img-rest:brightness(.95) saturate(.99);
--img-hot:brightness(1.06) saturate(1.05);
--img-dur:.55s;
/* ODSTĘPY — skala 4/8 */
--space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px; --space-5:24px;
--space-6:32px; --space-7:48px; --space-8:64px; --space-9:96px; --space-10:128px;
/* TYPOGRAFIA — fluid clamp() (skala podbita 16.07.2026: większe, czytelniejsze litery — uwaga Adama) */
--text-sm:clamp(.9rem,.87rem + .12vw,1rem);
--text-base:clamp(1.08rem,1.04rem + .18vw,1.2rem);
--text-lg:clamp(1.24rem,1.15rem + .34vw,1.44rem);
--text-h3:clamp(1.34rem,1.22rem + .55vw,1.66rem);
--text-h2:clamp(2.1rem,1.66rem + 2.1vw,3.1rem);
--text-h1:clamp(2.9rem,2.1rem + 4vw,5.1rem);
/* PROMIENIE — architektoniczne, raczej ostre */
--r-sm:3px; --r-md:6px; --r-lg:10px;
/* RUCH */
--ease:cubic-bezier(.25,.46,.45,.94); --dur:.24s;
/* CIENIE — miękkie, warstwowe */
--sh-sm:0 1px 2px rgba(16,24,32,.04), 0 2px 8px rgba(16,24,32,.05);
--sh-md:0 2px 6px rgba(16,24,32,.05), 0 12px 28px -8px rgba(16,24,32,.12);
--sh-lg:0 6px 14px rgba(16,24,32,.07), 0 26px 56px -18px rgba(16,24,32,.22);
--hairline:1px solid var(--line);
--font-display:'Space Grotesk','Inter',sans-serif;
--font-body:'Inter',sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
font-family:var(--font-body);
font-size:var(--text-base);
line-height:1.65;
color:var(--ink);
background:var(--paper);
-webkit-font-smoothing:antialiased;
text-rendering:optimizeLegibility;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
.wrap{width:min(92%,1180px);margin-inline:auto}
section{padding-block:clamp(52px,6.5vw,96px)}
h1,h2,h3{font-family:var(--font-display);font-weight:700;line-height:1.08;letter-spacing:-.02em;color:var(--ink)}
h1{font-size:var(--text-h1);letter-spacing:-.035em}
h2{font-size:var(--text-h2);letter-spacing:-.025em}
h3{font-size:var(--text-h3)}
p{max-width:65ch}
.eyebrow{
font-family:var(--font-body);
font-size:var(--text-sm);
font-weight:600;
letter-spacing:.18em;
text-transform:uppercase;
color:var(--accent);
display:inline-flex;align-items:center;gap:var(--space-3);
}
/* flex:none + margin-top = kreska trzyma się PIERWSZEJ linii. Wcześniej align-items:center
centrowało ją względem całego bloku i przy zawinięciu (długi kicker typu
„…WNĘTRZ · LESZNO · OD 2019") druga linia lądowała z brzydkim wcięciem. */
.eyebrow{align-items:flex-start}
.eyebrow>*,.eyebrow{text-wrap:balance} /* dlugi kicker lamal sie na sierote typu samo „2019" w drugiej linii */
.eyebrow::before{content:"";width:28px;height:1px;background:var(--accent);display:inline-block;flex:none;margin-top:.62em}
.muted{color:var(--muted)}
.lead{font-size:var(--text-lg);line-height:1.55;color:var(--ink-soft);max-width:50ch}
/* ---------- BUTTONS ---------- */
.btn{
display:inline-flex;align-items:center;gap:var(--space-2);
font-weight:600;font-size:var(--text-sm);letter-spacing:.02em;
padding:var(--space-4) var(--space-6);
border-radius:var(--r-sm);
transition:transform var(--dur) var(--ease),box-shadow var(--dur) var(--ease),background var(--dur) var(--ease);
cursor:pointer;border:1px solid transparent;
}
.btn-accent{background:var(--accent);color:#fff;box-shadow:var(--sh-sm)}
.btn-accent:hover{background:var(--accent-d);transform:translateY(-2px);box-shadow:var(--sh-md)}
.btn-accent:active{transform:translateY(0);box-shadow:var(--sh-sm)}
.btn-ghost{background:transparent;color:var(--ink);border-color:var(--line)}
.btn-ghost:hover{border-color:var(--accent);color:var(--accent);transform:translateY(-2px)}
.btn-light{background:#fff;color:var(--ink);box-shadow:var(--sh-sm)}
.btn-light:hover{transform:translateY(-2px);box-shadow:var(--sh-md)}
.btn .arr{transition:transform var(--dur) var(--ease)}
.btn:hover .arr{transform:translateX(4px)}
/* ---------- NAV ---------- */
.nav{
position:sticky;top:0;z-index:50;
background:color-mix(in srgb,var(--paper) 88%,transparent);
backdrop-filter:saturate(140%) blur(10px);
border-bottom:var(--hairline);
}
.nav-inner{display:flex;align-items:center;justify-content:space-between;gap:var(--space-5);height:72px}
/* ANTY-NACHODZENIE (K. 05.08.2026): długa nazwa firmy + przycisk z pełnym numerem nie mieściły się w pasku
i flex ściskał linki PONIŻEJ ich treści - "Kontakt" wchodził na ramkę "Zadzwoń +48 ...". Teraz ustępuje
nazwa marki (skrót wielokropkiem), a menu i przycisk nigdy się nie kurczą ani nie zachodzą na siebie. */
.brand{display:flex;flex-direction:column;line-height:1;min-width:0;flex:0 1 auto}
.brand .name{font-family:var(--font-display);font-weight:800;font-size:1.35rem;letter-spacing:.04em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.brand .sub{font-size:.62rem;letter-spacing:.34em;text-transform:uppercase;color:var(--muted);margin-top:5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.nav-links{display:flex;align-items:center;gap:var(--space-6);flex:0 0 auto}
.nav-links a{font-size:var(--text-sm);font-weight:500;color:var(--ink-soft);position:relative;padding-block:4px;white-space:nowrap;transition:color var(--dur) var(--ease)}
.nav-links a::after{content:"";position:absolute;left:0;bottom:0;width:0;height:1.5px;background:var(--accent);transition:width var(--dur) var(--ease)}
.nav-links a:hover,.nav-links a.active{color:var(--ink)}
.nav-links a:hover::after,.nav-links a.active::after{width:100%}
.nav-links .btn{padding:var(--space-2) var(--space-5)}
/* przyciski w nav: właściwy kolor (przebij .nav-links a) + bez podkreślenia */
.nav-links a.btn-accent{color:#fff}
.nav-links a.btn-ghost,.nav-links a.btn-light{color:var(--ink)}
.nav-links a.btn::after{display:none}
.nav-toggle{display:none;background:none;border:none;cursor:pointer;flex-direction:column;gap:5px;padding:8px}
.nav-toggle span{width:24px;height:2px;background:var(--ink);transition:var(--dur)}
/* Ciasny zakres MIĘDZY menu mobilnym a pełnym pulpitem: zbijamy odstępy i nazwę marki,
żeby wszystko zmieściło się naturalnie, zanim w ogóle dojdzie do skracania wielokropkiem. */
@media(max-width:1280px) and (min-width:921px){
.nav-links{gap:var(--space-4)}
.nav-links .btn{padding:var(--space-2) var(--space-4)}
.brand .name{font-size:1.15rem}
}
/* ---------- HERO (split) ---------- */
.hero{position:relative;overflow:hidden;border-bottom:var(--hairline)}
.hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(24px,4vw,60px);align-items:center;
padding-block:clamp(36px,4.5vw,64px)}
.hero-copy .eyebrow{margin-bottom:var(--space-5)}
.hero-copy h1{margin-bottom:var(--space-5)}
.hero-copy .lead{margin-bottom:var(--space-7)}
.hero-actions{display:flex;flex-wrap:wrap;gap:var(--space-4)}
.hero-art{position:relative;aspect-ratio:4/3;border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--sh-lg)}
.hero-art img{width:100%;height:100%;object-fit:cover}
.hero-art::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 55%,rgba(18,24,28,.28))}
.hero-badge{position:absolute;left:var(--space-5);bottom:var(--space-5);z-index:2;
background:rgba(252,252,251,.94);backdrop-filter:blur(4px);
border-radius:var(--r-md);padding:var(--space-4) var(--space-5);box-shadow:var(--sh-md);max-width:78%}
.hero-badge strong{display:block;font-family:var(--font-display);font-size:1rem;letter-spacing:-.01em}
.hero-badge span{font-size:var(--text-sm);color:var(--muted)}
/* ---------- HERO duży / kinowy (strona główna) ---------- */
.hero-cine{position:relative;min-height:clamp(560px,82vh,840px);min-height:clamp(560px,82svh,840px);display:flex;align-items:center;overflow:hidden;border-bottom:var(--hairline)}
.hero-cine>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
.hero-cine::after{content:"";position:absolute;inset:0;z-index:1;
background:linear-gradient(95deg,rgba(13,18,23,.86) 0%,rgba(13,18,23,.64) 32%,rgba(13,18,23,.24) 62%,rgba(13,18,23,.04) 100%)}
.hero-cine .wrap{position:relative;z-index:2;padding-block:var(--space-8)}
.hero-cine .hero-copy{max-width:660px}
.hero-cine .eyebrow{color:#fff;margin-bottom:var(--space-5)}
.hero-cine .eyebrow::before{background:#fff}
.hero-cine h1{color:#fff;margin-bottom:var(--space-5);font-size:clamp(2.9rem,2rem + 4.4vw,5.2rem);text-wrap:balance}
.hero-cine .lead{color:rgba(255,255,255,.92);max-width:48ch;margin-bottom:var(--space-7)}
.hero-cine .hero-actions{display:flex;flex-wrap:wrap;gap:var(--space-4)}
/* NISKIE OKNO (laptop z dokiem i paskami przeglądarki ma ~700-780 px wysokości widoku):
H1 do 5.2rem + długi lead nie mieściły się i przyciski wypadały POD krawędź ekranu -
klient widział stronę bez ani jednego CTA. Skalujemy w dół, zamiast przycinać treść. */
@media(min-width:821px) and (max-height:820px){
.hero-cine{min-height:clamp(520px,94svh,780px)}
.hero-cine .wrap{padding-block:var(--space-6)}
.hero-cine h1{font-size:clamp(2.2rem,1.5rem + 2.6vw,3.6rem);margin-bottom:var(--space-4)}
.hero-cine .eyebrow{margin-bottom:var(--space-4)}
.hero-cine .lead{margin-bottom:var(--space-5);max-width:44ch}
}
@media(max-width:680px){
.hero-cine{min-height:clamp(520px,76vh,640px);min-height:clamp(520px,76svh,640px);align-items:flex-end}
.hero-cine::after{background:linear-gradient(0deg,rgba(13,18,23,.9) 6%,rgba(13,18,23,.45) 55%,rgba(13,18,23,.25) 100%)}
.hero-cine .wrap{padding-bottom:var(--space-9)}
/* TELEFON (~90% oglądających): lead potrafił zająć 8 linii i zepchnąć CTA poza pierwszy ekran.
Zwężamy interlinię i skalę - treści nie ucinamy, bo to ona sprzedaje. */
.hero-cine .lead{font-size:.98rem;line-height:1.5;margin-bottom:var(--space-5)}
.hero-cine .eyebrow{font-size:.72rem;letter-spacing:.13em;margin-bottom:var(--space-4)}
.hero-cine .eyebrow::before{width:20px}
.hero-cine h1{margin-bottom:var(--space-4)}
}
/* full-bleed hero variant (podstrony) */
.pagehead{position:relative;min-height:46vh;min-height:46svh;display:flex;align-items:flex-end;overflow:hidden;border-bottom:var(--hairline)}
.pagehead img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.pagehead::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(18,24,28,.25),rgba(18,24,28,.62))}
.pagehead .wrap{position:relative;z-index:2;padding-block:var(--space-9);color:#fff}
.pagehead h1{color:#fff;max-width:18ch}
.pagehead .eyebrow{color:#fff}
.pagehead .eyebrow::before{background:#fff}
.pagehead p{color:rgba(255,255,255,.86);margin-top:var(--space-4);max-width:54ch}
/* ---------- STRIP (pasek skrótów / liczby) ---------- */
.strip{background:var(--dark);color:#fff}
/* PASEK HASEŁ — standard 04.08.2026 (decyzja K.): 5 haseł w JEDNYM rzędzie, tekst WYŚRODKOWANY,
węższe marginesy boczne niż reszta strony (pasek ma iść szerzej), równe wysokości kolumn. */
.strip .wrap{width:min(96%,1440px);display:grid;grid-template-columns:repeat(5,1fr);
gap:var(--space-5);padding-block:var(--space-7);align-items:stretch}
.strip .item .k{font-family:var(--font-display);font-size:clamp(1.05rem,.82rem + .85vw,1.55rem);
font-weight:800;letter-spacing:-.02em;color:#fff;line-height:1.18;text-wrap:balance}
.strip .item .v{font-size:var(--text-sm);color:rgba(255,255,255,.66);margin-top:var(--space-2);line-height:1.4}
.strip .item{border-left:2px solid var(--accent);padding-inline:var(--space-4);
text-align:center;display:flex;flex-direction:column;justify-content:center}
/* liczba kolumn = liczba haseł, żeby ostatnie nie zostawało samo w drugim rzędzie.
Klasę n-N nadaje multipage.py; domyślnie (bez klasy) pasek jest 5-kolumnowy. */
.strip.n-2 .wrap{grid-template-columns:repeat(2,1fr)}
.strip.n-3 .wrap{grid-template-columns:repeat(3,1fr)}
.strip.n-4 .wrap{grid-template-columns:repeat(4,1fr);gap:var(--space-6)}
.strip.n-4 .item .k{font-size:clamp(1.3rem,1rem + 1.1vw,2rem)}
.strip.n-6 .wrap{grid-template-columns:repeat(6,1fr);gap:var(--space-4)}
.strip.n-6 .item .k{font-size:clamp(.98rem,.8rem + .7vw,1.35rem)}
/* równe łamanie: zamiast "długa linia + jedno słowo" obie linie zbliżonej długości */
.strip .item .k{text-wrap:balance}
/* ---------- SECTION HEAD ---------- */
.head{max-width:48rem;margin-bottom:var(--space-8)}
.head.center{margin-inline:auto;text-align:center}
.head .eyebrow{margin-bottom:var(--space-4)}
.head h2{margin-bottom:var(--space-4)}
.head p{color:var(--muted);font-size:var(--text-lg);line-height:1.55}
.head.center p{margin-inline:auto}
/* ---------- INTRO SPLIT ---------- */
.split{display:grid;grid-template-columns:.92fr 1.08fr;gap:clamp(28px,5vw,80px);align-items:center}
.split.rev{grid-template-columns:1.08fr .92fr}
.split.rev .split-art{order:-1}
.split-art{position:relative;aspect-ratio:5/4;border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--sh-lg)}
.split-art img{width:100%;height:100%;object-fit:cover}
.split-copy h2{margin-bottom:var(--space-5)}
.split-copy p+p{margin-top:var(--space-4)}
.split-copy .btn{margin-top:var(--space-6)}
/* ---------- SERVICES (zakres) ---------- */
.svc-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:var(--space-5)}
.svc{background:#fff;border:var(--hairline);border-radius:var(--r-md);padding:var(--space-7) var(--space-6);
transition:transform var(--dur) var(--ease),box-shadow var(--dur) var(--ease),border-color var(--dur) var(--ease);
position:relative;overflow:hidden}
.svc::before{content:"";position:absolute;left:0;top:0;width:3px;height:0;background:var(--accent);transition:height var(--dur) var(--ease)}
.svc:hover{transform:translateY(-4px);box-shadow:var(--sh-md);border-color:transparent}
.svc:hover::before{height:100%}
.svc .ic{font-family:var(--font-display);font-size:.8rem;font-weight:700;letter-spacing:.12em;color:var(--accent);margin-bottom:var(--space-4)}
.svc h3{margin-bottom:var(--space-3);font-size:1.22rem}
.svc p{color:var(--muted);font-size:var(--text-base);line-height:1.6}
/* big detailed service rows */
.svc-row{display:grid;grid-template-columns:.8fr 1.2fr;gap:clamp(20px,4vw,60px);align-items:center;padding-block:var(--space-8)}
.svc-row+.svc-row{border-top:var(--hairline)}
.svc-row.rev{grid-template-columns:1.2fr .8fr}
/* Naprzemienny układ wierszy oferty: co drugi wiersz ma zdjęcie po PRAWEJ.
Było `order:-1` — martwy kod, bo zdjęcie i tak jest pierwszym dzieckiem w HTML,
więc wszystkie wiersze wyglądały identycznie (zdjęcie zawsze z lewej), a `rev`
zmieniało tylko szerokość kolumn. Znalezione 29.07.2026 przy różnicowaniu kierunków
animacji (pomiar pozycji: art.mid 390/502 przy row.mid 756 — zawsze lewa strona). */
.svc-row.rev .svc-row-art{order:2}
.svc-row-art{aspect-ratio:4/3;border-radius:var(--r-md);overflow:hidden;box-shadow:var(--sh-md)}
.svc-row-art img{width:100%;height:100%;object-fit:cover}
.svc-row h3{font-size:1.5rem;margin-bottom:var(--space-4)}
.svc-row .num{font-family:var(--font-display);font-size:.85rem;font-weight:700;letter-spacing:.14em;color:var(--accent);display:block;margin-bottom:var(--space-3)}
.svc-row ul{list-style:none;margin-top:var(--space-4);display:flex;flex-direction:column;gap:var(--space-2)}
.svc-row li{position:relative;padding-left:var(--space-5);color:var(--muted);font-size:var(--text-base)}
.svc-row li::before{content:"";position:absolute;left:0;top:.62em;width:8px;height:1px;background:var(--accent)}
/* ---------- GALLERY (realizacje) ---------- */
.gallery{display:grid;grid-template-columns:repeat(12,1fr);gap:var(--space-4);grid-auto-rows:200px}
/* GALERIA MASONRY — pionowe zdjęcia (portrety beauty/wellness) bez przycinania: kolumny, height auto */
.gallery-masonry{column-count:3;column-gap:var(--space-4)}
@media(max-width:900px){.gallery-masonry{column-count:2}}
@media(max-width:560px){.gallery-masonry{column-count:1}}
.gallery-masonry .m-tile{break-inside:avoid;margin:0 0 var(--space-4);padding:0;position:relative;overflow:hidden;border-radius:var(--r-md);border:1px solid var(--line)}
.gallery-masonry .m-tile img{width:100%;height:auto;display:block}
.gallery-masonry .m-tile .cap{position:absolute;left:0;right:0;bottom:0;padding:var(--space-4);color:#fff;background:linear-gradient(0deg,rgba(0,0,0,.55),transparent);font-size:var(--text-sm)}
.gallery-masonry .m-tile .cap small{display:block;font-weight:400;opacity:.78;letter-spacing:.04em;text-transform:uppercase;font-size:.66rem;margin-top:3px}
.tile{position:relative;overflow:hidden;border-radius:var(--r-md);box-shadow:var(--sh-sm);
transition:transform var(--dur) var(--ease),box-shadow var(--dur) var(--ease)}
.tile img{width:100%;height:100%;object-fit:cover;
transition:transform var(--img-dur) var(--ease),filter var(--img-dur) var(--ease)}
.tile:hover{box-shadow:var(--sh-md)}
.tile .cap{position:absolute;left:0;right:0;bottom:0;padding:var(--space-5) var(--space-4) var(--space-4);
background:linear-gradient(transparent,rgba(18,24,28,.78));color:#fff;
font-size:var(--text-sm);font-weight:600;letter-spacing:.01em;
opacity:0;transform:translateY(8px);transition:var(--dur) var(--ease)}
.tile:hover .cap{opacity:1;transform:translateY(0)}
.tile .cap small{display:block;font-weight:400;opacity:.78;letter-spacing:.04em;text-transform:uppercase;font-size:.66rem;margin-top:3px}
/* bento spans */
.t-wide{grid-column:span 6}
.t-tall{grid-column:span 6;grid-row:span 2}
.t-std{grid-column:span 6}
.t-third{grid-column:span 4}
.t-two3{grid-column:span 8}
/* ---------- TRUST / WIARYGODNOŚĆ ---------- */
.trust{background:var(--paper-2)}
.trust-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:var(--space-5);margin-top:var(--space-7)}
.trust-card{background:#fff;border-radius:var(--r-md);padding:var(--space-7) var(--space-6);box-shadow:var(--sh-sm);border-top:3px solid var(--accent)}
.trust-card .big{font-family:var(--font-display);font-size:clamp(1.8rem,1.3rem + 1.6vw,2.6rem);font-weight:800;letter-spacing:-.02em;color:var(--ink);line-height:1}
.trust-card h3{font-size:1.12rem;margin:var(--space-3) 0 var(--space-2)}
.trust-card p{color:var(--muted);font-size:var(--text-base);line-height:1.55}
/* ---------- CTA band ---------- */
.cta{background:var(--dark);color:#fff;position:relative;overflow:hidden}
.cta .wrap{display:grid;grid-template-columns:1.4fr .6fr;gap:var(--space-7);align-items:center;position:relative;z-index:2}
.cta h2{color:#fff;max-width:20ch}
.cta p{color:rgba(255,255,255,.74);margin-top:var(--space-4)}
.cta-actions{display:flex;flex-direction:column;gap:var(--space-3);align-items:flex-start}
.cta::before{content:"";position:absolute;right:-80px;top:-80px;width:360px;height:360px;border-radius:50%;
background:radial-gradient(circle,var(--accent-soft),transparent 70%)}
/* ---------- CONTACT ---------- */
.contact-grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(28px,4vw,56px);align-items:start}
.info-list{display:flex;flex-direction:column;gap:var(--space-2)}
.info-row{display:flex;gap:var(--space-4);align-items:flex-start;padding-block:var(--space-4);border-bottom:var(--hairline)}
.info-row .ic{flex:none;width:42px;height:42px;display:grid;place-items:center;border-radius:50%;
background:var(--accent-soft);color:var(--accent);font-size:1.05rem}
.info-row .lbl{font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.info-row .val{font-weight:600;font-size:var(--text-base);margin-top:2px}
.info-row a.val:hover{color:var(--accent)}
.map{border:none;border-radius:var(--r-lg);box-shadow:var(--sh-md);width:100%;height:100%;min-height:380px;filter:grayscale(.2) contrast(1.02)}
.form{background:#fff;border:var(--hairline);border-radius:var(--r-lg);padding:clamp(24px,3vw,40px);box-shadow:var(--sh-sm)}
.form .fld{margin-bottom:var(--space-5)}
.form label{display:block;font-size:var(--text-sm);font-weight:600;margin-bottom:var(--space-2)}
.form input,.form textarea{width:100%;font-family:inherit;font-size:var(--text-base);color:var(--ink);
padding:var(--space-4);border:var(--hairline);border-radius:var(--r-sm);background:var(--paper);transition:border-color var(--dur)}
.form input:focus,.form textarea:focus{outline:none;border-color:var(--accent);background:#fff}
.form textarea{resize:vertical;min-height:120px}
.form .note{font-size:var(--text-sm);color:var(--muted);margin-top:var(--space-3)}
/* ---------- FOOTER ---------- */
footer{background:var(--dark);color:#fff;padding-block:var(--space-9) var(--space-6)}
.foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:var(--space-7);margin-bottom:var(--space-8)}
.foot-brand .name{font-family:var(--font-display);font-weight:800;font-size:1.4rem;letter-spacing:.04em}
.foot-brand p{color:rgba(255,255,255,.62);margin-top:var(--space-4);font-size:var(--text-base);max-width:38ch}
.foot-col h4{font-size:.74rem;letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.5);margin-bottom:var(--space-4)}
.foot-col a,.foot-col p{display:block;color:rgba(255,255,255,.82);font-size:var(--text-base);margin-bottom:var(--space-3)}
.foot-col a:hover{color:#fff}
.foot-bot{border-top:1px solid rgba(255,255,255,.12);padding-top:var(--space-5);display:flex;justify-content:space-between;flex-wrap:wrap;gap:var(--space-3);
font-size:var(--text-sm);color:rgba(255,255,255,.55)}
.foot-bot a:hover{color:#fff}
/* Podpis w stopce = klikalny link do impulseo.pl (31.07.2026). Ma być WIDOCZNIE klikalny,
ale nie krzyczeć - stąd sam kolor jaśniejszy + delikatne podkreślenie na najeździe. */
.foot-bot a.foot-credit{color:rgba(255,255,255,.78);text-decoration:none;border-bottom:1px solid rgba(255,255,255,.28)}
.foot-bot a.foot-credit:hover{color:#fff;border-bottom-color:#fff}
/* ---------- REVEAL ---------- */
.reveal{opacity:0;transform:translateY(22px);transition:opacity .6s var(--ease),transform .6s var(--ease)}
.reveal.in{opacity:1;transform:none}
/* ---------- RESPONSIVE ---------- */
@media(max-width:920px){
.hero-grid,.split,.split.rev,.svc-row,.svc-row.rev,.cta .wrap,.contact-grid,.foot-grid{grid-template-columns:1fr}
.split.rev .split-art,.svc-row.rev .svc-row-art{order:0}
.hero-art{aspect-ratio:16/10;max-height:420px}
.strip .wrap,.strip.n-2 .wrap,.strip.n-3 .wrap,.strip.n-4 .wrap,.strip.n-6 .wrap{grid-template-columns:repeat(2,1fr);gap:var(--space-6)}
.strip .item .k,.strip.n-6 .item .k{font-size:clamp(1.3rem,1.1rem + 1vw,2rem)}
.gallery{grid-auto-rows:180px}
.t-wide,.t-tall,.t-std,.t-third,.t-two3{grid-column:span 6}
.t-tall{grid-row:span 1}
.cta-actions{flex-direction:row;flex-wrap:wrap}
.foot-grid{gap:var(--space-6)}
}
@media(max-width:680px){
.nav-links{position:fixed;inset:72px 0 auto 0;background:var(--paper);flex-direction:column;align-items:stretch;
gap:0;padding:var(--space-4) 6%;border-bottom:var(--hairline);box-shadow:var(--sh-md);
transform:translateY(-120%);transition:transform var(--dur) var(--ease)}
.nav-links.open{transform:translateY(0)}
.nav-links a{padding-block:var(--space-4);border-bottom:var(--hairline)}
.nav-links .btn{margin-top:var(--space-3);justify-content:center}
.nav-toggle{display:flex}
.strip .wrap,.strip.n-2 .wrap,.strip.n-3 .wrap,.strip.n-4 .wrap,.strip.n-6 .wrap{grid-template-columns:1fr}
.gallery{grid-template-columns:repeat(6,1fr)}
.foot-grid{grid-template-columns:1fr}
}
@media(prefers-reduced-motion:reduce){
*{animation-duration:.01ms!important;transition:none!important}
.reveal{opacity:1!important;transform:none!important}
html{scroll-behavior:auto}
}
/* ============================================================
PREMIUM LAYER — destylat deep-researchu branż (anty-AI, spokój).
Zmienne STOLBASZ (--accent/--ink/--paper/--line/--dark). Ruch ledwo
zauważalny, krzywa cubic-bezier(.16,.84,.44,1); prefers-reduced-motion
pokryte blanketem wyżej. Karty hairline zamiast cieni = #1 sygnał „nie-AI".
============================================================ */
/* więcej oddechu między sekcjami (liderzy: 110-130px) */
section{padding-block:clamp(64px,8vw,128px)}
/* 1) Aksamitny reveal — dłuższa, miękka krzywa zamiast „skoku" */
.reveal{transition:opacity .9s cubic-bezier(.16,.84,.44,1),transform .9s cubic-bezier(.16,.84,.44,1);will-change:opacity,transform}
/* stagger TYLKO w galerii (tam pozycja = porządek dzieci) */
.gallery .reveal:nth-child(2){transition-delay:.07s}
.gallery .reveal:nth-child(3){transition-delay:.14s}
.gallery .reveal:nth-child(4){transition-delay:.21s}
.gallery .reveal:nth-child(5){transition-delay:.28s}
.gallery .reveal:nth-child(6){transition-delay:.35s}
/* 2) Hero STATYCZNY na .hero-cine — Ken Burns CAŁKIEM WYŁĄCZONY 26.06 (3. zgłoszenie Szymona).
GENEZA: animowanie scale na ![]()
hero z teksturami (cegły/framugi) re-samplinguje obraz
klatka po klatce → na części ekranów drobne drganie/shimmer = „heroshot się trzęsie".
translateY usunięto wcześniej, scale-only + will-change/GPU NIE wystarczyły do GWARANCJI gładkości.
Krzysztof zażądał pewności („make sure, że błąd się nie pojawi") > efekt. Zero animacji = 0% drgania.
Delikatny zoom zostaje TYLKO w pełnoekranowych hero gastro/studio (hg-bg/hs-bg — tło, inny
mechanizm, chwalone, nigdy nie zgłaszane). NIE wracać do KB na .hero-cine bez realnego testu
na sprzęcie klienta — to ryzyko regresji „trzęsienia”. */
/* BEZPIECZNY "wow" na hero = jednorazowy FADE-IN (opacity), nie zoom.
opacity nie dotyka bitmapy → gładkie na KAŻDYM zdjęciu/ekranie/GPU, zero ryzyka migotania.
Geometryczny ruch (scale/translate) na .hero-cine jest ZAKAZANY (bramka pilnuje). */
@keyframes heroFade{from{opacity:0}to{opacity:1}}
.hero-cine>img{transform:none;animation:heroFade 1.1s ease-out both}
/* 3) Akcentowy hairline pod nagłówkiem sekcji, który „rysuje się" przy wejściu */
.head h2{position:relative;padding-bottom:18px}
.head h2::after{content:"";position:absolute;left:0;bottom:0;height:1px;width:0;background:var(--accent);transition:width 1s cubic-bezier(.16,.84,.44,1) .15s}
.head.center h2::after{left:50%;transform:translateX(-50%)}
.head.reveal.in h2::after,.head.center.reveal.in h2::after{width:54px}
/* 4) Karty HAIRLINE zamiast cieni/zaokrągleń (najmocniejszy anty-AI detal) */
.svc{background:transparent;border:1px solid var(--line);border-radius:var(--r-sm);box-shadow:none}
.svc:hover{box-shadow:none;border-color:var(--accent);transform:translateY(-3px)}
.trust-card{background:transparent;box-shadow:none;border:1px solid var(--line);border-top:2px solid var(--accent);border-radius:var(--r-sm)}
.tile{box-shadow:none;border-radius:var(--r-sm)}
.tile:hover{box-shadow:none}
/* 5) Sticky-nav kondensuje się po przewinięciu (sygnał dopracowania) */
.nav{transition:box-shadow .4s ease,background .4s ease}
.nav.is-stuck{box-shadow:0 1px 0 var(--line),0 14px 30px -24px rgba(0,0,0,.45)}
.nav-inner{transition:height .35s var(--ease)}
.nav.is-stuck .nav-inner{height:60px}
/* 6) MANIFESTO — pełnoekranowy cytat-bohater (zastępuje generyczne „Dlaczego my") */
.manifesto{background:var(--paper-2);text-align:center}
.manifesto .wrap{max-width:60rem}
.manifesto p{font-family:var(--font-display);font-style:italic;font-size:clamp(1.6rem,1rem + 2.4vw,2.8rem);line-height:1.32;color:var(--ink-soft);margin-inline:auto;max-width:26ch;position:relative;padding-top:var(--space-8)}
.manifesto p::before{content:"";position:absolute;top:0;left:50%;transform:translateX(-50%);width:54px;height:1px;background:var(--accent)}
.manifesto p span{color:var(--accent);font-style:italic}
/* 7) GATEWAYS — 3 duże bramy-zdjęcia (zamiast paska menu usług) */
.gateways{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-4)}
.gateway{position:relative;aspect-ratio:3/4;overflow:hidden;border-radius:var(--r-sm);display:block}
.gateway img{width:100%;height:100%;object-fit:cover;
transition:transform var(--img-dur) var(--ease),filter var(--img-dur) var(--ease)}
.gateway::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 38%,rgba(18,24,28,.74))}
/* ===== HOVER ZDJĘĆ — jedno miejsce dla WSZYSTKICH kafli ze zdjęciem (K. 04.08.2026) ===== */
@media(hover:hover){
.tile img,.gateway img,.m-tile img{filter:var(--img-rest)}
.tile:hover img,
.gateway:hover img,
.m-tile:hover img{transform:scale(var(--img-zoom));filter:var(--img-hot)}
}
.m-tile img{transition:transform var(--img-dur) var(--ease),filter var(--img-dur) var(--ease)}
.gateway .g-ttl{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:var(--space-6) var(--space-5);color:#fff;font-family:var(--font-display);font-size:1.45rem;letter-spacing:-.01em;line-height:1.15}
.gateway .g-ttl small{display:block;font-family:var(--font-body);font-size:var(--text-sm);font-weight:400;opacity:.82;letter-spacing:.03em;margin-top:5px}
@media(max-width:760px){.gateways{grid-template-columns:1fr}.gateway{aspect-ratio:16/10}}
/* 8) LOGO klienta w nagłówku (gdy podane --logo) */
/* 52px domyślnie (feedback Bartka 06.07.2026: 40px ginęło, uwaga padła 3x; ~56px sprawdzone na żywym demie anna-borowiec-makeup) */
.brand-logo{height:64px;width:auto;max-width:300px;object-fit:contain;display:block}
.nav.is-stuck .brand-logo{height:52px}
@media(max-width:680px){.brand-logo{height:46px;max-width:210px}}
/* === RWD: nagłówki na wąskich ekranach (dodane 17.07.2026 razem z fixem clamp) ===
Po przywróceniu działania clamp() dolna granica --text-h1 (2.9rem) rozpychała
dokument przy długich polskich słowach na telefonach. Tu ją zjeżdżamy. */
@media (max-width:560px){
:root{
--text-h1:clamp(1.9rem, 1.15rem + 4.4vw, 2.7rem);
--text-h2:clamp(1.5rem, 1rem + 3vw, 2.1rem);
}
.hero-cine h1{font-size:clamp(1.9rem, 1.15rem + 4.4vw, 2.7rem)}
h1,h2{overflow-wrap:break-word}
}
/* GODZINY (godziny_grid z briefu) — dzień po lewej, godziny po prawej. Wcześniej BRAK stylu
powodował sklejenie "Poniedziałek-Piątek8:00-20:00" (dodane 2026-07-21). Neutralne dla dem bez grafiku. */
.godz{display:flex;flex-direction:column;gap:2px;max-width:440px;margin-top:8px}
.godz-row{display:flex;justify-content:space-between;align-items:baseline;gap:24px;padding:10px 0;border-bottom:1px solid var(--line)}
.godz-row:last-child{border-bottom:0}
.godz-row b{font-weight:600;color:var(--ink)}
.godz-row span{color:var(--muted);white-space:nowrap}
/* === rodzina: fachowcy === */
/* ============================================================
RODZINA: FACHOWCY (hydraulik/elektryk/remont/brukarstwo/ogrodzenia)
Doklejane NA WIERZCH base.css. Dziedziczy paletę/fonty skórki (trade/elektryk).
Filozofia: telefon-bohater + zaufanie + „bezpłatna wycena". Spokój, nie krzyk.
(count-up i podwójny iframe mapy świadomie pominięte - krytyka blueprintu.)
============================================================ */
/* --- PROCES - oś „jak pracujemy" (podpis rodziny, czego nie ma w meblach) --- */
.proces{background:var(--paper-2)}
.proces-line{list-style:none;display:grid;grid-template-columns:repeat(4,1fr);gap:var(--space-5);position:relative;margin:0;padding:0}
.proces-line li{position:relative;padding-top:var(--space-7)}
.proces-line li::before{content:"";position:absolute;top:14px;left:0;right:0;height:1px;background:var(--line)}
.proces-line li:last-child::before{right:50%}
.proces-line li:first-child::before{left:50%}
.proces-line li::after{content:"";position:absolute;top:9px;left:calc(50% - 6px);width:11px;height:11px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 4px var(--paper-2)}
.proces-line .pno{font-family:var(--font-display);font-weight:800;font-size:1.5rem;color:var(--accent);letter-spacing:-.02em;display:block;margin-bottom:var(--space-3);text-align:center}
.proces-line h3{font-size:1.1rem;margin-bottom:var(--space-2);text-align:center}
.proces-line p{color:var(--muted);font-size:var(--text-sm);line-height:1.5;text-align:center;max-width:26ch;margin-inline:auto}
@media(max-width:820px){
.proces-line{grid-template-columns:1fr;gap:0}
.proces-line li{padding:var(--space-5) 0 var(--space-5) var(--space-7)}
.proces-line li::before{left:5px;right:auto;top:0;bottom:0;width:1px;height:auto}
.proces-line li:first-child::before,.proces-line li:last-child::before{left:5px;right:auto}
.proces-line li::after{top:var(--space-6);left:0}
.proces-line .pno,.proces-line h3,.proces-line p{text-align:left;margin-inline:0}
}
/* --- OBSZAR DZIAŁANIA - lokalność (chipy z REALNEGO miasta, bez drugiego iframe) --- */
.obszar .head{text-align:center;margin-inline:auto}
.obszar .head .eyebrow{justify-content:center}
.obszar-list{list-style:none;display:flex;flex-wrap:wrap;justify-content:center;gap:var(--space-3);margin:0;padding:0;max-width:60rem;margin-inline:auto}
.obszar-list li{border:1px solid var(--line);border-radius:999px;padding:var(--space-2) var(--space-5);
font-size:var(--text-sm);font-weight:600;color:var(--ink-soft);transition:border-color .24s var(--ease),color .24s var(--ease)}
.obszar-list li:hover{border-color:var(--accent);color:var(--accent)}
.obszar-list li.is-home{background:var(--accent);border-color:var(--accent);color:#fff}
/* --- STICKY-CALL - dolny pasek mobile (najważniejszy konwerter tej rodziny) --- */
.sticky-call{display:none}
@media(max-width:820px){
.sticky-call{display:grid;grid-template-columns:1fr 1fr;gap:1px;position:fixed;left:0;right:0;bottom:0;z-index:90;
background:var(--line);box-shadow:0 -6px 20px -10px rgba(0,0,0,.4)}
.sticky-call a{padding:15px 8px;text-align:center;font-weight:700;font-size:.95rem;letter-spacing:.01em}
.sc-call{background:var(--accent);color:#fff}
.sc-quote{background:var(--paper);color:var(--ink)}
body{padding-bottom:56px}
}
/* --- Blok „Awaria? Dzwoń” (opcjonalny, hydraulik/elektryk) --- */
.awaria{background:var(--dark);color:#fff}
.awaria .wrap{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--space-5);padding-block:var(--space-7)}
.awaria h3{color:#fff;font-size:clamp(1.3rem,1rem + 1.2vw,1.8rem)}
.awaria p{color:rgba(255,255,255,.72);margin-top:var(--space-2)}
.awaria .btn-accent{white-space:nowrap}
/* === CERTYFIKATY / CZYM PRACUJEMY (gated: renderuje sie tylko gdy brief poda certy/marki/gwarancja) - mocny lever dla dekarzy === */
.auto-marki .marki-list{display:flex;flex-wrap:wrap;justify-content:center;gap:clamp(.8rem,2.5vw,1.6rem);list-style:none;margin:var(--space-7) 0 0;padding:0}
.auto-marki .marki-list li{font-family:var(--font-display);text-transform:uppercase;letter-spacing:.12em;font-weight:600;
font-size:clamp(.82rem,1.5vw,1rem);color:var(--ink-soft);padding:.5rem 1rem;border:1px solid var(--line);border-radius:var(--r-sm)}
.marki-gwar{text-align:center;color:var(--muted);font-size:var(--text-sm);margin-top:var(--space-6)}
/* ============================================================
FAZA 3 - OSOBNY UKŁAD FACHOWCY (research wf_e4ed63db + krytyka z policzonym WCAG). Doklejane na wierzch.
Tożsamość: ZAUFANIE + DUŻY TELEFON + DOWÓD. Dwublok hero (zdjęcie | lity panel), bezpośrednio, solidnie.
============================================================ */
/* --- P0 KONTRAST: bursztyn jako TEKST na jasnym = 2.0 FAIL (policzone). Naprawy (bursztyn->ciemny tekst / ink). --- */
.btn-accent{color:#14171c} /* bursztyn + ciemny tekst = 8.28 PASS */
.sticky-call .sc-call{color:#14171c} /* sticky bursztyn + ciemny tekst */
.obszar-list li.is-home{background:var(--ink);border-color:var(--ink);color:#fff} /* było bursztyn+biel 2.17 -> ink+biel 16.29 */
.proces-line .pno{color:var(--ink-soft)} /* numery procesu: było bursztyn 2.0 -> ink-soft (czytelne); kropka osi zostaje bursztyn (grafika) */
/* --- Ikona telefonu (uzywana w hero hf-phone-num; nav styluje silnik NAV NOBU) --- */
.ico-tel{vertical-align:-2px;margin-right:.3em}
/* === HERO FACHOWCY — WARIANT A „PEŁNY EKRAN" (wybór K. 27.07.2026; zastąpił dwublok 46%/54%).
Powód zmiany: stary dwublok nie dobijał do końca ekranu (zostawał pusty pas nad promise-bar),
zdjęcie było ucięte w wąski pasek, a dowód (ocena/gwarancja) siedział dopiero niżej w trust-bar.
Teraz: zdjęcie na pełny ekran + gradient od lewej (tekst czytelny NIE przez wycięty panel,
tylko przez policzony overlay), gigant-telefon, dowód w pierwszym ekranie.
Zdjęcie zostaje PIERWSZYM dzieckiem sekcji (blur-guard + mobilny fallback). STATYCZNE, bez Ken Burns.
Poprzednia wersja: fachowcy.css.bak-20260727-201952-przed-heroA === */
.hero-fach{position:relative;isolation:isolate;display:flex;align-items:center;
min-height:clamp(560px,92vh,900px);min-height:clamp(560px,92svh,900px)}
.hf-photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;
background:var(--dark);z-index:-2} /* EAGER, bez animacji (zero janku) */
/* Gradient trzyma ciemno DO ~62% szerokości, bo dotąd sięga najdłuższa linia tekstu (.hf-inner 46rem).
Wcześniejsza wersja jaśniała już od 34% i końcówki linii lądowały na jasnym tle. */
.hero-fach::after{content:"";position:absolute;inset:0;z-index:-1;
background:linear-gradient(102deg,rgba(14,17,21,.95) 0%,rgba(14,17,21,.9) 30%,rgba(14,17,21,.74) 55%,rgba(14,17,21,.4) 78%,rgba(14,17,21,.26) 100%)}
.hf-panel{width:min(92%,1180px);margin-inline:auto;color:#fff; /* ta sama miara co .wrap w base.css */
padding:clamp(6.5rem,13vh,9rem) 0 clamp(2.6rem,6vh,3.6rem)}
.hf-inner{max-width:46rem}
/* Akcent SKÓRKI rozjaśniony do czytelności na ciemnym tle. NIE hardkodować bursztynu:
każda skórka ma swój akcent (elektryk=niebieski, dach=czerwony...), a stały kolor rozjeżdżał
się z przyciskami. Pierwsza deklaracja = fallback dla przeglądarek bez color-mix.
Dwa poziomy, bo WCAG stawia różne progi: --accent-lit dla MAŁEGO tekstu (kicker, próg 4.5:1;
62% daje 7.5 na tle hero), --accent-strong dla DUŻEGO (akcent w H1, próg 3:1; 74% daje 6.1
i jest wyraźnie widoczny - przy 62% ginął i wyglądał po prostu na biały). Policzone, nie na oko. */
.hero-fach{--accent-lit:rgba(255,255,255,.92);--accent-strong:rgba(255,255,255,.96)}
@supports (color:color-mix(in srgb,red,#fff)){
.hero-fach{--accent-lit:color-mix(in srgb,var(--accent) 62%,#fff);
--accent-strong:color-mix(in srgb,var(--accent) 74%,#fff)}
}
.hf-kicker{font-family:var(--font-display);font-weight:700;text-transform:uppercase;letter-spacing:.2em;
font-size:clamp(.74rem,1.4vw,.88rem);color:var(--accent-lit);display:flex;align-items:center;gap:.8rem}
.hf-kicker::before{content:"";width:34px;height:2px;background:var(--accent-lit);flex:none}
.hf-title{color:#fff;font-family:var(--font-display);font-weight:800;line-height:1.02;letter-spacing:-.022em;
font-size:clamp(2.3rem,1.6rem + 3.2vw,4.3rem);margin:var(--space-4) 0 var(--space-4);text-wrap:balance}
.hf-title em{font-style:normal;color:var(--accent-strong)} /* druga część H1 = akcent skórki, rozjaśniony */
.hf-lead{color:rgba(255,255,255,.86);font-size:clamp(1rem,.96rem + .3vw,1.18rem);line-height:1.6;max-width:38rem}
.hf-phone{display:inline-flex;flex-direction:column;gap:.2rem;margin:var(--space-6) 0 var(--space-5);width:fit-content}
.hf-phone-lab{font-size:.74rem;text-transform:uppercase;letter-spacing:.18em;color:rgba(255,255,255,.62);font-weight:600}
.hf-phone-num{font-family:var(--font-display);font-weight:800;color:#fff;font-variant-numeric:tabular-nums;white-space:nowrap;
font-size:clamp(2rem,1.5rem + 2.4vw,3.05rem);line-height:1;display:inline-flex;align-items:center}
.hf-phone-num .ico-tel{width:.7em;height:.7em;color:var(--accent);margin-right:.35em} /* ikona bursztyn, cyfry białe */
.hf-phone:hover .hf-phone-num{color:var(--accent-lit)}
.hf-actions{display:flex;flex-wrap:wrap;gap:var(--space-3)}
.hf-ghost{color:#fff;border-color:rgba(255,255,255,.5)}
.hf-trust{margin-top:var(--space-6);padding-top:var(--space-4);border-top:1px solid rgba(255,255,255,.18);
color:rgba(255,255,255,.9);font-weight:600;font-size:var(--text-sm);letter-spacing:.01em;max-width:38rem}
@media(max-width:820px){
.hero-fach{min-height:clamp(520px,88svh,760px)}
.hero-fach::after{background:linear-gradient(178deg,rgba(14,17,21,.72) 0%,rgba(14,17,21,.88) 55%,rgba(14,17,21,.95) 100%)}
.hf-panel{padding-top:clamp(5.5rem,16vh,7rem)}
.hf-lead{font-size:1rem}
}
@media(prefers-reduced-motion:reduce){.hero-fach *{animation:none!important}}
/* === PROMISE BAR: zawsze-obecna sygnatura usługowa (anty recon-collapse) === */
.fach-promise{background:var(--paper-2);border-bottom:var(--hairline);padding-block:0}
.fach-promise .wrap{padding-block:var(--space-4)}
.fp-row{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:clamp(.6rem,2.4vw,2rem)}
.fp-row li{font-family:var(--font-display);font-weight:700;text-transform:uppercase;letter-spacing:.08em;
font-size:clamp(.72rem,1.3vw,.85rem);color:var(--ink-soft);display:flex;align-items:center}
.fp-row li:not(:last-child)::after{content:"";width:6px;height:6px;border-radius:50%;background:var(--accent);margin-left:clamp(.6rem,2.4vw,2rem)}
/* === TRUST BAR (gated): jasne pasmo, cyfry INK (NIE bursztyn=2.0 FAIL), bursztyn jako kreska pod liczbą === */
.trust-bar{background:var(--paper);border-bottom:var(--hairline)}
.trust-bar .wrap{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:clamp(1rem,3vw,2.6rem);padding-block:var(--space-7)}
.tb-stats{display:flex;flex-wrap:wrap;gap:clamp(1rem,3vw,2.6rem)}
.tb-stat{display:flex;flex-direction:column;align-items:center;text-align:center;padding-bottom:var(--space-2);border-bottom:3px solid var(--accent)}
.tb-num{font-family:var(--font-display);font-weight:800;font-size:clamp(2rem,3vw,2.8rem);line-height:1;color:var(--ink);font-variant-numeric:tabular-nums}
.tb-lab{font-size:.74rem;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);margin-top:.3rem}
.tb-google{font-weight:700;color:var(--ink);font-size:var(--text-base);background:var(--paper-2);border:var(--hairline);border-radius:999px;padding:.5rem 1.1rem;font-variant-numeric:tabular-nums}
.tb-seal{font-family:var(--font-display);font-weight:700;text-transform:uppercase;letter-spacing:.06em;font-size:.85rem;
color:var(--ink);border:1px solid var(--accent);border-radius:var(--r-sm);padding:.5rem 1rem}
/* === LISTA USŁUG (zamiast bram-nastrojowych): konkret "co + zakres + wycena" === */
.fach-uslugi .fu-list{list-style:none;margin:var(--space-8) 0 0;padding:0;display:flex;flex-direction:column}
.fu-row{display:grid;grid-template-columns:minmax(11rem,1fr) 2fr auto;gap:clamp(1rem,3vw,2.5rem);align-items:center;
padding-block:var(--space-5);border-top:1px solid var(--line)}
.fu-row:last-child{border-bottom:1px solid var(--line)}
.fu-name{font-family:var(--font-display);font-weight:700;font-size:1.15rem;color:var(--ink)}
.fu-desc{color:var(--muted);font-size:var(--text-sm);line-height:1.55}
.fu-cta{font-weight:700;font-size:var(--text-sm);color:var(--accent-d);white-space:nowrap}
.fu-cta:hover{color:var(--ink)}
@media(max-width:760px){.fu-row{grid-template-columns:1fr;gap:var(--space-2)}.fu-cta{justify-self:start}}
/* === OPINIE (gated): realne cytaty z reconu === */
.opinie-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(16rem,1fr));gap:var(--space-6);margin-top:var(--space-8)}
.op-card{margin:0;background:var(--paper);border:1px solid var(--line);border-radius:var(--r-md);padding:var(--space-6);display:flex;flex-direction:column;gap:var(--space-3)}
.op-star{color:var(--accent-d);letter-spacing:.1em;font-size:.95rem}
.op-card blockquote{margin:0;color:var(--ink-soft);font-size:var(--text-base);line-height:1.6}
.op-autor{font-family:var(--font-display);font-weight:700;color:var(--ink);font-size:.95rem}
/* === SUWAK PRZED/PO (kopia z auto.css - CSS nie dziedziczy się między rodzinami; krytyka 5b) === */
.auto-ba .ba-slider{position:relative;--ba-pos:50%;max-width:62rem;margin:var(--space-8) auto 0;aspect-ratio:16/9;
overflow:hidden;border-radius:var(--r-sm);border:1px solid var(--line);touch-action:none;user-select:none;cursor:ew-resize}
.ba-slider img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.ba-before-wrap{position:absolute;inset:0;clip-path:inset(0 calc(100% - var(--ba-pos)) 0 0)}
.ba-lab{position:absolute;top:var(--space-4);z-index:3;font-family:var(--font-display);text-transform:uppercase;
letter-spacing:.1em;font-size:.7rem;color:#fff;background:rgba(10,12,15,.6);padding:.3rem .6rem;border-radius:2px}
.ba-lab-l{left:var(--space-4)}
.ba-lab-r{right:var(--space-4)}
.ba-handle{position:absolute;top:0;bottom:0;left:var(--ba-pos);width:2px;background:var(--accent);transform:translateX(-1px);z-index:4;pointer-events:none}
.ba-handle span{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:38px;height:38px;border-radius:50%;
background:var(--accent);box-shadow:0 2px 12px rgba(0,0,0,.4);display:flex;align-items:center;justify-content:center}
.ba-handle span::before,.ba-handle span::after{content:"";position:absolute;width:0;height:0;border-block:5px solid transparent}
.ba-handle span::before{left:9px;border-right:6px solid #14171c}
.ba-handle span::after{right:9px;border-left:6px solid #14171c}
.ba-podpis{text-align:center;color:var(--muted);font-size:var(--text-sm);margin-top:var(--space-5)}
/* === NAV NOBU (silnik): fachowcy === */
.nav{position:fixed;left:0;right:0;backdrop-filter:none;border-bottom:1px solid transparent;z-index:100;transition:transform .35s var(--ease),background .35s ease,box-shadow .35s ease}
.nav.nav-hidden{transform:translateY(-100%)}
.nav.is-stuck{background:transparent;box-shadow:none;border-bottom-color:transparent}
.nav.is-stuck .nav-inner{height:64px}
.nav .brand{flex-direction:row;align-items:baseline;gap:.6rem;line-height:1}
.nav .brand .name{font-family:var(--font-display);font-weight:600;font-size:1.5rem;text-transform:uppercase;letter-spacing:.14em}
.nav .brand .sub{margin-top:0;padding-left:.65rem;border-left:1px solid currentColor;font-size:.66rem;font-weight:600;letter-spacing:.22em;text-transform:uppercase}
.nav .nav-links a{font-size:.8rem;font-weight:600;text-transform:uppercase;letter-spacing:.1em;padding-block:6px}
.nav .nav-links a::after{height:1px}
.nav .nav-links a.btn-accent{font-size:.73rem;font-weight:700;text-transform:uppercase;letter-spacing:.12em;padding:.5rem 1.1rem;border-radius:4px;box-shadow:none}
.nav .nav-links a.btn-accent:hover{transform:none;box-shadow:none}
.nav .nav-links a.btn-accent{background:var(--accent);border:1px solid var(--accent);color:#14171c}
.nav .nav-links a.btn-accent:hover{background:var(--accent);border-color:var(--accent);color:#14171c;filter:brightness(1.07)}
.nav{background:transparent}
.nav::after{content:"";position:absolute;left:0;right:0;top:0;height:150px;z-index:-1;pointer-events:none;transition:opacity .35s ease;background:linear-gradient(180deg,rgba(8,6,4,.55) 0%,rgba(8,6,4,0) 100%)}
.nav.nav-solid::after{opacity:0}
.nav .brand .name{color:#f5f1ea}
.nav .brand .sub{color:rgba(245,241,234,.82)}
.nav .nav-links a:not(.btn-accent){color:rgba(245,241,234,.9)}
.nav .nav-links a:not(.btn-accent):hover,.nav .nav-links a.active:not(.btn-accent){color:#fff}
.nav .nav-links a:not(.btn-accent)::after{background:#fff}
.nav .nav-toggle span{background:#f5f1ea}
.nav.nav-solid{background:color-mix(in srgb,var(--paper) 94%,transparent);backdrop-filter:saturate(140%) blur(10px);border-bottom:var(--hairline)}
.nav.nav-solid .brand .name{color:var(--ink)}
.nav.nav-solid .brand .sub{color:var(--accent-d)}
.nav.nav-solid .nav-links a:not(.btn-accent){color:var(--ink-soft)}
.nav.nav-solid .nav-links a:not(.btn-accent):hover,.nav.nav-solid .nav-links a.active:not(.btn-accent){color:var(--ink)}
.nav.nav-solid .nav-links a:not(.btn-accent)::after{background:var(--accent-d)}
.nav.nav-solid .nav-toggle span{background:var(--ink)}
.nav.nav-solid.nav-hidden{background:transparent;box-shadow:none;border-bottom-color:transparent}
@media(min-width:681px){
.nav .nav-inner{position:relative;height:64px}
.nav .nav-links{flex:1;justify-content:center;gap:clamp(1rem,2.2vw,1.9rem);padding-right:15.5rem}
.nav .nav-links a.btn-accent{position:absolute;right:0;top:50%;transform:translateY(-50%);margin:0}
.nav:not(.nav-solid) .nav-links a.btn-accent{background:transparent;border-color:rgba(245,241,234,.55);color:#f5f1ea}
.nav:not(.nav-solid) .nav-links a.btn-accent:hover{background:var(--accent);border-color:var(--accent);color:#14171c;transform:translateY(-50%)}
}
@media(max-width:680px){
.nav .nav-links:not(.open){transform:translateY(-160%);visibility:hidden}
.nav .nav-links.open{visibility:visible}
.nav .brand .name{font-size:1.12rem;letter-spacing:.1em;line-height:1.15}
.nav .brand .sub{display:none}
.nav .brand{min-width:0;overflow:hidden;padding-right:.6rem}
.nav .nav-links{background:var(--paper)}
.nav .nav-links a:not(.btn-accent){color:var(--ink-soft)}
.nav .nav-links a:not(.btn-accent):hover,.nav .nav-links a.active:not(.btn-accent){color:var(--ink)}
}
@media(max-width:430px){
.nav .brand .name{font-size:.95rem;letter-spacing:.06em}
}
/* === MOTION LAYER v2 (silnik) === */
/* ============================================================
MOTION LAYER v2 — warstwa RUCHU wspólna dla wszystkich rodzin (2026-07-26)
------------------------------------------------------------
PO CO: dema były technicznie poprawne, ale statyczne („za mało efektowne",
K. 26.07). Ta warstwa dokłada to, co dziś odróżnia stronę premium od
porządnej: maskowane wejście nagłówków, zdjęcia odsłaniane kurtyną + zoom-out,
parallax sterowany scrollem (CSS scroll-driven, zero JS w pętli scrolla),
płynne przejścia MIĘDZY podstronami (View Transitions), stagger siatek.
ZASADY BEZPIECZEŃSTWA (wynikają z realnych wpadek — NIE łamać):
1. ⛔ ZERO ruchu geometrycznego na `.hero-cine>img` — skalowanie teksturowanej
bitmapy = shimmer („heroshot się trzęsie", 3x Szymon). Hero rusza się TYLKO
tekstem i tylko raz. Bramka predeploy tego pilnuje.
2. Stan początkowy (ukrycie) ustawia ZAWSZE JavaScript przez klasę `.mt-on`
na . Bez JS / przy błędzie JS strona wygląda dokładnie jak przed tą
warstwą — nigdy pusty ekran (wpadka Zmalovane 29.06).
3. Używamy osobnych właściwości `scale:` / `translate:` zamiast `transform:` —
dzięki temu wejście NIE kasuje istniejących hoverów (które jadą na transform).
4. Każdy efekt „drogi" (parallax) tylko desktop + tylko gdy przeglądarka umie
scroll-driven animations. Mobile dostaje sam fade/mask (bateria, jank).
5. prefers-reduced-motion wyłącza wszystko (blanket w base.css + własne guardy).
============================================================ */
:root{
--mt-ease:cubic-bezier(.16,.84,.44,1);
--mt-step:70ms; /* odstęp między kolejnymi elementami siatki */
}
/* ---------- 1) STAGGER — kolejne elementy siatki wchodzą po sobie ----------
JS ustawia --i (numer w grupie). Podbita specyficzność (:nth-child(n)) bije
sztywne delaye galerii z base.css, nie ruszając tamtego pliku. */
.reveal{transition-delay:calc(var(--i,0) * var(--mt-step))}
.gallery .reveal:nth-child(n),
.gateways .reveal:nth-child(n),
.svc-grid .reveal:nth-child(n){transition-delay:calc(var(--i,0) * var(--mt-step))}
/* dłuższy, bardziej „aksamitny" dojazd + delikatny zoom-out całej karty */
.mt-on .reveal{transition-duration:1s,1s}
/* ---------- 2) NAGŁÓWKI — wjazd linia po linii zza maski ----------
JS dzieli tekst na realne linie (po pomiarze) i owija w .mt-line>i.
Efekt „szuflady": litery wjeżdżają z dołu, obcięte krawędzią linii. */
/* 27.07.2026: zapas .08em był za mały - JS mierzy linie ZANIM doładuje się webfont, więc po
podmianie fontu tekst rośnie i maska ucina dolną część linii (na telefonie widać było ucięte
„pomiaru po montaż." nachodzące na akapit). Większy zapas + maska znika po wjeździe,
bo wtedy nie jest już do niczego potrzebna. */
.mt-lines .mt-line{display:block;overflow:hidden;padding-bottom:.2em;margin-bottom:-.2em}
.mt-lines.mt-in .mt-line{animation:mt-unmask 0s linear 1.4s forwards}
@keyframes mt-unmask{to{overflow:visible}}
.mt-lines .mt-line > i{
display:block;font-style:inherit;
translate:0 108%;
transition:translate 1.05s var(--mt-ease) var(--mt-d,0s);
}
.mt-lines.mt-in .mt-line > i{translate:0 0}
/* wariant awaryjny (nagłówek ma zagnieżdżony markup → nie dzielimy na linie) */
.mt-fade{opacity:0;translate:0 18px;transition:opacity .9s var(--mt-ease) var(--mt-d,0s),translate .9s var(--mt-ease) var(--mt-d,0s)}
.mt-fade.mt-in{opacity:1;translate:0 0}
/* ---------- 3) ZDJĘCIA — odsłanianie „kurtyną" + zoom-out do naturalnej skali ----
clip-path jedzie od dołu do góry, jednocześnie obraz schodzi z 1.10 do 1.
Uwaga: `scale:` (nie transform) → hover .tile:hover img{transform:scale(var(--img-zoom))}
nadal działa i nie kłóci się z wejściem (standard hoveru: base.css, K. 04.08.2026). */
.mt-on .mt-ph > img,
.mt-on .mt-ph > picture > img{
clip-path:inset(0 0 100% 0);
scale:1.10;
transition:clip-path 1.15s var(--mt-ease) var(--mt-d,0s),
scale 1.6s var(--mt-ease) var(--mt-d,0s);
}
.mt-on .mt-ph.in > img,
.mt-on .in .mt-ph > img,
.mt-on .mt-ph.mt-in > img,
.mt-on .mt-ph.in > picture > img,
.mt-on .in .mt-ph > picture > img{clip-path:inset(0 0 0 0);scale:1}
/* ---------- 3b) KIERUNEK KURTYNY — RÓŻNICOWANY (29.07.2026, pomysł K.) ----------
Było: KAŻDE zdjęcie na stronie odsłaniało się identycznie, z góry w dół. Przy 15 zdjęciach
ten sam ruch 15 razy czyta się jak szablon.
Research (Emil Kowalski „The Magic of Clip Path" + praktyka scroll-reveal):
reveal ma być ODSŁONIĘCIEM treści, nie ozdobą — więc kierunek nie może być losowy.
Losowanie przy każdym wejściu sprawia, że ta sama sekcja zachowuje się inaczej po powrocie
i strona robi się nerwowa. Dlatego kierunek wynika Z UKŁADU (deterministycznie):
• zdjęcie OBOK TEKSTU (split/oferta) → kurtyna pozioma, jedzie OD STRONY TEKSTU ku zdjęciu:
oko już tam wędruje, więc ruch kontynuuje czytanie zamiast z nim walczyć;
• KAFLE W SIATCE → lustrzanie: lewa kolumna odsłania się od lewej, prawa od prawej,
środek pionowo. Siatka „otwiera się" na zewnątrz, zamiast 6 razy powtórzyć ten sam gest;
• pojedyncze zdjęcie w treści → pionowo (zgodnie z kierunkiem przewijania).
Jedna scena = jeden spójny system, nigdy 4 różne kierunki obok siebie.
Technicznie: tylko clip-path + scale (kompozytor, bez layoutu), ten sam czas i easing
co dotąd — zmienia się WYŁĄCZNIE oś. */
.mt-on .mt-ph[data-dir="right"] > img,
.mt-on .mt-ph[data-dir="right"] > picture > img{clip-path:inset(0 100% 0 0)} /* widać najpierw lewą krawędź */
.mt-on .mt-ph[data-dir="left"] > img,
.mt-on .mt-ph[data-dir="left"] > picture > img{clip-path:inset(0 0 0 100%)} /* widać najpierw prawą krawędź */
.mt-on .mt-ph[data-dir="up"] > img,
.mt-on .mt-ph[data-dir="up"] > picture > img{clip-path:inset(100% 0 0 0)} /* wychodzi z dołu do góry */
.mt-on .mt-ph[data-dir] .in > img,
.mt-on .mt-ph[data-dir].in > img,
.mt-on .in .mt-ph[data-dir] > img,
.mt-on .mt-ph[data-dir].mt-in > img,
.mt-on .mt-ph[data-dir].in > picture > img,
.mt-on .in .mt-ph[data-dir] > picture > img{clip-path:inset(0 0 0 0)}
/* dryf skali w OSI kurtyny — obraz „dojeżdża" w tę samą stronę, w którą się odsłania.
Bez tego pozioma kurtyna przy pionowym zoomie wygląda jak dwa niezgrane ruchy. */
.mt-on .mt-ph[data-dir="right"] > img{transform-origin:left center}
.mt-on .mt-ph[data-dir="left"] > img{transform-origin:right center}
.mt-on .mt-ph[data-dir="up"] > img{transform-origin:center bottom}
/* podpis kafla — delikatnie widoczny od razu, pełny na hover (mniej „martwych" kafli) */
.mt-on .tile .cap{opacity:.001}
.mt-on .tile.in .cap{opacity:.9;translate:0 0;transform:none}
.mt-on .tile.in:hover .cap{opacity:1}
/* ---------- 4) PARALLAX — sterowany scrollem, natywnym CSS (bez JS) ----------
animation-timeline:view() = przeglądarka sama liczy postęp elementu w oknie.
Zero listenerów scrolla → zero janku. Desktop only, tylko gdy wspierane. */
@supports (animation-timeline: view()){
@media (prefers-reduced-motion:no-preference) and (min-width:900px){
.mt-para{overflow:hidden}
.mt-para > img{
height:114%;
position:relative;top:-7%;
animation:mtPara linear both;
animation-timeline:view();
animation-range:cover 0% cover 100%;
will-change:translate;
}
@keyframes mtPara{from{translate:0 -4.5%}to{translate:0 4.5%}}
/* sekcje wchodzą z lekkim „oddechem" — zanika przy wyjeździe z ekranu */
.mt-breathe{
animation:mtBreathe linear both;
animation-timeline:view();
animation-range:entry 0% entry 70%;
}
@keyframes mtBreathe{from{opacity:.35}to{opacity:1}}
}
}
/* ---------- 4b) ŻYWY NAGŁÓWEK — przenikanie kadrów ----------
Warstwy leżą DOKŁADNIE na zdjęciu hero i różnią się tylko przezroczystością.
⛔ Żadnego scale/translate — to skalowanie bitmapy dawało migotanie na teksturach.
Warstwy wstawia JS; bez niego nic się nie dzieje i nagłówek jest statyczny jak dotąd. */
.mt-hero-layer{
position:absolute;inset:0;width:100%;height:100%;
object-fit:cover;object-position:inherit;
opacity:0;transition:opacity 1.6s ease-in-out;
pointer-events:none;z-index:1;
}
/* ⚠️ KONIECZNE: warstwa jest zwykłym ![]()
wewnątrz hero, więc łapie ją reguła
`.hero-cine > img{animation:heroFade both}` z base.css. Animacja CSS ma pierwszeństwo przed
zwykłymi deklaracjami — trzymała przezroczystość na klatce startowej i przenikanie nie działało.
Zdejmujemy JEDYNIE to jednorazowe pojawienie się (heroFade), celowo BEZ !important, żeby
rodziny z delikatnym zoomem tła (gastro/auto/dom/studio) mogły go warstwie przekazać. */
.hero-cine > img.mt-hero-layer{animation:none}
.mt-hero-layer.mt-show{opacity:1}
/* gdy pokazujemy kadr z rotacji, oryginalne zdjęcie zostaje pod spodem (nigdy nie znika
całkowicie — gdyby warstwa nie doszła, pod spodem zawsze jest pełne zdjęcie) */
img[data-rotate].mt-under{opacity:1}
/* treść nagłówka musi zostać NAD warstwami */
.hero-cine > .wrap,.hero-cine .hero-copy,
.hg-copy,.ha-copy,.hd-copy,.hs-copy,.hf-copy,.hk-copy,.hero-spa .wrap{position:relative;z-index:3}
/* 🔴 FIX 31.07.2026 (zgłoszenie K. na demie M4M): przy zmianie kadru ZNIKAŁ napis w nagłówku.
Powód: warstwa rotacji miała z-index:1, czyli leżała NAD przyciemnieniem (z-index:-1) i - w
rodzinie „fachowcy" - nad panelem z tekstem (.hf-panel nie miał własnego z-index, więc szedł
normalnym flow). Efekt: kadr się pojawiał i zasłaniał tytuł, kadr znikał i tytuł wracał.
Naprawa jest dwustronna, żeby nie zależeć od jednej reguły:
1) warstwa ląduje DOKŁADNIE tam, gdzie zdjęcie tła danej rodziny (z-index:-2),
2) wszystkie kontenery treści nagłówka dostają twardy z-index:3.
Skutek: zmieniają się WYŁĄCZNIE zdjęcia w tle, napis stoi nieruchomo cały czas.
(hero-cine nie ruszamy - tam img ma z-index:0, a ::after/wrap leżą wyżej i działało dobrze.) */
.hero-fach > img.mt-hero-layer,.hero-gastro > img.mt-hero-layer,.hero-auto > img.mt-hero-layer,
.hero-dom > img.mt-hero-layer,.hero-studio > img.mt-hero-layer{z-index:-2}
.hf-panel,.hf-inner,.hd-panel,.hk-panel,.ha-inner,.hs-inner,.hg-inner{position:relative;z-index:3}
@media(prefers-reduced-motion:reduce){
.mt-hero-layer{display:none}
}
/* ---------- 5) PRZEJŚCIA MIĘDZY PODSTRONAMI (View Transitions) ----------
Klik w menu przestaje być białym mignięciem — strony przenikają, a pasek
nawigacji zostaje w miejscu (nazwany element). Przeglądarki bez wsparcia
nawigują normalnie — zero ryzyka. */
@view-transition{navigation:auto}
@media (prefers-reduced-motion:no-preference){
::view-transition-old(root){animation:mtVtOut .26s ease both}
::view-transition-new(root){animation:mtVtIn .42s var(--mt-ease) both}
@keyframes mtVtOut{from{opacity:1}to{opacity:0}}
@keyframes mtVtIn{from{opacity:0}to{opacity:1}}
}
.nav{view-transition-name:mt-nav}
footer{view-transition-name:mt-foot}
/* ---------- 6) PASEK POSTĘPU CZYTANIA — 2px w kolorze marki ----------
Też scroll-driven (bez JS). Wstawiany przez JS tylko gdy przeglądarka umie. */
.mt-progress{
position:fixed;top:0;left:0;z-index:60;
height:2px;width:100%;
background:var(--accent);
transform-origin:0 50%;
scale:0 1;
pointer-events:none;
}
@supports (animation-timeline: scroll()){
.mt-progress{animation:mtProg linear both;animation-timeline:scroll(root block)}
@keyframes mtProg{from{scale:0 1}to{scale:1 1}}
}
/* ---------- 7) PRZYCISKI — przelot światła + magnes (JS) ----------
Nakładka jest przezroczysta i przelotowa → NIE zmienia kontrastu tekstu
(kontrasty WCAG policzone dla wszystkich rodzin zostają w mocy). */
.btn{position:relative;overflow:hidden;isolation:isolate}
.btn::after{
content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
background:linear-gradient(100deg,transparent 32%,rgba(255,255,255,.20) 50%,transparent 68%);
translate:-120% 0;
}
@media (prefers-reduced-motion:no-preference){
.btn:hover::after{translate:120% 0;transition:translate .75s var(--mt-ease)}
}
.btn{transition:transform var(--dur) var(--ease),box-shadow var(--dur) var(--ease),
background var(--dur) var(--ease),translate .25s ease-out}
/* ---------- 8) LINKI NAWIGACJI / LISTY — mikro-detale ---------- */
.mt-on .svc,.mt-on .trust-card{transition:transform .5s var(--mt-ease),border-color .35s ease,box-shadow .35s ease}
.mt-on .svc:hover{transform:translateY(-4px)}
/* kotwice nie chowają się pod przyklejonym paskiem */
:target,[id]{scroll-margin-top:96px}
/* ---------- 9) LICZBY (count-up) ---------- */
.mt-num{font-variant-numeric:tabular-nums}
/* ---------- 9b) ZWALNIANIE WARSTW GPU (27.07 — zgłoszenie „zamula na komputerze") ----------
`.reveal{will-change:opacity,transform}` z base.css każe przeglądarce trzymać dla KAŻDEGO
pojawiającego się elementu osobną warstwę w pamięci karty graficznej. Deklaracja jest stała —
warstwa nigdy nie jest zwalniana, więc na typowej podstronie wisi ich ~26 przy ~157 elementach.
Na komputerze ze zintegrowaną grafiką to realny koszt (pamięć + praca kompozytora).
Element, który już wjechał, nie będzie się więcej animował → warstwa jest zbędna.
⚠️ KLUCZOWE: NIE wolno tego wiązać z klasą `.in` — ona pojawia się w chwili STARTU przejścia,
więc zdjęlibyśmy warstwę dokładnie wtedy, gdy jest potrzebna. Klasę `mt-settled` dokłada JS
dopiero po `transitionend`, czyli gdy ruch faktycznie się skończył. Brak JS = zostaje jak było. */
.reveal.mt-settled{will-change:auto}
.mt-settled > img,.mt-settled > picture > img{will-change:auto}
/* ---------- 10) WYŁĄCZNIK GLOBALNY ----------
Gdy user woli mniej ruchu — zdejmujemy wszystko, łącznie ze scroll-driven
(blanket z base.css nie obejmuje animation-timeline). */
@media (prefers-reduced-motion:reduce){
.mt-lines .mt-line > i{translate:0 0}
.mt-fade{opacity:1;translate:0 0}
.mt-on .mt-ph > img,.mt-on .mt-ph > picture > img{clip-path:none;scale:1}
.mt-para > img{animation:none;height:100%;top:0}
.mt-breathe{animation:none}
.mt-progress{display:none}
.mt-on .tile .cap{opacity:0}
}
/* === HERO-FIT (29.07.2026) — hero DOPASOWUJE SIĘ do wysokości okna =========================
Zgłoszenie K. 29.07: na jego laptopie przyciski CTA w hero były ucięte dolną krawędzią
(Modern House). Pomiar headless (1512x879 → realny widok 792 px): dolna krawędź CTA
wypadała 123 px POD ekranem. Nawet przy maksymalnym oknie (982) było -20 px.
DLACZEGO POPRZEDNI FIX NIE DZIAŁAŁ: 27.07 dołożyliśmy @media(max-height:820px) — próg.
Widok K. ma ~792-895 px, czyli TUŻ NAD progiem → reguła w ogóle się nie włączała.
Progi są kruche: każdy inny laptop/dok/pasek zakładek przesuwa granicę.
ROZWIĄZANIE: zero progów. Każdy rozmiar, który decyduje o wysokości hero (typografia,
odstępy, padding), dostaje `min(dotychczasowa-wartość, X svh)` — czyli na wysokim ekranie
nic się nie zmienia, a im niższe okno, tym płynniej mniejsze. Treści NIE ucinamy.
Doklejane na SAM KONIEC styles.css (po motion) → wygrywa kaskadę, nie rusza reguł w miejscu.
Weryfikacja: tools-retrofit/measure_fold.py (mierzy zapas pod CTA dla 720/800/879/982). */
/* ---------- HERO KINOWY (strona główna, rodziny „editorial") ---------- */
.hero-cine .wrap{padding-block:min(var(--space-8),4svh)}
.hero-cine .eyebrow{margin-bottom:min(var(--space-5),2svh)}
.hero-cine h1{font-size:min(clamp(2.9rem,2rem + 4.4vw,5.2rem),7.6svh);
margin-bottom:min(var(--space-5),2.4svh)}
.hero-cine .lead{font-size:min(1.125rem,2.3svh);line-height:1.55;
margin-bottom:min(var(--space-7),3.2svh)}
/* ---------- HERO FACHOWCY — wariant A (pełny ekran) ---------- */
.hf-panel{padding-top:min(clamp(6.5rem,13vh,9rem),11svh);
padding-bottom:min(clamp(2.6rem,6vh,3.6rem),4svh)}
.hf-title{font-size:min(clamp(2.3rem,1.6rem + 3.2vw,4.3rem),7svh);
margin-top:min(var(--space-4),1.8svh);margin-bottom:min(var(--space-4),1.8svh)}
.hf-lead{font-size:min(1.18rem,2.3svh);line-height:1.5}
.hf-phone{margin-top:min(var(--space-6),2.8svh);margin-bottom:min(var(--space-5),2.2svh)}
.hf-phone-num{font-size:min(clamp(2rem,1.5rem + 2.4vw,3.05rem),5.2svh)}
.hf-trust{margin-top:min(var(--space-6),2.6svh);padding-top:min(var(--space-4),1.6svh)}
/* Telefon: tam liczy się czytelność, nie upychanie — skalowanie wysokością wyłączone,
bo przy 844 px wysokości ekranu svh-limity zaczęłyby zmniejszać tekst bez potrzeby. */
@media(max-width:680px){
.hero-cine h1{font-size:clamp(1.9rem,1.15rem + 4.4vw,2.7rem)}
.hero-cine .lead{font-size:.98rem}
.hf-title{font-size:clamp(2.1rem,1.6rem + 3.2vw,3rem)}
.hf-lead{font-size:1rem}
.hf-phone-num{font-size:clamp(1.9rem,1.5rem + 2.4vw,2.5rem)}
}
/* === /HERO-FIT === */
/* === auto-paleta z marki klienta (źródło: logo) === */
:root{--accent:#697744;--accent-d:#556230;--accent-soft:rgba(105,119,68,0.10);--paper:#FAFAF8;--paper-2:#EFF1ED;--paper-3:#E5E7E3;--ink:#20211D;--ink-soft:#474843;--muted:#7B7C78;--line:rgba(32,33,29,.12);}
.btn-accent{color:#fff}
.nav .nav-links a.btn-accent{color:#fff}
.btn-accent[data-accent-d],.cta-d .btn-accent{color:#fff}