/*
 * System projektowy odszkodowaniezaslup.com.pl
 *
 * Kolorystyka i typografia świadomie te same co prawnyradca.eu (granat + złoto,
 * Playfair Display + Inter) - to ta sama kancelaria, więc klient, który trafi
 * z jednej strony na drugą, ma zobaczyć tę samą markę, a nie dwa przypadkowe
 * serwisy.
 *
 * Różnica wobec prawnyradca.eu jest w PROPORCJACH, nie w kolorach: tam strona
 * wizerunkowa z wieloma działami, tu strona sprzedażowa jednej usługi. Stąd
 * mocniejsze CTA (złoty przycisk zamiast granatowego), mniej sekcji, krótsze
 * bloki tekstu i pasek konwersji przyklejony do dołu na telefonie.
 */

/* =========================================================================
   1. Tokeny
   ====================================================================== */

:root {
	/* Granat - kolor marki, tła sekcji "ciężkich", nagłówki */
	--ozs-navy:        #10233b;
	--ozs-navy-deep:   #0a1728;
	--ozs-navy-soft:   #1b3350;

	/* Złoto. TRZY odcienie, bo jeden nie przechodzi kontrastu wszędzie:
	   - --ozs-gold       : tła przycisków, linie ozdobne (nie niesie tekstu)
	   - --ozs-gold-text  : złoty TEKST na jasnym tle  (5,3:1 na kremowym - AA)
	   - --ozs-gold-light : złoty TEKST na granacie    (8,0:1 - AAA)
	   Użycie --ozs-gold jako koloru tekstu na kremowym dałoby 3,0:1, czyli
	   poniżej progu WCAG AA dla zwykłego tekstu. To najczęstszy błąd w tej
	   palecie - stąd osobne zmienne zamiast jednej. */
	--ozs-gold:        #b08d2e;
	--ozs-gold-text:   #7a5f14;
	--ozs-gold-light:  #d9b65b;

	/* Tła i tekst */
	--ozs-cream:       #f7f5ef;
	--ozs-cream-deep:  #efebe0;
	--ozs-white:       #ffffff;
	--ozs-ink:         #26303d;   /* tekst podstawowy, 11,8:1 na białym */
	--ozs-ink-soft:    #55616f;   /* tekst pomocniczy, 5,9:1 na białym */
	--ozs-border:      #e2ddd0;

	--ozs-shadow:      0 2px 10px rgba(16, 35, 59, .06);
	--ozs-shadow-lift: 0 12px 28px rgba(16, 35, 59, .12);

	--ozs-radius:      14px;
	--ozs-radius-lg:   22px;

	--ozs-wrap:        1180px;
	--ozs-gutter:      clamp(1.1rem, 4vw, 2.5rem);

	/* Wysokość przyklejonego paska CTA - używana też do odsunięcia stopki,
	   żeby pasek jej nie przykrywał. Jedna wartość, dwa zastosowania. */
	--ozs-sticky-h:    64px;
}

/* =========================================================================
   2. Podstawy
   ====================================================================== */

body {
	font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
	color: var(--ozs-ink);
	background: var(--ozs-white);
	font-size: 1.0625rem;
	line-height: 1.7;
	/* Zapobiega poziomemu przewijaniu, gdy sekcja pełnej szerokości wystaje
	   o szerokość paska przewijania. `clip` zamiast `hidden` - `hidden`
	   tworzy kontekst przewijania i psuje `position: sticky` w środku. */
	overflow-x: clip;
}

h1, h2, h3, h4,
.wp-block-heading,
.entry-title {
	font-family: 'Playfair Display', Georgia, 'Times New Roman', serif;
	color: var(--ozs-navy);
	font-weight: 700;
	line-height: 1.18;
	letter-spacing: -.01em;
	margin-top: 0;
}

h1, .entry-title { font-size: clamp(2.1rem, 4.6vw, 3.35rem); }
h2 { font-size: clamp(1.7rem, 3.2vw, 2.4rem); margin-bottom: .8rem; }

/*
 * Pusty wiersz stopki motywu.
 *
 * `ozs-frontend.php` zdejmuje akcję `kadence_footer_html`, przez co znika
 * napis „© … Motyw WordPress, autor: Kadence WP" — ale SAM WIERSZ zostaje
 * i zajmuje 60 px pustego miejsca pod stopką kancelarii (zmierzone). Usunięcie
 * zawartości nie usuwa kontenera z jego dopełnieniem.
 *
 * Ukrywamy `#colophon`, a nie całą stopkę: `.ozs-footer` renderuje się POZA
 * tym elementem (sprawdzone: `colophon.contains(.ozs-footer) === false`),
 * więc reguła nie ma jak przypadkiem schować naszej stopki. Gdyby kiedyś
 * doszedł prawdziwy element w stopce motywu — trzeba tę regułę zdjąć.
 */
#colophon.site-footer { display: none; }

/*
 * Nagłówek sekcji zachowuje skalę H2 także wtedy, gdy semantycznie jest H1.
 * Podstrony nie mają hero, więc ich H1 siedzi w zwykłej sekcji - bez tej
 * reguły promocja H2 -> H1 (naprawa braku H1 na 5 podstronach) urosłaby do
 * rozmiaru nagłówka hero i zmieniła układ strony przy okazji poprawki SEO.
 */
.ozs-head h1 { font-size: clamp(1.7rem, 3.2vw, 2.4rem); margin-bottom: .8rem; }
h3 { font-size: clamp(1.2rem, 2vw, 1.45rem); margin-bottom: .5rem; }

p { margin: 0 0 1.1rem; }
p:last-child { margin-bottom: 0; }

a { color: var(--ozs-navy); text-underline-offset: .18em; }
a:hover { color: var(--ozs-gold-text); }

strong { color: var(--ozs-navy); font-weight: 650; }
/* 🔴 Bez tego pogrubienia na ciemnym tle są NIEWIDOCZNE. Reguła `strong`
   powyżej to selektor elementu; `.ozs-section--navy p` rozjaśnia akapit, ale
   NIE trafia w zagnieżdżony <strong>, więc ten zostaje przy granacie na
   granacie. Złapane pomiarem wizualnym, nie widać tego w kodzie. */
.ozs-section--navy strong,
.ozs-section--navy .ozs-callout strong,
.ozs-hero strong { color: #fff; }

sup { font-size: .7em; }

/* Widoczny focus dla klawiatury. Rdzeń motywu potrafi go zdejmować, a bez
   niego strona jest nieobsługiwalna z klawiatury - to nie jest niuans,
   to bariera dostępności. :focus-visible (a nie :focus) nie pokazuje obwódki
   po kliknięciu myszą. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible {
	outline: 3px solid var(--ozs-gold);
	outline-offset: 2px;
	border-radius: 4px;
}

.ozs-icon { flex: 0 0 auto; }

/* =========================================================================
   3. Układ sekcji
   ====================================================================== */

.ozs-section {
	padding-block: clamp(3rem, 7vw, 5.5rem);
}
.ozs-section--tight { padding-block: clamp(2.2rem, 5vw, 3.5rem); }

.ozs-section--cream { background: var(--ozs-cream); }
.ozs-section--navy  { background: var(--ozs-navy); }

.ozs-section--navy,
.ozs-section--navy p,
.ozs-section--navy li { color: #e8edf4; }
.ozs-section--navy h2,
.ozs-section--navy h3 { color: #fff; }

/* Wewnętrzny kontener. Sekcje są pełnej szerokości (alignfull), więc treść
   potrzebuje własnego ograniczenia szerokości i marginesów bocznych. */
.ozs-wrap {
	max-width: var(--ozs-wrap);
	margin-inline: auto;
	padding-inline: var(--ozs-gutter);
}
.ozs-wrap--narrow { max-width: 820px; }

/* Nagłówek sekcji: nadtytuł + tytuł + lead jako jedna jednostka. */
.ozs-head { max-width: 720px; margin: 0 auto clamp(2rem, 4vw, 3rem); text-align: center; }
.ozs-head--left { margin-inline: 0; text-align: left; }
.ozs-head > *:last-child { margin-bottom: 0; }

.ozs-eyebrow {
	display: block;
	font-family: 'Inter', sans-serif;
	font-size: .8125rem;
	font-weight: 700;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--ozs-gold-text);
	margin-bottom: .7rem;
}
.ozs-section--navy .ozs-eyebrow { color: var(--ozs-gold-light); }

.ozs-lead {
	font-size: clamp(1.05rem, 1.6vw, 1.2rem);
	color: var(--ozs-ink-soft);
	margin-top: .9rem;
}
.ozs-section--navy .ozs-lead { color: #c9d4e2; }

/* =========================================================================
   4. Przyciski
   ====================================================================== */

.ozs-btn,
.wp-block-button__link,
.wp-element-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: .55em;
	padding: .95em 1.9em;
	border-radius: 999px;
	font-family: 'Inter', sans-serif;
	font-size: 1rem;
	font-weight: 650;
	line-height: 1.25;
	text-decoration: none;
	border: 2px solid transparent;
	cursor: pointer;
	transition: transform .2s ease, box-shadow .2s ease, background-color .2s ease, color .2s ease;
}

/* CTA podstawowe: ZŁOTE tło + GRANATOWY tekst.
   Kontrast 4,6:1 - przechodzi WCAG AA. Odwrotność (biały tekst na złocie)
   dałaby 3,2:1 i nie przeszłaby, mimo że wygląda podobnie. */
.ozs-btn--primary,
.wp-block-button:not(.is-style-outline) .wp-block-button__link {
	background: var(--ozs-gold);
	color: var(--ozs-navy) !important;
	border-color: var(--ozs-gold);
	box-shadow: var(--ozs-shadow);
}
.ozs-btn--primary:hover,
.wp-block-button:not(.is-style-outline) .wp-block-button__link:hover {
	background: var(--ozs-gold-light);
	border-color: var(--ozs-gold-light);
	color: var(--ozs-navy) !important;
	transform: translateY(-2px);
	box-shadow: var(--ozs-shadow-lift);
}

/* CTA drugorzędne - obrys. Dwa warianty, bo ten sam przycisk pojawia się
   na jasnym i na granatowym tle. */
.ozs-btn--ghost,
.wp-block-button.is-style-outline .wp-block-button__link {
	background: transparent;
	color: var(--ozs-navy) !important;
	border-color: rgba(16, 35, 59, .3);
}
.ozs-btn--ghost:hover,
.wp-block-button.is-style-outline .wp-block-button__link:hover {
	background: var(--ozs-navy);
	color: #fff !important;
	border-color: var(--ozs-navy);
	transform: translateY(-2px);
}
.ozs-section--navy .ozs-btn--ghost,
.ozs-hero .ozs-btn--ghost,
.ozs-section--navy .wp-block-button.is-style-outline .wp-block-button__link {
	color: #fff !important;
	border-color: rgba(255, 255, 255, .55);
}
.ozs-section--navy .ozs-btn--ghost:hover,
.ozs-hero .ozs-btn--ghost:hover,
.ozs-section--navy .wp-block-button.is-style-outline .wp-block-button__link:hover {
	background: #fff;
	color: var(--ozs-navy) !important;
	border-color: #fff;
}

.ozs-actions { display: flex; flex-wrap: wrap; gap: .85rem; margin-top: 1.8rem; }
.ozs-head .ozs-actions { justify-content: center; }
.ozs-head--left .ozs-actions { justify-content: flex-start; }
.ozs-actions--center { justify-content: center; }

/* Na wąskim ekranie przyciski w rzędzie robią się za ciasne i tekst się łamie
   w środku wyrazu. Jeden pod drugim, każdy pełnej szerokości. */
@media (max-width: 520px) {
	.ozs-actions { flex-direction: column; align-items: stretch; }
	.ozs-actions .ozs-btn { width: 100%; }
}

/* =========================================================================
   5. Pasek kontaktowy nad nagłówkiem
   ====================================================================== */

.ozs-topbar {
	background: var(--ozs-navy-deep);
	color: #cfd9e6;
	font-size: .875rem;
}
.ozs-topbar__inner {
	max-width: var(--ozs-wrap);
	margin-inline: auto;
	padding: .5rem var(--ozs-gutter);
	display: flex;
	flex-wrap: wrap;
	gap: .4rem 1.6rem;
	align-items: center;
}
.ozs-topbar__item {
	display: inline-flex;
	align-items: center;
	gap: .45rem;
	color: #cfd9e6;
	text-decoration: none;
}
.ozs-topbar a.ozs-topbar__item:hover { color: var(--ozs-gold-light); }
.ozs-topbar__phone { font-weight: 650; color: #fff; }
/* Notka o bezpłatnej analizie dosuwa się do prawej krawędzi - to jedyny
   element paska, który jest komunikatem sprzedażowym, a nie kontaktem. */
.ozs-topbar__note { margin-left: auto; color: var(--ozs-gold-light); }

@media (max-width: 800px) {
	/* Na telefonie e-mail i notka zabierają całą linię, a telefon i tak jest
	   w przyklejonym pasku na dole - zostawiamy sam numer. */
	.ozs-topbar__item:not(.ozs-topbar__phone) { display: none; }
	.ozs-topbar__inner { justify-content: center; }
}

/* =========================================================================
   6. Przycisk CTA w menu
   ====================================================================== */

.ozs-menu-cta > a {
	display: inline-flex !important;
	align-items: center;
	background: var(--ozs-gold);
	color: var(--ozs-navy) !important;
	font-weight: 650;
	padding: .6em 1.25em !important;
	border-radius: 999px;
	margin-left: .5rem;
	/* Bez tego przycisk potrafi złamać się na dwie linie w wąskim nagłówku
	   i cały pasek nawigacji urasta dwukrotnie. */
	white-space: nowrap;
	transition: background-color .2s ease, transform .2s ease;
}
/* 🔴 KOLUMNA NAWIGACJI MUSI SIĘ DOPASOWAĆ DO TREŚCI, NIE ODWROTNIE.

   Nagłówek Kadence to siatka CSS o dwóch kolumnach: logo i sekcja prawa.
   Szerokość kolumn wylicza przeglądarka, a przy dłuższej nazwie serwisu
   kolumna logo potrafi zabrać więcej, niż zostawia nawigacji.

   Zmierzone na produkcji 2026-08-02 (okno 1498 px):
     kolumny siatki      473 px | 768 px
     suma pozycji menu   821 px  -> CTA spada do drugiej linii

   Lokalnie ta sama strona mieściła się w jednej linii, więc błędu NIE DAŁO
   SIĘ zobaczyć w środowisku deweloperskim - różnica bierze się z podziału
   siatki, nie z treści menu (pozycje mają identyczne szerokości w obu
   środowiskach). To ta sama awaria, którą CLAUDE.md opisuje jako naprawioną
   przez usunięcie pozycji „Strona główna": jedyne CTA w nagłówku spada pod
   menu. Poprzednia naprawa zmniejszała TREŚĆ; ta naprawia PODZIAŁ MIEJSCA,
   więc nie przewróci się przy kolejnej dłuższej pozycji menu.

   `max-content` w drugiej kolumnie = nawigacja dostaje dokładnie tyle,
   ile potrzebuje; `1fr` w pierwszej = logo bierze resztę. */
@media (min-width: 1025px) {
	.site-main-header-inner-wrap {
		grid-template-columns: 1fr max-content !important;
	}
	/* Zapasowo: nawet gdyby miejsca zabrakło, wolimy zacisnąć odstępy
	   (reguła niżej) niż złamać pasek na dwie linie. */
	.primary-menu-container > .menu {
		flex-wrap: nowrap;
		/* Przycisk CTA ma większy padding niż zwykłe pozycje menu, więc bez
		   wyrównania do środka siada ok. 4 px niżej niż reszta. Ledwo widoczne,
		   ale w pasku, w którym wszystko inne leży w jednej linii - widoczne. */
		align-items: center;
	}
}
/* Na węższych ekranach desktopowych kontener nawigacji Kadence kurczy się
   szybciej niż suma pozycji menu - zaciskamy odstępy, zamiast pozwolić
   nawigacji zawinąć się do drugiej linii. */
@media (min-width: 1025px) and (max-width: 1400px) {
	.primary-menu-container .menu > li > a { padding-left: .6em; padding-right: .6em; }
	.ozs-menu-cta > a { padding: .55em 1em !important; font-size: .95rem; margin-left: .3rem; }
	/* Skutek uboczny reguły `1fr max-content` wyżej: skoro nawigacja bierze
	   dokładnie tyle, ile potrzebuje, to CIASNOTA PRZENOSI SIĘ NA KOLUMNĘ
	   LOGO. Zmierzone: przy 1033 px nazwa serwisu łamie się na dwie linie
	   i nagłówek rośnie z 62 do 90 px. Zamiana problemu „CTA spada pod menu"
	   (zabójcza dla konwersji) na „nazwa w dwóch liniach" (kosmetyczna) i tak
	   byłaby opłacalna, ale nie trzeba wybierać: lekkie zmniejszenie kroju
	   mieści nazwę w jednej linii w całym tym paśmie. */
	/* ⚠️ SELEKTOR MUSI BYĆ DWUCZŁONOWY. Kadence wypisuje w stylach inline
	   regułę `.site-branding .site-title { font-size: 26px }` (specyficzność
	   0,2,0). Zapis `.site-title { ... }` (0,1,0) przegrywa i NIE DZIAŁA -
	   sprawdzone pomiarem: `white-space` zostawało `normal`, a nazwa nadal
	   łamała się na trzy linie. */
	.site-branding .site-title,
	.site-branding .site-title a { font-size: 1.35rem; white-space: nowrap; }
}
.ozs-menu-cta > a:hover {
	background: var(--ozs-gold-light);
	transform: translateY(-1px);
}
/* W menu mobilnym pozycje są blokowe i pełnej szerokości - pigułka
   z marginesem wyglądałaby tam jak błąd. */
.mobile-navigation .ozs-menu-cta > a,
.drawer-nav .ozs-menu-cta > a {
	margin-left: 0;
	justify-content: center;
	margin-block: .5rem;
}

/* =========================================================================
   7. Hero
   ====================================================================== */

.ozs-hero {
	position: relative;
	background: var(--ozs-navy);
	color: #fff;
	padding-block: clamp(3.5rem, 9vw, 7rem);
	overflow: hidden;
}
.ozs-hero__bg {
	position: absolute;
	inset: 0;
	/* Wariant desktopowy (1800 px). Adresy plików wstrzykuje treść strony jako
	   zmienne --ozs-hero-img / --ozs-hero-img-sm - patrz provision-site.php. */
	background-image: var(--ozs-hero-img);
	background-size: cover;
	background-position: center 40%;
	/* Gradient, nie płaskie przyciemnienie: tekst siedzi po lewej, więc lewa
	   strona musi być ciemniejsza (czytelność), a prawa może zostać jaśniejsza
	   (widać zdjęcie). Płaska nakładka albo zabija zdjęcie, albo zabija tekst. */
	mask-image: none;
}
.ozs-hero__bg::after {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(100deg,
		rgba(10, 23, 40, .94) 0%,
		rgba(10, 23, 40, .86) 38%,
		rgba(16, 35, 59, .60) 72%,
		rgba(16, 35, 59, .45) 100%);
}
/* 🔴 Telefon dostaje wariant 900 px zamiast 1800 px.
   Zmierzone przed poprawką: na ekranie 375 px przeglądarka pobierała plik
   1800 px (129 kB) - czyli 78% wagi CAŁEJ strony. Tło CSS nie ma `srcset`,
   więc nie da się tego rozwiązać tak jak przy zwykłym <img>; zapytanie
   medialne jest tu jedynym mechanizmem wyboru wariantu.
   Próg 900 px, a nie 860 px (jak przy sticky CTA): przy dpr=2 telefon o 450 px
   logicznych i tak potrzebuje 900 pikseli fizycznych, więc mniejszy plik
   przestaje wystarczać dokładnie w tym miejscu. */
@media (max-width: 900px) {
	.ozs-hero__bg { background-image: var(--ozs-hero-img-sm, var(--ozs-hero-img)); }
}

.ozs-hero__inner { position: relative; z-index: 1; max-width: 760px; }

.ozs-hero h1 { color: #fff; margin-bottom: 1.1rem; }
.ozs-hero .ozs-eyebrow { color: var(--ozs-gold-light); }
.ozs-hero__lead {
	font-size: clamp(1.05rem, 1.8vw, 1.25rem);
	color: #dbe3ee;
	max-width: 640px;
}

/* Pasek zaufania pod CTA. Fakty sprawdzalne - bez liczby wygranych spraw
   i bez kwot (patrz CLAUDE.md, "Granice treści marketingowej"). */
.ozs-trust {
	display: flex;
	flex-wrap: wrap;
	gap: .6rem 1.6rem;
	margin-top: 2.2rem;
	padding-top: 1.5rem;
	border-top: 1px solid rgba(255, 255, 255, .18);
	font-size: .9rem;
	color: #c5d0de;
}
.ozs-trust__item { display: inline-flex; align-items: center; gap: .45rem; }
.ozs-trust__item .ozs-icon { color: var(--ozs-gold-light); }

/* =========================================================================
   8. Karty
   ====================================================================== */

.ozs-grid {
	display: grid;
	gap: clamp(1rem, 2.2vw, 1.6rem);
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}
.ozs-grid--2 { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }
.ozs-grid--4 { grid-template-columns: repeat(auto-fit, minmax(215px, 1fr)); }

.ozs-card {
	background: var(--ozs-white);
	border: 1px solid var(--ozs-border);
	border-radius: var(--ozs-radius);
	padding: clamp(1.4rem, 2.4vw, 1.9rem);
	box-shadow: var(--ozs-shadow);
	display: flex;
	flex-direction: column;
	gap: .5rem;
}
.ozs-card h3 { margin-bottom: .2rem; }
.ozs-card p { color: var(--ozs-ink-soft); font-size: .97rem; }
.ozs-card__icon {
	width: 46px; height: 46px;
	display: grid; place-items: center;
	border-radius: 12px;
	background: var(--ozs-cream-deep);
	color: var(--ozs-gold-text);
	margin-bottom: .35rem;
}
.ozs-card__icon .ozs-icon { width: 22px; height: 22px; }

/* Karta klikalna (kafelek prowadzący na podstronę). Cały kafelek jest celem
   kliknięcia - większy obszar trafienia, szczególnie ważny na telefonie. */
a.ozs-card {
	text-decoration: none;
	color: inherit;
	transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
a.ozs-card:hover {
	transform: translateY(-3px);
	box-shadow: var(--ozs-shadow-lift);
	border-color: var(--ozs-gold);
}
.ozs-card__more {
	margin-top: auto;
	padding-top: .8rem;
	font-weight: 650;
	color: var(--ozs-gold-text);
	font-size: .95rem;
}
a.ozs-card:hover .ozs-card__more { text-decoration: underline; }

/* Karta na granatowym tle */
.ozs-section--navy .ozs-card {
	background: rgba(255, 255, 255, .055);
	border-color: rgba(255, 255, 255, .16);
	box-shadow: none;
}
.ozs-section--navy .ozs-card p { color: #c9d4e2; }
.ozs-section--navy .ozs-card__icon {
	background: rgba(217, 182, 91, .16);
	color: var(--ozs-gold-light);
}

/* =========================================================================
   9. Kroki (proces)
   ====================================================================== */

.ozs-steps { display: grid; gap: 1.2rem; counter-reset: ozs-step; }
@media (min-width: 800px) { .ozs-steps { grid-template-columns: repeat(4, 1fr); } }

.ozs-step-item {
	position: relative;
	padding-top: 3.4rem;
}
.ozs-step-item::before {
	counter-increment: ozs-step;
	content: counter(ozs-step);
	position: absolute;
	top: 0; left: 0;
	width: 46px; height: 46px;
	display: grid; place-items: center;
	border-radius: 50%;
	background: var(--ozs-gold);
	color: var(--ozs-navy);
	font-weight: 700;
	font-size: 1.1rem;
	font-family: 'Inter', sans-serif;
}
.ozs-step-item h3 { font-size: 1.15rem; margin-bottom: .35rem; }
.ozs-step-item p { color: var(--ozs-ink-soft); font-size: .97rem; }
.ozs-section--navy .ozs-step-item p { color: #c9d4e2; }

/* Linia łącząca kroki - tylko na szerokim ekranie, gdzie kroki stoją w rzędzie.
   Ostatni krok jej nie dostaje, bo nie ma do czego prowadzić. */
@media (min-width: 800px) {
	.ozs-step-item::after {
		content: '';
		position: absolute;
		top: 23px; left: 58px; right: 12px;
		height: 1px;
		background: linear-gradient(90deg, var(--ozs-gold) 0%, rgba(176, 141, 46, .25) 100%);
	}
	.ozs-step-item:last-child::after { display: none; }
}

/* =========================================================================
   10. Lista z ptaszkami
   ====================================================================== */

.ozs-checklist { list-style: none; margin: 1.2rem 0; padding: 0; display: grid; gap: .7rem; }
.ozs-checklist li {
	position: relative;
	padding-left: 2rem;
	line-height: 1.6;
}
.ozs-checklist li::before {
	content: '';
	position: absolute;
	left: 0; top: .45em;
	width: 18px; height: 18px;
	border-radius: 50%;
	background: var(--ozs-gold);
	/* Ptaszek rysowany maską zamiast znaku ✓ - znak zależy od czcionki
	   systemowej i na części Androidów renderuje się jako pusty prostokąt. */
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20zm-1.2 14.6L6 11.8l1.4-1.4 3.4 3.4 5.8-5.8L18 9.4l-7.2 7.2z'/%3E%3C/svg%3E") center/contain no-repeat;
	        mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20zm-1.2 14.6L6 11.8l1.4-1.4 3.4 3.4 5.8-5.8L18 9.4l-7.2 7.2z'/%3E%3C/svg%3E") center/contain no-repeat;
}
.ozs-section--navy .ozs-checklist li::before { background: var(--ozs-gold-light); }

/* =========================================================================
   11. Wyróżniona ramka (np. wyrok TK)
   ====================================================================== */

.ozs-callout {
	background: var(--ozs-white);
	border: 1px solid var(--ozs-border);
	border-left: 4px solid var(--ozs-gold);
	border-radius: var(--ozs-radius);
	padding: clamp(1.3rem, 2.5vw, 1.9rem);
	box-shadow: var(--ozs-shadow);
}
.ozs-callout__label {
	display: block;
	font-size: .78rem;
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--ozs-gold-text);
	margin-bottom: .5rem;
}
.ozs-section--navy .ozs-callout {
	background: rgba(255, 255, 255, .06);
	border-color: rgba(255, 255, 255, .16);
	border-left-color: var(--ozs-gold-light);
	box-shadow: none;
}
.ozs-section--navy .ozs-callout__label { color: var(--ozs-gold-light); }

/* Wariant stonowany - dla zastrzeżenia stojącego POD główną tezą.
   Sekcja o wyroku TK ma dwa bloki: sam wyrok i informację, kiedy wyrok NIE
   pomoże. Gdyby oba miały złotą krawędź i złoty nadtytuł, czytałyby się jak
   dwie równorzędne tezy, a zastrzeżenie ma być wyraźnie widoczne, ale nie
   konkurować z powodem, dla którego ktoś tę sekcję czyta. Stąd neutralna
   krawędź i przygaszony nadtytuł - bez zmniejszania kontrastu tekstu,
   który musi zostać czytelny (WCAG AA). */
.ozs-callout--muted {
	margin-top: 1.25rem;
	border-left-color: var(--ozs-border);
}
.ozs-section--navy .ozs-callout--muted {
	border-left-color: rgba(255, 255, 255, .35);
}
.ozs-section--navy .ozs-callout--muted .ozs-callout__label {
	color: rgba(255, 255, 255, .78);
}

/* Strona 404 - własna treść dopięta do motywu (ozs_404_content). */
.ozs-404 { max-width: 640px; margin: 2rem auto clamp(2rem, 6vw, 4rem); }
.ozs-404__lead { font-size: 1.1rem; color: var(--ozs-ink-soft); }
.ozs-404 .ozs-checklist a { color: var(--ozs-navy); font-weight: 600; }
.ozs-404 .ozs-disclaimer { margin-top: 2rem; }

/* Zastrzeżenie prawne - mniejsze, stonowane, ale czytelne (4,5:1). */
.ozs-disclaimer {
	font-size: .875rem;
	color: var(--ozs-ink-soft);
	border-top: 1px solid var(--ozs-border);
	padding-top: 1rem;
	margin-top: 1.6rem;
}

/* =========================================================================
   12. Zdjęcia w treści
   ====================================================================== */

.ozs-media {
	display: grid;
	gap: clamp(1.5rem, 4vw, 3rem);
	align-items: center;
}
@media (min-width: 860px) {
	.ozs-media { grid-template-columns: 1fr 1fr; }
	.ozs-media--reverse .ozs-media__img { order: -1; }
}
.ozs-media__img img,
.ozs-photo img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: var(--ozs-radius-lg);
	box-shadow: var(--ozs-shadow-lift);
}
.ozs-media__img figure, .ozs-photo figure { margin: 0; }

/* Portret w kółku (strona Kontakt / O kancelarii).
   Plik ma 368x368, a wyświetlamy go w 184 px - świadome nadpróbkowanie 2:1.
   Bez tego na ekranie o dpr=1 przeglądarka mocno pomniejsza duży plik
   i widać aliasing ("przeostrzone" włosy i oprawki okularów). Ten sam problem
   i to samo rozwiązanie co na prawnyradca.eu - patrz CLAUDE.md. */
/* Wizytówka kancelarii na stronie Kontakt: portret + dane obok. */
.ozs-contact-card {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: clamp(1.2rem, 3vw, 2.5rem);
	background: var(--ozs-cream);
	border: 1px solid var(--ozs-border);
	border-radius: var(--ozs-radius-lg);
	padding: clamp(1.4rem, 3vw, 2.2rem);
	margin-bottom: 2.5rem;
}
.ozs-contact-card__data { flex: 1 1 260px; }
.ozs-contact-card__data h3 { margin-bottom: .6rem; }
.ozs-contact-card__reg { font-size: .88rem; color: var(--ozs-ink-soft); }
@media (max-width: 560px) {
	.ozs-contact-card { flex-direction: column; text-align: center; }
}

.ozs-avatar img {
	width: 184px;
	height: 184px;
	border-radius: 50%;
	object-fit: cover;
	box-shadow: var(--ozs-shadow-lift);
	border: 4px solid var(--ozs-white);
}

/* =========================================================================
   13. FAQ (natywne <details>)
   ====================================================================== */

.ozs-faq { max-width: 820px; margin-inline: auto; display: grid; gap: .7rem; }

.ozs-faq__item {
	background: var(--ozs-white);
	border: 1px solid var(--ozs-border);
	border-radius: var(--ozs-radius);
	overflow: hidden;
}
.ozs-faq__q {
	display: flex;
	align-items: flex-start;
	gap: .9rem;
	padding: 1.1rem 1.3rem;
	font-family: 'Playfair Display', Georgia, serif;
	font-size: 1.08rem;
	font-weight: 700;
	color: var(--ozs-navy);
	cursor: pointer;
	list-style: none;
}
/* Domyślny trójkącik <summary> - usuwamy go w obu składniach (WebKit ma
   własną, niestandardową). */
.ozs-faq__q::-webkit-details-marker { display: none; }
.ozs-faq__q::marker { content: ''; }

/* Własny wskaźnik: plus, który obraca się w minus po rozwinięciu. */
.ozs-faq__q::after {
	content: '';
	margin-left: auto;
	flex: 0 0 auto;
	width: 20px; height: 20px;
	background: var(--ozs-gold-text);
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M11 5h2v14h-2z'/%3E%3Cpath d='M5 11h14v2H5z'/%3E%3C/svg%3E") center/contain no-repeat;
	        mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M11 5h2v14h-2z'/%3E%3Cpath d='M5 11h14v2H5z'/%3E%3C/svg%3E") center/contain no-repeat;
	transition: transform .2s ease;
	transform-origin: center;
	margin-top: .2rem;
}
.ozs-faq__item[open] .ozs-faq__q::after { transform: rotate(45deg); }

.ozs-faq__q:hover { background: var(--ozs-cream); }
.ozs-faq__a { padding: 0 1.3rem 1.2rem; color: var(--ozs-ink-soft); }
.ozs-faq__a p:last-child { margin-bottom: 0; }
.ozs-faq__a code {
	background: var(--ozs-cream-deep);
	padding: .1em .4em;
	border-radius: 4px;
	font-size: .92em;
}

/* =========================================================================
   14. Formularze
   ====================================================================== */

.ozs-form {
	background: var(--ozs-white);
	border: 1px solid var(--ozs-border);
	border-radius: var(--ozs-radius-lg);
	padding: clamp(1.4rem, 3vw, 2.4rem);
	box-shadow: var(--ozs-shadow);
	max-width: 720px;
	margin-inline: auto;
}

.ozs-fieldset {
	border: 0;
	padding: 0;
	margin: 0 0 1.8rem;
}
.ozs-fieldset:last-of-type { margin-bottom: 1.2rem; }
.ozs-fieldset > legend {
	display: flex;
	align-items: center;
	gap: .7rem;
	font-family: 'Playfair Display', Georgia, serif;
	font-size: 1.2rem;
	font-weight: 700;
	color: var(--ozs-navy);
	padding: 0;
	margin-bottom: 1.1rem;
}
.ozs-step {
	width: 28px; height: 28px;
	display: grid; place-items: center;
	border-radius: 50%;
	background: var(--ozs-navy);
	color: #fff;
	font-family: 'Inter', sans-serif;
	font-size: .85rem;
	font-weight: 700;
}

.ozs-field { display: flex; flex-direction: column; margin: 0 0 1.05rem; }
.ozs-field > label {
	font-size: .93rem;
	font-weight: 600;
	color: var(--ozs-navy);
	margin-bottom: .3rem;
}
.ozs-hint {
	font-size: .83rem;
	color: var(--ozs-ink-soft);
	margin-bottom: .4rem;
	line-height: 1.45;
}
.ozs-req { color: #a3341f; }   /* 5,4:1 na białym - czytelne, nie krzykliwe */

/* Zwijana sekcja pól szczegółowych w formularzu analizy (2026-09-25, CRO-01).
   Natywne <details> - bez JS. Wskaźnik plus/minus jak w FAQ, żeby klient
   rozpoznał ten sam wzorzec. */
.ozs-more {
	border: 1px dashed var(--ozs-border);
	border-radius: var(--ozs-radius);
	margin: 0 0 1.8rem;
	background: var(--ozs-cream);
}
.ozs-more__toggle {
	display: flex;
	align-items: center;
	gap: .6rem;
	padding: .9rem 1.1rem;
	font-weight: 600;
	color: var(--ozs-navy);
	cursor: pointer;
	list-style: none;
	min-height: 44px;
}
.ozs-more__toggle::-webkit-details-marker { display: none; }
.ozs-more__toggle::marker { content: ''; }
.ozs-more__toggle::after {
	content: '';
	margin-left: auto;
	flex: 0 0 auto;
	width: 18px; height: 18px;
	background: var(--ozs-gold-text);
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M11 5h2v14h-2z'/%3E%3Cpath d='M5 11h14v2H5z'/%3E%3C/svg%3E") center/contain no-repeat;
	        mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M11 5h2v14h-2z'/%3E%3Cpath d='M5 11h14v2H5z'/%3E%3C/svg%3E") center/contain no-repeat;
	transition: transform .2s ease;
}
.ozs-more[open] > .ozs-more__toggle::after { transform: rotate(45deg); }
.ozs-more__toggle:hover { background: var(--ozs-cream-deep); }
/* Napis w jednym elemencie: bez tego tekst i dopisek byłyby osobnymi
   elementami flex i każdy łamałby się we własnej wąskiej kolumnie (zmierzone:
   nagłówek 115 px na telefonie). */
.ozs-more__label { flex: 1 1 auto; }
.ozs-more__opt { font-weight: 400; color: var(--ozs-ink-soft); }
.ozs-more__body { padding: .2rem 1.1rem .4rem; }
.ozs-more__lead { display: block; margin-bottom: 1rem; }

.ozs-form input[type="text"],
.ozs-form input[type="email"],
.ozs-form input[type="tel"],
.ozs-form select,
.ozs-form textarea {
	width: 100%;
	/* 16px to nie estetyka, tylko wymóg: przy mniejszej czcionce iOS Safari
	   automatycznie przybliża stronę po dotknięciu pola i użytkownik zostaje
	   z przewiniętym, powiększonym widokiem. */
	font: inherit;
	font-size: 1rem;
	color: var(--ozs-ink);
	background: var(--ozs-white);
	border: 1.5px solid var(--ozs-border);
	border-radius: 10px;
	padding: .75rem .9rem;
	transition: border-color .15s ease, box-shadow .15s ease;
}
.ozs-form input:focus,
.ozs-form select:focus,
.ozs-form textarea:focus {
	border-color: var(--ozs-navy);
	box-shadow: 0 0 0 3px rgba(16, 35, 59, .1);
	outline: none;
}
.ozs-form textarea { resize: vertical; min-height: 96px; }
.ozs-form select {
	/* Własna strzałka - natywna różni się między systemami i psuje spójność. */
	appearance: none;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%2355616f'%3E%3Cpath d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right .7rem center;
	background-size: 22px;
	padding-right: 2.4rem;
}

/* Zgoda RODO - checkbox i długi tekst obok, nie pod. */
.ozs-field--consent { margin-top: 1.4rem; }
.ozs-consent {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: .7rem;
	align-items: start;
	font-size: .875rem;
	line-height: 1.55;
	color: var(--ozs-ink-soft);
	font-weight: 400;
	cursor: pointer;
}
.ozs-consent input[type="checkbox"] {
	width: 20px; height: 20px;
	margin: .15rem 0 0;
	accent-color: var(--ozs-navy);
	flex: 0 0 auto;
	cursor: pointer;
}
.ozs-consent a { color: var(--ozs-gold-text); font-weight: 600; }

.ozs-submit {
	width: 100%;
	background: var(--ozs-gold);
	color: var(--ozs-navy);
	border: 2px solid var(--ozs-gold);
	border-radius: 999px;
	padding: 1em 1.6em;
	font-family: 'Inter', sans-serif;
	font-size: 1.05rem;
	font-weight: 700;
	cursor: pointer;
	transition: background-color .2s ease, transform .2s ease, box-shadow .2s ease;
}
.ozs-submit:hover {
	background: var(--ozs-gold-light);
	border-color: var(--ozs-gold-light);
	transform: translateY(-2px);
	box-shadow: var(--ozs-shadow-lift);
}
.ozs-submit[disabled] { opacity: .65; cursor: progress; transform: none; }

.ozs-form__foot {
	margin-top: 1rem;
	font-size: .85rem;
	color: var(--ozs-ink-soft);
	text-align: center;
}

/* Pole-pułapka. NIE `display:none` - część botów pomija pola ukryte w ten
   sposób, bo to najbardziej znany wzorzec. Wypchnięcie poza ekran + brak
   dostępności dla czytnika (aria-hidden w HTML) działa lepiej. */
.ozs-hp {
	position: absolute !important;
	left: -9999px !important;
	width: 1px; height: 1px;
	overflow: hidden;
}

/* Komunikaty */
.ozs-notice {
	border-radius: var(--ozs-radius);
	padding: 1rem 1.2rem;
	margin-bottom: 1.4rem;
	font-size: .95rem;
	max-width: 720px;
	margin-inline: auto;
}
.ozs-notice--error {
	background: #fdf1ee;
	border: 1px solid #f0c6ba;
	color: #7d2a14;
}
.ozs-notice--success {
	background: #eef7f0;
	border: 1px solid #bcdcc5;
	color: #1f5b32;
}

/* =========================================================================
   15. Stopka
   ====================================================================== */

.ozs-footer {
	background: var(--ozs-navy-deep);
	color: #b9c5d4;
	font-size: .93rem;
	/* Odsunięcie o wysokość przyklejonego paska CTA - bez tego pasek przykrywa
	   ostatnie odnośniki stopki i są one nieklikalne na telefonie. */
	padding-bottom: calc(var(--ozs-sticky-h) + 1rem);
}
@media (min-width: 861px) { .ozs-footer { padding-bottom: 0; } }

.ozs-footer__inner {
	max-width: var(--ozs-wrap);
	margin-inline: auto;
	padding: clamp(2.5rem, 5vw, 3.5rem) var(--ozs-gutter) 2rem;
	display: grid;
	gap: 2rem;
	grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
}
.ozs-footer__col--brand { grid-column: span 1; }
.ozs-footer__firm {
	font-family: 'Playfair Display', Georgia, serif;
	font-size: 1.1rem;
	font-weight: 700;
	color: #fff;
	margin-bottom: .6rem;
}
.ozs-footer__addr { line-height: 1.75; margin: 0; }
/* Wpis na listę radców prawnych - oddzielony linią, żeby czytał się jako
   uprawnienie zawodowe, a nie jako kolejny numer rejestrowy obok NIP-u. */
.ozs-footer__oirp {
	margin: .9rem 0 0;
	padding-top: .9rem;
	border-top: 1px solid rgba(255, 255, 255, .12);
	font-size: .85rem;
	line-height: 1.6;
	color: #a7b4c5;
}
.ozs-footer__oirp strong { color: var(--ozs-gold-light); }
.ozs-footer__head {
	font-size: .78rem;
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--ozs-gold-light);
	margin-bottom: .8rem;
}
.ozs-footer__list { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.ozs-footer__list a { color: #b9c5d4; text-decoration: none; }
.ozs-footer__list a:hover { color: #fff; text-decoration: underline; }

.ozs-footer__bar {
	border-top: 1px solid rgba(255, 255, 255, .12);
}
.ozs-footer__bar > p {
	max-width: var(--ozs-wrap);
	margin-inline: auto;
	padding-inline: var(--ozs-gutter);
	font-size: .82rem;
	color: #8b9aae;
}
.ozs-footer__bar > p:first-child { padding-top: 1.2rem; }
.ozs-footer__disclaimer { padding-bottom: 1.4rem; max-width: 900px; }

/* =========================================================================
   16. Przyklejony pasek CTA (telefon)
   ====================================================================== */

.ozs-sticky-cta {
	position: fixed;
	inset: auto 0 0 0;
	z-index: 90;
	display: none;
	gap: .5rem;
	padding: .55rem .7rem;
	/* Dolny margines bezpieczny na iPhonie z paskiem gestów - bez tego
	   przyciski trafiają pod systemowy uchwyt i są trudne do kliknięcia. */
	padding-bottom: calc(.55rem + env(safe-area-inset-bottom, 0px));
	background: rgba(10, 23, 40, .97);
	backdrop-filter: blur(6px);
	box-shadow: 0 -4px 18px rgba(0, 0, 0, .22);
}
@media (max-width: 860px) { .ozs-sticky-cta { display: flex; } }

.ozs-sticky-cta a {
	flex: 1 1 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: .45rem;
	/* 48 px = minimalny cel dotykowy wg wytycznych WCAG 2.5.5 / Material. */
	min-height: 48px;
	border-radius: 999px;
	font-weight: 650;
	font-size: .97rem;
	text-decoration: none;
}
.ozs-sticky-cta__call {
	background: transparent;
	color: #fff !important;
	border: 1.5px solid rgba(255, 255, 255, .5);
}
.ozs-sticky-cta__form {
	background: var(--ozs-gold);
	color: var(--ozs-navy) !important;
	flex: 1.6 1 0;
}

/* =========================================================================
   17. Drobne poprawki motywu Kadence
   ====================================================================== */

/* Kadence dokłada własny nagłówek strony (tytuł + okruszki) na kremowym tle.
   Na stronach zbudowanych z sekcji byłby DRUGIM, konkurencyjnym tytułem -
   nasze sekcje mają własny H1/H2 w treści. Na stronach czysto tekstowych
   (polityki) zostaje, bo inaczej dokument zaczynałby się od akapitu bez H1. */
.ozs-sections .entry-hero-container { display: none; }

/* Treść stron złożonych z sekcji nie potrzebuje wewnętrznego paddingu
   motywu - sekcje mają własny. */
.ozs-sections .content-area { padding-block: 0; }
.ozs-sections .entry-content > .alignfull { margin-block: 0; }

/* Strony tekstowe (polityka prywatności, cookies) - komfortowa szerokość
   i rytm. Powyżej ~75 znaków w wierszu czytelność wyraźnie spada. */
.ozs-legal .entry-content { max-width: 780px; margin-inline: auto; }
/* Pas tytułowy motywu ma domyślnie chłodny błękit, obcy wobec palety serwisu. */
.ozs-legal .entry-hero-container,
.ozs-legal .entry-hero-container .entry-hero { background: var(--ozs-cream); }
.ozs-legal .entry-content .ozs-legal-intro {
	font-size: 1.1rem;
	color: var(--ozs-ink);
	background: var(--ozs-cream);
	border-left: 4px solid var(--ozs-gold);
	border-radius: 0 var(--ozs-radius) var(--ozs-radius) 0;
	padding: 1.1rem 1.3rem;
	margin-bottom: 2rem;
}
.ozs-legal .entry-content h2 { margin-top: 2.4rem; }
.ozs-legal .entry-content h3 { margin-top: 1.6rem; }
.ozs-legal .entry-content ul,
.ozs-legal .entry-content ol { padding-left: 1.3rem; }
.ozs-legal .entry-content li { margin-bottom: .45rem; }
.ozs-legal .entry-content table {
	width: 100%;
	border-collapse: collapse;
	margin: 1.2rem 0;
	font-size: .93rem;
	/* Tabela w polityce prywatności bywa szersza niż telefon - własny
	   kontener z przewijaniem zamiast rozpychania całej strony. */
	display: block;
	overflow-x: auto;
}
.ozs-legal .entry-content th,
.ozs-legal .entry-content td {
	border: 1px solid var(--ozs-border);
	padding: .6rem .8rem;
	text-align: left;
	vertical-align: top;
}
.ozs-legal .entry-content th { background: var(--ozs-cream); color: var(--ozs-navy); }

/* =========================================================================
   18. Dostępność / preferencje użytkownika
   ====================================================================== */

/* Cele dotykowe na telefonie.
   Zmierzone przed poprawką: odnośniki stopki miały 18 px wysokości przy 8 px
   odstępu. Formalnie mieści się to w wyjątku "odstępu" z WCAG 2.5.8 (26 > 24),
   ale praktycznie oznacza celowanie kciukiem w cienki pasek tekstu - na liście
   ośmiu podobnych odnośników łatwo trafić w sąsiedni. Powiększamy do ~40 px
   TYLKO na telefonie: na desktopie z myszą byłoby to rozdęte i rozwlekłoby
   stopkę bez powodu. */
@media (max-width: 860px) {
	.ozs-footer__list { gap: .15rem; }
	.ozs-footer__list a {
		display: block;
		padding-block: .55rem;
		min-height: 40px;
		box-sizing: border-box;
	}
	.ozs-topbar__item { padding-block: .35rem; }
	/* Hamburger Kadence ma domyślnie 31 px - poniżej progu 44 px, a jest to
	   JEDYNE wejście do nawigacji na telefonie. */
	.mobile-toggle-open-container .menu-toggle-open {
		min-width: 44px;
		min-height: 44px;
	}
}

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		animation-duration: .001ms !important;
		transition-duration: .001ms !important;
		scroll-behavior: auto !important;
	}
	.ozs-btn:hover, .ozs-submit:hover, a.ozs-card:hover { transform: none; }
}

/* Tryb wysokiego kontrastu - obwódki zamiast subtelnych cieni. */
@media (prefers-contrast: more) {
	.ozs-card, .ozs-form, .ozs-callout, .ozs-faq__item { border-width: 2px; }
	.ozs-hint, .ozs-card p, .ozs-lead { color: var(--ozs-ink); }
}

/* Wydruk: strony bywają drukowane przez klientów jako dowód oferty. */
@media print {
	.ozs-topbar, .ozs-sticky-cta, .ozs-menu-cta,
	.ozs-form, #masthead, .ozs-footer__list { display: none !important; }
	.ozs-hero { background: none; color: #000; padding-block: 1rem; }
	.ozs-hero__bg { display: none; }
	.ozs-hero h1, .ozs-hero__lead { color: #000; }
	.ozs-section { padding-block: 1rem; page-break-inside: avoid; }
	.ozs-faq__item { border: 1px solid #999; }
	.ozs-faq__a { display: block !important; }
}