/* ==========================================================================
   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
   ========================================================================== */

/* Punkty załamania. Jedna drabinka na cały arkusz, w rem, bo przy
   powiększeniu czcionki w przeglądarce układ ma się przełamywać razem
   z tekstem, a nie trzymać sztywnych pikseli.

     30 rem  480 px  telefon poziomo, dwie kolumny w drobnych siatkach
     34 rem  544 px  WYJĄTEK: numer telefonu obok słuchawki w nagłówku.
                     Niżej numer się nie mieści obok znaku i hamburgera,
                     zmierzone: przy 30 rem rząd rozpychał się do 377 px
     40 rem  640 px  próg justowania: w węższej kolumnie justowanie
                     robi rzeki białych plam, więc wraca wyrównanie do lewej
     48 rem  768 px  tablet, dwie kolumny w sekcjach treściowych
     56 rem  896 px  trzy kolumny w kafelkach i siatkach zdjęć
     62 rem  992 px  układ na komputer: menu poziome zamiast hamburgera
     75 rem 1200 px  najszerszy układ, kontener dobija do 1280 px

   Warianty `max-width` to zawsze o 0,01 rem mniej niż odpowiadający im
   próg `min-width`, żeby żaden ekran nie wpadł między dwie reguły. */

:root {
	/* Barwy */
	--gk-granat: #0D3082;
	--gk-granat-ciemny: #091F55;
	--gk-granat-poswiata: #17429B;  /* poświata pod grafiką, bez tekstu */
	--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;

	/* Barwy na ciemnym tle. Firmowa czerwień ma na granacie i atramencie
	   3,7:1, czyli poniżej progu, więc na ciemnych sekcjach używamy jej
	   rozjaśnionej wersji. Szarości też są osobne: te z jasnego tła na
	   ciemnym albo znikają, albo krzyczą. */
	--gk-czerwien-jasna: #FF8478;      /* 5,01:1 na atramencie */
	--gk-czerwien-hover: #FF9E95;      /* jaśniejszy stopień na najechanie */
	--gk-tekst-na-ciemnym: #D6DBE5;
	--gk-tekst-drugi-ciemny: #C4CBD8;
	--gk-tekst-cichy-ciemny: #8A94A8;
	--gk-ikona-ciemna: #6E7A93;
	--gk-linia-na-ciemnym: rgba(255, 255, 255, .12);
	--gk-linia-na-ciemnym-mocna: rgba(255, 255, 255, .2);
	--gk-tlo-na-ciemnym: rgba(255, 255, 255, .07);
	--gk-tlo-na-ciemnym-mocne: rgba(255, 255, 255, .28);
	--gk-tlo-na-ciemnym-hover: rgba(255, 255, 255, .14);
	--gk-obwodka-na-ciemnym: rgba(255, 255, 255, .35);
	--gk-zaslona-atrament: rgba(15, 21, 34, .97);   /* pasek ciasteczek */
	--gk-zaslona-lupa: rgba(9, 31, 85, .93);        /* tło powiększenia */

	/* Barwy drugiego planu na jasnym tle */
	--gk-szary-cichy: #61708F;         /* 4,97:1 na bieli, numery i podpisy */
	--gk-linia-mocna: #B9C4E0;         /* obwódka po najechaniu */
	--gk-linia-druga: #D6DEEE;
	--gk-tlo-chlodne: #E8EDF7;
	--gk-tlo-chlodne-mocne: #C3CDE4;
	--gk-siatka: rgba(13, 48, 130, .05);
	--gk-zaslona-granat: rgba(13, 48, 130, .88);

	/* Komunikaty formularza */
	--gk-tlo-udane: #E8F3EC;
	--gk-tekst-udane: #1B5E33;
	--gk-tlo-blad: #FDECEC;
	--gk-tekst-blad: #97000B;

	/* 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-maly: 4px;       /* drobiazgi: pola listy, znaczniki */
	--gk-promien: 6px;            /* przyciski, pola, kafle */
	--gk-promien-duzy: 10px;      /* duże płaszczyzny: karty, zdjęcia */
	--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-cien-pierscien: 0 0 0 3px rgba(13, 48, 130, .14);
	--gk-cien-czerwony: 0 6px 20px rgba(227, 0, 15, .35);

	/* Ruch. Trzy czasy na całą stronę, jedna krzywa. */
	--gk-krzywa: cubic-bezier(.22, .61, .36, 1);
	--gk-czas: 200ms;             /* barwa, obwódka, cień */
	--gk-czas-sredni: 260ms;      /* przesunięcia, rozwijanie */
	--gk-czas-dlugi: 320ms;       /* powiększenie zdjęcia, pasek karty */
	--gk-czas-wejscie: 460ms;     /* pojawianie się sekcji przy przewijaniu */
}

/* ---------------------------------------------------------------------------
   PUNKTY ZAŁAMANIA — jedna drabina na cały arkusz, żeby układ nie
   przebudowywał się w przypadkowych miejscach:

     30rem  480 px   telefon poziomo: znak dostaje pełny podpis
     48rem  768 px   tablet: dwie kolumny zamiast jednej
     56rem  896 px   szerokie karty: trzy i cztery kolumny, siatka podrzędna
     62rem  992 px   komputer: menu poziome zamiast hamburgera
     75rem 1200 px   pełna szerokość kontenera

   Zapisy `max-width` są zawsze o 0,01 rem niżej od progu wyżej, żeby dwie
   reguły nigdy nie obowiązywały naraz.
   --------------------------------------------------------------------------- */

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

/* Zaznaczenie tekstu w barwie marki zamiast domyślnego niebieskiego
   z przeglądarki. Granat na jasnym tle daje 11,92:1, więc zaznaczony
   tekst pozostaje czytelny. */
::selection {
	background: var(--gk-granat);
	color: var(--gk-biel);
}

*, *::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: var(--gk-czerwien-jasna); }
.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);
}

/* Trzy stany, nie jeden. Najechanie unosi przycisk o pikselm wciśnięcie
   opuszcza go poniżej pozycji wyjściowej, a przycisk wyłączony nie robi
   ani jednego, ani drugiego. Bez stanu wciśnięcia przycisk na telefonie
   nie daje żadnej odpowiedzi na dotknięcie, bo najechania tam nie ma. */
.gk-przycisk:active { transform: translateY(1px); }
.gk-przycisk[disabled],
.gk-przycisk[aria-disabled="true"] {
	opacity: .55;
	cursor: not-allowed;
	transform: none;
}
.gk-przycisk[disabled]:hover,
.gk-przycisk[aria-disabled="true"]:hover { transform: none; }

.gk-przycisk--szeroki { width: 100%; }
/* Dwa rozmiary przycisku na całą stronę i nic poza tym:
     zwykły 48 px (pierwszy ekran, formularz, galeria) i zwarty 44 px
     — dokładnie tyle, ile wynosi próg pola dotyku. Zwarty jest tylko
     w pasku ciasteczek, który na telefonie nie może być wyższy niż 80 px. */
.gk-przycisk--maly {
	min-height: 2.75rem;
	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 var(--gk-czas-sredni) 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: var(--gk-czerwien-jasna); 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` blokowało kurczenie i po pokazaniu napisu na telefonie
	   rząd nagłówka miał przy 320 px szerokość 377 px, czyli poziomy pasek
	   przewijania. Rysunek domku ma własne `flex: none`, więc zwęża się
	   wyłącznie napis. */
	flex: 0 1 auto;
	min-width: 0;
	min-height: 44px;
	margin-right: auto;
}
.gk-znak__svg {
	width: 2.375rem;
	height: auto;
	flex: none;
	transition: transform var(--gk-czas) var(--gk-krzywa);
}
/* Znak jest odnośnikiem na stronę główną i nie reagował na najechanie
   ani w nagłówku, ani w stopce. Delikatne powiększenie znaku wystarczy,
   żeby było widać, że to element klikalny. */
.gk-znak:hover .gk-znak__svg,
.gk-znak:focus-visible .gk-znak__svg { transform: scale(1.06); }
.gk-znak:hover .gk-znak__tekst strong { color: var(--gk-czerwien); }
.gk-stopka .gk-znak:hover .gk-znak__tekst strong { color: var(--gk-czerwien-jasna); }
@media (min-width: 30rem) { .gk-znak__svg { width: 2.75rem; } }
@media (min-width: 62rem) { .gk-znak__svg { width: 3.25rem; } }

/* Napis przy znaku jest widoczny od najwęższego ekranu. Wcześniej
   znikał poniżej 480 px i na telefonie zostawał sam domek bez nazwy
   firmy, co przy pierwszym wejściu nic nie mówi. Zamiast chować,
   zmniejszamy stopień pisma i pozwalamy się skracać. */
.gk-znak__tekst { display: block; line-height: 1.1; min-width: 0; }

.gk-znak__tekst strong {
	display: block;
	font-size: clamp(0.9375rem, 0.78rem + 0.72vw, 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); }

/* Podpis pod nazwą trzyma się jednej linii. Zwijał się na dwie i zostawiał
   samotne „SERWIS” pod spodem, przez co nagłówek rósł o 12 px. Poniżej
   62 rem skraca się do „Klimatyzacja · Serwis” i w tej postaci mieści się
   nawet na 320 px obok telefonu i hamburgera (zmierzone). */
.gk-znak__pod { white-space: nowrap; }
@media (max-width: 61.99rem) {
	.gk-znak__pod-srodek { display: none; }
}
.gk-znak__pod {
	display: block;
	margin-top: 2px;
	font-size: clamp(0.5625rem, 0.5rem + 0.28vw, 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;
	justify-content: center;
	gap: var(--gk-o2);
	/* Bez `min-width` i `flex: none` przycisk kurczył się razem z rzędem
	   do 42 px i schodził poniżej progu pola dotyku (zmierzone na 320 px). */
	flex: none;
	min-width: 2.75rem;
	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: 34rem) { .gk-telefon-naglowek__numer { display: inline; } }
@media (max-width: 33.99rem) {
	.gk-telefon-naglowek { padding-inline: var(--gk-o3); }
	.gk-naglowek__rzad { gap: var(--gk-o3); }
}

.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: var(--gk-o1); 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 var(--gk-czas-sredni) 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);
}
/* W nakładce stoi ten sam znak co w nagłówku, tylko bez podpisu
   branżowego: nakładka i tak nazywa siebie treścią pod spodem. */
.gk-znak--nakladka .gk-znak__svg { width: 2.375rem; }
.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; }
}

/* Kafle z grafiką od klienta: dwa urządzenia, każde we własnym kaflu.

   Obie jednostki są w źródle ucięte przy bocznych krawędziach (wewnętrzna
   z lewej i z prawej, zewnętrzna z lewej), więc każda idzie przez CAŁĄ
   szerokość swojego kafla. Cięcie wypada wtedy dokładnie na obrysie kafla
   i czyta się jak kadrowanie, nie jak błąd. Złożone razem w jednym kaflu
   zachodziły na siebie i wychodził kolaż
   (memory: lekcja-grafika-z-wlasnym-tlem-nie-wtopi-sie-w-kafel).

   Urządzenia stoją po przekątnej: wewnętrzna przy górnej krawędzi swojego
   kafla, zewnętrzna przy dolnej. Granat pomiędzy nimi jest celowy. */
.gk-bento__pary {
	grid-column: 1 / -1;
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--gk-o3);
}
/* Jedno urządzenie: wąski pionowy pasek z grafiką klienta w całości,
   razem z jego tłem i poświatą. Barwy tła przeliczone na nasz granat
   (odcień 221 stopni, ten sam co #0D3082), litera z lewej krawędzi
   zamalowana. Kafel zajmuje JEDNĄ kolumnę z czterech, a kafel z nagłówkiem
   rozszerza się na trzy: pasek ma być paskiem, nie połową ekranu. */
.gk-bento__pary--jedna { grid-template-columns: minmax(0, 1fr); }
@media (max-width: 55.99rem) {
	/* Na telefonie kafel idzie na PEŁNĄ szerokość. Zwężony do 13 rem
	   i wyśrodkowany czytał się jak wąski pasek postawiony na białym tle,
	   a nie jak część układu. Grafika ma własne granatowe tło, więc kafel
	   nie może mieć wypełnienia: obramowanie granatu wokół granatu
	   grafiki dałoby prostokąt w prostokącie. */
	.gk-bento__pary--jedna { max-width: none; margin-inline: 0; }
}
@media (min-width: 40rem) and (max-width: 55.99rem) {
	/* Tablet: pełna szerokość dawała kafel wysoki na 1 157 px i pierwszy
	   ekran na 1 867 px. Grafika jest pionowa (1:1,64), więc jej wysokość
	   rośnie wprost z szerokością kafla i trzeba ją tutaj ograniczyć. */
	.gk-bento__pary--jedna { max-width: 20rem; margin-inline: auto; }
}
@media (min-width: 56rem) {
	.gk-bento__pary { grid-column: span 2; }
	.gk-bento__pary--jedna { grid-column: span 1; }
	.gk-bento--pasek .gk-bento__tekst { grid-column: span 3; }
}

.gk-jednostka {
	position: relative;
	margin: 0;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	border-radius: var(--gk-promien-duzy);
	/* Poświata powtarza atmosferę z grafiki klienta: jeden jaśniejszy ton
	   tego samego granatu, bez trzeciej barwy. Nie stoi na niej tekst
	   akapitowy, więc nie obowiązuje jej próg kontrastu zwykłego tekstu. */
	background: radial-gradient(115% 70% at 50% 45%,
		var(--gk-granat-poswiata) 0%,
		var(--gk-granat) 68%);
}
.gk-bento__pary--jedna .gk-jednostka { background: var(--gk-granat); }
.gk-jednostka img {
	width: 100%;
	height: auto;
	display: block;
}
/* Wewnętrzna przy górnej krawędzi, zewnętrzna przy dolnej. */
.gk-jednostka--dol { flex-direction: column-reverse; }

.gk-jednostka__podpis {
	margin-top: auto;
	padding: var(--gk-o3) var(--gk-o4) var(--gk-o4);
	color: var(--gk-jasny-na-granacie);
	font-size: var(--gk-mikro);
	font-weight: var(--gk-waga-mocna);
	letter-spacing: .04em;
	text-transform: uppercase;
}
.gk-jednostka--dol .gk-jednostka__podpis {
	margin-top: 0;
	margin-bottom: auto;
	padding: var(--gk-o4) var(--gk-o4) var(--gk-o3);
}

/* Cztery kadry obok nagłówka. Zajmują to samo miejsce co jedno duże
   zdjęcie, więc reszta układu się nie zmienia. Każdy kadr trzyma własne
   proporcje, żeby siatka była równa niezależnie od kadrowania zdjęć. */
.gk-bento__kadry {
	grid-column: 1 / -1;
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--gk-o3);
}
@media (min-width: 56rem) {
	.gk-bento__kadry { grid-column: span 2; }
}
.gk-kadr {
	position: relative;
	margin: 0;
	aspect-ratio: 4 / 3;
	border-radius: var(--gk-promien);
	overflow: hidden;
	background: var(--gk-papier);
}
.gk-kadr img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Podpis na jednolitym granacie, nie na gradiencie i nie na zdjęciu.
   Biel na #0D3082 to 11,92:1 niezależnie od tego, co jest pod spodem
   (memory: lekcja-kontrast-tekstu-na-zdjeciu-mierz-piksele). */
.gk-kadr__podpis {
	position: absolute;
	left: var(--gk-o3);
	bottom: var(--gk-o3);
	padding: 0.3rem 0.7rem;
	border-radius: var(--gk-promien-maly, 4px);
	background: var(--gk-granat);
	color: var(--gk-biel);
	font-size: var(--gk-mikro);
	font-weight: var(--gk-waga-mocna);
	letter-spacing: .04em;
	text-transform: uppercase;
}

/* 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: var(--gk-linia-mocna);
	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));
}
.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 var(--gk-czas-dlugi) 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: var(--gk-szary-cichy);
}
.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);
}
/* Dwa piksele w dół to wyrównanie optyczne znaczka do pierwszego
   wiersza tekstu, nie odstęp z siatki. */
.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); }

@supports (grid-template-rows: subgrid) {
	@media (min-width: 56rem) {
		.gk-karty { grid-template-rows: auto auto auto 1fr auto; }
		.gk-karta {
			/* Bez `display: grid` cała siatka podrzędna była martwa: karta
			   zostawała blokiem elastycznym, a `grid-template-rows: subgrid`
			   nic w nim nie znaczy. Skutek było widać na trzeciej karcie
			   usług: opis o wiersz dłuższy przesuwał kreskę i listę o 25 px
			   w dół względem sąsiadek. */
			display: grid;
			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__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 var(--gk-linia-na-ciemnym-mocna);
}
@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: var(--gk-czerwien-jasna);
}

.gk-marki {
	display: flex;
	flex-wrap: wrap;
	gap: 0 var(--gk-o5);
	/* Przycina kreski, które przy zawinięciu wiersza wypadają na lewo
	   od pierwszej nazwy. Patrz komentarz przy `::before` niżej. */
	overflow: hidden;
}
.gk-marki__pozycja {
	position: relative;
	padding-block: var(--gk-o3);
	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.
   Stoi po LEWEJ stronie nazwy, w połowie odstępu. Wcześniej stała po
   prawej i przy zawinięciu wiersza zostawała wisząca kreska za ostatnią
   nazwą w wierszu — widać to było po „Gree” na komputerze i po „Piekary
   Śląskie” w liście miejscowości. Kreska pierwszej nazwy w każdym wierszu
   wypada na lewo od kontenera i przycina ją `overflow: hidden`, więc
   układ jest poprawny niezależnie od tego, gdzie wiersz się złamie. */
.gk-marki__pozycja::before {
	content: "";
	position: absolute;
	left: calc(-0.5 * var(--gk-o5));
	top: 50%;
	width: 1px;
	height: 1.1em;
	transform: translateY(-50%);
	background: var(--gk-tlo-na-ciemnym-mocne);
}
.gk-marki__pozycja:hover { color: var(--gk-czerwien-hover); }

.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: var(--gk-czerwien-hover); }

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

.gk-ofirmie {
	display: grid;
	gap: var(--gk-o7);
	/* Zdjęcie ma sięgać od góry do dołu tekstu, a nie wisieć wyśrodkowane
	   obok. Przy `center` między nimi zostawały dwa nierówne marginesy. */
	align-items: stretch;
}
@media (min-width: 56rem) {
	.gk-ofirmie {
		grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
		gap: var(--gk-o8);
	}
}
.gk-ofirmie__obraz {
	position: relative;
	margin: 0;
	min-height: clamp(15rem, 52vw, 22rem);
	border-radius: var(--gk-promien-duzy);
	overflow: hidden;
	box-shadow: var(--gk-cien);
	background: var(--gk-papier);
}
/* Zdjęcie wyjęte z układu: gdyby liczyło się do wysokości wiersza,
   pion 810 na 1800 px rozciągnąłby sekcję do 1600 px zamiast dopasować
   się do tekstu. Zmierzone na żywej stronie. Wysokość wiersza wyznacza
   teraz sam tekst, a zdjęcie wypełnia go kadrowaniem. */
.gk-ofirmie__obraz img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}

.gk-proza { color: var(--gk-szary); line-height: var(--gk-linia-luzna); }
/* Odstęp między akapitami MUSI być większy niż odstęp między wierszami,
   inaczej akapity zlewają się w jeden placek. Tu interlinia wynosi 30 px,
   więc odstęp jest 32 px.
   Uwaga na wagę selektorów: wcześniej stało tu `.gk-proza > * + *`
   (waga 0-1-0) obok `.gk-proza p { margin: 0 }` (waga 0-1-1), więc
   zerowanie wygrywało i akapity na CAŁEJ stronie stały bez odstępu.
   Zmierzone: 0 px przy interlinii 30 px. To była prawdziwa przyczyna
   „brzydkiego placka treści”, na który Paweł zwracał uwagę przy sekcji
   „O firmie” — justowanie samo w sobie nic tu nie poprawiało. */
.gk-proza p { margin: 0; }
.gk-proza > * + * { margin-top: var(--gk-o6); }
.gk-proza > p + p { margin-top: var(--gk-o6); }

/* Tekst wyjustowany, z dzieleniem wyrazów. Samo justowanie bez dzielenia
   robi w polskim rzeki białych plam, bo słowa są długie. Atrybut lang="pl"
   w szablonie włącza właściwy słownik przenoszenia.
   Sprawdzone pomiarem: text-align ma być „justify”, nie „start”. */
.gk-proza--justowana p {
	text-align: justify;
	text-align-last: left;
	-webkit-hyphens: auto;
	hyphens: auto;
	hyphenate-limit-chars: 7 4 3;
	text-wrap: wrap;
}
/* Pierwszy akapit jako wprowadzenie: ciemniejszy i odrobinę większy. */
.gk-proza--justowana > *:first-child {
	font-size: 1.125rem;
	color: var(--gk-atrament);
}
/* W wąskiej kolumnie justowanie zostawia po trzy wyrazy w wierszu
   i wielkie dziury, więc poniżej 40 rem wraca wyrównanie do lewej. */
@media (max-width: 39.99rem) {
	.gk-proza--justowana p { text-align: left; }
}
.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):not(.gk-galeria--rowna) { grid-template-columns: repeat(4, minmax(0, 1fr)); }
	/* Uwaga: poniżej 56 rem wyróżnionego kafla nie ma, a dziewięć zdjęć
	   strony głównej dzieli się przez trzy, nie przez dwa. Trzy kolumny
	   na tablecie ustawione niżej, poza tym zapytaniem. */
	/* Wyróżniony kafel TYLKO na stronie głównej. Wykluczenie stoi tutaj,
	   w regule nadrzędnej, bo ma wagę 0-4-0 i wygrywała z nowszą regułą
	   `.gk-galeria--rowna .gk-galeria__kafel:first-child` (0-3-0).
	   Klasa była nadana, a kafel i tak zajmował dwa wiersze. */
	.gk-galeria:not(.gk-galeria--pelna):not(.gk-galeria--rowna) .gk-galeria__kafel:first-child {
		grid-column: span 2;
		grid-row: span 2;
		/* Duży kafel wypełnia dwa wiersze siatki, więc własnych proporcji
		   nie narzuca. Bez tego dostawał wysokość 1500 px przy szerokości
		   594 px: zdjęcie 4:3 rozciągnięte trzykrotnie w pionie, rozmyte,
		   a przy okazji rozpychało oba wiersze do 744 px i pod małymi
		   kaflami zostawała pusta biała płaszczyzna. */
		aspect-ratio: auto;
	}
}
/* Pełna galeria realizacji: 38 zdjęć. Przy jednej kolumnie na telefonie
   miała 10 419 px wysokości, czyli dwanaście ekranów samego przewijania.
   Dwie kolumny skracają ją o połowę, a kafel i tak otwiera powiększenie,
   więc miniatura nie musi być duża. Liczba kolumn ustalona wprost, nie
   przez `auto-fill`, żeby nie zależała od zaokrągleń szerokości. */
/* Galeria na podstronie: wszystkie kafle równe. Wyróżniony pierwszy kafel
   ma sens na stronie głównej, gdzie zdjęć jest dziewięć i siatka wychodzi
   równo. Przy sześciu na podstronie zostawiał w ostatnim wierszu jeden
   kafel i trzy puste płaszczyzny. */
/* Dwie kolumny aż do układu na komputer, potem cztery. Trzy kolumny na
   tablecie zostawiały niepełny wiersz przy ośmiu i czterech zdjęciach,
   a przez dwa i cztery dzieli się każda z liczb, których używamy. */
@media (min-width: 48rem) and (max-width: 55.99rem) {
	.gk-galeria:not(.gk-galeria--pelna):not(.gk-galeria--rowna) {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

.gk-galeria--rowna { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 62rem) {
	.gk-galeria--rowna { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.gk-galeria--rowna .gk-galeria__kafel:first-child {
	grid-column: auto;
	grid-row: auto;
	aspect-ratio: 4 / 3;
}

.gk-galeria--pelna { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 48rem) {
	.gk-galeria--pelna { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 62rem) {
	.gk-galeria--pelna { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (min-width: 75rem) {
	.gk-galeria--pelna { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}

.gk-galeria__kafel {
	position: relative;
	display: block;
	/* Proporcje trzyma KAFEL, nie zdjęcie. Wcześniej trzymało je zdjęcie,
	   więc gdy siatka dawała kaflowi więcej wysokości, zdjęcie zostawało
	   u góry, a pod nim stała pusta płaszczyzna w kolorze tła. */
	aspect-ratio: 4 / 3;
	border-radius: var(--gk-promien);
	overflow: hidden;
	background: var(--gk-papier);
	cursor: zoom-in;
}
.gk-galeria__kafel img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform var(--gk-czas-dlugi) 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: var(--gk-zaslona-granat);
	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-o4);
	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: var(--gk-o6) var(--gk-o5) var(--gk-o5);
	background: var(--gk-biel);
	border: 1px solid var(--gk-linia);
	border-radius: var(--gk-promien-duzy);
	overflow: hidden;
	transition: border-color var(--gk-czas) var(--gk-krzywa),
		box-shadow var(--gk-czas) var(--gk-krzywa),
		transform var(--gk-czas) var(--gk-krzywa);
}
.gk-proces__krok:hover {
	border-color: var(--gk-linia-mocna);
	box-shadow: var(--gk-cien);
	transform: translateY(-2px);
}
/* Kreska u góry karty w barwie firmy. Rośnie po najechaniu. */
.gk-proces__krok::after {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 2.75rem;
	height: 3px;
	background: var(--gk-czerwien);
	transition: width var(--gk-czas-dlugi) var(--gk-krzywa);
}
.gk-proces__krok:hover::after { width: 100%; }

/* Ozdoba w rogu karty: łuk, nie cyfra. Wcześniej stała tu wielka liczba
   w kolorze tła, czyli tekst o kontraście 1,08:1. Numer kroku i tak jest
   wyżej, jako „KROK 01”. Ozdoba bez liter nie podlega progowi
   czytelności, a karta nadal ma głębię. */
.gk-proces__krok::before {
	content: "";
	position: absolute;
	right: -3.5rem;
	bottom: -3.5rem;
	width: 9rem;
	height: 9rem;
	border-radius: 50%;
	border: 1.5rem solid var(--gk-papier);
	pointer-events: none;
}
.gk-proces__glowa {
	position: relative;
	display: flex;
	align-items: center;
	gap: var(--gk-o3);
	margin-bottom: var(--gk-o2);
}
.gk-proces__ikona {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.75rem;
	height: 2.75rem;
	flex: none;
	border-radius: var(--gk-promien);
	background: var(--gk-granat);
	color: var(--gk-biel);
}
.gk-proces__numer {
	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 { position: relative; font-size: var(--gk-h3); color: var(--gk-granat); }
.gk-proces__opis {
	position: relative;
	color: var(--gk-szary);
	font-size: var(--gk-maly);
	line-height: var(--gk-linia-luzna);
}

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

/* Sekcja ma się odróżniać od sąsiednich. Jasny błękit z delikatną siatką,
   która nawiązuje do planu miasta obok. Trzecia ciemna sekcja z rzędu
   byłaby za ciężka, więc różnicujemy w drugą stronę. */
.gk-sekcja--obszar {
	position: relative;
	background: var(--gk-tlo-chlodne);
	border-block: 1px solid var(--gk-linia-druga);
}
.gk-sekcja--obszar::before {
	content: "";
	position: absolute;
	inset: 0;
	background-image:
		linear-gradient(0deg, var(--gk-siatka) 1px, transparent 1px),
		linear-gradient(90deg, var(--gk-siatka) 1px, transparent 1px);
	background-size: 44px 44px;
	pointer-events: none;
}
.gk-sekcja--obszar > * { position: relative; }
.gk-sekcja--obszar .gk-nad { color: var(--gk-czerwien-ciemna); }

.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-biel);
	border: 1px solid var(--gk-linia);
	border-radius: var(--gk-promien);
	font-weight: var(--gk-waga-srednia);
	font-size: var(--gk-maly);
}

/* Pełna lista miejscowości. Nazwa musi paść w treści, żeby ktokolwiek
   mógł ją znaleźć albo zacytować, ale nie może przytłoczyć sekcji. */
.gk-obszar__reszta {
	margin-top: var(--gk-o8);
	padding-top: var(--gk-o6);
	border-top: 1px solid var(--gk-linia-druga);
}
.gk-obszar__podtytul {
	margin-bottom: var(--gk-o4);
	font-size: var(--gk-mikro);
	font-weight: var(--gk-waga-mocna);
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--gk-szary);
}
.gk-obszar__lista {
	display: flex;
	flex-wrap: wrap;
	gap: var(--gk-o2) var(--gk-o6);
	/* Ta sama zasada co przy nazwach marek: kreska stoi po lewej stronie
	   pozycji, a tę z początku wiersza przycina kontener. */
	overflow: hidden;
}
.gk-obszar__lista li {
	position: relative;
	font-size: var(--gk-maly);
	color: var(--gk-atrament);
	line-height: var(--gk-linia-srednia);
}
.gk-obszar__lista li::before {
	content: "";
	position: absolute;
	left: calc(-0.5 * var(--gk-o6));
	top: 50%;
	width: 1px;
	height: 0.9em;
	transform: translateY(-50%);
	background: var(--gk-tlo-chlodne-mocne);
}
.gk-obszar__nota {
	margin-top: var(--gk-o5);
	color: var(--gk-szary);
	font-size: var(--gk-maly);
	line-height: var(--gk-linia-luzna);
}
.gk-obszar__nota a {
	color: var(--gk-granat);
	font-weight: var(--gk-waga-mocna);
	text-decoration: underline;
	text-underline-offset: 3px;
}
.gk-obszar__nota a:hover { color: var(--gk-czerwien); }
.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);
	/* Sekcja ma przyciemnione tło, więc firmowa czerwień spada tu
	   do 4,19:1 przy progu 4,5. Ciemniejszy odcień daje 5,88:1. */
	color: var(--gk-czerwien-ciemna);
	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. */
/* ------------------------------------------------- dojazd (kontakt) -- */

/* Ten sam układ co sekcja obszaru na stronie głównej: dane po lewej,
   mapa po prawej. Bez tego szablon kontaktu stawiał dane w wąskiej
   kolumnie, a mapę pod spodem na pełnej szerokości. */
.gk-dojazd {
	display: grid;
	gap: var(--gk-o7);
	align-items: center;
}
@media (min-width: 56rem) {
	.gk-dojazd {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		gap: var(--gk-o9);
	}
}
.gk-dojazd__siedziba { margin-top: var(--gk-o5); }
/* Dane rejestrowe jako pary etykieta-wartość w jednej linii. Domyślny
   `dl` wciska wartość pod etykietę i dokłada własne wcięcie, przez co
   NIP i REGON wyglądały jak lista zakupów. */
.gk-dojazd__firma {
	display: grid;
	gap: var(--gk-o3);
	margin: var(--gk-o6) 0 0;
	padding-top: var(--gk-o5);
	border-top: 1px solid var(--gk-linia);
}
.gk-dojazd__firma > div {
	display: grid;
	grid-template-columns: 6rem minmax(0, 1fr);
	gap: var(--gk-o4);
	align-items: baseline;
}
.gk-dojazd__firma dt {
	color: var(--gk-szary);
	font-size: var(--gk-mikro);
	font-weight: var(--gk-waga-mocna);
	letter-spacing: .08em;
	text-transform: uppercase;
}
.gk-dojazd__firma dd {
	margin: 0;
	color: var(--gk-atrament);
	font-weight: var(--gk-waga-srednia);
}

.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 -- */

/* Trzynaście pytań w jednej kolumnie to bardzo długa sekcja. W dwóch
   mieszczą się na jednym ekranie i widać od razu, że odpowiedzi jest dużo.
   Kolumny są rozdzielone w PHP: w siatce CSS wszystkie pola jednego
   wiersza dostają wysokość najwyższego, więc po rozwinięciu pierwszego
   pytania obok robiła się pusta dziura. */
.gk-faq { display: grid; gap: 0 var(--gk-o8); }
@media (min-width: 56rem) {
	.gk-faq { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
}
.gk-faq__kolumna { 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-o4) 0;
	cursor: pointer;
	list-style: none;
	min-height: 44px;
}
.gk-faq__pytanie::-webkit-details-marker { display: none; }
.gk-faq__pytanie h3 {
	/* Rozmiar z tokenu tekstu, nie z liczby wpisanej w to jedno miejsce. */
	font-size: var(--gk-tekst);
	color: var(--gk-granat);
	font-weight: var(--gk-waga-mocna);
	/* Nagłówek, więc interlinia nagłówkowa. Miał 1,35 jak zwykły tekst
	   i dwuwierszowe pytania robiły się rozstrzelone. */
	line-height: var(--gk-linia-ciasna);
}
.gk-faq__pytanie:hover h3 { color: var(--gk-czerwien); }

.gk-faq__znak {
	position: relative;
	flex: none;
	width: 1.5rem;
	height: 1.5rem;
	border-radius: var(--gk-promien-maly);
	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);
	font-size: var(--gk-maly);
	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: var(--gk-czerwien-jasna); flex: none; }
.gk-kontakt__telefon:hover { color: var(--gk-czerwien-hover); }

.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,
/* Dopełnienie do progu pola dotyku, liczone, nie zgadnięte. */
.gk-kontakt__lista li > span {
	display: block;
	min-height: 24px;
	padding-block: calc((2.75rem - 24px) / 2);
}
.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: var(--gk-tlo-na-ciemnym);
	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: var(--gk-linia-mocna); }
.gk-pole__wejscie:focus {
	outline: none;
	border-color: var(--gk-granat);
	box-shadow: var(--gk-cien-pierscien);
}
.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;
	transition: color var(--gk-czas) var(--gk-krzywa);
}
.gk-zgoda a:hover { color: var(--gk-czerwien); }

/* 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: var(--gk-tlo-udane);
	color: var(--gk-tekst-udane);
}
.gk-formularz__komunikat--blad {
	display: block;
	background: var(--gk-tlo-blad);
	color: var(--gk-tekst-blad);
}
.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); }
/* Proporcje trzyma RAMKA, nie zdjęcie. Zdjęcia klienta mają różne kadry
   i przy prawie kwadratowym (810 × 800) przeglądarka rezerwowała miejsce
   według atrybutów pliku, a potem CSS przycinał je do 3:2. Cała treść pod
   spodem podskakiwała: zmierzone przesunięcie układu 0,26 przy progu 0,1.
   Z proporcją na ramce miejsce jest zarezerwowane od pierwszej klatki. */
.gk-glowa__obraz {
	aspect-ratio: 3 / 2;
	border-radius: var(--gk-promien-duzy);
	overflow: hidden;
	box-shadow: var(--gk-cien);
}
.gk-glowa__obraz img { width: 100%; height: 100%; object-fit: cover; display: block; }

.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__naglowek {
	margin-top: var(--gk-o9);
	font-size: var(--gk-h2);
	font-variation-settings: "wdth" 110;
	line-height: var(--gk-linia-ciasna);
	color: var(--gk-atrament);
	text-wrap: balance;
}
.gk-zakres {
	display: grid;
	gap: var(--gk-o4);
	margin-top: var(--gk-o5);
	grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 48rem) {
	.gk-zakres--kolumn-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.gk-zakres--kolumn-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 62rem) {
	.gk-zakres--kolumn-3 { grid-template-columns: repeat(3, minmax(0, 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;
}
/* Poziom trzeci: większy od tekstu opisu, mniejszy od nagłówka sekcji. */
.gk-zakres__tytul {
	font-size: var(--gk-h3);
	line-height: var(--gk-linia-ciasna);
	color: var(--gk-granat);
	text-wrap: balance;
}
.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); }

/* ----------------------------------------------------------- w budowie -- */

/* Klientowi pokazujemy na tym etapie samą stronę główną. Podstrony
   istnieją i menu do nich prowadzi, ale zamiast półgotowej treści
   pokazują ten ekran. Dzięki temu widać, że nawigacja działa,
   i wiadomo, na czym stoimy. */
.gk-budowa {
	padding-block: clamp(3.5rem, 8vw, 6rem);
	background: linear-gradient(180deg, var(--gk-papier) 0%, var(--gk-biel) 100%);
}
.gk-budowa__karta {
	position: relative;
	display: grid;
	gap: var(--gk-o5);
	justify-items: start;
	padding: clamp(1.75rem, 4vw, 3.25rem);
	background: var(--gk-biel);
	border: 1px solid var(--gk-linia);
	border-left: 4px solid var(--gk-czerwien);
	border-radius: var(--gk-promien-duzy);
	box-shadow: var(--gk-cien);
	overflow: hidden;
}
/* Pas ukośnych kresek: znak roboczy, ale spokojny. */
.gk-budowa__karta::after {
	content: "";
	position: absolute;
	top: 0;
	right: 0;
	width: clamp(6rem, 16vw, 12rem);
	height: 100%;
	background: repeating-linear-gradient(
		-45deg,
		var(--gk-siatka) 0 10px,
		transparent 10px 20px
	);
	pointer-events: none;
}
.gk-budowa__znak {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 3.5rem;
	height: 3.5rem;
	border-radius: var(--gk-promien);
	background: var(--gk-granat);
	color: var(--gk-biel);
}
.gk-budowa__naglowek {
	font-size: var(--gk-h2);
	font-variation-settings: "wdth" 112;
	color: var(--gk-granat);
}
.gk-budowa__tekst {
	color: var(--gk-szary);
	line-height: var(--gk-linia-luzna);
}
.gk-budowa__akcje { display: flex; flex-wrap: wrap; gap: var(--gk-o3); }
.gk-budowa__stopka {
	position: relative;
	padding-top: var(--gk-o5);
	border-top: 1px solid var(--gk-linia);
	width: 100%;
	color: var(--gk-szary);
	font-size: var(--gk-mikro);
	line-height: var(--gk-linia-srednia);
}

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

.gk-stopka {
	padding-block: var(--gk-o9) var(--gk-o6);
	background: var(--gk-atrament);
	color: var(--gk-tekst-cichy-ciemny);
	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; }
/* Znak w stopce: korpus na biel (18,25:1 na atramencie zamiast 1,53:1),
   a prześwity przyjmują barwę tła, więc rysunek zostaje ten sam, tylko
   w negatywie. Czerwona kropla zostaje firmowa, ma 3,71:1, czyli powyżej
   progu 3:1 obowiązującego dla elementów graficznych. */
.gk-stopka .gk-znak {
	--gk-znak-korpus: var(--gk-biel);
	--gk-znak-swiatlo: var(--gk-atrament);
}
.gk-stopka .gk-znak__tekst strong { color: var(--gk-biel); }
/* Firmowa czerwień na ciemnym tle stopki daje 3,79:1, poniżej progu 4,5.
   Ten sam rozjaśniony odcień, którego używamy w innych ciemnych sekcjach,
   daje 5,01:1 i nadal czyta się jako czerwień z logo. */
.gk-stopka .gk-znak__myslnik { color: var(--gk-czerwien-jasna); }
.gk-stopka .gk-znak__pod { color: var(--gk-tekst-cichy-ciemny); }
.gk-stopka__opis { margin-top: var(--gk-o4); color: var(--gk-tekst-drugi-ciemny); }
.gk-stopka__miasta {
	margin-top: var(--gk-o2);
	color: var(--gk-tekst-cichy-ciemny);
	font-size: var(--gk-mikro);
	line-height: var(--gk-linia-srednia);
	text-wrap: pretty;
}
.gk-stopka__slask { color: var(--gk-tekst-drugi-ciemny); font-weight: var(--gk-waga-mocna); }

.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: var(--gk-ikona-ciemna); }
.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 var(--gk-linia-na-ciemnym);
	font-size: var(--gk-mikro);
	color: var(--gk-tekst-cichy-ciemny);
}
.gk-stopka__wykonanie a { color: var(--gk-tekst-drugi-ciemny); text-decoration: underline; text-underline-offset: 3px; }
.gk-stopka__wykonanie a:hover { color: var(--gk-biel); }

/* ── stopka na telefonie ────────────────────────────────────────────────
   Cztery bloki jeden pod drugim dawały 1015 px, czyli 1,2 ekranu samej
   stopki. Skracamy bez wyrzucania treści: „Usługi” i „Strona” stają obok
   siebie (obie mają krótkie pozycje), kontakt i blok firmowy zostają na
   pełnej szerokości, odstępy schodzą o stopień. Pola dotyku zostają 44 px. */
@media (max-width: 47.99rem) {
	.gk-stopka { padding-block: var(--gk-o7) var(--gk-o5); }
	.gk-stopka__siatka {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: var(--gk-o6) var(--gk-o4);
	}
	.gk-stopka__firma,
	.gk-stopka__kolumna--kontakt { grid-column: 1 / -1; }
	.gk-stopka__tytul { margin-bottom: var(--gk-o2); }
	/* Podpis branżowy stoi już przy znaku w nagłówku strony. */
	.gk-stopka .gk-znak__pod { display: none; }
	.gk-stopka__opis { margin-top: var(--gk-o3); }
	.gk-stopka__dol {
		margin-top: var(--gk-o5);
		padding-top: var(--gk-o4);
	}
}

/* -------------------------------------------- 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: var(--gk-cien-czerwony);
	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);
}
/* Nad stopką słuchawka schodzi z drogi: leżała na odnośnikach w kolumnie
   „Strona”, a numer telefonu stoi w stopce wprost. */
/* Waga selektora podwojona, bo reguła widoczności wyżej też ma dwie klasy
   (`.gk-telefon-plywajacy.gk-telefon-plywajacy--widoczny`). Przy jednej
   klasie ta reguła przegrywała i przycisk zostawał widoczny mimo
   nadanej klasy — sprawdzone pomiarem wyliczonej przezroczystości. */
.gk-telefon-plywajacy.gk-telefon-plywajacy--schowany {
	opacity: 0;
	visibility: hidden;
	transform: translateY(0.75rem);
	pointer-events: none;
}
.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: var(--gk-zaslona-atrament);
	color: var(--gk-tekst-na-ciemnym);
	font-size: 0.75rem;
	line-height: 1.4;
	max-height: 6.5rem;
	overflow-y: auto;
	transform: translateY(100%);
	transition: transform var(--gk-czas-sredni) 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;
	transition: color var(--gk-czas) var(--gk-krzywa);
}
.gk-ciasteczka a:hover { color: var(--gk-czerwien-jasna); }
@media (min-width: 62rem) {
	.gk-ciasteczka {
		padding-block: var(--gk-o3);
		font-size: var(--gk-mikro);
		max-height: none;
	}
}

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

/* --------------------------------------------- przeglądarka zdjęć -- */

/* Pełnoekranowa przeglądarka galerii: zdjęcie, podpis, licznik i strzałki.
   Wcześniej było to okno na jedno zdjęcie, więc przy 38 realizacjach gość
   musiał 38 razy otwierać i zamykać. */
.gk-lupa {
	position: fixed;
	inset: 0;
	z-index: 150;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: clamp(0.75rem, 3vw, 2.5rem);
	background: var(--gk-zaslona-lupa);
	/* Lekkie rozmycie tla: zdjecie ma byc jedyna ostra rzecza na ekranie.
	   Przyciski przegladarki sa pozycjonowane bezwzglednie WEWNATRZ tej
	   warstwy, wiec rozmycie ich nie rusza (memory: lekcja-backdrop-filter-fixed-menu). */
	backdrop-filter: blur(4px);
	opacity: 0;
	transition: opacity var(--gk-czas) var(--gk-krzywa);
}
.gk-lupa.gk-lupa--widoczna { opacity: 1; }

.gk-lupa__scena {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--gk-o3);
	max-width: min(100%, 78rem);
	/* Strzałki stoją po bokach, więc scena nie może pod nie wchodzić. */
	padding-inline: 3.5rem;
}
@media (max-width: 40rem) {
	.gk-lupa__scena { padding-inline: 0; }
}

.gk-lupa__obraz {
	max-width: 100%;
	/* `dvh` liczy okno bez paska adresu Safari na telefonie; `vh`
	   zostaje dla przeglądarek, które `dvh` nie znają. */
	max-height: 76vh;
	max-height: 76dvh;
	border-radius: var(--gk-promien);
	object-fit: contain;
	transition: opacity var(--gk-czas) var(--gk-krzywa);
}
/* Gdy kolejne zdjęcie się wczytuje, poprzednie przygasa. Bez tego
   przy większym pliku ekran na moment stoi i wygląda na zawieszony. */
.gk-lupa--laduje .gk-lupa__obraz { opacity: 0.35; }

.gk-lupa__pasek {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--gk-o4);
	width: 100%;
	color: var(--gk-jasny-na-granacie);
	font-size: var(--gk-maly);
	line-height: var(--gk-linia-srednia);
}
.gk-lupa__podpis { margin: 0; }
.gk-lupa__licznik {
	flex: none;
	font-variant-numeric: tabular-nums;
	font-weight: var(--gk-waga-mocna);
	color: var(--gk-biel);
}

.gk-lupa__zamknij,
.gk-lupa__strzalka {
	position: absolute;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	/* 2,75 rem to 44 px, czyli dolna granica pola dotyku. */
	width: 2.75rem;
	height: 2.75rem;
	border: 1px solid var(--gk-obwodka-na-ciemnym);
	border-radius: var(--gk-promien);
	background: var(--gk-zaslona-granat);
	color: var(--gk-biel);
	cursor: pointer;
	transition: background var(--gk-czas) var(--gk-krzywa),
		border-color var(--gk-czas) var(--gk-krzywa);
}
.gk-lupa__zamknij:hover,
.gk-lupa__strzalka:hover,
.gk-lupa__zamknij:focus-visible,
.gk-lupa__strzalka:focus-visible {
	background: var(--gk-granat);
	border-color: var(--gk-biel);
}

.gk-lupa__zamknij {
	top: clamp(0.75rem, 3vw, 2rem);
	right: clamp(0.75rem, 3vw, 2rem);
}
.gk-lupa__strzalka {
	top: 50%;
	transform: translateY(-50%);
	width: 3rem;
	height: 3rem;
}
.gk-lupa__strzalka--lewo { left: clamp(0.5rem, 2vw, 2rem); }
.gk-lupa__strzalka--prawo { right: clamp(0.5rem, 2vw, 2rem); }

/* Na telefonie strzałki schodzą pod zdjęcie: nad zdjęciem zasłaniałyby
   jego brzegi, a palcem i tak przewija się przesunięciem. */
@media (max-width: 40rem) {
	/* Zdjecie zostaje wysrodkowane, a gora i dol dostaja zapas na przycisk
	   zamkniecia i na strzalki. Wczesniej scena stala u gory i pod poziomym
	   zdjeciem zostawala pusta przestrzen wysoka na pol ekranu. */
	.gk-lupa { padding-block: 4.5rem 5.25rem; }
	.gk-lupa__strzalka {
		top: auto;
		bottom: clamp(0.75rem, 4vw, 2rem);
		transform: none;
	}
	.gk-lupa__obraz {
		max-height: 62vh;
		max-height: 62dvh;
	}
}

@media (prefers-reduced-motion: reduce) {
	.gk-lupa,
	.gk-lupa__obraz,
	.gk-lupa__zamknij,
	.gk-lupa__strzalka { transition: none; }
}

/* ------------------------------------------------------------- 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 var(--gk-czas-wejscie) 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; }
}