/* ============================================================
   Reha Medica Psychoterapia — warstwa własna serwisu.
   Ładowana PO style.css i usluga.css, których nie modyfikuje.

   Ikony pochodzą z projektu Claude Design „Ikony Psychoterapia v4"
   (claude.ai/design/p/fe0f3c94-9ed4-404d-8fb8-23ffcad46caf).
   W SVG kolory zamieniono na currentColor + --ico-blob, więc ikona
   dziedziczy paletę serwisu zamiast wozić własną.
   ============================================================ */

.picon{
  display:block;
  width:100%;
  height:auto;
  color:var(--color-brand);          /* kreska ikony */
  --ico-blob:var(--color-bg-beige-2); /* plama pod ikoną */
}
.picon--lg{max-width:168px}
.picon--md{max-width:96px}
.picon--sm{max-width:56px}
.picon--xs{max-width:40px}

/* --- sekcja „W jakich momentach psychoterapia może pomóc" --- */
/* ════════════════════════════════════════════════════════════════════
   SEKCJE „W jakich momentach psychoterapia może pomóc"

   Świadomie INNY język układu niż serwis główny (decyzja właściciela
   2026-07-31: „nie chcę duplikować wyglądu innej naszej strony").
   Serwis główny: gęsty, fotograficzny, ramki narożnikowe, ciepły brąz.
   Tutaj: rytm pion, dużo powietrza, ilustracja zamiast zdjęcia,
   chłodniejszy papier i oliwkowy atrament.

   Tokeny pochodzą z projektu klienta „Ikony Psychoterapia v4" — to jego
   własna paleta dla TEGO serwisu, nie wymyślone kolory.
   ════════════════════════════════════════════════════════════════════ */
.cases{
  /* KOLORYSTYKA = serwis główny (decyzja właściciela 2026-07-31: „kolorystyka ta sama").
     Odrębność tego serwisu niosą kroje pisma i język układu, nie paleta. */
  --psy-ink:var(--color-brand);
  --psy-paper:var(--color-bg-ivory);
  --psy-paper-2:var(--color-cream);
  --psy-muted:var(--color-text-muted);
  --psy-body:var(--color-text-2);
  --psy-line:var(--color-line);
  --ico-blob:var(--color-bg-beige-2);
  /* beż, nie ivory: sekcja danych nad tym blokiem jest ivory i bez różnicy
     tła obie zlewały się w jedną płachtę na 2500 px */
  background:var(--color-bg-beige);
}

.cases__head{
  max-width:var(--wrap);
  margin:0 auto;
  padding:88px 24px 0;
  text-align:center;
}
.cases__head .kicker{color:var(--psy-muted)}
.cases__h{
  max-width:26ch;
  margin:14px auto 0;
  font-family:var(--font-display);
  font-weight:var(--fw-display);
  font-size:clamp(1.9rem,1.2rem + 2.4vw,2.75rem);
  line-height:1.14;
  color:var(--psy-ink);
  text-wrap:balance;
}
.cases__intro{
  max-width:60ch;
  margin:18px auto 0;
  text-align:center;
  text-wrap:pretty;
  color:var(--psy-body);
}

/* — pojedyncza sytuacja —
   Zbita wersja: stały lewy szpalt (numer + ikona) i jedna kolumna tekstu.
   Naprzemienne odwracanie zdjęto — przy niskich sekcjach robiło zygzak zamiast rytmu,
   a stały szpalt czyta się szybciej przy przewijaniu. */
/* DWIE KOLUMNY. Poprzedni układ (szpalt 132 px + tekst) rozciągał sekcję na
   2969 px — 34% całej strony — a treść i tak siedziała na 40% szerokości.
   Wzorzec z rynku: Talkiatry pokazuje 11 stanów w zwartej siatce, MindHealth
   8 kategorii oferty w kaflach. Nikt nie daje jednej sytuacji na ekran. */
.cases__list{
  max-width:var(--wrap);
  margin:clamp(38px,5vw,56px) auto 0;
  padding:0 24px;
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  column-gap:clamp(40px,5vw,76px);
}
.case{
  display:flex;flex-direction:column;
  padding:30px 0 34px;
  border-top:1px solid var(--psy-line);
}
.case__top{display:flex;align-items:center;gap:16px;margin:0 0 14px}
.case__num{
  font-family:var(--font-display);font-weight:var(--fw-display);
  font-size:1.0625rem;
  letter-spacing:.08em;
  color:var(--psy-muted);
}
.case__ico{width:56px;height:auto;flex:0 0 auto;color:var(--psy-ink)}

/* stopka sekcji — zdanie, które wcześniej stało sześć razy, po jednym
   w każdym bloku, i odsyłało do nieistniejącego już „paska powyżej" */
.cases__stopka{
  max-width:var(--wrap);
  margin:clamp(30px,4vw,44px) auto 0;
  padding:0 24px;
  font-size:.9375rem;line-height:1.6;color:var(--psy-muted);
  text-wrap:pretty;
}
.cases__stopka a{color:var(--psy-ink);font-weight:var(--fw-semibold);
  border-bottom:1px solid var(--color-brand-taupe)}
.cases__stopka a:hover{border-bottom-color:var(--psy-ink)}
@media (max-width:62em){
  .cases__list{grid-template-columns:minmax(0,1fr)}
}
.case__h{
  margin:0;
  font-family:var(--font-display);
  font-weight:var(--fw-display);
  font-size:clamp(1.35rem,1.1rem + .85vw,1.7rem);
  line-height:1.18;
  color:var(--psy-ink);
  text-wrap:balance;
}
.case__lead{
  margin:12px 0 0;
  font-size:1.0625rem;
  line-height:1.55;
  color:var(--psy-ink);
  text-wrap:pretty;
}
.case__p{
  margin:10px 0 0;
  font-size:.9375rem;
  line-height:1.65;
  color:var(--psy-body);
  text-wrap:pretty;
}

/* Fakty ze źródła w jednym wierszu, rozdzielone kropką — zamiast dwukolumnowej
   tabelki z hairline'ami, która sama zajmowała 3 wiersze na sekcję. */
.case__list{
  display:flex;
  flex-wrap:wrap;
  gap:6px 0;
  margin:16px 0 0;
  padding:0;
  list-style:none;
  font-size:.875rem;
  color:var(--psy-muted);
}
.case__list li:not(:last-child)::after{
  content:"·";
  margin:0 10px;
  color:var(--psy-line);
}
.case__cta{
  display:inline-flex;
  align-self:flex-start;
  align-items:center;
  gap:9px;
  /* auto spycha odsyłacz na dół komórki — komórki siatki są równej wysokości,
     więc odsyłacze stoją w jednym rzędzie zamiast skakać za długością tekstu.
     Odstęp daje padding, bo margin jest tu zajęty przez wyrównanie. */
  margin-top:auto;
  padding-top:20px;
  padding-bottom:2px;
  border-bottom:1px solid var(--psy-ink);
  font-weight:var(--fw-semibold);
  font-size:.9375rem;
  color:var(--psy-ink);
  text-decoration:none;
}
.case__cta:focus-visible{outline-offset:5px}

.cases__note{
  max-width:66ch;
  margin:0 auto;
  padding:48px 24px 88px;
  text-align:center;
  text-wrap:pretty;
  font-size:.9375rem;
  color:var(--psy-body);
}

@media (max-width:48em){
  .cases__head{padding-top:64px}
  .cases__list{margin-top:40px}
  .case{padding:32px 0}
  .case__ico{width:48px}
  .cases__note{padding-bottom:64px}
}

/* --- ikona usługi w indeksie „Formy opieki" --- */
.svc__item{position:relative}
.svc__iico{
  flex:0 0 auto;
  width:44px;
  margin-right:14px;
  --ico-blob:transparent;   /* w gęstym indeksie plama tylko zaśmieca */
}
.svc__item:hover .svc__iico,
.svc__item:focus-visible .svc__iico{--ico-blob:var(--color-bg-beige-2)}

/* --- ikona przy nagłówku dostępności na stronie usługi --- */
.splate__ico{
  flex:0 0 auto;
  width:52px;
  margin-right:12px;
  --ico-blob:var(--color-bg-beige-2);
}
.splate__head{align-items:center}

/* --- ikony w listach usług (huby miast, strona usługi) --- */
.needs__item--ico{display:flex;align-items:center;gap:16px}
.needs__item--ico .needs__txt{flex:1 1 auto;min-width:0}
.needs__ico{
  flex:0 0 auto;
  width:48px;
  --ico-blob:transparent;
}
/* podkładka pod ikoną pojawia się tylko przy fokusie z klawiatury —
   wariant na najechanie kursorem zdjęty razem z resztą hoverów listy */
.needs__item--ico:focus-visible .needs__ico{--ico-blob:var(--color-bg-beige-2)}

@media (max-width:37.5em){
  .needs__ico{width:38px}
}

/* Ikona jest dekoracją obok tekstu — przy „ukryj obrazy" znika razem ze zdjęciami. */
:root[data-a11y-hideimg] .picon{display:none}

/* ════════════════════════════════════════════════════════════════════
   HERO STRONY GŁÓWNEJ — teza + router sytuacji + zdjęcie reagujące

   Ustalenia: 3 (zdanie, potem wybór), 5 (zdania jako interfejs),
   7 (jeden moment ruchu), oraz korekta 2026-08-02: każde hero ze zdjęciem,
   zdjęcie ma reagować na listę — przestaje być dekoracją.
   Header i stopka: identyczne z serwisem rehabilitacji (korekta 2026-08-02).
   ════════════════════════════════════════════════════════════════════ */

/* pasek miasta — treść strony, nie chrom; header zostaje nietknięty */
.citybar{border-bottom:1px solid var(--color-line);background:var(--color-bg-ivory)}
.citybar__in{
  display:flex;flex-wrap:wrap;align-items:center;gap:10px 20px;
  max-width:var(--wrap);margin:0 auto;padding:14px 24px;
}
.citybar__q{font-size:.75rem;letter-spacing:.14em;text-transform:uppercase;color:var(--color-text-muted)}
.citybar__opts{display:flex;flex-wrap:wrap;gap:4px 18px}
.citybar__opt{
  border:0;background:none;padding:3px 0;cursor:pointer;
  font-family:var(--font-body);font-size:.9375rem;color:var(--color-text-2);
  border-bottom:1px solid transparent;
}
.citybar__opt:hover{border-bottom-color:var(--color-brand-taupe)}
.citybar__opt[aria-pressed="true"]{color:var(--color-brand);font-weight:600;border-bottom-color:var(--color-brand)}
.citybar__tel{margin-left:auto;display:flex;align-items:baseline;gap:10px;white-space:nowrap}
.citybar__tel small{font-size:.75rem;letter-spacing:.1em;text-transform:uppercase;color:var(--color-text-muted)}
.citybar__tel a{font-weight:600;font-size:1.0625rem;color:var(--color-brand);
  border-bottom:1px solid var(--color-brand-taupe);padding-bottom:2px}
.citybar__tel a:hover{border-bottom-color:var(--color-brand)}
@media (max-width:52em){.citybar__tel{margin-left:0;width:100%}}

.hero2{padding:clamp(48px,7vw,84px) 0 clamp(56px,8vw,96px)}
.hero2__grid{
  display:grid;
  grid-template-columns:minmax(0,1fr) clamp(280px,30vw,420px);
  grid-template-areas:"teza fig" "cta fig" "list fig";
  gap:clamp(28px,4vw,44px) clamp(32px,5vw,72px);
  align-items:start;
  max-width:var(--wrap);margin:0 auto;padding:0 24px;
}
.hero2__teza{grid-area:teza}
.hero2__cta{grid-area:cta}
.hero2__fig{grid-area:fig}
.hero2__list{grid-area:list;align-self:start}
.hero2__teza{margin:0;font-family:var(--font-display);font-weight:var(--fw-display);color:var(--color-brand)}
.hero2__a{display:block;max-width:19ch;font-size:clamp(2rem,1.1rem + 3.2vw,3.25rem);line-height:1.1;text-wrap:balance}
.hero2__b{
  display:block;margin-top:1.1rem;max-width:34ch;
  font-family:var(--font-body);font-size:clamp(1rem,.9rem + .4vw,1.125rem);
  line-height:1.55;color:var(--color-text-2);
}
/* jedyny ruch na stronie: wejście tezy */
body:not(.rm-in) .hero2__a,body:not(.rm-in) .hero2__b{opacity:0;transform:translateY(10px)}
.rm-in .hero2__a,.rm-in .hero2__b{opacity:1;transform:none;
  transition:opacity .8s ease,transform .8s cubic-bezier(.2,.7,.3,1)}
.rm-in .hero2__b{transition-delay:.18s}
@media (prefers-reduced-motion:reduce){.hero2__a,.hero2__b{transition:none!important}}

.hero2__list{margin:clamp(32px,4.5vw,52px) 0 0;border-top:1px solid var(--color-line)}
.hero2__row{
  display:grid;grid-template-columns:52px minmax(0,1fr) 22px;
  align-items:center;gap:22px;
  padding:20px 0;border-bottom:1px solid var(--color-line);
  color:inherit;text-decoration:none;
}
.hero2__ico{width:52px;height:auto;color:var(--color-brand);--ico-blob:transparent}
.hero2__zd{
  font-family:var(--font-display);font-weight:var(--fw-display);
  font-size:clamp(1.1rem,.95rem + .7vw,1.4rem);line-height:1.3;
  color:var(--color-brand);text-wrap:pretty;
}
.hero2__do{
  display:block;margin-top:5px;
  font-size:.6875rem;letter-spacing:.12em;text-transform:uppercase;color:var(--color-text-muted);
}
/* Strzałki i separatory: wszystkie zjechały z taupe na text-muted. Taupe daje
   2,51:1 i motyw dopuszcza go wyłącznie na linie — na znaku widocznym dla oka
   automaty audytowe liczą go jak tekst i zgłaszają jako błąd kontrastu. */
.hero2__arw{color:var(--color-text-muted);justify-self:end}
.hero2__row:hover .hero2__ico,.hero2__row:focus-visible .hero2__ico{--ico-blob:var(--color-bg-beige-2)}
.hero2__row:hover .hero2__arw,.hero2__row:focus-visible .hero2__arw{color:var(--color-brand)}

/* zdjęcie reagujące — nie dekoracja, tylko odpowiedź na wskazane zdanie */
.hero2__fig{margin:0;position:relative}
.hero2__fig::before{content:'';display:block;padding-top:125%}  /* 4:5 */
.hero2__img{border-radius:var(--radius-img)}
.hero2__img{
  position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover;
  opacity:0;transition:opacity .45s ease;background:var(--color-bg-beige-2);
}
.hero2__img.is-on{opacity:1}
@media (prefers-reduced-motion:reduce){.hero2__img{transition:none}}
.hero2__cap{
  position:absolute;top:100%;left:0;right:0;margin:12px 0 0;font-size:.8125rem;line-height:1.45;color:var(--color-text-muted);
  min-height:2.6em;
}
@media (max-width:60em){
  /* jedna kolumna, kolejność z DOM: teza → zdjęcie → lista */
  .hero2__grid{grid-template-columns:1fr;grid-template-areas:"teza" "cta" "fig" "list"}
}

/* dostępność usługi w wybranym mieście */
.hero2__row[data-avail="no"]{opacity:.42}
.hero2__row[data-avail="no"] .hero2__do::after{content:" · nie w tym mieście"}
.hero2__row[data-avail="ask"] .hero2__do::after{content:" · zapytaj recepcję"}

/* Nagłówek serwisu jest `fixed` — treść musi go ominąć, a pasek miasta
   przykleić się dokładnie pod nim. Wysokości mierzy home.js (nagłówek
   kurczy się przy przewijaniu), z bezpiecznymi wartościami zapasowymi. */
body.is-home main{padding-top:var(--rm-h0,138px)}
.citybar{position:sticky;top:var(--rm-h,138px);z-index:90}
@media (max-width:56em){body.is-home main{padding-top:var(--rm-h0,120px)}}
/* kotwica #placowki celuje w pasek miasta — musi zatrzymać się pod nagłówkiem */
.citybar{scroll-margin-top:var(--rm-h,138px)}

/* ════════════════════════════════════════════════════════════════════
   NAGŁÓWEK MA TŁO OD RAZU

   W serwisie rehabilitacji nagłówek startuje przezroczysty, bo leży na
   ciemnym zdjęciu hero. Tutaj hero jest jasne, więc biały tekst na kości
   słoniowej dawał kontrast 1,05:1 — nagłówek był niewidoczny do pierwszego
   przewinięcia. Wymuszamy stan docelowy od pierwszej klatki.
   ════════════════════════════════════════════════════════════════════ */
.site-header,
.site-header:not(.is-scrolled){
  background:var(--color-brand-dark);
  border-bottom:1px solid rgba(255,255,255,.06);
}
/* scrim po zdjęciu hero nie ma już czego przyciemniać */
.site-header:not(.is-scrolled)::before,
.site-header:not(.is-scrolled)::after{background:none}
.site-header:not(.is-scrolled) .topstrip{background:var(--color-brand)}
.site-header:not(.is-scrolled) .topstrip::after{opacity:0}

/* ── domknięcie pętli: od zdania do telefonu ──────────────────────────
   Wiersz nie jest już jednym <a>, bo niesie DWIE akcje: zdanie prowadzi do
   opisu, telefon dzwoni. Zagnieżdżone odnośniki są niedozwolone, więc
   zdanie rozciąga swój obszar klikalny na cały wiersz pseudoelementem,
   a telefon leży nad nim w osi Z. */
.hero2__list{list-style:none;padding:0}
.hero2__row{position:relative}
.hero2__body{min-width:0}
.hero2__zd{display:block;color:var(--color-brand);text-decoration:none}
.hero2__zd::after{content:"";position:absolute;inset:0}      /* cały wiersz klikalny */
.hero2__row:hover .hero2__zd,
.hero2__row:focus-within .hero2__zd{text-decoration:underline;text-underline-offset:.16em}

/* linia akcji — pojawia się dopiero, gdy wiersz jest wskazany */
.hero2__act{
  display:block;max-height:0;overflow:hidden;opacity:0;
  font-size:.875rem;color:var(--color-text-2);
  transition:max-height .28s ease,opacity .28s ease,margin-top .28s ease;
}
.hero2__row:hover .hero2__act,
.hero2__row:focus-within .hero2__act{max-height:3.4em;opacity:1;margin-top:8px}
@media (prefers-reduced-motion:reduce){.hero2__act{transition:none}}
.hero2__act a{
  position:relative;z-index:1;                                /* nad obszarem zdania */
  font-weight:600;color:var(--color-brand);
  border-bottom:1px solid var(--color-brand-taupe);padding-bottom:1px;
}
.hero2__act a:hover{border-bottom-color:var(--color-brand)}
.hero2__act b{font-weight:400;color:var(--color-text-muted)}

/* siódma pozycja — bez ikony, wizualnie cichsza od sześciu sytuacji */
.hero2__row--else{border-top:1px solid var(--color-line)}
.hero2__row--else .hero2__zd{font-size:clamp(1rem,.9rem + .45vw,1.15rem);color:var(--color-text-2)}
.hero2__row--else:hover .hero2__zd,
.hero2__row--else:focus-within .hero2__zd{color:var(--color-brand)}

/* wiersz niedostępny w mieście nie jest wygaszany do nieczytelności —
   ma powiedzieć, GDZIE ta pomoc jest */
.hero2__row[data-avail="no"]{opacity:1}
.hero2__row[data-avail="no"] .hero2__zd,
.hero2__row[data-avail="no"] .hero2__ico{opacity:.5}
.hero2__row[data-avail="no"] .hero2__do::after,
.hero2__row[data-avail="ask"] .hero2__do::after{content:""}   /* komunikat przejmuje linia akcji */

/* ── nagłówek: ZERO nadpisań wymiarów ──────────────────────────────────
   Stały tu moje korekty (pasek 112 px, logo 82 px, mobile 106 px). Skutek:
   przejście po przewinięciu biegło 112→74 px zamiast 96→74, a logo 82→60
   zamiast 102→60 — czyli inny ruch niż w rehabilitacji.

   style.css jest kopią arkusza rehabilitacji i sam ustawia 96→74 oraz
   102→60. Zostawiamy to jemu; tutaj nie ma już nic o wysokościach. */

/* ════════════════════════════════════════════════════════════════════
   MOBILE — przemyślane osobno, nie zwężone (wymóg CLAUDE.md)

   Audyt 390 px wykrył trzy wady, wszystkie moje:
   1. linia akcji miała max-height:0 poza :hover — na dotyku NIE ISTNIAŁA,
      czyli numer telefonu był nieosiągalny na telefonie;
   2. topstrip rozpychał stronę do 422 px (mój tekst dłuższy niż w rehabilitacji);
   3. chrom zjadał 309 z 844 px ekranu, bo miasta zawijały się na dwa wiersze.
   ════════════════════════════════════════════════════════════════════ */
@media (max-width:56em){

  /* 1. na dotyku nie ma hovera — akcja jest widoczna od razu, zawsze */
  .hero2__act{max-height:none;opacity:1;margin-top:8px;transition:none}

  /* 2. własny, krótszy tekst paska górnego; oryginał chowamy */
  .topstrip__item:first-of-type,
  .topstrip__sep{display:none}
  .topstrip__item{font-size:.75rem}

  /* 3. pasek miasta zwarty: etykieta w jednym rzędzie z miastami,
     miasta w jednym przewijanym pasie zamiast dwóch zawiniętych wierszy */
  .citybar{position:static}          /* na małym ekranie przyklejanie zjada zbyt dużo */
  .citybar__in{gap:8px 12px;padding:10px 16px}
  .citybar__q{font-size:.6875rem;letter-spacing:.1em}
  .citybar__opts{
    flex-wrap:nowrap;overflow-x:auto;gap:16px;
    scrollbar-width:none;-webkit-overflow-scrolling:touch;
    padding-bottom:2px;
  }
  .citybar__opts::-webkit-scrollbar{display:none}
  .citybar__opt{font-size:.875rem;white-space:nowrap;min-height:32px}
  .citybar__tel{margin-left:0;width:100%;gap:8px}
  .citybar__tel small{font-size:.6875rem}

  /* zdjęcie hero: statyczne. Reagowanie na wskazanie to funkcja myszy —
     na dotyku pokazujemy jeden kadr i nie ładujemy pozostałych pięciu. */
  .hero2__fig{margin-bottom:38px}
  .hero2__fig::before{padding-top:60%}          /* 5:3 — niższy kadr oszczędza ekran */
  .hero2__img:not(.is-on){display:none}
  .hero2__cap{min-height:0;margin-top:8px}

  /* ikona w indeksie usług rozpychała odziedziczoną siatkę .svc__item
     o 58 px (44 ikona + 14 margines) i wypychała stronę poza ekran.
     Na małym ekranie indeks jest i tak gęsty — ikona niewiele wnosi. */
  .svc__iico{display:none}

  .hero2{padding:28px 0 56px}
  .hero2__grid{gap:0}
  .hero2__list{margin-top:28px}
  .hero2__row{grid-template-columns:38px minmax(0,1fr) 16px;gap:14px;padding:18px 0}
  .hero2__ico{width:38px}
}

/* ── niedostępne = niedostępne (decyzja właściciela 2026-08-02) ────────
   Wiersz traci href w JS; tu odbieramy mu też sygnały wizualne odnośnika. */
.hero2__row[data-avail="no"] .hero2__zd{
  cursor:default;text-decoration:none!important;
}
.hero2__row[data-avail="no"] .hero2__zd::after{content:none}   /* koniec klikalnego obszaru */
.hero2__row[data-avail="no"] .hero2__arw{opacity:0}
.hero2__row[data-avail="no"] .hero2__act b{color:var(--color-text-muted)}
.hero2__row[data-avail="no"]:hover .hero2__zd{text-decoration:none}

/* Odziedziczone z serwisu głównego: przy 360 px odnośnik powrotu
   („← Wróć do placówki Białogard") nie zawijał się i wypychał stronę o 16 px. */
@media (max-width:26em){
  .uend__inner{flex-wrap:wrap}
  .uend__back{white-space:normal;text-wrap:pretty}
}

/* ── 320 px: WCAG 2.2 SC 1.4.10 (reflow) ─────────────────────────────
   Przy najwęższym wymaganym ekranie trzy rzeczy wychodziły poza kadr.
   Dwie z nich to moje ikony w odziedziczonych siatkach, trzecia to karta
   placówki, której minimalna szerokość była większa niż ekran. */
@media (max-width:22.5em){
  /* przewijany pas miast musi mieć własne kadrowanie, inaczej ostatni
     przycisk mierzy się poza kontenerem */
  .citybar__opts{max-width:100%}
  .citybar__in{padding-left:14px;padding-right:14px}

  /* indeks usług: ikona już ukryta, ale strzałka nadal się nie mieści */
  .svc__iarrow{display:none}
  .svc__item{padding-right:8px}

  /* karta placówki miała min-width szerszy niż ekran */
  .pcard{min-width:0}
  .splate__cards{grid-template-columns:1fr}
}

/* Górny pasek w kolorze nagłówka — w rehabilitacji jest jaśniejszy od paska
   głównego, przez co nagłówek czyta się jako dwa oddzielne bloki.
   Tutaj ma być jedną bryłą. */
.site-header .topstrip,
.site-header:not(.is-scrolled) .topstrip{background:var(--color-brand-dark)}
/* Skoro oba pasy mają ten sam kolor, potrzebują linii, która je rozdziela.
   Serwis ma już do tego ::after — przywracamy ją i rozjaśniamy do bieli. */
.site-header .topstrip::after,
.site-header:not(.is-scrolled) .topstrip::after{
  opacity:1;background:rgba(255,255,255,.32);
}

/* ════════════════════════════════════════════════════════════════════
   STRONY PROSTE — FAQ, aktualności, wpis. Bez zdjęciowego pasa u góry:
   to strony do czytania, nie do robienia wrażenia.
   ════════════════════════════════════════════════════════════════════ */
/* ── STRONY BEZ HERO (404, FAQ, wpisy aktualności) ──────────────────────
   Nagłówek serwisu jest `position:fixed`, a nic nie odsuwało treści, więc H1
   wchodził pod belkę i był przycięty w połowie. Ta sama zmienna co na
   stronie głównej. */
body.no-hero main{padding-top:var(--rm-h0,138px)}

/* Okruszki są zaprojektowane pod ciemne hero: wyśrodkowane i w jasnych
   kremach (#e8ddcb, #bcae98). Na kości słoniowej dawało to dwa błędy naraz —
   pasek wyśrodkowany nad treścią wyrównaną do lewej oraz kontrast ok. 1,2:1,
   czyli daleko poniżej WCAG 2.2 AA. Tu przechodzą na kolory tekstowe. */
body.no-hero .ubread__list{justify-content:flex-start}
body.no-hero .ubread{color:var(--color-text-2)}
body.no-hero .ubread a{color:var(--color-brand);border-bottom-color:var(--color-brand-taupe)}
body.no-hero .ubread a:hover,
body.no-hero .ubread a:focus-visible{color:var(--color-brand);border-bottom-color:var(--color-brand)}
/* separator „/" jest dekoracją, więc bierze token przeznaczony do linii
   i dividerów — nie do tekstu (patrz komentarz przy zmiennej w style.css) */
body.no-hero .ubread__list li+li::before{color:var(--color-text-muted)}

.plain{padding:clamp(36px,5vw,64px) 0 clamp(64px,8vw,96px)}
.plain__head{max-width:var(--wrap);margin:0 auto;padding:0 24px}
.plain__h{
  margin:14px 0 0;max-width:24ch;
  font-family:var(--font-display);font-weight:var(--fw-display);
  font-size:clamp(1.9rem,1.2rem + 2.4vw,2.9rem);line-height:1.12;
  color:var(--color-brand);text-wrap:balance;
}
.plain__lead{margin:16px 0 0;max-width:62ch;font-size:1.0625rem;line-height:1.6;color:var(--color-text-2);text-wrap:pretty}
.plain__body{max-width:var(--wrap);margin:clamp(32px,4vw,48px) auto 0;padding:0 24px}
.plain__body p{max-width:64ch;line-height:1.7;color:var(--color-text-2)}
.plain__note{max-width:var(--wrap);margin:clamp(40px,5vw,64px) auto 0;padding:0 24px;
  font-size:.9375rem;color:var(--color-text-muted)}
.plain__note a{color:var(--color-brand);border-bottom:1px solid var(--color-brand-taupe)}

/* FAQ — rozwijane, pierwsze otwarte. <details> działa bez JS. */
.qa__list{max-width:var(--wrap);margin:clamp(32px,4vw,52px) auto 0;padding:0 24px}
.qa{border-top:1px solid var(--color-line)}
.qa:last-of-type{border-bottom:1px solid var(--color-line)}
.qa__q{
  list-style:none;cursor:pointer;padding:22px 40px 22px 0;position:relative;
  font-family:var(--font-display);font-weight:var(--fw-display);
  font-size:clamp(1.1rem,.95rem + .6vw,1.35rem);line-height:1.3;color:var(--color-brand);
}
.qa__q::-webkit-details-marker{display:none}
.qa__q::after{
  content:"";position:absolute;right:6px;top:50%;width:11px;height:11px;
  border-right:1.5px solid var(--color-brand-taupe);border-bottom:1.5px solid var(--color-brand-taupe);
  transform:translateY(-70%) rotate(45deg);transition:transform .25s ease;
}
.qa[open] .qa__q::after{transform:translateY(-30%) rotate(-135deg)}
.qa__q:hover{color:var(--color-brand-hover)}
.qa__a{padding:0 0 26px}
.qa__a p{margin:0 0 12px;max-width:64ch;line-height:1.7;color:var(--color-text-2)}
.qa__more{
  display:inline-flex;gap:8px;margin-top:6px;padding-bottom:2px;
  font-weight:600;font-size:.9375rem;color:var(--color-brand);
  border-bottom:1px solid var(--color-brand-taupe);
}
.qa__more:hover{border-bottom-color:var(--color-brand)}

/* Aktualności */
.post__list{max-width:var(--wrap);margin:clamp(32px,4vw,52px) auto 0;padding:0 24px}
.post{padding:26px 0;border-top:1px solid var(--color-line)}
.post:last-child{border-bottom:1px solid var(--color-line)}
.post__meta{display:flex;flex-wrap:wrap;align-items:baseline;gap:14px;margin:0 0 10px;
  font-size:.75rem;letter-spacing:.1em;text-transform:uppercase;color:var(--color-text-muted)}
.post__cat{color:var(--color-brand)}
.post__t{margin:0;font-family:var(--font-display);font-weight:var(--fw-display);
  font-size:clamp(1.15rem,1rem + .7vw,1.5rem);line-height:1.25;text-wrap:pretty}
.post__t a{color:var(--color-brand)}
.post__t a:hover{text-decoration:underline;text-underline-offset:.16em}
.post__lead{margin:10px 0 0;max-width:64ch;line-height:1.6;color:var(--color-text-2);text-wrap:pretty}

/* ════════════════════════════════════════════════════════════════════
   BLOG — lista i artykuł

   Sekcja zastąpiła `/aktualnosci/`, gdzie każdy wpis był 60-słową zajawką
   z przyciskiem wyprowadzającym na serwis główny. Teraz wpisy niosą pełną
   treść, mają zdjęcie i są przypięte do usługi, której dotyczą.
   ════════════════════════════════════════════════════════════════════ */
.blog__grupa{max-width:var(--wrap);margin:clamp(38px,5vw,60px) auto 0;padding:0 24px}
.blog__grupa:first-of-type{margin-top:0}
.blog__h{margin:0;font-family:var(--font-display);font-weight:var(--fw-display);
  font-size:clamp(1.7rem,2.6vw,2.3rem);line-height:1.12;color:var(--color-brand)}
.blog__opis{margin:12px 0 0;max-width:56ch;line-height:1.6;color:var(--color-text-2);
  text-wrap:pretty}

/* Kafel: zdjęcie po lewej, treść po prawej. Zdjęcie ma stały stosunek boków,
   więc lista nie skacze przy doczytywaniu obrazów. */
.post{display:grid;grid-template-columns:260px 1fr;gap:clamp(20px,2.6vw,34px);
  align-items:start;padding:clamp(20px,2.4vw,28px) 0;border-top:1px solid var(--color-line)}
.post__foto{display:block;overflow:hidden;border-radius:var(--radius-img,10px);
  background:var(--color-bg-beige);aspect-ratio:4/3}
.post__foto img{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .5s cubic-bezier(.22,.61,.36,1)}
.post:hover .post__foto img{transform:scale(1.03)}
.post__meta{gap:12px}
.post__usluga{color:var(--color-text-2)}
@media (prefers-reduced-motion:reduce){.post__foto img{transition:none}
  .post:hover .post__foto img{transform:none}}
@media (max-width:44em){
  .post{grid-template-columns:1fr;gap:16px}
  .post__foto{aspect-ratio:16/9}
}

/* Artykuł. Miara 66 znaków — dłuższy wiersz męczy przy czytaniu ciągiem,
   a to jedyne strony w serwisie z prozą dłuższą niż kilka akapitów. */
.art{max-width:var(--wrap);margin:clamp(28px,3.6vw,44px) auto 0;padding:0 24px}
.art>p,.art>ul{max-width:66ch}
.art__lead{margin:14px 0 clamp(24px,3vw,34px);font-size:clamp(1.08rem,1.5vw,1.24rem);
  line-height:1.55;color:var(--color-brand);text-wrap:pretty}
.art>p{margin:0 0 18px;line-height:1.75;color:var(--color-text-2)}
.art__h{margin:clamp(30px,3.4vw,42px) 0 14px;font-family:var(--font-display);
  font-weight:var(--fw-display);font-size:clamp(1.4rem,2.1vw,1.85rem);line-height:1.16;
  color:var(--color-brand)}
.art__ul{margin:0 0 20px;padding:0;list-style:none}
.art__ul li{position:relative;padding-left:26px;margin-bottom:9px;line-height:1.65;
  color:var(--color-text-2)}
.art__ul li::before{content:"";position:absolute;left:6px;top:.68em;width:7px;height:7px;
  border-radius:50%;background:var(--color-sand)}
.art__dane{margin:clamp(22px,2.6vw,30px) 0 0;padding:22px 26px;list-style:none;
  background:var(--color-bg-beige);border-radius:var(--radius-img,10px);max-width:66ch}
.art__dane li{line-height:1.7;color:var(--color-text-2)}
.art__dane li+li{margin-top:6px}

.art__cta{max-width:var(--wrap);margin:clamp(38px,4.6vw,56px) auto 0;padding:0 24px}
.art__cta-lab{margin:0 0 14px;font-size:.78rem;letter-spacing:.11em;text-transform:uppercase;
  color:var(--color-text-muted)}
.art__zobacz{max-width:var(--wrap);margin:clamp(34px,4vw,48px) auto 0;padding:0 24px;
  color:var(--color-text-2)}
.art__zobacz a{color:var(--color-brand);border-bottom:1px solid var(--color-brand-taupe)}

/* Tytuły artykułów bywają długie — na hero usług mieściły się w jednym wierszu,
   tutaj muszą znieść trzy, więc skala jest niższa i miara ograniczona. */
.shero--art .shero__title{font-size:clamp(1.9rem,3.6vw,3.1rem);max-width:20ch;
  margin-left:auto;margin-right:auto}

/* ── odnośnik „Przejdź do treści" nie może wystawać ───────────────────
   Serwis chowa go przez `top:-48px`, ale element ma 49–50 px wysokości
   (zależnie od kroju), więc 1–2 px zostawało widoczne u góry strony jako
   jasna kreska szerokości 188 px — jego tło jest jaśniejsze od górnego paska.
   Ta sama wada jest w serwisie rehabilitacji (1 px), tam mniej widoczna,
   bo nagłówek startuje przezroczysty na zdjęciu.

   Zamiast innej magicznej liczby: przesuwamy o WŁASNĄ wysokość elementu,
   więc poprawka jest odporna na zmianę kroju, stopnia i paddingu. */
.skip-link{
  /* Odnośnik był chowany przesunięciem POZA górną krawędź dokumentu
     (`position:absolute` + `translateY(-110%)`). Element dalej tam FIZYCZNIE
     był — tyle że nad początkiem strony. Przy szybkim powrocie na górę
     telefon przewija z rozpędem poza zero i to miejsce staje się widoczne,
     więc „Przejdź do treści" wskakiwał na moment na ekran.

     Teraz jest schowany klasycznie: jeden piksel, przycięty, bez przesunięcia
     — nie ma czego odsłonić żadnym rozpędem. Czytniki ekranu i tabulator
     nadal go widzą, bo nie ma tu `display:none` ani `visibility:hidden`. */
  top:auto;left:auto;
  width:1px;height:1px;padding:0;margin:0;
  overflow:hidden;clip-path:inset(50%);white-space:nowrap;
  transform:none;transition:none;
}
.skip-link:focus{
  /* Po dojściu tabulatorem wraca jako normalny przycisk — i to `fixed`,
     żeby był widoczny niezależnie od tego, jak daleko strona jest przewinięta. */
  position:fixed;top:12px;left:16px;
  width:auto;height:auto;padding:10px 18px;
  overflow:visible;clip-path:none;
}

/* ════════════════════════════════════════════════════════════════════
   SEKCJE STRONY GŁÓWNEJ — wspólna gramatyka

   Kolejność ułożona pod drogę pacjenta, nie pod odziedziczony układ:
     sytuacje → pierwsza wizyta → zakres → koszt → pytania → gdzie → co słychać
   Rytm tła: ivory / beż na przemian, żeby sekcje się od siebie odklejały
   bez ramek i kart (CLAUDE.md odrzuca powtarzalne siatki zaokrąglonych kart).
   ════════════════════════════════════════════════════════════════════ */
.sec{padding:clamp(56px,7vw,92px) 0}
.sec--beige{background:var(--color-bg-beige)}
.sec__head{max-width:60ch;margin:0 0 clamp(32px,4vw,48px)}
.sec__h{
  margin:12px 0 0;
  font-family:var(--font-display);font-weight:var(--fw-display);
  font-size:clamp(1.65rem,1.15rem + 1.9vw,2.4rem);line-height:1.14;
  color:var(--color-brand);text-wrap:balance;
}
.sec__lead{margin:14px 0 0;font-size:1.0625rem;line-height:1.6;color:var(--color-text-2);text-wrap:pretty}
.sec__more{
  display:inline-flex;align-items:center;gap:9px;margin-top:clamp(28px,3vw,38px);
  padding-bottom:2px;border-bottom:1px solid var(--color-brand);
  font-weight:600;font-size:.9375rem;color:var(--color-brand);
}

/* ── Pasek „bezpłatnie" tuż pod hero ──
   Wzorzec z Almy: najmocniejszy potwierdzony fakt cenowy nie czeka
   do połowy strony. Wąski pas, nie karta — ma informować, nie krzyczeć. */
.darmo{background:var(--color-brand);color:var(--color-bg-ivory)}
/* Znaczek jest teraz pozycjonowany absolutnie, więc wiersz nie musi go
   mieścić — zdanie zaczyna się od lewej krawędzi. Górne dopełnienie
   robi miejsce na dolną połowę znaczka. */
.darmo__in{padding:20px 24px 16px}
.darmo__tag{
  padding:4px 11px;border-radius:100px;
  background:var(--color-bg-ivory);color:var(--color-brand);
  font-size:.6875rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;
}
.darmo__t{margin:0;font-size:.9375rem;line-height:1.5;color:rgba(252,250,241,.92)}
.darmo__t a{border-bottom:1px solid rgba(252,250,241,.45)}
.darmo__t a:hover{border-bottom-color:var(--color-bg-ivory)}

/* ── Jak wygląda pierwsza wizyta ──
   Sekwencja z ciągłą linią, nie trzy osobne karty: to jest droga, nie zestaw.
   Kadra na wierzchu — badania rynku PL mówią, że zaufanie buduje informacja
   o tym, KTO przyjmie, a nie sam opis usługi. */
/* Jedyne zdjęcie poniżej hero. Wchodzi w miejsce, które i tak było puste,
   więc nie wydłuża sekcji — a daje stronie oddech po czterech blokach
   samego tekstu. Kadr autentyczny, nie stockowy. */
@media (max-width:60em){.wiz__foto{display:none}}

/* stary układ pionowy kroków usunięty — kroki idą teraz poziomo */
.wiz__kh{margin:2px 0 0;font-family:var(--font-display);font-weight:var(--fw-display);
  font-size:clamp(1.1rem,1rem + .5vw,1.3rem);line-height:1.25;color:var(--color-brand)}
.wiz__kp{margin:8px 0 0;line-height:1.65;color:var(--color-text-2);text-wrap:pretty;max-width:52ch}

.wiz__ulga b{color:var(--color-brand)}
.wiz__uwaga{grid-column:1/-1;margin:16px 0 0;font-size:.875rem;color:var(--color-text-muted);max-width:70ch}
@media (max-width:60em){
  .wiz__grid{grid-template-columns:1fr;gap:32px}
  .wiz__ulga,.wiz__uwaga{grid-column:auto}
}

/* ── 2. Zakres pomocy — pięć usług ── */
.zakres__list{margin:0;padding:0;list-style:none;border-top:1px solid var(--color-line)}
/* Ikony z projektu klienta w pełnej skali. Przy 56 px były znaczkiem obok
   tekstu; przy 92 px niosą rytm sekcji — a to jedyny element graficzny, jaki
   ta strona ma poza zdjęciami. Wiersze dostają przy tym więcej powietrza,
   bo „Pięć form opieki" to sekcja, która sprzedaje, a wyglądała najlżej. */
.zakres__a{
  display:grid;grid-template-columns:92px minmax(0,1fr) 22px;align-items:center;gap:30px;
  padding:28px 0;border-bottom:1px solid var(--color-line);
}
.zakres__ico{width:92px;color:var(--color-brand);--ico-blob:var(--color-bg-beige-2)}
.zakres__t{display:block;font-family:var(--font-display);font-weight:var(--fw-display);
  font-size:clamp(1.1rem,.98rem + .5vw,1.3rem);line-height:1.25;color:var(--color-brand)}
.zakres__d{display:block;margin-top:5px;font-size:.9375rem;line-height:1.5;color:var(--color-text-2)}
.zakres__arw{color:var(--color-text-muted);justify-self:end}  /* nie taupe: strzałka ma aria-hidden, więc formalnie jest dekoracją
     i próg WCAG jej nie obejmuje — ale automaty (Lighthouse, axe) liczą ją
     jak tekst i zgłaszają 2,51:1. Ciemniejszy odcień zamyka temat. */
.zakres__a:hover .zakres__t{text-decoration:underline;text-underline-offset:.16em}
.zakres__a:hover .zakres__ico{--ico-blob:var(--color-line)}
.zakres__a:hover .zakres__arw{color:var(--color-brand)}
.zakres__i[data-avail="no"]{opacity:.42}
.zakres__i[data-avail="no"] .zakres__d::after{content:" · niedostępne w tym mieście"}

/* ── 3. Ile to kosztuje ── */
.koszt__grid{display:grid;grid-template-columns:minmax(0,26rem) minmax(0,1fr);gap:clamp(32px,5vw,72px);align-items:start}
.koszt__grid .sec__head{margin-bottom:0}
.koszt__list{margin:0}
.koszt__i{padding:18px 0;border-top:1px solid var(--color-line)}
.koszt__i:last-child{border-bottom:1px solid var(--color-line)}
.koszt__i dt{font-family:var(--font-display);font-weight:var(--fw-display);font-size:1.125rem;color:var(--color-brand)}
.koszt__i dd{margin:6px 0 0;line-height:1.6;color:var(--color-text-2)}
.koszt__i dd b{color:var(--color-brand);font-weight:600}
.koszt__i--free dt::after{content:"bezpłatnie";margin-left:10px;padding:2px 9px;
  border-radius:100px;background:var(--color-brand);color:var(--color-bg-ivory);
  font-family:var(--font-body);font-size:.6875rem;letter-spacing:.08em;text-transform:uppercase;vertical-align:middle}
@media (max-width:60em){.koszt__grid{grid-template-columns:1fr}}

/* ── 4. Najczęstsze pytania (zajawka) ── */
/* Ten sam dwukolumnowy rytm co „Ile to kosztuje" i „Jak wygląda pierwsza
   wizyta": tytuł po lewej, treść po prawej. Wcześniej akordeon stał sam na
   ~700 px z 1132 i prawe 40% szerokości zostawało puste. */
.pyt__grid{display:grid;grid-template-columns:minmax(0,26rem) minmax(0,1fr);
  gap:clamp(32px,5vw,72px);align-items:start}
.pyt__grid .sec__head{margin-bottom:0}
.pyt__lead{margin:16px 0 0;font-size:.9375rem;line-height:1.6;color:var(--color-text-2);text-wrap:pretty}
.pyt__intro .sec__more{margin-top:22px}
@media (max-width:60em){.pyt__grid{grid-template-columns:minmax(0,1fr)}}
.pyt__list{max-width:none}
.pyt__list .qa__a p{margin:0}

/* ── 6. Aktualności (zajawka) ── */
.akt__list{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:0 clamp(24px,3vw,40px);margin:0;padding:0;list-style:none}
.akt__a{display:block;padding:20px 0;border-top:1px solid var(--color-line)}
.akt__meta{display:block;font-size:.75rem;letter-spacing:.1em;text-transform:uppercase;color:var(--color-text-muted)}
.akt__t{display:block;margin-top:9px;font-family:var(--font-display);font-weight:var(--fw-display);
  font-size:clamp(1.05rem,.95rem + .4vw,1.2rem);line-height:1.3;color:var(--color-brand);text-wrap:pretty}
.akt__a:hover .akt__t{text-decoration:underline;text-underline-offset:.16em}

@media (max-width:56em){
  .sec{padding:58px 0}
  .zakres__a{grid-template-columns:60px minmax(0,1fr) 16px;gap:18px;padding:22px 0}
  .zakres__ico{width:60px}
}

/* Blok ankiety satysfakcji stąd usunięty — sekcja odpowiada na pytanie
   „co się wydarzy na pierwszej wizycie", a ankieta jest sprawą po wizycie
   i odciągała uwagę od jedynej rzeczy do zrobienia. Odsyłacz zostaje
   w stopce. */
/* rozciągnięcie sekcji — więcej powietrza między krokami i wokół całości */
.wiz{padding-top:clamp(64px,8vw,110px);padding-bottom:clamp(64px,8vw,110px)}
.wiz__kh{font-size:clamp(1.15rem,1rem + .6vw,1.4rem)}
.wiz__kp{margin-top:10px;font-size:1.0625rem;line-height:1.7}

/* ════════════════════════════════════════════════════════════════════
   HERO LŻEJSZE — wzorzec z centrumsobota.pl / UWAŻNIE

   Tam działa cisza, nie gęstość: jedno duże zdanie, krótki lead, dwa CTA,
   dużo powietrza, zero animacji. Moje hero miało w każdym z siedmiu wierszy
   ikonę, wersalikową etykietę usługi, strzałkę i linię akcji — cztery
   sygnały naraz, w tym etykietę powtórzoną trzy razy („Poradnia
   psychologiczna" przy trzech różnych sytuacjach).

   Zostawiam w wierszu SAMO ZDANIE. Nazwa usługi wraca w linii akcji,
   czyli dopiero wtedy, gdy pacjent tym wierszem faktycznie się zainteresuje.
   ════════════════════════════════════════════════════════════════════ */
.hero2{padding-top:clamp(56px,7vw,88px)}
.hero2__a{font-size:clamp(2.1rem,1.15rem + 3.5vw,3.6rem);line-height:1.06;max-width:17ch}
.hero2__b{margin-top:1.3rem;font-size:clamp(1.0625rem,.95rem + .5vw,1.25rem);max-width:36ch}

/* dwa CTA — pierwszy pełny, drugi cichy. Jak w UWAŻNIE. */
.hero2__cta{display:flex;flex-wrap:wrap;align-items:center;gap:14px 26px;margin-top:clamp(26px,3vw,36px)}
.hero2__cta1{
  padding:13px 26px;background:var(--color-brand);color:var(--color-bg-ivory);
  font-weight:600;font-size:.9375rem;
}
.hero2__cta1:hover{background:var(--color-brand-hover)}
.hero2__cta2{
  display:inline-flex;align-items:center;gap:8px;padding-bottom:2px;
  border-bottom:1px solid var(--color-brand-taupe);
  font-size:.9375rem;color:var(--color-text-2);
}
.hero2__cta2:hover{color:var(--color-brand);border-bottom-color:var(--color-brand)}

/* wiersze: więcej powietrza, większe zdanie, mniej sygnałów */
.hero2__list{margin-top:clamp(40px,5vw,64px)}
.hero2__row{padding:26px 0;grid-template-columns:52px minmax(0,1fr) 20px}
.hero2__zd{font-size:clamp(1.15rem,1rem + .75vw,1.5rem);line-height:1.32}
/* strzałka pojawia się dopiero przy wskazaniu — w spoczynku lista jest cicha */
.hero2__arw{opacity:0;transition:opacity .25s ease}
.hero2__row:hover .hero2__arw,.hero2__row:focus-within .hero2__arw{opacity:1;color:var(--color-brand)}
.hero2__act{font-size:.8125rem;letter-spacing:.02em}
.hero2__act b{color:var(--color-text-muted);font-weight:400}
@media (prefers-reduced-motion:reduce){.hero2__arw{transition:none}}
@media (max-width:56em){
  .hero2__arw{opacity:.5}          /* na dotyku nie ma wskazania — strzałka musi być widoczna */
  .hero2__row{padding:20px 0}
}

/* ════════════════════════════════════════════════════════════════════
   HERO — KOMPOZYCJA ZAMIAST ROZCIĄGANIA

   Pomiar pokazał, dlaczego nie zachęcało: na laptopie 1440×760 widoczne
   było ZERO z siedmiu wierszy. Chrom 240 px, potem 88 px pustki, teza,
   80 px pustki, CTA, 109 px pustki — i dopiero lista. Pacjent widział
   nagłówek, dwa przyciski i zdjęcie. Nic, co można zrobić.

   Luki były wszędzie jednakowo duże, więc nic się nie grupowało.
   Teraz: teza + lead + CTA to JEDNA zwarta grupa, dopiero po niej duża
   przerwa i lista. Tak działa powietrze w centrumsobota.pl — ciasne
   grupy, szerokie przerwy między nimi.
   ════════════════════════════════════════════════════════════════════ */
.hero2{padding-top:clamp(28px,3vw,44px);padding-bottom:clamp(48px,6vw,76px)}
.hero2__grid{gap:0 clamp(32px,5vw,72px)}

/* grupa 1: teza → lead → CTA, ciasno */
.hero2__a{font-size:clamp(2rem,1.1rem + 3vw,3.1rem);line-height:1.08;max-width:16ch}
.hero2__b{margin-top:.95rem;font-size:clamp(1rem,.92rem + .4vw,1.15rem);max-width:34ch;line-height:1.5}
.hero2__cta{margin-top:26px;align-self:start}

/* przerwa dopiero tutaj — oddziela grupę od listy */
.hero2__list{margin-top:clamp(34px,4vw,52px);align-self:start}
.hero2__row{padding:20px 0}
.hero2__zd{font-size:clamp(1.1rem,.98rem + .62vw,1.38rem);line-height:1.3}

/* zdjęcie wypełnia całą wysokość kolumny zamiast wisieć jako kadr 4:5 —
   dzięki temu obie kolumny kończą się razem i hero czyta się jak kompozycja */
.hero2__fig{align-self:stretch;height:100%;min-height:420px}
.hero2__fig::before{display:none}
.hero2__cap{position:static;margin-top:10px}
@media (max-width:60em){
  .hero2__fig{height:auto;min-height:0}
  .hero2__fig::before{display:block;padding-top:60%}
}

/* Ostatnie zaciśnięcie pierwszego ekranu — cel: pacjent widzi minimum
   trzy zdania, w które może kliknąć, zanim cokolwiek przewinie. */
.hero2{padding-top:clamp(22px,2.4vw,34px)}
.hero2__cta{margin-top:22px}
.hero2__list{margin-top:clamp(26px,3vw,38px)}
.hero2__row{padding:17px 0}

/* ── KOREKTA: zdjęcie nie może być rozciągane na wysokość kolumny ──
   Rozciągnięcie do proporcji 0,44 przy źródle 0,8 kazało `object-fit:cover`
   wyciąć 40% szerokości z obu stron. We wszystkich sześciu kadrach ludzie
   stoją przy krawędziach, a w środku jest okno — więc kadrowanie usuwało
   OBIE osoby i zostawiało same żaluzje. Pierwszy ekran nie miał emocji,
   bo nie miał na zdjęciu człowieka.

   Kolumna dostaje proporcję źródła 4:5, czyli zero przycięcia w poziomie. */
.hero2__fig{align-self:start;height:auto;min-height:0}
.hero2__fig::before{display:block;padding-top:125%}   /* 4:5 — dokładnie jak plik */

/* ════════════════════════════════════════════════════════════════════
   HERO — LISTA JEST AKCJĄ

   Zmiana założenia, nie odstępów. „Zadzwoń do recepcji" jako główne CTA
   było błędem: dla kogoś z lękiem społecznym albo w kryzysie telefon to
   najdroższa możliwa czynność. Najtańszy pierwszy krok, jaki mamy, to
   wskazanie własnej sytuacji — czyli lista. Leżała pod zgięciem, przykryta
   przyciskiem, który odstraszał.

   Teza dostaje pełną szerokość i schodzi do dwóch wierszy. Lista wchodzi
   od razu pod nią. Zdjęcie zwęża się i równa z PIERWSZYM WIERSZEM listy,
   nie z tezą — przestaje konkurować, zaczyna towarzyszyć.
   „Umów wizytę" zostaje w nagłówku, więc hero nie potrzebuje przycisku.
   ════════════════════════════════════════════════════════════════════ */
.hero2__grid{
  grid-template-columns:minmax(0,1fr) clamp(260px,24vw,340px);
  grid-template-areas:"teza teza" "list fig";
  gap:0 clamp(32px,4vw,60px);
}
.hero2__a{max-width:20ch;font-size:clamp(1.9rem,1.2rem + 2.4vw,2.7rem);line-height:1.1}
.hero2__b{max-width:52ch;margin-top:.85rem}
.hero2__b b{color:var(--color-brand);font-weight:600}
.hero2__list{margin-top:clamp(26px,3vw,36px)}
.hero2__fig{margin-top:clamp(26px,3vw,36px)}   /* równo z pierwszym wierszem listy */
.hero2__pod{
  grid-area:auto;grid-column:1/2;
  margin:22px 0 0;font-size:.9375rem;color:var(--color-text-muted);
}
.hero2__pod a{color:var(--color-text-2);border-bottom:1px solid var(--color-brand-taupe)}
.hero2__pod a:hover{color:var(--color-brand);border-bottom-color:var(--color-brand)}
@media (max-width:60em){
  .hero2__grid{grid-template-columns:1fr;grid-template-areas:"teza" "fig" "list"}
  .hero2__fig{margin-top:22px}
  .hero2__pod{grid-column:auto}
}

/* ════════════════════════════════════════════════════════════════════
   HERO PEŁNOEKRANOWE — wzorzec Grow Therapy

   Zdjęcie na całą szerokość i wysokość, nagłówek na nim, w środku widget
   z dwoma polami wyboru. U nich „stan" + „ubezpieczenie", tutaj MIASTO
   i SYTUACJA — to one decydują, dokąd pacjent ma zadzwonić.

   Poprzednie hero przegrywało, bo jedyna rzecz do zrobienia (lista siedmiu
   zdań) leżała pod zgięciem. Widget mieści się w dwóch wierszach, więc
   akcja jest widoczna od pierwszej chwili na każdym ekranie.
   ════════════════════════════════════════════════════════════════════ */
.hero3{
  position:relative;isolation:isolate;
  /* Wysokość dobrana tak, by hero mieściło kartę w stanie PEŁNYM — z nazwą
     usługi, numerem recepcji i przyciskiem. Wcześniej hero było liczone pod
     stan pusty i po wybraniu obu pól rosło o zmierzone 57 px, ściągając całą
     stronę w dół. Teraz jest od razu tak wysokie, jak będzie po wyborze. */
  min-height:clamp(700px,83vh,860px);
  display:flex;align-items:center;
  padding:clamp(40px,6vw,72px) 0;
  background:var(--color-brand-dark);
}
.hero3__media{position:absolute;inset:0;z-index:-1;overflow:hidden}
.hero3__img{
  /* Kadr obniżony: obraz jest o 12% wyższy od pola i zaczepiony GÓRĄ, więc
     to, co na nim jest, zjeżdża w dół, a nadmiar ucina się od spodu.
     Samo kadrowanie pliku nie wystarcza — proporcja źródła zrównała się
     z proporcją hero, więc `cover` nie ma czego przycinać w pionie.
     104% zamiast 112%: przy mocniejszym zbliżeniu notatnik, na którym
     specjalistka pisze, wychodził poza dolną krawędź.
     Działa tak samo na desktopie i na telefonie, bo to jedna reguła. */
  position:absolute;inset:0 0 auto 0;width:100%;height:104%;object-fit:cover;
  object-position:center top;
  opacity:0;transition:opacity .6s ease;
}
.hero3__img.is-on{opacity:1}
@media (prefers-reduced-motion:reduce){.hero3__img{transition:none}}
/* czytelność tekstu na zdjęciu — gradient od lewej, nie płaskie przyciemnienie:
   twarze po prawej zostają widoczne */
.hero3__scrim{
  position:absolute;inset:0;
  background:linear-gradient(100deg,
    rgba(38,31,24,.92) 0%, rgba(38,31,24,.82) 34%,
    rgba(38,31,24,.55) 58%, rgba(38,31,24,.28) 100%);
}
.hero3__in{
  position:relative;width:100%;max-width:var(--wrap);margin:0 auto;padding:0 24px;
}
/* Powód, dla którego hero się nie składało: H1 łamał się na 19ch (~500 px),
   a panel miał 660 px. Dwie różne prawe krawędzie w odległości 160 px od
   siebie — oko czyta to jako dwa niezwiązane obiekty rzucone na zdjęcie.
   Teraz wszystko siedzi w jednej kolumnie: jedna lewa i jedna prawa
   krawędź, wspólna dla tytułu, leadu i panelu. */
/* Układ jak w rehabilitacji: tekst po lewej, karta po prawej.
   Tam po lewej stoją DWA przyciski („Umów wizytę", „Znajdź usługę"), a karta
   po prawej ma trzeci — konkurują o to samo kliknięcie. Tutaj po lewej nie ma
   przycisku w ogóle: jest telefon, czyli inna droga dla kogoś, kto nie chce
   wypełniać pól. Jedna akcja samoobsługowa, jedna rozmowa, zero rywalizacji. */
/* Układ jak w rehabilitacji: tekst po lewej, karta po prawej.
   Tam po lewej stoją DWA przyciski i konkurują z kartą; tutaj po lewej nie ma
   przycisku w ogóle — jest telefon, czyli inna droga dla kogoś, kto nie chce
   wypełniać pól. Jedna akcja samoobsługowa, jedna rozmowa. */
.hero3__grid{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,27rem);
  gap:clamp(32px,4vw,64px);
  align-items:center;
}
.hero3__col{max-width:none}

.hero3__tel{
  margin:clamp(26px,3.5vw,40px) 0 0;
  display:flex;flex-direction:column;align-items:flex-start;gap:2px;
}
.hero3__tel-l{font-size:.9375rem;color:rgba(255,255,255,.86)}
.hero3__tel-n{
  font-family:var(--font-display);font-weight:var(--fw-display);
  font-size:clamp(1.9rem,1.3rem + 1.9vw,2.6rem);line-height:1.1;
  color:#fff;border-bottom:1px solid rgba(255,255,255,.4);padding-bottom:2px;
}
.hero3__tel-n:hover{border-bottom-color:#fff}

@media (max-width:64em){
  .hero3__grid{grid-template-columns:minmax(0,1fr);gap:clamp(26px,4vw,36px)}
  .hero3__tel{order:3;margin-top:22px}
  .szuk{order:2}
  .hero3__tel-n{font-size:clamp(1.6rem,1.2rem + 1.6vw,2rem)}
}
.hero3__h{margin:0;color:#fff}
.hero3__a{
  display:block;font-family:var(--font-display);font-weight:var(--fw-display);
  font-size:clamp(2rem,1.2rem + 2.8vw,3.2rem);line-height:1.08;text-wrap:balance;
}
/* Pełna biel, nie .82 — przy 1,2 rem to jeszcze „mały tekst" w rozumieniu
   WCAG, więc próg wynosi 4,5:1, a nie 3:1. Krycie .82 dawało 3,84:1.
   Hierarchię względem H1 niosą krój i stopień, nie wyblakły kolor. */
.hero3__b{
  display:block;margin-top:1rem;max-width:none;
  font-size:clamp(1rem,.92rem + .45vw,1.2rem);line-height:1.5;color:#fff;
}

/* widget — biały panel na zdjęciu */
.szuk{
  margin-top:clamp(22px,3vw,34px);padding:24px 26px 26px;
  max-width:none;background:#fff;
  box-shadow:0 24px 60px -30px rgba(20,14,8,.7);
}
/* Szeryfowa linijka nad polami wiąże kartę z tytułem hero: karta jest
   dalszym ciągiem zdania z H1, a nie formularzem doklejonym do zdjęcia. */
.szuk__h{
  margin:0 0 17px;padding-bottom:14px;border-bottom:1px solid var(--color-line);
  font-family:var(--font-display);font-weight:var(--fw-display);
  font-size:clamp(1.25rem,1.1rem + .5vw,1.55rem);line-height:1.2;color:var(--color-brand);
}
/* Pola JEDNO POD DRUGIM, nie obok siebie. Karta ma ok. 430 px, po odjęciu
   wyściółki i strzałki na tekst zostawało ~130 px na pole — po wyborze
   z nazwy sytuacji widać było wielokropek. W jednej kolumnie pole dostaje
   pełne ~374 px. Układ pasuje też do nagłówka: „dwa pytania" czyta się
   po kolei, a nie równolegle. */
.szuk__row{display:grid;grid-template-columns:1fr;gap:13px}
.szuk__f{margin:0;display:flex;flex-direction:column;gap:9px;min-width:0}
.szuk__l{font-size:.75rem;letter-spacing:.1em;text-transform:uppercase;color:var(--color-text-muted)}
.szuk__s{
  width:100%;padding:14px 34px 14px 13px;
  border:1px solid var(--color-line);border-radius:0;background:#fff;
  font-family:var(--font-body);font-size:.9375rem;color:var(--color-text);
  appearance:none;cursor:pointer;
  background-image:linear-gradient(45deg,transparent 50%,var(--color-brand) 50%),
                   linear-gradient(135deg,var(--color-brand) 50%,transparent 50%);
  background-position:calc(100% - 17px) 55%,calc(100% - 12px) 55%;
  background-size:5px 5px,5px 5px;background-repeat:no-repeat;
  text-overflow:ellipsis;
}
.szuk__s:hover{border-color:var(--color-brand-taupe)}
/* Fokus: każdy inny element interaktywny w serwisie ma własną obwódkę 3 px,
   a <select> zostawał na domyślnej przeglądarki — na białym polu bywa słaba.
   Ten sam wskaźnik co reszta, wymóg WCAG 2.2 AA. */
.szuk__s:focus-visible{outline:3px solid var(--color-brand);outline-offset:2px;
  border-color:var(--color-brand)}
/* Pole z dokonanym wyborem ma odróżniać się od pustego — inaczej po wybraniu
   jednej rzeczy nie widać, które pytanie zostało. */
.szuk__s.is-set{border-color:var(--color-brand-taupe);color:var(--color-brand);font-weight:600}
/* min-height trzyma wysokość karty przy zmianie wyniku — bez tego cała karta
   skakała, a razem z nią hero pod nią. 5.4em mieści echo wyboru + wynik. */
.szuk__out{
  /* Rezerwa na najwyższy REALNY wynik: „Konsultacja psychoterapeutyczna
     w Szczecinku" (najdłuższa nazwa w tym widgecie) + numer + przycisk.
     Wartość dobrana pomiarem na 1180–1920 px, nie na oko: przy węższej karcie
     nazwa łamie się na dodatkowy wiersz, więc rezerwa musi pokryć ten przypadek.
     Bez niej hero rosło po wyborze i ściągało stronę w dół. */
  margin-top:17px;padding-top:15px;border-top:1px solid var(--color-line);
  font-size:.9375rem;line-height:1.55;color:var(--color-text-2);min-height:8.6em;
}
.szuk__out b{color:var(--color-brand);font-weight:600}
/* Numer we własnym wierszu. W jednym zdaniu z nazwą usługi i miastem łamał się
   w połowie („94 372 14” / „51”) — numer telefonu nie może się dzielić, bo
   przestaje być jednym bytem do przeczytania i do kliknięcia. */
.szuk__out a.szuk__tel{
  display:inline-block;margin-top:4px;white-space:nowrap;
  font-weight:600;font-size:1.0625rem;color:var(--color-brand);
  border-bottom:1px solid var(--color-brand-taupe);padding-bottom:1px;
}
.szuk__out a.szuk__tel:hover{border-bottom-color:var(--color-brand)}
.szuk__go{
  display:inline-flex;align-items:center;gap:8px;margin-top:12px;
  padding:10px 20px;background:var(--color-brand);color:var(--color-bg-ivory);
  font-weight:600;font-size:.875rem;
}
.szuk__go:hover{background:var(--color-brand-hover)}
.szuk__brak{color:var(--color-text-muted)}

/* Podpowiedź „nie wiesz, co wybrać" siedzi WEWNĄTRZ białego panelu.
   Leżała wcześniej na zdjęciu, bielą o kryciu .72, i schodziła do 2,18:1 —
   na jasnych kadrach była praktycznie nieczytelna. Żadne przyciemnienie tła
   tego nie ratowało, bo linia biegnie nisko, gdzie nakładka już wygasa.
   Miejsce w panelu jest zresztą właściwsze: to wyjście awaryjne wybieraka
   dla kogoś, kto nie potrafi wypełnić dwóch pól nad nim. */
.szuk__pod{
  margin:14px 0 0;padding-top:13px;border-top:1px solid var(--color-line);
  font-size:.875rem;line-height:1.5;color:var(--color-text-muted);
}
.szuk__pod a{color:var(--color-brand);font-weight:600;border-bottom:1px solid var(--color-brand-taupe)}
.szuk__pod a:hover{border-bottom-color:var(--color-brand)}

@media (max-width:52em){
  .hero3{min-height:0;padding:36px 0 44px}
  .hero3__scrim{background:linear-gradient(180deg,rgba(38,31,24,.86) 0%,rgba(38,31,24,.78) 60%,rgba(38,31,24,.88) 100%)}
  /* Widget na telefonie: mniejszy i ciaśniejszy, żeby oba pola zmieściły się
     obok siebie razem z odpowiedzią, bez spychania jej pod zgięcie. */
  .szuk{padding:15px 15px 17px}
  .szuk__row{grid-template-columns:1fr;gap:12px}
  .szuk__h{margin-bottom:13px;padding-bottom:11px}
  .szuk__l{font-size:.75rem;letter-spacing:.06em;line-height:1.3}  /* było .6875rem (11px). Google i audyty zgłaszają tekst poniżej 12px
     jako nieczytelny na telefonie; litery wersalikami z odstępem tym bardziej. */
  .szuk__s{padding:10px 26px 10px 10px;font-size:.875rem}
  .szuk__s{background-position:calc(100% - 15px) 55%,calc(100% - 10px) 55%}
  .szuk__out{margin-top:13px;padding-top:12px;font-size:.875rem}
  .szuk__go{margin-top:9px;padding:9px 16px}
  .hero3__in{padding:0 18px}
}
/* Obok siebie wszędzie POZA najwęższymi ekranami. Poniżej ~376 px na pole
   zostaje ok. 110 px i z nazwy sytuacji widać tylko wielokropek — tam jeden
   pod drugim jest jedyną czytelną opcją. */
@media (max-width:52em) and (min-width:23.5em){
  /* align-items:end — „Gdzie szukasz pomocy?" łamie się na dwa wiersze,
     a „Z czym przychodzisz?" mieści się w jednym. Bez tego pola wyboru
     stały na dwóch różnych wysokościach. */
  .szuk__row{grid-template-columns:1fr 1fr;gap:12px;align-items:end}
}

/* ════════════════════════════════════════════════════════════════════
   NAGŁÓWEK WRACA DO WERSJI Z REHABILITACJI

   Nagłówek serwisu głównego jest przezroczysty, bo leży na ciemnym zdjęciu
   hero. Musiałem dać mu tło, gdy hero było jasne — i wtedy wyszła ciasnota
   z logiem. Odkąd hero jest pełnoekranowym zdjęciem, pierwotny projekt znów
   działa, więc wszystkie moje obejścia znikają.

   Solidne tło zostaje tylko tam, gdzie nie ma ciemnego hero: podstrony.
   ════════════════════════════════════════════════════════════════════ */
/* Reha Beauty NIE jest w nagłówku — nagłówek ma jeden przycisk siostrzany
   („Rehabilitacja"), dokładnie jak rehabilitacja ma jeden („Reha Beauty").
   Reha Beauty żyje w stopce, wśród odsyłaczy serwisowych. */

/* Nagłówek dostaje DOKŁADNIE gradient z rehabilitacji (.55→.22→0). Wcześniej
   podbiłem go do .68, żeby wyciągnąć kontrast nawigacji — i wtedy zaczął
   czytać się jak ciemna belka położona na zdjęciu.

   Przyciemnienie przenosi się do samego hero (górna smuga w .hero3__scrim).
   Piksele wychodzą podobne, ale należą do zdjęcia, nie do nagłówka: czytają
   się jak winieta kadru, a nagłówek zostaje przezroczysty jak w rehabilitacji.
   Serwis główny daje białemu tekstowi 1,02:1 na jasnym zdjęciu — tego akurat
   nie kopiujemy, bo to błąd WCAG. Pomiar niżej w komentarzu przy scrim. */
body.is-home .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%);
  border-bottom:0;
}
body.is-home .site-header:not(.is-scrolled) .topstrip{background:none}
body.is-home .site-header:not(.is-scrolled) .topstrip::after{opacity:0}
/* Żadnych nadpisań wysokości — wymiary i przejście po przewinięciu
   bierzemy w całości ze style.css, czyli z rehabilitacji. */
/* hero wchodzi POD nagłówek, tak jak w rehabilitacji */
body.is-home main{padding-top:0}
/* Odstęp liczony od DOLNEJ krawędzi loga, nie paska: topstrip 38 + pasek 96,
   logo 102 wyśrodkowane w pasku → sięga 137 px. Wcześniejsze 150 px zostawiało
   13 px i pierwszy wiersz H1 wchodził w logo. */
.hero3{padding-top:clamp(190px,21vh,242px)}

/* ── NAKŁADKA HERO ────────────────────────────────────────────────────
   Wróciła ciemna wersja (życzenie właściciela 2026-08-07 — jasna była
   zbyt mocna i zabijała kadr). Dwie warstwy:
   1. GÓRNA SMUGA pod logo i menu — gaśnie na 21% wysokości hero.
   2. WARSTWA UKOŚNA pod kolumnę tekstu: ciemno po lewej, przezroczyście
      po prawej, gdzie widać twarze i to, co się dzieje. */
.hero3__scrim{
  background:
    linear-gradient(180deg,
      rgba(28,21,13,.58) 0%, rgba(28,21,13,.34) 10%,
      rgba(28,21,13,.08) 16%, rgba(28,21,13,0) 21%),
    linear-gradient(102deg,
      rgba(34,27,20,.86) 0%, rgba(34,27,20,.74) 32%,
      rgba(34,27,20,.34) 54%, rgba(34,27,20,.04) 78%,
      rgba(34,27,20,0) 100%);
}
.hero3--plac .ubread a,.hero3--plac .ubread span{color:#fff}
@media (max-width:52em){
  /* mobile: topstrip 38 + pasek 88, logo 90 → dół loga na 127 px */
  .hero3{padding-top:clamp(162px,22vh,200px)}
  .hero3__scrim{background:linear-gradient(180deg,rgba(30,22,14,.80) 0%,rgba(30,22,14,.66) 55%,rgba(30,22,14,.80) 100%)}
}

/* ════════════════════════════════════════════════════════════════════
   SKALA ZJAWISKA — jedyny animowany moment poza hero

   Wzorzec: pasek wyników z growtherapy.com. Tam liczbie towarzyszy słupek,
   który dorasta przy wejściu w kadr. Zachowujemy ten ruch, ale bez wyglądu
   pulpitu: liczba jest szeryfowa i duża, słupek to WŁOSOWA kreska pod nią,
   nie wypełniony prostokąt. Kolor z palety marki, zero gradientów.

   Długość kreski = wartość procentowa, więc ruch niesie treść: dłuższa
   kreska to większa liczba. To nie jest ozdoba.
   ════════════════════════════════════════════════════════════════════ */
.skala{background:var(--color-bg-ivory)}
.skala__head{max-width:62ch}
.skala__intro{
  margin:14px 0 0;font-size:clamp(1rem,.94rem + .35vw,1.15rem);
  line-height:1.6;color:var(--color-text-2);max-width:56ch;
}
.skala__lista{
  list-style:none;margin:clamp(38px,5vw,60px) 0 0;padding:0;
  display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(24px,3vw,40px);
}
.skala__i{
  min-width:0;border-top:1px solid var(--color-line);padding-top:20px;
  /* komórki siatki są równej wysokości; .skala__t rozpycha się i spycha
     kreskę z przypisem na sam dół, więc kreski stoją w jednym rzędzie
     niezależnie od tego, ile wierszy zajmie opis */
  display:flex;flex-direction:column;
}
.skala__t{flex:1 0 auto}
/* Stopień siedzi na RODZICU, nie na <b>. Wcześniej wielkość miała tylko cyfra,
   a znak „%" dostawał .62em liczone od rodzica, czyli od zwykłego tekstu —
   wychodziło ~10 px i nie było wiadomo, co te liczby znaczą.
   Teraz oba dziedziczą tę samą podstawę: cyfra 1em, procent 0,42em. */
.skala__v{
  margin:0;display:flex;align-items:baseline;gap:3px;
  font-family:var(--font-display);font-weight:var(--fw-display);color:var(--color-brand);
  font-size:clamp(3rem,1.8rem + 3.6vw,4.6rem);line-height:1;
}
.skala__v b{font-weight:400;font-size:1em}
.skala__jed{font-size:.42em;line-height:1;color:var(--color-text-muted)}  /* było --color-brand-taupe: 2,51:1 na ivory, poniżej progu WCAG AA. Znak %
     nie jest ozdobą — bez niego „62" nic nie znaczy. Motyw sam ostrzega, że
     taupe wolno używać tylko na linie i dekorację. text-muted daje 5,9:1. */
.skala__t{
  margin:14px 0 0;font-size:.9375rem;line-height:1.5;color:var(--color-text-2);
  text-wrap:pretty;
}
/* włosowa kreska — długość niesie wartość */
.skala__bar{display:block;margin-top:16px;height:2px;background:var(--color-line)}
.skala__bar i{
  display:block;height:100%;width:calc(var(--v) * 1%);
  background:var(--color-brand);
  transform:scaleX(0);transform-origin:left center;
  /* opóźnienie = tyle, ile trwa pojawienie się kafla z [data-animate];
     kreska rusza dopiero, gdy liczba jest już czytelna */
  transition:transform 1.1s cubic-bezier(.22,.7,.24,1) .25s;
}
/* klasę dokłada istniejący obserwator z main.js ([data-animate] → .is-visible),
   więc ta sekcja nie dorzuca ani linijki JavaScriptu */
.skala__i.is-visible .skala__bar i{transform:scaleX(1)}
.skala__pod{margin:10px 0 0;font-size:.8125rem;color:var(--color-text-muted)}
.skala__zrodlo{
  margin:clamp(28px,3.5vw,40px) 0 0;padding-top:16px;
  border-top:1px solid var(--color-line);
  font-size:.8125rem;line-height:1.55;color:var(--color-text-muted);max-width:80ch;
}
.skala__zrodlo a{color:var(--color-text-2);border-bottom:1px solid var(--color-brand-taupe)}
.skala__zrodlo a:hover{color:var(--color-brand);border-bottom-color:var(--color-brand)}

@media (max-width:60em){
  .skala__lista{grid-template-columns:1fr 1fr;gap:clamp(22px,4vw,32px)}
}
@media (max-width:30em){
  .skala__lista{grid-template-columns:1fr;gap:0}
  .skala__i{padding:18px 0 20px}
  .skala__v b{font-size:2.8rem}
}
/* wyłączony ruch — kreska po prostu jest, od razu w pełnej długości */
@media (prefers-reduced-motion:reduce){
  .skala__bar i{transition:none;transform:scaleX(1)}
}

/* Zakres opinii — zdanie, bez którego sekcja kłamałaby przez przemilczenie:
   żadna z 14 opinii nie dotyczy opieki psychologicznej. */
.rv-summary__zakres{
  margin:14px 0 0;font-size:.8125rem;line-height:1.55;color:var(--color-text-muted);
  max-width:34ch;
}
.rv-summary__zakres b{color:var(--color-text-2);font-weight:600}

/* ════════════════════════════════════════════════════════════════════
   FORMY POMOCY — siatka ikon zamiast akapitu wyliczającego

   Ikony przyszły jako PNG 1024×1024 z wypaloną granatową kreską i plamą.
   W tej postaci nie umiałyby zmienić koloru, a serwis stawia je na trzech
   różnych tłach. Rozwiązanie: z każdego pliku wycięta została sama kreska
   jako MASKA ALFA, a barwę daje `background:currentColor`. Zachowuje się
   więc dokładnie tak jak jedenaście ikon SVG — z hoverem i sekcją beżową
   włącznie. Plama jest osobnym, czysto CSS-owym kształtem.
   ════════════════════════════════════════════════════════════════════ */
.formy__h{
  margin:0 0 clamp(28px,3.5vw,40px);
  font-family:var(--font-display);font-weight:var(--fw-display);
  font-size:clamp(1.5rem,1.2rem + 1.2vw,2.1rem);line-height:1.15;color:var(--color-brand);
}
.formy__list{
  list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(26px,3.5vw,44px) clamp(20px,3vw,40px);
}
.formy__i{display:flex;flex-direction:column;align-items:flex-start;gap:14px;min-width:0}
.formy__ico{
  position:relative;flex:0 0 auto;width:88px;height:88px;
  display:grid;place-items:center;
}
/* plama — kształt z CSS, nie z pliku, więc reaguje na motyw sekcji */
.formy__ico::before{
  content:"";position:absolute;inset:4px 2px 8px 6px;
  background:var(--ico-blob,var(--color-bg-beige-2));
  border-radius:58% 42% 47% 53% / 52% 46% 54% 48%;
}
/* kreska — maska wybarwiana kolorem tekstu */
.formy__ico::after{
  content:"";position:absolute;inset:0;
  background:currentColor;color:var(--color-brand);
  -webkit-mask:var(--ik) center/contain no-repeat;
          mask:var(--ik) center/contain no-repeat;
}
.formy__t{
  font-size:.9375rem;line-height:1.45;color:var(--color-text-2);text-wrap:pretty;
}
@media (max-width:60em){
  .formy__list{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:34em){
  .formy__list{grid-template-columns:repeat(2,minmax(0,1fr));gap:22px 16px}
  .formy__ico{width:66px;height:66px}
  .formy__t{font-size:.875rem}
}
/* brak obsługi maski (bardzo stare przeglądarki) — ikona po prostu znika,
   podpis zostaje, więc treść nie ginie */
@supports not ((-webkit-mask:none) or (mask:none)){
  .formy__ico{display:none}
}

/* ════════════════════════════════════════════════════════════════════
   STRONA USŁUGI — czytelność i interakcja

   Stan wyjściowy: 4609 px, jedno zdjęcie, ZERO elementów interaktywnych.
   Cała strona była ciągiem bloków prozy. Wzorzec z centrumsobota.pl:
   krótki wstęp, etykiety odbiorców, potem treść rozbita na kawałki,
   które da się skanować.
   ════════════════════════════════════════════════════════════════════ */

/* ── DLA KOGO: etykiety zamiast wyliczenia w zdaniu ──────────────────── */
.kogo{
  list-style:none;display:flex;flex-wrap:wrap;gap:10px;
  margin:20px 0 0;padding:0;
}
.kogo__i{
  padding:8px 16px;border:1px solid var(--color-line);border-radius:var(--radius-pill);
  background:var(--color-cream);
  font-size:.875rem;line-height:1.35;color:var(--color-text-2);
}

/* ── AKORDEON: definicje kliniczne na żądanie ─────────────────────────
   Pierwszy otwarty, żeby było widać, że to się rozwija. Bez JS. */
.lparts__akord{border-top:1px solid var(--color-line)}
.lpart{border-bottom:1px solid var(--color-line)}
.lpart__s{
  display:flex;align-items:center;gap:14px;
  padding:20px 0;cursor:pointer;list-style:none;
  font-family:var(--font-display);font-weight:var(--fw-display);
  font-size:clamp(1.1rem,1rem + .5vw,1.35rem);line-height:1.25;color:var(--color-brand);
}
.lpart__s::-webkit-details-marker{display:none}
/* znacznik rysowany CSS-em — obraca się przy otwarciu */
.lpart__s::after{
  content:"";margin-left:auto;flex:0 0 auto;width:11px;height:11px;
  border-right:1.8px solid var(--color-brand-taupe);
  border-bottom:1.8px solid var(--color-brand-taupe);
  transform:rotate(45deg);transform-origin:center;
  transition:transform .25s ease,border-color .2s ease;
}
.lpart[open] .lpart__s::after{transform:rotate(-135deg);border-color:var(--color-brand)}
.lpart__s:hover::after{border-color:var(--color-brand)}
.lpart__s:focus-visible{outline:3px solid var(--color-brand);outline-offset:3px}
.lpart__b{padding:0 0 22px}
.lpart__b p{margin:0;max-width:68ch;line-height:1.65;color:var(--color-text-2);text-wrap:pretty}
@media (prefers-reduced-motion:reduce){.lpart__s::after{transition:none}}

/* ── ILUSTRACJA KOTWICZĄCA (zestaw C) ─────────────────────────────────
   Dwie maski jedna na drugiej: plama i kreska. Obie wybarwiane z CSS-a,
   więc grafika reaguje na motyw sekcji tak samo jak ikony — i nie niesie
   ze sobą granatu ani brzoskwini z pliku PNG.
   Proporcja przez aspect-ratio, więc nic nie skacze przy wczytywaniu. */
.pil{margin:clamp(30px,4vw,48px) 0 0;padding:0}
.pil__w{
  display:block;position:relative;width:100%;max-width:620px;
  aspect-ratio:760/500;
}
.pil__w::before,.pil__w::after{
  content:"";position:absolute;inset:0;
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
  -webkit-mask-position:center;mask-position:center;
  -webkit-mask-size:contain;mask-size:contain;
}
.pil__w::before{background:var(--ico-blob,var(--color-bg-beige-2));
  -webkit-mask-image:var(--plama);mask-image:var(--plama)}
.pil__w::after{background:var(--color-brand);
  -webkit-mask-image:var(--linie);mask-image:var(--linie)}
@media (max-width:52em){.pil__w{max-width:none}}
/* brak obsługi maski — ilustracja znika, treść strony nie ucierpi */
@supports not ((-webkit-mask-image:none) or (mask-image:none)){.pil{display:none}}

/* ════════════════════════════════════════════════════════════════════
   NAGŁÓWEK NA STRONACH USŁUG — taki sam jak na stronie głównej

   Strony usług miały <body class="no-hero">, przez co nagłówek dostawał
   solidny brąz i siedział jak belka NAD wąskim paskiem zdjęcia. A one mają
   hero (.shero) — klasa była po prostu błędna.
   Teraz zachowują się jak strona główna: przezroczysty nagłówek leży NA
   zdjęciu, topstrip bez własnego tła. Gradient identyczny co w rehabilitacji.
   ════════════════════════════════════════════════════════════════════ */
body.ma-hero .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%);
  border-bottom:0;
}
body.ma-hero .site-header:not(.is-scrolled) .topstrip{background:none}
body.ma-hero .site-header:not(.is-scrolled) .topstrip::after{opacity:0}
/* hero wchodzi POD nagłówek — bez tego treść zaczynałaby się dopiero
   pod belką i zdjęcie byłoby tylko wąskim paskiem */
body.ma-hero main{padding-top:0}

/* Hero podstrony ma nieść przezroczysty nagłówek, więc musi mieć wysokość —
   378 px to była opaska, nie hero. Niższy niż na stronie głównej (817 px),
   bo to podstrona, ale zdjęcie ma się liczyć. */
body.ma-hero .shero{
  min-height:clamp(440px,56vh,600px);
  display:flex;align-items:flex-end;
  padding-top:calc(138px + clamp(40px,6vw,80px));
  padding-bottom:clamp(48px,6vw,76px);
}
/* Górna smuga utrzymuje nawigację czytelną na każdym kadrze — dokładnie ta
   sama metoda co w hero strony głównej: przyciemnienie należy do zdjęcia,
   nie do nagłówka, więc nie czyta się jak belka. */
body.ma-hero .shero__scrim{
  /* Kadry podstron są jasne: poradnia 204/255, ośrodek 191, recepcja 166.
     Nakładka musi wystarczyć na NAJJAŚNIEJSZY, inaczej okruszki i nawigacja
     schodzą poniżej progu — zmierzone 1,00:1 na ośrodku przed poprawką. */
  background:
    linear-gradient(180deg,
      rgba(26,19,12,.74) 0%, rgba(26,19,12,.56) 14%,
      rgba(26,19,12,.30) 26%, rgba(26,19,12,.16) 38%),
    linear-gradient(180deg,
      rgba(22,16,10,.30) 22%, rgba(23,17,11,.52) 46%, rgba(24,17,11,.74) 100%);
}
/* Separator „/" dziedziczył taupe rgb(188,174,152) — na zdjęciu 1,70:1.
   Na tle fotograficznym cała ścieżka musi być biała; wagę różnicuje krycie,
   nie barwa, bo barwa nie ma tu stałego tła. */
body.ma-hero .shero .ubread,
body.ma-hero .shero .ubread li{color:rgba(255,255,255,.92);
  text-shadow:0 1px 10px rgba(12,8,4,.7)}
@media (max-width:56em){
  body.ma-hero .shero{min-height:clamp(340px,44vh,440px);
    padding-top:calc(126px + clamp(28px,5vw,48px))}
}

/* ── RYTM PIONOWY STRON USŁUG ─────────────────────────────────────────
   Rozbicie jednej sekcji na trzy (czym to jest → co dostaniesz → szczegół)
   potroiło padding: 6 × 80 px zamiast 2 × 80 px, czyli 484 px samego
   światła na 3290 px treści. Układ jest lepszy, ale odstępy trzeba było
   przeliczyć na nowo, a nie zostawić po staremu. */
.usluga .lsec{padding-block:clamp(44px,5vw,64px)}
/* Sąsiadujące sekcje o TYM SAMYM tle nie potrzebują podwójnego światła —
   nie ma tam granicy koloru, którą trzeba by odsunąć. */
.usluga .lsec--ivory + .lsec--ivory,
.usluga .lsec--beige + .lsec--beige{padding-top:0}
/* Ostatnia sekcja przed kartami placówek — te mają własny oddech */
.usluga .lsec:last-of-type{padding-bottom:clamp(36px,4vw,52px)}

/* ── 1. SKLEJONA ETYKIETA DOSTĘPNOŚCI ─────────────────────────────────
   „DostępnośćWizyty komercyjne (odpłatne)" — dwa spany bez odstępu.
   To są dwie różne informacje: GDZIE i ZA ILE, więc rozdziela je kreska. */
.splate__meta{
  display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px;
  margin:10px 0 0;
}
.splate__meta .splate__label{
  font-size:.75rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--color-text-muted);
}
.splate__meta .splate__nfz{
  position:relative;padding-left:17px;
  font-size:.875rem;color:var(--color-text-2);
}
.splate__meta .splate__nfz::before{
  content:"";position:absolute;left:0;top:50%;transform:translateY(-50%);
  width:1px;height:14px;background:var(--color-brand-taupe);
}
.splate__h{
  margin:0;font-family:var(--font-display);font-weight:var(--fw-display);
  font-size:clamp(1.5rem,1.2rem + 1.2vw,2.1rem);line-height:1.15;color:var(--color-brand);
}

/* ── 2. KARTY PLACÓWEK RÓWNEJ WYSOKOŚCI ───────────────────────────────
   Były na flexie z align-items:flex-start, więc Szczecinek — jedyny
   z dwoma numerami — był o 33 px wyższy i przyciski stały na trzech
   różnych poziomach. Siatka wyrównuje wiersze, a przycisk schodzi na dół
   każdej karty. */
.splate__grid{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(18px,2.4vw,28px);align-items:stretch;
}
.splate__cards{display:contents}
.pcard{
  flex:none;max-width:none;height:100%;
  display:flex;flex-direction:column;gap:9px;
}
.pcard__cta{margin-top:auto;padding-top:16px}
@media (max-width:64em){.splate__grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:40em){.splate__grid{grid-template-columns:minmax(0,1fr)}}

/* ── 3. FORMY POMOCY — czytelniej ─────────────────────────────────────
   Podpisy były szare i drobne, więc siatka czytała się jak zbiór obrazków
   bez znaczenia. Nazwa usługi to najważniejsza treść tej sekcji, nie ikona:
   ciemniejsza, większa, a każdą pozycję domyka włoskowata kreska. */
.formy__i{
  gap:16px;padding-bottom:18px;border-bottom:1px solid var(--color-line);
}
.formy__t{
  font-size:1rem;line-height:1.35;font-weight:var(--fw-semibold);
  color:var(--color-brand);
}

/* ════════════════════════════════════════════════════════════════════
   PIERWSZA WIZYTA — układ przebudowany

   Poprzedni: dwie kolumny, w lewej nagłówek + kwalifikacje + zdjęcie,
   w prawej trzy kroki. Kroki kończyły się 360 px nad dnem sekcji, bo lewa
   kolumna była dłuższa, a dwa akapity wisiały pod całą siatką bez
   przynależności.

   Trzy kroki to SEKWENCJA, więc numeracja niesie treść — i dlatego idą
   poziomo: krok po kroku, jak się je czyta.
   ════════════════════════════════════════════════════════════════════ */
.wiz__head{max-width:56ch}
.wiz__lead{margin:14px 0 0;font-size:clamp(1rem,.94rem + .35vw,1.15rem);
  line-height:1.6;color:var(--color-text-2);text-wrap:pretty}

.wiz__kroki{
  list-style:none;margin:clamp(38px,5vw,60px) 0 0;padding:0;
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(26px,3.5vw,48px);
  counter-reset:krok;
}
.wiz__k{
  counter-increment:krok;position:relative;
  padding-top:52px;border-top:1px solid var(--color-line);
}
/* numer jako znacznik strukturalny — kolejność jest tu informacją */
.wiz__k::before{
  content:counter(krok);
  position:absolute;top:20px;left:0;
  display:grid;place-items:center;width:26px;height:26px;
  border:1px solid var(--color-brand-taupe);border-radius:50%;
  font-family:var(--font-display);font-weight:var(--fw-display);font-size:.8125rem;color:var(--color-brand);
}
.wiz__kh{margin:0;font-family:var(--font-display);font-weight:var(--fw-display);
  font-size:clamp(1.15rem,1rem + .5vw,1.4rem);line-height:1.2;color:var(--color-brand)}
.wiz__kp{margin:10px 0 0;font-size:.9375rem;line-height:1.6;
  color:var(--color-text-2);text-wrap:pretty}

/* pas o ludziach — dwie informacje tej samej klasy, więc stoją razem */
.wiz__ludzie{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(24px,3vw,44px);
  margin:clamp(40px,5vw,64px) 0 0;padding:clamp(26px,3vw,36px) 0 0;
  border-top:1px solid var(--color-line);
}
.wiz__bl{margin:0;font-size:.75rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--color-text-muted)}
.wiz__bt{margin:10px 0 0;font-size:.9375rem;line-height:1.65;
  color:var(--color-text-2);text-wrap:pretty;max-width:52ch}
.wiz__bt b{color:var(--color-brand);font-weight:var(--fw-semibold)}

.wiz__uwaga{margin:clamp(26px,3vw,36px) 0 0;font-size:.8125rem;line-height:1.55;
  color:var(--color-text-muted);max-width:64ch}

@media (max-width:62em){
  .wiz__kroki{grid-template-columns:minmax(0,1fr);gap:0}
  .wiz__k{padding:18px 0 22px 44px;border-top:1px solid var(--color-line)}
  .wiz__k::before{top:20px}
  .wiz__ludzie{grid-template-columns:minmax(0,1fr);gap:26px}
}

/* ── „GDZIE SKORZYSTASZ" — przycisk na środku karty ───────────────────
   Przycisk był rozciągnięty na całą szerokość karty (width:100%), przez co
   czytał się jak pasek, nie jak przycisk. Teraz ma szerokość własnej treści
   i stoi na środku — tak samo w karcie pojedynczej i w siatce pięciu. */
.pcard__cta{display:flex;justify-content:center}
.pcard__cta .btn{width:auto;min-width:min(220px,100%)}
/* Jedna karta idzie na CAŁĄ szerokość i układa się poziomo — miasto, adres,
   telefon, e-mail, przycisk w jednej linii. To wzorzec z serwisu głównego
   (`/uslugi/poradnia-logopedyczna/`), realizowany regułami w `usluga.css`.
   Wcześniej stało tu zwężenie do 520 px, które ten układ dusiło: wiersze
   zawijały się w dwie nierówne kolumny i karta czytała się jak rozsypana
   tabelka. */
.splate__grid:has(.pcard:only-child){grid-template-columns:minmax(0,1fr)}
/* W karcie poziomej przycisk jest OSTATNIM elementem wiersza, dosuniętym do
   prawej — nie osobnym blokiem pod spodem. Wcześniejsza reguła nadawała mu
   min-width 220 px, przez co wiersz nie mieścił się i przycisk się zawijał. */
.splate__grid .pcard:only-child .pcard__cta{
  display:flex;justify-content:flex-end;margin:0 0 0 auto;flex:0 0 auto;padding-top:0}
.splate__grid .pcard:only-child .pcard__cta .btn{min-width:0;white-space:nowrap}
/* Ciaśniejsze odstępy w wierszu: przy odstępach z serwisu głównego adres
   Szczecina („ul. Wyszyńskiego 32-34") wypychał przycisk do drugiej linii. */
@media(min-width:52em){
  .splate__grid .pcard:only-child{gap:10px clamp(14px,1.6vw,24px)}
  .splate__grid .pcard:only-child .pcard__row{font-size:.94rem}
}

/* Zakończenie strony usługi — po usunięciu zdublowanego „Umów wizytę"
   został sam odsyłacz powrotny, więc idzie na środek zamiast wisieć
   przy prawej krawędzi po nieistniejącym już przycisku. */
.uend__inner:not(:has(.btn)){justify-content:center}

/* ── KONTEKST MEDYCZNY — warstwa OGÓLNA, nie oferta ───────────────────
   Uzgodnienie z właścicielem: usługi wyłącznie ze źródeł klienta, a wiedza
   ogólna o metodzie z zewnętrznych, sprawdzalnych publikacji — napisana
   po swojemu i PODPISANA. Ta sekcja musi się wizualnie odcinać, żeby nikt
   nie wziął jej za opis tego, co robi Reha Medica. Stąd własne tło, wąska
   miara i nadtytuł mówiący wprost, czym to jest. */
.kontekst{background:var(--color-bg-beige)}
.kontekst__in{max-width:64ch}
.kontekst__kick{
  margin:0;font-size:.6875rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--color-text-muted);
}
.kontekst__h{
  margin:12px 0 0;font-family:var(--font-display);font-weight:var(--fw-display);
  font-size:clamp(1.35rem,1.15rem + .8vw,1.75rem);line-height:1.2;color:var(--color-brand);
  text-wrap:balance;
}
.kontekst__t{
  margin:16px 0 0;font-size:1rem;line-height:1.7;color:var(--color-text-2);
  text-wrap:pretty;
}
.kontekst__t b{color:var(--color-brand);font-weight:var(--fw-semibold)}
.kontekst__z{
  margin:20px 0 0;padding-top:14px;border-top:1px solid var(--color-line);
  font-size:.8125rem;line-height:1.55;color:var(--color-text-muted);
}
.kontekst__z a{color:var(--color-text-2);border-bottom:1px solid var(--color-brand-taupe)}
.kontekst__z a:hover{color:var(--color-brand);border-bottom-color:var(--color-brand)}

/* Kafel form pomocy, który prowadzi do własnej zakładki */
.formy__i--link{padding-bottom:0;border-bottom:0}
.formy__a{
  display:flex;flex-direction:column;align-items:flex-start;gap:16px;
  padding-bottom:18px;border-bottom:1px solid var(--color-line);
  position:relative;
}
.formy__arw{
  position:absolute;right:0;bottom:16px;
  color:var(--color-text-muted);font-size:1.05rem;
  transition:transform .2s ease,color .2s ease;
}
.formy__a:hover .formy__t{text-decoration:underline;text-underline-offset:.16em}
.formy__a:hover .formy__arw{color:var(--color-brand);transform:translateX(3px)}
.formy__a:hover .formy__ico{--ico-blob:var(--color-line)}
@media (prefers-reduced-motion:reduce){.formy__arw{transition:none}}

/* Logo NFZ w wyliczeniu kosztów na stronie głównej — wyrównane do linii tekstu,
   nie do jego dołu; bez tego siada na linii bazowej i rozpycha wiersz. */
.koszt__nfz{display:inline-block;vertical-align:-.22em;height:18px;width:auto;margin:0 2px}

/* Nazwa miasta na karcie placówki prowadzi do strony miasto × usługa.
   11 takich stron nie miało wcześniej ani jednego odnośnika ze strony usługi —
   wchodziło się na nie tylko z huba miasta. Strzałka odróżnia kartę klikalną
   od zwykłej, bo część kart (usługi bez strony miastowej) nią nie jest. */
.pcard__link{display:inline-flex;align-items:baseline;gap:8px;color:inherit;
  border-bottom:1px solid var(--color-brand-taupe);padding-bottom:1px;transition:border-color .2s}
.pcard__link:hover,.pcard__link:focus-visible{border-bottom-color:var(--color-brand)}
.pcard__arw{font-size:.78em;transition:transform .2s}
.pcard__link:hover .pcard__arw{transform:translateX(3px)}
@media (prefers-reduced-motion:reduce){.pcard__arw{transition:none}
  .pcard__link:hover .pcard__arw{transform:none}}

/* ════════════════════════════════════════════════════════════════════
   HERO PLACÓWKI — układ ze strony głównej

   Dane recepcji leżały wcześniej w pasku POD hero, więc pacjent, który
   wszedł na stronę placówki po adres i numer, musiał najpierw przewinąć.
   Teraz są w karcie po prawej, dokładnie tam, gdzie na stronie głównej
   stoi wybierak — ten sam biały panel, ta sama siatka.
   ════════════════════════════════════════════════════════════════════ */
/* Wysokość: BEZ własnej reguły — hero placówki dziedziczy dokładnie tę samą
   wartość co strona główna (clamp(700px,83vh,860px)). Wcześniej stało tu
   niższe clamp(520px,64vh,700px), przez co hero placówki było o kilkadziesiąt
   pikseli płytsze i kadr kadrował się inaczej. */
.hero3--plac .ubread{margin-bottom:clamp(12px,1.6vw,18px)}
.hero3--plac .ubread__list{justify-content:flex-start}
/* kolor okruszków ustawia blok jasnej nakładki wyżej — tutaj biel
   byłaby nieczytelna, bo tło pod nimi jest teraz jasne */
.hero3--plac .hero3__b{max-width:34ch}

.szuk--plac .szuk__h{margin-bottom:16px;padding-bottom:13px}
.plackarta{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:11px}
.plackarta__i{display:flex;align-items:flex-start;gap:11px;font-size:1rem;line-height:1.45;
  color:var(--color-text-2)}
.plackarta__i .ico{flex:none;width:19px;height:19px;margin-top:2px;color:var(--color-brand)}
/* WCAG 2.5.8 (AA) — cel dotykowy min. 24×24px. Sam wiersz tekstu daje na mobile
   23px (0.95rem × 1.45 + kreska), więc telefon i e-mail w karcie placówki nie
   dobijały o jeden piksel. `align-items:center` trzyma podkreślenie przy tekście,
   zamiast odsuwać je na spód powiększonego pudełka. */
.plackarta__i a{color:var(--color-text-2);border-bottom:1px solid var(--color-brand-taupe);
  display:flex;align-items:center;min-height:24px}
.plackarta__i a:hover,.plackarta__i a:focus-visible{color:var(--color-brand);border-bottom-color:var(--color-brand)}
.plackarta__fin{margin:16px 0 0;padding-top:14px;border-top:1px solid var(--color-line)}
.plackarta__fin .splate__nfz{font-size:.9rem;color:var(--color-text-2);display:inline-flex;
  align-items:center;gap:7px}
.plackarta__cta{margin-top:16px;width:100%;justify-content:center}
@media (max-width:52em){
  /* Bez własnego min-height także na mobile — .hero3 ustawia tu min-height:0,
     więc hero placówki zachowuje się dokładnie tak jak na stronie głównej. */
  .plackarta__i{font-size:.95rem}
}

/* Fragment, który nie ma prawa się złamać — np. „— Szczecin" w nagłówku
   strony usługa × miasto. Bez tego miasto zjeżdżało samo do drugiego wiersza. */
.nowrap{white-space:nowrap}


/* ── MAPA DOJAZDU — ładowana na żądanie ──────────────────────────────
   Osadzenie Google ustawia cookies i wysyła IP na zewnątrz, więc do czasu
   kliknięcia pokazujemy sam adres i odnośnik. Ta sama zasada co przy fontach:
   zero żądań do stron trzecich, dopóki użytkownik ich nie zażąda. */
.mapa{position:relative;aspect-ratio:16/8;min-height:300px;background:var(--color-bg-beige);
  border:1px solid var(--color-line);overflow:hidden}
.mapa__ph{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:12px;text-align:center;padding:28px}
.mapa__pin{width:30px;height:30px;color:var(--color-brand)}
.mapa__adres{margin:0;font-family:var(--font-display);font-weight:var(--fw-display);
  font-size:clamp(1.15rem,1rem + .7vw,1.5rem);line-height:1.25;color:var(--color-brand)}
.mapa__nota{margin:0;max-width:44ch;font-size:.85rem;line-height:1.5;color:var(--color-text-muted)}
.mapa__btn{margin-top:4px}
.mapa__ext{font-size:.9rem;color:var(--color-brand);border-bottom:1px solid var(--color-brand-taupe)}
.mapa__ext:hover,.mapa__ext:focus-visible{border-bottom-color:var(--color-brand)}
.mapa__frame{position:absolute;inset:0;width:100%;height:100%;border:0;display:block}
@media (max-width:52em){.mapa{aspect-ratio:4/3;min-height:260px}}

/* ── LISTA USŁUG W PLACÓWCE — bez reakcji na kursor (decyzja właściciela) ───
   Wcześniej cały wiersz odpowiadał na najechanie: rozjaśniało się tło, rosła
   kreska po lewej, strzałka i ikona przesuwały się w stronę celu. Zdjęte.
   Zostaje sam odstęp poziomy, żeby wiersze nie kleiły się do krawędzi ramki.

   Reakcja na KLAWIATURĘ zostaje — to nie jest efekt ozdobny, tylko wymóg
   WCAG 2.2 AA (widoczny fokus). Obsługa klawiaturą musi wiedzieć, w którym
   wierszu stoi, a bez tego lista byłaby dla niej nieprzejezdna. */
.needs__item{position:relative;padding-inline:14px;border-radius:2px}
.needs__item::before{
  content:"";position:absolute;left:0;top:12%;bottom:12%;width:2px;
  background:var(--color-sand);transform:scaleY(0);transform-origin:center;
}
.needs__item:focus-visible{background:var(--color-bg-beige)}
.needs__item:focus-visible::before{transform:scaleY(1)}

/* Podpis pozycji to teraz pełne zdanie o usłudze, a nie dwuwyrazowa etykieta.
   Wersaliki z rozstrzeleniem, zaprojektowane pod krótkie hasło, przy zdaniu
   krzyczą i nie dają się czytać — stąd normalna wielkość liter i miara. */
.needs__to{
  text-transform:none;letter-spacing:0;font-weight:var(--fw-regular);
  font-size:.92rem;line-height:1.45;max-width:70ch;
}

/* Zdanie z lokalizacjami na stronie ogólnej usługi. Strona bez miasta w adresie
   musi mieć miasta w treści — inaczej nie ma z czego wziąć sygnału lokalnego.
   Odnośniki prowadzą do stron miastowych, więc zdanie pracuje też jako
   linkowanie wewnętrzne, a nie tylko jako wyliczenie. */
.lintro__geo{
  margin:clamp(18px,2.2vw,26px) 0 0;padding-top:16px;
  border-top:1px solid var(--color-line);
  max-width:64ch;font-size:1rem;line-height:1.65;color:var(--color-text-2);
}
.lintro__geo a{color:var(--color-brand);border-bottom:1px solid var(--color-brand-taupe)}
.lintro__geo a:hover,.lintro__geo a:focus-visible{border-bottom-color:var(--color-brand)}


/* ── STYK „Tak to wygląda w Polsce" Z ARTYKUŁEM PLACÓWKI ──────────────
   Na stronie placówki sekcja CBOS stoi bezpośrednio nad artykułem, a obie
   mają to samo tło (kość słoniowa — .lsec--beige nie ma zdefiniowanego tła,
   więc też jest jasne). Dwa pełne odstępy sekcyjne jeden pod drugim dawały
   ok. 180 px pustki, którą oko czyta jako dziurę, a nie granicę.
   Zdejmujemy górny odstęp pierwszej sekcji artykułu — odstęp dolny sekcji
   CBOS w zupełności wystarcza za granicę. Reguła działa TYLKO wtedy, gdy
   te dwa bloki faktycznie sąsiadują, więc strona główna jej nie łapie. */
.skala + .usluga > .lsec:first-child{padding-top:0}

/* ══════════════════════════════════════════════════════════════════════
   ZAKRES POMOCY W PLACÓWCE — kompozycja dwukolumnowa
   Sekcja była jedną kolumną na pełną szerokość: nagłówek ciągnął się przez
   1140 px, a pod nim lista, w której tekst kończył się w połowie i po prawej
   zostawało 380 px pustki. Teraz nagłówek stoi w węższej kolumnie po lewej
   (tam, gdzie oko zaczyna), a lista wypełnia szerszą po prawej.
   ══════════════════════════════════════════════════════════════════════ */
.zakres2{display:grid;grid-template-columns:minmax(258px,1fr) minmax(0,1.9fr);
  gap:clamp(28px,4.4vw,64px);align-items:start}
.zakres2__head{position:sticky;top:calc(var(--rm-h0,138px) + 22px)}
/* Tytuł w kolumnie bocznej musi być mniejszy niż w nagłówku na pełną szerokość.
   W rozmiarze pełnoekranowym (3,4rem) słowo „prowadzimy" nie mieściło się
   w kolumnie i globalna reguła overflow-wrap:break-word łamała je w środku
   — wychodziło „prowadzim / y". */
.zakres2__head .section__title{margin-top:10px;
  font-size:clamp(1.9rem,2.35vw,2.5rem);line-height:1.12}
.zakres2__nfz{margin:20px 0 0;padding-top:16px;border-top:1px solid var(--color-line)}
.zakres2__nfz .splate__nfz{font-size:.86rem;color:var(--color-text-2);
  display:inline-flex;align-items:center;gap:8px;flex-wrap:wrap}

/* Wiersz usługi: ikona | (nazwa + kreska wiodąca) | strzałka
                       | opis ————————————————————————— |
   Kreska wiodąca jest tu robotą, nie ozdobą: prowadzi oko od nazwy do
   strzałki przez pustkę, która wcześniej po prostu ziała. */
.needs__list{--cfa:0;--cft:0}
.needs__item--ico{
  display:grid;
  grid-template-columns:auto minmax(0,1fr) auto;
  grid-template-areas:"ikona naglowek strzalka" "ikona opis opis";
  column-gap:clamp(14px,1.5vw,20px);row-gap:6px;
  align-items:center;padding-block:clamp(18px,1.9vw,24px);
}
.needs__ico{grid-area:ikona;align-self:start;margin-top:2px}
.needs__hd{grid-area:naglowek;display:flex;align-items:baseline;gap:16px;min-width:0}
.needs__arrow{grid-area:strzalka;align-self:baseline}
.needs__to{grid-area:opis}
.needs__name{
  font-family:var(--font-display);font-weight:var(--fw-display);
  font-size:clamp(1.16rem,1.35vw,1.38rem);letter-spacing:0;
}
.needs__rule{flex:1 1 auto;min-width:22px;height:1px;background:var(--color-line);
  translate:0 -5px}

/* Blok „Pozostałe formy pomocy" — świadomie cichszy od listy powyżej */
.dopyt{margin-top:clamp(30px,3.4vw,46px)}
.dopyt__h{
  margin:0;font-family:var(--font-body);font-size:.79rem;font-weight:var(--fw-semibold);
  letter-spacing:.12em;text-transform:uppercase;color:var(--color-text-muted);
}
.dopyt__note{margin:10px 0 6px;max-width:64ch;font-size:.95rem;line-height:1.6;
  color:var(--color-text-2)}
.needs__list--quiet .needs__name{font-size:clamp(1.04rem,1.1vw,1.16rem)}
.needs__list--quiet .needs__item{padding-block:clamp(15px,1.5vw,19px)}
.needs__list--quiet .needs__item:last-child{border-bottom:0}

@media (max-width:60em){
  .zakres2{grid-template-columns:1fr;gap:26px}
  .zakres2__head{position:static}
}
@media (max-width:37.5em){
  /* na wąskim ekranie kreska wiodąca nie ma dokąd biec — zostaje nazwa i strzałka */
  .needs__rule{display:none}
  .needs__hd{gap:12px}
}
/* adres w kolumnie nagłówka sekcji „Dojazd" — ta sama rola co znaczek NFZ
   w sekcji zakresu: jedna konkretna informacja zamiast pustej kolumny */
.zakres2__adr{margin:20px 0 0;padding-top:16px;border-top:1px solid var(--color-line);
  font-size:1rem;line-height:1.55;color:var(--color-text-2)}

/* ══════════════════════════════════════════════════════════════════════
   HERO NA WĄSKIM EKRANIE — zdjęcie przestaje być tapetą, staje się kadrem
   Na telefonie zdjęcie leżało pod całą treścią jako tło, a nakładka miała
   przy lewej krawędzi 92% krycia — czyli dokładnie tam, gdzie na wąskim
   ekranie jest CAŁA treść. Efekt: fotografii praktycznie nie było widać,
   zostawał brązowy prostokąt. Teraz kadr dostaje własne pasmo u góry,
   pod przezroczystym nagłówkiem, a tekst schodzi pod niego na ciemne tło.
   ══════════════════════════════════════════════════════════════════════ */
@media (max-width:52em){
  .hero3{display:block;padding:0 0 clamp(52px,11vw,78px);min-height:0}
  /* z-index:-1 chowało kadr pod tłem sekcji, gdy przestawał być absolutny */
  .hero3__media{position:relative;inset:auto;z-index:auto;
    height:clamp(280px,42vh,380px);width:100%}
  /* Nakładka pionowa zamiast poprzecznej: ciemno tylko u góry (żeby nagłówek
     był czytelny) i u dołu (żeby kadr wtopił się w ciemną część hero).
     Środek zostaje odsłonięty — i to jest cała rzecz, o którą chodzi. */
  .hero3__scrim{background:linear-gradient(180deg,
    rgba(38,31,24,.80) 0%, rgba(38,31,24,.34) 26%,
    rgba(38,31,24,.10) 52%, rgba(38,31,24,.42) 84%, var(--color-brand-dark) 100%)}
  .hero3__in{padding-top:clamp(24px,5.5vw,34px)}
  /* hero placówki ma pod kadrem tytuł, telefon i białą kartę kontaktową —
     przy własnym paśmie zdjęcia górne dopełnienie liczone pod nagłówek
     jest już niepotrzebne */
  .hero3--plac .hero3__in{padding-top:clamp(22px,5vw,30px)}
}

/* ── WIĘCEJ POWIETRZA W SEKCJACH PLACÓWKI ────────────────────────────
   Kompozycja była poprawna, ale ciasna: wiersze stały blisko siebie,
   kolumny blisko siebie, a sekcje kończyły się tuż za treścią. Wszystkie
   odstępy podniesione tylko tutaj — reszta serwisu zostaje bez zmian. */
.lsec--plac{padding-block:clamp(62px,7.6vw,116px)}
.lsec--plac + .lsec--plac{padding-top:clamp(46px,5.4vw,82px)}
.zakres2{gap:clamp(36px,5.2vw,84px)}
.zakres2 .needs__item--ico{
  padding-block:clamp(24px,2.9vw,36px);
  column-gap:clamp(16px,1.9vw,26px);row-gap:9px;
}
.zakres2 .needs__list--quiet .needs__item{padding-block:clamp(19px,2.1vw,26px)}
.zakres2 .dopyt{margin-top:clamp(42px,5vw,72px)}
.zakres2 .dopyt__note{margin:12px 0 10px;line-height:1.68}
.zakres2 .needs__to{line-height:1.62}
.zakres2__nfz,.zakres2__adr{margin-top:26px;padding-top:20px}
@media (max-width:60em){
  .lsec--plac{padding-block:clamp(48px,8vw,72px)}
  .lsec--plac + .lsec--plac{padding-top:clamp(38px,6vw,56px)}
}


/* ── CIENIE NA WĄSKIM EKRANIE ────────────────────────────────────────
   Na telefonie elementy są bliżej oka i zajmują większą część ekranu,
   więc ten sam cień co na desktopie czyta się jako ciężki. Wartości
   zmierzone w przeglądarce — to pełna lista cieni, które faktycznie
   renderują się poniżej 52em; nic więcej nie ma tu czego zmiękczać. */
@media (max-width:52em){
  .szuk{box-shadow:0 14px 34px -24px rgba(20,14,8,.38)}
  .cc-banner__card{box-shadow:0 14px 34px -24px rgba(28,21,13,.38)}
  .a11y-fab{box-shadow:0 6px 16px -8px rgba(0,0,0,.34)}
  .callfab{box-shadow:0 5px 14px -6px rgba(32,20,10,.28)}
  .rv-arrow{box-shadow:0 6px 16px -14px rgba(54,45,36,.28)}
}



/* ── PASEK „BEZPŁATNIE" NA TELEFONIE — mniejszy ──────────────────────
   Na wąskim ekranie zdanie łamie się na trzy wiersze i pasek urastał do
   133 px, czyli zjadał szósty ekranu zaraz pod hero. Treść zostaje bez
   zmian — schodzi tylko stopień pisma, odstępy i dopełnienie. */
@media (max-width:52em){
  .darmo__in{padding:20px 22px 14px}
  .darmo__t{font-size:.795rem;line-height:1.4}
}


/* ══════════════════════════════════════════════════════════════════════
   PAS Z WYBIERAKIEM — szeroka karta wchodząca na zdjęcie
   Wzór: sekcja wyceny z meblemdr.pl — jedna karta na pełną szerokość
   kontenera, wciągnięta w górę na dolną krawędź hero, dwie równe kolumny.
   Zamiast czerwieni i czerni tamtego serwisu: nasz brąz i kość słoniowa.
   ══════════════════════════════════════════════════════════════════════ */
/* Karta schodzi niżej (wciągnięcie w hero z -9vw na -7,95vw), więc widać
   więcej zdjęcia. Wysokość ścięta o DOKŁADNIE tyle samo, ile karta zeszła,
   więc jej dolna krawędź zostaje w tym samym miejscu i nic pod nią się nie
   przesuwa — pasek „Bezpłatnie" i cała reszta strony stoją bez ruchu. */
.pas{position:relative;z-index:5;margin-top:clamp(-124px,-7.95vw,-62px);padding-bottom:clamp(24px,3.2vw,44px)}
.pas__karta{
  display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,3.6vw,52px);
  background:var(--color-bg-ivory);
  border:1px solid var(--color-line);border-radius:4px;
  box-shadow:0 34px 80px -44px rgba(28,21,13,.5);
  padding:clamp(22px,2.05vw,30px) clamp(24px,2.6vw,36px) clamp(22px,1.9vw,28px);
}
.pas__h{
  margin:0 0 14px;font-family:var(--font-display);font-weight:var(--fw-display);
  font-size:clamp(1.6rem,2.7vw,2.25rem);line-height:1.14;color:var(--color-text);
  text-wrap:balance;
}
/* Wyrównanie pierwszych wierszy obu kolumn.
   Nagłówek jest duży i szeryfowy, etykieta pola mała i wersalikowa — przy
   zwykłym `align-items:start` ich pierwsze wiersze startują na różnej
   wysokości, bo różnią się wysokością wiersza. Kompensujemy różnicę,
   żeby oba teksty siedziały na tej samej linii. Wartość policzona
   z pomiaru w przeglądarce, nie na oko. */
.pas__karta{align-items:start}
.pas__lead{margin:12px 0 0;font-size:.97rem;line-height:1.55;color:var(--color-text-2);max-width:46ch}
/* `margin-top` jest odziedziczony z układu w hero, gdzie karta wisiała pod
   tytułem. W pasie spychał prawą kolumnę o 34 px niżej niż lewą. */
.pas .szuk{
  background:none;border:0;box-shadow:none;padding:0;margin:0;
  display:flex;flex-direction:column;gap:11px;max-width:none;
}
.pas .szuk .szuk__out{margin-top:2px}
@media (max-width:60em){
  .pas{margin-top:clamp(-64px,-6vw,-36px)}
  .pas__karta{grid-template-columns:1fr;gap:26px}
}
@media (max-width:52em){
  /* Na telefonie karta ma wchodzić na hero tak samo jak we wzorze — tam
     wsuwa się w zdjęcie. U nas hero kończy się ciemnym blokiem z telefonem,
     więc wsunięcie policzone tak, żeby NIE zasłonić numeru: numer kończy się
     30 px przed dolną krawędzią hero, więc karta może wejść tylko o 18 px —
     przy 40 px nachodziła na numer. Zmierzone, nie wyliczone z głowy. Wartości wyściółki, odstępu i stopnia nagłówka
     przepisane ze wzoru: 24/20 px, 24 px, 24 px. */
  /* Karta NACHODZI na hero. Żeby nie konkurowała z numerem telefonu, to hero
     dostało dłuższą końcówkę (dolne dopełnienie 52–78 px zamiast 30–46),
     a nie karta zeszła niżej. Wsunięcie policzone tak, by karta zaczynała
     się ok. 22 px pod numerem. */
  .pas{margin-top:-30px;padding-bottom:clamp(20px,4vw,32px)}
  .pas__karta{padding:24px 20px;gap:24px}
  .pas__h{font-size:1.5rem;line-height:1.2}
  .pas__lead{margin-top:10px}
}
/* numer i odnośnik w jednym wierszu — numer nadal nie łamie się w środku */
.szuk__sep{color:var(--color-text-muted)}
.pas .szuk__tel{white-space:nowrap}

/* Rezerwa na odpowiedź w pasie — mierzona osobno, bo kolumna jest tu szersza
   niż karta w hero (493 px) i odpowiedź mieści się w mniejszej liczbie
   wierszy. Sprawdzone WSZYSTKIE kombinacje sytuacja × miasto: najwyższa
   („Trudne emocje" + Białogard) ma 115 px. Poprzednia wartość 8,6em = 129 px
   pochodziła z wąskiej karty w hero i tutaj trzymała 14 px pustki za dużo,
   a jednocześnie — przed skróceniem odpowiedzi — była o 19 px ZA MAŁA,
   więc przy części wyborów karta podskakiwała. */
.pas .szuk__out{min-height:117px}

/* ── ETYKIETA „BEZPŁATNIE" JAKO ZNACZEK W ROGU ───────────────────────
   Była wtopiona w wiersz obok tekstu i przy zmniejszeniu paska ginęła.
   Teraz siedzi w górnym rogu paska, wychodzi ponad jego krawędź
   i jest w piaskowym akcencie, nie w kości słoniowej — to jedyne miejsce
   w tym pasie, gdzie pojawia się kolor, więc oko idzie tam pierwsze.
   Ciemny tekst na piasku daje 8,3:1, czyli z zapasem ponad próg. */
/* ── ZNACZEK „BEZPŁATNIE" OKRAKIEM NA KRAWĘDZI PASKA ─────────────────
   Na każdej szerokości, nie tylko na telefonie: połowa znaczka w pasku,
   połowa nad nim. `top:0` + `translateY(-50%)` daje dokładnie połowę
   niezależnie od jego wysokości — przy sztywnej wartości w pikselach
   proporcja psułaby się przy każdej zmianie stopnia pisma czy wyściółki.
   Zdanie zaczyna się od lewej krawędzi paska, a nie za znaczkiem, więc
   pasek dostaje tyle górnego dopełnienia, ile zajmuje jego dolna połowa. */
/* Punktem odniesienia jest KONTENER TREŚCI, nie pasek. Pasek ciągnie się
   przez całą szerokość okna, więc znaczek liczony od niego lądował daleko
   na lewo od zdania i na desktopie wychodził poza ekran. */
.darmo__in{position:relative}
.darmo__tag{
  position:absolute;top:0;left:clamp(22px,2.4vw,34px);transform:translateY(-50%);z-index:2;
  padding:2px 11px 3px;border-radius:3px;
  background:#fff;color:var(--color-brand);
  font-size:.75rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase;
  box-shadow:0 3px 10px -3px rgba(20,14,8,.5);
}

/* ── WIĘCEJ POWIETRZA NA TELEFONIE ───────────────────────────────────
   Wszystko było ściśnięte do krawędzi: 20 px od boku ekranu i 44 px
   między sekcjami. Na 390 px to za mało — treść czyta się jak jeden ciąg,
   bez oddechu między blokami. Wartości podniesione tylko poniżej 52em.
   Karta wybieraka dostaje więcej wyściółki, ale pasek „Bezpłatnie" NIE —
   ten miał być mały i taki zostaje. */
@media (max-width:52em){
  .wrap{padding-left:22px;padding-right:22px}
  .lsec{padding-block:52px}
  .pas__karta{padding:30px 24px 32px}
  .pas__lead{margin-top:13px}
  .pas .szuk{gap:15px}
  .shero__inner{padding-block:clamp(30px,7vw,44px)}
  .section__head{margin-bottom:26px}
  .needs__item--ico{padding-block:20px}
  .zakres2{gap:30px}
  .dopyt{margin-top:34px}
}

/* ── SIATKA FORM POMOCY NA TELEFONIE — strzałka wychodzi z układu ─────
   Strzałka stała `position:absolute` w prawym dolnym rogu kafla. Na dwóch
   kolumnach po 165 px długie nazwy („Diagnoza neuropsychologiczna”) dobijają
   do prawej krawędzi i tekst wchodził pod strzałkę — dosłownie jedno na
   drugim. Tutaj strzałka wraca do przepływu i siada pod tekstem, wyrównana
   do prawej: kosztuje jeden wiersz, ale nie ma jak nachodzić przy żadnej
   długości nazwy. */
@media (max-width:52em){
  .formy__a{padding-bottom:14px}
  .formy__arw{position:static;align-self:flex-end;margin-top:2px}
}

/* ── FORMY POMOCY NA TELEFONIE — jedna pod drugą, w rzędzie ───────────
   Dwie kolumny po 165 px zmuszały każdą nazwę do łamania na dwa wiersze,
   a ikona, tekst i strzałka stały jedno pod drugim, więc kafel miał 185 px
   wysokości. Sześć takich to 1100 px samego przewijania — nikt tego nie
   czyta, tylko przewija.
   Jedna kolumna, ale kafel ułożony w POZIOMIE: ikona, nazwa, strzałka.
   Nazwa mieści się w jednym wierszu, kafel schodzi do ok. 70 px, a układ
   jest ten sam co listy usług w placówkach — jedna gramatyka w całym
   serwisie zamiast dwóch. */
@media (max-width:52em){
  .formy__list{grid-template-columns:1fr;gap:0}
  .formy__i,
  .formy__a{
    flex-direction:row;align-items:center;gap:14px;
    padding-block:15px;
  }
  .formy__i{border-bottom:1px solid var(--color-line)}
  .formy__i--link{border-bottom:0;padding-block:0}
  .formy__a{border-bottom:1px solid var(--color-line);padding-bottom:15px}
  .formy__ico{display:block;flex:none;width:42px;height:42px}
  .formy__t{flex:1 1 auto;min-width:0;font-size:.97rem;line-height:1.35}
  .formy__arw{position:static;align-self:center;margin:0;flex:none}
}