/* Strona "Powodz" (/odszkodowanie-za-powodz/) - Sekcja 1: Hero.
   Namespace .oai-flood-damage-*, oddzielna przestrzen klas od
   .oai-hail-damage-*, .oai-roof-wind-damage-*, .oai-water-damage-* i
   pozostalych podstron problemowych, bez wycieku stylow.

   Breadcrumb (trzypoziomowy: strona glowna, Problemy i szkody, biezaca)
   oraz uklad tresc/modul wzorowane na sprawdzonym, rzeczywistym wzorcu
   .oai-roof-wind-damage-hero (page-roof-wind-damage.css): ten sam prog
   768px dla wiekszej typografii, ten sam prog 1024px dla przejscia na
   dwie strefy, ta sama technika separatora "/" w breadcrumb. Podzial
   kolumn desktop celowo 55%/45% (a nie 56%/44% jak w Gradobiciu ani
   54%/46% jak w Zerwanym dachu) - wlasna kompozycja tej strony w
   granicach tej samej rodziny design systemu.

   Modul wizualny to prawdziwe zdjecie (powodz-hero.webp, rzeczywiste
   wymiary 1600x1280, proporcja 5/4), dom po ustapieniu wody powodziowej
   ze sladami osadu na elewacji, spokojna sytuacja po zdarzeniu, bez ludzi.

   WAZNE: <img> ma atrybuty HTML width="1600" height="1280" (poprawne Core
   Web Vitals - rezerwacja miejsca przed zaladowaniem). Dlatego
   .oai-flood-damage-hero__image MUSI jawnie ustawiac "height: auto" obok
   "aspect-ratio: 5 / 4" - bez tego height="1280" dziala jako definitywna,
   nieskalowana wartosc prezentacyjna, aspect-ratio jest wtedy ignorowane,
   a obraz renderuje sie jako pionowy baner niezaleznie od faktycznej
   szerokosci kolumny (ten sam blad, ktory wystapil wczesniej przy Hero
   Gradobicia i zostal wtedy naprawiony). Kontener utrzymuje te sama
   proporcje 5/4 co zrodlowy plik na kazdej szerokosci, wiec object-fit:
   cover praktycznie nic nie wycina. */

.oai-site .oai-flood-damage-hero {
	width: 100%;
	max-width: 100%;
	min-width: 0;
	box-sizing: border-box;
	padding: 48px 20px;
	background-color: var(--oai-color-white);
}

.oai-site .oai-flood-damage-hero__inner {
	width: 100%;
	max-width: var(--oai-container-width);
	min-width: 0;
	box-sizing: border-box;
	margin: 0 auto;
}

/* Breadcrumb */

.oai-site .oai-flood-damage-hero__breadcrumb {
	width: 100%;
	margin: 0 0 32px;
}

.oai-site .oai-flood-damage-hero__breadcrumb-list {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0;
	margin: 0;
	padding: 0;
	list-style: none;
}

.oai-site .oai-flood-damage-hero__breadcrumb-item {
	display: flex;
	align-items: center;
	font-size: 14px;
	line-height: 1.4;
}

.oai-site .oai-flood-damage-hero__breadcrumb-item + .oai-flood-damage-hero__breadcrumb-item > .oai-flood-damage-hero__breadcrumb-link::before,
.oai-site .oai-flood-damage-hero__breadcrumb-item + .oai-flood-damage-hero__breadcrumb-item > .oai-flood-damage-hero__breadcrumb-static::before,
.oai-site .oai-flood-damage-hero__breadcrumb-item + .oai-flood-damage-hero__breadcrumb-item > .oai-flood-damage-hero__breadcrumb-current::before {
	content: "/\00A0";
	margin: 0 8px 0 8px;
	font-size: 14px;
	color: var(--oai-color-navy-muted);
}

.oai-site .oai-flood-damage-hero__breadcrumb-link {
	font-size: 14px;
	font-weight: 600;
	line-height: 1.4;
	color: var(--oai-color-navy-muted);
	text-decoration: none;
	transition: color var(--oai-transition-fast), text-decoration-color var(--oai-transition-fast);
}

.oai-site .oai-flood-damage-hero__breadcrumb-link:hover {
	color: var(--oai-color-navy);
	text-decoration: underline;
	text-decoration-color: var(--oai-color-cyan);
}

html[data-oai-input="keyboard"] .oai-site .oai-flood-damage-hero__breadcrumb-link:focus-visible {
	outline: 2px solid var(--oai-color-cyan);
	outline-offset: 2px;
	border-radius: 4px;
}

.oai-site .oai-flood-damage-hero__breadcrumb-current {
	font-size: 14px;
	font-weight: 400;
	line-height: 1.4;
	color: var(--oai-color-navy-muted);
}

/* Uklad: tresc + modul wizualny */

.oai-site .oai-flood-damage-hero__layout {
	display: flex;
	flex-direction: column;
	gap: 40px;
}

.oai-site .oai-flood-damage-hero__content {
	min-width: 0;
	max-width: 100%;
}

.oai-site .oai-flood-damage-hero__eyebrow {
	margin: 0 0 16px;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--oai-color-cyan);
}

.oai-site .oai-flood-damage-hero__title {
	margin: 0 0 20px;
	max-width: 100%;
	font-size: 1.625rem;
	font-weight: 700;
	line-height: 1.22;
	color: var(--oai-color-navy);
	overflow-wrap: normal;
	word-break: normal;
	hyphens: none;
}

.oai-site .oai-flood-damage-hero__lead {
	margin: 0;
	max-width: 560px;
	font-size: 1rem;
	line-height: 1.6;
	color: var(--oai-color-navy-muted);
	overflow-wrap: normal;
	word-break: normal;
	hyphens: none;
}

.oai-site .oai-flood-damage-hero__actions {
	margin: 32px 0 0;
	width: 100%;
}

.oai-site .oai-flood-damage-hero__cta {
	width: 100%;
	justify-content: center;
	min-height: 48px;
}

.oai-site .oai-flood-damage-hero__microcopy {
	margin: 12px 0 0;
	max-width: 100%;
	font-size: 0.8125rem;
	line-height: 1.5;
	color: var(--oai-color-navy-muted);
	overflow-wrap: normal;
	word-break: normal;
	hyphens: none;
}

/* Modul wizualny: prawdziwe zdjecie, spokojny radius, cienka ramka tym
   samym tokenem co pozostale hero klastra, bez ciezkiego cienia, bez
   ramki udajacej karte, bez nakladek tekstowych, bez badge, bez gradientu
   imitujacego wode. */

.oai-site .oai-flood-damage-hero__visual {
	min-width: 0;
	max-width: 100%;
}

.oai-site .oai-flood-damage-hero__figure {
	margin: 0;
	width: 100%;
	max-width: 100%;
}

.oai-site .oai-flood-damage-hero__image {
	display: block;
	width: 100%;
	max-width: 100%;
	height: auto;
	aspect-ratio: 5 / 4;
	object-fit: cover;
	object-position: center;
	border-radius: var(--oai-radius-m);
	border: 1px solid var(--oai-color-border);
}

/* Tablet od 768px: wieksza typografia, modul wciaz pod trescia (ten sam
   prog kontrolny co pozostale strony klastra) */

@media (min-width: 768px) {
	.oai-site .oai-flood-damage-hero {
		padding: 72px 40px;
	}

	.oai-site .oai-flood-damage-hero__title {
		font-size: 1.875rem;
	}

	.oai-site .oai-flood-damage-hero__lead {
		font-size: 1.0625rem;
	}

	.oai-site .oai-flood-damage-hero__cta {
		width: auto;
		min-width: 260px;
	}

	.oai-site .oai-flood-damage-hero__actions {
		width: auto;
	}
}

/* Desktop od 1024px: dwie strefy hero, tresc i modul obok siebie, wlasny
   podzial 55%/45% (patrz komentarz na poczatku pliku) */

@media (min-width: 1024px) {
	.oai-site .oai-flood-damage-hero__layout {
		flex-direction: row;
		align-items: center;
		gap: 56px;
	}

	.oai-site .oai-flood-damage-hero__content {
		flex: 0 1 55%;
	}

	.oai-site .oai-flood-damage-hero__visual {
		flex: 1 1 45%;
		max-width: 570px;
	}

	.oai-site .oai-flood-damage-hero__title {
		font-size: 2.125rem;
	}
}

@media (max-width: 360px) {
	.oai-site .oai-flood-damage-hero {
		padding: 40px 16px;
	}
}

/* Sekcja 2: "Co moze zostac uszkodzone podczas powodzi lub podtopienia?"
   Czysto typograficzna, editorialowa sekcja bez grafiki - swiadoma decyzja
   uzytkownika, odmienna od pierwotnego kierunku wizualnego w planie (ktory
   zakladal przekroj domu). Jeden wspolny grid czterech obszarow z
   separatorami (linia pionowa miedzy kolumnami, linia pozioma miedzy
   rzedami na desktopie) zamiast czterech osobnych kart - brak
   box-shadow, brak border-radius per-element, brak ikon, brak numeracji.
   Cyjan wystepuje wylacznie jako krotka, cienka kreska przed kazdym H3
   (nie tlo, nie ramka, nie ikona). Tlo delikatnie odrozniajace sekcje od
   bialego Hero uzywa juz istniejacego w projekcie tokenu chlodnego
   odcienia navy (rgba(1, 2, 66, 0.02) - ten sam, ktorego uzywa Sekcja
   "Powodz vs OWU" na stronie Zerwany dach), a nie nowego, losowego koloru.
   Podzial kolumn desktop 52/48 (nie idealne 50/50) - celowo szerszy dla
   lewej kolumny, bo jej tresci (Sciany/podlogi, Stale elementy) sa
   nieznacznie dluzsze. Na mobile separator pionowy znika calkowicie,
   zostaja wylacznie poziome linie miedzy obszarami (border-top na kazdym
   elemencie oprocz pierwszego, wiec nie ma linii nad Obszarem 1 ani pod
   Obszarem 4). */

.oai-site .oai-flood-damage-scope {
	width: 100%;
	max-width: 100%;
	min-width: 0;
	box-sizing: border-box;
	padding: 56px 20px;
	background-color: rgba(1, 2, 66, 0.02);
}

.oai-site .oai-flood-damage-scope__inner {
	width: 100%;
	max-width: var(--oai-container-width);
	min-width: 0;
	box-sizing: border-box;
	margin: 0 auto;
}

.oai-site .oai-flood-damage-scope__intro {
	min-width: 0;
	max-width: 680px;
	margin: 0 0 8px;
}

.oai-site .oai-flood-damage-scope__eyebrow {
	margin: 0 0 16px;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--oai-color-cyan);
}

.oai-site .oai-flood-damage-scope__heading {
	margin: 0 0 16px;
	max-width: 100%;
	font-size: 1.5rem;
	font-weight: 700;
	line-height: 1.25;
	color: var(--oai-color-navy);
	overflow-wrap: normal;
	word-break: normal;
	hyphens: none;
}

.oai-site .oai-flood-damage-scope__lead {
	margin: 0;
	max-width: 620px;
	font-size: 0.9375rem;
	line-height: 1.65;
	color: var(--oai-color-navy-muted);
	overflow-wrap: normal;
	word-break: normal;
	hyphens: none;
}

.oai-site .oai-flood-damage-scope__areas {
	display: grid;
	grid-template-columns: 1fr;
	width: 100%;
	min-width: 0;
	margin: 32px 0 0;
}

.oai-site .oai-flood-damage-scope__area {
	min-width: 0;
	padding: 28px 0;
	border-top: 1px solid var(--oai-color-border);
}

.oai-site .oai-flood-damage-scope__area:first-child {
	padding-top: 0;
	border-top: none;
}

.oai-site .oai-flood-damage-scope__area-heading {
	margin: 0 0 10px;
	max-width: 100%;
	font-size: 1.0625rem;
	font-weight: 700;
	line-height: 1.35;
	color: var(--oai-color-navy);
	overflow-wrap: normal;
	word-break: normal;
	hyphens: none;
}

.oai-site .oai-flood-damage-scope__area-heading::before {
	content: "";
	display: block;
	width: 28px;
	height: 2px;
	margin: 0 0 12px;
	background-color: var(--oai-color-cyan);
}

.oai-site .oai-flood-damage-scope__area-text {
	margin: 0;
	max-width: 520px;
	font-size: 0.9375rem;
	line-height: 1.65;
	color: var(--oai-color-navy-muted);
	overflow-wrap: normal;
	word-break: normal;
	hyphens: none;
}

@media (min-width: 768px) {
	.oai-site .oai-flood-damage-scope {
		padding: 72px 40px;
	}

	.oai-site .oai-flood-damage-scope__heading {
		font-size: 1.75rem;
	}

	.oai-site .oai-flood-damage-scope__lead {
		font-size: 1rem;
	}

	.oai-site .oai-flood-damage-scope__areas {
		grid-template-columns: 52% 48%;
		margin: 48px 0 0;
	}

	.oai-site .oai-flood-damage-scope__area {
		padding: 36px 40px;
		border-top: none;
	}

	.oai-site .oai-flood-damage-scope__area:first-child {
		padding-top: 0;
	}

	.oai-site .oai-flood-damage-scope__area:nth-child(odd) {
		padding-left: 0;
		border-right: 1px solid var(--oai-color-border);
	}

	.oai-site .oai-flood-damage-scope__area:nth-child(even) {
		padding-right: 0;
	}

	.oai-site .oai-flood-damage-scope__area:nth-child(1),
	.oai-site .oai-flood-damage-scope__area:nth-child(2) {
		padding-top: 0;
		border-bottom: 1px solid var(--oai-color-border);
	}

	.oai-site .oai-flood-damage-scope__area:nth-child(3),
	.oai-site .oai-flood-damage-scope__area:nth-child(4) {
		padding-bottom: 0;
	}
}

@media (max-width: 360px) {
	.oai-site .oai-flood-damage-scope {
		padding: 40px 16px;
	}
}

/* Sekcja 3: "Po powodzi najpierw bezpieczenstwo, dopiero pozniej
   dokumentacja". Editorialowa, asymetryczna kompozycja tekstowa bez
   grafiki - swiadomie inna niz fotograficzne Hero i szeroki grid 2x2
   Sekcji 2. Biale tlo (jak Hero, nie chlodny odcien Sekcji 2), aby
   sekcja nie zlewala sie wizualnie z sasiadka. Desktop: lewa czesc
   (eyebrow/H2/lead) ok. 38%, prawa czesc (trzy otwarte obszary, nie
   karty) ok. 62%, oddzielone jedna subtelna pionowa linia (border-right
   na intro, nie pelna ramka). Miedzy trzema obszarami wylacznie poziome
   linie (border-top na kazdym oprocz pierwszego). Cyjan wystepuje
   oszczednie: eyebrow oraz krotka, cienka kreska przed kazdym H3 - bez
   duzego tla, ikon czy alert-boxa, bo temat bezpieczenstwa ma brzmiec
   rzeczowo, nie alarmowo. Prog przejscia na dwie kolumny ustawiony na
   900px (szerszy niz standardowe 768px tej strony), bo krotszy tekst
   lewej intro w wezszej niz 38% kolumnie zaczyna wygladac zbyt wasko
   ponizej tej szerokosci. */

.oai-site .oai-flood-damage-safety {
	width: 100%;
	max-width: 100%;
	min-width: 0;
	box-sizing: border-box;
	padding: 56px 20px;
	background-color: var(--oai-color-white);
}

.oai-site .oai-flood-damage-safety__inner {
	width: 100%;
	max-width: var(--oai-container-width);
	min-width: 0;
	box-sizing: border-box;
	margin: 0 auto;
	display: flex;
	flex-direction: column;
	gap: 32px;
}

.oai-site .oai-flood-damage-safety__intro {
	min-width: 0;
	max-width: 100%;
}

.oai-site .oai-flood-damage-safety__eyebrow {
	margin: 0 0 16px;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--oai-color-cyan);
}

.oai-site .oai-flood-damage-safety__heading {
	margin: 0 0 16px;
	max-width: 100%;
	font-size: 1.5rem;
	font-weight: 700;
	line-height: 1.25;
	color: var(--oai-color-navy);
	overflow-wrap: normal;
	word-break: normal;
	hyphens: none;
}

.oai-site .oai-flood-damage-safety__lead {
	margin: 0;
	max-width: 480px;
	font-size: 0.9375rem;
	line-height: 1.65;
	color: var(--oai-color-navy-muted);
	overflow-wrap: normal;
	word-break: normal;
	hyphens: none;
}

.oai-site .oai-flood-damage-safety__areas {
	min-width: 0;
	max-width: 100%;
}

.oai-site .oai-flood-damage-safety__area {
	padding: 24px 0;
	border-top: 1px solid var(--oai-color-border);
}

.oai-site .oai-flood-damage-safety__area:first-child {
	padding-top: 0;
	border-top: none;
}

.oai-site .oai-flood-damage-safety__area-heading {
	position: relative;
	margin: 0 0 10px;
	padding-left: 20px;
	max-width: 100%;
	font-size: 1.0625rem;
	font-weight: 700;
	line-height: 1.35;
	color: var(--oai-color-navy);
	overflow-wrap: normal;
	word-break: normal;
	hyphens: none;
}

.oai-site .oai-flood-damage-safety__area-heading::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.55em;
	width: 12px;
	height: 2px;
	background-color: var(--oai-color-cyan);
}

.oai-site .oai-flood-damage-safety__area-text {
	margin: 0;
	max-width: 560px;
	padding-left: 20px;
	font-size: 0.9375rem;
	line-height: 1.65;
	color: var(--oai-color-navy-muted);
	overflow-wrap: normal;
	word-break: normal;
	hyphens: none;
}

@media (min-width: 768px) {
	.oai-site .oai-flood-damage-safety {
		padding: 72px 40px;
	}

	.oai-site .oai-flood-damage-safety__heading {
		font-size: 1.75rem;
	}

	.oai-site .oai-flood-damage-safety__lead {
		font-size: 1rem;
	}
}

@media (min-width: 900px) {
	.oai-site .oai-flood-damage-safety__inner {
		flex-direction: row;
		align-items: flex-start;
		gap: 0;
	}

	.oai-site .oai-flood-damage-safety__intro {
		flex: 0 1 38%;
		padding-right: 40px;
		border-right: 1px solid var(--oai-color-border);
	}

	.oai-site .oai-flood-damage-safety__areas {
		flex: 1 1 62%;
		padding-left: 48px;
	}
}

@media (max-width: 360px) {
	.oai-site .oai-flood-damage-safety {
		padding: 40px 16px;
	}
}

/* Sekcja 4: "Co udokumentowac, zanim zaczniesz usuwac skutki powodzi?"
   Editorialowa kompozycja bez grafiki, celowo odmienna od Sekcji 2
   (regularny grid 2x2) i Sekcji 3 (asymetria lewa/prawa) - uklad
   1 szeroki + 2 obok siebie + 1 szeroki, nie proces krok po kroku, wiec
   bez numeracji. Biale tlo sekcji (jak Hero i Sekcja 3), zeby nie
   powielic chlodnego odcienia juz uzytego w Sekcji 2 bezposrednio nad
   nia. Ostatni szeroki obszar ("Stan przed i po koniecznych pracach")
   ma delikatne, pelnoszerokosciowe tlo tym samym tokenem chlodnego
   odcienia navy co Sekcja 2 (rgba(1, 2, 66, 0.02)) - bez border-radius,
   box-shadow i pelnej ramki, wylacznie plaska plama koloru sygnalizujaca
   koncowy etap "przed/po". Separatory: pozioma linia miedzy pierwszym
   szerokim obszarem a srodkowa para, pionowa linia miedzy dwoma
   srodkowymi obszarami na desktopie (znika na mobile), krotkie cyjanowe
   kreski przy kazdym H3 - ten sam oszczedny akcent co w Sekcji 3, nie
   duze tlo ani ikona. */

.oai-site .oai-flood-damage-documentation {
	width: 100%;
	max-width: 100%;
	min-width: 0;
	box-sizing: border-box;
	padding: 56px 20px;
	background-color: var(--oai-color-white);
}

.oai-site .oai-flood-damage-documentation__inner {
	width: 100%;
	max-width: var(--oai-container-width);
	min-width: 0;
	box-sizing: border-box;
	margin: 0 auto;
}

.oai-site .oai-flood-damage-documentation__intro {
	min-width: 0;
	max-width: 680px;
	margin: 0 0 8px;
}

.oai-site .oai-flood-damage-documentation__eyebrow {
	margin: 0 0 16px;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--oai-color-cyan);
}

.oai-site .oai-flood-damage-documentation__heading {
	margin: 0 0 16px;
	max-width: 100%;
	font-size: 1.5rem;
	font-weight: 700;
	line-height: 1.25;
	color: var(--oai-color-navy);
	overflow-wrap: normal;
	word-break: normal;
	hyphens: none;
}

.oai-site .oai-flood-damage-documentation__lead {
	margin: 0;
	max-width: 620px;
	font-size: 0.9375rem;
	line-height: 1.65;
	color: var(--oai-color-navy-muted);
	overflow-wrap: normal;
	word-break: normal;
	hyphens: none;
}

.oai-site .oai-flood-damage-documentation__layout {
	width: 100%;
	min-width: 0;
	margin: 32px 0 0;
}

/* Poziom 1: obszar pelnoszerokosciowy */

.oai-site .oai-flood-damage-documentation__primary {
	padding: 0 0 28px;
	border-bottom: 1px solid var(--oai-color-border);
}

.oai-site .oai-flood-damage-documentation__primary-heading {
	position: relative;
	margin: 0 0 10px;
	padding-left: 20px;
	max-width: 100%;
	font-size: 1.0625rem;
	font-weight: 700;
	line-height: 1.35;
	color: var(--oai-color-navy);
	overflow-wrap: normal;
	word-break: normal;
	hyphens: none;
}

.oai-site .oai-flood-damage-documentation__primary-heading::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.55em;
	width: 12px;
	height: 2px;
	background-color: var(--oai-color-cyan);
}

.oai-site .oai-flood-damage-documentation__primary-text {
	margin: 0;
	max-width: 640px;
	padding-left: 20px;
	font-size: 0.9375rem;
	line-height: 1.65;
	color: var(--oai-color-navy-muted);
	overflow-wrap: normal;
	word-break: normal;
	hyphens: none;
}

/* Poziom 2: dwa obszary obok siebie (desktop) / jedna kolumna (mobile) */

.oai-site .oai-flood-damage-documentation__secondary {
	display: flex;
	flex-direction: column;
	width: 100%;
	min-width: 0;
	padding: 28px 0;
	border-bottom: 1px solid var(--oai-color-border);
}

.oai-site .oai-flood-damage-documentation__secondary-item {
	min-width: 0;
	padding: 20px 0;
	border-top: 1px solid var(--oai-color-border);
}

.oai-site .oai-flood-damage-documentation__secondary-item:first-child {
	padding-top: 0;
	border-top: none;
}

.oai-site .oai-flood-damage-documentation__secondary-heading {
	position: relative;
	margin: 0 0 10px;
	padding-left: 20px;
	max-width: 100%;
	font-size: 1.0625rem;
	font-weight: 700;
	line-height: 1.35;
	color: var(--oai-color-navy);
	overflow-wrap: normal;
	word-break: normal;
	hyphens: none;
}

.oai-site .oai-flood-damage-documentation__secondary-heading::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.55em;
	width: 12px;
	height: 2px;
	background-color: var(--oai-color-cyan);
}

.oai-site .oai-flood-damage-documentation__secondary-text {
	margin: 0;
	max-width: 480px;
	padding-left: 20px;
	font-size: 0.9375rem;
	line-height: 1.65;
	color: var(--oai-color-navy-muted);
	overflow-wrap: normal;
	word-break: normal;
	hyphens: none;
}

/* Poziom 3: obszar pelnoszerokosciowy z delikatnym tlem */

.oai-site .oai-flood-damage-documentation__closing {
	padding: 28px 20px 28px 0;
	background-color: rgba(1, 2, 66, 0.02);
}

.oai-site .oai-flood-damage-documentation__closing-heading {
	margin: 0 0 10px;
	max-width: 100%;
	font-size: 1.0625rem;
	font-weight: 700;
	line-height: 1.35;
	color: var(--oai-color-navy);
	overflow-wrap: normal;
	word-break: normal;
	hyphens: none;
}

.oai-site .oai-flood-damage-documentation__closing-heading::before {
	content: "";
	display: block;
	width: 28px;
	height: 2px;
	margin: 0 0 12px;
	background-color: var(--oai-color-cyan);
}

.oai-site .oai-flood-damage-documentation__closing-text {
	margin: 0;
	max-width: 640px;
	font-size: 0.9375rem;
	line-height: 1.65;
	color: var(--oai-color-navy-muted);
	overflow-wrap: normal;
	word-break: normal;
	hyphens: none;
}

@media (min-width: 768px) {
	.oai-site .oai-flood-damage-documentation {
		padding: 72px 40px;
	}

	.oai-site .oai-flood-damage-documentation__heading {
		font-size: 1.75rem;
	}

	.oai-site .oai-flood-damage-documentation__lead {
		font-size: 1rem;
	}

	.oai-site .oai-flood-damage-documentation__closing {
		padding: 32px 40px 32px 0;
	}
}

@media (min-width: 860px) {
	.oai-site .oai-flood-damage-documentation__secondary {
		flex-direction: row;
		gap: 48px;
	}

	.oai-site .oai-flood-damage-documentation__secondary-item {
		flex: 1 1 50%;
		padding: 0;
		border-top: none;
	}

	.oai-site .oai-flood-damage-documentation__secondary-item:first-child {
		padding-right: 48px;
		border-right: 1px solid var(--oai-color-border);
	}
}

@media (max-width: 360px) {
	.oai-site .oai-flood-damage-documentation {
		padding: 40px 16px;
	}

	.oai-site .oai-flood-damage-documentation__closing {
		padding: 24px 16px 24px 0;
	}
}

/* Sekcja 5: "Co sprawdzic w OWU po powodzi lub podtopieniu?" Pierwszy
   mocny granatowy przerywnik strony - pelnoszerokosciowy modul,
   granatowe tlo tym samym tokenem co reszta projektu
   (var(--oai-color-navy)), on-navy skala przezroczystosci tekstu
   identyczna z juz zaakceptowanymi granatowymi sekcjami tej strony
   (0.85 body, rgba(255,255,255,0.12) separatory) - nie nowy kolor.
   Cztery otwarte kolumny (nie karty) z cienkimi polprzezroczystymi
   separatorami, progresywnie: 1 kolumna do 768px, 2x2 od 768px, pelne
   4 kolumny dopiero od 1200px (kontener ma max-width 1280px, wiec
   ponizej tego czterokolumnowy tekst zaczynal wygladac za ciasno przy
   realnej dlugosci opisow, zwlaszcza Obszaru 3 i 4). Koncowe zdanie
   antykanibalizacyjne z jednym linkiem do /odszkodowanie-za-zalanie/ -
   link jawnie ustawia font-size/line-height identyczne z otaczajacym
   tekstem (nie polega na samym dziedziczeniu), zapobiegajac
   historycznemu bugowi powiekszonych linkow inline. */

.oai-site .oai-flood-damage-policy {
	width: 100%;
	max-width: 100%;
	min-width: 0;
	box-sizing: border-box;
	padding: 56px 20px;
	background-color: var(--oai-color-navy);
}

.oai-site .oai-flood-damage-policy__inner {
	width: 100%;
	max-width: var(--oai-container-width);
	min-width: 0;
	box-sizing: border-box;
	margin: 0 auto;
}

.oai-site .oai-flood-damage-policy__intro {
	min-width: 0;
	max-width: 640px;
}

.oai-site .oai-flood-damage-policy__eyebrow {
	margin: 0 0 16px;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--oai-color-cyan);
}

.oai-site .oai-flood-damage-policy__heading {
	margin: 0 0 16px;
	max-width: 100%;
	font-size: 1.5rem;
	font-weight: 700;
	line-height: 1.25;
	color: var(--oai-color-white);
	overflow-wrap: normal;
	word-break: normal;
	hyphens: none;
}

.oai-site .oai-flood-damage-policy__lead {
	margin: 0;
	max-width: 100%;
	font-size: 0.9375rem;
	line-height: 1.65;
	color: rgba(255, 255, 255, 0.85);
	overflow-wrap: normal;
	word-break: normal;
	hyphens: none;
}

.oai-site .oai-flood-damage-policy__columns {
	display: grid;
	grid-template-columns: 1fr;
	width: 100%;
	min-width: 0;
	margin: 32px 0 0;
}

.oai-site .oai-flood-damage-policy__column {
	min-width: 0;
	padding: 24px 0;
	border-top: 1px solid rgba(255, 255, 255, 0.12);
}

.oai-site .oai-flood-damage-policy__column:first-child {
	padding-top: 0;
	border-top: none;
}

.oai-site .oai-flood-damage-policy__column-heading {
	position: relative;
	margin: 0 0 10px;
	padding-left: 20px;
	max-width: 100%;
	font-size: 1.0625rem;
	font-weight: 700;
	line-height: 1.35;
	color: var(--oai-color-white);
	overflow-wrap: normal;
	word-break: normal;
	hyphens: none;
}

.oai-site .oai-flood-damage-policy__column-heading::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.55em;
	width: 12px;
	height: 2px;
	background-color: var(--oai-color-cyan);
}

.oai-site .oai-flood-damage-policy__column-text {
	margin: 0;
	max-width: 100%;
	padding-left: 20px;
	font-size: 0.9375rem;
	line-height: 1.65;
	color: rgba(255, 255, 255, 0.8);
	overflow-wrap: normal;
	word-break: normal;
	hyphens: none;
}

.oai-site .oai-flood-damage-policy__link-wrap {
	margin: 40px 0 0;
	padding: 24px 0 0;
	max-width: 100%;
	font-size: 0.9375rem;
	line-height: 1.65;
	color: rgba(255, 255, 255, 0.85);
	border-top: 1px solid rgba(255, 255, 255, 0.12);
	overflow-wrap: normal;
	word-break: normal;
}

.oai-site .oai-flood-damage-policy__link {
	display: inline;
	max-width: 100%;
	font-size: 0.9375rem;
	line-height: 1.65;
	font-family: inherit;
	color: var(--oai-color-white);
	font-weight: 600;
	text-decoration: underline;
	text-decoration-color: var(--oai-color-cyan);
	text-decoration-thickness: 2px;
	text-underline-offset: 3px;
	transition: color var(--oai-transition-fast);
}

.oai-site .oai-flood-damage-policy__link:hover {
	color: var(--oai-color-cyan);
}

html[data-oai-input="keyboard"] .oai-site .oai-flood-damage-policy__link:focus-visible {
	outline: 2px solid var(--oai-color-cyan);
	outline-offset: 2px;
	border-radius: 2px;
}

@media (min-width: 768px) {
	.oai-site .oai-flood-damage-policy {
		padding: 72px 40px;
	}

	.oai-site .oai-flood-damage-policy__heading {
		font-size: 1.75rem;
	}

	.oai-site .oai-flood-damage-policy__lead {
		font-size: 1rem;
	}

	.oai-site .oai-flood-damage-policy__columns {
		grid-template-columns: 1fr 1fr;
		column-gap: 40px;
	}

	.oai-site .oai-flood-damage-policy__column {
		padding: 28px 0;
	}

	.oai-site .oai-flood-damage-policy__column:nth-child(odd) {
		padding-right: 40px;
		border-top: none;
		border-right: 1px solid rgba(255, 255, 255, 0.12);
	}

	.oai-site .oai-flood-damage-policy__column:nth-child(even) {
		padding-left: 40px;
		border-top: none;
	}

	.oai-site .oai-flood-damage-policy__column:nth-child(1),
	.oai-site .oai-flood-damage-policy__column:nth-child(2) {
		padding-top: 0;
		border-bottom: 1px solid rgba(255, 255, 255, 0.12);
	}

	.oai-site .oai-flood-damage-policy__column:nth-child(3),
	.oai-site .oai-flood-damage-policy__column:nth-child(4) {
		padding-bottom: 0;
	}
}

@media (min-width: 1200px) {
	.oai-site .oai-flood-damage-policy__columns {
		grid-template-columns: repeat(4, 1fr);
		column-gap: 32px;
	}

	.oai-site .oai-flood-damage-policy__column {
		padding: 0 32px;
		border-bottom: none;
		border-right: 1px solid rgba(255, 255, 255, 0.12);
	}

	.oai-site .oai-flood-damage-policy__column:first-child {
		padding-left: 0;
	}

	.oai-site .oai-flood-damage-policy__column:last-child {
		padding-right: 0;
		border-right: none;
	}
}

@media (max-width: 360px) {
	.oai-site .oai-flood-damage-policy {
		padding: 40px 16px;
	}
}

/* Sekcja 6: "Szkoda po powodzi moze siegac dalej niz widoczny slad na
   scianie". Powrot do jasnej kompozycji po granatowej Sekcji 5 - biale
   tlo (mocny kontrast z poprzednia sekcja, bez potrzeby dodatkowego
   podbarwienia). Jedyna sekcja tej strony z prawdziwa grafika
   (powodz-ukryte-skutki.webp, 1600x1200, proporcja 4/3) - asymetryczny
   uklad 46% grafika / 54% cztery otwarte obszary tekstowe, odmienny od
   Sekcji 2 (grid 2x2), Sekcji 3 (intro/lista) i Sekcji 4 (1+2+1).
   Gotowy asset ma juz wypalona etykiete "Widoczny poziom wody" i
   cyjanowa linie wskaznika - CELOWO brak jakiegokolwiek HTML/CSS
   overlaya nad grafika, zeby nie zdublowac komunikatu. Ten sam fix co
   przy Hero: .__image ustawia jawnie "height: auto" obok "aspect-ratio:
   4 / 3", bo width="1600" height="1200" w HTML bez tego dzialalyby jako
   definitywna wartosc prezentacyjna i rozciagalyby obraz pionowo. */

.oai-site .oai-flood-damage-hidden-effects {
	width: 100%;
	max-width: 100%;
	min-width: 0;
	box-sizing: border-box;
	padding: 56px 20px;
	background-color: var(--oai-color-white);
}

.oai-site .oai-flood-damage-hidden-effects__inner {
	width: 100%;
	max-width: var(--oai-container-width);
	min-width: 0;
	box-sizing: border-box;
	margin: 0 auto;
}

.oai-site .oai-flood-damage-hidden-effects__intro {
	min-width: 0;
	max-width: 680px;
	margin: 0 0 32px;
}

.oai-site .oai-flood-damage-hidden-effects__eyebrow {
	margin: 0 0 16px;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--oai-color-cyan);
}

.oai-site .oai-flood-damage-hidden-effects__heading {
	margin: 0 0 16px;
	max-width: 100%;
	font-size: 1.5rem;
	font-weight: 700;
	line-height: 1.25;
	color: var(--oai-color-navy);
	overflow-wrap: normal;
	word-break: normal;
	hyphens: none;
}

.oai-site .oai-flood-damage-hidden-effects__lead {
	margin: 0;
	max-width: 640px;
	font-size: 0.9375rem;
	line-height: 1.65;
	color: var(--oai-color-navy-muted);
	overflow-wrap: normal;
	word-break: normal;
	hyphens: none;
}

.oai-site .oai-flood-damage-hidden-effects__layout {
	display: flex;
	flex-direction: column;
	gap: 32px;
	width: 100%;
	min-width: 0;
}

.oai-site .oai-flood-damage-hidden-effects__visual {
	min-width: 0;
	max-width: 100%;
}

.oai-site .oai-flood-damage-hidden-effects__figure {
	margin: 0;
	width: 100%;
	max-width: 100%;
}

.oai-site .oai-flood-damage-hidden-effects__image {
	display: block;
	width: 100%;
	max-width: 100%;
	height: auto;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	object-position: center;
	border-radius: var(--oai-radius-m);
	border: 1px solid var(--oai-color-border);
}

.oai-site .oai-flood-damage-hidden-effects__areas {
	min-width: 0;
	max-width: 100%;
}

.oai-site .oai-flood-damage-hidden-effects__area {
	padding: 22px 0;
	border-top: 1px solid var(--oai-color-border);
}

.oai-site .oai-flood-damage-hidden-effects__area:first-child {
	padding-top: 0;
	border-top: none;
}

.oai-site .oai-flood-damage-hidden-effects__area-heading {
	position: relative;
	margin: 0 0 10px;
	padding-left: 20px;
	max-width: 100%;
	font-size: 1.0625rem;
	font-weight: 700;
	line-height: 1.35;
	color: var(--oai-color-navy);
	overflow-wrap: normal;
	word-break: normal;
	hyphens: none;
}

.oai-site .oai-flood-damage-hidden-effects__area-heading::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.55em;
	width: 12px;
	height: 2px;
	background-color: var(--oai-color-cyan);
}

.oai-site .oai-flood-damage-hidden-effects__area-text {
	margin: 0;
	max-width: 100%;
	padding-left: 20px;
	font-size: 0.9375rem;
	line-height: 1.65;
	color: var(--oai-color-navy-muted);
	overflow-wrap: normal;
	word-break: normal;
	hyphens: none;
}

@media (min-width: 768px) {
	.oai-site .oai-flood-damage-hidden-effects {
		padding: 72px 40px;
	}

	.oai-site .oai-flood-damage-hidden-effects__heading {
		font-size: 1.75rem;
	}

	.oai-site .oai-flood-damage-hidden-effects__lead {
		font-size: 1rem;
	}
}

@media (min-width: 1024px) {
	.oai-site .oai-flood-damage-hidden-effects__layout {
		flex-direction: row;
		align-items: flex-start;
		gap: 48px;
	}

	.oai-site .oai-flood-damage-hidden-effects__visual {
		flex: 0 1 46%;
	}

	.oai-site .oai-flood-damage-hidden-effects__areas {
		flex: 1 1 54%;
	}
}

@media (max-width: 360px) {
	.oai-site .oai-flood-damage-hidden-effects {
		padding: 40px 16px;
	}
}

/* Sekcja 7: "Co sprawdzic w kosztorysie po powodzi?" Jeden wspolny
   "arkusz kontroli" - piec wierszy, kazdy logicznie w trzech strefach
   (ETYKIETA | PYTANIE | WYJASNIENIE) zamiast piec osobnych kart. Tlo
   delikatnie chlodne (rgba(1, 2, 66, 0.02), ten sam token co Sekcja 2 i
   zamykajacy blok Sekcji 4), celowo odmienne od bialego tla Sekcji 6
   bezposrednio nad nia. Ukrywam wizualne pionowe kreski - separacja
   stref wynika wylacznie z CSS Grid (grid-template-areas, bez CSS
   order), typografii i spacingu, nie z renderowanych linii. Progresja
   ukladu: 1 kolumna (mobile, etykieta->pytanie->wyjasnienie w naturalnej
   kolejnosci DOM) -> 2 logiczne strefy od 768px (etykieta w lewej
   waskiej kolumnie, pytanie+wyjasnienie ulozone jedno nad drugim w
   prawej) -> 3 pelne strefy od 1024px. Link koncowy jawnie ustawia
   font-size/line-height bezposrednio na <a> (nie samo dziedziczenie),
   dokladnie ten sam fix co przy identycznym linku do
   /kosztorys-ubezpieczyciela/ juz zaakceptowanym w Sekcji 7 Zerwanego
   dachu - zapobiega historycznemu bugowi powiekszonych linkow inline. */

.oai-site .oai-flood-damage-estimate-review {
	width: 100%;
	max-width: 100%;
	min-width: 0;
	box-sizing: border-box;
	padding: 56px 20px;
	background-color: rgba(1, 2, 66, 0.02);
}

.oai-site .oai-flood-damage-estimate-review__inner {
	width: 100%;
	max-width: var(--oai-container-width);
	min-width: 0;
	box-sizing: border-box;
	margin: 0 auto;
}

.oai-site .oai-flood-damage-estimate-review__intro {
	min-width: 0;
	max-width: 680px;
}

.oai-site .oai-flood-damage-estimate-review__eyebrow {
	margin: 0 0 16px;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--oai-color-cyan);
}

.oai-site .oai-flood-damage-estimate-review__heading {
	margin: 0 0 16px;
	max-width: 100%;
	font-size: 1.5rem;
	font-weight: 700;
	line-height: 1.25;
	color: var(--oai-color-navy);
	overflow-wrap: normal;
	word-break: normal;
	hyphens: none;
}

.oai-site .oai-flood-damage-estimate-review__lead {
	margin: 0;
	max-width: 640px;
	font-size: 0.9375rem;
	line-height: 1.65;
	color: var(--oai-color-navy-muted);
	overflow-wrap: normal;
	word-break: normal;
	hyphens: none;
}

.oai-site .oai-flood-damage-estimate-review__sheet {
	width: 100%;
	min-width: 0;
	box-sizing: border-box;
	margin: 32px 0 0;
	border-top: 1px solid var(--oai-color-border);
}

.oai-site .oai-flood-damage-estimate-review__row {
	display: grid;
	grid-template-columns: 1fr;
	grid-template-areas:
		"label"
		"question"
		"explanation";
	row-gap: 8px;
	width: 100%;
	min-width: 0;
	box-sizing: border-box;
	padding: 24px 0;
	border-bottom: 1px solid var(--oai-color-border);
}

.oai-site .oai-flood-damage-estimate-review__row-label {
	grid-area: label;
	margin: 0;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--oai-color-navy-muted);
}

.oai-site .oai-flood-damage-estimate-review__row-question {
	grid-area: question;
	margin: 0;
	min-width: 0;
	max-width: 100%;
	font-size: 1.0625rem;
	font-weight: 700;
	line-height: 1.4;
	color: var(--oai-color-navy);
	overflow-wrap: normal;
	word-break: normal;
	hyphens: none;
}

.oai-site .oai-flood-damage-estimate-review__row-explanation {
	grid-area: explanation;
	margin: 0;
	min-width: 0;
	max-width: 100%;
	font-size: 0.9375rem;
	line-height: 1.65;
	color: var(--oai-color-navy-muted);
	overflow-wrap: normal;
	word-break: normal;
	hyphens: none;
}

.oai-site .oai-flood-damage-estimate-review__link-wrap {
	margin: 40px 0 0;
	max-width: 100%;
	font-size: 0.9375rem;
	line-height: 1.65;
	color: var(--oai-color-navy-muted);
	overflow-wrap: normal;
	word-break: normal;
}

.oai-site .oai-flood-damage-estimate-review__link {
	display: inline;
	max-width: 100%;
	font-size: 0.9375rem;
	line-height: 1.65;
	font-family: inherit;
	color: var(--oai-color-navy);
	font-weight: 600;
	text-decoration: underline;
	text-decoration-color: var(--oai-color-cyan);
	text-decoration-thickness: 2px;
	text-underline-offset: 3px;
	transition: color var(--oai-transition-fast);
}

.oai-site .oai-flood-damage-estimate-review__link:hover,
.oai-site .oai-flood-damage-estimate-review__link:focus-visible {
	color: var(--oai-color-cyan);
}

@media (min-width: 768px) {
	.oai-site .oai-flood-damage-estimate-review {
		padding: 72px 40px;
	}

	.oai-site .oai-flood-damage-estimate-review__heading {
		font-size: 1.75rem;
	}

	.oai-site .oai-flood-damage-estimate-review__lead {
		font-size: 1rem;
	}

	.oai-site .oai-flood-damage-estimate-review__row {
		grid-template-columns: 130px 1fr;
		grid-template-areas:
			"label question"
			"label explanation";
		column-gap: 24px;
		row-gap: 8px;
		padding: 28px 0;
	}

	.oai-site .oai-flood-damage-estimate-review__row-label {
		padding-top: 3px;
	}
}

@media (min-width: 1024px) {
	.oai-site .oai-flood-damage-estimate-review__row {
		grid-template-columns: 130px minmax(200px, 1fr) minmax(280px, 1.3fr);
		grid-template-areas: "label question explanation";
		column-gap: 32px;
		align-items: start;
	}
}

@media (max-width: 360px) {
	.oai-site .oai-flood-damage-estimate-review {
		padding: 40px 16px;
	}
}

/* Sekcja 8: "Kiedy warto dokladniej sprawdzic decyzje po powodzi?"
   Funkcja rozna od Sekcji 7 (kosztorys) - tu uzytkownik wybiera nastepny
   krok. Trzy pionowo ulozone bloki na kazdej szerokosci (bez zmiany
   kierunku flex miedzy breakpointami, wiec zero potrzeby CSS order):
   jasne intro -> jeden mocny granatowy modul 2365 (wlasny token navy
   projektu, nie nowy kolor) -> spokojna, wyraznie drugorzedna sciezka
   2366 ponizej, oddzielona subtelnym gornym separatorem. Modul 2365 NIE
   jest wycentrowany - zwykly blok z max-width, wyrownany do tej samej
   lewej osi co intro, celowo szerszy (ok. 65% kontenera) niz waskie
   intro (ok. 53% kontenera, max-width 680px - ten sam token uzywany w
   intro Sekcji 2/4/6/7 tej strony). CTA reuzywa systemowej klasy .oai-cta
   z modyfikatorem --inverse (bialy przycisk/granatowy tekst na
   granatowym tle) - dokladnie ten sam, juz zaakceptowany wzorzec co w
   analogicznej Sekcji 8 Zerwanego dachu. Link "Gotowego Odwolania"
   jawnie ustawia font-size/line-height identyczne z otaczajacym
   .__secondary-text (nie samo dziedziczenie) - ten sam sprawdzony fix,
   ktory zapobiega historycznemu bugowi powiekszonych linkow inline. */

.oai-site .oai-flood-damage-decision {
	width: 100%;
	max-width: 100%;
	min-width: 0;
	box-sizing: border-box;
	padding: 56px 20px;
	background-color: var(--oai-color-white);
}

.oai-site .oai-flood-damage-decision__inner {
	width: 100%;
	max-width: var(--oai-container-width);
	min-width: 0;
	box-sizing: border-box;
	margin: 0 auto;
}

.oai-site .oai-flood-damage-decision__intro {
	min-width: 0;
	max-width: 680px;
	margin: 0 0 40px;
}

.oai-site .oai-flood-damage-decision__eyebrow {
	margin: 0 0 16px;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--oai-color-cyan);
}

.oai-site .oai-flood-damage-decision__heading {
	margin: 0 0 16px;
	max-width: 100%;
	font-size: 1.5rem;
	font-weight: 700;
	line-height: 1.25;
	color: var(--oai-color-navy);
	overflow-wrap: normal;
	word-break: normal;
	hyphens: none;
}

.oai-site .oai-flood-damage-decision__lead {
	margin: 0;
	max-width: 620px;
	font-size: 0.9375rem;
	line-height: 1.65;
	color: var(--oai-color-navy-muted);
	overflow-wrap: normal;
	word-break: normal;
	hyphens: none;
}

.oai-site .oai-flood-damage-decision__panel {
	width: 100%;
	min-width: 0;
	max-width: 820px;
	box-sizing: border-box;
	padding: 36px 28px;
	background-color: var(--oai-color-navy);
	border-radius: var(--oai-radius-l);
}

.oai-site .oai-flood-damage-decision__panel-label {
	margin: 0 0 14px;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--oai-color-cyan);
}

.oai-site .oai-flood-damage-decision__panel-heading {
	margin: 0 0 12px;
	max-width: 100%;
	font-size: 1.3125rem;
	font-weight: 700;
	line-height: 1.3;
	color: var(--oai-color-white);
	overflow-wrap: normal;
	word-break: normal;
	hyphens: none;
}

.oai-site .oai-flood-damage-decision__panel-body {
	margin: 0 0 28px;
	max-width: 100%;
	font-size: 0.9375rem;
	line-height: 1.65;
	color: rgba(255, 255, 255, 0.85);
	overflow-wrap: normal;
	word-break: normal;
	hyphens: none;
}

.oai-site .oai-flood-damage-decision__cta--inverse {
	min-height: 48px;
	background: var(--oai-color-white);
	color: var(--oai-color-navy);
}

.oai-site .oai-flood-damage-decision__cta--inverse:hover,
html[data-oai-input="keyboard"] .oai-site .oai-flood-damage-decision__cta--inverse:focus-visible {
	box-shadow: 0 0 0 2px var(--oai-color-cyan);
}

.oai-site .oai-flood-damage-decision__panel-microcopy {
	margin: 16px 0 0;
	max-width: 100%;
	font-size: 0.8125rem;
	line-height: 1.5;
	color: rgba(255, 255, 255, 0.6);
	overflow-wrap: normal;
	word-break: normal;
}

.oai-site .oai-flood-damage-decision__secondary {
	width: 100%;
	max-width: 640px;
	min-width: 0;
	box-sizing: border-box;
	margin: 32px 0 0;
	padding: 24px 0 0;
	border-top: 1px solid var(--oai-color-border);
}

.oai-site .oai-flood-damage-decision__secondary-label {
	margin: 0 0 10px;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--oai-color-cyan);
}

.oai-site .oai-flood-damage-decision__secondary-text {
	margin: 0;
	max-width: 100%;
	font-size: 0.9375rem;
	line-height: 1.65;
	color: var(--oai-color-navy-muted);
	overflow-wrap: normal;
	word-break: normal;
}

.oai-site .oai-flood-damage-decision__link {
	display: inline;
	max-width: 100%;
	font-size: 0.9375rem;
	line-height: 1.65;
	font-family: inherit;
	color: var(--oai-color-navy);
	font-weight: 600;
	text-decoration: underline;
	text-decoration-color: var(--oai-color-cyan);
	text-decoration-thickness: 2px;
	text-underline-offset: 3px;
	transition: color var(--oai-transition-fast);
}

.oai-site .oai-flood-damage-decision__link:hover,
.oai-site .oai-flood-damage-decision__link:focus-visible {
	color: var(--oai-color-cyan);
}

@media (max-width: 480px) {
	.oai-site .oai-flood-damage-decision__cta--inverse {
		width: 100%;
	}
}

@media (min-width: 768px) {
	.oai-site .oai-flood-damage-decision {
		padding: 72px 40px;
	}

	.oai-site .oai-flood-damage-decision__heading {
		font-size: 1.75rem;
	}

	.oai-site .oai-flood-damage-decision__lead {
		font-size: 1rem;
	}

	.oai-site .oai-flood-damage-decision__panel {
		padding: 44px 40px;
	}
}

@media (max-width: 360px) {
	.oai-site .oai-flood-damage-decision {
		padding: 40px 16px;
	}

	.oai-site .oai-flood-damage-decision__panel {
		padding: 28px 20px;
	}
}

/* Sekcja 9: FAQ. Odwzorowanie 1:1 zaakceptowanego, wielokrotnie reuzywanego
   mechanizmu FAQ (.oai-roof-wind-damage-faq, page-roof-wind-damage.css /
   .oai-hail-damage-faq, page-hail-damage.css), ktory sam jest juz
   namespace'owana kopia pierwotnego mechanizmu uzywanego na
   /szkoda-calkowita/, /zanizone-odszkodowanie/, /odmowa-wyplaty-odszkodowania/
   i /kosztorys-ubezpieczyciela/. Zmieniono wylacznie namespace na
   .oai-flood-damage-faq, poniewaz page-flood-damage.css jest ladowany
   wylacznie na tej stronie - zrodlowy komponent pozostal nietkniety.
   Wszystkie wlasciwosci (typografia, odstepy, breakpointy 600/480/360px,
   mechanizm plus/minus, stan [open], focus-visible) sa identyczne ze
   zrodlem, celowo bez adaptacji do rem-based systemu pozostalych sekcji
   tej strony - spojnosc z innymi FAQ V2 ma tu pierwszenstwo.

   Natywne details/summary, plus/minus wylacznie CSS (dwa pseudo-elementy
   na summary tworzace pozioma i pionowa kreske = "+"; pionowa kreska
   znika przy [open], zostawiajac wylacznie pozioma = "-"), brak name
   (kilka odpowiedzi moze byc otwartych jednoczesnie), brak JavaScriptu,
   brak CTA - sekcja konczy sie lista pytan. */

.oai-site .oai-flood-damage-faq {
	width: 100%;
	max-width: 100%;
	min-width: 0;
	box-sizing: border-box;
	padding: 64px 32px;
	background: var(--oai-color-white);
}

.oai-site .oai-flood-damage-faq__inner {
	width: 100%;
	max-width: var(--oai-container-width);
	min-width: 0;
	box-sizing: border-box;
	margin: 0 auto;
}

.oai-site .oai-flood-damage-faq__intro {
	min-width: 0;
	max-width: 100%;
}

.oai-site .oai-flood-damage-faq__eyebrow {
	margin: 0 0 16px;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--oai-color-cyan);
}

.oai-site .oai-flood-damage-faq__title {
	margin: 0 0 20px;
	max-width: 100%;
	font-size: 1.875rem;
	font-weight: 700;
	line-height: 1.25;
	color: var(--oai-color-navy);
	overflow-wrap: normal;
	word-break: normal;
	hyphens: none;
}

.oai-site .oai-flood-damage-faq__lead {
	margin: 0;
	max-width: 640px;
	font-size: 1.0625rem;
	line-height: 1.6;
	color: var(--oai-color-navy-muted);
	overflow-wrap: normal;
	word-break: normal;
	hyphens: none;
}

.oai-site .oai-flood-damage-faq__list {
	margin: 32px 0 0;
	max-width: 960px;
	min-width: 0;
	border-top: 1px solid var(--oai-color-border);
}

.oai-site .oai-flood-damage-faq__item {
	border-bottom: 1px solid var(--oai-color-border);
	transition: background-color var(--oai-transition-fast), border-color var(--oai-transition-fast);
}

.oai-site .oai-flood-damage-faq__item[open] {
	background: rgba(33, 225, 253, 0.05);
	border-bottom-color: var(--oai-color-cyan);
}

.oai-site .oai-flood-damage-faq__question {
	position: relative;
	display: flex;
	align-items: center;
	min-height: 64px;
	max-width: 100%;
	padding: 18px 40px 18px 0;
	color: var(--oai-color-navy);
	font-weight: 700;
	font-size: 17px;
	line-height: 1.4;
	cursor: pointer;
	list-style: none;
	overflow-wrap: normal;
	word-break: normal;
}

.oai-site .oai-flood-damage-faq__question::-webkit-details-marker {
	display: none;
}

.oai-site .oai-flood-damage-faq__question:focus-visible {
	outline: none;
}

html[data-oai-input="keyboard"] .oai-site .oai-flood-damage-faq__question:focus-visible {
	outline: 2px solid var(--oai-color-cyan);
	outline-offset: -2px;
}

.oai-site .oai-flood-damage-faq__question::before,
.oai-site .oai-flood-damage-faq__question::after {
	content: "";
	position: absolute;
	top: 50%;
	right: 2px;
	background: var(--oai-color-cyan);
}

.oai-site .oai-flood-damage-faq__question::before {
	width: 14px;
	height: 2px;
	margin-top: -1px;
}

.oai-site .oai-flood-damage-faq__question::after {
	right: 8px;
	width: 2px;
	height: 14px;
	margin-top: -7px;
}

.oai-site .oai-flood-damage-faq__item[open] .oai-flood-damage-faq__question::after {
	opacity: 0;
}

.oai-site .oai-flood-damage-faq__answer {
	margin: 0;
	max-width: 640px;
	padding: 0 40px 24px 0;
	color: var(--oai-color-navy-muted);
	font-size: 15px;
	line-height: 1.65;
	overflow-wrap: normal;
	word-break: normal;
}

@media (max-width: 600px) {
	.oai-site .oai-flood-damage-faq {
		padding: 48px 24px;
	}

	.oai-site .oai-flood-damage-faq__question {
		min-height: 52px;
		padding: 14px 32px 14px 0;
	}

	.oai-site .oai-flood-damage-faq__answer {
		padding-right: 0;
	}
}

@media (max-width: 480px) {
	.oai-site .oai-flood-damage-faq {
		padding: 40px 18px;
	}

	.oai-site .oai-flood-damage-faq__title {
		font-size: 1.75rem;
		line-height: 1.12;
	}
}

@media (max-width: 360px) {
	.oai-site .oai-flood-damage-faq {
		padding: 36px 16px;
	}
}

/* Sekcja 10: koncowe CTA do Gotowego Odwolania 2366. Pelnoszerokosciowy
   granatowy pas w tym samym tokenie i tej samej progresji paddingu co
   pozostale pelnoszerokosciowe granatowe moduly tej strony (Sekcja 5:
   56/20 -> 72/40 @768px -> 40/16 @360px). Po kontroli wizualnej
   wyrownanie zmieniono na wycentrowane, zgodnie z zaakceptowanym
   wzorcem final-cta Zerwanego dachu/Gradobicia (page-roof-wind-
   damage.css, page-hail-damage.css): .__content dostaje
   max-width: 780px, margin: 0 auto i text-align: center - dokladnie
   ta sama wartosc max-width co u zrodla, bez uzasadnienia do
   odstepstwa. CTA reuzywa systemowej klasy .oai-cta (inline-flex) z
   modyfikatorem --inverse (bialy przycisk/granatowy tekst na
   granatowym tle) - centrowanie przycisku wynika z text-align: center
   na rodzicu, bez dodatkowego wrappera. */

.oai-site .oai-flood-damage-final-cta {
	width: 100%;
	max-width: 100%;
	min-width: 0;
	box-sizing: border-box;
	padding: 56px 20px;
	background-color: var(--oai-color-navy);
}

.oai-site .oai-flood-damage-final-cta__inner {
	width: 100%;
	max-width: var(--oai-container-width);
	min-width: 0;
	box-sizing: border-box;
	margin: 0 auto;
}

.oai-site .oai-flood-damage-final-cta__content {
	min-width: 0;
	max-width: 780px;
	margin: 0 auto;
	text-align: center;
}

.oai-site .oai-flood-damage-final-cta__eyebrow {
	margin: 0 0 16px;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--oai-color-cyan);
}

.oai-site .oai-flood-damage-final-cta__title {
	margin: 0 0 16px;
	max-width: 100%;
	font-size: 1.5rem;
	font-weight: 700;
	line-height: 1.25;
	color: var(--oai-color-white);
	overflow-wrap: normal;
	word-break: normal;
	hyphens: none;
}

.oai-site .oai-flood-damage-final-cta__lead {
	margin: 0 0 28px;
	max-width: 100%;
	font-size: 0.9375rem;
	line-height: 1.65;
	color: rgba(255, 255, 255, 0.85);
	overflow-wrap: normal;
	word-break: normal;
	hyphens: none;
}

.oai-site .oai-flood-damage-final-cta__cta--inverse {
	min-height: 48px;
	background: var(--oai-color-white);
	color: var(--oai-color-navy);
}

.oai-site .oai-flood-damage-final-cta__cta--inverse:hover,
html[data-oai-input="keyboard"] .oai-site .oai-flood-damage-final-cta__cta--inverse:focus-visible {
	box-shadow: 0 0 0 2px var(--oai-color-cyan);
}

.oai-site .oai-flood-damage-final-cta__note {
	margin: 16px 0 0;
	max-width: 100%;
	font-size: 0.8125rem;
	line-height: 1.5;
	color: rgba(255, 255, 255, 0.6);
	overflow-wrap: normal;
	word-break: normal;
	hyphens: none;
}

@media (max-width: 480px) {
	.oai-site .oai-flood-damage-final-cta__cta--inverse {
		width: 100%;
	}
}

@media (min-width: 768px) {
	.oai-site .oai-flood-damage-final-cta {
		padding: 72px 40px;
	}

	.oai-site .oai-flood-damage-final-cta__title {
		font-size: 1.75rem;
	}

	.oai-site .oai-flood-damage-final-cta__lead {
		font-size: 1rem;
	}
}

@media (max-width: 360px) {
	.oai-site .oai-flood-damage-final-cta {
		padding: 40px 16px;
	}
}