/* =====================================================================
   PRACOWNIA PSYCHOLOGICZNA — NPPP Olszanica
   Szkielet redesignu · statyczny HTML+CSS · mobile-first (360px)
   Tokeny 1:1 z briefu (sekcja 3 — design system).
   Breakpointy: 540px / 860px.
   ===================================================================== */

:root{
  /* powierzchnie */
  --papier:#FBF8F2; --karta:#FFFFFF; --piasek:#F1EBDF; --linia:#E5DFD2;
  /* atrament */
  --atrament:#2E332B; --przygaszony:#6B6F64;
  /* szałwia (sygnatura) */
  --szalwia:#5E6F53; --szalwia-ink:#47563E; --szalwia-mgla:#E3E8DC;
  /* ciepły akcent */
  --mosiadz:#8F6D2F; --mosiadz-mgla:#F0E7D4;
  /* status */
  --ok:#4E7D67; --uwaga:#8F6D2F; --alarm:#A34F3B;
  /* pochodna: mgła dla statusu alarmowego — brak w tokenach briefu.
     DO POTWIERDZENIA — wartość tymczasowa, czeka na plik design systemu
     (prywatnapracowniapsychologiczna-design-system.html). */
  --alarm-mgla:#F5E7E1;
  /* typografia */
  --serif:"Fraunces",Georgia,serif; --sans:"Mulish",-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  /* rytm */
  --r:14px; --r-s:8px; --maxw:1120px;
}

/* ---------- reset / baza ---------- */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth; scroll-padding-top:148px}
[id]{scroll-margin-top:148px}
body{
  margin:0; background:var(--papier); color:var(--atrament);
  font-family:var(--sans); font-weight:400; font-size:16px; line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
img,svg{max-width:100%; height:auto}
a{color:var(--szalwia-ink)}
a:hover{color:var(--szalwia)}
:focus-visible{outline:3px solid var(--szalwia); outline-offset:2px; border-radius:2px}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important; transition-duration:.01ms!important; transition-delay:0s!important}
}

.wrap{max-width:var(--maxw); margin:0 auto; padding:0 20px}
main{display:block}

/* skip link */
.skip{position:absolute; left:-9999px; top:0; background:var(--atrament); color:#fff; padding:10px 16px; z-index:100; border-radius:0 0 var(--r-s) 0}
.skip:focus{left:0}

/* ---------- typografia ---------- */
h1,h2,h3,h4{font-family:var(--serif); font-weight:500; line-height:1.2; color:var(--atrament); margin:0 0 .5em}
h1{font-size:clamp(34px,6vw,52px); letter-spacing:-.01em}
h2{font-size:clamp(26px,4.2vw,34px)}
h3{font-size:22px}
h4{font-size:18px}
p{margin:0 0 1em}
.lead{font-size:18px; color:var(--przygaszony); max-width:62ch}
.etykieta{
  display:block; font-family:var(--sans); font-weight:600; font-size:12px;
  text-transform:uppercase; letter-spacing:.14em; color:var(--szalwia-ink);
  margin-bottom:10px;
}
.cena{font-family:var(--serif); font-weight:500; color:var(--mosiadz); white-space:nowrap}
.uzup{background:var(--karta); color:var(--uwaga); border:1px solid var(--mosiadz-mgla); padding:0 6px; border-radius:4px; font-weight:500}

/* ---------- przyciski (tap target ≥44px) ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  min-height:48px; padding:12px 26px; border-radius:999px;
  font-family:var(--sans); font-weight:600; font-size:16px; text-decoration:none;
  border:1.5px solid transparent; cursor:pointer;
  transition:background-color .18s ease, color .18s ease, border-color .18s ease;
}
.btn-primary{background:var(--szalwia); color:#fff}
.btn-primary:hover{background:var(--szalwia-ink); color:#fff}
.btn:disabled{opacity:.65; cursor:wait}
.btn-secondary{background:transparent; color:var(--szalwia-ink); border-color:var(--szalwia)}
.btn-secondary:hover{background:var(--szalwia-mgla); color:var(--szalwia-ink)}
.btn-cichy{background:transparent; color:var(--szalwia-ink); padding:12px 10px; text-decoration:underline; text-underline-offset:4px}
.btn-cichy:hover{color:var(--szalwia)}

/* ---------- tagi statusu ---------- */
.tag{
  display:inline-block; font-family:var(--sans); font-weight:600; font-size:12px;
  text-transform:uppercase; letter-spacing:.08em;
  padding:5px 12px; border-radius:999px; line-height:1.4;
}
/* białe pigułki + kolorowy tekst: wszystkie pary ≥4.5:1 (AA) na każdym tle sekcji */
.tag-ok{background:var(--karta); color:var(--ok); border:1px solid var(--szalwia-mgla)}
.tag-uwaga{background:var(--karta); color:var(--uwaga); border:1px solid var(--mosiadz-mgla)}
.tag-alarm{background:var(--karta); color:var(--alarm); border:1px solid var(--alarm-mgla)}

/* ---------- nagłówek / nawigacja ---------- */
.naglowek{
  position:sticky; top:0; z-index:50;
  background:var(--papier); border-bottom:1px solid var(--linia);
  box-shadow:0 1px 0 var(--linia); /* cień daje wyraźniejszą granicę niż sam border */
  transition:background-color .25s ease;
}
/* po przescrollowaniu >40px (klasa dodawana przez JS na końcu <body>) */
.naglowek.scrolled{
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  background:rgba(251,248,242,.94); /* --papier z alfą */
  border-bottom:1px solid var(--linia);
}
/* nav kompaktowy — 56px; tap targety trzymają się same (linki 44px, CTA 48px) */
.naglowek .wrap{display:flex; align-items:center; justify-content:space-between; gap:16px; min-height:56px; flex-wrap:wrap; padding-top:6px; padding-bottom:6px; transition:padding .25s ease}
.naglowek.scrolled .wrap{padding-top:4px; padding-bottom:4px}
.logo{
  font-family:var(--serif); font-weight:500; font-size:20px; line-height:1.15;
  color:var(--atrament); text-decoration:none; padding:6px 0;
}
.logo:hover{color:var(--szalwia-ink)}
.logo small{display:block; font-family:var(--sans); font-weight:600; font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--przygaszony)}

/* mobilne menu — czyste CSS przez <details> wewnątrz <nav class="menu-mobil"> */
.menu-mobil{position:relative}
.menu-mobil details{position:static}
.menu-mobil summary{
  list-style:none; display:inline-flex; align-items:center; gap:8px;
  min-height:44px; padding:10px 14px; border:1.5px solid var(--linia); border-radius:var(--r-s);
  font-weight:600; font-size:14px; cursor:pointer; user-select:none; background:var(--karta);
}
.menu-mobil summary::-webkit-details-marker{display:none}
/* hamburger: trzy linie animowane w X przy [open] */
.hamburger{display:inline-flex; flex-direction:column; justify-content:space-between; width:22px; height:16px}
.hamburger span{display:block; width:22px; height:2px; border-radius:2px; background:var(--atrament); transition:transform .25s ease, opacity .25s ease}
.menu-mobil details[open] .hamburger span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.menu-mobil details[open] .hamburger span:nth-child(2){opacity:0}
.menu-mobil details[open] .hamburger span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.menu-mobil details[open] summary{background:var(--szalwia-mgla); border-color:var(--szalwia)}
.menu-mobil ul{
  position:absolute; right:0; top:calc(100% + 8px); z-index:60;
  margin:0; padding:8px; list-style:none; min-width:230px;
  max-width:calc(100vw - 40px); max-height:calc(100dvh - 148px);
  overflow-y:auto; overscroll-behavior:contain;
  background:var(--karta); border:1px solid var(--linia); border-radius:var(--r);
  box-shadow:0 12px 30px rgba(46,51,43,.14);
}
.menu-mobil ul a{
  display:block; padding:12px 14px; min-height:44px; border-radius:var(--r-s);
  text-decoration:none; font-weight:500; color:var(--atrament);
}
.menu-mobil ul a:hover{background:var(--szalwia-mgla)}
.menu-mobil ul a[aria-current="page"]{background:var(--szalwia-mgla); color:var(--szalwia-ink); font-weight:600}

/* --- desktop nav: wymuszony poziom na top-level --- */
/* ukryty do 860px — przełącznik jest w media query niżej */
.menu-desktop{display:none}
.menu-desktop > ul{
  display:flex; gap:2px; margin:0; padding:0; list-style:none;
  flex-wrap:wrap; align-items:center;
}
.menu-desktop > ul > li{position:relative}

/* linki i przyciski top-level */
.menu-desktop > ul > li > :is(a,button){
  display:inline-flex; align-items:center; padding:12px 14px; min-height:44px;
  text-decoration:none; font-weight:500; font-size:15px; color:var(--atrament);
  border:0; border-bottom:2px solid transparent; position:relative;
  background:transparent; font-family:var(--sans); cursor:pointer;
}
.menu-desktop > ul > li > :is(a,button):hover{color:var(--szalwia-ink)}
.menu-desktop > ul > li > a[aria-current="page"]{color:var(--szalwia-ink); font-weight:600; border-bottom-color:var(--szalwia)}

/* underline — wyłącznie top-level */
.menu-desktop > ul > li > :is(a,button)::after{
  content:''; position:absolute; bottom:0; left:0; width:100%; height:2px;
  background:var(--szalwia); transform:scaleX(0); transform-origin:left;
  transition:transform .2s ease;
}
.menu-desktop > ul > li > :is(a,button):hover::after,
.menu-desktop > ul > li > a[aria-current="page"]::after{transform:scaleX(1)}

/* strzałka katalogu — nadpisuje ::after underline */
.menu-desktop > ul > li.has-submenu > button::after{
  content:' ▾'; font-size:.75em; color:var(--przygaszony);
  position:static; width:auto; height:auto; background:none;
  transform:none; transition:none; margin-left:4px;
}
/* rodzic katalogu, gdy aktywna strona leży w środku */
.menu-desktop > ul > li.has-submenu > button.ma-aktywna{color:var(--szalwia-ink); font-weight:600; border-bottom-color:var(--szalwia)}

/* submenu — zawsze pionowe, absolutne */
.menu-desktop .submenu{
  position:absolute; top:calc(100% + 8px); left:0; z-index:70;
  display:block; margin:0; padding:8px; list-style:none; min-width:220px;
  background:var(--karta); border:1px solid var(--linia); border-radius:var(--r);
  box-shadow:0 12px 30px rgba(46,51,43,.14);
  opacity:0; visibility:hidden; transform:translateY(-4px);
  transition:opacity .18s ease, transform .18s ease, visibility .18s;
}
.menu-desktop .has-submenu.is-open > .submenu{
  opacity:1; visibility:visible; transform:translateY(0);
}
.menu-desktop .submenu li{display:block}
.menu-desktop .submenu a{
  display:block; padding:10px 14px; border-radius:var(--r-s);
  text-decoration:none; font-size:15px; color:var(--atrament);
  font-weight:500; min-height:44px; white-space:nowrap;
}
.menu-desktop .submenu a:hover{background:var(--szalwia-mgla); color:var(--szalwia-ink)}
/* aktywna pozycja wewnątrz katalogu */
.menu-desktop .submenu a[aria-current="page"]{color:var(--szalwia-ink); font-weight:600; background:var(--szalwia-mgla)}

/* --- mobile: nagłówki grup --- */
.menu-mobil ul .nav-group{
  display:block; padding:14px 14px 6px;
  font-size:11px; font-weight:600; text-transform:uppercase;
  letter-spacing:.12em; color:var(--przygaszony);
  border-top:1px solid var(--linia); margin-top:6px;
}
.menu-mobil ul .nav-group:first-child{border-top:none; margin-top:0}

/* CTA w nagłówku: tel: na mobile, kotwica kontaktu na desktopie */
.cta-tel{display:inline-flex}
.cta-kontakt{display:none}

@media (min-width:860px){
  .menu-mobil{display:none}
  .menu-desktop{display:block}
  .cta-tel{display:none}
  .cta-kontakt{display:inline-flex}
}

@media (min-width:540px){
  html{scroll-padding-top:88px}
  [id]{scroll-margin-top:88px}
}

/* ---------- sekcje / hero ---------- */
.sekcja{padding:56px 0}
.sekcja-piasek{background:var(--piasek)}
.hero{padding:64px 0 56px} /* tło sekcji: --papier (body) — tekst nie zależy od zdjęcia */
.hero-grid{display:grid; gap:28px; align-items:center}
.hero .lead{margin:18px 0 0}
.hero-cta{display:flex; gap:14px; flex-wrap:wrap; margin-top:28px}
/* pieczęć jako stempel NA zdjęciu — większa, lekko obrócona, nie ściska CTA */
/* pieczęć-stempel: prawy dolny róg zdjęcia, kolorowa, na kremowej podkładce (czysto czyta na każdym tle) */
.hero-znak{
  position:absolute; right:16px; bottom:16px; z-index:2;
  width:clamp(112px,24%,150px); height:auto;
  background:rgba(251,248,242,.92); border-radius:50%; padding:6px;
  transform:rotate(6deg);
  box-shadow:0 6px 16px rgba(46,51,43,.28);
}
/* obraz hero — reguły zdjęcia NIE dotyczą pieczęci (.hero-znak) */
.hero-foto{position:relative; width:100%; min-width:0; border-radius:var(--r); overflow:hidden; aspect-ratio:4/3}
.hero-foto img:not(.hero-znak){
  display:block; width:100%; height:100%; object-fit:cover;
  border-radius:var(--r);
}
/* gradient zanikania: obraz łagodnie schodzi w tło hero (--papier) */
.hero-foto::after{
  content:''; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(to left, transparent 65%, var(--papier) 100%);
}
/* subtelne zmiękczenie dolnej krawędzi */
.hero-foto::before{
  content:''; position:absolute; inset:0; pointer-events:none; z-index:1;
  background:linear-gradient(to bottom, transparent 88%, var(--papier) 100%);
}
@media (max-width:859px){
  .hero-foto{height:auto; max-height:55vh}
  .hero-foto img:not(.hero-znak){max-height:55vh}
}
@media (min-width:860px){
  .hero-grid{grid-template-columns:1.3fr 1fr; column-gap:48px}
  .hero-foto{height:auto; min-height:340px}
  .hero-foto img:not(.hero-znak){height:100%}
}

/* ---------- reveal przy scrollu (klasy nadaje JS — bez JS wszystko widoczne) ---------- */
.reveal{opacity:0; transform:translateY(20px); transition:opacity .55s ease-out, transform .55s ease-out}
.reveal-visible{opacity:1; transform:none}
/* stagger kart w siatkach: --i nadaje JS per karta */
.reveal .siatka>*{
  opacity:0; transform:translateY(20px);
  transition:opacity .55s ease-out calc(var(--i,0)*.07s), transform .55s ease-out calc(var(--i,0)*.07s);
}
.reveal-visible .siatka>*{opacity:1; transform:none}
/* po zakończeniu reveal JS dodaje .reveal-done — zeruje stagger delay, żeby hover reagował od razu */
.reveal-done .siatka>*{transition-delay:0s}
/* hover kart musi stać ZA regułami reveal (remis specyficzności → wygrywa późniejsza) */
.usluga:hover{transform:translateY(-3px)}

/* Stary placeholder .hero-foto (dashed box) usunięty — .hero-foto to teraz
   kontener realnego zdjęcia; reguły dla obrazu są w sekcji hero wyżej.
   H1 stoi obok zdjęcia, nie na nim, więc overlay/gradient nie jest potrzebny. */

/* pieczęć */
.pieczec{color:var(--szalwia-ink); display:block}
.pieczec-mini{width:92px; height:92px}

/* kreska — falujący dywider */
.kreska{display:flex; justify-content:center; padding:8px 0; color:var(--szalwia); opacity:.75}
.kreska svg{width:min(280px,60vw); height:18px}

/* ---------- kafelki / karty ---------- */
.siatka{display:grid; gap:18px}
.siatka-2{grid-template-columns:1fr}
.siatka-3{grid-template-columns:1fr}
.siatka-4{grid-template-columns:1fr}
@media (min-width:540px){
  .siatka-2,.siatka-3,.siatka-4{grid-template-columns:repeat(2,1fr)}
}
@media (min-width:860px){
  .siatka-3{grid-template-columns:repeat(3,1fr)}
  .siatka-4{grid-template-columns:repeat(4,1fr)}
}

.usluga{
  display:block; background:var(--karta); border:1px solid var(--linia); border-radius:var(--r);
  padding:24px; text-decoration:none; color:var(--atrament);
  transition:border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
.usluga:hover{border-color:var(--szalwia); box-shadow:0 8px 22px rgba(46,51,43,.08); color:var(--atrament); transform:translateY(-3px)}
.usluga h3{margin-bottom:8px}
.usluga p{color:var(--przygaszony); margin-bottom:12px; font-size:15px}
.usluga .dalej{font-weight:600; color:var(--szalwia-ink); text-decoration:underline; text-underline-offset:4px}

/* karta rozbudowana (diagnoza/konsultacje) */
.karta-uslugi{background:var(--karta); border:1px solid var(--linia); border-radius:var(--r); padding:26px; margin-bottom:18px}
.karta-uslugi h3{margin-bottom:6px}
.karta-uslugi .meta{color:var(--przygaszony); font-size:15px}
.karta-uslugi dl{margin:14px 0 10px}
.karta-uslugi dt{font-weight:600; font-size:13px; text-transform:uppercase; letter-spacing:.1em; color:var(--szalwia-ink); margin-top:12px}
.karta-uslugi dd{margin:4px 0 0; color:var(--atrament)}
.karta-uslugi ul{margin:6px 0 10px; padding-left:20px}
.karta-uslugi li{margin-bottom:4px}

/* pasek zaufania */
.zaufanie{display:grid; gap:14px}
@media (min-width:540px){.zaufanie{grid-template-columns:repeat(3,1fr)}}
.zaufanie .box{
  background:var(--piasek); border-radius:var(--r); padding:20px 22px; text-align:center;
}
.zaufanie .box strong{display:block; font-family:var(--serif); font-weight:500; font-size:20px; margin-bottom:4px}
.zaufanie .box span{color:var(--szalwia-ink); font-size:14px} /* na piasku przygaszony ma 4.33:1 — poniżej AA */
.sekcja-piasek .lead{color:var(--szalwia-ink)}

/* blok opinii (komponent z DS — gotowy na treść od klientki) */
.opinia{
  background:var(--szalwia-mgla); border-radius:var(--r); padding:26px;
  font-family:var(--serif); font-size:19px; line-height:1.5; color:var(--szalwia-ink);
}
.opinia footer{font-family:var(--sans); font-size:14px; color:var(--szalwia-ink); margin-top:12px}

/* ---------- karta osoby ---------- */
.osoba{background:var(--karta); border:1px solid var(--linia); border-radius:var(--r); padding:26px}
.osoba-zdjecie{
  position:relative; width:clamp(124px,30vw,156px); aspect-ratio:4/5;
  overflow:hidden; margin:2px auto 24px;
  background:var(--szalwia-mgla); border:1px solid var(--linia);
  border-radius:999px 999px var(--r-s) var(--r-s);
  box-shadow:0 0 0 7px var(--papier), 0 0 0 8px var(--linia);
}
.osoba-zdjecie::after{
  content:''; position:absolute; inset:0; pointer-events:none;
  background:var(--szalwia-mgla); opacity:.14; mix-blend-mode:multiply;
  transition:opacity .2s ease;
}
.osoba-zdjecie img{
  display:block; width:100%; height:100%; object-fit:cover; object-position:50% 36%;
  filter:grayscale(.58) sepia(.12) saturate(.64) contrast(.94) brightness(1.04);
  transform:scale(1.03); transition:filter .2s ease, transform .2s ease;
}
.osoba:hover .osoba-zdjecie img{
  filter:grayscale(.35) sepia(.08) saturate(.74) contrast(.97) brightness(1.03);
  transform:scale(1.055);
}
.osoba:hover .osoba-zdjecie::after{opacity:.07}
.osoba-zdjecie--zuzanna img{object-position:50% 50%; transform:scale(1.04)}
.osoba:hover .osoba-zdjecie--zuzanna img{transform:scale(1.06)}
.osoba-zdjecie--angelika img{object-position:38% 66%; transform:scale(2.12); transform-origin:38% 66%}
.osoba:hover .osoba-zdjecie--angelika img{transform:scale(2.16)}
.osoba-zdjecie--dorota img{object-position:58% 40%}
.osoba-zdjecie--edyta img{object-position:50% 28%}
.osoba-zdjecie--anna img{object-position:50% 36%}
.osoba h3{text-align:center; margin-bottom:6px}
.osoba .rola{color:var(--przygaszony); font-size:15px; text-align:center; max-width:46ch; margin:0 auto 20px}
.osoba ul{margin:8px 0 0; padding-left:20px; font-size:15px}
.osoba li{margin-bottom:3px}

/* ---------- cennik ---------- */
.cennik{background:var(--karta); border:1px solid var(--linia); border-radius:var(--r); padding:10px 26px 18px; margin-bottom:26px}
.cennik table{width:100%; border-collapse:collapse}
.cennik caption{text-align:left; padding:16px 0 10px}
.cennik caption .etykieta{margin-bottom:2px}
.cennik caption strong{font-family:var(--serif); font-weight:500; font-size:22px}
.cennik th{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap} /* widoczne dla czytników ekranu */
.cennik td{padding:13px 0; border-top:1px solid var(--linia); vertical-align:top}
.cennik td:last-child{text-align:right; padding-left:16px}
.cennik .co{font-weight:500}
.cennik .jak{display:block; color:var(--przygaszony); font-size:14px; font-weight:400; margin-top:2px}
.cennik .cena{font-size:18px; white-space:normal} /* długie ceny („ustalana indywidualnie") zawijają się na 360px */
.przypis{color:var(--przygaszony); font-size:14px}

/* ---------- moduł dokumentu ---------- */
.dok{
  display:flex; gap:16px; align-items:flex-start;
  background:var(--karta); border:1px solid var(--linia); border-radius:var(--r);
  padding:20px 22px; margin-bottom:14px; text-decoration:none; color:var(--atrament);
  transition:border-color .18s ease;
}
.dok:hover{border-color:var(--szalwia); color:var(--atrament)}
.dok .ikona{
  flex:0 0 auto; width:46px; height:46px; border-radius:var(--r-s);
  background:var(--szalwia-mgla); color:var(--szalwia-ink);
  display:flex; align-items:center; justify-content:center;
  font-weight:600; font-size:11px; letter-spacing:.06em;
}
.dok h3,.dok h4{font-size:17px; font-family:var(--sans); font-weight:600; margin:2px 0 4px}
.dok p{color:var(--przygaszony); font-size:14px; margin:0}
.dok .tag{margin-top:8px}

/* ---------- polityka prywatności ---------- */
.polityka-tresc{max-width:820px}
.polityka-tresc>.tag{margin-bottom:22px}
.polityka-tresc h2{margin-top:0}
.polityka-tresc h3{margin-top:28px}
.polityka-tresc ul{padding-left:22px}
.polityka-tresc li{margin-bottom:8px}

/* ---------- kontakt ---------- */
.kontakt-grid{display:grid; gap:24px}
.kontakt-grid>*,.rozgalezienie>*{min-width:0}
@media (min-width:860px){.kontakt-grid{grid-template-columns:1fr 1fr}}
.kontakt-dane p{margin-bottom:10px}
.kontakt-dane a{font-weight:600; overflow-wrap:anywhere}
.mapa-placeholder{
  background:var(--piasek); border:1px dashed var(--linia); border-radius:var(--r);
  min-height:260px; display:flex; align-items:center; justify-content:center;
  color:var(--szalwia-ink); text-align:center; padding:24px; font-size:15px;
}

/* ---------- stopka ---------- */
.stopka{background:var(--piasek); border-top:1px solid var(--linia); margin-top:56px}
.stopka-grid{display:grid; gap:28px; padding:48px 0 36px}
@media (min-width:860px){.stopka-grid{grid-template-columns:2fr 1.4fr 1.2fr auto; align-items:start}}
.stopka h2{font-size:20px}
.stopka p,.stopka li{font-size:15px; color:var(--atrament)}
.stopka ul{margin:0; padding:0; list-style:none}
.stopka li{margin-bottom:8px}
.stopka a{display:inline-block; padding:4px 0; overflow-wrap:anywhere}
.stopka li a{display:inline-flex; align-items:center; min-height:44px; padding:8px 0}
.pas-alarmowy{background:var(--alarm-mgla); border-radius:var(--r); padding:16px 20px; margin-bottom:28px}
.pas-alarmowy p{margin:8px 0 0; font-size:15px}
.pas-alarmowy strong{color:var(--alarm)}
.stopka-meta{border-top:1px solid var(--linia); padding:18px 0 26px; font-size:13px; color:var(--szalwia-ink); display:flex; gap:16px; flex-wrap:wrap; justify-content:space-between}

/* ---------- formularz „Umów wizytę" (kontakt.html) ---------- */
.rozgalezienie{display:grid; gap:20px; margin-top:28px}
@media (min-width:860px){
  .rozgalezienie{grid-template-columns:1fr 1.35fr; align-items:start}
}

/* box pilny */
.karta-pilna{
  background:var(--alarm-mgla); border:1px solid var(--linia); border-radius:var(--r);
  padding:26px;
}
.karta-pilna .ikona-duza{font-size:28px; line-height:1; display:block; margin-bottom:10px}
.karta-pilna h3{margin-bottom:12px}
.tel-duzy{
  display:inline-block; max-width:100%; font-family:var(--serif); font-weight:500;
  font-size:clamp(23px,7.4vw,28px); overflow-wrap:anywhere;
  color:var(--alarm); text-decoration:none; margin-bottom:8px; min-height:44px;
}
.tel-duzy:hover{color:var(--alarm); text-decoration:underline; text-underline-offset:4px}
.karta-pilna p{color:var(--atrament); font-size:15px}
.pas-pomocy{
  margin-top:16px; padding-top:14px; border-top:1px solid var(--linia);
  font-size:14px;
}
.pas-pomocy strong{color:var(--alarm)}

/* box formularza */
.karta-formularz{
  background:var(--karta); border:1px solid var(--linia); border-radius:var(--r);
  padding:26px;
}
.karta-formularz > p{color:var(--przygaszony); font-size:15px}
.formularz{margin-top:20px}
.pole{margin-bottom:20px}
.pole-para{display:grid; gap:20px}
@media (min-width:540px){
  .pole-para{grid-template-columns:1fr 1fr}
}
.pole label,
.pole legend{
  display:block; font-weight:600; font-size:14px; margin-bottom:6px; color:var(--atrament);
}
.formularz fieldset{border:0; margin:0 0 20px; padding:0}

/* inputy, select, textarea */
.formularz input[type="text"],
.formularz input[type="tel"],
.formularz input[type="email"],
.formularz select,
.formularz textarea{
  width:100%; padding:12px 14px; min-height:48px;
  font-family:var(--sans); font-size:16px; color:var(--atrament);
  background:var(--karta); border:1px solid var(--przygaszony); border-radius:var(--r-s);
}
.formularz textarea{min-height:96px; resize:vertical}
.formularz input:focus-visible,
.formularz select:focus-visible,
.formularz textarea:focus-visible{outline:3px solid var(--szalwia); outline-offset:2px}
.formularz ::placeholder{color:var(--przygaszony); opacity:1}

/* grupa radio — pigułki */
.radio-grupa{display:flex; flex-wrap:wrap; gap:8px}
.radio-grupa label{
  display:inline-flex; align-items:center; margin:0;
  border:1px solid var(--przygaszony); border-radius:999px;
  background:var(--karta); cursor:pointer;
  transition:border-color .18s ease, background-color .18s ease;
}
.radio-grupa input{position:absolute; opacity:0; width:1px; height:1px}
.radio-grupa span{
  display:inline-flex; align-items:center; padding:11px 18px; min-height:44px;
  font-size:15px; font-weight:500; color:var(--atrament);
}
.radio-grupa label:hover{border-color:var(--szalwia)}
.radio-grupa input:checked + span{color:var(--szalwia-ink); font-weight:600}
.radio-grupa label:has(input:checked){border-color:var(--szalwia); background:var(--szalwia-mgla)}
.radio-grupa input:focus-visible + span{outline:3px solid var(--szalwia); outline-offset:2px; border-radius:999px}

/* checkbox zgody */
.zgoda{margin-bottom:22px}
.checkbox{display:flex; gap:12px; align-items:flex-start; font-weight:400; font-size:14px; cursor:pointer; margin:0}
.checkbox input{
  flex:0 0 auto; appearance:none; -webkit-appearance:none;
  width:22px; height:22px; margin-top:2px;
  border:1.5px solid var(--przygaszony); border-radius:5px; background:var(--karta); cursor:pointer;
}
.checkbox input:checked{background:var(--szalwia); border-color:var(--szalwia)}
.checkbox input:checked::after{
  content:''; display:block; width:6px; height:11px; margin:2px auto 0;
  border:solid var(--karta); border-width:0 2px 2px 0; transform:rotate(45deg);
}
.checkbox input:focus-visible{outline:3px solid var(--szalwia); outline-offset:2px}
.checkbox span{color:var(--atrament); line-height:1.55}
.formularz .przypis{margin:14px 0 0; overflow-wrap:anywhere}
.form-wymagane,.pomoc-pola{font-size:13px; color:var(--szalwia-ink)}
.form-wymagane{margin:0 0 18px}
.wymagane{color:var(--alarm); font-weight:600}
.pomoc-pola{display:block; margin-top:6px}
.form-status{margin:14px 0 0; color:var(--szalwia-ink); font-weight:600}

/* ---------- drobiazgi ---------- */
.oddech{height:8px}
.text-center{text-align:center}
.mt-0{margin-top:0}