:root{--page-title-display:none;}/* Start custom CSS for html, class: .elementor-element-cc95d21 *//* ====== Zmienne i reset ====== */
:root{
  --accent:#B18813;
  --text:#222;
  --muted:#555;
  --bg:#f9f9f9;
  --card:#fff;
  --radius:14px;
}
*{box-sizing:border-box}
img{max-width:100%;height:auto;display:block}

/* ====== Layout podstawowy ====== */
section{padding:32px 16px}
.container{max-width:1100px;margin:0 auto}
h1,h2,h3{color:var(--text);margin:0 0 12px}
h1{font-size:36px;font-weight:800;line-height:1.2}
h2{font-size:28px;font-weight:700}
h3{font-size:20px;font-weight:700}
p,li{color:var(--muted);font-size:16px;line-height:1.75}
ul{margin:10px 0 0 18px}
strong{color:var(--text)}
a{text-decoration:none;color:inherit}
a:hover{color:var(--accent)}

/* ====== HERO (tło + overlay box) ====== */
.hero-home{padding:0;position:relative;overflow:hidden}
.hero-wrap{position:relative;height:480px}
.hero-bg{
  width:100%;height:100%;
  object-fit:cover;object-position:center;
  filter:brightness(0.7)
}
.hero-inner{
  position:absolute;inset:0;
  display:flex;align-items:center;justify-content:center;
  text-align:center;padding:0 16px
}
.hero-box{
  background:rgba(255,255,255,0.08);
  backdrop-filter:saturate(120%) blur(2px);
  border:1px solid rgba(255,255,255,0.2);
  border-radius:var(--radius);
  padding:20px 22px;max-width:900px;width:100%;
}
.hero-title{color:#fff;font-size:38px;margin:0 0 8px}
.hero-sub{color:#f0f0f0;max-width:820px;margin:0 auto}
.btn{
  display:inline-block;background:var(--accent);color:#fff;
  padding:12px 26px;border-radius:12px;font-weight:700;margin-top:12px;
  transition:.25s
}
.btn:hover{background:#000;color:#fff}

/* ====== Treść (sekcje opisowe) ====== */
.services{background:var(--bg)}
.services .container > p{margin-bottom:12px}

/* ====== USP (zakres usług w kaflach) ====== */
.usp{background:#fff}
.usp-grid{
  display:grid;grid-template-columns:repeat(4,1fr);
  gap:24px;margin-top:10px
}
.usp-item{
  background:var(--card);border-radius:var(--radius);
  box-shadow:0 4px 12px rgba(0,0,0,0.05);
  padding:18px;min-width:0
}
.usp-title{margin:0 0 6px}
.usp-desc{font-size:15px}

/* ====== CTA pasek ====== */
.cta-strip{
  background:linear-gradient(90deg, rgba(177,136,19,0.12), rgba(0,0,0,0.03));
  border-radius:var(--radius)
}
.cta-wrap{
  display:flex;gap:16px;align-items:center;justify-content:space-between;flex-wrap:wrap
}
.cta-wrap p{margin:0;font-weight:600;color:var(--text)}

/* ====== FAQ (grid kart Q&A) ====== */
.testimonials{background:#fff}
.testi-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:22px}
.testi{
  background:var(--card);border-radius:var(--radius);padding:16px;
  box-shadow:0 3px 10px rgba(0,0,0,0.05);min-width:0
}
.testi p{margin:0 0 8px}
.testi p:last-child{margin-bottom:0}

/* ====== Pasek kontaktowy ====== */
.contact-bar{background:#000;color:#fff;border-radius:var(--radius)}
.contact-flex{
  display:flex;gap:18px;align-items:center;justify-content:center;flex-wrap:wrap
}
.contact-flex a{color:#fff;font-weight:700}
.contact-flex .sep{opacity:.35}

/* ====== Responsywność ====== */
@media (max-width:1024px){
  .hero-wrap{height:420px}
  .hero-title{font-size:34px}
  .usp-grid{grid-template-columns:repeat(2,1fr)}
  .testi-grid{grid-template-columns:1fr 1fr}
}

/* ---------- MOBILE PATCH (najważniejsze) ---------- */
@media (max-width:640px){
  section{padding:22px 8px}
  .container{padding:0 6px}
  h1{font-size:28px;line-height:1.3;text-align:center}
  h2{font-size:22px}

  /* 1) Hero ma wysokość wg treści, nie ucina przycisku */
  .hero-wrap{
    position:relative;
    height:auto;            /* zamiast sztywnego height */
    min-height:420px;       /* żeby było „hero” nawet przy krótkim tytule */
    padding:38px 0 44px;    /* oddech dla boxu i przycisku */
  }

  /* 2) Zdjęcie wypełnia całe hero (niezależnie od wysokości treści) */
  .hero-bg{
    position:absolute; inset:0;
    width:100%; height:100%;
    object-fit:cover; object-position:center;
    filter:brightness(0.7);
  }

  /* 3) Tekst zawsze nad zdjęciem */
  .hero-inner{position:relative; z-index:2; padding:0 12px}

  .hero-title{font-size:26px;margin-bottom:8px}
  .hero-box{padding:16px;max-width:92%;margin:0 auto}
  .hero-sub{font-size:14.5px;line-height:1.55}

  /* 4) Siatki pod telefon */
  .usp-grid{grid-template-columns:1fr;gap:16px}
  .testi-grid{grid-template-columns:1fr}
  .cta-wrap{flex-direction:column;align-items:flex-start}
}

/* --- MOBILE: czytelny hero (czarny tekst, biały box) --- */
@media (max-width:640px){
  /* tło zostaje, ale ledwo widoczne */
  .hero-bg{
    position:absolute; inset:0;
    width:100%; height:100%;
    object-fit:cover; object-position:center;
    opacity:.18;                    /* było pełne, teraz delikatne */
    filter:grayscale(100%) brightness(1);
    z-index:1;
  }

  /* treść hero na białym pudełku */
  .hero-inner{ position:relative; z-index:2; padding:0 12px; }
  .hero-box{
    background:#fff;                /* pełna biel */
    border:1px solid #e9e9e9;
    box-shadow:0 10px 24px rgba(0,0,0,.08);
    padding:16px;
    max-width:92%;
    margin:0 auto;
  }

  /* czarny nagłówek + ciemniejszy opis */
  .hero-title{ color:var(--text) !important; font-size:26px; line-height:1.3; margin-bottom:8px; }
  .hero-sub{ color:var(--muted) !important; font-size:14.5px; line-height:1.55; }

  /* przycisk zostaje akcentowy i nie ucieka */
  .hero-box .btn{ margin-top:10px; padding:11px 20px; white-space:nowrap; }

  /* sekcja rośnie razem z treścią – nic się nie ucina */
  .hero-wrap{
    position:relative;
    height:auto;          /* zamiast sztywnej wysokości */
    min-height:380px;     /* wciąż wygląda jak hero */
    padding:34px 0 42px;  /* oddech nad/po CTA */
  }
}
.elementor-kit-6 a {
    color: white;/* End custom CSS */