/* ═══════════════════════════════════════════════════════════════
   New Age Lewandowska
   Czern, biel, srebro — dokladnie ta paleta, o ktora prosila.

   Motyw przewodni: w logo przez slowo "age" przechodzi jedna ciagla
   cienka linia, zapetlona jak kosmyk wlosa. Ta sama linia wraca tu
   jako przerywnik miedzy sekcjami i jako podkreslenie naglowkow.
   ═══════════════════════════════════════════════════════════════ */

:root{
  --atrament:#0A0A0B;
  --wegiel:#141417;
  --grafit:#1D1D21;
  --biel:#FFFFFF;
  --kreda:#F5F5F6;
  --papier:#FAFAFA;
  --srebro:#B5B5BC;
  --srebro-ciemne:#8A8A93;
  --srebro-jasne:#E4E4E8;
  --mgla:#6C6C74;
  --linia:rgba(181,181,188,.28);

  --display:'Bodoni Moda', 'Didot', Georgia, serif;
  --tekst:'Jost', -apple-system, 'Segoe UI', Roboto, sans-serif;

  --wrap:min(1180px, calc(100% - 48px));
  --waski:min(760px, calc(100% - 48px));
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--atrament); color:var(--biel);
  font-family:var(--tekst); font-weight:300; font-size:17px; line-height:1.7;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%; height:auto; display:block}
a{color:inherit}

h1,h2,h3{font-family:var(--display); font-weight:400; margin:0; line-height:1.08;
  letter-spacing:-.015em; text-wrap:balance}
h1{font-size:clamp(2.6rem,7vw,5.2rem)}
h2{font-size:clamp(2rem,4.6vw,3.4rem)}
h3{font-size:clamp(1.15rem,2vw,1.4rem); line-height:1.25}
p{margin:0 0 1.1em}
h1+p,h2+p,h3+p{margin-top:1.5rem}
h3+p{margin-top:.8rem}
.kursywa{font-style:italic}

.wrap{width:var(--wrap); margin-inline:auto}
.waski{width:var(--waski); margin-inline:auto}

.nadpis{
  font-family:var(--tekst); font-size:.72rem; font-weight:400;
  letter-spacing:.28em; text-transform:uppercase; color:var(--srebro-ciemne);
  margin:0 0 1.3rem;
}
.ciemno .nadpis{color:var(--srebro)}

/* ── linia z logo: przerywnik miedzy sekcjami ───────────────── */
.kosmyk{display:block; width:min(560px,72%); margin:0 auto; height:auto; overflow:visible}
.kosmyk path{
  fill:none; stroke:var(--srebro); stroke-width:1.1; stroke-linecap:round;
  stroke-dasharray:1400; stroke-dashoffset:1400;
}
.kosmyk.widoczny path{transition:stroke-dashoffset 2.2s cubic-bezier(.2,.7,.3,1); stroke-dashoffset:0}
.przerywnik{padding:clamp(36px,5vw,68px) 0}

/* ── HERO ──────────────────────────────────────────────────── */
.hero{
  background:var(--atrament);
  padding:clamp(24px,4vw,44px) 0 clamp(48px,6vw,88px);
  position:relative; overflow:hidden;
}
.hero-gora{display:flex; align-items:center; justify-content:space-between; gap:24px;
  padding-bottom:clamp(28px,4vw,52px)}
.hero-logo{width:clamp(132px,15vw,190px)}
.hero-tel{
  font-size:.82rem; letter-spacing:.14em; text-transform:uppercase;
  text-decoration:none; color:var(--srebro); white-space:nowrap;
  border-bottom:1px solid transparent; padding-bottom:2px; transition:.25s;
}
.hero-tel:hover{color:var(--biel); border-bottom-color:var(--srebro)}

.hero-siatka{display:grid; grid-template-columns:1fr; gap:clamp(36px,5vw,64px); align-items:center}
@media(min-width:940px){ .hero-siatka{grid-template-columns:1.05fr .95fr} }

.hero h1{color:var(--biel)}
.hero h1 em{font-style:italic; color:var(--srebro-jasne)}
.hero-lead{
  color:var(--srebro-jasne); font-size:clamp(1rem,1.5vw,1.12rem); max-width:44ch;
  margin-top:1.6rem; font-weight:200;
}
.hero-akcje{display:flex; flex-wrap:wrap; gap:14px; margin-top:2.2rem}

.btn{
  display:inline-block; text-decoration:none; font-family:var(--tekst);
  font-size:.85rem; letter-spacing:.16em; text-transform:uppercase; font-weight:400;
  padding:1.05rem 2rem; border:1px solid var(--biel); background:var(--biel);
  color:var(--atrament); transition:.28s ease; cursor:pointer;
}
.btn:hover{background:transparent; color:var(--biel)}
.btn-duch{background:transparent; color:var(--biel); border-color:rgba(255,255,255,.34)}
.btn-duch:hover{border-color:var(--biel); background:transparent; color:var(--biel)}
.btn-ciemny{background:var(--biel); color:var(--atrament); border-color:var(--biel)}
.btn-ciemny:hover{background:transparent; color:var(--biel)}
.btn:focus-visible,button:focus-visible,a:focus-visible,input:focus-visible,
textarea:focus-visible,select:focus-visible{outline:2px solid var(--srebro); outline-offset:3px}

.hero-foto{position:relative}
/* Jedyne czarno-biale zdjecie na stronie — klientka wybrala ten kadr
     wprost na pierwszy plan. Reszta zostaje w kolorze: robi wlosy,
     wiec kolor jest tu trescia, nie ozdoba. */
.hero-foto img{width:100%; max-height:min(76vh,700px); object-fit:cover;
  object-position:50% 22%; filter:grayscale(1) contrast(1.04)}
.hero-foto::after{
  content:''; position:absolute; inset:0;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.14); pointer-events:none;
}

.odznaka{
  display:inline-flex; align-items:baseline; gap:.55rem; margin-top:1.9rem;
  padding:.62rem 1.05rem; border:1px solid rgba(255,255,255,.2);
  font-size:.78rem; letter-spacing:.1em; text-transform:uppercase; color:var(--srebro-jasne);
}
.odznaka b{font-family:var(--display); font-size:1.15rem; letter-spacing:0; color:var(--biel);
  font-variant-numeric:tabular-nums}

/* ── sekcje ────────────────────────────────────────────────── */
section{padding:clamp(56px,7vw,104px) 0}
.ciemno{background:var(--wegiel)}
.ciemno h2{color:var(--biel)}
.jasno{background:var(--wegiel)}

.dwie{display:grid; gap:clamp(32px,5vw,72px); align-items:center}
@media(min-width:900px){ .dwie{grid-template-columns:.85fr 1.15fr} .dwie.odwrot{grid-template-columns:1.15fr .85fr} }
.dwie img{}
.dwie .tresc p{color:var(--srebro-jasne); max-width:56ch}
.ciemno .dwie .tresc p{color:var(--srebro-jasne)}

.podkres{position:relative; display:inline-block}
.podkres::after{
  content:''; position:absolute; left:0; right:0; bottom:-.22em; height:1px;
  background:linear-gradient(90deg,var(--srebro),transparent);
}

/* ── droga / dyplomy ───────────────────────────────────────── */
.droga{list-style:none; margin:0; padding:0; display:grid; gap:0}
.droga li{
  display:grid; grid-template-columns:auto 1fr; gap:clamp(18px,3vw,40px);
  padding:clamp(18px,2.4vw,26px) 0; border-top:1px solid rgba(255,255,255,.13);
  align-items:baseline;
}
.droga li:last-child{border-bottom:1px solid rgba(255,255,255,.13)}
.droga .rok{
  font-family:var(--display); font-size:clamp(1.5rem,3vw,2.1rem); color:var(--srebro);
  font-variant-numeric:tabular-nums; min-width:3.6ch;
}
.droga .co{color:var(--biel); font-size:1.02rem; margin:0}
.droga .co span{display:block; color:var(--srebro-ciemne); font-size:.9rem; margin-top:.25rem}
.droga li:hover .rok{color:var(--biel); transition:color .3s}

/* ── uslugi ────────────────────────────────────────────────── */
.uslugi{display:grid; gap:1px; background:rgba(255,255,255,.09); border:1px solid rgba(255,255,255,.09); margin-top:3rem}
@media(min-width:760px){ .uslugi{grid-template-columns:1fr 1fr} }
.usluga{background:var(--grafit); padding:clamp(26px,3.4vw,40px)}
.usluga h3{margin-bottom:.7rem}
.usluga p{color:var(--srebro-jasne); font-size:.97rem; margin-bottom:0}
.usluga ul{margin:.9rem 0 0; padding-left:1.1rem; color:var(--srebro); font-size:.94rem}
.usluga li{margin-bottom:.3rem}

.nota-cena{
  margin-top:2.6rem; padding:clamp(24px,3vw,34px); background:var(--grafit);
  border-left:2px solid var(--srebro);
}
.nota-cena p{margin-bottom:0; color:var(--srebro-jasne)}
.nota-cena p+p{margin-top:.9rem}
.nota-cena b{color:var(--biel); font-weight:500}

/* ── galeria ───────────────────────────────────────────────── */
.galeria{display:grid; gap:14px; margin-top:3rem}
@media(min-width:700px){ .galeria{grid-template-columns:repeat(3,1fr)} }
.galeria figure{margin:0; position:relative; overflow:hidden}
.galeria img{width:100%; height:100%; object-fit:cover;
  transition:transform .7s cubic-bezier(.2,.7,.3,1)}
.galeria figure:hover img{transform:scale(1.035)}

/* ── opinie ────────────────────────────────────────────────── */
.opinie-siatka{display:grid; gap:20px; margin-top:3rem}

.opinia{background:var(--grafit); padding:clamp(24px,3vw,32px); border:1px solid rgba(255,255,255,.09);
  display:flex; flex-direction:column}
.gwiazdki{color:var(--biel); letter-spacing:.22em; font-size:.82rem; margin-bottom:1rem}
.opinia p{font-size:.98rem; color:var(--srebro-jasne); flex:1}
.opinia .kto{font-size:.8rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--srebro-ciemne); margin:0}

.form-opinia{margin-top:3.4rem; background:var(--grafit); padding:clamp(28px,4vw,52px);
  border:1px solid rgba(255,255,255,.09)}
.pola{display:grid; gap:26px}
@media(min-width:640px){ .pola.dwa{grid-template-columns:1fr 1fr; gap:20px} }
label{display:block; font-size:.74rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--srebro-ciemne); margin-bottom:.5rem}
input[type=text],input[type=email],textarea,select{
  width:100%; padding:.9rem 1rem; border:1px solid rgba(255,255,255,.16); background:var(--wegiel);
  font-family:var(--tekst); font-size:1rem; font-weight:300; color:var(--biel);
  border-radius:0;
}
input:focus,textarea:focus,select:focus{border-color:var(--srebro); outline:none;
  box-shadow:0 0 0 2px rgba(181,181,188,.16)}
textarea{min-height:130px; resize:vertical}
.zgoda{display:flex; gap:.7rem; align-items:flex-start; margin-top:.4rem}
.zgoda input{margin-top:.35rem; flex:0 0 auto; accent-color:var(--biel)}
.zgoda label{text-transform:none; letter-spacing:0; font-size:.86rem; color:var(--srebro-jasne);
  margin:0; line-height:1.55}
/* Ocena gwiazdkami — przebudowana.
   Było: cele 24 px z 5-pikselowymi przerwami. Na telefonie nie da się
   w to trafić palcem, a i myszą łatwo kliknąć sąsiednią gwiazdkę.
   Teraz każda ma 46 px pola dotyku i podświetla się przy najechaniu. */
.ocena-gwiazdki{display:flex; gap:2px; margin-left:-10px}
.ocena-gwiazdki input{
  position:absolute; width:1px; height:1px; opacity:0; pointer-events:none;
  clip-path:inset(50%); overflow:hidden;
}
.ocena-gwiazdki label{
  margin:0; width:46px; height:46px; display:flex; align-items:center;
  justify-content:center; font-size:1.75rem; line-height:1; cursor:pointer;
  color:rgba(255,255,255,.2); transition:color .15s, transform .15s;
  letter-spacing:0; user-select:none; -webkit-tap-highlight-color:transparent;
}
.ocena-gwiazdki label.wybrana{color:var(--biel)}
.ocena-gwiazdki label.podswietlona{color:rgba(255,255,255,.72)}
.ocena-gwiazdki label:active{transform:scale(.88)}
.ocena-gwiazdki input:focus-visible + label{outline:2px solid var(--srebro); outline-offset:2px}
.ocena-opis{
  margin:.5rem 0 0 -2px; font-size:.82rem; color:var(--srebro-ciemne); min-height:1.3em;
}
.status{margin-top:1.2rem; font-size:.92rem; min-height:1.4em}
.status.ok{color:#7fd8a0}
.status.blad{color:#ff9b8f}
.pulapka{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden}

/* ── kontakt ───────────────────────────────────────────────── */
.kontakt-siatka{display:grid; gap:clamp(32px,5vw,64px)}
@media(min-width:900px){ .kontakt-siatka{grid-template-columns:1fr 1fr} }
.dane{list-style:none; margin:0; padding:0}
.dane li{padding:1.15rem 0; border-bottom:1px solid rgba(255,255,255,.13)}
.dane li:first-child{border-top:1px solid rgba(255,255,255,.13)}
.dane .etykieta{display:block; font-size:.72rem; letter-spacing:.2em; text-transform:uppercase;
  color:var(--srebro-ciemne); margin-bottom:.35rem}
.dane a{text-decoration:none; border-bottom:1px solid rgba(255,255,255,.3); transition:.2s}
.dane a+a{margin-left:1.4rem}
.dane a:hover{border-bottom-color:var(--biel)}
.godziny{font-variant-numeric:tabular-nums}
.mapa{width:100%; height:100%; min-height:340px; border:0; filter:grayscale(1) invert(.92) contrast(.9)}

/* ── stopka ────────────────────────────────────────────────── */
.stopka{background:var(--wegiel); color:var(--srebro); padding:clamp(48px,6vw,72px) 0 2rem;
  font-size:.9rem}
.stopka-siatka{display:grid; gap:32px}
@media(min-width:760px){ .stopka-siatka{grid-template-columns:1.4fr 1fr 1fr} }
.stopka img{width:220px; margin-bottom:1.2rem}
.stopka h4{font-family:var(--tekst); font-size:.72rem; letter-spacing:.2em; text-transform:uppercase;
  color:var(--srebro-ciemne); margin:0 0 .9rem; font-weight:400}
.stopka a{color:var(--srebro-jasne); text-decoration:none; display:block; padding:.2rem 0}
.stopka a:hover{color:var(--biel)}
.stopka-dol{margin-top:3rem; padding-top:1.5rem; border-top:1px solid rgba(255,255,255,.1);
  display:flex; flex-wrap:wrap; gap:12px; justify-content:space-between;
  color:var(--srebro-ciemne); font-size:.82rem}

/* ── odslanianie ───────────────────────────────────────────── */
.wejscie{opacity:0; transform:translateY(18px); transition:opacity .8s ease, transform .8s cubic-bezier(.2,.7,.3,1)}
.wejscie.widoczny{opacity:1; transform:none}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important; transition:none!important}
  .wejscie{opacity:1; transform:none}
  .kosmyk path{stroke-dashoffset:0}
}

/* ═══════════════════════════════════════════════════════════════
   NAGŁÓWEK I MENU
   ═══════════════════════════════════════════════════════════════ */
.naglowek{
  position:sticky; top:0; z-index:60; background:rgba(10,10,11,.82);
  backdrop-filter:saturate(150%) blur(14px);
  border-bottom:1px solid rgba(255,255,255,.08); transition:background .3s;
}
.naglowek-in{
  width:var(--wrap); margin:0 auto; min-height:104px;
  display:flex; align-items:center; justify-content:space-between; gap:24px;
}
.marka{display:flex; align-items:center; flex:0 0 auto}
.marka img{width:clamp(150px,16vw,230px)}
@media(min-width:1500px){ .marka img{width:260px} }
.menu{display:none; align-items:center; gap:clamp(12px,1.5vw,26px); flex-wrap:nowrap}
@media(min-width:920px){ .menu{display:flex} }
.menu a{
  text-decoration:none; color:var(--srebro); font-size:.8rem; letter-spacing:.14em;
  text-transform:uppercase; padding:.4rem 0; position:relative; transition:color .25s;
  white-space:nowrap;
}
.menu a::after{
  content:''; position:absolute; left:0; right:0; bottom:-2px; height:1px;
  background:var(--srebro); transform:scaleX(0); transform-origin:left;
  transition:transform .3s cubic-bezier(.2,.7,.3,1);
}
.menu a:hover{color:var(--biel)}
.menu a:hover::after{transform:scaleX(1)}
.menu a[aria-current=page]{color:var(--biel)}
.menu a[aria-current=page]::after{transform:scaleX(1); background:var(--biel)}

.naglowek-tel{
  display:none; font-size:.8rem; letter-spacing:.12em; text-decoration:none;
  color:var(--biel); border:1px solid rgba(255,255,255,.24); padding:.6rem 1.1rem;
  white-space:nowrap; transition:.25s;
}
@media(min-width:1240px){ .naglowek-tel{display:inline-block} }
.naglowek-tel:hover{background:var(--biel); color:var(--atrament)}

.hamburger{
  display:inline-flex; flex-direction:column; justify-content:center; gap:5px;
  width:44px; height:44px; padding:0 10px; background:none; border:0; cursor:pointer;
}
@media(min-width:920px){ .hamburger{display:none} }
.hamburger span{display:block; height:1px; background:var(--biel); transition:.3s}
.hamburger[aria-expanded=true] span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.hamburger[aria-expanded=true] span:nth-child(2){opacity:0}
.hamburger[aria-expanded=true] span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}

.menu-mobilne{
  display:none; flex-direction:column; padding:8px 0 28px;
  border-top:1px solid rgba(255,255,255,.08); background:var(--atrament);
}
.menu-mobilne.otwarte{display:flex}
.menu-mobilne a{
  display:flex; align-items:baseline; gap:1rem; text-decoration:none; color:var(--srebro-jasne);
  padding:1rem var(--wrap-margin,24px); border-bottom:1px solid rgba(255,255,255,.06);
  font-size:1.05rem; width:var(--wrap); margin:0 auto;
}
.menu-mobilne a b{
  font-family:var(--display); color:var(--srebro-ciemne); font-size:.78rem;
  font-variant-numeric:tabular-nums; font-weight:400;
}
.menu-mobilne a[aria-current=page]{color:var(--biel)}

/* nagłówek podstrony */
.tytul-strony{padding:clamp(52px,7vw,96px) 0 clamp(30px,4vw,52px)}
.tytul-strony h1{font-size:clamp(2.2rem,5.4vw,4rem)}
.tytul-strony p{color:var(--srebro-jasne); max-width:56ch; margin-top:1.4rem}

/* ═══════════════════════════════════════════════════════════════
   GALERIE I POWIĘKSZANIE
   ═══════════════════════════════════════════════════════════════ */
.galeria-siatka{display:grid; gap:clamp(14px,2vw,22px); margin-top:2.6rem;
  grid-template-columns:repeat(auto-fill,minmax(240px,1fr))}
.galeria-dyplomy{grid-template-columns:repeat(auto-fill,minmax(270px,1fr))}

.kafel{margin:0}
.kafel .powieksz{
  display:block; width:100%; padding:0; border:1px solid rgba(255,255,255,.1);
  background:var(--wegiel); cursor:zoom-in; overflow:hidden; position:relative;
}
.kafel .powieksz img{
  width:100%; aspect-ratio:4/5; object-fit:cover; object-position:50% 30%;
  transition:transform .6s cubic-bezier(.2,.7,.3,1), opacity .3s;
}
.galeria-dyplomy .powieksz img{aspect-ratio:1/1.32; object-fit:contain; background:#fff; padding:10px}
.kafel .powieksz:hover img{transform:scale(1.04)}
.kafel .powieksz:focus-visible{outline:2px solid var(--srebro); outline-offset:3px}


.lupa{
  position:fixed; inset:0; z-index:200; background:rgba(6,6,7,.95);
  display:none; align-items:center; justify-content:center; padding:clamp(16px,4vw,56px);
  flex-direction:column; gap:1rem;
}
.lupa.otwarta{display:flex}
.lupa img{max-width:100%; max-height:78vh; object-fit:contain; background:#fff}
.lupa-podpis{color:var(--srebro-jasne); font-size:.92rem; text-align:center; margin:0}
.lupa-zamknij{
  position:absolute; top:clamp(12px,2vw,26px); right:clamp(12px,2vw,26px);
  width:48px; height:48px; border:1px solid rgba(255,255,255,.24); background:none;
  color:var(--biel); font-size:1.3rem; line-height:1; cursor:pointer; transition:.25s;
}
.lupa-zamknij:hover{background:var(--biel); color:var(--atrament)}

/* pasek dyplomów na stronie głównej */
.pasek-dyplomow{display:grid; gap:14px; margin-top:2.4rem;
  grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}
.pasek-dyplomow img{width:100%; aspect-ratio:1/1.3; object-fit:contain;
  background:#fff; padding:8px; border:1px solid rgba(255,255,255,.1)}

.link-dalej{
  display:inline-block; margin-top:2rem; text-decoration:none; color:var(--biel);
  font-size:.82rem; letter-spacing:.16em; text-transform:uppercase;
  border-bottom:1px solid var(--srebro); padding-bottom:.35rem; transition:.25s;
}
.link-dalej:hover{border-bottom-color:var(--biel)}
.link-dalej::after{content:' →'; color:var(--srebro)}

/* Miejsce na prawdziwe opinie. Swiadomie puste — na stronie firmy
   nie wolno umieszczac opinii wymyslonych; w Polsce to nieuczciwa
   praktyka rynkowa i odpowiada za nia przedsiebiorca. */
.miejsce-opinii{
  margin-top:2.6rem; padding:clamp(28px,4vw,44px); background:var(--grafit);
  border:1px dashed rgba(255,255,255,.18);
}
.miejsce-opinii p{color:var(--srebro-jasne); margin-bottom:.9rem; max-width:56ch}
.miejsce-opinii p:last-child{margin-bottom:0}
.miejsce-opinii b{color:var(--biel); font-weight:500}

/* ═══════════════════════════════════════════════════════════════
   ZAPROSZENIE DO KONTAKTU — kończy każdą podstronę
   Strona ma sprzedawać, a nie tylko ładnie wyglądać: gość musi
   w każdym miejscu wiedzieć, co zrobić dalej.
   ═══════════════════════════════════════════════════════════════ */
.zaproszenie{
  background:var(--wegiel); border-top:1px solid rgba(255,255,255,.09);
  padding:clamp(56px,8vw,110px) 0;
}
.zaproszenie .nadpis{margin-bottom:1.1rem}
.zaproszenie h2{margin-inline:auto; max-width:18ch}
.zaproszenie-lead{
  color:var(--srebro-jasne); max-width:46ch; margin:1.4rem auto 0; font-size:1.05rem;
}
.zaproszenie-akcje{
  display:flex; flex-wrap:wrap; gap:14px; justify-content:center; margin-top:2.4rem;
}
.zaproszenie-drobne{
  color:var(--srebro-ciemne); font-size:.88rem; margin:1.8rem auto 0; max-width:44ch;
}

/* ZASTĄPIONE przez .dok — zostawione puste */
.pasek-telefon{display:none!important}
/* stary pasek: */
.pasek-telefon{
  position:fixed; left:0; right:0; bottom:0; z-index:80;
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:.7rem 16px calc(.7rem + env(safe-area-inset-bottom, 0px));
  background:rgba(10,10,11,.94); backdrop-filter:blur(12px);
  border-top:1px solid rgba(255,255,255,.12);
}
@media(min-width:920px){ .pasek-telefon{display:none} }
.pasek-telefon .haslo{
  font-size:.78rem; color:var(--srebro); line-height:1.35; letter-spacing:.02em;
}
.pasek-telefon .haslo b{display:block; color:var(--biel); font-weight:400; font-size:.92rem}
.pasek-telefon a{
  flex:0 0 auto; background:var(--biel); color:var(--atrament); text-decoration:none;
  padding:.72rem 1.25rem; font-size:.82rem; letter-spacing:.14em; text-transform:uppercase;
}
body{padding-bottom:0}
@media(max-width:919px){ body{padding-bottom:74px} }

/* Pasek dyplomów na stronie głównej też ma się otwierać — wcześniej
   były to zwykłe obrazki i kliknięcie w nie nic nie robiło. */
.pasek-dyplomow .powieksz{
  display:block; width:100%; padding:0; border:0; background:none; cursor:zoom-in;
}
.pasek-dyplomow .powieksz img{
  transition:transform .5s cubic-bezier(.2,.7,.3,1), border-color .3s;
}
.pasek-dyplomow .powieksz:hover img{transform:translateY(-4px)}
.pasek-dyplomow .powieksz:focus-visible{outline:2px solid var(--srebro); outline-offset:3px}

/* Podpowiedź, że w zdjęcia można kliknąć */

.pasek-dyplomow .powieksz{position:relative}
.kafel .powieksz:hover::after,.pasek-dyplomow .powieksz:hover::after,
.kafel .powieksz:focus-visible::after,.pasek-dyplomow .powieksz:focus-visible::after{opacity:1}
@media(hover:none){ .kafel .powieksz::after,.pasek-dyplomow .powieksz::after{opacity:.85} }

/* ═══════════════════════════════════════════════════════════════
   DOLNY DOK NA TELEFONIE + WYSUWANY PANEL
   Na telefonie kciuk jest na dole ekranu, nie na górze. Najważniejsze
   akcje muszą tam być przez cały czas, a nie po przewinięciu strony.
   ═══════════════════════════════════════════════════════════════ */
.dok{
  position:fixed; left:0; right:0; bottom:0; z-index:90; display:grid;
  grid-template-columns:repeat(3,1fr);
  background:rgba(10,10,11,.95); backdrop-filter:blur(16px);
  border-top:1px solid rgba(255,255,255,.12);
  padding-bottom:env(safe-area-inset-bottom, 0px);
}
@media(min-width:920px){ .dok{display:none} }
.dok a,.dok button{
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:5px;
  padding:.72rem 4px .68rem; background:none; border:0; cursor:pointer;
  color:var(--srebro-jasne); font-family:var(--tekst); font-size:.66rem;
  letter-spacing:.1em; text-transform:uppercase; text-decoration:none;
}
.dok a:active,.dok button:active{background:rgba(255,255,255,.06)}
.dok .glowna{color:var(--atrament); background:var(--biel)}
.dok svg{width:19px; height:19px; stroke-width:1.6}

.zaslona{position:fixed; inset:0; z-index:95; background:rgba(6,6,7,.7);
  opacity:0; pointer-events:none; transition:opacity .3s}
.zaslona.widac{opacity:1; pointer-events:auto}

.panel{
  position:fixed; left:0; right:0; bottom:0; z-index:96;
  background:var(--wegiel); border-top:1px solid rgba(255,255,255,.14);
  border-radius:20px 20px 0 0; padding:12px 0 calc(20px + env(safe-area-inset-bottom,0px));
  transform:translateY(101%); max-height:82vh; overflow-y:auto;
  /* visibility, nie sam transform: schowany panel ma wypasc z kolejnosci
     Taba. Bez tego wszystkie pozycje menu byly osiagalne klawiatura mimo
     ze nic nie widac — takze na duzym ekranie, gdzie dolny pasek w ogole
     sie nie pokazuje. */
  visibility:hidden;
  transition:transform .38s cubic-bezier(.2,.8,.25,1), visibility 0s linear .38s;
}
.panel.widac{transform:none; visibility:visible;
  transition:transform .38s cubic-bezier(.2,.8,.25,1), visibility 0s}
.panel-uchwyt{width:42px; height:4px; border-radius:99px; background:rgba(255,255,255,.26);
  margin:0 auto 14px}
.panel-glowa{display:flex; align-items:center; justify-content:space-between;
  padding:0 20px 12px; border-bottom:1px solid rgba(255,255,255,.09)}
.panel-glowa h2{font-size:1.3rem}
.panel-zamknij{width:40px; height:40px; border:1px solid rgba(255,255,255,.2);
  background:none; color:var(--biel); font-size:1.1rem; cursor:pointer}
.panel-lista{display:flex; flex-direction:column; padding:6px 0}
.panel-lista a{
  display:flex; align-items:center; gap:14px; padding:.95rem 20px;
  color:var(--srebro-jasne); text-decoration:none; font-size:1.02rem;
  border-bottom:1px solid rgba(255,255,255,.05);
}
.panel-lista a b{font-family:var(--display); font-size:.76rem; color:var(--srebro-ciemne);
  font-variant-numeric:tabular-nums; font-weight:400; min-width:2ch}
.panel-lista a[aria-current=page]{color:var(--biel)}
.panel-stopka{padding:16px 20px 0; display:flex; gap:10px}
.panel-stopka a{flex:1; text-align:center; padding:.85rem; text-decoration:none;
  font-size:.78rem; letter-spacing:.12em; text-transform:uppercase}
.panel-stopka .a1{background:var(--biel); color:var(--atrament)}
.panel-stopka .a2{border:1px solid rgba(255,255,255,.24); color:var(--biel)}

@media(max-width:919px){ body{padding-bottom:76px} }

/* ═══════════════════════════════════════════════════════════════
   ŚRODKI EDYTORSKIE — żeby strona przestała mieć jeden rytm
   ═══════════════════════════════════════════════════════════════ */

/* wielki cytat oddzielający sekcje */
.mysl{padding:clamp(56px,8vw,110px) 0; text-align:center}
.mysl blockquote{
  margin:0 auto; max-width:20ch; font-family:var(--display);
  font-size:clamp(1.9rem,4.6vw,3.4rem); line-height:1.16; color:var(--biel);
  font-style:italic; letter-spacing:-.02em;
}
.mysl cite{display:block; margin-top:1.8rem; font-family:var(--tekst); font-style:normal;
  font-size:.74rem; letter-spacing:.24em; text-transform:uppercase; color:var(--srebro-ciemne)}

/* kroki z wielkimi numerami */
.kroki{counter-reset:krok; display:grid; gap:0; margin-top:3rem}
@media(min-width:860px){ .kroki{grid-template-columns:repeat(2,1fr); column-gap:clamp(32px,5vw,72px)} }
.krok{position:relative; padding:clamp(24px,3vw,34px) 0;
  border-top:1px solid rgba(255,255,255,.11)}
.krok::before{
  counter-increment:krok; content:counter(krok,decimal-leading-zero);
  font-family:var(--display); font-size:clamp(2.4rem,5vw,3.6rem); color:rgba(255,255,255,.13);
  line-height:1; display:block; margin-bottom:.5rem; font-variant-numeric:tabular-nums;
}
.krok h3{margin-bottom:.6rem}
.krok p{color:var(--srebro-jasne); font-size:.97rem; margin:0; max-width:46ch}

/* pas zdjęcia przez całą szerokość */
.pas{position:relative; height:clamp(240px,38vw,460px); overflow:hidden}
.pas img{width:100%; height:100%; object-fit:cover; object-position:50% 32%}
.pas::after{content:''; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(10,10,11,.55), rgba(10,10,11,.15) 40%, rgba(10,10,11,.75))}
.pas-tresc{position:absolute; inset:0; display:flex; align-items:center; z-index:2}
.pas-tresc .wrap{width:var(--wrap)}
.pas-tresc h2{color:var(--biel); max-width:16ch}

/* rozwijane pytania */
.pytania{margin-top:2.8rem; border-top:1px solid rgba(255,255,255,.11)}
.pytania details{border-bottom:1px solid rgba(255,255,255,.11)}
.pytania summary{
  list-style:none; cursor:pointer; padding:1.3rem 2.4rem 1.3rem 0; position:relative;
  font-family:var(--display); font-size:clamp(1.05rem,2vw,1.3rem); color:var(--biel);
}
.pytania summary::-webkit-details-marker{display:none}
.pytania summary::after{
  content:''; position:absolute; right:4px; top:50%; width:11px; height:11px;
  border-right:1px solid var(--srebro); border-bottom:1px solid var(--srebro);
  transform:translateY(-70%) rotate(45deg); transition:transform .3s;
}
.pytania details[open] summary::after{transform:translateY(-30%) rotate(-135deg)}
.pytania summary:focus-visible{outline:2px solid var(--srebro); outline-offset:2px}
.pytania p{color:var(--srebro-jasne); padding:0 2rem 1.5rem 0; margin:0; max-width:62ch;
  font-size:.98rem}
.pytania b{color:var(--biel); font-weight:500}

/* karta usługi z numerem i zdjęciem */
.usluga-duza{
  display:grid; gap:clamp(24px,4vw,56px); align-items:center;
  padding:clamp(36px,5vw,64px) 0; border-top:1px solid rgba(255,255,255,.11);
}
@media(min-width:900px){
  .usluga-duza{grid-template-columns:.9fr 1.1fr}
  .usluga-duza:nth-child(even) .u-foto{order:2}
}
/* Kadry przy usługach.
   Było: sztywna ramka 4:3. Pionowe zdjęcia (733×1100) wciskane w poziomą
   ramkę traciły górę — Adze ucinało głowę. Teraz ramka jest wyższa,
   a punkt kadrowania przesunięty do góry, więc twarz mieści się w całości
   już przy pierwszym spojrzeniu. */
.usluga-duza .u-foto img{
  width:100%; aspect-ratio:4/3.4; object-fit:cover; object-position:50% 22%;
}
@media(max-width:899px){
  .usluga-duza .u-foto img{aspect-ratio:4/3.6}
}
.u-numer{font-family:var(--display); font-size:.8rem; letter-spacing:.2em;
  color:var(--srebro-ciemne); display:block; margin-bottom:.9rem;
  font-variant-numeric:tabular-nums}
.usluga-duza h3{font-size:clamp(1.5rem,3vw,2.1rem); margin-bottom:1rem}
.usluga-duza p{color:var(--srebro-jasne); max-width:52ch}
.u-fakty{display:flex; flex-wrap:wrap; gap:10px; margin-top:1.4rem; padding:0; list-style:none}
.u-fakty li{
  font-size:.76rem; letter-spacing:.1em; text-transform:uppercase; color:var(--srebro);
  border:1px solid rgba(255,255,255,.16); padding:.45rem .8rem;
}

/* Dyplomy jako rzędy na przemian — dokument z jednej strony, opis
   z drugiej. Wcześniej były siatką na samym dole strony i nikt
   nie łączył ich z opowieścią obok. */
.usluga-duza.dyplom{align-items:center}
/* Ramka MUSI opinac sie ciasno wokol zdjecia (fit-content), nie stac
   sie pelna szerokoscia kolumny — inaczej pionowy dyplom w poziomej
   kolumnie zostawia wielka pusta bialą płachtę z boku, wygląda jak
   niewykadrowane, choc sam plik jest przyciety poprawnie. */
.usluga-duza.dyplom .u-foto{text-align:center}
.usluga-duza.dyplom .u-foto .powieksz{
  display:inline-block; width:auto; max-width:100%; padding:12px;
  border:1px solid rgba(255,255,255,.12);
  background:var(--biel); cursor:zoom-in; position:relative;
}
.usluga-duza.dyplom .u-foto img{
  display:block; width:auto; max-width:100%; height:auto; object-fit:contain;
  max-height:620px; margin:0 auto;
}
.usluga-duza.dyplom .u-foto .powieksz:hover{border-color:rgba(255,255,255,.34)}
.usluga-duza.dyplom .u-numer{
  font-size:clamp(1.6rem,3.4vw,2.4rem); letter-spacing:0; color:var(--srebro);
  margin-bottom:.6rem; line-height:1;
}
@media(min-width:900px){
  .usluga-duza.dyplom:nth-of-type(odd) .u-foto{order:2}
  .usluga-duza.dyplom:nth-of-type(even) .u-foto{order:0}
}

/* Strzałki i licznik w powiększeniu — bez tego trzeba było zamykać
   zdjęcie, żeby obejrzeć następne. */
.lupa-scena{display:flex; align-items:center; justify-content:center; max-width:100%}
.lupa img{transition:opacity .22s ease}
.lupa-strzalka{
  position:absolute; top:50%; transform:translateY(-50%); z-index:2;
  width:56px; height:56px; border:1px solid rgba(255,255,255,.22); background:rgba(10,10,11,.5);
  color:var(--biel); font-size:2rem; line-height:1; cursor:pointer; transition:.25s;
  display:flex; align-items:center; justify-content:center; padding-bottom:5px;
}
.lupa-strzalka:hover{background:var(--biel); color:var(--atrament)}
.lupa-strzalka.wstecz{left:clamp(8px,2vw,28px)}
.lupa-strzalka.dalej{right:clamp(8px,2vw,28px)}
.lupa-strzalka[hidden]{display:none}
.lupa-licznik{
  color:var(--srebro-ciemne); font-size:.78rem; letter-spacing:.18em; margin:0;
  font-variant-numeric:tabular-nums;
}
@media(max-width:560px){
  .lupa-strzalka{width:44px; height:44px; font-size:1.5rem}
  .lupa img{max-height:66vh}
}

/* Dyplom bez wymiarów potrafił mieć zerową wysokość, zanim się
   doładował — przez to pierwszy rząd wyglądał na pusty. Tło białe,
   nie szare — inaczej niedopasowanie proporcji obrazu do ramki
   pokazywało się jako brzydki szary pasek zamiast wtapiać się w kartę. */
.usluga-duza.dyplom .u-foto img{min-height:220px; min-width:160px; background:var(--biel)}

/* Karty opinii na stronie głównej prowadzą do zakładki z opiniami. */
.opinia-klik{
  text-decoration:none; color:inherit; transition:border-color .3s, transform .3s;
}
.opinia-klik:hover{border-color:rgba(255,255,255,.28); transform:translateY(-3px)}
.opinia-wiecej{
  margin-top:1.2rem; font-size:.72rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--srebro-ciemne); transition:color .3s;
}
.opinia-wiecej::after{content:' →'}
.opinia-klik:hover .opinia-wiecej{color:var(--biel)}
.opinia-klik:focus-visible{outline:2px solid var(--srebro); outline-offset:3px}

/* ═══════════════════════════════════════════════════════════════
   PORADNIK
   Ludzie nie szukają „fryzjer Częstochowa". Szukają „czy da się
   naprawić włosy po domowym farbowaniu". Każdy tekst to osobne
   wejście na stronę od kogoś, kto ma dokładnie ten problem.
   ═══════════════════════════════════════════════════════════════ */
.porady-siatka{display:grid; gap:clamp(14px,2vw,20px); margin-top:1rem}
@media(min-width:760px){ .porady-siatka{grid-template-columns:repeat(2,1fr)} }
.porada-kafel{
  display:flex; flex-direction:column; text-decoration:none; color:inherit;
  background:var(--grafit); border:1px solid rgba(255,255,255,.09);
  padding:clamp(26px,3.4vw,38px); transition:border-color .3s, transform .3s;
}
.porada-kafel:hover{border-color:rgba(255,255,255,.28); transform:translateY(-3px)}
.porada-kafel h3{margin-bottom:.9rem; font-size:clamp(1.2rem,2.2vw,1.55rem)}
.porada-kafel p{color:var(--srebro-jasne); font-size:.96rem; flex:1; margin-bottom:1.2rem}
.porada-kafel:focus-visible{outline:2px solid var(--srebro); outline-offset:3px}

.artykul h3{
  font-size:clamp(1.25rem,2.4vw,1.7rem); margin:2.4rem 0 .9rem; color:var(--biel);
}
.artykul h3:first-child{margin-top:0}
.artykul p{color:var(--srebro-jasne); max-width:64ch; font-size:1.03rem; line-height:1.78}
.artykul b{color:var(--biel); font-weight:500}
.artykul i{color:var(--srebro)}

.porady-inne{display:grid; gap:12px; margin-top:2rem}
@media(min-width:760px){ .porady-inne{grid-template-columns:repeat(3,1fr)} }
.porada-maly{
  display:flex; align-items:center; text-decoration:none; color:var(--srebro-jasne);
  border:1px solid rgba(255,255,255,.13); padding:1.1rem 1.2rem; font-size:.95rem;
  line-height:1.45; transition:.3s;
}
.porada-maly:hover{border-color:rgba(255,255,255,.34); color:var(--biel)}
.porada-maly::after{content:' →'; margin-left:auto; padding-left:.7rem; color:var(--srebro-ciemne)}

/* Klientka nie szuka „koloryzacji" — szuka rozwiązania swojego kłopotu.
   Te karty mówią jej zdaniem, nie nazwą usługi. */
.sytuacje{display:grid; gap:clamp(12px,1.6vw,18px); margin-top:2.8rem}
@media(min-width:700px){ .sytuacje{grid-template-columns:repeat(2,1fr)} }
.sytuacja{
  display:flex; flex-direction:column; text-decoration:none;
  border:1px solid rgba(255,255,255,.11); padding:clamp(24px,3vw,32px);
  transition:border-color .3s, background .3s;
}
.sytuacja:hover{border-color:rgba(255,255,255,.3); background:var(--wegiel)}
.sytuacja:focus-visible{outline:2px solid var(--srebro); outline-offset:3px}
.s-cyt{
  font-family:var(--display); font-size:clamp(1.1rem,2.1vw,1.4rem); color:var(--biel);
  font-style:italic; line-height:1.3; margin-bottom:.9rem;
}
.s-odp{color:var(--srebro-jasne); font-size:.95rem; line-height:1.6; flex:1}
.sytuacja .opinia-wiecej{margin-top:1.2rem}

/* Ktoś, kto wchodzi o 19:00, ma od razu wiedzieć, czy dzwonić teraz. */
.naglowek-prawo{display:flex; align-items:center; gap:16px}
.stan{
  display:none; font-size:.72rem; letter-spacing:.1em; text-transform:uppercase;
  color:var(--srebro-ciemne); white-space:nowrap; align-items:center; gap:.5rem;
}
@media(min-width:1440px){ .stan{display:inline-flex} }
.stan::before{content:''; width:7px; height:7px; border-radius:50%; background:currentColor}
.stan.otwarte{color:#6fcf97}
.stan.zamkniete{color:var(--srebro-ciemne)}

/* ═══════════════════════════════════════════════════════════════
   WSZYSTKIE ZDJĘCIA CZARNO-BIAŁE

   Agnieszka, 29.08 o 23:34: „Myślę żeby zmienić jednak zdjęcia
   wszystkie na czarno-białe skoro strona jest czarno biała."

   ⚠️ To odwraca wcześniejszą decyzję Piotra, który chciał koloru
   w portfolio („przecież ona robi włosy, a tam są kolory").
   Jeśli wraca kolor — wystarczy usunąć tę jedną regułę.

   Robione filtrem, nie przerabianiem plików: kolorowe oryginały
   zostają na dysku i wracają natychmiast, gdyby decyzja się zmieniła.
   ═══════════════════════════════════════════════════════════════ */
.hero-foto img,
.dwie img,
.galeria img,
.kafel .powieksz img,
.pasek-dyplomow img,
.usluga-duza img,
.pas img,
.tasma-kadr img,
.porada-kafel img,
.lupa img{
  filter:grayscale(1) contrast(1.03);
}
/* przy najechaniu kolor NIE wraca — strona ma być konsekwentnie czarno-biała */

/* ═══════════════════════════════════════════════════════════════
   OPINIE — PRZEBUDOWANE
   Były trzy wąskie kolumny z drobnym tekstem i wyglądały źle.
   Teraz szerokie karty w jednej kolumnie: imię, data, gwiazdki,
   pełna treść — tak, żeby dało się je przeczytać, a nie tylko
   zobaczyć, że są.
   ═══════════════════════════════════════════════════════════════ */
.opinie-siatka{display:grid; gap:clamp(14px,2vw,20px); margin-top:2.6rem}
@media(min-width:1000px){ .opinie-siatka{grid-template-columns:1fr 1fr} }

.opinia{
  background:var(--grafit); border:1px solid rgba(255,255,255,.09);
  padding:clamp(26px,3.4vw,38px); display:block;
}
.opinia-glowa{
  display:flex; align-items:baseline; justify-content:space-between; gap:16px;
  margin-bottom:.7rem; flex-wrap:wrap;
}
.opinia-kto{
  font-family:var(--display); font-size:clamp(1.05rem,1.9vw,1.25rem);
  color:var(--biel); letter-spacing:-.01em;
}
.opinia-data{font-size:.78rem; color:var(--srebro-ciemne); white-space:nowrap}
.opinia .gwiazdki{color:var(--biel); letter-spacing:.2em; font-size:.85rem; margin:0 0 1rem}
.opinia-tresc{
  color:var(--srebro-jasne); font-size:1rem; line-height:1.72; margin:0; max-width:56ch;
}

/* pasek z oceną Google i wyraźnym przyciskiem */
.google-pasek{
  display:flex; align-items:center; justify-content:space-between; gap:20px;
  flex-wrap:wrap; margin-top:2.6rem; padding:clamp(22px,3vw,30px);
  border:1px solid rgba(255,255,255,.16); background:var(--wegiel);
}
.google-ocena{display:block; color:var(--biel); font-size:1.05rem; letter-spacing:.12em}
.google-ocena b{font-family:var(--display); font-size:1.9rem; letter-spacing:0; margin-right:.5rem}
.google-ile{display:block; color:var(--srebro-ciemne); font-size:.82rem;
  letter-spacing:.14em; text-transform:uppercase; margin-top:.35rem}

/* odznaka w hero jest teraz odnośnikiem */
a.odznaka{text-decoration:none; transition:border-color .3s, background .3s}
a.odznaka:hover{border-color:rgba(255,255,255,.5); background:rgba(255,255,255,.05)}
.odznaka-gw{color:var(--biel)}
.odznaka-strzalka{margin-left:.5rem; color:var(--srebro-ciemne); transition:transform .3s}
a.odznaka:hover .odznaka-strzalka{color:var(--biel)}
.hero-drobne{
  margin-top:1.1rem; font-size:.84rem; color:var(--srebro-ciemne);
}
.hero-drobne a{color:var(--srebro-jasne); text-decoration:none;
  border-bottom:1px solid rgba(255,255,255,.22); padding-bottom:1px}
.hero-drobne a:hover{color:var(--biel); border-bottom-color:var(--biel)}

/* ═══════════════════════════════════════════════════════════════
   MEDIA SPOŁECZNOŚCIOWE
   Tam trafia najświeższe: metamorfozy, wolne terminy, rolki.
   Strona nadąża później, więc ma tam zapraszać w kilku miejscach.
   ═══════════════════════════════════════════════════════════════ */
.social-blok{display:grid; gap:clamp(28px,4vw,56px); align-items:center}
@media(min-width:900px){ .social-blok{grid-template-columns:1.15fr .85fr} }
.social-przyciski{display:grid; gap:14px}
.social-btn{
  display:flex; flex-direction:column; gap:.3rem; text-decoration:none;
  border:1px solid rgba(255,255,255,.18); padding:1.3rem 1.5rem;
  transition:border-color .3s, background .3s, transform .3s;
}
.social-btn:hover{border-color:var(--biel); background:rgba(255,255,255,.04); transform:translateY(-2px)}
.social-nazwa{color:var(--biel); font-size:1.05rem; letter-spacing:.04em}
.social-uchwyt{color:var(--srebro-ciemne); font-size:.85rem}
.social-btn::after{content:'→'; position:absolute}
.social-btn{position:relative}
.social-btn::after{right:1.5rem; top:50%; transform:translateY(-50%); color:var(--srebro-ciemne)}

.spolecznosci{
  margin-top:2.4rem; padding-top:1.8rem; border-top:1px solid rgba(255,255,255,.1);
  display:flex; flex-wrap:wrap; gap:14px; align-items:center; justify-content:center;
  font-size:.86rem; color:var(--srebro-ciemne);
}
.spolecznosci a{
  color:var(--biel); text-decoration:none; border:1px solid rgba(255,255,255,.2);
  padding:.5rem 1.1rem; font-size:.78rem; letter-spacing:.12em; text-transform:uppercase;
  transition:.25s;
}
.spolecznosci a:hover{background:var(--biel); color:var(--atrament)}

/* ═══════════════════════════════════════════════════════════════
   ZDJĘCIA — PODPIS NA KADRZE, LUPA, PRZYBLIŻENIE
   Wzięte z Lawendy i Pergoli: podpis leży NA zdjęciu pod gradientem,
   nie pod nim szarym drobiazgiem. Przy najechaniu kadr delikatnie
   się przybliża i wyjeżdża lupa — widać, że da się kliknąć.
   ═══════════════════════════════════════════════════════════════ */
.kafel .powieksz{
  display:block; width:100%; padding:0; border:0; background:var(--wegiel);
  cursor:zoom-in; overflow:hidden; position:relative; text-align:left;
}
.kafel .powieksz img{
  width:100%; aspect-ratio:4/5; object-fit:cover; object-position:50% 28%;
  transition:transform 1.1s cubic-bezier(.22,.61,.36,1), filter .5s;
}
.kafel .powieksz:hover img{transform:scale(1.055)}

.kafel figcaption{
  position:absolute; left:0; right:0; bottom:0; z-index:2;
  padding:52px 20px 18px; color:#fff; pointer-events:none;
  background:linear-gradient(to top, rgba(8,8,9,.94), rgba(8,8,9,.55) 52%, transparent);
}
.kafel figcaption b{
  display:block; font-family:var(--display); font-size:clamp(1rem,1.5vw,1.18rem);
  font-weight:400; line-height:1.25; letter-spacing:-.01em;
}
.kafel figcaption span{
  display:block; font-size:.8rem; color:rgba(255,255,255,.72); margin-top:.3rem;
  line-height:1.45; max-height:0; opacity:0; overflow:hidden;
  transition:max-height .45s cubic-bezier(.22,.61,.36,1), opacity .35s, margin-top .45s;
}
.kafel .powieksz:hover figcaption span,
.kafel .powieksz:focus-visible figcaption span{max-height:4em; opacity:1; margin-top:.4rem}
@media(hover:none){ .kafel figcaption span{max-height:4em; opacity:1; margin-top:.4rem} }

.kafel-lupa{
  position:absolute; top:14px; right:14px; z-index:3;
  width:42px; height:42px; display:flex; align-items:center; justify-content:center;
  background:rgba(255,255,255,.94); color:var(--atrament); border-radius:50%;
  opacity:0; transform:scale(.7) translateY(-6px); transition:.35s cubic-bezier(.22,.61,.36,1);
  pointer-events:none;
}
.kafel-lupa svg{width:19px; height:19px}
.kafel .powieksz:hover .kafel-lupa,
.kafel .powieksz:focus-visible .kafel-lupa{opacity:1; transform:none}
@media(hover:none){ .kafel-lupa{opacity:.9; transform:none} }

/* dyplomy: dokument w całości, na bieli, podpis pod spodem */
.galeria-dyplomy .powieksz img{
  aspect-ratio:1/1.32; object-fit:contain; background:#fff; padding:12px;
}
.galeria-dyplomy .powieksz:hover img{transform:scale(1.02)}
.galeria-dyplomy figcaption{position:static; padding:1rem 0 0; background:none; color:inherit}
.galeria-dyplomy figcaption b{color:var(--biel)}
.galeria-dyplomy figcaption span{color:var(--srebro-ciemne); max-height:none; opacity:1; margin-top:.4rem}

/* rząd dyplomu na podstronie „O mnie" — lupa też tam działa */
.usluga-duza.dyplom .u-foto .powieksz .kafel-lupa{top:20px; right:20px}

/* ═══════════════════════════════════════════════════════════════
   TAŚMA — ZDJĘCIA JADĄ SAME
   Jak na stronie głównej probatum.pl. Zestaw jest w kodzie dwa razy,
   więc pętla nie ma szwu. Zatrzymuje się pod kursorem i przy
   ustawieniu „ogranicz ruch" w systemie.
   ═══════════════════════════════════════════════════════════════ */
.tasma-sekcja{padding:clamp(20px,3vw,44px) 0 clamp(36px,5vw,64px)}
.tasma{overflow:hidden; -webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.tasma-tor{
  display:flex; gap:14px; width:max-content;
  animation:plynie 68s linear infinite;
}
.tasma:hover .tasma-tor,.tasma:focus-within .tasma-tor{animation-play-state:paused}
@keyframes plynie{ from{transform:translateX(0)} to{transform:translateX(-50%)} }

.tasma-kadr{
  position:relative; margin:0; flex:0 0 auto; width:clamp(200px,22vw,290px);
  overflow:hidden; background:var(--wegiel); border:1px solid rgba(255,255,255,.08);
}
.tasma-kadr img{
  width:100%; aspect-ratio:4/5; object-fit:cover; object-position:50% 28%;
  transition:transform 1s cubic-bezier(.22,.61,.36,1);
}
.tasma-kadr:hover img{transform:scale(1.06)}
.tasma-kadr figcaption{
  position:absolute; left:0; right:0; bottom:0; padding:44px 14px 12px; color:#fff;
  background:linear-gradient(to top, rgba(8,8,9,.92), rgba(8,8,9,.4) 55%, transparent);
}
.tasma-kadr figcaption b{
  display:block; font-family:var(--display); font-size:.98rem; font-weight:400; line-height:1.25;
}
.tasma-kadr figcaption span{
  display:block; font-size:.74rem; color:rgba(255,255,255,.66); margin-top:.2rem; line-height:1.4;
}
.tasma-podpis{
  text-align:center; margin:1.6rem 0 0; font-size:.78rem; letter-spacing:.16em;
  text-transform:uppercase; color:var(--srebro-ciemne);
}
.tasma-podpis a{color:var(--srebro-jasne); text-decoration:none;
  border-bottom:1px solid rgba(255,255,255,.28); padding-bottom:1px}
.tasma-podpis a:hover{color:var(--biel); border-bottom-color:var(--biel)}

@media (prefers-reduced-motion:reduce){
  .tasma-tor{animation:none; flex-wrap:nowrap; overflow-x:auto}
}

/* pas z tekstem na zdjęciu — nagłówek leży na kadrze */
.pas-tresc .nadpis{margin-bottom:.9rem}
.pas-tresc h2{text-shadow:0 2px 24px rgba(0,0,0,.5)}

/* Kadry w taśmie są przyciskami — dało się je zobaczyć, ale nie otworzyć.
   Przy dotknięciu taśma się zatrzymuje, żeby nie uciekała spod palca. */
.tasma-kadr .powieksz{
  display:block; width:100%; padding:0; border:0; background:none;
  cursor:zoom-in; position:relative; text-align:left;
}
.tasma:has(.powieksz:active) .tasma-tor,
.tasma:has(.powieksz:focus-visible) .tasma-tor{animation-play-state:paused}
.tasma-kadr .kafel-lupa{top:12px; right:12px; width:38px; height:38px}
.tasma-kadr .kafel-lupa svg{width:17px; height:17px}
@media(hover:none){
  .tasma-kadr .kafel-lupa{opacity:.92; transform:none}
}

/* Zdjęcia poza galeriami też się powiększają — człowiek odruchowo
   w nie klika. Przycisk jest „przezroczysty": nie zmienia układu,
   dokłada tylko kursor, lupę i lekkie przybliżenie. */
.powieksz-luzny{
  display:block; width:100%; padding:0; border:0; background:none;
  cursor:zoom-in; position:relative; overflow:hidden; text-align:left;
}
.powieksz-luzny > img{
  display:block; width:100%;
  transition:transform 1.1s cubic-bezier(.22,.61,.36,1);
}
.powieksz-luzny:hover > img{transform:scale(1.03)}
.powieksz-luzny .kafel-lupa{top:16px; right:16px}
.powieksz-luzny:focus-visible{outline:2px solid var(--srebro); outline-offset:3px}
/* w pasie z tłem zdjęcie wypełnia całą wysokość */
.pas .powieksz-luzny{position:absolute; inset:0; height:100%}
.pas .powieksz-luzny > img{height:100%; object-fit:cover}
.pas .powieksz-luzny .kafel-lupa{top:auto; bottom:18px; right:18px}

/* Liczby, które mówią same za siebie — ćwierć wieku w zawodzie
   i osiemnaście lat własnego salonu to dwie różne rzeczy i obie
   warto pokazać osobno. */
.liczby{display:grid; gap:1px; background:rgba(255,255,255,.09);
  border:1px solid rgba(255,255,255,.09)}
@media(min-width:620px){ .liczby{grid-template-columns:repeat(2,1fr)} }
@media(min-width:980px){ .liczby{grid-template-columns:repeat(4,1fr)} }
.liczba{background:var(--wegiel); padding:clamp(26px,3.4vw,40px) clamp(20px,2.5vw,28px);
  text-align:center}
.liczba b{
  display:block; font-family:var(--display); font-size:clamp(2.2rem,4.4vw,3.2rem);
  color:var(--biel); font-weight:400; line-height:1; font-variant-numeric:tabular-nums;
}
.liczba span{
  display:block; margin-top:.7rem; font-size:.78rem; letter-spacing:.14em;
  text-transform:uppercase; color:var(--srebro-ciemne); line-height:1.5;
}

/* Magazyn otwiera portfolio — okładka po jednej stronie, opis po drugiej.
   Cała sesja powstała do tego jednego numeru i to ma być widać od razu,
   a nie dopiero w podpisach pod zdjęciami. */
.magazyn{display:grid; gap:clamp(28px,4vw,64px); align-items:center}
@media(min-width:900px){ .magazyn{grid-template-columns:.85fr 1.15fr} }
.magazyn-foto .powieksz{
  display:block; width:100%; padding:0; border:1px solid rgba(255,255,255,.12);
  background:var(--wegiel); cursor:zoom-in; overflow:hidden; position:relative;
}
.magazyn-foto img{
  width:100%; display:block;
  transition:transform 1.1s cubic-bezier(.22,.61,.36,1);
}
.magazyn-foto .powieksz:hover img{transform:scale(1.035)}
.magazyn-tresc h2{margin-bottom:1.2rem}
.magazyn-tresc p{color:var(--srebro-jasne); max-width:52ch}
.magazyn-tresc b{color:var(--biel); font-weight:500}

/* zdanie, które musi być przeczytane przed galerią */
.wyjasnienie{
  margin:1.6rem 0 0; padding:clamp(18px,2.4vw,24px) clamp(20px,2.6vw,28px);
  border-left:2px solid var(--srebro); background:var(--wegiel);
  color:var(--srebro-jasne); max-width:66ch; font-size:.98rem; line-height:1.7;
}
.wyjasnienie b{color:var(--biel); font-weight:500}

/* „2025 — dziś" na końcu drogi zawodowej. Wyróżnione, bo to jedyny
   punkt, który wciąż trwa — i to jest jego treść. */
.teraz{
  display:grid; gap:clamp(16px,3vw,40px); align-items:start;
  margin-top:clamp(32px,4vw,56px); padding:clamp(28px,3.6vw,44px);
  border:1px solid rgba(255,255,255,.2); background:var(--wegiel);
}
@media(min-width:760px){ .teraz{grid-template-columns:auto 1fr} }
.teraz-rok{
  font-family:var(--display); font-size:clamp(1.3rem,2.4vw,1.7rem); color:var(--srebro);
  white-space:nowrap; font-variant-numeric:tabular-nums;
}
.teraz h3{margin-bottom:.7rem}
.teraz p{color:var(--srebro-jasne); margin:0; max-width:56ch}

/* ═══════════════════════════════════════════════════════════════
   LINIE L’ORÉAL
   Nie sklep — wytłumaczenie. Każda karta ma tę samą budowę:
   nazwa, dla kogo, jaki problem rozwiązuje, czego się spodziewać.
   ═══════════════════════════════════════════════════════════════ */
.produkty{display:grid; gap:clamp(14px,2vw,20px); margin-top:2.8rem}
@media(min-width:900px){ .produkty{grid-template-columns:1fr 1fr} }
.produkt{
  background:var(--grafit); border:1px solid rgba(255,255,255,.09);
  padding:clamp(26px,3.4vw,38px); display:flex; flex-direction:column;
}
.produkt-glowa{margin-bottom:1.2rem; padding-bottom:1rem;
  border-bottom:1px solid rgba(255,255,255,.11)}
.produkt h3{font-size:clamp(1.3rem,2.4vw,1.7rem); margin-bottom:.4rem}
.produkt-dla{
  margin:0; font-size:.78rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--srebro-ciemne); line-height:1.5;
}
.produkt-problem{color:var(--srebro); font-size:.97rem; line-height:1.7}
.produkt-opis{color:var(--srebro-jasne); font-size:.97rem; line-height:1.7; flex:1}
.produkt .u-fakty{margin-top:1.2rem}

/* Zdanie, które ma zdjąć podejrzenie, że to sklep. */
.uwaga-sklep{
  margin-top:1.8rem; padding:clamp(18px,2.4vw,24px);
  border:1px dashed rgba(255,255,255,.22); background:var(--wegiel);
  color:var(--srebro-jasne); font-size:.95rem;
}
.uwaga-sklep b{color:var(--biel); font-weight:500}

/* ═══════════════════════════════════════════════════════════════
   ABSOLUT REPAIR MOLECULAR — protokol szesciu produktow

   Numeracja nie jest ozdoba. Te produkty stosuje sie PO SOBIE
   i numer niesie te informacje — dlatego duzy, na lewo od tresci,
   spiety pionowa linia jak os czasu.
   ═══════════════════════════════════════════════════════════════ */
.mol-sekcja{background:var(--atrament); scroll-margin-top:96px}
.mol-sekcja h2{color:var(--biel)}
.mol-sekcja .nadpis{color:var(--srebro)}

.mol-wstep{
  color:var(--srebro-jasne); max-width:62ch; line-height:1.75;
  margin-top:1.4rem; font-size:1.02rem;
}
.mol-wstep b{color:var(--biel); font-weight:500}

.mol-lista{
  margin-top:3.2rem;
  border-top:1px solid var(--linia);
}
.mol{
  display:grid;
  grid-template-columns:auto 1fr;
  gap:clamp(18px,3vw,38px);
  align-items:start;
  padding:clamp(24px,3.2vw,36px) 0;
  border-bottom:1px solid var(--linia);
}
.mol-nr{
  font-family:var(--display);
  font-size:clamp(2.1rem,5vw,3.4rem);
  line-height:.9;
  color:var(--mgla);
  font-variant-numeric:tabular-nums;
  min-width:1.9em;
}
.mol-tresc h3{
  font-size:clamp(1.15rem,2.2vw,1.5rem);
  color:var(--biel);
  margin:0 0 .45rem;
}
.mol-gdzie{
  display:inline-block;
  font-family:var(--tekst);
  font-size:.74rem;
  letter-spacing:.13em;
  text-transform:uppercase;
  color:var(--srebro);
  border:1px solid var(--linia);
  border-radius:999px;
  padding:.34em .9em;
.9em;
  margin:0 0 1rem;
}
.mol-tresc > p:last-child{
  color:var(--srebro-jasne);
  font-size:.99rem;
  line-height:1.75;
  max-width:58ch;
  margin:0;
}

.mol-stopka{
  color:var(--srebro-jasne); max-width:58ch;
  line-height:1.75; margin-top:2.4rem; font-size:.99rem;
}
.mol-stopka b{color:var(--biel); font-weight:500}
.mol-cta{display:flex; flex-wrap:wrap; gap:14px; margin-top:1.8rem}

@media (max-width:640px){
  .mol{grid-template-columns:1fr; gap:10px}
  .mol-nr{font-size:1.7rem; min-width:0; color:var(--srebro-ciemne)}
}

/* Odnosnik z karty Molecular do rozpisanego protokolu nizej */
.produkt-opis a{
  color:var(--biel); text-decoration:none;
  border-bottom:1px solid var(--linia);
  padding-bottom:1px; white-space:nowrap;
}
.produkt-opis a:hover{border-bottom-color:var(--biel)}

/* ═══════════════════════════════════════════════════════════════
   VITAMINO COLOR SPECTRUM

   Tu NIE ma numeracji, bo nie ma kolejnosci. Sa dwie grupy:
   cztery produkty dla kazdego koloru i trzy szampony pigmentowe,
   z ktorych wybiera sie JEDEN. Uklad musi to pokazywac.
   ═══════════════════════════════════════════════════════════════ */
.spec-nadpis{
  font-family:var(--display);
  font-size:clamp(1.15rem,2.4vw,1.55rem);
  color:var(--biel);
  margin:3.2rem 0 1.4rem;
}
.spec-lista{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  gap:clamp(14px,2vw,22px);
}
.spec{
  border:1px solid var(--linia);
  padding:clamp(20px,2.4vw,26px);
  background:rgba(255,255,255,.015);
}
.spec h3{
  font-size:1.06rem; color:var(--biel);
  margin:0 0 .6rem; line-height:1.35;
}
.spec p{
  color:var(--srebro-jasne); font-size:.95rem;
  line-height:1.7; margin:0;
}

.spec-uwaga{
  color:var(--srebro); font-size:.95rem; line-height:1.7;
  max-width:58ch; margin:0 0 1.8rem;
}
.spec-uwaga b{color:var(--biel); font-weight:500}

/* Kropka pigmentu to jedyne miejsce na tej stronie, gdzie kolor
   niesie tresc — bez niej nie widac, ktory szampon jest ktory. */
.pigment-lista{display:grid; gap:0; border-top:1px solid var(--linia)}
.pigment{
  display:grid; grid-template-columns:auto 1fr;
  gap:clamp(16px,2.4vw,26px); align-items:start;
  padding:clamp(20px,2.6vw,28px) 0;
  border-bottom:1px solid var(--linia);
}
.pigment-kropka{
  display:block; width:34px; height:34px; border-radius:50%;
  box-shadow:0 0 0 1px rgba(255,255,255,.22), 0 0 26px -6px currentColor;
  margin-top:2px;
}
.pigment h3{font-size:1.06rem; color:var(--biel); margin:0 0 .35rem}
.pigment-dla{
  font-size:.74rem; letter-spacing:.13em; text-transform:uppercase;
  color:var(--srebro-ciemne); margin:0 0 .8rem;
}
.pigment p:last-child{
  color:var(--srebro-jasne); font-size:.95rem;
  line-height:1.7; margin:0; max-width:56ch;
}

/* ═══════════════════════════════════════════════════════════════
   KERATIN ALPHA SLEEK

   To usluga, nie zestaw: jedna rzecz dzieje sie w fotelu, trzy
   w domu. Uklad dwukolumnowy pokazuje ten podzial od razu.
   ═══════════════════════════════════════════════════════════════ */
#keratin{background:var(--wegiel); scroll-margin-top:96px}
#keratin h2{color:var(--biel)}
#keratin .nadpis{color:var(--srebro)}

.ker-uklad{
  display:grid;
  grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);
  gap:clamp(24px,4vw,56px);
  margin-top:3rem;
  align-items:start;
}
.ker-etykieta{
  font-size:.74rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--srebro-ciemne); margin:0 0 1.1rem;
  padding-bottom:.7rem; border-bottom:1px solid var(--linia);
}
.ker-salon{
  border:1px solid rgba(255,255,255,.2);
  padding:clamp(22px,2.8vw,32px);
  background:rgba(255,255,255,.03);
}
.ker-salon h3{
  font-family:var(--display);
  font-size:clamp(1.2rem,2.4vw,1.5rem);
  color:var(--biel); margin:0 0 .8rem;
}
.ker-salon p:last-child{
  color:var(--srebro-jasne); font-size:.96rem; line-height:1.75; margin:0;
}
.ker-dom .spec-lista{grid-template-columns:1fr}

.ker-bez{
  margin-top:3rem; padding:clamp(22px,2.8vw,30px);
  border-left:2px solid var(--biel);
  background:rgba(255,255,255,.03);
  max-width:72ch;
}
.ker-bez-tytul{
  font-family:var(--display);
  font-size:clamp(1.05rem,2.2vw,1.3rem);
  color:var(--biel); margin:0 0 .8rem;
}
.ker-bez p:last-child{
  color:var(--srebro-jasne); font-size:.96rem; line-height:1.75; margin:0;
}
.ker-bez b{color:var(--biel); font-weight:500}

@media (max-width:820px){
  .ker-uklad{grid-template-columns:1fr}
}
@media (max-width:640px){
  .pigment{grid-template-columns:auto 1fr; gap:14px}
  .pigment-kropka{width:26px; height:26px}
}

/* ═══════════════════════════════════════════════════════════════
   COLOR WOW — swiadomie LEKKIE potraktowanie

   Piotr nie chce katalogu tej marki, tylko informacji, ze jest
   dostepna. Wiec to jest pas, nie sekcja z kartami — i wizualnie
   ma sie roznic od Molecular / Spectrum / Keratin.
   ═══════════════════════════════════════════════════════════════ */
.wow{background:var(--atrament); border-top:1px solid var(--linia)}
.wow h2{color:var(--biel); margin:0}
.wow .nadpis{color:var(--srebro)}
.wow-uklad{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1.25fr);
  gap:clamp(24px,4vw,64px);
  align-items:start;
}
.wow-tresc p{
  color:var(--srebro-jasne); font-size:.99rem;
  line-height:1.75; margin:0 0 1.1rem; max-width:56ch;
}
.wow-tresc b{color:var(--biel); font-weight:500}
.wow-cta{margin:1.6rem 0 0 !important}

@media (max-width:820px){
  .wow-uklad{grid-template-columns:1fr; gap:20px}
}