/* ==========================================================================
   LECHITA — warstwa „premium": efekty, złote akcenty, mikrointerakcje.
   Dokładana na wierzch style.css (kolory i układ bez zmian).
   ========================================================================== */

/* ---------------- 1. papierowe ziarno + złote linie pomocnicze ---------- */
body::before{content:'';position:fixed;inset:0;z-index:0;pointer-events:none;opacity:.5;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.035'/%3E%3C/svg%3E")}
body{position:relative}

section{position:relative}

/* ---------------- 2. kicker z kreską + numer sekcji w tle --------------- */
.lab{display:inline-flex;align-items:center;gap:12px}
.lab::before{content:'';width:34px;height:1px;background:currentColor;opacity:.65}
.sec-num{position:absolute;right:24px;top:calc(var(--sp) - 14px);font-size:clamp(54px,11vw,150px);line-height:.8;
  font-weight:500;color:transparent;-webkit-text-stroke:1px rgba(157,116,18,.22);pointer-events:none;user-select:none;z-index:0}
section>.wrap{position:relative;z-index:1}

/* ---------------- 3. nagłówek: złota linia pod logo, shine na CTA -------- */
header.site .wrap{position:relative}
header.site .wrap::after{content:'';position:absolute;left:24px;right:24px;bottom:-1px;height:1px;
  background:linear-gradient(90deg,var(--gold) 0%,rgba(157,116,18,0) 45%);opacity:.5}
header.site.small{background:rgba(255,255,255,.97)}
nav.main a{position:relative;overflow:hidden}
nav.main a::after{content:'';position:absolute;left:0;bottom:0;width:100%;height:1px;background:var(--gold);
  transform:scaleX(0);transform-origin:left;transition:transform .35s var(--ease)}
nav.main a:hover::after,nav.main li.on a::after{transform:scaleX(1)}

.btn{position:relative;overflow:hidden;box-shadow:0 6px 18px rgba(157,116,18,.16)}
.btn::after{content:'';position:absolute;top:0;left:-120%;width:55%;height:100%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.55),transparent);transform:skewX(-18deg);transition:left .55s var(--ease)}
.btn:hover::after{left:130%}
.btn:hover{transform:translateY(-2px);box-shadow:0 12px 26px rgba(157,116,18,.26)}
.btn.g{box-shadow:none}
.btn.g:hover{box-shadow:0 8px 20px rgba(21,23,27,.10)}

/* ---------------- 4. HERO: złota ramka offset + karta statystyk --------- */
.hero{position:relative;overflow:hidden}
.hero::after{content:'';position:absolute;inset:auto 0 0 0;height:1px;background:var(--line)}
.hero .img45{position:relative;box-shadow:0 26px 60px rgba(21,23,27,.16)}
.hero .img45::after{content:'';position:absolute;inset:14px -14px -14px 14px;border:1px solid rgba(157,116,18,.55);z-index:-1}
.hero .img45 img{transition:transform 1.2s var(--ease)}
.hero .img45:hover img{transform:scale(1.03)}
.hero h1{letter-spacing:-.005em}
.hero h1 em{position:relative;background:linear-gradient(100deg,#9d7412,#c9a24a 55%,#8a6410);-webkit-background-clip:text;background-clip:text;color:transparent}
.hero-stats{background:#fff;border:1px solid var(--line);box-shadow:0 18px 40px rgba(21,23,27,.07);
  padding:20px 24px;margin-top:30px;position:relative;max-width:520px}
.hero-stats::before{content:'';position:absolute;left:0;top:0;bottom:0;width:2px;background:var(--gold)}
.hero-stats b{font-size:2rem;background:linear-gradient(120deg,#9d7412,#cba648);-webkit-background-clip:text;background-clip:text;color:transparent}
.hero-stats span{letter-spacing:.18em}

/* ---------------- 5. karty: złota krawędź, krzyżyki, stagger ------------ */
.card,.tile,.formbox,.cta,.aside{position:relative}
.card::before,.tile::before{content:'';position:absolute;left:0;top:0;height:2px;width:100%;background:var(--gold);
  transform:scaleX(0);transform-origin:left;transition:transform .45s var(--ease);z-index:2}
.card:hover::before,.tile:hover::before{transform:scaleX(1)}
.card::after,.tile::after{content:'';position:absolute;right:10px;top:10px;width:9px;height:9px;z-index:2;
  border-top:1px solid rgba(157,116,18,.5);border-right:1px solid rgba(157,116,18,.5);opacity:0;transition:opacity .35s}
.card:hover::after,.tile:hover::after{opacity:1}
.card .ph img{filter:saturate(.94)}
.card:hover .ph img{filter:saturate(1.06)}
.cta{background:linear-gradient(120deg,#fbf8f1,#ffffff 60%);border-left:3px solid var(--gold)}
.formbox::after{content:'';position:absolute;left:0;right:0;bottom:0;height:2px;
  background:linear-gradient(90deg,var(--gold),rgba(157,116,18,0))}

/* ---------------- 6. pas zdjęcia: parallax + złota podkreślka ----------- */
.band{overflow:hidden;position:relative}
.band img{will-change:transform;transition:transform .1s linear}
.band .cap{border-left:2px solid var(--gold);padding-left:14px}

/* ---------------- 7. atuty: numer jak pieczątka ------------------------- */
.why .it{position:relative;transition:transform .35s var(--ease)}
.why .it:hover{transform:translateY(-4px)}
.why .it::before{content:'';position:absolute;left:0;top:-2px;width:38px;height:2px;background:var(--gold)}
.why .n{font-family:var(--f);font-size:1.5rem;font-weight:500;color:transparent;-webkit-text-stroke:1px rgba(157,116,18,.85);line-height:1}

/* ---------------- 8. galeria + lightbox --------------------------------- */
.gal a{position:relative}
.gal a::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(157,116,18,0) 40%,rgba(157,116,18,.22));
  opacity:0;transition:opacity .35s}
.gal a:hover::after{opacity:1}
.gal a::before{content:'⤢';position:absolute;right:10px;bottom:8px;z-index:2;color:#fff;font-size:1rem;opacity:0;transition:.3s;text-shadow:0 2px 8px rgba(0,0,0,.6)}
.gal a:hover::before{opacity:1}

/* ---------------- 9. boczna nawigacja kropkami (desktop) --------------- */
.dots{position:fixed;right:18px;top:50%;transform:translateY(-50%);z-index:90;display:flex;flex-direction:column;gap:12px}
.dots a{width:8px;height:8px;border-radius:50%;border:1px solid rgba(157,116,18,.55);transition:.3s;display:block}
.dots a.on{background:var(--gold);border-color:var(--gold);transform:scale(1.25)}
.dots a:hover{background:var(--gold)}
@media(max-width:1100px){.dots{display:none}}

/* ---------------- 10. stopka: duży wordmark ---------------------------- */
footer.site{position:relative}
footer.site::before{content:'';position:absolute;left:0;right:0;top:0;height:2px;
  background:linear-gradient(90deg,var(--gold),rgba(157,116,18,0) 70%)}
.wm{font-size:clamp(2.4rem,9vw,7rem);line-height:.9;font-weight:600;letter-spacing:.06em;color:transparent;
  -webkit-text-stroke:1px rgba(255,255,255,.16);margin:34px 0 0;user-select:none}

/* ---------------- 11. wejścia: obraz wyjeżdża z maski ------------------ */
.rev{opacity:1}
.imgmask{clip-path:inset(0 0 100% 0);transition:clip-path 1s var(--ease)}
.imgmask.on{clip-path:inset(0 0 0 0)}
.stagger>*{transition-delay:0ms}
.stagger>*:nth-child(2){transition-delay:70ms}
.stagger>*:nth-child(3){transition-delay:140ms}
.stagger>*:nth-child(4){transition-delay:210ms}

/* ---------------- 12. detale -------------------------------------------------- */
::selection{background:rgba(157,116,18,.22)}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
input,textarea,select{transition:border-color .25s,box-shadow .25s,transform .25s}
input:focus,textarea:focus,select:focus{transform:translateY(-1px)}
.hr-gold{height:1px;background:linear-gradient(90deg,var(--gold),rgba(157,116,18,0));border:0;margin:0}
@media(prefers-reduced-motion:reduce){
  .btn::after{display:none}
  .imgmask{clip-path:none}
  .band img{transform:none!important}
}


/* ---------------- MOBILE: mniej powietrza, bez pustych pasów -------------- */
@media(max-width:600px){
  section{padding-top:calc(var(--sp) * .62);padding-bottom:calc(var(--sp) * .72)}
  .sec-num{display:none}                 /* na telefonie cyfra w tle tylko myli */
  .head{margin-bottom:18px}
  .head h2{margin-top:10px}
  .band img{height:auto;aspect-ratio:16/9;object-fit:cover}   /* pełne zdjęcie, nie pusty pas */
  #relacje{padding-top:24px}
  .hero-stats{padding:16px 18px}
  .card .bd{padding:16px 16px 18px}
  .gal{gap:6px}
}

/* ==========================================================================
   SEKCJA „CZYM SIĘ ZAJMUJEMY" — indeks usług: bez zdjęć, z efektami
   ========================================================================== */
.services{border-top:1px solid var(--line-2)}
.srv{position:relative;display:grid;grid-template-columns:86px 1fr 78px 46px;align-items:center;gap:clamp(14px,2vw,28px);
  padding:clamp(18px,2.4vw,28px) 10px;border-bottom:1px solid var(--line-2);overflow:hidden;
  transition:padding-left .35s var(--ease);isolation:isolate;color:var(--ink)}
/* podświetlenie idące za kursorem */
.srv::after{content:'';position:absolute;inset:0;z-index:-1;opacity:0;transition:opacity .3s;
  background:radial-gradient(420px 220px at var(--mx,50%) var(--my,50%),rgba(157,116,18,.16),transparent 70%)}
.srv:hover::after{opacity:1}
/* złota smuga od lewej */
.srv::before{content:'';position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--gold);
  transform:scaleY(0);transform-origin:top;transition:transform .4s var(--ease)}
.srv:hover::before{transform:scaleY(1)}
.srv:hover{padding-left:22px}

.srv-no{font-size:clamp(1.5rem,2.6vw,2.1rem);font-weight:500;line-height:1;color:transparent;
  -webkit-text-stroke:1px rgba(157,116,18,.75);transition:.35s var(--ease)}
.srv:hover .srv-no{color:var(--gold);-webkit-text-stroke:1px var(--gold)}
.srv-main h3{font-size:clamp(1.15rem,2vw,1.55rem);margin:0;transition:color .3s}
.srv-main p{color:var(--muted);font-size:.94rem;margin:6px 0 0;max-width:520px}
.srv-list{list-style:none;display:flex;flex-wrap:wrap;gap:6px 18px;margin:0;padding:0;
  max-height:0;opacity:0;overflow:hidden;transition:max-height .45s var(--ease),opacity .35s,margin .35s}
.srv-list li{font-size:.82rem;letter-spacing:.04em;text-transform:uppercase;color:var(--gold);position:relative;padding-left:14px}
.srv-list li::before{content:'';position:absolute;left:0;top:.62em;width:7px;height:1px;background:var(--gold)}
.srv:hover .srv-list{max-height:80px;opacity:1;margin-top:10px}

.srv-ico{justify-self:end;color:#a9a294;transition:color .35s,transform .35s var(--ease)}
.srv-ico svg{width:clamp(34px,3.8vw,46px);height:auto;stroke-width:1.5;
  transition:transform .4s var(--ease);transform-origin:center}
.srv:hover .srv-ico{color:var(--gold)}
.srv:hover .srv-ico svg{transform:scale(1.08)}
.srv-arr{justify-self:end;font-size:1.3rem;color:var(--gold);opacity:.35;transform:translateX(-6px);
  transition:.35s var(--ease)}
.srv:hover .srv-arr{opacity:1;transform:translateX(4px)}

@media(max-width:820px){
  .srv{grid-template-columns:52px 1fr 40px;padding:20px 4px}
  .srv-no{font-size:1.35rem}
  .srv-main p{font-size:.9rem}
  .srv-ico{display:none}
  .srv-list{max-height:none;opacity:1;margin-top:8px}
  .srv-list li{font-size:.76rem}
  .srv-arr{font-size:1.1rem}
  .srv:hover{padding-left:8px}
}
@media(prefers-reduced-motion:reduce){
  .srv::after{display:none}
}

/* ---------------- MOBILE: bez górnego paska z danymi (życzenie) ---------- */
@media(max-width:920px){
  .topbar{display:none}
  header.site .wrap{min-height:64px}
}