@charset "UTF-8";

/* ===========================================================================
   KROJE PISMA
   ---------------------------------------------------------------------------
   Deklaracje @font-face byly wczesniej w osobnym pliku fonts.css. Kazdy plik
   CSS to jednak osobne zapytanie blokujace render, a na hostingu wspoldzielonym
   samo nawiazanie polaczenia kosztuje wiecej niz przeslanie 5 kB tresci.
   Po scaleniu strona pobiera jeden arkusz zamiast dwoch.

   Plik assets/fonts/fonts.css zostaje na dysku - korzysta z niego edytor
   blokow w panelu, gdzie liczba zapytan nie ma znaczenia.
   ===========================================================================*/

/* Barlow 400 - latin */
@font-face {
	font-family: 'Barlow';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url('../fonts/barlow-400-latin.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Barlow 400 - latin-ext */
@font-face {
	font-family: 'Barlow';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url('../fonts/barlow-400-latin-ext.woff2') format('woff2');
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Barlow 500 - latin */
@font-face {
	font-family: 'Barlow';
	font-style: normal;
	font-weight: 500;
	font-display: swap;
	src: url('../fonts/barlow-500-latin.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Barlow 500 - latin-ext */
@font-face {
	font-family: 'Barlow';
	font-style: normal;
	font-weight: 500;
	font-display: swap;
	src: url('../fonts/barlow-500-latin-ext.woff2') format('woff2');
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Barlow 600 - latin */
@font-face {
	font-family: 'Barlow';
	font-style: normal;
	font-weight: 600;
	font-display: swap;
	src: url('../fonts/barlow-600-latin.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Barlow 600 - latin-ext */
@font-face {
	font-family: 'Barlow';
	font-style: normal;
	font-weight: 600;
	font-display: swap;
	src: url('../fonts/barlow-600-latin-ext.woff2') format('woff2');
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Barlow Condensed 500 - latin */
@font-face {
	font-family: 'Barlow Condensed';
	font-style: normal;
	font-weight: 500;
	font-display: swap;
	src: url('../fonts/barlow-condensed-500-latin.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Barlow Condensed 500 - latin-ext */
@font-face {
	font-family: 'Barlow Condensed';
	font-style: normal;
	font-weight: 500;
	font-display: swap;
	src: url('../fonts/barlow-condensed-500-latin-ext.woff2') format('woff2');
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Barlow Condensed 600 - latin */
@font-face {
	font-family: 'Barlow Condensed';
	font-style: normal;
	font-weight: 600;
	font-display: swap;
	src: url('../fonts/barlow-condensed-600-latin.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Barlow Condensed 600 - latin-ext */
@font-face {
	font-family: 'Barlow Condensed';
	font-style: normal;
	font-weight: 600;
	font-display: swap;
	src: url('../fonts/barlow-condensed-600-latin-ext.woff2') format('woff2');
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}


/* ===========================================================================
   KANCELARIA RABSZTYN - arkusz główny
   ---------------------------------------------------------------------------
   Spis treści
     01  Tokeny projektowe (kolory, typografia, siatka, ruch)
     02  Reset i baza
     03  Typografia
     04  Layout: kontenery, siatki, sekcje
     05  Ornamenty marki (linia + znak „+", etykiety, numeracja)
     06  Komponenty: przyciski, karty, tagi, akordeon, formularz
     07  Nagłówek i nawigacja
     08  Sekcje strony głównej
     09  Blog, strony wewnętrzne, komentarze
     10  Stopka
     11  Ruch: scroll-reveal, mikrointerakcje
     12  Dostępność i druk
   ===========================================================================*/

/* ==========================================================================
   01  TOKENY PROJEKTOWE
   Paleta 1:1 z księgi znaku (czytaj-to.txt): stal, stal ciemna, czerń, papier.
   Reszta to wyłącznie warianty tonalne tych czterech wartości.
   ========================================================================== */
:root {
	/* --- marka --- */
	--kr-stal:            #5980A6;   /* akcent podstawowy      */
	--kr-stal-ciemna:     #416180;   /* tekst akcentowany      */
	--kr-czern:           #1D1F20;   /* czerń znaku            */
	--kr-papier:          #F2F2F3;   /* papier                 */

	/* --- warianty tonalne --- */
	--kr-stal-jasna:      #8AA8C5;
	--kr-stal-mgla:       #E4EBF2;
	--kr-stal-woal:       rgba(89, 128, 166, .10);
	--kr-atrament:        #14161A;   /* tło sekcji ciemnych    */
	--kr-atrament-glebia: #0E1013;
	--kr-grafit:          #3A3D40;
	--kr-szary:           #5D5D60;   /* podpis w logo          */
	--kr-szary-jasny:     #8A8C8F;
	--kr-linia:           #DCDDE0;
	--kr-linia-ciemna:    rgba(255, 255, 255, .14);
	--kr-biel:            #FFFFFF;

	/* --- role semantyczne --- */
	--kr-tlo:             var(--kr-biel);
	--kr-tlo-alt:         var(--kr-papier);
	--kr-tekst:           var(--kr-czern);
	--kr-tekst-cichy:     var(--kr-szary);
	--kr-akcent:          var(--kr-stal);
	--kr-akcent-tekst:    var(--kr-stal-ciemna);
	--kr-obwodka:         var(--kr-linia);

	/* --- typografia --- */
	--kr-font-naglowki:   "Barlow Condensed", "Arial Narrow", "Segoe UI", system-ui, sans-serif;
	--kr-font-tekst:      "Barlow", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, system-ui, sans-serif;
	--kr-font-mono:       ui-monospace, "Cascadia Mono", "SFMono-Regular", Consolas, monospace;

	/* skala płynna - clamp(min, preferowana, max) */
	--kr-t--2:  clamp(.6875rem, .66rem + .14vw,  .75rem);    /* 11 → 12 */
	--kr-t--1:  clamp(.8125rem, .78rem + .16vw,  .875rem);   /* 13 → 14 */
	--kr-t-0:   clamp(1rem,     .96rem + .2vw,   1.0625rem); /* 16 → 17 */
	--kr-t-1:   clamp(1.0625rem, 1rem + .3vw,    1.1875rem); /* 17 → 19 */
	--kr-t-2:   clamp(1.25rem,  1.14rem + .55vw, 1.5rem);    /* 20 → 24 */
	--kr-t-3:   clamp(1.5rem,   1.32rem + .9vw,  2rem);      /* 24 → 32 */
	--kr-t-4:   clamp(1.875rem, 1.55rem + 1.6vw, 2.75rem);   /* 30 → 44 */
	--kr-t-5:   clamp(2.375rem, 1.8rem + 2.85vw, 4rem);      /* 38 → 64 */
	--kr-t-6:   clamp(2.75rem,  1.9rem + 4.25vw, 5.25rem);   /* 44 → 84 */

	--kr-lh-ciasny:   1.06;
	--kr-lh-naglowek: 1.14;
	--kr-lh-tekst:    1.68;

	/* letter-spacing przeniesiony z logo: KANCELARIA 8.36/19 = .44em,
	   ADWOKAT JAKUB RABSZTYN 3.3/11 = .30em */
	--kr-ls-etykieta: .30em;
	--kr-ls-nadpis:   .44em;
	--kr-ls-naglowek: .012em;

	/* --- siatka i rytm --- */
	--kr-szer-max:    1240px;
	--kr-szer-waska:   760px;
	--kr-szer-tekst:   68ch;
	--kr-margines:    clamp(1.25rem, 5vw, 3.5rem);
	--kr-rytm:        clamp(4.5rem, 9vw, 8.5rem);   /* odstęp między sekcjami */
	--kr-rytm-maly:   clamp(2.5rem, 5vw, 4.5rem);
	--kr-luka:        clamp(1.25rem, 2.5vw, 2.25rem);

	/* --- forma --- */
	--kr-promien:     2px;      /* kancelaria = kąty proste, nie zaokrąglenia */
	--kr-promien-xl:  4px;
	--kr-obrys:       1px solid var(--kr-obwodka);
	--kr-cien-1:      0 1px 2px rgba(29, 31, 32, .05), 0 2px 10px rgba(29, 31, 32, .04);
	--kr-cien-2:      0 10px 24px rgba(29, 31, 32, .07), 0 2px 6px rgba(29, 31, 32, .04);
	--kr-cien-3:      0 22px 48px rgba(29, 31, 32, .11), 0 4px 12px rgba(29, 31, 32, .05);

	/* --- ruch --- */
	--kr-czas-szybko: 160ms;
	--kr-czas:        280ms;
	--kr-czas-wolno:  620ms;
	--kr-krzywa:      cubic-bezier(.22, .61, .36, 1);
	--kr-krzywa-out:  cubic-bezier(.16, 1, .3, 1);

	--kr-naglowek-h:  84px;
	--kr-z-naglowek:  900;
	--kr-z-szuflada:  950;
	--kr-z-skiplink: 1000;
}

@media (max-width: 782px) {
	:root { --kr-naglowek-h: 68px; }
}

/* Pasek administratora nie może zasłaniać przyklejonego nagłówka. */
.admin-bar .kr-naglowek { top: 32px; }
@media screen and (max-width: 782px) {
	.admin-bar .kr-naglowek { top: 46px; }
}

/* ==========================================================================
   02  RESET I BAZA
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }

html {
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
	scroll-behavior: smooth;
	scroll-padding-top: calc(var(--kr-naglowek-h) + 1.5rem);
	-moz-tab-size: 4;
	tab-size: 4;
}

body {
	margin: 0;
	background: var(--kr-tlo);
	color: var(--kr-tekst);
	font-family: var(--kr-font-tekst);
	font-size: var(--kr-t-0);
	line-height: var(--kr-lh-tekst);
	font-weight: 400;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
	overflow-x: hidden;
	font-variant-numeric: tabular-nums lining-nums;
}

body.kr-menu-otwarte { overflow: hidden; }

h1, h2, h3, h4, h5, h6, p, figure, blockquote, dl, dd { margin: 0; }
ul[class], ol[class] { list-style: none; margin: 0; padding: 0; }

img, svg, video, canvas, iframe {
	display: block;
	max-width: 100%;
	height: auto;
}
img { border-style: none; }

a {
	color: var(--kr-akcent-tekst);
	text-decoration-thickness: 1px;
	text-underline-offset: .22em;
	transition: color var(--kr-czas-szybko) var(--kr-krzywa);
}
a:hover { color: var(--kr-czern); }

button, input, select, textarea {
	font: inherit;
	color: inherit;
	margin: 0;
}
button { background: none; border: 0; cursor: pointer; }

table { border-collapse: collapse; width: 100%; }

hr {
	border: 0;
	height: 1px;
	background: var(--kr-linia);
	margin: var(--kr-rytm-maly) 0;
}

::selection {
	background: var(--kr-stal);
	color: var(--kr-biel);
}

/* Focus widoczny wyłącznie dla klawiatury - wymóg WCAG 2.4.7 */
:focus { outline: none; }
:focus-visible {
	outline: 2px solid var(--kr-stal);
	outline-offset: 3px;
	border-radius: 1px;
}

/* Pasek przewijania w tonacji marki (progressive enhancement) */
@supports (scrollbar-color: auto) {
	html { scrollbar-color: var(--kr-stal-jasna) var(--kr-papier); scrollbar-width: thin; }
}

/* ==========================================================================
   03  TYPOGRAFIA
   ========================================================================== */
h1, h2, h3, h4, h5, h6, .kr-h1, .kr-h2, .kr-h3, .kr-h4 {
	font-family: var(--kr-font-naglowki);
	font-weight: 600;
	line-height: var(--kr-lh-naglowek);
	letter-spacing: var(--kr-ls-naglowek);
	color: var(--kr-czern);
	text-wrap: balance;
}

h1, .kr-h1 { font-size: var(--kr-t-5); line-height: var(--kr-lh-ciasny); }
h2, .kr-h2 { font-size: var(--kr-t-4); }
h3, .kr-h3 { font-size: var(--kr-t-3); }
h4, .kr-h4 { font-size: var(--kr-t-2); }
h5         { font-size: var(--kr-t-1); }
h6         { font-size: var(--kr-t-0); text-transform: uppercase; letter-spacing: .12em; }

p { text-wrap: pretty; }
p + p { margin-top: 1.1em; }

strong, b { font-weight: 600; }

.kr-lead {
	font-size: var(--kr-t-2);
	line-height: 1.52;
	color: var(--kr-grafit);
	font-weight: 400;
}

.kr-tekst-cichy { color: var(--kr-tekst-cichy); }
.kr-miara       { max-width: var(--kr-szer-tekst); }

/* Etykieta nadrzędna - cytat z logo (wers „KANCELARIA") */
.kr-etykieta {
	display: inline-flex;
	align-items: center;
	gap: .7em;
	font-family: var(--kr-font-naglowki);
	font-size: var(--kr-t--1);
	font-weight: 500;
	letter-spacing: var(--kr-ls-etykieta);
	text-transform: uppercase;
	color: var(--kr-akcent-tekst);
	margin: 0 0 1.15rem;
}
.kr-etykieta::before {
	content: "";
	inline-size: clamp(1.5rem, 4vw, 2.75rem);
	block-size: 1px;
	background: currentColor;
	opacity: .55;
	flex: none;
}

.kr-cytat {
	border-left: 2px solid var(--kr-stal);
	padding: .35rem 0 .35rem 1.5rem;
	font-size: var(--kr-t-2);
	line-height: 1.5;
	color: var(--kr-grafit);
	font-style: normal;
}

/* Numeracja sekcji - jak numeracja rozdziałów w pismach kancelarii */
.kr-numer {
	font-family: var(--kr-font-naglowki);
	font-size: var(--kr-t--1);
	font-weight: 600;
	letter-spacing: .18em;
	color: var(--kr-stal);
	font-variant-numeric: tabular-nums;
}

/* ==========================================================================
   04  LAYOUT
   ========================================================================== */
.kr-kontener {
	width: 100%;
	max-width: var(--kr-szer-max);
	margin-inline: auto;
	padding-inline: var(--kr-margines);
}
.kr-kontener--waski { max-width: var(--kr-szer-waska); }

.kr-sekcja {
	position: relative;
	padding-block: var(--kr-rytm);
}
.kr-sekcja--zwarta { padding-block: var(--kr-rytm-maly); }
.kr-sekcja--papier { background: var(--kr-tlo-alt); }

.kr-sekcja--ciemna {
	background: var(--kr-atrament);
	color: rgba(255, 255, 255, .82);
	--kr-obwodka: var(--kr-linia-ciemna);
	--kr-tekst-cichy: rgba(255, 255, 255, .58);
	--kr-akcent-tekst: var(--kr-stal-jasna);
}
.kr-sekcja--ciemna h1,
.kr-sekcja--ciemna h2,
.kr-sekcja--ciemna h3,
.kr-sekcja--ciemna h4 { color: var(--kr-biel); }
.kr-sekcja--ciemna .kr-lead { color: rgba(255, 255, 255, .74); }
.kr-sekcja--ciemna a { color: var(--kr-stal-jasna); }
.kr-sekcja--ciemna a:hover { color: var(--kr-biel); }

/* Nagłówek sekcji: numer + tytuł + lead, wspólny rytm w całym serwisie */
.kr-sekcja__glowa {
	max-width: 62ch;
	margin-bottom: clamp(2.25rem, 4vw, 3.5rem);
}
.kr-sekcja__glowa--srodek {
	margin-inline: auto;
	text-align: center;
}
.kr-sekcja__glowa--srodek .kr-etykieta { justify-content: center; }
.kr-sekcja__glowa > * + p { margin-top: 1.15rem; }

/* Siatki */
.kr-siatka {
	display: grid;
	gap: var(--kr-luka);
}
.kr-siatka--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr)); }
.kr-siatka--3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 17.5rem), 1fr)); }
.kr-siatka--4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 13.5rem), 1fr)); }

.kr-split {
	display: grid;
	gap: clamp(2rem, 5vw, 4.5rem);
	align-items: start;
}
@media (min-width: 62rem) {
	.kr-split           { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
	.kr-split--7-5      { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
	.kr-split--5-7      { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
	.kr-split--srodek   { align-items: center; }
	.kr-lepki           { position: sticky; top: calc(var(--kr-naglowek-h) + 2rem); }
}

/* ==========================================================================
   05  ORNAMENTY MARKI
   Linia + znak „+" pochodzą wprost z konstrukcji logo (line + text „+").
   ========================================================================== */
.kr-linia-znak {
	display: flex;
	align-items: center;
	gap: .5rem;
	margin-block: 1.5rem;
}
.kr-linia-znak::before {
	content: "";
	flex: 1 1 auto;
	height: 1px;
	background: var(--kr-obwodka);
}
.kr-linia-znak::after {
	content: "+";
	flex: none;
	font-family: var(--kr-font-naglowki);
	font-size: .95rem;
	line-height: 1;
	color: var(--kr-stal);
	transform: translateY(-1px);
}

/* Delikatna siatka „papieru dokumentowego" pod sekcjami ciemnymi */
.kr-siatka-tla {
	position: absolute;
	inset: 0;
	pointer-events: none;
	background-image:
		linear-gradient(to right,  rgba(255, 255, 255, .045) 1px, transparent 1px),
		linear-gradient(to bottom, rgba(255, 255, 255, .045) 1px, transparent 1px);
	background-size: 72px 72px;
	mask-image: radial-gradient(ellipse 80% 62% at 50% 42%, #000 35%, transparent 78%);
	-webkit-mask-image: radial-gradient(ellipse 80% 62% at 50% 42%, #000 35%, transparent 78%);
}

/* ==========================================================================
   06  KOMPONENTY
   ========================================================================== */

/* --- Przyciski ------------------------------------------------------------
   Mikrointerakcja: przesuwka tła (sweep) + minimalne uniesienie. Bez
   „skakania" - ruch nie przekracza 2 px, żeby nie odbierać powagi. */
.kr-btn {
	--kr-btn-tlo:    var(--kr-czern);
	--kr-btn-tekst:  var(--kr-biel);
	--kr-btn-obwod:  var(--kr-czern);
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: .65em;
	padding: .95em 1.85em;
	font-family: var(--kr-font-naglowki);
	font-size: var(--kr-t-0);
	font-weight: 600;
	letter-spacing: .085em;
	text-transform: uppercase;
	text-decoration: none;
	line-height: 1.1;
	color: var(--kr-btn-tekst);
	background: var(--kr-btn-tlo);
	border: 1px solid var(--kr-btn-obwod);
	border-radius: var(--kr-promien);
	cursor: pointer;
	overflow: hidden;
	isolation: isolate;
	transition:
		color      var(--kr-czas) var(--kr-krzywa),
		border     var(--kr-czas) var(--kr-krzywa),
		box-shadow var(--kr-czas) var(--kr-krzywa),
		transform  var(--kr-czas) var(--kr-krzywa);
}
.kr-btn::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: var(--kr-stal-ciemna);
	transform: translateY(101%);
	transition: transform var(--kr-czas) var(--kr-krzywa-out);
}
.kr-btn:hover,
.kr-btn:focus-visible {
	color: var(--kr-biel);
	border-color: var(--kr-stal-ciemna);
	transform: translateY(-2px);
	box-shadow: var(--kr-cien-2);
}
.kr-btn:hover::before,
.kr-btn:focus-visible::before { transform: translateY(0); }
.kr-btn:active { transform: translateY(0); box-shadow: var(--kr-cien-1); }

.kr-btn--stal   { --kr-btn-tlo: var(--kr-stal); --kr-btn-obwod: var(--kr-stal); }
.kr-btn--stal::before { background: var(--kr-stal-ciemna); }

.kr-btn--obrys {
	--kr-btn-tlo: transparent;
	--kr-btn-tekst: var(--kr-czern);
	--kr-btn-obwod: var(--kr-czern);
}
.kr-btn--jasny {
	--kr-btn-tlo: transparent;
	--kr-btn-tekst: var(--kr-biel);
	--kr-btn-obwod: rgba(255, 255, 255, .38);
}
.kr-btn--jasny::before { background: var(--kr-biel); }
.kr-btn--jasny:hover,
.kr-btn--jasny:focus-visible { color: var(--kr-czern); border-color: var(--kr-biel); }

.kr-btn--maly { padding: .7em 1.35em; font-size: var(--kr-t--1); }
.kr-btn--pelny { width: 100%; }

.kr-btn__ikona { flex: none; width: 1.05em; height: 1.05em; transition: transform var(--kr-czas) var(--kr-krzywa); }
.kr-btn:hover .kr-btn__ikona { transform: translateX(3px); }

/* --- Link ze strzałką ---------------------------------------------------- */
.kr-link-strzalka {
	display: inline-flex;
	align-items: center;
	gap: .55em;
	font-family: var(--kr-font-naglowki);
	font-weight: 600;
	font-size: var(--kr-t-0);
	letter-spacing: .06em;
	text-transform: uppercase;
	text-decoration: none;
	color: var(--kr-akcent-tekst);
}
.kr-link-strzalka::after {
	content: "";
	width: 1.5em;
	height: 1px;
	background: currentColor;
	transition: width var(--kr-czas) var(--kr-krzywa-out);
}
.kr-link-strzalka:hover::after,
.kr-link-strzalka:focus-visible::after { width: 2.5em; }

/* --- Karta --------------------------------------------------------------- */
.kr-karta {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: .9rem;
	padding: clamp(1.5rem, 3vw, 2.25rem);
	background: var(--kr-biel);
	border: var(--kr-obrys);
	border-radius: var(--kr-promien);
	overflow: hidden;
	transition:
		transform    var(--kr-czas) var(--kr-krzywa),
		box-shadow   var(--kr-czas) var(--kr-krzywa),
		border-color var(--kr-czas) var(--kr-krzywa);
}
/* Belka akcentowa wjeżdżająca od lewej - sygnał „aktywnego dokumentu" */
.kr-karta::after {
	content: "";
	position: absolute;
	inset-inline: 0;
	bottom: 0;
	height: 2px;
	background: var(--kr-stal);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform var(--kr-czas-wolno) var(--kr-krzywa-out);
}
.kr-karta:hover,
.kr-karta:focus-within {
	transform: translateY(-4px);
	box-shadow: var(--kr-cien-2);
	border-color: var(--kr-stal-jasna);
}
.kr-karta:hover::after,
.kr-karta:focus-within::after { transform: scaleX(1); }

.kr-karta__numer {
	font-family: var(--kr-font-naglowki);
	font-size: var(--kr-t-2);
	font-weight: 600;
	color: var(--kr-stal-jasna);
	line-height: 1;
	letter-spacing: .06em;
}
.kr-karta__tytul { font-size: var(--kr-t-2); }
.kr-karta__tekst { color: var(--kr-tekst-cichy); font-size: var(--kr-t-0); }
.kr-karta__lista { display: grid; gap: .5rem; margin-top: .35rem; }
.kr-karta__lista li {
	position: relative;
	padding-left: 1.1rem;
	font-size: var(--kr-t--1);
	line-height: 1.55;
	color: var(--kr-grafit);
}
.kr-karta__lista li::before {
	content: "";
	position: absolute;
	left: 0;
	top: .62em;
	width: 5px;
	height: 1px;
	background: var(--kr-stal);
}

.kr-sekcja--ciemna .kr-karta {
	background: rgba(255, 255, 255, .035);
	border-color: var(--kr-linia-ciemna);
}
.kr-sekcja--ciemna .kr-karta__tekst { color: rgba(255, 255, 255, .62); }
.kr-sekcja--ciemna .kr-karta__lista li { color: rgba(255, 255, 255, .72); }
.kr-sekcja--ciemna .kr-karta:hover { background: rgba(255, 255, 255, .06); border-color: rgba(255, 255, 255, .28); }

/* Ikona w kwadracie - spójna z geometrią znaku (kąt prosty, cienka kreska) */
.kr-ikona-ramka {
	display: grid;
	place-items: center;
	width: 3rem;
	height: 3rem;
	border: 1px solid var(--kr-stal-jasna);
	border-radius: var(--kr-promien);
	color: var(--kr-stal);
	background: var(--kr-stal-woal);
	transition: background var(--kr-czas) var(--kr-krzywa), color var(--kr-czas) var(--kr-krzywa);
}
.kr-ikona-ramka svg { width: 1.4rem; height: 1.4rem; }
.kr-karta:hover .kr-ikona-ramka { background: var(--kr-stal); color: var(--kr-biel); }

/* --- Tagi ---------------------------------------------------------------- */
.kr-tagi { display: flex; flex-wrap: wrap; gap: .5rem; }
.kr-tag {
	display: inline-flex;
	align-items: center;
	padding: .38em .85em;
	font-family: var(--kr-font-naglowki);
	font-size: var(--kr-t--1);
	font-weight: 500;
	letter-spacing: .1em;
	text-transform: uppercase;
	text-decoration: none;
	color: var(--kr-akcent-tekst);
	background: var(--kr-stal-woal);
	border: 1px solid transparent;
	border-radius: var(--kr-promien);
	transition: background var(--kr-czas) var(--kr-krzywa), border-color var(--kr-czas) var(--kr-krzywa);
}
a.kr-tag:hover { background: transparent; border-color: var(--kr-stal-jasna); }

/* --- Statystyka / licznik ------------------------------------------------ */
.kr-stat { display: grid; gap: .3rem; }
.kr-stat__wartosc {
	font-family: var(--kr-font-naglowki);
	font-size: var(--kr-t-4);
	font-weight: 600;
	line-height: 1;
	color: var(--kr-czern);
	font-variant-numeric: tabular-nums;
}
.kr-sekcja--ciemna .kr-stat__wartosc { color: var(--kr-biel); }
.kr-stat__opis {
	font-size: var(--kr-t--1);
	line-height: 1.45;
	color: var(--kr-tekst-cichy);
}

/* --- Akordeon (FAQ) ------------------------------------------------------
   Natywne <details>: działa bez JS. JS dodaje jedynie płynną wysokość. */
.kr-akordeon { border-top: var(--kr-obrys); }
.kr-faq {
	border-bottom: var(--kr-obrys);
	background: transparent;
}
.kr-faq__pytanie {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 1.5rem;
	width: 100%;
	padding: 1.4rem .25rem;
	font-family: var(--kr-font-naglowki);
	font-size: var(--kr-t-2);
	font-weight: 600;
	line-height: 1.32;
	text-align: left;
	color: var(--kr-czern);
	cursor: pointer;
	list-style: none;
	transition: color var(--kr-czas-szybko) var(--kr-krzywa);
}
.kr-faq__pytanie::-webkit-details-marker { display: none; }
.kr-faq__pytanie:hover { color: var(--kr-akcent-tekst); }

.kr-faq__znak {
	position: relative;
	flex: none;
	width: 1.5rem;
	height: 1.5rem;
	margin-top: .18em;
}
.kr-faq__znak::before,
.kr-faq__znak::after {
	content: "";
	position: absolute;
	inset-inline: 0;
	top: 50%;
	height: 1px;
	background: var(--kr-stal);
	transition: transform var(--kr-czas) var(--kr-krzywa-out);
}
.kr-faq__znak::after { transform: rotate(90deg); }
.kr-faq[open] .kr-faq__znak::after { transform: rotate(0deg); }

.kr-faq__tresc {
	overflow: hidden;
	color: var(--kr-tekst-cichy);
}
.kr-faq__tresc > div {
	padding: 0 3rem 1.6rem .25rem;
	max-width: var(--kr-szer-tekst);
}

/* --- Formularz ----------------------------------------------------------- */
.kr-form { display: grid; gap: 1.35rem; }
.kr-form__rzad {
	display: grid;
	gap: 1.35rem;
}
@media (min-width: 40rem) {
	.kr-form__rzad--2 { grid-template-columns: 1fr 1fr; }
}

.kr-pole { position: relative; }

.kr-pole__wejscie {
	width: 100%;
	padding: 1.5rem .95rem .6rem;
	font-size: var(--kr-t-0);
	color: var(--kr-czern);
	background: var(--kr-biel);
	border: 1px solid var(--kr-obwodka);
	border-radius: var(--kr-promien);
	transition:
		border-color var(--kr-czas) var(--kr-krzywa),
		box-shadow   var(--kr-czas) var(--kr-krzywa),
		background   var(--kr-czas) var(--kr-krzywa);
	appearance: none;
}
textarea.kr-pole__wejscie { min-height: 9.5rem; resize: vertical; line-height: 1.6; }
select.kr-pole__wejscie {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' fill='none' stroke='%235980A6' stroke-width='1.4'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 1rem center;
	background-size: 12px 8px;
	padding-right: 2.6rem;
	cursor: pointer;
}

.kr-pole__wejscie:hover { border-color: var(--kr-stal-jasna); }
.kr-pole__wejscie:focus {
	outline: none;
	border-color: var(--kr-stal);
	box-shadow: 0 0 0 3px var(--kr-stal-woal);
}

/* Etykieta pływająca - sterowana wyłącznie CSS-em (:placeholder-shown) */
.kr-pole__etykieta {
	position: absolute;
	left: 1rem;
	top: 1.15rem;
	font-size: var(--kr-t-0);
	line-height: 1;
	color: var(--kr-szary-jasny);
	pointer-events: none;
	transform-origin: left top;
	transition: transform var(--kr-czas) var(--kr-krzywa), color var(--kr-czas) var(--kr-krzywa);
}
.kr-pole__wejscie:focus + .kr-pole__etykieta,
.kr-pole__wejscie:not(:placeholder-shown) + .kr-pole__etykieta,
select.kr-pole__wejscie + .kr-pole__etykieta {
	transform: translateY(-.72rem) scale(.74);
	color: var(--kr-akcent-tekst);
}

.kr-pole--blad .kr-pole__wejscie { border-color: #B4432F; background: #FDF6F4; }
.kr-pole__blad {
	display: block;
	margin-top: .4rem;
	font-size: var(--kr-t--1);
	color: #B4432F;
}

/* Zgoda RODO */
.kr-zgoda {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: .8rem;
	align-items: start;
	font-size: var(--kr-t--1);
	line-height: 1.55;
	color: var(--kr-tekst-cichy);
}
.kr-zgoda input[type="checkbox"] {
	appearance: none;
	width: 1.15rem;
	height: 1.15rem;
	margin-top: .18rem;
	border: 1px solid var(--kr-stal-jasna);
	border-radius: var(--kr-promien);
	background: var(--kr-biel);
	cursor: pointer;
	transition: background var(--kr-czas-szybko) var(--kr-krzywa), border-color var(--kr-czas-szybko) var(--kr-krzywa);
}
.kr-zgoda input[type="checkbox"]:checked {
	background: var(--kr-stal) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 10'%3E%3Cpath d='M1 5l3.4 3.4L11 1.6' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='square'/%3E%3C/svg%3E") center / 11px 9px no-repeat;
	border-color: var(--kr-stal);
}

/* Pułapka na boty - niewidoczna, ale nie display:none (część botów to wykrywa) */
.kr-pulapka {
	position: absolute !important;
	left: -9999px !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* Komunikaty formularza */
.kr-komunikat {
	padding: 1rem 1.15rem;
	border-left: 3px solid var(--kr-stal);
	background: var(--kr-stal-woal);
	font-size: var(--kr-t--1);
	line-height: 1.6;
	border-radius: var(--kr-promien);
}
.kr-komunikat--ok    { border-color: #2F7D5C; background: rgba(47, 125, 92, .09); color: #1F5A41; }
.kr-komunikat--blad  { border-color: #B4432F; background: rgba(180, 67, 47, .08);  color: #8E3524; }
.kr-komunikat[hidden] { display: none; }

/* Stan wysyłki - pulsujący pasek zamiast spinnera (spokojniejszy) */
.kr-btn[aria-busy="true"] { pointer-events: none; opacity: .72; }
.kr-btn[aria-busy="true"]::after {
	content: "";
	position: absolute;
	inset-inline: 0;
	bottom: 0;
	height: 2px;
	background: var(--kr-biel);
	animation: kr-pasek 1.1s var(--kr-krzywa) infinite;
}
@keyframes kr-pasek {
	0%   { transform: translateX(-100%); }
	100% { transform: translateX(100%); }
}

/* ==========================================================================
   07  NAGŁÓWEK I NAWIGACJA
   ========================================================================== */
.kr-skiplink {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: var(--kr-z-skiplink);
	padding: .9rem 1.4rem;
	background: var(--kr-czern);
	color: var(--kr-biel);
	font-family: var(--kr-font-naglowki);
	font-weight: 600;
	letter-spacing: .08em;
	text-transform: uppercase;
	text-decoration: none;
}
.kr-skiplink:focus {
	left: 1rem;
	top: 1rem;
	color: var(--kr-biel);
}

.kr-naglowek {
	position: fixed;
	inset-inline: 0;
	top: 0;
	z-index: var(--kr-z-naglowek);
	background: transparent;
	border-bottom: 1px solid transparent;
	transition:
		background       var(--kr-czas) var(--kr-krzywa),
		border-color     var(--kr-czas) var(--kr-krzywa),
		box-shadow       var(--kr-czas) var(--kr-krzywa),
		backdrop-filter  var(--kr-czas) var(--kr-krzywa);
}
.kr-naglowek__wnetrze {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: clamp(1rem, 3vw, 2.5rem);
	min-height: var(--kr-naglowek-h);
	/* Bez tranzycji: min-height to wlasciwosc ukladu, przeliczana co klatke
	   przez caly czas trwania animacji. Skok o kilkanascie pikseli i tak jest
	   niezauwazalny. */
}

/* Stan po przewinięciu: szkło + subtelna linia. Nagłówek zwęża się o 12 px. */
.kr-naglowek.jest-przewiniety {
	background: rgba(255, 255, 255, .92);
	backdrop-filter: saturate(150%) blur(8px);
	-webkit-backdrop-filter: saturate(150%) blur(8px);
	border-bottom-color: var(--kr-linia);
	box-shadow: 0 1px 18px rgba(29, 31, 32, .06);
}
.kr-naglowek.jest-przewiniety .kr-naglowek__wnetrze { min-height: calc(var(--kr-naglowek-h) - 12px); }

/* Ukrywanie przy przewijaniu w dół, powrót przy przewijaniu w górę */
.kr-naglowek.jest-schowany { transform: translateY(-100%); }
.kr-naglowek { transition-property: background, border-color, box-shadow, transform; }

/* Logo w nagłówku */
.kr-logo {
	display: inline-flex;
	align-items: center;
	flex: none;
	text-decoration: none;
	color: inherit;
}
.kr-logo svg { width: clamp(148px, 17vw, 190px); height: auto; display: block; }
.kr-logo__tekst-glowny  { fill: var(--kr-czern); }
.kr-logo__tekst-nadpis  { fill: var(--kr-stal-ciemna); }
.kr-logo__tekst-podpis  { fill: var(--kr-szary); }
.kr-logo__linia         { stroke: var(--kr-czern); }
.kr-logo__plus          { fill: var(--kr-stal); }
.kr-logo img { width: clamp(148px, 17vw, 190px); height: auto; }

/* Wariant negatywowy - nagłówek nad ciemnym hero, dopóki nie przewinięto */
.kr-naglowek:not(.jest-przewiniety) .kr-logo__tekst-glowny,
.kr-naglowek:not(.jest-przewiniety) .kr-logo__tekst-podpis { fill: var(--kr-biel); }
.kr-naglowek:not(.jest-przewiniety) .kr-logo__tekst-nadpis { fill: var(--kr-stal-jasna); }
.kr-naglowek:not(.jest-przewiniety) .kr-logo__linia        { stroke: rgba(255, 255, 255, .7); }
body:not(.kr-hero-ciemne) .kr-naglowek .kr-logo__tekst-glowny  { fill: var(--kr-czern); }
body:not(.kr-hero-ciemne) .kr-naglowek .kr-logo__tekst-podpis  { fill: var(--kr-szary); }
body:not(.kr-hero-ciemne) .kr-naglowek .kr-logo__tekst-nadpis  { fill: var(--kr-stal-ciemna); }
body:not(.kr-hero-ciemne) .kr-naglowek .kr-logo__linia         { stroke: var(--kr-czern); }
body:not(.kr-hero-ciemne) .kr-naglowek { background: rgba(255, 255, 255, .92); border-bottom-color: var(--kr-linia); }

/* --- Nawigacja desktop --------------------------------------------------- */
.kr-nawigacja { display: none; }
@media (min-width: 64rem) {
	.kr-nawigacja { display: block; margin-inline-start: auto; }
}
.kr-menu {
	display: flex;
	align-items: center;
	gap: clamp(.75rem, 1.7vw, 1.75rem);
}
.kr-menu li { position: relative; }
.kr-menu a {
	position: relative;
	display: block;
	padding: .5rem .15rem;
	font-family: var(--kr-font-naglowki);
	font-size: var(--kr-t-0);
	font-weight: 500;
	letter-spacing: .055em;
	text-transform: uppercase;
	text-decoration: none;
	color: var(--kr-czern);
	white-space: nowrap;
	transition: color var(--kr-czas-szybko) var(--kr-krzywa);
}
/* Podkreślenie wysuwane od lewej - mikrointerakcja nawigacji */
.kr-menu a::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: .18rem;
	width: 100%;
	height: 1px;
	background: var(--kr-stal);
	transform: scaleX(0);
	transform-origin: right;
	transition: transform var(--kr-czas) var(--kr-krzywa-out);
}
.kr-menu a:hover::after,
.kr-menu a:focus-visible::after { transform: scaleX(1); transform-origin: left; }
.kr-menu a:hover { color: var(--kr-akcent-tekst); }

.kr-menu .current-menu-item > a,
.kr-menu .current_page_item > a,
.kr-menu .current-menu-ancestor > a,
.kr-menu .kr-menu__aktywny > a { color: var(--kr-akcent-tekst); }
.kr-menu .current-menu-item > a::after,
.kr-menu .current_page_item > a::after,
.kr-menu .kr-menu__aktywny > a::after { transform: scaleX(1); transform-origin: left; }

.kr-naglowek:not(.jest-przewiniety) .kr-menu a { color: rgba(255, 255, 255, .88); }
.kr-naglowek:not(.jest-przewiniety) .kr-menu a:hover { color: var(--kr-biel); }
body:not(.kr-hero-ciemne) .kr-naglowek .kr-menu a { color: var(--kr-czern); }
body:not(.kr-hero-ciemne) .kr-naglowek .kr-menu a:hover { color: var(--kr-akcent-tekst); }

/* Podmenu */
.kr-menu .sub-menu {
	position: absolute;
	top: calc(100% + .6rem);
	left: -1rem;
	min-width: 15rem;
	padding: .5rem 0;
	background: var(--kr-biel);
	border: var(--kr-obrys);
	border-radius: var(--kr-promien);
	box-shadow: var(--kr-cien-2);
	opacity: 0;
	visibility: hidden;
	transform: translateY(-6px);
	transition: opacity var(--kr-czas) var(--kr-krzywa), transform var(--kr-czas) var(--kr-krzywa), visibility var(--kr-czas);
}
.kr-menu li:hover > .sub-menu,
.kr-menu li:focus-within > .sub-menu { opacity: 1; visibility: visible; transform: translateY(0); }
.kr-menu .sub-menu a {
	padding: .6rem 1rem;
	text-transform: none;
	letter-spacing: .01em;
	font-weight: 400;
	font-family: var(--kr-font-tekst);
	color: var(--kr-grafit) !important;
	white-space: normal;
}
.kr-menu .sub-menu a::after { display: none; }
.kr-menu .sub-menu a:hover { background: var(--kr-papier); color: var(--kr-czern) !important; }

/* --- Akcje w nagłówku (telefon + CTA) ------------------------------------ */
.kr-naglowek__akcje {
	display: flex;
	align-items: center;
	gap: clamp(.5rem, 1.5vw, 1.15rem);
	flex: none;
}
.kr-telefon-naglowek {
	display: none;
	align-items: center;
	gap: .5rem;
	font-family: var(--kr-font-naglowki);
	font-size: var(--kr-t-0);
	font-weight: 600;
	letter-spacing: .05em;
	text-decoration: none;
	color: var(--kr-czern);
	white-space: nowrap;
}
@media (min-width: 48rem) { .kr-telefon-naglowek { display: inline-flex; } }
.kr-telefon-naglowek svg { width: 1.05em; height: 1.05em; color: var(--kr-stal); }
.kr-naglowek:not(.jest-przewiniety) .kr-telefon-naglowek { color: var(--kr-biel); }
body:not(.kr-hero-ciemne) .kr-naglowek .kr-telefon-naglowek { color: var(--kr-czern); }
.kr-naglowek__cta { display: none; }
@media (min-width: 64rem) { .kr-naglowek__cta { display: inline-flex; } }

/* --- Przełącznik menu mobilnego ------------------------------------------ */
.kr-przelacznik {
	display: grid;
	place-items: center;
	width: 2.9rem;
	height: 2.9rem;
	border: 1px solid var(--kr-obwodka);
	border-radius: var(--kr-promien);
	background: transparent;
	transition: border-color var(--kr-czas) var(--kr-krzywa), background var(--kr-czas) var(--kr-krzywa);
}
@media (min-width: 64rem) { .kr-przelacznik { display: none; } }
.kr-przelacznik:hover { border-color: var(--kr-stal); }
.kr-przelacznik__kreski { position: relative; width: 20px; height: 12px; }
.kr-przelacznik__kreski span {
	position: absolute;
	left: 0;
	width: 100%;
	height: 1.5px;
	background: var(--kr-czern);
	transition: transform var(--kr-czas) var(--kr-krzywa-out), opacity var(--kr-czas-szybko) var(--kr-krzywa);
}
.kr-przelacznik__kreski span:nth-child(1) { top: 0; }
.kr-przelacznik__kreski span:nth-child(2) { top: 5.25px; }
.kr-przelacznik__kreski span:nth-child(3) { top: 10.5px; }
.kr-przelacznik[aria-expanded="true"] .kr-przelacznik__kreski span:nth-child(1) { transform: translateY(5.25px) rotate(45deg); }
.kr-przelacznik[aria-expanded="true"] .kr-przelacznik__kreski span:nth-child(2) { opacity: 0; transform: scaleX(.4); }
.kr-przelacznik[aria-expanded="true"] .kr-przelacznik__kreski span:nth-child(3) { transform: translateY(-5.25px) rotate(-45deg); }

.kr-naglowek:not(.jest-przewiniety) .kr-przelacznik { border-color: rgba(255, 255, 255, .3); }
.kr-naglowek:not(.jest-przewiniety) .kr-przelacznik__kreski span { background: var(--kr-biel); }
body:not(.kr-hero-ciemne) .kr-naglowek .kr-przelacznik { border-color: var(--kr-obwodka); }
body:not(.kr-hero-ciemne) .kr-naglowek .kr-przelacznik__kreski span { background: var(--kr-czern); }
.kr-przelacznik[aria-expanded="true"] { border-color: var(--kr-obwodka) !important; }
.kr-przelacznik[aria-expanded="true"] .kr-przelacznik__kreski span { background: var(--kr-czern) !important; }

/* --- Szuflada mobilna ---------------------------------------------------- */
.kr-szuflada {
	position: fixed;
	inset: 0;
	z-index: var(--kr-z-szuflada);
	display: grid;
	grid-template-rows: var(--kr-naglowek-h) 1fr;
	background: var(--kr-biel);
	visibility: hidden;
	opacity: 0;
	transition: opacity var(--kr-czas) var(--kr-krzywa), visibility var(--kr-czas);
}
.kr-szuflada.jest-otwarta { visibility: visible; opacity: 1; }
@media (min-width: 64rem) { .kr-szuflada { display: none !important; } }

.kr-szuflada__tresc {
	overflow-y: auto;
	overscroll-behavior: contain;
	padding: 1.5rem var(--kr-margines) 3rem;
	display: flex;
	flex-direction: column;
	gap: 2rem;
}
.kr-szuflada__menu { display: grid; }
.kr-szuflada__menu li { border-bottom: var(--kr-obrys); }
.kr-szuflada__menu a {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 1.05rem 0;
	font-family: var(--kr-font-naglowki);
	font-size: var(--kr-t-3);
	font-weight: 600;
	text-decoration: none;
	color: var(--kr-czern);
	/* animacja wejścia poszczególnych pozycji */
	opacity: 0;
	transform: translateY(10px);
	transition: opacity var(--kr-czas) var(--kr-krzywa), transform var(--kr-czas) var(--kr-krzywa), color var(--kr-czas-szybko) var(--kr-krzywa);
}
.kr-szuflada.jest-otwarta .kr-szuflada__menu a { opacity: 1; transform: none; }
.kr-szuflada__menu li:nth-child(1) a { transition-delay: 60ms; }
.kr-szuflada__menu li:nth-child(2) a { transition-delay: 100ms; }
.kr-szuflada__menu li:nth-child(3) a { transition-delay: 140ms; }
.kr-szuflada__menu li:nth-child(4) a { transition-delay: 180ms; }
.kr-szuflada__menu li:nth-child(5) a { transition-delay: 220ms; }
.kr-szuflada__menu li:nth-child(6) a { transition-delay: 260ms; }
.kr-szuflada__menu li:nth-child(7) a { transition-delay: 300ms; }
.kr-szuflada__menu li:nth-child(n+8) a { transition-delay: 340ms; }
.kr-szuflada__menu a:hover,
.kr-szuflada__menu .current-menu-item > a { color: var(--kr-akcent-tekst); }
.kr-szuflada__menu .sub-menu { padding: 0 0 .8rem 1rem; }
.kr-szuflada__menu .sub-menu li { border: 0; }
.kr-szuflada__menu .sub-menu a { font-size: var(--kr-t-1); font-weight: 400; padding: .5rem 0; font-family: var(--kr-font-tekst); }

.kr-szuflada__kontakt {
	display: grid;
	gap: .9rem;
	padding-top: 1.5rem;
	border-top: var(--kr-obrys);
}
.kr-szuflada__kontakt a {
	display: flex;
	align-items: center;
	gap: .75rem;
	font-size: var(--kr-t-1);
	text-decoration: none;
	color: var(--kr-grafit);
}
.kr-szuflada__kontakt svg { width: 1.05em; height: 1.05em; color: var(--kr-stal); flex: none; }

/* ==========================================================================
   08  SEKCJE STRONY GŁÓWNEJ
   ========================================================================== */

/* --- HERO ---------------------------------------------------------------- */
.kr-hero {
	position: relative;
	display: flex;
	align-items: flex-end;
	min-height: min(94svh, 60rem);
	padding-block: calc(var(--kr-naglowek-h) + clamp(4rem, 10vw, 8rem)) clamp(3rem, 6vw, 5rem);
	background: var(--kr-atrament-glebia);
	color: rgba(255, 255, 255, .8);
	overflow: hidden;
	isolation: isolate;
}
.kr-hero__tlo {
	position: absolute;
	inset: 0;
	z-index: -2;
	object-fit: cover;
	width: 100%;
	height: 100%;
	opacity: .3;
	filter: grayscale(100%) contrast(108%);
	transform: scale(1.06);
	animation: kr-hero-oddech 26s ease-in-out infinite alternate;
}
@keyframes kr-hero-oddech {
	from { transform: scale(1.06) translate3d(0, 0, 0); }
	to   { transform: scale(1.14) translate3d(0, -1.5%, 0); }
}
.kr-hero__zaslona {
	position: absolute;
	inset: 0;
	z-index: -1;
	background:
		linear-gradient(180deg, rgba(14, 16, 19, .92) 0%, rgba(14, 16, 19, .74) 42%, rgba(14, 16, 19, .96) 100%),
		radial-gradient(70% 55% at 78% 18%, rgba(89, 128, 166, .30) 0%, transparent 68%);
}
.kr-hero__tresc { position: relative; max-width: 60rem; }
.kr-hero .kr-etykieta { color: var(--kr-stal-jasna); }

.kr-hero__tytul {
	font-size: var(--kr-t-6);
	line-height: var(--kr-lh-ciasny);
	color: var(--kr-biel);
	letter-spacing: .008em;
	margin-bottom: clamp(1.25rem, 2.5vw, 1.9rem);
}
.kr-hero__tytul em {
	font-style: normal;
	color: var(--kr-stal-jasna);
}
.kr-hero__lead {
	max-width: 46ch;
	font-size: var(--kr-t-2);
	line-height: 1.55;
	color: rgba(255, 255, 255, .76);
}
.kr-hero__akcje {
	display: flex;
	flex-wrap: wrap;
	gap: .9rem;
	margin-top: clamp(2rem, 4vw, 2.9rem);
}

/* Pasek wiarygodności pod hero - sygnały E-E-A-T widoczne bez przewijania */
.kr-hero__stopka {
	position: relative;
	margin-top: clamp(3rem, 7vw, 5rem);
	padding-top: 1.6rem;
	border-top: 1px solid rgba(255, 255, 255, .16);
	display: grid;
	gap: 1.4rem clamp(1.5rem, 4vw, 3rem);
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr));
}
.kr-hero__fakt { display: grid; gap: .28rem; }
.kr-hero__fakt dt {
	font-family: var(--kr-font-naglowki);
	font-size: var(--kr-t--2);
	font-weight: 500;
	letter-spacing: var(--kr-ls-etykieta);
	text-transform: uppercase;
	color: rgba(255, 255, 255, .48);
}
.kr-hero__fakt dd {
	font-family: var(--kr-font-naglowki);
	font-size: var(--kr-t-1);
	font-weight: 600;
	color: var(--kr-biel);
	line-height: 1.3;
}

/* Wskaźnik przewijania */
.kr-hero__scroll {
	position: absolute;
	right: var(--kr-margines);
	bottom: clamp(3rem, 6vw, 5rem);
	display: none;
	writing-mode: vertical-rl;
	font-family: var(--kr-font-naglowki);
	font-size: var(--kr-t--2);
	letter-spacing: var(--kr-ls-etykieta);
	text-transform: uppercase;
	color: rgba(255, 255, 255, .45);
	text-decoration: none;
	align-items: center;
	gap: .9rem;
}
@media (min-width: 64rem) { .kr-hero__scroll { display: inline-flex; } }
.kr-hero__scroll::after {
	content: "";
	width: 1px;
	height: 3.5rem;
	background: linear-gradient(to bottom, var(--kr-stal-jasna), transparent);
	animation: kr-scroll-puls 2.4s var(--kr-krzywa) infinite;
	transform-origin: top;
}
@keyframes kr-scroll-puls {
	0%, 100% { transform: scaleY(.35); opacity: .4; }
	50%      { transform: scaleY(1);   opacity: 1; }
}

/* --- Pasek zaufania / logotypy sektorów ---------------------------------- */
.kr-pasek-sektorow {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: clamp(1rem, 3vw, 2.75rem);
	padding-block: clamp(1.5rem, 3vw, 2.25rem);
}
.kr-pasek-sektorow__etykieta {
	font-family: var(--kr-font-naglowki);
	font-size: var(--kr-t--2);
	letter-spacing: var(--kr-ls-etykieta);
	text-transform: uppercase;
	color: var(--kr-szary-jasny);
}
.kr-pasek-sektorow li {
	font-family: var(--kr-font-naglowki);
	font-size: var(--kr-t-1);
	font-weight: 600;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--kr-grafit);
	transition: color var(--kr-czas) var(--kr-krzywa);
}
.kr-pasek-sektorow li:hover { color: var(--kr-stal); }

/* --- Specjalizacja: numerowana lista zakresu ----------------------------- */
.kr-zakres { display: grid; gap: 0; border-top: var(--kr-obrys); }
.kr-zakres__pozycja {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 1rem 1.4rem;
	padding-block: 1.35rem;
	border-bottom: var(--kr-obrys);
	transition: padding-inline var(--kr-czas) var(--kr-krzywa), background var(--kr-czas) var(--kr-krzywa);
}
.kr-zakres__pozycja:hover { background: var(--kr-stal-woal); padding-inline: .85rem; }
.kr-zakres__numer {
	font-family: var(--kr-font-naglowki);
	font-size: var(--kr-t--1);
	font-weight: 600;
	letter-spacing: .12em;
	color: var(--kr-stal-jasna);
	padding-top: .3em;
	font-variant-numeric: tabular-nums;
}
.kr-zakres__tytul { font-size: var(--kr-t-2); margin-bottom: .3rem; }
.kr-zakres__opis  { color: var(--kr-tekst-cichy); font-size: var(--kr-t-0); max-width: 58ch; }

/* --- Proces (oś czasu) --------------------------------------------------- */
.kr-proces {
	display: grid;
	gap: clamp(1.5rem, 3vw, 2.5rem);
	counter-reset: kr-krok;
}
@media (min-width: 52rem) {
	.kr-proces { grid-template-columns: repeat(4, 1fr); }
}
.kr-krok {
	position: relative;
	padding-top: 2.4rem;
	counter-increment: kr-krok;
}
.kr-krok::before {
	content: "";
	position: absolute;
	top: .55rem;
	left: 0;
	right: 0;
	height: 1px;
	background: var(--kr-obwodka);
}
.kr-krok::after {
	content: "";
	position: absolute;
	top: calc(.55rem - 3px);
	left: 0;
	width: 7px;
	height: 7px;
	background: var(--kr-stal);
	border-radius: 50%;
	transition: transform var(--kr-czas) var(--kr-krzywa-out);
}
.kr-krok:hover::after { transform: scale(1.6); }
.kr-krok__numer {
	position: absolute;
	top: 1.15rem;
	left: 0;
	font-family: var(--kr-font-naglowki);
	font-size: var(--kr-t--1);
	font-weight: 600;
	letter-spacing: .14em;
	color: var(--kr-stal-jasna);
}
.kr-krok__tytul { margin-top: .9rem; font-size: var(--kr-t-2); }
.kr-krok__opis  { margin-top: .5rem; color: var(--kr-tekst-cichy); font-size: var(--kr-t-0); }

/* --- Blok „o adwokacie" -------------------------------------------------- */
.kr-portret {
	position: relative;
	border-radius: var(--kr-promien);
	overflow: hidden;
	background: var(--kr-papier);
	aspect-ratio: 4 / 5;
}
.kr-portret img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 1.2s var(--kr-krzywa-out);
}
.kr-portret:hover img { transform: scale(1.035); }
.kr-portret::after {
	content: "";
	position: absolute;
	inset: 0;
	border: 1px solid rgba(29, 31, 32, .08);
	pointer-events: none;
}
/* Zastępnik portretu - style w sekcji 25. */

.kr-podpis-obrazu {
	display: block;
	margin-top: .8rem;
	font-size: var(--kr-t--1);
	color: var(--kr-tekst-cichy);
}

/* Lista faktów (wpis, izba, NIP) */
.kr-fakty {
	display: grid;
	gap: 0;
	margin-top: 2rem;
	border-top: var(--kr-obrys);
}
.kr-fakty > div {
	display: grid;
	grid-template-columns: minmax(8rem, 12rem) 1fr;
	gap: 1rem;
	padding-block: .85rem;
	border-bottom: var(--kr-obrys);
	font-size: var(--kr-t-0);
}
.kr-fakty dt {
	font-family: var(--kr-font-naglowki);
	font-size: var(--kr-t--1);
	font-weight: 500;
	letter-spacing: var(--kr-ls-etykieta);
	text-transform: uppercase;
	color: var(--kr-tekst-cichy);
	padding-top: .18em;
}
.kr-fakty dd { color: var(--kr-czern); font-weight: 500; }
.kr-sekcja--ciemna .kr-fakty dd { color: var(--kr-biel); }

/* --- Sekcja kontaktowa --------------------------------------------------- */
.kr-kontakt__nap {
	display: grid;
	gap: 1.35rem;
	margin-top: 2rem;
}
.kr-nap-poz {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 1rem;
	align-items: start;
}
.kr-nap-poz__ikona {
	display: grid;
	place-items: center;
	width: 2.5rem;
	height: 2.5rem;
	border: 1px solid var(--kr-obwodka);
	border-radius: var(--kr-promien);
	color: var(--kr-stal);
	flex: none;
	transition: background var(--kr-czas) var(--kr-krzywa), color var(--kr-czas) var(--kr-krzywa), border-color var(--kr-czas) var(--kr-krzywa);
}
.kr-nap-poz__ikona svg { width: 1.1rem; height: 1.1rem; }
.kr-nap-poz:hover .kr-nap-poz__ikona { background: var(--kr-stal); border-color: var(--kr-stal); color: var(--kr-biel); }
.kr-nap-poz__etykieta {
	display: block;
	font-family: var(--kr-font-naglowki);
	font-size: var(--kr-t--2);
	font-weight: 500;
	letter-spacing: var(--kr-ls-etykieta);
	text-transform: uppercase;
	color: var(--kr-tekst-cichy);
	margin-bottom: .12rem;
}
.kr-nap-poz__wartosc {
	font-size: var(--kr-t-1);
	font-weight: 500;
	color: var(--kr-czern);
	text-decoration: none;
	line-height: 1.4;
}
.kr-sekcja--ciemna .kr-nap-poz__wartosc { color: var(--kr-biel); }
a.kr-nap-poz__wartosc:hover { color: var(--kr-akcent-tekst); }

.kr-mapa {
	position: relative;
	margin-top: 2rem;
	border: var(--kr-obrys);
	border-radius: var(--kr-promien);
	overflow: hidden;
	aspect-ratio: 16 / 10;
	background: var(--kr-papier);
}
.kr-mapa iframe { width: 100%; height: 100%; border: 0; filter: grayscale(88%) contrast(104%); transition: filter var(--kr-czas-wolno) var(--kr-krzywa); }
.kr-mapa:hover iframe { filter: grayscale(0%); }
/* Zgoda przed osadzeniem mapy - mapa ładuje się dopiero po kliknięciu (RODO) */
.kr-mapa__zgoda {
	position: absolute;
	inset: 0;
	display: grid;
	place-content: center;
	justify-items: center;
	gap: 1rem;
	padding: 1.5rem;
	text-align: center;
	background: var(--kr-papier);
}
.kr-mapa__zgoda p { font-size: var(--kr-t--1); color: var(--kr-tekst-cichy); max-width: 34ch; }

/* --- CTA końcowe --------------------------------------------------------- */
.kr-cta {
	position: relative;
	overflow: hidden;
	background: var(--kr-czern);
	color: var(--kr-biel);
}
.kr-cta__wnetrze {
	position: relative;
	display: grid;
	gap: clamp(1.5rem, 4vw, 3rem);
	align-items: center;
	text-align: center;
	justify-items: center;
}
.kr-cta h2 { color: var(--kr-biel); max-width: 22ch; }
.kr-cta p  { color: rgba(255, 255, 255, .72); max-width: 54ch; }
.kr-cta__akcje { display: flex; flex-wrap: wrap; gap: .9rem; justify-content: center; }

/* ==========================================================================
   09  BLOG I STRONY WEWNĘTRZNE
   ========================================================================== */
.kr-naglowek-strony {
	position: relative;
	padding-block: calc(var(--kr-naglowek-h) + clamp(3rem, 6vw, 5rem)) clamp(2.5rem, 5vw, 4rem);
	background: var(--kr-papier);
	border-bottom: var(--kr-obrys);
}
.kr-naglowek-strony__tytul { max-width: 22ch; }
.kr-naglowek-strony__lead { margin-top: 1.15rem; max-width: 58ch; }

/* Okruszki */
.kr-okruszki {
	font-size: var(--kr-t--1);
	color: var(--kr-tekst-cichy);
	margin-bottom: 1.25rem;
}
.kr-okruszki ol { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; list-style: none; margin: 0; padding: 0; }
.kr-okruszki li { display: inline-flex; align-items: center; gap: .4rem; }
.kr-okruszki li + li::before { content: "/"; color: var(--kr-stal-jasna); }
.kr-okruszki a { color: var(--kr-tekst-cichy); text-decoration: none; }
.kr-okruszki a:hover { color: var(--kr-akcent-tekst); text-decoration: underline; }
.kr-okruszki [aria-current="page"] { color: var(--kr-czern); }

/* Lista wpisów */
.kr-wpisy { display: grid; gap: var(--kr-luka); }
@media (min-width: 46rem) { .kr-wpisy { grid-template-columns: repeat(auto-fill, minmax(min(100%, 20rem), 1fr)); } }

.kr-wpis {
	display: flex;
	flex-direction: column;
	background: var(--kr-biel);
	border: var(--kr-obrys);
	border-radius: var(--kr-promien);
	overflow: hidden;
	transition: transform var(--kr-czas) var(--kr-krzywa), box-shadow var(--kr-czas) var(--kr-krzywa), border-color var(--kr-czas) var(--kr-krzywa);
}
.kr-wpis:hover { transform: translateY(-4px); box-shadow: var(--kr-cien-2); border-color: var(--kr-stal-jasna); }
.kr-wpis__miniatura { aspect-ratio: 16 / 10; overflow: hidden; background: var(--kr-papier); }
.kr-wpis__miniatura img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--kr-czas-wolno) var(--kr-krzywa-out); }
.kr-wpis:hover .kr-wpis__miniatura img { transform: scale(1.05); }
.kr-wpis__tresc { display: flex; flex-direction: column; gap: .7rem; padding: clamp(1.25rem, 2.5vw, 1.75rem); flex: 1; }
.kr-wpis__meta { font-size: var(--kr-t--1); color: var(--kr-tekst-cichy); letter-spacing: .04em; }
.kr-wpis__tytul { font-size: var(--kr-t-2); }
.kr-wpis__tytul a { color: inherit; text-decoration: none; }
.kr-wpis__tytul a:hover { color: var(--kr-akcent-tekst); }
.kr-wpis__zajawka { color: var(--kr-tekst-cichy); font-size: var(--kr-t-0); }
.kr-wpis__stopka { margin-top: auto; padding-top: .5rem; }

/* Treść wpisu / strony */
.kr-tresc { max-width: var(--kr-szer-tekst); }
.kr-tresc > * + * { margin-top: 1.25rem; }
.kr-tresc h2 { margin-top: 2.6rem; font-size: var(--kr-t-3); }
.kr-tresc h3 { margin-top: 2.1rem; font-size: var(--kr-t-2); }
.kr-tresc h4 { margin-top: 1.7rem; }
.kr-tresc ul, .kr-tresc ol { padding-left: 1.35rem; display: grid; gap: .55rem; }
.kr-tresc li::marker { color: var(--kr-stal); }
.kr-tresc blockquote {
	margin: 2rem 0;
	padding: .35rem 0 .35rem 1.6rem;
	border-left: 2px solid var(--kr-stal);
	font-size: var(--kr-t-2);
	line-height: 1.5;
	color: var(--kr-grafit);
}
.kr-tresc img, .kr-tresc figure { border-radius: var(--kr-promien); }
.kr-tresc figcaption { margin-top: .6rem; font-size: var(--kr-t--1); color: var(--kr-tekst-cichy); }
.kr-tresc code { font-family: var(--kr-font-mono); font-size: .92em; background: var(--kr-papier); padding: .15em .4em; border-radius: var(--kr-promien); }
.kr-tresc pre { overflow-x: auto; padding: 1.25rem; background: var(--kr-atrament); color: rgba(255,255,255,.86); border-radius: var(--kr-promien); }
.kr-tresc pre code { background: none; padding: 0; color: inherit; }
.kr-tresc table { font-size: var(--kr-t--1); }
.kr-tresc :is(th, td) { padding: .7rem .9rem; border-bottom: var(--kr-obrys); text-align: left; }
.kr-tresc th { font-family: var(--kr-font-naglowki); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; font-size: var(--kr-t--2); color: var(--kr-tekst-cichy); }
.kr-tresc .wp-block-table { overflow-x: auto; }

.kr-tabela-przewijana { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* Paginacja */
.kr-paginacja { margin-top: var(--kr-rytm-maly); }
.kr-paginacja .nav-links { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.kr-paginacja :is(.page-numbers) {
	display: grid;
	place-items: center;
	min-width: 2.6rem;
	height: 2.6rem;
	padding-inline: .7rem;
	font-family: var(--kr-font-naglowki);
	font-weight: 600;
	text-decoration: none;
	color: var(--kr-grafit);
	border: var(--kr-obrys);
	border-radius: var(--kr-promien);
	transition: all var(--kr-czas) var(--kr-krzywa);
}
.kr-paginacja a.page-numbers:hover { border-color: var(--kr-stal); color: var(--kr-akcent-tekst); }
.kr-paginacja .page-numbers.current { background: var(--kr-czern); border-color: var(--kr-czern); color: var(--kr-biel); }
.kr-paginacja .page-numbers.dots { border-color: transparent; }

/* Nawigacja wpis → wpis */
.kr-nawigacja-wpisow {
	display: grid;
	gap: 1rem;
	margin-top: var(--kr-rytm-maly);
	padding-top: var(--kr-rytm-maly);
	border-top: var(--kr-obrys);
}
@media (min-width: 46rem) { .kr-nawigacja-wpisow { grid-template-columns: 1fr 1fr; } }
.kr-nawigacja-wpisow a {
	display: grid;
	gap: .35rem;
	padding: 1.25rem;
	border: var(--kr-obrys);
	border-radius: var(--kr-promien);
	text-decoration: none;
	transition: border-color var(--kr-czas) var(--kr-krzywa), background var(--kr-czas) var(--kr-krzywa);
}
.kr-nawigacja-wpisow a:hover { border-color: var(--kr-stal); background: var(--kr-stal-woal); }
.kr-nawigacja-wpisow span {
	font-family: var(--kr-font-naglowki);
	font-size: var(--kr-t--2);
	letter-spacing: var(--kr-ls-etykieta);
	text-transform: uppercase;
	color: var(--kr-tekst-cichy);
}
.kr-nawigacja-wpisow strong { font-family: var(--kr-font-naglowki); font-size: var(--kr-t-1); font-weight: 600; color: var(--kr-czern); }
.kr-nawigacja-wpisow .kr-nast { text-align: right; }

/* Formularz wyszukiwania */
.kr-szukajka { display: flex; gap: .5rem; }
.kr-szukajka input[type="search"] {
	flex: 1;
	padding: .85rem 1rem;
	border: var(--kr-obrys);
	border-radius: var(--kr-promien);
	background: var(--kr-biel);
	transition: border-color var(--kr-czas) var(--kr-krzywa), box-shadow var(--kr-czas) var(--kr-krzywa);
}
.kr-szukajka input[type="search"]:focus { outline: none; border-color: var(--kr-stal); box-shadow: 0 0 0 3px var(--kr-stal-woal); }

/* Komentarze */
.kr-komentarze { margin-top: var(--kr-rytm-maly); padding-top: var(--kr-rytm-maly); border-top: var(--kr-obrys); }
.kr-komentarze ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.5rem; }
.kr-komentarze .children { padding-left: clamp(1rem, 4vw, 2.5rem); margin-top: 1.5rem; }
.kr-komentarz { padding: 1.35rem; border: var(--kr-obrys); border-radius: var(--kr-promien); }
.kr-komentarz__meta { font-size: var(--kr-t--1); color: var(--kr-tekst-cichy); margin-bottom: .6rem; }
.kr-komentarz__autor { font-family: var(--kr-font-naglowki); font-weight: 600; color: var(--kr-czern); font-size: var(--kr-t-1); }

/* 404 */
.kr-404 { text-align: center; padding-block: clamp(6rem, 14vw, 11rem) var(--kr-rytm); }
.kr-404__kod {
	font-family: var(--kr-font-naglowki);
	font-size: clamp(5rem, 18vw, 11rem);
	font-weight: 600;
	line-height: .9;
	color: var(--kr-stal-mgla);
	letter-spacing: .04em;
}

/* ==========================================================================
   10  STOPKA
   ========================================================================== */
.kr-stopka {
	background: var(--kr-atrament);
	color: rgba(255, 255, 255, .68);
	--kr-obwodka: var(--kr-linia-ciemna);
}
.kr-stopka__gora {
	display: grid;
	gap: clamp(2.5rem, 5vw, 4rem);
	padding-block: clamp(3.5rem, 7vw, 5.5rem);
}
@media (min-width: 60rem) {
	.kr-stopka__gora { grid-template-columns: minmax(0, 1.25fr) repeat(3, minmax(0, 1fr)); }
}
.kr-stopka__logo svg { width: 190px; height: auto; }
.kr-stopka__opis { margin-top: 1.5rem; max-width: 38ch; font-size: var(--kr-t--1); line-height: 1.7; color: rgba(255, 255, 255, .6); }

.kr-stopka__tytul {
	font-family: var(--kr-font-naglowki);
	font-size: var(--kr-t--2);
	font-weight: 500;
	letter-spacing: var(--kr-ls-etykieta);
	text-transform: uppercase;
	color: rgba(255, 255, 255, .45);
	margin-bottom: 1.25rem;
}
.kr-stopka__lista { display: grid; gap: .7rem; }
.kr-stopka__lista a,
.kr-stopka address a {
	color: rgba(255, 255, 255, .78);
	text-decoration: none;
	font-size: var(--kr-t-0);
	transition: color var(--kr-czas-szybko) var(--kr-krzywa), padding-left var(--kr-czas) var(--kr-krzywa);
}
.kr-stopka__lista a:hover { color: var(--kr-biel); padding-left: .35rem; }
.kr-stopka address { font-style: normal; display: grid; gap: .7rem; font-size: var(--kr-t-0); line-height: 1.55; }
.kr-stopka address a:hover { color: var(--kr-biel); }

.kr-stopka__dol {
	display: flex;
	flex-wrap: wrap;
	gap: 1rem 2rem;
	align-items: center;
	justify-content: space-between;
	padding-block: 1.6rem;
	border-top: 1px solid var(--kr-linia-ciemna);
	font-size: var(--kr-t--1);
	color: rgba(255, 255, 255, .45);
}
.kr-stopka__dol a { color: rgba(255, 255, 255, .62); text-decoration: none; }
.kr-stopka__dol a:hover { color: var(--kr-biel); text-decoration: underline; }
.kr-stopka__prawne { display: flex; flex-wrap: wrap; gap: .4rem 1.4rem; }

/* Powrót na górę */
.kr-do-gory {
	position: fixed;
	right: clamp(1rem, 3vw, 2rem);
	bottom: clamp(1rem, 3vw, 2rem);
	z-index: 800;
	display: grid;
	place-items: center;
	width: 2.9rem;
	height: 2.9rem;
	background: var(--kr-czern);
	color: var(--kr-biel);
	border-radius: var(--kr-promien);
	box-shadow: var(--kr-cien-2);
	opacity: 0;
	visibility: hidden;
	transform: translateY(12px);
	transition: opacity var(--kr-czas) var(--kr-krzywa), transform var(--kr-czas) var(--kr-krzywa), visibility var(--kr-czas), background var(--kr-czas) var(--kr-krzywa);
}
.kr-do-gory.jest-widoczny { opacity: 1; visibility: visible; transform: none; }
.kr-do-gory:hover { background: var(--kr-stal-ciemna); }
.kr-do-gory svg { width: 1.15rem; height: 1.15rem; }

/* Pasek akcji na mobile - telefon zawsze pod kciukiem */
.kr-pasek-mobilny {
	position: fixed;
	inset-inline: 0;
	bottom: 0;
	z-index: 810;
	display: grid;
	grid-template-columns: 1fr 1fr;
	background: var(--kr-biel);
	border-top: var(--kr-obrys);
	box-shadow: 0 -2px 18px rgba(29, 31, 32, .08);
	transform: translateY(100%);
	transition: transform var(--kr-czas) var(--kr-krzywa);
}
.kr-pasek-mobilny.jest-widoczny { transform: none; }
@media (min-width: 48rem) { .kr-pasek-mobilny { display: none; } }
.kr-pasek-mobilny a {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: .55rem;
	padding: 1rem .5rem;
	font-family: var(--kr-font-naglowki);
	font-size: var(--kr-t-0);
	font-weight: 600;
	letter-spacing: .06em;
	text-transform: uppercase;
	text-decoration: none;
	color: var(--kr-czern);
}
.kr-pasek-mobilny a + a { border-left: var(--kr-obrys); background: var(--kr-czern); color: var(--kr-biel); }
.kr-pasek-mobilny svg { width: 1.05em; height: 1.05em; }
body.ma-pasek-mobilny .kr-do-gory { bottom: calc(3.6rem + 1rem); }

/* ==========================================================================
   11  RUCH
   ========================================================================== */
/* Scroll-reveal: element startuje przesunięty i przezroczysty; klasę
   „jest-widoczny" dodaje IntersectionObserver z assets/js/main.js.
   Gdy JS nie wystartuje, .no-js w <html> wyłącza cały mechanizm. */
[data-kr-odslon] {
	opacity: 0;
	transform: translateY(22px);
	transition:
		opacity   var(--kr-czas-wolno) var(--kr-krzywa-out),
		transform var(--kr-czas-wolno) var(--kr-krzywa-out);
	/* Bez will-change. Kilkadziesiat elementow z wlasna warstwa kompozycji
	   juz przy pierwszym renderze kosztuje pamiec GPU dokladnie wtedy, gdy
	   liczy sie LCP. Tranzycje opacity i transform dostaja promocje same,
	   na czas trwania animacji. */
}
[data-kr-odslon="lewo"]  { transform: translateX(-26px); }
[data-kr-odslon="prawo"] { transform: translateX(26px); }
[data-kr-odslon="skala"] { transform: scale(.97); }
[data-kr-odslon].jest-widoczny {
	opacity: 1;
	transform: none;
}
.no-js [data-kr-odslon] { opacity: 1; transform: none; }

/* Kaskada - opóźnienia dla dzieci kontenera */
[data-kr-kaskada] > * { transition-delay: calc(var(--kr-i, 0) * 90ms); }

/* Wjazd wierszy nagłówka hero.
   Animacja, nie tranzycja przełączana klasą z JavaScriptu. Poprzednia wersja
   trzymała nagłówek poza kadrem do czasu dodania klasy przez skrypt, a że
   klasa była dopinana w requestAnimationFrame, w karcie otwartej w tle
   (gdzie rAF się nie wykonuje) największy tekst na stronie nie pojawiał się
   wcale. Element LCP nie może zależeć od tego, czy skrypt zdążył się wykonać.

   Teraz animacja startuje w chwili wyrenderowania elementu, a opóźnienie
   kolejnych wierszy bierze się ze zmiennej --kr-i ustawianej w PHP.
   Bez JavaScriptu tekst i tak dojedzie na miejsce. */
.kr-odslon-wiersz { display: block; overflow: hidden; }
.kr-odslon-wiersz > span {
	display: block;
	animation: kr-wjazd-wiersza 900ms var(--kr-krzywa-out) both;
	animation-delay: calc(var(--kr-i, 0) * 110ms);
}
@keyframes kr-wjazd-wiersza {
	from { transform: translateY(105%); }
	to   { transform: none; }
}

/* Delikatny parallax - sterowany zmienną ustawianą w JS */
[data-kr-parallax] { transform: translate3d(0, var(--kr-parallax, 0), 0); }

/* ==========================================================================
   12  DOSTĘPNOŚĆ I DRUK
   ========================================================================== */
.screen-reader-text,
.kr-tylko-czytnik {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}
.screen-reader-text:focus {
	position: static !important;
	width: auto;
	height: auto;
	clip: auto;
	white-space: normal;
}

/* Użytkownik prosi o brak ruchu - respektujemy bez wyjątków (WCAG 2.3.3) */
@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*, *::before, *::after {
		animation-duration: .001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .001ms !important;
		scroll-behavior: auto !important;
	}
	[data-kr-odslon] { opacity: 1 !important; transform: none !important; }
	.kr-odslon-wiersz > span { animation: none !important; transform: none !important; }
	.kr-hero__tlo { animation: none; transform: scale(1.02); }
	.kr-hero__scroll::after { animation: none; transform: scaleY(1); }
}

/* Tryb wysokiego kontrastu */
@media (prefers-contrast: more) {
	:root {
		--kr-tekst-cichy: var(--kr-grafit);
		--kr-obwodka: var(--kr-grafit);
	}
	.kr-btn { border-width: 2px; }
}

/* Wymuszone kolory systemowe (Windows High Contrast) */
@media (forced-colors: active) {
	.kr-btn, .kr-karta, .kr-pole__wejscie { border: 1px solid ButtonText; }
	.kr-karta::after, .kr-menu a::after { forced-color-adjust: none; }
}

@media print {
	.kr-naglowek,
	.kr-szuflada,
	.kr-do-gory,
	.kr-pasek-mobilny,
	.kr-hero__scroll,
	.kr-form,
	.kr-mapa,
	.kr-cta { display: none !important; }

	body { background: #fff; color: #000; font-size: 11pt; }
	.kr-sekcja { padding-block: 1.5rem; page-break-inside: avoid; }
	.kr-sekcja--ciemna, .kr-hero { background: #fff !important; color: #000 !important; }
	.kr-sekcja--ciemna :is(h1,h2,h3,h4), .kr-hero :is(h1,h2,h3,h4) { color: #000 !important; }
	.kr-hero__tlo, .kr-hero__zaslona { display: none; }
	a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 9pt; color: #555; }
	[data-kr-odslon] { opacity: 1 !important; transform: none !important; }
}

/* ==========================================================================
   Bloki WordPress - dopasowanie szerokości do siatki motywu
   ========================================================================== */
.kr-tresc .alignwide {
	width: min(100vw - 2 * var(--kr-margines), 1100px);
	max-width: none;
	margin-inline: calc(50% - min(50vw - var(--kr-margines), 550px));
}
.kr-tresc .alignfull {
	width: 100vw;
	max-width: none;
	margin-inline: calc(50% - 50vw);
}
.alignleft  { float: left;  margin: .35rem 1.5rem 1rem 0; }
.alignright { float: right; margin: .35rem 0 1rem 1.5rem; }
.aligncenter { margin-inline: auto; }
.wp-caption { max-width: 100%; }
.sticky .kr-wpis { border-color: var(--kr-stal); }

/* ==========================================================================
   13  UZUPEŁNIENIA KOMPONENTÓW
   ========================================================================== */

/* Znak w nagłówku i stopce */
.kr-marka { display: flex; align-items: center; flex: none; }

/* Nagłówek - jedna, spójna deklaracja przejść (zastępuje wcześniejsze) */
.kr-naglowek {
	/* backdrop-filter celowo POZA lista animowanych wlasciwosci: animowanie
	   rozmycia to najdrozsza tranzycja, jaka mozna zlecic kompozytorowi. */
	transition-property: background, border-color, box-shadow, transform;
	transition-duration: var(--kr-czas);
	transition-timing-function: var(--kr-krzywa);
}

/* Logo w stopce zawsze w negatywie - stopka jest ciemna */
.kr-stopka .kr-logo__tekst-glowny,
.kr-stopka .kr-logo__tekst-podpis { fill: var(--kr-biel); }
.kr-stopka .kr-logo__tekst-nadpis { fill: var(--kr-stal-jasna); }
.kr-stopka .kr-logo__linia        { stroke: rgba(255, 255, 255, .55); }
.kr-stopka .kr-logo__plus         { fill: var(--kr-stal-jasna); }
.kr-stopka__logo svg { max-width: 100%; }

.kr-stopka__zastrzezenie {
	flex-basis: 100%;
	font-size: var(--kr-t--2);
	color: rgba(255, 255, 255, .38);
	line-height: 1.5;
}

/* Szuflada: logo zawsze w wersji podstawowej (białe tło panelu) */
.kr-szuflada .kr-logo__tekst-glowny  { fill: var(--kr-czern); }
.kr-szuflada .kr-logo__tekst-podpis  { fill: var(--kr-szary); }
.kr-szuflada .kr-logo__tekst-nadpis  { fill: var(--kr-stal-ciemna); }
.kr-szuflada .kr-logo__linia         { stroke: var(--kr-czern); }

/* Bloki usług na stronie „Zakres usług" */
.kr-usluga-blok {
	padding-block: clamp(2rem, 4vw, 3.25rem);
	border-bottom: var(--kr-obrys);
}
.kr-usluga-blok:first-of-type { padding-top: 0; }
.kr-usluga-blok:last-of-type  { border-bottom: 0; }

/* Karta formularza - nie unosi się przy najechaniu (to nie jest odnośnik) */
.kr-formularz-karta:hover {
	transform: none;
	box-shadow: var(--kr-cien-1);
	border-color: var(--kr-obwodka);
}
.kr-formularz-karta::after { display: none; }
.kr-formularz-karta .kr-form { margin-top: 1.25rem; }

/* Komunikaty na ciemnym tle */
.kr-sekcja--ciemna .kr-komunikat {
	background: rgba(89, 128, 166, .16);
	color: rgba(255, 255, 255, .82);
}
.kr-sekcja--ciemna .kr-komunikat a { color: var(--kr-stal-jasna); }
.kr-sekcja--ciemna .kr-komunikat--ok   { background: rgba(47, 125, 92, .2);  color: #C8E7D8; border-color: #4FA97F; }
.kr-sekcja--ciemna .kr-komunikat--blad { background: rgba(180, 67, 47, .22); color: #F3C9C0; border-color: #D4705C; }

/* Pola formularza na ciemnym tle */
.kr-sekcja--ciemna .kr-pole__wejscie {
	background: rgba(255, 255, 255, .04);
	border-color: rgba(255, 255, 255, .18);
	color: var(--kr-biel);
}
.kr-sekcja--ciemna .kr-pole__wejscie:hover { border-color: var(--kr-stal-jasna); }
.kr-sekcja--ciemna .kr-pole__wejscie:focus {
	border-color: var(--kr-stal-jasna);
	box-shadow: 0 0 0 3px rgba(138, 168, 197, .2);
	background: rgba(255, 255, 255, .07);
}
.kr-sekcja--ciemna .kr-pole__etykieta { color: rgba(255, 255, 255, .5); }
.kr-sekcja--ciemna .kr-pole__wejscie:focus + .kr-pole__etykieta,
.kr-sekcja--ciemna .kr-pole__wejscie:not(:placeholder-shown) + .kr-pole__etykieta,
.kr-sekcja--ciemna select.kr-pole__wejscie + .kr-pole__etykieta { color: var(--kr-stal-jasna); }
.kr-sekcja--ciemna .kr-zgoda { color: rgba(255, 255, 255, .62); }
.kr-sekcja--ciemna .kr-zgoda a { color: var(--kr-stal-jasna); }
.kr-sekcja--ciemna .kr-zgoda input[type="checkbox"] { background: rgba(255, 255, 255, .06); }
.kr-sekcja--ciemna select.kr-pole__wejscie option { background: var(--kr-atrament); color: var(--kr-biel); }
.kr-sekcja--ciemna .kr-btn--obrys {
	--kr-btn-tekst: var(--kr-biel);
	--kr-btn-obwod: rgba(255, 255, 255, .34);
}
.kr-sekcja--ciemna .kr-btn--obrys::before { background: var(--kr-biel); }
.kr-sekcja--ciemna .kr-btn--obrys:hover,
.kr-sekcja--ciemna .kr-btn--obrys:focus-visible { color: var(--kr-czern); border-color: var(--kr-biel); }

/* Znak „+" i linia w karcie na ciemnym tle */
.kr-sekcja--ciemna .kr-linia-znak::before { background: var(--kr-linia-ciemna); }
.kr-sekcja--ciemna .kr-linia-znak::after  { color: var(--kr-stal-jasna); }

/* Etykieta w sekcji ciemnej */
.kr-sekcja--ciemna .kr-etykieta,
.kr-cta .kr-etykieta { color: var(--kr-stal-jasna); }

/* CTA: przycisk obrysowy musi być czytelny na czerni */
.kr-cta .kr-btn--obrys {
	--kr-btn-tekst: var(--kr-biel);
	--kr-btn-obwod: rgba(255, 255, 255, .34);
}

/* Nagłówek strony wewnętrznej - okruszki nie mogą wpadać pod nagłówek */
.kr-naglowek-strony .kr-okruszki { margin-bottom: 1.75rem; }

/* Meta wpisu w nagłówku artykułu */
.kr-naglowek-strony .kr-wpis__meta { margin-top: 1.25rem; }

/* Domyślne odstępy dla treści blokowej wstawionej w lead */
.kr-naglowek-strony__lead > p + p { margin-top: .9rem; }
.kr-naglowek-strony__lead p:last-child { margin-bottom: 0; }

/* Formularz komentarza - dopasowanie pól WordPressa do stylu motywu */
.comment-form :is(input[type="text"], input[type="email"], input[type="url"], textarea) {
	width: 100%;
	padding: .85rem 1rem;
	border: var(--kr-obrys);
	border-radius: var(--kr-promien);
	background: var(--kr-biel);
	transition: border-color var(--kr-czas) var(--kr-krzywa), box-shadow var(--kr-czas) var(--kr-krzywa);
}
.comment-form :is(input, textarea):focus {
	outline: none;
	border-color: var(--kr-stal);
	box-shadow: 0 0 0 3px var(--kr-stal-woal);
}
.comment-form label { display: block; margin-bottom: .35rem; font-size: var(--kr-t--1); color: var(--kr-tekst-cichy); }
.comment-form p { margin-bottom: 1.1rem; }
.kr-komentarz__odpowiedz { margin-top: .75rem; font-size: var(--kr-t--1); }

/* Karta w siatce trzykolumnowej - wyrównanie wysokości ikon */
.kr-siatka--3 .kr-karta .kr-ikona-ramka,
.kr-siatka--4 .kr-karta .kr-ikona-ramka { margin-bottom: .35rem; }

/* Widgety w stopce */
.kr-widget { margin-top: 1.5rem; }
.kr-widget ul { display: grid; gap: .6rem; list-style: none; padding: 0; margin: 0; }
.kr-widget a { color: rgba(255, 255, 255, .78); text-decoration: none; }
.kr-widget a:hover { color: var(--kr-biel); }

/* Ikony - domyślny rozmiar, gdy nie nadpisano klasą */
.kr-ikona { width: 1.15em; height: 1.15em; flex: none; }

/* Sekcja hero na podstronach nie występuje - nagłówek zawsze jasny */
body:not(.kr-hero-ciemne) .kr-naglowek.jest-przewiniety {
	backdrop-filter: saturate(150%) blur(8px);
	-webkit-backdrop-filter: saturate(150%) blur(8px);
	box-shadow: 0 1px 18px rgba(29, 31, 32, .06);
}

/* Bardzo wąskie ekrany - logo nie może wypychać przycisku menu */
@media (max-width: 22.5rem) {
	.kr-logo svg, .kr-logo img { width: 124px; }
	.kr-naglowek__akcje { gap: .4rem; }
}

/* Ekrany bardzo szerokie - treść nie rozjeżdża się na całą szerokość */
@media (min-width: 100rem) {
	:root { --kr-szer-max: 1340px; }
}

/* Orientacja pozioma na telefonie - hero nie może zajmować 94svh */
@media (max-height: 30rem) and (orientation: landscape) {
	.kr-hero { min-height: auto; padding-block: calc(var(--kr-naglowek-h) + 2.5rem) 2.5rem; }
	.kr-hero__scroll { display: none; }
}

/* ==========================================================================
   14  NAGŁÓWEK - dostrojenie proporcji
   Siedem pozycji menu + znak + telefon musi zmieścić się w kontenerze
   1240 px bez zawijania. Wartości poniżej wynikają z pomiaru, nie z oka.
   ========================================================================== */
.kr-logo svg,
.kr-logo img { width: clamp(136px, 12vw, 164px); }

@media (min-width: 64rem) {
	.kr-menu { gap: clamp(.6rem, 1.15vw, 1.35rem); }
	.kr-menu a { font-size: var(--kr-t--1); letter-spacing: .05em; }
}
@media (min-width: 80rem) {
	.kr-menu a { font-size: var(--kr-t-0); }
}

/* Telefon w nagłówku pełni funkcję przycisku - obrys porządkuje prawą stronę */
.kr-telefon-naglowek {
	padding: .55em 1em;
	border: 1px solid var(--kr-obwodka);
	border-radius: var(--kr-promien);
	font-size: var(--kr-t--1);
	letter-spacing: .06em;
	transition: border-color var(--kr-czas) var(--kr-krzywa), background var(--kr-czas) var(--kr-krzywa), color var(--kr-czas) var(--kr-krzywa);
}
.kr-telefon-naglowek:hover {
	border-color: var(--kr-stal);
	background: var(--kr-stal-woal);
	color: var(--kr-akcent-tekst);
}
.kr-naglowek:not(.jest-przewiniety) .kr-telefon-naglowek { border-color: rgba(255, 255, 255, .26); }
.kr-naglowek:not(.jest-przewiniety) .kr-telefon-naglowek:hover {
	border-color: var(--kr-biel);
	background: rgba(255, 255, 255, .1);
	color: var(--kr-biel);
}
body:not(.kr-hero-ciemne) .kr-naglowek .kr-telefon-naglowek { border-color: var(--kr-obwodka); }
body:not(.kr-hero-ciemne) .kr-naglowek .kr-telefon-naglowek:hover { border-color: var(--kr-stal); color: var(--kr-akcent-tekst); }

@media (min-width: 80rem) { .kr-telefon-naglowek { font-size: var(--kr-t-0); } }

/* ==========================================================================
   15  MENU MOBILNE - nagłówek ponad szufladą
   Szuflada ma wyższy z-index niż nagłówek, więc bez tej korekty przycisk
   zamknięcia (X) chowałby się pod panelem i menu dałoby się zamknąć wyłącznie
   klawiszem Escape albo kliknięciem pozycji. Podnosimy nagłówek i przełączamy
   go na wersję na jasnym tle.
   ========================================================================== */
body.kr-menu-otwarte .kr-naglowek {
	z-index: calc(var(--kr-z-szuflada) + 10);
	background: var(--kr-biel);
	border-bottom-color: transparent;
	box-shadow: none;
	transform: none;
	backdrop-filter: none;
	-webkit-backdrop-filter: none;
}
body.kr-menu-otwarte .kr-naglowek .kr-logo__tekst-glowny { fill: var(--kr-czern); }
body.kr-menu-otwarte .kr-naglowek .kr-logo__tekst-podpis { fill: var(--kr-szary); }
body.kr-menu-otwarte .kr-naglowek .kr-logo__tekst-nadpis { fill: var(--kr-stal-ciemna); }
body.kr-menu-otwarte .kr-naglowek .kr-logo__linia        { stroke: var(--kr-czern); }
body.kr-menu-otwarte .kr-naglowek .kr-logo__plus         { fill: var(--kr-stal); }
body.kr-menu-otwarte .kr-telefon-naglowek {
	color: var(--kr-czern);
	border-color: var(--kr-obwodka);
}

/* Pasek akcji na dole nie może przykrywać ostatnich pozycji menu. */
body.kr-menu-otwarte .kr-pasek-mobilny,
body.kr-menu-otwarte .kr-do-gory { display: none; }

/* ==========================================================================
   16  NAGŁÓWEK - korekta po przeglądzie
   Trzy problemy do usunięcia:
     • znak i telefon dotykały krawędzi okna na szerokich ekranach,
     • wordmark ginął na ciemnym, niejednorodnym tle hero,
     • pasek nawigacji nie miał własnego „powietrza" nad treścią.
   ========================================================================== */

/* Nagłówek trzyma tę samą oś co treść: znak zaczyna się dokładnie tam,
   gdzie nagłówek hero. Rozjazd tych dwóch krawędzi był najbardziej widoczną
   usterką układu. Zwiększamy za to margines boczny całej strony, żeby pasek
   nawigacji nie kleił się do krawędzi okna. */
:root { --kr-margines: clamp(1.5rem, 6vw, 4.25rem); }

.kr-naglowek > .kr-kontener {
	max-width: var(--kr-szer-max);
}

:root { --kr-naglowek-h: 96px; }
@media (max-width: 782px) { :root { --kr-naglowek-h: 76px; } }

/* Delikatny gradient pod nagłówkiem, dopóki nie przewinięto. Znak przestaje
   konkurować ze zdjęciem tła, a pasek zyskuje granicę bez rysowania linii. */
.kr-naglowek::before {
	content: "";
	position: absolute;
	inset-inline: 0;
	top: 0;
	height: 190%;
	pointer-events: none;
	z-index: -1;
	background: linear-gradient(
		to bottom,
		rgba(10, 12, 15, .78) 0%,
		rgba(10, 12, 15, .46) 46%,
		rgba(10, 12, 15, 0) 100%
	);
	opacity: 1;
	transition: opacity var(--kr-czas) var(--kr-krzywa);
}
.kr-naglowek.jest-przewiniety::before,
body:not(.kr-hero-ciemne) .kr-naglowek::before,
body.kr-menu-otwarte .kr-naglowek::before { opacity: 0; }

/* Znak: większy i z wyraźniejszą hierarchią wersów. */
.kr-logo svg,
.kr-logo img { width: clamp(158px, 14vw, 202px); }

/* Nadpis „KANCELARIA" bywał nieczytelny w stali na ciemnym tle -
   nad hero podnosimy go do jasnej stali, poniżej wraca kolor z księgi znaku. */
.kr-naglowek:not(.jest-przewiniety) .kr-logo__tekst-nadpis { fill: #A9C3DB; }
.kr-naglowek:not(.jest-przewiniety) .kr-logo__tekst-podpis { fill: rgba(255, 255, 255, .72); }
.kr-naglowek:not(.jest-przewiniety) .kr-logo__linia        { stroke: rgba(255, 255, 255, .82); }

/* Znak lekko reaguje na kursor - sygnał, że to odnośnik do strony głównej. */
.kr-logo {
	transition: opacity var(--kr-czas) var(--kr-krzywa), transform var(--kr-czas) var(--kr-krzywa);
	transform-origin: left center;
}
.kr-logo:hover { opacity: .82; }
.kr-logo:focus-visible { outline-offset: 6px; }

/* Cienka kreska akcentu na samej górze - porządkuje krawędź okna. */
.kr-naglowek::after {
	content: "";
	position: absolute;
	inset-inline: 0;
	top: 0;
	height: 2px;
	background: linear-gradient(90deg, var(--kr-stal) 0%, var(--kr-stal-jasna) 38%, transparent 78%);
	opacity: 0;
	transition: opacity var(--kr-czas) var(--kr-krzywa);
}
.kr-naglowek.jest-przewiniety::after,
body:not(.kr-hero-ciemne) .kr-naglowek::after { opacity: 1; }

/* Nawigacja odsunięta od znaku, żeby oba bloki czytały się osobno.
   Odstępy liczone tak, by suma (znak + menu + telefon + dwa odstępy)
   mieściła się w kontenerze 1240 px - inaczej pigułka z numerem wychodzi
   poza prawą krawędź układu. */
@media (min-width: 64rem) {
	.kr-naglowek__wnetrze { gap: clamp(1rem, 2vw, 2rem); }
	.kr-nawigacja { margin-inline-start: auto; }
	.kr-menu { gap: clamp(.7rem, 1.15vw, 1.35rem); }
}
@media (min-width: 85rem) {
	.kr-naglowek__wnetrze { gap: clamp(1.5rem, 2.6vw, 2.75rem); }
	.kr-menu { gap: clamp(.9rem, 1.4vw, 1.6rem); }
}

/* Telefon: wyraźniejszy niż zwykły odnośnik, spokojniejszy niż przycisk CTA. */
.kr-telefon-naglowek {
	padding: .62em 1.15em;
	font-weight: 600;
}
.kr-telefon-naglowek svg { opacity: .9; }

/* Hero zaczyna się niżej - nagłówek jest teraz wyższy. */
.kr-hero { padding-block-start: calc(var(--kr-naglowek-h) + clamp(4.5rem, 11vw, 9rem)); }

/* ==========================================================================
   17  STOPKA - przebudowa
   Poprzednia wersja była listą czterech równorzędnych kolumn: wszystko miało
   ten sam ciężar, więc nic nie było widoczne. Teraz stopka ma trzy pasy
   o malejącej wadze - kontakt, partner, dane formalne - oddzielone tłem
   i liniami, a nie samym odstępem.
   ========================================================================== */
.kr-stopka {
	position: relative;
	overflow: hidden;
	background: var(--kr-atrament);
	color: rgba(255, 255, 255, .68);
	--kr-obwodka: var(--kr-linia-ciemna);
}
.kr-stopka > * { position: relative; }

/* --- Pas 1: kontakt ------------------------------------------------------ */
.kr-stopka__glowna {
	display: grid;
	gap: clamp(2.5rem, 5vw, 4.5rem);
	padding-block: clamp(3.5rem, 7vw, 5.5rem);
}
@media (min-width: 56rem) {
	.kr-stopka__glowna { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr) minmax(0, .8fr); }
}

.kr-stopka__logo { display: inline-block; }
.kr-stopka__logo svg { width: clamp(176px, 18vw, 214px); height: auto; }

.kr-stopka__opis {
	margin-top: 1.6rem;
	max-width: 40ch;
	font-size: var(--kr-t-0);
	line-height: 1.7;
	color: rgba(255, 255, 255, .58);
}

.kr-stopka__cta { margin-top: 1.8rem; }

.kr-stopka__tytul {
	font-family: var(--kr-font-naglowki);
	font-size: var(--kr-t--2);
	font-weight: 500;
	letter-spacing: var(--kr-ls-etykieta);
	text-transform: uppercase;
	color: rgba(255, 255, 255, .42);
	margin-bottom: 1.5rem;
}

/* Pozycje kontaktowe jako duże cele dotykowe, nie zbita lista linków. */
.kr-stopka__kontakt {
	display: grid;
	gap: .35rem;
	font-style: normal;
}
.kr-stopka__kontakt-poz {
	display: grid;
	grid-template-columns: auto 1fr;
	align-items: start;
	gap: .95rem;
	padding: .7rem .85rem .7rem .7rem;
	margin-left: -.7rem;
	border-radius: var(--kr-promien);
	font-size: var(--kr-t-0);
	line-height: 1.55;
	color: rgba(255, 255, 255, .74);
	text-decoration: none;
	transition: background var(--kr-czas) var(--kr-krzywa), color var(--kr-czas) var(--kr-krzywa);
}
a.kr-stopka__kontakt-poz:hover,
a.kr-stopka__kontakt-poz:focus-visible {
	background: rgba(255, 255, 255, .05);
	color: var(--kr-biel);
}
.kr-stopka__kontakt-poz--statyczna { cursor: default; }

.kr-stopka__kontakt-ikona {
	display: grid;
	place-items: center;
	width: 2rem;
	height: 2rem;
	flex: none;
	border: 1px solid rgba(255, 255, 255, .14);
	border-radius: var(--kr-promien);
	color: var(--kr-stal-jasna);
	transition: border-color var(--kr-czas) var(--kr-krzywa), background var(--kr-czas) var(--kr-krzywa), color var(--kr-czas) var(--kr-krzywa);
}
.kr-stopka__kontakt-ikona svg { width: 1rem; height: 1rem; }
a.kr-stopka__kontakt-poz:hover .kr-stopka__kontakt-ikona {
	background: var(--kr-stal);
	border-color: var(--kr-stal);
	color: var(--kr-biel);
}

.kr-stopka__kontakt-mocny {
	font-family: var(--kr-font-naglowki);
	font-size: var(--kr-t-1);
	font-weight: 600;
	letter-spacing: .02em;
	color: var(--kr-biel);
	word-break: break-word;
}

.kr-stopka__lista { display: grid; gap: .15rem; }
.kr-stopka__lista a {
	display: block;
	padding: .42rem 0;
	font-size: var(--kr-t-0);
	color: rgba(255, 255, 255, .74);
	text-decoration: none;
	transition: color var(--kr-czas-szybko) var(--kr-krzywa), padding-left var(--kr-czas) var(--kr-krzywa);
}
.kr-stopka__lista a:hover { color: var(--kr-biel); padding-left: .4rem; }

.kr-stopka__widgety { margin-top: 1.75rem; }

/* --- Pas 2: partner ------------------------------------------------------ */
.kr-stopka__partner {
	border-block: 1px solid var(--kr-linia-ciemna);
	background: rgba(255, 255, 255, .022);
}

.kr-partner {
	display: grid;
	gap: clamp(1.75rem, 4vw, 3.5rem);
	padding-block: clamp(2.75rem, 5vw, 4rem);
	align-items: start;
}
@media (min-width: 56rem) {
	.kr-partner { grid-template-columns: minmax(0, 260px) minmax(0, 1fr); }
}

.kr-partner__znak { display: grid; gap: 1.15rem; justify-items: start; }

.kr-partner__etykieta {
	font-family: var(--kr-font-naglowki);
	font-size: var(--kr-t--2);
	font-weight: 500;
	letter-spacing: var(--kr-ls-etykieta);
	text-transform: uppercase;
	color: var(--kr-stal-jasna);
}

.kr-partner__logo {
	display: block;
	padding: 1.15rem 1.4rem;
	border: 1px solid var(--kr-linia-ciemna);
	border-radius: var(--kr-promien);
	background: rgba(255, 255, 255, .04);
	transition: border-color var(--kr-czas) var(--kr-krzywa), background var(--kr-czas) var(--kr-krzywa), transform var(--kr-czas) var(--kr-krzywa);
}
.kr-partner__logo:hover,
.kr-partner__logo:focus-visible {
	border-color: rgba(255, 255, 255, .28);
	background: rgba(255, 255, 255, .07);
	transform: translateY(-2px);
}
.kr-partner__logo img { width: clamp(150px, 16vw, 196px); height: auto; display: block; }

.kr-partner__tytul {
	font-size: var(--kr-t-3);
	color: var(--kr-biel);
	margin-bottom: .9rem;
}
.kr-partner__opis {
	max-width: 68ch;
	font-size: var(--kr-t-0);
	line-height: 1.72;
	color: rgba(255, 255, 255, .62);
}
.kr-partner__opis + .kr-partner__opis { margin-top: .85rem; }

.kr-partner__punkty {
	display: flex;
	flex-wrap: wrap;
	gap: .5rem;
	margin-top: 1.5rem;
}
.kr-partner__punkty li {
	padding: .42em .95em;
	font-size: var(--kr-t--1);
	line-height: 1.4;
	color: rgba(255, 255, 255, .78);
	background: rgba(89, 128, 166, .16);
	border: 1px solid rgba(138, 168, 197, .22);
	border-radius: var(--kr-promien);
}

.kr-partner__stopka {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: .75rem 1.75rem;
	margin-top: 1.75rem;
	padding-top: 1.35rem;
	border-top: 1px solid var(--kr-linia-ciemna);
}
.kr-partner__stopka .kr-link-strzalka { color: var(--kr-stal-jasna); }
.kr-partner__stopka .kr-link-strzalka:hover { color: var(--kr-biel); }
.kr-partner__dane {
	font-size: var(--kr-t--1);
	line-height: 1.6;
	color: rgba(255, 255, 255, .38);
}

/* --- Pas 3: dane formalne ------------------------------------------------ */
.kr-stopka__dol {
	display: flex;
	flex-wrap: wrap;
	gap: 1.15rem 2.5rem;
	align-items: flex-start;
	justify-content: space-between;
	padding-block: 1.75rem;
	font-size: var(--kr-t--1);
	color: rgba(255, 255, 255, .44);
}
.kr-stopka__prawne-dane p { line-height: 1.65; }
.kr-stopka__separator { color: rgba(255, 255, 255, .2); margin-inline: .4rem; }
.kr-stopka__zastrzezenie {
	margin-top: .4rem;
	font-size: var(--kr-t--2);
	color: rgba(255, 255, 255, .32);
}

.kr-stopka__prawne {
	display: flex;
	flex-wrap: wrap;
	gap: .4rem 1.5rem;
}
.kr-stopka__prawne a {
	color: rgba(255, 255, 255, .58);
	text-decoration: none;
	transition: color var(--kr-czas-szybko) var(--kr-krzywa);
}
.kr-stopka__prawne a:hover { color: var(--kr-biel); text-decoration: underline; }

/* ==========================================================================
   18  PODPIS WYKONAWCY + WARSTWA KONTAKTOWA
   ========================================================================== */
.kr-podpis {
	display: flex;
	justify-content: center;
	padding: 1.25rem 0 2.25rem;
	border-top: 1px solid rgba(255, 255, 255, .045);
}

.kr-podpis__pigulka {
	display: inline-flex;
	align-items: center;
	gap: .5rem;
	padding: .55rem 1.05rem;
	font-family: var(--kr-font-tekst);
	font-size: var(--kr-t--1);
	letter-spacing: .02em;
	color: rgba(255, 255, 255, .55);
	background: rgba(255, 255, 255, .02);
	border: 1px solid rgba(255, 255, 255, .09);
	border-radius: 999px;
	cursor: pointer;
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	transition:
		color        var(--kr-czas) var(--kr-krzywa),
		border-color var(--kr-czas) var(--kr-krzywa),
		background   var(--kr-czas) var(--kr-krzywa),
		transform    var(--kr-czas) var(--kr-krzywa),
		box-shadow   var(--kr-czas) var(--kr-krzywa);
}
.kr-podpis__pigulka:hover,
.kr-podpis__pigulka:focus-visible {
	color: var(--kr-biel);
	border-color: rgba(255, 255, 255, .28);
	background: rgba(255, 255, 255, .06);
	transform: translateY(-2px);
	box-shadow: 0 8px 24px rgba(0, 0, 0, .28);
}
.kr-podpis__nazwa { font-weight: 600; color: rgba(255, 255, 255, .74); transition: color var(--kr-czas) var(--kr-krzywa); }
.kr-podpis__pigulka:hover .kr-podpis__nazwa { color: var(--kr-biel); }
.kr-podpis__ikona { color: rgba(255, 255, 255, .4); transition: color var(--kr-czas) var(--kr-krzywa), transform var(--kr-czas) var(--kr-krzywa); }
.kr-podpis__pigulka:hover .kr-podpis__ikona { color: var(--kr-biel); transform: translateX(2px); }

/* --- Warstwa ------------------------------------------------------------
   Panel jest jasny mimo ciemnej stopki: biała karta na przyciemnionym tle
   czyta się jako warstwa nad stroną, a nie jako kolejna sekcja stopki. */
.kr-autor-modal {
	position: fixed;
	inset: 0;
	z-index: 1000;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: clamp(1rem, 4vw, 2rem);
}
.kr-autor-modal[hidden] { display: none; }

.kr-autor-modal__tlo {
	position: absolute;
	inset: 0;
	background: rgba(14, 16, 19, .74);
	backdrop-filter: blur(4px);
	-webkit-backdrop-filter: blur(4px);
	animation: kr-modal-pojaw 200ms ease both;
}

.kr-autor-modal__panel {
	position: relative;
	width: 100%;
	max-width: 400px;
	padding: clamp(1.75rem, 4vw, 2.25rem);
	background: var(--kr-biel);
	border-radius: 6px;
	box-shadow: 0 30px 70px rgba(0, 0, 0, .35);
	animation: kr-modal-wznies 240ms var(--kr-krzywa-out) both;
}

@keyframes kr-modal-pojaw { from { opacity: 0; } to { opacity: 1; } }
@keyframes kr-modal-wznies {
	from { opacity: 0; transform: translateY(12px) scale(.98); }
	to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
	.kr-autor-modal__tlo,
	.kr-autor-modal__panel { animation: none; }
}

.kr-autor-modal__zamknij {
	position: absolute;
	top: 1rem;
	right: 1rem;
	display: grid;
	place-items: center;
	width: 34px;
	height: 34px;
	color: var(--kr-szary);
	background: transparent;
	border: 0;
	border-radius: 999px;
	cursor: pointer;
	transition: color var(--kr-czas) var(--kr-krzywa), background var(--kr-czas) var(--kr-krzywa);
}
.kr-autor-modal__zamknij:hover,
.kr-autor-modal__zamknij:focus-visible { color: var(--kr-czern); background: var(--kr-papier); }

.kr-autor-modal__nadtytul {
	display: block;
	margin-bottom: .35rem;
	font-family: var(--kr-font-naglowki);
	font-size: var(--kr-t--2);
	font-weight: 600;
	letter-spacing: var(--kr-ls-etykieta);
	text-transform: uppercase;
	color: var(--kr-akcent-tekst);
}
.kr-autor-modal__tytul { margin: 0 0 .35rem; font-size: var(--kr-t-3); color: var(--kr-czern); }
.kr-autor-modal__lead {
	margin: 0 0 1.5rem;
	font-size: var(--kr-t--1);
	line-height: 1.6;
	color: var(--kr-tekst-cichy);
}

.kr-autor-modal__opcje { display: grid; gap: .5rem; list-style: none; margin: 0; padding: 0; }

.kr-autor-modal__opcja {
	display: flex;
	align-items: center;
	gap: 1rem;
	padding: .75rem .9rem;
	border: 1px solid var(--kr-linia);
	border-radius: 4px;
	text-decoration: none;
	transition: border-color var(--kr-czas) var(--kr-krzywa), background var(--kr-czas) var(--kr-krzywa), transform var(--kr-czas) var(--kr-krzywa);
}
.kr-autor-modal__opcja:hover,
.kr-autor-modal__opcja:focus-visible {
	border-color: var(--kr-stal-jasna);
	background: var(--kr-stal-woal);
	transform: translateX(2px);
}

.kr-autor-modal__ikona {
	display: grid;
	place-items: center;
	flex: none;
	width: 38px;
	height: 38px;
	color: var(--kr-stal);
	background: var(--kr-stal-mgla);
	border-radius: 4px;
}
/* Glif WhatsAppa jest znakiem towarowym Meta. Wytyczne marki dopuszczaja
   wersje w kolorze firmowym albo monochromatyczna - wariant przyciemniony
   nie miescil sie w zadnej z nich. Bierzemy monochrom w kolorze tekstu:
   zgodny z wytycznymi i z kontrastem lepszym niz oryginalna zielen. */
.kr-autor-modal__opcja--whatsapp .kr-autor-modal__ikona {
	color: var(--kr-czern);
	background: var(--kr-papier);
}

.kr-autor-modal__tekst { display: grid; gap: 1px; flex: 1; min-width: 0; }
.kr-autor-modal__label {
	font-size: var(--kr-t--2);
	letter-spacing: .04em;
	color: var(--kr-tekst-cichy);
}
.kr-autor-modal__wartosc {
	font-family: var(--kr-font-naglowki);
	font-size: var(--kr-t-1);
	font-weight: 600;
	color: var(--kr-czern);
	word-break: break-word;
}
.kr-autor-modal__strzalka { flex: none; color: var(--kr-szary-jasny); transition: color var(--kr-czas) var(--kr-krzywa), transform var(--kr-czas) var(--kr-krzywa); }
.kr-autor-modal__opcja:hover .kr-autor-modal__strzalka { color: var(--kr-akcent-tekst); transform: translateX(2px); }

@media print {
	.kr-podpis,
	.kr-autor-modal,
	.kr-stopka__partner { display: none !important; }
}

/* ==========================================================================
   19  SEKCJA PARTNERSKA NA JASNYM TLE
   Blok o współpracy z GCC stoi teraz na stronie głównej, zaraz po opisie
   specjalizacji. W stopce zostaje tylko wąski pas potwierdzający.
   ========================================================================== */
.kr-partner--sekcja {
	padding-block: 0;
	align-items: start;
}
@media (min-width: 56rem) {
	.kr-partner--sekcja { grid-template-columns: minmax(0, 300px) minmax(0, 1fr); }
}

.kr-partner--sekcja .kr-partner__etykieta { color: var(--kr-akcent-tekst); }

.kr-partner--sekcja .kr-partner__logo {
	border-color: var(--kr-linia);
	background: var(--kr-biel);
	box-shadow: var(--kr-cien-1);
	padding: 1.4rem 1.6rem;
}
.kr-partner--sekcja .kr-partner__logo:hover,
.kr-partner--sekcja .kr-partner__logo:focus-visible {
	border-color: var(--kr-stal-jasna);
	background: var(--kr-biel);
	box-shadow: var(--kr-cien-2);
}
.kr-partner--sekcja .kr-partner__logo img { width: clamp(168px, 18vw, 214px); }

.kr-partner--sekcja .kr-partner__tytul { color: var(--kr-czern); }
.kr-partner--sekcja .kr-partner__opis  { color: var(--kr-grafit); }
.kr-partner--sekcja .kr-partner__dane  { color: var(--kr-tekst-cichy); font-size: var(--kr-t--1); line-height: 1.65; }

.kr-partner--sekcja .kr-partner__punkty li {
	color: var(--kr-akcent-tekst);
	background: var(--kr-stal-woal);
	border-color: transparent;
	font-family: var(--kr-font-naglowki);
	font-weight: 500;
	letter-spacing: .06em;
	text-transform: uppercase;
}

.kr-partner--sekcja .kr-partner__stopka { border-top-color: var(--kr-linia); }
.kr-partner--sekcja .kr-link-strzalka { color: var(--kr-akcent-tekst); }

/* --- Wąski pas w stopce -------------------------------------------------- */
.kr-partner-pas {
	display: grid;
	gap: 1rem 1.75rem;
	align-items: center;
	padding-block: clamp(1.5rem, 3vw, 2.25rem);
}
@media (min-width: 52rem) {
	.kr-partner-pas {
		grid-template-columns: auto auto minmax(0, 1fr) auto;
	}
}

.kr-partner-pas__etykieta {
	font-family: var(--kr-font-naglowki);
	font-size: var(--kr-t--2);
	font-weight: 500;
	letter-spacing: var(--kr-ls-etykieta);
	text-transform: uppercase;
	color: rgba(255, 255, 255, .4);
	white-space: nowrap;
}

.kr-partner-pas__logo {
	display: block;
	padding: .7rem .95rem;
	border: 1px solid var(--kr-linia-ciemna);
	border-radius: var(--kr-promien);
	background: rgba(255, 255, 255, .04);
	transition: border-color var(--kr-czas) var(--kr-krzywa), background var(--kr-czas) var(--kr-krzywa);
	justify-self: start;
}
.kr-partner-pas__logo:hover,
.kr-partner-pas__logo:focus-visible {
	border-color: rgba(255, 255, 255, .26);
	background: rgba(255, 255, 255, .07);
}
.kr-partner-pas__logo img { width: clamp(126px, 12vw, 168px); height: auto; display: block; }

.kr-partner-pas__opis {
	font-size: var(--kr-t--1);
	line-height: 1.6;
	color: rgba(255, 255, 255, .5);
	max-width: 52ch;
}

.kr-partner-pas__link { color: var(--kr-stal-jasna); white-space: nowrap; }
.kr-partner-pas__link:hover { color: var(--kr-biel); }

/* ==========================================================================
   20  ZNAK W NAGŁÓWKU - właściwa skala
   Poprzednie 200 px gubiło się obok siedmiopozycyjnego menu. Znak dostaje
   250 px w spoczynku i kurczy się do 186 px po przewinięciu: pełna obecność
   przy wejściu na stronę, oszczędność miejsca w trakcie czytania.
   Pasek rośnie do 124 px, żeby znak miał czym oddychać.
   ========================================================================== */
:root { --kr-naglowek-h: 124px; }
@media (max-width: 782px) { :root { --kr-naglowek-h: 82px; } }

.kr-naglowek.jest-przewiniety .kr-naglowek__wnetrze { min-height: 92px; }
@media (max-width: 782px) {
	.kr-naglowek.jest-przewiniety .kr-naglowek__wnetrze { min-height: 68px; }
}

/* Skala znaku. Wariant nagłówkowy ma proporcje 320:122, więc 250 px
   szerokości to 95 px wysokości - mieści się w pasku 124 px z zapasem. */
.kr-logo svg,
.kr-logo img {
	width: clamp(186px, 17.5vw, 250px);
	transition: width var(--kr-czas) var(--kr-krzywa);
}
.kr-naglowek.jest-przewiniety .kr-logo svg,
.kr-naglowek.jest-przewiniety .kr-logo img { width: clamp(160px, 13vw, 186px); }

@media (max-width: 782px) {
	.kr-logo svg,
	.kr-logo img { width: clamp(158px, 44vw, 196px); }
	.kr-naglowek.jest-przewiniety .kr-logo svg,
	.kr-naglowek.jest-przewiniety .kr-logo img { width: clamp(142px, 38vw, 168px); }
}

/* Kreska pod wordmarkiem przy tej skali może być odrobinę mocniejsza -
   przy 250 px hairline 1 px robi się niewidoczny na ekranach 1×. */
.kr-logo__linia { stroke-width: 1.4; }

/* Menu ustępuje miejsca znakowi: mniejszy stopień i ciaśniejsze odstępy.
   Suma (znak 250 + menu + telefon 150 + odstępy) musi zmieścić się w 1240 px. */
@media (min-width: 64rem) {
	.kr-menu a { font-size: .9375rem; letter-spacing: .04em; }
	.kr-menu { gap: clamp(.6rem, 1vw, 1.1rem); }
	.kr-naglowek__wnetrze { gap: clamp(1rem, 1.8vw, 1.75rem); }
}
@media (min-width: 90rem) {
	.kr-menu a { font-size: 1rem; letter-spacing: .05em; }
	.kr-menu { gap: clamp(.85rem, 1.3vw, 1.5rem); }
}

/* Hero startuje poniżej wyższego paska. */
.kr-hero { padding-block-start: calc(var(--kr-naglowek-h) + clamp(4rem, 10vw, 8rem)); }
.kr-naglowek-strony { padding-block-start: calc(var(--kr-naglowek-h) + clamp(2.5rem, 5vw, 4.5rem)); }

/* Logotyp partnera w pasie stopki - również o stopień większy. */
.kr-partner-pas__logo img { width: clamp(148px, 14vw, 196px); }

/* ==========================================================================
   21  PASEK FAKTÓW W HERO - równy podział
   Cztery pozycje w siatce auto-fit układały się jako 3 + 1: ostatnia zostawała
   sama w drugim wierszu. Wymuszamy 4 kolumny na desktopie i 2 na tablecie,
   żeby podział był zawsze zamierzony, a nie wynikiem zawijania.
   Pionowe linie między pozycjami porządkują rytm - ten sam zabieg co
   w tabelach zestawień w pismach kancelarii.
   ========================================================================== */
.kr-hero__stopka {
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0;
	border-top: 1px solid rgba(255, 255, 255, .16);
}
@media (min-width: 60rem) {
	.kr-hero__stopka { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.kr-hero__fakt {
	padding: 1.35rem clamp(1rem, 2vw, 1.75rem) .4rem 0;
	border-inline-start: 1px solid rgba(255, 255, 255, .1);
	padding-inline-start: clamp(1rem, 2vw, 1.75rem);
}
.kr-hero__fakt:first-child { border-inline-start: 0; padding-inline-start: 0; }
@media (min-width: 60rem) {
	.kr-hero__fakt:first-child { padding-inline-start: 0; }
}
@media (max-width: 59.99rem) {
	/* Przy dwóch kolumnach linię zaczyna każda druga pozycja. */
	.kr-hero__fakt:nth-child(odd) { border-inline-start: 0; padding-inline-start: 0; }
	.kr-hero__fakt:nth-child(n+3) { border-top: 1px solid rgba(255, 255, 255, .08); }
}

/* ==========================================================================
   22  PAS OBSZARÓW TRANSAKCJI - siatka zamiast zawijanej listy
   ========================================================================== */
.kr-pas-sektorow {
	background: var(--kr-tlo-alt);
	border-block: 1px solid var(--kr-linia);
}

.kr-pas-sektorow__wnetrze {
	display: grid;
	gap: 1.5rem;
	padding-block: clamp(1.75rem, 3.5vw, 2.5rem);
	align-items: center;
}
@media (min-width: 64rem) {
	.kr-pas-sektorow__wnetrze { grid-template-columns: auto minmax(0, 1fr); gap: clamp(2rem, 4vw, 3.5rem); }
}

.kr-pas-sektorow__etykieta {
	display: flex;
	align-items: center;
	gap: .75rem;
	margin: 0;
	font-family: var(--kr-font-naglowki);
	font-size: var(--kr-t--2);
	font-weight: 500;
	letter-spacing: var(--kr-ls-etykieta);
	text-transform: uppercase;
	color: var(--kr-akcent-tekst);
	white-space: nowrap;
}
.kr-pas-sektorow__etykieta::before {
	content: "";
	inline-size: clamp(1.25rem, 3vw, 2.25rem);
	block-size: 1px;
	background: currentColor;
	opacity: .5;
	flex: none;
}

.kr-pas-sektorow__lista {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0;
}
@media (min-width: 40rem) { .kr-pas-sektorow__lista { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 64rem) { .kr-pas-sektorow__lista { grid-template-columns: repeat(5, minmax(0, 1fr)); } }

.kr-pas-sektorow__lista li {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: .55rem clamp(.5rem, 1.2vw, 1rem);
	text-align: center;
	border-inline-start: 1px solid var(--kr-linia);
}
.kr-pas-sektorow__lista li:first-child { border-inline-start: 0; }
@media (max-width: 39.99rem) {
	.kr-pas-sektorow__lista li:nth-child(odd) { border-inline-start: 0; }
	.kr-pas-sektorow__lista li:nth-child(n+3) { border-top: 1px solid var(--kr-linia); }
}
@media (min-width: 40rem) and (max-width: 63.99rem) {
	.kr-pas-sektorow__lista li:nth-child(3n+1) { border-inline-start: 0; }
	.kr-pas-sektorow__lista li:nth-child(n+4) { border-top: 1px solid var(--kr-linia); }
}

.kr-pas-sektorow__lista span {
	font-family: var(--kr-font-naglowki);
	font-size: clamp(.9375rem, 1.15vw, 1.0625rem);
	font-weight: 600;
	letter-spacing: .075em;
	text-transform: uppercase;
	line-height: 1.28;
	color: var(--kr-grafit);
	transition: color var(--kr-czas) var(--kr-krzywa);
}
.kr-pas-sektorow__lista li:hover span { color: var(--kr-akcent-tekst); }

/* ==========================================================================
   23  SIATKA ZAKRESU PRAKTYKI - 2 × 2 zamiast 3 + 1
   Cztery karty w siatce auto-fit dawały trzy kolumny i osieroconą kartę
   w drugim wierszu. Kart nie dokładamy - motyw opisuje wyłącznie obszary
   potwierdzone materiałami kancelarii - więc porządkujemy podział na 2 × 2.
   Przy dwóch kolumnach karty są też szersze, a listy wypunktowane wewnątrz
   przestają się łamać po dwa słowa.
   ========================================================================== */
.kr-siatka--pary { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 52rem) {
	.kr-siatka--pary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ==========================================================================
   24  KARTA Z NUMEREM (przebieg wspolpracy na stronie lokalnej)
   Ikona po lewej, numer kroku po prawej - numer porzadkuje kolejnosc czytania
   w ukladzie 2 x 2, w ktorym sam porzadek wizualny bywa niejednoznaczny.
   ========================================================================== */
.kr-karta__glowa {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
}
.kr-karta__glowa .kr-karta__numer {
	font-size: var(--kr-t-3);
	color: var(--kr-stal-mgla);
	line-height: 1;
}
.kr-sekcja--papier .kr-karta__glowa .kr-karta__numer { color: #D3DEE9; }
.kr-karta:hover .kr-karta__glowa .kr-karta__numer { color: var(--kr-stal-jasna); }

/* ==========================================================================
   25  PORTRET I JEGO ZAMIENNIK
   Przerywana ramka z napisem „brak zdjecia" czytala sie jak niedokonczona
   strona. Zamiast niej panel ze znakiem kancelarii: wyglada na decyzje
   projektowa, bo nia jest. Wskazowke techniczna widzi wylacznie zalogowany
   administrator (patrz kr_portret() w inc/template-tags.php).
   ========================================================================== */
.kr-portret--znak,
.kr-portret--wskazowka {
	display: grid;
	align-content: center;
	justify-items: center;
	gap: 1.15rem;
	padding: clamp(1.5rem, 4vw, 2.5rem);
	text-align: center;
	background:
		linear-gradient(180deg, #FFFFFF 0%, var(--kr-papier) 100%);
	border: 1px solid var(--kr-linia);
}

/* Delikatna siatka dokumentowa w tle - ten sam motyw co w sekcjach ciemnych */
.kr-portret--znak::before {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	background-image:
		linear-gradient(to right,  rgba(29, 31, 32, .028) 1px, transparent 1px),
		linear-gradient(to bottom, rgba(29, 31, 32, .028) 1px, transparent 1px);
	background-size: 44px 44px;
	mask-image: radial-gradient(ellipse 78% 62% at 50% 46%, #000 30%, transparent 76%);
	-webkit-mask-image: radial-gradient(ellipse 78% 62% at 50% 46%, #000 30%, transparent 76%);
}
.kr-portret--znak > * { position: relative; }

.kr-portret__znak {
	inline-size: clamp(84px, 22%, 122px);
	color: var(--kr-czern);
}
.kr-sygnet { width: 100%; height: auto; display: block; }
.kr-sygnet text { fill: currentColor; }
.kr-sygnet line { stroke: var(--kr-stal); }

.kr-portret__osoba {
	font-family: var(--kr-font-naglowki);
	font-size: var(--kr-t-2);
	font-weight: 600;
	letter-spacing: .02em;
	color: var(--kr-czern);
	line-height: 1.2;
}

.kr-portret__wpis {
	font-family: var(--kr-font-naglowki);
	font-size: var(--kr-t--2);
	font-weight: 500;
	letter-spacing: var(--kr-ls-etykieta);
	text-transform: uppercase;
	color: var(--kr-tekst-cichy);
	line-height: 1.5;
	max-width: 24ch;
}

/* Wariant dla administratora - odrozniony, zeby nie pomylic go z widokiem
   publicznym. Kolor ostrzegawczy zamiast papierowego. */
.kr-portret--wskazowka {
	background: #FFF9EC;
	border: 1px dashed #C99A3A;
}
.kr-portret--wskazowka .kr-portret__znak { color: #8A6A20; inline-size: 78px; }
.kr-portret--wskazowka .kr-sygnet line { stroke: #C99A3A; }
.kr-portret__info {
	font-size: var(--kr-t--1);
	line-height: 1.6;
	color: #7A5E1C;
	max-width: 34ch;
}

/* ==========================================================================
   26  WYDAJNOSC - korekty po audycie na zywym serwerze
   ========================================================================== */

/* Rozmycie tla naglowka jest kosztowne na telefonach: kompozytor przemalowuje
   rozmyty pas przy kazdej klatce przewijania. Na malych ekranach dajemy pelne
   tlo zamiast szkla - wizualnie niemal to samo, koszt zerowy. */
@media (max-width: 47.9rem) {
	.kr-naglowek.jest-przewiniety,
	body:not(.kr-hero-ciemne) .kr-naglowek {
		background: rgba(255, 255, 255, .97);
		backdrop-filter: none;
		-webkit-backdrop-filter: none;
	}
}

/* Nieskonczona animacja tla hero trzyma warstwe wielkosci ekranu przez caly
   czas zycia strony. Na telefonach efekt jest ledwie widoczny, a koszt GPU
   i baterii realny - wylaczamy go ponizej progu desktopu. */
@media (max-width: 63.9rem) {
	.kr-hero__tlo { animation: none; transform: scale(1.04); }
}

/* Siatka dokumentowa w tle sekcji ciemnych korzysta z maski, ktora tworzy
   dodatkowa warstwe. Na telefonach jest praktycznie niewidoczna. */
@media (max-width: 47.9rem) {
	.kr-siatka-tla { display: none; }
}