/* ATOTA – style motywu (V3 na bazie Design V2). Jeden plik, bez preprocesora i bez builda. */

@layer baza, uklad, komponenty, sekcje;

/* ---------- Fonty marki: Verlag i Karmina (licencje webowe ATOTA – patrz docs/decyzje.md) ----------
   Verlag: Light, Book, Black. Karmina: tylko Regular (innych odmian nie ma w materiałach).
   Zakresy wag są szerokie, żeby przeglądarka nie syntetyzowała pogrubienia. */

@font-face {
	font-family: "Verlag";
	src: url("../fonts/verlag-light.woff2") format("woff2");
	font-weight: 100 300;
	font-display: swap;
}
@font-face {
	font-family: "Verlag";
	src: url("../fonts/verlag-book.woff2") format("woff2");
	font-weight: 400 500;
	font-display: swap;
}
@font-face {
	font-family: "Verlag";
	src: url("../fonts/verlag-black.woff2") format("woff2");
	font-weight: 600 900;
	font-display: swap;
}
@font-face {
	font-family: "Karmina";
	src: url("../fonts/karmina-regular.woff2") format("woff2");
	font-weight: 100 900;
	font-display: swap;
}

/* ---------- Tokeny ---------- */

:root {
	/* Paleta marki – wartości z dotychczasowej strony. */
	--papier: #f2f1ec;
	--tusz: #30302f;
	--mieta: #afd6c9;
	--roz: #eca7a1;
	--blekit: #99cbd8;
	--bialy: #fff;
	--linia: rgb(48 48 47 / 0.22);

	--kroj-naglowki: "Verlag", "Century Gothic", "Avenir Next", sans-serif;
	--kroj-tekst: "Karmina", Georgia, serif;

	/* Skala typograficzna – płynna między 390 a 1440 px. */
	--fs-h1: clamp(2.25rem, 1.15rem + 3.9vw, 4.25rem);
	--fs-h2: clamp(2.25rem, 1.75rem + 2.1vw, 3.5rem);
	--fs-h3: clamp(1.375rem, 1.3rem + 0.3vw, 1.5625rem);
	--fs-wstep: clamp(1.25rem, 1.12rem + 0.55vw, 1.5625rem);
	--fs-tekst: clamp(1.125rem, 1.08rem + 0.2vw, 1.25rem);
	--fs-maly: 1rem;

	--margines: clamp(1.25rem, 0.4rem + 3.6vw, 4rem);
	--szerokosc: 82rem;
	--odstep-sekcji: clamp(3.5rem, 2.25rem + 5.5vw, 7.5rem);

	/* Logo ma proporcje 454:236. */
	--logo-w: clamp(3rem, 2.75rem + 1vw, 3.75rem);
}

/* ---------- Baza ---------- */

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

	html {
		scroll-behavior: smooth;
		scroll-padding-top: 1.5rem;
		-webkit-text-size-adjust: 100%;
		text-size-adjust: 100%;
	}

	body {
		margin: 0;
		overflow-x: clip;
		background: var(--papier);
		color: var(--tusz);
		font-family: var(--kroj-tekst);
		font-size: var(--fs-tekst);
		line-height: 1.6;
	}

	h1,
	h2,
	h3 {
		margin: 0;
		font-family: var(--kroj-naglowki);
		font-weight: 300;
		line-height: 1.02;
		text-wrap: balance;
	}

	p {
		margin: 0;
		text-wrap: pretty;
	}

	ul {
		margin: 0;
		padding: 0;
		list-style: none;
	}

	a {
		color: inherit;
	}

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

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

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

/* ---------- Układ ---------- */

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

/* ---------- Komponenty ---------- */

@layer komponenty {
	.pomin {
		position: absolute;
		left: 1rem;
		top: -10rem;
		z-index: 10;
		padding: 0.75rem 1.25rem;
		border-radius: 999px;
		background: var(--tusz);
		color: var(--papier);
		font-family: var(--kroj-naglowki);
	}

	.pomin:focus {
		top: 1rem;
	}

	/* Przycisk w różu marki – jak „Wyślij” na dotychczasowej stronie. */
	.przycisk {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		min-height: 2.75rem;
		padding: 0.4rem 1.5rem;
		border: 0;
		border-radius: 999px;
		background: var(--roz);
		color: var(--tusz);
		font-family: var(--kroj-naglowki);
		font-size: 1.0625rem;
		font-weight: 900;
		line-height: 1.2;
		text-decoration: none;
		cursor: pointer;
		transition: background-color 0.15s;
	}

	.przycisk:hover {
		background: color-mix(in srgb, var(--roz) 82%, var(--tusz));
	}

	.przycisk--duzy {
		min-height: 3.5rem;
		padding-inline: 2.25rem;
		font-size: 1.25rem;
	}

	.odnosnik {
		font-family: var(--kroj-naglowki);
		font-weight: 900;
		text-decoration-line: underline;
		text-decoration-thickness: 1.5px;
		text-underline-offset: 0.25em;
		transition: text-underline-offset 0.15s;
	}

	.odnosnik:hover {
		text-underline-offset: 0.4em;
	}

	/* Postać jako maska: jeden plik SVG, dowolny kolor. */
	.obszar__osoba,
	.kontakt__osoba {
		display: block;
		background: currentColor;
		-webkit-mask: var(--osoba) center bottom / contain no-repeat;
		mask: var(--osoba) center bottom / contain no-repeat;
	}

	.przycisk--obrys {
		background: transparent;
		box-shadow: inset 0 0 0 2px var(--tusz);
	}

	.przycisk--obrys:hover {
		background: var(--bialy);
	}

	/* Karta produktu własnego: biała „etykieta” na kolorze sekcji. */
	.produkty {
		display: grid;
		grid-template-columns: minmax(0, 1fr);
		gap: 1.25rem;
	}

	.produkt {
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		padding: 1.5rem 1.5rem 1.6rem;
		border-radius: 1.25rem;
		background: var(--bialy);
	}

	.produkt__obraz {
		width: 100%;
		height: auto;
		aspect-ratio: 4 / 3;
		object-fit: contain;
		margin-bottom: 1rem;
		border-radius: 0.75rem;
	}

	/* Rodzaj produktu jak tabliczka pod postacią – w kolorze sekcji. */
	.produkt__rodzaj {
		padding: 0.25rem 0.75rem 0.3rem;
		border-radius: 999px;
		background: var(--tlo, var(--papier));
		font-family: var(--kroj-naglowki);
		font-size: 0.9375rem;
		font-weight: 900;
		line-height: 1.2;
	}

	.produkt__nazwa {
		margin-top: 0.75rem;
		font-size: clamp(1.5rem, 1.35rem + 0.5vw, 1.875rem);
		font-weight: 900;
		line-height: 1.08;
	}

	.produkt__opis {
		margin-top: 0.5rem;
	}

	.produkt__odnosnik {
		margin-top: auto;
		padding-top: 1rem;
	}

	@media (min-width: 48rem) {
		.produkty {
			grid-template-columns: repeat(2, minmax(0, 1fr));
		}
	}

	/* Na szerokim ekranie wszystkie cztery produkty w jednym rzędzie – „półka”. */
	@container tresc (min-width: 64rem) {
		.produkty {
			grid-template-columns: repeat(4, minmax(0, 1fr));
		}
	}

	/* Współpraca z twórcami: ta sama karta, ale tylko obrys – to nie nasz produkt. */
	.wspolpraca {
		display: grid;
		justify-items: start;
		gap: 0.5rem;
		margin-top: 1.25rem;
		padding: 1.5rem;
		border: 2px solid var(--bialy);
		border-radius: 1.25rem;
	}

	.wspolpraca__tytul {
		font-size: clamp(1.5rem, 1.35rem + 0.5vw, 1.875rem);
		font-weight: 900;
	}

	.wspolpraca__tytul a {
		text-decoration-thickness: 1.5px;
		text-underline-offset: 0.2em;
	}

	/* Przykłady marketingowe: otwarte bloki z białą kreską u góry. */
	.przyklady {
		display: grid;
		grid-template-columns: minmax(0, 1fr);
		gap: 1.75rem;
	}

	.przyklad {
		padding-top: 1rem;
		border-top: 3px solid var(--bialy);
	}

	.przyklad__etykieta {
		font-family: var(--kroj-naglowki);
		font-size: 1rem;
	}

	.przyklad__tytul {
		margin-top: 0.2rem;
		font-size: clamp(1.375rem, 1.3rem + 0.3vw, 1.5625rem);
		font-weight: 900;
		line-height: 1.12;
	}

	.przyklad__opis {
		margin-top: 0.5rem;
	}

	@media (min-width: 48rem) {
		.przyklady {
			grid-template-columns: repeat(3, minmax(0, 1fr));
		}
	}

	/* Ścieżka sprzedaży jako łańcuch ogniw – połączenia z kółkiem jak litera O w logo.
	   Poziomo, gdy jest miejsce; w wąskiej kolumnie pionowo (container query). */
	.lancuch {
		--grubosc: 3px;
		--przerwa: 1.9rem;
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		row-gap: 1rem;
		margin: 0.25rem 0 0.5rem;
		padding: 0;
		list-style: none;
	}

	.lancuch__ogniwo {
		position: relative;
		padding: 0.5rem 1.05rem 0.55rem;
		border: var(--grubosc) solid var(--tusz);
		border-radius: 999px;
		background: var(--bialy);
		font-family: var(--kroj-naglowki);
		font-size: 1.125rem;
		font-weight: 900;
		line-height: 1.2;
		white-space: nowrap;
	}

	.lancuch__ogniwo + .lancuch__ogniwo {
		margin-left: var(--przerwa);
	}

	.lancuch__ogniwo + .lancuch__ogniwo::before,
	.lancuch__ogniwo + .lancuch__ogniwo::after {
		content: "";
		position: absolute;
		top: 50%;
		translate: 0 -50%;
	}

	.lancuch__ogniwo + .lancuch__ogniwo::before {
		right: calc(100% + var(--grubosc));
		width: var(--przerwa);
		height: var(--grubosc);
		background: var(--tusz);
	}

	.lancuch__ogniwo + .lancuch__ogniwo::after {
		right: calc(100% + var(--grubosc) + var(--przerwa) / 2 - 0.45rem);
		width: 0.9rem;
		height: 0.9rem;
		border: var(--grubosc) solid var(--tusz);
		border-radius: 50%;
		background: var(--tlo, var(--papier));
	}

	@container tresc (max-width: 45rem) {
		.lancuch {
			flex-direction: column;
			align-items: flex-start;
			row-gap: 0;
		}

		.lancuch__ogniwo + .lancuch__ogniwo {
			margin-left: 0;
			margin-top: var(--przerwa);
		}

		.lancuch__ogniwo + .lancuch__ogniwo::before {
			top: auto;
			right: auto;
			bottom: calc(100% + var(--grubosc));
			left: 1.75rem;
			width: var(--grubosc);
			height: var(--przerwa);
			translate: none;
		}

		.lancuch__ogniwo + .lancuch__ogniwo::after {
			top: auto;
			right: auto;
			bottom: calc(100% + var(--grubosc) + var(--przerwa) / 2 - 0.45rem);
			left: calc(1.75rem + var(--grubosc) / 2 - 0.45rem);
			translate: none;
		}
	}

	/* Pola formularza. */
	.pole {
		display: grid;
		gap: 0.4rem;
	}

	.pole label {
		font-family: var(--kroj-naglowki);
		font-size: 1.125rem;
		font-weight: 900;
		line-height: 1.3;
	}

	.pole__opcja {
		font-weight: 400;
	}

	.pole input,
	.pole textarea,
	.pole select {
		width: 100%;
		padding: 0.8rem 1rem;
		border: 1.5px solid rgb(48 48 47 / 0.4);
		border-radius: 0.875rem;
		background-color: var(--bialy);
		color: var(--tusz);
		font: inherit;
		line-height: 1.4;
		transition: border-color 0.15s;
	}

	.pole textarea {
		resize: vertical;
		min-height: 9rem;
	}

	/* Select: zamknięte pole wygląda jak pozostałe; po rozwinięciu menu systemowe.
	   Własna strzałka zamiast natywnej – w kolorze tuszu, z miejscem po prawej. */
	.pole select {
		appearance: none;
		padding-right: 3rem;
		background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 10'%3E%3Cpath d='M1.5 1.5 8 8l6.5-6.5' fill='none' stroke='%2330302f' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
		background-repeat: no-repeat;
		background-position: right 1.1rem center;
		background-size: 0.9rem auto;
		cursor: pointer;
	}

	.pole input:hover,
	.pole textarea:hover,
	.pole select:hover {
		border-color: rgb(48 48 47 / 0.7);
	}

	.pole input:focus-visible,
	.pole textarea:focus-visible,
	.pole select:focus-visible {
		border-color: var(--tusz);
		outline-offset: 2px;
		border-radius: 0.875rem;
	}

	@media (prefers-reduced-motion: reduce) {
		.pole input,
		.pole textarea,
		.pole select {
			transition: none;
		}
	}
}

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

@layer sekcje {
	/* Nagłówek. Szyny są częścią logo: górna wychodzi w lewo poza ekran,
	   dolna biegnie pod nawigacją i kończy się razem z nią. */
	.naglowek {
		padding-top: clamp(1.1rem, 0.8rem + 1.2vw, 2rem);
	}

	.naglowek__uklad {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 1.5rem;
	}

	.naglowek__pas {
		display: flex;
		align-items: center;
		gap: 1.75rem;
		padding-right: 1.25rem;
		clip-path: inset(-0.5rem 0 -0.5rem -100vw);
	}

	.naglowek__logo {
		flex: none;
		display: block;
		height: var(--logo-w);
		aspect-ratio: 454 / 236;
	}

	.logo {
		width: 100%;
		height: 100%;
		overflow: visible;
	}

	.naglowek__nav {
		display: none;
	}

	.naglowek__cta {
		flex: none;
	}

	@media (min-width: 62rem) {
		.naglowek__nav {
			display: block;
		}

		.naglowek__nav ul {
			display: flex;
			gap: clamp(1rem, 0.2rem + 1.4vw, 1.9rem);
		}

		.naglowek__nav a {
			font-family: var(--kroj-naglowki);
			font-size: 1.125rem;
			text-decoration: none;
		}

		.naglowek__nav a:hover {
			text-decoration: underline;
			text-decoration-thickness: 1.5px;
			text-underline-offset: 0.3em;
		}
	}

	/* Hero. Telefon: tytuł → postaci → tekst. Desktop: tytuł → tekst → postaci. */
	.hero {
		padding-block: clamp(1.75rem, 1.4rem + 1.5vw, 2.5rem) 0;
	}

	.hero__uklad {
		display: grid;
		grid-template-columns: minmax(0, 1fr);
		justify-items: center;
		gap: clamp(1.5rem, 1.2rem + 1.2vw, 2.25rem);
		text-align: center;
	}

	.hero__tytul {
		font-size: var(--fs-h1);
		line-height: 0.98;
		letter-spacing: -0.015em;
	}

	.hero__linia {
		display: block;
		text-wrap: balance;
	}

	/* Trzy postaci – główny motyw strony. Kolory mieszają się tam, gdzie się nakładają. */
	.hero__osoby {
		--wys: min(10.5rem, 39.5vw);
		display: flex;
		justify-content: center;
		align-items: flex-end;
		isolation: isolate;
	}

	.hero__osoba {
		--op: 0s;
		flex: none;
		display: grid;
		justify-items: center;
		text-decoration: none;
		border-radius: 1rem;
	}

	.hero__osoba:nth-child(2) { --op: 0.25s; }
	.hero__osoba:nth-child(3) { --op: 0.5s; }

	.hero__osoba + .hero__osoba {
		margin-left: calc(var(--wys) * -0.13);
	}

	.hero__osoba .osoba {
		width: auto;
		height: var(--wys);
		max-width: none;
		mix-blend-mode: multiply;
		transition: translate 0.2s ease-out;
	}

	.hero__osoba:hover .osoba {
		translate: 0 -0.4rem;
	}

	.hero__osoba--roz .osoba {
		height: calc(var(--wys) * 1.12);
	}

	.hero__osoba--mieta { color: var(--mieta); }
	.hero__osoba--roz { color: var(--roz); }
	.hero__osoba--blekit { color: var(--blekit); }

	.osoba__pelna {
		fill: currentColor;
	}

	/* Tabliczka pod postacią: dla kogo są rozwiązania. */
	.hero__tabliczka {
		position: relative;
		z-index: 1;
		margin-top: 0.6rem;
		padding: 0.3rem 0.6rem 0.35rem;
		border-radius: 999px;
		background: var(--kolor);
		color: var(--tusz);
		font-family: var(--kroj-naglowki);
		font-size: 0.9375rem;
		font-weight: 900;
		line-height: 1.2;
		white-space: nowrap;
	}


	.hero__osoba--mieta { --kolor: var(--mieta); }
	.hero__osoba--roz { --kolor: var(--roz); }
	.hero__osoba--blekit { --kolor: var(--blekit); }

	/* Jedyny ruch na stronie: postaci są najpierw szkicowane cienką linią, potem wypełniane. */
	.hero__osoba .osoba__szkic path {
		stroke: currentColor;
		stroke-width: 2.5;
		stroke-linecap: round;
		stroke-dasharray: 1;
		stroke-dashoffset: 1;
		animation:
			rysuj 1.7s var(--op) ease-in-out forwards,
			zniknij 0.5s calc(1.9s + var(--op)) forwards;
	}

	.hero__osoba .osoba__pelna {
		opacity: 0;
		animation: pokaz 0.7s calc(1.6s + var(--op)) ease-out forwards;
	}

	@keyframes rysuj { to { stroke-dashoffset: 0; } }
	@keyframes zniknij { to { opacity: 0; } }
	@keyframes pokaz { to { opacity: 1; } }

	@media (prefers-reduced-motion: reduce) {
		.hero__osoba .osoba__szkic path {
			animation: none;
			opacity: 0;
		}

		.hero__osoba .osoba__pelna {
			animation: none;
			opacity: 1;
		}

		.hero__osoba .osoba {
			transition: none;
		}
	}

	.hero__tekst {
		display: grid;
		justify-items: center;
		gap: 1rem;
		max-width: 44rem;
		padding-bottom: clamp(2.5rem, 2rem + 2vw, 3.5rem);
	}

	.hero__wstep {
		font-family: var(--kroj-naglowki);
		font-size: var(--fs-wstep);
		line-height: 1.3;
	}

	.hero__akapit {
		max-width: 38rem;
	}

	.hero__przyciski {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		gap: 0.75rem 1rem;
		margin-top: 0.5rem;
	}

	/* Od tabletu w górę: każde zdanie nagłówka w jednej linii, wstęp i przyciski
	   nad postaciami, akapit pod nimi – postaci mieszczą się w pierwszym ekranie. */
	@media (min-width: 48rem) {
		.hero__uklad {
			gap: 1.75rem;
		}

		.hero__tekst {
			display: contents;
		}

		.hero__tytul { order: 1; }

		.hero__wstep {
			order: 2;
			max-width: 46rem;
		}

		.hero__przyciski {
			order: 3;
			margin-top: 0;
		}

		.hero__osoby {
			--wys: min(21rem, 27vw, 32vh);
			order: 4;
			margin-top: 0.5rem;
		}

		.hero__akapit {
			order: 5;
			max-width: 40rem;
			padding-bottom: clamp(3rem, 2rem + 3vw, 5rem);
		}

		.hero__tabliczka {
			margin-top: 0.9rem;
			padding: 0.4rem 1.1rem 0.45rem;
			font-size: 1.125rem;
		}
	}

	/* Trzy filary: duża biała postać stoi na dolnej krawędzi sekcji, raz z lewej, raz z prawej. */
	.obszar {
		padding-block: var(--odstep-sekcji);
		background: var(--tlo);
		overflow: clip;
	}

	.obszar--mieta { --tlo: var(--mieta); }
	.obszar--roz { --tlo: var(--roz); }
	.obszar--blekit { --tlo: var(--blekit); }

	.obszar__uklad {
		display: grid;
		grid-template-columns: minmax(0, 1fr) auto;
		grid-template-areas:
			"naglowek osoba"
			"tresc tresc";
		gap: 2.25rem 1rem;
		align-items: end;
	}

	.obszar__naglowek {
		grid-area: naglowek;
		display: grid;
		gap: 0.9rem;
	}

	.obszar__naglowek h2,
	.uslugi h2,
	.zespol__naglowek h2,
	.kontakt__naglowek h2 {
		font-size: var(--fs-h2);
		letter-spacing: -0.01em;
	}

	.obszar__lead,
	.zespol__lead,
	.kontakt__lead {
		max-width: 32rem;
		font-family: var(--kroj-naglowki);
		font-size: var(--fs-wstep);
		line-height: 1.3;
	}

	.obszar__osoba {
		grid-area: osoba;
		width: 6.25rem;
		aspect-ratio: 3 / 4;
		color: var(--bialy);
	}

	.obszar__tresc {
		grid-area: tresc;
		container: tresc / inline-size;
		display: grid;
		justify-items: start;
		gap: 1.5rem;
	}

	.obszar__tresc > * {
		width: 100%;
	}

	.obszar__tresc > .przycisk,
	.obszar__tresc > .lancuch {
		width: auto;
	}

	.obszar__tekst {
		max-width: 40rem;
	}

	@media (min-width: 62rem) {
		.obszar__uklad {
			grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
			grid-template-areas:
				"osoba naglowek"
				"osoba tresc";
			gap: 3rem 4rem;
			align-items: start;
		}

		.obszar--odwrocony .obszar__uklad {
			grid-template-columns: minmax(0, 8fr) minmax(0, 4fr);
			grid-template-areas:
				"naglowek osoba"
				"tresc osoba";
		}

		.obszar__osoba {
			align-self: end;
			width: 100%;
			max-width: 24rem;
			aspect-ratio: auto;
			height: min(100%, 30rem);
			min-height: 22rem;
			/* Postać stoi na dolnej krawędzi sekcji. */
			margin-bottom: calc(var(--odstep-sekcji) * -1);
		}

		.obszar--odwrocony .obszar__osoba {
			justify-self: end;
		}

		/* Produkty: nagłówek po lewej, postać po prawej stoi na „półce” z kartami produktów,
		   które zajmują całą szerokość. Bez pustej kolumny obok wysokiej listy kart. */
		.obszar--polka .obszar__uklad {
			grid-template-columns: minmax(0, 8fr) minmax(0, 4fr);
			grid-template-areas:
				"naglowek osoba"
				"tresc tresc";
			row-gap: 2.75rem;
			align-items: end;
		}

		.obszar--polka .obszar__osoba {
			justify-self: end;
			width: 100%;
			max-width: 21rem;
			height: clamp(14rem, 19vw, 20rem);
			min-height: 0;
			margin-bottom: -2.75rem;
		}

		.obszar--polka .obszar__tresc {
			position: relative;
			z-index: 1;
		}

		.obszar--polka .obszar__naglowek {
			padding-bottom: 0.5rem;
		}
	}

	/* Usługi: biała sekcja, lista z kółkami w trzech kolorach marki. */
	.uslugi {
		padding-block: var(--odstep-sekcji);
		background: var(--bialy);
	}

	.uslugi__uklad {
		display: grid;
		grid-template-columns: minmax(0, 1fr);
		gap: 2rem 4rem;
	}

	.uslugi__obszary {
		display: grid;
		grid-template-columns: minmax(0, 1fr);
		gap: 2.25rem 3rem;
	}

	/* Obszar: nazwa z kółkiem w kolorze marki, pod nią usługi. */
	.uslugi__obszar {
		--kolko: var(--mieta);
	}

	.uslugi__obszar:nth-child(3n + 2) { --kolko: var(--roz); }
	.uslugi__obszar:nth-child(3n) { --kolko: var(--blekit); }


	.uslugi__nazwa {
		position: relative;
		padding-left: 2rem;
		font-size: clamp(1.25rem, 1.18rem + 0.3vw, 1.4375rem);
		font-weight: 900;
		line-height: 1.2;
	}

	.uslugi__nazwa::before {
		content: "";
		position: absolute;
		left: 0;
		top: 0.15em;
		width: 1.1rem;
		height: 1.1rem;
		border: 3px solid var(--kolko);
		border-radius: 50%;
	}

	.uslugi__lista {
		margin-top: 0.6rem;
		padding-left: 2rem;
	}

	.uslugi__lista li {
		padding: 0.7rem 0 0.75rem;
		border-bottom: 1px solid var(--linia);
		font-family: var(--kroj-naglowki);
		font-size: 1.125rem;
		line-height: 1.35;
	}

	.uslugi__koniec {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		gap: 1rem 2rem;
	}

	.uslugi__koniec p {
		font-family: var(--kroj-naglowki);
		font-size: var(--fs-wstep);
		line-height: 1.3;
	}

	@media (min-width: 48rem) {
		.uslugi__obszary {
			grid-template-columns: repeat(2, minmax(0, 1fr));
		}
	}

	@media (min-width: 62rem) {
		.uslugi__uklad {
			grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
		}

		.uslugi__obszary,
		.uslugi__koniec {
			grid-column: 2;
		}
	}

	/* Zespół: rysunkowe portrety w kółkach w kolorach postaci; biel rysunku „wsiąka” w kolor. */
	.zespol {
		padding-block: var(--odstep-sekcji);
	}

	.zespol__naglowek {
		display: grid;
		gap: 1rem 4rem;
		margin-bottom: clamp(2.5rem, 2rem + 2.5vw, 4.5rem);
	}

	.zespol__tekst {
		display: grid;
		gap: 1rem;
		max-width: 40rem;
	}

	.zespol__osoby {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		gap: 3rem 2.5rem;
	}

	.osoba-zespolu {
		--kolor: var(--mieta);
		display: grid;
		justify-items: center;
		align-content: start;
		width: min(100%, 20rem);
		text-align: center;
	}

	.osoba-zespolu--roz { --kolor: var(--roz); }
	.osoba-zespolu--blekit { --kolor: var(--blekit); }

	.osoba-zespolu__portret {
		width: min(13rem, 70vw);
		aspect-ratio: 1;
		overflow: hidden;
		border-radius: 50%;
		background: var(--kolor);
		isolation: isolate;
	}

	.osoba-zespolu__portret img {
		width: 100%;
		height: 100%;
		object-fit: cover;
		object-position: center top;
		mix-blend-mode: multiply;
	}

	/* Brak rysunku: biała postać z logo stoi na dole kółka. */
	.osoba-zespolu__zastepstwo {
		display: block;
		width: 100%;
		height: 100%;
		background: var(--bialy);
		-webkit-mask: var(--osoba) center bottom / 72% no-repeat;
		mask: var(--osoba) center bottom / 72% no-repeat;
	}

	.osoba-zespolu__imie {
		margin-top: 1.25rem;
		font-size: 1.5rem;
		font-weight: 900;
	}

	.osoba-zespolu__rola {
		margin-top: 0.3rem;
		font-family: var(--kroj-naglowki);
		font-size: 1.125rem;
		line-height: 1.3;
	}

	.osoba-zespolu__opis {
		margin-top: 0.7rem;
	}

	/* Telefon: mały portret obok tekstu, żeby pięć osób nie zajęło pięciu ekranów. */
	@media (max-width: 39.99rem) {
		.zespol__osoby {
			display: grid;
			gap: 2rem;
		}

		.osoba-zespolu {
			grid-template-columns: 6.5rem minmax(0, 1fr);
			column-gap: 1.1rem;
			justify-items: start;
			width: 100%;
			text-align: left;
		}

		.osoba-zespolu__portret {
			grid-row: 1 / span 3;
			width: 6.5rem;
		}

		.osoba-zespolu__imie {
			margin-top: 0.4rem;
		}

		.osoba-zespolu__opis {
			grid-column: 1 / -1;
			margin-top: 0.8rem;
		}
	}

	@media (min-width: 62rem) {
		.zespol__naglowek {
			grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
			grid-template-rows: auto 1fr;
		}

		.zespol__naglowek h2,
		.zespol__lead {
			grid-column: 1;
		}

		.zespol__tekst {
			grid-column: 2;
			grid-row: 1 / span 2;
			align-self: end;
		}
	}

	/* Kontakt */
	.kontakt {
		padding-block: var(--odstep-sekcji);
		/* Motyw ogniwa z logo jako delikatne tło. */
		background: url("../img/lancuch.svg") 0 0 / 124px 88px;
	}

	.kontakt__uklad {
		display: grid;
		grid-template-columns: minmax(0, 1fr);
		gap: 2.5rem;
	}

	.kontakt__naglowek {
		display: grid;
		gap: 1.1rem;
		align-content: start;
	}

	.kontakt__wstep {
		max-width: 30rem;
	}

	.kontakt__email {
		font-size: clamp(1.375rem, 1.25rem + 0.5vw, 1.625rem);
	}

	.kontakt__email .odnosnik {
		text-decoration-thickness: 2px;
	}

	.kontakt__osoby {
		display: none;
	}

	.formularz {
		display: grid;
		grid-template-columns: minmax(0, 1fr);
		gap: 1.25rem;
	}

	.formularz__stopka {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		gap: 1rem 1.75rem;
		margin-top: 0.5rem;
	}

	.formularz__rodo {
		font-size: var(--fs-maly);
	}

	.formularz__komunikat {
		padding: 0.9rem 1.1rem;
		border-radius: 0.875rem;
		background: var(--mieta);
		font-family: var(--kroj-naglowki);
		font-weight: 900;
	}

	@media (min-width: 40rem) {
		.formularz {
			grid-template-columns: repeat(2, minmax(0, 1fr));
		}

		.pole--szerokie,
		.formularz__stopka,
		.formularz__komunikat {
			grid-column: 1 / -1;
		}
	}

	@media (min-width: 62rem) {
		.kontakt__uklad {
			grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
			gap: 4rem;
		}

		/* Trójka wraca na koniec strony – tym razem mała, obok zaproszenia do rozmowy. */
		.kontakt__osoby {
			--wys: 9rem;
			display: flex;
			align-items: flex-end;
			isolation: isolate;
			margin-top: 1.5rem;
		}

		.kontakt__osoba {
			height: var(--wys);
			aspect-ratio: 4 / 5;
			mix-blend-mode: multiply;
		}

		.kontakt__osoba + .kontakt__osoba {
			margin-left: calc(var(--wys) * -0.13);
		}

		.kontakt__osoba--mieta { color: var(--mieta); }
		.kontakt__osoba--blekit { color: var(--blekit); }

		.kontakt__osoba--roz {
			height: calc(var(--wys) * 1.12);
			color: var(--roz);
		}
	}

	/* Stopka */
	.stopka {
		border-top: 1px solid var(--linia);
	}

	.stopka__uklad {
		display: grid;
		grid-template-columns: minmax(0, 1fr);
		gap: 1.5rem 3rem;
		padding-block: 2.5rem 3.5rem;
	}

	.stopka__nazwa {
		font-family: var(--kroj-naglowki);
		font-size: 1.3125rem;
		font-weight: 900;
	}

	.stopka__haslo {
		margin-top: 0.5rem;
		font-family: var(--kroj-naglowki);
	}

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

	.stopka__prawne {
		max-width: 62rem;
		font-size: var(--fs-maly);
		line-height: 1.55;
	}

	@media (min-width: 62rem) {
		.stopka__uklad {
			grid-template-columns: 1fr auto;
			align-items: start;
		}

		.stopka__prawne {
			grid-column: 1 / -1;
		}
	}

	/* Podstrony i 404 – prosty układ tekstu. */
	.tresc-strony {
		padding-block: clamp(3rem, 2rem + 4vw, 6rem);
	}

	.tresc-strony h1 {
		font-size: var(--fs-h2);
		margin-bottom: 1.5rem;
	}

	.tresc-strony p,
	.tresc-strony__tekst {
		max-width: 40rem;
	}

	.tresc-strony__tekst > * + * {
		margin-top: 1em;
	}

	.tresc-strony__tekst h2 {
		font-size: var(--fs-h3);
		margin-top: 2.25em;
	}

	.tresc-strony__tekst h3 {
		font-size: var(--fs-tekst);
		font-weight: 900;
		margin-top: 1.5em;
	}

	.tresc-strony__tekst ul {
		padding-left: 1.25em;
	}

	.tresc-strony__tekst li + li {
		margin-top: 0.5em;
	}

	.tresc-strony__tekst a {
		text-decoration-line: underline;
		text-underline-offset: 0.15em;
	}

	/* Contact Form 7: arkusz wtyczki jest wyłączony, poniżej tylko to, czego potrzebuje formularz. */
	.wpcf7 .screen-reader-response {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip-path: inset(50%);
		white-space: nowrap;
	}

	.wpcf7 .hidden-fields-container {
		display: none;
	}

	/* Pułapka antyspamowa – poza ekranem, niewidoczna i pomijana przez czytniki ekranu. */
	.pulapka {
		position: absolute;
		left: -100vw;
		width: 1px;
		height: 1px;
		overflow: hidden;
	}

	.wpcf7-form-control-wrap {
		display: block;
	}

	.wpcf7-not-valid-tip {
		display: block;
		margin-top: 0.35rem;
		font-family: var(--kroj-naglowki);
		font-size: 1rem;
		color: #8a2a20;
	}

	.pole .wpcf7-not-valid {
		border-color: #b3473b;
	}

	.wpcf7-spinner {
		display: none;
	}

	.wpcf7 form.submitting .wpcf7-spinner {
		display: inline-block;
		width: 1.25rem;
		height: 1.25rem;
		border: 2px solid var(--tusz);
		border-right-color: transparent;
		border-radius: 50%;
		animation: krec 0.8s linear infinite;
	}

	@keyframes krec { to { rotate: 1turn; } }

	.wpcf7-response-output {
		grid-column: 1 / -1;
		margin: 0;
		padding: 0.9rem 1.1rem;
		border-radius: 0.875rem;
		font-family: var(--kroj-naglowki);
		font-weight: 900;
	}

	.wpcf7 form.init .wpcf7-response-output,
	.wpcf7 form.resetting .wpcf7-response-output,
	.wpcf7 form.submitting .wpcf7-response-output {
		display: none;
	}

	.wpcf7 form.sent .wpcf7-response-output {
		background: var(--mieta);
	}

	.wpcf7 form:is(.invalid, .unaccepted, .payment-required, .failed, .aborted, .spam) .wpcf7-response-output {
		background: #f6d5d1;
	}

	/* Ruch przy przewijaniu (V3.1): postaci „wstają” zza dolnej krawędzi – w sekcjach,
	   w kółkach portretów i przy kontakcie. Tylko CSS (scroll-driven animations);
	   przeglądarki bez tej funkcji i osoby z ograniczonym ruchem widzą stan końcowy. */
	@media (prefers-reduced-motion: no-preference) {
		@supports (animation-timeline: view()) {
			.obszar__osoba,
			.osoba-zespolu__portret > *,
			.kontakt__osoba {
				animation: wstan linear both;
				animation-timeline: view();
				animation-range: entry 5% cover 30%;
			}

			.osoba-zespolu__portret > * {
				animation-range: entry 10% cover 25%;
			}

			.kontakt__osoba:nth-child(2) { animation-range: entry 15% cover 35%; }
			.kontakt__osoba:nth-child(3) { animation-range: entry 25% cover 40%; }
		}
	}

	@keyframes wstan {
		from {
			translate: 0 22%;
			opacity: 0;
		}

		to {
			translate: 0 0;
			opacity: 1;
		}
	}

	/* Portrety reagują na wskazanie tak jak postaci w nagłówku strony. */
	/* transform, nie translate – translate zajmuje animacja „wstań”. */
	.osoba-zespolu__portret img,
	.osoba-zespolu__zastepstwo {
		transition: transform 0.2s ease-out;
	}

	.osoba-zespolu:hover .osoba-zespolu__portret img,
	.osoba-zespolu:hover .osoba-zespolu__zastepstwo {
		transform: translateY(-0.35rem);
	}

	@media (prefers-reduced-motion: reduce) {
		.osoba-zespolu__portret img,
		.osoba-zespolu__zastepstwo {
			transition: none;
		}
	}
}

/* ---------- Podstrona produktu ---------- */

@layer sekcje {
	.produkt-strona__naglowek {
		--tlo: var(--mieta);
		padding-block: clamp(2.5rem, 1.75rem + 3.5vw, 5rem);
		background: var(--tlo);
	}

	.okruszki {
		display: flex;
		gap: 0.5rem;
		margin-bottom: 1.75rem;
		font-family: var(--kroj-naglowki);
		font-size: var(--fs-maly);
	}

	.okruszki a {
		text-underline-offset: 0.2em;
	}

	.produkt-strona__naglowek .produkt__rodzaj {
		display: inline-block;
		background: var(--bialy);
	}

	.produkt-strona__naglowek h1 {
		margin-top: 0.75rem;
		font-size: var(--fs-h1);
		line-height: 0.98;
		letter-spacing: -0.015em;
	}

	.produkt-strona__lead {
		max-width: 38rem;
		margin-top: 1.25rem;
		font-family: var(--kroj-naglowki);
		font-size: var(--fs-wstep);
		line-height: 1.3;
	}

	.produkt-strona__przyciski {
		display: flex;
		flex-wrap: wrap;
		gap: 0.75rem;
		margin-top: 2rem;
	}

	.produkt-strona__uklad {
		display: grid;
		gap: 2.5rem;
		padding-block: var(--odstep-sekcji);
	}

	.produkt-strona__tekst {
		max-width: 40rem;
	}

	.produkt-strona__tekst > :first-child {
		margin-top: 0;
	}

	.produkt-strona__fakty {
		align-self: start;
		padding: 1.5rem 1.5rem 1.6rem;
		border-radius: 1.25rem;
		background: var(--bialy);
	}

	.produkt-strona__fakty h2 {
		font-size: var(--fs-h3);
	}

	.produkt-strona__fakty dl {
		margin: 1rem 0 1.25rem;
	}

	.produkt-strona__fakty dl > div {
		padding-block: 0.6rem;
		border-top: 1px solid var(--linia);
	}

	.produkt-strona__fakty dt {
		font-family: var(--kroj-naglowki);
		font-size: var(--fs-maly);
		font-weight: 900;
	}

	.produkt-strona__fakty dd {
		margin: 0;
	}

	.produkt-strona__inne {
		padding-block: var(--odstep-sekcji);
		border-top: 1px solid var(--linia);
	}

	.produkt-strona__inne h2 {
		margin-bottom: 1.5rem;
		font-size: var(--fs-h3);
	}

	.produkt-strona__inne .produkt__nazwa a {
		text-decoration-thickness: 1.5px;
		text-underline-offset: 0.2em;
	}

	@media (min-width: 62rem) {
		.produkt-strona__uklad {
			grid-template-columns: minmax(0, 7fr) minmax(0, 4fr);
			gap: 4rem;
		}

		.produkt-strona__inne .produkty {
			grid-template-columns: repeat(4, minmax(0, 1fr));
		}
	}
}