/**
 * Natura Libri — style motywu potomnego
 * Ładowane globalnie (nav i footer są używane wszędzie); sekcje strony
 * głównej są scope'owane pod klasą body.nl-site dodawaną w header.php.
 *
 * Docelowo, po akceptacji designu, styl zostanie przełożony na globale
 * Elementora + szablony w Theme Builderze.
 */

:root {
	--nl-bg: #0D0B08;
	--nl-surface: #171310;
	--nl-surface-elevated: #201B15;
	--nl-border: #2E2820;
	--nl-border-strong: #453B2C;
	--nl-text: #EDE7DA;
	--nl-text-secondary: #B5AB94;
	/* Podniesione z #7D7462 (4,26:1 na tle, 4,00:1 na powierzchni) - ponizej
	   wymaganych 4,5:1 dla zwyklego tekstu. Ta jedna zmienna odpowiadala za
	   WSZYSTKIE bledy kontrastu w audycie: podpisy galerii, role ekspertow,
	   metadane opinii i caly dol stopki. Teraz 5,76:1 i 5,41:1. */
	--nl-text-muted: #938A79;
	--nl-gold: #F5CF06;
	--nl-moss: #6B7F4A;
	--nl-serif: 'Fraunces', Georgia, serif;
	--nl-sans: 'Manrope', system-ui, sans-serif;
}

/* Baza dla całej strony (nadpisuje Hello Elementor jeśli aktywny) */
body.nl-site {
	background: var(--nl-bg);
	color: var(--nl-text);
	font-family: var(--nl-sans);
	font-size: 16px;
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
	/* clip, NIE hidden: hidden czyni z body kontener przewijania, przez co sekcje
	   (np. „Dlaczego") znikają podczas scrolla w Chrome/Safari. clip przycina
	   poziomo bez tworzenia kontenera scrolla. Menu mobilne jest fixed, więc
	   i tak nie powoduje poziomego przewijania. */
	overflow-x: clip;
}
body.nl-site img { max-width: 100%; height: auto; display: block; }
body.nl-site a { color: inherit; text-decoration: none; }
body.nl-site ::selection { background: var(--nl-gold); color: var(--nl-bg); }
body.nl-site h1,
body.nl-site h2,
body.nl-site h3,
body.nl-site h4 {
	margin: 0;
	font-family: var(--nl-serif);
	font-weight: 300;
	letter-spacing: -0.015em;
	line-height: 1.1;
	color: var(--nl-text);
}
body.nl-site h2 + p,
body.nl-site h3 + p,
body.nl-site h4 + p,
body.nl-site h2 + div,
body.nl-site h3 + div {
	margin-top: 20px;
}
body.nl-site p, body.nl-site ul { margin: 0; padding: 0; }
body.nl-site ul { list-style: none; }
body.nl-site * { box-sizing: border-box; }

/* Przewijanie do kotwic płynnie, zamiast skokiem. Wyłącznie przy
   prefers-reduced-motion: no-preference — kto prosi o ograniczony ruch,
   dostaje natychmiastowy skok, bo długa animacja przewijania bywa
   przyczyną mdłości. Właściwość ustawiamy na :root, nie na body:
   w Safari scroll-behavior na body bywa ignorowane. */
@media (prefers-reduced-motion: no-preference) {
	:root { scroll-behavior: smooth; }
}

/* Kotwice: offset na wysokość sticky nav */
body.nl-site [id] { scroll-margin-top: 104px; }
body.admin-bar.nl-front [id] { scroll-margin-top: 136px; }
@media (max-width: 782px) {
	body.admin-bar.nl-front [id] { scroll-margin-top: 150px; }
}
@media (max-width: 768px) {
	body.nl-site [id] { scroll-margin-top: 88px; }
}

/* ----- Wspólne ----- */
.nl-container { max-width: 1280px; margin: 0 auto; padding: 0 40px; }
@media (max-width: 768px) { .nl-container { padding: 0 24px; } }
.nl-section { padding: clamp(96px, 12vw, 50px) 0; }
.nl-section + .nl-section::before,
.nl-section + section::before {
	content: '';
	display: block;
	width: min(560px, 60%);
	height: 1px;
	margin: 0 auto clamp(64px, 8vw, 104px);
	background: linear-gradient(
		to right,
		transparent,
		rgba(245, 207, 6, 0.28),
		transparent
	);
}
.nl-dlaczego-section::before,
.nl-eksperci-section::before,
.nl-produkty-section::before,
.nl-kontakt-section::before { content: none !important; }

.nl-eyebrow {
	font-family: var(--nl-sans);
	font-size: 11px;
	letter-spacing: 0.32em;
	text-transform: uppercase;
	color: var(--nl-gold);
	font-weight: 500;
	margin-bottom: 20px;
	display: block;
}
.nl-accent { color: var(--nl-gold); font-weight: 500; }

/* ----- Nav (globalny) ----- */
.nl-nav {
	position: sticky;
	top: 0;
	z-index: 100;
	background: rgba(13, 11, 8, 0.72);
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
	border-bottom: 0.5px solid transparent;
	font-family: var(--nl-sans);
	transition: background 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}
.nl-nav.is-scrolled {
	background: rgba(13, 11, 8, 0.94);
	border-bottom-color: var(--nl-border);
	box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
}
.nl-nav.is-scrolled .nl-nav-inner {
	padding-top: 14px;
	padding-bottom: 14px;
}
.nl-nav.is-scrolled .nl-brand-logo img { height: 44px; }
@media (max-width: 600px) {
	.nl-nav.is-scrolled .nl-brand-logo img { height: 34px; }
}
.nl-nav-inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 22px 40px;
	max-width: 1280px;
	margin: 0 auto;
	gap: 32px;
	transition: padding 0.3s ease;
}
@media (max-width: 768px) { .nl-nav-inner { padding: 18px 24px; } }

.nl-brand-logo {
	display: flex;
	align-items: center;
	flex-shrink: 0;
}
body.nl-site .nl-brand-logo img,
.nl-brand-logo img {
	height: 56px;
	width: auto;
	max-width: 240px;
	object-fit: contain;
	transition: height 0.3s ease;
}
.nl-brand-logo:hover img { opacity: 0.75; }

@media (max-width: 600px) {
	body.nl-site .nl-brand-logo img,
	.nl-brand-logo img { height: 40px; }
}
.nl-nav-menu {
	display: flex;
	gap: 30px;
	list-style: none;
	align-items: center;
	margin: 0;
	padding: 0;
}
.nl-nav-menu li { margin: 0; }
.nl-nav-menu li a {
	font-family: var(--nl-sans);
	font-size: 14px;
	letter-spacing: 0.01em;
	color: var(--nl-text-secondary);
	text-decoration: none;
	transition: color 0.2s;
	position: relative;
	padding-bottom: 3px;
}
.nl-nav-menu li a:not(.nl-nav-shop)::after {
	content: '';
	position: absolute;
	left: 0;
	bottom: 0;
	width: 0;
	height: 1px;
	background: var(--nl-gold);
	transition: width 0.25s ease;
}
.nl-nav-menu li a:not(.nl-nav-shop):hover::after { width: 100%; }
.nl-nav-menu li a:hover { color: var(--nl-gold); }
.nl-nav-shop,
a.nl-nav-shop,
body a.nl-nav-shop {
	font-family: var(--nl-sans);
	font-size: 12px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	background: var(--nl-gold) !important;
	color: #0F0D0A !important;
	padding: 12px 24px;
	border-radius: 3px;
	font-weight: 700;
	transition: background 0.2s;
}
.nl-nav-shop:hover,
a.nl-nav-shop:hover,
body a.nl-nav-shop:hover {
	background: #FFDD2E !important;
	color: #0F0D0A !important;
}
/* Logo do lewej, menu + koszyk do prawej */
.nl-brand-logo { margin-right: auto; }

/* Ikona koszyka w nagłówku */
.nl-cart {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: var(--nl-text);
	flex-shrink: 0;
	transition: color 0.2s;
}
.nl-cart:hover { color: var(--nl-gold); }
.nl-cart svg { width: 23px; height: 23px; display: block; }
.nl-cart-count {
	display: inline-block;
	min-width: 18px;
	height: 18px;
	padding: 0 5px;
	border-radius: 999px;
	background: var(--nl-gold);
	color: #0F0D0A;
	font-family: var(--nl-sans);
	font-size: 11px;
	font-weight: 700;
	line-height: 18px;
	text-align: center;
}
.nl-cart-count[hidden] { display: none; }
.nl-cart .nl-cart-count {
	position: absolute;
	top: -7px;
	right: -9px;
	box-shadow: 0 0 0 2px var(--nl-bg);
}
.nl-mobile-cart .nl-cart-count { margin-left: 10px; vertical-align: middle; }

.nl-nav-toggle {
	display: none;
	background: transparent;
	border: none;
	cursor: pointer;
	width: 32px;
	height: 24px;
	padding: 0;
}
.nl-nav-toggle span {
	display: block;
	width: 100%;
	height: 1px;
	background: var(--nl-text);
	margin: 5px 0;
}
@media (max-width: 900px) {
	.nl-nav-menu { display: none; }
	.nl-nav-toggle { display: block; }
}

/* ----- Mobile menu ----- */
.nl-mobile-menu {
	position: fixed;
	top: 0;
	right: -100%;
	width: min(360px, 90vw);
	height: 100vh;
	background: var(--nl-bg);
	border-left: 0.5px solid var(--nl-border);
	z-index: 200;
	padding: 80px 40px;
	transition: right 0.3s ease;
	overflow-y: auto;
	/* Zamkniety panel stoi poza ekranem (right: -100%), ale bez visibility jego
	   linki nadal lapia fokus Tabem - uzytkownik klawiatury wpada za krawedz
	   ekranu i nie widzi, gdzie jest fokus. aria-hidden tego nie rozwiazuje,
	   bo nie rusza kolejnosci tabulacji.
	   visibility przelaczamy BEZ przejscia, ale z opoznieniem rownym czasowi
	   wysuwania - inaczej panel znikalby natychmiast i chowanie przestaloby
	   byc animowane. Przy pokazywaniu opoznienia nie ma. */
	visibility: hidden;
	transition: right 0.3s ease, visibility 0s linear 0.3s;
}
.nl-mobile-menu.open {
	right: 0;
	visibility: visible;
	transition: right 0.3s ease, visibility 0s linear 0s;
}
.nl-mobile-menu-close {
	position: absolute;
	top: 20px;
	right: 24px;
	background: transparent;
	border: none;
	color: var(--nl-text);
	font-size: 32px;
	cursor: pointer;
	line-height: 1;
	padding: 0;
}
.nl-mobile-menu ul {
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: 20px;
	margin: 0;
	padding: 0;
}
.nl-mobile-menu li a {
	font-family: var(--nl-serif);
	font-size: 22px;
	font-weight: 300;
	color: var(--nl-text);
	display: block;
	padding: 8px 0;
	border-bottom: 0.5px solid var(--nl-border);
	text-decoration: none;
}
.nl-mobile-menu .nl-mobile-shop { color: var(--nl-gold); font-weight: 500; }

/* ----- Hero ----- */
.nl-hero {
	padding: clamp(88px, 12vw, 160px) 0 clamp(72px, 10vw, 120px);
	position: relative;
	overflow: hidden;
	min-height: 78vh;
	display: flex;
	align-items: center;
}
.nl-hero-inner {
	display: grid;
	grid-template-columns: 1fr 0.9fr;
	gap: 56px;
	align-items: center;
	width: 100%;
}
@media (max-width: 900px) {
	.nl-hero { min-height: auto; }
	.nl-hero-inner { grid-template-columns: 1fr; gap: 40px; }
}
.nl-hero h1 {
	font-size: clamp(2.75rem, 6.2vw, 5rem);
	line-height: 1.04;
	margin-bottom: 0;
	font-weight: 300;
	max-width: 16ch;
	text-wrap: balance;
}
.nl-hero-cta {
	display: flex;
	gap: 14px;
	flex-wrap: wrap;
	margin-top: 56px;
}
@media (max-width: 768px) {
	.nl-hero-cta { margin-top: 40px; }
}
.nl-hero-visual {
	display: flex;
	align-items: flex-end;
	justify-content: center;
	position: relative;
	align-self: stretch;
}
.nl-hero-visual img {
	width: 100%;
	max-width: 580px;
	height: auto;
	object-fit: contain;
	filter: drop-shadow(0 32px 80px rgba(0, 0, 0, 0.75));
	/* Grafika byla zepchnieta w dol o +4% (ok. 22 px przy 1440), co razem
	   z paddingiem sekcji dawalo 182 px czarnej pustki miedzy menu a rysiem.
	   Podnosimy SAMA grafike - nagłowek i przyciski zostaja na swoich
	   miejscach, bo zgloszenie dotyczylo odstepu nad rysiem, nie nad tekstem.
	   Ujemna wartosc wchodzi w padding-top sekcji (160 px), wiec jest zapas. */
	transform: translateY(-4%);
	-webkit-mask-image: linear-gradient(to bottom, #000 82%, transparent 100%);
	mask-image: linear-gradient(to bottom, #000 82%, transparent 100%);
}
@media (max-width: 900px) {
	.nl-hero-visual img {
		max-width: 320px;
		margin: 0 auto;
		transform: none;
		-webkit-mask-image: none;
		mask-image: none;
	}
}
.nl-scroll-hint {
	position: absolute;
	bottom: 48px;
	left: 50%;
	transform: translateX(-50%);
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 12px;
	text-decoration: none !important;
	/* Bylo opacity: 0.55. Przezroczystosc rozcienczala tekst do tla i faktyczny
	   kontrast spadal z 4,70:1 do 1,80:1 - audyt slusznie to zglaszal.
	   Przygaszenie robimy teraz kolorem, nie przezroczystoscia: pelne krycie
	   zachowuje 4,70:1, a strzalka ponizej zostaje subtelna wlasnym tonem. */
	opacity: 1;
	transition: opacity 0.3s;
}
.nl-scroll-hint:hover { opacity: 1; }
.nl-scroll-text {
	font-family: var(--nl-sans);
	font-size: 9px;
	letter-spacing: 0.3em;
	text-transform: uppercase;
	color: var(--nl-text-secondary);
	order: -1;
}
.nl-scroll-line {
	width: 1px;
	height: 36px;
	background: var(--nl-border-strong);
	position: relative;
	overflow: hidden;
}
.nl-scroll-line::after {
	content: '';
	position: absolute;
	top: -36px;
	left: 0;
	width: 1px;
	height: 36px;
	background: linear-gradient(to bottom, transparent, var(--nl-gold));
	animation: nl-scroll-pulse 2.4s ease-in-out infinite;
}
@keyframes nl-scroll-pulse {
	0%   { transform: translateY(0); }
	100% { transform: translateY(72px); }
}
@media (prefers-reduced-motion: reduce) {
	.nl-scroll-line::after { animation: none; top: 0; }
}
@media (max-width: 900px) { .nl-scroll-hint { display: none; } }

/* ----- Buttons ----- */
.nl-btn,
a.nl-btn,
body .nl-btn {
	display: inline-block;
	font-family: var(--nl-sans);
	font-size: 12px;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	padding: 17px 34px;
	border-radius: 3px;
	font-weight: 700;
	line-height: 1.2;
	transition: background 0.2s, color 0.2s, border-color 0.2s, transform 0.15s;
	cursor: pointer;
	border: none;
	text-decoration: none !important;
	text-align: center;
}

/* Primary: ciemny tekst na zlocie — wymuszone !important przeciw Hello Elementor */
.nl-btn-primary,
a.nl-btn-primary,
body .nl-btn-primary,
body a.nl-btn-primary {
	background: var(--nl-gold) !important;
	color: #0F0D0A !important;
	border: none !important;
}
.nl-btn-primary:hover,
a.nl-btn-primary:hover,
body a.nl-btn-primary:hover {
	background: #FFDD2E !important;
	color: #0F0D0A !important;
	transform: translateY(-1px);
}
.nl-btn-primary:focus-visible,
a.nl-btn-primary:focus-visible {
	outline: 2px solid var(--nl-text);
	outline-offset: 3px;
}

/* Ghost: jasny tekst z widoczna ramka */
.nl-btn-ghost,
a.nl-btn-ghost,
body .nl-btn-ghost,
body a.nl-btn-ghost {
	background: transparent !important;
	color: var(--nl-text) !important;
	border: 1px solid var(--nl-border-strong) !important;
}
.nl-btn-ghost:hover,
a.nl-btn-ghost:hover,
body a.nl-btn-ghost:hover {
	border-color: var(--nl-gold) !important;
	color: var(--nl-gold) !important;
	background: rgba(245, 207, 6, 0.06) !important;
	transform: translateY(-1px);
}
.nl-btn-ghost:focus-visible,
a.nl-btn-ghost:focus-visible {
	outline: 2px solid var(--nl-gold);
	outline-offset: 3px;
}

/* ----- Section header ----- */
.nl-section-header { max-width: 760px; margin-bottom: 56px; }
.nl-section-header h2 {
	font-size: clamp(2rem, 4vw, 3.25rem);
	margin-bottom: 28px;
	font-weight: 300;
}
.nl-section-header p {
	color: var(--nl-text-secondary);
	font-size: 1.0625rem;
	line-height: 1.75;
	max-width: 62ch;
}

/* ----- Misja ----- */
.nl-split {
	display: grid;
	grid-template-columns: 1fr 1.35fr;
	gap: 72px;
	align-items: center;
}
@media (max-width: 900px) { .nl-split { grid-template-columns: 1fr; gap: 44px; } }
.nl-split-image {
	background: var(--nl-surface);
	border-radius: 6px;
	overflow: hidden;
	position: relative;
	aspect-ratio: 3 / 4;
	display: block;
	padding: 0;
	border: none;
	line-height: 0;
}
.nl-split-image::after,
.nl-split-image::before { content: none !important; display: none !important; }

/* GOTCHA (ten sam co przy portretach ekspertow): globalny reset
   body.nl-site img{height:auto} ma (0,1,2) i bije .nl-split-image img (0,1,1),
   przez co prawie kwadratowe zdjecie nie wypelnialo slotu 3:4 i zostawialo
   czarny pas pod spodem. Podnosimy specyficznosc. */
body.nl-site .nl-split-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}
.nl-split-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	display: block;
	border: none;
}
@media (max-width: 900px) { .nl-split-image { aspect-ratio: 16 / 10; } }
.nl-misja-text { max-width: 62ch; }
.nl-misja h3 {
	font-size: 12.5px;
	text-transform: uppercase;
	letter-spacing: 0.3em;
	color: var(--nl-gold);
	font-weight: 600;
	margin-bottom: 30px;
	font-family: var(--nl-sans);
	line-height: 1.4;
}
.nl-misja h2 {
	font-size: clamp(2rem, 3.6vw, 2.75rem);
	margin-bottom: 28px;
	font-weight: 300;
}
.nl-misja p {
	color: var(--nl-text-secondary);
	font-size: 1.0625rem;
	line-height: 1.8;
	margin-bottom: 22px;
}
.nl-misja-cta {
	margin-top: 36px;
	display: flex;
	gap: 14px;
	flex-wrap: wrap;
	align-items: center;
}

/* ----- Dlaczego ----- */
.nl-dlaczego-section { background: var(--nl-surface); }

.nl-dlaczego-inner {
	display: grid;
	grid-template-columns: 0.8fr 1.2fr;
	gap: 72px;
	max-width: 1120px;
	margin: 0 auto;
	align-items: start;
}

/* Opcjonalna kolumna ze zdjeciem. Gdy jej nie ma, uklad sekcji jest
   dokladnie taki jak wczesniej - zaden styl ponizej sie nie aktywuje. */
.nl-dlaczego-zfoto {
	display: grid;
	grid-template-columns: 0.55fr 1.45fr;
	gap: 56px;
	max-width: 1120px;
	margin: 0 auto;
	align-items: start;
}
.nl-dlaczego-zfoto.nl-foto-prawo { grid-template-columns: 1.45fr 0.55fr; }
.nl-dlaczego-zfoto.nl-foto-prawo .nl-dlaczego-foto { order: 2; }
.nl-dlaczego-zfoto .nl-dlaczego-inner {
	grid-template-columns: 1fr;
	gap: 28px;
	max-width: none;
}
/* W ukladzie ze zdjeciem tresc jest jednokolumnowa, wiec przyklejony naglowek
   nachodzilby na tekst plynacy pod nim - wylaczamy sticky tylko w tym wariancie. */
.nl-dlaczego-zfoto .nl-dlaczego-aside,
.nl-dlaczego-zfoto .nl-dlaczego-aside.nl-sticky { position: static; top: auto; }
.nl-dlaczego-foto {
	position: relative;
	aspect-ratio: 9 / 16;
	overflow: hidden;
	border-radius: 6px;
	border: 0.5px solid var(--nl-border);
	background: var(--nl-surface);
}
/* Zlote tlo zdjecia jest jasne i na ciemnym motywie robilo plame. Poza
   obnizonym nasyceniem sadzamy je w tle delikatna winieta. */
.nl-dlaczego-foto::after {
	content: '';
	position: absolute;
	inset: 0;
	border-radius: inherit;
	pointer-events: none;
	box-shadow: inset 0 0 70px rgba(13, 11, 8, 0.6);
}
body.nl-site .nl-dlaczego-foto img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	filter: grayscale(15%) saturate(0.9);
	transition: filter 0.5s ease;
}
.nl-dlaczego-section:hover .nl-dlaczego-foto img { filter: grayscale(0%) saturate(1); }

@media (max-width: 900px) {
	.nl-dlaczego-zfoto,
	.nl-dlaczego-zfoto.nl-foto-prawo { grid-template-columns: 1fr; gap: 32px; }
	.nl-dlaczego-zfoto.nl-foto-prawo .nl-dlaczego-foto { order: 0; }
	.nl-dlaczego-foto { aspect-ratio: 16 / 10; }
}
@media (prefers-reduced-motion: reduce) {
	body.nl-site .nl-dlaczego-foto img { transition: none; }
}
@media (max-width: 900px) {
	.nl-dlaczego-inner { grid-template-columns: 1fr; gap: 36px; }
}

.nl-dlaczego-aside {
	position: sticky;
	top: 120px;
}
@media (max-width: 900px) {
	.nl-dlaczego-aside { position: static; }
}
.nl-dlaczego-inner h2 {
	font-size: clamp(2rem, 3.8vw, 2.875rem);
	margin-bottom: 0;
	text-align: left;
	line-height: 1.1;
}

.nl-dlaczego-body > p {
	color: var(--nl-text-secondary);
	font-size: 1rem;
	line-height: 1.85;
	margin: 0 0 24px 0;
}

.nl-dlaczego-body .nl-lead {
	font-size: 1.1875rem;
	line-height: 1.7;
	color: var(--nl-text);
	padding-left: 24px;
	border-left: 2px solid var(--nl-gold);
	margin-bottom: 32px;
}
@media (max-width: 600px) {
	.nl-dlaczego-body .nl-lead { font-size: 1.0625rem; padding-left: 18px; }
}

.nl-dlaczego-footer {
	margin-top: 44px;
	padding-top: 36px;
	border-top: 0.5px solid var(--nl-border-strong);
}
.nl-dlaczego-highlight {
	color: var(--nl-text) !important;
	font-weight: 500;
	text-align: left !important;
	margin: 0 0 28px 0 !important;
	font-size: 1.1875rem !important;
	line-height: 1.6;
	padding: 0 !important;
	border: none !important;
	max-width: none !important;
}


/* ----- Oferta ----- */
.nl-oferta-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1px;
	background: var(--nl-border);
	border: 0.5px solid var(--nl-border);
	border-radius: 4px;
	overflow: hidden;
}
@media (max-width: 900px) { .nl-oferta-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .nl-oferta-grid { grid-template-columns: 1fr; } }
.nl-oferta-card {
	background: var(--nl-bg);
	padding: 40px 34px;
	transition: background 0.25s;
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	align-items: flex-start;
	min-height: 300px;
}
.nl-oferta-card::after {
	content: '';
	position: absolute;
	left: 0;
	top: 0;
	width: 2px;
	height: 0;
	background: var(--nl-gold);
	transition: height 0.3s ease;
}
.nl-oferta-card:hover::after { height: 100%; }
.nl-oferta-card:hover { background: var(--nl-surface-elevated); }
@media (max-width: 600px) { .nl-oferta-card { padding: 32px 26px; min-height: auto; } }
.nl-oferta-num {
	font-family: var(--nl-sans);
	font-size: 15px;
	color: var(--nl-gold);
	margin-bottom: 22px;
	display: block;
	font-weight: 700;
	letter-spacing: 0.18em;
	line-height: 1;
}
@media (max-width: 600px) {
	.nl-oferta-num { font-size: 13.5px; margin-bottom: 18px; }
}

.nl-oferta-ikona {
	display: block;
	color: var(--nl-gold);
	margin-bottom: 22px;
	line-height: 0;
	transition: transform 0.3s ease, opacity 0.3s;
	opacity: 0.9;
}
.nl-oferta-ikona svg {
	width: 40px;
	height: 40px;
	display: block;
}
/* Elementor globalnie ustawia svg { fill:currentColor }, co nadpisuje inline
   fill="none" i zamienia kontur w pełny kształt. Wymuszamy sam kontur. */
.nl-oferta-ikona svg,
.nl-oferta-ikona svg path,
.nl-oferta-ikona svg rect,
.nl-oferta-ikona svg circle,
.nl-oferta-ikona svg line {
	fill: none !important;
	stroke: currentColor;
}
.nl-oferta-card:hover .nl-oferta-ikona {
	transform: translateY(-2px);
	opacity: 1;
}
@media (max-width: 600px) {
	.nl-oferta-ikona svg { width: 34px; height: 34px; }
	.nl-oferta-ikona { margin-bottom: 18px; }
}
.nl-oferta-card h3 {
	font-family: var(--nl-serif);
	font-size: 1.4375rem;
	font-weight: 400;
	margin-bottom: 14px;
	color: var(--nl-text);
	line-height: 1.25;
}
.nl-oferta-card p {
	font-size: 14.5px;
	color: var(--nl-text-secondary);
	line-height: 1.7;
	margin: 0;
}

/* ----- Eksperci ----- */
.nl-eksperci-section { background: var(--nl-surface); }
.nl-eksperci-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 20px;
}
@media (max-width: 1000px) { .nl-eksperci-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .nl-eksperci-grid { grid-template-columns: 1fr; } }
.nl-ekspert {
	background: var(--nl-bg);
	border: 0.5px solid var(--nl-border);
	border-radius: 6px;
	padding: 26px 28px;
	display: grid;
	grid-template-columns: 104px 1fr;
	gap: 24px;
	align-items: center;
	transition: border-color 0.3s, background 0.3s;
}
@media (max-width: 400px) {
	.nl-ekspert { grid-template-columns: 84px 1fr; gap: 18px; padding: 22px 20px; }
}
.nl-ekspert:hover {
	border-color: var(--nl-border-strong);
	background: var(--nl-surface-elevated);
}
.nl-ekspert-photo {
	width: 104px;
	height: 104px;
	border-radius: 50%;
	overflow: hidden;
	margin: 0;
	background: var(--nl-surface-elevated);
	border: 0.5px solid var(--nl-border-strong);
	filter: grayscale(20%);
	transition: filter 0.3s;
}
@media (max-width: 400px) {
	.nl-ekspert-photo { width: 84px; height: 84px; }
}
.nl-ekspert-meta { min-width: 0; }
.nl-ekspert:hover .nl-ekspert-photo { filter: grayscale(0%); }
.nl-ekspert-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.nl-ekspert h3 {
	font-size: 1.125rem;
	font-weight: 400;
	margin-bottom: 8px;
	line-height: 1.3;
}
.nl-ekspert p {
	font-size: 11px;
	color: var(--nl-text-muted);
	letter-spacing: 0.1em;
	text-transform: uppercase;
	line-height: 1.55;
	margin: 0;
}
.nl-eksperci-cta { margin-top: 64px; text-align: center; }

/* ----- Współpraca ----- */
/* ----- Współpraca: pas ze zdjęciem ----- */
.nl-wspolpraca-section {
	position: relative;
	padding: clamp(80px, 9vw, 128px) 0;
	overflow: hidden;
	isolation: isolate;
	background: var(--nl-bg);
}

.nl-wspolpraca-bg {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 66% 34%;
	z-index: -2;
	display: block;
}

.nl-wspolpraca-veil {
	position: absolute;
	inset: 0;
	z-index: -1;
	background: linear-gradient(
		to bottom,
		rgba(13, 11, 8, 0.88) 0%,
		rgba(13, 11, 8, 0.52) 22%,
		rgba(13, 11, 8, 0.52) 78%,
		rgba(13, 11, 8, 0.88) 100%
	);
}

.nl-wspolpraca-inner {
	max-width: 760px;
	margin: 0 auto;
	text-align: center;
	padding: clamp(44px, 5.5vw, 64px) clamp(30px, 4.5vw, 56px);
	border-radius: 8px;
	position: relative;
	background: rgba(13, 11, 8, 0.62);
	backdrop-filter: blur(18px) saturate(0.8);
	-webkit-backdrop-filter: blur(18px) saturate(0.8);
	border: 0.5px solid rgba(245, 207, 6, 0.22);
	box-shadow: 0 24px 70px rgba(0, 0, 0, 0.5);
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
	.nl-wspolpraca-inner {
		background: rgba(13, 11, 8, 0.94);
		border-color: var(--nl-border-strong);
	}
}

.nl-wspolpraca-inner::before {
	content: '';
	position: absolute;
	top: 0;
	left: 50%;
	transform: translateX(-50%);
	width: 110px;
	height: 2px;
	background: linear-gradient(to right, transparent, var(--nl-gold), transparent);
}

.nl-wspolpraca-inner .nl-eyebrow { margin-bottom: 16px; }

.nl-wspolpraca-inner h2 {
	font-size: clamp(1.75rem, 3.2vw, 2.375rem);
	margin-bottom: 20px;
}

.nl-wspolpraca-inner p {
	padding: 0px 20px 20px 20px !important;
	color: #D6CDB8;
	font-size: 1.0625rem;
	line-height: 1.75;
	margin-left: auto;
	margin-right: auto;
	margin-top: 0;
	margin-bottom: 76px;
	text-align: center;
}

@media (max-width: 768px) {
	.nl-wspolpraca-section { padding: clamp(64px, 12vw, 88px) 0; }
	.nl-wspolpraca-inner { backdrop-filter: blur(14px) saturate(0.85); -webkit-backdrop-filter: blur(14px) saturate(0.85); }
}

/* ----- Produkty ----- */
.nl-produkty-section { background: var(--nl-surface); }
.nl-produkty-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 28px;
	align-items: stretch;
}
@media (max-width: 900px) { .nl-produkty-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .nl-produkty-grid { grid-template-columns: 1fr; } }
.nl-produkt {
	background: var(--nl-bg);
	border: 0.5px solid var(--nl-border);
	border-radius: 6px;
	padding: 22px 22px 20px;
	display: flex;
	flex-direction: column;
	height: 100%;
	transition: transform 0.3s, border-color 0.3s, box-shadow 0.3s;
}
.nl-produkt:hover {
	transform: translateY(-5px);
	border-color: rgba(245, 207, 6, 0.4);
	box-shadow: 0 16px 48px rgba(0, 0, 0, 0.55);
}
.nl-produkt-image {
	/* Ten sam kadr co karta w sklepie — patrz woocommerce.css. */
	aspect-ratio: 8 / 7;
	width: 100%;
	background: var(--nl-surface-elevated);
	border-radius: 4px;
	overflow: hidden;
	margin-bottom: 24px;
	flex-shrink: 0;
	display: block;
	padding: 0;
}
.nl-produkt-image img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	object-position: center;
	display: block;
	padding: 12px;
}
.nl-produkt-type {
	font-family: var(--nl-sans);
	font-size: 11px;
	color: var(--nl-gold);
	letter-spacing: 0.2em;
	text-transform: uppercase;
	margin-bottom: 16px;
	font-weight: 600;
	line-height: 1.4;
	padding-bottom: 15px !important;
}
.nl-produkt h3 {
	font-family: var(--nl-serif);
	font-size: 1.4rem;
	font-weight: 400;
	margin-bottom: 18px;
	line-height: 1.25;
}
.nl-produkt-desc {
	font-size: 15px;
	color: var(--nl-text-secondary);
	line-height: 1.7;
	margin-bottom: 26px;
	flex: 1 1 auto;
}
.nl-produkt-cart,
a.nl-produkt-cart,
body a.nl-produkt-cart {
	font-family: var(--nl-sans);
	font-size: 11px;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--nl-gold) !important;
	font-weight: 700;
	margin-top: auto;
	flex-shrink: 0;
	padding-top: 20px;
	border-top: 0.5px solid var(--nl-border);
	display: inline-block;
	text-decoration: none !important;
	transition: color 0.2s, letter-spacing 0.2s;
}
.nl-produkt-cart:hover,
a.nl-produkt-cart:hover {
	color: #FFDD2E !important;
	letter-spacing: 0.24em;
}

/* ----- Zapowiedzi ----- */
.nl-zapowiedzi-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 24px;
	align-items: stretch;
}
@media (max-width: 760px) { .nl-zapowiedzi-grid { grid-template-columns: 1fr; } }
.nl-zapowiedz-card {
	background: var(--nl-surface);
	border: 0.5px solid var(--nl-border);
	border-radius: 6px;
	padding: 30px;
	display: grid;
	grid-template-columns: 180px minmax(0, 1fr);
	gap: 28px;
	align-items: start;
	height: 100%;
	transition: border-color 0.3s, box-shadow 0.3s;
}
.nl-zapowiedz-card:hover {
	border-color: rgba(245, 207, 6, 0.3);
	box-shadow: 0 12px 36px rgba(0, 0, 0, 0.45);
}
@media (max-width: 560px) { .nl-zapowiedz-card { grid-template-columns: 1fr; padding: 24px; } }
.nl-zapowiedz-image {
	width: 180px;
	max-width: 100%;
	aspect-ratio: 3 / 4;
	background: var(--nl-surface-elevated);
	border-radius: 4px;
	overflow: hidden;
	padding: 0;
	display: block;
	line-height: 0;
	flex-shrink: 0;
}
@media (max-width: 560px) {
	.nl-zapowiedz-image { width: 100%; aspect-ratio: 16 / 10; }
}
.nl-zapowiedz-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	display: block;
}
.nl-zapowiedz-content h3 {
	font-family: var(--nl-serif);
	font-size: 1.3rem;
	font-weight: 400;
	margin-bottom: 15px !important;
	line-height: 1.25;
}
.nl-zapowiedz-type {
	font-family: var(--nl-sans);
	font-size: 11px;
	color: var(--nl-gold);
	letter-spacing: 0.2em;
	text-transform: uppercase;
	margin-bottom: 15px !important;
	font-weight: 600;
	line-height: 1.4;
}
.nl-zapowiedz-content p:not(.nl-zapowiedz-type) {
	font-size: 14px;
	color: var(--nl-text-secondary);
	line-height: 1.75;
	margin: 0;
	padding-bottom: 15px !important;
}

/* ----- Kontakt ----- */
.nl-kontakt-section { background: var(--nl-surface); }

.nl-kontakt {
	display: grid;
	grid-template-columns: 1fr 1.15fr;
	gap: 64px;
	align-items: stretch;
}
@media (max-width: 900px) { .nl-kontakt { grid-template-columns: 1fr; gap: 40px; } }

.nl-kontakt-info {
	display: flex;
	flex-direction: column;
}
.nl-kontakt-info h2 {
	font-size: clamp(2rem, 3.6vw, 2.75rem);
	margin-bottom: 40px;
	font-weight: 300;
}

.nl-kontakt-items {
	display: flex;
	flex-direction: column;
	gap: 14px;
}
.nl-kontakt-item {
	padding: 22px 26px;
	border: 0.5px solid var(--nl-border);
	border-radius: 6px;
	background: var(--nl-bg);
	transition: border-color 0.25s, transform 0.25s;
}
.nl-kontakt-item:hover {
	border-color: rgba(245, 207, 6, 0.35);
	transform: translateX(3px);
}
.nl-kontakt-item:last-child { border-bottom: 0.5px solid var(--nl-border); }

.nl-kontakt-label {
	font-family: var(--nl-sans);
	font-size: 10px;
	letter-spacing: 0.26em;
	text-transform: uppercase;
	color: var(--nl-gold);
	margin-bottom: 10px;
	display: block;
	font-weight: 600;
}
.nl-kontakt-value {
	font-family: var(--nl-serif);
	font-size: 1.25rem;
	font-weight: 300;
	color: var(--nl-text);
	line-height: 1.4;
}
.nl-kontakt-value a { color: inherit; transition: color 0.2s; text-decoration: none; }
.nl-kontakt-value a:hover { color: var(--nl-gold); }

.nl-kontakt-map {
	min-height: 420px;
	height: 100%;
	background: var(--nl-bg);
	border: 0.5px solid var(--nl-border);
	border-radius: 6px;
	overflow: hidden;
	z-index: 1;
}
@media (max-width: 900px) { .nl-kontakt-map { min-height: 340px; } }

.nl-kontakt-map .leaflet-control-zoom a {
	background: var(--nl-surface-elevated);
	color: var(--nl-text);
	border-color: var(--nl-border-strong);
}
.nl-kontakt-map .leaflet-control-zoom a:hover {
	background: var(--nl-border-strong);
	color: var(--nl-gold);
}
.nl-kontakt-map .leaflet-control-attribution {
	background: rgba(13, 11, 8, 0.75);
	color: var(--nl-text-muted);
	font-size: 10px;
}
.nl-kontakt-map .leaflet-control-attribution a { color: var(--nl-text-secondary); }
.nl-kontakt-map .leaflet-popup-content-wrapper,
.nl-kontakt-map .leaflet-popup-tip {
	background: var(--nl-surface-elevated);
	color: var(--nl-text);
	border-radius: 4px;
}
.nl-kontakt-map .leaflet-popup-content { font-family: var(--nl-sans); font-size: 13px; }

.nl-map-pin { position: relative; }
.nl-map-pin-dot {
	position: absolute;
	top: 50%; left: 50%;
	transform: translate(-50%, -50%);
	width: 11px; height: 11px;
	background: var(--nl-gold);
	border-radius: 50%;
	box-shadow: 0 0 0 3px rgba(13, 11, 8, 0.9);
}
.nl-map-pin-ring {
	position: absolute;
	top: 50%; left: 50%;
	transform: translate(-50%, -50%);
	width: 22px; height: 22px;
	border: 1.5px solid var(--nl-gold);
	border-radius: 50%;
	opacity: 0.55;
	animation: nl-pin-pulse 2.6s ease-out infinite;
}
@keyframes nl-pin-pulse {
	0%   { transform: translate(-50%, -50%) scale(0.7); opacity: 0.7; }
	100% { transform: translate(-50%, -50%) scale(1.9); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
	.nl-map-pin-ring { animation: none; opacity: 0.4; }
}

/* ----- Footer (globalny) ----- */
.nl-footer {
	padding: 72px 0 40px;
	background: var(--nl-bg);
	border-top: 0.5px solid var(--nl-border);
	font-family: var(--nl-sans);
	color: var(--nl-text);
}
.nl-footer .nl-container { max-width: 1240px; margin: 0 auto; padding: 0 24px; }
.nl-footer-grid {
	display: grid;
	grid-template-columns: 1.6fr 1fr 1fr;
	gap: 48px;
	margin-bottom: 56px;
}
@media (max-width: 900px) { .nl-footer-grid { grid-template-columns: 1fr 1fr; gap: 40px; } }
@media (max-width: 520px) { .nl-footer-grid { grid-template-columns: 1fr; gap: 36px; } }
.nl-footer-logo { margin-bottom: 18px; }
body.nl-site .nl-footer-logo img,
.nl-footer-logo img {
	height: 48px;
	width: auto;
	max-width: 220px;
	object-fit: contain;
	opacity: 0.92;
}
.nl-footer-tagline {
	font-family: var(--nl-serif);
	color: var(--nl-text-secondary);
	font-size: 15px;
	max-width: 300px;
	line-height: 1.6;
	margin: 0;
}
.nl-footer-col h4 {
	font-family: var(--nl-sans);
	font-size: 11px;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--nl-gold);
	margin: 0 0 24px 0;
	font-weight: 500;
}
.nl-footer-col ul { list-style: none; margin: 0; padding: 0; }
.nl-footer-col li { margin-bottom: 11px; }
.nl-footer-col a {
	font-size: 14px;
	color: var(--nl-text-secondary);
	text-decoration: none;
	transition: color 0.2s;
}
.nl-footer-col a:hover { color: var(--nl-gold); }
.nl-footer-bottom {
	padding-top: 32px;
	border-top: 0.5px solid var(--nl-border);
	display: flex;
	justify-content: space-between;
	align-items: center;
	flex-wrap: wrap;
	gap: 20px 32px;
	font-size: 12px;
	color: var(--nl-text-muted);
}
@media (max-width: 760px) {
	.nl-footer-bottom { flex-direction: column; align-items: flex-start; gap: 18px; }
}
.nl-footer-credit { max-width: 440px; }

.nl-footer-author {
	font-size: 12px;
	color: var(--nl-text-muted);
	margin-left: auto;
	margin-right: 24px;
}
@media (max-width: 760px) {
	.nl-footer-author { margin-left: 0; margin-right: 0; }
}
.nl-footer-author a {
	color: var(--nl-text-secondary);
	text-decoration: none;
	border-bottom: 0.5px solid transparent;
	transition: color 0.2s, border-color 0.2s;
}
.nl-footer-author a:hover {
	color: var(--nl-gold);
	border-bottom-color: rgba(245, 207, 6, 0.4);
}
.nl-socials { display: flex; gap: 12px; }
.nl-socials a {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	border: 0.5px solid var(--nl-border-strong);
	border-radius: 50%;
	color: var(--nl-text-secondary);
	transition: all 0.2s;
	text-decoration: none;
}
.nl-socials a:hover { color: var(--nl-gold); border-color: var(--nl-gold); }

/* ----- Mockup ribbon (tylko na froncie w fazie mockupa) ----- */
/* ----- Separator botaniczny ----- */
.nl-botanical-divider {
	display: flex;
	justify-content: center;
	padding: 0 24px clamp(56px, 7vw, 88px);
	color: var(--nl-gold);
	opacity: 0.5;
}
.nl-botanical-divider svg {
	width: 100%;
	max-width: 440px;
	height: auto;
}

/* Scroll reveal — subtelne wejście sekcji */
[data-reveal] {
	opacity: 0;
	transform: translateY(14px);
	transition: opacity 0.55s cubic-bezier(0.22, 0.61, 0.36, 1),
	            transform 0.55s cubic-bezier(0.22, 0.61, 0.36, 1);
	will-change: opacity, transform;
}
[data-reveal].is-revealed {
	opacity: 1;
	transform: none;
	will-change: auto;
}

[data-reveal].nl-oferta-grid > *,
[data-reveal].nl-eksperci-grid > *,
[data-reveal].nl-produkty-grid > *,
[data-reveal].nl-zapowiedzi-grid > * {
	opacity: 0;
	transform: translateY(10px);
	transition: opacity 0.45s ease, transform 0.45s ease;
}
[data-reveal].is-revealed > * { opacity: 1; transform: none; }
[data-reveal].is-revealed > *:nth-child(1) { transition-delay: 0.04s; }
[data-reveal].is-revealed > *:nth-child(2) { transition-delay: 0.08s; }
[data-reveal].is-revealed > *:nth-child(3) { transition-delay: 0.12s; }
[data-reveal].is-revealed > *:nth-child(4) { transition-delay: 0.16s; }
[data-reveal].is-revealed > *:nth-child(5) { transition-delay: 0.20s; }
[data-reveal].is-revealed > *:nth-child(6) { transition-delay: 0.24s; }
[data-reveal].is-revealed > *:nth-child(7) { transition-delay: 0.28s; }
[data-reveal].is-revealed > *:nth-child(8) { transition-delay: 0.32s; }
[data-reveal].is-revealed > *:nth-child(9) { transition-delay: 0.36s; }

@media (prefers-reduced-motion: reduce) {
	[data-reveal],
	[data-reveal] > * {
		opacity: 1 !important;
		transform: none !important;
		transition: none !important;
	}
}

/* ----- WP admin bar spacer ----- */
body.admin-bar .nl-nav { top: 32px; }
@media (max-width: 782px) {
	body.admin-bar .nl-nav { top: 46px; }
}


/* ============================================
   OPINIE — slider
   ============================================ */

.nl-opinie-section {
	position: relative;
	background: var(--nl-surface);
	overflow: hidden;
	isolation: isolate;
}

.nl-pioro {
	position: absolute;
	left: -40px;
	top: 50%;
	transform: translateY(-50%) rotate(-12deg);
	width: min(30vw, 380px);
	opacity: 0.14;
	z-index: 0;
	pointer-events: none;
}
.nl-pioro img { width: 100%; height: auto; display: block; }
@media (max-width: 1100px) {
	.nl-pioro { opacity: 0.07; left: -90px; }
}

.nl-opinie-inner {
	position: relative;
	z-index: 1;
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr);
	gap: 72px;
	align-items: center;
}
@media (max-width: 1000px) {
	.nl-opinie-inner { grid-template-columns: 1fr; gap: 44px; }
}

.nl-opinie-aside h2 {
	font-size: clamp(2rem, 3.6vw, 2.875rem);
	margin-bottom: 24px;
	line-height: 1.1;
}
.nl-opinie-aside p {
	color: var(--nl-text-secondary);
	font-size: 1.0625rem;
	line-height: 1.75;
	margin-bottom: 32px;
	max-width: 40ch;
}
.nl-opinie-score {
	display: flex;
	align-items: baseline;
	gap: 14px;
	padding-top: 26px;
	border-top: 0.5px solid var(--nl-border-strong);
}
.nl-opinie-score b {
	font-family: var(--nl-serif);
	font-size: 2.5rem;
	font-weight: 300;
	color: var(--nl-gold);
	line-height: 1;
}
.nl-opinie-score span {
	font-size: 13px;
	color: var(--nl-text-muted);
	letter-spacing: 0.06em;
	line-height: 1.5;
}

.nl-slider { position: relative; }
.nl-slider-viewport { position: relative; min-height: 380px; }
@media (max-width: 1000px) { .nl-slider-viewport { min-height: 400px; } }
@media (max-width: 560px)  { .nl-slider-viewport { min-height: 470px; } }

.nl-slide {
	position: absolute;
	inset: 0;
	opacity: 0;
	transform: translateX(28px);
	transition: opacity 0.5s cubic-bezier(0.22, 0.61, 0.36, 1),
	            transform 0.5s cubic-bezier(0.22, 0.61, 0.36, 1);
	pointer-events: none;
	display: flex;
	flex-direction: column;
	justify-content: center;
}
.nl-slide.is-active { opacity: 1; transform: none; pointer-events: auto; }
.nl-slide.is-leaving { opacity: 0; transform: translateX(-28px); }

/* Tryb przenikania — bez przesuwania, sama zmiana krycia. Bezpieczny zamiennik
   ruchu przy prefers-reduced-motion (slajdy sa juz absolutnie ulozone na sobie,
   wiec nie ma tracka do neutralizowania). visibility trzyma nieaktywne slajdy
   poza kolejnoscia Tab i poza czytnikiem ekranu. */
body.nl-site .nl-slider--fade .nl-slide,
body.nl-site .nl-slider--fade .nl-slide.is-leaving {
	transform: none !important;
	visibility: hidden;
	transition: opacity 0.45s ease, visibility 0s linear 0.45s;
}
body.nl-site .nl-slider--fade .nl-slide.is-active {
	visibility: visible;
	transition: opacity 0.45s ease, visibility 0s linear 0s;
}

/* Przycisk pauzy/wznowienia (WCAG 2.2.2) — dokladany przez JS do .nl-slider-nav */
.nl-slider-pauza {
	width: 42px;
	height: 42px;
	margin-left: auto;
	border-radius: 50%;
	border: 1px solid var(--nl-border-strong);
	background: transparent;
	color: var(--nl-text-secondary);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	flex-shrink: 0;
	transition: color 0.25s ease, border-color 0.25s ease, background 0.25s ease;
}
.nl-slider-pauza svg { width: 20px; height: 20px; }
.nl-slider-pauza:hover {
	color: var(--nl-gold);
	border-color: var(--nl-gold);
	background: rgba(245, 207, 6, 0.08);
}
.nl-slider-pauza[aria-pressed="true"] { color: var(--nl-gold); border-color: var(--nl-gold); }

.nl-slide-card {
	background: var(--nl-bg);
	border: 0.5px solid var(--nl-border);
	border-radius: 8px;
	padding: clamp(34px, 4vw, 52px);
	position: relative;
	overflow: hidden;
	height: 100%;
	display: flex;
	flex-direction: column;
	justify-content: center;
}
.nl-slide-card::before {
	content: '\201E';
	position: absolute;
	top: 2px;
	right: 24px;
	font-family: var(--nl-serif);
	font-size: 130px;
	line-height: 1;
	color: var(--nl-gold);
	opacity: 0.08;
	pointer-events: none;
}

.nl-stars { display: flex; gap: 4px; margin-bottom: 26px; }
.nl-stars svg { width: 17px; height: 17px; display: block; }
.nl-star-on  { color: var(--nl-gold); }
.nl-star-off { color: var(--nl-border-strong); }

.nl-slide blockquote {
	font-family: var(--nl-serif);
	font-size: clamp(1.15rem, 1.9vw, 1.5rem);
	line-height: 1.55;
	color: var(--nl-text);
	font-weight: 300;
	margin: 0 0 32px 0;
	position: relative;
}

.nl-slide-author {
	display: flex;
	align-items: center;
	gap: 14px;
	padding-top: 24px;
	border-top: 0.5px solid var(--nl-border);
}
.nl-slide-avatar {
	width: 44px; height: 44px;
	border-radius: 50%;
	background: var(--nl-surface-elevated);
	border: 0.5px solid var(--nl-border-strong);
	display: flex; align-items: center; justify-content: center;
	font-family: var(--nl-serif);
	font-size: 17px;
	color: var(--nl-gold);
	flex-shrink: 0;
}
.nl-slide-who { display: flex; flex-direction: column; gap: 2px; }
.nl-slide-who b {
	font-family: var(--nl-serif);
	font-size: 1.125rem;
	font-weight: 400;
	color: var(--nl-text);
}
.nl-slide-who span {
	font-size: 10.5px;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--nl-text-muted);
	font-weight: 600;
}

.nl-slider-nav {
	display: flex;
	align-items: center;
	gap: 20px;
	margin-top: 32px;
}
.nl-arrows { display: flex; gap: 10px; }
.nl-arrow {
	width: 42px; height: 42px;
	border-radius: 50%;
	border: 1px solid var(--nl-border-strong);
	background: transparent;
	color: var(--nl-text-secondary);
	display: flex; align-items: center; justify-content: center;
	cursor: pointer;
	transition: all 0.22s;
	padding: 0;
}
.nl-arrow:hover {
	border-color: var(--nl-gold);
	color: var(--nl-gold);
	background: rgba(245, 207, 6, 0.07);
}
.nl-arrow:focus-visible { outline: 2px solid var(--nl-gold); outline-offset: 3px; }
.nl-arrow svg { width: 16px; height: 16px; }

.nl-dots { display: flex; gap: 2px; margin-left: auto; align-items: center; }
/* Pole dotyku ma 24x24 px (minimum dla palca), a sama kropka nadal 9 px.
   Wczesniej przycisk MIAL 9x9 i audyt slusznie zglaszal za male cele dotykowe:
   trafienie w 9-pikselowa kropke na telefonie jest loteria. Powiekszamy obszar
   klikalny, nie element wizualny. */
.nl-dot {
	width: 24px; height: 24px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: transparent;
	border: none;
	padding: 0;
	cursor: pointer;
	border-radius: 50%;
}
.nl-dot::before {
	content: '';
	width: 9px; height: 9px;
	border-radius: 50%;
	background: var(--nl-border-strong);
	transition: background 0.25s, transform 0.25s;
}
.nl-dot:hover::before { background: var(--nl-text-muted); }
.nl-dot:focus-visible { outline: 2px solid var(--nl-gold); outline-offset: 2px; }
.nl-dot.is-active::before { background: var(--nl-gold); transform: scale(1.15); }
.nl-dot-fill { display: none; }

@media (max-width: 560px) {
	.nl-slider-nav { gap: 14px; }
	.nl-dots { gap: 2px; }
}

@media (prefers-reduced-motion: reduce) {
	/* Slajdy przenikaja (klasa .nl-slider--fade z JS) — nie skracamy tu przejscia
	   do zera, bo przenikanie krycia jest wlasnie bezpieczna alternatywa ruchu.
	   Zerujemy natomiast przesuniecie, ktore jest ruchem. */
	.nl-slide, .nl-slide.is-leaving { transform: none; }
}

/* ============================================
   WIDGETY ELEMENTORA — klasy pomocnicze
   ============================================ */

/* Widgety renderują się poza body.nl-site, więc tło ustawiamy jawnie */
.nl-bg-surface { background: var(--nl-surface); }

/* Liczba kolumn sterowana z panelu */
.nl-oferta-grid.nl-cols-2 { grid-template-columns: repeat(2, 1fr); }
.nl-oferta-grid.nl-cols-3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 900px) {
	.nl-oferta-grid.nl-cols-2,
	.nl-oferta-grid.nl-cols-3 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
	.nl-oferta-grid.nl-cols-2,
	.nl-oferta-grid.nl-cols-3 { grid-template-columns: 1fr; }
}

/* Style sekcji muszą działać też poza stroną główną.
   Wcześniej wszystko było scope'owane pod body.nl-site — te reguły to odblokowują. */
.nl-oferta-widget,
.nl-oferta-widget * { box-sizing: border-box; }
.nl-oferta-widget h2,
.nl-oferta-widget h3 {
	margin: 0;
	font-family: var(--nl-serif);
	font-weight: 300;
	letter-spacing: -0.015em;
	line-height: 1.1;
	color: var(--nl-text);
}
.nl-oferta-widget p { margin: 0; }

/* Proporcje obrazu w widgecie Split */
.nl-split-image.nl-ar-3-4   { aspect-ratio: 3 / 4; }
.nl-split-image.nl-ar-4-5   { aspect-ratio: 4 / 5; }
.nl-split-image.nl-ar-1-1   { aspect-ratio: 1 / 1; }
.nl-split-image.nl-ar-16-10 { aspect-ratio: 16 / 10; }
@media (max-width: 900px) {
	.nl-split-image.nl-ar-3-4,
	.nl-split-image.nl-ar-4-5,
	.nl-split-image.nl-ar-1-1 { aspect-ratio: 16 / 10; }
}

/* Maska dolnej krawędzi grafiki hero — sterowana przełącznikiem */
.nl-hero-visual img { -webkit-mask-image: none; mask-image: none; }
.nl-hero-visual.nl-masked img {
	-webkit-mask-image: linear-gradient(to bottom, #000 82%, transparent 100%);
	mask-image: linear-gradient(to bottom, #000 82%, transparent 100%);
}
@media (max-width: 900px) {
	.nl-hero-visual.nl-masked img { -webkit-mask-image: none; mask-image: none; }
}

/* Warianty karty w pasie CTA */
.nl-wspolpraca-inner.nl-card-solid {
	background: rgba(13, 11, 8, 0.94);
	border-color: var(--nl-border-strong);
	backdrop-filter: none;
	-webkit-backdrop-filter: none;
}
.nl-wspolpraca-inner.nl-card-glass {
	background: rgba(13, 11, 8, 0.62);
	backdrop-filter: blur(18px) saturate(0.8);
	-webkit-backdrop-filter: blur(18px) saturate(0.8);
	border-color: rgba(245, 207, 6, 0.22);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
	.nl-wspolpraca-inner.nl-card-glass {
		background: rgba(13, 11, 8, 0.94);
		border-color: var(--nl-border-strong);
	}
}

/* Siła zasłony nad zdjęciem */
.nl-wspolpraca-veil.nl-veil-lekka {
	background: linear-gradient(to bottom, rgba(13,11,8,.78) 0%, rgba(13,11,8,.34) 22%, rgba(13,11,8,.34) 78%, rgba(13,11,8,.78) 100%);
}
.nl-wspolpraca-veil.nl-veil-srednia {
	background: linear-gradient(to bottom, rgba(13,11,8,.88) 0%, rgba(13,11,8,.52) 22%, rgba(13,11,8,.52) 78%, rgba(13,11,8,.88) 100%);
}
.nl-wspolpraca-veil.nl-veil-mocna {
	background: linear-gradient(to bottom, rgba(13,11,8,.94) 0%, rgba(13,11,8,.70) 22%, rgba(13,11,8,.70) 78%, rgba(13,11,8,.94) 100%);
}

/* Nagłówki w widgetach Split i CTA — poza scope'm body */
.nl-split-widget h2, .nl-split-widget h3,
.nl-wspolpraca-section h2 {
	margin: 0;
	font-family: var(--nl-serif);
	font-weight: 300;
	letter-spacing: -0.015em;
	line-height: 1.1;
	color: var(--nl-text);
}
.nl-split-widget .nl-misja-text p { margin: 0 0 20px; }
/* Odstęp pod nagłówkiem sekcji Misja („Pasjonujący świat…”). */
.nl-split-widget .nl-misja-text h2 { margin-bottom: 18px; }

/* Liczba kolumn — Zespół */
.nl-eksperci-grid.nl-cols-2 { grid-template-columns: repeat(2, 1fr); }
.nl-eksperci-grid.nl-cols-3 { grid-template-columns: repeat(3, 1fr); }
.nl-eksperci-grid.nl-cols-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1000px) {
	.nl-eksperci-grid.nl-cols-3,
	.nl-eksperci-grid.nl-cols-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
	.nl-eksperci-grid.nl-cols-2,
	.nl-eksperci-grid.nl-cols-3,
	.nl-eksperci-grid.nl-cols-4 { grid-template-columns: 1fr; }
}

/* Liczba kolumn — Zapowiedzi */
.nl-zapowiedzi-grid.nl-zap-cols-1 { grid-template-columns: 1fr; }
.nl-zapowiedzi-grid.nl-zap-cols-2 { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 760px) {
	.nl-zapowiedzi-grid.nl-zap-cols-2 { grid-template-columns: 1fr; }
}

/* Sticky sterowane przełącznikiem (aside_sticky). UWAGA: nazwa kontrolki NIE może
   brzmieć "sticky" — to zarezerwowana nazwa Elementor Pro, która robi z całego
   widgetu position:fixed (sekcja "znika" na scrollu). */
.nl-dlaczego-aside { position: static; }
.nl-dlaczego-aside.nl-sticky { position: sticky; top: 120px; }
@media (max-width: 900px) {
	.nl-dlaczego-aside.nl-sticky { position: static; }
}

/* Grafika w kolumnie lewej */
.nl-dlaczego-graf { margin-top: 44px; max-width: 260px; }
.nl-dlaczego-graf img { width: 100%; height: auto; display: block; }
.nl-dlaczego-graf.nl-op-pelne   { opacity: 0.9; }
.nl-dlaczego-graf.nl-op-srednie { opacity: 0.45; }
.nl-dlaczego-graf.nl-op-slabe   { opacity: 0.16; }
@media (max-width: 900px) {
	.nl-dlaczego-graf { max-width: 190px; margin-top: 32px; }
}

/* Nagłówki w nowych widgetach — poza scope'm body */
.nl-eksperci-section h2, .nl-eksperci-section h3,
.nl-zapowiedzi-widget h2, .nl-zapowiedzi-widget h3,
.nl-dlaczego-section h2 {
	margin: 0;
	font-family: var(--nl-serif);
	font-weight: 300;
	letter-spacing: -0.015em;
	line-height: 1.1;
	color: var(--nl-text);
}
.nl-dlaczego-body p { color: var(--nl-text-secondary); }

/* Widgety Opinie i Kontakt — odblokowanie spoza body.nl-site */
.nl-opinie-section,
.nl-opinie-section *,
.nl-kontakt-section,
.nl-kontakt-section * { box-sizing: border-box; }
.nl-opinie-section p,
.nl-kontakt-section p { margin: 0; }
.nl-opinie-aside h2,
.nl-kontakt-info h2 {
	font-family: var(--nl-serif);
	font-weight: 300;
	letter-spacing: -0.015em;
	line-height: 1.1;
	color: var(--nl-text);
}
.nl-slide blockquote { margin: 0; }

/* W edytorze Elementora kontener mapy nie ma jeszcze narzuconej wysokości —
   wymuszamy ją, żeby Leaflet miał się gdzie wyrenderować. */
.elementor-editor-active .nl-kontakt-map { min-height: 420px; }

/* Widget Produkty — siatka kolumn + odblokowanie nagłówków */
.nl-produkty-grid.nl-prod-cols-2 { grid-template-columns: repeat(2, 1fr); }
.nl-produkty-grid.nl-prod-cols-3 { grid-template-columns: repeat(3, 1fr); }
.nl-produkty-grid.nl-prod-cols-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 900px) {
	.nl-produkty-grid.nl-prod-cols-3,
	.nl-produkty-grid.nl-prod-cols-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
	.nl-produkty-grid.nl-prod-cols-2,
	.nl-produkty-grid.nl-prod-cols-3,
	.nl-produkty-grid.nl-prod-cols-4 { grid-template-columns: 1fr; }
}
.nl-produkty-section h2, .nl-produkty-section h3 {
	margin: 0;
	font-family: var(--nl-serif);
	font-weight: 300;
	letter-spacing: -0.015em;
	line-height: 1.1;
	color: var(--nl-text);
}

/* ============================================
   STRONY TREŚCIOWE — regulaminy, polityki
   ============================================ */

.nl-tresc-naglowek {
	max-width: 820px;
	margin: 0 auto clamp(40px, 5vw, 64px);
	padding-bottom: clamp(28px, 3.5vw, 40px);
	border-bottom: 0.5px solid var(--nl-border-strong);
}
.nl-tresc-naglowek h1 {
	font-family: var(--nl-serif);
	font-size: clamp(2rem, 4vw, 3rem);
	font-weight: 300;
	line-height: 1.12;
	letter-spacing: -0.015em;
	color: var(--nl-text);
	margin: 0;
}

.nl-tresc {
	max-width: 820px;
	margin: 0 auto;
	color: var(--nl-text-secondary);
	font-size: 1rem;
	line-height: 1.85;
}

.nl-tresc h2 {
	font-family: var(--nl-serif);
	font-size: 1.625rem;
	font-weight: 400;
	color: var(--nl-text);
	line-height: 1.25;
	margin: 48px 0 18px;
}
.nl-tresc h3 {
	font-family: var(--nl-serif);
	font-size: 1.25rem;
	font-weight: 400;
	color: var(--nl-text);
	line-height: 1.3;
	margin: 36px 0 14px;
}
.nl-tresc h4 {
	font-family: var(--nl-sans);
	font-size: 0.95rem;
	font-weight: 600;
	letter-spacing: 0.04em;
	color: var(--nl-text);
	margin: 28px 0 12px;
}

.nl-tresc p { margin: 0 0 20px; }
.nl-tresc strong { color: var(--nl-text); font-weight: 600; }

.nl-tresc ul,
.nl-tresc ol { margin: 0 0 22px; padding-left: 26px; }
.nl-tresc li { margin-bottom: 9px; }
.nl-tresc ul { list-style: disc; }
.nl-tresc ol { list-style: decimal; }
.nl-tresc ul li::marker { color: var(--nl-gold); }
.nl-tresc ol li::marker { color: var(--nl-gold); }

.nl-tresc a {
	color: var(--nl-gold);
	text-decoration: none;
	border-bottom: 0.5px solid rgba(245, 207, 6, 0.35);
	transition: border-color 0.2s;
}
.nl-tresc a:hover { border-bottom-color: var(--nl-gold); }

.nl-tresc table {
	width: 100%;
	border-collapse: collapse;
	margin: 0 0 26px;
	font-size: 0.9375rem;
}
.nl-tresc th,
.nl-tresc td {
	padding: 12px 14px;
	border: 0.5px solid var(--nl-border);
	text-align: left;
	vertical-align: top;
}
.nl-tresc th {
	background: var(--nl-surface-elevated);
	color: var(--nl-text);
	font-family: var(--nl-sans);
	font-size: 11px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	font-weight: 600;
}

/* Szerokie tabele przewijają się w swoim kontenerze, nie rozpychają strony */
.nl-tresc { overflow-wrap: break-word; }
@media (max-width: 700px) {
	.nl-tresc table { display: block; overflow-x: auto; white-space: nowrap; }
}

.nl-tresc img { max-width: 100%; height: auto; border-radius: 4px; }
.nl-tresc hr { border: none; border-top: 0.5px solid var(--nl-border); margin: 40px 0; }

/* ============================================
   MODELE WSPÓŁPRACY
   ============================================ */

.nl-modele-header {
	max-width: 820px;
	margin: 0 auto clamp(56px, 7vw, 88px);
	text-align: center;
}
.nl-modele-header h1 {
	font-family: var(--nl-serif);
	font-size: clamp(2.25rem, 4.5vw, 3.25rem);
	font-weight: 300;
	line-height: 1.1;
	letter-spacing: -0.015em;
	color: var(--nl-text);
	margin: 0 0 24px;
}
.nl-modele-lead {
	color: var(--nl-text-secondary);
	font-size: 1.0625rem;
	line-height: 1.8;
	margin: 0;
}

.nl-modele-lista {
	display: flex;
	flex-direction: column;
	gap: clamp(28px, 3.5vw, 44px);
}

.nl-model {
	background: var(--nl-surface);
	border: 0.5px solid var(--nl-border);
	border-radius: 8px;
	overflow: hidden;
	transition: border-color 0.3s;
}
.nl-model:hover { border-color: var(--nl-border-strong); }

.nl-model-head {
	padding: clamp(28px, 3.5vw, 40px) clamp(24px, 3.5vw, 44px);
	border-bottom: 0.5px solid var(--nl-border);
	text-align: center;
	background:
		radial-gradient(ellipse at 50% 0%, rgba(245, 207, 6, 0.045), transparent 70%),
		transparent;
}
.nl-model-numer {
	display: inline-block;
	font-family: var(--nl-sans);
	font-size: 10px;
	letter-spacing: 0.28em;
	text-transform: uppercase;
	color: var(--nl-gold);
	font-weight: 700;
	padding: 6px 14px;
	border: 0.5px solid rgba(245, 207, 6, 0.3);
	border-radius: 999px;
	margin-bottom: 16px;
}
.nl-model-head h2 {
	font-family: var(--nl-serif);
	font-size: clamp(1.25rem, 2.2vw, 1.625rem);
	font-weight: 400;
	line-height: 1.25;
	color: var(--nl-text);
	margin: 0;
}

/* Dwie kolumny rozdzielone linią */
.nl-model-kolumny {
	display: grid;
	grid-template-columns: 1fr 1fr;
}
@media (max-width: 860px) {
	.nl-model-kolumny { grid-template-columns: 1fr; }
}

.nl-model-kolumna {
	padding: clamp(26px, 3.5vw, 40px) clamp(22px, 3vw, 36px);
}
.nl-model-kolumna-prawa {
	border-left: 0.5px solid var(--nl-border);
	background: rgba(255, 255, 255, 0.012);
}
@media (max-width: 860px) {
	.nl-model-kolumna-prawa {
		border-left: none;
		border-top: 0.5px solid var(--nl-border-strong);
	}
}

.nl-model-strona {
	font-family: var(--nl-serif);
	font-size: 1.375rem;
	font-weight: 400;
	color: var(--nl-text);
	line-height: 1.2;
	margin: 0 0 26px;
	padding-bottom: 14px;
	border-bottom: 0.5px solid var(--nl-border);
}

.nl-model-blok { margin-bottom: 28px; }
.nl-model-blok:last-child { margin-bottom: 0; }

.nl-model-etykieta {
	display: block;
	font-family: var(--nl-sans);
	font-size: 10px;
	letter-spacing: 0.24em;
	text-transform: uppercase;
	color: var(--nl-gold);
	font-weight: 600;
	margin-bottom: 12px;
}

.nl-model-tresc {
	color: var(--nl-text-secondary);
	font-size: 0.9375rem;
	line-height: 1.75;
}
.nl-model-tresc p { margin: 0 0 12px; }
.nl-model-tresc p:last-child { margin-bottom: 0; }
.nl-model-tresc ul {
	list-style: none;
	margin: 0;
	padding: 0;
}
.nl-model-tresc ul li {
	position: relative;
	padding-left: 18px;
	margin-bottom: 9px;
}
.nl-model-tresc ul li::before {
	content: '';
	position: absolute;
	left: 0;
	top: 0.62em;
	width: 5px;
	height: 5px;
	border-radius: 50%;
	background: var(--nl-gold);
	opacity: 0.75;
}
/* Zagnieżdżone listy — w treści są podpunkty kosztów */
.nl-model-tresc ul ul {
	margin-top: 9px;
	padding-left: 4px;
}
.nl-model-tresc ul ul li::before {
	width: 4px;
	height: 4px;
	background: transparent;
	border: 1px solid var(--nl-gold);
	opacity: 0.6;
}
.nl-model-tresc strong { color: var(--nl-text); font-weight: 600; }
.nl-model-tresc li:last-child { margin-bottom: 0; }

/* ============================================
   ZESPÓŁ Z BIOGRAFIAMI
   ============================================ */

/* ---- Nagłówek podstrony ---- */
.nl-eksperci-page-header {
	max-width: 820px;
	margin: 0 auto clamp(40px, 5vw, 60px);
	text-align: center;
}
.nl-eksperci-page-header h1 {
	font-family: var(--nl-serif);
	font-size: clamp(2.25rem, 4.5vw, 3.25rem);
	font-weight: 300;
	line-height: 1.1;
	letter-spacing: -0.015em;
	color: var(--nl-text);
	margin: 0 0 24px;
}
.nl-eksperci-intro {
	color: var(--nl-text-secondary);
	font-size: 1.0625rem;
	line-height: 1.8;
	margin: 0;
}

/* ---- Układ master-detail ---- */
.nl-eksperci-master {
	display: grid;
	grid-template-columns: 1.35fr 2fr;
	gap: 28px;
	align-items: start;
	max-width: 1140px;
	margin: 0 auto;
}
@media (max-width: 900px) {
	.nl-eksperci-master { grid-template-columns: 1fr; gap: 18px; }
}

/* --- Lewa kolumna: lista osób --- */
.nl-eksperci-lista {
	display: flex;
	flex-direction: column;
	gap: 8px;
	min-width: 0;
}
@media (min-width: 901px) {
	.nl-eksperci-lista {
		position: sticky;
		top: 104px;
		max-height: calc(100vh - 130px);
		overflow-y: auto;
		padding-right: 4px;
	}
	.nl-eksperci-lista::-webkit-scrollbar { width: 6px; }
	.nl-eksperci-lista::-webkit-scrollbar-thumb { background: var(--nl-border-strong); border-radius: 3px; }
}
.nl-eksperci-item {
	display: flex;
	align-items: center;
	gap: 12px;
	width: 100%;
	min-width: 0;
	text-align: left;
	cursor: pointer;
	background: var(--nl-surface);
	border: 0.5px solid var(--nl-border);
	border-radius: 12px;
	padding: 11px 12px;
	color: var(--nl-text);
	font-family: var(--nl-sans);
	transition: border-color 0.25s, background 0.25s, transform 0.25s;
}
.nl-eksperci-item:hover { border-color: var(--nl-border-strong); transform: translateX(2px); }
.nl-eksperci-item.is-active { border-color: var(--nl-gold); background: var(--nl-surface-elevated); }
.nl-eksperci-item:focus-visible { outline: 2px solid var(--nl-gold); outline-offset: 2px; }
.nl-eksperci-item-foto {
	width: 44px;
	height: 44px;
	border-radius: 50%;
	overflow: hidden;
	flex: 0 0 44px;
	background: var(--nl-surface-elevated);
	border: 0.5px solid var(--nl-border-strong);
	display: flex;
	align-items: center;
	justify-content: center;
	filter: grayscale(25%);
	transition: filter 0.25s;
}
.nl-eksperci-item:hover .nl-eksperci-item-foto,
.nl-eksperci-item.is-active .nl-eksperci-item-foto { filter: grayscale(0%); }
.nl-eksperci-item-foto img { width: 100%; height: 100%; object-fit: cover; display: block; }
.nl-eksperci-foto-fallback { color: var(--nl-gold); font-family: var(--nl-serif); font-size: 1rem; letter-spacing: 0.03em; }
.nl-eksperci-item-meta { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.nl-eksperci-item-imie {
	font-family: var(--nl-serif);
	font-size: 1.0625rem;
	font-weight: 400;
	color: var(--nl-text);
	line-height: 1.28;
	transition: color 0.25s;
	overflow-wrap: break-word;
	word-break: break-word;
	hyphens: auto;
}
.nl-eksperci-item.is-active .nl-eksperci-item-imie { color: var(--nl-gold); }
.nl-eksperci-item-rola {
	font-family: var(--nl-sans);
	font-size: 10px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--nl-text-muted);
	font-weight: 600;
	line-height: 1.4;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.nl-eksperci-item-arrow {
	margin-left: auto;
	color: var(--nl-gold);
	opacity: 0;
	flex: 0 0 auto;
	display: flex;
	transform: translateX(-4px);
	transition: opacity 0.25s, transform 0.25s;
}
.nl-eksperci-item-arrow svg { width: 18px; height: 18px; }
.nl-eksperci-item:hover .nl-eksperci-item-arrow,
.nl-eksperci-item.is-active .nl-eksperci-item-arrow { opacity: 1; transform: none; }

/* --- Prawa kolumna: karta szczegółów --- */
.nl-eksperci-detal {
	background: var(--nl-surface);
	border: 0.5px solid var(--nl-border);
	border-radius: 20px;
	padding: clamp(28px, 3.4vw, 48px);
	min-height: 440px;
	min-width: 0;
}
.nl-eksperci-panel[hidden] { display: none; }
.nl-eksperci-panel { animation: nlEkspFade 0.4s ease; }
@keyframes nlEkspFade {
	from { opacity: 0; transform: translateY(8px); }
	to   { opacity: 1; transform: none; }
}
.nl-eksperci-panel-head {
	display: flex;
	align-items: center;
	gap: 24px;
	margin-bottom: 34px;
	padding-bottom: 30px;
	border-bottom: 0.5px solid var(--nl-border);
}
@media (max-width: 560px) {
	.nl-eksperci-panel-head { flex-direction: column; align-items: flex-start; gap: 18px; }
}
.nl-eksperci-portret {
	width: 116px;
	height: 116px;
	border-radius: 16px;
	overflow: hidden;
	flex: 0 0 116px;
	background: var(--nl-bg);
	border: 0.5px solid var(--nl-border-strong);
}
.nl-eksperci-portret img { width: 100%; height: 100%; object-fit: cover; display: block; }
.nl-eksperci-panel-tytul { min-width: 0; }
.nl-eksperci-panel-tytul .nl-eyebrow { margin-bottom: 10px; }
.nl-eksperci-panel-tytul h2 {
	font-family: var(--nl-serif);
	font-weight: 300;
	font-size: clamp(1.5rem, 3vw, 2.05rem);
	line-height: 1.1;
	letter-spacing: -0.015em;
	color: var(--nl-text);
	margin: 0;
	overflow-wrap: break-word;
	word-break: break-word;
	hyphens: auto;
}
.nl-eksperci-bio {
	color: var(--nl-text-secondary);
	font-size: 0.9625rem;
	line-height: 2.0;
	max-width: 64ch;
}
/* Odstępy akapitów/list na karcie autora (na życzenie — zakres tylko eksperci).
   Kwalifikacja body.nl-site bije globalny reset body.nl-site p{padding:0}. */
body.nl-site .nl-eksperci-detal p,
body.nl-site .nl-eksperci-detal ul {
	margin: 0;
	padding: 10px 0 10px 25px;
}
.nl-eksperci-bio-lead {
	font-size: 1.02rem;
	line-height: 1.9;
	color: var(--nl-text);
	border-left: 2px solid var(--nl-gold);
}
.nl-eksperci-bio strong { color: var(--nl-text); font-weight: 600; }
.nl-eksperci-bio a {
	color: var(--nl-gold);
	text-decoration: none;
	border-bottom: 0.5px solid rgba(245, 207, 6, 0.35);
	word-break: break-word;
}
.nl-eksperci-bio a:hover { border-bottom-color: var(--nl-gold); }
.nl-eksperci-bio-placeholder { color: var(--nl-text-muted); font-style: italic; }

@media (prefers-reduced-motion: reduce) {
	.nl-eksperci-panel { animation: none; }
	.nl-eksperci-item { transition: none; }
}

/* ============================================
   Animacja wejścia WYŁĄCZONA — treść ma być
   widoczna od razu, bez pojawiania się przy
   przewijaniu (na życzenie klienta).
   ============================================ */
[data-reveal],
[data-reveal] > * {
	opacity: 1 !important;
	transform: none !important;
}

/* ============================================================
   STRONA 404
   ============================================================ */
.nl-404-hero {
	padding: clamp(90px, 13vh, 170px) 0 clamp(44px, 6vw, 76px);
	text-align: center;
}
.nl-404-hero h1 {
	font-family: var(--nl-serif);
	font-weight: 300;
	font-size: clamp(2.2rem, 5vw, 3.6rem);
	line-height: 1.08;
	letter-spacing: -0.015em;
	color: var(--nl-text);
	margin: 18px 0 22px;
}
/* body.nl-site bije globalny reset body.nl-site p{margin:0} — inaczej lead
   traci margin:auto i ucieka w lewo (nie jest wyśrodkowany). */
body.nl-site .nl-404-lead {
	max-width: 620px;
	margin: 0 auto 34px;
	color: var(--nl-text-secondary);
	font-size: 1.0625rem;
	line-height: 1.8;
}
.nl-404-cta {
	display: flex;
	gap: 16px;
	justify-content: center;
	flex-wrap: wrap;
	margin-bottom: 36px;
}
.nl-404-search {
	display: flex;
	align-items: center;
	max-width: 460px;
	margin: 0 auto;
	background: var(--nl-surface);
	border: 0.5px solid var(--nl-border-strong);
	border-radius: 999px;
	overflow: hidden;
}
.nl-404-search input[type="search"] {
	flex: 1;
	min-width: 0;
	background: transparent;
	border: none;
	color: var(--nl-text);
	font-family: var(--nl-sans);
	font-size: 15px;
	padding: 15px 24px;
	outline: none;
}
.nl-404-search input[type="search"]::placeholder { color: var(--nl-text-muted); }
.nl-404-search button {
	flex: 0 0 auto;
	align-self: stretch;
	background: var(--nl-gold);
	color: #0F0D0A;
	border: none;
	padding: 0 22px;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: background 0.2s;
}
.nl-404-search button:hover { background: #FFDD2E; }
.nl-404-search button svg { width: 20px; height: 20px; }

.nl-woo.nl-404-produkty { padding-top: clamp(24px, 3vw, 44px); }
.nl-404-produkty .nl-woo-header h2 {
	font-family: var(--nl-serif);
	font-size: clamp(1.8rem, 3.2vw, 2.4rem);
	font-weight: 300;
	line-height: 1.1;
	letter-spacing: -0.015em;
	color: var(--nl-text);
	margin: 0;
}
@media (max-width: 600px) {
	.nl-404-cta { flex-direction: column; align-items: center; }
	.nl-404-cta .nl-btn { width: 100%; max-width: 320px; text-align: center; }
}

/* Strony prawne (.nl-tresc): globalny reset body.nl-site h2/h3/h4/p/ul (0,1,2)
   bił .nl-tresc (0,1,1) i zbijał marginesy nagłówków → sekcje sklejone.
   Przywracamy odstępy z wyższą specyficznością (.nl-woo). */
body.nl-site .nl-tresc h2 { margin: 52px 0 20px; }
body.nl-site .nl-tresc h3 { margin: 38px 0 14px; }
body.nl-site .nl-tresc h4 { margin: 30px 0 12px; }
body.nl-site .nl-tresc p { margin: 0 0 20px; }
body.nl-site .nl-tresc ul,
body.nl-site .nl-tresc ol { margin: 0 0 22px; padding-left: 26px; }
body.nl-site .nl-tresc > *:first-child { margin-top: 0; }
body.nl-site .nl-tresc-lead {
	color: var(--nl-gold);
	font-family: var(--nl-sans);
	font-size: 0.8rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	font-weight: 600;
	margin: 0 0 10px;
}

/* Śródtytuły na starych stronach prawnych z importu (regulamin, dostawa, zwroty
   itd.) — nie mają <h2>, tylko blok złożony wyłącznie z <strong>
   (<ul><li><strong>…</strong></li></ul> lub <p><strong>…</strong></p>).
   Traktujemy je jak nagłówki sekcji: serif, większe, z odstępem u góry. */
body.nl-site .nl-tresc ul:has(> li > strong:only-child) {
	list-style: none;
	padding-left: 0;
	margin: 46px 0 14px;
}
body.nl-site .nl-tresc ul:has(> li > strong:only-child) > li { margin: 0; }
/* :not(:where(td,th) *) — nie ruszamy pogrubień wewnątrz komórek tabeli. */
body.nl-site .nl-tresc p:has(> strong:only-child):not(:where(td, th) *) { margin: 42px 0 14px; }
body.nl-site .nl-tresc ul:has(> li > strong:only-child) > li > strong,
body.nl-site .nl-tresc p:has(> strong:only-child):not(:where(td, th) *) > strong {
	font-family: var(--nl-serif);
	font-weight: 400;
	font-size: 1.4rem;
	line-height: 1.3;
	color: var(--nl-text);
	display: inline-block;
}

/* Eksperci: tło pozycji listy pewne we wszystkich stanach (żadnego różu z
   domyślnych stylów przycisku / kitu Elementora). */
body.nl-site .nl-eksperci-item:hover,
body.nl-site .nl-eksperci-item:focus,
body.nl-site .nl-eksperci-item:active { background-color: var(--nl-surface); }
body.nl-site .nl-eksperci-item.is-active,
body.nl-site .nl-eksperci-item.is-active:hover,
body.nl-site .nl-eksperci-item.is-active:focus { background-color: var(--nl-surface-elevated); }

/* GOTCHA: globalny reset body.nl-site img{height:auto} (0,1,2) bił
   .nl-eksperci-portret img{height:100%} (0,1,1) → zdjęcia poziome nie
   wypełniały kadru i zostawiały czarny pas. Wymuszamy wypełnienie + kadr
   lekko od góry (żeby nie ucinać głów). */
body.nl-site .nl-eksperci-portret img,
body.nl-site .nl-eksperci-item-foto img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 50% 28%;
}

/* ============================================================
   DŹWIĘKI NATURY — pływający przełącznik tła
   ============================================================ */
.nl-audio {
	position: fixed;
	left: 20px;
	bottom: 20px;
	z-index: 65;
}
.nl-audio-btn {
	height: 46px;
	padding: 0 18px 0 15px;
	border-radius: 999px;
	background: rgba(23, 19, 16, 0.92);
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
	border: 0.5px solid var(--nl-border-strong);
	color: var(--nl-gold);
	cursor: pointer;
	display: flex;
	align-items: center;
	gap: 10px;
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
	transition: border-color 0.2s, transform 0.2s;
}
.nl-audio-label {
	font-family: var(--nl-sans);
	font-size: 12.5px;
	font-weight: 500;
	letter-spacing: 0.02em;
	color: var(--nl-text);
	white-space: nowrap;
}
.nl-audio-btn:hover {
	border-color: var(--nl-gold);
	background: rgba(245, 207, 6, 0.10);
	transform: translateY(-2px);
}
.nl-audio-btn:hover .nl-audio-label { color: var(--nl-gold); }
.nl-audio-btn:focus-visible { outline: 2px solid var(--nl-gold); outline-offset: 2px; }
.nl-audio-waves { display: flex; align-items: center; gap: 2.5px; height: 16px; }
.nl-audio-waves i { width: 2.5px; height: 5px; background: currentColor; border-radius: 2px; transition: height 0.2s; }
.nl-audio.is-playing .nl-audio-waves i { animation: nlWave 0.9s ease-in-out infinite; }
.nl-audio.is-playing .nl-audio-waves i:nth-child(2) { animation-delay: 0.15s; }
.nl-audio.is-playing .nl-audio-waves i:nth-child(3) { animation-delay: 0.30s; }
.nl-audio.is-playing .nl-audio-waves i:nth-child(4) { animation-delay: 0.45s; }
@keyframes nlWave { 0%, 100% { height: 5px; } 50% { height: 16px; } }
@media (max-width: 600px) { .nl-audio { left: 14px; bottom: 14px; } .nl-audio-btn { height: 42px; padding: 0 15px 0 13px; } .nl-audio-label { font-size: 12px; } }
@media (prefers-reduced-motion: reduce) { .nl-audio.is-playing .nl-audio-waves i { animation: none; } }

/* ============================================================
   GALERIA - statyczna siatka zdjec z lightboxem
   Bez animacji przesuwania: pod prefers-reduced-motion wyglada i dziala
   tak samo, wiec nie ma tu osobnej sciezki poza wylaczeniem hoveru.
   ============================================================ */
.nl-galeria-section { padding: clamp(56px, 7vw, 96px) 0; }
.nl-galeria-header { margin-bottom: clamp(30px, 4vw, 52px); }

/* Pas przewijany natywnie, przesuwany skokowo przez scrollBy().
   Bez duplikatow kafelkow, wiec nie ma szwu w polowie jak w marquee. */
.nl-galeria-karuzela { position: relative; }
.nl-galeria-karuzela:focus-visible {
	outline: 2px solid var(--nl-gold);
	outline-offset: 6px;
	border-radius: 8px;
}
.nl-galeria-pas {
	--nl-galeria-gap: 18px;
	display: flex;
	gap: var(--nl-galeria-gap);
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	/* Pasek przewijania ukryty - zostaje samo przewijanie: swipe palcem,
	   strzalki, klawiatura i autoplay dzialaja bez zmian. Chowamy tylko
	   element wizualny, nie mechanizm. */
	scrollbar-width: none;
	-ms-overflow-style: none;
	/* Przewijanie pasa nie przenosi się na stronę, gdy dojedzie do końca.
	   Bez tego poziomy gest na gładziku potrafi cofnąć przeglądarkę wstecz,
	   a pionowy — szarpnąć całą stroną. */
	overscroll-behavior-x: contain;
}
.nl-galeria-pas::-webkit-scrollbar { width: 0; height: 0; display: none; }
/* Szerokosc kafelka liczona tak, zeby przy danej liczbie kolumn przerwy sie
   zgadzaly: (100% - (n-1) przerw) / n. */
.nl-galeria-item {
	flex: 0 0 auto;
	scroll-snap-align: start;
	width: calc((100% - var(--nl-galeria-gap)) / 2);
}
@media (min-width: 901px) {
	.nl-galeria-pas[data-kolumny="2"] > .nl-galeria-item { width: calc((100% - var(--nl-galeria-gap)) / 2); }
	.nl-galeria-pas[data-kolumny="3"] > .nl-galeria-item { width: calc((100% - 2 * var(--nl-galeria-gap)) / 3); }
	.nl-galeria-pas[data-kolumny="4"] > .nl-galeria-item { width: calc((100% - 3 * var(--nl-galeria-gap)) / 4); }
}
@media (max-width: 600px) {
	.nl-galeria-item { width: 78%; }
}

/* Sterowanie: strzalki + przycisk pauzy (ten dokłada JS). */
.nl-galeria-sterowanie {
	display: flex;
	gap: 10px;
	align-items: center;
	justify-content: flex-end;
	margin-top: 18px;
}
.nl-galeria-strzalka,
.nl-galeria-pauza {
	width: 40px;
	height: 40px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: transparent;
	color: var(--nl-text-muted);
	border: 0.5px solid var(--nl-border);
	border-radius: 999px;
	font-size: 20px;
	line-height: 1;
	cursor: pointer;
	transition: color 0.2s, border-color 0.2s;
}
.nl-galeria-strzalka:hover,
.nl-galeria-pauza:hover {
	color: var(--nl-gold);
	border-color: var(--nl-gold);
	background: rgba(245, 207, 6, 0.08);
}
.nl-galeria-strzalka:focus-visible,
.nl-galeria-pauza:focus-visible {
	outline: 2px solid var(--nl-gold);
	outline-offset: 3px;
}
.nl-galeria-pauza { font-size: 13px; }

body.nl-site .nl-galeria-item { margin: 0; }
.nl-galeria-link {
	display: block;
	aspect-ratio: 3 / 2;
	overflow: hidden;
	border-radius: 6px;
	border: 0.5px solid var(--nl-border);
	background: var(--nl-surface);
	transition: border-color 0.5s ease;
}
body.nl-site .nl-galeria-item img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 0.5s ease;
}
.nl-galeria-link:hover { border-color: var(--nl-border-strong); }
.nl-galeria-link:hover img { transform: scale(1.04); }
.nl-galeria-link:focus-visible {
	outline: 2px solid var(--nl-gold);
	outline-offset: 3px;
}

body.nl-site .nl-galeria-item figcaption {
	margin-top: 10px;
	font-family: var(--nl-sans);
	font-size: 11px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--nl-text-muted);
	transition: color 0.5s ease;
}
.nl-galeria-item:hover figcaption { color: var(--nl-text); }

body.nl-site .nl-galeria-kredyt {
	margin: 18px 0 0;
	text-align: right;
	font-family: var(--nl-sans);
	font-size: 10.5px;
	letter-spacing: 0.06em;
	color: var(--nl-text-muted);
}

/* Lightbox - jedno <dialog> na galerie, dokladane przez JS. */
.nl-lightbox {
	border: 0;
	padding: 0;
	background: transparent;
	max-width: 100vw;
	max-height: 100vh;
	width: 100%;
	height: 100%;
}
.nl-lightbox::backdrop { background: rgba(13, 11, 8, 0.92); }
.nl-lightbox-ramka {
	position: relative;
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	gap: 14px;
	padding: clamp(16px, 4vw, 48px);
	box-sizing: border-box;
}
.nl-lightbox img {
	max-width: 100%;
	max-height: 78vh;
	width: auto;
	height: auto;
	display: block;
	border-radius: 6px;
}
.nl-lightbox-podpis {
	font-family: var(--nl-sans);
	font-size: 12px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--nl-text-secondary);
	margin: 0;
}
.nl-lightbox-btn {
	position: absolute;
	top: 16px;
	right: 16px;
	width: 42px;
	height: 42px;
	border-radius: 50%;
	border: 1px solid var(--nl-border-strong);
	background: rgba(23, 19, 16, 0.9);
	color: var(--nl-text-secondary);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
}
.nl-lightbox-btn:hover { color: var(--nl-gold); border-color: var(--nl-gold); }
.nl-lightbox-btn:focus-visible { outline: 2px solid var(--nl-gold); outline-offset: 3px; }
.nl-lightbox-btn svg { width: 20px; height: 20px; }

@media (prefers-reduced-motion: reduce) {
	body.nl-site .nl-galeria-item img,
	.nl-galeria-link { transition: none; }
	.nl-galeria-link:hover img { transform: none; }
}

/* ============================================================
   WIDEO W TLE — pełnoszeroki pas
   ============================================================ */
.nl-wideo-section {
	position: relative;
	width: 100%;
	height: var(--nl-wideo-h, 56vh);
	min-height: 300px;
	max-height: 720px;
	overflow: hidden;
	background: var(--nl-surface);
}
.nl-wideo-media {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.nl-wideo-overlay {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: flex-end;
	background: linear-gradient(to top, rgba(13, 11, 8, 0.88) 0%, rgba(13, 11, 8, 0.55) 32%, rgba(13, 11, 8, 0.42) 62%, rgba(13, 11, 8, 0.55) 100%);
}
.nl-wideo-tresc .nl-eyebrow,
.nl-wideo-tresc h2 { text-shadow: 0 2px 18px rgba(0, 0, 0, 0.6); }
.nl-wideo-tresc { padding-bottom: clamp(30px, 5vw, 60px); }
.nl-wideo-tresc h2 {
	font-family: var(--nl-serif);
	font-weight: 300;
	font-size: clamp(2rem, 4vw, 3rem);
	color: var(--nl-text);
	line-height: 1.1;
	letter-spacing: -0.015em;
	margin: 8px 0 0;
}

/* ============================================================
   WSPÓŁPRACA (podstrona) — baner nagłówka ze zdjęciem
   ============================================================ */
.nl-modele-ma-banner { padding-top: 0; }
.nl-modele-banner {
	position: relative;
	width: 100%;
	min-height: clamp(320px, 46vh, 500px);
	display: flex;
	align-items: center;
	overflow: hidden;
	margin-bottom: clamp(44px, 5.5vw, 76px);
}
body.nl-site .nl-modele-banner-bg {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.nl-modele-banner-veil { position: absolute; inset: 0; }
.nl-modele-banner-veil.nl-veil-lekka   { background: linear-gradient(to top, rgba(13,11,8,.70), rgba(13,11,8,.22)); }
.nl-modele-banner-veil.nl-veil-srednia { background: linear-gradient(to top, rgba(13,11,8,.90), rgba(13,11,8,.60)); }
.nl-modele-banner-veil.nl-veil-mocna   { background: linear-gradient(to top, rgba(13,11,8,.92), rgba(13,11,8,.62)); }
.nl-modele-banner-tresc {
	position: relative;
	text-align: center;
	padding-top: clamp(44px, 6vw, 84px);
	padding-bottom: clamp(44px, 6vw, 84px);
}
.nl-modele-banner-tresc h1 {
	font-family: var(--nl-serif);
	font-weight: 300;
	font-size: clamp(2.25rem, 4.5vw, 3.25rem);
	color: var(--nl-text);
	line-height: 1.1;
	letter-spacing: -0.015em;
	margin: 18px 0 0;
	text-shadow: 0 2px 24px rgba(0, 0, 0, 0.55);
}
body.nl-site .nl-modele-banner-tresc .nl-modele-lead {
	max-width: 680px;
	margin: 20px auto 0;
	color: var(--nl-text);
	font-size: 1.0625rem;
	line-height: 1.8;
	text-shadow: 0 1px 14px rgba(0, 0, 0, 0.55);
}