/* ==========================================================================
   GOOD KLIMA — arkusz motywu
   Barwy wyjęte ze znaku klienta, nie dobrane z biblioteki:
   granat #0D3082 i czerwień #E3000F to jedyne dwa kolory jego logo.
   Zmierzone kontrasty (WCAG AA wymaga 4,5:1 dla zwykłego tekstu):
     granat na bieli      11,92:1
     czerwień na bieli     4,91:1
     biel na granacie     11,92:1
     atrament na bieli    18,25:1
     szary na bieli        5,93:1
     jasny na granacie     7,87:1
   ========================================================================== */

:root {
	/* Barwy */
	--gk-granat: #0D3082;
	--gk-granat-ciemny: #091F55;
	--gk-czerwien: #E3000F;
	--gk-czerwien-ciemna: #B8000C;
	--gk-atrament: #0F1522;
	--gk-szary: #5B6478;
	--gk-biel: #FFFFFF;
	--gk-papier: #F4F6FA;
	--gk-linia: #DFE4F0;
	--gk-jasny-na-granacie: #C9D2E8;

	/* Odstępy, siatka ośmiu pikseli */
	--gk-o1: 0.25rem;
	--gk-o2: 0.5rem;
	--gk-o3: 0.75rem;
	--gk-o4: 1rem;
	--gk-o5: 1.5rem;
	--gk-o6: 2rem;
	--gk-o7: 2.5rem;
	--gk-o8: 3rem;
	--gk-o9: 4rem;

	/* Rytm sekcji */
	--gk-sekcja: clamp(3.5rem, 6vw, 5.5rem);

	/* Szerokości. JEDEN kontener na całą stronę, od lewej do prawej. */
	--gk-kontener: 80rem;         /* 1280 px */
	--gk-margines: 1.25rem;

	/* Typografia. Największy nagłówek 44 px na dużym ekranie. */
	--gk-h1: clamp(1.75rem, 1.35rem + 1.75vw, 2.75rem);
	--gk-h2: clamp(1.5rem, 1.25rem + 1.1vw, 2.125rem);
	--gk-h3: clamp(1.125rem, 1.05rem + 0.32vw, 1.3125rem);
	--gk-tekst: clamp(1rem, 0.97rem + 0.14vw, 1.0625rem);
	--gk-maly: 0.9375rem;
	--gk-mikro: 0.8125rem;

	/* Trzy grubości i trzy interlinie na całą stronę. */
	--gk-waga-zwykla: 400;
	--gk-waga-srednia: 550;
	--gk-waga-mocna: 700;
	--gk-linia-ciasna: 1.15;
	--gk-linia-srednia: 1.35;
	--gk-linia-luzna: 1.65;

	/* Wykończenie */
	--gk-promien: 6px;
	--gk-promien-duzy: 10px;
	--gk-cien: 0 1px 2px rgba(9, 31, 85, .06), 0 8px 24px rgba(9, 31, 85, .07);
	--gk-cien-mocny: 0 12px 40px rgba(9, 31, 85, .16);
	--gk-krzywa: cubic-bezier(.22, .61, .36, 1);
	--gk-czas: 200ms;
}

/* --------------------------------------------------------------- reset -- */

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

html {
	/* clip tylko na body — na html psuje pozycjonowanie sticky
	   (memory: lekcja-overflow-clip-html-scrolly) */
	scroll-behavior: smooth;
	-webkit-text-size-adjust: 100%;
}

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

body {
	margin: 0;
	overflow-x: clip;
	background: var(--gk-biel);
	color: var(--gk-atrament);
	font-family: "Archivo", system-ui, -apple-system, "Segoe UI", sans-serif;
	font-size: var(--gk-tekst);
	line-height: var(--gk-linia-luzna);
	font-weight: var(--gk-waga-zwykla);
	font-variation-settings: "wdth" 100;
	-webkit-font-smoothing: antialiased;
}

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

h1, h2, h3, h4 {
	margin: 0;
	line-height: var(--gk-linia-ciasna);
	font-weight: var(--gk-waga-mocna);
	letter-spacing: -0.015em;
	text-wrap: balance;
}

p { margin: 0; text-wrap: pretty; }
ul, ol { margin: 0; padding: 0; list-style: none; }

a { color: inherit; text-decoration: none; }

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

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

.gk-pomin {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 200;
	padding: var(--gk-o3) var(--gk-o5);
	background: var(--gk-granat);
	color: var(--gk-biel);
}
.gk-pomin:focus { left: 0; }

/* ----------------------------------------------------------- kontener -- */

.gk-kontener {
	width: 100%;
	max-width: var(--gk-kontener);
	margin-inline: auto;
	padding-inline: var(--gk-margines);
}

@media (min-width: 48rem) { :root { --gk-margines: 2rem; } }
@media (min-width: 75rem) { :root { --gk-margines: 2.5rem; } }

.gk-sekcja { padding-block: var(--gk-sekcja); }

/* Kotwica pod przyklejonym nagłówkiem. Bez tego przejście z menu chowa
   nagłówek sekcji pod paskiem. Zmierzone: pasek 72 px na telefonie,
   84 px na komputerze. */
.gk-sekcja[id], .gk-hero[id], .gk-glowa[id], .gk-stopka[id] { scroll-margin-top: 5.5rem; }
.gk-sekcja--papier { background: var(--gk-papier); }

.gk-sekcja--ciemna {
	background: var(--gk-granat);
	color: var(--gk-biel);
}
.gk-sekcja--ciemna .gk-sekcja__naglowek { color: var(--gk-biel); }

.gk-sekcja__glowa { margin-bottom: var(--gk-o7); }
.gk-sekcja__naglowek {
	font-size: var(--gk-h2);
	font-variation-settings: "wdth" 112;
	color: var(--gk-atrament);
}
.gk-sekcja__lead {
	margin-top: var(--gk-o3);
	color: var(--gk-szary);
	font-size: 1.0625rem;
	line-height: var(--gk-linia-luzna);
}
.gk-sekcja--ciemna .gk-sekcja__lead { color: var(--gk-jasny-na-granacie); }
.gk-sekcja__pod { margin-top: var(--gk-o7); }

/* Każde zdanie w osobnym elemencie. Na szerokim ekranie stoją jedno pod
   drugim, na wąskim płyną jak zwykły akapit. Nigdy twarde <br>. */
.gk-zdanie { display: inline; }
@media (min-width: 62rem) {
	.gk-zdanie { display: block; }
}

.gk-nad {
	display: inline-flex;
	align-items: center;
	gap: var(--gk-o2);
	margin-bottom: var(--gk-o3);
	color: var(--gk-czerwien);
	font-size: var(--gk-mikro);
	font-weight: var(--gk-waga-mocna);
	font-variation-settings: "wdth" 108;
	letter-spacing: .09em;
	text-transform: uppercase;
	line-height: var(--gk-linia-srednia);
}
.gk-nad--jasny { color: #FF8478; }
.gk-nad .gk-ikona { flex: none; }

/* ------------------------------------------------------------ przyciski -- */

.gk-przycisk {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--gk-o2);
	min-height: 3rem;
	padding: var(--gk-o3) var(--gk-o5);
	border: 2px solid transparent;
	border-radius: var(--gk-promien);
	font-weight: var(--gk-waga-mocna);
	font-size: var(--gk-maly);
	font-variation-settings: "wdth" 104;
	letter-spacing: .01em;
	line-height: 1.2;
	cursor: pointer;
	transition: background-color var(--gk-czas) var(--gk-krzywa),
		border-color var(--gk-czas) var(--gk-krzywa),
		color var(--gk-czas) var(--gk-krzywa),
		transform var(--gk-czas) var(--gk-krzywa);
}
.gk-przycisk .gk-ikona { flex: none; }

.gk-przycisk--pelny {
	background: var(--gk-czerwien);
	border-color: var(--gk-czerwien);
	color: var(--gk-biel);
}
.gk-przycisk--pelny:hover,
.gk-przycisk--pelny:focus-visible {
	background: var(--gk-czerwien-ciemna);
	border-color: var(--gk-czerwien-ciemna);
	transform: translateY(-1px);
}

.gk-przycisk--obrys {
	background: transparent;
	border-color: var(--gk-granat);
	color: var(--gk-granat);
}
.gk-przycisk--obrys:hover,
.gk-przycisk--obrys:focus-visible {
	background: var(--gk-granat);
	color: var(--gk-biel);
	transform: translateY(-1px);
}
.gk-sekcja--ciemna .gk-przycisk--obrys,
.gk-hero__panel .gk-przycisk--obrys {
	border-color: var(--gk-jasny-na-granacie);
	color: var(--gk-biel);
}
.gk-sekcja--ciemna .gk-przycisk--obrys:hover,
.gk-sekcja--ciemna .gk-przycisk--obrys:focus-visible,
.gk-hero__panel .gk-przycisk--obrys:hover,
.gk-hero__panel .gk-przycisk--obrys:focus-visible {
	background: var(--gk-biel);
	color: var(--gk-granat);
}

.gk-przycisk--szeroki { width: 100%; }
.gk-przycisk--maly { min-height: 2.5rem; padding: var(--gk-o2) var(--gk-o4); font-size: var(--gk-mikro); }

/* -------------------------------------------------------------- nagłówek -- */

.gk-naglowek {
	position: sticky;
	top: 0;
	z-index: 90;
	background: var(--gk-biel);
	border-bottom: 1px solid var(--gk-linia);
	transition: box-shadow var(--gk-czas) var(--gk-krzywa);
}
.gk-naglowek.gk-naglowek--przewiniety { box-shadow: var(--gk-cien); }

/* Górny, cienki pasek: adres, godziny, ocena. Po przewinięciu chowa się,
   żeby przyklejone menu nie zjadało ekranu przy czytaniu. */
.gk-pasek-gorny {
	display: grid;
	grid-template-rows: 1fr;
	background: var(--gk-granat);
	color: var(--gk-jasny-na-granacie);
	font-size: 0.8125rem;
	overflow: hidden;
	transition: grid-template-rows 260ms var(--gk-krzywa),
		opacity 200ms var(--gk-krzywa);
}
.gk-pasek-gorny > * { min-height: 0; }
.gk-naglowek--przewiniety .gk-pasek-gorny {
	grid-template-rows: 0fr;
	opacity: 0;
}
.gk-pasek-gorny__rzad {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0 var(--gk-o5);
	padding-block: 0;
}

.gk-pasek-gorny p,
.gk-pasek-gorny a {
	display: inline-flex;
	align-items: center;
	gap: var(--gk-o2);
	/* Pole dotyku, nie sam tekst. Zmierzone: bez tego odnośnik oceny
	   miał 18 px przy progu 44 px. */
	min-height: 44px;
	line-height: var(--gk-linia-srednia);
}
.gk-pasek-gorny .gk-ikona { flex: none; opacity: .75; }
.gk-pasek-gorny__ocena {
	margin-left: auto;
	color: var(--gk-biel);
	font-weight: var(--gk-waga-srednia);
}
.gk-pasek-gorny__ocena .gk-ikona { color: #FF8478; opacity: 1; }
a.gk-pasek-gorny__ocena:hover { text-decoration: underline; text-underline-offset: 3px; }

/* Na wąskim ekranie zostaje sama ocena. Adres i tak jest w stopce
   i w sekcji obszaru, a górny pasek ma nie rosnąć na trzy wiersze. */
@media (max-width: 47.99rem) {
	.gk-pasek-gorny p.gk-pasek-gorny__adres,
	.gk-pasek-gorny p.gk-pasek-gorny__godziny { display: none; }
	.gk-pasek-gorny__rzad { justify-content: center; }
	.gk-pasek-gorny__ocena { margin-left: 0; }
}

.gk-naglowek__pas { background: var(--gk-biel); }

.gk-naglowek__rzad {
	display: flex;
	align-items: center;
	gap: var(--gk-o5);
	min-height: 4.5rem;
}
@media (min-width: 62rem) {
	.gk-naglowek__rzad { min-height: 5.25rem; }
}

.gk-znak {
	display: inline-flex;
	align-items: center;
	gap: var(--gk-o3);
	flex: none;
	min-height: 44px;
	margin-right: auto;
}
.gk-znak__svg { width: 2.75rem; height: auto; flex: none; }
@media (min-width: 62rem) { .gk-znak__svg { width: 3.25rem; } }

.gk-znak__tekst { display: none; line-height: 1.1; }
@media (min-width: 30rem) { .gk-znak__tekst { display: block; } }

.gk-znak__tekst strong {
	display: block;
	font-size: 1.1875rem;
	font-weight: var(--gk-waga-mocna);
	font-variation-settings: "wdth" 116;
	letter-spacing: -0.01em;
	color: var(--gk-granat);
}
.gk-znak__myslnik { color: var(--gk-czerwien); }
.gk-znak__pod {
	display: block;
	margin-top: 2px;
	font-size: 0.6875rem;
	font-weight: var(--gk-waga-srednia);
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--gk-szary);
}

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

.gk-menu {
	display: flex;
	align-items: center;
	gap: var(--gk-o4);
}
.gk-menu a {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 44px;
	min-width: 44px;
	padding-block: var(--gk-o2);
	font-size: var(--gk-maly);
	font-weight: var(--gk-waga-srednia);
	color: var(--gk-atrament);
	transition: color var(--gk-czas) var(--gk-krzywa);
}
.gk-menu a::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 2px;
	background: var(--gk-czerwien);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform var(--gk-czas) var(--gk-krzywa);
}
.gk-menu a:hover,
.gk-menu a:focus-visible { color: var(--gk-granat); }
.gk-menu a:hover::after,
.gk-menu a:focus-visible::after { transform: scaleX(1); }
.gk-menu .current-menu-item > a { color: var(--gk-granat); font-weight: var(--gk-waga-mocna); }
.gk-menu .current-menu-item > a::after { transform: scaleX(1); }

.gk-naglowek__akcje {
	display: flex;
	align-items: center;
	gap: var(--gk-o3);
	flex: none;
}

.gk-telefon-naglowek {
	display: inline-flex;
	align-items: center;
	gap: var(--gk-o2);
	min-height: 2.75rem;
	padding: var(--gk-o2) var(--gk-o4);
	border-radius: var(--gk-promien);
	background: var(--gk-granat);
	color: var(--gk-biel);
	font-weight: var(--gk-waga-mocna);
	font-size: var(--gk-maly);
	font-variation-settings: "wdth" 104;
	transition: background-color var(--gk-czas) var(--gk-krzywa);
}
.gk-telefon-naglowek:hover,
.gk-telefon-naglowek:focus-visible { background: var(--gk-granat-ciemny); }
.gk-telefon-naglowek__numer { display: none; }
@media (min-width: 30rem) { .gk-telefon-naglowek__numer { display: inline; } }

.gk-hamburger {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.75rem;
	height: 2.75rem;
	padding: 0;
	border: 1px solid var(--gk-linia);
	border-radius: var(--gk-promien);
	background: var(--gk-biel);
	cursor: pointer;
}
@media (min-width: 62rem) { .gk-hamburger { display: none; } }
.gk-hamburger__kreski { display: grid; gap: 5px; width: 20px; }
.gk-hamburger__kreski i {
	display: block;
	height: 2px;
	background: var(--gk-granat);
	border-radius: 2px;
}

/* ------------------------------------------------------- menu na telefon -- */

.gk-nakladka {
	position: fixed;
	inset: 0;
	z-index: 120;
	display: flex;
	flex-direction: column;
	background: var(--gk-biel);
	transform: translateX(100%);
	transition: transform 260ms var(--gk-krzywa);
}
.gk-nakladka[hidden] { display: none; }
.gk-nakladka.gk-nakladka--otwarta { transform: translateX(0); }

.gk-nakladka__gora {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--gk-o4);
	padding: var(--gk-o5) var(--gk-margines);
	border-bottom: 1px solid var(--gk-linia);
}
.gk-nakladka__tytul {
	font-weight: var(--gk-waga-mocna);
	font-variation-settings: "wdth" 114;
	color: var(--gk-granat);
}
.gk-nakladka__zamknij {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.75rem;
	height: 2.75rem;
	border: 1px solid var(--gk-linia);
	border-radius: var(--gk-promien);
	background: var(--gk-biel);
	color: var(--gk-granat);
	cursor: pointer;
}

.gk-nakladka__nawigacja {
	flex: 1;
	overflow-y: auto;
	padding: var(--gk-o4) var(--gk-margines);
}
.gk-menu-mobilne a {
	display: block;
	padding: var(--gk-o4) 0;
	border-bottom: 1px solid var(--gk-linia);
	font-size: 1.125rem;
	font-weight: var(--gk-waga-srednia);
}
.gk-menu-mobilne .current-menu-item > a { color: var(--gk-granat); font-weight: var(--gk-waga-mocna); }

.gk-nakladka__dol {
	padding: var(--gk-o5) var(--gk-margines);
	border-top: 1px solid var(--gk-linia);
	background: var(--gk-papier);
}
.gk-nakladka__adres {
	margin-top: var(--gk-o3);
	color: var(--gk-szary);
	font-size: var(--gk-maly);
	overflow-wrap: anywhere;
}

body.gk-zablokowane { overflow: hidden; }

/* ---------------------------------------------------------------- hero -- */

/* Układ kafelkowy. Pola różnej wielkości zamiast jednego pasa:
   granatowy kafel z nagłówkiem, duże zdjęcie obok, pod spodem cztery
   kafle z liczbami. Gość dostaje komplet bez przewijania. */
.gk-hero {
	padding-block: clamp(1.25rem, 2.5vw, 2rem) clamp(2.5rem, 5vw, 4rem);
	background: linear-gradient(180deg, var(--gk-papier) 0%, var(--gk-biel) 74%);
}

.gk-bento {
	display: grid;
	gap: var(--gk-o3);
	grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (min-width: 56rem) {
	.gk-bento { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* Kafel z nagłówkiem: dwie kolumny z czterech, dwa wiersze wysokości. */
.gk-bento__tekst {
	grid-column: 1 / -1;
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: clamp(1.75rem, 4vw, 3rem);
	background: var(--gk-granat);
	border-radius: var(--gk-promien-duzy);
	color: var(--gk-biel);
}
@media (min-width: 56rem) {
	.gk-bento__tekst { grid-column: span 2; }
}

.gk-bento__naglowek {
	font-size: var(--gk-h1);
	font-variation-settings: "wdth" 114;
	color: var(--gk-biel);
}
.gk-bento__lead {
	margin-top: var(--gk-o4);
	color: var(--gk-jasny-na-granacie);
	font-size: 1.0625rem;
	line-height: var(--gk-linia-luzna);
}
.gk-bento__akcje {
	display: flex;
	flex-wrap: wrap;
	gap: var(--gk-o3);
	margin-top: var(--gk-o6);
}
.gk-bento__tekst .gk-przycisk--obrys {
	border-color: var(--gk-jasny-na-granacie);
	color: var(--gk-biel);
}
.gk-bento__tekst .gk-przycisk--obrys:hover,
.gk-bento__tekst .gk-przycisk--obrys:focus-visible {
	background: var(--gk-biel);
	color: var(--gk-granat);
}

/* Kafel ze zdjęciem. */
.gk-bento__obraz {
	position: relative;
	grid-column: 1 / -1;
	border-radius: var(--gk-promien-duzy);
	overflow: hidden;
	background: var(--gk-papier);
}
@media (min-width: 56rem) {
	.gk-bento__obraz { grid-column: span 2; }
}
.gk-bento__obraz img {
	width: 100%;
	height: 100%;
	min-height: clamp(13rem, 46vw, 18rem);
	object-fit: cover;
	display: block;
}
@media (min-width: 56rem) {
	.gk-bento__obraz img { min-height: 22rem; }
}

/* Cztery kafle z liczbami. */
.gk-kafel {
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: var(--gk-o1);
	position: relative;
	padding: var(--gk-o5);
	background: var(--gk-biel);
	border: 1px solid var(--gk-linia);
	border-radius: var(--gk-promien-duzy);
	min-height: 7.5rem;
	transition: border-color var(--gk-czas) var(--gk-krzywa),
		box-shadow var(--gk-czas) var(--gk-krzywa);
}
a.gk-kafel:hover,
a.gk-kafel:focus-visible {
	border-color: #B9C4E0;
	box-shadow: var(--gk-cien);
}
.gk-kafel__liczba {
	font-size: clamp(1.5rem, 1.1rem + 1.5vw, 2.25rem);
	font-weight: var(--gk-waga-mocna);
	font-variation-settings: "wdth" 118;
	font-variant-numeric: tabular-nums;
	letter-spacing: -0.02em;
	line-height: 1.05;
	color: var(--gk-granat);
	overflow-wrap: anywhere;
}
.gk-kafel__opis {
	color: var(--gk-szary);
	font-size: var(--gk-maly);
	line-height: var(--gk-linia-srednia);
}
.gk-kafel--ocena { background: var(--gk-papier); }
.gk-kafel__gwiazdka {
	position: absolute;
	top: var(--gk-o4);
	right: var(--gk-o4);
	color: var(--gk-czerwien);
}
a.gk-kafel .gk-kafel__opis {
	text-decoration: underline;
	text-decoration-color: var(--gk-linia);
	text-underline-offset: 3px;
}
a.gk-kafel:hover .gk-kafel__opis { text-decoration-color: var(--gk-czerwien); }

/* --------------------------------------------------------------- karty -- */

.gk-karty {
	display: grid;
	gap: var(--gk-o5);
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 17.5rem), 1fr));
}
@supports (grid-template-rows: subgrid) {
	@media (min-width: 56rem) {
		.gk-karty { grid-template-rows: auto auto auto 1fr auto; }
		.gk-karta { grid-row: span 5; grid-template-rows: subgrid; gap: 0; }
		.gk-karta__glowa { margin-bottom: var(--gk-o3); }
		.gk-karta__tytul { margin-bottom: var(--gk-o3); }
		.gk-karta__opis { margin-bottom: var(--gk-o2); }
	}
}

.gk-karta {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: var(--gk-o3);
	padding-top: var(--gk-o6);
	border-top: 2px solid var(--gk-granat);
}
.gk-karta::after {
	content: "";
	position: absolute;
	top: -2px;
	left: 0;
	width: 0;
	height: 2px;
	background: var(--gk-czerwien);
	transition: width 320ms var(--gk-krzywa);
}
.gk-karta:hover::after,
.gk-karta:focus-within::after { width: 100%; }

.gk-karta__numer {
	font-size: var(--gk-mikro);
	font-weight: var(--gk-waga-mocna);
	font-variant-numeric: tabular-nums;
	letter-spacing: .12em;
	color: #61708F;
}
.gk-karta__ikona {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.75rem;
	height: 2.75rem;
	color: var(--gk-czerwien);
}
.gk-karta__ikona .gk-ikona { width: 100%; height: auto; stroke-width: 1.35; }
.gk-karta__glowa {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--gk-o4);
}

.gk-karta__tytul {
	font-size: var(--gk-h3);
	font-variation-settings: "wdth" 108;
	color: var(--gk-granat);
}
.gk-karta__tytul a { display: flex; align-items: center; min-height: 44px; }
.gk-karta__tytul a:hover { color: var(--gk-czerwien); }
.gk-karta__opis {
	color: var(--gk-szary);
	font-size: var(--gk-maly);
	line-height: var(--gk-linia-luzna);
}

.gk-karta__zakres {
	display: grid;
	gap: var(--gk-o2);
	margin-top: var(--gk-o2);
	padding-top: var(--gk-o4);
	border-top: 1px solid var(--gk-linia);
}
.gk-karty { gap: var(--gk-o7) var(--gk-o8); }
.gk-karta__zakres li {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	gap: var(--gk-o2);
	align-items: start;
	font-size: var(--gk-maly);
	line-height: var(--gk-linia-srednia);
}
.gk-karta__zakres .gk-ikona { margin-top: 3px; color: var(--gk-czerwien); }

.gk-karta__wiecej {
	display: inline-flex;
	align-items: center;
	gap: var(--gk-o2);
	min-height: 44px;
	margin-top: auto;
	padding-top: var(--gk-o4);
	color: var(--gk-granat);
	font-size: var(--gk-maly);
	font-weight: var(--gk-waga-mocna);
}
.gk-karta__wiecej .gk-ikona { transition: transform var(--gk-czas) var(--gk-krzywa); }
.gk-karta:hover .gk-karta__wiecej .gk-ikona { transform: translateX(3px); }
.gk-karta__wiecej:hover { color: var(--gk-czerwien); }

/* --------------------------------------------------------------- marki -- */

.gk-marki__glowa {
	display: grid;
	gap: var(--gk-o5);
	margin-bottom: var(--gk-o7);
}
@media (min-width: 56rem) {
	.gk-marki__glowa {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		gap: var(--gk-o9);
		align-items: end;
	}
}
.gk-marki__lead {
	color: var(--gk-jasny-na-granacie);
	line-height: var(--gk-linia-luzna);
}

.gk-marki__zestaw {
	display: grid;
	gap: var(--gk-o6);
	align-items: start;
	padding-top: var(--gk-o7);
	border-top: 1px solid rgba(255, 255, 255, .2);
}
@media (min-width: 56rem) {
	.gk-marki__zestaw { grid-template-columns: auto minmax(0, 1fr); gap: var(--gk-o9); }
}
.gk-marki__licznik { display: grid; gap: var(--gk-o1); }
.gk-marki__licznik strong {
	font-size: clamp(4rem, 2.5rem + 6vw, 7.5rem);
	font-weight: var(--gk-waga-mocna);
	font-variation-settings: "wdth" 122;
	font-variant-numeric: tabular-nums;
	letter-spacing: -0.045em;
	line-height: .82;
	color: var(--gk-biel);
}
.gk-marki__licznik span {
	font-size: var(--gk-mikro);
	font-weight: var(--gk-waga-mocna);
	letter-spacing: .14em;
	text-transform: uppercase;
	color: #FF8478;
}

.gk-marki {
	display: flex;
	flex-wrap: wrap;
	gap: 0 var(--gk-o5);
}
.gk-marki__pozycja {
	position: relative;
	padding-block: var(--gk-o3);
	padding-right: var(--gk-o5);
	font-size: clamp(1rem, 0.9rem + 0.4vw, 1.25rem);
	font-weight: var(--gk-waga-mocna);
	font-variation-settings: "wdth" 108;
	letter-spacing: -0.01em;
	color: var(--gk-biel);
	transition: color var(--gk-czas) var(--gk-krzywa);
}
/* Kreska rozdzielająca zamiast ramki wokół każdej nazwy. */
.gk-marki__pozycja::after {
	content: "";
	position: absolute;
	right: 0;
	top: 50%;
	width: 1px;
	height: 1.1em;
	transform: translateY(-50%);
	background: rgba(255, 255, 255, .28);
}
.gk-marki__pozycja:last-child::after { display: none; }
.gk-marki__pozycja:hover { color: #FF9E95; }

.gk-marki__stopka {
	margin-top: var(--gk-o6);
	color: var(--gk-jasny-na-granacie);
	font-size: var(--gk-maly);
	line-height: var(--gk-linia-luzna);
}
.gk-marki__stopka a {
	color: var(--gk-biel);
	font-weight: var(--gk-waga-mocna);
	text-decoration: underline;
	text-underline-offset: 3px;
}
.gk-marki__stopka a:hover { color: #FF9E95; }

/* ------------------------------------------------------------ o firmie -- */

.gk-ofirmie {
	display: grid;
	gap: var(--gk-o7);
	align-items: center;
}
@media (min-width: 56rem) {
	.gk-ofirmie {
		grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
		gap: var(--gk-o9);
	}
}
.gk-ofirmie__obraz {
	margin: 0;
	border-radius: var(--gk-promien-duzy);
	overflow: hidden;
	box-shadow: var(--gk-cien);
}
.gk-ofirmie__obraz img {
	width: 100%;
	aspect-ratio: 3 / 2;
	object-fit: cover;
}

.gk-proza { color: var(--gk-szary); line-height: var(--gk-linia-luzna); }
.gk-proza > * + * { margin-top: var(--gk-o5); }
.gk-proza p { margin: 0; }
.gk-proza strong { color: var(--gk-atrament); font-weight: var(--gk-waga-mocna); }
.gk-proza h2, .gk-proza h3 { color: var(--gk-granat); margin-top: var(--gk-o7); }
.gk-proza h2 { font-size: var(--gk-h2); font-variation-settings: "wdth" 110; }
.gk-proza h3 { font-size: var(--gk-h3); }
.gk-proza ul { display: grid; gap: var(--gk-o2); }
.gk-proza ul li { position: relative; padding-left: 1.5rem; }
.gk-proza ul li::before {
	content: "";
	position: absolute;
	left: 0;
	top: .7em;
	width: 7px;
	height: 7px;
	border-radius: 2px;
	background: var(--gk-czerwien);
}
.gk-proza a { color: var(--gk-granat); text-decoration: underline; text-underline-offset: 3px; }
.gk-proza a:hover { color: var(--gk-czerwien); }
.gk-proza--strona { margin-top: 0; }

.gk-ofirmie__tekst .gk-proza { margin-top: var(--gk-o4); }

/* ------------------------------------------------------------- galeria -- */

.gk-galeria {
	display: grid;
	gap: var(--gk-o3);
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr));
}
@media (min-width: 56rem) {
	/* Pierwsze zdjęcie większe. Ósemka jednakowych kwadratów czyta się
	   jak katalog produktów, nie jak przegląd realizacji. */
	.gk-galeria:not(.gk-galeria--pelna) { grid-template-columns: repeat(4, minmax(0, 1fr)); }
	.gk-galeria:not(.gk-galeria--pelna) .gk-galeria__kafel:first-child {
		grid-column: span 2;
		grid-row: span 2;
	}
	.gk-galeria:not(.gk-galeria--pelna) .gk-galeria__kafel:first-child img {
		aspect-ratio: auto;
		height: 100%;
	}
}
.gk-galeria--pelna {
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 13.5rem), 1fr));
}

.gk-galeria__kafel {
	position: relative;
	display: block;
	border-radius: var(--gk-promien);
	overflow: hidden;
	background: var(--gk-papier);
	cursor: zoom-in;
}
.gk-galeria__kafel img {
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	transition: transform 320ms var(--gk-krzywa);
}
.gk-galeria__kafel:hover img,
.gk-galeria__kafel:focus-visible img { transform: scale(1.04); }

.gk-galeria__lupa {
	position: absolute;
	right: var(--gk-o3);
	bottom: var(--gk-o3);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.25rem;
	height: 2.25rem;
	border-radius: var(--gk-promien);
	background: rgba(13, 48, 130, .88);
	color: var(--gk-biel);
	opacity: 0;
	transform: translateY(6px);
	transition: opacity var(--gk-czas) var(--gk-krzywa),
		transform var(--gk-czas) var(--gk-krzywa);
}
.gk-galeria__kafel:hover .gk-galeria__lupa,
.gk-galeria__kafel:focus-visible .gk-galeria__lupa { opacity: 1; transform: translateY(0); }

/* Na urządzeniach dotykowych nie ma najechania, więc znak jest widoczny
   od razu — inaczej nic nie sugeruje, że kafel się powiększa. */
@media (hover: none) {
	.gk-galeria__lupa { opacity: 1; transform: none; }
}

/* -------------------------------------------------------------- proces -- */

.gk-proces {
	display: grid;
	gap: var(--gk-o5);
	counter-reset: krok;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
}
.gk-proces__krok {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: var(--gk-o2);
	padding-top: var(--gk-o7);
}
/* Kreska łącząca kroki. Cztery osobne pudełka nie pokazują, że to
   kolejność; linia pokazuje. */
.gk-proces__krok::before {
	content: "";
	position: absolute;
	top: 1.375rem;
	left: 0;
	right: calc(var(--gk-o5) * -1);
	height: 1px;
	background: var(--gk-linia);
}
.gk-proces__krok:last-child::before { right: 0; }
.gk-proces__ikona {
	position: absolute;
	top: 0;
	left: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.75rem;
	height: 2.75rem;
	border-radius: 50%;
	background: var(--gk-granat);
	color: var(--gk-biel);
	z-index: 1;
}
.gk-proces__numer {
	display: block;
	margin-bottom: var(--gk-o1);
	font-size: var(--gk-mikro);
	font-weight: var(--gk-waga-mocna);
	font-variant-numeric: tabular-nums;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--gk-czerwien);
}
.gk-proces__tytul { font-size: var(--gk-h3); color: var(--gk-granat); }
.gk-proces__opis { color: var(--gk-szary); font-size: var(--gk-maly); line-height: var(--gk-linia-luzna); }

/* -------------------------------------------------------------- obszar -- */

.gk-obszar {
	display: grid;
	gap: var(--gk-o7);
	align-items: center;
}
@media (min-width: 56rem) {
	.gk-obszar {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		gap: var(--gk-o9);
	}
}
.gk-miasta {
	display: grid;
	gap: var(--gk-o2);
	margin-top: var(--gk-o5);
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 9rem), 1fr));
}
.gk-miasta__pozycja {
	display: flex;
	align-items: center;
	gap: var(--gk-o2);
	padding: var(--gk-o3) var(--gk-o4);
	background: var(--gk-papier);
	border-radius: var(--gk-promien);
	font-weight: var(--gk-waga-srednia);
	font-size: var(--gk-maly);
}
.gk-miasta__pozycja .gk-ikona { flex: none; color: var(--gk-czerwien); }

/* Siedziba pod listą miast. */
.gk-obszar__siedziba {
	margin-top: var(--gk-o6);
	padding-top: var(--gk-o5);
	border-top: 1px solid var(--gk-linia);
}
.gk-obszar__etykieta {
	display: block;
	margin-bottom: var(--gk-o2);
	color: var(--gk-czerwien);
	font-size: var(--gk-mikro);
	font-weight: var(--gk-waga-mocna);
	letter-spacing: .09em;
	text-transform: uppercase;
}
.gk-obszar__adres {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	gap: var(--gk-o3);
	align-items: center;
	font-weight: var(--gk-waga-srednia);
	overflow-wrap: anywhere;
}
.gk-obszar__adres .gk-ikona { color: var(--gk-granat); }
.gk-obszar__wskazowki {
	display: inline-flex;
	align-items: center;
	gap: var(--gk-o2);
	min-height: 44px;
	margin-top: var(--gk-o2);
	color: var(--gk-granat);
	font-size: var(--gk-maly);
	font-weight: var(--gk-waga-mocna);
	text-decoration: underline;
	text-underline-offset: 4px;
}
.gk-obszar__wskazowki .gk-ikona { transition: transform var(--gk-czas) var(--gk-krzywa); }
.gk-obszar__wskazowki:hover { color: var(--gk-czerwien); }
.gk-obszar__wskazowki:hover .gk-ikona { transform: translateX(3px); }

/* --------------------------------------------------------------- mapa -- */

/* Ramka Google to około 900 KB i ponad dwadzieścia żądań. Do kliknięcia
   pokazujemy własną zasłonę: siatka ulic rysowana gradientami, pinezka
   i adres. Zero żądań na zewnątrz, zero danych wysłanych bez zgody. */
.gk-mapa {
	position: relative;
	margin: 0;
	border-radius: var(--gk-promien-duzy);
	overflow: hidden;
	border: 1px solid var(--gk-linia);
	background: var(--gk-papier);
	box-shadow: var(--gk-cien);
}
.gk-mapa iframe {
	width: 100%;
	height: clamp(20rem, 38vw, 29rem);
	border: 0;
	display: block;
	/* Mapy Google są jaskrawe i wychodzą z palety. Delikatne przygaszenie
	   nasycenia sadza je w kolorystyce strony, nie odbierając czytelności. */
	filter: saturate(.82) contrast(1.03);
}
.gk-mapa__podpis {
	display: flex;
	align-items: center;
	gap: var(--gk-o2);
	padding: var(--gk-o3) var(--gk-o4);
	border-top: 1px solid var(--gk-linia);
	background: var(--gk-biel);
	color: var(--gk-szary);
	font-size: var(--gk-mikro);
}
.gk-mapa__podpis .gk-ikona { color: var(--gk-czerwien); flex: none; }

/* ----------------------------------------------------------------- FAQ -- */

.gk-faq {
	display: grid;
	border-top: 1px solid var(--gk-linia);
}
.gk-faq__pozycja { border-bottom: 1px solid var(--gk-linia); }
.gk-faq__pytanie {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--gk-o4);
	padding: var(--gk-o5) 0;
	cursor: pointer;
	list-style: none;
}
.gk-faq__pytanie::-webkit-details-marker { display: none; }
.gk-faq__pytanie h3 {
	font-size: var(--gk-h3);
	color: var(--gk-granat);
	font-weight: var(--gk-waga-mocna);
}
.gk-faq__pytanie:hover h3 { color: var(--gk-czerwien); }

.gk-faq__znak {
	position: relative;
	flex: none;
	width: 1.5rem;
	height: 1.5rem;
	border-radius: 4px;
	background: var(--gk-papier);
}
.gk-faq__znak::before,
.gk-faq__znak::after {
	content: "";
	position: absolute;
	left: 50%;
	top: 50%;
	background: var(--gk-granat);
	transform: translate(-50%, -50%);
	transition: opacity var(--gk-czas) var(--gk-krzywa);
}
.gk-faq__znak::before { width: 11px; height: 2px; }
.gk-faq__znak::after { width: 2px; height: 11px; }
.gk-faq__pozycja[open] .gk-faq__znak::after { opacity: 0; }

.gk-faq__odpowiedz {
	padding: 0 0 var(--gk-o5);
	color: var(--gk-szary);
	line-height: var(--gk-linia-luzna);
}
.gk-faq__znak { background: transparent; border: 1px solid var(--gk-linia); }
.gk-faq__pozycja[open] .gk-faq__znak { border-color: var(--gk-czerwien); }
.gk-faq__pozycja[open] .gk-faq__znak::before { background: var(--gk-czerwien); }

/* ------------------------------------------------------------- kontakt -- */

.gk-kontakt {
	display: grid;
	gap: var(--gk-o7);
	align-items: start;
}
@media (min-width: 56rem) {
	.gk-kontakt {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		gap: var(--gk-o9);
	}
}
.gk-kontakt__lead { margin-top: var(--gk-o3); color: var(--gk-jasny-na-granacie); line-height: var(--gk-linia-luzna); }

.gk-kontakt__telefon {
	display: inline-flex;
	align-items: center;
	gap: var(--gk-o3);
	min-height: 48px;
	padding-block: var(--gk-o1);
	margin-top: var(--gk-o6);
	font-size: clamp(1.5rem, 1.2rem + 1.3vw, 2rem);
	font-weight: var(--gk-waga-mocna);
	font-variation-settings: "wdth" 112;
	color: var(--gk-biel);
	line-height: 1.1;
}
.gk-kontakt__telefon .gk-ikona { color: #FF6B5E; flex: none; }
.gk-kontakt__telefon:hover { color: #FF9E95; }

.gk-kontakt__lista {
	display: grid;
	gap: var(--gk-o3);
	margin-top: var(--gk-o5);
	color: var(--gk-jasny-na-granacie);
	font-size: var(--gk-maly);
}
.gk-kontakt__lista li {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	gap: var(--gk-o3);
	align-items: start;
	overflow-wrap: anywhere;
}
/* Wiersz z adresem to pole dotyku, więc ma wysokość palca, nie wiersza. */
.gk-kontakt__lista li > a,
.gk-kontakt__lista li > span { display: block; min-height: 24px; padding-block: 10px; }
.gk-kontakt__lista .gk-ikona { margin-top: 12px; }
.gk-kontakt__lista a:hover { color: var(--gk-biel); text-decoration: underline; text-underline-offset: 3px; }

.gk-zacheta {
	margin-top: var(--gk-o7);
	padding: var(--gk-o5);
	border-left: 3px solid var(--gk-czerwien);
	background: rgba(255, 255, 255, .07);
	border-radius: 0 var(--gk-promien) var(--gk-promien) 0;
}
.gk-zacheta__naglowek {
	font-size: var(--gk-h3);
	color: var(--gk-biel);
	margin-bottom: var(--gk-o2);
}
.gk-zacheta p { color: var(--gk-jasny-na-granacie); font-size: var(--gk-maly); line-height: var(--gk-linia-luzna); }

/* ----------------------------------------------------------- formularz -- */

.gk-formularz {
	display: grid;
	gap: var(--gk-o4);
	padding: var(--gk-o6);
	background: var(--gk-biel);
	border-radius: var(--gk-promien-duzy);
	color: var(--gk-atrament);
	box-shadow: var(--gk-cien-mocny);
}
.gk-formularz__tytul {
	font-size: var(--gk-h3);
	color: var(--gk-granat);
	font-variation-settings: "wdth" 108;
}
.gk-formularz__podpowiedz {
	margin-top: calc(var(--gk-o2) * -1);
	color: var(--gk-szary);
	font-size: var(--gk-mikro);
}

.gk-pole { display: grid; gap: var(--gk-o2); }
.gk-pole__para { display: grid; gap: var(--gk-o4); }
@media (min-width: 30rem) {
	.gk-pole__para { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.gk-pole__etykieta {
	font-size: var(--gk-mikro);
	font-weight: var(--gk-waga-mocna);
	letter-spacing: .04em;
	text-transform: uppercase;
	color: var(--gk-szary);
}
.gk-pole__etykieta span { color: var(--gk-czerwien); }

.gk-pole__wejscie {
	width: 100%;
	min-height: 3rem;
	padding: var(--gk-o3) var(--gk-o4);
	border: 1px solid var(--gk-linia);
	border-radius: var(--gk-promien);
	background: var(--gk-biel);
	font-size: 1rem;
	transition: border-color var(--gk-czas) var(--gk-krzywa),
		box-shadow var(--gk-czas) var(--gk-krzywa);
}
textarea.gk-pole__wejscie { min-height: 8rem; resize: vertical; line-height: var(--gk-linia-luzna); }
.gk-pole__wejscie:hover { border-color: #B9C4E0; }
.gk-pole__wejscie:focus {
	outline: none;
	border-color: var(--gk-granat);
	box-shadow: 0 0 0 3px rgba(13, 48, 130, .14);
}
.gk-pole__wejscie[aria-invalid="true"] { border-color: var(--gk-czerwien); }

.gk-pole__blad {
	display: none;
	color: var(--gk-czerwien-ciemna);
	font-size: var(--gk-mikro);
	line-height: var(--gk-linia-srednia);
}
.gk-pole__blad.gk-pole__blad--widoczny { display: block; }

.gk-zgoda {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	gap: var(--gk-o3);
	align-items: start;
	font-size: var(--gk-mikro);
	line-height: var(--gk-linia-srednia);
	color: var(--gk-szary);
	cursor: pointer;
}
.gk-zgoda { min-height: 44px; align-content: center; }
.gk-zgoda input {
	width: 1.5rem;
	height: 1.5rem;
	margin: 0;
	accent-color: var(--gk-granat);
	flex: none;
}
.gk-zgoda a { color: var(--gk-granat); text-decoration: underline; text-underline-offset: 3px; }

/* Pułapka na roboty: poza ekranem, ale w drzewie dokumentu. */
.gk-pulapka {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.gk-formularz__komunikat {
	display: none;
	padding: var(--gk-o4);
	border-radius: var(--gk-promien);
	font-size: var(--gk-maly);
	line-height: var(--gk-linia-srednia);
}
.gk-formularz__komunikat--ok {
	display: block;
	background: #E8F3EC;
	color: #1B5E33;
}
.gk-formularz__komunikat--blad {
	display: block;
	background: #FDECEC;
	color: #97000B;
}
.gk-formularz.gk-formularz--wysyla { opacity: .7; pointer-events: none; }

/* -------------------------------------------------------- głowa strony -- */

.gk-glowa {
	padding-block: clamp(2rem, 3.5vw, 3rem) var(--gk-o8);
	background: linear-gradient(180deg, var(--gk-papier) 0%, var(--gk-biel) 100%);
	border-bottom: 1px solid var(--gk-linia);
}
.gk-glowa__siatka { display: grid; gap: var(--gk-o6); align-items: center; }
@media (min-width: 56rem) {
	.gk-glowa--ze-zdjeciem .gk-glowa__siatka {
		grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
		gap: var(--gk-o9);
	}
}
.gk-glowa__naglowek {
	font-size: var(--gk-h1);
	font-variation-settings: "wdth" 114;
	color: var(--gk-granat);
}
.gk-glowa__lead { margin-top: var(--gk-o4); color: var(--gk-szary); line-height: var(--gk-linia-luzna); }
.gk-glowa__obraz { border-radius: var(--gk-promien-duzy); overflow: hidden; box-shadow: var(--gk-cien); }
.gk-glowa__obraz img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }

.gk-okruszki {
	display: flex;
	flex-wrap: wrap;
	gap: var(--gk-o2);
	margin-bottom: var(--gk-o4);
	color: var(--gk-szary);
	font-size: var(--gk-mikro);
}
.gk-okruszki a,
.gk-okruszki span { display: inline-flex; align-items: center; min-height: 44px; }
.gk-okruszki a:hover { color: var(--gk-granat); text-decoration: underline; text-underline-offset: 3px; }

/* -------------------------------------------------------------- zakres -- */

.gk-zakres {
	display: grid;
	gap: var(--gk-o4);
	margin-top: var(--gk-o8);
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 19rem), 1fr));
}
.gk-zakres__pozycja {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	gap: var(--gk-o4);
	align-items: start;
	padding: var(--gk-o5);
	background: var(--gk-papier);
	border-radius: var(--gk-promien);
}
.gk-zakres__znak {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.25rem;
	height: 2.25rem;
	border-radius: var(--gk-promien);
	background: var(--gk-granat);
	color: var(--gk-biel);
	flex: none;
}
.gk-zakres__tytul { font-size: 1.0625rem; color: var(--gk-granat); }
.gk-zakres__opis { margin-top: var(--gk-o2); color: var(--gk-szary); font-size: var(--gk-maly); line-height: var(--gk-linia-luzna); }

/* ----------------------------------------------------------------- 404 -- */

.gk-404__lista {
	display: flex;
	flex-wrap: wrap;
	gap: var(--gk-o3);
	margin-top: var(--gk-o6);
}
.gk-404__lista a {
	display: inline-block;
	padding: var(--gk-o3) var(--gk-o4);
	background: var(--gk-papier);
	border-radius: var(--gk-promien);
	font-weight: var(--gk-waga-srednia);
	font-size: var(--gk-maly);
}
.gk-404__lista a:hover { background: var(--gk-granat); color: var(--gk-biel); }

/* -------------------------------------------------------------- stopka -- */

.gk-stopka {
	padding-block: var(--gk-o9) var(--gk-o6);
	background: var(--gk-atrament);
	color: #A9B2C4;
	font-size: var(--gk-maly);
}
.gk-stopka__siatka {
	display: grid;
	gap: var(--gk-o7);
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr));
}
@media (min-width: 62rem) {
	.gk-stopka__siatka { grid-template-columns: 1.6fr 1fr 1fr 1fr; }
}
.gk-stopka .gk-znak__tekst { display: block; }
.gk-stopka .gk-znak__tekst strong { color: var(--gk-biel); }
.gk-stopka .gk-znak__pod { color: #8A94A8; }
.gk-stopka__opis { margin-top: var(--gk-o4); color: #C4CBD8; }
.gk-stopka__miasta { margin-top: var(--gk-o2); color: #8A94A8; font-size: var(--gk-mikro); line-height: var(--gk-linia-srednia); }

.gk-stopka__tytul {
	margin-bottom: var(--gk-o4);
	color: var(--gk-biel);
	font-size: var(--gk-mikro);
	font-weight: var(--gk-waga-mocna);
	letter-spacing: .09em;
	text-transform: uppercase;
}
.gk-stopka__lista { display: grid; gap: var(--gk-o1); }
.gk-stopka__lista li > a { min-height: 44px; align-content: center; }
.gk-stopka__lista--proste li > a { display: flex; align-items: center; }
.gk-stopka__lista li > a,
.gk-stopka__lista li > span {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	gap: var(--gk-o3);
	align-items: start;
	overflow-wrap: anywhere;
}
.gk-stopka__lista--proste li > a,
.gk-stopka__lista--proste li > span { display: block; }
.gk-stopka__lista .gk-ikona { margin-top: 3px; color: #6E7A93; }
.gk-stopka__lista a:hover { color: var(--gk-biel); }

.gk-stopka__dol {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: var(--gk-o3);
	margin-top: var(--gk-o8);
	padding-top: var(--gk-o5);
	border-top: 1px solid rgba(255, 255, 255, .12);
	font-size: var(--gk-mikro);
	color: #8A94A8;
}
.gk-stopka__wykonanie a { color: #C4CBD8; text-decoration: underline; text-underline-offset: 3px; }
.gk-stopka__wykonanie a:hover { color: var(--gk-biel); }

/* -------------------------------------------- telefon pływający i cookies -- */

.gk-telefon-plywajacy {
	position: fixed;
	right: 1rem;
	/* Pasek ciasteczek jest przyklejony do dołu i mimo zapasu z prawej
	   strony jego prostokąt nadal leży NA przycisku telefonu. Sam zapas
	   nie wystarczy, bo tło paska ciągnie się przez całą szerokość.
	   Wysokość paska mierzy skrypt i zapisuje ją w tej zmiennej.
	   Wykryte testem funkcjonalnym: elementFromPoint w środku przycisku
	   zwracał pasek, nie przycisk (memory: lekcja-floating-phone-okluzja-tapow). */
	bottom: calc(1rem + var(--gk-ciasteczka-h, 0px));
	transition-property: opacity, transform, visibility, bottom;
	z-index: 80;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 3.5rem;
	height: 3.5rem;
	border-radius: 50%;
	background: var(--gk-czerwien);
	color: var(--gk-biel);
	box-shadow: 0 6px 20px rgba(227, 0, 15, .35);
	opacity: 0;
	visibility: hidden;
	transform: translateY(12px);
	transition: opacity var(--gk-czas) var(--gk-krzywa),
		transform var(--gk-czas) var(--gk-krzywa),
		visibility var(--gk-czas);
}
.gk-telefon-plywajacy.gk-telefon-plywajacy--widoczny {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}
.gk-telefon-plywajacy:hover { background: var(--gk-czerwien-ciemna); }
@media (min-width: 62rem) { .gk-telefon-plywajacy { display: none; } }

/* Pasek ciasteczek zostawia miejsce na słuchawkę. Bez tego przycisk
   telefonu jest zasłonięty i nie da się w niego trafić palcem
   (memory: lekcja-menu-mobilne-warstwa-i-focus). */
.gk-ciasteczka {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 85;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--gk-o3);
	padding: var(--gk-o2) var(--gk-margines);
	background: rgba(15, 21, 34, .97);
	color: #D6DBE5;
	font-size: 0.75rem;
	line-height: 1.4;
	max-height: 6.5rem;
	overflow-y: auto;
	transform: translateY(100%);
	transition: transform 260ms var(--gk-krzywa);
}
.gk-ciasteczka[hidden] { display: none; }
.gk-ciasteczka.gk-ciasteczka--widoczny { transform: translateY(0); }
.gk-ciasteczka__tekst { flex: 1 1 12rem; margin: 0; }
.gk-ciasteczka .gk-przycisk { flex: none; min-height: 44px; }
.gk-ciasteczka a { color: var(--gk-biel); text-decoration: underline; text-underline-offset: 3px; }
@media (min-width: 62rem) {
	.gk-ciasteczka {
		padding-block: var(--gk-o3);
		font-size: var(--gk-mikro);
		max-height: none;
	}
}

/* ---------------------------------------------------------- powiększenie -- */

.gk-lupa {
	position: fixed;
	inset: 0;
	z-index: 150;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: var(--gk-o5);
	background: rgba(9, 31, 85, .93);
	opacity: 0;
	transition: opacity var(--gk-czas) var(--gk-krzywa);
}
.gk-lupa.gk-lupa--widoczna { opacity: 1; }
.gk-lupa img {
	max-width: 100%;
	max-height: 88vh;
	border-radius: var(--gk-promien);
	object-fit: contain;
}
.gk-lupa__zamknij {
	position: absolute;
	top: var(--gk-o5);
	right: var(--gk-o5);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 3rem;
	height: 3rem;
	border: 1px solid rgba(255, 255, 255, .35);
	border-radius: var(--gk-promien);
	background: transparent;
	color: var(--gk-biel);
	cursor: pointer;
}
.gk-lupa__zamknij:hover { background: rgba(255, 255, 255, .14); }

/* ------------------------------------------------------------- animacje -- */

/* Wejście treści. Element NIE startuje z opacity: 0 w arkuszu — dopiero
   skrypt dokłada klasę. Gdyby skrypt nie wystartował, sekcja i tak jest
   widoczna (memory: lekcja-animacja-wejscia-chowa-tresc). */
.gk-js .gk-anim {
	opacity: 0;
	transform: translateY(14px);
	transition: opacity 460ms var(--gk-krzywa) var(--gk-opoznienie, 0ms),
		transform 460ms var(--gk-krzywa) var(--gk-opoznienie, 0ms);
}
.gk-js .gk-anim.gk-anim--widoczny { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
	.gk-js .gk-anim { opacity: 1; transform: none; transition: none; }
	* { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* -------------------------------------------------------------- druk -- */

@media print {
	.gk-naglowek, .gk-nakladka, .gk-telefon-plywajacy,
	.gk-ciasteczka, .gk-formularz, .gk-lupa { display: none !important; }
	body { color: #000; }
}