/* jacekslesicki.pl WP - zrodlo: D:/Projekty/jacekslesicki.pl/wp/build-assets.cjs (statyczny style.css + bridge.css) */
/* Fonty statyczne (osobny plik na grubość) - 17.10.2026. Zmienne fonty z domyślną grubością 100
   renderowały się na iPhone'ach (WebKit) cienko niezależnie od font-weight. */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/montserrat-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;
}
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(fonts/montserrat-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;
}
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(fonts/montserrat-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;
}
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(fonts/montserrat-700-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;
}
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url(fonts/montserrat-800-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;
}
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/montserrat-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;
}
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(fonts/montserrat-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;
}
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(fonts/montserrat-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;
}
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(fonts/montserrat-700-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;
}
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url(fonts/montserrat-800-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;
}
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url(fonts/nunito-300-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;
}
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/nunito-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;
}
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(fonts/nunito-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;
}
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(fonts/nunito-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;
}
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(fonts/nunito-700-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;
}
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url(fonts/nunito-800-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;
}
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url(fonts/nunito-300-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;
}
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/nunito-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;
}
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(fonts/nunito-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;
}
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(fonts/nunito-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;
}
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(fonts/nunito-700-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;
}
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url(fonts/nunito-800-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;
}

/* Montserrat - font marki Agencji ITP (nagłówki, menu, ramka, stopka) */
@font-face {
  font-family: 'Montserrat';
  font-style: italic;
  font-weight: 400 800;
  font-display: swap;
  src: url(fonts/montserrat-italic-400-800-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;
}
@font-face {
  font-family: 'Montserrat';
  font-style: italic;
  font-weight: 400 800;
  font-display: swap;
  src: url(fonts/montserrat-italic-400-800-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;
}

/* Nunito - treść (jak na borysionek.pl) */
@font-face {
  font-family: 'Nunito';
  font-style: italic;
  font-weight: 300 800;
  font-display: swap;
  src: url(fonts/nunito-italic-300-800-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;
}
@font-face {
  font-family: 'Nunito';
  font-style: italic;
  font-weight: 300 800;
  font-display: swap;
  src: url(fonts/nunito-italic-300-800-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;
}

/* v5 PRZED style.css: Blocksy nadaje akapitom, listom i naglowkom wlasne marginesy - wracamy do domyslnych
   przegladarki (jak w statycznej stronie); reguly style.css ladowane po tym bloku ustawiaja reszte */
.jsl :where(.entry-content) :is(p, ul, ol, h1, h2, h3, h4, h5, h6, figure, blockquote) {
	margin-block: revert;
	padding-inline-start: revert;
}
.jsl .wp-block-image {
	margin: 0;
}


/* Blok tabeli WP: bez ramek wokol komorek i grubej linii pod naglowkiem (linie wierszy ustawia style.css) */
.jsl .wp-block-table :is(th, td) {
	border: 0 solid currentColor;
}
.jsl .wp-block-table :is(thead, tfoot) {
	border: 0;
}
.jsl .wp-block-table {
	margin: 0;
}

:root {
	--accent: #00C9A7;
	--bg: #1a1e36;
	--bg-alt: #1f2441;
	--surface: #262c4f;
	--line: #333b66;
	--white: #fff;
	--text: #d6daea;
	--muted: #a0a8c8;
	/* jaśniejszy szary do dłuższych akapitów (intro, opisy usług, kart) - --muted tylko na drobne dopiski */
	--text-soft: #bcc2dc;
	--head: "Montserrat", Arial, sans-serif;
	--body: "Nunito", Arial, sans-serif;
	--header-h: 62px;
	--frame: 62px;
	--screen: calc(100vh - var(--header-h) - var(--frame));
}

@supports (height: 100svh) {
	:root {
		--screen: calc(100svh - var(--header-h) - var(--frame));
	}
}

.jsl #main,
.jsl .site-footer {
	margin: 0 var(--frame);
}

body.jsl {
	padding-bottom: var(--frame);
}

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

html {
	scroll-behavior: smooth;
	scroll-padding-top: var(--header-h);
	/* iPhone: bez samoczynnego powiększania tekstu w poziomie; delikatny kolor przy dotknięciu (jak w cv-portfolio) */
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
	-webkit-tap-highlight-color: rgba(0, 201, 167, 0.15);
}

/* Przewijanie całymi sekcjami (komputer); wysokie sekcje da się przewijać w środku */
@media (min-width: 901px) and (prefers-reduced-motion: no-preference) {
	html {
		scroll-snap-type: y mandatory;
	}

	.jsl .entry-content > section,
	.jsl .site-footer {
		scroll-snap-align: start;
	}
}

body.jsl {
	margin: 0;
	font-family: var(--body);
	font-size: 16px;
	line-height: 1.65;
	color: var(--text);
	background: var(--bg);
}

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

.jsl a,
.jsl button {
	touch-action: manipulation;
}

.jsl h1,
.jsl h2,
.jsl h3 {
	font-family: var(--head);
	color: var(--white);
	text-wrap: balance;
}

.jsl h1 span,
.jsl h2 span {
	color: var(--accent);
}

/* Menu, ramka, stopka i drobne wstawki - font nagłówków */
.jsl .site-header,
.jsl .frame,
.jsl .site-footer,
.jsl .hero__note,
.jsl .work__cat,
.jsl .post__meta,
.jsl .tags,
.jsl .field__label,
.jsl .contact__list,
.jsl .slider-nav__count,
.jsl .quote__company,
.jsl .manifest figcaption,
.jsl .job__company {
	font-family: var(--head);
}

/* Nagłówek z menu */

.jsl .site-header {
	position: sticky;
	top: 0;
	z-index: 30;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 30px;
	height: var(--header-h);
	padding: 0 calc(var(--frame) + 30px) 0 0;
	background: var(--bg);
	border-bottom: 1px solid var(--line);
}

/* Prawy górny róg pusty - pionowa linia prawej ramki biegnie do samej góry (lustro rogu z logo) */
.jsl .site-header::after {
	content: "";
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	width: var(--frame);
	border-left: 1px solid var(--line);
	pointer-events: none;
}

.jsl .logo-mark {
	display: flex;
	flex: 0 0 var(--frame);
	align-items: center;
	justify-content: center;
	align-self: stretch;
	font-family: var(--head);
	font-size: 18px;
	font-weight: 800;
	letter-spacing: -0.02em;
	color: var(--white);
	border-right: 1px solid var(--line);
	transition: color 0.2s ease;
}

@media (hover: hover) {
	.jsl .logo-mark:hover {
		color: var(--accent);
	}
}

.jsl .logo-mark span,
.jsl .footer__logo span {
	color: var(--accent);
}

.jsl .header-info {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px 28px;
	margin: 0 auto 0 0;
	padding: 0 0 0 calc(4vw + 90px - var(--frame) - 30px);
	list-style: none;
	font-size: 12px;
	color: var(--text);
}

.jsl .header-info li::before {
	content: "\2726";
	margin-right: 8px;
	font-size: 10px;
	color: var(--accent);
}

.jsl .header-info__name {
	font-family: var(--head);
	font-weight: 600;
	color: var(--white);
}

@media (hover: hover) {
	.jsl .header-info a:hover {
		color: var(--accent);
	}
}

.jsl .nav ul {
	display: flex;
	align-items: center;
	gap: 32px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.jsl .nav a {
	display: inline-block;
	padding: 10px 0;
	font-family: var(--head);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 1.8px;
	text-transform: uppercase;
	white-space: nowrap;
	border-bottom: 2px solid transparent;
	transition: border-color 0.2s ease, color 0.2s ease;
}

.jsl .nav a.is-active {
	color: var(--white);
	border-bottom-color: var(--accent);
}

@media (hover: hover) {
	.jsl .nav a:hover {
		color: var(--white);
		border-bottom-color: var(--accent);
	}
}

.jsl .nav a.is-active {
	color: var(--accent);
}

.jsl .nav .nav__cta.is-active {
	color: var(--bg);
	background: var(--white);
}

/* Menu poziome: podkreślenie aktywnej pozycji leży na linii oddzielającej nagłówek od strony
   (pozycje menu mają wysokość nagłówka, pasek 2 px przykrywa linię 1 px) - jak w cv-portfolio 2026-10-16 */
@media (min-width: 1181px) {
	.jsl .nav {
		align-self: stretch;
	}

	.jsl .nav ul {
		height: 100%;
		align-items: stretch;
	}

	.jsl .nav li {
		position: relative;
		display: flex;
		align-items: center;
	}

	.jsl .nav a,
	.jsl .nav a.is-active {
		border-bottom-color: transparent;
	}

	@media (hover: hover) {
		.jsl .nav a:hover {
			border-bottom-color: transparent;
		}
	}

	.jsl .nav a:not(.nav__cta)::after {
		content: "";
		position: absolute;
		right: 0;
		bottom: -1px;
		left: 0;
		height: 2px;
		background: var(--accent);
		transform: scaleX(0);
		transition: transform 0.25s ease;
	}

	.jsl .nav a.is-active::after {
		transform: scaleX(1);
	}

	@media (hover: hover) {
		.jsl .nav a:hover::after {
			transform: scaleX(1);
		}
	}
}

.jsl .nav .nav__cta {
	padding: 10px 22px;
	color: var(--bg);
	background: var(--accent);
	border-bottom: 0;
	transition: background 0.2s ease;
}

@media (hover: hover) {
	.jsl .nav .nav__cta:hover {
		color: var(--bg);
		background: var(--white);
	}
}

.jsl .nav-toggle {
	display: none;
	align-items: center;
	gap: 10px;
	padding: 12px 0;
	font-family: var(--head);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 1.8px;
	text-transform: uppercase;
	color: var(--white);
	background: none;
	border: 0;
	cursor: pointer;
}

.jsl .nav-toggle__icon {
	position: relative;
	width: 22px;
	height: 8px;
	border-top: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
}

/* Hero */

.jsl .hero {
	position: relative;
	display: grid;
	grid-template-columns: 1fr 1fr;
	min-height: var(--screen);
}

.jsl .hero__text {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 50px;
	padding: 60px 40px 60px calc(4vw + 90px);
}

.jsl .hero__text::after {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	right: 0;
	border-left: 1px solid var(--line);
}

.jsl .hero__title {
	position: relative;
	z-index: 1;
	margin: 0;
	font-size: clamp(44px, 5vw, 96px);
	font-weight: 700;
	line-height: 1.05;
	letter-spacing: -0.02em;
}

.jsl .hero__side {
	position: absolute;
	top: 46%;
	left: 30px;
	bottom: 50px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	writing-mode: vertical-rl;
	transform: rotate(180deg);
}

.jsl .hero__hello {
	order: 2;
	font-family: var(--head);
	font-size: 15px;
	font-style: italic;
	font-weight: 500;
	color: var(--white);
}

@media (hover: hover) {
	.jsl .hero__hello:hover {
		color: var(--accent);
	}
}

.jsl .hero__note {
	order: 1;
	font-size: 10px;
	font-weight: 500;
	letter-spacing: 2px;
	text-transform: uppercase;
	color: var(--muted);
}

.jsl .hero__bottom {
	position: relative;
	z-index: 1;
	max-width: 430px;
}

.jsl .hero__lead {
	margin: 0 0 30px;
	font-size: 17px;
	line-height: 1.6;
	color: #bcc2dc;
}

.jsl .hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
}

/* Desktop: przyciski obok siebie - razem są szersze niż .hero__bottom (430 px), więc wychodzą poza blok */
@media (min-width: 901px) {
	.jsl .hero__actions {
		flex-wrap: nowrap;
		width: max-content;
	}
}

.jsl .hero__image {
	position: relative;
	overflow: hidden;
}

.jsl .hero__image img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center top;
}

/* Przyciski i link z linią (Ramsay) */

.jsl :is(.button, .wp-block-button:not(.is-style-jsl-line) > .wp-block-button__link) {
	display: inline-block;
	padding: 12px 26px;
	font-family: var(--head);
	font-size: 11px;
	font-weight: 600;
	line-height: 22px;
	letter-spacing: 1.8px;
	text-transform: uppercase;
	color: var(--bg);
	background: var(--accent);
	border: 0;
	cursor: pointer;
	transition: background 0.25s ease, color 0.25s ease, box-shadow 0.25s ease;
}

.jsl :is(.button, .wp-block-button:not(.is-style-jsl-line) > .wp-block-button__link)::after {
	content: "\2192";
	margin-left: 12px;
	font-size: 14px;
	letter-spacing: 0;
}

@media (hover: hover) {
	.jsl :is(.button, .wp-block-button:not(.is-style-jsl-line) > .wp-block-button__link):hover {
		background: var(--white);
	}
}

.jsl :is(.button--ghost, .wp-block-button.is-style-jsl-ghost > .wp-block-button__link) {
	color: var(--white);
	background: transparent;
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.6);
}

@media (hover: hover) {
	.jsl :is(.button--ghost, .wp-block-button.is-style-jsl-ghost > .wp-block-button__link):hover {
		color: var(--bg);
		box-shadow: none;
	}
}

.jsl :is(.line-link, .wp-block-button.is-style-jsl-line > .wp-block-button__link) {
	position: relative;
	display: inline-block;
	padding: 6px 0;
	font-family: var(--head);
	font-size: 15px;
	font-weight: 500;
	color: var(--white);
	transition: color 0.2s ease;
}

.jsl :is(.line-link, .wp-block-button.is-style-jsl-line > .wp-block-button__link)::before {
	content: "";
	position: absolute;
	top: 50%;
	right: calc(100% + 18px);
	width: 100vw;
	border-top: 1px solid var(--accent);
	transition: border-color 0.2s ease;
}

@media (hover: hover) {
	.jsl :is(.line-link, .wp-block-button.is-style-jsl-line > .wp-block-button__link):hover {
		color: var(--accent);
	}
}

/* Kreska miętowa (polecenie Kasi 2026-10-16), po najechaniu biała - odwrotnie niż tekst */
@media (hover: hover) {
	.jsl :is(.line-link, .wp-block-button.is-style-jsl-line > .wp-block-button__link):hover::before {
		border-top-color: var(--white);
	}
}

/* Realizacje www: w tle karty zrzut strony (--shot z HTML) pod warstwą w kolorze karty (--surface #262c4f).
   Po najechaniu warstwa jaśnieje, zrzut lekko się przybliża. */
.jsl #realizacje .work {
	overflow: hidden;
	isolation: isolate;
}

.jsl #realizacje .work::before,
.jsl #realizacje .work::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	transition: opacity 0.4s ease, transform 0.6s ease;
}

/* Zrzut przygaszony (szarości, ciemniej) - jasne nagłówki stron nie robią białego pasa; po najechaniu wraca kolor */
.jsl #realizacje .work::before {
	background: var(--shot) center 75% / cover no-repeat; /* kadr bez górnego menu strony - widać hero */
	filter: grayscale(1) brightness(0.55) contrast(1.1);
	transform: scale(1.02);
	transition: filter 0.4s ease, transform 0.6s ease;
}

.jsl #realizacje .work::after {
	background: linear-gradient(180deg, rgba(38, 44, 79, 0.72) 0%, rgba(38, 44, 79, 0.92) 75%);
}

@media (hover: hover) {
	.jsl #realizacje .work:hover::before {
		filter: grayscale(0) brightness(0.75);
		transform: scale(1.06);
	}
}

/* Telefon: karta wyższa niż zrzut - powiększenie, żeby górne menu strony wypadło poza kartę */
@media (max-width: 900px) {
	.jsl #realizacje .work::before {
		background-size: auto 140%;
	}
}

@media (hover: hover) {
	.jsl #realizacje .work:hover::after {
		opacity: 0.82;
	}
}

/* Popup realizacji (<dialog id="project-modal">) */
html.modal-open {
	overflow: hidden;
}

.jsl .modal {
	width: min(1180px, calc(100vw - 48px));
	max-height: calc(100vh - 48px);
	max-height: calc(100dvh - 48px); /* iPhone: wysokość bez paska adresu */
	padding: 0;
	color: var(--text);
	background: #141729; /* ciemniej niż sekcje - jak w cv-portfolio (tam #141414) */
	border: 1px solid #3b4472;
	overflow: auto;
}

.jsl .modal::backdrop {
	background: rgba(12, 14, 28, 0.82);
	backdrop-filter: blur(3px);
}

.jsl .modal[open] {
	animation: modal-in 0.25s ease;
}

@keyframes modal-in {
	from { opacity: 0; transform: translateY(16px); }
	to { opacity: 1; transform: none; }
}

.jsl .modal__close {
	position: sticky;
	top: 0;
	float: right;
	z-index: 2;
	display: grid;
	place-items: center;
	width: 40px;
	height: 40px;
	margin-bottom: -40px; /* nie zwęża treści obok (float) - podgląd sięga do prawej krawędzi */
	color: var(--bg);
	background: var(--accent);
	border: 0;
	cursor: pointer;
	transition: background 0.2s ease;
}

.jsl .modal__close svg {
	width: 16px;
	height: 16px;
}

@media (hover: hover) {
	.jsl .modal__close:hover {
		background: var(--white);
	}
}

.jsl .project {
	display: grid;
	grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
	gap: 48px;
	padding: 56px;
}

.jsl .project__kicker {
	margin: 0 0 12px;
	font-family: var(--head);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 2px;
	text-transform: uppercase;
	color: var(--accent);
}

.jsl .project__title {
	margin: 0;
	font-size: clamp(28px, 2.6vw, 40px);
	line-height: 1.1;
}

.jsl .project__meta {
	display: grid;
	gap: 10px;
	margin: 28px 0;
	padding: 20px 0;
	border-top: 1px solid var(--line);
	border-bottom: 1px solid var(--line);
}

.jsl .project__meta div {
	display: grid;
	grid-template-columns: 90px 1fr;
	gap: 12px;
}

.jsl .project__meta dt {
	font-family: var(--head);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 1.5px;
	line-height: 1.9;
	text-transform: uppercase;
	color: var(--muted);
}

/* Wartości (zakres, branża, miejsce) - jak kategoria na kaflu: małe wersaliki, jasnoszare (jak w cv-portfolio) */
.jsl .project__meta dd {
	margin: 0;
	font-family: var(--head);
	font-size: 12px;
	font-weight: 500;
	letter-spacing: 1.5px;
	line-height: 1.75;
	text-transform: uppercase;
	color: var(--text-soft);
}

.jsl .project__desc {
	margin: 0 0 30px;
	line-height: 1.7;
	color: var(--text-soft);
}

/* Dwa przyciski obok siebie: kontakt (miętowy) + link do strony realizacji (obrys) */
.jsl .project__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
}

.jsl .project :is(.button, .wp-block-button:not(.is-style-jsl-line) > .wp-block-button__link) {
	padding: 12px 20px;
	letter-spacing: 1.4px;
}

.jsl .project__link::after {
	content: "\2197";
}

.jsl .project__preview {
	align-self: start;
	margin: 0;
}

/* Galeria realizacji (z cv-portfolio): scena 4:3 + miniatury i strzałki (script.js, gdy zdjęć więcej niż jedno).
   Kolejne zdjęcia: materialy\realizacje\<slug>\ -> narzedzia\obrazy-realizacji.php -> <a class="shot"> w index.html */
.jsl .gallery {
	min-width: 0;
}

.jsl .gallery__stage {
	position: relative;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	background: #10132a;
	border: 1px solid #3b4472;
	box-shadow: 0 30px 60px rgba(0, 0, 0, 0.35);
}

.jsl .shot {
	position: absolute;
	inset: 0;
	display: none;
	cursor: zoom-in;
}

.jsl .shot.is-active {
	display: block;
	animation: shot-in 0.35s ease;
}

@keyframes shot-in {
	from { opacity: 0; }
	to { opacity: 1; }
}

.jsl .shot picture {
	display: block;
	height: 100%;
}

.jsl .gallery .shot img {
	display: block;
	width: 100%;
	height: 100%;
}

/* Zrzut strony w ramce przeglądarki; po najechaniu przewija się do końca strony (--scroll z HTML) */
.jsl .shot--page {
	padding-top: 30px;
	background: var(--bg-alt);
}

.jsl .shot--page::before {
	content: "";
	position: absolute;
	top: 11px;
	left: 14px;
	width: 44px;
	height: 8px;
	background: radial-gradient(circle 4px at 4px 4px, #00c9a7 98%, transparent) 0 0 / 18px 8px repeat-x;
	opacity: 0.85;
}

.jsl .shot--page::after {
	content: attr(data-url);
	position: absolute;
	top: 6px;
	left: 50%;
	transform: translateX(-50%);
	min-width: 38%;
	max-width: calc(100% - 140px); /* telefon: długi adres w jednej linii, z wielokropkiem */
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
	padding: 2px 14px;
	font-family: var(--head);
	font-size: 11px;
	font-weight: 500;
	letter-spacing: 0.5px;
	line-height: 14px;
	text-align: center;
	color: var(--muted);
	background: #2d3561;
	border-radius: 9px;
}

.jsl .shot--page:not([data-url])::after {
	display: none;
}

.jsl .shot--page img {
	object-fit: cover;
	object-position: 50% 0;
	transition: object-position 1.2s ease;
}

@media (hover: hover) {
	.jsl .shot--page:hover img {
		object-position: 50% 100%;
		transition: object-position calc(var(--scroll, 4s) * 1.4) linear;
	}
}

/* Zdjęcia, widok z telefonu, grafiki - całe, bez przycinania */
.jsl .shot--photo img {
	object-fit: contain;
	transition: transform 0.6s ease;
}

@media (hover: hover) {
	.jsl .shot--photo:hover img {
		transform: scale(1.03);
	}
}

/* Znaczek „Powiększ" w rogu sceny */
.jsl .gallery__stage::after {
	content: "Powiększ";
	position: absolute;
	right: 12px;
	bottom: 12px;
	z-index: 1;
	padding: 6px 12px 6px 30px;
	font-family: var(--head);
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 1.5px;
	text-transform: uppercase;
	color: var(--white);
	background: rgba(16, 19, 42, 0.85) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%2300C9A7' stroke-width='1.6' d='M10 1h5v5M15 1 9 7M6 15H1v-5M1 15l6-6'/%3E%3C/svg%3E") 11px 50% / 11px no-repeat;
	pointer-events: none;
	transition: opacity 0.3s ease;
}

@media (hover: hover) {
	.jsl .gallery__stage:hover::after {
		opacity: 0;
	}
}

/* Galeria samych zdjęć (bez zrzutów stron) - ramka w proporcjach zdjęcia (--r z script.js),
   nie wyższa niż 70% ekranu; scena, miniatury i podpis tej samej szerokości, wyśrodkowane */
.jsl .gallery--posts .gallery__stage,
.jsl .gallery--posts .gallery__thumbs,
.jsl .gallery--posts .gallery__caption {
	margin-inline: auto;
	width: min(100%, calc(min(70vh, 640px) * var(--r, 0.8)));
	transition: width 0.3s ease;
}

.jsl .gallery--posts .gallery__stage {
	aspect-ratio: var(--r, 0.8);
}

.jsl .gallery--posts .gallery__thumb:first-child {
	margin-left: auto;
}

.jsl .gallery--posts .gallery__thumb:last-child {
	margin-right: auto;
}

/* Strzałki na scenie galerii */
.jsl .gallery__arrow {
	position: absolute;
	top: 50%;
	z-index: 2;
	display: grid;
	place-items: center;
	width: 40px;
	height: 40px;
	padding: 0;
	color: var(--white);
	background: rgba(16, 19, 42, 0.8);
	border: 0;
	transform: translateY(-50%);
	cursor: pointer;
	transition: background 0.2s ease, color 0.2s ease, opacity 0.3s ease;
}

.jsl .gallery__arrow--prev {
	left: 10px;
}

.jsl .gallery__arrow--next {
	right: 10px;
}

.jsl .gallery__arrow:focus-visible {
	color: var(--bg);
	background: var(--accent);
}

@media (hover: hover) {
	.jsl .gallery__arrow:hover {
		color: var(--bg);
		background: var(--accent);
	}
}

.jsl .gallery__caption {
	margin-top: 14px;
	font-family: var(--head);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 1.5px;
	text-transform: uppercase;
	color: var(--muted);
}

/* Jeden pasek miniatur, przewijany w poziomie */
.jsl .gallery__thumbs {
	display: flex;
	gap: 10px;
	margin-top: 14px;
	padding-bottom: 8px;
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scrollbar-width: thin;
	scrollbar-color: var(--accent) var(--surface);
}

.jsl .gallery__thumb {
	flex: 0 0 auto;
	width: 88px;
	padding: 0;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	background: #10132a;
	border: 1px solid #3b4472;
	opacity: 0.5;
	cursor: pointer;
	transition: opacity 0.2s ease, border-color 0.2s ease;
}

.jsl .gallery__thumb img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.jsl .gallery__thumb:focus-visible {
	opacity: 0.85;
}

@media (hover: hover) {
	.jsl .gallery__thumb:hover {
		opacity: 0.85;
	}
}

.jsl .gallery__thumb.is-active {
	opacity: 1;
	border-color: var(--accent);
}

.jsl .gallery__thumbs + .gallery__caption {
	margin-top: 10px;
}

/* Powiększenie (<dialog id="lightbox">) - nad popupem realizacji */
.jsl .lightbox {
	width: 100vw;
	max-width: 100vw;
	height: 100%;
	max-height: 100%;
	margin: 0;
	padding: 0;
	color: var(--text);
	background: transparent;
	border: 0;
	overflow: auto;
}

.jsl .lightbox::backdrop {
	background: rgba(10, 12, 26, 0.95);
}

.jsl .lightbox[open] {
	animation: modal-in 0.25s ease;
}

.jsl .lightbox__close {
	position: fixed;
	top: 20px;
	right: 20px;
	float: none;
	margin: 0;
}

.jsl .lightbox__body {
	display: grid;
	place-items: center;
	min-height: calc(100% - 64px);
	padding: 40px 72px;
}

.jsl .lightbox__body img {
	display: block;
	max-width: 100%;
	max-height: calc(100vh - 150px);
	max-height: calc(100dvh - 150px);
	width: auto;
	height: auto;
	box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6);
}

/* Zrzut strony - pełna długość, przewijany */
.jsl .lightbox__body--page {
	place-items: start center;
}

.jsl .lightbox__body--page img {
	width: min(1280px, 100%);
	max-height: none;
}

.jsl .lightbox__nav {
	position: sticky;
	bottom: 0;
	justify-content: center;
	padding: 12px 20px;
	background: #10132a;
	border-top: 1px solid #3b4472;
}

.jsl .lightbox__nav[hidden],
.jsl .lightbox .slider-nav__btn[hidden] {
	display: none;
}

.jsl .lightbox__caption {
	min-width: 220px;
	font-family: var(--head);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 1.5px;
	text-transform: uppercase;
	text-align: center;
}

@media (max-width: 900px) {
	.jsl .lightbox__body {
		padding: 72px 0 24px;
	}

	.jsl .lightbox__caption {
		min-width: 0;
		flex: 1;
	}

	.jsl .gallery__thumb {
		width: 72px;
	}
}

/* Strzałki poprzednia / następna realizacja - przyklejone do dołu okna */
.jsl .modal__nav {
	position: sticky;
	bottom: 0;
	z-index: 2;
	justify-content: center;
	padding: 14px 20px;
	background: #10132a;
	border-top: 1px solid #3b4472;
}

/* Opinia klienta pod spodem, na całą szerokość - bez tła, duży cudzysłów jako znak wodny (jak w cv-portfolio) */
.jsl .project__quote {
	position: relative;
	grid-column: 1 / -1;
	margin: 0;
	padding: 34px 0 0 64px;
	border-top: 1px solid var(--line);
}

.jsl .project__quote::before {
	content: "\201D";
	position: absolute;
	top: 6px;
	left: -6px;
	font-family: Georgia, "Times New Roman", serif;
	font-size: 150px;
	line-height: 1;
	color: var(--accent);
	opacity: 0.18;
	pointer-events: none;
}

.jsl .project__quote blockquote {
	position: relative;
	max-width: 860px;
	margin: 0 0 14px;
	font-family: var(--head);
	font-size: 15px;
	font-weight: 500;
	font-style: italic;
	line-height: 1.7;
	color: var(--text-soft);
}

.jsl .project__quote figcaption {
	font-size: 13px;
	color: var(--muted);
}

.jsl .project__quote-name {
	display: block;
	font-family: var(--head);
	font-size: 15px;
	font-weight: 700;
	color: var(--accent);
}

@media (max-width: 900px) {
	.jsl .modal {
		width: 100vw;
		max-width: 100vw;
		height: 100%;
		max-height: 100%;
		margin: 0;
		border: 0;
	}

	.jsl .project {
		grid-template-columns: 1fr;
		gap: 30px;
		padding: 72px 20px 40px; /* miejsce na przycisk zamykania nad podglądem */
	}

	.jsl .project__preview {
		order: -1;
	}

	.jsl .project__quote {
		padding: 30px 0 0 44px;
	}

	.jsl .project__quote::before {
		font-size: 110px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.jsl .modal[open],
	.jsl .lightbox[open],
	.jsl .shot.is-active {
		animation: none;
	}

	.jsl .shot--page img {
		transition: none;
	}

	@media (hover: hover) {
		.jsl .shot--page:hover img {
			transition: none;
		}
	}
}

/* Lustrzany wariant: tekst przy prawej krawędzi, kreska biegnie od niego do prawego brzegu ekranu */
.jsl .section__cta--right {
	text-align: right;
}

.jsl .line-link--right::before {
	right: auto;
	left: calc(100% + 18px);
}

/* Odnośnik w nagłówku sekcji (po prawej) - krótka linia w obrębie odnośnika, nie przecina tekstu obok */
.jsl :is(.line-link--short, .line-link--short .wp-block-button__link) {
	padding-left: 138px;
}

.jsl :is(.line-link--short, .line-link--short .wp-block-button__link)::before {
	right: auto;
	left: 0;
	width: 120px;
}

/* Ramka wokół ekranu (Merge) */

.jsl .frame {
	position: fixed;
	z-index: 25;
	background: var(--bg);
}

.jsl .frame--left,
.jsl .frame--right {
	top: var(--header-h);
	bottom: var(--frame);
	display: flex;
	align-items: center;
	justify-content: center;
	width: var(--frame);
}

.jsl .frame--left {
	left: 0;
	border-right: 1px solid var(--line);
}

.jsl .frame--right {
	right: 0;
	border-left: 1px solid var(--line);
}

.jsl .frame--bottom {
	left: 0;
	right: 0;
	bottom: 0;
	display: grid;
	grid-template-columns: var(--frame) 1fr var(--frame);
	height: var(--frame);
	border-top: 1px solid var(--line);
}

.jsl .frame__corner {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	color: var(--muted);
	background: none;
	border: 0;
	border-left: 1px solid var(--line);
	cursor: pointer;
	transition: color 0.2s ease, background 0.2s ease;
}

@media (hover: hover) {
	.jsl .frame__corner:hover {
		color: var(--white);
	}
}

.jsl .frame__corner--accent {
	position: relative;
	color: var(--bg);
	background: var(--accent);
	border-left: 0;
}

/* Rozbłysk pod przyciskiem w lewym dolnym rogu (Merge) - miękka miętowa poświata, lekko pulsuje */
.jsl .frame__corner--accent::before {
	content: "";
	position: absolute;
	left: 50%;
	top: 50%;
	z-index: -1;
	width: 420px;
	height: 420px;
	border-radius: 50%;
	background: radial-gradient(circle, rgb(0 201 167 / 0.7) 0%, rgb(0 201 167 / 0.28) 30%, rgb(0 201 167 / 0.08) 52%, rgb(0 201 167 / 0) 68%);
	transform: translate(-50%, -50%);
	pointer-events: none;
	animation: corner-glow 4s ease-in-out infinite;
}

@keyframes corner-glow {
	0%,
	100% {
		opacity: 0.75;
		transform: translate(-50%, -50%) scale(0.92);
	}

	50% {
		opacity: 1;
		transform: translate(-50%, -50%) scale(1.06);
	}
}

@media (prefers-reduced-motion: reduce) {
	.jsl .frame__corner--accent::before {
		animation: none;
	}
}

@media (hover: hover) {
	.jsl .frame__corner--accent:hover {
		color: var(--bg);
		background: var(--white);
	}
}

.jsl .frame__corner--accent svg {
	transition: transform 0.2s ease;
}

@media (hover: hover) {
	.jsl .frame__corner--accent:hover svg {
		transform: translateX(3px);
	}
}

.jsl .frame__corner--accent.is-last svg {
	transform: rotate(-90deg);
}

@media (hover: hover) {
	.jsl .frame__corner--accent.is-last:hover svg {
		transform: rotate(-90deg);
	}
}

.jsl .frame--right {
	flex-direction: column;
	gap: 22px;
}

.jsl .frame__count {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 6px;
	font-size: 12px;
	font-weight: 600;
	line-height: 1;
	color: var(--white);
}

.jsl .frame__count-total {
	font-size: 10px;
	font-weight: 500;
	color: var(--muted);
}

.jsl .frame__count-total::before {
	content: "";
	display: block;
	width: 1px;
	height: 14px;
	margin: 0 auto 6px;
	background: var(--line);
}

.jsl .frame__info {
	display: flex;
	align-items: center;
	gap: 50px;
	padding: 0 calc(4vw + 90px - var(--frame));
	font-size: 12px;
	line-height: 1.4;
	color: var(--white);
}

.jsl .frame__info p {
	margin: 0;
}

@media (hover: hover) {
	.jsl .frame__info a:hover {
		color: var(--accent);
	}
}

.jsl .frame__label {
	display: block;
	font-size: 9px;
	font-weight: 500;
	letter-spacing: 1.5px;
	text-transform: uppercase;
	color: var(--muted);
}

.jsl .frame__social {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
	height: 100%;
	margin: 0;
	padding: 30px 0;
	list-style: none;
	color: var(--muted);
}

.jsl .frame__social::before,
.jsl .frame__social::after {
	content: "";
	flex: 1;
	border-left: 1px solid var(--line);
}

.jsl .frame__social::before {
	margin-bottom: 16px;
}

.jsl .frame__social::after {
	margin-top: 16px;
}

.jsl .frame__social a {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	transition: color 0.2s ease, transform 0.2s ease;
}

@media (hover: hover) {
	.jsl .frame__social a:hover {
		color: var(--accent);
		transform: scale(1.12);
	}
}

/* Pasek przewijania w lewej kolumnie - pokazuje postęp, można go klikać i przeciągać */

.jsl .scroll-rail {
	position: relative;
	width: 25px;
	height: 34vh;
	cursor: pointer;
	touch-action: none;
}

.jsl .scroll-rail::before {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	left: 12px;
	border-left: 1px solid #4b5487;
}

.jsl .scroll-rail__thumb {
	position: absolute;
	top: 0;
	left: 11px;
	width: 3px;
	height: 40px;
	background: var(--accent);
	transition: width 0.2s ease, left 0.2s ease;
}

.jsl .scroll-rail.is-dragging .scroll-rail__thumb {
	left: 10px;
	width: 5px;
}

@media (hover: hover) {
	.jsl .scroll-rail:hover .scroll-rail__thumb {
		left: 10px;
		width: 5px;
	}
}

.jsl .scroll-rail.is-dragging {
	cursor: grabbing;
}

/* Sekcje - pełna wysokość ekranu, pionowy znak wodny po lewej */

.jsl .section {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: center;
	min-height: var(--screen);
	overflow: hidden;
	padding: 110px 5vw 110px calc(4vw + 90px);
}

.jsl .section--alt {
	background: var(--bg-alt);
}

.jsl .container {
	position: relative;
	width: 100%;
	max-width: 1100px;
	margin: 0 auto;
}

.jsl .vwm {
	position: absolute;
	top: 50%;
	left: 20px;
	font-family: var(--head);
	font-size: clamp(70px, 7.5vw, 130px);
	font-weight: 800;
	line-height: 1;
	letter-spacing: -0.01em;
	white-space: nowrap;
	color: rgba(255, 255, 255, 0.05);
	writing-mode: vertical-rl;
	transform: translateY(-50%) rotate(180deg);
	pointer-events: none;
	user-select: none;
}

.jsl h2 {
	margin: 0;
	font-size: clamp(34px, 3.4vw, 50px);
	font-weight: 600;
	line-height: 1.1;
	letter-spacing: -0.01em;
}

.jsl h3 {
	margin: 0 0 14px;
	font-size: 19px;
	font-weight: 600;
	line-height: 1.3;
}

.jsl .section__head {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: 24px 40px;
}

.jsl .section__lead {
	max-width: 680px;
	margin: 20px 0 0;
	color: var(--text-soft);
}

.jsl .section__cta {
	margin: 56px 0 0;
}

/* Font treści (Nunito) - cienka grubość 300 */
.jsl .aside {
	margin: 20px 0 0;
	font-family: var(--body);
	font-size: 26px;
	font-weight: 300;
	line-height: 1.3;
	color: var(--accent);
}

.jsl .skip {
	position: absolute;
	left: -9999px;
	z-index: 50;
	padding: 10px 16px;
	color: var(--bg);
	background: var(--white);
}

.jsl .skip:focus {
	left: 10px;
	top: 10px;
}

/* Pojawianie się sekcji przy przewijaniu */

.jsl .js .reveal {
	opacity: 0;
	transform: translateY(28px);
	transition: opacity 0.7s ease, transform 0.7s ease;
}

.jsl .js .reveal.is-visible {
	opacity: 1;
	transform: none;
}

/* Manifest pod topem i pas z hasłem */

.jsl .manifest {
	padding: 110px 5vw 110px calc(4vw + 90px);
	background: var(--bg-alt);
	border-top: 1px solid var(--line);
}

.jsl .manifest {
	position: relative;
	overflow: hidden;
}

/* Portret Jobsa w tle cytatu (domena publiczna, Library of Congress) */
.jsl .manifest--photo::before {
	content: "";
	position: absolute;
	top: 0;
	right: 6%;
	bottom: 0;
	width: 42%;
	background: url("jobs.png") center / contain no-repeat;
	background-image: image-set(url("jobs.webp") type("image/webp"), url("jobs.png") type("image/png"));
	opacity: 0.1;
	pointer-events: none;
}

.jsl .manifest--photo {
	min-height: var(--screen);
	display: flex;
	align-items: center;
}

.jsl .manifest--photo .manifest__quote {
	flex: 1;
}

.jsl .manifest__quote {
	position: relative;
	max-width: 1100px;
	margin: 0 auto;
	padding-left: 70px;
}

.jsl .manifest__quote::before {
	content: "\201C";
	position: absolute;
	top: -18px;
	left: 0;
	font-family: var(--head);
	font-size: 120px;
	font-weight: 800;
	line-height: 1;
	color: var(--accent);
}

.jsl .manifest blockquote {
	margin: 0;
	font-family: var(--head);
	font-size: clamp(26px, 3.2vw, 52px);
	font-weight: 600;
	line-height: 1.2;
	letter-spacing: -0.01em;
	color: var(--white);
	text-wrap: balance;
}

.jsl .manifest blockquote span {
	color: var(--accent);
}

.jsl .manifest figcaption {
	margin-top: 26px;
	font-size: 12px;
	font-weight: 500;
	letter-spacing: 2px;
	text-transform: uppercase;
	color: var(--muted);
}

.jsl .manifest figcaption::before {
	content: "";
	display: inline-block;
	width: 40px;
	margin-right: 14px;
	vertical-align: middle;
	border-top: 1px solid var(--muted);
}

/* Cytat wyrównany do początku treści stopki - te same odstępy co .site-footer i .footer__grid (jak w cv-portfolio) */
.jsl .statement {
	padding: 72px 5vw;
	background: var(--accent);
}

.jsl .statement p {
	margin: 0;
	font-family: var(--head);
	font-size: clamp(36px, 6vw, 110px);
	font-weight: 800;
	line-height: 1;
	letter-spacing: -0.03em;
	color: var(--bg);
}

/* Blok wyśrodkowany, tekst od lewej - dolny cytat startuje od krawędzi „Content is King." */
.jsl .statement__inner {
	max-width: 1300px;
	margin: 0 auto;
}

.jsl .statement figure,
.jsl .statement blockquote {
	margin: 0;
}

.jsl .statement figcaption {
	margin-top: 10px;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--bg);
	opacity: 0.7;
}

.jsl .statement__quote--small {
	margin-top: 26px !important;
}

.jsl .statement .statement__quote--small p {
	max-width: 56ch;
	font-family: var(--body);
	font-size: clamp(16px, 1.25vw, 22px);
	font-weight: 300;
	line-height: 1.4;
	letter-spacing: 0;
}

.jsl .statement__wink {
	white-space: nowrap;
}

/* Prace */

.jsl .works {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 24px;
	margin-top: 60px;
}

.jsl .work {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	min-height: 210px;
	padding: 32px 36px;
	background: var(--surface);
	transition: background 0.3s ease;
}

.jsl a.work {
	color: inherit;
	text-decoration: none;
	border: 0;
}

@media (hover: hover) {
	.jsl .work:hover {
		background: #2d3561;
	}
}

.jsl .work__no {
	position: absolute;
	top: 30px;
	left: 36px;
	font-family: var(--head);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 2px;
	color: var(--accent);
}

.jsl .work__name {
	font-family: var(--head);
	font-size: clamp(26px, 2.6vw, 38px);
	font-weight: 700;
	line-height: 1.1;
	color: var(--white);
}

/* Logo realizacji - jednokolorowe jak w sekcji marek */
.jsl .work__logo {
	display: flex;
	flex: 1;
	align-items: center;
	padding: 34px 0 10px;
}

.jsl .work__logo img {
	max-width: 62%;
	max-height: 64px;
	width: auto;
	height: auto;
	filter: grayscale(1) brightness(0) invert(1);
	opacity: 0.8;
	transition: opacity 0.3s ease;
}

.jsl .work__logo--square img {
	max-height: 96px;
}

@media (hover: hover) {
	.jsl .work:hover .work__logo img {
		opacity: 1;
	}
}

.jsl .work__cat {
	margin-top: 10px;
	font-size: 12px;
	font-weight: 500;
	letter-spacing: 1.5px;
	text-transform: uppercase;
	color: var(--muted);
}

/* Marki, które mi zaufały */

.jsl .brands {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 24px;
	margin: 60px 0 0;
	padding: 0;
	list-style: none;
}

.jsl .brand {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 120px;
	padding: 20px 30px;
	border: 1px solid var(--line);
	transition: border-color 0.3s ease;
}

@media (hover: hover) {
	.jsl .brand:hover {
		border-color: var(--accent);
	}
}

.jsl .brand img {
	max-width: 100%;
	max-height: 56px;
	width: auto;
	height: auto;
	filter: grayscale(1) brightness(0) invert(1);
	opacity: 0.45;
	transition: opacity 0.3s ease;
}

/* Znaki prawie kwadratowe (np. Spomlek) - wyżej, żeby nie były drobne */
.jsl .brand--square img {
	max-height: 80px;
}

@media (hover: hover) {
	.jsl .brand:hover img {
		opacity: 1;
	}
}

.jsl .brand--empty {
	font-family: var(--head);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 2px;
	text-transform: uppercase;
	color: #7880a6;
	border: 1px dashed #3b4472;
}

/* Nazwa marki tekstem - zamiast logo, dopóki nie ma plików */
.jsl .brand--name {
	font-family: var(--head);
	font-size: 20px;
	font-weight: 700;
	line-height: 1.2;
	text-align: center;
	color: rgb(255 255 255 / 0.45);
	transition: color 0.3s ease, border-color 0.3s ease;
}

@media (hover: hover) {
	.jsl .brand--name:hover {
		color: var(--white);
	}
}

/* Karuzele: realizacje (2 na ekran) i marki (4 x 2 na ekran), strzałki w .slider-nav */

.jsl .carousel {
	grid-template-columns: none;
	grid-auto-flow: column;
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	scrollbar-width: none;
}

.jsl .carousel::-webkit-scrollbar {
	display: none;
}

.jsl .carousel > * {
	scroll-snap-align: start;
}

/* Realizacje: strony po 4 kafle (2 x 2) - grupuje je script.js, kolejne za strzałką */
.jsl .works.carousel {
	grid-auto-columns: 100%;
}

.jsl .works__page {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 24px;
	align-content: start;
}

/* Marki: strony po 8 kafli (4 x 2), na telefonie po 4 - grupuje je script.js */
.jsl .brands.carousel {
	grid-auto-columns: 100%;
}

.jsl .brands__page {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 24px;
	align-content: start;
}

.jsl .posts.carousel {
	grid-auto-columns: calc((100% - 2 * 30px) / 3);
}

.jsl .slider-nav__btn:disabled {
	opacity: 0.3;
	cursor: default;
	transform: none !important;
}

/* Podpis zdjęcia (wymóg licencji CC BY-SA) */

.jsl .manifest__credit {
	position: absolute;
	right: 24px;
	bottom: 14px;
	z-index: 1;
	margin: 0;
	font-size: 10px;
	color: #7880a6;
}

.jsl .manifest__credit a {
	text-decoration: underline;
}

/* Opinie - slider (Mikael) */

.jsl .slider-nav {
	display: flex;
	align-items: center;
	gap: 18px;
	color: var(--muted);
}

.jsl .slider-nav__btn {
	display: flex;
	padding: 10px 4px;
	color: var(--muted);
	background: none;
	border: 0;
	cursor: pointer;
	transition: color 0.2s ease, transform 0.2s ease;
}

@media (hover: hover) {
	.jsl .slider-nav__btn:hover {
		color: var(--white);
	}
}

@media (hover: hover) {
	.jsl .slider-nav__btn[data-dir="-1"]:hover {
		transform: translateX(-5px);
	}
}

@media (hover: hover) {
	.jsl .slider-nav__btn[data-dir="1"]:hover {
		transform: translateX(5px);
	}
}

.jsl .slider-nav__count {
	min-width: 44px;
	font-size: 14px;
	text-align: center;
}

.jsl .slider {
	margin-top: 50px;
	overflow: hidden;
}

.jsl .slider__track {
	display: flex;
	transition: transform 0.6s cubic-bezier(0.65, 0, 0.35, 1);
}

.jsl .quote {
	position: relative;
	flex: 0 0 100%;
	display: grid;
	align-content: start; /* slajdy mają wysokość najdłuższej opinii - treść u góry */
	grid-template-columns: 76px 1fr;
	gap: 28px;
	margin: 0;
	padding: 38px 110px 38px 40px;
	color: var(--bg);
	background: var(--accent);
}

.jsl .quote::after {
	content: "\201D";
	position: absolute;
	right: 34px;
	bottom: -40px;
	font-family: var(--head);
	font-size: 170px;
	font-weight: 800;
	line-height: 1;
	color: rgba(0, 0, 0, 0.16);
}

.jsl .quote__avatar {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 76px;
	height: 76px;
	font-family: var(--head);
	font-size: 28px;
	font-weight: 700;
	color: var(--accent);
	background: var(--bg);
	border-radius: 50%;
}

/* Opinia firmy: logo (ciemne na mięcie) zamiast kółka z inicjałami - szersza pierwsza kolumna */
.jsl .quote--logo {
	grid-template-columns: 140px 1fr;
}

.jsl .quote__logo {
	display: flex;
	align-items: flex-start;
	padding-top: 6px;
}

.jsl .quote__logo img {
	display: block;
	max-width: 140px;
	max-height: 60px;
	width: auto;
	height: auto;
	filter: grayscale(1) brightness(0);
	opacity: 0.85;
}

.jsl .quote__text {
	margin: 0 0 20px;
	font-size: 16px;
	line-height: 1.7;
}

.jsl .quote figcaption {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.jsl .quote__name {
	font-family: var(--head);
	font-size: 16px;
	font-weight: 700;
}

.jsl .quote__company {
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 1.5px;
	text-transform: uppercase;
}

/* Moja specjalizacja (Ramsay) */

.jsl .services {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 60px 90px;
	margin-top: 60px;
}

.jsl .service {
	display: grid;
	grid-template-columns: 48px 1fr;
	align-content: start;
	column-gap: 28px;
}

.jsl .service__icon {
	grid-row: span 3;
}

.jsl .service__icon {
	display: block;
	color: var(--accent);
}

/* Specjalizacja na jeden ekran: szersza treść, 4 kolumny, ikona nad tekstem, ciaśniej */
.jsl #uslugi {
	padding-top: 70px;
	padding-bottom: 70px;
}

.jsl #uslugi .container {
	max-width: 1400px;
}

.jsl #uslugi .services {
	margin-top: 40px;
}

.jsl #uslugi .service p {
	margin-bottom: 16px;
	font-size: 15px;
	line-height: 1.65;
}

.jsl #uslugi .ticks li {
	padding: 3px 0 3px 24px;
	font-size: 15px;
	line-height: 1.55;
}

.jsl #uslugi .ticks li::before {
	top: calc(3px + 0.775em - 6px);
}

.jsl #uslugi .section__cta {
	margin-top: 36px;
}

@media (min-width: 1281px) {
	.jsl #uslugi .services {
		grid-template-columns: repeat(3, 1fr);
		gap: 40px 60px;
	}

	.jsl #uslugi .service {
		grid-template-columns: 1fr;
	}

	.jsl #uslugi .service__icon {
		grid-row: auto;
		margin-bottom: 22px;
	}
}

@media (min-width: 901px) and (max-width: 1280px) {
	.jsl #uslugi .services {
		gap: 36px 56px;
	}
}

.jsl .service h3 {
	font-size: 17px;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.jsl .service p {
	margin: 0 0 24px;
	color: var(--text-soft);
}

/* Punktory - puste trójkąty, sama miętowa linia */
.jsl .ticks {
	margin: 0;
	padding: 0;
	list-style: none;
}

.jsl .ticks li {
	position: relative;
	padding: 6px 0 6px 26px;
	color: var(--text);
}

.jsl .ticks li::before {
	content: "";
	position: absolute;
	top: 0.875em;
	left: 0;
	width: 11px;
	height: 12px;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 11 12'%3E%3Cpath d='M1 1l9 5-9 5z' fill='none' stroke='%2300C9A7' stroke-width='1.3' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* Jak pracujemy */

.jsl .steps {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 40px;
	margin: 60px 0 0;
	padding: 0;
	list-style: none;
}

.jsl .steps li {
	padding-top: 30px;
	border-top: 1px solid var(--line);
}

.jsl .steps__no {
	display: block;
	margin-bottom: 18px;
	font-family: var(--head);
	font-size: 40px;
	font-weight: 700;
	line-height: 1;
	color: var(--accent);
}

.jsl .steps p {
	margin: 0;
	color: var(--text-soft);
}

/* O mnie */

.jsl .split {
	display: grid;
	grid-template-columns: 1fr 1.3fr;
	gap: 60px;
}

.jsl .prose p {
	margin: 0 0 20px;
}

.jsl .prose .intro {
	font-family: var(--head);
	font-size: 22px;
	font-weight: 500;
	line-height: 1.45;
	color: var(--white);
}

/* CV */

/* Lata pionowo po lewej na linii czasu, rola w kolumnie obok, bez linii poziomych */

.jsl .section--cv {
	padding-top: 70px;
	padding-bottom: 70px;
}

.jsl .timeline {
	position: relative;
	margin: 40px 0 0;
	padding: 0;
	list-style: none;
}

.jsl .timeline::before {
	content: "";
	position: absolute;
	top: 18px;
	bottom: 18px;
	left: 15px;
	border-left: 1px solid #454e80;
}

.jsl .job {
	display: grid;
	grid-template-columns: 31px 240px 1fr;
	gap: 0 40px;
	padding: 18px 0;
}

.jsl .job__date {
	position: relative;
	align-self: start;
	justify-self: center;
	margin: 0;
	padding: 10px 0;
	font-family: var(--head);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 1.5px;
	line-height: 1;
	white-space: nowrap;
	text-transform: uppercase;
	color: var(--accent);
	background: var(--bg);
	writing-mode: vertical-rl;
	transform: rotate(180deg);
}

.jsl .job__head h3 {
	margin-bottom: 4px;
	font-size: 16px;
}

.jsl .job__company {
	margin: 0;
	font-size: 13px;
	color: var(--muted);
}

.jsl .job__body {
	min-width: 0;
}

.jsl .job__desc {
	margin: 0 0 12px;
	font-size: 15px;
	line-height: 1.65;
}

/* Hasła pod opisem - trójkąty, w dwóch kolumnach */
.jsl .job__list {
	display: grid;
	grid-template-columns: repeat(2, max-content);
	gap: 2px 40px;
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: 15px;
	line-height: 1.6;
	color: var(--white);
}

.jsl .job__list strong {
	font-weight: 600;
	color: var(--white);
}

.jsl .job__list.ticks li {
	padding: 2px 0 2px 24px;
}

.jsl .job__list.ticks li::before {
	top: calc(2px + 0.8em - 6px);
}

.jsl .plain,
.jsl .tags {
	margin: 0;
	padding: 0;
	list-style: none;
}

.jsl .plain li + li {
	margin-top: 10px;
}

.jsl .plain strong {
	font-weight: 600;
	color: var(--white);
}

.jsl .tags {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.jsl .prose .tags {
	margin: 0 0 28px;
}

/* O mnie - animowane liczby, 3 kolumny w szerokości tekstu (.prose) */
.jsl .stats {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px;
	margin: 10px 0 30px;
	padding: 24px 0;
	list-style: none;
	border-top: 1px solid var(--line);
	border-bottom: 1px solid var(--line);
}

.jsl .stat__num {
	display: block;
	font-family: var(--head);
	font-size: clamp(36px, 3vw, 54px);
	font-weight: 800;
	line-height: 1;
	letter-spacing: -0.03em;
	color: var(--accent);
	font-variant-numeric: tabular-nums;
}

.jsl .stat__label {
	display: block;
	margin-top: 8px;
	font-size: 14px;
	line-height: 1.5;
	color: var(--text-soft);
}

.jsl .tags li {
	padding: 4px 14px;
	font-size: 13px;
	border: 1px solid #3b4472;
}

/* Mój dziennik (Mikael) */

.jsl .posts {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 30px;
	margin-top: 56px;
}

.jsl .post__thumb {
	display: flex;
	align-items: center;
	justify-content: center;
	aspect-ratio: 16 / 10;
	margin-bottom: 22px;
	font-family: var(--head);
	font-size: 72px;
	font-weight: 800;
	line-height: 1;
	color: transparent;
	background: var(--surface);
	-webkit-text-stroke: 1px var(--accent);
	transition: background 0.3s ease;
}

@media (hover: hover) {
	.jsl .post:not(.type-post):hover .post__thumb {
		background: #2d3561;
	}
}

.jsl .post__link {
	display: block;
}

@media (hover: hover) {
	.jsl .post__link:hover h3 {
		color: var(--accent);
	}
}

.jsl .post__meta {
	margin: 0 0 10px;
	font-size: 12px;
	color: var(--muted);
}

.jsl .post__meta span {
	margin: 0 6px;
	color: var(--accent);
}

.jsl .post:not(.type-post) h3,
.jsl .post:not(.type-post) .post__title {
	margin: 0 0 10px;
	font-size: 19px;
	line-height: 1.35;
}

.jsl .post:not(.type-post) p:last-child {
	margin: 0;
	color: var(--text-soft);
}

/* Mapa Olsztyna w tle kontaktu (Ramsay) - dane OpenStreetMap */

/* Mapa ładowana leniwie (Core Web Vitals): obraz dopiero po klasie .is-loaded, którą script.js
   dodaje, gdy kontakt zbliża się do ekranu. Bez JS (html bez .js) mapa ładuje się od razu. */
.jsl .section__map {
	position: absolute;
	inset: 0;
	background: center / cover no-repeat;
}

html:not(.js) .jsl .section__map,
.jsl .section__map.is-loaded {
	background-image: url("map-olsztyn.jpg");
	background-image: image-set(url("map-olsztyn.webp") type("image/webp"), url("map-olsztyn.jpg") type("image/jpeg"));
}

/* Szara mapa przebarwiona na granat marki */
.jsl .section__map::before {
	content: "";
	position: absolute;
	inset: 0;
	background: #2d3561;
	mix-blend-mode: color;
}

.jsl .section__map::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(90deg, var(--bg-alt) 0%, rgba(31, 36, 65, 0.85) 30%, rgba(31, 36, 65, 0.3) 100%);
}

.jsl .section--map .contact__form {
	padding: 36px;
	background: rgba(26, 30, 54, 0.82);
	backdrop-filter: blur(2px);
}

.jsl .section__map-credit {
	position: absolute;
	right: 20px;
	bottom: 12px;
	z-index: 1;
	margin: 0;
	font-size: 10px;
	color: #8088ac;
}

.jsl .section__map-credit a {
	text-decoration: underline;
}

/* Kontakt (Gilber) */

.jsl .contact {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 80px;
	align-items: start;
}

.jsl .contact__city {
	margin: 40px 0 0;
	font-family: var(--head);
	font-size: 24px;
	font-weight: 600;
	line-height: 1.25;
	color: var(--white);
}

.jsl .contact__mail {
	display: inline-block;
	margin-top: 14px;
	font-family: var(--head);
	font-size: clamp(22px, 2.4vw, 36px);
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: -0.01em;
	overflow-wrap: anywhere;
	color: var(--white);
	border-bottom: 2px solid var(--accent);
	transition: color 0.2s ease;
}

.jsl .contact__list {
	display: flex;
	flex-wrap: wrap;
	gap: 14px 50px;
	margin: 30px 0 0;
	padding: 0;
	list-style: none;
	font-weight: 500;
}

.jsl .contact__list a {
	display: inline-block;
	padding: 6px 0;
	border-bottom: 1px solid currentColor;
	transition: color 0.2s ease;
}

.jsl .contact__list .contact__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 46px;
	height: 46px;
	padding: 0;
	border: 1px solid var(--line);
	border-radius: 50%;
	transition: color 0.2s ease, border-color 0.2s ease;
}

@media (hover: hover) {
	.jsl .contact__list .contact__icon:hover {
		border-color: var(--accent);
	}
}

@media (hover: hover) {
	.jsl .contact__list a:hover,
	.jsl .contact__mail:hover {
		color: var(--accent);
	}
}

.jsl .contact__intro {
	margin: 0 0 30px;
	font-family: var(--head);
	font-size: clamp(22px, 2vw, 30px);
	font-weight: 600;
	line-height: 1.3;
	color: var(--white);
}

.jsl .contact__intro span {
	color: var(--accent);
}

.jsl .field {
	display: block;
	margin-bottom: 26px;
}

.jsl .field__label {
	display: block;
	font-size: 11px;
	font-weight: 500;
	letter-spacing: 2px;
	text-transform: uppercase;
	color: var(--muted);
}

.jsl .field input,
.jsl .field textarea {
	display: block;
	width: 100%;
	padding: 10px 0;
	font: inherit;
	color: var(--white);
	background: transparent;
	border: 0;
	border-bottom: 1px solid #3f4878;
	border-radius: 0;
	transition: border-color 0.2s ease;
}

.jsl .field textarea {
	resize: vertical;
}

.jsl .field input:focus,
.jsl .field textarea:focus {
	outline: none;
	border-bottom-color: var(--accent);
}

.jsl .contact__form :is(.button, .wp-block-button:not(.is-style-jsl-line) > .wp-block-button__link) {
	margin-top: 10px;
}

/* E-mail i telefon obok siebie po 50% */
.jsl .field-row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	align-items: end; /* gdyby etykieta złamała się na 2 linie, pola zostają w jednej linii */
	gap: 0 24px;
}

/* Klauzula RODO z checkboxem nad przyciskiem */
.jsl .contact__legal {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	margin: 4px 0 18px;
	font-size: 12px;
	line-height: 1.55;
	color: var(--muted);
	cursor: pointer;
}

/* Własny checkbox w palecie: granat + miętowy obrys, zaznaczony = mięta z granatowym ptaszkiem */
.jsl .contact__legal input {
	flex: none;
	appearance: none;
	-webkit-appearance: none;
	width: 18px;
	height: 18px;
	margin: 1px 0 0;
	background: var(--bg) center / 12px no-repeat;
	border: 1px solid var(--accent);
	border-radius: 0;
	cursor: pointer;
	transition: background-color 0.2s ease;
}

.jsl .contact__legal input:checked {
	background-color: var(--accent);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath fill='none' stroke='%231a1e36' stroke-width='2' d='M2 6.5l2.6 2.6L10 3.5'/%3E%3C/svg%3E");
}

.jsl .contact__legal input:focus-visible {
	outline: 2px solid var(--white);
	outline-offset: 2px;
}

.jsl .contact__legal a {
	color: var(--accent);
	text-decoration: underline;
	text-underline-offset: 2px;
}

/* Stopka */

.jsl .site-footer {
	padding: 110px 5vw 30px;
	color: #949cbe;
	background: #141729;
}

.jsl .site-footer p {
	margin: 0;
}

.jsl .site-footer ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

.jsl .site-footer a {
	display: inline-block;
	padding: 6px 0;
	white-space: nowrap;
	transition: color 0.2s ease;
}

@media (hover: hover) {
	.jsl .site-footer a:hover {
		color: var(--accent);
	}
}

.jsl .footer__grid {
	display: grid;
	grid-template-columns: 1fr 3fr;
	gap: 40px;
	max-width: 1300px;
	margin: 0 auto;
}

.jsl .site-footer .footer__logo {
	justify-self: start;
	align-self: start;
	padding: 0;
	font-family: var(--head);
	font-size: 22px;
	font-weight: 700;
	line-height: 1.2;
	white-space: normal;
	color: var(--white);
}

.jsl .footer__tagline {
	margin-top: 16px;
	font-size: 14px;
	line-height: 1.6;
}

.jsl .footer__row {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 40px;
}

.jsl .footer__row + .footer__row {
	margin-top: 50px;
	padding-top: 50px;
	border-top: 1px solid #2a3156;
}

/* Hierarchia stopki (poprawka 2026-10-16 - nagłówki były mniejsze niż linki):
   tytuł 22 px > linki 15 px > etykieta 11 px */
.jsl .footer__title {
	margin: 0 0 14px;
	font-size: 22px;
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: 0;
	color: var(--white);
}

.jsl .footer__col a,
.jsl .footer__col li {
	font-size: 15px;
}

.jsl .footer__col--offset {
	padding-top: 43px; /* listy pod „Na skróty" bez podnagłówków - wyrównanie pod tytułem 22 px */
}

.jsl .footer__col li:not(:has(a)) {
	padding: 6px 0;
}

.jsl .footer__label {
	font-size: 11px;
	font-weight: 500;
	letter-spacing: 2px;
	text-transform: uppercase;
}

.jsl .site-footer .footer__social {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	margin-top: 8px;
	padding: 0;
	font-family: var(--head);
	font-weight: 600;
	border: 1px solid #949cbe;
	border-radius: 50%;
	transition: color 0.2s ease, border-color 0.2s ease;
}

@media (hover: hover) {
	.jsl .site-footer .footer__social:hover {
		border-color: var(--accent);
	}
}

.jsl .footer__bottom {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 12px 20px;
	max-width: 1300px;
	margin: 90px auto 0;
	font-size: 13px;
}

/* Komputer: copyright, polityka i „Do góry" są w dolnym pasku ramki - bez powtórki w stopce
   (przeniesione z cv-portfolio 2026-10-16); na telefonie ramki nie ma, pasek zostaje */
@media (min-width: 901px) {
	.jsl .site-footer .footer__bottom {
		display: none;
	}

	.jsl .site-footer {
		padding-bottom: 90px;
	}
}

.jsl .footer__bottom a {
	font-family: var(--head);
	font-size: 15px;
	font-weight: 600;
	color: var(--white);
}

.jsl a:focus-visible,
.jsl button:focus-visible {
	outline: 2px solid var(--white);
	outline-offset: 3px;
}

/* Laptop - mniej miejsca na znak wodny */

@media (max-width: 1280px) {
	.jsl .section,
	.jsl .manifest,
	.jsl .hero__text {
		padding-left: calc(3vw + 70px);
	}

	.jsl .header-info {
		padding-left: 24px;
	}

	.jsl .nav ul {
		gap: 22px;
	}

	.jsl .vwm {
		font-size: 80px;
	}
}

/* 9 pozycji menu: najpierw znika imię, potem dane, potem menu zwija się do przycisku */
@media (max-width: 1700px) {
	.jsl .header-info__name {
		display: none;
	}

	.jsl .nav ul {
		gap: 22px;
	}
}

/* display: none, nie visibility - ukryte dane zajmowały miejsce i menu łamało się na dwie linie */
@media (max-width: 1600px) {
	.jsl .header-info {
		display: none;
	}

	.jsl .nav {
		margin-left: auto;
	}
}

@media (max-width: 1440px) {
	.jsl .frame__info {
		padding: 0 24px;
	}
}

/* 10 pozycji menu (doszły „Realizacje") - przy wąskim laptopie mniejsze odstępy, potem od 1180 px przycisk Menu.
   Musi stać po regule 1700 px, która też ustawia gap. */
@media (max-width: 1280px) {
	.jsl .nav ul {
		gap: 15px;
	}

	.jsl .nav a {
		letter-spacing: 1.5px;
	}
}

@media (max-width: 1180px) {
	.jsl .nav-toggle {
		display: inline-flex;
	}

	.jsl .nav {
		display: none;
		position: absolute;
		top: 100%;
		right: 0;
		width: min(360px, 100vw);
		padding: 10px 24px 26px;
		background: var(--bg);
		border: 1px solid var(--line);
		box-shadow: 0 18px 30px rgba(0, 0, 0, 0.4);
	}

	.jsl .nav.is-open {
		display: block;
	}

	.jsl .nav ul {
		flex-direction: column;
		align-items: stretch;
		gap: 0;
	}

	.jsl .nav a {
		display: block;
		padding: 14px 0;
		font-size: 12px;
		border-bottom: 1px solid var(--line);
	}

	.jsl .nav .nav__cta {
		margin-top: 18px;
		padding: 14px;
		text-align: center;
	}
}

/* Telefon i tablet - bez ramki */

@media (max-width: 900px) {
	:root {
		--frame: 0px;
	}

	.jsl .frame,
	.jsl .header-info {
		display: none;
	}

	.jsl .site-header {
		padding: 0 20px 0 0;
	}

	.jsl .site-header::after {
		display: none;
	}

	.jsl .logo-mark {
		flex-basis: 62px;
	}

	.jsl .nav-toggle {
		display: inline-flex;
	}

	.jsl .nav {
		display: none;
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		width: auto;
		padding: 10px 20px 26px;
		background: var(--bg);
		border: 0;
		border-bottom: 1px solid var(--line);
		box-shadow: 0 18px 30px rgba(0, 0, 0, 0.4);
	}

	.jsl .nav.is-open {
		display: block;
	}

	.jsl .nav ul {
		flex-direction: column;
		align-items: stretch;
		gap: 0;
	}

	.jsl .nav a {
		display: block;
		padding: 16px 0;
		font-size: 13px;
		border-bottom: 1px solid var(--line);
	}

	.jsl .nav .nav__cta {
		margin-top: 18px;
		padding: 16px;
		text-align: center;
	}

	.jsl .hero {
		grid-template-columns: 1fr;
		min-height: 0;
	}

	.jsl .hero__title {
		font-size: clamp(38px, 11vw, 64px);
	}

	.jsl .hero__text {
		gap: 40px;
		padding: 56px 20px 44px;
	}

	.jsl .hero__side,
	.jsl .hero__text::after,
	.jsl .vwm {
		display: none;
	}

	.jsl .hero__image {
		min-height: 70vh;
		min-height: 70svh; /* iPhone: bez skoku przy chowaniu paska adresu */
	}

	.jsl .section {
		min-height: 0;
		padding: 80px 20px;
	}

	.jsl .manifest {
		padding: 64px 20px;
	}

	.jsl .statement {
		padding: 70px 20px;
	}

	.jsl .manifest--photo {
		min-height: 0;
	}

	.jsl .split,
	.jsl .job,
	.jsl .columns,
	.jsl .services,
	.jsl .posts,
	.jsl .works,
	.jsl .contact {
		grid-template-columns: 1fr;
	}

	.jsl .works,
	.jsl .timeline,
	.jsl .services,
	.jsl .posts,
	.jsl .brands,
	.jsl .steps {
		margin-top: 44px;
	}

	.jsl .work {
		min-height: 220px;
		padding: 28px;
	}

	.jsl .work__no {
		top: 24px;
		left: 28px;
	}

	.jsl .works.carousel,
	.jsl .posts.carousel {
		grid-template-columns: none;
		grid-auto-columns: 100%;
	}

	.jsl .works__page {
		grid-template-columns: 1fr;
		gap: 16px;
	}

	/* Tablet (601-900 px): 2 kafle realizacji obok siebie zamiast jednego na całą szerokość */
	@media (min-width: 601px) {
		.jsl .works__page {
			grid-template-columns: repeat(2, 1fr);
		}
	}

	html:not(.js) .jsl .section__map,
	.jsl .section__map.is-loaded {
		background-image: image-set(url("map-olsztyn-1200.webp") type("image/webp"), url("map-olsztyn-1200.jpg") type("image/jpeg"));
	}

	.jsl .section__map::after {
		background: rgba(31, 36, 65, 0.7);
	}

	.jsl .section--map .contact__form {
		padding: 26px 20px;
	}

	.jsl .brands__page {
		grid-template-columns: repeat(2, 1fr);
		gap: 16px;
	}

	.jsl .brand {
		height: 96px;
		padding: 16px;
	}

	.jsl .brand--name {
		font-size: 16px;
	}

	.jsl .slider {
		margin-top: 32px;
	}

	.jsl .quote {
		grid-template-columns: 1fr;
		gap: 20px;
		padding: 30px 26px 40px;
	}

	.jsl .quote__avatar {
		width: 60px;
		height: 60px;
		font-size: 22px;
	}

	.jsl .quote--logo {
		grid-template-columns: 1fr;
	}

	.jsl .quote__logo img {
		max-width: 120px;
	}

	.jsl .services,
	.jsl .posts {
		gap: 40px;
	}

	.jsl .service {
		grid-template-columns: 1fr;
	}

	.jsl .service__icon {
		grid-row: auto;
		margin-bottom: 20px;
	}

	.jsl .steps {
		grid-template-columns: 1fr 1fr;
		gap: 30px 24px;
	}

	.jsl .split,
	.jsl .columns {
		gap: 40px;
	}

	.jsl .job {
		grid-template-columns: 31px 1fr;
		gap: 10px 20px;
	}

	.jsl .job__date {
		grid-row: span 2;
	}

	.jsl .job__list {
		grid-template-columns: 1fr;
	}


	.jsl .contact {
		gap: 56px;
	}

	.jsl .site-footer {
		padding: 70px 20px 24px;
	}

	.jsl .footer__grid,
	.jsl .footer__row {
		grid-template-columns: 1fr;
	}

	.jsl .footer__row {
		gap: 32px;
	}

	.jsl .footer__col--offset {
		padding-top: 0;
	}

	.jsl .footer__bottom {
		margin-top: 60px;
	}

	/* Telefon: 4 elementy w równej siatce 2×2 zamiast nierównego zawijania */
	.jsl .footer__bottom {
		display: grid;
		grid-template-columns: 1fr auto;
		align-items: center;
	}

	.jsl .footer__bottom > :nth-child(even) {
		text-align: right;
	}

	/* Telefon: linia od krawędzi ekranu zostawiała przy lewym brzegu tylko 2 px - krótka kreska przed tekstem */
	.jsl :is(.line-link, .wp-block-button.is-style-jsl-line > .wp-block-button__link):not(:is(.line-link--short, .line-link--short .wp-block-button__link)) {
		padding-left: 46px;
	}

	.jsl :is(.line-link, .wp-block-button.is-style-jsl-line > .wp-block-button__link):not(:is(.line-link--short, .line-link--short .wp-block-button__link))::before {
		right: auto;
		left: 0;
		width: 32px;
	}

	/* O mnie: liczby w wierszach (3 kolumny na 390 px nie mieszczą „1000+") */
	.jsl .stats {
		grid-template-columns: 1fr;
		gap: 18px;
	}

	.jsl .stat {
		display: grid;
		grid-template-columns: 146px 1fr; /* „1000+" ma 130 px */
		align-items: center;
		gap: 16px;
	}

	.jsl .stat__num {
		font-size: 40px;
	}

	.jsl .stat__label {
		margin-top: 0;
	}

	/* Wariant od prawej na telefonie: krótka kreska za tekstem */
	.jsl :is(.line-link, .wp-block-button.is-style-jsl-line > .wp-block-button__link).line-link--right {
		padding-left: 0;
		padding-right: 46px;
	}

	.jsl :is(.line-link, .wp-block-button.is-style-jsl-line > .wp-block-button__link).line-link--right::before {
		left: auto;
		right: 0;
	}
}

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

	.jsl * {
		transition: none !important;
	}

	.jsl .js .reveal {
		opacity: 1;
		transform: none;
	}
}

/* ===== Blog (blog/) - lista wpisów i artykuł ===== */

/* Podstrony bloga: bez przyciągania do sekcji (długi tekst), bez licznika sekcji w ramce */
html.page-blog {
	scroll-snap-type: none;
}

.jsl .page-blog .frame__count {
	visibility: hidden;
}

.jsl .blog-head {
	min-height: 0;
	padding-bottom: 40px;
}

.jsl .blog-head h1 {
	margin: 0;
	font-size: clamp(40px, 4.4vw, 64px);
	font-weight: 600;
	line-height: 1.08;
	letter-spacing: -0.01em;
}

.jsl .blog-list {
	min-height: 0;
	padding-top: 20px;
}

.jsl .blog-list .posts {
	margin-top: 0;
}

.jsl .blog-group {
	margin: 70px 0 30px;
	padding-top: 30px;
	font-size: clamp(24px, 2.2vw, 32px);
	border-top: 1px solid var(--line);
}

.jsl .blog-group:first-child {
	margin-top: 0;
	padding-top: 0;
	border-top: 0;
}

.jsl .breadcrumbs {
	margin: 0 0 28px;
	padding: 0;
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	font-family: var(--head);
	font-size: 12px;
	letter-spacing: 1px;
	text-transform: uppercase;
	color: var(--muted);
}

.jsl .breadcrumbs li + li::before {
	content: "/";
	margin-right: 6px;
	color: var(--accent);
}

@media (hover: hover) {
	.jsl .breadcrumbs a:hover {
		color: var(--white);
	}
}

/* Artykuł */

.jsl .article {
	position: relative;
	padding: 90px 5vw 110px calc(4vw + 90px);
}

.jsl .article__inner {
	max-width: 760px;
	margin: 0 auto;
}

/* Spis treści z boku wpisu - od 1281 px, przyklejony przy przewijaniu */
.jsl .toc {
	display: none;
}

@media (min-width: 1281px) {
	.jsl .article {
		display: grid;
		grid-template-columns: 230px minmax(0, 760px);
		justify-content: center;
		column-gap: 80px;
	}

	.jsl .article__inner {
		margin: 0;
	}

	/* Strona bez spisu treści (polityka prywatności) - jedna kolumna */
	.jsl .article--plain {
		grid-template-columns: minmax(0, 760px);
	}

	.jsl .toc {
		display: block;
		position: sticky;
		top: calc(var(--header-h) + 50px);
		align-self: start;
		max-height: calc(100vh - var(--header-h) - var(--frame) - 100px);
		overflow-y: auto;
		margin-top: 200px;
		padding-left: 18px;
		border-left: 1px solid var(--line);
		scrollbar-width: none;
	}
}

.jsl .toc__label {
	margin: 0 0 16px;
	font-family: var(--head);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 2px;
	text-transform: uppercase;
	color: var(--accent);
}

.jsl .toc ol {
	margin: 0;
	padding: 0;
	list-style: none;
}

.jsl .toc li + li {
	margin-top: 4px;
}

.jsl .toc a {
	position: relative;
	display: block;
	padding: 5px 0;
	font-family: var(--head);
	font-size: 13px;
	font-weight: 500;
	line-height: 1.4;
	color: var(--muted);
	transition: color 0.2s ease;
}

.jsl .toc a.is-active {
	color: var(--white);
}

@media (hover: hover) {
	.jsl .toc a:hover {
		color: var(--white);
	}
}

/* Bieżący rozdział - miętowy znacznik na linii spisu */
.jsl .toc a.is-active::before {
	content: "";
	position: absolute;
	top: 5px;
	bottom: 5px;
	left: -19px;
	border-left: 2px solid var(--accent);
}

.jsl .article__body h2 {
	scroll-margin-top: 30px;
}

.jsl .article h1 {
	margin: 0;
	font-size: clamp(34px, 3.6vw, 54px);
	font-weight: 600;
	line-height: 1.12;
	letter-spacing: -0.01em;
}

.jsl .article__meta {
	display: flex;
	flex-wrap: wrap;
	gap: 6px 22px;
	margin: 24px 0 0;
	padding: 0;
	list-style: none;
	font-family: var(--head);
	font-size: 13px;
	color: var(--muted);
}

.jsl .article__meta strong {
	font-weight: 600;
	color: var(--white);
}

/* Krótka odpowiedź na górze - z niej najczęściej cytują wyszukiwarki i AI */
.jsl .tldr {
	margin: 40px 0 48px;
	padding: 26px 30px;
	font-family: var(--head);
	font-size: 19px;
	font-weight: 500;
	line-height: 1.55;
	color: var(--white);
	background: var(--surface);
	border-left: 3px solid var(--accent);
}

.jsl .tldr p {
	margin: 0;
}

.jsl .tldr__label {
	display: block;
	margin-bottom: 8px;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 2px;
	text-transform: uppercase;
	color: var(--accent);
}

.jsl .article__body {
	font-size: 17px;
	line-height: 1.8;
}

.jsl .article__body h2 {
	margin: 56px 0 18px;
	font-size: clamp(26px, 2.4vw, 34px);
}

.jsl .article__body h3 {
	margin: 32px 0 10px;
	font-size: 19px;
}

.jsl .article__body p,
.jsl .article__body ul,
.jsl .article__body ol {
	margin: 0 0 20px;
}

.jsl .article__body a {
	color: var(--accent);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.jsl .article__body .ticks {
	margin-bottom: 24px;
}

/* Cytat we wpisie (np. dosłowna odpowiedź modelu AI) */
.jsl .article__body blockquote {
	margin: 28px 0 32px;
	padding: 4px 0 4px 26px;
	font-family: var(--head);
	font-size: 18px;
	font-weight: 500;
	line-height: 1.6;
	color: var(--white);
	border-left: 3px solid var(--accent);
}

.jsl .article__body blockquote p {
	margin: 0;
}

.jsl .table-wrap {
	margin: 28px 0 32px;
	overflow-x: auto;
}

.jsl .article__body table {
	width: 100%;
	border-collapse: collapse;
	font-size: 15px;
	line-height: 1.55;
}

.jsl .article__body th,
.jsl .article__body td {
	padding: 14px 16px;
	text-align: left;
	vertical-align: top;
	border-bottom: 1px solid var(--line);
}

.jsl .article__body th {
	font-family: var(--head);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 1.5px;
	text-transform: uppercase;
	color: var(--accent);
	border-bottom-color: #3b4472;
}

.jsl .article__body td:first-child {
	color: var(--white);
}

/* Ramka „Z mojej pracowni” - wkład własny z projektu */
.jsl .case {
	margin: 36px 0;
	padding: 28px 30px;
	background: var(--surface);
}

.jsl .case__label {
	margin: 0 0 10px !important;
	font-family: var(--head);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 2px;
	text-transform: uppercase;
	color: var(--accent);
}

.jsl .case p:last-child {
	margin-bottom: 0;
}

/* Miejsce do uzupełnienia przez autorkę - widoczne tylko w szkicu, przed publikacją usunąć */
.jsl .draft-note {
	padding: 14px 18px;
	font-family: var(--head);
	font-size: 14px;
	line-height: 1.6;
	color: var(--accent);
	border: 1px dashed var(--accent);
}

.jsl .draft-banner {
	margin: 0 0 32px;
	padding: 12px 18px;
	font-family: var(--head);
	font-size: 13px;
	color: var(--bg);
	background: var(--accent);
}

/* FAQ - rozwijane pytania */
.jsl .faq {
	margin: 20px 0 0;
	border-top: 1px solid var(--line);
}

.jsl .faq details {
	border-bottom: 1px solid var(--line);
}

.jsl .faq summary {
	position: relative;
	padding: 20px 40px 20px 0;
	font-family: var(--head);
	font-size: 17px;
	font-weight: 600;
	color: var(--white);
	cursor: pointer;
	list-style: none;
}

.jsl .faq summary::-webkit-details-marker {
	display: none;
}

.jsl .faq summary::after {
	content: "+";
	position: absolute;
	top: 50%;
	right: 4px;
	font-size: 24px;
	font-weight: 400;
	color: var(--accent);
	transform: translateY(-50%);
}

.jsl .faq details[open] summary::after {
	content: "\2212";
}

.jsl .faq details > p {
	margin: 0 0 22px;
}

/* Autorka pod wpisem (E-E-A-T: imię, nazwisko, doświadczenie) */
.jsl .author {
	display: grid;
	grid-template-columns: 96px 1fr;
	gap: 24px;
	align-items: center;
	margin: 64px 0 0;
	padding: 30px 0 0;
	border-top: 1px solid var(--line);
}

.jsl .author img {
	width: 96px;
	height: 96px;
	object-fit: cover;
	object-position: top;
	border-radius: 50%;
}

.jsl .author__name {
	margin: 0 0 6px;
	font-family: var(--head);
	font-size: 17px;
	font-weight: 700;
	color: var(--white);
}

.jsl .author p {
	margin: 0;
	font-size: 14px;
	line-height: 1.65;
}

.jsl .article__cta {
	margin: 56px 0 0;
	padding: 36px 36px 40px;
	background: var(--accent);
	color: var(--bg);
}

.jsl .article__cta h2 {
	margin: 0 0 10px;
	font-size: 28px;
	color: var(--bg);
}

.jsl .article__cta p {
	margin: 0 0 22px;
}

.jsl .article__cta :is(.button, .wp-block-button:not(.is-style-jsl-line) > .wp-block-button__link) {
	color: var(--white);
	background: var(--bg);
	border-color: var(--bg);
}

/* „More to love” pod autorem wpisu - znak wodny i wpisy do dalszej lektury, z dużym oddechem */
.jsl .more {
	position: relative;
	overflow: hidden;
	/* Poprzedni / następny wpis leżą na znaku wodnym - oba wyśrodkowane w pionie */
	padding: 220px 5vw 220px calc(4vw + 90px);
	border-top: 1px solid var(--line);
}

.jsl .more__wm {
	position: absolute;
	top: 50%;
	left: 50%;
	font-family: var(--head);
	font-size: clamp(80px, 13vw, 240px);
	font-weight: 800;
	line-height: 1;
	letter-spacing: -0.02em;
	white-space: nowrap;
	color: rgb(255 255 255 / 0.05);
	transform: translate(-50%, -50%);
	pointer-events: none;
	user-select: none;
}

/* Poprzedni / następny wpis - same tytuły, strzałka nad tytułem */
.jsl .pager {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 40px 80px;
}

.jsl .pager__link {
	display: flex;
	flex-direction: column;
	gap: 16px;
	max-width: 440px;
}

.jsl .pager__link--next {
	justify-self: end;
	align-items: flex-end;
	text-align: right;
}

.jsl .pager__label {
	display: inline-flex;
	align-items: center;
	gap: 14px;
	font-family: var(--head);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 2px;
	text-transform: uppercase;
	color: var(--muted);
	transition: color 0.2s ease;
}

.jsl .pager__label svg {
	transition: transform 0.2s ease;
}

.jsl .pager__title {
	font-family: var(--head);
	font-size: clamp(20px, 1.8vw, 26px);
	font-weight: 600;
	line-height: 1.3;
	color: var(--white);
	transition: color 0.2s ease;
}

@media (hover: hover) {
	.jsl .pager__link:hover .pager__label,
	.jsl .pager__link:hover .pager__title {
		color: var(--accent);
	}
}

@media (hover: hover) {
	.jsl .pager__link--prev:hover svg {
		transform: translateX(-5px);
	}
}

@media (hover: hover) {
	.jsl .pager__link--next:hover svg {
		transform: translateX(5px);
	}
}

@media (max-width: 900px) {
	.jsl .article {
		padding: 56px 20px 80px;
	}

	.jsl .more {
		padding: 120px 20px;
	}

	.jsl .more__wm {
		font-size: 64px;
	}

	.jsl .pager {
		grid-template-columns: 1fr;
	}

	.jsl .tldr {
		padding: 22px;
		font-size: 17px;
	}

	.jsl .case,
	.jsl .article__cta {
		padding: 24px 22px;
	}

	.jsl .author {
		grid-template-columns: 72px 1fr;
		gap: 18px;
	}

	.jsl .author img {
		width: 72px;
		height: 72px;
	}
}
/* ===== Ekrany o ograniczonej wysokości (laptopy 1440×900, monitory 1080 px z paskami przeglądarki) =====
   Sekcje mają min. wysokość ekranu i wyśrodkowaną treść - tam, gdzie miejsca jest dość, wygląd się nie zmienia.
   Blok na końcu pliku, żeby wygrywał ze stylami sekcji. */
@media (min-width: 901px) and (max-height: 1100px) {
	.jsl .entry-content > .section {
		padding-top: 20px;
		padding-bottom: 20px;
	}

	.jsl #uslugi {
		padding-top: 18px;
		padding-bottom: 18px;
	}

	.jsl .section__lead {
		margin-top: 12px;
	}

	/* Realizacje */
	.jsl .works {
		margin-top: 28px;
	}

	.jsl .work {
		min-height: 150px;
		padding: 24px 32px;
	}

	.jsl .work__no {
		top: 22px;
	}

	.jsl .work__logo {
		padding-top: 26px;
	}

	.jsl #prace .section__cta,
	.jsl #dziennik .section__cta {
		margin-top: 26px;
	}

	/* Dziennik - niższe miniatury wpisów */
	.jsl #dziennik .posts {
		margin-top: 32px;
	}

	.jsl #dziennik .post__thumb {
		aspect-ratio: 21 / 9;
		margin-bottom: 16px;
		font-size: 56px;
	}

	/* Kontakt - zwarty formularz */
	.jsl .section--map .contact__form {
		padding: 26px 30px;
	}

	.jsl .contact__intro {
		margin-bottom: 18px;
		font-size: clamp(20px, 1.6vw, 26px);
	}

	.jsl .field {
		margin-bottom: 14px;
	}

	.jsl .field input,
	.jsl .field textarea {
		padding: 6px 0;
	}

	/* Pole na telefon + klauzula RODO - niższe pole wiadomości, żeby formularz zmieścił się na 900 px */
	.jsl .field textarea {
		height: 76px;
	}

	.jsl .contact__legal {
		margin-bottom: 12px;
	}

	.jsl .contact__form :is(.button, .wp-block-button:not(.is-style-jsl-line) > .wp-block-button__link) {
		margin-top: 0;
	}

	.jsl .contact__city {
		margin-top: 26px;
	}
}

/* Ekrany dotykowe (telefony, tablety, iPad): cele dotyku min. 44 × 44 px - Apple HIG i WCAG 2.5.5 (jak w cv-portfolio) */
@media (pointer: coarse) {
	.jsl .slider-nav__btn {
		min-height: 44px;
		align-items: center;
		padding: 0 8px;
	}

	.jsl .nav-toggle {
		min-height: 44px;
	}

	/* Checkbox RODO: większe pole (cała etykieta też jest klikalna) */
	.jsl .contact__legal input {
		width: 24px;
		height: 24px;
		margin-top: -2px;
		background-size: 16px;
	}

	.jsl :is(.line-link, .wp-block-button.is-style-jsl-line > .wp-block-button__link) {
		padding-top: 11px;
		padding-bottom: 11px;
	}

	.jsl .footer__col a,
	.jsl .footer__bottom a {
		display: inline-flex;
		align-items: center;
		min-height: 44px;
	}

	.jsl .site-footer .footer__social,
	.jsl .frame__social a,
	.jsl .contact__list .contact__icon {
		min-width: 44px;
		min-height: 44px;
	}
}
/* Formularz: pułapka na boty i komunikat po wysyłce (17.10.2026) */
.jsl .contact__hp {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	opacity: 0;
}

.jsl .contact__status {
	margin: 0;
	padding: 12px 16px;
	border-left: 3px solid var(--accent);
	color: var(--text);
	font-size: 0.95rem;
}

.jsl .contact__status.is-error {
	border-left-color: #ff8a80;
}

/* Baner zgody na Google Analytics (analytics.js) - 17.10.2026 */
.jsl .consent {
	position: fixed;
	z-index: 50;
	left: 16px;
	right: 16px;
	bottom: max(16px, env(safe-area-inset-bottom));
	max-width: 520px;
	margin: 0 auto;
	padding: 18px 20px;
	background: var(--surface);
	border: 1px solid var(--line);
	border-left: 3px solid var(--accent);
	box-shadow: 0 12px 32px rgba(0, 0, 0, 0.35);
	font-family: var(--body);
	color: var(--text);
}

.jsl .consent__text {
	margin: 0 0 14px;
	font-size: 15px;
	line-height: 1.5;
}

.jsl .consent__text a {
	color: var(--accent);
}

.jsl .consent__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	justify-content: flex-end;
}

.jsl .consent__btn {
	min-height: 44px;
	padding: 10px 18px;
	border: 1px solid var(--accent);
	background: var(--accent);
	color: var(--bg);
	font-family: var(--head);
	font-weight: 700;
	font-size: 14px;
	cursor: pointer;
}

.jsl .consent__btn--ghost {
	background: transparent;
	color: var(--text);
	border-color: var(--line);
}

.jsl .consent__btn:focus-visible {
	outline: 2px solid var(--white);
	outline-offset: 2px;
}

.jsl .cookie-settings {
	padding: 0;
	border: 0;
	background: none;
	color: var(--accent);
	font: inherit;
	text-decoration: underline;
	cursor: pointer;
}


/* ===== v5 MOST: Blocksy + Gutenberg -> uklad statycznej strony (17.10.2026) ===== */

/* Zmienne Blocksy pod palete i fonty strony */
:root {
	--theme-font-family: var(--body);
	--theme-text-color: var(--text);
	--theme-headings-color: var(--white);
	--theme-link-initial-color: inherit;
	--theme-link-hover-color: var(--accent);
	--theme-border-color: var(--line);
	--theme-button-border-radius: 0;
	--theme-button-min-height: 0;
	--theme-content-spacing: 0;
}
body.jsl {
	font-family: var(--body);
	font-size: 16px;
	line-height: 1.65;
	color: var(--text);
	background: var(--bg);
}
body.jsl :is(h1, h2, h3, h4) {
	font-family: var(--head);
	color: var(--white);
}

/* Glowny kontener: bez szerokosci i odstepow Blocksy, ramka po bokach */
#main {
	margin: 0 var(--frame);
}
.jsl #main > .ct-container-full,
.jsl #main > .ct-container,
:is(.jsl-home, .jsl-blog, .jsl-page) #main article,
:is(.jsl-home, .jsl-blog, .jsl-page) #main .entry-content {
	max-width: none;
	width: auto;
	padding: 0;
	margin: 0;
}
:is(.jsl-home, .jsl-blog, .jsl-page) .entry-content > * {
	max-width: none;
	margin-inline: 0;
	width: auto;
}
.jsl [data-vertical-spacing] {
	padding-top: 0;
	padding-bottom: 0;
}
.jsl .wp-block-group.alignfull {
	margin-inline: 0 !important;
	max-width: none !important;
	width: auto;
}

/* Przyciski Gutenberga = przyciski strony (kanty, bez min-wysokosci Blocksy) */
/* :where - zerowa waga, żeby marginesy ze style.css (.section__cta, .hero__actions) wygrywały */
.jsl :where(.wp-block-buttons) {
	margin: 0;
}

/* Pola formularza: Blocksy narzuca wysokość 40 px (textarea 170 px) i font 15 px - wracamy do arkusza strony */
.jsl .contact__form :is(input:not([type="checkbox"]), textarea) {
	height: auto;
	min-height: 0;
	font-size: 16px;
	line-height: 1.65;
}
.jsl .wp-block-button__link {
	border-radius: 0;
	min-height: 0;
	text-decoration: none;
	box-sizing: border-box;
}
.jsl .is-style-jsl-line > .wp-block-button__link::before {
	display: block;
	opacity: 1;
	z-index: auto;
	background: none;
	filter: none;
	bottom: auto;
	height: auto;
}
.jsl .wp-block-buttons:not(.line-link--short) .is-style-jsl-line > .wp-block-button__link::before {
	left: auto;
}
/* Blocksy: odstep pod naglowkami w tresci (0.3em + 10px) - w ukladzie strony marginesy ustawia style.css */
.jsl .entry-content {
	--has-theme-content-spacing: 0;
}
.jsl .is-style-jsl-line > .wp-block-button__link {
	padding: 6px 0;
	background: none;
	border: 0;
	box-shadow: none;
}

/* ---- Naglowek Blocksy = .site-header ---- */
#header {
	font-family: var(--head);
	font-size: 12px;
	color: var(--text);
}
#header [data-row="middle"] {
	/* 61 px + linia 1 px = 62 px jak w statycznej */
	--height: 61px;
	position: relative;
	background: var(--bg);
	border-bottom: 1px solid var(--line);
}
#header [data-row="middle"] > .ct-container {
	max-width: none;
	width: 100%;
	height: 100%;
	padding: 0 calc(var(--frame) + 30px) 0 0;
}
#header [data-device="desktop"] [data-row="middle"]::after {
	content: "";
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	width: var(--frame);
	border-left: 1px solid var(--line);
	pointer-events: none;
}
#header [data-column="start"],
#header [data-column="start"] > [data-items] {
	height: 100%;
	align-items: stretch;
	gap: 0;
}
#header .site-branding {
	display: flex;
	flex: 0 0 62px;
	width: 62px;
	align-items: center;
	justify-content: center;
	margin: 0;
	border-right: 1px solid var(--line);
}
#header .site-title-container,
#header .site-title {
	display: flex;
	width: 100%;
	height: 100%;
	margin: 0;
	line-height: 1;
}
#header .site-title a {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	font-size: 0;
	color: var(--white);
	transition: color 0.2s ease;
}
#header .site-title a::before {
	content: "JŚ";
	font-family: var(--head);
	font-size: 18px;
	font-weight: 800;
	letter-spacing: -0.02em;
}
#header .site-title a::after {
	content: ".";
	font-family: var(--head);
	font-size: 18px;
	font-weight: 800;
	color: var(--accent);
}
@media (hover: hover) {
	#header .site-title a:hover {
		color: var(--accent);
	}
}
#header .ct-header-text {
	display: flex;
	align-items: center;
	margin: 0;
	--theme-link-initial-color: var(--text);
}
#header .ct-header-text .entry-content {
	width: auto;
}
#header .header-info {
	margin: 0;
}

/* Menu poziome */
#header [data-id="menu"] {
	--menu-items-spacing: 0px;
	height: 100%;
}
#header [data-id="menu"] > ul {
	display: flex;
	align-items: stretch;
	gap: 32px;
	height: 100%;
}
#header [data-id="menu"] > ul > li {
	position: relative;
	display: flex;
	align-items: center;
}
#header [data-id="menu"] > ul > li > a.ct-menu-link {
	position: static;
	display: inline-block;
	height: auto;
	padding: 10px 0;
	font-family: var(--head);
	font-size: 11px;
	font-weight: 600;
	line-height: 1.65;
	letter-spacing: 1.8px;
	text-transform: uppercase;
	white-space: nowrap;
	color: var(--text);
	transition: color 0.2s ease;
}
#header [data-id="menu"] > ul > li:not(.nav__cta) > a.ct-menu-link::after {
	content: "";
	position: absolute;
	right: 0;
	bottom: -1px;
	left: 0;
	height: 2px;
	background: var(--accent);
	opacity: 1;
	transform: scaleX(0);
	transition: transform 0.25s ease;
}
#header [data-id="menu"] > ul > li > a.ct-menu-link.is-active,
#header [data-id="menu"] > ul > li > a.ct-menu-link:hover {
	color: var(--white);
}
#header [data-id="menu"] > ul > li > a.ct-menu-link.is-active {
	color: var(--accent);
}
#header [data-id="menu"] > ul > li > a.ct-menu-link:hover::after,
#header [data-id="menu"] > ul > li > a.ct-menu-link.is-active::after {
	transform: scaleX(1);
}
#header [data-id="menu"] li.nav__cta > a.ct-menu-link {
	padding: 10px 22px;
	color: var(--bg);
	background: var(--accent);
	transition: background 0.2s ease;
}
#header [data-id="menu"] li.nav__cta > a.ct-menu-link:hover {
	color: var(--bg);
	background: var(--white);
}
#header [data-id="menu"] li.nav__cta > a.ct-menu-link.is-active {
	color: var(--bg);
	background: var(--white);
}

/* Przycisk "Menu" (telefon) */
#header [data-id="trigger"] {
	--theme-icon-color: var(--white);
	gap: 10px;
	font-family: var(--head);
	color: var(--white);
}
#header [data-id="trigger"] .ct-icon {
	display: none;
}
#header [data-id="trigger"]::before {
	content: "";
	width: 22px;
	height: 8px;
	border-top: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	box-sizing: border-box;
}
#header [data-id="trigger"] .ct-label {
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 1.8px;
	text-transform: uppercase;
	color: var(--white);
}

/* Panel menu na telefonie */
#offcanvas .ct-panel-inner {
	background: var(--bg);
}
#offcanvas [data-id="mobile-menu"] ul {
	display: flex;
	flex-direction: column;
	gap: 0;
	width: 100%;
}
#offcanvas [data-id="mobile-menu"] li {
	width: 100%;
}
#offcanvas [data-id="mobile-menu"] .ct-menu-link {
	display: block;
	width: 100%;
	padding: 16px 0;
	font-family: var(--head);
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 1.8px;
	text-transform: uppercase;
	color: var(--text);
	border-bottom: 1px solid var(--line);
}
#offcanvas [data-id="mobile-menu"] li.nav__cta .ct-menu-link {
	margin-top: 18px;
	padding: 16px;
	text-align: center;
	color: var(--bg);
	background: var(--accent);
	border: 0;
}

/* ---- Stopka Blocksy = .site-footer ---- */
#footer [data-row] > .ct-container {
	display: block;
	max-width: none;
	width: auto;
	padding: 0;
}
#footer [data-row="middle"] {
	padding: 0;
	background: var(--bg);
}
#footer .ct-widget {
	margin: 0;
}
#footer {
	font-family: var(--head);
	--theme-link-initial-color: inherit;
}

/* Telefon i tablet: Blocksy przelacza naglowek na wersje mobilna ponizej 1000 px */
@media (max-width: 999.98px) {
	#header [data-row="middle"] > .ct-container {
		padding: 0 20px 0 0;
	}
}
@media (max-width: 1700px) {
	#header .header-info__name {
		display: none;
	}
	#header [data-id="menu"] > ul {
		gap: 22px;
	}
}
@media (max-width: 1600px) {
	#header .ct-header-text {
		display: none;
	}
}
@media (max-width: 1280px) {
	#header [data-id="menu"] > ul {
		gap: 22px;
	}
}
@media (max-width: 1180px) {
	#header [data-id="menu"] > ul {
		gap: 16px;
	}
	#header [data-id="menu"] > ul > li > a.ct-menu-link {
		letter-spacing: 1px;
	}
}

/* Drobne roznice <p> -> blok Gutenberga */
.jsl .prose > .section__cta {
	margin: 0 0 14px;
}
.jsl-home .entry-content > .statement {
	margin-inline: 0 !important;
	max-width: none !important;
}
.jsl .statement figcaption {
	text-align: start;
}

/* Stopka widoczna na wszystkich podstronach, takze blog i polityka (Jacek 19.10.2026) */
/* mala stopka bloga zbedna obok pelnej stopki (dublowala copyright i polityke) */
.jsl-blog footer.site-footer {
	display: none;
}

/* Kotwice: odstep od naglowka daje scroll-padding-top strony; Blocksy dokladal drugi (scroll-margin na :target) */
.jsl :target {
	scroll-margin-top: 0;
}

/* ---- v5 szkice: case study (realizacja) i strony uslug ---- */
.jsl .jsl-case-head h1 {
	margin: 0;
	font-size: clamp(32px, 3.4vw, 52px);
	font-weight: 600;
	line-height: 1.12;
}
.jsl .jsl-case {
	min-height: 0;
	padding-top: 20px;
}
.jsl .jsl-case__grid {
	display: grid;
	grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
	gap: 60px;
	align-items: start;
}
.jsl .jsl-case .project__meta {
	margin: 0 0 26px;
}
.jsl .jsl-case .project__desc {
	margin: 0 0 16px;
}
.jsl .project__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin-top: 28px;
}
.jsl .jsl-case__gallery {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 12px;
	margin: 0;
}
.jsl .jsl-case__gallery .wp-block-image {
	width: auto !important;
	margin: 0 !important;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	background: var(--surface);
}
.jsl .jsl-case__gallery .wp-block-image img {
	width: 100%;
	height: 100% !important;
	object-fit: cover;
	object-position: top;
}
.jsl .jsl-rels {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 24px;
	margin-top: 44px;
}
.jsl .jsl-rel {
	padding: 30px;
	background: var(--surface);
}
.jsl .jsl-rel h3 {
	margin: 0 0 6px;
}
.jsl .jsl-rel .jsl-rel__meta {
	margin: 0 0 14px;
	font-family: var(--head);
	font-size: 11px;
	letter-spacing: 1.5px;
	text-transform: uppercase;
	color: var(--muted);
}
.jsl .jsl-rel p {
	font-size: 15px;
	color: var(--text-soft);
}
.jsl-page .article__cta {
	max-width: 860px;
}
@media (max-width: 900px) {
	.jsl .jsl-case__grid,
	.jsl .jsl-rels {
		grid-template-columns: 1fr;
		gap: 40px;
	}
}
/* Strony uslug: sekcje wysokie na tresc (nie na caly ekran), linki w kaflach bez dlugiej linii */
.jsl-page .entry-content > .section {
	min-height: 0;
	padding-top: 90px;
	padding-bottom: 90px;
}
.jsl-page .entry-content > .blog-head {
	padding-bottom: 40px;
}
.jsl .jsl-rel .is-style-jsl-line > .wp-block-button__link::before {
	display: none;
}
.jsl .jsl-rel .wp-block-buttons {
	margin-top: 16px;
}
@media (max-width: 900px) {
	.jsl-page .entry-content > .section {
		padding: 64px 20px;
	}
}

/* Strony usług: kafle bez ikony - jedna kolumna (na stronie głównej pierwsza kolumna 48 px jest na ikonę) */
.jsl-page .service:not(:has(.service__icon)) {
	grid-template-columns: 1fr;
}

/* Czytaj także pod wpisem (snippet 2, 19.10) */
.jsl .related {
	margin: 48px 0 0;
	padding: 24px 28px;
	background: var(--surface);
	border-left: 3px solid var(--accent);
}
.jsl .related .ticks {
	margin: 12px 0 0;
}
.jsl .related a {
	color: var(--white);
	text-decoration: none;
}
.jsl .related a:hover {
	color: var(--accent);
}

/* Dziennik (19.10): 3 najnowsze wpisy bez karuzeli, zdjecie wypelnia miniature, numer tylko gdy brak zdjecia */
.jsl #dziennik .slider-nav {
	display: none;
}
.jsl .post__thumb--img {
	overflow: hidden;
}
.jsl .post__thumb--img img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
@media (max-width: 900px) {
	.jsl .posts--home {
		grid-template-columns: 1fr;
	}
}

/* Audyt 20.10: kontrast min. 4.5:1 (Lighthouse), podkreślony link w banerze zgody, przycisk menu min. 44 px wysokości */
.jsl .brand--name {
	color: rgb(255 255 255 / 0.72);
}
.jsl .brand--empty {
	color: var(--muted);
}
.jsl .section__map-credit,
.jsl .section__map-credit a {
	font-size: 11px;
	color: var(--muted);
}
.jsl .statement figcaption {
	opacity: 1;
}
.jsl .consent__text a {
	text-decoration: underline;
	text-underline-offset: 2px;
}
.jsl .ct-header-trigger {
	min-height: 44px;
}