/* ╔═════════════════════════════════════════════════════════════════════╗
   ║  ARKUSZ STYLÓW — GABINET FIZJOTERAPII, OSTRÓW WIELKOPOLSKI          ║
   ║  Jeden plik dla wszystkich podstron.                                ║
   ╚═════════════════════════════════════════════════════════════════════╝

   ┌─ MAPA PLIKU ───────────────────────────────────────────────────────┐
   │                                                                     │
   │  CZĘŚĆ 1   FUNDAMENT              wszystkie podstrony              │
   │  CZĘŚĆ 2   SZKIELET STRONY        wszystkie podstrony              │
   │  CZĘŚĆ 3   KOMPONENTY WSPÓLNE     używane na 2+ podstronach        │
   │  CZĘŚĆ 4   index.html             strona główna                    │
   │  CZĘŚĆ 5   cennik.html                                             │
   │  CZĘŚĆ 6   pierwszawizyta.html                                     │
   │  CZĘŚĆ 7   rezerwacja.html        rezerwacja Booksy + opinie       │
   │  CZĘŚĆ 8   kontakt.html           mapa, formularz, godziny         │
   │  CZĘŚĆ 9   regulamin.html         + polityka-prywatnosci.html      │
   │  CZĘŚĆ 10  POMOCNICZE             drobne klasy do doraźnych zmian  │
   │                                                                     │
   └─────────────────────────────────────────────────────────────────────┘
/* Poprawa zawijania tekstu w dokumentach */
.doc-body, 
.doc-body p, 
.doc-body li {
  word-break: normal !important;
  overflow-wrap: break-word !important;
  hyphens: none !important;
}
   ┌─ GDZIE SZUKAĆ DANEJ KLASY ─────────────────────────────────────────┐
   │                                                                     │
   │  .about .arc .card .claim .facts .goals .grid-3 .hero .portrait     │
   │  .pull .split .steps .trust                        →  CZĘŚĆ 4      │
   │                                                                     │
   │  .price-wrap .p-name .p-cost .p-time .price-meta .tag               │
   │  table.price tr.is-featured                        →  CZĘŚĆ 5      │
   │                                                                     │
   │  .prep .prep-item                                  →  CZĘŚĆ 6      │
   │                                                                     │
   │  .book-grid .book-col .book-card .book-steps .booksy-host           │
   │  .rating .review .reviews .stars .opinie-cta       →  CZĘŚĆ 7      │
   │                                                                     │
   │  .addr .contact .field .form .hours .info-list .map                 │
   │  .consent .form-status                             →  CZĘŚĆ 8      │
   │                                                                     │
   │  .doc .doc-body .doc-meta .doc-toc .rules          →  CZĘŚĆ 9      │
   │                                                                     │
   └─────────────────────────────────────────────────────────────────────┘

   ┌─ ZASADY PRACY Z TYM PLIKIEM ───────────────────────────────────────┐
   │                                                                     │
   │  1. Nowy styl dopisuj do CZĘŚCI odpowiadającej podstronie,          │
   │     nie na koniec pliku.                                            │
   │  2. Używaj klas (.nazwa), nie identyfikatorów (#nazwa).             │
   │     Identyfikator ma specyficzność 1,0,0 i blokuje nadpisanie.      │
   │  3. Kolory bierz ze zmiennych --nazwa, nie wpisuj wartości HEX.     │
   │  4. Rozmiary tekstu: clamp(min, płynne, max) zamiast stałych px.    │
   │  5. Do układu używaj grid albo flex. Bez float.                     │
   │                                                                     │
   └─────────────────────────────────────────────────────────────────────┘ */
/* ─── 10.1 · Baner Cookies & RODO (index.html) ─────────────────────── */
.cookie-banner {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 999;
  background: var(--petrol-d);
  color: #C9D6E9;
  border-top: 1px solid rgba(255, 255, 255, 0.15);
  padding: 1rem 0;
  box-shadow: 0 -10px 30px rgba(26, 34, 51, 0.35);
  opacity: 0;
  transform: translateY(100%);
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.cookie-banner.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.cookie-banner__wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
}

.cookie-banner__text {
  font-size: 0.88rem;
  line-height: 1.5;
  max-width: 78ch;
}

.cookie-banner__text a {
  color: #fff;
  text-decoration: underline;
}

.cookie-banner__text a:hover {
  color: var(--tape-b);
}

.cookie-banner__actions {
  display: flex;
  gap: 0.75rem;
  flex-shrink: 0;
}

.cookie-banner__actions .btn--ghost {
  color: #fff;
  border-color: rgba(255, 255, 255, 0.3);
}

.cookie-banner__actions .btn--ghost:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: #fff;
}

/* Dostosowanie do urządzeń mobilnych oraz uniknięcie zasłaniania przez belkę akcji */
@media (max-width: 760px) {
  .cookie-banner {
    bottom: calc(var(--cta-h) + var(--safe-b));
    border-radius: 12px;
    left: calc(0.5rem + var(--safe-l));
    right: calc(0.5rem + var(--safe-r));
    padding: 1.1rem;
    margin-bottom: 0.5rem;
  }

  .cookie-banner__wrap {
    flex-direction: column;
    align-items: stretch;
    gap: 1rem;
  }

  .cookie-banner__actions {
    flex-direction: column;
  }

  .cookie-banner__actions .btn {
    width: 100%;
  }
}

/* ╔═════════════════════════════════════════════════════════════════════╗
   ║  CZĘŚĆ 1 — FUNDAMENT                                                ║
   ║  Ładowane na każdej podstronie. Tu nic nie usuwaj.                  ║
   ╚═════════════════════════════════════════════════════════════════════╝ */

/* ─── 1.1 · Kolory, kroje, wymiary ────────────────────────────────────
   PALETA OPARTA NA DWÓCH KOLORACH BAZOWYCH:
     #56698F  (R86 G105 B143)  — stalowy błękit, kolor marki
     #00A0E3  (R0 G160 B227)   — jasny błękit, kolor akcentu

   UWAGA: #00A0E3 z białym tekstem daje kontrast 2,94:1, czyli poniżej
   wymaganych przez WCAG AA 4,5:1. Dlatego przyciski używają --accent-d
   (#0079AE, 4,83:1) — ten sam odcień, tylko przyciemniony. Czysty
   #00A0E3 pojawia się tam, gdzie kontrast na to pozwala: obramowania,
   ikony, łuk w hero, pierścień focusa.                                */
:root{
  /* Kolory bazowe */
  --slate:#56698F;        /* marka, akcenty na jasnym tle              */
  --accent:#00A0E3;       /* akcent, obramowania, focus                */
  --accent-d:#0079AE;     /* przyciski z białym tekstem      4,83:1    */
  --accent-dd:#005E88;    /* hover przycisku                 7,10:1    */

  /* Tła i linie */
  --paper:#FAFBFD;        /* tło strony                                */
  --mist:#E8EFF7;         /* sekcje przełamujące, tło zdjęcia          */
  --mist-2:#D5E1EE;       /* ramki paneli                              */
  --line:#D8E1EC;         /* separatory, obramowania pól               */

  /* Ciemne powierzchnie */
  --petrol:#3A4763;       /* ciemne sekcje       biały tekst 9,29:1    */
  --petrol-d:#2B3550;     /* stopka, pasek górny            12,16:1    */
  --ink:#1A2233;          /* nagłówki, sekcja CTA           15,40:1    */

  /* Tekst */
  --body:#41506B;         /* akapity                         7,88:1    */
  --muted:#63748F;        /* podpisy, dane techniczne        4,60:1    */

  /* Aliasy — nazwy używane w regułach poniżej */
  --tape:var(--accent-d);
  --tape-d:var(--accent-dd);
  --tape-b:#5BC0EC;       /* jasny akcent na ciemnym tle     4,51:1    */
  --tape-s:#E4F4FC;       /* delikatne wypełnienie, np. wiersz cennika */
  --danger:#B3322B;       /* komunikat o błędzie          4,92:1     */
  --danger-s:#FBECEA;     /* tło komunikatu o błędzie                */

  /* Kroje pisma */
  --display:'Bricolage Grotesque',ui-sans-serif,system-ui,sans-serif;
  --sans:'Instrument Sans',ui-sans-serif,system-ui,-apple-system,sans-serif;
  --mono:'JetBrains Mono',ui-monospace,'SF Mono',Menlo,monospace;

  /* Wymiary */
  --wrap:1200px;                      /* maksymalna szerokość treści   */
  --sec:clamp(4.5rem,9vw,8rem);       /* odstęp między sekcjami        */
  --r:10px;                           /* zaokrąglenie narożników       */
  --header-h:72px;                    /* wysokość przyklejonego menu   */
  --cta-h:76px;                       /* wysokość belki mobilnej       */

  /* Bezpieczne marginesy iPhone (notch, pasek gestów).
     UWAGA: env() zwraca 0, dopóki w HTML nie ma
     <meta name="viewport" content="width=device-width,initial-scale=1,viewport-fit=cover"> */
  --safe-b:env(safe-area-inset-bottom,0px);
  --safe-l:env(safe-area-inset-left,0px);
  --safe-r:env(safe-area-inset-right,0px);
}

/* ─── 1.2 · Reset ─────────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box}
*{margin:0}
html{
  -webkit-text-size-adjust:100%;text-size-adjust:100%;
  scroll-behavior:smooth;scroll-padding-top:calc(var(--header-h) + 16px);
}
body{
  font-family:var(--sans);
  font-size:clamp(1rem,.96rem + .18vw,1.125rem);
  line-height:1.7;color:var(--body);background:var(--paper);
  -webkit-font-smoothing:antialiased;
  /* Dziedziczone: adresy e-mail i długie linki nie rozpychają layoutu
     w bok na wąskich ekranach.                                        */
  overflow-wrap:break-word;
}

/* Blokada przewijania w bok. `hidden` na samym <body> nie działa
   w Safari na iOS — musi być na obu elementach. Tam, gdzie przeglądarka
   zna `clip`, używamy go: `hidden` tworzy kontener przewijania i potrafi
   rozbić position:sticky w nagłówku, `clip` tego nie robi.            */
html,body{overflow-x:hidden}
@supports (overflow:clip){html,body{overflow-x:clip}}

/* Szary prostokąt migający po dotknięciu w Chrome na Androidzie
   i w Safari na iOS. Stan :active poniżej daje czytelniejszą reakcję. */
a,button,summary,label,input,select,textarea,[role="button"]{
  -webkit-tap-highlight-color:transparent;
}

img,svg{display:block;max-width:100%}
a{color:var(--tape);text-decoration-thickness:1px;text-underline-offset:3px}
@media (hover:hover) and (pointer:fine){a:hover{color:var(--tape-d)}}
button{font:inherit;color:inherit;cursor:pointer;border:0;background:none}
:focus-visible{outline:2.5px solid var(--accent);outline-offset:3px;border-radius:3px}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}

/* ─── 1.3 · Typografia ────────────────────────────────────────────── */
h1,h2,h3,h4{font-family:var(--display);color:var(--ink);line-height:1.08;letter-spacing:-.022em;font-weight:700;text-wrap:balance}
h1{font-size:clamp(2.4rem,5.8vw,4.2rem);font-weight:800;letter-spacing:-.035em}
h2{font-size:clamp(1.95rem,3.9vw,3.1rem)}
h3{font-size:clamp(1.12rem,1.5vw,1.32rem);line-height:1.25}
h4{font-size:1.02rem;line-height:1.35}
p{text-wrap:pretty}

/* Nadnagłówek — mała etykieta nad tytułem sekcji */
.eyebrow{
  font-family:var(--mono);font-size:.72rem;font-weight:500;
  letter-spacing:.16em;text-transform:uppercase;color:var(--tape);
  display:flex;align-items:center;gap:.7rem;margin-bottom:1.1rem;
}
.eyebrow::before{content:"";width:26px;height:1px;background:currentColor;flex:none}
.eyebrow--light{color:var(--tape-b)}              /* na ciemnym tle    */
.eyebrow--spacer{visibility:hidden}               /* wyrównanie kolumn */

/* Akapit wprowadzający pod tytułem sekcji */
.lede{font-size:clamp(1.05rem,1.45vw,1.24rem);line-height:1.6;color:var(--body)}

/* Nagłówek sekcji */
.sec-head{max-width:46ch;margin-bottom:clamp(2.5rem,4vw,3.5rem)}
.sec-head p{margin-top:1.1rem}
.sec-head-right{max-width:46ch;margin-bottom:clamp(2.5rem,4vw,3.5rem);margin-left:auto}

/* Nagłówek dwukolumnowy: lewa kolumna do lewej krawędzi, prawa do prawej.
   `max-width:none` znosi limit 46ch z .sec-head — bez tego obie kolumny
   ściskają się w wąskim pasie po lewej stronie sekcji.                */
.sec-head--split{
  max-width:none;
  display:flex;flex-wrap:wrap;
  justify-content:space-between;align-items:flex-start;
  gap:clamp(1.75rem,4vw,4rem);
}
.sec-head--split>*{
  flex:1 1 320px;      /* poniżej ~720px kolumny zawijają się same     */
  min-width:0;
  max-width:46ch;      /* zachowuje komfortową długość wiersza         */
  display:flex;flex-direction:column;
}
.sec-head--split>*+*{align-items:flex-start}
/* Poniżej 640 px druga kolumna nagłówka zostawała przyklejona do prawej
   krawędzi i tekst układał się w wąski słupek.                       */
@media (max-width:640px){
  .sec-head--split{gap:1.25rem}
  .sec-head--split>*{flex-basis:100%}
  .sec-head-right{margin-left:0}
}

/* ─── 1.4 · Siatka i sekcje ───────────────────────────────────────── */
.wrap{width:min(100% - 2.5rem,var(--wrap));margin-inline:auto}
@media (max-width:600px){.wrap{width:calc(100% - 2rem)}}

/* iPhone w poziomie: treść nie wjeżdża pod zaokrąglenie ekranu i notch. */
@media (orientation:landscape){
  .wrap{padding-left:var(--safe-l);padding-right:var(--safe-r)}
}

/* Element siatki ma domyślnie min-width:auto — nie potrafi zmaleć
   poniżej najdłuższego słowa i wypycha stronę w bok. Zero to naprawia. */
.hero .wrap>*,.split>*,.about>*,.contact>*,.book-grid>*,.doc>*,
.grid-3>*,.prep>*,.reviews>*,.price-meta>*,.facts .wrap>*,
.footer-grid>*,.step>*,.goals li>*,.info-list li>*{min-width:0}

.section{padding-block:var(--sec)}
.section--mist{background:var(--mist)}                              /* jasne przełamanie */
.section--petrol{background:var(--petrol);color:#CBD7E8}            /* ciemna sekcja     */
.section--petrol h2,.section--petrol h3{color:#fff}
.section--ink{background:var(--ink);color:#B3C0D6}                  /* najciemniejsza    */
.section--ink h2{color:#fff}

/* ─── 1.5 · Przyciski ─────────────────────────────────────────────── */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.6rem;
  font-family:var(--sans);font-size:1rem;font-weight:600;line-height:1;
  padding:1.05rem 1.9rem;border-radius:var(--r);text-decoration:none;
  transition:background .18s,color .18s,transform .18s,border-color .18s;white-space:nowrap;
}
.btn{max-width:100%}
.btn:active{transform:translateY(1px)}
.btn--primary{background:var(--tape);color:#fff}                    /* główna akcja  */
.btn--ghost{border:1.5px solid var(--line);color:var(--ink);background:transparent}
.btn--onDark{border:1.5px solid rgba(255,255,255,.28);color:#fff}   /* na ciemnym tle */

/* Stan :hover tylko tam, gdzie istnieje kursor. Na telefonie dotknięcie
   przycisku uruchamia :hover i kolor zostaje „zablokowany" aż do
   dotknięcia czegoś innego — to typowy błąd na Androidzie i iOS.     */
@media (hover:hover) and (pointer:fine){
  .btn--primary:hover{background:var(--tape-d);color:#fff}
  .btn--ghost:hover{border-color:var(--slate);color:var(--slate);background:#fff}
  .btn--onDark:hover{border-color:#fff;background:rgba(255,255,255,.08);color:#fff}
}

/* Poniżej ~380 px długa etykieta z white-space:nowrap wystawała poza
   ekran. Tu wolno jej się złamać na dwa wiersze.                     */
@media (max-width:380px){
  .btn{white-space:normal;padding-inline:1.2rem;text-align:center}
}
.btn--sm{padding:.72rem 1.25rem;font-size:.92rem}
.btn--block{width:100%}
.btn-row{display:flex;flex-wrap:wrap;gap:.85rem;align-items:center}

/* ─── 1.6 · Dostępność ────────────────────────────────────────────── */
/* Tekst widoczny tylko dla czytników ekranu */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* Odnośnik „Przejdź do treści" — pojawia się po naciśnięciu Tab */
.skip{position:absolute;left:1rem;top:-100px;z-index:200;background:var(--tape);color:#fff;padding:.7rem 1.2rem;border-radius:var(--r);text-decoration:none;transition:top .2s}
.skip:focus{top:1rem;color:#fff}


/* ╔═════════════════════════════════════════════════════════════════════╗
   ║  CZĘŚĆ 2 — SZKIELET STRONY                                          ║
   ║  Pasek górny, menu, stopka, belka mobilna, animacja wejścia.        ║
   ║  Obecne na każdej podstronie.                                       ║
   ╚═════════════════════════════════════════════════════════════════════╝ */

/* ─── 2.1 · Pasek górny (adres i telefon) ─────────────────────────── */
.topbar{background:var(--petrol-d);color: white;font-family:var(--mono);font-size:.73rem;letter-spacing:.03em;padding:.55rem 0}
.topbar .wrap{display:flex;gap:1.6rem;flex-wrap:wrap;justify-content:center}
.topbar a{color:#C9D6E9;text-decoration:none}
@media (hover:hover) and (pointer:fine){.topbar a:hover{color:#fff}}
@media (max-width:760px){.topbar{display:none}}        /* ukryty na telefonie */

/* ─── 2.2 · Nagłówek przyklejony ──────────────────────────────────── */
.header{
  position:sticky;top:0;z-index:100;background:rgba(250,251,253,.92);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  border-bottom:1px solid transparent;
  transition:border-color .25s,box-shadow .25s;
}
.header.is-stuck{border-bottom-color:var(--line);box-shadow:0 6px 24px -18px rgba(58,71,99,.5)}
.header .wrap{display:flex;align-items:center;gap:1.5rem;height:var(--header-h)}

/* ─── 2.3 · Logo ──────────────────────────────────────────────────── */
.brand{display:flex;align-items:center;gap:.7rem;text-decoration:none;margin-right:auto;flex:none;min-width:0}

/* Znak graficzny — jeden rozmiar dla obu nazw klas (.brand-mark w starszym
   HTML, .logo w nowszym), żeby nie zależało to od tego, którą akurat
   wpisano na danej podstronie.

   `flex:none`      — logo nie kurczy się, gdy nazwa gabinetu jest długa
                      (bez tego flexbox ściska je na wąskim ekranie).
   `aspect-ratio`   — kwadrat nawet wtedy, gdy jeden wymiar zostanie
                      nadpisany atrybutem width/height w HTML.
   `object-fit`     — dla <img>: obraz o innych proporcjach wpisuje się
                      w kwadrat zamiast być rozciągnięty.

   WAŻNE dla <svg>: znacznik musi mieć viewBox, np.
   <svg class="logo" viewBox="0 0 64 64" ...>. Bez viewBox SVG ignoruje
   width/height z CSS i rysuje się we własnym rozmiarze.               */
.brand-mark,.logo{
  width:40px;height:40px;flex:none;aspect-ratio:1;object-fit:contain;
}
.brand-txt{display:flex;flex-direction:column;line-height:1.05;min-width:0}
.brand-name{font-family:var(--display);font-weight:800;font-size:1.06rem;color:var(--ink);letter-spacing:-.02em}
.brand-sub{font-family:var(--mono);font-size:.58rem;letter-spacing:.13em;text-transform:uppercase;color:var(--muted)}

/* Na najwęższych telefonach (≈320 px) sam podpis pod nazwą potrafi
   wypchnąć hamburgera poza ekran.                                     */
@media (max-width:360px){
  .brand-name{font-size:.98rem}
  .brand-sub{display:none}
}

/* ─── 2.4 · Menu na desktopie ─────────────────────────────────────── */
.nav{display:flex;gap:.2rem}
.nav a{font-size:.93rem;font-weight:500;color:var(--body);text-decoration:none;padding:.5rem .68rem;border-radius:7px;transition:color .16s,background .16s}
.nav a:hover{color:var(--ink);background:var(--mist)}
@media (hover:none){.nav a:hover{color:var(--body);background:none}}
.nav a.is-active{color:var(--tape)}      /* bieżąca sekcja lub podstrona */
@media (max-width:1080px){.nav{display:none}}

/* ─── 2.5 · Menu mobilne ──────────────────────────────────────────── */
.burger{display:none;width:44px;height:44px;border:1.5px solid var(--line);border-radius:9px;align-items:center;justify-content:center;flex:none}
.burger span{display:block;width:18px;height:1.8px;background:var(--ink);position:relative;transition:background .25s}
.burger span::before,.burger span::after{content:"";position:absolute;left:0;width:18px;height:1.8px;background:var(--ink);transition:transform .25s}
.burger span::before{top:-6px}
.burger span::after{top:6px}
.burger[aria-expanded="true"] span{background:transparent}
.burger[aria-expanded="true"] span::before{transform:translateY(6px) rotate(45deg)}
.burger[aria-expanded="true"] span::after{transform:translateY(-6px) rotate(-45deg)}
/* Poniżej 1080 px menu poziome nie mieści się i pojawia się hamburger.
   Przycisk rezerwacji chowamy dopiero poniżej 760 px — na tablecie jest
   na niego miejsce, a niżej jego rolę przejmuje belka przy dolnej
   krawędzi ekranu (.mobile-cta). Wcześniej w przedziale 760–1080 px
   nie było widać ŻADNEGO przycisku rezerwacji.                       */
@media (max-width:1080px){.burger{display:flex}}
@media (max-width:760px){.header-cta{display:none}}

/* `height` liczona w dvh zamiast polegania na `bottom:0`: pasek adresu
   w Safari i Chrome na telefonie chowa się przy przewijaniu i zwykłe
   jednostki widoku ucinają dół menu.
   `visibility:hidden` — bez tego zamknięte menu (opacity:0) nadal łapie
   fokus klawiaturą i jest czytane przez czytniki ekranu.
   `overscroll-behavior` — przewijanie menu do końca nie przenosi się
   na stronę pod spodem.                                              */
.mobile-nav{
  /* --nav-top ustawia skrypt.js: to rzeczywista dolna krawędź nagłówka.
     Powyżej 760 px nad nagłówkiem jest jeszcze pasek z adresem, więc
     stała wartość zostawiała nad panelem pasek prześwitującej treści.
     Wartość zapasowa (var(--header-h)) działa bez JavaScriptu.        */
  position:fixed;left:0;right:0;top:var(--nav-top,var(--header-h));z-index:99;
  height:calc(100vh - var(--nav-top,var(--header-h)));
  height:calc(100dvh - var(--nav-top,var(--header-h)));
  background:var(--paper);
  padding:1.5rem 0 calc(6rem + var(--safe-b));
  padding-left:var(--safe-l);padding-right:var(--safe-r);
  overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;
  transform:translateY(-8px);opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity .22s,transform .22s,visibility 0s .22s;
}
.mobile-nav.is-open{opacity:1;transform:none;visibility:visible;pointer-events:auto;transition:opacity .22s,transform .22s}

/* Klasę .is-nav-open dopisuje skrypt.js do <html> przy otwieraniu menu —
   bez tego strona przewija się pod otwartym menu.
   Bez `touch-action:none`: ta właściwość składa się wzdłuż całej gałęzi
   przodków, więc ustawiona na <html> odbierała przewijanie także samemu
   menu (.mobile-nav ma overflow-y:auto). Za powstrzymanie przewijania
   tła odpowiada overscroll-behavior:contain wyżej.                    */
.is-nav-open,.is-nav-open body{overflow:hidden}
.mobile-nav a{display:block;font-family:var(--display);font-size:1.42rem;font-weight:600;color:var(--ink);text-decoration:none;padding:.85rem 0;border-bottom:1px solid var(--line)}
/* Selektor `.mobile-nav a` ma specyficzność 0,1,1 i wygrywa z `.btn`
   oraz `.btn--primary` (0,1,0). Bez tej reguły przycisk w menu dostawał
   display:block, krój nagłówkowy 1.42rem, granatowy kolor tekstu na
   niebieskim tle i kreskę pod spodem jak zwykła pozycja listy.
   `.mobile-nav .btn` to 0,2,0 — wystarczy, żeby przywrócić wygląd
   przycisku bez !important.                                          */
.mobile-nav .btn{
  display:inline-flex;
  font-family:var(--sans);font-size:1rem;font-weight:600;
  padding:1.05rem 1.9rem;
  border-bottom:0;
  margin-top:1.8rem;
}
.mobile-nav .btn--primary{color:#fff}
.mobile-nav .btn--block{width:100%}

/* ─── 2.6 · Stopka ────────────────────────────────────────────────── */
.footer{background:var(--petrol-d);color:#93A3C0;padding-block:clamp(3rem,5vw,4.5rem) 0;font-size:.92rem}
.footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:2.5rem}
@media (max-width:860px){.footer-grid{grid-template-columns:1fr 1fr}}
@media (max-width:520px){.footer-grid{grid-template-columns:1fr}}
.footer h4{color:#fff;font-family:var(--mono);font-size:.67rem;font-weight:500;letter-spacing:.15em;text-transform:uppercase;margin-bottom:1.1rem}
.footer a{color:#BAC8DF;text-decoration:none}
@media (hover:hover) and (pointer:fine){.footer a:hover{color:#fff;text-decoration:underline}}
.footer ul{list-style:none;padding:0;margin:0;display:grid;gap:.55rem}
.footer-brand p{margin-top:.8rem;line-height:1.65;max-width:34ch}
.footer-pwz{font-family:var(--mono);font-size:.71rem;letter-spacing:.05em;margin-top:1rem;color:#8FA0BE}
.footer-bottom{margin-top:3rem;padding:1.5rem 0;border-top:1px solid rgba(255,255,255,.12);display:flex;flex-wrap:wrap;gap:.6rem 1.5rem;justify-content:space-between;font-family:var(--mono);font-size:.71rem;letter-spacing:.04em;color:#8FA0BE}

/* ─── 2.7 · Belka akcji na telefonie ──────────────────────────────────
   Pływająca karta przy dolnej krawędzi ekranu — nie pas przyklejony do
   krawędzi, dzięki czemu widać, że treść pod nią biegnie dalej.

   POJAWIANIE SIĘ (moduł „belka-mobilna" w skrypt.js):
   belka startuje schowana i wjeżdża dopiero wtedy, gdy z ekranu zniknie
   element oznaczony w HTML atrybutem data-cta-strefa (na stronie głównej
   to rząd przycisków w sekcji powitalnej). Bez tego na pierwszym ekranie
   telefonu widoczne byłyby dwie pary tych samych przycisków.

   Podstrona bez data-cta-strefa pokazuje belkę od razu — tam nie ma
   z czym kolidować.

   Reguły ukrywające obowiązują TYLKO przy działającym JavaScripcie
   (html[data-js-ok] ustawia skrypt.js). Gdyby plik się nie wczytał,
   belka po prostu jest widoczna — nigdy nie zniknie na stałe.        */
.mobile-cta{
  position:fixed;z-index:95;display:none;gap:.55rem;
  left:calc(.75rem + var(--safe-l));right:calc(.75rem + var(--safe-r));
  bottom:calc(.75rem + var(--safe-b));
  padding:.5rem;
  background:rgba(250,251,253,.9);
  -webkit-backdrop-filter:blur(14px) saturate(140%);backdrop-filter:blur(14px) saturate(140%);
  border:1px solid var(--line);border-radius:16px;
  box-shadow:0 18px 40px -22px rgba(26,34,51,.55),0 2px 6px -3px rgba(26,34,51,.18);
}

/* min-width:0 — przyciski dzielą szerokość niezależnie od długości
   napisu (bez tego flex nie zejdzie poniżej szerokości tekstu
   i belka wystaje poza ekran).                                       */
.mobile-cta .btn{
  flex:1 1 0;min-width:0;
  min-height:48px;                 /* wygodny cel dla palca (WCAG 2.5.8) */
  padding:.85rem .7rem;font-size:.95rem;border-radius:12px;
}
.mobile-cta .btn--primary{flex:1.45 1 0}
.mobile-cta .btn--ghost{background:#fff;border-color:var(--mist-2);gap:.45rem}
.mobile-cta .btn svg{width:17px;height:17px;flex:none}

@media (max-width:760px){
  .mobile-cta{display:flex}
  /* Zapas na dole dokumentu, żeby belka nie zasłoniła stopki.
     Liczony razem z paskiem gestów iPhone'a.                         */
  body{padding-bottom:calc(var(--cta-h) + var(--safe-b))}
}

/* Stan schowany — tylko gdy skrypt działa i sam nią steruje. */
html[data-js-ok] .mobile-cta{
  opacity:0;transform:translateY(140%);pointer-events:none;
  transition:opacity .28s ease,transform .32s cubic-bezier(.22,.85,.3,1);
}
html[data-js-ok] .mobile-cta.is-visible{opacity:1;transform:none;pointer-events:auto}

/* Otwarte menu przykrywa całą treść — belka nie ma tam czego wołać. */
html.is-nav-open .mobile-cta{opacity:0;transform:translateY(140%);pointer-events:none}

@media (prefers-reduced-motion:reduce){
  html[data-js-ok] .mobile-cta{transition:opacity .2s linear;transform:none}
  html[data-js-ok] .mobile-cta:not(.is-visible){transform:none;visibility:hidden}
}

/* ─── 2.8 · Animacja wejścia sekcji ───────────────────────────────── */
/* Element z klasą .reveal jest ukryty, dopóki skrypt.js nie doda .is-in. */
.js .reveal{opacity:0;transform:translateY(18px);transition:opacity .65s cubic-bezier(.22,.85,.3,1),transform .65s cubic-bezier(.22,.85,.3,1)}
.js .reveal.is-in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.js .reveal{opacity:1;transform:none}}


/* ╔═════════════════════════════════════════════════════════════════════╗
   ║  CZĘŚĆ 3 — KOMPONENTY WSPÓLNE                                       ║
   ║  Używane na więcej niż jednej podstronie.                           ║
   ╚═════════════════════════════════════════════════════════════════════╝ */

/* ─── 3.1 · Ramka z uwagą ─────────────────────────────────────────────
   Gdzie: index.html (pod metodami), regulamin.html (§6)               */
.note{margin-top:1.6rem;font-size:.95rem;color:var(--muted);border-left:2px solid var(--accent);padding-left:1.1rem}

/* ─── 3.2 · Ramka ostrzegawcza ────────────────────────────────────────
   Gdzie: kontakt.html (RODO przy formularzu), regulamin.html (opłata)  */
.warn{background:var(--tape-s);border-radius:8px;padding:.9rem 1.1rem;font-size:.86rem;line-height:1.55;color:var(--ink)}

/* ─── 3.3 · Miejsce na zdjęcie ────────────────────────────────────────
   Placeholder do podmiany na <img>. Gdzie: index.html (sekcja O mnie)  */
.photo{
  background:#fff;border:1px dashed var(--mist-2);border-radius:var(--r);
  display:grid;place-content:center;text-align:center;padding:2rem 1.25rem;color:var(--muted);
  font-family:var(--mono);font-size:.68rem;letter-spacing:.11em;text-transform:uppercase;
}
.photo b{display:block;color:var(--slate);font-size:.78rem;margin-bottom:.4rem;letter-spacing:.08em}
.photo--portrait{aspect-ratio:3/4}

/* ─── 3.4 · Miejsce na widget zewnętrzny ──────────────────────────────
   Gdzie: rezerwacja.html (Booksy, opinie Google)                       */
.widget-slot{
  border:1px dashed var(--mist-2);border-radius:var(--r);background:var(--mist);
  padding:2.4rem 1.5rem;text-align:center;color:var(--muted);
  font-family:var(--mono);font-size:.75rem;letter-spacing:.07em;line-height:1.8;
}
.widget-slot b{display:block;color:var(--slate);font-size:.85rem;margin-bottom:.5rem;letter-spacing:.1em;text-transform:uppercase}
.section--petrol .widget-slot{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.24);color:#9CACC8}
.section--petrol .widget-slot b{color:#fff}

/* ─── 3.5 · Akordeon pytań ────────────────────────────────────────────
   Zbudowany na <details>/<summary> — działa też bez JavaScriptu.
   Gdzie: index.html, kontakt.html                                      */
.faq{max-width:860px;margin-inline:auto;border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{
  list-style:none;cursor:pointer;padding:1.35rem 3rem 1.35rem 0;position:relative;
  font-family:var(--display);font-weight:600;font-size:clamp(1.02rem,1.5vw,1.15rem);
  color:var(--ink);line-height:1.4;transition:color .18s;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::marker{content:""}
@media (hover:hover) and (pointer:fine){.faq summary:hover{color:var(--tape)}}
.faq summary::after{content:"";position:absolute;right:.35rem;top:1.75rem;width:13px;height:13px;border-right:2px solid var(--accent);border-bottom:2px solid var(--accent);transform:rotate(45deg);transition:transform .22s}
.faq details[open] summary::after{transform:rotate(-135deg);top:1.95rem}
.faq-a{padding:0 3rem 1.5rem 0;font-size:.97rem;line-height:1.7}

/* ─── 3.6 · Sekcja domykająca z wezwaniem do działania ────────────────
   Gdzie: index.html, może trafić na dowolną podstronę                  */
.final{text-align:center;max-width:680px;margin-inline:auto}
.final .btn-row{justify-content:center;margin-top:2rem}
.final p{margin-top:1.2rem;color:#9CA9C5}


/* ╔═════════════════════════════════════════════════════════════════════╗
   ║  CZĘŚĆ 4 — index.html  ·  STRONA GŁÓWNA                             ║
   ╚═════════════════════════════════════════════════════════════════════╝ */

/* ─── 4.1 · Sekcja powitalna ──────────────────────────────────────── */
.hero{padding-block:clamp(2.75rem,5.5vw,5rem) clamp(3.5rem,7vw,6.5rem);overflow:hidden}
.hero .wrap{display:grid;grid-template-columns:1.08fr .92fr;gap:clamp(2rem,5vw,4.5rem);align-items:center}
@media (max-width:920px){.hero .wrap{grid-template-columns:1fr;gap:2.75rem}}
.hero h1{margin-bottom:1.4rem}
.hero h1 em{font-style:normal;color:var(--tape)}     /* wyróżniony fragment */
.hero .lede{max-width:47ch;margin-bottom:2.1rem}
.hero .btn-row{margin-bottom:2.2rem}

/* Pasek zaufania pod przyciskami */
.trust{
  display:flex;flex-wrap:wrap;gap:.55rem 1.5rem;
  font-family:var(--mono);font-size:.75rem;letter-spacing:.04em;color:var(--muted);
  border-top:1px solid var(--line);padding-top:1.2rem;
}
.trust b{color:var(--ink);font-weight:700}

/* ─── 4.2 · Łuk goniometru — znak rozpoznawczy strony ─────────────────
   Odwzorowuje narzędzie do pomiaru zakresu ruchu. Rysuje się przy
   wczytaniu strony. Występuje tylko tutaj — to celowe.                */
.hero-visual{position:relative}
.arc{position:absolute;left:-16%;bottom:-8%;width:76%;max-width:430px;height:auto;pointer-events:none;color:var(--slate);z-index:0}
.arc-path{fill:none;stroke:currentColor;stroke-width:1.4;opacity:.35;stroke-dasharray:613;stroke-dashoffset:613;animation:sweep 1.7s .25s cubic-bezier(.22,.85,.3,1) forwards}
.arc line{stroke:currentColor;stroke-width:1.4;opacity:0;animation:tickIn .5s forwards}
.arc line.major{stroke-width:2;stroke:var(--accent);animation-name:tickInMajor}
.arc text{font-family:var(--mono);font-size:15px;fill:var(--muted);opacity:0;animation:tickIn .6s 1.5s forwards}
.arc-label{font-size:13px!important;fill:var(--tape)!important;letter-spacing:1.5px}
@keyframes sweep{to{stroke-dashoffset:0}}
@keyframes tickIn{to{opacity:.55}}
@keyframes tickInMajor{to{opacity:1}}
@media (prefers-reduced-motion:reduce){
  .arc-path{stroke-dashoffset:0}
  .arc line{opacity:.55}
  .arc line.major{opacity:1}
  .arc text{opacity:.55}
}

/* ─── 4.3 · Portret w sekcji powitalnej ─────────────────────────────── */
.portrait {
  position: relative;
  z-index: 2;
  width: 86%;
  margin-left: auto;
  background: var(--mist);
  border: 1px solid var(--mist-2);
  border-radius: var(--r);
  overflow: hidden;
  box-shadow: 0 32px 60px -46px rgba(58, 71, 99, .75);
}

.portrait img {
  width: 100%;
  height: auto;
  display: block;
  /* Zdjęcie zostaje w pełnym kolorze na każdym urządzeniu.
     Filtr grayscale() usunięty — na telefonach (@media hover:none)
     włączał się na stałe i portret był tam zawsze czarno-biały.

     Proporcji celowo nie wymuszam w CSS, żeby nie kadrować zdjęcia.
     Żeby tekst pod spodem nie podskakiwał przy wczytywaniu, dopisz
     w HTML prawdziwe wymiary pliku:
     <img src="…" width="900" height="1200" alt="…" loading="lazy"> */
}

.portrait figcaption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 3rem 1.3rem 1rem;
  background: linear-gradient(to top, rgba(43, 53, 80, 0.95) 20%, rgba(43, 53, 80, 0));
  font-family: var(--mono);
  font-size: .68rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #CDD9EA;
}

.portrait figcaption b {
  display: block;
  font-family: var(--sans);
  font-size: .98rem;
  letter-spacing: 0;
  text-transform: none;
  color: #fff;
  margin-bottom: .12rem;
}

.portrait figcaption .sub-title {
  display: block;
  margin-bottom: .6rem;
}

/* ─── EFEKT CZARNO-BIAŁY I ODWRACANIE / PISANIE WIELOWIERSZOWE ───────── */

.typing-text-multiline {
  font-family: var(--mono);
  font-size: clamp(0.72rem, 2vw, 0.88rem);
  line-height: 1.45;
  color: #ffffff;
  text-transform: none;
  letter-spacing: normal;
  margin-top: 0.4rem;
  
  /* Płynne zawijanie w wielu liniach */
  white-space: normal;
  word-break: break-word;
  
  /* Poprzednio: opacity:0 + clip-path o zerowej powierzchni, przy czym
     żadna reguła w arkuszu tego nie odsłaniała — element był niewidoczny
     na każdym urządzeniu. Teraz jest po prostu widoczny.              */
  opacity: 1;
}

/* ─── DWULINIOWY EFEKT PISANIA NA MASZYNIE ─────────────────────────── */

.typing-container {
  margin-top: 0.4rem;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

/* Stan podstawowy: tekst po prostu widoczny i zawijany.
   Poprzednio bazą było `white-space:nowrap; overflow:hidden; width:0`,
   więc na telefonie napis dłuższy niż szerokość kolumny był ucinany
   w połowie zdania i nie dało się go doczytać. Efekt maszyny do
   pisania jest teraz dodatkiem dla myszy, a nie warunkiem czytelności. */
.line-1,
.line-2 {
  font-family: var(--mono);
  font-size: clamp(0.66rem, 2.6vw, 0.78rem);
  line-height: 1.45;
  color: #ffffff;
  text-transform: none;
  letter-spacing: normal;
  white-space: normal;
  overflow-wrap: break-word;
}

/* --- LOGIKA DLA DESKTOPÓW (Hover) ---
   Cały efekt żyje w @media (hover:hover) and (pointer:fine): tylko tam
   istnieje kursor, który może najechać na zdjęcie. --- */
@media (hover: hover) and (pointer: fine) {
  .line-1,
  .line-2 {
    white-space: nowrap;
    overflow: hidden;
    border-right: 2px solid transparent;
    width: 0;
    opacity: 0;
  }
}

@media (hover: hover) and (pointer: fine) {
  /* Pierwsza linia: pisze się 1.2s, 25 znaków */
  .portrait:hover .line-1 {
    opacity: 1;
    animation: 
      type-line1 1.2s steps(25, end) forwards,
      blink 0.4s step-end 3,
      hide-cursor 0s 1.2s forwards;
  }

  /* Druga linia: CZEKA 1.2s (delay), potem pisze się przez 1.8s (40 znaków) */
  .portrait:hover .line-2 {
    opacity: 1;
    animation: 
      type-line2 1.8s steps(40, end) 1.2s forwards,
      blink 0.4s step-end 1.2s 4.5,
      hide-cursor 0s 3s forwards;
  }
}

/* --- LOGIKA DLA URZĄDZEŃ DOTYKOWYCH ---
   Bez najeżdżania kursorem nie ma czym uruchomić animacji, więc podpis
   pojawia się od razu, w całości, złamany na tyle wierszy, ile trzeba.
   Filtr grayscale usunięty — to on powodował, że na każdym telefonie
   zdjęcie było czarno-białe.                                          */
@media (hover: none),(pointer: coarse){
  .line-1,
  .line-2 {
    width: auto;
    opacity: 1;
    border-right: 0;
    animation: none;
    white-space: normal;
    overflow: visible;
  }
}

@media (max-width: 920px) {
  .portrait {
    width: 100%;
    max-width: 400px;
    margin-inline: auto;
  }
  .arc {
    left: -6%;
    width: 56%;
  }
}

/* Na telefonie podpis zajmował ponad połowę zdjęcia — mniejszy odstęp
   górny i węższy gradient oddają twarz z powrotem.                   */
@media (max-width: 560px) {
  .portrait figcaption { padding: 2.2rem 1.05rem .9rem }
  .arc { display: none }        /* łuk nachodził na portret */
}

/* ─── ANIMACJE (KEYFRAMES) ─────────────────────────────────────────── */

/* Linia 1 rozszerza się do swojej pełnej długości */
@keyframes type-line1 {
  from { width: 0; }
  to { width: 100%; }
}

/* Linia 2 rozszerza się od zera po opóźnieniu */
@keyframes type-line2 {
  from { width: 0; }
  to { width: 100%; }
}

/* Mruganie kursora */
@keyframes blink {
  from, to { border-color: transparent; }
  50% { border-color: #ffffff; }
}

/* Schowanie kursora po zakończeniu pisania danej linii */
@keyframes hide-cursor {
  to { border-right-color: transparent; }
}

/* Usunięto zduplikowane @keyframes blink (był zdefiniowany dwa razy)
   oraz nieużywane @keyframes typing i @keyframes remove-border.      */

/* ─── 4.4 · Pasek faktów ──────────────────────────────────────────── */
.facts{background:var(--petrol);color:#BAC8DF}
.facts .wrap{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:rgba(255,255,255,.15)}
.fact{background:var(--petrol);padding:2.1rem 1.6rem}   /* 1px przerwy tworzy linie */
.fact-n{font-family:var(--mono);font-size:1.5rem;font-weight:700;color:#fff;letter-spacing:-.02em;display:block;margin-bottom:.5rem}
.fact-n small{font-size:.82rem;font-weight:500;color:var(--tape-b);letter-spacing:.05em}
.fact p{font-size:.9rem;line-height:1.55}
@media (max-width:820px){.facts .wrap{grid-template-columns:1fr 1fr}}
@media (max-width:480px){.facts .wrap{grid-template-columns:1fr}}

/* ─── 4.5 · Sekcja „Dla kogo" ─────────────────────────────────────── */
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,5vw,4.5rem);align-items:center}
@media (max-width:880px){.split{grid-template-columns:1fr}}
.claim{
  font-family:var(--display);font-size:clamp(1.45rem,2.9vw,2.15rem);font-weight:600;
  line-height:1.28;letter-spacing:-.025em;color:var(--ink);
}
.claim em{font-style:normal;color:var(--tape)}
.goals{list-style:none;padding:0;margin:0;display:grid;gap:0;border-top:1px solid var(--line)}
.goals li{display:grid;grid-template-columns:auto 1fr;gap:1.1rem;align-items:baseline;padding:1.1rem 0;border-bottom:1px solid var(--line)}
.goals b{font-family:var(--mono);font-size:.72rem;font-weight:500;letter-spacing:.12em;color:var(--tape)}
.goals span{font-size:1rem;color:var(--ink);font-weight:500}

/* ─── 4.6 · Karty metod terapii ───────────────────────────────────── */
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:1.15rem}
@media (max-width:940px){.grid-3{grid-template-columns:1fr 1fr}}
@media (max-width:620px){.grid-3{grid-template-columns:1fr}}

.card{
  background:#fff;border:1px solid var(--line);border-radius:var(--r);
  padding:1.7rem 1.6rem;display:flex;flex-direction:column;
  transition:border-color .2s,transform .2s,box-shadow .2s;
}
.card h3{margin-bottom:.6rem}
.card p{font-size:.93rem;line-height:1.6;color:var(--body)}
.card-ico{width:28px;height:28px;color:var(--slate);margin-bottom:1rem;transition:color .2s}

/* Uniesienie karty tylko dla myszy. Na telefonie po dotknięciu karta
   zostawała podniesiona i podświetlona do czasu dotknięcia innej.    */
@media (hover:hover) and (pointer:fine){
  .card:hover{border-color:var(--accent);transform:translateY(-3px);box-shadow:0 18px 40px -30px rgba(58,71,99,.6)}
  .card:hover .card-ico{color:var(--accent)}
}

/* Karta na całą szerokość — „Terapia kompleksowa" */
.card--wide{grid-column:1/-1;background:var(--petrol);border-color:var(--petrol);display:grid;grid-template-columns:auto 1fr;gap:1.6rem;align-items:center;padding:1.9rem 1.8rem}
@media (hover:hover) and (pointer:fine){
  .card--wide:hover{transform:none;box-shadow:none;border-color:var(--petrol)}
}
.card--wide .card-ico{color:var(--tape-b);margin:0;width:34px;height:34px}
.card--wide h3{color:#fff}
.card--wide p{color:#B4C3DC;margin:0}
@media (max-width:620px){.card--wide{grid-template-columns:1fr;gap:1rem}}

/* ─── 4.7 · Sekcja „O mnie" ───────────────────────────────────────── */
.about{display:grid;grid-template-columns:.82fr 1.18fr;gap:clamp(2rem,5vw,4.5rem);align-items:start}
@media (max-width:900px){.about{grid-template-columns:1fr}}
.about-body>p{margin-bottom:1.15rem}

/* Zdanie wyróżnione większym krojem */
.pull{
  font-family:var(--display);font-size:clamp(1.25rem,2.2vw,1.65rem);font-weight:600;
  line-height:1.3;color:var(--ink);letter-spacing:-.02em;
  border-left:3px solid var(--accent);padding-left:1.4rem;margin:1.9rem 0;
}

/* Lista certyfikatów */
.creds{list-style:none;padding:0;margin:1.8rem 0;display:grid;gap:.55rem}
.creds li{position:relative;padding-left:1.6rem;font-size:.95rem}
.creds li::before{content:"";position:absolute;left:0;top:.62em;width:9px;height:9px;border:1.8px solid var(--accent);border-radius:50%}

/* ─── 4.8 · Przebieg wizyty ───────────────────────────────────────────
   Zamiast numerów 01/02/03 używamy znaczników czasu — pacjent od razu
   widzi, na co idą minuty wizyty.                                     */
.steps{border-top:1px solid var(--line)}
.step{display:grid;grid-template-columns:140px 1fr;gap:clamp(1.2rem,4vw,3.5rem);padding:2rem 0;border-bottom:1px solid var(--line);align-items:baseline}
.step-t{font-family:var(--mono);font-size:.84rem;font-weight:700;color:var(--tape);letter-spacing:.02em;padding-top:.15rem}
.step-t small{display:block;font-weight:400;color:var(--muted);font-size:.71rem;letter-spacing:.09em;text-transform:uppercase;margin-top:.3rem}
.step h3{margin-bottom:.5rem}
.step p{font-size:.97rem}
@media (max-width:640px){
  .step{grid-template-columns:1fr;gap:.55rem;padding:1.6rem 0}
  .step-t small{display:inline;margin-left:.6rem}
}


/* ╔═════════════════════════════════════════════════════════════════════╗
   ║  CZĘŚĆ 5 — cennik.html                                              ║
   ╚═════════════════════════════════════════════════════════════════════╝ */

.price-wrap{border:1px solid var(--line);border-radius:var(--r);overflow:hidden;background:#fff}
table.price{width:100%;border-collapse:collapse}
table.price th,table.price td{padding:1.15rem 1.5rem;text-align:left;border-bottom:1px solid var(--line)}
table.price thead th{font-family:var(--mono);font-size:.67rem;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);background:var(--mist)}
table.price tbody tr:last-child td{border-bottom:0}

.p-name{font-weight:600;color:var(--ink)}
.p-name small{display:block;font-weight:400;font-size:.86rem;color:var(--muted);margin-top:.2rem;line-height:1.45}
.p-time,.p-cost{font-family:var(--mono);white-space:nowrap}
.p-time{color:var(--muted);font-size:.9rem}
.p-cost{font-weight:700;color:var(--ink);font-size:1.06rem;text-align:right}

/* Wyróżniony wiersz — pierwsza wizyta */
tr.is-featured td{background:var(--tape-s)}
tr.is-featured .p-cost{color:var(--tape)}
.tag{display:inline-block;font-family:var(--mono);font-size:.59rem;letter-spacing:.14em;text-transform:uppercase;background:var(--tape);color:#fff;padding:.2rem .5rem;border-radius:4px;margin-left:.6rem;vertical-align:2px}

/* Na telefonie tabela zamienia się w karty — bez przewijania w bok */
@media (max-width:680px){
  /* Sam <table> i <tbody> też muszą przejść na display:block. Bez tego
     przeglądarka opakowuje wierszowe bloki w anonimowe komórki tabeli
     i układ kart potrafi się rozjechać (widoczne w Safari na iOS).   */
  table.price,table.price tbody{display:block;width:100%}
  table.price thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  table.price tr{display:block;border-bottom:1px solid var(--line);padding:1.2rem 1.3rem}
  table.price tr:last-child{border-bottom:0}
  table.price td{display:block;border:0;padding:0}
  .p-time{margin-top:.45rem}
  .p-cost{text-align:left;margin-top:.35rem;font-size:1.25rem}
  /* Cena z nowrap w wąskiej karcie potrafiła wystawać poza ekran. */
  .p-time,.p-cost{white-space:normal}
}

/* Informacje pod tabelą: płatność, odwoływanie wizyt */
.price-meta{display:grid;grid-template-columns:1fr 1fr;gap:1.5rem;margin-top:1.8rem}
@media (max-width:680px){.price-meta{grid-template-columns:1fr}}
/* Nagłówki bloków pod tabelą. Semantycznie to <h2> (poziom niżej niż
   <h1>Cennik), ale domyślny rozmiar h2 sięga 3,1rem i przytłoczyłby
   tabelę — dlatego osobna, mniejsza skala.                           */
.price-meta h2,.price-meta h3,.price-meta h4{
  font-size:clamp(1.05rem,1.4vw,1.2rem);line-height:1.3;margin-bottom:.45rem;
}
.price-meta h2 a{text-decoration:none}
@media (hover:hover) and (pointer:fine){.price-meta h2 a:hover{text-decoration:underline}}

/* Warunek lub uwaga w komórce ceny — łamie nowrap z .p-cost,
   żeby dłuższy tekst nie rozpychał tabeli w bok.                     */
.p-cost small{
  display:block;white-space:normal;font-family:var(--sans);
  font-size:.78rem;font-weight:500;line-height:1.45;
  color:var(--muted);margin-top:.25rem;letter-spacing:0;
}

/* Podsumowanie pod tabelą — co cena obejmuje */
.price-note{
  margin-top:1.1rem;font-size:.88rem;line-height:1.6;color:var(--muted);
  display:flex;flex-wrap:wrap;gap:.35rem 1.4rem;
}
.price-note b{color:var(--ink);font-weight:600}
.price-meta p{font-size:.93rem}


/* ╔═════════════════════════════════════════════════════════════════════╗
   ║  CZĘŚĆ 6 — pierwszawizyta.html                                      ║
   ╚═════════════════════════════════════════════════════════════════════╝ */

/* ─── 6.1 · Baner ilustracyjny pod nagłówkiem ─────────────────────────
   Tło ilustracji jest wtopione dokładnie w --mist, więc pas koloru
   ciągnie się od krawędzi do krawędzi ekranu, a sama scena zostaje
   wyśrodkowana i czytelna. Rozciąganie rysunku na 2500 px zamieniłoby
   go w rozmytą plamę, a postacie stałyby się nieczytelne.            */
.illus-band{
  background:var(--mist);
  overflow:hidden;
  padding-block:clamp(.5rem,2vw,1.5rem);
}
.illus-band img{
  display:block;width:100%;max-width:1120px;height:auto;
  margin-inline:auto;
}
/* Pas przylega bezpośrednio do sekcji o tym samym tle — bez podwójnego
   odstępu między nimi.                                               */
.illus-band + .section--mist{padding-top:clamp(2rem,4vw,3.5rem)}

/* ─── 6.2 · Kafelki „jak się przygotować" ────────────────────────── */
.prep{display:grid;grid-template-columns:repeat(4,1fr);gap:1.6rem}
@media (max-width:900px){.prep{grid-template-columns:1fr 1fr}}
@media (max-width:540px){.prep{grid-template-columns:1fr}}
.prep-item{border-top:2px solid var(--slate);padding-top:1.1rem}
.prep-item h4{margin-bottom:.5rem}
.prep-item p{font-size:.93rem;line-height:1.6}


/* ╔═════════════════════════════════════════════════════════════════════╗
   ║  CZĘŚĆ 7 — rezerwacja.html  ·  REZERWACJA BOOKSY + OPINIE           ║
   ║  Kalendarz własnej roboty został usunięty — terminami zarządza      ║
   ║  wyłącznie Booksy, więc druga siatka dni tylko wprowadzała w błąd.  ║
   ╚═════════════════════════════════════════════════════════════════════╝ */

/* ─── 7.1 · Układ dwukolumnowy: rezerwacja | opinie ───────────────── */
.book-grid{display:grid;grid-template-columns:1.12fr .88fr;gap:clamp(2rem,4.5vw,4rem);align-items:start}
@media (max-width:960px){.book-grid{grid-template-columns:1fr;gap:3.25rem}}
/* Gdy kolumna opinii jest wyłączona (brak podpiętego profilu Google),
   klasę dokłada skrypt.js — kolumna rezerwacji nie zostaje wtedy
   przyklejona do lewej krawędzi ekranu jako wąski słupek.            */
.book-grid.is-solo{grid-template-columns:minmax(0,640px);justify-content:center}
.book-col{min-width:0}
.book-col h1{margin-bottom:1.1rem}
.book-col h2{font-size:clamp(1.7rem,2.7vw,2.3rem);margin-bottom:.85rem}
.book-lede{color:#B4C3DC;font-size:1.02rem;line-height:1.6;margin-bottom:1.9rem;max-width:44ch}

/* ─── 7.2 · Karta rezerwacji ──────────────────────────────────────────
   Jasny panel na ciemnym tle sekcji. Zawiera trzy kroki, jeden duży
   przycisk otwierający okno Booksy i wariant telefoniczny pod spodem. */
.book-card{
  background:var(--paper);border-radius:14px;
  padding:clamp(1.35rem,3vw,2rem);
  color:var(--body);
  box-shadow:0 30px 60px -40px rgba(0,0,0,.6);
}
.book-card__head{
  display:flex;align-items:center;gap:.7rem;
  font-family:var(--mono);font-size:.7rem;font-weight:500;
  letter-spacing:.14em;text-transform:uppercase;color:var(--muted);
  padding-bottom:1rem;margin-bottom:1.25rem;border-bottom:1px solid var(--line);
}
.book-card__head b{color:var(--ink);font-family:var(--sans);font-size:.95rem;letter-spacing:0;text-transform:none;font-weight:600}

/* Trzy kroki rezerwacji — numerowane, bez ikon i bez ozdobników. */
.book-steps{list-style:none;padding:0;margin:0 0 1.6rem;display:grid;gap:.85rem}
.book-steps li{display:grid;grid-template-columns:26px 1fr;gap:.8rem;align-items:start;font-size:.95rem;line-height:1.5}
.book-steps b{
  grid-row:span 2;width:26px;height:26px;border-radius:50%;
  background:var(--tape-s);color:var(--tape);
  font-family:var(--mono);font-size:.74rem;font-weight:500;
  display:grid;place-content:center;
}
.book-card .btn--block{min-height:52px}
.book-alt{margin-top:1rem;font-size:.9rem;line-height:1.6;color:var(--muted);text-align:center}
.book-alt a{font-weight:600;white-space:nowrap}
.book-note{margin-top:1.35rem;font-size:.86rem;line-height:1.6;color:#9CACC8}

/* Kontener, w którym ląduje oryginalny przycisk Booksy.
   Zostaje w drzewie dokumentu (klik programowy musi mieć w co trafić),
   ale jest niewidoczny — rolę widocznego przycisku przejmuje nasz
   własny, dopasowany do reszty strony.
   display:none bywa ignorowane przez skrypty mierzące rozmiar, dlatego
   ukrycie przez odsunięcie poza ekran jest tu bezpieczniejsze.        */
.booksy-host{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);pointer-events:none}

/* ─── 7.3 · Opinie pacjentów ──────────────────────────────────────── */
.rating{display:flex;align-items:baseline;gap:.75rem;margin-bottom:1.5rem;flex-wrap:wrap}
.rating-n{font-family:var(--display);font-size:2.6rem;font-weight:800;color:var(--ink);line-height:1;letter-spacing:-.04em}
.stars{color:var(--accent);letter-spacing:.15em;font-size:1rem}
.rating span{font-family:var(--mono);font-size:.76rem;color:var(--muted)}

.reviews{display:grid;grid-template-columns:repeat(3,1fr);gap:1.15rem}
@media (max-width:940px){.reviews{grid-template-columns:1fr 1fr}}
@media (max-width:640px){.reviews{grid-template-columns:1fr}}
.review{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:1.7rem}
.review blockquote{margin:0 0 1.2rem;font-size:.97rem;line-height:1.62;color:var(--ink)}
.review footer{font-family:var(--mono);font-size:.72rem;letter-spacing:.05em;color:var(--muted)}
.review footer b{display:block;color:var(--ink);font-size:.85rem;font-family:var(--sans);letter-spacing:0;margin-bottom:.15rem}

/* Wariant pionowy — opinie w wąskiej kolumnie obok rezerwacji.
   Podwójna klasa wygrywa z regułami @media powyżej bez !important. */
.reviews.reviews--stack{grid-template-columns:1fr;gap:.85rem}
.reviews--stack .review{padding:1.25rem 1.35rem}
.reviews--stack blockquote{margin-bottom:.9rem;font-size:.93rem}

/* Odnośnik do pełnej listy opinii w Google. */
.opinie-cta{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:1.25rem}
.opinie-cta .btn{font-size:.93rem;padding:.8rem 1.3rem}

/* Miejsce, w które wchodzi zewnętrzny widget opinii (Trustindex itp.).
   Puste i bez ramki — dopóki nic w nie nie wpadnie, nie widać go.    */
#opinieWidget:empty{display:none}
#opinieWidget{margin-top:1.25rem}

/* Opinie na ciemnym tle */
.section--petrol .rating-n{color:#fff}
.section--petrol .stars{color:var(--tape-b)}
.section--petrol .rating span{color:#9CACC8}
.section--petrol .review{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.16)}
.section--petrol .review blockquote{color:#CBD7E8}
.section--petrol .review footer{color:#8FA0BE}
.section--petrol .review footer b{color:#fff}


/* ╔═════════════════════════════════════════════════════════════════════╗
   ║  CZĘŚĆ 8 — kontakt.html                                             ║
   ╚═════════════════════════════════════════════════════════════════════╝ */

/* ─── 8.1 · Układ: mapa + dane ────────────────────────────────────── */
.contact{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(2rem,5vw,3.5rem);align-items:start}
@media (max-width:900px){.contact{grid-template-columns:1fr}}
.map{aspect-ratio:4/3;border-radius:var(--r);overflow:hidden;border:1px solid var(--line);background:var(--mist)}
/* Safari na iOS potrafi rozdmuchać <iframe> do rozmiaru jego zawartości.
   Sztywne 100%/100% plus min-* trzyma go w ramce.                     */
.map iframe{width:100%;height:100%;min-width:100%;min-height:100%;border:0;display:block}
/* Na wysokim, wąskim ekranie proporcja 4:3 dawała pasek mapy bez
   kontekstu — kwadrat czyta się lepiej.                              */
@media (max-width:560px){.map{aspect-ratio:1}}

/* ─── 8.2 · Adres i informacje o dojeździe ────────────────────────── */
.addr{font-style:normal;font-size:1.02rem;line-height:1.75;margin-bottom:1.6rem}
.addr strong{color:var(--ink)}
.addr a{font-weight:600}
.info-list{list-style:none;padding:0;margin:0 0 1.8rem;display:grid;gap:.85rem}
.info-list li{display:grid;grid-template-columns:100px 1fr;gap:1rem;font-size:.94rem;padding-bottom:.85rem;border-bottom:1px solid var(--line)}
.info-list b{font-family:var(--mono);font-size:.69rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);font-weight:500;padding-top:.28em}
@media (max-width:420px){.info-list li{grid-template-columns:1fr;gap:.15rem}}

/* ─── 8.3 · Godziny otwarcia ──────────────────────────────────────────
   Klasę .today dodaje skrypt.js do bieżącego dnia tygodnia.           */
.hours{list-style:none;padding:0;margin:0;font-family:var(--mono);font-size:.87rem}
.hours li{display:flex;justify-content:space-between;gap:1rem;padding:.5rem 0;border-bottom:1px solid var(--line)}
.hours li:last-child{border-bottom:0}
.hours .closed{color:var(--muted)}
.hours .today{color:var(--tape);font-weight:700}

/* ─── 8.4 · Formularz kontaktowy ──────────────────────────────────── */
.form{display:grid;gap:1.1rem;margin-top:2.5rem;padding-top:2.5rem;border-top:1px solid var(--line)}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:1.1rem}
@media (max-width:560px){.form-row{grid-template-columns:1fr}}
.field{display:grid;gap:.4rem}
.field label{font-size:.88rem;font-weight:600;color:var(--ink)}
.field .req{color:var(--tape)}      /* gwiazdka przy polu wymaganym */
.field input,.field select,.field textarea{
  font:inherit;padding:.85rem 1rem;border:1.5px solid var(--line);
  border-radius:8px;background:#fff;color:var(--ink);transition:border-color .18s;width:100%;
  /* Safari na iOS ignoruje border-radius i padding w polach oraz dokłada
     własny cień wewnętrzny, dopóki nie wyzeruje się appearance.       */
  -webkit-appearance:none;appearance:none;
  /* Poniżej 16 px iOS automatycznie przybliża stronę przy kliknięciu
     w pole i po wypełnieniu formularza układ zostaje powiększony.
     max() trzyma 16 px jako podłogę, nie zmieniając wyglądu na dużym
     ekranie.                                                          */
  font-size:max(16px,.98rem);
}
/* Pola daty i godziny w iOS mają własną, niższą wysokość wewnętrzną. */
.field input[type="date"],.field input[type="time"]{min-height:3.1rem}

/* Strzałka listy rozwijanej — po appearance:none iOS nie rysuje żadnej. */
.field select{
  padding-right:2.6rem;
  background-image:url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' fill='none' stroke='%2363748F' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 1rem center;
  background-size:12px 8px;
}
.field textarea{resize:vertical;min-height:130px;line-height:1.6}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--accent);outline:none}
.field input:focus-visible,.field select:focus-visible,.field textarea:focus-visible{outline:2.5px solid var(--accent);outline-offset:2px}

/* Zgoda RODO — wymagana prawnie przy zbieraniu danych */
.consent{display:grid;grid-template-columns:auto 1fr;gap:.75rem;align-items:start;font-size:.86rem;line-height:1.55;color:var(--muted)}
.consent input{width:22px;height:22px;margin-top:.15em;accent-color:var(--tape);flex:none}
/* Cała etykieta jest celem dotyku — checkbox 22 px sam w sobie jest
   za mały jak na palec.                                              */
.consent label,.consent>span{cursor:pointer;padding-block:.35rem}
.form-status{font-size:.92rem;font-weight:600;color:var(--petrol);line-height:1.5}
.form-status:empty{display:none}
.form-status.is-ok{color:var(--petrol);background:var(--tape-s);border-radius:8px;padding:.7rem .95rem}
.form-status.is-err{color:var(--danger);background:var(--danger-s);border-radius:8px;padding:.7rem .95rem}
.form-status.is-err a{color:var(--danger);font-weight:700}

/* Przycisk w trakcie wysyłania */
.form button[type="submit"]:disabled{opacity:.6;cursor:progress}

/* Pułapka na boty — pole niewidoczne dla człowieka, ale obecne w kodzie.
   Celowo NIE display:none: część automatów pomija ukryte w ten sposób
   pola, a takie zostawia wypełnione i sama się zdradza.               */
.hp{
  position:absolute!important;left:-9999px!important;
  width:1px;height:1px;overflow:hidden;opacity:0;
  pointer-events:none;
}


/* ╔═════════════════════════════════════════════════════════════════════╗
   ║  CZĘŚĆ 9 — regulamin.html + polityka-prywatnosci.html               ║
   ║  Układ dokumentu prawnego: spis treści z boku, treść obok.          ║
   ╚═════════════════════════════════════════════════════════════════════╝ */

/* ─── 9.1 · Siatka dokumentu ──────────────────────────────────────────
   To ona robi układ dwukolumnowy. NIE trzeba dokładać float ani
   szerokości procentowych — patrz CZĘŚĆ 11.                           */
.doc{display:grid;grid-template-columns:230px 1fr;gap:clamp(2rem,5vw,4.5rem);align-items:start}
@media (max-width:900px){.doc{grid-template-columns:1fr;gap:2.25rem}}

/* ─── 9.2 · Spis treści ───────────────────────────────────────────────
   Na desktopie przykleja się przy przewijaniu, na telefonie staje się
   kartą nad treścią. Numery § generuje CSS przez licznik.             */
.doc-toc{position:sticky;top:calc(var(--header-h) + 24px)}
@media (max-width:900px){
  .doc-toc{position:static;background:var(--mist);border-radius:var(--r);padding:1.25rem 1.35rem}
}
.doc-toc h2{font-family:var(--mono);font-size:.67rem;font-weight:500;letter-spacing:.15em;text-transform:uppercase;color:var(--muted);margin-bottom:.9rem}
.doc-toc ol{list-style:none;padding:0;margin:0;counter-reset:toc;display:grid;gap:.1rem}
.doc-toc a{
  display:grid;grid-template-columns:2.1rem 1fr;gap:.35rem;align-items:baseline;
  font-size:.89rem;line-height:1.35;color:var(--body);text-decoration:none;
  padding:.42rem .55rem;border-radius:7px;transition:color .16s,background .16s;
}
.doc-toc a::before{counter-increment:toc;content:"§" counter(toc);font-family:var(--mono);font-size:.74rem;color:var(--muted);transition:color .16s}
@media (hover:hover) and (pointer:fine){
  .doc-toc a:hover{color:var(--ink);background:#fff}
  .doc-toc a:hover::before{color:var(--tape)}
}
@media (hover:hover) and (pointer:fine) and (max-width:900px){
  .doc-toc a:hover{background:var(--paper)}
}

/* ─── 9.3 · Treść dokumentu ───────────────────────────────────────────
   68ch to komfortowa długość wiersza do czytania długiego tekstu.     */
.doc-body{max-width:68ch;min-width:0}
.doc-meta{
  font-family:var(--mono);font-size:.74rem;letter-spacing:.04em;color:var(--muted);
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  padding:.85rem 0;margin-bottom:clamp(2rem,4vw,3rem);
  display:flex;flex-wrap:wrap;gap:.45rem 1.7rem;
}
.doc-body>section{margin-bottom:clamp(2rem,3.5vw,2.9rem);scroll-margin-top:calc(var(--header-h) + 24px)}
.doc-body>section:last-child{margin-bottom:0}
.doc-body h2{
  font-size:clamp(1.18rem,1.9vw,1.48rem);line-height:1.25;margin-bottom:1rem;
  display:grid;grid-template-columns:auto 1fr;gap:.75rem;align-items:baseline;
}
.doc-body h2 .par{font-family:var(--mono);font-size:.78rem;font-weight:500;color:var(--tape);letter-spacing:.02em}
.doc-body p{margin-bottom:.85rem;font-size:.99rem}
.doc-body p:last-child{margin-bottom:0}

/* ─── 9.4 · Numerowane ustępy ─────────────────────────────────────── */
.rules{list-style:none;counter-reset:rule;padding:0;margin:0;display:grid;gap:.75rem}
.rules li{counter-increment:rule;display:grid;grid-template-columns:2rem 1fr;gap:.45rem;font-size:.99rem;line-height:1.65}
.rules li::before{content:counter(rule) ".";font-family:var(--mono);font-size:.85rem;color:var(--muted);padding-top:.12em}
.rules strong{color:var(--ink);font-weight:600}


/* ╔═════════════════════════════════════════════════════════════════════╗
   ║  CZĘŚĆ 10 — POMOCNICZE                                              ║
   ║  Drobne klasy do doraźnych poprawek. Nazwy zaczynają się od u-,     ║
   ║  żeby od razu było widać, że to nie komponent.                      ║
   ╚═════════════════════════════════════════════════════════════════════╝ */

/* .tel-link nie ma własnego wyglądu — to uchwyt dla skrypt.js (moduł 7).
   Numer telefonu w takim odnośniku podstawia się z USTAWIEŃ, więc jego
   zmiana to jedna linijka w skrypcie zamiast poprawek w dziewięciu
   plikach HTML.                                                       */

.u-left{text-align:left}
.u-center{text-align:center}

/* Ograniczenie szerokości bloku tekstu — zamiast width w procentach.
   Procent zależy od rodzica i rozjeżdża się przy każdej zmianie
   układu; ch trzyma stałą długość wiersza niezależnie od kontenera. */
.u-narrow{max-width:44ch}
.u-wide{max-width:68ch}

/* Nagłówek pośredni — mniejszy od h2, większy od h3. Płynny, więc
   nie rozjedzie się na telefonie tak jak stała wartość w px.        */
.u-h-md{font-size:clamp(1.4rem,2.4vw,1.9rem);line-height:1.2}

/* Odstępy pionowe */
.u-mt-0{margin-top:0}
.u-mt-1{margin-top:1rem}
.u-mt-2{margin-top:2rem}
.u-mb-0{margin-bottom:0}
.u-mb-1{margin-bottom:1rem}
.u-mb-2{margin-bottom:2rem}