/* Hallmark · genre: editorial · macrostructure: Long Document · theme: custom (studied-DNA: adwokat-gabrysbasek.pl)
 * design-system: WIZJA.md · designed-as-app · nav: N6 · footer: Ft5 · pre-emit critique: P4 H4 E5 S5 R5 V4
 * contrast: pass (40-41) · honest: pass (46) · tokens: pass (48) · mobile: pass (34, 49, 50-57) */

/* kancelaria-szczyrba.pl - arkusz główny.
   Wymaga wcześniej wczytanego tokeny.css. Sekcje numerowane niżej. */

/* ==========================================================  1. BAZA  === */

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

html {
  /* clip, nigdy hidden - hidden na html tworzy kontener przewijania
     i psuje position: sticky w belce */
  overflow-x: clip;
  -webkit-text-size-adjust: 100%;
  /* Zapas ponad wysokość przyklejonej belki (--belka-rzad), żeby kotwica
     nie chowała się pod nią. */
  scroll-padding-top: 7rem;

  /* Szara albo niebieska poświata, którą przeglądarki mobilne rysują po
     przytrzymaniu palca na odnośniku. */
  -webkit-tap-highlight-color: transparent;
}

/* Płynne przewijanie do kotwic (#kontakt, #pytania). */
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

body {
  overflow-x: clip;
  margin: 0;
  background: var(--papier);
  color: var(--tusz-2);
  font-family: var(--font-body);
  font-size: var(--t-md);
  line-height: 1.66;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 {
  margin: 0;
  font-family: var(--font-display);
  font-style: normal;          /* nagłówki zawsze proste, nigdy kursywa */
  color: var(--tusz);
  letter-spacing: -0.016em;
  text-wrap: balance;
  /* W nagłówku wyrazów się nie przenosi. Część przeglądarek dzieli po polsku
     i łamała hero na telefonie na "kon-kretnego"; Chrome na komputerze nie ma
     polskiego słownika, więc tam tego nie widać. */
  hyphens: manual;
  overflow-wrap: anywhere;     /* tylko wyraz dłuższy niż cała linia */
  min-width: 0;
}

p  { margin: 0; text-wrap: pretty; hyphens: auto; }
ul, ol { margin: 0; padding: 0; list-style: none; }
/* dd ma w przeglądarce domyślne margin-inline-start: 40px. */
dl, dt, dd { margin: 0; }
figure { margin: 0; }
img { max-width: 100%; display: block; }
a  { color: inherit; }

/* Zdejmuje 300 ms opóźnienia, które część przeglądarek mobilnych
   zostawia na wypadek podwójnego stuknięcia. */
a, button, summary, label, input, textarea { touch-action: manipulation; }

::selection { background: var(--akcent); color: var(--papier); }

/* Blokada przewijania tła przy otwartym menu. */
body.blokada-przewijania {
  position: fixed;
  inset-inline: 0;
  width: 100%;
  overflow: hidden;
}

:focus-visible {
  outline: 2px solid var(--akcent);
  outline-offset: 3px;
  border-radius: var(--r-xs);
  transition: none;            /* obwódka fokusa nigdy się nie animuje */
}

.tylko-dla-czytnika {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.pomin {
  position: absolute;
  top: var(--s-2xs);
  left: var(--s-2xs);
  z-index: 100;
  padding: var(--s-2xs) var(--s-sm);
  background: var(--noc);
  color: var(--na-nocy);
  border-radius: var(--r-sm);
  font-size: var(--t-sm);
  font-weight: 600;
  text-decoration: none;
  transform: translateY(-160%);
}

.pomin:focus-visible { transform: none; outline-color: var(--piasek); }

/* =========================================================  2. UKŁAD  === */

.wrap {
  max-width: var(--maks);
  margin-inline: auto;
  padding-inline: var(--os) max(var(--os), 1.25rem);
}

/* Rytm sekcji ściśnięty na prośbę klienta (2026-10-22). Wcześniej sekcja
   miała duży pas, a dwie sąsiednie zostawiały 170-340 px pustego papieru.
   Teraz sekcja ma pas średni, a druga pod rząd tylko mały u góry: między
   treścią sąsiednich sekcji wychodzi ok. 100 px na PC i 56 px na telefonie. */
.sekcja { padding-block: var(--pas-sredni); }
.sekcja + .sekcja { padding-top: var(--pas-maly); }

.proza { max-width: var(--miara); }

/* Układ dwuszpaltowy: nagłówek albo obraz w węższej szpalcie (4/12), treść w
   szerszej (8/12). */
.szpalty {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
  gap: var(--szpara);
  align-items: start;
}

@media (max-width: 60rem) {
  .szpalty { grid-template-columns: minmax(0, 1fr); }
}

/* =========================================  3. TYPOGRAFIA POMOCNICZA  === */

.etykieta {
  margin: 0;
  font-size: var(--t-xs);
  font-weight: 600;
  text-transform: lowercase;
  letter-spacing: var(--tr-etykieta);
  color: var(--akcent);
}

.na-nocy .etykieta { color: var(--piasek); }

/* Etykiety sekcji lecą małymi literami - to zabieg typograficzny, nie zapis. */
.etykieta__nazwa { text-transform: none; }

/* Zdanie nagłówka jako osobny wers (hasło w hero, zaproszenie na Kontakcie). */
.wers { display: block; }

.glowa { margin-bottom: var(--s-xl); }

/* Odstęp nad tytułem tylko wtedy, gdy stoi nad nim etykieta. */
.etykieta + .glowa__tytul,
.etykieta + .proces__tytul,
.etykieta + .naglowek-podstrony__tytul { margin-top: var(--s-sm); }

.glowa__tytul {
  max-width: 20ch;
  font-size: var(--t-3xl);
  font-variation-settings: "opsz" 44;
  font-weight: 400;
  line-height: 1.14;
}

.glowa__opis {
  margin-top: var(--s-md);
  max-width: var(--miara);
}

/* Gdy akapit stoi samodzielnie, bez nagłówka nad sobą. */
.glowa__opis--bez-odstepu { margin-top: 0; margin-bottom: var(--s-lg); }

/* Para klucz + wartość: tytuł zawodowy, adres, godziny. */
.dana { padding-block: var(--s-md); }

.dana__klucz {
  font-size: var(--t-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--tr-etykieta);
  color: var(--tusz-3);
}

/* Wartości szeryfem: to nazwiska, tytuły, adresy i miejscowości, a nie
   liczby z formularza - w tym kroju czytają się jak nagłówek pisma. */
.dana__wartosc {
  margin-top: var(--s-3xs);
  font-family: var(--font-display);
  font-variation-settings: "opsz" 22;
  font-size: var(--t-lg);
  line-height: 1.35;
  color: var(--tusz);
}

/* ======================================================  4. ZAŚLEPKI  === */

.zaslepka {
  padding: 0.08em 0.34em;
  border-radius: 3px;
  background: var(--zaslepka-tlo);
  box-shadow: inset 0 -1px 0 var(--zaslepka-kreska);
  color: inherit;
}

.na-nocy .zaslepka {
  background: var(--zaslepka-tlo-noc);
  box-shadow: inset 0 -1px 0 var(--zaslepka-kreska-noc);
}

/* ===========================================  5. ODNOŚNIK W NAWIASIE  === */

.nawias {
  position: relative;
  text-decoration: none;
  white-space: nowrap;
}

.nawias::before,
.nawias::after {
  position: absolute;
  top: 50%;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1.5em;
  line-height: 0;
  color: var(--akcent);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--dur-short) var(--ease-fast),
              transform var(--dur-short) var(--ease-fast);
}

.nawias::before { content: "["; left:  -0.62em; transform: translateY(-50%) translateX(0.28em); }
.nawias::after  { content: "]"; right: -0.62em; transform: translateY(-50%) translateX(-0.28em); }

.na-nocy .nawias::before,
.na-nocy .nawias::after { color: var(--piasek); }

@media (hover: hover) and (pointer: fine) {
  .nawias:hover::before,
  .nawias:hover::after { opacity: 1; transform: translateY(-50%) translateX(0); }
}

.nawias:focus-visible::before,
.nawias:focus-visible::after { opacity: 1; transform: translateY(-50%) translateX(0); }

/* Na dotyku nie ma najechania. Afordancja nie może znikać razem z myszką. */
@media (hover: none) {
  .nawias::before,
  .nawias::after { opacity: 0.45; transform: translateY(-50%) translateX(0); }
}

/* =========================================================  6. BELKA  === */

.belka {
  position: sticky;
  top: 0;
  z-index: 40;
  background: var(--noc);
  color: var(--na-nocy);
  box-shadow: var(--cien-belka);
}

/* Winieta wyrównana do góry rzędu, reszta wyśrodkowana pionowo. */
.belka__inner {
  display: flex;
  align-items: flex-start;
  gap: var(--s-lg);
  padding-block: var(--belka-odstep);
}

.belka__inner > *:not(.marka),
.menu-panel__gora > *:not(.marka) { align-self: center; }

/* Wysokość winiety jest stała, więc złamanie podpisu na dwie linie nie
   rozpycha rzędu i nie przesuwa przycisku obok. */
.belka .marka,
.menu-panel__gora .marka { height: var(--marka-wys); }

.marka {
  display: flex;
  align-items: center;
  gap: var(--s-sm);
  margin-right: auto;
  min-width: 0;
  color: inherit;
  text-decoration: none;
}

.marka__tekst {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  min-width: 0;
}

/* Monogram z logo kancelarii. */
.marka__znak {
  flex: none;
  width: auto;
  height: var(--marka-znak);
  fill: var(--piasek);
}

.marka__nazwa {
  font-family: var(--font-display);
  font-variation-settings: "opsz" 30;
  font-weight: 500;
  font-size: var(--t-lg);
  line-height: 1.1;
  letter-spacing: -0.008em;
  color: var(--na-nocy);
  white-space: nowrap;
}

/* Bez nowrap - i to jest cała naprawa nachodzenia na przycisk Menu. */
.marka__rola {
  font-size: 0.6875rem;
  line-height: 1.35;
  text-transform: uppercase;
  letter-spacing: var(--tr-etykieta);
  color: var(--na-nocy-2);
}

.nawigacja { display: flex; align-items: center; gap: var(--s-xl); }

.nawigacja__link {
  padding-block: 0.5rem;
  font-size: var(--t-sm);
  font-weight: 500;
  letter-spacing: 0.01em;
  color: var(--na-nocy);
  transition: color var(--dur-short) var(--ease-fast);
}

.nawigacja__link:active { color: var(--piasek); }

.nawigacja__link[aria-current="page"] { color: var(--piasek); }

.telefon-chip {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  padding-inline: 1.125rem;
  border-radius: var(--r-sm);
  background: var(--piasek);
  color: var(--noc);
  font-size: var(--t-sm);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  text-decoration: none;
  transition: background-color var(--dur-short) var(--ease-fast);
}

@media (hover: hover) and (pointer: fine) {
  .telefon-chip:hover { background: var(--piasek-2); }
}

.telefon-chip:active { transform: translateY(1px); }
.telefon-chip:focus-visible { outline-color: var(--piasek); }

@media (max-width: 60rem) { .nawigacja { display: none; } }

/* W belce stoją naraz: znak, dwuwierszowa winieta i przycisk Menu. */
@media (max-width: 30rem) {
  .belka__inner { gap: var(--s-sm); }
  .marka { gap: var(--s-2xs); }
}

/* Poniżej 360 px rynny są już wyciśnięte, a nazwisko nie może się złamać:
   winieta ma stałą wysokość, więc trzeci wiersz nie miałby gdzie wejść. */
@media (max-width: 22.5rem) {
  .marka__nazwa { font-size: var(--t-md); }
}

/* Chip z telefonem znika poniżej 592 px. */
@media (max-width: 37rem) { .telefon-chip { display: none; } }

/* --- menu na telefonie --- */

.menu-btn { display: none; }

@media (max-width: 60rem) {
  .menu-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 2.75rem;
    padding-inline: 1rem;
    border: var(--wlos) solid var(--kreska-noc);
    border-radius: var(--r-sm);
    background: transparent;
    color: var(--na-nocy);
    font-family: inherit;
    font-size: var(--t-sm);
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
    appearance: none;
    transition: background-color var(--dur-short) var(--ease-fast);
  }
  .menu-btn:active { background: var(--noc-2); }
  .menu-btn:focus-visible { outline-color: var(--piasek); }
}

/* Górny rząd panelu jest konstrukcyjnie identyczny z belką: zero własnego
   odstępu od góry, ta sama minimalna wysokość rzędu, to samo wyśrodkowanie. */
.menu-panel {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: flex;
  flex-direction: column;
  padding: 0 var(--os) var(--s-xl);
  padding-top: env(safe-area-inset-top);
  overflow-y: auto;
  background: var(--noc);
  color: var(--na-nocy);
}

.menu-panel[hidden] { display: none; }

@media (min-width: 60.0625rem) { .menu-panel { display: none; } }

/* Wejście panelu: kurtyna z góry, nie wygaszanie. */
.js .menu-panel {
  clip-path: inset(0 0 100% 0);
  transition: clip-path 340ms var(--ease-out);
}

.js .menu-panel.jest-otwarte { clip-path: inset(0 0 0 0); }

/* Przy zablokowanym przewijaniu body przestaje być kontenerem przewijania,
   więc przyklejona belka traci przyczepność. Stąd position: fixed. */
body.blokada-przewijania .belka {
  position: fixed;
  inset-inline: 0;
  top: 0;
}

/* ...ale przypięta belka jest wyjęta z układu, więc CAŁA treść pod nią
   podskakuje o jej wysokość. */
body.blokada-przewijania { padding-top: var(--wys-belki, 0px); }

/* Pozycje dochodzą samą nieprzezroczystością, bez przesuwania - kurtyna już
   niesie ruch, druga warstwa przesunięcia robiłaby bałagan. */
.js .menu-panel__link,
.js .menu-panel__stopa {
  opacity: 0;
  transition: opacity var(--dur-short) var(--ease-out);
}

.js .menu-panel.jest-otwarte .menu-panel__link,
.js .menu-panel.jest-otwarte .menu-panel__stopa { opacity: 1; }

.js .menu-panel.jest-otwarte .menu-panel__link:nth-child(1) { transition-delay: 120ms; }
.js .menu-panel.jest-otwarte .menu-panel__link:nth-child(2) { transition-delay: 160ms; }
.js .menu-panel.jest-otwarte .menu-panel__link:nth-child(3) { transition-delay: 200ms; }
.js .menu-panel.jest-otwarte .menu-panel__link:nth-child(4) { transition-delay: 240ms; }
.js .menu-panel.jest-otwarte .menu-panel__stopa              { transition-delay: 280ms; }

/* Konstrukcyjnie identyczny z .belka__inner: to samo wyrównanie i ten sam
   odstęp. */
.menu-panel__gora {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--s-md);
  padding-block: var(--belka-odstep);
  margin-bottom: var(--s-md);
  border-bottom: var(--wlos) solid var(--kreska-noc);
}

.menu-panel__lista { margin-top: var(--s-lg); }

.menu-panel__link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-md);
  min-height: 4rem;
  border-bottom: var(--wlos) solid var(--kreska-noc);
  font-family: var(--font-display);
  font-variation-settings: "opsz" 36;
  font-weight: 400;
  font-size: var(--t-2xl);
  color: var(--na-nocy);
  white-space: nowrap;
  text-decoration: none;
  transition: color var(--dur-short) var(--ease-fast);
}

.menu-panel__strzalka {
  flex: none;
  font-family: var(--font-body);
  font-size: var(--t-lg);
  line-height: 1;
  color: var(--piasek);
  opacity: 0.45;
  transition: transform var(--dur-short) var(--ease-fast),
              opacity var(--dur-short) var(--ease-fast);
}

.menu-panel__link:focus-visible { outline-color: var(--piasek); outline-offset: -3px; }
.menu-panel__link:active { color: var(--piasek); }
.menu-panel__link:active .menu-panel__strzalka { transform: translateX(6px); opacity: 1; }

/* Dolna część panelu: pełny blok kontaktu zamiast samego przycisku. */
.menu-panel__stopa {
  display: grid;
  justify-items: start;
  gap: var(--s-sm);
  margin-top: auto;
  padding-top: var(--s-2xl);
}

.menu-panel__mail {
  display: inline-flex;
  align-items: center;
  min-height: 2.5rem;
  padding-bottom: 2px;
  border-bottom: var(--wlos) solid var(--kreska-noc);
  font-size: var(--t-base);
  color: var(--na-nocy-2);
  text-decoration: none;
}

.menu-panel__mail:active { color: var(--piasek); }

.menu-panel__social {
  display: inline-flex;
  align-items: center;
  gap: 0.55em;
  min-height: 2.5rem;
  font-size: var(--t-sm);
  color: var(--na-nocy-2);
  text-decoration: none;
}

.menu-panel__social svg { flex: none; width: 1.15em; height: 1.15em; }
.menu-panel__social:active { color: var(--piasek); }

/* ==========================================================  7. HERO  === */

.hero {
  position: relative;
  padding-block: var(--pas-duzy) 0;
  background: var(--noc);
  color: var(--na-nocy-2);
}

.hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  gap: clamp(2rem, 5vw, 5rem);
  align-items: end;
}

/* Kolumna tekstu jest kontenerem: stopień hasła liczy się od jej szerokości. */
.hero__tekst {
  padding-bottom: var(--pas-duzy);
  container-type: inline-size;
}

.hero__teza {
  font-size: var(--t-teza);
  /* Dwa zdania, każde w jednym wersie (prośba klienta 2026-10-22), więc
     stopień rośnie z kolumną. Dłuższy wers, "Indywidualne podejście.", ma
     9,806 stopnia szerokości: 100 / 9,806 = 10,2cqi, z zapasem 4% 9,8cqi.
     Bez obsługi cqi zostaje var(--t-teza) i wersy łamią się normalnie. */
  font-size: min(var(--t-teza), 9.8cqi);
  font-variation-settings: "opsz" 64;
  font-weight: 300;
  line-height: 1.11;
  letter-spacing: -0.022em;
  color: var(--na-nocy);
}

/* Drugi wers w akcencie, jak "ze mną" w stopce. Emfaza kolorem, nigdy
   kursywą w nagłówku. */
.hero__teza em { font-style: normal; color: var(--piasek); }

/* Etykieta stoi w H1, żeby nagłówek strony głównej mówił, kim jest kancelaria
   i gdzie (radca prawny, Gliwice) - samo hasło nie mówi tego wyszukiwarce.
   Wygląda jak dawny akapit nad hasłem: osobny wiersz, krój tekstu, interlinia
   akapitu i ten sam odstęp do hasła. */
.hero__teza .etykieta {
  display: block;
  margin-bottom: var(--s-md);
  font-family: var(--font-body);
  font-variation-settings: normal;
  line-height: 1.66;
}

/* Wstęp należy do hero, więc też bez przenoszenia wyrazów. */
.hero__lede {
  margin-top: var(--s-md);
  max-width: 46ch;
  font-size: var(--t-lg);
  line-height: 1.6;
  color: var(--na-nocy-2);
  hyphens: manual;
}

.hero__akcje {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-sm) var(--s-lg);
  margin-top: var(--s-xl);
}

/* --- przyciski --- */

.przycisk-piasek {
  display: inline-flex;
  align-items: center;
  min-height: 3.25rem;
  padding-inline: 1.5rem;
  border: 0;
  border-radius: var(--r-sm);
  background: var(--piasek);
  color: var(--noc);
  font-family: inherit;
  font-size: var(--t-md);
  font-weight: 700;
  /* Bez tabular-nums: w tym kroju cyfry tabelaryczne poszerzają też dwukropek,
     więc "Zadzwoń:" czytało się jak "Zadzwoń :". */
  white-space: nowrap;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--dur-short) var(--ease-fast);
}

@media (hover: hover) and (pointer: fine) {
  .przycisk-piasek:hover { background: var(--piasek-2); }
}

.przycisk-piasek:active { transform: translateY(1px); }
.przycisk-piasek:focus-visible { outline-color: var(--piasek); }

.przycisk-piasek[disabled],
.przycisk-piasek[aria-disabled="true"] {
  opacity: 0.55;
  cursor: not-allowed;
  pointer-events: none;
}

.przycisk-piasek[data-stan="wysylanie"] { opacity: 0.7; pointer-events: none; }

/* Odnośnik wtórny. */
.akcja-wtorna {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  font-size: var(--t-md);
  font-weight: 500;
  color: var(--na-nocy);
  text-decoration: none;
  transition: color var(--dur-short) var(--ease-fast);
}

/* Ta sama klasa bywa na odnośniku i na przycisku (druk dokumentu). */
button.akcja-wtorna {
  padding: 0;
  border: 0;
  background: none;
  font-family: inherit;
  cursor: pointer;
}

.akcja-wtorna > .nawias {
  padding-bottom: 2px;
  border-bottom: var(--wlos) solid var(--kreska-noc);
  transition: border-color var(--dur-short) var(--ease-fast);
}

.akcja-wtorna--papier { color: var(--akcent); }
.akcja-wtorna--papier > .nawias { border-bottom-color: var(--kreska); }

/* Nawias i kreska reagują na najechanie CAŁEGO odnośnika, nie tylko
   na trafienie w same litery. */
@media (hover: hover) and (pointer: fine) {
  .akcja-wtorna:hover > .nawias { border-bottom-color: currentColor; }
  .akcja-wtorna:hover .nawias::before,
  .akcja-wtorna:hover .nawias::after { opacity: 1; transform: translateY(-50%) translateX(0); }
}

.akcja-wtorna:focus-visible .nawias::before,
.akcja-wtorna:focus-visible .nawias::after { opacity: 1; transform: translateY(-50%) translateX(0); }

.akcja-wtorna:active { transform: translateY(1px); }

/* W hero odnośnik stoi pod wypełnionym przyciskiem. */
.hero__akcje .akcja-wtorna { padding-inline: 1.5rem; }

/* Odnośnik stojący samodzielnie, poza hero. */
@media (hover: none) {
  .akcja-wtorna--papier { padding-left: 0.68em; }
}

/* --- kadr zdjęcia --- */

.kadr {
  position: relative;
  aspect-ratio: 4 / 5;              /* proporcja zarezerwowana od pierwszego dnia: podmiana zdjęcia nie przesunie
   ani jednego piksela (zero CLS) */
  display: grid;
  place-content: center;
  padding: var(--s-md);
  border-radius: var(--r-kadr);
  overflow: hidden;
  text-align: center;
}

.kadr > img, .kadr > picture { display: block; width: 100%; height: 100%; }
.kadr > picture > img { width: 100%; height: 100%; object-fit: cover; }
.kadr > img { object-fit: cover; }

/* Modyfikatory kadru to trzy NIEZALEŻNE osie: barwa, orientacja i zejście. */
.kadr--noc    { background: var(--noc-2); color: var(--kreska-noc); }
.kadr--papier { background: var(--papier-2); color: var(--kreska); }
.kadr--poziom { aspect-ratio: 5 / 4; }
/* Pas przestaje rosnąć razem ze stroną: powyżej szerokości maksymalnej
   kolumna tekstu już stoi w miejscu, a zdjęcie ciągnięte do krawędzi
   robiłoby się na szerokim monitorze wstęgą bez związku z treścią. */
.kadr--pas {
  aspect-ratio: 3 / 1;
  max-width: var(--maks);
  margin-inline: auto;
  border-radius: 0;
}

/* Gdy pas jest już wyraźnie odsunięty od krawędzi ekranu, ostre rogi
   przestają być konsekwencją pełnego wykrwawienia i zaczynają odstawać od
   pozostałych kadrów. */
@media (min-width: 88rem) {
  .kadr--pas { border-radius: var(--r-kadr); }
}

/* Zejście na papier: kadr przecina dolną granicę ciemnego pasa. */
.kadr--zejscie {
  margin-bottom: calc(-1 * var(--zejscie-portretu));
  z-index: 2;
}

/* Raster zaślepki: ta sama faktura na kadrach zdjęć i na zasłonie mapy, żeby
   "tu będzie obraz" wyglądało wszędzie tak samo. */
.kadr::after,
.mapa__zaslona::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: repeating-linear-gradient(116deg, transparent 0 10px, currentColor 10px 11px);
  opacity: 0.16;
  pointer-events: none;
}

.kadr:has(img)::after { display: none; }

.kadr__podpis {
  position: relative;
  z-index: 1;
  max-width: 24ch;
  font-size: var(--t-xs);
  line-height: 1.55;
}

.kadr--noc    .kadr__podpis { color: var(--na-nocy-2); }
.kadr--papier .kadr__podpis { color: var(--tusz-3); }

@media (max-width: 60rem) {
  .hero__grid { grid-template-columns: minmax(0, 1fr); }
  .hero__tekst { padding-bottom: var(--pas-sredni); }
  .kadr--zejscie { max-width: 22rem; }
  /* Pas 3:1 na telefonie byłby szparą wysoką na 12 mm, a 3:2 na tablecie
     ciemną płytą na pół ekranu. */
  .kadr--pas { aspect-ratio: 2 / 1; }
}

@media (max-width: 40rem) {
  .kadr--pas { aspect-ratio: 3 / 2; }
}

/* ==================================================  8. PASEK FAKTÓW  === */

/* Odstęp liczony od DOLNEJ KRAWĘDZI PORTRETU, nie od końca ciemnego pasa. */
.fakty {
  padding-top: calc(var(--zejscie-portretu) + var(--oddech-faktow));
  padding-bottom: var(--oddech-faktow);
}

.fakty + .sekcja { padding-top: 0; }

.fakty__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
  gap: var(--s-md) var(--s-xl);
  max-width: 52rem;
}

.fakt__klucz {
  font-size: var(--t-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--tr-etykieta);
  color: var(--tusz-3);
}

.fakt__wartosc {
  margin-top: var(--s-3xs);
  font-family: var(--font-display);
  font-variation-settings: "opsz" 22;
  font-weight: 500;
  font-size: var(--t-lg);
  line-height: 1.3;
  color: var(--tusz);
  text-wrap: nowrap;
}

.fakt__wartosc a { text-decoration: none; }

@media (max-width: 26rem) { .fakt__wartosc { text-wrap: wrap; } }

/* ==================================================  9. O KANCELARII  === */

.o-nas__grid {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  gap: clamp(2rem, 5vw, 5rem);
  align-items: start;
}

.o-nas__tresc > * + * { margin-top: var(--s-md); }
.o-nas__tresc > p { max-width: var(--miara); }

@media (max-width: 60rem) {
  .o-nas__grid { grid-template-columns: minmax(0, 1fr); }
  .o-nas .kadr--papier { max-width: 22rem; }
}

/* =================================================  10. ZAKRES USŁUG  === */

.spis { border-top: var(--wlos) solid var(--kreska); }
.spis__wiersz { border-bottom: var(--wlos) solid var(--kreska); }

.spis__link {
  /* Wcięcie podświetlenia nie może być większe niż margines strony, bo wtedy
     wiersz wychodzi poza lewą krawędź i zostaje przycięty. */
  --wciecie: min(var(--s-md), var(--os));

  display: grid;
  grid-template-columns: minmax(0, 24rem) minmax(0, 1fr) auto;
  align-items: baseline;
  gap: var(--s-xs) var(--s-xl);
  padding: clamp(1.25rem, 2.2vw, 1.875rem) var(--wciecie);
  margin-inline: calc(-1 * var(--wciecie));
  border-radius: var(--r-sm);
  color: inherit;
  text-decoration: none;
  transition: background-color var(--dur-short) var(--ease-fast);
}

.spis__nazwa {
  font-family: var(--font-display);
  font-variation-settings: "opsz" 30;
  font-weight: 500;
  font-size: var(--t-xl);
  line-height: 1.22;
  letter-spacing: -0.012em;
  color: var(--tusz);
  transition: color var(--dur-short) var(--ease-fast);
}

.spis__opis { font-size: var(--t-base); color: var(--tusz-2); }

.spis__strzalka {
  font-size: var(--t-lg);
  line-height: 1;
  color: var(--tusz-3);
  transition: transform var(--dur-short) var(--ease-fast),
              color var(--dur-short) var(--ease-fast);
}

/* Wiersz NIE dostaje nawiasu: nazwa usługi potrafi złamać się na dwie linie,
   a nawias liczony od środka wysokości siada wtedy w złym miejscu. */
@media (hover: hover) and (pointer: fine) {
  .spis__link:hover { background: var(--papier-2); }
  .spis__link:hover .spis__nazwa { color: var(--akcent); }
  .spis__link:hover .spis__strzalka { transform: translateX(6px); color: var(--akcent); }
}

.spis__link:focus-visible { outline-offset: -2px; }
.spis__link:focus-visible .spis__nazwa { color: var(--akcent); }
.spis__link:active { transform: translateY(1px); }

@media (max-width: 60rem) {
  .spis__link {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: start;
    min-height: 3.5rem;
  }
  .spis__nazwa    { grid-row: 1; grid-column: 1; }
  .spis__strzalka { grid-row: 1; grid-column: 2; }
  .spis__opis     { grid-row: 2; grid-column: 1 / -1; }
}

/* ======================================  11. JAK WYGLĄDA WSPÓŁPRACA  === */

/* Mały pas: płyta stoi między dwiema sekcjami z pasem średnim (rytm sekcji
   w rozdz. 2), więc do jej krawędzi wychodzi tyle, co między sekcjami. */
.proces-sekcja { padding-block: var(--pas-maly); }

.proces {
  padding: clamp(2.5rem, 5.5vw, 5rem) clamp(1.25rem, 4vw, 3.5rem);
  border-radius: var(--r-md);
  background: var(--noc);
  color: var(--na-nocy-2);
}

.proces h2, .proces h3 { color: var(--na-nocy); }
.proces :focus-visible { outline-color: var(--piasek); }

.proces__grid {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 7fr);
  gap: clamp(2rem, 4vw, 4.5rem);
  align-items: start;
}

.proces__glowa { margin: 0; }

.proces__tytul {
  max-width: 16ch;
  font-size: var(--t-2xl);
  font-variation-settings: "opsz" 40;
  font-weight: 400;
  line-height: 1.16;
}

/* Lista etapów: tytuł nad opisem, rozdzielone włosową kreską, bez numeracji. */
.klauzule { border-bottom: var(--wlos) solid var(--kreska-noc); }

.klauzula {
  display: grid;
  row-gap: var(--s-2xs);
  padding-block: clamp(1.25rem, 2.4vw, 1.875rem);
  border-top: var(--wlos) solid var(--kreska-noc);
}

.klauzula__tytul {
  font-size: var(--t-xl);
  font-variation-settings: "opsz" 30;
  font-weight: 500;
  line-height: 1.2;
}

.klauzula__opis {
  max-width: 52ch;
  font-size: var(--t-base);
}

@media (max-width: 60rem) {
  .proces__grid { grid-template-columns: minmax(0, 1fr); }
  .proces__tytul { max-width: var(--miara); }
}

/* =====================================  11b. PODSTRONA: ZAKRES USŁUG  === */

.naglowek-podstrony {
  background: var(--noc);
  color: var(--na-nocy-2);
  padding-block: var(--pas-sredni) calc(var(--pas-sredni) + var(--zejscie-indeksu));
}

.naglowek-podstrony__tytul {
  max-width: 16ch;
  font-size: var(--t-3xl);
  font-variation-settings: "opsz" 52;
  font-weight: 300;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--na-nocy);
}

/* Kontakt: nagłówek-zaproszenie w stopniu hasła z hero (prośba klienta
   2026-10-22) - bez wstępu pod spodem ciemny pas wyglądał na pusty. Dwa
   wersy jak hasło na głównej, drugi w akcencie jak "ze mną" w stopce. */
.naglowek-podstrony__tytul--duzy {
  max-width: none;
  font-size: var(--t-teza);
  font-variation-settings: "opsz" 64;
  line-height: 1.11;
  letter-spacing: -0.022em;
}

.naglowek-podstrony__tytul em { font-style: normal; color: var(--piasek); }

/* Wstęp podstrony gra rolę wstępu w hero: bez przenoszenia wyrazów. */
.naglowek-podstrony__lede {
  margin-top: var(--s-md);
  max-width: 52ch;
  font-size: var(--t-lg);
  line-height: 1.6;
  hyphens: manual;
}

/* --- okruszki --- */

.okruszki {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5em;
  margin-bottom: var(--s-md);
  font-size: var(--t-xs);
  letter-spacing: 0.04em;
  color: var(--na-nocy-2);
}

.okruszki a {
  min-height: 1.75rem;
  display: inline-flex;
  align-items: center;
  color: var(--na-nocy-2);
  text-decoration: none;
  border-bottom: var(--wlos) solid var(--kreska-noc);
  transition: color var(--dur-short) var(--ease-fast);
}

@media (hover: hover) and (pointer: fine) {
  .okruszki a:hover { color: var(--piasek); }
}

.okruszki a:active { color: var(--piasek); }
.okruszki a:focus-visible { outline-color: var(--piasek); }
.okruszki__sep { color: var(--kreska-noc); }
.okruszki [aria-current="page"] { color: var(--na-nocy); }

/* --- spis specjalizacji, wchodzi w ciemny nagłówek --- */

/* Krótko: sekcja poniżej dokłada swój własny pas, więc pełny oddech tutaj
   dawał między spisem a pierwszym wpisem dziurę na pół ekranu. */
.indeks-sekcja { padding-bottom: var(--pas-maly); }

.indeks {
  /* Liczba wierszy w kolumnie = sufit(liczba pozycji / 2).
     ZMIENIĆ przy zmianie liczby specjalizacji - pilnuje tego test
     "kolejność spisu czytana kolumnami". */
  --wierszy: 3;

  position: relative;
  z-index: 2;
  margin-top: calc(-1 * var(--zejscie-indeksu));
  padding: clamp(1rem, 2.5vw, 1.75rem) clamp(1.25rem, 3vw, 2.25rem);
  border-radius: var(--r-kadr);        /* jeden ostry róg, jak kadry zdjęć */
  background: var(--papier-2);
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0 var(--s-2xl);
}

/* Spis czyta się KOLUMNAMI, nie wierszami: pierwsze trzy pozycje w lewej,
   kolejne w prawej. */
@media (min-width: 60.0625rem) {
  .indeks {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: repeat(var(--wierszy), auto);
    grid-auto-flow: column;
  }
}

.indeks__link {
  display: flex;
  align-items: baseline;
  gap: var(--s-sm);
  min-height: 3.5rem;
  padding-block: var(--s-2xs);
  border-bottom: var(--wlos) solid var(--kreska);
  color: inherit;
  text-decoration: none;
}

.indeks__nazwa {
  flex: 1 1 auto;
  min-width: 0;
  font-family: var(--font-display);
  font-variation-settings: "opsz" 24;
  font-weight: 500;
  font-size: var(--t-lg);
  line-height: 1.25;
  color: var(--tusz);
  transition: color var(--dur-short) var(--ease-fast);
}

.indeks__strzalka {
  flex: none;
  color: var(--tusz-3);
  transition: transform var(--dur-short) var(--ease-fast),
              color var(--dur-short) var(--ease-fast);
}

@media (hover: hover) and (pointer: fine) {
  .indeks__link:hover .indeks__nazwa { color: var(--akcent); }
  .indeks__link:hover .indeks__strzalka { transform: translateY(3px); color: var(--akcent); }
}

.indeks__link:active { transform: translateY(1px); }
.indeks__link:focus-visible { outline-offset: -2px; }
.indeks__link:focus-visible .indeks__nazwa { color: var(--akcent); }

/* --- wpis specjalizacji --- */

.wpisy { border-top: var(--wlos) solid var(--kreska); }

.wpis {
  padding-block: var(--pas-sredni);
  border-bottom: var(--wlos) solid var(--kreska);
  scroll-margin-top: 7rem;             /* zapas ponad --belka-rzad */
}

.wpis__tytul {
  max-width: 22ch;
  font-size: var(--t-2xl);
  font-variation-settings: "opsz" 40;
  font-weight: 400;
  line-height: 1.14;
}

.wpis__grid {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  gap: var(--s-lg) clamp(2rem, 5vw, 4.5rem);
  margin-top: var(--s-lg);
  align-items: start;
}

/* Opis sprawy otwiera wpis: szeryf, stopień wyżej niż lista czynności obok. */
.wpis__opis {
  max-width: 46ch;
  font-family: var(--font-display);
  font-variation-settings: "opsz" 24;
  font-size: var(--t-lg);
  line-height: 1.5;
  color: var(--tusz);
  text-wrap: pretty;
}

.wpis__etykieta {
  margin-bottom: var(--s-xs);
  font-size: var(--t-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--tr-etykieta);
  color: var(--tusz-3);
}

.czynnosci > li {
  padding-block: var(--s-2xs);
  border-top: var(--wlos) solid var(--kreska);
  font-size: var(--t-base);
}

.czynnosci > li:first-child { border-top: 0; padding-top: 0; }

.wpis__akcja { margin-top: var(--s-md); }

@media (max-width: 60rem) {
  .wpis__grid { grid-template-columns: minmax(0, 1fr); }

  /* W jednej szpalcie granica wpisu wyglądała tak samo jak kreski listy
     czynności i wpisy zlewały się w jeden blok. Granica dostaje kreskę
     w tuszu, a pauzę przed sobą większą niż za sobą - wtedy należy do
     wpisu, który otwiera. Ostatni wpis zamyka ciemna stopka, nie kreska. */
  .wpisy { border-top: 0; }

  .wpis {
    padding-block: var(--s-md) var(--pas-duzy);
    border-top: var(--wlos) solid var(--tusz);
    border-bottom: 0;
  }

  .wpis:last-child { padding-bottom: var(--pas-sredni); }
}

/* ===========================================  11c. PODSTRONA: O MNIE  === */

/* Portret i krótki opis to cała treść strony, więc pod nią pełny pas. */
.sylwetka-sekcja { padding-block: var(--pas-sredni) var(--pas-duzy); }

/* Portret wchodzi w ciemny nagłówek. */
.sylwetka__kadr {
  position: relative;
  z-index: 2;
  margin-top: calc(-1 * (var(--pas-sredni) + var(--zejscie-indeksu)));
}

.sylwetka__tresc > p + p { margin-top: var(--s-md); }
.sylwetka__tresc p { max-width: var(--miara); }

@media (max-width: 60rem) {
  .sylwetka__kadr { max-width: 22rem; }
}

/* Na telefonie pary klucz + wartość stoją jedna pod drugą i rozdziela je
   kreska (metryka dokumentu). */
@media (max-width: 40rem) {
  .dana + .dana { border-top: var(--wlos) solid var(--kreska); }
}

/* --- pas zdjęcia: jedyny element strony od krawędzi do krawędzi --- */

.pas-zdjecia { padding-block: var(--pas-sredni); }

/* ==========================================  11d. PODSTRONA: KONTAKT  === */

.karta-sekcja { padding-block: var(--pas-sredni); }

.karta {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: var(--szpara);
  align-items: start;
}

/* Mapa przecina granicę ciemnego nagłówka - ta sama zasada, co portret na
   stronie głównej, spis na zakresie usług i portret na "O mnie". */
.mapa {
  position: relative;
  z-index: 2;
  margin-top: calc(-1 * (var(--pas-sredni) + var(--zejscie-indeksu)));
  aspect-ratio: 4 / 3;
  border-radius: var(--r-kadr);
  overflow: hidden;
}

.mapa iframe { display: block; width: 100%; height: 100%; border: 0; }

/* Zasłona przed wczytaniem mapy. */
.mapa__zaslona {
  position: relative;
  display: grid;
  place-content: center;
  gap: var(--s-sm);
  justify-items: center;
  height: 100%;
  padding: var(--s-lg);
  background: var(--papier-2);
  color: var(--kreska);
  text-align: center;
}

.mapa__tekst {
  position: relative;
  z-index: 1;
  max-width: 34ch;
  font-size: var(--t-sm);
  line-height: 1.6;
  color: var(--tusz-2);
}

.mapa__btn { position: relative; z-index: 1; }

.mapa__poza {
  position: relative;
  z-index: 1;
  font-size: var(--t-sm);
  color: var(--tusz-3);
}

/* --- portret przy wizytówce: kto odbiera telefon --- */

.wizytowka-osoba {
  display: flex;
  align-items: center;
  gap: var(--s-sm);
  margin-bottom: var(--s-md);
}

.wizytowka-osoba picture {
  flex: none;
  display: block;
  width: 5.5rem;
  aspect-ratio: 4 / 5;
  border-radius: var(--r-sm);
  overflow: hidden;
}

.wizytowka-osoba img { width: 100%; height: 100%; object-fit: cover; }

.wizytowka-osoba figcaption { display: flex; flex-direction: column; gap: 0.125rem; }

.wizytowka-osoba__imie {
  font-family: var(--font-display);
  font-size: var(--t-lg);
  font-weight: 500;
  color: var(--tusz);
}

.wizytowka-osoba__rola { font-size: var(--t-sm); color: var(--tusz-3); }

/* --- wizytówka: adres, telefon, e-mail, godziny --- */

.wizytowka { border-top: var(--wlos) solid var(--kreska); }

.wizytowka .dana + .dana { border-top: var(--wlos) solid var(--kreska); }

/* Adres i telefon to na tej stronie treść główna, nie podpis - stąd stopień
   wyżej niż w innych parach klucz + wartość. */
.wizytowka .dana__wartosc { font-size: var(--t-xl); }

/* Telefon i e-mail wyglądają jak zwykła treść - to one SĄ treścią, a nie
   odnośnikiem do niej. */
.wizytowka .dana__wartosc a:not(.wizytowka__trasa) { color: inherit; text-decoration: none; }

.wizytowka .dana__wartosc a:not(.wizytowka__trasa):hover,
.wizytowka .dana__wartosc a:not(.wizytowka__trasa):focus-visible {
  color: var(--akcent-mocny);
  text-decoration: underline;
}

/* Adres bywa dłuższy niż kolumna - łamiemy go raczej niż wypychamy poza ekran. */
.wizytowka .dana__wartosc { overflow-wrap: anywhere; }

.wizytowka__adres { display: block; }

/* Zastrzezenie do godzin: mniejsze, bezszeryfowe, w drugim stopniu tuszu -
   to warunek do godzin, a nie druga wartosc. */
.wizytowka__uwaga {
  display: block;
  margin-top: var(--s-2xs);
  font-family: var(--font-body);
  font-size: var(--t-sm);
  line-height: 1.5;
  color: var(--tusz-2);
}

/* Odnośnik do nawigacji jest dopiskiem POD adresem, nie częścią adresu -
   stąd osobny wiersz, własny stopień i krój bezszeryfowy. */
.wizytowka__trasa {
  display: inline-block;
  margin-top: var(--s-2xs);
  font-family: var(--font-body);
  font-size: var(--t-sm);
  color: var(--akcent);
  text-decoration: underline;
  text-underline-offset: 3px;
  overflow-wrap: normal;
}

.wizytowka__trasa:hover,
.wizytowka__trasa:focus-visible { color: var(--akcent-mocny); }

@media (max-width: 60rem) {
  .karta { grid-template-columns: minmax(0, 1fr); }
  /* Bez dwóch szpalt mapa nie ma z czym sąsiadować, a pionowy kadr 4:3
     zjadałby pół ekranu - spłaszczamy i zdejmujemy przecięcie, bo pod
     nagłówkiem stoi teraz wizytówka. */
  .mapa { margin-top: 0; aspect-ratio: 3 / 2; }
}

/* ========================================  11e. PODSTRONA: DOKUMENTY  === */

.dokumenty-sekcja { padding-block: var(--pas-sredni); }

/* --- metryka dokumentu: przecina granicę ciemnego nagłówka --- */
.metryka-dok {
  position: relative;
  z-index: 2;
  margin-top: calc(-1 * (var(--pas-sredni) + var(--zejscie-indeksu)));
  padding: clamp(1.5rem, 3vw, 2.25rem) clamp(1.25rem, 3vw, 2.25rem);
  border-radius: var(--r-kadr);
  background: var(--papier-2);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  gap: var(--s-md) var(--s-lg);
  align-items: start;
}

.metryka-dok .dana { padding-block: 0; }

/* Przycisk druku pojawia się tylko wtedy, gdy działa skrypt - bez niego
   byłby martwy. */
.druk-btn { display: none; }
.js .druk-btn { display: inline-flex; align-self: center; justify-self: start; }

/* --- spis treści --- */

/* Spis treści jednego dokumentu: JEDNA kolumna. */
.spis-dok {
  margin-top: var(--pas-sredni);
  max-width: 46rem;
}

.spis-dok__tytul {
  margin-bottom: var(--s-sm);
  padding-bottom: var(--s-2xs);
  border-bottom: var(--wlos) solid var(--kreska-mocna);
  font-size: var(--t-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--tr-etykieta);
  color: var(--tusz-3);
}

.spis-dok__lista { display: grid; }

.spis-dok__lista a {
  display: grid;
  grid-template-columns: 2.75rem minmax(0, 1fr);
  gap: var(--s-2xs);
  padding-block: var(--s-2xs);
  border-bottom: var(--wlos) solid var(--kreska);
  color: var(--tusz-2);
  text-decoration: none;
  font-size: var(--t-sm);
  line-height: 1.4;
}

.spis-dok__lista a > span:first-child {
  font-family: var(--font-display);
  font-variation-settings: "opsz" 20;
  color: var(--akcent);
}

@media (hover: hover) and (pointer: fine) {
  .spis-dok__lista a:hover { color: var(--tusz); }
  .spis-dok__lista a:hover > span:first-child { color: var(--akcent-mocny); }
}

/* --- dokument i jego paragrafy --- */

.dokument + .dokument { margin-top: var(--pas-duzy); }

.dokument__glowa {
  padding-bottom: var(--s-md);
  border-bottom: var(--wlos) solid var(--kreska-mocna);
}

.dokument__tytul {
  margin-top: var(--s-sm);
  max-width: 24ch;
  font-size: var(--t-2xl);
  font-variation-settings: "opsz" 40;
  font-weight: 400;
  line-height: 1.14;
}

/* Numer wisi w marginesie, treść trzyma własną miarę. */
.paragraf {
  display: grid;
  grid-template-columns: minmax(0, 4.5rem) minmax(0, 1fr);
  gap: var(--s-2xs) var(--s-md);
  padding-block: var(--s-lg);
  border-bottom: var(--wlos) solid var(--kreska);
}

.paragraf__nr {
  font-family: var(--font-display);
  font-variation-settings: "opsz" 22;
  font-size: var(--t-lg);
  font-variant-numeric: tabular-nums;
  line-height: 1.45;
  color: var(--akcent);
  scroll-margin-top: 7rem;
}

/* Miarę trzyma proza, nie cały paragraf. */
.paragraf__tresc { max-width: none; }

.paragraf__tresc > p,
.paragraf__tresc > ul { max-width: var(--miara); }

.paragraf__tytul {
  margin-bottom: var(--s-sm);
  font-size: var(--t-xl);
  font-variation-settings: "opsz" 28;
  font-weight: 400;
  line-height: 1.2;
  color: var(--tusz);
}

.paragraf__tresc > * + * { margin-top: var(--s-md); }

/* Punkty w paragrafie: mały kwadrat w miedzi (barwa numerów paragrafów)
   w wiszącej kolumnie. Nie kreska - poziomy znacznik czyta się jak myślnik. */
.punkty { display: grid; gap: var(--s-sm); }

.punkty > li {
  display: grid;
  grid-template-columns: 1.75rem minmax(0, 1fr);
}

.punkty > li::before {
  content: "";
  width: 0.3125rem;
  height: 0.3125rem;
  /* środek pierwszego wiersza przy interlinii 1.66, minus pół kwadratu */
  margin-top: calc(0.83em - 0.15625rem);
  background: var(--akcent);
}

.punkty strong { color: var(--tusz); font-weight: 600; }

@media (max-width: 40rem) {
  .paragraf { grid-template-columns: minmax(0, 1fr); }
  .metryka-dok { margin-top: 0; }
}

/* ======================================================  12. PYTANIA  === */

/* Lista na pełną szerokość, jak spis usług: kreski i znak "+" kończą się na
   tej samej krawędzi co strzałki spisu i ciemna płyta współpracy. Węższa
   lista urywała się na PC w połowie i wyglądała na błąd. Miarę czytania
   trzyma sama odpowiedź (.pytanie__tresc). */
.pytania__lista { border-top: var(--wlos) solid var(--kreska); }

.pytanie { border-bottom: var(--wlos) solid var(--kreska); }

.pytanie__naglowek {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--s-md);
  min-height: 3.25rem;
  padding-block: var(--s-md);
  font-family: var(--font-display);
  font-variation-settings: "opsz" 26;
  font-weight: 500;
  font-size: var(--t-lg);
  line-height: 1.35;
  color: var(--tusz);
  list-style: none;
  cursor: pointer;
  transition: color var(--dur-short) var(--ease-fast);
}

.pytanie__naglowek::-webkit-details-marker { display: none; }

/* Znak rysowany dwiema kreskami zamiast znakami "+" i "-". */
.pytanie__znak {
  position: relative;
  flex: none;
  width: 1rem;
  height: 1rem;
  margin-top: 0.3rem;               /* optyczne wyrównanie do pierwszego wiersza */
}

.pytanie__znak::before,
.pytanie__znak::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  top: 50%;
  height: 2px;
  margin-top: -1px;
  border-radius: 1px;
  background: var(--akcent);
  transition: transform var(--dur-short) var(--ease-fast);
}

.pytanie__znak::after { transform: rotate(90deg); }
.pytanie[open] .pytanie__znak::after { transform: rotate(90deg) scaleX(0); }

@media (hover: hover) and (pointer: fine) {
  .pytanie__naglowek:hover { color: var(--akcent); }
}

.pytanie__naglowek:focus-visible { outline-offset: -2px; }
.pytanie__naglowek:active { transform: translateY(1px); }

/* Panel przycinany przy rozwijaniu - skrypt animuje jego wysokość. */
.pytanie__panel { overflow: hidden; }

/* Odpowiedź szersza niż zwykły akapit (prośba właściciela 2026-10-19): przy
   wierszu pytania na pełną szerokość miara 62ch wyglądała na wciśniętą
   w lewo. 75ch to górna granica czytelnej miary (bramka 25), mniej więcej
   dwie trzecie wiersza na PC. Na telefonie i tak decyduje szerokość ekranu. */
.pytanie__tresc {
  max-width: 75ch;
  padding-bottom: var(--s-md);
  color: var(--tusz-2);
}

/* ===========================================  13. STOPKA I FORMULARZ  === */

.stopka {
  padding-block: var(--pas-duzy) var(--s-xl);
  background: var(--noc);
  color: var(--na-nocy-2);
}

.stopka :focus-visible { outline-color: var(--piasek); }

.stopka__gora {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(2.5rem, 5vw, 5rem);
  align-items: start;
}

.stopka__lewa > * + * { margin-top: var(--s-lg); }

.stopka__woda {
  max-width: 14ch;
  font-family: var(--font-display);
  font-variation-settings: "opsz" 72;
  font-weight: 300;
  font-size: var(--t-woda);
  line-height: 1.02;
  letter-spacing: -0.028em;
  color: var(--na-nocy);
}

.stopka__woda em { font-style: normal; color: var(--piasek); }

.stopka__telefon {
  display: inline-flex;
  align-items: center;
  min-height: 3.5rem;
  border-bottom: 2px solid var(--piasek);
  font-family: var(--font-display);
  font-variation-settings: "opsz" 48;
  font-weight: 500;
  font-size: var(--t-2xl);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.008em;
  color: var(--na-nocy);
  white-space: nowrap;
  text-decoration: none;
  transition: color var(--dur-short) var(--ease-fast);
}

@media (hover: hover) and (pointer: fine) {
  .stopka__telefon:hover { color: var(--piasek); }
}

.stopka__telefon:active { transform: translateY(1px); }

/* Dane kontaktowe w parach etykieta + wartość: ta sama para klucz + wartość
   co w wizytówce na podstronie kontaktu, przełożona na noc. */
.stopka__kontakt { display: grid; gap: var(--s-md); }

.stopka__kontakt dt {
  font-size: var(--t-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--tr-etykieta);
  color: var(--na-nocy-2);
}

.stopka__kontakt dd {
  margin-top: var(--s-3xs);
  font-family: var(--font-display);
  font-variation-settings: "opsz" 22;
  font-size: var(--t-lg);
  line-height: 1.35;
  color: var(--na-nocy);
}

.stopka__kontakt dd a:not(.stopka__telefon) {
  color: inherit;
  text-decoration-color: var(--kreska-noc);
  text-underline-offset: 3px;
  overflow-wrap: anywhere;
}

.stopka__kontakt dd a:not(.stopka__telefon):hover,
.stopka__kontakt dd a:not(.stopka__telefon):focus-visible { color: var(--piasek); text-decoration-color: currentColor; }

/* Warunek do godzin: mniejszy i bezszeryfowy, bo to dopisek, nie druga wartość. */
.stopka__uwaga {
  display: block;
  margin-top: var(--s-2xs);
  font-family: var(--font-body);
  font-size: var(--t-sm);
  line-height: 1.5;
  color: var(--na-nocy-2);
}

/* --- formularz --- */

.form { display: grid; gap: var(--s-md); }

.pole { display: grid; gap: var(--s-3xs); }

.pole__label {
  font-size: var(--t-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--tr-etykieta);
  color: var(--na-nocy-2);
}

.pole__input,
.pole__textarea {
  width: 100%;
  min-height: 3rem;
  padding: 0.8125rem 0.875rem;
  border: var(--wlos) solid var(--na-nocy-2);   /* 7,12:1, próg 1.4.11 to 3:1 */
  border-radius: var(--r-xs);
  background: var(--noc-2);
  color: var(--na-nocy);
  font-family: inherit;
  font-size: var(--t-base);
  transition: border-color var(--dur-short) var(--ease-fast);
}

.pole__textarea { min-height: 6.5rem; resize: vertical; }

.pole__input:hover,
.pole__textarea:hover { border-color: var(--na-nocy); }

.pole__input:focus-visible,
.pole__textarea:focus-visible { border-color: var(--piasek); outline-offset: 1px; }

.pole__input[aria-invalid="true"],
.pole__textarea[aria-invalid="true"] { border-color: var(--piasek-2); border-width: 2px; }

.pole__blad {
  font-size: var(--t-sm);
  color: var(--piasek-2);
}

.pole__blad:empty { display: none; }

/* Pułapka na roboty. */
.pulapka {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.ostrzezenie {
  padding: var(--s-sm);
  border-radius: var(--r-sm);
  background: var(--noc-2);
  font-size: var(--t-sm);
  line-height: 1.6;
  color: var(--na-nocy-2);
}

.klauzula-rodo { font-size: var(--t-sm); color: var(--na-nocy-2); }
.klauzula-rodo a { color: var(--piasek); text-underline-offset: 2px; }

.form__status {
  font-size: var(--t-sm);
  color: var(--piasek);
}

.form__status:empty { display: none; }

/* --- kolumny stopki --- */

.stopka__kolumny {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr));
  gap: var(--s-xl) var(--s-lg);
  margin-top: var(--pas-sredni);
  padding-top: var(--s-xl);
  border-top: var(--wlos) solid var(--kreska-noc);
}

.stopka__tytul {
  margin-bottom: var(--s-sm);
  font-size: var(--t-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--tr-etykieta);
  color: var(--na-nocy);
}

.stopka__lista > li + li { margin-top: var(--s-2xs); }

.stopka__link {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  min-height: 2rem;
  font-size: var(--t-sm);
  color: var(--na-nocy-2);
  text-decoration: none;
  transition: color var(--dur-short) var(--ease-fast);
}

@media (hover: hover) and (pointer: fine) {
  .stopka__link:hover { color: var(--piasek); }
}

.stopka__link:active { color: var(--piasek); transform: translateY(1px); }
.stopka__link svg { flex: none; width: 1em; height: 1em; transition: transform var(--dur-short) var(--ease-fast); }

@media (hover: hover) and (pointer: fine) {
  .stopka__link:hover svg { transform: scale(1.12); }
}

/* Pełny logotyp jako podpis pod stopką, na środku (prośba klienta 2026-10-22). */
.stopka__znak { margin-top: var(--s-2xl); }

.stopka__logo {
  display: block;
  width: min(26rem, 100%);
  height: auto;
  margin-inline: auto;
}

/* Dolny wiersz stopki: po lewej kolofon, po prawej podpis wykonawcy. */
.stopka__dol {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--s-md);
  align-items: start;
  margin-top: var(--s-xl);
  padding-top: var(--s-md);
  border-top: var(--wlos) solid var(--kreska-noc);
}

/* Kolofon - dane wymagane przez art. 5 ust. 5 uSUDE. */
.kolofon {
  display: grid;
  gap: var(--s-3xs);
}

/* Ten sam krój, stopień i interlinia co kolofon, więc obie pozycje siadają
   na jednej linii pisma. */
.kolofon,
.realizacja {
  font-size: var(--t-xs);
  line-height: 1.7;
  color: var(--na-nocy-2);
}

.realizacja { text-align: right; }

.stopka__dol a { color: var(--na-nocy-2); text-underline-offset: 2px; }

@media (max-width: 60rem) {
  .stopka__gora { grid-template-columns: minmax(0, 1fr); }
}

/* Poniżej 34rem podpis nie zmieści się obok danych rejestrowych bez łamania
   nazwy, więc schodzi pod nie i wraca do lewej krawędzi. */
@media (max-width: 34rem) {
  .stopka__dol { grid-template-columns: minmax(0, 1fr); gap: var(--s-sm); }
  .realizacja { text-align: left; }
}

/* ==================================================  14. PASEK DOLNY  === */

.pasek-dolny { display: none; }

@media (max-width: 30rem) {
  body { padding-bottom: 4.25rem; }

  .pasek-dolny {
    position: fixed;
    inset-inline: 0;
    bottom: 0;
    z-index: 50;
    display: grid;
    grid-template-columns: 1fr 1fr;
    padding-bottom: env(safe-area-inset-bottom);
    border-top: var(--wlos) solid var(--kreska-noc);
    background: var(--noc);
  }

  .pasek-dolny__akcja {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 3.5rem;
    font-size: var(--t-base);
    font-weight: 600;
    white-space: nowrap;
    text-decoration: none;
    transition: background-color var(--dur-micro) var(--ease-fast),
                transform var(--dur-micro) var(--ease-fast);
  }

  .pasek-dolny__akcja:first-child { background: var(--piasek); color: var(--noc); }
  .pasek-dolny__akcja:last-child  { color: var(--na-nocy); }

  /* Systemowa poświata została wyłączona, więc stan dotknięcia musi być nasz i
     musi być wyraźny - inaczej stuknięcie wygląda, jakby nic się nie stało. */
  .pasek-dolny__akcja:first-child:active { background: var(--piasek-2); transform: scale(0.985); }
  .pasek-dolny__akcja:last-child:active  { background: var(--noc-2);    transform: scale(0.985); }
  .pasek-dolny__akcja:focus-visible { outline-color: var(--piasek); outline-offset: -3px; }
}

/* =========================================================  15. RUCH  === */

.js .wejscie {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity var(--dur-long) var(--ease-out),
              transform var(--dur-long) var(--ease-out);
}

.js .wejscie.jest { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
    transition-delay: 0ms !important;
  }

  .js .wejscie { opacity: 1; transform: none; transition: none; }
  .js .menu-panel { clip-path: none; transition: none; }
  .js .menu-panel__link,
  .js .menu-panel__stopa { opacity: 1; transition: none; }
  .menu-panel__link:active .menu-panel__strzalka { transform: none; }

  /* Zmiana barwy zostaje - niesie informację o stanie. Znika sam ruch. */
  .telefon-chip:active,
  .przycisk-piasek:active,
  .spis__link:active,
  .stopka__telefon:active,
  .stopka__link:active,
  .akcja-wtorna:active,
  .nawigacja__link:active,
  .menu-panel__link:active,
  .pytanie__naglowek:active,
  .pasek-dolny__akcja:active { transform: none; }

  .stopka__link:hover svg { transform: none; }
}

/* =========================================================  16. DRUK  === */

@media print {
  .js .wejscie { opacity: 1 !important; transform: none !important; }
  .belka, .pasek-dolny, .menu-panel, .menu-btn, .form, .druk-btn { display: none !important; }
  body { background: var(--druk-tlo); color: var(--druk-tusz); }
  .hero, .proces, .stopka { background: var(--druk-tlo) !important; color: var(--druk-tusz) !important; }
  .hero__teza, .stopka__woda, .proces h2, .proces h3 { color: var(--druk-tusz) !important; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 0.8em; }

  /* Wydruk polityki prywatności: żaden paragraf nie łamie się na dwie strony. */
  .naglowek-podstrony { background: var(--druk-tlo) !important; color: var(--druk-tusz) !important; }
  .naglowek-podstrony__tytul, .naglowek-podstrony__lede { color: var(--druk-tusz) !important; }
  .metryka-dok { background: transparent; border: 1px solid var(--druk-tusz); }
  .paragraf, .spis-dok { break-inside: avoid; }
  .dokument { break-before: page; }
  .dokument:first-of-type { break-before: auto; }
  .paragraf__tytul { break-after: avoid; }
}