/* =========================================================================
   LESTOR — arkusz główny

   Barwy zmierzone ze znaku i zdjęć klienta. Skala w widełkach z pomiaru
   arlek.pl: nagłówek nie przekracza 44 px, hero nie jest na `100vh`.

   Motyw przewodni: POZIOMA LISTWA. Każda brama segmentowa na zdjęciach
   klienta jest zbudowana z poziomych paneli. Ten rytm wraca w kreskach
   nad nagłówkami, w fakturze ciemnych sekcji i w liniach między liczbami.
   To jego element, nie ozdoba z biblioteki.
   ========================================================================= */

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

html { -webkit-text-size-adjust: 100%; }

body {
	margin: 0;
	/* clip tylko na body. Na html psuje pozycjonowanie lepkiego nagłówka
	   (memory: lekcja-overflow-clip-html-scrolly). */
	overflow-x: clip;
}

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

button,
input,
select,
textarea { font: inherit; color: inherit; }

h1, h2, h3, h4, p, figure, blockquote, ul, ol { margin: 0; }

ul[class], ol[class] { list-style: none; padding: 0; }

::selection { background: #16365D; color: #fff; }

/* ----------------------------------------------------------------- TOKENY */
:root {
	/* Barwy klienta */
	--ls-granat: #16365D;
	--ls-granat-ciemny: #0E2440;
	--ls-granat-jasny: #24507F;
	--ls-antracyt: #3B3F4A;
	--ls-antracyt-ciemny: #2A2D35;
	--ls-drewno: #A87858;
	/* Rozjaśnione z #C79B78: na antracycie dawało 3,64 przy progu 4,50.
	   Teraz 5,5:1. Wersja ciemniejsza została do elementów na papierze. */
	--ls-drewno-jasne: #DDBA9B;
	--ls-drewno-tekst: #8A5A38;   /* przyciemnione do 5,5:1 na papierze */

	/* Tło: ciepły papier zamiast zimnej szarości. Zimna szarość obok
	   granatu daje wrażenie domyślnego szablonu; ciepły odcień trzyma
	   z drewnem z jego bram fasadowych. */
	--ls-papier: #F4F2EF;
	--ls-papier-ciemny: #EAE6E1;
	--ls-biel: #FFFFFF;
	--ls-tekst: #14181C;
	--ls-tekst-lekki: #55606B;
	--ls-linia: #DFD9D2;          /* podziały dekoracyjne, kreski między wierszami */
	--ls-linia-mocna: #C9C1B8;    /* mocniejszy podział, nadal dekoracyjny */
	/* Obramowanie ELEMENTU STEROWANIA (przycisk, pole, hamburger) musi mieć
	   kontrast 3:1 do tła — WCAG 1.4.11. Zmierzone: #C9C1B8 dawało 1,59:1,
	   czyli obrys przycisku praktycznie ginął. #8A8178 daje 3,47:1. */
	--ls-linia-interakcja: #8A8178;
	--ls-linia-ciemna: rgba(255, 255, 255, 0.14);

	/* Faktura listwy, wzięta z podziału paneli w bramie segmentowej */
	--ls-listwy: repeating-linear-gradient(
		to bottom,
		rgba(255, 255, 255, 0.05) 0 1px,
		transparent 1px 15px
	);
	/* Wersja na duże gradientowe sekcje: na przejściach tonalnych pełne
	   0.05 wyglądało jak sztruks, nie jak faktura. */
	--ls-listwy-delikatne: repeating-linear-gradient(
		to bottom,
		rgba(255, 255, 255, 0.024) 0 1px,
		transparent 1px 17px
	);

	/* Odstępy, siatka 8 px */
	--ls-1: 0.25rem;
	--ls-2: 0.5rem;
	--ls-3: 0.75rem;
	--ls-4: 1rem;
	--ls-5: 1.5rem;
	--ls-6: 2rem;
	--ls-7: 2.5rem;
	--ls-8: 3rem;
	--ls-10: 4rem;
	--ls-12: 5rem;
	--ls-14: 6rem;

	/* Rytm sekcji celowo NIE jest jednakowy: sekcja dowodowa dostaje
	   więcej powietrza niż lista usług. Jednakowy rytm wszędzie czyta się
	   jak wygenerowany. */
	--ls-sekcja: 4rem;
	--ls-sekcja-duza: 5.5rem;
	--ls-px: 1.25rem;

	--ls-kontener: 1240px;

	/* Typografia */
	--ls-display: "Archivo", "Segoe UI", system-ui, sans-serif;
	--ls-tekst-font: "IBM Plex Sans", "Segoe UI", system-ui, sans-serif;

	--ls-h1: 31px;
	--ls-h1-lh: 1.14;
	--ls-h2: 25px;
	--ls-h2-lh: 1.22;
	--ls-h3: 19px;
	--ls-h3-lh: 1.35;
	--ls-body: 17px;
	--ls-body-lh: 1.68;
	--ls-lead: 18px;
	--ls-lead-lh: 1.6;
	--ls-maly: 15px;
	--ls-mikro: 12px;

	--ls-r: 2px;
	--ls-r-mala: 2px;
	--ls-r-duza: 3px;

	--ls-cien: 0 1px 2px rgba(20, 24, 28, 0.05), 0 10px 30px rgba(20, 24, 28, 0.07);
	--ls-cien-mocny: 0 18px 48px rgba(20, 24, 28, 0.18);

	--ls-czas: 200ms;
	--ls-czas-wolny: 420ms;
	--ls-krzywa: cubic-bezier(0.22, 0.61, 0.36, 1);

	--ls-naglowek-wys: 68px;
	--ls-sluchawka: 56px;
	--ls-sluchawka-margines: var(--ls-4);

	/* Tekst na powierzchni drewnianej: ciemny brąz z tej samej rodziny,
	   nie czarny. 11,7:1 na #A87858. */
	--ls-na-drewnie: #21130A;

	/* Stany komunikatu formularza. Trzymane w tokenach, żeby zielony
	   i czerwony miały jedno źródło, a nie sześć luźnych hexów. */
	--ls-ok-tlo: #EDF4EF;
	--ls-ok-tekst: #14452A;
	--ls-ok-linia: #2F7A4E;
	--ls-blad-tlo: #FAEDED;
	--ls-blad-tekst: #6B1D1D;
	--ls-blad-linia: #B03A3A;

	/* Gradient granatowej sekcji: trzy przystanki jednej barwy marki. */
	--ls-granat-gradient: linear-gradient(150deg, #0F1E36 0%, #16365D 52%, #10243F 100%);
	--ls-granat-gradient-odwrotny: linear-gradient(160deg, #10243F 0%, #16365D 55%, #0F1E36 100%);

	/* Cień panelu unoszącego się nad treścią (menu, lightbox). */
	--ls-cien-panel: 0 2px 4px rgba(20, 24, 28, 0.06), 0 14px 36px rgba(20, 24, 28, 0.16);
}

@media (min-width: 1024px) {
	:root {
		--ls-h1: 44px;
		--ls-h1-lh: 1.08;
		--ls-h2: 34px;
		--ls-h2-lh: 1.16;
		--ls-h3: 21px;
		--ls-lead: 20px;
		--ls-px: 2.5rem;
		--ls-sekcja: 5.5rem;
		--ls-sekcja-duza: 8rem;
		--ls-naglowek-wys: 84px;
	}
}

/* ------------------------------------------------------------ TYPOGRAFIA */
body {
	font-family: var(--ls-tekst-font);
	font-size: var(--ls-body);
	line-height: var(--ls-body-lh);
	color: var(--ls-tekst);
	background: var(--ls-papier);
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 {
	font-family: var(--ls-display);
	font-weight: 700;
	letter-spacing: -0.022em;
	text-wrap: balance;
}

h1 { font-size: var(--ls-h1); line-height: var(--ls-h1-lh); }
h2 { font-size: var(--ls-h2); line-height: var(--ls-h2-lh); }
h3 { font-size: var(--ls-h3); line-height: var(--ls-h3-lh); font-weight: 600; letter-spacing: -0.014em; }

p { text-wrap: pretty; }
p + p { margin-top: var(--ls-4); }

a { color: var(--ls-granat); text-underline-offset: 0.18em; }
a:hover { color: var(--ls-drewno-tekst); }

strong, b { font-weight: 500; }

:focus-visible {
	outline: 3px solid var(--ls-drewno);
	outline-offset: 3px;
	border-radius: 1px;
}

/* -------------------------------------------------------------- KONTENER */
.ls-kontener {
	width: 100%;
	max-width: var(--ls-kontener);
	margin-inline: auto;
	padding-inline: var(--ls-px);
}

.ls-sekcja { padding-block: var(--ls-sekcja); }
.ls-sekcja--duza { padding-block: var(--ls-sekcja-duza); }
.ls-sekcja--papier {
	background: var(--ls-papier);
	/* Ledwo widoczny pionowy rytm — ślad desek bramy, siostrzany do
	   poziomych listew na granacie. Na progu percepcji, nie „wzorek". */
	background-image: repeating-linear-gradient(
		to right,
		rgba(22, 54, 93, 0.02) 0 1px,
		transparent 1px 64px
	);
}
.ls-sekcja--biala { background: var(--ls-biel); }

.ls-sekcja--ciemna {
	position: relative;
	background: var(--ls-antracyt);
	background-image: var(--ls-listwy);
	color: var(--ls-biel);
}

.ls-sekcja--ciemna h2,
.ls-sekcja--ciemna h3 { color: var(--ls-biel); }
.ls-sekcja--ciemna a { color: var(--ls-drewno-jasne); }

/* --- nadtytuł z listwą: kreska w proporcji panelu bramy --- */
.ls-nadtytul {
	display: flex;
	align-items: center;
	gap: var(--ls-3);
	font-family: var(--ls-display);
	font-size: var(--ls-mikro);
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--ls-drewno-tekst);
	margin-bottom: var(--ls-4);
}

.ls-nadtytul::before {
	content: "";
	flex: none;
	width: 40px;
	height: 3px;
	background: var(--ls-drewno);
}

.ls-sekcja--ciemna .ls-nadtytul { color: var(--ls-drewno-jasne); }
.ls-sekcja--ciemna .ls-nadtytul::before { background: var(--ls-drewno-jasne); }

.ls-lead {
	font-size: var(--ls-lead);
	line-height: var(--ls-lead-lh);
	color: var(--ls-tekst-lekki);
	margin-top: var(--ls-5);
}

.ls-sekcja--ciemna .ls-lead { color: rgba(255, 255, 255, 0.84); }

.ls-naglowek-sekcji { margin-bottom: var(--ls-8); }

@media (min-width: 1024px) {
	/* Nagłówek sekcji rozłożony na dwie kolumny: tytuł z lewej, zdanie
	   wprowadzające z prawej. Wszystko pod sobą czyta się jak lista. */
	.ls-naglowek-sekcji--dwie {
		display: grid;
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		gap: var(--ls-10);
		align-items: end;
	}
	.ls-naglowek-sekcji--dwie .ls-lead { margin-top: 0; }
}

/* -------------------------------------------------------------- PRZYCISKI */
.ls-btn {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--ls-2);
	min-height: 52px;
	padding: 0 var(--ls-6);
	border: 1px solid transparent;
	border-radius: var(--ls-r-mala);
	font-family: var(--ls-display);
	font-size: 15px;
	font-weight: 600;
	letter-spacing: 0.01em;
	text-decoration: none;
	cursor: pointer;
	overflow: hidden;
	transition: background-color var(--ls-czas) var(--ls-krzywa),
		color var(--ls-czas) var(--ls-krzywa),
		border-color var(--ls-czas) var(--ls-krzywa);
}

.ls-btn--glowny { background: var(--ls-granat); color: var(--ls-biel); }

/* Listwa drewna wjeżdżająca od dołu — ten sam motyw co kreski nad nagłówkami */
.ls-btn--glowny::after {
	content: "";
	position: absolute;
	inset: auto 0 0 0;
	height: 3px;
	background: var(--ls-drewno);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform var(--ls-czas) var(--ls-krzywa);
}

.ls-btn--glowny:hover { background: var(--ls-granat-ciemny); color: var(--ls-biel); }
.ls-btn--glowny:hover::after { transform: scaleX(1); }

.ls-btn--obrys {
	background: transparent;
	color: var(--ls-granat);
	border-color: var(--ls-linia-interakcja);
}

.ls-btn--obrys:hover,
.ls-btn--obrys:focus-visible {
	background: var(--ls-granat);
	border-color: var(--ls-granat);
	color: var(--ls-biel);
}

.ls-sekcja--ciemna .ls-btn--obrys { color: var(--ls-biel); border-color: rgba(255, 255, 255, 0.4); }
.ls-sekcja--ciemna .ls-btn--obrys:hover { background: var(--ls-biel); color: var(--ls-antracyt); border-color: var(--ls-biel); }

.ls-btn--drewno { background: var(--ls-drewno); color: var(--ls-na-drewnie); }
.ls-btn--drewno:hover { background: var(--ls-drewno-jasne); color: var(--ls-na-drewnie); }

/* Odnośnik tekstowy z rosnącym podkreśleniem */
.ls-link {
	display: inline-flex;
	align-items: center;
	gap: var(--ls-2);
	min-height: 44px;
	font-family: var(--ls-display);
	font-size: var(--ls-maly);
	font-weight: 600;
	text-decoration: none;
	background-image: linear-gradient(currentColor, currentColor);
	background-repeat: no-repeat;
	background-position: 0 100%;
	background-size: 0% 1.5px;
	transition: background-size var(--ls-czas) var(--ls-krzywa), color var(--ls-czas) var(--ls-krzywa);
}

.ls-link:hover { background-size: 100% 1.5px; }
.ls-link .ls-ikona { transition: transform var(--ls-czas) var(--ls-krzywa); }
.ls-link:hover .ls-ikona { transform: translateX(4px); }

/* -------------------------------------------------------------- NAGŁÓWEK */
.ls-naglowek {
	position: sticky;
	top: 0;
	z-index: 100;
	background: rgba(255, 255, 255, 0.94);
	backdrop-filter: saturate(1.4) blur(10px);
	border-bottom: 1px solid var(--ls-linia);
	transition: box-shadow var(--ls-czas) var(--ls-krzywa);
}

.ls-naglowek.jest-przewiniety { box-shadow: 0 1px 0 var(--ls-linia), 0 10px 30px rgba(20, 24, 28, 0.06); }

.ls-naglowek__rzad {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--ls-4);
	min-height: var(--ls-naglowek-wys);
}

/* Odnośnik logo to pełnoprawny cel dotyku, więc min. 44 px wysokości,
   nawet jeśli sam znak jest niższy (zmierzone: było 40 px). */
.ls-logo { display: inline-flex; align-items: center; min-height: 44px; }
.ls-logo img { max-height: 40px; width: auto; }

.ls-logo__tekst {
	font-family: var(--ls-display);
	font-weight: 700;
	font-size: 24px;
	letter-spacing: -0.03em;
	color: var(--ls-granat);
	text-decoration: none;
}

.ls-menu { display: none; }

@media (min-width: 1100px) {
	.ls-menu {
		display: flex;
		align-items: center;
		gap: var(--ls-5);
		list-style: none;
		margin: 0;
		padding: 0;
	}

	.ls-menu > li { position: relative; }

	.ls-menu a {
		position: relative;
		display: inline-flex;
		align-items: center;
		gap: var(--ls-1);
		min-height: 44px;
		font-family: var(--ls-display);
		font-size: 14px;
		font-weight: 500;
		letter-spacing: 0.005em;
		text-decoration: none;
		color: var(--ls-tekst);
		white-space: nowrap;
		transition: color var(--ls-czas) var(--ls-krzywa);
	}

	/* Podkreślenie rysowane listwą, nie ramką — rośnie od lewej */
	.ls-menu > li > a::before {
		content: "";
		position: absolute;
		left: 0;
		bottom: var(--ls-4);
		width: 100%;
		height: 2px;
		background: var(--ls-drewno);
		transform: scaleX(0);
		transform-origin: left;
		transition: transform var(--ls-czas) var(--ls-krzywa);
	}

	.ls-menu > li > a:hover::before,
	.ls-menu > .current-menu-item > a::before,
	.ls-menu > .current-menu-ancestor > a::before,
	.ls-menu > .current_page_parent > a::before { transform: scaleX(1); }

	.ls-menu a:hover,
	.ls-menu .current-menu-item > a,
	.ls-menu .current-menu-ancestor > a { color: var(--ls-granat); }

	.ls-menu .menu-item-has-children > a::after {
		content: "";
		width: 6px;
		height: 6px;
		margin-left: 2px;
		border-right: 1.5px solid currentColor;
		border-bottom: 1.5px solid currentColor;
		transform: translateY(-2px) rotate(45deg);
	}

	.ls-menu .sub-menu {
		position: absolute;
		top: 100%;
		left: -16px;
		z-index: 120;
		min-width: 316px;
		margin: 0;
		padding: var(--ls-2);
		list-style: none;
		background: var(--ls-biel);
		/* Bez obramowania: kreska 1,4:1 i tak ginęła na białym, a panel
		   oddziela od tła cień. Jedna rzecz zamiast dwóch niewyraźnych. */
		border-top: 3px solid var(--ls-drewno);
		box-shadow: var(--ls-cien-panel);
		opacity: 0;
		visibility: hidden;
		transform: translateY(-8px);
		transition: opacity var(--ls-czas) var(--ls-krzywa),
			transform var(--ls-czas) var(--ls-krzywa),
			visibility var(--ls-czas);
	}

	.ls-menu > li:hover > .sub-menu,
	.ls-menu > li:focus-within > .sub-menu {
		opacity: 1;
		visibility: visible;
		transform: translateY(0);
	}

	.ls-menu .sub-menu a {
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		gap: 1px;
		width: 100%;
		padding-inline: var(--ls-3);
		padding-block: var(--ls-2);
		font-size: var(--ls-maly);
	}

	.ls-menu__opis {
		font-size: 12px;
		font-weight: 400;
		letter-spacing: 0;
		text-transform: none;
		color: var(--ls-tekst-lekki);
		line-height: 1.35;
	}

	.ls-menu .sub-menu > li > a::before { content: none; }

	.ls-menu .sub-menu a:hover,
	.ls-menu .sub-menu .current-menu-item > a {
		background: var(--ls-papier);
		color: var(--ls-granat);
	}
}

.ls-naglowek__akcje { display: flex; align-items: center; gap: var(--ls-3); }

.ls-tel-naglowek {
	display: none;
	align-items: center;
	gap: var(--ls-2);
	min-height: 44px;
	padding-inline: var(--ls-5);
	background: var(--ls-granat);
	color: var(--ls-biel);
	font-family: var(--ls-display);
	font-weight: 600;
	font-size: 15px;
	letter-spacing: 0.01em;
	text-decoration: none;
	white-space: nowrap;
	transition: background-color var(--ls-czas) var(--ls-krzywa);
}

.ls-tel-naglowek:hover { background: var(--ls-granat-ciemny); color: var(--ls-biel); }

@media (min-width: 640px) { .ls-tel-naglowek { display: inline-flex; } }

.ls-tel-maly {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	background: var(--ls-granat);
	color: var(--ls-biel);
	text-decoration: none;
}

.ls-tel-maly:hover { background: var(--ls-granat-ciemny); color: var(--ls-biel); }

@media (min-width: 640px) { .ls-tel-maly { display: none; } }

/* --------------------------------------------------------- MENU MOBILNE */
.ls-hamburger {
	display: inline-flex;
	flex-direction: column;
	justify-content: center;
	gap: var(--ls-1);
	width: 48px;
	height: 48px;
	padding: 0 var(--ls-3);
	background: transparent;
	border: 1px solid var(--ls-linia-interakcja);
	cursor: pointer;
}

.ls-hamburger span {
	display: block;
	height: 2px;
	background: var(--ls-tekst);
	transition: transform var(--ls-czas) var(--ls-krzywa), opacity var(--ls-czas) var(--ls-krzywa);
}

.ls-hamburger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.ls-hamburger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.ls-hamburger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

@media (min-width: 1100px) { .ls-hamburger { display: none; } }

.ls-nakladka {
	position: fixed;
	inset: 0;
	z-index: 200;
	display: flex;
	flex-direction: column;
	background: var(--ls-biel);
	transform: translateX(100%);
	transition: transform 300ms var(--ls-krzywa);
	visibility: hidden;
	overflow-y: auto;
	overscroll-behavior: contain;
}

.ls-nakladka.jest-otwarta { transform: translateX(0); visibility: visible; }

body.menu-otwarte { overflow: hidden; }

.ls-nakladka__gora {
	display: flex;
	align-items: center;
	justify-content: space-between;
	min-height: var(--ls-naglowek-wys);
	padding-inline: var(--ls-px);
	border-bottom: 1px solid var(--ls-linia);
}

.ls-nakladka__zamknij {
	width: 48px;
	height: 48px;
	background: transparent;
	border: 1px solid var(--ls-linia-interakcja);
	font-size: 22px;
	line-height: 1;
	cursor: pointer;
}

.ls-nakladka__menu {
	list-style: none;
	margin: 0;
	padding: var(--ls-4) var(--ls-px) var(--ls-6);
}

.ls-nakladka__menu > li > a {
	display: flex;
	align-items: center;
	min-height: 58px;
	font-family: var(--ls-display);
	font-size: 21px;
	font-weight: 700;
	letter-spacing: -0.02em;
	text-decoration: none;
	color: var(--ls-tekst);
	border-bottom: 1px solid var(--ls-linia);
}

.ls-nakladka__menu > .current-menu-item > a { color: var(--ls-granat); }

.ls-nakladka__menu .sub-menu {
	list-style: none;
	margin: 0;
	padding: var(--ls-2) 0 var(--ls-3) var(--ls-5);
	border-left: 2px solid var(--ls-drewno);
	margin-left: 2px;
}

.ls-nakladka__menu .sub-menu a {
	display: flex;
	align-items: center;
	min-height: 50px;
	font-size: 17px;
	font-weight: 400;
	text-decoration: none;
	color: var(--ls-tekst-lekki);
}

.ls-nakladka__stopka {
	margin-top: auto;
	padding: var(--ls-5) var(--ls-px) var(--ls-8);
	display: grid;
	gap: var(--ls-3);
	background: var(--ls-papier);
}

/* ------------------------------------------------------------------ HERO */
/* Delikatna faktura listwy w tle hero: mocniejsza po prawej, za kolażem,
   wygaszona po lewej, żeby nie szumiała pod tekstem. */
.ls-hero::before {
	content: "";
	position: absolute;
	inset: 0;
	background-image:
		linear-gradient(to right, var(--ls-biel) 0%, var(--ls-biel) 42%, rgba(255, 255, 255, 0) 78%),
		repeating-linear-gradient(to bottom, rgba(20, 24, 28, 0.04) 0 1px, transparent 1px 15px);
	pointer-events: none;
}

.ls-hero > .ls-kontener { position: relative; }

.ls-hero {
	position: relative;
	background: var(--ls-biel);
	/* `overflow: hidden` obcinało też w PIONIE i na 1920 px ucinało drugi
	   wiersz podpisu pod zdjęciem. Poziomo i tak przycina `body`. */
	overflow-x: clip;
}

.ls-hero__siatka {
	display: grid;
	gap: var(--ls-6);
	padding-block: var(--ls-7) 0;
}

@media (min-width: 1024px) {
	.ls-hero__siatka {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1.06fr);
		gap: var(--ls-12);
		align-items: center;
		min-height: 560px;
		padding-block: var(--ls-8);
	}
}

.ls-hero__tresc { position: relative; z-index: 2; }

.ls-hero h1 { margin-top: var(--ls-2); }

.ls-hero__przyciski {
	display: grid;
	gap: var(--ls-3);
	margin-top: var(--ls-7);
}

/* Na wąskim telefonie przyciski na pełną szerokość kolumny: równe, wygodne
   pod kciuk i bez dwóch różnych szerokości obok siebie. Od 420 px wracają
   do naturalnej szerokości w rzędzie. */
@media (min-width: 420px) {
	.ls-hero__przyciski {
		display: flex;
		flex-wrap: wrap;
	}
}

.ls-hero__fakty {
	display: flex;
	flex-wrap: wrap;
	gap: var(--ls-3) var(--ls-6);
	margin-top: var(--ls-7);
	padding-top: var(--ls-5);
	border-top: 1px solid var(--ls-linia);
	font-size: var(--ls-maly);
	color: var(--ls-tekst-lekki);
}

.ls-hero__fakt { display: inline-flex; align-items: center; gap: var(--ls-2); }
.ls-hero__fakt .ls-ikona { color: var(--ls-drewno-tekst); flex: none; }

/* Zdjęcie wychodzi poza kontener do krawędzi okna. Materiał klienta jest
   najmocniejszy, jaki mamy, i ma dostać miejsce, a nie miniaturę. */
.ls-hero__obraz {
	position: relative;
	margin-inline: calc(var(--ls-px) * -1);
}

@media (min-width: 1024px) {
	.ls-hero__obraz {
		margin-right: calc((100vw - min(100vw, var(--ls-kontener))) / -2 - var(--ls-px));
		margin-left: 0;
	}
}

.ls-hero__obraz img {
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
}

@media (min-width: 1024px) {
	.ls-hero__obraz img { aspect-ratio: 5 / 4; min-height: 520px; }
}

/* Podpis jako biała karta zachodząca na zdjęcie, nie ciemny pasek na nim */
.ls-hero__podpis {
	position: relative;
	margin: -32px var(--ls-px) 0;
	padding: var(--ls-4) var(--ls-5);
	background: var(--ls-biel);
	border-left: 3px solid var(--ls-drewno);
	box-shadow: var(--ls-cien);
	font-size: var(--ls-maly);
	line-height: 1.45;
	color: var(--ls-tekst-lekki);
	max-width: 420px;
}

@media (min-width: 1024px) {
	.ls-hero__podpis { margin-left: calc(var(--ls-6) * -1); margin-top: -56px; }
	/* Podpis zachodzi na zdjęcie i wystaje pod nie. Sekcja musi mieć na to
	   miejsce, inaczej wchodzi w pasek liczb. */
	.ls-hero__siatka { padding-bottom: var(--ls-10); }
}

/* ---------------------------------------------------------------- LICZBY */
.ls-liczby {
	background: var(--ls-granat);
	background-image: var(--ls-listwy);
	color: var(--ls-biel);
}

.ls-liczby__siatka {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	padding-block: var(--ls-6);
}

@media (min-width: 900px) {
	.ls-liczby__siatka { grid-template-columns: repeat(4, 1fr); padding-block: var(--ls-7); }
}

.ls-liczba {
	display: grid;
	gap: var(--ls-2);
	align-content: start;
	padding: var(--ls-4) var(--ls-4) var(--ls-4) 0;
	border-top: 1px solid rgba(255, 255, 255, 0.18);
}

@media (min-width: 900px) {
	.ls-liczba { padding-inline: var(--ls-6) 0; }
	.ls-liczba:not(:first-child) { border-left: 1px solid rgba(255, 255, 255, 0.14); }
	.ls-liczba:first-child { padding-left: 0; }
}

.ls-liczba__wartosc {
	font-family: var(--ls-display);
	font-size: 30px;
	line-height: 1.05;
	font-weight: 700;
	letter-spacing: -0.03em;
	color: var(--ls-biel);
}

@media (min-width: 900px) { .ls-liczba__wartosc { font-size: 36px; } }

.ls-liczba__opis {
	font-size: 14px;
	line-height: 1.45;
	color: rgba(255, 255, 255, 0.74);
}

/* ------------------------------------------------------------ CO ROBIMY */
/* Pierwsza pozycja to wyróżniona specjalizacja, reszta jako lista bez ramek.
   Pięć jednakowych kart w ramkach to najczęstszy sygnał szablonu. */
.ls-oferta { display: grid; gap: var(--ls-8); }

.ls-oferta__glowna {
	display: grid;
	gap: var(--ls-5);
	background: var(--ls-biel);
	border-top: 3px solid var(--ls-drewno);
	text-decoration: none;
	color: inherit;
}

@media (min-width: 900px) {
	.ls-oferta__glowna { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 0; }
}

.ls-oferta__glowna-obraz { overflow: hidden; }

.ls-oferta__glowna-obraz img {
	width: 100%;
	height: 100%;
	aspect-ratio: 16 / 10;
	object-fit: cover;
	transition: transform var(--ls-czas-wolny) var(--ls-krzywa);
}

.ls-oferta__glowna:hover .ls-oferta__glowna-obraz img { transform: scale(1.035); }

.ls-oferta__glowna-tresc {
	display: grid;
	align-content: center;
	gap: var(--ls-3);
	padding: var(--ls-6);
}

@media (min-width: 900px) { .ls-oferta__glowna-tresc { padding: var(--ls-8); } }

.ls-oferta__lista {
	display: grid;
	gap: var(--ls-6);
	grid-template-columns: 1fr;
}

@media (min-width: 640px) { .ls-oferta__lista { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .ls-oferta__lista { grid-template-columns: repeat(4, 1fr); } }

.ls-pozycja {
	display: flex;
	flex-direction: column;
	gap: var(--ls-3);
	text-decoration: none;
	color: inherit;
}

.ls-pozycja__obraz { overflow: hidden; background: var(--ls-papier-ciemny); }

.ls-pozycja__obraz img {
	width: 100%;
	/* Na telefonie kadr poziomy: pionowy 4:5 rozciągał sekcję „Co robimy"
	   do 3200 px, czyli czterech ekranów samych kafli. */
	aspect-ratio: 4 / 3;
	object-fit: cover;
	transition: transform var(--ls-czas-wolny) var(--ls-krzywa);
}

.ls-pozycja:hover .ls-pozycja__obraz img { transform: scale(1.04); }

/* Kadr pionowy dopiero wtedy, gdy kafle stoją w czterech wąskich kolumnach.
   Na tablecie (dwie szerokie kolumny) 4:5 dawało zdjęcie wysokie na 550 px
   i sekcja wyglądała na rozdętą. */
@media (min-width: 1200px) {
	.ls-pozycja__obraz img { aspect-ratio: 4 / 5; }
}

.ls-pozycja__tytul {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--ls-3);
	padding-top: var(--ls-3);
	border-top: 1px solid var(--ls-linia);
	font-family: var(--ls-display);
	font-size: var(--ls-h3);
	font-weight: 600;
	letter-spacing: -0.015em;
	color: var(--ls-granat);
	transition: border-color var(--ls-czas) var(--ls-krzywa);
}

.ls-pozycja:hover .ls-pozycja__tytul { border-color: var(--ls-drewno); }
.ls-pozycja__tytul .ls-ikona { flex: none; color: var(--ls-drewno-tekst); transition: transform var(--ls-czas) var(--ls-krzywa); }
.ls-pozycja:hover .ls-pozycja__tytul .ls-ikona { transform: translateX(4px); }

.ls-pozycja__opis { font-size: var(--ls-maly); line-height: 1.55; color: var(--ls-tekst-lekki); }

/* --------------------------------------------------------------- RÓŻNICA */
.ls-roznica__siatka { display: grid; gap: var(--ls-8); }

@media (min-width: 1024px) {
	.ls-roznica__siatka { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--ls-12); align-items: center; }
}

.ls-roznica__obraz { overflow: hidden; }
.ls-roznica__obraz img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }

@media (min-width: 1024px) {
	/* Zdjęcie do krawędzi okna z prawej strony */
	.ls-roznica__obraz {
		margin-right: calc((100vw - min(100vw, var(--ls-kontener))) / -2 - var(--ls-px));
	}
	.ls-roznica__obraz img { aspect-ratio: 1 / 1; min-height: 520px; }

	/* W trybie pokazu obrazy są absolute i figura traci wysokość z treści —
	   bez tej reguły pokaz zapadał się do paska 320 px na środku kolumny. */
	.ls-roznica__obraz--pokaz { height: 560px; }
	.ls-roznica__obraz--pokaz .ls-pokaz { position: absolute; inset: 0; min-height: 0; }
}

.ls-roznica__obraz--pokaz { position: relative; overflow: hidden; }

@media (max-width: 1023px) {
	.ls-roznica__obraz--pokaz { height: 340px; }
	.ls-roznica__obraz--pokaz .ls-pokaz { position: absolute; inset: 0; min-height: 0; }
}

.ls-punkty-lista { display: grid; margin-top: var(--ls-7); }

.ls-punkt-lista {
	display: grid;
	grid-template-columns: 3rem 1fr;
	gap: var(--ls-4);
	align-items: start;
	padding-block: var(--ls-3);
}

.ls-punkt-lista__nr {
	position: relative;
	font-family: var(--ls-display);
	font-size: 22px;
	font-weight: 700;
	line-height: 1;
	letter-spacing: 0.02em;
	color: var(--ls-drewno-jasne);
	padding-bottom: var(--ls-2);
}

/* Kreska listwy pod numerem — ten sam znak co przy nadtytułach. */
.ls-punkt-lista__nr::after {
	content: "";
	position: absolute;
	left: 1px;
	bottom: 0;
	width: 22px;
	height: 3px;
	background: var(--ls-drewno);
}

.ls-link--jasny { color: var(--ls-drewno-jasne); }
.ls-link--jasny::after { background: var(--ls-drewno-jasne); }
.ls-link--jasny:hover { color: var(--ls-biel); }

.ls-roznica__cta { margin-top: var(--ls-5); }

/* ------------------------------------------------------------ REALIZACJE */
/* Mozaika: pierwszy obiekt dostaje podwójne pole. Równe kafelki spłaszczają
   różnicę między bramą 11 na 7 metrów a bramą do garażu. */
.ls-realizacje {
	display: grid;
	gap: var(--ls-4);
	grid-template-columns: 1fr;
}

/* Wysokość wiersza podana wprost. `grid-auto-rows: 1fr` razem z `min-height`
   na kafelku rozdmuchało wiersze do 1400 px i galeria zajęła pół strony. */
@media (min-width: 700px) {
	.ls-realizacje { grid-template-columns: repeat(3, 1fr); grid-auto-rows: 218px; }
	.ls-realizacja:first-child { grid-column: span 2; grid-row: span 2; }
}

@media (min-width: 1100px) {
	.ls-realizacje { grid-auto-rows: 258px; }
}

.ls-realizacja {
	position: relative;
	overflow: hidden;
	background: var(--ls-antracyt);
}

.ls-realizacja img {
	width: 100%;
	height: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	transition: transform var(--ls-czas-wolny) var(--ls-krzywa);
}

@media (min-width: 700px) {
	.ls-realizacja img { aspect-ratio: auto; height: 100%; }
}

.ls-realizacja:hover img { transform: scale(1.045); }

.ls-realizacja__podpis {
	position: absolute;
	inset-inline: 0;
	bottom: 0;
	padding: var(--ls-8) var(--ls-4) var(--ls-4);
	background: linear-gradient(to top, rgba(14, 24, 40, 0.9) 20%, rgba(14, 24, 40, 0));
	color: var(--ls-biel);
	font-family: var(--ls-display);
	font-size: var(--ls-maly);
	font-weight: 600;
	line-height: 1.35;
	letter-spacing: -0.01em;
	transform: translateY(0);
	transition: transform var(--ls-czas) var(--ls-krzywa);
}

.ls-realizacja__podpis::before {
	content: "";
	display: block;
	width: 28px;
	height: 2px;
	margin-bottom: var(--ls-2);
	background: var(--ls-drewno);
	transform: scaleX(0.4);
	transform-origin: left;
	transition: transform var(--ls-czas) var(--ls-krzywa);
}

.ls-realizacja:hover .ls-realizacja__podpis::before { transform: scaleX(1); }

/* ----------------------------------------------------------- AUTORYZACJE */
.ls-autoryzacje__siatka { display: grid; gap: var(--ls-8); }

@media (min-width: 1024px) {
	.ls-autoryzacje__siatka { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: var(--ls-10); align-items: start; }
}

.ls-zakresy { display: grid; margin-top: var(--ls-6); }

@media (min-width: 700px) { .ls-zakresy { grid-template-columns: repeat(2, 1fr); column-gap: var(--ls-7); } }

.ls-zakres {
	display: grid;
	grid-template-columns: 1.75rem 1fr;
	gap: var(--ls-3);
	align-items: baseline;
	padding-block: var(--ls-3);
	border-top: 1px solid var(--ls-linia);
	font-size: var(--ls-maly);
	line-height: 1.5;
}

.ls-zakres__litera {
	font-family: var(--ls-display);
	font-size: 17px;
	font-weight: 700;
	color: var(--ls-drewno-tekst);
}

.ls-skany { display: grid; gap: var(--ls-4); grid-template-columns: repeat(2, 1fr); }

.ls-skan {
	padding: var(--ls-3);
	background: var(--ls-biel);
	box-shadow: var(--ls-cien);
	transition: transform var(--ls-czas) var(--ls-krzywa), box-shadow var(--ls-czas) var(--ls-krzywa);
}

.ls-skan:hover { transform: translateY(-3px); box-shadow: var(--ls-cien-mocny); }
.ls-skan img { width: 100%; }

.ls-skan__podpis {
	display: block;
	margin-top: var(--ls-2);
	font-size: var(--ls-mikro);
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--ls-tekst-lekki);
}

/* -------------------------------------------------------------- ODDZIAŁY */
.ls-oddzialy { display: grid; gap: var(--ls-6); }

@media (min-width: 900px) { .ls-oddzialy { grid-template-columns: repeat(2, 1fr); gap: var(--ls-7); } }

.ls-oddzial {
	display: flex;
	flex-direction: column;
	background: var(--ls-biel);
	border-top: 3px solid var(--ls-granat);
}

.ls-oddzial__tresc { display: grid; gap: var(--ls-2); padding: var(--ls-6); }

@media (min-width: 640px) { .ls-oddzial__tresc { padding: var(--ls-7); } }

.ls-oddzial h3 { margin-bottom: var(--ls-2); }

.ls-oddzial__wiersz {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: var(--ls-3);
	align-items: center;
	overflow-wrap: anywhere;
	font-size: var(--ls-maly);
}

.ls-oddzial__wiersz .ls-ikona { color: var(--ls-drewno-tekst); flex: none; }

.ls-oddzial__wiersz a {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	font-weight: 500;
	text-decoration: none;
}

.ls-oddzial__wiersz a:hover { text-decoration: underline; }

.ls-mapa {
	border: 0;
	width: 100%;
	aspect-ratio: 16 / 10;
	display: block;
	filter: grayscale(0.35) contrast(1.05);
	transition: filter var(--ls-czas-wolny) var(--ls-krzywa);
}

.ls-oddzial:hover .ls-mapa { filter: grayscale(0) contrast(1); }

/* ------------------------------------------------------------- FORMULARZ */
.ls-form-sekcja { background: var(--ls-biel); }

.ls-form__siatka { display: grid; gap: var(--ls-8); }

@media (min-width: 1024px) {
	.ls-form__siatka {
		grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
		gap: var(--ls-12);
		/* stretch, nie start: biała karta ma sięgać tak wysoko jak kolumna
		   obok, inaczej wisi krótsza i sekcja wygląda na niedokończoną. */
		align-items: stretch;
	}
}

.ls-form { display: grid; gap: var(--ls-5); }
.ls-form__para { display: grid; gap: var(--ls-5); }

@media (min-width: 640px) { .ls-form__para { grid-template-columns: repeat(2, 1fr); } }

.ls-pole { display: grid; gap: var(--ls-2); }

.ls-pole label {
	font-family: var(--ls-display);
	font-size: var(--ls-mikro);
	font-weight: 600;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	color: var(--ls-tekst-lekki);
}

/* Pola bez szarego wypełnienia: sama linia pod spodem. Czyta się jak
   formularz techniczny, a nie jak domyślny widget. */
.ls-pole input,
.ls-pole select,
.ls-pole textarea {
	min-height: 50px;
	padding: var(--ls-3) 0;
	background: transparent;
	border: 0;
	border-bottom: 1px solid var(--ls-linia-interakcja);
	border-radius: 0;
	font-size: 16px;
	transition: border-color var(--ls-czas) var(--ls-krzywa);
}

.ls-pole textarea { min-height: 128px; resize: vertical; line-height: 1.55; }

.ls-pole input:hover,
.ls-pole select:hover,
.ls-pole textarea:hover { border-bottom-color: var(--ls-tekst-lekki); }

.ls-pole input:focus,
.ls-pole select:focus,
.ls-pole textarea:focus {
	border-bottom-color: var(--ls-granat);
	border-bottom-width: 2px;
}

.ls-pole input:focus-visible,
.ls-pole select:focus-visible,
.ls-pole textarea:focus-visible {
	outline: 3px solid var(--ls-drewno);
	outline-offset: 4px;
}

.ls-pole--pulapka {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.ls-zgoda {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: var(--ls-3);
	align-items: start;
	padding-block: var(--ls-2);
	font-size: 14px;
	line-height: 1.5;
	color: var(--ls-tekst-lekki);
	cursor: pointer;
}

.ls-zgoda input {
	width: 24px;
	height: 24px;
	min-height: 24px;
	margin-top: 1px;
	accent-color: var(--ls-granat);
}

.ls-form__odpowiedz {
	display: none;
	padding: var(--ls-4);
	font-size: var(--ls-maly);
	line-height: 1.5;
	border-left: 3px solid;
}

.ls-form__odpowiedz.jest-widoczna { display: block; }
.ls-form__odpowiedz--ok { background: var(--ls-ok-tlo); color: var(--ls-ok-tekst); border-color: var(--ls-ok-linia); }
.ls-form__odpowiedz--blad { background: var(--ls-blad-tlo); color: var(--ls-blad-tekst); border-color: var(--ls-blad-linia); }

/* Blok kontaktowy obok formularza */
.ls-form__kontakty {
	display: grid;
	gap: var(--ls-4);
	margin-top: var(--ls-7);
}

@media (min-width: 480px) {
	.ls-form__kontakty { grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); }
}

/* Punkt jako mała karta: miasto nadtytułem, pod nim komplet numerów
   i adres. Wcześniej stał tu jeden numer bez maila, więc gość musiał
   szukać reszty w stopce. */
.ls-form__kontakt {
	display: grid;
	gap: var(--ls-1);
	padding: var(--ls-4) var(--ls-5);
	background: rgba(255, 255, 255, 0.05);
	border-left: 3px solid var(--ls-drewno);
	font-size: var(--ls-maly);
}

.ls-form__kontakt-miasto {
	font-family: var(--ls-display);
	font-size: var(--ls-mikro);
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--ls-drewno-jasne);
	margin-bottom: var(--ls-1);
}

.ls-form__kontakt-tel,
.ls-form__kontakt-mail {
	display: inline-flex;
	align-items: center;
	gap: var(--ls-2);
	min-height: 44px;
	text-decoration: none;
	transition: color var(--ls-czas) var(--ls-krzywa);
}

.ls-form__kontakt-tel {
	font-family: var(--ls-display);
	font-weight: 600;
	font-size: var(--ls-body);
	letter-spacing: 0.01em;
}

.ls-form__kontakt-mail { font-size: var(--ls-maly); }

.ls-form__kontakt .ls-ikona { flex: none; color: var(--ls-drewno-tekst); }

/* ------------------------------------------------------------------ FAQ */
.ls-faq { display: grid; }

.ls-faq__pozycja { border-top: 1px solid var(--ls-linia); }
.ls-faq__pozycja:last-child { border-bottom: 1px solid var(--ls-linia); }

.ls-faq__pytanie {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--ls-4);
	width: 100%;
	min-height: 68px;
	padding: var(--ls-4) 0;
	background: transparent;
	border: 0;
	cursor: pointer;
	text-align: left;
	font-family: var(--ls-display);
	font-size: var(--ls-h3);
	font-weight: 600;
	letter-spacing: -0.015em;
	color: var(--ls-granat);
	transition: color var(--ls-czas) var(--ls-krzywa);
}

.ls-faq__pytanie:hover { color: var(--ls-drewno-tekst); }

.ls-faq__znak {
	flex: none;
	width: 22px;
	height: 22px;
	position: relative;
	transition: transform var(--ls-czas) var(--ls-krzywa);
}

.ls-faq__znak::before,
.ls-faq__znak::after {
	content: "";
	position: absolute;
	inset: 50% 0 auto 0;
	height: 2px;
	background: currentColor;
	transition: transform var(--ls-czas) var(--ls-krzywa);
}

.ls-faq__znak::after { transform: rotate(90deg); }
.ls-faq__pytanie[aria-expanded="true"] .ls-faq__znak::after { transform: rotate(0deg); }
.ls-faq__pytanie:hover .ls-faq__znak { transform: scale(1.12); }

.ls-faq__odpowiedz { padding: 0 0 var(--ls-5); color: var(--ls-tekst-lekki); }
.ls-faq__odpowiedz[hidden] { display: none; }

/* ---------------------------------------------------------------- STOPKA */
.ls-stopka {
	background: var(--ls-antracyt-ciemny);
	background-image: var(--ls-listwy);
	color: rgba(255, 255, 255, 0.78);
	font-size: var(--ls-maly);
	border-top: 3px solid var(--ls-drewno);
}

.ls-stopka__siatka {
	display: grid;
	gap: var(--ls-7);
	padding-block: var(--ls-10) var(--ls-8);
}

@media (min-width: 900px) {
	.ls-stopka__siatka { grid-template-columns: 1.4fr 1fr 1fr; gap: var(--ls-10); }
}

.ls-stopka h3 {
	position: relative;
	font-size: var(--ls-mikro);
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--ls-drewno-jasne);
	margin-bottom: var(--ls-5);
	padding-bottom: var(--ls-2);
}

/* Kreska listwy pod nagłówkiem kolumny — ten sam znak co przy nadtytułach. */
.ls-stopka h3::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	width: 22px;
	height: 3px;
	background: var(--ls-drewno);
}

.ls-stopka a {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	color: rgba(255, 255, 255, 0.84);
	text-decoration: none;
	transition: color var(--ls-czas) var(--ls-krzywa);
}

.ls-stopka a:hover {
	color: var(--ls-drewno-jasne);
	text-decoration: underline;
	text-underline-offset: 0.22em;
}

.ls-stopka__lista { display: grid; }

.ls-stopka__lista a { gap: var(--ls-2); }
.ls-stopka__lista .ls-ikona { color: var(--ls-drewno-jasne); flex: none; }

.ls-stopka__social { gap: var(--ls-2); }
.ls-stopka__social .ls-ikona { color: var(--ls-drewno-jasne); }
.ls-stopka__logo img { max-height: 38px; width: auto; margin-bottom: var(--ls-5); }
.ls-stopka__adres { line-height: 1.6; }
.ls-stopka__adres strong { color: var(--ls-biel); font-weight: 600; }

.ls-stopka__dol {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: var(--ls-3);
	padding-block: var(--ls-4);
	border-top: 1px solid var(--ls-linia-ciemna);
	font-size: 13px;
	color: rgba(255, 255, 255, 0.6);
}

/* -------------------------------------------------- SŁUCHAWKA I COOKIES */
.ls-tel-plywajacy {
	position: fixed;
	right: var(--ls-sluchawka-margines);
	bottom: var(--ls-sluchawka-margines);
	z-index: 90;
	display: none;
	align-items: center;
	justify-content: center;
	width: var(--ls-sluchawka);
	height: var(--ls-sluchawka);
	border-radius: 50%;
	background: var(--ls-granat);
	color: var(--ls-biel);
	box-shadow: var(--ls-cien-mocny);
	text-decoration: none;
}

.ls-tel-plywajacy.jest-widoczny { display: inline-flex; }

@media (min-width: 900px) { .ls-tel-plywajacy { display: none !important; } }

.ls-cookies {
	position: fixed;
	inset-inline: 0;
	bottom: 0;
	z-index: 95;
	display: none;
	background: rgba(20, 24, 28, 0.97);
	color: var(--ls-biel);
	transform: translateY(100%);
	transition: transform 300ms var(--ls-krzywa);
}

.ls-cookies.jest-widoczny { display: block; transform: translateY(0); }

.ls-cookies__rzad {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--ls-3);
	padding-block: var(--ls-3);
	/* Miejsce dla pływającej słuchawki: jej rozmiar plus dwa odstępy.
	   Bez tego pasek zasłaniał przycisk telefonu na komórce. */
	padding-right: calc(var(--ls-sluchawka) + 2 * var(--ls-sluchawka-margines));
	font-size: 14px;
	line-height: 1.45;
}

@media (min-width: 900px) { .ls-cookies__rzad { padding-right: var(--ls-px); } }

.ls-cookies a { color: var(--ls-drewno-jasne); }

/* -------------------------------------------------------- TREŚĆ PODSTRON */
.ls-tresc h2 { margin-top: var(--ls-8); margin-bottom: var(--ls-4); }
.ls-tresc h2:first-child { margin-top: 0; }
.ls-tresc h3 { margin-top: var(--ls-6); margin-bottom: var(--ls-2); }
.ls-tresc p { margin-bottom: var(--ls-4); }
.ls-tresc ul, .ls-tresc ol { margin: 0 0 var(--ls-5); padding-left: 0; list-style: none; }

.ls-tresc ul li {
	position: relative;
	padding-left: var(--ls-6);
	margin-bottom: var(--ls-3);
}

/* Punktor jako listwa, ten sam motyw co reszta strony */
.ls-tresc ul li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.72em;
	width: 18px;
	height: 2px;
	background: var(--ls-drewno);
}

.ls-tresc ol { counter-reset: ls; }
.ls-tresc ol li { counter-increment: ls; position: relative; padding-left: var(--ls-6); margin-bottom: var(--ls-3); }
.ls-tresc ol li::before {
	content: counter(ls) ".";
	position: absolute;
	left: 0;
	font-family: var(--ls-display);
	font-weight: 700;
	color: var(--ls-drewno-tekst);
}

.ls-tresc img { margin-block: var(--ls-6); }
.ls-tresc table { width: 100%; border-collapse: collapse; margin-bottom: var(--ls-5); }
.ls-tresc th, .ls-tresc td { padding: var(--ls-3); border-bottom: 1px solid var(--ls-linia); text-align: left; }

/* Nagłówek podstrony */
.ls-naglowek-strony { background: var(--ls-biel); overflow-x: clip; }

.ls-naglowek-strony__siatka {
	display: grid;
	gap: var(--ls-6);
	padding-block: var(--ls-7) 0;
}

@media (min-width: 1024px) {
	.ls-naglowek-strony__siatka {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		gap: var(--ls-10);
		align-items: center;
		padding-block: var(--ls-8);
		min-height: 420px;
	}
}

.ls-naglowek-strony__obraz { margin-inline: calc(var(--ls-px) * -1); overflow: hidden; }

@media (min-width: 1024px) {
	.ls-naglowek-strony__obraz {
		margin-right: calc((100vw - min(100vw, var(--ls-kontener))) / -2 - var(--ls-px));
		margin-left: 0;
	}
}

.ls-naglowek-strony__obraz img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }

@media (min-width: 1024px) { .ls-naglowek-strony__obraz img { aspect-ratio: 4 / 3; min-height: 420px; } }

.ls-okruszki {
	display: flex;
	align-items: center;
	gap: var(--ls-2);
	font-size: 13px;
	letter-spacing: 0.02em;
	color: var(--ls-tekst-lekki);
	padding-block: var(--ls-3);
}

.ls-okruszki a {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	text-decoration: none;
}

.ls-okruszki a:hover { text-decoration: underline; }

/* ------------------------------------------------------------------ BLOG */
.ls-wpisy { display: grid; gap: var(--ls-7); }

@media (min-width: 700px) { .ls-wpisy { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .ls-wpisy { grid-template-columns: repeat(3, 1fr); } }

.ls-wpis { display: flex; flex-direction: column; gap: var(--ls-3); }
.ls-wpis__obraz { overflow: hidden; background: var(--ls-papier-ciemny); }
.ls-wpis__obraz img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; transition: transform var(--ls-czas-wolny) var(--ls-krzywa); }
.ls-wpis:hover .ls-wpis__obraz img { transform: scale(1.04); }
.ls-wpis__tresc { display: flex; flex-direction: column; gap: var(--ls-2); flex: 1 1 auto; }

.ls-wpis__data {
	font-family: var(--ls-display);
	font-size: var(--ls-mikro);
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--ls-drewno-tekst);
}

.ls-wpis__tytul { font-size: var(--ls-h3); }
.ls-wpis__tytul a { text-decoration: none; color: var(--ls-granat); }
.ls-wpis__tytul a:hover { color: var(--ls-drewno-tekst); }

.ls-strony-lista { display: flex; flex-wrap: wrap; gap: var(--ls-2); margin-top: var(--ls-8); }

.ls-strony-lista .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 48px;
	min-height: 48px;
	padding-inline: var(--ls-3);
	border: 1px solid var(--ls-linia-interakcja);
	background: var(--ls-biel);
	font-family: var(--ls-display);
	font-weight: 600;
	text-decoration: none;
}

.ls-strony-lista .page-numbers.current,
.ls-strony-lista .page-numbers:hover {
	background: var(--ls-granat);
	border-color: var(--ls-granat);
	color: var(--ls-biel);
}

/* ------------------------------------------------------------- ANIMACJE */
.ls-anim {
	opacity: 0;
	transform: translateY(18px);
	transition: opacity 620ms var(--ls-krzywa), transform 620ms var(--ls-krzywa);
}

.ls-anim.jest-widoczny { opacity: 1; transform: none; }

/* Gdy skrypt nie wystartuje, treść MUSI być widoczna
   (memory: lekcja-animacja-wejscia-chowa-tresc). */
.no-js .ls-anim { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
	.ls-anim { opacity: 1; transform: none; }
}

html { scroll-behavior: smooth; scroll-padding-top: calc(var(--ls-naglowek-wys) + 24px); }

.ls-pomin {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 300;
	padding: var(--ls-3) var(--ls-4);
	background: var(--ls-granat);
	color: var(--ls-biel);
}

.ls-pomin:focus { left: 0; }

@media print {
	.ls-naglowek, .ls-cookies, .ls-tel-plywajacy, .ls-form-sekcja { display: none !important; }
}

/* ------------------------------------------------ EKRAN W PRZYGOTOWANIU */
/* Tryb prezentacji: ZASTĘPUJE treść podstrony, nie stoi nad nią.
   Wysokość w `svh`, nie `vh` — na iOS pasek adresu zmienia `vh` w trakcie
   przewijania i sekcja skacze. */
.ls-przygotowanie {
	position: relative;
	min-height: calc(100svh - var(--ls-naglowek-wys));
	display: grid;
	align-items: center;
	background: var(--ls-papier);
	overflow: hidden;
}

.ls-przygotowanie::before {
	/* Ten sam motyw listwy co w ciemnych sekcjach, tylko na jasnym tle. */
	content: "";
	position: absolute;
	inset: 0;
	background-image: repeating-linear-gradient(
		to bottom,
		rgba(20, 24, 28, 0.045) 0 1px,
		transparent 1px 15px
	);
	pointer-events: none;
}

.ls-przygotowanie__srodek {
	position: relative;
	z-index: 1;
	padding-block: var(--ls-10);
}

@media (min-width: 1024px) {
	.ls-przygotowanie__srodek {
		display: grid;
		grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
		gap: var(--ls-12);
		align-items: center;
	}
}

.ls-przygotowanie h1 { margin-top: var(--ls-2); }

.ls-przygotowanie__punkty {
	display: grid;
	margin-top: var(--ls-7);
	list-style: none;
	padding: 0;
}

.ls-przygotowanie__punkty li {
	position: relative;
	padding: var(--ls-3) 0 var(--ls-3) var(--ls-6);
	border-top: 1px solid var(--ls-linia);
	font-size: var(--ls-maly);
	color: var(--ls-tekst-lekki);
}

.ls-przygotowanie__punkty li:last-child { border-bottom: 1px solid var(--ls-linia); }

.ls-przygotowanie__punkty li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 1.55em;
	width: 18px;
	height: 2px;
	background: var(--ls-drewno);
}

.ls-przygotowanie__licznik {
	margin-top: var(--ls-6);
	font-size: 14px;
	color: var(--ls-tekst-lekki);
}

.ls-przygotowanie__licznik strong {
	font-family: var(--ls-display);
	font-weight: 700;
	color: var(--ls-granat);
}

.ls-przygotowanie__znak { display: none; }

@media (min-width: 1024px) {
	.ls-przygotowanie__znak {
		display: block;
		justify-self: end;
		width: 100%;
		max-width: 380px;
		opacity: 0.09;
	}
	.ls-przygotowanie__znak img { width: 100%; height: auto; }
}

/* ------------------------------------------------------ PAS Z CYTATEM */
.ls-cytat {
	position: relative;
	display: grid;
	align-items: center;
	min-height: 320px;
	overflow: hidden;
	background: var(--ls-antracyt-ciemny);
	isolation: isolate;
}

@media (min-width: 1024px) { .ls-cytat { min-height: 460px; } }

.ls-cytat__tlo {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	z-index: -2;
}

/* Zasłona liczona pod kontrast, nie na oko: tekst na zdjęciu potrafi mieć
   1,1:1 w jasnym miejscu kadru (memory: lekcja-kontrast-tekstu-na-zdjeciu). */
.ls-cytat__zaslona {
	position: absolute;
	inset: 0;
	z-index: -1;
	background: linear-gradient(
		100deg,
		rgba(14, 24, 40, 0.94) 0%,
		rgba(14, 24, 40, 0.86) 45%,
		rgba(14, 24, 40, 0.55) 100%
	);
}

.ls-cytat__tresc { padding-block: var(--ls-10); }

.ls-cytat__tekst {
	margin: 0;
	font-family: var(--ls-display);
	font-size: 21px;
	line-height: 1.3;
	font-weight: 700;
	letter-spacing: -0.02em;
	color: var(--ls-biel);
	text-wrap: balance;
}

@media (min-width: 700px) { .ls-cytat__tekst { font-size: 25px; } }
@media (min-width: 1024px) { .ls-cytat__tekst { font-size: 29px; } }

.ls-cytat__tekst::before {
	content: "";
	display: block;
	width: 56px;
	height: 3px;
	margin-bottom: var(--ls-5);
	background: var(--ls-drewno-jasne);
}

.ls-cytat__podpis {
	margin-top: var(--ls-5);
	font-family: var(--ls-display);
	font-size: var(--ls-mikro);
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--ls-drewno-jasne);
}

/* --------------------------------------- SZLIF: LICZBY I MIKROTYPOGRAFIA */
.ls-liczby__siatka { padding-block: var(--ls-7); }

@media (min-width: 900px) { .ls-liczby__siatka { padding-block: var(--ls-8); } }

.ls-liczba__wartosc {
	font-size: 34px;
	/* Cyfry o równej szerokości: bez tego „od 1997" i „od 2005" mają różną
	   długość i pasek liczb faluje. */
	font-variant-numeric: tabular-nums;
}

@media (min-width: 900px) { .ls-liczba__wartosc { font-size: 42px; } }

/* Kreska drewna nad każdą liczbą — ten sam motyw listwy co nad nagłówkami */
.ls-liczba { position: relative; padding-top: var(--ls-5); }

.ls-liczba::before {
	content: "";
	position: absolute;
	top: -1px;
	left: 0;
	width: 32px;
	height: 3px;
	background: var(--ls-drewno-jasne);
}

@media (min-width: 900px) {
	.ls-liczba:not(:first-child)::before { left: var(--ls-6); }
}

/* Podpis w hero jako etykieta, nie akapit */
.ls-hero__podpis {
	font-size: 14px;
	letter-spacing: 0.005em;
}

/* Podpis realizacji wjeżdża przy najechaniu */
.ls-realizacja__podpis { transform: translateY(6px); }
.ls-realizacja:hover .ls-realizacja__podpis { transform: translateY(0); }

/* ------------------------------------------- SZLIF: SEKCJA ODDZIAŁÓW */
/* Wcześniej dwie białe karty z mapą u góry i tekstem pod spodem czytały się
   jak domyślny widget. Teraz mapa jest wyższa, dane leżą na papierze,
   a miasto ma własną etykietę. */
.ls-oddzial {
	background: var(--ls-biel);
	border-top: 3px solid var(--ls-granat);
	box-shadow: var(--ls-cien);
}

.ls-mapa { aspect-ratio: 16 / 9; }

@media (min-width: 900px) { .ls-mapa { aspect-ratio: 3 / 2; } }

.ls-oddzial h3 {
	display: flex;
	align-items: baseline;
	gap: var(--ls-3);
	font-size: var(--ls-h3);
}

.ls-oddzial h3::after {
	content: "";
	flex: 1 1 auto;
	height: 1px;
	background: var(--ls-linia);
}

.ls-oddzial__wiersz + .ls-oddzial__wiersz { border-top: 1px solid var(--ls-linia); }
.ls-oddzial__wiersz { padding-block: var(--ls-1); }

/* --------------------------------------------------- SZLIF: HERO */
@media (min-width: 1024px) {
	.ls-hero__siatka { min-height: 600px; }
	.ls-hero__obraz img { min-height: 560px; }
}

/* Etykieta realizacji jest w HTML kolażu, nie w CSS — rysowana arkuszem
   mogłaby kiedyś wylądować na zdjęciu, które realizacją nie jest. */

/* Na wąskim ekranie ukośna zasłona przykrywała CAŁY kadr i z pasa zostawał
   sam ciemny prostokąt — a sensem tego pasa jest zdjęcie. Na telefonie
   zasłona idzie z góry na dół, tekst siada na dole, brama zostaje widoczna. */
@media (max-width: 699px) {
	.ls-cytat {
		align-items: end;
		min-height: 460px;
	}

	.ls-cytat__zaslona {
		background: linear-gradient(
			to bottom,
			rgba(14, 24, 40, 0.35) 0%,
			rgba(14, 24, 40, 0.72) 45%,
			rgba(14, 24, 40, 0.94) 100%
		);
	}

	.ls-cytat__tresc { padding-block: var(--ls-7) var(--ls-8); }
	.ls-cytat__tekst::before { margin-bottom: var(--ls-4); }
}

/* --------------------------------------------------------- PASEK GÓRNY */
.ls-pasek-gorny {
	display: none;
	background: var(--ls-granat-ciemny);
	color: rgba(255, 255, 255, 0.82);
}

@media (min-width: 1100px) {
	.ls-pasek-gorny { display: block; }

	.ls-pasek-gorny__rzad {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: var(--ls-6);
		min-height: 44px;
		font-size: 13px;
		letter-spacing: 0.015em;
	}

	.ls-pasek-gorny__haslo {
		display: inline-flex;
		align-items: center;
		gap: var(--ls-3);
		font-family: var(--ls-display);
		font-weight: 600;
		letter-spacing: 0.06em;
		text-transform: uppercase;
		font-size: 11px;
		color: var(--ls-drewno-jasne);
	}

	.ls-pasek-gorny__haslo::before {
		content: "";
		width: 26px;
		height: 2px;
		background: var(--ls-drewno-jasne);
	}

	.ls-pasek-gorny__dane { display: inline-flex; align-items: center; gap: var(--ls-6); }

	.ls-pasek-gorny__dane a {
		display: inline-flex;
		align-items: center;
		min-height: 44px;
		color: rgba(255, 255, 255, 0.88);
		text-decoration: none;
		font-weight: 500;
		transition: color var(--ls-czas) var(--ls-krzywa);
	}

	.ls-pasek-gorny__dane a:hover { color: var(--ls-biel); text-decoration: underline; }
}

/* ---------------------------------------------------------- HERO KOLAŻ */
@media (min-width: 1024px) {
	.ls-hero__siatka--kolaz {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1.12fr);
		gap: var(--ls-10);
		align-items: center;
		min-height: 0;
		padding-block: var(--ls-8) calc(var(--ls-10) + var(--ls-7));
	}
}

.ls-kolaz {
	display: grid;
	grid-template-columns: 1fr 1fr;
	/* Równe wiersze i proporcja całości. Przy `auto auto` duży kafel
	   rozciągnięty na dwa wiersze był wyższy niż jego zdjęcie i pod spodem
	   zostawało puste tło — na 768 px wyglądało to jak brakująca grafika. */
	grid-template-rows: 1fr 1fr;
	aspect-ratio: 5 / 4;
	gap: var(--ls-3);
}

@media (min-width: 1024px) {
	.ls-kolaz {
		grid-template-columns: 1.45fr 1fr;
		/* Wiersze w PIKSELACH, nie we fr: fr rośnie do naturalnej wysokości
		   zdjęcia (1500 px), kolaż rozdymał się na 2600 px, a treść hero
		   z align-items: center wypadała poza pierwszy ekran. */
		grid-template-rows: 330px 236px;
		gap: var(--ls-4);
		/* BEZ wyjścia poza okno: ujemny margines ścinał prawą kolumnę kafli
		   w połowie (malinowe drzwi urwane = wyglądało jak błąd). Kompletne
		   kadry są ważniejsze od efektu krawędzi. */
	}
}

.ls-kolaz__kafel {
	position: relative;
	margin: 0;
	overflow: hidden;
	background: var(--ls-papier-ciemny);
	box-shadow: var(--ls-cien);
}

.ls-kolaz__kafel img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform var(--ls-czas-wolny) var(--ls-krzywa);
}

.ls-kolaz__kafel:hover img { transform: scale(1.03); }

/* Duży kafel: dom z drewnianą bramą, pełna lewa kolumna. */
.ls-kolaz__kafel--duzy { grid-column: 1; grid-row: 1 / 3; }

/* Pionowy: malinowe drzwi, prawa kolumna u góry. */
.ls-kolaz__kafel--pion { grid-column: 2; grid-row: 1; }

/* Mały: podwójna brama, prawa kolumna na dole. */
.ls-kolaz__kafel--maly { grid-column: 2; grid-row: 2; }

@media (min-width: 1024px) {
	/* Na desktopie wysokość z pikseli, nie z proporcji okna. */
	.ls-kolaz { aspect-ratio: auto; }

	/* Delikatne przesunięcie prawej kolumny w dół: kompozycja, nie siatka. */
	.ls-kolaz__kafel--pion { margin-top: var(--ls-7); }
	.ls-kolaz__kafel--maly { margin-bottom: calc(var(--ls-7) * -1); }
}

.ls-kolaz__kafel--duzy::before {
	content: "";
	position: absolute;
	inset: 0 auto 0 0;
	width: 3px;
	background: var(--ls-drewno);
	z-index: 1;
}

.ls-kolaz__etykieta {
	position: absolute;
	left: 0;
	bottom: var(--ls-4);
	padding: var(--ls-2) var(--ls-4);
	background: var(--ls-granat-ciemny);
	color: var(--ls-biel);
	font-family: var(--ls-display);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

.ls-kolaz__etykieta::after {
	content: "";
	position: absolute;
	inset: auto 0 0 0;
	height: 2px;
	background: var(--ls-drewno-jasne);
}

/* ------------------------------------------------- TYPOGRAFIA W GÓRĘ */
@media (min-width: 1024px) {
	:root { --ls-h2: 36px; }
}

.ls-nadtytul { font-size: 11px; letter-spacing: 0.18em; }

@media (min-width: 1100px) {
	.ls-menu a { font-size: 15px; }
}

.ls-hero h1 { margin-top: var(--ls-3); }
.ls-hero .ls-lead { margin-top: var(--ls-5); }

/* ------------------------------------------ SEKCJA GRANATOWA (DLACZEGO MY) */
/* Zamiast płaskiego antracytu: głęboki gradient granatu z listwami
   i winietą. Bogatsze tło, ale nadal jeden motyw. */
.ls-sekcja--granat {
	position: relative;
	background:
		radial-gradient(120% 90% at 85% 10%, rgba(36, 80, 127, 0.35) 0%, rgba(14, 36, 64, 0) 55%),
		var(--ls-granat-gradient);
	color: var(--ls-biel);
}

.ls-sekcja--granat::before {
	content: "";
	position: absolute;
	inset: 0;
	background-image: var(--ls-listwy-delikatne);
	pointer-events: none;
}

.ls-sekcja--granat > .ls-kontener { position: relative; }
.ls-sekcja--granat h2,
.ls-sekcja--granat h3 { color: var(--ls-biel); }
.ls-sekcja--granat .ls-lead { color: rgba(255, 255, 255, 0.85); }
.ls-sekcja--granat .ls-nadtytul { color: var(--ls-drewno-jasne); }
.ls-sekcja--granat .ls-nadtytul::before { background: var(--ls-drewno-jasne); }
.ls-sekcja--granat .ls-punkt-lista__nr { color: var(--ls-drewno-jasne); }
.ls-sekcja--granat .ls-punkt-lista__nr::after { background: var(--ls-drewno-tekst-ciemny, var(--ls-drewno)); }

/* --------------------------------------------------- POKAZ ZDJĘĆ (FADE) */
.ls-pokaz {
	position: relative;
	width: 100%;
	height: 100%;
	min-height: 320px;
}

.ls-pokaz .ls-pokaz__klatka {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: 0;
	transition: opacity 1400ms ease;
}

.ls-pokaz .ls-pokaz__klatka.jest-aktywna { opacity: 1; }

.ls-pokaz__podpis {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 2;
	margin: 0;
	padding: var(--ls-8) var(--ls-5) var(--ls-4);
	background: linear-gradient(to top, rgba(8, 14, 26, 0.82), rgba(8, 14, 26, 0));
	color: rgba(255, 255, 255, 0.92);
	font-size: var(--ls-maly);
	line-height: 1.45;
}

.ls-pokaz__kropki {
	z-index: 3;
	position: absolute;
	left: var(--ls-4);
	bottom: var(--ls-4);
	z-index: 2;
	display: flex;
	gap: var(--ls-2);
}

.ls-pokaz__kropki span {
	width: 22px;
	height: 3px;
	background: rgba(255, 255, 255, 0.35);
	transition: background var(--ls-czas) var(--ls-krzywa);
}

.ls-pokaz__kropki span.jest-aktywna { background: var(--ls-drewno-jasne); }

/* --------------------------------------------- UPRAWNIENIA (AUTORYZACJA) */
.ls-autoryzacje__siatka { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--ls-7); }

@media (min-width: 1024px) {
	.ls-autoryzacje__siatka { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: var(--ls-10); align-items: start; }
}

.ls-uprawnienia { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--ls-5); }

.ls-uprawnienia__grupa {
	background: var(--ls-papier);
	border-left: 3px solid var(--ls-drewno);
	padding: var(--ls-5) var(--ls-5) var(--ls-4);
}

@media (min-width: 640px) { .ls-uprawnienia__grupa { padding: var(--ls-6) var(--ls-7) var(--ls-5); } }

.ls-uprawnienia__glowa {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	gap: var(--ls-4);
	align-items: start;
	padding-bottom: var(--ls-4);
	border-bottom: 1px solid var(--ls-linia);
}

.ls-uprawnienia__glowa .ls-ikona { color: var(--ls-drewno-tekst); margin-top: 3px; }
.ls-uprawnienia__glowa h3 { margin: 0; }
.ls-uprawnienia__glowa p { margin-top: var(--ls-1); font-size: var(--ls-maly); color: var(--ls-tekst-lekki); }

.ls-uprawnienia__lista { display: grid; padding-top: var(--ls-3); list-style: none; margin: 0; }

@media (min-width: 900px) {
	.ls-uprawnienia__lista { grid-template-columns: 1fr 1fr; column-gap: var(--ls-7); }
}

.ls-uprawnienia__lista li {
	display: grid;
	grid-template-columns: 26px minmax(0, 1fr);
	gap: var(--ls-3);
	align-items: start;
	padding-block: var(--ls-2);
	font-size: var(--ls-maly);
	line-height: 1.5;
}

.ls-uprawnienia__znak {
	flex: none;
	width: 16px;
	height: 3px;
	background: var(--ls-drewno);
	margin-top: 0.62em;
}

/* Karta certyfikatu */
.ls-certyfikat {
	background: var(--ls-granat);
	background-image: var(--ls-listwy);
	color: var(--ls-biel);
	padding: var(--ls-6);
}

@media (min-width: 640px) { .ls-certyfikat { padding: var(--ls-7); } }

@media (min-width: 1024px) { .ls-certyfikat { position: sticky; top: calc(var(--ls-naglowek-wys) + 24px); } }

.ls-certyfikat__tytul {
	display: flex;
	align-items: center;
	gap: var(--ls-3);
	font-family: var(--ls-display);
	font-size: var(--ls-mikro);
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--ls-drewno-jasne);
	margin: 0;
}

.ls-certyfikat__tytul::before {
	content: "";
	width: 32px;
	height: 3px;
	background: var(--ls-drewno-jasne);
}

.ls-certyfikat__fakty { display: grid; margin: var(--ls-5) 0 0; }

.ls-certyfikat__fakty > div {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--ls-4);
	padding-block: var(--ls-3);
	border-bottom: 1px solid rgba(255, 255, 255, 0.16);
}

.ls-certyfikat__fakty dt { font-size: var(--ls-maly); color: rgba(255, 255, 255, 0.78); }
.ls-certyfikat__fakty dd {
	margin: 0;
	font-family: var(--ls-display);
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	text-align: right;
}

/* nowrap na dacie tylko tam, gdzie jest na to miejsce — na 320 px
   usztywniona wartosc rozpychala cala strone o 37 px */
@media (min-width: 380px) {
	.ls-certyfikat__fakty dd { white-space: nowrap; }
}

/* Wartość opisowa (nie data) MUSI móc się zawinąć — przy nowrap
   „6, wszystkie zakresy" wychodziło poza kartę na 414 px. */
.ls-certyfikat__fakt--tekst { white-space: normal !important; text-wrap: balance; }

.ls-certyfikat__skany {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--ls-4);
	margin-top: var(--ls-5);
}

.ls-certyfikat__skan {
	position: relative;
	display: block;
	margin: 0;
	padding: var(--ls-2);
	background: var(--ls-biel);
	border: 0;
	cursor: zoom-in;
	transition: transform var(--ls-czas) var(--ls-krzywa), box-shadow var(--ls-czas) var(--ls-krzywa);
}

.ls-certyfikat__skan img { display: block; width: 100%; }

.ls-certyfikat__skan:hover,
.ls-certyfikat__skan:focus-visible {
	transform: translateY(-3px);
	box-shadow: 0 10px 26px rgba(6, 12, 24, 0.45);
}

.ls-certyfikat__skan:focus-visible { outline: 2px solid var(--ls-biel); outline-offset: 3px; }

.ls-certyfikat__lupa {
	position: absolute;
	right: var(--ls-2);
	bottom: var(--ls-2);
	display: grid;
	place-items: center;
	width: 30px;
	height: 30px;
	background: var(--ls-granat);
	color: var(--ls-biel);
	transition: background var(--ls-czas) var(--ls-krzywa);
}

.ls-certyfikat__skan:hover .ls-certyfikat__lupa { background: var(--ls-drewno-gleboki); }

.ls-certyfikat__przypis { margin-top: var(--ls-4); font-size: 13px; color: rgba(255, 255, 255, 0.66); }

/* ------------------------------------------------------------ LIGHTBOX */
.ls-lightbox {
	position: fixed;
	inset: 0;
	/* Nad lepkim nagłówkiem (150) — inaczej pasek przebijał przyciemnienie
	   i zakrywał przycisk zamknięcia. */
	z-index: 300;
	display: grid;
	place-items: center;
	padding: clamp(16px, 4vw, 56px);
	background: rgba(8, 14, 26, 0.88);
	backdrop-filter: blur(4px);
	-webkit-backdrop-filter: blur(4px);
}

.ls-lightbox[hidden] { display: none; }

.ls-lightbox figure {
	margin: 0;
	max-width: min(92vw, 720px);
	animation: ls-lightbox-wejscie 240ms var(--ls-krzywa);
}

@keyframes ls-lightbox-wejscie {
	from { opacity: 0; transform: translateY(10px) scale(0.98); }
	to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
	.ls-lightbox figure { animation: none; }
}

.ls-lightbox img {
	display: block;
	max-width: 100%;
	max-height: min(82vh, 82svh);
	background: var(--ls-biel);
	padding: var(--ls-2);
	box-shadow: 0 24px 70px rgba(0, 0, 0, 0.55);
}

.ls-lightbox figcaption {
	margin-top: var(--ls-3);
	text-align: center;
	color: rgba(255, 255, 255, 0.85);
	font-size: var(--ls-maly);
}

.ls-lightbox__zamknij,
.ls-lightbox__strzalka {
	position: absolute;
	display: grid;
	place-items: center;
	width: 46px;
	height: 46px;
	background: rgba(255, 255, 255, 0.08);
	border: 1px solid rgba(255, 255, 255, 0.28);
	color: var(--ls-biel);
	cursor: pointer;
	transition: background var(--ls-czas) var(--ls-krzywa), border-color var(--ls-czas) var(--ls-krzywa);
}

.ls-lightbox__zamknij:hover,
.ls-lightbox__strzalka:hover { background: rgba(255, 255, 255, 0.2); border-color: rgba(255, 255, 255, 0.6); }

.ls-lightbox__zamknij:focus-visible,
.ls-lightbox__strzalka:focus-visible { outline: 2px solid var(--ls-biel); outline-offset: 3px; }

.ls-lightbox__zamknij { top: clamp(10px, 3vw, 28px); right: clamp(10px, 3vw, 28px); }

.ls-lightbox__strzalka { top: 50%; transform: translateY(-50%); }
.ls-lightbox__strzalka--wstecz { left: clamp(6px, 2.5vw, 24px); }
.ls-lightbox__strzalka--wstecz svg { transform: rotate(180deg); }
.ls-lightbox__strzalka--dalej { right: clamp(6px, 2.5vw, 24px); }

/* ------------------------------------------------ PUNKTY (GDZIE JESTEŚMY) */
.ls-punkty2 { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--ls-6); }

.ls-punkt2 {
	display: grid;
	background: var(--ls-biel);
	box-shadow: var(--ls-cien);
	overflow: hidden;
	border-left: 4px solid var(--ls-drewno);
	transition: transform var(--ls-czas-wolny) var(--ls-krzywa), box-shadow var(--ls-czas-wolny) var(--ls-krzywa);
}

.ls-punkt2:hover {
	transform: translateY(-3px);
	box-shadow: var(--ls-cien-mocny);
}

@media (prefers-reduced-motion: reduce) {
	.ls-punkt2:hover { transform: none; }
}

@media (min-width: 900px) {
	.ls-punkt2 { grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); }
}

.ls-punkt2__info {
	position: relative;
	padding: var(--ls-6);
	border-top: 3px solid var(--ls-granat);
}

@media (min-width: 900px) {
	.ls-punkt2__info { padding: var(--ls-8); border-top: 0; border-left: 3px solid var(--ls-granat); }
}

.ls-punkt2__nr {
	font-family: var(--ls-display);
	font-size: var(--ls-mikro);
	font-weight: 700;
	letter-spacing: 0.16em;
	color: var(--ls-drewno-tekst);
}

.ls-punkt2__miasto {
	font-size: 27px;
	letter-spacing: -0.02em;
	margin-top: var(--ls-1);
}

.ls-punkt2__adres {
	display: flex;
	gap: var(--ls-2);
	align-items: flex-start;
	margin-top: var(--ls-3);
	color: var(--ls-tekst-lekki);
	line-height: 1.55;
}

.ls-punkt2__adres .ls-ikona { color: var(--ls-drewno-tekst); flex: none; margin-top: 2px; }

.ls-punkt2__trasa { margin-top: var(--ls-2); font-size: var(--ls-maly); }

.ls-punkt2__kontakty { display: grid; margin-top: var(--ls-5); }

.ls-punkt2__tel {
	display: inline-flex;
	align-items: center;
	gap: var(--ls-3);
	min-height: 48px;
	font-family: var(--ls-display);
	font-size: 20px;
	font-weight: 700;
	letter-spacing: -0.01em;
	text-decoration: none;
	font-variant-numeric: tabular-nums;
}

.ls-punkt2__tel .ls-ikona { color: var(--ls-drewno-tekst); }

.ls-punkt2__tel span {
	background-image: linear-gradient(var(--ls-drewno), var(--ls-drewno));
	background-repeat: no-repeat;
	background-position: 0 100%;
	background-size: 0% 2px;
	transition: background-size var(--ls-czas) var(--ls-krzywa);
}

.ls-punkt2__tel:hover { color: var(--ls-drewno-tekst); }
.ls-punkt2__tel:hover span { background-size: 100% 2px; }

.ls-punkt2__mail {
	display: inline-flex;
	align-items: center;
	gap: var(--ls-3);
	min-height: 44px;
	font-weight: 500;
	text-decoration: none;
}

.ls-punkt2__mail .ls-ikona { color: var(--ls-drewno-tekst); }

.ls-punkt2__godziny {
	display: inline-flex;
	align-items: center;
	gap: var(--ls-2);
	margin-top: var(--ls-4);
	padding-top: var(--ls-4);
	border-top: 1px solid var(--ls-linia);
	font-size: var(--ls-maly);
	color: var(--ls-tekst-lekki);
}

.ls-punkt2__mapa .ls-mapa { height: 100%; min-height: 260px; aspect-ratio: auto; }

@media (max-width: 899px) { .ls-punkt2__mapa .ls-mapa { aspect-ratio: 16 / 9; height: auto; } }

/* ------------------------------------------- FORMULARZ NA GRANACIE */
.ls-form-sekcja--granat {
	position: relative;
	background:
		radial-gradient(110% 80% at 12% 8%, rgba(36, 80, 127, 0.4) 0%, rgba(14, 36, 64, 0) 60%),
		var(--ls-granat-gradient-odwrotny);
	border-top: 0;
	color: var(--ls-biel);
}

.ls-form-sekcja--granat::before {
	content: "";
	position: absolute;
	inset: 0;
	background-image: var(--ls-listwy-delikatne);
	pointer-events: none;
}

.ls-form-sekcja--granat > .ls-kontener { position: relative; }
.ls-form-sekcja--granat h2 { color: var(--ls-biel); }
.ls-form-sekcja--granat .ls-lead { color: rgba(255, 255, 255, 0.85); }
.ls-form-sekcja--granat .ls-nadtytul { color: var(--ls-drewno-jasne); }
.ls-form-sekcja--granat .ls-nadtytul::before { background: var(--ls-drewno-jasne); }

.ls-form-sekcja--granat .ls-form__kontakt .ls-ikona { color: var(--ls-drewno-jasne); }
.ls-form-sekcja--granat .ls-form__kontakt a { color: var(--ls-biel); }
.ls-form-sekcja--granat .ls-form__kontakt a:hover { color: var(--ls-drewno-jasne); }
.ls-form-sekcja--granat .ls-form__kontakt-mail { color: rgba(255, 255, 255, 0.82); }

.ls-form__zaufanie {
	display: grid;
	margin: var(--ls-6) 0 0;
	padding: 0;
	list-style: none;
}

.ls-form__zaufanie li {
	position: relative;
	padding: var(--ls-3) 0 var(--ls-3) var(--ls-6);
	font-size: var(--ls-maly);
	color: rgba(255, 255, 255, 0.85);
	border-top: 1px solid rgba(255, 255, 255, 0.14);
}

.ls-form__zaufanie li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 1.45em;
	width: 18px;
	height: 2px;
	background: var(--ls-drewno-jasne);
}

/* Formularz jako biała karta na granacie */
.ls-form--karta {
	display: grid;
	/* ostatni wiersz (przycisk + odpowiedź) dociskany do dołu karty,
	   pole opisu rośnie i wypełnia wolną wysokość */
	align-content: start;
	background: var(--ls-biel);
	color: var(--ls-tekst);
	padding: var(--ls-6);
	box-shadow: var(--ls-cien-mocny);
	border-top: 3px solid var(--ls-drewno);
}

@media (min-width: 1024px) {
	.ls-form--karta { align-content: stretch; }
	.ls-form--karta .ls-pole textarea { height: 100%; }
}

@media (min-width: 640px) { .ls-form--karta { padding: var(--ls-8); } }

.ls-form--karta .ls-pole label { color: var(--ls-tekst-lekki); }
.ls-form--karta .ls-zgoda { color: var(--ls-tekst-lekki); }
.ls-form--karta a { color: var(--ls-granat); }
.ls-form--karta a:hover { color: var(--ls-drewno-tekst); }

/* ------------------------------------------------- REALIZACJE: SZCZEGÓŁY */
.ls-realizacje { counter-reset: realizacja; }

.ls-realizacja { counter-increment: realizacja; }

.ls-realizacja::before {
	content: counter(realizacja, decimal-leading-zero);
	position: absolute;
	top: var(--ls-3);
	left: var(--ls-3);
	z-index: 2;
	padding: 3px 8px;
	background: rgba(14, 24, 40, 0.78);
	color: var(--ls-drewno-jasne);
	font-family: var(--ls-display);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.12em;
	font-variant-numeric: tabular-nums;
}

/* ------------------------------------------------------ STOPKA OD NOWA */
.ls-stopka__gora {
	display: grid;
	gap: var(--ls-6);
	padding-block: var(--ls-8) var(--ls-6);
	border-bottom: 1px solid var(--ls-linia-ciemna);
}

@media (min-width: 900px) {
	.ls-stopka__gora {
		grid-template-columns: minmax(0, 1fr) auto;
		align-items: center;
		gap: var(--ls-10);
	}
}

.ls-stopka__marka img { max-height: 40px; width: auto; margin-bottom: var(--ls-3); }
.ls-stopka__marka p { color: rgba(255, 255, 255, 0.72); font-size: var(--ls-maly); }

/* Dwa kafle o RÓWNEJ szerokości. Przy flex-wrap szerokość brała się
   z długości numeru, więc Katowice i Sosnowiec miały inne ramki i rząd
   wyglądał na niedbały. */
.ls-stopka__telefony {
	display: grid;
	/* 210 px to zmierzona szerokość, przy której numer mieści się w jednej
	   linii razem z ikoną. Poniżej tego kafle idą jeden pod drugim,
	   zamiast łamać „32 204 / 90 56" na dwa wiersze. */
	grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
	gap: var(--ls-4);
}

@media (min-width: 900px) {
	.ls-stopka__telefony { grid-auto-columns: 1fr; grid-auto-flow: column; }
}

.ls-stopka__tel {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	align-items: center;
	gap: var(--ls-3);
	min-height: 64px;
	padding: var(--ls-3) var(--ls-5);
	border: 1px solid rgba(255, 255, 255, 0.28);
	/* Listwa akcentowa z lewej — ten sam znak co na kartach punktów. */
	border-left: 3px solid var(--ls-drewno);
	text-decoration: none;
	transition: border-color var(--ls-czas) var(--ls-krzywa),
		background-color var(--ls-czas) var(--ls-krzywa),
		transform var(--ls-czas) var(--ls-krzywa);
}

.ls-stopka__tel:hover {
	border-color: rgba(255, 255, 255, 0.55);
	border-left-color: var(--ls-drewno-jasne);
	background: rgba(255, 255, 255, 0.06);
	text-decoration: none;
	transform: translateY(-2px);
}

.ls-stopka__tel:active { transform: translateY(0); }

@media (prefers-reduced-motion: reduce) {
	.ls-stopka__tel:hover { transform: none; }
}

.ls-stopka__tel-ikona {
	display: grid;
	place-items: center;
	width: 34px;
	height: 34px;
	background: rgba(255, 255, 255, 0.08);
	color: var(--ls-drewno-jasne);
	transition: background-color var(--ls-czas) var(--ls-krzywa);
}

.ls-stopka__tel:hover .ls-stopka__tel-ikona { background: var(--ls-drewno); color: var(--ls-na-drewnie); }

.ls-stopka__tel-tresc { display: grid; gap: 2px; }

.ls-stopka__tel-miasto {
	font-family: var(--ls-display);
	font-size: var(--ls-mikro);
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--ls-drewno-jasne);
	line-height: 1.2;
}

.ls-stopka__tel-numer {
	font-family: var(--ls-display);
	white-space: nowrap;
	font-size: 20px;
	font-weight: 700;
	line-height: 1.15;
	color: var(--ls-biel);
	font-variant-numeric: tabular-nums;
	letter-spacing: 0.01em;
}

.ls-stopka__kolumny {
	display: grid;
	gap: var(--ls-6);
	padding-block: var(--ls-7);
}

@media (min-width: 700px) { .ls-stopka__kolumny { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1100px) { .ls-stopka__kolumny { grid-template-columns: 1.3fr 1fr 1fr 1fr; gap: var(--ls-8); } }