/* ==========================================================================
   Naprawy Okien – style motywu
   Jasne tło, szerokie mocne nagłówki (Archivo 125%), ciepła czerń + rdzawy pomarańcz,
   zaokrąglone karty i przyciski, animacje przy przewijaniu (wyłączane przy ograniczeniu ruchu).
   ========================================================================== */

@font-face {
	font-family: "Archivo";
	src: url("../fonts/archivo-latin-ext.woff2") format("woff2-variations"), url("../fonts/archivo-latin-ext.woff2") format("woff2");
	font-weight: 100 900;
	font-stretch: 62% 125%;
	font-style: normal;
	font-display: swap;
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
	font-family: "Archivo";
	src: url("../fonts/archivo-latin.woff2") format("woff2-variations"), url("../fonts/archivo-latin.woff2") format("woff2");
	font-weight: 100 900;
	font-stretch: 62% 125%;
	font-style: normal;
	font-display: swap;
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
	--tlo: #fff;
	--tlo-2: #f4f2f0;
	--tlo-3: #e9e5e1;
	--kamien: #a4968c;
	--ciemny: #1b1b1b;
	--ciemny-2: #4b423e;
	--szary: #6f6560;
	--linia: #e4ded9;
	--akcent: #c84a1b;
	--akcent-mocny: #ff6a13;
	--akcent-tlo: #fbe9e1;

	--czcionka: "Archivo", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	--szeroki: 125%;

	--r-s: 12px;
	--r: 20px;
	--r-l: 28px;
	--cien: 0 1px 2px rgba(27, 27, 27, .06), 0 12px 32px -12px rgba(27, 27, 27, .18);
	--cien-duzy: 0 2px 6px rgba(27, 27, 27, .06), 0 30px 60px -24px rgba(27, 27, 27, .35);

	--kontener: 1180px;
	--margines: clamp(16px, 4vw, 32px);
	--odstep: clamp(64px, 9vw, 128px);
	--wysokosc-naglowka: 72px;
	--ruch: cubic-bezier(.2, .7, .2, 1);
}

/* ---------- Podstawy ---------- */

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

html {
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
	scroll-behavior: smooth;
	scroll-padding-top: calc(var(--wysokosc-naglowka) + 16px);
}

body {
	margin: 0;
	background: var(--tlo);
	color: var(--ciemny);
	font-family: var(--czcionka);
	font-size: 1.0625rem;
	line-height: 1.6;
	text-rendering: optimizeLegibility;
	-webkit-font-smoothing: antialiased;
}

img, svg, video, iframe { max-width: 100%; }
img { height: auto; display: block; }

a { color: var(--akcent); text-underline-offset: .18em; text-decoration-thickness: 1px; }
a:hover { color: var(--ciemny); }

:focus-visible { outline: 3px solid var(--akcent-mocny); outline-offset: 3px; border-radius: 4px; }

h1, h2, h3, h4, h5, h6 {
	margin: 0;
	font-weight: 800;
	line-height: 1.08;
	letter-spacing: -.01em;
	text-wrap: balance;
}

p { margin: 0 0 1em; }

.akcent { color: var(--akcent); }

.sr {
	position: absolute !important;
	width: 1px; height: 1px;
	padding: 0; margin: -1px;
	overflow: hidden; clip: rect(0 0 0 0);
	white-space: nowrap; border: 0;
}

.pomin {
	position: absolute; left: 16px; top: -100px; z-index: 100;
	padding: 12px 18px; border-radius: 999px; background: var(--ciemny); color: var(--tlo);
}
.pomin:focus { top: 16px; }

.kontener {
	width: 100%;
	max-width: calc(var(--kontener) + 2 * var(--margines));
	margin-inline: auto;
	padding-inline: var(--margines);
}
.kontener--waski { max-width: calc(760px + 2 * var(--margines)); }

.ikona { width: 1.15em; height: 1.15em; flex: none; }

/* ---------- Animacje przy przewijaniu ---------- */

.js [data-pokaz] {
	opacity: 0;
	transform: translateY(28px);
	transition: opacity .8s var(--ruch), transform .8s var(--ruch);
	transition-delay: var(--opoznienie, 0s);
}
.js [data-pokaz].widoczne { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	.js [data-pokaz] { opacity: 1; transform: none; transition: none; }
	*, *::before, *::after { animation-duration: .001s !important; animation-iteration-count: 1 !important; transition-duration: .001s !important; }
}

/* ---------- Przyciski, odznaki, etykiety ---------- */

.przycisk {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: .55em;
	min-height: 48px;
	padding: .7em 1.5em;
	border: 1.5px solid transparent;
	border-radius: 999px;
	font: inherit;
	font-weight: 700;
	font-size: .975rem;
	line-height: 1.1;
	text-decoration: none;
	white-space: nowrap;
	cursor: pointer;
	transition: background-color .2s, color .2s, border-color .2s, transform .2s var(--ruch), box-shadow .2s;
}
.przycisk:hover { transform: translateY(-2px); }
.przycisk:active { transform: translateY(0); }
.przycisk--ciemny { background: var(--ciemny); color: var(--tlo); }
.przycisk--ciemny:hover { background: #000; color: var(--tlo); box-shadow: 0 10px 24px -10px rgba(27, 27, 27, .6); }
.przycisk--akcent { background: var(--akcent); color: var(--tlo); }
.przycisk--akcent:hover { background: #a93b12; color: var(--tlo); box-shadow: 0 10px 24px -10px rgba(200, 74, 27, .7); }
.przycisk--obrys { border-color: var(--ciemny); color: var(--ciemny); background: transparent; }
.przycisk--obrys:hover { background: var(--ciemny); color: var(--tlo); }
.przycisk--duzy { min-height: 56px; padding-inline: 1.8em; font-size: 1.0625rem; }
.przycisk--maly { min-height: 40px; padding: .5em 1.15em; font-size: .9rem; }
.przycisk--pelny { width: 100%; }
.przycisk .nr { font-variant-numeric: tabular-nums; }
.przycisk .ikona { transition: transform .2s var(--ruch); }
.przycisk:hover .ikona-strzalka, .przycisk:hover svg:last-child:not(:first-child) { transform: translateX(3px); }

.odznaki { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 28px; padding: 0; list-style: none; }
.odznaka {
	display: inline-flex; align-items: center; gap: .45em;
	margin: 0; padding: 8px 14px;
	border-radius: 12px;
	background: var(--tlo); color: var(--ciemny);
	box-shadow: var(--cien);
	font-size: .875rem; line-height: 1.2;
}
.odznaka .ikona { color: var(--akcent); }
.odznaka--ciemna { background: var(--ciemny); color: #e9e2dd; }
.odznaka--ciemna strong { color: var(--tlo); font-size: 1rem; }
.odznaka--akcent { background: var(--akcent); color: var(--tlo); font-weight: 700; font-size: .8rem; letter-spacing: .06em; text-transform: uppercase; padding: 5px 10px; border-radius: 6px; box-shadow: none; }

.etykieta {
	display: inline-block;
	margin: 0 0 14px;
	font-size: .78rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
	color: var(--akcent);
}
.etykieta--jasna { color: var(--tlo); opacity: .85; }

.link-strzalka {
	display: inline-flex; align-items: center; gap: .45em;
	color: var(--ciemny); font-weight: 700; text-decoration: none;
}
.link-strzalka .ikona { transition: transform .2s var(--ruch); color: var(--akcent); }
.link-strzalka:hover { color: var(--akcent); }
.link-strzalka:hover .ikona { transform: translateX(4px); }

/* ---------- Nagłówek ---------- */

.naglowek {
	position: sticky; top: 0; z-index: 50;
	border-bottom: 1px solid transparent;
	transition: box-shadow .3s, border-color .3s;
}
/* Rozmycie na osobnej warstwie: backdrop-filter na samym nagłówku przycinałby menu mobilne (position: fixed) do jego wysokości. */
.naglowek::before {
	content: ""; position: absolute; inset: 0; z-index: -1;
	background: rgba(244, 242, 240, .86);
	-webkit-backdrop-filter: saturate(1.4) blur(14px);
	backdrop-filter: saturate(1.4) blur(14px);
}
.admin-bar .naglowek { top: 32px; }
@media (max-width: 782px) { .admin-bar .naglowek { top: 0; } }
.naglowek--przewiniety { border-bottom-color: var(--linia); box-shadow: 0 10px 30px -20px rgba(27, 27, 27, .45); }
.naglowek__wnetrze { display: flex; align-items: center; gap: 28px; min-height: var(--wysokosc-naglowka); }

.logo { display: block; flex: none; }
.logo__obraz { width: auto; height: 48px; transition: transform .3s var(--ruch); }
.logo:hover .logo__obraz { transform: rotate(-2deg) scale(1.03); }
.logo__tekst { font-weight: 800; font-stretch: var(--szeroki); font-size: 1.2rem; color: var(--ciemny); }

.naglowek__akcje { display: flex; gap: 10px; margin-left: auto; }

.naglowek__przelacznik {
	display: none;
	width: 46px; height: 46px; margin-left: auto;
	align-items: center; justify-content: center;
	border: 0; border-radius: 50%;
	background: var(--ciemny); color: var(--tlo); cursor: pointer;
}
.naglowek__przelacznik span { display: inline-flex; }
.naglowek__przelacznik .zamkniete { display: none; }
.menu-otwarte .naglowek__przelacznik .otwarte { display: none; }
.menu-otwarte .naglowek__przelacznik .zamkniete { display: inline-flex; }

/* Menu – komputer */
.nawigacja .menu { display: flex; align-items: center; gap: 2px; margin: 0; padding: 0; list-style: none; }
.nawigacja .menu > li { position: relative; display: flex; align-items: center; }
.nawigacja .menu > li > a,
.menu__rozwin--tekst {
	position: relative;
	display: inline-flex; align-items: center; gap: .3em;
	padding: 10px 12px;
	border: 0; border-radius: 999px; background: none;
	font: inherit; font-weight: 600; font-size: .95rem;
	color: var(--ciemny); text-decoration: none; cursor: pointer;
	transition: background-color .2s;
}
.nawigacja .menu > li > a:hover,
.menu__rozwin--tekst:hover,
.menu__rozwin--tekst[aria-expanded="true"] { background: var(--tlo-3); color: var(--ciemny); }
.nawigacja .current-menu-item > a,
.nawigacja .current-menu-ancestor > .menu__rozwin--tekst { color: var(--akcent); }

.menu__rozwin { border: 0; background: none; padding: 10px 6px; cursor: pointer; color: inherit; }
.menu__rozwin::after,
.menu__rozwin--tekst::after {
	content: ""; width: 6px; height: 6px; margin-left: 4px;
	border-right: 1.8px solid currentColor; border-bottom: 1.8px solid currentColor;
	transform: translateY(-2px) rotate(45deg);
	transition: transform .25s var(--ruch);
}
.menu__rozwin[aria-expanded="true"]::after { transform: translateY(2px) rotate(-135deg); }

.nawigacja .sub-menu {
	position: absolute; top: calc(100% + 10px); left: -8px; z-index: 10;
	min-width: 320px; margin: 0; padding: 10px;
	list-style: none;
	background: var(--tlo);
	border: 1px solid var(--linia); border-radius: var(--r);
	box-shadow: var(--cien-duzy);
	opacity: 0; visibility: hidden; transform: translateY(-6px) scale(.98); transform-origin: top left;
	transition: opacity .2s, transform .25s var(--ruch), visibility 0s .25s;
}
.menu__rozwin[aria-expanded="true"] + .sub-menu,
.nawigacja .menu > li:focus-within > .sub-menu {
	opacity: 1; visibility: visible; transform: none; transition-delay: 0s;
}
@media (hover: hover) and (min-width: 1100px) {
	.nawigacja .menu > li:hover > .sub-menu { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
	.nawigacja .menu > li.menu-item-has-children::after { content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 12px; }
}
.nawigacja .sub-menu a {
	display: block; padding: 10px 14px; border-radius: var(--r-s);
	color: var(--ciemny); text-decoration: none; font-weight: 500; line-height: 1.35; font-size: .95rem;
	transition: background-color .15s, padding-left .2s var(--ruch);
}
.nawigacja .sub-menu a:hover,
.nawigacja .sub-menu .current-menu-item > a { background: var(--tlo-2); color: var(--akcent); padding-left: 18px; }

.nawigacja__akcje { display: none; }

/* Menu – telefon i tablet */
@media (max-width: 1099px) {
	.naglowek__przelacznik { display: inline-flex; }
	.naglowek__akcje { display: none; }
	.nawigacja {
		position: fixed; inset: var(--wysokosc-naglowka) 0 0 0; z-index: 40;
		overflow-y: auto; overscroll-behavior: contain;
		padding: 12px var(--margines) 120px;
		background: var(--tlo-2);
		visibility: hidden; opacity: 0; transform: translateY(-10px);
		transition: opacity .25s, transform .3s var(--ruch), visibility 0s .3s;
	}
	.admin-bar .nawigacja { top: calc(var(--wysokosc-naglowka) + 46px); }
	.menu-otwarte .nawigacja { visibility: visible; opacity: 1; transform: none; transition-delay: 0s; }
	.menu-otwarte body { overflow: hidden; }
	.nawigacja .menu { flex-direction: column; align-items: stretch; gap: 0; }
	.nawigacja .menu > li { flex-wrap: wrap; border-bottom: 1px solid var(--linia); }
	.nawigacja .menu > li > a,
	.menu__rozwin--tekst {
		flex: 1; justify-content: space-between; padding: 18px 4px; border-radius: 0;
		font-size: 1.35rem; font-weight: 800; font-stretch: 112%;
	}
	.nawigacja .menu > li > a:hover, .menu__rozwin--tekst:hover, .menu__rozwin--tekst[aria-expanded="true"] { background: none; }
	.nawigacja .sub-menu {
		position: static; width: 100%; min-width: 0; padding: 0 0 14px;
		border: 0; border-radius: 0; box-shadow: none; background: transparent;
		display: none; opacity: 1; visibility: visible; transform: none;
	}
	.menu__rozwin[aria-expanded="true"] + .sub-menu { display: block; }
	.nawigacja .sub-menu a { padding: 11px 14px; }
	.nawigacja__akcje { display: grid; gap: 10px; margin-top: 28px; }
	.nawigacja__akcje .przycisk { min-height: 56px; }
}
@media (max-width: 600px) {
	:root { --wysokosc-naglowka: 64px; }
	.logo__obraz { height: 40px; }
}

/* ---------- Sekcje ---------- */

.sekcja { padding-block: var(--odstep); }
.sekcja--bez-gory { padding-top: 0; }
.sekcja--szara { background: var(--tlo-2); }
.sekcja + .sekcja:not(.sekcja--szara) { padding-top: 0; }

.sekcja__glowka { max-width: 760px; margin-bottom: clamp(32px, 5vw, 56px); }
.sekcja__glowka--srodek { margin-inline: auto; text-align: center; }
.sekcja__glowka--z-linkiem { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 16px 32px; max-width: none; }
.sekcja__tytul {
	font-size: clamp(1.9rem, 1.1rem + 2.9vw, 3.2rem);
	font-stretch: var(--szeroki);
	font-weight: 850;
	line-height: 1.02;
	letter-spacing: -.025em;
}
.sekcja__wstep { margin: 16px 0 0; color: var(--szary); font-size: 1.125rem; }
.sekcja__dalej { margin: 32px 0 0; }

/* ---------- Pierwszy ekran ---------- */

.hero { position: relative; padding-block: clamp(40px, 7vw, 104px) clamp(48px, 7vw, 96px); overflow: hidden; }
.hero::before {
	/* delikatna siatka „szprosów” w tle */
	content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
	background:
		linear-gradient(var(--tlo-2) 1px, transparent 1px) 0 0 / 64px 64px,
		linear-gradient(90deg, var(--tlo-2) 1px, transparent 1px) 0 0 / 64px 64px;
	-webkit-mask-image: radial-gradient(ellipse 70% 60% at 70% 40%, #000 20%, transparent 75%);
	mask-image: radial-gradient(ellipse 70% 60% at 70% 40%, #000 20%, transparent 75%);
}
.hero__siatka { display: grid; gap: 48px; align-items: center; }
@media (min-width: 960px) {
	.hero__siatka { grid-template-columns: minmax(0, .88fr) minmax(0, 1.12fr); gap: 56px; }
}
@media (min-width: 1300px) { .karuzela { margin-right: -72px; } }

.hero__tytul {
	font-size: clamp(2.35rem, .9rem + 5.1vw, 4.7rem);
	font-stretch: var(--szeroki);
	font-weight: 900;
	line-height: .98;
	letter-spacing: -.035em;
	margin-bottom: 26px;
}
.hero__tytul .akcent { display: block; }
.hero__wstep { max-width: 33em; font-size: clamp(1.0625rem, 1rem + .35vw, 1.2rem); color: var(--ciemny-2); margin-bottom: 36px; }
.hero__akcje { display: flex; flex-wrap: wrap; gap: 12px; }
@media (max-width: 480px) { .hero__akcje .przycisk { width: 100%; } }

/* Karuzela zdjęć */
.karuzela { position: relative; }
.karuzela__okno {
	position: relative;
	aspect-ratio: 5 / 4;
	padding: 12px;
	border: 1px solid var(--linia); border-radius: var(--r-l);
	background: var(--tlo);
	box-shadow: var(--cien-duzy);
	overflow: hidden;
}
.karuzela__slajd {
	position: absolute; inset: 12px; margin: 0;
	border-radius: calc(var(--r-l) - 10px); overflow: hidden;
	opacity: 0; transform: scale(1.04);
	transition: opacity .9s var(--ruch), transform 6s linear;
}
.karuzela__slajd.aktywny { opacity: 1; transform: scale(1); z-index: 1; }
.karuzela__slajd img { width: 100%; height: 100%; object-fit: cover; }
.karuzela__podpis {
	position: absolute; z-index: 2; left: 28px; bottom: 28px; margin: 0;
	display: inline-flex; align-items: center; gap: .45em;
	padding: 9px 14px; border-radius: 12px;
	background: rgba(255, 255, 255, .92); color: var(--ciemny);
	font-size: .875rem; font-weight: 600;
	box-shadow: var(--cien);
}
.karuzela__podpis .ikona { color: var(--akcent); }
.karuzela__kropki { display: flex; justify-content: center; gap: 8px; margin-top: 18px; }
.karuzela__kropka {
	width: 9px; height: 9px; padding: 0;
	border: 0; border-radius: 999px; background: var(--tlo-3);
	cursor: pointer; transition: width .35s var(--ruch), background-color .3s;
}
.karuzela__kropka[aria-current="true"] { width: 28px; background: var(--ciemny); }

/* ---------- Taśma z usługami ---------- */

.tasma {
	display: flex; overflow: hidden;
	padding-block: 22px;
	border-block: 1px solid var(--linia);
	-webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
	mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
}
.tasma__lista {
	display: flex; flex: none; gap: 0; margin: 0; padding: 0; list-style: none;
	animation: tasma 48s linear infinite;
}
.tasma:hover .tasma__lista { animation-play-state: paused; }
.tasma__lista li {
	display: inline-flex; align-items: center; white-space: nowrap;
	font-size: clamp(1rem, .9rem + .5vw, 1.35rem); font-weight: 800; font-stretch: var(--szeroki);
	color: var(--ciemny);
}
.tasma__lista li::after { content: ""; width: 10px; height: 10px; margin-inline: 34px; border-radius: 3px; background: var(--akcent); transform: rotate(45deg); }
@keyframes tasma { to { transform: translateX(-100%); } }

/* ---------- Szybka diagnoza ---------- */

.dobierz { position: relative; overflow: hidden; }
.dobierz::before {
	content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='72' height='72'%3E%3Crect x='8' y='8' width='56' height='56' rx='14' fill='%23f5f3f1'/%3E%3C/svg%3E");
	background-size: 72px 72px;
	background-position: center top;
	-webkit-mask-image: radial-gradient(ellipse 75% 80% at 50% 55%, transparent 45%, rgba(0, 0, 0, .7) 85%);
	mask-image: radial-gradient(ellipse 75% 80% at 50% 55%, transparent 45%, rgba(0, 0, 0, .7) 85%);
}
.dobierz + .sekcja { padding-top: var(--odstep); }
.dobierz__plansza {
	max-width: 900px; margin-inline: auto;
	padding: clamp(20px, 4vw, 40px);
	border-radius: var(--r-l);
	background: var(--tlo);
	border: 1px solid var(--linia);
	box-shadow: var(--cien-duzy);
}
.objawy { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin: 0 0 24px; padding: 0; list-style: none; }
.objaw {
	padding: 12px 18px;
	border: 1.5px solid var(--linia); border-radius: 999px;
	background: var(--tlo-2); color: var(--ciemny);
	font: inherit; font-size: .975rem; font-weight: 600; line-height: 1.25; text-align: center;
	cursor: pointer;
	transition: background-color .2s, border-color .2s, color .2s, transform .2s var(--ruch);
}
.objaw:hover { border-color: var(--ciemny); transform: translateY(-2px); }
.objaw[aria-pressed="true"] { background: var(--ciemny); border-color: var(--ciemny); color: var(--tlo); }
.dobierz__wynik { min-height: 120px; padding-top: 24px; border-top: 1px dashed var(--linia); text-align: center; }
.dobierz__puste { margin: 30px 0 0; color: var(--szary); }
.dobierz__wynik.wybrano .dobierz__puste { display: none; }
.wynik { animation: wynik .5s var(--ruch); }
@keyframes wynik { from { opacity: 0; transform: translateY(12px); } }
.wynik__etykieta { margin: 0 0 6px; font-size: .78rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--akcent); }
.wynik__nazwa { margin: 0 0 8px; font-size: clamp(1.6rem, 1.2rem + 1.6vw, 2.4rem); font-weight: 850; font-stretch: var(--szeroki); line-height: 1.05; }
.wynik__opis { max-width: 36em; margin: 0 auto 20px; color: var(--ciemny-2); }
.wynik__akcje { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }

/* ---------- Usługi ---------- */

.uslugi {
	display: grid; gap: 16px;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr));
	margin: 0; padding: 0; list-style: none;
}
.usluga {
	position: relative;
	display: flex; flex-direction: column;
	min-height: 250px;
	padding: 28px;
	border-radius: var(--r);
	background: var(--tlo-2);
	transition: background-color .3s, box-shadow .3s, transform .35s var(--ruch), opacity .8s var(--ruch);
}
.js .usluga[data-pokaz].widoczne:hover, .usluga:hover { background: var(--tlo); box-shadow: var(--cien-duzy); transform: translateY(-6px); }
.usluga__nr { position: absolute; top: 26px; right: 28px; font-size: .875rem; font-weight: 700; color: var(--szary); font-variant-numeric: tabular-nums; }
.usluga__nazwa { font-size: 1.45rem; font-stretch: 112%; margin: 28px 0 12px; padding-right: 32px; }
.usluga__nazwa a { color: var(--ciemny); text-decoration: none; }
.usluga__nazwa a::after { content: ""; position: absolute; inset: 0; border-radius: var(--r); }
.usluga__opis { color: var(--ciemny-2); font-size: 1rem; margin-bottom: 24px; }
.usluga__wiecej {
	margin-top: auto; align-self: flex-start;
	display: inline-flex; align-items: center; justify-content: center;
	width: 44px; height: 44px; border-radius: 50%;
	background: var(--tlo); color: var(--ciemny);
	transition: background-color .25s, color .25s, transform .35s var(--ruch);
}
.usluga:hover .usluga__wiecej { background: var(--akcent); color: var(--tlo); transform: rotate(-45deg); }
.usluga:focus-within { outline: 3px solid var(--akcent-mocny); outline-offset: 3px; }
@media (min-width: 980px) {
	.uslugi { grid-template-columns: repeat(3, 1fr); }
	.usluga--szeroka { grid-column: span 2; }
	.usluga--szeroka .usluga__nazwa { font-size: clamp(1.8rem, 1.2rem + 1.4vw, 2.4rem); font-stretch: var(--szeroki); }
	.usluga--szeroka .usluga__opis { font-size: 1.125rem; max-width: 30em; }
}
.usluga--szeroka { background: var(--akcent-tlo); }
.usluga--ciemna { background: var(--ciemny); color: #d9d0ca; }
.usluga--ciemna .usluga__nazwa { color: var(--tlo); margin-top: 0; }
.usluga--ciemna .usluga__opis { color: #cfc5bf; }
.js .usluga--ciemna[data-pokaz].widoczne:hover, .usluga--ciemna:hover { background: var(--ciemny); }
.usluga__przycisk { margin-top: auto; align-self: flex-start; }
.usluga__nazwa a:focus-visible { outline: none; }

/* ---------- Karty zakresu prac (nakładają się przy przewijaniu) ---------- */

.stos { position: relative; isolation: isolate; background: var(--ciemny); padding-block: var(--odstep); }
/* Słońce wpadające przez okno: ostre plamy światła z cieniem krzyża szprosów, powoli wędrujące jak słońce. */
.stos { overflow: clip; }
.stos::before,
.stos::after {
	content: ""; position: absolute; z-index: -1; pointer-events: none;
	width: min(560px, 52vw); aspect-ratio: .9;
	background:
		linear-gradient(90deg, transparent calc(50% - 7px), var(--ciemny) calc(50% - 7px) calc(50% + 7px), transparent calc(50% + 7px)),
		linear-gradient(0deg, transparent calc(50% - 7px), var(--ciemny) calc(50% - 7px) calc(50% + 7px), transparent calc(50% + 7px)),
		linear-gradient(160deg, rgba(255, 128, 60, .16), rgba(255, 106, 19, .07));
	transform-origin: 50% 0;
	animation: stos-slonce 26s ease-in-out infinite alternate;
}
.stos::before { left: -6%; top: 3%; }
.stos::after { right: -8%; top: 50%; width: min(480px, 46vw); animation-delay: -13s; }
@keyframes stos-slonce {
	from { transform: skewX(-16deg) skewY(4deg); }
	to   { transform: skewX(-30deg) skewY(7deg) translateX(4%); }
}
.stos .sekcja__tytul { color: var(--tlo); }
.stos__karty { display: grid; gap: 28px; }
.stos__karta {
	position: sticky;
	top: calc(var(--wysokosc-naglowka) + 24px + var(--i) * 18px);
	display: grid; gap: 0;
	border-radius: var(--r-l);
	background: var(--tlo);
	box-shadow: 0 -10px 40px -20px rgba(27, 27, 27, .45);
	overflow: hidden;
}
@media (min-width: 860px) {
	.stos__karta { grid-template-columns: .9fr 1.1fr; min-height: 440px; }
}
.stos__zdjecie { position: relative; min-height: 240px; }
.stos__zdjecie img { width: 100%; height: 100%; max-height: 320px; object-fit: cover; }
@media (min-width: 860px) {
	.stos__zdjecie img { position: absolute; inset: 0; max-height: none; }
}
.stos__tresc { padding: clamp(24px, 4vw, 52px); }
.stos__nr { margin: 0 0 10px; font-size: .875rem; font-weight: 700; color: var(--akcent); font-variant-numeric: tabular-nums; letter-spacing: .06em; }
.stos__tytul { font-size: clamp(1.6rem, 1.2rem + 1.5vw, 2.3rem); font-stretch: var(--szeroki); font-weight: 850; margin-bottom: 20px; }

.lista-ptaszki { margin: 0; padding: 0; list-style: none; }
.lista-ptaszki li { display: flex; gap: .7em; padding: 8px 0; line-height: 1.4; border-bottom: 1px solid var(--linia); }
.lista-ptaszki li:last-child { border-bottom: 0; }
.lista-ptaszki .ikona { color: var(--akcent); margin-top: .1em; }

/* ---------- Ciemny pas z telefonem ---------- */

.pas { position: relative; z-index: 2; background: var(--ciemny); color: #e9e2dd; overflow-x: clip; overflow-y: visible; }
.pas__wnetrze { display: grid; gap: 28px; align-items: center; min-height: 320px; padding-block: 56px; }
@media (min-width: 860px) { .pas__wnetrze { grid-template-columns: 1.2fr 1fr; } }
.pas__tytul { margin-top: 14px; font-size: clamp(1.7rem, 1.1rem + 2.2vw, 2.8rem); font-stretch: var(--szeroki); font-weight: 850; color: var(--tlo); line-height: 1.05; }
.pas__akcja { position: relative; display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 36px 0; text-align: center; }
.pas__numer { position: relative; z-index: 1; color: var(--tlo); text-decoration: none; font-size: clamp(1.6rem, 1.2rem + 1.8vw, 2.5rem); font-weight: 900; font-stretch: var(--szeroki); font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.pas__numer:hover { color: var(--akcent-mocny); }
.pas__akcja .przycisk { position: relative; z-index: 1; }
.pierscienie {
	position: absolute; left: 50%; top: 50%; z-index: 0;
	width: 440px; height: 440px; margin: -220px 0 0 -220px;
	border-radius: 50%;
	background: repeating-radial-gradient(circle, transparent 0 22px, rgba(255, 106, 19, .55) 23px 24px, transparent 25px 34px);
	-webkit-mask-image: radial-gradient(circle, transparent 26%, #000 34%, #000 55%, transparent 71%);
	mask-image: radial-gradient(circle, transparent 26%, #000 34%, #000 55%, transparent 71%);
	animation: pierscienie 6s var(--ruch) infinite;
}
.pierscienie::after {
	content: ""; position: absolute; inset: 0; border-radius: 50%;
	background: conic-gradient(from 0deg, transparent 0 70%, rgba(255, 106, 19, .5) 85%, transparent 100%);
	-webkit-mask-image: radial-gradient(circle, transparent 30%, #000 40%, transparent 70%);
	mask-image: radial-gradient(circle, transparent 30%, #000 40%, transparent 70%);
	animation: obrot 9s linear infinite;
}
@keyframes pierscienie { 0%, 100% { transform: scale(.96); opacity: .8; } 50% { transform: scale(1.04); opacity: 1; } }
@keyframes obrot { to { transform: rotate(360deg); } }

/* ---------- O nas + liczniki + zdjęcia ---------- */

.o-nas { display: grid; gap: 48px; align-items: center; }
@media (min-width: 960px) { .o-nas { grid-template-columns: 1fr 1fr; gap: 72px; } }
.o-nas__tekst p { color: var(--ciemny-2); max-width: 36em; }
.o-nas__tekst .sekcja__tytul { margin-bottom: 22px; }

.liczniki { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 32px 0; }
.liczniki div { padding: 18px; border-radius: var(--r); background: var(--tlo-2); }
.liczniki dd { margin: 0; order: -1; font-size: clamp(2rem, 1.4rem + 2vw, 3rem); font-weight: 900; font-stretch: var(--szeroki); line-height: 1; color: var(--ciemny); font-variant-numeric: tabular-nums; }
.liczniki dt { margin-top: 8px; font-size: .875rem; color: var(--szary); line-height: 1.3; }
.liczniki div { display: flex; flex-direction: column; }
@media (max-width: 480px) { .liczniki { grid-template-columns: 1fr; } .liczniki div { flex-direction: row-reverse; justify-content: space-between; align-items: center; } .liczniki dt { margin: 0; } }

.realizacje { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.realizacje__el { display: block; overflow: hidden; border-radius: var(--r); background: var(--tlo-2); }
.realizacje__el img { width: 100%; aspect-ratio: 1; object-fit: cover; transition: transform .6s var(--ruch); }
.realizacje__el:hover img { transform: scale(1.06); }
.realizacje { padding-bottom: 40px; }
.realizacje__el:nth-child(even) { position: relative; top: 40px; }

/* ---------- Karty wpisów ---------- */

.karty { display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); }
.karta {
	position: relative;
	display: flex; flex-direction: column;
	padding: 28px;
	border-radius: var(--r);
	background: var(--tlo);
	border: 1px solid var(--linia);
	transition: box-shadow .3s, transform .35s var(--ruch), border-color .3s, opacity .8s var(--ruch);
}
.sekcja--szara .karta { border-color: transparent; }
.karta:hover { box-shadow: var(--cien-duzy); transform: translateY(-6px); }
.karta__meta { font-size: .8125rem; color: var(--szary); margin-bottom: 14px; display: flex; gap: .5em; }
.karta__tytul { font-size: 1.3rem; font-stretch: 108%; line-height: 1.18; margin-bottom: 12px; }
.karta__tytul a { color: var(--ciemny); text-decoration: none; }
.karta__tytul a::after { content: ""; position: absolute; inset: 0; border-radius: var(--r); }
.karta:hover .karta__tytul a { color: var(--akcent); }
.karta__fragment { color: var(--ciemny-2); font-size: .975rem; margin: 0 0 20px; }
.karta__czytaj { margin-top: auto; display: inline-flex; align-items: center; gap: .4em; font-weight: 700; font-size: .925rem; }
.karta__czytaj .ikona { color: var(--akcent); transition: transform .25s var(--ruch); }
.karta:hover .karta__czytaj .ikona { transform: translateX(4px); }

/* ---------- Obszar działania ---------- */

.miejsca { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.miejsca a {
	display: inline-block; padding: 9px 16px;
	border-radius: 999px;
	background: var(--tlo-2); color: var(--ciemny);
	font-size: .9375rem; font-weight: 500; text-decoration: none;
	transition: background-color .2s, color .2s, transform .2s var(--ruch);
}
.miejsca a:hover { background: var(--ciemny); color: var(--tlo); transform: translateY(-2px); }

/* ---------- Zgłoszenie usterki ---------- */

.zgloszenie { padding-block: var(--odstep); background: var(--tlo-2); }
.zgloszenie__siatka { display: grid; gap: 20px; align-items: start; }
@media (min-width: 1000px) { .zgloszenie__siatka { grid-template-columns: 5fr 7fr; gap: 24px; } }

.zgloszenie__telefon {
	position: relative; overflow: hidden;
	padding: clamp(26px, 4vw, 44px);
	border-radius: var(--r-l);
	background: var(--ciemny); color: #d9d0ca;
}
@media (min-width: 1000px) { .zgloszenie__telefon { position: sticky; top: calc(var(--wysokosc-naglowka) + 24px); } }
.zgloszenie__telefon::after {
	content: ""; position: absolute; right: -120px; top: -120px; width: 300px; height: 300px; border-radius: 50%; pointer-events: none;
	background: repeating-radial-gradient(circle, transparent 0 18px, rgba(255, 106, 19, .35) 19px 20px, transparent 21px 28px);
	-webkit-mask-image: radial-gradient(circle, #000 30%, transparent 70%);
	mask-image: radial-gradient(circle, #000 30%, transparent 70%);
}
.zgloszenie__telefon .etykieta { color: var(--akcent-mocny); }
.zgloszenie__tytul { font-size: clamp(2rem, 1.3rem + 2.4vw, 3rem); font-stretch: var(--szeroki); font-weight: 900; line-height: 1; color: var(--tlo); margin-bottom: 16px; }
.zgloszenie__wstep { color: #cfc5bf; margin-bottom: 26px; }

.zgloszenie__numer {
	position: relative; z-index: 1;
	display: flex; align-items: center; gap: 16px;
	padding: 14px 22px 14px 14px;
	border-radius: 999px;
	background: var(--akcent); color: var(--tlo);
	text-decoration: none;
	transition: background-color .2s, transform .25s var(--ruch), box-shadow .25s;
}
.zgloszenie__numer:hover { background: #a93b12; color: var(--tlo); transform: translateY(-3px); box-shadow: 0 16px 30px -14px rgba(255, 106, 19, .7); }
.zgloszenie__numer-ikona {
	display: inline-flex; align-items: center; justify-content: center; flex: none;
	width: 52px; height: 52px; border-radius: 50%; background: var(--tlo); color: var(--akcent);
}
.zgloszenie__numer-ikona .ikona { width: 24px; height: 24px; }
.zgloszenie__numer:hover .zgloszenie__numer-ikona { animation: dzwonek .6s var(--ruch); }
@keyframes dzwonek { 20% { transform: rotate(-14deg); } 40% { transform: rotate(12deg); } 60% { transform: rotate(-8deg); } 80% { transform: rotate(4deg); } }
.zgloszenie__numer-opis { display: block; font-size: .8125rem; font-weight: 600; opacity: .85; }
.zgloszenie__numer-cyfry { display: block; font-size: clamp(1.35rem, 1.1rem + 1vw, 1.75rem); font-weight: 900; font-stretch: 112%; line-height: 1.1; font-variant-numeric: tabular-nums; white-space: nowrap; }

.zgloszenie__inne { margin: 18px 0 0; padding: 0; list-style: none; }
.zgloszenie__inne a {
	display: flex; align-items: center; gap: .6em; padding: 10px 2px;
	border-bottom: 1px solid #443b38;
	color: var(--tlo); text-decoration: none; font-weight: 600; font-variant-numeric: tabular-nums; word-break: break-word;
}
.zgloszenie__inne a .ikona { color: var(--akcent-mocny); }
.zgloszenie__inne a:hover { color: var(--akcent-mocny); }

.zgloszenie__wskazowki { margin-top: 28px; padding: 20px; border-radius: var(--r); background: #362e2b; }
.zgloszenie__wskazowki-tytul { margin: 0 0 10px; color: var(--tlo); font-weight: 700; }
.zgloszenie__wskazowki ol { margin: 0; padding-left: 1.3em; font-size: .9375rem; }
.zgloszenie__wskazowki li { padding: 3px 0; }
.zgloszenie__wskazowki li::marker { color: var(--akcent-mocny); font-weight: 700; }

.zgloszenie__formularz {
	padding: clamp(22px, 4vw, 44px);
	border-radius: var(--r-l);
	background: var(--tlo);
	box-shadow: var(--cien);
}
.zgloszenie__formularz-tytul { margin: 0 0 24px; font-size: 1.35rem; font-weight: 850; font-stretch: var(--szeroki); }

/* Formularz Contact Form 7 */
.wpcf7 .hidden-fields-container, .wpcf7 .screen-reader-response { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); border: 0; padding: 0; margin: 0; }
.zg-krok { margin: 0 0 28px; padding: 0 0 28px; border: 0; border-bottom: 1px solid var(--linia); min-width: 0; }
.zg-krok legend { display: flex; align-items: center; gap: 12px; padding: 0; margin-bottom: 16px; font-size: 1.15rem; font-weight: 800; font-stretch: 108%; }
.zg-nr {
	display: inline-flex; align-items: center; justify-content: center; flex: none;
	width: 32px; height: 32px; border-radius: 50%;
	background: var(--ciemny); color: var(--tlo); font-size: .9rem; font-weight: 800; font-stretch: 100%;
}
.zg-podpowiedz { margin: -8px 0 12px; font-size: .875rem; color: var(--szary); }

/* Kafelki wyboru (radio i checkbox) */
.zg-kafle { display: flex; flex-wrap: wrap; gap: 8px; }
.zg-kafle .wpcf7-list-item { margin: 0; }
.zg-kafle label {
	position: relative;
	display: inline-flex; align-items: center; gap: .5em;
	padding: 10px 16px;
	border: 1.5px solid var(--linia); border-radius: 999px;
	background: var(--tlo-2);
	font-size: .9375rem; font-weight: 600; line-height: 1.25;
	cursor: pointer; user-select: none;
	transition: background-color .2s, border-color .2s, color .2s, transform .2s var(--ruch);
}
.zg-kafle label:hover { border-color: var(--ciemny); }
.zg-kafle input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.zg-kafle label:has(input:checked) { background: var(--ciemny); border-color: var(--ciemny); color: var(--tlo); }
.zg-kafle label:has(input:checked)::before {
	content: ""; width: 8px; height: 14px; margin: -3px 2px 0 0;
	border-right: 2px solid var(--akcent-mocny); border-bottom: 2px solid var(--akcent-mocny);
	transform: rotate(45deg);
	animation: zaznacz .25s var(--ruch);
}
@keyframes zaznacz { from { transform: rotate(45deg) scale(.3); opacity: 0; } }
.zg-kafle label:has(input:focus-visible) { outline: 3px solid var(--akcent-mocny); outline-offset: 2px; }

.zg-pole { display: block; margin-top: 18px; }
.zg-etykieta { display: block; margin-bottom: 7px; font-size: .9375rem; font-weight: 700; }
.zg-opc { font-weight: 400; color: var(--szary); }
.zg-siatka { display: grid; gap: 0 16px; }
@media (min-width: 640px) { .zg-siatka { grid-template-columns: 1fr 1fr; } }
.zg-siatka .zg-pole:first-child, .zg-siatka .zg-pole:nth-child(2) { margin-top: 0; }
@media (max-width: 639px) { .zg-siatka .zg-pole:nth-child(2) { margin-top: 18px; } }

.wpcf7-form input[type="text"],
.wpcf7-form input[type="email"],
.wpcf7-form input[type="tel"],
.wpcf7-form textarea,
.szukaj input[type="search"] {
	width: 100%; min-height: 52px;
	padding: 13px 16px;
	border: 1.5px solid var(--linia); border-radius: var(--r-s);
	background: var(--tlo-2); color: var(--ciemny);
	font: inherit; font-size: 1rem;
	transition: border-color .2s, background-color .2s, box-shadow .2s;
}
.wpcf7-form textarea { min-height: 120px; height: 130px; resize: vertical; }
.wpcf7-form input::placeholder, .wpcf7-form textarea::placeholder { color: #9a908a; }
.wpcf7-form input:hover, .wpcf7-form textarea:hover { border-color: #cfc6bf; }
.wpcf7-form input:focus, .wpcf7-form textarea:focus, .szukaj input:focus {
	outline: 0; border-color: var(--ciemny); background: var(--tlo); box-shadow: 0 0 0 4px rgba(255, 106, 19, .22);
}

.wpcf7-form input[type="file"] {
	width: 100%; padding: 10px; border: 1.5px dashed #cfc6bf; border-radius: var(--r-s);
	background: var(--tlo-2); font: inherit; font-size: .9375rem; color: var(--szary); cursor: pointer;
}
.wpcf7-form input[type="file"]:hover { border-color: var(--ciemny); }
.wpcf7-form input[type="file"]::file-selector-button {
	margin-right: 14px; padding: 9px 16px;
	border: 0; border-radius: 999px; background: var(--ciemny); color: var(--tlo);
	font: inherit; font-weight: 700; font-size: .875rem; cursor: pointer;
}

.zg-wyslij { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; }
.wpcf7-form .wpcf7-submit {
	min-height: 58px; padding: .8em 2.2em;
	border: 0; border-radius: 999px;
	background: var(--akcent); color: var(--tlo);
	font: inherit; font-weight: 800; font-size: 1.0625rem; cursor: pointer;
	transition: background-color .2s, transform .2s var(--ruch), box-shadow .2s;
}
.wpcf7-form .wpcf7-submit:hover { background: #a93b12; transform: translateY(-2px); box-shadow: 0 14px 28px -12px rgba(200, 74, 27, .7); }
@media (max-width: 520px) { .wpcf7-form .wpcf7-submit { width: 100%; } }
.zg-info { margin: 0; font-size: .875rem; color: var(--szary); }
.zg-rodo { margin: 22px 0 0; font-size: .78rem; line-height: 1.5; color: var(--szary); }
.zg-rodo a { color: inherit; }

.wpcf7-not-valid-tip { display: block; margin-top: 6px; color: #a11d00; font-size: .875rem; font-weight: 600; }
.wpcf7-form .wpcf7-not-valid { border-color: #a11d00 !important; background: #fdf1ed !important; }
.wpcf7-form-control-wrap { display: block; }
.zg-kafle + .wpcf7-not-valid-tip, .wpcf7-form-control-wrap .wpcf7-not-valid-tip { margin-top: 8px; }

.wpcf7-response-output { margin: 20px 0 0; padding: 14px 18px; border-radius: var(--r-s); font-size: .9375rem; font-weight: 600; border: 0; }
.wpcf7-form.init .wpcf7-response-output,
.wpcf7-form.resetting .wpcf7-response-output,
.wpcf7-form.submitting .wpcf7-response-output { display: none; }
.wpcf7-form.sent .wpcf7-response-output { background: #e6f3e2; color: #1f5a1f; animation: wynik .5s var(--ruch); }
.wpcf7-form.invalid .wpcf7-response-output,
.wpcf7-form.unaccepted .wpcf7-response-output,
.wpcf7-form.payment-required .wpcf7-response-output,
.wpcf7-form.failed .wpcf7-response-output,
.wpcf7-form.aborted .wpcf7-response-output,
.wpcf7-form.spam .wpcf7-response-output { background: #fdeae4; color: #8a1c00; }
.wpcf7-spinner { display: none; }
.wpcf7-form.submitting .wpcf7-submit { opacity: .65; cursor: progress; }
.wpcf7-form.sent .zg-krok, .wpcf7-form.sent .zg-wyslij { opacity: .5; }
.grecaptcha-badge { visibility: hidden; }

/* ---------- Nagłówek podstrony ---------- */

.naglowek-strony { position: relative; padding-block: clamp(32px, 5vw, 72px) clamp(36px, 5vw, 72px); background: var(--ciemny); color: #fff; margin-bottom: clamp(40px, 6vw, 80px); overflow: hidden; }
.naglowek-strony .kontener { position: relative; z-index: 1; }

/* Okno w tle nagłówka: klamka obraca się w górę, prawe skrzydło się uchyla, po szybach przesuwa się odblask. */
.okno-tlo {
	position: absolute; z-index: 0; top: 22px; bottom: 22px; right: max(var(--margines), calc((100% - var(--kontener)) / 2));
	aspect-ratio: .86; pointer-events: none;
	perspective: 1100px;
	animation: okno-wejscie .9s var(--ruch) both;
}
.okno-tlo::before { /* światło wpadające przez okno */
	content: ""; position: absolute; inset: -30% -40%; z-index: -1;
	background: radial-gradient(closest-side, rgba(255, 106, 19, .14), transparent 70%);
}
.okno-tlo__rama {
	position: absolute; inset: 0 0 12px;
	display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 10px;
	background: #fff; border-radius: 6px;
	box-shadow: inset 0 0 0 1px rgba(27, 27, 27, .07), 0 24px 50px -28px rgba(27, 27, 27, .45);
	transform-style: preserve-3d;
}
.okno-tlo__skrzydlo {
	position: relative; padding: 11px;
	background: #fff; border-radius: 3px;
	box-shadow: inset 0 0 0 1px rgba(27, 27, 27, .1), 0 1px 3px rgba(27, 27, 27, .12);
}
.okno-tlo__skrzydlo--ruchome { z-index: 1; }
.okno-tlo--uchyl .okno-tlo__skrzydlo--ruchome { transform-origin: 50% 100%; animation: okno-uchyl 11s var(--ruch) infinite; }
.okno-tlo__szyba {
	position: absolute; inset: 11px; overflow: hidden; border-radius: 2px;
	background: linear-gradient(165deg, #dde8ec 0%, #eef3f4 55%, #d9e3e7 100%);
	box-shadow: inset 0 0 0 2px #1b1b1b; /* uszczelka */
}
.okno-tlo__szyba::after {
	content: ""; position: absolute; inset: -20% -60%;
	background: linear-gradient(105deg, transparent 42%, rgba(255, 255, 255, .85) 50%, transparent 58%);
	transform: translateX(-70%);
	animation: okno-blask 11s ease-in-out infinite;
}
.okno-tlo__skrzydlo--ruchome .okno-tlo__szyba::after { animation-delay: .25s; }
.okno-tlo__klamka {
	position: absolute; left: 3px; top: 50%; width: 6px; height: 13%; min-height: 22px;
	border-radius: 3px; background: var(--ciemny);
	transform-origin: 50% 3px; transform: rotate(0deg);
}
.okno-tlo--uchyl .okno-tlo__klamka { animation: okno-klamka 11s var(--ruch) infinite;
}
.okno-tlo__klamka::before { /* rozeta */
	content: ""; position: absolute; left: -2px; top: -4px; width: 10px; height: 14px; border-radius: 3px; background: var(--ciemny);
}
.okno-tlo__parapet {
	position: absolute; left: -6%; right: -6%; bottom: 0; height: 14px;
	border-radius: 3px; background: var(--kamien);
	box-shadow: 0 10px 20px -12px rgba(27, 27, 27, .5);
}
@keyframes okno-wejscie { from { opacity: 0; transform: translateY(18px); } }
@keyframes okno-klamka {
	0%, 14% { transform: rotate(0deg); }
	24%, 66% { transform: rotate(180deg); }
	76%, 100% { transform: rotate(0deg); }
}
@keyframes okno-uchyl {
	0%, 26% { transform: rotateX(0deg); }
	38%, 62% { transform: rotateX(-13deg); box-shadow: inset 0 0 0 1px rgba(27, 27, 27, .1), 0 18px 24px -10px rgba(27, 27, 27, .35); }
	72%, 100% { transform: rotateX(0deg); }
}
@keyframes okno-blask {
	0%, 80% { transform: translateX(-70%); }
	100% { transform: translateX(70%); }
}

/* Regulacja: skrzydło opadnięte i ocierające o ramę – klucz imbusowy podnosi je na miejsce. */
.okno-tlo--regulacja .okno-tlo__skrzydlo--ruchome { transform-origin: 100% 0; animation: okno-regulacja 11s var(--ruch) infinite; }
.okno-tlo--regulacja .okno-tlo__skrzydlo--ruchome::after { /* miejsce ocierania */
	content: ""; position: absolute; left: -4px; bottom: -4px; width: 16px; height: 16px; border-radius: 50%;
	border: 2px solid var(--akcent-mocny); animation: okno-ociera 11s ease-in-out infinite;
}
.okno-tlo__zawias { position: absolute; right: -3px; width: 5px; height: 10%; border-radius: 2px; background: #a7a29e; }
.okno-tlo__zawias--gora { top: 8%; }
.okno-tlo__zawias--dol { bottom: 8%; }
.okno-tlo__klucz {
	position: absolute; z-index: 2; right: 14px; bottom: 9%; width: 26px; height: 5px; border-radius: 2px;
	background: var(--akcent); transform-origin: 100% 50%; opacity: 0;
	animation: okno-klucz 11s var(--ruch) infinite;
}
.okno-tlo__klucz::before { content: ""; position: absolute; left: 0; top: 0; width: 5px; height: 15px; border-radius: 2px; background: var(--akcent); }
@keyframes okno-regulacja {
	0%, 24% { transform: rotate(-2.4deg); }
	44%, 86% { transform: rotate(0deg); }
	100% { transform: rotate(-2.4deg); }
}
@keyframes okno-ociera { 0%, 22% { opacity: 1; transform: scale(1); } 10% { transform: scale(1.35); } 30%, 92% { opacity: 0; } 100% { opacity: 1; } }
@keyframes okno-klucz {
	0%, 18% { opacity: 0; transform: rotate(0deg); }
	24% { opacity: 1; transform: rotate(0deg); }
	32% { transform: rotate(-120deg); }
	40% { opacity: 1; transform: rotate(-240deg); }
	48%, 100% { opacity: 0; transform: rotate(-240deg); }
}

/* Drzwi przesuwne HS: klamka podnosi skrzydło, które przesuwa się po prowadnicy. */

.okno-tlo--przesuwne { aspect-ratio: .98; }
.okno-tlo--przesuwne .okno-tlo__rama { background: linear-gradient(180deg, #cfe1e8 0%, #e9f0f2 62%, #b9c9a8 62%, #a9bb97 100%); box-shadow: inset 0 0 0 10px #fff, inset 0 0 0 11px rgba(27, 27, 27, .1), 0 24px 50px -28px rgba(27, 27, 27, .45); }
.okno-tlo--przesuwne .okno-tlo__skrzydlo--ruchome { z-index: 2; animation: okno-hs 11s var(--ruch) infinite; }
.okno-tlo--przesuwne .okno-tlo__klamka { height: 28%; animation: okno-klamka-hs 11s var(--ruch) infinite; }
.okno-tlo--przesuwne .okno-tlo__rama::after { /* prowadnica */
	content: ""; position: absolute; left: 10px; right: 10px; bottom: 4px; height: 3px; border-radius: 2px; background: #c9c3be;
}
@keyframes okno-hs {
	0%, 22% { transform: translate3d(0, 0, 0); }
	26% { transform: translate3d(0, -3px, 0); }
	50%, 64% { transform: translate3d(calc(-100% + 22px), -3px, 0); box-shadow: -14px 0 24px -12px rgba(27, 27, 27, .35); }
	86% { transform: translate3d(0, -3px, 0); }
	92%, 100% { transform: translate3d(0, 0, 0); }
}
@keyframes okno-klamka-hs { 0%, 12% { transform: rotate(0deg); } 20%, 88% { transform: rotate(180deg); } 96%, 100% { transform: rotate(0deg); } }

/* Wymiana szyb: pęknięta szyba wysuwa się, wjeżdża nowa i błyszczy. */
.okno-tlo--szyba .okno-tlo__skrzydlo--ruchome { overflow: hidden; }
.okno-tlo--szyba .okno-tlo__skrzydlo--ruchome .okno-tlo__szyba { animation: okno-szyba 11s var(--ruch) infinite; }
.okno-tlo--szyba .okno-tlo__skrzydlo--ruchome .okno-tlo__szyba::before { /* pęknięcie */
	content: ""; position: absolute; inset: 0;
	background:
		linear-gradient(58deg, transparent calc(50% - 1px), rgba(27, 27, 27, .55) 50%, transparent calc(50% + 1px)),
		linear-gradient(-28deg, transparent calc(50% - 1px), rgba(27, 27, 27, .45) 50%, transparent calc(50% + 1px)),
		linear-gradient(100deg, transparent calc(50% - 1px), rgba(27, 27, 27, .4) 50%, transparent calc(50% + 1px));
	background-size: 70% 60%, 80% 70%, 55% 50%;
	background-position: 20% 30%, 80% 25%, 45% 85%;
	background-repeat: no-repeat;
	animation: okno-pekniecie 11s linear infinite;
}
@keyframes okno-szyba {
	0%, 22% { transform: translateY(0); }
	32% { transform: translateY(115%); }
	32.01% { transform: translateY(-115%); }
	44%, 100% { transform: translateY(0); }
}
@keyframes okno-pekniecie { 0%, 31% { opacity: 1; } 32%, 90% { opacity: 0; } 96%, 100% { opacity: 1; } }

/* Wymiana uszczelek: nowa uszczelka „obiega” skrzydła dookoła. */
@property --kat { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
.okno-tlo--uszczelka .okno-tlo__skrzydlo::after {
	content: ""; position: absolute; inset: 7px; z-index: 1; border: 3px solid var(--akcent-mocny); border-radius: 3px;
	-webkit-mask-image: conic-gradient(from 0deg, #000 var(--kat), transparent 0);
	mask-image: conic-gradient(from 0deg, #000 var(--kat), transparent 0);
	animation: okno-uszczelka 11s ease-in-out infinite;
}
.okno-tlo--uszczelka .okno-tlo__skrzydlo--ruchome::after { animation-delay: .8s; }
@keyframes okno-uszczelka {
	0%, 8% { --kat: 0deg; opacity: 1; }
	48%, 78% { --kat: 360deg; opacity: 1; }
	90%, 100% { --kat: 360deg; opacity: 0; }
}

/* Wymiana zawiasów: skrzydło otwiera się na nowych zawiasach. */
.okno-tlo--zawiasy .okno-tlo__skrzydlo--ruchome { transform-origin: 100% 50%; animation: okno-rozwarcie 11s var(--ruch) infinite; }
.okno-tlo--zawiasy .okno-tlo__klamka { animation: okno-klamka-zawiasy 11s var(--ruch) infinite; }
.okno-tlo--zawiasy .okno-tlo__zawias { background: var(--akcent-mocny); animation: okno-zawias 11s ease-in-out infinite; }
@keyframes okno-rozwarcie {
	0%, 22% { transform: rotateY(0deg); }
	36%, 62% { transform: rotateY(38deg); box-shadow: -18px 0 30px -14px rgba(27, 27, 27, .4); }
	76%, 100% { transform: rotateY(0deg); }
}
@keyframes okno-klamka-zawiasy { 0%, 12% { transform: rotate(0deg); } 20%, 70% { transform: rotate(90deg); } 78%, 100% { transform: rotate(0deg); } }
@keyframes okno-zawias { 0%, 100% { box-shadow: 0 0 0 0 rgba(255, 106, 19, 0); } 40%, 60% { box-shadow: 0 0 0 5px rgba(255, 106, 19, .25); } }

/* Systemy osłonowe: roleta zjeżdża ze skrzynki i wraca. */
.okno-tlo--roleta .okno-tlo__rama { inset: 26px 0 12px; }
.okno-tlo__skrzynka {
	position: absolute; top: 0; left: -3%; right: -3%; height: 26px; border-radius: 5px 5px 2px 2px;
	background: #fff; box-shadow: inset 0 0 0 1px rgba(27, 27, 27, .08), 0 6px 10px -6px rgba(27, 27, 27, .35);
}
.okno-tlo__pancerz {
	position: absolute; z-index: 3; left: 0; right: 0; top: 0; height: 0;
	background: repeating-linear-gradient(180deg, #ece8e4 0 11px, #c9c2bc 11px 13px) bottom / 100% 100%;
	border-bottom: 6px solid var(--kamien);
	animation: okno-roleta 11s var(--ruch) infinite;
}
@keyframes okno-roleta { 0%, 14% { height: 0; } 42%, 64% { height: 74%; } 88%, 100% { height: 0; } }
@media (min-width: 900px) {
	.naglowek-strony .kontener { padding-right: calc(var(--margines) + clamp(300px, 26vw, 380px)); }
}
@media (max-width: 899px) {
	.okno-tlo { right: -40px; top: auto; bottom: -30px; height: 220px; opacity: .3; }
}
.naglowek-strony__tytul { font-size: clamp(2rem, 1rem + 3.6vw, 3.9rem); font-stretch: var(--szeroki); font-weight: 900; line-height: 1; letter-spacing: -.03em; max-width: 17em; }
.naglowek-strony__wstep { margin: 20px 0 0; max-width: 40em; font-size: 1.125rem; color: var(--ciemny-2); }
.naglowek-strony__meta { margin: 18px 0 0; display: flex; gap: .6em; color: var(--szary); font-size: .9375rem; }
.naglowek-strony--wpis .naglowek-strony__tytul { font-size: clamp(1.8rem, 1rem + 2.8vw, 3.1rem); }

.okruszki ol { display: flex; flex-wrap: wrap; gap: 4px 0; margin: 0 0 22px; padding: 0; list-style: none; font-size: .875rem; color: var(--szary); }
.okruszki li { display: flex; align-items: center; }
.okruszki li + li::before { content: ""; width: 5px; height: 5px; margin: 0 .8em; border-radius: 50%; background: var(--kamien); }
.okruszki a { color: var(--ciemny-2); text-decoration: none; }
.okruszki a:hover { color: var(--akcent); text-decoration: underline; }
.okruszki [aria-current] { max-width: 30ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: block; }

/* ---------- Układ: treść + panel boczny ---------- */

.uklad { display: grid; gap: 48px; padding-bottom: var(--odstep); }
@media (min-width: 1000px) {
	.uklad { grid-template-columns: minmax(0, 1fr) 340px; gap: 72px; align-items: start; }
	.uklad__bok { position: sticky; top: calc(var(--wysokosc-naglowka) + 24px); }
}
.karta-kontaktu { position: relative; overflow: hidden; padding: 28px; border-radius: var(--r); background: var(--ciemny); color: #d9d0ca; }
.karta-kontaktu__tytul { font-size: 1.5rem; font-weight: 900; font-stretch: var(--szeroki); color: var(--tlo); margin-bottom: 8px; }
.karta-kontaktu p { font-size: .975rem; }
.karta-kontaktu__telefony { margin: 0 0 20px; padding: 0; list-style: none; }
.karta-kontaktu__telefony a {
	display: flex; align-items: center; gap: .55em; padding: 10px 0;
	border-bottom: 1px solid #443b38;
	color: var(--tlo); font-weight: 800; font-size: 1.2rem; font-variant-numeric: tabular-nums; text-decoration: none;
}
.karta-kontaktu__telefony a .ikona { color: var(--akcent-mocny); }
.karta-kontaktu__telefony a:hover { color: var(--akcent-mocny); }
.karta-kontaktu .przycisk--obrys { border-color: var(--tlo); color: var(--tlo); }
.karta-kontaktu .przycisk--obrys:hover { background: var(--tlo); color: var(--ciemny); }

.inne-uslugi { margin-top: 16px; padding: 22px; border-radius: var(--r); background: var(--tlo-2); }
.inne-uslugi__tytul { font-size: .78rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--akcent); margin-bottom: 8px; }
.inne-uslugi ul { margin: 0; padding: 0; list-style: none; }
.inne-uslugi a { display: flex; justify-content: space-between; padding: 10px 0; border-bottom: 1px solid var(--linia); color: var(--ciemny); text-decoration: none; font-weight: 600; transition: padding-left .2s var(--ruch), color .2s; }
.inne-uslugi li:last-child a { border-bottom: 0; }
.inne-uslugi a:hover { color: var(--akcent); padding-left: 6px; }
.inne-uslugi a[aria-current] { color: var(--akcent); }

/* ---------- Treść (proza) ---------- */

.proza { font-size: 1.125rem; line-height: 1.75; color: #3b3331; }
.proza--waska { max-width: 760px; }
.proza > * { max-width: 72ch; }
.proza > figure, .proza > .galeria, .proza > iframe, .proza > .wp-block-image, .proza > .wezwanie { max-width: none; }
.proza h2 { font-size: clamp(1.55rem, 1.1rem + 1.5vw, 2.25rem); font-stretch: 115%; margin: 1.8em 0 .6em; color: var(--ciemny); }
.proza h3 { font-size: clamp(1.25rem, 1.1rem + .6vw, 1.5rem); font-stretch: 108%; margin: 1.6em 0 .5em; color: var(--ciemny); }
.proza h4 { font-size: 1.2rem; margin: 1.4em 0 .5em; }
.proza > :first-child { margin-top: 0; }
.proza ul, .proza ol { padding-left: 1.3em; margin: 0 0 1.2em; }
.proza li { margin: .35em 0; }
.proza ul li::marker { color: var(--akcent); }
.proza ol li::marker { color: var(--akcent); font-weight: 700; }
.proza strong { font-weight: 700; color: var(--ciemny); }
.proza blockquote { margin: 1.5em 0; padding: 18px 24px; border-radius: var(--r); background: var(--tlo-2); font-size: 1.15rem; }
.proza figure { margin: 2em 0; }
.proza figure img { width: 100%; max-height: 620px; object-fit: cover; border-radius: var(--r); background: var(--tlo-2); }
.proza figcaption { margin-top: 10px; font-size: .875rem; color: var(--szary); }
.proza img.alignright, .proza .alignright { float: right; max-width: 45%; margin: .3em 0 1em 1.5em; border-radius: var(--r-s); }
.proza img.alignleft, .proza .alignleft { float: left; max-width: 45%; margin: .3em 1.5em 1em 0; border-radius: var(--r-s); }
.proza .aligncenter { margin-inline: auto; }
.proza iframe { width: 100%; min-height: 420px; border: 0; border-radius: var(--r); }
.proza table { width: 100%; border-collapse: collapse; margin: 1.5em 0; font-size: 1rem; }
.proza th, .proza td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--linia); vertical-align: top; }
.proza th { border-bottom: 2px solid var(--ciemny); }
.proza a.przycisk { display: inline-flex; color: var(--tlo); background: var(--ciemny); text-decoration: none; }
.proza a.przycisk:hover { background: var(--akcent); }
.proza::after { content: ""; display: table; clear: both; }

/* Spis treści na początku wpisów (lista odnośników do kotwic) */
.proza > ul:first-of-type:has(> li > a[href^="#"]:only-child) {
	list-style: none; padding: 20px 24px; border-radius: var(--r); background: var(--tlo-2); font-size: 1rem;
}
.proza > ul:first-of-type:has(> li > a[href^="#"]:only-child) li { margin: .25em 0; }
.proza > ul:first-of-type:has(> li > a[href^="#"]:only-child) a { color: var(--ciemny); text-decoration: none; }
.proza > ul:first-of-type:has(> li > a[href^="#"]:only-child) a:hover { color: var(--akcent); }

.wpis__zdjecie { margin: 0 0 2em; }

/* Wezwanie do działania pod wpisem */
.wezwanie { position: relative; overflow: hidden; margin-top: 3em; padding: clamp(24px, 4vw, 40px); border-radius: var(--r-l); background: var(--ciemny); color: #d9d0ca; }
.wezwanie::after {
	content: ""; position: absolute; right: -90px; top: -90px; width: 260px; height: 260px; border-radius: 50%; pointer-events: none;
	background: repeating-radial-gradient(circle, transparent 0 16px, rgba(255, 106, 19, .35) 17px 18px, transparent 19px 26px);
	-webkit-mask-image: radial-gradient(circle, #000 30%, transparent 70%);
	mask-image: radial-gradient(circle, #000 30%, transparent 70%);
}
.wezwanie__tytul { position: relative; font-size: clamp(1.4rem, 1rem + 1.2vw, 2rem); font-weight: 900; font-stretch: var(--szeroki); color: var(--tlo); margin-bottom: 8px; line-height: 1.1; }
.wezwanie__akcje { position: relative; display: flex; flex-wrap: wrap; gap: 12px; margin-top: 20px; }
.wezwanie .przycisk--ciemny, .wezwanie .przycisk--akcent { background: var(--akcent); color: var(--tlo); }
.wezwanie .przycisk--obrys { border-color: var(--tlo); color: var(--tlo); }
.wezwanie .przycisk--obrys:hover { background: var(--tlo); color: var(--ciemny); }

/* Galeria */
.galeria { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin: 2em 0; }
@media (min-width: 600px) { .galeria { grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 10px; } }
.galeria__el { display: block; overflow: hidden; border-radius: var(--r-s); background: var(--tlo-2); }
.galeria__el img { width: 100%; aspect-ratio: 1; object-fit: cover; transition: transform .6s var(--ruch); }
.galeria__el:hover img { transform: scale(1.06); }

/* Podgląd zdjęć */
.podglad { width: 100vw; height: 100vh; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; background: rgba(24, 20, 19, .95); }
.podglad[open] { display: flex; align-items: center; justify-content: center; animation: wynik .3s var(--ruch); }
.podglad::backdrop { background: rgba(24, 20, 19, .95); }
.podglad img { max-width: min(92vw, 1400px); max-height: 86vh; width: auto; object-fit: contain; border-radius: var(--r-s); }
.podglad__btn {
	position: absolute; width: 52px; height: 52px;
	display: inline-flex; align-items: center; justify-content: center;
	border: 0; border-radius: 50%; background: var(--tlo); color: var(--ciemny);
	font-size: 28px; line-height: 1; cursor: pointer; transition: background-color .2s, color .2s;
}
.podglad__btn:hover { background: var(--akcent); color: var(--tlo); }
.podglad__zamknij { top: 16px; right: 16px; }
.podglad__wstecz { left: 16px; top: 50%; transform: translateY(-50%); }
.podglad__dalej { right: 16px; top: 50%; transform: translateY(-50%); }

/* ---------- Kontakt (strona) ---------- */

.dane-kontaktowe { display: grid; gap: 16px; padding-bottom: var(--odstep); }
@media (min-width: 860px) { .dane-kontaktowe { grid-template-columns: 1fr 1.45fr 1fr; } }
.dane-kontaktowe__el { padding: 26px; border-radius: var(--r); background: var(--tlo-2); container-type: inline-size; min-width: 0; }
.dane-kontaktowe__el ul { margin: 0; padding: 0; list-style: none; }
.dane-kontaktowe__el p { color: var(--ciemny-2); }
.duzy-link {
	display: inline-block; padding: 3px 0;
	color: var(--ciemny); text-decoration: none;
	font-size: clamp(1.35rem, 1.1rem + 1vw, 1.8rem); font-weight: 900; font-stretch: 112%;
	font-variant-numeric: tabular-nums;
}
.duzy-link:hover { color: var(--akcent); }
.duzy-link--mail { font-size: clamp(.8rem, 5cqi, 1.5rem); font-stretch: 100%; font-weight: 800; white-space: nowrap; }

.mapa { padding-block: var(--odstep); }
.mapa__ramka {
	position: relative;
	display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px;
	min-height: 420px; padding: 24px;
	border-radius: var(--r-l); overflow: hidden;
	background:
		linear-gradient(var(--tlo-3) 1px, transparent 1px) 0 0 / 48px 48px,
		linear-gradient(90deg, var(--tlo-3) 1px, transparent 1px) 0 0 / 48px 48px,
		var(--tlo-2);
	text-align: center;
}
.mapa__uwaga { margin: 0; font-size: .875rem; color: var(--szary); }
.mapa__ramka--wczytana { padding: 0; }
.mapa__ramka iframe { width: 100%; height: 560px; border: 0; display: block; }

/* ---------- Wyszukiwarka, stronicowanie ---------- */

.szukaj { display: flex; gap: 8px; max-width: 560px; margin-top: 24px; }
.szukaj input[type="search"] { flex: 1; background: var(--tlo); }

.stronicowanie { margin-top: 44px; }
.stronicowanie .nav-links { display: flex; flex-wrap: wrap; gap: 6px; }
.stronicowanie .page-numbers {
	display: inline-flex; align-items: center; justify-content: center;
	min-width: 46px; min-height: 46px; padding: 0 16px;
	border-radius: 999px; background: var(--tlo-2);
	color: var(--ciemny); text-decoration: none; font-weight: 700;
	transition: background-color .2s, color .2s;
}
.stronicowanie .page-numbers:hover { background: var(--tlo-3); }
.stronicowanie .page-numbers.current { background: var(--ciemny); color: var(--tlo); }
.stronicowanie .dots { background: none; }

/* ---------- Stopka ---------- */

.stopka { background: var(--ciemny); color: #bfb4ae; font-size: .9375rem; padding-top: clamp(56px, 7vw, 96px); }
.stopka a { color: #efe9e5; text-decoration: none; transition: color .2s; }
.stopka a:hover { color: var(--akcent-mocny); }
.stopka__siatka { display: grid; gap: 36px; padding-bottom: 56px; }
@media (min-width: 720px) { .stopka__siatka { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1100px) { .stopka__siatka { grid-template-columns: 1.4fr 1fr 1fr .8fr; gap: 48px; } }
.stopka__logo { display: inline-block; margin-bottom: 22px; transition: transform .3s var(--ruch); }
.stopka__logo:hover { transform: translateY(-3px) rotate(-1deg); }
.stopka__logo-obraz { display: block; width: auto; height: 68px; }
.stopka__nazwa { font-size: 1.5rem; font-weight: 900; font-stretch: var(--szeroki); color: var(--tlo); line-height: 1.05; margin-bottom: 14px; }
.stopka__dane { color: #8f847e; }
.stopka__tytul { font-size: .78rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--akcent-mocny); margin-bottom: 14px; }
.stopka__lista { margin: 0; padding: 0; list-style: none; }
.stopka__lista li { padding: 4px 0; }
.stopka__lista a { display: inline-flex; align-items: center; gap: .55em; }
.stopka__lista .ikona { color: var(--akcent-mocny); }
.stopka__dol { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; padding-block: 22px; border-top: 1px solid #333; font-size: .8125rem; color: #8f847e; }
.stopka__dol p { margin: 0; }
.stopka__cookie { padding: 0; border: 0; background: none; font: inherit; color: #efe9e5; cursor: pointer; transition: color .2s; }
.stopka__cookie:hover { color: var(--akcent-mocny); }

/* Pływający przycisk CookieYes zasłaniał pasek akcji – zgodę zmienia się linkiem w stopce. */
.cky-btn-revisit-wrapper { display: none !important; }

/* ---------- Pasek akcji na telefonie ---------- */

.pasek-akcji { display: none; }
@media (max-width: 899px) {
	.stopka { padding-bottom: calc(84px + env(safe-area-inset-bottom)); }
	.pasek-akcji {
		position: fixed; left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom)); z-index: 60;
		display: grid; grid-template-columns: 1.3fr 1fr; gap: 6px;
		padding: 6px; border-radius: 999px;
		background: rgba(27, 27, 27, .94);
		-webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
		box-shadow: 0 14px 40px -12px rgba(0, 0, 0, .55);
		animation: wjazd .6s var(--ruch) .4s both;
	}
	.pasek-akcji a { display: flex; align-items: center; justify-content: center; gap: .5em; min-height: 50px; border-radius: 999px; font-weight: 800; font-size: 1rem; text-decoration: none; }
	.pasek-akcji__tel { background: var(--akcent); color: var(--tlo); }
	.pasek-akcji__form { color: var(--tlo); }
	.menu-otwarte .pasek-akcji { display: none; }
}
@keyframes wjazd { from { transform: translateY(120%); } }

/* ---------- Druk ---------- */

@media print {
	.naglowek, .pasek-akcji, .uklad__bok, .zgloszenie, .stopka, .mapa, .tasma, .pas { display: none !important; }
	body { padding: 0; }
	.js [data-pokaz] { opacity: 1 !important; transform: none !important; }
}

/* Nagłówek podstrony na ciemnym tle: białe teksty, pomarańczowe akcenty. */
.naglowek-strony__tytul { color: #fff; }
.naglowek-strony__tytul::after { content: ""; display: block; width: 64px; height: 5px; margin-top: .32em; border-radius: 3px; background: var(--akcent-mocny); }
.naglowek-strony__wstep { color: #cfc9c4; }
.naglowek-strony__meta { color: #a9a29d; }
.naglowek-strony__meta .ikona { color: var(--akcent-mocny); }
.naglowek-strony .okruszki ol { color: #a9a29d; }
.naglowek-strony .okruszki a { color: #e6e1dd; }
.naglowek-strony .okruszki a:hover { color: var(--akcent-mocny); }
.naglowek-strony .okruszki [aria-current] { color: var(--akcent-mocny); }
.naglowek-strony .okruszki li + li::before { background: var(--akcent-mocny); }
.naglowek-strony .okno-tlo__rama { box-shadow: inset 0 0 0 1px rgba(27, 27, 27, .07), 0 30px 60px -24px rgba(0, 0, 0, .8); }
.naglowek-strony .okno-tlo::before { background: radial-gradient(closest-side, rgba(255, 106, 19, .22), transparent 70%); }
@media (max-width: 899px) { .naglowek-strony .okno-tlo { opacity: .22; } }
.naglowek-strony .okno-tlo--przesuwne .okno-tlo__rama { box-shadow: inset 0 0 0 10px #fff, inset 0 0 0 11px rgba(27, 27, 27, .1), 0 30px 60px -24px rgba(0, 0, 0, .8); }

/* Nagłówek podstrony: słońce padające przez okno (z cieniem szprosów) i miarka przy dolnej krawędzi. */
.naglowek-strony::before {
	content: ""; position: absolute; z-index: 0; pointer-events: none;
	right: calc(max(var(--margines), (100% - var(--kontener)) / 2) + 120px); bottom: -12%;
	width: min(620px, 55vw); height: 82%;
	background:
		linear-gradient(90deg, transparent calc(50% - 8px), var(--ciemny) calc(50% - 8px) calc(50% + 8px), transparent calc(50% + 8px)),
		linear-gradient(0deg, transparent calc(50% - 8px), var(--ciemny) calc(50% - 8px) calc(50% + 8px), transparent calc(50% + 8px)),
		linear-gradient(200deg, rgba(255, 140, 70, .2), rgba(255, 106, 19, .05) 80%);
	transform-origin: 100% 100%;
	animation: naglowek-slonce 24s ease-in-out infinite alternate;
}
@keyframes naglowek-slonce {
	from { transform: skewX(38deg); }
	to   { transform: skewX(26deg) translateX(-3%); }
}
.naglowek-strony::after {
	content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 16px; z-index: 0; pointer-events: none;
	background:
		linear-gradient(90deg, var(--akcent-mocny) 0 2px, transparent 2px) 0 100% / 100px 16px repeat-x,
		linear-gradient(90deg, rgba(255, 106, 19, .75) 0 1px, transparent 1px) 0 100% / 50px 10px repeat-x,
		linear-gradient(90deg, rgba(255, 106, 19, .45) 0 1px, transparent 1px) 0 100% / 10px 6px repeat-x;
	border-bottom: 2px solid var(--akcent-mocny);
	animation: naglowek-miarka 40s linear infinite;
}
@keyframes naglowek-miarka { to { background-position: 100px 100%, 100px 100%, 100px 100%; } }
@media (max-width: 899px) {
	.naglowek-strony::before { right: -20%; width: 90vw; height: 70%; opacity: .7; }
}

/* ---------- Strona „O nas” ---------- */

.firma { display: grid; gap: clamp(32px, 5vw, 72px); align-items: start; }
@media (min-width: 960px) { .firma { grid-template-columns: 1.25fr 1fr; } }
.firma__tekst p { color: var(--ciemny-2); max-width: 38em; }
.firma__tekst .sekcja__tytul { margin-bottom: 24px; }
.firma__lead { font-size: 1.2rem; line-height: 1.55; color: var(--ciemny) !important; }
.firma__panel {
	position: relative; overflow: hidden;
	padding: clamp(24px, 3vw, 36px); border-radius: var(--r-l);
	background: var(--ciemny); color: #fff;
}
@media (min-width: 960px) { .firma__panel { position: sticky; top: calc(var(--wysokosc-naglowka) + 24px); } }
.firma__panel::before { /* krzyż szprosów w rogu panelu */
	content: ""; position: absolute; right: -60px; top: -60px; width: 220px; height: 220px; pointer-events: none;
	background:
		linear-gradient(90deg, transparent calc(50% - 5px), var(--ciemny) calc(50% - 5px) calc(50% + 5px), transparent calc(50% + 5px)),
		linear-gradient(0deg, transparent calc(50% - 5px), var(--ciemny) calc(50% - 5px) calc(50% + 5px), transparent calc(50% + 5px)),
		rgba(255, 106, 19, .16);
	transform: rotate(12deg);
}
.firma__wezwanie { position: relative; margin: 24px 0 16px; color: #cfc9c4; }
.liczniki--ciemne { position: relative; grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 0; }
.liczniki--ciemne div { background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .08); }
.liczniki--ciemne dd { color: #fff; }
.liczniki--ciemne div:first-child dd { color: var(--akcent-mocny); }
.liczniki--ciemne dt { color: #a9a29d; }

.prace { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; counter-reset: none; }
@media (min-width: 640px) { .prace { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .prace { grid-template-columns: repeat(3, 1fr); } }
.prace__el {
	position: relative; display: flex; align-items: center; gap: 18px; min-height: 96px;
	padding: 22px 24px; border-radius: var(--r); background: var(--tlo);
	border: 1px solid var(--linia); overflow: hidden;
	transition: transform .3s var(--ruch), box-shadow .3s, border-color .3s;
}
.prace__el::after { content: ""; position: absolute; left: 0; bottom: 0; height: 3px; width: 100%; background: var(--akcent); transform: scaleX(0); transform-origin: left; transition: transform .4s var(--ruch); }
.prace__el:hover { transform: translateY(-4px); box-shadow: var(--cien); border-color: transparent; }
.prace__el:hover::after { transform: scaleX(1); }
.prace__nr { flex: none; font-size: 1.6rem; font-weight: 900; font-stretch: var(--szeroki); color: var(--akcent); font-variant-numeric: tabular-nums; line-height: 1; }
.prace__nazwa { font-weight: 700; line-height: 1.35; color: var(--ciemny); }

.kroki { position: relative; display: grid; gap: 28px; margin: 0; padding: 0; list-style: none; }
@media (min-width: 900px) {
	.kroki { grid-template-columns: repeat(4, 1fr); gap: 32px; }
	.kroki::before { /* linia łącząca kroki */
		content: ""; position: absolute; left: 28px; right: 28px; top: 27px; height: 2px;
		background: repeating-linear-gradient(90deg, var(--kamien) 0 8px, transparent 8px 16px);
	}
}
.kroki__el { position: relative; }
.kroki__nr {
	position: relative; z-index: 1; display: grid; place-items: center; width: 56px; height: 56px; margin-bottom: 20px;
	border-radius: 50%; background: var(--ciemny); color: #fff; font-weight: 900; font-size: 1.3rem; font-stretch: var(--szeroki);
	box-shadow: 0 0 0 8px var(--tlo);
	transition: background-color .3s, transform .3s var(--ruch);
}
.kroki__el:hover .kroki__nr { background: var(--akcent); transform: scale(1.08); }
.kroki__tytul { font-size: 1.15rem; font-weight: 850; font-stretch: 108%; margin-bottom: 8px; overflow-wrap: anywhere; }
.kroki__el p { margin: 0; color: var(--ciemny-2); }

.galeria--firma { margin: 0; }
@media (min-width: 900px) { .galeria--firma { grid-template-columns: repeat(4, 1fr); gap: 12px; } }
.galeria--firma .galeria__el { border-radius: var(--r); }
.galeria__wiecej { margin: 32px 0 0; text-align: center; }
.galeria__el[hidden] { display: none; }
.sekcja--szara + .sekcja:not(.sekcja--szara) { padding-top: var(--odstep); }

/* Sekcja zgłoszenia: rysunki techniczne okna (rama, skrzydła, symbole otwierania, wymiary) – ostre linie, delikatnie „pracujące” kreski. */
.zgloszenie { position: relative; isolation: isolate; overflow: clip; }
.zgloszenie::before,
.zgloszenie::after {
	content: ""; position: absolute; z-index: -1; pointer-events: none;
	aspect-ratio: 420 / 500;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 420 500' fill='none' stroke='%23a4968c' stroke-width='2'%3E%3Crect x='50' y='30' width='340' height='420'/%3E%3Crect x='64' y='44' width='312' height='392'/%3E%3Cline x1='220' y1='44' x2='220' y2='436'/%3E%3Crect x='74' y='54' width='138' height='372'/%3E%3Crect x='228' y='54' width='138' height='372'/%3E%3Crect x='204' y='226' width='5' height='30' fill='%23a4968c'/%3E%3Crect x='231' y='226' width='5' height='30' fill='%23a4968c'/%3E%3Cg stroke-dasharray='10 8' stroke-width='1.6'%3E%3Cpolyline points='212,54 74,240 212,426'%3E%3Canimate attributeName='stroke-dashoffset' from='0' to='-36' dur='3s' repeatCount='indefinite'/%3E%3C/polyline%3E%3Cpolyline points='228,54 366,240 228,426'%3E%3Canimate attributeName='stroke-dashoffset' from='0' to='-36' dur='3s' repeatCount='indefinite'/%3E%3C/polyline%3E%3Cpolyline points='228,426 297,54 366,426' stroke='%23c84a1b'%3E%3Canimate attributeName='stroke-dashoffset' from='0' to='36' dur='3s' repeatCount='indefinite'/%3E%3C/polyline%3E%3C/g%3E%3Cg stroke-width='1.2'%3E%3Cline x1='50' y1='472' x2='390' y2='472'/%3E%3Cline x1='50' y1='462' x2='50' y2='482'/%3E%3Cline x1='390' y1='462' x2='390' y2='482'/%3E%3Cline x1='22' y1='30' x2='22' y2='450'/%3E%3Cline x1='12' y1='30' x2='32' y2='30'/%3E%3Cline x1='12' y1='450' x2='32' y2='450'/%3E%3C/g%3E%3Cg fill='%23a4968c' stroke='none' font-family='Arial,sans-serif' font-size='15' font-weight='700' text-anchor='middle'%3E%3Crect x='190' y='462' width='60' height='20' fill='%23f4f2f0'/%3E%3Ctext x='220' y='477'%3E1465%3C/text%3E%3Crect x='12' y='215' width='20' height='50' fill='%23f4f2f0'/%3E%3Ctext x='27' y='240' transform='rotate(-90 22 240)'%3E1435%3C/text%3E%3C/g%3E%3C/svg%3E") center / contain no-repeat;
	animation: zgloszenie-rysunek 14s ease-in-out infinite alternate;
}
.zgloszenie::before { right: max(-60px, calc((100% - var(--kontener)) / 2 - 420px)); bottom: -40px; width: min(720px, 48vw); opacity: .55; }
.zgloszenie::after { left: max(-90px, calc((100% - var(--kontener)) / 2 - 340px)); top: 40px; width: min(480px, 34vw); opacity: .35; transform: rotate(-8deg); animation-delay: -7s; }
@keyframes zgloszenie-rysunek {
	from { translate: 0 0; }
	to   { translate: 0 -14px; }
}
@media (max-width: 999px) {
	.zgloszenie::before { width: 70vw; right: -25vw; opacity: .35; }
	.zgloszenie::after { display: none; }
}

/* Wstawki w treści wpisów: spis treści, ramka z poradą, etykiety, przycisk. */
.proza ol.toc { padding: 20px 24px 20px 44px; border-radius: var(--r); background: var(--tlo-2); }
.proza ol.toc li { margin: .3em 0; }
.proza ol.toc a { color: var(--ciemny); text-decoration: none; font-weight: 600; }
.proza ol.toc a:hover { color: var(--akcent); text-decoration: underline; }
.proza hr.hrg { border: 0; height: 1px; background: var(--linia); margin: 2em 0; }
.proza .callout { margin: 1.8em 0; padding: 22px 24px; border-left: 4px solid var(--akcent); border-radius: var(--r-s); background: var(--tlo-2); }
.proza .callout p:last-child { margin-bottom: 0; }
.proza .badges { display: flex; flex-wrap: wrap; gap: 8px; margin: 1.6em 0; }
.proza .badge { padding: 6px 14px; border-radius: 999px; background: var(--ciemny); color: #fff; font-size: .875rem; font-weight: 600; }
.proza .cta-button {
	display: inline-flex; align-items: center; min-height: 46px; padding: 10px 22px; margin: .4em 0;
	border-radius: 999px; background: var(--akcent); color: #fff !important; font-weight: 700; text-decoration: none;
	transition: background-color .2s, transform .2s var(--ruch);
}
.proza .cta-button:hover { background: var(--ciemny); transform: translateY(-2px); }
.proza [id] { scroll-margin-top: calc(var(--wysokosc-naglowka) + 24px); }

/* Galerie: każde zdjęcie pojawia się 150 ms po poprzednim (opóźnienie ustawia main.js). */
.galerie-animowane .galeria__el { opacity: 0; transform: translateY(18px) scale(.97); transition: opacity .55s ease, transform .6s var(--ruch); transition-delay: var(--opoznienie-zdjecia, 0s); }
.galerie-animowane .galeria__el.widoczne { opacity: 1; transform: none; }

/* Karuzela w hero – większa na komputerze. */
@media (min-width: 960px) {
	.karuzela__okno { aspect-ratio: 1 / .96; }
	.hero__tytul { font-size: clamp(2.5rem, 1rem + 3vw, 3.8rem); }
}