/* =========================================================
   Zaplecione_Stw — arkusz stylów, motyw jasny
   Paleta: ciepła kość słoniowa + głęboki brąz + przygaszone złoto.
   Typografia: Prata (krój z logo) + Inter.
   Wersja ciemna leży w archiwum/style-ciemny.css.
   ========================================================= */

:root{
  --paper:     #FBF7F2;
  --paper-2:   #F4ECE2;
  --paper-3:   #EDE2D5;
  --ink:       #2B211A;
  --ink-2:     #4A3B31;
  --ink-soft:  #6E6157;
  --line:      #E4D8C9;
  --gold:      #A9803F;
  --gold-deep: #8A6630;
  --blush:     #E8D3C8;

  /* Odstępy są płynne: rosną razem z szerokością okna, zamiast przeskakiwać
     w progach media query. Dolna wartość obowiązuje na telefonie, górna od
     mniej więcej 1400 px wzwyż. Dzięki temu układ wygląda tak samo gęsto na
     13-calowym laptopie, co na dużym monitorze. */
  --space-1: .5rem;
  --space-2: clamp(.85rem, .78rem + .25vw, 1rem);
  --space-3: clamp(1.1rem, .93rem + .55vw, 1.5rem);
  --space-4: clamp(1.75rem, 1.4rem + 1.1vw, 2.5rem);
  --space-5: clamp(2.5rem, 1.85rem + 2.1vw, 4rem);
  --space-6: clamp(3.5rem, 2.4rem + 3.5vw, 6rem);

  --serif: "Prata", Georgia, "Times New Roman", serif;
  --sans:  "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  --ease: cubic-bezier(.16,1,.3,1);
  --maxw: 77.5rem;
  --nav-h: 4.5rem;
}

*,*::before,*::after{ box-sizing:border-box; }

/* Cała strona skaluje się z rozmiarem pisma korzenia: odstępy, nagłówki i
   szerokość kolumny są w rem, więc rosną razem z nim. Na telefonie zostaje
   domyślne 100%, na dużym monitorze dochodzi do 125% — wcześniej wszystko
   zostawało w rozmiarze laptopowym i na 27 calach wyglądało drobno.
   Wartości są w procentach, a nie w px, żeby nie nadpisać ustawienia
   wielkości czcionki z przeglądarki. */
/* Lenis sam prowadzi przewijanie, więc natywne wygładzanie musi mu ustąpić —
   inaczej obie animacje biją się o tę samą pozycję. */
html.lenis, html.lenis body{ height:auto; }
.lenis.lenis-smooth{ scroll-behavior:auto !important; }
/* Skala liczona z mniejszej z dwoch miar: szerokosci i wysokosci okna. Sama
   szerokosc nie wystarczala — na laptopie 1280x720 hero bylo wyzsze od ekranu,
   bo pismo roslo z szerokoscia, a wysokosci juz nikt nie pilnowal. Gorna granica
   podniesiona ze 125% na 175%, bo na monitorze 2560 tresc zajmowala mniej niz
   polowe wysokosci. Na telefonach i tabletach zostaje domyslne 100%. */
html{ scroll-behavior:smooth; font-size:clamp(93.75%, min(.95vw, 1.68vh) + 3.5px, 160%); }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--sans);
  font-size:1rem;
  line-height:1.65;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  overflow-x:clip;
}

img{ max-width:100%; display:block; }

main{ position:relative; }

/* Prata ma długie wydłużenia dolne, a polskie ogonki i kreski (ż, ó, ę, ą) jeszcze
   je wydłużają w obie strony. Przy 1.14 w wielolinijkowych nagłówkach „y" z jednej
   linijki dotykało kropki nad „ż" z następnej. */
h1,h2,h3{ font-family:var(--serif); font-weight:400; line-height:1.22; margin:0; letter-spacing:-.01em; }
h2{ font-size:clamp(2rem,4.6vw,3.4rem); }
h3{ font-size:clamp(1.15rem,1.8vw,1.45rem); }
/* Prata nie ma odmiany kursywnej — przeglądarka pochylałaby ją sztucznie i brzydko.
   Akcent w nagłówkach niesie więc sam kolor. */
h1 em, h2 em{ font-style:normal; color:var(--gold); }

a{ color:inherit; }

.eyebrow{
  font-size:.72rem; letter-spacing:.22em; text-transform:uppercase;
  color:var(--gold-deep); margin:0 0 var(--space-2); font-weight:600;
}

.lead{ color:var(--ink-soft); font-size:clamp(1rem,1.35vw,1.1rem); max-width:60ch; }

.skip{
  position:absolute; left:-9999px; top:0; z-index:200;
  background:var(--ink); color:var(--paper); padding:.75rem 1.25rem; font-weight:500;
}
.skip:focus{ left:0; }

:focus-visible{ outline:2px solid var(--gold-deep); outline-offset:3px; border-radius:2px; }

/* ---------- Przyciski ---------- */
/* Kształt i zachowanie wzięte z aardvarkbookclub.com: pigułka zamiast prostokąta,
   lekkie powiększenie całego przycisku po najechaniu i litery podskakujące jedna
   po drugiej. Kolory zostają nasze. Litery rozbija skrypt na osobne <span>-y —
   bez niego przycisk wygląda i działa dokładnie tak jak dotąd, tyle że napis
   stoi w miejscu. */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.55rem;
  min-height:3rem; padding:.85rem 1.7rem;
  font-family:var(--sans); font-size:.82rem; font-weight:600;
  letter-spacing:.1em; text-transform:uppercase; text-decoration:none;
  border:1px solid transparent; border-radius:999px; cursor:pointer;
  max-width:100%; text-align:center;
  transition:background .25s var(--ease), color .25s var(--ease),
             border-color .25s var(--ease), transform .2s var(--ease),
             box-shadow .25s var(--ease);
}
.btn:hover, .btn:focus-visible{ transform:scale(1.035); }
.btn:active{ transform:scale(.985); }
.btn svg{ width:1.05rem; height:1.05rem; fill:currentColor; }

/* Wszystkie litery w jednym opakowaniu — inaczej każda byłaby osobnym elementem
   flexa i rozdzielałby je odstęp spod gap. */
.btn__t{ display:inline-block; }
/* Jedna litera napisu. --i to jej numer w kolejności — z niego bierze się
   opóźnienie, dzięki czemu podskok przebiega falą od lewej do prawej. */
.btn__z{
  display:inline-block; white-space:pre;
  transition:transform .28s var(--ease);
  transition-delay:calc(var(--i, 0) * 18ms);
}
.btn:hover .btn__z, .btn:focus-visible .btn__z, .btn:active .btn__z{ transform:translateY(-.22em); }

/* Na ekranie dotykowym nie ma najechania, więc fala nigdy by się nie pokazała.
   Skrypt puszcza ją raz, kiedy przycisk wjedzie w widok. */
@keyframes falaLitery{
  0%, 100%{ transform:translateY(0); }
  45%{ transform:translateY(-.22em); }
}
.btn.is-fala .btn__z{
  animation:falaLitery .55s var(--ease) both;
  animation-delay:calc(var(--i, 0) * 22ms);
}

@media (prefers-reduced-motion: reduce){
  .btn:hover, .btn:focus-visible, .btn:active{ transform:none; }
  .btn__z{ transition:none; }
  .btn:hover .btn__z, .btn:focus-visible .btn__z, .btn:active .btn__z{ transform:none; }
  .btn.is-fala .btn__z{ animation:none; }
}

/* główny przycisk jest ciemny, nie złoty — złoto na jasnym tle nie wyrabiało
   kontrastu 4.5:1, a tak zostaje czytelnym akcentem */
.btn--gold{ background:var(--ink); color:var(--paper); }
.btn--gold:hover{ background:var(--ink-2);
  box-shadow:0 10px 24px rgba(43,33,26,.18); }

.btn--ghost{ border-color:rgba(43,33,26,.24); color:var(--ink); }
.btn--ghost:hover{ border-color:var(--gold); color:var(--gold-deep); }

/* Telefon w pasku. Numer wraca do ciemnego koloru na jasnym tle, tak jak było
   wcześniej — wyróżnienie bierze na siebie sama słuchawka w złotym kółku i kształt
   pigułki, a nie wypełnienie całego przycisku. */
.btn--sm{
  min-height:42px; padding:.4rem 1.1rem .4rem .4rem;
  gap:.65rem; font-size:.78rem; letter-spacing:.07em;
  background:none; border-color:rgba(43,33,26,.22); color:var(--ink);
}
/* Cyfry nie mają wydłużeń dolnych, więc w pudełku wiersza zostaje pod nimi puste
   miejsce po miejscu na ogonki — numer wygląda przez to na podniesiony względem
   kółka obok. Zmierzone: środek samych cyfr wypada 0,4 px nad środkiem pudełka.
   Zbijamy interlinię do wysokości pisma i dosuwamy numer o piksel w dół. */
/* Numer musi zostać w jednej linijce. Po rozbiciu napisu na osobne znaki
   przeglądarka może łamać wiersz między nimi i przy węższym oknie robiła
   z numeru dwa wiersze („663 691 67" / „4"). */
.btn--sm .btn__t{ line-height:1; transform:translateY(1px); white-space:nowrap; }
.btn--sm svg{
  width:1.85rem; height:1.85rem; padding:.5rem; box-sizing:border-box; flex:none;
  border-radius:50%; background:var(--gold); fill:var(--ink);
  transition:background .25s var(--ease), fill .25s var(--ease);
}
.btn--sm:hover{
  background:none; border-color:var(--gold); color:var(--gold-deep);
  box-shadow:0 8px 20px rgba(43,33,26,.10);
}
.btn--sm:hover svg{ background:var(--gold-deep); fill:var(--paper); }
/* Słuchawka dzwoni: kilka coraz słabszych wychyleń i wraca do pionu. Kółko pod
   spodem jest okrągłe, więc obrót widać wyłącznie na samej słuchawce. */
@keyframes dzwoni{
  0%, 100%{ transform:rotate(0deg); }
  12%{ transform:rotate(-16deg); }
  26%{ transform:rotate(13deg); }
  40%{ transform:rotate(-10deg); }
  54%{ transform:rotate(7deg); }
  68%{ transform:rotate(-4deg); }
  84%{ transform:rotate(2deg); }
}
.btn--sm:hover svg,
.btn--sm:focus-visible svg,
.btn--sm:active svg{ animation:dzwoni .75s var(--ease); }
@media (prefers-reduced-motion: reduce){
  .btn--sm:hover svg,
  .btn--sm:focus-visible svg,
  .btn--sm:active svg{ animation:none; }
}

/* ---------- Nawigacja ---------- */
/* Pasek jest nieprzezroczysty od pierwszej sekundy — pod spodem leci ciemne
   wideo, więc przezroczysta nawigacja byłaby przez chwilę nieczytelna. */
.nav{
  position:fixed; inset:0 0 auto 0; z-index:100;
  display:flex; align-items:center; gap:var(--space-3);
  min-height:var(--nav-h);
  padding:.85rem clamp(1rem,4vw,3rem);
  background:rgba(251,247,242,.94);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid transparent;
  transition:border-color .35s var(--ease), box-shadow .35s var(--ease),
             opacity .8s var(--ease) .35s, transform .9s var(--ease) .35s;
}
.nav.is-stuck{ border-bottom-color:var(--line); box-shadow:0 8px 28px rgba(43,33,26,.07); }
.nav__brand{ display:flex; align-items:center; gap:.65rem; text-decoration:none; }
/* Ikony spolecznosciowe usuniete (brak profili do demo) — odpychanie reszty
   w prawo przejela sama nazwa. Style zostaja na wypadek powrotu ikon. */
.nav__brand{ margin-right:auto; }
.nav__spolecznosciowe{ display:flex; gap:.4rem; }
/* Sprite z napisem — jeden wektor używany w pasku, hero i stopce przez <use>.
   Kolor bierze się z `currentColor`, więc ten sam plik działa na jasnym i ciemnym tle. */
.sprite{ position:absolute; width:0; height:0; overflow:hidden; }

/* Logo = bitmapa warkocza (z prawdziwą alfą) + napis rysowany wektorowo na wierzchu.
   Oba używają tego samego układu współrzędnych 1500×1500 z pliku źródłowego,
   więc nakładają się co do piksela. */
.logo{ position:relative; display:inline-block; line-height:0; }
.logo__warkocz{ width:100%; height:auto; display:block; }
.logo__napis{
  position:absolute; inset:0; width:100%; height:100%;
  fill:currentColor;
}

/* W pasku ta sama nazwa i ten sam krój co w hero. */
/* Nazwa w pasku to tekst krojem strony — dzięki temu nie odstaje od linków
   i nagłówków obok. Wyrównanie optyczne robi się samo, bo to zwykły wiersz
   tekstu, a nie ramka SVG wyśrodkowana razem z ogonkiem litery „p”. */
.nav__nazwa{
  font-family:var(--serif); font-size:1.35rem; line-height:1;
  color:var(--ink); letter-spacing:-.01em; white-space:nowrap;
  transition:color .2s var(--ease);
}
.nav__brand:hover .nav__nazwa{ color:var(--gold-deep); }
.nav__links{ display:flex; gap:1.75rem; }
.nav__links a{
  white-space:nowrap;
  font-size:.8rem; letter-spacing:.09em; text-transform:uppercase; font-weight:500;
  text-decoration:none; color:var(--ink-soft); padding:.4rem 0;
  transition:color .2s var(--ease);
}
.nav__links a:hover{ color:var(--gold-deep); }
.nav__burger{
  display:none; width:44px; height:44px; background:none; border:0; cursor:pointer;
  flex-direction:column; justify-content:center; gap:6px; padding:0;
}
.nav__burger span{ display:block; height:1px; width:22px; margin:0 auto; background:var(--ink);
  transition:transform .3s var(--ease), opacity .3s var(--ease); }
.nav__burger[aria-expanded="true"] span:first-child{ transform:translateY(3.5px) rotate(45deg); }
.nav__burger[aria-expanded="true"] span:last-child{ transform:translateY(-3.5px) rotate(-45deg); }

/* ---------- Hero — metamorfoza przed / po ---------- */
/* Poprzednie hero (warkocz przewijany klatkami na canvasie) leży w archiwum/
   pod nazwą *-hero-warkocz.*, razem z klatkami w media/warkocz-klatki. */
/* Wideo leży pod całą zawartością hero, przykryte kremową powłoką. Bez niej
   ciemny tekst na jasnych oknach i podłodze traciłby kontrast. */
.hero__tlo{
  position:absolute; inset:0; z-index:0; overflow:hidden;
  background:var(--paper);
}
.hero__wideo{
  width:100%; height:100%; object-fit:cover; display:block;
}
/* Krycie powłoki dobrane pomiarem, nie na oko. Wideo ma i jasne okno, i ciemne
   zakamarki, więc po zmieszaniu z papierem powstają półtony o jasności zbliżonej
   do złotych nadtytułów — i to one, a nie najjaśniejszy punkt, wyznaczają
   najgorszy kontrast. Przy 0.78 z lewej i 0.86 z prawej wszystkie napisy hero
   trzymają się powyżej 4,5:1, a wideo dalej widać. */
.hero__tlo::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(to right,
    rgba(251,247,242,.78) 0%,
    rgba(251,247,242,.86) 100%);
}
/* Nad wideo złoto i szarość z reszty strony nie wyrabiają kontrastu, więc tylko
   w hero napisy schodzą o ton niżej: nadtytuły na ciemniejsze złoto (4,70:1),
   akapit z --ink-soft na --ink-2 (6,98:1). */
.hero .eyebrow, .hero .metam__naglowek{ color:#6F5226; }
.hero .hero__miasto{ color:#6F5226; }
.hero .hero__lead{ color:var(--ink-2); }
/* Treść ma leżeć nad wideo. Celowo tylko .hero__inner — wskaźnik przewijania
   ma własne position:absolute i objęcie go tą regułą robiło z niego wiersz
   siatki, przez co hero rosło o jego wysokość i nie mieściło się w ekranie. */
.hero__inner{ position:relative; z-index:1; }
.hero__scroll{ z-index:2; }

.hero{
  position:relative;
  min-height:100svh;
  /* odstepy nad i pod trescia nie wieksze niz kilka procent wysokosci ekranu —
     na niskim laptopie to one wypychaly hero poza ekran */
  padding:calc(var(--nav-h) + min(var(--space-5), 4svh)) clamp(1rem,4vw,3rem) min(var(--space-6), 6svh);
  background:var(--paper);
  display:grid; align-items:center;
}
.hero__inner{
  width:100%; max-width:var(--maxw); margin-inline:auto;
  /* Obie kolumny na własnej szerokości i rozepchnięte do krawędzi: zdjęcie trzyma
     się lewej, nazwa prawej. Przy „auto 1fr" tekst zajmował całą resztę wiersza
     i mimo wyrównania do lewej zostawiał po prawej pół ekranu pustki. */
  display:grid; grid-template-columns:auto auto; justify-content:space-between;
  gap:clamp(2rem,5vw,5rem);
  align-items:center;
}
/* Napis „Zaplecione" jest węższy niż akapit pod nim, więc przy wyrównaniu do
   lewej kończył się 44 px przed prawą krawędzią bloku i wyglądał na przesunięty.
   Cała kolumna jest teraz wyśrodkowana — tak samo jak na telefonie. */
.hero__tresc{ min-width:0; max-width:52ch; text-align:center; }
.hero__miasto{ justify-content:center; }
.hero .hero__lead{ margin-inline:auto; }
.hero__cta{ justify-content:center; }

/* --- suwak metamorfozy --- */
/* Kadr prowadzi wysokość, a szerokość dolicza się z proporcji 3:4 — inaczej przy
   szerokim oknie karta wychodziła poniżej ekranu. */
.metam{ margin:0; width:auto; --uchwyt:2.6rem; }
.metam__naglowek{ margin:0 0 .7rem; }
.metam__kadr{
  position:relative; aspect-ratio:3 / 4; overflow:hidden;
  height:min(62svh, 31rem); width:auto;
  border-radius:3px; border:1px solid var(--line);
  box-shadow:0 26px 60px rgba(43,33,26,.20);
  background:var(--paper-2);
  touch-action:pan-y;   /* pion zostawiamy stronie, poziom bierze suwak */
}
.metam__kadr img{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; display:block; user-select:none; -webkit-user-drag:none;
}
/* Warstwa „przed" leży na wierzchu i jest przycinana od prawej. --ciecie ustawia
   skrypt z pozycji suwaka; bez skryptu zostaje 50% i widać oba zdjęcia. */
.metam__przed-warstwa{
  position:absolute; inset:0;
  clip-path:inset(0 calc(100% - var(--ciecie, 50%)) 0 0);
}
.metam__linia{
  position:absolute; top:0; bottom:0; left:var(--ciecie, 50%);
  width:2px; margin-left:-1px; background:var(--paper);
  box-shadow:0 0 0 1px rgba(43,33,26,.25);
  pointer-events:none;
}
/* Etykiety w rogach. Każda gaśnie, gdy jej zdjęcie schodzi z kadru: przy suwaku
   do końca w lewo widać samo „po", więc znika „Przed", a przy suwaku do końca
   w prawo odwrotnie. Krycie wpisuje skrypt wprost w styl elementu, a tutaj jest
   tylko przejście. Bez skryptu obie etykiety po prostu zostają widoczne. Dla
   czytnika ekranu są zbędne — to samo mówią opisy obu zdjęć. */
.metam__etykieta{
  position:absolute; top:.7rem; z-index:1;
  padding:.32rem .7rem; border-radius:2px;
  background:rgba(43,33,26,.72);
  color:#FBF7F2; font-size:max(.62rem, 11px); font-weight:600;
  letter-spacing:.2em; text-transform:uppercase; line-height:1;
  pointer-events:none;
  transition:opacity .25s var(--ease);
}
.metam__etykieta--przed{ left:.7rem; }
.metam__etykieta--po{ right:.7rem; }
@media (prefers-reduced-motion: reduce){
  .metam__etykieta{ transition:none; }
}
/* Uchwyt rysujemy na kciuku natywnego suwaka — obsługa myszy, dotyku i klawiatury
   jest wtedy za darmo. Suwak wystaje poza kadr o pół szerokości uchwytu z każdej
   strony: bez tego środek kciuka nie dojeżdża do krawędzi zdjęcia i na końcach
   skali zostawał pasek drugiej wersji, którego nie dało się schować. Kadr ma
   overflow:hidden, więc na krańcach widać po prostu połowę kółka. */
.metam__suwak{
  position:absolute; top:0; bottom:0;
  left:calc(var(--uchwyt) / -2); width:calc(100% + var(--uchwyt));
  margin:0; padding:0; background:none; border:0;
  -webkit-appearance:none; appearance:none; cursor:ew-resize;
}
.metam__suwak:focus{ outline:none; }
.metam__suwak:focus-visible{ outline:2px solid var(--gold); outline-offset:3px; }
.metam__suwak::-webkit-slider-thumb{
  -webkit-appearance:none; appearance:none;
  width:var(--uchwyt); height:var(--uchwyt); border-radius:50%; cursor:ew-resize;
  background:var(--paper); border:1px solid var(--line);
  box-shadow:0 6px 18px rgba(43,33,26,.28);
}
.metam__suwak::-moz-range-thumb{
  width:var(--uchwyt); height:var(--uchwyt); border-radius:50%; cursor:ew-resize;
  background:var(--paper); border:1px solid var(--line);
  box-shadow:0 6px 18px rgba(43,33,26,.28);
}
.metam__suwak::-moz-range-track{ background:none; border:0; }

/* ---------- Poznajmy się ---------- */
.poznajmy{ max-width:var(--maxw); margin-inline:auto; }
.poznajmy__inner{
  display:grid; grid-template-columns:auto 1fr; gap:var(--space-4); align-items:center;
}
/* Portret klientki zostal usuniety, wiec sekcja ma jedna kolumne: tekst sciagniety
   do czytelnej szerokosci i wysrodkowany jak reszta strony. */
.poznajmy__inner{ grid-template-columns:1fr; justify-items:center; }
.poznajmy__txt{ max-width:46rem; text-align:center; }

/* Plik ma 720×900, więc przy 24rem (około 455 px) nadal nie jest rozciągany.
   Wysokość liczy się z proporcji oryginału, zamiast być wpisana ręcznie. */
.poznajmy__portret{
  width:min(24rem, 40vw); height:auto; aspect-ratio:720 / 900;
  object-fit:cover; object-position:center 22%;
  border-radius:2px; border:1px solid var(--line);
  box-shadow:0 20px 44px rgba(43,33,26,.14);
}
.poznajmy__txt h2{ margin-top:.3rem; }
.poznajmy__txt .lead{ margin-top:var(--space-3); }

/* ---------- Logo w hero ---------- */
/* Nazwa krojem z logo (plik -2, szeryfowy). W tle hero leci już wielki warkocz,
   więc pierścień z logo dublował ten sam motyw — zostaje sam napis. */
/* Nazwa w hero jest teraz tym samym, co w pasku: zwykłym tekstem krojem strony.
   Wektor z Canvy zostaje już tylko w stopce. */
.hero__nazwa{
  display:block;
  font-family:var(--serif); font-weight:400;
  font-size:clamp(3rem, 6.4vw, 5rem); line-height:1;
  letter-spacing:-.02em; color:var(--ink);
  animation:logoWchodzi 1.1s var(--ease) .2s both;
}
/* Miasto pod nazwą — czytane razem z nią jako „Zaplecione Warszawa”.
   Kreska po lewej wiąże je z napisem, zamiast robić z tego osobny podpis. */
.hero__miasto{
  display:flex; align-items:center; gap:.7em;
  margin-top:.55rem;
  font-family:var(--sans); font-size:.78rem; font-weight:600;
  letter-spacing:.3em; text-transform:uppercase;
  color:var(--gold-deep); line-height:1;
  animation:logoWchodzi 1.1s var(--ease) .35s both;
}
.hero__miasto::before{
  content:""; width:2.2em; height:1px; flex:none; background:var(--gold);
}
@media (prefers-reduced-motion: reduce){ .hero__nazwa{ animation:none; } }

/* nazwa + miasto tworzą jeden blok nagłówka */
.hero__logo{
  margin:0 0 var(--space-3);
}
@keyframes logoWchodzi{
  from{ opacity:0; transform:scale(.94); }
  to  { opacity:1; transform:none; }
}
.hero__lead{ color:var(--ink-soft); max-width:44ch; margin:0 0 var(--space-4);
  font-size:clamp(1rem,1.35vw,1.1rem); }
.hero__cta{ display:flex; gap:var(--space-2); flex-wrap:wrap; }

.hero__scroll{
  position:absolute; bottom:2rem; left:50%; transform:translateX(-50%); z-index:2;
  width:26px; height:44px; border:1px solid rgba(43,33,26,.28); border-radius:14px;
  display:grid; place-items:start center; padding-top:8px;
}
.hero__scroll span{ width:2px; height:7px; background:var(--gold); border-radius:2px;
  animation:mysz 1.8s ease-in-out infinite; }
@keyframes mysz{ 0%,100%{ transform:translateY(0); opacity:1 } 60%{ transform:translateY(12px); opacity:0 } }

@media (max-width:900px){
  /* Zdjęcie idzie nad tekst — obok siebie zostawałaby na oba za wąska kolumna. */
  /* Jedna kolumna, a w niej najpierw nazwa salonu, potem metamorfoza — na
     telefonie to nazwa ma witać, a nie zdjęcie. Kadr stoi pośrodku, bo przy
     wyrównaniu do lewej zostawał po prawej pusty pas na pół ekranu. */
  .hero__inner{ grid-template-columns:1fr; gap:var(--space-4); justify-items:center; justify-content:center; }
  .hero__tresc{ width:100%; order:1; }
  .metam{ order:2; }
  .metam__naglowek{ text-align:center; }
  .metam{ --uchwyt:2rem; }
  .metam__kadr{ height:min(40svh, 16rem); }
}
/* Niskie telefony (np. 360x640): kadr metamorfozy nizszy, zeby cale hero z nazwa
   i przyciskami miescilo sie na jednym ekranie. */
@media (max-width:900px) and (max-height:700px){
  .metam__kadr{ height:31svh; }
  .hero__miasto{ font-size:max(.62rem, 11px); letter-spacing:.22em; margin-top:.4rem; }
  .hero__lead{ font-size:.9rem; line-height:1.55; margin-bottom:var(--space-3); }
  .hero__cta{ gap:.5rem; }
  .hero__cta .btn{ min-height:44px; padding:.6rem .85rem; font-size:.66rem; letter-spacing:.06em; }
  .hero__scroll{ display:none; }
}

@media (prefers-reduced-motion: reduce){
  .hero__scroll span{ animation:none; }
}



.kursor{
  position:fixed; top:0; left:0;
  width:26px; height:26px;
  pointer-events:none; z-index:9999;
  color:var(--gold);
  opacity:0; transition:opacity .25s;
  will-change:transform;
  filter:drop-shadow(0 1px 3px rgba(43,33,26,.45));
}
.kursor.jest-widoczny{ opacity:1; }
.kursor svg{ width:100%; height:100%; overflow:visible; display:block; }

.kursor__obrot{
  width:100%; height:100%;
  transform:rotate(-28deg);
  transition:transform .3s cubic-bezier(.22,1,.36,1);
}
/* nad czymś klikalnym nożyczki rosną — zastępują łapkę, której już nie widać */
.kursor.nad-klikalnym .kursor__obrot{ transform:rotate(-28deg) scale(1.22); }

.kursor__ramie{
  transform-origin:50px 50px;
  transition:transform .3s cubic-bezier(.3,1.4,.4,1);
}
.kursor__ramie--a{ transform:rotate(20deg); }
.kursor__ramie--b{ transform:rotate(-20deg); }
/* kliknięcie = ostrza się schodzą */
.kursor.ciach .kursor__ramie--a{ transform:rotate(2deg);  transition-duration:.1s; }
.kursor.ciach .kursor__ramie--b{ transform:rotate(-2deg); transition-duration:.1s; }

/* dotyk: żadnych nożyczek */
@media (hover: none), (pointer: coarse){
  .kursor{ display:none; }
}

/* ---------- Sekcje ---------- */
section{ padding:var(--space-6) clamp(1rem,4vw,3rem); }
/* Pasek nawigacji jest przyklejony do góry, więc skok z menu zatrzymywał stronę
   tak, że nadtytuł sekcji chował się pod nim. */
section[id]{ scroll-margin-top:calc(var(--nav-h) + 1rem); }
.sect__head{ max-width:var(--maxw); margin:0 auto var(--space-5); }

/* ---------- Usługi / mozaika ---------- */
.uslugi{ max-width:var(--maxw); margin-inline:auto; }
/* Kafelki z tekstem na zdjęciu wymagały ciemnej powłoki tak gęstej, że ze zdjęcia
   zostawał cień — a to właśnie zdjęcia mają tu coś pokazać. Do tego szeroki i wysoki
   kafel rozbijały siatkę na nierówne pola i całość robiła się niespokojna.
   Teraz karta jest podzielona: zdjęcie u góry, w pełnych barwach i bez niczego na
   wierzchu, opis pod nim na papierowym tle. Wszystkie karty tej samej wielkości. */
.mozaika{
  display:grid; grid-template-columns:repeat(3,1fr); gap:var(--space-3);
}
.tile{
  position:relative; overflow:hidden; border-radius:4px;
  display:grid; grid-template-rows:auto 1fr;
  background:var(--paper);
  border:1px solid var(--line);
  box-shadow:0 12px 30px rgba(43,33,26,.07);
  transition:transform .4s var(--ease), box-shadow .4s var(--ease);
}
.tile:hover{ transform:translateY(-4px); box-shadow:0 18px 40px rgba(43,33,26,.12); }
.tile::before{
  content:""; grid-row:1; aspect-ratio:4 / 3;
  background-image:var(--bg); background-size:cover; background-position:center;
  border-bottom:1px solid var(--line);
}
.tile__body{ grid-row:2; padding:var(--space-3); }
.tile__body h3{ font-size:clamp(1.1rem,1.6vw,1.35rem); }
.tile__body p{ color:var(--ink-soft); font-size:.92rem; margin:.6rem 0 0; }
.tile__body strong{ color:var(--ink); font-weight:600; }
.tile__tag{
  display:inline-block; margin-top:var(--space-2);
  font-size:max(.68rem, 11px); letter-spacing:.16em; text-transform:uppercase;
  color:var(--gold-deep); border:1px solid var(--line); padding:.3rem .7rem; border-radius:2px;
}

.szkolenia{
  margin-top:var(--space-4); padding:var(--space-4);
  background:var(--paper-2); border:1px solid var(--line); border-radius:4px;
  display:flex; align-items:center; justify-content:space-between;
  gap:var(--space-4); flex-wrap:wrap;
}
.szkolenia h3{ margin:0 0 .5rem; }
.szkolenia p{ margin:0; color:var(--ink-soft); max-width:58ch; font-size:.95rem; }

/* ---------- Galeria ---------- */
.galeria{ max-width:var(--maxw); margin-inline:auto; }
.galeria .lead{ margin-top:var(--space-3); }
/* Wszystkie zdjęcia są dociosane do 3:4, więc siatka może być równa. Wcześniej
   każde miało własne proporcje i kartki kończyły się na różnych wysokościach —
   stąd wrażenie bałaganu. */
.galeria__grid{
  display:grid; grid-template-columns:repeat(4,1fr); gap:var(--space-3);
}
/* na jasnej stronie podpisy są widoczne od razu, nie po najechaniu */
.galeria figure{
  margin:0; overflow:hidden; border-radius:4px;
  border:1px solid var(--line); background:var(--paper);
  display:flex; flex-direction:column;
  box-shadow:0 10px 26px rgba(43,33,26,.06);
  transition:transform .4s var(--ease), box-shadow .4s var(--ease);
}
.galeria figure:hover{ transform:translateY(-4px); box-shadow:0 16px 34px rgba(43,33,26,.11); }
/* Pliki są już w proporcji kartki, więc cover niczego nie obcina — stoi tu jako
   zabezpieczenie, gdyby kiedyś doszło zdjęcie o innych wymiarach. */
.galeria img{
  width:100%; height:auto; aspect-ratio:3 / 4; object-fit:cover; display:block;
}
.galeria figcaption{
  padding:.9rem 1rem 1.15rem;
  font-size:.85rem; line-height:1.55; color:var(--ink-soft);
}
.galeria__more{ margin:var(--space-4) auto 0; display:flex; width:max-content; max-width:100%; }

/* ---------- Skup ---------- */
.skup{ background:var(--paper-2); border-block:1px solid var(--line); }
.skup__inner{
  max-width:var(--maxw); margin-inline:auto;
  display:grid; grid-template-columns:1.15fr .85fr; gap:var(--space-5); align-items:center;
}
.skup .lead{ margin-top:var(--space-3); }
.skup__list{ list-style:none; margin:var(--space-4) 0; padding:0; }
.skup__list li{
  padding:.7rem 0 .7rem 1.75rem; border-bottom:1px solid var(--line);
  position:relative; color:var(--ink-soft); font-size:.95rem;
}
.skup__list li::before{
  content:""; position:absolute; left:0; top:1.25rem;
  width:8px; height:8px; border:1px solid var(--gold); transform:rotate(45deg);
}
.skup__list strong{ color:var(--ink); font-weight:600; }
.skup__img img{
  width:100%; height:auto; border-radius:4px; aspect-ratio:3/4; object-fit:cover;
  border:1px solid var(--line); box-shadow:0 14px 32px rgba(43,33,26,.1);
}

/* ---------- Cennik ---------- */
.cennik{ max-width:var(--maxw); margin-inline:auto; }
.cennik .lead{ margin-top:var(--space-3); }
/* Cennik to pięć tabel — rozwinięte naraz ciągnęły się przez kilka ekranów.
   Grupy są więc zwijane, a atrybut name na <details> pilnuje, żeby otwarta była
   tylko jedna. Bez linijki JS-a; starsze przeglądarki po prostu pozwolą otworzyć
   kilka naraz, czyli zachowają się jak poprzednia wersja strony. */
.cennik__grupa{
  border-bottom:1px solid var(--line);
}
.cennik__grupa:first-of-type{ border-top:1px solid var(--line); }
.cennik__grupa > summary{
  display:flex; align-items:baseline; gap:var(--space-3);
  padding:var(--space-3) 0; cursor:pointer;
  list-style:none; /* Firefox */
  transition:color .2s ease;
}
.cennik__grupa > summary::-webkit-details-marker{ display:none; }
.cennik__grupa > summary:hover .cennik__tytul{ color:var(--gold-deep); }
.cennik__grupa > summary:focus-visible{
  outline:2px solid var(--gold); outline-offset:4px; border-radius:2px;
}
.cennik__tytul{
  font-family:var(--serif); font-size:clamp(1.15rem,2vw,1.45rem);
  color:var(--ink); transition:color .2s ease;
}
.cennik__hint{
  flex:1; font-size:.85rem; color:var(--ink-soft);
}
/* plus zmieniający się w minus po otwarciu */
.cennik__znak{
  position:relative; flex:none; width:.9rem; height:.9rem; align-self:center;
}
.cennik__znak::before, .cennik__znak::after{
  content:""; position:absolute; inset:50% 0 auto; height:1.5px;
  background:var(--gold-deep); transition:transform .25s ease;
}
.cennik__znak::after{ transform:rotate(90deg); }
.cennik__grupa[open] .cennik__znak::after{ transform:rotate(0deg); }
.cennik__grupa[open] .cennik__tytul{ color:var(--gold-deep); }
.cennik__grupa > summary + *{ margin-top:0; }
.cennik__grupa[open] > summary ~ *:last-child{ margin-bottom:var(--space-4); }
.cennik__para{ display:grid; grid-template-columns:1fr 1fr; gap:var(--space-3); align-items:start; }
.cennik__para--gora{ margin-top:var(--space-3); }

/* szerokie tabele nie mogą rozpychać strony — przewijają się we własnym pudełku */
.tabela-scroll{ overflow-x:auto; -webkit-overflow-scrolling:touch; }
.tabela{
  width:100%; border-collapse:collapse; font-size:.93rem;
  background:var(--paper); border:1px solid var(--line); border-radius:4px;
}
.tabela thead th{
  text-align:right; font-weight:600; font-size:.7rem;
  letter-spacing:.12em; text-transform:uppercase; color:var(--gold-deep);
  padding:.85rem 1rem; border-bottom:1px solid var(--line);
  background:var(--paper-2); white-space:nowrap;
}
.tabela thead th:first-child{ text-align:left; }
.tabela tbody th{
  text-align:left; font-weight:400; color:var(--ink); padding:.7rem 1rem;
  border-bottom:1px solid var(--line);
}
.tabela tbody td{
  text-align:right; padding:.7rem 1rem; color:var(--gold-deep); font-weight:500;
  border-bottom:1px solid var(--line); white-space:nowrap;
}
.tabela tbody tr:last-child th, .tabela tbody tr:last-child td{ border-bottom:0; }
.tabela tbody tr:hover th, .tabela tbody tr:hover td{ background:var(--paper-2); }

.cennik__dodatki{ list-style:none; margin:var(--space-3) 0 0; padding:0; }
.cennik__dodatki li{
  display:flex; justify-content:space-between; align-items:baseline; gap:var(--space-2);
  padding:.6rem 0; border-bottom:1px solid var(--line); font-size:.93rem;
}
.cennik__dodatki span{ color:var(--ink-soft); }
.cennik__dodatki strong{ color:var(--gold-deep); font-weight:500; white-space:nowrap; }

.cennik__uwaga{
  margin:var(--space-3) 0 0; font-size:.9rem; color:var(--ink-soft);
  max-width:75ch; padding-left:var(--space-3);
  border-left:2px solid var(--line);
}
.cennik__uwaga strong{ color:var(--ink); font-weight:600; }
.cennik__data{
  margin:var(--space-4) 0 0; font-size:.8rem; color:var(--ink-soft);
  letter-spacing:.04em;
}

.raty{
  margin-top:var(--space-5); padding:var(--space-4);
  border:1px solid var(--line); border-radius:4px; background:var(--paper-2);
  display:flex; gap:var(--space-3); align-items:flex-start;
}
.raty__ico svg{ width:32px; height:32px; fill:none; stroke:var(--gold-deep); stroke-width:1.2;
  stroke-linecap:round; stroke-linejoin:round; }
.raty h3{ margin:0 0 .5rem; }
.raty p{ margin:0; color:var(--ink-soft); font-size:.95rem; max-width:70ch; }
.raty strong{ color:var(--ink); font-weight:600; }

/* ---------- Przed wizytą ---------- */
.wizyta{ background:var(--paper-2); border-block:1px solid var(--line); }
.wizyta__inner{ max-width:var(--maxw); margin-inline:auto; }
.wizyta__txt{ max-width:45rem; }
.wizyta__txt .lead{ margin-top:var(--space-3); }
.wizyta__lista{
  list-style:none; margin:var(--space-5) 0 0; padding:0;
  display:grid; grid-template-columns:repeat(auto-fit,minmax(15rem,1fr)); gap:var(--space-3);
}
.wizyta__lista li{
  background:var(--paper); border:1px solid var(--line); border-radius:4px;
  padding:var(--space-3);
  box-shadow:0 10px 26px rgba(43,33,26,.05);
}
.wizyta__num{
  display:block; font-family:var(--serif); font-size:1.6rem;
  color:var(--gold); line-height:1; margin-bottom:.6rem;
}
.wizyta__lista p{ margin:0; color:var(--ink-soft); font-size:1rem; }
.wizyta__lista strong{ color:var(--ink); font-weight:600; }

.wizyta__koltuny{
  margin-top:var(--space-4); padding:var(--space-4);
  background:var(--paper); border:1px solid var(--line); border-radius:4px;
  border-left:3px solid var(--gold);
}
.wizyta__koltuny h3{ margin:0 0 .7rem; }
.wizyta__koltuny p{ margin:0; color:var(--ink-soft); font-size:.97rem; max-width:78ch; }
.wizyta__cena{
  margin-top:var(--space-3) !important; padding-top:var(--space-3);
  border-top:1px solid var(--line); color:var(--ink) !important;
}
.wizyta__cena strong{ color:var(--gold-deep); }

/* ---------- Kontakt ---------- */
.kontakt{ background:var(--paper-2); border-top:1px solid var(--line); }
.kontakt__inner{
  max-width:var(--maxw); margin-inline:auto;
  display:grid; grid-template-columns:1fr 1fr; gap:var(--space-5);
}
.kontakt__block{ margin-top:var(--space-4); }
.kontakt__block h3{
  font-family:var(--sans); font-size:.72rem; letter-spacing:.2em; text-transform:uppercase;
  color:var(--gold-deep); margin-bottom:.5rem; font-weight:600;
}
.kontakt__block p{ margin:0; font-size:1.05rem; }
.kontakt__block a{ text-decoration:none; border-bottom:1px solid rgba(169,128,63,.5);
  transition:border-color .2s var(--ease), color .2s var(--ease); }
.kontakt__block a:hover{ color:var(--gold-deep); border-bottom-color:var(--gold-deep); }
.kontakt__note{ color:var(--ink-soft); font-size:.9rem !important; margin-top:.5rem !important; }
.godziny{ width:100%; border-collapse:collapse; }
.godziny th, .godziny td{ padding:.55rem 0; border-bottom:1px solid var(--line);
  font-size:.95rem; font-weight:400; }
.godziny th{ text-align:left; color:var(--ink-soft); }
.godziny td{ text-align:right; color:var(--gold-deep); font-weight:500; }
.kontakt__social{ display:flex; gap:var(--space-2); flex-wrap:wrap; align-items:center;
  margin-top:var(--space-4); }

/* Ikony społecznościowe zamiast napisów. Nazwa serwisu zostaje w kodzie dla
   czytników ekranu — sam obrazek nie mówi, dokąd prowadzi odnośnik. */
.tylko-czytnik{
  position:absolute; width:1px; height:1px; overflow:hidden;
  clip-path:inset(50%); white-space:nowrap;
}
/* Ikony zachowują się tak samo jak przyciski: lekkie powiększenie całości
   i jeden podskok znaku. Wcześniej działy się tu trzy rzeczy naraz — ciemne
   wypełnienie wjeżdżało od dołu, znak rósł o 12%, a całość unosiła się o 3 px
   z cieniem — i było tego za dużo jak na kółko wielkości paznokcia. */
.ikona{
  position:relative;
  display:grid; place-items:center;
  width:3rem; height:3rem; flex:0 0 3rem;
  border:1px solid rgba(43,33,26,.24); border-radius:50%;
  color:var(--ink); text-decoration:none;
  transition:color .25s var(--ease), border-color .25s var(--ease),
             transform .2s var(--ease);
}
.ikona svg{
  width:1.2rem; height:1.2rem; fill:currentColor;
}
.ikona:hover, .ikona:focus-visible{
  color:var(--gold-deep); border-color:var(--gold);
  transform:scale(1.08);
}
.ikona:active{ transform:scale(.97); }
/* ten sam podskok co litery w przyciskach */
@keyframes podskokZnaku{
  0%, 100%{ transform:translateY(0); }
  45%{ transform:translateY(-.22em); }
}
.ikona:hover svg, .ikona:focus-visible svg{ animation:podskokZnaku .45s var(--ease); }

/* wariant do paska nawigacji — mniejszy, żeby nie konkurował z nazwą */
.ikona--mala{ width:2.25rem; height:2.25rem; flex:0 0 2.25rem; }
.ikona--mala svg{ width:.95rem; height:.95rem; }
.ikona--mala:hover, .ikona--mala:focus-visible{ transform:scale(1.1); }

@media (prefers-reduced-motion: reduce){
  .ikona, .ikona svg{ transition:none; }
  .ikona:hover, .ikona:focus-visible, .ikona:active{ transform:none; }
  .ikona:hover svg, .ikona:focus-visible svg{ animation:none; }
}
.kontakt__map{
  border:1px solid var(--line); border-radius:4px; overflow:hidden; min-height:420px;
  box-shadow:0 14px 32px rgba(43,33,26,.08);
}
/* mapa w naturalnych barwach — inwersja była potrzebna tylko na ciemnym tle */
.kontakt__map iframe{ width:100%; height:100%; min-height:420px; border:0;
  filter:grayscale(.35) contrast(.95); }

/* ---------- Stopka ---------- */
/* ciemna stopka domyka jasną stronę i wraca do klimatu hero */
.stopka{ background:var(--ink); color:#E9E0D6;
  padding:var(--space-5) clamp(1rem,4vw,3rem) var(--space-4); }
.stopka__inner{ max-width:var(--maxw); margin-inline:auto; }
/* trzy kolumny: dane po lewej, logo na środku, menu po prawej */
.stopka__kolumny{
  display:grid; grid-template-columns:1fr auto 1fr;
  gap:var(--space-4); align-items:center;
}
.stopka__kolumny nav{ justify-self:end; }
.stopka__logo{ width:clamp(240px, 26vw, 380px); color:#F0E5D8; }
.stopka__wlasciciel{ margin:0 0 .35rem; color:rgba(240,217,168,.9); font-size:.85rem;
  letter-spacing:.12em; text-transform:uppercase; }
.stopka__adr{ margin:0; color:rgba(233,224,214,.75); font-size:.9rem; }
.stopka__adr a{ text-decoration:none; border-bottom:1px solid rgba(240,217,168,.45); }
.stopka__adr a:hover{ color:#F0D9A8; }
.stopka nav{ display:flex; flex-direction:column; gap:.6rem; text-align:right; }
.stopka nav a{ font-size:.85rem; color:rgba(233,224,214,.75); text-decoration:none;
  transition:color .2s var(--ease); }
.stopka nav a:hover{ color:#F0D9A8; }
/* dane rejestrowe — drobnym drukiem pod adresem */
.stopka__firma{
  margin:.5rem 0 0; font-size:.76rem; letter-spacing:.02em;
  color:rgba(240,229,216,.55);
}
.stopka__copy{ grid-column:1/-1; margin:var(--space-3) 0 0; padding-top:var(--space-3);
  border-top:1px solid rgba(233,224,214,.16); font-size:.78rem; color:rgba(233,224,214,.5); }

/* ---------- Animacje wejścia ---------- */
.reveal{ opacity:0; transform:translateY(22px); }
.reveal.is-in{
  opacity:1; transform:none;
  transition:opacity .7s var(--ease), transform .7s var(--ease);
  transition-delay:var(--d,0ms);
}

@media (prefers-reduced-motion: reduce){
  .reveal{ opacity:1 !important; transform:none !important; transition:none !important; }
  .hero__scroll span{ animation:none; }
  .tile::before, .galeria figure{ transition:none; }
}

/* ---------- Responsywność ---------- */
@media (max-width:1024px){
  .mozaika{ grid-template-columns:repeat(2,1fr); }
  .galeria__grid{ grid-template-columns:repeat(2,1fr); }
  .skup__inner, .kontakt__inner{ grid-template-columns:1fr; }
  /* portret i tekst jeden pod drugim — obok siebie zostaje na oba za wąsko */
  .poznajmy__inner{ grid-template-columns:1fr; gap:var(--space-3); }
  /* Portret bierze całą szerokość kolumny — przy 62vw wisiał przy lewej krawędzi
     z pustym pasem obok. */
  .poznajmy__portret{ width:100%; max-width:24rem; }
  .cennik__para{ grid-template-columns:1fr; }
  /* na wąskim ekranie sam tytuł grupy — podpowiedź zawijałaby się w drugą linijkę */
  .cennik__hint{ display:none; }
  .cennik__grupa > summary{ justify-content:space-between; }
  .skup__img{ max-width:26rem; }
}

/* Ile miejsca potrzebuje rozwinięty pasek, zmierzone przy 1280 px: nazwa 131 +
   ikony 90 + linki 752 + telefon 173, do tego trzy odstępy po 24 i marginesy 102,
   czyli 1321 px. Poniżej tego linki łamały się na dwie linijki. Dlatego dwa progi:
   najpierw znikają ikony społecznościowe (są też w sekcji kontaktu), a to schodzi
   do 1206 px; potem cały spis linków chowa się pod przycisk. */
@media (max-width:1340px){
  .nav__spolecznosciowe{ display:none; }
  /* Ikony mialy margin-right:auto i odpychaly telefon z menu w prawo. Po ich
     schowaniu robi to nazwa — wczesniej tylko do 760 px, wiec na tabletach
     i malych laptopach telefon stal tuz przy nazwie. */
  .nav__brand{ margin-right:auto; }
}

@media (max-width:1210px){
  .nav__links{
    position:fixed; inset:var(--nav-h) 0 auto 0;
    flex-direction:column; gap:0; text-align:center;
    background:rgba(251,247,242,.98);
    backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
    border-bottom:1px solid var(--line);
    max-height:0; overflow:hidden; transition:max-height .4s var(--ease);
  }
  .nav__links.is-open{ max-height:340px; }
  .nav__links a{ padding:1rem; border-bottom:1px solid var(--line); }
  .nav__burger{ display:flex; }
}

@media (max-width:760px){
  /* Tabele cennika mają do czterech kolumn — na telefonie nie mieściły się
     w ekranie i widać było tylko pierwszą cenę, a reszta chowała się w poziomym
     przewijaniu, o którym nikt nie wie. Rozkładamy każdy wiersz na kartkę:
     nazwa usługi u góry, pod nią ceny podpisane nazwą kolumny (z data-kol). */
  .tabela, .tabela tbody, .tabela tr, .tabela th, .tabela td{ display:block; }
  .tabela{ border:0; background:none; }
  .tabela thead{ display:none; }
  .tabela tbody tr{
    background:var(--paper); border:1px solid var(--line); border-radius:4px;
    padding:.9rem 1rem; margin-bottom:.6rem;
  }
  .tabela tbody tr:last-child{ margin-bottom:0; }
  .tabela tbody th{
    padding:0 0 .5rem; border-bottom:1px solid var(--line); margin-bottom:.4rem;
    font-size:1rem;
  }
  .tabela tbody td{
    display:flex; justify-content:space-between; align-items:baseline; gap:1rem;
    padding:.3rem 0; border:0; text-align:right;
  }
  .tabela tbody td::before{
    content:attr(data-kol);
    font-size:.68rem; letter-spacing:.12em; text-transform:uppercase;
    color:var(--ink-soft); font-weight:600; text-align:left;
  }
  /* w kartce nie ma czego przewijać w bok */
  .tabela-scroll{ overflow-x:visible; }

  /* Przycisk i ikony trzymają się razem: wcześniej Facebook zostawał sam
     w nowej linijce pod przyciskiem. */
  .kontakt__social{ flex-wrap:wrap; }
  .kontakt__social .btn{ flex:1 1 100%; }
  /* W wąskim pasku zostaje nazwa, telefon i menu — ikony są w sekcji kontaktu.
     To one miały margin-right:auto i odpychały resztę w prawo, więc po ich
     schowaniu telefon z menu przyklejały się do nazwy i wisiały na środku.
     Odpychanie przejmuje teraz sama nazwa. */
  .nav__spolecznosciowe{ display:none; }
  .nav__brand{ margin-right:auto; }
  .nav{ gap:.35rem; }
  /* bez napisu zostaje sama ikona — przycisk robi się kwadratem */
  .nav .btn--sm span{ display:none; }
  .nav .btn--sm{ width:2.75rem; height:2.75rem; min-height:0; padding:0; }
  .nav .btn--sm svg{ background:none; fill:var(--gold-deep); width:1.25rem; height:1.25rem; padding:0; }
  .nav .btn--sm:hover svg{ background:none; fill:var(--gold-deep); }
  .mozaika{ grid-template-columns:1fr; }
  /* W zdjęcia wypalone są napisy — w dwóch kolumnach po 165 px robiły się
     nieczytelne. Jedna kolumna na telefon. */
  .galeria__grid{ grid-template-columns:1fr; gap:var(--space-3); }
  .galeria figcaption{ padding:.7rem .8rem .9rem; font-size:.8rem; }
  .stopka__kolumny{ grid-template-columns:1fr; justify-items:center; text-align:center; gap:var(--space-3); }
  .stopka__kolumny nav{ justify-self:center; }
  /* na telefonie logo idzie na górę, przed dane kontaktowe */
  .stopka__logo{ order:-1; width:min(300px, 78vw); }
  .stopka nav{ flex-direction:row; flex-wrap:wrap; text-align:left; gap:1rem; }
  .szkolenia{ flex-direction:column; align-items:flex-start; }
  .raty{ flex-direction:column; }
  .tabela{ font-size:.9rem; }
}

/* ---------- Kursor-nożyczki ----------
   Ten sam pomysł co na stronie salonu Fantazja. Systemowy kursor chowa dopiero
   skrypt (klasa kursor-nozyczki na <html>), więc bez JS-u albo na ekranie
   dotykowym zostaje normalna strzałka i nic się nie psuje.

   Blok stoi celowo na końcu arkusza i chowa kursor gwiazdką, a nie listą
   elementów. Wcześniej była lista, a niżej w pliku siedziały reguły w rodzaju
   `.cennik__grupa > summary{ cursor:pointer }` o tej samej sile — wygrywały,
   bo były dalej, i nad nagłówkami cennika spod nożyczek wyłaziła łapka. */
html.kursor-nozyczki, html.kursor-nozyczki *{ cursor:none; }
/* Nad suwakiem metamorfozy nożyczki gasną i wraca systemowa strzałka z dwoma
   grotami — ona mówi wprost, że tu się przeciąga. Nad ramką z mapą kursor
   należy do niej. */
html.kursor-nozyczki .metam__suwak{ cursor:ew-resize; }
html.kursor-nozyczki iframe{ cursor:auto; }
.kursor.jest-widoczny.schowany{ opacity:0; }