/* =========================================================
   Julita Oniszczuk makijaż permanentny - Ząbki
   Układ wzorowany na LUMI LAB, ale wszystkie ramki zaokrąglone.
   Paleta z materiałów klientki: krem #EFE7DA, karta #F2EDE7,
   ramka #DCCEC1, atrament z logo #4F3A2B.
   ========================================================= */

:root{
  --atrament:#2A231E;
  --atrament-2:#3A312A;
  --tekst:#4A403A;
  --tekst-2:#7B6E64;
  --mokka:#A07E64;
  --mokka-2:#8A6A51;
  --mokka-3:#6B5140;
  --len:#F6F1E9;
  --len-2:#EEE5D8;
  --piasek:#DCCEC1;
  --linia:#E4D9CB;
  --bialy:#FFFDFA;
  --jasny-na-ciemnym:rgba(246,241,233,.82);
  --linia-ciemna:rgba(246,241,233,.15);

  --font-nag:'Cormorant Garamond',Georgia,'Times New Roman',serif;
  --font-tekst:'Jost','Segoe UI',system-ui,sans-serif;

  /* zaokrąglenia - tym się różnimy od szablonu */
  --r:14px;
  --r-lg:26px;
  --r-xl:36px;
  --r-pill:999px;

  --cien:0 24px 60px rgba(42,35,30,.16);
  --cien-2:0 10px 30px rgba(42,35,30,.09);
  --dur:.32s;
  --ease:cubic-bezier(.2,.7,.2,1);
  --max:1180px;
  --pad:clamp(18px,4.4vw,52px);
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;scroll-padding-top:86px}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

body{
  margin:0;background:var(--len);color:var(--tekst);
  font-family:var(--font-tekst);font-weight:300;
  font-size:clamp(15.5px,1.02vw,16.8px);line-height:1.72;
  overflow-x:hidden;
}

h1,h2,h3{font-family:var(--font-nag);font-weight:300;line-height:1.1;margin:0;color:var(--atrament)}
h1,h2,h3,.kontakt__tel,.cennik dd,.krok .nr,.opinia blockquote,.logo-imie{
  font-variant-numeric:lining-nums;font-feature-settings:"lnum" 1,"onum" 0;
}
h1{font-size:clamp(2.5rem,6vw,4.4rem)}
h2{font-size:clamp(1.95rem,3.8vw,3rem)}
h3{font-size:clamp(1.18rem,1.6vw,1.45rem)}
p{margin:0 0 1.05em}
p:last-child{margin-bottom:0}
img{max-width:100%;height:auto;display:block}
a{color:inherit}

.pomin{position:absolute;left:-9999px;top:0;background:var(--atrament);color:var(--len);padding:12px 18px;z-index:200;border-radius:0 0 var(--r) 0}
.pomin:focus{left:0}

.container{max-width:var(--max);margin:0 auto;padding-inline:var(--pad)}
.waski{max-width:880px}
.section{padding-block:clamp(60px,8.4vw,116px);position:relative}
.section.len{background:var(--len-2)}
.section.ciemna{background:var(--atrament);color:var(--jasny-na-ciemnym)}
.section.ciemna h2,.section.ciemna h3{color:var(--len)}

/* ---------- nagłówki sekcji ---------- */
.sec-head{margin-bottom:clamp(30px,3.6vw,52px)}
.sec-head--srodek{text-align:center;max-width:720px;margin-inline:auto}
.etykieta{
  font-size:.7rem;letter-spacing:.3em;text-transform:uppercase;color:var(--mokka-2);
  margin:0 0 1.1em;
}
.section.ciemna .etykieta{color:var(--mokka)}
.lead{margin-top:1.1em;color:var(--tekst-2);font-size:clamp(.97rem,1.15vw,1.08rem);max-width:56ch}
.sec-head--srodek .lead{margin-inline:auto}

/* maska nagłówka: overflow + translateY na spanie w środku,
   nigdy clip-path na obserwowanym elemencie (IO wtedy nie odpala) */
.fx-mask{overflow:hidden;display:block}
.fx-mask__t{display:block}
.js .fx-mask__t{transform:translateY(105%);transition:transform .9s var(--ease)}
.js .fx-mask.w .fx-mask__t{transform:none}

/* ---------- przyciski ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.55em;
  font-size:.8rem;font-weight:400;letter-spacing:.13em;text-transform:uppercase;
  text-decoration:none;padding:1.05em 1.9em;border-radius:var(--r-pill);
  background:var(--atrament);color:var(--len);border:1px solid var(--atrament);
  transition:background var(--dur),color var(--dur),transform var(--dur),box-shadow var(--dur);
  white-space:nowrap;cursor:pointer;
}
.btn:hover{background:var(--mokka-3);border-color:var(--mokka-3);transform:translateY(-2px);box-shadow:var(--cien-2)}
.btn--ghost{background:transparent;color:var(--len);border-color:rgba(246,241,233,.6)}
.btn--ghost:hover{background:var(--len);color:var(--atrament);border-color:var(--len)}
.btn--jasny{background:var(--len);color:var(--atrament);border-color:var(--len)}
.btn--jasny:hover{background:var(--bialy);color:var(--atrament);border-color:var(--bialy)}
.btn--ghost-jasny{background:transparent;color:var(--len);border-color:rgba(246,241,233,.45)}
.btn--ghost-jasny:hover{background:var(--len);color:var(--atrament)}

/* =========================================================
   NAGŁÓWEK
   ========================================================= */
.site-header{
  position:sticky;top:0;z-index:60;background:var(--atrament);color:var(--len);
  box-shadow:0 1px 0 var(--linia-ciemna);
}
.site-header .container{display:flex;align-items:center;gap:clamp(10px,2vw,28px);padding-block:.7rem}
.logo-link{display:flex;align-items:center;gap:.55rem;text-decoration:none;flex:none;color:var(--len)}
.logo-link img{height:36px;width:auto;filter:brightness(0) invert(1);opacity:.92}
.logo-txt{display:flex;flex-direction:column;line-height:1}
.logo-imie{font-family:var(--font-nag);font-size:1.18rem;letter-spacing:.1em;text-transform:uppercase}
.logo-pod{font-size:.55rem;letter-spacing:.25em;text-transform:uppercase;color:rgba(246,241,233,.62);margin-top:.4em}

.header-akcje{display:flex;align-items:center;gap:.6rem;margin-left:auto}
.header-social{display:flex;gap:.4rem}
.header-social a{
  width:38px;height:38px;border-radius:var(--r-pill);border:1px solid var(--linia-ciemna);
  display:grid;place-items:center;color:var(--len);transition:background var(--dur),color var(--dur);
}
.header-social a:hover{background:var(--len);color:var(--atrament)}
.btn-naglowek{padding:.78em 1.4em;font-size:.72rem}
.btn-tel{
  display:none;align-items:center;gap:.5em;text-decoration:none;color:var(--len);
  font-size:.82rem;letter-spacing:.06em;padding:.6em 1.1em;border:1px solid var(--linia-ciemna);
  border-radius:var(--r-pill);transition:background var(--dur),color var(--dur);
}
.btn-tel:hover{background:var(--len);color:var(--atrament)}

.menu-toggle{
  display:inline-flex;align-items:center;gap:.6em;background:transparent;color:var(--len);
  border:1px solid var(--linia-ciemna);border-radius:var(--r-pill);padding:.62em 1.05em;
  cursor:pointer;font-family:inherit;font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;
  transition:background var(--dur),color var(--dur);
}
.menu-toggle:hover{background:var(--len);color:var(--atrament)}
.menu-toggle .paski{display:flex;flex-direction:column;gap:3.5px}
.menu-toggle .paski span{display:block;width:16px;height:1.4px;background:currentColor;transition:transform var(--dur),opacity var(--dur)}
.menu-toggle[aria-expanded="true"] .paski span:nth-child(1){transform:translateY(5px) rotate(45deg)}
.menu-toggle[aria-expanded="true"] .paski span:nth-child(2){opacity:0}
.menu-toggle[aria-expanded="true"] .paski span:nth-child(3){transform:translateY(-5px) rotate(-45deg)}

/* ---------- szuflada: poza headerem, inaczej backdrop-filter ją przycina ---------- */
.nav-overlay{position:fixed;inset:0;background:rgba(26,21,18,.55);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);z-index:80;opacity:0;pointer-events:none;transition:opacity var(--dur)}
.nav-overlay.w{opacity:1;pointer-events:auto}
.mobile-nav{
  position:fixed;top:0;right:0;bottom:0;width:min(88vw,368px);z-index:90;
  background:linear-gradient(170deg,#332B24,#241E19);color:var(--len);
  border-radius:var(--r-xl) 0 0 var(--r-xl);
  padding:clamp(24px,5vw,38px);display:flex;flex-direction:column;overflow-y:auto;
  transform:translateX(103%);transition:transform .42s var(--ease);
  box-shadow:-30px 0 70px rgba(26,21,18,.4);
}
.mobile-nav.w{transform:none}
.nav-close{
  position:absolute;top:16px;right:16px;width:42px;height:42px;border-radius:var(--r-pill);
  border:1px solid rgba(246,241,233,.28);background:transparent;color:var(--len);
  cursor:pointer;display:grid;place-items:center;
}
.nav-tytul{font-size:.66rem;letter-spacing:.3em;text-transform:uppercase;color:rgba(246,241,233,.45);margin:0 0 1.6em}
.mobile-nav .poz{
  display:flex;align-items:baseline;gap:.9em;text-decoration:none;color:var(--len);
  font-family:var(--font-nag);font-size:1.5rem;padding:.42em 0;
  border-bottom:1px solid rgba(246,241,233,.1);transition:padding-left var(--dur),color var(--dur);
}
.mobile-nav .poz:hover{padding-left:.5em;color:var(--mokka)}
.mobile-nav .poz small{font-family:var(--font-tekst);font-size:.6rem;letter-spacing:.2em;color:rgba(246,241,233,.4)}
.nav-dol{margin-top:auto;padding-top:28px;display:flex;flex-direction:column;align-items:center;gap:1rem}
.nav-social{display:flex;gap:.6rem}
.nav-social a{width:42px;height:42px;border-radius:var(--r-pill);border:1px solid rgba(246,241,233,.28);display:grid;place-items:center;color:var(--len);transition:background var(--dur),color var(--dur)}
.nav-social a:hover{background:var(--len);color:var(--atrament)}
.nav-adres{font-size:.78rem;letter-spacing:.05em;color:rgba(246,241,233,.6);text-align:center;margin:0}

/* =========================================================
   HERO
   ========================================================= */
.hero{position:relative;min-height:clamp(480px,72svh,720px);display:flex;align-items:center;overflow:hidden}
.hero__tlo{position:absolute;inset:0}
.hero__tlo img{width:100%;height:100%;object-fit:cover}
.hero__zaslona{
  position:absolute;inset:0;
  background:linear-gradient(100deg, rgba(42,35,30,.62) 0%, rgba(42,35,30,.42) 42%, rgba(42,35,30,.08) 72%, rgba(42,35,30,0) 100%);
}
.hero .container{position:relative;z-index:2;width:100%;padding-block:clamp(48px,7vw,80px)}
.hero__tresc{max-width:640px;color:var(--len)}
.hero__nad{
  font-size:.7rem;letter-spacing:.28em;text-transform:uppercase;color:rgba(246,241,233,.75);
  margin:0 0 1.3em;display:flex;align-items:center;gap:.9em;
}
.hero__nad::before{content:"";width:clamp(24px,4vw,48px);height:1px;background:currentColor;flex:none}
.hero h1{color:var(--len);margin-bottom:.3em;text-shadow:0 2px 30px rgba(26,21,18,.4)}
.hero h1 em{font-style:italic;color:#E9D6C2}
.hero__lead{color:rgba(246,241,233,.9);font-size:clamp(1rem,1.2vw,1.12rem);max-width:34ch;margin-bottom:2em}
.hero__cta{display:flex;flex-wrap:wrap;gap:.7rem;margin-bottom:1.8em}
.hero__cta .btn{background:var(--len);color:var(--atrament);border-color:var(--len)}
.hero__cta .btn:hover{background:var(--bialy);color:var(--atrament);border-color:var(--bialy)}
.hero__cta .btn--ghost{background:transparent;color:var(--len);border-color:rgba(246,241,233,.6)}
.hero__cta .btn--ghost:hover{background:var(--len);color:var(--atrament)}
.hero__oceny{margin:0;font-size:.86rem;color:rgba(246,241,233,.85);display:flex;align-items:center;gap:.5em}
.hero__oceny b{font-weight:500;color:var(--len)}
.gw{color:#E0BFA4;letter-spacing:.12em}
.hero__podpis{
  position:absolute;right:clamp(14px,3vw,26px);bottom:12px;z-index:2;margin:0;
  font-size:.62rem;letter-spacing:.18em;text-transform:uppercase;color:rgba(246,241,233,.9);
  background:rgba(42,35,30,.42);padding:.35em .8em;border-radius:var(--r-pill);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
}

/* =========================================================
   O MNIE
   ========================================================= */
.dlaczego{display:grid;grid-template-columns:.78fr 1.22fr;gap:clamp(28px,4.5vw,66px);align-items:center}
.dlaczego__foto{margin:0;border-radius:var(--r-xl);overflow:hidden;box-shadow:var(--cien);background:var(--piasek)}
.dlaczego__foto img{width:100%;height:100%;object-fit:cover;aspect-ratio:3/4.4}
.argumenty{list-style:none;margin:0;padding:0;display:grid;gap:clamp(16px,1.8vw,24px)}
.argumenty li{display:flex;gap:1.1rem;align-items:flex-start}
.ikona{
  flex:none;width:48px;height:48px;border-radius:var(--r);display:grid;place-items:center;
  background:var(--bialy);color:var(--mokka-2);border:1px solid var(--linia);box-shadow:var(--cien-2);
}
.argumenty h3{margin-bottom:.34em}
.argumenty p{font-size:.93rem;color:var(--tekst-2);margin:0}

/* =========================================================
   OFERTA
   ========================================================= */
.oferta-siatka{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,1.8vw,24px)}
.oferta-karta{
  display:flex;flex-direction:column;text-decoration:none;color:inherit;
  background:var(--bialy);border:1px solid var(--linia);border-radius:var(--r-lg);overflow:hidden;
  box-shadow:var(--cien-2);transition:transform var(--dur),box-shadow var(--dur);
}
.oferta-karta:hover{transform:translateY(-6px);box-shadow:var(--cien)}
.oferta-karta__foto{aspect-ratio:4/3;overflow:hidden;background:var(--piasek)}
.oferta-karta__foto img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease)}
.oferta-karta:hover .oferta-karta__foto img{transform:scale(1.06)}
.oferta-karta__tresc{padding:clamp(20px,2.1vw,28px);display:flex;flex-direction:column;flex:1}
.oferta-karta__tresc h3{margin-bottom:.45em;text-wrap:balance}
.oferta-karta__tresc p{font-size:.92rem;color:var(--tekst-2)}
.cena{
  margin-top:auto;padding-top:1.1em;border-top:1px solid var(--linia);
  display:flex;flex-direction:column;gap:.2em;
}
.cena b{font-family:var(--font-nag);font-size:1.3rem;font-weight:400;color:var(--mokka-3)}
.cena small{font-size:.76rem;letter-spacing:.06em;color:var(--tekst-2)}
.oferta-karta--cta{background:linear-gradient(165deg,#3A312A,#262019);border-color:transparent;justify-content:center}
.oferta-karta--cta h3{color:var(--len)}
.oferta-karta--cta p{color:rgba(246,241,233,.72)}
.oferta-karta--cta .cena{border-top-color:var(--linia-ciemna)}
.oferta-karta--cta .cena b{color:var(--len)}
.oferta-karta--cta .cena small{color:rgba(246,241,233,.55)}

/* =========================================================
   PRZEBIEG WIZYTY - kafle liquid glass na zdjęciu
   ========================================================= */
.wizyta{position:relative;overflow:hidden;color:var(--atrament)}
.wizyta__tlo{position:absolute;inset:0}
.wizyta__tlo::after{content:"";position:absolute;inset:0;background:rgba(246,241,233,.52)}
.wizyta__tlo img{width:100%;height:100%;object-fit:cover;filter:brightness(1.02)}
.wizyta .container{position:relative;z-index:2}
.kroki{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(14px,1.6vw,22px);counter-reset:k}
.krok{
  position:relative;padding:clamp(24px,2.4vw,34px);border-radius:var(--r-lg);text-align:center;
  background:linear-gradient(150deg,rgba(255,253,250,.74),rgba(255,253,250,.42));
  -webkit-backdrop-filter:blur(18px) saturate(1.25);backdrop-filter:blur(18px) saturate(1.25);
  border:1px solid rgba(255,255,255,.75);
  box-shadow:var(--cien-2), inset 0 1px 0 rgba(255,255,255,.9);
  overflow:hidden;
}
.krok::before{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:linear-gradient(160deg,rgba(255,255,255,.5) 0%,rgba(255,255,255,0) 40%);
}
.krok .nr{
  display:grid;place-items:center;width:44px;height:44px;margin:0 auto .9rem;
  border-radius:var(--r-pill);background:var(--atrament);color:var(--len);
  font-family:var(--font-nag);font-size:1.25rem;
}
.krok h3{margin-bottom:.45em;font-size:clamp(1.06rem,1.3vw,1.24rem);text-wrap:balance}
.krok p{font-size:.9rem;color:var(--tekst-2);margin:0}

/* =========================================================
   GALERIA
   ========================================================= */
.galeria{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(10px,1.2vw,18px)}
.galeria figure{
  margin:0;position:relative;border-radius:var(--r-lg);overflow:hidden;
  aspect-ratio:3/4;background:var(--piasek);box-shadow:var(--cien-2);
}
.galeria img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease)}
.galeria figure:hover img{transform:scale(1.06)}
.galeria figcaption{
  position:absolute;left:0;right:0;bottom:0;padding:1.5em .9em .8em;
  font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:#fff;
  background:linear-gradient(to top,rgba(26,21,18,.68),rgba(26,21,18,0));
  display:flex;align-items:center;gap:.6em;flex-wrap:wrap;
}
.pogl{font-size:.58rem;letter-spacing:.12em;border:1px solid rgba(255,255,255,.5);border-radius:var(--r-pill);padding:.15em .6em;opacity:.8}
.pod-galeria{text-align:center;margin-top:2em;font-size:.92rem;color:var(--tekst-2)}
.pod-galeria a{color:var(--mokka-3);text-underline-offset:.28em}

/* =========================================================
   CENNIK
   ========================================================= */
.cennik{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2vw,28px);align-items:start}
.cennik__grupa{
  background:rgba(246,241,233,.05);border:1px solid var(--linia-ciemna);
  border-radius:var(--r-lg);padding:clamp(22px,2.3vw,32px);
}
.cennik__grupa h3{font-size:clamp(1.12rem,1.4vw,1.34rem);margin-bottom:1.1em;display:flex;flex-direction:column;gap:.25em}
.cennik__grupa h3 small{font-family:var(--font-tekst);font-size:.68rem;letter-spacing:.2em;text-transform:uppercase;color:var(--mokka);font-weight:300}
.cennik dl{margin:0;display:grid;gap:.1em}
.poz{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:.5em 1em;padding:.8em 0;border-bottom:1px solid var(--linia-ciemna)}
.poz:last-child{border-bottom:0}
.cennik dt{font-size:.93rem;display:flex;flex-direction:column;flex:1 1 58%;min-width:0}
.cennik dt small{font-size:.72rem;color:rgba(246,241,233,.5);margin-top:.15em}
.cennik dd{margin:0;white-space:nowrap;color:var(--len);flex:none;margin-left:auto}
.doupe{
  font-size:.66rem !important;letter-spacing:.12em;text-transform:uppercase;color:var(--mokka) !important;
  border:1px dashed rgba(160,126,100,.6);border-radius:var(--r-pill);padding:.32em .8em;
  white-space:normal;max-width:100%;
}
.cennik__grupa--box{background:linear-gradient(160deg,rgba(160,126,100,.2),rgba(160,126,100,.06));border-color:rgba(160,126,100,.35)}
.cennik__grupa--box p{font-size:.92rem;color:var(--jasny-na-ciemnym)}
.cennik__grupa--box b{color:var(--len);font-weight:500}
.drobne{font-size:.82rem !important;color:rgba(246,241,233,.6) !important}
.drobne a{color:var(--mokka);text-underline-offset:.24em}
.cennik__uwaga{margin:2em auto 0;max-width:62ch;text-align:center;font-size:.86rem;color:rgba(246,241,233,.62)}
.cennik__cta{margin-top:2em;display:flex;justify-content:center}

/* =========================================================
   OPINIE - slider ze strzałkami
   ========================================================= */
.opinie-sekcja{position:relative;overflow:hidden}
.opinie-tlo{position:absolute;inset:0}
.opinie-tlo::after{content:"";position:absolute;inset:0;background:rgba(238,229,216,.46)}
.opinie-tlo img{width:100%;height:100%;object-fit:cover;filter:brightness(.92)}
.opinie-sekcja .container{position:relative;z-index:2}
.opinie-slider{
  display:grid;grid-auto-flow:column;grid-auto-columns:minmax(310px,1fr);
  gap:clamp(14px,1.6vw,22px);overflow-x:auto;scroll-snap-type:x mandatory;
  padding-bottom:.6rem;scrollbar-width:none;
}
.opinie-slider::-webkit-scrollbar{display:none}
.opinia{
  scroll-snap-align:start;padding:clamp(24px,2.4vw,34px);border-radius:var(--r-lg);
  background:linear-gradient(150deg,rgba(255,253,250,.86),rgba(255,253,250,.6));
  -webkit-backdrop-filter:blur(16px) saturate(1.2);backdrop-filter:blur(16px) saturate(1.2);
  border:1px solid rgba(255,255,255,.8);box-shadow:var(--cien-2);
  display:flex;flex-direction:column;
}
.opinia .gw{font-size:.95rem;margin-bottom:.9em;color:var(--mokka-2)}
.opinia blockquote{margin:0 0 auto;padding:0;font-size:.95rem;line-height:1.66;color:var(--tekst)}
.opinia footer{
  margin-top:1.5em;padding-top:1.1em;border-top:1px solid var(--linia);
  display:flex;justify-content:space-between;align-items:flex-end;gap:1em;
}
.opinia footer span{display:flex;flex-direction:column;font-size:.8rem;color:var(--tekst-2)}
.opinia footer b{font-weight:500;color:var(--atrament);font-size:.92rem}
.zrodlo{
  font-size:.64rem !important;letter-spacing:.16em;text-transform:uppercase;
  border:1px solid var(--linia);border-radius:var(--r-pill);padding:.3em .8em;flex:none;
}
.opinie-nawigacja{display:flex;justify-content:center;gap:.7rem;margin-top:1.8rem}
.strzalka-btn{
  width:48px;height:48px;border-radius:var(--r-pill);border:1px solid var(--piasek);
  background:rgba(255,253,250,.7);color:var(--atrament);cursor:pointer;display:grid;place-items:center;
  transition:background var(--dur),color var(--dur),transform var(--dur);
}
.strzalka-btn:hover{background:var(--atrament);color:var(--len);transform:translateY(-2px)}
.opinie-link{text-align:center;margin-top:1.6em;font-size:.9rem}
.opinie-link a{color:var(--mokka-3);text-underline-offset:.28em}

/* =========================================================
   FAQ
   ========================================================= */
.faq{display:grid;gap:.6rem}
.faq details{
  background:var(--bialy);border:1px solid var(--linia);border-radius:var(--r-lg);
  overflow:hidden;box-shadow:var(--cien-2);transition:box-shadow var(--dur);
}
.faq details[open]{box-shadow:var(--cien)}
.faq summary{
  cursor:pointer;list-style:none;padding:1.2em clamp(20px,2.2vw,30px);
  font-family:var(--font-nag);font-size:clamp(1.1rem,1.35vw,1.3rem);color:var(--atrament);
  display:flex;align-items:center;justify-content:space-between;gap:1em;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:"";width:10px;height:10px;flex:none;
  border-right:1.3px solid var(--mokka-2);border-bottom:1.3px solid var(--mokka-2);
  transform:rotate(45deg) translateY(-3px);transition:transform var(--dur);
}
.faq details[open] summary::after{transform:rotate(-135deg) translateY(-3px)}
.faq-tresc{padding:0 clamp(20px,2.2vw,30px) 1.45em}
.faq-tresc p{font-size:.93rem;color:var(--tekst-2);margin:0}

/* =========================================================
   REGULAMIN
   ========================================================= */
.reg{display:grid;gap:clamp(16px,2vw,24px)}
.reg-blok{background:var(--bialy);border:1px solid var(--linia);border-radius:var(--r-lg);padding:clamp(22px,2.3vw,32px);box-shadow:var(--cien-2)}
.reg-blok h3{
  font-family:var(--font-tekst);font-size:.76rem;font-weight:400;letter-spacing:.2em;
  text-transform:uppercase;color:var(--mokka-2);margin-bottom:1em;
}
.reg-blok ul{margin:0;padding-left:1.15em;display:grid;gap:.55em}
.reg-blok li{font-size:.93rem;color:var(--tekst-2)}
.reg-blok li::marker{color:var(--piasek)}
.reg-blok b{color:var(--atrament);font-weight:500}
.reg-blok a{color:var(--mokka-3);text-underline-offset:.24em}

/* =========================================================
   KONTAKT
   ========================================================= */
.kontakt{display:grid;grid-template-columns:1fr 1fr;gap:clamp(26px,4vw,58px);align-items:start}
.kontakt__tel{
  display:inline-flex;align-items:center;gap:.6em;text-decoration:none;color:var(--len);
  font-family:var(--font-nag);font-size:clamp(1.9rem,3.1vw,2.6rem);margin-bottom:1rem;
  transition:color var(--dur);
}
.kontakt__tel:hover{color:var(--mokka)}
.kanaly{list-style:none;margin:0 0 1.8rem;padding:0;display:grid;gap:.55rem}
.kanaly a{
  display:flex;align-items:center;gap:1rem;text-decoration:none;color:var(--len);
  padding:.95em 1.2em;border:1px solid var(--linia-ciemna);border-radius:var(--r);
  transition:background var(--dur),border-color var(--dur),transform var(--dur);
}
.kanaly a:hover{background:rgba(246,241,233,.07);border-color:rgba(246,241,233,.3);transform:translateX(3px)}
.kanaly .ikona{width:42px;height:42px;background:transparent;border-color:var(--linia-ciemna);color:var(--mokka);box-shadow:none}
.kanaly span b{font-weight:400;font-size:.94rem}
.kanaly .strzalka{margin-left:auto;color:rgba(246,241,233,.4)}
.godziny{border-collapse:collapse;width:100%;max-width:360px}
.godziny caption{
  text-align:left;font-size:.7rem;letter-spacing:.24em;text-transform:uppercase;
  color:rgba(246,241,233,.5);padding-bottom:.9em;
}
.godziny th,.godziny td{text-align:left;padding:.42em 0;font-size:.88rem;font-weight:300;border-bottom:1px solid var(--linia-ciemna)}
.godziny th{color:rgba(246,241,233,.68)}
.godziny td{text-align:right;color:var(--len)}
.kontakt__mapa{
  border-radius:var(--r-lg);overflow:hidden;border:1px solid var(--linia-ciemna);
  box-shadow:var(--cien);min-height:460px;height:100%;
}
.kontakt__mapa iframe{width:100%;height:100%;min-height:460px;border:0;display:block;filter:grayscale(.3) sepia(.15)}

/* =========================================================
   STOPKA
   ========================================================= */
.stopka{background:#221C17;color:rgba(246,241,233,.75);padding-top:clamp(42px,5.6vw,72px)}
.stopka__in{display:grid;grid-template-columns:1fr 1.15fr 1fr;gap:clamp(24px,4vw,50px);align-items:start;padding-bottom:clamp(32px,4.6vw,54px)}
.stopka__marka img{height:52px;width:auto;filter:brightness(0) invert(1);opacity:.8;margin-bottom:.85rem}
.stopka__imie{font-family:var(--font-nag);font-size:1.26rem;letter-spacing:.1em;text-transform:uppercase;color:var(--len);margin:0}
.stopka__pod{font-size:.58rem;letter-spacing:.25em;text-transform:uppercase;margin:.5em 0 0;color:rgba(246,241,233,.5)}
.stopka__menu{display:flex;flex-wrap:wrap;gap:.5em 1.4em;align-content:start}
.stopka__menu a{text-decoration:none;font-size:.82rem;letter-spacing:.07em;color:rgba(246,241,233,.75);transition:color var(--dur)}
.stopka__menu a:hover{color:var(--len)}
.stopka__nap{font-style:normal;font-size:.87rem;line-height:1.85}
.stopka__nap b{color:var(--len);font-weight:400}
.stopka__nap a{color:var(--len);text-underline-offset:.24em}
.stopka__dol{margin:0;padding:1.4em var(--pad);border-top:1px solid var(--linia-ciemna);font-size:.73rem;letter-spacing:.07em;text-align:center;color:rgba(246,241,233,.45)}

/* ---------- pasek „Zadzwoń" na telefonie ---------- */
.dzwon{
  position:fixed;left:14px;right:14px;bottom:14px;z-index:70;display:none;
  align-items:center;justify-content:center;gap:.6em;text-decoration:none;
  background:var(--atrament);color:var(--len);border-radius:var(--r-pill);padding:1.05em;
  font-size:.8rem;letter-spacing:.14em;text-transform:uppercase;
  box-shadow:0 16px 34px -14px rgba(26,21,18,.75);
  transform:translateY(160%);transition:transform .4s var(--ease);
}
.dzwon.w{transform:none}

/* =========================================================
   ANIMACJE WEJŚCIA
   ========================================================= */
.js .rv{opacity:0;transform:translateY(24px);transition:opacity .85s var(--ease),transform .85s var(--ease)}
.js .rv.w{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .js .rv,.js .fx-mask__t{opacity:1;transform:none;transition:none}
  .oferta-karta,.galeria img,.oferta-karta__foto img{transition:none !important}
}

/* =========================================================
   RESPONSYWNOŚĆ
   ========================================================= */
@media (max-width:1080px){
  .oferta-siatka{grid-template-columns:repeat(2,1fr)}
  .kroki{grid-template-columns:repeat(2,1fr)}
  .cennik{grid-template-columns:1fr 1fr}
  .cennik__grupa--box{grid-column:span 2}
}

@media (max-width:900px){
  .btn-naglowek{display:none}
  .btn-tel{display:inline-flex}
  .dlaczego{grid-template-columns:1fr;gap:clamp(24px,5vw,40px)}
  .dlaczego__foto{max-width:360px;margin-inline:auto}
  .kontakt{grid-template-columns:1fr}
  .kontakt__mapa{min-height:320px}
  .kontakt__mapa iframe{min-height:320px}
  .galeria{grid-template-columns:repeat(2,1fr)}
  .stopka__in{grid-template-columns:1fr;gap:26px;text-align:center;justify-items:center}
  .stopka__menu{justify-content:center}
}

@media (max-width:640px){
  body{padding-bottom:82px}
  .dzwon{display:flex}
  .header-social{display:none}
  .btn-tel span{display:none}
  .btn-tel{width:42px;height:42px;padding:0;justify-content:center}
  .menu-toggle .napis{display:none}
  .menu-toggle{width:42px;height:42px;padding:0;justify-content:center}
  .logo-link img{height:30px}
  .logo-imie{font-size:1rem;letter-spacing:.08em}
  .logo-pod{font-size:.5rem;letter-spacing:.2em}
  .oferta-siatka,.kroki,.cennik{grid-template-columns:1fr}
  .cennik__grupa--box{grid-column:auto}
    .opinie-slider{grid-auto-columns:minmax(84vw,1fr)}
  .poz{flex-direction:column;align-items:flex-start;gap:.45em}
  .cennik dd{margin-left:0}
  .cennik dt{flex:1 1 auto}
}

@media (max-width:380px){
  .site-header .container{gap:7px}
  .logo-imie{font-size:.92rem}
}