/* ==========================================================================
   Modern Wood — arkusz główny
   1. Tokeny  2. Reset  3. Typografia  4. Layout  5. Komponenty  6. Sekcje
   ========================================================================== */

/* 1. Tokeny ------------------------------------------------------------- */

:root {
	/* Paleta przeniesiona 1:1 z kitu Elementora */
	--mw-espresso: #2b1f1a;
	--mw-bark: #4a3526;
	--mw-clay: #8b7a6a;
	--mw-moss: #8d8770;
	--mw-stone: #5a5350;
	--mw-sand: #ebe6dc;
	--mw-sand-dark: #d8d0c4;
	--mw-cream: #f2f0eb;
	--mw-paper: #fafafa;

	/* Akcent jest brązem, nie żółcią — ale jeden odcień nie zdaje egzaminu na obu
	   tonacjach, więc rozbijamy go na dwa: jasny brąz świeci na espresso (8,7:1),
	   ciemny orzech trzyma AA na bieli i kremie (4,7:1). */
	--mw-accent: #d3bda0;
	--mw-accent-deep: #8c6f4e;
	/* `accent-deep` trzyma AA dopiero na czystej bieli. Etykiety 13 px leżą na kremie
	   i piaskowym tincie, gdzie schodzi do 3,8:1 — dla nich osobny, ciemniejszy orzech. */
	--mw-accent-ink: #7a5f42;
	--mw-accent-tint: rgb(211 189 160 / 16%);
	--mw-white: #fff;

	--mw-text: var(--mw-espresso);
	--mw-text-soft: var(--mw-stone);
	--mw-bg: var(--mw-white);
	--mw-line: rgb(43 31 26 / 12%);
	/* Obrys fokusu musi kontrastować z podłożem, więc jest tokenem przestawianym
	   w ciemnych sekcjach, a nie stałym kolorem marki. */
	--mw-focus: var(--mw-espresso);

	/* Typografia — płynna skala, bez skoków między breakpointami */
	--mw-font: "Figtree", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
	--mw-fs-xs: 0.8125rem;
	--mw-fs-sm: 0.9375rem;
	--mw-fs-base: clamp(1rem, 0.97rem + 0.15vw, 1.0625rem);
	--mw-fs-lead: clamp(1.0625rem, 1rem + 0.3vw, 1.25rem);
	--mw-fs-lg: clamp(1.0625rem, 1rem + 0.25vw, 1.1875rem);
	--mw-fs-h5: clamp(1.0625rem, 1.02rem + 0.22vw, 1.1875rem);
	--mw-fs-h4: clamp(1.125rem, 1.05rem + 0.35vw, 1.375rem);
	--mw-fs-h3: clamp(1.375rem, 1.25rem + 0.6vw, 1.75rem);
	--mw-fs-h2: clamp(1.75rem, 1.4rem + 1.6vw, 2.875rem);
	--mw-fs-h1: clamp(2.25rem, 1.6rem + 3.1vw, 4.5rem);
	--mw-fs-stat: clamp(2.5rem, 1.8rem + 3.4vw, 4.5rem);

	--mw-lh-tight: 1.1;
	--mw-lh-head: 1.18;
	--mw-lh-body: 1.7;

	/* Odstępy */
	--mw-sp-1: 0.25rem;
	--mw-sp-2: 0.5rem;
	--mw-sp-3: 0.75rem;
	--mw-sp-4: 1rem;
	--mw-sp-5: 1.5rem;
	--mw-sp-6: 2rem;
	--mw-sp-7: 3rem;
	--mw-sp-8: 4rem;
	--mw-sp-9: 6rem;
	--mw-section-y: clamp(3.5rem, 2rem + 6vw, 7.5rem);

	/* Kontenery */
	--mw-w: 1240px;
	--mw-w-wide: 1440px;
	--mw-w-narrow: 780px;
	--mw-gutter: clamp(1.25rem, 0.7rem + 2.2vw, 2.5rem);

	/* Promienie i cienie */
	--mw-r-sm: 6px;
	--mw-r: 14px;
	--mw-r-md: 16px;
	--mw-r-lg: 22px;
	--mw-r-pill: 999px;
	--mw-shadow-sm: 0 1px 2px rgb(43 31 26 / 6%), 0 4px 12px rgb(43 31 26 / 5%);
	--mw-shadow: 0 2px 6px rgb(43 31 26 / 6%), 0 18px 40px -18px rgb(43 31 26 / 22%);
	--mw-shadow-lg: 0 4px 12px rgb(43 31 26 / 8%), 0 40px 80px -30px rgb(43 31 26 / 35%);

	/* Cień brązowy gubi się pod ciemnym panelem nagłówka — tam potrzebna jest czerń. */
	--mw-shadow-dark: 0 2px 8px rgb(0 0 0 / 30%), 0 30px 70px -25px rgb(0 0 0 / 75%);

	--mw-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
	--mw-dur: 0.28s;
	--mw-header-h: 76px;
}

/* 2. Reset -------------------------------------------------------------- */

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

html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
	scroll-padding-top: calc(var(--mw-header-h) + 1rem);

	/* Zamknięta szuflada stoi za prawą krawędzią (`translateX(100%)`) i rozciągała
	   obszar przewijania — przeglądarka mobilna pomniejszała wtedy całą stronę.
	   `clip` przycina bez tworzenia kontenera przewijania, więc `sticky` w headerze
	   dalej działa (czego `overflow-x: hidden` by nie zrobiło). */
	overflow-x: clip;
}

body {
	margin: 0;
	background: var(--mw-bg);
	color: var(--mw-text);
	font-family: var(--mw-font);
	font-size: var(--mw-fs-base);
	line-height: var(--mw-lh-body);
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
	overflow-wrap: break-word;
}

body.is-locked { overflow: hidden; }

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

img,
video { height: auto; }

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

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

a {
	color: inherit;
	text-decoration-color: rgb(43 31 26 / 35%);
	text-underline-offset: 3px;
}

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

button { cursor: pointer; }

:focus-visible {
	outline: 3px solid var(--mw-focus);
	outline-offset: 3px;
	border-radius: 2px;
}

::selection {
	background: var(--mw-accent);
	color: var(--mw-espresso);
}

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }

	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
	}

	/* Reguła powyżej zamienia zerowy czas na 0.01 ms, przez co `visibility` szuflady
	   przełącza się dopiero w kolejnej klatce i `focus()` po otwarciu nie ma na czym
	   usiąść. Panel musi więc pojawiać się naprawdę natychmiast. */
	.mw-nav__panel,
	.mw-nav__panel * { transition-duration: 0s !important; }
}

/* 3. Typografia --------------------------------------------------------- */

h1, h2, h3, h4 {
	font-weight: 700;
	line-height: var(--mw-lh-head);
	letter-spacing: -0.02em;
	text-wrap: balance;
}

h1 { font-size: var(--mw-fs-h1); line-height: var(--mw-lh-tight); letter-spacing: -0.03em; }
h2 { font-size: var(--mw-fs-h2); }
h3 { font-size: var(--mw-fs-h3); }
h4 { font-size: var(--mw-fs-h4); letter-spacing: -0.01em; }

p { text-wrap: pretty; }

.mw-eyebrow {
	margin-bottom: var(--mw-sp-3);
	/* Ciemniejsza glinka: `--mw-clay` daje 3.3:1 na piasku, poniżej progu AA.
	   Ten odcień trzyma min. 4.9:1 na wszystkich jasnych tonacjach sekcji. */
	color: #6f5f4f;
	font-size: var(--mw-fs-sm);
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	line-height: 1.4;
}

.mw-lead {
	font-size: var(--mw-fs-lead);
	color: var(--mw-text-soft);
}

.mw-prose > * + * { margin-top: 1em; }
.mw-prose h2 { margin-top: 1.8em; }
.mw-prose h3 { margin-top: 1.6em; }
.mw-prose ul { list-style: none; }

.mw-prose ul li {
	position: relative;
	padding-left: 1.6em;
}

.mw-prose ul li + li { margin-top: 0.5em; }

.mw-prose ul li::before {
	content: "";
	position: absolute;
	left: 0.15em;
	top: 0.62em;
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--mw-accent-deep);
}

.mw-prose ol { list-style: decimal; padding-left: 1.4em; }
.mw-prose ol li + li { margin-top: 0.5em; }
.mw-prose a { text-decoration: underline; }
.mw-prose img { border-radius: var(--mw-r); }

.mw-prose strong { font-weight: 700; }

/* `display: block` robi ze stołu kontener przewijalny — bez tego szerokie tabele
   w treści (np. rejestr cookies) rozpychają całą stronę na telefonie. */
.mw-prose table {
	display: block;
	overflow-x: auto;
	width: 100%;
	border-collapse: collapse;
	font-size: var(--mw-fs-sm);
}

.mw-prose table th,
.mw-prose table td {
	padding: 0.7em 0.9em;
	text-align: left;
	vertical-align: top;
	border-bottom: 1px solid var(--mw-sand-dark);
}

.mw-prose table th { font-weight: 700; }
.mw-prose table tr:last-child td { border-bottom: 0; }

.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

.mw-skip {
	position: absolute;
	top: -100px;
	left: var(--mw-sp-4);
	z-index: 999;
	padding: var(--mw-sp-3) var(--mw-sp-5);

	/* Wyskakuje na ciemny pasek, więc pigułka musi być jasna — espresso na espresso
	   byłoby niewidoczne. */
	background: var(--mw-white);
	color: var(--mw-espresso);
	box-shadow: var(--mw-shadow-dark);
	border-radius: var(--mw-r-sm);
	font-weight: 700;
	text-decoration: none;
	transition: top var(--mw-dur) var(--mw-ease);
}

.mw-skip:focus { top: var(--mw-sp-4); }

/* 4. Layout ------------------------------------------------------------- */

.mw-container {
	width: 100%;
	max-width: var(--mw-w);
	margin-inline: auto;
	padding-inline: var(--mw-gutter);
}

.mw-container--wide { max-width: var(--mw-w-wide); }
.mw-container--narrow { max-width: var(--mw-w-narrow); }
.mw-container--full { max-width: none; padding-inline: 0; }

.mw-section {
	position: relative;
	padding-block: var(--mw-section-y);
}

.mw-section--sp-tight { padding-block: calc(var(--mw-section-y) * 0.6); }
.mw-section--sp-loose { padding-block: calc(var(--mw-section-y) * 1.25); }
.mw-section--sp-none { padding-block: 0; }

.mw-section--light { background: var(--mw-white); }
.mw-section--paper { background: var(--mw-paper); }
.mw-section--cream { background: var(--mw-cream); }
.mw-section--sand { background: var(--mw-sand); }

.mw-section--dark {
	background: var(--mw-espresso);
	color: var(--mw-cream);
	--mw-text: var(--mw-cream);
	--mw-text-soft: rgb(242 240 235 / 72%);
	--mw-line: rgb(242 240 235 / 16%);
	--mw-focus: var(--mw-white);
}

.mw-section--dark .mw-eyebrow { color: var(--mw-accent); }

.mw-head {
	max-width: 62ch;
	margin-bottom: clamp(2rem, 1.2rem + 2.4vw, 3.5rem);
}

.mw-head--center { margin-inline: auto; text-align: center; }
.mw-head--start { margin-inline: 0; }

.mw-head__title { margin-bottom: var(--mw-sp-4); }
.mw-head__title:last-child { margin-bottom: 0; }

.mw-head__lead {
	font-size: var(--mw-fs-lead);
	color: var(--mw-text-soft);
}

/* Kolumny są stałe, nie auto-fit — inaczej pojedyncza karta rozciąga się na całą szerokość. */
.mw-grid { display: grid; gap: clamp(1.25rem, 0.9rem + 1.5vw, 2rem); grid-template-columns: 1fr; }

@media (min-width: 600px) {
	.mw-grid--2,
	.mw-grid--3,
	.mw-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 900px) {
	.mw-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.mw-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* 5. Komponenty --------------------------------------------------------- */

/* Przycisk */
.mw-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--mw-sp-2);
	padding: 0.95em 2em;
	border: 1px solid transparent;
	border-radius: var(--mw-r-pill);
	font-size: var(--mw-fs-sm);
	font-weight: 700;
	letter-spacing: 0.02em;
	line-height: 1.2;
	text-align: center;
	text-decoration: none;
	transition: background var(--mw-dur) var(--mw-ease), color var(--mw-dur) var(--mw-ease),
		border-color var(--mw-dur) var(--mw-ease), transform var(--mw-dur) var(--mw-ease),
		box-shadow var(--mw-dur) var(--mw-ease);
}

.mw-btn:hover { transform: translateY(-2px); }
.mw-btn:active { transform: translateY(0); }

.mw-btn--primary {
	background: var(--mw-espresso);
	color: var(--mw-cream);
	box-shadow: var(--mw-shadow-sm);
}

.mw-btn--primary:hover {
	background: var(--mw-bark);
	box-shadow: var(--mw-shadow);
}

/* Wariant akcentowy występuje wyłącznie na espresso albo na zdjęciu hero,
   więc biała pigułka daje najmocniejszy kontrast i najczystszy wygląd. */
.mw-btn--accent {
	background: var(--mw-white);
	color: var(--mw-espresso);
	box-shadow: var(--mw-shadow-sm);
}

.mw-btn--accent:hover { background: var(--mw-cream); box-shadow: var(--mw-shadow); }

/* Obrys z `currentcolor`, nie z `--mw-line`: ten sam przycisk stoi raz na kremie,
   raz na ciemnym zdjęciu hero, a linia podziału jest za słaba na tło fotograficzne. */
.mw-btn--ghost {
	background: transparent;
	color: currentcolor;
	border-color: color-mix(in srgb, currentcolor 40%, transparent);
}

.mw-btn--ghost:hover {
	border-color: currentcolor;
	background: rgb(43 31 26 / 4%);
}

.mw-section--dark .mw-btn--ghost:hover { background: rgb(242 240 235 / 10%); }

.mw-btn--light {
	background: var(--mw-white);
	color: var(--mw-espresso);
}

.mw-btn--link {
	padding: 0;
	border-radius: 0;
	background: none;
	color: currentcolor;
	text-decoration: underline;
	text-decoration-color: var(--mw-accent-deep);
	text-decoration-thickness: 2px;
}

.mw-btn--link:hover { transform: none; text-decoration-color: currentcolor; }

.mw-btn--lg { padding: 1.1em 2.4em; font-size: var(--mw-fs-base); }
.mw-btn--block { width: 100%; }

.mw-actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--mw-sp-3);
}

.mw-head--center + .mw-actions,
.mw-actions--center { justify-content: center; }

/* Okruszki */
.mw-crumbs {
	font-size: var(--mw-fs-sm);
	color: var(--mw-text-soft);
}

.mw-crumbs ol {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--mw-sp-2);
}

.mw-crumbs li { display: flex; align-items: center; gap: var(--mw-sp-2); }

.mw-crumbs li + li::before {
	content: "";
	width: 5px;
	height: 5px;
	border-radius: 50%;
	background: currentcolor;
	opacity: 0.4;
}

.mw-crumbs a { text-decoration: none; }
.mw-crumbs a:hover { text-decoration: underline; }
.mw-crumbs [aria-current] { color: var(--mw-text); font-weight: 600; }

/* Karta modelu */
.mw-card {
	display: flex;
	flex-direction: column;
	overflow: hidden;
	background: var(--mw-white);
	border: 1px solid var(--mw-line);
	border-radius: var(--mw-r-lg);
	box-shadow: var(--mw-shadow-sm);
	transition: transform var(--mw-dur) var(--mw-ease), box-shadow var(--mw-dur) var(--mw-ease);
}

.mw-card:hover,
.mw-card:focus-within {
	transform: translateY(-4px);
	box-shadow: var(--mw-shadow);
}

.mw-card__media {
	position: relative;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	background: var(--mw-sand);
}

.mw-card__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.5s var(--mw-ease);
}

.mw-card:hover .mw-card__media img { transform: scale(1.04); }

.mw-card__tag {
	position: absolute;
	top: var(--mw-sp-3);
	left: var(--mw-sp-3);
	padding: 0.35em 0.9em;
	background: rgb(255 255 255 / 92%);
	backdrop-filter: blur(6px);
	border-radius: var(--mw-r-pill);
	font-size: var(--mw-fs-xs);
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--mw-bark);
}

.mw-card__body {
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: var(--mw-sp-3);
	padding: var(--mw-sp-5);
}

.mw-card__title { font-size: var(--mw-fs-h4); }

.mw-card__title a {
	text-decoration: none;
	background-image: linear-gradient(currentcolor, currentcolor);
	background-size: 0 1.5px;
	background-position: 0 100%;
	background-repeat: no-repeat;
	transition: background-size var(--mw-dur) var(--mw-ease);
}

.mw-card__title a::after {
	content: "";
	position: absolute;
	inset: 0;
}

.mw-card__title a:hover { background-size: 100% 1.5px; }

.mw-card { position: relative; }

.mw-card__excerpt {
	color: var(--mw-text-soft);
	font-size: var(--mw-fs-sm);
	display: -webkit-box;
	-webkit-line-clamp: 4;
	-webkit-box-orient: vertical;
	line-clamp: 4;
	overflow: hidden;
}

.mw-card__specs {
	display: flex;
	flex-wrap: wrap;
	gap: var(--mw-sp-2) var(--mw-sp-4);
	font-size: var(--mw-fs-xs);
	color: var(--mw-text-soft);
}

.mw-card__spec {
	display: inline-flex;
	align-items: center;
	gap: 0.4em;
}

.mw-card__spec svg { flex: none; opacity: 0.6; }

.mw-card__foot {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--mw-sp-3);
	margin-top: auto;
	padding-top: var(--mw-sp-4);
	border-top: 1px solid var(--mw-line);
}

.mw-card__price { font-weight: 700; font-size: var(--mw-fs-sm); }

.mw-card__more {
	position: relative;
	z-index: 1;
	display: inline-flex;
	align-items: center;
	gap: 0.45em;
	font-size: var(--mw-fs-sm);
	font-weight: 700;
	text-decoration: none;
	color: var(--mw-bark);
}

.mw-card__more svg { transition: transform var(--mw-dur) var(--mw-ease); }
.mw-card:hover .mw-card__more svg { transform: translateX(4px); }

/* 6. Nagłówek strony ---------------------------------------------------- */

/* Pasek jest ciemną taflą — te same tokeny co w `.mw-section--dark`, dzięki czemu
   linki, obrysy i panele rozwijane same przechodzą na tonację nocną i nie trzeba
   przepisywać każdej reguły z osobna. */
.mw-header {
	position: sticky;
	top: 0;
	z-index: 100;

	--mw-text: var(--mw-cream);
	--mw-text-soft: rgb(242 240 235 / 70%);
	--mw-line: rgb(242 240 235 / 18%);
	--mw-focus: var(--mw-white);

	color: var(--mw-cream);

	/* 88%, nie 70%: przy większej przezroczystości pasek nad jasną sekcją bieleje
	   do szarego brązu i wygląda na pomyłkę. Tu prześwit przewijanego zdjęcia dalej
	   widać, a nad kremem pasek zostaje czarną taflą. */
	background: rgb(24 17 13 / 88%);
	backdrop-filter: saturate(140%) blur(18px);
	border-bottom: 1px solid rgb(242 240 235 / 10%);
	transition: border-color var(--mw-dur) var(--mw-ease), background var(--mw-dur) var(--mw-ease),
		box-shadow var(--mw-dur) var(--mw-ease);
}

.mw-header.is-stuck {
	background: rgb(20 14 11 / 96%);
	border-bottom-color: rgb(242 240 235 / 14%);
	box-shadow: 0 10px 34px -20px rgb(0 0 0 / 70%);
}

.mw-header__inner {
	display: flex;
	align-items: center;
	gap: var(--mw-sp-5);
	min-height: var(--mw-header-h);
	transition: min-height var(--mw-dur) var(--mw-ease);
}

/* Po przewinięciu pasek się zwęża — na laptopie odzyskuje to ok. 16 px treści,
   a ruch jest na tyle mały, że nie czyta się jako przeskok. */
.mw-header.is-stuck .mw-header__inner { min-height: 62px; }
.mw-header.is-stuck .mw-brand img { height: clamp(34px, 2.7vw, 42px); }

.mw-brand {
	display: inline-flex;
	align-items: center;
	gap: var(--mw-sp-3);
	margin-right: auto;
	font-weight: 800;
	letter-spacing: -0.02em;
	text-decoration: none;
	font-size: 1.0625rem;
}

.mw-brand img {
	height: clamp(40px, 3.4vw, 54px);
	width: auto;
	transition: height var(--mw-dur) var(--mw-ease);
}

.mw-brand__mark {
	display: grid;
	place-items: center;
	width: 38px;
	height: 38px;
	border-radius: 11px;
	background: var(--mw-accent);
	color: var(--mw-espresso);
	font-size: 0.9rem;
	font-weight: 800;
	letter-spacing: 0;
}

.mw-nav__list {
	display: flex;
	align-items: center;
	gap: var(--mw-sp-2);
}

.mw-nav__item { position: relative; display: flex; align-items: center; }

.mw-nav__link {
	display: inline-block;
	padding: 0.6rem 0.85rem;
	border-radius: var(--mw-r-sm);
	font-size: var(--mw-fs-sm);
	font-weight: 600;
	text-decoration: none;
	color: var(--mw-text);
	transition: color var(--mw-dur) var(--mw-ease), background var(--mw-dur) var(--mw-ease);
}

.mw-nav__link:hover { color: var(--mw-white); background: rgb(242 240 235 / 10%); }

.mw-nav__item.is-current > .mw-nav__link { color: var(--mw-white); }

.mw-nav__item.is-current > .mw-nav__link::after {
	content: "";
	display: block;
	height: 2px;
	margin-top: 3px;
	border-radius: 2px;
	background: var(--mw-accent);
}

.mw-nav__toggle {
	display: grid;
	place-items: center;
	width: 26px;
	height: 26px;
	margin-left: -4px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: none;
	color: var(--mw-text-soft);
}

.mw-nav__toggle svg { transition: transform var(--mw-dur) var(--mw-ease); }
.mw-nav__toggle[aria-expanded="true"] svg { transform: rotate(180deg); }

/* Zwykłe podmenu ------------------------------------------------------- */

.mw-nav__sub {
	position: absolute;
	top: calc(100% + 10px);
	left: 0;
	z-index: 10;
	min-width: 240px;
	padding: var(--mw-sp-2);
	background: rgb(30 22 18 / 96%);
	backdrop-filter: saturate(140%) blur(20px);
	border: 1px solid var(--mw-line);
	border-radius: var(--mw-r);
	box-shadow: var(--mw-shadow-dark);
	opacity: 0;
	visibility: hidden;
	transform: translateY(-6px);
	transition: opacity var(--mw-dur) var(--mw-ease), transform var(--mw-dur) var(--mw-ease),
		visibility var(--mw-dur);
}

.mw-nav__item--has-sub:hover > .mw-nav__sub,
.mw-nav__item--has-sub:focus-within > .mw-nav__sub,
.mw-nav__toggle[aria-expanded="true"] + .mw-nav__sub {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

.mw-nav__sub .mw-nav__link { display: block; padding: 0.6rem 0.8rem; }

/* Mega menu ------------------------------------------------------------ */

.mw-nav__mega {
	position: absolute;
	top: calc(100% + 14px);
	left: 50%;
	z-index: 10;
	width: min(46rem, calc(100vw - 2 * var(--mw-gutter)));
	padding: var(--mw-sp-4);
	background: rgb(30 22 18 / 96%);
	backdrop-filter: saturate(140%) blur(20px);
	border: 1px solid var(--mw-line);
	border-radius: var(--mw-r-lg);
	box-shadow: var(--mw-shadow-dark);
	opacity: 0;
	visibility: hidden;
	transform: translate(-50%, -8px);
	transition: opacity var(--mw-dur) var(--mw-ease), transform var(--mw-dur) var(--mw-ease),
		visibility var(--mw-dur);
}

.mw-nav__item--mega:hover > .mw-nav__mega,
.mw-nav__item--mega:focus-within > .mw-nav__mega,
.mw-nav__toggle[aria-expanded="true"] + .mw-nav__mega {
	opacity: 1;
	visibility: visible;
	transform: translate(-50%, 0);
}

/* Bufor między pozycją menu a panelem — bez niego kursor gubi hover w szczelinie. */
.mw-nav__mega::before {
	content: "";
	position: absolute;
	inset: -14px 0 100%;
}

.mw-nav__cards {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--mw-sp-3);
	margin: 0;
	padding: 0;
	list-style: none;
}

.mw-megacard {
	display: grid;
	gap: var(--mw-sp-3);
	height: 100%;
	padding: var(--mw-sp-3);
	border: 1px solid transparent;
	border-radius: var(--mw-r);
	text-decoration: none;
	color: inherit;
	transition: background var(--mw-dur) var(--mw-ease), border-color var(--mw-dur) var(--mw-ease),
		transform var(--mw-dur) var(--mw-ease);
}

.mw-megacard:hover {
	background: rgb(242 240 235 / 8%);
	border-color: var(--mw-line);
	transform: translateY(-2px);
}

.mw-megacard__media {
	display: block;
	overflow: hidden;
	border-radius: var(--mw-r-sm);
	aspect-ratio: 4 / 3;
	background: rgb(242 240 235 / 10%);
}

.mw-megacard__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.5s var(--mw-ease);
}

.mw-megacard:hover .mw-megacard__media img { transform: scale(1.05); }

.mw-megacard__body { display: grid; gap: 2px; }

.mw-megacard__title { font-weight: 700; font-size: var(--mw-fs-sm); }

.mw-megacard__note {
	font-size: var(--mw-fs-xs);
	color: var(--mw-text-soft);
}

.mw-megacard__arrow { display: none; }

.mw-nav__mega-foot {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--mw-sp-3);
	margin-top: var(--mw-sp-4);
	padding-top: var(--mw-sp-4);
	border-top: 1px solid var(--mw-line);
}

.mw-nav__mega-link {
	display: inline-flex;
	align-items: center;
	gap: var(--mw-sp-2);
	font-size: var(--mw-fs-sm);
	font-weight: 700;
	text-decoration: none;
	color: var(--mw-accent);
}

.mw-nav__mega-link svg { transition: transform var(--mw-dur) var(--mw-ease); }
.mw-nav__mega-link:hover svg { transform: translateX(3px); }

.mw-nav__mega-link--soft {
	font-weight: 500;
	color: var(--mw-text-soft);
	text-decoration: underline;
	text-underline-offset: 3px;
	text-decoration-color: var(--mw-line);
}

.mw-nav__mega-link--soft:hover { color: var(--mw-white); }

/* Akcje w pasku -------------------------------------------------------- */

.mw-header__actions {
	display: inline-flex;
	align-items: center;
	gap: var(--mw-sp-2);
}

.mw-header__phone {
	display: none;
	align-items: center;
	gap: var(--mw-sp-2);
	padding: 0.5rem 0.7rem;
	border-radius: var(--mw-r-sm);
	font-size: var(--mw-fs-sm);
	font-weight: 700;
	text-decoration: none;
	color: var(--mw-text);
	white-space: nowrap;
	transition: color var(--mw-dur) var(--mw-ease), background var(--mw-dur) var(--mw-ease);
}

.mw-header__phone:hover { color: var(--mw-white); background: rgb(242 240 235 / 10%); }
.mw-header__phone svg { color: var(--mw-accent); flex: none; }

@media (min-width: 1200px) {
	.mw-header__phone { display: inline-flex; }
}

/* Przełącznik języków --------------------------------------------------- */

.mw-lang { position: relative; display: inline-flex; align-items: center; }

.mw-lang__btn {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	min-height: 40px;
	padding: 0 0.6rem;
	border: 1px solid var(--mw-line);
	border-radius: var(--mw-r-sm);
	background: transparent;
	color: inherit;
	font-size: var(--mw-fs-xs);
	font-weight: 700;
	letter-spacing: 0.04em;
	transition: background var(--mw-dur) var(--mw-ease), border-color var(--mw-dur) var(--mw-ease);
}

.mw-lang__btn:hover { background: rgb(242 240 235 / 10%); border-color: rgb(242 240 235 / 34%); }

.mw-lang__caret { transition: transform var(--mw-dur) var(--mw-ease); }
.mw-lang__btn[aria-expanded="true"] .mw-lang__caret { transform: rotate(180deg); }

.mw-lang__menu {
	position: absolute;
	top: calc(100% + 8px);
	right: 0;
	z-index: 20;
	min-width: 190px;
	margin: 0;
	padding: var(--mw-sp-2);
	background: rgb(30 22 18 / 96%);
	backdrop-filter: saturate(140%) blur(20px);
	border: 1px solid var(--mw-line);
	border-radius: var(--mw-r);
	box-shadow: var(--mw-shadow-dark);
	list-style: none;
	opacity: 0;
	visibility: hidden;
	transform: translateY(-6px);
	transition: opacity var(--mw-dur) var(--mw-ease), transform var(--mw-dur) var(--mw-ease),
		visibility var(--mw-dur);
}

.mw-lang__btn[aria-expanded="true"] + .mw-lang__menu {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

.mw-lang__opt {
	display: flex;
	align-items: center;
	gap: var(--mw-sp-3);
	width: 100%;
	padding: 0.55rem 0.6rem;
	border: 0;
	border-radius: var(--mw-r-sm);
	background: transparent;
	color: var(--mw-text);
	font-size: var(--mw-fs-sm);
	font-weight: 500;
	text-align: left;
	transition: background var(--mw-dur) var(--mw-ease);
}

.mw-lang__opt:hover { background: rgb(242 240 235 / 10%); }
.mw-lang__opt img { flex: none; border-radius: 3px; }
.mw-lang__opt span { flex: 1; }
.mw-lang__tick { opacity: 0; color: var(--mw-accent); flex: none; }
.mw-lang__opt[aria-current="true"] { font-weight: 700; }
.mw-lang__opt[aria-current="true"] .mw-lang__tick { opacity: 1; }

/* Oryginalny widżet GTranslate ładuje silnik tłumaczeń, ale interfejs rysujemy sami. */
.mw-gt-host {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	pointer-events: none;
}

/* Burger i szuflada ----------------------------------------------------- */

.mw-burger {
	display: none;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 1px solid var(--mw-line);
	border-radius: var(--mw-r-sm);
	background: transparent;
}

.mw-burger span {
	display: block;
	width: 20px;
	height: 2px;
	margin: 4px auto;
	border-radius: 2px;
	background: currentcolor;
	transition: transform var(--mw-dur) var(--mw-ease), opacity var(--mw-dur) var(--mw-ease);
}

.mw-nav__close { display: none; }
.mw-nav__foot { display: none; }

.mw-backdrop {
	position: fixed;
	inset: 0;
	z-index: 95;
	background: rgb(26 18 14 / 55%);
	backdrop-filter: blur(2px);
	animation: mw-fade var(--mw-dur) var(--mw-ease);
}

.mw-backdrop[hidden] { display: none; }

@keyframes mw-fade { from { opacity: 0; } to { opacity: 1; } }

@media (max-width: 1023px) {
	.mw-burger { display: block; }
	.mw-header__cta { display: none; }

	/* `backdrop-filter` czyni z nagłówka blok zawierający dla `position: fixed`,
	   przez co szuflada dostawała wysokość paska zamiast ekranu. Na telefonie i tak
	   nic nie tracimy — pasek jest kryjący, a rozmycie kosztuje GPU. */
	.mw-header {
		backdrop-filter: none;
		background: #1c1410;
	}

	.mw-header.is-stuck { background: #17100c; }

	/* Warstwa jest dokładnie wielkości ekranu i przycina panel zaparkowany za prawą
	   krawędzią. Bez tego Chrome na telefonie liczy zamkniętą szufladę do szerokości
	   dokumentu i pomniejsza całą stronę (390 px layoutu robi się 733 px). */
	.mw-nav {
		position: fixed;
		inset: 0;
		z-index: 96;
		display: flex;
		justify-content: flex-end;
		overflow: clip;
		pointer-events: none;
	}

	.mw-nav__panel {
		position: relative;
		display: flex;
		flex-direction: column;
		width: min(88vw, 400px);
		background: #1c1410;
		box-shadow: -24px 0 60px -30px rgb(0 0 0 / 85%);
		transform: translateX(100%);
		visibility: hidden;
		pointer-events: auto;

		/* Widoczność przełącza się skokowo dopiero po wyjeździe panelu — inaczej
		   przez pierwsze klatki jest jeszcze `hidden` i `focus()` na pierwszym
		   elemencie szuflady nie ma na czym zadziałać. */
		transition: transform 0.32s var(--mw-ease), visibility 0s linear 0.32s;
	}

	/* Warstwa zostaje przezroczysta dla kliknięć — dzięki temu tapnięcie obok panelu
	   trafia w tło, które zamyka szufladę. */
	.mw-nav.is-open .mw-nav__panel {
		transform: translateX(0);
		visibility: visible;
		transition: transform 0.32s var(--mw-ease), visibility 0s;
	}

	.mw-nav__close {
		display: grid;
		place-items: center;
		position: absolute;
		top: 14px;
		right: var(--mw-gutter);
		width: 40px;
		height: 40px;
		padding: 0;
		border: 1px solid var(--mw-line);
		border-radius: 50%;
		background: rgb(242 240 235 / 8%);
		color: var(--mw-text);
	}

	.mw-nav__scroll {
		flex: 1;
		overflow-y: auto;
		overscroll-behavior: contain;
		padding: calc(var(--mw-sp-8) + 8px) var(--mw-gutter) var(--mw-sp-6);
		-webkit-overflow-scrolling: touch;
	}

	.mw-nav__list { flex-direction: column; align-items: stretch; gap: 0; }

	.mw-nav__item {
		flex-wrap: wrap;
		justify-content: space-between;
		border-bottom: 1px solid var(--mw-line);
	}

	/* Ostatnia kreska stykałaby się z obramowaniem stopki szuflady. */
	.mw-nav__list > .mw-nav__item:last-child { border-bottom: 0; }

	.mw-nav__link { flex: 1; padding: 0.95rem 0; font-size: 1.0625rem; }
	.mw-nav__item.is-current > .mw-nav__link::after { display: none; }
	.mw-nav__item.is-current > .mw-nav__link { color: var(--mw-accent); }

	.mw-nav__toggle { width: 44px; height: 44px; }

	.mw-nav__sub,
	.mw-nav__mega {
		position: static;
		flex-basis: 100%;
		width: auto;
		min-width: 0;
		padding: 0 0 var(--mw-sp-3);
		background: none;
		backdrop-filter: none;
		border: 0;
		box-shadow: none;
		display: none;
		opacity: 1;
		visibility: visible;
		transform: none;
	}

	.mw-nav__mega::before { display: none; }

	/* Hover nie ma sensu na dotyku — panel otwiera wyłącznie przycisk. */
	.mw-nav__item--has-sub:hover > .mw-nav__sub,
	.mw-nav__item--mega:hover > .mw-nav__mega { display: none; }

	/* `transform` musi zostać zdjęty tu, a nie w regule bazowej klasy: stan otwarty
	   jest opisany selektorem o wyższej specyficzności i wygrywał wyśrodkowanie
	   `translate(-50%)` z wersji na desktop. */
	.mw-nav__toggle[aria-expanded="true"] + .mw-nav__sub,
	.mw-nav__toggle[aria-expanded="true"] + .mw-nav__mega {
		display: block;
		transform: none;
	}

	.mw-nav__sub .mw-nav__link { font-size: 1rem; padding: 0.7rem 0; }

	/* Na telefonie karty stają się wierszami — miniatura 4:3 w trzech kolumnach
	   byłaby nieczytelna, a lista czyta się szybciej kciukiem. */
	.mw-nav__cards { grid-template-columns: 1fr; gap: 0; }

	.mw-megacard {
		grid-template-columns: 56px 1fr auto;
		align-items: center;
		gap: var(--mw-sp-3);
		padding: 0.6rem 0;
	}

	.mw-megacard:hover { background: none; border-color: transparent; transform: none; }
	.mw-megacard__media { aspect-ratio: 1; border-radius: var(--mw-r-sm); }
	.mw-megacard__arrow { display: block; color: var(--mw-text-soft); }

	.mw-nav__mega-foot {
		flex-direction: column;
		align-items: flex-start;
		gap: var(--mw-sp-2);
		margin-top: var(--mw-sp-3);
		padding-top: var(--mw-sp-3);
	}

	.mw-nav__foot {
		display: grid;
		gap: var(--mw-sp-5);
		margin-top: var(--mw-sp-6);
		padding-top: var(--mw-sp-6);
		border-top: 1px solid var(--mw-line);
	}

	.mw-btn--block { display: flex; justify-content: center; width: 100%; }

	.mw-nav__contact { display: grid; gap: var(--mw-sp-3); }

	.mw-nav__contact a {
		display: inline-flex;
		align-items: center;
		gap: var(--mw-sp-3);
		font-size: var(--mw-fs-sm);
		font-weight: 700;
		text-decoration: none;
		color: var(--mw-text);
	}

	.mw-nav__contact svg { color: var(--mw-accent); flex: none; }

	.mw-nav__foot-row {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: var(--mw-sp-3);
		flex-wrap: wrap;
	}

	.mw-lang--drawer .mw-lang__menu { top: auto; bottom: calc(100% + 8px); left: 0; right: auto; }
}

@media (min-width: 1024px) {
	.mw-nav__panel { display: contents; }
	.mw-nav__close { display: none; }
	.mw-lang--drawer { display: none; }
}

/* Mobilny pasek akcji --------------------------------------------------- */

.mw-actionbar { display: none; }

@media (max-width: 767px) {
	.mw-actionbar {
		position: fixed;
		inset: auto 0 0;
		z-index: 80;
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 1px;
		background: var(--mw-line);
		border-top: 1px solid var(--mw-line);
		padding-bottom: env(safe-area-inset-bottom);
		box-shadow: 0 -10px 30px -22px rgb(26 18 14 / 70%);
	}

	.mw-actionbar__item {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		gap: var(--mw-sp-2);
		min-height: 56px;
		background: var(--mw-white);
		font-size: var(--mw-fs-sm);
		font-weight: 700;
		text-decoration: none;
		color: var(--mw-text);
	}

	.mw-actionbar__item--accent { background: var(--mw-espresso); color: var(--mw-cream); }
	.mw-actionbar__item svg { flex: none; }

	/* Pasek zasłaniałby ostatni wiersz stopki, więc oddajemy mu własną wysokość. */
	.mw-footer { padding-bottom: calc(56px + env(safe-area-inset-bottom)); }
}

/* 7. Stopka ------------------------------------------------------------- */

.mw-footer {
	background: var(--mw-espresso);
	color: var(--mw-cream);
	--mw-line: rgb(242 240 235 / 14%);
	--mw-focus: var(--mw-white);
}

.mw-footer__top {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--mw-sp-5);
	padding-block: clamp(2.5rem, 1.5rem + 3vw, 3.5rem);
	border-bottom: 1px solid var(--mw-line);
}

.mw-footer__brand img { height: clamp(46px, 4vw, 62px); width: auto; }

.mw-footer__cta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--mw-sp-5);
	padding-block: clamp(2.5rem, 1.5rem + 3vw, 4rem);
	border-bottom: 1px solid var(--mw-line);
}

.mw-footer__cta h2 { max-width: 22ch; }

.mw-footer__grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: clamp(2rem, 1.2rem + 2.5vw, 3.5rem);
	padding-block: clamp(2.5rem, 1.5rem + 3vw, 4rem);
}

@media (max-width: 899px) {
	.mw-footer__grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 559px) {
	.mw-footer__grid { grid-template-columns: 1fr; }
	.mw-footer__top { flex-direction: column; align-items: flex-start; }
}

.mw-footer__social {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--mw-sp-4);
	padding-block: var(--mw-sp-5);
	border-top: 1px solid var(--mw-line);
}

.mw-footer__social-label {
	font-size: var(--mw-fs-xs);
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--mw-accent);
}

.mw-footer__title {
	margin-bottom: var(--mw-sp-4);
	font-size: var(--mw-fs-sm);
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--mw-accent);
}

.mw-footer__list { display: grid; gap: var(--mw-sp-3); font-size: var(--mw-fs-sm); }

.mw-footer__list a {
	text-decoration: none;
	color: rgb(242 240 235 / 78%);
	transition: color var(--mw-dur) var(--mw-ease);
}

.mw-footer__list a:hover { color: var(--mw-accent); }

.mw-footer__contact {
	display: flex;
	flex-wrap: wrap;
	gap: var(--mw-sp-3) clamp(1.5rem, 1rem + 2vw, 3rem);
}

.mw-footer__contact a {
	display: inline-flex;
	align-items: center;
	gap: var(--mw-sp-3);
	font-size: var(--mw-fs-lead);
	font-weight: 700;
	text-decoration: none;
}

.mw-footer__contact svg { color: var(--mw-accent); flex: none; }

.mw-footer__contact a:hover { color: var(--mw-accent); }

.mw-footer__legal {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--mw-sp-3);
	padding-block: var(--mw-sp-5);
	border-top: 1px solid var(--mw-line);
	font-size: var(--mw-fs-xs);
	color: rgb(242 240 235 / 62%);
}

.mw-footer__legal a { color: inherit; }

.mw-social {
	display: flex;
	gap: var(--mw-sp-3);
}

.mw-social a {
	display: grid;
	place-items: center;
	width: 42px;
	height: 42px;
	border: 1px solid var(--mw-line);
	border-radius: 50%;
	color: inherit;
	transition: background var(--mw-dur) var(--mw-ease), color var(--mw-dur) var(--mw-ease),
		border-color var(--mw-dur) var(--mw-ease);
}

.mw-social a:hover {
	background: var(--mw-accent);
	border-color: var(--mw-accent);
	color: var(--mw-espresso);
}

.mw-social--sm a { width: 36px; height: 36px; }
.mw-social--sm svg { width: 17px; height: 17px; }

/* 8. Sekcje strony ------------------------------------------------------ */

/* Hero */
.mw-hero {
	position: relative;
	display: grid;
	align-items: end;
	min-height: min(88svh, 860px);
	padding-block: clamp(4rem, 2rem + 10vw, 8rem);
	overflow: hidden;
	background: var(--mw-espresso);
	color: var(--mw-cream);
	isolation: isolate;
	/* Hero leży na ciemnym zdjęciu, więc jasny obrys przycisku ghost i fokus muszą
	   przestawić się tak samo jak w sekcjach `--dark`. */
	--mw-line: rgb(242 240 235 / 45%);
	--mw-focus: var(--mw-white);
}

.mw-hero__bg {
	position: absolute;
	inset: 0;
	z-index: -2;
}

.mw-hero__bg img,
.mw-hero__bg video {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.mw-hero::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background:
		linear-gradient(180deg, rgb(20 13 10 / 72%) 0%, rgb(20 13 10 / 58%) 45%, rgb(20 13 10 / 88%) 100%),
		linear-gradient(90deg, rgb(20 13 10 / 55%) 0%, rgb(20 13 10 / 10%) 70%);
}

.mw-hero__inner {
	display: grid;
	grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
	gap: var(--mw-sp-6) var(--mw-sp-8);
	align-items: end;
}

.mw-hero__main,
.mw-hero__side { display: grid; gap: var(--mw-sp-5); align-content: end; }

.mw-hero h1 { color: var(--mw-white); text-wrap: balance; }

.mw-hero__lead {
	font-size: var(--mw-fs-lead);
	color: rgb(250 250 250 / 88%);
	max-width: 46ch;
}

@media (max-width: 900px) {
	.mw-hero__inner { grid-template-columns: 1fr; }
	.mw-hero__lead { max-width: 56ch; }
}

.mw-tags {
	display: flex;
	flex-wrap: wrap;
	gap: var(--mw-sp-2);
	margin-top: var(--mw-sp-2);
}

.mw-tags li {
	padding: 0.4em 0.95em;
	border: 1px solid rgb(250 250 250 / 28%);
	border-radius: var(--mw-r-pill);
	font-size: var(--mw-fs-xs);
	font-weight: 600;
	color: rgb(250 250 250 / 82%);
	backdrop-filter: blur(4px);
}

.mw-hero__note {
	display: grid;
	gap: var(--mw-sp-2);
	max-width: 46ch;
	padding: var(--mw-sp-5);
	border: 1px solid rgb(250 250 250 / 16%);
	border-radius: var(--mw-r-lg);
	background: rgb(20 13 10 / 42%);
	backdrop-filter: blur(10px);
}

.mw-hero__note h2 {
	font-size: var(--mw-fs-h4);
	color: var(--mw-accent);
}

.mw-hero__note p { font-size: var(--mw-fs-sm); color: rgb(250 250 250 / 78%); }

/* Kafelki „dlaczego” */
.mw-feature {
	display: grid;
	gap: var(--mw-sp-4);
	padding: var(--mw-sp-6);
	border: 1px solid var(--mw-line);
	border-radius: var(--mw-r-lg);
	transition: border-color var(--mw-dur) var(--mw-ease), transform var(--mw-dur) var(--mw-ease);
}

.mw-feature:hover { transform: translateY(-3px); border-color: rgb(140 111 78 / 45%); }

.mw-feature__icon {
	display: grid;
	place-items: center;
	width: 52px;
	height: 52px;
	border-radius: var(--mw-r);
	background: var(--mw-accent-tint);
	color: var(--mw-accent);
}

.mw-section--light .mw-feature__icon,
.mw-section--cream .mw-feature__icon,
.mw-section--sand .mw-feature__icon {
	background: var(--mw-espresso);
	color: var(--mw-accent);
}

.mw-feature p { color: var(--mw-text-soft); font-size: var(--mw-fs-sm); }

/* Split: tekst + obraz */
.mw-split {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr));
	gap: clamp(2rem, 1.2rem + 3vw, 4rem);
	align-items: center;
}

.mw-split--reverse .mw-split__media { order: -1; }

.mw-split__media img {
	width: 100%;
	border-radius: var(--mw-r-lg);
	box-shadow: var(--mw-shadow);
}

.mw-split__body { display: grid; gap: var(--mw-sp-4); }

/* Statystyki */
.mw-stats {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	margin-top: var(--mw-sp-6);
	border: 1px solid var(--mw-line);
	border-radius: var(--mw-r-md);
	overflow: hidden;
}

.mw-stat {
	display: grid;
	gap: var(--mw-sp-2);
	align-content: start;
	padding: var(--mw-sp-5);
	border-left: 1px solid var(--mw-line);
}

.mw-stat:first-child { border-left: 0; }

@media (max-width: 640px) {
	.mw-stats { grid-template-columns: 1fr; }
	.mw-stat { border-left: 0; border-top: 1px solid var(--mw-line); }
	.mw-stat:first-child { border-top: 0; }
}

.mw-stat__value {
	font-size: clamp(1.75rem, 1.1rem + 1.6vw, 2.75rem);
	font-weight: 800;
	line-height: 1;
	letter-spacing: -0.04em;
	white-space: nowrap;
	color: var(--mw-bark);
}

.mw-section--dark .mw-stat__value { color: var(--mw-accent); }

.mw-stat__label {
	font-size: var(--mw-fs-sm);
	color: var(--mw-text-soft);
	line-height: 1.45;
}

/* Ścieżki oferty */
.mw-path {
	position: relative;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	border-radius: var(--mw-r-lg);
	background: var(--mw-white);
	border: 1px solid var(--mw-line);
	box-shadow: var(--mw-shadow-sm);
	transition: transform var(--mw-dur) var(--mw-ease), box-shadow var(--mw-dur) var(--mw-ease);
}

.mw-path:hover { transform: translateY(-4px); box-shadow: var(--mw-shadow); }

.mw-path__media { aspect-ratio: 3 / 2; overflow: hidden; background: var(--mw-sand); }

.mw-path__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.5s var(--mw-ease);
}

.mw-path:hover .mw-path__media img { transform: scale(1.05); }

.mw-path__body {
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: var(--mw-sp-3);
	padding: var(--mw-sp-6);
}

.mw-path__body p { color: var(--mw-text-soft); font-size: var(--mw-fs-sm); }
.mw-path__body .mw-btn { margin-top: auto; align-self: flex-start; }

/* Opinie */
.mw-quotes {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
	gap: clamp(1.25rem, 0.9rem + 1.5vw, 2rem);
}

/* Karta ma własne tło, więc musi też mieć własne kolory tekstu — inaczej w sekcji `dark`
   dziedziczy jasny `--mw-text` i znika na białym. */
.mw-quote {
	display: grid;
	gap: var(--mw-sp-4);
	padding: var(--mw-sp-6);
	background: var(--mw-white);
	border: 1px solid rgb(43 31 26 / 12%);
	border-radius: var(--mw-r-lg);
	box-shadow: var(--mw-shadow-sm);
	color: var(--mw-espresso);
}

.mw-quote__mark {
	font-size: 2.5rem;
	line-height: 1;
	color: var(--mw-accent-deep);
	font-weight: 800;
}

.mw-quote blockquote { font-size: var(--mw-fs-base); }

.mw-quote figcaption {
	display: grid;
	gap: 2px;
	font-size: var(--mw-fs-sm);
	color: var(--mw-stone);
}

.mw-quote figcaption strong { color: var(--mw-espresso); }

.mw-stars { display: flex; gap: 2px; color: var(--mw-accent-deep); }

/* 9. Strona modelu ------------------------------------------------------ */

.mw-model-hero {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
	gap: clamp(2rem, 1.2rem + 3vw, 4rem);
	align-items: center;
}

@media (max-width: 899px) {
	.mw-model-hero { grid-template-columns: 1fr; }
}

.mw-model-hero__media img {
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	border-radius: var(--mw-r-lg);
	box-shadow: var(--mw-shadow);
}

.mw-model-hero__body { display: grid; gap: var(--mw-sp-4); align-content: start; }

.mw-model-hero__meta {
	display: flex;
	flex-wrap: wrap;
	gap: var(--mw-sp-2);
}

.mw-chip {
	display: inline-flex;
	align-items: center;
	gap: 0.4em;
	padding: 0.4em 0.9em;
	background: var(--mw-sand);
	border-radius: var(--mw-r-pill);
	font-size: var(--mw-fs-xs);
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--mw-bark);
	text-decoration: none;
}

a.mw-chip:hover { background: var(--mw-sand-dark); }

.mw-keyspecs {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 130px), 1fr));
	gap: var(--mw-sp-4);
	margin-top: var(--mw-sp-2);
	padding-block: var(--mw-sp-5);
	border-block: 1px solid var(--mw-line);
}

.mw-keyspec { display: grid; gap: 2px; }

.mw-keyspec__label {
	font-size: var(--mw-fs-xs);
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--mw-text-soft);
}

.mw-keyspec__value { font-size: var(--mw-fs-h4); font-weight: 700; }

.mw-specs {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
	gap: clamp(1.25rem, 0.9rem + 1.5vw, 2rem);
}

.mw-spec-card {
	display: grid;
	gap: var(--mw-sp-4);
	align-content: start;
	padding: var(--mw-sp-6);
	background: var(--mw-white);
	border: 1px solid var(--mw-line);
	border-radius: var(--mw-r-lg);
}

.mw-spec-card h3 { font-size: var(--mw-fs-h4); }

.mw-spec-list { display: grid; gap: var(--mw-sp-3); font-size: var(--mw-fs-sm); }

.mw-spec-list > div {
	display: grid;
	grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
	gap: var(--mw-sp-3);
	padding-bottom: var(--mw-sp-3);
	border-bottom: 1px solid var(--mw-line);
}

.mw-spec-list > div:last-child { padding-bottom: 0; border-bottom: 0; }

.mw-spec-list dt { color: var(--mw-text-soft); }
.mw-spec-list dd { margin: 0; font-weight: 600; }

.mw-pills { display: flex; flex-wrap: wrap; gap: var(--mw-sp-2); }

.mw-pill {
	padding: 0.45em 1em;
	background: var(--mw-cream);
	border: 1px solid var(--mw-line);
	border-radius: var(--mw-r-pill);
	font-size: var(--mw-fs-sm);
	font-weight: 600;
}

/* Opcje elewacji */
/* `auto-fill`, nie `auto-fit`: LINEAR i LOFT mają tylko jedną opcję, a rozciągnięta
   na całą szerokość kafelka wyglądałaby jak błąd. */
.mw-facades {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr));
	gap: clamp(1rem, 0.75rem + 1vw, 1.5rem);
	margin: 0;
	padding: 0;
	list-style: none;
}

.mw-facade {
	display: grid;
	gap: var(--mw-sp-2);
	align-content: start;
	padding: var(--mw-sp-6);
	background: var(--mw-white);
	border: 1px solid var(--mw-line);
	border-radius: var(--mw-r-lg);
}

.mw-facade__tier {
	font-size: var(--mw-fs-xs);
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--mw-accent-deep);
}

.mw-facade__name { font-size: var(--mw-fs-h4); }

.mw-facade__note { margin: 0; color: var(--mw-text-soft); font-size: var(--mw-fs-sm); }

/* Galeria */
.mw-gallery {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--mw-sp-3);
}

@media (min-width: 600px) { .mw-gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 900px) { .mw-gallery { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.mw-gallery__item {
	position: relative;
	margin: 0;
	padding: 0;
	border: 0;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	border-radius: var(--mw-r);
	background: var(--mw-sand);
	cursor: zoom-in;
}

.mw-gallery__item img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.5s var(--mw-ease);
}

.mw-gallery__item:hover img { transform: scale(1.05); }

.mw-plans {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
	gap: clamp(1.25rem, 0.9rem + 1.5vw, 2rem);
}

.mw-plan {
	display: grid;
	gap: var(--mw-sp-3);
	padding: var(--mw-sp-5);
	background: var(--mw-white);
	border: 1px solid var(--mw-line);
	border-radius: var(--mw-r-lg);
}

.mw-plan h3 { font-size: var(--mw-fs-h4); }

.mw-plan img {
	width: 100%;
	border-radius: var(--mw-r);
	background: var(--mw-cream);
}

/* Lightbox */
.mw-lightbox {
	position: fixed;
	inset: 0;
	z-index: 200;
	display: grid;
	grid-template-rows: auto 1fr;
	background: rgb(43 31 26 / 96%);
	opacity: 0;
	visibility: hidden;
	transition: opacity var(--mw-dur) var(--mw-ease), visibility var(--mw-dur);
}

.mw-lightbox.is-open { opacity: 1; visibility: visible; }

.mw-lightbox__bar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--mw-sp-4);
	padding: var(--mw-sp-4) var(--mw-gutter);
	color: rgb(242 240 235 / 78%);
	font-size: var(--mw-fs-sm);
}

.mw-lightbox__stage {
	position: relative;
	display: grid;
	place-items: center;
	padding: 0 var(--mw-gutter) var(--mw-sp-7);
	min-height: 0;
}

.mw-lightbox__stage img {
	max-width: 100%;
	max-height: 100%;
	object-fit: contain;
	border-radius: var(--mw-r);
}

.mw-lightbox__btn {
	display: grid;
	place-items: center;
	width: 46px;
	height: 46px;
	border: 1px solid rgb(242 240 235 / 25%);
	border-radius: 50%;
	background: rgb(242 240 235 / 6%);
	color: var(--mw-cream);
	transition: background var(--mw-dur) var(--mw-ease);
}

.mw-lightbox__btn:hover { background: rgb(242 240 235 / 18%); }

.mw-lightbox__nav {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
}

.mw-lightbox__nav--prev { left: var(--mw-gutter); }
.mw-lightbox__nav--next { right: var(--mw-gutter); }

/* 10. Formularz --------------------------------------------------------- */

.mwth-form {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
	gap: var(--mw-sp-4) var(--mw-sp-5);
	padding: clamp(1.5rem, 1rem + 2vw, 2.75rem);
	background: var(--mw-white);
	border: 1px solid var(--mw-line);
	border-radius: var(--mw-r-lg);
	box-shadow: var(--mw-shadow-sm);
	color: var(--mw-espresso);
}

.mwth-form__title,
.mwth-form__lead,
.mwth-form__notice,
.mwth-form__row--wide { grid-column: 1 / -1; }

.mwth-form__lead { color: var(--mw-stone); }

.mwth-form__row { display: grid; gap: var(--mw-sp-2); margin: 0; }

.mwth-form__label { font-size: var(--mw-fs-sm); font-weight: 600; }

.mwth-form__req { color: #c0392b; }

.mwth-form__control {
	width: 100%;
	padding: 0.85rem 1rem;
	background: var(--mw-paper);
	border: 1px solid rgb(43 31 26 / 16%);
	border-radius: var(--mw-r-sm);
	font-size: var(--mw-fs-base);
	transition: border-color var(--mw-dur) var(--mw-ease), box-shadow var(--mw-dur) var(--mw-ease),
		background var(--mw-dur) var(--mw-ease);
}

.mwth-form__control:focus {
	outline: none;
	background: var(--mw-white);
	border-color: var(--mw-bark);
	box-shadow: 0 0 0 3px rgb(140 111 78 / 30%);
}

textarea.mwth-form__control { resize: vertical; min-height: 120px; }

.mwth-form__consent {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: var(--mw-sp-3);
	align-items: start;
	font-size: var(--mw-fs-sm);
	color: var(--mw-stone);
	line-height: 1.55;
}

.mwth-form__consent input { margin-top: 0.28em; width: 18px; height: 18px; accent-color: var(--mw-bark); }

.mwth-form__hp {
	position: absolute !important;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.mwth-form__notice {
	padding: var(--mw-sp-4) var(--mw-sp-5);
	border-radius: var(--mw-r-sm);
	font-size: var(--mw-fs-sm);
	border: 1px solid transparent;
}

.mwth-form__notice--ok { background: #edf7ee; border-color: #b7dfbb; color: #1e6b2a; }
.mwth-form__notice--error { background: #fdeeee; border-color: #f2c2c2; color: #98261f; }

.mwth-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	padding: 0.95rem 1.75rem;
	border: 1px solid transparent;
	border-radius: var(--mw-r-pill);
	font: inherit;
	font-weight: 700;
	line-height: 1.2;
	cursor: pointer;
	transition: background var(--mw-dur) var(--mw-ease), color var(--mw-dur) var(--mw-ease),
		transform var(--mw-dur) var(--mw-ease), box-shadow var(--mw-dur) var(--mw-ease);
}

.mwth-btn--primary { background: var(--mw-espresso); color: var(--mw-white); }

.mwth-btn--primary:hover,
.mwth-btn--primary:focus-visible {
	background: var(--mw-bark);
	transform: translateY(-1px);
	box-shadow: var(--mw-shadow-sm);
}

/* Bloki kontaktu */
.mw-contact {
	display: grid;
	grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
	gap: clamp(2rem, 1.2rem + 3vw, 4rem);
	align-items: start;
}

@media (max-width: 899px) {
	.mw-contact { grid-template-columns: 1fr; }
}

.mw-contact__aside { display: grid; gap: var(--mw-sp-5); align-content: start; }

/* `dl > div` może zawierać wyłącznie `dt`/`dd`, więc ikona siedzi w `dt`,
   a `dd` wcinamy o szerokość ikony, żeby etykieta i wartość stały w jednej kolumnie. */
.mw-contact__item dt {
	display: flex;
	align-items: center;
	gap: var(--mw-sp-4);
}

.mw-contact__item dd { margin-left: calc(46px + var(--mw-sp-4)); }

.mw-contact__icon {
	flex: none;
	display: grid;
	place-items: center;
	width: 46px;
	height: 46px;
	border-radius: var(--mw-r);
	background: var(--mw-sand);
	color: var(--mw-bark);
}

.mw-section--dark .mw-contact__icon { background: var(--mw-accent-tint); color: var(--mw-accent); }

.mw-contact__label {
	font-size: var(--mw-fs-xs);
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--mw-text-soft);
}

.mw-contact__item dd { margin-top: 2px; font-weight: 600; }
.mw-contact__item a { text-decoration: none; }
.mw-contact__item a:hover { text-decoration: underline; }

/* 11. Paginacja i drobiazgi --------------------------------------------- */

.mw-pagination {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--mw-sp-2);
	margin-top: var(--mw-sp-7);
}

.mw-pagination .page-numbers {
	display: grid;
	place-items: center;
	min-width: 44px;
	height: 44px;
	padding-inline: 0.75rem;
	border: 1px solid var(--mw-line);
	border-radius: var(--mw-r-sm);
	font-size: var(--mw-fs-sm);
	font-weight: 600;
	text-decoration: none;
	transition: background var(--mw-dur) var(--mw-ease), border-color var(--mw-dur) var(--mw-ease);
}

.mw-pagination .page-numbers:hover { background: var(--mw-cream); }

.mw-pagination .page-numbers.current {
	background: var(--mw-espresso);
	border-color: var(--mw-espresso);
	color: var(--mw-cream);
}

.mw-page-hero {
	padding-block: clamp(2.5rem, 1.5rem + 4vw, 5rem) clamp(2rem, 1.2rem + 2.5vw, 3.5rem);
	background: var(--mw-cream);
}

.mw-page-hero__inner { display: grid; gap: var(--mw-sp-4); max-width: 68ch; }

.mw-page-hero--media {
	position: relative;
	display: grid;
	align-items: end;
	min-height: min(62svh, 560px);
	padding-block: clamp(3.5rem, 2rem + 6vw, 7rem) clamp(2.5rem, 1.5rem + 3vw, 4.5rem);
	background: var(--mw-espresso);
	color: var(--mw-cream);
	overflow: hidden;
	isolation: isolate;
	--mw-text-soft: rgb(242 240 235 / 82%);
}

.mw-page-hero--media .mw-page-hero__bg { position: absolute; inset: 0; z-index: -2; }

.mw-page-hero--media .mw-page-hero__bg img { width: 100%; height: 100%; object-fit: cover; }

.mw-page-hero--media::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background:
		linear-gradient(180deg, rgb(20 13 10 / 62%) 0%, rgb(20 13 10 / 45%) 40%, rgb(20 13 10 / 85%) 100%),
		linear-gradient(90deg, rgb(20 13 10 / 55%) 0%, rgb(20 13 10 / 8%) 72%);
}

.mw-page-hero--media h1 { color: var(--mw-white); }

.mw-404 { display: grid; gap: var(--mw-sp-5); justify-items: center; text-align: center; }

.mw-404__code {
	font-size: clamp(5rem, 3rem + 12vw, 11rem);
	font-weight: 800;
	line-height: 0.9;
	letter-spacing: -0.05em;
	color: var(--mw-clay);
}

.mw-search {
	display: flex;
	gap: var(--mw-sp-2);
	max-width: 460px;
}

.mw-search input { flex: 1; }

/* FAQ ------------------------------------------------------------------- */
.mw-faq {
	display: grid;
	gap: var(--mw-sp-3);
	max-width: 62rem;
	margin-inline: auto;
}

.mw-faq__item {
	background: var(--mw-white);
	border: 1px solid var(--mw-line);
	border-radius: var(--mw-r);
	overflow: hidden;
	transition: box-shadow var(--mw-dur) var(--mw-ease), border-color var(--mw-dur) var(--mw-ease);
}

.mw-faq__item[open] { border-color: var(--mw-sand-dark); box-shadow: var(--mw-shadow-sm); }

.mw-faq__q {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--mw-sp-4);
	padding: var(--mw-sp-5);
	font-size: var(--mw-fs-lg);
	font-weight: 700;
	cursor: pointer;
	list-style: none;
}

.mw-faq__q::-webkit-details-marker { display: none; }

.mw-faq__q:focus-visible { outline: 2px solid var(--mw-bark); outline-offset: -4px; }

.mw-faq__icon {
	position: relative;
	flex: 0 0 auto;
	width: 2rem;
	height: 2rem;
	border-radius: 50%;
	background: var(--mw-sand);
}

.mw-faq__icon::before,
.mw-faq__icon::after {
	content: "";
	position: absolute;
	inset: 50% auto auto 50%;
	width: 0.75rem;
	height: 2px;
	background: var(--mw-espresso);
	translate: -50% -50%;
	transition: rotate var(--mw-dur) var(--mw-ease);
}

.mw-faq__icon::after { rotate: 90deg; }

.mw-faq__item[open] .mw-faq__icon::after { rotate: 0deg; }

.mw-faq__a {
	padding: 0 var(--mw-sp-5) var(--mw-sp-5);
	color: var(--mw-text-soft);
	max-width: 78ch;
}

.mw-modelgroup + .mw-modelgroup { margin-top: clamp(2.5rem, 1.5rem + 3vw, 4.5rem); }

.mw-modelgroup__title {
	margin-bottom: var(--mw-sp-5);
	padding-bottom: var(--mw-sp-3);
	border-bottom: 1px solid var(--mw-line);
}

/* Kontakt — karta z formularzem ----------------------------------------- */
.mw-contactcard {
	display: grid;
	grid-template-columns: 1fr;
	gap: clamp(2rem, 1.2rem + 3vw, 3.5rem);
	padding: clamp(1.75rem, 1rem + 3vw, 3.5rem);
	background: var(--mw-espresso);
	color: var(--mw-cream);
	border-radius: var(--mw-r-lg);
	box-shadow: var(--mw-shadow-lg);
	--mw-text-soft: rgb(242 240 235 / 76%);
}

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

.mw-contactcard__aside { display: grid; gap: var(--mw-sp-4); align-content: start; }
.mw-contactcard__aside h2 { color: var(--mw-white); }
.mw-contactcard__aside .mw-eyebrow { color: var(--mw-accent); margin-bottom: 0; }
.mw-contactcard__aside .mw-lead { color: var(--mw-text-soft); }

.mw-phones { display: grid; gap: var(--mw-sp-3); margin-top: var(--mw-sp-3); }

.mw-phones__item {
	display: grid;
	gap: 2px;
	padding: var(--mw-sp-4) var(--mw-sp-5);
	border: 1px solid rgb(242 240 235 / 16%);
	border-radius: var(--mw-r);
	background: rgb(242 240 235 / 4%);
}

.mw-phones__label {
	font-size: var(--mw-fs-xs);
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: rgb(242 240 235 / 62%);
}

.mw-phones__value {
	font-size: var(--mw-fs-lg, 1.125rem);
	font-weight: 700;
	color: var(--mw-white);
	text-decoration: none;
}

.mw-phones__value:hover { color: var(--mw-accent); }

.mw-infocard {
	display: grid;
	gap: var(--mw-sp-3);
	align-content: start;
	padding: clamp(1.5rem, 1rem + 2vw, 2.5rem);
	background: var(--mw-paper);
	border: 1px solid var(--mw-line);
	border-radius: var(--mw-r-lg);
}

.mw-infocard h3 { font-size: var(--mw-fs-h4); overflow-wrap: anywhere; }
.mw-infocard p { color: var(--mw-text-soft); }

.mw-infocard__link {
	justify-self: start;
	font-weight: 700;
	color: var(--mw-bark);
	text-decoration-color: var(--mw-accent-deep);
}

/* ===== Landing B2B ===== */

.mw-b2bhero {
	position: relative;
	isolation: isolate;
	display: grid;
	align-items: end;
	min-height: clamp(30rem, 24rem + 22vw, 44rem);
	padding: calc(var(--mw-header-h) + var(--mw-sp-8)) 0 var(--mw-sp-8);
	background: var(--mw-espresso);
	color: var(--mw-white);
}

.mw-b2bhero__bg { position: absolute; inset: 0; z-index: -1; }

.mw-b2bhero__bg img { width: 100%; height: 100%; object-fit: cover; }

.mw-b2bhero__bg::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(43, 31, 26, 0.72) 0%, rgba(43, 31, 26, 0.6) 40%, rgba(43, 31, 26, 0.92) 100%);
}

.mw-b2bhero__inner { max-width: 46rem; display: grid; gap: var(--mw-sp-4); }

.mw-b2bhero__inner h1 {
	font-size: var(--mw-fs-h1);
	line-height: 1.06;
	letter-spacing: -0.02em;
}

.mw-b2bhero__inner .mw-lead { color: rgba(255, 255, 255, 0.82); }

.mw-b2bhero__note {
	font-size: var(--mw-fs-sm);
	color: rgba(255, 255, 255, 0.62);
}

.mw-b2bhero__stats {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--mw-sp-4);
	margin-top: var(--mw-sp-4);
	padding-top: var(--mw-sp-5);
	border-top: 1px solid rgba(255, 255, 255, 0.18);
	list-style: none;
}

.mw-b2bhero__stats li { display: grid; gap: 0.25rem; }
.mw-b2bhero__stats strong { font-size: var(--mw-fs-h4); color: var(--mw-accent); }
.mw-b2bhero__stats span { font-size: var(--mw-fs-xs); color: rgba(255, 255, 255, 0.7); line-height: 1.4; }

@media (max-width: 599px) {
	.mw-b2bhero__stats { grid-template-columns: 1fr; gap: var(--mw-sp-3); }
}

/* Pasek zaufania */
.mw-eyebrow--center { text-align: center; }

.mw-trust {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: var(--mw-sp-5);
	margin-top: var(--mw-sp-5);
	list-style: none;
	text-align: center;
}

.mw-trust li { display: grid; gap: 0.4rem; align-content: start; }

.mw-trust strong {
	font-size: clamp(1.5rem, 1rem + 1.4vw, 2.25rem);
	line-height: 1;
	color: var(--mw-accent);
	white-space: nowrap;
}

.mw-trust span { font-size: var(--mw-fs-xs); color: rgba(255, 255, 255, 0.68); line-height: 1.45; }

@media (max-width: 899px) { .mw-trust { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Kafelek treściowy */
.mw-tile {
	display: grid;
	gap: var(--mw-sp-2);
	align-content: start;
	padding: clamp(1.25rem, 0.9rem + 1.4vw, 2rem);
	background: var(--mw-paper);
	border: 1px solid var(--mw-line);
	border-radius: var(--mw-r-lg);
}

.mw-tile h3 { font-size: var(--mw-fs-h5); }
.mw-tile p { font-size: var(--mw-fs-sm); color: var(--mw-text-soft); }

.mw-tile--dark {
	background: rgba(255, 255, 255, 0.04);
	border-color: rgba(255, 255, 255, 0.14);
}

.mw-tile--dark h3 { color: var(--mw-white); }
.mw-tile--dark p { color: rgba(255, 255, 255, 0.7); }

/* Segmenty klientów */
.mw-segment {
	display: grid;
	gap: var(--mw-sp-3);
	align-content: start;
	padding: clamp(1.5rem, 1rem + 1.6vw, 2.25rem);
	background: var(--mw-paper);
	border: 1px solid var(--mw-line);
	border-radius: var(--mw-r-lg);
}

.mw-segment h3 { font-size: var(--mw-fs-h5); }
.mw-segment__lead { font-size: var(--mw-fs-sm); color: var(--mw-text-soft); }

.mw-checklist { display: grid; gap: var(--mw-sp-2); list-style: none; }

.mw-checklist li {
	position: relative;
	padding-left: 1.6rem;
	font-size: var(--mw-fs-sm);
	line-height: 1.5;
}

.mw-checklist li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.42em;
	width: 0.72rem;
	height: 0.42rem;
	border-left: 2px solid var(--mw-bark);
	border-bottom: 2px solid var(--mw-bark);
	transform: rotate(-45deg);
}

.mw-segment__cta {
	justify-self: start;
	margin-top: auto;
	padding-top: var(--mw-sp-2);
	font-size: var(--mw-fs-sm);
	font-weight: 700;
	color: var(--mw-bark);
	text-decoration-color: var(--mw-accent-deep);
}

/* Kalkulator przychodu */
.mw-calc {
	display: grid;
	grid-template-columns: 1.1fr 0.9fr;
	gap: clamp(1.5rem, 1rem + 3vw, 3.5rem);
	padding: clamp(1.5rem, 1rem + 2.4vw, 3rem);
	background: rgba(255, 255, 255, 0.05);
	border: 1px solid rgba(255, 255, 255, 0.14);
	border-radius: var(--mw-r-lg);
}

@media (max-width: 899px) { .mw-calc { grid-template-columns: 1fr; } }

.mw-calc__controls { display: grid; gap: var(--mw-sp-6); align-content: start; }
.mw-calc__field { display: grid; gap: var(--mw-sp-2); }

.mw-calc__field label {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: var(--mw-sp-3);
	font-size: var(--mw-fs-sm);
	color: rgba(255, 255, 255, 0.72);
}

.mw-calc__field output {
	font-size: var(--mw-fs-h5);
	font-weight: 700;
	color: var(--mw-accent);
	white-space: nowrap;
}

.mw-calc__scale {
	display: flex;
	justify-content: space-between;
	font-size: var(--mw-fs-xs);
	font-style: normal;
	color: rgba(255, 255, 255, 0.55);
}

.mw-calc__scale i { font-style: normal; }

.mw-calc input[type="range"] {
	-webkit-appearance: none;
	appearance: none;
	width: 100%;
	height: 0.375rem;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.16);
	cursor: pointer;
}

.mw-calc input[type="range"]::-webkit-slider-thumb {
	-webkit-appearance: none;
	appearance: none;
	width: 1.35rem;
	height: 1.35rem;
	border: none;
	border-radius: 50%;
	background: var(--mw-accent);
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
}

.mw-calc input[type="range"]::-moz-range-thumb {
	width: 1.35rem;
	height: 1.35rem;
	border: none;
	border-radius: 50%;
	background: var(--mw-accent);
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
}

.mw-calc input[type="range"]:focus-visible {
	outline: 2px solid var(--mw-accent);
	outline-offset: 4px;
}

.mw-calc__out { display: grid; gap: var(--mw-sp-4); align-content: start; }

.mw-calc__result {
	display: grid;
	gap: 0.35rem;
	padding: var(--mw-sp-4);
	background: rgba(0, 0, 0, 0.22);
	border-radius: var(--mw-r-md);
}

.mw-calc__result span { font-size: var(--mw-fs-xs); color: rgba(255, 255, 255, 0.6); }

.mw-calc__result strong {
	font-size: clamp(1.6rem, 1.1rem + 1.6vw, 2.5rem);
	line-height: 1;
	color: var(--mw-white);
	font-variant-numeric: tabular-nums;
}

.mw-calc__note { font-size: var(--mw-fs-xs); color: rgba(255, 255, 255, 0.55); line-height: 1.5; }

/* Kroki procesu */
.mw-steps {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: clamp(1.25rem, 0.9rem + 1.5vw, 2rem);
	list-style: none;
	counter-reset: none;
}

@media (max-width: 899px) { .mw-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 599px) { .mw-steps { grid-template-columns: 1fr; } }

.mw-steps__item {
	position: relative;
	display: grid;
	gap: var(--mw-sp-2);
	align-content: start;
	padding: clamp(1.25rem, 0.9rem + 1.4vw, 2rem);
	background: var(--mw-paper);
	border: 1px solid var(--mw-line);
	border-radius: var(--mw-r-lg);
}

.mw-steps__num {
	font-size: var(--mw-fs-h4);
	font-weight: 800;
	line-height: 1;
	color: #6f5f4f;
}

.mw-steps__item h3 { font-size: var(--mw-fs-h5); }
.mw-steps__item p { font-size: var(--mw-fs-sm); color: var(--mw-text-soft); }

/* Zasięg */
.mw-split--even { align-items: stretch; }

.mw-reach {
	display: grid;
	gap: var(--mw-sp-2);
	align-content: center;
	justify-items: center;
	padding: clamp(2rem, 1.4rem + 2.4vw, 3.5rem);
	text-align: center;
	background: rgba(255, 255, 255, 0.05);
	border: 1px solid rgba(255, 255, 255, 0.14);
	border-radius: var(--mw-r-lg);
}

.mw-reach__title { font-size: var(--mw-fs-h3); font-weight: 800; color: var(--mw-white); }
.mw-reach__sub { font-size: var(--mw-fs-base); color: var(--mw-accent); }
.mw-reach__note { font-size: var(--mw-fs-sm); color: rgba(255, 255, 255, 0.62); max-width: 24rem; }

.mw-quote__stars { color: var(--mw-accent-deep); letter-spacing: 0.15em; }

/* ===== Podziękowanie za wysłanie formularza ===== */

.mw-thanks .mw-split { align-items: start; }

.mw-thanks__main { display: grid; gap: var(--mw-sp-4); align-content: start; }

.mw-thanks__main h1 {
	font-size: clamp(1.9rem, 1.4rem + 2.2vw, 3.25rem);
	line-height: 1.08;
	letter-spacing: -0.02em;
}

.mw-thanks__sep {
	margin-top: var(--mw-sp-4);
	padding-top: var(--mw-sp-5);
	border-top: 1px solid var(--mw-line);
}

.mw-thanks__side { display: grid; gap: var(--mw-sp-5); align-content: start; }

.mw-timeline { display: grid; gap: var(--mw-sp-5); list-style: none; }

.mw-timeline__item {
	position: relative;
	display: grid;
	gap: 0.3rem;
	padding-left: var(--mw-sp-6);
}

.mw-timeline__item::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.35rem;
	width: 0.7rem;
	height: 0.7rem;
	border: 2px solid var(--mw-accent);
	border-radius: 50%;
}

/* Pionowa nitka łącząca punkty — bez niej to zwykła lista, a nie oś czasu. */
.mw-timeline__item:not(:last-child)::after {
	content: "";
	position: absolute;
	left: calc(0.35rem - 1px);
	top: 1.3rem;
	bottom: calc(var(--mw-sp-5) * -1);
	width: 2px;
	background: var(--mw-line);
}

.mw-timeline__when {
	font-size: var(--mw-fs-xs);
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--mw-text-soft);
}

.mw-timeline__title { font-size: var(--mw-fs-h5); }
.mw-timeline__item p { font-size: var(--mw-fs-sm); color: var(--mw-text-soft); }

/* Panel boczny */
.mw-panel {
	display: grid;
	gap: var(--mw-sp-3);
	align-content: start;
	padding: clamp(1.5rem, 1rem + 1.8vw, 2.25rem);
	background: rgba(255, 255, 255, 0.05);
	border: 1px solid rgba(255, 255, 255, 0.14);
	border-radius: var(--mw-r-lg);
}

.mw-panel h2 { font-size: var(--mw-fs-h4); }
.mw-panel > p { font-size: var(--mw-fs-sm); color: var(--mw-text-soft); }

.mw-lines, .mw-links { display: grid; gap: var(--mw-sp-2); list-style: none; }

.mw-lines a {
	display: grid;
	gap: 0.1rem;
	padding: var(--mw-sp-3) var(--mw-sp-4);
	background: rgba(0, 0, 0, 0.22);
	border-radius: var(--mw-r);
	text-decoration: none;
	transition: background var(--mw-dur) var(--mw-ease);
}

.mw-lines a:hover { background: rgba(0, 0, 0, 0.38); }
.mw-lines__label { font-size: var(--mw-fs-xs); color: var(--mw-text-soft); }
.mw-lines__value { font-size: var(--mw-fs-lg); font-weight: 700; color: var(--mw-white); }

.mw-links a {
	display: flex;
	align-items: center;
	gap: var(--mw-sp-3);
	padding: var(--mw-sp-3) var(--mw-sp-4);
	border-radius: var(--mw-r);
	text-decoration: none;
	color: var(--mw-white);
	transition: background var(--mw-dur) var(--mw-ease);
}

.mw-links a:hover { background: rgba(255, 255, 255, 0.07); }
.mw-links a span { flex: 1; font-weight: 600; }
.mw-links a em { font-style: normal; font-size: var(--mw-fs-xs); color: var(--mw-text-soft); }
.mw-links a svg { color: var(--mw-text-soft); }

/* ===== Strona-podsumowanie ===== */

.mw-keyfacts {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: var(--mw-sp-4);
	margin-top: var(--mw-sp-6);
	list-style: none;
	text-align: center;
}

.mw-keyfacts li { display: grid; gap: 0.25rem; }

.mw-keyfacts strong {
	font-size: clamp(1.5rem, 1.05rem + 1.5vw, 2.375rem);
	line-height: 1;
	color: var(--mw-bark);
	white-space: nowrap;
}

.mw-keyfacts span {
	font-size: var(--mw-fs-xs);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--mw-text-soft);
}

@media (max-width: 599px) { .mw-keyfacts { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Siedem etapów — na wąskich ekranach zwija się do dwóch kolumn zamiast ściskać do nieczytelności. */
.mw-flow {
	display: grid;
	grid-template-columns: repeat(7, minmax(0, 1fr));
	gap: var(--mw-sp-4);
	list-style: none;
}

@media (max-width: 1099px) { .mw-flow { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 699px) { .mw-flow { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.mw-flow__item { display: grid; gap: 0.4rem; align-content: start; justify-items: center; text-align: center; }

.mw-flow__num {
	display: grid;
	place-items: center;
	width: 2.5rem;
	height: 2.5rem;
	margin-bottom: var(--mw-sp-2);
	font-weight: 700;
	border: 1px solid rgba(255, 255, 255, 0.3);
	border-radius: 50%;
	color: var(--mw-accent);
}

.mw-flow__item h3 { font-size: var(--mw-fs-sm); }
.mw-flow__item p { font-size: var(--mw-fs-xs); color: var(--mw-text-soft); line-height: 1.45; }

.mw-inline-contact {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--mw-sp-3) var(--mw-sp-6);
	margin-top: var(--mw-sp-7);
	padding-top: var(--mw-sp-5);
	border-top: 1px solid var(--mw-line);
	list-style: none;
	font-size: var(--mw-fs-sm);
	color: var(--mw-text-soft);
}

.mw-inline-contact a { color: var(--mw-white); text-decoration-color: var(--mw-accent); }

.mw-footer__brand {
	display: inline-block;
	margin-bottom: var(--mw-sp-6);
}

.mw-footer__brand img { height: clamp(48px, 4.5vw, 68px); width: auto; }

/* 10. Blog -------------------------------------------------------------- */

/* Pasek meta — data, separator, czas czytania. Ta sama para na karcie i we wpisie. */
.mw-postmeta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--mw-sp-2) var(--mw-sp-3);
	margin: 0;
	font-size: var(--mw-fs-xs);
	font-weight: 600;
	letter-spacing: 0.01em;
	color: var(--mw-text-soft);
}

.mw-postmeta__cat {
	display: inline-flex;
	align-items: center;
	padding: 0.35em 0.85em;
	background: var(--mw-accent-tint);
	border-radius: var(--mw-r-pill);
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	text-decoration: none;
	color: var(--mw-accent-ink);
	transition: background var(--mw-dur) var(--mw-ease);
}

/* Kafelek kategorii leży pod niewidzialnym ::after tytułu karty, więc musi
   wyjść nad niego, żeby dało się kliknąć w samą kategorię. */
.mw-postmeta__cat { position: relative; z-index: 2; }
.mw-postmeta__cat:hover { background: var(--mw-sand-dark); }

.mw-postmeta__sep {
	width: 3px;
	height: 3px;
	border-radius: 50%;
	background: currentcolor;
	opacity: 0.55;
}

.mw-postmeta--light { color: rgb(242 240 235 / 78%); }
.mw-postmeta--light .mw-postmeta__cat { background: rgb(211 189 160 / 22%); color: var(--mw-accent); }

/* Karta wpisu — szkielet z `.mw-card`, inne proporcje kadru i stopka bez ceny. */
.mw-card--post .mw-card__media { aspect-ratio: 3 / 2; }
.mw-card--post .mw-card__title { font-size: var(--mw-fs-h5); line-height: var(--mw-lh-head); }
.mw-card--post .mw-card__excerpt { font-size: var(--mw-fs-sm); }
.mw-card__foot--post { justify-content: flex-start; }

/* Wyróżniony wpis na archiwum */
.mw-featured {
	display: grid;
	gap: var(--mw-sp-5);
	align-items: center;
}

.mw-featured__media {
	display: block;
	overflow: hidden;
	aspect-ratio: 16 / 10;
	border-radius: var(--mw-r-lg);
	box-shadow: var(--mw-shadow);
}

.mw-featured__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform var(--mw-dur) var(--mw-ease);
}

.mw-featured:hover .mw-featured__media img { transform: scale(1.03); }

.mw-featured__body { display: grid; gap: var(--mw-sp-4); align-content: start; }
.mw-featured__body .mw-eyebrow { margin: 0; }

.mw-featured__title {
	margin: 0;
	font-size: var(--mw-fs-h2);
	line-height: var(--mw-lh-head);
	letter-spacing: -0.02em;
}

.mw-featured__title a {
	text-decoration: none;
	background-image: linear-gradient(var(--mw-accent-deep), var(--mw-accent-deep));
	background-repeat: no-repeat;
	background-position: 0 100%;
	background-size: 0 1.5px;
	transition: background-size var(--mw-dur) var(--mw-ease);
}

.mw-featured__title a:hover { background-size: 100% 1.5px; }

.mw-featured__excerpt {
	margin: 0;
	font-size: var(--mw-fs-lead);
	line-height: var(--mw-lh-body);
	color: var(--mw-text-soft);
}

@media (min-width: 900px) {
	.mw-featured { grid-template-columns: 1.05fr 1fr; gap: clamp(2rem, 1rem + 3vw, 4rem); }
}

/* Nagłówek wpisu i okładka. Okładka podchodzi pod kremowe tło nagłówka, żeby
   przejście między sekcjami nie było płaską kreską. */
.mw-page-hero--post .mw-page-hero__inner { max-width: none; }
.mw-page-hero--post h1 { font-size: clamp(2rem, 1.4rem + 2.4vw, 3.25rem); }

.mw-post-cover {
	margin: calc(-1 * clamp(1rem, 0.6rem + 1.25vw, 1.75rem)) 0 0;
	overflow: hidden;
	aspect-ratio: 16 / 9;
	border-radius: var(--mw-r-lg);
	box-shadow: var(--mw-shadow);
}

.mw-post-cover img { width: 100%; height: 100%; object-fit: cover; }

/* Spis treści */
.mw-toc {
	margin-bottom: var(--mw-sp-7);
	padding: var(--mw-sp-5);
	background: var(--mw-cream);
	border: 1px solid var(--mw-line);
	border-radius: var(--mw-r-md);
}

.mw-toc__title {
	margin: 0 0 var(--mw-sp-3);
	font-size: var(--mw-fs-xs);
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--mw-accent-ink);
}

.mw-toc ol {
	display: grid;
	gap: var(--mw-sp-2);
	margin: 0;
	padding-left: 1.3em;
	font-size: var(--mw-fs-sm);
}

.mw-toc a { color: var(--mw-text); text-decoration-color: var(--mw-line); }
.mw-toc a:hover { text-decoration-color: var(--mw-accent-deep); }

/* Nagłówki mają kotwice ze spisu treści — sticky header nie może ich zasłaniać. */
.mw-prose h2[id] { scroll-margin-top: calc(var(--mw-header-h) + var(--mw-sp-5)); }

/* Ramka „W skrócie" — pierwszy blok wpisu, pisany pod cytowanie przez modele. */
.mw-keybox {
	padding: var(--mw-sp-5);
	background: var(--mw-accent-tint);
	border-left: 3px solid var(--mw-accent-deep);
	border-radius: 0 var(--mw-r-md) var(--mw-r-md) 0;
}

.mw-keybox > :first-child { margin-top: 0; }
.mw-keybox > :last-child { margin-bottom: 0; }

.mw-keybox__title {
	margin: 0 0 var(--mw-sp-3);
	font-size: var(--mw-fs-xs);
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--mw-accent-ink);
}

.mw-prose .mw-keybox ul { margin: 0; }
.mw-prose .mw-keybox ul li { font-size: var(--mw-fs-sm); }

/* FAQ na końcu wpisu — ten sam blok zasila schemat FAQPage. */
.mw-prose .mw-faq-block { margin-top: var(--mw-sp-7); }
.mw-prose .mw-faq-block h3 {
	margin-top: var(--mw-sp-5);
	padding-top: var(--mw-sp-5);
	border-top: 1px solid var(--mw-line);
	font-size: var(--mw-fs-h4);
}

.mw-prose .mw-faq-block h3:first-of-type { border-top: 0; padding-top: 0; }

.mw-post-updated {
	margin-top: var(--mw-sp-6);
	font-size: var(--mw-fs-xs);
	color: var(--mw-text-soft);
}

/* Box autora */
.mw-authorbox {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: var(--mw-sp-4) var(--mw-sp-5);
	margin-top: var(--mw-sp-7);
	padding: var(--mw-sp-5);
	background: var(--mw-cream);
	border-radius: var(--mw-r-lg);
}

.mw-authorbox__mark {
	display: grid;
	place-items: center;
	width: 56px;
	height: 56px;
	background: var(--mw-espresso);
	border-radius: 50%;
	font-size: var(--mw-fs-sm);
	font-weight: 700;
	letter-spacing: 0.08em;
	color: var(--mw-accent);
}

.mw-authorbox__name {
	margin: 0 0 var(--mw-sp-2);
	font-size: var(--mw-fs-h5);
	font-weight: 700;
}

.mw-authorbox__bio {
	margin: 0 0 var(--mw-sp-3);
	font-size: var(--mw-fs-sm);
	line-height: var(--mw-lh-body);
	color: var(--mw-text-soft);
}

@media (max-width: 599px) {
	.mw-authorbox { grid-template-columns: 1fr; }
}