/* ============================================================
   Reha Medica — strona główna
   DNA wizualne przywrócone z oryginalnej strony (zweryfikowane z motywu):
   paleta ciepłego brązu + ivory/beż, serif Ogg (pliki z archiwum), Poppins.
   Kolory pochodzą z wp-content/themes/rehamedica/style.css.
   ============================================================ */

/* --- fonty self-hosted (zero żądań do stron trzecich: wydajność + RODO) ---
   WŁASNA PARA KROJÓW: Literata (nagłówki) + Inter (tekst).
   Decyzja właściciela 2026-08-05 (wariant A z podglądu `prototyp/czcionki.html`):
   serwis psychoterapeutyczny dostaje własną parę — **Literata + Inter**.

   Literata powstała do długiego czytania z ekranu, więc szeryf nie cienieje przy
   mniejszych stopniach — to była wada Instrument Serif, który jest krojem display
   i ma tylko wagę 400. Inter ma duży x-height i szerokie światła, przez co akapit
   czyta się lżej niż w Source Sans 3.

   Oba kroje są ZMIENNE (zakres 300–700 w jednym pliku), OFL, self-hostowane
   i zsubsetowane do znaków realnie używanych: łacina podstawowa + polskie
   diakrytyki. Razem 91 KB — więcej niż poprzednie 40 KB, ale poprzednie niosły
   po jednej wadze, a te cały zakres. Zero żądań do stron trzecich (RODO). --- */
@font-face{
  font-family:'Literata';
  font-style:normal;
  font-weight:300 700;
  font-display:swap;
  src:url('../assets/fonts/literata-latin.woff2') format('woff2');
  unicode-range:U+0020-007E, U+00A0-00FF, U+00B7, U+00D7, U+2013-2014, U+2018-2019, U+201C-201E, U+2022, U+2026, U+20AC;
}
@font-face{
  font-family:'Literata';
  font-style:normal;
  font-weight:300 700;
  font-display:swap;
  src:url('../assets/fonts/literata-latin-ext.woff2') format('woff2');
  unicode-range:U+0104-0107, U+0118-011B, U+0141-0144, U+015A-015B, U+0179-017C;
}
@font-face{
  font-family:'Inter';
  font-style:normal;
  font-weight:300 700;
  font-display:swap;
  src:url('../assets/fonts/inter-latin.woff2') format('woff2');
  unicode-range:U+0020-007E, U+00A0-00FF, U+00B7, U+00D7, U+2013-2014, U+2018-2019, U+201C-201E, U+2022, U+2026, U+20AC;
}
@font-face{
  font-family:'Inter';
  font-style:normal;
  font-weight:300 700;
  font-display:swap;
  src:url('../assets/fonts/inter-latin-ext.woff2') format('woff2');
  unicode-range:U+0104-0107, U+0118-011B, U+0141-0144, U+015A-015B, U+0179-017C;
}

:root{
  /* kolory zweryfikowane ze starej strony */
  --color-brand-dark:#362d24;    /* najgłębszy brąz (stopka, overlay) — pochodna #483d32 */
  --color-brand:#483d32;         /* dark brown brand — nagłówki UI, przyciski, NFZ */
  --color-brand-hover:#5b4a3a;   /* hover (rozjaśnienie brązu) */
  --color-brand-taupe:#a69e9e;   /* taupe — WYŁĄCZNIE linie, dividery, dekoracja. Na tekście daje 2,5:1 (Stage 7) */
  --color-text-muted:#736a63;    /* tekst pomocniczy: labelki, liczniki, numery — 5,9:1 na ivory, AA */
  --color-bg-ivory:#fcfaf1;      /* tło strony */
  --color-bg-beige:#f4f1e8;      /* tło sekcji — podniesione bliżej kremu (lżejszy pas) */
  --color-bg-beige-2:#ece4d7;    /* beż mocniejszy — lżejszy */
  --color-text:#33302a;          /* tekst podstawowy — ciepły ciemnobrąz zamiast zimnego #212529; ~11:1 na ivory, AA */
  --color-text-2:#5c544a;        /* tekst drugorzędny — cieplejszy; ~6,8:1 na ivory, AA */
  --color-line:#eadfce;          /* linie/obramowania (ciepłe, delikatniejsze) */
  --color-sand:#c3a878;          /* ciepły piaskowy akcent (editorial) */
  --color-cream:#f8f5ea;         /* kremowy panel — lżejszy */
  --color-white:#fff;

  --font-display:'Literata',Georgia,'Times New Roman',serif;
  --font-body:'Inter',Arial,Helvetica,system-ui,sans-serif;
  --fw-regular:400;
  /* Nagłówki cieńsze od tekstu — Literata jest zmienna 300–700, więc da się
     zejść poniżej 400. Poprzedni krój (Instrument Serif) miał tylko wagę 400
     i takiej możliwości nie było. Decyzja właściciela 2026-08-05. */
  --fw-display:300;
  --fw-medium:500;
  --fw-semibold:600;
  --fw-bold:700;

  /* Skala zaokrągleń — świadomie dwa poziomy:
     0  = język edytorski (panele, przyciski, chipy, karty) — domyślny;
     --radius-img = zdjęcia i kadry fotograficzne;
     pigułka (100px) TYLKO tam, gdzie jest funkcją: FAB, pole wyszukiwarki, przycisk-telefon. */
  --radius-img:14px;
  --radius-pill:100px;

  --wrap:1180px;
  --space-section:130px;   /* rytm między sekcjami — hojny „oddech" (edytorska marka) */
}

*{box-sizing:border-box;margin:0;padding:0}
/* scroll-padding = najwyższy stan nagłówka (138px w stanie górnym), by element
   sfokusowany klawiaturą lub cel kotwicy nigdy nie chował się pod nagłówkiem — WCAG 2.4.11 */
html{font-size:100%;scroll-padding-top:144px}
/* Duże ekrany: treść nie tonie w pustych marginesach i nie wygląda drobno.
   Skalujemy kontener i bazowy font w górę — px breakpointy, więc laptopy (≤1499px)
   pozostają bez zmian, a menu dostępności (inline font-size na html) ma pierwszeństwo. */
@media (min-width:1500px){:root{--wrap:1280px;font-size:16.5px}}
@media (min-width:2000px){:root{--wrap:1360px;font-size:17.5px}}
@media (min-width:2560px){:root{--wrap:1440px;font-size:18px}}
body{
  font-family:var(--font-body);
  font-size:1.125rem;              /* 18px */
  font-weight:var(--fw-regular);
  line-height:1.6;
  color:var(--color-text);
  background:var(--color-bg-ivory);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
/* height:auto jest konieczne: <img> ma atrybuty width/height (rezerwują miejsce, brak skoków layoutu),
   bez tego atrybut height wygrywa nad aspect-ratio i obrazek rośnie do natywnej wysokości */
img{max-width:100%;height:auto;display:block}
/* ikony inline SVG — skalują się przez font-size (jak dawne ikony fontowe) i dziedziczą kolor */
.icon-sprite{position:absolute;width:0;height:0;overflow:hidden}
.ico{width:1em;height:1em;flex:0 0 auto;fill:none;stroke:currentColor;vertical-align:-.125em;pointer-events:none}
a{color:inherit;text-decoration:none}
ul{list-style:none}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 34px}

/* nagłówki edytorskie — Literata */
h1,h2,h3,h4{font-family:var(--font-display);font-weight:var(--fw-display);line-height:1.1;letter-spacing:.25px;color:var(--color-text);text-wrap:balance}

.skip-link{position:absolute;left:16px;top:-48px;background:var(--color-brand);color:#fff;padding:10px 18px;z-index:200;transition:top .2s}
.skip-link:focus{top:12px}
a:focus-visible,button:focus-visible,[tabindex]:focus-visible{outline:3px solid var(--color-brand);outline-offset:3px;border-radius:2px}

/* --- elementy pomocnicze --- */
.kicker{font-family:var(--font-body);font-size:.8125rem;font-weight:var(--fw-bold);line-height:1.2;letter-spacing:.18em;text-transform:uppercase;color:var(--color-brand);margin-bottom:16px}
.kicker--light{color:#e6dbc8;margin-bottom:20px}
.section{padding:var(--space-section) 0}
.section--beige{background:var(--color-bg-beige)}
.section__head{max-width:640px;margin-bottom:64px}
.section__title{font-size:clamp(2.55rem,3.8vw,3.4rem);letter-spacing:.25px;line-height:1.04}
h1,h2,h3,.section__title,.svc__title,.svc__iname,.kons__h,.kons__atitle,.kons__rname,.reviews__title,.rv-summary__label,.hero__title{text-wrap:balance;overflow-wrap:break-word}
.link-strong{display:inline-flex;align-items:center;gap:8px;font-family:var(--font-body);font-size:1.0625rem;font-weight:var(--fw-semibold);color:var(--color-brand);border-bottom:1px solid var(--color-line);padding-bottom:3px;transition:border-color .2s}
.link-strong:hover{border-color:var(--color-brand)}
/* narożniki edytorskie — cienkie klamry L w 4 rogach (bez dodatkowego markupu) */
.cornerframe{--cf:var(--color-brand);--cfa:18px;--cft:1.5px;padding:22px 26px}
.cornerframe{
  background-image:
    linear-gradient(var(--cf),var(--cf)),linear-gradient(var(--cf),var(--cf)),
    linear-gradient(var(--cf),var(--cf)),linear-gradient(var(--cf),var(--cf)),
    linear-gradient(var(--cf),var(--cf)),linear-gradient(var(--cf),var(--cf)),
    linear-gradient(var(--cf),var(--cf)),linear-gradient(var(--cf),var(--cf));
  background-repeat:no-repeat;
  background-size:
    var(--cfa) var(--cft),var(--cft) var(--cfa),
    var(--cfa) var(--cft),var(--cft) var(--cfa),
    var(--cfa) var(--cft),var(--cft) var(--cfa),
    var(--cfa) var(--cft),var(--cft) var(--cfa);
  background-position:
    left top,left top,
    right top,right top,
    left bottom,left bottom,
    right bottom,right bottom;
}

/* --- przyciski --- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font-family:var(--font-body);font-weight:var(--fw-semibold);font-size:1.0625rem;line-height:1.2;white-space:nowrap;
  padding:14px 28px;border:1px solid transparent;cursor:pointer;transition:none;min-height:48px;letter-spacing:0}
.btn--sm{padding:10px 18px;font-size:.92rem;min-height:44px}
.btn--outline{border-color:var(--color-brand);color:var(--color-brand);background:transparent}
.btn--cream{background:#f3ecdf;color:var(--color-brand)}
/* outline na ciemnym tle — para z .btn--cream: główna akcja kremowa, drugorzędna obrysowana */
.btn--outline-light{background:transparent;color:#fff;border-color:rgba(255,255,255,.38)}

/* ============================================================ HEADER (fixed, przezroczysty nad hero → solidny na scroll) */
.site-header{position:fixed;top:0;left:0;right:0;z-index:100;color:#f3ede2;background:var(--color-brand);
  transition:background .45s cubic-bezier(.65,0,.35,1),box-shadow .45s cubic-bezier(.65,0,.35,1)}
.site-header.is-scrolled{background:var(--color-brand-dark);box-shadow:0 10px 30px -18px rgba(0,0,0,.72);border-bottom:1px solid rgba(255,255,255,.06)}
/* Header zlewa się z hero na starcie na KAŻDEJ stronie z ciemnym hero (główna + podstrony:
   .hero/.shero/.uhero) — przezroczysty z delikatnym gradientem dla czytelności napisów.
   Po scrollu wraca solidny brąz (reguła wyżej). Wyjątek: strony BEZ hero (.no-hero,
   np. stuby placówek o jasnym tle) — header zostaje solidny. */
.site-header:not(.is-scrolled){background:linear-gradient(180deg,rgba(30,22,14,.55) 0%,rgba(30,22,14,.22) 55%,rgba(30,22,14,0) 100%)}
.site-header:not(.is-scrolled) .topstrip::after{opacity:0}
.no-hero .site-header:not(.is-scrolled){background:var(--color-brand)}
.no-hero .site-header:not(.is-scrolled) .topstrip::after{opacity:1}

/* utility row — cicha */
.topstrip{position:relative;z-index:1;overflow:hidden;height:38px;
  transition:height .45s cubic-bezier(.65,0,.35,1),opacity .45s cubic-bezier(.65,0,.35,1)}
/* linia jako przycinany element (nie border na zmieniającej wysokość skrzynce) → zwija się czysto, bez łamania/sub-pikseli */
.topstrip::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:rgba(255,255,255,.12);pointer-events:none}
.site-header.is-scrolled .topstrip{height:0;opacity:0}
.topstrip__inner{display:flex;justify-content:center;align-items:center;gap:18px;height:38px;font-size:.82rem;color:#fff}
.topstrip__item{display:inline-flex;align-items:center;gap:8px;color:#fff}
.topstrip__item .ico{color:#fff;font-size:.9em}
.topstrip a{color:#cbbca6;transition:color .2s}
.topstrip a:hover{color:#f3ede2}
.topstrip__sep{width:1px;height:12px;background:rgba(255,255,255,.24)}

/* main navigation */
.headerbar{position:relative;z-index:1;display:flex;align-items:center;gap:36px;height:96px;transition:height .45s cubic-bezier(.65,0,.35,1)}
.site-header.is-scrolled .headerbar{height:74px}
.logo{display:inline-flex;align-items:center;flex:0 0 auto}
.logo img{height:102px;width:auto;max-width:none;flex:0 0 auto;transition:height .45s cubic-bezier(.65,0,.35,1)}
.site-header.is-scrolled .logo img{height:60px}
.headerbar__rule{width:1px;height:44px;background:rgba(255,255,255,.2);flex:0 0 auto;transition:height .45s cubic-bezier(.65,0,.35,1)}
.site-header.is-scrolled .headerbar__rule{height:34px}
.nav{margin-right:auto}
.nav > ul{display:flex;gap:26px;align-items:center}
.nav a{font-weight:var(--fw-semibold);font-size:1.0625rem;line-height:1.2;letter-spacing:0;color:#fff;padding:8px 1px;white-space:nowrap}
/* ---- rozwijane submenu — otwierane NA KLIK, jasny panel edytorski (jak w źródle) ---- */
.nav__top{font-family:var(--font-body);font-weight:var(--fw-semibold);font-size:1.0625rem;line-height:1.2;color:#fff;background:none;border:0;padding:8px 1px;cursor:pointer;display:inline-flex;align-items:center;gap:7px;white-space:nowrap}
@media(hover:hover){.nav__top:hover{color:#e8ddcb}}
.nav__chev{width:.72em;height:.72em;transition:transform .28s cubic-bezier(.33,0,.15,1);margin-top:2px}
.nav__item--sub{position:relative}
.nav__sub{position:absolute;top:calc(100% + 16px);left:-16px;min-width:304px;
  background:var(--color-bg-ivory);border-radius:3px;padding:6px 0;
  box-shadow:0 32px 66px -26px rgba(38,26,14,.55),0 4px 14px -8px rgba(38,26,14,.3);
  display:flex;flex-direction:column;align-items:stretch;
  visibility:hidden;pointer-events:none;transform:translateY(10px);
  transition:transform .3s cubic-bezier(.33,0,.15,1), visibility .3s; z-index:40}
.nav__sub::before{content:"";position:absolute;left:26px;top:-7px;width:14px;height:14px;background:var(--color-bg-ivory);transform:rotate(45deg)}
.nav__item--sub.is-open > .nav__sub{visibility:visible; pointer-events:auto; transform:translateY(0)}
.nav__item--sub.is-open .nav__chev{transform:rotate(180deg)}
.nav__item--sub.is-open .nav__top{color:#e8ddcb}
.nav__sub a{position:relative;display:block;text-align:left;padding:13px 26px;font-size:1rem;font-weight:var(--fw-regular);color:var(--color-text);white-space:nowrap;border-bottom:1px solid var(--color-line);transition:background .16s ease,color .16s ease,padding-left .2s ease}
.nav__sub a::after{display:none}
.nav__sub li:last-child a{border-bottom:0}
.nav__sub a:focus-visible{background:rgba(72,61,50,.055);color:var(--color-brand)}
@media(hover:hover){.nav__sub a:hover{background:rgba(72,61,50,.05);color:var(--color-brand);padding-left:32px}}
.nav__sub a[aria-current="page"]{color:var(--color-brand);font-weight:var(--fw-semibold);padding-left:34px}
.nav__sub a[aria-current="page"]::before{content:"";position:absolute;left:20px;top:50%;transform:translateY(-50%);width:10px;height:2px;background:var(--color-sand)}
.headerbar__cta{display:flex;align-items:center;gap:22px}
/* desktop: para CTA (94 372 14 51 + Umów wizytę) nieco większa dla wagi (mobile ma własne reguły niżej) */
.headerbar__cta .btn{padding:13px 26px;font-size:1rem;min-height:50px}
/* Tuż nad progiem menu mobilnego header jest ciasny — zagęszczamy odstępy,
   inaczej „Umów wizytę" i lupa wypadają poza ekran (na 1280px było o 9px za mało). */
@media(min-width:75.0625em) and (max-width:87.5em){
  .headerbar{gap:24px}
  .nav > ul{gap:18px}
  .headerbar__cta{gap:14px}
}
.phone-link{display:inline-flex;align-items:center;gap:9px;font-weight:400;font-size:1.05rem;color:#fff;white-space:nowrap;transition:color .2s}
.phone-link .ico{color:#e8ddcb;font-size:1em}
.phone-link:hover{color:#fff}
.nav__mobile{display:none}
.logo__compact{display:none}
.header-call{display:none}
.header-survey{display:none}
.callfab{display:none}
.nav__close{display:none}
.burger{display:none;flex-direction:column;justify-content:center;align-items:center;gap:6px;background:none;border:0;padding:10px;margin-left:auto;min-height:50px;min-width:50px}
.burger span{width:27px;height:1.5px;background:#fff;display:block;transition:.2s}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(8px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-8px) rotate(-45deg)}

.btn__arrow{display:inline-block;margin-left:3px;transition:transform .28s ease}

/* ============================================================ HERO (kompozycja referencyjna: karta placówek lewy-góra · zdjęcie prawa · biały cut z nagłówkiem lewy-dół · CTA prawy-dół) */
/* FULL-WIDTH: zdjęcie od krawędzi do krawędzi, bez cięć i odstępów; obraz wchodzi POD
   przezroczysty header (zlanie się z hero). --gx = margines do siatki treści strony. */
.hero{padding:0;background:var(--color-bg-ivory);overflow-x:clip}
.hero > .wrap{max-width:none;padding:0}
.hero__shell{position:relative;width:100%;height:clamp(700px,96vh,1010px);border-radius:0;overflow:hidden;background:var(--color-brand);
  /* --gx = lewa krawędź siatki treści (jak .wrap: --wrap 1180 + padding 34) → tytuł równa się z sekcjami niżej i omija pasek „Reha Beauty" */
  --gx:max(34px,calc((100% - var(--wrap)) / 2 + 34px))}
.hero__inner{display:contents}

.hero__stage{position:absolute;inset:0;z-index:0;overflow:hidden}
.hero__slide{position:absolute;inset:0;background-size:cover;background-position:50% 42%;opacity:0;transition:opacity .9s ease}
.hero__slide.is-active{opacity:1;animation:heroKen 8s ease-out both}
@keyframes heroKen{from{transform:scale(1.06)}to{transform:scale(1)}}
/* Nakładka na tło = brąz marki jak w źródle (.home-slide:after #483d32).
   Źródło ma jednolite ~62%; my dajemy gradient tej samej barwy: lżej u góry (jaśniej,
   zdjęcie oddycha), mocniej u dołu, gdzie leży biały tekst — dzięki temu WCAG AA jest
   spełnione niezależnie od jasności slajdu. */
/* Delikatny cień: miękka poświata przesunięta bardziej do ŚRODKA (nie zepchnięta w bok),
   wygaszana na krawędziach — budynek wyraźny na całej szerokości. Lekki welon u góry i
   śladowo u dołu. Czytelność białego tekstu niosą text-shadow na .hero__title/.hero__sub. */
.hero__tint{position:absolute;inset:0;z-index:1;
  background:
    radial-gradient(135% 110% at 42% 44%,rgba(24,16,9,.46) 0%,rgba(24,16,9,.26) 40%,rgba(24,16,9,.12) 66%,rgba(24,16,9,.08) 82%),
    linear-gradient(180deg,rgba(24,16,9,.34) 0%,rgba(24,16,9,.1) 26%,rgba(20,14,8,.1) 74%,rgba(20,14,8,.2) 100%)}

/* premium karta placówek — pływa przy prawej krawędzi siatki treści (gutter --gx) */
.hero__card{position:absolute;top:clamp(150px,17vh,184px);right:var(--gx);width:404px;z-index:3;
  background:var(--color-bg-ivory);border-radius:0;padding:26px 30px 22px;
  box-shadow:0 26px 54px -24px rgba(20,12,5,.62);border:1px solid rgba(255,255,255,.55)}
.hcard__label{font-family:var(--font-body);font-size:.8125rem;font-weight:var(--fw-bold);letter-spacing:.16em;text-transform:uppercase;color:var(--color-text-muted);margin-bottom:12px}
/* taby placówek — świadoma siatka 3+2 (bez sieroty) */
.hcard__tabs{display:grid;grid-template-columns:repeat(3,1fr);gap:2px 6px;border-bottom:1px solid var(--color-line);margin-bottom:14px}
.hcard__tabs button{font-family:var(--font-body);font-size:.98rem;font-weight:var(--fw-semibold);color:var(--color-text-2);background:none;border:0;padding:9px 6px;cursor:pointer;position:relative;transition:color .2s;min-height:42px;text-align:left;justify-self:start}
.hcard__tabs button::after{content:"";position:absolute;left:6px;right:6px;bottom:-1px;height:2px;background:var(--color-brand);transform:scaleX(0);transform-origin:left;transition:transform .24s}
.hcard__tabs button:hover{color:var(--color-brand)}
.hcard__tabs button[aria-selected="true"]{color:var(--color-brand);font-weight:600}
.hcard__tabs button[aria-selected="true"]::after{transform:scaleX(1)}
.hcard__tabs button:focus-visible{outline:2px solid var(--color-brand);outline-offset:2px;border-radius:4px}
.hcard__body{min-height:112px}
.hcard__empty{font-size:1.02rem;color:var(--color-text-2);line-height:1.5;padding:12px 0}
.hcard__city{font-family:var(--font-display);font-weight:var(--fw-display);font-size:1.72rem;color:var(--color-text);margin-bottom:10px;letter-spacing:.25px}
.hcard__addr{font-size:1.05rem;color:var(--color-text);line-height:1.4;margin-bottom:14px}
.hcard__row{display:flex;align-items:center;gap:11px;font-size:1.02rem;color:var(--color-text-2);margin-bottom:10px}
.hcard__row svg{color:var(--color-brand);flex:0 0 auto}
.hcard__row a{color:var(--color-text-2);word-break:break-word}
.hcard__row a:hover{color:var(--color-brand)}
.hcard__foot{display:flex;align-items:center;gap:18px;margin-top:8px;flex-wrap:wrap}
.hcard__foot[hidden]{display:none}  /* stan pusty karty: bez wybranego miasta brak CTA */
.hcard__foot .btn{padding:13px 24px}
.hcard__link{font-size:.82rem;font-weight:var(--fw-bold);letter-spacing:.1em;text-transform:uppercase;color:var(--color-brand);display:inline-flex;align-items:center;gap:6px;min-height:24px;padding:2px 0}
.hcard__link span{transition:transform .24s}
.hcard__link:hover span{transform:translateX(4px)}
.hcard__nfz{display:flex;align-items:center;gap:10px;margin-top:16px;padding-top:14px;border-top:1px solid var(--color-line);font-size:.9rem;color:var(--color-text-2)}
.hcard__nfz img{height:20px;width:auto}

/* Treść hero = nakładka nad zdjęciem (bez wycinka): biały tekst wyrównany do lewej
   krawędzi siatki treści, zakotwiczony u dołu — nad mocniejszą częścią nakładki. */
/* treść wyśrodkowana w pionie — ten sam poziom niezależnie od długości tytułu
   (krótki tytuł placówki i długi tytuł homepage lądują na tej samej wysokości) */
.hero__cut{position:absolute;left:var(--gx);right:auto;top:0;bottom:0;width:min(560px,44vw);max-width:600px;box-sizing:border-box;z-index:2;
  background:none;border-radius:0;padding:clamp(124px,15vh,152px) 24px clamp(56px,8vh,88px) 0;
  display:flex;flex-direction:column;justify-content:center}
.hero__title{font-family:var(--font-display);font-weight:var(--fw-display);font-size:clamp(2.5rem,4.2vw,4rem);line-height:1.03;letter-spacing:.25px;color:#fff;max-width:16ch;overflow-wrap:normal;word-break:normal;text-shadow:0 2px 30px rgba(14,8,3,.75),0 1px 4px rgba(14,8,3,.6);transition:opacity .5s ease,transform .5s ease}
.hero__title.is-swapping{opacity:0;transform:translateY(10px)}
.hero__sub{font-family:var(--font-body);font-size:1.08rem;font-weight:var(--fw-regular);line-height:1.55;color:#fff;max-width:46ch;margin-top:16px;text-shadow:0 1px 4px rgba(14,8,3,.7),0 2px 22px rgba(14,8,3,.7);transition:opacity .5s ease .05s,transform .5s ease .05s}
.hero__sub.is-swapping{opacity:0;transform:translateY(10px)}
/* CTA + wskaźniki w jednym, zawsze widocznym rzędzie — przyciski na jasnym: kremowy + outline-light */
.hero__ctarow{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-top:26px}
.hero__cta{min-height:54px;padding:15px 28px}
.hero__cut .btn--brand{background:#fff;color:var(--color-brand);box-shadow:0 18px 40px -22px rgba(0,0,0,.55)}
.hero__cut .btn--outline{border-color:rgba(255,255,255,.6);color:#fff;background:rgba(255,255,255,.08)}
/* kropki: biały wskaźnik na nakładce; pasek 4px, cel dotykowy 24px (WCAG 2.5.8) */
.hero__dots{display:flex;gap:10px;margin-top:20px}
.hero__dot{width:30px;height:24px;border:0;background:none;cursor:pointer;padding:10px 0;
  background-clip:content-box;background-color:rgba(255,255,255,.5);border-radius:3px;
  transition:background-color .3s,width .3s}
.hero__dot[aria-current="true"]{background-color:#fff;width:42px}
.hero__dot:hover{background-color:rgba(255,255,255,.8)}
.hero__dot:focus-visible{outline:2px solid #fff;outline-offset:3px}

/* zagięty róg strony — ankieta satysfakcji */
.dogear{position:fixed;right:0;bottom:0;z-index:90;width:142px;height:142px;text-decoration:none}
.dogear__fold{position:absolute;inset:0;background:var(--color-brand);
  clip-path:polygon(100% 0,100% 100%,0 100%);filter:drop-shadow(-6px -6px 11px rgba(0,0,0,.34))}
.dogear__label{position:absolute;right:12px;bottom:30px;width:116px;text-align:center;transform:rotate(-45deg);transform-origin:center;
  color:#fff;font-family:var(--font-body);font-size:.72rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;line-height:1.35;pointer-events:none;text-shadow:0 1px 3px rgba(0,0,0,.45)}
.dogear:focus-visible .dogear__fold{outline:3px solid #fff;outline-offset:-8px}

/* boczna zakładka — siostrzana marka Reha Beauty */
.beautytab{position:fixed;left:0;top:34%;z-index:88;display:inline-flex;align-items:center;gap:9px;
  background:linear-gradient(180deg,var(--color-brand) 0%,var(--color-brand-hover) 100%);color:#f6efe3;
  padding:16px 10px;border-radius:0 12px 12px 0;box-shadow:5px 5px 16px rgba(0,0,0,.28);
  text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px;
  writing-mode:vertical-rl;transform:rotate(180deg);font-family:var(--font-body);font-size:.78rem;font-weight:600;
  letter-spacing:.1em;text-transform:uppercase;transition:padding-left .25s ease,background .25s ease}
.beautytab:hover{padding-left:16px}
.beautytab .ico{font-size:.85em;color:#f0e7d5}
.beautytab:focus-visible{outline:3px solid #fff;outline-offset:2px}

/* pływający przycisk telefonu (mobile) — pojawia się zamiast wstążki ankiety */
/* Pływający telefon (mobile) — sama słuchawka, bez napisu: ikona niesie komunikat.
   Koło, nie pigułka — przy jednej ikonie pigułka rozjeżdżałaby się w owal.
   Cień jest konieczny: element pływa nad dowolną treścią (zdjęcia, beż, biel)
   i bez odseparowania gubi się na jasnym tle. */
.callfab{align-items:center;justify-content:center;width:56px;height:56px;border-radius:50%;
  background:var(--color-brand);color:#fff;text-decoration:none;
  box-shadow:0 6px 18px -4px rgba(32,20,10,.45);
  transition:background .2s ease,transform .2s ease,opacity .2s ease;opacity:.94}
.callfab .ico{width:28px;height:28px;stroke-width:1.6}
.callfab:hover{background:var(--color-brand-hover);transform:translateY(-2px);opacity:1}
.callfab:active{transform:translateY(0)}
.callfab:focus-visible{outline:3px solid #fff;outline-offset:3px;opacity:1}
/* link ankiety w headerze (mobile) — zamiast numeru telefonu */
.header-survey{align-items:center;gap:8px;color:#fff;font-weight:600;font-size:.95rem;white-space:nowrap;min-height:48px;padding:0 2px}
.header-survey .ico{color:#e8ddcb;font-size:1.35em}
/* pokazuj tylko tam, gdzie jest margines lewy — nie nachodzi na treść (link zostaje w stopce) */
@media(max-width:75em){.beautytab{display:none}}

/* wspólne przyciski */
.btn--brand{background:var(--color-brand);color:#fff}

/* --- motion --- */
@keyframes heroUp{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:translateY(0)}}
.hero__card,.hero__cut{opacity:0;animation:heroUp .8s cubic-bezier(.2,.7,.2,1) both}
.hero__cut{animation-delay:.1s}
.hero__card{animation-delay:.25s}

/* ============================================================ BODŹCE — potrzeby pacjenta (ciemny akcent) */
/* JASNA sekcja (feedback): kremowe tło, ciemny tekst, klamry narożne (cięcie) widoczne */
.needs{background:var(--color-cream)}
.needs__grid{display:grid;grid-template-columns:.82fr 1.18fr;gap:clamp(40px,5vw,84px);align-items:start}
.needs__h{color:var(--color-text);font-size:clamp(2.3rem,3.35vw,3rem);text-decoration:underline;text-decoration-color:var(--color-brand-taupe);text-decoration-thickness:2px;text-underline-offset:14px}
.needs__lead{font-family:var(--font-body);font-size:1.1rem;color:var(--color-text-2);font-weight:var(--fw-regular);line-height:1.62;margin:18px 0 28px;max-width:36ch}
/* lista w klamrach — cięcie edytorskie, dobrze widoczne na jasnym tle */
.needs__list{list-style:none;margin:0;display:flex;flex-direction:column;--cfa:22px;--cft:2px}
.needs__item{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:20px 6px;border-bottom:1px solid var(--color-line);color:var(--color-text);text-decoration:none;min-height:44px}
.needs__item:first-child{border-top:1px solid var(--color-line)}
.needs__txt{display:flex;flex-direction:column;gap:6px;min-width:0}
.needs__name{font-family:var(--font-body);font-weight:var(--fw-medium);letter-spacing:.1px;font-size:clamp(1.2rem,1.55vw,1.5rem);color:var(--color-text);line-height:1.25}
.needs__to{font-family:var(--font-body);font-size:.78rem;font-weight:var(--fw-semibold);letter-spacing:.1em;text-transform:uppercase;color:var(--color-text-muted)}
.needs__arrow{color:var(--color-brand);opacity:.5;flex:0 0 auto;font-size:1.15rem}
/* Bez wariantów :hover — lista usług w placówce nie reaguje na kursor.
   Fokus z klawiatury zostaje: obramowanie plus podświetlenie nazwy i strzałki,
   inaczej osoba nawigująca tabulatorem nie wie, gdzie stoi (WCAG 2.2 AA). */
.needs__item:focus-visible .needs__name,
.needs__item:focus-visible .needs__to{color:var(--color-brand)}
.needs__item:focus-visible .needs__arrow{opacity:1}
.needs__item:focus-visible{outline:2px solid var(--color-brand);outline-offset:-2px}
.needs .kicker--light{color:var(--color-brand)}
.needs__cta{background:var(--color-brand);color:#fff;border-color:var(--color-brand)}
.needs__cta:hover{background:var(--color-brand-hover)}
.needs__note{font-family:var(--font-body);font-size:.92rem;color:var(--color-text-muted);margin-top:24px}
.needs__note a{color:var(--color-brand);font-weight:var(--fw-semibold);border-bottom:1px solid rgba(72,61,50,.4);padding-bottom:1px;transition:border-color .2s}
.needs__note a:hover,.needs__note a:focus-visible{border-color:var(--color-brand)}

/* ============================================================ USŁUGI — editorial explorer */
.svc__head{margin-bottom:clamp(22px,2.6vw,34px)}
.svc__headrow{display:grid;grid-template-columns:1fr auto;gap:16px 56px;align-items:end}
.svc__h{margin:0}
.svc__lead{font-family:var(--font-body);font-size:1.08rem;color:var(--color-text);font-weight:var(--fw-regular);line-height:1.6;max-width:40ch;justify-self:end}

.svc__stage{position:relative;display:grid;grid-template-columns:repeat(12,1fr);align-items:center;margin-bottom:clamp(44px,4.5vw,64px)}
/* shrink-safety (jak w .news/.kons) — brak rozpychania przy powiększeniu tekstu (WCAG 1.4.10) */
.svc__media,.svc__panel{min-width:0}
.svc__title,.svc__desc{overflow-wrap:break-word;word-break:break-word}
.svc__media{grid-column:1/8;grid-row:1;position:relative;height:clamp(400px,42vw,560px)}
.svc__frame{position:absolute;left:-20px;bottom:-20px;width:66%;height:66%;background:var(--color-bg-beige-2);z-index:0}
.svc__img{position:absolute;inset:0;background-size:cover;background-position:center;opacity:0;transform:scale(1);transition:opacity .5s ease}
.svc__img.is-active{opacity:1;transform:scale(1.03);transition:opacity .5s ease,transform 7s ease}
.svc__panel{grid-column:8/13;grid-row:1;z-index:2;background:var(--color-cream);padding:clamp(34px,3vw,50px);box-shadow:0 34px 74px -48px rgba(54,45,36,.5);margin-left:clamp(-72px,-4vw,-44px)}
.svc__count{font-family:var(--font-body);font-size:.82rem;letter-spacing:.14em;color:var(--color-text-muted)}
.svc__count b{font-weight:600;color:var(--color-brand)}
.svc__title{font-family:var(--font-display);font-weight:var(--fw-display);font-size:clamp(2.25rem,3.25vw,3rem);line-height:1.08;min-height:2.16em;color:var(--color-text);margin:14px 0 0;transition:opacity .34s ease,transform .34s ease}
.svc__rule{display:block;width:48px;height:2px;background:var(--color-brand);opacity:.5;margin:20px 0}
.svc__desc{font-family:var(--font-body);font-size:1.05rem;color:var(--color-text-2);font-weight:var(--fw-regular);line-height:1.62;max-width:44ch;min-height:6.3em;margin-bottom:26px;transition:opacity .34s ease,transform .34s ease}
.svc__panel.is-swapping .svc__title,.svc__panel.is-swapping .svc__desc{opacity:0;transform:translateY(12px)}
.svc__cta{display:inline-flex;align-items:center;gap:9px;font-family:var(--font-body);font-weight:600;color:var(--color-brand);font-size:1rem;position:relative;padding-bottom:3px}
.svc__cta::after{content:"";position:absolute;left:0;bottom:0;height:2px;width:100%;background:var(--color-brand);transform:scaleX(0);transform-origin:left;transition:transform .3s cubic-bezier(.16,1,.3,1)}
.svc__cta:hover::after,.svc__cta:focus-visible::after{transform:scaleX(1)}
.svc__cta span{transition:transform .3s cubic-bezier(.16,1,.3,1)}
.svc__cta:hover span,.svc__cta:focus-visible span{transform:translateX(4px)}

.svc__index{display:grid;grid-template-columns:repeat(3,1fr);align-items:stretch;border-top:1px solid var(--color-line);background:#fff}
.svc__item{position:relative;display:flex;align-items:center;gap:16px;text-align:left;background:transparent;border:0;border-bottom:1px solid var(--color-line);border-right:1px solid var(--color-line);padding:26px 24px;cursor:pointer;color:var(--color-text);min-height:78px}
.svc__index .svc__item:nth-child(3n){border-right:0}
.svc__iline{display:none}
.svc__inum{font-family:var(--font-body);font-size:.82rem;font-weight:600;letter-spacing:.08em;color:var(--color-text-muted);flex:0 0 auto;align-self:center;transition:color .2s}
.svc__iname{font-family:var(--font-body);font-weight:var(--fw-medium);letter-spacing:.1px;font-size:clamp(1.12rem,1.4vw,1.4rem);line-height:1.3;flex:1;color:var(--color-text);transition:color .2s}
.svc__iarrow{color:var(--color-brand);opacity:0;transition:opacity .2s;flex:0 0 auto;align-self:center;font-size:1.1rem}
/* hover/aktywna — tylko zmiana koloru tekstu (+ pojawia się strzałka) */
.svc__item:hover .svc__iname,.svc__item:focus-visible .svc__iname,.svc__item.is-current .svc__iname,
.svc__item:hover .svc__inum,.svc__item:focus-visible .svc__inum,.svc__item.is-current .svc__inum{color:var(--color-brand)}
.svc__item:hover .svc__iarrow,.svc__item:focus-visible .svc__iarrow,.svc__item.is-current .svc__iarrow{opacity:1}
.svc__item:focus-visible{outline:2px solid var(--color-brand);outline-offset:-2px}

.svc__avail{margin-top:32px;font-size:1rem;color:var(--color-text-2);font-weight:var(--fw-regular)}
.svc__avail a{color:var(--color-brand);font-weight:500;border-bottom:1px solid var(--color-line)}

/* ============================================================ KONSULTACJE — ciemny rozdział edytorski */
.kons{background:var(--color-brand-dark);color:#e8ddcb}
.kons__head{max-width:56ch;margin-bottom:clamp(42px,4.5vw,64px)}
.kicker--light{color:#e6dbc8;margin-bottom:20px}
.kons__h{color:var(--color-white);font-size:clamp(2.45rem,4.2vw,3.7rem);line-height:1.06;margin:0}
.kons__lead{font-family:var(--font-body);font-size:1.14rem;color:#d7c9b2;font-weight:var(--fw-regular);line-height:1.62;margin-top:20px;max-width:46ch}

/* odwrócony układ względem Usług: treść po lewej (lista = bohater), zdjęcie po prawej */
.kons__body{display:grid;grid-template-columns:repeat(12,1fr);column-gap:clamp(28px,3.5vw,60px);row-gap:clamp(28px,3.2vw,44px);align-items:start}
/* shrink-safety (jak w .news) — zapobiega rozpychaniu przy powiększeniu tekstu (WCAG 1.4.10) */
.kons__figure,.kons__active,.kons__list,.kons__row,.kons__rname{min-width:0}
.kons__atitle,.kons__adesc,.kons__rname{overflow-wrap:break-word;word-break:break-word}
.kons__figure{grid-column:8/13;grid-row:1/3;position:relative;margin:0}
.kons__figframe{position:absolute;left:-20px;bottom:-20px;width:56%;height:50%;border:1px solid rgba(255,255,255,.3);opacity:.6;z-index:0}
/* Rama jest pionowa (0,72:1), zdjęcie poziome (1,50:1) → widać 48% szerokości.
   Przy 72% szyld „REHA medica" był rozcinany na pół. 100% = szyld w całości. */
.kons__figure img{position:relative;z-index:1;display:block;width:100%;height:clamp(430px,46vw,600px);object-fit:cover;object-position:100% 50%}

.kons__active{grid-column:1/8;grid-row:1;padding-top:2px}
.kons__acount{font-family:var(--font-body);font-size:.82rem;letter-spacing:.14em;color:#c2b69d;text-transform:uppercase}
.kons__acount b{color:#f4ecdd;font-weight:600}
.kons__atitle{font-family:var(--font-display);font-weight:var(--fw-display);font-size:clamp(2.1rem,2.9vw,2.8rem);color:var(--color-white);line-height:1.1;margin:18px 0 0;transition:opacity .34s ease,transform .34s ease}
.kons__adesc{font-family:var(--font-body);font-size:1.08rem;color:#d7c9b2;font-weight:var(--fw-regular);line-height:1.62;max-width:44ch;margin:18px 0 28px;transition:opacity .34s ease,transform .34s ease}
.kons__active.is-swapping .kons__atitle,.kons__active.is-swapping .kons__adesc{opacity:0;transform:translateY(10px)}
.kons__cta{display:inline-flex;align-items:center;gap:9px;font-family:var(--font-body);font-weight:600;color:#f0e7d5;font-size:1rem;position:relative;padding-bottom:3px}
.kons__cta::after{content:"";position:absolute;left:0;bottom:0;height:2px;width:100%;background:#f0e7d5;transform:scaleX(0);transform-origin:left;transition:transform .3s cubic-bezier(.16,1,.3,1)}
.kons__cta:hover::after,.kons__cta:focus-visible::after{transform:scaleX(1)}
.kons__cta span{transition:transform .3s cubic-bezier(.16,1,.3,1)}
.kons__cta:hover span,.kons__cta:focus-visible span{transform:translateX(4px)}

.kons__list{grid-column:1/8;grid-row:2;display:flex;flex-direction:column;border-top:1px solid rgba(255,255,255,.15)}
.kons__row{position:relative;display:flex;align-items:center;gap:18px;text-align:left;background:transparent;border:0;border-bottom:1px solid rgba(255,255,255,.15);padding:22px 18px;cursor:pointer;color:#e8ddcb;min-height:44px}
.kons__rline{display:none}
.kons__rnum{font-family:var(--font-body);font-size:.85rem;font-weight:600;letter-spacing:.08em;color:#ac9e84;flex:0 0 auto;transition:color .2s}
.kons__rname{font-family:var(--font-body);font-weight:var(--fw-medium);letter-spacing:.1px;font-size:clamp(1.2rem,1.55vw,1.5rem);line-height:1.28;flex:1;color:#ede3d2;transition:color .2s}
.kons__rarrow{color:#f0e7d5;opacity:0;transition:opacity .2s;flex:0 0 auto}
/* hover/aktywna — tylko zmiana koloru tekstu (+ pojawia się strzałka) */
.kons__row:hover .kons__rname,.kons__row:focus-visible .kons__rname,.kons__row.is-current .kons__rname{color:#fff}
.kons__row:hover .kons__rnum,.kons__row:focus-visible .kons__rnum,.kons__row.is-current .kons__rnum{color:#f0e7d5}
.kons__row:hover .kons__rarrow,.kons__row:focus-visible .kons__rarrow,.kons__row.is-current .kons__rarrow{opacity:1}
.kons__row:focus-visible{outline:2px solid #f0e7d5;outline-offset:-2px}

.kons__avail{margin-top:clamp(38px,4vw,56px);font-size:.98rem;color:#b6aa92}
.kons__avail a{color:#f0e7d5;font-weight:500;border-bottom:1px solid rgba(255,255,255,.28)}

/* ============================================================ NEWSLETTER (UI) */
/* biel po beżu Aktualności — rozbija dwa pasy beżu pod rząd i daje oddech przed ciemną stopką */
.newsletter{background:var(--color-white)}
.newsletter__inner{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center}
.newsletter__text,.newsletter__form{position:relative;z-index:1}
.newsletter__lead{font-family:var(--font-body);font-size:1.1rem;color:var(--color-text-2);font-weight:var(--fw-regular);line-height:1.6;margin-top:16px;max-width:46ch}
/* Dwa pola (e-mail + opcjonalny telefon) → przycisk schodzi pod formularz.
   Przy jednym polu przycisk stał w rzędzie z inputem; przy dwóch wyglądałby,
   jakby dotyczył tylko pierwszego z nich. */
.field--nl{display:flex;flex-direction:column;gap:9px}
.field--nl + .field--nl{margin-top:16px}
.field--nl label{font-size:.84rem;font-weight:500;color:var(--color-text-2);letter-spacing:.02em}
.field__opt{font-weight:400;color:var(--color-text-muted)}
.field--nl input{width:100%;min-width:0;font-family:var(--font-body);font-size:1rem;padding:13px 16px;border:1px solid var(--color-line);background:#fff;color:var(--color-text);min-height:52px}
.field--nl input:focus{outline:none;border-color:var(--color-brand);box-shadow:0 0 0 3px rgba(72,61,50,.14)}
.field__hint{font-size:.84rem;color:var(--color-text-muted);line-height:1.45;margin:0}
.newsletter__submit{margin-top:22px;min-height:52px}
.consent--nl{display:flex;gap:11px;align-items:flex-start;font-size:.9rem;color:var(--color-text-2);line-height:1.5;margin-top:18px}
.consent--nl[hidden]{display:none}
.consent--nl input{margin-top:0;width:24px;height:24px;accent-color:var(--color-brand);flex:0 0 auto;cursor:pointer}
.consent--nl a{color:var(--color-brand);text-decoration:underline}
.newsletter__note{margin-top:14px;font-size:.92rem;color:var(--color-brand);font-weight:500;line-height:1.5}
/* podziękowanie po zapisie — czytelne, edytorskie, z płynnym pojawieniem */
.newsletter__success{display:flex;flex-direction:column;align-items:flex-start;gap:12px;max-width:36ch;opacity:0;transform:translateY(14px);transition:opacity .55s ease,transform .55s ease}
.newsletter__success.is-in{opacity:1;transform:none}
.newsletter__success-ico{color:var(--color-brand);flex:0 0 auto}
.newsletter__success-h{font-family:var(--font-display);font-weight:var(--fw-display);font-size:clamp(1.8rem,2.6vw,2.3rem);line-height:1.08;color:var(--color-text);margin:0;letter-spacing:.25px}
.newsletter__success-t{font-family:var(--font-body);font-size:1.08rem;line-height:1.55;color:var(--color-text-2);margin:0}
@media (prefers-reduced-motion:reduce){.newsletter__success{transition:none;opacity:1;transform:none}}

/* ============================================================ O REHA MEDICA (kompozycja fotograficzna) */
.about__grid{display:grid;grid-template-columns:1.1fr .9fr;gap:60px;align-items:center}
/* jedno zdjęcie — mniejsze ujęcie recepcji usunięte jako zbędne,
   razem z paddingiem, który był pod nie zarezerwowany */
.about__figure{position:relative;margin:0}
.about__figure img.about__main{width:100%;height:clamp(360px,34vw,480px);object-fit:cover;border-radius:var(--radius-img)}
.about__body .section__title{margin-bottom:20px}
.about__body p{font-family:var(--font-body);font-size:1.12rem;color:var(--color-text-2);font-weight:var(--fw-regular);margin-bottom:24px;max-width:46ch}


/* ============================================================ OPINIE PACJENTÓW — otwarta kompozycja (podsumowanie + slider dużych kart) */
:root{--rv-cardw:clamp(286px,21vw,312px);--rv-gap:22px}
.reviews{background:var(--color-bg-ivory);padding:clamp(44px,5vw,72px) 0 clamp(60px,7vw,96px);margin-top:calc(-1 * clamp(40px,5vw,64px));position:relative;z-index:2;overflow-x:clip}
.reviews__inner{display:grid;grid-template-columns:clamp(228px,18vw,260px) minmax(0,1fr);gap:clamp(24px,2.6vw,44px);align-items:center;padding:0 clamp(42px,3.4vw,56px)}

/* LEWE — podsumowanie (nie karta, powściągliwe) */
.rv-summary__eyebrow{margin-bottom:16px}
.rv-summary__label{font-family:var(--font-display);font-weight:var(--fw-display);font-size:clamp(1.9rem,2.25vw,2.35rem);line-height:1;color:var(--color-brand);letter-spacing:.01em}
.rv-summary__stars{color:var(--color-brand);font-size:clamp(1.1rem,1.35vw,1.35rem);letter-spacing:3px;margin:12px 0 10px;line-height:1}
.rv-summary__score{font-family:var(--font-display);font-weight:var(--fw-display);font-size:clamp(1.65rem,2vw,2.05rem);color:var(--color-text);line-height:1;display:flex;align-items:baseline;gap:3px}
.rv-summary__of{font-size:.5em;color:var(--color-text-2);font-family:var(--font-body);font-weight:400}
.rv-summary__count{color:var(--color-text-2);margin-top:7px;font-size:.98rem;font-weight:400}
.rv-summary__brand{display:flex;align-items:center;gap:8px;margin-top:18px;font-size:.86rem;color:var(--color-text-2)}
.rv-summary__brand img{flex:0 0 auto;width:18px;height:18px}
.rv-summary__cta{display:inline-flex;align-items:center;gap:8px;margin-top:18px;color:var(--color-brand);font-weight:500;font-size:.95rem;position:relative;padding-bottom:3px}
.rv-summary__cta::after{content:"";position:absolute;left:0;bottom:0;height:2px;width:100%;background:var(--color-brand);transform:scaleX(0);transform-origin:left;transition:transform .28s cubic-bezier(.16,1,.3,1)}
.rv-summary__cta:hover::after,.rv-summary__cta:focus-visible::after{transform:scaleX(1)}
.rv-summary__arw{transition:transform .28s cubic-bezier(.16,1,.3,1)}
.rv-summary__cta:hover .rv-summary__arw,.rv-summary__cta:focus-visible .rv-summary__arw{transform:translateX(4px)}

/* PRAWE — slider dużych kart */
.rv-slider{position:relative;min-width:0}
.rv-track{display:flex;gap:var(--rv-gap);overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;list-style:none;margin:0;padding:14px 2px;-ms-overflow-style:none;scrollbar-width:none;overscroll-behavior-x:contain}
.rv-track::-webkit-scrollbar{display:none}
.rv-track.is-dragging{scroll-snap-type:none;scroll-behavior:auto;cursor:grabbing}
/* karty opinii — płaskie panele edytorskie, nie pudełka z cieniem:
   linia zamiast obwódki+cienia, ostre rogi jak reszta paneli na stronie */
.rv-card{flex:0 0 var(--rv-cardw);box-sizing:border-box;scroll-snap-align:start;background:var(--color-white);
  border:1px solid var(--color-line);border-radius:0;padding:clamp(24px,1.9vw,30px);
  display:flex;flex-direction:column;min-height:clamp(300px,24vw,340px);min-width:0;
  transition:border-color .24s ease}
@media(hover:hover){.rv-card:hover{border-color:var(--color-brand-taupe)}}
.rv-card__head{display:flex;align-items:flex-start;gap:13px;margin-bottom:14px}
.rv-card__avatar{width:46px;height:46px;border-radius:50%;display:grid;place-items:center;font-family:var(--font-body);font-weight:600;font-size:1rem;color:#fff;background:var(--rv-av,#8a7358);flex:0 0 auto}
.rv-card__meta{min-width:0;flex:1}
.rv-card__author{font-weight:600;color:var(--color-text);font-size:clamp(1.05rem,1.2vw,1.16rem);line-height:1.25}
.rv-card__date{font-size:.9rem;color:var(--color-text-2);margin-top:2px}
.rv-card__src{flex:0 0 auto;margin-top:1px}
.rv-card__stars{color:var(--color-brand);letter-spacing:2px;font-size:1.02rem;margin-bottom:12px}
.rv-card__text{color:var(--color-text-2);font-size:clamp(1rem,1.05vw,1.08rem);line-height:1.56;font-weight:400;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:6;overflow:hidden}
.rv-card.is-expanded .rv-card__text{-webkit-line-clamp:unset;overflow:visible}
.rv-card__text{margin-bottom:16px}
.rv-card__more{align-self:flex-start;margin-top:auto;background:none;border:0;color:var(--color-brand);font-weight:500;font-size:.92rem;cursor:pointer;padding:4px 0;min-height:24px;position:relative}
.rv-card__more::after{content:"";position:absolute;left:0;bottom:0;height:1px;width:100%;background:var(--color-brand);transform:scaleX(0);transform-origin:left;transition:transform .24s}
.rv-card__more:hover::after,.rv-card__more:focus-visible::after{transform:scaleX(1)}

/* strzałki — okrągłe białe, na krawędziach slidera */
.rv-arrow{position:absolute;top:50%;transform:translateY(-50%);width:44px;height:44px;border-radius:50%;border:1px solid var(--color-line);background:#fff;color:var(--color-brand);display:grid;place-items:center;cursor:pointer;box-shadow:0 10px 26px -16px rgba(54,45,36,.45);transition:background .2s,border-color .2s,box-shadow .2s,opacity .2s;z-index:4}
.rv-arrow svg{transition:transform .2s}
.rv-arrow--prev{left:-16px}
.rv-arrow--next{right:-16px}
.rv-arrow:hover{background:var(--color-bg-beige);border-color:var(--color-brand-taupe)}
.rv-arrow--next:hover svg{transform:translateX(2px)}
.rv-arrow--prev:hover svg{transform:translateX(-2px)}
.rv-arrow:active{box-shadow:0 6px 16px -12px rgba(54,45,36,.6)}
.rv-arrow:disabled{opacity:0;pointer-events:none}
.rv-arrow:focus-visible{outline:3px solid var(--color-brand);outline-offset:3px}

.visually-hidden{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* responsywność modułu opinii */
@media(max-width:60em){
  .reviews__inner{grid-template-columns:1fr;gap:30px;align-items:start}
  .rv-summary{max-width:none}
  .rv-summary__stars{margin:14px 0 10px}
}
@media(max-width:47.9375em){
  :root{--rv-cardw:82vw;--rv-gap:16px}
  .reviews__inner{padding:0 0 0 40px}
  .rv-summary{padding-right:20px}
  .rv-card{min-height:344px}
  .rv-arrow{width:44px;height:44px}
  .rv-arrow--prev{left:6px}
  .rv-arrow--next{right:8px}
}

/* ============================================================ FINANSOWANIE / NFZ — jasna (biała) sekcja */
.fin{background:var(--color-white)}
.fin__grid{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(40px,5vw,80px);align-items:center}
.fin__title{color:var(--color-text);font-size:clamp(2.35rem,3.35vw,3rem);margin-top:6px}
.fin__lead{font-family:var(--font-body);font-size:1.12rem;color:var(--color-text-2);font-weight:var(--fw-regular);line-height:1.62;margin:18px 0 24px;max-width:46ch}
.fin__cta{font-size:1.05rem}
.fin__aside{justify-self:end;width:100%;max-width:380px}
.fin__nfz{display:flex;flex-direction:column;align-items:flex-start;gap:16px;padding:0}
.fin__nfzlogo{height:42px;width:auto}
.fin__nfztext{font-family:var(--font-body);font-size:1rem;color:var(--color-text-2);line-height:1.55;margin:0}
.fin__eu{margin-top:clamp(38px,4vw,58px);padding-top:30px;border-top:1px solid var(--color-line);display:flex;align-items:center;gap:clamp(20px,3vw,40px);flex-wrap:wrap}
.fin__eubar{height:46px;width:auto;max-width:100%}
.fin__eunote{font-family:var(--font-body);font-size:.92rem;color:var(--color-text-2);line-height:1.5;max-width:42ch;margin:0}

/* ============================================================ AKTUALNOŚCI (edytorialnie: feature + lista) */
.news{display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:stretch}
/* shrink-safety: elementy gridu muszą móc zwęzić się poniżej min-content, a długie tytuły
   zawijać — inaczej przy powiększeniu tekstu (menu dostępności) sekcja rozpycha stronę (WCAG 1.4.10). */
.news__feature,.news__list,.news__item{min-width:0}
.news__title,.news__title a{overflow-wrap:break-word;word-break:break-word}
.news__feature{border-top:2px solid var(--color-brand);padding-top:26px;display:flex;flex-direction:column}
.news__thumb{display:block;margin-bottom:24px;overflow:hidden;border-radius:var(--radius-img)}
.news__thumb img{width:100%;aspect-ratio:16/10;object-fit:cover;transition:transform .6s ease}
.news__thumb:hover img{transform:scale(1.03)}
.news__list{display:flex;flex-direction:column}
.news__list .news__item{padding:22px 0;border-top:1px solid var(--color-line)}
.news__list .news__item:first-child{border-top:0;padding-top:0}
.news__cat{display:inline-block;font-family:var(--font-body);font-size:.8rem;font-weight:var(--fw-semibold);letter-spacing:.09em;text-transform:uppercase;padding:5px 12px;margin-bottom:14px}
.news__cat--eu{background:var(--color-bg-beige-2);color:var(--color-brand)}
.news__cat--partner{background:var(--color-brand);color:#f3ede2}
/* UWAGA: nie używać --color-bg-beige — to dokładnie tło sekcji .section--beige,
   chip stawał się niewidoczny. Biel odróżnia go od „Projekt UE" (beż) i „Partnerstwo" (brąz). */
.news__cat--news{background:var(--color-white);color:var(--color-text-2)}
.news__date{display:block;font-family:var(--font-body);font-size:.9rem;color:var(--color-text-2);margin-bottom:10px}
.news__feature .news__title{font-size:2.2rem;line-height:1.2;margin-bottom:16px}
.news__list .news__title{font-size:1.45rem;line-height:1.28}
.news__title a:hover{color:var(--color-brand)}
.news__more{align-self:flex-start;margin-top:auto;padding-top:24px}

/* ============================================================ FOOTER (ciemny ciepły brąz) */
.site-footer{background:var(--color-brand-dark);color:#cdbfab}
/* główna */
.footer__top{display:grid;grid-template-columns:1.7fr 1fr 1fr 1.3fr;gap:48px;padding:72px 0 8px}
.footer__brand img{height:84px;width:auto;margin-bottom:18px}
.footer__desc{color:#b3a693;font-size:.98rem;font-weight:var(--fw-regular);line-height:1.6;margin-bottom:22px;max-width:34ch}
.footer__call{display:inline-flex;align-items:center;gap:9px;font-family:var(--font-body);font-size:1.15rem;font-weight:500;color:#fff;border:1px solid #584a3c;border-radius:var(--radius-pill);padding:10px 20px;transition:background .2s,border-color .2s}
.footer__call .ico{color:#e8ddcb}
.footer__call:hover{background:#4a3d31;border-color:#6b5a49;color:#fff}
/* social media w stopce (Facebook, Instagram) */
.footer__social{display:flex;gap:12px;margin-top:18px}
.footer__social a{display:inline-flex;align-items:center;justify-content:center;width:42px;height:42px;border:1px solid #584a3c;border-radius:50%;color:#efe4d5;transition:background .2s,color .2s,border-color .2s}
.footer__social a:hover{background:#4a3d31;border-color:#6b5a49;color:#fff}
.footer__social .ico{width:20px;height:20px}
.footer__h{font-family:var(--font-body);font-size:.9rem;font-weight:var(--fw-bold);letter-spacing:.1em;text-transform:uppercase;color:#fff;margin-bottom:20px}
.footer__nav ul{display:flex;flex-direction:column;gap:12px}
.footer__nav a{display:inline-block;padding-bottom:2px;transition:color .2s}
.footer__nav a:hover,.footer__nav a:focus-visible{color:#fff}
.site-footer a{color:#cdbfab;transition:color .2s}
.site-footer a:hover{color:#fff}
/* C. legal */
.footer__bottom{display:flex;justify-content:space-between;align-items:center;gap:12px 20px;flex-wrap:wrap;margin-top:56px;padding:24px 0 34px;border-top:1px solid #4a3d31;font-size:.9rem;color:#b3a693}
/* Podpis wykonawcy — dyskretny, bez podkreślenia (linki prawne obok są podkreślone).
   Kolory z istniejącej hierarchii stopki: #b3a693 = 5,64:1, #cdbfab = 7,47:1.
   NIE przyciemniać — przy #8f8474 wychodziło 3,67:1, poniżej progu AA. */
.footer__by{margin:0;color:#b3a693}
.footer__by a{display:inline-flex;align-items:center;min-height:24px;color:#cdbfab;transition:color .2s}
.footer__by a:hover,.footer__by a:focus-visible{color:#fff}
.footer__legal{display:flex;gap:22px;flex-wrap:wrap}
.footer__legal a{display:inline-flex;align-items:center;min-height:24px;text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px;transition:color .2s}
.footer__legal a:hover,.footer__legal a:focus-visible{color:#fff}

/* ============================================================ RESPONSIVE
   Progi w em, nie w px — CELOWO. em w media query odnosi się do domyślnej wielkości
   pisma w przeglądarce, więc gdy użytkownik ją powiększy (dostępność), układ przełącza
   się na mobilny tak samo jak przy wąskim ekranie. Przy px header zostawał jednorzędowy
   i wypadały z niego: „Kontakt", telefon, „Umów wizytę" i wyszukiwarka — bez możliwości
   dotarcia do nich (naruszenie WCAG 1.4.4).
   Przy domyślnych 16px: 75em = 1200px (próg menu mobilnego), 48em = 768px. */
@media(max-width:75em){
  :root{--space-section:90px}
  /* mobilne menu — pełnoekranowa nakładka (przebudowane od zera) */
  .site-header .nav{position:fixed;inset:0;z-index:200;display:flex;flex-direction:column;align-items:center;
    width:100%;height:100dvh;margin:0;background:transparent;
    padding:22px 24px 40px;overflow-y:auto;overscroll-behavior:contain;
    opacity:0;visibility:hidden;pointer-events:none;transform:translateY(-8px);
    transition:opacity .34s ease,transform .4s cubic-bezier(.33,0,.15,1),visibility .4s,background-color .34s ease}
  /* tło menu tylko w stanie otwartym → zamykanie szukania nie błyska ciemnym fullscreenem (baza jest przezroczysta) */
  .site-header .nav--open{background:var(--color-brand-dark);opacity:1;visibility:visible;pointer-events:auto;transform:none}
  /* treść menu widoczna WYŁĄCZNIE gdy menu otwarte → nie miga przy zamykaniu wyszukiwarki */
  .site-header .nav--open ul,.site-header .nav--open .nav__mobile,.site-header .nav--open .nav__close{visibility:visible}
  .headerbar{gap:16px;height:88px}
  .site-header.is-scrolled .headerbar{height:74px}
  .headerbar__rule{display:none}
  /* mobilny header: logo (lewo) · numer tel · lupa · menu (prawo) */
  .header-call{display:none}
  .headerbar__cta{display:flex;align-items:center;order:2;margin-left:auto;gap:18px;padding:0}
  .headerbar__cta > .btn{display:none}
  .headerbar__cta .header-phone{font-size:.95rem;min-height:44px;padding:9px 14px}
  .headerbar__cta .icon-btn{width:48px;height:48px;font-size:1.5rem}
  .logo{order:1}
  .logo img{height:90px}
  .site-header.is-scrolled .logo img{height:60px}
  .burger{order:3;margin-left:0}
  .nav__close{display:inline-flex;visibility:hidden;position:absolute;top:20px;right:20px;width:46px;height:46px;align-items:center;justify-content:center;
    background:rgba(255,255,255,.08);border:0;border-radius:50%;color:#fff;font-size:1.5rem;cursor:pointer;transition:background .2s,visibility .34s}
  @media(hover:hover){.nav__close:hover{background:rgba(255,255,255,.16)}}
  .nav__close:focus-visible{outline:3px solid #e8ddcb;outline-offset:2px}
  .nav > ul{flex-direction:column;align-items:stretch;gap:0;width:100%;max-width:380px;margin:56px auto 0;padding:0;visibility:hidden;transition:visibility .34s}
  .nav ul li{display:block;width:100%;margin:0;padding:0;list-style:none}
  .nav ul a{display:flex;align-items:center;width:100%;padding:16px 4px;border-bottom:1px solid rgba(255,255,255,.12);font-size:1.18rem;font-weight:var(--fw-semibold);color:#efe4d5;min-height:54px}
  .nav ul a::after{display:none}
  .nav ul a:focus-visible{color:#fff}
  @media(hover:hover){.nav ul a:hover{color:#fff}}
  /* akordeon submenu na mobile — spójne pozycje pełnej szerokości */
  .nav__top{display:flex;align-items:center;justify-content:space-between;width:100%;padding:16px 4px;border:0;border-bottom:1px solid rgba(255,255,255,.12);background:none;font-family:var(--font-body);font-size:1.18rem;font-weight:var(--fw-semibold);color:#efe4d5;min-height:54px;cursor:pointer;text-align:left}
  .nav__top .nav__chev{width:.8em;height:.8em;transition:transform .3s ease;flex:0 0 auto;margin-left:12px;opacity:.7}
  .nav__item--sub.is-open .nav__top{color:#fff}
  .nav__item--sub.is-open .nav__top .nav__chev{transform:rotate(180deg);opacity:1}
  .nav__item--sub::after{display:none}
  /* Płynny akordeon: grid 0fr→1fr animuje do dokładnej wysokości treści (bez skoku max-height).
     PIERWSZA ŚCIEŻKA MUSI BYĆ min-content, NIE auto. Przy `auto` przeglądarka przelicza ją
     w trakcie interpolacji fr i wiersz z przyciskiem puchnie z 55px do 138px, spychając
     submenu o 86px w dół, po czym wraca — to był widoczny „skok" przy otwieraniu.
     Zmierzone: auto → skok 86px, min-content → skok 0px. */
  .nav .nav__item--sub{display:grid;grid-template-rows:min-content 0fr;transition:grid-template-rows .36s cubic-bezier(.4,0,.2,1)}
  .nav .nav__item--sub.is-open{grid-template-rows:min-content 1fr}
  .nav__sub{position:static;transform:none;visibility:visible;pointer-events:auto;min-width:0;width:100%;min-height:0;margin:0;background:none;border:0;border-radius:0;box-shadow:none;padding:0;gap:0;z-index:auto;overflow:hidden}
  .nav__sub::before{display:none}
  .nav .nav__sub a{display:block;width:100%;padding:12px 4px 12px 18px;font-size:1rem;font-weight:var(--fw-regular);color:#c3b39d;border-bottom:1px solid rgba(255,255,255,.07);min-height:0;white-space:normal;line-height:1.4}
  .nav .nav__sub li:last-child a{border-bottom:0}
  .nav .nav__sub a:focus-visible{color:#fff;background:rgba(255,255,255,.04)}
  .nav .nav__sub a[aria-current="page"]{color:#fff;font-weight:var(--fw-semibold);padding-left:28px}
  .nav .nav__sub a[aria-current="page"]::before{content:"";position:absolute;left:4px;top:50%;transform:translateY(-50%);width:10px;height:2px;background:var(--color-sand)}
  .nav__mobile{display:flex;visibility:hidden;flex-direction:column;gap:14px;width:100%;max-width:440px;margin:26px auto 0;padding:0;transition:visibility .34s}
  .nav__mobile .btn{width:100%;justify-content:center;padding:16px}
  .nav__mobile .btn--cream{color:var(--color-brand-dark)}
  .nav__mobile .phone-link{display:inline-flex;justify-content:center;align-items:center;gap:9px;min-height:52px;font-size:1.1rem;border:1px solid rgba(255,255,255,.22);border-radius:var(--radius-pill)}
  .nav__beauty{display:inline-flex;justify-content:center;align-items:center;gap:9px;min-height:52px;font-size:1.05rem;font-weight:600;letter-spacing:.02em;color:#efe4d5;border:1px solid rgba(255,255,255,.22);border-radius:var(--radius-pill);text-decoration:none;transition:background .2s,color .2s}
  .nav__beauty .ico{font-size:.8em;color:#e8ddcb}
  .nav__beauty:focus-visible{background:rgba(255,255,255,.08);color:#fff}
  @media(hover:hover){.nav__beauty:hover{background:rgba(255,255,255,.08);color:#fff}}
  .burger{display:flex}
  /* wyszukiwarka na mobile — pasek o stałej wysokości headera (NIE fullscreen), płynny fade w obie strony */
  /* Tło pod otwartą wyszukiwarką: przyciemniona, rozmyta zasłona zamiast pełnej przezroczystości —
     inaczej za paskiem widać całą stronę (hero, sekcje) i wygląda to jak błąd. Zasłona przechwytuje
     tap poza polem → zamyka wyszukiwarkę. Sam pasek zostaje przezroczysty (leży na zasłonie). */
  .site-header.search-open .nav{opacity:1;visibility:visible;pointer-events:auto;transform:none;
    background:rgba(24,17,10,.72);-webkit-backdrop-filter:blur(7px);backdrop-filter:blur(7px)}
  /* pasek PRZEZROCZYSTY jak na desktopie — tło daje sam header (gradient nad hero lub tło po scrollu).
     Wysokość ŚLEDZI header: 120px u góry, kurczy się do 74px po scrollu — inaczej przezroczysty
     pasek wystawałby poniżej skróconego headera na treść (efekt „uciekającego" paska). */
  .nav-search{position:absolute;top:0;left:0;right:0;bottom:auto;inset:auto;height:120px;
    flex-direction:row;align-items:center;gap:10px;width:auto;
    background:transparent;padding:0 clamp(14px,4vw,20px);
    opacity:1;visibility:hidden;pointer-events:none;
    transition:height .45s cubic-bezier(.65,0,.35,1)}
  .site-header.is-scrolled .nav-search{height:74px}
  .site-header.search-open .nav-search{visibility:visible;pointer-events:auto}
  /* zawartość headera znika pod paskiem; przy zamykaniu wraca DOPIERO po zniknięciu paska (opóźnienie) → brak prześwitywania/zjawy.
     Na mobile chowamy CAŁE .headerbar__cta (telefon + „Umów wizytę" + lupa), bo przezroczysty pasek
     inaczej przepuszczałby je pod spodem po scrollu. */
  .logo,.header-survey,.burger,.topstrip__inner{transition:opacity .2s ease .3s}
  .headerbar__cta{transition:opacity .2s ease .3s}
  .site-header.search-open .logo,
  .site-header.search-open .header-survey,
  .site-header.search-open .burger,
  .site-header.search-open .topstrip__inner,
  .site-header.search-open .headerbar__cta{opacity:0;pointer-events:none;transition-delay:0s;transition-duration:.15s}
  /* HERO mobile — duże zdjęcie full-bleed, tekst + CTA jako overlay na dole zdjęcia */
  .hero > .wrap{padding:0}
  /* obraz wchodzi POD header także na mobile — header zlewa się z hero jak na desktopie */
  .hero{padding:0 0 30px;--hmh:clamp(560px,84vh,720px)}
  .hero__shell{height:auto;display:block;position:relative;background:transparent;border-radius:0;overflow:visible}
  .hero__stage{position:relative;width:100%;height:var(--hmh);border-radius:0;overflow:hidden}
  /* mobile: header zlewa się z hero IDENTYCZNIE jak na desktopie — przezroczysty gradient,
     tu nieco mocniejszy u góry, żeby jasne napisy były czytelne nad zdjęciem. */
  .site-header:not(.is-scrolled){background:linear-gradient(180deg,rgba(24,17,10,.82) 0%,rgba(24,17,10,.5) 52%,rgba(24,17,10,0) 100%)}
  /* kadrowanie nowych grafik źródła pod pion mobile */
  .hero__slide{filter:none}
  /* Slajd 1 na mobile: PIONOWE zdjęcie budynku (lepiej wypełnia wysoki kadr niż
     poziome DSC z desktopu) — cover, bez pasów. Pełna wysokość budynku widoczna,
     przycięte tylko boki (drzewa). !important nadpisuje grafikę ustawianą przez JS. */
  .hero__slide:nth-child(1){background-image:url('../assets/img/hero-0-wsparcie-m.webp')!important;background-size:cover;background-position:50% 50%}
  .hero__slide:nth-child(2){background-position:50% 52%}   /* 2: terapia manualna */
  .hero__slide:nth-child(3){background-position:52% 46%}   /* 3: odnowa (hydro) */
  .hero__slide:nth-child(4){background-position:52% 48%}   /* 4: fizjoterapia (mobilizacja barku) */
  /* Cieniowanie IDENTYCZNE jak na desktopie — ta sama miękka poświata (.hero__tint).
     Nakładka rozciągnięta na wysokość zdjęcia (nie tylko na treść). */
  .hero__tint{display:block;height:var(--hmh);bottom:auto}
  /* .hero__cut niesie już tylko delikatny dodatkowy cień u samego dołu, pod tekstem
     (tekst leży niżej niż na desktopie) — reszta to identyczna nakładka desktopowa. */
  .hero__cut{position:absolute;top:0;left:0;right:0;width:auto;max-width:none;bottom:auto;height:var(--hmh);border-radius:0;display:flex;flex-direction:column;justify-content:flex-end;margin:0;padding:0 24px 36px;z-index:2;pointer-events:none;background:linear-gradient(to bottom,transparent 0%,transparent 46%,rgba(22,15,9,.22) 74%,rgba(20,13,8,.5) 100%)}
  .hero__cut > *{pointer-events:auto}
  .hero__title{order:1;color:#fff;font-size:clamp(2.35rem,8.8vw,3rem);line-height:1.04;letter-spacing:-.02em;hyphens:manual;overflow-wrap:normal;text-shadow:0 2px 22px rgba(12,7,3,.62)}
  .hero__title::after{content:none}
  .hero__sub{order:3;color:#fff;font-size:1.2rem;font-weight:400;line-height:1.5;margin-top:16px;max-width:32ch;text-shadow:0 1px 16px rgba(12,7,3,.72)}
  /* przyciski obok siebie (nie jeden pod drugim) — równa szerokość */
  .hero__ctarow{order:4;flex-direction:row;align-items:stretch;gap:10px;margin-top:24px}
  .hero__ctarow .btn{flex:1 1 0;min-width:0;padding:15px 12px;font-size:.95rem;letter-spacing:.01em;box-shadow:none;min-height:54px}
  /* przyciski na nakładce: kremowy (Umów wizytę) + outline-light (Znajdź usługę) */
  .hero__ctarow .btn--brand{background:#fff;color:var(--color-brand)}
  .hero__ctarow .btn--outline{border:1.5px solid rgba(255,255,255,.6);color:#fff;background:rgba(255,255,255,.08)}
  /* kropki: w bloku treści, tuż POD tytułem */
  .hero__dots{position:static;order:2;margin:14px 0 4px;z-index:3;gap:7px;justify-content:flex-start}
  .hero__dot{width:24px;height:24px;padding:10.5px 0;background-color:rgba(255,255,255,.55)}
  .hero__dot[aria-current="true"]{background-color:#fff;width:34px}
  .hero__dot:hover{background-color:rgba(255,255,255,.85)}
  .hero__card{position:static;width:auto;background:transparent;border:0;box-shadow:none;border-radius:0;padding:26px 20px 0;margin-top:0}
  .about__grid,.fin__grid,.news,.needs__grid{grid-template-columns:1fr;gap:40px}
  .fin__aside{justify-self:start;max-width:100%}
  .about__figure{padding:0}
  .footer__top{grid-template-columns:1fr 1fr}
  .newsletter__inner{grid-template-columns:minmax(0,1fr);gap:40px}
  .svc__headrow{grid-template-columns:1fr;gap:12px}
  .svc__lead{justify-self:start;max-width:54ch}
  .svc__index{grid-template-columns:repeat(2,1fr)}
  .svc__index .svc__item:nth-child(3n){border-right:1px solid var(--color-line)}
  .svc__index .svc__item:nth-child(2n){border-right:0}
}
@media(max-width:48em){
  /* topstrip na mobile — adres + godziny w jednej linii */
  /* stała wysokość (nie auto!) → kolaps przy scrollu animuje się płynnie jak na desktopie */
  .topstrip{display:block;height:38px}
  .topstrip .wrap{padding:0 8px;height:100%}
  .topstrip__inner{gap:7px;height:38px;min-height:0;padding:0;white-space:nowrap;font-size:clamp(.6rem,2.92vw,.74rem);letter-spacing:0}
  .topstrip__item{gap:5px;min-width:0;font-weight:500;color:#fff}
  .topstrip__item .ico{display:none}
  .topstrip__sep{height:9px}
  .headerbar{height:82px}
  .site-header.is-scrolled .headerbar{height:70px}
  .logo img{height:78px}
  .site-header.is-scrolled .logo img{height:56px}
  /* header: numer telefonu → Ankieta satysfakcji */
  .headerbar__cta .header-phone{display:none}
  .header-survey{display:inline-flex}
  /* wstążka ankiety → pływający przycisk Zadzwoń (jak w referencji) */
  .dogear{display:none}
  .callfab{display:inline-flex;position:fixed;right:14px;bottom:14px;z-index:91;width:52px;height:52px}
  .callfab .ico{width:25px;height:25px}
  .a11y-fab{width:52px;height:52px;left:14px;bottom:14px}
  .a11y-fab .ico{width:30px;height:30px}
  .hero{padding:0 0 30px}   /* obraz pod header — blend jak na desktopie */
  .news{grid-template-columns:1fr;gap:40px}
  .news__feature{border-top:2px solid var(--color-brand)}
  .beautytab{display:none}
  .svc>.wrap,.kons>.wrap{padding-left:44px}
  /* mobile: scena usług nad indeksem, kons figura+detal nad listą */
  .svc__stage{grid-template-columns:1fr;margin-bottom:32px}
  .svc__media{grid-column:1;grid-row:1;height:clamp(260px,56vw,400px)}
  .svc__frame{display:none}
  .svc__panel{grid-column:1;grid-row:2;margin:-46px 14px 0;z-index:2}
  .svc__index{grid-template-columns:1fr}
  .svc__index .svc__item{border-right:0}
  .kons__body{grid-template-columns:1fr;row-gap:24px}
  .kons__figure{grid-column:1;grid-row:auto}
  .kons__figframe{right:-12px;bottom:-12px}
  .kons__figure img{height:clamp(300px,64vw,440px)}
  .kons__active{grid-column:1;grid-row:auto}
  .kons__list{grid-column:1;grid-row:auto}
  .newsletter__submit{width:100%;justify-content:center}
  /* stopka mobile — wszystko wyśrodkowane, sekcje z cienkimi dividerami */
  .footer__top{grid-template-columns:1fr;gap:0;padding:8px 0 4px}
  .footer__brand{display:flex;flex-direction:column;align-items:center;text-align:center;padding:32px 0 28px;border-bottom:1px solid #4a3d31}
  .footer__brand img{height:74px;margin:0 auto 18px}
  .footer__desc{max-width:40ch;margin:0 auto 22px}
  .footer__nav{text-align:center;padding:24px 0;border-bottom:1px solid #4a3d31}
  .footer__h{margin-bottom:14px}
  .footer__nav ul{gap:6px;align-items:center}
  .footer__nav a{display:inline-block;padding:7px 6px;min-height:40px}
  .footer__legal a{padding:6px 4px}
  .footer__bottom{flex-direction:column;align-items:center;text-align:center;gap:16px;margin-top:0;padding:26px 0 82px}
  .footer__legal{justify-content:center;gap:14px 22px}
}
@media(max-width:25em){
  .wrap{padding:0 20px}
  /* w headerze mobilnym jest 98px zapasu — oddajemy go na odstępy między celami dotykowymi */
  .headerbar{gap:16px}
  .headerbar__cta{gap:16px}
  .headerbar__cta .header-phone{font-size:.9rem}
  .hero{padding:0 0 30px}   /* obraz pod header — blend jak na desktopie */
  .hcard__tabs button{padding:8px 9px;font-size:.88rem}
  .section__title{font-size:2.25rem}

}
/* ============================================================ REVEAL przy scrollu (data-animate)
   Ukrywamy TYLKO gdy JS działa (klasa .js na <html>). Bez JS treść jest widoczna —
   adresy i telefony placówek nie mogą zależeć od skryptu. */
.js [data-animate]{opacity:0;transform:translateY(30px);will-change:opacity,transform;
  transition:opacity .8s cubic-bezier(.16,1,.3,1),transform .8s cubic-bezier(.16,1,.3,1),filter .8s cubic-bezier(.16,1,.3,1),letter-spacing .8s cubic-bezier(.16,1,.3,1)}
.js [data-animate].is-visible{opacity:1;transform:translateY(0);filter:none;letter-spacing:normal}
.js [data-animate="scale-reveal"]{transform:translateY(30px) scale(.92)}
.js [data-animate="scale-reveal"].is-visible{transform:translateY(0) scale(1)}
.js [data-animate="blur-up"]{filter:blur(6px)}
.js [data-animate="word-reveal"]{letter-spacing:.06em}
.js [data-animate-delay="100"]{transition-delay:.1s}
.js [data-animate-delay="150"]{transition-delay:.15s}
.js [data-animate-delay="200"]{transition-delay:.2s}
.js [data-animate-delay="300"]{transition-delay:.3s}
.js [data-animate-delay="400"]{transition-delay:.4s}

/* ============================================================ HEADER — ikona-przycisk + wyszukiwarka usług */
.icon-btn{width:44px;height:44px;flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;background:none;border:0;color:#fff;cursor:pointer;font-size:1.35rem;transition:color .2s,opacity .3s ease}
.icon-btn:hover{color:#e8ddcb}
.icon-btn:focus-visible{outline:3px solid #e8ddcb;outline-offset:2px;border-radius:6px}
.nav{position:relative}
.nav-search{position:absolute;inset:0;display:flex;align-items:center;gap:12px;width:100%;opacity:0;visibility:hidden;transition:opacity .34s ease,visibility .34s ease}
.nav ul{transition:opacity .3s ease}
.site-header.search-open .nav ul{opacity:0;pointer-events:none}
.site-header.search-open .nav-search{opacity:1;visibility:visible}
.site-header.search-open .icon-btn{opacity:0;pointer-events:none}
.nav-search__ico{color:#fff;font-size:1.35rem;flex:0 0 auto}
.nav-search input{flex:1;min-width:0;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.28);border-radius:var(--radius-pill);padding:12px 20px;color:#fff;font-family:var(--font-body);font-size:1rem;min-height:46px;transition:background .2s ease,border-color .2s ease,box-shadow .2s ease}
.nav-search input::placeholder{color:rgba(255,255,255,.62)}
.nav-search input:focus{outline:none;border-color:rgba(232,221,203,.75);background:rgba(255,255,255,.18);box-shadow:0 0 0 3px rgba(232,221,203,.15)}
.nav-search input[type="search"]::-webkit-search-cancel-button{-webkit-appearance:none;appearance:none;display:none}
.nav-search input[type="search"]::-webkit-search-decoration{-webkit-appearance:none}
.nav-search__close{width:40px;height:40px;flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;background:none;border:0;color:#efe4d5;cursor:pointer;font-size:1.35rem}
.nav-search__close:focus-visible{outline:3px solid #e8ddcb;outline-offset:2px;border-radius:6px}

/* panel wyników wyszukiwarki — biała karta z linkami do stron (desktop i mobile wspólnie).
   Pozycjonowany pod paskiem; własne tło zapewnia czytelność nad zdjęciem/gradientem. */
.nav-search__results{position:absolute;top:calc(100% + 12px);left:0;right:0;z-index:130;
  background:#fff;border:1px solid rgba(122,92,62,.14);border-radius:18px;
  box-shadow:0 24px 64px -16px rgba(24,17,10,.34),0 2px 8px rgba(24,17,10,.06);padding:7px;text-align:left;
  max-height:min(66vh,470px);overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch}
.nav-search__results[hidden]{display:none}
/* delikatne wejście panelu — odpala się raz, gdy pojawi się pierwszy wynik */
.nav-search__results:not([hidden]){animation:navSearchIn .2s cubic-bezier(.22,.61,.36,1)}
@keyframes navSearchIn{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}
/* prefiks .nav-search__results podbija specyficzność ponad `.nav a{color:#fff}` (inaczej tytuł=biały=niewidoczny) */
.nav-search__results .nav-search__hit{position:relative;display:flex;flex-direction:column;gap:2px;
  padding:10px 42px 10px 15px;border-radius:12px;text-decoration:none;color:var(--color-brand-dark,#2a1c10);
  white-space:normal;transition:background .16s ease}
.nav-search__results .nav-search__hit-t{color:var(--color-brand-dark,#2a1c10);font-family:var(--font-body);font-weight:600;font-size:.98rem;line-height:1.3}
.nav-search__results .nav-search__hit-c{color:#a2906f;font-size:.68rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase}
/* wskaźnik „→" — subtelnie pojawia się i przesuwa na aktywnym / najechanym wyniku */
.nav-search__results .nav-search__hit::after{content:"→";position:absolute;right:15px;top:50%;
  transform:translate(-5px,-50%);opacity:0;color:var(--color-brand,#7a5c3e);font-size:1.05rem;
  transition:opacity .16s ease,transform .16s ease}
.nav-search__results .nav-search__hit.is-active,.nav-search__results .nav-search__hit:hover{background:rgba(122,92,62,.055)}
.nav-search__results .nav-search__hit.is-active::after,.nav-search__results .nav-search__hit:hover::after{opacity:.8;transform:translate(0,-50%)}
.nav-search__results .nav-search__hit:focus{outline:none;background:rgba(122,92,62,.055)}
.nav-search__results .nav-search__hit:focus-visible{outline:2px solid var(--color-brand,#7a5c3e);outline-offset:-2px}
.nav-search__empty{margin:0;padding:16px 16px 18px;color:#6f6152;font-size:.95rem;line-height:1.55}
@media(prefers-reduced-motion:reduce){.nav-search__results:not([hidden]){animation:none}}
@media(min-width:981px){
  /* na desktopie panel nie rozlewa się na całą szerokość nawigacji — trzyma szer. paska wyszukiwania */
  .nav-search__results{left:auto;right:0;width:min(500px,90vw)}
}
@media(min-width:75.0625em){
  /* Desktop (poza trybem hamburgera): pasek wyszukiwarki nie startuje tuż przy logo.
     Po otwarciu nawigacja rozciąga się na wolną przestrzeń, a pole wyszukiwania jest wyśrodkowane
     między logo a przyciskami — dzięki temu nie „ucieka" do lewej. */
  .site-header.search-open .nav{flex:1 1 auto;margin-right:0}
  .nav-search{justify-content:center}
  .nav-search input{flex:0 1 min(620px,100%)}
  /* panel wyników wyśrodkowany pod polem (bez transformacji — nie koliduje z animacją wejścia) */
  .nav-search__results{left:0;right:0;margin-inline:auto;width:min(560px,100%)}
}
@media(max-width:75em){
  /* mobile/tablet: panel WYRÓWNANY do pola input (nie do całej belki i nie od krawędzi ekranu).
     Lewy offset = padding paska + lupa+odstęp; szerokość = tyle co pole (do przycisku ×), max 440px.
     Dzięki temu na telefonie nie jest szerszy niż pole i nie dotyka krawędzi. */
  .nav-search__results{top:calc(100% + 6px);
    left:calc(clamp(14px,4vw,20px) + 32px);right:auto;
    width:min(440px, calc(100% - 2 * clamp(14px,4vw,20px) - 82px));
    border-radius:16px}
  .nav-search__results .nav-search__hit{padding:11px 40px 11px 14px}
  .nav-search__results .nav-search__hit-t{font-size:1.02rem}
}

/* karta placówek — ikony FA */
.hcard__row .ico{color:var(--color-brand);width:18px;height:18px;flex:0 0 auto}
/* Adres jako link do nawigacji. Pinezka mówi „to adres", strzałka — „klik prowadzi do map".
   Podkreślenie kropkowane odróżnia go od zwykłego tekstu, nie krzycząc jak pełny link. */
/* Adres = link do nawigacji. Układ flex (nowrap): pinezka | tekst | strzałka.
   Strzałka jest elementem flex, więc NIE MA JAK spaść pod tekst niezależnie od długości
   adresu i szerokości ekranu. Wcześniej jako inline-block spadała — łamanie wiersza jest
   dozwolone przed elementem atomowym nawet bez spacji w HTML. */
.hcard__addr{display:flex;align-items:flex-start;gap:11px;width:100%;min-height:24px;
  padding-block:1px;color:var(--color-text-2);transition:color .2s}
.hcard__addr [data-address]{flex:0 1 auto;min-width:0;
  text-decoration:underline;text-decoration-style:dotted;text-underline-offset:3px;
  text-decoration-color:var(--color-line);transition:text-decoration-color .2s}
.hcard__addr:hover [data-address],.hcard__addr:focus-visible [data-address]{text-decoration-color:var(--color-brand)}
.hcard__addr:hover,.hcard__addr:focus-visible{color:var(--color-brand);text-decoration-color:var(--color-brand)}
/* Ikona płynie w tekście tuż za nazwą miasta. Nie zostanie sama w wierszu, bo main.js
   skleja ją z ostatnim słowem adresu w .hcard__glue (nowrap).
   Specyficzność MUSI dorównać .hcard__row .ico{width:18px} — inaczej zostaje 18px. */
.hcard__glue{white-space:nowrap}
.hcard__row .hcard__navico{display:inline-block;width:14px;height:14px;margin-left:7px;
  vertical-align:-2px;color:var(--color-brand);transition:transform .24s cubic-bezier(.16,1,.3,1)}
@media(hover:hover){.hcard__addr:hover .hcard__navico{transform:translate(2px,-2px)}}
.hcard__addr:focus-visible .hcard__navico{transform:translate(2px,-2px)}
.hcard__row--addr{align-items:flex-start}
.hcard__row--addr .ico{margin-top:3px}
.hcard__foot .btn .ico{font-size:.85em;margin-right:3px}


@media(prefers-reduced-motion:reduce){
  *{transition:none!important;animation:none!important;scroll-behavior:auto!important}
  .hero__card,.hero__cut{opacity:1!important;transform:none!important}
  .hero__slide{transition:none!important}
  [data-animate]{opacity:1!important;transform:none!important;filter:none!important;letter-spacing:normal!important}
}

@media(max-width:40em){
  .dogear{width:104px;height:104px}
  .dogear__label{width:82px;bottom:20px;right:6px;font-size:.6rem;letter-spacing:.07em}
  .beautytab{font-size:.66rem;padding:12px 8px}
}

/* Górny pasek na desktopie: 13,12 px było za drobne dla adresu i godzin,
   a treść zajmuje 434 z 1180 px, więc miejsca jest w nadmiarze.
   Tylko desktop — na mobile pasek ma inny układ i musi zostać zwarty. */
@media(min-width:75.0625em){
  .topstrip{height:42px}
  .topstrip__item{font-size:.94rem;gap:7px}
  .topstrip__item .ico{width:17px;height:17px}
}

/* ============================================================
   MENU DOSTĘPNOŚCI  (self-hosted, zero stron trzecich)
   Zastępuje dawny zewnętrzny widget wcag.dock.codes (wysyłał IP
   użytkownika do third-party — konflikt z RODO). Wszystko lokalnie.
   Tryby stosowane atrybutami na <html>; wartości w localStorage['rm-a11y'].
   Parytet opcji z dawnym widgetem (bez pozornych: auto-alt, TTS).
   ============================================================ */

/* --- przycisk otwierający: lewy dolny róg (prawy zajmuje .dogear) --- */
.a11y-fab{display:none;position:fixed;left:20px;bottom:20px;z-index:95;width:60px;height:60px;
  align-items:center;justify-content:center;border-radius:50%;
  background:var(--color-brand);color:#fff;border:3px solid #fff;cursor:pointer;
  box-shadow:0 10px 26px -8px rgba(0,0,0,.6);opacity:.94;transition:opacity .22s ease,transform .22s ease}
html.js .a11y-fab{display:inline-flex}
.a11y-fab .ico{width:36px;height:36px}
@media(hover:hover){.a11y-fab:hover{opacity:1;transform:translateY(-2px)}}
.a11y-fab:focus-visible,.a11y-fab[aria-expanded="true"]{opacity:1}
.a11y-fab:focus-visible{outline:3px solid var(--color-brand);outline-offset:3px}

/* --- panel przewijalny (dużo opcji) --- */
.a11y-panel{position:fixed;left:18px;bottom:80px;z-index:96;width:min(340px,calc(100vw - 36px));
  max-height:min(80vh,640px);overflow-y:auto;
  background:#fff;color:var(--color-text);border:1px solid var(--color-line);
  box-shadow:0 20px 50px -20px rgba(0,0,0,.5);padding:20px;display:none}
.a11y-panel[data-open]{display:block}
.a11y-panel__head{display:flex;align-items:center;justify-content:space-between;margin-bottom:6px}
.a11y-panel__title{font-family:var(--font-display);font-weight:var(--fw-display);font-size:1.28rem;line-height:1.1}
.a11y-panel__close{width:40px;height:40px;display:inline-flex;align-items:center;justify-content:center;
  background:transparent;border:1px solid var(--color-line);cursor:pointer;color:var(--color-text)}
.a11y-panel__close:focus-visible{outline:3px solid var(--color-brand);outline-offset:2px}

.a11y-row{padding:12px 0;border-top:1px solid var(--color-line)}
.a11y-row:first-of-type{border-top:0}
.a11y-row__label{display:block;font-size:.8rem;font-weight:var(--fw-bold);letter-spacing:.06em;
  text-transform:uppercase;color:var(--color-text-muted);margin-bottom:9px}

/* stepper: A− [wartość] A+  (rozmiar, odstępy, interlinia) */
.a11y-step{display:flex;align-items:center;gap:8px}
.a11y-step__btn{flex:0 0 auto;width:46px;height:46px;display:inline-flex;align-items:center;justify-content:center;
  background:#fff;border:1px solid var(--color-brand);color:var(--color-brand);font-family:var(--font-body);
  font-weight:var(--fw-bold);cursor:pointer}
.a11y-step__btn:focus-visible{outline:3px solid var(--color-brand);outline-offset:2px}
.a11y-step__btn[disabled]{opacity:.4;cursor:not-allowed}
.a11y-step__val{flex:1 1 auto;text-align:center;font-weight:var(--fw-bold);font-variant-numeric:tabular-nums}

/* przełączniki */
.a11y-toggle{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;min-height:44px;
  background:transparent;border:0;padding:0;cursor:pointer;color:var(--color-text);
  font-family:var(--font-body);font-size:1rem;text-align:left}
.a11y-toggle:focus-visible{outline:3px solid var(--color-brand);outline-offset:2px}
.a11y-toggle__sw{flex:0 0 auto;width:46px;height:26px;border-radius:100px;background:#cfcabf;position:relative;transition:background .15s}
.a11y-toggle__sw::after{content:"";position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;background:#fff;transition:transform .15s}
.a11y-toggle[aria-pressed="true"] .a11y-toggle__sw{background:var(--color-brand)}
.a11y-toggle[aria-pressed="true"] .a11y-toggle__sw::after{transform:translateX(20px)}

.a11y-reset{margin-top:14px;width:100%;min-height:46px;background:var(--color-brand);color:#fff;
  border:1px solid var(--color-brand);font-family:var(--font-body);font-weight:var(--fw-semibold);cursor:pointer}
.a11y-reset:focus-visible{outline:3px solid var(--color-brand);outline-offset:2px}

/* ================= TRYBY (atrybuty na :root) ================= */

/* wysoki kontrast — nadpisanie tokenów */
:root[data-a11y-contrast]{
  --color-text:#000;--color-text-2:#111;--color-text-muted:#1c1c1c;
  --color-line:#4a4038;--color-brand-taupe:#4a4038;
  --color-bg-ivory:#fff;--color-bg-beige:#f2efe6;--color-cream:#fff;
}
:root[data-a11y-contrast] .uhero__tint,:root[data-a11y-contrast] .hero__tint{background:rgba(0,0,0,.55)}
:root[data-a11y-contrast] .btn{border-color:currentColor}

/* filtry: odwróć kolory / skala szarości (łączą się).
   Media i sam panel odwracamy z powrotem, by zdjęcia i UI zostały czytelne. */
:root[data-a11y-invert]:not([data-a11y-gray]){filter:invert(1) hue-rotate(180deg)}
:root[data-a11y-gray]:not([data-a11y-invert]){filter:grayscale(1)}
:root[data-a11y-invert][data-a11y-gray]{filter:invert(1) hue-rotate(180deg) grayscale(1)}
:root[data-a11y-invert] img,:root[data-a11y-invert] video,:root[data-a11y-invert] picture,
:root[data-a11y-invert] .a11y-panel,:root[data-a11y-invert] .a11y-fab{filter:invert(1) hue-rotate(180deg)}

/* podkreślenie odnośników (WCAG 1.4.1) */
:root[data-a11y-underline] main a:not(.btn):not(.a11y-fab){text-decoration:underline;text-underline-offset:2px}

/* odstępy między literami/słowami */
:root[data-a11y-space="1"] :is(p,li,a,h1,h2,h3,h4,h5,td,dd,dt,blockquote,figcaption,label,legend){letter-spacing:.06em;word-spacing:.1em}
:root[data-a11y-space="2"] :is(p,li,a,h1,h2,h3,h4,h5,td,dd,dt,blockquote,figcaption,label,legend){letter-spacing:.12em;word-spacing:.18em}

/* interlinia */
:root[data-a11y-lineh="1"] :is(p,li,dd,blockquote,figcaption){line-height:1.85!important}
:root[data-a11y-lineh="2"] :is(p,li,dd,blockquote,figcaption){line-height:2.2!important}

/* czytelna czcionka — nadpisujemy tokeny krojów (wszystko dziedziczy) */
:root[data-a11y-font]{--font-display:Verdana,Tahoma,"Segoe UI",system-ui,sans-serif;
  --font-body:Verdana,Tahoma,"Segoe UI",system-ui,sans-serif}

/* powiększony kursor */
:root[data-a11y-cursor],:root[data-a11y-cursor] *{cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 48 48'%3E%3Cpath d='M8 4l26 16-11 3-3 11z' fill='%23fff' stroke='%23000' stroke-width='2' stroke-linejoin='round'/%3E%3C/svg%3E") 8 4,auto}

/* ukryj obrazy (zachowaj miejsce, by layout nie skakał) */
:root[data-a11y-hideimg] img,:root[data-a11y-hideimg] video,:root[data-a11y-hideimg] picture{opacity:0}
/* tła: łapiemy KAŻDE tło obrazkowe wstawione inline (JS lazy-load robi style="background-image"),
   niezależnie od klasy — wcześniej [data-bg] nie działał, bo lazy-load usuwa ten atrybut po załadowaniu */
:root[data-a11y-hideimg] [style*="background-image"],
:root[data-a11y-hideimg] .hero__slide,:root[data-a11y-hideimg] .uhero__img,
:root[data-a11y-hideimg] .svc__img,:root[data-a11y-hideimg] [data-bg]{
  background-image:none!important;background-color:var(--color-bg-beige)!important}

/* ograniczenie ruchu (uzupełnia prefers-reduced-motion) */
:root[data-a11y-reduce] *,:root[data-a11y-reduce] *::before,:root[data-a11y-reduce] *::after{
  animation-duration:.001ms!important;animation-iteration-count:1!important;
  transition-duration:.001ms!important;scroll-behavior:auto!important}

/* przewodnik czytania — pasek śledzący kursor. Efekt „reflektora": box-shadow
   przyciemnia CAŁĄ resztę strony poza paskiem, więc czytany wiersz jest wyraźnie
   wyróżniony (wcześniej 12% krycia było praktycznie niewidoczne). z-index poniżej
   FAB/panelu/nagłówka, żeby menu i nawigacja zostały jasne i klikalne. */
.a11y-guide{position:fixed;left:0;right:0;height:2.6em;z-index:93;pointer-events:none;display:none;
  background:transparent;
  border-top:2px solid rgba(72,61,50,.95);border-bottom:2px solid rgba(72,61,50,.95);
  box-shadow:0 0 0 9999px rgba(18,13,8,.46)}
:root[data-a11y-guide] .a11y-guide{display:block}

/* ============================================================
   NAGŁÓWEK KOMPAKTOWY przy powiększonym tekście (menu dostępności)
   Media queries liczą `em` od domyślnej czcionki przeglądarki, nie od
   html{font-size} ustawianego przez menu — więc powiększenie tekstu NIE
   przełącza nagłówka na hamburger i pozioma belka wylewa się poza ekran
   („Umów wizytę" uciekało). Atrybut data-a11y-compact (JS ustawia go przy
   scale>100 lub czytelnej czcionce) wymusza układ mobilny niezależnie od
   szerokości okna. Wartości skopiowane z bloku @media(max-width:75em). */
:root[data-a11y-compact] .headerbar{gap:16px}
:root[data-a11y-compact] .headerbar__rule{display:none}
:root[data-a11y-compact] .header-call{display:none}
:root[data-a11y-compact] .headerbar__cta{display:flex;align-items:center;order:2;margin-left:auto;gap:18px;padding:0}
:root[data-a11y-compact] .headerbar__cta > .btn{display:none}
:root[data-a11y-compact] .headerbar__cta .header-phone{font-size:.95rem;min-height:44px;padding:9px 14px}
:root[data-a11y-compact] .headerbar__cta .icon-btn{width:48px;height:48px;font-size:1.5rem}
:root[data-a11y-compact] .logo{order:1}
:root[data-a11y-compact] .burger{display:flex;order:3;margin-left:0}

:root[data-a11y-compact] .site-header .nav{position:fixed;inset:0;z-index:200;display:flex;flex-direction:column;align-items:center;
  width:100%;height:100dvh;margin:0;background:transparent;padding:22px 24px 40px;overflow-y:auto;overscroll-behavior:contain;
  opacity:0;visibility:hidden;pointer-events:none;transform:translateY(-8px);
  transition:opacity .34s ease,transform .4s cubic-bezier(.33,0,.15,1),visibility .4s,background-color .34s ease}
:root[data-a11y-compact] .site-header .nav--open{background:var(--color-brand-dark);opacity:1;visibility:visible;pointer-events:auto;transform:none}
:root[data-a11y-compact] .site-header .nav--open ul,
:root[data-a11y-compact] .site-header .nav--open .nav__mobile,
:root[data-a11y-compact] .site-header .nav--open .nav__close{visibility:visible}
:root[data-a11y-compact] .nav__close{display:inline-flex;visibility:hidden;position:absolute;top:20px;right:20px;width:46px;height:46px;align-items:center;justify-content:center;
  background:rgba(255,255,255,.08);border:0;border-radius:50%;color:#fff;font-size:1.5rem;cursor:pointer;transition:background .2s,visibility .34s}
:root[data-a11y-compact] .nav__close:focus-visible{outline:3px solid #e8ddcb;outline-offset:2px}
:root[data-a11y-compact] .nav > ul{flex-direction:column;align-items:stretch;gap:0;width:100%;max-width:380px;margin:56px auto 0;padding:0;visibility:hidden;transition:visibility .34s}
:root[data-a11y-compact] .nav ul li{display:block;width:100%;margin:0;padding:0;list-style:none}
:root[data-a11y-compact] .nav ul a{display:flex;align-items:center;width:100%;padding:16px 4px;border-bottom:1px solid rgba(255,255,255,.12);font-size:1.18rem;font-weight:var(--fw-semibold);color:#efe4d5;min-height:54px}
:root[data-a11y-compact] .nav ul a::after{display:none}
:root[data-a11y-compact] .nav ul a:focus-visible{color:#fff}
:root[data-a11y-compact] .nav__top{display:flex;align-items:center;justify-content:space-between;width:100%;padding:16px 4px;border:0;border-bottom:1px solid rgba(255,255,255,.12);background:none;font-family:var(--font-body);font-size:1.18rem;font-weight:var(--fw-semibold);color:#efe4d5;min-height:54px;cursor:pointer;text-align:left}
:root[data-a11y-compact] .nav__top .nav__chev{width:.8em;height:.8em;transition:transform .3s ease;flex:0 0 auto;margin-left:12px;opacity:.7}
:root[data-a11y-compact] .nav__item--sub.is-open .nav__top{color:#fff}
:root[data-a11y-compact] .nav__item--sub.is-open .nav__top .nav__chev{transform:rotate(180deg);opacity:1}
:root[data-a11y-compact] .nav__item--sub::after{display:none}
:root[data-a11y-compact] .nav .nav__item--sub{display:grid;grid-template-rows:min-content 0fr;transition:grid-template-rows .36s cubic-bezier(.4,0,.2,1)}
:root[data-a11y-compact] .nav .nav__item--sub.is-open{grid-template-rows:min-content 1fr}
:root[data-a11y-compact] .nav__sub{position:static;transform:none;visibility:visible;pointer-events:auto;min-width:0;width:100%;min-height:0;margin:0;background:none;border:0;border-radius:0;box-shadow:none;padding:0;gap:0;z-index:auto;overflow:hidden}
:root[data-a11y-compact] .nav__sub::before{display:none}
:root[data-a11y-compact] .nav .nav__sub a{display:block;width:100%;padding:12px 4px 12px 18px;font-size:1rem;font-weight:var(--fw-regular);color:#c3b39d;border-bottom:1px solid rgba(255,255,255,.07);min-height:0;white-space:normal;line-height:1.4}
:root[data-a11y-compact] .nav__mobile{display:flex;visibility:hidden;flex-direction:column;gap:14px;width:100%;max-width:440px;margin:26px auto 0;padding:0;transition:visibility .34s}
:root[data-a11y-compact] .nav__mobile .btn{width:100%;justify-content:center;padding:16px}
:root[data-a11y-compact] .nav__beauty{display:inline-flex;justify-content:center;align-items:center;gap:9px;min-height:52px;font-size:1.05rem;font-weight:600;color:#efe4d5;border:1px solid rgba(255,255,255,.22);border-radius:var(--radius-pill);text-decoration:none}

/* ============================================================
   TRENING EMS — komponenty współdzielone (strona główna + strona usługi).
   .emsembed — natywne osadzenie filmu z Facebooka (odtwarzacz FB, bez
   własnych nakładek). Responsywny kadr 16:9 (film ma proporcje 1280×720).
   ============================================================ */
.emsembed{position:relative;z-index:1;aspect-ratio:16/9;width:100%;overflow:hidden;
  background:var(--color-brand-dark);border:1px solid var(--color-line)}
.emsembed iframe{position:absolute;inset:0;width:100%;height:100%;border:0;display:block}

/* ── Zajawka EMS na stronie głównej: tekst + film obok ─────────────────── */
.emshl__grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);
  gap:clamp(28px,4vw,64px);align-items:center}
.emshl__text{min-width:0;max-width:34em}
.emshl__lead{font-family:var(--font-body);font-size:clamp(1.1rem,1.5vw,1.28rem);
  line-height:1.6;color:var(--color-text);margin:0 0 clamp(16px,1.8vw,22px)}
.emshl__p{font-family:var(--font-body);font-size:1.05rem;line-height:1.72;
  color:var(--color-text-2);margin:0 0 clamp(22px,2.4vw,28px)}
@media(max-width:56em){
  .emshl__grid{grid-template-columns:1fr;gap:clamp(24px,4.5vw,32px)}
  .emshl__text{max-width:none}
  /* na mobile film trafia OD RAZU pod nagłówek „Trening EMS", nad tekstem */
  .emshl__media{order:-1}
}
.emshl__media{margin:0;min-width:0}

/* Pływające FAB-y na mobile — mniejsze + odstęp stopki, by nie nachodziły na treść.
   Blok na końcu pliku: wygrywa kolejnością nad regułami bazowymi (.a11y-fab, .footer__bottom). */
@media(max-width:48em){
  .a11y-fab{width:52px;height:52px;left:14px;bottom:14px}
  .a11y-fab .ico{width:30px;height:30px}
  .callfab{width:52px;height:52px;right:14px;bottom:14px}
  .callfab .ico{width:25px;height:25px}
  .footer__bottom{padding-bottom:92px}
}
/* Gdy stopka jest w polu widzenia, chowamy FAB-y, by nie zakrywały linków stopki.
   Wracają natychmiast po odscrollowaniu w górę. */
body.at-footer .a11y-fab,
body.at-footer .callfab{opacity:0;visibility:hidden;pointer-events:none;transform:translateY(12px)}

/* ============================================================ ZGODA COOKIES (RODO / ePrivacy)
   Baner + panel ustawień + „facade" dla treści osadzonych (iframe FB). Kategorie opcjonalne
   domyślnie WYŁĄCZONE; „Odrzuć" ma tę samą wagę wizualną co „Zaakceptuj"; wybór zapisywany
   z datą i wersją. Logika: js/main.js (moduł ZGODA COOKIES). */
/* ── ZGODA NA COOKIES — pasek u dołu, odsunięty od krawędzi ──────────
   Układ ze wskazanego wzoru: tytuł, jedno zdanie, przełączniki kategorii
   wprost w pasku i trzy przyciski decyzji. Pasek NIE dotyka krawędzi
   ekranu — margines dookoła i zaokrąglenie, żeby czytał się jak karta
   położona na stronie, a nie jak przyklejona listwa. */
.cc-banner{
  position:fixed;left:0;right:0;bottom:0;z-index:900;
  padding:clamp(12px,1.6vw,20px);pointer-events:none;
}
.cc-banner[hidden]{display:none}
.cc-banner__card{
  pointer-events:auto;
  max-width:1180px;margin:0 auto;
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
  gap:clamp(16px,2.4vw,34px);
  background:var(--color-cream);color:var(--color-text);
  border:1px solid var(--color-line);border-radius:14px;
  box-shadow:0 22px 54px -28px rgba(28,21,13,.5);
  padding:clamp(18px,2.2vw,26px) clamp(20px,2.6vw,32px);
}
.cc-banner__body{flex:1 1 min(420px,100%);min-width:0}
.cc-banner__title{
  font-family:var(--font-body);font-weight:var(--fw-semibold);
  font-size:1.02rem;line-height:1.25;margin:0 0 5px;color:var(--color-text);
}
.cc-banner__text{
  font-family:var(--font-body);font-size:.88rem;line-height:1.55;
  color:var(--color-text-2);margin:0 0 14px;max-width:62ch;
}
.cc-banner__text a{color:var(--color-brand);text-decoration:underline;text-underline-offset:2px}

/* przełączniki */
.cc-sw{display:flex;flex-wrap:wrap;gap:8px 22px}
.cc-sw__i{
  display:inline-flex;align-items:center;gap:9px;cursor:pointer;
  font-family:var(--font-body);font-size:.86rem;color:var(--color-text);
  min-height:32px;
}
.cc-sw__i.is-locked{cursor:default;color:var(--color-text-2)}
.cc-sw__i input{position:absolute;opacity:0;width:1px;height:1px}
.cc-sw__t{
  flex:none;width:38px;height:22px;border-radius:100px;
  background:var(--color-brand-taupe);position:relative;
  transition:background .18s;
}
.cc-sw__t::after{
  content:"";position:absolute;top:3px;left:3px;width:16px;height:16px;
  border-radius:50%;background:#fff;transition:transform .18s;
  box-shadow:0 1px 3px rgba(28,21,13,.35);
}
.cc-sw__i input:checked + .cc-sw__t{background:var(--color-brand)}
.cc-sw__i input:checked + .cc-sw__t::after{transform:translateX(16px)}
.cc-sw__i.is-locked input:checked + .cc-sw__t{background:var(--color-brand-taupe)}
.cc-sw__i input:focus-visible + .cc-sw__t{outline:2px solid var(--color-brand);outline-offset:3px}
.cc-sw__d{color:var(--color-text-muted);font-size:.8rem}

/* przyciski */
.cc-actions{display:flex;flex-wrap:wrap;gap:10px;flex:0 0 auto}
.cc-btn{
  font-family:var(--font-body);font-weight:var(--fw-semibold);
  font-size:.88rem;line-height:1.2;
  min-height:46px;padding:12px 22px;border-radius:6px;
  border:1.5px solid transparent;cursor:pointer;white-space:nowrap;
  transition:background .18s,border-color .18s,color .18s;
}
.cc-btn--accept{background:var(--color-brand);color:#fff;border-color:var(--color-brand)}
.cc-btn--accept:hover{background:var(--color-brand-hover);border-color:var(--color-brand-hover)}
.cc-btn--pick{background:var(--color-bg-beige-2);color:var(--color-text);border-color:var(--color-bg-beige-2)}
.cc-btn--pick:hover{background:var(--color-sand);border-color:var(--color-sand)}
.cc-btn--reject{background:transparent;color:var(--color-brand);border-color:var(--color-line)}
.cc-btn--reject:hover{border-color:var(--color-brand)}
.cc-btn--ghost{background:transparent;color:var(--color-brand);border-color:transparent;text-decoration:underline;text-underline-offset:3px}
.cc-btn:focus-visible{outline:2px solid var(--color-brand);outline-offset:3px}

@media (max-width:60em){
  .cc-banner__card{flex-direction:column;align-items:stretch}
  .cc-actions{flex-direction:column}
  .cc-actions .cc-btn{width:100%}
}
@media (prefers-reduced-motion:reduce){.cc-btn,.cc-sw__t,.cc-sw__t::after{transition:none}}
.cc-modal{position:fixed;inset:0;z-index:1000;display:none;align-items:center;justify-content:center;padding:16px}
.cc-modal.is-open{display:flex}
.cc-modal__veil{position:absolute;inset:0;background:rgba(40,33,27,.55)}
.cc-modal__panel{position:relative;background:#fff;color:var(--color-text);max-width:640px;width:100%;max-height:88vh;overflow:auto;border-radius:8px;box-shadow:0 40px 90px -30px rgba(0,0,0,.6);padding:clamp(22px,3vw,34px)}
.cc-modal__title{font-family:var(--font-display);font-weight:var(--fw-display);font-size:1.7rem;margin:0 0 6px;color:var(--color-text)}
.cc-modal__intro{font-family:var(--font-body);font-size:.98rem;color:var(--color-text-2);line-height:1.55;margin:0 0 14px}
.cc-modal__intro a{color:var(--color-brand);text-decoration:underline}
.cc-modal__close{position:absolute;top:12px;right:12px;width:44px;height:44px;border:0;background:transparent;color:var(--color-text-2);cursor:pointer;border-radius:6px;display:flex;align-items:center;justify-content:center;font-size:1.4rem;line-height:1}
.cc-modal__close:hover{background:var(--color-cream);color:var(--color-text)}
.cc-cat{display:grid;grid-template-columns:1fr auto;gap:2px 16px;align-items:center;padding:16px 0;border-top:1px solid var(--color-line)}
.cc-cat__name{grid-column:1;font-family:var(--font-body);font-weight:var(--fw-semibold);font-size:1.06rem;color:var(--color-text);margin:0}
.cc-cat__desc{grid-column:1;font-family:var(--font-body);font-size:.92rem;color:var(--color-text-2);line-height:1.5;margin:4px 0 0;max-width:54ch}
.cc-cat__ctrl{grid-column:2;grid-row:1/3;align-self:center;display:flex;align-items:center;gap:10px}
.cc-cat__state{font-family:var(--font-body);font-size:.8rem;color:var(--color-text-muted);font-weight:var(--fw-semibold);white-space:nowrap}
.cc-switch{position:relative;display:inline-block;width:52px;height:30px;flex:0 0 auto}
.cc-switch input{position:absolute;opacity:0;width:100%;height:100%;margin:0;cursor:pointer}
.cc-switch__track{position:absolute;inset:0;background:#a79f93;border-radius:30px;transition:background .18s;pointer-events:none}
.cc-switch__track::after{content:"";position:absolute;top:3px;left:3px;width:24px;height:24px;background:#fff;border-radius:50%;transition:transform .18s;box-shadow:0 1px 3px rgba(0,0,0,.3)}
.cc-switch input:checked+.cc-switch__track{background:var(--color-brand)}
.cc-switch input:checked+.cc-switch__track::after{transform:translateX(22px)}
.cc-switch input:disabled{cursor:not-allowed}
.cc-switch input:disabled+.cc-switch__track{opacity:.65}
.cc-switch input:focus-visible+.cc-switch__track{outline:3px solid var(--color-brand);outline-offset:3px}
.cc-modal__actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px;padding-top:20px;border-top:1px solid var(--color-line)}
.cc-modal__actions .cc-btn{flex:1 1 auto}
[data-cc-embed]{position:relative}
[data-cc-embed] .cc-facade{position:absolute;inset:0}
.cc-facade{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;text-align:center;min-height:200px;padding:24px;background:var(--color-cream);border:1px dashed var(--color-line)}
.cc-facade__txt{font-family:var(--font-body);font-size:.94rem;color:var(--color-text-2);line-height:1.5;max-width:46ch;margin:0}
.cc-facade__prov{font-weight:var(--fw-semibold);color:var(--color-text)}
.footer__legal .cc-settings-link{display:inline-flex;align-items:center;min-height:24px;background:none;border:0;padding:0;font:inherit;color:inherit;cursor:pointer;text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px;transition:color .2s}
.footer__legal .cc-settings-link:hover,.footer__legal .cc-settings-link:focus-visible{color:#fff}
@media (max-width:760px){
  .cc-banner{right:0}
  .cc-banner__card{max-width:none}
  .footer__legal .cc-settings-link{padding:6px 4px}
}
@media (prefers-reduced-motion:reduce){
  .cc-btn,.cc-switch__track,.cc-switch__track::after{transition:none}
}

/* Równa waga wizualna zgody i odmowy w pasku cookies.
   Wytyczne EDPB 03/2022 i stanowisko UODO: jeśli „Akceptuję" jest wyróżnione
   kolorem, a „Odrzucam" zostaje bladym konturem, wybór przestaje być swobodny —
   interfejs steruje decyzją. Sam rozmiar i krój to za mało, liczy się też
   wyrazistość. Oba przyciski dostają więc identyczne tło; „Zapisz wybrane"
   pozostaje beżowe, bo to trzecia droga, a nie przeciwstawna decyzja.
   W oknie ustawień „Zaakceptuj wszystkie" i „Odrzuć wszystkie" już wcześniej
   miały tę samą klasę, więc tam nic nie zmieniamy. */
.cc-banner .cc-btn--reject{background:var(--color-brand);color:#fff;border-color:var(--color-brand)}
.cc-banner .cc-btn--reject:hover{background:var(--color-brand-hover);border-color:var(--color-brand-hover)}