/*
 * Kulska v2 — the design system. theme.json holds the tokens the editor needs;
 * this file composes everything else. One stylesheet, no build step.
 *
 * Direction: an agency in Gdynia since 2003, redrawn modern. Warm paper and
 * white, the brand's sea teal, ink for weight; Source Serif 4 (self-hosted)
 * for headings, the system sans for reading. Soft corners from Gdynia's
 * streamline modernism, the logo's 12° tilt as the one recurring gesture.
 * Photos are the listings themselves — no stock.
 */

@font-face {
	font-family: "Source Serif 4";
	src: url("../fonts/source-serif-4-latin.woff2") format("woff2");
	font-weight: 200 900;
	font-style: normal;
	font-display: swap;
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: "Source Serif 4";
	src: url("../fonts/source-serif-4-latin-ext.woff2") format("woff2");
	font-weight: 200 900;
	font-style: normal;
	font-display: swap;
	unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
	--k-morze: #006C70;
	--k-morze-ciemne: #00565A;
	--k-morze-jasne: #E6F1EF;
	--k-morze-swiatlo: #8FD6CF;   /* teal on ink */
	--k-atrament: #1F2430;
	--k-tekst: #454B59;
	--k-tekst-slaby: #6B7080;
	--k-piasek: #F5F1EA;
	--k-piasek-ciemny: #EBE4D7;
	--k-linia: #E4DED3;
	--k-bialy: #FFFFFF;
	--k-zloto: #D99A1E;           /* stars, as graphics */

	--k-szeryf: "Source Serif 4", "Iowan Old Style", Georgia, serif;
	--k-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

	--k-r: 1rem;
	--k-r-duzy: 1.5rem;
	--k-r-maly: 0.625rem;
	--k-cien: 0 1px 2px rgb(31 36 48 / 5%), 0 8px 24px -8px rgb(31 36 48 / 14%);
	--k-cien-duzy: 0 2px 4px rgb(31 36 48 / 4%), 0 24px 48px -16px rgb(31 36 48 / 24%);
	--k-szerokosc: 78rem;
	--k-margines: clamp(1rem, 4vw, 2rem);
	--k-naglowek-h: 5.25rem;
}

/* ── base ─────────────────────────────────────────────────────────────── */

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

/* Nothing may widen the page. On an iPhone a few pixels of overflow (Safari's
   text size, a 320 px phone) let the page pan sideways and zoom out, and the
   zoom does not settle back. Clip at the root: it propagates to the viewport,
   so the sticky header keeps working (overflow on body would break it). */
html {
	scroll-padding-top: calc(var(--k-naglowek-h) + 1rem);
	overflow-x: hidden;
	overflow-x: clip;
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
}

body {
	margin: 0;
	background: var(--k-bialy);
	color: var(--k-tekst);
	font-family: var(--k-sans);
	font-size: 1.0625rem;
	line-height: 1.65;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 {
	font-family: var(--k-szeryf);
	color: var(--k-atrament);
	font-weight: 600;
	line-height: 1.12;
	letter-spacing: -0.015em;
	text-wrap: balance;
}

h1 { font-size: clamp(2.5rem, 5.5vw, 4.25rem); }
h2 { font-size: clamp(1.875rem, 3.6vw, 2.75rem); }
h3 { font-size: clamp(1.25rem, 2vw, 1.5rem); }

a {
	color: var(--k-morze);
	text-underline-offset: 0.2em;
	text-decoration-thickness: 1px;
}

a:hover {
	color: var(--k-morze-ciemne);
}

img {
	max-width: 100%;
	height: auto;
}

:focus-visible {
	outline: 3px solid var(--k-morze);
	outline-offset: 3px;
	border-radius: 6px;
}

.screen-reader-text {
	border: 0;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	width: 1px;
	word-wrap: normal !important;
}

.skip-link.screen-reader-text:focus {
	clip: auto;
	clip-path: none;
	height: auto;
	width: auto;
	z-index: 100;
	top: 0.5rem;
	left: 0.5rem;
	padding: 0.75rem 1rem;
	background: var(--k-atrament);
	color: var(--k-bialy);
	border-radius: var(--k-r-maly);
}

.k-szerokosc {
	width: min(100% - 2 * var(--k-margines), var(--k-szerokosc));
	margin-inline: auto;
}

/* Block-theme wrappers carry no spacing of their own. */
.wp-site-blocks > * { margin-block: 0; }
.k-strona-glowna, .k-podstrona { margin: 0; }

.k-etykieta {
	margin: 0 0 0.85rem;
	font-family: var(--k-sans);
	font-size: 0.78rem;
	font-weight: 700;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--k-morze);
}

/* ── buttons ──────────────────────────────────────────────────────────── */

.k-przycisk,
.k-przycisk > a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	min-height: 2.75rem;
	padding: 0.6rem 1.25rem;
	border: 0;
	border-radius: 999px;
	background: var(--k-morze);
	color: var(--k-bialy);
	font: 600 0.9375rem/1.2 var(--k-sans);
	text-decoration: none;
	cursor: pointer;
	transition: background-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}

.k-przycisk:hover,
.k-przycisk > a:hover {
	background: var(--k-morze-ciemne);
	color: var(--k-bialy);
}

.k-przycisk:has(> a) {
	padding: 0;
	min-height: 0;
	background: none;
}

.k-przycisk--obrys,
.k-przycisk--obrys > a {
	background: transparent;
	color: var(--k-atrament);
	box-shadow: inset 0 0 0 1.5px currentColor;
}

.k-przycisk--obrys:has(> a) { box-shadow: none; }

.k-przycisk--obrys:hover,
.k-przycisk--obrys > a:hover {
	background: var(--k-atrament);
	color: var(--k-bialy);
	box-shadow: inset 0 0 0 1.5px var(--k-atrament);
}

.k-przycisk--jasny {
	background: var(--k-bialy);
	color: var(--k-morze-ciemne);
}

.k-przycisk--jasny:hover {
	background: var(--k-morze-jasne);
	color: var(--k-morze-ciemne);
}

.k-przycisk--pelny {
	display: flex;
	width: 100%;
}

.k-przycisk--tel::before,
.k-naglowek__tel a::before {
	content: "";
	flex: none;
	width: 1.05em;
	height: 1.05em;
	background: currentColor;
	-webkit-mask: var(--k-ikona-tel) center / contain no-repeat;
	mask: var(--k-ikona-tel) center / contain no-repeat;
}

:root {
	--k-ikona-tel: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.6 10.8a15.1 15.1 0 0 0 6.6 6.6l2.2-2.2c.3-.3.7-.4 1-.2 1.1.4 2.3.6 3.6.6.6 0 1 .4 1 1V20c0 .6-.4 1-1 1A17 17 0 0 1 3 4c0-.6.4-1 1-1h3.5c.6 0 1 .4 1 1 0 1.3.2 2.5.6 3.6.1.3 0 .7-.2 1z'/%3E%3C/svg%3E");
}

.k-przyciski,
.kk-przyciski {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	margin: 1.75rem 0 0;
}

.k-link-strzalka {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	font-weight: 600;
	text-decoration: none;
	white-space: nowrap;
}

.k-link-strzalka::after {
	content: "→";
	transition: translate 0.15s ease;
}

.k-link-strzalka:hover::after {
	translate: 0.2em 0;
}

.kk-link-ikona {
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
	padding: 0;
	border: 0;
	background: none;
	color: var(--k-morze);
	font: 600 0.9375rem/1.3 var(--k-sans);
	text-decoration: none;
	cursor: pointer;
}

.kk-link-ikona:hover {
	text-decoration: underline;
}

.kk-ikona {
	flex: none;
}

/* ── header ───────────────────────────────────────────────────────────── */

.k-czesc-naglowek {
	position: sticky;
	top: 0;
	z-index: 50;
}

.admin-bar .k-czesc-naglowek { top: 32px; }

.k-naglowek {
	background: rgb(255 255 255 / 92%);
	-webkit-backdrop-filter: saturate(1.4) blur(12px);
	backdrop-filter: saturate(1.4) blur(12px);
	border-bottom: 1px solid var(--k-linia);
}

.k-naglowek__wnetrze {
	display: flex;
	align-items: center;
	gap: 1.5rem;
	min-height: var(--k-naglowek-h);
}

.k-logo {
	display: inline-flex;
	align-items: center;
	gap: 0.8rem;
	flex: none;
	color: var(--k-atrament);
	text-decoration: none;
}

.k-logo:hover { color: var(--k-atrament); }

/* The emblem is the original artwork; the tile around it is the modern part:
   white into sand, a teal hairline and accent, a soft lift. It keeps the
   emblem legible on white, on the dark footer and on the gradients. */
.k-logo__kafel {
	position: relative;
	display: grid;
	place-items: center;
	flex: none;
	width: 3.6rem;
	height: 3.6rem;
	border-radius: 1rem;
	background: linear-gradient(135deg in oklab, #FFFFFF 0%, #FFFFFF 50%, #EFEAE0 100%);
	box-shadow: inset 0 0 0 1px rgb(0 108 112 / 18%), 0 8px 20px -12px rgb(0 72 76 / 40%);
	transition: translate 0.2s ease, box-shadow 0.2s ease;
}

.k-logo__kafel img {
	display: block;
	width: auto;
	height: 2.85rem;
}

.k-logo:hover .k-logo__kafel {
	translate: 0 -1px;
	box-shadow: inset 0 0 0 1px rgb(0 108 112 / 30%), 0 12px 24px -12px rgb(0 72 76 / 45%);
}

.k-logo__tekst {
	display: grid;
	gap: 0.2rem;
	line-height: 1.1;
}

.k-logo__nazwa {
	font-family: var(--k-szeryf);
	font-size: 1.3rem;
	font-weight: 600;
	letter-spacing: -0.005em;
}

.k-logo__opis {
	font-size: 0.625rem;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--k-morze);
}

.k-menu {
	margin-left: auto;
}

.k-menu__lista {
	display: flex;
	gap: 0.15rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.k-menu__lista a {
	position: relative;
	display: block;
	padding: 0.55rem 0.8rem;
	border-radius: 999px;
	color: var(--k-atrament);
	font-size: 0.975rem;
	font-weight: 500;
	text-decoration: none;
	white-space: nowrap;
}

.k-menu__lista a:hover {
	background: var(--k-piasek);
}

.k-menu__lista a[aria-current="page"] {
	color: var(--k-morze);
}

.k-menu__lista a[aria-current="page"]::after {
	content: "";
	position: absolute;
	left: 50%;
	bottom: 0.2rem;
	width: 0.3rem;
	height: 0.3rem;
	border-radius: 50%;
	background: currentColor;
	translate: -50% 0;
}

.k-naglowek__tel a {
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
	padding: 0.55rem 1rem;
	font-size: 0.9375rem;
	border-radius: 999px;
	background: var(--k-morze);
	color: var(--k-bialy);
	font-weight: 600;
	text-decoration: none;
	white-space: nowrap;
}

.k-naglowek__tel a:hover {
	background: var(--k-morze-ciemne);
	color: var(--k-bialy);
}

/* Phone menu: a native disclosure. */
.k-menu-mobilne {
	display: none;
	margin-left: auto;
}

.k-menu-mobilne summary {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.75rem;
	height: 2.75rem;
	padding: 0;
	border-radius: 999px;
	box-shadow: inset 0 0 0 1.5px var(--k-linia);
	color: var(--k-atrament);
	font-weight: 600;
	cursor: pointer;
	list-style: none;
}

.k-menu-mobilne summary::-webkit-details-marker { display: none; }

/* The icon alone; the word stays for screen readers. */
.k-menu-mobilne__etykieta {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

.k-menu-mobilne__ikona,
.k-menu-mobilne__ikona::before,
.k-menu-mobilne__ikona::after {
	display: block;
	width: 1.1rem;
	height: 2px;
	border-radius: 2px;
	background: currentColor;
	transition: rotate 0.2s ease, translate 0.2s ease, opacity 0.2s ease;
}

.k-menu-mobilne__ikona { position: relative; }
.k-menu-mobilne__ikona::before,
.k-menu-mobilne__ikona::after { content: ""; position: absolute; left: 0; }
.k-menu-mobilne__ikona::before { translate: 0 -6px; }
.k-menu-mobilne__ikona::after { translate: 0 6px; }
.k-menu-mobilne[open] .k-menu-mobilne__ikona { background: transparent; }
.k-menu-mobilne[open] .k-menu-mobilne__ikona::before { translate: 0 0; rotate: 45deg; }
.k-menu-mobilne[open] .k-menu-mobilne__ikona::after { translate: 0 0; rotate: -45deg; }

.k-menu-mobilne__panel {
	position: absolute;
	right: var(--k-margines);
	top: calc(100% + 0.5rem);
	width: min(17rem, calc(100% - 2 * var(--k-margines)));
	max-height: calc(100dvh - var(--k-naglowek-h) - 1.5rem);
	overflow-y: auto;
	padding: 0.5rem 1rem 1rem;
	border-radius: var(--k-r);
	background: var(--k-bialy);
	box-shadow: inset 0 0 0 1px var(--k-linia), var(--k-cien-duzy);
}

.k-menu-mobilne__lista {
	margin: 0 0 0.75rem;
	padding: 0;
	list-style: none;
}

.k-menu-mobilne__lista a {
	display: block;
	padding: 0.7rem 0.25rem;
	border-bottom: 1px solid var(--k-linia);
	color: var(--k-atrament);
	font-size: 1.0625rem;
	font-weight: 600;
	text-decoration: none;
}

.k-menu-mobilne__lista li:last-child a { border-bottom: 0; }
.k-menu-mobilne__panel .k-przycisk { width: 100%; }

/* The floating call button would sit on the open menu. */
html:has(.k-menu-mobilne[open]) .k-zadzwon-mobilnie { display: none; }

.k-menu-mobilne__lista a[aria-current="page"] { color: var(--k-morze); }

@media (max-width: 64rem) {
	.k-menu, .k-naglowek__tel { display: none; }
	.k-menu-mobilne { display: block; }
	:root { --k-naglowek-h: 4.5rem; }
	.k-logo__kafel { width: 3.1rem; height: 3.1rem; border-radius: 0.85rem; }
	.k-logo__kafel img { height: 2.45rem; }
	.k-logo__nazwa { font-size: 1.15rem; }
}

/* The descriptor stays at every width (the owner's call): on phones it is
   set smaller and tighter, and on the narrowest it wraps to two lines. */
@media (max-width: 34rem) {
	.k-logo__opis {
		font-size: 0.5625rem;
		letter-spacing: 0.09em;
		line-height: 1.3;
	}
}

@media (max-width: 26rem) {
	.k-naglowek__wnetrze { gap: 0.5rem; }
	.k-logo { flex: 0 1 auto; min-width: 0; gap: 0.6rem; }
	.k-logo__tekst { min-width: 0; }
	.k-logo__nazwa { font-size: 1.05rem; }
	.k-menu-mobilne { flex: none; }
}

/* A floating call button on phones — every page but an offer (its own bar). */
.k-zadzwon-mobilnie {
	display: none;
}

@media (max-width: 48rem) {
	.k-zadzwon-mobilnie {
		position: fixed;
		right: 1rem;
		bottom: 1rem;
		z-index: 40;
		display: inline-flex;
		align-items: center;
		gap: 0.5rem;
		padding: 0.7rem 1.05rem;
		border-radius: 999px;
		background: var(--k-morze);
		color: var(--k-bialy);
		font-weight: 700;
		text-decoration: none;
		box-shadow: var(--k-cien-duzy);
	}
	.k-zadzwon-mobilnie:hover { color: var(--k-bialy); }
}

/* ── sections ─────────────────────────────────────────────────────────── */

.k-sekcja {
	padding-block: clamp(3.5rem, 8vw, 6.5rem);
}

.k-sekcja--bez-gory { padding-top: 0; }
.k-sekcja--piasek { background: var(--k-piasek); }

.k-sekcja--ciemna {
	background: var(--k-atrament);
	color: rgb(255 255 255 / 82%);
}

.k-sekcja--ciemna h2,
.k-sekcja--ciemna h3 { color: var(--k-bialy); }
.k-sekcja--ciemna .k-etykieta { color: var(--k-morze-swiatlo); }
.k-sekcja--ciemna a { color: var(--k-morze-swiatlo); }
.k-sekcja--ciemna a:hover { color: var(--k-bialy); }

.k-sekcja__naglowek {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: end;
	gap: 1rem 2rem;
	margin-bottom: clamp(2rem, 4vw, 3rem);
}

.k-sekcja__naglowek h2 {
	margin: 0;
	max-width: 24ch;
}

.k-sekcja__lede {
	max-width: 40rem;
	margin: 1rem 0 0;
	font-size: 1.1875rem;
	line-height: 1.6;
}

/* ── hero ─────────────────────────────────────────────────────────────── */

.k-hero {
	position: relative;
	overflow: hidden;
	padding-block: clamp(2.5rem, 6vw, 5rem) clamp(3rem, 7vw, 6rem);
	background:
		radial-gradient(50rem 32rem at 100% 0%, rgb(0 108 112 / 12%), transparent 65%),
		var(--k-piasek);
}

.k-hero__siatka {
	display: grid;
	grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
	gap: clamp(2rem, 5vw, 4.5rem);
	align-items: center;
}

.k-hero h1 {
	margin: 0;
	font-size: clamp(2.75rem, 6vw, 4.75rem);
	letter-spacing: -0.025em;
}

.k-hero h1 em {
	font-style: normal;
	color: var(--k-morze);
}

.k-hero__lede {
	max-width: 36rem;
	margin: 1.25rem 0 0;
	font-size: clamp(1.0625rem, 1.6vw, 1.25rem);
	line-height: 1.6;
}

.k-hero__szukaj {
	margin-top: 2rem;
}

.k-hero__zaufanie {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem 1.1rem;
	margin: 1.5rem 0 0;
	padding: 0;
	list-style: none;
	font-size: 0.9375rem;
	color: var(--k-tekst);
}

.k-hero__zaufanie li {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
}

.k-hero__zaufanie li + li::before {
	content: "";
	width: 1px;
	height: 1rem;
	margin-right: 1.1rem;
	background: #CFC7B8;
}

.k-hero__zaufanie strong { color: var(--k-atrament); }

.k-hero__obraz {
	position: relative;
}

/* The logo's tilt, echoed once behind the photo. */
.k-hero__obraz::before {
	content: "";
	position: absolute;
	inset: 6% -8% -6% 8%;
	border-radius: 2rem;
	background: var(--k-morze);
	rotate: -6deg;
	opacity: 0.12;
}

/* 4:3 — the shape the CRM's photos are taken in (800 px wide at most).
   A portrait frame cropped half of each photo and enlarged the rest. */
.kk-hero-oferta {
	position: relative;
	display: block;
	overflow: hidden;
	aspect-ratio: 4 / 3;
	border-radius: 1.75rem;
	box-shadow: var(--k-cien-duzy);
	text-decoration: none;
}

.kk-hero-oferta img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: left top; /* the CRM's logo sits in that corner */
	transform-origin: left top;
	transition: scale 0.6s ease;
}

.kk-hero-oferta:hover img { scale: 1.03; }

.kk-hero-oferta__opis {
	position: absolute;
	left: 0.85rem;
	bottom: 0.85rem;
	max-width: calc(100% - 1.7rem);
	display: grid;
	gap: 0.05rem;
	padding: 0.6rem 0.9rem;
	border-radius: var(--k-r);
	background: rgb(255 255 255 / 90%);
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
	color: var(--k-atrament);
}

.kk-hero-oferta__etykieta {
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--k-morze);
}

.kk-hero-oferta__tytul { font-weight: 600; font-size: 0.9375rem; }

.kk-hero-oferta__cena {
	font-family: var(--k-szeryf);
	font-size: 1.1875rem;
	font-weight: 600;
	color: var(--k-morze);
}

.k-hero__tekst,
.k-hero__obraz { min-width: 0; }

@media (max-width: 56rem) {
	.k-hero__siatka { grid-template-columns: 1fr; }
	.k-hero__obraz { display: none; }
}

/* Narrow: the three tabs share the width instead of pushing past it. */
@media (max-width: 36rem) {
	.kk-szukaj--hero .kk-przelacznik {
		display: grid;
		grid-template-columns: repeat(3, auto);
		width: 100%;
	}
	.kk-szukaj--hero .kk-przelacznik__opcja { min-width: 0; }
	.kk-szukaj--hero .kk-przelacznik__opcja > span { justify-content: center; width: 100%; padding: 0.6rem 0.75rem; font-size: 0.9375rem; white-space: nowrap; }
	/* A third of a phone is too narrow for "Wszystkie 13": the counts go,
	   the list page and "Zobacz wszystkie" still give them. */
	.kk-szukaj--hero .kk-przelacznik .kk-licznik { display: none; }
}

/* ── search form ──────────────────────────────────────────────────────── */

.kk-szukaj {
	margin: 0;
}

.kk-szukaj--hero {
	padding: 1rem;
	border-radius: var(--k-r-duzy);
	background: var(--k-bialy);
	box-shadow: var(--k-cien-duzy);
}

/* Buy / rent: a segmented control made of radios — keyboard and no-JS ready. */
.kk-przelacznik {
	display: inline-flex;
	gap: 0.25rem;
	margin: 0 0 0.85rem;
	padding: 0.25rem;
	border: 0;
	border-radius: 999px;
	background: var(--k-piasek);
}

.kk-przelacznik__opcja input {
	position: absolute;
	opacity: 0;
	pointer-events: none;
}

.kk-przelacznik__opcja > span {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	padding: 0.5rem 1rem;
	border-radius: 999px;
	color: var(--k-tekst);
	font-weight: 600;
	font-size: 0.9375rem;
	cursor: pointer;
	transition: background-color 0.15s ease, color 0.15s ease;
}

/* Selected: a teal tint and ring, not a fill. A white pill on the sand track
   was too faint; a solid teal one looked like the submit button. */
.kk-przelacznik__opcja input:checked + span {
	background: color-mix(in oklab, var(--k-morze) 7%, var(--k-bialy));
	color: var(--k-morze-ciemne);
	box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--k-morze) 40%, transparent);
}

.kk-przelacznik__opcja input:not(:checked) + span:hover {
	background: rgb(255 255 255 / 70%);
	color: var(--k-atrament);
}

.kk-przelacznik__opcja input:focus-visible + span {
	outline: 3px solid var(--k-morze);
	outline-offset: 2px;
}

.kk-licznik {
	color: var(--k-tekst-slaby);
	font-size: 0.8125rem;
	font-weight: 600;
}

.kk-przelacznik__opcja input:checked + span .kk-licznik { color: var(--k-morze); }

/* In the filters' summary the count is a badge. */
.kk-filtry summary .kk-licznik {
	display: inline-grid;
	place-items: center;
	min-width: 1.4rem;
	height: 1.4rem;
	padding: 0 0.35rem;
	border-radius: 999px;
	background: var(--k-morze);
	color: var(--k-bialy);
	font-size: 0.75rem;
}

.kk-szukaj__pola {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0.85rem 0.75rem;
	align-items: end;
}

.kk-szukaj--hero .kk-szukaj__przycisk { width: 100%; }

.kk-pole {
	display: grid;
	gap: 0.35rem;
	min-width: 0;
	margin: 0;
}

.kk-pole__etykieta {
	font-size: 0.8125rem;
	font-weight: 600;
	color: var(--k-atrament);
}

.kk-pole input,
.kk-pole select,
.kk-para input,
.kk-z-jednostka input {
	box-sizing: border-box;
	width: 100%;
	min-height: 3rem;
	padding: 0.65rem 0.9rem;
	border: 1px solid var(--k-linia);
	border-radius: var(--k-r-maly);
	background: var(--k-bialy);
	color: var(--k-atrament);
	font: 400 1rem/1.3 var(--k-sans); /* 16px: iOS does not zoom */
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.kk-pole select {
	appearance: none;
	padding-right: 2.25rem;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23454B59' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 0.75rem center;
	background-size: 1rem;
}

.kk-pole input:hover,
.kk-pole select:hover,
.kk-para input:hover {
	border-color: #CFC7B8;
}

.kk-pole input:focus,
.kk-pole select:focus,
.kk-para input:focus,
.kk-z-jednostka input:focus {
	outline: none;
	border-color: var(--k-morze);
	box-shadow: 0 0 0 3px rgb(0 108 112 / 18%);
}

.kk-szukaj__przycisk {
	min-height: 3rem;
	padding: 0.7rem 1.35rem;
	border: 0;
	border-radius: var(--k-r-maly);
	background: var(--k-morze);
	color: var(--k-bialy);
	font: 700 1rem/1.2 var(--k-sans);
	cursor: pointer;
	white-space: nowrap;
}

.kk-szukaj__przycisk:hover { background: var(--k-morze-ciemne); }

@media (max-width: 30rem) {
	.kk-szukaj--hero .kk-szukaj__pola { grid-template-columns: 1fr; }
}

/* The list page's form: one column in the sidebar. */
.kk-szukaj--lista .kk-szukaj__pola {
	grid-template-columns: 1fr;
	gap: 1rem;
}

/* Sidebar: three tabs sized by their labels, the spare room shared out, so
   "Wszystkie" is not squeezed into a third. */
.kk-szukaj--lista .kk-przelacznik {
	display: grid;
	grid-template-columns: repeat(3, auto);
	width: 100%;
	margin-bottom: 1.25rem;
}

.kk-szukaj--lista .kk-przelacznik__opcja { min-width: 0; }

.kk-szukaj--lista .kk-przelacznik__opcja > span {
	justify-content: center;
	gap: 0.3rem;
	width: 100%;
	padding: 0.5rem 0.55rem;
	font-size: 0.875rem;
	white-space: nowrap;
}

/* Counts are in the type list and above the results; the tabs stay short. */
.kk-szukaj--lista .kk-licznik { display: none; }

.kk-oferty .kk-siatka {
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 16rem), 1fr));
}

.kk-para {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0.5rem;
}

/* ── offer cards ──────────────────────────────────────────────────────── */

.kk-siatka {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 19rem), 1fr));
	gap: clamp(1rem, 2vw, 1.5rem);
}

.kk-karta {
	position: relative;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	border-radius: var(--k-r-duzy);
	background: var(--k-bialy);
	box-shadow: inset 0 0 0 1px var(--k-linia);
	transition: box-shadow 0.2s ease, translate 0.2s ease;
}

.kk-karta:hover {
	box-shadow: inset 0 0 0 1px var(--k-linia), var(--k-cien-duzy);
	translate: 0 -3px;
}

.kk-karta:focus-within {
	box-shadow: 0 0 0 3px var(--k-morze);
}

.kk-karta__foto {
	position: relative;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	background: var(--k-piasek);
}

.kk-karta__foto img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: left top; /* the CRM's logo sits in that corner */
	transform-origin: left top;
	transition: scale 0.5s ease;
}

.kk-karta:hover .kk-karta__foto img { scale: 1.04; }

.kk-karta__brak-foto {
	display: grid;
	place-items: center;
	height: 100%;
	color: var(--k-tekst-slaby);
	font-size: 0.9375rem;
}

.kk-karta__znacznik,
.kk-znacznik {
	display: inline-block;
	padding: 0.3rem 0.7rem;
	border-radius: 999px;
	background: var(--k-bialy);
	color: var(--k-morze-ciemne);
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.04em;
}

/* Bottom-left: the CRM stamps the agency watermark in the photo's top-left. */
.kk-karta__znacznik {
	position: absolute;
	bottom: 0.85rem;
	left: 0.85rem;
	box-shadow: var(--k-cien);
}

/* Before the rental modifier: same specificity, so order decides. */
.kk-znacznik { background: var(--k-morze-jasne); }

.kk-karta__znacznik--najem,
.kk-znacznik--najem {
	background: var(--k-atrament);
	color: var(--k-bialy);
}

.kk-karta__licznik {
	position: absolute;
	right: 0.85rem;
	bottom: 0.85rem;
	display: inline-flex;
	align-items: center;
	gap: 0.3rem;
	padding: 0.25rem 0.6rem;
	border-radius: 999px;
	background: rgb(31 36 48 / 70%);
	color: var(--k-bialy);
	font-size: 0.8125rem;
	font-weight: 600;
}

.kk-karta__licznik .kk-ikona { width: 1rem; height: 1rem; }

.kk-karta__tresc {
	display: flex;
	flex-direction: column;
	flex: 1;
	padding: 1.15rem 1.25rem 1.25rem;
}

.kk-karta__rodzaj {
	margin: 0 0 0.3rem;
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--k-morze);
}

.kk-karta__tytul {
	margin: 0;
	font-size: 1.25rem;
	line-height: 1.25;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* One link, the whole card clickable: the title's link covers the card. */
.kk-karta__tytul a {
	color: inherit;
	text-decoration: none;
}

.kk-karta__tytul a::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
}

.kk-karta__tytul a:focus-visible { outline: none; }

.kk-karta__miejsce {
	display: flex;
	align-items: center;
	gap: 0.35rem;
	margin: 0.45rem 0 0;
	font-size: 0.9375rem;
	color: var(--k-tekst-slaby);
}

.kk-karta__miejsce .kk-ikona { width: 1rem; height: 1rem; }

.kk-karta__fakty {
	display: flex;
	flex-wrap: wrap;
	gap: 0.35rem 1rem;
	margin: 0.85rem 0 0;
	padding: 0;
	list-style: none;
	font-size: 0.9375rem;
	color: var(--k-atrament);
}

.kk-karta__fakty li {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
}

.kk-karta__fakty .kk-ikona {
	width: 1.05rem;
	height: 1.05rem;
	color: var(--k-morze);
}

.kk-karta__cena {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0.25rem 0.75rem;
	margin: auto 0 0;
	padding-top: 1rem;
}

.kk-karta__fakty + .kk-karta__cena {
	margin-top: 1rem;
	border-top: 1px solid var(--k-linia);
}

.kk-karta__cena strong {
	font-family: var(--k-szeryf);
	font-size: 1.5rem;
	font-weight: 600;
	color: var(--k-atrament);
	letter-spacing: -0.01em;
}

.kk-karta__cena span {
	font-size: 0.875rem;
	color: var(--k-tekst-slaby);
}

/* ── services, experience ─────────────────────────────────────────────── */

.k-uslugi {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
	gap: 1rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.k-usluga {
	position: relative;
	display: flex;
	flex-direction: column;
	padding: 1.75rem;
	border-radius: var(--k-r-duzy);
	background: var(--k-bialy);
	transition: box-shadow 0.2s ease, translate 0.2s ease;
}

.k-usluga:hover {
	box-shadow: var(--k-cien-duzy);
	translate: 0 -3px;
}

.k-usluga__nr {
	font-family: var(--k-szeryf);
	font-size: 0.9375rem;
	font-weight: 600;
	color: var(--k-morze);
}

.k-usluga h3 {
	margin: 1.25rem 0 0.6rem;
}

.k-usluga h3 a {
	color: var(--k-atrament);
	text-decoration: none;
}

.k-usluga h3 a::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
}

.k-usluga h3 a::before {
	content: "→";
	position: absolute;
	right: 1.75rem;
	top: 1.5rem;
	color: var(--k-morze);
	font-family: var(--k-sans);
	transition: translate 0.2s ease;
}

.k-usluga:hover h3 a::before { translate: 0.25rem 0; }

.k-usluga p {
	margin: 0;
	font-size: 0.975rem;
}

.k-doswiadczenie__siatka {
	display: grid;
	grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
	gap: clamp(2rem, 6vw, 5rem);
	align-items: center;
}

.k-doswiadczenie__liczba {
	position: relative;
	display: grid;
	place-items: center;
	aspect-ratio: 1;
	max-width: 26rem;
}

/* The logo's tilted square, as the frame for the years. */
.k-doswiadczenie__liczba::before {
	content: "";
	position: absolute;
	inset: 8%;
	border-radius: 2.25rem;
	background: var(--k-morze);
	rotate: -12deg;
}

.k-doswiadczenie__liczba span {
	position: relative;
	font-family: var(--k-szeryf);
	font-size: clamp(3.5rem, 9vw, 6.5rem);
	font-weight: 600;
	line-height: 1;
	color: var(--k-bialy);
	text-align: center;
	letter-spacing: -0.03em;
	max-width: 5ch;
}

.k-doswiadczenie h2 { margin: 0; }

.k-doswiadczenie__czlonkostwa {
	margin-top: 2rem;
}

@media (max-width: 56rem) {
	.k-doswiadczenie__siatka { grid-template-columns: 1fr; }
	.k-doswiadczenie__liczba { max-width: 15rem; }
}

.k-liczby {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 1px;
	margin-block: 2rem 0;
	padding: 0;
	list-style: none;
	border-radius: var(--k-r);
	overflow: hidden;
	background: var(--k-linia);
	box-shadow: 0 0 0 1px var(--k-linia);
}

.k-liczby li {
	display: grid;
	align-content: start;
	gap: 0.3rem;
	margin: 0;
	padding: 1.25rem 1.35rem;
	background: var(--k-bialy);
}

.k-liczby strong {
	font-family: var(--k-szeryf);
	font-size: clamp(1.5rem, 2.6vw, 2rem);
	font-weight: 600;
	line-height: 1.1;
	color: var(--k-morze);
}

.k-liczby span {
	font-size: 0.9375rem;
	line-height: 1.45;
}

/* ── ratings and reviews ──────────────────────────────────────────────── */

.k-gwiazdki {
	display: inline-flex;
	gap: 0.1rem;
	color: var(--k-zloto);
	vertical-align: middle;
}

.k-ocena-krotka {
	display: inline-flex;
	align-items: center;
	gap: 0.3rem;
	color: inherit;
	font-weight: 700;
	text-decoration: none;
}

.k-ocena-krotka span[aria-hidden] { color: var(--k-zloto); }
.k-ocena-krotka:hover { text-decoration: underline; color: inherit; }

.k-ocena {
	display: inline-grid;
	grid-template-columns: auto 1fr;
	grid-template-areas: "liczba gwiazdki" "liczba opis";
	column-gap: 0.85rem;
	align-items: center;
	color: inherit;
	text-decoration: none;
}

.k-ocena__liczba {
	grid-area: liczba;
	font-family: var(--k-szeryf);
	font-size: 3.25rem;
	font-weight: 600;
	line-height: 1;
	color: var(--k-atrament);
}

.k-ocena .k-gwiazdki { grid-area: gwiazdki; align-self: end; }

.k-ocena__opis {
	grid-area: opis;
	align-self: start;
	font-size: 0.9375rem;
	text-decoration: underline;
	text-decoration-color: rgb(127 127 127 / 40%);
	text-underline-offset: 0.2em;
}

.k-sekcja--ciemna .k-ocena__liczba { color: var(--k-bialy); }
.k-sekcja--ciemna .k-ocena { color: rgb(255 255 255 / 80%); }

.k-opinie__naglowek {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 1.25rem 2.5rem;
	margin-bottom: 2rem;
	padding-bottom: 2rem;
	border-bottom: 1px solid rgb(127 127 127 / 25%);
}

.k-opinie__linki {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem 1.5rem;
	margin: 0;
	font-weight: 600;
}

.k-opinie__lista {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr));
	gap: 1.25rem;
}

.k-opinia {
	display: flex;
	flex-direction: column;
	gap: 1rem;
	margin: 0;
	padding: clamp(1.5rem, 3vw, 2rem);
	border-radius: var(--k-r-duzy);
	background: var(--k-piasek);
}

.k-sekcja--ciemna .k-opinia {
	background: rgb(255 255 255 / 5%);
	box-shadow: inset 0 0 0 1px rgb(255 255 255 / 9%);
	color: rgb(255 255 255 / 88%);
}

.k-opinia blockquote {
	flex: 1;
	margin: 0;
}

.k-opinia blockquote p {
	margin: 0;
	font-family: var(--k-szeryf);
	font-size: 1.125rem;
	line-height: 1.55;
}

.k-opinia blockquote p::before { content: "„"; }
.k-opinia blockquote p::after { content: "”"; }

.k-opinia figcaption {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	font-weight: 600;
}

.k-monogram {
	position: relative;
	isolation: isolate;
	display: inline-grid;
	place-items: center;
	flex: none;
	width: 2.5rem;
	height: 2.5rem;
	color: var(--k-morze-ciemne);
	font-size: 0.8125rem;
	font-weight: 700;
	letter-spacing: 0.04em;
}

/* The logo's tilted square behind upright initials. */
.k-monogram::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	border-radius: 0.75rem;
	background: var(--k-morze-jasne);
	rotate: -12deg;
}

.k-sekcja--ciemna .k-monogram,
.k-tresc .k-opinie .k-monogram { color: var(--k-morze-swiatlo); }

.k-sekcja--ciemna .k-monogram::before,
.k-tresc .k-opinie .k-monogram::before { background: rgb(143 214 207 / 16%); }

.k-monogram--duzy {
	width: 3.5rem;
	height: 3.5rem;
	color: var(--k-bialy);
	font-size: 1.0625rem;
}

.k-monogram--duzy::before {
	border-radius: 1rem;
	background: var(--k-morze);
}

/* ── team ─────────────────────────────────────────────────────────────── */

.k-zespol {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
	gap: 1.25rem;
}

.k-osoba {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	padding: clamp(1.5rem, 3vw, 2rem);
	border-radius: var(--k-r-duzy);
	background: var(--k-bialy);
	box-shadow: inset 0 0 0 1px var(--k-linia);
}

.k-osoba__imie {
	margin: 1.25rem 0 0.2rem;
	font-size: 1.5rem;
}

.k-osoba__rola { margin: 0 0 1.25rem; }
.k-osoba__licencja + .k-osoba__kontakt, .k-osoba__rola + .k-osoba__kontakt { margin-top: auto; }

.k-osoba__licencja {
	display: inline-block;
	margin: -0.5rem 0 1.25rem;
	padding: 0.25rem 0.7rem;
	border-radius: 999px;
	background: var(--k-morze-jasne);
	color: var(--k-morze-ciemne);
	font-size: 0.8125rem;
	font-weight: 700;
}

.k-osoba__kontakt {
	display: grid;
	gap: 0.3rem;
	align-self: stretch;
	margin: auto 0 0;
	padding: 1.25rem 0 0;
	border-top: 1px solid var(--k-linia);
	list-style: none;
}

.k-osoba__kontakt a {
	font-weight: 600;
	text-decoration: none;
}

.k-osoba__kontakt a:hover { text-decoration: underline; }

/* ── call to action ───────────────────────────────────────────────────── */

.k-cta {
	position: relative;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;
	gap: 1.5rem 3rem;
	overflow: hidden;
	padding: clamp(2rem, 5vw, 3.5rem);
	border-radius: 2rem;
	background: linear-gradient(135deg, var(--k-morze) 0%, var(--k-morze-ciemne) 100%);
	color: rgb(255 255 255 / 88%);
}

.k-cta::after {
	content: "";
	position: absolute;
	width: 22rem;
	height: 22rem;
	right: -6rem;
	top: -8rem;
	border-radius: 3rem;
	border: 2px solid rgb(255 255 255 / 12%);
	rotate: -12deg;
	pointer-events: none;
}

.k-cta > * { position: relative; z-index: 1; }

.k-cta__tytul {
	margin: 0 0 0.5rem;
	max-width: 28ch;
	font-family: var(--k-szeryf);
	font-size: clamp(1.75rem, 3.4vw, 2.5rem);
	font-weight: 600;
	line-height: 1.12;
	color: var(--k-bialy);
}

.k-cta p { margin: 0; max-width: 34rem; }

.k-cta__akcje {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
}

.k-cta .k-przycisk--tel {
	background: var(--k-bialy);
	color: var(--k-morze-ciemne);
}

.k-cta .k-przycisk--tel:hover { background: var(--k-morze-jasne); color: var(--k-morze-ciemne); }

.k-cta .k-przycisk--jasny {
	background: transparent;
	color: var(--k-bialy);
	box-shadow: inset 0 0 0 1.5px rgb(255 255 255 / 60%);
}

.k-cta .k-przycisk--jasny:hover { background: rgb(255 255 255 / 12%); }

/* ── contact ──────────────────────────────────────────────────────────── */

.k-kontakt {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
	gap: 1.25rem;
}

.k-kontakt__blok {
	padding: clamp(1.5rem, 3vw, 2rem);
	border-radius: var(--k-r-duzy);
	background: var(--k-piasek);
}

.k-kontakt__blok h3 {
	margin: 0 0 0.75rem;
	font-size: 1.375rem;
}

.k-kontakt address {
	margin-bottom: 1rem;
	font-style: normal;
	font-size: 1.125rem;
	color: var(--k-atrament);
}

.k-kontakt ul {
	display: grid;
	gap: 0.4rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.k-kontakt li {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	column-gap: 0.75rem;
	white-space: nowrap;
}

.k-kontakt li span {
	flex: 0 0 6.5rem;
	color: var(--k-tekst-slaby);
}

.k-kontakt li a { font-weight: 600; }

/* The address opens the map: the text's own colour, a quiet underline. */
.k-adres-link {
	color: inherit;
	text-decoration: underline;
	text-decoration-color: color-mix(in oklab, currentColor 35%, transparent);
	text-decoration-thickness: 1px;
	text-underline-offset: 0.2em;
}

.k-adres-link:hover {
	color: inherit;
	text-decoration-color: currentColor;
}

/* ── memberships ──────────────────────────────────────────────────────── */

.k-czlonkostwa {
	display: flex;
	flex-wrap: wrap;
	gap: 0.6rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.k-czlonkostwa a {
	display: grid;
	place-items: center;
	height: 3.25rem;
	padding: 0.4rem 0.75rem;
	border-radius: var(--k-r-maly);
	background: var(--k-bialy);
	box-shadow: inset 0 0 0 1px var(--k-linia);
}

/* A fixed height: "max-height + width:auto" inside a shrink-to-fit box
   collapses both to zero. */
.k-czlonkostwa img {
	display: block;
	height: 2.25rem;
	width: auto;
	max-width: none;
}

/* ── inner pages ──────────────────────────────────────────────────────── */

.k-podstrona__naglowek {
	padding-block: clamp(2rem, 5vw, 3.5rem) clamp(2.25rem, 5vw, 3.75rem);
	background:
		radial-gradient(40rem 20rem at 100% 0%, rgb(0 108 112 / 10%), transparent 65%),
		var(--k-piasek);
}

.k-podstrona__tytul {
	margin: 0.75rem 0 0;
	font-size: clamp(2.25rem, 5vw, 3.5rem);
}

.k-podstrona__wstep {
	max-width: 44rem;
	margin: 1rem 0 0;
	font-size: clamp(1.0625rem, 1.6vw, 1.25rem);
	color: var(--k-tekst);
}

.k-tresc {
	padding-block: clamp(2.5rem, 6vw, 4.5rem) clamp(3.5rem, 8vw, 6rem);
}

/* Text keeps a reading width; shortcode output and wide blocks use the grid. */
.k-tresc > * {
	width: min(100% - 2 * var(--k-margines), var(--k-szerokosc));
	margin-inline: auto;
}

/* Reading width: WordPress text blocks only — never a component that happens
   to be a <ul> (facts, licences). */
.k-tresc > :where(p, h2, h3, h4, blockquote, ul.wp-block-list, ol.wp-block-list, .wp-block-heading) {
	width: min(100% - 2 * var(--k-margines), 46rem);
	margin-left: max(var(--k-margines), (100% - var(--k-szerokosc)) / 2);
}

.k-tresc > :where(p, .wp-block-list) { margin-block: 0 1.1rem; }
.k-tresc > :where(h2) { margin-block: 3rem 1rem; }
.k-tresc > :where(h3) { margin-block: 2rem 0.75rem; }
.k-tresc > * + :where(.k-zespol, .k-opinie, .k-kontakt, .k-cta, .k-liczby, .k-certyfikaty, .kk-kalk) { margin-top: 3rem; }
.k-tresc .wp-block-list li { margin-bottom: 0.4rem; }

.is-lede {
	font-size: 1.25rem;
	color: var(--k-atrament);
}

.k-tresc .k-liczby { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.k-tresc .k-liczby strong { font-size: clamp(1.4rem, 2.1vw, 1.85rem); white-space: nowrap; }
@media (max-width: 52rem) { .k-tresc .k-liczby { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.k-tresc .k-opinie { padding: clamp(1.5rem, 4vw, 2.5rem); border-radius: 2rem; background: var(--k-atrament); color: rgb(255 255 255 / 82%); }
.k-tresc .k-opinie .k-opinia { background: rgb(255 255 255 / 5%); box-shadow: inset 0 0 0 1px rgb(255 255 255 / 9%); color: rgb(255 255 255 / 88%); }
.k-tresc .k-opinie .k-ocena__liczba { color: var(--k-bialy); }
.k-tresc .k-opinie .k-ocena { color: rgb(255 255 255 / 80%); }
.k-tresc .k-opinie a { color: var(--k-morze-swiatlo); }

.k-certyfikaty {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(12rem, 15rem));
	gap: 1.5rem;
	margin-block: 0;
	padding: 0;
	list-style: none;
}

.k-certyfikat { margin: 0; }

/* A scan shown as a document: paper, a mat, a soft lift. */
.k-certyfikat__skan {
	display: block;
	padding: 0.75rem;
	border-radius: var(--k-r);
	background: linear-gradient(160deg in oklab, #FFFFFF, var(--k-piasek));
	box-shadow: inset 0 0 0 1px var(--k-linia), var(--k-cien);
	transition: translate 0.2s ease, box-shadow 0.2s ease;
}

.k-certyfikat__skan:hover {
	translate: 0 -3px;
	box-shadow: inset 0 0 0 1px var(--k-linia), var(--k-cien-duzy);
}

.k-certyfikat__skan img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 500 / 725;
	border-radius: 0.35rem;
	box-shadow: 0 1px 3px rgb(31 36 48 / 12%);
}

.k-certyfikat figcaption {
	display: grid;
	gap: 0.1rem;
	margin-top: 0.85rem;
	line-height: 1.35;
}

.k-certyfikat figcaption strong {
	color: var(--k-atrament);
	font-size: 1rem;
}

.k-certyfikat figcaption span {
	color: var(--k-tekst-slaby);
	font-size: 0.875rem;
}

/* ── breadcrumbs ──────────────────────────────────────────────────────── */

.kk-okruszki ol {
	display: flex;
	flex-wrap: wrap;
	gap: 0.25rem 0.5rem;
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: 0.875rem;
	color: var(--k-tekst-slaby);
}

.kk-okruszki li + li::before {
	content: "/";
	margin-right: 0.5rem;
	color: #B9B1A2;
}

.kk-okruszki a {
	color: var(--k-tekst);
	text-decoration: none;
}

.kk-okruszki a:hover { color: var(--k-morze); text-decoration: underline; }
.kk-okruszki [aria-current] { color: var(--k-atrament); }

/* ── offers list ──────────────────────────────────────────────────────── */

.kk-oferty {
	display: grid;
	grid-template-columns: 18.5rem minmax(0, 1fr);
	gap: clamp(1.5rem, 3vw, 2.5rem);
	align-items: start;
}

.kk-oferty__filtry {
	position: sticky;
	top: calc(var(--k-naglowek-h) + 1rem);
}

.kk-filtry {
	padding: 1.25rem;
	border-radius: var(--k-r-duzy);
	background: var(--k-piasek);
}

.kk-filtry summary {
	display: none;
	align-items: center;
	gap: 0.5rem;
	font-weight: 700;
	color: var(--k-atrament);
	cursor: pointer;
	list-style: none;
}

.kk-filtry summary::-webkit-details-marker { display: none; }
.kk-filtry .kk-szukaj__przycisk { width: 100%; }

.kk-oferty__pasek {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.75rem 1.25rem;
	margin-bottom: 1.5rem;
}

.kk-oferty__liczba {
	margin: 0;
	font-size: 1.0625rem;
}

.kk-oferty__liczba strong {
	font-family: var(--k-szeryf);
	font-size: 1.5rem;
	color: var(--k-atrament);
}

.kk-chipy {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.kk-chipy a {
	display: inline-flex;
	align-items: center;
	gap: 0.3rem;
	padding: 0.35rem 0.5rem 0.35rem 0.85rem;
	border-radius: 999px;
	background: var(--k-morze-jasne);
	color: var(--k-morze-ciemne);
	font-size: 0.875rem;
	font-weight: 600;
	text-decoration: none;
}

.kk-chipy a .kk-ikona { width: 0.95rem; height: 0.95rem; }
.kk-chipy a:hover { background: var(--k-morze); color: var(--k-bialy); }

.kk-chipy .kk-chipy__wyczysc {
	background: none;
	color: var(--k-tekst);
	text-decoration: underline;
	padding-right: 0.5rem;
}

.kk-chipy .kk-chipy__wyczysc:hover { background: none; color: var(--k-morze); }

.kk-strony ul {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.4rem;
	margin: 2.5rem 0 0;
	padding: 0;
	list-style: none;
}

.kk-strony a,
.kk-strony span {
	display: grid;
	place-items: center;
	min-width: 2.75rem;
	height: 2.75rem;
	border-radius: 999px;
	font-weight: 600;
	text-decoration: none;
}

.kk-strony a { box-shadow: inset 0 0 0 1px var(--k-linia); color: var(--k-atrament); }
.kk-strony a:hover { background: var(--k-piasek); }
.kk-strony [aria-current] { background: var(--k-atrament); color: var(--k-bialy); }

.kk-pusto {
	padding: clamp(1.75rem, 4vw, 2.5rem);
	border-radius: var(--k-r-duzy);
	background: var(--k-piasek);
}

.kk-pusto__tytul {
	margin: 0 0 0.5rem;
	font-family: var(--k-szeryf);
	font-size: 1.625rem;
	font-weight: 600;
	color: var(--k-atrament);
}

.kk-pusto p { max-width: 40rem; }

@media (max-width: 60rem) {
	.kk-oferty { grid-template-columns: 1fr; }
	.kk-oferty__filtry { position: static; }
	.kk-filtry { padding: 0; background: none; }
	.kk-filtry summary {
		display: inline-flex;
		padding: 0.7rem 1.1rem;
		border-radius: 999px;
		box-shadow: inset 0 0 0 1.5px var(--k-linia);
	}
	.kk-filtry[open] summary { margin-bottom: 1rem; }
	.kk-filtry[open] .kk-szukaj { padding: 1.25rem; border-radius: var(--k-r-duzy); background: var(--k-piasek); }
}

/* ── one offer ────────────────────────────────────────────────────────── */

.k-podstrona--oferta { padding-block: 1.5rem clamp(4rem, 9vw, 6.5rem); }

.kk-oferta__naglowek {
	margin: 1.25rem 0 1.5rem;
}

.kk-oferta__rodzaj {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem 0.75rem;
	margin: 0 0 0.75rem;
	font-size: 0.9375rem;
	color: var(--k-tekst-slaby);
}

.kk-oferta__naglowek h1 {
	margin: 0;
	max-width: 30ch;
	font-size: clamp(2rem, 4.2vw, 3.25rem);
}

.kk-oferta__miejsce {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.4rem 0.75rem;
	margin: 0.85rem 0 0;
	font-size: 1.0625rem;
	color: var(--k-atrament);
}

.kk-oferta__miejsce .kk-ikona { color: var(--k-morze); }
.kk-oferta__miejsce a { font-weight: 600; font-size: 0.9375rem; }

/* Gallery: one large + four small on wide screens; a swipe strip on phones. */
.kk-galeria {
	position: relative;
	margin-bottom: clamp(2rem, 4vw, 3rem);
}

.kk-galeria__lista {
	display: grid;
	grid-template-columns: 2fr 1fr 1fr;
	grid-auto-rows: clamp(9rem, 16vw, 15rem);
	gap: 0.5rem;
	margin: 0;
	padding: 0;
	list-style: none;
	border-radius: var(--k-r-duzy);
	overflow: hidden;
}

.kk-galeria__el:first-child { grid-row: span 2; }

.kk-galeria__el a,
.kk-galeria__el img {
	display: block;
	width: 100%;
	height: 100%;
}

.kk-galeria__el img {
	object-fit: cover;
	object-position: left top; /* the CRM's logo sits in that corner */
	transition: filter 0.2s ease;
}

.kk-galeria__el a:hover img { filter: brightness(0.92); }

/* With JavaScript the rest opens in the viewer; without it, all stay listed. */
.js .kk-galeria__el:nth-child(n + 6) { display: none; }

.kk-galeria__wszystkie {
	position: absolute;
	right: 1rem;
	bottom: 1rem;
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.65rem 1rem;
	border: 0;
	border-radius: 999px;
	background: var(--k-bialy);
	color: var(--k-atrament);
	font: 600 0.9375rem/1.2 var(--k-sans);
	box-shadow: var(--k-cien-duzy);
	cursor: pointer;
}

.kk-galeria__wszystkie:hover { background: var(--k-piasek); }

.kk-galeria--pusta {
	padding: 3rem 2rem;
	border-radius: var(--k-r-duzy);
	background: var(--k-piasek);
	text-align: center;
}

@media (max-width: 48rem) {
	.kk-galeria { margin-inline: calc(-1 * var(--k-margines)); }
	.kk-galeria__lista {
		display: flex;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		border-radius: 0;
		scrollbar-width: none;
	}
	.kk-galeria__el,
	.js .kk-galeria__el:nth-child(n + 6) {
		display: block;
		flex: 0 0 88%;
		aspect-ratio: 4 / 3;
		scroll-snap-align: center;
	}
	.kk-galeria__el:first-child { flex-basis: 100%; }
	.kk-galeria__wszystkie { right: var(--k-margines); }
}

.kk-oferta__uklad {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 23rem;
	gap: clamp(2rem, 5vw, 4rem);
	align-items: start;
}

.kk-oferta__boczna {
	position: sticky;
	top: calc(var(--k-naglowek-h) + 1.25rem);
}

.kk-fakty {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(8.5rem, 1fr));
	gap: 1px;
	margin: 0 0 2.5rem;
	padding: 0;
	list-style: none;
	border-radius: var(--k-r-duzy);
	overflow: hidden;
	background: var(--k-linia);
	box-shadow: 0 0 0 1px var(--k-linia);
}

.kk-fakty li {
	display: grid;
	gap: 0.2rem;
	padding: 1.1rem 1.25rem;
	background: var(--k-bialy);
}

.kk-fakty .kk-ikona {
	width: 1.4rem;
	height: 1.4rem;
	margin-bottom: 0.35rem;
	color: var(--k-morze);
}

.kk-fakty__wartosc {
	font-family: var(--k-szeryf);
	font-size: 1.375rem;
	font-weight: 600;
	color: var(--k-atrament);
	line-height: 1.2;
}

.kk-fakty__etykieta {
	font-size: 0.875rem;
	color: var(--k-tekst-slaby);
}

.kk-oferta__sekcja {
	padding-block: 2rem;
	border-top: 1px solid var(--k-linia);
}

.kk-oferta__sekcja h2 {
	margin: 0 0 1.25rem;
	font-size: 1.75rem;
}

.kk-opis {
	max-width: 44rem;
	font-size: 1.0625rem;
}


.kk-parametry {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
	gap: 1.5rem 2.5rem;
}

.kk-parametry__grupa h3 {
	margin: 0 0 0.5rem;
	font-family: var(--k-sans);
	font-size: 0.78rem;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--k-morze);
}

.kk-parametry dl { margin: 0; }

.kk-parametry dl > div {
	display: flex;
	justify-content: space-between;
	gap: 1rem;
	padding: 0.6rem 0;
	border-bottom: 1px dashed var(--k-linia);
}

.kk-parametry dt { color: var(--k-tekst-slaby); }

.kk-parametry dd {
	margin: 0;
	color: var(--k-atrament);
	font-weight: 600;
	text-align: right;
}

.kk-oferta__lokalizacja p { margin: 0 0 1rem; }

.kk-cena-karta {
	display: grid;
	gap: 0.75rem;
	padding: 1.5rem;
	border-radius: var(--k-r-duzy);
	background: var(--k-bialy);
	box-shadow: inset 0 0 0 1px var(--k-linia), var(--k-cien-duzy);
}

.kk-cena-karta__cena {
	margin: 0;
	font-family: var(--k-szeryf);
	font-size: clamp(2rem, 3vw, 2.5rem);
	font-weight: 600;
	line-height: 1.1;
	color: var(--k-atrament);
	letter-spacing: -0.015em;
}

.kk-cena-karta__dodatkowa {
	margin: -0.35rem 0 0;
	color: var(--k-tekst-slaby);
}

.kk-opiekun {
	display: flex;
	align-items: center;
	gap: 0.9rem;
	margin: 0.5rem 0 0.25rem;
	padding-top: 1.25rem;
	border-top: 1px solid var(--k-linia);
}

.kk-opiekun p { margin: 0; }
.kk-opiekun__imie { font-weight: 700; color: var(--k-atrament); }
.kk-opiekun__rola { font-size: 0.875rem; color: var(--k-tekst-slaby); line-height: 1.4; }

.kk-cena-karta .k-przycisk .kk-ikona { width: 1.05rem; height: 1.05rem; }
.kk-cena-karta .k-przycisk--pelny + .k-przycisk--pelny { margin-top: -0.25rem; }

.kk-cena-karta__dol {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 0.5rem 1rem;
	padding-top: 0.5rem;
}

.kk-cena-karta__nr {
	margin: 0;
	font-size: 0.8125rem;
	color: var(--k-tekst-slaby);
}

.kk-podobne {
	margin-top: clamp(3rem, 6vw, 5rem);
	padding-top: clamp(2.5rem, 5vw, 3.5rem);
	border-top: 1px solid var(--k-linia);
}

.kk-podobne h2 { margin: 0; }

/* Phones: price and a call button always at hand. */
.kk-pasek-mobilny {
	display: none;
}

@media (max-width: 60rem) {
	.kk-oferta__uklad { grid-template-columns: 1fr; }
	.kk-oferta__boczna { position: static; order: -1; }
}

@media (max-width: 48rem) {
	.kk-pasek-mobilny {
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 40;
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 1rem;
		padding: 0.75rem var(--k-margines) calc(0.75rem + env(safe-area-inset-bottom));
		background: rgb(255 255 255 / 96%);
		-webkit-backdrop-filter: blur(10px);
		backdrop-filter: blur(10px);
		box-shadow: 0 -8px 24px -12px rgb(31 36 48 / 25%);
	}
	.kk-pasek-mobilny div { display: grid; line-height: 1.2; }
	.kk-pasek-mobilny strong { font-family: var(--k-szeryf); font-size: 1.25rem; color: var(--k-atrament); }
	.kk-pasek-mobilny span { font-size: 0.8125rem; color: var(--k-tekst-slaby); }
	.k-podstrona--oferta { padding-bottom: 8.5rem; }
}

.kk-nieaktualna {
	padding-block: clamp(1.5rem, 4vw, 3rem) clamp(3rem, 6vw, 5rem);
}

.kk-nieaktualna h1 { margin: 0; }
.kk-nieaktualna__lede { max-width: 40rem; font-size: 1.1875rem; }
.kk-sekcja-tytul { margin: 3.5rem 0 1.5rem; }

/* Photo viewer (built by theme.js). */
.kk-lightbox {
	position: fixed;
	inset: 0;
	width: 100%;
	max-width: none;
	height: 100%;
	max-height: none;
	margin: 0;
	padding: 0;
	border: 0;
	background: rgb(15 18 25 / 96%);
	color: var(--k-bialy);
}

.kk-lightbox::backdrop { background: rgb(15 18 25 / 96%); }
html:has(.kk-lightbox[open]) { overflow: hidden; }

.kk-lightbox__lista {
	display: flex;
	height: 100%;
	margin: 0;
	padding: 0;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	overscroll-behavior: contain;
	list-style: none;
	scrollbar-width: none;
}

.kk-lightbox__lista li {
	flex: 0 0 100%;
	display: grid;
	place-items: center;
	padding: 4rem 1rem;
	box-sizing: border-box;
	scroll-snap-align: center;
}

/* Natural size at most: the CRM sends 800 px photos, and blurry is worse
   than smaller. */
.kk-lightbox__lista img {
	width: auto;
	height: auto;
	max-width: min(100%, 800px);
	max-height: 100%;
	object-fit: contain;
	border-radius: var(--k-r-maly);
}

.kk-lightbox__przycisk {
	position: fixed;
	display: grid;
	place-items: center;
	width: 3rem;
	height: 3rem;
	border: 0;
	border-radius: 50%;
	background: rgb(255 255 255 / 12%);
	color: var(--k-bialy);
	cursor: pointer;
}

.kk-lightbox__przycisk:hover { background: rgb(255 255 255 / 22%); }
.kk-lightbox__zamknij { top: 1rem; right: 1rem; }
.kk-lightbox__poprzednie { left: 1rem; top: 50%; translate: 0 -50%; }
.kk-lightbox__nastepne { right: 1rem; top: 50%; translate: 0 -50%; }
.kk-lightbox__poprzednie .kk-ikona { rotate: 180deg; }

.kk-lightbox__licznik {
	position: fixed;
	top: 1.5rem;
	left: 1.5rem;
	font-weight: 600;
}

@media (max-width: 48rem) {
	.kk-lightbox__poprzednie, .kk-lightbox__nastepne { display: none; }
}

/* ── calculator ───────────────────────────────────────────────────────── */

.kk-kalk {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 0.95fr);
	gap: clamp(1.5rem, 4vw, 3rem);
	align-items: start;
}

.kk-kalk__formularz {
	display: grid;
	gap: 1.75rem;
	padding: clamp(1.5rem, 3vw, 2rem);
	border-radius: var(--k-r-duzy);
	background: var(--k-piasek);
}

.kk-kalk__formularz fieldset {
	display: grid;
	gap: 0.5rem;
	margin: 0;
	padding: 0;
	border: 0;
}

.kk-kalk__formularz legend {
	margin-bottom: 0.6rem;
	padding: 0;
	font-weight: 700;
	color: var(--k-atrament);
}

.kk-wybory-rzad {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0.5rem;
}

.kk-wybor input {
	position: absolute;
	opacity: 0;
	pointer-events: none;
}

.kk-wybor span {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	min-height: 3rem;
	padding: 0.65rem 1rem;
	border-radius: var(--k-r-maly);
	background: var(--k-bialy);
	box-shadow: inset 0 0 0 1px var(--k-linia);
	color: var(--k-atrament);
	font-size: 0.975rem;
	line-height: 1.35;
	cursor: pointer;
	transition: box-shadow 0.15s ease, background-color 0.15s ease;
}

.kk-wybor span::before {
	content: "";
	flex: none;
	width: 1.1rem;
	height: 1.1rem;
	border-radius: 50%;
	box-shadow: inset 0 0 0 1.5px #B9B1A2;
	transition: box-shadow 0.15s ease;
}

/* Selected: the filled radio carries it; the card only tints and gets a
   soft ring (the 2px teal frame read as heavy next to the inputs). */
.kk-wybor input:checked + span {
	background: color-mix(in oklab, var(--k-morze) 5%, var(--k-bialy));
	box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--k-morze) 40%, transparent);
}

.kk-wybor input:checked + span::before {
	box-shadow: inset 0 0 0 5px var(--k-morze);
}

.kk-wybor input:focus-visible + span {
	outline: 3px solid var(--k-morze);
	outline-offset: 2px;
}

.kk-z-jednostka {
	position: relative;
	display: block;
}

.kk-z-jednostka input {
	padding-right: 3rem;
	font-size: 1.125rem;
	font-weight: 600;
}

.kk-z-jednostka > span {
	position: absolute;
	right: 1rem;
	top: 50%;
	translate: 0 -50%;
	color: var(--k-tekst-slaby);
	font-weight: 600;
	pointer-events: none;
}

.js .kk-kalk [data-bez-js] { display: none; }

.kk-kalk__wynik {
	position: sticky;
	top: calc(var(--k-naglowek-h) + 1.25rem);
	padding: clamp(1.5rem, 3vw, 2rem);
	border-radius: var(--k-r-duzy);
	background: var(--k-atrament);
	color: rgb(255 255 255 / 82%);
}

.kk-kalk__wynik--pusty {
	display: grid;
	place-items: center;
	min-height: 16rem;
	text-align: center;
	font-size: 1.125rem;
}

.kk-kalk__podsumowanie {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 1rem;
	padding-bottom: 1.5rem;
	margin-bottom: 0.5rem;
	border-bottom: 1px solid rgb(255 255 255 / 14%);
}

.kk-kalk__podsumowanie div { display: grid; gap: 0.25rem; }
.kk-kalk__podsumowanie span { font-size: 0.875rem; color: var(--k-morze-swiatlo); font-weight: 600; }

.kk-kalk__podsumowanie strong {
	font-family: var(--k-szeryf);
	font-size: clamp(1.625rem, 3vw, 2.25rem);
	font-weight: 600;
	color: var(--k-bialy);
	line-height: 1.1;
}

.kk-kalk__tabela {
	width: 100%;
	border-collapse: collapse;
	font-size: 0.975rem;
}

.kk-kalk__tabela th,
.kk-kalk__tabela td {
	padding: 0.7rem 0;
	border-bottom: 1px solid rgb(255 255 255 / 8%);
	vertical-align: top;
}

.kk-kalk__tabela th {
	font-weight: 500;
	text-align: left;
	color: rgb(255 255 255 / 88%);
}

.kk-kalk__tabela th span {
	display: block;
	font-size: 0.8125rem;
	color: rgb(255 255 255 / 55%);
}

.kk-kalk__tabela td {
	padding-left: 1rem;
	text-align: right;
	white-space: nowrap;
	font-weight: 600;
	color: var(--k-bialy);
}

.kk-kalk__nd th,
.kk-kalk__nd td { color: rgb(255 255 255 / 45%); }

.kk-kalk__uwaga {
	margin: 1.25rem 0 0;
	font-size: 0.8125rem;
	line-height: 1.5;
	color: rgb(255 255 255 / 60%);
}

@media (max-width: 56rem) {
	.kk-kalk { grid-template-columns: 1fr; }
	.kk-kalk__wynik { position: static; }
	.kk-wybory-rzad { grid-template-columns: 1fr; }
}

/* ── footer ───────────────────────────────────────────────────────────── */

.k-stopka {
	background: var(--k-atrament);
	color: rgb(255 255 255 / 70%);
	font-size: 0.9375rem;
}

.k-stopka a { color: rgb(255 255 255 / 90%); }
.k-stopka a:hover { color: var(--k-bialy); }

.k-stopka__gora {
	display: grid;
	grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, 1fr));
	gap: 2.5rem;
	padding-block: clamp(3rem, 6vw, 4.5rem);
}

.k-stopka .k-logo,
.k-stopka .k-logo:hover { color: var(--k-bialy); }
.k-stopka .k-logo__opis { color: var(--k-morze-swiatlo); }
.k-stopka .k-logo__kafel { box-shadow: 0 10px 30px -12px rgb(0 0 0 / 60%); }

.k-stopka__marka p {
	max-width: 30rem;
	margin: 1.25rem 0 0;
}

.k-stopka__ocena .k-ocena-krotka { color: var(--k-bialy); }

.k-stopka__naglowek {
	margin: 0 0 1rem;
	font-size: 0.78rem;
	font-weight: 700;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--k-morze-swiatlo);
}

.k-stopka__kolumna ul {
	display: grid;
	gap: 0.45rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.k-stopka__kolumna ul a { text-decoration: none; }
.k-stopka__kolumna ul a:hover { text-decoration: underline; }
.k-stopka__kolumna p { margin: 0 0 0.75rem; }

.k-stopka .k-czlonkostwa a { box-shadow: none; }
/* The footer column is narrower than the PFRN logo (246 px at 36 px high) on
   small laptops: let each logo shrink with its box, never past the column. */
.k-stopka .k-czlonkostwa li,
.k-stopka .k-czlonkostwa a { min-width: 0; max-width: 100%; }
.k-stopka .k-czlonkostwa img { height: auto; max-height: 2.25rem; max-width: 100%; }
.k-stopka .k-czlonkostwa { gap: 0.5rem; }

.k-stopka__dol {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 0.75rem 2rem;
	padding-block: 1.5rem;
	border-top: 1px solid rgb(255 255 255 / 10%);
	font-size: 0.875rem;
}

.k-stopka__linki {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem 1.75rem;
}

.k-stopka__autor { color: rgb(255 255 255 / 55%); }
.k-stopka__autor a { color: rgb(255 255 255 / 85%); }

@media (max-width: 64rem) {
	.k-stopka__gora { grid-template-columns: 1fr 1fr; }
	.k-stopka__marka { grid-column: 1 / -1; }
}

@media (max-width: 36rem) {
	.k-stopka__gora { grid-template-columns: 1fr; }
	body:not(.k-bez-przycisku) .k-stopka { padding-bottom: 4.5rem; }
}

/* ══ Morskie światło — the one visual idea ══════════════════════════════
 * A slow aurora of sea teal and warm sand behind the hero, the page headers,
 * the reviews and the call to action; glass only where it has something to
 * blur (that aurora, or a photo). Everything else stays plain white. Colours
 * mix in OKLab so the gradients never go grey in the middle.
 */

:root {
	--e-out: cubic-bezier(.2, .7, .2, 1);
	--t-fast: .16s;
	--t-base: .24s;
	--t-slow: .7s;
	--k-szklo: rgb(255 255 255 / 62%);
	--k-szklo-brzeg: rgb(255 255 255 / 75%);
	--k-szklo-blur: saturate(1.5) blur(18px);
}

/* The aurora: a layer behind the content, drifting on the compositor. */
.k-hero,
.k-podstrona__naglowek,
.k-sekcja--ciemna,
.k-cta {
	isolation: isolate;
}

.k-hero::before,
.k-podstrona__naglowek::before,
.k-sekcja--ciemna::before {
	content: "";
	position: absolute;
	z-index: -1;
	inset: -30% -10%;
	pointer-events: none;
	background:
		radial-gradient(38% 45% at 82% 18%, color-mix(in oklab, var(--k-morze) 34%, transparent), transparent 70%),
		radial-gradient(30% 40% at 62% 88%, color-mix(in oklab, #3FB8AE 26%, transparent), transparent 70%),
		radial-gradient(34% 42% at 12% 78%, color-mix(in oklab, #E9C98F 30%, transparent), transparent 70%),
		radial-gradient(28% 36% at 30% 10%, color-mix(in oklab, #F4E6CE 70%, transparent), transparent 70%);
	animation: k-zorza 28s var(--e-out) infinite alternate;
}

.k-podstrona__naglowek { position: relative; overflow: hidden; }
.k-podstrona__naglowek::before { opacity: .75; }

.k-sekcja--ciemna { position: relative; overflow: hidden; }
.k-sekcja--ciemna::before {
	background:
		radial-gradient(40% 50% at 85% 10%, color-mix(in oklab, var(--k-morze) 55%, transparent), transparent 70%),
		radial-gradient(35% 45% at 10% 95%, color-mix(in oklab, #3FB8AE 22%, transparent), transparent 70%);
}

@keyframes k-zorza {
	from { transform: translate3d(-2%, -1%, 0) scale(1); }
	to   { transform: translate3d(3%, 2%, 0) scale(1.08); }
}

/* Glass: the hero's search panel, over the aurora. */
.kk-szukaj--hero {
	background: var(--k-szklo);
	-webkit-backdrop-filter: var(--k-szklo-blur);
	backdrop-filter: var(--k-szklo-blur);
	box-shadow: inset 0 1px 0 var(--k-szklo-brzeg), inset 0 0 0 1px rgb(255 255 255 / 55%), 0 24px 60px -28px rgb(0 72 76 / 45%);
}

.kk-szukaj--hero .kk-przelacznik { background: rgb(255 255 255 / 55%); box-shadow: inset 0 0 0 1px rgb(0 108 112 / 10%); }
.kk-szukaj--hero .kk-pole input,
.kk-szukaj--hero .kk-pole select { background-color: rgb(255 255 255 / 88%); border-color: rgb(0 108 112 / 14%); }

/* The trust row becomes a glass chip. */
.k-hero__zaufanie {
	display: inline-flex;
	flex-wrap: wrap;
	padding: 0.6rem 1.1rem;
	border-radius: 999px;
	background: rgb(255 255 255 / 45%);
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
	box-shadow: inset 0 0 0 1px rgb(255 255 255 / 60%);
}

/* Phones: three equal columns, the figure on top, the label under it. */
@media (max-width: 36rem) {
	.k-hero__zaufanie {
		display: grid;
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 0;
		padding: 0.75rem 0.25rem;
		border-radius: var(--k-r);
		font-size: 0.8125rem;
		line-height: 1.3;
		text-align: center;
	}
	.k-hero__zaufanie li {
		display: flex;
		flex-direction: column;
		justify-content: center;
		gap: 0.15rem;
		min-width: 0;
		padding-inline: 0.4rem;
	}
	.k-hero__zaufanie li + li { border-left: 1px solid #CFC7B8; }
	.k-hero__zaufanie li + li::before { display: none; }
	.k-hero__zaufanie strong { order: -1; font-size: 0.9375rem; }
	.k-hero__zaufanie .k-ocena-krotka { font-weight: 700; font-size: 0.9375rem; }
}

/* Glass on photos: badges and counters read on any picture. */
.kk-karta__znacznik {
	background: rgb(255 255 255 / 72%);
	-webkit-backdrop-filter: blur(8px) saturate(1.4);
	backdrop-filter: blur(8px) saturate(1.4);
	box-shadow: inset 0 0 0 1px rgb(255 255 255 / 70%);
}

.kk-karta__znacznik--najem { background: rgb(31 36 48 / 70%); color: var(--k-bialy); box-shadow: inset 0 0 0 1px rgb(255 255 255 / 14%); }

.kk-karta__licznik,
.kk-galeria__wszystkie {
	background: rgb(31 36 48 / 45%);
	color: var(--k-bialy);
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
	box-shadow: inset 0 0 0 1px rgb(255 255 255 / 16%);
}

.kk-galeria__wszystkie:hover { background: rgb(31 36 48 / 60%); }

/* Reviews: glass cards over the dark aurora. */
.k-sekcja--ciemna .k-opinia {
	background: rgb(255 255 255 / 6%);
	-webkit-backdrop-filter: blur(14px);
	backdrop-filter: blur(14px);
	box-shadow: inset 0 1px 0 rgb(255 255 255 / 10%), inset 0 0 0 1px rgb(255 255 255 / 8%);
}

/* Call to action: the aurora in teal, glass buttons. */
.k-cta {
	background:
		radial-gradient(60% 90% at 90% 0%, color-mix(in oklab, #3FB8AE 45%, transparent), transparent 70%),
		radial-gradient(50% 80% at 0% 100%, color-mix(in oklab, #E9C98F 22%, transparent), transparent 70%),
		linear-gradient(135deg in oklab, var(--k-morze) 0%, var(--k-morze-ciemne) 100%);
}

.k-cta .k-przycisk--jasny {
	background: rgb(255 255 255 / 12%);
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
	box-shadow: inset 0 0 0 1px rgb(255 255 255 / 40%);
}

/* The years' square: depth in the brand teal. */
.k-doswiadczenie__liczba::before {
	background:
		radial-gradient(70% 60% at 25% 15%, color-mix(in oklab, #3FB8AE 55%, transparent), transparent 70%),
		linear-gradient(145deg in oklab, var(--k-morze) 0%, var(--k-morze-ciemne) 100%);
	box-shadow: inset 0 1px 0 rgb(255 255 255 / 18%), 0 30px 60px -30px rgb(0 72 76 / 55%);
}

/* The service cards and sand sections get a whisper of the same light. */
.k-sekcja--piasek {
	background:
		radial-gradient(45% 60% at 100% 0%, color-mix(in oklab, var(--k-morze) 9%, transparent), transparent 70%),
		var(--k-piasek);
}

/* ── motion signature ─────────────────────────────────────────────────── */

/* 1. Section labels: a teal rule that draws itself when the section arrives. */
.k-etykieta { display: flex; align-items: center; gap: 0.6rem; }
.k-etykieta::before {
	content: "";
	flex: none;
	width: 1.5rem;
	height: 2px;
	border-radius: 2px;
	background: currentColor;
	transform-origin: left;
}

.js .rv .k-etykieta::before { transform: scaleX(0); transition: transform var(--t-slow) var(--e-out) .15s; }
.js .rv.in .k-etykieta::before { transform: none; }

/* 2. Sections rise into view — below the fold only (the hero never waits). */
.js .rv { opacity: 0; transform: translateY(24px); transition: opacity var(--t-slow) var(--e-out), transform var(--t-slow) var(--e-out); }
.js .rv.in { opacity: 1; transform: none; }

/* Cards inside a revealed grid arrive in a short stagger (max 4 steps). A
   keyframe on opacity + translate, so `transform` and `transition` stay free
   for the card's own tilt and hover. */
.js .rv .kk-siatka > *,
.js .rv .k-uslugi > *,
.js .rv .k-opinie__lista > *,
.js .rv .k-zespol > * { opacity: 0; }

.js .rv.in .kk-siatka > *,
.js .rv.in .k-uslugi > *,
.js .rv.in .k-opinie__lista > *,
.js .rv.in .k-zespol > * {
	opacity: 1;
	animation: k-wejscie .6s var(--e-out) both;
	animation-delay: calc(min(var(--i, 0), 4) * 70ms + 120ms);
}

@keyframes k-wejscie {
	from { opacity: 0; translate: 0 16px; }
}

/* Long descriptions fold (theme.js adds the class and the button). */
.kk-opis--zwiniety {
	max-height: 26rem;
	overflow: hidden;
	-webkit-mask: linear-gradient(#000 70%, transparent);
	mask: linear-gradient(#000 70%, transparent);
}

.kk-opis-rozwin { margin-top: 0.75rem; }

.kk-opis p { margin: 0 0 0.55rem; }

/* ══ Liquid Glass nad zatoką — the 2026 layer ═══════════════════════════
 * No more white bands: one warm backdrop, fixed behind the whole page, with
 * pools of sea light and a fine grain. What floats over it is Apple-style
 * glass — strong blur with lifted colour, a bright top edge, a hairline — on
 * a few surfaces only (header, search, proof strip, price card, filters,
 * call button). Content cards stay solid white with a thin gradient ring.
 * The reviews are one dark "night bay" sheet. On desktop the offer cards
 * tilt toward the pointer; one pinned section walks through the process.
 */

:root {
	--k-tlo: #F6F3ED;
	--k-nav-odstep: 0.75rem;
	--k-nav: calc(var(--k-naglowek-h) + var(--k-nav-odstep));
	--lg-tlo: rgb(255 255 255 / 58%);
	--lg-tlo-mocne: rgb(255 255 255 / 74%);
	--lg-blur: blur(22px) saturate(1.8);
	--lg-polysk: linear-gradient(180deg, rgb(255 255 255 / 45%), rgb(255 255 255 / 0%) 55%);
	--lg-brzeg: inset 0 1px 0 rgb(255 255 255 / 95%), inset 0 -1px 0 rgb(255 255 255 / 30%), inset 0 0 0 1px rgb(255 255 255 / 55%);
	--lg-cien: 0 1px 2px rgb(31 36 48 / 5%), 0 22px 48px -24px rgb(0 60 64 / 34%);
	--k-ramka: linear-gradient(140deg in oklab,
		color-mix(in oklab, var(--k-morze) 55%, transparent),
		rgb(255 255 255 / 0%) 36%, rgb(255 255 255 / 0%) 64%,
		color-mix(in oklab, #E0B874 60%, transparent));
	--k-arkusz: clamp(1.5rem, 4vw, 2.75rem);   /* the radius of a full-width sheet */
}

/* ── 1. the backdrop ────────────────────────────────────────────────────── */

body { background: var(--k-tlo); }

/* Fixed, so it costs one composited layer and the glass always has light to
   bend. Grain at 5 %: never over text alone, always under it. */
body::before {
	content: "";
	position: fixed;
	inset: 0;
	z-index: -1;
	pointer-events: none;
	background:
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .12 0 0 0 0 .14 0 0 0 0 .19 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.32'/%3E%3C/svg%3E"),
		radial-gradient(42% 38% at 90% 8%, color-mix(in oklab, var(--k-morze) 14%, transparent), transparent 70%),
		radial-gradient(40% 44% at 4% 55%, color-mix(in oklab, #E9C98F 26%, transparent), transparent 70%),
		radial-gradient(36% 34% at 72% 96%, color-mix(in oklab, #3FB8AE 14%, transparent), transparent 70%);
}

/* Tighter rhythm: the white gaps were the spacing, not the content. */
.k-sekcja { padding-block: clamp(3rem, 6.5vw, 5.25rem); }

/* Sand sections fade in and out instead of starting at a hard line. */
.k-sekcja--piasek {
	background:
		radial-gradient(45% 60% at 100% 0%, color-mix(in oklab, var(--k-morze) 10%, transparent), transparent 70%),
		linear-gradient(180deg, rgb(235 228 215 / 0%), rgb(235 228 215 / 55%) 18%, rgb(235 228 215 / 55%) 82%, rgb(235 228 215 / 0%));
}

/* The hero and page headers become sheets with a rounded lower edge. */
.k-hero,
.k-podstrona__naglowek {
	border-radius: 0 0 var(--k-arkusz) var(--k-arkusz);
}

/* ── 2. the floating glass header ───────────────────────────────────────── */

/* The bar floats 0.75rem below the top and the page runs underneath it. */
.k-czesc-naglowek {
	padding-top: var(--k-nav-odstep);
	margin-bottom: calc(-1 * var(--k-nav));
	pointer-events: none;
}

.k-czesc-naglowek .k-naglowek { pointer-events: auto; }

.k-naglowek {
	width: min(100% - 1rem, var(--k-szerokosc) + 2.5rem);
	margin-inline: auto;
	border-bottom: 0;
	border-radius: 1.25rem;
	background: var(--lg-polysk), var(--lg-tlo);
	-webkit-backdrop-filter: var(--lg-blur);
	backdrop-filter: var(--lg-blur);
	box-shadow: var(--lg-brzeg), var(--lg-cien);
}

.k-naglowek__wnetrze {
	width: auto;
	padding-inline: clamp(0.5rem, 1.5vw, 1.25rem) clamp(0.5rem, 1.5vw, 1rem);
}

/* Room for the bar on the first block of every page. */
.k-czesc-naglowek + main .k-hero { padding-top: calc(var(--k-nav) + clamp(2rem, 5vw, 4.25rem)); }
.k-czesc-naglowek + main .k-podstrona__naglowek { padding-top: calc(var(--k-nav) + clamp(1.75rem, 4vw, 3rem)); }
.k-czesc-naglowek + main.k-podstrona--oferta > :first-child { padding-top: var(--k-nav); }

html { scroll-padding-top: calc(var(--k-nav) + 1rem); }
.kk-oferty__filtry { top: calc(var(--k-nav) + 1rem); }
.kk-oferta__boczna,
.kk-kalk__wynik { top: calc(var(--k-nav) + 1.25rem); }

/* The menu card hangs under the bar. The bar's backdrop-filter makes it the
   containing block, and a nested backdrop-filter would blur only the bar, so
   the card is near-opaque instead of glass. */
.k-menu-mobilne__panel {
	right: 0;
	top: calc(100% + 0.5rem);
	width: min(17rem, calc(100vw - 1rem));
	background: rgb(255 255 255 / 95%);
	box-shadow: var(--lg-brzeg), inset 0 0 0 1px var(--k-linia), var(--k-cien-duzy);
}

/* ── 3. glass surfaces ──────────────────────────────────────────────────── */

.kk-szukaj--hero,
.k-hero__zaufanie,
.kk-cena-karta {
	background: var(--lg-polysk), var(--lg-tlo);
	-webkit-backdrop-filter: var(--lg-blur);
	backdrop-filter: var(--lg-blur);
	box-shadow: var(--lg-brzeg), var(--lg-cien);
}

.kk-cena-karta { background: var(--lg-polysk), var(--lg-tlo-mocne); }

/* Filters: the whole panel is glass beside the results; on phones the
   collapsed "Filtry" is a glass pill and the open form a glass card. */
@media (min-width: 60.001rem) {
	.kk-filtry {
		background: var(--lg-polysk), var(--lg-tlo-mocne);
		-webkit-backdrop-filter: var(--lg-blur);
		backdrop-filter: var(--lg-blur);
		box-shadow: var(--lg-brzeg), var(--lg-cien);
	}
}

@media (max-width: 60rem) {
	.kk-filtry summary,
	.kk-filtry[open] .kk-szukaj {
		background: var(--lg-polysk), var(--lg-tlo-mocne);
		-webkit-backdrop-filter: var(--lg-blur);
		backdrop-filter: var(--lg-blur);
		box-shadow: var(--lg-brzeg), var(--lg-cien);
	}
	.kk-filtry[open] summary { margin-bottom: 0.75rem; }
}

/* The count: a quiet label in the section-label style, not a headline, and
   the filter panel starts level with the first row of cards. */
.kk-oferty__pasek { min-height: 1.5rem; margin-bottom: 1.25rem; }
.kk-oferty__liczba,
.kk-oferty__liczba strong {
	font: 700 0.8125rem/1.5rem var(--k-sans);
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--k-morze);
}
.kk-oferty__liczba { display: flex; align-items: center; gap: 0.35rem; }
.kk-oferty__liczba::before {
	content: "";
	width: 1.5rem;
	height: 2px;
	margin-right: 0.25rem;
	border-radius: 2px;
	background: currentColor;
}

@media (min-width: 60.001rem) {
	.kk-oferty__filtry { margin-top: 2.75rem; }
}

.k-hero__zaufanie { box-shadow: var(--lg-brzeg); }

/* The floating call button: teal glass. */
@media (max-width: 48rem) {
	.k-zadzwon-mobilnie {
		background: linear-gradient(180deg, rgb(255 255 255 / 22%), rgb(255 255 255 / 0%) 60%), color-mix(in oklab, var(--k-morze) 86%, transparent);
		-webkit-backdrop-filter: var(--lg-blur);
		backdrop-filter: var(--lg-blur);
		box-shadow: inset 0 1px 0 rgb(255 255 255 / 45%), inset 0 0 0 1px rgb(255 255 255 / 18%), 0 14px 32px -12px rgb(0 60 64 / 55%);
	}
}

/* Buttons answer a press. */
.k-przycisk { transition: background-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease, scale 0.15s var(--e-out); }
.k-przycisk:active { scale: 0.97; }

/* ── 4. night bay: the reviews as one dark sheet ────────────────────────── */

.k-sekcja--ciemna {
	margin-inline: clamp(0.5rem, 2vw, 1.5rem);
	border-radius: var(--k-arkusz);
	background: linear-gradient(160deg in oklab, #16222F 0%, #11272E 55%, #0B3638 100%);
	box-shadow: inset 0 1px 0 rgb(255 255 255 / 8%), 0 40px 80px -48px rgb(11 30 38 / 70%);
}

.k-sekcja--ciemna::before {
	background:
		radial-gradient(40% 55% at 88% 6%, color-mix(in oklab, #3FB8AE 42%, transparent), transparent 70%),
		radial-gradient(38% 50% at 6% 100%, color-mix(in oklab, var(--k-morze) 55%, transparent), transparent 70%),
		radial-gradient(22% 30% at 50% 50%, color-mix(in oklab, #E9C98F 8%, transparent), transparent 70%);
}

.k-sekcja--ciemna .k-opinia {
	background: linear-gradient(180deg, rgb(255 255 255 / 9%), rgb(255 255 255 / 3%));
	box-shadow: inset 0 1px 0 rgb(255 255 255 / 14%), inset 0 0 0 1px rgb(255 255 255 / 9%);
}

/* The footer starts as a sheet too. */
.k-stopka { border-radius: var(--k-arkusz) var(--k-arkusz) 0 0; }

/* ── 5. gradient rings on the content cards ─────────────────────────────── */

.k-osoba { position: relative; }

.kk-karta::before,
.k-usluga::before,
.k-osoba::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 2;
	padding: 1px;
	border-radius: inherit;
	background: var(--k-ramka);
	-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
	-webkit-mask-composite: xor;
	mask-composite: exclude;
	pointer-events: none;
}

.k-usluga,
.k-osoba { box-shadow: var(--lg-cien); }

/* ── 6. offer cards tilt toward the pointer (desktop, theme.js) ─────────── */

@media (hover: hover) and (pointer: fine) {
	.kk-karta {
		transform: perspective(1100px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateY(var(--k-unies, 0px));
		transition: transform 0.6s var(--e-out), box-shadow 0.25s ease;
	}
	.kk-karta:hover { translate: none; --k-unies: -4px; }
	.kk-karta.k-tilt { transition: transform 0.12s ease-out, box-shadow 0.25s ease; }

	/* The glare follows the pointer. */
	.kk-karta::after {
		content: "";
		position: absolute;
		inset: 0;
		z-index: 3;
		border-radius: inherit;
		background: radial-gradient(24rem circle at var(--mx, 50%) var(--my, 0%), rgb(255 255 255 / 24%), transparent 55%);
		opacity: 0;
		transition: opacity 0.3s ease;
		pointer-events: none;
	}
	.kk-karta.k-tilt::after { opacity: 1; }
}

/* ── 7. sections come into focus ────────────────────────────────────────── */

/* Phones get the plain rise: a blur on a whole section costs too much there. */
@media (min-width: 48rem) {
	.js .rv {
		filter: blur(6px);
		scale: 0.985;
		transition: opacity var(--t-slow) var(--e-out), transform var(--t-slow) var(--e-out),
			filter var(--t-slow) var(--e-out), scale var(--t-slow) var(--e-out);
	}
	.js .rv.in { filter: none; scale: none; }
}

/* ── 8. the showpiece: Jak pracujemy ────────────────────────────────────── */

.k-proces__siatka {
	display: grid;
	grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
	gap: clamp(2rem, 6vw, 6rem);
	align-items: start;
}

.k-proces__bok {
	position: sticky;
	top: calc(var(--k-nav) + 2.5rem);
}

.k-proces__bok h2 { margin: 0; max-width: 16ch; }

/* The step you are on, large: only with JS, which keeps it current. */
.k-proces__stan {
	display: none;
	align-items: baseline;
	gap: 0.6rem;
	margin: 2rem 0 0;
	font-family: var(--k-szeryf);
	color: var(--k-tekst-slaby);
}

.js .k-proces--zywy .k-proces__stan { display: flex; }

.k-proces__nr {
	font-size: clamp(4rem, 8vw, 6.5rem);
	font-weight: 600;
	line-height: 1;
	letter-spacing: -0.04em;
	background: linear-gradient(160deg in oklab, var(--k-morze) 20%, #3FB8AE);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	font-variant-numeric: tabular-nums;
}

.k-proces__z { font-size: 1.5rem; }

.k-proces__kroki {
	position: relative;
	isolation: isolate;
	margin: 0;
	padding: 0 0 0 4rem;
	list-style: none;
}

/* The line, and its teal fill following the scroll (--p from theme.js). */
.k-proces__kroki::before,
.k-proces__kroki::after {
	content: "";
	position: absolute;
	z-index: -1;
	left: 1.375rem;
	top: 2rem;
	bottom: 2rem;
	width: 2px;
	border-radius: 2px;
	background: color-mix(in oklab, var(--k-morze) 16%, transparent);
}

.k-proces__kroki::after {
	background: linear-gradient(180deg in oklab, var(--k-morze), #3FB8AE);
	transform-origin: top;
	transform: scaleY(var(--p, 1));
}

.k-krok {
	position: relative;
	padding: clamp(1.5rem, 5vw, 4rem) 0;
}

.k-krok__nr {
	position: absolute;
	z-index: 1;
	left: -4rem;
	top: calc(clamp(1.5rem, 5vw, 4rem) - 0.4rem);
	display: grid;
	place-items: center;
	width: 2.75rem;
	height: 2.75rem;
	border-radius: 50%;
	background: var(--k-bialy);
	box-shadow: inset 0 0 0 1.5px color-mix(in oklab, var(--k-morze) 30%, transparent), var(--lg-cien);
	color: var(--k-morze);
	font: 600 1rem/1 var(--k-szeryf);
	transition: background-color 0.35s ease, color 0.35s ease, box-shadow 0.35s ease;
}

.k-krok h3 {
	margin: 0 0 0.5rem;
	font-size: clamp(1.375rem, 2.4vw, 1.875rem);
}

.k-krok p {
	max-width: 34rem;
	margin: 0;
	font-size: 1.0625rem;
}

/* With JS the steps ahead wait in half-tone; the ones reached light up.
   Only the text dims: an element with opacity is its own layer, and a dimmed
   circle let the line show through it. */
.js .k-proces--zywy .k-krok > :not(.k-krok__nr) { opacity: 0.4; transition: opacity 0.45s var(--e-out); }
.js .k-proces--zywy .k-krok.aktywny > :not(.k-krok__nr) { opacity: 1; }
.js .k-proces--zywy .k-krok.aktywny .k-krok__nr {
	background: var(--k-morze);
	color: var(--k-bialy);
	box-shadow: 0 0 0 6px color-mix(in oklab, var(--k-morze) 14%, transparent), var(--lg-cien);
}

@media (max-width: 56rem) {
	.k-proces__siatka { grid-template-columns: 1fr; gap: 1rem; }
	.k-proces__bok { position: static; }
	.js .k-proces--zywy .k-proces__stan { display: none; }
}

@media (max-width: 36rem) {
	.k-proces__kroki { padding-left: 3.5rem; }
	.k-krok__nr { left: -3.5rem; }
}

/* ── motion: only for those who want it ───────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		transition: none !important;
		animation: none !important;
		scroll-behavior: auto !important;
	}
	/* The end state, always: nothing stays hidden or half-drawn. */
	.js .rv,
	.js .rv .kk-siatka > *,
	.js .rv .k-uslugi > *,
	.js .rv .k-opinie__lista > *,
	.js .rv .k-zespol > *,
	.js .rv .k-etykieta::before { opacity: 1 !important; transform: none !important; translate: none !important; filter: none !important; scale: none !important; }
	.k-proces__kroki { --p: 1; }
	.kk-karta { transform: none !important; }
}
/*mkc*/.mkc{white-space:nowrap;margin-left:.3em;font-size:12px}.mkc.mkc-solo{margin-left:0}.mkc a{display:inline-block;padding:5px 0;margin:-5px 0;color:inherit;text-decoration:none;vertical-align:-0.249em}.mkc svg{display:block;height:1.181em;fill:currentColor}.mkc-s svg{width:7.869em}.mkc-by svg{width:9.337em}.mkc .mkc-by{position:relative;margin-left:.55em;padding-left:.55em}.mkc .mkc-by::before{content:"";position:absolute;left:0;top:5px;bottom:5px;border-left:1px solid color-mix(in srgb,currentColor 30%,transparent)}.mkc a:hover svg{opacity:.75}.mkc a:focus-visible{outline:2px solid currentColor;outline-offset:2px}