/* ============================================================
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:#F3F1EC; /* główne tło */
--paper-2:#E6E3DB; /* sekcje alternatywne (chłodny jasny szary) */
--paper-3:#E6E3DB; /* delikatne wypełnienia */
--ink:#23211E; /* tekst główny — chłodny grafit */
--ink-soft:#43403A; /* nagłówki drugorzędne */
--muted:#87837A; /* tekst poboczny */
--line:rgba(35,33,30,.12);/* hairline */
--accent:#8A6B3C; /* stonowany petrol-slate — jedyny akcent */
--accent-d:#6E5430;
--accent-soft:rgba(138,107,60,.10);
--dark:#23211E; /* sekcje ciemne (stopka/CTA) */
/* 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:'Lora',serif;
--font-body:'Manrope',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;height:104px}
.brand{display:flex;flex-direction:column;line-height:1}
.brand .name{font-family:var(--font-display);font-weight:800;font-size:1.35rem;letter-spacing:.04em}
.brand .sub{font-size:.62rem;letter-spacing:.34em;text-transform:uppercase;color:var(--muted);margin-top:5px}
.nav-links{display:flex;align-items:center;gap:var(--space-5)}
.nav-links a{font-size:var(--text-sm);font-weight:500;color:var(--ink-soft);position:relative;padding-block:4px;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)}
/* ---------- 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}
.strip .wrap{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--space-6);padding-block:var(--space-8)}
.strip .item .k{font-family:var(--font-display);font-size:clamp(1.6rem,1.2rem + 1.4vw,2.4rem);font-weight:800;letter-spacing:-.02em;color:#fff}
.strip .item .v{font-size:var(--text-sm);color:rgba(255,255,255,.66);margin-top:var(--space-2);line-height:1.45}
.strip .item{border-left:2px solid var(--accent);padding-left:var(--space-5)}
/* ---------- 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}
/* podpisy kafelków galerii: niewidoczne wizualnie, dostępne dla czytników i wyszukiwarek */
.gallery-masonry .m-tile .cap{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;
clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
.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 .6s var(--ease)}
.tile:hover{box-shadow:var(--sh-md)}
.tile:hover img{transform:scale(1.05)}
.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{grid-template-columns:repeat(2,1fr);gap:var(--space-7)}
.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-5)}
}
@media(max-width:680px){
.nav-links{position:fixed;inset:76px 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{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:84px}
/* 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 .8s var(--ease),filter .5s var(--ease)}
.gateway::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 38%,rgba(18,24,28,.74))}
.gateway:hover img{transform:scale(1.05);filter:brightness(1.05)}
.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:76px;width:auto;max-width:340px;object-fit:contain;display:block}
.nav.is-stuck .brand-logo{height:62px}
/* Na telefonie navbar nie kondensuje się — menu rozwijane jest pozycjonowane
na sztywno pod nim (inset), więc zmiana wysokości po scrollu odklejałaby je od paska. */
@media(max-width:680px){
.brand-logo{height:50px;max-width:230px}
.nav-inner,.nav.is-stuck .nav-inner{height:76px}
.nav.is-stuck .brand-logo{height:50px}
}
/* === 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}
/* === 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(1.05)}
nadal działa i nie kłóci się z wejściem. */
.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:108px}
/* ---------- 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 ze zdjęć klienta (dopasowanie do estetyki socials) === */
:root{--accent:#9A6328;--accent-d:#75491A;--accent-soft:rgba(154,99,40,0.10);--paper:#F9F9F8;--paper-2:#EFEEED;--paper-3:#E8E7E5;}
/* ============================================================
10) Rozbudowa serwisu (12.08.2026): 6 podstron, galeria z filtrami,
formularz kontaktowy. Tokeny i komponenty jak wyżej — bez nowej estetyki.
============================================================ */
/* Akcent zrównany z logo klienta (#8A6B3C ze znaku MARKO MEBLE),
wcześniej auto-paleta dawała cieplejsze #9A6328 i logo odcinało się od strony. */
:root{--accent:#8A6B3C;--accent-d:#6E5430;--accent-soft:rgba(138,107,60,.10)}
/* stopka ma teraz cztery kolumny (doszła kolumna Oferta) */
.foot-grid{grid-template-columns:1.5fr 1fr 1fr 1.1fr}
@media(max-width:980px){.foot-grid{grid-template-columns:1fr 1fr}}
@media(max-width:600px){.foot-grid{grid-template-columns:1fr}}
/* podpis pod cytatem z opinii */
.trust-card .who{margin-top:var(--space-4);font-family:var(--font-display);font-size:.78rem;
font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--accent)}
.trust-card p{font-size:var(--text-lg);line-height:1.5;color:var(--ink-soft)}
/* filtry galerii */
.filtry{display:flex;flex-wrap:wrap;gap:var(--space-2);margin-bottom:var(--space-6)}
.f-btn{font-family:inherit;font-size:var(--text-sm);font-weight:600;color:var(--ink-soft);
background:transparent;border:1px solid var(--line);border-radius:999px;
padding:var(--space-2) var(--space-5);cursor:pointer;
transition:color var(--dur) var(--ease),border-color var(--dur) var(--ease),background var(--dur) var(--ease)}
.f-btn:hover{border-color:var(--accent);color:var(--ink)}
.f-btn.is-on{background:var(--accent);border-color:var(--accent);color:#fff}
.m-tile[hidden]{display:none}
/* lightbox */
.gallery-masonry .m-tile img{cursor:zoom-in}
.lb{position:fixed;inset:0;z-index:100;display:none;place-items:center;
background:rgba(18,20,22,.92);padding:var(--space-5)}
.lb.open{display:grid}
.lb img{max-width:min(1400px,94vw);max-height:88vh;width:auto;height:auto;
border-radius:var(--r-sm);box-shadow:var(--sh-lg)}
.lb figcaption{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;
clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
.lb-x,.lb-prev,.lb-next{position:absolute;background:rgba(255,255,255,.10);border:none;color:#fff;
width:46px;height:46px;border-radius:50%;font-size:1.4rem;line-height:1;cursor:pointer;
display:grid;place-items:center;transition:background var(--dur) var(--ease)}
.lb-x:hover,.lb-prev:hover,.lb-next:hover{background:rgba(255,255,255,.22)}
.lb-x{top:var(--space-5);right:var(--space-5)}
.lb-prev{left:var(--space-5);top:50%;transform:translateY(-50%)}
.lb-next{right:var(--space-5);top:50%;transform:translateY(-50%)}
@media(max-width:680px){.lb-prev{left:var(--space-3)}.lb-next{right:var(--space-3)}}
/* select w formularzu — dopasowany do input/textarea */
.form select{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);appearance:none;cursor:pointer;
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%2387837A' stroke-width='1.6' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
background-repeat:no-repeat;background-position:right var(--space-4) center}
.form select:focus{outline:none;border-color:var(--accent);background-color:#fff}
.form .note a{color:var(--accent);border-bottom:1px solid var(--accent-soft)}
.form.wyslany .fld,.form.wyslany button{display:none}
/* znaki firmowe: Google przy opiniach, WhatsApp i Facebook w kontakcie i stopce */
.gwiazdki{display:inline-flex;gap:2px;color:#E8A33D;vertical-align:-2px}
.trust-card .gwiazdki{margin-bottom:var(--space-3)}
.trust-card .who{display:flex;align-items:center;gap:var(--space-2)}
.ocena-btn{display:inline-flex;align-items:center;gap:var(--space-3);margin-top:var(--space-5);
background:#fff;border-color:var(--line)}
.ocena-btn strong{font-family:var(--font-display);font-size:1.15rem;letter-spacing:-.01em}
.ocena-btn .muted{font-weight:500}
.hero-ocena{display:inline-flex;align-items:center;gap:var(--space-3);margin-top:var(--space-6);
padding:var(--space-3) var(--space-5);border-radius:999px;color:#fff;
background:rgba(255,255,255,.12);backdrop-filter:blur(6px);border:1px solid rgba(255,255,255,.28);
transition:background var(--dur) var(--ease)}
.hero-ocena:hover{background:rgba(255,255,255,.2)}
.hero-ocena strong{font-family:var(--font-display);font-size:1.1rem}
.hero-ocena span{font-size:var(--text-sm);opacity:.9}
.btn-wa:hover{border-color:#25D366;color:#128C4A}
.btn-fb:hover{border-color:#1877F2;color:#1877F2}
.foot-social{display:flex;flex-wrap:wrap;gap:var(--space-4);margin-top:var(--space-2)}
.foot-social a{display:inline-flex;align-items:center;gap:var(--space-2);margin-bottom:0}
/* ============================================================
11) Typografia nagłówków (13.08.2026): Big Shoulders Display.
Logo klienta to wąskie, kondensowane wersaliki — Lora jako serif stała
obok niego jak z innego projektu. Kondensowany grotesk czyta się z logo
jak jeden system.
============================================================ */
:root{--font-display:'Big Shoulders Display',sans-serif}
/* kondensowany krój jest węższy i niższy optycznie niż Lora — stąd większy
stopień i ciaśniejsza interlinia, żeby H1 trzymał tę samą wagę w kadrze */
h1{font-size:clamp(3.2rem,2.3rem + 4.4vw,5.6rem);letter-spacing:-.01em;line-height:.95}
h2{font-size:clamp(2.3rem,1.8rem + 2.3vw,3.4rem);letter-spacing:-.005em;line-height:1}
/* drobne nagłówki zostają w Manrope: w kartach oferty i FAQ kondensowany
krój robi się ciasny i gorzej czyta się przy 1,2 rem */
h3{font-family:var(--font-body);font-weight:700;font-size:var(--text-h3);letter-spacing:-.01em;line-height:1.25}
/* cytat-manifest zostaje serifem — Big Shoulders nie ma odmiany pochyłej */
.manifesto p{font-family:'Lora',serif}
/* wąski krój mieści więcej znaków w linii i częściej zostawia sierotę
(jedno słowo w ostatniej linii) — balance rozkłada wiersze równo */
h1,h2{text-wrap:balance}
/* ============================================================
12) Przebudowa 13.08.2026 — inspiracja układem treeste.com:
monochromatyczna paleta (czerń zamiast brązu), pełnoekranowy hero
z wyśrodkowanym, bardzo dużym nagłówkiem, pasek korzyści pod hero,
liczba jako plakietka na zdjęciu, linki-CTA w wersalikach.
Brąz zostaje wyłącznie w logo, więc znak jest jedynym kolorem na stronie.
============================================================ */
:root{
--accent:#23211E; /* grafit — dawniej brąz #8A6B3C */
--accent-d:#000;
--accent-soft:rgba(35,33,30,.07);
}
/* ---------- HERO: wyśrodkowany, pełnoekranowy ---------- */
.hero-cine{min-height:clamp(620px,92vh,1000px);min-height:clamp(620px,92svh,1000px)}
.hero-cine::after{background:linear-gradient(180deg,rgba(12,14,16,.52) 0%,rgba(12,14,16,.34) 45%,rgba(12,14,16,.62) 100%)}
.hero-cine .wrap{text-align:center}
.hero-cine .hero-copy{max-width:min(1100px,94%);margin-inline:auto}
.hero-cine .eyebrow{justify-content:center}
.hero-cine h1{
font-size:min(clamp(2.6rem,1.1rem + 9.2vw,9.5rem),15svh);
line-height:.9;letter-spacing:-.015em;margin-bottom:var(--space-5);
text-shadow:0 2px 40px rgba(0,0,0,.35);
}
.hero-cine .lead{margin-inline:auto;max-width:58ch;font-size:min(1.2rem,2.4svh)}
.hero-cine .hero-actions{justify-content:center}
.hero-cine .hero-ocena{margin-inline:auto}
/* przycisk główny jak w referencji: pełny prostokąt, bez zaokrągleń */
.hero-cine .btn-accent{background:#1A1917;border-radius:2px;padding:var(--space-4) var(--space-8)}
.hero-cine .btn-accent:hover{background:#000}
/* ---------- pasek korzyści pod hero ---------- */
.korzysci{background:var(--paper);padding-block:var(--space-8)}
.korzysci .wrap{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-5)}
.korzysc{display:flex;gap:var(--space-4);align-items:flex-start;
border:1px solid var(--line);border-radius:var(--r-md);padding:var(--space-6) var(--space-5);background:#fff}
.korzysc svg{flex:none;color:var(--ink)}
.korzysc h3{font-size:1.06rem;margin-bottom:var(--space-2)}
.korzysc p{font-size:var(--text-sm);color:var(--muted);line-height:1.55;max-width:34ch}
@media(max-width:900px){.korzysci .wrap{grid-template-columns:1fr}}
/* ---------- plakietka z liczbą na zdjęciu ---------- */
.split-art{overflow:visible}
.split-art img{border-radius:var(--r-lg)}
.plakietka{position:absolute;right:-18px;bottom:-18px;z-index:3;
background:var(--dark);color:#fff;padding:var(--space-5) var(--space-6);border-radius:var(--r-sm);
box-shadow:var(--sh-lg);text-align:center;min-width:132px}
.plakietka .l{font-family:var(--font-display);font-size:3.2rem;line-height:.9;font-weight:700;display:block}
.plakietka .o{font-size:.68rem;letter-spacing:.18em;text-transform:uppercase;color:rgba(255,255,255,.72);
margin-top:var(--space-2);display:block}
@media(max-width:680px){.plakietka{right:8px;bottom:-12px;padding:var(--space-4) var(--space-5)}
.plakietka .l{font-size:2.4rem}}
/* ---------- link-CTA w wersalikach (zamiast kolejnego przycisku) ---------- */
.link-cta{display:inline-block;font-size:var(--text-sm);font-weight:700;letter-spacing:.14em;
text-transform:uppercase;color:var(--ink);border-bottom:2px solid var(--ink);padding-bottom:4px;
transition:opacity var(--dur) var(--ease)}
.link-cta:hover{opacity:.6}
/* przy wyśrodkowanym hero kreska kickera wisiała asymetrycznie z lewej */
.hero-cine .eyebrow::before{display:none}
.hero-cine .eyebrow{letter-spacing:.24em}
/* ============================================================
13) Sekcja-kafel ze zdjęciem w tle (wzór: treeste.com) — zdjęcie nie
rozciąga się od krawędzi do krawędzi, tylko siedzi w kontenerze z białym
marginesem dookoła. Ten sam zabieg dostaje hero.
============================================================ */
:root{--margines-kafla:clamp(12px,1.6vw,28px)}
/* hero jako kafel, a nie pas na całą szerokość */
.hero-cine{
margin:var(--margines-kafla);
border-radius:4px;overflow:hidden;border-bottom:none;
min-height:clamp(600px,88vh,960px);min-height:clamp(600px,88svh,960px);
}
/* ciemna sekcja ze zdjęciem w tle i treścią w dwóch kolumnach */
.foto-kafel{position:relative;margin:var(--margines-kafla);border-radius:4px;overflow:hidden;
padding-block:clamp(56px,7vw,110px)}
.foto-kafel>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
.foto-kafel::after{content:"";position:absolute;inset:0;z-index:1;
background:linear-gradient(180deg,rgba(16,16,15,.72),rgba(16,16,15,.8));
backdrop-filter:saturate(.55)}
.foto-kafel .wrap{position:relative;z-index:2;display:grid;grid-template-columns:1.05fr .95fr;
gap:clamp(32px,5vw,84px);align-items:start}
.foto-kafel h2{color:#fff;margin-bottom:var(--space-6)}
.foto-kafel p{color:rgba(255,255,255,.78);margin-bottom:var(--space-5);max-width:52ch}
.foto-kafel .eyebrow{color:rgba(255,255,255,.85);margin-bottom:var(--space-4)}
.foto-kafel .eyebrow::before{background:rgba(255,255,255,.85)}
@media(max-width:900px){.foto-kafel .wrap{grid-template-columns:1fr}}
/* lista cech z plusem i kreską pod spodem */
.cechy{list-style:none;margin:0;padding:0;padding-top:var(--space-4)}
.cechy li{display:flex;align-items:center;gap:var(--space-4);
padding-block:var(--space-5);border-bottom:1px solid rgba(255,255,255,.22)}
.cechy li:first-child{padding-top:0}
.cechy .plus{flex:none;width:22px;height:22px;position:relative;opacity:.85}
.cechy .plus::before,.cechy .plus::after{content:"";position:absolute;background:#fff}
.cechy .plus::before{left:0;right:0;top:50%;height:1.5px;transform:translateY(-50%)}
.cechy .plus::after{top:0;bottom:0;left:50%;width:1.5px;transform:translateX(-50%)}
.cechy span{color:#fff;font-weight:700;font-size:var(--text-sm);letter-spacing:.1em;text-transform:uppercase}
/* ============================================================
14) Korekty 13.08 wieczór: karty korzyści na szerokość hero,
CTA i stopka na czerni z mniejszą typografią.
============================================================ */
/* pasek korzyści trzyma tę samą szerokość co kafel hero, a nie wąski .wrap */
.korzysci .wrap{width:auto;margin-inline:var(--margines-kafla);max-width:none}
/* czerń zamiast ciemnego brązu w sekcjach ciemnych (CTA, stopka, plakietka) */
:root{--dark:#0B0B0A}
.cta{background:#000}
footer{background:#000}
/* CTA: nagłówek zszedł ze skali H2 — przy kondensowanym kroju wielkie litery
na pustym tle wyglądały na niedokończoną sekcję */
.cta .wrap{grid-template-columns:1.25fr .75fr;gap:var(--space-7);align-items:center;
padding-block:clamp(44px,5vw,72px)}
.cta h2{font-size:clamp(1.8rem,1.4rem + 1.5vw,2.6rem);line-height:1.02;max-width:16ch}
.cta p{font-size:var(--text-base);color:rgba(255,255,255,.7);max-width:46ch}
.cta .eyebrow{color:rgba(255,255,255,.6);margin-bottom:var(--space-3)}
.cta .eyebrow::before{background:rgba(255,255,255,.6)}
.cta-actions{align-items:flex-end}
@media(max-width:900px){.cta .wrap{grid-template-columns:1fr}.cta-actions{align-items:flex-start}}
/* stopka: drobniejsza siatka i mniejszy tekst */
footer{padding-block:clamp(56px,6vw,88px) var(--space-6)}
.foot-brand .name{font-size:1.15rem;letter-spacing:.06em}
.foot-brand p{font-size:var(--text-sm);color:rgba(255,255,255,.55);max-width:32ch;margin-top:var(--space-3)}
.foot-col h4{font-size:.66rem;letter-spacing:.18em;color:rgba(255,255,255,.42);margin-bottom:var(--space-3)}
.foot-col a,.foot-col p{font-size:var(--text-sm);color:rgba(255,255,255,.74);margin-bottom:var(--space-2)}
.foot-social{gap:var(--space-4);margin-top:var(--space-3)}
.foot-social a{font-size:var(--text-sm)}
.foot-bot{font-size:.8rem;color:rgba(255,255,255,.45);padding-top:var(--space-5);
border-top:1px solid rgba(255,255,255,.12)}
/* CTA miało padding sekcji i własny — stąd pas pustki na pół ekranu */
.cta{padding-block:0}
/* drugi przycisk ginął: ciemny ghost na czarnym tle */
.cta .btn-ghost{color:#fff;border-color:rgba(255,255,255,.38)}
.cta .btn-ghost:hover{border-color:#fff;color:#fff}
/* karty korzyści: wyższe, żeby wypełniły przestrzeń między hero a kolejną sekcją */
.korzysci{padding-block:clamp(28px,3.4vw,52px)}
.korzysc{padding:var(--space-8) var(--space-7);gap:var(--space-5);align-items:flex-start;
min-height:230px;flex-direction:column}
.korzysc h3{font-size:1.15rem;margin-bottom:var(--space-3)}
.korzysc p{font-size:var(--text-base);line-height:1.6;max-width:38ch}
@media(max-width:900px){.korzysc{min-height:0}}
/* ============================================================
15) Bramy do usług jako rozsuwane panele — wysokość i marginesy jak kafel
hero, przyciemnienie zdejmowane po najechaniu, a najechany panel rozpycha
sąsiednie zamiast zmieniać wysokość sekcji.
============================================================ */
.gateways{
display:flex;gap:10px;
margin-inline:var(--margines-kafla);
height:clamp(440px,72vh,780px);
grid-template-columns:none;
}
.gateway{
flex:1 1 0;min-width:0;height:100%;aspect-ratio:auto;border-radius:4px;
filter:brightness(.72) saturate(.92);
transition:flex-grow .6s var(--ease),filter .45s var(--ease);
}
.gateway img{transition:transform .8s var(--ease)}
.gateway::after{background:linear-gradient(180deg,transparent 42%,rgba(12,14,16,.78))}
/* pozostałe przygasają jeszcze bardziej, żeby wybrany wyraźnie wychodził na wierzch */
.gateways:hover .gateway{filter:brightness(.55) saturate(.85)}
.gateway:hover,.gateway:focus-visible{flex-grow:2.6;filter:brightness(1) saturate(1)}
.gateway .g-ttl{padding:var(--space-7) var(--space-6)}
.gateway .g-ttl small{opacity:0;transition:opacity .4s var(--ease) .1s;max-height:0}
.gateway:hover .g-ttl small{opacity:.85;max-height:4em}
@media(max-width:900px){
.gateways{flex-direction:column;height:auto}
.gateway{flex:none;height:clamp(240px,42vw,340px);filter:brightness(.78)}
.gateways:hover .gateway{filter:brightness(.78)}
.gateway .g-ttl small{opacity:.85;max-height:none}
}
/* ============================================================
16) Navbar 13.08 wieczór: stała wysokość, pełne tło, rozwijane "Projekty".
============================================================ */
/* pasek nie kondensuje się po przewinięciu i nie prześwituje — wcześniej
półprzezroczyste tło z blurem mieszało się ze zdjęciem hero pod spodem */
.nav{background:var(--paper);backdrop-filter:none}
.nav.is-stuck .nav-inner,.nav-inner{height:104px}
.nav.is-stuck .brand-logo,.brand-logo{height:76px}
.brand-logo{max-width:440px}
@media(max-width:680px){
.nav-inner,.nav.is-stuck .nav-inner{height:76px}
.brand-logo,.nav.is-stuck .brand-logo{height:48px;max-width:270px}
}
/* rozwijana pozycja menu */
.ma-grupa{position:relative}
.ma-przycisk{display:inline-flex;align-items:center;gap:6px;font-family:inherit;
font-size:var(--text-sm);font-weight:500;color:var(--ink-soft);background:none;border:none;
cursor:pointer;padding-block:4px;position:relative;transition:color var(--dur) var(--ease)}
.ma-przycisk svg{transition:transform var(--dur) var(--ease);margin-top:1px}
.ma-przycisk::after{content:"";position:absolute;left:0;bottom:0;width:0;height:1.5px;
background:var(--accent);transition:width var(--dur) var(--ease)}
.ma-grupa:hover .ma-przycisk,.ma-grupa:focus-within .ma-przycisk,.ma-przycisk.active{color:var(--ink)}
.ma-grupa:hover .ma-przycisk::after,.ma-grupa:focus-within .ma-przycisk::after,
.ma-przycisk.active::after{width:100%}
.ma-grupa:hover .ma-przycisk svg,.ma-grupa:focus-within .ma-przycisk svg{transform:rotate(180deg)}
.ma-podmenu{position:absolute;top:100%;left:50%;transform:translate(-50%,8px);
min-width:250px;background:#fff;border:1px solid var(--line);border-radius:var(--r-sm);
box-shadow:var(--sh-md);padding:var(--space-3);display:flex;flex-direction:column;gap:2px;
opacity:0;visibility:hidden;pointer-events:none;
transition:opacity var(--dur) var(--ease),transform var(--dur) var(--ease)}
/* mostek nad podmenu — bez niego kursor gubi hover w przerwie między przyciskiem a listą */
.ma-podmenu::before{content:"";position:absolute;left:0;right:0;top:-10px;height:10px}
.ma-grupa:hover .ma-podmenu,.ma-grupa:focus-within .ma-podmenu{
opacity:1;visibility:visible;pointer-events:auto;transform:translate(-50%,0)}
.ma-podmenu a{display:block;padding:var(--space-3) var(--space-4);border-radius:2px;
font-size:var(--text-sm);color:var(--ink-soft);white-space:nowrap;
transition:background var(--dur) var(--ease),color var(--dur) var(--ease)}
.ma-podmenu a::after{display:none}
.ma-podmenu a:hover,.ma-podmenu a.active{background:var(--paper-2);color:var(--ink)}
/* na telefonie menu jest listą — podmenu rozwinięte na stałe, z wcięciem */
@media(max-width:680px){
.ma-grupa{width:100%}
.ma-przycisk{width:100%;justify-content:space-between;padding-block:var(--space-4);
border-bottom:var(--hairline);font-size:var(--text-base)}
.ma-przycisk svg{display:none}
.ma-podmenu{position:static;transform:none;opacity:1;visibility:visible;pointer-events:auto;
min-width:0;border:none;box-shadow:none;background:transparent;padding:0}
.ma-podmenu a{padding-left:var(--space-5);border-bottom:var(--hairline);border-radius:0}
.ma-grupa:hover .ma-podmenu{transform:none}
}
/* ============================================================
17) Typografia 13.08 noc: Inter Tight (nagłówki) + Inter (treść).
Inter to najbliższy dostępny odpowiednik SF Pro, a Inter Tight w wadze 900
z ciasnym trackingiem daje w hero ten ciężki blok tekstu, o który chodziło.
Big Shoulders okazał się za bardzo charakterny na całą stronę.
============================================================ */
:root{--font-display:'Inter Tight',sans-serif;--font-body:'Inter',sans-serif}
h1{font-weight:900;letter-spacing:-.05em;line-height:.9}
h2{font-weight:800;letter-spacing:-.04em;line-height:1}
h3{font-family:var(--font-display);font-weight:700;letter-spacing:-.025em;line-height:1.25}
.hero-cine h1{letter-spacing:-.055em}
.brand .name,.foot-brand .name{font-family:var(--font-display);font-weight:800;letter-spacing:-.02em}
.plakietka .l,.strip .item .k,.ocena-btn strong,.hero-ocena strong,.trust-card .big{
font-family:var(--font-display);font-weight:800;letter-spacing:-.03em}
/* cytat-manifest wraca do jednej rodziny — Inter ma odmianę pochyłą */
.manifesto p{font-family:var(--font-body);font-weight:400;font-style:italic;letter-spacing:-.02em}
.svc .ic,.trust-card .who{font-family:var(--font-body);font-weight:600}
/* pasek nieco niższy, logo w nowej proporcji (monogram nad nazwą) */
.nav-inner,.nav.is-stuck .nav-inner{height:88px}
.brand-logo,.nav.is-stuck .brand-logo{height:56px;max-width:220px}
@media(max-width:680px){
.nav-inner,.nav.is-stuck .nav-inner{height:70px}
.brand-logo,.nav.is-stuck .brand-logo{height:44px;max-width:170px}
}
/* ============================================================
18) Poprawki 13.08 noc: ocena Google w rogu hero, rysowane ikony w kartach,
numer telefonu w pasku zamiast przycisku.
============================================================ */
/* plakietka z oceną wychodzi spod przycisków do prawego górnego rogu kafla */
.hero-cine .hero-ocena{position:absolute;top:var(--space-6);right:var(--space-6);z-index:3;margin-top:0}
@media(max-width:680px){
.hero-cine .hero-ocena{top:var(--space-4);right:var(--space-4);left:auto;
padding:var(--space-2) var(--space-4);gap:var(--space-2)}
.hero-cine .hero-ocena span{display:none}
}
/* ikony w kartach korzyści: rysowane obrazki zamiast kresek */
.ikona-karty{width:88px;height:88px;object-fit:contain;margin-bottom:var(--space-2)}
.korzysc{gap:var(--space-3)}
/* numer telefonu w pasku — bez tła, żeby jedynym przyciskiem na stronie
pozostało CTA w treści */
.nav-tel{display:inline-flex;align-items:center;gap:var(--space-2);
font-weight:700;font-size:var(--text-base);letter-spacing:-.01em;color:var(--ink);
white-space:nowrap;transition:opacity var(--dur) var(--ease)}
.nav-tel:hover{opacity:.65}
.nav-tel::after{display:none}
.nav-links a.nav-tel{color:var(--ink)}
@media(max-width:680px){
.nav-tel{justify-content:center;margin-top:var(--space-4);padding-block:var(--space-3);
border:1px solid var(--line);border-radius:var(--r-sm)}
}
/* hero oddycha: interlinia 0.9 skleiła obie linie nagłówka, a przyciski
siedziały tuż pod literami z podkreśleniem (ę, ó) */
.hero-cine .eyebrow{margin-bottom:var(--space-7)}
.hero-cine h1{line-height:1;margin-bottom:var(--space-8)}
.hero-cine .hero-actions{gap:var(--space-4)}
@media(max-width:680px){
.hero-cine .eyebrow{margin-bottom:var(--space-5)}
.hero-cine h1{margin-bottom:var(--space-6)}
}
/* ============================================================
19) Galeria na stronie głównej: pełna szerokość i mozaika o różnych
proporcjach zamiast trzech równych pasów.
============================================================ */
.gallery{margin-inline:var(--margines-kafla);gap:10px;grid-auto-rows:clamp(150px,17vw,230px)}
.gallery .tile{border-radius:4px}
/* rozpiętości: c = kolumny z dwunastu, r2 = kafel na dwa wiersze */
.t-c3{grid-column:span 3}
.t-c4{grid-column:span 4}
.t-c5{grid-column:span 5}
.t-c6{grid-column:span 6}
.t-c7{grid-column:span 7}
.t-c8{grid-column:span 8}
.t-r2{grid-row:span 2}
@media(max-width:900px){
.gallery{grid-auto-rows:clamp(130px,26vw,200px)}
.t-c3,.t-c4,.t-c5{grid-column:span 6}
.t-c7,.t-c8{grid-column:span 12}
}
@media(max-width:560px){
.t-c3,.t-c4,.t-c5,.t-c6,.t-c7,.t-c8{grid-column:span 12}
.t-r2{grid-row:span 1}
.gallery{grid-auto-rows:clamp(190px,52vw,280px)}
}
/* CTA na mocno wyciemnionej realizacji — zdjęcie ma być tłem, nie treścią,
więc nakładka jest gęstsza niż w sekcji "Jak to robimy" */
.cta{position:relative;overflow:hidden}
.cta>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
/* zerujemy width/height/border-radius z dawnej dekoracyjnej plamy w rogu (linia ~293),
inaczej nakładka zostaje kołem 360×360 zamiast przykryć całe zdjęcie */
.cta::before{content:"";position:absolute;inset:0;right:0;top:0;width:auto;height:auto;
border-radius:0;z-index:1;
background:linear-gradient(100deg,rgba(0,0,0,.86) 0%,rgba(0,0,0,.72) 34%,rgba(0,0,0,.5) 100%)}
.cta .wrap{position:relative;z-index:2}
/* nagłówek sekcji i akcja w jednej linii — przycisk pod galerią gubił się
między zdjęciami a kolejną sekcją */
/* H2 i przycisk w jednym rzędzie — wyrównanie robi flex, więc trzyma się
niezależnie od stopnia pisma i liczby wierszy tytułu */
.head-rzad{display:flex;align-items:center;justify-content:space-between;
gap:var(--space-6);flex-wrap:wrap}
.head-rzad h2{margin-bottom:0;flex:1 1 30rem}
.head-rzad .btn{flex:none}
@media(max-width:680px){
.head-rzad{align-items:flex-start}
.head-rzad .btn{margin-top:var(--space-4)}
}
/* ============================================================
20) Hero 14.08 — lżejszy nagłówek w dwóch wierszach.
Waga 900 przy dwuwierszowym tytule robiła się ścianą tekstu,
więc schodzimy do 700 i lekko rozluźniamy tracking. Stopień
liczony pod dwa wiersze, nie jeden — stąd niższy limit svh.
============================================================ */
h1{font-weight:700;letter-spacing:-.035em}
.hero-cine h1{
font-weight:700;letter-spacing:-.03em;line-height:1.02;
font-size:min(clamp(2.2rem,1rem + 5.4vw,5.4rem),9.6svh);
text-shadow:0 1px 3px rgba(0,0,0,.34), 0 6px 34px rgba(0,0,0,.42);
}
@media(max-width:680px){
.hero-cine h1{font-size:clamp(1.9rem,1.1rem + 4.2vw,2.6rem);line-height:1.06}
}
/* Nowe zdjęcie hero ma jasny sufit dokładnie tam, gdzie siedzi nadtytuł
i pierwszy wiersz H1 — stara zasłona (.52/.34/.62) zostawiała tam biel
na bieli. Środek gradientu dociążony najmocniej. */
.hero-cine::after{
background:linear-gradient(180deg,
rgba(10,10,9,.46) 0%, rgba(10,10,9,.38) 45%, rgba(10,10,9,.62) 100%);
}
/* ============================================================
21) Nagłówek podstron 14.08 — tytuł osobno, zdjęcie osobno.
Układ jak na stronie głównej: kafel ze zdjęciem trzyma boczny
margines --margines-kafla i nie dotyka krawędzi okna. Tekst
przenosi się na papier, więc nie walczy z tłem zdjęcia.
============================================================ */
.pagehead{
position:static;min-height:0;display:block;overflow:visible;
border-bottom:0;background:var(--paper);
padding-block:0; /* odstęp trzyma .wrap, inaczej sumuje się z paddingiem sekcji */
}
.pagehead::after{display:none}
.pagehead .wrap{
position:static;z-index:auto;color:var(--ink);
padding-block:clamp(2.75rem,4.5vw,4.75rem) clamp(1.75rem,2.5vw,2.75rem);
}
.pagehead h1{color:var(--ink);max-width:20ch}
.pagehead .eyebrow{color:var(--muted)}
.pagehead .eyebrow::before{background:var(--muted)}
.pagehead p{color:var(--ink-soft);margin-top:var(--space-4);max-width:56ch}
.pagehead-foto{
margin:0 var(--margines-kafla) clamp(var(--space-7),5vw,var(--space-9));
height:clamp(340px,62vh,720px);height:clamp(340px,62svh,720px);
overflow:hidden;position:relative;
}
.pagehead-foto img{width:100%;height:100%;object-fit:cover;display:block}
/* zdjęcie z warsztatu to kadr z bliska: w pełnej wysokości sam sprzęt zjada ekran */
.pagehead-foto.foto-niska{height:clamp(300px,42vh,520px);height:clamp(300px,42svh,520px)}
@media(max-width:680px){
.pagehead-foto{height:clamp(240px,44svh,380px)}
}
/* Nagłówek podstrony schodzi o stopień niżej niż H1 strony głównej — bez
nadtytułu zostają dwa poziomy tekstu i cała sekcja czyta się spokojniej. */
.pagehead h1{
font-size:clamp(1.9rem,1.35rem + 2.1vw,3.15rem);
letter-spacing:-.028em;line-height:1.06;max-width:22ch;
}
.pagehead p{font-size:clamp(.98rem,.94rem + .18vw,1.08rem);max-width:52ch}
/* ============================================================
22) FAQ jako lista rozwijana 14.08.
Siatka kart dawała nierówne wysokości (odpowiedzi mają różną
długość) i zmuszała do czytania sześciu bloków naraz. Lista
na pełną szerokość pokazuje same pytania, odpowiedź na żądanie.
Bez JS — /.
============================================================ */
.faq-lista{border-top:1px solid var(--line);max-width:78ch}
.faq-poz{border-bottom:1px solid var(--line)}
.faq-poz summary{
display:flex;align-items:flex-start;justify-content:space-between;gap:var(--space-5);
padding-block:clamp(1rem,1.6vw,1.35rem);cursor:pointer;list-style:none;
font-family:var(--font-display);font-weight:600;letter-spacing:-.02em;
font-size:clamp(1.02rem,.97rem + .28vw,1.2rem);line-height:1.35;color:var(--ink);
transition:color .2s var(--ease);
}
.faq-poz summary::-webkit-details-marker{display:none}
.faq-poz summary:hover{color:var(--muted)}
.faq-poz summary:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
/* znak + z dwóch kresek; po otwarciu zostaje sama pozioma */
.faq-znak{position:relative;flex:none;width:14px;height:14px;margin-top:.3em}
.faq-znak::before,.faq-znak::after{
content:"";position:absolute;inset:50% 0 auto 0;height:1.5px;background:var(--ink);
transform:translateY(-50%);transition:transform .25s var(--ease),opacity .25s var(--ease);
}
.faq-znak::after{transform:translateY(-50%) rotate(90deg)}
.faq-poz[open] .faq-znak::after{transform:translateY(-50%) rotate(0);opacity:0}
.faq-odp{padding-bottom:clamp(1rem,1.6vw,1.4rem);max-width:68ch}
.faq-odp p{color:var(--ink-soft);margin:0}
@media(max-width:680px){
.faq-lista{max-width:none}
.faq-poz summary{gap:var(--space-4)}
}
/* ============================================================
23) Zoom kafli pod kursorem 14.08.
Reguła .tile:hover img{transform:scale(1.05)} istniała od dawna,
ale animacja wejścia („kurtyna") nadpisuje `transition` na tych
samych obrazach i nie wymienia w niej transform — więc powiększenie
następowało skokowo. Dokładamy transform do listy przejść.
============================================================ */
.mt-on .mt-ph > img,
.mt-on .mt-ph > picture > img{
transition:clip-path 1.15s var(--mt-ease) var(--mt-d,0s),
scale 1.6s var(--mt-ease) var(--mt-d,0s),
transform .85s var(--ease);
}
.gallery .tile:hover img,
.gallery-masonry .m-tile:hover img{transform:scale(1.05)}
@media(prefers-reduced-motion:reduce){
.gallery .tile:hover img,
.gallery-masonry .m-tile:hover img{transform:none}
}
/* ============================================================
24) Panele usług — jaśniejszy stan spoczynku 14.08.
Przy brightness .72 zdjęcia czytały się jak wygaszone; podnosimy
je blisko naturalnej jasności, a sąsiadów pod kursorem przygaszamy
łagodniej. Żeby podpisy nie zginęły na jaśniejszym tle, gradient
u dołu zaczyna się wyżej i schodzi głębiej.
============================================================ */
.gateway{filter:brightness(1.07) saturate(1.02)}
.gateways:hover .gateway{filter:brightness(.9) saturate(.97)}
.gateway:hover,.gateway:focus-visible{filter:brightness(1.1) saturate(1.04)}
/* zasłona tylko pod podpisem — góra i środek kadru zostają nietknięte */
.gateway::after{
background:linear-gradient(180deg,
transparent 64%, rgba(12,14,16,.12) 82%, rgba(12,14,16,.5) 100%);
}
/* cień zamiast przyciemniania całego kadru trzyma podpis czytelnym */
.gateway .g-ttl{text-shadow:0 1px 2px rgba(0,0,0,.62),0 2px 10px rgba(0,0,0,.5),0 8px 30px rgba(0,0,0,.45)}
@media(max-width:900px){
.gateway{filter:none}
}
/* Logo w stopce zamiast nazwy pisanej tekstem — biała wersja znaku na czerni */
.foot-logo{
display:block;height:clamp(38px,4.4vw,52px);width:auto;max-width:230px;
margin-bottom:var(--space-5);
}
/* Nagłówek podstrony biegnie do prawej krawędzi zdjęcia i dopiero tam się łamie.
Lewy margines trzyma linię kolumny tekstu, prawy równa się z kaflem foto. */
.pagehead .wrap{
width:auto;
margin-left:max(4%, calc((100% - 1180px) / 2));
margin-right:var(--margines-kafla);
}
.pagehead h1{
max-width:none;
/* balance dzieliło wiersze po równo i łamało tytuł w połowie dostępnej
szerokości — tu ma biec do końca i dopiero wtedy schodzić niżej */
text-wrap:pretty;
}
/* ============================================================
25) „Jak to robimy" — lista rozwijana na ciemnym tle.
Cztery hasła zostają widoczne, treść dochodzi po kliknięciu.
Znak + jest ten sam co wcześniej, tylko po otwarciu robi się minus.
============================================================ */
.cechy{list-style:none;margin:0;padding:var(--space-4) 0 0}
.cecha{border-top:1px solid rgba(255,255,255,.16)}
.cecha:last-child{border-bottom:1px solid rgba(255,255,255,.16)}
.cecha summary{
display:flex;align-items:center;justify-content:space-between;gap:var(--space-4);
padding-block:var(--space-4);cursor:pointer;list-style:none;
color:#fff;font-weight:700;font-size:var(--text-sm);letter-spacing:.1em;
text-transform:uppercase;transition:opacity .2s var(--ease);
}
.cecha summary::-webkit-details-marker{display:none}
.cecha summary:hover{opacity:.72}
.cecha summary:focus-visible{outline:2px solid #fff;outline-offset:3px}
.cecha .plus{flex:none;width:22px;height:22px;position:relative;opacity:.85}
.cecha .plus::before,.cecha .plus::after{content:"";position:absolute;background:#fff;
transition:transform .25s var(--ease),opacity .25s var(--ease)}
.cecha .plus::before{left:0;right:0;top:50%;height:1.5px;transform:translateY(-50%)}
.cecha .plus::after{top:0;bottom:0;left:50%;width:1.5px;transform:translateX(-50%)}
.cecha[open] .plus::after{opacity:0;transform:translateX(-50%) scaleY(.2)}
.cecha-tresc{padding-bottom:var(--space-5);max-width:52ch}
.cecha-tresc p{margin:0;color:rgba(255,255,255,.76);font-size:var(--text-sm);
letter-spacing:0;text-transform:none;font-weight:400;line-height:1.6}
/* Realizacje: bez powtórzonego nagłówka sekcji filtry startują tuż pod H1 */
.galeria-sekcja{padding-top:0}
/* ============================================================
26) Hero — Facebook i WhatsApp obok pastylki z oceną.
Trzy elementy w jednym rzędzie w prawym górnym rogu; ikony
są okrągłe i mają to samo szkło co pastylka Google.
============================================================ */
.hero-cine .hero-kontakty{
position:absolute;top:var(--space-6);right:var(--space-6);z-index:3;
display:flex;align-items:stretch;gap:var(--space-3);
}
.hero-cine .hero-kontakty .hero-ocena{position:static;margin:0}
/* stretch daje tę samą wysokość co pastylka z oceną, a szerokość liczymy
z tego samego paddingu i wysokości jej zawartości (31px) — wychodzi koło */
.hero-ikona{
display:inline-flex;align-items:center;justify-content:center;
align-self:stretch;width:calc(2 * var(--space-3) + 31px);flex:none;
border-radius:999px;color:#fff;
background:rgba(255,255,255,.12);backdrop-filter:blur(6px);
border:1px solid rgba(255,255,255,.28);
transition:background var(--dur) var(--ease),transform var(--dur) var(--ease);
}
.hero-ikona svg{display:block}
.hero-ikona:hover{background:rgba(255,255,255,.24);transform:translateY(-1px)}
.hero-ikona:focus-visible{outline:2px solid #fff;outline-offset:3px}
@media(max-width:680px){
.hero-cine .hero-kontakty{top:var(--space-4);right:var(--space-4);gap:var(--space-2)}
}
/* Kafelek z dwoma akapitami — bez tego zdania zlewają się w jeden blok */
.svc p + p{margin-top:.9em}
/* Pozycja „Projekty" to